Deephaven express chart title not updating

mattrunyon · Mar 23, 2024 · a50ca4f · a50ca4f
1 parent 09c8eec
commit a50ca4f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/plugins/plotly-express/src/js/src/PlotlyExpressChart.tsx b/plugins/plotly-express/src/js/src/PlotlyExpressChart.tsx
@@ -14,13 +14,15 @@ export function PlotlyExpressChart(
   const { fetch } = props;
   const containerRef = useRef<HTMLDivElement>(null);
   const [model, setModel] = useState<PlotlyExpressChartModel>();
+  const [widgetRevision, setWidgetRevision] = useState(0); // Used to force a clean chart state on widget change
 
   useEffect(() => {
     let cancelled = false;
     async function init() {
       const widgetData = await fetch();
       if (!cancelled) {
         setModel(new PlotlyExpressChartModel(dh, widgetData, fetch));
+        setWidgetRevision(r => r + 1);
       }
     }
 
@@ -37,6 +39,7 @@ export function PlotlyExpressChart(
     <Chart
       // eslint-disable-next-line react/jsx-props-no-spreading, @typescript-eslint/ban-ts-comment
       // @ts-ignore
+      key={widgetRevision}
       containerRef={containerRef}
       model={model}
       Plotly={Plotly}

diff --git a/plugins/plotly-express/src/js/src/PlotlyExpressChartPanel.tsx b/plugins/plotly-express/src/js/src/PlotlyExpressChartPanel.tsx
@@ -12,11 +12,13 @@ export function PlotlyExpressChartPanel(props: WidgetPanelProps<Widget>) {
   const { fetch, metadata = {}, ...rest } = props;
   const containerRef = useRef<HTMLDivElement>(null);
   const [model, setModel] = useState<PlotlyExpressChartModel>();
+  const [widgetRevision, setWidgetRevision] = useState(0); // Used to force a clean chart state on widget change
 
   const makeModel = useCallback(async () => {
     const widgetData = await fetch();
     const m = new PlotlyExpressChartModel(dh, widgetData, fetch);
     setModel(m);
+    setWidgetRevision(r => r + 1);
     return m;
   }, [dh, fetch]);
 
@@ -26,6 +28,7 @@ export function PlotlyExpressChartPanel(props: WidgetPanelProps<Widget>) {
     <ChartPanel
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...(rest as ChartPanelProps)}
+      key={widgetRevision}
       containerRef={containerRef}
       makeModel={makeModel}
       Plotly={Plotly}