Add hover preview to filters

.vscode/settings.json

@@ -24,5 +24,14 @@
     "a11y-missing-content": "ignore",
     "a11y-no-noninteractive-element-interactions":"ignore",
     "a11y-no-static-element-interactions": "ignore"
-  }
+  },
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true
+  },
+  "hide-files.files": []
 }

features.json

@@ -1,4 +1,4 @@
 {
-  "title": "Learning tool",
+  "title": "ML-Machine",
   "knnModel": true
 }

src/components/filters/FilterList.ts

@@ -3,6 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
+import { writable } from 'svelte/store';
 import { FilterType } from '../../script/domain/FilterTypes';
 import { stores } from '../../script/stores/Stores';
 
@@ -14,3 +15,7 @@ export const toggleFilterCheckmarkClickHandler =
       ? selectedFilters.remove(filterType)
       : selectedFilters.add(filterType);
   };
+
+export const highlightedFilter = writable<FilterType>(FilterType.MAX);
+export const showHighlighted = writable<boolean>(false);
+export const anchorElement = writable<HTMLElement | null>(null);

src/components/filters/FilterListFilterPreview.svelte

@@ -0,0 +1,27 @@
+<!--
+  (c) 2023, Center for Computational Thinking and Design at Aarhus University and contributors
+ 
+  SPDX-License-Identifier: MIT
+ -->
+<script lang="ts">
+  import D3Plot from '../../pages/filter/D3Plot.svelte';
+  import FilterTypes, { FilterType } from '../../script/domain/FilterTypes';
+  import { highlightedFilter, anchorElement, showHighlighted } from './FilterList';
+
+  $: top = $anchorElement?.getBoundingClientRect().top ?? 0;
+  $: left = $anchorElement?.getBoundingClientRect().right ?? 0;
+  $: filter = FilterTypes.createFilter($highlightedFilter);
+  $: filterType = $highlightedFilter ?? FilterType.ACC;
+</script>
+
+{#if $showHighlighted}
+  <div
+    class="bg-white absolute p-2 z-2 rounded-md border-2 border-secondary"
+    style={`top:${top}px; left:${left}px`}>
+    <div class="max-w-[500px]">
+      <p class="font-bold">{filter.getName()}</p>
+      <p>{filter.getDescription()}</p>
+    </div>
+    <D3Plot {filterType} />
+  </div>
+{/if}

src/components/filters/FilterListRow.svelte

@@ -6,7 +6,11 @@
 <script lang="ts">
   import FilterTypes, { FilterType } from '../../script/domain/FilterTypes';
   import { stores } from '../../script/stores/Stores';
-  import { toggleFilterCheckmarkClickHandler } from './FilterList';
+  import {
+    highlightedFilter,
+    showHighlighted,
+    toggleFilterCheckmarkClickHandler,
+  } from './FilterList';
 
   export let filterType: FilterType;
   const filter = FilterTypes.createFilter(filterType);
@@ -32,8 +36,13 @@
       </div>
       <div class="ml-3 border-l-2">
         <img
-          on:mouseenter={() => {}}
-          on:mouseleave={() => {}}
+          on:mouseenter={() => {
+            highlightedFilter.set(filterType);
+            showHighlighted.set(true);
+          }}
+          on:mouseleave={() => {
+            showHighlighted.set(false);
+          }}
           src="imgs/ML_predict.svg"
           alt="data representation icon"
           class="w-6 hover:opacity-60 cursor-pointer" />

src/components/filters/FiltersList.svelte

@@ -5,12 +5,17 @@
  -->
 <script lang="ts">
   import FilterTypes from '../../script/domain/FilterTypes';
+  import { anchorElement } from './FilterList';
   import FilterListRow from './FilterListRow.svelte';
 
   const availableFilters = FilterTypes.toIterable();
+  let filterElement: HTMLElement;
+  $: anchorElement.set(filterElement);
 </script>
 
-<div class="flex flex-col border-solid border-2 border-secondary rounded-md shadow-md">
+<div
+  class="flex flex-col border-solid border-2 border-secondary rounded-md shadow-md"
+  bind:this={filterElement}>
   {#each availableFilters as filterType}
     <FilterListRow {filterType} />
   {/each}

src/views/OverlayView.svelte

@@ -11,6 +11,7 @@
   import ReconnectPrompt from '../components/ReconnectPrompt.svelte';
   import OutdatedMicrobitWarning from '../components/OutdatedMicrobitWarning.svelte';
   import { isInputPatternValid } from '../script/stores/connectionStore';
+  import FilterListFilterPreview from '../components/filters/FilterListFilterPreview.svelte';
 
   // Helps show error messages on top of page
   let latestMessage = '';
@@ -55,4 +56,5 @@
   {#if $state.isInputOutdated || $state.isOutputOutdated}
     <OutdatedMicrobitWarning targetRole={$state.isInputOutdated ? 'INPUT' : 'OUTPUT'} />
   {/if}
+  <FilterListFilterPreview />
 </div>

windi.config.js

@@ -10,16 +10,16 @@ export default {
   theme: {
     extend: {
       colors: {
-        primary: '#3a3a3a',
+        primary: '#2B5EA7',
         primarytext: '#000000',
-        secondary: '#a0a0a0',
+        secondary: '#2CCAC0',
         secondarytext: '#FFFFFF',
         info: '#98A2B3',
         backgrounddark: '#F5F5F5',
         backgroundlight: '#ffffff',
         infolight: '#93c5fd',
         link: '#258aff',
-        warning: '#ffaaaa',
+        warning: '#FF7777',
         disabled: '#8892A3',
         primaryborder: '#E5E7EB',
         infobglight: '#E7E5E4',