adjust cluster icons

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 (

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 }