src/sources/eng-peg-sources.tsx

+import BibtexParser from "../components/makeSources";
+
+export default function EngPegsources(){
+    return (
+        <div>
+          <BibtexParser bibtexSources={bibtexSources} start={18} />
+        </div>
+      );
+}
+
+
+const bibtexSources = [
+`
+  @article{Chow_Chen_Shen_Chen_2021,
+    title        = {A web tool for the design of prime-editing guide RNAs},
+    author       = {Chow, Ryan D. and Chen, Jennifer S. and Shen, Johanna and Chen, Sidi},
+    year         = 2021,
+    month        = feb,
+    journal      = {Nature Biomedical Engineering},
+    publisher    = {Nature Publishing Group},
+    volume       = 5,
+    number       = 2,
+    pages        = {190–194},
+    doi          = {10.1038/s41551-020-00622-8},
+    issn         = {2157-846X},
+    rights       = {2020 The Author(s), under exclusive licence to Springer Nature Limited},
+    abstractnote = {Prime editing enables diverse genomic alterations to be written into target sites without requiring double-strand breaks or donor templates. The design of prime-editing guide RNAs (pegRNAs), which must be customized for each edit, can however be complex and time consuming. Compared with single guide RNAs (sgRNAs), pegRNAs have an additional 3′ extension composed of a primer binding site and a reverse-transcription template. Here we report a web tool, which we named pegFinder (http://pegfinder.sidichenlab.org), for the rapid design of pegRNAs from reference and edited DNA sequences. pegFinder can incorporate sgRNA on-target and off-target scoring predictions into its ranking system, and nominates secondary nicking sgRNAs for increasing editing efficiency. CRISPR-associated protein 9 variants with expanded targeting ranges are also supported. To facilitate downstream experimentation, pegFinder produces a comprehensive table of candidate pegRNAs, along with oligonucleotide sequences for cloning.},
+    language     = {en}
+  }
+`,`
+  @article{Anzalone_Randolph_Davis_Sousa_Koblan_Levy_Chen_Wilson_Newby_Raguram_2019,
+    title        = {Search-and-replace genome editing without double-strand breaks or donor DNA},
+    author       = {Anzalone, Andrew V. and Randolph, Peyton B. and Davis, Jessie R. and Sousa, Alexander A. and Koblan, Luke W. and Levy, Jonathan M. and Chen, Peter J. and Wilson, Christopher and Newby, Gregory A. and Raguram, Aditya and Liu, David R.},
+    year         = 2019,
+    month        = dec,
+    journal      = {Nature},
+    publisher    = {Nature Publishing Group},
+    volume       = 576,
+    number       = 7785,
+    pages        = {149–157},
+    doi          = {10.1038/s41586-019-1711-4},
+    issn         = {1476-4687},
+    rights       = {2019 The Author(s), under exclusive licence to Springer Nature Limited},
+    abstractnote = {Most genetic variants that contribute to disease1 are challenging to correct efficiently and without excess byproducts2–5. Here we describe prime editing, a versatile and precise genome editing method that directly writes new genetic information into a specified DNA site using a catalytically impaired Cas9 endonuclease fused to an engineered reverse transcriptase, programmed with a prime editing guide RNA (pegRNA) that both specifies the target site and encodes the desired edit. We performed more than 175 edits in human cells, including targeted insertions, deletions, and all 12 types of point mutation, without requiring double-strand breaks or donor DNA templates. We used prime editing in human cells to correct, efficiently and with few byproducts, the primary genetic causes of sickle cell disease (requiring a transversion in HBB) and Tay–Sachs disease (requiring a deletion in HEXA); to install a protective transversion in PRNP; and to insert various tags and epitopes precisely into target loci. Four human cell lines and primary post-mitotic mouse cortical neurons support prime editing with varying efficiencies. Prime editing shows higher or similar efficiency and fewer byproducts than homology-directed repair, has complementary strengths and weaknesses compared to base editing, and induces much lower off-target editing than Cas9 nuclease at known Cas9 off-target sites. Prime editing substantially expands the scope and capabilities of genome editing, and in principle could correct up to 89% of known genetic variants associated with human diseases.},
+    language     = {en}
+  }
+`,`
+@misc{Doman2024,
+	title        = {Prime Editing Webinar},
+	author       = {Jordan Doman},
+	year         = 2024,
+	url          = {https://www.youtube.com/watch?v=0Z_ztvkvKUA},
+	note         = {Accessed: May 2024},
+	howpublished = {YouTube}
+}
+`,`
+  @article{Galietta_Haggie_Verkman_2001,
+    title        = {Green fluorescent protein-based halide indicators with improved chloride and iodide affinities},
+    author       = {Galietta, Luis J.V and Haggie, Peter M and Verkman, A.s},
+    year         = 2001,
+    journal      = {FEBS Letters},
+    volume       = 499,
+    number       = 3,
+    pages        = {220–224},
+    doi          = {10.1016/S0014-5793(01)02561-3},
+    issn         = {1873-3468},
+    rights       = {FEBS Letters 499 (2001) 1873-3468 © 2015 Federation of European Biochemical Societies},
+    abstractnote = {The green fluorescent protein YFP-H148Q is sensitive to halides by a mechanism involving halide binding and a shift in pK a. However, a limitation of YFP-H148Q is its low halide sensitivity, with K d>100 mM for Cl−. Indicators with improved sensitivities are needed for cell transport studies, particularly in drug discovery by high-throughput screening, and for measurement of Cl− concentration in subcellular organelles. YFP-H148Q libraries were generated in which pairs of residues in the vicinity of the halide binding site were randomly mutated. An automated procedure was developed to screen bacterial colonies for improved halide sensitivity. Analysis of 1536 clones revealed improved anion sensitivities with K d down to 2 mM for I− (I152L), 40 mM for Cl− (V163S), and 10 mM for NO3 − (I152L). The anion-sensitive mechanism of these indicators was established and their utility in cells was demonstrated using transfected cells expressing the  Cystic Fibrosis transmembrane conductance regulator chloride channel.},
+    language     = {en}
+  }
+`,`
+  @article{Bulcaen_Kortleven_Liu_Maule_Dreano_Kelly_Ensinck_Thierie_Smits_Ciciani_2024,
+    title        = {Prime editing functionally corrects  Cystic Fibrosis-causing CFTR mutations in human organoids and airway epithelial cells},
+    author       = {Bulcaen, Mattijs and Kortleven, Phéline and Liu, Ronald B. and Maule, Giulia and Dreano, Elise and Kelly, Mairead and Ensinck, Marjolein M. and Thierie, Sam and Smits, Maxime and Ciciani, Matteo and Hatton, Aurelie and Chevalier, Benoit and Ramalho, Anabela S. and Casadevall i Solvas, Xavier and Debyser, Zeger and Vermeulen, François and Gijsbers, Rik and Sermet-Gaudelus, Isabelle and Cereseto, Anna and Carlon, Marianne S.},
+    year         = 2024,
+    month        = may,
+    journal      = {Cell Reports Medicine},
+    pages        = 101544,
+    doi          = {10.1016/j.xcrm.2024.101544},
+    issn         = {2666-3791},
+    abstractnote = {Prime editing is a recent, CRISPR-derived genome editing technology capable of introducing precise nucleotide substitutions, insertions, and deletions. Here, we present prime editing approaches to correct L227R- and N1303K-CFTR, two mutations that cause  Cystic Fibrosis and are not eligible for current market-approved modulator therapies. We show that, upon DNA correction of the CFTR gene, the complex glycosylation, localization, and, most importantly, function of the CFTR protein are restored in HEK293T and 16HBE cell lines. These findings were subsequently validated in patient-derived rectal organoids and human nasal epithelial cells. Through analysis of predicted and experimentally identified candidate off-target sites in primary stem cells, we confirm previous reports on the high prime editor (PE) specificity and its potential for a curative CF gene editing therapy. To facilitate future screening of genetic strategies in a translational CF model, a machine learning algorithm was developed for dynamic quantification of CFTR function in organoids (DETECTOR: “detection of targeted editing of CFTR in organoids”).}
+  }
+`,`
+  @article{Renz_Valdivia-Francia_Sendoel_2020,
+    title        = {Some like it translated: small ORFs in the 5′UTR},
+    author       = {Renz, Peter F. and Valdivia-Francia, Fabiola and Sendoel, Ataman},
+    year         = 2020,
+    month        = nov,
+    journal      = {Experimental Cell Research},
+    volume       = 396,
+    number       = 1,
+    pages        = 112229,
+    doi          = {10.1016/j.yexcr.2020.112229},
+    issn         = {0014-4827},
+    abstractnote = {The 5′ untranslated region (5′UTR) is critical in determining post-transcriptional control, which is partly mediated by short upstream open reading frames (uORFs) present in half of mammalian transcripts. uORFs are generally considered to provide functionally important repression of the main-ORF by engaging initiating ribosomes, but under specific environmental conditions such as cellular stress, uORFs can become essential to activate the translation of the main coding sequence. In addition, a growing number of uORF-encoded bioactive microproteins have been described, which have the potential to significantly increase cellular protein diversity. Here we review the diverse cellular contexts in which uORFs play a critical role and discuss the molecular mechanisms underlying their function and regulation. The progress over the last decades in dissecting uORF function suggests that the 5′UTR remains an exciting frontier towards understanding how the cellular proteome is shaped in health and disease.}
+  }
+`,`
+  @article{Liang_He_Zhao_Zhu_Hu_Liu_Gao_Liu_Zhang_Qiu_2024,
+    title        = {Prime editing using CRISPR-Cas12a and circular RNAs in human cells},
+    author       = {Liang, Ronghong and He, Zixin and Zhao, Kevin Tianmeng and Zhu, Haocheng and Hu, Jiacheng and Liu, Guanwen and Gao, Qiang and Liu, Meiyan and Zhang, Rui and Qiu, Jin-Long and Gao, Caixia},
+    year         = 2024,
+    month        = jan,
+    journal      = {Nature Biotechnology},
+    doi          = {10.1038/s41587-023-02095-x},
+    issn         = {1087-0156, 1546-1696},
+    url          = {https://www.nature.com/articles/s41587-023-02095-x},
+    language     = {en}
+  }
+`
+]
\ No newline at end of file

