Update component header, format, streamline SV5 components

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

@@ -1,16 +1,22 @@
 <!--
-    @component Main plot component, based on uPlot; metricdata values by time
+  @component Job Data Compare Plot Component, based on uPlot; metricData values by jobId/startTime
 
-    Only width/height should change reactively.
+  Only width/height should change reactively.
 
-    Properties:
-    - `metric String`: The metric name
-    - `width Number?`: The plot width [Default: 0]
-    - `height Number?`: The plot height [Default: 300]
-    - `data [Array]`: The metric data object
-    - `cluster String`: Cluster name of the parent job / data
-    - `subCluster String`: Name of the subCluster of the parent job
- -->
+  Properties:
+  - `metric String?`: The metric name [Default: ""]
+  - `width Number?`: The plot width [Default: 0]
+  - `height Number?`: The plot height [Default: 300]
+  - `data [Array]`: The data object [Default: null]
+  - `title String?`: Plot title [Default: ""]
+  - `xlabel String?`: Plot X axis label [Default: ""]
+  - `ylabel String?`: Plot Y axis label [Default: ""]
+  - `yunit String?`: Plot Y axis unit [Default: ""]
+  - `xticks Array`: Array containing jobIDs [Default: []]
+  - `xinfo Array`: Array containing job information [Default: []]
+  - `forResources Bool?`: Render this plot for allocated jobResources [Default: false]
+  - `plot Sync Object!`: uPlot cursor synchronization key
+-->
 
 <script>
   import uPlot from "uplot";

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

@@ -1,17 +1,20 @@
 <!--
-    @component Histogram Plot based on uPlot Bars
+  @component Histogram Plot based on uPlot Bars
 
-    Properties:
-    - `data [[],[]]`: uPlot data structure array ( [[],[]] == [X, Y] )
-    - `usesBins Bool?`: If X-Axis labels are bins ("XX-YY") [Default: false]
-    - `width Number?`: Plot width (reactively adaptive) [Default: 500]
-    - `height Number?`: Plot height (reactively adaptive) [Default: 300]
-    - `title String?`: Plot title [Default: ""]
-    - `xlabel String?`: Plot X axis label [Default: ""]
-    - `xunit String?`: Plot X axis unit [Default: ""]
-    - `ylabel String?`: Plot Y axis label [Default: ""]
-    - `yunit String?`: Plot Y axis unit [Default: ""]
- -->
+  Only width/height should change reactively.
+
+  Properties:
+  - `data [[],[]]`: uPlot data structure array ( [[],[]] == [X, Y] )
+  - `usesBins Bool?`: If X-Axis labels are bins ("XX-YY") [Default: false]
+  - `width Number?`: Plot width (reactively adaptive) [Default: null]
+  - `height Number?`: Plot height (reactively adaptive) [Default: 250]
+  - `title String?`: Plot title [Default: ""]
+  - `xlabel String?`: Plot X axis label [Default: ""]
+  - `xunit String?`: Plot X axis unit [Default: ""]
+  - `xtime Bool?`: If X-Axis is based on time information [Default: false]
+  - `ylabel String?`: Plot Y axis label [Default: ""]
+  - `yunit String?`: Plot Y axis unit [Default: ""]
+-->
 
 <script>
   import uPlot from "uplot";

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

@@ -1,24 +1,27 @@
 <!--
-    @component Main plot component, based on uPlot; metricdata values by time
+  @component Main plot component, based on uPlot; metricdata values by time
 
-    Only width/height should change reactively.
+  Only width/height should change reactively.
 
