Add adaptive histogram sizing toggle

- Patches lagging filters in single-user view
-See comment in User.root.svelte for detail

web/frontend/src/User.root.svelte

@@ -1,7 +1,7 @@
 <script>
     import { onMount, getContext } from 'svelte'
     import { init } from './utils.js'
-    import { Table, Row, Col, Button, Icon, Card, Spinner } from 'sveltestrap'
+    import { Table, Row, Col, Button, Icon, Card, Spinner, Input } from 'sveltestrap'
     import { queryStore, gql, getContextClient } from '@urql/svelte'
     import Filters from './filters/Filters.svelte'
     import JobList from './joblist/JobList.svelte'
@@ -25,6 +25,13 @@
     let metrics = ccconfig.plot_list_selectedMetrics, isMetricsSelectionOpen = false
     let w1, w2, histogramHeight = 250
     let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null
+    let resize = false 
+    /* Resize Context 
+    *  A) Each viewport change triggers histogram rerender due to variable dimensions clearing canvas if not rerendered
+    *  B) Opening filters (and some other things) triggers small change in viewport dimensions (Fix here?)
+    *  A+B) Histogram rerenders if filters opened, high performance impact if dataload heavy
+    *  Solution: Default to fixed histogram dimensions, allow user to enable automatic resizing
+    */
 
     const client = getContextClient();
     $: stats = queryStore({
@@ -130,27 +137,47 @@
                         <th scope="row">Total Core Hours</th>
                         <td>{$stats.data.jobsStatistics[0].totalCoreHours}</td>
                     </tr>
+                    <tr>
+                        <th scope="row">Toggle Histogram Resizing</th>
+                        <td><Input id="c3" value={resize} type="switch" on:change={() => (resize = !resize)}/></td>
+                    </tr>
                 </tbody>
             </Table>
         </Col>
         <div class="col-4" style="text-align: center;" bind:clientWidth={w1}>
             <b>Duration Distribution</b>
             {#key $stats.data.jobsStatistics[0].histDuration}
+                {#if resize == true}
                 <Histogram
                     data={$stats.data.jobsStatistics[0].histDuration}
                     width={w1 - 25} height={histogramHeight}
                     xlabel="Current Runtimes [h]" 
                     ylabel="Number of Jobs"/>
+                {:else}
+                <Histogram
+                    data={$stats.data.jobsStatistics[0].histDuration}
+                    width={400} height={250}
+                    xlabel="Current Runtimes [h]" 
+                    ylabel="Number of Jobs"/>
+                {/if}
             {/key}
         </div>
         <div class="col-4" style="text-align: center;" bind:clientWidth={w2}>
             <b>Number of Nodes Distribution</b>
             {#key $stats.data.jobsStatistics[0].histNumNodes}
+                {#if resize == true}
                 <Histogram
                     data={$stats.data.jobsStatistics[0].histNumNodes}
                     width={w2 - 25} height={histogramHeight}
                     xlabel="Allocated Nodes [#]"
                     ylabel="Number of Jobs" />
+                {:else}
+                <Histogram
+                    data={$stats.data.jobsStatistics[0].histNumNodes}
+                    width={400} height={250}
+                    xlabel="Allocated Nodes [#]"
+                    ylabel="Number of Jobs" />
+                {/if}
             {/key}
         </div>
     {/if}