src/sources/eng-reporter-sources.tsx

+import BibtexParser from "../components/makeSources";
+
+export default function EngRepsources(){
+    return (
+        <div>
+          <BibtexParser bibtexSources={bibtexSources} />
+        </div>
+      );
+}
+
+
+const bibtexSources = [
+`
+@article{Heim_Prasher_Tsien_1994,
+	title        = {Wavelength mutations and posttranslational autoxidation of green fluorescent protein.},
+	author       = {Heim, R and Prasher, D C and Tsien, R Y},
+	year         = 1994,
+	month        = dec,
+	journal      = {Proceedings of the National Academy of Sciences},
+	publisher    = {Proceedings of the National Academy of Sciences},
+	volume       = 91,
+	number       = 26,
+	pages        = {12501–12504},
+	doi          = {10.1073/pnas.91.26.12501},
+	abstractnote = {The green fluorescent protein (GFP) of the jellyfish Aequorea victoria is an unusual protein with strong visible absorbance and fluorescence from a p-hydroxybenzylidene-imidazolidinone chromophore, which is generated by cyclization and oxidation of the protein’s own Ser-Tyr-Gly sequence at positions 65-67. Cloning of the cDNA and heterologous expression of fluorescent protein in a wide variety of organisms indicate that this unique posttranslational modification must be either spontaneous or dependent only on ubiquitous enzymes and reactants. We report that formation of the final fluorophore requires molecular oxygen and proceeds with a time constant (approximately 4 hr at 22 degrees C and atmospheric pO2) independent of dilution, implying that the oxidation does not require enzymes or cofactors. GFP was mutagenized and screened for variants with altered spectra. The most striking mutant fluoresced blue and contained histidine in place of Tyr-66. The availability of two visibly distinct colors should significantly extend the usefulness of GFP in molecular and cell biology by enabling in vivo visualization of differential gene expression and protein localization and measurement of protein association by fluorescence resonance energy transfer.}
+}
+`,`
+  @article{Simon,
+    title        = {PEAR, a flexible fluorescent reporter for the identification and enrichment of successfully prime edited cells},
+    author       = {Simon, Dorottya Anna and Tálas, András and Kulcsár, Péter István and Biczók, Zsuzsanna and Krausz, Sarah Laura and Várady, György and Welker, Ervin},
+    year         = 2022,
+    month        = feb,
+    journal      = {eLife},
+    publisher    = {eLife Sciences Publications, Ltd},
+    volume       = 11,
+    pages        = {e69504},
+    doi          = {10.7554/eLife.69504},
+    issn         = {2050-084X},
+    abstractnote = {Prime editing is a recently developed CRISPR/Cas9 based gene engineering tool that allows the introduction of short insertions, deletions, and substitutions into the genome. However, the efficiency of prime editing, which typically achieves editing rates of around 10%–30%, has not matched its versatility. Here, we introduce the prime editor activity reporter (PEAR), a sensitive fluorescent tool for identifying single cells with prime editing activity. PEAR has no background fluorescence and specifically indicates prime editing events. Its design provides apparently unlimited flexibility for sequence variation along the entire length of the spacer sequence, making it uniquely suited for systematic investigation of sequence features that influence prime editing activity. The use of PEAR as an enrichment marker for prime editing can increase the edited population by up to 84%, thus significantly improving the applicability of prime editing for basic research and biotechnological applications.},
+    editor       = {Lapinaite, Audrone and Stainier, Didier YR and Hamilton, Jennifer R}
+  }
+`
+]
\ No newline at end of file

src/sources/eng-trf-sources.tsx

+import BibtexParser from "../components/makeSources";
+
+export default function EngTrfsources(){
+    return (
+        <div>
+          <BibtexParser bibtexSources={bibtexSources} start={3} />
+        </div>
+      );
+}
+
+
+const bibtexSources = [
+  `@article{Graham_Smiley_Russell_Nairn_1977,
+    title        = {Characteristics of a Human Cell Line Transformed by DNA from Human Adenovirus Type 5},
+    author       = {Graham, F. L. and Smiley, J. and Russell, W. C. and Nairn, R.},
+    year         = 1977,
+    journal      = {Journal of General Virology},
+    publisher    = {Microbiology Society,},
+    volume       = 36,
+    number       = 1,
+    pages        = {59–72},
+    doi          = {10.1099/0022-1317-36-1-59},
+    issn         = {1465-2099},
+    abstractnote = {SUMMARY Human embryonic kidney cells have been transformed by exposing cells to sheared fragments of adenovirus type 5 DNA. The transformed cells (designated 293 cells) exhibited many of the characteristics of transformation including the elaboration of a virus-specific tumour antigen. Analysis of the polypeptides synthesized in the 293 cells by labelling with 35S-methionine and SDS PAGE showed a variable pattern of synthesis, different in a number of respects from that seen in other human cells. On labelling the surface of cells by lactoperoxidase catalysed radio-iodination, the absence of a labelled polypeptide analogous to the 250 K (LETS) glycoprotein was noted. Hybridization of labelled cellular RNA with restriction fragments of adenovirus type 5 DNA indicated transcription of a portion of the adenovirus genome at the conventional left hand end.}
+  }`,
+  `@article{Simon,
+    title        = {PEAR, a flexible fluorescent reporter for the identification and enrichment of successfully prime edited cells},
+    author       = {Simon, Dorottya Anna and Tálas, András and Kulcsár, Péter István and Biczók, Zsuzsanna and Krausz, Sarah Laura and Várady, György and Welker, Ervin},
+    year         = 2022,
+    month        = feb,
+    journal      = {eLife},
+    publisher    = {eLife Sciences Publications, Ltd},
+    volume       = 11,
+    pages        = {e69504},
+    doi          = {10.7554/eLife.69504},
+    issn         = {2050-084X},
+    abstractnote = {Prime editing is a recently developed CRISPR/Cas9 based gene engineering tool that allows the introduction of short insertions, deletions, and substitutions into the genome. However, the efficiency of prime editing, which typically achieves editing rates of around 10%–30%, has not matched its versatility. Here, we introduce the prime editor activity reporter (PEAR), a sensitive fluorescent tool for identifying single cells with prime editing activity. PEAR has no background fluorescence and specifically indicates prime editing events. Its design provides apparently unlimited flexibility for sequence variation along the entire length of the spacer sequence, making it uniquely suited for systematic investigation of sequence features that influence prime editing activity. The use of PEAR as an enrichment marker for prime editing can increase the edited population by up to 84%, thus significantly improving the applicability of prime editing for basic research and biotechnological applications.},
+    editor       = {Lapinaite, Audrone and Stainier, Didier YR and Hamilton, Jennifer R}
+  }`,
+  `@article{Anzalone_Randolph_Davis_Sousa_Koblan_Levy_Chen_Wilson_Newby_Raguram_2019,
+    title        = {Search-and-replace genome editing without double-strand breaks or donor DNA},
+    author       = {Anzalone, Andrew V. and Randolph, Peyton B. and Davis, Jessie R. and Sousa, Alexander A. and Koblan, Luke W. and Levy, Jonathan M. and Chen, Peter J. and Wilson, Christopher and Newby, Gregory A. and Raguram, Aditya and Liu, David R.},
+    year         = 2019,
+    month        = dec,
+    journal      = {Nature},
+    publisher    = {Nature Publishing Group},
+    volume       = 576,
+    number       = 7785,
+    pages        = {149–157},
+    doi          = {10.1038/s41586-019-1711-4},
+    issn         = {1476-4687},
+    rights       = {2019 The Author(s), under exclusive licence to Springer Nature Limited},
+    abstractnote = {Most genetic variants that contribute to disease1 are challenging to correct efficiently and without excess byproducts2–5. Here we describe prime editing, a versatile and precise genome editing method that directly writes new genetic information into a specified DNA site using a catalytically impaired Cas9 endonuclease fused to an engineered reverse transcriptase, programmed with a prime editing guide RNA (pegRNA) that both specifies the target site and encodes the desired edit. We performed more than 175 edits in human cells, including targeted insertions, deletions, and all 12 types of point mutation, without requiring double-strand breaks or donor DNA templates. We used prime editing in human cells to correct, efficiently and with few byproducts, the primary genetic causes of sickle cell disease (requiring a transversion in HBB) and Tay–Sachs disease (requiring a deletion in HEXA); to install a protective transversion in PRNP; and to insert various tags and epitopes precisely into target loci. Four human cell lines and primary post-mitotic mouse cortical neurons support prime editing with varying efficiencies. Prime editing shows higher or similar efficiency and fewer byproducts than homology-directed repair, has complementary strengths and weaknesses compared to base editing, and induces much lower off-target editing than Cas9 nuclease at known Cas9 off-target sites. Prime editing substantially expands the scope and capabilities of genome editing, and in principle could correct up to 89% of known genetic variants associated with human diseases.},
+    language     = {en}
+  }`
+]
\ No newline at end of file

