BACKOFFICE FE/UI/Labeling Tool: Update UI/UX handle qc_status (#11)

* update my config * fix icon * update code * update code * update ocde * update code * update code * update code prod * update code * update * update env * update .env * BACKOFFICE FE/UI/Labeling Tool: Update UI/UX handle qc_status * update fix scss * update code * move qc status and qc comment * reverse format package json * fix bug login when small screen 1440 and comment issue * change to previous code format * change format to previous Co-authored-by: cuong <[email protected]>
ocmg-it · Sep 28, 2022 · 20df357 · 20df357 · vercel · Sep 28, 2022
1 parent f380620
commit 20df357
Show file tree

Hide file tree

Showing 23 changed files with 140 additions and 37 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,4 @@
+<!-- REACT_APP_API_ROOT=/labeler -->
+REACT_APP_API_URL=https://dev.ocmg.vn/showniq/api/backoffice
+REACT_APP_API_ROOT=""
+<!-- PUBLIC_URL=/labeler -->
diff --git a/Dockerfile b/Dockerfile
@@ -12,7 +12,7 @@ COPY . /usr/src/app
 COPY package.json ./
 RUN npm install
 RUN npm rebuild node-sass
-
+RUN export PUBLIC_URL=http://localhost:3000/labeler
 # Build frontend
 # FROM cache-image as builder
 # WORKDIR /usr/src/app

diff --git a/src/App.scss b/src/App.scss
@@ -4,6 +4,8 @@
     --leading-color: #{$secondaryColor};
     --button-text-color: #{white};
     --hue-value: 172deg;
+    --red-value: -15deg;
+    --green-value: 35deg;
     position: relative;
     margin-left: auto;
     margin-right: auto;

diff --git a/src/logic/export/RectLabelsExporter.ts b/src/logic/export/RectLabelsExporter.ts
@@ -277,7 +277,7 @@ export class RectLabelsExporter {
 
         const getHumanIndex = (uuid: string) =>
             imageData.humans.findIndex((human) => human.uuid === uuid);
-
+        
         const json: RectJSON = {
             //@ts-ignore
             img_path: imageData.fileData.path,
@@ -290,20 +290,25 @@ export class RectLabelsExporter {
                         (labelRect) => labelRect.id === human.uuid
                     ).rect
                 ),
-                style: human.styles
+                style: human.styles,
+                qc_status: human.qc_status,
+                qc_comment: human.qc_comment,
             })),
             item_info: imageData.items.map((item) => ({
                 item_id: `${getHumanIndex(item.humanId)}:${item.gender}:${
                     item.mainCategory
                 }:${item.subCategory}:${item.uuid}:${item.color}:${
                     item.pattern
                 }`,
+
                 bounding_box: convertRect(
                     imageData.labelRects.find(
                         (labelRect) => labelRect.id === item.uuid
                     ).rect
                 ),
-                style: item.styles
+                style: item.styles,
+                qc_status: item.qc_status,
+                qc_comment: item.qc_comment,
             }))
         };
         return json;

