From d1db0e98dc071fda46d6fb8ecbfdfc8251555e04 Mon Sep 17 00:00:00 2001
From: Olmo Kramer <olmo@codegrade.com>
Date: Thu, 14 Sep 2023 11:08:21 +0200
Subject: [PATCH 01/10] Allow passing multiple options in the "Advanced" group

By default, `picocli` sets `exclusive = true` on `ArgGroup`s, which
means that it is not allowed to pass multiple options within the group
[1].

[1] https://picocli.info/#_mutually_exclusive_options
---
 cli/src/main/java/de/jplag/cli/CliOptions.java | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cli/src/main/java/de/jplag/cli/CliOptions.java b/cli/src/main/java/de/jplag/cli/CliOptions.java
index 573707b86..c55e71f3b 100644
--- a/cli/src/main/java/de/jplag/cli/CliOptions.java
+++ b/cli/src/main/java/de/jplag/cli/CliOptions.java
@@ -53,7 +53,7 @@ public class CliOptions implements Runnable {
             "--result-directory"}, description = "Name of the directory in which the comparison results will be stored (default: result)%n")
     public String resultFolder = "results";
 
-    @ArgGroup(heading = "Advanced%n")
+    @ArgGroup(heading = "Advanced%n", exclusive = false)
     public Advanced advanced = new Advanced();
 
     @ArgGroup(validate = false, heading = "Clustering%n")

From 36dae0ffca407d2d6e69d15329ad45f4805d84fa Mon Sep 17 00:00:00 2001
From: Olmo Kramer <olmo@codegrade.com>
Date: Thu, 14 Sep 2023 11:33:58 +0200
Subject: [PATCH 02/10] Add test for the advanced options group

---
 .../java/de/jplag/cli/AdvancedGroupTest.java  | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 cli/src/test/java/de/jplag/cli/AdvancedGroupTest.java

diff --git a/cli/src/test/java/de/jplag/cli/AdvancedGroupTest.java b/cli/src/test/java/de/jplag/cli/AdvancedGroupTest.java
new file mode 100644
index 000000000..bc88af731
--- /dev/null
+++ b/cli/src/test/java/de/jplag/cli/AdvancedGroupTest.java
@@ -0,0 +1,23 @@
+package de.jplag.cli;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+
+import java.util.Arrays;
+
+import org.junit.jupiter.api.Test;
+
+class AdvancedGroupTest extends CommandLineInterfaceTest {
+    private static final String SUFFIXES = ".sc,.scala";
+
+    private static final double SIMILARITY_THRESHOLD = 0.5;
+
+    /**
+     * Verify that it is possible to set multiple options in the "advanced" options group.
+     */
+    @Test
+    void testNotExclusive() throws CliException {
+        buildOptionsFromCLI(defaultArguments().suffixes(SUFFIXES).similarityThreshold(SIMILARITY_THRESHOLD));
+        assertEquals(Arrays.stream(SUFFIXES.split(",")).toList(), options.fileSuffixes());
+        assertEquals(0.5, options.similarityThreshold());
+    }
+}

