Merge branch 'develop' into helm-nuclio-env

cvat-ai · Mar 24, 2023 · 353c827 · 353c827
2 parents c787d12 + 777ea3b
commit 353c827
Show file tree

Hide file tree

Showing 17 changed files with 177 additions and 73 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Nuclio function invocations when deployed via the Helm chart
   (<https://github.com/opencv/cvat/issues/5626>)
 - Downgrade NumPy used by HRNet because `np.int` is no longer available (<https://github.com/opencv/cvat/pull/5574>)
+- Make empty previews responsive to page resize <https://github.com/opencv/cvat/pull/5925>
 
 ### Security
 - TDB

diff --git a/cvat-ui/package.json b/cvat-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.50.3",
+  "version": "1.50.4",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

diff --git a/cvat-ui/src/actions/share-actions.ts b/cvat-ui/src/actions/share-actions.ts
@@ -29,7 +29,7 @@ const shareActions = {
 
 export type ShareActions = ActionUnion<typeof shareActions>;
 
-export function loadShareDataAsync(directory: string): ThunkAction {
+export function loadShareDataAsync(directory: string): ThunkAction<Promise<ShareFileInfo[]>> {
     return async (dispatch): Promise<ShareFileInfo[]> => {
         try {
             dispatch(shareActions.loadShareData());

diff --git a/cvat-ui/src/base.scss b/cvat-ui/src/base.scss
@@ -43,3 +43,29 @@ $box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0,
 
 $monospaced-fonts-stack: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono,
     Courier New, monospace;
+
+.cvat-base-preview {
+    .ant-spin {
+        position: inherit;
+    }
+
+    font-size: $grid-unit-size * 15;
+    text-align: center;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    svg {
+        width: 65%;
+        height: 65%;
+    }
+
+    .anticon {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
diff --git a/cvat-ui/src/components/cloud-storages-page/styles.scss b/cvat-ui/src/components/cloud-storages-page/styles.scss
@@ -70,13 +70,14 @@
 
     .cvat-cloud-storage-item-loading-preview,
     .cvat-cloud-storage-item-empty-preview {
-        .ant-spin {
-            position: inherit;
-        }
+        @extend .cvat-base-preview;
 
-        font-size: $grid-unit-size * 15;
-        text-align: center;
         height: $grid-unit-size * 24;
+
+        svg {
+            width: 40%;
+            height: 40%;
+        }
     }
 
     .cvat-cloud-storage-item-preview {

diff --git a/cvat-ui/src/components/file-manager/file-manager.tsx b/cvat-ui/src/components/file-manager/file-manager.tsx
@@ -19,6 +19,7 @@ import { EventDataNode } from 'rc-tree/lib/interface';
 
 import config from 'config';
 import { CloudStorage } from 'reducers';
+import CVATLoadingSpinner from 'components/common/loading-spinner';
 import CloudStorageTab from './cloud-storages-tab';
 import LocalFiles from './local-files';
 
@@ -38,8 +39,9 @@ interface State {
 }
 
 interface Props {
+    sharedStorageInitialized: boolean;
+    sharedStorageFetching: boolean;
     treeData: (TreeNodeNormal & { mime_type: string })[];
-    share: any;
     many: boolean;
     onLoadData: (key: string) => Promise<any>;
     onChangeActiveKey(key: string): void;
@@ -55,7 +57,6 @@ export class FileManager extends React.PureComponent<Props, State> {
     public constructor(props: Props) {
         super(props);
         this.cloudStorageTabFormRef = React.createRef<FormInstance>();
-        const { onLoadData } = this.props;
 
         this.state = {
             files: {
@@ -69,8 +70,15 @@ export class FileManager extends React.PureComponent<Props, State> {
             expandedKeys: [],
             active: 'local',
         };
+    }
+
+    public componentDidUpdate(): void {
+        const { active } = this.state;
+        const { onLoadData, sharedStorageInitialized, sharedStorageFetching } = this.props;
 
-        onLoadData('/');
+        if (active === 'share' && !sharedStorageInitialized && !sharedStorageFetching) {
+            onLoadData('/');
+        }
     }
 
     private handleUploadCloudStorageFiles = (cloudStorageFiles: string[]): void => {
@@ -156,12 +164,19 @@ export class FileManager extends React.PureComponent<Props, State> {
         }
 
         const { SHARE_MOUNT_GUIDE_URL } = config;
-        const { treeData, onUploadShareFiles, onLoadData } = this.props;
+        const {
+            treeData, sharedStorageInitialized, onUploadShareFiles, onLoadData,
+        } = this.props;
         const { expandedKeys, files } = this.state;
 
         return (
             <Tabs.TabPane key='share' tab='Connected file share'>
-                {treeData[0].children && treeData[0].children.length ? (
+                {!sharedStorageInitialized && (
+                    <div className='cvat-share-tree-initialization'>
+                        <CVATLoadingSpinner />
+                    </div>
+                )}
+                {sharedStorageInitialized && !!treeData[0].children?.length && (
                     <Tree
                         className='cvat-share-tree'
                         checkable
@@ -196,7 +211,8 @@ export class FileManager extends React.PureComponent<Props, State> {
                         }}
                         treeData={getTreeNodes(treeData)}
                     />
-                ) : (
+                )}
+                {sharedStorageInitialized && !treeData[0].children?.length && (
                     <div className='cvat-empty-share-tree'>
                         <Empty />
                         <Paragraph className='cvat-text-color'>

diff --git a/cvat-ui/src/components/file-manager/styles.scss b/cvat-ui/src/components/file-manager/styles.scss
@@ -4,11 +4,17 @@
 
 @import '../../base.scss';
 
-.cvat-share-tree {
+.cvat-share-tree-initialization {
     height: 32 * $grid-unit-size;
 }
 
+.cvat-share-tree {
+    @extend .cvat-share-tree-initialization;
+}
+
 .cvat-empty-share-tree {
+    @extend .cvat-share-tree-initialization;
+
     > .ant-typography {
         margin-top: 10px;
     }

diff --git a/cvat-ui/src/components/jobs-page/styles.scss b/cvat-ui/src/components/jobs-page/styles.scss
@@ -81,13 +81,11 @@
 
         .cvat-job-item-loading-preview,
         .cvat-job-item-empty-preview {
-            .ant-spin {
-                position: inherit;
-            }
+            @extend .cvat-base-preview;
 
-            font-size: $grid-unit-size * 15;
-            text-align: center;
-            height: $grid-unit-size * 24;
+            &:hover {
+                cursor: pointer;
+            }
         }
 
         .cvat-job-page-list-item-dimension {

diff --git a/cvat-ui/src/components/models-page/styles.scss b/cvat-ui/src/components/models-page/styles.scss
@@ -125,19 +125,19 @@
 
 .cvat-model-item-loading-preview,
 .cvat-model-item-empty-preview {
-    .ant-spin {
-        position: inherit;
-    }
+    @extend .cvat-base-preview;
 
-    font-size: 80px;
-    text-align: center;
     height: $grid-unit-size * 18;
 
     &:hover {
         cursor: pointer;
     }
 }
 
+.cvat-model-item-loading-preview {
+    padding-top: $grid-unit-size * 3;
+}
+
 .cvat-models-item-card-preview-wrapper {
     display: flex;
     justify-content: center;

diff --git a/cvat-ui/src/components/projects-page/styles.scss b/cvat-ui/src/components/projects-page/styles.scss
@@ -135,13 +135,15 @@
 
     .cvat-project-item-loading-preview,
     .cvat-project-item-empty-preview {
-        .ant-spin {
-            position: inherit;
+        @extend .cvat-base-preview;
+
+        &:hover {
+            cursor: pointer;
         }
+    }
 
-        font-size: $grid-unit-size * 15;
-        text-align: center;
-        height: $grid-unit-size * 24;
+    .cvat-project-item-loading-preview {
+        padding-top: $grid-unit-size * 3;
     }
 
     .cvat-projects-project-item-title {

diff --git a/cvat-ui/src/components/task-page/styles.scss b/cvat-ui/src/components/task-page/styles.scss
@@ -40,13 +40,10 @@
 
         .cvat-task-item-loading-preview,
         .cvat-task-item-empty-preview {
-            .ant-spin {
-                position: inherit;
-            }
+            @extend .cvat-base-preview;
 
             height: $grid-unit-size * 18;
             font-size: $grid-unit-size * 10;
-            text-align: center;
             margin-bottom: $grid-unit-size * 3;
         }
 

diff --git a/cvat-ui/src/components/tasks-page/styles.scss b/cvat-ui/src/components/tasks-page/styles.scss
@@ -95,12 +95,10 @@
 
     .cvat-task-item-loading-preview,
     .cvat-task-item-empty-preview {
-        .ant-spin {
-            position: inherit;
-        }
+        @extend .cvat-base-preview;
 
         font-size: $grid-unit-size * 6;
-        text-align: center;
+        height: $grid-unit-size * 10;
     }
 
     .cvat-task-item-preview-wrapper {

diff --git a/cvat-ui/src/containers/file-manager/file-manager.tsx b/cvat-ui/src/containers/file-manager/file-manager.tsx
@@ -29,36 +29,20 @@ interface OwnProps {
 }
 
 interface StateToProps {
-    treeData: (TreeNodeNormal & { mime_type: string })[];
-    share: any;
+    treeData: ShareItem;
+    sharedStorageInitialized: boolean;
+    sharedStorageFetching: boolean;
 }
 
 interface DispatchToProps {
     getTreeData(key: string): Promise<ShareFileInfo[]>;
 }
 
 function mapStateToProps(state: CombinedState): StateToProps {
-    function convert(items: ShareItem[], path?: string): (TreeNodeNormal & { mime_type: string })[] {
-        return items.map(
-            (item): (TreeNodeNormal & { mime_type: string }) => {
-                const isLeaf = item.type !== 'DIR';
-                const key = `${path}${item.name}${isLeaf ? '' : '/'}`;
-                return {
-                    key,
-                    isLeaf,
-                    title: item.name || 'root',
-                    mime_type: item.mime_type,
-                    children: convert(item.children, key),
-                };
-            },
-        );
-    }
-
-    const { root } = state.share;
-
     return {
-        treeData: convert([root], ''),
-        share: state.share,
+        treeData: state.share.root,
+        sharedStorageInitialized: state.share.initialized,
+        sharedStorageFetching: state.share.fetching,
     };
 }
 
@@ -71,15 +55,54 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
 
 type Props = StateToProps & DispatchToProps & OwnProps;
 
-export class FileManagerContainer extends React.PureComponent<Props> {
+interface State {
+    treeData: (TreeNodeNormal & {
+        mime_type: string;
+    })[];
+    prevRoot: ShareItem | null;
+}
+
+export class FileManagerContainer extends React.PureComponent<Props, State> {
     private managerComponentRef: any;
 
     public constructor(props: Props) {
         super(props);
 
+        this.state = {
+            treeData: [],
+            prevRoot: null,
+        };
+
         this.managerComponentRef = React.createRef();
     }
 
+    static getDerivedStateFromProps(props: Props, state: State): State | null {
+        function convert(items: ShareItem[], path?: string): (TreeNodeNormal & { mime_type: string })[] {
+            return items.map(
+                (item): (TreeNodeNormal & { mime_type: string }) => {
+                    const isLeaf = item.type !== 'DIR';
+                    const key = `${path}${item.name}${isLeaf ? '' : '/'}`;
+                    return {
+                        key,
+                        isLeaf,
+                        title: item.name || 'root',
+                        mime_type: item.mime_type,
+                        children: convert(item.children, key),
+                    };
+                },
+            );
+        }
+
+        if (state.prevRoot !== props.treeData) {
+            return {
+                prevRoot: props.treeData,
+                treeData: convert([props.treeData], ''),
+            };
+        }
+
+        return null;
+    }
+
     private handleUploadShareFiles = (keys: string[]): Promise<void> => new Promise(() => {
         const { onUploadShareFiles, getTreeData } = this.props;
         const getItemTreeDataByPath = (data: any, partsPath: string[]): any => {
@@ -95,7 +118,7 @@ export class FileManagerContainer extends React.PureComponent<Props> {
             type: string;
             mime_type: string;
         }[]> => {
-            const { treeData } = this.props;
+            const { treeData } = this.state;
             let files: {
                 key: string;
                 type: string;
@@ -150,20 +173,22 @@ export class FileManagerContainer extends React.PureComponent<Props> {
 
     public render(): JSX.Element {
         const {
-            treeData,
-            share,
+            sharedStorageInitialized,
+            sharedStorageFetching,
             getTreeData,
             many,
             onChangeActiveKey,
             onUploadLocalFiles,
             onUploadRemoteFiles,
             onUploadCloudStorageFiles,
         } = this.props;
+        const { treeData } = this.state;
 
         return (
             <FileManagerComponent
                 treeData={treeData}
-                share={share}
+                sharedStorageInitialized={sharedStorageInitialized}
+                sharedStorageFetching={sharedStorageFetching}
                 many={many}
                 onLoadData={getTreeData}
                 onUploadLocalFiles={onUploadLocalFiles}