From 97d727a7bdf18e14b7039a4d1c57daeeb022e808 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Wed, 26 Jul 2023 18:27:30 +0200
Subject: [PATCH 01/20] remove line of code

---
 report-viewer/src/components/CodePanel.vue  | 68 +++++++++++----------
 report-viewer/src/components/LineOfCode.vue | 65 --------------------
 2 files changed, 36 insertions(+), 97 deletions(-)
 delete mode 100644 report-viewer/src/components/LineOfCode.vue

diff --git a/report-viewer/src/components/CodePanel.vue b/report-viewer/src/components/CodePanel.vue
index 311e6ee48..c643e2e91 100644
--- a/report-viewer/src/components/CodePanel.vue
+++ b/report-viewer/src/components/CodePanel.vue
@@ -15,38 +15,17 @@
       {{ title }}
     </div>
     <div class="mx-1 overflow-x-auto">
-      <div :class="{ hidden: !collapse }" class="w-fit min-w-full">
-        <div v-if="!isEmpty(lines)" class="flex flex-col items-start w-full p-0">
-          <div
-            class="flex flex-row w-full"
-            v-for="(line, index) in lines"
-            :id="
-              String(panelId)
-                .concat(filePath || '')
-                .concat((index + 1).toString())
-            "
-            :key="index"
-          >
-            <LineOfCode
-              class="flex-grow"
-              :color="coloringArray[index]"
-              :line-number="index + 1"
-              :text="line"
-              :visible="collapse"
-              @click="
-                $emit(
-                  'lineSelected',
-                  $event,
-                  linksArray[index].panel,
-                  linksArray[index].file,
-                  linksArray[index].line
-                )
-              "
-            />
-          </div>
-        </div>
+      <div v-if="collapse" class="w-fit min-w-full !text-xs">
+        <table v-if="!isEmpty(lines)" class="w-full">
+          <tr v-for="(line, index) in result" :key="index" class="w-full">
+            <td class="float-right pr-3">{{ index + 1 }}</td>
+            <td class="w-full" :style="{ background: coloringArray[index] }">
+              <pre v-html="line" class="hljs"></pre>
+            </td>
+          </tr>
+        </table>
         <div v-else class="flex flex-col items-start overflow-x-auto">
-          <p>Empty File</p>
+          <i>Empty File</i>
         </div>
       </div>
     </div>
@@ -56,8 +35,8 @@
 <script setup lang="ts">
 import type { MatchInSingleFile } from '@/model/MatchInSingleFile'
 import { ref, type Ref } from 'vue'
-import LineOfCode from '@/components/LineOfCode.vue'
 import Interactable from './InteractableComponent.vue'
+import hljs from 'highlight.js'
 
 const props = defineProps({
   /**
@@ -166,4 +145,29 @@ for (let i = 0; i < props.lines.length; i++) {
     linksArray.value[i] = {}
   }
 }
+
+const value = hljs.highlight(props.lines.join('\n'), { language: 'java' }).value
+const openTags: string[] = []
+const result = value
+  .replace(/(<span [^>]+>)|(<\/span>)|(\n)/g, (match) => {
+    if (match === '\n') {
+      return '</span>'.repeat(openTags.length) + '\n' + openTags.join('')
+    }
+
+    if (match === '</span>') {
+      openTags.pop()
+    } else {
+      openTags.push(match)
+    }
+
+    return match
+  })
+  .split('\n')
 </script>
+
+<style scoped>
+.hljs {
+  font-family: 'JetBrains Mono NL', monospace !important;
+  background: transparent !important;
+}
+</style>
diff --git a/report-viewer/src/components/LineOfCode.vue b/report-viewer/src/components/LineOfCode.vue
deleted file mode 100644
index 67f210042..000000000
--- a/report-viewer/src/components/LineOfCode.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<!--
-  Container which display a single line of code of a file.
--->
-<template>
-  <div :style="{ background: color }" class="flex-grow">
-    <pre :id="text" ref="lineRef" class="java m-0 p-0 float-left">{{ lineNumber }} {{ text }}</pre>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onUpdated, ref } from 'vue'
-import hljs from 'highlight.js'
-
-const props = defineProps({
-  /**
-   * Indicates whether the line is shown on screen. Used for highlighting on demand.
-   */
-  visible: {
-    type: Boolean,
-    required: true
-  },
-  text: {
-    type: String,
-    required: true
-  },
-  lineNumber: {
-    type: Number,
-    required: true
-  },
-  color: {
-    required: true,
-    type: String
-  },
-  fileIndex: {
-    type: Number
-  }
-})
-
-let highlighted = false
-const lineRef = ref(null)
-
-//Trigger highlighting when code panel is collapsed.
-onUpdated(() => {
-  if (props.visible && !highlighted && lineRef.value != null) {
-    hljs.highlightElement(lineRef.value)
-    highlighted = true
-  }
-})
-</script>
-
-<style scoped>
-pre code.hljs {
-  padding: 0 !important;
-}
-
-code.hljs {
-  padding: 0 !important;
-}
-
-.hljs {
-  background: transparent !important;
-  font-family: 'JetBrains Mono NL', monospace !important;
-  font-size: 0.75rem !important;
-}
-</style>

From a275d464ce0fbe936b95f55e3e4360b55b7fed1f Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Thu, 27 Jul 2023 17:31:22 +0200
Subject: [PATCH 02/20] rework link

---
 report-viewer/src/components/CodePanel.vue    | 135 +++++++-----------
 .../src/components/FilesContainer.vue         |  44 +++---
 report-viewer/src/components/MatchList.vue    |   2 +-
 report-viewer/src/model/MatchInSingleFile.ts  |  45 +++++-
 .../src/model/factories/ComparisonFactory.ts  |  26 +---
 report-viewer/src/views/ComparisonView.vue    |  54 ++-----
 6 files changed, 124 insertions(+), 182 deletions(-)

diff --git a/report-viewer/src/components/CodePanel.vue b/report-viewer/src/components/CodePanel.vue
index c643e2e91..00f9247f9 100644
--- a/report-viewer/src/components/CodePanel.vue
+++ b/report-viewer/src/components/CodePanel.vue
@@ -2,25 +2,29 @@
   Panel which displays a submission files with its line of code.
 -->
 <template>
-  <Interactable
-    :id="
-      panelId
-        ?.toString()
-        .concat(filePath || '')
-        .concat(fileIndex?.toString() || '-1')
-    "
-    class="!shadow mx-2"
-  >
-    <div @click="$emit('toggleCollapse')" class="text-center font-bold">
+  <Interactable class="!shadow mx-2">
+    <div @click="collapsed = !collapsed" class="text-center font-bold">
       {{ title }}
     </div>
     <div class="mx-1 overflow-x-auto">
-      <div v-if="collapse" class="w-fit min-w-full !text-xs">
+      <div v-if="!collapsed" class="w-fit min-w-full !text-xs">
         <table v-if="!isEmpty(lines)" class="w-full">
-          <tr v-for="(line, index) in result" :key="index" class="w-full">
+          <tr
+            v-for="(line, index) in result"
+            :key="index"
+            class="w-full cursor-default"
+            :class="{ 'cursor-pointer': lineMatch[index] !== null }"
+            @click="lineSelected(index + 1)"
+          >
             <td class="float-right pr-3">{{ index + 1 }}</td>
-            <td class="w-full" :style="{ background: coloringArray[index] }">
-              <pre v-html="line" class="hljs"></pre>
+            <td
+              class="w-full"
+              :style="{
+                background:
+                  lineMatch[index] !== null ? lineMatch[index]?.color : 'hsla(0, 0%, 0%, 0)'
+              }"
+            >
+              <pre v-html="line" class="hljs" ref="lineRefs"></pre>
             </td>
           </tr>
         </table>
@@ -34,28 +38,25 @@
 
 <script setup lang="ts">
 import type { MatchInSingleFile } from '@/model/MatchInSingleFile'
-import { ref, type Ref } from 'vue'
+import { ref, nextTick } from 'vue'
 import Interactable from './InteractableComponent.vue'
 import hljs from 'highlight.js'
+import type { Match } from '@/model/Match'
 
 const props = defineProps({
-  /**
-   * Path of the displayed file.
-   */
-  filePath: {
-    type: String
-  },
   /**
    * Title of the displayed file.
    */
   title: {
-    type: String
+    type: String,
+    required: true
   },
   /**
    * Index of file amongst other files in submission.
    */
   fileIndex: {
-    type: Number
+    type: Number,
+    required: true
   },
   /**
    * Code lines of the file.
@@ -70,36 +71,14 @@ const props = defineProps({
    * type: Array<MatchInSingleFile>
    */
   matches: {
-    type: Array<MatchInSingleFile>
-  },
-  /**
-   * Id of the FilesContainer. Needed for lines link generation.
-   */
-  panelId: {
-    type: Number
-  },
-  /**
-   * Indicates whether files is collapsed or not.
-   */
-  collapse: {
-    type: Boolean
+    type: Array<MatchInSingleFile>,
+    required: false
   }
 })
 
-defineEmits(['lineSelected', 'toggleCollapse'])
+const emit = defineEmits(['lineSelected'])
 
-/**
- * An object containing the color of each line in code. Keys are line numbers, values are their color.
- * Example: {
- *   ...
- *   100 : "#3333"
- *   101 : "#3333"
- *   102 : "#3333"
- *   103 : "#FFFF"
- *   ...
- * }
- */
-const coloringArray: Ref<Record<number, string>> = ref({})
+const collapsed = ref(true)
 
 /**
  * @param lines Array of lines to check.
@@ -109,43 +88,19 @@ function isEmpty(lines: string[]) {
   return lines.length === 0 || lines.every((line) => !line.trim())
 }
 
-/**
- * An object containing an object from which an id is to of the line to which this is linked is constructed.
- * Id object contains panel, file name, first line number of linked matched.
- * Example: {
- *   panel: 1,
- *   file: "Example.java",
- *   line: 121
- * }
- * Constructed ID (generateLineCodeLink from Utils.ts): 1Example.java121
- * When a line is clicked it uses this link id
- * to scroll into vie the linked line in the linked file of the other submission.
- * Key is line number, value is id of linked line.
- */
-const linksArray: Ref<Record<number, { panel?: number; file?: string; line?: number }>> = ref({})
+const lineRefs = ref<HTMLElement[]>([])
 
-// Initializing the the upper arrays.
-props.matches?.forEach((m) => {
-  for (let i = m.start; i <= m.end; i++) {
-    //assign match color to line
-    coloringArray.value[i - 1] = m.color
-    //assign link object to line.
-    linksArray.value[i - 1] = {
-      panel: m.linked_panel,
-      file: m.linked_file,
-      line: m.linked_line
-    }
-  }
-})
-
-//assign default values for all line which are not contained in matches
-for (let i = 0; i < props.lines.length; i++) {
-  if (!coloringArray.value[i]) {
-    coloringArray.value[i] = 'hsla(0, 0%, 0%, 0)'
-    linksArray.value[i] = {}
-  }
+function scrollTo(lineNumber: number) {
+  collapsed.value = false
+  nextTick(function () {
+    lineRefs.value[lineNumber - 1].scrollIntoView({ behavior: 'smooth', block: 'center' })
+  })
 }
 
+defineExpose({
+  scrollTo
+})
+
 const value = hljs.highlight(props.lines.join('\n'), { language: 'java' }).value
 const openTags: string[] = []
 const result = value
@@ -163,6 +118,20 @@ const result = value
     return match
   })
   .split('\n')
+
+const lineMatch: (null | Match)[] = new Array(result.length).fill(null)
+props.matches?.forEach((m) => {
+  for (let i = m.start; i <= m.end; i++) {
+    //assign match color to line
+    lineMatch[i - 1] = m.match
+  }
+})
+
+function lineSelected(line: number) {
+  if (lineMatch[line - 1] !== null) {
+    emit('lineSelected', lineMatch[line - 1])
+  }
+}
 </script>
 
 <style scoped>
diff --git a/report-viewer/src/components/FilesContainer.vue b/report-viewer/src/components/FilesContainer.vue
index 0af77119b..3d6338902 100644
--- a/report-viewer/src/components/FilesContainer.vue
+++ b/report-viewer/src/components/FilesContainer.vue
@@ -11,15 +11,14 @@
         <CodePanel
           v-for="(file, index) in files.keys()"
           :key="file.concat(index.toString())"
