final fix render race condition if metrics change in nodeList

web/frontend/src/Systems.root.svelte

@@ -269,7 +269,7 @@
     <NodeOverview {cluster} {ccconfig} {selectedMetric} {from} {to} {hostnameFilter} {hoststateFilter}/>
   {:else}
     <!-- ROW2-2: Node List (Grid Included)-->
-    <NodeList {cluster} {subCluster} {ccconfig} {selectedMetrics} {selectedResolution} {hostnameFilter} {hoststateFilter} {from} {to} {presetSystemUnits}/>
+    <NodeList {cluster} {subCluster} {ccconfig} pendingSelectedMetrics={selectedMetrics} {selectedResolution} {hostnameFilter} {hoststateFilter} {from} {to} {presetSystemUnits}/>
   {/if}
 {/if}
 

web/frontend/src/systems/NodeList.svelte

@@ -5,7 +5,7 @@
   - `cluster String`: The nodes' cluster
   - `subCluster String`: The nodes' subCluster [Default: ""]
   - `ccconfig Object?`: The ClusterCockpit Config Context [Default: null]
-  - `selectedMetrics [String]`: The array of selected metrics [Default []]
+  - `pendingSelectedMetrics [String]`: The array of selected metrics [Default []]
   - `selectedResolution Number?`: The selected data resolution [Default: 0]
   - `hostnameFilter String?`: The active hostnamefilter [Default: ""]
   - `hoststateFilter String?`: The active hoststatefilter [Default: ""]
@@ -27,7 +27,7 @@
     cluster,
     subCluster = "",
     ccconfig = null,
-    selectedMetrics = [],
+    pendingSelectedMetrics = [],
     selectedResolution = 0,
     hostnameFilter = "",
     hoststateFilter = "",
@@ -94,6 +94,7 @@
 
   /* State Init */
   let nodes = $state([]);
+  let selectedMetrics = $state(pendingSelectedMetrics);
   let page = $state(1);
   let itemsPerPage = $state(usePaging ? (ccconfig?.nodeList_nodesPerPage || 10) : 10);
   let headerPaddingTop = $state(0);
@@ -110,7 +111,7 @@
       stateFilter: hoststateFilter,
       nodeFilter: hostnameFilter,
       scopes: ["core", "socket", "accelerator"],
-      metrics: selectedMetrics,
+      metrics: pendingSelectedMetrics,
       from: from.toISOString(),
       to: to.toISOString(),
       paging: paging,
@@ -140,15 +141,17 @@
   $effect(() => {
     if ($nodesQuery?.data) {
       untrack(() => {
-        handleNodes($nodesQuery?.data?.nodeMetricsList);
+        nodes = handleNodes($nodesQuery?.data?.nodeMetricsList);
+        matchedNodes = $nodesQuery?.data?.totalNodes || 0;
       });
+      selectedMetrics = [...pendingSelectedMetrics]; // Trigger Rerender in NodeListRow Only After Data is Fetched
     };
   });
 
   $effect(() => {
     // Triggers (Except Paging)
     from, to
-    selectedMetrics, selectedResolution
+    pendingSelectedMetrics, selectedResolution
     hostnameFilter, hoststateFilter
     // Continous Scroll: Paging if parameters change: Existing entries will not match new selections
     // Nodes Array Reset in HandleNodes func
@@ -162,17 +165,16 @@
     if (data) {
       if (usePaging) {
         // console.log('New Paging', $state.snapshot(paging))
-        nodes = [...data.items].sort((a, b) => a.host.localeCompare(b.host));
+        return [...data.items].sort((a, b) => a.host.localeCompare(b.host));
       } else {
         if ($state.snapshot(page) == 1) {
           // console.log('Page 1 Reset', [...data.items])
-          nodes = [...data.items].sort((a, b) => a.host.localeCompare(b.host));
+          return [...data.items].sort((a, b) => a.host.localeCompare(b.host));
         } else {
           // console.log('Add Nodes', $state.snapshot(nodes), [...data.items])
-          nodes = nodes.concat([...data.items])
+          return nodes.concat([...data.items])
         }
       }
-      matchedNodes = data.totalNodes;
     };
   };
 
@@ -228,7 +230,7 @@
             {/if}
           </th>
 
-          {#each selectedMetrics as metric (metric)}
+          {#each pendingSelectedMetrics as metric (metric)}
             <th
               class="position-sticky top-0 text-center"
               scope="col"
@@ -248,7 +250,7 @@
           </Row>
         {:else if $nodesQuery.fetching || !$nodesQuery.data}
           <tr>
-            <td colspan={selectedMetrics.length + 1}>
+            <td colspan={pendingSelectedMetrics.length + 1}>
               <div style="text-align:center;">
                 {#if !usePaging}
                   <p><b>

web/frontend/src/systems/nodelist/NodeListRow.svelte

@@ -128,6 +128,24 @@
     }
     return pendingExtendedLegendData;
   }
+
+  /* Inspect */
+  // $inspect(selectedMetrics).with((type, selectedMetrics) => {
+  //   console.log(type, 'selectedMetrics', selectedMetrics)
+	// });
+
+  // $inspect(nodeData).with((type, nodeData) => {
+  //   console.log(type, 'nodeData', nodeData)
+	// });
+
+  // $inspect(refinedData).with((type, refinedData) => {
+  //   console.log(type, 'refinedData', refinedData)
+	// });
+
+  // $inspect(dataHealth).with((type, dataHealth) => {
+  //   console.log(type, 'dataHealth', dataHealth)
+	// });
+
 </script>
 
 <tr>