diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index f1678adaac0755a2bd1b1936c15354dce2707be6..3671c2a928aebfa9a24e01df509610748c949428 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.
@@ -309,15 +309,15 @@ export function Engineering() {
</p>
<H4 text="Build" id="text"/>
<p>
- The protocol entailed the utilization of varying concentrations of Lipofectamine 3000, specifically 1 µl and 1.5 µl, with a DNA quantity of 1 µg or 0.5 µg. In this phase, we developed the transfection method with calcium chloride (CaCl2) as an alternative to conventional lipofectamine transfection. The aim was to test whether this more cost-effective method offers comparable transfection efficiency. Three different DNA concentrations were used to investigate the effect on transfection efficiency.
+ The protocol entailed the utilization of varying concentrations of Lipofectamine 3000, specifically 1 µl and 1.5 µl, with a DNA quantity of 1 µg or 0.5 µg. In this phase, we developed the transfection method with calcium chloride (CaCl<sub>2</sub>) as an alternative to conventional lipofectamine transfection. The aim was to test whether this more cost-effective method offers comparable transfection efficiency. Three different DNA concentrations were used to investigate the effect on transfection efficiency.
</p>
<H4 text="Test" id="text"/>
<p>
- To enhance transfection efficiency, optimization tests were conducted, in which the quantities of Lipofectamine and DNA were varied. The objective of this iteration was to find the optimal ratio of Lipofectamine 3000 to DNA. To this end, 1 µl and 1.5 µl of Lipofectamine 3000 at a DNA concentration of either 1 µg or 0.5 µg were compared with each other. In the next step, the tests were carried out with the different DNA concentrations using the CaCl2 transfection method. The transfection efficiencies were compared with those from the Lipofectamine transfection to determine whether the new method represents an improvement.
+ To enhance transfection efficiency, optimization tests were conducted, in which the quantities of Lipofectamine and DNA were varied. The objective of this iteration was to find the optimal ratio of Lipofectamine 3000 to DNA. To this end, 1 µl and 1.5 µl of Lipofectamine 3000 at a DNA concentration of either 1 µg or 0.5 µg were compared with each other. In the next step, the tests were carried out with the different DNA concentrations using the CaCl<sub>2</sub> transfection method. The transfection efficiencies were compared with those from the Lipofectamine transfection to determine whether the new method represents an improvement.
</p>
<H4 text="Learn" id="text"/>
<p>
- The experiment demonstrated that a quantity of 1 µl Lipofectamine 3000 was sufficient for successful transfection, and that increasing the quantity does not result in a notable difference. Additionally, the findings indicated that an amount of 1 µg DNA exhibited a higher efficiency than an amount of 0.5 µg DNA. It can be reasoned that additional factors may have contributed to the previously observed decline in transfection efficiency. One potential explanation is that the cells may have been in an excessively high passage level. It became clear from the tests that CaCl2 transfection did not deliver better results than Lipofectamine transfection. On the contrary, the efficiency was significantly lower, although the method is less expensive. This led to the realisation that the CaCl2 technique in this form was not a suitable alternative for our specific requirements.
+ The experiment demonstrated that a quantity of 1 µl Lipofectamine 3000 was sufficient for successful transfection, and that increasing the quantity does not result in a notable difference. Additionally, the findings indicated that an amount of 1 µg DNA exhibited a higher efficiency than an amount of 0.5 µg DNA. It can be reasoned that additional factors may have contributed to the previously observed decline in transfection efficiency. One potential explanation is that the cells may have been in an excessively high passage level. It became clear from the tests that CaCl<sub>2</sub> transfection did not deliver better results than Lipofectamine transfection. On the contrary, the efficiency was significantly lower, although the method is less expensive. This led to the realisation that the CaCl<sub>2</sub> technique in this form was not a suitable alternative for our specific requirements.
</p>
<p>
It can be reasonably deduced that the aforementioned factors may have contributed to the observed decline in transfection efficiency.
diff --git a/src/contents/results.tsx b/src/contents/results.tsx
index ae822f9d6169361c20fc6fe0dce8b1daadab4d2d..508ede79bfce728d27b98968d99957a4aac15220 100644
--- a/src/contents/results.tsx
+++ b/src/contents/results.tsx
@@ -85,7 +85,7 @@ export function Results() {
pic2="https://static.igem.wiki/teams/5247/photos/facs-results-mechanism/bild4-2.png"
/>
<H5 text="Workflow"/>
- <p>HEK cells were thawed and another prelimary test was conducted. In this test two different transfection agents were used (Lipofectamine 3000 & CaCl2) to check which one is better suited for our experiments. The literature uses lipofectamine 3000 but CaCl2 transfection is much cheaper.</p>
+ <p>HEK cells were thawed and another prelimary test was conducted. In this test two different transfection agents were used (Lipofectamine 3000 & CaCl<sub>2</sub>) to check which one is better suited for our experiments. The literature uses lipofectamine 3000 but CaCl<sub>2</sub> transfection is much cheaper.</p>
<H5 text="Conclusion"/>
<p>Both transfections are working out well but the efficiency of the lipofectamine transfection was much higher.</p>
<OneFigure
@@ -97,7 +97,7 @@ export function Results() {
/>
<TwoVertical
- description="Microscopy of HEK293 72h post transfection with CaCl2 with 500 ng, 1000 ng or 1500 ng pZMB938. All transfections show fluorescence signals. BF = Brightfield"
+ description="Microscopy of HEK293 72h post transfection with CaCl<sub>2</sub> with 500 ng, 1000 ng or 1500 ng pZMB938. All transfections show fluorescence signals. BF = Brightfield"
num={6}
bg="white"
alt1=""
diff --git a/src/sidebars/engS.tsx b/src/sidebars/engS.tsx
index 25f6b1d0e325c33d36a6fd9eb7d08da7b1b1469d..95cf1d8ad325a135866acd28d5a0c9c4eb3ba59a 100644
--- a/src/sidebars/engS.tsx
+++ b/src/sidebars/engS.tsx
@@ -9,9 +9,32 @@ export function EngSide(){
let nums = ["rep1", "rep2", "rep3", "rep4", "rep5", "rep6", "trf1", "trf2", "trf3", "trf4", "pe1", "pe2", "pe3", "peg1", "peg2", "peg3", "peg4", "peg5",
"nic1", "nic2", "nic3", "nic4", "nic5", "nic6","del1", "del2", "del3", "del4", "del5"]
useEffect(() => {
- window.addEventListener('scroll', handleScroll);
- return () => window.removeEventListener('scroll', handleScroll);
- }, []);
+ window.addEventListener("scroll", handleScroll);
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, [nums]);
+
+ // Restore active tab on reload
+ useEffect(() => {
+ const params = new URLSearchParams(window.location.search);
+ const tabId = params.get("tab");
+ const subTabId = params.get("subTab");
+
+ if (tabId) {
+ // Find the parent element and mark it as active
+ const parentTab = document.querySelector(`#parent-${tabId}`);
+ if (parentTab) {
+ document.querySelectorAll(".active-sideitem").forEach((el) => el.classList.remove("active-sideitem"));
+ parentTab.classList.add("active-sideitem");
+ }
+ // Optionally expand the subtab if available
+ if (subTabId) {
+ const subTab = document.querySelector(`#${subTabId}`);
+ if (subTab) {
+ subTab.classList.add("highlight-subitem"); // Add a custom class for highlighting subtabs if needed
+ }
+ }
+ }
+ }, []);
const handleScroll = () => {
for(let idx in nums){
/* console.log("We are looking at 'item' = " + nums[idx]) */
diff --git a/src/utils/TabNavigation.ts b/src/utils/TabNavigation.ts
index 2445b1d094dd7358b56739b8caf141cb1396a82c..b85b616bbbf0b914f6b094fc5ef0f07c92822870 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 };
};
-
-