Added dumping a skeleton on a created resource, fixed some styles

CHANGELOG.md

@@ -22,9 +22,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Documentation for LDAP authentication (<https://github.com/cvat-ai/cvat/pull/39>)
 - OpenCV.js caching and autoload (<https://github.com/cvat-ai/cvat/pull/30>)
 - Publishing dev version of CVAT docker images (<https://github.com/cvat-ai/cvat/pull/53>)
-- Support of Human Pose Estimation, Facial Landmarks (and similar) use-cases, new shape type: Skeleton (<https://github.com/cvat-ai/cvat/pull/1>)
+- Support of Human Pose Estimation, Facial Landmarks (and similar) use-cases, new shape type:
+Skeleton (<https://github.com/cvat-ai/cvat/pull/1>), (<https://github.com/opencv/cvat/pull/4829>)
 - Added helm chart support for serverless functions and analytics (<https://github.com/cvat-ai/cvat/pull/110>)
 
+
 ### Changed
 - Bumped nuclio version to 1.8.14
 - Simplified running REST API tests. Extended CI-nightly workflow

cvat-ui/src/components/cloud-storages-page/styles.scss

@@ -19,6 +19,7 @@
 .cvat-empty-cloud-storages-list-icon {
     font-size: $grid-unit-size * 14;
     opacity: 0.5;
+    margin-bottom: $grid-unit-size * 2;
 }
 
 .cvat-cloud-storages-pagination {

cvat-ui/src/components/jobs-page/styles.scss

@@ -60,6 +60,10 @@
         }
 
         .cvat-jobs-page-job-item-card-preview {
+            .ant-empty-image {
+                height: $grid-unit-size * 10;
+            }
+
             height: 100%;
             display: flex;
             align-items: center;

cvat-ui/src/components/labels-editor/skeleton-configurator.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import PropTypes from 'prop-types';
 import { Row, Col } from 'antd/lib/grid';
 import Upload from 'antd/lib/upload';
@@ -59,7 +59,7 @@ export default class SkeletonConfigurator extends React.PureComponent<Props, Sta
     private nodeCounter: number;
     private elementCounter: number;
     private draggableElement: SVGElement | null;
-    private labels: Record<string, LabelOptColor>;
+    private labels: Record<number, LabelOptColor>;
 
     public constructor(props: Props) {
         super(props);
@@ -463,7 +463,7 @@ export default class SkeletonConfigurator extends React.PureComponent<Props, Sta
             if (recreate) {
                 Array.from<SVGElement>(svg.children as any as SVGElement[]).forEach((element: SVGElement): void => {
                     if (!(element instanceof SVGElement)) return;
-                    const elementID = element.getAttribute('data-element-id');
+                    const elementID = +(element.getAttribute('data-element-id') as string);
                     const cx = element.getAttribute('cx');
                     const cy = element.getAttribute('cy');
 
@@ -574,7 +574,7 @@ export default class SkeletonConfigurator extends React.PureComponent<Props, Sta
         Array.from(svg.children as any as SVGElement[]).forEach((child: SVGElement) => {
             const dataType = child.getAttribute('data-type');
             if (dataType && dataType.includes('element')) {
-                const elementID = child.getAttribute('data-element-id');
+                const elementID = +(child.getAttribute('data-element-id') as string);
                 if (elementID !== null) {
                     elements++;
                     const elementLabel = this.labels[elementID];
@@ -631,9 +631,10 @@ export default class SkeletonConfigurator extends React.PureComponent<Props, Sta
             activeTool, contextMenuVisible, contextMenuElement, error,
         } = this.state;
         const keyMap = this.context;
+        const disabledStyle: CSSProperties = disabled ? { opacity: 0.5, pointerEvents: 'none' } : {};
 
         return (
-            <Row className='cvat-skeleton-configurator' style={disabled ? { opacity: 0.5, pointerEvents: 'none' } : {}}>
+            <Row className='cvat-skeleton-configurator'>
                 <GlobalHotKeys
                     keyMap={{
                         CANCEL_SKELETON_EDGE: keyMap.CANCEL_SKELETON_EDGE,
@@ -700,7 +701,11 @@ export default class SkeletonConfigurator extends React.PureComponent<Props, Sta
                             </p>
                         </Upload>
                     </div>
-                    <Row justify='center' className='cvat-skeleton-configurator-shape-buttons'>
+                    <Row
+                        justify='center'
+                        style={disabledStyle}
+                        className='cvat-skeleton-configurator-shape-buttons'
+                    >
                         <Col span={24}>
                             <Radio.Group
                                 value={activeTool}
@@ -742,16 +747,24 @@ export default class SkeletonConfigurator extends React.PureComponent<Props, Sta
                                 onClick={() => {
                                     if (svgRef.current) {
                                         this.setupTextLabels(false);
+                                        const copy = window.document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                                        // eslint-disable-next-line no-unsanitized/property
+                                        copy.innerHTML = svgRef.current.innerHTML;
+                                        this.setupTextLabels();
 
                                         const desc = window.document.createElementNS('http://www.w3.org/2000/svg', 'desc');
                                         desc.setAttribute('data-description-type', 'labels-specification');
                                         (desc as SVGDescElement).textContent = JSON.stringify(this.labels);
-                                        svgRef.current.appendChild(desc);
-
-                                        const text = svgRef.current.innerHTML;
-                                        desc.remove();
+                                        copy.appendChild(desc);
+                                        Array.from(copy.children).forEach((child: Element) => {
+                                            if (child.hasAttribute('data-label-id')) {
+                                                const elementID = +(child.getAttribute('data-element-id') as string);
+                                                child.removeAttribute('data-label-id');
+                                                child.setAttribute('data-label-name', this.labels[elementID].name);
+                                            }
+                                        });
 
-                                        this.setupTextLabels();
+                                        const text = copy.innerHTML;
                                         const blob = new Blob([text], { type: 'image/svg+xml;charset=utf-8' });
                                         const url = URL.createObjectURL(blob);
                                         const anchor = window.document.getElementById('downloadAnchor');
@@ -767,6 +780,7 @@ export default class SkeletonConfigurator extends React.PureComponent<Props, Sta
                             />
                         </CVATTooltip>
                         <Upload
+                            disabled={disabled}
                             showUploadList={false}
                             beforeUpload={(file: RcFile) => {
                                 file.text().then((result) => {
@@ -805,12 +819,12 @@ export default class SkeletonConfigurator extends React.PureComponent<Props, Sta
                             }}
                         >
                             <CVATTooltip title='Upload a skeleton from SVG'>
-                                <Button icon={<UploadOutlined />} type='default' />
+                                <Button style={disabledStyle} icon={<UploadOutlined />} type='default' />
                             </CVATTooltip>
                         </Upload>
                     </Row>
                 </div>
-                <div className='cvat-skeleton-canvas-wrapper'>
+                <div className='cvat-skeleton-canvas-wrapper' style={disabledStyle}>
                     <canvas ref={canvasRef} className='cvat-skeleton-configurator-canvas' />
                     <svg width={100} height={100} ref={svgRef} className='cvat-skeleton-configurator-svg' />
                 </div>

cvat-ui/src/components/labels-editor/styles.scss

@@ -109,6 +109,7 @@ textarea.ant-input.cvat-raw-labels-viewer {
 }
 
 .cvat-skeleton-configurator {
+    position: relative;
     width: 100%;
     margin-top: $grid-unit-size;
     margin-bottom: $grid-unit-size;
@@ -119,7 +120,7 @@ textarea.ant-input.cvat-raw-labels-viewer {
     > div:first-child {
         width: $grid-unit-size * 6;
         position: absolute;
-        left: 0;
+        left: 1px;
     }
 
     > .ant-alert {

cvat-ui/src/components/projects-page/styles.scss

@@ -124,6 +124,10 @@
             height: inherit;
             display: grid;
 
+            .ant-empty-image {
+                height: $grid-unit-size * 10;
+            }
+
             > div:first-child {
                 margin: auto;
             }