Dashboard Frontend MVP v0.1.0 #98

wanyingz-dis · 2025-11-30T22:15:59Z

What this PR does / why we need it

What I Did
Built the initial dashboard frontend connecting to the Alphatrion GraphQL backend.
Completed Features:

Projects list page with navigation to experiments
Experiments page with Overview and List tabs (per maintainer requirement of two tables per layer)
Experiment Detail page showing experiment info and associated trials
Trial Detail page with parameters, metadata, metrics charts, and runs list
GraphQL client setup with typed queries and React Query integration
CORS configuration added to backend for frontend access

Technical Implementation:

React + TypeScript + Tailwind CSS
@tanstack/react-query for data fetching
Custom hooks for each data layer (useProjects, useExperiments, useTrials, useRuns, useTrialMetrics)
Simple SVG-based metrics visualization (no external charting library)

Manual Testing

Tested the following flows:

Projects → View Experiments → Experiment Detail → Trial Detail
Overview/List tab switching on Experiments page
Metrics chart rendering with multiple metric types (accuracy, fitness, precision, loss)
Breadcrumb navigation between pages
(See manual_testing.md)

What's Next

Short-term:

Add unit tests
Implement Trials list page (Overview + List)
Implement Runs list page (Overview + List)
Run Detail page

Improvements Identified:

Extract common components (StatusBadge, Card, Table) for reusability
Move ProjectsDashboard from App.tsx to separate component
UI polish to reduce "AI-generated" look (spacing, visual hierarchy)
Consider using a charting library (recharts) for better metrics visualization
Add loading skeletons instead of spinners
Add error boundaries

…s, Runs Created the initial file structure for the dashboard MVP, including components, hooks, context, GraphQL client, and shared types. Added placeholder pages for Experiments, Trials, and Runs with corresponding list/detail views. Set up basic layout, sidebar, and project context as foundation for upcoming UI and data integration.

- Removed Chat components, useChat hooks, useDashboard, and legacy services/api imports - Cleaned App.tsx to minimal working routing structure - Ensured Vite dev server can run without referencing removed files

- Added GraphQL-powered hooks for projects, experiments, trials, runs, and metrics - Implemented ExperimentsPage with Overview and List tabs - Added navigation support from experiment list to detail page - Verified experiments query works end-to-end with seed data

…g update - Completed ExperimentDetail view with breadcrumb, metadata section, and trials list - Added working navigation from experiment list to detail page in App routing - Verified end-to-end experiment detail rendering with seeded data

- Add GraphQL client and typed queries for Alphatrion backend - Implement Projects list page - Implement Experiments page with Overview/List tabs - Implement Experiment Detail with trials list - Implement Trial Detail with metrics charts and runs list - Add React Query hooks for all data layers - Add CORS middleware to backend Removed unused files from miniproject migration.

kerthcet · 2025-11-30T22:29:21Z

/kind feature

kerthcet

I launched the dashboard in my laptop, glad to have a skeleton, but still need to polish a bit before release a min version. Here're some suggestions I have, but glad to discuss about it.