From 77e22dd78a90c4d165469e42c37cb8a3ba1f3b6e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 27 Sep 2023 18:04:40 +0200
Subject: [PATCH 03/10] Dependency(deps-dev): Bump eslint from 8.49.0 to 8.50.0
 in /report-viewer (#1318)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 report-viewer/package-lock.json | 16 ++++++++--------
 report-viewer/package.json      |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/report-viewer/package-lock.json b/report-viewer/package-lock.json
index 4c063d310..8cae957e9 100644
--- a/report-viewer/package-lock.json
+++ b/report-viewer/package-lock.json
@@ -35,7 +35,7 @@
         "@vue/test-utils": "^2.4.1",
         "@vue/tsconfig": "^0.4.0",
         "autoprefixer": "^10.4.15",
-        "eslint": "^8.49.0",
+        "eslint": "^8.50.0",
         "eslint-plugin-vue": "^9.17.0",
         "husky": "^8.0.0",
         "jsdom": "^22.1.0",
@@ -483,9 +483,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.49.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.49.0.tgz",
-      "integrity": "sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==",
+      "version": "8.50.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.50.0.tgz",
+      "integrity": "sha512-NCC3zz2+nvYd+Ckfh87rA47zfu2QsQpvc6k1yzTk+b9KzRj0wkGa8LSoGOXN6Zv4lRf/EIoZ80biDh9HOI+RNQ==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2410,15 +2410,15 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.49.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.49.0.tgz",
-      "integrity": "sha512-jw03ENfm6VJI0jA9U+8H5zfl5b+FvuU3YYvZRdZHOlU2ggJkxrlkJH4HcDrZpj6YwD8kuYqvQM8LyesoazrSOQ==",
+      "version": "8.50.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.50.0.tgz",
+      "integrity": "sha512-FOnOGSuFuFLv/Sa+FDVRZl4GGVAAFFi8LecRsI5a1tMO5HIE8nCm4ivAlzt4dT3ol/PaaGC0rJEEXQmHJBGoOg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.2",
-        "@eslint/js": "8.49.0",
+        "@eslint/js": "8.50.0",
         "@humanwhocodes/config-array": "^0.11.11",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
diff --git a/report-viewer/package.json b/report-viewer/package.json
index c88eef012..338c1d650 100644
--- a/report-viewer/package.json
+++ b/report-viewer/package.json
@@ -44,7 +44,7 @@
     "@vue/test-utils": "^2.4.1",
     "@vue/tsconfig": "^0.4.0",
     "autoprefixer": "^10.4.15",
-    "eslint": "^8.49.0",
+    "eslint": "^8.50.0",
     "eslint-plugin-vue": "^9.17.0",
     "husky": "^8.0.0",
     "jsdom": "^22.1.0",

From 8f0f5f78248a7805f647cf0192ba69efdae49ef7 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 27 Sep 2023 18:05:19 +0200
Subject: [PATCH 04/10] Dependency(deps-dev): Bump @types/node from 18.17.17 to
 18.18.0 in /report-viewer (#1315)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 report-viewer/package-lock.json | 8 ++++----
 report-viewer/package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/report-viewer/package-lock.json b/report-viewer/package-lock.json
index 8cae957e9..23126411b 100644
--- a/report-viewer/package-lock.json
+++ b/report-viewer/package-lock.json
@@ -28,7 +28,7 @@
         "@playwright/test": "^1.38.0",
         "@rushstack/eslint-patch": "^1.4.0",
         "@types/jsdom": "^21.1.3",
-        "@types/node": "^18.11.9",
+        "@types/node": "^18.18.0",
         "@vitejs/plugin-vue": "^4.3.4",
         "@vue/eslint-config-prettier": "^8.0.0",
         "@vue/eslint-config-typescript": "^11.0.3",
@@ -784,9 +784,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.17.17",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.17.tgz",
-      "integrity": "sha512-cOxcXsQ2sxiwkykdJqvyFS+MLQPLvIdwh5l6gNg8qF6s+C7XSkEWOZjK+XhUZd+mYvHV/180g2cnCcIl4l06Pw==",
+      "version": "18.18.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.0.tgz",
+      "integrity": "sha512-3xA4X31gHT1F1l38ATDIL9GpRLdwVhnEFC8Uikv5ZLlXATwrCYyPq7ZWHxzxc3J/30SUiwiYT+bQe0/XvKlWbw==",
       "dev": true
     },
     "node_modules/@types/semver": {
diff --git a/report-viewer/package.json b/report-viewer/package.json
index 338c1d650..cd8090f28 100644
--- a/report-viewer/package.json
+++ b/report-viewer/package.json
@@ -37,7 +37,7 @@
     "@playwright/test": "^1.38.0",
     "@rushstack/eslint-patch": "^1.4.0",
     "@types/jsdom": "^21.1.3",
-    "@types/node": "^18.11.9",
+    "@types/node": "^18.18.0",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^11.0.3",

From dd1a20d99ff08d5881df09d09d106752509fcc71 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 27 Sep 2023 19:19:04 +0200
Subject: [PATCH 05/10] Dependency(deps-dev): Bump @playwright/test from 1.38.0
 to 1.38.1 in /report-viewer (#1314)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 report-viewer/package-lock.json | 24 ++++++++++++------------
 report-viewer/package.json      |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/report-viewer/package-lock.json b/report-viewer/package-lock.json
index 23126411b..96d643e7f 100644
--- a/report-viewer/package-lock.json
+++ b/report-viewer/package-lock.json
@@ -25,7 +25,7 @@
         "vue-virtual-scroller": "^2.0.0-beta.8"
       },
       "devDependencies": {
-        "@playwright/test": "^1.38.0",
+        "@playwright/test": "^1.38.1",
         "@rushstack/eslint-patch": "^1.4.0",
         "@types/jsdom": "^21.1.3",
         "@types/node": "^18.18.0",
@@ -716,12 +716,12 @@
       "dev": true
     },
     "node_modules/@playwright/test": {
-      "version": "1.38.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.0.tgz",
-      "integrity": "sha512-xis/RXXsLxwThKnlIXouxmIvvT3zvQj1JE39GsNieMUrMpb3/GySHDh2j8itCG22qKVD4MYLBp7xB73cUW/UUw==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz",
+      "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.38.0"
+        "playwright": "1.38.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -4830,12 +4830,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.38.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.0.tgz",
-      "integrity": "sha512-fJGw+HO0YY+fU/F1N57DMO+TmXHTrmr905J05zwAQE9xkuwP/QLDk63rVhmyxh03dYnEhnRbsdbH9B0UVVRB3A==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz",
+      "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.38.0"
+        "playwright-core": "1.38.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -4848,9 +4848,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.38.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.0.tgz",
-      "integrity": "sha512-f8z1y8J9zvmHoEhKgspmCvOExF2XdcxMW8jNRuX4vkQFrzV4MlZ55iwb5QeyiFQgOFCUolXiRHgpjSEnqvO48g==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz",
+      "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
diff --git a/report-viewer/package.json b/report-viewer/package.json
index cd8090f28..d6fcdfa72 100644
--- a/report-viewer/package.json
+++ b/report-viewer/package.json
@@ -34,7 +34,7 @@
     "vue-virtual-scroller": "^2.0.0-beta.8"
   },
   "devDependencies": {
-    "@playwright/test": "^1.38.0",
+    "@playwright/test": "^1.38.1",
     "@rushstack/eslint-patch": "^1.4.0",
     "@types/jsdom": "^21.1.3",
     "@types/node": "^18.18.0",

From 9b877a35c17da644549b72b55e9bfef66b0a38a4 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 27 Sep 2023 19:35:31 +0200
Subject: [PATCH 06/10] Dependency(deps): Bump vue-router from 4.2.4 to 4.2.5
 in /report-viewer (#1316)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 report-viewer/package-lock.json | 8 ++++----
 report-viewer/package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/report-viewer/package-lock.json b/report-viewer/package-lock.json
index 96d643e7f..a3263b9d2 100644
--- a/report-viewer/package-lock.json
+++ b/report-viewer/package-lock.json
@@ -21,7 +21,7 @@
         "vue": "^3.3.4",
         "vue-chartjs": "^5.2.0",
         "vue-draggable-next": "^2.2.1",
-        "vue-router": "^4.2.4",
+        "vue-router": "^4.2.5",
         "vue-virtual-scroller": "^2.0.0-beta.8"
       },
       "devDependencies": {
@@ -6634,9 +6634,9 @@
       }
     },
     "node_modules/vue-router": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.4.tgz",
-      "integrity": "sha512-9PISkmaCO02OzPVOMq2w82ilty6+xJmQrarYZDkjZBfl4RvYAlt4PKnEX21oW4KTtWfa9OuO/b3qk1Od3AEdCQ==",
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
+      "integrity": "sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==",
       "dependencies": {
         "@vue/devtools-api": "^6.5.0"
       },
diff --git a/report-viewer/package.json b/report-viewer/package.json
index d6fcdfa72..b361c4e49 100644
--- a/report-viewer/package.json
+++ b/report-viewer/package.json
@@ -30,7 +30,7 @@
     "vue": "^3.3.4",
     "vue-chartjs": "^5.2.0",
     "vue-draggable-next": "^2.2.1",
-    "vue-router": "^4.2.4",
+    "vue-router": "^4.2.5",
     "vue-virtual-scroller": "^2.0.0-beta.8"
   },
   "devDependencies": {

From 7d1682ebe61136eaca19f8c14a71082663ceb2e7 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 27 Sep 2023 22:59:02 +0200
Subject: [PATCH 07/10] Dependency(deps): Bump
 edu.stanford.nlp:stanford-corenlp from 4.5.4 to 4.5.5 (#1313)

Bumps edu.stanford.nlp:stanford-corenlp from 4.5.4 to 4.5.5.

---
updated-dependencies:
- dependency-name: edu.stanford.nlp:stanford-corenlp
  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>
---
 pom.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pom.xml b/pom.xml
index fbc2ce86d..968ba8cca 100644
--- a/pom.xml
+++ b/pom.xml
@@ -117,7 +117,7 @@
             <dependency>
                 <groupId>edu.stanford.nlp</groupId>
                 <artifactId>stanford-corenlp</artifactId>
-                <version>4.5.4</version>
+                <version>4.5.5</version>
             </dependency>
 
             <!-- LOGGER -->

From 8722f62eeb4f5532860b5f4ad8e79ed176a74ddf Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 27 Sep 2023 22:59:16 +0200
Subject: [PATCH 08/10] Dependency(deps): Bump org.scalameta:scalameta_2.13
 from 4.8.10 to 4.8.11 (#1312)

Bumps [org.scalameta:scalameta_2.13](https://github.com/scalameta/scalameta) from 4.8.10 to 4.8.11.
- [Release notes](https://github.com/scalameta/scalameta/releases)
- [Commits](https://github.com/scalameta/scalameta/compare/v4.8.10...v4.8.11)

---
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 dcedea621..8eb11b59a 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.10</version>
+            <version>4.8.11</version>
         </dependency>
     </dependencies>
 

From 953bdc9ab94646fc5dc3da1540721999f2788227 Mon Sep 17 00:00:00 2001
From: Alexander Vogt <alexander_vogt@outlook.de>
Date: Thu, 28 Sep 2023 15:15:34 +0200
Subject: [PATCH 09/10] add view wrapper for async views

---
 report-viewer/src/App.vue                     |  4 +-
 .../src/components/LoadingCircle.vue          | 18 +++++++
 report-viewer/src/router/index.ts             | 16 +++---
 .../src/viewWrapper/ClusterViewWrapper.vue    | 32 ++++++++++++
 .../src/viewWrapper/ComparisonViewWrapper.vue | 49 +++++++++++++++++++
 .../viewWrapper/InformationViewWrapper.vue    | 23 +++++++++
 .../src/viewWrapper/OverviewViewWrapper.vue   | 23 +++++++++
 report-viewer/src/views/ClusterView.vue       | 36 ++++++++------
 report-viewer/src/views/ComparisonView.vue    | 28 ++++++-----
 report-viewer/src/views/FileUploadView.vue    |  8 +--
 report-viewer/src/views/InformationView.vue   | 16 ++++--
 report-viewer/src/views/OverviewView.vue      | 25 ++++++----
 12 files changed, 219 insertions(+), 59 deletions(-)
 create mode 100644 report-viewer/src/components/LoadingCircle.vue
 create mode 100644 report-viewer/src/viewWrapper/ClusterViewWrapper.vue
 create mode 100644 report-viewer/src/viewWrapper/ComparisonViewWrapper.vue
 create mode 100644 report-viewer/src/viewWrapper/InformationViewWrapper.vue
 create mode 100644 report-viewer/src/viewWrapper/OverviewViewWrapper.vue

diff --git a/report-viewer/src/App.vue b/report-viewer/src/App.vue
index 988799c65..094cf305b 100644
--- a/report-viewer/src/App.vue
+++ b/report-viewer/src/App.vue
@@ -3,9 +3,7 @@
     <div
       class="max-w-screen max-h-fit min-h-screen bg-backgorund-light text-black dark:bg-backgorund-dark dark:text-amber-50"
     >
-      <Suspense>
-        <RouterView class="max-h-screen overflow-hidden" />
-      </Suspense>
+      <RouterView class="max-h-screen overflow-hidden" />
 
       <Button
         class="absolute bottom-2 right-2 flex h-12 w-12 items-center justify-center text-center"
diff --git a/report-viewer/src/components/LoadingCircle.vue b/report-viewer/src/components/LoadingCircle.vue
new file mode 100644
index 000000000..e94062a97
--- /dev/null
+++ b/report-viewer/src/components/LoadingCircle.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <div
+      class="mx-auto h-16 w-16 animate-spin rounded-full border-8 border-interactable-border-light border-t-accent dark:border-interactable-border-dark dark:border-t-accent"
+    ></div>
+    <p class="text-2xl font-bold">{{ message }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  message: {
+    type: String,
+    required: false,
+    default: 'Loading Files...'
+  }
+})
+</script>
diff --git a/report-viewer/src/router/index.ts b/report-viewer/src/router/index.ts
index d277f86e5..31283c13d 100644
--- a/report-viewer/src/router/index.ts
+++ b/report-viewer/src/router/index.ts
@@ -1,10 +1,10 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import FileUploadView from '@/views/FileUploadView.vue'
-import OverviewView from '@/views/OverviewView.vue'
-import ComparisonView from '@/views/ComparisonView.vue'
+import OverviewViewWrapper from '@/viewWrapper/OverviewViewWrapper.vue'
+import ComparisonViewWrapper from '@/viewWrapper/ComparisonViewWrapper.vue'
 import ErrorView from '@/views/ErrorView.vue'
-import ClusterView from '@/views/ClusterView.vue'
-import InformationView from '@/views/InformationView.vue'
+import InformationViewWrapper from '@/viewWrapper/InformationViewWrapper.vue'
+import ClusterViewWrapper from '@/viewWrapper/ClusterViewWrapper.vue'
 
 /**
  * The router is used to navigate between the different views of the application.
@@ -20,12 +20,12 @@ const router = createRouter({
     {
       path: '/overview',
       name: 'OverviewView',
-      component: OverviewView
+      component: OverviewViewWrapper
     },
     {
       path: '/comparison/:firstId/:secondId',
       name: 'ComparisonView',
-      component: ComparisonView,
+      component: ComparisonViewWrapper,
       props: true
     },
     {
@@ -36,13 +36,13 @@ const router = createRouter({
     {
       path: '/cluster/:clusterIndex',
       name: 'ClusterView',
-      component: ClusterView,
+      component: ClusterViewWrapper,
       props: true
     },
     {
       path: '/info',
       name: 'InfoView',
-      component: InformationView
+      component: InformationViewWrapper
     }
   ]
 })
diff --git a/report-viewer/src/viewWrapper/ClusterViewWrapper.vue b/report-viewer/src/viewWrapper/ClusterViewWrapper.vue
new file mode 100644
index 000000000..d3cf2a2aa
--- /dev/null
+++ b/report-viewer/src/viewWrapper/ClusterViewWrapper.vue
@@ -0,0 +1,32 @@
+<template>
+  <ClusterView v-if="overview" :overview="overview" :cluster="overview.clusters[clusterIndex]" />
+  <div
+    v-else
+    class="absolute bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center"
+  >
+    <LoadingCircle class="mx-auto" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type Ref, ref, computed } from 'vue'
+import { OverviewFactory } from '@/model/factories/OverviewFactory'
+import ClusterView from '@/views/ClusterView.vue'
+import LoadingCircle from '@/components/LoadingCircle.vue'
+import type { Overview } from '@/model/Overview'
+
+const props = defineProps({
+  clusterIndex: {
+    type: String,
+    required: true
+  }
+})
+
+const clusterIndex = computed(() => parseInt(props.clusterIndex))
+
+const overview: Ref<Overview | null> = ref(null)
+
+OverviewFactory.getOverview().then((o) => {
+  overview.value = o
+})
+</script>
diff --git a/report-viewer/src/viewWrapper/ComparisonViewWrapper.vue b/report-viewer/src/viewWrapper/ComparisonViewWrapper.vue
new file mode 100644
index 000000000..96395207b
--- /dev/null
+++ b/report-viewer/src/viewWrapper/ComparisonViewWrapper.vue
@@ -0,0 +1,49 @@
+<template>
+  <ComparisonView
+    v-if="comparison && language"
+    :first-id="firstId"
+    :second-id="secondId"
+    :comparison="comparison"
+    :language="language"
+  />
+  <div
+    v-else
+    class="absolute bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center"
+  >
+    <LoadingCircle class="mx-auto" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type Ref, ref } from 'vue'
+import { OverviewFactory } from '@/model/factories/OverviewFactory'
+import ComparisonView from '@/views/ComparisonView.vue'
+import { getHighlightLanguage, type HighlightLanguage } from '@/model/Language'
+import type { Comparison } from '@/model/Comparison'
+import { ComparisonFactory } from '@/model/factories/ComparisonFactory'
+import LoadingCircle from '@/components/LoadingCircle.vue'
+
+const props = defineProps({
+  firstId: {
+    type: String,
+    required: true
+  },
+  secondId: {
+    type: String,
+    required: true
+  }
+})
+
+const comparison: Ref<Comparison | null> = ref(null)
+const language: Ref<HighlightLanguage | null> = ref(null)
+
+// This eslint rule is disabled to allow the use of await in the setup function. Disabling this rule is safe, because the props are gathered from the url, so changing them would reload the pafe anyway.
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+ComparisonFactory.getComparison(props.firstId, props.secondId).then((comp) => {
+  comparison.value = comp
+})
+
+OverviewFactory.getOverview().then((overview) => {
+  language.value = getHighlightLanguage(overview.language)
+})
+</script>
diff --git a/report-viewer/src/viewWrapper/InformationViewWrapper.vue b/report-viewer/src/viewWrapper/InformationViewWrapper.vue
new file mode 100644
index 000000000..6354e8630
--- /dev/null
+++ b/report-viewer/src/viewWrapper/InformationViewWrapper.vue
@@ -0,0 +1,23 @@
+<template>
+  <InformationView v-if="overview" :overview="overview" />
+  <div
+    v-else
+    class="absolute bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center"
+  >
+    <LoadingCircle class="mx-auto" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type Ref, ref } from 'vue'
+import { OverviewFactory } from '@/model/factories/OverviewFactory'
+import InformationView from '@/views/InformationView.vue'
+import type { Overview } from '@/model/Overview'
+import LoadingCircle from '@/components/LoadingCircle.vue'
+
+const overview: Ref<Overview | null> = ref(null)
+
+OverviewFactory.getOverview().then((o) => {
+  overview.value = o
+})
+</script>
diff --git a/report-viewer/src/viewWrapper/OverviewViewWrapper.vue b/report-viewer/src/viewWrapper/OverviewViewWrapper.vue
new file mode 100644
index 000000000..c7c4f07d3
--- /dev/null
+++ b/report-viewer/src/viewWrapper/OverviewViewWrapper.vue
@@ -0,0 +1,23 @@
+<template>
+  <OverviewView v-if="overview" :overview="overview" />
+  <div
+    v-else
+    class="absolute bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center"
+  >
+    <LoadingCircle class="mx-auto" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type Ref, ref } from 'vue'
+import { OverviewFactory } from '@/model/factories/OverviewFactory'
+import OverviewView from '@/views/OverviewView.vue'
+import type { Overview } from '@/model/Overview'
+import LoadingCircle from '@/components/LoadingCircle.vue'
+
+const overview: Ref<Overview | null> = ref(null)
+
+OverviewFactory.getOverview().then((o) => {
+  overview.value = o
+})
+</script>
diff --git a/report-viewer/src/views/ClusterView.vue b/report-viewer/src/views/ClusterView.vue
index 62c94d50e..11dcc3d7f 100644
--- a/report-viewer/src/views/ClusterView.vue
+++ b/report-viewer/src/views/ClusterView.vue
@@ -28,35 +28,39 @@ import ClusterRadarChart from '@/components/ClusterRadarChart.vue'
 import ComparisonsTable from '@/components/ComparisonsTable.vue'
 import Container from '@/components/ContainerComponent.vue'
 import TextInformation from '@/components/TextInformation.vue'
+import type { Cluster } from '@/model/Cluster'
 import type { ClusterListElement, ClusterListElementMember } from '@/model/ClusterListElement'
 import type { ComparisonListElement } from '@/model/ComparisonListElement'
 import { MetricType } from '@/model/MetricType'
-import { OverviewFactory } from '@/model/factories/OverviewFactory'
+import type { Overview } from '@/model/Overview'
+import { computed, type PropType, type Ref } from 'vue'
 
 const props = defineProps({
-  clusterIndex: {
-    type: Number,
+  overview: {
+    type: Object as PropType<Overview>,
+    required: true
+  },
+  cluster: {
+    type: Object as PropType<Cluster>,
     required: true
   }
 })
 
-const overview = await OverviewFactory.getOverview()
-const cluster = overview.clusters[props.clusterIndex]
 const comparisons = [] as Array<ComparisonListElement>
 const clusterMemberList = new Map() as ClusterListElementMember
 const usedMetric = MetricType.AVERAGE
 
 function getComparisonFor(id1: string, id2: string) {
-  return overview.topComparisons.find(
+  return props.overview.topComparisons.find(
     (c) =>
       (c.firstSubmissionId === id1 && c.secondSubmissionId === id2) ||
       (c.firstSubmissionId === id2 && c.secondSubmissionId === id1)
   )
 }
 
-for (let i = 0; i < cluster.members.length; i++) {
-  for (let j = i + 1; j < cluster.members.length; j++) {
-    const comparison = getComparisonFor(cluster.members[i], cluster.members[j])
+for (let i = 0; i < props.cluster.members.length; i++) {
+  for (let j = i + 1; j < props.cluster.members.length; j++) {
+    const comparison = getComparisonFor(props.cluster.members[i], props.cluster.members[j])
     if (comparison) {
       comparisons.push(comparison)
     }
@@ -70,7 +74,7 @@ comparisons
     c.id = counter
   })
 
-for (const member of cluster.members) {
+for (const member of props.cluster.members) {
   const membersComparisons: { matchedWith: string; similarity: number }[] = []
   comparisons
     .filter((c) => c.firstSubmissionId === member || c.secondSubmissionId === member)
@@ -83,9 +87,11 @@ for (const member of cluster.members) {
   clusterMemberList.set(member, membersComparisons)
 }
 
-const clusterListElement: ClusterListElement = {
-  averageSimilarity: cluster.averageSimilarity,
-  members: clusterMemberList,
-  strength: cluster.strength
-}
+const clusterListElement: Ref<ClusterListElement> = computed(() => {
+  return {
+    averageSimilarity: props.cluster.averageSimilarity,
+    members: clusterMemberList,
+    strength: props.cluster.strength
+  }
+})
 </script>
diff --git a/report-viewer/src/views/ComparisonView.vue b/report-viewer/src/views/ComparisonView.vue
index 3c8db9ece..a50bd1746 100644
--- a/report-viewer/src/views/ComparisonView.vue
+++ b/report-viewer/src/views/ComparisonView.vue
@@ -43,7 +43,7 @@
             ? 'Submission 1'
             : (store().submissionDisplayName(comparison.secondSubmissionId) as string)
         "
-        :highlight-language="getHighlightLanguage(language)"
+        :highlight-language="language"
         @line-selected="showMatchInSecond"
         class="max-h-0 min-h-full flex-1 overflow-hidden"
       />
@@ -56,7 +56,7 @@
             ? 'Submission 2'
             : (store().submissionDisplayName(comparison.secondSubmissionId) as string)
         "
-        :highlight-language="getHighlightLanguage(language)"
+        :highlight-language="language"
         @line-selected="showMatchInFirst"
         class="max-h-0 min-h-full flex-1 overflow-hidden"
       />
@@ -67,19 +67,18 @@
 <script setup lang="ts">
 import type { Match } from '@/model/Match'
 
-import { onMounted, ref, watch, type Ref, computed, onErrorCaptured } from 'vue'
+import { onMounted, ref, watch, type Ref, computed, onErrorCaptured, type PropType } from 'vue'
 import TextInformation from '@/components/TextInformation.vue'
 import MatchList from '@/components/MatchList.vue'
-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 { HighlightLanguage } 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 { MetricType } from '@/model/MetricType'
-import { OverviewFactory } from '@/model/factories/OverviewFactory'
+import { Comparison } from '@/model/Comparison'
 
 const props = defineProps({
   firstId: {
@@ -89,16 +88,19 @@ const props = defineProps({
   secondId: {
     type: String,
     required: true
+  },
+  comparison: {
+    type: Object as PropType<Comparison>,
+    required: true
+  },
+  language: {
+    type: Object as PropType<HighlightLanguage>,
+    required: true
   }
 })
 
-// This eslint rule is disabled to allow the use of await in the setup function. Disabling this rule is safe, because the props are gathered from the url, so changing them would reload the pafe anyway.
-// eslint-disable-next-line vue/no-setup-props-reactivity-loss
-const comparison = await ComparisonFactory.getComparison(props.firstId, props.secondId)
-const language = (await OverviewFactory.getOverview()).language
-
-const filesOfFirst = ref(comparison.filesOfFirstSubmission)
-const filesOfSecond = ref(comparison.filesOfSecondSubmission)
+const filesOfFirst = computed(() => props.comparison.filesOfFirstSubmission)
+const filesOfSecond = computed(() => props.comparison.filesOfSecondSubmission)
 
 const panel1: Ref<typeof FilesContainer | null> = ref(null)
 const panel2: Ref<typeof FilesContainer | null> = ref(null)
diff --git a/report-viewer/src/views/FileUploadView.vue b/report-viewer/src/views/FileUploadView.vue
index 2594cc107..c6a95c50c 100644
--- a/report-viewer/src/views/FileUploadView.vue
+++ b/report-viewer/src/views/FileUploadView.vue
@@ -36,12 +36,7 @@
           Continue with local files
         </Button>
       </div>
-      <div v-else class="space-y-5 pt-5">
-        <div
-          class="mx-auto h-16 w-16 animate-spin rounded-full border-8 border-interactable-border-light border-t-accent dark:border-interactable-border-dark dark:border-t-accent"
-        ></div>
-        <p class="text-2xl font-bold">Loading file...</p>
-      </div>
+      <LoadingCircle v-else class="space-y-5 pt-5" />
     </div>
     <VersionInfoComponent class="absolute bottom-3 left-3" />
   </div>
@@ -54,6 +49,7 @@ import { router } from '@/router'
 import { store } from '@/stores/store'
 import Button from '@/components/ButtonComponent.vue'
 import VersionInfoComponent from '@/components/VersionInfoComponent.vue'
+import LoadingCircle from '@/components/LoadingCircle.vue'
 import { JsonFileHandler } from '@/utils/fileHandling/JsonFileHandler'
 import { ZipFileHandler } from '@/utils/fileHandling/ZipFileHandler'
 
diff --git a/report-viewer/src/views/InformationView.vue b/report-viewer/src/views/InformationView.vue
index a31a4fc38..b55a73cc7 100644
--- a/report-viewer/src/views/InformationView.vue
+++ b/report-viewer/src/views/InformationView.vue
@@ -48,15 +48,21 @@
 </template>
 
 <script setup lang="ts">
-import { OverviewFactory } from '@/model/factories/OverviewFactory'
 import Container from '@/components/ContainerComponent.vue'
 import TextInformation from '@/components/TextInformation.vue'
 import ScrollableComponent from '@/components/ScrollableComponent.vue'
 import { store } from '@/stores/store'
+import { Overview } from '@/model/Overview'
+import { computed, type PropType } from 'vue'
 
-const overview = await OverviewFactory.getOverview()
+const props = defineProps({
+  overview: {
+    type: Object as PropType<Overview>,
+    required: true
+  }
+})
 
-const totalComparisons = overview.totalComparisons
-const shownComparisons = overview.topComparisons.length
-const missingComparisons = totalComparisons - shownComparisons
+const totalComparisons = computed(() => props.overview.totalComparisons)
+const shownComparisons = computed(() => props.overview.topComparisons.length)
+const missingComparisons = computed(() => totalComparisons.value - shownComparisons.value)
 </script>
diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue
index 4f030beb8..fb6d9f33d 100644
--- a/report-viewer/src/views/OverviewView.vue
+++ b/report-viewer/src/views/OverviewView.vue
@@ -109,11 +109,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onErrorCaptured, ref, watch } from 'vue'
+import { computed, onErrorCaptured, ref, watch, type PropType } from 'vue'
 import { router } from '@/router'
 import DistributionDiagram from '@/components/DistributionDiagram.vue'
 import ComparisonsTable from '@/components/ComparisonsTable.vue'
-import { OverviewFactory } from '@/model/factories/OverviewFactory'
 import { store } from '@/stores/store'
 import Container from '@/components/ContainerComponent.vue'
 import Button from '@/components/ButtonComponent.vue'
@@ -125,8 +124,14 @@ import type { ComparisonListElement } from '@/model/ComparisonListElement'
 import MetricSelector from '@/components/optionsSelectors/MetricSelector.vue'
 import ToolTipComponent from '@/components/ToolTipComponent.vue'
 import OptionsSelector from '@/components/optionsSelectors/OptionsSelectorComponent.vue'
+import type { Overview } from '@/model/Overview'
 
-const overview = await OverviewFactory.getOverview()
+const props = defineProps({
+  overview: {
+    type: Object as PropType<Overview>,
+    required: true
+  }
+})
 
 const searchString = ref('')
 
@@ -164,11 +169,11 @@ function getSortedComparisons(comparisons: ComparisonListElement[]) {
   comparisons.forEach((c) => {
     c.sortingPlace = index++
   })
-  return overview.topComparisons
+  return props.overview.topComparisons
 }
 
 const displayedComparisons = computed(() => {
-  const comparisons = getFilteredComparisons(getSortedComparisons(overview.topComparisons))
+  const comparisons = getFilteredComparisons(getSortedComparisons(props.overview.topComparisons))
   let index = 1
   comparisons.forEach((c) => {
     c.id = index++
@@ -207,10 +212,12 @@ function changeAnnoymousForAll() {
   }
 }
 
-const hasMoreSubmissionPaths = overview.submissionFolderPath.length > 1
-const submissionPathValue = hasMoreSubmissionPaths
-  ? 'Click More to see all paths'
-  : overview.submissionFolderPath[0]
+const hasMoreSubmissionPaths = computed(() => props.overview.submissionFolderPath.length > 1)
+const submissionPathValue = computed(() =>
+  hasMoreSubmissionPaths.value
+    ? 'Click More to see all paths'
+    : props.overview.submissionFolderPath[0]
+)
 
 onErrorCaptured((e) => {
   console.log(e)

From afc3f827b5114ed4247e1d55540382b8dcc8bd7c Mon Sep 17 00:00:00 2001
From: Alexander Vogt <alexander_vogt@outlook.de>
Date: Thu, 28 Sep 2023 15:34:44 +0200
Subject: [PATCH 10/10] bump vue-tsc to 1.8.15

---
 report-viewer/package-lock.json               | 26 +++++++++----------
 report-viewer/package.json                    |  2 +-
 .../src/components/FilesContainer.vue         |  2 +-
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/report-viewer/package-lock.json b/report-viewer/package-lock.json
index a3263b9d2..3cd65c76e 100644
--- a/report-viewer/package-lock.json
+++ b/report-viewer/package-lock.json
@@ -48,7 +48,7 @@
         "typescript": "^5.2.2",
         "vite": "^4.4.9",
         "vitest": "^0.34.4",
-        "vue-tsc": "^1.8.11"
+        "vue-tsc": "^1.8.15"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -1214,9 +1214,9 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "1.8.11",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.11.tgz",
-      "integrity": "sha512-+MZOBGqGwfld6hpo0DB47x8eNM0dNqk15ZdfOhj19CpvuYuOWCeVdOEGZunKDyo3QLkTn3kLOSysJzg7FDOQBA==",
+      "version": "1.8.15",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.15.tgz",
+      "integrity": "sha512-zche5Aw8kkvp3YaghuLiOZyVIpoWHjSQ0EfjxGSsqHOPMamdCoa9x3HtbenpR38UMUoKJ88wiWuiOrV3B/Yq+A==",
       "dev": true,
       "dependencies": {
         "@volar/language-core": "~1.10.0",
@@ -1343,13 +1343,13 @@
       "dev": true
     },
     "node_modules/@vue/typescript": {
-      "version": "1.8.11",
-      "resolved": "https://registry.npmjs.org/@vue/typescript/-/typescript-1.8.11.tgz",
-      "integrity": "sha512-skUmMDiPUUtu1flPmf2YybF+PX8IzBtMioQOaNn6Ck/RhdrPJGj1AX/7s3Buf9G6ln+/KHR1XQuti/FFxw5XVA==",
+      "version": "1.8.15",
+      "resolved": "https://registry.npmjs.org/@vue/typescript/-/typescript-1.8.15.tgz",
+      "integrity": "sha512-qWyanQKXOsK84S8rP7QBrqsvUdQ0nZABZmTjXMpb3ox4Bp5IbkscREA3OPUrkgl64mAxwwCzIWcOc3BPTCPjQw==",
       "dev": true,
       "dependencies": {
         "@volar/typescript": "~1.10.0",
-        "@vue/language-core": "1.8.11"
+        "@vue/language-core": "1.8.15"
       }
     },
     "node_modules/abab": {
@@ -6658,13 +6658,13 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "1.8.11",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.11.tgz",
-      "integrity": "sha512-BzfiMdPqDHBlysx4g26NkfVHSQwGD/lTRausmxN9sFyjXz34OWfsbkh0YsVkX84Hu65In1fFlxHiG39Tr4Vojg==",
+      "version": "1.8.15",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.15.tgz",
+      "integrity": "sha512-4DoB3LUj7IToLmggoCxRiFG+QU5lem0nv03m1ocqugXA9rSVoTOEoYYaP8vu8b99Eh+/cCVdYOeIAQ+RsgUYUw==",
       "dev": true,
       "dependencies": {
-        "@vue/language-core": "1.8.11",
-        "@vue/typescript": "1.8.11",
+        "@vue/language-core": "1.8.15",
+        "@vue/typescript": "1.8.15",
         "semver": "^7.3.8"
       },
       "bin": {
diff --git a/report-viewer/package.json b/report-viewer/package.json
index b361c4e49..b55301372 100644
--- a/report-viewer/package.json
+++ b/report-viewer/package.json
@@ -57,6 +57,6 @@
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
     "vitest": "^0.34.4",
-    "vue-tsc": "^1.8.11"
+    "vue-tsc": "^1.8.15"
   }
 }
diff --git a/report-viewer/src/components/FilesContainer.vue b/report-viewer/src/components/FilesContainer.vue
index f9fb206dc..89862d235 100644
--- a/report-viewer/src/components/FilesContainer.vue
+++ b/report-viewer/src/components/FilesContainer.vue
@@ -18,7 +18,7 @@
             !matches.get(file.fileName) ? [] : (matches.get(file.fileName) as MatchInSingleFile[])
           "
           :highlight-language="highlightLanguage"
-          @line-selected="(match) => $emit('line-selected', match)"
+          @line-selected="(match) => $emit('lineSelected', match)"
           class="mt-1"
         />
       </VueDraggableNext>