fix: memory leak related to re-reselect cache (#1201)

elastic · Jun 16, 2021 · 02025cf · 02025cf
1 parent 100145b
commit 02025cf
Show file tree

Hide file tree

Showing 126 changed files with 533 additions and 655 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -75,7 +75,7 @@ module.exports = {
     'import/no-cycle': [0, { maxDepth: 3, ignoreExternal: true }], // TODO: should error when this is fixed https://github.com/benmosher/eslint-plugin-import/issues/1453
     'no-use-before-define': 0,
     'no-restricted-properties': 0, // need to find and filter desired options
-    'class-methods-use-this': 1,
+    'class-methods-use-this': 0,
     'unicorn/prefer-number-properties': 0,
     'global-require': 1,
     'import/no-dynamic-require': 1,
@@ -360,6 +360,14 @@ module.exports = {
               ]
             : 0,
 
+        'no-restricted-imports': [
+          'error',
+          {
+            name: 're-reselect',
+            importNames: ['default'],
+            message: 'Please use `createCustomCachedSelector` instead.',
+          },
+        ],
         'no-underscore-dangle': 2,
         'import/no-unresolved': 'error',
         'import/no-extraneous-dependencies': 2,

diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/geometries.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/geometries.ts
@@ -17,12 +17,10 @@
  * under the License.
  */
 
-import createCachedSelector from 're-reselect';
-
 import { ChartType } from '../../..';
 import { SpecType } from '../../../../specs/constants';
 import { GlobalChartState } from '../../../../state/chart_state';
-import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getSpecs } from '../../../../state/selectors/get_settings_specs';
 import { getSpecsFromStore } from '../../../../state/utils';
 import { nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
@@ -32,10 +30,10 @@ import { render } from './scenegraph';
 const getParentDimensions = (state: GlobalChartState) => state.parentDimensions;
 
 /** @internal */
-export const geometries = createCachedSelector(
+export const geometries = createCustomCachedSelector(
   [getSpecs, getParentDimensions],
   (specs, parentDimensions): ShapeViewModel => {
     const goalSpecs = getSpecsFromStore<GoalSpec>(specs, ChartType.Goal, SpecType.Series);
     return goalSpecs.length === 1 ? render(goalSpecs[0], parentDimensions) : nullShapeViewModel();
   },
-)(getChartIdSelector);
+);
diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/get_chart_type_description.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/get_chart_type_description.ts
@@ -17,12 +17,10 @@
  * under the License.
  */
 
-import createCachedSelector from 're-reselect';
-
-import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getSpecOrNull } from './goal_spec';
 
 /** @internal */
-export const getChartTypeDescriptionSelector = createCachedSelector([getSpecOrNull], (spec) => {
+export const getChartTypeDescriptionSelector = createCustomCachedSelector([getSpecOrNull], (spec) => {
   return `${spec?.subtype ?? 'goal'} chart`;
-})(getChartIdSelector);
+});
diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/is_tooltip_visible.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/is_tooltip_visible.ts
@@ -17,21 +17,19 @@
  * under the License.
  */
 
-import createCachedSelector from 're-reselect';
-
 import { getTooltipType } from '../../../../specs';
 import { TooltipType } from '../../../../specs/constants';
-import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { getTooltipInfoSelector } from './tooltip';
 
 /** @internal */
-export const isTooltipVisibleSelector = createCachedSelector(
+export const isTooltipVisibleSelector = createCustomCachedSelector(
   [getSettingsSpecSelector, getTooltipInfoSelector],
   (settingsSpec, tooltipInfo): boolean => {
     if (getTooltipType(settingsSpec) === TooltipType.None) {
       return false;
     }
     return tooltipInfo.values.length > 0;
   },
-)(getChartIdSelector);
+);
diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/on_element_click_caller.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/on_element_click_caller.ts
@@ -17,13 +17,12 @@
  * under the License.
  */
 
-import createCachedSelector from 're-reselect';
 import { Selector } from 'reselect';
 
 import { ChartType } from '../../..';
 import { getOnElementClickSelector } from '../../../../common/event_handler_selectors';
 import { GlobalChartState, PointerStates } from '../../../../state/chart_state';
-import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getLastClickSelector } from '../../../../state/selectors/get_last_click';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { getSpecOrNull } from './goal_spec';
@@ -41,10 +40,10 @@ export function createOnElementClickCaller(): (state: GlobalChartState) => void
   let selector: Selector<GlobalChartState, void> | null = null;
   return (state: GlobalChartState) => {
     if (selector === null && state.chartType === ChartType.Goal) {
-      selector = createCachedSelector(
+      selector = createCustomCachedSelector(
         [getSpecOrNull, getLastClickSelector, getSettingsSpecSelector, getPickedShapesLayerValues],
         getOnElementClickSelector(prev),
-      )(getChartIdSelector);
+      );
     }
     if (selector) {
       selector(state);

diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/on_element_out_caller.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/on_element_out_caller.ts
@@ -17,13 +17,12 @@
  * under the License.
  */
 
-import createCachedSelector from 're-reselect';
 import { Selector } from 'react-redux';
 
 import { ChartType } from '../../..';
 import { getOnElementOutSelector } from '../../../../common/event_handler_selectors';
 import { GlobalChartState } from '../../../../state/chart_state';
-import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { getSpecOrNull } from './goal_spec';
 import { getPickedShapesLayerValues } from './picked_shapes';
@@ -39,10 +38,10 @@ export function createOnElementOutCaller(): (state: GlobalChartState) => void {
   let selector: Selector<GlobalChartState, void> | null = null;
   return (state: GlobalChartState) => {
     if (selector === null && state.chartType === ChartType.Goal) {
-      selector = createCachedSelector(
+      selector = createCustomCachedSelector(
         [getSpecOrNull, getPickedShapesLayerValues, getSettingsSpecSelector],
         getOnElementOutSelector(prev),
-      )(getChartIdSelector);
+      );
     }
     if (selector) {
       selector(state);

diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/on_element_over_caller.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/on_element_over_caller.ts
@@ -17,14 +17,13 @@
  * under the License.
  */
 
-import createCachedSelector from 're-reselect';
 import { Selector } from 'react-redux';
 
 import { ChartType } from '../../..';
 import { getOnElementOverSelector } from '../../../../common/event_handler_selectors';
 import { LayerValue } from '../../../../specs';
 import { GlobalChartState } from '../../../../state/chart_state';
-import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { getSpecOrNull } from './goal_spec';
 import { getPickedShapesLayerValues } from './picked_shapes';
@@ -40,12 +39,10 @@ export function createOnElementOverCaller(): (state: GlobalChartState) => void {
   let selector: Selector<GlobalChartState, void> | null = null;
   return (state: GlobalChartState) => {
     if (selector === null && state.chartType === ChartType.Goal) {
-      selector = createCachedSelector(
+      selector = createCustomCachedSelector(
         [getSpecOrNull, getPickedShapesLayerValues, getSettingsSpecSelector],
         getOnElementOverSelector(prev),
-      )({
-        keySelector: getChartIdSelector,
-      });
+      );
     }
     if (selector) {
       selector(state);

diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/picked_shapes.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/picked_shapes.ts
@@ -17,11 +17,9 @@
  * under the License.
  */
 
-import createCachedSelector from 're-reselect';
-
 import { LayerValue } from '../../../../specs';
 import { GlobalChartState } from '../../../../state/chart_state';
-import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { BulletViewModel } from '../../layout/types/viewmodel_types';
 import { geometries } from './geometries';
 
@@ -30,7 +28,7 @@ function getCurrentPointerPosition(state: GlobalChartState) {
 }
 
 /** @internal */
-export const getPickedShapes = createCachedSelector(
+export const getPickedShapes = createCustomCachedSelector(
   [geometries, getCurrentPointerPosition],
   (geoms, pointerPosition): BulletViewModel[] => {
     const picker = geoms.pickQuads;
@@ -39,10 +37,10 @@ export const getPickedShapes = createCachedSelector(
     const y = pointerPosition.y - chartCenter.y;
     return picker(x, y);
   },
-)(getChartIdSelector);
+);
 
 /** @internal */
-export const getPickedShapesLayerValues = createCachedSelector(
+export const getPickedShapesLayerValues = createCustomCachedSelector(
   [getPickedShapes],
   (pickedShapes): Array<Array<LayerValue>> => {
     const elements = pickedShapes.map<Array<LayerValue>>((model) => {
@@ -59,4 +57,4 @@ export const getPickedShapesLayerValues = createCachedSelector(
     });
     return elements;
   },
-)(getChartIdSelector);
+);
diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts
@@ -17,10 +17,8 @@
  * under the License.
  */
 
-import createCachedSelector from 're-reselect';
-
 import { TooltipInfo } from '../../../../components/tooltip/types';
-import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getSpecOrNull } from './goal_spec';
 import { getPickedShapes } from './picked_shapes';
 
@@ -30,7 +28,7 @@ const EMPTY_TOOLTIP = Object.freeze({
 });
 
 /** @internal */
-export const getTooltipInfoSelector = createCachedSelector(
+export const getTooltipInfoSelector = createCustomCachedSelector(
   [getSpecOrNull, getPickedShapes],
   (spec, pickedShapes): TooltipInfo => {
     if (!spec) {
@@ -60,4 +58,4 @@ export const getTooltipInfoSelector = createCachedSelector(
 
     return tooltipInfo;
   },
-)(getChartIdSelector);
+);
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/compute_chart_dimensions.ts b/packages/charts/src/chart_types/heatmap/state/selectors/compute_chart_dimensions.ts
@@ -18,11 +18,10 @@
  */
 
 import { max as d3Max } from 'd3-array';
-import createCachedSelector from 're-reselect';
 
 import { Box, measureText } from '../../../../common/text_utils';
 import { GlobalChartState } from '../../../../state/chart_state';
-import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getLegendSizeSelector } from '../../../../state/selectors/get_legend_size';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { Position } from '../../../../utils/common';
@@ -50,7 +49,7 @@ const getParentDimension = (state: GlobalChartState) => state.parentDimensions;
  * Gets charts grid area excluding legend and X,Y axis labels and paddings.
  * @internal
  */
-export const computeChartDimensionsSelector = createCachedSelector(
+export const computeChartDimensionsSelector = createCustomCachedSelector(
   [
     getParentDimension,
     getLegendSizeSelector,
@@ -114,4 +113,4 @@ export const computeChartDimensionsSelector = createCachedSelector(
       left,
     };
   },
-)(getChartIdSelector);
+);
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/compute_legend.ts b/packages/charts/src/chart_types/heatmap/state/selectors/compute_legend.ts
@@ -17,16 +17,14 @@
  * under the License.
  */
 
-import createCachedSelector from 're-reselect';
-
 import { LegendItem } from '../../../../common/legend';
-import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getDeselectedSeriesSelector } from '../../../../state/selectors/get_deselected_data_series';
 import { getColorScale } from './get_color_scale';
 import { getSpecOrNull } from './heatmap_spec';
 
 /** @internal */
-export const computeLegendSelector = createCachedSelector(
+export const computeLegendSelector = createCustomCachedSelector(
   [getSpecOrNull, getColorScale, getDeselectedSeriesSelector],
   (spec, colorScale, deselectedDataSeries): LegendItem[] => {
     const legendItems: LegendItem[] = [];
@@ -53,4 +51,4 @@ export const computeLegendSelector = createCachedSelector(
       };
     });
   },
-)(getChartIdSelector);
+);
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/geometries.ts b/packages/charts/src/chart_types/heatmap/state/selectors/geometries.ts
@@ -17,10 +17,8 @@
  * under the License.
  */
 
-import createCachedSelector from 're-reselect';
-
 import { GlobalChartState } from '../../../../state/chart_state';
-import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
 import { computeChartDimensionsSelector } from './compute_chart_dimensions';
@@ -34,7 +32,7 @@ import { render } from './scenegraph';
 const getDeselectedSeriesSelector = (state: GlobalChartState) => state.interactions.deselectedDataSeries;
 
 /** @internal */
-export const geometries = createCachedSelector(
+export const geometries = createCustomCachedSelector(
   [
     getHeatmapSpecSelector,
     computeChartDimensionsSelector,
@@ -73,4 +71,4 @@ export const geometries = createCachedSelector(
       ? render(heatmapSpec, settingSpec, chartDimensions, heatmapTable, colorScale, ranges, gridHeightParams)
       : nullShapeViewModel();
   },
-)(getChartIdSelector);
+);
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_brush_area.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_brush_area.ts
@@ -17,11 +17,9 @@
  * under the License.
  */
 
-import createCachedSelector from 're-reselect';
-
 import { BrushAxis } from '../../../../specs';
 import { GlobalChartState } from '../../../../state/chart_state';
-import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getChartRotationSelector } from '../../../../state/selectors/get_chart_rotation';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { Dimensions } from '../../../../utils/dimensions';
@@ -32,7 +30,7 @@ const getIsDragging = (state: GlobalChartState) => state.interactions.pointer.dr
 const getCurrentPointerPosition = (state: GlobalChartState) => state.interactions.pointer.current.position;
 
 /** @internal */
-export const getBrushAreaSelector = createCachedSelector(
+export const getBrushAreaSelector = createCustomCachedSelector(
   [
     getIsDragging,
     getMouseDownPosition,
@@ -55,4 +53,4 @@ export const getBrushAreaSelector = createCachedSelector(
         return { top: start.y, left: start.x, width: end.x - start.x - chartDimensions.left, height: end.y - start.y };
     }
   },
-)(getChartIdSelector);
+);
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_brushed_highlighted_shapes.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_brushed_highlighted_shapes.ts
@@ -17,10 +17,8 @@
  * under the License.
  */
 
-import createCachedSelector from 're-reselect';
-
 import { GlobalChartState } from '../../../../state/chart_state';
-import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { DragShape } from '../../layout/types/viewmodel_types';
 import { geometries } from './geometries';
 
@@ -29,7 +27,7 @@ function getCurrentPointerStates(state: GlobalChartState) {
 }
 
 /** @internal */
-export const getBrushedHighlightedShapesSelector = createCachedSelector(
+export const getBrushedHighlightedShapesSelector = createCustomCachedSelector(
   [geometries, getCurrentPointerStates],
   (geoms, pointerStates): DragShape | null => {
     if (!pointerStates.dragging || !pointerStates.down) {
@@ -51,4 +49,4 @@ export const getBrushedHighlightedShapesSelector = createCachedSelector(
     ]);
     return shape;
   },
-)(getChartIdSelector);
+);