-    Properties:
-    - `metric String`: The metric name
-    - `scope String?`: Scope of the displayed data [Default: node]
-    - `height Number?`: The plot height [Default: 300]
-    - `timestep Number`: The timestep used for X-axis rendering
-    - `series [GraphQL.Series]`: The metric data object
-    - `useStatsSeries Bool?`: If this plot uses the statistics Min/Max/Median representation; automatically set to according bool [Default: false]
-    - `statisticsSeries [GraphQL.StatisticsSeries]?`: Min/Max/Median representation of metric data [Default: null]
-    - `cluster String`: Cluster name of the parent job / data
-    - `subCluster String`: Name of the subCluster of the parent job
-    - `isShared Bool?`: If this job used shared resources; will adapt threshold indicators accordingly [Default: false]
-    - `forNode Bool?`: If this plot is used for node data display; will render x-axis as negative time with $now as maximum [Default: false]
-    - `numhwthreads Number?`: Number of job HWThreads [Default: 0]
-    - `numaccs Number?`: Number of job Accelerators [Default: 0]
-    - `zoomState Object?`: The last zoom state to preserve on user zoom [Default: null]
- -->
+  Properties:
+  - `metric String`: The metric name
+  - `scope String?`: Scope of the displayed data [Default: node]
+  - `height Number?`: The plot height [Default: 300]
+  - `timestep Number`: The timestep used for X-axis rendering
+  - `series [GraphQL.Series]`: The metric data object
+  - `useStatsSeries Bool?`: If this plot uses the statistics Min/Max/Median representation; automatically set to according bool [Default: false]
+  - `statisticsSeries [GraphQL.StatisticsSeries]?`: Min/Max/Median representation of metric data [Default: null]
+  - `cluster String?`: Cluster name of the parent job / data [Default: ""]
+  - `subCluster String`: Name of the subCluster of the parent job
+  - `isShared Bool?`: If this job used shared resources; will adapt threshold indicators accordingly [Default: false]
+  - `forNode Bool?`: If this plot is used for node data display; will render x-axis as negative time with $now as maximum [Default: false]
+  - `numhwthreads Number?`: Number of job HWThreads [Default: 0]
+  - `numaccs Number?`: Number of job Accelerators [Default: 0]
+  - `zoomState Object?`: The last zoom state to preserve on user zoom [Default: null]
+  - `thersholdState Object?`: The last threshold state to preserve on user zoom [Default: null]
+  - `extendedLegendData Object?`: Additional information to be rendered in an extended legend [Default: null]
+  - `onZoom Func`: Callback function to handle zoom-in event
+-->
 
 <script>
   import uPlot from "uplot";

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

@@ -1,16 +1,17 @@
 <!--
-    @component Pie Plot based on chart.js Pie
+  @component Pie Plot based on chart.js Pie
 
-    Properties:
-    - `size Number`: X and Y size of the plot, for square shape
-    - `sliceLabel String`: Label used in segment legends
-    - `quantities [Number]`: Data values
-    - `entities [String]`: Data identifiers
-    - `displayLegend?`: Display uPlot legend [Default: false]
+  Properties:
+  - `canvasId String?`: Unique ID for correct parallel chart.js rendering [Default: "pie-default"]
+  - `size Number`: X and Y size of the plot, for square shape
+  - `sliceLabel String`: Label used in segment legends
+  - `quantities [Number]`: Data values
+  - `entities [String]`: Data identifiers
+  - `displayLegend?`: Display uPlot legend [Default: false]
 
-    Exported:
-    - `colors ['rgb(x,y,z)', ...]`: Color range used for segments; upstream used for legend
- -->
+  Exported:
+  - `colors ['rgb(x,y,z)', ...]`: Color range used for segments; upstream used for legend
+-->
 
 <script module>
   // http://tsitsul.in/blog/coloropt/ : 12 colors normal

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

@@ -1,11 +1,12 @@
 <!--
-    @component Polar Plot based on chart.js Radar
+  @component Polar Plot based on chart.js Radar
 
