From d3d752f90cae1bcd2bd1470c6e19d6cc07d5b426 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 6 May 2025 10:46:30 +0200
Subject: [PATCH] finalize compareplot prototype, move formattime to units.js

---
 web/frontend/src/generic/JobCompare.svelte    |  4 ++-
 .../src/generic/plots/Comparogram.svelte      | 35 +++++++------------
 .../src/generic/plots/Histogram.svelte        | 17 +--------
 .../src/generic/plots/MetricPlot.svelte       | 18 +---------
 web/frontend/src/generic/units.js             | 20 +++++++++++
 5 files changed, 37 insertions(+), 57 deletions(-)

diff --git a/web/frontend/src/generic/JobCompare.svelte b/web/frontend/src/generic/JobCompare.svelte
index cd37a07..ba40bcc 100644
--- a/web/frontend/src/generic/JobCompare.svelte
+++ b/web/frontend/src/generic/JobCompare.svelte
@@ -22,6 +22,7 @@
     // mutationStore,
   } from "@urql/svelte";
   import { Row, Col, Card, Spinner } from "@sveltestrap/sveltestrap";
+  import { formatTime } from "./units.js";
   import Comparogram from "./plots/Comparogram.svelte";
 
   const ccconfig = getContext("cc-config"),
@@ -195,7 +196,8 @@
   {#each $compareData.data.jobsMetricStats as job, jindex (job.jobId)}
     <Row>
       <Col><b>{jindex}: <i>{job.jobId}</i></b></Col>
-      <Col><i>{new Date(job.startTime * 1000)}</i></Col>
+      <Col><i>{new Date(job.startTime * 1000).toISOString()}</i></Col>
+      <Col><i>{formatTime(job.duration)}</i></Col>
       {#each job.stats as stat (stat.name)}
         <Col><b>{stat.name}</b></Col>
         <Col>Min {stat.data.min}</Col>
diff --git a/web/frontend/src/generic/plots/Comparogram.svelte b/web/frontend/src/generic/plots/Comparogram.svelte
index da31b5c..b4d8d77 100644
--- a/web/frontend/src/generic/plots/Comparogram.svelte
+++ b/web/frontend/src/generic/plots/Comparogram.svelte
@@ -14,7 +14,7 @@
 
 <script>
   import uPlot from "uplot";
-  import { formatNumber } from "../units.js";
+  import { roundTwoDigits, formatTime } from "../units.js";
   import { getContext, onMount, onDestroy } from "svelte";
   import { Card } from "@sveltestrap/sveltestrap";
 
@@ -30,32 +30,12 @@
   // export let cluster = "";
   // export let subCluster = "";
 
-  $: console.log('LABEL:', metric, yunit)
-  $: console.log('DATA:', data)
-  $: console.log('XTICKS:', xticks)
-
   const metricConfig = null // DEBUG FILLER
   // const metricConfig = getContext("getMetricConfig")(cluster, subCluster, metric); // Args woher
   const clusterCockpitConfig = getContext("cc-config");
   const lineWidth = clusterCockpitConfig.plot_general_lineWidth / window.devicePixelRatio;
   const cbmode = clusterCockpitConfig?.plot_general_colorblindMode || false;
 
-  // Format Seconds to hh:mm
-  function formatTime(t) {
-    if (t !== null) {
-      if (isNaN(t)) {
-        return t;
-      } else {
-        const tAbs = Math.abs(t);
-        const h = Math.floor(tAbs / 3600);
-        const m = Math.floor((tAbs % 3600) / 60);
-        if (h == 0) return `${m}m`;
-        else if (m == 0) return `${h}h`;
-        else return `${h}:${m}h`;
-      }
-    }
-  }
-
   // UPLOT PLUGIN // converts the legend into a simple tooltip
   function legendAsTooltipPlugin({
     className,
@@ -160,18 +140,27 @@
       scale: "y",
       width: lineWidth,
       stroke: cbmode ? "rgb(0,255,0)" : "red",
+      value: (u, ts, sidx, didx) => {
+        return `${roundTwoDigits(ts)} ${yunit}`;
+      },
     },
     {
       label: "Avg",
       scale: "y",
       width: lineWidth,
       stroke: "black",
+      value: (u, ts, sidx, didx) => {
+        return `${roundTwoDigits(ts)} ${yunit}`;
+      },
     },
     {
       label: "Max",
       scale: "y",
       width: lineWidth,
       stroke: cbmode ? "rgb(0,0,255)" : "green",
+      value: (u, ts, sidx, didx) => {
+        return `${roundTwoDigits(ts)} ${yunit}`;
+      },
     }
   ];
 
@@ -209,7 +198,7 @@
         scale: "y",
         grid: { show: true },
         labelFont: "sans-serif",
-        label: ylabel + ' (' + yunit + ')'
+        label: ylabel + (yunit ? ` (${yunit})` : '')
       },
     ],
     bands: plotBands,
