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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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 5e6e60d2d8b86fe112c0b9f5b3c533720f55e436 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sat, 2 Sep 2023 15:49:07 +0200
Subject: [PATCH 07/31] update file handling

---
 report-viewer/src/stores/state.ts             |   1 -
 report-viewer/src/stores/store.ts             |   8 +-
 .../src/utils/fileHandling/FileHandler.ts     |  10 +
 .../src/utils/fileHandling/JsonFileHandler.ts |  24 +++
 .../src/utils/fileHandling/ZipFileHandler.ts  | 106 +++++++++++
 report-viewer/src/views/FileUploadView.vue    | 172 +++---------------
 6 files changed, 174 insertions(+), 147 deletions(-)
 create mode 100644 report-viewer/src/utils/fileHandling/FileHandler.ts
 create mode 100644 report-viewer/src/utils/fileHandling/JsonFileHandler.ts
 create mode 100644 report-viewer/src/utils/fileHandling/ZipFileHandler.ts

diff --git a/report-viewer/src/stores/state.ts b/report-viewer/src/stores/state.ts
index 3aefba738..38bdcd685 100644
--- a/report-viewer/src/stores/state.ts
+++ b/report-viewer/src/stores/state.ts
@@ -59,7 +59,6 @@ export interface LoadConfiguration {
   local: boolean
   zip: boolean
   single: boolean
-  fileString: string
 }
 
 export interface UIState {
diff --git a/report-viewer/src/stores/store.ts b/report-viewer/src/stores/store.ts
index d6df2b4c2..dc4190379 100644
--- a/report-viewer/src/stores/store.ts
+++ b/report-viewer/src/stores/store.ts
@@ -153,7 +153,13 @@ const store = defineStore('store', {
       this.state.localModeUsed = payload.local
       this.state.zipModeUsed = payload.zip
       this.state.singleModeUsed = payload.single
-      this.state.singleFillRawContent = payload.fileString
+    },
+    /**
+     * Sets the raw content of the single file mode
+     * @param payload Raw content of the single file mode
+     */
+    setSingleFileRawContent(payload: string) {
+      this.state.singleFillRawContent = payload
     },
     /**
      * Switches whether darkMode is being used for the UI
diff --git a/report-viewer/src/utils/fileHandling/FileHandler.ts b/report-viewer/src/utils/fileHandling/FileHandler.ts
new file mode 100644
index 000000000..bd55ed100
--- /dev/null
+++ b/report-viewer/src/utils/fileHandling/FileHandler.ts
@@ -0,0 +1,10 @@
+/**
+ * Abstract base class for handling files.
+ */
+export abstract class FileHandler {
+  /**
+   * Loads the content of the given file and stores it in the store.
+   * @param file File to handle
+   */
+  public abstract handleFile(file: Blob): Promise<any>
+}
diff --git a/report-viewer/src/utils/fileHandling/JsonFileHandler.ts b/report-viewer/src/utils/fileHandling/JsonFileHandler.ts
new file mode 100644
index 000000000..a7fe0965f
--- /dev/null
+++ b/report-viewer/src/utils/fileHandling/JsonFileHandler.ts
@@ -0,0 +1,24 @@
+import { store } from '@/stores/store'
+import { FileHandler } from './FileHandler'
+
+/**
+ * Class for handling single json files.
+ */
+export class JsonFileHandler extends FileHandler {
+  public async handleFile(
+    file: Blob
+  ): Promise<{ fileType: 'overview' } | { fileType: 'comparison'; id1: string; id2: string }> {
+    const content = await file.text()
+    console.log(content)
+    const json = JSON.parse(content)
+
+    store().setSingleFileRawContent(content)
+    if (json['submission_folder_path']) {
+      return { fileType: 'overview' }
+    } else if (json['id1'] && json['id2']) {
+      return { fileType: 'comparison', id1: json['id1'], id2: json['id2'] }
+    } else {
+      throw new Error(`Invalid JSON: ${json}`)
+    }
+  }
+}
diff --git a/report-viewer/src/utils/fileHandling/ZipFileHandler.ts b/report-viewer/src/utils/fileHandling/ZipFileHandler.ts
new file mode 100644
index 000000000..38efa840d
--- /dev/null
+++ b/report-viewer/src/utils/fileHandling/ZipFileHandler.ts
@@ -0,0 +1,106 @@
+import { store } from '@/stores/store'
+import jszip from 'jszip'
+import slash from 'slash'
+import { FileHandler } from './FileHandler'
+
+/**
+ * Class for handling zip files.
+ */
+export class ZipFileHandler extends FileHandler {
+  public async handleFile(file: Blob): Promise<void> {
+    console.log('Start handling zip file and storing necessary data...')
+    return jszip.loadAsync(file).then(async (zip) => {
+      for (const originalFileName of Object.keys(zip.files)) {
+        const unixFileName = slash(originalFileName)
+        if (
+          /((.+\/)*)(files|submissions)\/(.+)\/(.+)/.test(unixFileName) &&
+          !/^__MACOSX\//.test(unixFileName)
+        ) {
+          const directoryPath = unixFileName.substring(0, unixFileName.lastIndexOf('/'))
+          const fileBase = unixFileName.substring(unixFileName.lastIndexOf('/') + 1)
+
+          const submissionFileName = this.extractSubmissionFileName(directoryPath)
+          const fullPathFileName = this.extractFileNameWithFullPath(
+            directoryPath,
+            fileBase,
+            originalFileName
+          )
+          await zip.files[originalFileName].async('string').then((data) => {
+            store().saveSubmissionFile({
+              name: slash(submissionFileName),
+              file: { fileName: slash(fullPathFileName), data: data }
+            })
+          })
+        } else {
+          await zip.files[originalFileName].async('string').then((data) => {
+            store().saveFile({ fileName: unixFileName, data: data })
+          })
+        }
+      }
+    })
+  }
+
+  /**
+   * Extracts the submission file name from the given directory path.
+   * @param directoryPath Path to extract the submission file name from.
+   */
+  private extractSubmissionFileName(directoryPath: string) {
+    const folders = directoryPath.split('/')
+    const rootName = folders[0]
+    let submissionFolderIndex = -1
+    if (rootName === 'files') {
+      submissionFolderIndex = folders.findIndex((folder) => folder === 'files')
+    } else {
+      submissionFolderIndex = folders.findIndex((folder) => folder === 'submissions')
+    }
+    return folders[submissionFolderIndex + 1]
+  }
+
+  /**
+   * Gets the full path of the file
+   * @param directoryPath Path to the file
+   * @param fileBase Name of the file
+   * @param originalFileName Original name of the file
+   */
+  private extractFileNameWithFullPath(
+    directoryPath: string,
+    fileBase: string,
+    originalFileName: string
+  ) {
+    let fullPath = ''
+    const rootName = this.extractRootName(directoryPath)
+    const filesOrSubmissionsIndex_filePath = directoryPath.indexOf(
+      rootName === 'files' ? 'files' : 'submissions'
+    )
+    const filesOrSubmissionsIndex_originalFileName = originalFileName.indexOf(
+      rootName === 'files' ? 'files' : 'submissions'
+    )
+    const unixSubfolderPathAfterSubmissions = directoryPath.substring(
+      filesOrSubmissionsIndex_filePath +
+        (rootName === 'files' ? 'files'.length : 'submissions'.length) +
+        1
+    )
+    const originalPathWithoutSubmissions = originalFileName.substring(
+      filesOrSubmissionsIndex_originalFileName +
+        (rootName === 'files' ? 'files'.length : 'submissions'.length)
+    )
+    if (originalPathWithoutSubmissions.charAt(0) === '\\') {
+      fullPath = unixSubfolderPathAfterSubmissions + '\\' + fileBase
+      while (fullPath.includes('/')) {
+        fullPath = fullPath.replace('/', '\\')
+      }
+    } else {
+      fullPath = unixSubfolderPathAfterSubmissions + '/' + fileBase
+    }
+    return fullPath
+  }
+
+  /**
+   * Gets the root name of the given directory path.
+   * @param directoryPath Path to extract the root name from.
+   */
+  private extractRootName(directoryPath: string) {
+    const folders = directoryPath.split('/')
+    return folders[0]
+  }
+}
diff --git a/report-viewer/src/views/FileUploadView.vue b/report-viewer/src/views/FileUploadView.vue
index be693d572..51e6a0d8e 100644
--- a/report-viewer/src/views/FileUploadView.vue
+++ b/report-viewer/src/views/FileUploadView.vue
@@ -50,14 +50,12 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
-import jszip from 'jszip'
 import { router } from '@/router'
 import { store } from '@/stores/store'
-import slash from 'slash'
 import Button from '@/components/ButtonComponent.vue'
 import VersionInfoComponent from '@/components/VersionInfoComponent.vue'
-
-class LoadError extends Error {}
+import { JsonFileHandler } from '@/utils/fileHandling/JsonFileHandler'
+import { ZipFileHandler } from '@/utils/fileHandling/ZipFileHandler'
 
 store().clearStore()
 const hasLocalFile = ref(false)
@@ -102,138 +100,21 @@ function navigateToComparisonView(firstId: string, secondId: string) {
   })
 }
 
