apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

feat(gui): add labels to dropdowns

This commit is contained in:
Sean Sube 2023-01-06 11:17:00 -06:00
parent 45a097a56b
commit d3f460759a
3 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
gui/src/components/OnnxWeb.tsx
View File

@ -40,12 +40,12 @@ export function OnnxWeb(props: OnnxWebProps) {
</Box>
<Box sx={{ my: 4 }}>
<Stack direction='row' spacing={2}>
<QueryList result={models} labels={MODEL_LABELS} value={model}
<QueryList result={models} labels={MODEL_LABELS} value={model} name='Model'
onChange={(value) => {
setModel(value);
}}
/>
<QueryList result={platforms} labels={PLATFORM_LABELS} value={platform}
<QueryList result={platforms} labels={PLATFORM_LABELS} value={platform} name='Platform'
onChange={(value) => {
setPlatform(value);
}}

10
gui/src/components/QueryList.tsx
View File

@ -1,10 +1,11 @@
import { doesExist, mustDefault, mustExist } from '@apextoaster/js-utils';
import { MenuItem, Select } from '@mui/material';
import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
import * as React from 'react';
import { UseQueryResult } from 'react-query';
export interface QueryListProps {
labels: Record<string, string>;
name: string;
result: UseQueryResult<Array<string>>;
value: string;
@ -32,11 +33,14 @@ export function QueryList(props: QueryListProps) {
// else: success
const data = mustExist(result.data);
return <Select value={value} onChange={(e) => {
return <FormControl>
<InputLabel>{props.name}</InputLabel>
<Select value={value} onChange={(e) => {
if (doesExist(props.onChange)) {
props.onChange(e.target.value);
}
}}>
{data.map((name) => <MenuItem key={name} value={name}>{mustDefault(labels[name], name)}</MenuItem>)}
</Select>;
</Select>
</FormControl>;
}

2
gui/src/components/Txt2Img.tsx
View File

@ -51,7 +51,7 @@ export function Txt2Img(props: Txt2ImgProps) {
return <Box>
<Stack spacing={2}>
<Stack direction='row' spacing={2}>
<QueryList result={schedulers} value={scheduler} labels={SCHEDULER_LABELS}
<QueryList result={schedulers} value={scheduler} labels={SCHEDULER_LABELS} name='Scheduler'
onChange={(value) => {
setScheduler(value);
}}