src/sources/entre-sources.tsx

+import BibtexParser from "../components/makeSources";
+
+export default function EntrepreneurSources(){
+    return (
+        <div>
+          <BibtexParser bibtexSources={bibtexSources}  special="ent"/>
+        </div>
+      );
+}
+
+
+const bibtexSources = [
+
+    `
+    @article{GMI2021CysticFibrosis, 
+  
+  title = {Cystic Fibrosis Therapeutics Market Size - By Treatment Method (Medications [Drug Class {CFTR Modulators, Mucolytics, Bronchodilators, Pancreatic Enzyme Supplements}, Route of Administration], Devices), Distribution Channel & Forecast, 2021 - 2027}, 
+  
+  author = {Faizullabhoy, Mariam and Wani, Gauri}, 
+  
+  journal   = {GMI Insights}, 
+  
+  year      = {2021}, 
+  
+  month = {Sep}, 
+  
+  url = {https://www.gminsights.com/industry-analysis/cystic-fibrosis-therapeutics-market}, 
+  
+  note = {Report ID: GMI5118} 
+  
+  } 
+    `,
+    `
+    @article{Fajac2021, 
+  
+    title={Therapeutic Approaches for Patients with Cystic Fibrosis Not Eligible for Current CFTR Modulators}, 
+  
+    author={Fajac, Isabelle and Sermet, Isabelle}, 
+  
+    journal={Cells}, 
+  
+    volume={10}, 
+  
+    number={10}, 
+  
+    year={2021}, 
+  
+    month={Oct}, 
+  
+    doi={10.3390/cells10102793}, 
+  
+    url={https://pubmed.ncbi.nlm.nih.gov/34685773/}, 
+  
+  } 
+    `, 
+    `
+    @misc{ExpertMarketResearch2023, 
+  
+  title = {Cystic Fibrosis Treatment Market Report and Forecast 2024-2032}, 
+  
+  author = {Rahul Gotadki}, 
+  
+  year = {2023}, 
+  
+  month = {Feb}, 
+  
+  url = {https://www.expertmarketresearch.com/reports/cystic-fibrosis-treatment-market}, 
+  
+  note = {ID: MRFR/Pharma/1293-CR} 
+  
+  } 
+    `,
+    `
+    @misc{DeWeerdt2016, 
+  
+  author = {Sarah DeWeerdt}, 
+  
+  title = {Developing gene therapy to treat cystic fibrosis: challenges and successes}, 
+  
+  journal = {The Pharmaceutical Journal}, 
+  
+  year = {2016}, 
+  
+  month = {Jun}, 
+  
+  url = {https://pharmaceutical-journal.com/article/feature/developing-gene-therapy-to-treat-cystic-fibrosis-challenges-and-successes}, 
+  
+  note = {Accessed: 30 Sep 2024} 
+  
+  } 
+    `
+  
+  ]
\ No newline at end of file

src/sources/joshua-inv-sources.tsx

+import BibtexParser from "../components/makeSources";
+
+export default function JoshuaInterviewSources(){
+    return (
+        <div>
+          <BibtexParser bibtexSources={bibtexSources} />
+        </div>
+      );
+}
+
+
+const bibtexSources = [
+` 
+
+@article{eins, 
+
+title = {Prime editing functionally corrects  Cystic Fibrosis-causing CFTR mutations in human organoids and airway epithelial cells}, 
+
+journal = {Cell Reports Medicine}, 
+
+volume = {5}, 
+
+number = {5}, 
+
+pages = {101544}, 
+
+year = {2024}, 
+
+issn = {2666-3791}, 
+
+doi = {https://doi.org/10.1016/j.xcrm.2024.101544}, 
+
+url = {https://www.sciencedirect.com/science/article/pii/S2666379124002349}, 
+
+author = {Mattijs Bulcaen and Phéline Kortleven and Ronald B. Liu and Giulia Maule and Elise Dreano and Mairead Kelly and Marjolein M. Ensinck and Sam Thierie and Maxime Smits and Matteo Ciciani and Aurelie Hatton and Benoit Chevalier and Anabela S. Ramalho and Xavier {Casadevall i Solvas} and Zeger Debyser and François Vermeulen and Rik Gijsbers and Isabelle Sermet-Gaudelus and Anna Cereseto and Marianne S. Carlon},
+
+}`,`
+@article{zewi, 
+
+author = {Teeratakulpisarn, Jamaree and Kosuwon, Pensri and Srinakarin, Jiraporn and Panthongviriyakul, Charnchai and Sutra, Sumitr}, 
+
+year = {2006}, 
+
+month = {11}, 
+
+pages = {1756-61}, 
+
+title = {Cystic  Fibrosis in three northeast Thai infants is CF really a rare disease in the Thai population?}, 
+
+volume = {89}, 
+
+journal = {Journal of the Medical Association of Thailand = Chotmaihet thangphaet} 
+
+} `,`
+
+@article{drei, 
+
+author = {Ahmed, Shakil and Cheok, Gary and Goh, AnneE and Han, Aye and Hong, SJ and Indawati, Wahyuni and Kabir, AR and Kabra, Sushil and Kamalaporn, Harutai and Kim, HyungYoung and Kunling, Shen and Lochindarat, Sorasak and Moslehi, MohammadAshkan and Nathan, AnnaMarie and Ng, Daniel and Phung, NguyenNg and Singh, V and Takase, Masato and Triasih, Rina and Dai, Zen-Kong}, 
+
+year = {2020}, 
+
+month = {01}, 
+
+pages = {8}, 
+
+title = {Cystic  Fibrosis in asia}, 
+
+volume = {4}, 
+
+journal = {Pediatric Respirology and Critical Care Medicine}, 
+
+doi = {10.4103/prcm.prcm_5_20} 
+
+} `,`
+
+@article{vier, 
+
+author = {Bobbo, Khadijatabubakar and Ahmad, Umar and Chau, De-Ming and Nordin, Norshariza and Abdullah, Syahril}, 
+
+year = {2023}, 
+
+month = {05}, 
+
+pages = {103685}, 
+
+title = {A comprehensive review of Cystic Fibrosis in Africa and Asia}, 
+
+volume = {30}, 
+
+journal = {Saudi Journal of Biological Sciences}, 
+
+doi = {10.1016/j.sjbs.2023.103685} 
+
+} `
+]
\ No newline at end of file

src/sources/liu-inv-sources.tsx

