Remove LabellingManager component

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,
@@ -182,7 +182,7 @@ class App extends Component {
                           >
                             <LabellingFlowProvider
                               service={UILabellingFlowService}
-                              labellingComponent={LabellingManager}
+                              labellingComponent={LabellingFlow}
                               commandsManager={commandsManager}
                             >
                               <ContextMenuProvider
@@ -219,7 +219,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

@@ -5,17 +5,26 @@ import cloneDeep from 'lodash.clonedeep';
 
 import LabellingTransition from './LabellingTransition.js';
 import OHIFLabellingData from './OHIFLabellingData.js';
-import './LabellingManager.css';
+import EditDescriptionDialog from './../EditDescriptionDialog/EditDescriptionDialog.js';
+import './LabellingFlow.css';
 
 class LabellingFlow extends Component {
   constructor(props) {
     super(props);
 
+    const newMeasurementData = cloneDeep(props.measurementData);
+    this.treatMeasurementData(newMeasurementData);
+
+    let newEditLocation = props.editLocation;
+    if (!props.editDescription && !props.editLocation) {
+      newEditLocation = true;
+    }
+
     this.state = {
-      measurementData: props.measurementData,
+      measurementData: newMeasurementData,
       skipAddLabelButton: props.skipAddLabelButton,
       editDescription: props.editDescription,
-      editLocation: props.editLocation,
+      editLocation: newEditLocation,
       confirmationState: false,
       displayComponent: true,
     };
@@ -31,7 +40,34 @@ class LabellingFlow extends Component {
     }
   };
 
+  treatMeasurementData = measurementData => {
+    const { editDescription, editLocation } = this.props;
+
+    if (editDescription) {
+      measurementData.description = undefined;
+    }
+
+    if (editLocation) {
+      measurementData.location = undefined;
+    }
+  };
+
+  descriptionDialogUpdate = description => {
+    this.props.updateLabelling({ description });
+    this.props.labellingDoneCallback();
+  };
+
   render() {
+    if (this.props.editDescriptionOnDialog) {
+      return (
+        <EditDescriptionDialog
+          onCancel={this.props.labellingDoneCallback}
+          onUpdate={this.descriptionDialogUpdate}
+          measurementData={this.state.measurementData}
+        />
+      );
+    }
+
     return (
       <LabellingTransition
         displayComponent={this.state.displayComponent}

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

@@ -1,60 +0,0 @@
-import React, { Component } from 'react';
-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 {
-  constructor(props) {
-    super(props);
-
-    const newMeasurementData = cloneDeep(props.measurementData);
-    this.treatMeasurementData(newMeasurementData);
-
-    let newEditLocation = props.editLocation;
-    if (!props.editDescription && !props.editLocation) {
-      newEditLocation = true;
-    }
-
-    this.state = {
-      editLocation: newEditLocation,
-      measurementData: newMeasurementData,
-    };
-  }
-
-  render() {
-    const { editLocation, measurementData } = this.state;
-
-    if (this.props.editDescriptionOnDialog) {
-      return (
-        <EditDescriptionDialog
-          onCancel={this.props.labellingDoneCallback}
-          onUpdate={this.descriptionDialogUpdate}
-          measurementData={measurementData}
-        />
-      );
-    }
-
-    if (editLocation || this.props.editDescription) {
-      return <LabellingFlow {...this.props} />;
-    }
-  }
-
-  treatMeasurementData = measurementData => {
-    const { editDescription, editLocation } = this.props;
-
-    if (editDescription) {
-      measurementData.description = undefined;
-    }
-
-    if (editLocation) {
-      measurementData.location = undefined;
-    }
-  };
-
-  descriptionDialogUpdate = description => {
-    this.props.updateLabelling({ description });
-    this.props.labellingDoneCallback();
-  };
-}