Merge pull request #496 from microbit-foundation/463-split-knn-and-nn…

…-training-page-up-into-fans-replacing-the-top-bar-if-possible

split knn and nn training page up into fans replacing the top bar if possible

.github/workflows/prcomment.yml

@@ -13,5 +13,5 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: 'A deployment is being made to https://ml-machine-${{github.event.pull_request.number}}.r59q.com/. This site will be continuously updated as changes are made to this PR.'
+              body: 'A deployment is being made to https://ml-machine-${{github.event.pull_request.number}}.r59q.com/. This site will be continuously updated as changes are made to this PR. Deployment should only take a few minutes'
             })

.vscode/settings.json

@@ -22,7 +22,7 @@
     "a11y-structure": "ignore",
     "a11y-click-events-have-key-events": "ignore",
     "a11y-missing-content": "ignore",
-    "a11y-no-noninteractive-element-interactions":"ignore",
+    "a11y-no-noninteractive-element-interactions": "ignore",
     "a11y-no-static-element-interactions": "ignore"
   },
   "files.exclude": {
@@ -34,4 +34,4 @@
     "**/Thumbs.db": true
   },
   "hide-files.files": []
-}
+}

src/StaticConfiguration.ts

@@ -59,9 +59,9 @@ class StaticConfiguration {
 
   // Line colors are picked in the order of this array.
   public static readonly liveGraphColors = [
-    '#f9808e',
-    '#80f98e',
-    '#808ef9',
+    '#ff606e',
+    '#30f09e',
+    '#3030ff',
     '#58355E',
     '#E0FF4F',
     '#FF2ECC',

src/components/PleaseConnectFirst.svelte → src/components/PleaseConnect.svelte

@@ -16,17 +16,17 @@
 </script>
 
 <div>
-  <p class="text-center text-2xl bold m-auto">
+  <p class="text-center text-xl bold m-auto">
     {$t('menu.trainer.notConnected1')}
   </p>
-  <p class="text-center text-2xl bold m-auto">
+  <p class="text-center text-xl bold m-auto">
     {$t('menu.trainer.notConnected2')}
   </p>
   <div class="text-center ml-auto mr-auto mb-2 mt-2">
     <img
       class="m-auto arrow-filter-color"
       src="/imgs/down_arrow.svg"
       alt="down arrow icon"
-      width="50px" />
+      width="35px" />
   </div>
 </div>

src/components/control-bar/ControlBar.svelte

@@ -5,8 +5,13 @@
  -->
 
 <script lang="ts">
+  export let expanded: boolean = false;
+  export let shadows: boolean = true;
 </script>
 
-<div class="h-12 pl-2 pr-2 flex w-full items-center bg-backgroundlight shadow-md">
+<div
+  class="min-h-12 h-12 flex w-full items-center bg-backgroundlight"
+  class:shadow-md={shadows}
+  class:px-2={!expanded}>
   <slot />
 </div>

src/components/filters/FilterListRow.svelte

@@ -4,6 +4,7 @@
   SPDX-License-Identifier: MIT
  -->
 <script lang="ts">
+  import { Paths, navigate } from '../../router/paths';
   import FilterTypes, { FilterType } from '../../script/domain/FilterTypes';
   import { stores } from '../../script/stores/Stores';
   import {
@@ -30,11 +31,32 @@
           on:click={toggleFilterCheckmarkClickHandler(filterType)}
           {checked}
           class="w-5 h-5 self-center" />
-        <label class="self-center ml-2 text-sm" for={`filter-${filter.getName()}`}>
+        <label
+          class="self-center ml-2 text-sm max-w-32 truncate whitespace-nowrap"
+          for={`filter-${filter.getName()}`}>
           {filter.getName()}
         </label>
       </div>
-      <div class="ml-3 border-l-2">
+      <div class="min-w-6">
+        <img
+          on:mouseenter={() => {
+            highlightedFilter.set(filterType);
+            showHighlighted.set(true);
+          }}
+          on:mouseleave={() => {
+            showHighlighted.set(false);
+          }}
+          on:click={() => {
+            navigate(Paths.FILTERS);
+            showHighlighted.set(false);
+            highlightedFilter.set(filterType);
+          }}
+          src="imgs/parallel.svg"
+          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);
@@ -47,6 +69,7 @@
           alt="data representation icon"
           class="w-6 hover:opacity-60 cursor-pointer" />
       </div>
+-->
     </div>
   </div>
 {/key}

src/components/filters/FiltersList.svelte

@@ -4,6 +4,7 @@
   SPDX-License-Identifier: MIT
  -->
 <script lang="ts">
+  import { onMount } from 'svelte';
   import FilterTypes from '../../script/domain/FilterTypes';
   import { anchorElement } from './FilterList';
   import FilterListRow from './FilterListRow.svelte';
@@ -14,7 +15,7 @@
 </script>
 
 <div
-  class="flex flex-col border-solid border-2 border-secondary rounded-md shadow-md"
+  class="flex flex-col border-solid border-2 border-secondary rounded-md shadow-md w-50"
   bind:this={filterElement}>
   {#each availableFilters as filterType}
     <FilterListRow {filterType} />

src/components/graphs/knngraph/AxesFilterVectorView.svelte

@@ -137,7 +137,7 @@
   <div>
     {#if $highlightedAxis}
       <div class="flex flex-row space-x-1">
-        <div class="flex flex-col">
+        <div class="flex flex-col justify-evenly">
           <div class="flex flex-row space-x-2" id="fromX">
             <StandardButton
               small
@@ -167,19 +167,13 @@
             <img src={'imgs/right_arrow_blue.svg'} alt="right arrow icon" width="20px" />
           {/each}
         </div>
-        <div class="flex flex-col justify-around">
-          <img src={'imgs/left_bracket_blue.png'} alt="left bracket" />
-        </div>
         <div class="flex flex-col justify-around w-12">
           {#each liveFilteredAxesData as val, index}
-            <p style={`color:${['red', 'green', 'blue'][index]}`}>
+            <p style={`color:${StaticConfiguration.liveGraphColors[index]}`}>
               {val.toFixed(3)}
             </p>
           {/each}
         </div>
-        <div class="flex flex-col justify-around">
-          <img src={'imgs/right_bracket_blue.png'} alt="left bracket" />
-        </div>
       </div>
     {/if}
   </div>

src/components/graphs/knngraph/KNNModelGraphController.ts

@@ -3,9 +3,8 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import * as d3 from 'd3';
 import { TrainingData } from '../../../script/domain/ModelTrainer';
-import { Unsubscriber, Writable, derived, get, writable } from 'svelte/store';
+import { Writable, derived, get, writable } from 'svelte/store';
 import KNNModelGraphDrawer, { GraphDrawConfig } from './KNNModelGraphDrawer';
 import {
   MicrobitAccelerometerData,
@@ -17,7 +16,6 @@ import Filters from '../../../script/domain/Filters';
 import { Point3D } from '../../../script/utils/graphUtils';
 import StaticConfiguration from '../../../StaticConfiguration';
 import { stores } from '../../../script/stores/Stores';
-import { LiveDataVector } from '../../../script/domain/stores/LiveDataVector';
 
 type SampleData = {
   value: number[];
@@ -256,4 +254,5 @@ class KNNModelGraphController {
     return nums.map(el => el / magnitude);
   }
 }
+export const controller = writable<KNNModelGraphController | undefined>(undefined);
 export default KNNModelGraphController;

src/components/graphs/knngraph/KNNModelGraphDrawer.ts

@@ -12,6 +12,8 @@ import {
   distanceBetween,
 } from '../../../script/utils/graphUtils';
 import { stores } from '../../../script/stores/Stores';
+import { state } from '../../../script/stores/uiStore';
+import { get } from 'svelte/store';
 
 export type GraphDrawConfig = {
   xRot: number;
@@ -52,31 +54,33 @@ class KNNModelGraphDrawer {
       id: `live`,
     };
 
-    this.addPoint(drawableLivePoint, 'live');
+    if (get(state).isInputReady) {
+      this.addPoint(drawableLivePoint, 'live');
 
-    // Draw lines from live point to the nearest neighbours
-    const predictedPoints = [...this.drawnTrainingPoints]
-      .sort((a, b) => {
-        const aDist = distanceBetween(drawableLivePoint.pointTransformed, a);
-        const bDist = distanceBetween(drawableLivePoint.pointTransformed, b);
-        return aDist - bDist;
-      })
-      .slice(0, StaticConfiguration.knnNeighbourCount);
+      // Draw lines from live point to the nearest neighbours
+      const predictedPoints = [...this.drawnTrainingPoints]
+        .sort((a, b) => {
+          const aDist = distanceBetween(drawableLivePoint.pointTransformed, a);
+          const bDist = distanceBetween(drawableLivePoint.pointTransformed, b);
+          return aDist - bDist;
+        })
+        .slice(0, StaticConfiguration.knnNeighbourCount);
 
-    const lines = this.svg.selectAll(`line.points-class`).data(predictedPoints);
-    lines
-      .enter()
-      .append('line')
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      .merge(lines)
-      .attr('x1', d => drawableLivePoint.pointTransformed.projected.x)
-      .attr('y1', d => drawableLivePoint.pointTransformed.projected.y)
-      .attr('x2', d => d.projected.x)
-      .attr('y2', d => d.projected.y)
-      .attr('class', `${this.classId} points-class`)
-      .attr('stroke', '#1a1a1a');
-    lines.exit().remove();
+      const lines = this.svg.selectAll(`line.points-class`).data(predictedPoints);
+      lines
+        .enter()
+        .append('line')
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        .merge(lines)
+        .attr('x1', d => drawableLivePoint.pointTransformed.projected.x)
+        .attr('y1', d => drawableLivePoint.pointTransformed.projected.y)
+        .attr('x2', d => d.projected.x)
+        .attr('y2', d => d.projected.y)
+        .attr('class', `${this.classId} points-class`)
+        .attr('stroke', '#1a1a1a');
+      lines.exit().remove();
+    }
   };
 
   public draw(drawConfig: GraphDrawConfig, drawData: Point3D[][][]) {