From 1b55191195c4258899a57c40d5ff77ee20820559 Mon Sep 17 00:00:00 2001
From: Alexander Vogt <alexander_vogt@outlook.de>
Date: Fri, 28 Jul 2023 14:47:31 +0200
Subject: [PATCH 01/16] tooltip component

---
 .../src/components/ToolTipComponent.vue       | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 report-viewer/src/components/ToolTipComponent.vue

diff --git a/report-viewer/src/components/ToolTipComponent.vue b/report-viewer/src/components/ToolTipComponent.vue
new file mode 100644
index 000000000..8ca1e934d
--- /dev/null
+++ b/report-viewer/src/components/ToolTipComponent.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="relative inline-block group">
+    <slot></slot>
+    <div
+      class="absolute hidden group-hover:block bg-black bg-opacity-60 px-1 text-sm rounded-md text-white text-center"
+      :style="tooltipPosition"
+    >
+      <slot name="tooltip"></slot>
+      <div class="border-4 border-solid absolute" :style="arrowStyle"><!-- Arrow --></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type PropType, type StyleValue } from 'vue'
+
+const props = defineProps({
+  direction: {
+    type: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
+    required: false,
+    default: 'top'
+  }
+})
+
+const tooltipPosition = computed(() => {
+  const style: StyleValue = {}
+
+  if (props.direction == 'left' || props.direction == 'right') {
+    style.top = '50%'
+    style.transform = 'translateY(-50%)'
+    if (props.direction == 'left') {
+      style.right = '120%'
+    } else {
+      style.left = '120%'
+    }
+  } else {
+    style.left = '50%'
+    style.transform = 'translateX(-50%)'
+  }
+
+  return style
+})
+
+const arrowStyle = computed(() => {
+  const style: StyleValue = {}
+  style.content = ' '
+
+  function getBorderColor(current: String, other: String) {
+    return other == current ? 'rgba(0,0,0,0.6)' : 'transparent'
+  }
+
+  style.borderColor = ''
+  for (const dir of ['top', 'right', 'bottom', 'left']) {
+    style.borderColor += getBorderColor(dir, props.direction) + ' '
+  }
+
+  if (props.direction == 'left' || props.direction == 'right') {
+    style.top = '50%'
+    style.marginTop = '-4px'
+  } else {
+    style.left = '50%'
+    style.marginLeft = '-4px'
+  }
+
+  style[props.direction] = '100%'
+
+  return style
+})
+</script>

From 9b9e143c96c391131486afbb9597bf6020edae5c Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sat, 29 Jul 2023 16:28:37 +0200
Subject: [PATCH 02/16] adjustments to tooltip

---
 .../src/components/ToolTipComponent.vue       | 29 +++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/report-viewer/src/components/ToolTipComponent.vue b/report-viewer/src/components/ToolTipComponent.vue
index 8ca1e934d..a6f9c4899 100644
--- a/report-viewer/src/components/ToolTipComponent.vue
+++ b/report-viewer/src/components/ToolTipComponent.vue
@@ -1,11 +1,13 @@
 <template>
-  <div class="relative inline-block group">
-    <slot></slot>
+  <div class="relative inline-block group z-10">
+    <slot v-if="!defaultText"></slot>
+    <div v-else>{{ defaultText }}</div>
     <div
-      class="absolute hidden group-hover:block bg-black bg-opacity-60 px-1 text-sm rounded-md text-white text-center"
+      class="absolute hidden group-hover:block bg-black bg-opacity-60 px-1 rounded-md text-white text-center"
       :style="tooltipPosition"
     >
-      <slot name="tooltip"></slot>
+      <slot name="tooltip" v-if="!tooltipText"></slot>
+      <div class="text-sm" v-else>{{ tooltipText }}</div>
       <div class="border-4 border-solid absolute" :style="arrowStyle"><!-- Arrow --></div>
     </div>
   </div>
@@ -19,6 +21,16 @@ const props = defineProps({
     type: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
     required: false,
     default: 'top'
+  },
+  defaultText: {
+    type: String,
+    required: false,
+    default: undefined
+  },
+  tooltipText: {
+    type: String,
+    required: false,
+    default: undefined
   }
 })
 
@@ -29,13 +41,18 @@ const tooltipPosition = computed(() => {
     style.top = '50%'
     style.transform = 'translateY(-50%)'
     if (props.direction == 'left') {
-      style.right = '120%'
+      style.right = '105%'
     } else {
-      style.left = '120%'
+      style.left = '105%'
     }
   } else {
     style.left = '50%'
     style.transform = 'translateX(-50%)'
+    if (props.direction == 'top') {
+      style.bottom = '105%'
+    } else {
+      style.top = '105%'
+    }
   }
 
   return style

From 6e9e2600125651112cbe033453865c1a3c764b28 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sat, 29 Jul 2023 19:17:07 +0200
Subject: [PATCH 03/16] overwork options selector

---
 .../components/OptionsSelectorComponent.vue   | 49 -------------
 .../src/components/ToolTipComponent.vue       | 16 +---
 .../optionsSelectors/OptionComponent.vue      | 26 +++++++
 .../OptionsSelectorComponent.vue              | 73 +++++++++++++++++++
 report-viewer/src/views/OverviewView.vue      |  2 +-
 5 files changed, 102 insertions(+), 64 deletions(-)
 delete mode 100644 report-viewer/src/components/OptionsSelectorComponent.vue
 create mode 100644 report-viewer/src/components/optionsSelectors/OptionComponent.vue
 create mode 100644 report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue

diff --git a/report-viewer/src/components/OptionsSelectorComponent.vue b/report-viewer/src/components/OptionsSelectorComponent.vue
deleted file mode 100644
index 1227422dc..000000000
--- a/report-viewer/src/components/OptionsSelectorComponent.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<!--
-  Component for selecting one of multiple options.
--->
-<template>
-  <div class="flex flex-row text-xs h-fit items-center text-center">
-    <div v-if="name != ''" class="mr-3 text-base">
-      {{ name }}
-    </div>
-    <Interactable
-      v-for="[index, label] in labels.entries()"
-      :key="label"
-      class="mr-2 px-[12px] w-fit !rounded-2xl flex justify-center items-center text-center box-border h-6 hover:!border-[2px] hover:px-[11px]"
-      :class="{ '!bg-accent !border-accent-dark !bg-opacity-40': index == selected }"
-      @click="select(index)"
-    >
-      {{ label }}
-    </Interactable>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Interactable from './InteractableComponent.vue'
-import { toRef } from 'vue'
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: false,
-    default: ''
-  },
-  labels: {
-    type: Array<string>,
-    required: true
-  },
-  defaultSelected: {
-    type: Number,
-    required: false,
-    default: 0
-  }
-})
-
-const emit = defineEmits(['selectionChanged'])
-const selected = toRef(props.defaultSelected)
-
-function select(index: number) {
-  emit('selectionChanged', index)
-  selected.value = index
-}
-</script>
diff --git a/report-viewer/src/components/ToolTipComponent.vue b/report-viewer/src/components/ToolTipComponent.vue
index a6f9c4899..c175e7cdf 100644
--- a/report-viewer/src/components/ToolTipComponent.vue
+++ b/report-viewer/src/components/ToolTipComponent.vue
@@ -1,13 +1,11 @@
 <template>
   <div class="relative inline-block group z-10">
