[192-webreport] Edited top_comparisons structure in overview json, dynamically update top comparisons list in frontend

jplag/src/main/java/de/jplag/reportingV2/reportobject/ReportObjectFactory.java

@@ -93,17 +93,10 @@ public class ReportObjectFactory {
 
 	private static List<TopComparison> getTopComparisons(List<JPlagComparison> comparisons) {
 		List<TopComparison> topComparisons = new ArrayList<>();
-		comparisons.forEach( c -> topComparisons.add(new TopComparison(constructComparisonName(c), c.similarity())));
+		comparisons.forEach( c -> topComparisons.add(new TopComparison(c.getFirstSubmission().getName(), c.getSecondSubmission().getName(), c.similarity())));
 		return topComparisons;
 	}
 
-	private static String constructComparisonName(JPlagComparison comparison) {
-		return String.join("-",
-				comparison.getFirstSubmission().getName(),
-				comparison.getSecondSubmission().getName()
-		);
-	}
-
 	private static List<String> getExcludedFilesNames(JPlagOptions options) {
 		if (options.getExclusionFileName() == null) {
 			return List.of();

jplag/src/main/java/de/jplag/reportingV2/reportobject/model/TopComparison.java

@@ -2,24 +2,34 @@ package de.jplag.reportingV2.reportobject.model;
 
 public class TopComparison {
 
-	private String comparison_name;
+	private String first_submission;
+	private String second_submission;
 	private float match_percentage;
 
-	public TopComparison(String comparison_name, float match_percentage) {
-		this.comparison_name = comparison_name;
+	public TopComparison(String first_submission, String second_submission, float match_percentage) {
+		this.first_submission = first_submission;
+		this.second_submission = second_submission;
 		this.match_percentage = match_percentage;
 	}
 
-	public String getComparison_name() {
-		return comparison_name;
+	public String getFirst_submission() {
+		return first_submission;
+	}
+
+	public String getSecond_submission() {
+		return second_submission;
 	}
 
 	public float getMatch_percentage() {
 		return match_percentage;
 	}
 
-	public void setComparison_name(String comparison_name) {
-		this.comparison_name = comparison_name;
+	public void setFirst_submission(String first_submission) {
+		this.first_submission = first_submission;
+	}
+
+	public void setSecond_submission(String second_submission) {
+		this.second_submission = second_submission;
 	}
 
 	public void setMatch_percentage(float match_percentage) {

report-viewer/src/components/ComparisonListElement.vue

@@ -4,7 +4,7 @@
       <p class="submission-id">{{ submission1 }}</p>
       <img src="@/assets/double_arrow_black_18dp.svg" alt=">>"/>
       <p class="submission-id">{{ submission2 }}</p>
-    <p class="match-percentage">{{ matchPercentage }}%</p>
+    <p class="match-percentage">{{ formattedMatchPercentage }}%</p>
   </div>
 </template>
 
@@ -27,14 +27,14 @@ export default defineComponent({
       required: true
     },
     matchPercentage: {
-      type: String,
+      type: Number,
       required: true
     }
   },
-  setup() {
-
+  setup(props) {
+    let formattedMatchPercentage = props.matchPercentage.toFixed(2)
     return {
-
+      formattedMatchPercentage
     }
   }
 })
@@ -47,11 +47,9 @@ export default defineComponent({
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 0 1%;
-  margin-bottom: 1%;
+  padding: 0 3%;
   box-shadow: #777777 0 3px 3px;
   border-radius: 40px;
-  width: 25%;
 }
 
 .wrapper-list-element > * {

report-viewer/src/components/ComparisonsLists.vue

@@ -1,19 +1,20 @@
 <template>
   <div class="wrapper">
     <ul id="list">
-      <li v-for="(comparison, index) in comparisons" :key="index">
+      <li v-for="(comparison, index) in comparisons" :key="comparison.first_submission
+      + comparison.second_submission
+      + comparison.match_percentage">
         <ComparisonListElement :index="index + 1"
-                               :submission1="comparison.submission1"
-                               :submission2="comparison.submission2"
-                               :match-percentage="comparison.matchPercentage"/>
+                               :submission1="comparison.first_submission"
+                               :submission2="comparison.second_submission"
+                               :match-percentage="comparison.match_percentage"/>
       </li>
     </ul>
   </div>
 </template>
 
 <script>
-import { defineComponent, ref} from "vue";
-import TopComparison from "../model/TopComparison";
+import { defineComponent, ref, watch} from "vue";
 import ComparisonListElement from "./ComparisonListElement";
 
 export default defineComponent({
@@ -21,30 +22,39 @@ export default defineComponent({
   components: {ComparisonListElement},
   props: {
     comparisons: {
-      type: [TopComparison],
       required: true
     }
   },
+  setup(props) {
+
+    watch( () => props.comparisons, (val, oldVal) => {
+      console.log("New val is: " + JSON.stringify(val))
+    })
+
+    return {
+
+    }
+  }
 })
 </script>
 
 <style scoped>
 .wrapper {
   display: flex;
-  background: white;
+  background: whitesmoke;
   border-radius: 10px;
   align-items: center;
   box-shadow: #777777 2px 3px 3px;
-  flex-wrap: wrap;
+  height: 300px;
 }
 
 ul {
   width: 100%;
+  height: 100%;
   list-style-type: none;
-  padding-right: 1%;
-  padding-left: 1%;
-  columns: 2;
-  -webkit-columns: 2;
-  -moz-columns: 2;
+  padding: 2% 1% 0;
+  columns: 3;
+  -webkit-columns: 3;
+  -moz-columns: 3;
 }
 </style>

report-viewer/src/components/DistributionDiagram.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import {defineComponent, ref, reactive, watch, watchEffect} from "vue";
+import {defineComponent, ref, watch} from "vue";
 import { BarChart } from "vue-chart-3"
 import { Chart, registerables } from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
@@ -22,8 +22,6 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const distributionRef = ref(props.distribution)
-
     let chartData = ref( {
         labels: ['0-10%', '11-20%', '21-30%', '31-40%', '41-50%', '51-60%', '61-70%', '71-80%', '81-90%', '91-100%'],
         datasets: [{

report-viewer/src/views/Overview.vue

@@ -28,7 +28,7 @@
       <div id="topComparisonsList" class="section">
         <p class="section-title">Top comparisons:</p>
         <p class="section-subtitle">(Top 25)</p>
-
+        <ComparisonsLists :comparisons="topComps[selectedMetricIndex]"/>
       </div>
     </div>
   </div>
@@ -43,7 +43,7 @@ import ComparisonsLists from "@/components/ComparisonsLists";
 
 export default defineComponent({
   name: "Overview",
-  components: { DistributionDiagram, MetricButton, TextInformation},
+  components: {ComparisonsLists, DistributionDiagram, MetricButton, TextInformation},
   props: {
     jsonString: {
       type: String,
@@ -54,6 +54,8 @@ export default defineComponent({
     const json = JSON.parse(props.jsonString)
     let selectedMetric = ref(json.metrics.map( () => false ))
     let distributions = ref(json.metrics.map( (m) =>  m.distribution ))
+    let topComps = ref(json.metrics.map((m) => m.topComparisons))
+    console.log(JSON.stringify(topComps.value))
     let selectedMetricIndex = ref(0)
     selectedMetric.value[0] = true;
 
@@ -65,10 +67,16 @@ export default defineComponent({
 
     watchEffect( () => {
       console.log("Overview - selected dist " + JSON.stringify(distributions.value[selectedMetricIndex.value]))
+      console.log("Overview - selected topComp " + JSON.stringify(topComps.value[selectedMetricIndex.value]))
     })
 
     return {
-      json, selectedMetric,selectedMetricIndex, distributions, selectMetric
+      json,
+      selectedMetric,
+      selectedMetricIndex,
+      distributions,
+      topComps,
+      selectMetric
     }
   }
 })