diff --git a/src/logic/import/MJ/MJUtils.ts b/src/logic/import/MJ/MJUtils.ts
@@ -55,23 +55,28 @@ export class MJUtils {
         if (typeof rawAnnotation === 'string') {
             annotation = JSON.parse(rawAnnotation) as RectJSON;
         }
-        // console.log('annotation', annotation);
+        // console.log(131231, annotation)
+
         const humansLabelRects: LabelRect[] = annotation.human_info.map(
             (human) => {
                 const {lt_x, lt_y, rb_x, rb_y} = human.bounding_box;
                 const rectX: number = lt_x;
                 const rectY: number = lt_y;
                 const rectWidth: number = Math.abs(rb_x - lt_x);
                 const rectHeight: number = Math.abs(rb_y - lt_y);
+                const qc_status: string = human.qc_status
+                const qc_comment: string = human.qc_comment
                 // console.log('rect = ', rectX, rectY, rectWidth, rectHeight);
                 const rect = {
                     x: rectX,
                     y: rectY,
                     width: rectWidth,
-                    height: rectHeight
+                    height: rectHeight,
                 };
                 const aLabel = LabelUtil.createLabelRect(human.style[0], rect);
                 aLabel.mode = LabelModeType.HUMAN;
+                aLabel.qc_status = qc_status
+                aLabel.qc_comment = qc_comment
                 return aLabel;
             }
         );
@@ -82,6 +87,8 @@ export class MJUtils {
                 const rectY: number = lt_y;
                 const rectWidth: number = Math.abs(rb_x - lt_x);
                 const rectHeight: number = Math.abs(rb_y - lt_y);
+                const qc_status: string = item.qc_status
+                const qc_comment: string = item.qc_comment
                 // console.log('rect = ', rectX, rectY, rectWidth, rectHeight);
                 const rect = {
                     x: rectX,
@@ -94,6 +101,8 @@ export class MJUtils {
                 const [, , , , uuid, ,] = item.item_id.split(':');
                 aLabel.mode = LabelModeType.ITEM;
                 aLabel.id = uuid;
+                aLabel.qc_status = qc_status
+                aLabel.qc_comment = qc_comment
                 return aLabel;
             }
         );
@@ -106,7 +115,9 @@ export class MJUtils {
                 id: parseInt(id),
                 gender: parseInt(gender),
                 type: parseInt(type),
-                styles: human.style
+                styles: human.style,
+                qc_comment: human.qc_comment,
+                qc_status: human.qc_status
             };
         });
         const items = annotation.item_info.map((item, itemIdx) => {
@@ -130,7 +141,9 @@ export class MJUtils {
                 subCategory: parseInt(subCategory),
                 color: parseInt(color),
                 pattern: parseInt(pattern),
-                styles: item.style
+                styles: item.style,
+                qc_comment: item.qc_comment,
+                qc_status: item.qc_status
             };
         });
 

diff --git a/src/services/types.ts b/src/services/types.ts
@@ -8,4 +8,5 @@ export type APIImageData = {
     labeling_json?: string;
     image_width: string;
     image_height: string;
+    image_status: string;
 };
