fix(LabellingFlow): Measurement's table "re-label" overflows screen and other issues (#627)

* fix(LabellingFlow): Fixes search items

Includes a function to add the items related to root element

fix #508

* fix(LabellingManager): Fixes z-index problem with header menu

Fixes z-index problem with header menu

fix #508

* fix(LabellingFlow): Includes overlay for select tree when open

fix #508

* fix(LabellingManager): Changes backgroud color to highlight the modal text

fix #508

* fix(LabellingFlow): Adjusts relabel position in the page

fix #508

* fix(LabellingFlow): Fixes select tree position and include calculation to put at the center of mouse

fix #508

* fix(LabellingFlow): Fixes autofocus and refresh page after hitting enter

fix #508

src/components/EditDescriptionDialog/EditDescriptionDialog.js

@@ -72,7 +72,8 @@ export default class EditDescriptionDialog extends Component {
     this.props.onCancel();
   };
 
-  onConfirm = () => {
+  onConfirm = e => {
+    e.preventDefault();
     this.props.onUpdate(this.state.description);
   };
 

src/components/Labelling/LabellingFlow.js

@@ -12,10 +12,10 @@ export default class LabellingFlow extends Component {
   static propTypes = {
     eventData: PropTypes.object.isRequired,
     measurementData: PropTypes.object.isRequired,
-
     labellingDoneCallback: PropTypes.func.isRequired,
     updateLabelling: PropTypes.func.isRequired,
 
+    initialTopDistance: PropTypes.number,
     skipAddLabelButton: PropTypes.bool,
     editLocation: PropTypes.bool,
     editDescription: PropTypes.bool,
@@ -52,6 +52,9 @@ export default class LabellingFlow extends Component {
 
   componentDidUpdate = () => {
     this.repositionComponent();
+    if (this.state.editDescription) {
+      this.descriptionInput.current.focus();
+    }
   };
 
   render() {
@@ -62,7 +65,22 @@ export default class LabellingFlow extends Component {
 
     const style = Object.assign({}, this.state.componentStyle);
     if (this.state.skipAddLabelButton) {
-      style.left -= 160;
+      if (style.left - 160 < 0) {
+        style.left = 0;
+      } else {
+        style.left -= 160;
+      }
+    }
+
+    if (this.state.editLocation) {
+      style.maxHeight = '70vh';
+      if (!this.initialTopDistance) {
+        this.initialTopDistance = window.innerHeight - window.innerHeight * 0.3;
+        style.top = `${this.state.componentStyle.top -
+          this.initialTopDistance / 2}px`;
+      } else {
+        style.top = `${this.state.componentStyle.top}px`;
+      }
     }
 
     return (
@@ -70,15 +88,18 @@ export default class LabellingFlow extends Component {
         displayComponent={this.state.displayComponent}
         onTransitionExit={this.props.labellingDoneCallback}
       >
-        <div
+        <>
-          className={mainElementClassName}
+          <div className="labellingComponent-overlay"></div>
-          style={style}
+          <div
-          ref={this.mainElement}
+            className={mainElementClassName}
-          onMouseLeave={this.fadeOutAndLeave}
+            style={style}
-          onMouseEnter={this.clearFadeOutTimer}
+            ref={this.mainElement}
-        >
+            onMouseLeave={this.fadeOutAndLeave}
-          {this.labellingStateFragment()}
+            onMouseEnter={this.clearFadeOutTimer}
-        </div>
+          >
+            {this.labellingStateFragment()}
+          </div>
+        </>
       </LabellingTransition>
     );
   }
@@ -173,9 +194,15 @@ export default class LabellingFlow extends Component {
     }
   };
 
-  relabel = () => {
+  relabel = event => {
+    const viewportTopPosition = this.mainElement.current.offsetParent.offsetTop;
+    const componentStyle = {
+      top: event.nativeEvent.y - viewportTopPosition - 55,
+      left: event.nativeEvent.x,
+    };
     this.setState({
       editLocation: true,
+      componentStyle,
     });
   };
 
@@ -213,7 +240,7 @@ export default class LabellingFlow extends Component {
     const viewportTopPosition = this.mainElement.current.offsetParent.offsetTop;
     const componentStyle = {
       top: event.nativeEvent.y - viewportTopPosition - 25,
-      left: this.state.componentStyle.left,
+      left: event.nativeEvent.x,
     };
 
     this.setState({
@@ -263,10 +290,28 @@ export default class LabellingFlow extends Component {
     clearTimeout(this.fadeOutTimer);
   };
 
+  calculateTopDistance = () => {
+    const height = window.innerHeight - window.innerHeight * 0.3;
+    let top = this.state.componentStyle.top - height / 2 + 55;
+    if (top < 0) {
+      top = 0;
+    } else {
+      if (top + height > window.innerHeight) {
+        top -= top + height - window.innerHeight;
+      }
+    }
+    return top;
+  };
+
   repositionComponent = () => {
     // SetTimeout for the css animation to end.
     setTimeout(() => {
       bounding(this.mainElement);
+      if (this.state.editLocation) {
+        this.mainElement.current.style.maxHeight = '70vh';
+        const top = this.calculateTopDistance();
+        this.mainElement.current.style.top = `${top}px`;
+      }
     }, 200);
   };
 }

src/components/Labelling/LabellingManager.css

@@ -1,7 +1,17 @@
+.labellingComponent-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
 .labellingComponent {
   position: absolute;
   text-align: center;
-  z-index: 300;
+  z-index: 999;
   transition: all 200ms linear;
 }
 

src/components/SimpleDialog/SimpleDialog.js

@@ -17,7 +17,7 @@ class SimpleDialog extends Component {
         ref={this.props.componentRef}
         style={this.props.componentStyle}
       >
-        <form>
+        <form onSubmit={this.props.onConfirm}>
           <div className="header">
             <span className="closeBtn" onClick={this.props.onClose}>
               <span className="closeIcon">x</span>