Feat/dashboard refine #103

wanyingz-dis · 2025-12-04T15:09:33Z

What I did

Moved project selector to the top, just below the Alphatrion logo
Sidebar now shows Experiments/Trials/Runs instead of Projects
Added Overview and List tabs to each page
Implemented Runs page
Run ID is clickable and jumps to run detail page

Additional UI improvements

Added icons to sidebar navigation
Added some effects to sidebar
Redesigned Overview tab with metric cards instead of plain table
Added "Recent Experiments" section in Overview
Version number now reads from package.json

- Move project selector to sidebar header (below logo) - Sidebar now shows Experiments, Trials, Runs - Trials and Runs links disabled until parent is selected - Add TrialsPage component with Overview + List tabs - Overview shows stats: total, completed, running, failed, avg duration - Store selected experimentId and trialId in context for navigation

- Store selected experimentId and trialId in context - Sidebar Trials link enabled after selecting experiment - Sidebar Runs link enabled after selecting trial - ExperimentDetail sets experimentId in context - TrialDetail sets experimentId and trialId in context - Run IDs now clickable in TrialDetail page

- RunsPage with Overview + List tabs - Overview shows total, completed, running, pending, failed counts - List shows all runs with clickable IDs - RunDetail shows run info, status, and metadata

kerthcet · 2025-12-04T16:33:06Z

Some advices here:

delete them, we should only have one item for experiment-related in the sidebar, because in the future, we'll have more like prompts, models, evaluations in the sidebar.

let's also add the id here, id is always one of the most important information for table list.

let's keep the style consistent across pages, only keep the arrow here. Right now, sometimes we have arrow, sometimes we have view ->, sometimes nothing there.

Another thing I would like to discuss with you is the tables, in the experiment home page, we have tables, but in other pages, like trials list page, no tables, also the run list page. The main concern here is if we combine the list page and the overview page together, would that lead to performance issue in the future, because the overview page will have several curves usually have lots of data points. That's the main reason why we need to have two different tables. What's you opinion on this since you designed the page loading process.

kerthcet · 2025-12-04T16:39:16Z

dashboard/src/components/runs/runs-page.tsx

@@ -0,0 +1,219 @@
+import { useState } from "react";


can you use lowercase for the folders and file names?

wanyingz-dis · 2025-12-04T17:12:28Z

For 1, understood, will change and only “Experiments” will remain in the sidebar.
Then Trials and Runs will be accessible by navigating through the experiment hierarchy, with breadcrumbs/tabs for going back.
For 2: sounds good, will update.
For 3: agreed, I can make action column consistent across all list pages and use only the arrow icon (so no “View”). Right now the styling for Trials and Runs pages haven't been updated, can update that to match the Experiment list style.
For 4: yes that's a really good point, Thanks! Combining the overview and list could get heavy once added more charts and data. I can separate them into two pages, so the overview can load its heavier components without affecting the list view. This should also make the Experiment -- Trial -- Run flow clearer. What do you think?

kerthcet · 2025-12-04T17:32:19Z

I can separate them into two pages

Here I guess you mean two tables, or other better layouts if you have. I'm fine with either options.

…mponent for consistency and styling

wanyingz-dis · 2025-12-04T20:33:40Z

I’ve cleaned up and unified some of the dashboard UI in this update:

Converted all component folders and files to lowercase.
Sidebar update
ID added for recent experiments
Replaced the separate tab implementations on Experiments Page, Experiment Detail, Trial Detail, and Run Detail with a single reusable component under components/ui/. Tabs now should have a consistent design
Separating content areas such as metrics, overview info, and list tables.

Note: I haven’t yet created the reusable arrow/row action component, that can be done as a refinement in the future.

kerthcet · 2025-12-04T21:09:58Z

Several comments, then let's merge it.

be consistent with other pages

Combine Metrics with Overview

remove the projects, if you click the projects, it' a blank page.

Better to make sure the id is also clickable for quick navigation.

… detail pages Replaced hand-written breadcrumb markup with shared <Breadcrumb /> component

wanyingz-dis · 2025-12-04T23:17:09Z

please see latest clean up

kerthcet · 2025-12-04T23:58:10Z

I don't want to be too mean on this, but I think we should still optimize it a bit:

The position of the Experiments is different from other pages if we click any experiment item, it's very obvious.

we don't have metrics page anymore

The format is not very common, let's use Prefix 6 + … + Suffix 4, then it should look like Experiments/df0b18...d19e/Trials/88be24...a9a26/

Also they're other parts not very good, like at some pages the font is highlighted, while other pages not, but I'm fine with the first minor version. These three are the main concerns I have now, they're more obvious.

