Framework - preserve plot state

frontend/src/modules/DistributionPlot/view.tsx

@@ -13,10 +13,10 @@ import { ColorScaleGradientType } from "@lib/utils/ColorScale";
 import type { Size2D } from "@lib/utils/geometry";
 import { ContentInfo } from "@modules/_shared/components/ContentMessage";
 import { ContentWarning } from "@modules/_shared/components/ContentMessage/contentMessage";
+import { Plot } from "@modules/_shared/components/Plot";
 import { makeSubplots } from "@modules/_shared/Figure";
 import { makeHistogramTrace } from "@modules/_shared/histogram";
 
-
 import type { Interfaces } from "./interfaces";
 import { PlotType } from "./typesAndEnums";
 import { makeHoverText, makeHoverTextWithColor, makeTitleFromChannelContent } from "./utils/stringUtils";
@@ -207,7 +207,7 @@ export const View = ({ viewContext, workbenchSettings }: ModuleViewProps<Interfa
                         cellIndex++;
                     }
                 }
-                setContent(figure.makePlot());
+                setContent(<Plot data={figure.makeData()} layout={figure.makeLayout()} />);
                 return;
             }
 
@@ -279,7 +279,7 @@ export const View = ({ viewContext, workbenchSettings }: ModuleViewProps<Interfa
                     }
                 }
 
-                setContent(figure.makePlot());
+                setContent(<Plot data={figure.makeData()} layout={figure.makeLayout()} />);
                 return;
             }
 
@@ -435,7 +435,7 @@ export const View = ({ viewContext, workbenchSettings }: ModuleViewProps<Interfa
                     autosize: true,
                 };
                 figure.updateLayout(patch);
-                setContent(figure.makePlot());
+                setContent(<Plot data={figure.makeData()} layout={figure.makeLayout()} />);
                 return;
             }
         });

frontend/src/modules/MyModule/view.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 
 import type { PlotData } from "plotly.js";
-import Plot from "react-plotly.js";
 
 import type { ModuleViewProps } from "@framework/Module";
 import { useElementSize } from "@lib/hooks/useElementSize";
 import { ColorScaleType } from "@lib/utils/ColorScale";
-
+import { Plot } from "@modules/_shared/components/Plot";
 
 import type { Interfaces } from "./interfaces";
 

frontend/src/modules/ParameterCorrelationPlot/view/parameterCorrelationFigure.ts

@@ -64,8 +64,12 @@ export class ParameterCorrelationFigure {
         });
     }
 
-    build(handleOnClick?: ((event: Readonly<Plotly.PlotMouseEvent>) => void) | undefined): React.ReactNode {
-        return this._figure.makePlot({ onClick: handleOnClick });
+    buildData() {
+        return this._figure.makeData();
+    }
+
+    buildLayout() {
+        return this._figure.makeLayout();
     }
 }
 

frontend/src/modules/ParameterCorrelationPlot/view/view.tsx

@@ -15,6 +15,7 @@ import { useElementSize } from "@lib/hooks/useElementSize";
 import type { Size2D } from "@lib/utils/geometry";
 import { ContentInfo } from "@modules/_shared/components/ContentMessage";
 import { ContentWarning } from "@modules/_shared/components/ContentMessage/contentMessage";
+import { Plot } from "@modules/_shared/components/Plot";
 import type { ResponseData } from "@modules/_shared/rankParameter";
 import { createRankedParameterCorrelations } from "@modules/_shared/rankParameter";
 
@@ -46,7 +47,10 @@ export function View({ viewContext, workbenchSession, workbenchServices }: Modul
     const [prevParameterIdentString, setPrevParameterIdentString] = React.useState<string | null>(null);
 
     const syncedSettingKeys = viewContext.useSyncedSettingKeys();
-    const syncHelper = new SyncSettingsHelper(syncedSettingKeys, workbenchServices);
+    const syncHelper = React.useMemo(
+        () => new SyncSettingsHelper(syncedSettingKeys, workbenchServices),
+        [syncedSettingKeys, workbenchServices],
+    );
     const globalSyncedParameter = syncHelper.useValue(SyncSettingKey.PARAMETER, "global.syncValue.parameter");
 
     // Receive global string and update local state if different
@@ -59,15 +63,18 @@ export function View({ viewContext, workbenchSession, workbenchServices }: Modul
         [globalSyncedParameter, localParameterString],
     );
 
-    function handleClickInChart(e: PlotMouseEvent) {
-        const clickedPoint: PlotDatum = e.points[0];
-        if (!clickedPoint) {
-            return;
-        }
-        const newParameterString = clickedPoint.customdata as string;
-        syncHelper.publishValue(SyncSettingKey.PARAMETER, "global.syncValue.parameter", newParameterString);
-        setLocalParameterString(newParameterString);
-    }
+    const handleClickInChart = React.useCallback(
+        function handleClickInChart(e: PlotMouseEvent) {
+            const clickedPoint: PlotDatum = e.points[0];
+            if (!clickedPoint) {
+                return;
+            }
+            const newParameterString = clickedPoint.customdata as string;
+            syncHelper.publishValue(SyncSettingKey.PARAMETER, "global.syncValue.parameter", newParameterString);
+            setLocalParameterString(newParameterString);
+        },
+        [syncHelper],
+    );
 
     const numParams = viewContext.useSettingsToViewInterfaceValue("numParams");
     const corrCutOff = viewContext.useSettingsToViewInterfaceValue("corrCutOff");
@@ -189,7 +196,8 @@ export function View({ viewContext, workbenchSession, workbenchServices }: Modul
                     cellIndex++;
                 }
             }