+import BibtexParser from "../components/makeSources";
+
+export default function LiuInterviewSources(){
+    return (
+        <div>
+          <BibtexParser bibtexSources={bibtexSources} />
+        </div>
+      );
+}
+
+
+const bibtexSources = [
+` 
+@article{eins,
+title = {Search-and-replace genome editing without double-strand breaks or donor DNA}, 
+volume = {576}, 
+rights = {2019 The Author(s), under exclusive licence to Springer Nature Limited}, 
+ISSN = {1476-4687}, 
+DOI = {10.1038/s41586-019-1711-4}, 
+abstractNote = {Most genetic variants that contribute to disease are challenging to correct efficiently and without excess byproducts. Here we describe prime editing, a versatile and precise genome editing method that directly writes new genetic information into a specified DNA site using a catalytically impaired Cas9 endonuclease fused to an engineered reverse transcriptase, programmed with a prime editing guide RNA (pegRNA) that both specifies the target site and encodes the desired edit. We performed more than 175 edits in human cells, including targeted insertions, deletions, and all 12 types of point mutation, without requiring double-strand breaks or donor DNA templates. We used prime editing in human cells to correct, efficiently and with few byproducts, the primary genetic causes of sickle cell disease and Tay–Sachs disease; to install a protective transversion in PRNP; and to insert various tags and epitopes precisely into target loci. Four human cell lines and primary post-mitotic mouse cortical neurons support prime editing with varying efficiencies. Prime editing shows higher or similar efficiency and fewer byproducts than homology-directed repair, has complementary strengths and weaknesses compared to base editing, and induces much lower off-target editing than Cas9 nuclease at known Cas9 off-target sites. Prime editing substantially expands the scope and capabilities of genome editing, and in principle could correct up to 89% of known genetic variants associated with human diseases.}, 
+number = {7785}, 
+journal = {Nature}, 
+publisher = {Nature Publishing Group}, 
+author = {Anzalone, Andrew V. and Randolph, Peyton B. and Davis, Jessie R. and Sousa, Alexander A. and Koblan, Luke W. and Levy, Jonathan M. and Chen, Peter J. and Wilson, Christopher and Newby, Gregory A. and Raguram, Aditya and Liu, David R.}, 
+year = {2019}, 
+month = {dec}, 
+pages = {149–157}, 
+language = {en}
+}`,`
+
+@article{zwei,
+title = {Phage-assisted evolution and protein engineering yield compact, efficient prime editors}, 
+volume = {186}, 
+ISSN = {0092-8674, 1097-4172}, 
+DOI = {10.1016/j.cell.2023.07.039}, 
+number = {18}, 
+journal = {Cell}, 
+publisher = {Elsevier}, 
+author = {Doman, Jordan L. and Pandey, Smriti and Neugebauer, Monica E. and An, Meirui and Davis, Jessie R. and Randolph, Peyton B. and McElroy, Amber and Gao, Xin D. and Raguram, Aditya and Richter, Michelle F. and Everette, Kelcee A. and Banskota, Samagya and Tian, Kathryn and Tao, Y. Allen and Tolar, Jakub and Osborn, Mark J. and Liu, David R.}, 
+year = {2023}, 
+month = {aug}, 
+pages = {3983-4002.e26}, 
+language = {English}
+}`,`
+
+@article{drei, 
+title = {Phage-assisted continuous and non-continuous evolution}, 
+volume = {15}, 
+rights = {2020 The Author(s), under exclusive licence to Springer Nature Limited}, 
+ISSN = {1750-2799}, 
+DOI = {10.1038/s41596-020-00410-3}, 
+abstractNote = {Directed evolution, which applies the principles of Darwinian evolution to a laboratory setting, is a powerful strategy for generating biomolecules with diverse and tailored properties. This technique can be implemented in a highly efficient manner using continuous evolution, which enables the steps of directed evolution to proceed seamlessly over many successive generations with minimal researcher intervention. Phage-assisted continuous evolution (PACE) enables continuous directed evolution in bacteria by mapping the steps of Darwinian evolution onto the bacteriophage life cycle and allows directed evolution to occur on much faster timescales compared to conventional methods. This protocol provides detailed instructions on evolving proteins using PACE and phage-assisted non-continuous evolution (PANCE) and includes information on the preparation of selection phage and host cells, the assembly of a continuous flow apparatus and the performance and analysis of evolution experiments. This protocol can be performed in as little as 2 weeks to complete more than 100 rounds of evolution (complete cycles of mutation, selection and replication) in a single PACE experiment.}, 
+number = {12}, 
+journal = {Nature Protocols}, 
+publisher = {Nature Publishing Group}, 
+author = {Miller, Shannon M. and Wang, Tina and Liu, David R.}, 
+year = {2020}, 
+month = {dec}, 
+pages = {4101–4127}, 
+language = {en}
+}`,`
+@article{vier, 
+title = {Systematic optimization of prime editing for the efficient functional correction of CFTR F508del in human airway epithelial cells}, 
+rights = {2024 The Author(s)}, 
+ISSN = {2157-846X}, 
+DOI = {10.1038/s41551-024-01233-3}, 
+abstractNote = {Prime editing (PE) enables precise and versatile genome editing without requiring double-stranded DNA breaks. Here we describe the systematic optimization of PE systems to efficiently correct human  Cystic Fibrosis (CF) transmembrane conductance regulator (CFTR) F508del, a three-nucleotide deletion that is the predominant cause of CF. By combining six efficiency optimizations for PE—engineered PE guide RNAs, the PEmax architecture, the transient expression of a dominant-negative mismatch repair protein, strategic silent edits, PE6 variants and proximal ‘dead’ single-guide RNAs—we increased correction efficiencies for CFTR F508del from less than 0.5% in HEK293T cells to 58% in immortalized bronchial epithelial cells (a 140-fold improvement) and to 25% in patient-derived airway epithelial cells. The optimizations also resulted in minimal off-target editing, in edit-to-indel ratios 3.5-fold greater than those achieved by nuclease-mediated homology-directed repair, and in the functional restoration of CFTR ion channels to over 50% of wild-type levels (similar to those achieved via combination treatment with elexacaftor, tezacaftor and ivacaftor) in primary airway cells. Our findings support the feasibility of a durable one-time treatment for CF.}, 
+journal = {Nature Biomedical Engineering}, 
+publisher = {Nature Publishing Group}, 
+author = {Sousa, Alexander A. and Hemez, Colin and Lei, Lei and Traore, Soumba and Kulhankova, Katarina and Newby, Gregory A. and Doman, Jordan L. and Oye, Keyede and Pandey, Smriti and Karp, Philip H. and McCray, Paul B. and Liu, David R.}, 
+year = {2024}, 
+month = {jul}, 
+pages = {1–15}, 
+language = {en}
+}`
+]
\ No newline at end of file

src/sources/mattij-inv-sources.tsx

+import BibtexParser from "../components/makeSources";
+
+export default function MattijsInterviewSources(){
+    return (
+        <div>
+          <BibtexParser bibtexSources={bibtexSources} />
+        </div>
+      );
+}
+
+
+const bibtexSources = [
+    `
+    @article{Bulcaen_Kortleven_Liu_Maule_Dreano_Kelly_Ensinck_Thierie_Smits_Ciciani_et,
+	title        = {
+		Prime editing functionally corrects  Cystic Fibrosis-causing CFTR mutations in
+		human organoids and airway epithelial cells
+	},
+	author       = {
+		Bulcaen, Mattijs and Kortleven, Phéline and Liu, Ronald B. and Maule, Giulia
+		and Dreano, Elise and Kelly, Mairead and Ensinck, Marjolein M. and Thierie,
+		Sam and Smits, Maxime and Ciciani, Matteo and Hatton, Aurelie and Chevalier,
+		Benoit and Ramalho, Anabela S. and Casadevall i Solvas, Xavier and Debyser,
+		Zeger and Vermeulen, François and Gijsbers, Rik and Sermet-Gaudelus, Isabelle
+		and Cereseto, Anna and Carlon, Marianne S.
+	},
+	year         = 2024,
+	month        = may,
+	journal      = {Cell Reports Medicine},
+	pages        = 101544,
+	doi          = {10.1016/j.xcrm.2024.101544},
+	issn         = {2666-3791},
+	abstractnote = {
+		Prime editing is a recent, CRISPR-derived genome editing technology capable
+		of introducing precise nucleotide substitutions, insertions, and deletions.
+		Here, we present prime editing approaches to correct L227R- and N1303K-CFTR,
+		two mutations that cause  Cystic Fibrosis and are not eligible for current
+		market-approved modulator therapies. We show that, upon DNA correction of the
+		CFTR gene, the complex glycosylation, localization, and, most importantly,
+		function of the CFTR protein are restored in HEK293T and 16HBE cell lines.
+		These findings were subsequently validated in patient-derived rectal
+		organoids and human nasal epithelial cells. Through analysis of predicted and
+		experimentally identified candidate off-target sites in primary stem cells,
+		we confirm previous reports on the high prime editor (PE) specificity and its
+		potential for a curative CF gene editing therapy. To facilitate future
+		screening of genetic strategies in a translational CF model, a machine
+		learning algorithm was developed for dynamic quantification of CFTR function
+		in organoids (DETECTOR: “detection of targeted editing of CFTR in
+		organoids”).
+	}
+}
+
+    `
+
+]
\ No newline at end of file

src/sources/methods-sources.tsx

+import BibtexParser from "../components/makeSources";
+
+export default function MethodSources(){
+    return (
+        <div>
+          <BibtexParser bibtexSources={bibtexSources} />
+        </div>
+      );
+}
+
+
+const bibtexSources = [
+`
+@article{article,
+	title        = {Die Entwicklung der Patch-Clamp-Technik},
+	author       = {Roth, F. C., Numberger, M., and Draguhn, A.},
+	year         = 2023,
+	month        = {{}},
+	journal      = {Springer eBooks},
+	volume       = {{}},
+	pages        = {1--14},
+	doi          = {10.1007/978-3-662-66053-9}
+}`,
+
+`
+@book{dallas_patch_2021,
+	title        = {Patch clamp electrophysiology: methods and protocols},
+	shorttitle   = {Patch clamp electrophysiology},
+	year         = 2021,
+	publisher    = {Humana Press},
+	address      = {New York},
+	series       = {Methods in molecular biology},
+	number       = 2188,
+	isbn         = {978-1-07-160818-0},
+	language     = {en},
+	editor       = {Dallas, Mark and Bell, Damian}
+}
+    `,
+    `
+@article{PRIEL20073893,
+	title        = {
+		Ionic Requirements for Membrane-Glass Adhesion and Giga Seal Formation in
+		Patch-Clamp Recording
+	},
+	author       = {
+		Avi Priel and Ziv Gil and Vincent T. Moy and Karl L. Magleby and Shai D.
+		Silberberg
+	},
+	year         = 2007,
+	journal      = {Biophysical Journal},
+	volume       = 92,
+	number       = 11,
+	pages        = {3893--3900},
+	doi          = {10.1529/biophysj.106.099119},
+	issn         = {0006-3495},
+	url          = {https://www.sciencedirect.com/science/article/pii/S000634950771189X},
+	abstract     = {
+		Patch-clamp recording has revolutionized the study of ion channels,
+		transporters, and the electrical activity of small cells. Vital to this
+		method is formation of a tight seal between glass recording pipette and cell
+		membrane. To better understand seal formation and improve practical
+		application of this technique, we examine the effects of divalent ions,
+		protons, ionic strength, and membrane proteins on adhesion of membrane to
+		glass and on seal resistance using both patch-clamp recording and atomic
+		force microscopy. We find that H+, Ca2+, and Mg2+ increase adhesion force
+		between glass and membrane (lipid and cellular), decrease the time required
+		to form a tight seal, and increase seal resistance. In the absence of H+
+		(10−10M) and divalent cations (<10−8M), adhesion forces are greatly reduced
+		and tight seals are not formed. H+ (10−7M) promotes seal formation in the
+		absence of divalent cations. A positive correlation between adhesion force
+		and seal formation indicates that high resistance seals are associated with
+		increased adhesion between membrane and glass. A similar ionic dependence of
+		the adhesion of lipid membranes and cell membranes to glass indicates that
+		lipid membranes without proteins are sufficient for the action of ions on
+		adhesion.
+	}
+}
+`,
+`
+@article{10.3389/fphar.2017.00195,
+	title        = {
+		Development of Automated Patch Clamp Technique to Investigate CFTR Chloride
+		Channel Function
+	},
+	author       = {
+		Billet, Arnaud  and Froux, Lionel  and Hanrahan, John W.  and Becq, Frederic
+	},
+	year         = 2017,
+	journal      = {Frontiers in Pharmacology},
+	volume       = 8,
+	doi          = {10.3389/fphar.2017.00195},
+	issn         = {1663-9812},
+	url          = {
+		https://www.frontiersin.org/journals/pharmacology/articles/10.3389/fphar.2017.00195
+	}
+}
+`,
+`
+@article{DuBridge_Tang_Hsia_Leong_Miller_Calos_1987,
+	title        = {
+		Analysis of mutation in human cells by using an Epstein-Barr virus shuttle
+		system.
+	},
+	author       = {
+		DuBridge, R B and Tang, P and Hsia, H C and Leong, P M and Miller, J H and
+		Calos, M P
+	},
+	year         = 1987,
+	month        = jan,
+	journal      = {Molecular and Cellular Biology},
+	volume       = 7,
+	number       = 1,
+	pages        = {379–387},
+	issn         = {0270-7306},
+	abstractnote = {
+		We developed highly sensitive shuttle vector systems for detection of
+		mutations formed in human cells using autonomously replicating derivatives of
+		Epstein-Barr virus (EBV). EBV vectors carrying the bacterial lacI gene as the
+		target for mutation were established in human cells and later returned to
+		Escherichia coli for rapid detection and analysis of lacI mutations. The
+		majority of the clonal cell lines created by establishment of the lacI-EBV
+		vector show spontaneous LacI- frequencies of less than 10(-5) and are
+		suitable for studies of induced mutation. The ability to isolate clonal lines
+		represents a major advantage of the EBV vectors over transiently replicating
+		shuttle vectors (such as those derived from simian virus 40) for the study of
+		mutation. The DNA sequence changes were determined for 61 lacI mutations
+		induced by exposure of one of the cell lines to N-nitroso-N-methylurea. A
+		total of 33 of 34 lacI nonsense mutations and 26 of 27 missense mutations
+		involve G X C to A X T transitions. These data provide support for the
+		mutational theory of cancer.
+	}
+}
+`,
+`
+@article{Qin_Zhang_Clift_Hulur_Xiang_Ren_Lahn_2010,
+	title        = {
+		Systematic Comparison of Constitutive Promoters and the Doxycycline-Inducible
+		Promoter
+	},
+	author       = {
+		Qin, Jane Yuxia and Zhang, Li and Clift, Kayla L. and Hulur, Imge and Xiang,
+		Andy Peng and Ren, Bing-Zhong and Lahn, Bruce T.
+	},
+	year         = 2010,
+	month        = may,
+	journal      = {PLOS ONE},
+	publisher    = {Public Library of Science},
+	volume       = 5,
+	number       = 5,
+	pages        = {e10611},
+	doi          = {10.1371/journal.pone.0010611},
+	issn         = {1932-6203},
+	abstractnote = {
+		Constitutive promoters are used routinely to drive ectopic gene expression.
+		Here, we carried out a systematic comparison of eight commonly used
+		constitutive promoters (SV40, CMV, UBC, EF1A, PGK and CAGG for mammalian
+		systems, and COPIA and ACT5C for Drosophila systems). We also included in the
+		comparison the TRE promoter, which can be activated by the rtTA
+		transcriptional activator in a doxycycline-inducible manner. To make our
+		findings representative, we conducted the comparison in a variety of cell
+		types derived from several species. We found that these promoters vary
+		considerably from one another in their strength. Most promoters have fairly
+		consistent strengths across different cell types, but the CMV promoter can
+		vary considerably from cell type to cell type. At maximal induction, the TRE
+		promoter is comparable to a strong constitutive promoter. These results
+		should facilitate more rational choices of promoters in ectopic gene
+		expression studies.
+	},
+	language     = {en}
+}
+`,
+`
+@article{BULCAEN2024101544,
+title = {Prime editing functionally corrects  Cystic Fibrosis-causing CFTR mutations in human organoids and airway epithelial cells},
+journal = {Cell Reports Medicine},
+volume = {5},
+number = {5},
+pages = {101544},
+year = {2024},
+issn = {2666-3791},
+doi = {https://doi.org/10.1016/j.xcrm.2024.101544},
+url = {https://www.sciencedirect.com/science/article/pii/S2666379124002349},
+author = {Mattijs Bulcaen and Phéline Kortleven and Ronald B. Liu and Giulia Maule and Elise Dreano and Mairead Kelly and Marjolein M. Ensinck and Sam Thierie and Maxime Smits and Matteo Ciciani and Aurelie Hatton and Benoit Chevalier and Anabela S. Ramalho and Xavier {Casadevall i Solvas} and Zeger Debyser and François Vermeulen and Rik Gijsbers and Isabelle Sermet-Gaudelus and Anna Cereseto and Marianne S. Carlon},
+keywords = { Cystic Fibrosis, prime editing, patient-derived organoids, human nasal epithelial cells, gene editing, machine learning, DETEOR, CRISPR},
+abstract = {Summary
+Prime editing is a recent, CRISPR-derived genome editing technology capable of introducing precise nucleotide substitutions, insertions, and deletions. Here, we present prime editing approaches to correct L227R- and N1303K-CFTR, two mutations that cause  Cystic Fibrosis and are not eligible for current market-approved modulator therapies. We show that, upon DNA correction of the CFTR gene, the complex glycosylation, localization, and, most importantly, function of the CFTR protein are restored in HEK293T and 16HBE cell lines. These findings were subsequently validated in patient-derived rectal organoids and human nasal epithelial cells. Through analysis of predicted and experimentally identified candidate off-target sites in primary stem cells, we confirm previous reports on the high prime editor (PE) specificity and its potential for a curative CF gene editing therapy. To facilitate future screening of genetic strategies in a translational CF model, a machine learning algorithm was developed for dynamic quantification of CFTR function in organoids (DETECTOR: “detection of targeted editing of CFTR in organoids”).}
+}
+new8.
+@article{Ensinck_Deeersmaecker_Heylen_Ramalho_Gijsbers_Far,
+	title        = {
+		Phenotyping of Rare CFTR Mutations Reveals Distinct Trafficking and
+		Functional Defects
+	},
+	author       = {
+		Ensinck, Marjolein and De Keersmaecker, Liesbeth and Heylen, Lise and
+		Ramalho, Anabela S. and Gijsbers, Rik and Farré, Ricard and De Boeck, Kris
+		and Christ, Frauke and Debyser, Zeger and Carlon, Marianne S.
+	},
+	year         = 2020,
+	month        = mar,
+	journal      = {Cells},
+	volume       = 9,
+	number       = 3,
+	pages        = 754,
+	doi          = {10.3390/cells9030754},
+	issn         = {2073-4409},
+	abstractnote = {
+		Background. The most common CFTR mutation, F508del, presents with multiple
+		cellular defects. However, the possible multiple defects caused by many rarer
+		CFTR mutations are not well studied. We investigated four rare CFTR mutations
+		E60K, G85E, E92K and A455E against well-characterized mutations, F508del and
+		G551D, and their responses to corrector VX-809 and/or potentiator VX-770.
+		Methods. Using complementary assays in HEK293T stable cell lines, we
+		determined maturation by Western blotting, trafficking by flow cytometry
+		using extracellular 3HA-tagged CFTR, and function by halide-sensitive YFP
+		quenching. In the forskolin-induced swelling assay in intestinal organoids,
+		we validated the effect of tagged versus endogenous CFTR. Results. Treatment
+		with VX-809 significantly restored maturation, PM localization and function
+		of both E60K and E92K. Mechanistically, VX-809 not only raised the total
+		amount of CFTR, but significantly increased the traffic efficiency, which was
+		not the case for A455E. G85E was refractory to VX-809 and VX-770 treatment.
+		Conclusions. Since no single model or assay allows deciphering all defects at
+		once, we propose a combination of phenotypic assays to collect rapid and
+		early insights into the multiple defects of CFTR variants.
+	},
+	language     = {eng}
+}
+`,
+`
+@misc{ignatova2023,
+  author       = {Zoya Ignatova},
+  title        = {Research Group Ignatova at the Institute of Biochemistry and Molecular Biology},
+  year         = {2023},
+  howpublished = {Hamburg University},
+  note         = {Accessed: 28 September 2024},
+  institution  = {University of Hamburg},
+}
+
+`,
+`@article{ehrhardt_towards_2006,
+	title        = {Towards an in vitro model of  Cystic Fibrosis small airway epithelium: characterisation of the human bronchial epithelial cell line {CFBE41o}-},
+	shorttitle   = {Towards an in vitro model of  Cystic Fibrosis small airway epithelium},
+	author       = {Ehrhardt, Carsten and Collnot, Eva-Maria and Baldes, Christiane and Becker, Ulrich and Laue, Michael and Kim, Kwang-Jin and Lehr, Claus-Michael},
+	year         = 2006,
+	month        = mar,
+	journal      = {Cell and Tissue Research},
+	volume       = 323,
+	number       = 3,
+	pages        = {405--415},
+	doi          = {10.1007/s00441-005-0062-7},
+	issn         = {0302-766X, 1432-0878},
+	url          = {http://link.springer.com/10.1007/s00441-005-0062-7},
+	urldate      = {2024-09-09},
+	copyright    = {http://www.springer.com/tdm},
+	language     = {en},
+	file         = {Ehrhardt et al. - 2006 - Towards an in vitro model of  Cystic Fibrosis small.pdf:C\:\\Users\\Isabell\\Zotero\\storage\\RXLMCE3V\\Ehrhardt et al. - 2006 - Towards an in vitro model of  Cystic Fibrosis small.pdf:application/pdf}
+}
+`
+,
+`
+@book{Mennella_2024,
+	title        = {Cilia: methods and protocols},
+	year         = 2024,
+    author       = {Mennella, Vito},
+	publisher    = {Humana Press},
+	address      = {New York, NY},
+	isbn         = {978-1-07-163507-0},
+	abstractnote = {
+		This volume covers the latest advancements in the study of ciliary
+		complexity. Protocols cover genomic, proteomic, imaging, and functional
+		analysis of different ciliated tissues and their wide applicability in cilia
+		biology. Chapters in this book primarily focus on methods to study
+		multiciliated cells, and discuss topics such as SARS-CoV-2 infections of
+		human primary nasal multiciliated epithelial cells; expansion microscopy of
+		ciliary proteins; live-imaging centriole amplification in mouse brain
+		multiciliated cells; biophysical properties of cilia motility; and
+		mucociliary transport device construction. Written in the highly successful
+		Methods in Molecular Biology series format, chapters include introductions to
+		their respective topics, lists of the necessary materials and reagents,
+		step-by-step, readily reproducible laboratory protocols, and tips on
+		troubleshooting and avoiding known pitfalls. Cutting-edge and thorough,
+		Cilia: Methods and Protocols is a valuable resource for researchers who are
+		interested in learning more about this developing field.
+	},
+	language     = {eng}
+}
+`
+]
\ No newline at end of file

