new color generation

report-viewer/src/model/Match.ts

@@ -7,15 +7,15 @@
  * @property startInSecond - Starting line of the match in the second file.
  * @property endInSecond - Ending line of the match in the second file.
  * @property tokens - Number of tokens in the match.
- * @property color - Color of the match.
+ * @property colorIndex - Index of the color to use for the match.
  */
-export type Match = {
+export interface Match {
   firstFile: string
   secondFile: string
   startInFirst: number
   endInFirst: number
   startInSecond: number
   endInSecond: number
   tokens: number
-  color: string
+  colorIndex?: number
 }

report-viewer/src/model/factories/ComparisonFactory.ts

@@ -1,7 +1,7 @@
 import { Comparison } from '../Comparison'
 import type { Match } from '../Match'
 import { store } from '@/stores/store'
-import { generateColors } from '@/utils/ColorUtils'
+import { getMatchColorCount } from '@/utils/ColorUtils'
 import slash from 'slash'
 import { BaseFactory } from './BaseFactory'
 import { MetricType } from '../MetricType'
@@ -36,19 +36,15 @@ export class ComparisonFactory extends BaseFactory {
 
     const matches = json.matches as Array<Record<string, unknown>>
 
-    const matchSaturation = 0.8
-    const matchLightness = 0.5
-    const matchAlpha = 0.3
-    const colors = generateColors(matches.length, matchSaturation, matchLightness, matchAlpha)
-    const coloredMatches = matches.map((match, index) => this.mapMatch(match, colors[index]))
+    const unColredMatches = matches.map((match) => this.getMatch(match))
 
     return new Comparison(
       firstSubmissionId,
       secondSubmissionId,
       this.extractSimilarities(json),
       filesOfFirstSubmission,
       filesOfSecondSubmission,
-      coloredMatches
+      this.colorMatches(unColredMatches)
     )
   }
 
@@ -102,16 +98,55 @@ export class ComparisonFactory extends BaseFactory {
     }
   }
 
-  private static mapMatch(match: Record<string, unknown>, color: string): Match {
+  private static getMatch(match: Record<string, unknown>): Match {
     return {
       firstFile: slash(match.file1 as string),
       secondFile: slash(match.file2 as string),
       startInFirst: match.start1 as number,
       endInFirst: match.end1 as number,
       startInSecond: match.start2 as number,
       endInSecond: match.end2 as number,
-      tokens: match.tokens as number,
-      color: color
+      tokens: match.tokens as number
     }
   }
+
+  private static colorMatches(matches: Match[]): Match[] {
+    const maxColorCount = getMatchColorCount()
+    let currentColorIndex = 0
+    const matchesFirst = Array.from(matches)
+      .sort((a, b) => a.startInFirst - b.startInFirst)
+      .sort((a, b) => (a.firstFile > b.firstFile ? 1 : -1))
+    const matchesSecond = Array.from(matches)
+      .sort((a, b) => a.startInSecond - b.startInSecond)
+      .sort((a, b) => (a.secondFile > b.secondFile ? 1 : -1))
+    const sortedSize = Array.from(matches).sort((a, b) => a.tokens - b.tokens)
+
+    function canColor(matchList: Match[], index: number) {
+      return (
+        (index === 0 || matchList[index - 1].colorIndex !== currentColorIndex) &&
+        (index === matchList.length - 1 || matchList[index + 1].colorIndex !== currentColorIndex)
+      )
+    }
+
+    for (let i = 0; i < matches.length; i++) {
+      const firstIndex = matchesFirst.findIndex((match) => match === matches[i])
+      const secondIndex = matchesSecond.findIndex((match) => match === matches[i])
+      const sortedIndex = sortedSize.findIndex((match) => match === matches[i])
+      const startCounter = currentColorIndex
+      while (
+        !canColor(matchesFirst, firstIndex) ||
+        !canColor(matchesSecond, secondIndex) ||
+        !canColor(sortedSize, sortedIndex)
+      ) {
+        currentColorIndex = (currentColorIndex + 1) % maxColorCount
+
+        if (currentColorIndex == startCounter) {
+          throw 'No solution'
+        }
+      }
+      matches[i].colorIndex = currentColorIndex
+      currentColorIndex = (currentColorIndex + 1) % maxColorCount
+    }
+    return sortedSize
+  }
 }

report-viewer/src/utils/ColorUtils.ts

@@ -59,6 +59,16 @@ function generateColorsForInterval(
   return colors
 }
 
+const matchColors: { red: number; green: number; blue: number }[] = []
+
+function getMatchColorCount() {
+  return matchColors.length
+}
+
+function getMatchColor(index: number, alpha: number) {
+  return `rgba(${matchColors[index].red}, ${matchColors[index].green}, ${matchColors[index].blue}, ${alpha})`
+}
+
 const graphColors = {
   ticksAndFont: computed(() => {
     return store().uiState.useDarkMode ? '#ffffff' : '#000000'
@@ -71,4 +81,4 @@ const graphColors = {
   pointFill: 'rgba(190, 22, 34, 1)'
 }
 
-export { generateColors, graphColors }
+export { generateColors, graphColors, getMatchColorCount, getMatchColor }