+
+
+ );
+}
\ No newline at end of file
diff --git a/pmp-frontend-app/src/components/DataSourcesComponent.tsx b/pmp-frontend-app/src/components/DataSourcesComponent.tsx
new file mode 100644
index 0000000..e9d5140
--- /dev/null
+++ b/pmp-frontend-app/src/components/DataSourcesComponent.tsx
@@ -0,0 +1,232 @@
+import { ReactElement, useState } from "react";
+import React from "react";
+import axios from 'axios';
+import { IDataSourceFilters, IDataSourcesDC } from "../interfaces/types";
+
+export default function DataSourcesComponent(): ReactElement {
+ const [dataSourcesJSON, setDataSourcesJSON] = useState
+ {dataSourcesJSON
+ .filter(data => applyDataTypeFilter(data))
+ .filter(data => applyDiseaseTypeFilter(data))
+ .filter(data => applySearchBar(data))
+ .map((item, index) => (
+
+ );
+ }
+
+ React.useEffect(() =>{
+ getData();
+ }, []);
+
+ return (
+ <>
+
+
+ ))}
+
+ {item.name}
+ ![{item.name}]({"/img/datasources/")
+
+
+ {item.description}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/pmp-frontend-app/src/components/FooterComponent.tsx b/pmp-frontend-app/src/components/FooterComponent.tsx
new file mode 100644
index 0000000..7875166
--- /dev/null
+++ b/pmp-frontend-app/src/components/FooterComponent.tsx
@@ -0,0 +1,79 @@
+import { ReactElement } from 'react';
+import {ILink, ISVG} from '../interfaces/types';
+import { Link } from 'react-router-dom';
+import { LINK_CLASSES } from '../constants';
+
+export default function FooterComponent(): ReactElement {
+
+ let linksCol1: { [id: string] : ILink; } = {
+ 'l1': { text: 'Data Sources', classes: LINK_CLASSES, link: '/datasources' },
+ 'l2': { text: 'Events & Trainings', classes: LINK_CLASSES, link: '/eventsandtrainings' },
+ 'l3': { text: 'Access Clinical Data', classes: LINK_CLASSES, link: '/accessclinicaldata' },
+ };
+
+ let linksCol2: { [id: string] : ILink; } = {
+ 'l4': { text: 'About Us', classes: LINK_CLASSES, link: '/about' },
+ 'l5': { text: 'Contact', classes: LINK_CLASSES, link: '/contact' },
+ 'l6': { text: 'Privacy Policy', classes: LINK_CLASSES, link: '/privacy' },
+ };
+
+ let svgs: { [id: string] : ISVG; } = {
+ 'svgX': {
+ href: "https://twitter.com/SciLifeLab_DC",
+ xmlns: 'http://www.w3.org/2000/svg',
+ width: "24",
+ height: "24",
+ viewBox: '0 0 24 24',
+ classes: 'fill-current',
+ svg: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'
+ },
+ 'svgLI': {
+ href: "https://se.linkedin.com/company/scilifelab-data-centre",
+ xmlns: 'http://www.w3.org/2000/svg',
+ width: "25",
+ height: "23",
+ viewBox: "5 5 40 40",
+ classes: 'fill-current',
+ svg: 'M 9 4 C 6.2504839 4 4 6.2504839 4 9 L 4 41 C 4 43.749516 6.2504839 46 9 46 L 41 46 C 43.749516 46 46 43.749516 46 41 L 46 9 C 46 6.2504839 43.749516 4 41 4 L 9 4 z M 9 6 L 41 6 C 42.668484 6 44 7.3315161 44 9 L 44 41 C 44 42.668484 42.668484 44 41 44 L 9 44 C 7.3315161 44 6 42.668484 6 41 L 6 9 C 6 7.3315161 7.3315161 6 9 6 z M 14 11.011719 C 12.904779 11.011719 11.919219 11.339079 11.189453 11.953125 C 10.459687 12.567171 10.011719 13.484511 10.011719 14.466797 C 10.011719 16.333977 11.631285 17.789609 13.691406 17.933594 A 0.98809878 0.98809878 0 0 0 13.695312 17.935547 A 0.98809878 0.98809878 0 0 0 14 17.988281 C 16.27301 17.988281 17.988281 16.396083 17.988281 14.466797 A 0.98809878 0.98809878 0 0 0 17.986328 14.414062 C 17.884577 12.513831 16.190443 11.011719 14 11.011719 z M 14 12.988281 C 15.392231 12.988281 15.94197 13.610038 16.001953 14.492188 C 15.989803 15.348434 15.460091 16.011719 14 16.011719 C 12.614594 16.011719 11.988281 15.302225 11.988281 14.466797 C 11.988281 14.049083 12.140703 13.734298 12.460938 13.464844 C 12.78117 13.19539 13.295221 12.988281 14 12.988281 z M 11 19 A 1.0001 1.0001 0 0 0 10 20 L 10 39 A 1.0001 1.0001 0 0 0 11 40 L 17 40 A 1.0001 1.0001 0 0 0 18 39 L 18 33.134766 L 18 20 A 1.0001 1.0001 0 0 0 17 19 L 11 19 z M 20 19 A 1.0001 1.0001 0 0 0 19 20 L 19 39 A 1.0001 1.0001 0 0 0 20 40 L 26 40 A 1.0001 1.0001 0 0 0 27 39 L 27 29 C 27 28.170333 27.226394 27.345035 27.625 26.804688 C 28.023606 26.264339 28.526466 25.940057 29.482422 25.957031 C 30.468166 25.973981 30.989999 26.311669 31.384766 26.841797 C 31.779532 27.371924 32 28.166667 32 29 L 32 39 A 1.0001 1.0001 0 0 0 33 40 L 39 40 A 1.0001 1.0001 0 0 0 40 39 L 40 28.261719 C 40 25.300181 39.122788 22.95433 37.619141 21.367188 C 36.115493 19.780044 34.024172 19 31.8125 19 C 29.710483 19 28.110853 19.704889 27 20.423828 L 27 20 A 1.0001 1.0001 0 0 0 26 19 L 20 19 z M 12 21 L 16 21 L 16 33.134766 L 16 38 L 12 38 L 12 21 z M 21 21 L 25 21 L 25 22.560547 A 1.0001 1.0001 0 0 0 26.798828 23.162109 C 26.798828 23.162109 28.369194 21 31.8125 21 C 33.565828 21 35.069366 21.582581 36.167969 22.742188 C 37.266572 23.901794 38 25.688257 38 28.261719 L 38 38 L 34 38 L 34 29 C 34 27.833333 33.720468 26.627107 32.990234 25.646484 C 32.260001 24.665862 31.031834 23.983076 29.517578 23.957031 C 27.995534 23.930001 26.747519 24.626988 26.015625 25.619141 C 25.283731 26.611293 25 27.829667 25 29 L 25 38 L 21 38 L 21 21 z'
+ },
+ };
+
+
+ return (
+
+
+
+
+ setSearchBar(e.target.value)}
+ />
+
+
+
+ Data Type
+
+ {filters.dataTypes.map((element, index) =>
+
+
+
+ {element}
+
+ )}
+ Disease Type
+
+ {filters.diseaseTypes.map((element, index) =>
+
+
+
+ {element}
+
+ )}
+
+
+
+ )
+}
diff --git a/pmp-frontend-app/src/components/HeaderComponent.tsx b/pmp-frontend-app/src/components/HeaderComponent.tsx
new file mode 100644
index 0000000..8a4fb28
--- /dev/null
+++ b/pmp-frontend-app/src/components/HeaderComponent.tsx
@@ -0,0 +1,97 @@
+import { Link, NavLink } from 'react-router-dom';
+import { ILink } from '../interfaces/types';
+import { LINK_CLASSES } from '../constants';
+import sciLifeLogo from '../assets/SciLifeLab logo/Precisionmedicineportal_logo_white.png';
+import { useLocation } from 'react-router-dom';
+import { AboutPageContent, ContactPageContent, DataSourcesPageContent, EventsAndTrainingsPageContent, HomePageContent, PrivacyPageContent, ClinicalDataPageContent } from '../content/content';
+
+export default function HeaderComponent() {
+
+ let links: { [id: string] : ILink; } = {
+ 'l1': { text: 'Data Sources', classes: LINK_CLASSES, link: 'datasources' },
+ 'l2': { text: 'Events & Trainings', classes: LINK_CLASSES, link: 'eventsandtrainings' },
+ 'l3': { text: 'Access Clinical Data', classes: LINK_CLASSES, link: '/accessclinicaldata' },
+ 'l4': { text: 'Contact', classes: LINK_CLASSES, link: 'contact' },
+ 'l5': { text: 'About Us', classes: LINK_CLASSES, link: 'about' },
+ };
+
+ {/*
+ // This is the signin button. We can add this again once we have a user page, login, registration and features for users.
+ let buttons: { [id: string] : ILink; } = {
+ 'b1': { text: 'Sign In', classes: BUTTON_TYPE_ONE, link: 'signin' },
+ };
+ */}
+
+ let currentRoute = useLocation();
+ let textBar: string = "";
+
+ switch (currentRoute.pathname) {
+ case "/":
+ textBar = HomePageContent.textBar;
+ break;
+ case "/datasources":
+ textBar = DataSourcesPageContent.textBar;
+ break;
+ case "/eventsandtrainings":
+ textBar = EventsAndTrainingsPageContent.textBar;
+ break;
+ case "/contact":
+ textBar = ContactPageContent.textBar;
+ break;
+ case "/about/product":
+ textBar = AboutPageContent.textBar;
+ break;
+ case "/about/faq":
+ textBar = AboutPageContent.textBar;
+ break;
+ case "/about/team":
+ textBar = AboutPageContent.textBar;
+ break;
+ case "/about/partners":
+ textBar = AboutPageContent.textBar;
+ break;
+ case "/privacy":
+ textBar = PrivacyPageContent.textBar;
+ break;
+ case "/accessclinicaldata":
+ textBar = ClinicalDataPageContent.textBar;
+ break;
+ default:
+ textBar = "";
+ break;
+ }
+
+ return (
+
+
+ + Website code is available on Github: +
+
+
+ Frontend
+
+
+ Backend
+
+
+
+
+ )
+ }
+
\ No newline at end of file
diff --git a/pmp-frontend-app/src/components/ImageCarouselAlternativeComponent.tsx b/pmp-frontend-app/src/components/ImageCarouselAlternativeComponent.tsx
new file mode 100644
index 0000000..9d9af73
--- /dev/null
+++ b/pmp-frontend-app/src/components/ImageCarouselAlternativeComponent.tsx
@@ -0,0 +1,29 @@
+import { ReactElement } from "react";
+import { Link } from 'react-router-dom';
+import eventsAndTrainingsImg from '../assets/images/eventsAndTrainingsIndexImage.png';
+import dataSourcesImg from '../assets/images/dataSourcesIndexImage.png';
+import hedestamImg from '../assets/images/hedestamIndexImage.png';
+
+export default function ImageCarouselAlternativeComponent(): ReactElement {
+ return (
+
+
+
+
+
+
+ 
+
+
+
+
+ -
+ {Object.keys(links).map( key => (
+
- {
{links[key].text} }
+ ))}
+
+
+ {/*
+ // This is the signin button. We can add this again once we have a user page, login, registration and features for users.
+ {Object.keys(buttons).map( key => (
+
+ {{buttons[key].text}}
+
+ ))} */}
+
+
+ {textBar}
+
+
+ );
+}
\ No newline at end of file
diff --git a/pmp-frontend-app/src/components/ImageCarouselComponent.tsx b/pmp-frontend-app/src/components/ImageCarouselComponent.tsx
new file mode 100644
index 0000000..1ae9c2d
--- /dev/null
+++ b/pmp-frontend-app/src/components/ImageCarouselComponent.tsx
@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+
+export default function ImageCarouselComponent(): ReactElement {
+ return (
+
+
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/pmp-frontend-app/src/components/Routes.tsx b/pmp-frontend-app/src/components/Routes.tsx
new file mode 100644
index 0000000..f3610f3
--- /dev/null
+++ b/pmp-frontend-app/src/components/Routes.tsx
@@ -0,0 +1,83 @@
+import { ReactElement } from 'react';
+import { createBrowserRouter, redirect, RouterProvider } from 'react-router-dom';
+import App from '../App';
+import HomePage from '../pages/HomePage';
+import AboutPage from '../pages/AboutPage';
+import ContactPage from '../pages/ContactPage';
+import DataSourcesPage from '../pages/DataSourcesPage';
+import EventsAndTrainingsPage from '../pages/EventsAndTrainingsPage';
+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';
+import AccessClinicalDataPage from '../pages/AccessClinicalDataPage'
+
+const router = createBrowserRouter([
+ {
+ path: '/',
+ element:
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/pmp-frontend-app/src/pages/AboutPartnersPage.tsx b/pmp-frontend-app/src/pages/AboutPartnersPage.tsx
new file mode 100644
index 0000000..9ab92d3
--- /dev/null
+++ b/pmp-frontend-app/src/pages/AboutPartnersPage.tsx
@@ -0,0 +1,129 @@
+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_POS.png';
+
+
+export default function AboutPartnersPage(): ReactElement {
+ TrackPageViewIfEnabled();
+
+ let cardClasses: string = "flex flex-row justify-center items-center w-full h-full bg-white shadow-xl";
+ var cardConfig: { [id: string] : ICardConfig; } = {
+ 'dcCard': {
+ cardClasses: cardClasses + " pl-6",
+ titleClasses: "card-title",
+ subTitleClasses: "",
+ textClasses: "",
+ imgClasses: "object-contain h-56 w-56",
+ buttonClasses: "",
+ buttonPlacement: "",
+ },
+ 'kiCard': {
+ cardClasses: cardClasses,
+ titleClasses: "card-title",
+ subTitleClasses: "",
+ textClasses: "",
+ imgClasses: "object-contain h-72 w-72",
+ buttonClasses: "",
+ buttonPlacement: "",
+ },
+ 'ddlsCard': {
+ cardClasses: cardClasses + " pl-6",
+ titleClasses: "card-title",
+ subTitleClasses: "",
+ textClasses: "",
+ imgClasses: "object-contain h-56 w-56",
+ buttonClasses: "",
+ buttonPlacement: "",
+ },
+ 'kawCard': {
+ cardClasses: "w-full h-full card lg:card-side bg-white shadow-xl",
+ titleClasses: "card-title",
+ subTitleClasses: "",
+ textClasses: "",
+ imgClasses: "object-contain",
+ buttonClasses: "",
+ buttonPlacement: "",
+ },
+ 'nbisCard': {
+ cardClasses: cardClasses + " pl-10",
+ titleClasses: "card-title",
+ subTitleClasses: "",
+ textClasses: "",
+ imgClasses: "object-contain h-36 w-36",
+ buttonClasses: "",
+ buttonPlacement: "",
+ },
+ };
+
+ var cardContent: { [id: string] : ICardContent } = {
+ 'dcCard': {
+ title: "SciLifeLab Data Centre",
+ subTitle: "",
+ 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: dcImage,
+ imageAlt: "SciLifeLab Data Centre logo",
+ },
+ 'kiCard': {
+ 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",
+ },
+ 'ddlsCard': {
+ 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",
+ },
+ 'kawCard': {
+ 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",
+ },
+ 'nbisCard': {
+ 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 (
+ <>
+
+
+ -
+ {Object.keys(breadcrumbs).map( key => (
+
- {breadcrumbs[key].link ? {breadcrumbs[key].text} : <>{breadcrumbs[key].text}} + ))} +
{pageTitle}
+
+ `tab ${ isActive ? 'tab-active text-info-content !bg-info' : 'bg-white shadow'}`}>Product
+ `tab ${ isActive ? 'tab-active text-info-content !bg-info' : 'bg-white shadow'}`}>FAQ
+ `tab ${ isActive ? 'tab-active text-info-content !bg-info' : 'bg-white shadow'}`}>Team
+ `tab ${ isActive ? 'tab-active text-info-content !bg-info' : 'bg-white shadow'}`}>Partners
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/pmp-frontend-app/src/pages/AboutProductPage.tsx b/pmp-frontend-app/src/pages/AboutProductPage.tsx
new file mode 100644
index 0000000..cd77388
--- /dev/null
+++ b/pmp-frontend-app/src/pages/AboutProductPage.tsx
@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { TrackPageViewIfEnabled } from '../util/cookiesHandling';
+
+export default function AboutProductPage(): ReactElement {
+ TrackPageViewIfEnabled();
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ + The Precision Medicine Portal is part of the SciLifeLab DDLS node for Precision Medicine and Diagnostics at Karolinska institutet and funded by the Knut and Alice Wallenberg Foundation. Launching in autumn 2024, our overall goal is to support Swedish researchers with essential resources within precision medicine (or personalised medicine), such as relevant data sources, interactive data dashboards, data management support, and links to conferences, workshops and other Nordic precision medicine events. +
++ Our website is divided into two repositories: a frontend React app and a backend using Python and Flask. While operated by the SciLifeLab Data Centre and partners, we very much welcome community contributions. +
+ + ); +} \ No newline at end of file diff --git a/pmp-frontend-app/src/pages/AboutTeamPage.tsx b/pmp-frontend-app/src/pages/AboutTeamPage.tsx new file mode 100644 index 0000000..50f42b9 --- /dev/null +++ b/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 h-[46rem] w-96 bg-white shadow-xl", + titleClasses: "card-title", + subTitleClasses: "italic", + textClasses: "", + imgClasses: "object-cover h-96 w-96 rounded-t-[8px]", + 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 ( + <> +
+ {Object.keys(cardContent).map( key => (
+
+
+ );
+}
\ No newline at end of file
diff --git a/pmp-frontend-app/src/pages/AccessClinicalDataPage.tsx b/pmp-frontend-app/src/pages/AccessClinicalDataPage.tsx
new file mode 100644
index 0000000..3a9a44e
--- /dev/null
+++ b/pmp-frontend-app/src/pages/AccessClinicalDataPage.tsx
@@ -0,0 +1,166 @@
+import { ReactElement } from "react";
+import { Link } from "react-router-dom";
+import { BODY_CLASSES } from "../constants";
+import { ILink } from "../interfaces/types";
+import { TrackPageViewIfEnabled } from "../util/cookiesHandling";
+
+export default function AboutPage(): ReactElement {
+ TrackPageViewIfEnabled();
+
+ var breadcrumbs: { [id: string]: ILink } = {
+ l1: { text: "Home", classes: "", link: "/" },
+ l2: { text: "Access Clinical Data", classes: "", link: "" },
+ };
+
+ return (
+
+
+ );
+}
diff --git a/pmp-frontend-app/src/pages/ContactPage.tsx b/pmp-frontend-app/src/pages/ContactPage.tsx
new file mode 100644
index 0000000..76e505a
--- /dev/null
+++ b/pmp-frontend-app/src/pages/ContactPage.tsx
@@ -0,0 +1,34 @@
+import { ReactElement } from 'react';
+import { TrackPageViewIfEnabled } from '../util/cookiesHandling';
+import { BODY_CLASSES, H_1 } from '../constants';
+import { ILink } from '../interfaces/types';
+import { Link } from 'react-router-dom';
+import { ContactPageContent } from '../content/content';
+import ContactFormComponent from '../components/ContactFormComponent';
+
+export default function ContactPage(): ReactElement {
+ TrackPageViewIfEnabled();
+
+ var breadcrumbs: { [id: string] : ILink; } = {
+ 'l1': { text: 'Home', classes: '', link: '/' },
+ 'l2': { text: 'Contact', classes: '', link: '' },
+ };
+
+ return (
+
+
+ {/* Paragraph before the first heading */}
+ -
+ {Object.keys(breadcrumbs).map((key) => (
+
- + {breadcrumbs[key].link ? ( + {breadcrumbs[key].text} + ) : ( + <>{breadcrumbs[key].text} + )} + + ))} +
+ Human data for research can be accessed from various sources such as + medical records, quality registries, and research databases. If the + research involves sensitive personal data (definition available here), + the project must be approved by the Swedish Ethical Review Authority. + This requirement applies even if the sensitive personal data is + pseudonymised. Additionally, all necessary legal measures must be in + place before transferring data from the agency or organisation providing + the source data. Procedures for requesting and disclosing data vary + between different authorities and organisations. +
+ {/* The first heading */} +
+
+ {/* Paragraph under the first heading */}
+ Patient records and medical records
+ + + ++ Healthcare staff document patient interactions, and after a + confidentiality assessment, this information can be requested for + medical research. In Sweden, the 21 regions are responsible for most + healthcare services, while municipalities handle services like home + care, and private practitioners manage their own records. Consequently, + to conduct research using patient records from across the country, it + may be necessary to request data from multiple sources. +
+ + {/* The second heading */} +
+
+ {/* Paragraph under the second heading */}
+ Quality registers
+ + + ++ The Swedish quality registries aim to improve the health care system by + collecting individualised health data about, for example, certain + diagnoses or problems (further information in Swedish). Data from a + certain registry can be requested by researchers after approval by a + steering group consisting of health care professionals and patient + representatives. +
++ Healthcare providers must inform patients before their medical + information is collected in a quality register. This procedure differs + from the inclusion of a research subject in a study, where written + consent is required. However, personal data cannot be processed in a + quality register or research study if the individual objects. If a + person opposes the processing of their personal data after it has begun, + the information should be erased from the register as soon as possible + (further information in Swedish). +
++ Every quality registry in Sweden is connected to one of six centres that + provide support: +
+-
+
- + + Stockholm (QRC STHLM) + + +
- + + Syd (RC SYD) + + +
- + + Norr (RCN) + + +
- + + Uppsala Clinical Research Center (UCR) + + +
- + + Västra Götaland + + +
- + + SydOst (RCSO) + + +
+
+ );
+}
\ No newline at end of file
diff --git a/pmp-frontend-app/src/pages/DataSourcesPage.tsx b/pmp-frontend-app/src/pages/DataSourcesPage.tsx
new file mode 100644
index 0000000..35ad7b5
--- /dev/null
+++ b/pmp-frontend-app/src/pages/DataSourcesPage.tsx
@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { TrackPageViewIfEnabled } from '../util/cookiesHandling';
+import DataSourcesComponent from '../components/DataSourcesComponent';
+import { BODY_CLASSES } from '../constants';
+
+export default function DataPage(): ReactElement {
+ TrackPageViewIfEnabled();
+
+ return (
+
+
+ -
+ {Object.keys(breadcrumbs).map( key => (
+
- {breadcrumbs[key].link ? {breadcrumbs[key].text} : <>{breadcrumbs[key].text}} + ))} +
Contact
+ {ContactPageContent.content[0].header}
+ {ContactPageContent.content[0].body}
+{ContactPageContent.content[1].header}
+ {ContactPageContent.content[1].body}
+
+
+ );
+}
\ No newline at end of file
diff --git a/pmp-frontend-app/src/pages/EventsAndTrainingsPage.tsx b/pmp-frontend-app/src/pages/EventsAndTrainingsPage.tsx
new file mode 100644
index 0000000..83853f6
--- /dev/null
+++ b/pmp-frontend-app/src/pages/EventsAndTrainingsPage.tsx
@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import { TrackPageViewIfEnabled } from '../util/cookiesHandling';
+
+export default function EventsAndTrainingsPage(): ReactElement {
+ TrackPageViewIfEnabled();
+
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/pmp-frontend-app/src/pages/HomePage.tsx b/pmp-frontend-app/src/pages/HomePage.tsx
new file mode 100644
index 0000000..83b07c8
--- /dev/null
+++ b/pmp-frontend-app/src/pages/HomePage.tsx
@@ -0,0 +1,87 @@
+import { ReactElement } from 'react';
+// import CardComponent from "../components/CardComponent";
+import ImageCarouselAlternativeComponent from "../components/ImageCarouselAlternativeComponent";
+import { BODY_CLASSES,
+ // BUTTON_TYPE_ONE,
+ // H_1
+ } from '../constants';
+// import { ICardConfig, ICardContent } from '../interfaces/types';
+import { TrackPageViewIfEnabled } from '../util/cookiesHandling';
+
+export default function HomePage(): ReactElement {
+ TrackPageViewIfEnabled();
+
+ // var cardTitleClasses: string = "text-center text-base-100-content text-xl font-semibold";
+ // var cardTextClasses: string = "text-center";
+
+ // var cardConfig: { [id: string] : ICardConfig; } = {
+ // 'whiteCard': {
+ // cardClasses: "w-[40rem] bg-base-100 text-base-100-content bg-opacity-95 shadow-xl border-2 border-base-100",
+ // titleClasses: cardTitleClasses,
+ // subTitleClasses: "",
+ // textClasses: cardTextClasses,
+ // imgClasses: "",
+ // buttonClasses: "",
+ // buttonPlacement: "",
+ // },
+ // 'blackCard': {
+ // cardClasses: "bg-neutral bg-opacity-95 rounded-[10px] shadow border-2",
+ // titleClasses: cardTitleClasses,
+ // subTitleClasses: "",
+ // textClasses: cardTextClasses,
+ // imgClasses: "",
+ // buttonClasses: BUTTON_TYPE_ONE,
+ // buttonPlacement: "justify-center",
+ // }
+ // };
+
+ // var cardContent: { [id: string] : ICardContent } = {
+ // 'whiteCard1': {
+ // title: "",
+ // subTitle: "",
+ // text: "In development",
+ // buttonText: "",
+ // imageSrc: "",
+ // imageAlt: "",
+ // },
+ // 'blackCard1': {
+ // title: "Data sources",
+ // subTitle: "",
+ // text: "In development",
+ // buttonText: "Sign In",
+ // imageSrc: "",
+ // imageAlt: "",
+ // },
+
+ // };
+
+ return (
+ Events & Trainings page under construction
+
+
+ );
+}
\ No newline at end of file
diff --git a/pmp-frontend-app/src/pages/PrivacyPage.tsx b/pmp-frontend-app/src/pages/PrivacyPage.tsx
new file mode 100644
index 0000000..898e7bf
--- /dev/null
+++ b/pmp-frontend-app/src/pages/PrivacyPage.tsx
@@ -0,0 +1,86 @@
+import { ReactElement, useState } from 'react';
+import {
+ BODY_CLASSES,
+ BUTTON_TYPE_ONE,
+ H_1,
+} from '../constants';
+import { Link } from 'react-router-dom';
+import { ILink } from '../interfaces/types';
+import Cookies from 'js-cookie';
+import { cookieIsSetToTrue, TrackPageViewIfEnabled } from '../util/cookiesHandling';
+import { PrivacyPageContent } from '../content/content';
+
+export default function PrivacyPage(): ReactElement {
+
+ TrackPageViewIfEnabled();
+
+ var breadcrumbs: { [id: string] : ILink; } = {
+ 'l1': { text: 'Home', classes: '', link: '/' },
+ 'l2': { text: 'Privacy', classes: '', link: '' },
+ };
+
+ const optInOrOutTextActive = (isTrackingEnabled: Boolean): String[] => {
+ if (isTrackingEnabled) {
+ return ["Click on the button to the right to opt out", "Opt Out"]
+ }
+ else {
+ return ["Click on the button to the right to opt in", "Opt In"]
+ }
+ }
+
+ const [ optInText, setOptInText ] = useState(optInOrOutTextActive(cookieIsSetToTrue('trackingEnabled')))
+
+ const handleOptOut = () => {
+ let trackingEnabledCookie: Boolean = cookieIsSetToTrue('trackingEnabled');
+ setOptInText(optInOrOutTextActive(!trackingEnabledCookie))
+ Cookies.set('trackingEnabled', String(!trackingEnabledCookie), { expires: 365 });
+ };
+
+ return (
+ <>
+
+
+
+
+ */
+}
+
+
+ Latest News
+
+
+ Latest News
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/pmp-frontend-app/src/pages/SignInPage.tsx b/pmp-frontend-app/src/pages/SignInPage.tsx
new file mode 100644
index 0000000..18b89c7
--- /dev/null
+++ b/pmp-frontend-app/src/pages/SignInPage.tsx
@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import { TrackPageViewIfEnabled } from '../util/cookiesHandling';
+
+export default function SignInPage(): ReactElement {
+ TrackPageViewIfEnabled();
+
+ return (
+
+
+ -
+ {Object.keys(breadcrumbs).map( key => (
+
- {breadcrumbs[key].link ? {breadcrumbs[key].text} : <>{breadcrumbs[key].text}} + ))} +
Privacy Policy
+ {PrivacyPageContent.content[0].header}
+ {PrivacyPageContent.content[0].body}
+{PrivacyPageContent.content[1].header}
+ {PrivacyPageContent.content[1].body}
+
+
+ {optInText[0]}
+
+
+
+
+ {PrivacyPageContent.content[2].header}
+ + We collect information that your browser sends to us whenever you visit our Service, referred to as 'log data.' This data may include: +
+-
+
- The website you visited us from +
- The parts of our Service you visit +
- The date and duration of your visit +
- Your anonymised IP address +
- Information about the device you used during your visit (device type, operating system, screen resolution, language, country you are located in, and web browser type) +
+ We process this usage data using Matomo Analytics (hosted on SciLifeLab servers and operated solely by SciLifeLab) + for statistical purposes, to improve our Service, and to recognise and prevent any misuse. You can opt out of your statistics + being collected below. Note that the tracking opt-out feature requires cookies to be enabled. +
+{PrivacyPageContent.content[3].header}
+ {PrivacyPageContent.content[3].body}
+{PrivacyPageContent.content[4].header}
+ {PrivacyPageContent.content[4].body}
+{PrivacyPageContent.content[5].header}
+ {PrivacyPageContent.content[5].body}
+
+
+ );
+}
\ No newline at end of file
diff --git a/pmp-frontend-app/src/util/cookiesHandling.ts b/pmp-frontend-app/src/util/cookiesHandling.ts
new file mode 100644
index 0000000..61efcb1
--- /dev/null
+++ b/pmp-frontend-app/src/util/cookiesHandling.ts
@@ -0,0 +1,27 @@
+import { useMatomo } from '@jonkoops/matomo-tracker-react';
+import Cookie from 'js-cookie';
+import React from 'react';
+
+// cookies are stored as strings, so they cannot be directly used as boolean type
+export function cookieIsSetToTrue(cookieName: string): Boolean {
+ let cookieValue: string | undefined = Cookie.get(cookieName);
+ if (!cookieValue) {
+ throw new Error('Cookie with name "'+ cookieName +'" does not exist or is not set yet.')
+ }
+ else {
+ return (Cookie.get(cookieName) === 'true');
+ }
+}
+
+export function TrackPageViewIfEnabled() {
+ // const { trackPageView, trackEvent } = useMatomo() , trackEvent to track clicks and other events
+ const { trackPageView,} = useMatomo()
+
+ // track page visit if trackingEnabled cookie is set to 'true'
+
+ React.useEffect(() => {
+ if (cookieIsSetToTrue('trackingEnabled')) {
+ trackPageView()
+ }
+ }, [])
+}
\ No newline at end of file
diff --git a/pmp-frontend-app/src/vite-env.d.ts b/pmp-frontend-app/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/pmp-frontend-app/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// Sign In page under construction
+