Merge pull request #2598 from jplag/report-viewer/query-on-all-views

Allow loading files per query on all views

Author: uuqjz

report-viewer/report-viewer/src/router.ts

@@ -93,4 +93,14 @@ router.onError((error) => {
   redirectOnError(error, 'An error occurred while routing. Please reload the page.\n')
 })
 
+// preserve query parameters
+router.beforeEach((to, from, next) => {
+  // Only add the old query if the target has none defined, this prevents an infinite redirect loop
+  if (Object.keys(to.query).length === 0 && Object.keys(from.query).length > 0) {
+    next({ ...to, query: from.query })
+  } else {
+    next()
+  }
+})
+
 export { router, redirectOnError }

report-viewer/report-viewer/src/stores/fileLoading.ts

@@ -5,20 +5,29 @@ export const REPORT_FILE_NAME = 'results.jplag'
 
 export async function loadReport(): Promise<void> {
   let reportFile: Blob | null = null
-  let reportName: string | null = null
+  let reportName: string = REPORT_FILE_NAME
   if (await useLocalReportFileMode()) {
     reportFile = await getLocalFile(REPORT_FILE_NAME)
-    reportName = REPORT_FILE_NAME
   } else if (import.meta.env.MODE == 'demo' || import.meta.env.MODE == 'dev-demo') {
     reportFile = await getLocalFile('example.jplag')
     reportName = 'progpedia.jplag'
+  } else if (getQueryFileUrl() !== null) {
+    const queryURL = new URL(getQueryFileUrl()!)
+    const response = await fetch(queryURL)
+    reportFile = await response.blob()
+
+    const urlParts = queryURL.pathname.split('/')
+    const lastUrlPart = urlParts[urlParts.length - 1]
+    if (lastUrlPart?.endsWith('.jplag')) {
+      reportName = lastUrlPart
+    }
   }
   if (!reportFile) {
     throw new Error(`No report file found. Please provide a valid report file.`)
   }
 
   const report = await new ReportFileHandler().extractContent(reportFile)
-  reportStore().loadReport(report.files, report.submissionFiles, reportName ?? REPORT_FILE_NAME)
+  reportStore().loadReport(report.files, report.submissionFiles, reportName)
 }
 
 async function getLocalFile(path: string): Promise<Blob | null> {
@@ -35,7 +44,7 @@ async function getLocalFile(path: string): Promise<Blob | null> {
   }
 }
 
-export async function useLocalReportFileMode() {
+async function useLocalReportFileMode() {
   try {
     await getLocalFile(REPORT_FILE_NAME)
     return true
@@ -45,3 +54,15 @@ export async function useLocalReportFileMode() {
   }
   /* eslint-enable @typescript-eslint/no-unused-vars */
 }
+
+function getQueryFileUrl() {
+  const urlParameters = new URLSearchParams(document.location.search)
+  return urlParameters.get('file')
+}
+
+/**
+ * Checks whether the loadReport function is able to load a report
+ */
+export async function canLoadFile() {
+  return (await useLocalReportFileMode()) || getQueryFileUrl() !== null
+}

report-viewer/report-viewer/src/views/FileUploadView.vue

@@ -27,7 +27,7 @@
         />
       </div>
       <h1 class="text-7xl">JPlag Report Viewer</h1>
-      <div v-if="!hasQueryFile && !loadingFiles && !exampleFiles">
+      <div v-if="!loadingFiles && !exampleFiles">
         <div
           class="border-accent-dark bg-accent/25 mx-auto mt-10 flex w-96 cursor-pointer flex-col justify-center rounded-md border px-5 py-5"
           @click="uploadFileThroughWindow()"
@@ -56,11 +56,10 @@
 
 <script setup lang="ts">
 import { onErrorCaptured, ref, type Ref } from 'vue'
-import { useRoute } from 'vue-router'
 import { router } from '@/router'
 import VersionInfoComponent from '../components/VersionInfoComponent.vue'
 import { reportStore } from '@/stores/reportStore'
-import { REPORT_FILE_NAME, useLocalReportFileMode } from '@/stores/fileLoading'
+import { canLoadFile } from '@/stores/fileLoading'
 import { uiStore } from '@/stores/uiStore'
 import { ReportFileHandler } from '@jplag/parser'
 import { LoadingCircle } from '@jplag/ui-components/base'
@@ -69,7 +68,7 @@ reportStore().reset()
 
 const exampleFiles = ref(import.meta.env.MODE == 'demo' || import.meta.env.MODE == 'dev-demo')
 
-useLocalReportFileMode().then((value) => {
+canLoadFile().then((value) => {
   if (value) {
     navigateToOverview()
   }
@@ -81,22 +80,6 @@ const loadingFiles = ref(false)
 type fileMethod = 'query' | 'upload' | 'unknown'
 const errors: Ref<{ error: Error; source: fileMethod }[]> = ref([])
 
-// Loads file passed in query param, if any.
-const queryParams = useRoute().query
-let queryFileURL: URL | null = null
-if (typeof queryParams.file === 'string' && queryParams.file !== '') {
-  try {
-    queryFileURL = new URL(queryParams.file)
-  } catch (e) {
-    registerError(e as Error, 'query')
-    queryFileURL = null
-  }
-}
-if (queryFileURL !== null) {
-  loadQueryFile(queryFileURL)
-}
-const hasQueryFile = queryFileURL !== null
-
 function navigateToOverview() {
   router.push({
     name: 'OverviewView'
@@ -164,21 +147,6 @@ async function uploadFileThroughWindow() {
   input.click()
 }
 
-/**
- * Handles click on Continue with query file.
- */
-async function loadQueryFile(url: URL) {
-  try {
-    const response = await fetch(url)
-    if (!response.ok) {
-      throw new Error('Response not OK')
-    }
-    await handleFile(await response.blob(), REPORT_FILE_NAME)
-  } catch (e) {
-    registerError(e as Error, 'query')
-  }
-}
-
 function registerError(error: Error, source: fileMethod) {
   loadingFiles.value = false
   errors.value.push({ error, source })