Fix bug where live data shows wrong labels

r59q · r59q · commit d3bf3cb2c999 · 2025-07-08T23:24:16.000+02:00
diff --git a/src/__tests__/archtest/default-build-config.test.ts b/src/__tests__/archtest/default-build-config.test.ts
@@ -31,9 +31,4 @@ describe('Default build config test', () => {
     expect(windiContent.includes("secondary: '#2CCAC0'"), message).toBeFalsy();
     expect(features.title, message).toBe('Learning tool');
   });
-
-  test("deleteme pls", () => {
-    // TODO: Remember to add feature flag for fingerprint!
-    expect(true).toBeFalsy();
-  });
 });
diff --git a/src/components/features/bottom/BottomPanel.svelte b/src/components/features/bottom/BottomPanel.svelte
@@ -18,6 +18,7 @@
   import StandardButton from '../../ui/buttons/StandardButton.svelte';
   import { stores } from '../../../lib/stores/Stores';
   import LiveDataFingerprint from './LiveDataFingerprint.svelte';
+  import { Feature, hasFeature } from '../../../lib/FeatureToggles';
 
   const devices = stores.getDevices();
 
@@ -79,16 +80,20 @@
             onOutputDisconnectButtonClicked={outputDisconnectButtonClicked} />
         </div>
       </div>
+
       <div
         class="absolute right-0 cursor-pointer w-45 hover:bg-secondary hover:bg-opacity-10 transition"
         on:click={() => (isLive3DOpen = true)}>
         <div class="flex flex-row">
