Fixed some issues with plots.

Author: agarny

package.json

@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "0.20260319.1",
+  "version": "0.20260319.2",
   "engines": {
     "bun": ">=1.2.0"
   },

src/renderer/package.json

@@ -42,7 +42,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "0.20260319.1",
+  "version": "0.20260319.2",
   "scripts": {
     "build": "vite build && bun scripts/generate.version.js",
     "build:lib": "vite build --config vite.lib.config.ts && bun scripts/copy.indexdts.js",

src/renderer/src/components/views/SimulationExperimentView.vue

@@ -142,7 +142,7 @@
                   </div>
                   <div class="flex flex-col gap-2">
                     <div v-for="(run, index) in interactiveRuns"
-                      :key="run.isLiveRun ? 'live' : `run_${index}`"
+                      :key="run.id"
                       class="run-card rounded-lg p-1 pl-2 opacity-75 hover:opacity-100"
                       :class="{ 'run-card-live': run.isLiveRun, 'opacity-50': !run.isVisible }"
                     >
@@ -262,6 +262,7 @@ import GraphPanelWidget from '../widgets/GraphPanelWidget.vue';
 import type { IGraphPanelData, IGraphPanelPlotTrace, IGraphPanelMargins } from '../widgets/GraphPanelWidget.vue';
 
 interface ISimulationRun {
+  id: string;
   inputParameters: Record<string, number>;
   isVisible: boolean;
   data: IGraphPanelData[];
@@ -579,6 +580,7 @@ const interactiveShowInput = vue.ref<boolean[]>([]);
 const interactiveIdToInfo: Record<string, locCommon.ISimulationDataInfo> = {};
 const interactiveRuns = vue.ref<ISimulationRun[]>([
   {
+    id: 'live',
     inputParameters: {},
     isVisible: true,
     data: [],
@@ -587,6 +589,7 @@ const interactiveRuns = vue.ref<ISimulationRun[]>([
     isLiveRun: true
   }
 ]);
+let interactiveTrackedRunId = 0;
 const interactiveRunColorPopoverIndex = vue.ref<number>(-1);
 const interactiveRunColorPopoverRefs = vue.ref<Record<number, InstanceType<typeof Popover> | undefined>>({});
 const interactiveGraphPanelRefs = vue.ref<Record<number, InstanceType<typeof GraphPanelWidget> | undefined>>({});
@@ -634,6 +637,7 @@ const interactiveCompData = vue.computed<IGraphPanelData[]>(() => {
 
         traces.push({
           ...dataTrace,
+          traceId: `${interactiveRun.id}::${dataTrace.traceId ?? `${dataTrace.xValue}::${dataTrace.yValue}::${String(dataTraceIndex)}`}`,
           name: dataTrace.name + suffix,
           color: paletteColors[(baseColorIndex + dataTraceIndex) % paletteColorsLength] ?? colors.DEFAULT_COLOR,
           zorder: interactiveRun.isLiveRun ? 1 : undefined
@@ -806,10 +810,6 @@ const updateInteractiveSimulation = (forceUpdate: boolean = false): void => {
     return;
   }
 
-  // Reset our interactive margins.
-
-  onResetMargins();
-
   // Run the instance and update the plots.
 
   interactiveInstance.run();
@@ -898,13 +898,26 @@ const updateInteractiveSimulation = (forceUpdate: boolean = false): void => {
   try {
     const newInteractiveData: IGraphPanelData[] = [];
 
-    for (const plot of interactiveUiJson.value.output.plots) {
+    for (let plotIndex = 0; plotIndex < interactiveUiJson.value.output.plots.length; ++plotIndex) {
+      const plot = interactiveUiJson.value.output.plots[plotIndex];
+
+      if (!plot) {
+        newInteractiveData[plotIndex] = {
+          xAxisTitle: '',
+          yAxisTitle: '',
+          traces: []
+        };
+
+        continue;
+      }
+
       const xMain = evaluate(plot.xValue);
       const yMain = evaluate(plot.yValue);
       const normalisedMain = normaliseFloat64Arrays(xMain, yMain);
 
       const traces: IGraphPanelPlotTrace[] = [
         {
+          traceId: `plot_${String(plotIndex)}::trace_0`,
           name: traceName(plot.name, plot.xValue, plot.yValue),
           xValue: plot.xValue,
           x: normalisedMain.x,
@@ -914,12 +927,23 @@ const updateInteractiveSimulation = (forceUpdate: boolean = false): void => {
         }
       ];
 
-      for (const additionalTrace of plot.additionalTraces ?? []) {
+      for (
+        let additionalTraceIndex = 0;
+        additionalTraceIndex < (plot.additionalTraces ?? []).length;
+        ++additionalTraceIndex
+      ) {
+        const additionalTrace = plot.additionalTraces?.[additionalTraceIndex];
+
+        if (!additionalTrace) {
+          continue;
+        }
+
         const xAdditional = evaluate(additionalTrace.xValue);
         const yAdditional = evaluate(additionalTrace.yValue);
         const normalisedAdditional = normaliseFloat64Arrays(xAdditional, yAdditional);
 
         traces.push({
+          traceId: `plot_${String(plotIndex)}::trace_${String(additionalTraceIndex + 1)}`,
           name: traceName(additionalTrace.name, additionalTrace.xValue, additionalTrace.yValue),
           xValue: additionalTrace.xValue,
           x: normalisedAdditional.x,
@@ -929,11 +953,11 @@ const updateInteractiveSimulation = (forceUpdate: boolean = false): void => {
         });
       }
 
-      newInteractiveData.push({
+      newInteractiveData[plotIndex] = {
         xAxisTitle: plot.xAxisTitle,
         yAxisTitle: plot.yAxisTitle,
         traces
-      });
+      };
     }
 
     interactiveLiveData.value = newInteractiveData;
@@ -1083,6 +1107,7 @@ const onTrackRun = (): void => {
   // Add the new run.
 
   interactiveRuns.value.push({
+    id: `run_${String(++interactiveTrackedRunId)}`,
     inputParameters,
     isVisible: true,
     data: interactiveLiveData.value,
@@ -1200,6 +1225,8 @@ const onInteractiveSettingsOk = (settings: ISimulationExperimentViewSettings): v
   // Resize our graph panels if the number of plots has changed.
 
   if (interactiveUiJson.value.output.plots.length !== oldNbOfGraphPanelWidgets) {
+    onResetMargins();
+
     interactiveGraphPanelRefs.value = {};
 
     vue.nextTick().then(() => {

src/renderer/src/components/widgets/GraphPanelWidget.vue

@@ -34,6 +34,7 @@ interface IPlotlyLayout {
 
 export interface IGraphPanelPlotTrace {
   name: string;
+  traceId?: string;
   xValue: string;
   x: Float64Array;
   yValue: string;
@@ -42,6 +43,16 @@ export interface IGraphPanelPlotTrace {
   zorder?: number;
 }
 
+type PlotlyTraceVisible = boolean | 'legendonly';
+
+interface IPlotlyTraceState {
+  name?: string;
+  traceId?: string;
+  xValue?: string;
+  yValue?: string;
+  visible?: PlotlyTraceVisible;
+}
+
 export interface IGraphPanelData {
   xAxisTitle?: string;
   yAxisTitle?: string;
@@ -594,11 +605,13 @@ const updateMarginsAsync = (): void => {
 
   updatingMargins = true;
 
-  // Use requestAnimationFrame for optimal timing (after render, before next paint).
+  // Use requestAnimationFrame for optimal timing.
 
   requestAnimationFrame(() => {
     const newMargins = compMargins();
 
+    // Emit an update if our margins have changed.
+
     if (!sameMargins(trackedMargins, newMargins)) {
       trackedMargins = newMargins;
 
@@ -643,11 +656,40 @@ const updatePlot = (): void => {
 
   // Update the plots.
 
-  const traces = props.data.traces.map((trace) => ({
-    ...trace,
-    line: { color: trace.color },
-    legendrank: trace.zorder
-  }));
+  const traceVisibilityKey = (trace: IPlotlyTraceState): string | undefined => {
+    if (trace.traceId) {
+      return `id::${trace.traceId}`;
+    }
+
+    if (trace.name && trace.xValue && trace.yValue) {
+      return `expr::${trace.xValue}::${trace.yValue}::${trace.name}`;
+    }
+
+    return undefined;
+  };
+
+  const previousTraceVisibilityByKey: Record<string, PlotlyTraceVisible> = {};
+  const previousPlotlyData = (mainDivRef.value as unknown as { data?: IPlotlyTraceState[] })?.data;
+
+  for (const plotlyTrace of previousPlotlyData ?? []) {
+    const plotlyTraceKey = traceVisibilityKey(plotlyTrace);
+
+    if (plotlyTraceKey && plotlyTrace.visible !== undefined) {
+      previousTraceVisibilityByKey[plotlyTraceKey] = plotlyTrace.visible;
+    }
+  }
+
+  const traces = props.data.traces.map((trace) => {
+    const traceKey = traceVisibilityKey(trace);
+    const visible = traceKey ? previousTraceVisibilityByKey[traceKey] : undefined;
+
+    return {
+      ...trace,
+      visible,
+      line: { color: trace.color },
+      legendrank: trace.zorder
+    };
+  });
 
   dependencies._plotlyJs
     .react(
@@ -813,6 +855,10 @@ vue.watch(
       })
       .then(() => {
         if (!props.margins) {
+          // When shared margins are unset, we need to clear our tracked margins so that we can emit them.
+
+          trackedMargins = undefined;
+
           updateMarginsAsync();
         }
       });