-    <slot v-if="!defaultText"></slot>
-    <div v-else>{{ defaultText }}</div>
+    <slot></slot>
     <div
       class="absolute hidden group-hover:block bg-black bg-opacity-60 px-1 rounded-md text-white text-center"
       :style="tooltipPosition"
     >
-      <slot name="tooltip" v-if="!tooltipText"></slot>
-      <div class="text-sm" v-else>{{ tooltipText }}</div>
+      <slot name="tooltip"></slot>
       <div class="border-4 border-solid absolute" :style="arrowStyle"><!-- Arrow --></div>
     </div>
   </div>
@@ -21,16 +19,6 @@ const props = defineProps({
     type: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
     required: false,
     default: 'top'
-  },
-  defaultText: {
-    type: String,
-    required: false,
-    default: undefined
-  },
-  tooltipText: {
-    type: String,
-    required: false,
-    default: undefined
   }
 })
 
diff --git a/report-viewer/src/components/optionsSelectors/OptionComponent.vue b/report-viewer/src/components/optionsSelectors/OptionComponent.vue
new file mode 100644
index 000000000..84c1ba40e
--- /dev/null
+++ b/report-viewer/src/components/optionsSelectors/OptionComponent.vue
@@ -0,0 +1,26 @@
+<template>
+  <Interactable
+    class="mr-2 px-[12px] w-fit !rounded-2xl flex justify-center items-center text-center box-border h-6 hover:!border-[2px] hover:px-[11px]"
+    :class="{ '!bg-accent !border-accent-dark !bg-opacity-40': selected }"
+    @click="$emit('click')"
+  >
+    {{ label }}
+  </Interactable>
+</template>
+
+<script setup lang="ts">
+import Interactable from '../InteractableComponent.vue'
+
+defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  selected: {
+    type: Boolean,
+    required: true
+  }
+})
+
+defineEmits(['click'])
+</script>
diff --git a/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue b/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue
new file mode 100644
index 000000000..5ffbb2a07
--- /dev/null
+++ b/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue
@@ -0,0 +1,73 @@
+<!--
+  Component for selecting one of multiple options.
+-->
+<template>
+  <div class="flex flex-row text-xs h-fit items-center text-center">
+    <div v-if="name != ''" class="mr-3 text-base">
+      {{ name }}
+    </div>
+    <div v-for="[index, label] in labels.entries()" :key="index">
+      <ToolTipComponent
+        v-if="(label as ToolTipLabel).displayValue !== undefined"
+        direction="left"
+        :tooltip-text="(label as ToolTipLabel).tooltip"
+      >
+        <template #default>
+          <OptionComponent
+            :label="(label as ToolTipLabel).displayValue"
+            :selected="index == selected"
+            @click="select(index)"
+          />
+        </template>
+
+        <template #tooltip>
+          <p class="whitespace-nowrap min-h-[1.25rem] flex items-center">
+            {{ (label as ToolTipLabel).tooltip }}
+          </p>
+        </template>
+      </ToolTipComponent>
+      <OptionComponent
+        v-else
+        :label="label as string"
+        :selected="index == selected"
+        @click="select(index)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toRef } from 'vue'
+import ToolTipComponent from '../ToolTipComponent.vue'
+import OptionComponent from './OptionComponent.vue'
+
+type ToolTipLabel = {
+  displayValue: string
+  tooltip: string
+}
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: false,
+    default: ''
+  },
+  labels: {
+    type: Array<string | ToolTipLabel>,
+    required: true
+  },
+  defaultSelected: {
+    type: Number,
+    required: false,
+    default: 0
+  }
+})
+
+const emit = defineEmits(['selectionChanged'])
+const selected = toRef(props.defaultSelected)
+
+function select(index: number) {
+  emit('selectionChanged', index)
+  selected.value = index
+}
+</script>
diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue
index 5b0334fc8..d04c94715 100644
--- a/report-viewer/src/views/OverviewView.vue
+++ b/report-viewer/src/views/OverviewView.vue
@@ -86,7 +86,7 @@ import MetricType from '@/model/MetricType'
 import SearchBarComponent from '@/components/SearchBarComponent.vue'
 import TextInformation from '@/components/TextInformation.vue'
 import type { ComparisonListElement } from '@/model/ComparisonListElement'
-import OptionsSelector from '@/components/OptionsSelectorComponent.vue'
+import OptionsSelector from '@/components/optionsSelectors/OptionsSelectorComponent.vue'
 
 const overview = OverviewFactory.getOverview()
 

From e695c4548a95a79ff6377458ac4bb47c4a515519 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sat, 29 Jul 2023 20:04:11 +0200
Subject: [PATCH 04/16] add metric selector

---
 .../src/components/ToolTipComponent.vue       |  4 +--
 .../optionsSelectors/MetricSelector.vue       | 36 +++++++++++++++++++
 .../OptionsSelectorComponent.vue              | 10 +++---
 report-viewer/src/model/MetricType.ts         | 21 +++++++++++
 report-viewer/src/router/index.ts             |  5 +++
 report-viewer/src/views/OverviewView.vue      | 17 +++++----
 report-viewer/src/views/TestView.vue          | 24 +++++++++++++
 7 files changed, 101 insertions(+), 16 deletions(-)
 create mode 100644 report-viewer/src/components/optionsSelectors/MetricSelector.vue
 create mode 100644 report-viewer/src/views/TestView.vue

diff --git a/report-viewer/src/components/ToolTipComponent.vue b/report-viewer/src/components/ToolTipComponent.vue
index c175e7cdf..32d302346 100644
--- a/report-viewer/src/components/ToolTipComponent.vue
+++ b/report-viewer/src/components/ToolTipComponent.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="relative inline-block group z-10">
+  <div class="relative inline-block group">
     <slot></slot>
     <div
-      class="absolute hidden group-hover:block bg-black bg-opacity-60 px-1 rounded-md text-white text-center"
+      class="absolute hidden group-hover:block bg-black bg-opacity-60 px-1 rounded-md text-white text-center z-10"
       :style="tooltipPosition"
     >
       <slot name="tooltip"></slot>
diff --git a/report-viewer/src/components/optionsSelectors/MetricSelector.vue b/report-viewer/src/components/optionsSelectors/MetricSelector.vue
new file mode 100644
index 000000000..3831b21e1
--- /dev/null
+++ b/report-viewer/src/components/optionsSelectors/MetricSelector.vue
@@ -0,0 +1,36 @@
+<template>
+  <OptionsSelectorComponent
+    :name="name"
+    :labels="labels"
+    @selection-changed="(i) => $emit('selectionChanged', metrics[i])"
+  />
+</template>
+
+<script setup lang="ts">
+import OptionsSelectorComponent from './OptionsSelectorComponent.vue'
+import MetricType, { metricToolTips } from '@/model/MetricType'
+
+const props = defineProps({
+  metrics: {
+    type: Array<MetricType>,
+    required: false,
+    default: [MetricType.AVERAGE, MetricType.MAXIMUM]
+  },
+  name: {
+    type: String,
+    required: false,
+    default: ''
+  }
+})
+
+defineEmits(['selectionChanged'])
+
+const labels: { displayValue: string; tooltip: string }[] = []
+
+for (const metric of props.metrics) {
+  labels.push({
+    displayValue: metricToolTips[metric].longName,
+    tooltip: metricToolTips[metric].tooltip
+  })
+}
+</script>
diff --git a/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue b/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue
index 5ffbb2a07..207b61276 100644
--- a/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue
+++ b/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue
@@ -3,13 +3,13 @@
 -->
 <template>
   <div class="flex flex-row text-xs h-fit items-center text-center">
