From e94b2505414e78d0f6c464b821082430cda25384 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Thu, 26 Jun 2025 12:29:48 +0200
Subject: [PATCH] Migrate nodeList subcomponents

---
 web/frontend/src/generic/PlotGrid.svelte      | 22 ++++-----
 .../generic/select/DoubleRangeSlider.svelte   |  5 +++
 .../src/systems/nodelist/NodeInfo.svelte      | 35 +++++++++------
 .../src/systems/nodelist/NodeListRow.svelte   | 45 ++++++++++---------
 4 files changed, 62 insertions(+), 45 deletions(-)

diff --git a/web/frontend/src/generic/PlotGrid.svelte b/web/frontend/src/generic/PlotGrid.svelte
index 213041e..3647344 100644
--- a/web/frontend/src/generic/PlotGrid.svelte
+++ b/web/frontend/src/generic/PlotGrid.svelte
@@ -6,18 +6,18 @@
     - `items [Any]`: List of plot components to render
  -->
 
- <script>
-    import {
-        Row,
-        Col,
-    } from "@sveltestrap/sveltestrap";
+<script>
+  import {
+    Row,
+    Col,
+  } from "@sveltestrap/sveltestrap";
 
-    /* Svelte 5 Props */
-    let {
-      items,
-      itemsPerRow,
-      gridContent
-    } = $props();
+  /* Svelte 5 Props */
+  let {
+    items,
+    itemsPerRow,
+    gridContent
+  } = $props();
 </script>
 
 <Row cols={{ xs: 1, sm: 2, md: 3, lg: itemsPerRow}}>
diff --git a/web/frontend/src/generic/select/DoubleRangeSlider.svelte b/web/frontend/src/generic/select/DoubleRangeSlider.svelte
index 0022673..7554bdf 100644
--- a/web/frontend/src/generic/select/DoubleRangeSlider.svelte
+++ b/web/frontend/src/generic/select/DoubleRangeSlider.svelte
@@ -18,6 +18,7 @@ Changes #2: Rewritten for Svelte 5, removed bodyHandler
  -->
 
 <script>
+	/* Svelte 5 Props */
 	let {
 		sliderMin,
 		sliderMax,
@@ -26,6 +27,7 @@ Changes #2: Rewritten for Svelte 5, removed bodyHandler
 		changeRange
 	} = $props();
 
+	/* State Init */
 	let pendingValues = $state([fromPreset, toPreset]);
 	let sliderFrom = $state(Math.max(((fromPreset  == null ? sliderMin : fromPreset)  - sliderMin) / (sliderMax - sliderMin), 0.));
 	let sliderTo = $state(Math.min(((toPreset == null ? sliderMin : toPreset) - sliderMin) / (sliderMax - sliderMin), 1.));
@@ -34,7 +36,10 @@ Changes #2: Rewritten for Svelte 5, removed bodyHandler
 	let leftHandle = $state();
 	let sliderMain = $state();
 
+	/* Var Init */
 	let timeoutId = null;
+
+	/* Functions */
 	function queueChangeEvent() {
 		if (timeoutId !== null) {
 			clearTimeout(timeoutId)
diff --git a/web/frontend/src/systems/nodelist/NodeInfo.svelte b/web/frontend/src/systems/nodelist/NodeInfo.svelte
index 1230ce7..9fba9f4 100644
--- a/web/frontend/src/systems/nodelist/NodeInfo.svelte
+++ b/web/frontend/src/systems/nodelist/NodeInfo.svelte
@@ -16,28 +16,37 @@
     CardBody,
     Input,
     InputGroup,
-    InputGroupText, } from "@sveltestrap/sveltestrap";
+    InputGroupText,
+  } from "@sveltestrap/sveltestrap";
   import { 
     scramble,
-    scrambleNames, } from "../../generic/utils.js";
+    scrambleNames,
+  } from "../../generic/utils.js";
 
-  export let cluster;
-  export let subCluster
-  export let hostname;
-  export let dataHealth;
-  export let nodeJobsData = null;
+  /* Svelte 5 Props */
+  let {
+    cluster,
+    subCluster,
+    hostname,
+    dataHealth,
+    nodeJobsData = null,
+  } = $props();
 
+  /* Const Init */
   // Not at least one returned, selected metric: NodeHealth warning
   const healthWarn = !dataHealth.includes(true);
   // At least one non-returned selected metric: Metric config error?
   const metricWarn = dataHealth.includes(false);
 
