refactor: Require memoizee and memoizeClear calls have a max size

@types/memoizee/index.d.ts

@@ -22,7 +22,7 @@ declare namespace memoizee {
 // eslint-disable-next-line @typescript-eslint/ban-types
 declare function memoizee<F extends Function>(
   f: F,
-  options?: memoizee.Options<F>
+  options: memoizee.Options<F> & { max: number }
 ): F & memoizee.Memoized<F>;
 
 export = memoizee;

packages/chart/src/FigureChartModel.ts

@@ -405,14 +405,16 @@ class FigureChartModel extends ChartModel {
         }
       }
       return undefined;
-    }
+    },
+    { max: 100 }
   );
 
   getValueTranslator = memoize(
     (columnType: string, formatter: Formatter | undefined) => {
       const timeZone = this.getTimeZone(columnType, formatter);
       return (value: unknown) => this.chartUtils.unwrapValue(value, timeZone);
-    }
+    },
+    { max: 100 }
   );
 
   /** Gets the parser for a value with the provided column type */
@@ -421,7 +423,8 @@ class FigureChartModel extends ChartModel {
       const timeZone = this.getTimeZone(columnType, formatter);
       return (value: unknown) =>
         this.chartUtils.wrapValue(value, columnType, timeZone);
-    }
+    },
+    { max: 100 }
   );
 
   /**
@@ -434,7 +437,8 @@ class FigureChartModel extends ChartModel {
       rangeStart = valueParser(rangeStart);
       rangeEnd = valueParser(rangeEnd);
       return [rangeStart, rangeEnd];
-    }
+    },
+    { max: 100 }
   );
 
   /**
@@ -449,7 +453,8 @@ class FigureChartModel extends ChartModel {
         }
 
         return (range: [unknown, unknown]) => range;
-      }
+      },
+    { max: 100 }
   );
 
   handleDownsampleStart(event: ChartEvent): void {

packages/code-studio/src/settings/ColumnSpecificSectionContent.tsx

@@ -147,7 +147,9 @@ export class ColumnSpecificSectionContent extends PureComponent<
     return lastFormatRuleIndex;
   }
 
-  getCachedColumnTypeOptions = memoize(() => <ColumnTypeOptions />);
+  getCachedColumnTypeOptions = memoize(() => <ColumnTypeOptions />, {
+    max: 100,
+  });
 
   getCachedDateTimeFormatOptions = memoize(
     (
@@ -168,7 +170,8 @@ export class ColumnSpecificSectionContent extends PureComponent<
           legacyGlobalFormat={legacyGlobalFormat}
         />
       );
-    }
+    },
+    { max: 100 }
   );
 
   handleFormatRuleChange(

packages/code-studio/src/settings/FormattingSectionContent.tsx

@@ -183,7 +183,8 @@ export class FormattingSectionContent extends PureComponent<
           legacyGlobalFormat={legacyGlobalFormat}
         />
       );
-    }
+    },
+    { max: 100 }
   );
 
   queueUpdate(updates: Partial<WorkspaceSettings>): void {

packages/code-studio/src/styleguide/DraggableLists.tsx

@@ -162,8 +162,9 @@ class DraggableLists extends Component<
     });
   }
 
-  getSelectionChangeHandler = memoize((listIndex: number) =>
-    this.handleSelectionChange.bind(this, listIndex)
+  getSelectionChangeHandler = memoize(
+    (listIndex: number) => this.handleSelectionChange.bind(this, listIndex),
+    { max: 1000 }
   );
 
   getDraggableList = memoize(
@@ -187,7 +188,8 @@ class DraggableLists extends Component<
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...DRAG_LIST_PROPS[listIndex]}
       />
-    )
+    ),
+    { max: 1000 }
   );
 
   render(): React.ReactElement {

packages/components/src/AutoCompleteInput.tsx

@@ -169,7 +169,8 @@ class AutoCompleteInput extends Component<
       options.filter(
         // supports partial match
         option => option.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
-      )
+      ),
+    { max: 1000 }
   );
 
   // validation needs to be an exact case-sensitve match on value

packages/components/src/ItemList.tsx

@@ -282,34 +282,40 @@ export class ItemList<T> extends PureComponent<
     { max: ItemList.CACHE_SIZE }
   );
 
-  getOuterElement = memoize((onKeyDown: React.KeyboardEventHandler) => {
-    const component = React.forwardRef<HTMLDivElement>((props, ref) => (
-      // We need to add the tabIndex to make sure it is focusable, otherwise we can't get key events
-      <div
-        ref={ref}
-        tabIndex={-1}
-        onKeyDown={onKeyDown}
-        role="presentation"
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-      />
-    ));
-    component.displayName = 'ItemListOuterElement';
-    return component;
-  });
-
-  getInnerElement = memoize(() => {
-    const component = React.forwardRef<HTMLDivElement>((props, ref) => (
-      <div
-        className="item-list-inner-element"
-        ref={ref}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-      />
-    ));
-    component.displayName = 'ItemListInnerElement';
-    return component;
-  });
+  getOuterElement = memoize(
+    (onKeyDown: React.KeyboardEventHandler) => {
+      const component = React.forwardRef<HTMLDivElement>((props, ref) => (
+        // We need to add the tabIndex to make sure it is focusable, otherwise we can't get key events
+        <div
+          ref={ref}
+          tabIndex={-1}
+          onKeyDown={onKeyDown}
+          role="presentation"
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...props}
+        />
+      ));
+      component.displayName = 'ItemListOuterElement';
+      return component;
+    },
+    { max: 1000 }
+  );
+
+  getInnerElement = memoize(
+    () => {
+      const component = React.forwardRef<HTMLDivElement>((props, ref) => (
+        <div
+          className="item-list-inner-element"
+          ref={ref}
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...props}
+        />
+      ));
+      component.displayName = 'ItemListInnerElement';
+      return component;
+    },
+    { max: 1000 }
+  );
 
   getItemData = memoize(
     (
@@ -320,7 +326,8 @@ export class ItemList<T> extends PureComponent<
       items,
       selectedRanges,
       renderItem,
-    })
+    }),
+    { max: 1000 }
   );
 
   focus(): void {

packages/dashboard-core-plugins/src/controls/dropdown-filter/DropdownFilter.tsx

@@ -232,7 +232,8 @@ export class DropdownFilter extends Component<
       }
 
       return name;
-    }
+    },
+    { max: 1000 }
   );
 
   handleColumnChange(eventTargetValue: string): void {

packages/dashboard-core-plugins/src/controls/input-filter/InputFilter.tsx

@@ -109,19 +109,22 @@ class InputFilter extends Component<InputFilterProps, InputFilterState> {
 
   inputRef: RefObject<HTMLInputElement>;
 
-  getItemLabel = memoizee((columns: InputFilterColumn[], index: number) => {
-    const { name, type } = columns[index];
-
-    if (
-      (index > 0 && columns[index - 1].name === name) ||
-      (index < columns.length - 1 && columns[index + 1].name === name)
-    ) {
-      const shortType = type.substring(type.lastIndexOf('.') + 1);
-      return `${name} (${shortType})`;
-    }
-
-    return name;
-  });
+  getItemLabel = memoizee(
+    (columns: InputFilterColumn[], index: number) => {
+      const { name, type } = columns[index];
+
+      if (
+        (index > 0 && columns[index - 1].name === name) ||
+        (index < columns.length - 1 && columns[index + 1].name === name)
+      ) {
+        const shortType = type.substring(type.lastIndexOf('.') + 1);
+        return `${name} (${shortType})`;
+      }
+
+      return name;
+    },
+    { max: 1000 }
+  );
 
   handleColumnChange(eventTargetValue: string): void {
     const { columns } = this.props;

packages/dashboard-core-plugins/src/panels/DropdownFilterPanel.tsx

@@ -310,7 +310,8 @@ export class DropdownFilterPanel extends Component<
           ? formatter.getFormattedString(value, type, name)
           : null
       );
-    }
+    },
+    { max: 1000 }
   );
 
   getCoordinateForColumn(): [number, number] | null {
@@ -348,21 +349,25 @@ export class DropdownFilterPanel extends Component<
       const panelId = LayoutUtils.getIdFromPanel(panel);
       log.debug('getCachedPanelLinks', dashboardLinks, panelId);
       return dashboardLinks.filter(link => link.end?.panelId === panelId);
-    }
+    },
+    { max: 1000 }
   );
 
-  getCachedSource = memoize((links: Link[]) => {
-    log.debug('getCachedSource', links);
-    let source: LinkPoint | undefined;
-    if (links.length > 0) {
-      const [link] = links;
-      source = link.start;
-      if (links.length > 1) {
-        log.error('Filter has more that one link', links);
+  getCachedSource = memoize(
+    (links: Link[]) => {
+      log.debug('getCachedSource', links);
+      let source: LinkPoint | undefined;
+      if (links.length > 0) {
+        const [link] = links;
+        source = link.start;
+        if (links.length > 1) {
+          log.error('Filter has more that one link', links);
+        }
       }
-    }
-    return source;
-  });
+      return source;
+    },
+    { max: 1000 }
+  );
 
   getCachedSourceTable = memoize(
     (
@@ -375,7 +380,8 @@ export class DropdownFilterPanel extends Component<
       }
       const { panelId } = source;
       return panelTableMap.get(panelId) ?? null;
-    }
+    },
+    { max: 1000 }
   );
 
   getCachedSourceColumn = memoize(
@@ -390,7 +396,8 @@ export class DropdownFilterPanel extends Component<
             name === source.columnName && type === source.columnType
         ) ?? null
       );
-    }
+    },
+    { max: 1000 }
   );
 
   getSource(links: Link[]): LinkPoint | undefined {

packages/grid/src/MockTreeGridModel.ts

@@ -161,7 +161,8 @@ class MockTreeGridModel extends MockGridModel implements ExpandableGridModel {
       }
 
       return { key, offsetRow };
-    }
+    },
+    { max: 10000 }
   );
 
   getCachedTextForRowHeader = memoizeClear(
@@ -176,7 +177,8 @@ class MockTreeGridModel extends MockGridModel implements ExpandableGridModel {
       }
 
       return `${offsetRow}`;
-    }
+    },
+    { max: 10000 }
   );
 
   getCachedTextForCell = memoizeClear(
@@ -195,15 +197,17 @@ class MockTreeGridModel extends MockGridModel implements ExpandableGridModel {
       }
 
       return `${column},${offsetRow}`;
-    }
+    },
+    { max: 10000 }
   );
 
   getCachedIsRowExpandable = memoizeClear(
     (children: ChildrenTreeMap, row: ModelIndex, maxDepth: number): boolean => {
       const depth = this.getCachedDepthForRow(children, row);
 
       return depth < maxDepth;
-    }
+    },
+    { max: 10000 }
   );
 
   getCachedIsRowExpanded = memoizeClear(
@@ -218,7 +222,8 @@ class MockTreeGridModel extends MockGridModel implements ExpandableGridModel {
       }
 
       return children.has(offsetRow);
-    }
+    },
+    { max: 10000 }
   );
 
   getCachedDepthForRow = memoizeClear(
@@ -233,7 +238,8 @@ class MockTreeGridModel extends MockGridModel implements ExpandableGridModel {
       }
 
       return 0;
-    }
+    },
+    { max: 10000 }
   );
 }
 

packages/grid/src/memoizeClear.ts

@@ -10,7 +10,11 @@ import memoizee from 'memoizee';
  * @param fn The function to memoize
  * @param options The options to set for memoization
  */
-export const memoizeClear: typeof memoizee = (fn, options) => {
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function memoizeClear<F extends Function>(
+  fn: F,
+  options: memoizee.Options<F> & { max: number }
+): F & memoizee.Memoized<F> {
   let isClearingCache = false;
   const memoizedFn = memoizee(fn, {
     ...options,
@@ -25,6 +29,6 @@ export const memoizeClear: typeof memoizee = (fn, options) => {
   });
 
   return memoizedFn;
-};
+}
 
 export default memoizeClear;