-    <div v-if="name != ''" class="mr-3 text-base">
-      {{ name }}
+    <div v-if="title != ''" class="mr-3 text-base">
+      {{ title }}
     </div>
     <div v-for="[index, label] in labels.entries()" :key="index">
       <ToolTipComponent
         v-if="(label as ToolTipLabel).displayValue !== undefined"
-        direction="left"
+        direction="right"
         :tooltip-text="(label as ToolTipLabel).tooltip"
       >
         <template #default>
@@ -21,7 +21,7 @@
         </template>
 
         <template #tooltip>
-          <p class="whitespace-nowrap min-h-[1.25rem] flex items-center">
+          <p class="whitespace-pre min-h-[1.25rem] flex items-center">
             {{ (label as ToolTipLabel).tooltip }}
           </p>
         </template>
@@ -47,7 +47,7 @@ type ToolTipLabel = {
 }
 
 const props = defineProps({
-  name: {
+  title: {
     type: String,
     required: false,
     default: ''
diff --git a/report-viewer/src/model/MetricType.ts b/report-viewer/src/model/MetricType.ts
index dfb93c9f0..0d9a5b375 100644
--- a/report-viewer/src/model/MetricType.ts
+++ b/report-viewer/src/model/MetricType.ts
@@ -7,3 +7,24 @@ enum MetricType {
 }
 
 export default MetricType
+
+type MetricToolTipData = {
+  longName: string
+  shortName: string
+  tooltip: string
+}
+
+export const metricToolTips: Record<MetricType, MetricToolTipData> = {
+  [MetricType.AVERAGE]: {
+    longName: 'Average Similarity',
+    shortName: 'AVG',
+    tooltip:
+      'The average similarity of the two files.\nA high similarity indicates that the programms work in a similar way.'
+  },
+  [MetricType.MAXIMUM]: {
+    longName: 'Maximum Similarity',
+    shortName: 'MAX',
+    tooltip:
+      'The maximum similarity of the two files.\nUsefull if programms are very dfferent in size.'
+  }
+}
diff --git a/report-viewer/src/router/index.ts b/report-viewer/src/router/index.ts
index 4d4212d82..b88420aa8 100644
--- a/report-viewer/src/router/index.ts
+++ b/report-viewer/src/router/index.ts
@@ -43,6 +43,11 @@ const router = createRouter({
       path: '/info',
       name: 'InfoView',
       component: InformationView
+    },
+    {
+      path: '/test',
+      name: 'TestView',
+      component: () => import('@/views/TestView.vue')
     }
   ]
 })
diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue
index d04c94715..b92047331 100644
--- a/report-viewer/src/views/OverviewView.vue
+++ b/report-viewer/src/views/OverviewView.vue
@@ -29,13 +29,13 @@
           :distribution="overview.distribution[selectedDistributionDiagramMetric]"
           class="w-full h-2/3"
         />
-        <div class="flex flex-col flex-grow space-y-1">
+        <div class="flex flex-col flex-grow">
           <h3 class="text-lg underline">Options:</h3>
-          <ScrollableComponent class="flex-grow space-y-2">
-            <OptionsSelector
-              name="Metric"
-              :labels="['Average', 'Maximum']"
+          <ScrollableComponent class="flex-grow h-fit">
+            <MetricSelector
+              title="Metric"
               @selection-changed="(i: number) => selectDistributionDiagramMetric(i)"
+              class="mt-2"
             />
           </ScrollableComponent>
         </div>
@@ -57,9 +57,8 @@
             }}
           </Button>
         </div>
-        <OptionsSelector
-          name="Sort By"
-          :labels="['Average Similarity', 'Maximum Similarity']"
+        <MetricSelector
+          title="Sort By"
           @selection-changed="(index) => (comparisonTableSortingMetric = index)"
         />
         <ComparisonsTable
@@ -86,7 +85,7 @@ import MetricType from '@/model/MetricType'
 import SearchBarComponent from '@/components/SearchBarComponent.vue'
 import TextInformation from '@/components/TextInformation.vue'
 import type { ComparisonListElement } from '@/model/ComparisonListElement'
-import OptionsSelector from '@/components/optionsSelectors/OptionsSelectorComponent.vue'
+import MetricSelector from '@/components/optionsSelectors/MetricSelector.vue'
 
 const overview = OverviewFactory.getOverview()
 
diff --git a/report-viewer/src/views/TestView.vue b/report-viewer/src/views/TestView.vue
new file mode 100644
index 000000000..ddd9f6380
--- /dev/null
+++ b/report-viewer/src/views/TestView.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="w-full grow flex items-center justify-center h-96">
+    <div class="border-1 border-red-500">
+      <MetricSelector />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ToolTipComponent from '@/components/ToolTipComponent.vue'
+import MetricSelector from '@/components/optionsSelectors/MetricSelector.vue'
+import OptionsSelectorComponent from '@/components/optionsSelectors/OptionsSelectorComponent.vue'
+
+const label = [
+  {
+    displayValue: 'Test',
+    tooltip: 'This is a test'
+  },
+  {
+    displayValue: 'Test2',
+    tooltip: 'This is a test2'
+  }
+]
+</script>

From 97c1222bf0096e64998ecfcd793f75564b5d2360 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sat, 29 Jul 2023 20:08:33 +0200
Subject: [PATCH 05/16] replace old tooltip

---
 .../src/components/ComparisonsTable.vue       | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index 400b67943..363d02b19 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -98,21 +98,23 @@
                   }"
                   class="w-full tect-center flex justify-center"
                 >
-                  <div class="group relative w-fit">
-                    {{ clusters?.[index].members?.length }}
-                    <FontAwesomeIcon
-                      :icon="['fas', 'user-group']"
-                      :style="{ color: clusterIconColors[index] }"
-                    />
-                    {{ ((clusters?.[index].averageSimilarity as number) * 100).toFixed(2) }}%
-                    <div
-                      class="hidden group-hover:flex absolute z-50 top-0 left-[-400px] text-sm h-full items-center text-white bg-gray-950 bg-opacity-90 px-2 rounded-sm tooltipArrow"
-                    >
-                      {{ clusters?.[index].members?.length }} submissions in cluster with average
-                      similarity of
+                  <ToolTipComponent class="w-fit" direction="left">
+                    <template #default>
+                      {{ clusters?.[index].members?.length }}
+                      <FontAwesomeIcon
+                        :icon="['fas', 'user-group']"
+                        :style="{ color: clusterIconColors[index] }"
+                      />
                       {{ ((clusters?.[index].averageSimilarity as number) * 100).toFixed(2) }}%
