diff --git a/cvat-ui/src/actions/annotation-actions.ts b/cvat-ui/src/actions/annotation-actions.ts
index aae77d1a810..3118999ad6f 100644
--- a/cvat-ui/src/actions/annotation-actions.ts
+++ b/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',
diff --git a/cvat-ui/src/components/models-page/deployed-models-list.tsx b/cvat-ui/src/components/models-page/deployed-models-list.tsx
index 1caf9d40e79..5bc279d0f32 100644
--- a/cvat-ui/src/components/models-page/deployed-models-list.tsx
+++ b/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 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];
- const items = renderModels.map((model): JSX.Element => );
+ const items = setUpModelsList(models, page)
+ .map((model): JSX.Element => );
return (
<>
-
+
{items}
+
+ {
+ setPage(newPage);
+ }}
+ showSizeChanger={false}
+ total={totalCount}
+ current={page}
+ pageSize={PAGE_SIZE}
+ showQuickJumper
+ />
+
>
);
}
diff --git a/cvat-ui/src/components/models-page/models-page.tsx b/cvat-ui/src/components/models-page/models-page.tsx
index bb0ef2f5039..3a567dd64bb 100644
--- a/cvat-ui/src/components/models-page/models-page.tsx
+++ b/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 ? (
diff --git a/cvat-ui/src/components/models-page/styles.scss b/cvat-ui/src/components/models-page/styles.scss
index b84d71cb4d2..4d1d55cb194 100644
--- a/cvat-ui/src/components/models-page/styles.scss
+++ b/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;
}
diff --git a/cvat-ui/src/reducers/annotation-reducer.ts b/cvat-ui/src/reducers/annotation-reducer.ts
index c704d49361e..4c033a522c6 100644
--- a/cvat-ui/src/reducers/annotation-reducer.ts
+++ b/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,
},
diff --git a/cvat-ui/src/utils/opencv-wrapper/intelligent-scissors.ts b/cvat-ui/src/utils/opencv-wrapper/intelligent-scissors.ts
index 4add4ca2664..a73f8b38911 100644
--- a/cvat-ui/src/utils/opencv-wrapper/intelligent-scissors.ts
+++ b/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: {
diff --git a/cvat-ui/src/utils/opencv-wrapper/opencv-interfaces.ts b/cvat-ui/src/utils/opencv-wrapper/opencv-interfaces.ts
index ecbf75e11f2..73235161280 100644
--- a/cvat-ui/src/utils/opencv-wrapper/opencv-interfaces.ts
+++ b/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);
}
diff --git a/cvat-ui/src/utils/opencv-wrapper/opencv-wrapper.ts b/cvat-ui/src/utils/opencv-wrapper/opencv-wrapper.ts
index 4e1bf17bff5..3e0a4154bc4 100644
--- a/cvat-ui/src/utils/opencv-wrapper/opencv-wrapper.ts
+++ b/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',
},
};
}