Harmonized all landing pages and added one for MEDfl

renderer/components/dbComponents/InputToolsComponent.jsx

@@ -1,25 +1,25 @@
-import { useContext, useEffect, useState } from "react"
+import Image from "next/image"
+import { Button } from "primereact/button"
 import { Card } from "primereact/card"
 import { Dropdown } from "primereact/dropdown"
-import { Button } from "primereact/button"
+import { useContext, useEffect, useState } from "react"
 import { Stack } from "react-bootstrap"
+import myimage from "../../../resources/medomics_transparent_bg.png"
+import MEDprofilesPrepareData from "../input/MEDprofiles/MEDprofilesPrepareData"
+import { getCollectionSize } from "../mongoDB/mongoDBUtils"
 import { DataContext } from "../workspace/dataContext"
-
-// import tools
 import BasicToolsDB from "./inputToolsDB/basicToolsDB"
+import ConvertCategoricalColumnIntoNumericDB from "./inputToolsDB/convertCategoricalColumnIntoNumericDB"
+import DropColumnsAndTagsToolsDB from "./inputToolsDB/dropColumnsToolsDB"
 import DropDuplicatesToolsDB from "./inputToolsDB/dropDuplicatesToolsDB"
 import FeatureReductionToolsDB from "./inputToolsDB/featureReductionToolsDB/featureReductionToolsDB"
-import ConvertCategoricalColumnIntoNumericDB from "./inputToolsDB/convertCategoricalColumnIntoNumericDB"
 import GroupingTaggingToolsDB from "./inputToolsDB/groupingTaggingToolsDB"
 import HoldoutSetCreationToolsDB from "./inputToolsDB/holdoutSetCreationToolsDB"
 import MergeToolsDB from "./inputToolsDB/mergeToolsDB"
-import DropColumnsAndTagsToolsDB from "./inputToolsDB/dropColumnsToolsDB"
 import NormalizationToolsDB from "./inputToolsDB/normalizationToolsDB"
 import SimpleCleaningToolsDB from "./inputToolsDB/simpleCleaningToolsDB"
 import SubsetCreationToolsDB from "./inputToolsDB/subsetCreationToolsDB"
 import TransformColumnToolsDB from "./inputToolsDB/transformColumnToolsDB"
