add init context to nodeOverview, add additional key for plot rerender

web/frontend/src/systems/NodeOverview.svelte

@@ -11,6 +11,7 @@
 -->
 
  <script>
+  import { getContext } from "svelte";
   import { queryStore, gql, getContextClient } from "@urql/svelte";
   import { Row, Col, Card, Spinner } from "@sveltestrap/sveltestrap";
   import { checkMetricDisabled } from "../generic/utils.js";
@@ -27,6 +28,7 @@
   } = $props();
 
   /* Const Init */
+  const initialized = getContext("initialized");
   const client = getContextClient();
 
   /* Derived */
@@ -72,11 +74,11 @@
     },
   }));
 
-  const mappedData = $derived(handleQueryData($nodesQuery?.data));
+  const mappedData = $derived(handleQueryData($initialized, $nodesQuery?.data));
   const filteredData = $derived(mappedData.filter((h) => h.host.includes(hostnameFilter)));
 
   /* Functions */
-  function handleQueryData(queryData) {
+  function handleQueryData(isInitialized, queryData) {
     let rawData = []
     if (queryData) { 
       rawData = queryData.nodeMetrics.filter((h) => {
@@ -96,11 +98,7 @@
         data: h.metrics.filter(
           (m) => m?.name == selectedMetric && m.scope == "node",
         ),
-        disabled: checkMetricDisabled(
-          selectedMetric,
-          cluster,
-          h.subCluster,
-        ),
+        disabled: isInitialized ? checkMetricDisabled(selectedMetric, cluster, h.subCluster) : null,
       }))
       .sort((a, b) => a.host.localeCompare(b.host))
     }
@@ -124,6 +122,7 @@
 {:else if filteredData?.length > 0}
   <!-- PlotGrid flattened into this component -->
   <Row cols={{ xs: 1, sm: 2, md: 3, lg: ccconfig.plot_view_plotsPerRow}}>
+    {#key selectedMetric}
       {#each filteredData as item (item.host)}
         <Col class="px-1">
           <h4 style="width: 100%; text-align: center;">
@@ -133,16 +132,16 @@
               >{item.host} ({item.subCluster})</a
             >
           </h4>
-        {#key item?.disabled}
-          {#if item?.disabled === true}
+          {#if item.disabled === true}
             <Card body class="mx-3" color="info"
               >Metric disabled for subcluster <code
                 >{selectedMetric}:{item.subCluster}</code
               ></Card
             >
-          {:else if item?.disabled === false}
+          {:else if item.disabled === false}
             <!-- "No Data"-Warning included in MetricPlot-Component   -->
             <!-- #key: X-axis keeps last selected timerange otherwise -->
+            {#key item.data[0].metric.series[0].data.length}
               <MetricPlot
                 timestep={item.data[0].metric.timestep}
                 series={item.data[0].metric.series}
@@ -151,15 +150,15 @@
                 subCluster={item.subCluster}
                 forNode
               />
-          {:else}
-            <Card body class="mx-3"
-              >Metric Query Empty: Please Reload Page <code
-                >{selectedMetric}:{item.subCluster}</code
-              ></Card
-            >
-          {/if}
             {/key}
+          {:else if item.disabled === null}
+            <Card body class="mx-3" color="info">
+              Global Metric List Not Initialized
+              Can not determine {selectedMetric} availability: Please Reload Page
+            </Card>
+          {/if}
         </Col>
       {/each}
+    {/key}
   </Row>
 {/if}