Skip to content

Commit

Permalink
Task creator validators & help message (#1303)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bsekachev
bsekachev authored Mar 24, 2020
1 parent 4f3d3cb commit 83dbe8f
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 13 deletions.
120 changes: 109 additions & 11 deletions cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,60 @@ export interface AdvancedConfiguration {
lfs: boolean;
repository?: string;
useZipChunks: boolean;
dataChunkSize: number;
dataChunkSize?: number;
}

type Props = FormComponentProps & {
onSubmit(values: AdvancedConfiguration): void;
installedGit: boolean;
};

function isPositiveInteger(_: any, value: any, callback: any): void {
if (!value) {
callback();
return;
}

const intValue = +value;
if (Number.isNaN(intValue)
|| !Number.isInteger(intValue) || intValue < 1) {
callback('Value must be a positive integer');
}

callback();
}

function isNonNegativeInteger(_: any, value: any, callback: any): void {
if (!value) {
callback();
return;
}

const intValue = +value;
if (Number.isNaN(intValue) || intValue < 0) {
callback('Value must be a non negative integer');
}

callback();
}

function isIntegerRange(min: number, max: number, _: any, value: any, callback: any): void {
if (!value) {
callback();
return;
}

const intValue = +value;
if (Number.isNaN(intValue)
|| !Number.isInteger(intValue)
|| intValue < min || intValue > max
) {
callback(`Value must be an integer [${min}, ${max}]`);
}

callback();
}

class AdvancedConfigurationForm extends React.PureComponent<Props> {
public submit(): Promise<void> {
return new Promise((resolve, reject) => {
Expand All @@ -51,6 +97,16 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
const filteredValues = { ...values };
delete filteredValues.frameStep;

if (values.overlapSize && +values.segmentSize <= +values.overlapSize) {
reject(new Error('Overlap size must be more than segment size'));
}

if (typeof (values.startFrame) !== 'undefined' && typeof (values.stopFrame) !== 'undefined'
&& +values.stopFrame < +values.startFrame
) {
reject(new Error('Stop frame must be more or equal start frame'));
}

onSubmit({
...values,
frameFilter: values.frameStep ? `step=${values.frameStep}` : undefined,
Expand Down Expand Up @@ -96,14 +152,14 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
initialValue: 70,
rules: [{
required: true,
message: 'This field is required',
message: 'The field is required.',
}, {
validator: isIntegerRange.bind(null, 5, 100),
}],
})(
<Input
size='large'
type='number'
min={5}
max={100}
suffix={<Icon type='percentage' />}
/>,
)}
Expand All @@ -118,7 +174,11 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
return (
<Form.Item label={<span>Overlap size</span>}>
<Tooltip title='Defines a number of intersected frames between different segments'>
{form.getFieldDecorator('overlapSize')(
{form.getFieldDecorator('overlapSize', {
rules: [{
validator: isNonNegativeInteger,
}],
})(
<Input size='large' type='number' />,
)}
</Tooltip>
Expand All @@ -132,7 +192,11 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
return (
<Form.Item label={<span>Segment size</span>}>
<Tooltip title='Defines a number of frames in a segment'>
{form.getFieldDecorator('segmentSize')(
{form.getFieldDecorator('segmentSize', {
rules: [{
validator: isPositiveInteger,
}],
})(
<Input size='large' type='number' />,
)}
</Tooltip>
Expand All @@ -145,7 +209,11 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {

return (
<Form.Item label={<span>Start frame</span>}>
{form.getFieldDecorator('startFrame')(
{form.getFieldDecorator('startFrame', {
rules: [{
validator: isNonNegativeInteger,
}],
})(
<Input
size='large'
type='number'
Expand All @@ -162,7 +230,11 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {

return (
<Form.Item label={<span>Stop frame</span>}>
{form.getFieldDecorator('stopFrame')(
{form.getFieldDecorator('stopFrame', {
rules: [{
validator: isNonNegativeInteger,
}],
})(
<Input
size='large'
type='number'
Expand All @@ -179,7 +251,11 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {

return (
<Form.Item label={<span>Frame step</span>}>
{form.getFieldDecorator('frameStep')(
{form.getFieldDecorator('frameStep', {
rules: [{
validator: isPositiveInteger,
}],
})(
<Input
size='large'
type='number'
Expand Down Expand Up @@ -314,8 +390,30 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {

return (
<Form.Item label={<span>Chunk size</span>}>
<Tooltip title='Defines a number of frames in one chunk'>
{form.getFieldDecorator('dataChunkSize')(
<Tooltip
title={(
<>
Defines a number of frames to be packed in
a chunk when send from client to server.
Server defines automatically if empty.
<br />
Recommended values:
<br />
1080p or less: 36
<br />
2k or less: 8 - 16
<br />
4k or less: 4 - 8
<br />
More: 1 - 4
</>
)}
>
{form.getFieldDecorator('dataChunkSize', {
rules: [{
validator: isPositiveInteger,
}],
})(
<Input size='large' type='number' />,
)}
</Tooltip>
Expand Down
4 changes: 2 additions & 2 deletions cvat-ui/src/components/create-task-page/create-task-content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,10 +142,10 @@ export default class CreateTaskContent extends React.PureComponent<Props, State>
}).then((): void => {
const { onCreate } = this.props;
onCreate(this.state);
}).catch((): void => {
}).catch((error: Error): void => {
notification.error({
message: 'Could not create a task',
description: 'Please, check configuration you specified',
description: error.toString(),
});
});
};
Expand Down

0 comments on commit 83dbe8f

Please sign in to comment.