From 56a28ec4457d9bcc8c1fd5a2b42212fa0b649ee9 Mon Sep 17 00:00:00 2001
From: Boris Sekachev <boris@cvat.ai>
Date: Thu, 13 Jul 2023 14:59:51 +0300
Subject: [PATCH 1/7] Fixed defaul value for an attribute

---
 cvat-ui/src/components/labels-editor/labels-editor.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cvat-ui/src/components/labels-editor/labels-editor.tsx b/cvat-ui/src/components/labels-editor/labels-editor.tsx
index d342c1534a59..b185f32d4676 100644
--- a/cvat-ui/src/components/labels-editor/labels-editor.tsx
+++ b/cvat-ui/src/components/labels-editor/labels-editor.tsx
@@ -72,7 +72,7 @@ export default class LabelsEditor extends React.PureComponent<LabelsEditorProps,
                         input_type: attr.input_type,
                         mutable: attr.mutable,
                         values: [...attr.values],
-                        default_value: attr.values[0],
+                        default_value: attr.default_value,
                     }),
                 ),
             };
@@ -187,7 +187,7 @@ export default class LabelsEditor extends React.PureComponent<LabelsEditorProps,
                     name: attr.name,
                     id: attr.id as number < 0 ? undefined : attr.id,
                     input_type: attr.input_type.toLowerCase() as SerializedAttribute['input_type'],
-                    default_value: attr.values[0],
+                    default_value: attr.default_value || attr.values[0],
                     mutable: attr.mutable,
                     values: [...attr.values],
                 })),

From 5706fc867192fd677d11f959d3a82377a6c0097d Mon Sep 17 00:00:00 2001
From: Boris Sekachev <boris@cvat.ai>
Date: Tue, 18 Jul 2023 11:09:31 +0300
Subject: [PATCH 2/7] Applied changes to labels constructor

---
 .../components/labels-editor/label-form.tsx   | 174 +++++++++++-------
 .../labels-editor/labels-editor.tsx           |   2 +-
 2 files changed, 108 insertions(+), 68 deletions(-)

diff --git a/cvat-ui/src/components/labels-editor/label-form.tsx b/cvat-ui/src/components/labels-editor/label-form.tsx
index 72fdbc90b0a5..ca3227747424 100644
--- a/cvat-ui/src/components/labels-editor/label-form.tsx
+++ b/cvat-ui/src/components/labels-editor/label-form.tsx
@@ -12,6 +12,7 @@ import Checkbox from 'antd/lib/checkbox';
 import Select from 'antd/lib/select';
 import Form, { FormInstance } from 'antd/lib/form';
 import Badge from 'antd/lib/badge';
+import Modal from 'antd/lib/modal';
 import { Store } from 'antd/lib/form/interface';
 
 import { SerializedAttribute, LabelType } from 'cvat-core-wrapper';
@@ -94,6 +95,7 @@ export default class LabelForm extends React.Component<Props> {
                 return {
                     ...attribute,
                     values: attrValues,
+                    default_value: attrValues[0],
                     input_type: attribute.type.toLowerCase(),
                 };
             }),