-/**
- * Gets the root name of the given directory path.
- * @param directoryPath Path to extract the root name from.
- */
-function extractRootName(directoryPath: string) {
-  const folders = directoryPath.split('/')
-  return folders[0]
-}
-
-/**
- * Extracts the submission file name from the given directory path.
- * @param directoryPath Path to extract the submission file name from.
- */
-function extractSubmissionFileName(directoryPath: string) {
-  const folders = directoryPath.split('/')
-  const rootName = folders[0]
-  let submissionFolderIndex = -1
-  if (rootName === 'files') {
-    submissionFolderIndex = folders.findIndex((folder) => folder === 'files')
-  } else {
-    submissionFolderIndex = folders.findIndex((folder) => folder === 'submissions')
-  }
-  return folders[submissionFolderIndex + 1]
-}
-
-/**
- * Gets the full path of the file
- * @param directoryPath Path to the file
- * @param fileBase Name of the file
- * @param originalFileName Original name of the file
- */
-function extractFileNameWithFullPath(
-  directoryPath: string,
-  fileBase: string,
-  originalFileName: string
-) {
-  let fullPath = ''
-  const rootName = extractRootName(directoryPath)
-  const filesOrSubmissionsIndex_filePath = directoryPath.indexOf(
-    rootName === 'files' ? 'files' : 'submissions'
-  )
-  const filesOrSubmissionsIndex_originalFileName = originalFileName.indexOf(
-    rootName === 'files' ? 'files' : 'submissions'
-  )
-  const unixSubfolderPathAfterSubmissions = directoryPath.substring(
-    filesOrSubmissionsIndex_filePath +
-      (rootName === 'files' ? 'files'.length : 'submissions'.length) +
-      1
-  )
-  const originalPathWithoutSubmissions = originalFileName.substring(
-    filesOrSubmissionsIndex_originalFileName +
-      (rootName === 'files' ? 'files'.length : 'submissions'.length)
-  )
-  if (originalPathWithoutSubmissions.charAt(0) === '\\') {
-    fullPath = unixSubfolderPathAfterSubmissions + '\\' + fileBase
-    while (fullPath.includes('/')) {
-      fullPath = fullPath.replace('/', '\\')
-    }
-  } else {
-    fullPath = unixSubfolderPathAfterSubmissions + '/' + fileBase
-  }
-  return fullPath
-}
-
-/**
- * Handles zip file on drop. It extracts the zip and saves each file in the store.
- * @param file Zip file to handle
- */
-async function handleZipFile(file: Blob) {
-  console.log('Start handling zip file and storing necessary data...')
-  return jszip.loadAsync(file).then(async (zip) => {
-    for (const originalFileName of Object.keys(zip.files)) {
-      const unixFileName = slash(originalFileName)
-      if (
-        /((.+\/)*)(files|submissions)\/(.+)\/(.+)/.test(unixFileName) &&
-        !/^__MACOSX\//.test(unixFileName)
-      ) {
-        const directoryPath = unixFileName.substring(0, unixFileName.lastIndexOf('/'))
-        const fileBase = unixFileName.substring(unixFileName.lastIndexOf('/') + 1)
-
-        const submissionFileName = extractSubmissionFileName(directoryPath)
-        const fullPathFileName = extractFileNameWithFullPath(
-          directoryPath,
-          fileBase,
-          originalFileName
-        )
-        await zip.files[originalFileName].async('string').then((data) => {
-          store().saveSubmissionFile({
-            name: slash(submissionFileName),
-            file: { fileName: slash(fullPathFileName), data: data }
-          })
-        })
-      } else {
-        await zip.files[originalFileName].async('string').then((data) => {
-          store().saveFile({ fileName: unixFileName, data: data })
-        })
-      }
-    }
-    store().setLoadingType({
-      local: false,
-      zip: true,
-      single: false,
-      fileString: ''
-    })
-    navigateToOverview()
-  })
-}
-
 /**
  * Handles a json file on drop. It read the file and passes the file string to next window.
- * @param str Content of the json file
+ * @param file The json file to handle
  */
-function handleJsonFile(str: string) {
-  let json = JSON.parse(str)
-  if (json['submission_folder_path']) {
-    store().setLoadingType({
-      local: false,
-      zip: false,
-      single: true,
-      fileString: str
-    })
+async function handleJsonFile(file: Blob) {
+  store().setLoadingType({
+    local: false,
+    zip: false,
+    single: true
+  })
+  const fileContentType = await new JsonFileHandler().handleFile(file)
+  if (fileContentType.fileType === 'overview') {
     navigateToOverview()
-  } else if (json['id1'] && json['id2']) {
-    store().setLoadingType({
-      local: false,
-      zip: false,
-      single: true,
-      fileString: str
-    })
-    navigateToComparisonView(json['id1'], json['id2'])
-  } else {
-    throw new LoadError(`Invalid JSON: ${json}`)
+  } else if (fileContentType.fileType === 'comparison') {
+    navigateToComparisonView(fileContentType.id1, fileContentType.id2)
   }
 }
 
@@ -248,11 +129,17 @@ async function handleFile(file: Blob) {
     case 'application/zip-compressed':
     case 'application/x-zip-compressed':
     case 'application/x-zip':
-      return handleZipFile(file)
+      store().setLoadingType({
+        local: false,
+        zip: true,
+        single: false
+      })
+      await new ZipFileHandler().handleFile(file)
+      return navigateToOverview()
     case 'application/json':
-      return file.text().then(handleJsonFile)
+      return await handleJsonFile(file)
     default:
-      throw new LoadError(`Unknown MIME type '${file.type}'`)
+      throw new Error(`Unknown MIME type '${file.type}'`)
   }
 }
 
@@ -266,15 +153,11 @@ async function uploadFileOnDrag(e: DragEvent) {
     if (dropped?.length === 1) {
       await handleFile(dropped[0])
     } else {
-      throw new LoadError('Not exactly one file')
+      throw new Error('Not exactly one file')
     }
   } catch (e) {
-    if (e instanceof LoadError) {
-      console.warn(e)
-      alert(e.message)
-    } else {
-      throw e
-    }
+    alert((e as Error).message)
+    throw e
   }
 }
 
