Special behaviour for the attribute value __undefined__

cvat-canvas/src/typescript/canvasView.ts

@@ -1356,7 +1356,9 @@ export class CanvasViewImpl implements CanvasView, Listener {
         return this.adoptedText.text((block): void => {
             block.tspan(`${label.name} ${clientID}`).style('text-transform', 'uppercase');
             for (const attrID of Object.keys(attributes)) {
-                block.tspan(`${attrNames[attrID]}: ${attributes[attrID]}`).attr({
+                const value = attributes[attrID] === consts.UNDEFINED_ATTRIBUTE_VALUE
+                    ? '' : attributes[attrID];
+                block.tspan(`${attrNames[attrID]}: ${value}`).attr({
                     attrID,
                     dy: '1em',
                     x: 0,

cvat-canvas/src/typescript/consts.ts

@@ -10,6 +10,7 @@ const AREA_THRESHOLD = 9;
 const SIZE_THRESHOLD = 3;
 const POINTS_STROKE_WIDTH = 1.5;
 const POINTS_SELECTED_STROKE_WIDTH = 4;
+const UNDEFINED_ATTRIBUTE_VALUE = '__undefined__';
 
 export default {
     BASE_STROKE_WIDTH,
@@ -20,4 +21,5 @@ export default {
     SIZE_THRESHOLD,
     POINTS_STROKE_WIDTH,
     POINTS_SELECTED_STROKE_WIDTH,
+    UNDEFINED_ATTRIBUTE_VALUE,
 };

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx

@@ -10,6 +10,8 @@ import Select, { SelectValue } from 'antd/lib/select';
 import Radio, { RadioChangeEvent } from 'antd/lib/radio';
 import Input from 'antd/lib/input';
 
+import consts from 'consts';
+
 interface InputElementParameters {
     attrID: number;
     inputType: string;
@@ -53,7 +55,9 @@ function renderInputElement(parameters: InputElementParameters): JSX.Element {
                     )}
                 >
                     {values.map((value: string): JSX.Element => (
-                        <Select.Option key={value} value={value}>{value}</Select.Option>
+                        <Select.Option key={value} value={value}>
+                            {value === consts.UNDEFINED_ATTRIBUTE_VALUE ? '\u00a0' : value}
+                        </Select.Option>
                     ))}
                 </Select>
             </div>
@@ -71,7 +75,9 @@ function renderInputElement(parameters: InputElementParameters): JSX.Element {
                     )}
                 >
                     {values.map((value: string): JSX.Element => (
-                        <Radio style={{ display: 'block' }} key={value} value={value}>{value}</Radio>
+                        <Radio style={{ display: 'block' }} key={value} value={value}>
+                            {value === consts.UNDEFINED_ATTRIBUTE_VALUE ? '\u00a0' : value}
+                        </Radio>
                     ))}
                 </Radio.Group>
             </div>
@@ -193,7 +199,9 @@ function renderList(parameters: ListParameters): JSX.Element | null {
             [key: string]: (keyEvent?: KeyboardEvent) => void;
         } = {};
 
-        values.slice(0, 10).forEach((value: string, index: number): void => {
+        const filteredValues = values
+            .filter((value: string): boolean => value !== consts.UNDEFINED_ATTRIBUTE_VALUE);
+        filteredValues.slice(0, 10).forEach((value: string, index: number): void => {
             const key = `SET_${index}_VALUE`;
             keyMap[key] = {
                 name: `Set value "${value}"`,
@@ -214,7 +222,7 @@ function renderList(parameters: ListParameters): JSX.Element | null {
         return (
             <div className='attribute-annotation-sidebar-attr-list-wrapper'>
                 <GlobalHotKeys keyMap={keyMap as KeyMap} handlers={handlers} allowChanges />
-                {values.map((value: string, index: number): JSX.Element => (
+                {filteredValues.map((value: string, index: number): JSX.Element => (
                     <div key={value}>
                         <Text strong>{`${index}:`}</Text>
                         <Text>{` ${value}`}</Text>

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss

@@ -48,9 +48,7 @@
     margin: 10px 0px 10px 10px;
 }
 
-
 .attribute-annotation-sidebar-attr-elem-wrapper {
-    display: inline-block;
     width: 60%;
 }
 

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx

@@ -20,7 +20,7 @@ import Text from 'antd/lib/typography/Text';
 import Tooltip from 'antd/lib/tooltip';
 
 import ColorChanger from 'components/annotation-page/standard-workspace/objects-side-bar/color-changer';
-
+import consts from 'consts';
 import {
     ObjectOutsideIcon,
     FirstIcon,
@@ -30,10 +30,10 @@ import {
     BackgroundIcon,
     ForegroundIcon,
 } from 'icons';
-
 import { ObjectType, ShapeType } from 'reducers/interfaces';
 import { clamp } from 'utils/math';
 
+
 function ItemMenu(
     serverID: number | undefined,
     locked: boolean,
@@ -508,7 +508,9 @@ function ItemAttributeComponent(props: ItemAttributeComponentProps): JSX.Element
                         }}
                     >
                         { attrValues.map((value: string): JSX.Element => (
-                            <Radio key={value} value={value}>{value}</Radio>
+                            <Radio key={value} value={value}>
+                                {value === consts.UNDEFINED_ATTRIBUTE_VALUE ? '\u00a0' : value}
+                            </Radio>
                         )) }
                     </Radio.Group>
                 </fieldset>
@@ -534,7 +536,9 @@ function ItemAttributeComponent(props: ItemAttributeComponentProps): JSX.Element
                         className='cvat-object-item-select-attribute'
                     >
                         { attrValues.map((value: string): JSX.Element => (
-                            <Select.Option key={value} value={value}>{value}</Select.Option>
+                            <Select.Option key={value} value={value}>
+                                {value === consts.UNDEFINED_ATTRIBUTE_VALUE ? '\u00a0' : value}
+                            </Select.Option>
                         )) }
                     </Select>
                 </Col>

cvat-ui/src/consts.ts

@@ -0,0 +1,9 @@
+// Copyright (C) 2019-2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+const UNDEFINED_ATTRIBUTE_VALUE = '__undefined__';
+
+export default {
+    UNDEFINED_ATTRIBUTE_VALUE,
+};

cvat-ui/src/utils/enviroment.ts

@@ -2,6 +2,6 @@
 //
 // SPDX-License-Identifier: MIT
 
-export default function isDev() {
+export default function isDev(): boolean {
     return process.env.NODE_ENV === 'development';
 }