-          <div class="absolute h-full">
-            <LiveDataFingerprint gestureName="Live" />
-          </div>
+          {#if hasFeature(Feature.FINGERPRINT)}
+            <div class="absolute h-full">
+              <LiveDataFingerprint gestureName="Live" />
+            </div>
+          {/if}
           <View3DLive width={160} height={160} freeze={isLive3DOpen} />
         </div>
       </div>
+
       <BaseDialog isOpen={isLive3DOpen} onClose={() => (isLive3DOpen = false)}>
         <!-- hardcoded margin-left matches the size of the sidebar -->
         <div
diff --git a/src/components/features/bottom/LiveDataFingerprint.svelte b/src/components/features/bottom/LiveDataFingerprint.svelte
@@ -8,7 +8,6 @@
   import { ClassifierInput } from '../../../lib/domain/ClassifierInput';
   import { stores } from '../../../lib/stores/Stores';
   import StaticConfiguration from '../../../StaticConfiguration';
-  import StandardButton from '../../ui/buttons/StandardButton.svelte';
   import Fingerprint from '../../ui/recording/Fingerprint.svelte';
 
   export let gestureName: string;
@@ -20,7 +19,7 @@
 
   $: filtersLabels = $filters.flatMap(filter => {
     const filterName = filter.getName();
-    return [`${filterName} - x`, `${filterName} - y`, `${filterName} - z`];
+    return $highlightedAxes.map(axis => `${filterName} - ${axis.label}`);
   });
   // $: fingerprint = $classifier.filteredInput.normalized.getValue();
   onMount(() => {
diff --git a/src/components/ui/recording/Fingerprint.svelte b/src/components/ui/recording/Fingerprint.svelte
@@ -4,23 +4,22 @@
   SPDX-License-Identifier: MIT
  -->
 <script lang="ts">
-    import { stores } from "../../../lib/stores/Stores";
-    import { onDestroy } from "svelte";
+  import { onDestroy } from 'svelte';
 
   export let fingerprint: number[];
   export let title: string;
   export let filterLabels: string[];
 
   // Tooltip state
   let tooltipVisible = false;
-  let tooltipLabel = "";
+  let tooltipLabel = '';
   let tooltipIndex = 0;
   let tooltipValue = 0;
   let containerElement: HTMLDivElement;
   let tooltipX = 0;
   let tooltipXOffset = -80;
   let tooltipY = 0;
-  let tooltipYOffset = -60;
+  let tooltipYOffset = -85;
   let tooltipInterval: NodeJS.Timeout | null = null;
 
   // Function to convert value (0-1) to viridis-like color
@@ -61,16 +60,16 @@
     tooltipLabel = filterLabels[index] || `Cell ${index}`;
     tooltipIndex = index;
     tooltipValue = value;
-    
+
     // Calculate fixed position relative to the visualization container
     if (containerElement) {
       const rect = containerElement.getBoundingClientRect();
       tooltipX = rect.right + tooltipXOffset; // Position near the right edge of the container
       tooltipY = rect.top + tooltipYOffset; // Position near the top of the container
     }
-    
+
     tooltipVisible = true;
-    
+
     // Start polling the value every 200ms
     if (tooltipInterval) {
       clearInterval(tooltipInterval);
@@ -84,7 +83,7 @@
 
   const hideTooltip = () => {
     tooltipVisible = false;
-    
+
     // Clear the polling interval
     if (tooltipInterval) {
       clearInterval(tooltipInterval);
@@ -103,23 +102,24 @@
 <div class="flex flex-col font-sans w-full h-full" bind:this={containerElement}>
   <div class="flex flex-col border border-gray-300 flex-1">
     {#each fingerprint as value, index}
-        <div
-          class="border-b border-white border-opacity-10 transition-opacity duration-200 hover:opacity-80 cursor-pointer last:border-b-0 flex-1"
-          style="background-color: {getViridisColor(value)};"
-          on:mouseenter={() => showTooltip(index, value)}
-          on:mouseleave={hideTooltip}
-          on:click|stopPropagation
-          role="button"
-          tabindex="0"/>
+      <div
+        class="border-b border-white border-opacity-10 transition-opacity duration-200 hover:opacity-80 cursor-pointer last:border-b-0 flex-1"
+        style="background-color: {getViridisColor(value)};"
+        on:mouseenter={() => showTooltip(index, value)}
+        on:mouseleave={hideTooltip}
+        on:click|stopPropagation
+        role="button"
+        tabindex="0" />
     {/each}
   </div>
 </div>
 
 <!-- Fixed tooltip positioned globally but relative to the visualization -->
 {#if tooltipVisible}
-  <div 
+  <div
     class="fixed bg-white shadow-md text-primarytext text-sm px-3 py-2 rounded z-50 pointer-events-none whitespace-nowrap"
     style="left: {tooltipX}px; top: {tooltipY}px;">
+    <div class="font-semibold text-md">{title}</div>
     <div class="font-semibold">{tooltipLabel}</div>
     <div>Value: {tooltipValue.toFixed(3)}</div>
   </div>
diff --git a/src/components/ui/recording/Recording.svelte b/src/components/ui/recording/Recording.svelte
@@ -15,7 +15,7 @@
   import { serializeRecordingToCsvWithoutGestureName } from '../../../lib/utils/CSVUtils';
   import RecordingFingerprint from './RecordingFingerprint.svelte';
   import { Feature, hasFeature } from '../../../lib/FeatureToggles';
-    import { tr } from '../../../i18n';
+  import { tr } from '../../../i18n';
 
   // get recording from mother prop
   export let recording: RecordingData;
@@ -96,23 +96,23 @@
       {/if}
     </div>
   {/if}
-    <Tooltip title={$tr("content.data.tooltip.remove")} offset={{ x: -26, y: -50 }}>
-  <button class="absolute -left-2.8px top-0px outline-none">
-    <div class="relative">
-      <i class="z-1 absolute fas fa-circle fa-lg text-white" />
-      <i
-        class="z-2 absolute far fa-times-circle fa-lg transition
+  <Tooltip title={$tr('content.data.tooltip.remove')} offset={{ x: -26, y: -50 }}>
+    <button class="absolute -left-2.8px top-0px outline-none">
+      <div class="relative">
+        <i class="z-1 absolute fas fa-circle fa-lg text-white" />
+        <i
+          class="z-2 absolute far fa-times-circle fa-lg transition
 									ease cursor-pointer text-light-800 hover:text-black"
-        on:click={deleteClicked} />
-    </div>
-  </button>
-    </Tooltip>
+          on:click={deleteClicked} />
+      </div>
+    </button>
+  </Tooltip>
 
   <!-- Download Button -->
   {#if downloadable}
     <Tooltip title="CSV" offset={{ x: 12, y: -50 }}>
       <button
-      class="absolute top-0px left-6 text-light-800 hover:text-black transition ease"
+        class="absolute top-0px left-6 text-light-800 hover:text-black transition ease"
         on:click={bottomRightButtonClicked}>
         <i class="fas fa-download z-1 absolute fa-md" />
       </button>
diff --git a/src/components/ui/recording/RecordingFingerprint.svelte b/src/components/ui/recording/RecordingFingerprint.svelte
@@ -6,7 +6,6 @@
 <script lang="ts">
   import type { RecordingData } from '../../../lib/domain/RecordingData';
   import { stores } from '../../../lib/stores/Stores';
-  import type { Vector } from '../../../lib/domain/Vector';
   import BaseVector from '../../../lib/domain/BaseVector';
   import Fingerprint from './Fingerprint.svelte';
 
