Merge pull request #94 from ScilifelabDataCentre/dev

Prepare new release

next-app/src/app/about/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
     <div className="container mx-auto px-4 py-8">
       <AboutPageComponent />
       {children}
-      <LastUpdated date="11-11-2024" />
+      <LastUpdated date="04-12-2024" />
     </div>
   );
 }

next-app/src/app/about/partners/page.tsx

@@ -10,6 +10,7 @@ const nbisImage = "/Partner logo/nbislogo_orange_txt_3cb0778d90.svg";
 const kawImage = "/Partner logo/kaw_sv_300x300.png";
 const kiImage = "/Partner logo/KI_digital_logotyp_positiv_RGB.png";
 const scilifelabImage = "/Partner logo/SciLifeLab_Logotype_Green_POS.png";
+const tefImage = "/Partner logo/tefhealth_logo.png";
 
 export default function AboutPartnersPage(): ReactElement {
   TrackPageViewIfEnabled();
@@ -18,7 +19,7 @@ export default function AboutPartnersPage(): ReactElement {
     "flex flex-row justify-center items-center w-full h-full bg-white shadow-xl";
   const cardConfig: { [id: string]: ICardConfig } = {
     dcCard: {
-      cardClasses: cardClasses + " pl-6",
+      cardClasses: cardClasses,
       titleClasses: "card-title",
       subTitleClasses: "",
       textClasses: "",
@@ -36,7 +37,7 @@ export default function AboutPartnersPage(): ReactElement {
       buttonPlacement: "",
     },
     ddlsCard: {
-      cardClasses: cardClasses + " pl-6",
+      cardClasses: cardClasses,
       titleClasses: "card-title",
       subTitleClasses: "",
       textClasses: "",
@@ -45,7 +46,7 @@ export default function AboutPartnersPage(): ReactElement {
       buttonPlacement: "",
     },
     kawCard: {
-      cardClasses: "w-full h-full card lg:card-side bg-white shadow-xl",
+      cardClasses: cardClasses,
       titleClasses: "card-title",
       subTitleClasses: "",
       textClasses: "",
@@ -54,14 +55,23 @@ export default function AboutPartnersPage(): ReactElement {
       buttonPlacement: "",
     },
     nbisCard: {
-      cardClasses: cardClasses + " pl-10",
+      cardClasses: cardClasses,
       titleClasses: "card-title",
       subTitleClasses: "",
       textClasses: "",
       imgClasses: "object-contain h-36 w-36",
       buttonClasses: "",
       buttonPlacement: "",
     },
+    tefCard: {
+      cardClasses: cardClasses,
+      titleClasses: "card-title",
+      subTitleClasses: "",
+      textClasses: "",
+      imgClasses: "object-contain h-72 w-96",
+      buttonClasses: "",
+      buttonPlacement: "",
+    },
   };
 
   const cardContent: { [id: string]: ICardContent } = {
@@ -107,6 +117,14 @@ export default function AboutPartnersPage(): ReactElement {
       imageSrc: nbisImage,
       imageAlt: "NBIS and ELIXIR Sweden logos",
     },
+    tefCard: {
+      title: "TEF-Health",
+      subTitle: "",
+      text: "The European Commission has co-funded an initiative to establish Testing and Experimentation Facilities (TEFs) for artificial intelligence and robotics, with healthcare as one of the targeted sectors. TEF-Health aims to provide expertise and assistance to small and medium-sized enterprises and innovators, promoting the transfer of research innovations to healthcare applications. The Data Science Node in Precision Medicine and Diagnostics contributes to and collaborates specifically with Work Package 4 - Virtual Testing Centers, to co-develop and maintain services and products beneficial for innovators and researchers.",
+      buttonText: "",
+      imageSrc: tefImage,
+      imageAlt: "TEF-Health logo",
+    },
   };
 
   return (
@@ -142,6 +160,12 @@ export default function AboutPartnersPage(): ReactElement {
             cardContent={cardContent["kawCard"]}
           />
         </div>
+        <div className="w-full md:w-1/2 p-2">
+          <CardComponent
+            cardConfig={cardConfig["tefCard"]}
+            cardContent={cardContent["tefCard"]}
+          />
+        </div>
       </div>
     </>
   );

next-app/src/app/datasources/page.tsx

@@ -93,13 +93,13 @@ export default function DataPage(): ReactElement {
   }
 
   function checkedDataFilter(
-    tagType: string,
+    tagType: keyof IDataSourceFilters,
     tagName: string,
     boxIndex: number
   ) {
     setSelectedFilters((prev) => {
       const newFilters = { ...prev };
-      const key = tagType === "dataType" ? "dataTypes" : "diseaseTypes";
+      const key = tagType === "dataTypes" ? "dataTypes" : "diseaseTypes";
       if (newFilters[key].includes(tagName)) {
         newFilters[key] = newFilters[key].filter((item) => item !== tagName);
       } else {
@@ -118,7 +118,7 @@ export default function DataPage(): ReactElement {
   function applyDataTypeFilter(dataSource: IDataSourcesDC) {
     return (
       selectedFilters.dataTypes.length === 0 ||
-      selectedFilters.dataTypes.every((filter) =>
+      selectedFilters.dataTypes.some((filter) =>
         dataSource.data.some(
           (tag) => tag.toLowerCase() === filter.toLowerCase()
         )
@@ -129,7 +129,7 @@ export default function DataPage(): ReactElement {
   function applyDiseaseTypeFilter(dataSource: IDataSourcesDC) {
     return (
       selectedFilters.diseaseTypes.length === 0 ||
-      selectedFilters.diseaseTypes.every((filter) =>
+      selectedFilters.diseaseTypes.some((filter) =>
         dataSource.disease_type.some(
           (tag) => tag.toLowerCase() === filter.toLowerCase()
         )
@@ -158,13 +158,11 @@ export default function DataPage(): ReactElement {
   function sanitizeURL(url: string) {
     try {
       const parsedURL = new URL(url);
-      // Only allow http and https protocols
       if (parsedURL.protocol !== "http:" && parsedURL.protocol !== "https:") {
         return "#";
       }
       return parsedURL.toString();
     } catch {
-      // If URL is invalid, return a safe default
       return "#";
     }
   }
@@ -199,6 +197,12 @@ export default function DataPage(): ReactElement {
       <div className="lg:grid lg:grid-cols-4 lg:gap-8 pt-8">
         <div className="lg:col-span-1 mb-8 lg:mb-0">
           <div className="space-y-8">
+            {/* Disclaimer */}
+            <div className="w-full max-w-lg bg-muted border border-neutral rounded-lg p-4 text-sm text-muted-foreground text-left mx-auto">
+              To access data, researchers may need to obtain ethical approval,
+              submit data requests and set up data management agreements.
+            </div>
+            {/* Search */}
             <div className="space-y-4">
               <label
                 htmlFor="search"
@@ -210,12 +214,13 @@ export default function DataPage(): ReactElement {
                 id="search"
                 type="text"
                 name="search"
-                placeholder="Name/Keywords"
+                placeholder="Search by name or keyword"
                 value={searchBar}
                 onChange={(e) => setSearchBar(e.target.value)}
                 className="bg-muted"
               />
             </div>
+            {/* Data Type Filters */}
             <div className="space-y-4">
               <h2 className="font-bold text-2xl text-foreground">Data Type</h2>
               <Card>
@@ -229,11 +234,7 @@ export default function DataPage(): ReactElement {
                         id={`dataType-${index}`}
                         checked={checkedList[index]}
                         onCheckedChange={() =>
-                          checkedDataFilter(
-                            "dataType",
-                            element.toLowerCase(),
-                            index
-                          )
+                          checkedDataFilter("dataTypes", element, index)
                         }
                       />
                       <label
@@ -247,6 +248,7 @@ export default function DataPage(): ReactElement {
                 </CardContent>
               </Card>
             </div>
+            {/* Disease Type Filters */}
             <div className="space-y-4">
               <h2 className="font-bold text-2xl text-foreground">
                 Disease Type
@@ -263,8 +265,8 @@ export default function DataPage(): ReactElement {
                         checked={checkedList[filters.dataTypes.length + index]}
                         onCheckedChange={() =>
                           checkedDataFilter(
-                            "diseaseType",
-                            element.toLowerCase(),
+                            "diseaseTypes",
+                            element,
                             filters.dataTypes.length + index
                           )
                         }
@@ -287,6 +289,7 @@ export default function DataPage(): ReactElement {
             .filter((data) => applyDataTypeFilter(data))
             .filter((data) => applyDiseaseTypeFilter(data))
             .filter((data) => applySearchBar(data))
+            .sort((a, b) => a.name.localeCompare(b.name))
             .map((item, index) => (
               <Card key={index}>
                 <CardHeader className="bg-muted">

next-app/src/app/registries/page.tsx

@@ -83,8 +83,6 @@ export default function RegistryPage() {
   useEffect(() => {
     async function fetchRegistryData() {
       try {
-        // In a real-world scenario, you might fetch this data from an API
-        // For this example, we'll simulate an API call with a local import
         const registryData = await import(
           "@/assets/Kvalitetsregister_geo_dates_02.09.2024.json"
         );
@@ -196,6 +194,12 @@ export default function RegistryPage() {
       <div className="lg:grid lg:grid-cols-4 lg:gap-8 pt-8">
         <div className="lg:col-span-1 mb-8 lg:mb-0">
           <div className="space-y-8">
+            {/* Disclaimer */}
+            <div className="w-full max-w-lg bg-muted border border-neutral rounded-lg p-4 text-sm text-muted-foreground text-left mx-auto">
+              To access data, researchers may need to obtain ethical approval,
+              submit data requests and set up data management agreements.
+            </div>
+            {/* Search */}
             <div className="space-y-4">
               <label
                 htmlFor="search"
@@ -207,12 +211,13 @@ export default function RegistryPage() {
                 id="search"
                 type="text"
                 name="search"
-                placeholder="Name/Keywords"
+                placeholder="Search by name or keyword"
                 value={searchBar}
                 onChange={(e) => setSearchBar(e.target.value)}
                 className="bg-muted"
               />
             </div>
+            {/* Organisation Filters */}
             <div className="space-y-4">
               <h2 className="font-bold text-2xl text-foreground">
                 Organisation
@@ -242,6 +247,7 @@ export default function RegistryPage() {
                 </CardContent>
               </Card>
             </div>
+            {/* Category Filters */}
             <div className="space-y-4">
               <h2 className="font-bold text-2xl text-foreground">Category</h2>
               <Card>
@@ -282,6 +288,7 @@ export default function RegistryPage() {
             .filter((registry) => applyRegistryCentreFilter(registry))
             .filter((registry) => applyRegistryCategoryFilter(registry))
             .filter((registry) => applySearchBar(registry))
+            .sort((a, b) => a.name.localeCompare(b.name))
             .map((item, index) => (
               <Card key={index}>
                 <CardHeader className="bg-muted">