Add template code highlighting

web/src/api/models/pair.ts

@@ -1,4 +1,5 @@
-import { File, Fragment } from "@/api/models";
+import { File, Fragment, Kgram } from "@/api/models";
+import { FileEntry, Region } from "@dodona/dolos-core";
 
 export interface Pair {
   id: number;
@@ -10,4 +11,8 @@ export interface Pair {
   leftCovered: number;
   rightCovered: number;
   fragments: Fragment[] | null;
+  leftEntry: FileEntry;
+  rightEntry: FileEntry; 
+  leftIgnoredKgrams: Region[];
+  rightIgnoredKgrams: Region[];
 }

web/src/api/workers/data.worker.ts

@@ -8,7 +8,8 @@ import {
   PairedOccurrence,
   Hash,
 } from "@/api/models";
-import { Fragment as DolosFragment, FingerprintIndex } from "@dodona/dolos-core";
+import { Fragment as DolosFragment, FingerprintIndex, TokenizedFile, Pair as DolosPair } from "@dodona/dolos-core";
+import { report } from "process";
 
 // Parse a list of Dolos fragments into a list of fragment models.
 export function parseFragments(
@@ -37,6 +38,30 @@ export function parseFragments(
   });
 }
 
+function getIgnoredKgrams(reportPair: DolosPair, leftFile: TokenizedFile, rightFile: TokenizedFile) {
+  const leftIgnoredKgrams = [];
+  const rightIgnoredKgrams = [];
+
+  for (const ignoredKgram of reportPair.leftEntry.ignored) {
+    const occurrences = ignoredKgram.occurrencesOf(leftFile);
+    if (occurrences.length > 0) {
+      leftIgnoredKgrams.push(occurrences[0].side.location);
+    }
+  }
+
+  for (const ignoredKgram of reportPair.rightEntry.ignored) {
+    const occurrences = ignoredKgram.occurrencesOf(rightFile);
+    if (occurrences.length > 0) {
+      rightIgnoredKgrams.push(occurrences[0].side.location);
+    }
+  }
+
+  return {
+    leftIgnoredKgrams,
+    rightIgnoredKgrams
+  };
+}
+
 // Populate the fragments for a given pair.
 export function populateFragments(
   pair: Pair,
@@ -64,7 +89,12 @@ export function populateFragments(
     const kmer = kmers[kmerKey];
     kmersMap.set(kmer.hash, kmer);
   }
-  pair.fragments = parseFragments(reportPair.buildFragments(), kmersMap);
+  const ignoredKgramsMap = getIgnoredKgrams(reportPair, leftFile, rightFile);
 
+  pair.fragments = parseFragments(reportPair.buildFragments(), kmersMap);
+  pair.leftEntry = reportPair.leftEntry;
+  pair.rightEntry = reportPair.rightEntry;
+  pair.leftIgnoredKgrams = ignoredKgramsMap.leftIgnoredKgrams;
+  pair.rightIgnoredKgrams = ignoredKgramsMap.rightIgnoredKgrams;
   return pair;
 }

web/src/components/pair/PairCodeMatchEditor.vue

@@ -28,7 +28,7 @@ interface Props {
 }
 
 interface Selection {
-  match: Fragment | null;
+  match: Fragment | null | string;
   range: monaco.IRange | null;
   isWholeLine: boolean;
 }
@@ -44,6 +44,7 @@ const colors = {
   match: "rgba(60, 115, 168, 0.2)",
   matchHovering: "rgba(60, 115, 168, 0.3)",
   matchSelected: "rgba(26, 188, 156, 0.5)",
+  matchIgnored: "rgba(0, 0, 0, 0.05)",
 };
 
 // File to display
@@ -83,7 +84,6 @@ const getMatchAtPosition = (row: number, col: number): Fragment | null => {
 
   for (const match of matches.value) {
     const side = match[props.side];
-
     // If the row/col is within the match row range.
     const inRowRange = side.startRow + 1 <= row && row <= side.endRow + 1;
     // If the row/col is within the match col range.
@@ -178,6 +178,43 @@ const initializeSelections = (): void => {
       isWholeLine: true,
     });
   }
+
+  for (const leftIgnored of props.pair.leftIgnoredKgrams) {
+    const fakeMatch: Fragment = {
+      left: leftIgnored,
+      right: {
+        startRow: 0,
+        startCol: 0,
+        endRow: 0,
+        endCol: 0,
+      },
+      data: [],
+      occurrences: [],
+      active: false,
+    };
+    selections.value.push({
+      match: "leftIgnored",
+      range: {
+        startLineNumber: leftIgnored.startRow + 1,
+        startColumn: leftIgnored.startCol + 1,
+        endLineNumber: leftIgnored.endRow + 1,
+        endColumn: leftIgnored.endCol + 1,
+      },
+      isWholeLine: false,
+    });
+  }
+  for (const rightIgnored of props.pair.rightIgnoredKgrams) {
+    selections.value.push({
+      match: "rightIgnored",
+      range: {
+        startLineNumber: rightIgnored.startRow + 1,
+        startColumn: rightIgnored.startCol + 1,
+        endLineNumber: rightIgnored.endRow + 1,
+        endColumn: rightIgnored.endCol + 1,
+      },
+      isWholeLine: false,
+    });
+  }
 };
 
 const areMatchesEqual = (match1: Fragment | null, match2: Fragment | null) => {
@@ -196,16 +233,27 @@ const initializeDecorations = (): void => {
     decorations.value,
     selections.value.map((selection) => {
       const match = selection.match;
-
       let classname = "highlight-match";
-      if (areMatchesEqual(match, selectedMatch?.value)) classname += " highlight-match--selected";
-      else if (areMatchesEqual(match, hoveringMatch?.value)) classname += " highlight-match--hovering";
+      if (typeof match !== "string") {
+        if (areMatchesEqual(match, selectedMatch?.value)) classname += " highlight-match--selected";
+        else if (areMatchesEqual(match, hoveringMatch?.value)) classname += " highlight-match--hovering";
+      }
+      else if (match === "leftIgnored") {
+        classname += " highlight-match--ignored";
+
+      }
+      else if (match === "rightIgnored") {
+        classname += " highlight-match--ignored";
+      }
 
 
       let color = colors.match;
-      if (areMatchesEqual(match, selectedMatch?.value)) color = colors.matchSelected;
-      else if (areMatchesEqual(match, hoveringMatch?.value)) color = colors.matchHovering;
+      if (typeof match !== "string") {
+        if (areMatchesEqual(match, selectedMatch?.value)) color = colors.matchSelected;
+        else if (areMatchesEqual(match, hoveringMatch?.value)) color = colors.matchHovering;
+      }
 
+      console.log(selections)
       return {
         range: selection.range,
         options: {
@@ -367,6 +415,10 @@ watch(
     &--hovering {
       background-color: v-bind("colors.matchHovering");
     }
+
+    &--ignored {
+      background-color: v-bind("colors.matchIgnored");
+    }
   }
 }
 </style>