Merge pull request #1880 from jplag/report-viewer/common-file-path

Only show parts of path that differ in report viewer

report-viewer/src/components/fileDisplaying/CodePanel.vue

@@ -4,7 +4,20 @@
 <template>
   <Interactable class="mx-2 !shadow print:!mx-0 print:!border-0 print:!p-0">
     <div @click="collapsed = !collapsed" class="flex px-2 font-bold print:whitespace-pre-wrap">
-      <span class="flex-1">{{ getFileDisplayName(file) }}</span>
+      <ToolTipComponent direction="right" v-if="getFileDisplayName(file) != file.fileName">
+        <template #default
+          ><span>{{ getFileDisplayName(file) }}</span></template
+        >
+        <template #tooltip
+          ><p class="whitespace max-w-[22rem] text-sm font-normal">
+            {{ file.fileName }}
+          </p></template
+        >
+      </ToolTipComponent>
+      <span v-else>{{ file.fileName }}</span>
+
+      <span class="flex-1"></span>
+
       <ToolTipComponent direction="left" class="font-normal">
         <template #default
           ><span class="text-gray-600 dark:text-gray-300"
@@ -144,9 +157,10 @@ defineExpose({
  * @return new path of file
  */
 function getFileDisplayName(file: SubmissionFile): string {
-  const filePathLength = file.fileName.length
+  const fileDisplayName = file.displayFileName ?? file.fileName
+  const filePathLength = fileDisplayName.length
   return filePathLength > 40
-    ? '...' + file.fileName.substring(filePathLength - 40, filePathLength)
-    : file.fileName
+    ? '...' + fileDisplayName.substring(filePathLength - 40, filePathLength)
+    : fileDisplayName
 }
 </script>

report-viewer/src/model/File.ts

@@ -28,4 +28,8 @@ export interface SubmissionFile extends File {
    * Number of tokens in the file that are matched.
    */
   matchedTokenCount: number
+  /**
+   * The name to be displayed in the report viewer
+   */
+  displayFileName: string
 }

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

@@ -5,6 +5,7 @@ import { getMatchColorCount } from '@/utils/ColorUtils'
 import slash from 'slash'
 import { BaseFactory } from './BaseFactory'
 import { MetricType } from '../MetricType'
+import type { SubmissionFile } from '../File'
 
 /**
  * Factory class for creating Comparison objects
@@ -57,8 +58,8 @@ export class ComparisonFactory extends BaseFactory {
       firstSubmissionId,
       secondSubmissionId,
       this.extractSimilarities(json.similarities as Record<string, number>),
-      filesOfFirstSubmission,
-      filesOfSecondSubmission,
+      this.getFilesWithDisplayNames(filesOfFirstSubmission),
+      this.getFilesWithDisplayNames(filesOfSecondSubmission),
       this.colorMatches(matches),
       json.first_similarity as number,
       json.second_similarity as number
@@ -91,7 +92,8 @@ export class ComparisonFactory extends BaseFactory {
           submissionId: submissionId,
           data: await this.getSubmissionFileContent(submissionId, slash(filePath)),
           tokenCount: fileList[filePath].token_count,
-          matchedTokenCount: 0
+          matchedTokenCount: 0,
+          displayFileName: slash(filePath)
         })
       }
     } catch (e) {
@@ -152,4 +154,27 @@ export class ComparisonFactory extends BaseFactory {
     }
     return sortedSize
   }
+
+  private static getFilesWithDisplayNames(files: SubmissionFile[]): SubmissionFile[] {
+    if (files.length == 1) {
+      return files
+    }
+    let longestPrefix = files[0].fileName
+    for (let i = 1; i < files.length; i++) {
+      if (longestPrefix == '') {
+        break
+      }
+
+      while (!files[i].fileName.startsWith(longestPrefix)) {
+        longestPrefix = longestPrefix.substring(0, longestPrefix.length - 1)
+      }
+    }
+
+    return files.map((f) => {
+      return {
+        ...f,
+        displayFileName: f.fileName.substring(longestPrefix.length)
+      }
+    })
+  }
 }

report-viewer/src/model/fileHandling/ZipFileHandler.ts

@@ -29,7 +29,8 @@ export class ZipFileHandler extends FileHandler {
               data: data,
               // These two properties will be determined at a later time (when loading the submission file index)
               tokenCount: NaN,
-              matchedTokenCount: NaN
+              matchedTokenCount: NaN,
+              displayFileName: slash(fullPathFileName)
             })
           })
         } else {

report-viewer/tests/unit/model/factories/ComparisonFactory.test.ts

@@ -17,11 +17,11 @@ const store = {
   filesOfSubmission: (name: string) => {
     return [
       {
-        name: `${name}/Structure.java`,
+        fileName: `${name}/Structure.java`,
         value: ''
       },
       {
-        name: `${name}/Submission.java`,
+        fileName: `${name}/Submission.java`,
         value: ''
       }
     ]
@@ -30,7 +30,8 @@ const store = {
     return {
       fileName: name,
       submissionId: id,
-      matchedTokenCount: 0
+      matchedTokenCount: 0,
+      displayName: name
     }
   }
 }