add manual job selection for comparison in jobs view

web/frontend/src/generic/joblist/JobInfo.svelte

@@ -18,6 +18,8 @@
   export let username = null;
   export let authlevel= null;
   export let roles = null;
+  export let isSelected = null;
+  export let showSelect = false;
 
   function formatDuration(duration) {
     const hours = Math.floor(duration / 3600);
@@ -76,18 +78,39 @@
         <a href="/monitoring/job/{job.id}" target="_blank">{job.jobId}</a>
         ({job.cluster}) 
       </span>
-      <Button id={`${job.cluster}-${job.jobId}-clipboard`} outline color="secondary" size="sm" on:click={clipJobId(job.jobId)} >
-        {#if displayCheck}
-          <Icon name="clipboard2-check-fill"/>
-        {:else}
-          <Icon name="clipboard2"/>
+      <span>
+        {#if showSelect}
+          <Button id={`${job.cluster}-${job.jobId}-select`} outline={!isSelected} color={isSelected? `success`: `secondary`} size="sm" class="mr-2"
+            on:click={() => {
+              isSelected = !isSelected
+            }}>
+            {#if isSelected}
+              <Icon name="check-square"/>
+            {:else if isSelected == false}
+              <Icon name="square"/>
+            {:else}
+              <Icon name="plus-square-dotted" />
+            {/if}
+          </Button>
+          <Tooltip
+            target={`${job.cluster}-${job.jobId}-select`}
+            placement="left">
+              { 'Add or Remove Job to/from Comparison Selection' }
+          </Tooltip>
         {/if}
-      </Button>
-      <Tooltip
-        target={`${job.cluster}-${job.jobId}-clipboard`}
-        placement="right">
-          { displayCheck ? 'Copied!' : 'Copy Job ID to Clipboard' }
-      </Tooltip>
+        <Button id={`${job.cluster}-${job.jobId}-clipboard`} outline color="secondary" size="sm" on:click={clipJobId(job.jobId)} >
+          {#if displayCheck}
+            <Icon name="clipboard2-check-fill"/>
+          {:else}
+            <Icon name="clipboard2"/>
+          {/if}
+        </Button>
+        <Tooltip
+          target={`${job.cluster}-${job.jobId}-clipboard`}
+          placement="right">
+            { displayCheck ? 'Copied!' : 'Copy Job ID to Clipboard' }
+        </Tooltip>
+      </span>
     </span>
     {#if job.metaData?.jobName}
       {#if job.metaData?.jobName.length <= 25}

web/frontend/src/generic/joblist/JobListRow.svelte

@@ -12,7 +12,7 @@
 
 <script>
   import { queryStore, gql, getContextClient } from "@urql/svelte";
-  import { getContext } from "svelte";
+  import { getContext, createEventDispatcher } from "svelte";
   import { Card, Spinner } from "@sveltestrap/sveltestrap";
   import { maxScope, checkMetricDisabled } from "../utils.js";
   import JobInfo from "./JobInfo.svelte";
@@ -25,7 +25,9 @@
   export let plotHeight = 275;
   export let showFootprint;
   export let triggerMetricRefresh = false;
+  export let previousSelect = false;
 
+  const dispatch = createEventDispatcher();
   const resampleConfig = getContext("resampling") || null;
   const resampleDefault = resampleConfig ? Math.max(...resampleConfig.resolutions) : 0;
   
@@ -38,6 +40,8 @@
   let selectedResolution = resampleDefault;
   let zoomStates = {};
   let thresholdStates = {};
+  
+  $: isSelected = previousSelect || null;
 
   const cluster = getContext("clusters").find((c) => c.name == job.cluster);
   const client = getContextClient();
@@ -112,6 +116,12 @@
     refreshMetrics();
   }
 
+  $: if (isSelected == true && previousSelect == false) {
+    dispatch("select-job", job.id)
+  } else if (isSelected == false && previousSelect == true) {
+    dispatch("unselect-job", job.id)
+  }
+
   // Helper
   const selectScope = (jobMetrics) =>
     jobMetrics.reduce(
@@ -152,7 +162,7 @@
 
 <tr>
   <td>
-    <JobInfo {job} />
+    <JobInfo {job} bind:isSelected showSelect/>
   </td>
   {#if job.monitoringStatus == 0 || job.monitoringStatus == 2}
     <td colspan={metrics.length}>