Merge pull request #12 from roboduels/feat/grades-form-improvements

add: advanced controls support
roboduels · Dec 2, 2021 · f4bda3c · f4bda3c
2 parents 3f320e4 + 662ae4e
commit f4bda3c
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 15 deletions.
diff --git a/cvat-ui/src/actions/grades-actions.ts b/cvat-ui/src/actions/grades-actions.ts
@@ -136,22 +136,23 @@ interface SubmitAnnotationFrameInput {
     certificateId?: string | null;
 }
 
-export const submitAnnotationFrameToGradeAsync = (input: SubmitAnnotationFrameInput): ThunkAction => async (
-    dispatch,
-    getState,
-) => {
+export const submitAnnotationFrameToGradeAsync = (
+    input: SubmitAnnotationFrameInput & { withMasks?: boolean },
+): ThunkAction => async (dispatch, getState) => {
     if (!input.orientation) {
         dispatch(setWarningAsync(orientationNotFound));
     }
 
     const state = getState() as CombinedState;
     const { states } = state.annotation.annotations;
     const { frame } = state.annotation.player;
-    const job = state.annotation.job.instance;
-    const image = await job.frames.frameData(frame.number);
-
     const formData = new FormData();
-    formData.append('image', image, frame.filename);
+
+    if (input.withMasks) {
+        const job = state.annotation.job.instance;
+        const image = await job.frames.frameData(frame.number);
+        formData.append('image', image, frame.filename);
+    }
 
     formData.append(
         'payload',

diff --git a/cvat-ui/src/components/annotation-page/grades-form/grades-form-advanced-controls.scss b/cvat-ui/src/components/annotation-page/grades-form/grades-form-advanced-controls.scss
@@ -0,0 +1,3 @@
+.grades-form-advanced-controls {
+    position: relative;
+}
diff --git a/cvat-ui/src/components/annotation-page/grades-form/grades-form-advanced-controls.tsx b/cvat-ui/src/components/annotation-page/grades-form/grades-form-advanced-controls.tsx
@@ -0,0 +1,35 @@
+// Copyright (C) 2021 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+import React, { useCallback } from 'react';
+import './grades-form-advanced-controls.scss';
+import Button from 'antd/lib/button';
+
+interface Props {
+    onRobogradesAndMasks(): void;
+}
+
+function GradesFormAdvancedControls({ onRobogradesAndMasks }: Props): JSX.Element {
+    const [isExpanded, setIsExpanded] = React.useState(false);
+
+    const handleToggle = useCallback((): void => {
+        setIsExpanded((prev) => !prev);
+    }, []);
+
+    return (
+        <>
+            <div className='grades-form-advanced-controls-toggle'>
+                <Button type='link' block onClick={handleToggle}>
+                    {isExpanded ? 'Hide Advanced' : 'Advanced'}
+                </Button>
+            </div>
+            {isExpanded && (
+                <Button block onClick={onRobogradesAndMasks}>
+                    Generate Robogrades & Masks
+                </Button>
+            )}
+        </>
+    );
+}
+
+export default GradesFormAdvancedControls;
diff --git a/cvat-ui/src/components/annotation-page/grades-form/grades-form.tsx b/cvat-ui/src/components/annotation-page/grades-form/grades-form.tsx
@@ -13,6 +13,7 @@ import React, {
     useCallback, useEffect, useMemo, useRef, useState,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import Space from 'antd/lib/space';
 import { setGradesFormState } from '../../../actions/annotation-actions';
 import {
     gradesActions,
@@ -23,6 +24,7 @@ import {
 } from '../../../actions/grades-actions';
 import { CombinedState } from '../../../reducers/interfaces';
 import { parseFilename } from '../../../utils/grades';
+import GradesFormAdvancedControls from './grades-form-advanced-controls';
 
 interface Props {
     task: {
@@ -63,11 +65,16 @@ export function GradesForm({ task }: Props): JSX.Element | null {
         dispatch(setGradesFormState(false));
     }, [dispatch]);
 
-    const handleSubmit = useCallback(async () => {
+    const handleRobogrades = useCallback(async () => {
         dispatch(submitAnnotationFrameToGradeAsync(frameOptions));
         formRef.current?.setFieldsValue({});
     }, [frameOptions]);
 
+    const handleRobogradesAndMasks = useCallback(async () => {
+        dispatch(submitAnnotationFrameToGradeAsync({ ...frameOptions, withMasks: true }));
+        formRef.current?.setFieldsValue({});
+    }, [frameOptions]);
+
     const handleUpdate = useCallback(async () => {
         const formValues = await formRef.current?.validateFields();
         if (formValues) {
@@ -368,12 +375,15 @@ export function GradesForm({ task }: Props): JSX.Element | null {
                                 <span className='loading-text'>Loading...</span>
                             </div>
                         ) : null}
-                        <Button type='primary' onClick={handleUpdate} style={{ marginBottom: 8, width: '100%' }}>
-                            Update grades
-                        </Button>
-                        <Button type='primary' onClick={handleSubmit} style={{ width: '100%' }}>
-                            Generate Robo grades
-                        </Button>
+                        <Space direction='vertical' style={{ width: '100%' }}>
+                            <Button type='primary' onClick={handleUpdate} block>
+                                Update grades
+                            </Button>
+                            <Button type='primary' onClick={handleRobogrades} block>
+                                Generate Robogrades
+                            </Button>
+                            <GradesFormAdvancedControls onRobogradesAndMasks={handleRobogradesAndMasks} />
+                        </Space>
                     </div>
                 </Col>
             </Row>