From 591cd9fd66fe7d15d9cf0686f5a976cdb39362a5 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Fri, 14 Nov 2025 11:28:48 +0100
Subject: [PATCH] review analysis view layout, add title with info

---
 web/frontend/src/Analysis.root.svelte              | 14 +++++++++++---
 .../src/generic/plots/RooflineHeatmap.svelte       |  4 ++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/web/frontend/src/Analysis.root.svelte b/web/frontend/src/Analysis.root.svelte
index 8d9972a..808d2aa 100644
--- a/web/frontend/src/Analysis.root.svelte
+++ b/web/frontend/src/Analysis.root.svelte
@@ -370,7 +370,7 @@
     </Col>
   </Row>
 {:else if $statsQuery.data}
-  <Row cols={3} class="mb-4">
+  <Row cols={3} style="margin-bottom: 2rem;">
     <Col>
       <Table>
         <tr>
@@ -419,7 +419,7 @@
           {:else}
             <Pie
               canvasId={`pie-${groupSelection.key}`}
-              size={colWidth1}
+              size={colWidth1 / 1.9}
               sliceLabel={sortSelection.label}
               quantities={$topQuery.data.topList.map(
                 (t) => t[sortSelection.key],
@@ -490,11 +490,19 @@
       {:else if $rooflineQuery.error}
         <Card body color="danger">{$rooflineQuery.error.message}</Card>
       {:else if $rooflineQuery.data && cluster}
+        <div class="d-flex justify-content-center align-baseline">
+          <h5>Job Roofline Heatmap</h5>
+          <Icon
+            style="cursor:help; margin-left:0.5rem;"
+            name="info-circle"
+            title="Most Populated Areas By Selected Jobs' Average Values"
+          />
+        </div>
         <div bind:clientWidth={colWidth2}>
           {#key $rooflineQuery.data}
             <RooflineHeatmap
               width={colWidth2}
-              height={300}
+              height={280}
               tiles={$rooflineQuery.data.rooflineHeatmap}
               subCluster={cluster.subClusters.length == 1
                 ? cluster.subClusters[0]
diff --git a/web/frontend/src/generic/plots/RooflineHeatmap.svelte b/web/frontend/src/generic/plots/RooflineHeatmap.svelte
index 91cda22..ff2ba84 100644
--- a/web/frontend/src/generic/plots/RooflineHeatmap.svelte
+++ b/web/frontend/src/generic/plots/RooflineHeatmap.svelte
@@ -34,7 +34,7 @@
   const paddingLeft = 40;
   const paddingRight = 10;
   const paddingTop = 10;
-  const paddingBottom = 5;
+  const paddingBottom = 40;
 
   /* Var Init */
   let timeoutId = null;
@@ -124,7 +124,7 @@
     if (data.xLabel) {
       ctx.font = `${labelFontSize}px ${fontFamily}`
       let textWidth = ctx.measureText(data.xLabel).width
-      ctx.fillText(data.xLabel, Math.floor((width / 2) - (textWidth / 2)), height - 20)
+      ctx.fillText(data.xLabel, Math.floor((width / 2) - (textWidth / 2)), height - paddingBottom + 30)
     }
 
     ctx.textAlign = 'center'