Added arrows-svg

package.json

@@ -48,6 +48,7 @@
     "@microsoft/applicationinsights-web": "^3.0.0",
     "@tensorflow-models/knn-classifier": "^1.2.6",
     "@tensorflow/tfjs": "^4.4.0",
+    "arrows-svg": "^1.7.1",
     "bowser": "^2.11.0",
     "browser-lang": "^0.2.1",
     "chart.js": "^4.2.1",

public/global.css

@@ -1,5 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
-*{ font-family: 'Poppins', sans-serif; }
+
+* {
+  font-family: 'Poppins', sans-serif;
+}
 
 .scrollable {
   -ms-overflow-style: none;
@@ -35,35 +38,58 @@
 }
 
 .autoscaling {
-    transform: scale(0.6) translate(-35%, -70%);
+  transform: scale(0.6) translate(-35%, -70%);
+}
+
+@media screen and (min-width: 1200px) {
+  .autoscaling {
+    transform: scale(0.7) translate(-22%, -50%);
   }
-  @media screen and (min-width: 1200px) {
-    .autoscaling {
-      transform: scale(0.7) translate(-22%, -50%);
-    }
+}
+
+@media screen and (min-width: 1400px) {
+  .autoscaling {
+    transform: scale(0.85) translate(-10%, -30%);
   }
-  @media screen and (min-width: 1400px) {
-    .autoscaling {
-      transform: scale(0.85) translate(-10%, -30%);
-    }
+}
+
+@media screen and (min-width: 1600px) {
+  .autoscaling {
+    transform: scale(1) translate(0, -15%);
+    ;
   }
-  @media screen and (min-width: 1600px) {
-    .autoscaling {
-      transform: scale(1) translate(0, -15%);;
-    }
+}
+
+@media screen and (min-width: 1900px) {
+  .autoscaling {
+    transform: scale(1.25) translate(10%, -5%);
   }
-  @media screen and (min-width: 1900px){
-    .autoscaling {
-      transform: scale(1.25) translate(10%, -5%);
-    }
+}
+
+@media screen and (min-width: 2300px) {
+  .autoscaling {
+    transform: scale(1.5) translate(18%, 5%);
   }
-  @media screen and (min-width: 2300px){
-    .autoscaling {
-      transform: scale(1.5) translate(18%, 5%);
-    }
+}
+
+@media screen and (min-width: 2700px) {
+  .autoscaling {
+    transform: scale(2) translate(25%, 10%);
   }
-  @media screen and (min-width: 2700px){
-    .autoscaling {
-      transform: scale(2) translate(25%, 10%);
-    }
-  }
+}
+
+
+.arrow {
+  pointer-events: none;
+}
+
+.arrow__path {
+  stroke: #000;
+  fill: transparent;
+  stroke-dasharray: 4 2;
+}
+
+.arrow__head line {
+  stroke: #000;
+  stroke-width: 1px;
+}

src/components/graphs/knngraph/AxesFilterVector.svelte

@@ -12,6 +12,61 @@
   import { extractAxisFromAccelerometerData } from '../../../script/utils/graphUtils';
   import StandardButton from '../../buttons/StandardButton.svelte';
   import { highlightedAxis } from '../../../script/stores/uiStore';
+  import arrowCreate from 'arrows-svg';
+  // @ts-ignore
+  import type { IArrow } from 'arrows-svg/types/interfaces/IArrow.d.ts';
+  import { afterUpdate, onMount } from 'svelte';
+
+  let arrows: IArrow[] = [];
+  const drawArrows = (fromId: string) => {
+    arrows.forEach(arr => arr.clear());
+    const from = document.getElementById(fromId)!;
+    const toX = document.getElementById('arrowTo1');
+    const toY = document.getElementById('arrowTo2');
+    const toZ = document.getElementById('arrowTo3');
+    if (!from || !toX || !toY || !toZ) {
+      return;
+    }
+    arrows.push(
+      arrowCreate({
+        from,
+        to: toX,
+      }),
+    );
+    arrows.push(
+      arrowCreate({
+        from,
+        to: toY,
+      }),
+    );
+    arrows.push(
+      arrowCreate({
+        from,
+        to: toZ,
+      }),
+    );
+    arrows.forEach(arr => {
+      document.body.appendChild(arr.node);
+    });
+  };
+
+  const updateArrows = (axis: Axes | undefined) => {
+    if (axis) {
+      const getId = (): string => {
+        if ($highlightedAxis === Axes.X) {
+          return 'fromX';
+        }
+        if ($highlightedAxis === Axes.Y) {
+          return 'fromY';
+        }
+        if ($highlightedAxis === Axes.Z) {
+          return 'fromZ';
+        }
+        throw Error('This shouldnt happen');
+      };
+      drawArrows(getId());
+    }
+  };
 
   const liveFilteredAxesData: Readable<number[]> = derived(
     [liveAccelerometerData, highlightedAxis],
@@ -38,50 +93,46 @@
       }
     },
   );
+
+  onMount(() => {
+    setTimeout(() => {
+      // We set a timeout to fix a graphical issue, that relates to the resizing of DOM elements
+      updateArrows($highlightedAxis);
+    }, 600);
+  });
+  afterUpdate(() => {
+    updateArrows($highlightedAxis);
+  });
 </script>
 
 <div>
   <div>
     {#if $highlightedAxis}
       <div class="flex flex-row space-x-1">
         <div class="flex flex-col">
-          <div class="flex flex-row space-x-2">
+          <div class="flex flex-row space-x-2" id="fromX">
             <StandardButton
               small
               outlined={$highlightedAxis !== Axes.X}
               onClick={() => ($highlightedAxis = Axes.X)}>X</StandardButton>
           </div>
-          <div class="flex flex-row space-x-2">
+          <div class="flex flex-row space-x-2" id="fromY">
             <StandardButton
               small
               outlined={$highlightedAxis !== Axes.Y}
               onClick={() => ($highlightedAxis = Axes.Y)}>Y</StandardButton>
           </div>
-          <div class="flex flex-row space-x-2">
+          <div class="flex flex-row space-x-2" id="fromZ">
             <StandardButton
               small
               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={$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>
-          <p>MIN</p>
-          <p>MEAN</p>
+        <div class="pl-20 flex flex-col justify-around">
+          <p id="arrowTo1">MAX</p>
+          <p id="arrowTo2">MIN</p>
+          <p id="arrowTo3">MEAN</p>
         </div>
         <div class="flex flex-col justify-around">
           <img src={'imgs/right_arrow_blue.svg'} alt="right arrow icon" width="20px" />

src/components/graphs/knngraph/KnnModelGraph.svelte

@@ -75,7 +75,9 @@
 
 <div class="flex flex-row" class:hidden={!$classifier.model.isTrained}>
   <div class="flex flex-col justify-center mr-6">
-    <AxesFilterVector />
+    {#if $classifier.model.isTrained}
+      <AxesFilterVector />
+    {/if}
     <div class="flex flex-col ml-2 justify-center mt-2">
       {#each $gestures as gesture, index}
         <div class="flex flex-row justify-between">