feat: dev-1593: Rejection Dialog (#472)

* dev-1593

* add length checking

* BEM

Author: chiganov

src/common/Dropdown/DropdownComponent.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
 import { Block, cn } from "../../utils/bem";
 import { alignElements } from "../../utils/dom";
@@ -91,6 +91,14 @@ export const Dropdown = React.forwardRef(
       }
     }, [close, currentVisible, open]);
 
+    useEffect(() => {
+      if (visible) {
+        open();
+      } else {
+        close();
+      }
+    }, [visible]);
+
     React.useEffect(() => {
       if (!ref) return;
 

src/components/TopBar/Controls.js

@@ -6,6 +6,9 @@ import { isDefined } from "../../utils/utilities";
 import { IconBan } from "../../assets/icons";
 
 import "./Controls.styl";
+import { useCallback, useMemo, useState } from "react";
+import { Dropdown } from "../../common/Dropdown/DropdownComponent";
+import { FF_DEV_1593, isFF } from "../../utils/feature-flags";
 
 const TOOLTIP_DELAY = 0.8;
 
@@ -28,6 +31,48 @@ const controlsInjector = inject(({ store }) => {
   };
 });
 
+const RejectDialog = ({ disabled, store }) => {
+  const [show, setShow] = useState(false);
+  const [comment, setComment] = useState('');
+  const onReject = useCallback(() => {
+    store.rejectAnnotation({ comment: comment.length ? comment : null });
+    setShow(false);
+    setComment('');
+  });
+
+  return (
+    <Dropdown.Trigger
+      visible={show}
+      toggle={() => { }}
+      onToggle={(visible) => {
+        setShow(visible);
+      }}
+      content={(
+        <Block name="reject-dialog">
+          <Elem name="input-title">
+            Reason of Rejection
+          </Elem>
+          <Elem
+            name='input'
+            tag={'textarea'}
+            type="text"
+            value={comment}
+            onChange={(event) => { setComment(event.target.value); }}
+          />
+          <Elem name='footer' >
+            <Button onClick={() => setShow(false)}>Cancel</Button>
+            <Button style={{ marginLeft: 8 }} look="danger" onClick={onReject}>Reject</Button>
+          </Elem >
+        </Block >
+      )}
+    >
+      <Button aria-label="reject-annotation" disabled={disabled} look="danger">
+        Reject
+      </Button>
+    </Dropdown.Trigger >
+  );
+};
+
 export const Controls = controlsInjector(observer(({ store, history, annotation }) => {
   const isReview = store.hasInterface("review");
   const historySelected = isDefined(store.annotationStore.selectedHistory);
@@ -37,14 +82,22 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
   const disabled = store.isSubmitting || historySelected;
   const submitDisabled = store.hasInterface("annotations:deny-empty") && results.length === 0;
 
+  const RejectButton = useMemo(() => {
+    if (isFF(FF_DEV_1593)) {
+      return <RejectDialog disabled={disabled} store={store} />;
+    } else {
+      return (
+        <ButtonTooltip key="reject" title="Reject annotation: [ Ctrl+Space ]">
+          <Button aria-label="reject-annotation" disabled={disabled} look="danger" onClick={store.rejectAnnotation}>
+            Reject
+          </Button>
+        </ButtonTooltip>
+      );
+    }
+  }, [disabled, store]);
+
   if (isReview) {
-    buttons.push(
-      <ButtonTooltip key="reject" title="Reject annotation: [ Ctrl+Space ]">
-        <Button aria-label="reject-annotation" disabled={disabled} look="danger" onClick={store.rejectAnnotation}>
-          Reject
-        </Button>
-      </ButtonTooltip>,
-    );
+    buttons.push(RejectButton);
 
     buttons.push(
       <ButtonTooltip key="accept" title="Accept annotation: [ Ctrl+Enter ]">

src/components/TopBar/Controls.styl

@@ -26,3 +26,25 @@
     font-size 16px
     box-shadow none
     border-radius 0
+
+.reject-dialog
+  height 278px
+  width 480px
+  padding 12px 16px
+  display flex
+  flex-direction column
+
+  &__input-title
+    margin-bottom 4px
+
+  &__input
+    resize none
+    flex 1 1 auto
+    margin-bottom 16px
+    background-color #FAFAFA
+    font-size 16px
+
+  &__footer
+    display flex
+    flex-direction row
+    justify-content end

src/regions/VideoRegion.js

@@ -128,9 +128,10 @@ const Model = types
 
     closestKeypoint(targetFrame) {
       const seq = self.sequence;
-      let keypoints, result;
+      let result;
+
+      const keypoints = seq.filter(({ frame }) => frame <= targetFrame);
 
-      keypoints = seq.filter(({ frame }) => frame <= targetFrame);
       result = keypoints[keypoints.length - 1];
 
       if (!result) {

src/stores/AppStore.js

@@ -276,7 +276,7 @@ export default types
         hotkeys.addNamed("annotation:skip", () => {
           if (self.annotationStore.viewingAll) return;
 
-          if (self.hasInterface("review")){
+          if (self.hasInterface("review")) {
             self.rejectAnnotation();
           } else {
             self.skipTask();
@@ -393,7 +393,8 @@ export default types
       }
       self.task = Task.create(taskObject);
       if (self.taskHistory.findIndex((x) => x.taskId === self.task.id) === -1) {
-        self.taskHistory.push({ taskId: self.task.id,
+        self.taskHistory.push({
+          taskId: self.task.id,
           annotationId: null,
         });
       }
@@ -501,7 +502,7 @@ export default types
       }, "Error during accept, try again");
     }
 
-    function rejectAnnotation() {
+    function rejectAnnotation({ comment = null }) {
       if (self.isSubmitting) return;
 
       handleSubmittingFlag(async () => {
@@ -513,7 +514,7 @@ export default types
         const isDirty = entity.history.canUndo;
 
         entity.dropDraft();
-        await getEnv(self).events.invoke('rejectAnnotation', self, { isDirty, entity });
+        await getEnv(self).events.invoke('rejectAnnotation', self, { isDirty, entity, comment });
       }, "Error during reject, try again");
     }
 

src/utils/feature-flags.js

@@ -14,6 +14,9 @@ export const FF_DEV_1564_DEV_1565 = "ff_front_dev_1564_dev_1565_shortcuts_focus_
 // @requires FF_DEV_1564_DEV_1565
 export const FF_DEV_1566 = "ff_front_dev_1566_shortcuts_in_results_010222_short";
 
+// Show or not dialog for rejection
+export const FF_DEV_1593 = "ff_front_1593_rejection_comment_040222_short";
+
 function getFeatureFlags() {
   return window.APP_SETTINGS?.feature_flags || {};
 }
@@ -22,7 +25,7 @@ export function isFF(id) {
   const featureFlags = getFeatureFlags();
 
   if (id in featureFlags) {
-    return featureFlags[id] === true; 
+    return featureFlags[id] === true;
   }
   else {
     return window.APP_SETTINGS?.feature_flags_default_value === true;