feat(gui): add labels to dropdowns
This commit is contained in:
parent
45a097a56b
commit
d3f460759a
|
@ -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);
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -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>
|
||||||
if (doesExist(props.onChange)) {
|
<InputLabel>{props.name}</InputLabel>
|
||||||
props.onChange(e.target.value);
|
<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>;
|
}}>
|
||||||
|
{data.map((name) => <MenuItem key={name} value={name}>{mustDefault(labels[name], name)}</MenuItem>)}
|
||||||
|
</Select>
|
||||||
|
</FormControl>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
}}
|
}}
|
||||||
|
|
Loading…
Reference in New Issue