New Cluster Visualization

report-viewer/package.json

@@ -22,6 +22,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "chart.js": "^4.4.0",
+    "chartjs-chart-graph": "^4.2.5",
     "chartjs-plugin-datalabels": "^2.2.0",
     "highlight.js": "^11.8.0",
     "jszip": "^3.10.0",

report-viewer/src/components/ClusterGraph.vue

@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <canvas ref="graphCanvas"></canvas>
+    <div v-show="!loaded">Could not display graph</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ClusterListElement } from '@/model/ClusterListElement'
+import { Chart, registerables } from 'chart.js'
+import { ref, type PropType, type Ref, onMounted, computed, watch } from 'vue'
+import ChartDataLabels from 'chartjs-plugin-datalabels'
+import { EdgeLine, GraphController, GraphChart } from 'chartjs-chart-graph'
+import { store } from '@/stores/store'
+import { graphColors } from '@/utils/ColorUtils'
+
+const props = defineProps({
+  cluster: {
+    type: Object as PropType<ClusterListElement>,
+    required: true
+  }
+})
+
+const graphCanvas: Ref<HTMLCanvasElement | null> = ref(null)
+const loaded = ref(false)
+
+Chart.register(...registerables)
+Chart.register(ChartDataLabels)
+Chart.register(EdgeLine)
+Chart.register(GraphController)
+Chart.register(GraphChart)
+
+const keys = computed(() => Array.from(props.cluster.members.keys()))
+const labels = computed(() =>
+  Array.from(keys.value).map((m) => store().submissionDisplayName(m) ?? m)
+)
+const edges = computed(() => {
+  const edges: { source: number; target: number }[] = []
+  props.cluster.members.forEach((member, key) => {
+    member.forEach((match) => {
+      const firstIndex = keys.value.indexOf(key)
+      const secondIndex = keys.value.indexOf(match.matchedWith)
+      if (firstIndex < secondIndex) {
+        edges.push({ source: firstIndex, target: secondIndex })
+      }
+    })
+  })
+  return edges
+})
+
+function getSimilarityFromKeyIndex(firstIndex: number, secondIndex: number) {
+  const firstSubmission = props.cluster.members.get(keys.value[firstIndex])
+  if (!firstSubmission) {
+    return 0
+  }
+  const match = firstSubmission.find((m) => m.matchedWith == keys.value[secondIndex])
+  if (!match) {
+    return 0
+  }
+  return match.similarity
+}
+
+const graphData = computed(() => {
+  return {
+    labels: labels.value,
+    datasets: [
+      {
+        pointRadius: 10,
+        pointHoverRadius: 10,
+        pointBackgroundColor: graphColors.contentFill,
+        pointHoverBackgroundColor: graphColors.contentFill,
+        pointBorderColor: graphColors.ticksAndFont.value,
+        pointHoverBorderColor: graphColors.ticksAndFont.value,
+        data: Array.from(keys.value).map((_, index) => ({
+          x: Math.cos((2 * Math.PI * index) / keys.value.length) + 1,
+          y: Math.sin((2 * Math.PI * index) / keys.value.length) + 1
+        })),
+        edges: edges.value,
+        edgeLineBorderColor: (ctx: any) =>
+          graphColors.contentFillAlpha(getSimilarityFromKeyIndex(ctx.raw.source, ctx.raw.target)),
+        edgeLineBorderWidth: (ctx: any) =>
+          5 * getSimilarityFromKeyIndex(ctx.raw.source, ctx.raw.target) + 1
+      }
+    ]
+  }
+})
+
+const yPadding = 40
+const xPadding = computed(() => {
+  const avgCharacterLength = 8
+
+  const widths = labels.value.map((label) => label.length * avgCharacterLength)
+  const maxWidth = Math.max(...widths)
+  // Makes sure there is always space to display a name but the padding does not get too big
+  return Math.max(Math.min(200, maxWidth), 40)
+})
+
+const graphOptions = computed(() => {
+  return {
+    layout: {
+      padding: {
+        top: yPadding,
+        bottom: yPadding,
+        left: xPadding.value,
+        right: xPadding.value
+      }
+    },
+    animation: false as false,
+    plugins: {
+      legend: { display: false },
+      datalabels: {
+        display: true,
+        font: {
+          weight: 'bold' as 'bold',
+          size: 12
+        },
+        formatter: (value: any, ctx: any) => {
+          return labels.value[ctx.dataIndex]
+        },
+        align: (ctx: any) => (-360 * ctx.dataIndex) / keys.value.length,
+        offset: 8,
+        color: graphColors.ticksAndFont.value
+      },
+      tooltip: {
+        enabled: true,
+        displayColors: false,
+        callbacks: {
+          title: () => {
+            return ''
+          }
+        }
+      }
+    }
+  }
+})
+
+const chart: Ref<Chart | null> = ref(null)
+
+function drawGraph() {
+  if (chart.value != null) {
+    chart.value.destroy()
+  }
+  if (graphCanvas.value == null) {
+    loaded.value = false
+    return
+  }
+  const ctx = graphCanvas.value.getContext('2d')
+  if (ctx == null) {
+    loaded.value = false
+    return
+  }
+  chart.value = new Chart(ctx, {
+    type: 'graph',
+    data: graphData.value,
+    options: graphOptions.value
+  })
+  loaded.value = true
+}
+
+onMounted(() => {
+  drawGraph()
+})
+
+watch(
+  computed(() => {
+    return {
+      d: graphData.value,
+      o: graphOptions.value
+    }
+  }),
+  () => {
+    drawGraph()
+  }
+)
+</script>

