add cluster and subcluster information to compareplot

web/frontend/src/generic/JobCompare.svelte

@@ -41,6 +41,7 @@
   let filter = [...filterBuffer];
   let comparePlotData = {};
   let jobIds = [];
+  let jobClusters = [];
 
   /*uPlot*/
   let plotSync = uPlot.sync("compareJobsView");
@@ -54,6 +55,8 @@
       jobId
       startTime
       duration
+      cluster
+      subCluster
       numNodes
       numHWThreads
       numAccelerators
@@ -130,8 +133,9 @@
     if (jobs) {
         let plotIndex = 0
         jobs.forEach((j) => {
-            // Collect JobIDs for X-Ticks
+            // Collect JobIDs & Clusters for X-Ticks and Legend
             jobIds.push(j.jobId)
+            jobClusters.push(`${j.cluster} ${j.subCluster}`)
             // Resources
             comparePlotData['resources'].data[0].push(plotIndex)
             comparePlotData['resources'].data[1].push(j.startTime)
@@ -203,6 +207,7 @@
         title={'Compare Resources'}
         xlabel="JobIDs"
         xticks={jobIds}
+        xinfo={jobClusters}
         ylabel={'Resource Counts'}
         data={comparePlotData['resources'].data}
         {plotSync}
@@ -217,6 +222,7 @@
           title={`Compare Metric '${m}'`}
           xlabel="JobIDs"
           xticks={jobIds}
+          xinfo={jobClusters}
           ylabel={m}
           metric={m}
           yunit={comparePlotData[m].unit}

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

@@ -24,6 +24,7 @@
   export let data = null;
   export let xlabel = "";
   export let xticks = [];
+  export let xinfo = [];
   export let ylabel = "";
   export let yunit = "";
   export let title = "";
@@ -102,7 +103,7 @@
       label: "JobID",
       scale: "x",
       value: (u, ts, sidx, didx) => {
-        return xticks[didx];
+        return `${xticks[didx]} | ${xinfo[didx]}`;
       },
     },
     {