Initial migration to Svelte5 via full syntax compatability

- updated all dependencies
- removed svelte-chartjs wrapper from dependencies
- sveltestrap causes compilation warnings (once)
- Header.svelte uses new Svelte5 syntax as example
- fixed most initial compilation warnings except circular dependencies with TBD cause

web/frontend/src/generic/joblist/JobInfo.svelte

@@ -91,15 +91,15 @@
     </span>
     {#if job.metaData?.jobName}
       {#if job.metaData?.jobName.length <= 25}
-        <div>{job.metaData.jobName}</div>
+        <span>{job.metaData.jobName}</span>
       {:else}
-        <div
+        <span
           class="truncate"
           style="cursor:help;"
           title={job.metaData.jobName}
         >
           {job.metaData.jobName}
-        </div>
+  </span>
       {/if}
     {/if}
     {#if job.arrayJobId}

web/frontend/src/generic/joblist/Pagination.svelte

@@ -28,13 +28,13 @@
     </div>
     <div class="cc-pagination-right">
         {#if !backButtonDisabled}
-        <button class="reset nav" type="button"
+        <button aria-label="page-reset"  class="reset nav" type="button"
             on:click|preventDefault="{reset}"></button>
-        <button class="left nav" type="button"
+        <button aria-label="page-back" class="left nav" type="button"
             on:click|preventDefault="{() => { page -= 1; }}"></button>
         {/if}
         {#if !nextButtonDisabled}
-        <button class="right nav" type="button"
+        <button aria-label="page-up" class="right nav" type="button"
             on:click|preventDefault="{() => { page += 1; }}"></button>
         {/if}
     </div>

web/frontend/src/generic/plots/Histogram.svelte

@@ -259,7 +259,7 @@
 <!-- Define Wrapper and NoData Card within $width -->
 <div bind:clientWidth={width}>
   {#if data.length > 0}
-    <div bind:this={plotWrapper} />
+    <div bind:this={plotWrapper}></div>
   {:else}
     <Card class="mx-4" body color="warning"
       >Cannot render histogram: No data!</Card

web/frontend/src/generic/plots/MetricPlot.svelte

@@ -607,7 +607,7 @@
 {#if series[0]?.data && series[0].data.length > 0}
   <div bind:this={plotWrapper} bind:clientWidth={width}
         style="background-color: {backgroundColor()};" class={forNode ? 'py-2 rounded' : 'rounded'}
-  />
+  ></div>
 {:else}
   <Card body color="warning" class="mx-4"
     >Cannot render plot: No series data returned for <code>{metric}</code></Card

web/frontend/src/generic/plots/Pie.svelte

@@ -1,5 +1,5 @@
 <!--
-    @component Pie Plot based on uPlot Pie
+    @component Pie Plot based on chart.js Pie
 
     Properties:
     - `size Number`: X and Y size of the plot, for square shape
@@ -31,33 +31,17 @@
     ]
 </script>
 <script>
-    import { Pie } from 'svelte-chartjs';
-    import {
-        Chart as ChartJS,
-        Title,
-        Tooltip,
-        Legend,
-        Filler,
-        ArcElement,
-        CategoryScale
-    } from 'chart.js';
-
-    ChartJS.register(
-        Title,
-        Tooltip,
-        Legend,
-        Filler,
-        ArcElement,
-        CategoryScale
-    );
+    import Chart from 'chart.js/auto'
+    import { onMount } from 'svelte';
 
+    export let canvasId
     export let size
     export let sliceLabel
     export let quantities
     export let entities
     export let displayLegend = false
 
-    $: data = {
+    const data = {
         labels: entities,
         datasets: [
             {
@@ -79,10 +63,22 @@
         }
     }
 
+    onMount(() => {
+        new Chart(
+            document.getElementById(canvasId),
+            {
+                type: 'pie',
+                data: data,
+                options: options
+            }
+        );
+	});
+
 </script>
 
+<!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
 <div class="chart-container" style="--container-width: {size}; --container-height: {size}">
-    <Pie {data} {options}/>
+    <canvas id={canvasId}></canvas>
 </div>
 
 <style>

web/frontend/src/generic/plots/Polar.svelte

@@ -1,5 +1,5 @@
 <!--
-    @component Polar Plot based on chartJS Radar
+    @component Polar Plot based on chart.js Radar
 
     Properties:
     - `footprintData [Object]?`: job.footprint content, evaluated in regards to peak config in jobSummary.svelte [Default: null]
@@ -11,29 +11,10 @@
  -->
 
 <script>
-    import { getContext } from 'svelte'
-    import { Radar } from 'svelte-chartjs';
-    import {
-        Chart as ChartJS,
-        Title,
-        Tooltip,
-        Legend,
-        Filler,
-        PointElement,
-        RadialLinearScale,
-        LineElement
-    } from 'chart.js';
-
-    ChartJS.register(
-        Title,
-        Tooltip,
-        Legend,
-        Filler,
-        PointElement,
-        RadialLinearScale,
-        LineElement
-    );
+    import { getContext, onMount } from 'svelte'
+    import Chart from 'chart.js/auto'
 
+    export let canvasId;
     export let footprintData = null;
     export let metrics = null;
     export let cluster = null;
@@ -183,10 +164,23 @@
         }
     }
 
+    onMount(() => {
+        new Chart(
+            document.getElementById(canvasId),
+            {
+                type: 'radar',
+                data: data,
+                options: options,
+                height: height
+            }
+        );
+    });
+
 </script>
 
+<!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
 <div class="chart-container">
-    <Radar {data} {options} {height}/>
+    <canvas id={canvasId}></canvas>
 </div>
 
 <style>

web/frontend/src/generic/plots/Roofline.svelte

@@ -363,7 +363,7 @@
 </script>
 
 {#if data != null}
-  <div bind:this={plotWrapper} class="p-2"/>
+  <div bind:this={plotWrapper} class="p-2"></div>
 {:else}
   <Card class="mx-4" body color="warning">Cannot render roofline: No data!</Card
   >

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

@@ -148,10 +148,13 @@
         <li
           class="cc-config-column list-group-item"
           draggable={true}
-          ondragover="return false"
-          on:dragstart={(event) => columnsDragStart(event, index)}
-          on:drop|preventDefault={(event) => columnsDrag(event, index)}
-          on:dragenter={() => (columnHovering = index)}
+          ondragover={() => false}
+          ondragstart={(event) => columnsDragStart(event, index)}
+          ondrop={(event) => {
+            event.preventDefault()
+            columnsDrag(event, index)
+          }}
+          ondragenter={() => (columnHovering = index)}
           class:is-active={columnHovering === index}
         >
           {#if unorderedMetrics.includes(metric)}