feat(annotator): update annotator component

IDEA-Research · Dec 26, 2023 · af938e9 · af938e9
1 parent 6112526
commit af938e9
Show file tree

Hide file tree

Showing 111 changed files with 7,125 additions and 2,924 deletions.
diff --git a/packages/app/src/models/dataset/common.tsx b/packages/app/src/models/dataset/common.tsx
@@ -30,7 +30,6 @@ import {
   PageState,
 } from './type';
 import { isNumber } from 'lodash';
-import { IAnnotationObject } from 'dds-components/Annotator';
 import { NsDataSet } from '@/types/dataset';
 
 export default () => {
@@ -275,6 +274,40 @@ export default () => {
         displayLabelIds,
         isTiledDiff,
       };
+
+      // filter displayType
+      const displayType = pageState.filterValues.displayAnnotationType;
+      objects = objects
+        .filter((obj) => {
+          return (
+            (obj.mask && displayType === AnnotationType.Mask) ||
+            (obj.alpha && displayType === AnnotationType.Matting) ||
+            (obj.points && displayType === AnnotationType.KeyPoints) ||
+            (obj.segmentation && displayType === AnnotationType.Segmentation) ||
+            (obj.boundingBox && displayType === AnnotationType.Detection)
+          );
+        })
+        .map((obj) => {
+          return {
+            ...obj,
+            mask: displayType === AnnotationType.Mask ? obj.mask : undefined,
+            alpha:
+              displayType === AnnotationType.Matting ? obj.alpha : undefined,
+            points:
+              displayType === AnnotationType.KeyPoints ? obj.points : undefined,
+            segmentation:
+              displayType === AnnotationType.Segmentation
+                ? obj.segmentation
+                : undefined,
+            boundingBox: [
+              AnnotationType.Detection,
+              AnnotationType.KeyPoints,
+            ].includes(displayType!)
+              ? obj.boundingBox
+              : undefined,
+          };
+        });
+
       // Analysis mode -> filter fn/fp to display
       if (analysisMode) {
         const predObjects = objects.filter(
@@ -314,37 +347,69 @@ export default () => {
         });
       }
 
-      return objects.filter((item) => {
-        const { showAnnotations, showAllCategory } = displayOptionsResult;
-        const categoryId = pageState.filterValues.categoryId || '';
-        if (
-          !showAnnotations ||
-          (!showAllCategory && item.categoryId !== categoryId) ||
-          (diffMode &&
-            item.labelId &&
-            !diffMode.displayLabelIds.includes(item.labelId)) ||
-          (diffMode &&
-            diffMode.isTiledDiff &&
-            item.labelId !== imageData.curLabelId)
-        ) {
-          return false;
-        }
-        if (!analysisMode && diffMode) {
-          const label = diffMode.labels.find(
-            (label) => label.id === item.labelId,
-          );
-          if (!label) return false;
-          if (label.source === LABEL_SOURCE.gt) return true;
-          return (
-            item.conf !== undefined &&
-            item.conf >= label?.confidenceRange[0] &&
-            item.conf <= label?.confidenceRange[1]
+      return objects
+        .filter((item) => {
+          const { showAnnotations, showAllCategory } = displayOptionsResult;
+          const categoryId = pageState.filterValues.categoryId || '';
+          if (
+            !showAnnotations ||
+            (!showAllCategory && item.categoryId !== categoryId) ||
+            (diffMode &&
+              item.labelId &&
+              !diffMode.displayLabelIds.includes(item.labelId)) ||
+            (diffMode &&
+              diffMode.isTiledDiff &&
+              item.labelId !== imageData.curLabelId)
+          ) {
+            return false;
+          }
+          if (!analysisMode && diffMode) {
+            const label = diffMode.labels.find(
+              (label) => label.id === item.labelId,
+            );
+            if (!label) return false;
+            if (label.source === LABEL_SOURCE.gt) return true;
+            return (
+              item.conf !== undefined &&
+              item.conf >= label?.confidenceRange[0] &&
+              item.conf <= label?.confidenceRange[1]
+            );
+          }
+          return true;
+        })
+        .map((item) => {
+          // get custom style
+          const newItem = { ...item };
+          const {
+            colorAplha: pointAplha,
+            strokeDash,
+            lineWidth: thickness,
+          } = getLabelCustomStyles(
+            item.labelId,
+            displayLabelIds,
+            isTiledDiff || Boolean(pageState.comparisons),
           );
-        }
-        return true;
-      });
+          if (analysisMode && item.compareResult) {
+            newItem.customStyles = {
+              pointAplha,
+              strokeDash,
+              thickness,
+              fillColor:
+                // @ts-ignore
+                COMPARE_RESULT_FILL_COLORS[item.compareResult] || 'transparent',
+            };
+          } else {
+            newItem.customStyles = {
+              pointAplha,
+              strokeDash,
+              thickness,
+            };
+          }
+          return newItem;
+        });
     },
     [
+      pageState.filterValues.displayAnnotationType,
       pageState.comparisons,
       pageData.filters.labels,
       displayLabelIds,
@@ -353,35 +418,6 @@ export default () => {
     ],
   );
 
-  const getCustomObjectStyles = useCallback(
-    (object: IAnnotationObject) => {
-      const {
-        colorAplha: pointAplha,
-        strokeDash,
-        lineWidth: thickness,
-      } = getLabelCustomStyles(
-        object.labelId,
-        displayLabelIds,
-        isTiledDiff || Boolean(pageState.comparisons),
-      );
-      if (Boolean(pageState.comparisons) && object.compareResult) {
-        return {
-          pointAplha,
-          strokeDash,
-          thickness,
-          fillColor:
-            COMPARE_RESULT_FILL_COLORS[object.compareResult] || 'transparent',
-        };
-      }
-      return {
-        pointAplha,
-        strokeDash,
-        thickness,
-      };
-    },
-    [displayLabelIds, isTiledDiff, Boolean(pageState.comparisons)],
-  );
-
   return {
     // page var
     pageState,
@@ -405,6 +441,5 @@ export default () => {
 
     // common render
     displayObjectsFilter,
-    getCustomObjectStyles,
   };
 };
diff --git a/packages/app/src/pages/Annotator/index.tsx b/packages/app/src/pages/Annotator/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useModel } from '@umijs/max';
+import { history, useModel } from '@umijs/max';
 import styles from './index.less';
 import { AnnotateEditor, EditorMode } from 'dds-components/Annotator';
 import { ImageList } from './components/ImageList';