report-viewer/src/utils/ColorUtils.ts

@@ -59,16 +59,24 @@ function generateColorsForInterval(
   return colors
 }
 
+const graphRGB = {
+  red: 190,
+  green: 22,
+  blue: 34
+}
 const graphColors = {
   ticksAndFont: computed(() => {
     return store().uiState.useDarkMode ? '#ffffff' : '#000000'
   }),
   gridLines: computed(() => {
     return store().uiState.useDarkMode ? 'rgba(256, 256, 256, 0.2)' : 'rgba(0, 0, 0, 0.2)'
   }),
-  contentFill: 'rgba(190, 22, 34, 0.5)',
+  contentFill: `rgba(${graphRGB.red}, ${graphRGB.green}, ${graphRGB.blue}, 0.5)`,
   contentBorder: 'rgb(127, 15, 24)',
-  pointFill: 'rgba(190, 22, 34, 1)'
+  pointFill: `rgba(${graphRGB.red}, ${graphRGB.green}, ${graphRGB.blue}, 1)`,
+  contentFillAlpha(alpha: number) {
+    return `rgba(${graphRGB.red}, ${graphRGB.green}, ${graphRGB.blue}, ${alpha})`
+  }
 }
 
 export { generateColors, graphColors }

report-viewer/src/views/ClusterView.vue

@@ -13,7 +13,24 @@
 
     <div class="relative bottom-0 left-0 right-0 flex flex-grow justify-between space-x-5 p-5 pt-5">
       <Container class="flex max-h-0 min-h-full flex-1 flex-col overflow-hidden">
-        <ClusterRadarChart :cluster="clusterListElement" class="flex-grow" />
+        <OptionsSelectorComponent
+          :labels="clusterVisualizationOptions"
+          @selectionChanged="
+            (index) => (selectedClusterVisualization = index == 0 ? 'Graph' : 'Radar')
+          "
+          title="Cluster Visualization:"
+          class="mb-3"
+        />
+        <ClusterRadarChart
+          v-if="selectedClusterVisualization == 'Radar'"
+          :cluster="clusterListElement"
+          class="flex-grow"
+        />
+        <ClusterGraph
+          v-if="selectedClusterVisualization == 'Graph'"
+          :cluster="clusterListElement"
+          class="flex-grow"
+        />
       </Container>
       <Container class="flex max-h-0 min-h-full w-1/3 flex-col space-y-2">
         <h2>Comparisons of Cluster Members:</h2>
@@ -25,6 +42,7 @@
 
 <script setup lang="ts">
 import ClusterRadarChart from '@/components/ClusterRadarChart.vue'
+import ClusterGraph from '@/components/ClusterGraph.vue'
 import ComparisonsTable from '@/components/ComparisonsTable.vue'
 import Container from '@/components/ContainerComponent.vue'
 import TextInformation from '@/components/TextInformation.vue'
@@ -33,7 +51,8 @@ import type { ClusterListElement, ClusterListElementMember } from '@/model/Clust
 import type { ComparisonListElement } from '@/model/ComparisonListElement'
 import { MetricType } from '@/model/MetricType'
 import type { Overview } from '@/model/Overview'
-import { computed, type PropType, type Ref } from 'vue'
+import { computed, ref, type PropType, type Ref } from 'vue'
+import OptionsSelectorComponent from '@/components/optionsSelectors/OptionsSelectorComponent.vue'
 
 const props = defineProps({
   overview: {
@@ -48,6 +67,18 @@ const props = defineProps({
 
 const comparisons = [] as Array<ComparisonListElement>
 const clusterMemberList = new Map() as ClusterListElementMember
+const selectedClusterVisualization: Ref<'Graph' | 'Radar'> = ref('Graph')
+const clusterVisualizationOptions = [
+  {
+    displayValue: 'Graph',
+    tooltip: 'A graph having the average similarity between two submissions as the edges.'
+  },
+  {
+    displayValue: 'Radar',
+    tooltip:
+      'A radar chart showing the he other submissions in the cluster, relative one submission.'
+  }
+]
 const usedMetric = MetricType.AVERAGE
 
 function getComparisonFor(id1: string, id2: string) {