src/sources/part-sources.tsx

+import BibtexParser from "../components/makeSources";
+
+export default function PartSources(){
+    return (
+        <div>
+          <BibtexParser bibtexSources={bibtexSources} />
+        </div>
+      );
+}
+
+
+const bibtexSources = [
+`
+@article {10.7554/eLife.69504, 
+
+article_type = {journal}, 
+
+title = {PEAR, a flexible fluorescent reporter for the identification and enrichment of successfully prime edited cells}, 
+
+author = {Simon, Dorottya Anna and Tálas, András and Kulcsár, Péter István and Biczók, Zsuzsanna and Krausz, Sarah Laura and Várady, György and Welker, Ervin}, 
+
+editor = {Lapinaite, Audrone and Stainier, Didier YR and Hamilton, Jennifer R}, 
+
+volume = 11, 
+
+year = 2022, 
+
+month = {feb}, 
+
+pub_date = {2022-02-23}, 
+
+pages = {e69504}, 
+
+citation = {eLife 2022;11:e69504}, 
+
+doi = {10.7554/eLife.69504}, 
+
+url = {https://doi.org/10.7554/eLife.69504}, 
+
+abstract = {Prime editing is a recently developed CRISPR/Cas9 based gene engineering tool that allows the introduction of short insertions, deletions, and substitutions into the genome. However, the efficiency of prime editing, which typically achieves editing rates of around 10\%–30\%, has not matched its versatility. Here, we introduce the prime editor activity reporter (PEAR), a sensitive fluorescent tool for identifying single cells with prime editing activity. PEAR has no background fluorescence and specifically indicates prime editing events. Its design provides apparently unlimited flexibility for sequence variation along the entire length of the spacer sequence, making it uniquely suited for systematic investigation of sequence features that influence prime editing activity. The use of PEAR as an enrichment marker for prime editing can increase the edited population by up to 84\%, thus significantly improving the applicability of prime editing for basic research and biotechnological applications.}, 
+
+keywords = {CRISPR, Cas9, prime editing, fluorescent, fluorescent reporter, reporter, enrichment, genome engineering}, 
+
+journal = {eLife}, 
+
+issn = {2050-084X}, 
+
+publisher = {eLife Sciences Publications, Ltd}, 
+
+} 
+`,
+`
+@misc{nickaseassay2024internet, 
+ author = {Kim et al.}, 
+ title = { Utilization of nicking properties of CRISPR-Cas12a effector for genome editing}, 
+ year = {2024}, 
+ url = { https://doi.org/10.1038/s41598-024-53648-2}, 
+ note = {Zugriff am 16. August 2024} 
+} 
+`
+]
\ No newline at end of file

src/sources/res-sources.tsx

+import BibtexParser from "../components/makeSources";
+
+export default function ResultSources(){
+    return (
+        <div>
+          <BibtexParser bibtexSources={bibtexSources} />
+        </div>
+      );
+}
+
+
+const bibtexSources = [
+
+  `
+  @article{wang2023sortlnps,
+  author    = {Wang, X. and Liu, S. and Sun, Y. and others},
+  title     = {Preparation of selective organ-targeting (SORT) lipid nanoparticles (LNPs) using multiple technical methods for tissue-specific mRNA delivery},
+  journal   = {Nature Protocols},
+  volume    = {18},
+  pages     = {265--291},
+  year      = {2023},
+  doi       = {10.1038/s41596-022-00755-},
+  url       = {https://doi.org/10.1038/s41596-022-00755-}
+}
+
+  `, 
+  `@article{sousa2024primeediting,
+  author    = {Sousa, A. A. and Hemez, C. and Lei, L. and others},
+  title     = {Systematic optimization of prime editing for the efficient functional correction of CFTR F508del in human airway epithelial cells},
+  journal   = {Nature Biomedical Engineering},
+  year      = {2024},
+  doi       = {10.1038/s41551-024-01233-3},
+  url       = {https://doi.org/10.1038/s41551-024-01233-3}
+}
+`
+
+
+]
\ No newline at end of file

code/bibtex.bib → src/sources/rnhale-sources.tsx

+import BibtexParser from "../components/makeSources";
 
