From bfffca4a5bf683f0f3b9fca6e87cb1745dbbb0d4 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Tue, 26 Sep 2023 16:54:24 +0200
Subject: [PATCH 01/22] add lib

---
 report-viewer/package-lock.json | 73 +++++++++++++++++++++++++++++++++
 report-viewer/package.json      |  1 +
 2 files changed, 74 insertions(+)

diff --git a/report-viewer/package-lock.json b/report-viewer/package-lock.json
index 4c063d310..a33e370f2 100644
--- a/report-viewer/package-lock.json
+++ b/report-viewer/package-lock.json
@@ -13,6 +13,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
         "@fortawesome/vue-fontawesome": "^3.0.3",
         "chart.js": "^4.4.0",
+        "chartjs-chart-graph": "^4.2.5",
         "chartjs-plugin-datalabels": "^2.2.0",
         "highlight.js": "^11.8.0",
         "jszip": "^3.10.0",
@@ -766,6 +767,16 @@
         "@types/chai": "*"
       }
     },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.6.tgz",
+      "integrity": "sha512-G9wbOvCxkNlLrppoHLZ6oFpbm3z7ibfkXwLD8g5/4Aa7iTEV0Z7TQ0OL8UxAtvdOhCa2VZcSuqn1NQqyCEqmiw=="
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.4.tgz",
+      "integrity": "sha512-wrvjpRFdmEu6yAqgjGy8MSud9ggxJj+I9XLuztLeSf/E0j0j6RQYtxH2J8U0Cfbgiw9ZDHyhpmaVuWhxscYaAQ=="
+    },
     "node_modules/@types/jsdom": {
       "version": "21.1.3",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.3.tgz",
@@ -1806,6 +1817,23 @@
         "pnpm": ">=7"
       }
     },
+    "node_modules/chartjs-chart-graph": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/chartjs-chart-graph/-/chartjs-chart-graph-4.2.5.tgz",
+      "integrity": "sha512-peZFFOYBLMn8cCvtT9xNapwOA8enfPQ3DO7bTBSNCTw0GjurnwxW3BF6H3lGjn+9VURVaVN/NHF2nSvUaCsxnw==",
+      "dependencies": {
+        "@types/d3-force": "^3.0.5",
+        "@types/d3-hierarchy": "^3.1.3",
+        "d3-dispatch": "^3.0.1",
+        "d3-force": "^3.0.0",
+        "d3-hierarchy": "^3.1.2",
+        "d3-quadtree": "^3.0.1",
+        "d3-timer": "^3.0.1"
+      },
+      "peerDependencies": {
+        "chart.js": "^4.1.0"
+      }
+    },
     "node_modules/chartjs-plugin-datalabels": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz",
@@ -2002,6 +2030,51 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/data-urls": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
diff --git a/report-viewer/package.json b/report-viewer/package.json
index c88eef012..5e5de762a 100644
--- a/report-viewer/package.json
+++ b/report-viewer/package.json
@@ -22,6 +22,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "chart.js": "^4.4.0",
+    "chartjs-chart-graph": "^4.2.5",
     "chartjs-plugin-datalabels": "^2.2.0",
     "highlight.js": "^11.8.0",
     "jszip": "^3.10.0",

From 46b43176402746e467796a948fa6e232109f50b2 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Tue, 26 Sep 2023 17:44:02 +0200
Subject: [PATCH 02/22] add chart component

---
 report-viewer/src/components/ClusterGraph.vue | 172 ++++++++++++++++++
 report-viewer/src/utils/ColorUtils.ts         |   5 +-
 report-viewer/src/views/ClusterView.vue       |   4 +-
 3 files changed, 179 insertions(+), 2 deletions(-)
 create mode 100644 report-viewer/src/components/ClusterGraph.vue

diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
new file mode 100644
index 000000000..7f2fbb0c7
--- /dev/null
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <canvas ref="graphCanvas"></canvas>
+    <div v-show="!loaded">Could not display graph</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ClusterListElement } from '@/model/ClusterListElement'
+import { Chart, registerables } from 'chart.js'
+import { ref, type PropType, type Ref, onMounted, computed, watch } from 'vue'
+import ChartDataLabels from 'chartjs-plugin-datalabels'
+import { EdgeLine, GraphController, GraphChart } from 'chartjs-chart-graph'
+import { store } from '@/stores/store'
+import { graphColors } from '@/utils/ColorUtils'
+
+const props = defineProps({
+  cluster: {
+    type: Object as PropType<ClusterListElement>,
+    required: true
+  }
+})
+
+const graphCanvas: Ref<HTMLCanvasElement | null> = ref(null)
+const loaded = ref(false)
+
+Chart.register(...registerables)
+Chart.register(ChartDataLabels)
+Chart.register(EdgeLine)
+Chart.register(GraphController)
+Chart.register(GraphChart)
+
+const keys = computed(() => Array.from(props.cluster.members.keys()))
+const labels = computed(() =>
+  Array.from(keys.value).map((m) => store().submissionDisplayName(m) ?? m)
+)
+console.log(labels.value)
+const edges = computed(() => {
+  const edges: { source: number; target: number }[] = []
+  props.cluster.members.forEach((member, key) => {
+    member.forEach((match) => {
+      const firstIndex = keys.value.indexOf(key)
+      const secondIndex = keys.value.indexOf(match.matchedWith)
+      if (firstIndex == -1 || secondIndex == -1) {
+        console.log(`Could not find index for ${key} or ${match.matchedWith}`)
+      }
+      if (firstIndex < secondIndex) {
+        edges.push({ source: firstIndex, target: secondIndex })
+      }
+    })
+  })
+  return edges
+})
+
+const data = computed(() => {
+  return {
+    labels: labels.value,
+    datasets: [
+      {
+        pointRadius: 10,
+        pointHoverRadius: 10,
+        pointBackgroundColor: graphColors.contentFill,
+        pointHoverBackgroundColor: graphColors.contentFill,
+        pointBorderColor: graphColors.ticksAndFont.value,
+        pointHoverBorderColor: graphColors.ticksAndFont.value,
+        data: Array.from(keys.value).map((_, index) => ({ x: getX(index), y: getY(index) })),
+        edges: edges.value,
+        edgeLineBorderColor: (ctx: any) =>
+          borderColor(keys.value[ctx.raw.source], keys.value[ctx.raw.target]),
+        edgeLineBorderWidth: (ctx: any) =>
+          borderWidth(keys.value[ctx.raw.source], keys.value[ctx.raw.target])
+      }
+    ]
+  }
+})
+
+const options = computed(() => {
+  return {
+    animation: false as false,
+    plugins: {
+      legend: { display: false },
+      datalabels: {
+        display: true,
+        font: {
+          weight: 'bold' as 'bold',
+          size: 16
+        },
+        formatter: (value: any, ctx: any) => {
+          return labels.value[ctx.dataIndex]
+        },
+        offset: 12,
+        color: graphColors.ticksAndFont.value
+      },
+      tooltip: {
+        enabled: false
+      }
+    }
+  }
+})
+
+function borderColor(firstSubmissionId: string, secondSubmissionId: string) {
+  const firstSubmission = props.cluster.members.get(firstSubmissionId)
+  if (!firstSubmission) {
+    return 'rgba(0,0,0,0)'
+  }
+  const match = firstSubmission.find((m) => m.matchedWith == secondSubmissionId)
+  if (!match) {
+    return 'rgba(0,0,0,0)'
+  }
+  return graphColors.contentFillAlpha(match.similarity)
+}
+
+function borderWidth(firstSubmissionId: string, secondSubmissionId: string) {
+  const firstSubmission = props.cluster.members.get(firstSubmissionId)
+  if (!firstSubmission) {
+    return 'rgba(0,0,0,0)'
+  }
+  const match = firstSubmission.find((m) => m.matchedWith == secondSubmissionId)
+  if (!match) {
+    return 'rgba(0,0,0,0)'
+  }
+  return 4 * match.similarity + 1
+}
+
+function getX(index: number) {
+  return Math.sin((2 * Math.PI * index) / keys.value.length) + 1
+}
+
+function getY(index: number) {
+  return Math.cos((2 * Math.PI * index) / keys.value.length) + 1
+}
+
+const chart: Ref<Chart | null> = ref(null)
+
+function drawGraph() {
+  if (chart.value != null) {
+    chart.value.destroy()
+  }
+  if (graphCanvas.value == null) {
+    loaded.value = false
+    return
+  }
+  const ctx = graphCanvas.value.getContext('2d')
+  if (ctx == null) {
+    loaded.value = false
+    return
+  }
+  console.log(graphCanvas.value)
+  chart.value = new Chart(ctx, {
+    type: 'graph',
+    data: data.value,
+    options: options.value
+  })
+  loaded.value = true
+}
+
+onMounted(() => {
+  drawGraph()
+})
+
+watch(
+  computed(() => {
+    return {
+      d: data.value,
+      o: options.value
+    }
+  }),
+  () => {
+    drawGraph()
+  }
+)
+</script>
diff --git a/report-viewer/src/utils/ColorUtils.ts b/report-viewer/src/utils/ColorUtils.ts
index e44adec27..7625cd80a 100644
--- a/report-viewer/src/utils/ColorUtils.ts
+++ b/report-viewer/src/utils/ColorUtils.ts
@@ -68,7 +68,10 @@ const graphColors = {
   }),
   contentFill: 'rgba(190, 22, 34, 0.5)',
   contentBorder: 'rgb(127, 15, 24)',
