feat: Add IrisGridCacheUtils for memoizing iris grid state (#2416)

Adds `IrisGridCacheUtils` which provides 3 methods to create memoized
dehydrators: `makeMemoizedGridStateDehydrator`,
`makeMemoizedIrisGridStateDehydrator`, and
`makeMemoizedCombinedGridStateDehydrator`. The first 2 are used for
`IrisGridPanel` which saves the state under separate keys for
`gridState` and `irisGridState`. The 3rd is for newer uses like
`UITable` which can just save the combined state and spread it to
`IrisGrid` since `IrisGrid` accepts both `GridState` and `IrisGridState`
props.

Added tests for `dehydrateIrisGridState`.

Improved the `memoize-one` type override to infer the types of the
equality function based on the actual function args.

Author: mattrunyon

@types/memoize-one/index.d.ts

@@ -1,12 +1,9 @@
-export declare type EqualityFn = (
-  newArgs: unknown[],
-  lastArgs: unknown[]
-) => boolean;
+export declare type EqualityFn<P> = (newArgs: P, lastArgs: P) => boolean;
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 declare function memoizeOne<ResultFn extends Function>(
   resultFn: ResultFn,
-  isEqual?: EqualityFn
+  isEqual?: EqualityFn<Parameters<ResultFn>>
 ): ResultFn;
 
 export default memoizeOne;

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

@@ -21,6 +21,7 @@ import {
   IrisGrid,
   type IrisGridType,
   IrisGridModel,
+  IrisGridCacheUtils,
   IrisGridUtils,
   isIrisGridTableModelTemplate,
   type ColumnName,
@@ -103,11 +104,11 @@ export interface PanelState {
   gridState: {
     isStuckToBottom: boolean;
     isStuckToRight: boolean;
-    movedColumns: {
+    movedColumns: readonly {
       from: string | ModelIndex | [string, string] | [ModelIndex, ModelIndex];
       to: string | ModelIndex;
     }[];
-    movedRows: MoveOperation[];
+    movedRows: readonly MoveOperation[];
   };
   irisGridState: DehydratedIrisGridState;
   irisGridPanelState: DehydratedIrisGridPanelState;
@@ -368,6 +369,12 @@ export class IrisGridPanel extends PureComponent<
 
   private irisGridUtils: IrisGridUtils | null;
 
+  private gridStateDehydrator =
+    IrisGridCacheUtils.makeMemoizedGridStateDehydrator();
+
+  private irisGridStateDehydrator =
+    IrisGridCacheUtils.makeMemoizedIrisGridStateDehydrator();
+
   getTableName(): string {
     const { metadata } = this.props;
     return getTableNameFromMetadata(metadata);
@@ -461,76 +468,6 @@ export class IrisGridPanel extends PureComponent<
       })
   );
 
-  getDehydratedIrisGridState = memoize(
-    (
-      model: IrisGridModel,
-      sorts: readonly dh.Sort[],
-      advancedFilters: ReadonlyAdvancedFilterMap,
-      customColumnFormatMap: Map<ColumnName, FormattingRule>,
-      isFilterBarShown: boolean,
-      quickFilters: ReadonlyQuickFilterMap,
-      customColumns: readonly ColumnName[],
-      reverse: boolean,
-      rollupConfig: UIRollupConfig | undefined,
-      showSearchBar: boolean,
-      searchValue: string,
-      selectDistinctColumns: readonly ColumnName[],
-      selectedSearchColumns: readonly ColumnName[],
-      invertSearchColumns: boolean,
-      userColumnWidths: ModelSizeMap,
-      userRowHeights: ModelSizeMap,
-      aggregationSettings: AggregationSettings,
-      pendingDataMap: PendingDataMap<UIRow>,
-      frozenColumns: readonly ColumnName[],
-      conditionalFormats: readonly SidebarFormattingRule[],
-      columnHeaderGroups: readonly ColumnHeaderGroup[],
-      partitionConfig: PartitionConfig | undefined
-    ) => {
-      assertNotNull(this.irisGridUtils);
-      return this.irisGridUtils.dehydrateIrisGridState(model, {
-        advancedFilters,
-        aggregationSettings,
-        customColumnFormatMap,
-        isFilterBarShown,
-        metrics: {
-          userColumnWidths,
-          userRowHeights,
-        },
-        quickFilters,
-        customColumns,
-        reverse,
-        rollupConfig,
-        showSearchBar,
-        searchValue,
-        selectDistinctColumns,
-        selectedSearchColumns,
-        sorts,
-        invertSearchColumns,
-        pendingDataMap,
-        frozenColumns,
-        conditionalFormats,
-        columnHeaderGroups,
-        partitionConfig,
-      });
-    }
-  );
-
-  getDehydratedGridState = memoize(
-    (
-      model: IrisGridModel,
-      movedColumns: readonly MoveOperation[],
-      movedRows: readonly MoveOperation[],
-      isStuckToBottom: boolean,
-      isStuckToRight: boolean
-    ) =>
-      IrisGridUtils.dehydrateGridState(model, {
-        isStuckToBottom,
-        isStuckToRight,
-        movedColumns,
-        movedRows,
-      })
-  );
-
   getCachedPanelState = memoize(
     (
       irisGridPanelState: PanelState['irisGridPanelState'],
@@ -1124,34 +1061,9 @@ export class IrisGridPanel extends PureComponent<
       partitions,
       advancedSettings,
     } = this.state;
-    const {
-      advancedFilters,
-      aggregationSettings,
-      customColumnFormatMap,
-      isFilterBarShown,
-      quickFilters,
-      customColumns,
-      reverse,
-      rollupConfig,
-      showSearchBar,
-      searchValue,
-      selectDistinctColumns,
-      selectedSearchColumns,
-      sorts,
-      invertSearchColumns,
-      metrics,
-      pendingDataMap,
-      frozenColumns,
-      conditionalFormats,
-      columnHeaderGroups,
-      partitionConfig,
-    } = irisGridState;
+    assertNotNull(this.irisGridUtils);
     assertNotNull(model);
-    assertNotNull(metrics);
-    const { userColumnWidths, userRowHeights } = metrics;
     assertNotNull(gridState);
-    const { isStuckToBottom, isStuckToRight, movedColumns, movedRows } =
-      gridState;
 
     const panelState = this.getCachedPanelState(
       this.getDehydratedIrisGridPanelState(
@@ -1160,37 +1072,8 @@ export class IrisGridPanel extends PureComponent<
         partitions,
         advancedSettings
       ),
-      this.getDehydratedIrisGridState(
-        model,
-        sorts,
-        advancedFilters,
-        customColumnFormatMap,
-        isFilterBarShown,
-        quickFilters,
-        customColumns,
-        reverse,
-        rollupConfig,
-        showSearchBar,
-        searchValue,
-        selectDistinctColumns,
-        selectedSearchColumns,
-        invertSearchColumns,
-        userColumnWidths,
-        userRowHeights,
-        aggregationSettings,
-        pendingDataMap,
-        frozenColumns,
-        conditionalFormats,
-        columnHeaderGroups,
-        partitionConfig
-      ),
-      this.getDehydratedGridState(
-        model,
-        movedColumns,
-        movedRows,
-        isStuckToBottom,
-        isStuckToRight
-      ),
+      this.irisGridStateDehydrator(model, irisGridState),
+      this.gridStateDehydrator(model, gridState),
       pluginState
     );
 

packages/iris-grid/src/IrisGridCacheUtils.test.ts

@@ -0,0 +1,192 @@
+import { type GridMetrics } from '@deephaven/grid';
+import dh from '@deephaven/jsapi-shim';
+import IrisGridTestUtils from './IrisGridTestUtils';
+import {
+  type HydratedGridState,
+  type HydratedIrisGridState,
+} from './IrisGridUtils';
+import { IrisGridCacheUtils } from './IrisGridCacheUtils';
+
+const irisGridTestUtils = new IrisGridTestUtils(dh);
+
+const gridState = {
+  isStuckToBottom: false,
+  isStuckToRight: false,
+  movedRows: [],
+  movedColumns: [],
+} satisfies HydratedGridState;
+
+const irisGridState = {
+  advancedFilters: new Map(),
+  partitionConfig: {
+    partitions: [],
+    mode: 'merged',
+  },
+  aggregationSettings: {
+    aggregations: [],
+    showOnTop: false,
+  },
+  customColumnFormatMap: new Map(),
+  isFilterBarShown: false,
+  quickFilters: new Map(),
+  customColumns: [],
+  reverse: false,
+  rollupConfig: {
+    columns: [],
+    showConstituents: false,
+    showNonAggregatedColumns: false,
+    includeDescriptions: true,
+  },
+  showSearchBar: false,
+  searchValue: '',
+  selectDistinctColumns: [],
+  selectedSearchColumns: [],
+  sorts: [],
+  invertSearchColumns: false,
+  pendingDataMap: new Map(),
+  frozenColumns: [],
+  conditionalFormats: [],
+  columnHeaderGroups: [],
+  metrics: {
+    userColumnWidths: new Map(),
+    userRowHeights: new Map(),
+  } as GridMetrics,
+} satisfies HydratedIrisGridState;
+
+describe('makeMemoizedGridStateDehydrator', () => {
+  test('creates a new memoization function with each call', () => {
+    const cacheA = IrisGridCacheUtils.makeMemoizedGridStateDehydrator();
+    const cacheB = IrisGridCacheUtils.makeMemoizedGridStateDehydrator();
+    expect(cacheA).not.toBe(cacheB);
+  });
+
+  test('memoizes dehydration', () => {
+    const model = irisGridTestUtils.makeModel();
+
+    const dehydrate = IrisGridCacheUtils.makeMemoizedGridStateDehydrator();
+
+    // Same state in different objects
+    expect(dehydrate(model, gridState)).toBe(
+      dehydrate(model, { ...gridState })
+    );
+
+    const differentModel = irisGridTestUtils.makeModel();
+    expect(dehydrate(model, gridState)).not.toBe(
+      dehydrate(differentModel, gridState)
+    );
+
+    const differentState = {
+      ...gridState,
+      isStuckToBottom: true,
+    };
+    expect(dehydrate(model, gridState)).not.toBe(
+      dehydrate(model, differentState)
+    );
+
+    const extraneousState = {
+      ...gridState,
+      lastLeft: 10,
+    };
+    expect(dehydrate(model, gridState)).toBe(dehydrate(model, extraneousState));
+  });
+});
+
+describe('makeMemoizedIrisGridStateDehydrator', () => {
+  test('creates a new memoization function with each call', () => {
+    const cacheA = IrisGridCacheUtils.makeMemoizedIrisGridStateDehydrator();
+    const cacheB = IrisGridCacheUtils.makeMemoizedIrisGridStateDehydrator();
+    expect(cacheA).not.toBe(cacheB);
+  });
+
+  test('memoizes dehydration', () => {
+    const model = irisGridTestUtils.makeModel();
+
+    const dehydrate = IrisGridCacheUtils.makeMemoizedIrisGridStateDehydrator();
+
+    // Same state in different objects
+    expect(dehydrate(model, irisGridState)).toBe(
+      dehydrate(model, { ...irisGridState })
+    );
+
+    const differentModel = irisGridTestUtils.makeModel();
+    expect(dehydrate(model, irisGridState)).not.toBe(
+      dehydrate(differentModel, irisGridState)
+    );
+
+    const differentState = {
+      ...irisGridState,
+      isFilterBarShown: true,
+    };
+    expect(dehydrate(model, irisGridState)).not.toBe(
+      dehydrate(model, differentState)
+    );
+
+    const extraneousState = {
+      ...irisGridState,
+      lastLeft: 10,
+    };
+    expect(dehydrate(model, irisGridState)).toBe(
+      dehydrate(model, extraneousState)
+    );
+  });
+});
+
+describe('makeMemoizedCombinedGridStateDehydrator', () => {
+  test('creates a new memoization function with each call', () => {
+    const cacheA = IrisGridCacheUtils.makeMemoizedCombinedGridStateDehydrator();
+    const cacheB = IrisGridCacheUtils.makeMemoizedCombinedGridStateDehydrator();
+    expect(cacheA).not.toBe(cacheB);
+  });
+  test('memoizes dehydration', () => {
+    const model = irisGridTestUtils.makeModel();
+
+    const dehydrate =
+      IrisGridCacheUtils.makeMemoizedCombinedGridStateDehydrator();
+
+    // Same state in different objects
+    expect(dehydrate(model, irisGridState, gridState)).toBe(
+      dehydrate(model, { ...irisGridState }, { ...gridState })
+    );
+
+    const differentModel = irisGridTestUtils.makeModel();
+    expect(dehydrate(model, irisGridState, gridState)).not.toBe(
+      dehydrate(differentModel, irisGridState, gridState)
+    );
+
+    const differentGridState = {
+      ...gridState,
+      isStuckToBottom: true,
+    };
+    expect(dehydrate(model, irisGridState, gridState)).not.toBe(
+      dehydrate(model, irisGridState, differentGridState)
+    );
+
+    const extraneousGridState = {
+      ...gridState,
+      lastLeft: 10,
+    };
+    expect(dehydrate(model, irisGridState, gridState)).toBe(
+      dehydrate(model, irisGridState, extraneousGridState)
+    );
+
+    const differentIrisGridState = {
+      ...irisGridState,
+      isFilterBarShown: true,
+    };
+    expect(dehydrate(model, irisGridState, gridState)).not.toBe(
+      dehydrate(model, differentIrisGridState, gridState)
+    );
+
+    const extraneousIrisGridState = {
+      ...irisGridState,
+      lastLeft: 10,
+    };
+    expect(dehydrate(model, irisGridState, gridState)).toBe(
+      dehydrate(model, extraneousIrisGridState, gridState)
+    );
+
+    expect(dehydrate(model, irisGridState, gridState)).toBe(
+      dehydrate(model, extraneousIrisGridState, extraneousGridState)
+    );
+  });
+});