-            setContent(figure.build(handleClickInChart));
+
+            setContent(<Plot data={figure.buildData()} layout={figure.buildLayout()} onClick={handleClickInChart} />);
             return;
         });
     }

frontend/src/modules/ParameterDistributionMatrix/view/components/ParameterDistributionPlot.tsx

@@ -1,11 +1,10 @@
 import type React from "react";
 
 import type { PlotType } from "plotly.js";
-import Plot from "react-plotly.js";
 
+import { Plot } from "@modules/_shared/components/Plot";
 import { computeQuantile } from "@modules/_shared/utils/math/statistics";
 
-
 import type { ParameterDataArr } from "../../typesAndEnums";
 import { ParameterDistributionPlotType } from "../../typesAndEnums";
 

frontend/src/modules/ParameterResponseCrossPlot/view/scatterPlotParameterResponseFigure.ts

@@ -66,8 +66,12 @@ export class ScatterPlotParameterResponseFigure {
         };
         this._figure.updateLayout(layoutPatch);
     }
-    build() {
-        return this._figure.makePlot();
+
+    buildData() {
+        return this._figure.makeData();
+    }
+    buildLayout() {
+        return this._figure.makeLayout();
     }
 }
 export type scatterPlotParameterResponseData = {

frontend/src/modules/ParameterResponseCrossPlot/view/view.tsx

@@ -13,6 +13,7 @@ import { useElementSize } from "@lib/hooks/useElementSize";
 import type { Size2D } from "@lib/utils/geometry";
 import { ContentInfo } from "@modules/_shared/components/ContentMessage";
 import { ContentWarning } from "@modules/_shared/components/ContentMessage/contentMessage";
+import { Plot } from "@modules/_shared/components/Plot";
 
 import type { Interfaces } from "../interfaces";
 import { PlotType } from "../typesAndEnums";
@@ -184,7 +185,7 @@ export function View({ viewContext, workbenchSession }: ModuleViewProps<Interfac
                 }
             }
 
-            setContent(figure.build());
+            setContent(<Plot data={figure.buildData()} layout={figure.buildLayout()} />);
             return;
         }
     }

frontend/src/modules/ParameterResponseParallelCoordsPlot/view/parallelCoordinatesFigure.ts

@@ -54,8 +54,11 @@ export class ParallelCoordinatesFigure {
         this._figure.updateLayout({ width: width });
     }
 
-    build() {
-        return this._figure.makePlot();
+    buildLayout() {
+        return this._figure.makeLayout();
+    }
+    buildData() {
+        return this._figure.makeData();
     }
 }
 

frontend/src/modules/ParameterResponseParallelCoordsPlot/view/view.tsx

@@ -13,6 +13,7 @@ import { useElementSize } from "@lib/hooks/useElementSize";
 import type { Size2D } from "@lib/utils/geometry";
 import { ContentInfo } from "@modules/_shared/components/ContentMessage";
 import { ContentWarning } from "@modules/_shared/components/ContentMessage/contentMessage";
+import { Plot } from "@modules/_shared/components/Plot";
 import type { ResponseData } from "@modules/_shared/rankParameter";
 import { createRankedParameterCorrelations, getRankedParameterData } from "@modules/_shared/rankParameter";
 
@@ -140,7 +141,7 @@ export function View({ viewContext, workbenchSession }: ModuleViewProps<Interfac
             const figure = new ParallelCoordinatesFigure(wrapperDivSize);
             figure.addPlot(responseData, rankedParametersData, {});
 
-            setContent(figure.build());
+            setContent(<Plot data={figure.buildData()} layout={figure.buildLayout()} />);
             return;
         });
     }

