[192-webreport] Displaying additional info in basic info panel

jplag/src/main/java/de/jplag/reportingV2/ReportingTest.java

@@ -11,7 +11,7 @@ import java.util.List;
 public class ReportingTest {
 
 	public static void main(String[] args) throws ExitException {
-		JPlagOptions options = new JPlagOptions("C:\\Uni\\PISE\\jplag-try-out\\src\\submission", LanguageOption.JAVA_1_9);
+		JPlagOptions options = new JPlagOptions("C:\\Uni\\PISE\\JPlag\\jplag\\src\\test\\resources\\de\\jplag\\samples\\PartialPlagiarism", LanguageOption.JAVA_1_9);
 		JPlag jPlag = new JPlag(options);
 		JPlagResult result = jPlag.run();
 		Report reporting = new JsonReport();

report-viewer/src/App.vue

@@ -14,6 +14,28 @@
   src: url("./fonts/jetbrains-mono/JetBrainsMono-Bold.ttf");
   font-weight: bold;
 }
+
+:root {
+  --primary-color: #f8534b;
+  --primary-color-light: #ff8777;
+  --primary-color-dark: #be1522;
+  --secondary-color: #ff9f8d;
+  --secondary-color-light: #ffd1bd;
+  --secondary-color-dark: #c96f60;
+  --tertiary-color: #95a8f1;
+  --tertiary-color-light: #c8d9ff;
+  --tertiary-color-dark: #6479be;
+  --quaternary-color: #f3eed9;
+  --quaternary-color-light: #ffffff;
+  --quaternary-color-dark: #c0bca8;
+  --background-color: #ECECEC;
+  --background-color-accent: #FFFFFF;
+  --on-primary-color: #303030;
+  --on-primary-color-accent: #FFFFFF;
+  --on-secondary-color: #000000;
+  --shadow-color: #777777;
+}
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

report-viewer/src/assets/keyboard_arrow_down_black_18dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>

report-viewer/src/assets/keyboard_arrow_down_white_18dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>

report-viewer/src/assets/keyboard_double_arrow_down_black_18dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 20 20" height="18px" viewBox="0 0 20 20" width="18px" fill="#000000"><g><rect fill="none" height="20" width="20"/></g><g><g><polygon points="15,5.06 13.94,4 10,7.94 6.06,4 5,5.06 10,10.06"/><polygon points="15,11 13.94,9.94 10,13.88 6.06,9.94 5,11 10,16"/></g></g></svg>

report-viewer/src/assets/keyboard_double_arrow_down_white_18dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 20 20" height="18px" viewBox="0 0 20 20" width="18px" fill="#FFFFFF"><g><rect fill="none" height="20" width="20"/></g><g><g><polygon points="15,5.06 13.94,4 10,7.94 6.06,4 5,5.06 10,10.06"/><polygon points="15,11 13.94,9.94 10,13.88 6.06,9.94 5,11 10,16"/></g></g></svg>

report-viewer/src/assets/keyboard_double_arrow_up_black_18dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 20 20" height="18px" viewBox="0 0 20 20" width="18px" fill="#000000"><g><rect fill="none" height="20" width="20"/></g><g><g><polygon points="5,14.94 6.06,16 10,12.06 13.94,16 15,14.94 10,9.94"/><polygon points="5,9 6.06,10.06 10,6.12 13.94,10.06 15,9 10,4"/></g></g></svg>

report-viewer/src/assets/keyboard_double_arrow_up_white_18dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 20 20" height="18px" viewBox="0 0 20 20" width="18px" fill="#FFFFFF"><g><rect fill="none" height="20" width="20"/></g><g><g><polygon points="5,14.94 6.06,16 10,12.06 13.94,16 15,14.94 10,9.94"/><polygon points="5,9 6.06,10.06 10,6.12 13.94,10.06 15,9 10,4"/></g></g></svg>

report-viewer/src/components/ComparisonListElement.vue

@@ -63,6 +63,7 @@ export default defineComponent({
   align-items: center;
   justify-content: space-between;
   padding: 2% 3%;
+  margin-bottom: 2%;
   box-shadow: #777777 0 3px 3px;
   border-radius: 40px;
 }

report-viewer/src/components/DistributionDiagram.vue

@@ -28,9 +28,9 @@ export default defineComponent({
         datasets: [{
           label: 'Count',
           data: props.distribution,
-          backgroundColor: 'rgba(186,22,22,0.5)',
+          backgroundColor: 'rgba(149, 168, 241, 0.5)',
           borderWidth: 2,
-          borderColor: 'rgba(186,22,22,1)'
+          borderColor: 'rgba(149, 168, 241, 1)'
         }]
     })
 
@@ -65,9 +65,9 @@ export default defineComponent({
         datasets: [{
           label: 'Count',
           data: val,
-          backgroundColor: 'rgba(186,22,22,0.5)',
+          backgroundColor: 'rgba(149, 168, 241, 0.5)',
           borderWidth: 2,
-          borderColor: 'rgba(186,22,22,1)'
+          borderColor: 'rgba(149, 168, 241, 1)'
         }]
       }
 

report-viewer/src/components/MetricButton.vue

@@ -45,8 +45,8 @@ export default defineComponent({
   background: white;
   border-radius: 5px;
   box-shadow: #777777 2px 3px 3px;
-  padding: 1%;
-  margin-right: 1%;
+  padding: 3%;
+  margin-right: 5%;
 }
 
 
@@ -60,6 +60,11 @@ export default defineComponent({
   justify-content: space-between;
 }
 
+.wrapper:hover {
+  background: var(--tertiary-color-dark);
+  color: var(--on-primary-color-accent);
+}
+
 .metric {
   margin-bottom: 2%;
 }
@@ -76,8 +81,8 @@ export default defineComponent({
 }
 
 .selected {
-  background: #FF5353;
-  box-shadow: #777777 2px 3px 3px;
+  background: var(--tertiary-color);
+  box-shadow: var(--shadow-color) 2px 3px 3px;
 }
 
 .selected p {

report-viewer/src/components/TextInformation.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="wrapper">
-    <div class="label">
+      <div class="text-container">
       <p class="label-text">{{ label }}</p>
-      <div class="additional-info" v-if="hasAdditionalInfo">
-        <p class="additional-label">{{ additionalInfoLabel }}</p>
-        <img alt="icon" src="@/assets/double_arrow_white_18dp.svg">
+      <p class="value-text" :title="value">{{ value }}</p>
       </div>
-    </div>
-    <p class="value-text">{{ value }}</p>
-    <hr>
+      <button class="collapse-button" :class="{ hidden : !hasAdditionalInfo }" @click="toggleIsCollapsed">
+        <img v-if="isCollapsed" src="../assets/keyboard_double_arrow_up_white_18dp.svg" alt="hide info">
+        <img v-else src="../assets/keyboard_double_arrow_down_white_18dp.svg" alt="additional info">
+      </button>
   </div>
+  <div class="additional-info" :class="{ hidden : !isCollapsed }">
+    <p class="additional-info-title">{{ additionalInfoTitle }}</p>
+    <p v-for="info in additionalInfo" :key="info">{{ info }}</p>
+  </div>
+  <hr>
 </template>
 
 <script>
@@ -29,13 +33,17 @@ export default defineComponent({
       type: Boolean,
       required: true
     },
-    additionalInfoLabel : String,
+    additionalInfoTitle: String,
     additionalInfo : [String]
   },
   setup() {
+    const isCollapsed = ref(false)
 
-    return {
+    const toggleIsCollapsed = () => isCollapsed.value = !isCollapsed.value
 
+    return {
+      isCollapsed,
+      toggleIsCollapsed
     }
   }
 
@@ -58,9 +66,16 @@ hr {
 }
 
 .wrapper {
+  display: flex;
+  background: var(--primary-color);
+  justify-content: space-between;
+  border-radius: 10px;
+}
+
+.text-container {
   display: flex;
   flex-direction: column;
-  align-items: stretch;
+  overflow: hidden;
 }
 
 .label {
@@ -69,28 +84,48 @@ hr {
 }
 
 .label-text {
-  font-weight: lighter;
+  color: var(--on-primary-color);
   text-align: left;
-  color: #ECECEC;
 }
 
 .value-text {
   font-weight: bold;
   text-align: left;
-  color: white;
+  color: var(--on-primary-color-accent);
 }
 
-.additional-info {
+.collapse-button {
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
+  align-items: center;
+  background: transparent;
+  border: none;
 }
 
-.additional-label {
-  font-weight: lighter;
+.collapse-button:hover {
+  background: var(--primary-color-dark);
+  border-radius: 10px;
+}
+
+.additional-info {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  background: var(--quaternary-color);
+  padding: 2%;
+  margin: 3% 0;
+  box-shadow: inset var(--shadow-color) 0 0 3px;
+  border-radius: 10px;
+  font-family: "JetBrains Mono";
   font-size: smaller;
-  white-space: nowrap;
-  color: #ECECEC;
-  margin: 4% 0 0 0;
+}
+
+.additional-info-title {
+  margin-bottom: 1%;
+}
+
+.hidden {
+  display: none !important;
 }
 
 </style>

report-viewer/src/views/ComparisonView.vue

@@ -2,7 +2,7 @@
 <div class="container">
   <div id="leftPanel" v-bind:class="{hidden : hideLeftPanel}">
     <div class="logo-section">
-      <img id="logo" src="@/assets/logo.png" alt="JPlag">
+      <img id="logo" src="@/assets/logo-nobg.png" alt="JPlag">
       <button id="hide-button" @click="togglePanel" title="Hide sidebar"><img src="@/assets/double_arrow_white_24dp.svg" alt="hide"></button>
     </div>
     <TextInformation :has-additional-info="false" value="Matches Report" label=""/>
@@ -120,7 +120,7 @@ export default defineComponent({
 
 #leftPanel {
   width: 25%;
-  background: #FF5353;
+  background: var(--primary-color);
   display: flex;
   flex-direction: column;
   align-items: stretch;

report-viewer/src/views/Overview.vue

@@ -1,19 +1,24 @@
 <template>
   <div class="container">
     <div id="leftPanel">
-      <img id="logo" src="@/assets/logo.png" alt="JPlag">
-      <TextInformation label="Directory path: " :value="json.submission_folder_path" :has-additional-info="false"/>
-      <TextInformation label="Base code path: " :value="json.base_code_folder_path" :has-additional-info="false"/>
-      <TextInformation label="Language: " :value="json.language" :has-additional-info="true" additional-info-label="see extensions"/>
-      <TextInformation label="Submissions: " :value="json.submission_ids.length" :has-additional-info="true" additional-info-label="see ids"/>
-      <TextInformation label="Failed to parse: " value="No info yet" :has-additional-info="true" additional-info-label="see ids"/>
-      <TextInformation label="Date of execution: " :value="json.date_of_execution" :has-additional-info="false"/>
-      <TextInformation label="Duration (in ms): " :value="json.execution_time" :has-additional-info="false"/>
+      <h1>JPlag Report</h1>
+      <p class="section-title">Main Info:</p>
+      <div id="basicInfo">
+      <TextInformation label="Directory path" :value="json.submission_folder_path" :has-additional-info="false"/>
+      <TextInformation label="Language" :value="json.language" :has-additional-info="true" :additional-info="json.file_extensions" additional-info-title="File extensions:"/>
+        <TextInformation :has-additional-info="false" :value="json.match_sensitivity" label="Match Sensitivity"/>
+      <TextInformation label="Submissions" :value="json.submission_ids.length" :has-additional-info="true" :additional-info="json.submission_ids" additional-info-title="Submission IDs:"/>
+      <TextInformation label="Date of execution" :value="json.date_of_execution" :has-additional-info="false"/>
+      <TextInformation label="Duration (in ms)" :value="json.execution_time" :has-additional-info="false"/>
+      </div>
+      <div id="logo-section">
+        <img id="logo" src="@/assets/logo-nobg.png" alt="JPlag">
+      </div>
     </div>
     <div id="rightPanel">
       <div class="right-panel-section">
         <div id="metrics">
-          <p class="section-title">Select Metric:</p>
+          <p class="section-title">Metric:</p>
           <div id="metrics-list">
             <MetricButton v-for="(metric, i) in json.metrics" :key="metric.name"
                           :id="metric.name"
@@ -96,6 +101,10 @@ export default defineComponent({
 </script>
 
 <style scoped>
+h1 {
+  text-align: left;
+  margin-top: 2%;
+}
 .container {
   display: flex;
   align-items: stretch;
@@ -140,11 +149,22 @@ export default defineComponent({
 
 #leftPanel {
   width: 30%;
-  background: #FF5353;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   padding: 1%;
+  background: var(--background-color);
+}
+
+#basicInfo {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 3%;
+  margin-top: 1%;
+  background: var(--primary-color);
+  border-radius: 10px;
+  box-shadow: var(--shadow-color) 2px 3px 3px;
 }
 
 #rightPanel {
@@ -157,14 +177,14 @@ export default defineComponent({
 
 #metrics {
   display: flex;
-  flex-direction: column;
-  margin-bottom: 3%;
+  justify-content: start;
+  margin-bottom: 1%;
 }
 
 #metrics-list {
   display: flex;
+  margin-left: 2%;
 }
-
 #diagram {
   display: flex;
   flex-direction: column;
@@ -176,10 +196,19 @@ export default defineComponent({
   padding-right: 1%;
 }
 
+#title {
+  display: flex;
+  justify-content: start;
+
+}
+
+#logo-section {
+  justify-content: center;
+  padding: 5%;
+}
+
 #logo {
-  width: 40%;
-  height: 20%;
-  margin-bottom: 5%;
+  flex-shrink: 2;
 }