wangchunlin
/
cvat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Minor fixes

Browse Source
main
Boris Sekachev 5 years ago
parent a60fd76f0d
commit 6883ee3155
78 changed files with 470 additions and 471 deletions
Show Stats Download Patch File Download Diff File

1
cvat-ui/package-lock.json generated
Unescape Escape View File

@ -12964,7 +12964,6 @@
"requires": {
"axios": "^0.21.0",
"browser-or-node": "^1.2.1",
"cvat-data": "file:../cvat-data",
"detect-browser": "^5.2.0",
"error-stack-parser": "^2.0.2",
"form-data": "^2.5.0",

1
cvat-ui/src/components/actions-menu/actions-menu.tsx
Unescape Escape View File

@ -8,7 +8,6 @@ import Menu from 'antd/lib/menu';
import Modal from 'antd/lib/modal';
// eslint-disable-next-line import/no-extraneous-dependencies
import { MenuInfo } from 'rc-menu/lib/interface';
import DumpSubmenu from './dump-submenu';
import LoadSubmenu from './load-submenu';
import ExportSubmenu from './export-submenu';

4
cvat-ui/src/components/actions-menu/load-submenu.tsx
Unescape Escape View File

@ -17,7 +17,9 @@ interface Props {
}
export default function LoadSubmenu(props: Props): JSX.Element {
const { menuKey, loaders, loadActivity, onFileUpload } = props;
const {
menuKey, loaders, loadActivity, onFileUpload,
} = props;
return (
<Menu.SubMenu key={menuKey} title='Upload annotations'>

2
cvat-ui/src/components/actions-menu/styles.scss
Unescape Escape View File

@ -20,7 +20,7 @@
.cvat-menu-load-submenu-item,
.cvat-menu-dump-submenu-item,
.cvat-menu-export-submenu-item {
> i {
> span[role='img'] {
color: $info-icon-color;
}

2
cvat-ui/src/components/annotation-page/appearance-block.tsx
Unescape Escape View File

@ -52,7 +52,7 @@ interface DispatchToProps {
export function computeHeight(): number {
const [sidebar] = window.document.getElementsByClassName('cvat-objects-sidebar');
const [appearance] = window.document.getElementsByClassName('cvat-objects-appearance-collapse');
const [tabs] = Array.from(window.document.querySelectorAll('.cvat-objects-sidebar-tabs > .ant-tabs-card-bar'));
const [tabs] = Array.from(window.document.querySelectorAll('.cvat-objects-sidebar-tabs > .ant-tabs-nav'));
if (sidebar && appearance && tabs) {
const maxHeight = sidebar ? sidebar.clientHeight : 0;

15
cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx
Unescape Escape View File

@ -291,15 +291,11 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
ant-layout-sider-zero-width-trigger-left`}
onClick={collapse}
>
{sidebarCollapsed ? (
<MenuFoldOutlined title='Show' />
) : (
<MenuUnfoldOutlined title='Hide' />
)}
{sidebarCollapsed ? <MenuFoldOutlined title='Show' /> : <MenuUnfoldOutlined title='Hide' />}
</span>
<GlobalHotKeys keyMap={subKeyMap} handlers={handlers} allowChanges />
<Row className='cvat-objects-sidebar-filter-input'>
<Col>
<Row>
<Col span={24}>
<AnnotationsFiltersInput />
</Col>
</Row>
@ -323,6 +319,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
}}
/>
<ObjectButtonsContainer
readonly={false}
clientID={activeObjectState.clientID}
outsideDisabled
hiddenDisabled
@ -376,8 +373,8 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
>
{sidebarCollapsed ? <MenuFoldOutlined title='Show' /> : <MenuUnfoldOutlined title='Hide' />}
</span>
<Row className='cvat-objects-sidebar-filter-input'>
<Col>
<Row>
<Col span={24}>
<AnnotationsFiltersInput />
</Col>
</Row>

8
cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx
Unescape Escape View File

@ -22,7 +22,9 @@ interface InputElementParameters {
}
function renderInputElement(parameters: InputElementParameters): JSX.Element {
const { inputType, attrID, clientID, values, currentValue, onChange } = parameters;
const {
inputType, attrID, clientID, values, currentValue, onChange,
} = parameters;
const renderCheckbox = (): JSX.Element => (
<>
@ -246,7 +248,9 @@ interface Props {
}
function AttributeEditor(props: Props): JSX.Element {
const { attribute, currentValue, onChange, clientID } = props;
const {
attribute, currentValue, onChange, clientID,
} = props;
const { inputType, values, id: attrID } = attribute;
return (

4
cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx
Unescape Escape View File

@ -17,7 +17,9 @@ interface Props {
}
function AttributeSwitcher(props: Props): JSX.Element {
const { currentAttribute, currentIndex, attributesCount, nextAttribute, normalizedKeyMap } = props;
const {
currentAttribute, currentIndex, attributesCount, nextAttribute, normalizedKeyMap,
} = props;
const title = `${currentAttribute} [${currentIndex + 1}/${attributesCount}]`;
return (

4
cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx
Unescape Escape View File

@ -19,7 +19,9 @@ interface Props {
}
function ObjectSwitcher(props: Props): JSX.Element {
const { currentLabel, clientID, objectsCount, currentIndex, nextObject, normalizedKeyMap } = props;
const {
currentLabel, clientID, objectsCount, currentIndex, nextObject, normalizedKeyMap,
} = props;
const title = `${currentLabel} ${clientID} [${currentIndex + 1}/${objectsCount}]`;
return (

2
cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss
Unescape Escape View File

@ -27,7 +27,7 @@
overflow: hidden;
}
> button > i {
> button > span[role='img'] {
color: $objects-bar-icons-color;
}
}

6
cvat-ui/src/components/annotation-page/request-review-modal.tsx
Unescape Escape View File

@ -43,12 +43,12 @@ export default function RequestReviewModal(): JSX.Element | null {
onOk={submitAnnotations}
okText='Submit'
>
<Row type='flex' justify='start'>
<Row justify='start'>
<Col>
<Title level={4}>Assign a user who is responsible for review</Title>
</Col>
</Row>
<Row align='middle' type='flex' justify='start'>
<Row align='middle' justify='start'>
<Col>
<Text type='secondary'>Reviewer: </Text>
</Col>
@ -56,7 +56,7 @@ export default function RequestReviewModal(): JSX.Element | null {
<UserSelector value={reviewer} onSelect={setReviewer} />
</Col>
</Row>
<Row type='flex' justify='start'>
<Row justify='start'>
<Text type='secondary'>You might not be able to change the job after this action. Continue?</Text>
</Row>
</Modal>

37
cvat-ui/src/components/annotation-page/review/create-issue-dialog.tsx
Unescape Escape View File

@ -5,47 +5,36 @@
import React, { ReactPortal } from 'react';
import ReactDOM from 'react-dom';
import { useDispatch } from 'react-redux';
import Form, { FormComponentProps } from '@ant-design/compatible/lib/form/Form';
import Form from 'antd/lib/form';
import Input from 'antd/lib/input';
import Button from 'antd/lib/button';
import { Row, Col } from 'antd/lib/grid';
import { reviewActions, finishIssueAsync } from 'actions/review-actions';
import { Store } from 'antd/lib/form/interface';
type FormProps = {
interface FormProps {
top: number;
left: number;
submit(message: string): void;
cancel(): void;
} & FormComponentProps;
}
function MessageForm(props: FormProps): JSX.Element {
const {
form: { getFieldDecorator },
form,
top,
left,
submit,
cancel,
top, left, submit, cancel,
} = props;
function handleSubmit(e: React.FormEvent): void {
e.preventDefault();
form.validateFields((error, values): void => {
if (!error) {
submit(values.issue_description);
}
});
function handleSubmit(values: Store): void {
submit(values.issue_description);
}
return (
<Form className='cvat-create-issue-dialog' style={{ top, left }} onSubmit={handleSubmit}>
<Form.Item>
{getFieldDecorator('issue_description', {
rules: [{ required: true, message: 'Please, fill out the field' }],
})(<Input autoComplete='off' placeholder='Please, describe the issue' />)}
<Form className='cvat-create-issue-dialog' style={{ top, left }} onFinish={handleSubmit}>
<Form.Item name='issue_description' rules={[{ required: true, message: 'Please, fill out the field' }]}>
<Input autoComplete='off' placeholder='Please, describe the issue' />
</Form.Item>
<Row type='flex' justify='space-between'>
<Row justify='space-between'>
<Col>
<Button onClick={cancel} type='ghost'>
Cancel
@ -61,8 +50,6 @@ function MessageForm(props: FormProps): JSX.Element {
);
}
const WrappedMessageForm = Form.create<FormProps>()(MessageForm);
interface Props {
top: number;
left: number;
@ -73,7 +60,7 @@ export default function CreateIssueDialog(props: Props): ReactPortal {
const { top, left } = props;
return ReactDOM.createPortal(
<WrappedMessageForm
<MessageForm
top={top}
left={left}
submit={(message: string) => {

8
cvat-ui/src/components/annotation-page/review/issue-dialog.tsx
Unescape Escape View File

@ -88,7 +88,7 @@ export default function IssueDialog(props: Props): JSX.Element {
return ReactDOM.createPortal(
<div style={{ top, left }} ref={ref} className='cvat-issue-dialog'>
<Row className='cvat-issue-dialog-header' type='flex' justify='space-between'>
<Row className='cvat-issue-dialog-header' justify='space-between'>
<Col>
<Title level={4}>{id >= 0 ? `Issue #${id}` : 'Issue'}</Title>
</Col>
@ -98,10 +98,10 @@ export default function IssueDialog(props: Props): JSX.Element {
</Tooltip>
</Col>
</Row>
<Row className='cvat-issue-dialog-chat' type='flex' justify='start'>
<Row className='cvat-issue-dialog-chat' justify='start'>
<Col style={{ display: 'block' }}>{lines}</Col>
</Row>
<Row className='cvat-issue-dialog-input' type='flex' justify='start'>
<Row className='cvat-issue-dialog-input' justify='start'>
<Col span={24}>
<Input
placeholder='Print a comment here..'
@ -118,7 +118,7 @@ export default function IssueDialog(props: Props): JSX.Element {
/>
</Col>
</Row>
<Row className='cvat-issue-dialog-footer' type='flex' justify='end'>
<Row className='cvat-issue-dialog-footer' justify='end'>
<Col>
{currentText.length ? (
<Button

8
cvat-ui/src/components/annotation-page/review/submit-review-modal.tsx
Unescape Escape View File

@ -86,12 +86,12 @@ export default function SubmitReviewModal(): JSX.Element | null {
okText='Submit'
width={650}
>
<Row type='flex' justify='start'>
<Row justify='start'>
<Col>
<Title level={4}>Submitting your review</Title>
</Col>
</Row>
<Row type='flex' justify='start'>
<Row justify='start'>
<Col span={12}>
<Description title='Review summary' layout='horizontal' column={1} size='small' bordered>
<Description.Item label='Estimated quality: '>{estimatedQuality}</Description.Item>
@ -119,7 +119,7 @@ export default function SubmitReviewModal(): JSX.Element | null {
<RadioButton value={ReviewStatus.REJECTED}>Reject</RadioButton>
</Radio.Group>
{reviewStatus === ReviewStatus.REVIEW_FURTHER && (
<Row align='middle' type='flex' justify='start'>
<Row align='middle' justify='start'>
<Col>
<Text type='secondary'>Reviewer: </Text>
</Col>
@ -128,7 +128,7 @@ export default function SubmitReviewModal(): JSX.Element | null {
</Col>
</Row>
)}
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col>
<Rate
value={Math.round(estimatedQuality)}

14
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx
Unescape Escape View File

@ -52,17 +52,17 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
return (
<div className='cvat-draw-shape-popover-content'>
<Row type='flex' justify='start'>
<Row justify='start'>
<Col>
<Text className='cvat-text-color' strong>{`Draw new ${shapeType}`}</Text>
</Col>
</Row>
<Row type='flex' justify='start'>
<Row justify='start'>
<Col>
<Text className='cvat-text-color'>Label</Text>
</Col>
</Row>
<Row type='flex' justify='center'>
<Row justify='center'>
<Col span={24}>
<LabelSelector
style={{ width: '100%' }}
@ -79,7 +79,7 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
<Text className='cvat-text-color'> Drawing method </Text>
</Col>
</Row>
<Row type='flex' justify='space-around'>
<Row justify='space-around'>
<Col>
<Radio.Group
style={{ display: 'flex' }}
@ -104,7 +104,7 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
<Text className='cvat-text-color'> Drawing method </Text>
</Col>
</Row>
<Row type='flex' justify='space-around'>
<Row justify='space-around'>
<Col>
<Radio.Group
style={{ display: 'flex' }}
@ -123,7 +123,7 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
</>
)}
{shapeType !== ShapeType.RECTANGLE && shapeType !== ShapeType.CUBOID && (
<Row type='flex' justify='space-around' align='middle'>
<Row justify='space-around' align='middle'>
<Col span={14}>
<Text className='cvat-text-color'> Number of points: </Text>
</Col>
@ -144,7 +144,7 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
</Col>
</Row>
)}
<Row type='flex' justify='space-around'>
<Row justify='space-around'>
<Col span={12}>
<Tooltip title={`Press ${repeatShapeShortcut} to draw again`} mouseLeaveDelay={0}>
<Button onClick={onDrawShape}>Shape</Button>

8
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
Unescape Escape View File

@ -24,19 +24,19 @@ function SetupTagPopover(props: Props): JSX.Element {
return (
<div className='cvat-draw-shape-popover-content'>
<Row type='flex' justify='start'>
<Row justify='start'>
<Col>
<Text className='cvat-text-color' strong>
Setup tag
</Text>
</Col>
</Row>
<Row type='flex' justify='start'>
<Row justify='start'>
<Col>
<Text className='cvat-text-color'>Label</Text>
</Col>
</Row>
<Row type='flex' justify='center'>
<Row justify='center'>
<Col span={24}>
<LabelSelector
style={{ width: '100%' }}
@ -46,7 +46,7 @@ function SetupTagPopover(props: Props): JSX.Element {
/>
</Col>
</Row>
<Row type='flex' justify='space-around'>
<Row justify='space-around'>
<Col span={24}>
<Tooltip title={`Press ${repeatShapeShortcut} to add a tag again`} mouseLeaveDelay={0}>
<Button onClick={() => onSetup(selectedLabelID)}>Tag</Button>

34
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx
Unescape Escape View File

@ -18,23 +18,27 @@ interface Props {
}
function SplitControl(props: Props): JSX.Element {
const { switchSplitShortcut, activeControl, canvasInstance, splitTrack } = props;
const {
switchSplitShortcut, activeControl, canvasInstance, splitTrack,
} = props;
const dynamicIconProps =
activeControl === ActiveControl.SPLIT ? {
className: 'cvat-split-track-control cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.split({ enabled: false });
splitTrack(false);
},
} : {
className: 'cvat-split-track-control',
onClick: (): void => {
canvasInstance.cancel();
canvasInstance.split({ enabled: true });
splitTrack(true);
},
};
activeControl === ActiveControl.SPLIT ?
{
className: 'cvat-split-track-control cvat-active-canvas-control',
onClick: (): void => {
canvasInstance.split({ enabled: false });
splitTrack(false);
},
} :
{
className: 'cvat-split-track-control',
onClick: (): void => {
canvasInstance.cancel();
canvasInstance.split({ enabled: true });
splitTrack(true);
},
};
return (
<Tooltip title={`Split a track ${switchSplitShortcut}`} placement='right' mouseLeaveDelay={0}>

65
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx
Unescape Escape View File

@ -375,17 +375,17 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
}
};
private setActiveInteractor = (key: string): void => {
private setActiveInteractor = (value: string): void => {
const { interactors } = this.props;
this.setState({
activeInteractor: interactors.filter((interactor: Model) => interactor.id === key)[0],
activeInteractor: interactors.filter((interactor: Model) => interactor.id === value)[0],
});
};
private setActiveTracker = (key: string): void => {
private setActiveTracker = (value: string): void => {
const { trackers } = this.props;
this.setState({
activeTracker: trackers.filter((tracker: Model) => tracker.id === key)[0],
activeTracker: trackers.filter((tracker: Model) => tracker.id === value)[0],
});
};
@ -457,12 +457,12 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
const { activeLabelID } = this.state;
return (
<>
<Row type='flex' justify='start'>
<Row justify='start'>
<Col>
<Text className='cvat-text-color'>Label</Text>
</Col>
</Row>
<Row type='flex' justify='center'>
<Row justify='center'>
<Col span={24}>
<LabelSelector
style={{ width: '100%' }}
@ -486,7 +486,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
if (!trackers.length) {
return (
<Row type='flex' justify='center' align='middle' style={{ marginTop: '5px' }}>
<Row justify='center' align='middle' style={{ marginTop: '5px' }}>
<Col>
<Text type='warning' className='cvat-text-color'>
No available trackers found
@ -498,12 +498,12 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
return (
<>
<Row type='flex' justify='start'>
<Row justify='start'>
<Col>
<Text className='cvat-text-color'>Tracker</Text>
</Col>
</Row>
<Row type='flex' align='middle' justify='center'>
<Row align='middle' justify='center'>
<Col span={24}>
<Select
style={{ width: '100%' }}
@ -512,7 +512,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
>
{trackers.map(
(tracker: Model): JSX.Element => (
<Select.Option title={tracker.description} key={tracker.id}>
<Select.Option value={tracker.id} title={tracker.description} key={tracker.id}>
{tracker.name}
</Select.Option>
),
@ -520,7 +520,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
</Select>
</Col>
</Row>
<Row type='flex' align='middle' justify='start' style={{ marginTop: '5px' }}>
<Row align='middle' justify='start' style={{ marginTop: '5px' }}>
<Col>
<Text>Tracking frames</Text>
</Col>
@ -541,7 +541,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
/>
</Col>
</Row>
<Row type='flex' align='middle' justify='end'>
<Row align='middle' justify='end'>
<Col>
<Button
type='primary'
@ -578,7 +578,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
if (!interactors.length) {
return (
<Row type='flex' justify='center' align='middle' style={{ marginTop: '5px' }}>
<Row justify='center' align='middle' style={{ marginTop: '5px' }}>
<Col>
<Text type='warning' className='cvat-text-color'>
No available interactors found
@ -590,12 +590,12 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
return (
<>
<Row type='flex' justify='start'>
<Row justify='start'>
<Col>
<Text className='cvat-text-color'>Interactor</Text>
</Col>
</Row>
<Row type='flex' align='middle' justify='center'>
<Row align='middle' justify='center'>
<Col span={24}>
<Select
style={{ width: '100%' }}
@ -604,7 +604,11 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
>
{interactors.map(
(interactor: Model): JSX.Element => (
<Select.Option title={interactor.description} key={interactor.id}>
<Select.Option
value={interactor.id}
title={interactor.description}
key={interactor.id}
>
{interactor.name}
</Select.Option>
),
@ -612,7 +616,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
</Select>
</Col>
</Row>
<Row type='flex' align='middle' justify='end'>
<Row align='middle' justify='end'>
<Col>
<Button
type='primary'
@ -651,7 +655,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
if (!detectors.length) {
return (
<Row type='flex' justify='center' align='middle' style={{ marginTop: '5px' }}>
<Row justify='center' align='middle' style={{ marginTop: '5px' }}>
<Col>
<Text type='warning' className='cvat-text-color'>
No available detectors found
@ -679,17 +683,18 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
});
const states = result.map(
(data: any): any => new core.classes.ObjectState({
shapeType: data.type,
label: task.labels.filter((label: any): boolean => label.name === data.label)[0],
points: data.points,
objectType: ObjectType.SHAPE,
frame,
occluded: false,
source: 'auto',
attributes: {},
zOrder: curZOrder,
}),
(data: any): any =>
new core.classes.ObjectState({
shapeType: data.type,
label: task.labels.filter((label: any): boolean => label.name === data.label)[0],
points: data.points,
objectType: ObjectType.SHAPE,
frame,
occluded: false,
source: 'auto',
attributes: {},
zOrder: curZOrder,
}),
);
await jobInstance.annotations.put(states);
@ -710,7 +715,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
private renderPopoverContent(): JSX.Element {
return (
<div className='cvat-tools-control-popover-content'>
<Row type='flex' justify='start'>
<Row justify='start'>
<Col>
<Text className='cvat-text-color' strong>
AI Tools

2
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-picker.tsx
Unescape Escape View File

@ -103,7 +103,7 @@ function ColorPicker(props: Props, ref: React.Ref<any>): JSX.Element {
</>
)}
title={(
<Row type='flex' justify='space-between' align='middle'>
<Row justify='space-between' align='middle'>
<Col span={12}>
<Text strong>Select color</Text>
</Col>

13
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx
Unescape Escape View File

@ -6,9 +6,8 @@ import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { CombinedState } from 'reducers/interfaces';
import {
LeftOutlined, RightOutlined, EyeInvisibleOutlined, EyeOutlined,
LeftOutlined, RightOutlined, EyeInvisibleFilled, EyeOutlined,
} from '@ant-design/icons';
import { IconBaseProps } from '@ant-design/icons/lib/components/Icon';
import Tooltip from 'antd/lib/tooltip';
import Alert from 'antd/lib/alert';
import { Row, Col } from 'antd/lib/grid';
@ -27,7 +26,7 @@ export default function LabelsListComponent(): JSX.Element {
const combinedIssues = activeReview ? issues.concat(activeReview.issues) : issues;
const frames = combinedIssues.map((issue: any): number => issue.frame).sort((a: number, b: number) => +a - +b);
const nearestLeft = frames.filter((_frame: number): boolean => _frame < frame).reverse()[0];
const dinamicLeftProps: IconBaseProps = Number.isInteger(nearestLeft) ?
const dinamicLeftProps: any = Number.isInteger(nearestLeft) ?
{
onClick: () => dispatch(changeFrameAsync(nearestLeft)),
} :
@ -39,7 +38,7 @@ export default function LabelsListComponent(): JSX.Element {
};
const nearestRight = frames.filter((_frame: number): boolean => _frame > frame)[0];
const dinamicRightProps: IconBaseProps = Number.isInteger(nearestRight) ?
const dinamicRightProps: any = Number.isInteger(nearestRight) ?
{
onClick: () => dispatch(changeFrameAsync(nearestRight)),
} :
@ -53,7 +52,7 @@ export default function LabelsListComponent(): JSX.Element {
return (
<div style={{ height: tabContentHeight }}>
<div className='cvat-objects-sidebar-issues-list-header'>
<Row type='flex' justify='start' align='middle'>
<Row justify='start' align='middle'>
<Col>
<Tooltip title='Find the previous frame with issues'>
<LeftOutlined {...dinamicLeftProps} />
@ -66,8 +65,8 @@ export default function LabelsListComponent(): JSX.Element {
</Col>
<Col offset={3}>
<Tooltip title='Show/hide all the issues'>
{ issuesHidden ? (
<EyeInvisibleOutlined
{issuesHidden ? (
<EyeInvisibleFilled
onClick={() => dispatch(reviewActions.switchIssuesHiddenFlag(false))}
/>
) : (

11
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/label-item.tsx
Unescape Escape View File

@ -7,7 +7,7 @@ import { Row, Col } from 'antd/lib/grid';
import Button from 'antd/lib/button';
import Text from 'antd/lib/typography/Text';
import {
LockOutlined, UnlockOutlined, EyeInvisibleOutlined, EyeOutlined,
LockFilled, UnlockOutlined, EyeInvisibleFilled, EyeOutlined,
} from '@ant-design/icons';
interface Props {
@ -48,14 +48,15 @@ function LabelItemComponent(props: Props): JSX.Element {
return (
<Row
type='flex'
align='middle'
justify='space-around'
className='cvat-objects-sidebar-label-item'
style={{ display: visible ? 'flex' : 'none' }}
>
<Col span={4}>
<Button style={{ background: labelColor }} className='cvat-label-item-color-button' />
<Button style={{ background: labelColor }} className='cvat-label-item-color-button'>
{' '}
</Button>
</Col>
<Col span={14}>
<Text strong className='cvat-text'>
@ -64,14 +65,14 @@ function LabelItemComponent(props: Props): JSX.Element {
</Col>
<Col span={3}>
{statesLocked ? (
<LockOutlined {...classes.lock.enabled} onClick={unlockStates} />
<LockFilled {...classes.lock.enabled} onClick={unlockStates} />
) : (
<UnlockOutlined {...classes.lock.disabled} onClick={lockStates} />
)}
</Col>
<Col span={3}>
{statesHidden ? (
<EyeInvisibleOutlined {...classes.hidden.enabled} onClick={showStates} />
<EyeInvisibleFilled {...classes.hidden.enabled} onClick={showStates} />
) : (
<EyeOutlined {...classes.hidden.disabled} onClick={hideStates} />
)}

10
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx
Unescape Escape View File

@ -94,7 +94,7 @@ function ItemTopComponent(props: Props): JSX.Element {
};
return (
<Row type='flex' align='middle'>
<Row align='middle'>
<Col span={10}>
<Text style={{ fontSize: 12 }}>{clientID}</Text>
<br />
@ -104,7 +104,13 @@ function ItemTopComponent(props: Props): JSX.Element {
</Col>
<Col span={12}>
<Tooltip title='Change current label' mouseLeaveDelay={0}>
<LabelSelector disabled={readonly} size='small' labels={labels} value={labelID} onChange={changeLabel} />
<LabelSelector
disabled={readonly}
size='small'
labels={labels}
value={labelID}
onChange={changeLabel}
/>
</Tooltip>
</Col>
<Col span={2}>

62
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-buttons.tsx
Unescape Escape View File

@ -4,7 +4,19 @@
import React from 'react';
import { Row, Col } from 'antd/lib/grid';
import Icon from '@ant-design/icons';
import Icon, {
UnlockOutlined,
LockFilled,
TeamOutlined,
UserOutlined,
PushpinFilled,
PushpinOutlined,
EyeInvisibleFilled,
StarFilled,
SelectOutlined,
StarOutlined,
EyeOutlined,
} from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { ObjectType, ShapeType } from 'reducers/interfaces';
@ -130,9 +142,9 @@ function SwitchLock(props: Props): JSX.Element {
return (
<Tooltip title={`Switch lock property ${switchLockShortcut}`} mouseLeaveDelay={0}>
{locked ? (
<Icon {...classes.lock.enabled} type='lock' theme='filled' onClick={unlock} />
<LockFilled {...classes.lock.enabled} onClick={unlock} />
) : (
<Icon {...classes.lock.disabled} type='unlock' onClick={lock} />
<UnlockOutlined {...classes.lock.disabled} onClick={lock} />
)}
</Tooltip>
);
@ -145,9 +157,9 @@ function SwitchOccluded(props: Props): JSX.Element {
return (
<Tooltip title={`Switch occluded property ${switchOccludedShortcut}`} mouseLeaveDelay={0}>
{occluded ? (
<Icon {...classes.occluded.enabled} type='team' onClick={unsetOccluded} />
<TeamOutlined {...classes.occluded.enabled} onClick={unsetOccluded} />
) : (
<Icon {...classes.occluded.disabled} type='user' onClick={setOccluded} />
<UserOutlined {...classes.occluded.disabled} onClick={setOccluded} />
)}
</Tooltip>
);
@ -158,9 +170,9 @@ function SwitchPinned(props: Props): JSX.Element {
return (
<Tooltip title='Switch pinned property' mouseLeaveDelay={0}>
{pinned ? (
<Icon {...classes.pinned.enabled} type='pushpin' theme='filled' onClick={unpin} />
<PushpinFilled {...classes.pinned.enabled} onClick={unpin} />
) : (
<Icon {...classes.pinned.disabled} type='pushpin' onClick={pin} />
<PushpinOutlined {...classes.pinned.disabled} onClick={pin} />
)}
</Tooltip>
);
@ -174,15 +186,9 @@ function SwitchHidden(props: Props): JSX.Element {
return (
<Tooltip title={`Switch hidden property ${switchHiddenShortcut}`} mouseLeaveDelay={0}>
{hidden ? (
<Icon
{...classes.hidden.enabled}
type='eye-invisible'
theme='filled'
onClick={show}
style={hiddenStyle}
/>
<EyeInvisibleFilled {...classes.hidden.enabled} onClick={show} style={hiddenStyle} />
) : (
<Icon {...classes.hidden.disabled} type='eye' onClick={hide} style={hiddenStyle} />
<EyeOutlined {...classes.hidden.disabled} onClick={hide} style={hiddenStyle} />
)}
</Tooltip>
);
@ -203,7 +209,7 @@ function SwitchOutside(props: Props): JSX.Element {
style={outsideStyle}
/>
) : (
<Icon {...classes.outside.disabled} type='select' onClick={setOutside} style={outsideStyle} />
<SelectOutlined {...classes.outside.disabled} onClick={setOutside} style={outsideStyle} />
)}
</Tooltip>
);
@ -217,15 +223,9 @@ function SwitchKeyframe(props: Props): JSX.Element {
return (
<Tooltip title={`Switch keyframe property ${switchKeyFrameShortcut}`} mouseLeaveDelay={0}>
{keyframe ? (
<Icon
{...classes.keyframe.enabled}
type='star'
theme='filled'
onClick={unsetKeyframe}
style={keyframeStyle}
/>
<StarFilled {...classes.keyframe.enabled} onClick={unsetKeyframe} style={keyframeStyle} />
) : (
<Icon {...classes.keyframe.disabled} type='star' onClick={setKeyframe} style={keyframeStyle} />
<StarOutlined {...classes.keyframe.disabled} onClick={setKeyframe} style={keyframeStyle} />
)}
</Tooltip>
);
@ -236,9 +236,9 @@ function ItemButtonsComponent(props: Props): JSX.Element {
if (objectType === ObjectType.TRACK) {
return (
<Row type='flex' align='middle' justify='space-around'>
<Row align='middle' justify='space-around'>
<Col span={20} style={{ textAlign: 'center' }}>
<Row type='flex' justify='space-around'>
<Row justify='space-around'>
<Col>
<NavigateFirstKeyframe {...props} />
</Col>
@ -253,7 +253,7 @@ function ItemButtonsComponent(props: Props): JSX.Element {
</Col>
</Row>
{!readonly && (
<Row type='flex' justify='space-around'>
<Row justify='space-around'>
<Col>
<SwitchOutside {...props} />
</Col>
@ -287,9 +287,9 @@ function ItemButtonsComponent(props: Props): JSX.Element {
if (objectType === ObjectType.TAG) {
return (
<Row type='flex' align='middle' justify='space-around'>
<Row align='middle' justify='space-around'>
<Col span={20} style={{ textAlign: 'center' }}>
<Row type='flex' justify='space-around'>
<Row justify='space-around'>
<Col>
<SwitchLock {...props} />
</Col>
@ -300,9 +300,9 @@ function ItemButtonsComponent(props: Props): JSX.Element {
}
return (
<Row type='flex' align='middle' justify='space-around'>
<Row align='middle' justify='space-around'>
<Col span={20} style={{ textAlign: 'center' }}>
<Row type='flex' justify='space-around'>
<Row justify='space-around'>
<Col>
<SwitchLock {...props} />
</Col>

1
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-details.tsx
Unescape Escape View File

@ -55,7 +55,6 @@ function ItemAttributesComponent(props: Props): JSX.Element {
(attribute: any): JSX.Element => (
<Row
key={attribute.id}
type='flex'
align='middle'
justify='start'
className='cvat-object-item-attribute-wrapper'

21
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx
Unescape Escape View File

@ -5,8 +5,12 @@
import React from 'react';
import { Row, Col } from 'antd/lib/grid';
import {
LockOutlined, UnlockOutlined, EyeInvisibleOutlined,
EyeOutlined, CaretDownOutlined, CaretUpFilled,
LockFilled,
UnlockOutlined,
EyeInvisibleFilled,
EyeOutlined,
CaretDownOutlined,
CaretUpFilled,
} from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
@ -14,7 +18,6 @@ import AnnotationsFiltersInput from 'components/annotation-page/annotations-filt
import StatesOrderingSelector from 'components/annotation-page/standard-workspace/objects-side-bar/states-ordering-selector';
import { StatesOrdering } from 'reducers/interfaces';
interface Props {
readonly: boolean;
statesHidden: boolean;
@ -39,11 +42,7 @@ function LockAllSwitcher(props: Props): JSX.Element {
return (
<Col span={2}>
<Tooltip title={`Switch lock property for all ${switchLockAllShortcut}`} mouseLeaveDelay={0}>
{statesLocked ? (
<LockOutlined type='lock' onClick={unlockAllStates} />
) : (
<UnlockOutlined type='unlock' onClick={lockAllStates} />
)}
{statesLocked ? <LockFilled onClick={unlockAllStates} /> : <UnlockOutlined onClick={lockAllStates} />}
</Tooltip>
</Col>
);
@ -57,7 +56,7 @@ function HideAllSwitcher(props: Props): JSX.Element {
<Col span={2}>
<Tooltip title={`Switch hidden property for all ${switchHiddenAllShortcut}`} mouseLeaveDelay={0}>
{statesHidden ? (
<EyeInvisibleOutlined onClick={showAllStates} />
<EyeInvisibleFilled onClick={showAllStates} />
) : (
<EyeOutlined onClick={hideAllStates} />
)}
@ -87,11 +86,11 @@ function ObjectListHeader(props: Props): JSX.Element {
return (
<div className='cvat-objects-sidebar-states-header'>
<Row>
<Col>
<Col span={24}>
<AnnotationsFiltersInput />
</Col>
</Row>
<Row type='flex' justify='space-between' align='middle'>
<Row justify='space-between' align='middle'>
{!readonly && (
<>
<LockAllSwitcher {...props} />

26
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss
Unescape Escape View File

@ -19,6 +19,10 @@
background: $header-color;
border-radius: 0;
height: 25px;
.ant-collapse-arrow {
top: $grid-unit-size;
}
}
> .ant-collapse-content {
@ -48,7 +52,11 @@
box-sizing: border-box;
border: none;
.ant-tabs-card-bar {
.ant-tabs-nav {
&::before {
content: none;
}
border: none;
margin-bottom: 0;
padding-top: 25px;
@ -75,7 +83,7 @@
box-sizing: border-box;
> div > div {
> i {
> span[role='img'] {
font-size: 16px;
color: $objects-bar-icons-color;
@ -133,7 +141,7 @@
text-align: center;
margin: 0 2px;
> i {
> span[role='img'] {
@extend .cvat-object-sidebar-icon;
}
@ -182,7 +190,7 @@
line-height: 12px;
}
> div:nth-child(3) > i {
> div:nth-child(3) > span {
@extend .cvat-object-sidebar-icon;
font-size: 25px;
@ -198,7 +206,7 @@
margin-top: 5px;
}
i {
span[role='img'] {
@extend .cvat-object-sidebar-icon;
}
}
@ -216,6 +224,10 @@
background: inherit;
padding-top: 2px;
padding-bottom: 2px;
.ant-collapse-arrow {
top: $grid-unit-size;
}
}
> .ant-collapse-content {
@ -281,10 +293,10 @@
.cvat-objects-sidebar-label-item {
height: 2.5em;
border-bottom: 1px solid $border-color-2;
border-bottom: 1px solid $border-color-1;
padding: 5px;
i {
span {
@extend .cvat-object-sidebar-icon;
}

58
cvat-ui/src/components/annotation-page/standard-workspace/styles.scss
Unescape Escape View File

@ -8,10 +8,6 @@
height: 100%;
}
.cvat-objects-sidebar-filter-input {
width: calc(100% - 35px);
}
.cvat-objects-sidebar-sider {
top: 0;
right: 0;
@ -34,26 +30,38 @@
.cvat-canvas-controls-sidebar {
background-color: $background-color-2;
border-right: 1px solid $border-color-1;
}
> div {
> i {
border-radius: 3.3px;
transform: scale(0.65);
padding: 2px;
&:hover {
background: $header-color;
transform: scale(0.75);
}
.cvat-cursor-control,
.cvat-move-control,
.cvat-rotate-canvas-control,
.cvat-fit-control,
.cvat-resize-control,
.cvat-draw-rectangle-control,
.cvat-draw-polygon-control,
.cvat-draw-polyline-control,
.cvat-draw-points-control,
.cvat-draw-cuboid-control,
.cvat-setup-tag-control,
.cvat-merge-control,
.cvat-group-control,
.cvat-split-track-control,
.cvat-issue-control {
border-radius: 3.3px;
transform: scale(0.65);
padding: 2px;
&:active {
transform: scale(0.65);
}
&:hover {
background: $header-color;
transform: scale(0.75);
}
> svg {
transform: scale(0.8);
}
}
&:active {
transform: scale(0.65);
}
> svg {
transform: scale(0.8);
}
}
@ -76,13 +84,15 @@
}
}
.cvat-rotate-canvas-controls > .ant-popover-content > .ant-popover-inner > div > .ant-popover-inner-content {
padding: 0;
.cvat-rotate-canvas-controls {
.ant-popover-inner-content {
padding: 0;
}
}
.cvat-draw-shape-popover,
.cvat-tools-control-popover {
> .ant-popover-content > .ant-popover-inner > div > .ant-popover-inner-content {
.ant-popover-inner-content {
padding: 0;
}
}

16
cvat-ui/src/components/annotation-page/styles.scss
Unescape Escape View File

@ -6,6 +6,7 @@
.cvat-annotation-page.ant-layout {
height: 100%;
overflow: hidden;
}
.ant-layout-header.cvat-annotation-header {
@ -37,21 +38,21 @@
align-items: center;
margin: 0 3px;
> span {
> span:not([role='img']) {
margin-left: 0;
font-size: 10px;
}
> i {
> span[role='img'] {
transform: scale(0.8);
padding: 3px;
}
&:hover > i {
&:hover > span[role='img'] {
transform: scale(0.85);
}
&:active > i {
&:active > span[role='img'] {
transform: scale(0.8);
}
@ -80,7 +81,7 @@
height: 100%;
margin-right: 10px;
> i {
> span {
font-size: 25px;
margin: 0 7px;
color: $player-buttons-color;
@ -96,18 +97,17 @@
}
.cvat-player-controls {
position: relative;
height: 100%;
line-height: 27px;
> div {
position: relative;
height: 50%;
}
}
.cvat-player-slider {
width: 350px;
margin: 0;
> .ant-slider-rail {
background-color: $player-slider-color;
@ -266,7 +266,7 @@
}
}
> i {
> span[role='img'] {
opacity: 0.7;
color: $objects-bar-icons-color;

2
cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss
Unescape Escape View File

@ -12,7 +12,7 @@
background: $background-color-2;
padding: 5px;
> div > .ant-row-flex > .ant-col > .ant-tag {
> div > .ant-row > .ant-col > .ant-tag {
margin: 4px;
}
}

1
cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/shortcuts-select.tsx
Unescape Escape View File

@ -98,7 +98,6 @@ const ShortcutsSelect = (props: Props): JSX.Element => {
onChange={(value: string) => {
onChangeShortcutLabel(value, Number.parseInt(id, 10));
}}
size='default'
style={{ width: 200 }}
className='cvat-tag-annotation-label-select'
>

16
cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx
Unescape Escape View File

@ -207,19 +207,15 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
ant-layout-sider-zero-width-trigger-left`}
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
>
{sidebarCollapsed ? (
<MenuFoldOutlined title='Show' />
) : (
<MenuUnfoldOutlined title='Hide' />
)}
{sidebarCollapsed ? <MenuFoldOutlined title='Show' /> : <MenuUnfoldOutlined title='Hide' />}
</span>
<Row type='flex' justify='start' className='cvat-tag-annotation-sidebar-label-select'>
<Row justify='start' className='cvat-tag-annotation-sidebar-label-select'>
<Col>
<Text strong>Tag label</Text>
<LabelSelector labels={labels} value={selectedLabelID} onChange={onChangeLabel} />
</Col>
</Row>
<Row type='flex' justify='space-around' className='cvat-tag-annotation-sidebar-buttons'>
<Row justify='space-around' className='cvat-tag-annotation-sidebar-buttons'>
<Col span={8}>
<Button onClick={() => onAddTag(selectedLabelID)}>Add tag</Button>
</Col>
@ -227,7 +223,7 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
<Button onClick={onChangeFrame}>Skip frame</Button>
</Col>
</Row>
<Row type='flex' className='cvat-tag-annotation-sidebar-checkbox-skip-frame'>
<Row className='cvat-tag-annotation-sidebar-checkbox-skip-frame'>
<Col>
<Checkbox
checked={skipFrame}
@ -239,7 +235,7 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
</Checkbox>
</Col>
</Row>
<Row type='flex' justify='start' className='cvat-tag-annotation-sidebar-frame-tags'>
<Row justify='start' className='cvat-tag-annotation-sidebar-frame-tags'>
<Col>
<Text strong>Frame tags:&nbsp;</Text>
{frameTags.map((tag: any) => (
@ -262,7 +258,7 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
<ShortcutsSelect onAddTag={onAddTag} />
</Col>
</Row>
<Row type='flex' justify='center' className='cvat-tag-annotation-sidebar-shortcut-help'>
<Row justify='center' className='cvat-tag-annotation-sidebar-shortcut-help'>
<Col>
<Text>
Use&nbsp;

2
cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx
Unescape Escape View File

@ -5,7 +5,7 @@
import React from 'react';
import { Col } from 'antd/lib/grid';
import Icon from '@ant-design/icons'
import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import Popover from 'antd/lib/popover';

6
cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx
Unescape Escape View File

@ -50,7 +50,7 @@ function PlayerNavigation(props: Props): JSX.Element {
return (
<>
<Col className='cvat-player-controls'>
<Row type='flex'>
<Row align='bottom'>
<Col>
<Slider
className='cvat-player-slider'
@ -61,7 +61,7 @@ function PlayerNavigation(props: Props): JSX.Element {
/>
</Col>
</Row>
<Row type='flex' justify='center'>
<Row justify='center'>
<Col className='cvat-player-filename-wrapper'>
<Tooltip title={frameFilename} mouseLeaveDelay={0}>
<Text type='secondary'>{frameFilename}</Text>
@ -82,7 +82,7 @@ function PlayerNavigation(props: Props): JSX.Element {
type='number'
value={frameInputValue}
onChange={(value: number | undefined | string) => {
if (typeof (value) !== 'undefined') {
if (typeof value !== 'undefined') {
setFrameInputValue(Math.floor(clamp(+value, startFrame, stopFrame)));
}
}}

8
cvat-ui/src/components/annotation-page/top-bar/statistics-modal.tsx
Unescape Escape View File

@ -133,12 +133,12 @@ export default function StatisticsModalComponent(props: Props): JSX.Element {
return (
<Modal {...baseProps}>
<div className='cvat-job-info-modal-window'>
<Row type='flex' justify='start'>
<Row justify='start'>
<Col>
<Text className='cvat-text'>Overview</Text>
</Col>
</Row>
<Row type='flex' justify='start'>
<Row justify='start'>
<Col span={4}>
<Text strong className='cvat-text'>
Assignee
@ -171,7 +171,7 @@ export default function StatisticsModalComponent(props: Props): JSX.Element {
</Col>
</Row>
{!!bugTracker && (
<Row type='flex' justify='start' className='cvat-job-info-bug-tracker'>
<Row justify='start' className='cvat-job-info-bug-tracker'>
<Col>
<Text strong className='cvat-text'>
Bug tracker
@ -180,7 +180,7 @@ export default function StatisticsModalComponent(props: Props): JSX.Element {
</Col>
</Row>
)}
<Row type='flex' justify='space-around' className='cvat-job-info-statistics'>
<Row justify='space-around' className='cvat-job-info-statistics'>
<Col span={24}>
<Text className='cvat-text'>Annotations statistics</Text>
<Table scroll={{ y: 400 }} bordered pagination={false} columns={columns} dataSource={rows} />

4
cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx
Unescape Escape View File

@ -99,7 +99,7 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
} = props;
return (
<Row type='flex' justify='space-between'>
<Row justify='space-between'>
<LeftGroup
saving={saving}
savingStatuses={savingStatuses}
@ -113,7 +113,7 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
onRedoClick={onRedoClick}
/>
<Col className='cvat-annotation-header-player-group'>
<Row type='flex' align='middle'>
<Row align='middle'>
<PlayerButtons
playing={playing}
playPauseShortcut={playPauseShortcut}

2
cvat-ui/src/components/create-project-page/create-project-content.tsx
Unescape Escape View File

@ -116,7 +116,7 @@ export default function CreateProjectContent(): JSX.Element {
};
return (
<Row type='flex' justify='start' align='middle' className='cvat-create-project-content'>
<Row justify='start' align='middle' className='cvat-create-project-content'>
<Col span={24}>
<NameConfigurationForm formRef={nameFormRef} />
</Col>

2
cvat-ui/src/components/create-project-page/create-project-page.tsx
Unescape Escape View File

@ -11,7 +11,7 @@ import CreateProjectContent from './create-project-content';
export default function CreateProjectPageComponent(): JSX.Element {
return (
<Row type='flex' justify='center' align='top' className='cvat-create-task-form-wrapper'>
<Row justify='center' align='top' className='cvat-create-task-form-wrapper'>
<Col md={20} lg={16} xl={14} xxl={9}>
<Text className='cvat-title'>Create a new project</Text>
<CreateProjectContent />

83
cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx
Unescape Escape View File

@ -69,8 +69,9 @@ function validateRepository(_: RuleObject, value: string): Promise<[void, void]>
return Promise.resolve();
}
const isInteger = ({ min, max }: { min?: number, max?: number }) => (
_: RuleObject, value?: number | string,
const isInteger = ({ min, max }: { min?: number; max?: number }) => (
_: RuleObject,
value?: number | string,
): Promise<void> => {
if (typeof value === 'undefined' || value === '') {
return Promise.resolve();
@ -134,17 +135,20 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
const { onSubmit } = this.props;
if (this.formRef.current) {
this.formRef.current.resetFields();
return this.formRef.current.validateFields().then((values: Store): Promise<void> => {
const frameFilter = values.frameStep ? `step=${values.frameStep}` : undefined;
const entries = Object.entries(values)
.filter((entry: [string, unknown]): boolean => entry[0] !== frameFilter);
onSubmit({
...Object.fromEntries(entries) as any as AdvancedConfiguration,
frameFilter,
});
return Promise.resolve();
});
return this.formRef.current.validateFields().then(
(values: Store): Promise<void> => {
const frameFilter = values.frameStep ? `step=${values.frameStep}` : undefined;
const entries = Object.entries(values).filter(
(entry: [string, unknown]): boolean => entry[0] !== frameFilter,
);
onSubmit({
...((Object.fromEntries(entries) as any) as AdvancedConfiguration),
frameFilter,
});
return Promise.resolve();
},
);
}
return Promise.reject(new Error('Form ref is empty'));
@ -185,13 +189,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
{ validator: isInteger({ min: 5, max: 100 }) },
]}
>
<Input
size='large'
type='number'
min={5}
max={100}
suffix={<PercentageOutlined />}
/>
<Input size='large' type='number' min={5} max={100} suffix={<PercentageOutlined />} />
</Form.Item>
</Tooltip>
);
@ -215,11 +213,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
private renderSegmentSize(): JSX.Element {
return (
<Tooltip title='Defines a number of frames in a segment' mouseLeaveDelay={0}>
<Form.Item
label='Segment size'
name='segmentSize'
rules={[{ validator: isInteger({ min: 1 }) }]}
>
<Form.Item label='Segment size' name='segmentSize' rules={[{ validator: isInteger({ min: 1 }) }]}>
<Input size='large' type='number' min={1} />
</Form.Item>
</Tooltip>
@ -228,11 +222,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
private renderStartFrame(): JSX.Element {
return (
<Form.Item
label='Start frame'
name='startFrame'
rules={[{ validator: isInteger({ min: 0 }) }]}
>
<Form.Item label='Start frame' name='startFrame' rules={[{ validator: isInteger({ min: 0 }) }]}>
<Input size='large' type='number' min={0} step={1} />
</Form.Item>
);
@ -253,11 +243,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
private renderFrameStep(): JSX.Element {
return (
<Form.Item
label='Frame step'
name='frameStep'
rules={[{ validator: isInteger({ min: 1 }) }]}
>
<Form.Item label='Frame step' name='frameStep' rules={[{ validator: isInteger({ min: 1 }) }]}>
<Input size='large' type='number' min={1} step={1} />
</Form.Item>
);
@ -286,10 +272,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
extra='Attach a repository to store annotations there'
rules={[{ validator: validateRepository }]}
>
<Input
size='large'
placeholder='e.g. https//github.com/user/repos [annotation/<anno_file_name>.zip]'
/>
<Input size='large' placeholder='e.g. https//github.com/user/repos [annotation/<anno_file_name>.zip]' />
</Form.Item>
);
}
@ -337,11 +320,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
private renderCreateTaskMethod(): JSX.Element {
return (
<Form.Item
help='Using cache to store data.'
name='useCache'
valuePropName='checked'
>
<Form.Item help='Using cache to store data.' name='useCache' valuePropName='checked'>
<Checkbox>
<Text className='cvat-text-color'>Use cache</Text>
</Checkbox>
@ -370,11 +349,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
)}
mouseLeaveDelay={0}
>
<Form.Item
label='Chunk size'
name='dataChunkSize'
rules={[{ validator: isInteger({ min: 1 }) }]}
>
<Form.Item label='Chunk size' name='dataChunkSize' rules={[{ validator: isInteger({ min: 1 }) }]}>
<Input size='large' type='number' />
</Form.Item>
</Tooltip>
@ -387,9 +362,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
<Form initialValues={initialValues} ref={this.formRef} layout='vertical'>
{activeFileManagerTab === 'share' ? (
<Row>
<Col>
{ this.renderCopyDataChechbox() }
</Col>
<Col>{this.renderCopyDataChechbox()}</Col>
</Row>
) : null}
<Row>
@ -398,7 +371,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
<Row>
<Col>{this.renderCreateTaskMethod()}</Col>
</Row>
<Row type='flex' justify='start'>
<Row justify='start'>
<Col span={7}>{this.renderImageQuality()}</Col>
<Col span={7} offset={1}>
{this.renderOverlap()}
@ -408,7 +381,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
</Col>
</Row>
<Row type='flex' justify='start'>
<Row justify='start'>
<Col span={7}>{this.renderStartFrame()}</Col>
<Col span={7} offset={1}>
{this.renderStopFrame()}
@ -418,7 +391,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
</Col>
</Row>
<Row type='flex' justify='start'>
<Row justify='start'>
<Col span={7}>{this.renderChunkSize()}</Col>
</Row>

2
cvat-ui/src/components/create-task-page/create-task-page.tsx
Unescape Escape View File

@ -69,7 +69,7 @@ export default function CreateTaskPage(props: Props): JSX.Element {
}, [error]);
return (
<Row type='flex' justify='center' align='top' className='cvat-create-task-form-wrapper'>
<Row justify='center' align='top' className='cvat-create-task-form-wrapper'>
<Col md={20} lg={16} xl={14} xxl={9}>
<Text className='cvat-title'>Create a new task</Text>
<CreateTaskContent

2
cvat-ui/src/components/feedback/feedback.tsx
Unescape Escape View File

@ -109,7 +109,7 @@ export default function Feedback(): JSX.Element {
visible={visible}
>
<Button
style={{ color: '#ff4d4f' }}
style={visible ? { color: '#ff4d4f' } : {}}
className='cvat-feedback-button'
type='link'
onClick={(): void => {

2
cvat-ui/src/components/feedback/styles.scss
Unescape Escape View File

@ -9,7 +9,7 @@
padding: 0;
height: auto;
> i {
> span[role='img'] {
font-size: 40px;
}
}

32
cvat-ui/src/components/file-manager/file-manager.tsx
Unescape Escape View File

@ -3,14 +3,16 @@
// SPDX-License-Identifier: MIT
import './styles.scss';
import React from 'react';
import React, { ReactText } from 'react';
import Tabs from 'antd/lib/tabs';
import Input from 'antd/lib/input';
import Text from 'antd/lib/typography/Text';
import Paragraph from 'antd/lib/typography/Paragraph';
import Upload, { RcFile } from 'antd/lib/upload';
import Empty from 'antd/lib/empty';
import Tree, { AntTreeNode, TreeNodeNormal } from 'antd/lib/tree/Tree';
import Tree, { TreeNodeNormal } from 'antd/lib/tree/Tree';
// eslint-disable-next-line import/no-extraneous-dependencies
import { EventDataNode } from 'rc-tree/lib/interface';
import { InboxOutlined } from '@ant-design/icons';
import consts from 'consts';
@ -124,17 +126,18 @@ export default class FileManager extends React.PureComponent<Props, State> {
private renderShareSelector(): JSX.Element {
function renderTreeNodes(data: TreeNodeNormal[]): JSX.Element[] {
// sort alphabetically
data.sort((a: TreeNodeNormal, b: TreeNodeNormal): number => a.key.localeCompare(b.key));
data.sort((a: TreeNodeNormal, b: TreeNodeNormal): number =>
a.key.toLocaleString().localeCompare(b.key.toLocaleString()));
return data.map((item: TreeNodeNormal) => {
if (item.children) {
return (
<Tree.TreeNode title={item.title} key={item.key} dataRef={item} isLeaf={item.isLeaf}>
<Tree.TreeNode title={item.title} key={item.key} data={item} isLeaf={item.isLeaf}>
{renderTreeNodes(item.children)}
</Tree.TreeNode>
);
}
return <Tree.TreeNode key={item.key} {...item} dataRef={item} />;
return <Tree.TreeNode {...item} key={item.key} data={item} />;
});
}
@ -153,21 +156,22 @@ export default class FileManager extends React.PureComponent<Props, State> {
checkStrictly={false}
expandedKeys={expandedKeys}
checkedKeys={files.share}
loadData={(node: AntTreeNode): Promise<void> => this.loadData(node.props.dataRef.key)}
onExpand={(newExpandedKeys: string[]): void => {
loadData={(event: EventDataNode): Promise<void> => this.loadData(event.key.toLocaleString())}
onExpand={(newExpandedKeys: ReactText[]): void => {
this.setState({
expandedKeys: newExpandedKeys,
expandedKeys: newExpandedKeys.map((text: ReactText): string => text.toLocaleString()),
});
}}
onCheck={(
checkedKeys:
| string[]
| {
checked: string[];
halfChecked: string[];
},
| ReactText[]
| {
checked: ReactText[];
halfChecked: ReactText[];
},
): void => {
const keys = checkedKeys as string[];
const keys = (checkedKeys as ReactText[]).map((text: ReactText): string =>
text.toLocaleString());
this.setState({
files: {
...files,

7
cvat-ui/src/components/global-error-boundary/global-error-boundary.tsx
Unescape Escape View File

@ -100,7 +100,9 @@ class GlobalErrorBoundary extends React.PureComponent<Props, State> {
}
public render(): React.ReactNode {
const { restore, job, serverVersion, coreVersion, canvasVersion, uiVersion } = this.props;
const {
restore, job, serverVersion, coreVersion, canvasVersion, uiVersion,
} = this.props;
const { hasError, error } = this.state;
@ -152,7 +154,8 @@ class GlobalErrorBoundary extends React.PureComponent<Props, State> {
}}
>
{' '}
Copy{' '}
Copy
{' '}
</a>
</Tooltip>
the error message to clipboard

16
cvat-ui/src/components/header/header.tsx
Unescape Escape View File

@ -8,9 +8,15 @@ import { connect } from 'react-redux';
import { useHistory } from 'react-router';
import { Row, Col } from 'antd/lib/grid';
import Icon, {
ContactsOutlined, SettingOutlined, InfoCircleOutlined, EditOutlined,
LoadingOutlined, LogoutOutlined, GithubOutlined,
QuestionCircleOutlined, CaretDownOutlined,
SettingOutlined,
InfoCircleOutlined,
EditOutlined,
LoadingOutlined,
LogoutOutlined,
GithubOutlined,
QuestionCircleOutlined,
CaretDownOutlined,
ControlOutlined,
} from '@ant-design/icons';
import Layout from 'antd/lib/layout';
import Button from 'antd/lib/button';
@ -169,7 +175,7 @@ function HeaderContainer(props: Props): JSX.Element {
<Text strong>UI version:</Text>
<Text type='secondary'>{` ${tool.ui.version}`}</Text>
</p>
<Row type='flex' justify='space-around'>
<Row justify='space-around'>
<Col>
<a href={CHANGELOG_URL} target='_blank' rel='noopener noreferrer'>
What&apos;s new?
@ -212,7 +218,7 @@ function HeaderContainer(props: Props): JSX.Element {
window.open(`${tool.server.host}/admin`, '_blank');
}}
>
<ContactsOutlined />
<ControlOutlined />
Admin page
</Menu.Item>
)}

42
cvat-ui/src/components/header/settings-modal/player-settings.tsx
Unescape Escape View File

@ -82,7 +82,7 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
return (
<div className='cvat-player-settings'>
<Row type='flex' align='bottom' className='cvat-player-settings-step'>
<Row align='bottom' className='cvat-player-settings-step'>
<Col>
<Text className='cvat-text-color'> Player step </Text>
<InputNumber
@ -105,7 +105,7 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
</Text>
</Col>
</Row>
<Row type='flex' align='middle' className='cvat-player-settings-speed'>
<Row align='middle' className='cvat-player-settings-speed'>
<Col>
<Text className='cvat-text-color'> Player speed </Text>
<Select
@ -135,7 +135,7 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
</Select>
</Col>
</Row>
<Row type='flex' className='cvat-player-settings-canvas-background'>
<Row className='cvat-player-settings-canvas-background'>
<Col>
<Popover
content={(
@ -152,7 +152,7 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
</Popover>
</Col>
</Row>
<Row type='flex'>
<Row>
<Col>
<Checkbox
className='cvat-text-color cvat-player-settings-grid'
@ -165,7 +165,7 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
</Checkbox>
</Col>
</Row>
<Row type='flex' justify='space-between'>
<Row justify='space-between'>
<Col span={8} className='cvat-player-settings-grid-size'>
<Text className='cvat-text-color'> Grid size </Text>
<InputNumber
@ -223,10 +223,10 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
<Text className='cvat-text-color'>{`${gridOpacity} %`}</Text>
</Col>
</Row>
<Row type='flex' justify='start'>
<Col>
<Row justify='start'>
<Col span={7}>
<Row className='cvat-player-settings-reset-zoom'>
<Col className='cvat-player-settings-reset-zoom-checkbox'>
<Col span={24} className='cvat-player-settings-reset-zoom-checkbox'>
<Checkbox
className='cvat-text-color'
checked={resetZoom}
@ -237,14 +237,14 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
Reset zoom
</Checkbox>
</Col>
<Col>
<Col span={24}>
<Text type='secondary'> Fit image after changing frame </Text>
</Col>
</Row>
</Col>
<Col offset={5}>
<Col span={7} offset={5}>
<Row className='cvat-player-settings-rotate-all'>
<Col className='cvat-player-settings-rotate-all-checkbox'>
<Col span={24} className='cvat-player-settings-rotate-all-checkbox'>
<Checkbox
className='cvat-text-color'
checked={rotateAll}
@ -255,7 +255,7 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
Rotate all images
</Checkbox>
</Col>
<Col>
<Col span={24}>
<Text type='secondary'> Rotate all images simultaneously </Text>
</Col>
</Row>
@ -264,8 +264,10 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
<Row>
<Col span={12}>
<Row className='cvat-player-settings-brightness'>
<Col className='cvat-text-color'>Brightness</Col>
<Col>
<Col span={24} className='cvat-text-color'>
Brightness
</Col>
<Col span={24}>
<Slider
min={50}
max={200}
@ -277,8 +279,10 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
</Col>
</Row>
<Row className='cvat-player-settings-contrast'>
<Col className='cvat-text-color'>Contrast</Col>
<Col>
<Col span={24} className='cvat-text-color'>
Contrast
</Col>
<Col span={24}>
<Slider
min={50}
max={200}
@ -290,8 +294,10 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
</Col>
</Row>
<Row className='cvat-player-settings-saturation'>
<Col className='cvat-text-color'>Saturation</Col>
<Col>
<Col span={24} className='cvat-text-color'>
Saturation
</Col>
<Col span={24}>
<Slider
min={0}
max={300}

6
cvat-ui/src/components/header/settings-modal/styles.scss
Unescape Escape View File

@ -55,6 +55,10 @@
justify-items: start;
}
.cvat-player-settings-grid-size-input {
height: fit-content;
}
.cvat-player-settings-grid-color {
> .ant-select {
width: 150px;
@ -75,7 +79,7 @@
}
}
.cvat-player-settings-step > div > span > i {
.cvat-player-settings-step > div > span > span[role='img'] {
margin: 0 5px;
font-size: 10px;
}

16
cvat-ui/src/components/header/settings-modal/workspace-settings.tsx
Unescape Escape View File

@ -49,7 +49,7 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
return (
<div className='cvat-workspace-settings'>
<Row type='flex'>
<Row>
<Col>
<Checkbox
className='cvat-text-color cvat-workspace-settings-auto-save'
@ -62,7 +62,7 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
</Checkbox>
</Col>
</Row>
<Row type='flex'>
<Row>
<Col className='cvat-workspace-settings-auto-save-interval'>
<Text type='secondary'> Auto save every </Text>
<InputNumber
@ -82,7 +82,7 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
</Col>
</Row>
<Row className='cvat-workspace-settings-show-interpolated'>
<Col>
<Col span={24}>
<Checkbox
className='cvat-text-color'
checked={showAllInterpolationTracks}
@ -93,12 +93,12 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
Show all interpolation tracks
</Checkbox>
</Col>
<Col>
<Col span={24}>
<Text type='secondary'> Show hidden interpolated objects in the side panel </Text>
</Col>
</Row>
<Row className='cvat-workspace-settings-show-text-always'>
<Col>
<Col span={24}>
<Checkbox
className='cvat-text-color'
checked={showObjectsTextAlways}
@ -109,7 +109,7 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
Always show object details
</Checkbox>
</Col>
<Col>
<Col span={24}>
<Text type='secondary'>
{' '}
Show text for an object on the canvas not only when the object is activated
@ -118,7 +118,7 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
</Col>
</Row>
<Row className='cvat-workspace-settings-autoborders'>
<Col>
<Col span={24}>
<Checkbox
className='cvat-text-color'
checked={automaticBordering}
@ -129,7 +129,7 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
Automatic bordering
</Checkbox>
</Col>
<Col>
<Col span={24}>
<Text type='secondary'>
{' '}
Enable automatic bordering for polygons and polylines during drawing/editing

12
cvat-ui/src/components/labels-editor/raw-viewer.tsx
Unescape Escape View File

@ -10,7 +10,9 @@ import Tooltip from 'antd/lib/tooltip';
import Form, { FormInstance, RuleObject } from 'antd/lib/form';
import { Store } from 'antd/lib/form/interface';
import { Label, Attribute, validateParsedLabel, idGenerator } from './common';
import {
Label, Attribute, validateParsedLabel, idGenerator,
} from './common';
function validateLabels(_: RuleObject, value: string): Promise<void> {
try {
@ -80,14 +82,10 @@ export default class RawViewer extends React.PureComponent<Props> {
const textLabels = JSON.stringify(convertedLabels, null, 2);
return (
<Form layout='vertical' onFinish={this.handleSubmit} ref={this.formRef}>
<Form.Item
name='labels'
initialValue={textLabels}
rules={[{ validator: validateLabels }]}
>
<Form.Item name='labels' initialValue={textLabels} rules={[{ validator: validateLabels }]}>
<Input.TextArea rows={5} className='cvat-raw-labels-viewer' />
</Form.Item>
<Row type='flex' justify='start' align='middle'>
<Row justify='start' align='middle'>
<Col>
<Tooltip title='Save labels and return' mouseLeaveDelay={0}>
<Button style={{ width: '150px' }} type='primary' htmlType='submit'>

4
cvat-ui/src/components/labels-editor/styles.scss
Unescape Escape View File

@ -51,7 +51,7 @@ textarea.ant-input.cvat-raw-labels-viewer {
margin-left: 5px;
color: white;
> i:hover {
> span[role='img']:hover {
filter: invert(1);
}
}
@ -84,7 +84,7 @@ textarea.ant-input.cvat-raw-labels-viewer {
display: contents;
}
.cvat-delete-attribute-button:hover > i {
.cvat-delete-attribute-button:hover > span[role='img'] {
color: $danger-icon-color;
}

6
cvat-ui/src/components/login-page/login-page.tsx
Unescape Escape View File

@ -31,7 +31,7 @@ function LoginPageComponent(props: LoginPageComponentProps & RouteComponentProps
return (
<>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col {...sizes}>
<Title level={2}> Login </Title>
<LoginForm
@ -40,7 +40,7 @@ function LoginPageComponent(props: LoginPageComponentProps & RouteComponentProps
onLogin(loginData.username, loginData.password);
}}
/>
<Row type='flex' justify='start' align='top'>
<Row justify='start' align='top'>
<Col>
<Text strong>
New to CVAT? Create
@ -49,7 +49,7 @@ function LoginPageComponent(props: LoginPageComponentProps & RouteComponentProps
</Col>
</Row>
{renderResetPassword && (
<Row type='flex' justify='start' align='top'>
<Row justify='start' align='top'>
<Col>
<Text strong>
<Link to='/auth/password/reset'>Forgot your password?</Link>

46
cvat-ui/src/components/model-runner-modal/detector-runner.tsx
Unescape Escape View File

@ -111,7 +111,9 @@ function DetectorRunner(props: Props): JSX.Element {
>
{labels.map(
(label: string): JSX.Element => (
<Select.Option value={label} key={label}>{label}</Select.Option>
<Select.Option value={label} key={label}>
{label}
</Select.Option>
),
)}
</Select>
@ -121,7 +123,7 @@ function DetectorRunner(props: Props): JSX.Element {
return (
<div className='cvat-run-model-content'>
<Row type='flex' align='middle'>
<Row align='middle'>
<Col span={4}>Model:</Col>
<Col span={20}>
<Select
@ -143,7 +145,9 @@ function DetectorRunner(props: Props): JSX.Element {
>
{models.map(
(_model: Model): JSX.Element => (
<Select.Option value={_model.id} key={_model.id}>{_model.name}</Select.Option>
<Select.Option value={_model.id} key={_model.id}>
{_model.name}
</Select.Option>
),
)}
</Select>
@ -155,7 +159,7 @@ function DetectorRunner(props: Props): JSX.Element {
const label = task.labels.filter((_label: any): boolean => _label.name === mapping[modelLabel])[0];
const color = label ? label.color : consts.NEW_LABEL_COLOR;
return (
<Row key={modelLabel} type='flex' justify='start' align='middle'>
<Row key={modelLabel} justify='start' align='middle'>
<Col span={10}>
<Tag color={color}>{modelLabel}</Tag>
</Col>
@ -179,22 +183,14 @@ function DetectorRunner(props: Props): JSX.Element {
})}
{isDetector && !!taskLabels.length && !!modelLabels.length && (
<>
<Row type='flex' justify='start' align='middle'>
<Row justify='start' align='middle'>
<Col span={10}>
{renderSelector(
match.model || '',
'Model labels',
modelLabels,
(modelLabel: string) => updateMatch(modelLabel, null),
)}
{renderSelector(match.model || '', 'Model labels', modelLabels, (modelLabel: string) =>
updateMatch(modelLabel, null))}
</Col>
<Col span={10} offset={1}>
{renderSelector(
match.task || '',
'Task labels',
taskLabels,
(taskLabel: string) => updateMatch(null, taskLabel),
)}
{renderSelector(match.task || '', 'Task labels', taskLabels, (taskLabel: string) =>
updateMatch(null, taskLabel))}
</Col>
<Col span={1} offset={1}>
<Tooltip
@ -219,7 +215,7 @@ function DetectorRunner(props: Props): JSX.Element {
)}
{isReId && (
<div>
<Row type='flex' align='middle' justify='start'>
<Row align='middle' justify='start'>
<Col>
<Text>Threshold</Text>
</Col>
@ -239,7 +235,7 @@ function DetectorRunner(props: Props): JSX.Element {
</Tooltip>
</Col>
</Row>
<Row type='flex' align='middle' justify='start'>
<Row align='middle' justify='start'>
<Col>
<Text>Maximum distance</Text>
</Col>
@ -260,7 +256,7 @@ function DetectorRunner(props: Props): JSX.Element {
</Row>
</div>
)}
<Row type='flex' align='middle' justify='end'>
<Row align='middle' justify='end'>
<Col>
<Button
disabled={!buttonEnabled}
@ -269,10 +265,12 @@ function DetectorRunner(props: Props): JSX.Element {
runInference(
task,
model,
model.type === 'detector' ? { mapping, cleanup } : {
threshold,
max_distance: distance,
},
model.type === 'detector' ?
{ mapping, cleanup } :
{
threshold,
max_distance: distance,
},
);
}}
>

4
cvat-ui/src/components/model-runner-modal/model-runner-dialog.tsx
Unescape Escape View File

@ -48,7 +48,9 @@ function mapDispatchToProps(dispatch: ThunkDispatch): DispatchToProps {
}
function ModelRunnerDialog(props: StateToProps & DispatchToProps): JSX.Element {
const { reid, detectors, task, visible, runInference, closeDialog } = props;
const {
reid, detectors, task, visible, runInference, closeDialog,
} = props;
const models = [...reid, ...detectors];

6
cvat-ui/src/components/models-page/deployed-model-item.tsx
Unescape Escape View File

@ -17,7 +17,7 @@ export default function DeployedModelItem(props: Props): JSX.Element {
const { model } = props;
return (
<Row className='cvat-models-list-item' type='flex'>
<Row className='cvat-models-list-item'>
<Col span={3}>
<Tag color='purple'>{model.framework}</Tag>
</Col>
@ -34,7 +34,9 @@ export default function DeployedModelItem(props: Props): JSX.Element {
<Select showSearch placeholder='Supported labels' style={{ width: '90%' }} value='Supported labels'>
{model.labels.map(
(label): JSX.Element => (
<Select.Option key={label}>{label}</Select.Option>
<Select.Option value={label} key={label}>
{label}
</Select.Option>
),
)}
</Select>

4
cvat-ui/src/components/models-page/deployed-models-list.tsx
Unescape Escape View File

@ -20,9 +20,9 @@ export default function DeployedModelsListComponent(props: Props): JSX.Element {
return (
<>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col md={22} lg={18} xl={16} xxl={14} className='cvat-models-list'>
<Row type='flex' align='middle' style={{ padding: '10px' }}>
<Row align='middle' style={{ padding: '10px' }}>
<Col span={3}>
<Text strong>Framework</Text>
</Col>

8
cvat-ui/src/components/models-page/empty-list.tsx
Unescape Escape View File

@ -13,22 +13,22 @@ import { EmptyTasksIcon as EmptyModelsIcon } from 'icons';
export default function EmptyListComponent(): JSX.Element {
return (
<div className='cvat-empty-models-list'>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col>
<Icon className='cvat-empty-models-icon' component={EmptyModelsIcon} />
</Col>
</Row>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col>
<Text strong>No models deployed yet...</Text>
</Col>
</Row>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col>
<Text type='secondary'>To annotate your tasks automatically</Text>
</Col>
</Row>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col>
<Text type='secondary'>deploy a model with </Text>
<a href={`${consts.NUCLIO_GUIDE}`}>nuclio</a>

2
cvat-ui/src/components/models-page/top-bar.tsx
Unescape Escape View File

@ -8,7 +8,7 @@ import Text from 'antd/lib/typography/Text';
export default function TopBarComponent(): JSX.Element {
return (
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col md={22} lg={20} xl={16} xxl={14}>
<Text className='cvat-title'>Models</Text>
</Col>

2
cvat-ui/src/components/project-page/details.tsx
Unescape Escape View File

@ -47,7 +47,7 @@ export default function DetailsComponent(props: DetailsComponentProps): JSX.Elem
</Title>
</Col>
</Row>
<Row type='flex' justify='space-between'>
<Row justify='space-between'>
<Col>
<Text type='secondary'>
{`Project #${project.id} created`}

6
cvat-ui/src/components/project-page/project-page.tsx
Unescape Escape View File

@ -11,6 +11,7 @@ import { Row, Col } from 'antd/lib/grid';
import Result from 'antd/lib/result';
import Button from 'antd/lib/button';
import Title from 'antd/lib/typography/Title';
import { PlusOutlined } from '@ant-design/icons';
import { CombinedState, Task } from 'reducers/interfaces';
import { getProjectsAsync } from 'actions/projects-actions';
@ -18,7 +19,6 @@ import { cancelInferenceAsync } from 'actions/models-actions';
import TaskItem from 'components/tasks-page/task-item';
import DetailsComponent from './details';
import ProjectTopBar from './top-bar';
import { PlusOutlined } from '@ant-design/icons';
interface ParamType {
id: string;
@ -67,11 +67,11 @@ export default function ProjectPageComponent(): JSX.Element {
}
return (
<Row type='flex' justify='center' align='top' className='cvat-project-page'>
<Row justify='center' align='top' className='cvat-project-page'>
<Col md={22} lg={18} xl={16} xxl={14}>
<ProjectTopBar projectInstance={project} />
<DetailsComponent project={project} />
<Row type='flex' justify='space-between' align='middle' className='cvat-project-page-tasks-bar'>
<Row justify='space-between' align='middle' className='cvat-project-page-tasks-bar'>
<Col>
<Title level={4}>Tasks</Title>
</Col>

4
cvat-ui/src/components/project-page/styles.scss
Unescape Escape View File

@ -13,11 +13,11 @@
margin: $grid-unit-size * 2 0;
background: $background-color-1;
.ant-row-flex:nth-child(1) {
.ant-row:nth-child(1) {
margin-bottom: $grid-unit-size * 2;
}
.ant-row-flex:nth-child(2) .ant-col:nth-child(2) > span {
.ant-row:nth-child(2) .ant-col:nth-child(2) > span {
margin-right: $grid-unit-size;
}

2
cvat-ui/src/components/project-page/top-bar.tsx
Unescape Escape View File

@ -24,7 +24,7 @@ export default function ProjectTopBar(props: DetailsComponentProps): JSX.Element
const history = useHistory();
return (
<Row className='cvat-task-top-bar' type='flex' justify='space-between' align='middle'>
<Row className='cvat-task-top-bar' justify='space-between' align='middle'>
<Col>
<Button onClick={() => history.push('/projects')} type='link' size='large'>
<LeftOutlined />

10
cvat-ui/src/components/projects-page/empty-list.tsx
Unescape Escape View File

@ -18,30 +18,30 @@ export default function EmptyListComponent(props: Props): JSX.Element {
const { notFound } = props;
return (
<div className='cvat-empty-projects-list'>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col>
<Icon className='cvat-empty-projects-icon' component={EmptyTasksIcon} />
</Col>
</Row>
{notFound ? (
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col>
<Text strong>No results matched your search...</Text>
</Col>
</Row>
) : (
<>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col>
<Text strong>No projects created yet ...</Text>
</Col>
</Row>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col>
<Text type='secondary'>To get started with your annotation project</Text>
</Col>
</Row>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col>
<Link to='/projects/create'>create a new one</Link>
</Col>

2
cvat-ui/src/components/projects-page/project-item.tsx
Unescape Escape View File

@ -12,10 +12,10 @@ import Card from 'antd/lib/card';
import Meta from 'antd/lib/card/Meta';
import Dropdown from 'antd/lib/dropdown';
import Button from 'antd/lib/button';
import { MoreOutlined } from '@ant-design/icons';
import { CombinedState, Project } from 'reducers/interfaces';
import ProjectActionsMenuComponent from './actions-menu';
import { MoreOutlined } from '@ant-design/icons';
interface Props {
projectInstance: Project;

4
cvat-ui/src/components/projects-page/project-list.tsx
Unescape Escape View File

@ -38,7 +38,7 @@ export default function ProjectListComponent(): JSX.Element {
return (
<>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col className='cvat-projects-list' md={22} lg={18} xl={16} xxl={14}>
{projectInstances.map(
(row: any[]): JSX.Element => (
@ -53,7 +53,7 @@ export default function ProjectListComponent(): JSX.Element {
)}
</Col>
</Row>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col md={22} lg={18} xl={16} xxl={14}>
<Pagination
className='cvat-projects-pagination'

11
cvat-ui/src/components/projects-page/projects-page.tsx
Unescape Escape View File

@ -47,20 +47,13 @@ export default function ProjectsPageComponent(): JSX.Element {
}, [gettingQuery]);
if (projectFetching) {
return (
<Spin size='large' className='cvat-spinner' />
);
return <Spin size='large' className='cvat-spinner' />;
}
return (
<div className='cvat-projects-page'>
<TopBarComponent />
{ projectsCount
? (
<ProjectListComponent />
) : (
<EmptyListComponent notFound={anySearchQuery} />
)}
{projectsCount ? <ProjectListComponent /> : <EmptyListComponent notFound={anySearchQuery} />}
<FeedbackComponent />
</div>
);

2
cvat-ui/src/components/projects-page/top-bar.tsx
Unescape Escape View File

@ -15,7 +15,7 @@ export default function TopBarComponent(): JSX.Element {
const history = useHistory();
return (
<Row type='flex' justify='center' align='middle' className='cvat-projects-top-bar'>
<Row justify='center' align='middle' className='cvat-projects-top-bar'>
<Col md={11} lg={9} xl={8} xxl={7}>
<Text className='cvat-title'>Projects</Text>
<SearchField />

4
cvat-ui/src/components/register-page/register-page.tsx
Unescape Escape View File

@ -41,7 +41,7 @@ function RegisterPageComponent(props: RegisterPageComponentProps & RouteComponen
return (
<>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col {...sizes}>
<Title level={2}> Create an account </Title>
<RegisterForm
@ -59,7 +59,7 @@ function RegisterPageComponent(props: RegisterPageComponentProps & RouteComponen
);
}}
/>
<Row type='flex' justify='start' align='top'>
<Row justify='start' align='top'>
<Col>
<Text strong>
Already have an account?

2
cvat-ui/src/components/reset-password-confirm-page/reset-password-confirm-page.tsx
Unescape Escape View File

@ -47,7 +47,7 @@ function ResetPasswordPagePageComponent(props: ResetPasswordConfirmPageComponent
const { fetching, onResetPasswordConfirm } = props;
return (
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col {...sizes}>
<Title level={2}> Change password </Title>
<ResetPasswordConfirmForm

4
cvat-ui/src/components/reset-password-page/reset-password-page.tsx
Unescape Escape View File

@ -48,7 +48,7 @@ function ResetPasswordPagePageComponent(props: ResetPasswordPageComponentProps):
const { fetching, onResetPassword } = props;
return (
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col {...sizes}>
<Title level={2}> Reset password </Title>
<ResetPasswordForm
@ -57,7 +57,7 @@ function ResetPasswordPagePageComponent(props: ResetPasswordPageComponentProps):
onResetPassword(resetPasswordData.email);
}}
/>
<Row type='flex' justify='start' align='top'>
<Row justify='start' align='top'>
<Col>
<Text strong>
Go to

46
cvat-ui/src/components/task-page/details.tsx
Unescape Escape View File

@ -16,11 +16,11 @@ import getCore from 'cvat-core-wrapper';
import { getReposData, syncRepos } from 'utils/git-utils';
import { ActiveInference } from 'reducers/interfaces';
import AutomaticAnnotationProgress from 'components/tasks-page/automatic-annotation-progress';
import Descriptions from 'antd/lib/descriptions';
import UserSelector, { User } from './user-selector';
import BugTrackerEditor from './bug-tracker-editor';
import LabelsEditorComponent from '../labels-editor/labels-editor';
const core = getCore();
interface Props {
@ -159,33 +159,11 @@ export default class DetailsComponent extends React.PureComponent<Props, State>
const { overlap, segmentSize, imageQuality } = taskInstance;
return (
<>
<Row type='flex' justify='start' align='middle'>
<Col span={12}>
<Text strong className='cvat-text-color'>
Overlap size
</Text>
<br />
<Text className='cvat-text-color'>{overlap}</Text>
</Col>
<Col span={12}>
<Text strong className='cvat-text-color'>
Segment size
</Text>
<br />
<Text className='cvat-text-color'>{segmentSize}</Text>
</Col>
</Row>
<Row type='flex' justify='space-between' align='middle'>
<Col span={12}>
<Text strong className='cvat-text-color'>
Image quality
</Text>
<br />
<Text className='cvat-text-color'>{imageQuality}</Text>
</Col>
</Row>
</>
<Descriptions className='cvat-task-parameters' bordered layout='vertical' size='small'>
<Descriptions.Item label='Overlap size'>{overlap}</Descriptions.Item>
<Descriptions.Item label='Segment size'>{segmentSize}</Descriptions.Item>
<Descriptions.Item label='Image quality'>{imageQuality}</Descriptions.Item>
</Descriptions>
);
}
@ -205,7 +183,7 @@ export default class DetailsComponent extends React.PureComponent<Props, State>
);
return (
<Row className='cvat-task-details-user-block' type='flex' justify='space-between' align='middle'>
<Row className='cvat-task-details-user-block' justify='space-between' align='middle'>
<Col span={12}>
{owner && (
<Text type='secondary'>{`Task #${taskInstance.id} Created by ${owner} on ${created}`}</Text>
@ -318,21 +296,21 @@ export default class DetailsComponent extends React.PureComponent<Props, State>
return (
<div className='cvat-task-details'>
<Row type='flex' justify='start' align='middle'>
<Row justify='start' align='middle'>
<Col>{this.renderTaskName()}</Col>
</Row>
<Row type='flex' justify='space-between' align='top'>
<Row justify='space-between' align='top'>
<Col md={8} lg={7} xl={7} xxl={6}>
<Row type='flex' justify='start' align='middle'>
<Row justify='start' align='middle'>
<Col span={24}>{this.renderPreview()}</Col>
</Row>
<Row>
<Col>{this.renderParameters()}</Col>
<Col span={24}>{this.renderParameters()}</Col>
</Row>
</Col>
<Col md={16} lg={17} xl={17} xxl={18}>
{this.renderDescription()}
<Row type='flex' justify='space-between' align='middle'>
<Row justify='space-between' align='middle'>
<Col span={12}>
<BugTrackerEditor
instance={taskInstance}

3
cvat-ui/src/components/task-page/job-list.tsx
Unescape Escape View File

@ -17,7 +17,6 @@ import copy from 'copy-to-clipboard';
import getCore from 'cvat-core-wrapper';
import UserSelector, { User } from './user-selector';
const core = getCore();
const baseURL = core.config.backendAPI.slice(0, -7);
@ -223,7 +222,7 @@ function JobListComponent(props: Props & RouteComponentProps): JSX.Element {
return (
<div className='cvat-task-job-list'>
<Row type='flex' justify='space-between' align='middle'>
<Row justify='space-between' align='middle'>
<Col>
<Text className='cvat-text-color cvat-jobs-header'> Jobs </Text>
<Tooltip trigger='click' title='Copied to clipboard!' mouseLeaveDelay={0}>

17
cvat-ui/src/components/task-page/styles.scss
Unescape Escape View File

@ -58,7 +58,7 @@
}
}
> .ant-tag > i {
> .ant-tag > span[role='img'] {
margin-right: 5px;
}
}
@ -84,14 +84,19 @@
.cvat-task-preview-wrapper {
overflow: hidden;
margin-bottom: 20px;
width: 252px;
height: 144px;
width: $grid-unit-size * 32;
height: $grid-unit-size * 18;
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: $background-color-2;
}
.cvat-task-parameters {
margin-top: $grid-unit-size * 2;
width: $grid-unit-size * 32;
}
.cvat-open-bug-tracker-button {
margin-left: 15px;
}
@ -112,8 +117,10 @@
}
.cvat-job-item-status {
i {
margin-left: $grid-unit-size;
.cvat-job-annotation-color {
span {
margin-left: $grid-unit-size;
}
}
}

6
cvat-ui/src/components/task-page/task-page.tsx
Unescape Escape View File

@ -37,7 +37,9 @@ class TaskPageComponent extends React.PureComponent<Props> {
}
public render(): JSX.Element {
const { task, fetching, updating, getTask } = this.props;
const {
task, fetching, updating, getTask,
} = this.props;
if (task === null || updating) {
if (task === null && !fetching) {
@ -60,7 +62,7 @@ class TaskPageComponent extends React.PureComponent<Props> {
return (
<>
<Row type='flex' justify='center' align='top' className='cvat-task-details-wrapper'>
<Row justify='center' align='top' className='cvat-task-details-wrapper'>
<Col md={22} lg={18} xl={16} xxl={14}>
<TopBarComponent taskInstance={(task as Task).instance} />
<DetailsContainer task={task as Task} />

2
cvat-ui/src/components/task-page/top-bar.tsx
Unescape Escape View File

@ -23,7 +23,7 @@ export default function DetailsComponent(props: DetailsComponentProps): JSX.Elem
const history = useHistory();
return (
<Row className='cvat-task-top-bar' type='flex' justify='space-between' align='middle'>
<Row className='cvat-task-top-bar' justify='space-between' align='middle'>
<Col>
{taskInstance.projectId ? (
<Button

2
cvat-ui/src/components/tasks-page/automatic-annotation-progress.tsx
Unescape Escape View File

@ -27,7 +27,7 @@ export default function AutomaticAnnotationProgress(props: Props): JSX.Element |
<Text strong>Automatic annotation</Text>
</Col>
</Row>
<Row type='flex' justify='space-between'>
<Row justify='space-between'>
<Col span={22}>
<Progress
percent={Math.floor(activeInference.progress)}

8
cvat-ui/src/components/tasks-page/empty-list.tsx
Unescape Escape View File

@ -13,22 +13,22 @@ import { EmptyTasksIcon } from 'icons';
export default function EmptyListComponent(): JSX.Element {
return (
<div className='cvat-empty-tasks-list'>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col>
<Icon className='cvat-empty-tasks-icon' component={EmptyTasksIcon} />
</Col>
</Row>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col>
<Text strong>No tasks created yet ...</Text>
</Col>
</Row>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col>
<Text type='secondary'>To get started with your annotation project</Text>
</Col>
</Row>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col>
<Link to='/tasks/create'>create a new task</Link>
<Text type='secondary'> or try to </Text>

8
cvat-ui/src/components/tasks-page/task-item.tsx
Unescape Escape View File

@ -104,7 +104,7 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
return (
<Col span={6}>
<Row type='flex' justify='space-between' align='top'>
<Row justify='space-between' align='top'>
<Col>
<svg height='8' width='8' className={progressColor}>
<circle cx='4' cy='4' r='4' strokeWidth='0' />
@ -141,7 +141,7 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
return (
<Col span={4}>
<Row type='flex' justify='end'>
<Row justify='end'>
<Col>
<Button
className='cvat-item-open-task-button'
@ -158,7 +158,7 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
</Button>
</Col>
</Row>
<Row type='flex' justify='end'>
<Row justify='end'>
<Col className='cvat-item-open-task-actions'>
<Text className='cvat-text-color'>Actions</Text>
<Dropdown overlay={<ActionsMenuContainer taskInstance={taskInstance} />}>
@ -183,7 +183,7 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
}
return (
<Row className='cvat-tasks-list-item' type='flex' justify='center' align='top' style={{ ...style }}>
<Row className='cvat-tasks-list-item' justify='center' align='top' style={{ ...style }}>
{this.renderPreview()}
{this.renderDescription()}
{this.renderProgress()}

8
cvat-ui/src/components/tasks-page/task-list.tsx
Unescape Escape View File

@ -17,17 +17,19 @@ export interface ContentListProps {
}
export default function TaskListComponent(props: ContentListProps): JSX.Element {
const { currentTasksIndexes, numberOfTasks, currentPage, onSwitchPage } = props;
const {
currentTasksIndexes, numberOfTasks, currentPage, onSwitchPage,
} = props;
const taskViews = currentTasksIndexes.map((tid, id): JSX.Element => <TaskItem idx={id} taskID={tid} key={tid} />);
return (
<>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col className='cvat-tasks-list' md={22} lg={18} xl={16} xxl={14}>
{taskViews}
</Col>
</Row>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col md={22} lg={18} xl={16} xxl={14}>
<Pagination
className='cvat-tasks-pagination'

2
cvat-ui/src/components/tasks-page/top-bar.tsx
Unescape Escape View File

@ -22,7 +22,7 @@ export default function TopBarComponent(props: VisibleTopBarProps): JSX.Element
return (
<>
<Row type='flex' justify='center' align='middle'>
<Row justify='center' align='middle'>
<Col md={11} lg={9} xl={8} xxl={7}>
<Text className='cvat-title'>Tasks</Text>
<Input.Search defaultValue={searchValue} onSearch={onSearch} size='large' placeholder='Search' />

Write Preview
Loading…
Cancel
Save