From 7d14086e5479f83410a17c4c9d4a577680e9b45d Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Wed, 6 Dec 2023 12:58:03 +0100
Subject: [PATCH] Rework histogramselection, fix reactivity

---
 web/frontend/package-lock.json             | 12 +++---
 web/frontend/src/HistogramSelection.svelte | 47 +++++++++-------------
 web/frontend/src/User.root.svelte          | 22 ++++++----
 3 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/web/frontend/package-lock.json b/web/frontend/package-lock.json
index a1067ba..f209306 100644
--- a/web/frontend/package-lock.json
+++ b/web/frontend/package-lock.json
@@ -333,9 +333,9 @@
       }
     },
     "node_modules/chart.js": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.0.tgz",
-      "integrity": "sha512-vQEj6d+z0dcsKLlQvbKIMYFHd3t8W/7L2vfJIbYcfyPcRx92CsHqECpueN8qVGNlKyDcr5wBrYAYKnfu/9Q1hQ==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz",
+      "integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==",
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -756,9 +756,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.24.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.24.0.tgz",
-      "integrity": "sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==",
+      "version": "5.25.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.25.0.tgz",
+      "integrity": "sha512-we0I9SIsfvNUMP77zC9HG+MylwYYsGFSBG8qm+13oud2Yh+O104y614FRbyjpxys16jZwot72Fpi827YvGzuqg==",
       "dev": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
diff --git a/web/frontend/src/HistogramSelection.svelte b/web/frontend/src/HistogramSelection.svelte
index c18a6a0..afef8c7 100644
--- a/web/frontend/src/HistogramSelection.svelte
+++ b/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>
diff --git a/web/frontend/src/User.root.svelte b/web/frontend/src/User.root.svelte
index 16f22d6..e216aa6 100644
--- a/web/frontend/src/User.root.svelte
+++ b/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} />
\ No newline at end of file
+    bind:isOpen={isMetricsSelectionOpen} />
+
+    <HistogramSelection
+    bind:cluster={selectedCluster}
+    bind:metricsInHistograms={metricsInHistograms}
+    bind:isOpen={isHistogramSelectionOpen} />
\ No newline at end of file