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>
<Box sx={{ my: 4 }}> <Box sx={{ my: 4 }}>
<Stack direction='row' spacing={2}> <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) => { onChange={(value) => {
setModel(value); setModel(value);
}} }}
/> />
<QueryList result={platforms} labels={PLATFORM_LABELS} value={platform} <QueryList result={platforms} labels={PLATFORM_LABELS} value={platform} name='Platform'
onChange={(value) => { onChange={(value) => {
setPlatform(value); setPlatform(value);
}} }}

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

@ -1,10 +1,11 @@
import { doesExist, mustDefault, mustExist } from '@apextoaster/js-utils'; 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 * as React from 'react';
import { UseQueryResult } from 'react-query'; import { UseQueryResult } from 'react-query';
export interface QueryListProps { export interface QueryListProps {
labels: Record<string, string>; labels: Record<string, string>;
name: string;
result: UseQueryResult<Array<string>>; result: UseQueryResult<Array<string>>;
value: string; value: string;
@ -32,11 +33,14 @@ export function QueryList(props: QueryListProps) {
// else: success // else: success
const data = mustExist(result.data); 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)) { if (doesExist(props.onChange)) {
props.onChange(e.target.value); props.onChange(e.target.value);
} }
}}> }}>
{data.map((name) => <MenuItem key={name} value={name}>{mustDefault(labels[name], name)}</MenuItem>)} {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> return <Box>
<Stack spacing={2}> <Stack spacing={2}>
<Stack direction='row' 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) => { onChange={(value) => {
setScheduler(value); setScheduler(value);
}} }}