refactor: DH-19267: columns changed filter event takes an id rather than a panel (#2417)

https://deephaven.atlassian.net/browse/DH-19267

Refactors `InputFilterEvent.COLUMNS_CHANGED` to take an id instead of a
panel. This can be a panel id or a widget id. This will allow
`deephaven.ui` components to send this event. Note that more work will
need to be done on Linker. This will be done later when we address
https://deephaven.atlassian.net/browse/DH-18840

Author: dgodinez-dh

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

@@ -6,6 +6,7 @@ import {
   type DashboardPluginComponentProps,
   LayoutUtils,
   PanelEvent,
+  type PanelId,
   updateDashboardData,
   useListener,
 } from '@deephaven/dashboard';
@@ -16,6 +17,7 @@ import {
   DropdownFilterPanel,
   FilterSetManagerPanel,
   InputFilterPanel,
+  type WidgetId,
 } from './panels';
 
 const log = Log.module('FilterPlugin');
@@ -25,6 +27,9 @@ type Column = {
   type: string;
 };
 
+// A panel or widget can have columns for filters
+export type FilterColumnSourceId = PanelId | WidgetId;
+
 export type FilterChangeEvent = Column & {
   value: string;
   timestamp: number;
@@ -41,7 +46,9 @@ export function FilterPlugin(props: FilterPluginProps): JSX.Element | null {
   assertIsDashboardPluginProps(props);
   const { id: localDashboardId, layout, registerComponent } = props;
   const dispatch = useDispatch();
-  const [panelColumns] = useState(() => new Map<Component, Column[]>());
+  const [panelColumns] = useState(
+    () => new Map<FilterColumnSourceId, Column[]>()
+  );
   const [panelFilters] = useState(
     () => new Map<Component, FilterChangeEvent[]>()
   );
@@ -92,13 +99,13 @@ export function FilterPlugin(props: FilterPluginProps): JSX.Element | null {
 
   /**
    * Handler for the COLUMNS_CHANGED event.
-   * @param panel The component that's emitting the filter change
+   * @param sourceId The id of the component that's emitting the filter change
    * @param columns The columns in this panel
    */
   const handleColumnsChanged = useCallback(
-    (panel: Component, columns: Column | Column[]) => {
-      log.debug2('handleColumnsChanged', panel, columns);
-      panelColumns.set(panel, ([] as Column[]).concat(columns));
+    (sourceId: FilterColumnSourceId, columns: Column | Column[]) => {
+      log.debug2('handleColumnsChanged', sourceId, columns);
+      panelColumns.set(sourceId, ([] as Column[]).concat(columns));
       sendUpdate();
     },
     [panelColumns, sendUpdate]
@@ -130,9 +137,12 @@ export function FilterPlugin(props: FilterPluginProps): JSX.Element | null {
   const handlePanelUnmount = useCallback(
     panel => {
       log.debug2('handlePanelUnmount', panel);
-      panelColumns.delete(panel);
+      const panelId = LayoutUtils.getIdFromPanel(panel);
+      if (panelId != null) {
+        panelColumns.delete(panelId);
+      }
       panelFilters.delete(panel);
-      panelTables.delete(LayoutUtils.getIdFromPanel(panel));
+      panelTables.delete(panelId);
       sendUpdate();
     },
     [panelColumns, panelFilters, panelTables, sendUpdate]

packages/dashboard-core-plugins/src/linker/Linker.tsx

@@ -46,6 +46,7 @@ import LinkerUtils, {
   type LinkType,
   isLinkableColumn,
 } from './LinkerUtils';
+import { type FilterColumnSourceId } from '../FilterPlugin';
 
 const log = Log.module('Linker');
 
@@ -252,21 +253,24 @@ export class Linker extends Component<LinkerProps, LinkerState> {
     this.columnSelected(panel, column, true);
   }
 
-  handleColumnsChanged(panel: PanelComponent, columns: LinkColumn[]): void {
-    log.debug('handleColumnsChanged', panel, columns);
+  handleColumnsChanged(
+    sourceId: FilterColumnSourceId,
+    columns: LinkColumn[]
+  ): void {
+    log.debug('handleColumnsChanged', sourceId, columns);
     const { links } = this.props;
-    const panelId = LayoutUtils.getIdFromPanel(panel);
-    if (panelId == null) {
-      log.error('Invalid panelId', panel);
+    if (sourceId == null) {
+      log.error('Invalid filter columns source id', sourceId);
       return;
     }
+    // NOTE: links need to be updated to use sourceId instead of panelId. This will be done when we implement linker for dh.ui widgets DH-18840
     // Delete links that start or end on non-existent column in the updated panel
     const linksToDelete = links.filter(
       ({ start, end }) =>
-        (start.panelId === panelId &&
+        (start.panelId === sourceId &&
           LinkerUtils.findColumn(columns, start) == null) ||
         (end != null &&
-          end.panelId === panelId &&
+          end.panelId === sourceId &&
           LinkerUtils.findColumn(columns, end) == null)
     );
     this.deleteLinks(linksToDelete);

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

@@ -787,7 +787,7 @@ export class ChartPanel extends Component<ChartPanelProps, ChartPanelState> {
     const { glEventHub } = this.props;
     glEventHub.emit(
       InputFilterEvent.COLUMNS_CHANGED,
-      this,
+      LayoutUtils.getIdFromPanel(this),
       Array.from(model.getFilterColumnMap().values())
     );
   }

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

@@ -787,7 +787,11 @@ export class IrisGridPanel extends PureComponent<
   sendColumnsChange(columns: readonly dh.Column[]): void {
     log.debug2('sendColumnsChange', columns);
     const { glEventHub } = this.props;
-    glEventHub.emit(InputFilterEvent.COLUMNS_CHANGED, this, columns);
+    glEventHub.emit(
+      InputFilterEvent.COLUMNS_CHANGED,
+      LayoutUtils.getIdFromPanel(this),
+      columns
+    );
   }
 
   startModelListening(model: IrisGridModel): void {

packages/dashboard-core-plugins/src/panels/WidgetPanelTypes.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type Brand } from '@deephaven/utils';
 
 export type WidgetPanelDescriptor = {
   /** Type of the widget. */
@@ -24,3 +25,5 @@ export type WidgetPanelTooltipProps = {
   /** Children to render within this tooltip */
   children?: ReactNode;
 };
+
+export type WidgetId = Brand<'WidgetId'>;

packages/dashboard/src/layout/LayoutUtils.ts

@@ -21,14 +21,16 @@ import type {
   CloseOptions,
   GLPanelProps,
 } from '@deephaven/golden-layout';
-import { assertNotNull } from '@deephaven/utils';
+import { assertNotNull, type Brand } from '@deephaven/utils';
 import { type DashboardLayoutConfig } from '../DashboardLayout';
 import { type PanelConfig } from '../DashboardPlugin';
 
 const log = Log.module('LayoutUtils');
 
 type LayoutConfig = { id?: string; component?: string };
 
+export type PanelId = Brand<'PanelId', string | string[] | undefined>;
+
 export type LayoutPanel = {
   props: GLPanelProps;
 };
@@ -818,12 +820,10 @@ class LayoutUtils {
    * @param glContainer The container to get the panel ID for
    * @returns Panel ID
    */
-  static getIdFromContainer(
-    glContainer: Container
-  ): string | string[] | null | undefined {
+  static getIdFromContainer(glContainer: Container): PanelId | null {
     const config = LayoutUtils.getComponentConfigFromContainer(glContainer);
     if (config) {
-      return config.id;
+      return config.id as PanelId;
     }
     return null;
   }
@@ -833,9 +833,7 @@ class LayoutUtils {
    * @param panel The panel to get the ID for
    * @returns Panel ID
    */
-  static getIdFromPanel(
-    panel: LayoutPanel
-  ): string | string[] | null | undefined {
+  static getIdFromPanel(panel: LayoutPanel): PanelId | null {
     const { glContainer } = panel.props;
     return LayoutUtils.getIdFromContainer(glContainer);
   }

packages/dashboard/src/layout/index.ts

@@ -1,5 +1,5 @@
 export { default as LayoutManagerContext } from './LayoutManagerContext';
-export { default as LayoutUtils } from './LayoutUtils';
+export { default as LayoutUtils, type PanelId } from './LayoutUtils';
 export { default as GLPropTypes } from './GLPropTypes';
 export { default as useDashboardPanel } from './useDashboardPanel';
 export { default as useLayoutManager } from './useLayoutManager';