@@ -117,7 +119,18 @@ export default class LabelForm extends React.Component<Props> {
     private addAttribute = (): void => {
         if (this.formRef.current) {
             const attributes = this.formRef.current.getFieldValue('attributes');
-            this.formRef.current.setFieldsValue({ attributes: [...(attributes || []), { id: idGenerator() }] });
+            this.formRef.current.setFieldsValue({
+                attributes: [
+                    ...(attributes || []),
+                    {
+                        id: idGenerator(),
+                        type: AttributeType.SELECT,
+                        name: '',
+                        values: [],
+                        mutable: false,
+                    },
+                ],
+            });
         }
     };
 
@@ -131,17 +144,15 @@ export default class LabelForm extends React.Component<Props> {
     };
 
     /* eslint-disable class-methods-use-this */
-    private renderAttributeNameInput(fieldInstance: any, attr: SerializedAttribute | null): JSX.Element {
+    private renderAttributeNameInput(fieldInstance: any, attr: any): JSX.Element {
         const { key } = fieldInstance;
-        const locked = attr ? attr.id as number >= 0 : false;
-        const value = attr ? attr.name : '';
+        const attrNames = this.formRef.current?.getFieldValue('attributes')
+            .filter((_attr: any) => _attr.id !== attr.id).map((_attr: any) => _attr.name);
 
         return (
             <Form.Item
                 hasFeedback
                 name={[key, 'name']}
-                fieldKey={[fieldInstance.fieldKey, 'name']}
-                initialValue={value}
                 rules={[
                     {
                         required: true,
@@ -151,22 +162,45 @@ export default class LabelForm extends React.Component<Props> {
                         pattern: patterns.validateAttributeName.pattern,
                         message: patterns.validateAttributeName.message,
                     },
+                    {
+                        validator: (_rule: any, attrName: string) => {
+                            if (attrNames.includes(attrName) && attr.name !== attrName) {
+                                return Promise.reject(new Error('Attribute name must be unique for the label'));
+                            }
+                            return Promise.resolve();
+                        },
+                    },
                 ]}
             >
-                <Input className='cvat-attribute-name-input' disabled={locked} placeholder='Name' />
+                <Input className='cvat-attribute-name-input' placeholder='Name' />
             </Form.Item>
         );
     }
 
-    private renderAttributeTypeInput(fieldInstance: any, attr: SerializedAttribute | null): JSX.Element {
+    private renderAttributeTypeInput(fieldInstance: any, attr: any): JSX.Element {
         const { key } = fieldInstance;
-        const locked = attr ? attr.id as number >= 0 : false;
-        const type = attr ? attr.input_type.toUpperCase() : AttributeType.SELECT;
+        const locked = attr.id as number >= 0;
 
         return (
             <CVATTooltip title='An HTML element representing the attribute'>
-                <Form.Item name={[key, 'type']} fieldKey={[fieldInstance.fieldKey, 'type']} initialValue={type}>
-                    <Select className='cvat-attribute-type-input' disabled={locked}>
+                <Form.Item name={[key, 'type']}>
+                    <Select
+                        className='cvat-attribute-type-input'
+                        disabled={locked}
+                        onChange={(value: AttributeType) => {
+                            const attrs = this.formRef.current?.getFieldValue('attributes');
+                            if (value === AttributeType.CHECKBOX) {
+                                attrs[key].values = ['false'];
+                            } else if (value === AttributeType.TEXT && !attrs[key].values.length) {
+                                attrs[key].values = '';
+                            } else if (value === AttributeType.NUMBER || attr.type === AttributeType.CHECKBOX) {
+                                attrs[key].values = [];
+                            }
+                            this.formRef.current?.setFieldsValue({
+                                attributes: attrs,
+                            });
+                        }}
+                    >
                         <Select.Option value={AttributeType.SELECT} className='cvat-attribute-type-input-select'>
                             Select
                         </Select.Option>
@@ -188,10 +222,10 @@ export default class LabelForm extends React.Component<Props> {
         );
     }
 
-    private renderAttributeValuesInput(fieldInstance: any, attr: SerializedAttribute | null): JSX.Element {
+    private renderAttributeValuesInput(fieldInstance: any, attr: any): JSX.Element {
         const { key } = fieldInstance;
-        const locked = attr ? attr.id as number >= 0 : false;
-        const existingValues = attr ? attr.values : [];
+        const locked = attr.id as number >= 0;
+        const existingValues = attr.values;
 
         const validator = (_: any, values: string[]): Promise<void> => {
             if (locked && existingValues) {
@@ -213,8 +247,6 @@ export default class LabelForm extends React.Component<Props> {
             <CVATTooltip title='Press enter to add a new value'>
                 <Form.Item
                     name={[key, 'values']}
-                    fieldKey={[fieldInstance.fieldKey, 'values']}
-                    initialValue={existingValues}
                     rules={[
                         {
                             required: true,
@@ -248,7 +280,6 @@ export default class LabelForm extends React.Component<Props> {
                             message: 'Please, specify a default value',
                         }]}
                     name={[key, 'values']}
-                    fieldKey={[fieldInstance.fieldKey, 'values']}
                 >
                     <Select className='cvat-attribute-values-input'>
                         <Select.Option value='false'>False</Select.Option>
@@ -259,12 +290,13 @@ export default class LabelForm extends React.Component<Props> {
         );
     }
 
-    private renderNumberRangeInput(fieldInstance: any, attr: SerializedAttribute | null): JSX.Element {
+    private renderNumberRangeInput(fieldInstance: any, attr: any): JSX.Element {
         const { key } = fieldInstance;
-        const locked = attr ? attr.id as number >= 0 : false;
-        const value = attr ? attr.values : '';
+        const locked = attr.id as number >= 0;
 
         const validator = (_: any, strNumbers: string): Promise<void> => {
+            if (typeof strNumbers !== 'string') return Promise.resolve();
+
             const numbers = strNumbers.split(';').map((number): number => Number.parseFloat(number));
             if (numbers.length !== 3) {
                 return Promise.reject(new Error('Three numbers are expected'));
@@ -296,8 +328,6 @@ export default class LabelForm extends React.Component<Props> {
         return (
             <Form.Item
                 name={[key, 'values']}
-                fieldKey={[fieldInstance.fieldKey, 'values']}
-                initialValue={value}
                 rules={[
                     {
                         required: true,
@@ -313,36 +343,24 @@ export default class LabelForm extends React.Component<Props> {
         );
     }
 
-    private renderDefaultValueInput(fieldInstance: any, attr: SerializedAttribute | null): JSX.Element {
+    private renderDefaultValueInput(fieldInstance: any): JSX.Element {
         const { key } = fieldInstance;
-        const value = attr ? attr.values[0] : '';
-
-        if (attr?.input_type.toUpperCase() === 'TEXT') {
-            return (
-                <Form.Item name={[key, 'values']} fieldKey={[fieldInstance.fieldKey, 'values']} initialValue={value}>
-                    <Input.TextArea className='cvat-attribute-values-input' placeholder='Default value' />
-                </Form.Item>
-            );
-        }
 
         return (
-            <Form.Item name={[key, 'values']} fieldKey={[fieldInstance.fieldKey, 'values']} initialValue={value}>
-                <Input className='cvat-attribute-values-input' placeholder='Default value' />
+            <Form.Item name={[key, 'values']}>
+                <Input.TextArea className='cvat-attribute-values-input' placeholder='Default value' />
             </Form.Item>
         );
     }
 
-    private renderMutableAttributeInput(fieldInstance: any, attr: SerializedAttribute | null): JSX.Element {
+    private renderMutableAttributeInput(fieldInstance: any, attr: any): JSX.Element {
         const { key } = fieldInstance;
-        const locked = attr ? attr.id as number >= 0 : false;
-        const value = attr ? attr.mutable : false;
+        const locked = attr.id as number >= 0;
 
         return (
             <CVATTooltip title='Can this attribute be changed frame to frame?'>
                 <Form.Item
                     name={[key, 'mutable']}
-                    fieldKey={[fieldInstance.fieldKey, 'mutable']}
-                    initialValue={value}
                     valuePropName='checked'
                 >
                     <Checkbox className='cvat-attribute-mutable-checkbox' disabled={locked}>
@@ -353,19 +371,31 @@ export default class LabelForm extends React.Component<Props> {
         );
     }
 
-    private renderDeleteAttributeButton(fieldInstance: any, attr: SerializedAttribute | null): JSX.Element {
+    private renderDeleteAttributeButton(fieldInstance: any, attr: any): JSX.Element {
         const { key } = fieldInstance;
-        const locked = attr ? attr.id as number >= 0 : false;
 
         return (
             <CVATTooltip title='Delete the attribute'>
                 <Form.Item>
                     <Button
+                        disabled={attr.id >= 0} // temporary disabled, does not work on the server
                         type='link'
                         className='cvat-delete-attribute-button'
-                        disabled={locked}
                         onClick={(): void => {
-                            this.removeAttribute(key);
+                            if (attr.id >= 0) {
+                                Modal.confirm({
+                                    title: `Do you want to remove the "${attr.name}" attribute?`,
+                                    content: 'This action is irreversible. It will remove corresponding annotations.',
+                                    onOk: () => {
+                                        this.removeAttribute(key);
+                                        setTimeout(() => {
+                                            this.formRef.current?.submit();
+                                        });
+                                    },
+                                });
+                            } else {
+                                this.removeAttribute(key);
+                            }
                         }}
                     >
                         <DeleteOutlined />
@@ -375,19 +405,17 @@ export default class LabelForm extends React.Component<Props> {
         );
     }
 
-    private renderAttribute = (fieldInstance: any): JSX.Element => {
-        const { label } = this.props;
+    private renderAttribute = (fieldInstance: any): JSX.Element | null => {
         const { key } = fieldInstance;
-        const fieldValue = this.formRef.current?.getFieldValue('attributes')[key];
-        const attr = label ? label.attributes.filter((_attr: any): boolean => _attr.id === fieldValue.id)[0] : null;
+        const attr = this.formRef.current?.getFieldValue('attributes')[key];
 
-        return (
+        return attr ? (
             <Form.Item noStyle key={key} shouldUpdate>
                 {() => (
                     <Row
                         justify='space-between'
                         align='top'
-                        cvat-attribute-id={fieldValue.id}
+                        cvat-attribute-id={attr.id}
                         className='cvat-attribute-inputs-wrapper'
                     >
                         <Col span={5}>{this.renderAttributeNameInput(fieldInstance, attr)}</Col>
@@ -404,7 +432,7 @@ export default class LabelForm extends React.Component<Props> {
                                 } else if (type === AttributeType.NUMBER) {
                                     element = this.renderNumberRangeInput(fieldInstance, attr);
                                 } else {
-                                    element = this.renderDefaultValueInput(fieldInstance, attr);
+                                    element = this.renderDefaultValueInput(fieldInstance);
                                 }
 
                                 return element;
@@ -415,18 +443,16 @@ export default class LabelForm extends React.Component<Props> {
                     </Row>
                 )}
             </Form.Item>
-        );
+        ) : null;
     };
 
     private renderLabelNameInput(): JSX.Element {
         const { label, labelNames, onCancel } = this.props;
-        const value = label ? label.name : '';
 
         return (
             <Form.Item
                 hasFeedback
                 name='name'
-                initialValue={value}
                 rules={[
                     {
                         required: !!label,
@@ -464,30 +490,26 @@ export default class LabelForm extends React.Component<Props> {
     private renderLabelTypeInput(): JSX.Element {
         const { onSkeletonSubmit } = this.props;
         const isSkeleton = !!onSkeletonSubmit;
-
         const types = Object.values(LabelType)
             .filter((type: string) => type !== LabelType.SKELETON);
         const { label } = this.props;
         const locked = !!label?.has_parent;
-        const defaultType = isSkeleton ? LabelType.SKELETON : LabelType.ANY;
-        const value = label ? label.type : defaultType;
 
         return (
-            <Form.Item name='type' initialValue={value}>
+            <Form.Item name='type'>
                 <Select className='cvat-label-type-input' disabled={isSkeleton || locked} showSearch={false}>
-                    {isSkeleton && (
+                    {isSkeleton ? (
                         <Select.Option
                             className='cvat-label-type-option-skeleton'
                             value='skeleton'
                         >
                             Skeleton
                         </Select.Option>
-                    )}
-                    { types.map((type: string): JSX.Element => (
+                    ) : types.map((type: string): JSX.Element => (
                         <Select.Option className={`cvat-label-type-option-${type}`} key={type} value={type}>
                             {`${type[0].toUpperCase()}${type.slice(1)}`}
                         </Select.Option>
-                    )) }
+                    ))}
                 </Select>
             </Form.Item>
         );
@@ -544,12 +566,10 @@ export default class LabelForm extends React.Component<Props> {
     }
 
     private renderChangeColorButton(): JSX.Element {
-        const { label } = this.props;
-
         return (
             <Form.Item noStyle shouldUpdate>
                 {() => (
-                    <Form.Item name='color' initialValue={label ? label?.color : undefined}>
+                    <Form.Item name='color'>
                         <ColorPicker placement='bottom'>
                             <CVATTooltip title='Change color of the label'>
                                 <Button type='default' className='cvat-change-task-label-color-button'>
@@ -568,7 +588,7 @@ export default class LabelForm extends React.Component<Props> {
     }
 
     private renderAttributes() {
-        return (fieldInstances: any[]): JSX.Element[] => fieldInstances.map(this.renderAttribute);
+        return (fieldInstances: any[]): (JSX.Element | null)[] => fieldInstances.map(this.renderAttribute);
     }
 
     // eslint-disable-next-line react/sort-comp
@@ -595,8 +615,28 @@ export default class LabelForm extends React.Component<Props> {
     }
 
     public render(): JSX.Element {
+        const { label, onSkeletonSubmit } = this.props;
+        const isSkeleton = !!onSkeletonSubmit;
+
         return (
-            <Form onFinish={this.handleSubmit} layout='vertical' ref={this.formRef}>
+            <Form
+                initialValues={{
+                    name: label?.name || '',
+                    type: label?.type || (isSkeleton ? LabelType.SKELETON : LabelType.ANY),
+                    color: label?.color || undefined,
+                    attributes: (label?.attributes || []).map((attr) => ({
+                        id: attr.id,
+                        name: attr.name,
+                        type: attr.input_type,
+                        values: attr.values,
+                        mutable: attr.mutable,
+                        default_value: attr.default_value,
+                    })),
+                }}
+                onFinish={this.handleSubmit}
+                layout='vertical'
+                ref={this.formRef}
+            >
                 <Row justify='start' align='top'>
                     <Col span={8}>{this.renderLabelNameInput()}</Col>
                     <Col span={3} offset={1}>{this.renderLabelTypeInput()}</Col>
diff --git a/cvat-ui/src/components/labels-editor/labels-editor.tsx b/cvat-ui/src/components/labels-editor/labels-editor.tsx
index b185f32d4676..d98ff042ecff 100644
--- a/cvat-ui/src/components/labels-editor/labels-editor.tsx
+++ b/cvat-ui/src/components/labels-editor/labels-editor.tsx
@@ -187,7 +187,7 @@ export default class LabelsEditor extends React.PureComponent<LabelsEditorProps,
                     name: attr.name,
                     id: attr.id as number < 0 ? undefined : attr.id,
                     input_type: attr.input_type.toLowerCase() as SerializedAttribute['input_type'],
-                    default_value: attr.default_value || attr.values[0],
+                    default_value: attr.default_value,
                     mutable: attr.mutable,
                     values: [...attr.values],
                 })),

From 512f3ecad431f6de813a058300e646f76a510f9d Mon Sep 17 00:00:00 2001
From: Boris Sekachev <boris@cvat.ai>
Date: Tue, 18 Jul 2023 11:18:26 +0300
Subject: [PATCH 3/7] Disabled renaming an attribute because server does not
 support it

---
 cvat-ui/src/components/labels-editor/label-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cvat-ui/src/components/labels-editor/label-form.tsx b/cvat-ui/src/components/labels-editor/label-form.tsx
index ca3227747424..0994c364daf5 100644
--- a/cvat-ui/src/components/labels-editor/label-form.tsx
+++ b/cvat-ui/src/components/labels-editor/label-form.tsx
@@ -172,7 +172,7 @@ export default class LabelForm extends React.Component<Props> {
                     },
                 ]}
             >
-                <Input className='cvat-attribute-name-input' placeholder='Name' />
+                <Input disabled={attr.id >= 0} className='cvat-attribute-name-input' placeholder='Name' />
             </Form.Item>
         );
     }

From 092a433d5bb85514e583ade3b4b940b11ed187d6 Mon Sep 17 00:00:00 2001
From: Boris Sekachev <boris@cvat.ai>
Date: Tue, 18 Jul 2023 11:41:34 +0300
Subject: [PATCH 4/7] Added ability to configure default value for an attribute

---
 .../components/labels-editor/label-form.tsx   | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/cvat-ui/src/components/labels-editor/label-form.tsx b/cvat-ui/src/components/labels-editor/label-form.tsx
index 0994c364daf5..d82f7f1f54cf 100644
--- a/cvat-ui/src/components/labels-editor/label-form.tsx
+++ b/cvat-ui/src/components/labels-editor/label-form.tsx
@@ -10,6 +10,7 @@ import Input from 'antd/lib/input';
 import Button from 'antd/lib/button';
 import Checkbox from 'antd/lib/checkbox';
 import Select from 'antd/lib/select';
+import Tag from 'antd/lib/tag';
 import Form, { FormInstance } from 'antd/lib/form';
 import Badge from 'antd/lib/badge';
 import Modal from 'antd/lib/modal';
@@ -95,7 +96,8 @@ export default class LabelForm extends React.Component<Props> {
                 return {
                     ...attribute,
                     values: attrValues,
-                    default_value: attrValues[0],
+                    default_value: attribute.default_value && attrValues.includes(attribute.default_value) ?
+                        attribute.default_value : attrValues[0],
                     input_type: attribute.type.toLowerCase(),
                 };
             }),
@@ -244,7 +246,7 @@ export default class LabelForm extends React.Component<Props> {
         };
 
         return (
-            <CVATTooltip title='Press enter to add a new value'>
+            <CVATTooltip title='Press enter to add a new value, click the item to select default value'>
                 <Form.Item
                     name={[key, 'values']}
                     rules={[
@@ -262,6 +264,24 @@ export default class LabelForm extends React.Component<Props> {
                         mode='tags'
                         placeholder='Attribute values'
                         dropdownStyle={{ display: 'none' }}
+                        tagRender={(props) => {
+                            const attrs = this.formRef.current?.getFieldValue('attributes');
+                            return (
+                                <Tag
+                                    color={props.value === attrs[key].default_value ? 'red' : undefined}
+                                    onClose={props.onClose}
+                                    onClick={() => {
+                                        attrs[key].default_value = props.value;
+                                        this.formRef.current?.setFieldsValue({
+                                            attributes: attrs,
+                                        });
+                                    }}
+                                    closable={props.closable}
+                                >
+                                    {props.label}
+                                </Tag>
+                            );
+                        }}
                     />
                 </Form.Item>
             </CVATTooltip>

From 47590347a78e27f11d05b4aa0240a0e28f78bc08 Mon Sep 17 00:00:00 2001
From: Boris Sekachev <boris@cvat.ai>
Date: Tue, 18 Jul 2023 11:48:21 +0300
Subject: [PATCH 5/7] Updated changelog, version

---
 CHANGELOG.md                                  |  2 ++
 cvat-ui/package.json                          |  2 +-
 .../components/labels-editor/label-form.tsx   | 32 +++++++++++--------
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a08bcdf77f02..77f2b5faff1f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## \[Unreleased]
 ### Added
 - Multi-line text attributes supported (<https://github.com/opencv/cvat/pull/6458>)
+- Now you can configure default attribute value for SELECT, RADIO types on UI
+ (<https://github.com/opencv/cvat/pull/6474>)
 
 ### Changed
 - TDB
diff --git a/cvat-ui/package.json b/cvat-ui/package.json
index f506b0e81a1b..da5e616d4ec3 100644
--- a/cvat-ui/package.json
+++ b/cvat-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.53.1",
+  "version": "1.53.2",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {
diff --git a/cvat-ui/src/components/labels-editor/label-form.tsx b/cvat-ui/src/components/labels-editor/label-form.tsx
index d82f7f1f54cf..8c0cfc7f1d00 100644
--- a/cvat-ui/src/components/labels-editor/label-form.tsx
+++ b/cvat-ui/src/components/labels-editor/label-form.tsx
@@ -246,7 +246,7 @@ export default class LabelForm extends React.Component<Props> {
         };
 
         return (
-            <CVATTooltip title='Press enter to add a new value, click the item to select default value'>
+            <CVATTooltip title='Press enter to add a new value'>
                 <Form.Item
                     name={[key, 'values']}
                     rules={[
@@ -266,20 +266,26 @@ export default class LabelForm extends React.Component<Props> {
                         dropdownStyle={{ display: 'none' }}
                         tagRender={(props) => {
                             const attrs = this.formRef.current?.getFieldValue('attributes');
+                            const isDefault = props.value === attrs[key].default_value;
                             return (
-                                <Tag
-                                    color={props.value === attrs[key].default_value ? 'red' : undefined}
-                                    onClose={props.onClose}
-                                    onClick={() => {
-                                        attrs[key].default_value = props.value;
-                                        this.formRef.current?.setFieldsValue({
-                                            attributes: attrs,
-                                        });
-                                    }}
-                                    closable={props.closable}
+                                <CVATTooltip
+                                    placement='bottom'
+                                    title={isDefault ? 'This value is default' : 'Click to set default value'}
                                 >
-                                    {props.label}
-                                </Tag>
+                                    <Tag
+                                        color={isDefault ? 'blue' : undefined}
+                                        onClose={props.onClose}
+                                        onClick={() => {
+                                            attrs[key].default_value = props.value;
+                                            this.formRef.current?.setFieldsValue({
+                                                attributes: attrs,
+                                            });
+                                        }}
+                                        closable={props.closable}
+                                    >
+                                        {props.label}
+                                    </Tag>
+                                </CVATTooltip>
                             );
                         }}
                     />

From c8e4327e4656d43f69535c29f618ac00b80f675c Mon Sep 17 00:00:00 2001
From: Boris Sekachev <sekachev.bs@gmail.com>
Date: Wed, 19 Jul 2023 13:01:58 +0300
Subject: [PATCH 6/7] Reset default value when it is deleted, fixed issue with
 hidden right value

---
 cvat-ui/src/components/labels-editor/label-form.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/cvat-ui/src/components/labels-editor/label-form.tsx b/cvat-ui/src/components/labels-editor/label-form.tsx
index 8c0cfc7f1d00..501091c42233 100644
--- a/cvat-ui/src/components/labels-editor/label-form.tsx
+++ b/cvat-ui/src/components/labels-editor/label-form.tsx
@@ -273,8 +273,14 @@ export default class LabelForm extends React.Component<Props> {
                                     title={isDefault ? 'This value is default' : 'Click to set default value'}
                                 >
                                     <Tag
+                                        visible
                                         color={isDefault ? 'blue' : undefined}
-                                        onClose={props.onClose}
+                                        onClose={() => {
+                                            if (isDefault) {
+                                                attrs[key].default_value = undefined;
+                                            }
+                                            props.onClose();
+                                        }}
                                         onClick={() => {
                                             attrs[key].default_value = props.value;
                                             this.formRef.current?.setFieldsValue({

From 255f1a2c6efc4fd01527b189267af820b1654d13 Mon Sep 17 00:00:00 2001
From: Boris Sekachev <sekachev.bs@gmail.com>
Date: Wed, 19 Jul 2023 13:09:27 +0300
Subject: [PATCH 7/7] Fixed double tooltip

---
 cvat-ui/src/components/labels-editor/label-form.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/cvat-ui/src/components/labels-editor/label-form.tsx b/cvat-ui/src/components/labels-editor/label-form.tsx
index 501091c42233..600dc11af72b 100644
--- a/cvat-ui/src/components/labels-editor/label-form.tsx
+++ b/cvat-ui/src/components/labels-editor/label-form.tsx
@@ -274,6 +274,12 @@ export default class LabelForm extends React.Component<Props> {
                                 >
                                     <Tag
                                         visible
+                                        onMouseEnter={() => {
+                                            const parent = window.document.getElementsByClassName('cvat-attribute-values-input')[0];
+                                            if (parent) {
+                                                parent.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
+                                            }
+                                        }}
                                         color={isDefault ? 'blue' : undefined}
                                         onClose={() => {
                                             if (isDefault) {