feat: Add usePersistentState implementation to GridWidgetPlugin (#2427)

Part of DH-19000. This adds the `GridWidgetPlugin` implementation of
`usePersistentState`. It will effectively do nothing right now since the
state will always be `undefined` to start. Once the dh.ui side of this
merges, then normal tables in a `dh.ui` panel will persist their state

Author: mattrunyon

packages/dashboard-core-plugins/src/GridWidgetPlugin.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render, waitFor } from '@testing-library/react';
+import { ApiContext } from '@deephaven/jsapi-bootstrap';
+import { TestUtils } from '@deephaven/test-utils';
+import type { dh as DhType } from '@deephaven/jsapi-types';
+import { createMockStore } from '@deephaven/redux';
+import dh from '@deephaven/jsapi-shim';
+import GridWidgetPlugin from './GridWidgetPlugin';
+
+const MockIrisGrid: React.FC & jest.Mock = jest.fn(() => (
+  <div>MockIrisGrid</div>
+));
+
+jest.mock('@deephaven/iris-grid', () => {
+  const { forwardRef } = jest.requireActual('react');
+  return {
+    ...(jest.requireActual('@deephaven/iris-grid') as Record<string, unknown>),
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    IrisGrid: forwardRef((props, ref) => <MockIrisGrid {...props} />),
+  };
+});
+
+it('mounts without crashing', async () => {
+  const table = TestUtils.createMockProxy<DhType.Table>();
+  const fetch = jest.fn(() => Promise.resolve(table));
+
+  const store = createMockStore();
+
+  const { container, queryByText } = render(
+    <Provider store={store}>
+      <ApiContext.Provider value={dh}>
+        <GridWidgetPlugin fetch={fetch} />
+      </ApiContext.Provider>
+    </Provider>
+  );
+
+  expect(queryByText('MockIrisGrid')).not.toBeInTheDocument();
+
+  await waitFor(() =>
+    expect(
+      container.querySelector('[role=progressbar].loading-spinner-large')
+    ).toBeInTheDocument()
+  );
+
+  await waitFor(() =>
+    expect(
+      container.querySelector('[role=progressbar].loading-spinner-large')
+    ).not.toBeInTheDocument()
+  );
+
+  expect(queryByText('MockIrisGrid')).toBeInTheDocument();
+});

packages/dashboard-core-plugins/src/GridWidgetPlugin.tsx

@@ -1,19 +1,87 @@
-import { type WidgetComponentProps } from '@deephaven/plugin';
-import { type dh } from '@deephaven/jsapi-types';
-import { IrisGrid } from '@deephaven/iris-grid';
+import { useCallback, useMemo, useRef } from 'react';
+import {
+  type WidgetComponentProps,
+  usePersistentState,
+} from '@deephaven/plugin';
+import { type dh as DhType } from '@deephaven/jsapi-types';
+import {
+  type DehydratedGridState,
+  type DehydratedIrisGridState,
+  IrisGrid,
+  IrisGridCacheUtils,
+  type IrisGridState,
+  IrisGridUtils,
+} from '@deephaven/iris-grid';
 import { useSelector } from 'react-redux';
 import { getSettings, type RootState } from '@deephaven/redux';
 import { LoadingOverlay } from '@deephaven/components';
 import { getErrorMessage } from '@deephaven/utils';
