Add v-if to Cluster Dialogues

report-viewer/src/components/ClusterRadarChart.vue

@@ -46,6 +46,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    let hasNoMember = false;
     const getIdOfFirstSubmission = () => {
       const firstMember = props.cluster.members.keys().next().value;
       hasNoMember = !firstMember;
@@ -83,7 +84,6 @@ export default defineComponent({
     });
 
     const options = ref(radarChartOptions);
-    let hasNoMember = false;
     watch(
       () => selectedMember.value,
       (val) => {

report-viewer/src/components/ComparisonsTable.vue

@@ -87,7 +87,15 @@
           @click="toggleDialog(index)"
         />
       </td>
-      <GDialog v-model="dialog[index]">
+      <GDialog
+        v-if="
+          isInCluster(
+            comparison.firstSubmissionId,
+            comparison.secondSubmissionId
+          )
+        "
+        v-model="dialog[index]"
+      >
         <ClustersList
           :clusters="
             getClustersFor(
@@ -128,10 +136,10 @@ export default defineComponent({
   setup(props) {
     const store = useStore();
     let formattedMatchPercentage = (num: number) => num.toFixed(2);
-    const dialog :Ref<Array<boolean>> = ref([]);
+    const dialog: Ref<Array<boolean>> = ref([]);
     props.topComparisons.forEach(() => dialog.value.push(false));
 
-    const toggleDialog = (index:number) => {
+    const toggleDialog = (index: number) => {
       dialog.value[index] = true;
     };
 
@@ -154,8 +162,11 @@ export default defineComponent({
       return store.state.anonymous.has(id);
     };
 
-    const getParticipatingMatchesForId = (id: string, others : Array<string>) => {
-      let matches : Array<{matchedWith: string, percentage: number,}>= [];
+    const getParticipatingMatchesForId = (
+      id: string,
+      others: Array<string>
+    ) => {
+      let matches: Array<{ matchedWith: string; percentage: number }> = [];
       props.topComparisons.forEach((comparison) => {
         if (
           comparison.firstSubmissionId.includes(id) &&
@@ -178,25 +189,33 @@ export default defineComponent({
       return matches;
     };
 
-    const clustersWithParticipatingMatches: Array<ClusterListElement> = props.clusters.map((cluster) => {
-      let membersArray = new Map<string,Array<{matchedWith: string, percentage: number,}>>();
-      cluster.members.forEach((member: string) => {
-        let others = cluster.members.filter((m) => !m.includes(member));
-        membersArray.set(member ,getParticipatingMatchesForId(member, others));
-      });
+    const clustersWithParticipatingMatches: Array<ClusterListElement> =
+      props.clusters.map((cluster) => {
+        let membersArray = new Map<
+          string,
+          Array<{ matchedWith: string; percentage: number }>
+        >();
+        cluster.members.forEach((member: string) => {
+          let others = cluster.members.filter((m) => !m.includes(member));
+          membersArray.set(
+            member,
+            getParticipatingMatchesForId(member, others)
+          );
+        });
 
-      return {
-        averageSimilarity: cluster.averageSimilarity,
-        strength: cluster.strength,
-        members: membersArray,
-      };
-    });
+        return {
+          averageSimilarity: cluster.averageSimilarity,
+          strength: cluster.strength,
+          members: membersArray,
+        };
+      });
 
-    const getClustersFor = (id1: string, id2: string) : Array<ClusterListElement> => {
+    const getClustersFor = (
+      id1: string,
+      id2: string
+    ): Array<ClusterListElement> => {
       return clustersWithParticipatingMatches.filter(
-        (c) =>
-          c.members.has(id1) &&
-          c.members.has(id2)
+        (c) => c.members.has(id1) && c.members.has(id2)
       );
     };
 

report-viewer/src/model/factories/OverviewFactory.ts

@@ -34,7 +34,7 @@ export class OverviewFactory {
         metricThreshold: metric.threshold as number,
         distribution: metric.distribution as Array<number>,
         comparisons: comparisons,
-        description: metric.description as string
+        description: metric.description as string,
       });
     });
 

report-viewer/src/views/OverviewView.vue

@@ -4,7 +4,7 @@
 <template>
   <div class="container">
     <div class="column-container" style="width: 30%">
-      <h1>JPlag Report</h1>
+        <h1>JPlag Report</h1>
       <p class="section-title">Main Info:</p>
       <div id="basicInfo">
         <TextInformation
@@ -56,19 +56,19 @@
     </div>
 
     <div class="column-container" style="width: 35%">
-      <div id="metrics">
+        <div id="metrics">
         <p class="section-title">Metric:</p>
-        <div id="metrics-list">
-          <MetricButton
-            v-for="(metric, index) in overview.metrics"
-            :id="metric.metricName"
-            :key="metric.metricName"
-            :is-selected="selectedMetric[index]"
-            :metric="metric"
-            @click="selectMetric(index)"
-          />
+          <div id="metrics-list">
+            <MetricButton
+              v-for="(metric, index) in overview.metrics"
+              :id="metric.metricName"
+              :key="metric.metricName"
+              :is-selected="selectedMetric[index]"
+              :metric="metric"
+              @click="selectMetric(index)"
+            />
+          </div>
         </div>
-      </div>
       <p class="section-title">Distribution:</p>
       <DistributionDiagram
         :distribution="distributions[selectedMetricIndex]"
@@ -78,13 +78,13 @@
     <div class="column-container" style="width: 35%">
       <p class="section-title">Top Comparisons:</p>
       <div id="comparisonsList">
-        <ComparisonsTable
-          :clusters="overview.clusters"
-          :top-comparisons="topComps[selectedMetricIndex]"
-        />
-      </div>
+      <ComparisonsTable
+        :clusters="overview.clusters"
+        :top-comparisons="topComps[selectedMetricIndex]"
+      />
     </div>
   </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -182,12 +182,10 @@ export default defineComponent({
      * @type {Ref<UnwrapRef<number>>}
      */
     let selectedMetricIndex = ref(0);
-    selectedMetric.value[0] = true;
+    selectedMetric.value[selectedMetricIndex.value] = true;
 
     const selectMetric = (metric: number) => {
-      selectedMetric.value = selectedMetric.value.map(() => {
-        return false;
-      });
+      selectedMetric.value = selectedMetric.value.map(() => false);
       selectedMetric.value[metric] = true;
       selectedMetricIndex.value = metric;
     };