persist and load user preference for showing unlabelled sessions

app/static/src/app/components/sessions/SessionsPage.vue

@@ -45,6 +45,10 @@
     </div>
     <template v-if="previousSessions && previousSessions.length">
         <h3>Previous sessions</h3>
+        <div>
+          <input id="show-unlabelled-check" type="checkbox" class="form-check-input" v-model="showUnlabelledSessions" />
+          <label for="show-unlabelled-check" class="form-check-label">Show unlabelled sessions</label>
+        </div>
         <div class="row fw-bold py-2" id="previous-sessions-headers">
           <div class="col-2 session-col-header">Saved</div>
           <div class="col-2 session-col-header">Label</div>
@@ -121,6 +125,7 @@ import {
 import { useStore } from "vuex";
 import VueFeather from "vue-feather";
 import { RouterLink } from "vue-router";
+import { AppStateAction } from "../../store/appState/actions";
 import { SessionsAction } from "../../store/sessions/actions";
 import userMessages from "../../userMessages";
 import ErrorsAlert from "../ErrorsAlert.vue";
@@ -173,6 +178,15 @@ export default defineComponent({
             return sessionsMetadata.value?.find((s: SessionMetadata) => isCurrentSession(s.id));
         });
 
+        const showUnlabelledSessions = computed({
+            get() {
+                return store.state.userPreferences.showUnlabelledSessions;
+            },
+            set(newValue: boolean) {
+                store.dispatch(AppStateAction.SaveUserPreferences, { showUnlabelledSessions: newValue });
+            }
+        });
+
         const toggleEditSessionLabelOpen = (open: boolean) => {
             editSessionLabelOpen.value = open;
         };
@@ -242,6 +256,7 @@ export default defineComponent({
 
         onMounted(() => {
             store.dispatch(`${namespace}/${SessionsAction.GetSessions}`);
+            store.dispatch(AppStateAction.LoadUserPreferences);
         });
 
         const messages = userMessages.sessions;
@@ -267,6 +282,7 @@ export default defineComponent({
             confirmDeleteSession,
             toggleConfirmDeleteSessionOpen,
             deleteSession,
+            showUnlabelledSessions,
             messages
         };
     }

app/static/src/app/localStorageManager.ts

@@ -1,9 +1,17 @@
+import {UserPreferences} from "./store/appState/state";
+
 class LocalStorageManager {
     static _sessionIdsKey = (appName: string, basePath: string) => {
         const prefix = basePath ? `${basePath}_` : "";
         return `${prefix}${appName}_sessionIds`;
     };
 
+    static _preferencesKey = "preferences";
+
+    static _initialUserPreferences = (): UserPreferences => ({
+        showUnlabelledSessions: true
+    });
+
     getSessionIds = (appName: string, basePath: string): string[] => {
         const serialised = window.localStorage.getItem(LocalStorageManager._sessionIdsKey(appName, basePath));
         return (serialised ? JSON.parse(serialised) : []) as string[];
@@ -24,6 +32,15 @@ class LocalStorageManager {
         sessionIds = sessionIds.filter((s) => s !== sessionId);
         this.saveSessionIds(appName, basePath, sessionIds);
     }
+
+    getUserPreferences = (): UserPreferences => {
+        const serialised = window.localStorage.getItem(LocalStorageManager._preferencesKey);
+        return serialised ? JSON.parse(serialised) : LocalStorageManager._initialUserPreferences();
+    }
+
+    setUserPreferences = (preferences: UserPreferences) => {
+        window.localStorage.setItem(LocalStorageManager._preferencesKey, JSON.stringify(preferences));
+    };
 }
 
 export const localStorageManager = new LocalStorageManager();

app/static/src/app/store/appState/actions.ts

@@ -5,7 +5,7 @@ import { AppConfig } from "../../types/responseTypes";
 import { CodeMutation } from "../code/mutations";
 import { RunMutation } from "../run/mutations";
 import { ModelAction } from "../model/actions";
-import { AppState, AppType } from "./state";
+import {AppState, AppType, UserPreferences} from "./state";
 import { AppStateMutation } from "./mutations";
 import { serialiseState } from "../../serialise";
 import { FitState } from "../fit/state";
@@ -16,7 +16,9 @@ import { InitialisePayload } from "../../types/payloadTypes";
 
 export enum AppStateAction {
     Initialise = "Initialise",
-    QueueStateUpload = "QueueStateUpload"
+    QueueStateUpload = "QueueStateUpload",
+    LoadUserPreferences = "LoadUserPreferences",
+    SaveUserPreferences = "SaveUserPreferences"
 }
 
 async function immediateUploadState(context: ActionContext<AppState, AppState>) {
@@ -104,5 +106,18 @@ export const appStateActions: ActionTree<AppState, AppState> = {
             // record the newly queued upload
             commit(AppStateMutation.SetQueuedStateUpload, queuedId);
         }
+    },
+
+    async [AppStateAction.LoadUserPreferences](context) {
+        const { commit } = context;
+        const preferences = localStorageManager.getUserPreferences();
+        commit(AppStateMutation.SetUserPreferences, preferences);
+    },
+
+    async [AppStateAction.SaveUserPreferences](context, payload: Partial<UserPreferences>) {
+        const { commit, state } = context;
+        const newPrefs = { ...state.userPreferences, ...payload };
+        localStorageManager.setUserPreferences(newPrefs);
+        commit(AppStateMutation.SetUserPreferences, newPrefs);
     }
 };

app/static/src/app/store/appState/mutations.ts

@@ -1,5 +1,5 @@
 import { MutationTree } from "vuex";
-import { AppState, VisualisationTab } from "./state";
+import {AppState, UserPreferences, VisualisationTab} from "./state";
 import { AppConfig } from "../../types/responseTypes";
 import { SetAppPayload } from "../../types/payloadTypes";
 import registerTranslations from "../../../../translationPackage/registerTranslations";
@@ -13,7 +13,8 @@ export enum AppStateMutation {
     SetQueuedStateUpload = "SetQueuedStateUpload",
     SetStateUploadInProgress = "SetStateUploadInProgress",
     SetSessionLabel = "SetSessionLabel",
-    SetConfigured = "SetConfigured"
+    SetConfigured = "SetConfigured",
+    SetUserPreferences = "SetUserPreferences"
 }
 
 export const StateUploadMutations = [
@@ -59,5 +60,9 @@ export const appStateMutations: MutationTree<AppState> = {
 
     [AppStateMutation.SetConfigured](state: AppState) {
         state.configured = true;
+    },
+
+    [AppStateMutation.SetUserPreferences](state: AppState, payload: UserPreferences) {
+        state.userPreferences = payload;
     }
 };

app/static/src/app/store/appState/state.ts

@@ -21,6 +21,10 @@ export enum VisualisationTab {
     MultiSensitivity = "Multi-sensitivity"
 }
 
+export interface UserPreferences {
+    showUnlabelledSessions: boolean
+}
+
 export interface AppState {
     sessionId: string,
     sessionLabel: null | string,
@@ -40,5 +44,6 @@ export interface AppState {
     graphSettings: GraphSettingsState,
     versions: VersionsState,
     configured: boolean, // true if configuration has been loaded or rehydrated and defaults set
-    language: LanguageState
+    language: LanguageState,
+    userPreferences: UserPreferences
 }