fix: Changes for Deephaven UI embedding widget plugins (#1644)

mattrunyon · web-flow · commit b6eeb309e8e5 · 2023-11-20T11:08:05.000-06:00
These changes are needed so Deephaven UI can embed widget plugins. This
also creates a difference between the widget component and the widget
panel component.

Tested the panels still function as intended for grid, chart, and
dataframe.
diff --git a/packages/chart/src/Chart.tsx b/packages/chart/src/Chart.tsx
@@ -49,6 +49,7 @@ interface ChartProps {
   settings: FormatterSettings;
   isActive: boolean;
   Plotly: typeof Plotly;
+  containerRef?: React.RefObject<HTMLDivElement>;
   onDisconnect: () => void;
   onReconnect: () => void;
   onUpdate: (obj: { isLoading: boolean }) => void;
@@ -145,7 +146,7 @@ export class Chart extends Component<ChartProps, ChartState> {
 
     this.PlotComponent = createPlotlyComponent(props.Plotly);
     this.plot = React.createRef();
-    this.plotWrapper = React.createRef();
+    this.plotWrapper = props.containerRef ?? React.createRef();
     this.columnFormats = [];
     this.dateTimeFormatterOptions = {};
     this.decimalFormatOptions = {};
diff --git a/packages/dashboard-core-plugins/src/ChartPanelPlugin.tsx b/packages/dashboard-core-plugins/src/ChartPanelPlugin.tsx
@@ -14,7 +14,7 @@ import type {
 } from '@deephaven/jsapi-types';
 import { IrisGridUtils } from '@deephaven/iris-grid';
 import { getTimeZone, store } from '@deephaven/redux';
-import { type WidgetComponentProps } from '@deephaven/plugin';
+import { WidgetPanelProps } from '@deephaven/plugin';
 import {
   ChartPanelMetadata,
   GLChartPanelState,
@@ -113,8 +113,8 @@ async function createChartModel(
   );
 }
 
-export const ChartPlugin = forwardRef(
-  (props: WidgetComponentProps, ref: React.Ref<ChartPanel>) => {
+export const ChartPanelPlugin = forwardRef(
+  (props: WidgetPanelProps, ref: React.Ref<ChartPanel>) => {
     const dh = useApi();
     const chartTheme = useChartTheme();
     const connection = useConnection();
@@ -160,6 +160,6 @@ export const ChartPlugin = forwardRef(
   }
 );
 
-ChartPlugin.displayName = 'ChartPlugin';
+ChartPanelPlugin.displayName = 'ChartPanelPlugin';
 
-export default ChartPlugin;
+export default ChartPanelPlugin;
diff --git a/packages/dashboard-core-plugins/src/ChartPluginConfig.ts b/packages/dashboard-core-plugins/src/ChartPluginConfig.ts
@@ -1,13 +1,14 @@
 import { PluginType, type WidgetPlugin } from '@deephaven/plugin';
 import { vsGraph } from '@deephaven/icons';
-import ChartPlugin from './ChartPlugin';
+import { ChartWidgetPlugin } from './ChartWidgetPlugin';
+import { ChartPanelPlugin } from './ChartPanelPlugin';
 
 const ChartPluginConfig: WidgetPlugin = {
   name: 'ChartPanel',
   title: 'Chart',
   type: PluginType.WIDGET_PLUGIN,
-  component: ChartPlugin,
-  panelComponent: ChartPlugin,
+  component: ChartWidgetPlugin,
+  panelComponent: ChartPanelPlugin,
   supportedTypes: 'Figure',
   icon: vsGraph,
 };
diff --git a/packages/dashboard-core-plugins/src/ChartWidgetPlugin.tsx b/packages/dashboard-core-plugins/src/ChartWidgetPlugin.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import { useApi } from '@deephaven/jsapi-bootstrap';
+import {
+  Chart,
+  ChartModel,
+  ChartModelFactory,
+  useChartTheme,
+} from '@deephaven/chart';
+import type { Figure } from '@deephaven/jsapi-types';
+import { type WidgetComponentProps } from '@deephaven/plugin';
+
+export function ChartWidgetPlugin(
+  props: WidgetComponentProps
+): JSX.Element | null {
+  const dh = useApi();
+  const chartTheme = useChartTheme();
+  const [model, setModel] = useState<ChartModel>();
+
+  const { fetch } = props;
+
+  useEffect(() => {
+    let cancelled = false;
+    async function init() {
+      const figure = (await fetch()) as unknown as Figure;
+      const newModel = await ChartModelFactory.makeModel(
+        dh,
+        undefined,
+        figure,
+        chartTheme
+      );
+
+      if (!cancelled) {
+        setModel(newModel);
+      }
+    }
+
+    init();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [dh, fetch, chartTheme]);
+
+  return model ? <Chart model={model} /> : null;
+}
+
+export default ChartWidgetPlugin;
diff --git a/packages/dashboard-core-plugins/src/GridPanelPlugin.tsx b/packages/dashboard-core-plugins/src/GridPanelPlugin.tsx
@@ -1,13 +1,13 @@
 import { forwardRef } from 'react';
-import { type WidgetComponentProps } from '@deephaven/plugin';
+import { WidgetPanelProps } from '@deephaven/plugin';
 import { type Table } from '@deephaven/jsapi-types';
 import useHydrateGrid from './useHydrateGrid';
 import ConnectedIrisGridPanel, {
   type IrisGridPanel,
 } from './panels/IrisGridPanel';
 
-export const GridPlugin = forwardRef(
-  (props: WidgetComponentProps, ref: React.Ref<IrisGridPanel>) => {
+export const GridPanelPlugin = forwardRef(
+  (props: WidgetPanelProps, ref: React.Ref<IrisGridPanel>) => {
     const { localDashboardId, fetch } = props;
     const hydratedProps = useHydrateGrid(
       fetch as unknown as () => Promise<Table>,
@@ -19,6 +19,6 @@ export const GridPlugin = forwardRef(
   }
 );
 
-GridPlugin.displayName = 'GridPlugin';
+GridPanelPlugin.displayName = 'GridPanelPlugin';
 
-export default GridPlugin;
+export default GridPanelPlugin;
diff --git a/packages/dashboard-core-plugins/src/GridPluginConfig.ts b/packages/dashboard-core-plugins/src/GridPluginConfig.ts
@@ -1,13 +1,14 @@
 import { PluginType, type WidgetPlugin } from '@deephaven/plugin';
 import { dhTable } from '@deephaven/icons';
-import GridPlugin from './GridPlugin';
+import { GridWidgetPlugin } from './GridWidgetPlugin';
+import { GridPanelPlugin } from './GridPanelPlugin';
 
 const GridPluginConfig: WidgetPlugin = {
   name: 'IrisGridPanel',
   title: 'Table',
   type: PluginType.WIDGET_PLUGIN,
-  component: GridPlugin,
-  panelComponent: GridPlugin,
+  component: GridWidgetPlugin,
+  panelComponent: GridPanelPlugin,
   supportedTypes: ['Table', 'TreeTable', 'HierarchicalTable'],
   icon: dhTable,
 };
diff --git a/packages/dashboard-core-plugins/src/GridWidgetPlugin.tsx b/packages/dashboard-core-plugins/src/GridWidgetPlugin.tsx
@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+import { type WidgetComponentProps } from '@deephaven/plugin';
+import { type Table } from '@deephaven/jsapi-types';
+import { useApi } from '@deephaven/jsapi-bootstrap';
+import {
+  IrisGrid,
+  IrisGridModelFactory,
+  type IrisGridModel,
+} from '@deephaven/iris-grid';
+
+export function GridWidgetPlugin(
+  props: WidgetComponentProps
+): JSX.Element | null {
+  const dh = useApi();
+  const [model, setModel] = useState<IrisGridModel>();
+
+  const { fetch } = props;
+
+  useEffect(() => {
+    let cancelled = false;
+    async function init() {
+      const table = (await fetch()) as unknown as Table;
+      const newModel = await IrisGridModelFactory.makeModel(dh, table);
+      if (!cancelled) {
+        setModel(newModel);
+      }
+    }
+
+    init();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [dh, fetch]);
+
+  return model ? <IrisGrid model={model} /> : null;
+}
+
+export default GridWidgetPlugin;
diff --git a/packages/dashboard-core-plugins/src/PandasPanelPlugin.tsx b/packages/dashboard-core-plugins/src/PandasPanelPlugin.tsx
@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+import { WidgetPanelProps } from '@deephaven/plugin';
+import { type Table } from '@deephaven/jsapi-types';
+import { PandasPanel } from './panels';
+import useHydrateGrid from './useHydrateGrid';
+
+export const PandasPanelPlugin = forwardRef(
+  (props: WidgetPanelProps, ref: React.Ref<PandasPanel>) => {
+    const { localDashboardId, fetch } = props;
+    const hydratedProps = useHydrateGrid(
+      fetch as unknown as () => Promise<Table>,
+      localDashboardId
+    );
+
+    return (
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      <PandasPanel ref={ref} {...props} {...hydratedProps} />
+    );
+  }
+);
+
+PandasPanelPlugin.displayName = 'PandasPanelPlugin';
+
+export default PandasPanelPlugin;
diff --git a/packages/dashboard-core-plugins/src/PandasPlugin.tsx b/packages/dashboard-core-plugins/src/PandasPlugin.tsx
diff --git a/packages/dashboard-core-plugins/src/PandasPluginConfig.ts b/packages/dashboard-core-plugins/src/PandasPluginConfig.ts
@@ -1,14 +1,14 @@
 import { PluginType, WidgetPlugin } from '@deephaven/plugin';
 import { dhPandas } from '@deephaven/icons';
-import PandasPlugin from './PandasPlugin';
+import { PandasWidgetPlugin } from './PandasWidgetPlugin';
+import { PandasPanelPlugin } from './PandasPanelPlugin';
 
 const PandasPluginConfig: WidgetPlugin = {
   name: 'PandasPanel',
   title: 'Pandas',
   type: PluginType.WIDGET_PLUGIN,
-  // TODO: #1573 Replace with actual base component and not just the panel plugin
-  component: PandasPlugin,
-  panelComponent: PandasPlugin,
+  component: PandasWidgetPlugin,
+  panelComponent: PandasPanelPlugin,
   supportedTypes: 'pandas.DataFrame',
   icon: dhPandas,
 };
diff --git a/packages/dashboard-core-plugins/src/PandasWidgetPlugin.tsx b/packages/dashboard-core-plugins/src/PandasWidgetPlugin.tsx
@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useState } from 'react';
+import { WidgetComponentProps } from '@deephaven/plugin';
+import { type Table } from '@deephaven/jsapi-types';
+import IrisGrid, {
+  IrisGridModelFactory,
+  type IrisGridModel,
+} from '@deephaven/iris-grid';
+import { useApi } from '@deephaven/jsapi-bootstrap';
+import { LoadingOverlay } from '@deephaven/components';
+import { PandasReloadButton } from './panels/PandasReloadButton';
+
+export function PandasWidgetPlugin(
+  props: WidgetComponentProps
+): JSX.Element | null {
+  const dh = useApi();
+  const [model, setModel] = useState<IrisGridModel>();
+  const [isLoading, setIsLoading] = useState(true);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const { fetch } = props;
+
+  const makeModel = useCallback(async () => {
+    const table = (await fetch()) as unknown as Table;
+    return IrisGridModelFactory.makeModel(dh, table);
+  }, [dh, fetch]);
+
+  const handleReload = useCallback(async () => {
+    setIsLoading(true);
+    const newModel = await makeModel();
+    setModel(newModel);
+    setIsLoading(false);
+  }, [makeModel]);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function init() {
+      const newModel = await makeModel();
+      if (!cancelled) {
+        setModel(newModel);
+        setIsLoaded(true);
+        setIsLoading(false);
+      }
+    }
+
+    init();
+    setIsLoading(true);
+
+    return () => {
+      cancelled = true;
+    };
+  }, [makeModel]);
+
+  return (
+    <>
+      <LoadingOverlay isLoaded={isLoaded} isLoading={isLoading} />
+      {model && (
+        <IrisGrid model={model}>
+          <PandasReloadButton onClick={handleReload} />
+        </IrisGrid>
+      )}
+    </>
+  );
+}
+
+export default PandasWidgetPlugin;
diff --git a/packages/dashboard-core-plugins/src/index.ts b/packages/dashboard-core-plugins/src/index.ts
@@ -1,17 +1,20 @@
-export { default as ChartPlugin } from './ChartPlugin';
+export { default as ChartPanelPlugin } from './ChartPanelPlugin';
+export { default as ChartWidgetPlugin } from './ChartWidgetPlugin';
 export { default as ChartPluginConfig } from './ChartPluginConfig';
 export { default as ChartBuilderPlugin } from './ChartBuilderPlugin';
 export { default as ChartBuilderPluginConfig } from './ChartBuilderPluginConfig';
 export { default as ConsolePlugin } from './ConsolePlugin';
 export { default as FilterPlugin } from './FilterPlugin';
 export { default as FilterPluginConfig } from './FilterPluginConfig';
-export { default as GridPlugin } from './GridPlugin';
+export { default as GridPanelPlugin } from './GridPanelPlugin';
+export { default as GridWidgetPlugin } from './GridWidgetPlugin';
 export { default as GridPluginConfig } from './GridPluginConfig';
 export { default as LinkerPlugin } from './LinkerPlugin';
 export { default as LinkerPluginConfig } from './LinkerPluginConfig';
 export { default as MarkdownPlugin } from './MarkdownPlugin';
 export { default as MarkdownPluginConfig } from './MarkdownPluginConfig';
-export { default as PandasPlugin } from './PandasPlugin';
+export { default as PandasPanelPlugin } from './PandasPanelPlugin';
+export { default as PandasWidgetPlugin } from './PandasWidgetPlugin';
 export { default as PandasPluginConfig } from './PandasPluginConfig';
 export { default as WidgetLoaderPlugin } from './WidgetLoaderPlugin';
 export { default as WidgetLoaderPluginConfig } from './WidgetLoaderPluginConfig';
diff --git a/packages/dashboard-core-plugins/src/panels/ChartPanel.tsx b/packages/dashboard-core-plugins/src/panels/ChartPanel.tsx
@@ -128,7 +128,7 @@ interface OwnProps extends DashboardPanelProps {
   makeModel: () => Promise<ChartModel>;
   localDashboardId: string;
   Plotly?: typeof PlotlyType;
-  /** The panel container div */
+  /** The plot container div */
   containerRef?: RefObject<HTMLDivElement>;
 
   panelState?: GLChartPanelState;
@@ -236,7 +236,7 @@ export class ChartPanel extends Component<ChartPanelProps, ChartPanelState> {
     );
     this.handleClearAllFilters = this.handleClearAllFilters.bind(this);
 
-    this.panelContainer = props.containerRef ?? React.createRef();
+    this.panelContainer = React.createRef();
     this.pending = new Pending();
 
     const { metadata, panelState } = props;
@@ -1035,6 +1035,7 @@ export class ChartPanel extends Component<ChartPanelProps, ChartPanelState> {
       metadata,
       settings,
       Plotly,
+      containerRef,
     } = this.props;
     const {
       columnMap,
@@ -1117,6 +1118,7 @@ export class ChartPanel extends Component<ChartPanelProps, ChartPanelState> {
                 onError={this.handleError}
                 onSettingsChanged={this.handleSettingsChanged}
                 Plotly={Plotly}
+                containerRef={containerRef}
               />
             )}
           </div>
diff --git a/packages/dashboard-core-plugins/src/panels/PandasPanel.tsx b/packages/dashboard-core-plugins/src/panels/PandasPanel.tsx
diff --git a/packages/dashboard-core-plugins/src/panels/PandasReloadButton.tsx b/packages/dashboard-core-plugins/src/panels/PandasReloadButton.tsx
diff --git a/packages/plugin/src/PluginTypes.ts b/packages/plugin/src/PluginTypes.ts
