Update to beta packages

Author: mattrunyon

package-lock.json

@@ -40,25 +40,25 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@deephaven/chart": "^0.106.2",
-    "@deephaven/components": "^0.106.2",
-    "@deephaven/console": "^0.106.3",
-    "@deephaven/dashboard": "^0.106.4",
-    "@deephaven/dashboard-core-plugins": "^0.106.4",
-    "@deephaven/golden-layout": "^0.106.2",
-    "@deephaven/grid": "^0.106.3",
-    "@deephaven/icons": "^0.106.0",
-    "@deephaven/iris-grid": "^0.106.4",
-    "@deephaven/jsapi-bootstrap": "^0.106.2",
-    "@deephaven/jsapi-components": "^0.106.2",
+    "@deephaven/chart": "0.108.1-beta.1",
+    "@deephaven/components": "0.108.1-beta.1",
+    "@deephaven/console": "0.108.1-beta.1",
+    "@deephaven/dashboard": "0.108.1-beta.1",
+    "@deephaven/dashboard-core-plugins": "0.108.1-beta.1",
+    "@deephaven/golden-layout": "0.108.1-beta.1",
+    "@deephaven/grid": "0.108.1-beta.1",
+    "@deephaven/icons": "0.108.1-beta.1",
+    "@deephaven/iris-grid": "0.108.1-beta.1",
+    "@deephaven/jsapi-bootstrap": "0.108.1-beta.1",
+    "@deephaven/jsapi-components": "0.108.1-beta.1",
     "@deephaven/jsapi-types": "^1.0.0-dev0.35.0",
-    "@deephaven/jsapi-utils": "^0.106.2",
-    "@deephaven/log": "^0.106.2",
-    "@deephaven/plugin": "^0.106.4",
-    "@deephaven/react-hooks": "^0.106.2",
-    "@deephaven/redux": "^0.106.4",
-    "@deephaven/test-utils": "^0.106.0",
-    "@deephaven/utils": "^0.106.0",
+    "@deephaven/jsapi-utils": "0.108.1-beta.1",
+    "@deephaven/log": "0.108.1-beta.1",
+    "@deephaven/plugin": "0.108.1-beta.1",
+    "@deephaven/react-hooks": "0.108.1-beta.1",
+    "@deephaven/redux": "0.108.1-beta.1",
+    "@deephaven/test-utils": "0.108.1-beta.1",
+    "@deephaven/utils": "0.108.1-beta.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@internationalized/date": "^3.5.5",
     "classnames": "^2.5.1",

plugins/ui/src/js/package.json

@@ -28,7 +28,6 @@ import {
   viewStyleProps,
 } from '@deephaven/components';
 import { useApi } from '@deephaven/jsapi-bootstrap';
-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';
@@ -441,17 +440,15 @@ export function UITable({
     [contextMenu, alwaysFetchColumns]
   );
 
-  const irisGridProps = useMemo(() => {
+  const irisGridServerProps = useMemo(() => {
     const props = {
       mouseHandlers,
       alwaysFetchColumns,
       showSearchBar,
       sorts: hydratedSorts,
       quickFilters: hydratedQuickFilters,
       isFilterBarShown: showQuickFilters,
-      reverseType: reverse
-        ? TableUtils.REVERSE_TYPE.POST_SORT
-        : TableUtils.REVERSE_TYPE.NONE,
+      reverse,
       density,
       settings: { ...settings, showExtraGroupColumn: showGroupingColumn },
       onContextMenu,
@@ -478,8 +475,13 @@ export function UITable({
       },
     } satisfies Partial<IrisGridProps>;
 
-    // Remove any explicit undefined values
-    Object.entries(props).forEach(([key, value]) => {
+    // Remove any explicit undefined values so we can use client state if available
+    (
+      Object.entries(props) as [
+        keyof typeof props,
+        (typeof props)[keyof typeof props],
+      ][]
+    ).forEach(([key, value]) => {
       if (value === undefined) {
         delete props[key];
       }
@@ -502,6 +504,29 @@ export function UITable({
     aggregationsPosition,
   ]);
 
+  const initialIrisGridServerProps = useRef(irisGridServerProps);
+
+  /**
+   * We want to set the props based on a combination of server state and client state.
+   * If the server state is the same as its initial state, then we are rehydrating and
+   * the client state should take precedence.
+   * Otherwise, we have received changes from the server and we should use those over client state.
+   * In the future we may want to do a smarter merge of these.
+   */
+  const mergedIrisGridProps = useMemo(() => {
+    if (initialIrisGridServerProps.current === irisGridServerProps) {
+      return {
+        ...irisGridServerProps,
+        ...initialHydratedState,
+      };
+    }
+
+    return {
+      ...initialHydratedState,
+      ...irisGridServerProps,
+    };
+  }, [irisGridServerProps, initialHydratedState]);
+
   return model ? (
     <div
       // eslint-disable-next-line react/jsx-props-no-spreading
@@ -513,9 +538,7 @@ export function UITable({
         model={model}
         onStateChange={onStateChange}
         // eslint-disable-next-line react/jsx-props-no-spreading
-        {...initialHydratedState}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...irisGridProps}
+        {...mergedIrisGridProps}
       />
     </div>
   ) : null;

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

@@ -34,6 +34,8 @@ function makeReactPanelManager({
   onClose = jest.fn(),
   onOpen = jest.fn(),
   getPanelId = jest.fn(() => mockPanelId),
+  onDataChange = jest.fn(),
+  getInitialData = jest.fn(() => []),
   title = 'test title',
 }: Partial<ReactPanelProps> & Partial<ReactPanelManager> = {}) {
   return (
@@ -43,6 +45,8 @@ function makeReactPanelManager({
         metadata,
         onClose,
         onOpen,
+        onDataChange,
+        getInitialData,
       }}
     >
       <ReactPanel title={title}>{children}</ReactPanel>

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

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { nanoid } from 'nanoid';
 import {

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

@@ -19,8 +19,18 @@ export interface ReactPanelManager {
   /** Triggered when a panel is closed */
   onClose: (panelId: string) => void;
 
+  /**
+   * Must be called when client data that should be persisted is changed.
+   * @param panelId The panelId for the changed data
+   * @param data The data to persist. Must be JSON serializable.
+   */
   onDataChange: (panelId: string, data: unknown[]) => void;
 
+  /**
+   * Gets the initial persisted data for a panel.
+   * @param panelId The panelId for the data to be retrieved.
+   * @returns Data that was persisted for the panelId.
+   */
   getInitialData: (panelId: string) => unknown[];
 
   /**
@@ -44,8 +54,16 @@ export interface ReactPanelControl {
   /** Must be called when the panel is closed */
   onClose: () => void;
 
+  /**
+   * Must be called when client data that should be persisted is changed.
+   * @param data The data to persist. Must be JSON serializable.
+   */
   onDataChange: (data: unknown[]) => void;
 
+  /**
+   * Gets the initial persisted data for a panel.
+   * @returns Data that was persisted for the panel.
+   */
   getInitialData: () => unknown[];
 
   /** The panelId for this react panel */