engineering tabs funktionieren auch auf reload

src/contents/engineering.tsx

@@ -29,7 +29,7 @@ export function Engineering() {
         <div className="row mt-4">
           <div className="col">
           <br/> <br/> 
-            <div id="tab-our-cycle" className="enginneeringtab" style={{display: "block"}}>
+            <div id="tab-our-cycle" className="enginneeringtab" style={{display: "none"}}>
                <section > <br id="obenengineering"/>
                   <div className="eng-box box" >
                      <H2 text="Our cycle" id="our-cycle-header"></H2>
@@ -137,7 +137,7 @@ export function Engineering() {
                         </p>
                         <H4 text="Test" id="test-head"/>
                         <p>
-                           We evaluated the functionality of our reporter system by co-transfecting our reporter construct with a pCMV-PE2 prime editor plasmid as well as a plasmid expressing pegRNA that targeted our reporter (see <a onClick={() => goToPagesAndOpenTab('pegrna', '/engineering')}> pegRNA engineering cycle </a>) into HEK293 cells. After 72 h we saw a significant number of cells showing fluorescence. 
+                           We evaluated the functionality of our reporter system by co-transfecting our reporter construct with a pCMV-PE2 prime editor plasmid as well as a plasmid expressing pegRNA that targeted our reporter (see <a onClick={() => goToPagesAndOpenTab('pegrna', '/engineering')}> pegRNA engineering cycle</a>) into HEK293 cells. After 72 h we saw a significant number of cells showing fluorescence. 
                         </p>
                         <p>
                            Additionally, for positive controls we transfected a technical control plasmid as well the unmodified pDAS12124_PEAR-GFP-preedited plasmid, which could be used to determine the transfection efficiency as well as normalize the editing efficiency. As negative controls, our modified plasmid, pCMV-PE2 and the pegRNA plasmid were transfected. The positive controls showed fluorescence, while the negative control did not. 
@@ -256,7 +256,7 @@ export function Engineering() {
                         <H3 text="Test of Lipofectamine 2000" id="trf1head"/>
                         <H4 text="Design" id="text"/>
                         <p>
-                           Before testing any of our mechanistic approaches, we had to examine whether we can facilitate and detect prime editing in the first place. During our research we eventually stumbled upon the PEAR reporter system (see <a onClick={() => goToPagesAndOpenTab('pegrna', '/engineering')}> pegRNA engineering cycle </a>)). The PEAR 2in1 plasmid reporter includes a GFP that is to be edited for sensitive prime editing detection, and a pegRNA expression cassette with a pegRNA targeting the plasmid itself. Having found a system capable of detecting even small-scale prime editing, the next step was to find transfection conditions that would work. In the literature, Lipofectamine is described as a common transfection agent.
+                           Before testing any of our mechanistic approaches, we had to examine whether we can facilitate and detect prime editing in the first place. During our research we eventually stumbled upon the PEAR reporter system (see <a onClick={() => goToPagesAndOpenTab('pegrna', '/engineering')}> pegRNA engineering cycle </a>). The PEAR 2in1 plasmid reporter includes a GFP that is to be edited for sensitive prime editing detection, and a pegRNA expression cassette with a pegRNA targeting the plasmid itself. Having found a system capable of detecting even small-scale prime editing, the next step was to find transfection conditions that would work. In the literature, Lipofectamine is described as a common transfection agent.
                         </p>
                         <p>
                            Transfection with Lipofectamine 2000 was performed in accordance with the Anzalone protocol. However, the result was characterized by insufficient transfection efficiency.

src/utils/TabNavigation.ts

@@ -9,32 +9,61 @@ import { openTabInCollapsible } from './opentabincollapsible';
 // Custom Hook for central tab navigation
 export const useTabNavigation = () => {
   const location = useLocation();
-  const navigate = useNavigate(); 
+  const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState<string | null>(null);
   const [activeSubTab, setActiveSubTab] = useState<string | null>(null);
-  
   const [, setActiveCollapsible] = useState<string | null>(null);
 
-  // tab change and url update
+  // Tab Visibility Handler
+  const updateTabVisibility = (tabId: string | null, subTabId?: string | null) => {
+    document.querySelectorAll('.enginneeringtab').forEach((tab) => {
+    (tab as HTMLElement).style.display = 'none'; // All tabs hidden
+    });
+
+    if (tabId) {
+      const tabElement = document.getElementById(`tab-${tabId}`);
+      if (tabElement) {
+        tabElement.style.display = 'block'; // Show the current tab
+      }
+
+      // Handle nested subtabs
+      if (subTabId) {
+        const subTabElement = document.getElementById(subTabId);
+        if (subTabElement) {
+          subTabElement.style.display = 'block'; // Show subtab
+        }
+      }
+    }
+  };
+
+  // Tab Change and URL Update
   const handleTabChange = (tabId: string, subTabId?: string) => {
     setActiveTab(tabId);
     setActiveSubTab(subTabId || null);
 
-    // updatung the url 
+    // Update URL
     let newUrl = `${location.pathname}?tab=${tabId}`;
     if (subTabId) {
       newUrl += `&subTab=${subTabId}`;
     }
     navigate(newUrl, { replace: true });
 
-  }
+    // Immediately update tab visibility
+    updateTabVisibility(tabId, subTabId);
+  };
+
+  // On Location Change
   useEffect(() => {
-    console.log("Use Effect")
     const params = new URLSearchParams(location.search);
     const tabId = params.get('tab');
     const subTabId = params.get('subTab');
+
+    // Restore visibility
+    updateTabVisibility(tabId, subTabId);
+
+    // Handle scroll or collapsibles
     const collapseId = params.get('collapseId');
-    const scrollToId = params.get('scrollTo'); 
+    const scrollToId = params.get('scrollTo');
     const changeTo = params.get('changeTo');
     const colTab = params.get('colTab');
   //  const navigate = useNavigate();
@@ -43,9 +72,9 @@ export const useTabNavigation = () => {
 
 
      // scrolls to a specific collapsible element
-     if (collapseId) {
+    if (collapseId) {
       setActiveCollapsible(collapseId);
-      handleScroll(collapseId); // This triggers the scroll action
+      handleScroll(collapseId);
     }
     if (colTab && collapseId) {
       setActiveCollapsible(collapseId);
@@ -75,30 +104,26 @@ export const useTabNavigation = () => {
 
     if (scrollToId) {
       const element = document.getElementById(scrollToId);
+      if (element) {
+        const viewportHeight = window.innerHeight;
+        const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
+        const scrollToPosition = targetPosition - viewportHeight / 5 + element.clientHeight / 2;
+        window.scrollTo({ top: scrollToPosition, behavior: 'smooth' });
+      }
+    }
+    if (changeTo) {
+      const element = document.getElementById(changeTo);
       if (element) {
           const viewportHeight = window.innerHeight;
           const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
-          const scrollToPosition = targetPosition - viewportHeight / 5 + element.clientHeight / 2;
+          const scrollToPosition = targetPosition - viewportHeight / 2 + element.clientHeight / 2;
           window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
       }
   }
-  if (changeTo) {
-    const element = document.getElementById(changeTo);
-    if (element) {
-        const viewportHeight = window.innerHeight;
-        const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
-        const scrollToPosition = targetPosition - viewportHeight / 2 + element.clientHeight / 2;
-        window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
-    }
-}
-
-
 
     setActiveTab(tabId);
     setActiveSubTab(subTabId || null);
   }, [location.search]);
 
-  return { activeTab, activeSubTab, handleTabChange};
+  return { activeTab, activeSubTab, handleTabChange };
 };
-
-