From c21da6512adcf024731ffeae187d6db949f1f31b Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 24 Jan 2025 16:17:51 +0100
Subject: [PATCH] fix rerender by keys, disable resolution select if no
 resampling active

---
 web/frontend/src/Systems.root.svelte          | 30 +++---
 web/frontend/src/systems/NodeList.svelte      |  3 +
 .../src/systems/nodelist/NodeListRow.svelte   | 98 ++++++++++---------
 3 files changed, 69 insertions(+), 62 deletions(-)

diff --git a/web/frontend/src/Systems.root.svelte b/web/frontend/src/Systems.root.svelte
index b9457d9..4086667 100644
--- a/web/frontend/src/Systems.root.svelte
+++ b/web/frontend/src/Systems.root.svelte
@@ -93,7 +93,7 @@
 </script>
 
 <!-- ROW1: Tools-->
-<Row cols={{ xs: 2, lg: !displayNodeOverview ? 5 : 4 }} class="mb-3">
+<Row cols={{ xs: 2, lg: !displayNodeOverview ? (resampleConfig ? 5 : 4) : 4 }} class="mb-3">
   {#if $initq.data}
     <!-- List Metric Select Col-->
     {#if !displayNodeOverview}
@@ -110,19 +110,21 @@
           </Button>
         </InputGroup>
       </Col>
-      <Col>
-        <InputGroup>
-          <InputGroupText><Icon name="plus-slash-minus" /></InputGroupText>
-          <InputGroupText>Resolution</InputGroupText>
-          <Input type="select" bind:value={selectedResolution}>
-            {#each resampleResolutions as res}
-              <option value={res}
-                >{res} sec</option
-              >
-            {/each}
-          </Input>
-        </InputGroup>
-      </Col>
+      {#if resampleConfig}
+        <Col>
+          <InputGroup>
+            <InputGroupText><Icon name="plus-slash-minus" /></InputGroupText>
+            <InputGroupText>Resolution</InputGroupText>
+            <Input type="select" bind:value={selectedResolution}>
+              {#each resampleResolutions as res}
+                <option value={res}
+                  >{res} sec</option
+                >
+              {/each}
+            </Input>
+          </InputGroup>
+        </Col>
+      {/if}
     {/if}
     <!-- Node Col-->
     <Col class="mt-2 mt-lg-0">
diff --git a/web/frontend/src/systems/NodeList.svelte b/web/frontend/src/systems/NodeList.svelte
index f9aae29..ad64a1f 100644
--- a/web/frontend/src/systems/NodeList.svelte
+++ b/web/frontend/src/systems/NodeList.svelte
@@ -181,6 +181,9 @@
             style="padding-top: {headerPaddingTop}px;"
           >
             {cluster} Node Info
+            {#if $nodesQuery.fetching}
+              <Spinner size="sm" style="margin-left:10px;" secondary />
+            {/if}
           </th>
 
           {#each selectedMetrics as metric (metric)}
diff --git a/web/frontend/src/systems/nodelist/NodeListRow.svelte b/web/frontend/src/systems/nodelist/NodeListRow.svelte
index 329f960..a1e4a54 100644
--- a/web/frontend/src/systems/nodelist/NodeListRow.svelte
+++ b/web/frontend/src/systems/nodelist/NodeListRow.svelte
@@ -133,53 +133,55 @@
     {/if}
   </td>
   {#each refinedData as metricData (metricData.data.name)}
-    <td>
-      {#if metricData?.disabled}
-        <Card body class="mx-3" color="info"
-          >Metric disabled for subcluster <code
-            >{metricData.data.name}:{nodeData.subCluster}</code
-          ></Card
-        >
-      {:else if !!metricData.data?.metric.statisticsSeries}
-        <!-- "No Data"-Warning included in MetricPlot-Component -->
-        <MetricPlot
-          {cluster}
-          subCluster={nodeData.subCluster}
-          metric={metricData.data.name}
-          scope={metricData.data.scope}
-          timestep={metricData.data.metric.timestep}
-          series={metricData.data.metric.series}
-          statisticsSeries={metricData.data?.metric.statisticsSeries}
-          useStatsSeries={!!metricData.data?.metric.statisticsSeries}
-          height={175}
-          forNode
-        />
-        <div class="my-2"/>
-        {#key extendedLegendData}
-          <MetricPlot
-            {cluster}
-            subCluster={nodeData.subCluster}
-            metric={metricData.data.name}
-            scope={metricData.data.scope}
-            timestep={metricData.data.metric.timestep}
-            series={metricData.data.metric.series}
-            height={175}
-            {extendedLegendData}
-            forNode
-          />
-        {/key}
-      {:else}
-        <MetricPlot
-          {cluster}
-          subCluster={nodeData.subCluster}
-          metric={metricData.data.name}
-          scope={metricData.data.scope}
-          timestep={metricData.data.metric.timestep}
-          series={metricData.data.metric.series}
-          height={375}
-          forNode
-        />
-      {/if}
-    </td>
+    {#key metricData}
+      <td>
+        {#if metricData?.disabled}
+          <Card body class="mx-3" color="info"
+            >Metric disabled for subcluster <code
+              >{metricData.data.name}:{nodeData.subCluster}</code
+            ></Card
+          >
+        {:else if !!metricData.data?.metric.statisticsSeries}
+          <!-- "No Data"-Warning included in MetricPlot-Component -->
+            <MetricPlot
+              {cluster}
+              subCluster={nodeData.subCluster}
+              metric={metricData.data.name}
+              scope={metricData.data.scope}
+              timestep={metricData.data.metric.timestep}
+              series={metricData.data.metric.series}
+              statisticsSeries={metricData.data?.metric.statisticsSeries}
+              useStatsSeries={!!metricData.data?.metric.statisticsSeries}
+              height={175}
+              forNode
+            />
+          <div class="my-2"/>
+          {#key extendedLegendData}
+            <MetricPlot
+              {cluster}
+              subCluster={nodeData.subCluster}
+              metric={metricData.data.name}
+              scope={metricData.data.scope}
+              timestep={metricData.data.metric.timestep}
+              series={metricData.data.metric.series}
+              height={175}
+              {extendedLegendData}
+              forNode
+            />
+          {/key}
+        {:else}
+            <MetricPlot
+              {cluster}
+              subCluster={nodeData.subCluster}
+              metric={metricData.data.name}
+              scope={metricData.data.scope}
+              timestep={metricData.data.metric.timestep}
+              series={metricData.data.metric.series}
+              height={375}
+              forNode
+            />
+        {/if}
+      </td>
+    {/key}
   {/each}
 </tr>