Merge pull request #1290 from jplag/report-viewer/store-metric

Store selections from overview when switching views
jplag · Sep 20, 2023 · 10adb0d · 10adb0d
2 parents 86a1720 + abfe349
commit 10adb0d
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 14 deletions.
diff --git a/report-viewer/src/components/optionsSelectors/MetricSelector.vue b/report-viewer/src/components/optionsSelectors/MetricSelector.vue
@@ -2,6 +2,7 @@
   <OptionsSelectorComponent
     :title="title"
     :labels="labels"
+    :default-selected="metrics.indexOf(defaultSelected)"
     @selection-changed="(i) => $emit('selectionChanged', metrics[i])"
   />
 </template>
@@ -22,7 +23,7 @@ const props = defineProps({
     required: false,
     default: ''
   },
-  defaultSelection: {
+  defaultSelected: {
     type: String as PropType<MetricType>,
     required: false,
     default: MetricType.AVERAGE

diff --git a/report-viewer/src/stores/state.ts b/report-viewer/src/stores/state.ts
@@ -1,3 +1,5 @@
+import type { MetricType } from '@/model/MetricType'
+
 /**
  * Local store. Stores the state of the application.
  */
@@ -67,4 +69,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'
 }
diff --git a/report-viewer/src/stores/store.ts b/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: {

diff --git a/report-viewer/src/views/OverviewView.vue b/report-viewer/src/views/OverviewView.vue
@@ -34,8 +34,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">
@@ -44,16 +44,20 @@
             <MetricSelector
               class="mt-2"
               title="Metric:"
+              :defaultSelected="store().uiState.distributionChartConfig.metric"
               @selection-changed="
-                (metric: MetricType) => (selectedDistributionDiagramMetric = metric)
+                (metric: MetricType) => (store().uiState.distributionChartConfig.metric = metric)
               "
             />
             <OptionsSelector
               class="mt-2"
               title="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>
@@ -89,7 +93,10 @@
         </div>
         <MetricSelector
           title="Sort By:"
-          @selection-changed="(metric: MetricType) => (comparisonTableSortingMetric = metric)"
+          :defaultSelected="store().uiState.comparisonTableSortingMetric"
+          @selection-changed="
+            (metric: MetricType) => (store().uiState.comparisonTableSortingMetric = metric)
+          "
         />
         <ComparisonsTable
           :clusters="overview.clusters"
@@ -102,7 +109,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'
@@ -122,8 +129,6 @@ import OptionsSelector from '@/components/optionsSelectors/OptionsSelectorCompon
 const overview = await 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.
@@ -152,8 +157,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) => {
@@ -202,8 +207,6 @@ function changeAnnoymousForAll() {
   }
 }
 
-const selectedDistributionDiagramMetric = ref(MetricType.AVERAGE)
-
 const hasMoreSubmissionPaths = overview.submissionFolderPath.length > 1
 const submissionPathValue = hasMoreSubmissionPaths
   ? 'Click More to see all paths'