Axis filter highlight

microbit-foundation · Mar 16, 2024 · 6bf8d3c · 6bf8d3c
1 parent ea9f056
commit 6bf8d3c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/src/components/graphs/knngraph/AxesFilterVector.svelte b/src/components/graphs/knngraph/AxesFilterVector.svelte
@@ -11,11 +11,10 @@
   import Axes from '../../../script/domain/Axes';
   import { extractAxisFromAccelerometerData } from '../../../script/utils/graphUtils';
   import StandardButton from '../../buttons/StandardButton.svelte';
-
-  const selectedAxis = writable(Axes.X);
+    import { highlightedAxis } from '../../../script/stores/uiStore';
 
   const liveFilteredAxesData: Readable<number[]> = derived(
-    [liveAccelerometerData, selectedAxis],
+    [liveAccelerometerData, highlightedAxis],
     stores => {
       const axis = stores[1];
       try {
@@ -45,26 +44,26 @@
         <div class="flex flex-row space-x-2">
           <StandardButton
             small
-            outlined={$selectedAxis !== Axes.X}
-            onClick={() => ($selectedAxis = Axes.X)}>X</StandardButton>
+            outlined={$highlightedAxis !== Axes.X}
+            onClick={() => ($highlightedAxis = Axes.X)}>X</StandardButton>
         </div>
         <div class="flex flex-row space-x-2">
           <StandardButton
             small
-            outlined={$selectedAxis !== Axes.Y}
-            onClick={() => ($selectedAxis = Axes.Y)}>Y</StandardButton>
+            outlined={$highlightedAxis !== Axes.Y}
+            onClick={() => ($highlightedAxis = Axes.Y)}>Y</StandardButton>
         </div>
         <div class="flex flex-row space-x-2">
           <StandardButton
             small
-            outlined={$selectedAxis !== Axes.Z}
-            onClick={() => ($selectedAxis = Axes.Z)}>Z</StandardButton>
+            outlined={$highlightedAxis !== Axes.Z}
+            onClick={() => ($highlightedAxis = Axes.Z)}>Z</StandardButton>
         </div>
       </div>
       <div class="flex flex-col justify-around">
-        <img src={'imgs/vector_lines_x.png'} class:hidden={$selectedAxis !== Axes.X} alt="x vector line"/>
-        <img src={'imgs/vector_lines_y.png'} class:hidden={$selectedAxis !== Axes.Y} alt="y vector line"/>
-        <img src={'imgs/vector_lines_z.png'} class:hidden={$selectedAxis !== Axes.Z} alt="z vector line"/>
+        <img src={'imgs/vector_lines_x.png'} class:hidden={$highlightedAxis !== Axes.X} alt="x vector line"/>
+        <img src={'imgs/vector_lines_y.png'} class:hidden={$highlightedAxis !== Axes.Y} alt="y vector line"/>
+        <img src={'imgs/vector_lines_z.png'} class:hidden={$highlightedAxis !== Axes.Z} alt="z vector line"/>
         </div>
       <div class="flex flex-col justify-around">
         <p>MAX</p>

diff --git a/src/script/stores/uiStore.ts b/src/script/stores/uiStore.ts
@@ -15,6 +15,7 @@ import CookieManager from '../CookieManager';
 import { isInputPatternValid } from './connectionStore';
 import { classifier } from './Stores';
 import Gesture from '../domain/stores/gesture/Gesture';
+import Axes from '../domain/Axes';
 
 let text: (key: string, vars?: object) => string;
 t.subscribe(t => (text = t));
@@ -120,6 +121,8 @@ export enum MicrobitInteractions {
   AB,
 }
 
+export const highlightedAxis = writable(Axes.X);
+
 const initialMicrobitInteraction: MicrobitInteractions = MicrobitInteractions.AB;
 
 export const microbitInteraction = writable<MicrobitInteractions>(