Skip to content

Update frontend components and styles #206

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
alex-struk merged 11 commits into from
Jun 26, 2026
Merged

Update frontend components and styles #206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6a113d9
Update frontend components and styles
inderdeepsinghgill Jun 24, 2026
dcd727d
feat(frontend): standardize action button icons and classify CTA hier…
inderdeepsinghgill Jun 26, 2026
9f4fc97
feat(frontend): use icon actions for schema row edit/delete
inderdeepsinghgill Jun 26, 2026
a1a6a50
feat(frontend): align table row hover across sticky cells with BCDS
inderdeepsinghgill Jun 26, 2026
59b980e
fix(frontend): align sticky rows header cells with BCDS table header
inderdeepsinghgill Jun 26, 2026
6cc8f48
fix(frontend): enforce sticky cell row hover highlighting in tables
inderdeepsinghgill Jun 26, 2026
68b8695
fix(frontend): enforce body-only table hover and remove header hover …
inderdeepsinghgill Jun 26, 2026
00728d2
Merge remote-tracking branch 'origin/develop' into chore/move-local-c…
inderdeepsinghgill Jun 26, 2026
7f671d8
feat(frontend): unify detail-page header hierarchy
inderdeepsinghgill Jun 26, 2026
dc82970
feat(frontend): standardize upload CTA icons
inderdeepsinghgill Jun 26, 2026
65808df
fix(frontend): address review findings on PR #206
alex-struk Jun 26, 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
19 changes: 19 additions & 0 deletions apps/frontend/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,26 @@
}

.app-shell-bcds-header .bcds-header--container {
display: flex;
align-items: center;
max-width: none;
width: 100%;
}

.app-shell-bcds-header .bcds-header--title {
flex-grow: 0;
margin-right: auto;
}

.app-shell-bcds-header .app-shell-header-actions {
display: flex;
flex-shrink: 0;
margin-left: auto;
justify-content: flex-end;
}

.app-shell-bcds-header .app-shell-header-actions .mantine-Group-root {
flex-wrap: nowrap;
}

/* Compact name + email in BC header utilities */
Expand All @@ -40,6 +48,17 @@
margin-top: 0.25rem;
}

/* Tight title/description pairing in standard page headers */
.bcds-page-header__title-block .bcds-react-aria-Heading,
.bcds-page-header__title-block .bcds-react-aria-Text {
margin: 0 !important;
}

.bcds-page-header__meta {
margin-top: var(--layout-margin-xsmall);
min-height: 3rem;
}

