Added confidences to stores export

src/components/graphs/knngraph/KnnModelGraph.svelte

@@ -7,7 +7,7 @@
   import { onMount } from 'svelte';
   import KNNModelGraphController from './KNNModelGraphController';
   import * as d3 from 'd3';
-  import { classifier, gestures } from '../../../script/stores/Stores';
+  import { classifier, gestures, confidences } from '../../../script/stores/Stores';
   import ClassifierFactory from '../../../script/domain/ClassifierFactory';
   import KnnModelGraphSvgWithControls from './KnnModelGraphSvgWithControls.svelte';
   import { extractAxisFromTrainingData } from '../../../script/utils/graphUtils';
@@ -18,6 +18,7 @@
   import PerformanceProfileTimer from '../../../script/utils/PerformanceProfileTimer';
   import { classColors, classColorShades } from './KNNModelGraphDrawer';
   import StaticConfiguration from '../../../StaticConfiguration';
+  import { derived } from 'svelte/store';
 
   let controllerSingleX: KNNModelGraphController | undefined;
   let controllerSingleY: KNNModelGraphController | undefined;
@@ -78,15 +79,16 @@
     <AxesFilterVector />
     <div class="flex flex-col ml-2 justify-center mt-2">
       {#each $gestures as gesture, index}
-        <div class="flex flex-row justify-start">
-          <div class="flex flex-row justify-center">
+        <div class="flex flex-row justify-between">
+          <div class="flex flex-row">
             <div class="flex flex-col justify-center mr-1">
               <div
                 class="rounded-full w-3 h-3"
                 style={'background-color:' + StaticConfiguration.gestureColors[index]} />
             </div>
             <p>{gesture.name}</p>
           </div>
+          <p>{$confidences.get(gesture.ID).currentConfidence.toFixed(3) * 100}%</p>
         </div>
       {/each}
     </div>

src/script/stores/Stores.ts

@@ -15,6 +15,7 @@ import Gestures from '../domain/stores/gesture/Gestures';
 import Classifier from '../domain/stores/Classifier';
 import Engine from '../domain/stores/Engine';
 import LiveData from '../domain/stores/LiveData';
+import { derived } from 'svelte/store';
 
 const repositories: Repositories = new LocalStorageRepositories();
 
@@ -29,6 +30,16 @@ const liveAccelerometerData: LiveData<MicrobitAccelerometerData> =
 
 const engine: Engine = new PollingPredictorEngine(classifier, liveAccelerometerData);
 
+// I'm not sure if this one should be 
+const confidences = derived([gestures, ...gestures.getGestures()], stores => {
+  const confidenceMap = new Map();
+
+  const [gestures, ...gestureStores] = stores
+  gestureStores.forEach(store => {
+    confidenceMap.set(store.ID, store.confidence);
+  });
+  return confidenceMap;
+});
 // Export the stores here. Please be mindful when exporting stores, avoid whenever possible.
 // This helps us avoid leaking too many objects, that aren't meant to be interacted with
-export { engine, gestures, classifier, liveAccelerometerData };
+export { engine, gestures, classifier, liveAccelerometerData, confidences };