Add support for Deephaven express multi plugin support

Author: mofojed

plugins/plotly-express/src/js/package.json

@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@deephaven/jsapi-types": "^1.0.0-dev0.39.5",
-    "@deephaven/test-utils": "0.105.0",
+    "@deephaven/test-utils": "^1.8.0",
     "@types/deep-equal": "^1.0.1",
     "@types/plotly.js": "^3.0.0",
     "@types/plotly.js-dist-min": "^2.3.1",
@@ -54,17 +54,17 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@deephaven/chart": "^1.2.0",
-    "@deephaven/components": "^1.2.0",
-    "@deephaven/dashboard": "^1.2.0",
-    "@deephaven/dashboard-core-plugins": "^1.2.0",
+    "@deephaven/chart": "^1.17.0",
+    "@deephaven/components": "^1.17.0",
+    "@deephaven/dashboard": "^1.17.1",
+    "@deephaven/dashboard-core-plugins": "^1.17.1",
     "@deephaven/icons": "^1.2.0",
-    "@deephaven/jsapi-bootstrap": "1.2.0",
-    "@deephaven/jsapi-utils": "1.1.1",
-    "@deephaven/log": "1.1.0",
-    "@deephaven/plugin": "^1.2.0",
-    "@deephaven/redux": "^1.2.0",
-    "@deephaven/utils": "^1.1.0",
+    "@deephaven/jsapi-bootstrap": "^1.17.0",
+    "@deephaven/jsapi-utils": "^1.16.0",
+    "@deephaven/log": "^1.8.0",
+    "@deephaven/plugin": "^1.17.1",
+    "@deephaven/redux": "^1.17.0",
+    "@deephaven/utils": "^1.10.0",
     "deep-equal": "^2.2.1",
     "memoizee": "^0.4.17",
     "nanoid": "^5.0.7",

plugins/plotly-express/src/js/src/DashboardPlugin.tsx

@@ -1,62 +1,13 @@
-import { useCallback, useEffect } from 'react';
-import { nanoid } from 'nanoid';
-import {
-  DashboardPluginComponentProps,
-  LayoutUtils,
-  PanelEvent,
-  useListener,
-} from '@deephaven/dashboard';
-import type { dh } from '@deephaven/jsapi-types';
+import { useEffect } from 'react';
+import { DashboardPluginComponentProps } from '@deephaven/dashboard';
 import PlotlyExpressChartPanel from './PlotlyExpressChartPanel.js';
-import type { PlotlyChartWidget } from './PlotlyExpressChartUtils.js';
 
 export function DashboardPlugin(
   props: DashboardPluginComponentProps
 ): JSX.Element | null {
-  const { id, layout, registerComponent } = props;
-
-  const handlePanelOpen = useCallback(
-    async ({
-      dragEvent,
-      fetch,
-      metadata = {},
-      panelId = nanoid(),
-      widget,
-    }: {
-      dragEvent?: MouseEvent;
-      fetch: () => Promise<PlotlyChartWidget>;
-      metadata?: Record<string, unknown>;
-      panelId?: string;
-      widget: dh.ide.VariableDescriptor;
-    }) => {
-      const { type, name } = widget;
-      if (type !== 'deephaven.plot.express.DeephavenFigure') {
-        return;
-      }
-
-      const config = {
-        type: 'react-component' as const,
-        component: 'PlotlyPanel',
-        props: {
-          localDashboardId: id,
-          id: panelId,
-          metadata: {
-            ...metadata,
-            ...widget,
-            figure: name,
-          },
-          fetch,
-        },
-        title: name ?? undefined,
-        id: panelId,
-      };
-
-      const { root } = layout;
-      LayoutUtils.openComponent({ root, config, dragEvent });
-    },
-    [id, layout]
-  );
+  const { registerComponent } = props;
 
+  // Register the PlotlyPanel for legacy panels created before the WidgetPlugin was being used.
   useEffect(
     function registerComponentsAndReturnCleanup() {
       const cleanups = [
@@ -69,8 +20,6 @@ export function DashboardPlugin(
     [registerComponent]
   );
 
-  useListener(layout.eventHub, PanelEvent.OPEN, handlePanelOpen);
-
   return null;
 }
 

plugins/plotly-express/src/js/src/index.ts

@@ -1,8 +1,22 @@
+import { PluginType } from '@deephaven/plugin';
 import { PlotlyExpressPlugin } from './PlotlyExpressPlugin.js';
+import { DashboardPlugin } from './DashboardPlugin.js';
 
 // Export legacy dashboard plugin as named export for backwards compatibility
 export * from './DashboardPlugin.js';
 export * from './PlotlyExpressChartModel.js';
 export * from './PlotlyExpressChartUtils.js';
 
-export default PlotlyExpressPlugin;
+const PlotlyExpressDashboardPlugin = {
+  name: '@deephaven/js-plugin-plotly-express.DashboardPlugin',
+  type: PluginType.DASHBOARD_PLUGIN,
+  component: DashboardPlugin,
+};
+
+const PlotlyExpressMultiPlugin = {
+  name: '@deephaven/js-plugin-plotly-express',
+  type: PluginType.MULTI_PLUGIN,
+  plugins: [PlotlyExpressPlugin, PlotlyExpressDashboardPlugin],
+};
+
+export default PlotlyExpressMultiPlugin;