diff --git a/src/settings/Settings.ts b/src/settings/Settings.ts
@@ -1,4 +1,4 @@
-import {PopupWindowType} from '../data/enums/PopupWindowType';
+import { PopupWindowType } from '../data/enums/PopupWindowType';
 
 export class Settings {
     public static readonly GITHUB_URL: string = 'https://github.com/SkalskiP';
@@ -76,8 +76,8 @@ export class Settings {
     ];
 
     public static readonly API_PREFIX =
-        // 'https://dev.ocmg.vn/fs-app/api/backoffice';
-        'https://dev.ocmg.vn/showniq/api/backoffice/';
+        process.env.REACT_APP_API_URL || 'https://dev.ocmg.vn/showniq/api/backoffice'
+    // 'https://dev.ocmg.vn/fs-app/api/backoffice';
 
     public static readonly UNKNOWN_URL = 'guides/icons/unknown.png';
     public static readonly UNKNOWN_S_URL = 'guides/icons/unknown_s.png';

diff --git a/src/settings/_Settings.scss b/src/settings/_Settings.scss
@@ -5,7 +5,9 @@ $darkThemeForthColor: #262c2f;
 
 $primaryColor: #2af598;
 $secondaryColor: #009efd;
-
+$dangerColor: #FF0006;
+$lightSuccess: #00ff21;
+$successColor: #2DBBA6;
 $topNavigationBarHeight: 35px;
 $stateBarHeight: 2px;
 $sideNavigationBarCompanionWidth: 23px;

diff --git a/src/store/labels/types.ts b/src/store/labels/types.ts
@@ -20,6 +20,8 @@ export type LabelRect = {
     isCreatedByAI: boolean;
     status: LabelStatus;
     suggestedLabel: string;
+    qc_status?: string;
+    qc_comment?: string
 };
 
 export type LabelPoint = {
@@ -58,6 +60,8 @@ export type HumanInfo = {
     gender: number;
     type: number;
     styles: string[];
+    qc_status?: string;
+    qc_comment?: string
 };
 
 export type ItemInfo = {
@@ -70,9 +74,14 @@ export type ItemInfo = {
     color: number;
     pattern: number;
     styles: string[];
+    qc_status?: string;
+    qc_comment?: string;
 };
 
 export type ImageData = {
+    image_status?: any;
+    qc_status? : string;
+    qc_comment?: string;
     id: string;
     fileData: File;
     loadStatus: boolean;
@@ -84,7 +93,6 @@ export type ImageData = {
     humans: HumanInfo[];
     items: ItemInfo[];
     guideStyles?: {seq: string; name: string}[];
-
     uploadStatus?: JSONUploadStatus;
 
     // SSD
@@ -107,6 +115,8 @@ export type RectJSON = {
             rb_y: number;
         };
         style: string[];
+        qc_status?: string;
+        qc_comment?: string;
     }[];
     item_info: {
         item_id: string;
@@ -117,6 +127,8 @@ export type RectJSON = {
             rb_y: number;
         };
         style: string[];
+        qc_status?: string;
+        qc_comment?: string;
     }[];
 };
 

diff --git a/src/utils/ImageDataUtil.ts b/src/utils/ImageDataUtil.ts
@@ -19,10 +19,12 @@ export class ImageDataUtil {
             isVisitedByObjectDetector: false,
             isVisitedByPoseDetector: false,
             humans: [],
-            items: []
+            items: [],
+            image_status: ""
         };
     }
     public static createImageDataFromAPIData(apiData: APIImageData): ImageData {
+
         const data: ImageData = {
             id: apiData.image_id,
             fileData: {
@@ -41,7 +43,8 @@ export class ImageDataUtil {
             isVisitedByPoseDetector: false,
             humans: [],
             items: [],
-            guideStyles: apiData.style_list
+            guideStyles: apiData.style_list,
+            image_status: apiData.image_status  || ""
         };
 
         // if labeling_json data is available, apply annotations

diff --git a/src/utils/LabelUtil.ts b/src/utils/LabelUtil.ts
@@ -30,7 +30,8 @@ export class LabelUtil {
             isCreatedByAI: false,
             status: LabelStatus.ACCEPTED,
             suggestedLabel: null,
-            mode: LabelsSelector.getActiveLabelMode()
+            mode: LabelsSelector.getActiveLabelMode(),
+
         };
     }
 

diff --git a/src/views/EditorView/EditorContainer/EditorContainer.tsx b/src/views/EditorView/EditorContainer/EditorContainer.tsx
@@ -83,7 +83,7 @@ const EditorContainer: React.FC<IProps> = ({
             <>
                 <VerticalEditorButton
                     label="Images"
-                    image={'/ico/camera.png'}
+                    image={'ico/camera.png'}
                     imageAlt={'images'}
                     onClick={leftSideBarButtonOnClick}
                     isActive={leftTabStatus}

diff --git a/src/views/EditorView/SideNavigationBar/ImagePreview/ImagePreview.scss b/src/views/EditorView/SideNavigationBar/ImagePreview/ImagePreview.scss
@@ -50,17 +50,22 @@
         transition: background-color 0.3s ease-in-out, transform 0.3s;
     }
 
+
+
     &.selected {
         .Foreground {
             transform: translate(-2px, 2px);
         }
         .Background {
             transform: translate(2px, -2px);
             background-color: $secondaryColor; // fallback if new css variables are not supported by browser
-            background-color: var(--leading-color);
+            // background-color: var(--leading-color);
         }
+
     }
 
+
+
     &:hover {
         .Foreground {
             transform: translate(-2px, 2px);
@@ -69,4 +74,12 @@
             transform: translate(2px, -2px);
         }
     }
+    .Background.danger {
+      background-color: $dangerColor; 
+      transform: translate(2px, -2px);
+    }
+
+    .Foreground.danger {
+      transform: translate(-2px, 2px);
+  }
 }
diff --git a/src/views/EditorView/SideNavigationBar/ImagePreview/ImagePreview.tsx b/src/views/EditorView/SideNavigationBar/ImagePreview/ImagePreview.tsx
@@ -178,8 +178,8 @@ class ImagePreview extends React.Component<IProps, IState> {
     };
 
     public render() {
-        const {isChecked, style, onClick} = this.props;
-
+        const {isChecked, style, onClick, imageData} = this.props;
+       
         return (
             <div
                 className={this.getClassName()}
@@ -188,7 +188,7 @@ class ImagePreview extends React.Component<IProps, IState> {
                 {!!this.state.image ? (
                     [
                         <div
-                            className="Foreground"
+                            className={`Foreground  ${imageData?.image_status === 'R' ? "danger": ""}`}
                             key={'Foreground'}
                             style={this.getStyle()}>
                             <img
@@ -208,7 +208,7 @@ class ImagePreview extends React.Component<IProps, IState> {
                             )}
                         </div>,
                         <div
-                            className="Background"
+                            className={`Background  ${imageData?.image_status === 'R' ? "danger": ""}`}
                             key={'Background'}
                             style={this.getStyle()}
                         />

diff --git a/src/views/EditorView/SideNavigationBar/LabelInputField/LabelInputField.scss b/src/views/EditorView/SideNavigationBar/LabelInputField/LabelInputField.scss
@@ -160,6 +160,15 @@
                     filter: brightness(35%) sepia(100%)
                         hue-rotate(var(--hue-value)) saturate(2000%);
                 }
+                &.info.danger {
+                  filter: brightness(35%) sepia(100%)
+                  hue-rotate(var(--red-value)) saturate(2000%);
+                }
+
+                &.info.success {
+                  filter: brightness(35%) sepia(100%)
+                  hue-rotate(var(--green-value)) saturate(2000%);
+                }
             }
         }
 

diff --git a/src/views/EditorView/SideNavigationBar/LabelInputField/LabelInputField.tsx b/src/views/EditorView/SideNavigationBar/LabelInputField/LabelInputField.tsx
@@ -13,7 +13,6 @@ import {
     updateHighlightedLabelId,
     updateActiveHumanID
 } from '../../../../store/labels/actionCreators';
-import Scrollbars from 'react-custom-scrollbars';
 import {EventType} from '../../../../data/enums/EventType';
 import {LabelName} from '../../../../store/labels/types';
 import {LabelsSelector} from '../../../../store/selectors/LabelsSelector';
@@ -37,6 +36,9 @@ interface IProps {
     updateActiveLabelId: (highlightedLabelId: string) => any;
     updateActivePopupType: (activePopupType: PopupWindowType) => any;
     updateActiveHumanID: (humanId: string) => any;
+    imageStatus?: string ;
+    qcStatus?: string;
+    qcComment?: string
 }
 
 interface IState {
@@ -168,8 +170,9 @@ class LabelInputField extends React.Component<IProps, IState> {
     };
 
     public render() {
-        const {size, id, value, onDelete, onSelectInfo, mode, description} =
+        const {size, id, value, onDelete, onSelectInfo, mode, description, qcStatus} =
             this.props;
+
         return (
             <div
                 className={this.getClassName()}
@@ -222,7 +225,7 @@ class LabelInputField extends React.Component<IProps, IState> {
                         </div> */}
                         <div className="ContentWrapper">
                             <ImageButton
-                                externalClassName={'info'}
+                                externalClassName={`info ${qcStatus === "R" ? "danger" : qcStatus === "P" ? "success" : ""}`}
                                 image={'ico/info.png'}
                                 imageAlt={'info'}
                                 buttonSize={{width: 30, height: 30}}