kerthcet · 2025-12-05T00:01:46Z

One more thing, we have logo here: https://github.com/InftyAI/alphatrion/blob/main/site/images/logo.png

Let's replace the default one in the dashboard.

wanyingz-dis · 2025-12-05T09:54:14Z

@kerthcet
Thanks for the feedback, they are quite helpful for me and all make sense.
After looking back at the changes, I think overall, the root cause is that I hadn’t yet abstracted enough repeated UI patterns such as ID formatting into shared components, which caused some visual drift between pages.
I can fix all items this afternoon and update the branch with a consistent version.

kerthcet · 2025-12-05T17:28:20Z

Kindly remind: Alphatrion should be AlphaTrion.

kerthcet · 2025-12-05T21:16:04Z

Is this ready for another review? @wanyingz-dis

wanyingz-dis · 2025-12-05T21:56:02Z

Is this ready for another review? @wanyingz-dis
Yes. Everything should now be updated, so it’s ready for another review.

kerthcet · 2025-12-05T22:31:59Z

/lgtm
/approve
/kind feature

Thanks @wanyingz-dis

kerthcet · 2025-12-05T22:32:15Z

fix #102

wanyingz-dis added 9 commits December 4, 2025 10:40

feat: add RunsPage and RunDetail components

9e3bc09

- RunsPage with Overview + List tabs - Overview shows total, completed, running, pending, failed counts - List shows all runs with clickable IDs - RunDetail shows run info, status, and metadata

chore: update gitignore for root-level node files

54a5923

chore: add lucide-react for sidebar icons

787b052

feat(ui): polish sidebar with glassmorphism and icons

c194cb0

feat(ui): redesign ExperimentsPage with cards and improved layout

f0a895e

Read version from package.json

6161596

update manual testing

e627184

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 Dec 4, 2025

InftyAI-Agent requested a review from kerthcet December 4, 2025 15:09

kerthcet reviewed Dec 4, 2025

View reviewed changes

wanyingz-dis added 5 commits December 4, 2025 19:36

feature improvement based on suggestions

b967fe2

rename all files and folders to kabab style

d28c34a

feat(ui): unify tab design across dashboard with reusable <Tabs /> co…

1fd1507

…mponent for consistency and styling

update manual testing

e2bf675

modify the dashboard section in readme

c9293aa

wanyingz-dis added 4 commits December 4, 2025 22:06

fix: change fix to experiments

dad3c4a

merge metric and overview

04d9015

design a resuable breadcrumb component

743c2a2

feat(ui): unify breadcrumb component across Experiment, Trial and Run…

d255050

… detail pages Replaced hand-written breadcrumb markup with shared <Breadcrumb /> component

wanyingz-dis added 7 commits December 5, 2025 15:58

change padding from p-8 to p-6

3f7998a

fix: standardize breadcrumb ID format

298836c

delete Metric card

171725b

add logo

ce76b96

feat: add Alphatrion logo and disable sidebar collapse temporarily

50b2c2c

fix: unify layout for experiment and trial name& description display

3cdca49

update manual_testing re sidebar navigation

92bbfc0

AlphaTrion

b0c110c

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. feature Categorizes issue or PR as related to a new feature. labels Dec 5, 2025

InftyAI-Agent removed the do-not-merge/needs-kind Indicates a PR lacks a label and requires one. label Dec 5, 2025

InftyAI-Agent assigned kerthcet Dec 5, 2025

InftyAI-Agent merged commit 8e1e7c2 into InftyAI:main Dec 5, 2025
25 of 26 checks passed

Feat/dashboard refine #103

Feat/dashboard refine #103

Uh oh!

Conversation

wanyingz-dis commented Dec 4, 2025

What I did

Additional UI improvements

Uh oh!

kerthcet commented Dec 4, 2025

Uh oh!

kerthcet Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

wanyingz-dis commented Dec 4, 2025

Uh oh!

kerthcet commented Dec 4, 2025

Uh oh!

wanyingz-dis commented Dec 4, 2025

Uh oh!

kerthcet commented Dec 4, 2025

Uh oh!

wanyingz-dis commented Dec 4, 2025

Uh oh!

kerthcet commented Dec 4, 2025

Uh oh!

kerthcet commented Dec 5, 2025

Uh oh!

wanyingz-dis commented Dec 5, 2025

Uh oh!

kerthcet commented Dec 5, 2025

Uh oh!

kerthcet commented Dec 5, 2025

Uh oh!

wanyingz-dis commented Dec 5, 2025

Uh oh!

kerthcet commented Dec 5, 2025

Uh oh!

kerthcet commented Dec 5, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants