Rework histogramselection, fix reactivity

web/frontend/src/HistogramSelection.svelte

@@ -1,13 +1,16 @@
 <script>
     import { Modal, ModalBody, ModalHeader, ModalFooter,
-             Button, ListGroup, ListGroupItem, Icon } from 'sveltestrap'
+             Button, ListGroup, ListGroupItem } from 'sveltestrap'
     import { gql, getContextClient , mutationStore } from '@urql/svelte'
 
     export let cluster
     export let availableMetrics = ['cpu_load', 'flops_any', 'mem_bw']
     export let metricsInHistograms
+    export let isOpen
+
+    let pendingMetrics = [...metricsInHistograms] // Copy
+    const client = getContextClient()
 
-    const client = getContextClient();
     const updateConfigurationMutation = ({ name, value }) => {
         return mutationStore({
             client: client,
@@ -18,8 +21,6 @@
         })
     }
 
-    let isHistogramConfigOpen = false
-
     function updateConfiguration(data) {
         updateConfigurationMutation({
                 name: data.name,
@@ -31,43 +32,35 @@
             }
         })
     }
+
+    function closeAndApply() {
+        metricsInHistograms = [...pendingMetrics] // Set for parent
+
+        updateConfiguration({
+            name: cluster ? `user_view_histogramMetrics:${cluster}` : 'user_view_histogramMetrics',
+            value: metricsInHistograms
+        })
+
+        isOpen = false
+    }
 </script>
 
-<Button outline
-    on:click={() => (isHistogramConfigOpen = true)}>
-    <Icon name=""/>
-    Select Histograms
-</Button>
-
-<Modal isOpen={isHistogramConfigOpen}
-    toggle={() => (isHistogramConfigOpen = !isHistogramConfigOpen)}>
+<Modal {isOpen}
+    toggle={() => (isOpen = !isOpen)}>
     <ModalHeader>
         Select metrics presented in histograms
     </ModalHeader>
     <ModalBody>
         <ListGroup>
-            <!-- <li class="list-group-item">
-                <input type="checkbox" bind:checked={pendingShowFootprint}> Show Footprint
-            </li>
-            <hr/> -->
             {#each availableMetrics as metric (metric)}
                 <ListGroupItem>
-                    <input type="checkbox" bind:group={metricsInHistograms}
-                        value={metric}
-                        on:change={() => updateConfiguration({
-                            name: cluster ? `user_view_histogramMetrics:${cluster}` : 'user_view_histogramMetrics',
-                            value: metricsInHistograms
-                        })} />
-
+                    <input type="checkbox" bind:group={pendingMetrics} value={metric}>
                     {metric}
                 </ListGroupItem>
             {/each}
         </ListGroup>
     </ModalBody>
     <ModalFooter>
-        <Button color="primary"
-            on:click={() => (isHistogramConfigOpen = false)}>
-            Close
-        </Button>
+        <Button color="primary" on:click={closeAndApply}> Close & Apply </Button>
     </ModalFooter>
 </Modal>

web/frontend/src/User.root.svelte

@@ -25,9 +25,10 @@
     let jobFilters = [];
     let sorting = { field: 'startTime', order: 'DESC' }, isSortingOpen = false
     let metrics = ccconfig.plot_list_selectedMetrics, isMetricsSelectionOpen = false
-    let w1, w2, histogramHeight = 250
+    let w1, w2, histogramHeight = 250, isHistogramSelectionOpen = false
     let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null
-    let metricsInHistograms = ccconfig[`user_view_histogramMetrics:${selectedCluster}`] || ccconfig.user_view_histogramMetrics || []
+
+    $: metricsInHistograms = selectedCluster ? ccconfig[`user_view_histogramMetrics:${selectedCluster}`] : (ccconfig.user_view_histogramMetrics || [])
 
     const client = getContextClient();
     $: stats = queryStore({
@@ -73,9 +74,11 @@
             <Icon name="graph-up"/> Metrics
         </Button>
 
-        <HistogramSelection
-        bind:cluster={selectedCluster}
-        bind:metricsInHistograms={metricsInHistograms}/>
+        <Button
+            outline color="secondary"
+            on:click={() => (isHistogramSelectionOpen = true)}>
+            <Icon name="bar-chart-line"/> Select Histograms
+        </Button>
     </Col>
     <Col xs="auto">
         <Filters
@@ -193,7 +196,7 @@
                             title="Distribution of '{item.metric}'"
                             xlabel={`${item.metric} bin maximum [${item.unit}]`}
                             xunit={item.unit}
-                            ylabel="Count [Jobs]"
+                            ylabel="Number of Jobs"
                             yunit="Jobs"/>
                     </PlotTable>
                 {/key}
@@ -219,4 +222,9 @@
     bind:cluster={selectedCluster}
     configName="plot_list_selectedMetrics"
     bind:metrics={metrics}
-    bind:isOpen={isMetricsSelectionOpen} />
+    bind:isOpen={isMetricsSelectionOpen} />
+
+    <HistogramSelection
+    bind:cluster={selectedCluster}
+    bind:metricsInHistograms={metricsInHistograms}
+    bind:isOpen={isHistogramSelectionOpen} />