From d7aefe0cf0b206a288bff8330d0814114f55d025 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 28 Feb 2025 14:55:32 +0100
Subject: [PATCH] move user names in top lists to tooltip

---
 web/frontend/src/Analysis.root.svelte | 12 ++++++++++--
 web/frontend/src/Status.root.svelte   | 12 ++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/web/frontend/src/Analysis.root.svelte b/web/frontend/src/Analysis.root.svelte
index 1617ccd..861c0ec 100644
--- a/web/frontend/src/Analysis.root.svelte
+++ b/web/frontend/src/Analysis.root.svelte
@@ -20,6 +20,7 @@
     Card,
     Table,
     Icon,
+    Tooltip
   } from "@sveltestrap/sveltestrap";
   import {
     init,
@@ -425,11 +426,18 @@
               <tr>
                 <td><Icon name="circle-fill" style="color: {colors[i]};" /></td>
                 {#if groupSelection.key == "user"}
-                  <th scope="col"
+                  <th scope="col" id="topName-{te.id}"
                     ><a href="/monitoring/user/{te.id}?cluster={clusterName}"
-                      >{te.id} {te?.name ? `(${te.name})` : ''}</a
+                      >{te.id}</a
                     ></th
                   >
+                  {#if te?.name}
+                    <Tooltip
+                      target={`topName-${te.id}`}
+                      placement="left"
+                      >{te.name}</Tooltip
+                    >
+                  {/if}
                 {:else}
                   <th scope="col"
                     ><a
diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index a310421..5494f14 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -19,6 +19,7 @@
     Progress,
     Icon,
     Button,
+    Tooltip
   } from "@sveltestrap/sveltestrap";
   import {
     queryStore,
@@ -516,12 +517,19 @@
             {#each $topUserQuery.data.topUser as tu, i}
               <tr>
                 <td><Icon name="circle-fill" style="color: {colors[i]};" /></td>
-                <th scope="col"
+                <th scope="col" id="topName-{tu.id}"
                   ><a
                     href="/monitoring/user/{tu.id}?cluster={cluster}&state=running"
-                    >{tu.id} {tu?.name ? `(${tu.name})` : ''}</a
+                    >{tu.id}</a
                   ></th
                 >
+                {#if tu?.name}
+                  <Tooltip
+                    target={`topName-${tu.id}`}
+                    placement="left"
+                    >{tu.name}</Tooltip
+                  >
+                {/if}
                 <td>{tu[topUserSelection.key]}</td>
               </tr>
             {/each}