-@article{article1, 
+export default function RnhaleSources(){
+    return (
+        <div>
+          <BibtexParser bibtexSources={bibtexSources} />
+        </div>
+      );
+}
+
+
+const bibtexSources = [
+`
+ 
+@article{article, 
 
 author={Roth, F. C., Numberger, M., and Draguhn, A.}, 
 
@@ -19,8 +32,9 @@ doi={10.1007/978-3-662-66053-9_1}
 
 } 
 
+`,` 
 
-@article{article2, 
+@article{article, 
 
 author={Mete, V.}, 
 
@@ -40,9 +54,9 @@ doi={10.17879/98958441905}
 
 } 
 
+`,`
 
-
-@article{article3, 
+@article{article, 
 
 author={Giaever, I. and Keese, C. }, 
 
@@ -60,4 +74,6 @@ journal={Nature},
 
 doi={10.1038/366591a0} 
 
-} 
\ No newline at end of file
+} 
+`
+]
\ No newline at end of file

src/sources/test-sources.tsx

+import BibtexParser from "../components/makeSources";
+
+export function TestSource(){
+  const bibtexSources = [
+    `
+    @article{Ensinck_Deeersmaecker_Heylen_Ramalho_Gijsbers_Far,
+	title        = {
+		Phenotyping of Rare CFTR Mutations Reveals Distinct Trafficking and
+		Functional Defects
+	},
+	author       = {
+		Ensinck, Marjolein and De Keersmaecker, Liesbeth and Heylen, Lise and
+		Ramalho, Anabela S. and Gijsbers, Rik and Farré, Ricard and De Boeck, Kris
+		and Christ, Frauke and Debyser, Zeger and Carlon, Marianne S.
+	},
+	year         = 2020,
+	month        = mar,
+	journal      = {Cells},
+	volume       = 9,
+	number       = 3,
+	pages        = 754,
+	doi          = {10.3390/cells9030754},
+	issn         = {2073-4409},
+	abstractnote = {
+		Background. The most common CFTR mutation, F508del, presents with multiple
+		cellular defects. However, the possible multiple defects caused by many rarer
+		CFTR mutations are not well studied. We investigated four rare CFTR mutations
+		E60K, G85E, E92K and A455E against well-characterized mutations, F508del and
+		G551D, and their responses to corrector VX-809 and/or potentiator VX-770.
+		Methods. Using complementary assays in HEK293T stable cell lines, we
+		determined maturation by Western blotting, trafficking by flow cytometry
+		using extracellular 3HA-tagged CFTR, and function by halide-sensitive YFP
+		quenching. In the forskolin-induced swelling assay in intestinal organoids,
+		we validated the effect of tagged versus endogenous CFTR. Results. Treatment
+		with VX-809 significantly restored maturation, PM localization and function
+		of both E60K and E92K. Mechanistically, VX-809 not only raised the total
+		amount of CFTR, but significantly increased the traffic efficiency, which was
+		not the case for A455E. G85E was refractory to VX-809 and VX-770 treatment.
+		Conclusions. Since no single model or assay allows deciphering all defects at
+		once, we propose a combination of phenotypic assays to collect rapid and
+		early insights into the multiple defects of CFTR variants.
+	},
+	language     = {eng}
+}
+    `
+  ];
+
+  return (
+    <div>
+      <h1>BibTeX to HTML in React</h1>
+      <BibtexParser bibtexSources={bibtexSources} />
+    </div>
+  );
+}
+
+export default TestSource;
\ No newline at end of file

src/sources/vorlage-source.tsx

+import BibtexParser from "../components/makeSources";
+
+export default function VorlageSources(){
+    return (
+        <div>
+          <BibtexParser bibtexSources={bibtexSources} />
+        </div>
+      );
+}
+
+
+const bibtexSources = [
+
+  `
+  `
+
+]
\ No newline at end of file

src/sources/wimscheyer-sources.tsx

+import BibtexParser from "../components/makeSources";
+
+export default function WischmeyerSources(){
+    return (
+        <div>
+          <BibtexParser bibtexSources={bibtexSources} />
+        </div>
+      );
+}
+
+
+const bibtexSources = [
+    `
+     
+@article{article, 
+
+author={Roth, F. C., Numberger, M., and Draguhn, A.}, 
+
+year={2023}, 
+
+month={}, 
+
+pages={1-14}, 
+
+title={Die Entwicklung der Patch-Clamp-Technik}, 
+
+volume={}, 
+
+journal={Springer eBooks}, 
+
+doi={10.1007/978-3-662-66053-9_1} 
+
+} 
+
+`,`
+
+@article{article, 
+
+author={Mete, V.}, 
+
+year={2023}, 
+
+month={ }, 
+
+pages={ }, 
+
+title={Entwicklung und Validierung neuer nicht-invasiver Diagnosesysteme für Mucociliary Clearance Disorders (MCCD)}, 
+
+volume={ }, 
+
+journal={Dissertation, Westfälische Wilhelms-Universität Münster}, 
+
+doi={10.17879/98958441905} 
+
+} 
+`,`
+
+@article{article, 
+
+author={Giaever, I. and Keese, C. }, 
+
+year={1993}, 
+
+month={ }, 
+
+pages={591-592}, 
+
+title={A morphological biosensor for mammalian cells}, 
+
+volume={366}, 
+
+journal={Nature}, 
+
+doi={10.1038/366591a0} 
+
+} 
+    `
+]
\ No newline at end of file

src/utils/Highlight-functions.ts

 export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
-    let TopDistance = 150; 
-    console.log("Starting highlight check...")
+    let TopDistance = 170; 
+   /*  console.log("Starting highlight check...")
     console.log("here come el...")
     console.log(el)
     console.log("here comes subtitle...")
-    console.log(subtitle)
+    console.log(subtitle) */
     if (el != null && subtitle != null){
-/*         console.log("here comes el...")
-        console.log(el)
-        console.log(el.getBoundingClientRect()) */
+        //console.log("here comes el...")
+        //console.log(el)
+        // console.log(el.getBoundingClientRect()) 
         if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
-            subtitle.style.color = "#F57D22";
-            subtitle.style.backgroundColor = "rgb(133, 15, 120, 0.8)";
+            subtitle.style.color = "var(--ourbeige)";
             subtitle.style.borderColor = "#850F78"; 
-            subtitle.style.marginLeft = "10px"; 
-            subtitle.style.paddingRight = "10px";
-            subtitle.style.fontWeight = "900";
+            subtitle.style.marginLeft = "5px"; 
+            subtitle.style.paddingRight = "5px";
+            subtitle.style.fontWeight = "700";
 
 /*                 console.log("subtitle: ",subtitle)
             console.log("style: ", subtitle.style)
@@ -23,15 +22,16 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
             console.log("backcolor: ",subtitle.style.backgroundColor)    */     
         }
         else{
-            subtitle.style.color = "white";
+            subtitle.style.color = "var(--ourbeige)";
             subtitle.style.marginLeft = "0"; 
             subtitle.style.backgroundColor = "";
+            subtitle.style.fontWeight = "500";
         }
     }
     
   }
 
-  export function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
+/*   export function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
     let TopDistance = 150; 
 
     if (el != null && subtitle != null){
@@ -39,13 +39,15 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
         if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
    
             if(subtitle.childNodes[0] != undefined){
-                console.log("if true: ");
-                console.log(subtitle.childNodes[0]);
+                 console.log("if true: ");
+                console.log(subtitle.childNodes[0]); 
                 (subtitle.childNodes[0] as HTMLElement).classList.add("active-sideitem");
                 if(subtitle.childNodes[0].childNodes[1] != undefined){
                     console.log("test: ")
-                    console.log(subtitle.childNodes[0].childNodes[1]);
+                    console.log(subtitle.childNodes[0].childNodes[1]); 
                     (subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "block";
+                    console.log(`subtitle.childNodes[0].textContent ${subtitle.childNodes[0].textContent}`)
+                    console.log(`subtitle.childNodes[0].childNodes[1].nodeName: ${subtitle.childNodes[0].childNodes[1].nodeName}`)
                 }
                } 
         }
@@ -54,12 +56,12 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
             subtitle.style.backgroundColor = "";
             subtitle.classList.remove("subtitle-active");
             if(subtitle.childNodes[0] != undefined){
-                console.log("if true: ");
-                console.log(subtitle.childNodes[0]);
+               //  console.log("if true: ");
+                console.log(subtitle.childNodes[0]); 
                 (subtitle.childNodes[0] as HTMLElement).classList.remove("active-sideitem");
                 if(subtitle.childNodes[0].childNodes[1] != undefined){
                     console.log("test: ")
-                    console.log(subtitle.childNodes[0].childNodes[1]);
+                    console.log(subtitle.childNodes[0].childNodes[1]); 
                     (subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "none";
                 }
                }
@@ -68,3 +70,32 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
     }
     
   }
+ */
+
+  export function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
+    let TopDistance = 170; 
+    if (el != null && subtitle != null){
+        //console.log("Highlighting Element: ", el, "Subtitle: ", subtitle);
+        //console.log(`Element position: top=${el.getBoundingClientRect().top}, bottom=${el.getBoundingClientRect().bottom}`);
+        if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
+            (subtitle.childNodes[0] as HTMLElement).classList.add("active-sideitem");
+            subtitle.style.fontWeight = "900";
+            if(subtitle.childNodes[0].childNodes[1] != undefined){ 
+                (subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "block";
+               // console.log(`subtitle.childNodes[0].textContent ${subtitle.childNodes[0].textContent}`)
+                // console.log(`subtitle.childNodes[0].childNodes[1].nodeName: ${subtitle.childNodes[0].childNodes[1].nodeName}`)
+            }
+        } else {
+            (subtitle.childNodes[0] as HTMLElement).classList.remove("active-sideitem");
+            subtitle.style.fontWeight = "normal";
+            if(subtitle.childNodes[0] != undefined){
+                 (subtitle.childNodes[0] as HTMLElement).classList.remove("active-sideitem");
+                 if(subtitle.childNodes[0].childNodes[1] != undefined){
+                     (subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "none";
+                 }
+                }
+        }
+    } else {
+        console.error("Element oder Subtitle nicht gefunden:", el, subtitle);
+    }
+}

src/utils/LoadingContext.tsx

+import React, { createContext, useContext, useState } from "react";
+
+const LoadingContext = createContext<any>(null);
+
+export const LoadingProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <LoadingContext.Provider value={{ isLoading, setIsLoading }}>
+      {children}
+    </LoadingContext.Provider>
+  );
+};
+
+export const useLoading = () => useContext(LoadingContext);

src/utils/RoutManager.tsx

+//Important file ! do not change 
+
+
 import { useState, useEffect } from "react";
 import { Routes, Route, useLocation } from "react-router-dom";
 import LoadingScreen from "../components/LoadingScreen";

src/utils/TabNavigation.ts

