From f1c1cdd34d4df4e9bd4ff7d1e2192992e15f00bb Mon Sep 17 00:00:00 2001 From: Vlad Babich Date: Wed, 28 Feb 2024 10:22:51 -0700 Subject: [PATCH 1/3] Export plotly-express as a dashboard plugin --- .../src/js/src/DashboardPlugin.tsx | 78 +++++++++++++++++++ .../src/js/src/PlotlyExpressChartUtils.ts | 11 ++- plugins/plotly-express/src/js/src/index.ts | 5 +- 3 files changed, 89 insertions(+), 5 deletions(-) create mode 100644 plugins/plotly-express/src/js/src/DashboardPlugin.tsx diff --git a/plugins/plotly-express/src/js/src/DashboardPlugin.tsx b/plugins/plotly-express/src/js/src/DashboardPlugin.tsx new file mode 100644 index 000000000..b60676e78 --- /dev/null +++ b/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; + metadata?: Record; + 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; diff --git a/plugins/plotly-express/src/js/src/PlotlyExpressChartUtils.ts b/plugins/plotly-express/src/js/src/PlotlyExpressChartUtils.ts index c2b193f98..c91c66f82 100644 --- a/plugins/plotly-express/src/js/src/PlotlyExpressChartUtils.ts +++ b/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 }[]; + addEventListener( + type: string, + fn: (event: CustomEvent) => () => void + ): void; +} export interface PlotlyChartWidgetData { type: string; diff --git a/plugins/plotly-express/src/js/src/index.ts b/plugins/plotly-express/src/js/src/index.ts index 9d83e0884..80db0344d 100644 --- a/plugins/plotly-express/src/js/src/index.ts +++ b/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; From e8ed513bddd3c0efaae019d677f9cd66d5229903 Mon Sep 17 00:00:00 2001 From: Vlad Babich Date: Thu, 29 Feb 2024 14:21:15 -0700 Subject: [PATCH 2/3] Fix widget arg type in the event handler, export DashboardPlugin as a named export next to the default WidgetPlugin --- .../plotly-express/src/js/src/DashboardPlugin.tsx | 12 ++++++------ plugins/plotly-express/src/js/src/index.ts | 5 +++++ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/plugins/plotly-express/src/js/src/DashboardPlugin.tsx b/plugins/plotly-express/src/js/src/DashboardPlugin.tsx index b60676e78..e0db8db6b 100644 --- a/plugins/plotly-express/src/js/src/DashboardPlugin.tsx +++ b/plugins/plotly-express/src/js/src/DashboardPlugin.tsx @@ -6,7 +6,7 @@ import { PanelEvent, useListener, } from '@deephaven/dashboard'; -import type { VariableDefinition } from '@deephaven/jsapi-types'; +import type { VariableDescriptor } from '@deephaven/jsapi-types'; import PlotlyExpressChartPanel from './PlotlyExpressChartPanel.js'; import type { PlotlyChartWidget } from './PlotlyExpressChartUtils.js'; @@ -27,9 +27,9 @@ export function DashboardPlugin( fetch: () => Promise; metadata?: Record; panelId?: string; - widget: VariableDefinition; + widget: VariableDescriptor; }) => { - const { type, title } = widget; + const { type, name } = widget; if (type !== 'deephaven.plot.express.DeephavenFigure') { return; } @@ -42,13 +42,13 @@ export function DashboardPlugin( id: panelId, metadata: { ...metadata, - name: title, - figure: title, + name, + figure: name, type, }, fetch, }, - title, + title: name, id: panelId, }; diff --git a/plugins/plotly-express/src/js/src/index.ts b/plugins/plotly-express/src/js/src/index.ts index 80db0344d..312a2bc95 100644 --- a/plugins/plotly-express/src/js/src/index.ts +++ b/plugins/plotly-express/src/js/src/index.ts @@ -1,3 +1,8 @@ +import { PlotlyExpressPlugin } from './PlotlyExpressPlugin.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; From 0bc671528c361725e1528ead4dbca8c135f82630 Mon Sep 17 00:00:00 2001 From: Vlad Babich Date: Mon, 4 Mar 2024 12:16:56 -0700 Subject: [PATCH 3/3] Spread widget --- plugins/plotly-express/src/js/src/DashboardPlugin.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/plugins/plotly-express/src/js/src/DashboardPlugin.tsx b/plugins/plotly-express/src/js/src/DashboardPlugin.tsx index e0db8db6b..53b335620 100644 --- a/plugins/plotly-express/src/js/src/DashboardPlugin.tsx +++ b/plugins/plotly-express/src/js/src/DashboardPlugin.tsx @@ -42,9 +42,8 @@ export function DashboardPlugin( id: panelId, metadata: { ...metadata, - name, + ...widget, figure: name, - type, }, fetch, },