Update `plot-benchmarks` to use Svelte 5.0.

Test: Ran the app locally.
Change-Id: I7f0ed08b67bce54af608919cd621d7eef00e76bd

development/plot-benchmarks/src/lib/Chart.svelte

diff --git a/development/plot-benchmarks/src/lib/Chart.svelte b/development/plot-benchmarks/src/lib/Chart.svelte
index edf6584..c1143bf 100644
--- a/development/plot-benchmarks/src/lib/Chart.svelte
+++ b/development/plot-benchmarks/src/lib/Chart.svelte
@@ -15,13 +15,6 @@
   export let isExperimental: boolean = false;
   export let showHistogramControls: boolean = false;
 
-  $: {
-    if ($chart) {
-      $chart.data = data;
-      $chart.update();
-    }
-  }
-
   // State
   let controlsDispatcher = createEventDispatcher<ControlsEvent>();
   let element: HTMLCanvasElement;
@@ -29,13 +22,20 @@
   let chart: Writable<Chart | null> = writable(null);
   let items: Writable<LegendItem[] | null> = writable(null);
 
+  $: {
+    if ($chart) {
+      $chart.data = data;
+      $chart.update();
+    }
+  }
+
   // Effects
   onMount(() => {
-    const onUpdate = (chart: Chart) => {
-      $chart = chart;
+    const onUpdate = (updated: Chart) => {
+      $chart = updated;
       // Bad typings.
-      const legend = chart.options.plugins?.legend as any;
-      $items = legend.labels.generateLabels(chart);
+      const legend = updated.options.plugins?.legend as any;
+      $items = legend.labels.generateLabels($chart);
     };
     const plugins = {
       tooltip: {
@@ -103,7 +103,7 @@
       ⎘
     </button>
   </div>
-  <canvas class="chart" bind:this={element} />
+  <canvas class="chart" bind:this={element}> </canvas>
   {#if showHistogramControls}
     <div class="controls">
       <label for="buckets">

development/plot-benchmarks/src/lib/Legend.svelte

diff --git a/development/plot-benchmarks/src/lib/Legend.svelte b/development/plot-benchmarks/src/lib/Legend.svelte
index 2795fb2..05edbf5 100644
--- a/development/plot-benchmarks/src/lib/Legend.svelte
+++ b/development/plot-benchmarks/src/lib/Legend.svelte
@@ -4,7 +4,7 @@
   export let items: LegendItem[];
 
   const handlerFactory = (item: LegendItem) => {
-    return (event: Event) => {
+    return (_: Event) => {
       if (item.datasetIndex !== undefined) {
         // https://www.chartjs.org/docs/latest/samples/legend/html.html
         chart.setDatasetVisibility(
@@ -29,7 +29,7 @@
       <span
         class="box"
         style="background: {item.fillStyle}; border-color: {item.strokeStyle}; border-width: {item.lineWidth}px;"
-      />
+      ></span>
       <span
         class="label"
         style="text-decoration: {item.hidden ? 'line-through' : ''};"

development/plot-benchmarks/src/lib/Session.svelte

diff --git a/development/plot-benchmarks/src/lib/Session.svelte b/development/plot-benchmarks/src/lib/Session.svelte
index 25576af..58524b5 100644
--- a/development/plot-benchmarks/src/lib/Session.svelte
+++ b/development/plot-benchmarks/src/lib/Session.svelte
@@ -114,7 +114,7 @@
     session = new Session(fileEntries);
     mapper = buildMapper($buckets);
     metrics = Transforms.buildMetrics(session, $suppressed, $suppressedMetrics);
-    showControls = metrics.sampled && metrics.sampled.length > 0;
+    showControls = Array.isArray(metrics.sampled) && metrics.sampled.length > 0;
     activeSeries = service.pSeries(metrics, $active);
     series = ChartDataTransforms.mapToSeries(
       metrics,
@@ -145,16 +145,19 @@
   }
 
   async function handleFileDragDrop(event: DragEvent) {
-    const items = [...event.dataTransfer.items];
+    const items = [...event.dataTransfer?.items || []];
     if (items) {
       let newFiles = await Promise.all(
         items
           .filter(
-            (item) =>
-              item.kind === "file" && item.getAsFile().name.endsWith(".json")
+            (item) => {
+              const file = item.getAsFile()
+              return item.kind === "file" && file && file.name.endsWith(".json")
+            }
           )
           .map(async (item) => {
-            const file = item.getAsFile();
+            // At this point, we know the file had some JSON content.
+            const file = item.getAsFile()!!;
             const benchmarks = await readBenchmarks(file);
             const entry: FileMetadata = {
               enabled: true,
@@ -230,7 +233,7 @@
   {/if}
 
   {#await activeSeries}
-    <article aria-busy="true" />
+    <article aria-busy="true"></article>
   {:then chartData}
     {#if chartData.length > 0}
       <Chart

development/plot-benchmarks/src/main.ts

diff --git a/development/plot-benchmarks/src/main.ts b/development/plot-benchmarks/src/main.ts
index 93a3c3f..dbada9e 100644
--- a/development/plot-benchmarks/src/main.ts
+++ b/development/plot-benchmarks/src/main.ts
@@ -1,8 +1,7 @@
+import { mount } from 'svelte';
 import './assets/overrides.css';
 import App from './lib/App.svelte';
 
-const app = new App({
-  target: document.getElementById('app')!!,
-});
+const app = mount(App, { target: document.getElementById("app")!! });
 
 export default app;