-                    </div>
-                  </div>
+                    </template>
+                    <template #tooltip>
+                      <p class="whitespace-nowrap text-sm">
+                        {{ clusters?.[index].members?.length }} submissions in cluster with average
+                        similarity of
+                        {{ ((clusters?.[index].averageSimilarity as number) * 100).toFixed(2) }}%
+                      </p>
+                    </template>
+                  </ToolTipComponent>
                 </RouterLink>
               </div>
             </div>
@@ -133,6 +135,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faUserGroup } from '@fortawesome/free-solid-svg-icons'
 import { generateColors } from '@/utils/ColorUtils'
+import ToolTipComponent from './ToolTipComponent.vue'
 
 library.add(faUserGroup)
 

From 2809704ef41dcf3dd47af5d91c62cc393313f9bf Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sun, 30 Jul 2023 11:18:25 +0200
Subject: [PATCH 06/16] more tooltips

---
 .../src/components/ComparisonsTable.vue       | 24 +++++++++++++++++--
 .../src/components/ToolTipComponent.vue       | 11 ++++-----
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index 363d02b19..502e9b395 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -11,8 +11,27 @@
         <div class="tableCellSimilarity !flex-col">
           <div>Similarity</div>
           <div class="flex flex-row w-full">
-            <div class="flex-1">Average</div>
-            <div class="flex-1">Maximum</div>
+            <ToolTipComponent class="flex-1">
+              <template #default>
+                <p class="w-full text-center">{{ metricToolTips[MetricType.AVERAGE].shortName }}</p>
+              </template>
+              <template #tooltip>
+                <p class="whitespace-pre text-sm">
+                  {{ metricToolTips[MetricType.AVERAGE].tooltip }}
+                </p>
+              </template>
+            </ToolTipComponent>
+
+            <ToolTipComponent class="flex-1">
+              <template #default>
+                <p class="w-full text-center">{{ metricToolTips[MetricType.MAXIMUM].shortName }}</p>
+              </template>
+              <template #tooltip>
+                <p class="whitespace-pre text-sm">
+                  {{ metricToolTips[MetricType.MAXIMUM].tooltip }}
+                </p>
+              </template>
+            </ToolTipComponent>
           </div>
         </div>
         <div class="tableCellCluster items-center" v-if="displayClusters">Cluster</div>
@@ -136,6 +155,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { faUserGroup } from '@fortawesome/free-solid-svg-icons'
 import { generateColors } from '@/utils/ColorUtils'
 import ToolTipComponent from './ToolTipComponent.vue'
+import MetricType, { metricToolTips } from '@/model/MetricType'
 
 library.add(faUserGroup)
 
diff --git a/report-viewer/src/components/ToolTipComponent.vue b/report-viewer/src/components/ToolTipComponent.vue
index 32d302346..d7d34a0af 100644
--- a/report-viewer/src/components/ToolTipComponent.vue
+++ b/report-viewer/src/components/ToolTipComponent.vue
@@ -2,7 +2,7 @@
   <div class="relative inline-block group">
     <slot></slot>
     <div
-      class="absolute hidden group-hover:block bg-black bg-opacity-60 px-1 rounded-md text-white text-center z-10"
+      class="absolute hidden group-hover:block px-1 rounded-md text-white text-center z-10"
       :style="tooltipPosition"
     >
       <slot name="tooltip"></slot>
@@ -22,6 +22,8 @@ const props = defineProps({
   }
 })
 
+const opacity = 0.8
+
 const tooltipPosition = computed(() => {
   const style: StyleValue = {}
 
@@ -42,6 +44,7 @@ const tooltipPosition = computed(() => {
       style.top = '105%'
     }
   }
+  style.backgroundColor = `rgba(0,0,0,${opacity})`
 
   return style
 })
