[192-webreport] Added links to matches in code panel, added colors to match list, set cursor to pointer for clickable areas

report-viewer/src/App.vue

@@ -4,6 +4,16 @@
 </template>
 
 <style>
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("./fonts/jetbrains-mono/JetBrainsMono-Light.ttf");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("./fonts/jetbrains-mono/JetBrainsMono-Bold.ttf");
+  font-weight: bold;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

report-viewer/src/components/CodePanel.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="code-container">
-    <LineOfCode v-for="(line, index) in lines" :key="index" :color="coloringArray[index]" :line-number="index" :text="line"
-    :id="panelId.concat(index)"/>
+    <LineOfCode v-for="(line, index) in lines"
+                :key="index"
+                :color="coloringArray[index]"
+                :line-number="index"
+                :text="line"
+                :id="panelId.concat(index)"
+                :match-link="linksArray[index]"
+                :is-last="isLast[index]"
+                :is-first="isFirst[index]"/>
   </div>
 </template>
 
@@ -27,14 +34,27 @@ export default defineComponent({
   setup(props) {
     console.log(JSON.stringify(props.coloring))
     const coloringArray = ref({})
+    const linksArray = ref({})
+    const isLast = ref({})
+    const isFirst = ref({})
     props.coloring.forEach(m => {
       for (let i = m.start; i <= m.end; i++) {
         coloringArray.value[i] = m.color
+        linksArray.value[i] = props.panelId === "1" ? "2".concat(m.link) : "1".concat(m.link)
+        if(i === m.start) {
+          isFirst.value[i] = true
+        }
+        if(i === m.end) {
+          isLast.value[i] = true
+        }
       }
     })
     for(let i = 0; i < props.lines.length; i++) {
       if(!coloringArray.value[i]) {
         coloringArray.value[i] = "#ECECEC"
+        linksArray.value[i] = "-1"
+        isFirst.value[i] = false
+        isLast.value[i] = false
       }
     }
     watchEffect(() => {
@@ -42,16 +62,29 @@ export default defineComponent({
       props.coloring.forEach(m => {
         for (let i = m.start; i <= m.end; i++) {
           coloringArray.value[i] = m.color
+          linksArray.value[i] = props.panelId === "1" ? "2".concat(m.link) : "1".concat(m.link)
+          if(i === m.start) {
+            isFirst.value[i] = true
+          }
+          if(i === m.end) {
+            isLast.value[i] = true
+          }
         }
       })
       for(let i = 0; i < props.lines.length; i++) {
         if(!coloringArray.value[i]) {
           coloringArray.value[i] = "#ECECEC"
+          linksArray.value[i] = "-1"
+          isFirst.value[i] = false
+          isLast.value[i] = false
         }
       }
     })
     return {
-      coloringArray
+      coloringArray,
+      linksArray,
+      isFirst,
+      isLast
     }
   }
 })

report-viewer/src/components/LineOfCode.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="line-wrap" :style="{background : color}">
-<pre :id="text" v-bind:class="{ blurred : isBlurred }" >{{ lineNumber }} {{ text }}</pre>
+  <div class="line-wrap" :style="{background : color}" :class="{'first-line' : isFirst, 'last-line' : isLast}" @click="linkMatch">
+    <pre :id="text" v-bind:class="{ blurred : isBlurred, 'match-line' : color !== '#ECECEC' }">{{ lineNumber }} {{ text }}</pre>
   </div>
 </template>
 
@@ -24,12 +24,25 @@ export default defineComponent({
     },
     startOfMatch: {
       type: Number
+    },
+    matchLink: {
+      type: String
+    },
+    isFirst: {
+      type: Boolean,
+    },
+    isLast: {
+      type: Boolean,
     }
   },
   setup(props) {
-    document.getEleme
+    const linkMatch = () => {
+      if(props.matchLink !== "-1") {
+        document.getElementById(props.matchLink).scrollIntoView()
+      }
+    }
     return {
-
+      linkMatch
     }
   }
 })
@@ -40,15 +53,24 @@ pre {
   margin: 0;
   padding: 0;
   float: left;
-
+  font-family: "JetBrains Mono";
+  font-size: x-small;
 }
 .blurred {
   filter: blur(2px);
   -webkit-filter: blur(2px);
 }