frontend/src/modules/Pvt/utils/PvtPlotBuilder.ts

@@ -7,7 +7,6 @@ import type { Size2D } from "@lib/utils/geometry";
 import type { Figure } from "@modules/_shared/Figure";
 import { makeSubplots } from "@modules/_shared/Figure";
 
-
 import {
     ColorBy,
     PRESSURE_DEPENDENT_VARIABLE_TO_DISPLAY_NAME,
@@ -17,7 +16,6 @@ import {
 
 import type { PvtDataAccessor } from "./PvtDataAccessor";
 
-
 type TracePointData = {
     ratio: number;
     pressure: number;
@@ -287,9 +285,12 @@ export class PvtPlotBuilder {
         }
     }
 
-    makePlot(): React.ReactNode {
-        const figure = this.getFigureAndAssertValidity();
-        return figure.makePlot();
+    buildData() {
+        return this.getFigureAndAssertValidity().makeData();
+    }
+
+    buildLayout() {
+        return this.getFigureAndAssertValidity().makeLayout();
     }
 
     private makeHoverTemplate(

frontend/src/modules/Pvt/view.tsx

@@ -9,6 +9,7 @@ import { useEnsembleSet } from "@framework/WorkbenchSession";
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { useElementSize } from "@lib/hooks/useElementSize";
 import { ContentMessage, ContentMessageType } from "@modules/_shared/components/ContentMessage/contentMessage";
+import { Plot } from "@modules/_shared/components/Plot";
 import { makeDistinguishableEnsembleDisplayName } from "@modules/_shared/ensembleNameUtils";
 
 import type { Interfaces } from "./interfaces";
@@ -88,7 +89,7 @@ export function View({ viewContext, workbenchSettings, workbenchSession }: Modul
         pvtPlotBuilder.makeLayout(selectedPhase, selectedPlots, wrapperDivSize);
         pvtPlotBuilder.makeTraces(selectedPlots, selectedPvtNums, selectedPhase, selectedColorBy, colorSet);
 
-        return pvtPlotBuilder.makePlot();
+        return <Plot layout={pvtPlotBuilder.buildLayout()} data={pvtPlotBuilder.buildData()} />;
     }
 
     return (

frontend/src/modules/Rft/view.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import type { PlotData } from "plotly.js";
-import Plot from "react-plotly.js";
 
 import type { RftRealizationData_api } from "@api";
 import type { ModuleViewProps } from "@framework/Module";
@@ -10,9 +9,9 @@ import { timestampUtcMsToCompactIsoString } from "@framework/utils/timestampUtil
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { useElementSize } from "@lib/hooks/useElementSize";
 import { ContentMessage, ContentMessageType } from "@modules/_shared/components/ContentMessage/contentMessage";
+import { Plot } from "@modules/_shared/components/Plot";
 import { usePropagateApiErrorToStatusWriter } from "@modules/_shared/hooks/usePropagateApiErrorToStatusWriter";
 
-
 import type { Interfaces } from "./interfaces";
 
 export const View = ({ viewContext }: ModuleViewProps<Interfaces>) => {

frontend/src/modules/SimulationTimeSeries/view/hooks/useMakeViewStatusWriterMessages.ts

@@ -7,7 +7,7 @@ import type { RegularEnsemble } from "@framework/RegularEnsemble";
 import type { ViewStatusWriter } from "@framework/StatusWriter";
 import type { Interfaces } from "@modules/SimulationTimeSeries/interfaces";
 
-
+import { showObservationsAtom } from "../atoms/baseAtoms";
 import {
     historicalDataQueryHasErrorAtom,
     queryIsFetchingAtom,
@@ -23,7 +23,8 @@ export function useMakeViewStatusWriterMessages(
     ensemblesWithoutParameter: (RegularEnsemble | DeltaEnsemble)[],
 ) {
     const ensembleSet = useAtomValue(EnsembleSetAtom);
-    const showObservations = viewContext.useSettingsToViewInterfaceValue("showObservations");
+    const showObservations = useAtomValue(showObservationsAtom);
+
     const vectorObservationsQueries = useAtomValue(vectorObservationsQueriesAtom);
     const isQueryFetching = useAtomValue(queryIsFetchingAtom);
     const hasHistoricalVectorQueryError = useAtomValue(historicalDataQueryHasErrorAtom);

frontend/src/modules/SimulationTimeSeries/view/hooks/usePlotBuilder.ts

@@ -1,5 +1,3 @@
-import type React from "react";
-
 import { useAtomValue } from "jotai";
 
 import type { SummaryVectorObservations_api } from "@api";
@@ -8,11 +6,9 @@ import type { ColorSet } from "@lib/utils/ColorSet";
 import type { Size2D } from "@lib/utils/geometry";
 import type { Interfaces } from "@modules/SimulationTimeSeries/interfaces";
 
-
-
 import type { VectorSpec } from "../../typesAndEnums";
 import { GroupBy, VisualizationMode } from "../../typesAndEnums";
-import { resampleFrequencyAtom } from "../atoms/baseAtoms";
+import { resampleFrequencyAtom, showObservationsAtom, visualizationModeAtom } from "../atoms/baseAtoms";
 import {
     activeTimestampUtcMsAtom,
     loadedRegularEnsembleVectorSpecificationsAndHistoricalDataAtom,
@@ -34,18 +30,19 @@ export function usePlotBuilder(
     wrapperDivSize: Size2D,
     colorSet: ColorSet,
     ensemblesParameterColoring: EnsemblesContinuousParameterColoring | null,
-    handlePlotOnClick?: ((event: Readonly<Plotly.PlotMouseEvent>) => void) | undefined,
-): React.ReactNode {
+): PlotBuilder {
     const groupBy = viewContext.useSettingsToViewInterfaceValue("groupBy");
-    const visualizationMode = viewContext.useSettingsToViewInterfaceValue("visualizationMode");
-    const showObservations = viewContext.useSettingsToViewInterfaceValue("showObservations");
+    const showObservations = useAtomValue(showObservationsAtom);
+    const visualizationMode = useAtomValue(visualizationModeAtom);
+
     const vectorSpecifications = viewContext.useSettingsToViewInterfaceValue("vectorSpecifications");
     const showHistorical = viewContext.useSettingsToViewInterfaceValue("showHistorical");
     const statisticsSelection = viewContext.useSettingsToViewInterfaceValue("statisticsSelection");
     const subplotLimitation = viewContext.useSettingsToViewInterfaceValue("subplotLimitation");
 
     const resampleFrequency = useAtomValue(resampleFrequencyAtom);
     const vectorObservationsQueries = useAtomValue(vectorObservationsQueriesAtom);
+
     const loadedVectorSpecificationsAndRealizationData = useAtomValue(loadedVectorSpecificationsAndRealizationDataAtom);
     const loadedVectorSpecificationsAndStatisticsData = useAtomValue(loadedVectorSpecificationsAndStatisticsDataAtom);
     const loadedRegularEnsembleVectorSpecificationsAndHistoricalData = useAtomValue(
@@ -138,7 +135,5 @@ export function usePlotBuilder(
         plotBuilder.addTimeAnnotation(activeTimestampUtcMs);
     }
 
-    const plot = plotBuilder.build(handlePlotOnClick);
-
-    return plot;
+    return plotBuilder;
 }

frontend/src/modules/SimulationTimeSeries/view/utils/PlotBuilder.ts

@@ -1,6 +1,5 @@
-import type React from "react";
-
 import type { Annotations, PlotMarker, Shape } from "plotly.js";
+import type { PlotParams } from "react-plotly.js";
 
 import type {
     DerivedVectorInfo_api,
@@ -22,7 +21,6 @@ import type { VectorSpec } from "@modules/SimulationTimeSeries/typesAndEnums";
 import { FrequencyEnumToStringMapping, SubplotLimitDirection } from "@modules/SimulationTimeSeries/typesAndEnums";
 import { createDerivedVectorDescription } from "@modules/SimulationTimeSeries/utils/vectorDescriptionUtils";
 
-
 import { scaleHexColorLightness } from "./colorUtils";
 import type { EnsemblesContinuousParameterColoring } from "./ensemblesContinuousParameterColoring";
 import {
@@ -259,7 +257,7 @@ export class PlotBuilder {
         }
     }
 
-    build(handleOnClick?: ((event: Readonly<Plotly.PlotMouseEvent>) => void) | undefined): React.ReactNode {
+    buildProps(customProps?: Omit<Partial<PlotParams>, "data" | "layout">): PlotParams {
         this.createGraphLegends();
         this.updateSubplotTitles();
 
@@ -274,7 +272,11 @@ export class PlotBuilder {
             }
         }
 
-        return this._figure.makePlot({ onClick: handleOnClick });
+        return {
+            data: this._figure.makeData(),
+            layout: this._figure.makeLayout(),
+            ...customProps,
+        };
     }
 
     addRealizationTracesColoredByParameter(