+          ref="codePanels"
           :collapse="files.get(file)?.collapsed"
           :file-index="index"
           :lines="files.get(file)?.lines || []"
           :matches="!matches.get(file) ? [] : matches.get(file)"
-          :panel-id="containerId"
           :title="convertSubmissionIdToName(file, submissionId)"
           :filePath="file"
-          @toggle-collapse="$emit('toggle-collapse', file)"
-          @line-selected="lineSelected"
+          @line-selected="(match) => $emit('line-selected', match)"
           class="mt-1"
         />
       </VueDraggableNext>
@@ -29,22 +28,15 @@
 
 <script setup lang="ts">
 import type { SubmissionFile } from '@/model/SubmissionFile'
-import type { MatchInSingleFile } from '@/model/MatchInSingleFile'
-
 import CodePanel from '@/components/CodePanel.vue'
 import store from '@/stores/store'
 import Container from './ContainerComponent.vue'
 import ScrollableComponent from './ScrollableComponent.vue'
 import { VueDraggableNext } from 'vue-draggable-next'
+import { ref } from 'vue'
+import type { MatchInSingleFile } from '@/model/MatchInSingleFile'
 
-defineProps({
-  /**
-   * Id of the files container. We have only two so it is either 1 or 2.
-   */
-  containerId: {
-    type: Number,
-    required: true
-  },
+const props = defineProps({
   /**
    * Id of the submission to thich the files belong.
    */
@@ -90,18 +82,7 @@ defineProps({
   }
 })
 
-const emit = defineEmits(['toggle-collapse', 'lineSelected'])
-
-/**
- * Passes lineSelected event, emitted from LineOfCode, to parent.
- * @param e event from clicking on the line
- * @param index index of the file in the files array
- * @param file path of the file
- * @param line line number of the line
- */
-function lineSelected(e: unknown, index: number, file: string, line: number) {
-  emit('lineSelected', e, index, file, line)
-}
+defineEmits(['lineSelected'])
 
 /**
  * converts the submissionId to the name in the path of file. If the length of path exceeds 40, then the file path displays the abbreviation.
@@ -117,6 +98,19 @@ function convertSubmissionIdToName(file: string, submissionId: string): string {
     ? '..' + filePath.substring(filePathLength - 40, filePathLength)
     : filePath
 }
+
+const codePanels = ref([])
+
+function scrollTo(file: string, line: number) {
+  console.log('scrolling to', file)
+  const fileIndex = Array.from(props.files.keys()).indexOf(file)
+  console.log('fileIndex', fileIndex)
+  ;(codePanels.value[fileIndex] as unknown as typeof CodePanel).scrollTo(line)
+}
+
+defineExpose({
+  scrollTo
+})
 </script>
 
 <style scoped>
diff --git a/report-viewer/src/components/MatchList.vue b/report-viewer/src/components/MatchList.vue
index bb9c2f1b2..4536b0c2f 100644
--- a/report-viewer/src/components/MatchList.vue
+++ b/report-viewer/src/components/MatchList.vue
@@ -12,7 +12,7 @@
         :style="{ background: match.color }"
         v-for="[index, match] in matches?.entries()"
         v-bind:key="index"
-        @click="$emit('matchSelected', $event, match)"
+        @click="$emit('matchSelected', match)"
       >
         {{ getFileName(match.firstFile) }} - {{ getFileName(match.secondFile) }}: {{ match.tokens }}
       </Interactable>
diff --git a/report-viewer/src/model/MatchInSingleFile.ts b/report-viewer/src/model/MatchInSingleFile.ts
index dc8a129ad..fdca8d166 100644
--- a/report-viewer/src/model/MatchInSingleFile.ts
+++ b/report-viewer/src/model/MatchInSingleFile.ts
@@ -1,3 +1,5 @@
+import type { Match } from './Match'
+
 /**
  * Describes a match in a single file.
  * @property start - Starting line of the match.
@@ -7,11 +9,40 @@
  * @property linked_line - The start of the match in the second file.
  * @property color - Color of the match.
  */
-export type MatchInSingleFile = {
-  start: number
-  end: number
-  linked_panel: number
-  linked_file: string
-  linked_line: number
-  color: string
+export class MatchInSingleFile {
+  private readonly _match: Match
+  private readonly _index: 1 | 2
+
+  constructor(match: Match, index: 1 | 2) {
+    this._match = match
+    this._index = index
+  }
+
+  get match(): Match {
+    return this._match
+  }
+
+  get start(): number {
+    if (this._index === 1) {
+      return this._match.startInFirst
+    } else {
+      return this._match.startInSecond
+    }
+  }
+
+  get end(): number {
+    if (this._index === 1) {
+      return this._match.endInFirst
+    } else {
+      return this._match.endInSecond
+    }
+  }
+
+  get file(): string {
+    if (this._index === 1) {
+      return this._match.firstFile
+    } else {
+      return this._match.secondFile
+    }
+  }
 }
diff --git a/report-viewer/src/model/factories/ComparisonFactory.ts b/report-viewer/src/model/factories/ComparisonFactory.ts
index a4eac9e5d..42099c493 100644
--- a/report-viewer/src/model/factories/ComparisonFactory.ts
+++ b/report-viewer/src/model/factories/ComparisonFactory.ts
@@ -1,7 +1,7 @@
 import { Comparison } from '../Comparison'
 import type { Match } from '../Match'
+import { MatchInSingleFile } from '../MatchInSingleFile'
 import type { SubmissionFile } from '../SubmissionFile'
-import type { MatchInSingleFile } from '../MatchInSingleFile'
 import store from '@/stores/store'
 import { generateColors } from '@/utils/ColorUtils'
 import slash from 'slash'
@@ -109,7 +109,7 @@ export class ComparisonFactory {
 
   private static groupMatchesByFileName(
     matches: Array<Match>,
-    index: number
+    index: 1 | 2
   ): Map<string, Array<MatchInSingleFile>> {
     const acc = new Map<string, Array<MatchInSingleFile>>()
     matches.forEach((val) => {
@@ -119,27 +119,7 @@ export class ComparisonFactory {
         acc.set(name, [])
       }
 
-      if (index === 1) {
-        const newVal: MatchInSingleFile = {
-          start: val.startInFirst as number,
-          end: val.endInFirst as number,
-          linked_panel: 2,
-          linked_file: val.secondFile as string,
-          linked_line: val.startInSecond as number,
-          color: val.color as string
-        }
-        acc.get(name)?.push(newVal)
-      } else {
-        const newVal: MatchInSingleFile = {
-          start: val.startInSecond as number,
-          end: val.endInSecond as number,
-          linked_panel: 1,
-          linked_file: val.firstFile as string,
-          linked_line: val.startInFirst as number,
-          color: val.color as string
-        }
-        acc.get(name)?.push(newVal)
-      }
+      acc.get(name)?.push(new MatchInSingleFile(val, index))
     })
     return acc
   }
diff --git a/report-viewer/src/views/ComparisonView.vue b/report-viewer/src/views/ComparisonView.vue
index 2f046364a..76f450da5 100644
--- a/report-viewer/src/views/ComparisonView.vue
+++ b/report-viewer/src/views/ComparisonView.vue
@@ -35,26 +35,24 @@
     <div ref="styleholder"></div>
     <div class="relative bottom-0 right-0 left-0 flex flex-grow space-x-5 p-5 pt-5 justify-between">
       <FilesContainer
-        :container-id="1"
+        ref="panel1"
         :submission-id="firstId"
         :files="filesOfFirst"
         :matches="comparison.matchesInFirstSubmission"
         :files-owner="store().submissionDisplayName(firstId) || ''"
         :anonymous="isAnonymous(firstId)"
         files-owner-default="Submission 1"
-        @toggle-collapse="toggleCollapseFirst"
         @line-selected="showMatchInSecond"
         class="max-h-0 min-h-full flex-1 overflow-hidden"
       />
       <FilesContainer
-        :container-id="2"
+        ref="panel2"
         :submission-id="secondId"
         :files="filesOfSecond"
         :matches="comparison.matchesInSecondSubmissions"
         :files-owner="store().submissionDisplayName(secondId) || ''"
         :anonymous="isAnonymous(secondId)"
         files-owner-default="Submission 2"
-        @toggle-collapse="toggleCollapseSecond"
         @line-selected="showMatchInFirst"
         class="max-h-0 min-h-full flex-1 overflow-hidden"
       />
@@ -66,7 +64,6 @@
 import type { Match } from '@/model/Match'
 
 import { onMounted, ref, watch, type Ref, computed, onErrorCaptured } from 'vue'
-import { generateLineCodeLink } from '@/utils/ComparisonUtils'
 import TextInformation from '@/components/TextInformation.vue'
 import MatchList from '@/components/MatchList.vue'
 import { ComparisonFactory } from '@/model/factories/ComparisonFactory'
@@ -94,55 +91,26 @@ const comparison = ComparisonFactory.getComparison(props.firstId, props.secondId
 const filesOfFirst = ref(comparison.filesOfFirstSubmission)
 const filesOfSecond = ref(comparison.filesOfSecondSubmission)
 
-/**
- * Collapses a file in the first files container.
- * @param title title of the file
- */
-function toggleCollapseFirst(title: string) {
-  const file = filesOfFirst.value.get(title)
-  if (file) {
-    file.collapsed = !file.collapsed
-  }
-}
-
-/**
- * Collapses a file in the second files container.
- * @param title title of the file
- */
-function toggleCollapseSecond(title: string) {
-  const file = filesOfSecond.value.get(title)
-  if (file) {
-    file.collapsed = !file.collapsed
-  }
-}
+const panel1: Ref<typeof FilesContainer | null> = ref(null)
+const panel2: Ref<typeof FilesContainer | null> = ref(null)
 
 /**
  * Shows a match in the first files container when clicked on a line in the second files container.
- * @param e The click event
- * @param panel panel number (1 for left, 2 for right)
  * @param file (file name)
  * @param line (line number)
  */
 
-function showMatchInFirst(e: unknown, panel: number, file: string, line: number) {
-  if (!filesOfFirst.value.get(file)?.collapsed) {
-    toggleCollapseFirst(file)
-  }
-  document.getElementById(generateLineCodeLink(panel, file, line))?.scrollIntoView()
+function showMatchInFirst(match: Match) {
+  panel1.value?.scrollTo(match.firstFile, match.startInFirst)
 }
 
 /**
  * Shows a match in the second files container, when clicked on a line in the second files container.
- * @param e The click event
- * @param panel panel number (1 for left, 2 for right)
  * @param file (file name)
  * @param line (line number)
  */
-function showMatchInSecond(e: unknown, panel: number, file: string, line: number) {
-  if (!filesOfSecond.value.get(file)?.collapsed) {
-    toggleCollapseSecond(file)
-  }
-  document.getElementById(generateLineCodeLink(panel, file, line))?.scrollIntoView()
+function showMatchInSecond(match: Match) {
+  panel2.value?.scrollTo(match.secondFile, match.startInSecond)
 }
 
 /**
@@ -150,9 +118,9 @@ function showMatchInSecond(e: unknown, panel: number, file: string, line: number
  * @param e The click event
  * @param match The match to show
  */
-function showMatch(e: unknown, match: Match) {
-  showMatchInFirst(e, 1, match.firstFile, match.startInFirst)
-  showMatchInSecond(e, 2, match.secondFile, match.startInSecond)
+function showMatch(match: Match) {
+  showMatchInFirst(match)
+  showMatchInSecond(match)
 }
 
 function isAnonymous(id: string) {

From 914e00175c23ff87bb7af4390d6ee3413a1b841d Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Fri, 28 Jul 2023 20:19:40 +0200
Subject: [PATCH 03/20] rework file and match store system

---
 report-viewer/src/components/CodePanel.vue    | 81 ++++++++----------
 .../src/components/FilesContainer.vue         | 82 ++++++++-----------
 report-viewer/src/model/Comparison.ts         | 18 ++--
 report-viewer/src/model/SubmissionFile.ts     |  9 --
 .../src/model/factories/ComparisonFactory.ts  | 38 ++-------
 report-viewer/src/stores/state.ts             | 20 +++--
 report-viewer/src/stores/store.ts             | 29 ++++---
 report-viewer/src/views/ComparisonView.vue    |  6 +-
 report-viewer/src/views/FileUploadView.vue    |  5 +-
 9 files changed, 115 insertions(+), 173 deletions(-)
 delete mode 100644 report-viewer/src/model/SubmissionFile.ts

diff --git a/report-viewer/src/components/CodePanel.vue b/report-viewer/src/components/CodePanel.vue
index 00f9247f9..91dbf968d 100644
--- a/report-viewer/src/components/CodePanel.vue
+++ b/report-viewer/src/components/CodePanel.vue
@@ -4,27 +4,26 @@
 <template>
   <Interactable class="!shadow mx-2">
     <div @click="collapsed = !collapsed" class="text-center font-bold">
-      {{ title }}
+      {{ getFileDisplayName(file) }}
     </div>
     <div class="mx-1 overflow-x-auto">
       <div v-if="!collapsed" class="w-fit min-w-full !text-xs">
-        <table v-if="!isEmpty(lines)" class="w-full">
+        <table v-if="file.data.trim() !== ''" class="w-full">
           <tr
-            v-for="(line, index) in result"
+            v-for="(line, index) in codeLines"
             :key="index"
             class="w-full cursor-default"
-            :class="{ 'cursor-pointer': lineMatch[index] !== null }"
-            @click="lineSelected(index + 1)"
+            :class="{ 'cursor-pointer': line.match !== null }"
+            @click="lineSelected(index)"
           >
             <td class="float-right pr-3">{{ index + 1 }}</td>
             <td
               class="w-full"
               :style="{
-                background:
-                  lineMatch[index] !== null ? lineMatch[index]?.color : 'hsla(0, 0%, 0%, 0)'
+                background: line.match !== null ? line.match.color : 'hsla(0, 0%, 0%, 0)'
               }"
             >
-              <pre v-html="line" class="hljs" ref="lineRefs"></pre>
+              <pre v-html="line.line" class="code-font !bg-transparent" ref="lineRefs"></pre>
             </td>
           </tr>
         </table>
@@ -38,37 +37,22 @@
 
 <script setup lang="ts">
 import type { MatchInSingleFile } from '@/model/MatchInSingleFile'
-import { ref, nextTick } from 'vue'
+import { ref, nextTick, type PropType } from 'vue'
 import Interactable from './InteractableComponent.vue'
 import hljs from 'highlight.js'
 import type { Match } from '@/model/Match'
+import type { SubmissionFile } from '@/stores/state'
 
 const props = defineProps({
-  /**
-   * Title of the displayed file.
-   */
-  title: {
-    type: String,
-    required: true
-  },
-  /**
-   * Index of file amongst other files in submission.
-   */
-  fileIndex: {
-    type: Number,
-    required: true
-  },
   /**
    * Code lines of the file.
-   * type: Array<string>
    */
-  lines: {
-    type: Array<string>,
+  file: {
+    type: Object as PropType<SubmissionFile>,
     required: true
   },
   /**
    * Matches in the file
-   * type: Array<MatchInSingleFile>
    */
   matches: {
     type: Array<MatchInSingleFile>,
@@ -77,17 +61,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['lineSelected'])
-
 const collapsed = ref(true)
-
-/**
- * @param lines Array of lines to check.
- * @returns true if all lines are empty, false otherwise.
- */
-function isEmpty(lines: string[]) {
-  return lines.length === 0 || lines.every((line) => !line.trim())
-}
-
 const lineRefs = ref<HTMLElement[]>([])
 
 function scrollTo(lineNumber: number) {
@@ -101,9 +75,9 @@ defineExpose({
   scrollTo
 })
 
-const value = hljs.highlight(props.lines.join('\n'), { language: 'java' }).value
+const highlightedCode = hljs.highlight(props.file.data, { language: 'java' }).value
 const openTags: string[] = []
-const result = value
+const formatedCode = highlightedCode
   .replace(/(<span [^>]+>)|(<\/span>)|(\n)/g, (match) => {
     if (match === '\n') {
       return '</span>'.repeat(openTags.length) + '\n' + openTags.join('')
@@ -119,24 +93,37 @@ const result = value
   })
   .split('\n')
 
-const lineMatch: (null | Match)[] = new Array(result.length).fill(null)
+const codeLines: { line: string; match: null | Match }[] = formatedCode.map((line) => {
+  return { line, match: null }
+})
 props.matches?.forEach((m) => {
   for (let i = m.start; i <= m.end; i++) {
-    //assign match color to line
-    lineMatch[i - 1] = m.match
+    //assign match to line
+    codeLines[i - 1].match = m.match
   }
 })
 
-function lineSelected(line: number) {
-  if (lineMatch[line - 1] !== null) {
-    emit('lineSelected', lineMatch[line - 1])
+function lineSelected(lineIndex: number) {
+  if (codeLines[lineIndex].match !== null) {
+    emit('lineSelected', codeLines[lineIndex].match)
   }
 }
+
+/**
+ * converts the submissionId to the name in the path of file. If the length of path exceeds 40, then the file path displays the abbreviation.
+ * @param file submission file
+ * @return new path of file
+ */
+function getFileDisplayName(file: SubmissionFile): string {
+  const filePathLength = file.fileName.length
+  return filePathLength > 40
+    ? '...' + file.fileName.substring(filePathLength - 40, filePathLength)
+    : file.fileName
+}
 </script>
 
 <style scoped>
-.hljs {
+.code-font {
   font-family: 'JetBrains Mono NL', monospace !important;
-  background: transparent !important;
 }
 </style>
diff --git a/report-viewer/src/components/FilesContainer.vue b/report-viewer/src/components/FilesContainer.vue
index 3d6338902..63fa7788e 100644
--- a/report-viewer/src/components/FilesContainer.vue
+++ b/report-viewer/src/components/FilesContainer.vue
@@ -4,20 +4,17 @@
 <template>
   <Container class="flex flex-col">
     <h3 class="text-left text-lg font-bold">
-      Files of {{ anonymous ? filesOwnerDefault : filesOwner }}:
+      Files of
+      {{ anonymous ? anonymousFilesOwnerDefault : store().submissionDisplayName(submissionId) }}:
     </h3>
     <ScrollableComponent class="flex-grow">
       <VueDraggableNext>
         <CodePanel
-          v-for="(file, index) in files.keys()"
-          :key="file.concat(index.toString())"
+          v-for="(file, index) in filesRef"
+          :key="index"
           ref="codePanels"
-          :collapse="files.get(file)?.collapsed"
-          :file-index="index"
-          :lines="files.get(file)?.lines || []"
-          :matches="!matches.get(file) ? [] : matches.get(file)"
-          :title="convertSubmissionIdToName(file, submissionId)"
-          :filePath="file"
+          :file="file"
+          :matches="!matches.get(file.fileName) ? [] : matches.get(file.fileName)"
           @line-selected="(match) => $emit('line-selected', match)"
           class="mt-1"
         />
@@ -27,47 +24,32 @@
 </template>
 
 <script setup lang="ts">
-import type { SubmissionFile } from '@/model/SubmissionFile'
+import type { SubmissionFile } from '@/stores/state'
 import CodePanel from '@/components/CodePanel.vue'
-import store from '@/stores/store'
 import Container from './ContainerComponent.vue'
 import ScrollableComponent from './ScrollableComponent.vue'
 import { VueDraggableNext } from 'vue-draggable-next'
-import { ref } from 'vue'
+import { computed, ref, type Ref } from 'vue'
 import type { MatchInSingleFile } from '@/model/MatchInSingleFile'
+import store from '@/stores/store'
 
 const props = defineProps({
-  /**
-   * Id of the submission to thich the files belong.
-   */
-  filesOwner: {
-    type: String,
-    required: true
-  },
-  /**
-   * Default value of the submission to which the files belong.
-   */
-  filesOwnerDefault: {
-    type: String,
-    required: true
-  },
   /**
    * Files of the submission.
-   * type: Array<SubmissionFile>
    */
   files: {
-    type: Map<string, SubmissionFile>,
+    type: Array<SubmissionFile>,
     required: true
   },
   /**
-   * Matche of submission.
+   * Matches of submission.
    */
   matches: {
     type: Map<string, MatchInSingleFile[]>,
     required: true
   },
   /**
-   * Default value of the submission to which the files belong.
+   * Submission id of the files.
    */
   submissionId: {
     type: String,
@@ -79,33 +61,37 @@ const props = defineProps({
   anonymous: {
     type: Boolean,
     required: true
+  },
+  /**
+   * The default value of the owner of the files.
+   */
+  anonymousFilesOwnerDefault: {
+    type: String,
+    required: true
   }
 })
 
 defineEmits(['lineSelected'])
 
-/**
- * converts the submissionId to the name in the path of file. If the length of path exceeds 40, then the file path displays the abbreviation.
- * @param file files path
- * @param submissionId id of submission
- * @return new path of file
- */
-function convertSubmissionIdToName(file: string, submissionId: string): string {
-  const displayName = store().submissionDisplayName(submissionId) || submissionId
-  const filePath = file.replace(submissionId, displayName)
-  const filePathLength = filePath.length
-  return filePathLength > 40
-    ? '..' + filePath.substring(filePathLength - 40, filePathLength)
-    : filePath
-}
+const filesRef = computed(() => {
+  return props.files.map((file) => {
+    return {
+      ...file,
+      owner: props.anonymous
+        ? props.anonymousFilesOwnerDefault
+        : store().submissionDisplayName(props.submissionId)
+    }
+  })
+})
 
-const codePanels = ref([])
+const codePanels: Ref<(typeof CodePanel)[]> = ref([])
 
 function scrollTo(file: string, line: number) {
   console.log('scrolling to', file)
-  const fileIndex = Array.from(props.files.keys()).indexOf(file)
-  console.log('fileIndex', fileIndex)
-  ;(codePanels.value[fileIndex] as unknown as typeof CodePanel).scrollTo(line)
+  const fileIndex = Array.from(props.files).findIndex((f) => f.fileName === file)
+  if (fileIndex !== -1) {
+    codePanels.value[fileIndex].scrollTo(line)
+  }
 }
 
 defineExpose({
diff --git a/report-viewer/src/model/Comparison.ts b/report-viewer/src/model/Comparison.ts
index 53b9bc6ff..b6ac1c107 100644
--- a/report-viewer/src/model/Comparison.ts
+++ b/report-viewer/src/model/Comparison.ts
@@ -1,5 +1,5 @@
 import type { Match } from './Match'
-import type { SubmissionFile } from './SubmissionFile'
+import type { SubmissionFile } from '@/stores/state'
 import type { MatchInSingleFile } from './MatchInSingleFile'
 
 /**
@@ -14,20 +14,20 @@ export class Comparison {
     this._firstSubmissionId = firstSubmissionId
     this._secondSubmissionId = secondSubmissionId
     this._similarity = similarity
-    this._filesOfFirstSubmission = new Map()
-    this._filesOfSecondSubmission = new Map()
+    this._filesOfFirstSubmission = []
+    this._filesOfSecondSubmission = []
     this._colors = []
     this._allMatches = []
     this._matchesInFirstSubmission = new Map()
     this._matchesInSecondSubmissions = new Map()
   }
 
-  private _filesOfFirstSubmission: Map<string, SubmissionFile>
+  private _filesOfFirstSubmission: SubmissionFile[]
 
   /**
    * @return Map of all files of the first submission
    */
-  get filesOfFirstSubmission(): Map<string, SubmissionFile> {
+  get filesOfFirstSubmission(): SubmissionFile[] {
     return this._filesOfFirstSubmission
   }
 
@@ -35,16 +35,16 @@ export class Comparison {
    * Set the files of the first submission
    * @param value Map to set to
    */
-  set filesOfFirstSubmission(value: Map<string, SubmissionFile>) {
+  set filesOfFirstSubmission(value: SubmissionFile[]) {
     this._filesOfFirstSubmission = value
   }
 
-  private _filesOfSecondSubmission: Map<string, SubmissionFile>
+  private _filesOfSecondSubmission: SubmissionFile[]
 
   /**
    * @return Map of all files of the second submission
    */
-  get filesOfSecondSubmission(): Map<string, SubmissionFile> {
+  get filesOfSecondSubmission(): SubmissionFile[] {
     return this._filesOfSecondSubmission
   }
 
@@ -52,7 +52,7 @@ export class Comparison {
    * Set the files of the second submission
    * @param value Map to set to
    */
-  set filesOfSecondSubmission(value: Map<string, SubmissionFile>) {
+  set filesOfSecondSubmission(value: SubmissionFile[]) {
     this._filesOfSecondSubmission = value
   }
 
diff --git a/report-viewer/src/model/SubmissionFile.ts b/report-viewer/src/model/SubmissionFile.ts
deleted file mode 100644
index 26f38667f..000000000
--- a/report-viewer/src/model/SubmissionFile.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * File in a submission. Used in the comparison view.
- * @property lines - Code lines of the file.
- * @property collapsed - Indicates whether the file is displayed or not.
- */
-export type SubmissionFile = {
-  lines: Array<string>
-  collapsed: boolean
-}
diff --git a/report-viewer/src/model/factories/ComparisonFactory.ts b/report-viewer/src/model/factories/ComparisonFactory.ts
index 42099c493..b5e4690d2 100644
--- a/report-viewer/src/model/factories/ComparisonFactory.ts
+++ b/report-viewer/src/model/factories/ComparisonFactory.ts
@@ -1,7 +1,6 @@
 import { Comparison } from '../Comparison'
 import type { Match } from '../Match'
 import { MatchInSingleFile } from '../MatchInSingleFile'
-import type { SubmissionFile } from '../SubmissionFile'
 import store from '@/stores/store'
 import { generateColors } from '@/utils/ColorUtils'
 import slash from 'slash'
@@ -56,12 +55,6 @@ export class ComparisonFactory {
    * @param json the json object
    */
   private static extractComparison(json: Record<string, unknown>): Comparison {
-    const filesOfFirstSubmission = store().filesOfSubmission(json.id1 as string)
-    const filesOfSecondSubmission = store().filesOfSubmission(json.id2 as string)
-
-    const filesOfFirstConverted = this.convertToFilesByName(filesOfFirstSubmission)
-    const filesOfSecondConverted = this.convertToFilesByName(filesOfSecondSubmission)
-
     const matches = json.matches as Array<Record<string, unknown>>
 
     const matchSaturation = 0.8
@@ -78,8 +71,8 @@ export class ComparisonFactory {
       json.id2 as string,
       json.similarity as number
     )
-    comparison.filesOfFirstSubmission = filesOfFirstConverted
-    comparison.filesOfSecondSubmission = filesOfSecondConverted
+    comparison.filesOfFirstSubmission = store().filesOfSubmission(json.id1 as string)
+    comparison.filesOfSecondSubmission = store().filesOfSubmission(json.id2 as string)
     comparison.colors = colors
     comparison.allMatches = coloredMatches
     comparison.matchesInFirstSubmission = matchesInFirst
@@ -88,25 +81,6 @@ export class ComparisonFactory {
     return comparison
   }
 
-  private static convertToFilesByName(
-    files: Array<{ name: string; value: string }>
-  ): Map<string, SubmissionFile> {
-    const map = new Map<string, SubmissionFile>()
-    files.forEach((val) => {
-      if (!map.get(val.name)) {
-        map.set(val.name as string, {
-          lines: [],
-          collapsed: false
-        })
-      }
-      map.set(val.name as string, {
-        lines: val.value.split(/\r?\n/),
-        collapsed: false
-      })
-    })
-    return map
-  }
-
   private static groupMatchesByFileName(
     matches: Array<Match>,
     index: 1 | 2
@@ -146,11 +120,9 @@ export class ComparisonFactory {
       request.send()
       if (request.status == 200) {
         store().saveSubmissionFile({
-          name: submissionId,
-          file: {
-            fileName: slash(file),
-            data: request.response
-          }
+          submissionId,
+          fileName: slash(file),
+          data: request.response
         })
       } else {
         console.log('Error loading file: ' + file)
diff --git a/report-viewer/src/stores/state.ts b/report-viewer/src/stores/state.ts
index 3aefba738..c49794467 100644
--- a/report-viewer/src/stores/state.ts
+++ b/report-viewer/src/stores/state.ts
@@ -33,23 +33,27 @@ export interface State {
 }
 
 /**
- * Internal representation of a file.
- * @property fileName - The name of the file.
- * @property data - The content of the file.
+ * Internal representation of a single file.
  */
 export interface File {
+  /**
+   * The name of the file.
+   */
   fileName: string
+  /**
+   * The files content.
+   */
   data: string
 }
 
 /**
  * Internal representation of a single file from a submission.
- * @property name - The name of the file.
- * @property file - The file.
  */
-export interface SubmissionFile {
-  name: string
-  file: File
+export interface SubmissionFile extends File {
+  /**
+   * The id of the submission.
+   */
+  submissionId: string
 }
 
 /**
diff --git a/report-viewer/src/stores/store.ts b/report-viewer/src/stores/store.ts
index fd8917baa..db31da189 100644
--- a/report-viewer/src/stores/store.ts
+++ b/report-viewer/src/stores/store.ts
@@ -25,15 +25,18 @@ const store = defineStore('store', {
   }),
   getters: {
     /**
-     * @param name the name of the submission
+     * @param submissionID the name of the submission
      * @returns files in the submission of the given name
      */
-    filesOfSubmission: (state) => (name: string) => {
-      return Array.from(state.state.submissions[name], ([name, value]) => ({
-        name,
-        value
-      }))
-    },
+    filesOfSubmission:
+      (state) =>
+      (submissionId: string): SubmissionFile[] => {
+        return Array.from(state.state.submissions[submissionId], ([name, value]) => ({
+          submissionId,
+          fileName: name,
+          data: value
+        }))
+      },
     /**
      * @param name the name of the submission
      * @returns the display name of the submission
@@ -134,15 +137,15 @@ const store = defineStore('store', {
     },
     /**
      * Saves the given submission file
-     * @param submissionFile the submission file to save
+     * @param submissionFile the file to save
      */
     saveSubmissionFile(submissionFile: SubmissionFile) {
-      if (!this.state.submissions[submissionFile.name]) {
-        this.state.submissions[submissionFile.name] = new Map()
+      if (!this.state.submissions[submissionFile.submissionId]) {
+        this.state.submissions[submissionFile.submissionId] = new Map()
       }
-      this.state.submissions[submissionFile.name].set(
-        submissionFile.file.fileName,
-        submissionFile.file.data
+      this.state.submissions[submissionFile.submissionId].set(
+        submissionFile.fileName,
+        submissionFile.data
       )
     },
     /**
diff --git a/report-viewer/src/views/ComparisonView.vue b/report-viewer/src/views/ComparisonView.vue
index 76f450da5..f35e7b30c 100644
--- a/report-viewer/src/views/ComparisonView.vue
+++ b/report-viewer/src/views/ComparisonView.vue
@@ -39,9 +39,8 @@
         :submission-id="firstId"
         :files="filesOfFirst"
         :matches="comparison.matchesInFirstSubmission"
-        :files-owner="store().submissionDisplayName(firstId) || ''"
         :anonymous="isAnonymous(firstId)"
-        files-owner-default="Submission 1"
+        anonymous-files-owner-default="Submission 1"
         @line-selected="showMatchInSecond"
         class="max-h-0 min-h-full flex-1 overflow-hidden"
       />
@@ -50,9 +49,8 @@
         :submission-id="secondId"
         :files="filesOfSecond"
         :matches="comparison.matchesInSecondSubmissions"
-        :files-owner="store().submissionDisplayName(secondId) || ''"
         :anonymous="isAnonymous(secondId)"
-        files-owner-default="Submission 2"
+        anonymous-files-owner-default="Submission 2"
         @line-selected="showMatchInFirst"
         class="max-h-0 min-h-full flex-1 overflow-hidden"
       />
diff --git a/report-viewer/src/views/FileUploadView.vue b/report-viewer/src/views/FileUploadView.vue
index c3686c7e5..5b85b7cdf 100644
--- a/report-viewer/src/views/FileUploadView.vue
+++ b/report-viewer/src/views/FileUploadView.vue
@@ -188,8 +188,9 @@ async function handleZipFile(file: Blob) {
         )
         await zip.files[originalFileName].async('string').then((data) => {
           store().saveSubmissionFile({
-            name: slash(submissionFileName),
-            file: { fileName: slash(fullPathFileName), data: data }
+            submissionId: slash(submissionFileName),
+            fileName: slash(fullPathFileName),
+            data: data
           })
         })
       } else {

From 2db93dfea65f09281248057e0fae4406112844be Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sat, 29 Jul 2023 10:16:37 +0200
Subject: [PATCH 04/20] remove unnecessary prop

---
 report-viewer/src/components/FilesContainer.vue | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/report-viewer/src/components/FilesContainer.vue b/report-viewer/src/components/FilesContainer.vue
index 63fa7788e..699468406 100644
--- a/report-viewer/src/components/FilesContainer.vue
+++ b/report-viewer/src/components/FilesContainer.vue
@@ -10,7 +10,7 @@
     <ScrollableComponent class="flex-grow">
       <VueDraggableNext>
         <CodePanel
-          v-for="(file, index) in filesRef"
+          v-for="(file, index) in files"
           :key="index"
           ref="codePanels"
           :file="file"
@@ -29,7 +29,7 @@ import CodePanel from '@/components/CodePanel.vue'
 import Container from './ContainerComponent.vue'
 import ScrollableComponent from './ScrollableComponent.vue'
 import { VueDraggableNext } from 'vue-draggable-next'
-import { computed, ref, type Ref } from 'vue'
+import { ref, type Ref } from 'vue'
 import type { MatchInSingleFile } from '@/model/MatchInSingleFile'
 import store from '@/stores/store'
 
@@ -73,17 +73,6 @@ const props = defineProps({
 
 defineEmits(['lineSelected'])
 
-const filesRef = computed(() => {
-  return props.files.map((file) => {
-    return {
-      ...file,
-      owner: props.anonymous
-        ? props.anonymousFilesOwnerDefault
-        : store().submissionDisplayName(props.submissionId)
-    }
-  })
-})
-
 const codePanels: Ref<(typeof CodePanel)[]> = ref([])
 
 function scrollTo(file: string, line: number) {

From 2e85b935aa4d3f88f9e4867f744a147a1f99d0fa Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sat, 29 Jul 2023 15:13:10 +0200
Subject: [PATCH 05/20] fix doc

---
 report-viewer/src/model/MatchInSingleFile.ts | 23 ++++++++------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/report-viewer/src/model/MatchInSingleFile.ts b/report-viewer/src/model/MatchInSingleFile.ts
index fdca8d166..bcaae43c0 100644
--- a/report-viewer/src/model/MatchInSingleFile.ts
+++ b/report-viewer/src/model/MatchInSingleFile.ts
@@ -2,12 +2,6 @@ import type { Match } from './Match'
 
 /**
  * Describes a match in a single file.
- * @property start - Starting line of the match.
- * @property end - Ending line of the match.
- * @property linked_panel - The files container containing the file of the second submission to which this is matched.
- * @property linked_file - The file name containing the same match in the second submission.
- * @property linked_line - The start of the match in the second file.
- * @property color - Color of the match.
  */
 export class MatchInSingleFile {
   private readonly _match: Match
@@ -18,10 +12,16 @@ export class MatchInSingleFile {
     this._index = index
   }
 
+  /**
+   * The match object.
+   */
   get match(): Match {
     return this._match
   }
 
+  /**
+   * The start line of the match.
+   */
   get start(): number {
     if (this._index === 1) {
       return this._match.startInFirst
@@ -30,6 +30,9 @@ export class MatchInSingleFile {
     }
   }
 
+  /**
+   * The end line of the match.
+   */
   get end(): number {
     if (this._index === 1) {
       return this._match.endInFirst
@@ -37,12 +40,4 @@ export class MatchInSingleFile {
       return this._match.endInSecond
     }
   }
-
-  get file(): string {
-    if (this._index === 1) {
-      return this._match.firstFile
-    } else {
-      return this._match.secondFile
-    }
-  }
 }

From e0c10385be9016e9554b107c257676d1a81ba75d Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sun, 30 Jul 2023 16:50:03 +0200
Subject: [PATCH 06/20] better match line building

---
 report-viewer/src/components/CodePanel.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/report-viewer/src/components/CodePanel.vue b/report-viewer/src/components/CodePanel.vue
index 91dbf968d..4085b0925 100644
--- a/report-viewer/src/components/CodePanel.vue
+++ b/report-viewer/src/components/CodePanel.vue
@@ -56,7 +56,7 @@ const props = defineProps({
    */
   matches: {
     type: Array<MatchInSingleFile>,
-    required: false
+    required: true
   }
 })
 
@@ -93,13 +93,10 @@ const formatedCode = highlightedCode
   })
   .split('\n')
 
-const codeLines: { line: string; match: null | Match }[] = formatedCode.map((line) => {
-  return { line, match: null }
-})
-props.matches?.forEach((m) => {
-  for (let i = m.start; i <= m.end; i++) {
-    //assign match to line
-    codeLines[i - 1].match = m.match
+const codeLines: { line: string; match: null | Match }[] = formatedCode.map((line, index) => {
+  return {
+    line,
+    match: props.matches?.find((m) => m.start <= index + 1 && index + 1 <= m.end)?.match ?? null
   }
 })
 

From a698f2f754afc60a2db0bcd9d0d77e2c86b6579f Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sun, 13 Aug 2023 15:13:01 +0200
Subject: [PATCH 07/20] implement language specific highlighting

---
 report-viewer/src/components/CodePanel.vue    |  33 +++---
 .../src/components/FilesContainer.vue         |  42 +++-----
 report-viewer/src/model/Language.ts           | 100 ++++++++++++++++++
 report-viewer/src/model/Overview.ts           |   5 +-
 .../src/model/factories/OverviewFactory.ts    |   5 +-
 report-viewer/src/utils/CodeHighlighter.ts    |  31 ++++++
 report-viewer/src/views/ComparisonView.vue    |  22 ++--
 7 files changed, 177 insertions(+), 61 deletions(-)
 create mode 100644 report-viewer/src/model/Language.ts
 create mode 100644 report-viewer/src/utils/CodeHighlighter.ts

diff --git a/report-viewer/src/components/CodePanel.vue b/report-viewer/src/components/CodePanel.vue
index 4085b0925..f824d3997 100644
--- a/report-viewer/src/components/CodePanel.vue
+++ b/report-viewer/src/components/CodePanel.vue
@@ -39,9 +39,10 @@
 import type { MatchInSingleFile } from '@/model/MatchInSingleFile'
 import { ref, nextTick, type PropType } from 'vue'
 import Interactable from './InteractableComponent.vue'
-import hljs from 'highlight.js'
 import type { Match } from '@/model/Match'
 import type { SubmissionFile } from '@/stores/state'
+import { highlight } from '@/utils/CodeHighlighter'
+import type { HighlightLanguage } from '@/model/Language'
 
 const props = defineProps({
   /**
@@ -57,6 +58,13 @@ const props = defineProps({
   matches: {
     type: Array<MatchInSingleFile>,
     required: true
+  },
+  /**
+   * Language of the file.
+   */
+  highlightLanguage: {
+    type: String as PropType<HighlightLanguage>,
+    required: true
   }
 })
 
@@ -75,25 +83,10 @@ defineExpose({
   scrollTo
 })
 
-const highlightedCode = hljs.highlight(props.file.data, { language: 'java' }).value
-const openTags: string[] = []
-const formatedCode = highlightedCode
-  .replace(/(<span [^>]+>)|(<\/span>)|(\n)/g, (match) => {
-    if (match === '\n') {
-      return '</span>'.repeat(openTags.length) + '\n' + openTags.join('')
-    }
-
-    if (match === '</span>') {
-      openTags.pop()
-    } else {
-      openTags.push(match)
-    }
-
-    return match
-  })
-  .split('\n')
-
-const codeLines: { line: string; match: null | Match }[] = formatedCode.map((line, index) => {
+const codeLines: { line: string; match: null | Match }[] = highlight(
+  props.file.data,
+  props.highlightLanguage
+).map((line, index) => {
   return {
     line,
     match: props.matches?.find((m) => m.start <= index + 1 && index + 1 <= m.end)?.match ?? null
diff --git a/report-viewer/src/components/FilesContainer.vue b/report-viewer/src/components/FilesContainer.vue
index 699468406..73390eee6 100644
--- a/report-viewer/src/components/FilesContainer.vue
+++ b/report-viewer/src/components/FilesContainer.vue
@@ -5,7 +5,7 @@
   <Container class="flex flex-col">
     <h3 class="text-left text-lg font-bold">
       Files of
-      {{ anonymous ? anonymousFilesOwnerDefault : store().submissionDisplayName(submissionId) }}:
+      {{ fileOwnerDisplayName }}:
     </h3>
     <ScrollableComponent class="flex-grow">
       <VueDraggableNext>
@@ -14,7 +14,10 @@
           :key="index"
           ref="codePanels"
           :file="file"
-          :matches="!matches.get(file.fileName) ? [] : matches.get(file.fileName)"
+          :matches="
+            !matches.get(file.fileName) ? [] : (matches.get(file.fileName) as MatchInSingleFile[])
+          "
+          :highlight-language="highlightLanguage"
           @line-selected="(match) => $emit('line-selected', match)"
           class="mt-1"
         />
@@ -29,9 +32,9 @@ import CodePanel from '@/components/CodePanel.vue'
 import Container from './ContainerComponent.vue'
 import ScrollableComponent from './ScrollableComponent.vue'
 import { VueDraggableNext } from 'vue-draggable-next'
-import { ref, type Ref } from 'vue'
+import { ref, type PropType, type Ref } from 'vue'
 import type { MatchInSingleFile } from '@/model/MatchInSingleFile'
-import store from '@/stores/store'
+import type { HighlightLanguage } from '@/model/Language'
 
 const props = defineProps({
   /**
@@ -49,24 +52,17 @@ const props = defineProps({
     required: true
   },
   /**
-   * Submission id of the files.
+   * Name of the owner of the files.
    */
-  submissionId: {
+  fileOwnerDisplayName: {
     type: String,
     required: true
   },
   /**
-   * The bool value of that whether id is hidden.
+   * Language of the files.
    */
-  anonymous: {
-    type: Boolean,
-    required: true
-  },
-  /**
-   * The default value of the owner of the files.
-   */
-  anonymousFilesOwnerDefault: {
-    type: String,
+  highlightLanguage: {
+    type: String as PropType<HighlightLanguage>,
     required: true
   }
 })
@@ -87,17 +83,3 @@ defineExpose({
   scrollTo
 })
 </script>
-
-<style scoped>
-h1 {
-  text-align: center;
-}
-
-.files-container {
-  display: flex;
-  flex-wrap: nowrap;
-  flex-direction: column;
-  padding-top: 1%;
-  width: 100%;
-}
-</style>
diff --git a/report-viewer/src/model/Language.ts b/report-viewer/src/model/Language.ts
new file mode 100644
index 000000000..045223eef
--- /dev/null
+++ b/report-viewer/src/model/Language.ts
@@ -0,0 +1,100 @@
+/**
+ * Enum for the language parsers JPlag supports
+ */
+enum LanguageParser {
+  JAVA = 'Javac based AST plugin',
+  PYTHON = 'Python3 Parser',
+  CPP = 'C/C++ Scanner [basic markup]',
+  CPP2 = 'C/C++ Parser',
+  C_SHARP = 'C# 6 Parser',
+  EMF_METAMODEL_DYNAMIC = 'emf-dynamic',
+  EMF_METAMODEL = 'EMF metamodel',
+  EMF_MODEL = 'EMF models (dynamically created token set)',
+  GO = 'Go Parser',
+  KOTLIN = 'Kotlin Parser',
+  R_LANG = 'R Parser',
+  RUST = 'Rust Language Module',
+  SCALA = 'Scala parser',
+  SCHEME = 'SchemeR4RS Parser [basic markup]',
+  SWIFT = 'Swift Parser',
+  TEXT = 'Text Parser (naive)',
+  SCXML = 'SCXML (Statechart XML)'
+}
+
+/**
+ * Gets the LanguageParser enum value for the given language
+ * @param language String representation of language the files were parsed with
+ * @returns The LanguageParser enum value
+ */
+function getLanguageParser(language: string): LanguageParser {
+  for (const key in LanguageParser) {
+    if (LanguageParser[key as keyof typeof LanguageParser] === language) {
+      return LanguageParser[key as keyof typeof LanguageParser]
+    }
+  }
+
+  throw new Error(`Language ${language} not found`)
+}
+
+/**
+ * Enum for the highlight.js languages
+ * The strings are the names of the languages in highlight.js (https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md)
+ */
+enum HighlightLanguage {
+  JAVA = 'java',
+  PYTHON = 'python',
+  CPP = 'cpp',
+  C_SHARP = 'csharp',
+  XML = 'xml',
+  GO = 'go',
+  KOTLIN = 'kotlin',
+  R_LANG = 'r',
+  RUST = 'rust',
+  SCALA = 'scala',
+  SCHEME = 'scheme',
+  SWIFT = 'swift',
+  TEXT = 'text'
+}
+
+/**
+ * Gets the highlight.js language for the given language
+ * @param language Language the files were parsed with
+ * @returns The language for highlight.js
+ */
+function getHighlightLanguage(language: LanguageParser | undefined): HighlightLanguage {
+  switch (language) {
+    case LanguageParser.PYTHON:
+      return HighlightLanguage.PYTHON
+    case LanguageParser.CPP:
+    case LanguageParser.CPP2:
+      return HighlightLanguage.CPP
+    case LanguageParser.C_SHARP:
+      return HighlightLanguage.C_SHARP
+    case LanguageParser.EMF_METAMODEL:
+    case LanguageParser.EMF_METAMODEL_DYNAMIC:
+    case LanguageParser.EMF_MODEL:
+    case LanguageParser.SCXML:
+      return HighlightLanguage.XML
+    case LanguageParser.GO:
+      return HighlightLanguage.GO
+    case LanguageParser.KOTLIN:
+      return HighlightLanguage.KOTLIN
+    case LanguageParser.R_LANG:
+      return HighlightLanguage.R_LANG
+    case LanguageParser.RUST:
+      return HighlightLanguage.RUST
+    case LanguageParser.SCALA:
+      return HighlightLanguage.SCALA
+    case LanguageParser.SCHEME:
+      return HighlightLanguage.SCHEME
+    case LanguageParser.SWIFT:
+      return HighlightLanguage.SWIFT
+    case LanguageParser.TEXT:
+      return HighlightLanguage.TEXT
+    case LanguageParser.JAVA:
+    default:
+      return HighlightLanguage.JAVA
+  }
+}
+
+export { LanguageParser, getLanguageParser, HighlightLanguage, getHighlightLanguage }
diff --git a/report-viewer/src/model/Overview.ts b/report-viewer/src/model/Overview.ts
index a59e2ccd0..e5e21b27b 100644
--- a/report-viewer/src/model/Overview.ts
+++ b/report-viewer/src/model/Overview.ts
@@ -1,6 +1,7 @@
 import type Distribution from './Distribution'
 import type { Cluster } from '@/model/Cluster'
 import type { ComparisonListElement } from './ComparisonListElement'
+import type { LanguageParser } from './Language'
 
 /**
  * Model of the Overview file generated by JPlag
@@ -8,7 +9,7 @@ import type { ComparisonListElement } from './ComparisonListElement'
 export class Overview {
   private readonly _submissionFolderPath: Array<string>
   private readonly _baseCodeFolderPath: string
-  private readonly _language: string
+  private readonly _language: LanguageParser
   private readonly _fileExtensions: Array<string>
   private readonly _matchSensitivity: number
   private readonly _submissionIdsToComparisonFileName: Map<string, Map<string, string>>
@@ -22,7 +23,7 @@ export class Overview {
   constructor(
     submissionFolderPath: Array<string>,
     baseCodeFolderPath: string,
-    language: string,
+    language: LanguageParser,
     fileExtensions: Array<string>,
     matchSensitivity: number,
     dateOfExecution: string,
diff --git a/report-viewer/src/model/factories/OverviewFactory.ts b/report-viewer/src/model/factories/OverviewFactory.ts
index 849aa4957..c4523b983 100644
--- a/report-viewer/src/model/factories/OverviewFactory.ts
+++ b/report-viewer/src/model/factories/OverviewFactory.ts
@@ -5,6 +5,7 @@ import store from '@/stores/store'
 import type { Version } from '../Version'
 import versionJson from '@/version.json'
 import Distribution from '../Distribution'
+import { LanguageParser, getLanguageParser } from '../Language'
 
 export class OverviewFactory {
   static reportViewerVersion: Version =
@@ -28,7 +29,7 @@ export class OverviewFactory {
 
     const submissionFolder = json.submission_folder_path as Array<string>
     const baseCodeFolder = ''
-    const language = json.language as string
+    const language = getLanguageParser(json.language as string)
     const fileExtensions = json.file_extensions as Array<string>
     const matchSensitivity = json.match_sensitivity as number
     const jsonSubmissions = json.submission_id_to_display_name as Map<string, string>
@@ -130,7 +131,7 @@ export class OverviewFactory {
         return new Overview(
           [],
           '',
-          '',
+          LanguageParser.JAVA,
           [],
           0,
           '',
diff --git a/report-viewer/src/utils/CodeHighlighter.ts b/report-viewer/src/utils/CodeHighlighter.ts
new file mode 100644
index 000000000..8458eb472
--- /dev/null
+++ b/report-viewer/src/utils/CodeHighlighter.ts
@@ -0,0 +1,31 @@
+import type { HighlightLanguage } from '@/model/Language'
+import hljs from 'highlight.js'
+
+/**
+ * Hightlights the given code with the given language
+ * Splits the resulting html into seperate lines
+ * Source: https://stackoverflow.com/a/70656181
+ * @param code
+ * @param lang
+ * @returns
+ */
+export function highlight(code: string, lang: HighlightLanguage) {
+  const highlightedCode = hljs.highlight(code, { language: lang.valueOf() }).value
+  const openTags: string[] = []
+  const formatedCode = highlightedCode
+    .replace(/(<span [^>]*>)|(<\/span>)|(\n)/g, (match: string) => {
+      if (match === '\n') {
+        return '</span>'.repeat(openTags.length) + '\n' + openTags.join('')
+      }
+
+      if (match === '</span>') {
+        openTags.pop()
+      } else {
+        openTags.push(match)
+      }
+
+      return match
+    })
+    .split('\n')
+  return formatedCode
+}
diff --git a/report-viewer/src/views/ComparisonView.vue b/report-viewer/src/views/ComparisonView.vue
index f35e7b30c..23882c471 100644
--- a/report-viewer/src/views/ComparisonView.vue
+++ b/report-viewer/src/views/ComparisonView.vue
@@ -36,21 +36,27 @@
     <div class="relative bottom-0 right-0 left-0 flex flex-grow space-x-5 p-5 pt-5 justify-between">
       <FilesContainer
         ref="panel1"
-        :submission-id="firstId"
         :files="filesOfFirst"
         :matches="comparison.matchesInFirstSubmission"
-        :anonymous="isAnonymous(firstId)"
-        anonymous-files-owner-default="Submission 1"
+        :file-owner-display-name="
+          isAnonymous(comparison.secondSubmissionId)
+            ? 'Submission 1'
+            : (store().submissionDisplayName(comparison.secondSubmissionId) as string)
+        "
+        :highlight-language="getHighlightLanguage(language)"
         @line-selected="showMatchInSecond"
         class="max-h-0 min-h-full flex-1 overflow-hidden"
       />
       <FilesContainer
         ref="panel2"
-        :submission-id="secondId"
         :files="filesOfSecond"
         :matches="comparison.matchesInSecondSubmissions"
-        :anonymous="isAnonymous(secondId)"
-        anonymous-files-owner-default="Submission 2"
+        :file-owner-display-name="
+          isAnonymous(comparison.secondSubmissionId)
+            ? 'Submission 2'
+            : (store().submissionDisplayName(comparison.secondSubmissionId) as string)
+        "
+        :highlight-language="getHighlightLanguage(language)"
         @line-selected="showMatchInFirst"
         class="max-h-0 min-h-full flex-1 overflow-hidden"
       />
@@ -68,10 +74,11 @@ import { ComparisonFactory } from '@/model/factories/ComparisonFactory'
 import FilesContainer from '@/components/FilesContainer.vue'
 import store from '@/stores/store'
 import Container from '@/components/ContainerComponent.vue'
-
+import { getHighlightLanguage } from '@/model/Language'
 import hljsLightMode from 'highlight.js/styles/vs.css?raw'
 import hljsDarkMode from 'highlight.js/styles/vs2015.css?raw'
 import router from '@/router'
+import { OverviewFactory } from '@/model/factories/OverviewFactory'
 
 const props = defineProps({
   firstId: {
@@ -84,6 +91,7 @@ const props = defineProps({
   }
 })
 
+const language = OverviewFactory.getOverview().language
 const comparison = ComparisonFactory.getComparison(props.firstId, props.secondId)
 
 const filesOfFirst = ref(comparison.filesOfFirstSubmission)

From e9b1d7ad09bc9e8741f5fce2245bcd22606d6393 Mon Sep 17 00:00:00 2001
From: Alexander Vogt <alexander_vogt@outlook.de>
Date: Tue, 29 Aug 2023 17:00:06 +0200
Subject: [PATCH 08/20] more doc

---
 report-viewer/src/components/CodePanel.vue    | 32 ++++++++++++-------
 .../src/components/FilesContainer.vue         |  5 +++
 report-viewer/src/utils/CodeHighlighter.ts    |  9 +++---
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/report-viewer/src/components/CodePanel.vue b/report-viewer/src/components/CodePanel.vue
index f824d3997..3e805de21 100644
--- a/report-viewer/src/components/CodePanel.vue
+++ b/report-viewer/src/components/CodePanel.vue
@@ -6,9 +6,11 @@
     <div @click="collapsed = !collapsed" class="text-center font-bold">
       {{ getFileDisplayName(file) }}
     </div>
+
     <div class="mx-1 overflow-x-auto">
       <div v-if="!collapsed" class="w-fit min-w-full !text-xs">
         <table v-if="file.data.trim() !== ''" class="w-full">
+          <!-- One row in table per code line -->
           <tr
             v-for="(line, index) in codeLines"
             :key="index"
@@ -16,7 +18,9 @@
             :class="{ 'cursor-pointer': line.match !== null }"
             @click="lineSelected(index)"
           >
+            <!-- Line number -->
             <td class="float-right pr-3">{{ index + 1 }}</td>
+            <!-- Code line -->
             <td
               class="w-full"
               :style="{
@@ -27,6 +31,7 @@
             </td>
           </tr>
         </table>
+
         <div v-else class="flex flex-col items-start overflow-x-auto">
           <i>Empty File</i>
         </div>
@@ -69,20 +74,10 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['lineSelected'])
+
 const collapsed = ref(true)
 const lineRefs = ref<HTMLElement[]>([])
 
-function scrollTo(lineNumber: number) {
-  collapsed.value = false
-  nextTick(function () {
-    lineRefs.value[lineNumber - 1].scrollIntoView({ behavior: 'smooth', block: 'center' })
-  })
-}
-
-defineExpose({
-  scrollTo
-})
-
 const codeLines: { line: string; match: null | Match }[] = highlight(
   props.file.data,
   props.highlightLanguage
@@ -99,6 +94,21 @@ function lineSelected(lineIndex: number) {
   }
 }
 
+/**
+ * Scrolls to the line number in the file.
+ * @param lineNumber line number in the file
+ */
+function scrollTo(lineNumber: number) {
+  collapsed.value = false
+  nextTick(function () {
+    lineRefs.value[lineNumber - 1].scrollIntoView({ behavior: 'smooth', block: 'center' })
+  })
+}
+
+defineExpose({
+  scrollTo
+})
+
 /**
  * converts the submissionId to the name in the path of file. If the length of path exceeds 40, then the file path displays the abbreviation.
  * @param file submission file
diff --git a/report-viewer/src/components/FilesContainer.vue b/report-viewer/src/components/FilesContainer.vue
index 73390eee6..4f16abd38 100644
--- a/report-viewer/src/components/FilesContainer.vue
+++ b/report-viewer/src/components/FilesContainer.vue
@@ -71,6 +71,11 @@ defineEmits(['lineSelected'])
 
 const codePanels: Ref<(typeof CodePanel)[]> = ref([])
 
+/**
+ * Scrolls to the given file and line in the container.
+ * @param file Name of the file to scroll to.
+ * @param line Line to scroll to.
+ */
 function scrollTo(file: string, line: number) {
   console.log('scrolling to', file)
   const fileIndex = Array.from(props.files).findIndex((f) => f.fileName === file)
diff --git a/report-viewer/src/utils/CodeHighlighter.ts b/report-viewer/src/utils/CodeHighlighter.ts
index 8458eb472..6c1d19e85 100644
--- a/report-viewer/src/utils/CodeHighlighter.ts
+++ b/report-viewer/src/utils/CodeHighlighter.ts
@@ -2,11 +2,12 @@ import type { HighlightLanguage } from '@/model/Language'
 import hljs from 'highlight.js'
 
 /**
- * Hightlights the given code with the given language
- * Splits the resulting html into seperate lines
+ * Hightlights the given code with the given language.
+ * Splits the resulting html into seperate lines.
+ * The returned string is an array of html lines, consisting of spans with the hljs classes and the code.
  * Source: https://stackoverflow.com/a/70656181
- * @param code
- * @param lang
+ * @param code Code to highlight
+ * @param lang Language to highlight the code with
  * @returns
  */
 export function highlight(code: string, lang: HighlightLanguage) {

From a13761cb5584d807c2ec7bffab2fb8e43d74053a Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Thu, 31 Aug 2023 19:53:08 +0200
Subject: [PATCH 09/20] add llvm as language

---
 report-viewer/src/components/FilesContainer.vue | 1 -
 report-viewer/src/model/Language.ts             | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/report-viewer/src/components/FilesContainer.vue b/report-viewer/src/components/FilesContainer.vue
index fbe0271e4..7965163db 100644
--- a/report-viewer/src/components/FilesContainer.vue
+++ b/report-viewer/src/components/FilesContainer.vue
@@ -78,7 +78,6 @@ const codePanels: Ref<(typeof CodePanel)[]> = ref([])
  * @param line Line to scroll to.
  */
 function scrollTo(file: string, line: number) {
-  console.log('scrolling to', file)
   const fileIndex = Array.from(props.files).findIndex((f) => f.fileName === file)
   if (fileIndex !== -1) {
     codePanels.value[fileIndex].scrollTo(line)
diff --git a/report-viewer/src/model/Language.ts b/report-viewer/src/model/Language.ts
index 045223eef..ef1051e77 100644
--- a/report-viewer/src/model/Language.ts
+++ b/report-viewer/src/model/Language.ts
@@ -18,7 +18,8 @@ enum LanguageParser {
   SCHEME = 'SchemeR4RS Parser [basic markup]',
   SWIFT = 'Swift Parser',
   TEXT = 'Text Parser (naive)',
-  SCXML = 'SCXML (Statechart XML)'
+  SCXML = 'SCXML (Statechart XML)',
+  LLVM = 'LLVMIR Parser'
 }
 
 /**

From 930358ec1fff3da4a314c525e3d5fe9039e5b466 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Thu, 31 Aug 2023 19:55:07 +0200
Subject: [PATCH 10/20] remane languages to be uniform

---
 report-viewer/src/model/Language.ts | 48 ++++++++++++++---------------
 report-viewer/src/model/Overview.ts |  6 ++--
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/report-viewer/src/model/Language.ts b/report-viewer/src/model/Language.ts
index ef1051e77..a9b9b91f8 100644
--- a/report-viewer/src/model/Language.ts
+++ b/report-viewer/src/model/Language.ts
@@ -1,7 +1,7 @@
 /**
  * Enum for the language parsers JPlag supports
  */
-enum LanguageParser {
+enum ParserLanguage {
   JAVA = 'Javac based AST plugin',
   PYTHON = 'Python3 Parser',
   CPP = 'C/C++ Scanner [basic markup]',
@@ -27,10 +27,10 @@ enum LanguageParser {
  * @param language String representation of language the files were parsed with
  * @returns The LanguageParser enum value
  */
-function getLanguageParser(language: string): LanguageParser {
-  for (const key in LanguageParser) {
-    if (LanguageParser[key as keyof typeof LanguageParser] === language) {
-      return LanguageParser[key as keyof typeof LanguageParser]
+function getLanguageParser(language: string): ParserLanguage {
+  for (const key in ParserLanguage) {
+    if (ParserLanguage[key as keyof typeof ParserLanguage] === language) {
+      return ParserLanguage[key as keyof typeof ParserLanguage]
     }
   }
 
@@ -62,40 +62,40 @@ enum HighlightLanguage {
  * @param language Language the files were parsed with
  * @returns The language for highlight.js
  */
-function getHighlightLanguage(language: LanguageParser | undefined): HighlightLanguage {
+function getHighlightLanguage(language: ParserLanguage | undefined): HighlightLanguage {
   switch (language) {
-    case LanguageParser.PYTHON:
+    case ParserLanguage.PYTHON:
       return HighlightLanguage.PYTHON
-    case LanguageParser.CPP:
-    case LanguageParser.CPP2:
+    case ParserLanguage.CPP:
+    case ParserLanguage.CPP2:
       return HighlightLanguage.CPP
-    case LanguageParser.C_SHARP:
+    case ParserLanguage.C_SHARP:
       return HighlightLanguage.C_SHARP
-    case LanguageParser.EMF_METAMODEL:
-    case LanguageParser.EMF_METAMODEL_DYNAMIC:
-    case LanguageParser.EMF_MODEL:
-    case LanguageParser.SCXML:
+    case ParserLanguage.EMF_METAMODEL:
+    case ParserLanguage.EMF_METAMODEL_DYNAMIC:
+    case ParserLanguage.EMF_MODEL:
+    case ParserLanguage.SCXML:
       return HighlightLanguage.XML
-    case LanguageParser.GO:
+    case ParserLanguage.GO:
       return HighlightLanguage.GO
-    case LanguageParser.KOTLIN:
+    case ParserLanguage.KOTLIN:
       return HighlightLanguage.KOTLIN
-    case LanguageParser.R_LANG:
+    case ParserLanguage.R_LANG:
       return HighlightLanguage.R_LANG
-    case LanguageParser.RUST:
+    case ParserLanguage.RUST:
       return HighlightLanguage.RUST
-    case LanguageParser.SCALA:
+    case ParserLanguage.SCALA:
       return HighlightLanguage.SCALA
-    case LanguageParser.SCHEME:
+    case ParserLanguage.SCHEME:
       return HighlightLanguage.SCHEME
-    case LanguageParser.SWIFT:
+    case ParserLanguage.SWIFT:
       return HighlightLanguage.SWIFT
-    case LanguageParser.TEXT:
+    case ParserLanguage.TEXT:
       return HighlightLanguage.TEXT
-    case LanguageParser.JAVA:
+    case ParserLanguage.JAVA:
     default:
       return HighlightLanguage.JAVA
   }
 }
 
-export { LanguageParser, getLanguageParser, HighlightLanguage, getHighlightLanguage }
+export { ParserLanguage, getLanguageParser, HighlightLanguage, getHighlightLanguage }
diff --git a/report-viewer/src/model/Overview.ts b/report-viewer/src/model/Overview.ts
index e4638b3fd..63b705dde 100644
--- a/report-viewer/src/model/Overview.ts
+++ b/report-viewer/src/model/Overview.ts
@@ -2,7 +2,7 @@ import type { Distribution } from './Distribution'
 import type { Cluster } from '@/model/Cluster'
 import type { ComparisonListElement } from './ComparisonListElement'
 import type { MetricType } from './MetricType'
-import type { LanguageParser } from './Language'
+import type { ParserLanguage } from './Language'
 
 /**
  * Model of the Overview file generated by JPlag
@@ -10,7 +10,7 @@ import type { LanguageParser } from './Language'
 export class Overview {
   private readonly _submissionFolderPath: Array<string>
   private readonly _baseCodeFolderPath: string
-  private readonly _language: LanguageParser
+  private readonly _language: ParserLanguage
   private readonly _fileExtensions: Array<string>
   private readonly _matchSensitivity: number
   private readonly _dateOfExecution: string
@@ -23,7 +23,7 @@ export class Overview {
   constructor(
     submissionFolderPath: Array<string>,
     baseCodeFolderPath: string,
-    language: LanguageParser,
+    language: ParserLanguage,
     fileExtensions: Array<string>,
     matchSensitivity: number,
     dateOfExecution: string,

From eb4841ed46a2dfc3f64d695d290cf4452b08b678 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Fri, 1 Sep 2023 15:56:50 +0200
Subject: [PATCH 11/20] log scale

---
 report-viewer/src/components/DistributionDiagram.vue |  8 +++++++-
 report-viewer/src/views/OverviewView.vue             | 12 +++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/report-viewer/src/components/DistributionDiagram.vue b/report-viewer/src/components/DistributionDiagram.vue
index c53e51433..8d4c437a9 100644
--- a/report-viewer/src/components/DistributionDiagram.vue
+++ b/report-viewer/src/components/DistributionDiagram.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type PropType } from 'vue'
+import { computed, type Prop, type PropType } from 'vue'
 import { Bar } from 'vue-chartjs'
 import { Chart, registerables } from 'chart.js'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
@@ -22,6 +22,11 @@ const props = defineProps({
   distribution: {
     type: Object as PropType<Distribution>,
     required: true
+  },
+  xScale: {
+    type: String as PropType<'linear' | 'logarithmic'>,
+    required: false,
+    default: 'linear'
   }
 })
 
@@ -70,6 +75,7 @@ const options = computed(() => {
         //Highest count of submissions in a percentage range. We set the diagrams maximum shown value to maxVal + 5,
         //otherwise maximum is set to the highest count of submissions and is one bar always reaches the end.
         suggestedMax: maxVal.value + 5,
+        type: props.xScale,
         ticks: {
           color: graphColors.ticksAndFont.value
         },
diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue
index 9bd976329..4da8aca4d 100644
--- a/report-viewer/src/views/OverviewView.vue
+++ b/report-viewer/src/views/OverviewView.vue
@@ -27,6 +27,7 @@
         <h2>Distribution of Comparisons:</h2>
         <DistributionDiagram
           :distribution="overview.distribution[selectedDistributionDiagramMetric]"
+          :x-scale="distributionDiagramScaleX"
           class="h-2/3 w-full"
         />
         <div class="flex flex-grow flex-col space-y-1">
@@ -39,6 +40,14 @@
                 (i: number) => (selectedDistributionDiagramMetric = getMetricFromNumber(i))
               "
             />
+            <OptionsSelector
+              class="mt-2"
+              name="Scale x-Axis:"
+              :labels="['Linear', 'Logarithmic']"
+              @selection-changed="
+                (i: number) => (distributionDiagramScaleX = i == 0 ? 'linear' : 'logarithmic')
+              "
+            />
           </ScrollableComponent>
         </div>
       </Container>
@@ -77,7 +86,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onErrorCaptured, ref, watch } from 'vue'
+import { computed, onErrorCaptured, ref, watch, type Ref } from 'vue'
 import { router } from '@/router'
 import DistributionDiagram from '@/components/DistributionDiagram.vue'
 import ComparisonsTable from '@/components/ComparisonsTable.vue'
@@ -96,6 +105,7 @@ const overview = OverviewFactory.getOverview()
 
 const searchString = ref('')
 const comparisonTableSortingMetric = ref(MetricType.AVERAGE)
+const distributionDiagramScaleX: Ref<'linear' | 'logarithmic'> = ref('linear')
 
 /**
  * This funtion gets called when the search bar for the compariosn table has been updated.

From a669436ff3a959b781f0e8799879d2077c44f152 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Fri, 1 Sep 2023 16:30:13 +0200
Subject: [PATCH 12/20] fix small issues

---
 report-viewer/src/components/CodePanel.vue      | 8 ++++++--
 report-viewer/src/components/FilesContainer.vue | 1 -
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/report-viewer/src/components/CodePanel.vue b/report-viewer/src/components/CodePanel.vue
index af2043b08..c057ae5a6 100644
--- a/report-viewer/src/components/CodePanel.vue
+++ b/report-viewer/src/components/CodePanel.vue
@@ -9,7 +9,11 @@
 
     <div class="mx-1 overflow-x-auto">
       <div v-if="!collapsed" class="w-fit min-w-full !text-xs">
-        <table v-if="file.data.trim() !== ''" class="w-full">
+        <table
+          v-if="file.data.trim() !== ''"
+          class="w-full"
+          :aria-describedby="`Content of file ${file.fileName}`"
+        >
           <!-- One row in table per code line -->
           <tr
             v-for="(line, index) in codeLines"
@@ -100,7 +104,7 @@ function lineSelected(lineIndex: number) {
 function scrollTo(lineNumber: number) {
   collapsed.value = false
   nextTick(function () {
-    lineRefs.value[lineNumber - 1].scrollIntoView({ behavior: 'smooth', block: 'center' })
+    lineRefs.value[lineNumber - 1].scrollIntoView({ block: 'center' })
   })
 }
 
diff --git a/report-viewer/src/components/FilesContainer.vue b/report-viewer/src/components/FilesContainer.vue
index 7965163db..f9fb206dc 100644
--- a/report-viewer/src/components/FilesContainer.vue
+++ b/report-viewer/src/components/FilesContainer.vue
@@ -29,7 +29,6 @@
 <script setup lang="ts">
 import type { SubmissionFile } from '@/stores/state'
 import CodePanel from '@/components/CodePanel.vue'
-import { store } from '@/stores/store'
 import Container from './ContainerComponent.vue'
 import ScrollableComponent from './ScrollableComponent.vue'
 import { VueDraggableNext } from 'vue-draggable-next'

From 5cf3ffe65ee1c812695f7ce4bd0ac736529e7832 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Fri, 1 Sep 2023 21:14:51 +0200
Subject: [PATCH 13/20] ensure no fractions

---
 report-viewer/src/components/DistributionDiagram.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/report-viewer/src/components/DistributionDiagram.vue b/report-viewer/src/components/DistributionDiagram.vue
index 8d4c437a9..8573ece66 100644
--- a/report-viewer/src/components/DistributionDiagram.vue
+++ b/report-viewer/src/components/DistributionDiagram.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type Prop, type PropType } from 'vue'
+import { computed, type PropType } from 'vue'
 import { Bar } from 'vue-chartjs'
 import { Chart, registerables } from 'chart.js'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
@@ -77,7 +77,13 @@ const options = computed(() => {
         suggestedMax: maxVal.value + 5,
         type: props.xScale,
         ticks: {
-          color: graphColors.ticksAndFont.value
+          color: graphColors.ticksAndFont.value,
+          // ensures that in log mode only integer values are shown
+          callback: function (value: any) {
+            if (value % 1 === 0) {
+              return value
+            }
+          }
         },
         grid: {
           color: graphColors.gridLines.value

From 65d16842ae9610e89460b913851d1d551e1307eb Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Fri, 1 Sep 2023 21:22:36 +0200
Subject: [PATCH 14/20] ensure tick readability

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

diff --git a/report-viewer/src/components/DistributionDiagram.vue b/report-viewer/src/components/DistributionDiagram.vue
index 8573ece66..ff00f9a34 100644
--- a/report-viewer/src/components/DistributionDiagram.vue
+++ b/report-viewer/src/components/DistributionDiagram.vue
@@ -77,6 +77,9 @@ const options = computed(() => {
         suggestedMax: maxVal.value + 5,
         type: props.xScale,
         ticks: {
+          // ensures that in log mode tick labels are not overlappein
+          minRotation: props.xScale === 'logarithmic' ? 30 : 0,
+          autoSkipPadding: 10,
           color: graphColors.ticksAndFont.value,
           // ensures that in log mode only integer values are shown
           callback: function (value: any) {

From 836a1a92423f74f07b8e998b5cd819f060b47390 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sat, 2 Sep 2023 11:07:03 +0200
Subject: [PATCH 15/20] place log ticks evenly appart

---
 .../src/components/DistributionDiagram.vue         | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/report-viewer/src/components/DistributionDiagram.vue b/report-viewer/src/components/DistributionDiagram.vue
index ff00f9a34..456d3e257 100644
--- a/report-viewer/src/components/DistributionDiagram.vue
+++ b/report-viewer/src/components/DistributionDiagram.vue
@@ -74,16 +74,24 @@ const options = computed(() => {
       x: {
         //Highest count of submissions in a percentage range. We set the diagrams maximum shown value to maxVal + 5,
         //otherwise maximum is set to the highest count of submissions and is one bar always reaches the end.
-        suggestedMax: maxVal.value + 5,
+        suggestedMax:
+          props.xScale === 'linear'
+            ? maxVal.value + 5
+            : 10 ** Math.ceil(Math.log10(maxVal.value + 5)),
         type: props.xScale,
         ticks: {
           // ensures that in log mode tick labels are not overlappein
           minRotation: props.xScale === 'logarithmic' ? 30 : 0,
           autoSkipPadding: 10,
           color: graphColors.ticksAndFont.value,
-          // ensures that in log mode only integer values are shown
+          // ensures that in log mode ticks are placed evenly appart
           callback: function (value: any) {
-            if (value % 1 === 0) {
+            console.log(value)
+            if (props.xScale === 'logarithmic' && (value + '').match(/1(0)*[^1-9.]/)) {
+              console.log('match')
+              return value
+            }
+            if (props.xScale !== 'logarithmic') {
               return value
             }
           }

From fa1c98b12097e49bb6d7b835730c65d246121a69 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Sat, 2 Sep 2023 13:28:04 +0200
Subject: [PATCH 16/20] remove console log

---
 report-viewer/src/components/DistributionDiagram.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/report-viewer/src/components/DistributionDiagram.vue b/report-viewer/src/components/DistributionDiagram.vue
index 456d3e257..c6ca774d5 100644
--- a/report-viewer/src/components/DistributionDiagram.vue
+++ b/report-viewer/src/components/DistributionDiagram.vue
@@ -86,9 +86,7 @@ const options = computed(() => {
           color: graphColors.ticksAndFont.value,
           // ensures that in log mode ticks are placed evenly appart
           callback: function (value: any) {
-            console.log(value)
             if (props.xScale === 'logarithmic' && (value + '').match(/1(0)*[^1-9.]/)) {
-              console.log('match')
               return value
             }
             if (props.xScale !== 'logarithmic') {

From 3349e681d19a5edc477a86c20256ca6f4bc569aa Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 5 Sep 2023 16:45:30 +0200
Subject: [PATCH 17/20] Dependency(deps): Bump info.picocli:picocli from 4.7.4
 to 4.7.5 (#1265)

Bumps [info.picocli:picocli](https://github.com/remkop/picocli) from 4.7.4 to 4.7.5.
- [Release notes](https://github.com/remkop/picocli/releases)
- [Changelog](https://github.com/remkop/picocli/blob/main/RELEASE-NOTES.md)
- [Commits](https://github.com/remkop/picocli/compare/v4.7.4...v4.7.5)

---
updated-dependencies:
- dependency-name: info.picocli:picocli
  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>
---
 cli/pom.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cli/pom.xml b/cli/pom.xml
index 3cf3fce27..2c542543e 100644
--- a/cli/pom.xml
+++ b/cli/pom.xml
@@ -116,7 +116,7 @@
         <dependency>
             <groupId>info.picocli</groupId>
             <artifactId>picocli</artifactId>
-            <version>4.7.4</version>
+            <version>4.7.5</version>
         </dependency>
     </dependencies>
     <build>

From dd59e4d53174331008d52146542e0dcaaa64c90c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 5 Sep 2023 16:45:47 +0200
Subject: [PATCH 18/20] Dependency(deps): Bump org.scalameta:scalameta_2.13
 from 4.8.8 to 4.8.9 (#1266)

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

---
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 4fffb81b9..67138fb22 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.8</version>
+            <version>4.8.9</version>
         </dependency>
     </dependencies>
 

From 9a2084766defc4836e1b7692d77965cca8b1b429 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 5 Sep 2023 16:46:28 +0200
Subject: [PATCH 19/20] Dependency(deps): Bump
 com.diffplug.spotless:spotless-maven-plugin from 2.38.0 to 2.39.0 (#1267)

Bumps [com.diffplug.spotless:spotless-maven-plugin](https://github.com/diffplug/spotless) from 2.38.0 to 2.39.0.
- [Changelog](https://github.com/diffplug/spotless/blob/main/CHANGES.md)
- [Commits](https://github.com/diffplug/spotless/compare/lib/2.38.0...lib/2.39.0)

---
updated-dependencies:
- dependency-name: com.diffplug.spotless:spotless-maven-plugin
  dependency-type: direct:production
  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>
---
 pom.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pom.xml b/pom.xml
index bd672d1b2..b26b5a3c3 100644
--- a/pom.xml
+++ b/pom.xml
@@ -74,7 +74,7 @@
 
         <maven.compiler.source>17</maven.compiler.source>
         <maven.compiler.target>17</maven.compiler.target>
-        <spotless.version>2.38.0</spotless.version>
+        <spotless.version>2.39.0</spotless.version>
         <slf4j.version>2.0.7</slf4j.version>
         <junit.version>5.10.0</junit.version>
 

From 88c94f2ceef3bc315c7168bcf4378a732b536b05 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <39801116+Kr0nox@users.noreply.github.com>
Date: Tue, 5 Sep 2023 16:47:57 +0200
Subject: [PATCH 20/20] Rework Actions (#1277)

* update java jobs

* update report viewer jobs

* add paths to push

* add build paths on push

* fix maven call

* simplify globs
---
 .github/workflows/maven.yml                          | 10 ++++++++++
 ...-viewer-test.yml => report-viewer-build-test.yml} |  3 +++
 .github/workflows/report-viewer-dev.yml              |  3 +++
 .github/workflows/report-viewer-e2e.yml              |  3 +++
 .github/workflows/report-viewer-lint.yml             |  6 +++++-
 .github/workflows/report-viewer-prettier.yml         |  9 +++++++--
 ...eport-viewer.yml => report-viewer-sonarcloud.yml} |  1 +
 .github/workflows/report-viewer-unit.yml             |  3 +++
 .github/workflows/sonarcloud-branch.yml              |  5 +++++
 .github/workflows/spotless.yml                       | 12 +++++++++++-
 10 files changed, 51 insertions(+), 4 deletions(-)
 rename .github/workflows/{report-viewer-test.yml => report-viewer-build-test.yml} (94%)
 rename .github/workflows/{sonarcloud-report-viewer.yml => report-viewer-sonarcloud.yml} (94%)

diff --git a/.github/workflows/maven.yml b/.github/workflows/maven.yml
index a9ec43e97..e688c18c0 100644
--- a/.github/workflows/maven.yml
+++ b/.github/workflows/maven.yml
@@ -2,8 +2,18 @@ name: Build
 
 on:
   push: 
+    paths:
+      - ".github/workflows/maven.yml"
+      - "**/pom.xml"
+      - "**.java"
+      - "**.g4"
   pull_request:
     types: [opened, synchronize, reopened]
+    paths:
+      - ".github/workflows/maven.yml"
+      - "**/pom.xml"
+      - "**.java"
+      - "**.g4"
   
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
diff --git a/.github/workflows/report-viewer-test.yml b/.github/workflows/report-viewer-build-test.yml
similarity index 94%
rename from .github/workflows/report-viewer-test.yml
rename to .github/workflows/report-viewer-build-test.yml
index 3093d2457..050c87511 100644
--- a/.github/workflows/report-viewer-test.yml
+++ b/.github/workflows/report-viewer-build-test.yml
@@ -4,6 +4,9 @@ on:
  workflow_dispatch:
  pull_request:
     types: [opened, synchronize, reopened]
+    paths:
+      - ".github/workflows/report-viewer-build-test.yml"
+      - "report-viewer/**"
       
 jobs:
   pre_job:
diff --git a/.github/workflows/report-viewer-dev.yml b/.github/workflows/report-viewer-dev.yml
index 854cece1f..4302772ab 100644
--- a/.github/workflows/report-viewer-dev.yml
+++ b/.github/workflows/report-viewer-dev.yml
@@ -5,6 +5,9 @@ on:
  push:
     branches:
       - develop
+    paths:
+      - ".github/workflows/report-viewer-dev.yml"
+      - "report-viewer/**"
       
 jobs:
   build-and-deploy:
diff --git a/.github/workflows/report-viewer-e2e.yml b/.github/workflows/report-viewer-e2e.yml
index 7ebb5bda9..1cdbc8f05 100644
--- a/.github/workflows/report-viewer-e2e.yml
+++ b/.github/workflows/report-viewer-e2e.yml
@@ -4,6 +4,9 @@ on:
   workflow_dispatch:
   pull_request:
     types: [opened, synchronize, reopened]
+    paths:
+      - ".github/workflows/report-viewer-e2e.yml"
+      - "report-viewer/**"
 
 jobs:
   pre_job:
diff --git a/.github/workflows/report-viewer-lint.yml b/.github/workflows/report-viewer-lint.yml
index 91ade9c3e..d1a055d9e 100644
--- a/.github/workflows/report-viewer-lint.yml
+++ b/.github/workflows/report-viewer-lint.yml
@@ -5,9 +5,13 @@ on:
   workflow_dispatch:
   push:
     path:
-      - report-viewer/**
+      - ".github/workflows/report-viewer-lint.yml"
+      - "report-viewer/**"
   pull_request:
     types: [opened, synchronize, reopened]
+    paths:
+      - ".github/workflows/report-viewer-lint.yml"
+      - "report-viewer/**"
       
 jobs:
   pre_job:
diff --git a/.github/workflows/report-viewer-prettier.yml b/.github/workflows/report-viewer-prettier.yml
index 4e887afb2..4505b87a0 100644
--- a/.github/workflows/report-viewer-prettier.yml
+++ b/.github/workflows/report-viewer-prettier.yml
@@ -3,10 +3,15 @@ name: Report Viewer Prettier Check Workflow # Checks the report viewer against t
 on:
   workflow_dispatch:
   push:
-    path:
-      - report-viewer/**
+    paths:
+      - ".github/workflows/report-viewer-prettier.yml"
+      - "report-viewer/**"
   pull_request:
     types: [opened, synchronize, reopened]
+    paths:
+      - ".github/workflows/report-viewer-prettier.yml"
+      - "report-viewer/**"
+
       
 jobs:
   pre_job:
diff --git a/.github/workflows/sonarcloud-report-viewer.yml b/.github/workflows/report-viewer-sonarcloud.yml
similarity index 94%
rename from .github/workflows/sonarcloud-report-viewer.yml
rename to .github/workflows/report-viewer-sonarcloud.yml
index 6541adb2b..c823e8d69 100644
--- a/.github/workflows/sonarcloud-report-viewer.yml
+++ b/.github/workflows/report-viewer-sonarcloud.yml
@@ -21,6 +21,7 @@ jobs:
   sonarcloud:
     name: SonarCloud
     runs-on: ubuntu-latest
+    if: ${{ github.actor != 'dependabot[bot]' }}
     steps:
       - uses: actions/checkout@v3
         with:
diff --git a/.github/workflows/report-viewer-unit.yml b/.github/workflows/report-viewer-unit.yml
index 79e35e887..199e81583 100644
--- a/.github/workflows/report-viewer-unit.yml
+++ b/.github/workflows/report-viewer-unit.yml
@@ -4,6 +4,9 @@ on:
   workflow_dispatch:
   pull_request:
     types: [opened, synchronize, reopened]
+    paths:
+      - ".github/workflows/report-viewer-unit.yml"
+      - "report-viewer/**"
 
 jobs:
   pre_job:
diff --git a/.github/workflows/sonarcloud-branch.yml b/.github/workflows/sonarcloud-branch.yml
index 93c743268..ce89117e8 100644
--- a/.github/workflows/sonarcloud-branch.yml
+++ b/.github/workflows/sonarcloud-branch.yml
@@ -5,6 +5,11 @@ on:
     branches:
       - main
       - develop
+    paths:
+      - ".github/workflows/sonarcloud-branch.yml"
+      - "**/pom.xml"
+      - "**.java"
+      - "**.g4"
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
diff --git a/.github/workflows/spotless.yml b/.github/workflows/spotless.yml
index a920d8faf..4fe4ce8c7 100644
--- a/.github/workflows/spotless.yml
+++ b/.github/workflows/spotless.yml
@@ -1,9 +1,19 @@
 name: Spotless Style Check
 
 on:
-  push: 
+  push:
+    paths:
+      - ".github/workflows/spotless.yml"
+      - "**/pom.xml"
+      - "**.java"
+      - "**.g4"
   pull_request:
     types: [opened, synchronize, reopened]
+    paths:
+      - ".github/workflows/spotless.yml"
+      - "**/pom.xml"
+      - "**.java"
+      - "**.g4"
   
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch: