feat: Convert DashboardPlugins to WidgetPlugins

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

@@ -1,23 +1,21 @@
-import { useCallback } from 'react';
-import {
-  assertIsDashboardPluginProps,
-  DashboardPluginComponentProps,
-  DehydratedDashboardPanelProps,
-  useDashboardPanel,
-} from '@deephaven/dashboard';
+import { forwardRef, useMemo } from 'react';
 import { useApi } from '@deephaven/jsapi-bootstrap';
 import { useConnection } from '@deephaven/jsapi-components';
 import { ChartModel, ChartModelFactory } from '@deephaven/chart';
 import type { dh as DhType, IdeConnection } from '@deephaven/jsapi-types';
 import { IrisGridUtils } from '@deephaven/iris-grid';
 import { getTimeZone, store } from '@deephaven/redux';
+import { type WidgetComponentProps } from '@deephaven/plugin';
 import {
-  ChartPanel,
   ChartPanelMetadata,
   GLChartPanelState,
   isChartPanelDehydratedProps,
   isChartPanelTableMetadata,
 } from './panels';
+import ConnectedChartPanel, {
+  type ChartPanel,
+  type ChartPanelProps,
+} from './panels/ChartPanel';
 
 async function createChartModel(
   dh: DhType,
@@ -86,41 +84,36 @@ async function createChartModel(
   return ChartModelFactory.makeModelFromSettings(dh, settings as any, table);
 }
 
-export function ChartPlugin(
-  props: DashboardPluginComponentProps
-): JSX.Element | null {
-  assertIsDashboardPluginProps(props);
-  const dh = useApi();
-  const connection = useConnection();
+export const ChartPlugin = forwardRef(
+  (props: WidgetComponentProps, ref: React.Ref<ChartPanel>) => {
+    const dh = useApi();
+    const connection = useConnection();
 
-  const hydrate = useCallback(
-    (hydrateProps: DehydratedDashboardPanelProps, id: string) => ({
-      ...hydrateProps,
-      localDashboardId: id,
-      makeModel: () => {
-        const { metadata } = hydrateProps;
-        const panelState = isChartPanelDehydratedProps(hydrateProps)
-          ? hydrateProps.panelState
-          : undefined;
-        if (metadata == null) {
-          throw new Error('Metadata is required for chart panel');
-        }
+    const hydratedProps = useMemo(
+      () => ({
+        ...props,
+        metadata: props.metadata as ChartPanelMetadata,
+        localDashboardId: props.localDashboardId,
+        makeModel: () => {
+          const { metadata } = props;
+          const panelState = isChartPanelDehydratedProps(props)
+            ? (props as unknown as ChartPanelProps).panelState
+            : undefined;
+          if (metadata == null) {
+            throw new Error('Metadata is required for chart panel');
+          }
 
-        return createChartModel(dh, connection, metadata, panelState);
-      },
-    }),
-    [dh, connection]
-  );
+          return createChartModel(dh, connection, metadata, panelState);
+        },
+      }),
+      [dh, connection, props]
+    );
 
-  useDashboardPanel({
-    dashboardProps: props,
-    componentName: ChartPanel.COMPONENT,
-    component: ChartPanel,
-    supportedTypes: dh.VariableType.FIGURE,
-    hydrate,
-  });
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <ConnectedChartPanel ref={ref} {...hydratedProps} />;
+  }
+);
 
-  return null;
-}
+ChartPlugin.displayName = 'ChartPlugin';
 
 export default ChartPlugin;

packages/dashboard-core-plugins/src/ChartPluginConfig.ts

@@ -1,10 +1,15 @@
-import { PluginType, DashboardPlugin } from '@deephaven/plugin';
+import { PluginType, type WidgetPlugin } from '@deephaven/plugin';
+import { vsGraph } from '@deephaven/icons';
 import ChartPlugin from './ChartPlugin';
 
-const ChartPluginConfig: DashboardPlugin = {
-  name: 'ChartPlugin',
-  type: PluginType.DASHBOARD_PLUGIN,
+const ChartPluginConfig: WidgetPlugin = {
+  name: 'ChartPanel',
+  title: 'Chart',
+  type: PluginType.WIDGET_PLUGIN,
   component: ChartPlugin,
+  panelComponent: ChartPlugin,
+  supportedTypes: 'Figure',
+  icon: vsGraph,
 };
 
 export default ChartPluginConfig;

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

@@ -1,38 +1,33 @@
-import { useMemo } from 'react';
-import {
-  assertIsDashboardPluginProps,
-  DashboardPluginComponentProps,
-  useDashboardPanel,
-} from '@deephaven/dashboard';
-import { useApi } from '@deephaven/jsapi-bootstrap';
-import { IrisGridPanel } from './panels';
+import { forwardRef, useMemo } from 'react';
+import { type WidgetComponentProps } from '@deephaven/plugin';
+import { type DashboardPanelProps } from '@deephaven/dashboard';
 import useHydrateGrid from './useHydrateGrid';
+import ConnectedIrisGridPanel, {
+  IrisGridPanelProps,
+  type IrisGridPanel,
+} from './panels/IrisGridPanel';
 
-export function GridPlugin(
-  props: DashboardPluginComponentProps
-): JSX.Element | null {
-  assertIsDashboardPluginProps(props);
-  const dh = useApi();
-  const hydrate = useHydrateGrid();
+export const GridPlugin = forwardRef(
+  (props: WidgetComponentProps, ref: React.Ref<IrisGridPanel>) => {
+    const hydrate = useHydrateGrid<
+      DashboardPanelProps & Pick<IrisGridPanelProps, 'panelState'>
+    >();
+    const { localDashboardId } = props;
+    const hydratedProps = useMemo(
+      () =>
+        hydrate(
+          props as WidgetComponentProps &
+            Pick<IrisGridPanelProps, 'panelState'>,
+          localDashboardId
+        ),
+      [hydrate, props, localDashboardId]
+    );
 
-  const supportedTypes = useMemo(
-    () => [
-      dh.VariableType.TABLE,
-      dh.VariableType.TREETABLE,
-      dh.VariableType.HIERARCHICALTABLE,
-    ],
-    [dh]
-  );
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <ConnectedIrisGridPanel ref={ref} {...hydratedProps} />;
+  }
+);
 
-  useDashboardPanel({
-    dashboardProps: props,
-    componentName: IrisGridPanel.COMPONENT,
-    component: IrisGridPanel,
-    supportedTypes,
-    hydrate,
-  });
-
-  return null;
-}
+GridPlugin.displayName = 'GridPlugin';
 
 export default GridPlugin;

packages/dashboard-core-plugins/src/GridPluginConfig.ts

@@ -1,10 +1,15 @@
-import { PluginType, DashboardPlugin } from '@deephaven/plugin';
+import { PluginType, type WidgetPlugin } from '@deephaven/plugin';
+import { dhTable } from '@deephaven/icons';
 import GridPlugin from './GridPlugin';
 
-const GridPluginConfig: DashboardPlugin = {
-  name: 'GridPlugin',
-  type: PluginType.DASHBOARD_PLUGIN,
+const GridPluginConfig: WidgetPlugin = {
+  name: 'IrisGridPanel',
+  title: 'Table',
+  type: PluginType.WIDGET_PLUGIN,
   component: GridPlugin,
+  panelComponent: GridPlugin,
+  supportedTypes: ['Table', 'TreeTable', 'HierarchicalTable'],
+  icon: dhTable,
 };
 
 export default GridPluginConfig;

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

@@ -72,7 +72,6 @@ export function WrapWidgetPlugin(
             {...props}
           />
         )}
-        )
       </WidgetPanel>
     );
   }

packages/dashboard-core-plugins/src/index.test.tsx

@@ -9,10 +9,8 @@ import { type IdeConnection } from '@deephaven/jsapi-types';
 import { ConnectionContext } from '@deephaven/jsapi-components';
 import { PluginsContext } from '@deephaven/plugin';
 import {
-  ChartPlugin,
   ConsolePlugin,
   FilterPlugin,
-  GridPlugin,
   LinkerPlugin,
   MarkdownPlugin,
   WidgetLoaderPlugin,
@@ -36,8 +34,6 @@ it('handles mounting and unmount core plugins properly', () => {
           <Provider store={store}>
             <Dashboard>
               <FilterPlugin />
-              <GridPlugin hydrate={() => undefined} />
-              <ChartPlugin hydrate={() => undefined} />
               <ConsolePlugin />
               <LinkerPlugin />
               <MarkdownPlugin />

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

@@ -122,9 +122,18 @@ export interface ChartPanelProps extends DashboardPanelProps {
   metadata: ChartPanelMetadata;
   /** Function to build the ChartModel used by this ChartPanel. Can return a promise. */
   makeModel: () => Promise<ChartModel>;
+  localDashboardId: string;
+  Plotly?: typeof PlotlyType;
+  /** The panel container div */
+  containerRef?: RefObject<HTMLDivElement>;
+
+  panelState: GLChartPanelState;
+  settings: Partial<WorkspaceSettings>;
+}
+
+interface PropsFromRedux {
   inputFilters: InputFilter[];
   links: Link[];
-  localDashboardId: string;
   isLinkerActive: boolean;
   source?: TableTemplate;
   sourcePanel?: PanelComponent;
@@ -134,12 +143,6 @@ export interface ChartPanelProps extends DashboardPanelProps {
     id: string,
     secondParam: undefined
   ) => void;
-  Plotly?: typeof PlotlyType;
-  /** The panel container div */
-  containerRef?: RefObject<HTMLDivElement>;
-
-  panelState: GLChartPanelState;
-  settings: Partial<WorkspaceSettings>;
 }
 
 interface ChartPanelState {
@@ -178,7 +181,14 @@ function hasPanelState(
   return (panel as { panelState: IrisGridPanelState }).panelState != null;
 }
 
-export class ChartPanel extends Component<ChartPanelProps, ChartPanelState> {
+type ChartPanelPropsWithRedux = ChartPanelProps &
+  PropsFromRedux &
+  React.RefAttributes<ChartPanel>;
+
+export class ChartPanel extends Component<
+  ChartPanelPropsWithRedux,
+  ChartPanelState
+> {
   static defaultProps = {
     columnSelectionValidator: null,
     isLinkerActive: false,
@@ -193,7 +203,7 @@ export class ChartPanel extends Component<ChartPanelProps, ChartPanelState> {
 
   static COMPONENT = 'ChartPanel';
 
-  constructor(props: ChartPanelProps) {
+  constructor(props: ChartPanelPropsWithRedux) {
     super(props);
 
     this.handleColumnSelected = this.handleColumnSelected.bind(this);
@@ -263,7 +273,7 @@ export class ChartPanel extends Component<ChartPanelProps, ChartPanelState> {
   }
 
   componentDidUpdate(
-    prevProps: ChartPanelProps,
+    prevProps: ChartPanelPropsWithRedux,
     prevState: ChartPanelState
   ): void {
     const { inputFilters, source } = this.props;
@@ -1046,7 +1056,7 @@ export class ChartPanel extends Component<ChartPanelProps, ChartPanelState> {
     if (isChartPanelTableMetadata(metadata)) {
       name = metadata.table;
     } else {
-      name = metadata.figure;
+      name = metadata.name ?? metadata.figure;
     }
     const inputFilterMap = this.getInputFilterColumnMap(
       columnMap,
@@ -1160,17 +1170,7 @@ export class ChartPanel extends Component<ChartPanelProps, ChartPanelState> {
 const mapStateToProps = (
   state: RootState,
   ownProps: { localDashboardId: string; metadata: { sourcePanelId?: string } }
-): Omit<
-  ChartPanelProps,
-  | 'glContainer'
-  | 'glEventHub'
-  | 'localDashboardId'
-  | 'makeModel'
-  | 'metadata'
-  | 'panelState'
-  | 'setActiveTool'
-  | 'setDashboardIsolatedLinkerPanelId'
-> => {
+) => {
   const { localDashboardId, metadata } = ownProps;
 
   let sourcePanelId;

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

@@ -66,6 +66,7 @@ interface PanelProps {
 interface PanelState {
   title?: string | null;
   showRenameDialog: boolean;
+  isWithinPanel: boolean;
 }
 /**
  * Generic panel component that emits mount/unmount/focus events.
@@ -118,10 +119,13 @@ class Panel extends PureComponent<PanelProps, PanelState> {
     this.handleTabClicked = this.handleTabClicked.bind(this);
     this.handleTab = this.handleTab.bind(this);
 
+    this.ref = React.createRef<HTMLDivElement>();
+
     const { glContainer } = this.props;
     this.state = {
       title: LayoutUtils.getTitleFromContainer(glContainer),
       showRenameDialog: false,
+      isWithinPanel: false,
     };
   }
 
@@ -151,6 +155,11 @@ class Panel extends PureComponent<PanelProps, PanelState> {
     if (prevProps.componentPanel == null && componentPanel != null) {
       glEventHub.emit(PanelEvent.MOUNT, componentPanel);
     }
+
+    this.setState({
+      isWithinPanel:
+        this.ref.current?.parentElement?.closest('.iris-panel') != null,
+    });
   }
 
   componentWillUnmount(): void {
@@ -176,6 +185,8 @@ class Panel extends PureComponent<PanelProps, PanelState> {
     }
   }
 
+  ref: React.RefObject<HTMLDivElement>;
+
   handleTab(tab: Tab): void {
     if (tab != null) {
       this.setState({
@@ -335,21 +346,23 @@ class Panel extends PureComponent<PanelProps, PanelState> {
       isRenamable,
     } = this.props;
     const { tab: glTab } = glContainer;
-    const { showRenameDialog, title } = this.state;
+    const { showRenameDialog, title, isWithinPanel } = this.state;
 
     return (
       <div
         className={classNames('h-100 w-100 iris-panel', className)}
         onFocusCapture={this.handleFocus}
         onBlurCapture={this.handleBlur}
+        ref={this.ref}
       >
         {children}
         <LoadingOverlay
           errorMessage={errorMessage}
           isLoaded={isLoaded}
           isLoading={isLoading}
         />
-        {glTab != null &&
+        {!isWithinPanel &&
+          glTab != null &&
           ReactDOM.createPortal(
             <>
               <PanelContextMenu