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

src/App/HP.css

@@ -38,4 +38,31 @@
     justify-content: center;
     max-width: 70%;
     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/Tabs.tsx

@@ -40,6 +40,12 @@ import Collapsible from "./Collapsible";
         problem = true;
         problem_desc.push("interview language"); 
       }
+      
+      /* Expert on  */
+      let expert = ""; 
+      if (data[i].experton) {
+        expert = `Expert on ${data[i].experton}`; 
+      }
 
       /* Aim/Goal */
       var goalheading: string = ""; 
@@ -152,19 +158,35 @@ import Collapsible from "./Collapsible";
                   <div className="row">
                     <div className="col-6">
                       <div className={"t-tag " + data[i].tag}>
-                          {data[i].job}
+                          {data[i].job} {data[i].affiliation}
                       </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 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">
-                      <BlockQuoteB text={data[i].quote} cite={quoted}></BlockQuoteB>
+                    <p style={{paddingTop: "50px", fontSize: "large"}}>Summary:</p>
+                    <p>{data[i].summary}</p>
                     </div>
                     <div className="col-3">
                       <img className="middle sechpro" src={data[i].pictureurl}/>
                     </div>
-                  </div>
+                  </div> */}
                   
                   <h4>{goalheading}</h4>
                   <div className="flexbox">
@@ -189,6 +211,9 @@ import Collapsible from "./Collapsible";
                      
                     {imp_img}
                   </div>
+                  <div className="col">
+                      <BlockQuoteB text={data[i].quote} cite={quoted}></BlockQuoteB>
+                  </div>
                   {int}
                   {refs}
             </>

src/contents/Human Practices/Feedback.tsx

+
+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,6 +2,7 @@ import { ButtonOne } from "../../components/Buttons";
 import { HPTimeline } from "../../components/HP-timeline";
 import { LoremMedium, LoremShort } from "../../components/Loremipsum";
 import { Section, Subesction } from "../../components/sections";
+import { HPFeedback } from "./Feedback";
 import  { HP3new } from "./HP svgs/hp3";
 import { HPUnderstanding } from "./HP svgs/understanding";
 
@@ -114,7 +115,7 @@ export function HPIntegrated(){
                 <LoremMedium/>
             </Subesction>
             <Subesction title="Feedback" id="Integrated Human Practices4">
-                <LoremMedium/>
+                <HPFeedback/>
             </Subesction>
             <Subesction title="Conclusion" id="Integrated Human Practices5">
                 <LoremMedium/>

src/contents/example.tsx

@@ -2,14 +2,14 @@
 import { BlueInfoBox, BulbBox, InfoBox, NoteBox, QaBox, WarnBox } from "../components/Boxes";
 import { BFHMoreButton, ButtonOne } from "../components/Buttons";
 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 { LoremMedium, LoremShort } from "../components/Loremipsum";
 import SimpleSlider from "../components/Slider";
 import React from 'react';
 import { Bar, Doughnut, PolarArea } from 'react-chartjs-2';
 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";
 
 
@@ -27,10 +27,12 @@ export function Example() {
   useTabNavigation();
     return (
       <>
-      <div className="container">
+
+    
+{/*       <div className="container">
             <h1>Protein Structure Viewer</h1>
             <ProteinViewer/>
-          </div>
+          </div> */}
        
       <h1> Here you can see what we can use</h1>
       <h2>Collapisbles</h2>
@@ -44,6 +46,9 @@ export function Example() {
         <div className="col">
             <Collapsible title="Title" id="collapsible"> <LoremMedium></LoremMedium></Collapsible>
         </div>
+        <HowOftenTreatmentatients/>
+        <OpenToGeneTherapyatients/>
+        <MoreInfoOnTherapyBoth/>
       </div>
     <h2>Boxes</h2>
       <div className="row">