Added colors to gestures

src/components/Gesture.svelte

@@ -187,6 +187,10 @@
   <div class="items-center flex mb-1">
     <!-- Title of gesture-->
     <GestureTilePart mr small>
+      <div
+        class="absolute rounded-full w-3 h-3 m-3"
+        style={`background-color:${gesture.getColor()}`}>
+      </div>
       <div class="grid grid-cols-5 place-items-center p-2 w-50 h-30">
         <div
           class="w-40 col-start-2 col-end-5 text-center

src/components/filters/FilterListRow.svelte

@@ -55,21 +55,6 @@
           alt="data representation icon"
           class="w-6 hover:opacity-60 mr-0.5 cursor-pointer" />
       </div>
-      <!-- old icon
-      <div class="min-w-6 border-l-2">
-        <img
-          on:mouseenter={() => {
-            highlightedFilter.set(filterType);
-            showHighlighted.set(true);
-          }}
-          on:mouseleave={() => {
-            showHighlighted.set(false);
-          }}
-          src="imgs/ML_predict.svg"
-          alt="data representation icon"
-          class="w-6 hover:opacity-60 cursor-pointer" />
-      </div>
--->
     </div>
   </div>
 {/key}

src/components/graphs/knngraph/KNNModelGraphController.ts

@@ -30,6 +30,7 @@ class KNNModelGraphController {
   private rotationX: Writable<number>;
   private rotationY: Writable<number>;
   private rotationZ: Writable<number>;
+  private graphColors: string[];
   private origin: Writable<{ x: number; y: number }>;
   private scale: Writable<number>;
   private graphDrawer: KNNModelGraphDrawer;
@@ -46,6 +47,7 @@ class KNNModelGraphController {
     private trainingDataGetter: () => TrainingData,
     origin: { x: number; y: number },
     classId: string,
+    colors: string[],
     axis?: Axes,
   ) {
     this.filters = stores.getClassifier().getFilters();
@@ -56,6 +58,7 @@ class KNNModelGraphController {
     this.rotationZ = writable(0);
     this.scale = writable(100);
     this.origin = writable(origin);
+    this.graphColors = colors;
 
     const noOfPoints = this.trainingData
       .map(el => el.length)
@@ -112,7 +115,7 @@ class KNNModelGraphController {
     return [this.arrayToPoint(sample.value)];
   }
 
-  private getControllerData() {
+  private getControllerData(): { config: GraphDrawConfig, data: TimestampedData<MicrobitAccelerometerDataVector>[] } {
     const classifier = stores.getClassifier();
     const xRot = get(this.rotationX);
     const yRot = get(this.rotationY);
@@ -156,7 +159,8 @@ class KNNModelGraphController {
         zRot,
         origin,
         scale,
-      } as GraphDrawConfig,
+        colors: this.graphColors
+      },
       data: liveData,
     };
   }

src/components/graphs/knngraph/KNNModelGraphDrawer.ts

@@ -21,6 +21,7 @@ export type GraphDrawConfig = {
   zRot: number;
   origin: { x: number; y: number };
   scale: number;
+  colors: string[]; // The number of colors should be equal to the number of classes plus one for live data
 };
 
 export type GrahpDrawData = {
@@ -39,15 +40,17 @@ class KNNModelGraphDrawer {
   constructor(
     private svg: d3.Selection<d3.BaseType, unknown, HTMLElement, any>,
     private classId: string,
-  ) {}
+  ) { }
 
   public drawLiveData = (drawConfig: GraphDrawConfig, drawData: Point3D) => {
     if (isNaN(drawData.y)) {
       return;
     }
     const pointTransformer = this.getPointTransformer(drawConfig);
-    const color =
-      StaticConfiguration.gestureColors[stores.getGestures().getNumberOfGestures()];
+    const color = drawConfig.colors.slice(-1)[0] // Fetch the last element of the colors array
+    if (!color) {
+      throw new Error('No color available for live data');
+    }
     const drawableLivePoint: DrawablePoint = {
       pointTransformed: pointTransformer(drawData),
       color,
@@ -118,7 +121,7 @@ class KNNModelGraphDrawer {
     drawData.forEach((clazz, classIndex) => {
       clazz.forEach((sample, exampleIndex) => {
         sample.forEach((axisValue, axisIndex) => {
-          const color = StaticConfiguration.gestureColors[classIndex];
+          const color = drawConfig.colors[classIndex];
           const transformedPoint: Point3DTransformed = pointTransformer(axisValue);
           this.drawnTrainingPoints.push(transformedPoint);
           drawablePoints.push({

src/components/graphs/knngraph/KnnModelGraph.svelte

@@ -16,6 +16,7 @@
   import KnnPointToolTipView from './KnnPointToolTipView.svelte';
   import { stores } from '../../../script/stores/Stores';
   import { get } from 'svelte/store';
+  import StaticConfiguration from '../../../StaticConfiguration';
 
   const classifierFactory = new ClassifierFactory();
 
@@ -51,11 +52,19 @@
 
   const initSingle = (axis: Axes) => {
     const svgSingle = d3.select('.d3-3d-single');
+    const graphColors = [
+      ...$gestures.map(data => data.color),
+      StaticConfiguration.gestureColors[$gestures.length],
+    ];
+    if (graphColors.length <= $gestures.length) {
+      throw new Error('Not enough colors');
+    }
     const controller = new KNNModelGraphController(
       svgSingle,
       () => dataGetter(),
       { x: canvasWidth / 2, y: canvasHeight / 2 },
       'd3-3d-single-',
+      graphColors,
       axis,
     );
     return controller;

src/components/output/OutputGestureStack.svelte

@@ -194,6 +194,10 @@
 <main class="mb-4 items-center flex flex-row">
   <!-- NAMES AND CONFIDENCE METER -->
   <GestureTilePart>
+    <div
+      class="absolute rounded-full w-3 h-3 m-3"
+      style={`background-color:${gesture.getColor()}`}>
+    </div>
     <div class="items-center flex p-2">
       <div
         class="w-36 text-center font-semibold rounded-xl