review analysis view layout, add title with info

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]

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'