Perfomance enhancements

src/components/graphs/knngraph/AxesFilterVector.svelte

@@ -5,7 +5,7 @@
  -->
 
 <script lang="ts">
-  import { Readable, derived, writable } from 'svelte/store';
+  import { Readable, derived } from 'svelte/store';
   import { classifier, liveAccelerometerData } from '../../../script/stores/Stores';
   import StaticConfiguration from '../../../StaticConfiguration';
   import Axes from '../../../script/domain/Axes';
@@ -25,11 +25,13 @@
             StaticConfiguration.pollingPredictionSampleSize,
           );
         const series = seriesTimestamped.map(s => s.value);
-        return classifier
+        const filteredSeries = classifier
           .getFilters()
           .compute(extractAxisFromAccelerometerData(series, axis));
+
+        return filteredSeries;
       } catch (e) {
-        console.log(e);
+        console.log('failed to derive livedata for vector', e);
         return Array(classifier.getFilters().count()).fill(0);
       }
     },

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[];
@@ -27,6 +28,7 @@ class KNNModelGraphController {
   public constructor(
     svg: d3.Selection<d3.BaseType, unknown, HTMLElement, any>,
     private trainingDataGetter: () => TrainingData,
+    origin: { x: number, y: number },
     classId: string,
     axis?: Axes,
   ) {
@@ -35,7 +37,7 @@ class KNNModelGraphController {
     this.rotationY = writable(0.5);
     this.rotationZ = writable(0);
     this.scale = writable(100);
-    this.origin = writable({ x: 250, y: 250 });
+    this.origin = writable(origin);
 
     // Derived store ensures, if any of the inputs are updated, the draw call will be called again
     derived(

src/components/graphs/knngraph/KNNModelGraphDrawer.ts

@@ -14,6 +14,7 @@ import {
   lines3D,
 } from 'd3-3d';
 import { gestures } from '../../../script/stores/Stores';
+import PerformanceProfileTimer from '../../../script/utils/PerformanceProfileTimer';
 
 export type GraphDrawConfig = {
   xRot: number;
@@ -37,15 +38,21 @@ const colorShades = {
 };
 
 class KNNModelGraphDrawer {
+  private drawLimitTimeout = 50; // milliseconds between each draw
+  private drawLimitTimer: number;
   private labeled: boolean;
   constructor(
     private svg: d3.Selection<d3.BaseType, unknown, HTMLElement, any>,
     private classId: string,
   ) {
     this.labeled = false;
+    this.drawLimitTimer = new Date().getTime() - 200;
   }
 
   public draw(drawConfig: GraphDrawConfig, drawData: Point3D[][][]) {
+    if (!this.allowRedraw()) {
+      return;
+    }
     this.svg.selectAll('*').remove(); // clear svg for redraw
 
     // Add grid
@@ -76,6 +83,12 @@ class KNNModelGraphDrawer {
         });
       });
     });
+    this.drawLimitTimer = new Date().getTime();
+  }
+
+  private allowRedraw() {
+    // We limit how often the graph can be redrawn to avoid overwhelming the browser with DOM updates.
+    return new Date().getTime() - this.drawLimitTimer > this.drawLimitTimeout;
   }
 
   /**

src/components/graphs/knngraph/KnnModelGraph.svelte

@@ -16,30 +16,34 @@
   import { TrainingData } from '../../../script/domain/ModelTrainer';
   import AxesFilterVector from './AxesFilterVector.svelte';
   import { highlightedAxis } from '../../../script/stores/uiStore';
+  import PerformanceProfileTimer from '../../../script/utils/PerformanceProfileTimer';
 
   let controllerSingleX: KNNModelGraphController | undefined;
   let controllerSingleY: KNNModelGraphController | undefined;
   let controllerSingleZ: KNNModelGraphController | undefined;
 
   const classifierFactory = new ClassifierFactory();
 
-  const dataGetter = (axis: Axes): TrainingData => {
-    const allData = classifierFactory.buildTrainingData(
-      gestures.getGestures(),
-      classifier.getFilters(),
-    );
+  // Cache training data to avoid fetching them again and again
+  PerformanceProfileTimer.start('cache data');
+  const allData = classifierFactory.buildTrainingData(
+    gestures.getGestures(),
+    classifier.getFilters(),
+  );
+  const xData = extractAxisFromTrainingData(allData, 0, 3);
+  const yData = extractAxisFromTrainingData(allData, 1, 3);
+  const zData = extractAxisFromTrainingData(allData, 2, 3);
+  PerformanceProfileTimer.stop('cache data');
 
+  const dataGetter = (axis: Axes): TrainingData => {
     if (axis === Axes.X) {
-      return extractAxisFromTrainingData(allData, 0, 3);
-      // return extractFilterFromTrainingData(allData, 0, 3);
+      return xData;
     }
     if (axis === Axes.Y) {
-      return extractAxisFromTrainingData(allData, 1, 3);
-      // return extractFilterFromTrainingData(allData, 1, 3);
+      return yData;
     }
     if (axis === Axes.Z) {
-      return extractAxisFromTrainingData(allData, 2, 3);
-      // return extractFilterFromTrainingData(allData, 2, 3);
+      return zData;
     }
     throw new Error('Should not happen');
   };
@@ -49,10 +53,10 @@
     const controller = new KNNModelGraphController(
       svgSingle,
       () => dataGetter(axis),
+      { x: 650 / 2, y: 350 / 2 },
       'd3-3d-single-' + label,
       axis,
     );
-    controller.setOrigin(650 / 2, 350 / 2);
     return controller;
   };
 
@@ -78,12 +82,14 @@
       width={650}
       classID={'d3-3d-single-x'}
       controller={controllerSingleX} />
+
     <KnnModelGraphSvgWithControls
       hidden={$highlightedAxis !== Axes.Y}
       height={350}
       width={650}
       classID={'d3-3d-single-y'}
       controller={controllerSingleY} />
+
     <KnnModelGraphSvgWithControls
       hidden={$highlightedAxis !== Axes.Z}
       height={350}

src/pages/training/TrainingPage.svelte

@@ -5,7 +5,12 @@
  -->
 
 <script lang="ts">
-  import { ModelEntry, availableModels, preferredModel, state } from '../../script/stores/uiStore';
+  import {
+    ModelEntry,
+    availableModels,
+    preferredModel,
+    state,
+  } from '../../script/stores/uiStore';
   import { t } from '../../i18n';
   import PleaseConnectFirst from '../../components/PleaseConnectFirst.svelte';
   import ControlBar from '../../components/control-bar/ControlBar.svelte';
@@ -16,8 +21,6 @@
   import StandardButton from '../../components/buttons/StandardButton.svelte';
   import KnnModelGraph from '../../components/graphs/knngraph/KnnModelGraph.svelte';
   import { Feature, hasFeature } from '../../script/FeatureToggles';
-  import { DropdownOption } from '../../components/buttons/Buttons';
-  import PersistantWritable from '../../script/repository/PersistantWritable';
   import LossGraph from '../../components/graphs/LossGraph.svelte';
   import { writable } from 'svelte/store';
   import { LossTrainingIteration } from '../../components/graphs/LossGraphUtil';
@@ -30,7 +33,9 @@
 
   const sufficientData = gestures.hasSufficientData();
 
-  const selectedModelOption = hasFeature(Feature.KNN_MODEL) ? preferredModel : writable(availableModels[0]);
+  const selectedModelOption = hasFeature(Feature.KNN_MODEL)
+    ? preferredModel
+    : writable(availableModels[0]);
 
   $: isUsingKNNModel =
     hasFeature(Feature.KNN_MODEL) && $selectedModelOption.id === availableModels[1].id;

src/script/utils/PerformanceProfileTimer.ts

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