From 5616801f3e117ac406fde845431e8ab93b27eba7 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Thu, 5 Feb 2026 10:33:20 +0100
Subject: [PATCH] review user vinformation block, reorder reactive var in
 jobList

---
 web/frontend/src/User.root.svelte             | 56 +++++++++++++++++--
 .../src/generic/joblist/JobListRow.svelte     |  2 +-
 web/frontend/src/generic/units.js             |  8 +--
 3 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/web/frontend/src/User.root.svelte b/web/frontend/src/User.root.svelte
index 669ca8bb..bb83ef91 100644
--- a/web/frontend/src/User.root.svelte
+++ b/web/frontend/src/User.root.svelte
@@ -19,7 +19,8 @@
     Spinner,
     Input,
     InputGroup,
-    InputGroupText
+    InputGroupText,
+    Tooltip
   } from "@sveltestrap/sveltestrap";
   import {
     queryStore,
@@ -32,6 +33,10 @@
     scramble,
     scrambleNames,
   } from "./generic/utils.js";
+  import {
+    formatNumber,
+    formatDurationTime
+  } from "./generic/units.js";
   import JobList from "./generic/JobList.svelte";
   import JobCompare from "./generic/JobCompare.svelte";
   import Filters from "./generic/Filters.svelte";
@@ -56,6 +61,7 @@
   const durationBinOptions = ["1m","10m","1h","6h","12h"];
   const metricBinOptions = [10, 20, 50, 100];
   const matchedJobCompareLimit = 500;
+  const shortDuration = ccconfig.jobList_hideShortRunningJobs; // Always configured
 
   /* State Init */
   // List & Control Vars
@@ -108,6 +114,7 @@
             shortJobs
             totalWalltime
             totalCoreHours
+            totalAccHours
             histDuration {
               count
               value
@@ -133,6 +140,7 @@
       variables: { jobFilters, selectedHistograms, numDurationBins, numMetricBins },
     })
   );
+  const hasAccHours = $derived($stats?.data?.jobsStatistics[0]?.totalAccHours != 0);
 
   /* Functions */
   function resetJobSelection() {
@@ -290,20 +298,54 @@
             {/if}
             <tr>
               <th scope="row">Total Jobs</th>
-              <td>{$stats.data.jobsStatistics[0].totalJobs}</td>
+              <td>
+                <span style="cursor: help;" title="{$stats.data.jobsStatistics[0].totalJobs} Jobs">
+                  {formatNumber($stats.data.jobsStatistics[0].totalJobs)} Jobs
+                </span>
+              </td>
             </tr>
             <tr>
-              <th scope="row">Short Jobs</th>
-              <td>{$stats.data.jobsStatistics[0].shortJobs}</td>
+              <th scope="row">        
+                <span class="mr-1">
+                  Short Jobs
+                 <Icon name="info-circle" id="shortjobs-info" style="margin-left:5px; cursor:help;"/>
+                </span>
+                <Tooltip target={`shortjobs-info`} placement="right">
+                  Job duration less than {formatDurationTime(shortDuration)}
+                </Tooltip>
+              </th>
+              <td>
+                <span style="cursor: help;" title="{$stats.data.jobsStatistics[0].shortJobs} Jobs">
+                  {formatNumber($stats.data.jobsStatistics[0].shortJobs)} Jobs
+                </span>
+              </td>
             </tr>
             <tr>
               <th scope="row">Total Walltime</th>
-              <td>{$stats.data.jobsStatistics[0].totalWalltime}</td>
+              <td>
+                <span style="cursor: help;" title="{$stats.data.jobsStatistics[0].totalWalltime} Hours">
+                  {formatNumber($stats.data.jobsStatistics[0].totalWalltime)} Hours
+                </span>
+              </td>
             </tr>
             <tr>
               <th scope="row">Total Core Hours</th>
-              <td>{$stats.data.jobsStatistics[0].totalCoreHours}</td>
+              <td>
+                <span style="cursor: help;" title="{$stats.data.jobsStatistics[0].totalCoreHours} Hours">
+                  {formatNumber($stats.data.jobsStatistics[0].totalCoreHours)} Hours
+                </span>
+              </td>
             </tr>
+            {#if hasAccHours}
+              <tr>
+                <th scope="row">Total Accelerator Hours</th>
+                <td>
+                  <span style="cursor: help;" title="{$stats.data.jobsStatistics[0].totalAccHours} Hours">
+                    {formatNumber($stats.data.jobsStatistics[0].totalAccHours)} Hours
+                  </span>
+                </td>
+              </tr>
+            {/if}
           </tbody>
         </Table>
       </Col>
@@ -316,6 +358,7 @@
             xunit="Runtime"
             ylabel="Number of Jobs"
             yunit="Jobs"
+            height={hasAccHours ? 290 : 250}
             usesBins
             xtime
           />
@@ -330,6 +373,7 @@
             xunit="Nodes"
             ylabel="Number of Jobs"
             yunit="Jobs"
+            height={hasAccHours ? 290 : 250}
           />
         {/key}
       </Col>
diff --git a/web/frontend/src/generic/joblist/JobListRow.svelte b/web/frontend/src/generic/joblist/JobListRow.svelte
index 9502a2f8..93fa496b 100644
--- a/web/frontend/src/generic/joblist/JobListRow.svelte
+++ b/web/frontend/src/generic/joblist/JobListRow.svelte
@@ -79,7 +79,6 @@
 
   /* Derived */
   const jobId = $derived(job?.id);
-  const refinedData = $derived($metricsQuery?.data?.jobMetrics ? sortAndSelectScope($metricsQuery.data.jobMetrics) : []);
   const scopes = $derived.by(() => {
     if (job.numNodes == 1) {
       if (job.numAcc >= 1) return ["core", "accelerator"];
@@ -95,6 +94,7 @@
       variables: { id: jobId, metrics, scopes, selectedResolution },
     })
   );
+  const refinedData = $derived($metricsQuery?.data?.jobMetrics ? sortAndSelectScope($metricsQuery.data.jobMetrics) : []);
 
   /* Effects */
   $effect(() => {
diff --git a/web/frontend/src/generic/units.js b/web/frontend/src/generic/units.js
index 540a1a32..951ecbe8 100644
--- a/web/frontend/src/generic/units.js
+++ b/web/frontend/src/generic/units.js
@@ -32,10 +32,6 @@ export function scaleNumber(x, p = '') {
     }
 }
 
-export function roundTwoDigits(x) {
-    return Math.round(x * 100) / 100
-}
-
 export function scaleNumbers(x, y, p = '') {
     const oldPower  = power[prefix.indexOf(p)]
     const rawXValue = x * oldPower 
@@ -77,6 +73,10 @@ export function formatUnixTime(t, withDate = false) {
     }
 }
 
+export function roundTwoDigits(x) {
+    return Math.round(x * 100) / 100
+}
+
 // const equalsCheck = (a, b) => {
 //   return JSON.stringify(a) === JSON.stringify(b);
 // }