Hotfix: Fix models page issues (#5655)

- Added pagination
- Fixed trackers & interactors

cvat-ui/src/actions/annotation-actions.ts

@@ -1538,7 +1538,7 @@ export function repeatDrawShapeAsync(): ThunkAction {
 
         let activeControl = ActiveControl.CURSOR;
         if (activeInteractor && canvasInstance instanceof Canvas) {
-            if (activeInteractor.type.includes('tracker')) {
+            if (activeInteractor.kind.includes('tracker')) {
                 canvasInstance.interact({
                     enabled: true,
                     shapeType: 'rectangle',

cvat-ui/src/components/models-page/deployed-models-list.tsx

@@ -3,36 +3,58 @@
 //
 // SPDX-License-Identifier: MIT
 
-import React from 'react';
+import React, { useState } from 'react';
 import moment from 'moment';
 import { useSelector } from 'react-redux';
 import { Row, Col } from 'antd/lib/grid';
+import Pagination from 'antd/lib/pagination';
 import { CombinedState } from 'reducers';
 import { MLModel } from 'cvat-core-wrapper';
 import { ModelProviders } from 'cvat-core/src/enums';
 import DeployedModelItem from './deployed-model-item';
 
+const PAGE_SIZE = 12;
+
+function setUpModelsList(models: MLModel[], newPage: number): MLModel[] {
+    const builtInModels = models.filter((model: MLModel) => model.provider === ModelProviders.CVAT);
+    const externalModels = models.filter((model: MLModel) => model.provider !== ModelProviders.CVAT);
+    externalModels.sort((a, b) => moment(a.createdDate).valueOf() - moment(b.createdDate).valueOf());
+    const renderModels = [...builtInModels, ...externalModels];
+    return renderModels.slice((newPage - 1) * PAGE_SIZE, newPage * PAGE_SIZE);
+}
+
 export default function DeployedModelsListComponent(): JSX.Element {
     const interactors = useSelector((state: CombinedState) => state.models.interactors);
     const detectors = useSelector((state: CombinedState) => state.models.detectors);
     const trackers = useSelector((state: CombinedState) => state.models.trackers);
     const reid = useSelector((state: CombinedState) => state.models.reid);
     const classifiers = useSelector((state: CombinedState) => state.models.classifiers);
+    const totalCount = useSelector((state: CombinedState) => state.models.totalCount);
+    const [page, setPage] = useState(1);
     const models = [...interactors, ...detectors, ...trackers, ...reid, ...classifiers];
-    const builtInModels = models.filter((model: MLModel) => model.provider === ModelProviders.CVAT);
+    const items = setUpModelsList(models, page)
-    const externalModels = models.filter((model: MLModel) => model.provider !== ModelProviders.CVAT);
+        .map((model): JSX.Element => <DeployedModelItem key={model.id} model={model} />);
-    externalModels.sort((a, b) => moment(a.createdDate).valueOf() - moment(b.createdDate).valueOf());
-
-    const renderModels = [...builtInModels, ...externalModels];
-    const items = renderModels.map((model): JSX.Element => <DeployedModelItem key={model.id} model={model} />);
 
     return (
         <>
-            <Row justify='center' align='middle'>
+            <Row justify='center' align='top'>
                 <Col md={22} lg={18} xl={16} xxl={16} className='cvat-models-list'>
                     {items}
                 </Col>
             </Row>
+            <Row justify='center' align='middle'>
+                <Pagination
+                    className='cvat-tasks-pagination'
+                    onChange={(newPage: number) => {
+                        setPage(newPage);
+                    }}
+                    showSizeChanger={false}
+                    total={totalCount}
+                    current={page}
+                    pageSize={PAGE_SIZE}
+                    showQuickJumper
+                />
+            </Row>
         </>
     );
 }

cvat-ui/src/components/models-page/models-page.tsx

@@ -37,7 +37,7 @@ function ModelsPageComponent(): JSX.Element {
 
     useEffect(() => {
         dispatch(getModelProvidersAsync());
-        dispatch(getModelsAsync());
+        dispatch(getModelsAsync(updatedQuery));
     }, []);
 
     const content = totalCount ? (

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

@@ -12,6 +12,10 @@
     position: fixed;
     height: 100%;
     width: 100%;
+
+    >div:nth-child(2) {
+        height: 80%;
+    }
 }
 
 .cvat-empty-models-list {
@@ -22,7 +26,6 @@
 }
 
 .cvat-models-list {
-    height: 100%;
     display: flex;
     flex-wrap: wrap;
 }

cvat-ui/src/reducers/annotation-reducer.ts

@@ -1078,7 +1078,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
                 },
                 canvas: {
                     ...state.canvas,
-                    activeControl: activeInteractor.type.startsWith('opencv') ?
+                    activeControl: activeInteractor.kind.startsWith('opencv') ?
                         ActiveControl.OPENCV_TOOLS :
                         ActiveControl.AI_TOOLS,
                 },

cvat-ui/src/utils/opencv-wrapper/intelligent-scissors.ts

@@ -19,6 +19,7 @@ export interface IntelligentScissorsParams {
 }
 
 export interface IntelligentScissors {
+    kind: string;
     reset(): void;
     run(points: number[], image: ImageData, offsetX: number, offsetY: number): number[];
     params: IntelligentScissorsParams;
@@ -35,6 +36,7 @@ function applyOffset(points: Point[], offsetX: number, offsetY: number): Point[]
 }
 
 export default class IntelligentScissorsImplementation implements IntelligentScissors {
+    public kind = 'opencv_intelligent_scissors';
     private cv: any;
     private onChangeToolsBlockerState: (event:string)=>void;
     private scissors: {

cvat-ui/src/utils/opencv-wrapper/opencv-interfaces.ts

@@ -22,6 +22,6 @@ export interface TrackerModel {
 export interface OpenCVTracker {
     name: string;
     description: string;
-    type: string;
+    kind: string;
     model: (() => TrackerModel);
 }

cvat-ui/src/utils/opencv-wrapper/opencv-wrapper.ts

@@ -172,7 +172,7 @@ export class OpenCVWrapper {
                 model: () => new TrackerMImplementation(this.cv),
                 name: 'TrackerMIL',
                 description: 'Light client-side model useful to track simple objects',
-                type: 'opencv_tracker_mil',
+                kind: 'opencv_tracker_mil',
             },
         };
     }