Merge pull request #1448 from jplag/report-viewer/demo

Report Viewer Demo

.github/workflows/report-viewer-demo.yml

@@ -0,0 +1,113 @@
+name: Report Viewer Demo Deployment
+
+on:
+  workflow_dispatch: # Use this to dispatch from the Actions Tab
+  push:
+    branches:
+      - main
+
+jobs:
+  build-jar:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Set up JDK
+        uses: actions/setup-java@v4
+        with:
+          java-version: 21
+          distribution: 'temurin'
+
+      - name: Build Assembly
+        run: mvn clean package assembly:single
+
+      - name: Upload Assembly
+        uses: actions/upload-artifact@v3
+        with:
+          name: "JPlag"
+          path: "cli/target/jplag-*-jar-with-dependencies.jar"
+
+
+  run-example:
+    needs: build-jar
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Set up JDK
+        uses: actions/setup-java@v4
+        with:
+          java-version: 21
+          distribution: 'temurin'
+
+      - name: Get JAR
+        uses: actions/download-artifact@v3
+        with:
+          name: JPlag
+
+      - name: Copy and unzip submissions
+        run: unzip ./.github/workflows/files/progpedia.zip
+
+      - name: Rename jar
+        run: mv *.jar ./jplag.jar
+
+      - name: Run JPlag
+        run: java -jar jplag.jar ACCEPTED -bc base -r example
+
+      - name: Upload Result
+        uses: actions/upload-artifact@v3
+        with:
+          name: "Result"
+          path: "example.zip"
+
+
+  build-and-deploy:
+    needs: run-example
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+
+      - name: Set version of Report Viewer
+        shell: bash
+        run: |
+          VERSION=$(grep "<revision>" pom.xml | grep -oPm1 "(?<=<revision>)[^-|<]+")
+          MAJOR=$(echo $VERSION | cut -d '.' -f 1)
+          MINOR=$(echo $VERSION | cut -d '.' -f 2)
+          PATCH=$(echo $VERSION | cut -d '.' -f 3)
+          json=$(cat report-viewer/src/version.json)
+          json=$(echo "$json" | jq --arg MAJOR "$MAJOR" --arg MINOR "$MINOR" --arg PATCH "$PATCH" '.report_viewer_version |= { "major": $MAJOR | tonumber, "minor": $MINOR | tonumber, "patch": $PATCH | tonumber }')
+          echo "$json" >  report-viewer/src/version.json
+          echo "Version of Report Viewer:"
+          cat report-viewer/src/version.json
+      
+      - name: Download Results
+        uses: actions/download-artifact@v3
+        with:
+          name: Result
+          path: report-viewer/public
+
+      - name: Install and Build 🔧
+        working-directory: report-viewer
+        run: |
+          npm install
+          npm run build-demo
+        
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages
+          folder: report-viewer/dist
+          repository-name: JPlag/Demo
+          token: ${{ secrets.SDQ_DEV_DEPLOY_TOKEN }}
+          clean: true
+          single-commit: true
+

report-viewer/package.json

@@ -12,6 +12,7 @@
     "build-only": "vite build",
     "build-prod": "run-p type-check && vite build --mode prod",
     "build-dev": "run-p type-check && vite build --mode dev",
+    "build-demo": "run-p type-check && vite build --mode demo",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore --max-warnings 0",
     "format": "prettier --write src/",

report-viewer/src/model/factories/BaseFactory.ts

@@ -12,6 +12,10 @@ export class BaseFactory {
    * @throws Error if the file could not be found
    */
   protected static async getFile(path: string): Promise<string> {
+    if (import.meta.env.MODE == 'demo') {
+      await new ZipFileHandler().handleFile(await this.getLocalFile('example.zip'))
+      return this.getFileFromStore(path)
+    }
     if (store().state.localModeUsed) {
       if (store().state.zipModeUsed) {
         await new ZipFileHandler().handleFile(await this.getLocalFile('results.zip'))
@@ -46,7 +50,7 @@ export class BaseFactory {
    * @throws Error if the file could not be found
    */
   protected static async getLocalFile(path: string): Promise<Blob> {
-    const request = await fetch(window.location.origin + '/' + path)
+    const request = await fetch(`${window.location.origin}${import.meta.env.BASE_URL}${path}`)
     if (request.status == 200) {
       return request.blob()
     } else {

report-viewer/src/views/FileUploadView.vue

@@ -23,7 +23,7 @@
         />
       </div>
       <h1 class="text-7xl">JPlag Report Viewer</h1>
-      <div v-if="!hasQueryFile && !loadingFiles">
+      <div v-if="!hasQueryFile && !loadingFiles && !exampleFiles">
         <div
           class="mx-auto mt-10 flex w-96 cursor-pointer flex-col justify-center rounded-md border-1 border-accent-dark bg-accent bg-opacity-25 px-5 py-5"
           @click="uploadFileThroughWindow()"
@@ -36,7 +36,10 @@
           Continue with local files
         </Button>
       </div>
-      <LoadingCircle v-else class="space-y-5 pt-5" />
+      <LoadingCircle v-else-if="loadingFiles" class="space-y-5 pt-5" />
+      <div v-else-if="exampleFiles" class="pt-5">
+        <Button class="mx-auto w-fit text-xl" @click="continueWithLocal()"> View Example </Button>
+      </div>
       <div v-if="errors.length > 0" class="text-error">
         <p>{{ getErrorText() }}</p>
         <p>For more details check the console.</p>
@@ -58,6 +61,8 @@ import { JsonFileHandler } from '@/utils/fileHandling/JsonFileHandler'
 import { ZipFileHandler } from '@/utils/fileHandling/ZipFileHandler'
 
 store().clearStore()
+
+const exampleFiles = ref(import.meta.env.MODE == 'demo')
 const localFiles: Ref<'json' | 'zip' | 'none'> = ref('none')
 // Checks whether local files exist
 fetch('/files/overview.json')

report-viewer/vite.config.ts

@@ -14,6 +14,9 @@ export default defineConfig((userConfig: UserConfig) => {
     case 'prod':
       base = '/JPlag/'
       break
+    case 'demo':
+      base = '/Demo/'
+      break
   }
   return {
     plugins: [vue()],