+.first-line {
+  margin-top: 2%;
+}
+.last-line {
+  margin-bottom: 2%;
+  box-shadow: #777777 0 3px 3px;
+}
+.match-line {
+}
 .line-wrap {
   width: 200%;
 }
 
-
 </style>

report-viewer/src/components/MatchList.vue

@@ -17,8 +17,11 @@
       </th>
       <th>Tokens</th>
     </tr>
-    <tr class="selectable-row" v-for="match in matches[selectedSplit[0]][selectedSplit[1]]" :key="match.start_in_first + match.end_in_first"
-        @click="this.$emit('matchSelected', $event, match.start_in_first, match.end_in_first, match.start_in_second, match.end_in_second)">
+    <tr class="selectable-row" v-for="match in matches[selectedSplit[0]][selectedSplit[1]]"
+        :key="match.start_in_first + match.end_in_first"
+        @click="this.$emit('matchSelected', $event, match.start_in_first, match.end_in_first, match.start_in_second, match.end_in_second)"
+        :style="{background : match.color}"
+    >
       <td>{{ match.start_in_first }} - {{ match.end_in_first }}</td>
       <td>{{ match.start_in_second }} - {{ match.end_in_second }}</td>
       <td>TODO</td>
@@ -97,6 +100,10 @@ select {
   border-bottom: solid rgba(119, 119, 119, 0.20);
 }
 
+option {
+  text-align: center;
+}
+
 table {
   border-collapse: collapse;
 }
@@ -111,6 +118,7 @@ th > p {
 
 tr {
   border-bottom: solid rgba(119, 119, 119, 0.20);
+  border-radius: 10px;
 }
 
 td {
@@ -118,8 +126,8 @@ td {
 }
 
 .selectable-row:hover {
-  background: #FF5353;
   color: white;
+  cursor: pointer;
 }
 
 </style>

report-viewer/src/utils/Utils.ts

@@ -13,11 +13,11 @@ export function generateColoringArray(array: Array<Record<string, unknown>>, fil
         case 1:
             return array.map( m => {
                 //Add connection to second panel via m.start_in_second
-                return { start: m.start_in_first, end: m.end_in_first, color: m.color}
+                return { start: m.start_in_first, end: m.end_in_first, link: m.start_in_second, color: m.color}
             })
         case 2:
             return array.map( m => {
-                return { start: m.start_in_second, end: m.end_in_second, color: m.color}
+                return { start: m.start_in_second, end: m.end_in_second, link: m.start_in_first, color: m.color}
             })
         default:
             return []

report-viewer/src/views/ComparisonView.vue

@@ -5,10 +5,10 @@
       <img id="logo" src="@/assets/logo.png" alt="JPlag">
       <button id="hide-button" @click="togglePanel"><img src="@/assets/double_arrow_white_24dp.svg" alt="hide"></button>
     </div>
-    <TextInformation :has-additional-info="false" value="Match Report" label=""/>
-    <TextInformation label="First Submission:" value="324567" :has-additional-info="false"/>
-    <TextInformation label="Second Submission:" value="789223" :has-additional-info="false"/>
-    <TextInformation label="Match percentage:" value="75.34%" :has-additional-info="false"/>
+    <TextInformation :has-additional-info="false" value="Matches Report" label=""/>
+    <TextInformation label="First Submission:" :value="json.first_submission_id" :has-additional-info="false"/>
+    <TextInformation label="Second Submission:" :value="json.second_submission_id" :has-additional-info="false"/>
+    <TextInformation label="Match percentage:" :value="json.match_percentage" :has-additional-info="false"/>
     <MatchList :submission1="json.first_submission_id"
                :submission2="json.second_submission_id"
                :matches="groupedMatches"
@@ -143,6 +143,11 @@ export default defineComponent({
   border: none;
   padding: 0;
   margin: 0;
+  transform: rotate(180deg);
+}
+
+#hide-button:hover {
+  cursor: pointer;
 }
 
 #show-button {
@@ -157,6 +162,10 @@ export default defineComponent({
   width: 1%;
 }
 
+#show-button:hover {
+  cursor: pointer;
+}
+
 #show-button img {
   display: none;
 }