Merge pull request #1274 from OHIF/refactor/igor/1267-remove-labelling-manager

refactor: 💡 Remove LabellingManager and Cleanup LabellingFlow #1267

platform/viewer/src/App.js

@@ -9,7 +9,7 @@ import { hot } from 'react-hot-loader/root';
 import OHIFCornerstoneExtension from '@ohif/extension-cornerstone';
 
 import ToolContextMenu from './connectedComponents/ToolContextMenu';
-import LabellingManager from './components/Labelling/LabellingManager';
+import LabellingFlow from './components/Labelling/LabellingFlow';
 
 import {
   SnackbarProvider,
@@ -183,7 +183,7 @@ class App extends Component {
                           >
                             <LabellingFlowProvider
                               service={UILabellingFlowService}
-                              labellingComponent={LabellingManager}
+                              labellingComponent={LabellingFlow}
                               commandsManager={commandsManager}
                             >
                               <ContextMenuProvider
@@ -220,7 +220,7 @@ class App extends Component {
                     <ModalProvider modal={OHIFModal} service={UIModalService}>
                       <LabellingFlowProvider
                         service={UILabellingFlowService}
-                        labellingComponent={LabellingManager}
+                        labellingComponent={LabellingFlow}
                         commandsManager={commandsManager}
                       >
                         <ContextMenuProvider

platform/viewer/src/components/Labelling/LabellingFlow.css

@@ -6,8 +6,7 @@
   max-height: 500px;
 }
 
-.labellingComponent .selectedLabel,
+.labellingComponent .selectedLabel, .labellingComponent .selectedDescription {
-.labellingComponent .selectedDescription {
   padding: 5px;
   background-color: white;
   width: 150px;
@@ -86,14 +85,12 @@
   color: #337ab7;
 }
 
-.labellingComponent .commonButtons,
+.labellingComponent .commonButtons, .labellingComponent.editDescription .editDescriptionButtons {
-.labellingComponent.editDescription .editDescriptionButtons {
   display: block;
   margin-left: 55px;
 }
 
-.labellingComponent.editDescription .commonButtons,
+.labellingComponent.editDescription .commonButtons, .labellingComponent .editDescriptionButtons {
-.labellingComponent .editDescriptionButtons {
   display: none;
 }
 

platform/viewer/src/components/Labelling/LabellingFlow.js

@@ -1,112 +1,165 @@
 import { Icon, SelectTree } from '@ohif/ui';
-import React, { Component } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import cloneDeep from 'lodash.clonedeep';
 
 import LabellingTransition from './LabellingTransition.js';
 import OHIFLabellingData from './OHIFLabellingData.js';
+import EditDescriptionDialog from './../EditDescriptionDialog/EditDescriptionDialog.js';
+import './LabellingFlow.css';
 
-export default class LabellingFlow extends Component {
+const LabellingFlow = ({
-  static propTypes = {
+  measurementData,
-    measurementData: PropTypes.object.isRequired,
+  editLocation,
-    labellingDoneCallback: PropTypes.func.isRequired,
+  editDescription,
-    updateLabelling: PropTypes.func.isRequired,
+  skipAddLabelButton,
-    initialTopDistance: PropTypes.number,
+  updateLabelling,
-    skipAddLabelButton: PropTypes.bool,
+  labellingDoneCallback,
-    editLocation: PropTypes.bool,
+  editDescriptionOnDialog,
-    editDescription: PropTypes.bool,
+}) => {
+  const [fadeOutTimer, setFadeOutTimer] = useState();
+  const [showComponent, setShowComponent] = useState(true);
+  const descriptionInput = useRef();
+  const [state, setState] = useState({
+    measurementData,
+    editLocation,
+    editDescription,
+    skipAddLabelButton,
+  });
+
+  useEffect(() => {
+    const newMeasurementData = cloneDeep(measurementData);
+
+    if (editDescription) {
+      newMeasurementData.description = undefined;
+    }
+
+    if (editLocation) {
+      newMeasurementData.location = undefined;
+    }
+
+    let newEditLocation = editLocation;
+    if (!editDescription && !editLocation) {
+      newEditLocation = true;
+    }
+
+    setState(state => ({
+      ...state,
+      editLocation: newEditLocation,
+      measurementData: newMeasurementData,
+    }));
+  }, [editDescription, editLocation, measurementData]);
+
+  useEffect(() => {
+    if (descriptionInput.current) {
+      descriptionInput.current.focus();
+    }
+  }, [state]);
+
+  const relabel = event =>
+    setState(state => ({ ...state, editLocation: true }));
+
+  const setDescriptionUpdateMode = () => {
+    descriptionInput.current.focus();
+    setState(state => ({ ...state, editDescription: true }));
   };
 
-  constructor(props) {
+  const descriptionCancel = () => {
-    super(props);
+    const { description = '' } = cloneDeep(state);
+    descriptionInput.current.value = description;
+    setState(state => ({ ...state, editDescription: false }));
+  };
 
-    const { location, locationLabel, description } = props.measurementData;
+  const handleKeyPress = event => {
-
+    if (event.key === 'Enter') {
-    this.state = {
+      descriptionSave();
-      location,
-      locationLabel,
-      description,
-      skipAddLabelButton: props.skipAddLabelButton,
-      editDescription: props.editDescription,
-      editLocation: props.editLocation,
-      confirmationState: false,
-      displayComponent: true,
-    };
-
-    this.mainElement = React.createRef();
-    this.descriptionInput = React.createRef();
-    this.initialItems = OHIFLabellingData;
-    this.currentItems = cloneDeep(this.initialItems);
-  }
-
-  componentDidUpdate = () => {
-    if (this.state.editDescription) {
-      this.descriptionInput.current.focus();
     }
   };
 
-  render() {
+  const descriptionSave = () => {
-    let mainElementClassName = 'labellingComponent';
+    const description = descriptionInput.current.value;
-    if (this.state.editDescription) {
+    updateLabelling({ description });
-      mainElementClassName += ' editDescription';
-    }
 
-    return (
+    setState(state => ({
-      <LabellingTransition
+      ...state,
-        displayComponent={this.state.displayComponent}
-        onTransitionExit={this.props.labellingDoneCallback}
-      >
-        <>
-          <div
-            className={mainElementClassName}
-            ref={this.mainElement}
-            onMouseLeave={this.fadeOutAndLeave}
-            onMouseEnter={this.clearFadeOutTimer}
-          >
-            {this.labellingStateFragment()}
-          </div>
-        </>
-      </LabellingTransition>
-    );
-  }
-
-  labellingStateFragment = () => {
-    const {
-      skipAddLabelButton,
-      editLocation,
       description,
-      locationLabel,
+      editDescription: false,
-    } = this.state;
+    }));
+  };
+
+  const selectTreeSelectCallback = (event, itemSelected) => {
+    const location = itemSelected.value;
+    const locationLabel = itemSelected.label;
+    updateLabelling({ location });
+
+    setState(state => ({
+      ...state,
+      editLocation: false,
+      measurementData: {
+        ...state.measurementData,
+        location,
+        locationLabel,
+      },
+    }));
+  };
+
+  const showLabelling = () => {
+    setState(state => ({
+      ...state,
+      skipAddLabelButton: true,
+      editLocation: false,
+    }));
+  };
+
+  /*
+   * Waits for 1 sec to dismiss the labelling component.
+   *
+   */
+  const fadeOutAndLeave = () =>
+    setFadeOutTimer(setTimeout(fadeOutAndLeaveFast, 1000));
+
+  const fadeOutAndLeaveFast = () => setShowComponent(false);
+
+  const clearFadeOutTimer = () => {
+    if (fadeOutTimer) {
+      clearTimeout(fadeOutTimer);
+      setFadeOutTimer(null);
+    }
+  };
+
+  const descriptionDialogUpdate = description => {
+    updateLabelling({ description });
+    labellingDoneCallback();
+  };
+
+  const labellingStateFragment = () => {
+    const { skipAddLabelButton, editLocation, measurementData } = state;
+    const { description, locationLabel, location } = measurementData;
 
     if (!skipAddLabelButton) {
       return (
-        <>
+        <button
-          <button
+          type="button"
-            type="button"
+          className="addLabelButton"
-            className="addLabelButton"
+          onClick={showLabelling}
-            onClick={this.showLabelling}
+        >
-          >
+          {location ? 'Edit' : 'Add'} Label
-            {this.state.location ? 'Edit' : 'Add'} Label
+        </button>
-          </button>
-        </>
       );
     } else {
       if (editLocation) {
         return (
           <SelectTree
-            items={this.currentItems}
+            items={OHIFLabellingData}
             columns={1}
-            onSelected={this.selectTreeSelectCallback}
+            onSelected={selectTreeSelectCallback}
             selectTreeFirstTitle="Assign Label"
           />
         );
       } else {
         return (
           <>
-            <div
+            <div className="checkIconWrapper" onClick={fadeOutAndLeaveFast}>
-              className="checkIconWrapper"
-              onClick={this.fadeOutAndLeaveFast}
-            >
               <Icon name="check" className="checkIcon" />
             </div>
             <div className="locationDescriptionWrapper">
@@ -114,10 +167,10 @@ export default class LabellingFlow extends Component {
               <div className="description">
                 <input
                   id="descriptionInput"
-                  ref={this.descriptionInput}
+                  ref={descriptionInput}
                   defaultValue={description || ''}
                   autoComplete="off"
-                  onKeyPress={this.handleKeyPress}
+                  onKeyPress={handleKeyPress}
                 />
               </div>
             </div>
@@ -125,14 +178,14 @@ export default class LabellingFlow extends Component {
               <button
                 type="button"
                 className="commonButton left"
-                onClick={this.relabel}
+                onClick={relabel}
               >
                 Relabel
               </button>
               <button
                 type="button"
                 className="commonButton right"
-                onClick={this.setDescriptionUpdateMode}
+                onClick={setDescriptionUpdateMode}
               >
                 {description ? 'Edit ' : 'Add '}
                 Description
@@ -142,14 +195,14 @@ export default class LabellingFlow extends Component {
               <button
                 type="button"
                 className="commonButton left"
-                onClick={this.descriptionCancel}
+                onClick={descriptionCancel}
               >
                 Cancel
               </button>
               <button
                 type="button"
                 className="commonButton right"
-                onClick={this.descriptionSave}
+                onClick={descriptionSave}
               >
                 Save
               </button>
@@ -160,77 +213,51 @@ export default class LabellingFlow extends Component {
     }
   };
 
-  relabel = event => this.setState({ editLocation: true });
+  if (editDescriptionOnDialog) {
-
+    return (
-  setDescriptionUpdateMode = () => {
+      <EditDescriptionDialog
-    this.descriptionInput.current.focus();
+        onCancel={labellingDoneCallback}
-    this.setState({ editDescription: true });
+        onUpdate={descriptionDialogUpdate}
-  };
+        measurementData={state.measurementData}
-
+      />
-  descriptionCancel = () => {
-    const { description = '' } = cloneDeep(this.state);
-    this.descriptionInput.current.value = description;
-    this.setState({ editDescription: false });
-  };
-
-  handleKeyPress = e => {
-    if (e.key === 'Enter') {
-      this.descriptionSave();
-    }
-  };
-
-  descriptionSave = () => {
-    const description = this.descriptionInput.current.value;
-    this.props.updateLabelling({ description });
-
-    this.setState({
-      description,
-      editDescription: false,
-    });
-  };
-
-  selectTreeSelectCallback = (event, itemSelected) => {
-    const location = itemSelected.value;
-    this.props.updateLabelling({ location });
-
-    this.setState({
-      editLocation: false,
-      confirmationState: true,
-      location: itemSelected.value,
-      locationLabel: itemSelected.label,
-    });
-
-    if (this.isTouchScreen) {
-      this.setTimeout = setTimeout(() => {
-        this.setState({
-          displayComponent: false,
-        });
-      }, 2000);
-    }
-  };
-
-  showLabelling = () => {
-    this.setState({
-      skipAddLabelButton: true,
-      editLocation: false,
-    });
-  };
-
-  fadeOutAndLeave = () => {
-    // Wait for 1 sec to dismiss the labelling component
-    this.fadeOutTimer = setTimeout(
-      () => this.setState({ displayComponent: false }),
-      1000
     );
-  };
+  }
 
-  fadeOutAndLeaveFast = () => this.setState({ displayComponent: false });
+  return (
+    <LabellingTransition
+      displayComponent={showComponent}
+      onTransitionExit={labellingDoneCallback}
+    >
+      <>
+        <div
+          className={`labellingComponent ${state.editDescription &&
+            'editDescription'}`}
+          onMouseLeave={fadeOutAndLeave}
+          onMouseEnter={clearFadeOutTimer}
+        >
+          {labellingStateFragment()}
+        </div>
+      </>
+    </LabellingTransition>
+  );
+};
 
-  clearFadeOutTimer = () => {
+LabellingFlow.propTypes = {
-    if (!this.fadeOutTimer) {
+  measurementData: PropTypes.object.isRequired,
-      return;
+  labellingDoneCallback: PropTypes.func.isRequired,
-    }
+  updateLabelling: PropTypes.func.isRequired,
+  initialTopDistance: PropTypes.number,
+  skipAddLabelButton: PropTypes.bool,
+  editLocation: PropTypes.bool,
+  editDescription: PropTypes.bool,
+  editDescriptionOnDialog: PropTypes.bool,
+};
 
-    clearTimeout(this.fadeOutTimer);
+LabellingFlow.defaultProps = {
-  };
+  skipAddLabelButton: false,
-}
+  editLocation: false,
+  editDescription: false,
+  editDescriptionOnDialog: false,
+};
+
+export default LabellingFlow;

platform/viewer/src/components/Labelling/LabellingManager.js

@@ -1,103 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import cloneDeep from 'lodash.clonedeep';
-
-import EditDescriptionDialog from './../EditDescriptionDialog/EditDescriptionDialog.js';
-import LabellingFlow from './LabellingFlow.js';
-import './LabellingManager.css';
-
-export default class LabellingManager extends Component {
-  static propTypes = {
-    measurementData: PropTypes.object.isRequired,
-    labellingDoneCallback: PropTypes.func.isRequired,
-    updateLabelling: PropTypes.func.isRequired,
-    skipAddLabelButton: PropTypes.bool,
-    editLocation: PropTypes.bool,
-    editDescription: PropTypes.bool,
-    editDescriptionOnDialog: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    skipAddLabelButton: false,
-    editLocation: false,
-    editDescription: false,
-    editDescriptionOnDialog: false,
-  };
-
-  constructor(props) {
-    super(props);
-
-    const measurementData = cloneDeep(props.measurementData);
-    this.treatMeasurementData(measurementData);
-
-    let editLocation = props.editLocation;
-    if (!props.editDescription && !props.editLocation) {
-      editLocation = true;
-    }
-
-    this.state = {
-      skipAddLabelButton: props.skipAddLabelButton,
-      editLocation: editLocation,
-      editDescription: props.editDescription,
-      editDescriptionOnDialog: props.editDescriptionOnDialog,
-      measurementData: measurementData,
-    };
-  }
-
-  componentDidMount = () => {
-    document.addEventListener('touchstart', this.onTouchStart);
-  };
-
-  componentWillUnmount = () => {
-    document.removeEventListener('touchstart', this.onTouchStart);
-  };
-
-  render() {
-    return this.getRenderComponent();
-  }
-
-  getRenderComponent = () => {
-    const {
-      editLocation,
-      editDescription,
-      editDescriptionOnDialog,
-      measurementData,
-    } = this.state;
-
-    if (editDescriptionOnDialog) {
-      return (
-        <EditDescriptionDialog
-          onCancel={this.props.labellingDoneCallback}
-          onUpdate={this.descriptionDialogUpdate}
-          measurementData={measurementData}
-        />
-      );
-    }
-
-    if (editLocation || editDescription) {
-      return <LabellingFlow {...this.props} />;
-    }
-  };
-
-  treatMeasurementData = measurementData => {
-    const { editDescription, editLocation } = this.props;
-
-    if (editDescription) {
-      measurementData.description = undefined;
-    }
-
-    if (editLocation) {
-      measurementData.location = undefined;
-    }
-  };
-
-  responseDialogUpdate = response => {
-    this.props.updateLabelling({ response });
-    this.props.labellingDoneCallback();
-  };
-
-  descriptionDialogUpdate = description => {
-    this.props.updateLabelling({ description });
-    this.props.labellingDoneCallback();
-  };
-}