From 051316dde8e6a9d3651938b48b51217528af8240 Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Wed, 1 Feb 2023 18:07:40 +0300 Subject: [PATCH] Hotfix: Fix models page issues (#5655) - Added pagination - Fixed trackers & interactors --- cvat-ui/src/actions/annotation-actions.ts | 2 +- .../models-page/deployed-models-list.tsx | 38 +++++++++++++++---- .../components/models-page/models-page.tsx | 2 +- .../src/components/models-page/styles.scss | 5 ++- cvat-ui/src/reducers/annotation-reducer.ts | 2 +- .../opencv-wrapper/intelligent-scissors.ts | 2 + .../utils/opencv-wrapper/opencv-interfaces.ts | 2 +- .../utils/opencv-wrapper/opencv-wrapper.ts | 2 +- 8 files changed, 41 insertions(+), 14 deletions(-) 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', }, }; }