diff --git a/web/frontend/src/Analysis.root.svelte b/web/frontend/src/Analysis.root.svelte
index afad314..e47a81e 100644
--- a/web/frontend/src/Analysis.root.svelte
+++ b/web/frontend/src/Analysis.root.svelte
@@ -353,10 +353,10 @@
   </Col>
   <Col xs="auto">
     <Filters
+      disableClusterSelection
+      startTimeQuickSelect
       bind:this={filterComponent}
       {filterPresets}
-      disableClusterSelection={true}
-      startTimeQuickSelect={true}
       applyFilters={(detail) => {
         jobFilters = detail.filters;
       }}
@@ -565,8 +565,8 @@
       <!-- Note: Ignore '#snippet' Error in IDE -->
       {#snippet histoGridContent(item)}
         <Histogram
+          usesBins
           data={convert2uplot(item.bins)}
-          usesBins={true}
           title="Average Distribution of '{item.metric}'"
           xlabel={`${item.metric} bin maximum [${metricUnits[item.metric]}]`}
           xunit={`${metricUnits[item.metric]}`}
diff --git a/web/frontend/src/List.root.svelte b/web/frontend/src/List.root.svelte
index bcebd14..38ffe9e 100644
--- a/web/frontend/src/List.root.svelte
+++ b/web/frontend/src/List.root.svelte
@@ -127,9 +127,9 @@
   </Col>
   <Col xs="12" md="7" lg="8" xl="9">
     <Filters
+      startTimeQuickSelect
       bind:this={filterComponent}
       {filterPresets}
-      startTimeQuickSelect={true}
       menuText="Only {type.toLowerCase()}s with jobs that match the filters will show up"
       applyFilters={(detail) => {
         jobFilters = detail.filters;
diff --git a/web/frontend/src/Node.root.svelte b/web/frontend/src/Node.root.svelte
index aaa7836..894ccd9 100644
--- a/web/frontend/src/Node.root.svelte
+++ b/web/frontend/src/Node.root.svelte
@@ -217,7 +217,7 @@
             cluster={clusters.find((c) => c.name == cluster)}
             subCluster={$nodeMetricsData.data.nodeMetrics[0].subCluster}
             series={item.metric.series}
-            forNode={true}
+            forNode
           />
         {:else if item.disabled === true && item.metric}
           <Card style="margin-left: 2rem;margin-right: 2rem;" body color="info"
diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 7e7fc0c..5c36689 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -460,7 +460,7 @@
         <div bind:clientWidth={plotWidths[i]}>
           {#key $mainQuery.data.nodeMetrics}
             <Roofline
-              allowSizeChange={true}
+              allowSizeChange
               width={plotWidths[i] - 10}
               height={300}
               subCluster={subCluster}
@@ -680,12 +680,12 @@
     {#snippet gridContent(item)}
       <Histogram
         data={convert2uplot(item.data)}
-        usesBins={true}
         title="Distribution of '{item.metric}' averages"
         xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`}
         xunit={item.unit}
         ylabel="Number of Jobs"
         yunit="Jobs"
+        usesBins
       />
     {/snippet}
     
diff --git a/web/frontend/src/User.root.svelte b/web/frontend/src/User.root.svelte
index 99061d8..9a3548a 100644
--- a/web/frontend/src/User.root.svelte
+++ b/web/frontend/src/User.root.svelte
@@ -173,10 +173,10 @@
   </Col>
   <Col lg="4" class="mb-1 mb-lg-0">
     <Filters
+      startTimeQuickSelect
       bind:this={filterComponent}
       {filterPresets}
       matchedJobs={matchedListJobs}
-      startTimeQuickSelect={true}
       applyFilters={(detail) => {
         jobFilters = [...detail.filters, { user: { eq: user.username } }];
         selectedCluster = jobFilters[0]?.cluster
diff --git a/web/frontend/src/generic/filters/Energy.svelte b/web/frontend/src/generic/filters/Energy.svelte
index 536510b..0589004 100644
--- a/web/frontend/src/generic/filters/Energy.svelte
+++ b/web/frontend/src/generic/filters/Energy.svelte
@@ -51,19 +51,19 @@
   <ModalFooter>
     <Button
       color="primary"
-      on:click={() => {
+      onclick={() => {
         isOpen = false;
         setFilter({ energy: energyState });
       }}>Close & Apply</Button
     >
     <Button
       color="danger"
-      on:click={() => {
+      onclick={() => {
         isOpen = false;
         energyState = {from: null, to: null};
         setFilter({ energy: energyState });
       }}>Reset</Button
     >
-    <Button on:click={() => (isOpen = false)}>Close</Button>
+    <Button onclick={() => (isOpen = false)}>Close</Button>
   </ModalFooter>
 </Modal>
diff --git a/web/frontend/src/generic/select/HistogramSelection.svelte b/web/frontend/src/generic/select/HistogramSelection.svelte
index 6f0d7db..2ece0ee 100644
--- a/web/frontend/src/generic/select/HistogramSelection.svelte
+++ b/web/frontend/src/generic/select/HistogramSelection.svelte
@@ -99,7 +99,7 @@
     </ListGroup>
   </ModalBody>
   <ModalFooter>
-    <Button color="primary" on:click={() => closeAndApply()}>Close & Apply</Button>
-    <Button color="secondary" on:click={() => (isOpen = !isOpen)}>Close</Button>
+    <Button color="primary" onclick={() => closeAndApply()}>Close & Apply</Button>
+    <Button color="secondary" onclick={() => (isOpen = !isOpen)}>Close</Button>
   </ModalFooter>
 </Modal>
diff --git a/web/frontend/src/generic/select/MetricSelection.svelte b/web/frontend/src/generic/select/MetricSelection.svelte
index ffbeac6..8f0f02c 100644
--- a/web/frontend/src/generic/select/MetricSelection.svelte
+++ b/web/frontend/src/generic/select/MetricSelection.svelte
@@ -174,8 +174,9 @@
       {/if}
       {#each listedMetrics as metric, index (metric)}
         <li
+          draggable
           class="cc-config-column list-group-item"
-          draggable={true}
+          class:is-active={columnHovering === index}
           ondragover={(event) => {
             event.preventDefault()
             return false
@@ -188,7 +189,6 @@
             columnsDrag(event, index)
           }}
           ondragenter={() => (columnHovering = index)}
-          class:is-active={columnHovering === index}
         >
           {#if pendingMetrics.includes(metric)}
             <input