perf: remove workspace dependancy from iris-grid-panel and memoize settings redux selector (#1982)

Discovered as part of #1977 investigation. Typing in a notebook triggers
a workspace update, which was triggering all tables to re-render.
Removed deprecated dependeny of workspace from iris-grid.

Further settings is derived from workspace and returns a new settings
object. Iris-grid depends on settings, but the object had no changes.
Memoize the selector so it always returns the same object if settings
haven't changed.

Removes ~100ms of lag that was occuring 400ms after the debounce of
notebook key press events.

BREAKING CHANGE: getPluginContent deprecatedProps have been removed from
iris-grid

Author: dsmmcken

package-lock.json

@@ -43,7 +43,6 @@ import {
   DehydratedIrisGridPanelState,
   ColumnHeaderGroup,
   IrisGridContextMenuData,
-  IrisGridTableModel,
   PartitionConfig,
 } from '@deephaven/iris-grid';
 import {
@@ -54,10 +53,8 @@ import {
 } from '@deephaven/jsapi-utils';
 import Log from '@deephaven/log';
 import {
-  CustomizableWorkspace,
   getSettings,
   getUser,
-  getWorkspace,
   RootState,
   User,
   WorkspaceSettings,
@@ -67,10 +64,7 @@ import {
   CancelablePromise,
   PromiseUtils,
 } from '@deephaven/utils';
-import {
-  ContextMenuRoot,
-  ResolvableContextAction,
-} from '@deephaven/components';
+import { ResolvableContextAction } from '@deephaven/components';
 import type { dh } from '@deephaven/jsapi-types';
 import {
   GridState,
@@ -101,8 +95,6 @@ const log = Log.module('IrisGridPanel');
 
 const DEBOUNCE_PANEL_STATE_UPDATE = 500;
 
-const PLUGIN_COMPONENTS = { IrisGrid, IrisGridTableModel, ContextMenuRoot };
-
 type ModelQueueFunction = (model: IrisGridModel) => void;
 
 type ModelQueue = ModelQueueFunction[];
@@ -157,7 +149,6 @@ interface StateProps {
     tableColumn?: LinkColumn
   ) => boolean;
   user: User;
-  workspace: CustomizableWorkspace;
   settings: WorkspaceSettings;
 }
 
@@ -420,8 +411,6 @@ export class IrisGridPanel extends PureComponent<
     (
       Plugin: TablePluginComponent | undefined,
       model: IrisGridModel | undefined,
-      user: User,
-      workspace: CustomizableWorkspace,
       pluginState: unknown
     ) => {
       if (
@@ -433,19 +422,6 @@ export class IrisGridPanel extends PureComponent<
         return null;
       }
 
-      // The panel in the deprecated props makes an ugly dependency of the plugin on the panel
-      // Since we didn't have TS when the old plugins would have been implemented,
-      // just pass the deprecated props without type checking
-      // so we can break the ugly dependency of plugin on panel
-      const deprecatedProps = {
-        panel: this,
-        onFilter: this.handlePluginFilter,
-        onFetchColumns: this.handlePluginFetchColumns,
-        user,
-        workspace,
-        components: PLUGIN_COMPONENTS,
-      };
-
       return (
         <div className="iris-grid-plugin">
           <Plugin
@@ -456,8 +432,6 @@ export class IrisGridPanel extends PureComponent<
             table={model.table}
             onStateChange={this.handlePluginStateChange}
             pluginState={pluginState}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...deprecatedProps}
           />
         </div>
       );
@@ -1217,7 +1191,6 @@ export class IrisGridPanel extends PureComponent<
       metadata,
       panelState,
       user,
-      workspace,
       settings,
       theme,
     } = this.props;
@@ -1266,8 +1239,7 @@ export class IrisGridPanel extends PureComponent<
     const description = model?.description ?? undefined;
     const pluginState = panelState?.pluginState ?? null;
     const childrenContent =
-      children ??
-      this.getPluginContent(Plugin, model, user, workspace, pluginState);
+      children ?? this.getPluginContent(Plugin, model, pluginState);
     const { permissions } = user;
     const { canCopy, canDownloadCsv } = permissions;
 
@@ -1373,7 +1345,6 @@ const mapStateToProps = (
     localDashboardId
   ),
   user: getUser(state),
-  workspace: getWorkspace(state),
   settings: getSettings(state),
 });
 

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

@@ -27,6 +27,7 @@
     "@deephaven/log": "file:../log",
     "@deephaven/plugin": "file:../plugin",
     "fast-deep-equal": "^3.1.3",
+    "proxy-memoize": "^3.0.0",
     "redux-thunk": "2.4.1"
   },
   "peerDependencies": {

packages/redux/package.json

@@ -1,4 +1,5 @@
 import type { UndoPartial } from '@deephaven/utils';
+import { memoize } from 'proxy-memoize';
 import type { RootState, WorkspaceSettings } from './store';
 
 const EMPTY_OBJECT = Object.freeze({});
@@ -55,22 +56,24 @@ export const getWorkspace = <State extends RootState>(
 };
 
 // Settings
-export const getSettings = <State extends RootState>(
-  store: State
-): UndoPartial<State['workspace']['data']['settings']> => {
-  const customizedSettings = getWorkspace(store)?.data.settings ?? {};
-
-  const settings = { ...getDefaultWorkspaceSettings(store) };
-  const keys = Object.keys(customizedSettings) as (keyof WorkspaceSettings)[];
-  for (let i = 0; i < keys.length; i += 1) {
-    const key = keys[i];
-    if (customizedSettings[key] !== undefined) {
-      // @ts-expect-error assign non-undefined customized settings to settings
-      settings[key] = customizedSettings[key];
+export const getSettings = memoize(
+  <State extends RootState>(
+    store: State
+  ): UndoPartial<State['workspace']['data']['settings']> => {
+    const customizedSettings = getWorkspace(store)?.data.settings ?? {};
+
+    const settings = { ...getDefaultWorkspaceSettings(store) };
+    const keys = Object.keys(customizedSettings) as (keyof WorkspaceSettings)[];
+    for (let i = 0; i < keys.length; i += 1) {
+      const key = keys[i];
+      if (customizedSettings[key] !== undefined) {
+        // @ts-expect-error assign non-undefined customized settings to settings
+        settings[key] = customizedSettings[key];
+      }
     }
+    return settings as UndoPartial<State['workspace']['data']['settings']>;
   }
-  return settings as UndoPartial<State['workspace']['data']['settings']>;
-};
+);
 
 export const getDefaultSettings = <State extends RootState>(
   store: State