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] 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)