Update packages and make compatibility a store

package.json

@@ -15,10 +15,10 @@
     "prettier": "prettier --write src/."
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.23.5",
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
-    "@testing-library/svelte": "^4.0.0",
-    "@tsconfig/svelte": "^4.0.1",
+    "@babel/preset-env": "^7.24.4",
+    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@testing-library/svelte": "^4.1.0",
+    "@tsconfig/svelte": "^5.0.4",
     "@types/browser-lang": "^0.1.1",
     "@types/d3": "^7.4.1",
     "@types/js-cookie": "^3.0.3",
@@ -33,30 +33,30 @@
     "jsdom": "^23.0.1",
     "prettier": "^3.1.0",
     "prettier-plugin-svelte": "^3.1.2",
-    "svelte": "^4.0.0",
-    "svelte-check": "^3.6.2",
-    "svelte-preprocess": "^5.0.3",
+    "svelte": "^4.2.14",
+    "svelte-check": "^3.6.9",
+    "svelte-preprocess": "^5.1.3",
     "svelte-windicss-preprocess": "^4.2.2",
-    "tslib": "^2.5.0",
-    "typescript": "^5.0.4",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.5",
     "vite": "^5.2.8",
     "vite-plugin-environment": "^1.1.3",
     "vite-plugin-windicss": "^1.9.3",
-    "vitest": "^1.0.4"
+    "vitest": "^1.5.0"
   },
   "dependencies": {
-    "@microsoft/applicationinsights-web": "^3.0.0",
+    "@microsoft/applicationinsights-web": "^3.1.2",
     "@tensorflow-models/knn-classifier": "^1.2.6",
-    "@tensorflow/tfjs": "^4.4.0",
+    "@tensorflow/tfjs": "^4.17.0",
     "arrows-svg": "^1.8.0",
     "bowser": "^2.11.0",
     "browser-lang": "^0.2.1",
-    "chart.js": "^4.2.1",
-    "d3": "^7.8.5",
+    "chart.js": "^4.4.2",
+    "d3": "^7.9.0",
     "d3-3d": "^1.0.0",
     "dapjs": "^2.3.0",
-    "js-cookie": "^3.0.4",
-    "postcss": "^8.4.23",
+    "js-cookie": "^3.0.5",
+    "postcss": "^8.4.38",
     "smoothie": "^1.36.1",
     "svelte-i18n": "^4.0.0",
     "svelte-skeleton": "^1.3.1",

src/App.svelte

@@ -31,9 +31,8 @@
   import BottomBarMenuView from './views/BottomBarMenuView.svelte';
   import CookieBanner from './components/cookie-bannner/CookieBanner.svelte';
   import { fade } from 'svelte/transition';
-  import { state } from './script/stores/uiStore';
+  import { compatibility, state } from './script/stores/uiStore';
   import LoadingSpinner from './components/LoadingSpinner.svelte';
-  import { checkCompatibility } from './script/compatibility/CompatibilityChecker';
   import IncompatiblePlatformView from './views/IncompatiblePlatformView.svelte';
   import BluetoothIncompatibilityWarningDialog from './components/BluetoothIncompatibilityWarningDialog.svelte';
   import CookieManager from './script/CookieManager';
@@ -54,7 +53,7 @@
 </script>
 
 <Router>
-  {#if !checkCompatibility().platformAllowed}
+  {#if !$compatibility.platformAllowed}
     <!-- Denies mobile users access to the platform -->
     <IncompatiblePlatformView />
   {:else}

src/components/3d-inspector/View3D.svelte

@@ -15,7 +15,7 @@
   export let height: number;
   export let dataPoint: Vector3;
 
-  const webGlCompatible = compatibility.webGL;
+  const webGlCompatible = $compatibility.webGL;
 </script>
 
 {#if webGlCompatible}

src/components/graphs/knngraph/KNNModelGraphController.ts

@@ -12,6 +12,7 @@ import { classifier, liveAccelerometerData } from '../../../script/stores/Stores
 import { MicrobitAccelerometerData } from '../../../script/livedata/MicrobitAccelerometerData';
 import { TimestampedData } from '../../../script/domain/LiveDataBuffer';
 import Axes from '../../../script/domain/Axes';
+import PerformanceProfileTimer from '../../../script/utils/PerformanceProfileTimer';
 
 type SampleData = {
   value: number[];
@@ -30,6 +31,7 @@ class KNNModelGraphController {
   private scale: Writable<number>;
   private unsubscribeDerived: Unsubscriber;
   private graphDrawer: KNNModelGraphDrawer;
+  private trainingData: Point3D[][][];
 
   public constructor(
     svg: d3.Selection<d3.BaseType, unknown, HTMLElement, any>,
@@ -38,6 +40,7 @@ class KNNModelGraphController {
     classId: string,
     axis?: Axes,
   ) {
+    this.trainingData = this.trainingDataToPoints();
     this.graphDrawer = new KNNModelGraphDrawer(svg, classId);
     this.rotationX = writable(3);
     this.rotationY = writable(0.5);
@@ -146,10 +149,11 @@ class KNNModelGraphController {
       return { x: nums[0], y: nums[1], z: nums[2] };
     };
 
+    /* 
     const liveDataCombined = [
       [toPoint(filteredXs), toPoint(filteredYs), toPoint(filteredZs)],
     ];
-
+*/
     const liveData = [
       [
         toPoint(
@@ -158,9 +162,9 @@ class KNNModelGraphController {
       ],
     ];
 
-    const drawData = this.trainingDataToPoints(); // Training data
+    const drawData = [...this.trainingData];
     if (!filteredXs.includes(NaN)) {
-      drawData.push(axis ? liveData : liveDataCombined);
+      axis && drawData.push(liveData);
     }
     this.graphDrawer.draw(draw.config, drawData);
   }

src/script/stores/uiStore.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { get, writable } from 'svelte/store';
+import { Writable, derived, get, writable } from 'svelte/store';
 import {
   type CompatibilityStatus,
   checkCompatibility,
@@ -22,11 +22,11 @@ import { DropdownOption } from '../../components/buttons/Buttons';
 let text: (key: string, vars?: object) => string;
 t.subscribe(t => (text = t));
 
-export const compatibility: CompatibilityStatus = checkCompatibility();
+export const compatibility: Writable<CompatibilityStatus> = writable(checkCompatibility());
 
 export const chosenGesture = writable<Gesture | null>(null);
 
-export const isBluetoothWarningDialogOpen = writable<boolean>(!compatibility.bluetooth);
+export const isBluetoothWarningDialogOpen = derived(compatibility, stores => !stores.bluetooth);
 
 export enum ModelView {
   TILE,