Use GestureDotr on AxesFilterVectorView

Author: r59q

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

@@ -115,7 +115,7 @@
           {/each}
         </div>
         {#if $highlightedAxis.length === 1}
-          <div class="pl-20 flex flex-col justify-around">
+          <div class="pl-28 flex flex-col justify-around">
             {#each $filters as filter, index}
               <p class="pl-1" id={`arrowTo${index}`}>{filter.getName()}</p>
             {/each}
@@ -131,7 +131,7 @@
           <div class="flex flex-col justify-around w-12">
             {#each liveFilteredAxesData as val, index}
               <p style={`color:${StaticConfiguration.graphColors[index]}`}>
-                {val.toFixed(3)}
+                {val.toFixed(2)}
               </p>
             {/each}
           </div>

src/components/ui/GestureDot.svelte

@@ -8,14 +8,15 @@
 
   let isDotHovered = false;
   export let gesture: Gesture;
+  export let disableTooltip: boolean = false;
 
   $: name = $gesture.name;
   $: color = $gesture.color;
 </script>
 
 <div
   class="absolute border-1 border-secondary rounded-md shadow-md bg-white top-[-28px]"
-  class:hidden={!isDotHovered}>
+  class:hidden={!isDotHovered || disableTooltip}>
   <p class="px-2">{name}</p>
 </div>
 <div

src/pages/training/PredictionLegend.svelte

@@ -4,6 +4,7 @@
   SPDX-License-Identifier: MIT
  -->
 <script lang="ts">
+    import GestureDot from '../../components/ui/GestureDot.svelte';
   import { state, stores } from '../../lib/stores/Stores';
 
   const gestures = stores.getGestures();
@@ -14,13 +15,13 @@
   <div class="flex flex-row justify-between">
     <div class="flex flex-row">
       <div class="flex flex-col justify-center mr-1">
-        <div class="rounded-full w-3 h-3" style={'background-color:' + gesture.color} />
+        <GestureDot disableTooltip gesture={gestures.getGesture(gesture.ID)}/>
       </div>
       <p>{gesture.name}</p>
     </div>
     {#if $state.isInputReady}
       <p>
-        {(($confidences.get(gesture.ID) ?? 0) * 100).toFixed(2)}%
+        {(($confidences.get(gesture.ID) ?? 0) * 100).toFixed(1)}%
       </p>
     {/if}
   </div>