Avoid rendering JoinEditor on every state change (#28401) (#28432)

x-pack/plugins/gis/public/components/layer_panel/join_editor/index.js

@@ -6,6 +6,7 @@
 
 import { connect } from 'react-redux';
 import { JoinEditor } from './view';
+import { getSelectedLayer, getSelectedLayerJoinDescriptors } from '../../../selectors/map_selectors';
 import { setJoinsForLayer } from '../../../actions/store_actions';
 
 function mapDispatchToProps(dispatch) {
@@ -16,12 +17,10 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-function mapStateToProps({}, props) {
+function mapStateToProps(state = {}) {
   return {
-    joins: props.layer.getJoins().map(join => {
-      return join.toDescriptor();
-    }),
-    layer: props.layer,
+    joins: getSelectedLayerJoinDescriptors(state),
+    layer: getSelectedLayer(state),
   };
 }
 

x-pack/plugins/gis/public/components/layer_panel/view.js

@@ -49,7 +49,7 @@ export class LayerPanel  extends React.Component {
 
     return (
       <EuiPanel>
-        <JoinEditor layer={this.props.selectedLayer}/>
+        <JoinEditor/>
       </EuiPanel>
     );
   }

x-pack/plugins/gis/public/selectors/map_selectors.js

@@ -135,15 +135,6 @@ export const getDataFilters = createSelector(
 
 export const getDataSources = createSelector(getMetadata, metadata => metadata ? metadata.data_sources : null);
 
-export const getSelectedLayer = createSelector(
-  getSelectedLayerId,
-  getLayerListRaw,
-  getDataSources,
-  (selectedLayerId, layerList, dataSources) => {
-    const selectedLayer = layerList.find(layerDescriptor => layerDescriptor.id === selectedLayerId);
-    return createLayerInstance(selectedLayer, dataSources);
-  });
-
 export const getLayerList = createSelector(
   getLayerListRaw,
   getDataSources,
@@ -152,4 +143,19 @@ export const getLayerList = createSelector(
       createLayerInstance(layerDescriptor, dataSources));
   });
 
+export const getSelectedLayer = createSelector(
+  getSelectedLayerId,
+  getLayerList,
+  (selectedLayerId, layerList) => {
+    return layerList.find(layer => layer.getId() === selectedLayerId);
+  });
+
+export const getSelectedLayerJoinDescriptors = createSelector(
+  getSelectedLayer,
+  (selectedLayer) => {
+    return selectedLayer.getJoins().map(join => {
+      return join.toDescriptor();
+    });
+  });
+
 export const getTemporaryLayers = createSelector(getLayerList, (layerList) => layerList.filter(layer => layer.isTemporary()));

x-pack/plugins/gis/public/shared/layers/sources/ems_file_source.js

@@ -108,10 +108,6 @@ export class EMSFileSource extends VectorSource {
 
   }
 
-  async isTimeAware() {
-    return false;
-  }
-
   canFormatFeatureProperties() {
     return true;
   }

x-pack/plugins/gis/public/shared/layers/sources/vector_source.js

@@ -57,17 +57,14 @@ export class VectorSource extends ASource {
   }
 
   isFilterByMapBounds() {
-    console.warn('Should implement VectorSource#isFilterByMapBounds');
     return false;
   }
 
   async getNumberFields() {
-    console.warn('Should implement VectorSource#getNumberFields');
     return [];
   }
 
   async getStringFields() {
-    console.warn('Should implement VectorSource@getStringFields');
     return [];
   }
 
@@ -93,7 +90,7 @@ export class VectorSource extends ASource {
   }
 
   async isTimeAware() {
-    throw new Error('Should implement');
+    return false;
   }
 
 }

x-pack/plugins/gis/public/shared/layers/vector_layer.js

@@ -223,7 +223,7 @@ export class VectorLayer extends ALayer {
           join: join
         };
       }
-      startLoading(sourceDataId, requestToken, { timeFilters: dataFilters.timeFilters });
+      startLoading(sourceDataId, requestToken, dataFilters);
       const leftSourceName = await this.getSourceName();
       const {
         rawData,