Let's default to one existing project, we can choose the first one from project list. In the future, we can cache the choice locally.
For every item(project, exp, trial, run, let's put the id first and not hide them.
In the sidebar, let's only have projects and experiments. Then we can navigate to the trials from experiment page, and runs from trial page.
Remove the view xxx column, instead, let's just click the ID directly to jump to the next page, this is more straightforward I believe.
Also for trials page and runs page, we should also have a overview table and a list table just like we do for experiment, because usually, for the overview page, we have charts and list page we have the data.

For the first round of view.

kerthcet · 2025-12-01T14:17:28Z

dashboard/.gitignore

@@ -0,0 +1,14 @@
+node_modules/


Let's rename the frontend to dashboard globally.

kerthcet · 2025-12-01T15:04:04Z

frontend/src/styles/index.css

+@tailwind components;
+@tailwind utilities;
+
+/* 专业浅色背景 - Notion/Linear 风格 */


Remove chinese words here.

kerthcet · 2025-12-01T15:04:39Z

frontend/Manual_Testing.md

+# Manual Testing Checklist
+
+## Prerequisites
+- Backend running: `uv run alphatrion server --host 127.0.0.1`


we can use alphatarion server to launch the server.

kerthcet · 2025-12-01T15:08:11Z

frontend/Manual_Testing.md

+
+## Prerequisites
+- Backend running: `uv run alphatrion server --host 127.0.0.1`
+- Frontend running: `npm run dev`


We should add introductions about how to launch the dashboard in the README.md, including Prerequisites like vite.

kerthcet · 2025-12-01T15:27:39Z

cc @dalphyx if you also want to take a look.

wanyingz-dis · 2025-12-02T19:19:13Z

@kerthcet thank you for your review, will work through the changes on Thursday.

- Show full IDs in first column for all tables (Projects, Experiments, Trials, Runs); - Remove 'View xxx' action column, click ID directly to navigate; - Sidebar shows only Projects (removed Experiments and Trials); - Auto-redirect to first project's experiments on initial visit; - Users can still access Projects page to switch between projects.

…testing.md'

wanyingz-dis · 2025-12-03T18:15:22Z

Thanks for review, just updated the PR, please take a look.
Updates:

Renamed frontend to dashboard
Removed comments from CSS
Updated README.md
Default to first project on initial visit
Full IDs displayed in first column
Click ID directly to navigate
Sidebar shows only Projects

For next PR:

Standalone Trials page with Overview + List tabs
Standalone Runs page with Overview + List tabs
Finish Run Detail page

kerthcet

Only one nit, then let's merge and optimize it step by step.

kerthcet · 2025-12-03T19:04:22Z

dashboard/src/pages/App.tsx

+                    <div className="p-4 border-t">
+                        {sidebarOpen && (
+                            <div className="text-sm text-gray-500">
+                                <p>Version 0.1.0 MVP</p>


Let's remove the MVP here.

Also it could be good to have a dynamic version here or at least make it not a magic number , but I'm ok to leave it to future.

kerthcet · 2025-12-03T21:04:57Z

/lgtm
/approve

kerthcet · 2025-12-03T21:05:50Z

part of #98

wanyingz-dis added 12 commits November 29, 2025 21:29

add gitignore and migrate the frontend structure from miniproject

20761c4

delete legacy files from miniproject

c66323e

add index.ts

bfeeab8

add graphql/queries.ts, main.tsx, graphql.ts

ad74a9c

add CORS middleware to allow frontend to acess the API

c0a5cfc

chore(frontend): remove legacy imports and clean up old references

0f41880

- Removed Chat components, useChat hooks, useDashboard, and legacy services/api imports - Cleaned App.tsx to minimal working routing structure - Ensured Vite dev server can run without referencing removed files

feat: trial detail

bd72c28

add manual_testing.md

4491618

InftyAI-Agent added needs-triage Indicates an issue or PR lacks a label and requires one. needs-priority Indicates a PR lacks a label and requires one. do-not-merge/needs-kind Indicates a PR lacks a label and requires one. labels Nov 30, 2025

InftyAI-Agent requested a review from kerthcet November 30, 2025 22:16

InftyAI-Agent added feature Categorizes issue or PR as related to a new feature. and removed do-not-merge/needs-kind Indicates a PR lacks a label and requires one. labels Nov 30, 2025

kerthcet reviewed Dec 1, 2025

View reviewed changes

wanyingz-dis added 4 commits December 3, 2025 16:37

refactor: rename frontend to dashboard, update package name

a2b6c9f

remove comments from index.css

a49699f

docs: update readme with dashboard setup instructions, update manual_…

b1b56d9

…testing.md'

kerthcet reviewed Dec 3, 2025

View reviewed changes

remove MVP from version

77b2a68

InftyAI-Agent added lgtm Looks good to me, indicates that a PR is ready to be merged. approved Indicates a PR has been approved by an approver from all required OWNERS files. labels Dec 3, 2025

InftyAI-Agent assigned kerthcet Dec 3, 2025

InftyAI-Agent merged commit 9d456e6 into InftyAI:main Dec 3, 2025
16 checks passed

This was referenced Dec 3, 2025

Frontend framework support #4

Closed

The Experiment layout in the dashboard #61

Closed

Dashboard Frontend MVP v0.1.0 #98

Dashboard Frontend MVP v0.1.0 #98

Uh oh!

Conversation

wanyingz-dis commented Nov 30, 2025

What this PR does / why we need it

Technical Implementation:

Manual Testing

What's Next

Uh oh!

kerthcet commented Nov 30, 2025

Uh oh!

kerthcet left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kerthcet Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

kerthcet Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

kerthcet Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

kerthcet Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

kerthcet commented Dec 1, 2025

Uh oh!

wanyingz-dis commented Dec 2, 2025

Uh oh!

wanyingz-dis commented Dec 3, 2025

Uh oh!

kerthcet left a comment

Choose a reason for hiding this comment

Uh oh!

kerthcet Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

kerthcet commented Dec 3, 2025

Uh oh!

Uh oh!

kerthcet commented Dec 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kerthcet left a comment •

edited

Loading