Skip to content

Drop "None" from model comparison grid, make cards equal height #258

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

Merged
aperson30 merged 1 commit into from
Sep 23, 2026
Merged

Drop "None" from model comparison grid, make cards equal height #258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 6 additions & 3 deletions PanTS-Demo/src/routes/UploadPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2850,7 +2850,10 @@ const UploadPage: React.FC = () => {
border: `1px solid ${color}`, borderRadius: "4px", padding: "2px 5px", flexShrink: 0,
}}>{text}</span>
);
const modelCards = MODEL_OPTIONS.map((m) => {
// "None" (view-only, no inference) is a real dropdown option but isn't
// a model to compare against the other three, so it's left out of the
// comparison grid.
const modelCards = MODEL_OPTIONS.filter((m) => m.id !== "None").map((m) => {
const isCurrent = currentModelId === m.id;
const locked = modelLocked(m.id);
return (
Expand All @@ -2869,7 +2872,7 @@ const UploadPage: React.FC = () => {
border: isCurrent ? "1.5px solid #002d72" : "1px solid rgba(0,0,0,0.08)",
boxShadow: isCurrent ? "0 6px 24px rgba(0,45,114,0.12)" : "0 1px 2px rgba(0,0,0,0.04)",
borderRadius: "16px", padding: "24px 20px", display: "flex", flexDirection: "column",
cursor: "pointer", textAlign: "center", minWidth: 0,
cursor: "pointer", textAlign: "center", minWidth: 0, height: "100%",
transition: "border-color 0.15s, box-shadow 0.15s",
}}
>
Expand Down Expand Up @@ -2957,7 +2960,7 @@ const UploadPage: React.FC = () => {
<div
role="radiogroup"
aria-label="Segmentation model"
style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(210px, 1fr))", gap: "16px", alignItems: "start" }}
style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(210px, 1fr))", gap: "16px" }}
>
{modelCards}
</div>
Expand Down
7 changes: 4 additions & 3 deletions PanTS-Demo/src/test/modelComparisonCards.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,16 @@ describe("model comparison cards", () => {
);
};

it("shows an info card for every model before a choice is made", async () => {
it("shows an info card for every real model (not None) before a choice is made", async () => {
await renderPage();
await screen.findByText("Choose a model");
// The dropdown is closed, so each model's description text appears exactly
// once - in its own comparison card.
// once - in its own comparison card. "None" (view-only) isn't a model to
// compare, so it has no card here even though it's still a dropdown option.
expect(screen.getByText(/Full abdominal organ segmentation/)).toBeInTheDocument();
expect(screen.getByText(/anatomically consistent/)).toBeInTheDocument();
expect(screen.getByText(/fast pancreatic lesion detection/)).toBeInTheDocument();
expect(screen.getByText(/View only — files never leave your browser/)).toBeInTheDocument();
expect(screen.queryByText(/View only — files never leave your browser/)).not.toBeInTheDocument();
});

it("stays put after a pick and moves the Selected badge to the clicked card", async () => {
Expand Down
Loading