Migrate select components and adapt parents

web/frontend/src/generic/select/HistogramSelection.svelte

@@ -20,16 +20,24 @@
   } from "@sveltestrap/sveltestrap";
   import { gql, getContextClient, mutationStore } from "@urql/svelte";
 
-  export let cluster;
-  export let selectedHistograms;
-  export let isOpen;
+  /* Svelte 5 Props */
+  let {
+    cluster,
+    isOpen = $bindable(),
+    presetSelectedHistograms,
+    applyChange
+  } = $props();
 
+  /* Const Init */
   const client = getContextClient();
-  const initialized = getContext("initialized");
 
-  function loadHistoMetrics(isInitialized, thisCluster) {
-    if (!isInitialized) return [];
+  /* Derived */
+  let selectedHistograms = $derived(presetSelectedHistograms); // Non-Const Derived: Is settable
+  const availableMetrics = $derived(loadHistoMetrics(cluster));
 
+  /* Functions */
+  function loadHistoMetrics(thisCluster) {
+    // isInit Check Removed: Parent Component has finished Init-Query: Globalmetrics available here.
     if (!thisCluster) {
       return getContext("globalMetrics")
       .filter((gm) => gm?.footprint)
@@ -42,18 +50,6 @@
     }
   }
 
-  const updateConfigurationMutation = ({ name, value }) => {
-    return mutationStore({
-      client: client,
-      query: gql`
-        mutation ($name: String!, $value: String!) {
-          updateConfiguration(name: $name, value: $value)
-        }
-      `,
-      variables: { name, value },
-    });
-  };
-
   function updateConfiguration(data) {
     updateConfigurationMutation({
       name: data.name,
@@ -67,6 +63,7 @@
 
   function closeAndApply() {
     isOpen = !isOpen;
+    applyChange(selectedHistograms)
     updateConfiguration({
       name: cluster
         ? `user_view_histogramMetrics:${cluster}`
@@ -75,8 +72,18 @@
     });
   }
 
-  $: availableMetrics = loadHistoMetrics($initialized, cluster);
-
+  /* Mutation */
+  const updateConfigurationMutation = ({ name, value }) => {
+    return mutationStore({
+      client: client,
+      query: gql`
+        mutation ($name: String!, $value: String!) {
+          updateConfiguration(name: $name, value: $value)
+        }
+      `,
+      variables: { name, value },
+    });
+  };
 </script>
 
 <Modal {isOpen} toggle={() => (isOpen = !isOpen)}>