Migrate nodeList subcomponents

web/frontend/src/generic/PlotGrid.svelte

@@ -6,7 +6,7 @@
     - `items [Any]`: List of plot components to render
  -->
 
- <script>
+<script>
   import {
     Row,
     Col,

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)

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;
+  /* Svelte 5 Props */
-  export let subCluster
+  let {
-  export let hostname;
+    cluster,
-  export let dataHealth;
+    subCluster,
-  export let nodeJobsData = null;
+    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;
+  /* Derived */
-  let projectList;
+  const userList = $derived(nodeJobsData
-  $: if (nodeJobsData) {
+    ? Array.from(new Set(nodeJobsData.jobs.items.map((j) => scrambleNames ? scramble(j.user) : j.user))).sort((a, b) => a.localeCompare(b))
-    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));
+  );
-  }
+  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">

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;
+  /* Svelte 5 Props */
-  export let nodeData;
+  let {
-  export let selectedMetrics;
+    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({
+  /* 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;
+  function buildExtendedLegend() {
-  let dataHealth;
+    let pendingExtendedLegendData = null
-  $: 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) {
     // 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>