-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: plotly-express Deephaven UI widget loading (#119)
Updates plotly-express to use the latest web-client-ui packages which allow for loading it properly via widget plugins after the ui.panel PR changes
- Loading branch information
1 parent
0f6bf62
commit 878aa91
Showing
9 changed files
with
1,063 additions
and
1,290 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import React, { useEffect, useRef, useState } from 'react'; | ||
| import Plotly from 'plotly.js-dist-min'; | ||
| import { Chart } from '@deephaven/chart'; | ||
| import { type WidgetComponentProps } from '@deephaven/plugin'; | ||
| import { useApi } from '@deephaven/jsapi-bootstrap'; | ||
| import PlotlyExpressChartModel from './PlotlyExpressChartModel.js'; | ||
| import { useHandleSceneTicks } from './useHandleSceneTicks.js'; | ||
|
|
||
| export function PlotlyExpressChart( | ||
| props: WidgetComponentProps | ||
| ): JSX.Element | null { | ||
| const dh = useApi(); | ||
| const { fetch } = props; | ||
| const containerRef = useRef<HTMLDivElement>(null); | ||
| const [model, setModel] = useState<PlotlyExpressChartModel>(); | ||
|
|
||
| useEffect(() => { | ||
| let cancelled = false; | ||
| async function init() { | ||
| const widgetData = await fetch(); | ||
| if (!cancelled) { | ||
| setModel(new PlotlyExpressChartModel(dh, widgetData, fetch)); | ||
| } | ||
| } | ||
|
|
||
| init(); | ||
|
|
||
| return () => { | ||
| cancelled = true; | ||
| }; | ||
| }, [dh, fetch]); | ||
|
|
||
| useHandleSceneTicks(model, containerRef.current); | ||
|
|
||
| return model ? ( | ||
| <Chart | ||
| // eslint-disable-next-line react/jsx-props-no-spreading, @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore | ||
| containerRef={containerRef} | ||
| model={model} | ||
| Plotly={Plotly} | ||
| /> | ||
| ) : null; | ||
| } | ||
|
|
||
| export default PlotlyExpressChart; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { type WidgetPlugin, PluginType } from '@deephaven/plugin'; | ||
| import { vsGraph } from '@deephaven/icons'; | ||
| import { PlotlyExpressChart } from './PlotlyExpressChart.js'; | ||
| import { PlotlyExpressChartPanel } from './PlotlyExpressChartPanel.js'; | ||
|
|
||
| export const PlotlyExpressPlugin: WidgetPlugin = { | ||
| name: '@deephaven/plotly-express', | ||
| type: PluginType.WIDGET_PLUGIN, | ||
| supportedTypes: 'deephaven.plot.express.DeephavenFigure', | ||
| component: PlotlyExpressChart, | ||
| panelComponent: PlotlyExpressChartPanel, | ||
| icon: vsGraph, | ||
| }; | ||
|
|
||
| export default PlotlyExpressPlugin; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,6 @@ | ||
| import { type WidgetPlugin, PluginType } from '@deephaven/plugin'; | ||
| import { vsGraph } from '@deephaven/icons'; | ||
| import PlotlyExpressChartPanel from './PlotlyExpressChartPanel.js'; | ||
| import { PlotlyExpressPlugin } from './PlotlyExpressPlugin.js'; | ||
|
|
||
| export * from './PlotlyExpressChartModel.js'; | ||
| export * from './PlotlyExpressChartUtils.js'; | ||
|
|
||
| const plugin: WidgetPlugin = { | ||
| name: '@deephaven/plotly-express', | ||
| type: PluginType.WIDGET_PLUGIN, | ||
| supportedTypes: 'deephaven.plot.express.DeephavenFigure', | ||
| component: PlotlyExpressChartPanel, | ||
| panelComponent: PlotlyExpressChartPanel, | ||
| icon: vsGraph, | ||
| }; | ||
|
|
||
| export default plugin; | ||
| export default PlotlyExpressPlugin; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { useEffect } from 'react'; | ||
| import PlotlyExpressChartModel from './PlotlyExpressChartModel.js'; | ||
|
|
||
| export function useHandleSceneTicks( | ||
| model: PlotlyExpressChartModel | undefined, | ||
| container: HTMLDivElement | null | ||
| ) { | ||
| useEffect(() => { | ||
| // Plotly scenes and geo views reset when our data ticks | ||
| // Pause rendering data updates when the user is manipulating a scene | ||
| if (!model || !container || !model.shouldPauseOnUserInteraction()) { | ||
| return; | ||
| } | ||
|
|
||
| function handleMouseDown() { | ||
| model?.pauseUpdates(); | ||
| // The once option removes the listener after it is called | ||
| window.addEventListener('mouseup', handleMouseUp, { once: true }); | ||
| } | ||
|
|
||
| function handleMouseUp() { | ||
| model?.resumeUpdates(); | ||
| } | ||
|
|
||
| let wheelTimeout = 0; | ||
|
|
||
| function handleWheel() { | ||
| model?.pauseUpdates(); | ||
| window.clearTimeout(wheelTimeout); | ||
| wheelTimeout = window.setTimeout(() => { | ||
| model?.resumeUpdates(); | ||
| }, 300); | ||
| } | ||
|
|
||
| container.addEventListener('mousedown', handleMouseDown); | ||
| container.addEventListener('wheel', handleWheel); | ||
|
|
||
| return () => { | ||
| window.clearTimeout(wheelTimeout); | ||
| window.removeEventListener('mouseup', handleMouseUp); | ||
| container.removeEventListener('mousedown', handleMouseDown); | ||
| container.removeEventListener('wheel', handleWheel); | ||
| }; | ||
| }, [model, container]); | ||
| } | ||
|
|
||
| export default useHandleSceneTicks; |