@@ -218,7 +207,7 @@
       draw: [
         (u) => {
           // Draw plot type label:
-          let textl = "Metric Min/Avg/Max in Duration";
+          let textl = "Metric Min/Avg/Max for Job Duration";
           let textr = "Earlier <- StartTime -> Later";
           u.ctx.save();
           u.ctx.textAlign = "start"; // 'end'
diff --git a/web/frontend/src/generic/plots/Histogram.svelte b/web/frontend/src/generic/plots/Histogram.svelte
index fbc5a33..4408112 100644
--- a/web/frontend/src/generic/plots/Histogram.svelte
+++ b/web/frontend/src/generic/plots/Histogram.svelte
@@ -16,7 +16,7 @@
 <script>
   import uPlot from "uplot";
   import { onMount, onDestroy } from "svelte";
-  import { formatNumber } from "../units.js";
+  import { formatNumber, formatTime } from "../units.js";
   import { Card } from "@sveltestrap/sveltestrap";
 
   export let data;
@@ -36,21 +36,6 @@
     points: 2,
   };
 
-  function formatTime(t) {
-    if (t !== null) {
-      if (isNaN(t)) {
-        return t;
-      } else {
-        const tAbs = Math.abs(t);
-        const h = Math.floor(tAbs / 3600);
-        const m = Math.floor((tAbs % 3600) / 60);
-        if (h == 0) return `${m}m`;
-        else if (m == 0) return `${h}h`;
-        else return `${h}:${m}h`;
-      }
-    }
-  }
-
   function paths(u, seriesIdx, idx0, idx1, extendGap, buildClip) {
     let s = u.series[seriesIdx];
     let style = s.drawStyle;
diff --git a/web/frontend/src/generic/plots/MetricPlot.svelte b/web/frontend/src/generic/plots/MetricPlot.svelte
index 48b1361..a199274 100644
--- a/web/frontend/src/generic/plots/MetricPlot.svelte
+++ b/web/frontend/src/generic/plots/MetricPlot.svelte
@@ -21,22 +21,6 @@
  -->
 
 <script context="module">
-  function formatTime(t, forNode = false) {
-    if (t !== null) {
-      if (isNaN(t)) {
-        return t;
-      } else {
-        const tAbs = Math.abs(t);
-        const h = Math.floor(tAbs / 3600);
-        const m = Math.floor((tAbs % 3600) / 60);
-        // Re-Add "negativity" to time ticks only as string, so that if-cases work as intended
-        if (h == 0) return `${forNode && m != 0 ? "-" : ""}${m}m`;
-        else if (m == 0) return `${forNode ? "-" : ""}${h}h`;
-        else return `${forNode ? "-" : ""}${h}:${m}h`;
-      }
-    }
-  }
-
   function timeIncrs(timestep, maxX, forNode) {
     if (forNode === true) {
       return [60, 120, 240, 300, 360, 480, 600, 900, 1800, 3600, 7200, 14400, 21600]; // forNode fixed increments
@@ -118,7 +102,7 @@
 
 <script>
   import uPlot from "uplot";
-  import { formatNumber } from "../units.js";
+  import { formatNumber, formatTime } from "../units.js";
   import { getContext, onMount, onDestroy, createEventDispatcher } from "svelte";
   import { Card } from "@sveltestrap/sveltestrap";
 
diff --git a/web/frontend/src/generic/units.js b/web/frontend/src/generic/units.js
index 4c1fea4..bb527ab 100644
--- a/web/frontend/src/generic/units.js
+++ b/web/frontend/src/generic/units.js
@@ -17,6 +17,10 @@ export function formatNumber(x) {
     }
 }
 
+export function roundTwoDigits(x) {
+    return Math.round(x * 100) / 100
+}
+
 export function scaleNumbers(x, y , p = '') {
     const oldPower  = power[prefix.indexOf(p)]
     const rawXValue = x * oldPower 
@@ -31,4 +35,20 @@ export function scaleNumbers(x, y , p = '') {
     return Math.abs(rawYValue) >= 1000 ? `${rawXValue.toExponential()} / ${rawYValue.toExponential()}` : `${rawYValue.toString()} / ${rawYValue.toString()}`
 }
 
+export function formatTime(t, forNode = false) {
+    if (t !== null) {
+        if (isNaN(t)) {
+            return t;
+        } else {
+            const tAbs = Math.abs(t);
+            const h = Math.floor(tAbs / 3600);
+            const m = Math.floor((tAbs % 3600) / 60);
+            // Re-Add "negativity" to time ticks only as string, so that if-cases work as intended
+            if (h == 0) return `${forNode && m != 0 ? "-" : ""}${m}m`;
+            else if (m == 0) return `${forNode ? "-" : ""}${h}h`;
+            else return `${forNode ? "-" : ""}${h}:${m}h`;
+        }
+    }
+}
+
 // export const dateToUnixEpoch = (rfc3339) => Math.floor(Date.parse(rfc3339) / 1000);