Skip to content
Snippets Groups Projects
Commit cf8ce2c5 authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

subsection sidebar fiy

parent 58df3a8b
No related branches found
No related tags found
No related merge requests found
Pipeline #430087 passed
......@@ -10,116 +10,108 @@ import { ButtonRowTabs } from "../components/Tabs";
import PieChart from "../components/Graph";
import PreCyse from "../components/precyse";
import { useNavigateTabs } from "../utils/navigation";
import { Section, Subesction } from "../components/sections";
export function Description() {
useNavigateTabs();
return (
<div className="row mt-4">
<div className="col">
<div className="col">
<section className="section">
<H2 id="Abstract" text="Abstract"/>
<Section title="Abstract" id="Abstract">
<p id="obenindescription" >We are proud to introduce our next-generation prime editing technology <PreCyse/> . We aim to develop an innovative gene therapy against cystic fibrosis, tackling the most common mutation ΔF508 of the Cystic Fibrosis Transmembrane Conductance Regulator (CFTR) gene. We optimize lipid nanoparticles (LNPs) for the efficient and cell-specific delivery of our therapeutic mRNA. Current treatment strategies are limited in terms of speed, precision and effectiveness, often failing to achieve long-lasting improvements. In addition, high costs and limited accessibility of pharmaceuticals contribute to adverse prognosis of many patients. We want to develop a monthly applied which represents a cure that is more advanced and user-friendly compared to other medications due to its longer lasting time, lowering the frequency of use. </p>
</section>
</div>
<div className="col">
<section className="section">
<H2 text="Cystic Fibrosis" id="Cystic-Fibrosis"/>
<div id="CF1"><h3>General</h3> </div>
<div className="row align-items-center">
<div className="col">
<p data-aos="zoom-y-out" >Cystic fibrosis (CF) is the most common life-limiting genetic disorder in the Caucasian population. In Europe, CF affecting about 1 in 3,000 newborns
<SupScrollLink label="1"/>.</p>
<p> It is caused by mutations in the CFTR gene, which controls ions and water movement in cells. This leads to thick mucus, clogging airways, and frequent infections. The defective CFTR protein impacts the respiratory and digestive systems, causing chronic lung infections, breathing difficulties, and malnutrition. CF's severity varies, but it reduces life quality and expectancy. There are over 1,700 CFTR mutations; the ΔF508 mutation is most common, present in 70% of cases. It prevents proper protein folding, affecting its function. </p>
<p><LoremMedium/></p>
</div>
<div className="row-if-small col-2 ">
<Circle text="1:3000 newborns worldwide"/>
<Circle text="x:y newborns in Germany"/>
<Circle text="kosten"/>
</div>
{/* <Linear
xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
series={[
{
data: [2, 5.5, 2, 8.5, 1.5, 5],
},
]}
width={500}
height={300}
/> */}
</div>
<div className="col">
<img src="https://static.igem.wiki/teams/5247/charts-maps/cfper10-000.png"></img>
</div>
<div id="CF2"><h3>CFTR</h3> </div>
<div className="rowalign-items-center">
<div className="full-small col-2">
<img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
<img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</Section>
<Section title="Cystic Fibrosis" id="Cystic Fibrosis">
<Subesction title="Overview" id="Cystic Fibrosis1">
<div className="row align-items-center">
<div className="col">
<p data-aos="zoom-y-out" >Cystic fibrosis (CF) is the most common life-limiting genetic disorder in the Caucasian population. In Europe, CF affecting about 1 in 3,000 newborns
<SupScrollLink label="1"/>.</p>
<p> It is caused by mutations in the CFTR gene, which controls ions and water movement in cells. This leads to thick mucus, clogging airways, and frequent infections. The defective CFTR protein impacts the respiratory and digestive systems, causing chronic lung infections, breathing difficulties, and malnutrition. CF's severity varies, but it reduces life quality and expectancy. There are over 1,700 CFTR mutations; the ΔF508 mutation is most common, present in 70% of cases. It prevents proper protein folding, affecting its function. </p>
<p><LoremMedium/></p>
</div>
<div className="row-if-small col-2 ">
<Circle text="1:3000 newborns worldwide"/>
<Circle text="x:y newborns in Germany"/>
<Circle text="kosten"/>
</div>
{/* <Linear
xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
series={[
{
data: [2, 5.5, 2, 8.5, 1.5, 5],
},
]}
width={500}
height={300}
/> */}
</div>
<div className="col">
<p>Text about CFTR <LoremMedium/></p>
<img src="https://static.igem.wiki/teams/5247/charts-maps/cfper10-000.png"></img>
</div>
</div>
<div id="CF3"><h3>ΔF508</h3> </div>
<p>A multitude of mutations in the CFTR gene, exceeding 1,000, are responsible for the development of cystic
fibrosis. The most prevalent variant is F508del, observed in approximately 70% of affected individuals of
Caucasian descent in Canada, Northern Europe, and the United States<SupScrollLink label="14"/>. It is estimated that around 90% of
the European population and people of European heritage with cystic fibrosis carry at least one F508del
variant <SupScrollLink label="15"/><sup>,</sup><SupScrollLink label="16"/>. Analyses have demonstrated that the F508del mutation originated in Western Europe at least
5,000 years ago <SupScrollLink label="15"/>. </p>
<p>It is a deletion of the three nucleotides "CTT" at position 508, which removes the phenylalanine residue
without causing a frameshift. This deletion leads to defects in the kinetic and thermodynamic folding
of the NBD1 domain <SupScrollLink label="16"/>. However, this not only leads to misfolding of CFTR but also to defects in
trafficking and premature degradation, resulting in reduced surface expression of CFTR <SupScrollLink label="17"/>. </p>
<img src="https://static.igem.wiki/teams/5247/charts-maps/cfper10-000.png"/>
<div id="CF4"><h3>Symptoms</h3> </div>
<p>Text about symptoms</p>
<Collapsible id="symptoms-collapsible" title="How the symptoms affect different parts of the body" > Child </Collapsible>
<div id="CF5"><h3>Diagnosis</h3> </div>
<p>About the ways one can be diagnosed <LoremMedium/></p>
<div className="row align-items-center">
<div className="col" >
<img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</Subesction>
<Subesction title="The CFTR Protein" id="Cystic Fibrosis2">
<div className="rowalign-items-center">
<div className="full-small col-2">
<img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
<img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
<div className="col">
<p>Text about CFTR <LoremMedium/></p>
</div>
</div>
<div className="col" >
How newbornscreening affected the numbers.
<LoremMedium/>
</Subesction>
<Subesction title="ΔF508" id="Cystic Fibrosis3">
<p>A multitude of mutations in the CFTR gene, exceeding 1,000, are responsible for the development of cystic
fibrosis. The most prevalent variant is F508del, observed in approximately 70% of affected individuals of
Caucasian descent in Canada, Northern Europe, and the United States<SupScrollLink label="14"/>. It is estimated that around 90% of
the European population and people of European heritage with cystic fibrosis carry at least one F508del
variant <SupScrollLink label="15"/><sup>,</sup><SupScrollLink label="16"/>. Analyses have demonstrated that the F508del mutation originated in Western Europe at least
5,000 years ago <SupScrollLink label="15"/>. </p>
<p>It is a deletion of the three nucleotides "CTT" at position 508, which removes the phenylalanine residue
without causing a frameshift. This deletion leads to defects in the kinetic and thermodynamic folding
of the NBD1 domain <SupScrollLink label="16"/>. However, this not only leads to misfolding of CFTR but also to defects in
trafficking and premature degradation, resulting in reduced surface expression of CFTR <SupScrollLink label="17"/>. </p>
<img src="https://static.igem.wiki/teams/5247/charts-maps/cfper10-000.png"/>
</Subesction>
<Subesction title="Symptoms" id="Cystic Fibrosis4">
<p>Text about symptoms</p>
<Collapsible id="symptoms-collapsible" title="How the symptoms affect different parts of the body" > Child </Collapsible>
<div id="CF5"><h3>Diagnosis</h3> </div>
<p>About the ways one can be diagnosed <LoremMedium/></p>
<div className="row align-items-center">
<div className="col" >
<img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
<div className="col" >
How newbornscreening affected the numbers.
<LoremMedium/>
</div>
</div>
</div>
<div id="CF6"><h3>Treatment</h3> </div>
<img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
<Collapsible id="drugs-collapsible" title="Different types of drugs" >
<TabButtonRow data={medibuttonrowdata} opentype="meditabs" closing=""/>
<ButtonRowTabs data={medibuttonrowdata} cla="meditabs"/>
</Collapsible>
<p>Why we still need other options</p>
<img src="https://static.igem.wiki/teams/5247/charts-maps/cfper10-000.png"/>
</section>
</div>
<div className="col">
<section className="section">
<H2 id="Our-motivation" text="Our motivation"></H2>
</Subesction>
<Subesction title="Treatment" id="Cystic Fibrosis5">
<img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
<Collapsible id="drugs-collapsible" title="Different types of drugs" >
<TabButtonRow data={medibuttonrowdata} opentype="meditabs" closing=""/>
<ButtonRowTabs data={medibuttonrowdata} cla="meditabs"/>
</Collapsible>
<p>Why we still need other options</p>
<img src="https://static.igem.wiki/teams/5247/charts-maps/cfper10-000.png"/>
</Subesction>
</Section>
<Section title="Our Motivation" id="Our Motivation">
<p>We chose to focus on CF and specifically the ΔF508 mutation due to its prevalence and the severe impact it has on patients' lives. Additionally, our team includes members who have close friends affected by this condition, giving us a personal connection and a strong motivation to find a solution. By targeting the ΔF508 mutation, we aim to develop a therapy that could potentially, not only benefit many CF patients and make a significant improvement in their lives, but also can serve as a template, which research groups can use to target other genetic diseases. </p>
<div className="row align-items-center">
<div className="col" >
</div>
<div className="col" >
<img className="img" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
<div className="row align-items-center">
<div className="col" >
</div>
<div className="col" >
<img className="img" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
<p>Max</p>
</section>
</div>
<div className="col">
<section className="section">
<H2 id="Approach" text="Approach"></H2>
</Section>
<Section title="Approach" id="Approach">
<p>To correct the mutation, we are utilizing Prime Editing technologies. Prime Editing is a genome editing technique that allows precise DNA modifications without causing double-strand breaks<SupScrollLink label="2"/>. Structurally, the Prime Editing complex consists of a Cas9 endonuclease fused to a reverse transcriptase (RT) and guided by a pegRNA, which directs the complex to the target site in the genome. </p>
<InfoBox title="Prime Editing" id="prime-editing">
<details>
......@@ -136,11 +128,18 @@ export function Description() {
<div className="img-right img-half col"><Complex></Complex></div>
</div>
<Collapsible id="fanzorcas-collapsible" title="Cas vs. Fanzor"> child </Collapsible>
<Collapsible id="fanzorcas-collapsible" title="Cas vs. Fanzor"> child </Collapsible>
<p>The pegRNA is optimized via an extension by a stem loop, which stabilizes the RNA by protecting it from RNases and serves as a binding site for the MCP, which also supports the secondary RNA structure. Additionally, the pegRNA contains a riboswitch, a sodium ion-controlled regulator that switches off the complex. This represents a major biosafety feature in that the complex is switched off after successful DNA editing and the subsequent increased influx of chloride ions into the cell. The pegRNA is combined with an optimized sgRNA resulting in higher on-target effect. Overall, its optimization leads to a longer shelf life and an increase in the biosafety of the complex. </p>
<InfoBox title="Riboswitch" id="riboswitch">
<InfoBox title="Riboswitch" id="riboswitch">
About the Riboswitch
</InfoBox>
</Section>
<div className="col">
<section className="section">
<H2 id="Approach" text="Approach"></H2>
</section>
</div>
......
import { useEffect } from "react";
import { ScrollLink } from "../components/ScrollLink";
import { Highlight } from "../utils/Highlight-functions.ts";
import { openAndScroll, openAndCloseAndScroll } from "../utils/openAndScroll";
import { createSidebar } from "../utils/createSidebar";
export function DescSidebar(){
let nums = [ "del1"]
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const handleScroll = () => {
for(let idx in nums){
/* console.log("We are looking at 'item' = " + nums[idx]) */
const item = nums[idx];
let ind = nums.findIndex((e) => e == item)
/* console.log("ind is: " + ind) */
let subdi = "subtitle" + ind
/* console.log("subdi is: " + subdi)
console.log("we use " + document.getElementById(item)?.id + " and " + document.getElementById(subdi)?.id) */
Highlight({el: document.getElementById(item)!}, {subtitle: document.getElementById(subdi)!});
}
/* */
}
/* console.log(nums) */
let sidebar = createSidebar(tabs);
return(
<div className="col-2 d-none d-lg-block">
<br/>
<div className="sticky-top">
<nav className="sidebar">
<div>
<a onClick={openAndCloseAndScroll({ it: "tab-Abstract", scrollTarget: "Abstract", close: ["Cystic-Fibrosis"] })}>
<div className="detail-sideitem">
<div id="parent-Abstract" className="sideitem">
<summary>Abstract</summary>
</div>
</div>
</a>
</div>
<div>
{/* Fznktioniert: <a onClick={openThem({it: "tab-Cystic-Fibrosis"})} > */}
<div className="detail-sideitem">
<div id="parent-Cystic-Fibrosis" className="sideitem">
<a onClick={openAndScroll({ it: "tab-Cystic-Fibrosis", scrollTarget: "Cystic-Fibrosis" })}><summary>Cystic Fibrosis</summary></a>
<span id="tab-Cystic-Fibrosis" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><ScrollLink label="General" targetId="CF1"/></li>
<li><ScrollLink label="CFTR" targetId="CF2"/></li>
<li><ScrollLink label="ΔF508" targetId="CF3"/></li>
<li><ScrollLink label="Symptoms" targetId="CF4"/></li>
<li><ScrollLink label="Diagnosis" targetId="CF5"/></li>
<li><ScrollLink label="Treatment" targetId="CF6"/></li>
</ul>
</span>
</div>
</div>
</div>
<div>
<a onClick={openAndCloseAndScroll({it: "tab-Our-motivation", scrollTarget: "Our-motivation", close: ["Cystic-Fibrosis"]})}>
<div className="detail-sideitem">
<div id="parent-pe-systems" className="sideitem">
<summary>Our Motivation</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndCloseAndScroll({it: "tab-Our-motivation", scrollTarget: "Approach", close: ["Cystic-Fibrosis"]})}>
<div className="detail-sideitem">
<div id="parent-nikase" className="sideitem">
<summary>Approach</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndCloseAndScroll({it: "tab-Our-motivation", scrollTarget: "Delivery", close: ["Cystic-Fibrosis"]})}>
<div className="detail-sideitem">
<div id="parent-delivery" className="sideitem">
<summary>Delivery</summary>
</div>
</div>
</a>
</div> {/* */}
<div>
<a onClick={openAndCloseAndScroll({it: "tab-Our-motivation", scrollTarget: "Our-vision", close: ["Cystic-Fibrosis"]})}>
<div className="detail-sideitem">
<div id="parent-pegrna" className="sideitem">
<summary>Our vision</summary>
</div>
</div>
</a>
</div>
<div>
<a onClick={openAndCloseAndScroll({it: "tab-Our-motivation", scrollTarget: "References", close: ["Cystic-Fibrosis"]})}>
<div className="detail-sideitem">
<div id="parent-references" className="sideitem">
<summary>References</summary>
</div>
</div>
</a>
</div>
</nav>
<br/>
<div className="col" style={{display: "flex", alignItems: "right"}}>
<a href='#' className="backtotop">
Back to Top &#8593;
</a>
</div>
</div>
{sidebar}
</div>
)
}
const tabs = [
{ tab: "Abstract" },
{ tab: "Cystic Fibrosis", subtabs: ["Overview", "The CFTR Protein", "ΔF508", "Symptoms", "Diagnosis", "Treatment"]},
{tab: "Our Motivation"}
];
......@@ -146,10 +146,13 @@ export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string>
const numsSub: string[] = [];
tabs.forEach(tab => {
let count = 1;
numsBig.push(`${tab.tab}H`); // z.B. RoleH, ChecksH
if (tab.subtabs) {
tab.subtabs.forEach((index) => {
numsSub.push(`${tab.tab}${index + 1}`); // z.B. Role1H, Role2H
tab.subtabs.forEach((_index) => {
// console.log(index)
numsSub.push(`${tab.tab}${count}`); // z.B. Role1H, Role2H
count += 1;
});
}
});
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment