diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx
index 176c384b..9483c148 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx
@@ -5,20 +5,14 @@
import React from 'react';
import {
- Icon,
Layout,
- Tooltip,
} from 'antd';
import {
ActiveControl,
- Rotation
+ Rotation,
} from 'reducers/interfaces';
-import {
- TagIcon,
-} from 'icons';
-
import {
Canvas,
} from 'cvat-canvas';
@@ -32,6 +26,7 @@ import DrawRectangleControl from './draw-rectangle-control';
import DrawPolygonControl from './draw-polygon-control';
import DrawPolylineControl from './draw-polyline-control';
import DrawPointsControl from './draw-points-control';
+import SetupTagControl from './setup-tag-control';
import MergeControl from './merge-control';
import GroupControl from './group-control';
import SplitControl from './split-control';
@@ -91,9 +86,10 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
isDrawing={activeControl === ActiveControl.DRAW_POINTS}
/>
-
-
-
+
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx
new file mode 100644
index 00000000..0f711ba1
--- /dev/null
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx
@@ -0,0 +1,48 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+import {
+ Popover,
+ Icon,
+} from 'antd';
+
+import { Canvas } from 'cvat-canvas';
+import { TagIcon } from 'icons';
+
+import SetupTagPopoverContainer from 'containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover';
+
+interface Props {
+ canvasInstance: Canvas;
+ isDrawing: boolean;
+}
+
+function SetupTagControl(props: Props): JSX.Element {
+ const {
+ isDrawing,
+ } = props;
+
+ const dynamcPopoverPros = isDrawing ? {
+ overlayStyle: {
+ display: 'none',
+ },
+ } : {};
+
+ return (
+
+ )}
+ >
+
+
+ );
+}
+
+export default React.memo(SetupTagControl);
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
new file mode 100644
index 00000000..810b5b5e
--- /dev/null
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
@@ -0,0 +1,73 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+
+import {
+ Row,
+ Col,
+ Select,
+ Button,
+} from 'antd';
+
+import Text from 'antd/lib/typography/Text';
+
+interface Props {
+ labels: any[];
+ selectedLabeID: number;
+ onChangeLabel(value: string): void;
+ onSetup(): void;
+}
+
+function setupTagPopover(props: Props): JSX.Element {
+ const {
+ labels,
+ selectedLabeID,
+ onChangeLabel,
+ onSetup,
+ } = props;
+
+ return (
+
+
+
+ Setup tag
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default React.memo(setupTagPopover);
diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
new file mode 100644
index 00000000..c6d42bf3
--- /dev/null
+++ b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
@@ -0,0 +1,101 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+import { connect } from 'react-redux';
+
+import {
+ CombinedState,
+} from 'reducers/interfaces';
+
+import { Canvas } from 'cvat-canvas';
+import SetupTagPopoverComponent from 'components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover';
+
+interface DispatchToProps {
+ onTagSetup(): void;
+}
+
+interface StateToProps {
+ canvasInstance: Canvas;
+ labels: any[];
+}
+
+function mapDispatchToProps(dispatch: any): DispatchToProps {
+ return {
+ onTagSetup(): void {
+ dispatch();
+ },
+ };
+}
+
+function mapStateToProps(state: CombinedState): StateToProps {
+ const {
+ annotation: {
+ canvas: {
+ instance: canvasInstance,
+ },
+ job: {
+ labels,
+ },
+ },
+ } = state;
+
+ return {
+ canvasInstance,
+ labels,
+ };
+}
+
+type Props = StateToProps;
+
+interface State {
+ selectedLabelID: number;
+}
+
+class DrawShapePopoverContainer extends React.PureComponent {
+ constructor(props: Props) {
+ super(props);
+
+ const defaultLabelID = props.labels[0].id;
+ this.state = {
+ selectedLabelID: defaultLabelID,
+ };
+ }
+
+ private onChangeLabel = (value: string): void => {
+ this.setState({
+ selectedLabelID: +value,
+ });
+ };
+
+ private onSetup(): void {
+ const { canvasInstance } = this.props;
+
+ canvasInstance.cancel();
+ }
+
+ public render(): JSX.Element {
+ const {
+ selectedLabelID,
+ } = this.state;
+
+ const {
+ labels,
+ } = this.props;
+
+ return (
+
+ );
+ }
+}
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps,
+)(DrawShapePopoverContainer);
diff --git a/cvat-ui/src/reducers/interfaces.ts b/cvat-ui/src/reducers/interfaces.ts
index 644d85d5..0fab4ef5 100644
--- a/cvat-ui/src/reducers/interfaces.ts
+++ b/cvat-ui/src/reducers/interfaces.ts
@@ -245,6 +245,7 @@ export enum ActiveControl {
DRAW_POLYGON = 'draw_polygon',
DRAW_POLYLINE = 'draw_polyline',
DRAW_POINTS = 'draw_points',
+ SETUP_TAG = 'setup_tag',
MERGE = 'merge',
GROUP = 'group',
SPLIT = 'split',