Merge pull request #1867 from jplag/report-viewer/cleanup

Clean up report viewer code

report-viewer/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="{ dark: store().uiState.useDarkMode }">
     <div
-      class="max-w-screen max-h-fit min-h-screen bg-backgorund-light text-black dark:bg-backgorund-dark dark:text-amber-50"
+      class="max-w-screen max-h-fit min-h-screen bg-background-light text-black dark:bg-background-dark dark:text-amber-50"
     >
       <RouterView class="max-h-screen overflow-hidden print:max-h-none print:overflow-visible" />
 

report-viewer/src/components/ClusterRadarChart.vue

@@ -132,7 +132,7 @@ const radarChartOptions = computed(() => {
   }
 })
 
-const chartData: Ref<ChartData<'radar', (number | null)[], unknown>> = computed(() => {
+const chartData: Ref<ChartData<'radar', (number | null)[]>> = computed(() => {
   return {
     labels: labels.value,
     datasets: [

report-viewer/src/components/ComparisonsTable.vue

@@ -213,10 +213,9 @@ const searchString = ref('')
 
 /**
  * This function gets called when the search bar for the comparison table has been updated.
- * It updates the displayed comparisons to only show the ones that  have part of any search result in their id. The search is not case sensitive. The parts can be separated by commas or spaces.
- * It also updates the anonymous set to unhide a submission if its name was typed in the search bar at any point in time.
+ * It returns the input list, with the filter given in searchString applied.
  *
- * @param newVal The new value of the search bar
+ * @param comparisons Sorted list of comparisons
  */
 function getFilteredComparisons(comparisons: ComparisonListElement[]) {
   const searches = searchString.value
@@ -257,7 +256,7 @@ function getFilteredComparisons(comparisons: ComparisonListElement[]) {
       [MetricType.MAXIMUM]: []
     }
     metricSearches.forEach((s) => {
-      const regexResult = /^(?:(avg|max):)?((?:[<>])=?[0-9]+%?$)/.exec(s)
+      const regexResult = /^(?:(avg|max):)?([<>]=?[0-9]+%?$)/.exec(s)
       if (regexResult) {
         const metricName = regexResult[1]
         let metric = MetricType.AVERAGE
@@ -275,7 +274,7 @@ function getFilteredComparisons(comparisons: ComparisonListElement[]) {
     })
     for (const metric of [MetricType.AVERAGE, MetricType.MAXIMUM]) {
       for (const search of searchPerMetric[metric]) {
-        const regexResult = /((?:[<>])=?)([0-9]+)%?/.exec(search)!
+        const regexResult = /([<>]=?)([0-9]+)%?/.exec(search)!
         const operator = regexResult[1]
         const value = parseInt(regexResult[2])
         if (evaluateMetricComparison(c.similarities[metric] * 100, operator, value)) {
@@ -394,16 +393,4 @@ watch(
 .tableCell {
   @apply mx-3 flex flex-row items-center justify-center text-center;
 }
-
-/* Tooltip arrow. Defined down here bacause of the content attribute */
-.tooltipArrow::after {
-  content: ' ';
-  position: absolute;
-  top: 50%;
-  left: 100%;
-  margin-top: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: transparent transparent transparent rgba(0, 0, 0, 0.9);
-}
 </style>

report-viewer/src/components/ContainerComponent.vue

@@ -1,5 +1,5 @@
-<!-- 
-  Base Component to seperate content into multiple chunks 
+<!--
+  Base Component to separate content into multiple chunks
 -->
 <template>
   <div

report-viewer/src/components/ScrollableComponent.vue

@@ -1,5 +1,5 @@
 <!--
-  Offers a unstyled scrollable container
+  Offers a un-styled scrollable container
 -->
 <template>
   <div class="overflow-y-auto print:overflow-y-visible">

report-viewer/src/components/ToolTipComponent.vue

@@ -64,7 +64,7 @@ const tooltipPosition = computed(() => {
   if (!contentDiv || !tooltipDiv) {
     return style
   }
-  // zeros the tooltip on the topleft of the content
+  // zeros the tooltip on the top-left of the content
   let top = -contentDiv.offsetHeight - props.scrollOffsetY
   let left =
     (props.toolTipContainerWillBeCentered ? -contentDiv.offsetWidth / 2 : 0) - props.scrollOffsetX

report-viewer/src/components/VersionInfoComponent.vue

@@ -37,9 +37,8 @@
 </template>
 
 <script setup lang="ts">
-import { Version } from '@/model/Version'
 import { ref } from 'vue'
-import { minimalReportVersion, reportViewerVersion } from '@/model/Version'
+import { minimalReportVersion, reportViewerVersion, Version } from '@/model/Version'
 import RepositoryReference from './RepositoryReference.vue'
 
 const newestVersion = ref(new Version(-1, -1, -1))

report-viewer/src/components/distributionDiagram/DistributionDiagram.vue

@@ -90,11 +90,11 @@ const options = computed(() => {
             : 10 ** Math.ceil(Math.log10(maxVal.value + 5)),
         type: graphOptions.value.xScale,
         ticks: {
-          // ensures that in log mode tick labels are not overlappein
+          // ensures that in log mode tick labels are not overlapping
           minRotation: graphOptions.value.xScale === 'logarithmic' ? 30 : 0,
           autoSkipPadding: 10,
           color: graphColors.ticksAndFont.value,
-          // ensures that in log mode ticks are placed evenly appart
+          // ensures that in log mode ticks are placed evenly apart
           callback: function (value: any) {
             if (graphOptions.value.xScale === 'logarithmic' && (value + '').match(/1(0)*[^1-9.]/)) {
               return value

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

@@ -10,7 +10,7 @@
     <div
       v-for="(part, index) in textParts"
       :key="index"
-      class="print-excact h-full last:flex-1"
+      class="print-exact h-full last:flex-1"
       @click="matchSelected(part.match)"
       :style="{
         background:
@@ -21,7 +21,7 @@
     >
       <pre
         v-html="part.line"
-        class="code-font print-excact break-child !bg-transparent print:whitespace-pre-wrap"
+        class="code-font print-exact break-child !bg-transparent print:whitespace-pre-wrap"
       ></pre>
     </div>
   </div>

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

@@ -112,7 +112,7 @@ function scrollTo(file: string, line: number) {
 }
 
 /**
- * Collapses all of the code panels.
+ * Collapses all the code panels.
  */
 function collapseAll() {
   codePanels.value.forEach((panel) => panel.collapse())

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

@@ -45,7 +45,7 @@
     </ToolTipComponent>
 
     <div
-      class="print-excact flex w-full flex-row space-x-1 overflow-x-auto print:flex-wrap print:space-y-1 print:overflow-x-hidden"
+      class="print-exact flex w-full flex-row space-x-1 overflow-x-auto print:flex-wrap print:space-y-1 print:overflow-x-hidden"
       ref="scrollableList"
       @scroll="updateScrollOffset()"
     >
@@ -77,7 +77,7 @@
             }}) <br />
             Match is {{ match.tokens }} tokens long. <br />
             <span v-if="showTokenRanges(match)">
-              Token indeces of match: {{ match.startInFirst.tokenListIndex }}-{{
+              Token indices of match: {{ match.startInFirst.tokenListIndex }}-{{
                 match.endInFirst.tokenListIndex
               }}
               and {{ match.startInSecond.tokenListIndex }}-{{ match.endInSecond.tokenListIndex }}.
@@ -104,7 +104,7 @@
         v-for="[index, match] in matches?.entries()"
         v-bind:key="index"
         :style="{ background: getMatchColor(0.3, match.colorIndex) }"
-        class="print-excact"
+        class="print-exact"
       >
         <td class="px-2">{{ getFileName(match.firstFile) }}</td>
         <td class="px-2">{{ match.startInFirst }} - {{ match.endInFirst }}</td>
@@ -115,7 +115,7 @@
       <tr
         v-if="hasBaseCode"
         :style="{ background: getMatchColor(0.3, 'base') }"
-        class="print-excact"
+        class="print-exact"
       >
         <td class="px-2" colspan="5">Basecode in submissions</td>
       </tr>

report-viewer/src/components/optionsSelectors/OptionComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <Interactable
-    class="print-excact mr-2 box-border flex h-6 w-fit items-center justify-center whitespace-nowrap !rounded-2xl px-[12px] text-center hover:!border-[2px] hover:px-[11px] print:border-2"
+    class="print-exact mr-2 box-border flex h-6 w-fit items-center justify-center whitespace-nowrap !rounded-2xl px-[12px] text-center hover:!border-[2px] hover:px-[11px] print:border-2"
     :class="{ '!border-accent-dark !bg-accent !bg-opacity-40': selected }"
     @click="$emit('click')"
   >

report-viewer/src/main.ts

@@ -19,7 +19,7 @@ app.use(VueVirtualScroller)
 app.config.errorHandler = (err, vm, info) => {
   console.error(err)
   console.error(info)
-  alert('An unhandeled error occured. Please check the console for more details.')
+  alert('An unhandled error occurred. Please check the console for more details.')
 }
 
 app.mount('#app')

report-viewer/src/model/Comparison.ts

@@ -10,9 +10,9 @@ export class Comparison {
   private readonly _firstSubmissionId: string
   private readonly _secondSubmissionId: string
   private readonly _similarities: Record<MetricType, number>
-  private _filesOfFirstSubmission: SubmissionFile[]
-  private _filesOfSecondSubmission: SubmissionFile[]
-  private _allMatches: Array<Match>
+  private readonly _filesOfFirstSubmission: SubmissionFile[]
+  private readonly _filesOfSecondSubmission: SubmissionFile[]
+  private readonly _allMatches: Array<Match>
   private readonly _firstSimilarity: number
   private readonly _secondSimilarity: number
 
@@ -103,7 +103,7 @@ export class Comparison {
   private groupMatchesByFileName(index: 1 | 2): Map<string, Array<MatchInSingleFile>> {
     const acc = new Map<string, Array<MatchInSingleFile>>()
     this._allMatches.forEach((val) => {
-      const name = index === 1 ? (val.firstFile as string) : (val.secondFile as string)
+      const name = index === 1 ? val.firstFile : val.secondFile
 
       if (!acc.get(name)) {
         acc.set(name, [])

report-viewer/src/model/MetricType.ts

@@ -1,5 +1,5 @@
 /**
- * This enum maps the metric type to the index they have in the generated JSON and respectivly in the store.
+ * This enum maps the metric type to the index they have in the generated JSON and respectively in the store.
  */
 export enum MetricType {
   AVERAGE = 'AVG',
@@ -23,6 +23,6 @@ export const metricToolTips: Record<MetricType, MetricToolTipData> = {
     longName: 'Maximum Similarity',
     shortName: 'MAX',
     tooltip:
-      'The maximum similarity of the two files.\nUsefull if programms are very dfferent in size.'
+      'The maximum similarity of the two files.\nUseful if programms are very different in size.'
   }
 }

report-viewer/src/model/Version.ts

@@ -4,9 +4,9 @@ import versionJson from '@/version.json'
  * Version of the report viewer.
  */
 export class Version {
-  private major: number
-  private minor: number
-  private patch: number
+  private readonly major: number
+  private readonly minor: number
+  private readonly patch: number
 
   constructor(major: number, minor: number, patch: number) {
     this.major = major

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

@@ -7,10 +7,9 @@ export class BaseCodeReportFactory extends BaseFactory {
   private static readonly basePath = 'basecode'
 
   public static async getReport(submissionId: string): Promise<BaseCodeMatch[]> {
-    const a = await this.extractReport(
+    return this.extractReport(
       JSON.parse(await this.getFile(slash(`${this.basePath}/${submissionId}.json`)))
     )
-    return a
   }
 
   private static async extractReport(json: Record<string, unknown>[]): Promise<BaseCodeMatch[]> {

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

@@ -5,7 +5,7 @@ import { ZipFileHandler } from '@/model/fileHandling/ZipFileHandler'
  * This class provides some basic functionality for the factories.
  */
 export class BaseFactory {
-  public static zipFileName = 'results.zip'
+  public static readonly zipFileName = 'results.zip'
 
   /**
    * Returns the content of a file through the stored loading type.

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

@@ -15,7 +15,7 @@ export class ComparisonFactory extends BaseFactory {
   }
 
   /**
-   * Creates a comparison object from a json object created by by JPlag
+   * Creates a comparison object from a json object created by JPlag
    * @param json the json object
    */
   private static async extractComparison(json: Record<string, unknown>): Promise<Comparison> {

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

@@ -20,7 +20,7 @@ export class OverviewFactory extends BaseFactory {
   }
 
   /**
-   * Creates an overview object from a json object created by by JPlag
+   * Creates an overview object from a json object created by JPlag
    * @param json the json object
    */
   private static extractOverview(json: Record<string, unknown>): Overview {
@@ -152,6 +152,7 @@ export class OverviewFactory extends BaseFactory {
    * Compares the two versions and shows an alert if they are not equal and puts out a warning if they are not
    * @param jsonVersion the version of the json file
    * @param reportViewerVersion the version of the report viewer
+   * @param minimalVersion the minimal report version expected
    */
   static compareVersions(
     jsonVersion: Version,
@@ -179,13 +180,13 @@ export class OverviewFactory extends BaseFactory {
       sessionStorage.setItem('versionAlert', 'true')
     }
     if (jsonVersion.compareTo(minimalVersion) < 0) {
-      throw (
+      throw new Error(
         "The result's version(" +
-        jsonVersion.toString() +
-        ') is older than the minimal support version of the report viewer(' +
-        minimalVersion.toString() +
-        '). ' +
-        'Can not read the report.'
+          jsonVersion.toString() +
+          ') is older than the minimal support version of the report viewer(' +
+          minimalVersion.toString() +
+          '). ' +
+          'Can not read the report.'
       )
     }
   }

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

@@ -85,7 +85,7 @@ export class ZipFileHandler extends FileHandler {
       filesOrSubmissionsIndex_originalFileName +
         (rootName === 'files' ? 'files'.length : 'submissions'.length)
     )
-    if (originalPathWithoutSubmissions.charAt(0) === '\\') {
+    if (originalPathWithoutSubmissions.startsWith('\\')) {
       fullPath = unixSubfolderPathAfterSubmissions + '\\' + fileBase
       while (fullPath.includes('/')) {
         fullPath = fullPath.replace('/', '\\')

report-viewer/src/stores/state.ts

@@ -50,12 +50,3 @@ export interface UIState {
   comparisonTableClusterSorting: boolean
   distributionChartConfig: DistributionChartConfig
 }
-
-/**
- * Load configuration is used to indicate which mode is used.
- */
-export interface LoadConfiguration {
-  local: boolean
-  zip: boolean
-  single: boolean
-}

report-viewer/src/style.css

@@ -17,7 +17,7 @@
     @apply h-[6px] w-[6px] cursor-pointer;
   }
   *::-webkit-scrollbar-track {
-    @apply rounded-full border-2 bg-scrollbar-backgorund-light dark:bg-scrollbar-backgorund-dark;
+    @apply rounded-full border-2 bg-scrollbar-background-light dark:bg-scrollbar-background-dark;
   }
   *::-webkit-scrollbar-thumb {
     @apply rounded-full border-2 bg-scrollbar-thumb-light dark:bg-scrollbar-thumb-dark;
@@ -29,7 +29,7 @@
     overflow-wrap: anywhere;
   }
 
-  .print-excact {
+  .print-exact {
     print-color-adjust: exact;
   }
 

report-viewer/src/utils/CodeHighlighter.ts

@@ -5,8 +5,8 @@ import llvm from 'highlight.js/lib/languages/llvm'
 import typescript from 'highlight.js/lib/languages/typescript'
 
 /**
- * Hightlights the given code with the given language.
- * Splits the resulting html into seperate lines.
+ * Highlights the given code with the given language.
+ * Splits the resulting html into separate lines.
  * The returned string is an array of html lines, consisting of spans with the hljs classes and the code.
  * Source: https://stackoverflow.com/a/70656181
  * @param code Code to highlight
@@ -16,7 +16,7 @@ import typescript from 'highlight.js/lib/languages/typescript'
 export function highlight(code: string, lang: Language) {
   const highlightedCode = hljs.highlight(code, { language: getHighlightLanguage(lang) }).value
   const openTags: string[] = []
-  const formattedCode = highlightedCode
+  return highlightedCode
     .replace(/(<span [^>]*>)|(<\/span>)|(\n)/g, (match: string) => {
       if (match === '\n') {
         return '</span>'.repeat(openTags.length) + '\n' + openTags.join('')
@@ -31,7 +31,6 @@ export function highlight(code: string, lang: Language) {
       return match
     })
     .split('\n')
-  return formattedCode
 }
 
 function getHighlightLanguage(lang: Language) {

report-viewer/src/utils/ColorUtils.ts

@@ -32,7 +32,7 @@ function generateColors(
 }
 
 /**
- * Genertes an array of HSL-Colors for a given interval
+ * Generates an array of HSL-Colors for a given interval
  * @param intervalStart start of the interval [0,360]
  * @param intervalEnd end of the interval [0,360] and > intervalStart
  * @param numberOfColorsInInterval Number of colors to generate in the interval
@@ -59,7 +59,7 @@ function generateColorsForInterval(
   return colors
 }
 
-/** This is the list of colors that are used as the background colot of matches in the comparison view */
+/** This is the list of colors that are used as the background color of matches in the comparison view */
 const matchColors: { red: number; green: number; blue: number }[] = [
   { red: 255, green: 122, blue: 0 },
   { red: 0, green: 133, blue: 255 },