Skip to content
Snippets Groups Projects
Commit e3142ee3 authored by Kaya Lange's avatar Kaya Lange
Browse files

Merge branch 'main' of ssh://gitlab.igem.org/2024/bielefeld-cebitec

parents a10770fd 14b1b3fd
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/App/HP.css
+ 27
− 0
View file @ e3142ee3
...@@ -38,4 +38,31 @@ ...@@ -38,4 +38,31 @@
justify-content: center; justify-content: center;
max-width: 70%; max-width: 70%;
max-height: 60%; max-height: 60%;
}
#left-col {
display: flex;
flex-direction: column;
}
#ref-img {
width: 100%;
height: auto;
}
.mitte {
flex-grow: 1; /* Nimmt den gesamten restlichen Platz ein */
}
.unten {
padding-bottom: 50px;
padding-left: 10px;
}
.mitte-parent{
display: grid;
} }
\ No newline at end of file
src/components/Graph.tsx
+ 901
− 18
View file @ e3142ee3
import React from 'react';
import { Pie } from 'react-chartjs-2'; import { Pie } from 'react-chartjs-2';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'; import React from 'react';
import { Bar } from 'react-chartjs-2';
import { Chart as ChartJS, Tooltip, Legend,ArcElement, BarElement, CategoryScale, LinearScale, Title, RadialLinearScale } from 'chart.js';
const backgroundcolorscale = [
'rgba(133, 15, 120, 0.2)',
'rgba(160, 167, 243, 0.2)',
'rgba(245, 125, 34, 0.2)',
'rgba(244, 204, 30, 0.2)',
'rgba(130, 149, 164, 0.2)',
'rgba(0, 101, 48, 0.2)',
'rbga(184, 91, 209, 0.2)',
'rbga(50, 35, 44, 0.2'
]
ChartJS.register(ArcElement, Tooltip, Legend);
const bordercolorscale = [
'rgba(133, 15, 120, 1)',
'rgba(160, 167, 243, 1)',
'rgba(245, 125, 34, 1)',
'rgba(244, 204, 30, 1)',
'rgba(130, 149, 164, 1)',
'rgba(0, 101, 48, 1)',
'rbga(184, 91, 209, 1)',
'rbga(50, 35, 44, 1'
]
ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale,
RadialLinearScale,
LinearScale,
BarElement,
Title);
const PieChart: React.FC = () => { const PieChart: React.FC = () => {
const data = { const data = {
...@@ -18,29 +46,800 @@ const PieChart: React.FC = () => { ...@@ -18,29 +46,800 @@ const PieChart: React.FC = () => {
0.2384159999999995, 0.2384159999999995,
0.003703 0.003703
], ],
backgroundColor: [ backgroundColor: backgroundcolorscale,
'rgba(255, 99, 132, 0.2)', borderColor: bordercolorscale,
'rgba(54, 162, 235, 0.2)', borderWidth: 1,
'rgba(255, 206, 86, 0.2)', },
'rgba(75, 192, 192, 0.2)', ],
'rgba(153, 102, 255, 0.2)', };
'rgba(255, 159, 64, 0.2)', const options = {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: '',
},
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const OpenToGeneTherapyatients: React.FC = () => {
const data = {
labels: ['Yes', 'Maybe', 'No'],
datasets: [
{
label: 'Percentage',
data: [
78.72,
19.86,
1.42
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Would you be open to gene therapy if it could significantly improve your symptoms?',
},
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const MostStressfulForRelativeatients: React.FC = () => {
const data = {
labels: ['Emotional Stress', 'Physiacal Symptoms', 'Financial Burden', 'Social Restrictions', 'Other'],
datasets: [
{
label: 'Percentage',
data: [
36.79,
32.78,
11.37,
17.73,
1.34
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Which aspects of the disease are most stressful for you or your relative?',
},
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const WhoAffectedatients: React.FC = () => {
const data = {
labels: ['I am affected', 'A Relative is affected'],
datasets: [
{
label: 'Percentage',
data: [
43.24,
56.76
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Are you affected by cystic fibrosis yourself or are you related to someone with cystic fibrosis?',
},
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const DoYouWantMoreInfoatients: React.FC = () => {
const data = {
labels: ['Yes', 'No'],
datasets: [
{
label: 'Percentage',
data: [
93.48,
6.52
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Would you like to see more information on the subject of gene therapy?',
},
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const HowOftenTreatmentatients: React.FC = () => {
const labels = ['Rarely', 'Monthly', 'Weekly', 'Several times per week', 'Daily'];
const data = {
labels,
datasets: [
{
label: "",
data: [
6.49,
6.49,
15.59,
9.73,
62.7
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'How often do you or your relative need medical treatment or therapy?',
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const WhatCocernsAboutGeneTherapyatients: React.FC = () => {
const labels = ['Mo concerns', 'Ethical questions', 'Long-term effects', 'Safety and side effects', 'Cost and accessibility'];
const data = {
labels,
datasets: [
{
data: [
0.54,
10.18,
59.46,
59.46,
32.43
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'What concerns do you have about gene therapy?',
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const HowMuchDoesItAffectYouatients: React.FC = () => {
const labels = ['1', '2', '3', '4', '5'];
const data = {
labels,
datasets: [
{
data: [
4.32,
12.43,
42.16,
32.97,
8.11
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: "How much does cystic fibrosis affect your or your relative's daily life? (1 = Not at all, 5 = Very much)"
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const WhichTherapyDoYouUseatients: React.FC = () => {
const labels = ['Psychological therapy', 'Physical therapy', 'Nutritional therapy', 'Medication therapy', 'Inhalation therapy', 'Others'];
const data = {
labels,
datasets: [
{
data: [
5.94,
26.32,
10.53,
29.2,
26.83,
1.19
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'Which form(s) of therapy do you or your relative use?',
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const WhichSymptomsatients: React.FC = () => {
const labels = ['Other', 'Headache', "Delayed Growth", 'Underweight', 'Frequent lung infections', 'Muscle tremors/weakness', 'constipation', 'Abdominal pain', 'Chronic cough' ];
const data = {
labels,
datasets: [
{
data: [
4.99,
6.98,
6.23,
13.47,
13.72,
2.0,
10.47,
23.19,
18.95
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'Which symptoms do you or your relative have most frequently?',
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const BasicPositionatients: React.FC = () => {
const labels = ['1', '2', '3', '4', '5'];
const data = {
labels,
datasets: [
{
data: [
2.14,
5.17,
27.14,
30.00,
35.00
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'What is your basic position on gene therapy? (1=Very negative, 5=Very positive)',
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const AgeDiagnosisatients: React.FC = () => {
const labels = ['>20', '10-20', '1-10', 'first months', 'first week', 'Newborn Screening', 'Before birth'];
const data = {
labels,
datasets: [
{
data: [
3.83,
2.73,
26.23,
21.86,
18.03,
26.23,
1.09
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'At what age were you or your relative diagnosed with cystic fibrosis?',
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const HeadrofGeneTherapyPatients: React.FC = () => {
const data = {
labels: ['Yes', 'No'],
datasets: [
{
label: 'Percentage',
data: [
76.76,
23.24
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Have you ever heard of gene therapy?',
},
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const MoreInfoOnTherapyBoth: React.FC = () => {
const labels = ['Yes', 'No'];
const data = {
labels,
datasets: [
{
label: 'Affected',
data: [
93.48,
6.52
],
backgroundColor: 'rgba(133, 15, 120, 0.2)',
borderColor: 'rgba(133, 15, 120, 1',
},
{
label: 'Unaffected',
data: [
92.00,
8.00
],
backgroundColor: 'rgba(160, 167, 243, 0.2)',
borderColor: 'rgba(160, 167, 243, 1)',
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'Would you like to see more information on the subject of gene therapy?',
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const HeardOfCFPublic: React.FC = () => {
const data = {
labels: ['Yes', 'No'],
datasets: [
{
label: 'Percentage',
data: [
82.89,
17.11
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Have you heard of cystic fibrosis?',
},
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const HeadOfGeneTherapyPublic: React.FC = () => {
const data = {
labels: ['Yes', 'No'],
datasets: [
{
label: 'Percentage',
data: [
67.58,
32.42
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Have you ever heard of gene therapy?',
},
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const HowDidYouLearnPublic: React.FC = () => {
const labels = ['I am affected', 'Family/Friends', 'School/University', 'Media', 'Healthcare provider', 'Other'];
const data = {
labels,
datasets: [
{
data: [
1.23,
25.15,
20.86,
44.17,
3.68,
4.91
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'How did you mainly learn about cystic fibrosis? ',
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const HowWellDoYouUnderstandGFPublic: React.FC = () => {
const data = {
labels: ['Extremely well', 'Somewhat well', 'Not so well', 'Not at all'],
datasets: [
{
label: 'Percentage',
data: [
19.38,
24.81,
44.96,
10.85
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'How well do you understand what gene therapy is?',
},
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const HowWellInformedAboutCFPublic: React.FC = () => {
const data = {
labels: ['Extremely well', 'Somewhat well', 'Not so well', 'Not at all'],
datasets: [
{
label: 'Percentage',
data: [
6.37,
21.66,
58.60,
13.38
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'How well informed are you about cystic fibrosis?',
},
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const WhatCouldGeneTherapyMeanForMedicinePublic: React.FC = () => {
const data = {
labels: ['Major advances in the treatment of diseases', 'Some progress, but also risks', 'More risks than benefits', 'No opinion'],
datasets: [
{
data: [
49.59,
47.97,
1.63,
0.81
], ],
borderColor: [ backgroundColor: backgroundcolorscale,
'rgba(255, 99, 132, 1)', borderColor: bordercolorscale,
'rgba(54, 162, 235, 1)', borderWidth: 1,
'rgba(255, 206, 86, 1)', },
'rgba(75, 192, 192, 1)', ],
'rgba(153, 102, 255, 1)', };
'rgba(255, 159, 64, 1)', const options = {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'What do you think gene therapy could mean for medicine?',
},
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const WhatMeasuresPublic: React.FC = () => {
const labels = ['Publicity campaigns on TV, radio and social media', 'Information events in schools and communities', "Information materials in doctors' surgeries and hospitals", 'Organization of fundraising runs and charity events', 'Online platforms and forums for affected and interested parties', 'Cooperation with companies for awareness-raising initiatives', 'Integration of the topic into school lessons', 'Documentaries and short films about life with cystic fibrosis'];
const data = {
labels,
datasets: [
{
label: 'General Survey',
data: [
22.87,
13.20,
13.69,
7.09,
12.72,
6.60,
9.82,
14.01
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'What measures do you think could be taken to raise awareness of cystic fibrosis?',
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const WouldYouDoGeneTherapyPublic: React.FC = () => {
const data = {
labels: ['Yes', 'No', 'Maybe'],
datasets: [
{
label: 'General Survey',
data: [
85.22,
13.04,
1.74
], ],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1, borderWidth: 1,
}, },
], ],
}; };
const options = { const options = {
responsive: true, responsive: true,
maintainAspectRatio: false maintainAspectRatio: false,
title: {
display: true,
text: 'Would you opt for gene therapy yourself?',
},
}; };
return ( return (
...@@ -50,4 +849,88 @@ const PieChart: React.FC = () => { ...@@ -50,4 +849,88 @@ const PieChart: React.FC = () => {
); );
}; };
export const WhatCocernsAboutGeneTherapyPublic: React.FC = () => {
const labels = ['No concerns', 'Ethical questions', 'Long-term effects', 'Safety and side effects', 'Cost and accessibility'];
const data = {
labels,
datasets: [
{
label: 'General Survey',
data: [
4.57,
14.61,
27.85,
28.77,
24.20
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'What concerns do you have about gene therapy?',
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const WhatFormMoreInfoPublic: React.FC = () => {
const labels = ['Informations brochures', 'Websites and online resources', 'TV documentaries and programs', 'Lectures and seminars', 'School and university courses ', 'Consultations with doctors and specialists', 'Social media and online communities', 'Other'];
const data = {
labels,
datasets: [
{
label: 'General Survey',
data: [
15.74,
16.63,
22.62,
1.77,
13.30,
13.97,
15.96,
0
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'In what form would you like to see more information?',
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export default PieChart; export default PieChart;
src/components/Tabs.tsx
+ 30
− 5
View file @ e3142ee3
...@@ -40,6 +40,12 @@ import Collapsible from "./Collapsible"; ...@@ -40,6 +40,12 @@ import Collapsible from "./Collapsible";
problem = true; problem = true;
problem_desc.push("interview language"); problem_desc.push("interview language");
} }
/* Expert on */
let expert = "";
if (data[i].experton) {
expert = `Expert on ${data[i].experton}`;
}
/* Aim/Goal */ /* Aim/Goal */
var goalheading: string = ""; var goalheading: string = "";
...@@ -152,19 +158,35 @@ import Collapsible from "./Collapsible"; ...@@ -152,19 +158,35 @@ import Collapsible from "./Collapsible";
<div className="row"> <div className="row">
<div className="col-6"> <div className="col-6">
<div className={"t-tag " + data[i].tag}> <div className={"t-tag " + data[i].tag}>
{data[i].job} {data[i].job} {data[i].affiliation}
</div> </div>
</div> </div>
<div className="col-3">{lang}</div> <div className="col" style={{padding: "5px"}}>{expert}</div>
<div className="col" style={{width: "20%", flex: "1 0 0%", padding: "5px"}}>{lang}</div>
</div> </div>
<div className="row"> <div className="row align-items-stretch">
<div className="col d-flex flex-column">
<div className="row flex-grow-1 mitte">
<p style={{paddingTop: "50px", fontSize: "large"}}>Summary:</p>
<p>{data[i].summary}</p>
</div>
<div className="row unten" style={{fontSize: "large"}}>
See how this influenced our project at
</div>
</div>
<div className="col-3">
<img className="middle sechpro img-fluid" src={data[i].pictureurl} />
</div>
</div>
{/* <div className="row">
<div className="col"> <div className="col">
<BlockQuoteB text={data[i].quote} cite={quoted}></BlockQuoteB> <p style={{paddingTop: "50px", fontSize: "large"}}>Summary:</p>
<p>{data[i].summary}</p>
</div> </div>
<div className="col-3"> <div className="col-3">
<img className="middle sechpro" src={data[i].pictureurl}/> <img className="middle sechpro" src={data[i].pictureurl}/>
</div> </div>
</div> </div> */}
<h4>{goalheading}</h4> <h4>{goalheading}</h4>
<div className="flexbox"> <div className="flexbox">
...@@ -189,6 +211,9 @@ import Collapsible from "./Collapsible"; ...@@ -189,6 +211,9 @@ import Collapsible from "./Collapsible";
{imp_img} {imp_img}
</div> </div>
<div className="col">
<BlockQuoteB text={data[i].quote} cite={quoted}></BlockQuoteB>
</div>
{int} {int}
{refs} {refs}
</> </>
......
src/contents/Human Practices/Feedback.tsx 0 → 100644
+ 40
− 0
View file @ e3142ee3
import { HowOftenTreatmentatients, MoreInfoOnTherapyBoth, OpenToGeneTherapyatients } from '../../components/Graph';
import { H4 } from '../../components/Headings';
import { Collapsible } from "../../comments/Collapsible";
export function HPFeedback(){
return(
<div>
<H4 text="Our surveys on cystic fibrosis and gene therapy"></H4>
<p> We are proud of our surveys on gene therapy and cystic fibrosis (CF), which explore knowledge about the disease and willingness to embrace gene therapy as a potential treatment. Since we wanted to differentiate between the general public and affected CF patients, we created two different surveys.</p>
<div className="row align-items-center">
<div className="col">
<HowOftenTreatmentatients/>
<p>The majority of respondents (62.70%) indicated that they or their relative require medical treatment or therapy daily. Weekly treatment was necessary for 14.59%, while 9.73% needed therapy several times per week. Only 6.49% reported needing treatment either monthly or rarely. The high frequency of daily treatments highlights the heavy burden of managing cystic fibrosis and reinforces the potential appeal of gene therapy, which could reduce the need for constant medical intervention. </p>
</div>
<div className="col">
<OpenToGeneTherapyatients/>
<p>A significant majority, 78.72%, indicated that they would be open to gene therapy if it significantly improved symptoms, while only 1.42% said no. This overwhelming support aligns with the hope patients have for less invasive and more effective treatments. This also reflects the possibility of gene therapy becoming a central treatment method, especially given the heavy therapeutic load CF patients already carry.</p>
</div>
<div className="col">
<MoreInfoOnTherapyBoth/>
<p>A vast majority, 93.48%, expressed interest in more information about gene therapy. This mirrors the general public’s desire for further education and suggests that while there is strong support for gene therapy, people still feel they lack sufficient knowledge to make fully informed decisions. Patients especially emphasized the importance of safety and long-term efficacy, areas that should be focal points in future communications. </p>
</div>
</div>
<div>
<H4 text="Concluding thoughts "></H4>
<p>The surveys with both the general public and CF patients show promising openness towards gene therapy, though concerns about safety and long-term effects remain. Emotional stress was highlighted as a greater burden than physical symptoms, reinforcing the appeal of gene therapy to reduce both physical and emotional challenges. Most patients require daily or frequent therapies like medication, physiotherapy, and inhalation, making a less frequent or even one-time gene therapy, as proposed in our research, highly attractive. Participants added comments such as <strong>“The dream of healing still exists!”</strong>, encouraging us in our research.</p>
<p>Both groups are ready for gene therapy, with patients showing fewer "no concerns," likely due to their familiarity with risks and off-target effects. This underscores the importance of our focus on safety and precision to minimize risks. Our research is designed to address these concerns through targeted approaches – <strong>we are PreCyse!</strong></p>
<p>Additionally, there’s a clear demand for more information, especially via platforms like TV, social media, and the internet. Targeted educational campaigns through these channels will be crucial to increase awareness and understanding, helping to build on the existing optimism and foster greater acceptance of gene therapy, like we do in our various public outreach efforts for science communication.</p>
</div>
<div>
<Collapsible text="See here the full results of the surveys">
</Collapsible>
</div>
</div>
)
}
\ No newline at end of file
src/contents/Human Practices/IHP.tsx
+ 2
− 1
View file @ e3142ee3
...@@ -2,6 +2,7 @@ import { ButtonOne } from "../../components/Buttons"; ...@@ -2,6 +2,7 @@ import { ButtonOne } from "../../components/Buttons";
import { HPTimeline } from "../../components/HP-timeline"; import { HPTimeline } from "../../components/HP-timeline";
import { LoremMedium, LoremShort } from "../../components/Loremipsum"; import { LoremMedium, LoremShort } from "../../components/Loremipsum";
import { Section, Subesction } from "../../components/sections"; import { Section, Subesction } from "../../components/sections";
import { HPFeedback } from "./Feedback";
import { HP3new } from "./HP svgs/hp3"; import { HP3new } from "./HP svgs/hp3";
import { HPUnderstanding } from "./HP svgs/understanding"; import { HPUnderstanding } from "./HP svgs/understanding";
...@@ -114,7 +115,7 @@ export function HPIntegrated(){ ...@@ -114,7 +115,7 @@ export function HPIntegrated(){
<LoremMedium/> <LoremMedium/>
</Subesction> </Subesction>
<Subesction title="Feedback" id="Integrated Human Practices4"> <Subesction title="Feedback" id="Integrated Human Practices4">
<LoremMedium/> <HPFeedback/>
</Subesction> </Subesction>
<Subesction title="Conclusion" id="Integrated Human Practices5"> <Subesction title="Conclusion" id="Integrated Human Practices5">
<LoremMedium/> <LoremMedium/>
......
src/contents/example.tsx
+ 9
− 4
View file @ e3142ee3
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
import { BlueInfoBox, BulbBox, InfoBox, NoteBox, QaBox, WarnBox } from "../components/Boxes"; import { BlueInfoBox, BulbBox, InfoBox, NoteBox, QaBox, WarnBox } from "../components/Boxes";
import { BFHMoreButton, ButtonOne } from "../components/Buttons"; import { BFHMoreButton, ButtonOne } from "../components/Buttons";
import Collapsible from "../components/Collapsible"; import Collapsible from "../components/Collapsible";
import PieChart from "../components/Graph"; import PieChart, { HowOftenTreatmentatients, MoreInfoOnTherapyBoth, OpenToGeneTherapyatients } from "../components/Graph";
import H1, { H2, H3, Hhighlight, Hhopp, Hsmoke, Hspoiler, Hwave } from "../components/Headings"; import H1, { H2, H3, Hhighlight, Hhopp, Hsmoke, Hspoiler, Hwave } from "../components/Headings";
import { LoremMedium, LoremShort } from "../components/Loremipsum"; import { LoremMedium, LoremShort } from "../components/Loremipsum";
import SimpleSlider from "../components/Slider"; import SimpleSlider from "../components/Slider";
import React from 'react'; import React from 'react';
import { Bar, Doughnut, PolarArea } from 'react-chartjs-2'; import { Bar, Doughnut, PolarArea } from 'react-chartjs-2';
import { Chart as ChartJS, Tooltip, Legend, BarElement, CategoryScale, LinearScale, Title, RadialLinearScale } from 'chart.js'; import { Chart as ChartJS, Tooltip, Legend, BarElement, CategoryScale, LinearScale, Title, RadialLinearScale } from 'chart.js';
import ProteinViewer from '../components/Fanzorviewer.tsx'; /* import ProteinViewer from '../components/Fanzorviewer.tsx'; */
import { useTabNavigation } from "../utils/TabNavigation.tsx"; import { useTabNavigation } from "../utils/TabNavigation.tsx";
...@@ -27,10 +27,12 @@ export function Example() { ...@@ -27,10 +27,12 @@ export function Example() {
useTabNavigation(); useTabNavigation();
return ( return (
<> <>
<div className="container">
{/* <div className="container">
<h1>Protein Structure Viewer</h1> <h1>Protein Structure Viewer</h1>
<ProteinViewer/> <ProteinViewer/>
</div> </div> */}
<h1> Here you can see what we can use</h1> <h1> Here you can see what we can use</h1>
<h2>Collapisbles</h2> <h2>Collapisbles</h2>
...@@ -44,6 +46,9 @@ export function Example() { ...@@ -44,6 +46,9 @@ export function Example() {
<div className="col"> <div className="col">
<Collapsible title="Title" id="collapsible"> <LoremMedium></LoremMedium></Collapsible> <Collapsible title="Title" id="collapsible"> <LoremMedium></LoremMedium></Collapsible>
</div> </div>
<HowOftenTreatmentatients/>
<OpenToGeneTherapyatients/>
<MoreInfoOnTherapyBoth/>
</div> </div>
<h2>Boxes</h2> <h2>Boxes</h2>
<div className="row"> <div className="row">
......
src/data/hptimelinedata.tsx
+ 518
− 498
View file @ e3142ee3
Source diff could not be displayed: it is too large. Options to address this: view the blob.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment