Skip to content

Harmonized all landing pages and added one for MEDfl #555

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MahdiAll99 wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Harmonized all landing pages and added one for MEDfl #555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
866a71d
Harmonized all landing pages and added one for MEDfl
MahdiAll99 Jun 15, 2026
5705e27
more harmonization of main modules pages
MahdiAll99 Jul 6, 2026
90d82e7
new landing page for learning module
MahdiAll99 Jul 6, 2026
14d00e8
UI/UX improvement to unify the landing pages for all modules
MahdiAll99 Jul 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
226 changes: 99 additions & 127 deletions renderer/components/dbComponents/InputToolsComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,28 @@
import { useContext, useEffect, useState } from "react"
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 MEDprofilesPrepareData from "../input/MEDprofiles/MEDprofilesPrepareData"
import { getCollectionSize } from "../mongoDB/mongoDBUtils"
import { DataContext } from "../workspace/dataContext"

// import tools
import ModuleLandingShell, { ModuleGuideText } from "../mainPages/moduleBasics/ModuleLandingShell"
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">
<h6
style={{
padding: "0.6rem 0.8rem",
borderBottom: "1px solid #ddd",
fontWeight: 600,
borderRadius: "6px 6px 0 0",
}}
>
{title}
</h6>
<h6 className="module-landing-input-section-title">{title}</h6>
<Stack direction="vertical" gap={1} style={{ marginTop: "0.5rem" }}>
{children}
</Stack>
Expand Down Expand Up @@ -135,7 +125,7 @@ const InputToolsComponent = ({ exportOptions }) => {
if (!activeTool) return null
const ToolComponent = activeTool.component
return (
<div style={{ marginTop: "20px" }}>
<div style={{ marginTop: "12px" }}>
<Button label="← Back to tools" className="p-button-text mb-3" onClick={() => setActiveTool(null)} />
<h3>{activeTool.label}</h3>
<ToolComponent exportOptions={exportOptions} currentCollection={collectionId} collectionSize={collectionSize} />
Expand All @@ -144,119 +134,101 @@ const InputToolsComponent = ({ exportOptions }) => {
}

return (
<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>

{Object.entries(SECTIONS).map(([key, section]) => (
<SectionContainer key={key} title={section.label}>
{section.subsections.map((sub) => (
<div
key={sub.key}
onClick={() => {
setActiveSection(sub.key)
setActiveTool(null)
}}
style={{
cursor: "pointer",
padding: "8px 10px",
marginBottom: "6px",
borderRadius: "8px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
...(activeSection === sub.key ? { backgroundColor: "#569fff" } : {}),
border: "1px solid #ddd",
transition: "all 0.2s ease-in-out",
}}
>
<span>{sub.label}</span>
<i className="pi pi-angle-right" style={{ fontSize: "1.1rem", color: "#a3a3a3" }}></i>
</div>
))}
</SectionContainer>
))}
</aside>
<ModuleLandingShell
title="Input Module"
description="Preprocess and prepare tabular data for analysis and modeling."
contentMaxWidth="1100px"
alignTop
infoContent={
<ModuleGuideText>
<p className="mb-0">
This module consolidates all the tools necessary for preprocessing tabular data — from import and merge
through cleaning, transformation, sampling, and feature reduction.
</p>
</ModuleGuideText>
}
documentation={{
url: "https://medomicslab.gitbook.io/medomics-docs/tutorials/design/input-module",
label: "Input Module documentation",
}}
>
<div className="module-landing-input-layout">
<aside className="module-landing-input-sidebar">
<h5 className="module-landing-input-sidebar-title">Input Sections</h5>

{/* Main Content */}
<main style={{ flex: 1, padding: "1.5rem", overflowY: "auto" }}>
<div style={{ textAlign: "center", marginBottom: "20px" }}>
<h2>Database Input Module</h2>
<Card title="Select CSV File" style={{ marginBottom: "20px" }}>
<Dropdown
filter
style={{ maxWidth: "300px" }}
value={selectedCSVFiles.find((item) => item.id === collectionId)}
onChange={(e) => setCollectionId(e.value.id)}
options={selectedCSVFiles}
optionLabel="name"
placeholder="Select CSV file"
className="w-full md:w-14rem"
/>
</Card>
</div>
{Object.entries(SECTIONS).map(([key, section]) => (
<SectionContainer key={key} title={section.label}>
{section.subsections.map((sub) => (
<div
key={sub.key}
onClick={() => {
setActiveSection(sub.key)
setActiveTool(null)
}}
className={`module-landing-input-nav-item ${activeSection === sub.key ? "is-active" : ""}`}
>
<span>{sub.label}</span>
<i className="pi pi-angle-right" style={{ fontSize: "1rem", color: "#a3a3a3" }} />
</div>
))}
</SectionContainer>
))}
</aside>

{!collectionId ? (
<p style={{ textAlign: "center" }}>Please select a dataset to continue.</p>
) : (
<>
{/* only showcase the active tool */}
{activeTool ? (
renderActiveTool()
) : (
Object.values(SECTIONS)
.flatMap((s) => s.subsections)
.filter((sub) => sub.key === activeSection)
.map((sub) => (
<div key={sub.key}>
<h3>{sub.label}</h3>
<p style={{ color: "#a3a3a3", marginBottom: "1.5rem" }}>
{sub.description || "Explore and apply tools for this data preparation stage."}
</p>
<main className="module-landing-input-main">
<Card title="Select CSV File" style={{ marginBottom: "16px" }}>
<Dropdown
filter
style={{ maxWidth: "300px" }}
value={selectedCSVFiles.find((item) => item.id === collectionId)}
onChange={(e) => setCollectionId(e.value.id)}
options={selectedCSVFiles}
optionLabel="name"
placeholder="Select CSV file"
className="w-full md:w-14rem"
/>
</Card>

<div className="grid grid-cols-2 gap-4">
{sub.tools.map((tool, i) => (
<div
key={i}
onClick={() => setActiveTool(tool)}
style={{
border: "1px solid #d1d5db",
borderRadius: "10px",
padding: "0.8rem 1rem",
cursor: "pointer",
transition: "all 0.2s ease-in-out",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = "#569fff"
e.currentTarget.style.transform = "scale(1.01)"
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = "transparent"
e.currentTarget.style.transform = "scale(1)"
}}
>
<div>
<h4 style={{ margin: 0, fontSize: "1rem" }}>{tool.label}</h4>
<p style={{ margin: "0.3rem 0 0 0", fontSize: "0.9rem", color: "#a3a3a3" }}>
{tool.description}
{!collectionId ? (
<p style={{ textAlign: "center", color: "var(--ml-text-muted)" }}>Please select a dataset to continue.</p>
) : (
<>
{activeTool ? (
renderActiveTool()
) : (
Object.values(SECTIONS)
.flatMap((s) => s.subsections)
.filter((sub) => sub.key === activeSection)
.map((sub) => (
<div key={sub.key}>
<h3>{sub.label}</h3>
<p style={{ color: "var(--ml-text-muted)", marginBottom: "1rem", fontSize: "0.86rem" }}>
{sub.description || "Explore and apply tools for this data preparation stage."}
</p>
</div>
<i className="pi pi-angle-right" style={{ fontSize: "1.4rem", color: "#4338ca" }}></i>
</div>
))}
</div>
</div>
))
)}
</>
)}
</main>

</div>
<div className="module-landing-tool-grid">
{sub.tools.map((tool, i) => (
<div
key={i}
onClick={() => setActiveTool(tool)}
className="module-landing-input-tool-tile"
>
<div>
<h4>{tool.label}</h4>
<p>{tool.description}</p>
</div>
<i className="pi pi-angle-right" style={{ fontSize: "1.2rem", color: "var(--ml-accent)" }} />
</div>
))}
</div>
</div>
))
)}
</>
)}
</main>
</div>
</ModuleLandingShell>
)
}

Expand Down
5 changes: 4 additions & 1 deletion renderer/components/layout/flexlayout/mainContainerClass.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import ExtractionMEDimagePage from "../../mainPages/extractionMEDimage"
import ExtractionTextPage from "../../mainPages/extractionText"
import ExtractionLandingPage from "../../mainPages/extractionLandingPage"
import EvaluationLandingPage from "../../mainPages/evaluationLandingPage"
import LearningLandingPage from "../../mainPages/learningLandingPage"
import ExtractionTSPage from "../../mainPages/extractionTS"
import HomePage from "../../mainPages/home"
import HtmlViewer from "../../mainPages/htmlViewer"
Expand Down Expand Up @@ -1122,6 +1123,8 @@ class MainInnerContainer extends React.Component<any, { layoutFile: string | nul
return <ExtractionLandingPage/>
} else if (component === "evaluationLandingPage") {
return <EvaluationLandingPage/>
} else if (component === "learningLandingPage") {
return <LearningLandingPage/>
} else if (component === "extractionMEDimagePage") {
if (node.getExtraData().data == null) {
const config = node.getConfig()
Expand Down Expand Up @@ -1324,7 +1327,7 @@ class MainInnerContainer extends React.Component<any, { layoutFile: string | nul
if (component === "resultsPage") {
return <span style={{ marginRight: 3 }}>📊</span>
}
if (component === "learningPage") {
if (component === "learningPage" || component === "learningLandingPage") {
return <span style={{ marginRight: 3 }}>📖</span>
}
if (component === "extractionLandingPage") {
Expand Down
22 changes: 12 additions & 10 deletions renderer/components/layout/iconSidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,8 @@ const IconSidebar = ({ onSidebarItemSelect }) => {
<Tooltip target=".ext-img-btn" {...delayOptions} className="tooltip-icon-sidebar" />
<Tooltip target=".medflNav" {...delayOptions} className="tooltip-icon-sidebar" />
<Tooltip target=".med3paNav" {...delayOptions} className="tooltip-icon-sidebar" />
<Tooltip target=".settingsNav" {...delayOptions} className="tooltip-icon-sidebar" />
<Tooltip target=".darkModeNav" {...delayOptions} className="tooltip-icon-sidebar" />
<Tooltip target=".ext-eval-btn" {...delayOptions} className="tooltip-icon-sidebar" />
{/* ------------------------------------------- END Tooltips ----------------------------------------- */}

Expand Down Expand Up @@ -173,7 +175,7 @@ const IconSidebar = ({ onSidebarItemSelect }) => {
className="inputNav btnSidebar align-center"
data-pr-at="right center"
data-pr-my="left center"
data-pr-tooltip="Input"
data-pr-tooltip="Input Module"
eventKey="input"
data-tooltip-id="tooltip-input"
onDoubleClick={(event) => handleDoubleClickModule(event, "Input")}
Expand All @@ -188,7 +190,7 @@ const IconSidebar = ({ onSidebarItemSelect }) => {
className="extractionNav btnSidebar align-center"
data-pr-at="right center"
data-pr-my="left center"
data-pr-tooltip="Extraction"
data-pr-tooltip="Extraction Module"
data-pr-disabled={extractionBtnstate}
eventKey="Extraction"
data-tooltip-id="tooltip-extraction"
Expand Down Expand Up @@ -282,7 +284,7 @@ const IconSidebar = ({ onSidebarItemSelect }) => {
className="exploratoryNav btnSidebar align-center"
data-pr-at="right center"
data-pr-my="left center"
data-pr-tooltip="Exploratory"
data-pr-tooltip="Exploratory Module"
eventKey="exploratory"
data-tooltip-id="tooltip-exploratory"
onDoubleClick={(event) => handleDoubleClickModule(event, "Exploratory")}
Expand All @@ -304,10 +306,10 @@ const IconSidebar = ({ onSidebarItemSelect }) => {
className="learningNav btnSidebar align-center"
data-pr-at="right center"
data-pr-my="left center"
data-pr-tooltip="Learning"
data-pr-tooltip="Machine Learning Module"
eventKey="Learning"
data-tooltip-id="tooltip-learning"
onClick={(event) => handleClick(event, "learning")}
onClick={(event) => handleDoubleClickLanding(event, "Learning")}
disabled={isDisabled}
>
<LuNetwork style={{ height: "1.7rem", width: "auto", rotate: "-90deg" }} />
Expand Down Expand Up @@ -359,7 +361,7 @@ const IconSidebar = ({ onSidebarItemSelect }) => {
icon="pi pi-search"
data-pr-at="right center"
data-pr-my="left center"
data-pr-tooltip="Models Evaluation"
data-pr-tooltip="Evaluation Module"
data-is-ext-btn
onClick={(event) => {
console.log("clicked Evaluation", event)
Expand All @@ -377,7 +379,7 @@ const IconSidebar = ({ onSidebarItemSelect }) => {
className="medflNav btnSidebar align-center"
data-pr-at="right center"
data-pr-my="left center"
data-pr-tooltip="Federated Learning"
data-pr-tooltip="Federated Learning Module"
eventKey="MEDfl"
onDoubleClick={(event) => handleDoubleClickModule(event, "MEDfl")}
onClick={(event) => handleClick(event, "medfl")}
Expand All @@ -396,7 +398,7 @@ const IconSidebar = ({ onSidebarItemSelect }) => {
className="applicationNav btnSidebar"
data-pr-at="right center"
data-pr-my="left center"
data-pr-tooltip="Application"
data-pr-tooltip="Application Module"
eventKey="Application"
data-tooltip-id="tooltip-application"
onClick={(event) => handleClick(event, "application")}
Expand All @@ -418,7 +420,7 @@ const IconSidebar = ({ onSidebarItemSelect }) => {
className="darkModeNav btnSidebar align-center"
data-pr-at="right center"
data-pr-my="left center"
data-pr-tooltip="Dark/Light Mode"
data-pr-tooltip="Switch to Dark or Light Mode"
eventKey="darkMode"
data-tooltip-id="tooltip-darkMode"
onClick={() => {
Expand All @@ -439,7 +441,7 @@ const IconSidebar = ({ onSidebarItemSelect }) => {
className="settingsNav btnSidebar"
data-pr-at="right center"
data-pr-my="left center"
data-pr-tooltip="Settings"
data-pr-tooltip="Application Settings"
eventKey="settings"
data-tooltip-id="tooltip-settings"
onClick={() => dispatchLayout({ type: `openSettings`, payload: { pageId: "Settings" } })}
Expand Down
Loading