initial branch commit, add job compare switch, add gql resolver

web/frontend/src/Jobs.root.svelte

@@ -21,6 +21,7 @@
   import { init } from "./generic/utils.js";
   import Filters from "./generic/Filters.svelte";
   import JobList from "./generic/JobList.svelte";
+  import JobCompare from "./generic/JobCompare.svelte";
   import TextFilter from "./generic/helper/TextFilter.svelte";
   import Refresher from "./generic/helper/Refresher.svelte";
   import Sorting from "./generic/select/SortSelection.svelte";
@@ -36,7 +37,9 @@
 
   let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
   let jobList,
-    matchedJobs = null;
+      jobCompare,
+    matchedListJobs,
+    matchedCompareJobs = null;
   let sorting = { field: "startTime", type: "col", order: "DESC" },
     isSortingOpen = false,
     isMetricsSelectionOpen = false;
@@ -49,6 +52,7 @@
     : !!ccconfig.plot_list_showFootprint;
   let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null;
   let presetProject = filterPresets?.project ? filterPresets.project : ""
+  let showCompare = false;
 
   // The filterPresets are handled by the Filters component,
   // so we need to wait for it to be ready before we can start a query.
@@ -72,7 +76,7 @@
 {/if}
 
 <!-- ROW2: Tools-->
-<Row cols={{ xs: 1, md: 2, lg: 4}} class="mb-3">
+<Row cols={{ xs: 1, md: 2, lg: 5}} class="mb-3">
   <Col lg="2" class="mb-2 mb-lg-0">
     <ButtonGroup class="w-100">
       <Button outline color="primary" on:click={() => (isSortingOpen = true)}>
@@ -87,20 +91,24 @@
       </Button>
     </ButtonGroup>
   </Col>
-  <Col lg="4" xl="{(presetProject !== '') ? 5 : 6}" class="mb-1 mb-lg-0">
+  <Col lg="4" class="mb-1 mb-lg-0">
     <Filters
       {filterPresets}
-      {matchedJobs}
+      matchedJobs={showCompare? matchedCompareJobs: matchedListJobs}
       bind:this={filterComponent}
       on:update-filters={({ detail }) => {
         selectedCluster = detail.filters[0]?.cluster
           ? detail.filters[0].cluster.eq
           : null;
-        jobList.queryJobs(detail.filters);
+        if (showCompare) {
+          jobCompare.queryJobs(detail.filters);
+        } else {
+          jobList.queryJobs(detail.filters);
+        }
       }}
     />
   </Col>
-  <Col lg="3" xl="{(presetProject !== '') ? 3 : 2}" class="mb-2 mb-lg-0">
+  <Col lg="2" class="mb-2 mb-lg-0">
     <TextFilter
       {presetProject}
       bind:authlevel
@@ -108,24 +116,44 @@
       on:set-filter={({ detail }) => filterComponent.updateFilters(detail)}
     />
   </Col>
-  <Col lg="3" xl="2" class="mb-1 mb-lg-0">
+  <Col lg="2" class="mb-1 mb-lg-0">
     <Refresher on:refresh={() => {
-      jobList.refreshJobs()
-      jobList.refreshAllMetrics()
+      if (showCompare) {
+        jobCompare.refreshJobs()
+        jobCompare.refreshAllMetrics()
+      } else {
+        jobList.refreshJobs()
+        jobList.refreshAllMetrics()
+      }
     }} />
   </Col>
+  <Col lg="2" class="mb-2 mb-lg-0">
+    <Button color="primary" on:click={() => {
+      showCompare = !showCompare
+    }} >
+      {showCompare ? 'Compare' : 'List'} Jobs
+    </Button>
+  </Col>
 </Row>
 
-<!-- ROW3: Job List-->
+<!-- ROW3: Job List / Job Compare-->
 <Row>
   <Col>
-    <JobList
-      bind:this={jobList}
-      bind:metrics
-      bind:sorting
-      bind:matchedJobs
-      bind:showFootprint
-    />
+    {#if !showCompare}
+      <JobList
+        bind:this={jobList}
+        bind:metrics
+        bind:sorting
+        bind:matchedListJobs
+        bind:showFootprint
+      />
+    {:else}
+      <JobCompare
+        bind:this={jobCompare}
+        bind:metrics
+        bind:matchedCompareJobs
+      />
+    {/if}
   </Col>
 </Row>