From 4699c1ddc6281383cb9bade49eb004c2dd172af1 Mon Sep 17 00:00:00 2001
From: Jeremy Magland <jmagland@flatironinstitute.org>
Date: Wed, 24 Jul 2024 08:13:14 -0400
Subject: [PATCH 1/5] Track viewed tabs in TabWidget component

---
 gui/src/app/components/TabWidget.tsx | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/gui/src/app/components/TabWidget.tsx b/gui/src/app/components/TabWidget.tsx
index e2ed7717..6bbd8ebd 100644
--- a/gui/src/app/components/TabWidget.tsx
+++ b/gui/src/app/components/TabWidget.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { FunctionComponent, useState } from "react";
+import { FunctionComponent, useEffect, useState } from "react";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import Box from "@mui/material/Box";
@@ -15,6 +15,17 @@ const TabWidget: FunctionComponent<TabWidgetProps> = ({ labels, children }) => {
   }
 
   const [index, setIndex] = useState(0);
+  const [tabsThatHaveBeenViewed, setTabsThatHaveBeenViewed] = useState<
+    number[]
+  >([]);
+  useEffect(() => {
+    setTabsThatHaveBeenViewed((prev) => {
+      if (!prev.includes(index)) {
+        return [...prev, index];
+      }
+      return prev;
+    });
+  }, [index]);
 
   const handleChange = (_: React.SyntheticEvent, newValue: number) => {
     setIndex(newValue);
@@ -29,7 +40,12 @@ const TabWidget: FunctionComponent<TabWidgetProps> = ({ labels, children }) => {
       </Tabs>
       <Box flex="1" overflow="scroll">
         {children.map((child, i) => (
-          <CustomTabPanel key={i} value={index} index={i}>
+          <CustomTabPanel
+            key={i}
+            value={index}
+            index={i}
+            tabsThatHaveBeenViewed={tabsThatHaveBeenViewed}
+          >
             {child}
           </CustomTabPanel>
         ))}
@@ -41,11 +57,12 @@ const TabWidget: FunctionComponent<TabWidgetProps> = ({ labels, children }) => {
 interface TabPanelProps {
   children?: React.ReactNode;
   index: number;
+  tabsThatHaveBeenViewed: number[];
   value: number;
 }
 
 const CustomTabPanel = (props: TabPanelProps) => {
-  const { children, value, index, ...other } = props;
+  const { children, value, index, tabsThatHaveBeenViewed, ...other } = props;
 
   return (
     <div
@@ -56,7 +73,9 @@ const CustomTabPanel = (props: TabPanelProps) => {
       style={{ height: "100%", width: "100%" }}
       {...other}
     >
-      {value === index && <>{children}</>}
+      {(value === index || tabsThatHaveBeenViewed.includes(index)) && (
+        <>{children}</>
+      )}
     </div>
   );
 };

From 4839a08bfc5a5e4614680a76bb4967ffa16a3bf3 Mon Sep 17 00:00:00 2001
From: Jeremy Magland <jmagland@flatironinstitute.org>
Date: Wed, 24 Jul 2024 10:33:47 -0400
Subject: [PATCH 2/5] Update tab widget implementation

---
 gui/src/app/components/TabWidget.tsx | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/gui/src/app/components/TabWidget.tsx b/gui/src/app/components/TabWidget.tsx
index 6bbd8ebd..8f2f1b41 100644
--- a/gui/src/app/components/TabWidget.tsx
+++ b/gui/src/app/components/TabWidget.tsx
@@ -18,16 +18,14 @@ const TabWidget: FunctionComponent<TabWidgetProps> = ({ labels, children }) => {
   const [tabsThatHaveBeenViewed, setTabsThatHaveBeenViewed] = useState<
     number[]
   >([]);
-  useEffect(() => {
+
+  const handleChange = (_: React.SyntheticEvent, newValue: number) => {
     setTabsThatHaveBeenViewed((prev) => {
-      if (!prev.includes(index)) {
-        return [...prev, index];
+      if (!prev.includes(newValue)) {
+        return [...prev, newValue];
       }
       return prev;
     });
-  }, [index]);
-
-  const handleChange = (_: React.SyntheticEvent, newValue: number) => {
     setIndex(newValue);
   };
 
@@ -44,7 +42,7 @@ const TabWidget: FunctionComponent<TabWidgetProps> = ({ labels, children }) => {
             key={i}
             value={index}
             index={i}
-            tabsThatHaveBeenViewed={tabsThatHaveBeenViewed}
+            mounted={tabsThatHaveBeenViewed.includes(i)}
           >
             {child}
           </CustomTabPanel>
@@ -57,12 +55,12 @@ const TabWidget: FunctionComponent<TabWidgetProps> = ({ labels, children }) => {
 interface TabPanelProps {
   children?: React.ReactNode;
   index: number;
-  tabsThatHaveBeenViewed: number[];
+  mounted: boolean;
   value: number;
 }
 
 const CustomTabPanel = (props: TabPanelProps) => {
-  const { children, value, index, tabsThatHaveBeenViewed, ...other } = props;
+  const { children, value, index, mounted, ...other } = props;
 
   return (
     <div
@@ -73,9 +71,7 @@ const CustomTabPanel = (props: TabPanelProps) => {
       style={{ height: "100%", width: "100%" }}
       {...other}
     >
-      {(value === index || tabsThatHaveBeenViewed.includes(index)) && (
-        <>{children}</>
-      )}
+      {(value === index || mounted) && <>{children}</>}
     </div>
   );
 };

From 4ac2feb6e5c09b98c2b1254bbf770593180f7a52 Mon Sep 17 00:00:00 2001
From: Jeremy Magland <jmagland@flatironinstitute.org>
Date: Wed, 24 Jul 2024 10:34:59 -0400
Subject: [PATCH 3/5] Update tab widget implementation

---
 gui/src/app/components/TabWidget.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gui/src/app/components/TabWidget.tsx b/gui/src/app/components/TabWidget.tsx
index 8f2f1b41..282269ee 100644
--- a/gui/src/app/components/TabWidget.tsx
+++ b/gui/src/app/components/TabWidget.tsx
@@ -71,7 +71,7 @@ const CustomTabPanel = (props: TabPanelProps) => {
       style={{ height: "100%", width: "100%" }}
       {...other}
     >
-      {(value === index || mounted) && <>{children}</>}
+      {mounted && <>{children}</>}
     </div>
   );
 };

From 011d10ae128eab00d446482268d8627e9854fd94 Mon Sep 17 00:00:00 2001
From: Jeremy Magland <jmagland@flatironinstitute.org>
Date: Wed, 24 Jul 2024 10:35:52 -0400
Subject: [PATCH 4/5] Remove unused import

---
 gui/src/app/components/TabWidget.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/gui/src/app/components/TabWidget.tsx b/gui/src/app/components/TabWidget.tsx
index 282269ee..53d9e88c 100644
--- a/gui/src/app/components/TabWidget.tsx
+++ b/gui/src/app/components/TabWidget.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { FunctionComponent, useEffect, useState } from "react";
-import Tabs from "@mui/material/Tabs";
-import Tab from "@mui/material/Tab";
 import Box from "@mui/material/Box";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
+import { FunctionComponent, useState } from "react";
 
 type TabWidgetProps = {
   labels: string[];

From b6477cf8bce9f8af51b574ed75ec7d117c9eae07 Mon Sep 17 00:00:00 2001
From: Jeremy Magland <magland@users.noreply.github.com>
Date: Wed, 24 Jul 2024 11:20:53 -0400
Subject: [PATCH 5/5] initialize tabsThatHaveBeenViewed state

Co-authored-by: Brian Ward <bward@flatironinstitute.org>
---
 gui/src/app/components/TabWidget.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gui/src/app/components/TabWidget.tsx b/gui/src/app/components/TabWidget.tsx
index 53d9e88c..4257292e 100644
--- a/gui/src/app/components/TabWidget.tsx
+++ b/gui/src/app/components/TabWidget.tsx
@@ -17,7 +17,7 @@ const TabWidget: FunctionComponent<TabWidgetProps> = ({ labels, children }) => {
   const [index, setIndex] = useState(0);
   const [tabsThatHaveBeenViewed, setTabsThatHaveBeenViewed] = useState<
     number[]
-  >([]);
+  >([index]);
 
   const handleChange = (_: React.SyntheticEvent, newValue: number) => {
     setTabsThatHaveBeenViewed((prev) => {