From 1771883754e6415dcff3bbbd1735a3792d6f86e2 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 29 Aug 2023 15:58:25 +0200
Subject: [PATCH] fix missing key tag on piecharts

---
 web/frontend/src/Status.root.svelte | 53 +++++++++++++++--------------
 1 file changed, 28 insertions(+), 25 deletions(-)

diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 3192dbf..4e7269a 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -57,7 +57,6 @@
     })
 
     const paging = { itemsPerPage: 10, page: 1 }; // Top 10
-    // const sorting = { field: "totalCores", order: "DESC" };
     $: topUserQuery = queryStore({
         client: client,
         query: gql`
@@ -203,18 +202,20 @@
         <Col class="p-2">
             <div bind:clientWidth={colWidth1}>
                 <h4 class="text-center">Top Users on {cluster.charAt(0).toUpperCase() + cluster.slice(1)}</h4>
-                {#if $topUserQuery.fetching}
-                    <Spinner/>
-                {:else if $topUserQuery.error}
-                    <Card body color="danger">{$topUserQuery.error.message}</Card>
-                {:else}                    
-                    <Pie
-                        size={colWidth1}
-                        sliceLabel={topUserSelection.label}
-                        quantities={$topUserQuery.data.topUser.map((tu) => tu[topUserSelection.key])}
-                        entities={$topUserQuery.data.topUser.map((tu) => tu.id)}
-                    />
-                {/if}
+                {#key $topUserQuery.data}
+                    {#if $topUserQuery.fetching}
+                        <Spinner/>
+                    {:else if $topUserQuery.error}
+                        <Card body color="danger">{$topUserQuery.error.message}</Card>
+                    {:else}                    
+                        <Pie
+                            size={colWidth1}
+                            sliceLabel={topUserSelection.label}
+                            quantities={$topUserQuery.data.topUser.map((tu) => tu[topUserSelection.key])}
+                            entities={$topUserQuery.data.topUser.map((tu) => tu.id)}
+                        />
+                    {/if}
+                {/key}
             </div>
         </Col>
         <Col class="px-4 py-2">
@@ -251,18 +252,20 @@
         </Col>
         <Col class="p-2">
             <h4 class="text-center">Top Projects on {cluster.charAt(0).toUpperCase() + cluster.slice(1)}</h4>
-            {#if $topProjectQuery.fetching}
-                <Spinner/>
-            {:else if $topProjectQuery.error}
-                <Card body color="danger">{$topProjectQuery.error.message}</Card>
-            {:else}
-                <Pie
-                    size={colWidth1}
-                    sliceLabel={topProjectSelection.label}
-                    quantities={$topProjectQuery.data.topProjects.map((tp) => tp[topProjectSelection.key])}
-                    entities={$topProjectQuery.data.topProjects.map((tp) => tp.id)}
-                />
-            {/if}
+            {#key $topProjectQuery.data}
+                {#if $topProjectQuery.fetching}
+                    <Spinner/>
+                {:else if $topProjectQuery.error}
+                    <Card body color="danger">{$topProjectQuery.error.message}</Card>
+                {:else}
+                    <Pie
+                        size={colWidth1}
+                        sliceLabel={topProjectSelection.label}
+                        quantities={$topProjectQuery.data.topProjects.map((tp) => tp[topProjectSelection.key])}
+                        entities={$topProjectQuery.data.topProjects.map((tp) => tp.id)}
+                    />
+                {/if}
+            {/key}
         </Col>
         <Col class="px-4 py-2">
             {#key $topProjectQuery.data}