improve job list toolbar layouting, smaller layout fixes

web/frontend/src/User.root.svelte

@@ -13,6 +13,7 @@
     Row,
     Col,
     Button,
+    ButtonGroup,
     Icon,
     Card,
     Spinner,
@@ -48,6 +49,7 @@
   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;
   let jobFilters = [];
+  let matchedJobs = 0;
   let sorting = { field: "startTime", type: "col", order: "DESC" },
     isSortingOpen = false;
   let metrics = ccconfig.plot_list_selectedMetrics,
@@ -103,41 +105,41 @@
   onMount(() => filterComponent.updateFilters());
 </script>
 
-<Row>
-  {#if $initq.fetching}
+<!-- ROW1: Status-->
+{#if $initq.fetching}
+  <Row>
     <Col>
       <Spinner />
     </Col>
-  {:else if $initq.error}
-    <Col xs="auto">
+  </Row>
+{:else if $initq.error}
+  <Row>
+    <Col>
       <Card body color="danger">{$initq.error.message}</Card>
     </Col>
-  {/if}
+  </Row>
+{/if}
 
-  <Col xs="auto">
-    <Button outline color="primary" on:click={() => (isSortingOpen = true)}>
-      <Icon name="sort-up" /> Sorting
-    </Button>
-
-    <Button
-      outline
-      color="primary"
-      on:click={() => (isMetricsSelectionOpen = true)}
-    >
-      <Icon name="graph-up" /> Metrics
-    </Button>
-
-    <Button
-      outline
-      color="secondary"
-      on:click={() => (isHistogramSelectionOpen = true)}
-    >
-      <Icon name="bar-chart-line" /> Select Histograms
-    </Button>
+<!-- ROW2: Tools-->
+<Row cols={{ xs: 1, md: 2, lg: 4}} class="mb-3">
+  <Col lg="2" class="mb-2 mb-lg-0">
+    <ButtonGroup class="w-100">
+      <Button outline color="primary" on:click={() => (isSortingOpen = true)}>
+        <Icon name="sort-up" /> Sorting
+      </Button>
+      <Button
+        outline
+        color="primary"
+        on:click={() => (isMetricsSelectionOpen = true)}
+      >
+        <Icon name="graph-up" /> Metrics
+      </Button>
+    </ButtonGroup>
   </Col>
-  <Col xs="auto">
+  <Col lg="4" xl="6" class="mb-1 mb-lg-0">
     <Filters
       {filterPresets}
+      {matchedJobs}
       startTimeQuickSelect={true}
       bind:this={filterComponent}
       on:update-filters={({ detail }) => {
@@ -149,20 +151,21 @@
       }}
     />
   </Col>
-  <Col xs="auto" style="margin-left: auto;">
+  <Col lg="3" xl="2" class="mb-2 mb-lg-0">
     <TextFilter
       on:set-filter={({ detail }) => filterComponent.updateFilters(detail)}
     />
   </Col>
-  <Col xs="auto">
+  <Col lg="3" xl="2" class="mb-1 mb-lg-0">
     <Refresher on:refresh={() => {
       jobList.refreshJobs()
       jobList.refreshAllMetrics()
     }} />
   </Col>
 </Row>
-<br />
-<Row cols={{ xs: 1, md: 3}}>
+
+<!-- ROW3: Base Information-->
+<Row cols={{ xs: 1, md: 3}} class="mb-2">
   {#if $stats.error}
     <Col>
       <Card body color="danger">{$stats.error.message}</Card>
@@ -210,12 +213,12 @@
         </tbody>
       </Table>
     </Col>
-    <Col class="text-center">
+    <Col class="px-1">
       <div bind:clientWidth={w1}>
         {#key $stats.data.jobsStatistics[0].histDuration}
           <Histogram
             data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
-            width={w1 - 25}
+            width={w1}
             height={histogramHeight}
             title="Duration Distribution"
             xlabel="Current Runtimes"
@@ -226,12 +229,12 @@
         {/key}
       </div>
     </Col>
-    <Col class="text-center">
+    <Col class="px-1">
       <div bind:clientWidth={w2}>
         {#key $stats.data.jobsStatistics[0].histNumNodes}
           <Histogram
             data={convert2uplot($stats.data.jobsStatistics[0].histNumNodes)}
-            width={w2 - 25}
+            width={w2}
             height={histogramHeight}
             title="Number of Nodes Distribution"
             xlabel="Allocated Nodes"
@@ -245,7 +248,19 @@
   {/if}
 </Row>
 
-{#if metricsInHistograms}
+<!-- ROW4+5: Selectable Histograms -->
+<Row cols={{ xs: 1, md: 5}}>
+  <Col>
+    <Button
+      outline
+      color="secondary"
+      on:click={() => (isHistogramSelectionOpen = true)}
+    >
+      <Icon name="bar-chart-line" /> Select Histograms
+    </Button>
+  </Col>
+</Row>
+{#if metricsInHistograms?.length > 0}
   {#if $stats.error}
     <Row>
       <Col>
@@ -259,6 +274,7 @@
       </Col>
     </Row>
   {:else}
+    <hr class="my-2"/>
     {#key $stats.data.jobsStatistics[0].histMetrics}
       <PlotGrid
         let:item
@@ -281,11 +297,24 @@
       </PlotGrid>
     {/key}
   {/if}
+{:else}
+  <Row class="mt-2">
+    <Col>
+      <Card body>No footprint histograms selected.</Card>
+    </Col>
+  </Row>
 {/if}
-<br />
-<Row>
+
+<!-- ROW6: JOB LIST-->
+<Row class="mt-3">
   <Col>
-    <JobList bind:metrics bind:sorting bind:this={jobList} bind:showFootprint />
+    <JobList
+      bind:this={jobList} 
+      bind:matchedJobs
+      bind:metrics
+      bind:sorting
+      bind:showFootprint
+    />
   </Col>
 </Row>