-import MEDprofilesPrepareData from "../input/MEDprofiles/MEDprofilesPrepareData"
-import { getCollectionSize } from "../mongoDB/mongoDBUtils"
 
 const SectionContainer = ({ title, children }) => (
   <div className="mb-3">
@@ -147,7 +147,14 @@ const InputToolsComponent = ({ exportOptions }) => {
     <div style={{ display: "flex", height: "100%", overflow: "hidden" }}>
       {/* Sidebar */}
       <aside style={{ width: "280px", borderRight: "1px solid #ddd", padding: "1rem", overflowY: "auto" }}>
-        <h3 style={{ textAlign: "center", marginBottom: "1rem" }}>Input Sections</h3>
+        <h5 style={{ 
+          textAlign: "center", 
+          marginBottom: "1rem",
+          padding: "0.6rem 0.8rem",
+          borderBottom: "1px solid #ddd",
+          fontWeight: 600,
+          borderRadius: "6px 6px 0 0",
+        }} >Input Sections</h5>
 
         {Object.entries(SECTIONS).map(([key, section]) => (
           <SectionContainer key={key} title={section.label}>
@@ -182,7 +189,12 @@ const InputToolsComponent = ({ exportOptions }) => {
       {/* Main Content */}
       <main style={{ flex: 1, padding: "1.5rem", overflowY: "auto" }}>
   <div style={{ textAlign: "center", marginBottom: "20px" }}>
-    <h2>Database Input Module</h2>
+    <h1 className="text-center fw-bold text-secondary mt-2" style={{ fontSize: "3rem", letterSpacing: "1px" }}>
+      Input Module
+    </h1>
+    <div className="mx-auto text-center mb-4" >
+      <Image className="text-center" src={myimage} alt="" style={{ height: "30px", width: "30px" }} />
+    </div>
     <Card title="Select CSV File" style={{ marginBottom: "20px" }}>
       <Dropdown
         filter

renderer/components/mainPages/application.jsx

@@ -1,5 +1,6 @@
 import { randomUUID } from "crypto"
 import { shell } from "electron"
+import Image from "next/image"
 import { Badge } from "primereact/badge"
 import { Button } from "primereact/button"
 import { Card } from "primereact/card"
@@ -11,6 +12,7 @@ import { Tooltip } from "primereact/tooltip"
 import React, { useContext, useEffect, useState } from "react"
 import { Col, Row, Stack } from "react-bootstrap"
 import { toast } from "react-toastify"
+import myimage from "../../../resources/medomics_transparent_bg.png"
 import { requestBackend } from "../../utilities/requests"
 import DataTableFromDB from "../dbComponents/dataTableFromDB"
 import { getCollectionData } from "../dbComponents/utils"
@@ -519,7 +521,12 @@ const ApplicationPageWithModulePage = ({ pageId = "application-456" }) => {
 
           <div className="application-introduction">
 
-            <h2>🚀 Model Deployment</h2>
+            <h1 className="text-center fw-bold text-secondary mt-2" style={{ fontSize: "3rem", letterSpacing: "1px" }}>
+              Application Module
+            </h1>
+            <div className="mx-auto text-center mb-4" >
+              <Image className="text-center" src={myimage} alt="" style={{ height: "30px", width: "30px" }} />
+            </div>
 
             <p>
               This module allows users to deploy a machine learning model for inference.

renderer/components/mainPages/evaluationLandingPage.jsx

@@ -1,6 +1,7 @@
 import { randomUUID } from "crypto"
 import Image from "next/image"
 import { InputText } from "primereact/inputtext"
+import { Message } from "primereact/message"
 import { useContext, useEffect, useState } from "react"
 import { Button, Card, Stack } from "react-bootstrap"
 import { FaAlignJustify } from "react-icons/fa"
@@ -160,12 +161,20 @@ export default function EvaluationLandingPage() {
         </h5>
       </div>
 
-      <div style={{ display: "flex", flexDirection: "vertical", flexGrow: "10", width: "100%", margin: "auto" }}>
+      <div style={{ paddingTop: "1rem", display: "flex", flexDirection: "vertical", flexGrow: "10", width: "100%", margin: "auto" }}>
           {/* Main Title and Subtitle */}
           <div className="h-100 w-100 d-flex justify-content-center align-items-center">
-            <Stack direction="horizontal" gap={4} className="w-100">
+            <Stack
+              direction="horizontal"
+              gap={4}
+              className="w-75 flex-wrap align-items-stretch"
+              style={{ justifyContent: "center" }}
+            >
               {/* Explainer Dashboard Card */}
-              <Card className="flex-fill shadow-sm border-primary h-100 w-50 hover-border-success" style={{ cursor: "pointer" }}>
+              <Card
+                className="shadow-sm border-primary h-100 hover-border-success"
+                style={{ cursor: "pointer", flex: "1 1 320px", minWidth: "280px" }}
+              >
                 <Card.Header className="bg-danger text-white d-flex align-items-center">
                   <TbZoom className="me-2" color="white"/>
                   <h5 className="text-white mb-0">Explainer Dashboard</h5>
@@ -193,17 +202,23 @@ export default function EvaluationLandingPage() {
               </Card>
 
               {/* MED3pa Card */}
-              <Card className="flex-fill shadow-sm border-success h-100 w-50" style={{ cursor: "pointer" }}>
+              <Card
+                className="shadow-sm border-success h-100"
+                style={{ cursor: "pointer", flex: "1 1 320px", minWidth: "280px" }}
+              >
                 <Card.Header className="bg-success text-white d-flex align-items-center">
                   <FaAlignJustify className="me-2" color="white"/>
                   <h5 className="text-white mb-0">MED3pa</h5>
                 </Card.Header>
                 <Card.Body className="d-flex flex-column justify-content-center align-items-center p-4">
                   <Image src={med3paLogo} alt="MED3pa" width={120} height={120} />
                   <Card.Text className="mt-3 text-center">
-                    Evaluate models stability and performance and flag unreliable predictions to ensure no patient group is left behind.
+                    <div className="text-center mb-3" style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+                      <Message severity="success" text="This package will be available soon!" className="mb-3" />
+                      Evaluate models stability and performance and flag unreliable predictions to ensure no patient group is left behind.
+                    </div>
                   </Card.Text>
-                  <Button variant="success" onClick={(e) => choosePage(e, "MED3pa")}>
+                  <Button disabled variant="success" onClick={(e) => choosePage(e, "MED3pa")}>
                     Start Analysis
                   </Button>
                 </Card.Body>

renderer/components/mainPages/extractionLandingPage.jsx

@@ -21,15 +21,15 @@ export default function ExtractionLandingPage() {
 
   return (
     <div className="h-100 w-100">
-      <h1 className="text-center  fw-bold text-secondary mt-5" style={{ fontSize: "3rem", letterSpacing: "1px" }}>
+      <h1 className="text-center  fw-bold text-secondary mt-3" style={{ fontSize: "3rem", letterSpacing: "1px" }}>
         Extraction Module 
       </h1>
-      <div className="mx-auto text-center my-4" >
+      <div className="mx-auto text-center my-3" >
         <Image className="text-center" src={myimage} alt="" style={{ height: "30px", width: "30px" }} />
       </div>
 
       {/* Description of the Extraction Module */}
-      <div className="mx-auto text-center" style={{ maxWidth: "860px", marginBottom: "40px" }}>
+      <div className="mx-auto text-center" style={{ maxWidth: "860px", marginBottom: "20px" }}>
         <h5 className="lh-lg" style={{ fontSize: "1.1rem" }}>
           This input module offers ready-made tools to pull insights from images, notes, and health tracking data, 
           while relying on the specialized MEDiml tool to extract deeper features from medical scans.
@@ -48,12 +48,15 @@ export default function ExtractionLandingPage() {
 
           {/* Main Title and Subtitle */}
           <div className="h-100 w-100 d-flex justify-content-center align-items-center">
-            <Stack direction="horizontal" gap={4} className="w-100">
+            <Stack direction="horizontal" gap={4} className="w-75">
               {/* MEDiml Card */}
-              <Card className="flex-fill shadow-sm border-primary h-100 w-50 hover-border-success" style={{ cursor: "pointer" }}>
+              <Card
+                className="shadow-sm border-primary h-100 hover-border-success"
+                style={{ cursor: "pointer", flex: "1 1 320px", minWidth: "280px" }}
+              >
                 <Card.Header className="bg-primary text-white d-flex align-items-center">
-                  <LuBrain className="me-2" />
-                  <h5 className="mb-0">MEDiml</h5>
+                  <LuBrain className="me-2" color="white" />
+                  <h5 className="text-white mb-0">MEDiml</h5>
                 </Card.Header>
                 <Card.Body className="d-flex flex-column justify-content-center align-items-center p-4">
                   <Image src={medimlLogo} alt="MEDiml" width={120} height={120} />
@@ -67,10 +70,13 @@ export default function ExtractionLandingPage() {
               </Card>
 
               {/* Text Card */}
-              <Card className="flex-fill shadow-sm border-success h-100 w-50" style={{ cursor: "pointer" }}>
+              <Card
+                className="shadow-sm border-success h-100 w-50"
+                style={{ cursor: "pointer", flex: "1 1 320px", minWidth: "280px" }}
+              >
                 <Card.Header className="bg-success text-white d-flex align-items-center">
-                  <FaAlignJustify className="me-2" />
-                  <h5 className="mb-0">Text</h5>
+                  <FaAlignJustify className="me-2" color="white" />
+                  <h5 className="text-white mb-0">Text</h5>
                 </Card.Header>
                 <Card.Body className="d-flex flex-column justify-content-center align-items-center p-4">
                   <FaAlignJustify className="me-6" size={100} color="green"/>
@@ -90,12 +96,15 @@ export default function ExtractionLandingPage() {
       <div style={{ paddingTop: "1rem", display: "flex", flexDirection: "vertical", flexGrow: "10", width: "100%", margin: "auto" }}>
         <Stack direction="vertical" gap={3} style={{ padding: "20px 0 0 0" }}>
           <div className="h-100 w-100 d-flex justify-content-center align-items-center">
-            <Stack direction="horizontal" gap={4} className="w-100">
+            <Stack direction="horizontal" gap={4} className="w-75">
               {/* Time Series Card */}
-              <Card className="flex-fill shadow-sm border-secondary h-100 w-50 hover-border-success" style={{ cursor: "pointer" }}>
+              <Card
+                className="shadow-sm border-secondary h-100 w-50 hover-border-success"
+                style={{ cursor: "pointer", flex: "1 1 320px", minWidth: "280px" }}
+              >
                 <Card.Header className="bg-secondary text-white d-flex align-items-center">
-                  <FaChartLine className="me-2" />
-                  <h5 className="mb-0">Time Series</h5>
+                  <FaChartLine className="me-2" color="white" />
+                  <h5 className="text-white mb-0">Time Series</h5>
                 </Card.Header>
                 <Card.Body className="d-flex flex-column justify-content-center align-items-center p-4">
                   <FaChartLine className="me-6" size={100} color="gray" />
@@ -109,10 +118,13 @@ export default function ExtractionLandingPage() {
               </Card>
 
               {/* Image Card */}
-              <Card className="flex-fill shadow-sm border-warning h-100 w-50" style={{ cursor: "pointer" }}>
+              <Card
+                className="shadow-sm border-warning h-100 w-50"
+                style={{ cursor: "pointer", flex: "1 1 320px", minWidth: "280px" }}
+              >
                 <Card.Header className="bg-warning text-white d-flex align-items-center">
-                  <FaImage className="me-2" />
-                  <h5 className="mb-0">Image</h5>
+                  <FaImage className="me-2" color="white" />
+                  <h5 className="text-white mb-0">Image</h5>
                 </Card.Header>
                 <Card.Body className="d-flex flex-column justify-content-center align-items-center p-4">
                   <FaImage className="me-6" size={100} color="orange" />

renderer/components/mainPages/medfl.jsx

@@ -1,13 +1,11 @@
-import React from "react"
+import MedflowWelcomePage from "./medflWelcomePage"
 import ModulePage from "./moduleBasics/modulePage"
-import MEDflHelloWorldPanel from "../medfl/medflHelloWorldPanel"
 
 const MEDflPage = ({ pageId }) => {
   return (
     <>
       <ModulePage pageId={pageId} shadow={true}>
-        <h1 className="center">MEDfl Module</h1>
-        <MEDflHelloWorldPanel />
+        <MedflowWelcomePage />
       </ModulePage>
     </>
   )

renderer/components/mainPages/medflWelcomePage.jsx

@@ -0,0 +1,85 @@
+import Image from "next/image"
+import { Message } from "primereact/message"
+import { useContext } from "react"
+import { Button, Card, Stack } from "react-bootstrap"
+import { FaCogs, FaGlobe } from "react-icons/fa"
+import myimage from "../../../resources/medomics_transparent_bg.png"
+import { LayoutModelContext } from "../layout/layoutContext"
+
+export default function MedflWelcomePage() {
+  const { dispatchLayout } = useContext(LayoutModelContext)
+
+  function choosePage(event, name) {
+    event.stopPropagation()
+    console.log(`Double clicked ${name}`, event, `open${name}Module`)
+    dispatchLayout({ type: `open${name}Module`, payload: { pageId: name } })
+  }
+
+  return (
+    <div className="h-100 w-100">
+      <h1 className="text-center  fw-bold text-secondary mt-5" style={{ fontSize: "3rem", letterSpacing: "1px" }}>
+        Federated Learning Module
+      </h1>
+
+      <div className="mx-auto text-center my-3" >
+        <Image className="text-center" src={myimage} alt="" style={{ height: "30px", width: "30px" }} />
+      </div>
+      <div className="my-3" style={{ display: "flex", flexDirection: "vertical", flexGrow: "10", width: "100%", margin: "auto" }}>
+        <Stack direction="vertical" gap={3} style={{ padding: "20px 0 0 0" }}>
+
+          {/* Main Title and Subtitle */}
+          <Stack direction="horizontal" gap={5} style={{ padding: "0" }}>
+            <div className="text-center w-100 my-3">
+              <h3 style={{ fontSize: "1.5rem", fontWeight: "400" }} className="text-center mb-3 w-75 mx-auto">
+                <span style={{ fontWeight: "800" }} className="text-primary">
+                  MEDfl
+                </span>{" "}
+                A Friendly Federated Learning Framework for Medicine
+              </h3>
+              <Message severity="success" text="This package will be available soon!"/>
+            </div>
+          </Stack>
+
+          {/* <h5 className="px-3 w-75"> A comprehensive package for simulating the federated learning process in the medical field, featuring an intuitive user interface for seamless interaction.</h5> */}
+          <div className="h-100 w-100 d-flex justify-content-center align-items-center my-3">
+            <Stack direction="horizontal" gap={4} className="w-75">
+              {/* Simulation Card */}
+              <Card className="flex-fill shadow-sm border-primary h-100 hover-border-success" style={{ cursor: "pointer" }}>
+                <Card.Header className="bg-primary text-white d-flex align-items-center">
+                  <FaCogs className="me-2" color="white" />
+                  <h5 className="text-white mb-0">Simulation FL</h5>
+                </Card.Header>
+                <Card.Body className="d-flex flex-column justify-content-center align-items-center p-4">
+                  <Image src={myimage} alt="Simulation" width={120} height={120} />
+                  <Card.Text className="mt-3 text-center">
+                    Run a full federated learning simulation locally. Perfect for testing pipelines, debugging strategies, and visualizing metrics in a controlled environment.
+                  </Card.Text>
+                  <Button disabled variant="primary" onClick={(e) => choosePage(e, "MEDfl")}>
+                    Start Simulation
+                  </Button>
+                </Card.Body>
+              </Card>
+
+              {/* Real-World Card */}
+              <Card className="flex-fill shadow-sm border-success h-100" style={{ cursor: "pointer" }}>
+                <Card.Header className="bg-success text-white d-flex align-items-center">
+                  <FaGlobe className="me-2" color="white" />
+                  <h5 className="text-white mb-0">Real-World FL</h5>
+                </Card.Header>
+                <Card.Body className="d-flex flex-column justify-content-center align-items-center p-4">
+                  <Image src={myimage} alt="Real World" width={120} height={120} />
+                  <Card.Text className="mt-3 text-center">
+                    Connect to real devices or remote servers to orchestrate a production-grade federated learning workflow with secure communication and live data.
+                  </Card.Text>
+                  <Button disabled variant="success" onClick={(e) => choosePage(e, "flRwWorkflow")}>
+                    Go Live
+                  </Button>
+                </Card.Body>
+              </Card>
+            </Stack>
+          </div>
+        </Stack>
+      </div>
+    </div>
+  )
+}