+import { useApi } from '@deephaven/jsapi-bootstrap';
+import { type GridState } from '@deephaven/grid';
 import { useIrisGridModel } from './useIrisGridModel';
 
 export function GridWidgetPlugin({
   fetch,
-}: WidgetComponentProps<dh.Table>): JSX.Element | null {
+}: WidgetComponentProps<DhType.Table>): JSX.Element | null {
   const settings = useSelector(getSettings<RootState>);
 
   const fetchResult = useIrisGridModel(fetch);
 
+  const dh = useApi();
+  const irisGridUtils = useMemo(() => new IrisGridUtils(dh), [dh]);
+
+  const [state, setState] = usePersistentState<
+    (DehydratedIrisGridState & DehydratedGridState) | undefined
+  >(undefined, {
+    version: 1,
+    type: 'GridWidgetPlugin',
+  });
+  const initialState = useRef(state);
+  const hydratedState = useMemo(() => {
+    if (
+      fetchResult.status !== 'success' ||
+      initialState.current === undefined
+    ) {
+      return;
+    }
+    return {
+      ...irisGridUtils.hydrateIrisGridState(
+        fetchResult.model,
+        initialState.current
+      ),
+      ...IrisGridUtils.hydrateGridState(
+        fetchResult.model,
+        initialState.current
+      ),
+    };
+  }, [fetchResult, irisGridUtils]);
+
+  const dehydrateIrisGridState = useMemo(
+    () => IrisGridCacheUtils.makeMemoizedCombinedGridStateDehydrator(),
+    []
+  );
+
+  const handleIrisGridChange = useCallback(
+    (irisGridState: IrisGridState, gridState: GridState) => {
+      if (
+        fetchResult.status !== 'success' ||
+        irisGridState == null ||
+        gridState == null
+      ) {
+        return;
+      }
+
+      const newState = dehydrateIrisGridState(
+        fetchResult.model,
+        irisGridState,
+        gridState
+      );
+
+      setState(newState);
+    },
+    [fetchResult, setState, dehydrateIrisGridState]
+  );
+
   if (fetchResult.status === 'loading') {
     return <LoadingOverlay isLoading />;
   }
@@ -28,7 +96,15 @@ export function GridWidgetPlugin({
   }
 
   const { model } = fetchResult;
-  return <IrisGrid model={model} settings={settings} />;
+  return (
+    <IrisGrid
+      model={model}
+      settings={settings}
+      onStateChange={handleIrisGridChange}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...hydratedState}
+    />
+  );
 }
 
 export default GridWidgetPlugin;

packages/dashboard-core-plugins/src/useIrisGridModel.test.ts

@@ -134,3 +134,16 @@ it('should reload the model on reload', async () => {
     (result.current as IrisGridModelFetchSuccessResult).model
   ).toBeDefined();
 });
+
+it('should return a memoized object for repeated calls', async () => {
+  const table = TestUtils.createMockProxy<dh.Table>();
+  const fetch = jest.fn(() => Promise.resolve(table));
+  const { rerender, result, waitForNextUpdate } = renderHook(() =>
+    useIrisGridModel(fetch)
+  );
+  await waitForNextUpdate();
+  const fetchResult = result.current;
+  expect(fetchResult.status).toBe('success');
+  rerender(fetch);
+  expect(result.current).toBe(fetchResult);
+});

packages/dashboard-core-plugins/src/useIrisGridModel.ts

@@ -1,7 +1,7 @@
 import { type dh } from '@deephaven/jsapi-types';
 import { useApi } from '@deephaven/jsapi-bootstrap';
 import { IrisGridModel, IrisGridModelFactory } from '@deephaven/iris-grid';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 export type IrisGridModelFetch = () => Promise<dh.Table>;
 
@@ -106,14 +106,18 @@ export function useIrisGridModel(
     [model]
   );
 
-  if (isLoading) {
-    return { reload, status: 'loading' };
-  }
-  if (error != null) {
-    return { error, reload, status: 'error' };
-  }
-  if (model != null) {
-    return { model, reload, status: 'success' };
-  }
-  throw new Error('Invalid state');
+  const result: IrisGridModelFetchResult = useMemo(() => {
+    if (isLoading) {
+      return { reload, status: 'loading' };
+    }
+    if (error != null) {
+      return { error, reload, status: 'error' };
+    }
+    if (model != null) {
+      return { model, reload, status: 'success' };
+    }
+    throw new Error('Invalid state');
+  }, [error, isLoading, model, reload]);
+
+  return result;
 }