From f56783a4390247460336c37d03bcbdeea77d5b71 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Wed, 12 Nov 2025 16:44:49 +0100
Subject: [PATCH] add plot cursor sync to nodelist rows

---
 .../src/generic/plots/Comparogram.svelte         | 16 ++++++++++------
 web/frontend/src/generic/plots/MetricPlot.svelte | 10 ++++++++++
 .../src/systems/nodelist/NodeListRow.svelte      |  6 ++++++
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/web/frontend/src/generic/plots/Comparogram.svelte b/web/frontend/src/generic/plots/Comparogram.svelte
index 2a37417..96c06f8 100644
--- a/web/frontend/src/generic/plots/Comparogram.svelte
+++ b/web/frontend/src/generic/plots/Comparogram.svelte
@@ -39,7 +39,7 @@
     yunit = "",
     title = "",
     forResources = false,
-    plotSync,
+    plotSync = null,
   } = $props();
 
   /* Const Init */
@@ -204,11 +204,7 @@
       live: true,
     },
     cursor: { 
-      drag: { x: true, y: true },
-      sync: { 
-        key: plotSync.key,
-        scales: ["x", null],
-      }
+      drag: { x: true, y: true }
     }
   };
 
@@ -293,6 +289,14 @@
     if (!uplot) {
       opts.width = ren_width;
       opts.height = ren_height;
+      
+      if (plotSync) {
+        opts.cursor.sync = { 
+          key: plotSync.key,
+          scales: ["x", null],
+        }
+      }
+
       uplot = new uPlot(opts, data, plotWrapper); // Data is uplot formatted [[X][Ymin][Yavg][Ymax]]
       plotSync.sub(uplot)
     } else {
diff --git a/web/frontend/src/generic/plots/MetricPlot.svelte b/web/frontend/src/generic/plots/MetricPlot.svelte
index 2f70c96..1073c68 100644
--- a/web/frontend/src/generic/plots/MetricPlot.svelte
+++ b/web/frontend/src/generic/plots/MetricPlot.svelte
@@ -48,6 +48,7 @@
     zoomState = null,
     thresholdState = null,
     extendedLegendData = null,
+    plotSync = null,
     onZoom
   } = $props();
 
@@ -576,6 +577,14 @@
     if (!uplot) {
       opts.width = ren_width;
       opts.height = ren_height;
+      
+      if (plotSync) {
+        opts.cursor.sync = { 
+          key: plotSync.key,
+          scales: ["x", null],
+        }
+      }
+
       if (zoomState && metricConfig?.aggregation == "avg") {
         opts.scales = {...zoomState}
       } else if (zoomState && metricConfig?.aggregation == "sum") {
@@ -584,6 +593,7 @@
           if ((thresholdState === thresholds?.normal)) { opts.scales = {...zoomState} };
         } // else: reset scaling to default
       }
+      
       uplot = new uPlot(opts, plotData, plotWrapper);
     } else {
       uplot.setSize({ width: ren_width, height: ren_height });
diff --git a/web/frontend/src/systems/nodelist/NodeListRow.svelte b/web/frontend/src/systems/nodelist/NodeListRow.svelte
index a9111f6..cef70cc 100644
--- a/web/frontend/src/systems/nodelist/NodeListRow.svelte
+++ b/web/frontend/src/systems/nodelist/NodeListRow.svelte
@@ -13,6 +13,7 @@
     gql,
     getContextClient,
   } from "@urql/svelte";
+  import uPlot from "uplot";
   import { Card, CardBody, Spinner } from "@sveltestrap/sveltestrap";
   import { maxScope, checkMetricDisabled, scramble, scrambleNames } from "../../generic/utils.js";
   import MetricPlot from "../../generic/plots/MetricPlot.svelte";
@@ -25,6 +26,9 @@
     selectedMetrics,
   } = $props();
 
+  /* Var Init*/
+  let plotSync = uPlot.sync(`nodeMetricStack-${nodeData.host}`);
+
   /* Const Init */
   const client = getContextClient();
   const paging = { itemsPerPage: 50, page: 1 };
@@ -159,6 +163,7 @@
               statisticsSeries={metricData.data?.metric.statisticsSeries}
               useStatsSeries={!!metricData.data?.metric.statisticsSeries}
               height={175}
+              {plotSync}
               forNode
             />
           <div class="my-2"></div>
@@ -172,6 +177,7 @@
               series={metricData.data.metric.series}
               height={175}
               {extendedLegendData}
+              {plotSync}
               forNode
             />
           {/key}