Forked from
2024 Competition / Bielefeld-CeBiTec
2085 commits behind the upstream repository.
-
Liliana Sanfilippo authoredLiliana Sanfilippo authored
human-practices.tsx 38.39 KiB
/*
- seitwärts
- mit Farben und Text anzeigen wozu die gehören
- bei show more unten drunter Tabs öffnen
- wenn man auf die Person klickt soll es Infos über die Person anzeigen
- kann mn die Karten nach Links und nach rechts ausweiten zb für Mehr infos für die Person?
- Filter mit HalbkreisDing als Tabsteuerung | Einteilung nach Bereich (Academia, Insustry, ..., und auch nach Delivery und Mechanism)
- DNA Strang als Timeline?
*/
/* <br/>
<h3>Name</h3>
<hr/>
<div className="row">
<div className="col-2">
<div className="t-tag Tag">
Beruf
</div>
</div>
<div className="col">Original language: German</div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="Quote" cite="."></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
<h4>Aim of contact</h4>
<p></p>
<h4>Insights</h4>
<p></p>
<h4>Clarification</h4>
<p></p>
<h4>Implementation</h4>
<p></p> */
/*
<h4>Aim of contact</h4>
<p></p>
<h4>Insights</h4>
<p></p>
<h4>Clarification</h4>
<p></p>
<h4>Implementation</h4>
<p></p>
*/
import { TimeHori } from "../components/HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
import { ButtonOne, TabButtonRow, openFromOtherPage, openTab } from "../components/Buttons";
import { BlockQuoteB } from "../components/Quotes";
import { Box, Tab } from "@mui/material";
import {TabContext, TabList, TabPanel} from '@mui/lab';
import React, { useEffect } from "react";
import { useLocation } from "react-router-dom";
let timelinebuttonrowdata = [
{
buttonname: "All",
node: <TimeHori tab="" ></TimeHori>,
cssname: "First"
},
{
node: <TimeHori tab="Patient" ></TimeHori>,
buttonname: "Patients",
cssname: "Patient"
},
{
node: <TimeHori tab="Medical Professional" ></TimeHori>,
buttonname: "Medical Professionals",
cssname: "Medical"
},
{
node: <TimeHori tab="Academia" ></TimeHori>,
buttonname: "Academia",
cssname: "Academia"
},
{
node: <TimeHori tab="Industry" ></TimeHori>,
buttonname: "Industry",
cssname: "Industry"
}
]
let timelinepersontabs =[
{
node: <>
<br/>
<h3>Max Beckmann</h3>
<h5>First official interview</h5>
<hr/>
<div className="row">
<div className="col-2">
<div className="t-tag Patient">
Patient
</div>
</div>
<div className="col-3">Original language: German</div>
<div className="col"><button>Go to interview</button></div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="Quote" cite="."></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/photos/hp/hp-max-portrait.jpg"/>
</div>
</div>
<h4>Aim of contact</h4>
<p></p>
<h4>Insights</h4>
<p></p>
<h4>Clarification</h4>
<p></p>
<h4>Implementation</h4>
<p></p>
</>,
cssname: "InvMax1"
},
{
node: <>
<br/>
<h3>Max Beckmann</h3>
<h5>Feedback Interview</h5>
<hr/>
<div className="row">
<div className="col-2">
<div className="t-tag Patient">
Patient
</div>
</div>
<div className="col-3">Original language: German</div>
<div className="col"><button>Go to interview</button></div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="Quote" cite="."></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/photos/hp/hp-max-portrait.jpg"/>
</div>
</div>
<h4>Aim of contact</h4>
<p></p>
<h4>Insights</h4>
<p></p>
<h4>Clarification</h4>
<p></p>
<h4>Implementation</h4>
<p></p>
</>,
cssname: "InvMax2"
},
{
node: <>
<br/>
<h3>Dr. Eva-Maria Berens</h3>
<hr/>
<div className="row">
<div className="col-2">
<div className="t-tag Academia">
Ethics Committee
</div>
</div>
<div className="col-3">Original language: German</div>
<div className="col"><button>Go to interview</button></div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="Quote" cite="Dr. Eva-Maria Berens"></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
<h4>Aim of contact</h4>
<p>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. </p>
<h4>Insights</h4>
<p>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. </p>
{/* <h4>Clarification</h4>
<p></p> */}
<h4>Implementation</h4>
<p>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. </p>
</>,
cssname: "Berens"
},
{
node: <>
<br/>
<h3>Prof. Dr. Erhard Wischmeyer und Dr. Oliver Dräger </h3>
<h4>Research Group Cellular Neurophysiology, Bielefeld University</h4>
<hr/>
<div className="row">
<div className="col-2">
<div className="t-tag Academia">
Research Group
</div>
</div>
<div className="col-3">Original language: German</div>
<div className="col"><button>Got to Interview with Prof. Wischmeyer</button></div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="Quote" cite="."></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
<img className="img-right img-half" src="https://static.igem.wiki/teams/5247/photos/for-wiki-texts/hp-patch-clamp/20240625-184032.jpg"/>
<div>
<h4>Aim of contact</h4>
<p>As part of our project, we aimed to demonstrate the functionality of the CFTR ion channel, after restoring
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<a href="desc-1"><sup>1</sup></a>, 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>
</div>
<br/>
<div className="row">
<div className="col2punkt5">
<img src="https://static.igem.wiki/teams/5247/photos/for-wiki-texts/hp-patch-clamp/bild-patch-clamp-isi-oliver.jpeg" />
</div>
<div className="col">
<h4>Insights</h4>
<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<a href="desc-2"><sup>2</sup></a>. 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<a href="desc-3"><sup>3</sup></a>. Consequently,
it enables precise measurement of conductivity dependent on CFTR expression. </p>
</div>
</div>
<h4>Implementation</h4>
<div className="row align-items-center">
<div className="col">
<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, 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>
</div>
<div className="col-5">
<img src="https://static.igem.wiki/teams/5247/photos/for-wiki-texts/hp-patch-clamp/bild-interssierte-wissenschaftler-oho.jpeg" style={{maxHeight: "300px"}}/>
</div>
</div>
<h4>References</h4>
{/*<!-- 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"> Die Entwicklung der Patch-Clamp-Technik. </span>
<i property="schema:publisher" typeof="schema:Organization"> Springer eBooks</i>
<b property="issueNumber" typeof="PublicationIssue"> </b>,
<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"> 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>,
<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"> A morphological biosensor for mammalian cells. </span>
<i property="schema:publisher" typeof="schema:Organization"> Nature</i>
<b property="issueNumber" typeof="PublicationIssue"> 366</b>,
<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>
</>,
cssname: "InvWischmeyer"
},
{
node: <>
<br/>
<h3>Nicole Friedlein</h3>
<hr/>
<div className="row">
<div className="col-2">
<div className="t-tag Ethics">
Phd
</div>
</div>
<div className="col-3">Original language: German</div>
<div className="col"><button>Go to interview</button></div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="Quote" cite="."></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
<h4>Aim of contact</h4>
<p></p>
<h4>Insights</h4>
<p></p>
<h4>Clarification</h4>
<p></p>
<h4>Implementation</h4>
<p></p>
</>,
cssname: "InvFriedlein"
},
{
node: <>
<br/>
<h3>Rnahale</h3>
<hr/>
<div className="row">
<div className="col-2">
<div className="t-tag Industry">
Beruf
</div>
</div>
<div className="col">Original language: German</div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="Quote" cite="."></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
<h4>Aim of contact</h4>
<p></p>
<h4>Insights</h4>
<p></p>
<h4>Clarification</h4>
<p></p>
<h4>Implementation</h4>
<p></p>
</>,
cssname: "InvRNale"
},
{
node: <>
<br/>
<h3>Mattijs Bulcaen</h3>
<hr/>
<div className="row">
<div className="col-5">
<div className="t-tag Academia">
Phd. Student (Molecular Virology and Gene Therapy)
</div>
</div>
<div className="col-3">Original language: English</div>
<div className="col"><button>Go to interview</button></div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="Quote" cite="."></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
<h4>Aim of contact</h4>
<p></p>
<h4>Insights</h4>
<p></p>
<h4>Clarification</h4>
<p></p>
<h4>Implementation</h4>
<p></p>
</>,
cssname: "InvBulcaen1"
},
{
node: <>
<br/>
<h3>Mattijs Bulcaen</h3>
<h5>Feedback Interview</h5>
<hr/>
<div className="row">
<div className="col-5">
<div className="t-tag Academia">
Phd. Student (Molecular Virology and Gene Therapy)
</div>
</div>
<div className="col">Original language: English</div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="Quote" cite="."></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
<h4>Aim of contact</h4>
<p></p>
<h4>Insights</h4>
<p></p>
<h4>Clarification</h4>
<p></p>
<h4>Implementation</h4>
<p></p>
</>,
cssname: "InvBulcaen2"
},
{
node: <>
<br/>
<h3>Julia</h3>
<hr/>
<div className="row">
<div className="col-2">
<div className="t-tag Patient">
Parent
</div>
</div>
<div className="col-3">Original language: German</div>
<div className="col"><button>Go to interview</button></div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="Quote" cite="."></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
<h4>Aim of contact</h4>
<p></p>
<h4>Insights</h4>
<p></p>
<h4>Clarification</h4>
<p></p>
<h4>Implementation</h4>
<p></p>
</>,
cssname: "InvJulia"
},
{
node: <>
<br/>
<h3>Joshua Bauder</h3>
<hr/>
<div className="row">
<div className="col-1">
<div className="t-tag Patient">
Parent
</div>
</div>
<div className="col-3">Original language: English</div>
<div className="col"><button>Go to interview</button></div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="Quote" cite="."></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
<h4>Aim of contact</h4>
<p></p>
<h4>Insights</h4>
<p></p>
<h4>Clarification</h4>
<p></p>
<h4>Implementation</h4>
<p></p>
</>,
cssname: "InvJoshua"
},
{
node: <>
<br/>
<h3>Katrin Westhoff</h3>
<h5>Initial Interview</h5>
<hr/>
<div className="row">
<div className="col-2">
<div className="t-tag Medical">
Physiotherapist
</div>
</div>
<div className="col-3">Original language: German</div>
<div className="col"><button>See interview</button></div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="The more we know, the more opportunities we have." cite="Katrin Westhoff"></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/photos/hp/hp-katrin-portrait.jpg"/>
</div>
</div>
<h4>Aim of contact</h4>
<p>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. </p>
<h4>Insights</h4>
<p>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. </p>
{/* <h4>Clarification</h4>
<p></p> */}
<h4>Implementation</h4>
<p>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. </p>
<button>Jump to visit</button>
</>,
cssname: "InvWesthoff"
},
{
node: <>
<br/>
<h3>Katrin Westhoff</h3>
<h5>Visit</h5>
<hr/>
<div className="row">
<div className="col-2">
<div className="t-tag Medical">
Physiotherapist
</div>
</div>
<div className="col">Original language: German</div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="Quote" cite="."></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/photos/hp/hp-katrin-portrait.jpg"/>
</div>
</div>
<h4>Aim of contact</h4>
<p></p>
<h4>Insights</h4>
<p></p>
<h4>Clarification</h4>
<p></p>
<h4>Implementation</h4>
<p></p>
</>,
cssname: "BesWesthoff"
},
{
node: <>
<br/>
<h3>Cristian-Gabriel Olariu</h3>
<hr/>
<div className="row">
<div className="col-2">
<div className="t-tag Medical">
Pediatrician
</div>
</div>
<div className="col">Original language: German</div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="Quote" cite="."></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
<h4>Aim of contact</h4>
<p></p>
<h4>Insights</h4>
<p></p>
<h4>Clarification</h4>
<p></p>
<h4>Implementation</h4>
<p></p>
</>,
cssname: "InvOlariu"
},
{
node: <>
<br/>
<h3>Dr. Katharina Kolonko</h3>
<hr/>
<div className="row">
<div className="col-2">
<div className="t-tag Academia">
Beruf
</div>
</div>
<div className="col">Original language: German</div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="Quote" cite="."></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
<h4>Aim of contact</h4>
<p></p>
<h4>Insights</h4>
<p></p>
<h4>Clarification</h4>
<p></p>
<h4>Implementation</h4>
<p></p>
</>,
cssname: "InvKolonko"
},
{
node: <>
<br/>
<h3>Prof. Dr. Christoph Weber</h3>
<hr/>
<div className="row">
<div className="col-2">
<div className="t-tag Academia">
Beruf
</div>
</div>
<div className="col">Original language: German</div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="Quote" cite="."></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
<h4>Aim of contact</h4>
<p></p>
<h4>Insights</h4>
<p></p>
<h4>Clarification</h4>
<p></p>
<h4>Implementation</h4>
<p></p>
</>,
cssname: "InvWeber"
},
{
node: <>
<br/>
<h3>Prof. Dr. Stefan Hammer</h3>
<hr/>
<div className="row">
<div className="col-2">
<div className="t-tag Academia">
Beruf
</div>
</div>
<div className="col">Original language: German</div>
</div>
<div className="row">
<div className="col">
<BlockQuoteB text="Quote" cite="."></BlockQuoteB>
</div>
<div className="col-3">
<img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
<h4>Aim of contact</h4>
<p></p>
<h4>Insights</h4>
<p></p>
<h4>Clarification</h4>
<p></p>
<h4>Implementation</h4>
<p></p>
</>,
cssname: "InvHammer"
},
]
// die height für className="timeline row align-items-center" muss angepasst werden, damit die Boxen höher sein können
export function HumanPractices() {
openTab({cityName: "All", cla: "timelinecardtabs"});
const location = useLocation();
useEffect(() => {
const params = new URLSearchParams(location.search);
const collapseId = params.get('collapseId');
const tabId = params.get('tab');
// Scroll to the section specified by collapseId
if (collapseId) {
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',
});
}
}
// Open the tab specified by tabId
if (tabId) {
openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
}
}, [location.search]);
return (
<div className="row mt-4">
<BlockQuoteB
text="Human Practices is the study of how your work affects the world, and how the world affects your work."
cite="- Peter Carr, Director of Judging"
/>
<HPOverview/>
<HPTimeline/>
{/* <HPTabsTwo/> */}
<section id="Reflection" >
<div className="center">
<h3 className="col personalstyleone">Reflection Framework</h3>
</div>
</section>
{/*
<section id="Implementation" className="section">
<div className="center">
<h3 className="col personalstyleone">Implementation</h3>
</div>
</section> */}
</div>
);
}
export function HPTabs(){
const [value, setValue] = React.useState('1');
const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
setValue(newValue);
};
return(
<Box sx={{ width: '100%', typography: 'body1' }}>
<TabContext value={value}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList onChange={handleChange} aria-label="lab API tabs example">
<Tab label="Patient Needs" value="1" />
<Tab label="Scientific Challenges" value="2" />
<Tab label="Academic consideration" value="3" />
<Tab label="Ethical questions" value="4" />
<Tab label="Medical perspectives" value="5" />
</TabList>
</Box>
<TabPanel value="1"> </TabPanel>
<TabPanel value="2"> </TabPanel>
<TabPanel value="3"> </TabPanel>
<TabPanel value="4"> </TabPanel>
<TabPanel value="5"> </TabPanel>
</TabContext>
</Box>
)
}
/* <div className="methods-node">
<div>R<sup>3</sup></div>
</div>
<div className="methods-node">
<div>Human Practices Cycle</div>
</div>
<div className="methods-node">
<div>Stakeholder Framework</div>
</div>
<div className="methods-node">
<div>Feedback Cycle</div>
</div>
<div className="methods-node">
<div></div>
</div> */
export function HPTabsTwo(){
return(
<>
<div className="row align-items-center">
<div className="col"></div>
<div className="col-8">
<div className="methods-node">
<div>Project selection</div>
</div>
<div className="methods-node">
<div>Foundation</div>
</div>
<div className="methods-node">
<div>Diversification</div>
</div>
<div className="methods-node">
<div>Fine-tuning</div>
</div>
<div className="methods-node">
<div>Finalization</div>
</div>
</div>
<div className="col"></div>
</div>
<div className="row align-items-center">
<div className="col-3">
{/* <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList onChange={handleChange} aria-label="lab API tabs example">
<Tab label="Patient Needs" value="1" />
<Tab label="Scientific Challenges" value="2" />
<Tab label="Academic consideration" value="3" />
<Tab label="Ethical questions" value="4" />
<Tab label="Medical perspectives" value="5" />
</TabList>
</Box> */}
</div>
<div className="col">
{/* <TabPanel value="1"> 1 </TabPanel>
<TabPanel value="2"> 2 </TabPanel>
<TabPanel value="3"> 3 </TabPanel>
<TabPanel value="4"> 4 </TabPanel>
<TabPanel value="5"> 5 </TabPanel> */}
</div>
</div>
</>
)
}
{/*
*/}
/* <Tab label="Problem" value="1" />
<Tab label="Influence" value="5" />
<Tab label="Patient Needs" value="2" />
<Tab label="Scientific Challenges" value="3" />
<Tab label="Surveys" value="4" /> */
function HPOverview(){
return(
<section id="Overview" className="section">
<div className="center" >
<h3 className="col personalstyleone">Overview</h3>
</div>
<div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
<div className="col">
<ButtonOne text="Inspiration" open="inspiration"></ButtonOne>
</div>
<div className="col">
<ButtonOne text="Methods" open="methods"></ButtonOne>
</div>
<div className="col">
<ButtonOne text="Values and goals" open="values"></ButtonOne>
</div>
<div className="col">
<ButtonOne text="Stakeholders" open="stakeholders"></ButtonOne>
</div>
</div>
<div className="col cycletab" id="inspiration" style={{display: "block"}}>Hallo </div>
<div className="col cycletab" id="values" style={{display: "none"}}>Hallo </div>
<div className="col cycletab" id="methods" style={{display: "none"}}>Hallo </div>
<div className="col cycletab" id="stakeholders" style={{position: "relative", height: "fit-content", display: "none"}}>
<MindMapTwo></MindMapTwo>
</div>
</section>
)
}
function HPTimeline(){
return(
<section id="Timeline" className="section">
<div className="center">
<h3 className="col personalstyleone">Timeline</h3>
</div>
<TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" />
<ButtonRowTabs cla="timelinecardtabs" data={timelinebuttonrowdata}/>
<BFHStyleTabs cla="timelinepersontabs" data={timelinepersontabs}></BFHStyleTabs>
</section>
)
}
function MindMapTwo(){
return(
<div className="mindmap">
{/* <!--LEFT--> */}
<ol className="children children_leftbranch">
<li className="children_item">
<div className="node" >
<div id="L1" className="node_text"> Medical <br/> Professionals</div>
</div>
<ol className="children">
<li className="children_item">
<div className="node">
<div id="L1.1" className="node_text">Katrin</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div id="L1.2" className="node_text">Cristian</div>
</div>
</li>
</ol>
</li>
<li className="children_item">
<div className="node">
<div id="L2" className="node_text">Industry</div>
</div>
<ol className="children">
<li className="children_item">
<div className="node">
<div className="node_text">L2.1</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div className="node_text">L2.2</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div className="node_text">L2.3</div>
</div>
</li>
</ol>
</li>
<li className="children_item">
<div className="node">
<div id="L3" className="node_text">iGem</div>
</div>
<ol className="children">
<li className="children_item">
<div className="node">
<div className="node_text">L2.1</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div className="node_text">L2.2</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div className="node_text">L2.3</div>
</div>
</li>
</ol>
</li>
</ol>
{/* <!--CENTER--> */}
<div className="node node_root">
<div className="node_text">Stakeholders</div>
</div>
{/* <!--RIGHT--> */}
<ol className="children children_rightbranch">
<li className="children_item">
<div className="node">
<div id="R1" className="node_text">Patients & <br/> next of kin </div>
</div>
<ol className="children">
<li className="children_item">
<div className="node">
<div id="R1.1" className="node_text">Max</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div id="R1.2" className="node_text">Julia</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div id="R1.3" className="node_text">Joshua</div>
</div>
</li>
</ol>
</li>
<li className="children_item">
<div className="node">
<div id="R2" className="node_text">Academia</div>
</div>
<ol className="children">
<li className="children_item">
<div className="node">
<div id="R2.1" className="node_text">Mattijs</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div className="node_text">R2.2</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div className="node_text">R2.3</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div className="node_text">R2.4</div>
</div>
</li>
</ol>
</li>
<li className="children_item">
<div className="node">
<div id="R3" className="node_text">Society</div>
</div>
<ol className="children">
<li className="children_item">
<div className="node">
<div id="R3.1" className="node_text">Krankk.</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div id="R3.2" className="node_text">Ethik</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div className="node_text">R3.3</div>
</div>
</li>
</ol>
</li>
</ol>
</div>
)
}
export function idTabLine({beruf, tagend, lang}:{beruf: string, tagend: string, lang: string}){
let cl = "t-tag " + tagend
return(
<div className="row">
<div className="col-2">
<div className={cl}>
{beruf}
</div>
</div>
<div className="col"> Original language: {lang}</div>
</div>
)
}