@@ -102,6 +102,7 @@ const Page: React.FC = () => {
       </div>
       <div className={styles.right}>
         <AnnotateEditor
+          isOldMode
           isSeperate={true}
           visible={true}
           mode={EditorMode.Edit}
@@ -123,6 +124,7 @@ const Page: React.FC = () => {
               }
             });
           }}
+          onCancel={() => history.push('/')}
         />
       </div>
       <div

diff --git a/packages/app/src/pages/Dataset/index.tsx b/packages/app/src/pages/Dataset/index.tsx
@@ -27,7 +27,6 @@ const Page: React.FC = () => {
     onPreviewIndexChange,
     exitPreview,
     displayObjectsFilter,
-    getCustomObjectStyles,
   } = useModel('dataset.common');
   const {
     onPageDidMount,
@@ -111,17 +110,14 @@ const Page: React.FC = () => {
                     }}
                   >
                     <AnnotateView
+                      isOldMode
                       categories={pageData.filters.categories}
                       data={item}
                       wrapWidth={itemWidth}
                       wrapHeight={flagTools ? (itemWidth * 3) / 4 : undefined}
                       minHeight={(itemWidth * 3) / 4}
                       objectsFilter={displayObjectsFilter}
-                      getCustomObjectStyles={getCustomObjectStyles}
                       displayOptionsResult={displayOptionsResult}
-                      displayAnnotationType={
-                        pageState.filterValues.displayAnnotationType
-                      }
                     />
                   </div>
                   {item.flag > 0 && (
@@ -157,6 +153,7 @@ const Page: React.FC = () => {
       )}
       {/* Preview */}
       <AnnotatePreview
+        isOldMode
         visible={pageState.previewIndex >= 0 && !isSingleAnnotation}
         categories={pageData.filters.categories}
         list={imgList}
@@ -171,9 +168,7 @@ const Page: React.FC = () => {
             onPreviewIndexChange(pageState.previewIndex - 1);
         }}
         objectsFilter={displayObjectsFilter}
-        getCustomObjectStyles={getCustomObjectStyles}
         displayOptionsResult={displayOptionsResult}
