feat: DH-9378: Web Keyed Selection

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

@@ -25,7 +25,11 @@ import {
 } from '@deephaven/dashboard';
 import { assertNotNull, getErrorMessage } from '@deephaven/utils';
 import { useApi } from '@deephaven/jsapi-bootstrap';
-import { type GridRange, type GridState } from '@deephaven/grid';
+import {
+  type GridRange,
+  type GridState,
+  type Selection,
+} from '@deephaven/grid';
 import { useIrisGridModel } from './useIrisGridModel';
 import useDashboardColumnFilters from './useDashboardColumnFilters';
 import { InputFilterEvent } from './events';
@@ -155,7 +159,10 @@ export function GridWidgetPlugin({
     handleClearAllFilters
   );
 
-  const [selection, setSelection] = useState<readonly GridRange[]>([]);
+  const [selectedRanges, setSelectedRanges] = useState<readonly GridRange[]>(
+    []
+  );
+  const [selection, setSelection] = useState<Selection | null>(null);
 
   const {
     Plugin,
@@ -166,7 +173,8 @@ export function GridWidgetPlugin({
     model,
     irisGridRef,
     irisGridUtils,
-    selectedRanges: selection,
+    selectedRanges,
+    selection,
   });
 
   const alwaysFetchColumns = useMemo(() => {
@@ -201,7 +209,8 @@ export function GridWidgetPlugin({
       model={model}
       settings={settings}
       onStateChange={handleIrisGridChange}
-      onSelectionChanged={setSelection}
+      onSelectionChanged={setSelectedRanges}
+      onSelectionChange={setSelection}
       onContextMenu={onContextMenu}
       inputFilters={inputFilters}
       customFilters={customFilters}

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

@@ -19,6 +19,7 @@ export const TablePluginWrapper = forwardRef(
       filter,
       fetchColumns,
       selectedRanges,
+      selection,
       irisGridRef,
       pluginState,
       onStateChange,
@@ -28,6 +29,7 @@ export const TablePluginWrapper = forwardRef(
       | 'filter'
       | 'fetchColumns'
       | 'selectedRanges'
+      | 'selection'
       | 'pluginState'
       | 'onStateChange'
     > & {
@@ -72,6 +74,7 @@ export const TablePluginWrapper = forwardRef(
           table={model.table}
           tableName={panelName}
           selectedRanges={selectedRanges}
+          selection={selection}
           onStateChange={onStateChange}
           pluginState={pluginState}
           // Mimic the panel containing `irisGrid.current` for backwards compatibility

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

@@ -71,10 +71,12 @@ import {
 import { type ResolvableContextAction } from '@deephaven/components';
 import type { dh } from '@deephaven/jsapi-types';
 import {
+  selectionToRanges,
   type GridState,
   type ModelIndex,
   type ModelSizeMap,
   type MoveOperation,
+  type Selection,
 } from '@deephaven/grid';
 import type {
   TablePluginComponent,
@@ -244,6 +246,9 @@ interface IrisGridPanelState {
   frozenColumns?: readonly ColumnName[];
   columnHeaderGroups?: readonly ColumnHeaderGroup[];
 
+  // Current grid selection for memoization in getPluginContent
+  gridSelection: Selection | null;
+
   // eslint-disable-next-line react/no-unused-state
   panelState?: PanelState | null; // Dehydrated panel state that can load this panel
   irisGridStateOverrides: Partial<DehydratedIrisGridState>;
@@ -294,6 +299,7 @@ export class IrisGridPanel extends PureComponent<
     this.handleDataSelected = this.handleDataSelected.bind(this);
     this.handleError = this.handleError.bind(this);
     this.handleGridStateChange = this.handleGridStateChange.bind(this);
+    this.handleGridSelectionChange = this.handleGridSelectionChange.bind(this);
     this.handlePluginStateChange = this.handlePluginStateChange.bind(this);
     this.handleCreateChart = this.handleCreateChart.bind(this);
     this.handleShow = this.handleShow.bind(this);
@@ -363,6 +369,7 @@ export class IrisGridPanel extends PureComponent<
       isStuckToRight: false,
       conditionalFormats: [],
       selectDistinctColumns: [],
+      gridSelection: null,
     };
   }
 
@@ -469,7 +476,8 @@ export class IrisGridPanel extends PureComponent<
     (
       Plugin: TablePluginComponent | undefined,
       model: IrisGridModel | undefined,
-      pluginState: unknown
+      pluginState: unknown,
+      gridSel: Selection | null
     ) => {
       if (
         !model ||
@@ -485,6 +493,8 @@ export class IrisGridPanel extends PureComponent<
         panel: this,
       };
 
+      const selectedRanges = selectionToRanges(gridSel);
+
       return (
         <div className="iris-grid-plugin">
           <Plugin
@@ -494,7 +504,8 @@ export class IrisGridPanel extends PureComponent<
             model={model}
             table={model.table}
             tableName={this.getTableName()}
-            selectedRanges={this.irisGrid.current?.state.selectedRanges}
+            selectedRanges={selectedRanges}
+            selection={gridSel ?? null}
             onStateChange={this.handlePluginStateChange}
             pluginState={pluginState}
             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -703,6 +714,10 @@ export class IrisGridPanel extends PureComponent<
     onStateChange?.(irisGridState, gridState);
   }
 
+  handleGridSelectionChange(selection: Selection): void {
+    this.setState({ gridSelection: selection });
+  }
+
   handlePluginStateChange(pluginState: unknown): void {
     const { irisGridState, gridState } = this;
     this.pluginState = pluginState;
@@ -1247,8 +1262,10 @@ export class IrisGridPanel extends PureComponent<
       error != null ? `Unable to open table. ${error}` : undefined;
     const description = model?.description ?? undefined;
     const pluginState = panelState?.pluginState ?? null;
+    const { gridSelection } = this.state;
     const childrenContent =
-      children ?? this.getPluginContent(Plugin, model, pluginState);
+      children ??
+      this.getPluginContent(Plugin, model, pluginState, gridSelection);
     const { permissions } = user;
     const { canCopy, canDownloadCsv } = permissions;
     const widgetPanelDescriptor = this.getWidgetPanelDescriptor(
@@ -1328,6 +1345,7 @@ export class IrisGridPanel extends PureComponent<
             onDataSelected={this.handleDataSelected}
             onError={this.handleError}
             onStateChange={this.handleGridStateChange}
+            onSelectionChange={this.handleGridSelectionChange}
             onContextMenu={this.handleContextMenu}
             onAdvancedSettingsChange={this.handleAdvancedSettingsChange}
             customFilters={pluginFilters}

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

@@ -10,7 +10,7 @@ import {
   type IrisGridType,
   type IrisGridContextMenuData,
 } from '@deephaven/iris-grid';
-import { type GridRange } from '@deephaven/grid';
+import { type GridRange, type Selection } from '@deephaven/grid';
 import { TablePluginWrapper } from './TablePluginWrapper';
 
 interface UseTablePluginProps {
@@ -30,8 +30,13 @@ interface UseTablePluginProps {
   irisGridUtils: IrisGridUtils | undefined;
   /**
    * The currently selected ranges in the grid.
+   * @deprecated Use `selection` instead.
    */
   selectedRanges: readonly GridRange[] | undefined;
+  /**
+   * The current grid selection, including keyed selections.
+   */
+  selection: Selection | null | undefined;
 }
 
 /**
@@ -48,6 +53,7 @@ export function useTablePlugin({
   irisGridRef,
   irisGridUtils,
   selectedRanges,
+  selection,
 }: UseTablePluginProps): {
   Plugin: JSX.Element | null;
 } & Pick<
@@ -89,12 +95,13 @@ export function useTablePlugin({
           filter={setPluginFilters}
           fetchColumns={setAlwaysFetchColumns}
           selectedRanges={selectedRanges}
+          selection={selection}
           irisGridRef={irisGridRef}
           pluginState={pluginState}
           onStateChange={setPluginState}
         />
       ) : null,
-    [model, selectedRanges, irisGridRef, pluginState, setPluginState]
+    [model, selectedRanges, selection, irisGridRef, pluginState, setPluginState]
   );
 
   const onContextMenu = useCallback(