diff --git a/src/renderer/components/Experiment/Train/DynamicPluginForm.tsx b/src/renderer/components/Experiment/Train/DynamicPluginForm.tsx index bedb13ab33431428dee29943a4d1779fda43b8bc..5f099281935387a89c74779218045b4e6bbcf9bc 100644 --- a/src/renderer/components/Experiment/Train/DynamicPluginForm.tsx +++ b/src/renderer/components/Experiment/Train/DynamicPluginForm.tsx @@ -6,9 +6,11 @@ import validator from '@rjsf/validator-ajv8'; import Form from '@rjsf/core'; import useSWR from 'swr'; import * as chatAPI from 'renderer/lib/transformerlab-api-sdk'; -import { Typography } from '@mui/joy'; +import { Input, Typography } from '@mui/joy'; import { useMemo } from 'react'; +import { getInputProps, BaseInputTemplateProps } from '@rjsf/utils'; + const schemaTemplate: RJSFSchema = { type: 'object', required: ['title'], @@ -19,6 +21,66 @@ const schemaTemplate: RJSFSchema = { }, }; +function BaseInputTemplate(props: BaseInputTemplateProps) { + const { + schema, + id, + options, + label, + value, + type, + placeholder, + required, + disabled, + readonly, + autofocus, + onChange, + onChangeOverride, + onBlur, + onFocus, + rawErrors, + hideError, + uiSchema, + registry, + formContext, + ...rest + } = props; + const onTextChange = ({ + target: { value: val }, + }: ChangeEvent<HTMLInputElement>) => { + // Use the options.emptyValue if it is specified and newVal is also an empty string + onChange(val === '' ? options.emptyValue || '' : val); + }; + const onTextBlur = ({ + target: { value: val }, + }: FocusEvent<HTMLInputElement>) => onBlur(id, val); + const onTextFocus = ({ + target: { value: val }, + }: FocusEvent<HTMLInputElement>) => onFocus(id, val); + + const inputProps = { ...rest, ...getInputProps(schema, type, options) }; + const hasError = rawErrors?.length > 0 && !hideError; + + const { step, min, max } = inputProps; + + return ( + <Input + id={id} + value={value} + placeholder={placeholder} + disabled={disabled} + readOnly={readonly} + autoFocus={autofocus} + error={hasError} + onChange={onChangeOverride || onTextChange} + onBlur={onTextBlur} + onFocus={onTextFocus} + {...inputProps} + slotProps={{ input: { step, min, max } }} + /> + ); +} + function getSchema(data) { if (data) { console.log('Getting new schema from plugin'); @@ -67,6 +129,7 @@ export default function DynamicPluginForm({ experimentInfo, plugin }) { idPrefix="" idSeparator="" id="plugin_parameters" + templates={{ BaseInputTemplate }} /> ) : ( 'No plugin selected...' diff --git a/src/renderer/styles.css b/src/renderer/styles.css index 48c59aef257867045ff8cd65fb41ff9a1fcae750..3a4920d27aca182de1570332ba9953dcf259d41a 100644 --- a/src/renderer/styles.css +++ b/src/renderer/styles.css @@ -136,275 +136,11 @@ not allowed */ border: 10px solid red; } */ -/** Pure Forms CSS **/ -/** From https://raw.githubusercontent.com/pure-css/pure/master/src/forms/css/forms.css **/ - -/*csslint box-model:false*/ -/* -Box-model set to false because we're setting a height on select elements, which -also have border and padding. This is done because some browsers don't render -the padding. We explicitly set the box-model for select elements to border-box, -so we can ignore the csslint warning. -*/ - -.pure-form input[type='text'], -.pure-form input[type='password'], -.pure-form input[type='email'], -.pure-form input[type='url'], -.pure-form input[type='date'], -.pure-form input[type='month'], -.pure-form input[type='time'], -.pure-form input[type='datetime'], -.pure-form input[type='datetime-local'], -.pure-form input[type='week'], -.pure-form input[type='number'], -.pure-form input[type='search'], -.pure-form input[type='tel'], -.pure-form input[type='color'], -.pure-form select, -.pure-form textarea { - padding: 0.5em 0.6em; - display: inline-block; - border: 1px solid #ccc; - box-shadow: inset 0 1px 3px #ddd; - border-radius: 4px; - vertical-align: middle; - box-sizing: border-box; - width: 100%; - font-size: 18px; -} - -.pure-form input[type='text']:focus, -.pure-form input[type='password']:focus, -.pure-form input[type='email']:focus, -.pure-form input[type='url']:focus, -.pure-form input[type='date']:focus, -.pure-form input[type='month']:focus, -.pure-form input[type='time']:focus, -.pure-form input[type='datetime']:focus, -.pure-form input[type='datetime-local']:focus, -.pure-form input[type='week']:focus, -.pure-form input[type='number']:focus, -.pure-form input[type='search']:focus, -.pure-form input[type='tel']:focus, -.pure-form input[type='color']:focus, -.pure-form select:focus, -.pure-form textarea:focus { - outline: 0; - border-color: #129fea; -} - -.pure-form .pure-checkbox, -.pure-form .pure-radio { - margin: 0.5em 0; - display: block; -} - -.pure-form input[type='text'][disabled], -.pure-form input[type='password'][disabled], -.pure-form input[type='email'][disabled], -.pure-form input[type='url'][disabled], -.pure-form input[type='date'][disabled], -.pure-form input[type='month'][disabled], -.pure-form input[type='time'][disabled], -.pure-form input[type='datetime'][disabled], -.pure-form input[type='datetime-local'][disabled], -.pure-form input[type='week'][disabled], -.pure-form input[type='number'][disabled], -.pure-form input[type='search'][disabled], -.pure-form input[type='tel'][disabled], -.pure-form input[type='color'][disabled], -.pure-form select[disabled], -.pure-form textarea[disabled] { - cursor: not-allowed; - background-color: #eaeded; - color: #cad2d3; -} - -.pure-form input[readonly], -.pure-form select[readonly], -.pure-form textarea[readonly] { - background-color: #eee; /* menu hover bg color */ - color: #777; /* menu text color */ - border-color: #ccc; -} - -.pure-form input:focus:invalid, -.pure-form textarea:focus:invalid, -.pure-form select:focus:invalid { - color: #b94a48; - border-color: #e9322d; -} -.pure-form input[type='file']:focus:invalid:focus, -.pure-form input[type='radio']:focus:invalid:focus, -.pure-form input[type='checkbox']:focus:invalid:focus { - outline-color: #e9322d; -} -.pure-form select { - /* Normalizes the height; padding is not sufficient. */ - height: 2.25em; - border: 1px solid #ccc; - background-color: white; -} -.pure-form select[multiple] { - height: auto; -} -.pure-form label { - margin: 0.5em 0 0.2em; - font-size: 14px; - font-weight: 500; -} -.pure-form fieldset { - margin: 0; - padding: 0.35em 0 0.75em; - border: 0; -} -.pure-form legend { - display: block; - width: 100%; - padding: 0.3em 0; - margin-bottom: 0.3em; - color: #333; - border-bottom: 1px solid #e5e5e5; -} - -.pure-form-stacked input[type='text'], -.pure-form-stacked input[type='password'], -.pure-form-stacked input[type='email'], -.pure-form-stacked input[type='url'], -.pure-form-stacked input[type='date'], -.pure-form-stacked input[type='month'], -.pure-form-stacked input[type='time'], -.pure-form-stacked input[type='datetime'], -.pure-form-stacked input[type='datetime-local'], -.pure-form-stacked input[type='week'], -.pure-form-stacked input[type='number'], -.pure-form-stacked input[type='search'], -.pure-form-stacked input[type='tel'], -.pure-form-stacked input[type='color'], -.pure-form-stacked input[type='file'], -.pure-form-stacked select, -.pure-form-stacked label, -.pure-form-stacked textarea { - display: block; - margin: 0.25em 0; -} - -/* -Need to separate out the :not() selector from the rest of the CSS 2.1 selectors -since IE8 won't execute CSS that contains a CSS3 selector. -*/ -.pure-form-stacked input:not([type]) { - display: block; - margin: 0.25em 0; -} -.pure-form-aligned input, -.pure-form-aligned textarea, -.pure-form-aligned select, -.pure-form-message-inline { - display: inline-block; - vertical-align: middle; -} -.pure-form-aligned textarea { - vertical-align: top; -} - -/* Aligned Forms */ -.pure-form-aligned .pure-control-group { - margin-bottom: 0.5em; -} -.pure-form-aligned .pure-control-group label { - text-align: right; - display: inline-block; - vertical-align: middle; - width: 10em; - margin: 0 1em 0 0; -} -.pure-form-aligned .pure-controls { - margin: 1.5em 0 0 11em; -} - -/* Rounded Inputs */ -.pure-form input.pure-input-rounded, -.pure-form .pure-input-rounded { - border-radius: 2em; - padding: 0.5em 1em; -} - -/* Grouped Inputs */ -.pure-form .pure-group fieldset { - margin-bottom: 10px; -} -.pure-form .pure-group input, -.pure-form .pure-group textarea { - display: block; - padding: 10px; - margin: 0 0 -1px; - border-radius: 0; - position: relative; - top: -1px; -} -.pure-form .pure-group input:focus, -.pure-form .pure-group textarea:focus { - z-index: 3; -} -.pure-form .pure-group input:first-child, -.pure-form .pure-group textarea:first-child { - top: 1px; - border-radius: 4px 4px 0 0; - margin: 0; -} -.pure-form .pure-group input:first-child:last-child, -.pure-form .pure-group textarea:first-child:last-child { - top: 1px; - border-radius: 4px; - margin: 0; -} -.pure-form .pure-group input:last-child, -.pure-form .pure-group textarea:last-child { - top: -2px; - border-radius: 0 0 4px 4px; - margin: 0; -} -.pure-form .pure-group button { - margin: 0.35em 0; -} - -.pure-form .pure-input-1 { - width: 100%; -} -.pure-form .pure-input-3-4 { - width: 75%; -} -.pure-form .pure-input-2-3 { - width: 66%; -} -.pure-form .pure-input-1-2 { - width: 50%; -} -.pure-form .pure-input-1-3 { - width: 33%; -} -.pure-form .pure-input-1-4 { - width: 25%; -} - -/* Inline help for forms */ -.pure-form-message-inline { - display: inline-block; - padding-left: 0.3em; - color: #666; - vertical-align: middle; - font-size: 0.875em; -} - -/* Block help for forms */ -.pure-form-message { - display: block; - color: #666; - font-size: 0.875em; -} - .form-group { margin-bottom: 20px; } + +fieldset { + border: none; + padding: 0; +}