-        displayAnnotationType={pageState.filterValues.displayAnnotationType}
       />
       {/* Screen loading */}
       {pageData.screenLoading ? (

diff --git a/packages/app/src/pages/Lab/FlagTool/index.tsx b/packages/app/src/pages/Lab/FlagTool/index.tsx
@@ -27,7 +27,6 @@ const Page: React.FC = () => {
     onPreviewIndexChange,
     exitPreview,
     displayObjectsFilter,
-    getCustomObjectStyles,
   } = useModel('dataset.common');
   const {
     onPageDidMount,
@@ -108,17 +107,14 @@ const Page: React.FC = () => {
                     }}
                   >
                     <AnnotateView
+                      isOldMode
                       categories={pageData.filters.categories}
                       data={item}
                       wrapWidth={itemWidth}
                       wrapHeight={flagTools ? (itemWidth * 3) / 4 : undefined}
                       minHeight={(itemWidth * 3) / 4}
                       objectsFilter={displayObjectsFilter}
-                      getCustomObjectStyles={getCustomObjectStyles}
                       displayOptionsResult={displayOptionsResult}
-                      displayAnnotationType={
-                        pageState.filterValues.displayAnnotationType
-                      }
                     />
                   </div>
                   {item.flag > 0 && (
@@ -154,6 +150,7 @@ const Page: React.FC = () => {
       )}
       {/* Preview */}
       <AnnotatePreview
+        isOldMode
         visible={pageState.previewIndex >= 0 && !isSingleAnnotation}
         categories={pageData.filters.categories}
         list={imgList}
@@ -168,9 +165,7 @@ const Page: React.FC = () => {
             onPreviewIndexChange(pageState.previewIndex - 1);
         }}
         objectsFilter={displayObjectsFilter}
-        getCustomObjectStyles={getCustomObjectStyles}
         displayOptionsResult={displayOptionsResult}
-        displayAnnotationType={pageState.filterValues.displayAnnotationType}
       />
       {/* Screen loading */}
       {pageData.screenLoading ? (

diff --git a/packages/app/src/pages/Project/Workspace/index.tsx b/packages/app/src/pages/Project/Workspace/index.tsx
@@ -44,7 +44,8 @@ const Page: React.FC = () => {
     onNextImage,
     onPrevImage,
     onLabelSave,
-    onReviewResult,
+    onReviewAccept,
+    onReviewReject,
     onEnterEdit,
     onStartLabel,
     onStartRework,
@@ -239,6 +240,7 @@ const Page: React.FC = () => {
                         }}
                       >
                         <AnnotateView
+                          isOldMode
                           categories={pageData.categoryList}
                           data={item}
                           wrapWidth={itemWidth}
@@ -261,6 +263,7 @@ const Page: React.FC = () => {
       {isEditorVisible && (
         <div className={styles.editor}>
           <AnnotateEditor
+            isOldMode
             isSeperate={false}
             mode={pageData.editorMode}
             visible={isEditorVisible}
@@ -287,8 +290,8 @@ const Page: React.FC = () => {
             actionElements={actionElements}
             onCancel={onExitEditor}
             onSave={onLabelSave}
-            onReviewResult={onReviewResult}
-            onEnterEdit={onEnterEdit}
+            onReviewAccept={onReviewAccept}
+            onReviewReject={onReviewReject}
             onNext={onNextImage}
             onPrev={onPrevImage}
           />

diff --git a/packages/app/src/pages/Project/models/workspace.ts b/packages/app/src/pages/Project/models/workspace.ts
@@ -419,6 +419,14 @@ export default () => {
     setLoading(false);
   };
 
+  const onReviewAccept = async (imageId: string) => {
+    return await onReviewResult(imageId, EQaAction.Accept);
+  };
+
+  const onReviewReject = async (imageId: string) => {
+    return await onReviewResult(imageId, EQaAction.Reject);
+  };
+
   /**
    * Initialize page parameters from the URL.
    * @param urlPageState
@@ -487,6 +495,8 @@ export default () => {
     onNextImage,
     onLabelSave,
     onReviewResult,
+    onReviewAccept,
+    onReviewReject,
     onEnterEdit,
     onStartLabel,
     onStartRework,

diff --git a/packages/app/src/types/dataset.ts b/packages/app/src/types/dataset.ts
@@ -24,6 +24,8 @@ export namespace NsDataSet {
     compareResult: COMPARE_RESULT;
     /** Pred index matched in GT analysis mode. */
     matchedDetIdx?: number;
+    /** render styles */
+    customStyles?: Record<string, any>;
   }
 
   export interface DataSetImg extends BaseImage {

diff --git a/packages/components/src/Annotator/assets/add-prompt.svg b/packages/components/src/Annotator/assets/add-prompt.svg
diff --git a/packages/components/src/Annotator/assets/attribute.svg b/packages/components/src/Annotator/assets/attribute.svg
diff --git a/packages/components/src/Annotator/assets/brush.svg b/packages/components/src/Annotator/assets/brush.svg
diff --git a/packages/components/src/Annotator/assets/delete_all.svg b/packages/components/src/Annotator/assets/delete_all.svg