Prevent high job counts in compare view by filter removal

web/frontend/src/Jobs.root.svelte

@@ -99,6 +99,7 @@
   </Col>
   <Col lg="4" class="mb-1 mb-lg-0">
     <Filters
+      showFilter={!showCompare}
       {filterPresets}
       matchedJobs={showCompare? matchedCompareJobs: matchedListJobs}
       bind:this={filterComponent}
@@ -136,18 +137,20 @@
   </Col>
   <Col lg="2" class="mb-2 mb-lg-0">
     <ButtonGroup class="w-100">
-      <Button color="primary" on:click={() => {
+      <Button color="primary" disabled={matchedListJobs >= 500 && !(selectedJobs.length != 0)} on:click={() => {
         if (selectedJobs.length != 0) filterComponent.updateFilters({dbId: selectedJobs})
-        else if (selectedJobs.length == 0) filterComponent.updateFilters({dbId: []})
         showCompare = !showCompare
       }} >
-        {showCompare ? 'List' : 'Compare'} Jobs {selectedJobs.length != 0 ? `(${selectedJobs.length} selected)` : `(Use Filter)`}
+        {showCompare ? 'Return to List' : 
+        'Compare Jobs' + (selectedJobs.length != 0 ? ` (${selectedJobs.length} selected)` : matchedListJobs >= 500 ? ` (Too Many)` : ``)}
       </Button>
-      <Button color="danger" disabled={selectedJobs.length == 0} on:click={() => {
+      {#if !showCompare && selectedJobs.length != 0}
+        <Button color="warning" on:click={() => {
           selectedJobs = [] // Only empty array, filters handled by reactive reset
         }}>
-      Reset
+        Clear
         </Button>
+      {/if}
     </ButtonGroup>
   </Col>
 </Row>

web/frontend/src/generic/Filters.svelte

@@ -44,6 +44,7 @@
   export let disableClusterSelection = false;
   export let startTimeQuickSelect = false;
   export let matchedJobs = -2;
+  export let showFilter = true;
 
   const startTimeSelectOptions = [
     { range: "", rangeLabel: "No Selection"},
@@ -253,6 +254,7 @@
 
 <!-- Dropdown-Button -->
 <ButtonGroup>
+  {#if showFilter}
     <ButtonDropdown class="cc-dropdown-on-hover mb-1" style="{(matchedJobs >= -1) ? '' : 'margin-right: 0.5rem;'}">
       <DropdownToggle outline caret color="success">
         <Icon name="sliders" />
@@ -307,6 +309,8 @@
         {/if}
       </DropdownMenu>
     </ButtonDropdown>
+  {/if}
+
   {#if matchedJobs >= -1}
     <Button class="mb-1" style="margin-right: 0.5rem;" disabled outline>
       {matchedJobs == -1 ? 'Loading ...' : `${matchedJobs} jobs`}
@@ -314,6 +318,7 @@
   {/if}
 </ButtonGroup>
 
+{#if showFilter}
   <!-- SELECTED FILTER PILLS -->
   {#if filters.cluster}
     <Info icon="cpu" on:click={() => (isClusterOpen = true)}>
@@ -418,6 +423,7 @@
         .join(", ")}
     </Info>
   {/if}
+{/if}
 
 <Cluster
   {disableClusterSelection}