@@ -304,7 +187,7 @@ async function loadQueryFile(url: URL) {
   try {
     const response = await fetch(url)
     if (!response.ok) {
-      throw new LoadError('Response not OK')
+      throw new Error('Response not OK')
     }
     await handleFile(await response.blob())
   } catch (e) {
@@ -320,8 +203,7 @@ function continueWithLocal() {
   store().setLoadingType({
     local: true,
     zip: false,
-    single: false,
-    fileString: ''
+    single: false
   })
   navigateToOverview()
 }

From c7575677fe866b40fab2b5cfe6543a06eb12c4d4 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sat, 2 Sep 2023 17:33:51 +0200
Subject: [PATCH 08/31] local zip loading

---
 report-viewer/src/App.vue                     |  5 ++-
 .../src/model/factories/BaseFactory.ts        | 41 +++++++++++--------
 .../src/model/factories/ComparisonFactory.ts  | 22 +++++-----
 .../src/model/factories/OverviewFactory.ts    |  4 +-
 .../src/utils/fileHandling/JsonFileHandler.ts |  1 -
 report-viewer/src/views/ClusterView.vue       |  2 +-
 report-viewer/src/views/ComparisonView.vue    |  8 ++--
 report-viewer/src/views/FileUploadView.vue    | 23 ++++++++---
 report-viewer/src/views/InformationView.vue   |  2 +-
 report-viewer/src/views/OverviewView.vue      |  2 +-
 10 files changed, 67 insertions(+), 43 deletions(-)

diff --git a/report-viewer/src/App.vue b/report-viewer/src/App.vue
index 475091218..988799c65 100644
--- a/report-viewer/src/App.vue
+++ b/report-viewer/src/App.vue
@@ -3,7 +3,10 @@
     <div
       class="max-w-screen max-h-fit min-h-screen bg-backgorund-light text-black dark:bg-backgorund-dark dark:text-amber-50"
     >
-      <RouterView class="max-h-screen overflow-hidden" />
+      <Suspense>
+        <RouterView class="max-h-screen overflow-hidden" />
+      </Suspense>
+
       <Button
         class="absolute bottom-2 right-2 flex h-12 w-12 items-center justify-center text-center"
         @click="store().changeUseDarkMode()"
diff --git a/report-viewer/src/model/factories/BaseFactory.ts b/report-viewer/src/model/factories/BaseFactory.ts
index 078a022da..4dc31d8a0 100644
--- a/report-viewer/src/model/factories/BaseFactory.ts
+++ b/report-viewer/src/model/factories/BaseFactory.ts
@@ -1,4 +1,5 @@
 import { store } from '@/stores/store'
+import { ZipFileHandler } from '@/utils/fileHandling/ZipFileHandler'
 
 /**
  * This class provides some basic functionality for the factories.
@@ -10,39 +11,45 @@ export class BaseFactory {
    * @return Content of the file
    * @throws Error if the file could not be found
    */
-  protected static getFile(path: string): string {
+  protected static async getFile(path: string): Promise<string> {
     if (store().state.localModeUsed) {
-      return this.getLocalFile(path)
-    } else if (store().state.zipModeUsed) {
-      const index = Object.keys(store().state.files).find((name) => name.endsWith(path))
-      if (index == undefined) {
-        throw new Error(`Could not find ${path} in zip file.`)
-      }
-      const file = store().state.files[index]
-      if (file == undefined) {
-        throw new Error(`Could not load ${path}.`)
+      if (store().state.zipModeUsed) {
+        await new ZipFileHandler().handleFile(await this.getLocalFile('results.zip'))
+        return this.getFileFromStore(path)
+      } else {
+        return await (await this.getLocalFile(`/files/${path}`)).text()
       }
-      return file
+    } else if (store().state.zipModeUsed) {
+      return this.getFileFromStore(path)
     } else if (store().state.singleModeUsed) {
       return store().state.singleFillRawContent
     }
-
     throw new Error('No loading type specified')
   }
 
+  private static getFileFromStore(path: string): string {
+    const index = Object.keys(store().state.files).find((name) => name.endsWith(path))
+    if (index == undefined) {
+      throw new Error(`Could not find ${path} in zip file.`)
+    }
+    const file = store().state.files[index]
+    if (file == undefined) {
+      throw new Error(`Could not load ${path}.`)
+    }
+    return file
+  }
+
   /**
    * Returns the content of a file from the local files.
    * @param path - Path to the file
    * @return Content of the file
    * @throws Error if the file could not be found
    */
-  protected static getLocalFile(path: string): string {
-    const request = new XMLHttpRequest()
-    request.open('GET', `/files/${path}`, false)
-    request.send()
+  protected static async getLocalFile(path: string): Promise<Blob> {
+    const request = await fetch(path)
 
     if (request.status == 200) {
-      return request.response
+      return request.blob()
     } else {
       throw new Error(`Could not find ${path} in local files.`)
     }
diff --git a/report-viewer/src/model/factories/ComparisonFactory.ts b/report-viewer/src/model/factories/ComparisonFactory.ts
index e558f791a..33a045031 100644
--- a/report-viewer/src/model/factories/ComparisonFactory.ts
+++ b/report-viewer/src/model/factories/ComparisonFactory.ts
@@ -11,13 +11,13 @@ import { MetricType } from '../MetricType'
  * Factory class for creating Comparison objects
  */
 export class ComparisonFactory extends BaseFactory {
-  public static getComparison(id1: string, id2: string) {
+  public static async getComparison(id1: string, id2: string): Promise<Comparison> {
     const filePath = store().getComparisonFileName(id1, id2)
     if (!filePath) {
       throw new Error('Comparison file not specified')
     }
 
-    return this.extractComparison(JSON.parse(this.getFile(filePath)))
+    return this.extractComparison(JSON.parse(await this.getFile(filePath)))
   }
 
   /**
@@ -27,9 +27,9 @@ export class ComparisonFactory extends BaseFactory {
   private static extractComparison(json: Record<string, unknown>): Comparison {
     const firstSubmissionId = json.id1 as string
     const secondSubmissionId = json.id2 as string
-    if (store().state.localModeUsed) {
+    if (store().state.localModeUsed && !store().state.zipModeUsed) {
       this.loadSubmissionFilesFromLocal(firstSubmissionId)
-      this.loadSubmissionFilesFromLocal(json.id2 as string)
+      this.loadSubmissionFilesFromLocal(secondSubmissionId)
     }
     const filesOfFirstSubmission = store().filesOfSubmission(firstSubmissionId)
     const filesOfSecondSubmission = store().filesOfSubmission(secondSubmissionId)
@@ -103,21 +103,21 @@ export class ComparisonFactory extends BaseFactory {
     return map
   }
 
-  private static getSubmissionFileListFromLocal(submissionId: string): string[] {
-    return JSON.parse(this.getLocalFile(`submissionFileIndex.json`)).submission_file_indexes[
-      submissionId
-    ].map((file: string) => slash(file))
+  private static async getSubmissionFileListFromLocal(submissionId: string): Promise<string[]> {
+    return JSON.parse(
+      await this.getLocalFile(`submissionFileIndex.json`).then((file) => file.text())
+    ).submission_file_indexes[submissionId].map((file: string) => slash(file))
   }
 
-  private static loadSubmissionFilesFromLocal(submissionId: string) {
+  private static async loadSubmissionFilesFromLocal(submissionId: string) {
     try {
-      const fileList = this.getSubmissionFileListFromLocal(submissionId)
+      const fileList = await this.getSubmissionFileListFromLocal(submissionId)
       for (const filePath of fileList) {
         store().saveSubmissionFile({
           name: submissionId,
           file: {
             fileName: slash(filePath),
-            data: this.getLocalFile(`files/${filePath}`)
+            data: await this.getLocalFile(`files/${filePath}`).then((file) => file.text())
           }
         })
       }
diff --git a/report-viewer/src/model/factories/OverviewFactory.ts b/report-viewer/src/model/factories/OverviewFactory.ts
index 3504f4bf5..66991846c 100644
--- a/report-viewer/src/model/factories/OverviewFactory.ts
+++ b/report-viewer/src/model/factories/OverviewFactory.ts
@@ -22,8 +22,8 @@ export class OverviewFactory extends BaseFactory {
   /**
    * Gets the overview file based on the used mode (zip, local, single).
    */
-  public static getOverview(): Overview {
-    return this.extractOverview(JSON.parse(this.getFile('overview.json')))
+  public static async getOverview(): Promise<Overview> {
+    return this.extractOverview(JSON.parse(await this.getFile('overview.json')))
   }
 
   /**
diff --git a/report-viewer/src/utils/fileHandling/JsonFileHandler.ts b/report-viewer/src/utils/fileHandling/JsonFileHandler.ts
index a7fe0965f..1d3dce180 100644
--- a/report-viewer/src/utils/fileHandling/JsonFileHandler.ts
+++ b/report-viewer/src/utils/fileHandling/JsonFileHandler.ts
@@ -9,7 +9,6 @@ export class JsonFileHandler extends FileHandler {
     file: Blob
   ): Promise<{ fileType: 'overview' } | { fileType: 'comparison'; id1: string; id2: string }> {
     const content = await file.text()
-    console.log(content)
     const json = JSON.parse(content)
 
     store().setSingleFileRawContent(content)
diff --git a/report-viewer/src/views/ClusterView.vue b/report-viewer/src/views/ClusterView.vue
index 82782c485..d8e254631 100644
--- a/report-viewer/src/views/ClusterView.vue
+++ b/report-viewer/src/views/ClusterView.vue
@@ -40,7 +40,7 @@ const props = defineProps({
   }
 })
 
-const overview = OverviewFactory.getOverview()
+const overview = await OverviewFactory.getOverview()
 const cluster = overview.clusters[props.clusterIndex]
 const comparisons = [] as Array<ComparisonListElement>
 const clusterMemberList = new Map() as ClusterListElementMember
diff --git a/report-viewer/src/views/ComparisonView.vue b/report-viewer/src/views/ComparisonView.vue
index 79ad95016..52923abbf 100644
--- a/report-viewer/src/views/ComparisonView.vue
+++ b/report-viewer/src/views/ComparisonView.vue
@@ -90,10 +90,12 @@ const props = defineProps({
   }
 })
 
-const comparison = computed(() => ComparisonFactory.getComparison(props.firstId, props.secondId))
+// This eslint rule is disabled to allow the use of await in the setup function. Disabling this rule is safe, because the props are gathered from the url, so changing them would reload the pafe anyway.
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+const comparison = await ComparisonFactory.getComparison(props.firstId, props.secondId)
 
-const filesOfFirst = ref(comparison.value.filesOfFirstSubmission)
-const filesOfSecond = ref(comparison.value.filesOfSecondSubmission)
+const filesOfFirst = ref(comparison.filesOfFirstSubmission)
+const filesOfSecond = ref(comparison.filesOfSecondSubmission)
 
 /**
  * Collapses a file in the first files container.
diff --git a/report-viewer/src/views/FileUploadView.vue b/report-viewer/src/views/FileUploadView.vue
index 51e6a0d8e..2594cc107 100644
--- a/report-viewer/src/views/FileUploadView.vue
+++ b/report-viewer/src/views/FileUploadView.vue
@@ -32,7 +32,7 @@
           <div>Or click here to select a file</div>
         </div>
         <div>(No files will be uploaded)</div>
-        <Button class="mx-auto mt-8 w-fit" @click="continueWithLocal" v-if="hasLocalFile">
+        <Button class="mx-auto mt-8 w-fit" @click="continueWithLocal" v-if="localFiles !== 'none'">
           Continue with local files
         </Button>
       </div>
@@ -48,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, type Ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { router } from '@/router'
 import { store } from '@/stores/store'
@@ -58,9 +58,22 @@ import { JsonFileHandler } from '@/utils/fileHandling/JsonFileHandler'
 import { ZipFileHandler } from '@/utils/fileHandling/ZipFileHandler'
 
 store().clearStore()
-const hasLocalFile = ref(false)
+const localFiles: Ref<'json' | 'zip' | 'none'> = ref('none')
 // Checks whether local files exist
-fetch('/files/overview.json').then((response) => (hasLocalFile.value = response.status == 200))
+fetch('/files/overview.json')
+  .then((response) => {
+    if (response.status == 200) {
+      localFiles.value = 'json'
+    }
+  })
+  .catch(() => {})
+fetch('/results.zip')
+  .then((response) => {
+    if (response.status == 200) {
+      localFiles.value = 'zip'
+    }
+  })
+  .catch(() => {})
 
 const loadingFiles = ref(false)
 
@@ -202,7 +215,7 @@ async function loadQueryFile(url: URL) {
 function continueWithLocal() {
   store().setLoadingType({
     local: true,
-    zip: false,
+    zip: localFiles.value === 'zip',
     single: false
   })
   navigateToOverview()
diff --git a/report-viewer/src/views/InformationView.vue b/report-viewer/src/views/InformationView.vue
index 2bc5f2188..a31a4fc38 100644
--- a/report-viewer/src/views/InformationView.vue
+++ b/report-viewer/src/views/InformationView.vue
@@ -54,7 +54,7 @@ import TextInformation from '@/components/TextInformation.vue'
 import ScrollableComponent from '@/components/ScrollableComponent.vue'
 import { store } from '@/stores/store'
 
-const overview = OverviewFactory.getOverview()
+const overview = await OverviewFactory.getOverview()
 
 const totalComparisons = overview.totalComparisons
 const shownComparisons = overview.topComparisons.length
diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue
index 9bd976329..a1ba316db 100644
--- a/report-viewer/src/views/OverviewView.vue
+++ b/report-viewer/src/views/OverviewView.vue
@@ -92,7 +92,7 @@ import TextInformation from '@/components/TextInformation.vue'
 import type { ComparisonListElement } from '@/model/ComparisonListElement'
 import OptionsSelector from '@/components/OptionsSelectorComponent.vue'
 
-const overview = OverviewFactory.getOverview()
+const overview = await OverviewFactory.getOverview()
 
 const searchString = ref('')
 const comparisonTableSortingMetric = ref(MetricType.AVERAGE)

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 09/31] 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 10/31] 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 11/31] 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 12/31] 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 13/31] 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 14/31] 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 15/31] 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 2a7a129b2e183c4d4053b39ce2d00e9a3fb8d29b Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Mon, 11 Sep 2023 10:22:48 +0200
Subject: [PATCH 16/31] fix url problems

---
 report-viewer/src/model/factories/BaseFactory.ts          | 5 ++++-
 .../tests/unit/model/factories/ComparisonFactory.test.ts  | 8 ++++----
 .../tests/unit/model/factories/OverviewFactory.test.ts    | 8 ++++----
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/report-viewer/src/model/factories/BaseFactory.ts b/report-viewer/src/model/factories/BaseFactory.ts
index 4dc31d8a0..d29dea8a8 100644
--- a/report-viewer/src/model/factories/BaseFactory.ts
+++ b/report-viewer/src/model/factories/BaseFactory.ts
@@ -14,7 +14,9 @@ export class BaseFactory {
   protected static async getFile(path: string): Promise<string> {
     if (store().state.localModeUsed) {
       if (store().state.zipModeUsed) {
-        await new ZipFileHandler().handleFile(await this.getLocalFile('results.zip'))
+        await new ZipFileHandler().handleFile(
+          await this.getLocalFile(window.location.origin + '/results.zip')
+        )
         return this.getFileFromStore(path)
       } else {
         return await (await this.getLocalFile(`/files/${path}`)).text()
@@ -47,6 +49,7 @@ export class BaseFactory {
    */
   protected static async getLocalFile(path: string): Promise<Blob> {
     const request = await fetch(path)
+    console.log(request)
 
     if (request.status == 200) {
       return request.blob()
diff --git a/report-viewer/tests/unit/model/factories/ComparisonFactory.test.ts b/report-viewer/tests/unit/model/factories/ComparisonFactory.test.ts
index d2a835f46..1b0a34aab 100644
--- a/report-viewer/tests/unit/model/factories/ComparisonFactory.test.ts
+++ b/report-viewer/tests/unit/model/factories/ComparisonFactory.test.ts
@@ -38,10 +38,10 @@ describe('Test JSON to Comparison', () => {
     }))
   })
 
-  it('Post 5.0', () => {
+  it('Post 5.0', async () => {
     store.state.files['root1-root2.json'] = JSON.stringify(validNew)
 
-    const result = ComparisonFactory.getComparison('root1', 'root2')
+    const result = await ComparisonFactory.getComparison('root1', 'root2')
 
     expect(result).toBeDefined()
     expect(result.firstSubmissionId).toBe('root1')
@@ -55,10 +55,10 @@ describe('Test JSON to Comparison', () => {
     expect(result.matchesInSecondSubmissions.size).toBe(2)
   })
 
-  it('Pre 5.0', () => {
+  it('Pre 5.0', async () => {
     store.state.files['root1-root2.json'] = JSON.stringify(validOld)
 
-    const result = ComparisonFactory.getComparison('root1', 'root2')
+    const result = await ComparisonFactory.getComparison('root1', 'root2')
 
     expect(result).toBeDefined()
     expect(result.firstSubmissionId).toBe('root1')
diff --git a/report-viewer/tests/unit/model/factories/OverviewFactory.test.ts b/report-viewer/tests/unit/model/factories/OverviewFactory.test.ts
index 8a9f3f164..f2602f3c1 100644
--- a/report-viewer/tests/unit/model/factories/OverviewFactory.test.ts
+++ b/report-viewer/tests/unit/model/factories/OverviewFactory.test.ts
@@ -36,10 +36,10 @@ describe('Test JSON to Overview', () => {
     vi.spyOn(global.window, 'alert').mockImplementation(() => {})
   })
 
-  it('Post 5.0', () => {
+  it('Post 5.0', async () => {
     store.state.files['overview.json'] = JSON.stringify(validNew)
 
-    expect(OverviewFactory.getOverview()).toEqual({
+    expect(await OverviewFactory.getOverview()).toEqual({
       _submissionFolderPath: ['files'],
       _baseCodeFolderPath: '',
       _language: 'Javac based AST plugin',
@@ -134,9 +134,9 @@ describe('Test JSON to Overview', () => {
     })
   })
 
-  it('Pre 5.0', () => {
+  it('Pre 5.0', async () => {
     store.state.files['overview.json'] = JSON.stringify(validOld)
-    expect(OverviewFactory.getOverview()).toEqual({
+    expect(await OverviewFactory.getOverview()).toEqual({
       _submissionFolderPath: ['test'],
       _baseCodeFolderPath: '',
       _language: 'Javac based AST plugin',

From 9b2d083234572ab7658cd432e27471e59c5e9276 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Mon, 11 Sep 2023 11:10:13 +0200
Subject: [PATCH 17/31] fix classic local mode

---
 report-viewer/src/model/factories/BaseFactory.ts       | 8 ++------
 report-viewer/src/model/factories/ComparisonFactory.ts | 4 ++--
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/report-viewer/src/model/factories/BaseFactory.ts b/report-viewer/src/model/factories/BaseFactory.ts
index d29dea8a8..ec7fe0dcd 100644
--- a/report-viewer/src/model/factories/BaseFactory.ts
+++ b/report-viewer/src/model/factories/BaseFactory.ts
@@ -14,9 +14,7 @@ export class BaseFactory {
   protected static async getFile(path: string): Promise<string> {
     if (store().state.localModeUsed) {
       if (store().state.zipModeUsed) {
-        await new ZipFileHandler().handleFile(
-          await this.getLocalFile(window.location.origin + '/results.zip')
-        )
+        await new ZipFileHandler().handleFile(await this.getLocalFile('results.zip'))
         return this.getFileFromStore(path)
       } else {
         return await (await this.getLocalFile(`/files/${path}`)).text()
@@ -48,9 +46,7 @@ export class BaseFactory {
    * @throws Error if the file could not be found
    */
   protected static async getLocalFile(path: string): Promise<Blob> {
-    const request = await fetch(path)
-    console.log(request)
-
+    const request = await fetch(window.location.origin + '/' + path)
     if (request.status == 200) {
       return request.blob()
     } else {
diff --git a/report-viewer/src/model/factories/ComparisonFactory.ts b/report-viewer/src/model/factories/ComparisonFactory.ts
index 15aa886df..355e2c795 100644
--- a/report-viewer/src/model/factories/ComparisonFactory.ts
+++ b/report-viewer/src/model/factories/ComparisonFactory.ts
@@ -82,7 +82,7 @@ export class ComparisonFactory extends BaseFactory {
 
   private static async getSubmissionFileListFromLocal(submissionId: string): Promise<string[]> {
     return JSON.parse(
-      await this.getLocalFile(`submissionFileIndex.json`).then((file) => file.text())
+      await this.getLocalFile(`files/submissionFileIndex.json`).then((file) => file.text())
     ).submission_file_indexes[submissionId].map((file: string) => slash(file))
   }
 
@@ -93,7 +93,7 @@ export class ComparisonFactory extends BaseFactory {
         store().saveSubmissionFile({
           fileName: slash(filePath),
           submissionId: submissionId,
-          data: await this.getLocalFile(`files/${filePath}`).then((file) => file.text())
+          data: await this.getLocalFile(`files/files/${filePath}`).then((file) => file.text())
         })
       }
     } catch (e) {

From c9e08a56d8b1ac9d6f6125cb4001431df68b22b0 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Mon, 11 Sep 2023 11:13:57 +0200
Subject: [PATCH 18/31] revert changes to config file

---
 report-viewer/tsconfig.app.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/report-viewer/tsconfig.app.json b/report-viewer/tsconfig.app.json
index c6a3e841f..342a91072 100644
--- a/report-viewer/tsconfig.app.json
+++ b/report-viewer/tsconfig.app.json
@@ -1,6 +1,6 @@
 {
   "extends": ["@vue/tsconfig/tsconfig.dom.json", "./tsconfig.module.json"],
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.json", "FileHandler.ts"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.json"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,

From 9f66c2b6130bffa84507c380cd20a8d51e3fa3a3 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Mon, 11 Sep 2023 12:02:31 +0200
Subject: [PATCH 19/31] remove wrong file

---
 report-viewer/FileHandler.ts | 10 ----------
 1 file changed, 10 deletions(-)
 delete mode 100644 report-viewer/FileHandler.ts

diff --git a/report-viewer/FileHandler.ts b/report-viewer/FileHandler.ts
deleted file mode 100644
index bd55ed100..000000000
--- a/report-viewer/FileHandler.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Abstract base class for handling files.
- */
-export abstract class FileHandler {
-  /**
-   * Loads the content of the given file and stores it in the store.
-   * @param file File to handle
-   */
-  public abstract handleFile(file: Blob): Promise<any>
-}

From 4488e9a2911c2ef7a50b4aee2e30ae4cfb646b24 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Mon, 11 Sep 2023 12:25:58 +0200
Subject: [PATCH 20/31] fix build error

---
 report-viewer/src/utils/fileHandling/JsonFileHandler.ts | 2 +-
 report-viewer/src/utils/fileHandling/ZipFileHandler.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/report-viewer/src/utils/fileHandling/JsonFileHandler.ts b/report-viewer/src/utils/fileHandling/JsonFileHandler.ts
index 162cf2d97..1d3dce180 100644
--- a/report-viewer/src/utils/fileHandling/JsonFileHandler.ts
+++ b/report-viewer/src/utils/fileHandling/JsonFileHandler.ts
@@ -1,5 +1,5 @@
 import { store } from '@/stores/store'
-import { FileHandler } from '../../../FileHandler'
+import { FileHandler } from './FileHandler'
 
 /**
  * Class for handling single json files.
diff --git a/report-viewer/src/utils/fileHandling/ZipFileHandler.ts b/report-viewer/src/utils/fileHandling/ZipFileHandler.ts
index a746c9816..5702d2bac 100644
--- a/report-viewer/src/utils/fileHandling/ZipFileHandler.ts
+++ b/report-viewer/src/utils/fileHandling/ZipFileHandler.ts
@@ -1,7 +1,7 @@
 import { store } from '@/stores/store'
 import jszip from 'jszip'
 import slash from 'slash'
-import { FileHandler } from '../../../FileHandler'
+import { FileHandler } from './FileHandler'
 
 /**
  * Class for handling zip files.

From cfdf579c25e0dfdeb7e519908f96bbc24a1e905a Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 13 Sep 2023 14:29:27 +0200
Subject: [PATCH 21/31] Dependency(deps): Bump crazy-max/ghaction-import-gpg
 from 5 to 6 (#1300)

Bumps [crazy-max/ghaction-import-gpg](https://github.com/crazy-max/ghaction-import-gpg) from 5 to 6.
- [Release notes](https://github.com/crazy-max/ghaction-import-gpg/releases)
- [Commits](https://github.com/crazy-max/ghaction-import-gpg/compare/v5...v6)

---
updated-dependencies:
- dependency-name: crazy-max/ghaction-import-gpg
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 .github/workflows/publish.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index d08c4186e..7f21a6818 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -17,7 +17,7 @@ jobs:
         with:
           servers: '[{ "id": "ossrh", "username": "jplag", "password": "${{ secrets.OSSRH_TOKEN }}" }]'
       - name: Import GPG key
-        uses: crazy-max/ghaction-import-gpg@v5
+        uses: crazy-max/ghaction-import-gpg@v6
         with:
           gpg_private_key: ${{ secrets.PGP_SECRET }}
           passphrase: ${{ secrets.PGP_PW }}

From b62d897e9a39999fd03d501976e006135c526b33 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 13 Sep 2023 14:29:55 +0200
Subject: [PATCH 22/31] Dependency(deps): Bump org.scalameta:scalameta_2.13
 from 4.8.9 to 4.8.10 (#1299)

Bumps [org.scalameta:scalameta_2.13](https://github.com/scalameta/scalameta) from 4.8.9 to 4.8.10.
- [Release notes](https://github.com/scalameta/scalameta/releases)
- [Commits](https://github.com/scalameta/scalameta/compare/v4.8.9...v4.8.10)

---
updated-dependencies:
- dependency-name: org.scalameta:scalameta_2.13
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 languages/scala/pom.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/languages/scala/pom.xml b/languages/scala/pom.xml
index 67138fb22..fdc536ba0 100644
--- a/languages/scala/pom.xml
+++ b/languages/scala/pom.xml
@@ -25,7 +25,7 @@
         <dependency>
             <groupId>org.scalameta</groupId>
             <artifactId>scalameta_${scala.compat.version}</artifactId>
-            <version>4.8.9</version>
+            <version>4.8.10</version>
         </dependency>
     </dependencies>
 

From d33db09d14aa9e9c3abb1f801612f539839c2d6a Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 13 Sep 2023 14:30:01 +0200
Subject: [PATCH 23/31] Dependency(deps): Bump org.scala-lang:scala-library
 from 2.13.11 to 2.13.12 (#1298)

Bumps [org.scala-lang:scala-library](https://github.com/scala/scala) from 2.13.11 to 2.13.12.
- [Release notes](https://github.com/scala/scala/releases)
- [Commits](https://github.com/scala/scala/compare/v2.13.11...v2.13.12)

---
updated-dependencies:
- dependency-name: org.scala-lang:scala-library
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 languages/scala/pom.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/languages/scala/pom.xml b/languages/scala/pom.xml
index fdc536ba0..dcedea621 100644
--- a/languages/scala/pom.xml
+++ b/languages/scala/pom.xml
@@ -10,7 +10,7 @@
     <artifactId>scala</artifactId>
 
     <properties>
-        <scala.version>2.13.11</scala.version>
+        <scala.version>2.13.12</scala.version>
         <scala.compat.version>2.13</scala.compat.version>
     </properties>
 

From 52453dbc5ca6949b0fd3529b3c34d7b52a235cae Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 13 Sep 2023 14:30:10 +0200
Subject: [PATCH 24/31] Dependency(deps-dev): Bump vue-tsc from 1.8.8 to 1.8.11
 in /report-viewer (#1297)

Bumps [vue-tsc](https://github.com/vuejs/language-tools/tree/HEAD/packages/vue-tsc) from 1.8.8 to 1.8.11.
- [Release notes](https://github.com/vuejs/language-tools/releases)
- [Changelog](https://github.com/vuejs/language-tools/blob/master/CHANGELOG.md)
- [Commits](https://github.com/vuejs/language-tools/commits/v1.8.11/packages/vue-tsc)

---
updated-dependencies:
- dependency-name: vue-tsc
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 report-viewer/package-lock.json | 48 ++++++++++++++++-----------------
 report-viewer/package.json      |  2 +-
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/report-viewer/package-lock.json b/report-viewer/package-lock.json
index 67d41a1ef..012cdff9a 100644
--- a/report-viewer/package-lock.json
+++ b/report-viewer/package-lock.json
@@ -48,7 +48,7 @@
         "typescript": "^5.2.2",
         "vite": "^4.4.9",
         "vitest": "^0.34.3",
-        "vue-tsc": "^1.8.8"
+        "vue-tsc": "^1.8.11"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -1102,30 +1102,30 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.10.0.tgz",
-      "integrity": "sha512-ddyWwSYqcbEZNFHm+Z3NZd6M7Ihjcwl/9B5cZd8kECdimVXUFdFi60XHWD27nrWtUQIsUYIG7Ca1WBwV2u2LSQ==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.10.1.tgz",
+      "integrity": "sha512-JnsM1mIPdfGPxmoOcK1c7HYAsL6YOv0TCJ4aW3AXPZN/Jb4R77epDyMZIVudSGjWMbvv/JfUa+rQ+dGKTmgwBA==",
       "dev": true,
       "dependencies": {
-        "@volar/source-map": "1.10.0"
+        "@volar/source-map": "1.10.1"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.10.0.tgz",
-      "integrity": "sha512-/ibWdcOzDGiq/GM1JU2eX8fH1bvAhl66hfe8yEgLEzg9txgr6qb5sQ/DEz5PcDL75tF5H5sCRRwn8Eu8ezi9mw==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.10.1.tgz",
+      "integrity": "sha512-3/S6KQbqa7pGC8CxPrg69qHLpOvkiPHGJtWPkI/1AXCsktkJ6gIk/5z4hyuMp8Anvs6eS/Kvp/GZa3ut3votKA==",
       "dev": true,
       "dependencies": {
         "muggle-string": "^0.3.1"
       }
     },
     "node_modules/@volar/typescript": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.10.0.tgz",
-      "integrity": "sha512-OtqGtFbUKYC0pLNIk3mHQp5xWnvL1CJIUc9VE39VdZ/oqpoBh5jKfb9uJ45Y4/oP/WYTrif/Uxl1k8VTPz66Gg==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.10.1.tgz",
+      "integrity": "sha512-+iiO9yUSRHIYjlteT+QcdRq8b44qH19/eiUZtjNtuh6D9ailYM7DVR0zO2sEgJlvCaunw/CF9Ov2KooQBpR4VQ==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "1.10.0"
+        "@volar/language-core": "1.10.1"
       }
     },
     "node_modules/@vue/compiler-core": {
@@ -1218,9 +1218,9 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "1.8.8",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.8.tgz",
-      "integrity": "sha512-i4KMTuPazf48yMdYoebTkgSOJdFraE4pQf0B+FTOFkbB+6hAfjrSou/UmYWRsWyZV6r4Rc6DDZdI39CJwL0rWw==",
+      "version": "1.8.11",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.11.tgz",
+      "integrity": "sha512-+MZOBGqGwfld6hpo0DB47x8eNM0dNqk15ZdfOhj19CpvuYuOWCeVdOEGZunKDyo3QLkTn3kLOSysJzg7FDOQBA==",
       "dev": true,
       "dependencies": {
         "@volar/language-core": "~1.10.0",
@@ -1347,13 +1347,13 @@
       "dev": true
     },
     "node_modules/@vue/typescript": {
-      "version": "1.8.8",
-      "resolved": "https://registry.npmjs.org/@vue/typescript/-/typescript-1.8.8.tgz",
-      "integrity": "sha512-jUnmMB6egu5wl342eaUH236v8tdcEPXXkPgj+eI/F6JwW/lb+yAU6U07ZbQ3MVabZRlupIlPESB7ajgAGixhow==",
+      "version": "1.8.11",
+      "resolved": "https://registry.npmjs.org/@vue/typescript/-/typescript-1.8.11.tgz",
+      "integrity": "sha512-skUmMDiPUUtu1flPmf2YybF+PX8IzBtMioQOaNn6Ck/RhdrPJGj1AX/7s3Buf9G6ln+/KHR1XQuti/FFxw5XVA==",
       "dev": true,
       "dependencies": {
         "@volar/typescript": "~1.10.0",
-        "@vue/language-core": "1.8.8"
+        "@vue/language-core": "1.8.11"
       }
     },
     "node_modules/abab": {
@@ -6644,13 +6644,13 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "1.8.8",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.8.tgz",
-      "integrity": "sha512-bSydNFQsF7AMvwWsRXD7cBIXaNs/KSjvzWLymq/UtKE36697sboX4EccSHFVxvgdBlI1frYPc/VMKJNB7DFeDQ==",
+      "version": "1.8.11",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.11.tgz",
+      "integrity": "sha512-BzfiMdPqDHBlysx4g26NkfVHSQwGD/lTRausmxN9sFyjXz34OWfsbkh0YsVkX84Hu65In1fFlxHiG39Tr4Vojg==",
       "dev": true,
       "dependencies": {
-        "@vue/language-core": "1.8.8",
-        "@vue/typescript": "1.8.8",
+        "@vue/language-core": "1.8.11",
+        "@vue/typescript": "1.8.11",
         "semver": "^7.3.8"
       },
       "bin": {
diff --git a/report-viewer/package.json b/report-viewer/package.json
index 119db51d1..9655b80af 100644
--- a/report-viewer/package.json
+++ b/report-viewer/package.json
@@ -57,6 +57,6 @@
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
     "vitest": "^0.34.3",
-    "vue-tsc": "^1.8.8"
+    "vue-tsc": "^1.8.11"
   }
 }

From 0c4136e0d3e010a17bfe599564448e379ee0d541 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 13 Sep 2023 14:32:38 +0200
Subject: [PATCH 25/31] Dependency(deps-dev): Bump eslint from 8.48.0 to 8.49.0
 in /report-viewer (#1295)

Bumps [eslint](https://github.com/eslint/eslint) from 8.48.0 to 8.49.0.
- [Release notes](https://github.com/eslint/eslint/releases)
- [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md)
- [Commits](https://github.com/eslint/eslint/compare/v8.48.0...v8.49.0)

---
updated-dependencies:
- dependency-name: eslint
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 report-viewer/package-lock.json | 24 ++++++++++++------------
 report-viewer/package.json      |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/report-viewer/package-lock.json b/report-viewer/package-lock.json
index 012cdff9a..3f523d64d 100644
--- a/report-viewer/package-lock.json
+++ b/report-viewer/package-lock.json
@@ -35,7 +35,7 @@
         "@vue/test-utils": "^2.4.1",
         "@vue/tsconfig": "^0.4.0",
         "autoprefixer": "^10.4.15",
-        "eslint": "^8.48.0",
+        "eslint": "^8.49.0",
         "eslint-plugin-vue": "^9.17.0",
         "husky": "^8.0.0",
         "jsdom": "^22.1.0",
@@ -483,9 +483,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.48.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.48.0.tgz",
-      "integrity": "sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw==",
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.49.0.tgz",
+      "integrity": "sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -546,9 +546,9 @@
       }
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
-      "integrity": "sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==",
+      "version": "0.11.11",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
+      "integrity": "sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==",
       "dev": true,
       "dependencies": {
         "@humanwhocodes/object-schema": "^1.2.1",
@@ -2414,16 +2414,16 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.48.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.48.0.tgz",
-      "integrity": "sha512-sb6DLeIuRXxeM1YljSe1KEx9/YYeZFQWcV8Rq9HfigmdDEugjLEVEa1ozDjL6YDjBpQHPJxJzze+alxi4T3OLg==",
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.49.0.tgz",
+      "integrity": "sha512-jw03ENfm6VJI0jA9U+8H5zfl5b+FvuU3YYvZRdZHOlU2ggJkxrlkJH4HcDrZpj6YwD8kuYqvQM8LyesoazrSOQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.2",
-        "@eslint/js": "8.48.0",
-        "@humanwhocodes/config-array": "^0.11.10",
+        "@eslint/js": "8.49.0",
+        "@humanwhocodes/config-array": "^0.11.11",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "ajv": "^6.12.4",
diff --git a/report-viewer/package.json b/report-viewer/package.json
index 9655b80af..965f286b8 100644
--- a/report-viewer/package.json
+++ b/report-viewer/package.json
@@ -44,7 +44,7 @@
     "@vue/test-utils": "^2.4.1",
     "@vue/tsconfig": "^0.4.0",
     "autoprefixer": "^10.4.15",
-    "eslint": "^8.48.0",
+    "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
     "husky": "^8.0.0",
     "jsdom": "^22.1.0",

From b32c82f5e999956dd19222fdd6cabbc8b17054a2 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 13 Sep 2023 14:33:02 +0200
Subject: [PATCH 26/31] Dependency(deps-dev): Bump @types/node from 20.5.9 to
 20.6.0 in /report-viewer (#1294)

Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.5.9 to 20.6.0.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

---
updated-dependencies:
- dependency-name: "@types/node"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 report-viewer/package-lock.json | 8 ++++----
 report-viewer/package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/report-viewer/package-lock.json b/report-viewer/package-lock.json
index 3f523d64d..61904031d 100644
--- a/report-viewer/package-lock.json
+++ b/report-viewer/package-lock.json
@@ -28,7 +28,7 @@
         "@playwright/test": "^1.37.1",
         "@rushstack/eslint-patch": "^1.3.3",
         "@types/jsdom": "^21.1.2",
-        "@types/node": "^20.5.9",
+        "@types/node": "^20.6.0",
         "@vitejs/plugin-vue": "^4.3.4",
         "@vue/eslint-config-prettier": "^8.0.0",
         "@vue/eslint-config-typescript": "^11.0.3",
@@ -788,9 +788,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.5.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.9.tgz",
-      "integrity": "sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==",
+      "version": "20.6.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.0.tgz",
+      "integrity": "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==",
       "dev": true
     },
     "node_modules/@types/semver": {
diff --git a/report-viewer/package.json b/report-viewer/package.json
index 965f286b8..7651fbe46 100644
--- a/report-viewer/package.json
+++ b/report-viewer/package.json
@@ -37,7 +37,7 @@
     "@playwright/test": "^1.37.1",
     "@rushstack/eslint-patch": "^1.3.3",
     "@types/jsdom": "^21.1.2",
-    "@types/node": "^20.5.9",
+    "@types/node": "^20.6.0",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^11.0.3",

From f144902e088f7651d966b45d98612e664ed74535 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 13 Sep 2023 14:33:18 +0200
Subject: [PATCH 27/31] Dependency(deps-dev): Bump vitest from 0.34.3 to 0.34.4
 in /report-viewer (#1296)

Bumps [vitest](https://github.com/vitest-dev/vitest/tree/HEAD/packages/vitest) from 0.34.3 to 0.34.4.
- [Release notes](https://github.com/vitest-dev/vitest/releases)
- [Commits](https://github.com/vitest-dev/vitest/commits/v0.34.4/packages/vitest)

---
updated-dependencies:
- dependency-name: vitest
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 report-viewer/package-lock.json | 76 ++++++++++++++++-----------------
 report-viewer/package.json      |  2 +-
 2 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/report-viewer/package-lock.json b/report-viewer/package-lock.json
index 61904031d..0ea377c82 100644
--- a/report-viewer/package-lock.json
+++ b/report-viewer/package-lock.json
@@ -47,7 +47,7 @@
         "tailwindcss": "^3.3.3",
         "typescript": "^5.2.2",
         "vite": "^4.4.9",
-        "vitest": "^0.34.3",
+        "vitest": "^0.34.4",
         "vue-tsc": "^1.8.11"
       }
     },
@@ -1007,13 +1007,13 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.34.3.tgz",
-      "integrity": "sha512-F8MTXZUYRBVsYL1uoIft1HHWhwDbSzwAU9Zgh8S6WFC3YgVb4AnFV2GXO3P5Em8FjEYaZtTnQYoNwwBrlOMXgg==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.34.4.tgz",
+      "integrity": "sha512-XlMKX8HyYUqB8dsY8Xxrc64J2Qs9pKMt2Z8vFTL4mBWXJsg4yoALHzJfDWi8h5nkO4Zua4zjqtapQ/IluVkSnA==",
       "dev": true,
       "dependencies": {
-        "@vitest/spy": "0.34.3",
-        "@vitest/utils": "0.34.3",
+        "@vitest/spy": "0.34.4",
+        "@vitest/utils": "0.34.4",
         "chai": "^4.3.7"
       },
       "funding": {
@@ -1021,12 +1021,12 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.34.3.tgz",
-      "integrity": "sha512-lYNq7N3vR57VMKMPLVvmJoiN4bqwzZ1euTW+XXYH5kzr3W/+xQG3b41xJn9ChJ3AhYOSoweu974S1V3qDcFESA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.34.4.tgz",
+      "integrity": "sha512-hwwdB1StERqUls8oV8YcpmTIpVeJMe4WgYuDongVzixl5hlYLT2G8afhcdADeDeqCaAmZcSgLTLtqkjPQF7x+w==",
       "dev": true,
       "dependencies": {
-        "@vitest/utils": "0.34.3",
+        "@vitest/utils": "0.34.4",
         "p-limit": "^4.0.0",
         "pathe": "^1.1.1"
       },
@@ -1062,9 +1062,9 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-0.34.3.tgz",
-      "integrity": "sha512-QyPaE15DQwbnIBp/yNJ8lbvXTZxS00kRly0kfFgAD5EYmCbYcA+1EEyRalc93M0gosL/xHeg3lKAClIXYpmUiQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-0.34.4.tgz",
+      "integrity": "sha512-GCsh4coc3YUSL/o+BPUo7lHQbzpdttTxL6f4q0jRx2qVGoYz/cyTRDJHbnwks6TILi6560bVWoBpYC10PuTLHw==",
       "dev": true,
       "dependencies": {
         "magic-string": "^0.30.1",
@@ -1076,9 +1076,9 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.34.3.tgz",
-      "integrity": "sha512-N1V0RFQ6AI7CPgzBq9kzjRdPIgThC340DGjdKdPSE8r86aUSmeliTUgkTqLSgtEwWWsGfBQ+UetZWhK0BgJmkQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.34.4.tgz",
+      "integrity": "sha512-PNU+fd7DUPgA3Ya924b1qKuQkonAW6hL7YUjkON3wmBwSTIlhOSpy04SJ0NrRsEbrXgMMj6Morh04BMf8k+w0g==",
       "dev": true,
       "dependencies": {
         "tinyspy": "^2.1.1"
@@ -1088,9 +1088,9 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.34.3.tgz",
-      "integrity": "sha512-kiSnzLG6m/tiT0XEl4U2H8JDBjFtwVlaE8I3QfGiMFR0QvnRDfYfdP3YvTBWM/6iJDAyaPY6yVQiCTUc7ZzTHA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.34.4.tgz",
+      "integrity": "sha512-yR2+5CHhp/K4ySY0Qtd+CAL9f5Yh1aXrKfAT42bq6CtlGPh92jIDDDSg7ydlRow1CP+dys4TrOrbELOyNInHSg==",
       "dev": true,
       "dependencies": {
         "diff-sequences": "^29.4.3",
@@ -4146,9 +4146,9 @@
       "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
     },
     "node_modules/mlly": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.1.tgz",
-      "integrity": "sha512-SCDs78Q2o09jiZiE2WziwVBEqXQ02XkGdUy45cbJf+BpYRIjArXRJ1Wbowxkb+NaM9DWvS3UC9GiO/6eqvQ/pg==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
+      "integrity": "sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.10.0",
@@ -5084,9 +5084,9 @@
       }
     },
     "node_modules/pretty-format": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.6.3.tgz",
-      "integrity": "sha512-ZsBgjVhFAj5KeK+nHfF1305/By3lechHQSMWCTl8iHSbfOm2TN5nHEtFc/+W7fAyUeCs2n5iow72gld4gW0xDw==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
       "dev": true,
       "dependencies": {
         "@jest/schemas": "^29.6.3",
@@ -6422,9 +6422,9 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-0.34.3.tgz",
-      "integrity": "sha512-+0TzJf1g0tYXj6tR2vEyiA42OPq68QkRZCu/ERSo2PtsDJfBpDyEfuKbRvLmZqi/CgC7SCBtyC+WjTGNMRIaig==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-0.34.4.tgz",
+      "integrity": "sha512-ho8HtiLc+nsmbwZMw8SlghESEE3KxJNp04F/jPUCLVvaURwt0d+r9LxEqCX5hvrrOQ0GSyxbYr5ZfRYhQ0yVKQ==",
       "dev": true,
       "dependencies": {
         "cac": "^6.7.14",
@@ -6445,19 +6445,19 @@
       }
     },
     "node_modules/vitest": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.34.3.tgz",
-      "integrity": "sha512-7+VA5Iw4S3USYk+qwPxHl8plCMhA5rtfwMjgoQXMT7rO5ldWcdsdo3U1QD289JgglGK4WeOzgoLTsGFu6VISyQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.34.4.tgz",
+      "integrity": "sha512-SE/laOsB6995QlbSE6BtkpXDeVNLJc1u2LHRG/OpnN4RsRzM3GQm4nm3PQCK5OBtrsUqnhzLdnT7se3aeNGdlw==",
       "dev": true,
       "dependencies": {
         "@types/chai": "^4.3.5",
         "@types/chai-subset": "^1.3.3",
         "@types/node": "*",
-        "@vitest/expect": "0.34.3",
-        "@vitest/runner": "0.34.3",
-        "@vitest/snapshot": "0.34.3",
-        "@vitest/spy": "0.34.3",
-        "@vitest/utils": "0.34.3",
+        "@vitest/expect": "0.34.4",
+        "@vitest/runner": "0.34.4",
+        "@vitest/snapshot": "0.34.4",
+        "@vitest/spy": "0.34.4",
+        "@vitest/utils": "0.34.4",
         "acorn": "^8.9.0",
         "acorn-walk": "^8.2.0",
         "cac": "^6.7.14",
@@ -6471,8 +6471,8 @@
         "strip-literal": "^1.0.1",
         "tinybench": "^2.5.0",
         "tinypool": "^0.7.0",
-        "vite": "^3.0.0 || ^4.0.0",
-        "vite-node": "0.34.3",
+        "vite": "^3.1.0 || ^4.0.0 || ^5.0.0-0",
+        "vite-node": "0.34.4",
         "why-is-node-running": "^2.2.2"
       },
       "bin": {
diff --git a/report-viewer/package.json b/report-viewer/package.json
index 7651fbe46..3650b11e7 100644
--- a/report-viewer/package.json
+++ b/report-viewer/package.json
@@ -56,7 +56,7 @@
     "tailwindcss": "^3.3.3",
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
-    "vitest": "^0.34.3",
+    "vitest": "^0.34.4",
     "vue-tsc": "^1.8.11"
   }
 }

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 28/31] 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 29/31] 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 30/31] 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>

From 3b6050acab93c71f5dbf5939d72c1f8202da0e8e Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Mon, 18 Sep 2023 12:33:50 +0200
Subject: [PATCH 31/31] node v18

---
 .github/workflows/report-viewer-build-test.yml | 2 +-
 .github/workflows/report-viewer-dev.yml        | 2 +-
 .github/workflows/report-viewer-e2e.yml        | 2 +-
 .github/workflows/report-viewer-lint.yml       | 4 ++--
 .github/workflows/report-viewer-prettier.yml   | 2 +-
 .github/workflows/report-viewer-unit.yml       | 2 +-
 .github/workflows/report-viewer.yml            | 2 +-
 report-viewer/package-lock.json                | 8 ++++----
 report-viewer/package.json                     | 2 +-
 9 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/.github/workflows/report-viewer-build-test.yml b/.github/workflows/report-viewer-build-test.yml
index 1e51bfefb..aa80c86dd 100644
--- a/.github/workflows/report-viewer-build-test.yml
+++ b/.github/workflows/report-viewer-build-test.yml
@@ -30,7 +30,7 @@ jobs:
       
       - uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
 
       - name: Set version of Report Viewer
         shell: bash
diff --git a/.github/workflows/report-viewer-dev.yml b/.github/workflows/report-viewer-dev.yml
index e6bf77f37..92fe97407 100644
--- a/.github/workflows/report-viewer-dev.yml
+++ b/.github/workflows/report-viewer-dev.yml
@@ -18,7 +18,7 @@ jobs:
       
       - uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
 
       - name: Set version of Report Viewer
         shell: bash
diff --git a/.github/workflows/report-viewer-e2e.yml b/.github/workflows/report-viewer-e2e.yml
index b9ac6354c..9e265b910 100644
--- a/.github/workflows/report-viewer-e2e.yml
+++ b/.github/workflows/report-viewer-e2e.yml
@@ -30,7 +30,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
 
       - name: Install and Test 🧪
         working-directory: report-viewer
diff --git a/.github/workflows/report-viewer-lint.yml b/.github/workflows/report-viewer-lint.yml
index 768cdd6c5..924b274e7 100644
--- a/.github/workflows/report-viewer-lint.yml
+++ b/.github/workflows/report-viewer-lint.yml
@@ -4,7 +4,7 @@ name: Report Viewer ESLint Workflow # Checks linting of report viewer
 on:
   workflow_dispatch:
   push:
-    path:
+    paths:
       - ".github/workflows/report-viewer-lint.yml"
       - "report-viewer/**"
   pull_request:
@@ -35,7 +35,7 @@ jobs:
       
       - uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
 
       - name: Install and Lint 🎨
         working-directory: report-viewer
diff --git a/.github/workflows/report-viewer-prettier.yml b/.github/workflows/report-viewer-prettier.yml
index 2da72eec3..e9933c24e 100644
--- a/.github/workflows/report-viewer-prettier.yml
+++ b/.github/workflows/report-viewer-prettier.yml
@@ -35,7 +35,7 @@ jobs:
       
       - uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
 
       - name: Install and Check 🎨
         working-directory: report-viewer
diff --git a/.github/workflows/report-viewer-unit.yml b/.github/workflows/report-viewer-unit.yml
index 1d3012e4e..48f9082a7 100644
--- a/.github/workflows/report-viewer-unit.yml
+++ b/.github/workflows/report-viewer-unit.yml
@@ -30,7 +30,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
 
       - name: Install and Test 🧪
         working-directory: report-viewer
diff --git a/.github/workflows/report-viewer.yml b/.github/workflows/report-viewer.yml
index eb3642828..624dde7c5 100644
--- a/.github/workflows/report-viewer.yml
+++ b/.github/workflows/report-viewer.yml
@@ -15,7 +15,7 @@ jobs:
       
       - uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
 
       - name: Set version of Report Viewer
         shell: bash
diff --git a/report-viewer/package-lock.json b/report-viewer/package-lock.json
index 0ea377c82..ea4cca179 100644
--- a/report-viewer/package-lock.json
+++ b/report-viewer/package-lock.json
@@ -28,7 +28,7 @@
         "@playwright/test": "^1.37.1",
         "@rushstack/eslint-patch": "^1.3.3",
         "@types/jsdom": "^21.1.2",
-        "@types/node": "^20.6.0",
+        "@types/node": "^18.11.9",
         "@vitejs/plugin-vue": "^4.3.4",
         "@vue/eslint-config-prettier": "^8.0.0",
         "@vue/eslint-config-typescript": "^11.0.3",
@@ -788,9 +788,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.6.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.0.tgz",
-      "integrity": "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==",
+      "version": "18.17.17",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.17.tgz",
+      "integrity": "sha512-cOxcXsQ2sxiwkykdJqvyFS+MLQPLvIdwh5l6gNg8qF6s+C7XSkEWOZjK+XhUZd+mYvHV/180g2cnCcIl4l06Pw==",
       "dev": true
     },
     "node_modules/@types/semver": {
diff --git a/report-viewer/package.json b/report-viewer/package.json
index 3650b11e7..1ecabf94d 100644
--- a/report-viewer/package.json
+++ b/report-viewer/package.json
@@ -37,7 +37,7 @@
     "@playwright/test": "^1.37.1",
     "@rushstack/eslint-patch": "^1.3.3",
     "@types/jsdom": "^21.1.2",
-    "@types/node": "^20.6.0",
+    "@types/node": "^18.11.9",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^11.0.3",