From 4a9e110554708fce88dbd2626f30cac8269e2f72 Mon Sep 17 00:00:00 2001 From: thenileshmishra Date: Fri, 21 Nov 2025 12:14:07 +0530 Subject: [PATCH 1/3] Fix Python contribution page link and mkdocs.yml indentation --- docs/python/index.md | 2 +- mkdocs.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/python/index.md b/docs/python/index.md index 17b017e0..9dbe18fc 100644 --- a/docs/python/index.md +++ b/docs/python/index.md @@ -54,7 +54,7 @@ For more advanced installation information, please see the - [OpenML documentation](https://docs.openml.org/) - [OpenML client APIs](https://docs.openml.org/APIs/) -- [OpenML developer guide](https://docs.openml.org/contributing/) +- [OpenML developer guide](https://docs.openml.org/Contributing/) - [Contact information](https://www.openml.org/contact) - [Citation request](https://www.openml.org/cite) - [OpenML blog](https://medium.com/open-machine-learning) diff --git a/mkdocs.yml b/mkdocs.yml index 9a62216c..5a0b4e50 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -115,8 +115,8 @@ plugins: python: paths: [temp_dir/pytorch/openml_pytorch,./] load_external_modules: true - show_source: true options: + show_source: true docstring_section_style: table show_docstring_functions: true docstring_style: numpy From 98568383ddbbe1ac6132e3eff9cdb49a27873269 Mon Sep 17 00:00:00 2001 From: thenileshmishra Date: Tue, 25 Nov 2025 16:29:14 +0530 Subject: [PATCH 2/3] Add Next.js frontend setup documentation and update mkdocs.yml --- docs/contributing/website/Website.md | 7 +++++++ mkdocs.yml | 3 ++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/contributing/website/Website.md b/docs/contributing/website/Website.md index c5af415f..9e08b639 100644 --- a/docs/contributing/website/Website.md +++ b/docs/contributing/website/Website.md @@ -1,3 +1,10 @@ +!!! info "Frontend Migration in Progress" + The OpenML frontend is being modernized to **Next.js 16+ with App Router, TypeScript, and Tailwind CSS**. + + 📖 **New developers should refer to the [Next.js (App Router)](NextJS.md) documentation.** + + This page documents the legacy React (Pages Router) setup for reference and maintenance purposes only. + ## Installation The OpenML website runs on [Flask](http://flask.pocoo.org/), [React](https://reactjs.org/), and [Dash](https://dash.plot.ly/). You need to install these first. diff --git a/mkdocs.yml b/mkdocs.yml index 5a0b4e50..48649b94 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -184,8 +184,9 @@ nav: - Evaluation Engine: contributing/backend/Java-App.md - Frontend: - Getting started: contributing/website/Website.md + - Next.js (App Router): contributing/website/NextJS.md + - React (Legacy): contributing/website/React.md - Flask backend: contributing/website/Flask.md - - React frontend: contributing/website/React.md - Dash visualizations: contributing/website/Dash.md - Clients: - Client development: contributing/clients/Client-API-Standards.md From d5d5aa3820d214b1fd80689dbd111761c308b505 Mon Sep 17 00:00:00 2001 From: thenileshmishra Date: Tue, 25 Nov 2025 16:30:16 +0530 Subject: [PATCH 3/3] Add NextJS.md documentation file --- docs/contributing/website/NextJS.md | 130 ++++++++++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 docs/contributing/website/NextJS.md diff --git a/docs/contributing/website/NextJS.md b/docs/contributing/website/NextJS.md new file mode 100644 index 00000000..443f3d36 --- /dev/null +++ b/docs/contributing/website/NextJS.md @@ -0,0 +1,130 @@ +# Next.js Frontend (App Router) + +## Prerequisites + +- **Node.js** 20+ and npm +- **Git** for version control +- Code editor (VS Code recommended) + +## Installation & Setup + +Clone the repository and navigate to the Next.js app: + +```bash +git clone https://github.com/openml/openml.org.git +cd openml.org/app +npm install +``` + +Run the development server: + +```bash +npm run dev +``` + +Open [http://localhost:3000](http://localhost:3000) in your browser. + +--- + +## App Structure + +The Next.js App Router uses a file-based routing system with the following structure: + +``` +src/ +├── app/ # Next.js App Router (Pages) +│ ├── (pages)/ # Route group +│ │ ├── datasets/ +│ │ │ ├── [id]/page.tsx # Single dataset page +│ │ │ └── page.tsx # Datasets list +│ │ ├── tasks/[id]/page.tsx +│ │ ├── flows/[id]/page.tsx +│ │ ├── runs/[id]/page.tsx +│ │ └── layout.tsx +│ ├── layout.tsx # Root layout +│ └── page.tsx # Home page +│ +├── components/ +│ ├── ui/ # Reusable UI (shadcn) +│ ├── layout/ # Header, Footer, Sidebar +│ ├── header/ # Search, Notifications, Account +│ ├── home/ # Home page sections +│ ├── dataset/ # Dataset components +│ └── search/ # Search & filters +│ +├── hooks/ # Custom React hooks +│ +├── types/ # TypeScript types +│ ├── dataset.ts +│ ├── task.ts +│ ├── flow.ts +│ └── run.ts +│ +└── lib/ + ├── api.ts # API client + └── utils.ts # Helper functions +``` + +### Key File Conventions + +- `page.tsx` - Defines a route's UI +- `layout.tsx` - Shared UI for route segments +- `loading.tsx` - Loading UI with Suspense +- `error.tsx` - Error boundary UI +- `not-found.tsx` - 404 page + +--- + +## TypeScript + +- Use **TypeScript** for all new files +- Define proper types in `src/types/` +- Avoid using `any` - use proper types or `unknown` +- Export types that are used across multiple files + +### React Components + +- Use **functional components** with hooks +- Follow the component structure: + ```tsx + import { ... } from '...' + + interface ComponentProps { + // Props definition + } + + export function Component({ prop }: ComponentProps) { + // Component logic + return ( + // JSX + ) + } + ``` + +## Styling + +- Use **Tailwind CSS** for styling +- Follow existing design patterns +- Use the `cn()` utility from `lib/utils.ts` for conditional classes + ```tsx + import { cn } from '@/lib/utils' + +
+ ``` + +## File Naming + +- Components: **PascalCase** (`DatasetHeader.tsx`) +- Utilities: **kebab-case** (`use-entity.ts`) +- Pages: **lowercase** (`page.tsx`, `layout.tsx`) + +## Resources + +- [Next.js Documentation](https://nextjs.org/docs) +- [TypeScript Handbook](https://www.typescriptlang.org/docs/) +- [Tailwind CSS Docs](https://tailwindcss.com/docs) +- [OpenML API Docs](https://docs.openml.org/APIs/) + +--- + +For questions, open an issue on GitHub or ask in team discussions.