add compareJobs feature to user job list view

web/frontend/src/User.root.svelte

@@ -7,7 +7,7 @@
 -->
 
 <script>
-  import { onMount, getContext } from "svelte";
+  import { untrack, onMount, getContext } from "svelte";
   import {
     Table,
     Row,
@@ -33,6 +33,7 @@
     scrambleNames,
   } from "./generic/utils.js";
   import JobList from "./generic/JobList.svelte";
+  import JobCompare from "./generic/JobCompare.svelte";
   import Filters from "./generic/Filters.svelte";
   import PlotGrid from "./generic/PlotGrid.svelte";
   import Histogram from "./generic/plots/Histogram.svelte";
@@ -54,37 +55,44 @@
   const client = getContextClient();
   const durationBinOptions = ["1m","10m","1h","6h","12h"];
   const metricBinOptions = [10, 20, 50, 100];
+  const matchedJobCompareLimit = 500;
 
   /* State Init */
   // List & Control Vars
   let filterComponent = $state(); // 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 jobFilters = $state([]);
+  let filterBuffer = $state([]);
   let jobList = $state(null);
   let matchedListJobs = $state(0);
   let isSortingOpen = $state(false);
   let isMetricsSelectionOpen = $state(false);
   let sorting = $state({ field: "startTime", type: "col", order: "DESC" });
   let selectedHistogramsBuffer = $state({ all: (ccconfig['userView_histogramMetrics'] || []) })
+  let jobCompare = $state(null);
+  let matchedCompareJobs = $state(0);
+  let showCompare = $state(false);
+  let selectedJobs = $state([]);
 
   // Histogram Vars
   let isHistogramSelectionOpen = $state(false);
   let numDurationBins = $state("1h");
   let numMetricBins = $state(10);
 
-  // Compare Vars (TODO)
-  // let jobCompare = $state(null);
-  // let showCompare = $state(false);
-  // let selectedJobs = $state([]);
-  // let filterBuffer = $state([]);
-  // let matchedCompareJobs = $state(0);
-
   /* Derived */
   let selectedCluster = $derived(filterPresets?.cluster ? filterPresets.cluster : null);
-  let metrics = $derived(filterPresets.cluster
-    ? ccconfig[`metricConfig_jobListMetrics:${filterPresets.cluster}`] ||
+  let selectedSubCluster = $derived(filterPresets?.partition ? filterPresets.partition : null);
+  let metrics = $derived.by(() => {
+    if (selectedCluster) {
+      if (selectedSubCluster) {
+        return ccconfig[`metricConfig_jobListMetrics:${selectedCluster}:${selectedSubCluster}`] ||
+          ccconfig[`metricConfig_jobListMetrics:${selectedCluster}`] ||
           ccconfig.metricConfig_jobListMetrics
-    : ccconfig.metricConfig_jobListMetrics
-  );
+      }
+      return ccconfig[`metricConfig_jobListMetrics:${selectedCluster}`] ||
+        ccconfig.metricConfig_jobListMetrics
+    }
+    return ccconfig.metricConfig_jobListMetrics
+  });
   let showFootprint = $derived(filterPresets.cluster
     ? !!ccconfig[`jobList_showFootprint:${filterPresets.cluster}`]
     : !!ccconfig.jobList_showFootprint
@@ -126,18 +134,29 @@
     })
   );
 
-  /* Effect */
+  /* Functions */
+  function resetJobSelection() {
+    if (filterComponent && selectedJobs.length === 0) {
+      filterComponent.updateFilters({ dbId: [] });
+    };
+  };
+
+  /* Reactive Effects */
+  $effect(() => {
+    // Reactive : Trigger Effect
+    selectedJobs.length
+    untrack(() => {
+      // Unreactive : Apply Reset w/o starting infinite loop
+      resetJobSelection()
+    });
+	});
+
   $effect(() => {
     if (!selectedHistogramsBuffer[selectedCluster]) {
       selectedHistogramsBuffer[selectedCluster] = ccconfig[`userView_histogramMetrics:${selectedCluster}`];
     };
   });
 