@@ -50,13 +53,9 @@ const arrowStyle = computed(() => {
   const style: StyleValue = {}
   style.content = ' '
 
-  function getBorderColor(current: String, other: String) {
-    return other == current ? 'rgba(0,0,0,0.6)' : 'transparent'
-  }
-
   style.borderColor = ''
   for (const dir of ['top', 'right', 'bottom', 'left']) {
-    style.borderColor += getBorderColor(dir, props.direction) + ' '
+    style.borderColor += dir == props.direction ? `rgba(0,0,0,${opacity}) ` : 'transparent '
   }
 
   if (props.direction == 'left' || props.direction == 'right') {

From bf332f0211543bdc0cb856f05a13b4212cd9e75c Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Fri, 8 Sep 2023 12:33:37 +0200
Subject: [PATCH 07/16] add some more tooltips

---
 report-viewer/src/components/MatchList.vue    | 27 ++++++++----
 .../optionsSelectors/MetricSelector.vue       |  2 +-
 .../optionsSelectors/OptionComponent.vue      |  7 ++--
 .../OptionsSelectorComponent.vue              | 25 ++++++-----
 report-viewer/src/views/OverviewView.vue      | 41 +++++++++++++++----
 report-viewer/src/views/TestView.vue          | 24 -----------
 6 files changed, 70 insertions(+), 56 deletions(-)
 delete mode 100644 report-viewer/src/views/TestView.vue

diff --git a/report-viewer/src/components/MatchList.vue b/report-viewer/src/components/MatchList.vue
index aeb218112..f36697b01 100644
--- a/report-viewer/src/components/MatchList.vue
+++ b/report-viewer/src/components/MatchList.vue
@@ -3,26 +3,35 @@
 -->
 <template>
   <div class="flex h-fit min-w-0 max-w-full flex-row space-x-1 overflow-x-hidden text-xs">
-    <Interactable class="my-2 flex h-6 items-center whitespace-nowrap !rounded-2xl text-center">
-      Match Files: TokenCount
-    </Interactable>
+    <ToolTipComponent direction="right">
+      <template #default>
+        <OptionComponent label="Match Files: TokenCount" />
+      </template>
+      <template #tooltip>
+        <p class="flex min-h-[1.25rem] items-center whitespace-pre">
+          Click on a match to show it in the code view.
+        </p>
+      </template>
+    </ToolTipComponent>
+
     <div class="flex w-full flex-row space-x-1 overflow-x-auto">
-      <Interactable
-        class="my-2 flex h-6 items-center whitespace-nowrap !rounded-2xl !bg-opacity-50 text-center"
+      <OptionComponent
         :style="{ background: match.color }"
         v-for="[index, match] in matches?.entries()"
         v-bind:key="index"
         @click="$emit('matchSelected', match)"
-      >
-        {{ getFileName(match.firstFile) }} - {{ getFileName(match.secondFile) }}: {{ match.tokens }}
-      </Interactable>
+        :label="
+          getFileName(match.firstFile) + ' - ' + getFileName(match.secondFile) + ': ' + match.tokens
+        "
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { Match } from '@/model/Match'
-import Interactable from './InteractableComponent.vue'
+import OptionComponent from './optionsSelectors/OptionComponent.vue'
+import ToolTipComponent from './ToolTipComponent.vue'
 
 defineProps({
   /**
diff --git a/report-viewer/src/components/optionsSelectors/MetricSelector.vue b/report-viewer/src/components/optionsSelectors/MetricSelector.vue
index 3831b21e1..5e7823eb2 100644
--- a/report-viewer/src/components/optionsSelectors/MetricSelector.vue
+++ b/report-viewer/src/components/optionsSelectors/MetricSelector.vue
@@ -8,7 +8,7 @@
 
 <script setup lang="ts">
 import OptionsSelectorComponent from './OptionsSelectorComponent.vue'
-import MetricType, { metricToolTips } from '@/model/MetricType'
+import { MetricType, metricToolTips } from '@/model/MetricType'
 
 const props = defineProps({
   metrics: {
diff --git a/report-viewer/src/components/optionsSelectors/OptionComponent.vue b/report-viewer/src/components/optionsSelectors/OptionComponent.vue
index 84c1ba40e..443940a84 100644
--- a/report-viewer/src/components/optionsSelectors/OptionComponent.vue
+++ b/report-viewer/src/components/optionsSelectors/OptionComponent.vue
@@ -1,7 +1,7 @@
 <template>
   <Interactable
-    class="mr-2 px-[12px] w-fit !rounded-2xl flex justify-center items-center text-center box-border h-6 hover:!border-[2px] hover:px-[11px]"
-    :class="{ '!bg-accent !border-accent-dark !bg-opacity-40': selected }"
+    class="mr-2 box-border flex h-6 w-fit items-center justify-center whitespace-nowrap !rounded-2xl px-[12px] text-center hover:!border-[2px] hover:px-[11px]"
+    :class="{ '!border-accent-dark !bg-accent !bg-opacity-40': selected }"
     @click="$emit('click')"
   >
     {{ label }}
@@ -18,7 +18,8 @@ defineProps({
   },
   selected: {
     type: Boolean,
-    required: true
+    required: false,
+    default: false
   }
 })
 
diff --git a/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue b/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue
index 207b61276..f9d98c050 100644
--- a/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue
+++ b/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue
@@ -2,26 +2,22 @@
   Component for selecting one of multiple options.
 -->
 <template>
-  <div class="flex flex-row text-xs h-fit items-center text-center">
+  <div class="flex h-fit flex-row items-center text-center text-xs">
     <div v-if="title != ''" class="mr-3 text-base">
       {{ title }}
     </div>
     <div v-for="[index, label] in labels.entries()" :key="index">
-      <ToolTipComponent
-        v-if="(label as ToolTipLabel).displayValue !== undefined"
-        direction="right"
-        :tooltip-text="(label as ToolTipLabel).tooltip"
-      >
+      <ToolTipComponent v-if="(label as ToolTipLabel).displayValue !== undefined" direction="right">
         <template #default>
           <OptionComponent
             :label="(label as ToolTipLabel).displayValue"
-            :selected="index == selected"
+            :selected="index == getSelected()"
             @click="select(index)"
           />
         </template>
 
         <template #tooltip>
-          <p class="whitespace-pre min-h-[1.25rem] flex items-center">
+          <p class="flex min-h-[1.25rem] items-center whitespace-pre">
             {{ (label as ToolTipLabel).tooltip }}
           </p>
         </template>
@@ -29,7 +25,7 @@
       <OptionComponent
         v-else
         :label="label as string"
-        :selected="index == selected"
+        :selected="index == getSelected()"
         @click="select(index)"
       />
     </div>
@@ -37,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { toRef } from 'vue'
+import { ref } from 'vue'
 import ToolTipComponent from '../ToolTipComponent.vue'
 import OptionComponent from './OptionComponent.vue'
 
@@ -64,7 +60,14 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['selectionChanged'])
-const selected = toRef(props.defaultSelected)
+const selected = ref(-1)
+
+function getSelected() {
+  if (selected.value == -1) {
+    return props.defaultSelected
+  }
+  return selected.value
+}
 
 function select(index: number) {
   emit('selectionChanged', index)
diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue
index c9e6658d7..13259c6a8 100644
--- a/report-viewer/src/views/OverviewView.vue
+++ b/report-viewer/src/views/OverviewView.vue
@@ -17,7 +17,17 @@
           <TextInformation label="Min Match Length">{{
             overview.matchSensitivity
           }}</TextInformation>
-          <Button @click="router.push({ name: 'InfoView' })"> More </Button>
+
+          <ToolTipComponent direction="left">
+            <template #default>
+              <Button @click="router.push({ name: 'InfoView' })"> More </Button>
+            </template>
+            <template #tooltip>
+              <p class="flex min-h-[1.25rem] items-center whitespace-pre">
+                More information about the CLI run of JPlag
+              </p>
+            </template>
+          </ToolTipComponent>
         </div>
       </Container>
     </div>
@@ -35,14 +45,14 @@
           <ScrollableComponent class="h-fit flex-grow">
             <MetricSelector
               class="mt-2"
-              title="Metric"
+              title="Metric:"
               @selection-changed="
                 (i: number) => (selectedDistributionDiagramMetric = getMetricFromNumber(i))
               "
             />
             <OptionsSelector
               class="mt-2"
-              name="Scale x-Axis:"
+              title="Scale x-Axis:"
               :labels="['Linear', 'Logarithmic']"
               @selection-changed="
                 (i: number) => (distributionDiagramScaleX = i == 0 ? 'linear' : 'logarithmic')
@@ -55,11 +65,24 @@
       <Container class="flex max-h-0 min-h-full flex-1 flex-col space-y-2">
         <div class="flex flex-row items-center space-x-8">
           <h2>Top Comparisons:</h2>
-          <SearchBarComponent
-            placeholder="Filter/Unhide Comparisons"
-            class="flex-grow"
-            @input-changed="(value) => (searchString = value)"
-          />
+          <ToolTipComponent direction="bottom" class="flex-grow">
+            <template #default>
+              <SearchBarComponent
+                placeholder="Filter/Unhide Comparisons"
+                @input-changed="(value) => (searchString = value)"
+              />
+            </template>
+            <template #tooltip>
+              <p class="flex min-h-[1.25rem] items-center whitespace-pre">
+                Type in the name of a submission to only show comparisons that contain this
+                submission.
+              </p>
+              <p class="flex min-h-[1.25rem] items-center whitespace-pre">
+                Fully written out names get unhidden.
+              </p>
+            </template>
+          </ToolTipComponent>
+
           <Button class="w-24" @click="changeAnnoymousForAll()">
             {{
               store().state.anonymous.size == store().getSubmissionIds.length
@@ -99,6 +122,8 @@ import SearchBarComponent from '@/components/SearchBarComponent.vue'
 import TextInformation from '@/components/TextInformation.vue'
 import type { ComparisonListElement } from '@/model/ComparisonListElement'
 import MetricSelector from '@/components/optionsSelectors/MetricSelector.vue'
+import ToolTipComponent from '@/components/ToolTipComponent.vue'
+import OptionsSelector from '@/components/optionsSelectors/OptionsSelectorComponent.vue'
 
 const overview = OverviewFactory.getOverview()
 
diff --git a/report-viewer/src/views/TestView.vue b/report-viewer/src/views/TestView.vue
deleted file mode 100644
index ddd9f6380..000000000
--- a/report-viewer/src/views/TestView.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <div class="w-full grow flex items-center justify-center h-96">
-    <div class="border-1 border-red-500">
-      <MetricSelector />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import ToolTipComponent from '@/components/ToolTipComponent.vue'
-import MetricSelector from '@/components/optionsSelectors/MetricSelector.vue'
-import OptionsSelectorComponent from '@/components/optionsSelectors/OptionsSelectorComponent.vue'
-
-const label = [
-  {
-    displayValue: 'Test',
-    tooltip: 'This is a test'
-  },
-  {
-    displayValue: 'Test2',
-    tooltip: 'This is a test2'
-  }
-]
-</script>

From 203cdd060468cff9c494f25142914df09e2672d0 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Fri, 8 Sep 2023 12:34:34 +0200
Subject: [PATCH 08/16] fix build

---
 report-viewer/src/router/index.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/report-viewer/src/router/index.ts b/report-viewer/src/router/index.ts
index ee1b29da5..d277f86e5 100644
--- a/report-viewer/src/router/index.ts
+++ b/report-viewer/src/router/index.ts
@@ -43,11 +43,6 @@ const router = createRouter({
       path: '/info',
       name: 'InfoView',
       component: InformationView
-    },
-    {
-      path: '/test',
-      name: 'TestView',
-      component: () => import('@/views/TestView.vue')
     }
   ]
 })

From 3961b3d48dee4c86882b132785d9853a5831c956 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sun, 10 Sep 2023 12:09:44 +0200
Subject: [PATCH 09/16] fix some tooltips

---
 report-viewer/src/components/ComparisonsTable.vue    |  4 ++--
 report-viewer/src/components/MatchList.vue           |  4 +---
 .../optionsSelectors/OptionsSelectorComponent.vue    |  2 +-
 report-viewer/src/views/ClusterView.vue              |  2 +-
 report-viewer/src/views/OverviewView.vue             | 12 ++++--------
 5 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index b9cf6e715..c22f40f70 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -11,7 +11,7 @@
         <div class="tableCellSimilarity !flex-col">
           <div>Similarity</div>
           <div class="flex w-full flex-row">
-            <ToolTipComponent class="flex-1">
+            <ToolTipComponent class="flex-1" :direction="displayClusters ? 'top' : 'left'">
               <template #default>
                 <p class="w-full text-center">{{ metricToolTips[MetricType.AVERAGE].shortName }}</p>
               </template>
@@ -22,7 +22,7 @@
               </template>
             </ToolTipComponent>
 
-            <ToolTipComponent class="flex-1">
+            <ToolTipComponent class="flex-1" :direction="displayClusters ? 'top' : 'left'">
               <template #default>
                 <p class="w-full text-center">{{ metricToolTips[MetricType.MAXIMUM].shortName }}</p>
               </template>
diff --git a/report-viewer/src/components/MatchList.vue b/report-viewer/src/components/MatchList.vue
index f36697b01..17e5bee28 100644
--- a/report-viewer/src/components/MatchList.vue
+++ b/report-viewer/src/components/MatchList.vue
@@ -8,9 +8,7 @@
         <OptionComponent label="Match Files: TokenCount" />
       </template>
       <template #tooltip>
-        <p class="flex min-h-[1.25rem] items-center whitespace-pre">
-          Click on a match to show it in the code view.
-        </p>
+        <p class="whitespace-pre text-sm">Click on a match to show it in the code view.</p>
       </template>
     </ToolTipComponent>
 
diff --git a/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue b/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue
index f9d98c050..94397decd 100644
--- a/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue
+++ b/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue
@@ -17,7 +17,7 @@
         </template>
 
         <template #tooltip>
-          <p class="flex min-h-[1.25rem] items-center whitespace-pre">
+          <p class="whitespace-pre text-sm">
             {{ (label as ToolTipLabel).tooltip }}
           </p>
         </template>
diff --git a/report-viewer/src/views/ClusterView.vue b/report-viewer/src/views/ClusterView.vue
index 82782c485..994b56f57 100644
--- a/report-viewer/src/views/ClusterView.vue
+++ b/report-viewer/src/views/ClusterView.vue
@@ -15,7 +15,7 @@
       <Container class="flex max-h-0 min-h-full flex-1 flex-col overflow-hidden">
         <ClusterRadarChart :cluster="clusterListElement" class="flex-grow" />
       </Container>
-      <Container class="flex max-h-0 min-h-full w-1/3 flex-col space-y-2 overflow-hidden">
+      <Container class="flex max-h-0 min-h-full w-1/3 flex-col space-y-2">
         <h2>Comparisons of Cluster Members:</h2>
         <ComparisonsTable :topComparisons="comparisons" class="min-h-0 flex-1" />
       </Container>
diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue
index 13259c6a8..f2ea348b3 100644
--- a/report-viewer/src/views/OverviewView.vue
+++ b/report-viewer/src/views/OverviewView.vue
@@ -23,9 +23,7 @@
               <Button @click="router.push({ name: 'InfoView' })"> More </Button>
             </template>
             <template #tooltip>
-              <p class="flex min-h-[1.25rem] items-center whitespace-pre">
-                More information about the CLI run of JPlag
-              </p>
+              <p class="whitespace-pre text-sm">More information about the CLI run of JPlag</p>
             </template>
           </ToolTipComponent>
         </div>
@@ -73,13 +71,11 @@
               />
             </template>
             <template #tooltip>
-              <p class="flex min-h-[1.25rem] items-center whitespace-pre">
+              <p class="whitespace-pre text-sm">
                 Type in the name of a submission to only show comparisons that contain this
                 submission.
               </p>
-              <p class="flex min-h-[1.25rem] items-center whitespace-pre">
-                Fully written out names get unhidden.
-              </p>
+              <p class="whitespace-pre text-sm">Fully written out names get unhidden.</p>
             </template>
           </ToolTipComponent>
 
@@ -92,7 +88,7 @@
           </Button>
         </div>
         <MetricSelector
-          title="Sort By"
+          title="Sort By:"
           @selection-changed="
             (index) => (comparisonTableSortingMetric = getMetricFromNumber(index))
           "

From c327e5abcffded1e13dfa76f8e809f58088d0c80 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sun, 10 Sep 2023 12:15:03 +0200
Subject: [PATCH 10/16] rearange classes

---
 report-viewer/src/components/ToolTipComponent.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/report-viewer/src/components/ToolTipComponent.vue b/report-viewer/src/components/ToolTipComponent.vue
index d7d34a0af..345fd7db7 100644
--- a/report-viewer/src/components/ToolTipComponent.vue
+++ b/report-viewer/src/components/ToolTipComponent.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="relative inline-block group">
+  <div class="group relative inline-block">
     <slot></slot>
     <div
-      class="absolute hidden group-hover:block px-1 rounded-md text-white text-center z-10"
+      class="absolute z-10 hidden rounded-md px-1 text-center text-white group-hover:block"
       :style="tooltipPosition"
     >
       <slot name="tooltip"></slot>
-      <div class="border-4 border-solid absolute" :style="arrowStyle"><!-- Arrow --></div>
+      <div class="absolute border-4 border-solid" :style="arrowStyle"><!-- Arrow --></div>
     </div>
   </div>
 </template>

From d86abeca8492cad88be4118dd5391f7fce4f703c Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sun, 10 Sep 2023 12:41:58 +0200
Subject: [PATCH 11/16] fix bugs

---
 .../components/optionsSelectors/MetricSelector.vue | 11 +++++------
 report-viewer/src/views/OverviewView.vue           | 14 ++------------
 2 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/report-viewer/src/components/optionsSelectors/MetricSelector.vue b/report-viewer/src/components/optionsSelectors/MetricSelector.vue
index 5e7823eb2..4299cb5e7 100644
--- a/report-viewer/src/components/optionsSelectors/MetricSelector.vue
+++ b/report-viewer/src/components/optionsSelectors/MetricSelector.vue
@@ -7,6 +7,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, type Ref } from 'vue'
 import OptionsSelectorComponent from './OptionsSelectorComponent.vue'
 import { MetricType, metricToolTips } from '@/model/MetricType'
 
@@ -25,12 +26,10 @@ const props = defineProps({
 
 defineEmits(['selectionChanged'])
 
-const labels: { displayValue: string; tooltip: string }[] = []
-
-for (const metric of props.metrics) {
-  labels.push({
+const labels: Ref<{ displayValue: string; tooltip: string }[]> = computed(() =>
+  props.metrics.map((metric) => ({
     displayValue: metricToolTips[metric].longName,
     tooltip: metricToolTips[metric].tooltip
-  })
-}
+  }))
+)
 </script>
diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue
index f2ea348b3..9251331cc 100644
--- a/report-viewer/src/views/OverviewView.vue
+++ b/report-viewer/src/views/OverviewView.vue
@@ -45,7 +45,7 @@
               class="mt-2"
               title="Metric:"
               @selection-changed="
-                (i: number) => (selectedDistributionDiagramMetric = getMetricFromNumber(i))
+                (metric: MetricType) => (selectedDistributionDiagramMetric = metric)
               "
             />
             <OptionsSelector
@@ -89,9 +89,7 @@
         </div>
         <MetricSelector
           title="Sort By:"
-          @selection-changed="
-            (index) => (comparisonTableSortingMetric = getMetricFromNumber(index))
-          "
+          @selection-changed="(metric: MetricType) => (comparisonTableSortingMetric = metric)"
         />
         <ComparisonsTable
           :clusters="overview.clusters"
@@ -206,14 +204,6 @@ function changeAnnoymousForAll() {
 
 const selectedDistributionDiagramMetric = ref(MetricType.AVERAGE)
 
-function getMetricFromNumber(metric: number) {
-  if (metric == 0) {
-    return MetricType.AVERAGE
-  } else {
-    return MetricType.MAXIMUM
-  }
-}
-
 const hasMoreSubmissionPaths = overview.submissionFolderPath.length > 1
 const submissionPathValue = hasMoreSubmissionPaths
   ? 'Click More to see all paths'

From 32c00c163f2df5c9ee26a3f8e984efe1467b8d26 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sun, 10 Sep 2023 14:42:55 +0200
Subject: [PATCH 12/16] add tests

---
 .../components/OptionsSelectorComponent.vue   |  0
 .../optionsSelectors/MetricSelector.vue       |  4 +-
 .../optionsSelectors/MetricSelector.test.ts   | 46 ++++++++++++
 .../OptionSelectorComponent.test.ts           | 70 +++++++++++++++++++
 4 files changed, 118 insertions(+), 2 deletions(-)
 delete mode 100644 report-viewer/src/components/OptionsSelectorComponent.vue
 create mode 100644 report-viewer/tests/unit/components/optionsSelectors/MetricSelector.test.ts
 create mode 100644 report-viewer/tests/unit/components/optionsSelectors/OptionSelectorComponent.test.ts

diff --git a/report-viewer/src/components/OptionsSelectorComponent.vue b/report-viewer/src/components/OptionsSelectorComponent.vue
deleted file mode 100644
index e69de29bb..000000000
diff --git a/report-viewer/src/components/optionsSelectors/MetricSelector.vue b/report-viewer/src/components/optionsSelectors/MetricSelector.vue
index 4299cb5e7..0ff0d9735 100644
--- a/report-viewer/src/components/optionsSelectors/MetricSelector.vue
+++ b/report-viewer/src/components/optionsSelectors/MetricSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <OptionsSelectorComponent
-    :name="name"
+    :title="title"
     :labels="labels"
     @selection-changed="(i) => $emit('selectionChanged', metrics[i])"
   />
@@ -17,7 +17,7 @@ const props = defineProps({
     required: false,
     default: [MetricType.AVERAGE, MetricType.MAXIMUM]
   },
-  name: {
+  title: {
     type: String,
     required: false,
     default: ''
diff --git a/report-viewer/tests/unit/components/optionsSelectors/MetricSelector.test.ts b/report-viewer/tests/unit/components/optionsSelectors/MetricSelector.test.ts
new file mode 100644
index 000000000..18970b3b2
--- /dev/null
+++ b/report-viewer/tests/unit/components/optionsSelectors/MetricSelector.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MetricSelector from '@/components/optionsSelectors/MetricSelector.vue'
+import OptionComponent from '@/components/optionsSelectors/OptionComponent.vue'
+import { MetricType } from '@/model/MetricType'
+
+describe('OptionSelectorComponent', () => {
+  it('renders all options', async () => {
+    const wrapper = mount(MetricSelector, {
+      props: {
+        title: 'Test:'
+      }
+    })
+
+    expect(wrapper.text()).toContain('Test:')
+    expect(wrapper.text()).toContain('Average Similarity')
+    expect(wrapper.text()).toContain('Maximum Similarity')
+  })
+
+  it('renders given metrics only', async () => {
+    const wrapper = mount(MetricSelector, {
+      props: {
+        title: 'Test:',
+        metrics: [MetricType.AVERAGE]
+      }
+    })
+
+    expect(wrapper.text()).toContain('Test:')
+    expect(wrapper.text()).toContain('Average Similarity')
+    expect(wrapper.text()).not.toContain('Maximum Similarity')
+  })
+
+  it('switch selection', async () => {
+    const wrapper = mount(MetricSelector, {
+      props: {
+        title: 'Test:'
+      }
+    })
+
+    await wrapper.findAllComponents({ name: 'OptionComponent' })[1].trigger('click')
+
+    expect(wrapper.emitted('selectionChanged')).toBeTruthy()
+    expect(wrapper.emitted('selectionChanged')?.length).toBe(1)
+    expect(wrapper.emitted('selectionChanged')?.[0]).toEqual([MetricType.MAXIMUM])
+  })
+})
diff --git a/report-viewer/tests/unit/components/optionsSelectors/OptionSelectorComponent.test.ts b/report-viewer/tests/unit/components/optionsSelectors/OptionSelectorComponent.test.ts
new file mode 100644
index 000000000..8947c8050
--- /dev/null
+++ b/report-viewer/tests/unit/components/optionsSelectors/OptionSelectorComponent.test.ts
@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import OptionsSelectorComponent from '@/components/optionsSelectors/OptionsSelectorComponent.vue'
+import OptionComponent from '@/components/optionsSelectors/OptionComponent.vue'
+
+describe('OptionSelectorComponent', () => {
+  it('renders all options', async () => {
+    const wrapper = mount(OptionsSelectorComponent, {
+      props: {
+        title: 'Test:',
+        labels: ['Option 1', 'Option 2', 'Option 3'],
+        defaultSelected: 1
+      }
+    })
+
+    expect(wrapper.text()).toContain('Test:')
+    expect(wrapper.text()).toContain('Option 1')
+    expect(wrapper.text()).toContain('Option 2')
+    expect(wrapper.text()).toContain('Option 3')
+
+    expect(
+      wrapper
+        .findAllComponents(OptionComponent)
+        .find((e) => e.text() === 'Option 2')
+        ?.classes()
+    ).toContain('!bg-accent')
+  })
+
+  it('switch selection', async () => {
+    const wrapper = mount(OptionsSelectorComponent, {
+      props: {
+        title: 'Test:',
+        labels: ['Option 1', 'Option 2'],
+        defaultSelected: 0
+      }
+    })
+
+    expect(
+      wrapper
+        .findAllComponents(OptionComponent)
+        .find((e) => e.text() === 'Option 1')
+        ?.classes()
+    ).toContain('!bg-accent')
+    expect(
+      wrapper
+        .findAllComponents(OptionComponent)
+        .find((e) => e.text() === 'Option 2')
+        ?.classes()
+    ).not.toContain('!bg-accent')
+
+    await wrapper.findAllComponents({ name: 'OptionComponent' })[1].trigger('click')
+
+    expect(wrapper.emitted('selectionChanged')).toBeTruthy()
+    expect(wrapper.emitted('selectionChanged')?.length).toBe(1)
+    expect(wrapper.emitted('selectionChanged')?.[0]).toEqual([1])
+
+    expect(
+      wrapper
+        .findAllComponents(OptionComponent)
+        .find((e) => e.text() === 'Option 1')
+        ?.classes()
+    ).not.toContain('!bg-accent')
+    expect(
+      wrapper
+        .findAll('.cursor-pointer')
+        .find((e) => e.text() === 'Option 2')
+        ?.classes()
+    ).toContain('!bg-accent')
+  })
+})

From 83033b0c4f40b65b7c6be8e522953313c1411898 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sun, 10 Sep 2023 14:45:44 +0200
Subject: [PATCH 13/16] remove unused import

---
 .../unit/components/optionsSelectors/MetricSelector.test.ts      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/report-viewer/tests/unit/components/optionsSelectors/MetricSelector.test.ts b/report-viewer/tests/unit/components/optionsSelectors/MetricSelector.test.ts
index 18970b3b2..304100bf1 100644
--- a/report-viewer/tests/unit/components/optionsSelectors/MetricSelector.test.ts
+++ b/report-viewer/tests/unit/components/optionsSelectors/MetricSelector.test.ts
@@ -1,7 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
 import MetricSelector from '@/components/optionsSelectors/MetricSelector.vue'
-import OptionComponent from '@/components/optionsSelectors/OptionComponent.vue'
 import { MetricType } from '@/model/MetricType'
 
 describe('OptionSelectorComponent', () => {

From c451e87cb88bc08483787aa866e04665e3726149 Mon Sep 17 00:00:00 2001
From: Alexander Vogt <alexander_vogt@outlook.de>
Date: Thu, 14 Sep 2023 13:54:53 +0200
Subject: [PATCH 14/16] delay showing tooltip

---
 report-viewer/src/components/ToolTipComponent.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/report-viewer/src/components/ToolTipComponent.vue b/report-viewer/src/components/ToolTipComponent.vue
index 345fd7db7..7bf83910e 100644
--- a/report-viewer/src/components/ToolTipComponent.vue
+++ b/report-viewer/src/components/ToolTipComponent.vue
@@ -2,7 +2,7 @@
   <div class="group relative inline-block">
     <slot></slot>
     <div
-      class="absolute z-10 hidden rounded-md px-1 text-center text-white group-hover:block"
+      class="delay-visible invisible absolute z-10 rounded-md px-1 text-center text-white group-hover:visible"
       :style="tooltipPosition"
     >
       <slot name="tooltip"></slot>
@@ -71,3 +71,13 @@ const arrowStyle = computed(() => {
   return style
 })
 </script>
+
+<style scoped>
+.delay-visible {
+  transition-delay: 0s;
+}
+
+*:hover > .delay-visible {
+  transition-delay: 0.25s;
+}
+</style>

From 52fd4b76443353300bed18d1087bfdd8030ea1b5 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Thu, 14 Sep 2023 17:03:34 +0200
Subject: [PATCH 15/16] default option for metric selector

---
 report-viewer/src/components/ToolTipComponent.vue          | 2 +-
 .../src/components/optionsSelectors/MetricSelector.vue     | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/report-viewer/src/components/ToolTipComponent.vue b/report-viewer/src/components/ToolTipComponent.vue
index 7bf83910e..57aeda733 100644
--- a/report-viewer/src/components/ToolTipComponent.vue
+++ b/report-viewer/src/components/ToolTipComponent.vue
@@ -78,6 +78,6 @@ const arrowStyle = computed(() => {
 }
 
 *:hover > .delay-visible {
-  transition-delay: 0.25s;
+  transition-delay: 0.2s;
 }
 </style>
diff --git a/report-viewer/src/components/optionsSelectors/MetricSelector.vue b/report-viewer/src/components/optionsSelectors/MetricSelector.vue
index 0ff0d9735..345d4ed68 100644
--- a/report-viewer/src/components/optionsSelectors/MetricSelector.vue
+++ b/report-viewer/src/components/optionsSelectors/MetricSelector.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type Ref } from 'vue'
+import { computed, type PropType, type Ref } from 'vue'
 import OptionsSelectorComponent from './OptionsSelectorComponent.vue'
 import { MetricType, metricToolTips } from '@/model/MetricType'
 
@@ -21,6 +21,11 @@ const props = defineProps({
     type: String,
     required: false,
     default: ''
+  },
+  defaultSelection: {
+    type: String as PropType<MetricType>,
+    required: false,
+    default: MetricType.AVERAGE
   }
 })
 

From abbcdfb9a01aaa22969e93f0512845c063a53b12 Mon Sep 17 00:00:00 2001
From: Alexander Vogt <alexander_vogt@outlook.de>
Date: Fri, 15 Sep 2023 10:29:38 +0200
Subject: [PATCH 16/16] change delay to tailwind classes

---
 report-viewer/src/components/ToolTipComponent.vue | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/report-viewer/src/components/ToolTipComponent.vue b/report-viewer/src/components/ToolTipComponent.vue
index 57aeda733..48212c0f5 100644
--- a/report-viewer/src/components/ToolTipComponent.vue
+++ b/report-viewer/src/components/ToolTipComponent.vue
@@ -2,7 +2,7 @@
   <div class="group relative inline-block">
     <slot></slot>
     <div
-      class="delay-visible invisible absolute z-10 rounded-md px-1 text-center text-white group-hover:visible"
+      class="invisible absolute z-10 rounded-md px-1 text-center text-white delay-0 group-hover:visible group-hover:delay-200"
       :style="tooltipPosition"
     >
       <slot name="tooltip"></slot>
@@ -71,13 +71,3 @@ const arrowStyle = computed(() => {
   return style
 })
 </script>
-
-<style scoped>
-.delay-visible {
-  transition-delay: 0s;
-}
-
-*:hover > .delay-visible {
-  transition-delay: 0.2s;
-}
-</style>