[192-webreport] Implemented side by side code display

report-viewer/src/components/CodePanel.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="code-container">
+    <LineOfCode v-for="(line, index) in lines" :key="line" :is-blurred="notBlurred.includes(index)" :line-number="index" :text="line"/>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import LineOfCode from "./LineOfCode";
+
+export default defineComponent({
+  name: "CodePanel",
+  components: {LineOfCode},
+  props: {
+    lines: {
+      type: Array,
+      required: true
+    },
+    notBlurred: {
+      type: Array
+    },
+  },
+  setup(props) {
+    return {
+
+    }
+  }
+})
+</script>
+
+<style scoped>
+.code-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  overflow: scroll;
+}
+</style>

report-viewer/src/components/LineOfCode.vue

@@ -0,0 +1,43 @@
+<template>
+<pre id="line" v-bind:class="{ blurred : isBlurred }">{{ lineNumber }} {{ text }}</pre>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "LineOfCode",
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    lineNumber: {
+      type: Number,
+      required: true
+    },
+    isBlurred: {
+      type: Boolean,
+      required: true
+    },
+  },
+  setup(props) {
+    console.log(props.lineNumber + " " + props.text)
+    return {
+
+    }
+  }
+})
+</script>
+
+<style scoped>
+pre {
+  margin: 0;
+  padding: 0;
+}
+.blurred {
+  filter: blur(2px);
+  -webkit-filter: blur(2px);
+}
+
+</style>

report-viewer/src/components/MatchList.vue

@@ -15,7 +15,7 @@
         <p>{{ submission2 }}</p>
         <p>{{ selectedSplit[1] }}</p>
       </th>
-      <th>Matched tokens</th>
+      <th>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)">
@@ -109,4 +109,5 @@ tr:hover {
   background: #FF5353;
   color: white;
 }
+
 </style>

report-viewer/src/views/ComparisonView.vue

@@ -12,26 +12,45 @@
                 @selection-changed="selectFiles"
                 @match-selected="selectMatch"/>
   </div>
-  <div id="rightPanel"></div>
+  <div id="rightPanel">
+    <CodePanel :lines="filesOfFirst[selectedFileOfFirst]" :not-blurred="[]"/>
+    <CodePanel :lines="filesOfSecond[selectedFileOfSecond]" :not-blurred="[]"/>
+  </div>
 </div>
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, ref } from "vue";
 import TextInformation from "@/components/TextInformation";
 import MatchList from "@/components/MatchList";
+import CodePanel from "@/components/CodePanel";
 
 export default defineComponent({
   name: "ComparisonView",
-  components: {MatchList, TextInformation},
+  components: {CodePanel, MatchList, TextInformation},
   props: {
     jsonString: {
       type: String
     }
   },
   setup(props) {
-    console.log(props.jsonString)
+    const selectedFileOfFirst = ref([])
+    const selectedFileOfSecond = ref([])
     const json = JSON.parse(props.jsonString)
+    const filesOfFirst = json.files_of_first_submission.reduce( (acc, val) => {
+      if(!acc[val.file_name]) {
+        acc[val.file_name] = []
+      }
+      acc[val.file_name] = val.lines
+      return acc
+    }, {})
+    const filesOfSecond = json.files_of_second_submission.reduce( (acc, val) => {
+      if(!acc[val.file_name]) {
+        acc[val.file_name] = []
+      }
+      acc[val.file_name] = val.lines
+      return acc
+    }, {})
 
     const groupedMatches = json.matches.reduce( (acc, val) => {
       let name = val.first_file_name + " - " + val.second_file_name
@@ -43,18 +62,19 @@ export default defineComponent({
     }, {})
 
 
-
-    console.log(JSON.stringify(groupedMatches))
-
     const selectFiles = (e , s) => {
-      console.log("Selected is " + s)
+      let split = s.split(" - ")
+      selectedFileOfFirst.value = split[0]
+      selectedFileOfSecond.value = split[1]
     }
 
     const selectMatch = (e, i) => {
-      console.log("Index of selected match is " + i)
+      console.log(e, i)
     }
     return {
-      json, groupedMatches, selectFiles, selectMatch,
+      json, groupedMatches, filesOfFirst, filesOfSecond, selectedFileOfFirst, selectedFileOfSecond,
+      selectFiles,
+      selectMatch,
     }
   }
 })
@@ -82,8 +102,8 @@ export default defineComponent({
   width: 80%;
   background: #ECECEC;
   display: flex;
-  flex-direction: column;
   flex-wrap: nowrap;
+  justify-content: stretch;
   padding: 1%;
 }