From 73dba52ebda3f74db9bc2565db7ce7362bb9b0ff Mon Sep 17 00:00:00 2001
From: Igor Dykhta <igorDykhta@users.noreply.github.com>
Date: Fri, 30 Sep 2022 19:59:35 +0300
Subject: [PATCH] [Chore] Extra memoization for components to prevent
 re-rendering (#1988)

---
 src/components/src/common/field-selector.tsx  | 14 ++--
 src/components/src/common/histogram-plot.tsx  | 29 +++++---
 .../common/item-selector/item-selector.tsx    |  7 +-
 src/components/src/editor/editor.tsx          |  4 +-
 src/components/src/map-container.tsx          | 71 +++++++++++--------
 src/components/src/notification-panel.tsx     | 13 +++-
 .../src/side-panel/filter-manager.tsx         | 17 +++--
 .../src/side-panel/layer-manager.tsx          | 65 +++++++++--------
 .../layer-panel/dataset-section.tsx           |  6 +-
 .../src/side-panel/panel-header-action.tsx    |  5 +-
 .../src/side-panel/panel-header.tsx           | 55 +++++++-------
 11 files changed, 169 insertions(+), 117 deletions(-)

diff --git a/src/components/src/common/field-selector.tsx b/src/components/src/common/field-selector.tsx
index 2e8d4d99ae..9b34054255 100644
--- a/src/components/src/common/field-selector.tsx
+++ b/src/components/src/common/field-selector.tsx
@@ -129,12 +129,16 @@ function FieldSelectorFactory(
     };
 
     fieldsSelector = props => props.fields;
-    filteredFieldsSelector = props =>
-      props.fields.filter(
-        field =>
-          !toArray(props.value).find(d => (d.name ? d.name === field.name : d === field.name))
-      );
     valueSelector = props => props.value;
+    filteredFieldsSelector = createSelector(
+      this.fieldsSelector,
+      this.valueSelector,
+      (fields, value) => {
+        return fields.filter(
+          field => !toArray(value).find(d => (d.name ? d.name === field.name : d === field.name))
+        );
+      }
+    );
     filterFieldTypesSelector = props => props.filterFieldTypes;
     showTokenSelector = props => props.showToken;
 
diff --git a/src/components/src/common/histogram-plot.tsx b/src/components/src/common/histogram-plot.tsx
index d731166e9a..d1f58cacc8 100644
--- a/src/components/src/common/histogram-plot.tsx
+++ b/src/components/src/common/histogram-plot.tsx
@@ -21,8 +21,8 @@
 import React, {ReactElement, useMemo} from 'react';
 import {scaleLinear} from 'd3-scale';
 import {max} from 'd3-array';
+import {hcl} from 'd3-color';
 import styled from 'styled-components';
-import classnames from 'classnames';
 import {HistogramBin} from '@kepler.gl/types';
 
 const histogramStyle = {
@@ -32,16 +32,23 @@ const histogramStyle = {
 
 const HistogramWrapper = styled.svg`
   overflow: visible;
-  .histogram-bars {
-    rect {
-      fill: ${props => props.theme.histogramFillOutRange};
-    }
-    rect.in-range {
-      fill: ${props => props.theme.histogramFillInRange};
-    }
-  }
 `;
 
+type BarType = {
+  inRange: boolean;
+};
+const BarUnmemoized = styled.rect<BarType>(
+  ({theme, inRange, color}) => `
+  ${
+    inRange
+      ? `fill: ${color ?? theme.histogramFillInRange};`
+      : `fill: ${color ? hcl(color).darker() : theme.histogramFillOutRange};`
+  }
+`
+);
+const Bar = React.memo(BarUnmemoized);
+Bar.displayName = 'Bar';
+
 interface HistogramPlotParams {
   width: number;
   height: number;
@@ -99,8 +106,8 @@ function HistogramPlotFactory() {
               undefinedToZero(bar.x1) <= value[1] && undefinedToZero(bar.x0) >= value[0];
             const wRatio = inRange ? histogramStyle.highlightW : histogramStyle.unHighlightedW;
             return (
-              <rect
-                className={classnames({'in-range': inRange})}
+              <Bar
+                inRange={inRange}
                 key={bar.x0}
                 height={y(getValue(bar))}
                 width={barWidth * wRatio}
diff --git a/src/components/src/common/item-selector/item-selector.tsx b/src/components/src/common/item-selector/item-selector.tsx
index 7736d3ce80..1b1cdeaa17 100644
--- a/src/components/src/common/item-selector/item-selector.tsx
+++ b/src/components/src/common/item-selector/item-selector.tsx
@@ -155,7 +155,7 @@ export type ItemSelectorProps = {
   showDropdownOnMount?: boolean;
 };
 
-class ItemSelector extends Component<ItemSelectorProps> {
+class ItemSelectorUnmemoized extends Component<ItemSelectorProps> {
   static defaultProps = {
     multiSelect: true,
     placeholder: 'placeholder.enterValue',
@@ -374,4 +374,7 @@ class ItemSelector extends Component<ItemSelectorProps> {
   }
 }
 
-export default injectIntl(ItemSelector);
+const ItemSelector = React.memo(ItemSelectorUnmemoized);
+ItemSelector.displayName = 'ItemSelector';
+
+export default injectIntl(ItemSelectorUnmemoized);
diff --git a/src/components/src/editor/editor.tsx b/src/components/src/editor/editor.tsx
index 975c1a5f7d..ab1fc290a3 100644
--- a/src/components/src/editor/editor.tsx
+++ b/src/components/src/editor/editor.tsx
@@ -67,7 +67,7 @@ interface EditorProps {
 export default function EditorFactory(
   FeatureActionPanel: React.FC<FeatureActionPanelProps>
 ): React.ComponentClass<EditorProps> {
-  class Editor extends Component<EditorProps> {
+  class EditorUnmemoized extends Component<EditorProps> {
     static defaultProps = {
       clickRadius: DEFAULT_RADIUS
     };
@@ -227,5 +227,7 @@ export default function EditorFactory(
     }
   }
 
+  const Editor = (React.memo(EditorUnmemoized) as unknown) as typeof EditorUnmemoized;
+  Editor.displayName = 'Editor';
   return Editor;
 }
diff --git a/src/components/src/map-container.tsx b/src/components/src/map-container.tsx
index c6898546d0..e851f66200 100644
--- a/src/components/src/map-container.tsx
+++ b/src/components/src/map-container.tsx
@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 // libraries
-import React, {Component, createRef} from 'react';
+import React, {Component, createRef, useMemo} from 'react';
 import MapboxGLMap, {MapRef} from 'react-map-gl';
 import DeckGL from '@deck.gl/react';
 import {createSelector, Selector} from 'reselect';
@@ -89,6 +89,8 @@ const MAP_STYLE: {[key: string]: React.CSSProperties} = {
   }
 };
 
+const LOCALE_CODES_ARRAY = Object.keys(LOCALE_CODES);
+
 const MAPBOXGL_STYLE_UPDATE = 'style.load';
 const MAPBOXGL_RENDER = 'render';
 const nop = () => {};
@@ -108,37 +110,50 @@ const MapboxLogo = () => (
 
 export const Attribution = ({showMapboxLogo = true}) => {
   const isPalm = hasMobileWidth(breakPointValues);
-  if (!showMapboxLogo) {
+
+  const memoizedComponents = useMemo(() => {
+    if (!showMapboxLogo) {
+      return (
+        <StyledAttrbution>
+          <a
+            href="http://www.openstreetmap.org/copyright"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            © OpenStreetMap
+          </a>
+        </StyledAttrbution>
+      );
+    }
+
     return (
       <StyledAttrbution>
-        <a href="http://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer">
-          © OpenStreetMap
-        </a>
+        {isPalm ? <MapboxLogo /> : null}
+        <div className="attrition-link">
+          <a href="https://kepler.gl/policy/" target="_blank" rel="noopener noreferrer">
+            © kepler.gl |{' '}
+          </a>
+          <a href="https://www.mapbox.com/about/maps/" target="_blank" rel="noopener noreferrer">
+            © Mapbox |{' '}
+          </a>
+          <a
+            href="http://www.openstreetmap.org/copyright"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            © OpenStreetMap |{' '}
+          </a>
+          <a href="https://www.mapbox.com/map-feedback/" target="_blank" rel="noopener noreferrer">
+            <strong>Improve this map </strong>
+            {!isPalm ? <strong> | </strong> : null}
+          </a>
+          {!isPalm ? <MapboxLogo /> : null}
+        </div>
       </StyledAttrbution>
     );
-  }
+  }, [showMapboxLogo, isPalm]);
 
-  return (
-    <StyledAttrbution>
-      {isPalm ? <MapboxLogo /> : null}
-      <div className="attrition-link">
-        <a href="https://kepler.gl/policy/" target="_blank" rel="noopener noreferrer">
-          © kepler.gl |{' '}
-        </a>
-        <a href="https://www.mapbox.com/about/maps/" target="_blank" rel="noopener noreferrer">
-          © Mapbox |{' '}
-        </a>
-        <a href="http://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer">
-          © OpenStreetMap |{' '}
-        </a>
-        <a href="https://www.mapbox.com/map-feedback/" target="_blank" rel="noopener noreferrer">
-          <strong>Improve this map </strong>
-          {!isPalm ? <strong> | </strong> : null}
-        </a>
-        {!isPalm ? <MapboxLogo /> : null}
-      </div>
-    </StyledAttrbution>
-  );
+  return memoizedComponents;
 };
 
 MapContainerFactory.deps = [MapPopoverFactory, MapControlFactory, EditorFactory];
@@ -614,7 +629,7 @@ export default function MapContainerFactory(
         <>
           <MapControl
             datasets={datasets}
-            availableLocales={Object.keys(LOCALE_CODES)}
+            availableLocales={LOCALE_CODES_ARRAY}
             dragRotate={mapState.dragRotate}
             isSplit={isSplit}
             primary={primary}
diff --git a/src/components/src/notification-panel.tsx b/src/components/src/notification-panel.tsx
index f15aaa04e2..698faf82ab 100644
--- a/src/components/src/notification-panel.tsx
+++ b/src/components/src/notification-panel.tsx
@@ -50,8 +50,10 @@ interface NotificationPanelProps {
 
 export default function NotificationPanelFactory(
   NotificationItem: ReturnType<typeof NotificationItemFactory>
-) {
-  return class NotificationPanel extends Component<NotificationPanelProps> {
+): React.ComponentClass<NotificationPanelProps> {
+  class NotificationPanelUnmemoized extends Component<NotificationPanelProps> {
+    static displayName = 'NotificationPanel';
+
     render() {
       const globalNotifications = this.props.notifications.filter(
         n => n.topic === DEFAULT_NOTIFICATION_TOPICS.global
@@ -71,5 +73,10 @@ export default function NotificationPanelFactory(
         </NotificationPanelContent>
       );
     }
-  };
+  }
+
+  const NotificationPanel = (React.memo(
+    NotificationPanelUnmemoized
+  ) as unknown) as typeof NotificationPanelUnmemoized;
+  return NotificationPanel;
 }
diff --git a/src/components/src/side-panel/filter-manager.tsx b/src/components/src/side-panel/filter-manager.tsx
index 1c1573a893..f23a5b988a 100644
--- a/src/components/src/side-panel/filter-manager.tsx
+++ b/src/components/src/side-panel/filter-manager.tsx
@@ -75,6 +75,15 @@ function FilterManagerFactory(
         .reverse();
     }, [filters.length]);
 
+    const filterPanelCallbacks = useMemo(() => {
+      return new Array(filters.length).fill(0).map((d, idx) => ({
+        removeFilter: () => removeFilter(idx),
+        enlargeFilter: () => enlargeFilter(idx),
+        toggleAnimation: () => toggleFilterAnimation(idx),
+        toggleFilterFeature: () => toggleFilterFeature(idx)
+      }));
+    }, [filters.length, removeFilter, enlargeFilter, toggleFilterAnimation, toggleFilterFeature]);
+
     return (
       <div className="filter-manager">
         <SourceDataCatalog
@@ -93,10 +102,10 @@ function FilterManagerFactory(
               datasets={datasets}
               layers={layers}
               isAnyFilterAnimating={isAnyFilterAnimating}
-              removeFilter={() => removeFilter(idx)}
-              enlargeFilter={() => enlargeFilter(idx)}
-              toggleAnimation={() => toggleFilterAnimation(idx)}
-              toggleFilterFeature={() => toggleFilterFeature(idx)}
+              removeFilter={filterPanelCallbacks[idx].removeFilter}
+              enlargeFilter={filterPanelCallbacks[idx].enlargeFilter}
+              toggleAnimation={filterPanelCallbacks[idx].toggleAnimation}
+              toggleFilterFeature={filterPanelCallbacks[idx].toggleFilterFeature}
               setFilter={setFilter}
             />
           ))}
diff --git a/src/components/src/side-panel/layer-manager.tsx b/src/components/src/side-panel/layer-manager.tsx
index 37cdab7ef5..9bf7cf13de 100644
--- a/src/components/src/side-panel/layer-manager.tsx
+++ b/src/components/src/side-panel/layer-manager.tsx
@@ -71,39 +71,38 @@ const LayerHeader = styled.div.attrs({
   margin-top: 16px;
 `;
 
-const LayerBlendingSelector = ({
-  layerBlending,
-  updateLayerBlending,
-  intl
-}: LayerBlendingSelectorProps) => {
-  const labeledLayerBlendings = Object.keys(LAYER_BLENDINGS).reduce(
-    (acc, current) => ({
-      ...acc,
-      [intl.formatMessage({id: LAYER_BLENDINGS[current].label})]: current
-    }),
-    {}
-  );
-
-  const onChange = useCallback(blending => updateLayerBlending(labeledLayerBlendings[blending]), [
-    updateLayerBlending,
-    labeledLayerBlendings
-  ]);
-
-  return (
-    <SidePanelSection>
-      <PanelLabel>
-        <FormattedMessage id="layerBlending.title" />
-      </PanelLabel>
-      <ItemSelector
-        selectedItems={intl.formatMessage({id: LAYER_BLENDINGS[layerBlending].label})}
-        options={Object.keys(labeledLayerBlendings)}
-        multiSelect={false}
-        searchable={false}
-        onChange={onChange}
-      />
-    </SidePanelSection>
-  );
-};
+const LayerBlendingSelector = React.memo(
+  ({layerBlending, updateLayerBlending, intl}: LayerBlendingSelectorProps) => {
+    const labeledLayerBlendings = Object.keys(LAYER_BLENDINGS).reduce(
+      (acc, current) => ({
+        ...acc,
+        [intl.formatMessage({id: LAYER_BLENDINGS[current].label})]: current
+      }),
+      {}
+    );
+
+    const onChange = useCallback(blending => updateLayerBlending(labeledLayerBlendings[blending]), [
+      updateLayerBlending,
+      labeledLayerBlendings
+    ]);
+
+    return (
+      <SidePanelSection>
+        <PanelLabel>
+          <FormattedMessage id="layerBlending.title" />
+        </PanelLabel>
+        <ItemSelector
+          selectedItems={intl.formatMessage({id: LAYER_BLENDINGS[layerBlending].label})}
+          options={Object.keys(labeledLayerBlendings)}
+          multiSelect={false}
+          searchable={false}
+          onChange={onChange}
+        />
+      </SidePanelSection>
+    );
+  }
+);
+LayerBlendingSelector.displayName = 'LayerBlendingSelector';
 
 LayerManagerFactory.deps = [
   LayerListFactory,
diff --git a/src/components/src/side-panel/layer-panel/dataset-section.tsx b/src/components/src/side-panel/layer-panel/dataset-section.tsx
index 1f0a1784e3..a287aac55a 100644
--- a/src/components/src/side-panel/layer-panel/dataset-section.tsx
+++ b/src/components/src/side-panel/layer-panel/dataset-section.tsx
@@ -63,7 +63,7 @@ const StyledDatasetSection = styled.div`
 `;
 
 export function AddDataButtonFactory() {
-  const AddDataButton: React.FC<AddDataButtonProps> = ({onClick, isInactive}) => (
+  const AddDataButton: React.FC<AddDataButtonProps> = React.memo(({onClick, isInactive}) => (
     <Button
       className="add-data-button"
       onClick={onClick}
@@ -74,8 +74,8 @@ export function AddDataButtonFactory() {
       <Add height="12px" />
       <FormattedMessage id={'layerManager.addData'} />
     </Button>
-  );
-
+  ));
+  AddDataButton.displayName = 'AddDataButton';
   return AddDataButton;
 }
 
diff --git a/src/components/src/side-panel/panel-header-action.tsx b/src/components/src/side-panel/panel-header-action.tsx
index a01655a173..1c522162ff 100644
--- a/src/components/src/side-panel/panel-header-action.tsx
+++ b/src/components/src/side-panel/panel-header-action.tsx
@@ -67,7 +67,7 @@ const HeaderActionWrapper = styled.div<HeaderActionWrapperProps>`
 PanelHeaderActionFactory.deps = [];
 // Need to use react class to access props.component
 export default function PanelHeaderActionFactory(): React.FC<PanelHeaderActionProps> {
-  const PanelHeaderAction: React.FC<PanelHeaderActionProps> = ({
+  const PanelHeaderActionUnmemoized: React.FC<PanelHeaderActionProps> = ({
     onClick,
     tooltip,
     id,
@@ -102,5 +102,8 @@ export default function PanelHeaderActionFactory(): React.FC<PanelHeaderActionPr
       </HeaderActionWrapper>
     );
   };
+
+  const PanelHeaderAction = React.memo(PanelHeaderActionUnmemoized);
+  PanelHeaderAction.displayName = 'PanelHeaderAction';
   return PanelHeaderAction;
 }
diff --git a/src/components/src/side-panel/panel-header.tsx b/src/components/src/side-panel/panel-header.tsx
index b8a34227c4..1b2c1e5b8f 100644
--- a/src/components/src/side-panel/panel-header.tsx
+++ b/src/components/src/side-panel/panel-header.tsx
@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component} from 'react';
+import React, {Component, useCallback} from 'react';
 import styled from 'styled-components';
 import classnames from 'classnames';
 import {createSelector} from 'reselect';
@@ -45,12 +45,12 @@ type ActionItem = {
   iconComponent: React.ComponentType<Partial<BaseProps>>;
   iconComponentProps?: BaseProps;
   dropdownComponent?: React.ComponentType<DropdownComponentProps>;
-  onClick?: (p: PanelHeaderProps) => void;
+  onClick?: () => void;
 };
 
 type PanelActionProps = {
   item: ActionItem;
-  onClick: () => void;
+  showExportDropdown: (string) => void;
 };
 
 type PanelHeaderDropdownProps = {
@@ -155,19 +155,31 @@ const StyledToolbar = styled(Toolbar)`
   position: absolute;
 `;
 
-export const PanelAction: React.FC<PanelActionProps> = ({item, onClick}) => (
-  <StyledPanelAction data-tip data-for={`${item.id}-action`} onClick={onClick}>
-    {item.label ? <p>{item.label}</p> : null}
-    <a target={item.blank ? '_blank' : ''} href={item.href} rel="noreferrer">
-      <item.iconComponent height="20px" {...item.iconComponentProps} />
-    </a>
-    {item.tooltip ? (
-      <Tooltip id={`${item.id}-action`} place="bottom" delayShow={500} effect="solid">
-        <FormattedMessage id={item.tooltip} />
-      </Tooltip>
-    ) : null}
-  </StyledPanelAction>
-);
+const PanelAction: React.FC<PanelActionProps> = React.memo(({item, showExportDropdown}) => {
+  const onClick = useCallback(() => {
+    if (item.dropdownComponent) {
+      showExportDropdown(item.id);
+    } else {
+      item.onClick && item.onClick();
+    }
+  }, [item, showExportDropdown]);
+
+  return (
+    <StyledPanelAction data-tip data-for={`${item.id}-action`} onClick={onClick}>
+      {item.label ? <p>{item.label}</p> : null}
+      <a target={item.blank ? '_blank' : ''} href={item.href} rel="noreferrer">
+        <item.iconComponent height="20px" {...item.iconComponentProps} />
+      </a>
+      {item.tooltip ? (
+        <Tooltip id={`${item.id}-action`} place="bottom" delayShow={500} effect="solid">
+          <FormattedMessage id={item.tooltip} />
+        </Tooltip>
+      ) : null}
+    </StyledPanelAction>
+  );
+});
+PanelAction.displayName = 'PanelAction';
+export {PanelAction};
 
 export const PanelHeaderDropdownFactory = () => {
   const PanelHeaderDropdown: React.FC<PanelHeaderDropdownProps> = ({items, show, onClose, id}) => {
@@ -356,16 +368,7 @@ function PanelHeaderFactory(
                   key={item.id}
                   style={{position: 'relative'}}
                 >
-                  <PanelAction
-                    item={item}
-                    onClick={() => {
-                      if (item.dropdownComponent) {
-                        showExportDropdown(item.id);
-                      } else {
-                        item.onClick && item.onClick(this.props);
-                      }
-                    }}
-                  />
+                  <PanelAction item={item} showExportDropdown={showExportDropdown} />
                   {item.dropdownComponent ? (
                     <item.dropdownComponent
                       onClose={hideExportDropdown}