Hide radar chart when not enough members

report-viewer/src/components/ClusterRadarChart.vue

@@ -3,18 +3,45 @@
   participants in the cluster.
 -->
 <template>
-  <div class="flex max-h-full flex-col">
-    <div v-if="!hasNoMember" class="flex max-h-full flex-grow flex-col overflow-hidden">
+  <div class="flex max-h-full flex-col overflow-hidden">
+    <div
+      v-if="selectedOptions.length > 0"
+      class="flex max-h-full flex-grow flex-col overflow-hidden"
+    >
       <DropDownSelector
         :options="selectedOptions"
         @selectionChanged="(value) => (idOfShownSubmission = value)"
       />
       <div class="flex min-h-0 flex-grow justify-center">
         <Radar :data="chartData" :options="options" />
       </div>
+      <div class="text-xs font-bold text-gray-500 dark:text-gray-400">
+        <p>
+          This Chart shows the average similarity of the selected submission to the other
+          submissions in the cluster. <br />
+          The submission is selectable in the dropdown above.
+        </p>
+        <p
+          v-if="
+            selectedOptions.length < memberCount ||
+            (cluster.members.get(idOfShownSubmission)?.length ?? 0) < memberCount - 1
+          "
+          class="mt-2"
+        >
+          Not all members may be selectable in the dropdown above. <br />
+          There may not be a data point for every submission in the cluster for the selected one.
+          <br />
+          This is because not all comparisons are included in the report. To include more
+          comparisons modify the number of shown comparisons in the CLI.
+        </p>
+      </div>
     </div>
-    <div v-else>
-      <span>This cluster has no members.</span>
+    <div v-else class="text-xs font-bold text-gray-500 dark:text-gray-400">
+      <p>
+        This cluster does not have enough members with enough comparisons to provide a
+        visualization. <br />
+        To include more comparisons modify the number of shown comparisons in the CLI.
+      </p>
     </div>
   </div>
 </template>
@@ -23,7 +50,6 @@
 import type { PropType, Ref } from 'vue'
 import type { ChartData } from 'chart.js'
 import type { ClusterListElement } from '@/model/ClusterListElement'
-
 import { computed, ref } from 'vue'
 import { Radar } from 'vue-chartjs'
 import { Chart, registerables } from 'chart.js'
@@ -41,12 +67,20 @@ const props = defineProps({
   }
 })
 
-let hasNoMember = props.cluster.members.size == 0
-
-const selectedOptions = computed(() => Array.from(props.cluster.members.keys()))
+const selectedOptions = computed(() => {
+  let options: string[] = []
+  props.cluster.members.forEach((matchedWith, key) => {
+    if (matchedWith.length >= 3) {
+      options.push(key)
+    }
+  })
+  return options
+})
 
 const idOfShownSubmission = ref(selectedOptions.value.length > 0 ? selectedOptions.value[0] : '')
 
+const memberCount = computed(() => props.cluster.members.size)
+
 /**
  * @param member The member to create the labels for.
  * @returns The labels for the member.
@@ -77,9 +111,6 @@ const radarChartStyle = {
 }
 const radarChartOptions = computed(() => {
   return {
-    legend: {
-      display: false
-    },
     scales: {
       r: {
         suggestedMin: 50,

report-viewer/src/views/ClusterView.vue

@@ -20,6 +20,7 @@
           "
           title="Cluster Visualization:"
           class="mb-3"
+          v-if="canShowRadarChart"
         />
         <ClusterRadarChart
           v-if="selectedClusterVisualization == 'Radar'"
@@ -139,6 +140,12 @@ const clusterListElement: Ref<ClusterListElement> = computed(() => {
   }
 })
 
+const canShowRadarChart = computed(
+  () =>
+    props.cluster.members.length >= 3 &&
+    props.cluster.members.some((member) => (clusterMemberList.get(member)?.length ?? 0) >= 3)
+)
+
 /** The amount of comparisons if every single one was included */
 const maxAmountOfComparisonsInCluster = computed(() => {
   return props.cluster.members.length ** 2 / 2 - props.cluster.members.length