-  pointFill: 'rgba(190, 22, 34, 1)'
+  pointFill: 'rgba(190, 22, 34, 1)',
+  contentFillAlpha(alpha: number) {
+    return `rgba(190, 22, 34, ${alpha})`
+  }
 }
 
 export { generateColors, graphColors }
diff --git a/report-viewer/src/views/ClusterView.vue b/report-viewer/src/views/ClusterView.vue
index 62c94d50e..c2435b37f 100644
--- a/report-viewer/src/views/ClusterView.vue
+++ b/report-viewer/src/views/ClusterView.vue
@@ -13,7 +13,8 @@
 
     <div class="relative bottom-0 left-0 right-0 flex flex-grow justify-between space-x-5 p-5 pt-5">
       <Container class="flex max-h-0 min-h-full flex-1 flex-col overflow-hidden">
-        <ClusterRadarChart :cluster="clusterListElement" class="flex-grow" />
+        <!--ClusterRadarChart :cluster="clusterListElement" class="flex-grow" /-->
+        <ClusterGraph :cluster="clusterListElement" class="flex-grow" />
       </Container>
       <Container class="flex max-h-0 min-h-full w-1/3 flex-col space-y-2">
         <h2>Comparisons of Cluster Members:</h2>
@@ -25,6 +26,7 @@
 
 <script setup lang="ts">
 import ClusterRadarChart from '@/components/ClusterRadarChart.vue'
+import ClusterGraph from '@/components/ClusterGraph.vue'
 import ComparisonsTable from '@/components/ComparisonsTable.vue'
 import Container from '@/components/ContainerComponent.vue'
 import TextInformation from '@/components/TextInformation.vue'

From 4c6bcdbed502f011f4f8ee7667a0a68ded8b38a5 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Tue, 26 Sep 2023 18:08:27 +0200
Subject: [PATCH 03/22] add to view

---
 report-viewer/src/components/ClusterGraph.vue | 69 +++++++------------
 report-viewer/src/views/ClusterView.vue       | 23 ++++++-
 2 files changed, 45 insertions(+), 47 deletions(-)

diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
index 7f2fbb0c7..68a9c14cd 100644
--- a/report-viewer/src/components/ClusterGraph.vue
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -34,16 +34,12 @@ const keys = computed(() => Array.from(props.cluster.members.keys()))
 const labels = computed(() =>
   Array.from(keys.value).map((m) => store().submissionDisplayName(m) ?? m)
 )
-console.log(labels.value)
 const edges = computed(() => {
   const edges: { source: number; target: number }[] = []
   props.cluster.members.forEach((member, key) => {
     member.forEach((match) => {
       const firstIndex = keys.value.indexOf(key)
       const secondIndex = keys.value.indexOf(match.matchedWith)
-      if (firstIndex == -1 || secondIndex == -1) {
-        console.log(`Could not find index for ${key} or ${match.matchedWith}`)
-      }
       if (firstIndex < secondIndex) {
         edges.push({ source: firstIndex, target: secondIndex })
       }
@@ -52,7 +48,19 @@ const edges = computed(() => {
   return edges
 })
 
-const data = computed(() => {
+function getSimilarityFromKeyIndex(firstIndex: number, secondIndex: number) {
+  const firstSubmission = props.cluster.members.get(keys.value[firstIndex])
+  if (!firstSubmission) {
+    return 0
+  }
+  const match = firstSubmission.find((m) => m.matchedWith == keys.value[secondIndex])
+  if (!match) {
+    return 0
+  }
+  return match.similarity
+}
+
+const graphData = computed(() => {
   return {
     labels: labels.value,
     datasets: [
@@ -63,18 +71,21 @@ const data = computed(() => {
         pointHoverBackgroundColor: graphColors.contentFill,
         pointBorderColor: graphColors.ticksAndFont.value,
         pointHoverBorderColor: graphColors.ticksAndFont.value,
-        data: Array.from(keys.value).map((_, index) => ({ x: getX(index), y: getY(index) })),
+        data: Array.from(keys.value).map((_, index) => ({
+          x: Math.cos((2 * Math.PI * index) / keys.value.length) + 1,
+          y: Math.sin((2 * Math.PI * index) / keys.value.length) + 1
+        })),
         edges: edges.value,
         edgeLineBorderColor: (ctx: any) =>
-          borderColor(keys.value[ctx.raw.source], keys.value[ctx.raw.target]),
+          graphColors.contentFillAlpha(getSimilarityFromKeyIndex(ctx.raw.source, ctx.raw.target)),
         edgeLineBorderWidth: (ctx: any) =>
-          borderWidth(keys.value[ctx.raw.source], keys.value[ctx.raw.target])
+          5 * getSimilarityFromKeyIndex(ctx.raw.source, ctx.raw.target) + 1
       }
     ]
   }
 })
 
-const options = computed(() => {
+const graphOptions = computed(() => {
   return {
     animation: false as false,
     plugins: {
@@ -98,38 +109,6 @@ const options = computed(() => {
   }
 })
 
-function borderColor(firstSubmissionId: string, secondSubmissionId: string) {
-  const firstSubmission = props.cluster.members.get(firstSubmissionId)
-  if (!firstSubmission) {
-    return 'rgba(0,0,0,0)'
-  }
-  const match = firstSubmission.find((m) => m.matchedWith == secondSubmissionId)
-  if (!match) {
-    return 'rgba(0,0,0,0)'
-  }
-  return graphColors.contentFillAlpha(match.similarity)
-}
-
-function borderWidth(firstSubmissionId: string, secondSubmissionId: string) {
-  const firstSubmission = props.cluster.members.get(firstSubmissionId)
-  if (!firstSubmission) {
-    return 'rgba(0,0,0,0)'
-  }
-  const match = firstSubmission.find((m) => m.matchedWith == secondSubmissionId)
-  if (!match) {
-    return 'rgba(0,0,0,0)'
-  }
-  return 4 * match.similarity + 1
-}
-
-function getX(index: number) {
-  return Math.sin((2 * Math.PI * index) / keys.value.length) + 1
-}
-
-function getY(index: number) {
-  return Math.cos((2 * Math.PI * index) / keys.value.length) + 1
-}
-
 const chart: Ref<Chart | null> = ref(null)
 
 function drawGraph() {
@@ -148,8 +127,8 @@ function drawGraph() {
   console.log(graphCanvas.value)
   chart.value = new Chart(ctx, {
     type: 'graph',
-    data: data.value,
-    options: options.value
+    data: graphData.value,
+    options: graphOptions.value
   })
   loaded.value = true
 }
@@ -161,8 +140,8 @@ onMounted(() => {
 watch(
   computed(() => {
     return {
-      d: data.value,
-      o: options.value
+      d: graphData.value,
+      o: graphOptions.value
     }
   }),
   () => {
diff --git a/report-viewer/src/views/ClusterView.vue b/report-viewer/src/views/ClusterView.vue
index c2435b37f..209fbc4fa 100644
--- a/report-viewer/src/views/ClusterView.vue
+++ b/report-viewer/src/views/ClusterView.vue
@@ -13,8 +13,24 @@
 
     <div class="relative bottom-0 left-0 right-0 flex flex-grow justify-between space-x-5 p-5 pt-5">
       <Container class="flex max-h-0 min-h-full flex-1 flex-col overflow-hidden">
-        <!--ClusterRadarChart :cluster="clusterListElement" class="flex-grow" /-->
-        <ClusterGraph :cluster="clusterListElement" class="flex-grow" />
+        <OptionsSelectorComponent
+          :labels="['Graph', 'Radar']"
+          @selectionChanged="
+            (index) => (selectedClusterVisualization = index == 0 ? 'Graph' : 'Radar')
+          "
+          title="Cluster Visualization:"
+          class="mb-3"
+        />
+        <ClusterRadarChart
+          v-if="selectedClusterVisualization == 'Radar'"
+          :cluster="clusterListElement"
+          class="flex-grow"
+        />
+        <ClusterGraph
+          v-if="selectedClusterVisualization == 'Graph'"
+          :cluster="clusterListElement"
+          class="flex-grow"
+        />
       </Container>
       <Container class="flex max-h-0 min-h-full w-1/3 flex-col space-y-2">
         <h2>Comparisons of Cluster Members:</h2>
@@ -34,6 +50,8 @@ import type { ClusterListElement, ClusterListElementMember } from '@/model/Clust
 import type { ComparisonListElement } from '@/model/ComparisonListElement'
 import { MetricType } from '@/model/MetricType'
 import { OverviewFactory } from '@/model/factories/OverviewFactory'
+import OptionsSelectorComponent from '@/components/optionsSelectors/OptionsSelectorComponent.vue'
+import { ref } from 'vue'
 
 const props = defineProps({
   clusterIndex: {
@@ -46,6 +64,7 @@ const overview = await OverviewFactory.getOverview()
 const cluster = overview.clusters[props.clusterIndex]
 const comparisons = [] as Array<ComparisonListElement>
 const clusterMemberList = new Map() as ClusterListElementMember
+const selectedClusterVisualization: Ref<'Graph' | 'Radar'> = ref('Graph')
 const usedMetric = MetricType.AVERAGE
 
 function getComparisonFor(id1: string, id2: string) {

From ee8e836144a2cce70c45b06f6a18874344c33d0f Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Wed, 27 Sep 2023 10:01:27 +0200
Subject: [PATCH 04/22] extract graph color

---
 report-viewer/src/utils/ColorUtils.ts   | 11 ++++++++---
 report-viewer/src/views/ClusterView.vue |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/report-viewer/src/utils/ColorUtils.ts b/report-viewer/src/utils/ColorUtils.ts
index 7625cd80a..c59da18c5 100644
--- a/report-viewer/src/utils/ColorUtils.ts
+++ b/report-viewer/src/utils/ColorUtils.ts
@@ -59,6 +59,11 @@ function generateColorsForInterval(
   return colors
 }
 
+const graphRGB = {
+  red: 190,
+  green: 22,
+  blue: 34
+}
 const graphColors = {
   ticksAndFont: computed(() => {
     return store().uiState.useDarkMode ? '#ffffff' : '#000000'
@@ -66,11 +71,11 @@ const graphColors = {
   gridLines: computed(() => {
     return store().uiState.useDarkMode ? 'rgba(256, 256, 256, 0.2)' : 'rgba(0, 0, 0, 0.2)'
   }),
-  contentFill: 'rgba(190, 22, 34, 0.5)',
+  contentFill: `rgba(${graphRGB.red}, ${graphRGB.green}, ${graphRGB.blue}, 0.5)`,
   contentBorder: 'rgb(127, 15, 24)',
-  pointFill: 'rgba(190, 22, 34, 1)',
+  pointFill: `rgba(${graphRGB.red}, ${graphRGB.green}, ${graphRGB.blue}, 1)`,
   contentFillAlpha(alpha: number) {
-    return `rgba(190, 22, 34, ${alpha})`
+    return `rgba(${graphRGB.red}, ${graphRGB.green}, ${graphRGB.blue}, ${alpha})`
   }
 }
 
diff --git a/report-viewer/src/views/ClusterView.vue b/report-viewer/src/views/ClusterView.vue
index 209fbc4fa..fda814c8e 100644
--- a/report-viewer/src/views/ClusterView.vue
+++ b/report-viewer/src/views/ClusterView.vue
@@ -51,7 +51,7 @@ import type { ComparisonListElement } from '@/model/ComparisonListElement'
 import { MetricType } from '@/model/MetricType'
 import { OverviewFactory } from '@/model/factories/OverviewFactory'
 import OptionsSelectorComponent from '@/components/optionsSelectors/OptionsSelectorComponent.vue'
-import { ref } from 'vue'
+import { ref, type Ref } from 'vue'
 
 const props = defineProps({
   clusterIndex: {

From 1e260c4725fdfa9b72eab0d7100be3b5c628f177 Mon Sep 17 00:00:00 2001
From: Alexander Vogt <alexander_vogt@outlook.de>
Date: Sun, 1 Oct 2023 12:21:55 +0200
Subject: [PATCH 05/22] label position

---
 report-viewer/src/components/ClusterGraph.vue | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
index 68a9c14cd..b57597d1a 100644
--- a/report-viewer/src/components/ClusterGraph.vue
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -13,6 +13,7 @@ import ChartDataLabels from 'chartjs-plugin-datalabels'
 import { EdgeLine, GraphController, GraphChart } from 'chartjs-chart-graph'
 import { store } from '@/stores/store'
 import { graphColors } from '@/utils/ColorUtils'
+import { start } from 'repl'
 
 const props = defineProps({
   cluster: {
@@ -85,8 +86,27 @@ const graphData = computed(() => {
   }
 })
 
+const yPadding = 40
+const xPadding = computed(() => {
+  const avgCharacterLength = 8
+
+  const widths = labels.value.map((label) => label.length * avgCharacterLength)
+  const maxWidth = Math.max(...widths)
+  // Space needed for the longest name, but at most 200
+  console.log(maxWidth)
+  return Math.min(200, maxWidth)
+})
+
 const graphOptions = computed(() => {
   return {
+    layout: {
+      padding: {
+        top: yPadding,
+        bottom: yPadding,
+        left: xPadding.value,
+        right: xPadding.value
+      }
+    },
     animation: false as false,
     plugins: {
       legend: { display: false },
@@ -94,12 +114,13 @@ const graphOptions = computed(() => {
         display: true,
         font: {
           weight: 'bold' as 'bold',
-          size: 16
+          size: 12
         },
         formatter: (value: any, ctx: any) => {
           return labels.value[ctx.dataIndex]
         },
-        offset: 12,
+        align: (ctx: any) => (-360 * ctx.dataIndex) / keys.value.length,
+        offset: 8,
         color: graphColors.ticksAndFont.value
       },
       tooltip: {
@@ -124,7 +145,6 @@ function drawGraph() {
     loaded.value = false
     return
   }
-  console.log(graphCanvas.value)
   chart.value = new Chart(ctx, {
     type: 'graph',
     data: graphData.value,

From 74d487b3d56fff461a03c651ab76a3df6f44b954 Mon Sep 17 00:00:00 2001
From: Alexander Vogt <alexander_vogt@outlook.de>
Date: Sun, 1 Oct 2023 12:46:31 +0200
Subject: [PATCH 06/22] remove import

---
 report-viewer/src/components/ClusterGraph.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
index b57597d1a..ff5348d6b 100644
--- a/report-viewer/src/components/ClusterGraph.vue
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -13,7 +13,6 @@ import ChartDataLabels from 'chartjs-plugin-datalabels'
 import { EdgeLine, GraphController, GraphChart } from 'chartjs-chart-graph'
 import { store } from '@/stores/store'
 import { graphColors } from '@/utils/ColorUtils'
-import { start } from 'repl'
 
 const props = defineProps({
   cluster: {

From c3c84bd9ea1995039001165e4d36aa5eab08447c Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Mon, 2 Oct 2023 12:51:07 +0200
Subject: [PATCH 07/22] reenable tooltips

---
 report-viewer/src/components/ClusterGraph.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
index ff5348d6b..1ff485b32 100644
--- a/report-viewer/src/components/ClusterGraph.vue
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -92,7 +92,6 @@ const xPadding = computed(() => {
   const widths = labels.value.map((label) => label.length * avgCharacterLength)
   const maxWidth = Math.max(...widths)
   // Space needed for the longest name, but at most 200
-  console.log(maxWidth)
   return Math.min(200, maxWidth)
 })
 
@@ -123,7 +122,13 @@ const graphOptions = computed(() => {
         color: graphColors.ticksAndFont.value
       },
       tooltip: {
-        enabled: false
+        enabled: true,
+        displayColors: false,
+        callbacks: {
+          title: () => {
+            return ''
+          }
+        }
       }
     }
   }

From 1de985505c139602f36ee232be69c5062bc6e168 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Mon, 2 Oct 2023 13:04:58 +0200
Subject: [PATCH 08/22] fix short names

---
 report-viewer/src/components/ClusterGraph.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
index 1ff485b32..4b6070c27 100644
--- a/report-viewer/src/components/ClusterGraph.vue
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -91,8 +91,9 @@ const xPadding = computed(() => {
 
   const widths = labels.value.map((label) => label.length * avgCharacterLength)
   const maxWidth = Math.max(...widths)
-  // Space needed for the longest name, but at most 200
-  return Math.min(200, maxWidth)
+  console.log(maxWidth)
+  // Makes sure there is always space to display a name but the padding does not get too big
+  return Math.max(Math.min(200, maxWidth), 40)
 })
 
 const graphOptions = computed(() => {

From 1b3d678df36cb87776b7e4222a0c3a68c37343cd Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Mon, 2 Oct 2023 13:05:15 +0200
Subject: [PATCH 09/22] fix short names

---
 report-viewer/src/components/ClusterGraph.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
index 4b6070c27..fcb0029d1 100644
--- a/report-viewer/src/components/ClusterGraph.vue
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -91,7 +91,6 @@ const xPadding = computed(() => {
 
   const widths = labels.value.map((label) => label.length * avgCharacterLength)
   const maxWidth = Math.max(...widths)
-  console.log(maxWidth)
   // Makes sure there is always space to display a name but the padding does not get too big
   return Math.max(Math.min(200, maxWidth), 40)
 })

From 85c5764bce2eaa5f0ba587544b5b68d5bdd2a3b3 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Mon, 2 Oct 2023 13:14:51 +0200
Subject: [PATCH 10/22] add tooltips

---
 report-viewer/src/views/ClusterView.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/report-viewer/src/views/ClusterView.vue b/report-viewer/src/views/ClusterView.vue
index 693743344..c74e0b6b4 100644
--- a/report-viewer/src/views/ClusterView.vue
+++ b/report-viewer/src/views/ClusterView.vue
@@ -14,7 +14,7 @@
     <div class="relative bottom-0 left-0 right-0 flex flex-grow justify-between space-x-5 p-5 pt-5">
       <Container class="flex max-h-0 min-h-full flex-1 flex-col overflow-hidden">
         <OptionsSelectorComponent
-          :labels="['Graph', 'Radar']"
+          :labels="clusterVisualizationOptions"
           @selectionChanged="
             (index) => (selectedClusterVisualization = index == 0 ? 'Graph' : 'Radar')
           "
@@ -68,6 +68,17 @@ const props = defineProps({
 const comparisons = [] as Array<ComparisonListElement>
 const clusterMemberList = new Map() as ClusterListElementMember
 const selectedClusterVisualization: Ref<'Graph' | 'Radar'> = ref('Graph')
+const clusterVisualizationOptions = [
+  {
+    displayValue: 'Graph',
+    tooltip: 'A graph having the average similarity between two submissions as the edges.'
+  },
+  {
+    displayValue: 'Radar',
+    tooltip:
+      'A radar chart showing the he other submissions in the cluster, relative one submission.'
+  }
+]
 const usedMetric = MetricType.AVERAGE
 
 function getComparisonFor(id1: string, id2: string) {

From 2c3bb5b33bf36136c6da3e4feb31c243f518d081 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sun, 26 Nov 2023 15:36:32 +0100
Subject: [PATCH 11/22] hide anonymized submissions in graph

---
 report-viewer/src/components/ClusterGraph.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
index fcb0029d1..1e3166dcd 100644
--- a/report-viewer/src/components/ClusterGraph.vue
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -32,7 +32,9 @@ Chart.register(GraphChart)
 
 const keys = computed(() => Array.from(props.cluster.members.keys()))
 const labels = computed(() =>
-  Array.from(keys.value).map((m) => store().submissionDisplayName(m) ?? m)
+  Array.from(keys.value).map((m) =>
+    store().state.anonymous.has(m) ? 'Hidden' : store().submissionDisplayName(m) ?? m
+  )
 )
 const edges = computed(() => {
   const edges: { source: number; target: number }[] = []
@@ -87,7 +89,7 @@ const graphData = computed(() => {
 
 const yPadding = 40
 const xPadding = computed(() => {
-  const avgCharacterLength = 8
+  const avgCharacterLength = 9
 
   const widths = labels.value.map((label) => label.length * avgCharacterLength)
   const maxWidth = Math.max(...widths)

From 7783e81d1aeafdf93d86369e56e735eeb9e4ec07 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Tue, 28 Nov 2023 18:05:41 +0100
Subject: [PATCH 12/22] remove magic math

---
 report-viewer/src/components/ClusterGraph.vue | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
index 1e3166dcd..d8a0c3f31 100644
--- a/report-viewer/src/components/ClusterGraph.vue
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -74,8 +74,8 @@ const graphData = computed(() => {
         pointBorderColor: graphColors.ticksAndFont.value,
         pointHoverBorderColor: graphColors.ticksAndFont.value,
         data: Array.from(keys.value).map((_, index) => ({
-          x: Math.cos((2 * Math.PI * index) / keys.value.length) + 1,
-          y: Math.sin((2 * Math.PI * index) / keys.value.length) + 1
+          x: calculateXPosition(index),
+          y: calculateYPosition(index)
         })),
         edges: edges.value,
         edgeLineBorderColor: (ctx: any) =>
@@ -119,7 +119,7 @@ const graphOptions = computed(() => {
         formatter: (value: any, ctx: any) => {
           return labels.value[ctx.dataIndex]
         },
-        align: (ctx: any) => (-360 * ctx.dataIndex) / keys.value.length,
+        align: (ctx: any) => degreeAroundCircle(ctx.dataIndex),
         offset: 8,
         color: graphColors.ticksAndFont.value
       },
@@ -159,6 +159,26 @@ function drawGraph() {
   loaded.value = true
 }
 
+/**
+ * Calculates the x position of a key in the graph [0, 2]
+ * @param index The index of the key in the keys array
+ */
+function calculateXPosition(index: number) {
+  return Math.cos((2 * Math.PI * index) / keys.value.length) + 1
+}
+
+/**
+ * Calculates the y position of a key in the graph [0, 2]
+ * @param index The index of the key in the keys array
+ */
+function calculateYPosition(index: number) {
+  return Math.sin((2 * Math.PI * index) / keys.value.length) + 1
+}
+
+function degreeAroundCircle(index: number) {
+  return (-360 * index) / keys.value.length
+}
+
 onMounted(() => {
   drawGraph()
 })

From 34d6d280f4c8f4d40bb8fa2fef699e3640a9cad3 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Tue, 28 Nov 2023 18:11:18 +0100
Subject: [PATCH 13/22] remove transparent background of node

---
 report-viewer/src/components/ClusterGraph.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
index d8a0c3f31..acfdc2fcf 100644
--- a/report-viewer/src/components/ClusterGraph.vue
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -69,8 +69,8 @@ const graphData = computed(() => {
       {
         pointRadius: 10,
         pointHoverRadius: 10,
-        pointBackgroundColor: graphColors.contentFill,
-        pointHoverBackgroundColor: graphColors.contentFill,
+        pointBackgroundColor: graphColors.pointFill,
+        pointHoverBackgroundColor: graphColors.pointFill,
         pointBorderColor: graphColors.ticksAndFont.value,
         pointHoverBorderColor: graphColors.ticksAndFont.value,
         data: Array.from(keys.value).map((_, index) => ({

From f39f0d48324538a0aa5291cf72167921d238ea9b Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Tue, 28 Nov 2023 18:22:12 +0100
Subject: [PATCH 14/22] clamp line weights

---
 report-viewer/src/components/ClusterGraph.vue | 39 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
index acfdc2fcf..b075d8723 100644
--- a/report-viewer/src/components/ClusterGraph.vue
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -62,6 +62,41 @@ function getSimilarityFromKeyIndex(firstIndex: number, secondIndex: number) {
   return match.similarity
 }
 
+const minimumSimilarity = computed(() => {
+  let minimumSimilarity = Infinity
+  props.cluster.members.forEach((member) => {
+    member.forEach((match) => {
+      if (match.similarity < minimumSimilarity) {
+        minimumSimilarity = match.similarity
+      }
+    })
+  })
+  return minimumSimilarity
+})
+
+const maximumSimilarity = computed(() => {
+  let maximumSimilarity = 0
+  props.cluster.members.forEach((member) => {
+    member.forEach((match) => {
+      if (match.similarity > maximumSimilarity) {
+        maximumSimilarity = match.similarity
+      }
+    })
+  })
+  return maximumSimilarity
+})
+
+function getClampedSimilarityFromKeyIndex(firstIndex: number, secondIndex: number) {
+  const similarity = getSimilarityFromKeyIndex(firstIndex, secondIndex)
+  return (
+    (similarity - minimumSimilarity.value) / (maximumSimilarity.value - minimumSimilarity.value)
+  )
+}
+
+function getEdgeAlphaFromKeyIndex(firstIndex: number, secondIndex: number) {
+  return getClampedSimilarityFromKeyIndex(firstIndex, secondIndex) * 0.7 + 0.3
+}
+
 const graphData = computed(() => {
   return {
     labels: labels.value,
@@ -79,9 +114,9 @@ const graphData = computed(() => {
         })),
         edges: edges.value,
         edgeLineBorderColor: (ctx: any) =>
-          graphColors.contentFillAlpha(getSimilarityFromKeyIndex(ctx.raw.source, ctx.raw.target)),
+          graphColors.contentFillAlpha(getEdgeAlphaFromKeyIndex(ctx.raw.source, ctx.raw.target)),
         edgeLineBorderWidth: (ctx: any) =>
-          5 * getSimilarityFromKeyIndex(ctx.raw.source, ctx.raw.target) + 1
+          5 * getClampedSimilarityFromKeyIndex(ctx.raw.source, ctx.raw.target) + 1
       }
     ]
   }

From 7c83ebe6862ede5f8dc13871e3d2a438609ddfbc Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Tue, 28 Nov 2023 18:54:05 +0100
Subject: [PATCH 15/22] dashed lines for not included comparisons

---
 report-viewer/src/components/ClusterGraph.vue | 66 ++++++++++++++++---
 report-viewer/src/utils/ColorUtils.ts         |  4 ++
 2 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
index b075d8723..eeefb2c01 100644
--- a/report-viewer/src/components/ClusterGraph.vue
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -1,6 +1,14 @@
 <template>
-  <div>
+  <div class="space-y-8">
     <canvas ref="graphCanvas"></canvas>
+    <div
+      v-if="!allComparisonsPresent"
+      class="flex text-xs font-bold text-gray-500 dark:text-gray-400"
+    >
+      Not all comparisons of this cluster are present. These comparisons are indicated by the dashed
+      lines. <br />
+      To include more comparisons, increase the number of increased comparisons in the CLI.
+    </div>
     <div v-show="!loaded">Could not display graph</div>
   </div>
 </template>
@@ -38,10 +46,10 @@ const labels = computed(() =>
 )
 const edges = computed(() => {
   const edges: { source: number; target: number }[] = []
-  props.cluster.members.forEach((member, key) => {
-    member.forEach((match) => {
-      const firstIndex = keys.value.indexOf(key)
-      const secondIndex = keys.value.indexOf(match.matchedWith)
+  props.cluster.members.forEach((member1, key1) => {
+    props.cluster.members.forEach((member2, key2) => {
+      const firstIndex = keys.value.indexOf(key1)
+      const secondIndex = keys.value.indexOf(key2)
       if (firstIndex < secondIndex) {
         edges.push({ source: firstIndex, target: secondIndex })
       }
@@ -62,6 +70,16 @@ function getSimilarityFromKeyIndex(firstIndex: number, secondIndex: number) {
   return match.similarity
 }
 
+const allComparisonsPresent = computed(() => {
+  let allComparisonsPresent = true
+  props.cluster.members.forEach((member) => {
+    if (member.length != props.cluster.members.size - 1) {
+      allComparisonsPresent = false
+    }
+  })
+  return allComparisonsPresent
+})
+
 const minimumSimilarity = computed(() => {
   let minimumSimilarity = Infinity
   props.cluster.members.forEach((member) => {
@@ -88,15 +106,46 @@ const maximumSimilarity = computed(() => {
 
 function getClampedSimilarityFromKeyIndex(firstIndex: number, secondIndex: number) {
   const similarity = getSimilarityFromKeyIndex(firstIndex, secondIndex)
+  if (similarity == 0) {
+    return 0
+  }
   return (
     (similarity - minimumSimilarity.value) / (maximumSimilarity.value - minimumSimilarity.value)
   )
 }
 
 function getEdgeAlphaFromKeyIndex(firstIndex: number, secondIndex: number) {
+  const similarity = getSimilarityFromKeyIndex(firstIndex, secondIndex)
+  if (similarity == 0) {
+    return 1
+  }
   return getClampedSimilarityFromKeyIndex(firstIndex, secondIndex) * 0.7 + 0.3
 }
 
+function getEdgeWidth(firstIndex: number, secondIndex: number) {
+  const similarity = getSimilarityFromKeyIndex(firstIndex, secondIndex)
+  if (similarity == 0) {
+    return 0.5
+  }
+  return getClampedSimilarityFromKeyIndex(firstIndex, secondIndex) * 5 + 1
+}
+
+function getEdgeDashStyle(firstIndex: number, secondIndex: number) {
+  const similarity = getSimilarityFromKeyIndex(firstIndex, secondIndex)
+  if (similarity == 0) {
+    return [5, 8]
+  }
+  return []
+}
+
+function getEdgeColor(firstIndex: number, secondIndex: number) {
+  const similarity = getSimilarityFromKeyIndex(firstIndex, secondIndex)
+  if (similarity == 0) {
+    return graphColors.additionalLine.value
+  }
+  return graphColors.contentFillAlpha(getEdgeAlphaFromKeyIndex(firstIndex, secondIndex))
+}
+
 const graphData = computed(() => {
   return {
     labels: labels.value,
@@ -113,10 +162,9 @@ const graphData = computed(() => {
           y: calculateYPosition(index)
         })),
         edges: edges.value,
-        edgeLineBorderColor: (ctx: any) =>
-          graphColors.contentFillAlpha(getEdgeAlphaFromKeyIndex(ctx.raw.source, ctx.raw.target)),
-        edgeLineBorderWidth: (ctx: any) =>
-          5 * getClampedSimilarityFromKeyIndex(ctx.raw.source, ctx.raw.target) + 1
+        edgeLineBorderColor: (ctx: any) => getEdgeColor(ctx.raw.source, ctx.raw.target),
+        edgeLineBorderWidth: (ctx: any) => getEdgeWidth(ctx.raw.source, ctx.raw.target),
+        edgeLineBorderDash: (ctx: any) => getEdgeDashStyle(ctx.raw.source, ctx.raw.target)
       }
     ]
   }
diff --git a/report-viewer/src/utils/ColorUtils.ts b/report-viewer/src/utils/ColorUtils.ts
index c59da18c5..24c72ca33 100644
--- a/report-viewer/src/utils/ColorUtils.ts
+++ b/report-viewer/src/utils/ColorUtils.ts
@@ -74,6 +74,10 @@ const graphColors = {
   contentFill: `rgba(${graphRGB.red}, ${graphRGB.green}, ${graphRGB.blue}, 0.5)`,
   contentBorder: 'rgb(127, 15, 24)',
   pointFill: `rgba(${graphRGB.red}, ${graphRGB.green}, ${graphRGB.blue}, 1)`,
+  additionalLine: computed(() => {
+    const alpha = 0.2
+    return store().uiState.useDarkMode ? `rgba(200, 200, 200, ${alpha})` : `rgba(0, 0, 0, ${alpha})`
+  }),
   contentFillAlpha(alpha: number) {
     return `rgba(${graphRGB.red}, ${graphRGB.green}, ${graphRGB.blue}, ${alpha})`
   }

From ad2baeb511a58b53f422c8e1f55a25e5a8b20283 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Wed, 29 Nov 2023 15:38:53 +0100
Subject: [PATCH 16/22] highlight row according to hovered edge

---
 report-viewer/src/components/ClusterGraph.vue | 105 ++++++++++++++++--
 .../src/components/ComparisonsTable.vue       |  19 +++-
 report-viewer/src/views/ClusterView.vue       |   9 +-
 3 files changed, 121 insertions(+), 12 deletions(-)

diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
index eeefb2c01..d3c65f521 100644
--- a/report-viewer/src/components/ClusterGraph.vue
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -1,14 +1,20 @@
 <template>
-  <div class="space-y-8">
-    <canvas ref="graphCanvas"></canvas>
-    <div
-      v-if="!allComparisonsPresent"
-      class="flex text-xs font-bold text-gray-500 dark:text-gray-400"
-    >
-      Not all comparisons of this cluster are present. These comparisons are indicated by the dashed
-      lines. <br />
-      To include more comparisons, increase the number of increased comparisons in the CLI.
+  <div>
+    <div>
+      <canvas ref="graphCanvas"></canvas>
+      <div
+        v-if="!allComparisonsPresent"
+        class="mt-8 text-xs font-bold text-gray-500 dark:text-gray-400"
+      >
+        <p>Hover over an edge to highlight it in the table.</p>
+        <p class="mt-2">
+          Not all comparisons of this cluster are present. These comparisons are indicated by the
+          dashed lines. <br />
+          To include more comparisons, increase the number of increased comparisons in the CLI.
+        </p>
+      </div>
     </div>
+
     <div v-show="!loaded">Could not display graph</div>
   </div>
 </template>
@@ -29,6 +35,10 @@ const props = defineProps({
   }
 })
 
+const emit = defineEmits<{
+  (event: 'lineHovered', value: { firstId: string; secondId: string } | null): void
+}>()
+
 const graphCanvas: Ref<HTMLCanvasElement | null> = ref(null)
 const loaded = ref(false)
 
@@ -58,6 +68,60 @@ const edges = computed(() => {
   return edges
 })
 
+type HoverableEdge = {
+  sourceId: string
+  targetId: string
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+const minHoverDistance = 0.02
+
+const hoverableEdges = computed(() => {
+  const edges: HoverableEdge[] = []
+  props.cluster.members.forEach((member, key) => {
+    member.forEach((match) => {
+      const firstIndex = keys.value.indexOf(key)
+      const secondIndex = keys.value.indexOf(match.matchedWith)
+      if (firstIndex == -1 || secondIndex == -1) {
+        console.log(`Could not find index for ${key} or ${match.matchedWith}`)
+      }
+      if (firstIndex < secondIndex) {
+        edges.push({
+          sourceId: key,
+          targetId: match.matchedWith,
+          x1: calculateXPosition(firstIndex),
+          y1: calculateYPosition(firstIndex),
+          x2: calculateXPosition(secondIndex),
+          y2: calculateYPosition(secondIndex)
+        })
+      }
+    })
+  })
+  return edges
+})
+
+function distanceToEdge(edge: HoverableEdge, p: { x: number; y: number }) {
+  const numerator = (edge.x2 - edge.x1) * (edge.y1 - p.y) - (edge.x1 - p.x) * (edge.y2 - edge.y1)
+  const denominator = Math.sqrt(Math.pow(edge.x2 - edge.x1, 2) + Math.pow(edge.y2 - edge.y1, 2))
+  return Math.abs(numerator / denominator)
+}
+
+function getClosestEdge(p: { x: number; y: number }) {
+  let closestEdge = { sourceId: '', targetId: '', x1: -1, y1: -1, x2: -1, y2: -1 }
+  let closestDistance = Infinity
+  hoverableEdges.value.forEach((edge) => {
+    const distance = distanceToEdge(edge, p)
+    if (distance < closestDistance) {
+      closestDistance = distance
+      closestEdge = edge
+    }
+  })
+  return { ...closestEdge, d: closestDistance }
+}
+
 function getSimilarityFromKeyIndex(firstIndex: number, secondIndex: number) {
   const firstSubmission = props.cluster.members.get(keys.value[firstIndex])
   if (!firstSubmission) {
@@ -190,6 +254,29 @@ const graphOptions = computed(() => {
         right: xPadding.value
       }
     },
+    onHover: (event: any, elements: any) => {
+      if (!event) {
+        emit('lineHovered', null)
+        return
+      }
+      if (elements.length > 0) {
+        // Hovering over a node
+        emit('lineHovered', null)
+      } else if (chart.value != null) {
+        const closestEdge = getClosestEdge({
+          x: (chart.value as Chart).scales.x.getValueForPixel(event.x) ?? 0,
+          y: (chart.value as Chart).scales.y.getValueForPixel(event.y) ?? 0
+        })
+        if (closestEdge.d > minHoverDistance) {
+          emit('lineHovered', null)
+          return
+        }
+        emit('lineHovered', {
+          firstId: closestEdge.sourceId,
+          secondId: closestEdge.targetId
+        })
+      }
+    },
     animation: false as false,
     plugins: {
       legend: { display: false },
diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index c22f40f70..7eaa8624f 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -57,7 +57,8 @@
             <div
               class="tableRow"
               :class="{
-                'bg-container-secondary-light dark:bg-container-secondary-dark': item.id % 2 == 1
+                'bg-container-secondary-light dark:bg-container-secondary-dark': item.id % 2 == 1,
+                '!bg-accent !bg-opacity-30 ': highlightRow(item)
               }"
             >
               <RouterLink
@@ -151,7 +152,7 @@
 <script setup lang="ts">
 import type { Cluster } from '@/model/Cluster'
 import type { ComparisonListElement } from '@/model/ComparisonListElement'
-import { toRef } from 'vue'
+import { toRef, type PropType } from 'vue'
 import { store } from '@/stores/store'
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -171,6 +172,10 @@ const props = defineProps({
   clusters: {
     type: Array<Cluster>,
     required: false
+  },
+  highlightedRowIds: {
+    type: Object as PropType<{ firstId: string; secondId: string }>,
+    required: false
   }
 })
 
@@ -213,6 +218,16 @@ function getClusterIndexesFor(id1: string, id2: string): Array<number> {
   })
   return indexes
 }
+
+function highlightRow(item: ComparisonListElement) {
+  return (
+    props.highlightedRowIds != undefined &&
+    ((item.firstSubmissionId == props.highlightedRowIds.firstId &&
+      item.secondSubmissionId == props.highlightedRowIds.secondId) ||
+      (item.firstSubmissionId == props.highlightedRowIds.secondId &&
+        item.secondSubmissionId == props.highlightedRowIds.firstId))
+  )
+}
 </script>
 
 <style scoped lang="postcss">
diff --git a/report-viewer/src/views/ClusterView.vue b/report-viewer/src/views/ClusterView.vue
index 11ba35ce0..1efdcb315 100644
--- a/report-viewer/src/views/ClusterView.vue
+++ b/report-viewer/src/views/ClusterView.vue
@@ -30,11 +30,16 @@
           v-if="selectedClusterVisualization == 'Graph'"
           :cluster="clusterListElement"
           class="flex-grow"
+          @line-hovered="(value) => (highlightedElement = value)"
         />
       </Container>
       <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" />
+        <ComparisonsTable
+          :topComparisons="comparisons"
+          class="min-h-0 flex-1"
+          :highlighted-row-ids="highlightedElement ?? undefined"
+        />
       </Container>
     </div>
   </div>
@@ -127,6 +132,8 @@ const clusterListElement: Ref<ClusterListElement> = computed(() => {
   }
 })
 
+const highlightedElement: Ref<{ firstId: string; secondId: string } | null> = ref(null)
+
 onErrorCaptured((error) => {
   redirectOnError(error, 'Error displaying cluster:\n', 'OverviewView', 'Back to overview')
   return false

From f8de0deb3e5dcb1e7386430e1847f08b852f4c54 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Thu, 30 Nov 2023 11:52:34 +0100
Subject: [PATCH 17/22] fix clamp for equal min and max similarity

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

diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
index d3c65f521..2bb4f3155 100644
--- a/report-viewer/src/components/ClusterGraph.vue
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -173,6 +173,9 @@ function getClampedSimilarityFromKeyIndex(firstIndex: number, secondIndex: numbe
   if (similarity == 0) {
     return 0
   }
+  if (minimumSimilarity.value == maximumSimilarity.value) {
+    return 1
+  }
   return (
     (similarity - minimumSimilarity.value) / (maximumSimilarity.value - minimumSimilarity.value)
   )

From 68dab100ad536cceeb6eaa8057d41b3e7ce8f231 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Thu, 30 Nov 2023 11:57:14 +0100
Subject: [PATCH 18/22] darker lines

---
 report-viewer/src/utils/ColorUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/report-viewer/src/utils/ColorUtils.ts b/report-viewer/src/utils/ColorUtils.ts
index e44d847b3..f3f3801da 100644
--- a/report-viewer/src/utils/ColorUtils.ts
+++ b/report-viewer/src/utils/ColorUtils.ts
@@ -97,7 +97,7 @@ const graphColors = {
   contentBorder: 'rgb(127, 15, 24)',
   pointFill: `rgba(${graphRGB.red}, ${graphRGB.green}, ${graphRGB.blue}, 1)`,
   additionalLine: computed(() => {
-    const alpha = 0.2
+    const alpha = 0.3
     return store().uiState.useDarkMode ? `rgba(200, 200, 200, ${alpha})` : `rgba(0, 0, 0, ${alpha})`
   }),
   contentFillAlpha(alpha: number) {

From da5973f91556b28706721d37c676d614ded393d6 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Thu, 30 Nov 2023 12:17:07 +0100
Subject: [PATCH 19/22] scroll to element

---
 .../src/components/ComparisonsTable.vue       | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index 7eaa8624f..cf1741aa3 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -40,7 +40,12 @@
 
     <!-- Body -->
     <div class="flex flex-grow flex-col overflow-hidden">
-      <DynamicScroller v-if="topComparisons.length > 0" :items="comparisonList" :min-item-size="48">
+      <DynamicScroller
+        v-if="topComparisons.length > 0"
+        :items="comparisonList"
+        :min-item-size="48"
+        ref="dynamicScroller"
+      >
         <template v-slot="{ item, index, active }">
           <DynamicScrollerItem
             :item="item"
@@ -58,7 +63,7 @@
               class="tableRow"
               :class="{
                 'bg-container-secondary-light dark:bg-container-secondary-dark': item.id % 2 == 1,
-                '!bg-accent !bg-opacity-30 ': highlightRow(item)
+                '!bg-accent !bg-opacity-30 ': isHighlightedRow(item)
               }"
             >
               <RouterLink
@@ -152,7 +157,7 @@
 <script setup lang="ts">
 import type { Cluster } from '@/model/Cluster'
 import type { ComparisonListElement } from '@/model/ComparisonListElement'
-import { toRef, type PropType } from 'vue'
+import { toRef, type PropType, watch, computed, ref, type Ref } from 'vue'
 import { store } from '@/stores/store'
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -219,7 +224,7 @@ function getClusterIndexesFor(id1: string, id2: string): Array<number> {
   return indexes
 }
 
-function highlightRow(item: ComparisonListElement) {
+function isHighlightedRow(item: ComparisonListElement) {
   return (
     props.highlightedRowIds != undefined &&
     ((item.firstSubmissionId == props.highlightedRowIds.firstId &&
@@ -228,6 +233,20 @@ function highlightRow(item: ComparisonListElement) {
         item.secondSubmissionId == props.highlightedRowIds.firstId))
   )
 }
+
+const dynamicScroller: Ref<any | null> = ref(null)
+
+watch(
+  computed(() => props.highlightedRowIds),
+  (newValue, oldValue) => {
+    if (
+      newValue != undefined &&
+      (newValue?.firstId != oldValue?.firstId || newValue?.secondId != oldValue?.secondId)
+    ) {
+      dynamicScroller.value?.scrollToItem(comparisonList.value.findIndex(isHighlightedRow))
+    }
+  }
+)
 </script>
 
 <style scoped lang="postcss">

From 9fcba517480c8de7130e7c62ccd2e7c689bfec88 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Thu, 30 Nov 2023 12:40:44 +0100
Subject: [PATCH 20/22] fix stay selected bug

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

diff --git a/report-viewer/src/components/ClusterGraph.vue b/report-viewer/src/components/ClusterGraph.vue
index 2bb4f3155..8d7f73c7b 100644
--- a/report-viewer/src/components/ClusterGraph.vue
+++ b/report-viewer/src/components/ClusterGraph.vue
@@ -327,7 +327,18 @@ function drawGraph() {
   chart.value = new Chart(ctx, {
     type: 'graph',
     data: graphData.value,
-    options: graphOptions.value
+    options: graphOptions.value,
+    plugins: [
+      {
+        id: 'onMouseOut',
+        beforeEvent(chart, args) {
+          const event = args.event
+          if (event.type === 'mouseout') {
+            emit('lineHovered', null)
+          }
+        }
+      }
+    ]
   })
   loaded.value = true
 }

From b3591202a953214cd94a9efb4038e4a9a63f9efa Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Wed, 6 Dec 2023 09:30:50 +0100
Subject: [PATCH 21/22] darker lines

---
 report-viewer/src/utils/ColorUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/report-viewer/src/utils/ColorUtils.ts b/report-viewer/src/utils/ColorUtils.ts
index f3f3801da..641801b0d 100644
--- a/report-viewer/src/utils/ColorUtils.ts
+++ b/report-viewer/src/utils/ColorUtils.ts
@@ -98,7 +98,7 @@ const graphColors = {
   pointFill: `rgba(${graphRGB.red}, ${graphRGB.green}, ${graphRGB.blue}, 1)`,
   additionalLine: computed(() => {
     const alpha = 0.3
-    return store().uiState.useDarkMode ? `rgba(200, 200, 200, ${alpha})` : `rgba(0, 0, 0, ${alpha})`
+    return store().uiState.useDarkMode ? `rgba(200, 200, 200, 0.3)` : `rgba(0, 0, 0, 0.5)`
   }),
   contentFillAlpha(alpha: number) {
     return `rgba(${graphRGB.red}, ${graphRGB.green}, ${graphRGB.blue}, ${alpha})`

From dd2e58cbfc7a34169c3b8d43ada285180798e933 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Thu, 7 Dec 2023 13:05:04 +0100
Subject: [PATCH 22/22] fix lint issue

---
 report-viewer/src/utils/ColorUtils.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/report-viewer/src/utils/ColorUtils.ts b/report-viewer/src/utils/ColorUtils.ts
index 641801b0d..ac5cdabe8 100644
--- a/report-viewer/src/utils/ColorUtils.ts
+++ b/report-viewer/src/utils/ColorUtils.ts
@@ -97,7 +97,6 @@ const graphColors = {
   contentBorder: 'rgb(127, 15, 24)',
   pointFill: `rgba(${graphRGB.red}, ${graphRGB.green}, ${graphRGB.blue}, 1)`,
   additionalLine: computed(() => {
-    const alpha = 0.3
     return store().uiState.useDarkMode ? `rgba(200, 200, 200, 0.3)` : `rgba(0, 0, 0, 0.5)`
   }),
   contentFillAlpha(alpha: number) {