WIP

Author: mattrunyon

plugins/ui/src/js/src/elements/UITable/UITable.tsx

@@ -14,8 +14,10 @@ import {
   type IrisGridContextMenuData,
   IrisGridProps,
   IrisGridUtils,
+  IrisGridCacheUtils,
   IrisGridState,
-  DehydratedIrisGridState,
+  type DehydratedIrisGridState,
+  type DehydratedGridState,
 } from '@deephaven/iris-grid';
 import {
   ColorValues,
@@ -30,8 +32,9 @@ import { TableUtils } from '@deephaven/jsapi-utils';
 import type { dh as DhType } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
 import { getSettings, RootState } from '@deephaven/redux';
-import { GridMouseHandler } from '@deephaven/grid';
+import { GridMouseHandler, GridState } from '@deephaven/grid';
 import { EMPTY_ARRAY, ensureArray } from '@deephaven/utils';
+import { usePersistentState } from '@deephaven/plugin';
 import {
   DatabarConfig,
   FormattingRule,
@@ -45,7 +48,6 @@ import UITableContextMenuHandler, {
 } from './UITableContextMenuHandler';
 import UITableModel, { makeUiTableModel } from './UITableModel';
 import { UITableLayoutHints } from './JsTableProxy';
-import usePersistentState from '../hooks/usePersistentState';
 
 const log = Log.module('@deephaven/js-plugin-ui/UITable');
 
@@ -176,8 +178,6 @@ export function UITable({
   databars = EMPTY_ARRAY as unknown as DatabarConfig[],
   ...userStyleProps
 }: UITableProps): JSX.Element | null {
-  const id = useMemo(() => Math.random().toString(36).substr(2, 9), []);
-  console.log('render table', id);
   const [throwError] = useThrowError();
 
   // Margin looks wrong with ui.table, so we want to map margin to padding instead
@@ -286,40 +286,32 @@ export function UITable({
     model.setColorMap(colorMap);
   }
 
-  const prevState = useRef<IrisGridState | undefined>();
   const [dehydratedState, setDehydratedState] = usePersistentState<
-    DehydratedIrisGridState | undefined
-  >(undefined);
+    (DehydratedIrisGridState & DehydratedGridState) | undefined
+  >(undefined, { type: 'UITable', version: 1 });
   const initialState = useRef(dehydratedState);
 
+  const memoizedStateFn = useMemo(
+    () => IrisGridCacheUtils.makeMemoizedCombinedGridStateDehydrator(),
+    []
+  );
+
   const onStateChange = useCallback(
-    (newState: IrisGridState) => {
-      if (
-        model == null ||
-        newState.metrics == null ||
-        newState === prevState.current ||
-        newState.sorts === prevState.current?.sorts
-      ) {
+    (irisGridState: IrisGridState, gridState: GridState) => {
+      if (model == null) {
         return;
       }
-      // console.log('onStateChange', newState);
-      prevState.current = newState;
-      setDehydratedState(
-        utils.dehydrateIrisGridState(model, {
-          ...newState,
-          metrics: {
-            userColumnWidths: newState.metrics.userColumnWidths,
-            userRowHeights: newState.metrics.userRowHeights,
-          },
-        })
-      );
+      setDehydratedState(memoizedStateFn(model, irisGridState, gridState));
     },
-    [model, setDehydratedState, utils]
+    [memoizedStateFn, model, setDehydratedState]
   );
 
-  const hydratedState = useMemo(() => {
-    if (model && initialState.current) {
-      return utils.hydrateIrisGridState(model, initialState.current);
+  const initialHydratedState = useMemo(() => {
+    if (model && initialState.current != null) {
+      return {
+        ...utils.hydrateIrisGridState(model, initialState.current),
+        ...IrisGridUtils.hydrateGridState(model, initialState.current),
+      };
     }
   }, [model, utils]);
 
@@ -521,7 +513,7 @@ export function UITable({
         model={model}
         onStateChange={onStateChange}
         // eslint-disable-next-line react/jsx-props-no-spreading
-        {...hydratedState}
+        {...initialHydratedState}
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...irisGridProps}
       />

plugins/ui/src/js/src/elements/hooks/usePersistentState.ts

@@ -21,6 +21,7 @@ import {
   LoadingOverlay,
 } from '@deephaven/components';
 import Log from '@deephaven/log';
+import { PersistentStateProvider } from '@deephaven/plugin';
 import PortalPanel from './PortalPanel';
 import { ReactPanelControl, useReactPanel } from './ReactPanelManager';
 import { ReactPanelProps } from './LayoutUtils';
@@ -208,50 +209,9 @@ function ReactPanel({
     renderedChildren = children;
   }
 
-  const [render, setRender] = useState(0);
-
-  const persistentData = useRef({
-    initial: getInitialData(),
-    prev: [] as unknown[],
-    next: [] as unknown[],
-  });
-
-  console.log('panel render', renderedChildren);
-
-  const panelContextValue = useMemo(
-    () => ({
-      panelId,
-      addPanelState(state: unknown) {
-        persistentData.current.next.push(state);
-      },
-      initialStateIterator: persistentData.current.initial[Symbol.iterator](),
-      getInitialState() {
-        // eslint-disable-next-line react/no-this-in-sfc
-        const { value, done } = this.initialStateIterator.next();
-        return value;
-      },
-      trigger() {
-        persistentData.current.next = [];
-        // eslint-disable-next-line react/no-this-in-sfc
-        this.isTracking = true;
-        setRender(prev => prev + 1);
-      },
-      isTracking: false,
-    }),
-    [panelId]
-  );
-
-  useEffect(() => {
-    console.log('panel effect', persistentData.current.next.length);
-    persistentData.current.prev = persistentData.current.next;
-    persistentData.current.next = [];
-    panelContextValue.isTracking = false;
-    onDataChange(persistentData.current.prev);
-  }, [render, panelContextValue, onDataChange]);
-
   return portal
     ? ReactDOM.createPortal(
-        <ReactPanelContext.Provider value={panelContextValue}>
+        <ReactPanelContext.Provider value={panelId}>
           <View
             height="100%"
             width="100%"
@@ -287,9 +247,14 @@ function ReactPanel({
                  * Don't render the children if there's an error with the widget. If there's an error with the widget, we can assume the children won't render properly,
                  * but we still want the panels to appear so things don't disappear/jump around.
                  */}
-                {React.Children.map(renderedChildren, child =>
-                  React.cloneElement(child as React.ReactElement)
-                )}
+                <PersistentStateProvider
+                  initialState={getInitialData()}
+                  onChange={onDataChange}
+                >
+                  {React.Children.map(renderedChildren, child =>
+                    React.cloneElement(child as React.ReactElement)
+                  )}
+                </PersistentStateProvider>
               </ReactPanelErrorBoundary>
             </Flex>
           </View>

plugins/ui/src/js/src/layout/ReactPanel.tsx

@@ -1,22 +1,14 @@
 import { createContext, useContext } from 'react';
 
-type PanelContextType = {
-  panelId: string;
-  addPanelState: (state: unknown) => void;
-  trigger: () => void;
-  isTracking: boolean;
-  getInitialState: () => unknown;
-};
-
 /**
  * Context that holds the ID of the panel that we are currently in.
  */
-export const ReactPanelContext = createContext<PanelContextType | null>(null);
+export const ReactPanelContext = createContext<string | null>(null);
 
 /**
  * Gets the panel ID from the nearest panel context.
  * @returns The panel ID or null if not in a panel
  */
 export function usePanelId(): string | null {
-  return useContext(ReactPanelContext)?.panelId ?? null;
+  return useContext(ReactPanelContext);
 }

plugins/ui/src/js/src/layout/ReactPanelContext.ts

@@ -8,7 +8,7 @@ import React, {
 import { nanoid } from 'nanoid';
 import { WidgetDescriptor } from '@deephaven/dashboard';
 import Log from '@deephaven/log';
-import { EMPTY_FUNCTION } from '@deephaven/utils';
+import { EMPTY_ARRAY, EMPTY_FUNCTION } from '@deephaven/utils';
 import { ReactPanelManagerContext } from '../layout/ReactPanelManager';
 import { getRootChildren } from './DocumentUtils';
 import {
@@ -150,7 +150,9 @@ function DocumentHandler({
   }, [widgetData]);
 
   const getInitialData = useCallback(
-    (panelId: string) => widgetData.panelStates?.[panelId] ?? [],
+    (panelId: string) =>
+      widgetData.panelStates?.[panelId] ??
+      (EMPTY_ARRAY as unknown as unknown[]),
     [widgetData]
   );