-  $effect(() => {
-    // Load Metric-Selection for last selected cluster
-    metrics = selectedCluster ? ccconfig[`metricConfig_jobListMetrics:${selectedCluster}`] : ccconfig.metricConfig_jobListMetrics
-	});
-
   /* On Mount */
   onMount(() => {
     filterComponent.updateFilters();
@@ -167,7 +186,7 @@
 <Row cols={{ xs: 1, md: 2, lg: 6}} class="mb-3">
   <Col class="mb-2 mb-lg-0">
     <ButtonGroup class="w-100">
-      <Button outline color="primary" onclick={() => (isSortingOpen = true)}>
+      <Button outline color="primary" onclick={() => (isSortingOpen = true)} disabled={showCompare}>
         <Icon name="sort-up" /> Sorting
       </Button>
       <Button
@@ -181,20 +200,30 @@
   </Col>
   <Col lg="4" class="mb-1 mb-lg-0">
     <Filters
-      startTimeQuickSelect
       bind:this={filterComponent}
       {filterPresets}
-      matchedJobs={matchedListJobs}
+      showFilter={!showCompare}
+      matchedJobs={showCompare? matchedCompareJobs: matchedListJobs}
+      startTimeQuickSelect
       applyFilters={(detail) => {
         jobFilters = [...detail.filters, { user: { eq: user.username } }];
         selectedCluster = jobFilters[0]?.cluster
           ? jobFilters[0].cluster.eq
           : null;
+        selectedSubCluster = jobFilters[1]?.partition
+          ? jobFilters[1].partition.eq
+          : null;
+        filterBuffer = [...jobFilters]
+        if (showCompare) {
+          jobCompare.queryJobs(jobFilters);
+        } else {
           jobList.queryJobs(jobFilters);
+        }
       }}
     />
   </Col>
   <Col class="mb-2 mb-lg-0">
+     {#if !showCompare}
       <InputGroup>
         <InputGroupText>
           <Icon name="bar-chart-line-fill" />
@@ -208,21 +237,28 @@
           {/each}
         </Input>
       </InputGroup>
+    {/if}
   </Col>
   <Col class="mb-2 mb-lg-0">
+    {#if !showCompare}
       <TextFilter
+        {filterBuffer}
         setFilter={(filter) => filterComponent.updateFilters(filter)}
       />
+    {/if}
   </Col>
   <Col class="mb-1 mb-lg-0">
+    {#if !showCompare}
       <Refresher onRefresh={() => {
         jobList.refreshJobs()
         jobList.refreshAllMetrics()
       }} />
+    {/if}
   </Col>
 </Row>
 
 <!-- ROW3: Base Information-->
+{#if !showCompare}
   <Row cols={{ xs: 1, md: 3}} class="mb-2">
     {#if $stats.error}
       <Col>
@@ -299,8 +335,10 @@
       </Col>
     {/if}
   </Row>
+{/if}
 
 <!-- ROW4+5: Selectable Histograms -->
+{#if !showCompare}
   <Row>
     <Col xs="12" md="3" lg="2" class="mb-2 mb-md-0">
       <Button
@@ -372,17 +410,54 @@
       </Col>
     </Row>
   {/if}
+{/if}
 
-<!-- ROW6: JOB LIST-->
+<!-- ROW6: JOB COMPARE TRIGGER-->
 <Row class="mt-3">
+  <Col xs="12" md="3" class="mb-2 mb-md-0">
+    <ButtonGroup>
+      <Button color="primary" disabled={(matchedListJobs >= matchedJobCompareLimit && !(selectedJobs.length != 0)) || $initq.fetching} onclick={() => {
+        if (selectedJobs.length != 0) filterComponent.updateFilters({dbId: selectedJobs})
+        showCompare = !showCompare
+      }} >
+        {showCompare ? 'Return to List' : 
+          matchedListJobs >= matchedJobCompareLimit && selectedJobs.length == 0
+            ? 'Compare Disabled'
+            : 'Compare' + (selectedJobs.length != 0 ? ` ${selectedJobs.length} ` : ' ') + 'Jobs'
+        }
+      </Button>
+      {#if !showCompare && selectedJobs.length != 0}
+        <Button class="w-auto" color="warning" onclick={() => {
+          selectedJobs = [] // Only empty array, filters handled by reactive reset
+        }}>
+        Clear
+        </Button>
+      {/if}
+    </ButtonGroup>
+  </Col>
+</Row>
+
+<!-- ROW7: JOB LIST / COMPARE-->
+<Row class="mt-2">
   <Col>
+    {#if !showCompare}
       <JobList
         bind:this={jobList}
         bind:matchedListJobs
+        bind:selectedJobs
         {metrics}
         {sorting}
         {showFootprint}
+        {filterBuffer}
       />
+    {:else}
+      <JobCompare
+        bind:this={jobCompare}
+        bind:matchedCompareJobs
+        {metrics}
+        {filterBuffer}
+      />
+    {/if}
   </Col>
 </Row>
 
@@ -399,6 +474,7 @@
     bind:showFootprint
     presetMetrics={metrics}
     cluster={selectedCluster}
+    subCluster={selectedSubCluster}
     configName="metricConfig_jobListMetrics"
     footprintSelect
     applyMetrics={(newMetrics) =>