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 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 => <DeployedModelItem key={model.id} model={model} />);
+ const items = setUpModelsList(models, page)
+ .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',
  },
  };
  }