format cleanup component arguments

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>

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>

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