Merge pull request #1339 from jplag/report-viewer/improve-overview

improve information on overview
jplag · Nov 10, 2023 · f0e2e49 · f0e2e49
2 parents e506e14 + dfca874
commit f0e2e49
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 37 deletions.
diff --git a/report-viewer/src/components/TextInformation.vue b/report-viewer/src/components/TextInformation.vue
@@ -3,30 +3,25 @@
 -->
 <template>
   <div class="flex-auto">
-    {{ anonymousLabel ? 'Hidden' : label }}:
-    <i v-if="!anonymousSlot"><slot></slot></i>
-    <i v-else>Hidden</i>
+    <ToolTipComponent direction="bottom">
+      <template #default>
+        {{ label }}:
+        <i><slot name="default"></slot></i>
+      </template>
+      <template #tooltip v-if="$slots.tooltip">
+        <slot name="tooltip"></slot>
+      </template>
+    </ToolTipComponent>
   </div>
 </template>
 
 <script setup lang="ts">
+import ToolTipComponent from './ToolTipComponent.vue'
+
 defineProps({
   label: {
     type: String,
     required: true
-  },
-  /**
-   * Indicates whether the value should be hidden.
-   */
-  anonymousSlot: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  anonymousLabel: {
-    type: Boolean,
-    required: false,
-    default: false
   }
 })
 </script>
diff --git a/report-viewer/src/components/ToolTipComponent.vue b/report-viewer/src/components/ToolTipComponent.vue
@@ -6,7 +6,9 @@
       :style="tooltipPosition"
     >
       <slot name="tooltip"></slot>
-      <div class="absolute border-4 border-solid" :style="arrowStyle"><!-- Arrow --></div>
+      <div class="absolute border-4 border-solid" :style="arrowStyle" v-if="$slots.tooltip">
+        <!-- Arrow -->
+      </div>
     </div>
   </div>
 </template>

diff --git a/report-viewer/src/model/Overview.ts b/report-viewer/src/model/Overview.ts
@@ -119,4 +119,12 @@ export class Overview {
   get totalComparisons() {
     return this._totalComparisons
   }
+
+  get shownComparisons() {
+    return this.topComparisons.length
+  }
+
+  get missingComparisons() {
+    return this.totalComparisons - this.shownComparisons
+  }
 }
diff --git a/report-viewer/src/views/InformationView.vue b/report-viewer/src/views/InformationView.vue
@@ -4,17 +4,17 @@
       <h2>Run Options:</h2>
 
       <ScrollableComponent class="flex-grow px-4 pt-2">
-        <TextInformation label="Submission Folder" class="pb-1">{{
+        <TextInformation label="Submission Directory" class="pb-1">{{
           overview.submissionFolderPath.join(', ')
         }}</TextInformation>
-        <TextInformation label="Basecode Folder" class="pb-1">{{
+        <TextInformation label="Basecode Directory" class="pb-1">{{
           overview.baseCodeFolderPath
         }}</TextInformation>
         <TextInformation label="Language" class="pb-1">{{ overview.language }}</TextInformation>
         <TextInformation label="File Extentions" class="pb-1">{{
           overview.fileExtensions.join(', ')
         }}</TextInformation>
-        <TextInformation label="Minimum Token Match:" class="pb-1">{{
+        <TextInformation label="Min Token Match" class="pb-1">{{
           overview.matchSensitivity
         }}</TextInformation>
       </ScrollableComponent>
@@ -30,17 +30,17 @@
         <TextInformation label="Execution Duration" class="pb-1"
           >{{ overview.durationOfExecution }} ms</TextInformation
         >
-        <TextInformation label="Submission Count" class="pb-1">{{
+        <TextInformation label="Total Submissions" class="pb-1">{{
           store().getSubmissionIds.length
         }}</TextInformation>
         <TextInformation label="Total Comparisons" class="pb-1">{{
-          totalComparisons
+          overview.totalComparisons
         }}</TextInformation>
         <TextInformation label="Shown Comparisons" class="pb-1">{{
-          shownComparisons
+          overview.shownComparisons
         }}</TextInformation>
         <TextInformation label="Missing Comparisons" class="pb-1">{{
-          missingComparisons
+          overview.missingComparisons
         }}</TextInformation>
       </ScrollableComponent>
     </Container>
@@ -53,16 +53,12 @@ import TextInformation from '@/components/TextInformation.vue'
 import ScrollableComponent from '@/components/ScrollableComponent.vue'
 import { store } from '@/stores/store'
 import { Overview } from '@/model/Overview'
-import { computed, type PropType } from 'vue'
+import { type PropType } from 'vue'
 
-const props = defineProps({
+defineProps({
   overview: {
     type: Object as PropType<Overview>,
     required: true
   }
 })
-
-const totalComparisons = computed(() => props.overview.totalComparisons)
-const shownComparisons = computed(() => props.overview.topComparisons.length)
-const missingComparisons = computed(() => totalComparisons.value - shownComparisons.value)
 </script>
diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue
@@ -7,16 +7,50 @@
       <Container class="flex-grow">
         <h2>JPlag Report</h2>
         <div class="flex flex-row items-center space-x-5">
-          <TextInformation label="Directory">{{ submissionPathValue }}</TextInformation>
+          <TextInformation label="Submission Directory">{{ submissionPathValue }}</TextInformation>
           <TextInformation label="Total Submissions">{{
             store().getSubmissionIds.length
           }}</TextInformation>
-          <TextInformation label="Total Comparisons">{{
-            overview.totalComparisons
-          }}</TextInformation>
-          <TextInformation label="Min Match Length">{{
-            overview.matchSensitivity
-          }}</TextInformation>
+
+          <TextInformation label="Shown/Total Comparisons">
+            <template #default
+              >{{ overview.shownComparisons }} / {{ overview.totalComparisons }}</template
+            >
+            <template #tooltip>
+              <div class="whitespace-pre text-sm">
+                <TextInformation label="Shown Comparisons">{{
+                  overview.shownComparisons
+                }}</TextInformation>
+                <TextInformation label="Total Comparisons">{{
+                  overview.totalComparisons
+                }}</TextInformation>
+                <div v-if="overview.missingComparisons > 0">
+                  <TextInformation label="Missing Comparisons">{{
+                    overview.missingComparisons
+                  }}</TextInformation>
+                  <p>
+                    To include more comparisons in the report modify the number of shown comparisons
+                    in the CLI.
+                  </p>
+                </div>
+              </div>
+            </template>
+          </TextInformation>
+
+          <TextInformation label="Min Token Match">
+            <template #default>
+              {{ overview.matchSensitivity }}
+            </template>
+            <template #tooltip>
+              <div class="whitespace-pre text-sm">
+                <p>
+                  Tunes the comparison sensitivity by adjusting the minimum token required to be
+                  counted as a matching section.
+                </p>
+                <p>It can be adjusted in the CLI.</p>
+              </div>
+            </template>
+          </TextInformation>
 
           <ToolTipComponent direction="left">
             <template #default>