/* BC footer at end of main scroll area (gov.bc.ca pattern — not fixed to viewport) */
.app-shell-bcds-footer {
margin-top: var(--layout-margin-medium);
Expand Down
13 changes: 8 additions & 5 deletions apps/frontend/src/components/upload/DocumentUploadPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,8 +302,10 @@ export const DocumentUploadPanel: React.FC<DocumentUploadPanelProps> = ({
<div className="bcds-upload-panel">
<PanelCard>
<div className="bcds-upload-panel__intro">
<Title order={3}>Upload images</Title>
<Text c="dimmed" size="sm">
<Title order={3} mt={0} mb={0}>
Upload images
</Title>
<Text c="dimmed" size="sm" mt={0} mb={0}>
Select a processing model, then drag and drop scans or mobile
captures. Click Upload to start OCR processing.
</Text>
Expand Down Expand Up @@ -373,10 +375,10 @@ export const DocumentUploadPanel: React.FC<DocumentUploadPanelProps> = ({
</Dropzone.Idle>

<div>
<Text size="xl" inline>
<Text size="xl" mt={0} mb={0}>
Drag images or click to browse
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
<Text size="sm" c="dimmed" mt="xs" mb={0}>
Accepts {SUPPORTED_FILE_TYPES.join(", ")} up to{" "}
{Math.round(MAX_FILE_SIZE / (1024 * 1024))} MB
</Text>
Expand Down Expand Up @@ -412,6 +414,7 @@ export const DocumentUploadPanel: React.FC<DocumentUploadPanelProps> = ({
activeGroup === null
}
loading={isUploading}
leftSection={<IconUpload size={16} />}
data-disabled={activeGroup === null || undefined}
>
{isUploading ? "Uploading..." : "Upload"}
Expand Down Expand Up @@ -449,7 +452,7 @@ export const DocumentUploadPanel: React.FC<DocumentUploadPanelProps> = ({
<IconFileDescription size={20} />
</Avatar>
<div className="bcds-upload-queue-row__meta">
<Group gap={4} mb={4} wrap="nowrap">
<Group gap="xs" mb="xs" wrap="nowrap">
<Text fw={600} truncate>
{item.file.name}
</Text>
Expand Down
162 changes: 93 additions & 69 deletions apps/frontend/src/features/annotation/template-models/pages/ModelDetailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
IconCopy,
IconFileDescription,
IconFileImport,
IconPencil,
IconPhoto,
IconPlus,
IconSparkles,
Expand Down Expand Up @@ -257,6 +258,7 @@ export const ModelDetailPage: FC = () => {
const response = await apiService.post<{
labelingDocument?: { id: string };
code?: string;
message?: string;
}>(`/template-models/${routeModelId}/upload`, payload);

if (
Expand Down Expand Up @@ -478,7 +480,7 @@ export const ModelDetailPage: FC = () => {

return (
<Stack gap="lg">
<Group justify="space-between">
<Stack gap="xs">
<Group>
<Button
variant="subtle"
Expand All @@ -487,55 +489,69 @@ export const ModelDetailPage: FC = () => {
>
Back
</Button>
<Stack gap={2}>
<Title order={2}>{templateModel?.name || "Template Model"}</Title>
{copyableModelId && (
<Group gap="xs">
<Code>{copyableModelId}</Code>
{activeTrainedModel && (
<Code c="dimmed">v{activeTrainedModel.version}</Code>
)}
<CopyButton value={copyableModelId}>
{({ copied, copy }) => (
<Tooltip
label={
copied
? "Copied!"
: activeTrainedModel
? `Copy active model ID (v${activeTrainedModel.version})`
: "Copy model ID"
}
>
<ActionIcon
color={copied ? "green" : "gray"}
variant="subtle"
size="sm"
onClick={copy}
>
{copied ? (
<IconCheck size={14} />
) : (
<IconCopy size={14} />
)}
</ActionIcon>
</Tooltip>
)}
</CopyButton>
</Group>
)}
<Text size="sm" c="dimmed">
{templateModel?.description ||
"Manage template model documents and schema"}
</Text>
</Stack>
</Group>
<Badge
variant="light"
color={getStatusBadgeColor(templateModel?.status || "draft")}

<Stack
className="bcds-page-header__title-block"
style={{ gap: "var(--layout-margin-xsmall)" }}
>
{templateModel?.status || "draft"}
</Badge>
</Group>
<Group gap="sm" align="center" wrap="wrap">
<Title order={2} mt={0} mb={0}>
{templateModel?.name || "Template Model"}
</Title>
<Badge
variant="light"
color={getStatusBadgeColor(templateModel?.status || "draft")}
>
{templateModel?.status || "draft"}
</Badge>
</Group>
<Text size="sm" c="dimmed" mt={0} mb={0}>
{templateModel?.description ||
"Manage template model documents and schema"}
</Text>
</Stack>

<Group gap="xs" wrap="wrap">
{copyableModelId && (
<>
<Text size="sm" c="dimmed" fw={500}>
Model ID
</Text>
<Code>{copyableModelId}</Code>
{activeTrainedModel && (
<Code c="dimmed">v{activeTrainedModel.version}</Code>
)}
<CopyButton value={copyableModelId}>
{({ copied, copy }) => (
<Tooltip
label={
copied
? "Copied!"
: activeTrainedModel
? `Copy active model ID (v${activeTrainedModel.version})`
: "Copy model ID"
}
>
<ActionIcon
color={copied ? "green" : "gray"}
variant="subtle"
size="sm"
onClick={copy}
>
{copied ? (
<IconCheck size={14} />
) : (
<IconCopy size={14} />
)}
</ActionIcon>
</Tooltip>
)}
</CopyButton>
</>
)}
</Group>
</Stack>

<Tabs defaultValue="documents">
<Tabs.List>
Expand All @@ -551,7 +567,7 @@ export const ModelDetailPage: FC = () => {
<Group justify="space-between">
<Text fw={600}>Template model documents</Text>
<Button
leftSection={<IconPlus size={16} />}
leftSection={<IconUpload size={16} />}
onClick={() => setIsUploadOpen(true)}
>
Upload documents
Expand Down Expand Up @@ -734,25 +750,29 @@ export const ModelDetailPage: FC = () => {
</DataTable.Td>
<DataTable.Td>{field.displayOrder}</DataTable.Td>
<DataTable.Td>
<Group gap="xs">
<Button
size="xs"
variant="light"
onClick={() => {
setEditingField(field);
setSchemaEditorOpen(true);
}}
>
Edit
</Button>
<Button
size="xs"
variant="subtle"
color="red"
onClick={() => deleteField(field.id)}
>
Delete
</Button>
<Group gap="xs" justify="flex-start" wrap="nowrap">
<Tooltip label="Edit field" withArrow>
<ActionIcon
variant="subtle"
onClick={() => {
setEditingField(field);
setSchemaEditorOpen(true);
}}
aria-label={`Edit field ${field.fieldKey}`}
>
<IconPencil size={16} />
</ActionIcon>
</Tooltip>
<Tooltip label="Delete field" withArrow>
<ActionIcon
variant="subtle"
color="red"
onClick={() => deleteField(field.id)}
aria-label={`Delete field ${field.fieldKey}`}
>
<IconTrash size={16} />
</ActionIcon>
</Tooltip>
</Group>
</DataTable.Td>
</DataTable.Tr>
Expand Down Expand Up @@ -857,7 +877,11 @@ export const ModelDetailPage: FC = () => {
>
Clear all
</Button>
<Button onClick={handleUpload} loading={isUploading}>
<Button
onClick={handleUpload}
loading={isUploading}
leftSection={<IconUpload size={16} />}
>
{isUploading ? "Uploading..." : "Upload"}
</Button>
</Group>
Expand Down
1 change: 1 addition & 0 deletions apps/frontend/src/features/benchmarking/components/FileUploadDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,7 @@ export function FileUploadDialog({
onClick={handleUpload}
disabled={selectedFiles.length === 0 || isUploading}
loading={isUploading}
leftSection={<IconUpload size={16} />}
data-testid="upload-submit-btn"
>
Upload
Expand Down
56 changes: 39 additions & 17 deletions apps/frontend/src/features/benchmarking/pages/DatasetDetailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,22 +258,38 @@ export function DatasetDetailPage() {
return (
<>
<Stack gap="lg">
<Stack gap={2}>
<Group justify="space-between">
<Group gap="sm" align="center">
<Button
variant="subtle"
leftSection={<IconArrowLeft size={16} />}
onClick={() => navigate("/benchmarking/datasets")}
data-testid="back-to-datasets-btn"
>
Back
</Button>
<Title order={2} data-testid="dataset-name-title">
<Stack gap="xs">
<Group>
<Button
variant="subtle"
leftSection={<IconArrowLeft size={16} />}
onClick={() => navigate("/benchmarking/datasets")}
data-testid="back-to-datasets-btn"
>
Back
</Button>
</Group>

<Group justify="space-between" align="flex-start" wrap="wrap">
<Stack
className="bcds-page-header__title-block"
style={{ gap: "var(--layout-margin-xsmall)" }}
>
<Title order={2} data-testid="dataset-name-title" mt={0} mb={0}>
{dataset.name}
</Title>
</Group>
<Group gap="sm">
<Text
c="dimmed"
size="sm"
data-testid="dataset-description"
mt={0}
mb={0}
>
{dataset.description || "No description"}
</Text>
</Stack>

<Group gap="sm" className="bcds-page-header__meta">
<Button
variant="light"
leftSection={<IconFileCheck size={16} />}
Expand All @@ -292,9 +308,15 @@ export function DatasetDetailPage() {
</Button>
</Group>
</Group>
<Text c="dimmed" size="sm" data-testid="dataset-description">
{dataset.description || "No description"}
</Text>

<Group gap="xs" wrap="wrap">
<Text size="sm" c="dimmed" fw={500}>
Dataset ID
</Text>
<Text size="sm" c="dimmed" data-testid="dataset-id-text">
{dataset.id}
</Text>
</Group>
</Stack>

<Tabs
Expand Down
Loading
Loading