From 43eb2bad85aa000e797d13809e146a67d7efe2d3 Mon Sep 17 00:00:00 2001
From: Alexander Vogt <alexander_vogt@outlook.de>
Date: Tue, 30 Jul 2024 10:43:40 +0200
Subject: [PATCH 1/5] make colors lighter

---
 report-viewer/src/components/ContainerComponent.vue |  2 +-
 report-viewer/tailwind.config.js                    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/report-viewer/src/components/ContainerComponent.vue b/report-viewer/src/components/ContainerComponent.vue
index 0b93fc7c1..c479b487b 100644
--- a/report-viewer/src/components/ContainerComponent.vue
+++ b/report-viewer/src/components/ContainerComponent.vue
@@ -3,7 +3,7 @@
 -->
 <template>
   <div
-    class="box-border rounded-md border-1 border-container-border-light bg-container-light p-2 shadow dark:border-container-border-dark dark:bg-container-dark dark:shadow-black print:border-2 print:shadow-none"
+    class="box-border rounded-md border-1 border-container-border-light bg-container-light p-2 shadow dark:border-container-border-dark dark:bg-container-dark print:border-2 print:shadow-none"
   >
     <slot></slot>
   </div>
diff --git a/report-viewer/tailwind.config.js b/report-viewer/tailwind.config.js
index c2128a7ae..949b37b8a 100644
--- a/report-viewer/tailwind.config.js
+++ b/report-viewer/tailwind.config.js
@@ -13,26 +13,26 @@ export default {
         },
         background: {
           light: 'hsl(0, 0%, 97%)',
-          dark: 'hsl(180, 80%, 3%)'
+          dark: 'hsl(180, 80%, 8%)'
         },
         container: {
           light: 'hsl(0, 0%, 98%)',
-          dark: 'hsl(200, 20%, 13%)',
+          dark: 'hsl(200, 20%, 15%)',
           border: {
             light: 'hsl(0, 0%, 80%)',
             dark: 'hsl(0, 0%, 25%)'
           },
           secondary: {
             light: 'hsl(0, 0%, 95%)',
-            dark: 'hsl(200, 20%, 18%)'
+            dark: 'hsl(200, 20%, 20%)'
           }
         },
         interactable: {
           light: 'hsl(0, 0%, 100%)',
-          dark: 'hsl(180, 30%, 18%)',
+          dark: 'hsl(180, 30%, 20%)',
           border: {
             light: 'hsl(0, 0%, 75%)',
-            dark: 'hsl(0, 0%, 30%)'
+            dark: 'hsl(0, 0%, 25%)'
           }
         },
         scrollbar: {

From e2cb4b864b3d12ac2a3db81bc367fa8a516c32b1 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Thu, 15 Aug 2024 14:26:21 +0200
Subject: [PATCH 2/5] desaturate colors

---
 report-viewer/tailwind.config.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/report-viewer/tailwind.config.js b/report-viewer/tailwind.config.js
index 949b37b8a..4fc25e8f1 100644
--- a/report-viewer/tailwind.config.js
+++ b/report-viewer/tailwind.config.js
@@ -13,23 +13,23 @@ export default {
         },
         background: {
           light: 'hsl(0, 0%, 97%)',
-          dark: 'hsl(180, 80%, 8%)'
+          dark: 'hsl(230, 10%, 8%)'
         },
         container: {
           light: 'hsl(0, 0%, 98%)',
-          dark: 'hsl(200, 20%, 15%)',
+          dark: 'hsl(250, 10%, 15%)',
           border: {
             light: 'hsl(0, 0%, 80%)',
             dark: 'hsl(0, 0%, 25%)'
           },
           secondary: {
             light: 'hsl(0, 0%, 95%)',
-            dark: 'hsl(200, 20%, 20%)'
+            dark: 'hsl(250, 10%, 20%)'
           }
         },
         interactable: {
           light: 'hsl(0, 0%, 100%)',
-          dark: 'hsl(180, 30%, 20%)',
+          dark: 'hsl(250, 10%, 20%)',
           border: {
             light: 'hsl(0, 0%, 75%)',
             dark: 'hsl(0, 0%, 25%)'

From 7e082dd4c76f35d6ee5a7dbe708e6c2bf934520f Mon Sep 17 00:00:00 2001
From: Alexander Vogt <alexander_vogt@outlook.de>
Date: Sat, 31 Aug 2024 19:44:50 +0200
Subject: [PATCH 3/5] adjust cluster icons

---
 .../src/components/ComparisonsTable.vue       | 20 +++++++++++--
 report-viewer/src/utils/ColorUtils.ts         | 30 ++++++-------------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index 9af99fe2c..b4bebb163 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -173,7 +173,7 @@ import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 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 { generateHues } from '@/utils/ColorUtils'
 import ToolTipComponent from './ToolTipComponent.vue'
 import { MetricType, metricToolTips } from '@/model/MetricType'
 import NameElement from './NameElement.vue'
@@ -339,10 +339,24 @@ function getClusterFor(clusterIndex: number) {
 
 const displayClusters = props.clusters != undefined
 
-let clusterIconColors = [] as Array<string>
+let clusterIconHues = [] as Array<number>
+const lightmodeSaturation = 80
+const lightmodeLightness = 50
+const lightmodeAlpha = 0.3
+const darkmodeSaturation = 90
+const darkmodeLightness = 65
+const darkmodeAlpha = 0.6
 if (props.clusters != undefined) {
-  clusterIconColors = generateColors(props.clusters.length, 0.8, 0.5, 1)
+  clusterIconHues = generateHues(props.clusters.length)
 }
+const clusterIconColors = computed(() => clusterIconHues.map((h) => {
+    return `hsla(${h}, ${
+      store().uiState.useDarkMode ? darkmodeSaturation : lightmodeSaturation
+    }%, ${
+      store().uiState.useDarkMode ? darkmodeLightness : lightmodeLightness
+    }%, ${store().uiState.useDarkMode ? darkmodeAlpha : lightmodeAlpha})`
+  })
+)
 
 function isHighlightedRow(item: ComparisonListElement) {
   return (
diff --git a/report-viewer/src/utils/ColorUtils.ts b/report-viewer/src/utils/ColorUtils.ts
index e3aa03294..0834cef1c 100644
--- a/report-viewer/src/utils/ColorUtils.ts
+++ b/report-viewer/src/utils/ColorUtils.ts
@@ -4,30 +4,21 @@ import { computed } from 'vue'
 /**
  * Generates an array of HSL-Colors
  * @param numberOfColors Number of colors to generate
- * @param saturation Saturation of the colors [0,1]
- * @param lightness Lightness of the colors [0,1]
- * @param alpha Alpha value of the colors [0,1]
  */
-function generateColors(
-  numberOfColors: number,
-  saturation: number,
-  lightness: number,
-  alpha: number
+function generateHues(
+  numberOfColors: number
 ) {
   const numberOfColorsInFirstInterval = Math.round(
     ((80 - 20) / (80 - 20 + (340 - 160))) * numberOfColors
   ) // number of colors from the first interval
   const numberOfColorsInSecondInterval = numberOfColors - numberOfColorsInFirstInterval // number of colors from the second interval
 
-  const colors: Array<string> = generateColorsForInterval(
+  const colors: Array<number> = generateColorsForInterval(
     20,
     80,
-    numberOfColorsInFirstInterval,
-    saturation,
-    lightness,
-    alpha
+    numberOfColorsInFirstInterval
   )
-  colors.push(...generateColorsForInterval(160, 340, numberOfColorsInSecondInterval, 0.8, 0.5, 0.3))
+  colors.push(...generateColorsForInterval(160, 340, numberOfColorsInSecondInterval))
   return colors
 }
 
@@ -45,18 +36,15 @@ function generateColorsForInterval(
   intervalStart: number,
   intervalEnd: number,
   numberOfColorsInInterval: number,
-  saturation: number,
-  lightness: number,
-  alpha: number
 ) {
-  const colors: Array<string> = []
+  const hues: Array<number> = []
   const interval = intervalEnd - intervalStart
   const hueDelta = Math.trunc(interval / numberOfColorsInInterval)
   for (let i = 0; i < numberOfColorsInInterval; i++) {
     const hue = intervalStart + i * hueDelta
-    colors.push(`hsla(${hue}, ${saturation * 100}%, ${lightness * 100}%, ${alpha})`)
+    hues.push(hue)
   }
-  return colors
+  return hues
 }
 
 /** This is the list of colors that are used as the background color of matches in the comparison view */
@@ -113,4 +101,4 @@ const graphColors = {
   }
 }
 
-export { generateColors, graphColors, getMatchColorCount, getMatchColor, type MatchColorIndex }
+export { generateHues, graphColors, getMatchColorCount, getMatchColor, type MatchColorIndex }

From 249a9f9bebaf8fe135c93e776ff9b848d3bc94b2 Mon Sep 17 00:00:00 2001
From: Alexander Vogt <alexander_vogt@outlook.de>
Date: Sat, 31 Aug 2024 19:48:03 +0200
Subject: [PATCH 4/5] fix prettier issues

---
 report-viewer/src/utils/ColorUtils.ts | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/report-viewer/src/utils/ColorUtils.ts b/report-viewer/src/utils/ColorUtils.ts
index 0834cef1c..bed155fc3 100644
--- a/report-viewer/src/utils/ColorUtils.ts
+++ b/report-viewer/src/utils/ColorUtils.ts
@@ -5,19 +5,13 @@ import { computed } from 'vue'
  * Generates an array of HSL-Colors
  * @param numberOfColors Number of colors to generate
  */
-function generateHues(
-  numberOfColors: number
-) {
+function generateHues(numberOfColors: number) {
   const numberOfColorsInFirstInterval = Math.round(
     ((80 - 20) / (80 - 20 + (340 - 160))) * numberOfColors
   ) // number of colors from the first interval
   const numberOfColorsInSecondInterval = numberOfColors - numberOfColorsInFirstInterval // number of colors from the second interval
 
-  const colors: Array<number> = generateColorsForInterval(
-    20,
-    80,
-    numberOfColorsInFirstInterval
-  )
+  const colors: Array<number> = generateColorsForInterval(20, 80, numberOfColorsInFirstInterval)
   colors.push(...generateColorsForInterval(160, 340, numberOfColorsInSecondInterval))
   return colors
 }
@@ -35,7 +29,7 @@ function generateHues(
 function generateColorsForInterval(
   intervalStart: number,
   intervalEnd: number,
-  numberOfColorsInInterval: number,
+  numberOfColorsInInterval: number
 ) {
   const hues: Array<number> = []
   const interval = intervalEnd - intervalStart

From 2e86af60d6b3e710c5c23eeb54678bc0c5941964 Mon Sep 17 00:00:00 2001
From: Alexander Vogt <alexander_vogt@outlook.de>
Date: Sat, 31 Aug 2024 19:50:40 +0200
Subject: [PATCH 5/5] fix prettier issues

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

diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index b4bebb163..9a79c83b4 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -349,7 +349,8 @@ const darkmodeAlpha = 0.6
 if (props.clusters != undefined) {
   clusterIconHues = generateHues(props.clusters.length)
 }
-const clusterIconColors = computed(() => clusterIconHues.map((h) => {
+const clusterIconColors = computed(() =>
+  clusterIconHues.map((h) => {
     return `hsla(${h}, ${
       store().uiState.useDarkMode ? darkmodeSaturation : lightmodeSaturation
     }%, ${