hp datensatz

eb1a00b6 · Liliana Sanfilippo · 6c74c74e · eb1a00b6 · eb1a00b6 · eb1a00b6
Commit eb1a00b6 authored 6 months ago by Liliana Sanfilippo
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -3419,4 +3419,39 @@ a{
 .active-sideitem a summary{
  color: white !important;
+}
+.flexbox{
+  display: flex;
+  align-items: stretch;
+  margin-bottom: 20px;
+}
+.hp-timeline-p{
+  flex: 1;
+  margin-bottom: 0 !important;
+  margin-top: 0 !important;
+}
+.flexbox p{
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+.hp-timeline-p p{
+  margin-top: auto !important;
+}
+.hp-timeline-img{
+  margin-top: 0 !important;
+    height: 100%; /* Das Bild wird in der Höhe an den Container angepasst */
+    max-height: 100%;
+    width: 100%; /* Bild füllt den Image-Container aus */
+    object-fit: cover; /* Optional: Skaliert das Bild so, dass es den Container proportional füllt */
+}
+.hti-box{
+  width: min-content;
+  flex: 0 0.2 40%; /* Bild nimmt maximal 40% der Breite ein */
+}
+.hti-abstand{
+  width: 20px;
 }
\ No newline at end of file
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -11,6 +11,7 @@ export function ButtonRowTabs({data, cla}: {data: Array<TabDatensatz>, cla: stri
    return rows; 
  }
+import React from "react";
 import { BlockQuoteB } from "./Quotes";
  import { TimelineDatenpunkt } from "./data/hptimelinedata";
@@ -103,7 +104,31 @@ import { BlockQuoteB } from "./Quotes";
        }
      }
+      /* References */
+      var refs: React.ReactNode = <></>;
+      if (data[i].references) {
+        refs = <> <h4>References </h4> {data[i].references}</> 
+      }
+      /* Further pictures */
+      var inv_img: React.ReactNode = <></>;
+      if (data[i].pictureurl_interview) {
+        inv_img =  <>  <div className="hti-box"> <img src={data[i].pictureurl_interview} className="hp-timeline-img hti-right"/> </div> <div className="hti-abstand"/> </>
+      }
+      var imp_img: React.ReactNode = <></>;
+      if (data[i].pictureurl_implementation) {
+        imp_img =   <> <div className="hti-abstand"/><div className="hti-box">
+                        <img src={data[i].pictureurl_implementation} className="hp-timeline-img hti-right"/>
+                      </div>
+                    </>
+      }
+      var aim_img: React.ReactNode = <></>;
+      if (data[i].pictureurl_aim) {
+        aim_img =  <> <div className="hti-abstand"/> <div className="hti-box">
+        <img src={data[i].pictureurl_aim} className="hp-timeline-img hti-left"/> 
+   </div></>
+      }
      let node = <>
                <br/>
@@ -125,13 +150,31 @@ import { BlockQuoteB } from "./Quotes";
                      <img className="middle sechpro" src={data[i].pictureurl}/>
                    </div>
                  </div>
                  <h4>{goalheading}</h4>
-                  <p>{data[i].aimofcontact}</p>
+                  <div className="flexbox">
+                      <p className="hp-timeline-p">{data[i].aimofcontact}</p>
+                    {aim_img}
+                  </div>
                  <h4>Insights</h4>
-                  <p>{data[i].insights}</p>
+                  <div className="flexbox">
+                    {inv_img}
+                      <p className="hp-timeline-p">{data[i].insights}</p>
+                  </div>
                  {clari}
                  <h4>Implementation</h4>
-                  <p>{data[i].implementation}</p>
+                  <div className="flexbox">
+                      <p className="hp-timeline-p">{data[i].implementation}</p>
+                    {imp_img}
+                  </div>
+                  {refs}
            </>
      if(problem){
        rows.push(

--- a/src/components/data/hptimelinedata.ts
+++ b/src/components/data/hptimelinedata.ts
+import {ScrollLinkWithChild } from "../ScrollLink";
 export interface TimelineDatenpunkt {
  title?: string; 
  vorname: string; 
@@ -18,9 +21,13 @@ export interface TimelineDatenpunkt {
  insights: string | Array<string> | Array<React.ReactNode>; 
  clarification?: string | Array<string> | Array<React.ReactNode>; 
  implementation: string | Array<string> | Array<React.ReactNode>; 
-  pictureurl_interview?: string; 
+  pictureurl_interview?: string;  /* Picture that goes into the paragraph "Insights"  */
+  pictureurl_aim?: string;  /* Picture that goes into the paragraph "Aim of contact"  */
+  pictureurl_implementation?: string;  /* Picture that goes into the paragraph "Implementation"  */
  pictureurl_other?: string; 
-  more_pictures?: Array<string> ; 
+  quote_addon?: string; 
+  more_pictures?: Array<string> ;
+  references?: Array<React.ReactNode>;  
 }
 type StakeholderTag = 'Industry' | 'Academia' | 'Patient' | 'Medical Professional' | 'Milestone' | 'Other'; 
 type TypeTag = 'meta' ; 
@@ -37,6 +44,9 @@ const pics: { [key: string]: string } = {
  kolonko: "https://static.igem.wiki/teams/5247/photos/hp/kolonko-neu.jpg",
  svenja: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
  berens: "https://static.igem.wiki/teams/5247/photos/hp/berens.jpg",
+  draeger: "https://static.igem.wiki/teams/5247/photos/hp/oliver-draeger-patch-clamp.jpeg",
+  winkeljann: "https://static.igem.wiki/teams/5247/photos/hp/rnhale-winkeljann.jpg",
+  kuehnel: "https://static.igem.wiki/teams/5247/photos/hp/hp-philippk-hnel.jpeg ",
 };
 /* {
@@ -229,9 +239,9 @@ export const timelinedata: Array<TimelineDatenpunkt> = [
    language: "de",
    quote: "The more we know, the more opportunities we have.",
    aimofcontact: "The objective of the contact was to gain in-depth insights into the treatment and care of children with cystic fibrosis. The therapist's expertise was intended to help develop a better understanding of the challenges and necessary measures in the treatment of this chronic disease. In addition, the aim was to ascertain how the therapy is implemented in everyday life and which specific approaches and methods are particularly effective.",
    insights: "The interview yielded valuable insights into the regular implementation of the therapy, the use of aids and the adaptation of exercises to the individual needs of the patients. It was notable that the therapy has improved considerably thanks to better medication and adapted exercises, with a concomitant increase in life expectancy for children affected by cystic fibrosis. Of particular interest was the emphasis on the importance of sport and exercise, which should not only be therapeutically effective, but also increase quality of life. ",
    implementation: "The following statement by Katrin Westhoff had a particularly profound impact on our project: 'The more we know, the more opportunities we have.' We learned from the interview that the current medication is already helping many patients to a huge extent, but that there is still a significant opportunity for improvement. After all, successful gene therapy would markedly enhance the quality of life for those affected. The findings of this project will be disseminated to the relevant researchers in order to facilitate the rapid improvement of the quality of life of all cystic fibrosis patients, regardless of their mutation. ",
+    pictureurl_interview: "https://static.igem.wiki/teams/5247/photos/hp/katrin-westhoff-zoom.webp",
  },
  { 
    vorname: "Cristian-Gabriel",
@@ -314,7 +324,6 @@ export const timelinedata: Array<TimelineDatenpunkt> = [
    language: "de",
    quote: "",
    aimofcontact: "",
    insights: "",
    implementation: "",
  },
@@ -331,9 +340,9 @@ export const timelinedata: Array<TimelineDatenpunkt> = [
    language: "en",
    quote: "",
    aimofcontact: "",
    insights: "",
    implementation: "",
+    pictureurl_interview: ""
  },
  { 
    title: "Prof. Dr.",
@@ -347,11 +356,88 @@ export const timelinedata: Array<TimelineDatenpunkt> = [
    interviewtabid: "patchclamp",
    cardtext: "",
    language: "de",
-    quote: "",
+    quoteNachname: "Guckes",
-    aimofcontact: "",
+    quoteVorname: "Isabell",
+    quote: "We hadn’t initially considered patch-clamp measurements in our set of downstream applications, but it’s proven to be an exceptionally sensitive method for assessing CFTR conductance.",
-    insights: "",
+    aimofcontact: [<p>As part of our project, we aimed to demonstrate the functionality of the CFTR ion channel, after restoring
-    implementation: "",
+      it through our optimized Prime Editing, by using Patch-Clamp measurements. To ensure the optimal use of the
+       Patch-Clamp and to gain an insight into electrophysiology, we asked experts from the medical faculty at
+        Bielefeld University to critically examine our measurement planning. Prof. Dr. Erhard Wischmeyer, an
+         experienced scientist in this field who has worked at the Max Planck Institute for Biophysical Chemistry
+          in Göttingen, the development site of the Patch-Clamp technique<ScrollLinkWithChild targetId="desc-1"><sup>1</sup></ScrollLinkWithChild>, and currently leads the Cellular 
+          Neurophysiology working group at Bielefeld University, seemed to be an ideal interviewee. His 
+          knowledge and experience promised valuable insights and advice for conducting and optimizing our 
+          experiments. </p>],
+    insights: [ <><p>Prof. Dr. Wischmeyer taught us about the workflow of the Patch-Clamp technique. He highlighted the need 
+      for specialized electrodes and glass pipettes that must form a smooth surface devoid of the extracellular 
+      matrix (ECM). Additionally, he pointed out that measuring CFTR conductivity with the Patch-Clamp technique 
+      poses a technical challenge due to the low currents involved<ScrollLinkWithChild targetId="desc-2"><sup>2</sup></ScrollLinkWithChild>. He recommended using expression vectors 
+      for overexpressing the CFTR gene in HEK cells instead of epithelial cells from a nasal swab to achieve 
+      better results. Since Patch-Clamp measurements require a very sensitive testing environment, even 
+      challenging for the most experienced scientists, Prof. Dr. Wischmeyer invited us to conduct the 
+      measurements together with members of his group. 
+    </p>
+    <p>In addition to the Patch-Clamp technique, Prof. Dr. Wischmeyer informed us about E-cis measurements as a 
+      current electrophysiological measurement method alongside the Patch-Clamp technique. This method allows 
+      the measurement of the membrane potential above and below a monolayer of confluent cells<ScrollLinkWithChild targetId="desc-3"><sup>3</sup></ScrollLinkWithChild>. Consequently, 
+      it enables precise measurement of conductivity dependent on CFTR expression. </p>
+        </>],
+    implementation: [<> <p>We decided to use HEK293T cells lines from Mattijs Bulcaen from KU Leuven [Link] which do overexpress the 
+    correct CFTR and those which express CFTR with F508del for the Patch-Clamp measurements. To conduct the 
+    Patch-Clamp experiments, we contacted the Cellular Neurophysiology group to perform the necessary 
+    measurements. It was a pleasure to work together with Dr. Oliver Dräger[Link], who is working as a post-doc for 
+    the Cellular Neurophysiology working group at Bielefeld University. He taught us about the Patch-Clamp 
+    method and spent his valuable time supporting our project by guiding our Patch-Clamp measurements. </p>
+      <p>In summary, through the interview with Prof. Dr. Wischmeyer and the collaboration with his employee 
+      Oliver Dräger, we gained valuable insights and optimized our approach to effectively investigate and 
+      measure the functionality of the CFTR ion channel, thereby determining the efficiency of our Prime 
+      Editing strategy. </p></>],
+    pictureurl_implementation: "https://static.igem.wiki/teams/5247/photos/for-wiki-texts/hp-patch-clamp/bild-interssierte-wissenschaftler-oho.jpeg",
+    pictureurl_aim: "https://static.igem.wiki/teams/5247/photos/for-wiki-texts/hp-patch-clamp/20240625-184032.jpg",
+    references: [
+      <ol>
+                  {/*<!-- Citation num 1--> */}
+      <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="bielefeld-cebitec/human-practices#desc-1">
+          <span property="schema:author" typeof="schema:Person">
+              <span property="schema:Name"> Roth, F.</span>;
+              <span property="schema:Name"> Draguhn, A.</span>
+          </span>
+          <span property="schema:name">&nbsp;Die Entwicklung der Patch-Clamp-Technik. </span>
+          <i property="schema:publisher" typeof="schema:Organization"> Springer eBooks</i>
+          <b property="issueNumber" typeof="PublicationIssue"> </b>,&nbsp;
+          <span property="schema:pageBegin"> 1</span>-<span property="schema:pageEnd">14</span>
+          (<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2023">2023</time>).
+          <a className="doi" href="https://doi.org/10.1007/978-3-662-66053-9_1"> doi: 10.1007/978-3-662-66053-9_1</a>
+      </li>
+      {/*<!-- Citation num 2--> */}
+      <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-2">
+          <span property="schema:author" typeof="schema:Person">
+              <span property="schema:Name"> Mete, V.</span>
+          </span>
+          <span property="schema:name">&nbsp;Entwicklung und Validierung neuer nicht-invasiver Diagnosesysteme für Mucociliary Clearance Disorders (MCCD). </span>
+          <i property="schema:publisher" typeof="schema:Organization"> Dissertation, Westfälische Wilhelms-Universität Münster</i>
+          <b property="issueNumber" typeof="PublicationIssue">  </b>,&nbsp;
+          <span property="schema:pageBegin"> </span>
+          (<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2023">2023</time>).
+          <a className="doi" href="https://doi.org/10.17879/98958441905"> doi: 10.17879/98958441905</a>
+      </li>
+      {/*<!-- Citation num 3--> */}
+      <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-3">
+          <span property="schema:author" typeof="schema:Person">
+              <span property="schema:Name"> Giaever, I.</span>;
+              <span property="schema:Name"> Keese, C.</span>
+          </span>
+          <span property="schema:name">&nbsp;A morphological biosensor for mammalian cells. </span>
+          <i property="schema:publisher" typeof="schema:Organization"> Nature</i>
+          <b property="issueNumber" typeof="PublicationIssue"> 366</b>,&nbsp;
+          <span property="schema:pageBegin"> 591</span>-<span property="schema:pageEnd">592</span>
+          (<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 1993">1993</time>).
+          <a className="doi" href="https://doi.org/10.1038/366591a0"> doi: 10.1038/366591a0</a>
+      </li>
+      </ol>
+    ],
  },
  { 
    title: "Prof. Dr.",
@@ -396,7 +482,7 @@ export const timelinedata: Array<TimelineDatenpunkt> = [
    affiliation: "Harvard Medical School",  
    pictureurl: pics['svenja'],
    tag: "Academia",
-    heading: "First steps in LNPs",
+    heading: "",
    interviewtabid: "svenja",
    cardtext: "",
    language: "de",
@@ -435,10 +521,9 @@ export const timelinedata: Array<TimelineDatenpunkt> = [
    cardtext: "",
    language: "de",
    quote: "",
-    aimofcontact: "",
+    aimofcontact: "The aim of the interview was to get an answer to the question of whether we need an ethics vote for our project or not and to obtain guidelines for dealing with patient cells regarding ethical issues and data protection. ",
+    insights: "The discussion was very informative in terms of how we should approach this topic and focused primarily on the important factors that need to be considered when planning the handling of patient cells. These include which legal principles need to be observed, data protection, ethical considerations and, above all, detailed and specific information for the donor. It also made us look at the situation from many different angles and consider the risks of worst-case scenarios. Overall, this interview was very useful to us, and we were able to use the information we gained to develop a kind of guideline that allowed us to approach this sensitive topic, which was new to us, with a certain degree of confidence. ",
-    insights: "",
+    implementation: "Based on the knowledge we have gained, we have drawn up guidelines for our handling of the cells. We used this guide when handling the patient cells, to ensure they were handled in an ethically correct manner.",
-    implementation: "",
  },
  { 
    vorname: "Collaboration",
@@ -448,7 +533,7 @@ export const timelinedata: Array<TimelineDatenpunkt> = [
    pictureurl: pics['placeholder'],
    tag: "Academia",
    heading: "LNP Handbook",
-    interviewtabid: "",
+    interviewtabid: "handbook",
    cardtext: "",
    language: "de",
    quote: "",
@@ -458,21 +543,46 @@ export const timelinedata: Array<TimelineDatenpunkt> = [
    implementation: "",
  },
  { 
-    vorname: "",
+    vorname: "Benjamin",
-    nachnname: "",  
+    title: "Dr.",
-    job: "",
+    nachnname: "Winkeljann",  
+    job: "Co-Founder and CEO at RNhale",
    affiliation: "RNhale", 
-    pictureurl: pics['placeholder'],
+    pictureurl: pics['winkeljann'],
    tag: "Industry",
    heading: "Rnhale",
-    interviewtabid: "",
+    interviewtabid: "rnhale",
    cardtext: "",
    language: "de",
-    quote: "",
+    quote: "Spray-drying LNPs is a groundbreaking approach that enhances stability and enables efficient pulmonary delivery of mRNA, paving the way for innovative therapies for conditions like cystic fibrosis.",
-    aimofcontact: "",
+    aimofcontact: [<p>As part of our development process of an innovative, effective pulmonary delivery of therapeutic mRNA to fight cystic fibrosis, 
+      we conducted an interview with Dr. Benjamin Winkeljann, who is the Co-Founder of <a href="https://rnhale.com/">RNhale</a>. Dr. Benjamin 
-    insights: "",
+      Winkeljann has a wealth of experience in the field of RNA therapeutics and nanotechnology. His background includes extensive research in the
-    implementation: "",
+       development of lipid-based delivery systems, focusing on optimizing stability and efficacy for therapeutic applications. Winkeljann’s work 
+       is supported by cutting-edge research from academic institutions, including collaborations with Professor Olivia Merkel from the 
+       Ludwig-Maximilians-Universität in Munich, Germany, since his doctoral thesis in her working group. The interview with Winkeljann promoted
+        our project, which aimed to utilize spray-dried lipid nanoparticles (LNPs) for efficient delivery to the lung. By engaging with RNhale, we
+         sought to understand the nuances of their nano-embedded microparticle technology and how it could enhance our delivery systems.  </p>],
+    insights: [<p>RNhale's technology leverages advanced spray drying techniques to stabilize and deliver RNA therapeutics. During our interview, 
+      Winkeljann detailed several crucial aspects. Firstly, the stability and shelf-life of spray-dried LNPs are remarkable. RNhale’s siRNA 
+      formulations have maintained their integrity for up to 18 months at room temperature, and although specific data for mRNA is still pending, 
+      this suggests a promising shelf-life for mRNA formulations under similar conditions. The spray drying process itself involves mixing an ethanol
+       phase containing lipids with an aqueous phase containing RNA. This mixture is then spray-dried, forming LNPs as tiny spherical particles. 
+       Key parameters for this process include maintaining an internal drying temperature of around 100 °C and using excipients like lactose to 
+       preserve the nanoparticles' structure and function [1]. </p>,
+       <p>Ensuring the integrity and efficiency of the LNPs involves various methods, including gel electrophoresis, blotting, and functional readouts through transfection assays. 
+      After drying, the nanoparticles retain their spherical structure, which resembles that of "golf balls" under scanning electron microscopy (SEM)[1].
+       Moreover, RNhale employs artificial intelligence to optimize LNP formulations and predict the best drying conditions, reducing the need for 
+       extensive wet lab work. This AI-driven approach enhances efficiency and reliability in developing therapeutic nanoparticles. </p>],
+    implementation: [
+      <p>The interview with Dr. Benjamin Winkeljann from RNhale provided invaluable insights that will significantly enhance our project 
+        focused on mRNA delivery to the lungs using spray-dried LNPs. By seeking to integrate their proven techniques and innovative approach 
+        to spray-dry LNPs, we are optimistic about achieving superior stability, efficacy, and scalability in our therapeutic delivery systems.  </p>       
+      ],
+    pictureurl_aim: "https://static.igem.wiki/teams/5247/photos/hp/hp-rnhale-zoom.png",
+    pictureurl_interview: "https://static.igem.wiki/teams/5247/photos/for-wiki-texts/del-interview-rnhale/paper-overview.jpg",
+    pictureurl_implementation: "https://static.igem.wiki/teams/5247/photos/for-wiki-texts/del-interview-rnhale/paper-sem.jpg",
+    references: [<div>noch einfügen</div>]
  },
  { 
    title: "XXX",
@@ -483,7 +593,7 @@ export const timelinedata: Array<TimelineDatenpunkt> = [
    pictureurl: pics['placeholder'],
    tag: "Academia",
    heading: "",
-    interviewtabid: "",
+    interviewtabid: "liu",
    cardtext: "",
    quote: "",
    aimofcontact: "",
@@ -499,7 +609,7 @@ export const timelinedata: Array<TimelineDatenpunkt> = [
    pictureurl: pics['placeholder'],
    tag: "Academia",
    heading: "Corden",
-    interviewtabid: "",
+    interviewtabid: "corden",
    cardtext: "",
    language: "de",
    quote: "",
@@ -531,7 +641,7 @@ export const timelinedata: Array<TimelineDatenpunkt> = [
    nachnname: "Dräger",  
    job: "Bielefeld University",
    affiliation: "Research Group Cellular Neurophysiology", 
-    pictureurl: pics['placeholder'],
+    pictureurl: pics['draeger'],
    tag: "Academia",
    heading: "",
    interviewtabid: "patchclamp",

--- a/src/components/data/timelinepersontabs.tsx
+++ b/src/components/data/timelinepersontabs.tsx