From 43d5ffc96c25b8d06dc3ff3cb2b7cfd771c0d1a1 Mon Sep 17 00:00:00 2001
From: Alan Garny <agarny@hellix.com>
Date: Thu, 5 Feb 2026 16:40:08 +1300
Subject: [PATCH] Graph Panel widget: added a context menu.

---
 src/renderer/index.html                       |   2 +-
 src/renderer/src/common/common.ts             |   6 +
 src/renderer/src/common/constants.ts          |   1 +
 .../components/BlockingMessageComponent.vue   |  11 +
 src/renderer/src/components/OpenCOR.vue       |  46 ++-
 .../views/SimulationExperimentView.vue        |   6 +
 .../components/widgets/GraphPanelWidget.vue   | 339 +++++++++++++++++-
 7 files changed, 405 insertions(+), 6 deletions(-)

diff --git a/src/renderer/index.html b/src/renderer/index.html
index c5464c09..ce9e63cd 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -7,7 +7,7 @@
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; connect-src *; script-src 'unsafe-eval'; script-src-elem 'self' https://apis.google.com https://cdn.jsdelivr.net https://cors-proxy.opencor.workers.dev; style-src 'self' 'unsafe-inline'; frame-src 'self' https://opencorapp.firebaseapp.com; img-src 'self' data:" />
+      content="default-src 'self'; connect-src *; script-src 'unsafe-eval'; script-src-elem 'self' https://apis.google.com https://cdn.jsdelivr.net https://cors-proxy.opencor.workers.dev; style-src 'self' 'unsafe-inline'; frame-src 'self' https://opencorapp.firebaseapp.com; img-src 'self' blob: data:" />
     <style scoped>
     body {
       background-color: #ffffff; /* Light version of --p-content-background. */
diff --git a/src/renderer/src/common/common.ts b/src/renderer/src/common/common.ts
index b7527d5b..3cd67c59 100644
--- a/src/renderer/src/common/common.ts
+++ b/src/renderer/src/common/common.ts
@@ -176,3 +176,9 @@ export function fileName(filePath: string): string {
     return res;
   }
 }
+
+// A method to sleep for a given number of milliseconds.
+
+export function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
diff --git a/src/renderer/src/common/constants.ts b/src/renderer/src/common/constants.ts
index 6b3846dc..d07472f4 100644
--- a/src/renderer/src/common/constants.ts
+++ b/src/renderer/src/common/constants.ts
@@ -1,6 +1,7 @@
 export const URI_SCHEME: string = 'opencor';
 export const FULL_URI_SCHEME: string = `${URI_SCHEME}://`;
 
+export const NO_DELAY: number = 0;
 export const SHORT_DELAY: number = 69;
 export const MEDIUM_DELAY: number = 169;
 export const LONG_DELAY: number = 369;
diff --git a/src/renderer/src/components/BlockingMessageComponent.vue b/src/renderer/src/components/BlockingMessageComponent.vue
index 58421cf5..1603aa65 100644
--- a/src/renderer/src/components/BlockingMessageComponent.vue
+++ b/src/renderer/src/components/BlockingMessageComponent.vue
@@ -6,11 +6,22 @@
     <i class="block! pi pi-cog pi-spin text-center! text-[3rem]!" />
     <br />
     <span class="block text-center text-[1.5rem]">{{ message }}</span>
+    <ProgressBar v-if="progress !== undefined" class="w-100 h-1! mt-4"
+      :value="progress"
+      mode="determinate"
+      :showValue="false"
+      :pt="{
+        value: {
+          style: 'transition: none'
+        }
+      }"
+    />
   </Message>
 </template>
 
 <script setup lang="ts">
 defineProps<{
   message: string;
+  progress?: number;
 }>();
 </script>
diff --git a/src/renderer/src/components/OpenCOR.vue b/src/renderer/src/components/OpenCOR.vue
index 732b36cc..4a43ea22 100644
--- a/src/renderer/src/components/OpenCOR.vue
+++ b/src/renderer/src/components/OpenCOR.vue
@@ -11,9 +11,10 @@
       :group="toastId"
       :pt:root:style="{ position: 'absolute' }"
     />
