make hover tooltip on knn graph

features.json

@@ -1,4 +1,4 @@
 {
-  "title": "Learning tool",
+  "title": "ML-Machine",
   "knnModel": true
 }

src/components/graphs/knngraph/KNNModelGraphController.ts

@@ -27,7 +27,7 @@ class KNNModelGraphController {
   public constructor(
     svg: d3.Selection<d3.BaseType, unknown, HTMLElement, any>,
     private trainingDataGetter: () => TrainingData,
-    origin: { x: number, y: number },
+    origin: { x: number; y: number },
     classId: string,
     axis?: Axes,
   ) {
@@ -38,7 +38,7 @@ class KNNModelGraphController {
     this.scale = writable(100);
     this.origin = writable(origin);
 
-    // Derived store ensures, if any of the inputs are updated, the draw call will be called again
+    // Derived store ensures if any of the inputs are updated, the draw call will be called again
     derived(
       [
         this.rotationX,

src/components/graphs/knngraph/KNNModelGraphDrawer.ts

@@ -3,18 +3,9 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Writable } from 'svelte/store';
 import { Point3D, Point3DTransformed } from '../../../script/TypingUtils';
-import {
-  triangles3D,
-  cubes3D,
-  gridPlanes3D,
-  points3D,
-  lineStrips3D,
-  lines3D,
-} from 'd3-3d';
+import { gridPlanes3D, points3D, lines3D } from 'd3-3d';
 import { gestures } from '../../../script/stores/Stores';
-import PerformanceProfileTimer from '../../../script/utils/PerformanceProfileTimer';
 
 export type GraphDrawConfig = {
   xRot: number;
@@ -117,7 +108,27 @@ class KNNModelGraphDrawer {
       .attr('fill', color)
       .attr('cx', d => (isNaN(d.projected.x) ? 0 : d.projected.x))
       .attr('cy', d => (isNaN(d.projected.y) ? 0 : d.projected.y))
-      .attr('r', radius);
+      .attr('r', radius)
+      .on('mouseenter', (x, y) => {
+        const tooltip = document.getElementById(this.classId);
+        if (tooltip) {
+          tooltip.style.left = y.projected.x + 5 + 'px';
+          tooltip.style.top = y.projected.y + 10 + 'px';
+          tooltip.innerHTML = `
+            <div class="bg-secondary text-secondarytext z-1 p-1 font-bold">
+              <p>${y.x.toFixed(2)}</p>
+              <p>${y.y.toFixed(2)}</p>
+              <p>${y.z.toFixed(2)}</p>
+            </div>
+          `;
+        }
+      })
+      .on('mouseleave', () => {
+        const tooltip = document.getElementById(this.classId);
+        if (tooltip) {
+          tooltip.innerHTML = ``;
+        }
+      });
 
     if (!label) {
       return;

src/components/graphs/knngraph/KnnModelGraphSvgWithControls.svelte

@@ -69,6 +69,9 @@
 <div class:hidden>
   <button class="border-primary border-1 px-3" on:click={() => zoom(1.25)}>+</button>
   <button class="border-primary border-1 px-3" on:click={() => zoom(0.75)}>-</button>
+  <div class="relative">
+    <div class="absolute" id={classID} />
+  </div>
   <svg
     class={classID}
     {width}

src/script/engine/PollingPredictorEngine.ts

@@ -81,7 +81,7 @@ class PollingPredictorEngine implements Engine {
         .getSeries(StaticConfiguration.pollingPredictionSampleDuration, sampleSize);
     } catch (_e) {
       if (sampleSize < 8) {
-        return [] // The minimum number of points is 8, otherwise the filters will throw an exception
+        return []; // The minimum number of points is 8, otherwise the filters will throw an exception
       } else {
         return this.getRawDataFromBuffer(
           sampleSize - StaticConfiguration.pollingPredictionSampleSizeSearchStepSize,

src/script/stores/uiStore.ts

@@ -123,7 +123,6 @@ export enum MicrobitInteractions {
   AB,
 }
 
-
 export type ModelEntry = {
   id: string;
   title: string;
@@ -157,7 +156,7 @@ export const preferredModel = new PersistantWritable<DropdownOption>(
     label: defaultModel.label,
   },
   'prefferedModel',
-)
+);
 export const highlightedAxis = writable<Axes | undefined>(undefined);
 
 const initialMicrobitInteraction: MicrobitInteractions = MicrobitInteractions.AB;

src/script/utils/PerformanceProfileTimer.ts

@@ -26,7 +26,9 @@ class PerformanceProfileTimer {
     if (!PerformanceProfileTimer.timerMap.has(id)) {
       throw new Error('Timer wasnt started! You must call start first with the same id!');
     }
-    console.log(id + " took " + (Date.now() - PerformanceProfileTimer.timerMap.get(id)!) + "ms");
+    console.log(
+      id + ' took ' + (Date.now() - PerformanceProfileTimer.timerMap.get(id)!) + 'ms',
+    );
   }
 }
 

windi.config.js

@@ -10,16 +10,16 @@ export default {
   theme: {
     extend: {
       colors: {
-        primary: '#3a3a3a',
+        primary: '#2B5EA7',
         primarytext: '#000000',
-        secondary: '#a0a0a0',
+        secondary: '#2CCAC0',
         secondarytext: '#FFFFFF',
         info: '#98A2B3',
         backgrounddark: '#F5F5F5',
         backgroundlight: '#ffffff',
         infolight: '#93c5fd',
         link: '#258aff',
-        warning: '#ffaaaa',
+        warning: '#FF7777',
         disabled: '#8892A3',
         primaryborder: '#E5E7EB',
         infobglight: '#E7E5E4',