+import { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { openFromOtherPage } from './openFromOtherpAge';
+import { handleScroll } from './handleScroll';
+import { openNestedTab } from './openNestedTab';
+import { openTab } from './openTab';
+import { openTabInCollapsible } from './opentabincollapsible';
+
+// Custom Hook for central tab navigation
+export const useTabNavigation = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState<string | null>(null);
+  const [activeSubTab, setActiveSubTab] = useState<string | null>(null);
+  const [, setActiveCollapsible] = useState<string | null>(null);
+
+  // 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);
+
+    // 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(() => {
+    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 changeTo = params.get('changeTo');
+    const colTab = params.get('colTab');
+  //  const navigate = useNavigate();
+    
+     
+
+
+     // scrolls to a specific collapsible element
+    if (collapseId) {
+      setActiveCollapsible(collapseId);
+      handleScroll(collapseId);
+    }
+    if (colTab && collapseId) {
+      setActiveCollapsible(collapseId);
+      openTabInCollapsible(colTab, collapseId); // Öffne den Tab innerhalb des Collapsibles
+ 
+    }
+
+    // opens main and (if necessary) subtab
+    if (tabId) {
+      let tab = document.getElementById(tabId);
+      let tabClass = tab!.className; 
+      if (subTabId) {
+        let subTab = document.getElementById(subTabId);
+        let parentClass = (subTab as HTMLElement).classList[1]; 
+        openNestedTab(tabId, subTabId, parentClass, tabClass);
+      } else {
+        openTab(tabId, tabClass);
+      }
+    }
+
+   
+
+    // opens tab on another page
+    if (tabId) {
+      openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+    }
+
+    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 / 2 + element.clientHeight / 2;
+          window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
+      }
+  }
+
+    setActiveTab(tabId);
+    setActiveSubTab(subTabId || null);
+  }, [location.search]);
+
+  return { activeTab, activeSubTab, handleTabChange };
+};

src/utils/TabNavigation.tsx

-import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-import { openFromOtherPage } from './openFromOtherpAge';
-
-export const openTab = (tabId: string) => {
-  // Hide all tabs
-  const tabs = document.querySelectorAll('.tabcontent');
-  tabs.forEach((tab) => {
-    (tab as HTMLElement).style.display = 'none';
-  });
-
-  // Show the selected tab
-  const selectedTab = document.getElementById(tabId);
-  if (selectedTab) {
-    selectedTab.style.display = 'block';
-  }
-};
-
-export const openNestedTab = (parentTabId: string, childTabId: string) => {
-  // Open parent tab
-  openTab(parentTabId);
-
-  // Open child tab inside parent tab
-  const nestedTabs = document.querySelectorAll(`#${parentTabId} .nested-tabcontent`);
-  nestedTabs.forEach((tab) => {
-    (tab as HTMLElement).style.display = 'none';
-  });
-
-  const selectedNestedTab = document.getElementById(childTabId);
-  if (selectedNestedTab) {
-    selectedNestedTab.style.display = 'block';
-  }
-};
-
-export const handleScrollToCollapse = (collapseId: string) => {
-  const collapseElement = document.getElementById(collapseId);
-  if (collapseElement) {
-    const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
-    const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
-    const scrollPosition = elementTop - offset;
-
-    window.scrollTo({
-      top: scrollPosition,
-      behavior: 'smooth',
-    });
-  }
-};
-
-export const TabNavigation = () => {
-  const location = useLocation();
-
-  useEffect(() => {
-    const params = new URLSearchParams(location.search);
-    const collapseId = params.get('collapseId');
-    const tabId = params.get('tab');
-    const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs
-
-    // Open the tab specified by tabId (and subTab if nested)
-    if (tabId) {
-      if (subTabId) {
-        // If subTab is provided, open the nested tab
-        openNestedTab(tabId, subTabId);
-      } else {
-        // Otherwise, just open the main tab
-        openTab(tabId);
-      }
-    }
-
-    // Scroll to the section specified by collapseId after opening the tab
-    if (collapseId) {
-      handleScrollToCollapse(collapseId);
-    }
-
-    // Open the tab from another page
-    if (tabId) {
-      openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
-    }
-  }, [location.search]);
-
-  return 
-};
-
-export default TabNavigation;

src/utils/createSidebar.tsx

+import { useEffect, useState } from "react";
+import { ScrollLink } from "../components/ScrollLink";
+import { Highlight, NewHighlight } from "./Highlight-functions";
+import { BackUp } from "../components/Buttons";
+
+// Funktion zur Erstellung der Sidebar
+export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string> }>) {
+    const { numsBig, numsSub } = deriveTabsData(tabs);
+    console.log({ numsBig, numsSub })
+    const [openTab, setOpenTab] = useState<string | null>(null);
+    
+           
+    useEffect(() => {
+      const handleScroll = () => {
+        numsBig.forEach((item, ind) => {
+          const element = document.getElementById(item);
+          const subtitleElement = document.getElementById(`subtitle${ind}`);
+          if (element && subtitleElement) {
+            Highlight({ el: element }, { subtitle: subtitleElement });
+          }
+        });
+  
+        numsSub.forEach((item, ind) => {
+          const element = document.getElementById(item);
+          const subtitleElement = document.getElementById(`newsubtitle${ind}`);
+          if (element && subtitleElement) {
+            NewHighlight({ el: element }, { subtitle: subtitleElement });
+          }
+        });
+      };
+  
+      window.addEventListener("scroll", handleScroll);
+      return () => window.removeEventListener("scroll", handleScroll);
+    }, [numsBig, numsSub, openTab]);
+
+    const scrolling = (tab: string) => {
+      const targetElement = document.getElementById(tab);
+      if (targetElement) {
+        //console.log(`Scrolling to element with ID: ${tab}`);
+        
+        // Get the position of the element relative to the document
+        const elementRect = targetElement.getBoundingClientRect();
+        const elementTop = elementRect.top + window.scrollY;
+        
+        // Calculate the middle of the viewport
+        const viewportHeight = window.innerHeight;
+        const scrollOffset = elementTop - (viewportHeight / 5 - targetElement.offsetHeight / 2);
+       /*  
+        console.log(`Element Top: ${elementTop}`);
+        console.log(`Viewport Height: ${viewportHeight}`);
+        console.log(`Scroll Offset: ${scrollOffset}`); */
+        
+        window.scrollTo({
+            top: scrollOffset,
+            behavior: "smooth"
+        });
+      } else {
+          console.error(`Scroll target element not found for ID: ${tab}`);
+      }
+    }
+
+    const toggleTab = (tab: string) => {
+      setOpenTab(openTab === tab ? null : tab);
+     // console.log(`Status of tab ${tab} is ${openTab}`)
+     scrolling(tab)
+    };
+
+    let subtitlenumber = 0; 
+    return (
+      <>
+        <br />
+        <div className="sticky-top">
+          <nav className="sidebar">
+            {tabs.map((tab, index) => {
+              const tabId = `tab-${tab.tab}`;
+              const parentId = `parent-${tab.tab}`;
+              const subtitleId = `subtitle${index}`;
+              
+              return (
+                <div key={index}>
+                  
+                    <div id={subtitleId} className="detail-sideitem">
+                      <div id={parentId} className="sideitem">
+                      <a
+                          onClick={() => {
+                            // console.log(`Clicked on Tab ${tab.tab} with tab-name tab-${tab.tab} and parent parent-${tab.tab}`);
+                            toggleTab(tab.tab);
+                            // Close other tabs when a new tab is opened
+                            tabs.forEach((t) => {
+                              if (t.tab !== tab.tab) {
+                                document.getElementById(`tab-${t.tab}`)!.style.display = "none";
+                                document.getElementById(`parent-${t.tab}`)!.classList.remove("active-sideitem");
+                              }
+                            });
+                            // Show or hide the selected tab
+                            document.getElementById(tabId)!.style.display = openTab === tab.tab ? "block" : "none";
+                            document.getElementById(parentId)!.classList.toggle("active-sideitem");
+                          }}
+                        >
+                          <summary>{tab.tab}</summary>
+                        </a>
+                        {tab.subtabs && (
+                          <span
+                            id={tabId}
+                            className="sidesubtab"
+                            style={{ display: openTab === tab.tab ? "block" : "none" }}
+                          >
+                            <ul>
+                              {tab.subtabs.map((subtab, subIndex) => {
+                                const subTabId = `newsubtitle${subtitlenumber}`;
+                               /*  console.log(`Old subtitlenumber is ${subtitlenumber}`) */
+                                subtitlenumber = subtitlenumber + 1; 
+                                // console.log(`New subtitlenumber is ${subtitlenumber}`)
+                               // console.log(`Made subtab newsubtitle${subtitlenumber} that will link to ${tab.tab}${subIndex +1 }H`) 
+                                return (
+                                  <li key={subtitlenumber} id={subTabId}>
+                                    <ScrollLink label={subtab} targetId={`${tab.tab}${subIndex +1 }H`} />
+                                  </li>
+                                );
+                              })}
+                            </ul>
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  
+  
+                  
+                </div>
+              );
+            })}
+          </nav>
+          <BackUp/>
+        </div>
+      </>
+    );
+  }
+
+
+  function deriveTabsData(tabs: Array<{ tab: string; subtabs?: Array<string> }>) {
+    const numsBig: 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) => {
+                // console.log(index)
+                numsSub.push(`${tab.tab}${count}`); // z.B. Role1H, Role2H
+                count += 1; 
+            });
+        }
+    });
+
+    return { numsBig, numsSub };
+}
+
+