-    <BackgroundComponent v-show="(loadingOpencorMessageVisible || loadingModelMessageVisible) && omex" />
-    <BlockingMessageComponent message="Loading OpenCOR..." v-show="loadingOpencorMessageVisible" />
-    <BlockingMessageComponent message="Loading model..." v-show="loadingModelMessageVisible" />
+    <BackgroundComponent v-show="compBackgroundVisible" />
+    <BlockingMessageComponent v-show="loadingOpencorMessageVisible" message="Loading OpenCOR..." />
+    <BlockingMessageComponent v-show="loadingModelMessageVisible" message="Loading model..." />
+    <BlockingMessageComponent v-show="progressMessageVisible" :message="progressMessageMessage" :progress="progressMessageProgress" />
     <IssuesView v-if="issues.length" class="m-4" style="height: calc(100% - 2rem);" :issues="issues" />
     <div v-else class="h-full flex flex-col"
       @dragenter="onDragEnter"
@@ -166,6 +167,7 @@ const compBlockUiEnabled = vue.computed(() => {
     !electronUiEnabled.value ||
     loadingOpencorMessageVisible.value ||
     loadingModelMessageVisible.value ||
+    progressMessageVisible.value ||
     connectingToGitHub.value
   );
 });
@@ -174,6 +176,38 @@ const compUiEnabled = vue.computed(() => {
   return !compBlockUiEnabled.value && !isDialogActive.value;
 });
 
+// Provide access to our progress message features.
+
+export interface IProgressMessage {
+  show: (message: string) => void;
+  update: (percent: number) => void;
+  hide: () => void;
+}
+
+const show = (message: string): void => {
+  progressMessageMessage.value = message;
+  progressMessageProgress.value = 0;
+  progressMessageVisible.value = true;
+};
+
+const update = (percent: number): void => {
+  progressMessageProgress.value = percent;
+};
+
+const hide = (): void => {
+  progressMessageVisible.value = false;
+};
+
+vue.provide('progressMessage', {
+  show,
+  update,
+  hide
+});
+
+const progressMessageVisible = vue.ref<boolean>(false);
+const progressMessageMessage = vue.ref<string>('');
+const progressMessageProgress = vue.ref<number>(0);
+
 // Get the current Vue app instance to use some PrimeVue plugins and VueTippy.
 
 const crtInstance = vue.getCurrentInstance();
@@ -212,6 +246,12 @@ const toast = useToast();
 //       OpenCOR's Web app.
 
 const locApiInitialised = vue.ref(false);
+const compBackgroundVisible = vue.computed(() => {
+  return (
+    (loadingOpencorMessageVisible.value || loadingModelMessageVisible.value || progressMessageVisible.value) &&
+    !!props.omex
+  );
+});
 const loadingOpencorMessageVisible = vue.ref<boolean>(false);
 const loadingModelMessageVisible = vue.ref<boolean>(false);
 
