Update component header, format, streamline SV5 components

web/frontend/src/job/EnergySummary.svelte

@@ -1,11 +1,11 @@
 <!--
-    @component Energy Summary component; Displays job energy information.
+  @component Energy Summary component; Displays job energy information.
 
-    Properties:
-    - `jobId Number`: The job id
-    - `jobEnergy Number?`: The total job energy [Default: null]
-    - `jobEnergyFootprint [Object]?`: The partial job energy contributions [Default: null]
- -->
+  Properties:
+  - `jobId Number`: The job id
+  - `jobEnergy Number?`: The total job energy [Default: null]
+  - `jobEnergyFootprint [Object]?`: The partial job energy contributions [Default: null]
+-->
 
 <script>
   import { 

web/frontend/src/job/JobRoofline.svelte

@@ -1,10 +1,10 @@
 <!--
-    @component Job View Roofline component; Queries data for and renders roofline plot.
+  @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
- -->
+  Properties:
+  - `job Object`: The GQL job object
+  - `clusters Array`: The GQL clusters array
+-->
 
  <script>
   import { 

web/frontend/src/job/JobSummary.svelte

@@ -1,11 +1,11 @@
 <!--
-    @component Job Summary component; Displays aggregated job footprint statistics and performance indicators
+  @component Job Summary component; Displays aggregated job footprint statistics and performance indicators
 
-    Properties:
-    - `job Object`: The GQL job object
-    - `width String?`: Width of the card [Default: 'auto']
-    - `height String?`: Height of the card [Default: '310px']
- -->
+  Properties:
+  - `job Object`: The GQL job object
+  - `width String?`: Width of the card [Default: 'auto']
+  - `height String?`: Height of the card [Default: '400px']
+-->
 
 <script>
   import { getContext } from "svelte";
@@ -17,7 +17,6 @@
   import JobFootprintBars from "./jobsummary/JobFootprintBars.svelte";
   import JobFootprintPolar from "./jobsummary/JobFootprintPolar.svelte";
 
-
   /* Svelte 5 Props */
   let {
     job,
@@ -25,6 +24,7 @@
     height = "400px",
   } = $props();
 
+  /* Const Init */
   const showFootprintTab = !!getContext("cc-config")[`job_view_showFootprint`];
 </script>
 

web/frontend/src/job/Metric.svelte

@@ -1,15 +1,14 @@
 <!--
-    @component Metric plot wrapper with user scope selection; used in job detail view
+  @component Metric plot wrapper with user scope selection; used in job detail view
 
-    Properties:
-      - `job Object`: The GQL job object
-      - `metricName String`: The metrics name
-      - `metricUnit Object`: The metrics GQL unit object
-      - `nativeScope String`: The metrics native scope
-      - `scopes [String]`: The scopes returned for this metric
-      - `rawData [Object]`: Metric data for all scopes returned for this metric
-      - `isShared Bool?`: If this job used shared resources; will adapt threshold indicators accordingly in downstream plots [Default: false]
- -->
+  Properties:
+    - `job Object`: The GQL job object
+    - `metricName String`: The metrics name
+    - `metricUnit Object`: The metrics GQL unit object
+    - `nativeScope String`: The metrics native scope
+    - `presetScopes [String]`: The preset scopes returned for this metric
+    - `isShared Bool?`: If this job used shared resources; will adapt threshold indicators accordingly in downstream plots [Default: false]
+-->
 
 <script>
   import { 

web/frontend/src/job/StatsTab.svelte

@@ -1,11 +1,11 @@
 <!--
-    @component Job-View subcomponent; Wraps the statsTable in a TabPane and contains GQL query for scoped statsData
+  @component Job-View subcomponent; Wraps the statsTable in a TabPane and contains GQL query for scoped statsData
 
-    Properties:
-    - `job Object`: The job object
-    - `clusters Object`: The clusters object
-    - `tabActive bool`: Boolean if StatsTabe Tab is Active on Creation
- -->
+  Properties:
+  - `job Object`: The job object
+  - `clusters Object`: The clusters object
+  - `tabActive bool`: Boolean if StatsTabe Tab is Active on Creation
+-->
 
 <script>
   import { 

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

@@ -1,215 +1,215 @@
 <!--
-    @component Job Footprint Bar component; Displays job footprint db data as bars relative to thresholds. Displays quality indicators and tooltips.
+  @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
- -->
+  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";
-  
-    /* Svelte 5 Props */
-    let {job} = $props();
-    
-    /* Derived */
-    // Prepare Job Footprint Data Based On Values Saved In Database
-    const jobFootprintData = $derived(buildFootprint(job?.footprint));
-    
-    /* Functions */
-    function buildFootprint(input) {
-      let result = input?.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
+<script>
+  import { getContext } from "svelte";
+  import {
+    CardBody,
+    Progress,
+    Icon,
+    Tooltip,
+    Row,
+    Col
+  } from "@sveltestrap/sveltestrap";
+  import { findJobFootprintThresholds } from "../../generic/utils.js";
+
+  /* Svelte 5 Props */
+  let {
+    job
+  } = $props();
+
+  /* Derived */
+  // Prepare Job Footprint Data Based On Values Saved In Database
+  const jobFootprintData = $derived(buildFootprint(job?.footprint));
+
+  /* Functions */
+  function buildFootprint(input) {
+    let result = input?.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 {
-            name: jf.name,
-            stat: jf.stat,
-            value: jf.value,
+            ...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:
-              `No config for metric ${jf.name} found.`,
-            impact: 4,
+              "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,
           };
         }
-      }).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));
-      });;
+      } 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));
+    });;
 
     return result
