Merge branch 'dev' into migrate_svelte5

web/frontend/src/Analysis.root.svelte

@@ -20,6 +20,7 @@
     Card,
     Table,
     Icon,
+    Tooltip
   } from "@sveltestrap/sveltestrap";
   import {
     init,
@@ -70,6 +71,8 @@
     ...new Set([...metricsInHistograms, ...metricsInScatterplots.flat()]),
   ];
 
+  $: clusterName = cluster?.name ? cluster.name : cluster;
+
   const sortOptions = [
     { key: "totalWalltime", label: "Walltime" },
     { key: "totalNodeHours", label: "Node Hours" },
@@ -159,6 +162,7 @@
           groupBy: $groupBy
         ) {
           id
+          name
           totalWalltime
           totalNodeHours
           totalCoreHours
@@ -423,15 +427,22 @@
               <tr>
                 <td><Icon name="circle-fill" style="color: {colors[i]};" /></td>
                 {#if groupSelection.key == "user"}
-                  <th scope="col"
-                    ><a href="/monitoring/user/{te.id}?cluster={cluster}"
+                  <th scope="col" id="topName-{te.id}"
+                    ><a href="/monitoring/user/{te.id}?cluster={clusterName}"
                       >{te.id}</a
                     ></th
                   >
+                  {#if te?.name}
+                    <Tooltip
+                      target={`topName-${te.id}`}
+                      placement="left"
+                      >{te.name}</Tooltip
+                    >
+                  {/if}
                 {:else}
                   <th scope="col"
                     ><a
-                      href="/monitoring/jobs/?cluster={cluster}&project={te.id}&projectMatch=eq"
+                      href="/monitoring/jobs/?cluster={clusterName}&project={te.id}&projectMatch=eq"
                       >{te.id}</a
                     ></th
                   >

web/frontend/src/Job.root.svelte

@@ -31,17 +31,16 @@
     init,
     groupByScope,
     checkMetricDisabled,
-    transformDataForRoofline,
   } from "./generic/utils.js";
   import Metric from "./job/Metric.svelte";
-  import StatsTable from "./job/StatsTable.svelte";
-  import JobSummary from "./job/JobSummary.svelte";
-  import EnergySummary from "./job/EnergySummary.svelte";
-  import ConcurrentJobs from "./generic/helper/ConcurrentJobs.svelte";
-  import PlotGrid from "./generic/PlotGrid.svelte";
-  import Roofline from "./generic/plots/Roofline.svelte";
-  import JobInfo from "./generic/joblist/JobInfo.svelte";
   import MetricSelection from "./generic/select/MetricSelection.svelte";
+  import JobInfo from "./generic/joblist/JobInfo.svelte";
+  import ConcurrentJobs from "./generic/helper/ConcurrentJobs.svelte";
+  import JobSummary from "./job/JobSummary.svelte";
+  import JobRoofline from "./job/JobRoofline.svelte";
+  import EnergySummary from "./job/EnergySummary.svelte";
+  import PlotGrid from "./generic/PlotGrid.svelte";
+  import StatsTable from "./job/StatsTable.svelte";
 
   export let dbid;
   export let username;
@@ -57,10 +56,10 @@
     selectedScopes = [];
 
   let plots = {},
-    roofWidth,
     statsTable
 
-  let missingMetrics = [],
+  let availableMetrics = new Set(),
+    missingMetrics = [],
     missingHosts = [],
     somethingMissing = false;
 
@@ -129,10 +128,8 @@
     if (!job) return;
 
     const pendingMetrics = [
-      "flops_any",
-      "mem_bw",
       ...(ccconfig[`job_view_selectedMetrics:${job.cluster}`] ||
-        $initq.data.globalMetrics.reduce((names, gm) => {
+      $initq.data.globalMetrics.reduce((names, gm) => {
           if (gm.availability.find((av) => av.cluster === job.cluster)) {
             names.push(gm.name);
           }
@@ -221,7 +218,7 @@
 </script>
 
 <Row class="mb-3">
-  <!-- Column 1: Job Info, Job Tags, Concurrent Jobs, Admin Message if found-->
+  <!-- Row 1, Column 1: Job Info, Job Tags, Concurrent Jobs, Admin Message if found-->
   <Col xs={12} md={6} xl={3} class="mb-3 mb-xxl-0">
     {#if $initq.error}
       <Card body color="danger">{$initq.error.message}</Card>
@@ -263,51 +260,30 @@
     {/if}
   </Col>
 
-  <!-- Column 2: Job Footprint, Polar Representation, Heuristic Summary -->
+  <!-- Row 1, Column 2: Job Footprint, Polar Representation -->
   <Col xs={12} md={6} xl={4} xxl={3} class="mb-3 mb-xxl-0">
     {#if $initq.error}
       <Card body color="danger">{$initq.error.message}</Card>
-    {:else if $initq?.data && $jobMetrics?.data}
-      <JobSummary job={$initq.data.job} jobMetrics={$jobMetrics.data.jobMetrics}/>
+    {:else if $initq?.data}
+      <JobSummary job={$initq.data.job}/>
     {:else}
       <Spinner secondary />
     {/if}
   </Col>
 
-  <!-- Column 3: Job Roofline; If footprint Enabled: full width, else half width -->
+  <!-- Row 1, Column 3: Job Roofline; If footprint Enabled: full width, else half width -->
   <Col xs={12} md={12} xl={5} xxl={6}>
-    {#if $initq.error || $jobMetrics.error}
-      <Card body color="danger">
-        <p>Initq Error: {$initq.error?.message}</p>
-        <p>jobMetrics Error: {$jobMetrics.error?.message}</p>
-      </Card>
-    {:else if $initq?.data && $jobMetrics?.data}
-      <Card style="height: 400px;">
-        <div bind:clientWidth={roofWidth}>
-          <Roofline
-            allowSizeChange={true}
-            width={roofWidth}
-            renderTime={true}
-            subCluster={$initq.data.clusters
-              .find((c) => c.name == $initq.data.job.cluster)
-              .subClusters.find((sc) => sc.name == $initq.data.job.subCluster)}
-            data={transformDataForRoofline(
-              $jobMetrics.data?.jobMetrics?.find(
-                (m) => m.name == "flops_any" && m.scope == "node",
-              )?.metric,
-              $jobMetrics.data?.jobMetrics?.find(
-                (m) => m.name == "mem_bw" && m.scope == "node",
-              )?.metric,
-            )}
-          />
-        </div>
-      </Card>
+    {#if $initq.error}
+      <Card body color="danger">{$initq.error.message}</Card>
+    {:else if $initq?.data}
+      <JobRoofline job={$initq.data.job} clusters={$initq.data.clusters}/>
     {:else}
-        <Spinner secondary />
+      <Spinner secondary />
     {/if}
   </Col>
 </Row>
 
+<!-- Row 2: Energy Information if available -->
 {#if $initq?.data && $initq.data.job.energyFootprint.length != 0}
   <Row class="mb-3">
     <Col>
@@ -316,13 +292,14 @@
   </Row>
 {/if}
 
+<!-- Metric Plot Grid -->
 <Card class="mb-3">
   <CardBody>
     <Row class="mb-2">
       {#if $initq.data}
         <Col xs="auto">
             <Button outline on:click={() => (isMetricsSelectionOpen = true)} color="primary">
-              Select Metrics
+              Select Metrics (Selected {selectedMetrics.length} of {availableMetrics.size} available)
             </Button>
         </Col>
       {/if}
@@ -376,6 +353,7 @@
   </CardBody>
 </Card>
 
+<!-- Statistcics Table -->
 <Row class="mb-3">
   <Col>
     {#if $initq.data}
@@ -459,6 +437,7 @@
     configName="job_view_selectedMetrics"
     bind:metrics={selectedMetrics}
     bind:isOpen={isMetricsSelectionOpen}
+    bind:allMetrics={availableMetrics}
   />
 {/if}
 

web/frontend/src/Status.root.svelte

@@ -19,6 +19,7 @@
     Progress,
     Icon,
     Button,
+    Tooltip
   } from "@sveltestrap/sveltestrap";
   import {
     queryStore,
@@ -75,11 +76,12 @@
     );
 
   let isHistogramSelectionOpen = false;
-  $: metricsInHistograms = cluster
-    ? ccconfig[`user_view_histogramMetrics:${cluster}`] || []
-    : ccconfig.user_view_histogramMetrics || [];
+  $: selectedHistograms = cluster
+    ? ccconfig[`user_view_histogramMetrics:${cluster}`] || ( ccconfig['user_view_histogramMetrics'] || [] )
+    : ccconfig['user_view_histogramMetrics'] || [];
 
   const client = getContextClient();
+  // Note: nodeMetrics are requested on configured $timestep resolution
   $: mainQuery = queryStore({
     client: client,
     query: gql`
@@ -89,7 +91,7 @@
         $metrics: [String!]
         $from: Time!
         $to: Time!
-        $metricsInHistograms: [String!]
+        $selectedHistograms: [String!]
       ) {
         nodeMetrics(
           cluster: $cluster
@@ -115,7 +117,7 @@
           }
         }
 
-        stats: jobsStatistics(filter: $filter, metrics: $metricsInHistograms) {
+        stats: jobsStatistics(filter: $filter, metrics: $selectedHistograms) {
           histDuration {
             count
             value
@@ -156,7 +158,7 @@
       from: from.toISOString(),
       to: to.toISOString(),
       filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
-      metricsInHistograms: metricsInHistograms,
+      selectedHistograms: selectedHistograms,
     },
   });
 
@@ -176,6 +178,7 @@
           groupBy: USER
         ) {
           id
+          name
           totalJobs
           totalNodes
           totalCores
@@ -515,12 +518,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}</a
                   ></th
                 >
+                {#if tu?.name}
+                  <Tooltip
+                    target={`topName-${tu.id}`}
+                    placement="left"
+                    >{tu.name}</Tooltip
+                  >
+                {/if}
                 <td>{tu[topUserSelection.key]}</td>
               </tr>
             {/each}
@@ -653,7 +663,7 @@
 
   <!-- Selectable Stats as Histograms : Average Values of Running Jobs -->
 
-  {#if metricsInHistograms}
+  {#if selectedHistograms}
     {#key $mainQuery.data.stats[0].histMetrics}
       <PlotGrid
         let:item
@@ -676,6 +686,6 @@
 
 <HistogramSelection
   bind:cluster
-  bind:metricsInHistograms
+  bind:selectedHistograms
   bind:isOpen={isHistogramSelectionOpen}
 />

web/frontend/src/Systems.root.svelte

@@ -77,6 +77,7 @@
     for (let sm of systemMetrics) {
       systemUnits[sm.name] = (sm?.unit?.prefix ? sm.unit.prefix : "") + (sm?.unit?.base ? sm.unit.base : "")
     }
+    if (!selectedMetric) selectedMetric = systemMetrics[0].name
   }
 
   $: loadMetrics($initialized)

web/frontend/src/User.root.svelte

@@ -68,16 +68,16 @@
   let durationBinOptions = ["1m","10m","1h","6h","12h"];
   let metricBinOptions = [10, 20, 50, 100];
 
-  $: metricsInHistograms = selectedCluster
-    ? ccconfig[`user_view_histogramMetrics:${selectedCluster}`] || []
-    : ccconfig.user_view_histogramMetrics || [];
+  $: selectedHistograms = selectedCluster
+    ? ccconfig[`user_view_histogramMetrics:${selectedCluster}`] || ( ccconfig['user_view_histogramMetrics'] || [] )
+    : ccconfig['user_view_histogramMetrics'] || [];
 
   const client = getContextClient();
   $: stats = queryStore({
     client: client,
     query: gql`
-      query ($jobFilters: [JobFilter!]!, $metricsInHistograms: [String!], $numDurationBins: String, $numMetricBins: Int) {
-        jobsStatistics(filter: $jobFilters, metrics: $metricsInHistograms, numDurationBins: $numDurationBins , numMetricBins: $numMetricBins ) {
+      query ($jobFilters: [JobFilter!]!, $selectedHistograms: [String!], $numDurationBins: String, $numMetricBins: Int) {
+        jobsStatistics(filter: $jobFilters, metrics: $selectedHistograms, numDurationBins: $numDurationBins , numMetricBins: $numMetricBins ) {
           totalJobs
           shortJobs
           totalWalltime
@@ -104,7 +104,7 @@
         }
       }
     `,
-    variables: { jobFilters, metricsInHistograms, numDurationBins, numMetricBins },
+    variables: { jobFilters, selectedHistograms, numDurationBins, numMetricBins },
   });
 
   onMount(() => filterComponent.updateFilters());
@@ -290,7 +290,7 @@
     </InputGroup>
   </Col>
 </Row>
-{#if metricsInHistograms?.length > 0}
+{#if selectedHistograms?.length > 0}
   {#if $stats.error}
     <Row>
       <Col>
@@ -357,6 +357,6 @@
 
 <HistogramSelection
   bind:cluster={selectedCluster}
-  bind:metricsInHistograms
+  bind:selectedHistograms
   bind:isOpen={isHistogramSelectionOpen}
 />

web/frontend/src/generic/filters/Cluster.svelte

@@ -43,26 +43,31 @@
   <ModalBody>
     {#if $initialized}
       <h4>Cluster</h4>
-      <ListGroup>
-        <ListGroupItem
-          disabled={disableClusterSelection}
-          active={pendingCluster == null}
-          on:click={() => ((pendingCluster = null), (pendingPartition = null))}
-        >
-          Any Cluster
-        </ListGroupItem>
-        {#each clusters as cluster}
+      {#if disableClusterSelection}
+        <Button color="info" class="w-100 mb-2" disabled><b>Info: Cluster Selection Disabled in This View</b></Button>
+        <Button outline color="primary" class="w-100 mb-2" disabled><b>Selected Cluster: {cluster}</b></Button>
+      {:else}
+        <ListGroup>
           <ListGroupItem
             disabled={disableClusterSelection}
-            active={pendingCluster == cluster.name}
-            on:click={() => (
-              (pendingCluster = cluster.name), (pendingPartition = null)
-            )}
+            active={pendingCluster == null}
+            on:click={() => ((pendingCluster = null), (pendingPartition = null))}
           >
-            {cluster.name}
+            Any Cluster
           </ListGroupItem>
-        {/each}
-      </ListGroup>
+          {#each clusters as cluster}
+            <ListGroupItem
+              disabled={disableClusterSelection}
+              active={pendingCluster == cluster.name}
+              on:click={() => (
+                (pendingCluster = cluster.name), (pendingPartition = null)
+              )}
+            >
+              {cluster.name}
+            </ListGroupItem>
+          {/each}
+        </ListGroup>
+      {/if}
     {/if}
     {#if $initialized && pendingCluster != null}
       <br />

web/frontend/src/generic/plots/Polar.svelte

@@ -2,123 +2,75 @@
     @component Polar Plot based on chart.js Radar
 
     Properties:
-    - `footprintData [Object]?`: job.footprint content, evaluated in regards to peak config in jobSummary.svelte [Default: null]
-    - `metrics [String]?`: Metric names to display as polar plot [Default: null]
-    - `cluster GraphQL.Cluster?`: Cluster Object of the parent job [Default: null]
-    - `subCluster GraphQL.SubCluster?`: SubCluster Object of the parent job [Default: null]
-    - `jobMetrics [GraphQL.JobMetricWithName]?`: Metric data [Default: null]
+    - `polarMetrics [Object]?`: Metric names and scaled peak values for rendering polar plot [Default: [] ]
+    - `polarData [GraphQL.JobMetricStatWithName]?`: Metric data [Default: null]
     - `height Number?`: Plot height [Default: 365]
  -->
 
 <script>
     import { getContext, onMount } from 'svelte'
     import Chart from 'chart.js/auto'
+    import {
+        Chart as ChartJS,
+        Title,
+        Tooltip,
+        Legend,
+        Filler,
+        PointElement,
+        RadialLinearScale,
+        LineElement
+    } from 'chart.js';
 
+    ChartJS.register(
+        Title,
+        Tooltip,
+        Legend,
+        Filler,
+        PointElement,
+        RadialLinearScale,
+        LineElement
+    );
+
+
+    export let polarMetrics = [];
+    export let polarData = [];
     export let canvasId = "polar-default";
-    export let footprintData = null;
-    export let metrics = null;
-    export let cluster = null;
-    export let subCluster = null;
-    export let jobMetrics = null;
     export let height = 350;
 
-    function getLabels() {
-        if (footprintData) {
-            return footprintData.filter(fpd => {
-                if (!jobMetrics.find(m => m.name == fpd.name && m.scope == "node" || fpd.impact == 4)) {
-                    console.warn(`PolarPlot: No metric data for '${fpd.name}'`)
-                    return false
-                }
-                return true
-            })
-            .map(filtered => filtered.name)
-            .sort(function (a, b) {
-                return ((a > b) ? 1 : ((b > a) ? -1 : 0));
-            });
+    const labels = polarMetrics
+        .filter((m) => (m.peak != null))
+        .map(pm => pm.name)
+        .sort(function (a, b) {return ((a > b) ? 1 : ((b > a) ? -1 : 0))});
+
+    function loadData(type) {
+        if (labels && (type == 'avg' || type == 'min' ||type == 'max')) {
+            return getValues(type)
+        } else if (!labels) {
+            console.warn("Empty 'polarMetrics' array prop! Cannot render Polar representation.")
         } else {
-            return metrics.filter(name => {
-                if (!jobMetrics.find(m => m.name == name && m.scope == "node")) {
-                    console.warn(`PolarPlot: No metric data for '${name}'`)
-                    return false
-                }
-                return true
-            })
-            .sort(function (a, b) {
-                return ((a > b) ? 1 : ((b > a) ? -1 : 0));
-            });
+            console.warn('Unknown Type For Polar Data (must be one of [min, max, avg])')
         }
-    }
-
-    const labels = getLabels();
-    const getMetricConfig = getContext("getMetricConfig");
-
-    const getValuesForStatGeneric = (getStat) => labels.map(name => {
-        // TODO: Requires Scaling if Shared Job
-        const peak = getMetricConfig(cluster, subCluster, name).peak
-        const metric = jobMetrics.find(m => m.name == name && m.scope == "node")
-        const value = getStat(metric.metric) / peak
-        return value <= 1. ? value : 1.
-    })
-
-    const getValuesForStatFootprint = (getStat) => labels.map(name => {
-        // FootprintData 'Peak' is pre-scaled for Shared Jobs in JobSummary Component
-        const peak = footprintData.find(fpd => fpd.name === name).peak
-        const metric = jobMetrics.find(m => m.name == name && m.scope == "node")
-        const value = getStat(metric.metric) / peak
-        return value <= 1. ? value : 1.
-    })
-
-    function getMax(metric) {
-        let max = metric.series[0].statistics.max;
-        for (let series of metric.series)
-            max = Math.max(max, series.statistics.max)
-        return max
-    }
-
-    function getMin(metric) {
-        let min = metric.series[0].statistics.min;
-        for (let series of metric.series)
-            min = Math.min(min, series.statistics.min)
-        return min
-    }
-
-    function getAvg(metric) {
-        let avg = 0;
-        for (let series of metric.series)
-            avg += series.statistics.avg
-        return avg / metric.series.length
-    }
-
-    function loadDataGeneric(type) {
-        if (type === 'avg') {
-            return getValuesForStatGeneric(getAvg)
-        } else if (type === 'max') {
-            return getValuesForStatGeneric(getMax)
-        } else if (type === 'min') {
-            return getValuesForStatGeneric(getMin)
-        }
-        console.log('Unknown Type For Polar Data')
         return []
     }
 
-    function loadDataForFootprint(type) {
-        if (type === 'avg') {
-            return getValuesForStatFootprint(getAvg)
-        } else if (type === 'max') {
-            return getValuesForStatFootprint(getMax)
-        } else if (type === 'min') {
-            return getValuesForStatFootprint(getMin)
-        }
-        console.log('Unknown Type For Polar Data')
-        return []
-    }
+    // Helper
+
+    const getValues = (type) => labels.map(name => {
+        // Peak is adapted and scaled for job shared state
+        const peak = polarMetrics.find(m => m?.name == name)?.peak
+        const metric = polarData.find(m => m?.name == name)?.stats
+        const value = (peak && metric) ? (metric[type] / peak) : 0
+        return value <= 1. ? value : 1.
+    })
+
+    // Chart JS Objects
 
     const data = {
         labels: labels,
         datasets: [
             {
                 label: 'Max',
-                data: footprintData ? loadDataForFootprint('max') : loadDataGeneric('max'), // Node Scope Only
+                data: loadData('max'), // Node Scope Only
                 fill: 1,
                 backgroundColor: 'rgba(0, 0, 255, 0.25)',
                 borderColor: 'rgb(0, 0, 255)',
@@ -129,7 +81,7 @@
             },
             {
                 label: 'Avg',
-                data: footprintData ? loadDataForFootprint('avg') : loadDataGeneric('avg'), // Node Scope Only
+                data: loadData('avg'), // Node Scope Only
                 fill: 2,
                 backgroundColor: 'rgba(255, 210, 0, 0.25)',
                 borderColor: 'rgb(255, 210, 0)',
@@ -140,7 +92,7 @@
             },
             {
                 label: 'Min',
-                data: footprintData ? loadDataForFootprint('min') : loadDataGeneric('min'), // Node Scope Only
+                data: loadData('min'), // Node Scope Only
                 fill: true,
                 backgroundColor: 'rgba(255, 0, 0, 0.25)',
                 borderColor: 'rgb(255, 0, 0)',

web/frontend/src/generic/plots/Roofline.svelte

@@ -179,7 +179,7 @@
   function render(plotData) {
     if (plotData) {
       const opts = {
-        title: "",
+        title: "CPU Roofline Diagram",
         mode: 2,
         width: width,
         height: height,

web/frontend/src/generic/select/HistogramSelection.svelte

@@ -3,7 +3,7 @@
 
     Properties:
     - `cluster String`: Currently selected cluster
-    - `metricsInHistograms [String]`: The currently selected metrics to display as histogram
+    - `selectedHistograms [String]`: The currently selected metrics to display as histogram
     - ìsOpen Bool`: Is selection opened
  -->
 
@@ -21,22 +21,27 @@
   import { gql, getContextClient, mutationStore } from "@urql/svelte";
 
   export let cluster;
-  export let metricsInHistograms;
+  export let selectedHistograms;
   export let isOpen;
 
   const client = getContextClient();
   const initialized = getContext("initialized");
 
-  let availableMetrics = []
+  function loadHistoMetrics(isInitialized, thisCluster) {
+    if (!isInitialized) return [];
 
-  function loadHistoMetrics(isInitialized) {
-    if (!isInitialized) return;
-    const rawAvailableMetrics = getContext("globalMetrics").filter((gm) => gm?.footprint).map((fgm) => { return fgm.name })
-    availableMetrics = [...rawAvailableMetrics]
+    if (!thisCluster) {
+      return getContext("globalMetrics")
+      .filter((gm) => gm?.footprint)
+      .map((fgm) => { return fgm.name })
+    } else {
+      return getContext("globalMetrics")
+      .filter((gm) => gm?.availability.find((av) => av.cluster == thisCluster))
+      .filter((agm) => agm?.footprint)
+      .map((afgm) => { return afgm.name })
+    }
   }
 
-  let pendingMetrics = [...metricsInHistograms]; // Copy
-
   const updateConfigurationMutation = ({ name, value }) => {
     return mutationStore({
       client: client,
@@ -61,17 +66,16 @@
   }
 
   function closeAndApply() {
-    metricsInHistograms = [...pendingMetrics]; // Set for parent
     isOpen = !isOpen;
     updateConfiguration({
       name: cluster
         ? `user_view_histogramMetrics:${cluster}`
         : "user_view_histogramMetrics",
-      value: metricsInHistograms,
+      value: selectedHistograms,
     });
   }
 
-  $: loadHistoMetrics($initialized);
+  $: availableMetrics = loadHistoMetrics($initialized, cluster);
 
 </script>
 
@@ -81,7 +85,7 @@
     <ListGroup>
       {#each availableMetrics as metric (metric)}
         <ListGroupItem>
-          <input type="checkbox" bind:group={pendingMetrics} value={metric} />
+          <input type="checkbox" bind:group={selectedHistograms} value={metric} />
           {metric}
         </ListGroupItem>
       {/each}

web/frontend/src/job/JobRoofline.svelte

@@ -0,0 +1,79 @@
+<!--
+    @component Job View Roofline component; Queries data for and renders roofline plot.
+
+    Properties:
+    - `job Object`: The GQL job object
+    - `clusters Array`: The GQL clusters array
+ -->
+
+ <script>
+    import { 
+      queryStore,
+      gql,
+      getContextClient 
+    } from "@urql/svelte";
+    import {
+      Card,
+      Spinner
+    } from "@sveltestrap/sveltestrap";
+    import {
+      transformDataForRoofline,
+    } from "../generic/utils.js";
+    import Roofline from "../generic/plots/Roofline.svelte";
+
+    export let job;
+    export let clusters;
+  
+    let roofWidth;
+
+    const client = getContextClient();
+    const roofQuery = gql`
+        query ($dbid: ID!, $selectedMetrics: [String!]!, $selectedScopes: [MetricScope!]!, $selectedResolution: Int) {
+            jobMetrics(id: $dbid, metrics: $selectedMetrics, scopes: $selectedScopes, resolution: $selectedResolution) {
+            name
+            scope
+            metric {
+                series {
+                    data
+                }
+            }
+            }
+        }
+    `;
+
+    // Roofline: Always load roofMetrics with configured timestep (Resolution: 0)
+    $: roofMetrics = queryStore({
+        client: client,
+        query: roofQuery,
+        variables: { dbid: job.id, selectedMetrics: ["flops_any", "mem_bw"], selectedScopes: ["node"], selectedResolution: 0 },
+    });
+
+</script>
+
+{#if $roofMetrics.error}
+    <Card body color="danger">{$roofMetrics.error.message}</Card>
+{:else if $roofMetrics?.data}
+    <Card style="height: 400px;">
+        <div bind:clientWidth={roofWidth}>
+            <Roofline
+                width={roofWidth}
+                subCluster={clusters
+                    .find((c) => c.name == job.cluster)
+                    .subClusters.find((sc) => sc.name == job.subCluster)}
+                    data={transformDataForRoofline(
+                    $roofMetrics.data?.jobMetrics?.find(
+                        (m) => m.name == "flops_any" && m.scope == "node",
+                    )?.metric,
+                    $roofMetrics.data?.jobMetrics?.find(
+                        (m) => m.name == "mem_bw" && m.scope == "node",
+                    )?.metric,
+                    )}
+                allowSizeChange
+                renderTime
+            />
+        </div>
+    </Card>
+{:else}
+    <Spinner secondary />
+{/if}
+

web/frontend/src/job/JobSummary.svelte

@@ -1,9 +1,8 @@
 <!--
-    @component Job Summary component; Displays job.footprint data as bars in relation to thresholds, as polar plot, and summariziong comment
+    @component Job Summary component; Displays aggregated job footprint statistics and performance indicators
 
     Properties:
     - `job Object`: The GQL job object
-    - `displayTitle Bool?`: If to display cardHeader with title [Default: true]
     - `width String?`: Width of the card [Default: 'auto']
     - `height String?`: Height of the card [Default: '310px']
  -->
@@ -12,302 +11,31 @@
   import { getContext } from "svelte";
   import {
     Card,
-    CardBody,
-    Progress,
-    Icon,
-    Tooltip,
-    Row,
-    Col,
     TabContent,
     TabPane
   } from "@sveltestrap/sveltestrap";
-  import Polar from "../generic/plots/Polar.svelte";
-  import { findJobFootprintThresholds } from "../generic/utils.js";
+  import JobFootprintBars from "./jobsummary/JobFootprintBars.svelte";
+  import JobFootprintPolar from "./jobsummary/JobFootprintPolar.svelte";
+
 
   export let job;
-  export let jobMetrics;
   export let width = "auto";
   export let height = "400px";
 
-  const ccconfig = getContext("cc-config")
-  const showFootprint = !!ccconfig[`job_view_showFootprint`];
-
-  const footprintData = job?.footprint?.map((jf) => {
-    const fmc = getContext("getMetricConfig")(job.cluster, job.subCluster, jf.name);
-    if (fmc) {
-      // Unit
-      const unit = (fmc?.unit?.prefix ? fmc.unit.prefix : "") + (fmc?.unit?.base ? fmc.unit.base : "")
-
-      // Threshold / -Differences
-      const fmt = findJobFootprintThresholds(job, jf.stat, fmc);
-
-      // Define basic data -> Value: Use as Provided
-      const fmBase = {
-        name: jf.name,
-        stat: jf.stat,
-        value: jf.value,
-        unit: unit,
-        peak: fmt.peak,
-        dir: fmc.lowerIsBetter
-      };
-
-      if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "alert")) {
-        return {
-          ...fmBase,
-          color: "danger",
-          message: `Footprint value way ${fmc.lowerIsBetter ? "above" : "below"} expected normal threshold.`,
-          impact: 3
-        };
-      } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "caution")) {
-        return {
-          ...fmBase,
-          color: "warning",
-          message: `Footprint value ${fmc.lowerIsBetter ? "above" : "below"} expected normal threshold.`,
-          impact: 2,
-        };
-      } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "normal")) {
-        return {
-          ...fmBase,
-          color: "success",
-          message: "Footprint value within expected thresholds.",
-          impact: 1,
-        };
-      } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "peak")) {
-        return {
-          ...fmBase,
-          color: "info",
-          message:
-            "Footprint value above expected normal threshold: Check for artifacts recommended.",
-          impact: 0,
-        };
-      } else {
-        return {
-          ...fmBase,
-          color: "secondary",
-          message:
-            "Footprint value above expected peak threshold: Check for artifacts!",
-          impact: -1,
-        };
-      }
-    } else { // No matching metric config: display as single value
-      return {
-        name: jf.name,
-        stat: jf.stat,
-        value: jf.value,
-        message:
-          `No config for metric ${jf.name} found.`,
-        impact: 4,
-      };
-    }
-  }).sort(function (a, b) { // Sort by impact value primarily, within impact sort name alphabetically
-    return a.impact - b.impact || ((a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
-  });;
-
-  function evalFootprint(value, thresholds, lowerIsBetter, level) {
-    // Handle Metrics in which less value is better
-    switch (level) {
-      case "peak":
-        if (lowerIsBetter)
-          return false; // metric over peak -> return false to trigger impact -1
-        else return value <= thresholds.peak && value > thresholds.normal;
-      case "alert":
-        if (lowerIsBetter)
-          return value <= thresholds.peak && value >= thresholds.alert;
-        else return value <= thresholds.alert && value >= 0;
-      case "caution":
-        if (lowerIsBetter)
-          return value < thresholds.alert && value >= thresholds.caution;
-        else return value <= thresholds.caution && value > thresholds.alert;
-      case "normal":
-        if (lowerIsBetter)
-          return value < thresholds.caution && value >= 0;
-        else return value <= thresholds.normal && value > thresholds.caution;
-      default:
-        return false;
-    }
-  }
-
-  /*
-    function writeSummary(fpd) {
-      // Hardcoded! Needs to be retrieved from globalMetrics
-      const performanceMetrics = ['flops_any', 'mem_bw'];
-      const utilizationMetrics = ['cpu_load', 'acc_utilization'];
-      const energyMetrics = ['cpu_power'];
-
-      let performanceScore = 0;
-      let utilizationScore = 0;
-      let energyScore = 0;
-
-      let performanceMetricsCounted = 0;
-      let utilizationMetricsCounted = 0;
-      let energyMetricsCounted = 0;
-
-      fpd.forEach(metric => {
-        console.log('Metric, Impact', metric.name, metric.impact)
-        if (performanceMetrics.includes(metric.name)) {
-          performanceScore += metric.impact
-          performanceMetricsCounted += 1
-        } else if (utilizationMetrics.includes(metric.name)) {
-          utilizationScore += metric.impact
-          utilizationMetricsCounted += 1
-        } else if (energyMetrics.includes(metric.name)) {
-          energyScore += metric.impact
-          energyMetricsCounted += 1 
-        }
-      });
-
-      performanceScore = (performanceMetricsCounted == 0) ? performanceScore : (performanceScore / performanceMetricsCounted);
-      utilizationScore = (utilizationMetricsCounted == 0) ? utilizationScore : (utilizationScore / utilizationMetricsCounted);
-      energyScore = (energyMetricsCounted == 0) ? energyScore : (energyScore / energyMetricsCounted);
-
-      let res = [];
-
-      console.log('Perf', performanceScore, performanceMetricsCounted)
-      console.log('Util', utilizationScore, utilizationMetricsCounted)
-      console.log('Energy', energyScore, energyMetricsCounted)
-
-      if (performanceScore == 1) {
-        res.push('<b>Performance:</b> Your job performs well.')
-      } else if (performanceScore != 0) {
-        res.push('<b>Performance:</b> Your job performs suboptimal.')
-      }
-
-      if (utilizationScore == 1) {
-        res.push('<b>Utilization:</b> Your job utilizes resources well.')
-      } else if (utilizationScore != 0) {
-        res.push('<b>Utilization:</b> Your job utilizes resources suboptimal.')
-      }
-
-      if (energyScore == 1) {
-        res.push('<b>Energy:</b> Your job has good energy values.')
-      } else if (energyScore != 0) {
-        res.push('<b>Energy:</b> Your job consumes more energy than necessary.')
-      }
-
-      return res;
-    };
-
-    $: summaryMessages = writeSummary(footprintData) 
-  */
+  const showFootprintTab = !!getContext("cc-config")[`job_view_showFootprint`];
 </script>
 
 <Card class="overflow-auto" style="width: {width}; height: {height}">
-  <TabContent> <!-- on:tab={(e) => (status = e.detail)} -->
-    {#if showFootprint}
+  <TabContent>
+    {#if showFootprintTab}
       <TabPane tabId="foot" tab="Footprint" active>
-        <CardBody>
-          {#each footprintData as fpd, index}
-            {#if fpd.impact !== 4}
-              <div class="mb-1 d-flex justify-content-between">
-                <div>&nbsp;<b>{fpd.name} ({fpd.stat})</b></div>
-                <div
-                  class="cursor-help d-inline-flex"
-                  id={`footprint-${job.jobId}-${index}`}
-                >
-                  <div class="mx-1">
-                    {#if fpd.impact === 3}
-                      <Icon name="exclamation-triangle-fill" class="text-danger" />
-                    {:else if fpd.impact === 2}
-                      <Icon name="exclamation-triangle" class="text-warning" />
-                    {:else if fpd.impact === 0}
-                      <Icon name="info-circle" class="text-info" />
-                    {:else if fpd.impact === -1}
-                      <Icon name="info-circle-fill" class="text-danger" />
-                    {/if}
-                    {#if fpd.impact === 3}
-                      <Icon name="emoji-frown" class="text-danger" />
-                    {:else if fpd.impact === 2}
-                      <Icon name="emoji-neutral" class="text-warning" />
-                    {:else if fpd.impact === 1}
-                      <Icon name="emoji-smile" class="text-success" />
-                    {:else if fpd.impact === 0}
-                      <Icon name="emoji-smile" class="text-info" />
-                    {:else if fpd.impact === -1}
-                      <Icon name="emoji-dizzy" class="text-danger" />
-                    {/if}
-                  </div>
-                  <div>
-                    {fpd.value} / {fpd.peak}
-                    {fpd.unit} &nbsp;
-                  </div>
-                </div>
-                <Tooltip
-                  target={`footprint-${job.jobId}-${index}`}
-                  placement="right"
-                >{fpd.message}</Tooltip
-                >
-              </div>
-              <Row cols={12} class="{(footprintData.length == (index + 1)) ? 'mb-0' : 'mb-2'}">
-                {#if fpd.dir}
-                  <Col xs="1">
-                    <Icon name="caret-left-fill" />
-                  </Col>
-                {/if}
-                <Col xs="11" class="align-content-center">
-                  <Progress value={fpd.value} max={fpd.peak} color={fpd.color} />
-                </Col>
-                {#if !fpd.dir}
-                <Col xs="1">
-                  <Icon name="caret-right-fill" />
-                </Col>
-                {/if}
-              </Row>
-            {:else}
-              <div class="mb-1 d-flex justify-content-between">
-                <div>
-                  &nbsp;<b>{fpd.name} ({fpd.stat})</b>
-                </div>
-                <div
-                  class="cursor-help d-inline-flex"
-                  id={`footprint-${job.jobId}-${index}`}
-                >
-                  <div class="mx-1">
-                    <Icon name="info-circle"/>
-                  </div>
-                  <div>
-                    {fpd.value}&nbsp;
-                  </div>
-                </div>
-              </div>
-              <Tooltip
-                target={`footprint-${job.jobId}-${index}`}
-                placement="right"
-              >{fpd.message}</Tooltip
-              >
-            {/if}
-          {/each}
-        </CardBody>
+        <!-- Bars CardBody Here-->
+        <JobFootprintBars {job} />
       </TabPane>
     {/if}
-    <TabPane tabId="polar" tab="Polar" active={!showFootprint}>
-      <CardBody>
-        <Polar
-          canvasId={job.jobId}
-          {footprintData}
-          {jobMetrics}
-        />
-      </CardBody>
+    <TabPane tabId="polar" tab="Polar" active={!showFootprintTab}>
+      <!-- Polar Plot CardBody Here -->
+       <JobFootprintPolar {job} />
     </TabPane>
-    <!--
-      <TabPane tabId="summary" tab="Summary">
-        <CardBody>
-          <p>Based on footprint data, this job performs as follows:</p>
-          <hr/>
-          <ul>
-          {#each summaryMessages as sm}
-            <li>
-              {@html sm}
-            </li>
-          {/each}
-          </ul>
-        </CardBody>
-      </TabPane>
-    -->
   </TabContent>
 </Card>
-
-<style>
-  .cursor-help {
-    cursor: help;
-  }
-</style>

web/frontend/src/job/Metric.svelte

@@ -148,17 +148,18 @@
           zoomState = {...pendingZoomState}
         }
 
-        // Set selected scope to min of returned scopes
+        // On additional scope request
         if (selectedScope == "load-all") {
+          // Push scope to statsTable (Needs to be in this case, else newly selected 'Metric.svelte' renders cause statsTable race condition)
+          const statsTableData = $metricData.data.singleUpdate.filter((x) => x.scope !== "node")
+          if (statsTableData.length > 0) {
+            dispatch("more-loaded", statsTableData);
+          }
+          // Set selected scope to min of returned scopes
           selectedScope = minScope(scopes)
           nodeOnly = (selectedScope == "node") // "node" still only scope after load-all
         }
 
-        const statsTableData = $metricData.data.singleUpdate.filter((x) => x.scope !== "node")
-        if (statsTableData.length > 0) {
-          dispatch("more-loaded", statsTableData);
-        }
-
         patternMatches = statsPattern.exec(selectedScope)
 
         if (!patternMatches) {

web/frontend/src/job/StatsTable.svelte

@@ -18,6 +18,8 @@
     InputGroup,
     InputGroupText,
     Icon,
+    Row,
+    Col
   } from "@sveltestrap/sveltestrap";
   import { maxScope } from "../generic/utils.js";
   import StatsTableEntry from "./StatsTableEntry.svelte";
@@ -26,7 +28,7 @@
   export let job;
   export let jobMetrics;
 
-  const allMetrics = [...new Set(jobMetrics.map((m) => m.name))].sort()
+  const sortedJobMetrics = [...new Set(jobMetrics.map((m) => m.name))].sort()
   const scopesForMetric = (metric) =>
       jobMetrics.filter((jm) => jm.name == metric).map((jm) => jm.scope);
 
@@ -34,12 +36,12 @@
     selectedScopes = {},
     sorting = {},
     isMetricSelectionOpen = false,
+    availableMetrics = new Set(),
     selectedMetrics =
-      getContext("cc-config")[
-        `job_view_nodestats_selectedMetrics:${job.cluster}`
-      ] || getContext("cc-config")["job_view_nodestats_selectedMetrics"];
+      getContext("cc-config")[`job_view_nodestats_selectedMetrics:${job.cluster}`] ||
+      getContext("cc-config")["job_view_nodestats_selectedMetrics"];
 
-  for (let metric of allMetrics) {
+  for (let metric of sortedJobMetrics) {
     // Not Exclusive or Multi-Node: get maxScope directly (mostly: node)
     //   -> Else: Load smallest available granularity as default as per availability
     const availableScopes = scopesForMetric(metric);
@@ -96,15 +98,19 @@
   };
 </script>
 
+<Row>
+  <Col class="m-2">
+    <Button outline on:click={() => (isMetricSelectionOpen = true)} class="w-auto px-2" color="primary">
+      Select Metrics (Selected {selectedMetrics.length} of {availableMetrics.size} available)
+    </Button>
+  </Col>
+</Row>
+<hr class="mb-1 mt-1"/>
 <Table class="mb-0">
   <thead>
     <!-- Header Row 1: Selectors -->
     <tr>
-      <th>
-        <Button outline on:click={() => (isMetricSelectionOpen = true)} class="w-100 px-2" color="primary">
-          Select Metrics
-        </Button>
-      </th>
+      <th/>
       {#each selectedMetrics as metric}
         <!-- To Match Row-2 Header Field Count-->
         <th colspan={selectedScopes[metric] == "node" ? 3 : 4}>
@@ -164,7 +170,7 @@
 <MetricSelection
   cluster={job.cluster}
   configName="job_view_nodestats_selectedMetrics"
-  allMetrics={new Set(allMetrics)}
+  bind:allMetrics={availableMetrics}
   bind:metrics={selectedMetrics}
   bind:isOpen={isMetricSelectionOpen}
 />

web/frontend/src/job/jobsummary/JobFootprintBars.svelte

@@ -0,0 +1,210 @@
+<!--
+    @component Job Footprint Bar component; Displays job footprint db data as bars relative to thresholds. Displays quality indicators and tooltips.
+
+    Properties:
+    - `job Object`: The GQL job object
+ -->
+
+ <script>
+    import { getContext } from "svelte";
+    import {
+      CardBody,
+      Progress,
+      Icon,
+      Tooltip,
+      Row,
+      Col
+    } from "@sveltestrap/sveltestrap";
+    import { findJobFootprintThresholds } from "../../generic/utils.js";
+  
+    export let job;
+    
+    // Prepare Job Footprint Data Based On Values Saved In Database
+    const jobFootprintData = job?.footprint?.map((jf) => {
+      const fmc = getContext("getMetricConfig")(job.cluster, job.subCluster, jf.name);
+      if (fmc) {
+        // Unit
+        const unit = (fmc?.unit?.prefix ? fmc.unit.prefix : "") + (fmc?.unit?.base ? fmc.unit.base : "")
+  
+        // Threshold / -Differences
+        const fmt = findJobFootprintThresholds(job, jf.stat, fmc);
+  
+        // Define basic data -> Value: Use as Provided
+        const fmBase = {
+          name: jf.name,
+          stat: jf.stat,
+          value: jf.value,
+          unit: unit,
+          peak: fmt.peak,
+          dir: fmc.lowerIsBetter
+        };
+  
+        if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "alert")) {
+          return {
+            ...fmBase,
+            color: "danger",
+            message: `Footprint value way ${fmc.lowerIsBetter ? "above" : "below"} expected normal threshold.`,
+            impact: 3
+          };
+        } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "caution")) {
+          return {
+            ...fmBase,
+            color: "warning",
+            message: `Footprint value ${fmc.lowerIsBetter ? "above" : "below"} expected normal threshold.`,
+            impact: 2,
+          };
+        } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "normal")) {
+          return {
+            ...fmBase,
+            color: "success",
+            message: "Footprint value within expected thresholds.",
+            impact: 1,
+          };
+        } else if (evalFootprint(jf.value, fmt, fmc.lowerIsBetter, "peak")) {
+          return {
+            ...fmBase,
+            color: "info",
+            message:
+              "Footprint value above expected normal threshold: Check for artifacts recommended.",
+            impact: 0,
+          };
+        } else {
+          return {
+            ...fmBase,
+            color: "secondary",
+            message:
+              "Footprint value above expected peak threshold: Check for artifacts!",
+            impact: -1,
+          };
+        }
+      } else { // No matching metric config: display as single value
+        return {
+          name: jf.name,
+          stat: jf.stat,
+          value: jf.value,
+          message:
+            `No config for metric ${jf.name} found.`,
+          impact: 4,
+        };
+      }
+    }).sort(function (a, b) { // Sort by impact value primarily, within impact sort name alphabetically
+      return a.impact - b.impact || ((a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
+    });;
+  
+    function evalFootprint(value, thresholds, lowerIsBetter, level) {
+        // Handle Metrics in which less value is better
+        switch (level) {
+        case "peak":
+            if (lowerIsBetter)
+            return false; // metric over peak -> return false to trigger impact -1
+            else return value <= thresholds.peak && value > thresholds.normal;
+        case "alert":
+            if (lowerIsBetter)
+            return value <= thresholds.peak && value >= thresholds.alert;
+            else return value <= thresholds.alert && value >= 0;
+        case "caution":
+            if (lowerIsBetter)
+            return value < thresholds.alert && value >= thresholds.caution;
+            else return value <= thresholds.caution && value > thresholds.alert;
+        case "normal":
+            if (lowerIsBetter)
+            return value < thresholds.caution && value >= 0;
+            else return value <= thresholds.normal && value > thresholds.caution;
+        default:
+            return false;
+        }
+    }
+</script>
+
+<CardBody>
+    {#if jobFootprintData.length === 0}
+        <div class="text-center">No footprint data for job available.</div>
+    {:else}
+        {#each jobFootprintData as fpd, index}
+            {#if fpd.impact !== 4}
+                <div class="mb-1 d-flex justify-content-between">
+                <div>&nbsp;<b>{fpd.name} ({fpd.stat})</b></div>
+                <div
+                    class="cursor-help d-inline-flex"
+                    id={`footprint-${job.jobId}-${index}`}
+                >
+                    <div class="mx-1">
+                    {#if fpd.impact === 3}
+                        <Icon name="exclamation-triangle-fill" class="text-danger" />
+                    {:else if fpd.impact === 2}
+                        <Icon name="exclamation-triangle" class="text-warning" />
+                    {:else if fpd.impact === 0}
+                        <Icon name="info-circle" class="text-info" />
+                    {:else if fpd.impact === -1}
+                        <Icon name="info-circle-fill" class="text-danger" />
+                    {/if}
+                    {#if fpd.impact === 3}
+                        <Icon name="emoji-frown" class="text-danger" />
+                    {:else if fpd.impact === 2}
+                        <Icon name="emoji-neutral" class="text-warning" />
+                    {:else if fpd.impact === 1}
+                        <Icon name="emoji-smile" class="text-success" />
+                    {:else if fpd.impact === 0}
+                        <Icon name="emoji-smile" class="text-info" />
+                    {:else if fpd.impact === -1}
+                        <Icon name="emoji-dizzy" class="text-danger" />
+                    {/if}
+                    </div>
+                    <div>
+                    {fpd.value} / {fpd.peak}
+                    {fpd.unit} &nbsp;
+                    </div>
+                </div>
+                <Tooltip
+                    target={`footprint-${job.jobId}-${index}`}
+                    placement="right"
+                >{fpd.message}</Tooltip
+                >
+                </div>
+                <Row cols={12} class="{(jobFootprintData.length == (index + 1)) ? 'mb-0' : 'mb-2'}">
+                {#if fpd.dir}
+                    <Col xs="1">
+                    <Icon name="caret-left-fill" />
+                    </Col>
+                {/if}
+                <Col xs="11" class="align-content-center">
+                    <Progress value={fpd.value} max={fpd.peak} color={fpd.color} />
+                </Col>
+                {#if !fpd.dir}
+                <Col xs="1">
+                    <Icon name="caret-right-fill" />
+                </Col>
+                {/if}
+                </Row>
+            {:else}
+                <div class="mb-1 d-flex justify-content-between">
+                <div>
+                    &nbsp;<b>{fpd.name} ({fpd.stat})</b>
+                </div>
+                <div
+                    class="cursor-help d-inline-flex"
+                    id={`footprint-${job.jobId}-${index}`}
+                >
+                    <div class="mx-1">
+                    <Icon name="info-circle"/>
+                    </div>
+                    <div>
+                    {fpd.value}&nbsp;
+                    </div>
+                </div>
+                </div>
+                <Tooltip
+                target={`footprint-${job.jobId}-${index}`}
+                placement="right"
+                >{fpd.message}</Tooltip
+                >
+            {/if}
+        {/each}
+    {/if}
+</CardBody>
+
+<style>
+  .cursor-help {
+    cursor: help;
+  }
+</style>

web/frontend/src/job/jobsummary/JobFootprintPolar.svelte

@@ -0,0 +1,72 @@
+<!--
+    @component Job Footprint Polar Plot component; Displays queried job metric statistics polar plot.
+
+    Properties:
+    - `job Object`: The GQL job object
+ -->
+
+ <script>
+    import { getContext } from "svelte";
+    import { 
+      queryStore,
+      gql,
+      getContextClient 
+    } from "@urql/svelte";
+    import {
+      Card,
+      CardBody,
+      Spinner
+    } from "@sveltestrap/sveltestrap";
+    import Polar from "../../generic/plots/Polar.svelte";
+    import { findJobFootprintThresholds } from "../../generic/utils.js";
+  
+    export let job;
+  
+    // Metric Names Configured To Be Footprints For (sub)Cluster
+    const clusterFootprintMetrics = getContext("clusters")
+    .find((c) => c.name == job.cluster)?.subClusters
+    .find((sc) => sc.name == job.subCluster)?.footprint || []
+
+    // Get Scaled Peak Threshold Based on Footprint Type ([min, max, avg]) and Job Exclusivity
+    const polarMetrics = getContext("globalMetrics").reduce((pms, gm) => {
+    if (clusterFootprintMetrics.includes(gm.name)) {
+        const fmt = findJobFootprintThresholds(job, gm.footprint, getContext("getMetricConfig")(job.cluster, job.subCluster, gm.name));
+        pms.push({ name: gm.name, peak: fmt ? fmt.peak : null });
+    }
+    return pms;
+    }, [])
+
+    // Pull All Series For Footprint Metrics Statistics Only On Node Scope
+    const client = getContextClient();
+    const polarQuery = gql`
+    query ($dbid: ID!, $selectedMetrics: [String!]!) {
+        jobMetricStats(id: $dbid, metrics: $selectedMetrics) {
+        name
+        stats {
+            min
+            avg
+            max
+        }
+        }
+    }
+    `;
+
+    $: polarData = queryStore({
+      client: client,
+      query: polarQuery,
+      variables:{ dbid: job.id, selectedMetrics: clusterFootprintMetrics },
+    });
+</script>
+
+<CardBody>
+  {#if $polarData.fetching}
+    <Spinner />
+  {:else if $polarData.error}
+    <Card body color="danger">{$polarData.error.message}</Card>
+  {:else}
+    <Polar
+      {polarMetrics}
+      polarData={$polarData.data.jobMetricStats}
+    />
+  {/if}
+</CardBody>