Export plotly-express as a dashboard plugin

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

@@ -0,0 +1,78 @@
+import { useCallback, DragEvent, useEffect } from 'react';
+import shortid from 'shortid';
+import {
+  DashboardPluginComponentProps,
+  LayoutUtils,
+  PanelEvent,
+  useListener,
+} from '@deephaven/dashboard';
+import type { VariableDefinition } from '@deephaven/jsapi-types';
+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 = shortid.generate(),
+      widget,
+    }: {
+      dragEvent?: DragEvent;
+      fetch: () => Promise<PlotlyChartWidget>;
+      metadata?: Record<string, unknown>;
+      panelId?: string;
+      widget: VariableDefinition;
+    }) => {
+      const { type, title } = widget;
+      if (type !== 'deephaven.plot.express.DeephavenFigure') {
+        return;
+      }
+
+      const config = {
+        type: 'react-component' as const,
+        component: 'PlotlyPanel',
+        props: {
+          localDashboardId: id,
+          id: panelId,
+          metadata: {
+            ...metadata,
+            name: title,
+            figure: title,
+            type,
+          },
+          fetch,
+        },
+        title,
+        id: panelId,
+      };
+
+      const { root } = layout;
+      LayoutUtils.openComponent({ root, config, dragEvent });
+    },
+    [id, layout]
+  );
+
+  useEffect(
+    function registerComponentsAndReturnCleanup() {
+      const cleanups = [
+        registerComponent('PlotlyPanel', PlotlyExpressChartPanel),
+      ];
+      return () => {
+        cleanups.forEach(cleanup => cleanup());
+      };
+    },
+    [registerComponent]
+  );
+
+  useListener(layout.eventHub, PanelEvent.OPEN, handlePanelOpen);
+
+  return null;
+}
+
+export default DashboardPlugin;

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

@@ -1,5 +1,14 @@
 import type { Data, PlotlyDataLayoutConfig } from 'plotly.js';
-import type { Widget } from '@deephaven/jsapi-types';
+import type { Table, Widget } from '@deephaven/jsapi-types';
+
+export interface PlotlyChartWidget {
+  getDataAsBase64(): string;
+  exportedObjects: { fetch(): Promise<Table> }[];
+  addEventListener(
+    type: string,
+    fn: (event: CustomEvent<PlotlyChartWidget>) => () => void
+  ): void;
+}
 
 export interface PlotlyChartWidgetData {
   type: string;

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

@@ -1,6 +1,3 @@
-import { PlotlyExpressPlugin } from './PlotlyExpressPlugin.js';
-
+export * from './DashboardPlugin.js';
 export * from './PlotlyExpressChartModel.js';
 export * from './PlotlyExpressChartUtils.js';
-
-export default PlotlyExpressPlugin;