Fix blinking arrows

Author: r59q

src/components/features/graphs/knngraph/AxesFilterVectorView.svelte

@@ -87,6 +87,8 @@
     };
   });
 
+  $: console.log($filters);
+
   unsubscribe = derived([highlightedAxis, classifier], s => s).subscribe(s => {
     init();
   });
@@ -114,7 +116,9 @@
             </div>
           {/each}
         </div>
+
         {#if $highlightedAxis.length === 1}
+          <!-- Name and blue arrow -->
           <div class="pl-30 flex flex-col justify-around">
             {#each $filters as filter, index}
               <p class="pl-1" id={`arrowTo${index}`}>{filter.getName()}</p>
@@ -128,7 +132,10 @@
                 width="20px" />
             {/each}
           </div>
-          <div class="flex flex-col justify-around w-12">
+
+          <!-- Numbers -->
+          <div
+            class="flex flex-col justify-around w-14 overflow-hidden whitespace-nowrap">
             {#each liveFilteredAxesData as val, index}
               <p style={`color:${StaticConfiguration.graphColors[index]}`}>
                 {val.toFixed(2)}

src/lib/domain/stores/Classifier.ts

@@ -22,37 +22,26 @@ import type { Vector } from '../Vector';
 
 type ClassifierData = {
   model: ModelData;
-  filteredInput: {
-    raw: Vector;
-    normalized: Vector;
-  };
 };
 
 class Classifier implements Readable<ClassifierData> {
-  private filteredInput: Writable<{ raw: Vector; normalized: Vector }>;
   constructor(
     private model: Model,
     private filters: Filters,
     private gestures: Readable<Gesture[]>,
     private confidenceSetter: (gestureId: GestureID, confidence: number) => void,
   ) {
-    this.filteredInput = writable({
-      raw: new BaseVector([]),
-      normalized: new BaseVector([]),
-    });
     Logger.log('classifier', 'Initialized classifier');
   }
 
   public subscribe(
     run: Subscriber<ClassifierData>,
     invalidate?: ((value?: ClassifierData | undefined) => void) | undefined,
   ): Unsubscriber {
-    return derived([this.model, this.filteredInput], stores => {
+    return derived([this.model], stores => {
       const modelStore = stores[0];
-      const filteredInputStore = stores[1];
       return {
         model: modelStore,
-        filteredInput: filteredInputStore,
       };
     }).subscribe(run, invalidate);
   }
@@ -62,10 +51,11 @@ class Classifier implements Readable<ClassifierData> {
    */
   public async classify(input: ClassifierInput): Promise<void> {
     const filteredInput = new BaseVector(input.getInput(this.filters));
-    const filteredInputNormalized = new BaseVector(
-      input.getNormalizedInput(this.filters),
-    );
-    this.filteredInput.set({ raw: filteredInput, normalized: filteredInputNormalized });
+    // Uncommented due to performance issues, caused too many re-renders
+    // const filteredInputNormalized = new BaseVector(
+    // input.getNormalizedInput(this.filters),
+    // );
+    // this.filteredInput.set({ raw: filteredInput, normalized: filteredInputNormalized });
     const predictions = await this.getModel().predict(filteredInput);
     predictions.forEach((confidence, index) => {
       const gesture = get(this.gestures)[index];