-    Properties:
-    - `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]
- -->
+  Properties:
+  - `polarMetrics [Object]?`: Metric names and scaled peak values for rendering polar plot [Default: [] ]
+  - `polarData [GraphQL.JobMetricStatWithName]?`: Metric data [Default: null]
+  - `canvasId String?`: Unique ID for correct parallel chart.js rendering [Default: "polar-default"]
+  - `height Number?`: Plot height [Default: 365]
+-->
 
 <script>
   import { onMount } from 'svelte'

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

@@ -1,25 +1,25 @@
 <!--
-    @component Roofline Model Plot based on uPlot
+  @component Roofline Model Plot based on uPlot
+
+  Properties:
+  - `data [null, [], []]`: Roofline Data Structure, see below for details [Default: null]
+  - `renderTime Bool?`: If time information should be rendered as colored dots [Default: false]
+  - `allowSizeChange Bool?`: If dimensions of rendered plot can change [Default: false]
+  - `subCluster GraphQL.SubCluster?`: SubCluster Object; contains required topology information [Default: null]
+  - `width Number?`: Plot width (reactively adaptive) [Default: 600]
+  - `height Number?`: Plot height (reactively adaptive) [Default: 380]
 
-    Properties:
-    - `data [null, [], []]`: Roofline Data Structure, see below for details [Default: null]
-    - `renderTime Bool?`: If time information should be rendered as colored dots [Default: false]
-    - `allowSizeChange Bool?`: If dimensions of rendered plot can change [Default: false]
-    - `subCluster GraphQL.SubCluster?`: SubCluster Object; contains required topology information [Default: null]
-    - `width Number?`: Plot width (reactively adaptive) [Default: 600]
-    - `height Number?`: Plot height (reactively adaptive) [Default: 380]
- 
   Data Format:
-   - `data = [null, [], []]` 
-     - Index 0: null-axis required for scatter
-     - Index 1: Array of XY-Arrays for Scatter
-     - Index 2: Optional Time Info
-   - `data[1][0] = [100, 200, 500, ...]`
-     - X Axis: Intensity (Vals up to clusters' flopRateScalar value)
-   - `data[1][1] = [1000, 2000, 1500, ...]`
-     - Y Axis: Performance (Vals up to clusters' flopRateSimd value)
-   - `data[2] = [0.1, 0.15, 0.2, ...]`
-     - Color Code: Time Information (Floats from 0 to 1) (Optional)
+  - `data = [null, [], []]` 
+    - Index 0: null-axis required for scatter
+    - Index 1: Array of XY-Arrays for Scatter
+    - Index 2: Optional Time Info
+  - `data[1][0] = [100, 200, 500, ...]`
+    - X Axis: Intensity (Vals up to clusters' flopRateScalar value)
+  - `data[1][1] = [1000, 2000, 1500, ...]`
+    - Y Axis: Performance (Vals up to clusters' flopRateSimd value)
+  - `data[2] = [0.1, 0.15, 0.2, ...]`
+    - Color Code: Time Information (Floats from 0 to 1) (Optional)
 -->
 
 <script>

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

@@ -5,12 +5,13 @@
   - `X [Number]`: Data from first selected metric as X-values
   - `Y [Number]`: Data from second selected metric as Y-values
   - `S GraphQl.TimeWeights.X?`: Float to scale the data with [Default: null]
-  - `color String`: Color of the drawn scatter circles
-  - `width Number`:
-  - `height Number`:
-  - `xLabel String`:
-  - `yLabel String`:
- -->
+  - `color String?`: Color of the drawn scatter circles [Default: '#0066cc']
+  - `width Number?`: Width of the plot [Default: 250]
+  - `height Number?`: Height of the plot [Default: 300]
+  - `xLabel String?`: X-Axis Label [Ðefault: ""]
+  - `yLabel String?`: Y-Axis Label [Default: ""]
+-->
+
 <script>
   import { onMount } from 'svelte';
   import { formatNumber } from '../units.js'
@@ -23,8 +24,8 @@
     color = '#0066cc',
     width = 250,
     height = 300,
-    xLabel,
-    yLabel,
+    xLabel = "",
+    yLabel = "",
   } = $props();
 
   /* Const Init */