Store selections from overview when switching views

report-viewer/src/stores/state.ts

@@ -1,3 +1,5 @@
+import type { MetricType } from '@/model/MetricType'
+
 /**
  * Local store. Stores the state of the application.
  */
@@ -68,4 +70,14 @@ export interface LoadConfiguration {
 
 export interface UIState {
   useDarkMode: boolean
+  comparisonTableSortingMetric: MetricType
+  distributionChartConfig: DistributionChartConfig
+}
+
+/**
+ * Configuration for the distribution chart.
+ */
+export interface DistributionChartConfig {
+  metric: MetricType
+  xScale: 'linear' | 'logarithmic'
 }

report-viewer/src/stores/store.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import type { State, SubmissionFile, File, LoadConfiguration, UIState } from './state'
+import { MetricType } from '@/model/MetricType'
 
 /**
  * The store is a global state management system. It is used to store the state of the application.
@@ -20,7 +21,12 @@ const store = defineStore('store', {
       fileIdToDisplayName: new Map()
     },
     uiState: {
-      useDarkMode: false
+      useDarkMode: false,
+      comparisonTableSortingMetric: MetricType.AVERAGE,
+      distributionChartConfig: {
+        metric: MetricType.AVERAGE,
+        xScale: 'linear'
+      }
     }
   }),
   getters: {

report-viewer/src/views/OverviewView.vue

@@ -26,8 +26,8 @@
       <Container class="flex max-h-0 min-h-full flex-1 flex-col">
         <h2>Distribution of Comparisons:</h2>
         <DistributionDiagram
-          :distribution="overview.distribution[selectedDistributionDiagramMetric]"
-          :x-scale="distributionDiagramScaleX"
+          :distribution="overview.distribution[store().uiState.distributionChartConfig.metric]"
+          :x-scale="store().uiState.distributionChartConfig.xScale"
           class="h-2/3 w-full"
         />
         <div class="flex flex-grow flex-col space-y-1">
@@ -36,16 +36,21 @@
             <OptionsSelector
               name="Metric"
               :labels="['Average', 'Maximum']"
+              :defaultSelected="getIndexFromMetric(store().uiState.distributionChartConfig.metric)"
               @selection-changed="
-                (i: number) => (selectedDistributionDiagramMetric = getMetricFromNumber(i))
+                (i: number) =>
+                  (store().uiState.distributionChartConfig.metric = getMetricFromNumber(i))
               "
             />
             <OptionsSelector
               class="mt-2"
               name="Scale x-Axis:"
               :labels="['Linear', 'Logarithmic']"
+              :defaultSelected="store().uiState.distributionChartConfig.xScale == 'linear' ? 0 : 1"
               @selection-changed="
-                (i: number) => (distributionDiagramScaleX = i == 0 ? 'linear' : 'logarithmic')
+                (i: number) =>
+                  (store().uiState.distributionChartConfig.xScale =
+                    i == 0 ? 'linear' : 'logarithmic')
               "
             />
           </ScrollableComponent>
@@ -71,8 +76,9 @@
         <OptionsSelector
           name="Sort By"
           :labels="['Average Similarity', 'Maximum Similarity']"
+          :defaultSelected="getIndexFromMetric(store().uiState.comparisonTableSortingMetric)"
           @selection-changed="
-            (index) => (comparisonTableSortingMetric = getMetricFromNumber(index))
+            (index) => (store().uiState.comparisonTableSortingMetric = getMetricFromNumber(index))
           "
         />
         <ComparisonsTable
@@ -86,7 +92,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onErrorCaptured, ref, watch, type Ref } from 'vue'
+import { computed, onErrorCaptured, ref, watch } from 'vue'
 import { router } from '@/router'
 import DistributionDiagram from '@/components/DistributionDiagram.vue'
 import ComparisonsTable from '@/components/ComparisonsTable.vue'
@@ -104,8 +110,6 @@ import OptionsSelector from '@/components/OptionsSelectorComponent.vue'
 const overview = OverviewFactory.getOverview()
 
 const searchString = ref('')
-const comparisonTableSortingMetric = ref(MetricType.AVERAGE)
-const distributionDiagramScaleX: Ref<'linear' | 'logarithmic'> = ref('linear')
 
 /**
  * This funtion gets called when the search bar for the compariosn table has been updated.
@@ -134,8 +138,8 @@ function getFilteredComparisons(comparisons: ComparisonListElement[]) {
 function getSortedComparisons(comparisons: ComparisonListElement[]) {
   comparisons.sort(
     (a, b) =>
-      b.similarities[comparisonTableSortingMetric.value] -
-      a.similarities[comparisonTableSortingMetric.value]
+      b.similarities[store().uiState.comparisonTableSortingMetric] -
+      a.similarities[store().uiState.comparisonTableSortingMetric]
   )
   let index = 0
   comparisons.forEach((c) => {
@@ -184,8 +188,6 @@ function changeAnnoymousForAll() {
   }
 }
 
-const selectedDistributionDiagramMetric = ref(MetricType.AVERAGE)
-
 function getMetricFromNumber(metric: number) {
   if (metric == 0) {
     return MetricType.AVERAGE
@@ -194,6 +196,14 @@ function getMetricFromNumber(metric: number) {
   }
 }
 
+function getIndexFromMetric(metric: MetricType) {
+  if (metric == MetricType.AVERAGE) {
+    return 0
+  } else {
+    return 1
+  }
+}
+
 const hasMoreSubmissionPaths = overview.submissionFolderPath.length > 1
 const submissionPathValue = hasMoreSubmissionPaths
   ? 'Click More to see all paths'