-  let userList;
-  let projectList;
-  $: if (nodeJobsData) {
-    userList = Array.from(new Set(nodeJobsData.jobs.items.map((j) => scrambleNames ? scramble(j.user) : j.user))).sort((a, b) => a.localeCompare(b));
-    projectList = Array.from(new Set(nodeJobsData.jobs.items.map((j) => scrambleNames ? scramble(j.project) : j.project))).sort((a, b) => a.localeCompare(b));
-  }
+  /* Derived */
+  const userList = $derived(nodeJobsData
+    ? Array.from(new Set(nodeJobsData.jobs.items.map((j) => scrambleNames ? scramble(j.user) : j.user))).sort((a, b) => a.localeCompare(b))
+    : []
+  );
+  const projectList = $derived(nodeJobsData
+    ? Array.from(new Set(nodeJobsData.jobs.items.map((j) => scrambleNames ? scramble(j.project) : j.project))).sort((a, b) => a.localeCompare(b)) 
+    : []);
+
 </script>
 
 <Card class="pb-3">
diff --git a/web/frontend/src/systems/nodelist/NodeListRow.svelte b/web/frontend/src/systems/nodelist/NodeListRow.svelte
index 7adb282..571ca63 100644
--- a/web/frontend/src/systems/nodelist/NodeListRow.svelte
+++ b/web/frontend/src/systems/nodelist/NodeListRow.svelte
@@ -18,10 +18,14 @@
   import MetricPlot from "../../generic/plots/MetricPlot.svelte";
   import NodeInfo from "./NodeInfo.svelte";
 
-  export let cluster;
-  export let nodeData;
-  export let selectedMetrics;
+  /* Svelte 5 Props */
+  let {
+    cluster,
+    nodeData,
+    selectedMetrics,
+  } = $props();
 
+  /* Const Init */
   const client = getContextClient();
   const paging = { itemsPerPage: 50, page: 1 };
   const sorting = { field: "startTime", type: "col", order: "DESC" };
@@ -30,7 +34,6 @@
     { node: { contains: nodeData.host } },
     { state: ["running"] },
   ];
-
   const nodeJobsQuery = gql`
     query (
       $filter: [JobFilter!]!
@@ -53,13 +56,19 @@
     }
   `;
 
-  $: nodeJobsData = queryStore({
-    client: client,
-    query: nodeJobsQuery,
-    variables: { paging, sorting, filter },
-  });
+  /* Derived */
+  const nodeJobsData = $derived(queryStore({
+      client: client,
+      query: nodeJobsQuery,
+      variables: { paging, sorting, filter },
+    })
+  );
 
-  // Helper
+  let extendedLegendData = $derived($nodeJobsData?.data ? buildExtendedLegend() : null);
+  let refinedData = $derived(nodeData?.metrics ? sortAndSelectScope(nodeData.metrics) : null);
+  let dataHealth = $derived(refinedData.filter((rd) => rd.disabled === false).map((enabled) => (enabled.data.metric.series.length > 0)));
+
+  /* Functions */
   const selectScope = (nodeMetrics) =>
     nodeMetrics.reduce(
       (a, b) =>
@@ -89,15 +98,8 @@
         }
       });
 
-  let refinedData;
-  let dataHealth;
-  $: if (nodeData?.metrics) {
-    refinedData = sortAndSelectScope(nodeData?.metrics)
-    dataHealth = refinedData.filter((rd) => rd.disabled === false).map((enabled) => (enabled.data.metric.series.length > 0))
-  }
-
-  let extendedLegendData = null;
-  $: if ($nodeJobsData?.data) {
+  function buildExtendedLegend() {
+    let pendingExtendedLegendData = null
     // Build Extended for allocated nodes [Commented: Only Build extended Legend For Shared Nodes]
     if ($nodeJobsData.data.jobs.count >= 1) { // "&& !$nodeJobsData.data.jobs.items[0].exclusive)"
       const accSet = Array.from(new Set($nodeJobsData.data.jobs.items
@@ -107,11 +109,11 @@
         )
       )).flat(2)
 
-      extendedLegendData = {}
+      pendingExtendedLegendData = {};
       for (const accId of accSet) {
         const matchJob = $nodeJobsData.data.jobs.items.find((i) => i.resources.find((r) => r.accelerators.includes(accId)))
         const matchUser = matchJob?.user ? matchJob.user : null
-        extendedLegendData[accId] = {
+        pendingExtendedLegendData[accId] = {
           user: (scrambleNames && matchUser)
             ? scramble(matchUser) 
             : (matchUser ? matchUser : '-'),
@@ -120,6 +122,7 @@
       }
       // Theoretically extendable for hwthreadIDs
     }
+    return pendingExtendedLegendData;
   }
 </script>