From eef88eb91fce6618f80ca5d4254d4c1c55a61db2 Mon Sep 17 00:00:00 2001
From: tombch <t.brier@outlook.com>
Date: Fri, 13 Mar 2026 19:31:16 +0100
Subject: [PATCH 1/7] initial functionality

---
 .../components/SearchPage/SearchFullUI.tsx    | 46 +++++++++++++++++++
 .../SearchPage/useSearchPageState.ts          |  2 +
 2 files changed, 48 insertions(+)

diff --git a/website/src/components/SearchPage/SearchFullUI.tsx b/website/src/components/SearchPage/SearchFullUI.tsx
index 32643636cd..5a6853ce32 100644
--- a/website/src/components/SearchPage/SearchFullUI.tsx
+++ b/website/src/components/SearchPage/SearchFullUI.tsx
@@ -89,6 +89,7 @@ export const InnerSearchFullUI = ({
 
     const {
         state,
+        setState,
         previewedSeqId,
         setPreviewedSeqId,
         previewHalfScreen,
@@ -106,6 +107,43 @@ export const InnerSearchFullUI = ({
         setAColumnVisibility,
     } = useSearchPageState({ initialQueryDict, schema, hiddenFieldValues, filterSchema, referenceGenomesInfo });
 
+    // Update sessionQuery whenever state changes
+    const sessionQueryKey = `${organism}QueryState`;
+    useEffect(() => {
+        if (typeof sessionStorage === 'undefined') return;
+
+        if (Object.keys(state).length > 0) {
+            sessionStorage.setItem(sessionQueryKey, JSON.stringify(state));
+        } else {
+            sessionStorage.removeItem(sessionQueryKey);
+        }
+    }, [state]);
+
+    const sessionQuery: QueryState | null = useMemo(() => {
+        if (typeof sessionStorage === 'undefined') return null;
+
+        const sessionQueryValue = sessionStorage.getItem(sessionQueryKey);
+        console.log('Restoring session query from sessionStorage:', sessionQueryValue);
+        if (sessionQueryValue) {
+            try {
+                return JSON.parse(sessionQueryValue);
+            } catch {}
+        }
+        return null;
+    }, []);
+    const isSessionQueryRestorable = Object.keys(state).length == 0 && sessionQuery;
+    const [showSessionQueryRestore, setShowSessionQueryRestore] = useState(false);
+    useEffect(() => {
+        if (isSessionQueryRestorable) {
+            setShowSessionQueryRestore(true);
+        } else {
+            setShowSessionQueryRestore(false);
+        }
+    }, []);
+    const restoreSessionQuery = () => {
+        if (sessionQuery) setState(sessionQuery);
+    };
+
     const searchVisibilities = useMemo(() => {
         return getFieldVisibilitiesFromQuery(schema, state);
     }, [schema, state]);
@@ -314,6 +352,14 @@ export const InnerSearchFullUI = ({
                             <ActiveFilters sequenceFilter={tableFilter} removeFilter={removeFilter} />
                         </div>
                     )}
+                    {isSessionQueryRestorable && showSessionQueryRestore && (
+                        <Button
+                            className='text-sm underline text-primary-700 hover:text-primary-500'
+                            onClick={restoreSessionQuery}
+                        >
+                            Click to restore previous search
+                        </Button>
+                    )}
                     <div className='text-sm text-gray-800 mb-6 justify-between flex flex-col sm:flex-row items-baseline gap-4'>
                         <div className='mt-auto'>
                             {buildSequenceCountText(totalSequences, oldCount, initialCount)}
diff --git a/website/src/components/SearchPage/useSearchPageState.ts b/website/src/components/SearchPage/useSearchPageState.ts
index 521c78a6de..edbf9b1721 100644
--- a/website/src/components/SearchPage/useSearchPageState.ts
+++ b/website/src/components/SearchPage/useSearchPageState.ts
@@ -249,6 +249,7 @@ export function useSearchPageState({
     return useMemo(
         () => ({
             state,
+            setState,
             previewedSeqId,
             setPreviewedSeqId,
             previewHalfScreen,
@@ -267,6 +268,7 @@ export function useSearchPageState({
         }),
         [
             state,
+            setState,
             previewedSeqId,
             setPreviewedSeqId,
             previewHalfScreen,

From 34afdd011dee6d44016b2fe3a3e54411433f786f Mon Sep 17 00:00:00 2001
From: tombch <t.brier@outlook.com>
Date: Mon, 16 Mar 2026 09:25:38 +0100
Subject: [PATCH 2/7] Cleaned up effects and added comments

---
 .../components/SearchPage/SearchFullUI.tsx    | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/website/src/components/SearchPage/SearchFullUI.tsx b/website/src/components/SearchPage/SearchFullUI.tsx
index 5a6853ce32..64b4a32d01 100644
--- a/website/src/components/SearchPage/SearchFullUI.tsx
+++ b/website/src/components/SearchPage/SearchFullUI.tsx
@@ -112,18 +112,14 @@ export const InnerSearchFullUI = ({
     useEffect(() => {
         if (typeof sessionStorage === 'undefined') return;
 
-        if (Object.keys(state).length > 0) {
-            sessionStorage.setItem(sessionQueryKey, JSON.stringify(state));
-        } else {
-            sessionStorage.removeItem(sessionQueryKey);
-        }
+        if (Object.keys(state).length > 0) sessionStorage.setItem(sessionQueryKey, JSON.stringify(state));
+        else sessionStorage.removeItem(sessionQueryKey);
     }, [state]);
 
     const sessionQuery: QueryState | null = useMemo(() => {
         if (typeof sessionStorage === 'undefined') return null;
 
         const sessionQueryValue = sessionStorage.getItem(sessionQueryKey);
-        console.log('Restoring session query from sessionStorage:', sessionQueryValue);
         if (sessionQueryValue) {
             try {
                 return JSON.parse(sessionQueryValue);
@@ -131,17 +127,19 @@ export const InnerSearchFullUI = ({
         }
         return null;
     }, []);
-    const isSessionQueryRestorable = Object.keys(state).length == 0 && sessionQuery;
+
     const [showSessionQueryRestore, setShowSessionQueryRestore] = useState(false);
     useEffect(() => {
-        if (isSessionQueryRestorable) {
-            setShowSessionQueryRestore(true);
-        } else {
-            setShowSessionQueryRestore(false);
-        }
+        const isSessionQueryRestorable = Object.keys(state).length == 0 && sessionQuery;
+        if (isSessionQueryRestorable) setShowSessionQueryRestore(true);
+        else setShowSessionQueryRestore(false);
     }, []);
+
     const restoreSessionQuery = () => {
-        if (sessionQuery) setState(sessionQuery);
+        if (sessionQuery) {
+            setState(sessionQuery);
+            setShowSessionQueryRestore(false);
+        }
     };
 
     const searchVisibilities = useMemo(() => {
@@ -352,7 +350,7 @@ export const InnerSearchFullUI = ({
                             <ActiveFilters sequenceFilter={tableFilter} removeFilter={removeFilter} />
                         </div>
                     )}
-                    {isSessionQueryRestorable && showSessionQueryRestore && (
+                    {showSessionQueryRestore && (
                         <Button
                             className='text-sm underline text-primary-700 hover:text-primary-500'
                             onClick={restoreSessionQuery}

From 8346ef185ef58d3e5603e86c1f67b29a428f376b Mon Sep 17 00:00:00 2001
From: tombch <t.brier@outlook.com>
Date: Mon, 16 Mar 2026 09:27:43 +0100
Subject: [PATCH 3/7] Fixing formatting

---
 website/src/components/SearchPage/SearchFullUI.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/website/src/components/SearchPage/SearchFullUI.tsx b/website/src/components/SearchPage/SearchFullUI.tsx
index 64b4a32d01..151823cb35 100644
--- a/website/src/components/SearchPage/SearchFullUI.tsx
+++ b/website/src/components/SearchPage/SearchFullUI.tsx
@@ -107,7 +107,7 @@ export const InnerSearchFullUI = ({
         setAColumnVisibility,
     } = useSearchPageState({ initialQueryDict, schema, hiddenFieldValues, filterSchema, referenceGenomesInfo });
 
-    // Update sessionQuery whenever state changes
+    // Update sessionStorage whenever state changes
     const sessionQueryKey = `${organism}QueryState`;
     useEffect(() => {
         if (typeof sessionStorage === 'undefined') return;
@@ -116,18 +116,22 @@ export const InnerSearchFullUI = ({
         else sessionStorage.removeItem(sessionQueryKey);
     }, [state]);
 
+    // On mount, check if sessionStorage has a query to restore
     const sessionQuery: QueryState | null = useMemo(() => {
         if (typeof sessionStorage === 'undefined') return null;
 
         const sessionQueryValue = sessionStorage.getItem(sessionQueryKey);
         if (sessionQueryValue) {
             try {
-                return JSON.parse(sessionQueryValue);
-            } catch {}
+                return JSON.parse(sessionQueryValue) as QueryState;
+            } catch {
+                return null;
+            }
         }
         return null;
     }, []);
 
+    // Show a restore button if there's a session query that can be restored and the current state is empty
     const [showSessionQueryRestore, setShowSessionQueryRestore] = useState(false);
     useEffect(() => {
         const isSessionQueryRestorable = Object.keys(state).length == 0 && sessionQuery;
@@ -135,6 +139,7 @@ export const InnerSearchFullUI = ({
         else setShowSessionQueryRestore(false);
     }, []);
 
+    // Restore the session query
     const restoreSessionQuery = () => {
         if (sessionQuery) {
             setState(sessionQuery);

From e136022b66cf8d3e617e2a7f3a9daeaaa11afddc Mon Sep 17 00:00:00 2001
From: tombch <t.brier@outlook.com>
Date: Mon, 16 Mar 2026 14:02:29 +0100
Subject: [PATCH 4/7] Cleaning up code

---
 .../components/SearchPage/SearchFullUI.tsx    | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/website/src/components/SearchPage/SearchFullUI.tsx b/website/src/components/SearchPage/SearchFullUI.tsx
index 151823cb35..e80316846f 100644
--- a/website/src/components/SearchPage/SearchFullUI.tsx
+++ b/website/src/components/SearchPage/SearchFullUI.tsx
@@ -107,17 +107,12 @@ export const InnerSearchFullUI = ({
         setAColumnVisibility,
     } = useSearchPageState({ initialQueryDict, schema, hiddenFieldValues, filterSchema, referenceGenomesInfo });
 
-    // Update sessionStorage whenever state changes
+    const isEmptyQueryState = (q: QueryState | null) => q === null || Object.keys(q).length === 0;
     const sessionQueryKey = `${organism}QueryState`;
-    useEffect(() => {
-        if (typeof sessionStorage === 'undefined') return;
-
-        if (Object.keys(state).length > 0) sessionStorage.setItem(sessionQueryKey, JSON.stringify(state));
-        else sessionStorage.removeItem(sessionQueryKey);
-    }, [state]);
 
     // On mount, check if sessionStorage has a query to restore
     const sessionQuery: QueryState | null = useMemo(() => {
+        // sessionStorage is undefined during server-side rendering
         if (typeof sessionStorage === 'undefined') return null;
 
         const sessionQueryValue = sessionStorage.getItem(sessionQueryKey);
@@ -131,10 +126,18 @@ export const InnerSearchFullUI = ({
         return null;
     }, []);
 
+    // Update sessionStorage whenever state changes
+    useEffect(() => {
+        if (typeof sessionStorage === 'undefined') return;
+
+        if (!isEmptyQueryState(state)) sessionStorage.setItem(sessionQueryKey, JSON.stringify(state));
+        else sessionStorage.removeItem(sessionQueryKey);
+    }, [state]);
+
     // Show a restore button if there's a session query that can be restored and the current state is empty
     const [showSessionQueryRestore, setShowSessionQueryRestore] = useState(false);
     useEffect(() => {
-        const isSessionQueryRestorable = Object.keys(state).length == 0 && sessionQuery;
+        const isSessionQueryRestorable = isEmptyQueryState(state) && !isEmptyQueryState(sessionQuery);
         if (isSessionQueryRestorable) setShowSessionQueryRestore(true);
         else setShowSessionQueryRestore(false);
     }, []);

From 1b433d73d85dd1be66fb62df1d0990f6e194d2bd Mon Sep 17 00:00:00 2001
From: tombch <t.brier@outlook.com>
Date: Mon, 16 Mar 2026 16:32:12 +0100
Subject: [PATCH 5/7] Ensure restore button is hidden after user adds their own
 filters

---
 .../components/SearchPage/SearchFullUI.tsx    | 59 ++++++++++---------
 1 file changed, 30 insertions(+), 29 deletions(-)

diff --git a/website/src/components/SearchPage/SearchFullUI.tsx b/website/src/components/SearchPage/SearchFullUI.tsx
index e80316846f..77f454d3e8 100644
--- a/website/src/components/SearchPage/SearchFullUI.tsx
+++ b/website/src/components/SearchPage/SearchFullUI.tsx
@@ -110,42 +110,43 @@ export const InnerSearchFullUI = ({
     const isEmptyQueryState = (q: QueryState | null) => q === null || Object.keys(q).length === 0;
     const sessionQueryKey = `${organism}QueryState`;
 
-    // On mount, check if sessionStorage has a query to restore
-    const sessionQuery: QueryState | null = useMemo(() => {
+    const restorableQuery: QueryState | null = useMemo(() => {
+        // On mount, check if sessionStorage has a query to restore
         // sessionStorage is undefined during server-side rendering
-        if (typeof sessionStorage === 'undefined') return null;
-
-        const sessionQueryValue = sessionStorage.getItem(sessionQueryKey);
-        if (sessionQueryValue) {
-            try {
-                return JSON.parse(sessionQueryValue) as QueryState;
-            } catch {
-                return null;
+        if (typeof sessionStorage !== 'undefined') {
+            const queryValue = sessionStorage.getItem(sessionQueryKey);
+            if (queryValue) {
+                try {
+                    return JSON.parse(queryValue) as QueryState;
+                } catch {
+                    return null;
+                }
             }
         }
         return null;
     }, []);
 
-    // Update sessionStorage whenever state changes
-    useEffect(() => {
-        if (typeof sessionStorage === 'undefined') return;
-
-        if (!isEmptyQueryState(state)) sessionStorage.setItem(sessionQueryKey, JSON.stringify(state));
-        else sessionStorage.removeItem(sessionQueryKey);
-    }, [state]);
-
-    // Show a restore button if there's a session query that can be restored and the current state is empty
     const [showSessionQueryRestore, setShowSessionQueryRestore] = useState(false);
     useEffect(() => {
-        const isSessionQueryRestorable = isEmptyQueryState(state) && !isEmptyQueryState(sessionQuery);
+        // Show the restore button if the state is empty and there's a query that can be restored
+        const isSessionQueryRestorable = isEmptyQueryState(state) && !isEmptyQueryState(restorableQuery);
         if (isSessionQueryRestorable) setShowSessionQueryRestore(true);
-        else setShowSessionQueryRestore(false);
     }, []);
 
-    // Restore the session query
+    useEffect(() => {
+        // Update sessionStorage with the new state
+        if (typeof sessionStorage !== 'undefined') {
+            if (!isEmptyQueryState(state)) sessionStorage.setItem(sessionQueryKey, JSON.stringify(state));
+            else sessionStorage.removeItem(sessionQueryKey);
+        }
+
+        // If the state is no longer empty, hide the restore button
+        if (!isEmptyQueryState(state)) setShowSessionQueryRestore(false);
+    }, [state]);
+
     const restoreSessionQuery = () => {
-        if (sessionQuery) {
-            setState(sessionQuery);
+        if (restorableQuery) {
+            setState(restorableQuery);
             setShowSessionQueryRestore(false);
         }
     };
@@ -353,11 +354,6 @@ export const InnerSearchFullUI = ({
                         }
                         `}
                 >
-                    {!tableFilter.isEmpty() && (
-                        <div className='pt-3 pb-2'>
-                            <ActiveFilters sequenceFilter={tableFilter} removeFilter={removeFilter} />
-                        </div>
-                    )}
                     {showSessionQueryRestore && (
                         <Button
                             className='text-sm underline text-primary-700 hover:text-primary-500'
@@ -366,6 +362,11 @@ export const InnerSearchFullUI = ({
                             Click to restore previous search
                         </Button>
                     )}
+                    {!tableFilter.isEmpty() && (
+                        <div className='pt-3 pb-2'>
+                            <ActiveFilters sequenceFilter={tableFilter} removeFilter={removeFilter} />
+                        </div>
+                    )}
                     <div className='text-sm text-gray-800 mb-6 justify-between flex flex-col sm:flex-row items-baseline gap-4'>
                         <div className='mt-auto'>
                             {buildSequenceCountText(totalSequences, oldCount, initialCount)}

From d2686384ba7215d47d1ef769fb4e4e96c4c169c1 Mon Sep 17 00:00:00 2001
From: tombch <t.brier@outlook.com>
Date: Mon, 16 Mar 2026 17:22:51 +0100
Subject: [PATCH 6/7] Updated display of restore previous search button

---
 .../components/SearchPage/SearchFullUI.tsx    | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/website/src/components/SearchPage/SearchFullUI.tsx b/website/src/components/SearchPage/SearchFullUI.tsx
index 77f454d3e8..7b1b9a9c9b 100644
--- a/website/src/components/SearchPage/SearchFullUI.tsx
+++ b/website/src/components/SearchPage/SearchFullUI.tsx
@@ -354,14 +354,6 @@ export const InnerSearchFullUI = ({
                         }
                         `}
                 >
-                    {showSessionQueryRestore && (
-                        <Button
-                            className='text-sm underline text-primary-700 hover:text-primary-500'
-                            onClick={restoreSessionQuery}
-                        >
-                            Click to restore previous search
-                        </Button>
-                    )}
                     {!tableFilter.isEmpty() && (
                         <div className='pt-3 pb-2'>
                             <ActiveFilters sequenceFilter={tableFilter} removeFilter={removeFilter} />
@@ -370,6 +362,17 @@ export const InnerSearchFullUI = ({
                     <div className='text-sm text-gray-800 mb-6 justify-between flex flex-col sm:flex-row items-baseline gap-4'>
                         <div className='mt-auto'>
                             {buildSequenceCountText(totalSequences, oldCount, initialCount)}
+                            {showSessionQueryRestore && (
+                                <span>
+                                    <span className='m-2 text-gray-400'>|</span>
+                                    <Button
+                                        className='text-sm underline text-primary-700 hover:text-primary-500'
+                                        onClick={restoreSessionQuery}
+                                    >
+                                        Restore previous search
+                                    </Button>
+                                </span>
+                            )}
                             {detailsHook.isPending ||
                             aggregatedHook.isPending ||
                             !firstClientSideLoadOfCountCompleted ||

From fab92473e420c10cc8ef991687e91992a9ab02f2 Mon Sep 17 00:00:00 2001
From: tombch <t.brier@outlook.com>
Date: Mon, 16 Mar 2026 17:37:29 +0100
Subject: [PATCH 7/7] Updating query key

---
 website/src/components/SearchPage/SearchFullUI.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/SearchPage/SearchFullUI.tsx b/website/src/components/SearchPage/SearchFullUI.tsx
index 7b1b9a9c9b..84fd0dfdd5 100644
--- a/website/src/components/SearchPage/SearchFullUI.tsx
+++ b/website/src/components/SearchPage/SearchFullUI.tsx
@@ -108,7 +108,7 @@ export const InnerSearchFullUI = ({
     } = useSearchPageState({ initialQueryDict, schema, hiddenFieldValues, filterSchema, referenceGenomesInfo });
 
     const isEmptyQueryState = (q: QueryState | null) => q === null || Object.keys(q).length === 0;
-    const sessionQueryKey = `${organism}QueryState`;
+    const sessionQueryKey = `${organism}SearchPageQuery`;
 
     const restorableQuery: QueryState | null = useMemo(() => {
         // On mount, check if sessionStorage has a query to restore