diff --git a/src/renderer/src/components/views/SimulationExperimentView.vue b/src/renderer/src/components/views/SimulationExperimentView.vue
index e98307c9..906bb31c 100644
--- a/src/renderer/src/components/views/SimulationExperimentView.vue
+++ b/src/renderer/src/components/views/SimulationExperimentView.vue
@@ -463,7 +463,9 @@ function updatePlot() {
     traces: [
       {
         name: traceName(undefined, standardXParameter.value, standardYParameter.value),
+        xValue: standardXParameter.value,
         x: locCommon.simulationData(standardInstanceTask, xInfo.value),
+        yValue: standardYParameter.value,
         y: locCommon.simulationData(standardInstanceTask, yInfo.value),
         color: colors.DEFAULT_COLOR
       }
@@ -747,7 +749,9 @@ function updateInteractiveSimulation(forceUpdate: boolean = false): void {
       const traces: IGraphPanelPlotTrace[] = [
         {
           name: traceName(plot.name, plot.xValue, plot.yValue),
+          xValue: plot.xValue,
           x: parserEvaluate(plot.xValue),
+          yValue: plot.yValue,
           y: parserEvaluate(plot.yValue),
           color: colors.DEFAULT_COLOR
         }
@@ -756,7 +760,9 @@ function updateInteractiveSimulation(forceUpdate: boolean = false): void {
       plot.additionalTraces?.forEach((additionalTrace: locApi.IUiJsonOutputPlotAdditionalTrace) => {
         traces.push({
           name: traceName(additionalTrace.name, additionalTrace.xValue, additionalTrace.yValue),
+          xValue: additionalTrace.xValue,
           x: parserEvaluate(additionalTrace.xValue),
+          yValue: additionalTrace.yValue,
           y: parserEvaluate(additionalTrace.yValue),
           color: colors.DEFAULT_COLOR
         });
diff --git a/src/renderer/src/components/widgets/GraphPanelWidget.vue b/src/renderer/src/components/widgets/GraphPanelWidget.vue
index 9030f4db..40fcbefb 100644
--- a/src/renderer/src/components/widgets/GraphPanelWidget.vue
+++ b/src/renderer/src/components/widgets/GraphPanelWidget.vue
@@ -1,20 +1,32 @@
 <template>
   <div class="flex flex-row h-full" :class="isVisible ? 'visible' : 'invisible'">
     <div v-if="showMarker" class="w-0.75 bg-primary" />
-    <div ref="mainDiv" class="grow h-full" />
+    <div ref="mainDiv" class="grow h-full" @contextmenu="onContextMenu" />
+    <ContextMenu ref="contextMenu" :model="contextMenuItems" />
   </div>
 </template>
 
 <script setup lang="ts">
 import Plotly from 'https://cdn.jsdelivr.net/npm/plotly.js-gl2d-dist-min@3.3.1/+esm';
+
+import ContextMenu from 'primevue/contextmenu';
+import type { MenuItem } from 'primevue/menuitem';
 import * as vue from 'vue';
 
 import * as colors from '../../common/colors.ts';
+import * as common from '../../common/common.ts';
+import { LONG_DELAY, NO_DELAY, SHORT_DELAY } from '../../common/constants.ts';
 import * as vueCommon from '../../common/vueCommon.ts';
 
+import type { IProgressMessage } from '../OpenCOR.vue';
+
+const CONTEXT_MENU_EVENT: string = 'graph-panel-context-menu-open';
+
 export interface IGraphPanelPlotTrace {
   name: string;
+  xValue: string;
   x: Float64Array;
+  yValue: string;
   y: Float64Array;
   color: string;
   zorder?: number;
@@ -51,11 +63,315 @@ defineExpose({
   resize
 });
 
-const mainDiv = vue.ref<InstanceType<typeof Element> | null>(null);
+const instanceId = Symbol('GraphPanelWidget');
+const mainDiv = vue.ref<HTMLElement | null>(null);
 const isVisible = vue.ref(false);
 const margins = vue.ref<IGraphPanelMargins>({ left: -1, right: -1 });
 const theme = vueCommon.useTheme();
+const contextMenu = vue.ref<InstanceType<typeof ContextMenu> | null>(null);
 let updatingMargins = false;
+const progressMessage = vue.inject<IProgressMessage>('progressMessage');
+
+// Context menu functionality.
+
+const contextMenuItems = vue.computed<MenuItem[]>(() => [
+  {
+    icon: 'pi pi-search-plus',
+    label: 'Zoom In',
+    command: () => zoomIn()
+  },
+  {
+    icon: 'pi pi-search-minus',
+    label: 'Zoom Out',
+    command: () => zoomOut()
+  },
+  {
+    icon: 'pi pi-refresh',
+    label: 'Reset Zoom',
+    command: () => resetZoom()
+  },
+  {
+    separator: true
+  },
+  {
+    icon: 'pi pi-copy',
+    label: 'Copy to Clipboard',
+    command: () => copyToClipboard()
+  },
+  {
+    icon: 'pi pi-chart-line',
+    label: 'Export Plot',
+    items: [
+      {
+        icon: 'pi pi-file',
+        label: 'Export to JPEG',
+        command: () => exportToImage('jpeg')
+      },
+      {
+        icon: 'pi pi-file',
+        label: 'Export to PNG',
+        command: () => exportToImage('png')
+      },
+      {
+        icon: 'pi pi-file',
+        label: 'Export to SVG',
+        command: () => exportToImage('svg')
+      },
+      {
+        icon: 'pi pi-file',
+        label: 'Export to WebP',
+        command: () => exportToImage('webp')
+      }
+    ]
+  },
+  {
+    separator: true
+  },
+  {
+    label: 'Export Data to CSV',
+    icon: 'pi pi-download',
+    command: () => exportToCsv()
+  }
+]);
+
+function onContextMenu(event: MouseEvent): void {
+  event.preventDefault();
+
+  window.dispatchEvent(
+    new CustomEvent(CONTEXT_MENU_EVENT, {
+      detail: {
+        sourceId: instanceId
+      }
+    })
+  );
+
+  contextMenu.value?.show(event);
+}
+
+function zoomIn(): void {
+  if (!mainDiv.value) {
+    return;
+  }
+
+  const layout = (mainDiv.value as unknown as { layout?: Partial<Plotly.Layout> }).layout;
+
+  if (!layout?.xaxis?.range || !layout?.yaxis?.range) {
+    return;
+  }
+
+  const xRange = layout.xaxis.range as [number, number];
+  const yRange = layout.yaxis.range as [number, number];
+
+  const xCenter = 0.5 * (xRange[0] + xRange[1]);
+  const yCenter = 0.5 * (yRange[0] + yRange[1]);
+  const xSpan = 0.5 * (xRange[1] - xRange[0]);
+  const ySpan = 0.5 * (yRange[1] - yRange[0]);
+
+  Plotly.relayout(mainDiv.value, {
+    'xaxis.range': [xCenter - 0.5 * xSpan, xCenter + 0.5 * xSpan],
+    'yaxis.range': [yCenter - 0.5 * ySpan, yCenter + 0.5 * ySpan]
+  });
+
+  emit('resetMargins');
+}
+
+function zoomOut(): void {
+  if (!mainDiv.value) {
+    return;
+  }
+
+  const layout = (mainDiv.value as unknown as { layout?: Partial<Plotly.Layout> }).layout;
+
+  if (!layout?.xaxis?.range || !layout?.yaxis?.range) {
+    return;
+  }
+
+  const xRange = layout.xaxis.range as [number, number];
+  const yRange = layout.yaxis.range as [number, number];
+
+  const xCenter = 0.5 * (xRange[0] + xRange[1]);
+  const yCenter = 0.5 * (yRange[0] + yRange[1]);
+  const xSpan = 0.5 * (xRange[1] - xRange[0]);
+  const ySpan = 0.5 * (yRange[1] - yRange[0]);
+
+  Plotly.relayout(mainDiv.value, {
+    'xaxis.range': [xCenter - 2 * xSpan, xCenter + 2 * xSpan],
+    'yaxis.range': [yCenter - 2 * ySpan, yCenter + 2 * ySpan]
+  });
+
+  emit('resetMargins');
+}
+
+function resetZoom(): void {
+  if (!mainDiv.value) {
+    return;
+  }
+
+  Plotly.relayout(mainDiv.value, {
+    'xaxis.autorange': true,
+    'yaxis.autorange': true
+  });
+
+  emit('resetMargins');
+}
+
+async function copyToClipboard(): Promise<void> {
+  if (!mainDiv.value) {
+    return;
+  }
+
+  try {
+    const imageData = await Plotly.toImage(mainDiv.value, {
+      format: 'png',
+      width: mainDiv.value.clientWidth,
+      height: mainDiv.value.clientHeight
+    });
+
+    const binaryData = atob(imageData.split(',')[1]);
+    const array = Uint8Array.from(binaryData, (c) => c.charCodeAt(0));
+
+    await navigator.clipboard.write([
+      new ClipboardItem({
+        'image/png': new Blob([array], { type: 'image/png' })
+      })
+    ]);
+  } catch (error: unknown) {
+    console.error('Failed to copy to clipboard:', common.formatError(error));
+  }
+}
+
+async function exportToImage(format: 'jpeg' | 'png' | 'svg' | 'webp'): Promise<void> {
+  if (!mainDiv.value) {
+    return;
+  }
+
+  try {
+    await Plotly.downloadImage(mainDiv.value, {
+      format: format,
+      width: mainDiv.value.clientWidth,
+      height: mainDiv.value.clientHeight,
+      filename: 'plot'
+    });
+  } catch (error: unknown) {
+    console.error('Failed to export image:', common.formatError(error));
+  }
+}
+
+async function exportToCsv(): Promise<void> {
+  // Make sure that we have at least one trace to export.
+
+  const firstTrace = props.data.traces[0];
+
+  if (!firstTrace) {
+    return;
+  }
+
+  // Show the progress message.
+
+  if (progressMessage) {
+    progressMessage.show('Exporting data to CSV...');
+  }
+
+  let successfulExport: boolean = true;
+
+  try {
+    // Allow the UI to update before actually starting the export to CSV.
+
+    await common.sleep(SHORT_DELAY);
+
+    // Perform the export itself.
+    // Note: to efficiently export to CSV, we build an array of CSV lines and only join them together at the end. This is
+    //       much more efficient than concatenating strings together repeatedly.
+
+    const csvLines: string[] = [];
+
+    // Headers.
+
+    const allXValuesEqual = props.data.traces.every((trace) => trace.xValue === firstTrace.xValue);
+    const headerParts: string[] = [allXValuesEqual ? firstTrace.xValue : 'X'];
+
+    props.data.traces.forEach((trace) => {
+      headerParts.push(trace.name.replace(/<[^>]*>|,/g, '') || trace.yValue);
+      // Note: we remove any HTML tags and commas to ensure the CSV is well-formed.
+    });
+
+    csvLines.push(headerParts.join(','));
+
+    // Data rows: collect all unique X values and build value maps.
+
+    const allXValues = new Set<number>();
+    const traceMaps = props.data.traces.map((trace) => {
+      const map = new Map<number, number>();
+
+      for (let i = 0; i < trace.x.length; ++i) {
+        const xValue = trace.x[i];
+        const yValue = trace.y[i];
+
+        if (xValue !== undefined && yValue !== undefined) {
+          allXValues.add(xValue);
+
+          map.set(xValue, yValue);
+        }
+      }
+
+      return map;
+    });
+
+    // Process the rows and update the progress message at regular intervals to keep the UI responsive.
+
+    const sortedXValues = Array.from(allXValues).sort((a, b) => a - b);
+    const chunkSize = Math.max(1, Math.floor(0.01 * sortedXValues.length));
+    const percentPerRow = 100 / sortedXValues.length;
+    let processedRows = 0;
+
+    for (const sortedXValue of sortedXValues) {
+      const rowParts: string[] = [String(sortedXValue)];
+
+      props.data.traces.forEach((_trace, traceIndex) => {
+        const yValue = traceMaps[traceIndex]?.get(sortedXValue);
+
+        rowParts.push(yValue !== undefined ? String(yValue) : '');
+      });
+
+      csvLines.push(rowParts.join(','));
+
+      ++processedRows;
+
+      if (progressMessage && (processedRows % chunkSize === 0 || processedRows === sortedXValues.length)) {
+        progressMessage.update(Math.floor(percentPerRow * processedRows));
+
+        await common.sleep(NO_DELAY);
+      }
+    }
+
+    // Make sure that we show 100% before finishing.
+
+    if (progressMessage) {
+      progressMessage.update(100);
+    }
+
+    // Create and download the CSV file.
+
+    common.downloadFile('data.csv', csvLines.join('\n'), 'text/csv;charset=utf-8;');
+  } catch (error: unknown) {
+    successfulExport = false;
+
+    console.error('Failed to export to CSV:', common.formatError(error));
+  } finally {
+    // Hide the progress message. If the export succeeded then delay briefly so that the user can see that we reached
+    // 100%. Otherwise, hide immediately to avoid blocking the UI unnecessarily.
+
+    if (progressMessage) {
+      if (successfulExport) {
+        await common.sleep(LONG_DELAY);
+      }
+
+      progressMessage.hide();
+    }
+  }
+}
+
+// Plotly theme and layout data generation.
 
 interface IAxisThemeData {
   zerolinecolor: string;
@@ -326,7 +642,22 @@ interface IPlotlyHTMLElement extends HTMLElement {
   on(event: string, callback: (...args: unknown[]) => void): void;
 }
 
+const handleContextMenu = (event: Event): void => {
+  // Hide our context menu if the event was dispatched by another instance of the Graph Panel widget. This ensures that
+  // only one context menu is open at any given time.
+
+  const detail = (event as CustomEvent<{ sourceId?: symbol }>)?.detail;
+
+  if (!detail || detail.sourceId === instanceId) {
+    return;
+  }
+
+  contextMenu.value?.hide?.();
+};
+
 vue.onMounted(() => {
+  window.addEventListener(CONTEXT_MENU_EVENT, handleContextMenu);
+
   vue.nextTick(() => {
     // Reset our margins on double-click and relayout.
 
@@ -344,6 +675,10 @@ vue.onMounted(() => {
   });
 });
 
+vue.onUnmounted(() => {
+  window.removeEventListener(CONTEXT_MENU_EVENT, handleContextMenu);
+});
+
 vue.watch(
   () => props.data,
   () => {