Merge pull request #45 from ScilifelabDataCentre/aboutpageupdate

About Pages update

pmp-frontend-app/src/components/AccordionComponent.tsx

@@ -7,28 +7,37 @@ export default function AccordionComponent(): ReactElement {
             <div className="collapse collapse-arrow bg-neutral">
                 <input type="radio" name="my-accordion-2" /> 
                 <div className="collapse-title text-xl font-medium">
-                    Click to open this one and close others
+                    What is the Data Science Node in Precision Medicine & Diagnostics?
                 </div>
                 <div className="collapse-content"> 
-                    <p>hello</p>
+                    <p>TBD.</p>
                 </div>
             </div>
             <div className="collapse collapse-arrow bg-neutral">
                 <input type="radio" name="my-accordion-2" /> 
                 <div className="collapse-title text-xl font-medium">
-                    Click to open this one and close others
+                    Where do the events & trainings you diplay come from? Can I submit events myself? 
                 </div>
                 <div className="collapse-content"> 
-                    <p>hello</p>
+                    <p>The majority of events and trainings are sourced from external APIs. Both the SciLifeLab Training Hub and NBIS have contributed to this. If you have an API that enables the fetching of relevant events in the fields of precision medicine and diagnostics, please reach out to our team via the contact form. If you have individual events that you would like us to feature, you can also contact us, and we will display the event individually. We are currently developing a feature that will allow you to directly fill out a specific form with all the required information. Please await this update.</p>
                 </div>
             </div>
             <div className="collapse collapse-arrow bg-neutral">
                 <input type="radio" name="my-accordion-2" /> 
                 <div className="collapse-title text-xl font-medium">
-                    Click to open this one and close others
+                    Where do the data sources you display come from? Can I add any other data sources myself?
                 </div>
                 <div className="collapse-content"> 
-                    <p>hello</p>
+                    <p>Data Centre's data stewards have manually searched for, collected, and summarized the data sources displayed. We recognize the continuous growth of new sources and strive to update our data constantly. If you think we have missed a source or if you would like to add a specific one, please reach out to us via the contact form.</p>
+                </div>
+            </div>
+            <div className="collapse collapse-arrow bg-neutral">
+                <input type="radio" name="my-accordion-2" /> 
+                <div className="collapse-title text-xl font-medium">
+                    Can we collaborate to develop a new dashboard that displays data and research highlights?
+                </div>
+                <div className="collapse-content"> 
+                    <p>We are always eager to collaborate and support the Swedish precision medicine and diagnostics research community. If you would like your project or data source to be featured as a separate page on this portal, please reach out to us via the contact form.</p>
                 </div>
             </div>
         </>

pmp-frontend-app/src/components/HeaderComponent.tsx

@@ -43,6 +43,9 @@ export default function HeaderComponent() {
         case "/about/faq":
           textBar = AboutPageContent.textBar;
           break;
+        case "/about/team":
+          textBar = AboutPageContent.textBar;
+          break;
         case "/about/partners":
           textBar = AboutPageContent.textBar;
           break;

pmp-frontend-app/src/components/Routes.tsx

@@ -10,6 +10,7 @@ import SignInPage from '../pages/SignInPage';
 import PrivacyPage from '../pages/PrivacyPage';
 import AboutProductPage from '../pages/AboutProductPage';
 import AboutFAQPage from '../pages/AboutFAQPage';
+import AboutTeamPage from '../pages/AboutTeamPage';
 import AboutPartnersPage from '../pages/AboutPartnersPage';
 
 const router = createBrowserRouter([
@@ -37,6 +38,10 @@ const router = createBrowserRouter([
                         path: 'faq',
                         element: <AboutFAQPage />,
                     },
+                    {
+                        path: 'team',
+                        element: <AboutTeamPage />,
+                    },
                     {
                         path: 'partners',
                         element: <AboutPartnersPage />,

pmp-frontend-app/src/pages/AboutFAQPage.tsx

@@ -7,7 +7,6 @@ export default function AboutFAQPage(): ReactElement {
 
     return (
         <>
-            <div className="divider">FAQ</div>
             <AccordionComponent />
         </>
     );

pmp-frontend-app/src/pages/AboutPage.tsx

@@ -29,9 +29,10 @@ export default function AboutPage(): ReactElement {
                 </div>
                 <div className={H_1}>{pageTitle}</div>
                 <div role="tablist" className="tabs tabs-lifted pb-4">
-                    <NavLink to='/about/product' role='tab' className={({ isActive }) => `tab ${ isActive ? 'tab-active' : ''}`}>Product</NavLink>
-                    <NavLink to='/about/faq' role='tab' className={({ isActive }) => `tab ${ isActive ? 'tab-active' : ''}`}>FAQ</NavLink>
-                    <NavLink to='/about/partners' role='tab' className={({ isActive }) => `tab ${ isActive ? 'tab-active' : ''}`}>Partners</NavLink>
+                    <NavLink to='/about/product' role='tab' className={({ isActive }) => `tab ${ isActive ? 'tab-active text-info-content !bg-info' : 'bg-white shadow'}`}>Product</NavLink>
+                    <NavLink to='/about/faq' role='tab' className={({ isActive }) => `tab ${ isActive ? 'tab-active text-info-content !bg-info' : 'bg-white shadow'}`}>FAQ</NavLink>
+                    <NavLink to='/about/team' role='tab' className={({ isActive }) => `tab ${ isActive ? 'tab-active text-info-content !bg-info' : 'bg-white shadow'}`}>Team</NavLink>
+                    <NavLink to='/about/partners' role='tab' className={({ isActive }) => `tab ${ isActive ? 'tab-active text-info-content !bg-info' : 'bg-white shadow'}`}>Partners</NavLink>
                 </div>
                 <Outlet />
             </div>

pmp-frontend-app/src/pages/AboutPartnersPage.tsx

@@ -2,14 +2,20 @@ import { ReactElement } from 'react';
 import { ICardConfig, ICardContent } from '../interfaces/types';
 import CardComponent from '../components/CardComponent';
 import { TrackPageViewIfEnabled } from '../util/cookiesHandling';
+import dcImage from '../assets/Partner logo/dc.png';
+import elixirImage from '../assets/Partner logo/Elixir-Europe-logo-1.png';
+import nbisImage from '../assets/Partner logo/nbislogo_orange_txt_3cb0778d90.svg';
+import kawImage from '../assets/Partner logo/kaw_sv_300x300.png';
+import kiImage from '../assets/Partner logo/KI_digital_logotyp_positiv_RGB.png';
+import scilifelabImage from '../assets/Partner logo/SciLifeLab_Logotype_Green_NEG.png';
 
 export default function AboutPartnersPage(): ReactElement {
     TrackPageViewIfEnabled();
 
     var cardConfig: { [id: string] : ICardConfig; } = {
         'fundersAndPartnersCard': {
-            cardClasses: "card lg:card-side bg-white shadow-xl", 
-            titleClasses: "card-title", 
+            cardClasses: "w-full h-full card lg:card-side bg-white shadow-xl",
+            titleClasses: "card-title",
             subTitleClasses: "",
             textClasses: "",
             imgClasses: "",
@@ -20,28 +26,66 @@ export default function AboutPartnersPage(): ReactElement {
 
     var cardContent: { [id: string] : ICardContent } = {
         'fundersAndPartnersCard1': {
-            title: "New album is released!",
+            title: "SciLifeLab Data Centre",
             subTitle: "",
-            text: "Click the button to listen on Spotiwhy app.", 
+            text: "SciLifeLab Data Centre is a central unit within SciLifeLab with responsibility for IT- and data management issues, serving the SciLifeLab and the Data Driven Life Science (DDLS) research program. At SciLifeLab, we see data as one of the most valuable and long-lasting products of our operations and strive to make our data FAIR, handled according to open science standards and that its long-term value to the scientific community is maximised.", 
             buttonText: "",
-            imageSrc: "https://daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.jpg",
-            imageAlt: "Album",
+            imageSrc: dcImage,
+            imageAlt: "SciLifeLab Data Centre logo",
+        },
+        'fundersAndPartnersCard2': {
+            title: "Karolinska Institutet",
+            subTitle: "",
+            text: "Karolinska Institutet (KI) is a research-led medical university in Solna within the Stockholm urban area of Sweden and one of the foremost medical research institutes globally. KI hosts the Data Science Node in Precision Medicine and Diagnostics as part of the national Data-Driven Life Science program and associated to the SciLifeLab Data Platform.", 
+            buttonText: "",
+            imageSrc: kiImage,
+            imageAlt: "Karolinska Institutet logo",
+        },
+        'fundersAndPartnersCard3': {
+            title: "Data-Driven Precision Medicine and Diagnostics",
+            subTitle: "",
+            text: "The Data-Driven Life Science subject area hosted by KI concerns research that will make use of computational tools to integrate molecular and clinical data for precision medicine and diagnostic development. The focus is on data integration, analysis, visualisation, and data interpretation for patient stratification, discovery of biomarkers for disease risks, diagnosis, drug response and monitoring of health.", 
+            buttonText: "",
+            imageSrc: scilifelabImage,
+            imageAlt: "Data-Driven Precision Medicine and Diagnostics logo",
+        },
+        'fundersAndPartnersCard4': {
+            title: "SciLifeLab & Wallenberg National Program for Data-Driven Life Science",
+            subTitle: "",
+            text: "Life science research is becoming increasingly data-driven. The amount and complexity of data is also growing exponentially. Data is one of the most valuable products of research, and it is therefore crucially important that we ensure it is managed appropriately throughout its lifecycle. In response, SciLifeLab and The Knut and Alice Wallenberg Foundation (KAW) have launched the DDLS program in Sweden. This initiative aims to train and develop the next wave of life scientists, enhancing Sweden's capabilities in data science within the life sciences to achieve international competitiveness. The DDLS program has been funded by KAW for 12 years. SciLifeLab, as a national infrastructure for life science, coordinates this program in close collaboration with ten Swedish universities and the Swedish Museum of Natural History.", 
+            buttonText: "",
+            imageSrc: kawImage,
+            imageAlt: "SciLifeLab & Wallenberg National Program for Data-Driven Life Science logo",
+        },
+        'fundersAndPartnersCard5': {
+            title: "National Bioinformatics Infrastructure Sweden and ELIXIR Sweden",
+            subTitle: "",
+            text: "National Bioinformatics Infrastructure Sweden (NBIS) is a distributed national research infrastructure supported by the Swedish Research Council (Vetenskapsrådet), Science for Life Laboratory, all major Swedish universities, and the Knut and Alice Wallenberg Foundation. It provides state-of-the-art bioinformatics to the life science research community in Sweden. NBIS is also the Swedish contact point to the European infrastructure for biological information, ELIXIR Europe.", 
+            buttonText: "",
+            imageSrc: nbisImage,
+            imageAlt: "NBIS and ELIXIR Sweden logos",
         },
     };
 
-
     return (
         <>
-            <div className="divider">Funders</div>
-            <div className="flex flex-row space-x-4 justify-between">
-                <CardComponent cardConfig={cardConfig['fundersAndPartnersCard']} cardContent={cardContent['fundersAndPartnersCard1']} />
+        <div className="flex flex-row flex-wrap flex-grow justify-between">
+            <div className="w-1/2 pb-2 px-2">
                 <CardComponent cardConfig={cardConfig['fundersAndPartnersCard']} cardContent={cardContent['fundersAndPartnersCard1']} />
             </div>
-            <div className="divider pt-16">Partners</div>
-            <div className="flex flex-row space-x-4 justify-between">
-                <CardComponent cardConfig={cardConfig['fundersAndPartnersCard']} cardContent={cardContent['fundersAndPartnersCard1']} />
-                <CardComponent cardConfig={cardConfig['fundersAndPartnersCard']} cardContent={cardContent['fundersAndPartnersCard1']} />
+            <div className="w-1/2 pb-2 px-2">
+                <CardComponent cardConfig={cardConfig['fundersAndPartnersCard']} cardContent={cardContent['fundersAndPartnersCard2']} />
+            </div>
+            <div className="w-1/2 p-2">
+                <CardComponent cardConfig={cardConfig['fundersAndPartnersCard']} cardContent={cardContent['fundersAndPartnersCard3']} />
+            </div>
+            <div className="w-1/2 p-2">
+                <CardComponent cardConfig={cardConfig['fundersAndPartnersCard']} cardContent={cardContent['fundersAndPartnersCard5']} />
+            </div>
+            <div className="grow w-1/2 p-2">
+                <CardComponent cardConfig={cardConfig['fundersAndPartnersCard']} cardContent={cardContent['fundersAndPartnersCard4']} />
             </div>
+        </div>
         </>
     );
 }

pmp-frontend-app/src/pages/AboutProductPage.tsx

@@ -1,8 +1,5 @@
 import { ReactElement } from 'react';
-import { ICardConfig, ICardContent } from '../interfaces/types';
-import CardComponent from '../components/CardComponent';
 import { TrackPageViewIfEnabled } from '../util/cookiesHandling';
-import { TeamDescriptions } from '../content/content';
 
 export default function AboutProductPage(): ReactElement {
     TrackPageViewIfEnabled();
@@ -20,71 +17,10 @@ export default function AboutProductPage(): ReactElement {
                             eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam.
                             `;
 
-    var cardConfig: { [id: string] : ICardConfig; } = {
-        'teamCard': { 
-            cardClasses: "card w-96 bg-white shadow-xl", 
-            titleClasses: "card-title",
-            subTitleClasses: "italic",
-            textClasses: "",
-            imgClasses: "object-cover h-96 w-96",
-            buttonClasses: "", 
-            buttonPlacement: "",  
-        },
-    };
-
-    var cardContent: { [id: string] : ICardContent } = {
-        'JanCard': {
-            title: TeamDescriptions.teamMembers.jan.name, 
-            subTitle: TeamDescriptions.teamMembers.jan.title,
-            text: TeamDescriptions.teamMembers.jan.description, 
-            buttonText: "",
-            imageSrc: TeamDescriptions.teamMembers.jan.img,
-            imageAlt: TeamDescriptions.teamMembers.jan.imgAlt,
-        },
-        'NatCard': {
-            title: TeamDescriptions.teamMembers.natashia.name, 
-            subTitle: TeamDescriptions.teamMembers.natashia.title,
-            text: TeamDescriptions.teamMembers.natashia.description, 
-            buttonText: "",
-            imageSrc: TeamDescriptions.teamMembers.natashia.img,
-            imageAlt: TeamDescriptions.teamMembers.natashia.imgAlt,
-        },
-        'SebCard': {
-            title: TeamDescriptions.teamMembers.sebastian.name, 
-            subTitle: TeamDescriptions.teamMembers.sebastian.title,
-            text: TeamDescriptions.teamMembers.sebastian.description, 
-            buttonText: "",
-            imageSrc: TeamDescriptions.teamMembers.sebastian.img,
-            imageAlt: TeamDescriptions.teamMembers.sebastian.imgAlt,
-        },
-        'SamCard': {
-            title: TeamDescriptions.teamMembers.saman.name, 
-            subTitle: TeamDescriptions.teamMembers.saman.title,
-            text: TeamDescriptions.teamMembers.saman.description, 
-            buttonText: "",
-            imageSrc: TeamDescriptions.teamMembers.saman.img,
-            imageAlt: TeamDescriptions.teamMembers.saman.imgAlt,
-        },
-        'MarCard': {
-            title: TeamDescriptions.teamMembers.maria.name, 
-            subTitle: TeamDescriptions.teamMembers.maria.title,
-            text: TeamDescriptions.teamMembers.maria.description, 
-            buttonText: "",
-            imageSrc: TeamDescriptions.teamMembers.maria.img,
-            imageAlt: TeamDescriptions.teamMembers.maria.imgAlt,
-        },
-    };
 
     return (
         <>
-            <div className="divider">Product</div>
             <p>{PMDDescription}</p>
-            <div className="divider pt-16">Team & Contributions</div>
-            <div className="grid grid-cols-3 place-items-center gap-2">
-                {Object.keys(cardContent).map( key => (
-                    <CardComponent cardConfig={cardConfig['teamCard']} cardContent={cardContent[key]} />
-                ))}
-            </div>
         </>
     );
 }

pmp-frontend-app/src/pages/AboutTeamPage.tsx

@@ -0,0 +1,74 @@
+import { ReactElement } from 'react';
+import { ICardConfig, ICardContent } from '../interfaces/types';
+import CardComponent from '../components/CardComponent';
+import { TrackPageViewIfEnabled } from '../util/cookiesHandling';
+import { TeamDescriptions } from '../content/content';
+
+export default function AboutTeamPage(): ReactElement {
+    TrackPageViewIfEnabled();
+
+    var cardConfig: { [id: string] : ICardConfig; } = {
+        'teamCard': { 
+            cardClasses: "card w-96 bg-white shadow-xl", 
+            titleClasses: "card-title",
+            subTitleClasses: "italic",
+            textClasses: "",
+            imgClasses: "object-cover h-96 w-96",
+            buttonClasses: "", 
+            buttonPlacement: "",  
+        },
+    };
+
+    var cardContent: { [id: string] : ICardContent } = {
+        'JanCard': {
+            title: TeamDescriptions.teamMembers.jan.name, 
+            subTitle: TeamDescriptions.teamMembers.jan.title,
+            text: TeamDescriptions.teamMembers.jan.description, 
+            buttonText: "",
+            imageSrc: TeamDescriptions.teamMembers.jan.img,
+            imageAlt: TeamDescriptions.teamMembers.jan.imgAlt,
+        },
+        'NatCard': {
+            title: TeamDescriptions.teamMembers.natashia.name, 
+            subTitle: TeamDescriptions.teamMembers.natashia.title,
+            text: TeamDescriptions.teamMembers.natashia.description, 
+            buttonText: "",
+            imageSrc: TeamDescriptions.teamMembers.natashia.img,
+            imageAlt: TeamDescriptions.teamMembers.natashia.imgAlt,
+        },
+        'SebCard': {
+            title: TeamDescriptions.teamMembers.sebastian.name, 
+            subTitle: TeamDescriptions.teamMembers.sebastian.title,
+            text: TeamDescriptions.teamMembers.sebastian.description, 
+            buttonText: "",
+            imageSrc: TeamDescriptions.teamMembers.sebastian.img,
+            imageAlt: TeamDescriptions.teamMembers.sebastian.imgAlt,
+        },
+        'SamCard': {
+            title: TeamDescriptions.teamMembers.saman.name, 
+            subTitle: TeamDescriptions.teamMembers.saman.title,
+            text: TeamDescriptions.teamMembers.saman.description, 
+            buttonText: "",
+            imageSrc: TeamDescriptions.teamMembers.saman.img,
+            imageAlt: TeamDescriptions.teamMembers.saman.imgAlt,
+        },
+        'MarCard': {
+            title: TeamDescriptions.teamMembers.maria.name, 
+            subTitle: TeamDescriptions.teamMembers.maria.title,
+            text: TeamDescriptions.teamMembers.maria.description, 
+            buttonText: "",
+            imageSrc: TeamDescriptions.teamMembers.maria.img,
+            imageAlt: TeamDescriptions.teamMembers.maria.imgAlt,
+        },
+    };
+
+    return (
+        <>
+            <div className="grid grid-cols-3 place-items-center gap-2">
+                {Object.keys(cardContent).map( key => (
+                    <CardComponent cardConfig={cardConfig['teamCard']} cardContent={cardContent[key]} />
+                ))}
+            </div>
+        </>
+    );
+}