update report viewer to new metric system

report-viewer/src/components/ComparisonTableFilter.vue

@@ -45,7 +45,7 @@ import ToolTipComponent from './ToolTipComponent.vue'
 import ButtonComponent from './ButtonComponent.vue'
 import OptionsSelector from './optionsSelectors/OptionsSelectorComponent.vue'
 import { store } from '@/stores/store'
-import { MetricType, metricToolTips } from '@/model/MetricType'
+import { MetricJsonIdentifier, MetricTypes } from '@/model/MetricType'
 import type { ToolTipLabel } from '@/model/ui/ToolTip'
 
 const props = defineProps({
@@ -93,23 +93,27 @@ const searchStringValue = computed({
 
 function changeSortingMetric(index: number) {
   store().uiState.comparisonTableSortingMetric =
-    index < tableSortingMetricOptions.length ? tableSortingMetricOptions[index] : MetricType.AVERAGE
+    index < tableSortingMetricOptions.length
+      ? tableSortingMetricOptions[index].identifier
+      : MetricJsonIdentifier.AVERAGE_SIMILARITY
   store().uiState.comparisonTableClusterSorting = tableSortingOptions.value[index] == 'Cluster'
 }
 
 function getSortingMetric() {
   if (store().uiState.comparisonTableClusterSorting && props.enableClusterSorting) {
     return tableSortingOptions.value.indexOf('Cluster')
   }
-  return tableSortingMetricOptions.indexOf(store().uiState.comparisonTableSortingMetric)
+  return tableSortingMetricOptions.findIndex(
+    (m) => m.identifier == store().uiState.comparisonTableSortingMetric
+  )
 }
 
-const tableSortingMetricOptions = [MetricType.AVERAGE, MetricType.MAXIMUM]
+const tableSortingMetricOptions = MetricTypes.METRIC_LIST
 const tableSortingOptions = computed(() => {
   const options: (ToolTipLabel | string)[] = tableSortingMetricOptions.map((metric) => {
     return {
-      displayValue: metricToolTips[metric].longName,
-      tooltip: metricToolTips[metric].tooltip
+      displayValue: metric.longName,
+      tooltip: metric.tooltip
     }
   })
   if (props.enableClusterSorting) {

report-viewer/src/components/ComparisonsTable.vue

@@ -21,25 +21,25 @@
               <ToolTipComponent class="flex-1" :direction="displayClusters ? 'top' : 'left'">
                 <template #default>
                   <p class="w-full text-center">
-                    {{ metricToolTips[MetricType.AVERAGE].shortName }}
+                    {{ MetricTypes.AVERAGE_SIMILARITY.shortName }}
                   </p>
                 </template>
                 <template #tooltip>
                   <p class="whitespace-pre text-sm">
-                    {{ metricToolTips[MetricType.AVERAGE].tooltip }}
+                    {{ MetricTypes.AVERAGE_SIMILARITY.tooltip }}
                   </p>
                 </template>
               </ToolTipComponent>
 
               <ToolTipComponent class="flex-1" :direction="displayClusters ? 'top' : 'left'">
                 <template #default>
                   <p class="w-full text-center">
-                    {{ metricToolTips[MetricType.MAXIMUM].shortName }}
+                    {{ MetricTypes.MAXIMUM_SIMILARITY.shortName }}
                   </p>
                 </template>
                 <template #tooltip>
                   <p class="whitespace-pre text-sm">
-                    {{ metricToolTips[MetricType.MAXIMUM].tooltip }}
+                    {{ MetricTypes.MAXIMUM_SIMILARITY.tooltip }}
                   </p>
                 </template>
               </ToolTipComponent>
@@ -102,10 +102,18 @@
                   <!-- Similarities -->
                   <div class="tableCellSimilarity">
                     <div class="w-1/2">
-                      {{ (item.similarities[MetricType.AVERAGE] * 100).toFixed(2) }}%
+                      {{
+                        MetricTypes.AVERAGE_SIMILARITY.format(
+                          item.similarities[MetricTypes.AVERAGE_SIMILARITY.shortName]
+                        )
+                      }}
                     </div>
                     <div class="w-1/2">
-                      {{ (item.similarities[MetricType.MAXIMUM] * 100).toFixed(2) }}%
+                      {{
+                        MetricTypes.MAXIMUM_SIMILARITY.format(
+                          item.similarities[MetricTypes.MAXIMUM_SIMILARITY.shortName]
+                        )
+                      }}
                     </div>
                   </div>
                 </RouterLink>
@@ -175,7 +183,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { faUserGroup } from '@fortawesome/free-solid-svg-icons'
 import { generateHues } from '@/utils/ColorUtils'
 import ToolTipComponent from './ToolTipComponent.vue'
-import { MetricType, metricToolTips } from '@/model/MetricType'
+import { MetricJsonIdentifier, MetricTypes } from '@/model/MetricType'
 import NameElement from './NameElement.vue'
 import ComparisonTableFilter from './ComparisonTableFilter.vue'
 
@@ -251,28 +259,32 @@ function getFilteredComparisons(comparisons: ComparisonListElement[]) {
     }
 
     // metric search
-    const searchPerMetric: Record<MetricType, string[]> = {
-      [MetricType.AVERAGE]: [],
-      [MetricType.MAXIMUM]: []
-    }
+    const searchPerMetric: Record<MetricJsonIdentifier, string[]> = {} as Record<
+      MetricJsonIdentifier,
+      string[]
+    >
+    MetricTypes.METRIC_JSON_IDENTIFIERS.forEach((m) => {
+      searchPerMetric[m] = []
+    })
     metricSearches.forEach((s) => {
       const regexResult = /^(?:(avg|max):)([<>]=?[0-9]+%?$)/.exec(s)
       if (regexResult) {
         const metricName = regexResult[1]
-        let metric = MetricType.AVERAGE
-        for (const m of [MetricType.AVERAGE, MetricType.MAXIMUM]) {
-          if (metricToolTips[m].shortName.toLowerCase() == metricName) {
+        let metric = MetricTypes.AVERAGE_SIMILARITY
+        for (const m of MetricTypes.METRIC_LIST) {
+          if (m.shortName.toLowerCase() == metricName) {
             metric = m
             break
           }
         }
-        searchPerMetric[metric].push(regexResult[2])
+        searchPerMetric[metric.identifier].push(regexResult[2])
       } else {
-        searchPerMetric[MetricType.AVERAGE].push(s)
-        searchPerMetric[MetricType.MAXIMUM].push(s)
+        MetricTypes.METRIC_JSON_IDENTIFIERS.forEach((m) => {
+          searchPerMetric[m].push(s)
+        })
       }
     })
-    for (const metric of [MetricType.AVERAGE, MetricType.MAXIMUM]) {
+    for (const metric of MetricTypes.METRIC_JSON_IDENTIFIERS) {
       for (const search of searchPerMetric[metric]) {
         const regexResult = /([<>]=?)([0-9]+)%?/.exec(search)!
         const operator = regexResult[1]

report-viewer/src/components/distributionDiagram/DistributionDiagram.vue

@@ -18,16 +18,16 @@ import { Chart, registerables } from 'chart.js'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
 import { graphColors } from '@/utils/ColorUtils'
 import type { Distribution } from '@/model/Distribution'
-import { MetricType } from '@/model/MetricType'
 import { store } from '@/stores/store'
 import DistributionDiagramOptions from './DistributionDiagramOptions.vue'
+import type { MetricJsonIdentifier } from '@/model/MetricType'
 
 Chart.register(...registerables)
 Chart.register(ChartDataLabels)
 
 const props = defineProps({
   distributions: {
-    type: Object as PropType<Record<MetricType, Distribution>>,
+    type: Object as PropType<Record<MetricJsonIdentifier, Distribution>>,
     required: true
   },
   xScale: {

report-viewer/src/components/distributionDiagram/DistributionDiagramOptions.vue

@@ -7,7 +7,8 @@
         title="Metric:"
         :defaultSelected="store().uiState.distributionChartConfig.metric"
         @selection-changed="
-          (metric: MetricType) => (store().uiState.distributionChartConfig.metric = metric)
+          (metric: MetricJsonIdentifier) =>
+            (store().uiState.distributionChartConfig.metric = metric)
         "
       />
       <OptionsSelector
@@ -37,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { MetricType } from '@/model/MetricType'
+import { MetricJsonIdentifier } from '@/model/MetricType'
 import { store } from '@/stores/store'
 import MetricSelector from '@/components/optionsSelectors/MetricSelector.vue'
 import OptionsSelector from '@/components/optionsSelectors/OptionsSelectorComponent.vue'

report-viewer/src/components/optionsSelectors/MetricSelector.vue

@@ -10,32 +10,32 @@
 <script setup lang="ts">
 import { computed, type PropType, type Ref } from 'vue'
 import OptionsSelectorComponent from './OptionsSelectorComponent.vue'
-import { MetricType, metricToolTips } from '@/model/MetricType'
+import { MetricJsonIdentifier, MetricTypes } from '@/model/MetricType'
 
 const props = defineProps({
   metrics: {
-    type: Array<MetricType>,
+    type: Array<MetricJsonIdentifier>,
     required: false,
-    default: [MetricType.AVERAGE, MetricType.MAXIMUM]
+    default: MetricTypes.METRIC_JSON_IDENTIFIERS
   },
   title: {
     type: String,
     required: false,
     default: ''
   },
   defaultSelected: {
-    type: String as PropType<MetricType>,
+    type: String as PropType<MetricJsonIdentifier>,
     required: false,
-    default: MetricType.AVERAGE
+    default: MetricTypes.AVERAGE_SIMILARITY
   }
 })
 
 defineEmits(['selectionChanged'])
 
 const labels: Ref<{ displayValue: string; tooltip: string }[]> = computed(() =>
   props.metrics.map((metric) => ({
-    displayValue: metricToolTips[metric].longName,
-    tooltip: metricToolTips[metric].tooltip
+    displayValue: MetricTypes.METRIC_MAP[metric].longName,
+    tooltip: MetricTypes.METRIC_MAP[metric].tooltip
   }))
 )
 </script>

report-viewer/src/model/Comparison.ts

@@ -1,15 +1,14 @@
 import type { Match } from './Match'
 import type { SubmissionFile } from '@/model/File'
 import { MatchInSingleFile } from './MatchInSingleFile'
-import type { MetricType } from './MetricType'
 
 /**
  * Comparison model used by the ComparisonView
  */
 export class Comparison {
   private readonly _firstSubmissionId: string
   private readonly _secondSubmissionId: string
-  private readonly _similarities: Record<MetricType, number>
+  private readonly _similarities: Record<string, number>
   private readonly _filesOfFirstSubmission: SubmissionFile[]
   private readonly _filesOfSecondSubmission: SubmissionFile[]
   private readonly _allMatches: Array<Match>
@@ -19,7 +18,7 @@ export class Comparison {
   constructor(
     firstSubmissionId: string,
     secondSubmissionId: string,
-    similarities: Record<MetricType, number>,
+    similarities: Record<string, number>,
     filesOfFirstSubmission: SubmissionFile[],
     filesOfSecondSubmission: SubmissionFile[],
     allMatches: Array<Match>,

report-viewer/src/model/ComparisonListElement.ts

@@ -1,4 +1,4 @@
-import type { MetricType } from './MetricType'
+import type { MetricJsonIdentifier } from './MetricType'
 
 /**
  * Comparison model used by the Comparison Table in Overview. Only the needed attributes to display are included.
@@ -16,6 +16,6 @@ export type ComparisonListElement = {
   id: number
   firstSubmissionId: string
   secondSubmissionId: string
-  similarities: Record<MetricType, number>
+  similarities: Record<MetricJsonIdentifier, number>
   clusterIndex: number
 }