[192-webreport] Created comparison view, implemented left panel of comparison view

report-viewer/src/components/MatchList.vue

@@ -0,0 +1,112 @@
+<template>
+<div class="wrapper">
+  <select v-model="selected" @change="this.$emit('selectionChanged', $event, selected)">
+    <option v-for="option in Object.keys(matches)" :value="option" :key="option">
+      {{ option }}
+    </option>
+  </select>
+  <table>
+    <tr>
+      <th>
+        <p>{{ submission1 }}</p>
+        <p>{{ selectedSplit[0] }}</p>
+      </th>
+      <th>
+        <p>{{ submission2 }}</p>
+        <p>{{ selectedSplit[1] }}</p>
+      </th>
+      <th>Matched tokens</th>
+    </tr>
+    <tr v-for="(match, index) in matches[selected]" :key="match.start_in_first + match.end_in_first"
+        @click="this.$emit('matchSelected', $event, index)">
+      <td>{{ match.start_in_first }} - {{ match.end_in_first }}</td>
+      <td>{{ match.start_in_second }} - {{ match.end_in_second }}</td>
+      <td>TODO</td>
+    </tr>
+  </table>
+</div>
+</template>
+
+<script>
+import { defineComponent, ref, watchEffect } from "vue";
+
+export default defineComponent({
+  name: "MatchList",
+  props: {
+    matches: {
+      type: Array,
+      required: true
+    },
+    submission1: {
+      type: String,
+      required: true
+    },
+    submission2: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    let selected = ref(Object.keys(props.matches)[0]);
+    let selectedSplit = ref(selected.value.split(" - "))
+
+    watchEffect(() => {
+      selectedSplit.value = selected.value.split(" - ")
+    })
+
+    return {
+      selected,
+      selectedSplit,
+    }
+  }
+})
+</script>
+
+<style scoped>
+.wrapper {
+  background: #ECECEC;
+  border-radius: 10px;
+  padding: 5%;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -ms-overflow-style: none;
+}
+
+.wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+select {
+  margin-bottom: 5%;
+  background: #ECECEC;
+  border: none;
+  border-bottom: solid rgba(119, 119, 119, 0.20);
+}
+
+table {
+  border-collapse: collapse;
+}
+
+th {
+  font-size: small;
+}
+
+th > p {
+  margin: 0
+}
+
+tr {
+  border-bottom: solid rgba(119, 119, 119, 0.20);
+}
+
+td {
+  padding: 2% 0;
+}
+
+tr:hover {
+  background: #FF5353;
+  color: white;
+}
+</style>

report-viewer/src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
 import Overview from "@/views/Overview.vue";
 import FileUpload from "@/views/FileUpload.vue"
+import ComparisonView from "@/views/ComparisonView.vue"
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -14,6 +15,12 @@ const routes: Array<RouteRecordRaw> = [
     component: Overview,
     props: route => ({ jsonString : route.params.str })
   },
+  {
+    path: "/c",
+    name: "ComparisonView",
+    component: ComparisonView,
+    props: route => ({ jsonString : route.params.str})
+  },
 ];
 
 const router = createRouter({

report-viewer/src/views/ComparisonView.vue

@@ -0,0 +1,95 @@
+<template>
+<div class="container">
+  <div id="leftPanel">
+    <img id="logo" src="@/assets/logo.png" alt="JPlag">
+    <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"/>
+    <MatchList :submission1="json.first_submission_id"
+               :submission2="json.second_submission_id"
+               :matches="groupedMatches"
+                @selection-changed="selectFiles"
+                @match-selected="selectMatch"/>
+  </div>
+  <div id="rightPanel"></div>
+</div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import TextInformation from "@/components/TextInformation";
+import MatchList from "@/components/MatchList";
+
+export default defineComponent({
+  name: "ComparisonView",
+  components: {MatchList, TextInformation},
+  props: {
+    jsonString: {
+      type: String
+    }
+  },
+  setup(props) {
+    console.log(props.jsonString)
+    const json = JSON.parse(props.jsonString)
+
+    const groupedMatches = json.matches.reduce( (acc, val) => {
+      let name = val.first_file_name + " - " + val.second_file_name
+      if(!acc[name]) {
+        acc[name] = []
+      }
+      acc[name].push(val)
+      return acc;
+    }, {})
+
+
+
+    console.log(JSON.stringify(groupedMatches))
+
+    const selectFiles = (e , s) => {
+      console.log("Selected is " + s)
+    }
+
+    const selectMatch = (e, i) => {
+      console.log("Index of selected match is " + i)
+    }
+    return {
+      json, groupedMatches, selectFiles, selectMatch,
+    }
+  }
+})
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+#leftPanel {
+  width: 20%;
+  background: #FF5353;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 1%;
+}
+
+#rightPanel {
+  width: 80%;
+  background: #ECECEC;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  padding: 1%;
+}
+
+#logo {
+  width: 60%;
+  height: 20%;
+  margin-bottom: 5%;
+}
+</style>

report-viewer/src/views/FileUpload.vue

@@ -27,6 +27,13 @@ export default defineComponent({
       )
     }
 
+    const navigateToComparisonView = (file) => {
+      router.push({
+        name: "ComparisonView",
+        params: {str: file}
+      })
+    }
+
     const uploadFile = (e) => {
       let dropped = e.dataTransfer.files
       if (!dropped) return
@@ -34,7 +41,11 @@ export default defineComponent({
       if (files.length > 1 || files.length === 0) return
       let read = new FileReader()
       read.onload = (e) => {
-        navigateToOverview(e.target.result)
+        if(files[0].name.includes("comparison")) {
+          navigateToComparisonView(e.target.result)
+        } else {
+          navigateToOverview(e.target.result)
+        }
       }
       read.readAsText(files[0])
     }