diff --git a/platform/viewer/src/components/Labelling/LabellingFlow.js b/platform/viewer/src/components/Labelling/LabellingFlow.js index 061825c1e..9794e37e9 100644 --- a/platform/viewer/src/components/Labelling/LabellingFlow.js +++ b/platform/viewer/src/components/Labelling/LabellingFlow.js @@ -5,27 +5,14 @@ import cloneDeep from 'lodash.clonedeep'; import LabellingTransition from './LabellingTransition.js'; import OHIFLabellingData from './OHIFLabellingData.js'; +import './LabellingManager.css'; -export default class LabellingFlow extends Component { - static propTypes = { - measurementData: PropTypes.object.isRequired, - labellingDoneCallback: PropTypes.func.isRequired, - updateLabelling: PropTypes.func.isRequired, - initialTopDistance: PropTypes.number, - skipAddLabelButton: PropTypes.bool, - editLocation: PropTypes.bool, - editDescription: PropTypes.bool, - }; - +class LabellingFlow extends Component { constructor(props) { super(props); - const { location, locationLabel, description } = props.measurementData; - this.state = { - location, - locationLabel, - description, + measurementData: props.measurementData, skipAddLabelButton: props.skipAddLabelButton, editDescription: props.editDescription, editLocation: props.editLocation, @@ -33,7 +20,6 @@ export default class LabellingFlow extends Component { displayComponent: true, }; - this.mainElement = React.createRef(); this.descriptionInput = React.createRef(); this.initialItems = OHIFLabellingData; this.currentItems = cloneDeep(this.initialItems); @@ -46,11 +32,6 @@ export default class LabellingFlow extends Component { }; render() { - let mainElementClassName = 'labellingComponent'; - if (this.state.editDescription) { - mainElementClassName += ' editDescription'; - } - return ( <>
@@ -71,12 +52,8 @@ export default class LabellingFlow extends Component { } labellingStateFragment = () => { - const { - skipAddLabelButton, - editLocation, - description, - locationLabel, - } = this.state; + const { skipAddLabelButton, editLocation, measurementData } = this.state; + const { description, locationLabel, location } = measurementData; if (!skipAddLabelButton) { return ( @@ -86,7 +63,7 @@ export default class LabellingFlow extends Component { className="addLabelButton" onClick={this.showLabelling} > - {this.state.location ? 'Edit' : 'Add'} Label + {location ? 'Edit' : 'Add'} Label ); @@ -191,21 +168,24 @@ export default class LabellingFlow extends Component { selectTreeSelectCallback = (event, itemSelected) => { const location = itemSelected.value; + const locationLabel = itemSelected.label; this.props.updateLabelling({ location }); this.setState({ editLocation: false, confirmationState: true, - location: itemSelected.value, - locationLabel: itemSelected.label, + measurementData: { + ...this.state.measurementData, + location, + locationLabel, + }, }); if (this.isTouchScreen) { - this.setTimeout = setTimeout(() => { - this.setState({ - displayComponent: false, - }); - }, 2000); + this.setTimeout = setTimeout( + () => this.setState({ displayComponent: false }), + 2000 + ); } }; @@ -234,3 +214,23 @@ export default class LabellingFlow extends Component { clearTimeout(this.fadeOutTimer); }; } + +LabellingFlow.propTypes = { + measurementData: PropTypes.object.isRequired, + labellingDoneCallback: PropTypes.func.isRequired, + updateLabelling: PropTypes.func.isRequired, + initialTopDistance: PropTypes.number, + skipAddLabelButton: PropTypes.bool, + editLocation: PropTypes.bool, + editDescription: PropTypes.bool, + editDescriptionOnDialog: PropTypes.bool, +}; + +LabellingFlow.defaultProps = { + skipAddLabelButton: false, + editLocation: false, + editDescription: false, + editDescriptionOnDialog: false, +}; + +export default LabellingFlow; diff --git a/platform/viewer/src/components/Labelling/LabellingManager.js b/platform/viewer/src/components/Labelling/LabellingManager.js index 8b0148886..c492bc89d 100644 --- a/platform/viewer/src/components/Labelling/LabellingManager.js +++ b/platform/viewer/src/components/Labelling/LabellingManager.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import cloneDeep from 'lodash.clonedeep'; import EditDescriptionDialog from './../EditDescriptionDialog/EditDescriptionDialog.js'; @@ -7,64 +6,27 @@ 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); + const newMeasurementData = cloneDeep(props.measurementData); + this.treatMeasurementData(newMeasurementData); - let editLocation = props.editLocation; + let newEditLocation = props.editLocation; if (!props.editDescription && !props.editLocation) { - editLocation = true; + newEditLocation = true; } this.state = { - skipAddLabelButton: props.skipAddLabelButton, - editLocation: editLocation, - editDescription: props.editDescription, - editDescriptionOnDialog: props.editDescriptionOnDialog, - measurementData: measurementData, + editLocation: newEditLocation, + measurementData: newMeasurementData, }; } - componentDidMount = () => { - document.addEventListener('touchstart', this.onTouchStart); - }; - - componentWillUnmount = () => { - document.removeEventListener('touchstart', this.onTouchStart); - }; - render() { - return this.getRenderComponent(); - } + const { editLocation, measurementData } = this.state; - getRenderComponent = () => { - const { - editLocation, - editDescription, - editDescriptionOnDialog, - measurementData, - } = this.state; - - if (editDescriptionOnDialog) { + if (this.props.editDescriptionOnDialog) { return ( ; } - }; + } treatMeasurementData = measurementData => { const { editDescription, editLocation } = this.props; @@ -91,11 +53,6 @@ export default class LabellingManager extends Component { } }; - responseDialogUpdate = response => { - this.props.updateLabelling({ response }); - this.props.labellingDoneCallback(); - }; - descriptionDialogUpdate = description => { this.props.updateLabelling({ description }); this.props.labellingDoneCallback();