Skip to content

Commit 25f02f0

Browse files
jpggvilacajpggvilaca
committed
Simplify a bit, fix minor misalignment
1 parent 5bf80b6 commit 25f02f0

File tree

3 files changed

+52
-80
lines changed

3 files changed

+52
-80
lines changed

‎application/ui/src/features/models/model-listing/model-listing.component.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,12 @@ const HeaderRow = () => {
3838
return (
3939
<Grid
4040
columns={GRID_COLUMNS}
41+
alignItems={'center'}
42+
width={'100%'}
4143
UNSAFE_style={{
4244
backgroundColor: 'var(--spectrum-global-color-gray-200)',
43-
padding: 'var(--spectrum-global-dimension-size-150) var(--spectrum-global-dimension-size-1000)',
45+
padding: `var(--spectrum-global-dimension-size-150) var(--spectrum-global-dimension-size-600)
46+
var(--spectrum-global-dimension-size-150) var(--spectrum-global-dimension-size-1000)`,
4447
}}
4548
>
4649
<Text>Model Name</Text>
@@ -117,7 +120,7 @@ const ModelVariantItem = ({ model }: { model: { id: number; name: string } }) =>
117120

118121
export const ModelListing = () => {
119122
return (
120-
<View padding={'size-300'} minWidth={0}>
123+
<View padding={'size-300'}>
121124
<ModelsHeader />
122125

123126
<Divider size={'S'} marginY={'size-300'} />

‎application/ui/src/features/models/model-listing/model-variants/model-variant-table.component.tsx‎

Lines changed: 45 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -14,90 +14,59 @@ import {
1414
TableBody,
1515
TableHeader,
1616
TableView,
17-
View,
1817
} from '@geti/ui';
1918
import { DownloadIcon, MoreMenu } from '@geti/ui/icons';
2019

21-
const COLUMN_WIDTHS = {
22-
name: '2fr' as const,
23-
license: '1fr' as const,
24-
precision: '1fr' as const,
25-
accuracy: '1fr' as const,
26-
size: '1fr' as const,
27-
actions: '1fr' as const,
28-
};
29-
30-
const COLUMN_MIN_WIDTHS: Record<string, number> = {
31-
name: 200,
32-
license: 120,
33-
precision: 100,
34-
accuracy: 100,
35-
size: 100,
36-
actions: 200,
37-
};
38-
3920
export const ModelVariantTable = () => {
4021
// TODO: Replace with dynamic data
4122

4223
return (
43-
<View UNSAFE_style={{ overflowX: 'auto' }}>
44-
<TableView aria-label='Model variants for <variant>' overflowMode={'wrap'} density={'compact'}>
45-
<TableHeader>
46-
<Column isRowHeader width={COLUMN_WIDTHS.name} minWidth={COLUMN_MIN_WIDTHS.name}>
47-
Optimized models
48-
</Column>
49-
<Column isRowHeader width={COLUMN_WIDTHS.license} minWidth={COLUMN_MIN_WIDTHS.license}>
50-
License
51-
</Column>
52-
<Column isRowHeader width={COLUMN_WIDTHS.precision} minWidth={COLUMN_MIN_WIDTHS.precision}>
53-
Precision
54-
</Column>
55-
<Column isRowHeader width={COLUMN_WIDTHS.accuracy} minWidth={COLUMN_MIN_WIDTHS.accuracy}>
56-
Accuracy
57-
</Column>
58-
<Column isRowHeader width={COLUMN_WIDTHS.size} minWidth={COLUMN_MIN_WIDTHS.size}>
59-
Size
60-
</Column>
61-
<Column align='end' width={COLUMN_WIDTHS.actions} minWidth={COLUMN_MIN_WIDTHS.actions}>
62-
<></>
63-
</Column>
64-
</TableHeader>
65-
<TableBody>
66-
<Row>
67-
<Cell>MobileNetV2-ATSS OpenVINO FP16</Cell>
68-
<Cell>Apache 2.0</Cell>
69-
<Cell>FP16</Cell>
70-
<Cell>95%</Cell>
71-
<Cell>335.81 MB</Cell>
72-
<Cell>
73-
<Flex gap={'size-100'} justifyContent='end' alignItems='center'>
24+
<TableView aria-label='Model variants for <variant>' overflowMode={'wrap'} density={'compact'}>
25+
<TableHeader>
26+
<Column isRowHeader>Optimized models</Column>
27+
<Column isRowHeader>License</Column>
28+
<Column isRowHeader>Precision</Column>
29+
<Column isRowHeader>Accuracy</Column>
30+
<Column isRowHeader>Size</Column>
31+
<Column align='end'>
32+
<></>
33+
</Column>
34+
</TableHeader>
35+
<TableBody>
36+
<Row>
37+
<Cell>MobileNetV2-ATSS OpenVINO FP16</Cell>
38+
<Cell>Apache 2.0</Cell>
39+
<Cell>FP16</Cell>
40+
<Cell>95%</Cell>
41+
<Cell>335.81 MB</Cell>
42+
<Cell>
43+
<Flex gap={'size-100'} justifyContent='end' alignItems='center'>
44+
<ActionButton isQuiet>
45+
<DownloadIcon />
46+
</ActionButton>
47+
<MenuTrigger>
7448
<ActionButton isQuiet>
75-
<DownloadIcon />
49+
<MoreMenu />
7650
</ActionButton>
77-
<MenuTrigger>
78-
<ActionButton isQuiet>
79-
<MoreMenu />
80-
</ActionButton>
81-
<Menu>
82-
<Item key='delete'>Delete</Item>
83-
<Item key='export'>Export</Item>
84-
</Menu>
85-
</MenuTrigger>
86-
</Flex>
87-
</Cell>
88-
</Row>
89-
<Row>
90-
<Cell>MobileNetV2-ATSS OpenVINO FP16</Cell>
91-
<Cell>Apache 2.0</Cell>
92-
<Cell>FP16</Cell>
93-
<Cell>95%</Cell>
94-
<Cell>335.81 MB</Cell>
95-
<Cell>
96-
<Button variant='primary'>Start quantization</Button>
97-
</Cell>
98-
</Row>
99-
</TableBody>
100-
</TableView>
101-
</View>
51+
<Menu>
52+
<Item key='delete'>Delete</Item>
53+
<Item key='export'>Export</Item>
54+
</Menu>
55+
</MenuTrigger>
56+
</Flex>
57+
</Cell>
58+
</Row>
59+
<Row>
60+
<Cell>MobileNetV2-ATSS OpenVINO FP16</Cell>
61+
<Cell>Apache 2.0</Cell>
62+
<Cell>FP16</Cell>
63+
<Cell>95%</Cell>
64+
<Cell>335.81 MB</Cell>
65+
<Cell>
66+
<Button variant='primary'>Start quantization</Button>
67+
</Cell>
68+
</Row>
69+
</TableBody>
70+
</TableView>
10271
);
10372
};

‎application/ui/src/features/models/model-listing/model-variants/model-variant-tabs.component.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { ModelVariantTable } from './model-variant-table.component';
1010

1111
export const ModelVariantsTabs = () => {
1212
return (
13-
<Tabs aria-label='Model variants' minWidth={0}>
13+
<Tabs aria-label='Model variants'>
1414
<TabList>
1515
<Item key='openvino' textValue='openvino'>
1616
<OpenVINO />
@@ -22,7 +22,7 @@ export const ModelVariantsTabs = () => {
2222
<ONNX />
2323
</Item>
2424
</TabList>
25-
<TabPanels>
25+
<TabPanels width={'calc(100% - 1px)'}>
2626
<Item key='openvino'>
2727
<ModelVariantTable />
2828
</Item>

0 commit comments

Comments
 (0)