Newer
Older
/*
- 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?
*/
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/* <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 { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
import { ButtonOne, TabButtonRow, openFromOtherPage, openTab } from "../components/Buttons";
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>,
},
{
node: <TimeHori tab="Patient" ></TimeHori>,
buttonname: "Patients",
cssname: "Patient"
},
{
node: <TimeHori tab="Medical Professional" ></TimeHori>,
cssname: "Medical"
},
{
node: <TimeHori tab="Academia" ></TimeHori>,
buttonname: "Academia",
cssname: "Academia"
},
{
node: <TimeHori tab="Industry" ></TimeHori>,
buttonname: "Industry",
cssname: "Industry"
}
]
<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>
<hr/>
<div className="row">
<div className="col-2">
<div className="t-tag Academia">
<div className="col-3">Original language: German</div>
<div className="col"><button>Go to interview</button></div>
<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>
<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> */}
<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>
<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">
<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>
<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>
<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="bielefeld-cebitec/human-practices#desc-1">
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<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>
<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>
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
<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>
</>,
<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>
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
<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>
<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>
<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>
<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/placeholders/placehilderperson.jpeg"/>
</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> */}
<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>
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
<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/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: "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>
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
<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>
</>,
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
<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>
</>,
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
<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>
// die height für className="timeline row align-items-center" muss angepasst werden, damit die Boxen höher sein können
Liliana Sanfilippo
committed
openTab({cityName: "All", cla: "timelinecardtabs"});
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]);
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"
/>
<section id="Reflection" >
<div className="center">
<h3 className="col personalstyleone">Reflection Framework</h3>
</div>
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
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> */
<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 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>
<TabPanel value="2"> 2 </TabPanel>
<TabPanel value="3"> 3 </TabPanel>
<TabPanel value="4"> 4 </TabPanel>
</>
)
}
{/*
*/}
/* <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>
)
}
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
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>