ITEP-68000 - Import keypoint detection - p2 (#489)

Author: camiloHimura

web_ui/src/core/datasets/dataset.interface.ts

@@ -83,6 +83,10 @@ export interface DatasetImportTask {
     keypointStructure?: KeypointStructureDTO;
 }
 
+export interface DatasetImportKeypointTask extends DatasetImportTask {
+    keypointStructure: KeypointStructureDTO;
+}
+
 export interface DatasetImportConnection {
     from: string;
     to: string;

web_ui/src/core/projects/services/utils.ts

@@ -257,7 +257,10 @@ const isKeypointType = (otherTask: TaskDTO | KeypointTaskDTO): otherTask is Keyp
     return domain !== undefined && isKeypointDetection(domain);
 };
 
-const getKeypointStructure = (structureDTO: KeypointStructureDTO, labels: Label[]): KeypointStructure => {
+export const formatDtoToKeypointStructure = (
+    structureDTO: KeypointStructureDTO,
+    labels: Label[]
+): KeypointStructure => {
     return {
         ...structureDTO,
         positions: structureDTO.positions.map((position) => {
@@ -293,7 +296,7 @@ export const getProjectEntity = (serverProject: ProjectDTO, router = API_URLS):
             return isKeypointType(task)
                 ? {
                       ...commonStructure,
-                      keypointStructure: getKeypointStructure(task.keypoint_structure, commonStructure.labels),
+                      keypointStructure: formatDtoToKeypointStructure(task.keypoint_structure, commonStructure.labels),
                   }
                 : commonStructure;
         })

web_ui/src/pages/annotator/tools/keypoint-tool/secondary-toolbar.component.tsx

@@ -7,11 +7,12 @@ import { Delete, LineMappingLight, Reject } from '@geti/ui/icons';
 import { isKeypointAnnotation } from '../../../../core/annotations/services/utils';
 import { labelFromUser } from '../../../../core/annotations/utils';
 import { AcceptButton } from '../../../../shared/components/quiet-button/accept-button.component';
+import { PointAxis } from '../../../utils';
 import { useVisibleAnnotations } from '../../hooks/use-visible-annotations.hook';
 import { useZoom } from '../../zoom/zoom-provider.component';
 import { ToolAnnotationContextProps } from '../tools.interface';
 import { useKeypointState } from './keypoint-state-provider.component';
-import { getAnnotationInBoundingBox, getInnerPaddedBoundingBox, mirrorPointsAcrossAxis, PointAxis } from './utils';
+import { getAnnotationInBoundingBox, getInnerPaddedBoundingBox, mirrorPointsAcrossAxis } from './utils';
 
 export const SecondaryToolbar = ({ annotationToolContext }: ToolAnnotationContextProps) => {
     const { zoomState } = useZoom();

web_ui/src/pages/annotator/tools/keypoint-tool/utils.test.ts

@@ -4,6 +4,7 @@
 import { KeypointStructure } from '../../../../core/projects/task.interface';
 import { getMockedKeypointNode } from '../../../../test-utils/mocked-items-factory/mocked-keypoint';
 import { getMockedLabel } from '../../../../test-utils/mocked-items-factory/mocked-labels';
+import { PointAxis } from '../../../utils';
 import {
     CursorDirection,
     getAnnotationInBoundingBox,
@@ -18,7 +19,6 @@ import {
     groupByFirstNode,
     mirrorPointsAcrossAxis,
     PADDING_MULTIPLIER,
-    PointAxis,
     rotatePointsAroundPivot,
 } from './utils';
 

web_ui/src/pages/annotator/tools/keypoint-tool/utils.ts

@@ -13,14 +13,9 @@ import { KeypointNode, Point } from '../../../../core/annotations/shapes.interfa
 import { ShapeType } from '../../../../core/annotations/shapetype.enum';
 import { KeypointStructure } from '../../../../core/projects/task.interface';
 import { isNonEmptyString } from '../../../../shared/utils';
-import { KEYPOINT_RADIUS } from '../../../utils';
+import { getMaxMinPoint, KEYPOINT_RADIUS, PointAxis } from '../../../utils';
 import { createAnnotation } from '../../utils';
 
-export enum PointAxis {
-    X = 'x',
-    Y = 'y',
-}
-
 export enum CursorDirection {
     SouthEast = 'south-east',
     SouthWest = 'south-west',
@@ -194,12 +189,6 @@ export const getTemplateWithDirection = (templatePoints: KeypointNode[], cursorD
     return templatePoints;
 };
 
-const getMaxMinPoint = <T extends Point>(points: T[], pointAxis: PointAxis) => {
-    const minAxisValue = Math.min(...points.map((point) => point[pointAxis]));
-    const maxAxisValue = Math.max(...points.map((point) => point[pointAxis]));
-    return [minAxisValue, maxAxisValue];
-};
-
 export const getPoseLocations = (points: KeypointNode[], gap: number): PoseLocations => {
     const [minX, maxX] = getMaxMinPoint(points, PointAxis.X);
     const [minY, maxY] = getMaxMinPoint(points, PointAxis.Y);

web_ui/src/pages/create-project/components/pose-template/canvas/canvas-template.component.tsx

@@ -16,16 +16,13 @@ import { KeyMap } from '../../../../../shared/keyboard-events/keyboard.interface
 import { getIds, hasDifferentId } from '../../../../../shared/utils';
 import { ClosestKeypoint } from '../../../../annotator/tools/edit-tool/edit-keypoint/closest-keypoint.component';
 import { useZoom } from '../../../../annotator/zoom/zoom-provider.component';
-import { getPointInRoi } from '../../../../utils';
+import { EdgeLine, getPointInRoi, TemplateState, TemplateStateWithHistory } from '../../../../utils';
 import {
-    EdgeLine,
     getDefaultLabelStructure,
     isDifferentLabel,
     isEdgeConnectingPoints,
     isEqualLabel,
     isNotMatchingEdge,
-    TemplateState,
-    TemplateStateWithHistory,
     updateWithLatestPoints,
 } from '../util';
 import { DrawingBox } from './drawing-box.component';
@@ -61,6 +58,7 @@ export const CanvasTemplate = ({
 
     const isDrawingGhostLine = !isNil(ghostLine?.from);
     const selectedPoint = points.find(({ label }) => isSelected(label.id));
+    const nextPointName = String(points.length + 1);
 
     const isShiftPress = useIsPressed({
         key: KeyMap.Shift,
@@ -110,6 +108,7 @@ export const CanvasTemplate = ({
 
     const handleDeletePoint = (point: KeypointNode) => {
         onStateUpdate({
+            skipHistory: false,
             points: points.filter(isDifferentLabel(point)),
             edges: edges.filter((currentEdge) => {
                 return isDifferentLabel(currentEdge.from)(point) && isDifferentLabel(currentEdge.to)(point);
@@ -168,10 +167,10 @@ export const CanvasTemplate = ({
                     border: '1px solid var(--spectrum-global-color-gray-200)',
                 }}
             >
-                {isAddPointEnabled && (
+                {isAddPointEnabled && nextPointName !== null && (
                     <DrawingBox
-                        totalPoints={points.length + 1}
                         onAddPoint={handleNewPoint}
+                        nextPointName={nextPointName}
                         onPointerMove={handleGhostLineEndMoving}
                     />
                 )}

web_ui/src/pages/create-project/components/pose-template/canvas/drawing-box.component.tsx

@@ -10,12 +10,12 @@ import { getRelativePoint, leftMouseButtonHandler } from '../../../../utils';
 import { getDefaultLabelStructure } from '../util';
 
 interface DrawingBoxProps {
-    totalPoints: number;
+    nextPointName: string;
     onAddPoint: (point: KeypointNode) => void;
     onPointerMove: (point: Point) => void;
 }
 
-export const DrawingBox = ({ totalPoints, onAddPoint, onPointerMove }: DrawingBoxProps) => {
+export const DrawingBox = ({ nextPointName, onAddPoint, onPointerMove }: DrawingBoxProps) => {
     const canvasRef = useRef<SVGRectElement>(null);
     const { zoomState } = useZoom();
 
@@ -29,7 +29,7 @@ export const DrawingBox = ({ totalPoints, onAddPoint, onPointerMove }: DrawingBo
         }
 
         onAddPoint({
-            label: getDefaultLabelStructure(String(totalPoints)),
+            label: getDefaultLabelStructure(nextPointName),
             isVisible: true,
             ...getRelativePoint(canvasRef.current, { x: event.clientX, y: event.clientY }, zoomState.zoom),
         });

web_ui/src/pages/create-project/components/pose-template/canvas/point-edges.component.tsx

@@ -6,7 +6,7 @@ import { Delete } from '@geti/ui/icons';
 
 import { KeypointNode, Point } from '../../../../../core/annotations/shapes.interface';
 import { useSelected } from '../../../../../providers/selected-provider/selected-provider.component';
-import { EdgeLine } from '../util';
+import { EdgeLine } from '../../../../utils';
 import { Edge } from './edge.component';
 
 interface PointEdgesProps {

web_ui/src/pages/create-project/components/pose-template/hooks/use-undo-redo-with-callback.hook.ts

@@ -5,7 +5,7 @@ import { useEffect, useRef } from 'react';
 
 import { runWhen } from '../../../../../shared/utils';
 import useUndoRedoState, { UseUndoRedoState } from '../../../../annotator/tools/undo-redo/use-undo-redo-state';
-import { TemplateState } from '../util';
+import { TemplateState } from '../../../../utils';
 
 export const useUndoRedoWithCallback = (
     initialState: TemplateState,

web_ui/src/pages/create-project/components/pose-template/pose-template.component.tsx

@@ -10,11 +10,12 @@ import { RegionOfInterest } from '../../../../core/annotations/annotation.interf
 import { TaskMetadata } from '../../../../core/projects/task.interface';
 import { SliderAnimation } from '../../../../shared/components/slider-animation/slider-animation.component';
 import { isNonEmptyString } from '../../../../shared/utils';
+import { TemplateState } from '../../../utils';
 import { ProjectMetadata } from '../../new-project-dialog-provider/new-project-dialog-provider.interface';
 import { getLabelsNamesErrors } from '../../utils';
 import { InfoSection } from '../info-section/info-section.component';
 import { TemplateManager } from './template-manager.component';
-import { getProjectTypeMetadata, TemplateState } from './util';
+import { getProjectTypeMetadata } from './util';
 
 export interface PoseTemplateProps {
     metadata: TaskMetadata[];