JSON schema: added support for multiple traces in a plot.

Author: agarny

package.json

@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "0.20251210.1",
+  "version": "0.20251211.0",
   "scripts": {
     "archive:web": "bun src/renderer/scripts/archive.web.js",
     "build": "electron-vite build",

src/renderer/package.json

@@ -39,7 +39,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "0.20251210.1",
+  "version": "0.20251211.0",
   "scripts": {
     "build": "vite build",
     "build:lib": "vite build --config vite.lib.config.ts && cp index.d.ts dist/index.d.ts",

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

@@ -49,7 +49,7 @@
             </ScrollPanel>
           </SplitterPanel>
           <SplitterPanel :size="75">
-            <GraphPanelWidget :key="interactiveModeEnabled ? 'hidden-graph-panel' : 'visible-graph-panel'" :plots="standardPlots" />
+            <GraphPanelWidget :key="interactiveModeEnabled ? 'hidden-graph-panel' : 'visible-graph-panel'" :data="standardData" />
           </SplitterPanel>
         </Splitter>
       </SplitterPanel>
@@ -88,7 +88,7 @@
             v-for="(_plot, index) in (uiJson as any).output.plots"
             :key="`plot_${index}`"
             :style="{ height: `calc((100% - 0.5 * ${(uiJson as any).output.plots.length - 1}rem) / ${(uiJson as any).output.plots.length})` }"
-            :plots="interactivePlots[index] || [{ x: { data: [] }, y: { data: [] } }]"
+            :data="interactiveData[index] || { xValues: [], yValues: [] }"
           />
         </div>
       </div>
@@ -110,7 +110,7 @@ import * as vueCommon from '../../common/vueCommon';
 import * as locApi from '../../libopencor/locApi';
 import * as locSedApi from '../../libopencor/locSedApi';
 
-import type { IGraphPanelPlot } from '../widgets/GraphPanelWidget.vue';
+import type { IGraphPanelData, IGraphPanelPlotAdditionalTrace } from '../widgets/GraphPanelWidget.vue';
 
 const props = defineProps<{
   file: locApi.File;
@@ -174,12 +174,10 @@ const standardInstanceTask = standardInstance.task(0);
 const standardParameters = vue.ref<string[]>([]);
 const standardXParameter = vue.ref(standardInstanceTask.voiName());
 const standardYParameter = vue.ref(standardInstanceTask.stateName(0));
-const standardPlots = vue.ref<IGraphPanelPlot[]>([
-  {
-    x: { data: [] },
-    y: { data: [] }
-  }
-]);
+const standardData = vue.ref<IGraphPanelData>({
+  xValues: [],
+  yValues: []
+});
 const standardConsoleContents = vue.ref<string>(`<b>${props.file.path()}</b>`);
 
 populateParameters(standardParameters, standardInstanceTask);
@@ -206,16 +204,10 @@ const xInfo = vue.computed(() => locCommon.simulationDataInfo(standardInstanceTa
 const yInfo = vue.computed(() => locCommon.simulationDataInfo(standardInstanceTask, standardYParameter.value));
 
 function updatePlot() {
-  standardPlots.value = [
-    {
-      x: {
-        data: locCommon.simulationData(standardInstanceTask, xInfo.value)
-      },
-      y: {
-        data: locCommon.simulationData(standardInstanceTask, yInfo.value)
-      }
-    }
-  ];
+  standardData.value = {
+    xValues: locCommon.simulationData(standardInstanceTask, xInfo.value),
+    yValues: locCommon.simulationData(standardInstanceTask, yInfo.value)
+  };
 }
 
 // Interactive mode.
@@ -225,14 +217,7 @@ const interactiveInstance = interactiveDocument.instantiate();
 const interactiveInstanceTask = interactiveInstance.task(0);
 const interactiveMath = mathjs.create(mathjs.all ?? {}, {});
 const interactiveModel = interactiveDocument.model(0);
-const interactivePlots = vue.ref<IGraphPanelPlot[][]>([
-  [
-    {
-      x: { data: [] },
-      y: { data: [] }
-    }
-  ]
-]);
+const interactiveData = vue.ref<IGraphPanelData[]>([]);
 const interactiveUiJsonIssues = vue.ref<locApi.IIssue[]>(
   interactiveModeAvailable.value ? locApi.uiJsonIssues(props.uiJson) : []
 );
@@ -318,7 +303,6 @@ function updateInteractiveSimulation() {
     const componentVariableNames = parameter.name.split('/');
 
     interactiveModel.addChange(
-      // @ts-expect-error (we trust that we have a valid component and variable name)
       componentVariableNames[0],
       componentVariableNames[1],
       String(evaluateValue(parameter.value))
@@ -340,42 +324,26 @@ function updateInteractiveSimulation() {
   const parser = interactiveMath.parser();
 
   props.uiJson.output.data.forEach((data: locApi.IUiJsonOutputData) => {
-    // @ts-expect-error (we trust that we have some valid information)
     parser.set(data.id, locCommon.simulationData(interactiveInstanceTask, interactiveIdToInfo[data.id]));
   });
 
-  interactivePlots.value = props.uiJson.output.plots.map((plot: locApi.IUiJsonOutputPlot) => {
-    // Default trace.
-
-    let res = [
-      {
-        x: {
-          data: parser.evaluate(plot.xValue),
-          axisTitle: plot.xAxisTitle
-        },
-        y: {
-          data: parser.evaluate(plot.yValue),
-          axisTitle: plot.yAxisTitle
-        }
-      }
-    ];
-
-    // Additional traces.
+  interactiveData.value = props.uiJson.output.plots.map((plot: locApi.IUiJsonOutputPlot) => {
+    let additionalTraces: IGraphPanelPlotAdditionalTrace[] = [];
 
     plot.additionalTraces?.forEach((additionalTrace: locApi.IUiJsonOutputPlotAdditionalTrace) => {
-      res.push({
-        x: {
-          data: parser.evaluate(additionalTrace.xValue),
-          axisTitle: plot.xAxisTitle
-        },
-        y: {
-          data: parser.evaluate(additionalTrace.yValue),
-          axisTitle: plot.yAxisTitle
-        }
+      additionalTraces.push({
+        xValues: parser.evaluate(additionalTrace.xValue),
+        yValues: parser.evaluate(additionalTrace.yValue)
       });
     });
 
-    return res;
+    return {
+      xAxisTitle: plot.xAxisTitle,
+      xValues: parser.evaluate(plot.xValue),
+      yAxisTitle: plot.yAxisTitle,
+      yValues: parser.evaluate(plot.yValue),
+      additionalTraces: additionalTraces
+    };
   });
 }
 

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

@@ -11,19 +11,27 @@ import * as vue from 'vue';
 
 import * as vueCommon from '../../common/vueCommon';
 
-interface IGraphPanelPlotData {
-  axisTitle?: string;
-  data: number[];
+interface IPlotlyTrace {
+  x: number[];
+  y: number[];
 }
 
-export interface IGraphPanelPlot {
-  x: IGraphPanelPlotData;
-  y: IGraphPanelPlotData;
+export interface IGraphPanelPlotAdditionalTrace {
+  xValues: number[];
+  yValues: number[];
+}
+
+export interface IGraphPanelData {
+  xAxisTitle?: string;
+  xValues: number[];
+  yAxisTitle?: string;
+  yValues: number[];
+  additionalTraces?: IGraphPanelPlotAdditionalTrace[];
 }
 
 const props = withDefaults(
   defineProps<{
-    plots: IGraphPanelPlot[];
+    data: IGraphPanelData;
     showMarker?: boolean;
   }>(),
   {
@@ -33,6 +41,7 @@ const props = withDefaults(
 
 const mainDiv = vue.ref<InstanceType<typeof Element> | null>(null);
 const isVisible = vue.ref(false);
+const rightMargin = vue.ref(-1);
 const theme = vueCommon.useTheme();
 
 interface IAxisThemeData {
@@ -86,39 +95,31 @@ function themeData(): IThemeData {
 }
 
 vue.watch(
-  () => [props.plots, theme.useLightMode()],
+  () => [props.data, theme.useLightMode()],
   () => {
     // Wait for the DOM to update before proceeding.
 
     vue.nextTick(() => {
-      // Retrieve the axes titles if there is only one plot.
+      // Retrieve the axes' titles.
+
+      const xAxisTitle = props.data.xAxisTitle;
+      const yAxisTitle = props.data.yAxisTitle;
+
+      // Retrieve all the traces, i.e. the default trace and any additional traces.
 
-      const xAxisTitle = props.plots.length === 1 ? props.plots[0]?.x.axisTitle : '';
-      const yAxisTitle = props.plots.length === 1 ? props.plots[0]?.y.axisTitle : '';
+      let traces: IPlotlyTrace[] = [{ x: props.data.xValues, y: props.data.yValues }];
+
+      for (const additionalTrace of props.data.additionalTraces || []) {
+        traces.push({ x: additionalTrace.xValues, y: additionalTrace.yValues });
+      }
 
       // Update the plots.
 
       const axisTitleFontSize = 10;
 
       Plotly.react(
         mainDiv.value,
-        props.plots.map((plot) => ({
-          x: plot.x.data,
-          y: plot.y.data
-          // type: 'scattergl'
-          //---OPENCOR---
-          // Ideally, we would render using WebGL, but... Web browsers impose a limit on the number of active WebGL
-          // contexts that can be used (8 to 16, apparently). So, depending on how the OpenCOR component is used, we may
-          // reach that limit and get the following warning as a result:
-          //   Too many active WebGL contexts. Oldest context will be lost.
-          // and nothing gets rendered. Apparently, plotly.js added support for virtual-webgl in version 2.28.0 (see
-          // https://github.com/plotly/plotly.js/releases/tag/v2.28.0), but to do what they say in
-          // https://github.com/plotly/plotly.js/pull/6784#issue-1991790973 still results in the same behaviour as
-          // above. So, it looks like we have no choice but to disable WebGL rendering. The downside is that 1) it
-          // doesn't look as good and 2) it is not as fast to render when there are a lot of data points. However, to
-          // use a virtual WebGL would mean that all WebGL-based components would also be using virtual WebGL, which
-          // might not be desirable.
-        })),
+        traces,
         {
           // Note: the various keys can be found at https://plotly.com/javascript/reference/.
 
@@ -127,7 +128,7 @@ vue.watch(
             t: 0,
             l: 0,
             b: 35,
-            r: 0,
+            r: rightMargin.value,
             pad: 0
           },
           showlegend: false,
@@ -164,6 +165,22 @@ vue.watch(
           showTips: false
         }
       )
+        .then(() => {
+          // If needed, determine and set the right margin to accommodate the last X-axis tick label.
+
+          if (rightMargin.value === -1) {
+            const xAxisElements = mainDiv.value?.querySelectorAll('.xtick');
+
+            if (xAxisElements !== undefined && xAxisElements.length > 0) {
+              rightMargin.value =
+                5 + 0.5 * (xAxisElements[xAxisElements.length - 1]?.getBoundingClientRect()?.width || 0);
+
+              Plotly.relayout(mainDiv.value, {
+                'margin.r': rightMargin.value
+              });
+            }
+          }
+        })
         .then(() => {
           if (isVisible.value) {
             return;