-    };
-  
-    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 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}
+  {#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>

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

@@ -1,64 +1,66 @@
 <!--
-    @component Job Footprint Polar Plot component; Displays queried job metric statistics polar plot.
+  @component Job Footprint Polar Plot component; Displays queried job metric statistics polar plot.
 
-    Properties:
-    - `job Object`: The GQL job object
- -->
+  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 { findJobFootprintThresholds } from "../../generic/utils.js";
-    import Polar from "../../generic/plots/Polar.svelte";
+<script>
+  import { getContext } from "svelte";
+  import { 
+    queryStore,
+    gql,
+    getContextClient 
+  } from "@urql/svelte";
+  import {
+    Card,
+    CardBody,
+    Spinner
+  } from "@sveltestrap/sveltestrap";
+  import { findJobFootprintThresholds } from "../../generic/utils.js";
+  import Polar from "../../generic/plots/Polar.svelte";
 
-    /* Svelte 5 Props */
-    let { job } = $props();
-  
-    /* Const Init */
-    // Metric Names Configured To Be Footprints For (sub)Cluster
-    const clusterFootprintMetrics = getContext("clusters")
+  /* Svelte 5 Props */
+  let {
+    job
+  } = $props();
+
+  /* Const Init */
+  // 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) => {
+  // 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 });
+      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!]!) {
-        jobStats(id: $dbid, metrics: $selectedMetrics) {
-          name
-          data {
-            min
-            avg
-            max
-          }
+  // Pull All Series For Footprint Metrics Statistics Only On Node Scope
+  const client = getContextClient();
+  const polarQuery = gql`
+    query ($dbid: ID!, $selectedMetrics: [String!]!) {
+      jobStats(id: $dbid, metrics: $selectedMetrics) {
+        name
+        data {
+          min
+          avg
+          max
         }
       }
-    `;
+    }
+  `;
 
-    /* Derived */
-    const polarData = $derived(queryStore({
-      client: client,
-      query: polarQuery,
-      variables:{ dbid: job.id, selectedMetrics: clusterFootprintMetrics },
-    }));
+  /* Derived */
+  const polarData = $derived(queryStore({
+    client: client,
+    query: polarQuery,
+    variables:{ dbid: job.id, selectedMetrics: clusterFootprintMetrics },
+  }));
 </script>
 
 <CardBody>

web/frontend/src/job/statstab/StatsTable.svelte

@@ -1,11 +1,11 @@
 <!--:
-    @component Job-View subcomponent; display table of metric data statistics with selectable scopes
+  @component Job-View subcomponent; display table of metric data statistics with selectable scopes
 
-    Properties:
-    - `hosts [String]`: The list of hostnames of this job
-    - `jobStats Object`: The data object
-    - `selectedMetrics [String]`: The selected metrics
- -->
+  Properties:
+  - `hosts [String]`: The list of hostnames of this job
+  - `jobStats Object`: The data object
+  - `selectedMetrics [String]`: The selected metrics
+-->
 
 <script>
   import {
@@ -123,7 +123,6 @@
       return s.dir != "up" ? s1[stat] - s2[stat] : s2[stat] - s1[stat];
     });
   }
-
 </script>
 
 <Table class="mb-0">

web/frontend/src/job/statstab/StatsTableEntry.svelte

@@ -1,10 +1,10 @@
 <!--
-    @component Job-View subcomponent; Single Statistics entry component for statstable
+  @component Job-View subcomponent; Single Statistics entry component for statstable
 
-    Properties:
-    - `data [Object]`: The jobs statsdata for host-metric-scope
-    - `scope String`: The selected scope
- -->
+  Properties:
+  - `data [Object]`: The jobs statsdata for host-metric-scope
+  - `scope String`: The selected scope
+-->
 
 <script>
   import { Icon } from "@sveltestrap/sveltestrap";