add selection for secondary metric in table

jplag · Nov 8, 2024 · 7820ef4 · 7820ef4
1 parent 3648b76
commit 7820ef4
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/report-viewer/src/components/ComparisonTableFilter.vue b/report-viewer/src/components/ComparisonTableFilter.vue
@@ -35,6 +35,14 @@
       :labels="tableSortingOptions"
       @selection-changed="(index: number) => changeSortingMetric(index)"
     />
+    <MetricSelector
+      title="Secondary Metric:"
+      :defaultSelected="store().uiState.comparisonTableSecondaryMetric"
+      @selection-changed="
+        (metric: MetricJsonIdentifier) => (store().uiState.comparisonTableSecondaryMetric = metric)
+      "
+      :metrics="secondaryMetricOptions"
+    />
   </div>
 </template>
 
@@ -47,6 +55,7 @@ import OptionsSelector from './optionsSelectors/OptionsSelectorComponent.vue'
 import { store } from '@/stores/store'
 import { MetricJsonIdentifier, MetricTypes } from '@/model/MetricType'
 import type { ToolTipLabel } from '@/model/ui/ToolTip'
+import MetricSelector from './optionsSelectors/MetricSelector.vue'
 
 const props = defineProps({
   searchString: {
@@ -122,6 +131,15 @@ const tableSortingOptions = computed(() => {
   return options
 })
 
+const secondaryMetricOptions = [
+  MetricJsonIdentifier.MAXIMUM_SIMILARITY,
+  MetricJsonIdentifier.MINIMUM_SIMILARITY,
+  MetricJsonIdentifier.SYMMETRIC,
+  MetricJsonIdentifier.INTERSECTION,
+  MetricJsonIdentifier.LONGEST_MATCH,
+  MetricJsonIdentifier.OVERALL
+]
+
 /**
  * Sets the anonymous set to empty if it is full or adds all submission ids to it if it is not full
  */

diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
@@ -34,12 +34,17 @@
               <ToolTipComponent class="flex-1" :direction="displayClusters ? 'top' : 'left'">
                 <template #default>
                   <p class="w-full text-center">
-                    {{ MetricTypes.MAXIMUM_SIMILARITY.shortName }}
+                    {{
+                      MetricTypes.METRIC_MAP[store().uiState.comparisonTableSecondaryMetric]
+                        .shortName
+                    }}
                   </p>
                 </template>
                 <template #tooltip>
                   <p class="whitespace-pre text-sm">
-                    {{ MetricTypes.MAXIMUM_SIMILARITY.tooltip }}
+                    {{
+                      MetricTypes.METRIC_MAP[store().uiState.comparisonTableSecondaryMetric].tooltip
+                    }}
                   </p>
                 </template>
               </ToolTipComponent>
@@ -104,15 +109,15 @@
                     <div class="w-1/2">
                       {{
                         MetricTypes.AVERAGE_SIMILARITY.format(
-                          item.similarities[MetricTypes.AVERAGE_SIMILARITY.shortName]
+                          item.similarities[MetricTypes.AVERAGE_SIMILARITY.identifier]
                         )
                       }}
                     </div>
                     <div class="w-1/2">
                       {{
-                        MetricTypes.MAXIMUM_SIMILARITY.format(
-                          item.similarities[MetricTypes.MAXIMUM_SIMILARITY.shortName]
-                        )
+                        MetricTypes.METRIC_MAP[
+                          store().uiState.comparisonTableSecondaryMetric
+                        ].format(item.similarities[store().uiState.comparisonTableSecondaryMetric])
                       }}
                     </div>
                   </div>

diff --git a/report-viewer/src/stores/state.ts b/report-viewer/src/stores/state.ts
@@ -40,6 +40,7 @@ export interface State {
 export interface UIState {
   useDarkMode: boolean
   comparisonTableSortingMetric: MetricJsonIdentifier
+  comparisonTableSecondaryMetric: MetricJsonIdentifier
   comparisonTableClusterSorting: boolean
   distributionChartConfig: DistributionChartConfig
   fileSorting: FileSortingOptions

diff --git a/report-viewer/src/stores/store.ts b/report-viewer/src/stores/store.ts
@@ -24,6 +24,7 @@ const store = defineStore('store', {
     uiState: {
       useDarkMode: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
       comparisonTableSortingMetric: MetricJsonIdentifier.AVERAGE_SIMILARITY,
+      comparisonTableSecondaryMetric: MetricJsonIdentifier.MAXIMUM_SIMILARITY,
       comparisonTableClusterSorting: false,
       distributionChartConfig: {
         metric: MetricJsonIdentifier.AVERAGE_SIMILARITY,