Enhance/add error page if overview or comparison missing

report-viewer/src/components/ErrorMessage.vue

@@ -0,0 +1,26 @@
+<template>
+  <h2>{{message}}</h2>
+</template>
+
+<script lang="ts">
+export default {
+  name: "ErrorMessage",
+  props: {
+    /**
+     * Message of error.
+     */
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style scoped>
+h2 {
+  font-size: 24px;
+  color: #191919;
+  padding-bottom: 16px
+}
+</style>

report-viewer/src/components/ErrorRouter.vue

@@ -0,0 +1,41 @@
+<template>
+  <h5>
+    <router-link :to="to" class="back">{{routerInfo}}</router-link>
+  </h5>
+</template>
+
+<script>
+export default {
+  name: "ErrorRouter",
+  props: {
+    /**
+     * Router of error.
+     */
+    to: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Info of router-link.
+     */
+    routerInfo: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style scoped>
+.back {
+  width: 200px;
+  height: 38px;
+  background: #c9141d;
+  line-height: 38px;
+  font-size: 16px;
+  color: #fff;
+  text-align: center;
+  display: inline-block;
+  border-radius: 2px
+}
+</style>

report-viewer/src/router/index.ts

@@ -3,6 +3,7 @@ import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router";
 import OverviewView from "@/views/OverviewView.vue";
 import ComparisonView from "@/views/ComparisonView.vue";
 import FileUploadView from "@/views/FileUploadView.vue";
+import ErrorView from "@/views/ErrorView.vue";
 
 /**
  * Router containing the navigation destinations.
@@ -24,6 +25,11 @@ const routes: Array<RouteRecordRaw> = [
     component: ComparisonView,
     props: true,
   },
+  {
+    path: "/error",
+    name: "ErrorView",
+    component: ErrorView,
+  },
 ];
 
 const router = createRouter({

report-viewer/src/store/store.ts

@@ -113,6 +113,19 @@ const store = createStore<State>({
       },
   },
   mutations: {
+    clearStore(){
+      store.replaceState({
+        submissionIdsToComparisonFileName: new Map<string, Map<string, string>>(),
+        anonymous: new Set(),
+        files: {},
+        submissions: {},
+        local: false,
+        zip: false,
+        single: false,
+        fileString: "",
+        fileIdToDisplayName: new Map(),
+      });
+    },
     addAnonymous(state: State, id) {
       for (let i = 0; i < id.length; i++) {
         state.anonymous.add(id[i]);

report-viewer/src/views/ComparisonView.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import {defineComponent, ref} from "vue";
 import { generateLineCodeLink } from "@/utils/Utils";
 import TextInformation from "@/components/TextInformation.vue";
 import MatchTable from "@/components/MatchTable.vue";
@@ -77,6 +77,7 @@ import FilesContainer from "@/components/FilesContainer.vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import { Match } from "@/model/Match";
+import {Comparison} from "@/model/Comparison";
 
 export default defineComponent({
   name: "ComparisonView",
@@ -119,15 +120,36 @@ export default defineComponent({
           JSON.parse(comparisonFile)
         );
       } else {
-        console.log("Could not find comparison file."); // TODO introduce error page to navigate to
+        console.log("Could not find comparison file.");
+        router.push({
+          name: "ErrorView",
+          state: {
+            message: "Comparison file can't be found!",
+            to: "/overview",
+            routerInfo: "back to overview page"
+          }
+        });
       }
     } else if (store.state.single) {
-      comparison = ComparisonFactory.getComparison(
-        JSON.parse(store.state.fileString)
-      );
+      try {
+        comparison = ComparisonFactory.getComparison(
+            JSON.parse(store.state.fileString)
+        );
+      }catch (e){
+        router.push({
+          name: "ErrorView",
+          state: {
+            message: "Codes of matches can't be found! If you use single file mode, overview.json can only be accepted!",
+            to: "/",
+            routerInfo: "back to FileUpload page"
+          }
+        });
+        store.commit("clearStore");
+      }
     }
     if (!comparison) {
-      throw "Could not build comparison file";
+      comparison=new Comparison("","",0);
+      console.log("Could not build comparison file");
     }
     const filesOfFirst = ref(comparison.filesOfFirstSubmission);
     const filesOfSecond = ref(comparison.filesOfSecondSubmission);

report-viewer/src/views/ErrorView.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="container">
+    <img alt="JPlag" src="@/assets/logo-nobg.png" />
+    <error-message :message="message"/>
+    <error-router :to="to" :routerInfo="routerInfo"/>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import ErrorMessage from "@/components/ErrorMessage.vue";
+import ErrorRouter from "@/components/ErrorRouter.vue";
+
+export default defineComponent({
+  name: "OverviewErrorView",
+  components: {ErrorRouter, ErrorMessage},
+  setup() {
+    const message = history.state.message;
+    const to = history.state.to;
+    const routerInfo =history.state.routerInfo;
+    return{
+      message,
+      to,
+      routerInfo
+    }
+  },
+});
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: var(--primary-color-light);
+}
+</style>

report-viewer/src/views/FileUploadView.vue

@@ -38,6 +38,7 @@ class LoadError extends Error {}
 export default defineComponent({
   name: "FileUploadView",
   setup() {
+    store.commit("clearStore");
     let hasLocalFile;
     //Tries to detect local file. If no files detected, hides local mode from screen.
     try {

report-viewer/src/views/OverviewView.vue

@@ -91,7 +91,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref, ref } from "vue";
+import { computed, defineComponent, onErrorCaptured, Ref, ref } from "vue";
 import router from "@/router";
 import TextInformation from "../components/TextInformation.vue";
 import DistributionDiagram from "@/components/DistributionDiagram.vue";
@@ -120,7 +120,7 @@ export default defineComponent({
       );
       return index != undefined
         ? store.state.files[index]
-        : console.log("Could not find overview.json"); // TODO introduce error page to navigate to
+        : console.log("Could not find overview.json");
     });
 
     const getOverview = (): Overview => {
@@ -134,6 +134,9 @@ export default defineComponent({
           router.back();
         }
       } else if (store.state.zip) {
+        if(overviewFile.value===undefined){
+          return new Overview([],"","",[],0,"",0,[],[],0, new Map<string, Map<string, string>>());
+        }
         const overviewJson = JSON.parse(overviewFile.value);
         temp = OverviewFactory.getOverview(overviewJson);
       } else if (store.state.single) {
@@ -208,10 +211,23 @@ export default defineComponent({
       : overview.submissionFolderPath[0];
 
     const shownComparisons = computed(()=>{
-      return overview.metrics[selectedMetricIndex.value].comparisons.length;
+      return overview.metrics[selectedMetricIndex.value]?.comparisons.length;
     });
     const missingComparisons = overview.totalComparisons - shownComparisons.value;
 
+    onErrorCaptured(()=>{
+      router.push({
+        name: "ErrorView",
+        state: {
+          message: "Overview.json can't be found!",
+          to: "/",
+          routerInfo: "back to FileUpload page"
+        }
+      });
+      store.commit("clearStore");
+      return false;
+    });
+
     return {
       overview,
       selectedMetricIndex,