From 0c4ee358e475983e07ae471c3e54b1a37945cb32 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <lsanfilippo@techfak.uni-bielefeld.de>
Date: Thu, 28 Nov 2024 16:32:28 +0100
Subject: [PATCH] engineering tabs funktionieren auch auf reload
---
src/contents/engineering.tsx | 6 +--
src/utils/TabNavigation.ts | 73 ++++++++++++++++++++++++------------
2 files changed, 52 insertions(+), 27 deletions(-)
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index 8486eae..3671c2a 100644
--- a/src/contents/engineering.tsx
+++ b/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.
diff --git a/src/utils/TabNavigation.ts b/src/utils/TabNavigation.ts
index 2445b1d..b85b616 100644
--- a/src/utils/TabNavigation.ts
+++ b/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 };
};
-
-
--
GitLab