Add measurement table functions (#415)
* fix(measurements): Add measurement table functions - Support for labeling measurements and adding measurement description - Jump to measurement when clicked on measurement table * fix(layout): Fix the issues with layout when switched with different plugins * fix(measurements): Support for deleting measurements in measurement table * fix(measurements): Add context menu for measurements * fix(dependencies): Bump ohif-core to 0.4.2
This commit is contained in:
Evren Ozkan
GitHub
parent
0bab19985e
commit
c9ddb23d9c
@ -73,7 +73,7 @@
|
||||
"hammerjs": "^2.0.8",
|
||||
"lodash.isequal": "4.5.0",
|
||||
"moment": "^2.24.0",
|
||||
"ohif-core": "0.4.1",
|
||||
"ohif-core": "0.4.2",
|
||||
"ohif-cornerstone-extension": "^0.0.28",
|
||||
"ohif-dicom-html-extension": "^0.0.2",
|
||||
"ohif-dicom-microscopy-extension": "^0.0.5",
|
||||
|
||||
@ -237,4 +237,10 @@
|
||||
<symbol id='cube' viewBox="-205 207 100 100"><!--cube by Gregor Cresnar from the Noun Project https://thenounproject.com/search/?q=cube&i=197684 !--><path d="M-115.1,280.3c0-0.1,0.1-0.1,0.1-0.2c0,0,0-0.1,0-0.1c0-0.1,0-0.2,0-0.3c0,0,0,0,0,0l0.1-45 c0-0.5-0.3-0.9-0.7-1.2L-154,211c-0.1,0-0.1,0-0.2-0.1c0,0,0,0,0,0c-0.4-0.2-0.8-0.1-1.2,0.1l-38.8,22.1 c-0.4,0.2-0.7,0.7-0.7,1.2l-0.3,44.6c0,0.5,0.3,0.9,0.7,1.2l38.7,22.9c0.2,0.1,0.5,0.2,0.7,0.2c0.2,0,0.5-0.1,0.7-0.2l38.8-22.1 c0,0,0,0,0,0c0.1,0,0.1-0.1,0.2-0.1c0.1,0,0.1-0.1,0.1-0.1c0-0.1,0.1-0.1,0.1-0.2C-115.1,280.4-115.1,280.4-115.1,280.3z M-160.7,296.9c1.5-1.5,3-3,4.5-4.6l0,2.4c-1,1-2,2-3,3L-160.7,296.9z M-163.9,295c2.5-2.6,5.1-5.1,7.6-7.7l0,2.4 c-2,2.1-4.1,4.1-6.1,6.2L-163.9,295z M-167,293.2c3.6-3.6,7.1-7.2,10.7-10.8l0,2.4c-2.6,2.6-5.2,5.2-7.7,7.8 c-0.5,0.5-1,1-1.5,1.5L-167,293.2z M-170.1,291.3c4.6-4.7,9.2-9.3,13.8-14l0,2.4c-4.1,4.2-8.2,8.3-12.3,12.5L-170.1,291.3z M-173.3,289.5C-173.2,289.4-173.2,289.4-173.3,289.5c5.7-5.7,11.3-11.4,17-17.1l0,2.4c-5.1,5.2-10.3,10.4-15.4,15.6c0,0,0,0,0,0 L-173.3,289.5z M-176.4,287.6C-176.4,287.6-176.4,287.6-176.4,287.6c6.7-6.8,13.4-13.6,20.1-20.3l0,2.4 c-6.1,6.2-12.3,12.4-18.4,18.6c-0.1,0.1-0.1,0.1-0.1,0.2L-176.4,287.6z M-179.5,285.7C-179.5,285.7-179.5,285.7-179.5,285.7 c7.7-7.8,15.5-15.6,23.2-23.4l0,2.4c-7.2,7.3-14.4,14.5-21.5,21.8c0,0-0.1,0.1-0.1,0.1L-179.5,285.7z M-182.7,283.9 C-182.6,283.9-182.6,283.8-182.7,283.9c8.7-8.9,17.4-17.6,26.1-26.4l0.2,0.1l0,2.1c-8.2,8.3-16.4,16.6-24.7,25 c0,0-0.1,0.1-0.1,0.1L-182.7,283.9z M-185.8,282.1c0.1-0.1,0.1-0.2,0.2-0.2c8.5-8.6,17-17.2,25.6-25.9c0.1-0.1,0.2-0.2,0.3-0.3 l1.5,0.9c-8.6,8.7-17.3,17.5-25.9,26.2c0,0-0.1,0.1-0.1,0.2L-185.8,282.1z M-188.9,280.2c0-0.1,0.1-0.1,0.1-0.2 c8.6-8.7,17.3-17.5,25.9-26.2l1.5,0.9c-8.6,8.7-17.3,17.5-25.9,26.2c-0.1,0.1-0.1,0.1-0.2,0.2L-188.9,280.2z M-192.1,278.3 c0.1-0.1,0.1-0.1,0.2-0.2c8.6-8.7,17.2-17.4,25.8-26.2l1.5,0.9c-8.6,8.7-17.1,17.3-25.7,26c-0.1,0.1-0.3,0.3-0.4,0.4 L-192.1,278.3z M-154.7,213.8l35.8,20.9l-36,20.5l-35.8-20.9L-154.7,213.8z M-191.2,237.2l1.5,0.9c-0.8,0.8-1.7,1.7-2.5,2.5 l0-2.4C-191.8,237.9-191.5,237.6-191.2,237.2z M-192.3,253.4c3.5-3.5,7-7.1,10.5-10.6l1.5,0.9c-4,4.1-8,8.1-12.1,12.2 L-192.3,253.4z M-192.2,250.8l0-2.4c0.9-0.9,1.8-1.9,2.8-2.8c1.5-1.6,3.1-3.1,4.6-4.7l1.5,0.9 C-186.3,244.8-189.3,247.8-192.2,250.8z M-192.2,245.7l0-2.4c1.4-1.4,2.8-2.8,4.2-4.2l1.5,0.9 C-188.4,241.9-190.3,243.8-192.2,245.7z M-178.6,244.6l1.5,0.9c-5.1,5.1-10.1,10.3-15.2,15.4l0-2.4 C-187.7,253.8-183.2,249.2-178.6,244.6z M-192.3,263.5c5.6-5.7,11.2-11.4,16.9-17.1l1.5,0.9c-6.1,6.2-12.3,12.4-18.4,18.6 L-192.3,263.5z M-192.4,268.6c6.7-6.8,13.4-13.5,20.1-20.3l1.5,0.9c-7.2,7.3-14.4,14.6-21.6,21.8L-192.4,268.6z M-192.4,273.6 c7.7-7.8,15.5-15.7,23.2-23.5l1.5,0.9c-8.3,8.4-16.5,16.7-24.8,25.1L-192.4,273.6z M-156.2,297.3l0,2.3l-1.4-0.8 C-157.1,298.2-156.7,297.7-156.2,297.3z M-153.6,257.6l36-20.5l-0.1,41.8l-35.8,20.4L-153.6,257.6z"/><path d="M-154.9,232.7C-154.8,232.7-154.8,232.7-154.9,232.7c0.8,0,1.4-0.6,1.4-1.4c0-0.8-0.6-1.4-1.4-1.4 c-0.8,0-1.4,0.6-1.4,1.4C-156.2,232.1-155.6,232.7-154.9,232.7z"/><path d="M-154.9,239.1C-154.9,239.1-154.9,239.1-154.9,239.1c0.8,0,1.4-0.6,1.4-1.4c0-0.8-0.6-1.4-1.4-1.4 c-0.8,0-1.4,0.6-1.4,1.4C-156.3,238.4-155.7,239.1-154.9,239.1z"/><path d="M-155,249.1c-0.8,0-1.4,0.6-1.4,1.4c0,0.8,0.6,1.4,1.4,1.4c0,0,0,0,0,0c0.7,0,1.4-0.6,1.4-1.4 C-153.6,249.7-154.2,249.1-155,249.1z"/><path d="M-154.9,245.4C-154.9,245.4-154.9,245.4-154.9,245.4c0.8,0,1.4-0.6,1.4-1.4c0-0.8-0.6-1.4-1.4-1.4 c-0.8,0-1.4,0.6-1.4,1.4C-156.3,244.8-155.7,245.4-154.9,245.4z"/><path d="M-154.8,219.9C-154.8,219.9-154.8,219.9-154.8,219.9c0.8,0,1.4-0.6,1.4-1.4c0-0.8-0.6-1.4-1.4-1.4 c-0.8,0-1.4,0.6-1.4,1.4C-156.2,219.3-155.5,219.9-154.8,219.9z"/><path d="M-154.8,226.3C-154.8,226.3-154.8,226.3-154.8,226.3c0.8,0,1.4-0.6,1.4-1.4c0-0.8-0.6-1.4-1.4-1.4 c-0.8,0-1.4,0.6-1.4,1.4C-156.2,225.7-155.6,226.3-154.8,226.3z"/><path d="M-148.8,258.9c-0.7-0.4-1.5-0.2-1.9,0.5c-0.4,0.7-0.2,1.5,0.5,1.9c0.2,0.1,0.5,0.2,0.7,0.2 c0.5,0,0.9-0.2,1.2-0.7C-147.9,260.1-148.1,259.3-148.8,258.9z"/><path d="M-121.1,275.3c-0.7-0.4-1.5-0.2-1.9,0.5c-0.4,0.7-0.2,1.5,0.5,1.9c0.2,0.1,0.5,0.2,0.7,0.2 c0.5,0,0.9-0.2,1.2-0.7C-120.2,276.5-120.5,275.7-121.1,275.3z"/><path d="M-126.6,272c-0.7-0.4-1.5-0.2-1.9,0.5c-0.4,0.7-0.2,1.5,0.5,1.9c0.2,0.1,0.5,0.2,0.7,0.2 c0.5,0,0.9-0.2,1.2-0.7C-125.8,273.2-126,272.4-126.6,272z"/><path d="M-143.2,262.2c-0.7-0.4-1.5-0.2-1.9,0.5c-0.4,0.7-0.2,1.5,0.5,1.9c0.2,0.1,0.5,0.2,0.7,0.2 c0.5,0,0.9-0.2,1.2-0.7C-142.4,263.4-142.6,262.6-143.2,262.2z"/><path d="M-132.2,268.7c-0.7-0.4-1.5-0.2-1.9,0.5c-0.4,0.7-0.2,1.5,0.5,1.9c0.2,0.1,0.5,0.2,0.7,0.2 c0.5,0,0.9-0.2,1.2-0.7C-131.3,270-131.5,269.1-132.2,268.7z"/><path d="M-137.7,265.5c-0.7-0.4-1.5-0.2-1.9,0.5c-0.4,0.7-0.2,1.5,0.5,1.9c0.2,0.1,0.5,0.2,0.7,0.2 c0.5,0,0.9-0.2,1.2-0.7C-136.8,266.7-137.1,265.8-137.7,265.5z"/></symbol>
|
||||
<symbol id='3d-rotate' viewBox="0 0 24 30"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M17.856,11.409c-0.004-0.127-0.006-0.165-0.013-0.335l-0.01-0.195 c0.001,0.02-0.01-0.159-0.008-0.14l-0.004-0.06l-1.214,0.08v0.004c0.005,0.071,0.009,0.137,0.013,0.209 c0-0.001,0.025,0.732,0.025,0.731l0.001,0.025l-0.001-0.01l0.001,0.029v0.021v-0.01v0.03v-0.009v0.03v-0.01l0.001,0.035 l-0.001-0.01l0.001,0.04v-0.01v0.045v-0.01v0.06V11.94V12c0,0.925-0.066,1.891-0.214,2.85c0.443-0.125,0.877-0.272,1.288-0.444 c0.097-0.8,0.143-1.604,0.143-2.405c-0.001-0.127-0.002-0.254-0.004-0.381L17.856,11.409L17.856,11.409z M5.386,16.674L2,15.691 l0.658-0.711C1.817,14.19,1.2,13.182,1.2,12c0.006-0.916,0.35-1.691,0.912-2.399c0.83-1.011,2.014-1.758,3.339-2.293 C5.335,7.792,5.239,8.281,5.162,8.774C4.584,9.066,4.053,9.41,3.592,9.812c-0.563,0.5-1.035,1.118-1.149,1.862 c-0.076,0.5,0.027,0.975,0.259,1.417c0.197,0.374,0.478,0.711,0.782,0.995l0.657-0.711L5.386,16.674L5.386,16.674z M9.6,6.283 C10.44,6.18,11.256,6.135,12,6.135c1.765,0,3.552,0.222,5.246,0.722C19.566,7.542,22.783,9.189,22.8,12 c-0.006,0.915-0.349,1.69-0.911,2.398c-2.151,2.622-6.685,3.467-9.889,3.467c-0.89,0-1.822-0.054-2.697-0.182l0.165-1.205 c0.82,0.12,1.699,0.17,2.533,0.17c2.71,0,6.298-0.621,8.408-2.46c0.644-0.572,1.167-1.297,1.175-2.188 c-0.013-1.455-1.41-2.516-2.574-3.134C16.924,7.773,14.333,7.351,12,7.351c-0.884,0-1.862,0.066-2.852,0.219 C9.275,7.128,9.425,6.697,9.6,6.283L9.6,6.283z M15.224,18.834c0.486-0.076,0.975-0.169,1.459-0.283 c-0.85,2.063-2.374,4.235-4.683,4.249c-0.916-0.006-1.691-0.349-2.399-0.911C6.979,19.737,6.135,15.204,6.135,12 c0-1.764,0.222-3.552,0.722-5.246C7.542,4.434,9.189,1.217,12,1.2c1.454,0,2.627,0.926,3.466,2.038l0.778-0.577l0.61,3.471 L13.71,4.539l0.778-0.577C13.907,3.175,13.023,2.417,12,2.417c-1.455,0.013-2.516,1.411-3.134,2.575 C7.773,7.076,7.351,9.667,7.351,12c0,2.71,0.621,6.298,2.461,8.408c0.572,0.644,1.296,1.167,2.188,1.175 c1.455-0.013,2.516-1.41,3.134-2.574L15.224,18.834z"/></g>
|
||||
</symbol>
|
||||
<symbol id="check-solid" viewBox="0 0 512 512">
|
||||
<!--Font-awesome check-solid https://fontawesome.com/license CC-BY-Attribution !-->
|
||||
<g id="check-solid">
|
||||
<path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 28 KiB |
28
src/App.js
28
src/App.js
@ -19,6 +19,8 @@ import {
|
||||
getUserManagerForOpenIdConnectClient,
|
||||
initWebWorkers,
|
||||
} from './utils/index.js'
|
||||
import setupTools from './setupTools'
|
||||
import ConnectedToolContextMenu from './connectedComponents/ConnectedToolContextMenu'
|
||||
|
||||
const { ExtensionManager } = OHIF.extensions
|
||||
const { reducers, localStorage } = OHIF.redux
|
||||
@ -35,31 +37,15 @@ store.subscribe(() => {
|
||||
})
|
||||
})
|
||||
|
||||
const availableTools = [
|
||||
{ name: 'Pan', mouseButtonMasks: [1, 4] },
|
||||
{ name: 'Zoom', mouseButtonMasks: [1, 2] },
|
||||
{ name: 'Wwwc', mouseButtonMasks: [1] },
|
||||
{ name: 'Bidirectional', mouseButtonMasks: [1] },
|
||||
{ name: 'Length', mouseButtonMasks: [1] },
|
||||
{ name: 'Angle', mouseButtonMasks: [1] },
|
||||
{ name: 'StackScroll', mouseButtonMasks: [1] },
|
||||
{ name: 'Brush', mouseButtonMasks: [1] },
|
||||
{ name: 'FreehandMouse', mouseButtonMasks: [1] },
|
||||
{ name: 'PanMultiTouch' },
|
||||
{ name: 'ZoomTouchPinch' },
|
||||
{ name: 'StackScrollMouseWheel' },
|
||||
{ name: 'StackScrollMultiTouch' },
|
||||
]
|
||||
setupTools(store)
|
||||
|
||||
const toolAction = OHIF.redux.actions.setExtensionData('cornerstone', {
|
||||
availableTools,
|
||||
})
|
||||
|
||||
store.dispatch(toolAction)
|
||||
const children = {
|
||||
viewport: [<ConnectedToolContextMenu />],
|
||||
}
|
||||
|
||||
/** TODO: extensions should be passed in as prop as soon as we have the extensions as separate packages and then registered by ExtensionsManager */
|
||||
const extensions = [
|
||||
new OHIFCornerstoneExtension({}),
|
||||
new OHIFCornerstoneExtension({ children }),
|
||||
new OHIFVTKExtension(),
|
||||
new OHIFDicomPDFExtension(),
|
||||
new OHIFDicomHtmlExtension(),
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
.editDescriptionDialog {
|
||||
position: absolute;
|
||||
z-index: 300;
|
||||
width: 320px;
|
||||
transition: all 300ms linear;
|
||||
}
|
||||
@ -0,0 +1,82 @@
|
||||
import { Component } from 'react'
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import SimpleDialog from '../SimpleDialog/SimpleDialog.js'
|
||||
|
||||
import bounding from '../../lib/utils/bounding.js'
|
||||
import { getDialogStyle } from './../Labelling/labellingPositionUtils.js'
|
||||
|
||||
import './EditDescriptionDialog.css'
|
||||
|
||||
export default class EditDescriptionDialog extends Component {
|
||||
static defaultProps = {
|
||||
componentRef: React.createRef(),
|
||||
componentStyle: {},
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
measurementData: PropTypes.object.isRequired,
|
||||
onCancel: PropTypes.func.isRequired,
|
||||
componentRef: PropTypes.object,
|
||||
componentStyle: PropTypes.object,
|
||||
onUpdate: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
description: props.measurementData.description || '',
|
||||
}
|
||||
|
||||
this.mainElement = React.createRef()
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
bounding(this.mainElement)
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.description !== prevProps.description) {
|
||||
this.setState({
|
||||
description: this.props.description,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const style = getDialogStyle(this.props.componentStyle)
|
||||
|
||||
return (
|
||||
<SimpleDialog
|
||||
headerTitle="Edit Description"
|
||||
onClose={this.onClose}
|
||||
onConfirm={this.onConfirm}
|
||||
rootClass="editDescriptionDialog"
|
||||
componentRef={this.mainElement}
|
||||
componentStyle={style}
|
||||
>
|
||||
<input
|
||||
value={this.state.description}
|
||||
className="simpleDialogInput"
|
||||
id="description"
|
||||
autoComplete="off"
|
||||
autoFocus
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
</SimpleDialog>
|
||||
)
|
||||
}
|
||||
|
||||
onClose = () => {
|
||||
this.props.onCancel()
|
||||
}
|
||||
|
||||
onConfirm = () => {
|
||||
this.props.onUpdate(this.state.description)
|
||||
}
|
||||
|
||||
handleChange = event => {
|
||||
this.setState({ description: event.target.value })
|
||||
}
|
||||
}
|
||||
276
src/components/Labelling/LabellingFlow.js
Normal file
276
src/components/Labelling/LabellingFlow.js
Normal file
@ -0,0 +1,276 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import cloneDeep from 'lodash.clonedeep'
|
||||
import bounding from '../../lib/utils/bounding.js'
|
||||
|
||||
import LabellingTransition from './LabellingTransition.js'
|
||||
import { SelectTree } from 'react-viewerbase'
|
||||
import { getAddLabelButtonStyle } from './labellingPositionUtils.js'
|
||||
|
||||
import OHIFLabellingData from './OHIFLabellingData.js'
|
||||
|
||||
export default class LabellingFlow extends Component {
|
||||
static propTypes = {
|
||||
eventData: PropTypes.object.isRequired,
|
||||
measurementData: PropTypes.object.isRequired,
|
||||
|
||||
labellingDoneCallback: PropTypes.func.isRequired,
|
||||
updateLabelling: PropTypes.func.isRequired,
|
||||
|
||||
skipAddLabelButton: PropTypes.bool,
|
||||
editLocation: PropTypes.bool,
|
||||
editDescription: PropTypes.bool,
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
const { location, locationLabel, description } = props.measurementData
|
||||
|
||||
let style = props.componentStyle
|
||||
if (!props.skipAddLabelButton) {
|
||||
style = getAddLabelButtonStyle(props.measurementData, props.eventData)
|
||||
}
|
||||
|
||||
this.state = {
|
||||
location,
|
||||
locationLabel,
|
||||
description,
|
||||
skipAddLabelButton: props.skipAddLabelButton,
|
||||
editDescription: props.editDescription,
|
||||
editLocation: props.editLocation,
|
||||
componentStyle: style,
|
||||
confirmationState: false,
|
||||
displayComponent: true,
|
||||
}
|
||||
|
||||
this.mainElement = React.createRef()
|
||||
this.descriptionInput = React.createRef()
|
||||
|
||||
this.initialItems = OHIFLabellingData
|
||||
this.currentItems = cloneDeep(this.initialItems)
|
||||
}
|
||||
|
||||
componentDidUpdate = () => {
|
||||
this.repositionComponent()
|
||||
}
|
||||
|
||||
render() {
|
||||
let mainElementClassName = 'labellingComponent'
|
||||
if (this.state.editDescription) {
|
||||
mainElementClassName += ' editDescription'
|
||||
}
|
||||
|
||||
const style = Object.assign({}, this.state.componentStyle)
|
||||
if (this.state.skipAddLabelButton) {
|
||||
style.left -= 160
|
||||
}
|
||||
|
||||
return (
|
||||
<LabellingTransition
|
||||
displayComponent={this.state.displayComponent}
|
||||
onTransitionExit={this.props.labellingDoneCallback}
|
||||
>
|
||||
<div
|
||||
className={mainElementClassName}
|
||||
style={style}
|
||||
ref={this.mainElement}
|
||||
onMouseLeave={this.fadeOutAndLeave}
|
||||
onMouseEnter={this.clearFadeOutTimer}
|
||||
>
|
||||
{this.labellingStateFragment()}
|
||||
</div>
|
||||
</LabellingTransition>
|
||||
)
|
||||
}
|
||||
|
||||
labellingStateFragment = () => {
|
||||
const {
|
||||
skipAddLabelButton,
|
||||
editLocation,
|
||||
description,
|
||||
locationLabel,
|
||||
} = this.state
|
||||
|
||||
if (!skipAddLabelButton) {
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="addLabelButton"
|
||||
onClick={this.showLabelling}
|
||||
>
|
||||
{this.state.location ? 'Edit' : 'Add'} Label
|
||||
</button>
|
||||
</>
|
||||
)
|
||||
} else {
|
||||
if (editLocation) {
|
||||
return (
|
||||
<SelectTree
|
||||
items={this.currentItems}
|
||||
columns={1}
|
||||
onSelected={this.selectTreeSelectCalback}
|
||||
selectTreeFirstTitle="Assign Label"
|
||||
onComponentChange={this.repositionComponent}
|
||||
/>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="checkIconWrapper"
|
||||
onClick={this.fadeOutAndLeaveFast}
|
||||
>
|
||||
<svg className="checkIcon">
|
||||
<use xlinkHref="/icons.svg#check-solid" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="locationDescriptionWrapper">
|
||||
<div className="location">{locationLabel}</div>
|
||||
<div className="description">
|
||||
<input
|
||||
id="descriptionInput"
|
||||
ref={this.descriptionInput}
|
||||
defaultValue={description || ''}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="commonButtons">
|
||||
<button
|
||||
type="button"
|
||||
className="commonButton left"
|
||||
onClick={this.relabel}
|
||||
>
|
||||
Relabel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="commonButton right"
|
||||
onClick={this.setDescriptionUpdateMode}
|
||||
>
|
||||
{description ? 'Edit ' : 'Add '}
|
||||
Description
|
||||
</button>
|
||||
</div>
|
||||
<div className="editDescriptionButtons">
|
||||
<button
|
||||
type="button"
|
||||
className="commonButton left"
|
||||
onClick={this.descriptionCancel}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="commonButton right"
|
||||
onClick={this.descriptionSave}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
relabel = () => {
|
||||
this.setState({
|
||||
editLocation: true,
|
||||
})
|
||||
}
|
||||
|
||||
setDescriptionUpdateMode = () => {
|
||||
this.descriptionInput.current.focus()
|
||||
|
||||
this.setState({
|
||||
editDescription: true,
|
||||
})
|
||||
}
|
||||
|
||||
descriptionCancel = () => {
|
||||
const { description = '' } = cloneDeep(this.state)
|
||||
this.descriptionInput.current.value = description
|
||||
|
||||
this.setState({
|
||||
editDescription: false,
|
||||
})
|
||||
}
|
||||
|
||||
descriptionSave = () => {
|
||||
const description = this.descriptionInput.current.value
|
||||
this.props.updateLabelling({ description })
|
||||
|
||||
this.setState({
|
||||
description,
|
||||
editDescription: false,
|
||||
})
|
||||
}
|
||||
|
||||
selectTreeSelectCalback = (event, itemSelected) => {
|
||||
const location = itemSelected.value
|
||||
this.props.updateLabelling({ location })
|
||||
|
||||
const viewportTopPosition = this.mainElement.current.offsetParent.offsetTop
|
||||
const componentStyle = {
|
||||
top: event.nativeEvent.y - viewportTopPosition - 25,
|
||||
left: this.state.componentStyle.left,
|
||||
}
|
||||
|
||||
this.setState({
|
||||
editLocation: false,
|
||||
confirmationState: true,
|
||||
location: itemSelected.value,
|
||||
locationLabel: itemSelected.label,
|
||||
componentStyle,
|
||||
})
|
||||
|
||||
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,
|
||||
})
|
||||
}
|
||||
|
||||
clearFadeOutTimer = () => {
|
||||
if (!this.fadeOutTimer) {
|
||||
return
|
||||
}
|
||||
|
||||
clearTimeout(this.fadeOutTimer)
|
||||
}
|
||||
|
||||
repositionComponent = () => {
|
||||
// SetTimeout for the css animation to end.
|
||||
setTimeout(() => {
|
||||
bounding(this.mainElement)
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
130
src/components/Labelling/LabellingManager.css
Normal file
130
src/components/Labelling/LabellingManager.css
Normal file
@ -0,0 +1,130 @@
|
||||
.labellingComponent {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
z-index: 300;
|
||||
transition: all 200ms linear;
|
||||
}
|
||||
|
||||
.labellingComponent .selectedLabel,
|
||||
.labellingComponent .selectedDescription {
|
||||
padding: 5px;
|
||||
background-color: white;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.labellingComponent .addLabelButton {
|
||||
color: #000000;
|
||||
background-color: #20a5d6;
|
||||
border: 2px solid #44626f;
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
opacity: 1;
|
||||
padding: 0 14px;
|
||||
transition: opacity 0.3s ease;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.labellingComponent .commonButton {
|
||||
border: 1px solid #44626f;
|
||||
color: #ffffff;
|
||||
background-color: #000000;
|
||||
border-radius: 16px;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
padding: 0 12px;
|
||||
margin: 10px 5px 0 0;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.labellingComponent .locationDescriptionWrapper {
|
||||
background-color: #ffffff;
|
||||
line-height: 46px;
|
||||
height: 46px;
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
width: 290px;
|
||||
min-width: 260px;
|
||||
padding: 0 12px;
|
||||
margin: 0 auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.labellingComponent .locationDescriptionWrapper .location {
|
||||
transition: all 300ms linear;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.labellingComponent.editDescription .locationDescriptionWrapper .location {
|
||||
bottom: 38px;
|
||||
}
|
||||
|
||||
.labellingComponent .locationDescriptionWrapper #descriptionInput {
|
||||
transition-delay: all 300ms linear;
|
||||
visibility: hidden;
|
||||
outline: none;
|
||||
height: 46px;
|
||||
width: 100%;
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.labellingComponent.editDescription
|
||||
.locationDescriptionWrapper
|
||||
#descriptionInput {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.labellingComponent.editDescription .location {
|
||||
color: #337ab7;
|
||||
}
|
||||
|
||||
.labellingComponent .commonButtons,
|
||||
.labellingComponent.editDescription .editDescriptionButtons {
|
||||
display: block;
|
||||
margin-left: 55px;
|
||||
}
|
||||
|
||||
.labellingComponent.editDescription .commonButtons,
|
||||
.labellingComponent .editDescriptionButtons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.labellingComponent .commonButtons {
|
||||
text-align: center;
|
||||
margin-left: 55px;
|
||||
}
|
||||
|
||||
.labellingComponent .commonButton.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.labellingComponent .commonButton.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.labellingComponent .checkIconWrapper {
|
||||
display: inline-block;
|
||||
background-color: #337ab7;
|
||||
border-radius: 46px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
margin-right: 10px;
|
||||
vertical-align: bottom;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.labellingComponent .checkIcon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 13px;
|
||||
fill: black;
|
||||
}
|
||||
130
src/components/Labelling/LabellingManager.js
Normal file
130
src/components/Labelling/LabellingManager.js
Normal file
@ -0,0 +1,130 @@
|
||||
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 = {
|
||||
eventData: PropTypes.object.isRequired,
|
||||
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 = {
|
||||
componentStyle: getComponentPosition(props.eventData),
|
||||
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}
|
||||
componentRef={this.editDescriptionDialog}
|
||||
componentStyle={this.state.componentStyle}
|
||||
measurementData={measurementData}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (editLocation || editDescription) {
|
||||
return (
|
||||
<LabellingFlow
|
||||
{...this.props}
|
||||
componentStyle={this.state.componentStyle}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
}
|
||||
|
||||
function getComponentPosition(eventData) {
|
||||
const {
|
||||
event: { clientX: left, clientY: top },
|
||||
} = eventData
|
||||
|
||||
return {
|
||||
left,
|
||||
top,
|
||||
}
|
||||
}
|
||||
21
src/components/Labelling/LabellingTransition.css
Normal file
21
src/components/Labelling/LabellingTransition.css
Normal file
@ -0,0 +1,21 @@
|
||||
.labelling-appear {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.labelling-appear.labelling-appear-active {
|
||||
opacity: 1;
|
||||
transition: opacity 500ms linear;
|
||||
}
|
||||
|
||||
.labelling-exit {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.labelling-exit.labelling-exit-active {
|
||||
opacity: 0;
|
||||
transition: opacity 500ms linear;
|
||||
}
|
||||
|
||||
.labelling-exit-done {
|
||||
opacity: 0;
|
||||
}
|
||||
31
src/components/Labelling/LabellingTransition.js
Normal file
31
src/components/Labelling/LabellingTransition.js
Normal file
@ -0,0 +1,31 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { CSSTransition } from 'react-transition-group'
|
||||
|
||||
import './LabellingTransition.css'
|
||||
|
||||
// If these variables changes, CSS must be updated
|
||||
const transitionDuration = 500
|
||||
const transitionClassName = 'labelling'
|
||||
const transitionOnAppear = true
|
||||
|
||||
export default class LabellingTransition extends Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
displayComponent: PropTypes.bool.isRequired,
|
||||
onTransitionExit: PropTypes.func.isRequired,
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<CSSTransition
|
||||
in={this.props.displayComponent}
|
||||
appear={transitionOnAppear}
|
||||
timeout={transitionDuration}
|
||||
classNames={transitionClassName}
|
||||
onExited={this.props.onTransitionExit}
|
||||
>
|
||||
{this.props.children}
|
||||
</CSSTransition>
|
||||
)
|
||||
}
|
||||
}
|
||||
39
src/components/Labelling/OHIFLabellingData.js
Normal file
39
src/components/Labelling/OHIFLabellingData.js
Normal file
@ -0,0 +1,39 @@
|
||||
const items = [
|
||||
'Abdomen/Chest Wall',
|
||||
'Adrenal',
|
||||
'Bladder',
|
||||
'Bone',
|
||||
'Brain',
|
||||
'Breast',
|
||||
'Colon',
|
||||
'Esophagus',
|
||||
'Extremities',
|
||||
'Gallbladder',
|
||||
'Kidney',
|
||||
'Liver',
|
||||
'Lung',
|
||||
'Lymph Node',
|
||||
'Mediastinum/Hilum',
|
||||
'Muscle',
|
||||
'Neck',
|
||||
'Other Soft Tissue',
|
||||
'Ovary',
|
||||
'Pancreas',
|
||||
'Pelvis',
|
||||
'Peritoneum/Omentum',
|
||||
'Prostate',
|
||||
'Retroperitoneum',
|
||||
'Small Bowel',
|
||||
'Spleen',
|
||||
'Stomach',
|
||||
'Subcutaneous',
|
||||
]
|
||||
|
||||
const OHIFLabellingData = items.map(item => {
|
||||
return {
|
||||
label: item,
|
||||
value: item,
|
||||
}
|
||||
})
|
||||
|
||||
export default OHIFLabellingData
|
||||
53
src/components/Labelling/labellingPositionUtils.js
Normal file
53
src/components/Labelling/labellingPositionUtils.js
Normal file
@ -0,0 +1,53 @@
|
||||
import cornerstone from 'cornerstone-core'
|
||||
|
||||
const buttonSize = {
|
||||
width: 96,
|
||||
height: 28,
|
||||
}
|
||||
|
||||
export function getAddLabelButtonStyle(measurementData, eventData) {
|
||||
const { start, end } = measurementData.handles
|
||||
const { client } = eventData.currentPoints
|
||||
const clientStart = cornerstone.pixelToCanvas(eventData.element, start)
|
||||
const clientEnd = cornerstone.pixelToCanvas(eventData.element, end)
|
||||
const canvasOffSetLeft = client.x - clientStart.x
|
||||
const canvasOffSetTop = client.y - clientStart.y
|
||||
const position = {
|
||||
left: clientEnd.x + canvasOffSetLeft,
|
||||
top: clientEnd.y + canvasOffSetTop,
|
||||
}
|
||||
|
||||
if (start.y > end.y) {
|
||||
position.top -= buttonSize.height
|
||||
}
|
||||
if (start.x > end.x) {
|
||||
position.left -= buttonSize.width
|
||||
}
|
||||
|
||||
return position
|
||||
}
|
||||
|
||||
export function getDialogStyle(componentStyle) {
|
||||
const style = Object.assign({}, componentStyle)
|
||||
const dialogProps = {
|
||||
width: 320,
|
||||
height: 230,
|
||||
}
|
||||
|
||||
// Get max values to avoid position out of the screen
|
||||
const maxLeft = window.innerWidth - dialogProps.width
|
||||
const maxTop = window.innerHeight - dialogProps.height
|
||||
|
||||
// Positioning the dialog with its center on the click event
|
||||
style.left -= dialogProps.width / 2
|
||||
style.top -= dialogProps.height / 2
|
||||
|
||||
if (style.left > maxLeft) {
|
||||
style.left = maxLeft
|
||||
}
|
||||
if (style.top > maxTop) {
|
||||
style.top = maxTop
|
||||
}
|
||||
|
||||
return style
|
||||
}
|
||||
133
src/components/SimpleDialog/SimpleDialog.css
Normal file
133
src/components/SimpleDialog/SimpleDialog.css
Normal file
@ -0,0 +1,133 @@
|
||||
.simpleDialog {
|
||||
position: fixed;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background-color: #151a1f;
|
||||
}
|
||||
.simpleDialog .header {
|
||||
border-bottom-width: 3px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #000;
|
||||
padding: 19px 22px 17px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.simpleDialog .header .title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
padding-right: 40px;
|
||||
color: #91b9cd;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.simpleDialog .header .closeBtn {
|
||||
height: 20px;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
width: 20px;
|
||||
color: #91b9cd;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 21px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.simpleDialog .header .closeIcon {
|
||||
color: transparent;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
height: 100%;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.simpleDialog .header .closeIcon:after,
|
||||
.simpleDialog .header .closeIcon:before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 2px;
|
||||
transition: background-color 0.3s ease;
|
||||
width: 19px;
|
||||
background-color: #91b9cd;
|
||||
}
|
||||
|
||||
.simpleDialog .header .closeIcon:before {
|
||||
left: 1px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
-webkit-transform-origin: 1px 50%;
|
||||
transform-origin: 1px 50%;
|
||||
}
|
||||
|
||||
.simpleDialog .header .closeIcon:after {
|
||||
right: 1px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform-origin: calc(100% - 1px) 50%;
|
||||
transform-origin: calc(100% - 1px) 50%;
|
||||
}
|
||||
|
||||
.simpleDialog .content {
|
||||
padding: 16px 22px 25px;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.simpleDialog .content .simpleDialogSelect,
|
||||
.simpleDialog .content .simpleDialogInput {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
line-height: 16px;
|
||||
padding: 8px 9px 6px;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.simpleDialog .content .simpleDialogInputLabel {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.simpleDialog .footer {
|
||||
padding: 15px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.simpleDialog .footer .btn {
|
||||
transition: background-color 0.3s ease;
|
||||
color: #000;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
height: 37px;
|
||||
line-height: 37px;
|
||||
padding: 0 12px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.simpleDialog .footer .btn-confirm {
|
||||
color: #fff;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
56
src/components/SimpleDialog/SimpleDialog.js
Normal file
56
src/components/SimpleDialog/SimpleDialog.js
Normal file
@ -0,0 +1,56 @@
|
||||
import { Component } from 'react'
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import './SimpleDialog.css'
|
||||
|
||||
class SimpleDialog extends Component {
|
||||
static defaultProps = {
|
||||
componentStyle: {},
|
||||
rootClass: '',
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
className={`simpleDialog ${this.props.rootClass}`}
|
||||
ref={this.props.componentRef}
|
||||
style={this.props.componentStyle}
|
||||
>
|
||||
<form>
|
||||
<div className="header">
|
||||
<span className="closeBtn" onClick={this.props.onClose}>
|
||||
<span className="closeIcon">x</span>
|
||||
</span>
|
||||
<h4 className="title">{this.props.headerTitle}</h4>
|
||||
</div>
|
||||
<div className="content">{this.props.children}</div>
|
||||
<div className="footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-cancel"
|
||||
onClick={this.props.onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-confirm"
|
||||
onClick={this.props.onConfirm}
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
SimpleDialog.propTypes = {
|
||||
headerTitle: PropTypes.string.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
onConfirm: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
export default SimpleDialog
|
||||
24
src/connectedComponents/ConnectedLabellingOverlay.js
Normal file
24
src/connectedComponents/ConnectedLabellingOverlay.js
Normal file
@ -0,0 +1,24 @@
|
||||
import { connect } from 'react-redux'
|
||||
import LabellingOverlay from './LabellingOverlay'
|
||||
|
||||
const mapStateToProps = state => {
|
||||
if (!state.ui || !state.ui.labelling) {
|
||||
return {
|
||||
visible: false,
|
||||
}
|
||||
}
|
||||
|
||||
const labellingFlowData = state.ui.labelling
|
||||
|
||||
return {
|
||||
visible: false,
|
||||
...labellingFlowData,
|
||||
}
|
||||
}
|
||||
|
||||
const ConnectedLabellingOverlay = connect(
|
||||
mapStateToProps,
|
||||
null
|
||||
)(LabellingOverlay)
|
||||
|
||||
export default ConnectedLabellingOverlay
|
||||
@ -1,35 +1,41 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { MeasurementTable } from 'react-viewerbase';
|
||||
import OHIF from 'ohif-core';
|
||||
import moment from 'moment';
|
||||
import { connect } from 'react-redux'
|
||||
import { MeasurementTable } from 'react-viewerbase'
|
||||
import OHIF from 'ohif-core'
|
||||
import moment from 'moment'
|
||||
import cornerstone from 'cornerstone-core'
|
||||
import jumpToRowItem from '../lib/jumpToRowItem.js'
|
||||
import getMeasurementLocationCallback from '../lib/getMeasurementLocationCallback'
|
||||
|
||||
const { setViewportSpecificData } = OHIF.redux.actions;
|
||||
const { MeasurementApi } = OHIF.measurements
|
||||
|
||||
function groupBy(list, props) {
|
||||
return list.reduce((a, b) => {
|
||||
(a[b[props]] = a[b[props]] || []).push(b);
|
||||
return a;
|
||||
}, {});
|
||||
(a[b[props]] = a[b[props]] || []).push(b)
|
||||
return a
|
||||
}, {})
|
||||
}
|
||||
|
||||
function getAllTools() {
|
||||
const config = OHIF.measurements.MeasurementApi.getConfiguration();
|
||||
let tools = [];
|
||||
const config = OHIF.measurements.MeasurementApi.getConfiguration()
|
||||
let tools = []
|
||||
config.measurementTools.forEach(
|
||||
toolGroup => (tools = tools.concat(toolGroup.childTools))
|
||||
);
|
||||
)
|
||||
|
||||
return tools;
|
||||
return tools
|
||||
}
|
||||
|
||||
function getMeasurementText(measurementData) {
|
||||
const { location, description } = measurementData;
|
||||
let text = '...';
|
||||
const { location, description } = measurementData
|
||||
let text = '...'
|
||||
if (location) {
|
||||
text = location;
|
||||
text = location
|
||||
if (description) {
|
||||
text += `(${description})`;
|
||||
text += `(${description})`
|
||||
}
|
||||
}
|
||||
return text;
|
||||
return text
|
||||
}
|
||||
|
||||
function getDataForEachMeasurementNumber(
|
||||
@ -37,51 +43,62 @@ function getDataForEachMeasurementNumber(
|
||||
timepoints,
|
||||
displayFunction
|
||||
) {
|
||||
const data = [];
|
||||
const data = []
|
||||
// on each measurement number we should get each measurement data by available timepoint
|
||||
measurementNumberList.forEach(measurement => {
|
||||
timepoints.forEach(timepoint => {
|
||||
const eachData = {
|
||||
displayText: '...'
|
||||
};
|
||||
if (measurement.timepointId === timepoint.timepointId) {
|
||||
eachData.displayText = displayFunction(measurement);
|
||||
displayText: '...',
|
||||
}
|
||||
data.push(eachData);
|
||||
});
|
||||
});
|
||||
if (measurement.timepointId === timepoint.timepointId) {
|
||||
eachData.displayText = displayFunction(measurement)
|
||||
}
|
||||
data.push(eachData)
|
||||
})
|
||||
})
|
||||
|
||||
return data;
|
||||
return data
|
||||
}
|
||||
|
||||
function convertMeasurementsToTableData(toolCollections, timepoints) {
|
||||
const config = OHIF.measurements.MeasurementApi.getConfiguration();
|
||||
const toolGroups = config.measurementTools;
|
||||
const tools = getAllTools();
|
||||
const config = OHIF.measurements.MeasurementApi.getConfiguration()
|
||||
const toolGroups = config.measurementTools
|
||||
const tools = getAllTools()
|
||||
|
||||
const tableMeasurements = toolGroups.map(toolGroup => {
|
||||
return {
|
||||
groupName: toolGroup.name,
|
||||
groupId: toolGroup.id,
|
||||
measurements: []
|
||||
};
|
||||
});
|
||||
measurements: [],
|
||||
}
|
||||
})
|
||||
|
||||
Object.keys(toolCollections).forEach(toolId => {
|
||||
const toolMeasurements = toolCollections[toolId];
|
||||
const tool = tools.find(tool => tool.id === toolId);
|
||||
const { displayFunction } = tool.options.measurementTable;
|
||||
const toolMeasurements = toolCollections[toolId]
|
||||
const tool = tools.find(tool => tool.id === toolId)
|
||||
const { displayFunction } = tool.options.measurementTable
|
||||
|
||||
// Group by measurementNumber so we can display then all in the same line
|
||||
const groupedMeasurements = groupBy(toolMeasurements, 'measurementNumber');
|
||||
const groupedMeasurements = groupBy(toolMeasurements, 'measurementNumber')
|
||||
|
||||
Object.keys(groupedMeasurements).forEach(groupedMeasurementsIndex => {
|
||||
const measurementNumberList =
|
||||
groupedMeasurements[groupedMeasurementsIndex];
|
||||
groupedMeasurements[groupedMeasurementsIndex]
|
||||
|
||||
const {
|
||||
measurementNumber,
|
||||
lesionNamingNumber,
|
||||
toolType,
|
||||
} = measurementNumberList[0]
|
||||
const measurementId = measurementNumberList[0]._id
|
||||
|
||||
//check if all measurements with same measurementNumber will have same LABEL
|
||||
const tableMeasurement = {
|
||||
measurementId: measurementNumberList[0]._id,
|
||||
label: getMeasurementText(measurementNumberList[0]),
|
||||
measurementId,
|
||||
measurementNumber,
|
||||
lesionNamingNumber,
|
||||
toolType,
|
||||
hasWarnings: false, //TODO
|
||||
warningTitle: '', //TODO
|
||||
isSplitLesion: false, //TODO
|
||||
@ -90,48 +107,239 @@ function convertMeasurementsToTableData(toolCollections, timepoints) {
|
||||
measurementNumberList,
|
||||
timepoints,
|
||||
displayFunction
|
||||
)
|
||||
};
|
||||
),
|
||||
}
|
||||
|
||||
// find the group object for the tool
|
||||
const toolGroupMeasurements = tableMeasurements.find(group => {
|
||||
return group.groupId === tool.toolGroup;
|
||||
});
|
||||
return group.groupId === tool.toolGroup
|
||||
})
|
||||
// inject the new measurement for this measurementNumer
|
||||
toolGroupMeasurements.measurements.push(tableMeasurement);
|
||||
});
|
||||
});
|
||||
toolGroupMeasurements.measurements.push(tableMeasurement)
|
||||
})
|
||||
})
|
||||
|
||||
return tableMeasurements;
|
||||
return tableMeasurements
|
||||
}
|
||||
|
||||
function convertTimepointsToTableData(timepoints) {
|
||||
if (!timepoints || !timepoints.length) {
|
||||
return [];
|
||||
return []
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
label: 'Study date:',
|
||||
date: moment(timepoints[0].latestDate).format('DD-MMM-YY')
|
||||
}
|
||||
];
|
||||
date: moment(timepoints[0].latestDate).format('DD-MMM-YY'),
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const { timepoints, measurements } = state.timepointManager;
|
||||
const { timepoints, measurements } = state.timepointManager
|
||||
return {
|
||||
timepoints: convertTimepointsToTableData(timepoints),
|
||||
measurementCollection: convertMeasurementsToTableData(
|
||||
measurements,
|
||||
timepoints
|
||||
)
|
||||
};
|
||||
};
|
||||
),
|
||||
timepointManager: state.timepointManager,
|
||||
viewports: state.viewports,
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
dispatchRelabel: (event, measurementData, viewportsState) => {
|
||||
const activeViewportIndex =
|
||||
(viewportsState && viewportsState.activeViewportIndex) || 0
|
||||
|
||||
const enabledElements = cornerstone.getEnabledElements()
|
||||
if (!enabledElements || enabledElements.length <= activeViewportIndex) {
|
||||
OHIF.log.error('Failed to find the enabled element')
|
||||
return
|
||||
}
|
||||
|
||||
const { element } = enabledElements[activeViewportIndex]
|
||||
|
||||
const eventData = {
|
||||
event: {
|
||||
clientX: event.clientX,
|
||||
clientY: event.clientY,
|
||||
},
|
||||
element,
|
||||
}
|
||||
|
||||
const { toolType, measurementId } = measurementData
|
||||
const tool = MeasurementApi.Instance.tools[toolType].find(measurement => {
|
||||
return measurement._id === measurementId
|
||||
})
|
||||
|
||||
const options = {
|
||||
skipAddLabelButton: true,
|
||||
editLocation: true,
|
||||
}
|
||||
|
||||
// Clone the tool not to set empty location initially
|
||||
const toolForLocation = Object.assign({}, tool, { location: null })
|
||||
getMeasurementLocationCallback(eventData, toolForLocation, options)
|
||||
},
|
||||
dispatchEditDescription: (event, measurementData, viewportsState) => {
|
||||
const activeViewportIndex =
|
||||
(viewportsState && viewportsState.activeViewportIndex) || 0
|
||||
|
||||
const enabledElements = cornerstone.getEnabledElements()
|
||||
if (!enabledElements || enabledElements.length <= activeViewportIndex) {
|
||||
OHIF.log.error('Failed to find the enabled element')
|
||||
return
|
||||
}
|
||||
|
||||
const { element } = enabledElements[activeViewportIndex]
|
||||
|
||||
const eventData = {
|
||||
event: {
|
||||
clientX: event.clientX,
|
||||
clientY: event.clientY,
|
||||
},
|
||||
element,
|
||||
}
|
||||
|
||||
const { toolType, measurementId } = measurementData
|
||||
const tool = MeasurementApi.Instance.tools[toolType].find(measurement => {
|
||||
return measurement._id === measurementId
|
||||
})
|
||||
|
||||
const options = {
|
||||
editDescriptionOnDialog: true,
|
||||
}
|
||||
|
||||
getMeasurementLocationCallback(eventData, tool, options)
|
||||
},
|
||||
dispatchJumpToRowItem: (
|
||||
measurementData,
|
||||
viewportsState,
|
||||
timepointManagerState,
|
||||
options
|
||||
) => {
|
||||
const actionData = jumpToRowItem(
|
||||
measurementData,
|
||||
viewportsState,
|
||||
timepointManagerState,
|
||||
dispatch,
|
||||
options
|
||||
)
|
||||
|
||||
actionData.viewportSpecificData.forEach(viewportSpecificData => {
|
||||
const { viewportIndex, displaySet } = viewportSpecificData;
|
||||
|
||||
dispatch(setViewportSpecificData(viewportIndex, displaySet));
|
||||
})
|
||||
|
||||
const { toolType, measurementNumber } = measurementData
|
||||
const measurementApi = MeasurementApi.Instance
|
||||
|
||||
Object.keys(measurementApi.tools).forEach(toolType => {
|
||||
const measurements = measurementApi.tools[toolType]
|
||||
|
||||
measurements.forEach(measurement => {
|
||||
measurement.active = false
|
||||
})
|
||||
})
|
||||
|
||||
const measurementsToActive = measurementApi.tools[toolType].filter(
|
||||
measurement => {
|
||||
return measurement.measurementNumber === measurementNumber
|
||||
}
|
||||
)
|
||||
|
||||
measurementsToActive.forEach(measurementToActive => {
|
||||
measurementToActive.active = true
|
||||
})
|
||||
|
||||
measurementApi.syncMeasurementsAndToolData()
|
||||
|
||||
cornerstone.getEnabledElements().forEach(enabledElement => {
|
||||
cornerstone.updateImage(enabledElement.element)
|
||||
})
|
||||
|
||||
// Needs to update viewports.layout state to set layout
|
||||
//const layout = actionData.layout;
|
||||
//dispatch(setLayout(layout))
|
||||
|
||||
// Needs to update viewports.activeViewportIndex to the first updated viewport
|
||||
//const viewportIndex = actionData.viewportIndex;
|
||||
//dispatch(setViewportActive(viewportIndex));
|
||||
|
||||
// Needs to update timepointsManager.measurements state to set active measurementId
|
||||
// TODO: Not yet implemented
|
||||
//dispatch(setActiveMeasurement(measurementData.measurementId))
|
||||
|
||||
// (later): Needs to set some property on state.extensions.cornerstone to synchronize viewport scrolling
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
|
||||
return {
|
||||
timepoints: propsFromState.timepoints,
|
||||
measurementCollection: propsFromState.measurementCollection,
|
||||
selectedMeasurementNumber: ownProps.selectedMeasurementNumber,
|
||||
...propsFromDispatch,
|
||||
onItemClick: (event, measurementData) => {
|
||||
// TODO: Add timepointId to .data for measurementData?
|
||||
// TODO: Tooltype should be on the level below? This should
|
||||
// provide the entire row item?
|
||||
|
||||
const viewportsState = propsFromState.viewports
|
||||
const timepointManagerState = propsFromState.timepointManager
|
||||
|
||||
// TODO: invertViewportTimepointsOrder should be stored in / read from user preferences
|
||||
// TODO: childToolKey should come from the measurement table when it supports child tools
|
||||
const options = {
|
||||
invertViewportTimepointsOrder: false,
|
||||
childToolKey: null,
|
||||
}
|
||||
|
||||
propsFromDispatch.dispatchJumpToRowItem(
|
||||
measurementData,
|
||||
viewportsState,
|
||||
timepointManagerState,
|
||||
options
|
||||
)
|
||||
},
|
||||
onRelabelClick: (event, measurementData) => {
|
||||
const viewportsState = propsFromState.viewports
|
||||
propsFromDispatch.dispatchRelabel(event, measurementData, viewportsState)
|
||||
},
|
||||
onEditDescriptionClick: (event, measurementData) => {
|
||||
const viewportsState = propsFromState.viewports
|
||||
propsFromDispatch.dispatchEditDescription(
|
||||
event,
|
||||
measurementData,
|
||||
viewportsState
|
||||
)
|
||||
},
|
||||
onDeleteClick: (event, measurementData) => {
|
||||
const { MeasurementHandlers } = OHIF.measurements;
|
||||
|
||||
MeasurementHandlers.onRemoved({
|
||||
detail: {
|
||||
toolType: measurementData.toolType,
|
||||
measurementData: {
|
||||
_id: measurementData.measurementId,
|
||||
lesionNamingNumber: measurementData.lesionNamingNumber,
|
||||
measurementNumber: measurementData.measurementNumber
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const ConnectedMeasurementTable = connect(
|
||||
mapStateToProps,
|
||||
null
|
||||
)(MeasurementTable);
|
||||
mapDispatchToProps,
|
||||
mergeProps
|
||||
)(MeasurementTable)
|
||||
|
||||
export default ConnectedMeasurementTable;
|
||||
export default ConnectedMeasurementTable
|
||||
|
||||
34
src/connectedComponents/ConnectedToolContextMenu.js
Normal file
34
src/connectedComponents/ConnectedToolContextMenu.js
Normal file
@ -0,0 +1,34 @@
|
||||
import { connect } from 'react-redux'
|
||||
import ToolContextMenu from './ToolContextMenu'
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
if (!state.ui || !state.ui.contextMenu) {
|
||||
return {
|
||||
visible: false,
|
||||
}
|
||||
}
|
||||
|
||||
const { viewportIndex } = ownProps
|
||||
const toolContextMenuData = state.ui.contextMenu[viewportIndex]
|
||||
let availableTools
|
||||
|
||||
if (
|
||||
state.extensions &&
|
||||
state.extensions.cornerstone &&
|
||||
state.extensions.cornerstone.availableTools
|
||||
) {
|
||||
availableTools = state.extensions.cornerstone.availableTools
|
||||
}
|
||||
|
||||
return {
|
||||
...toolContextMenuData,
|
||||
availableTools,
|
||||
}
|
||||
}
|
||||
|
||||
const ConnectedToolContextMenu = connect(
|
||||
mapStateToProps,
|
||||
null
|
||||
)(ToolContextMenu)
|
||||
|
||||
export default ConnectedToolContextMenu
|
||||
33
src/connectedComponents/ConnectedViewerMain.js
Normal file
33
src/connectedComponents/ConnectedViewerMain.js
Normal file
@ -0,0 +1,33 @@
|
||||
import { connect } from 'react-redux';
|
||||
import ViewerMain from './ViewerMain';
|
||||
import OHIF from 'ohif-core';
|
||||
|
||||
const { setViewportSpecificData, clearViewportSpecificData } = OHIF.redux.actions;
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const { activeViewportIndex, layout, viewportSpecificData } = state.viewports;
|
||||
|
||||
return {
|
||||
activeViewportIndex,
|
||||
layout,
|
||||
viewportSpecificData
|
||||
}
|
||||
};
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
setViewportSpecificData: (viewportIndex, data) => {
|
||||
dispatch(setViewportSpecificData(viewportIndex, data));
|
||||
},
|
||||
clearViewportSpecificData: () => {
|
||||
dispatch(clearViewportSpecificData());
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const ConnectedViewerMain = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(ViewerMain);
|
||||
|
||||
export default ConnectedViewerMain;
|
||||
@ -1,38 +1,38 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ConnectedStudyBrowser from './ConnectedStudyBrowser.js';
|
||||
import ViewerMain from './ViewerMain.js';
|
||||
import ConnectedMeasurementTable from './ConnectedMeasurementTable';
|
||||
import './FlexboxLayout.css';
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import ConnectedStudyBrowser from './ConnectedStudyBrowser.js'
|
||||
import ConnectedViewerMain from './ConnectedViewerMain.js'
|
||||
import ConnectedMeasurementTable from './ConnectedMeasurementTable'
|
||||
import './FlexboxLayout.css'
|
||||
|
||||
class FlexboxLayout extends Component {
|
||||
static propTypes = {
|
||||
studies: PropTypes.array.isRequired,
|
||||
leftSidebarOpen: PropTypes.bool.isRequired,
|
||||
rightSidebarOpen: PropTypes.bool.isRequired
|
||||
};
|
||||
rightSidebarOpen: PropTypes.bool.isRequired,
|
||||
}
|
||||
|
||||
state = {
|
||||
studiesForBrowser: []
|
||||
};
|
||||
studiesForBrowser: [],
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const studiesForBrowser = this.getStudiesForBrowser();
|
||||
const studiesForBrowser = this.getStudiesForBrowser()
|
||||
|
||||
this.setState({
|
||||
studiesForBrowser
|
||||
});
|
||||
studiesForBrowser,
|
||||
})
|
||||
}
|
||||
|
||||
getStudiesForBrowser = () => {
|
||||
const { studies } = this.props;
|
||||
const { studies } = this.props
|
||||
|
||||
// TODO[react]:
|
||||
// - Add sorting of display sets
|
||||
// - Add useMiddleSeriesInstanceAsThumbnail
|
||||
// - Add showStackLoadingProgressBar option
|
||||
return studies.map(study => {
|
||||
const { studyInstanceUid } = study;
|
||||
const { studyInstanceUid } = study
|
||||
|
||||
const thumbnails = study.displaySets.map(displaySet => {
|
||||
const {
|
||||
@ -40,13 +40,13 @@ class FlexboxLayout extends Component {
|
||||
seriesDescription,
|
||||
seriesNumber,
|
||||
instanceNumber,
|
||||
numImageFrames
|
||||
} = displaySet;
|
||||
numImageFrames,
|
||||
} = displaySet
|
||||
|
||||
let imageId;
|
||||
let imageId
|
||||
|
||||
if (displaySet.images && displaySet.images.length) {
|
||||
imageId = displaySet.images[0].getImageId();
|
||||
imageId = displaySet.images[0].getImageId()
|
||||
}
|
||||
|
||||
return {
|
||||
@ -55,25 +55,25 @@ class FlexboxLayout extends Component {
|
||||
seriesDescription,
|
||||
seriesNumber,
|
||||
instanceNumber,
|
||||
numImageFrames
|
||||
};
|
||||
});
|
||||
numImageFrames,
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
studyInstanceUid,
|
||||
thumbnails
|
||||
};
|
||||
});
|
||||
};
|
||||
thumbnails,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
let mainContentClassName = 'main-content';
|
||||
let mainContentClassName = 'main-content'
|
||||
if (this.props.leftSidebarOpen) {
|
||||
mainContentClassName += ' sidebar-left-open';
|
||||
mainContentClassName += ' sidebar-left-open'
|
||||
}
|
||||
|
||||
if (this.props.rightSidebarOpen) {
|
||||
mainContentClassName += ' sidebar-right-open';
|
||||
mainContentClassName += ' sidebar-right-open'
|
||||
}
|
||||
|
||||
// TODO[react]: Make ConnectedMeasurementTable extension with state.timepointManager
|
||||
@ -89,7 +89,7 @@ class FlexboxLayout extends Component {
|
||||
<ConnectedStudyBrowser studies={this.state.studiesForBrowser} />
|
||||
</div>
|
||||
<div className={mainContentClassName}>
|
||||
<ViewerMain studies={this.props.studies} />
|
||||
<ConnectedViewerMain studies={this.props.studies} />
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
@ -101,8 +101,8 @@ class FlexboxLayout extends Component {
|
||||
<ConnectedMeasurementTable />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default FlexboxLayout;
|
||||
export default FlexboxLayout
|
||||
|
||||
23
src/connectedComponents/LabellingOverlay.js
Normal file
23
src/connectedComponents/LabellingOverlay.js
Normal file
@ -0,0 +1,23 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import LabellingManager from '../components/Labelling/LabellingManager'
|
||||
|
||||
class LabellingOverlay extends Component {
|
||||
static propTypes = {
|
||||
visible: PropTypes.bool.isRequired,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
visible: false,
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.props.visible) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <LabellingManager {...this.props} />
|
||||
}
|
||||
}
|
||||
|
||||
export default LabellingOverlay
|
||||
34
src/connectedComponents/ToolContextMenu.css
Normal file
34
src/connectedComponents/ToolContextMenu.css
Normal file
@ -0,0 +1,34 @@
|
||||
.ToolContextMenu {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
border: 1px solid white;
|
||||
border-radius: 5px;
|
||||
z-index: 1000;
|
||||
display: block;
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.ToolContextMenu > ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ToolContextMenu > ul > li > button {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
color: #516873;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ToolContextMenu > ul > li > button:hover {
|
||||
color: #16202b;
|
||||
}
|
||||
|
||||
.ToolContextMenu > ul > li > button:active {
|
||||
color: #79f9fe;
|
||||
}
|
||||
244
src/connectedComponents/ToolContextMenu.js
Normal file
244
src/connectedComponents/ToolContextMenu.js
Normal file
@ -0,0 +1,244 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import cornerstone from 'cornerstone-core'
|
||||
import cornerstoneTools from 'cornerstone-tools'
|
||||
import getMeasurementLocationCallback from '../lib/getMeasurementLocationCallback'
|
||||
|
||||
import './ToolContextMenu.css'
|
||||
|
||||
const toolTypes = ['Angle', 'Length']
|
||||
|
||||
let defaultDropdownItems = [
|
||||
{
|
||||
actionType: 'Delete',
|
||||
action: ({ nearbyToolData, eventData }) => {
|
||||
const element = eventData.element
|
||||
|
||||
cornerstoneTools.removeToolState(
|
||||
element,
|
||||
nearbyToolData.toolType,
|
||||
nearbyToolData.tool
|
||||
)
|
||||
cornerstone.updateImage(element)
|
||||
},
|
||||
},
|
||||
{
|
||||
actionType: 'setLabel',
|
||||
action: ({ nearbyToolData, eventData }) => {
|
||||
const { tool } = nearbyToolData
|
||||
|
||||
const options = {
|
||||
skipAddLabelButton: true,
|
||||
editLocation: true,
|
||||
}
|
||||
|
||||
getMeasurementLocationCallback(eventData, tool, options)
|
||||
},
|
||||
},
|
||||
{
|
||||
actionType: 'setDescription',
|
||||
action: ({ nearbyToolData, eventData }) => {
|
||||
const { tool } = nearbyToolData
|
||||
|
||||
const options = {
|
||||
editDescriptionOnDialog: true,
|
||||
}
|
||||
|
||||
getMeasurementLocationCallback(eventData, tool, options)
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
function getNearbyToolData(element, coords, toolTypes) {
|
||||
const nearbyTool = {}
|
||||
let pointNearTool = false
|
||||
|
||||
toolTypes.forEach(toolType => {
|
||||
const toolData = cornerstoneTools.getToolState(element, toolType)
|
||||
if (!toolData) {
|
||||
return
|
||||
}
|
||||
|
||||
toolData.data.forEach(function(data, index) {
|
||||
// TODO: Fix this, it's ugly
|
||||
let toolInterface = cornerstoneTools.getToolForElement(element, toolType)
|
||||
if (!toolInterface) {
|
||||
toolInterface = cornerstoneTools.getToolForElement(
|
||||
element,
|
||||
`${toolType}Tool`
|
||||
)
|
||||
}
|
||||
|
||||
if (!toolInterface) {
|
||||
throw new Error('Tool not found.')
|
||||
}
|
||||
|
||||
if (toolInterface.pointNearTool(element, data, coords)) {
|
||||
pointNearTool = true
|
||||
nearbyTool.tool = data
|
||||
nearbyTool.index = index
|
||||
nearbyTool.toolType = toolType
|
||||
}
|
||||
})
|
||||
|
||||
if (pointNearTool) {
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
return pointNearTool ? nearbyTool : undefined
|
||||
}
|
||||
|
||||
function getDropdownItems(eventData, isTouchEvent = false, availableTools) {
|
||||
const nearbyToolData = getNearbyToolData(
|
||||
eventData.element,
|
||||
eventData.currentPoints.canvas,
|
||||
toolTypes,
|
||||
availableTools
|
||||
)
|
||||
|
||||
// Annotate tools for touch events already have a press handle to edit it, has a better UX for deleting it
|
||||
if (
|
||||
isTouchEvent &&
|
||||
nearbyToolData &&
|
||||
nearbyToolData.toolType === 'arrowAnnotate'
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
let dropdownItems = []
|
||||
if (nearbyToolData) {
|
||||
defaultDropdownItems.forEach(function(item) {
|
||||
item.params = {
|
||||
eventData,
|
||||
nearbyToolData,
|
||||
}
|
||||
|
||||
if (item.actionType === 'Delete') {
|
||||
item.text = 'Delete measurement'
|
||||
}
|
||||
|
||||
if (item.actionType === 'setLabel') {
|
||||
item.text = 'Relabel'
|
||||
}
|
||||
|
||||
if (item.actionType === 'setDescription') {
|
||||
item.text = `${
|
||||
nearbyToolData.tool.description ? 'Edit' : 'Add'
|
||||
} Description`
|
||||
}
|
||||
|
||||
dropdownItems.push(item)
|
||||
})
|
||||
}
|
||||
|
||||
return dropdownItems
|
||||
}
|
||||
|
||||
class ToolContextMenu extends Component {
|
||||
static propTypes = {
|
||||
isTouchEvent: PropTypes.bool.isRequired,
|
||||
eventData: PropTypes.object,
|
||||
onClose: PropTypes.func,
|
||||
availableTools: PropTypes.array,
|
||||
visible: PropTypes.bool.isRequired,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
visible: true,
|
||||
isTouchEvent: false,
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.mainElement = React.createRef()
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.props.eventData) {
|
||||
return null
|
||||
}
|
||||
|
||||
const { isTouchEvent, eventData, availableTools } = this.props
|
||||
const dropdownItems = getDropdownItems(
|
||||
eventData,
|
||||
isTouchEvent,
|
||||
availableTools
|
||||
)
|
||||
|
||||
// Skip if there is no dropdown item
|
||||
if (!dropdownItems.length) {
|
||||
return ''
|
||||
}
|
||||
|
||||
const dropdownComponents = dropdownItems.map(item => {
|
||||
const itemOnClick = event => {
|
||||
item.action(item.params)
|
||||
if (this.props.onClose) {
|
||||
this.props.onClose()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<li key={item.actionType}>
|
||||
<button className="form-action" onClick={itemOnClick}>
|
||||
<span key={item.actionType}>{item.text}</span>
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
|
||||
const position = {
|
||||
top: `${eventData.currentPoints.canvas.y}px`,
|
||||
left: `${eventData.currentPoints.canvas.x}px`,
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ToolContextMenu" style={position} ref={this.mainElement}>
|
||||
<ul className="bounded">{dropdownComponents}</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
if (this.mainElement.current) {
|
||||
this.updateElementPosition()
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate = () => {
|
||||
if (this.mainElement.current) {
|
||||
this.updateElementPosition()
|
||||
}
|
||||
}
|
||||
|
||||
updateElementPosition = () => {
|
||||
const {
|
||||
offsetParent,
|
||||
offsetTop,
|
||||
offsetHeight,
|
||||
offsetWidth,
|
||||
offsetLeft,
|
||||
} = this.mainElement.current
|
||||
|
||||
const { eventData } = this.props
|
||||
|
||||
if (offsetTop + offsetHeight > offsetParent.offsetHeight) {
|
||||
const offBoundPixels =
|
||||
offsetTop + offsetHeight - offsetParent.offsetHeight
|
||||
const top = eventData.currentPoints.canvas.y - offBoundPixels
|
||||
|
||||
this.mainElement.current.style.top = `${top > 0 ? top : 0}px`
|
||||
}
|
||||
|
||||
if (offsetLeft + offsetWidth > offsetParent.offsetWidth) {
|
||||
const offBoundPixels = offsetLeft + offsetWidth - offsetParent.offsetWidth
|
||||
const left = eventData.currentPoints.canvas.x - offBoundPixels
|
||||
|
||||
this.mainElement.current.style.left = `${left > 0 ? left : 0}px`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ToolContextMenu
|
||||
@ -9,6 +9,7 @@ import WhiteLabellingContext from '../WhiteLabellingContext.js';
|
||||
import ConnectedHeader from './ConnectedHeader.js';
|
||||
import ConnectedFlexboxLayout from './ConnectedFlexboxLayout.js';
|
||||
import ConnectedToolbarRow from './ConnectedToolbarRow.js';
|
||||
import ConnectedLabellingOverlay from './ConnectedLabellingOverlay';
|
||||
import './Viewer.css';
|
||||
/**
|
||||
* Inits OHIF Hanging Protocol's onReady.
|
||||
@ -184,6 +185,7 @@ class Viewer extends Component {
|
||||
{/*<ConnectedStudyLoadingMonitor studies={this.props.studies} />*/}
|
||||
{/*<StudyPrefetcher studies={this.props.studies} />*/}
|
||||
<ConnectedFlexboxLayout studies={this.props.studies} />
|
||||
<ConnectedLabellingOverlay />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -6,23 +6,28 @@ import ConnectedLayoutManager from './ConnectedLayoutManager.js';
|
||||
import './ViewerMain.css';
|
||||
|
||||
class ViewerMain extends Component {
|
||||
state = {
|
||||
viewportData: []
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
studies: PropTypes.array.isRequired
|
||||
studies: PropTypes.array.isRequired,
|
||||
setViewportSpecificData: PropTypes.func.isRequired,
|
||||
clearViewportSpecificData: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
OHIF.hotkeysUtil.setup('viewer');
|
||||
|
||||
this.state = {
|
||||
displaySets: []
|
||||
}
|
||||
}
|
||||
|
||||
getDisplaySets(studies) {
|
||||
const displaySets = [];
|
||||
studies.forEach(study => {
|
||||
study.displaySets.forEach(dSet => {
|
||||
if (!dSet.plugin) {
|
||||
dSet.plugin = 'cornerstone';
|
||||
}
|
||||
displaySets.push(dSet);
|
||||
});
|
||||
});
|
||||
@ -52,29 +57,37 @@ class ViewerMain extends Component {
|
||||
const displaySets = this.getDisplaySets(this.props.studies);
|
||||
|
||||
this.setState({
|
||||
viewportData: displaySets
|
||||
displaySets
|
||||
});
|
||||
}
|
||||
|
||||
getViewportData = () => {
|
||||
const viewportData = [];
|
||||
const { layout, viewportSpecificData } = this.props;
|
||||
|
||||
for (let viewportIndex = 0; viewportIndex < layout.viewports.length; viewportIndex++) {
|
||||
let displaySet = viewportSpecificData[viewportIndex];
|
||||
|
||||
// If the viewport is empty, get one available in study
|
||||
if (!displaySet || !displaySet.displaySetInstanceUid) {
|
||||
const { displaySets } = this.state;
|
||||
displaySet = displaySets.find(ds => !viewportData.some(v => v.displaySetInstanceUid === ds.displaySetInstanceUid));
|
||||
}
|
||||
|
||||
viewportData.push(displaySet);
|
||||
}
|
||||
|
||||
return viewportData;
|
||||
};
|
||||
|
||||
setViewportData = ({ viewportIndex, item }) => {
|
||||
// TODO: Replace this with mapDispatchToProps call
|
||||
// if we decide to put viewport info into redux
|
||||
|
||||
// Note: Use Slice because React does a shallow equality check. Mutating the array
|
||||
// would not trigger a re-render. We have to create a copy.
|
||||
const updatedViewportData = this.state.viewportData.slice(0);
|
||||
|
||||
const displaySet = this.findDisplaySet(
|
||||
this.props.studies,
|
||||
item.studyInstanceUid,
|
||||
item.displaySetInstanceUid
|
||||
);
|
||||
|
||||
updatedViewportData[viewportIndex] = Object.assign({}, displaySet);
|
||||
|
||||
this.setState({
|
||||
viewportData: updatedViewportData
|
||||
});
|
||||
this.props.setViewportSpecificData(viewportIndex, displaySet);
|
||||
};
|
||||
|
||||
render() {
|
||||
@ -82,7 +95,7 @@ class ViewerMain extends Component {
|
||||
<div className="ViewerMain">
|
||||
<ConnectedLayoutManager
|
||||
studies={this.props.studies}
|
||||
viewportData={this.state.viewportData}
|
||||
viewportData={this.getViewportData()}
|
||||
setViewportData={this.setViewportData}
|
||||
/>
|
||||
</div>
|
||||
@ -90,6 +103,12 @@ class ViewerMain extends Component {
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
// Clear the entire viewport specific data
|
||||
const { viewportSpecificData } = this.props;
|
||||
Object.keys(viewportSpecificData).forEach((viewportIndex) => {
|
||||
this.props.clearViewportSpecificData(viewportIndex);
|
||||
});
|
||||
|
||||
// Remove beforeUnload event handler...
|
||||
//window.removeEventListener('beforeunload', unloadHandlers.beforeUnload);
|
||||
// Destroy the synchronizer used to update reference lines
|
||||
|
||||
21
src/lib/getMeasurementLocationCallback.js
Normal file
21
src/lib/getMeasurementLocationCallback.js
Normal file
@ -0,0 +1,21 @@
|
||||
import cornerstoneTools from 'cornerstone-tools'
|
||||
import updateTableWithNewMeasurementData from './updateTableWithNewMeasurementData'
|
||||
|
||||
export default function getMeasurementLocationCallback(
|
||||
eventData,
|
||||
tool,
|
||||
options
|
||||
) {
|
||||
const { toolType } = tool
|
||||
const { element } = eventData
|
||||
const doneCallback = updateTableWithNewMeasurementData
|
||||
|
||||
const ToolInstance = cornerstoneTools.getToolForElement(element, toolType)
|
||||
|
||||
ToolInstance.configuration.getMeasurementLocationCallback(
|
||||
tool,
|
||||
eventData,
|
||||
doneCallback,
|
||||
options
|
||||
)
|
||||
}
|
||||
110
src/lib/jumpToRowItem.js
Normal file
110
src/lib/jumpToRowItem.js
Normal file
@ -0,0 +1,110 @@
|
||||
import { OHIF } from 'ohif-core'
|
||||
|
||||
// TODO: Move this function to OHIF itself so we can use it on the OHIF measurment table (when it is finished)
|
||||
|
||||
/**
|
||||
* Activates a set of measurements
|
||||
*
|
||||
* @param measurementData
|
||||
* @param viewportsState
|
||||
* @param timepointManagerState
|
||||
* @param options
|
||||
*/
|
||||
export default function jumpToRowItem(
|
||||
measurementData,
|
||||
viewportsState,
|
||||
timepointManagerState,
|
||||
options = { invertViewportTimepointsOrder: false, childToolKey: null }
|
||||
) {
|
||||
const numViewports = viewportsState.layout.viewports.length
|
||||
const numTimepoints = timepointManagerState.timepoints.length
|
||||
const { measurements, timepoints } = timepointManagerState
|
||||
const numViewportsToUpdate = Math.min(numTimepoints, numViewports)
|
||||
const { toolType, measurementNumber } = measurementData
|
||||
|
||||
if (options.invertViewportTimepointsOrder) {
|
||||
timepoints.reverse()
|
||||
}
|
||||
|
||||
const measurementsForToolGroup = measurements[toolType]
|
||||
|
||||
// Retrieve the measurements data
|
||||
const measurementsToJumpTo = []
|
||||
for (let i = 0; i < numViewportsToUpdate; i++) {
|
||||
const { timepointId } = timepoints[i]
|
||||
|
||||
const dataAtThisTimepoint = measurementsForToolGroup.find(entry => {
|
||||
return (
|
||||
entry.timepointId === timepointId &&
|
||||
entry.measurementNumber === measurementNumber
|
||||
)
|
||||
})
|
||||
|
||||
if (!dataAtThisTimepoint) {
|
||||
measurementsToJumpTo.push(null)
|
||||
continue
|
||||
}
|
||||
|
||||
let measurement = dataAtThisTimepoint
|
||||
|
||||
const { tool } = OHIF.measurements.MeasurementApi.getToolConfiguration(
|
||||
toolType
|
||||
)
|
||||
if (options.childToolKey) {
|
||||
measurement = dataAtThisTimepoint[options.childToolKey]
|
||||
} else if (Array.isArray(tool.childTools)) {
|
||||
const key = tool.childTools.find(key => !!dataAtThisTimepoint[key])
|
||||
measurement = dataAtThisTimepoint[key]
|
||||
}
|
||||
|
||||
measurementsToJumpTo.push(measurement)
|
||||
}
|
||||
|
||||
// TODO: Add a single viewports state action which allows
|
||||
// - viewportData to be set
|
||||
// - layout to be set
|
||||
// - activeViewport to be set
|
||||
|
||||
// Needs to update viewports.viewportData state to set image set data
|
||||
|
||||
const displaySetContainsSopInstance = (displaySet, sopInstanceUid) =>
|
||||
displaySet.images.find(
|
||||
image => image.getSOPInstanceUID() === sopInstanceUid
|
||||
)
|
||||
|
||||
const viewportSpecificData = []
|
||||
measurementsToJumpTo.forEach((data, viewportIndex) => {
|
||||
// Skip if there is no measurement to jump
|
||||
if (!data) {
|
||||
return
|
||||
}
|
||||
|
||||
const study = OHIF.utils.studyMetadataManager.get(data.studyInstanceUid)
|
||||
if (!study) {
|
||||
throw new Error('Study not found.')
|
||||
}
|
||||
|
||||
const displaySet = study.findDisplaySet(displaySet => {
|
||||
return displaySetContainsSopInstance(displaySet, data.sopInstanceUid)
|
||||
})
|
||||
|
||||
if (!displaySet) {
|
||||
throw new Error('Display set not found.')
|
||||
}
|
||||
|
||||
displaySet.sopInstanceUid = data.sopInstanceUid
|
||||
if (data.frameIndex) {
|
||||
displaySet.frameIndex = data.frameIndex
|
||||
}
|
||||
|
||||
viewportSpecificData.push({
|
||||
viewportIndex,
|
||||
displaySet,
|
||||
})
|
||||
})
|
||||
|
||||
return {
|
||||
viewportSpecificData,
|
||||
layout: [], // TODO: if we need to change layout, we should return this here
|
||||
}
|
||||
}
|
||||
29
src/lib/updateTableWithNewMeasurementData.js
Normal file
29
src/lib/updateTableWithNewMeasurementData.js
Normal file
@ -0,0 +1,29 @@
|
||||
import OHIF from 'ohif-core'
|
||||
import cornerstone from 'cornerstone-core'
|
||||
|
||||
export default function updateTableWithNewMeasurementData({
|
||||
toolType,
|
||||
measurementNumber,
|
||||
location,
|
||||
description,
|
||||
}) {
|
||||
// Update all measurements by measurement number
|
||||
const measurementApi = OHIF.measurements.MeasurementApi.Instance
|
||||
const measurements = measurementApi.tools[toolType].filter(
|
||||
m => m.measurementNumber === measurementNumber
|
||||
)
|
||||
|
||||
measurements.forEach(measurement => {
|
||||
measurement.location = location
|
||||
measurement.description = description
|
||||
|
||||
measurementApi.updateMeasurement(measurement.toolType, measurement)
|
||||
})
|
||||
|
||||
measurementApi.syncMeasurementsAndToolData()
|
||||
|
||||
// Update images in all active viewports
|
||||
cornerstone.getEnabledElements().forEach(enabledElement => {
|
||||
cornerstone.updateImage(enabledElement.element)
|
||||
})
|
||||
}
|
||||
46
src/lib/utils/bounding.js
Normal file
46
src/lib/utils/bounding.js
Normal file
@ -0,0 +1,46 @@
|
||||
export default function bounding(elementRef, currentPosition = {}) {
|
||||
if (!elementRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const currentElement = elementRef.current
|
||||
const {
|
||||
offsetParent,
|
||||
offsetTop,
|
||||
offsetHeight,
|
||||
offsetLeft,
|
||||
offsetWidth,
|
||||
} = currentElement
|
||||
let top = currentPosition.top || offsetTop
|
||||
let left = currentPosition.left || offsetLeft
|
||||
|
||||
if (!offsetParent) {
|
||||
return
|
||||
}
|
||||
|
||||
let maxHeight = `${offsetParent.offsetHeight}px`
|
||||
|
||||
if (offsetHeight + top > offsetParent.offsetHeight) {
|
||||
top = top - (offsetHeight + top - offsetParent.offsetHeight)
|
||||
if (top < 0) {
|
||||
top = 0
|
||||
}
|
||||
}
|
||||
|
||||
if (left + offsetWidth > offsetParent.offsetWidth) {
|
||||
left = offsetParent.offsetWidth - offsetWidth
|
||||
if (left < 0) {
|
||||
left = 0
|
||||
}
|
||||
}
|
||||
|
||||
if (maxHeight && currentElement.style.maxHeight !== maxHeight) {
|
||||
currentElement.style.maxHeight = maxHeight
|
||||
}
|
||||
if (currentElement.style.top !== `${top}px`) {
|
||||
currentElement.style.top = `${top}px`
|
||||
}
|
||||
if (currentElement.style.left !== `${left}px`) {
|
||||
currentElement.style.left = `${left}px`
|
||||
}
|
||||
}
|
||||
@ -1,22 +1,42 @@
|
||||
const defaultState = {
|
||||
leftSidebarOpen: true,
|
||||
rightSidebarOpen: false,
|
||||
userPreferencesModalOpen: false
|
||||
};
|
||||
userPreferencesModalOpen: false,
|
||||
labelling: {},
|
||||
contextMenu: {},
|
||||
}
|
||||
|
||||
const ui = (state = defaultState, action) => {
|
||||
switch (action.type) {
|
||||
case 'SET_LEFT_SIDEBAR_OPEN':
|
||||
return Object.assign({}, state, { leftSidebarOpen: action.state });
|
||||
return Object.assign({}, state, { leftSidebarOpen: action.state })
|
||||
case 'SET_RIGHT_SIDEBAR_OPEN':
|
||||
return Object.assign({}, state, { rightSidebarOpen: action.state });
|
||||
return Object.assign({}, state, { rightSidebarOpen: action.state })
|
||||
case 'SET_USER_PREFERENCES_MODAL_OPEN':
|
||||
return Object.assign({}, state, {
|
||||
userPreferencesModalOpen: action.state
|
||||
});
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
userPreferencesModalOpen: action.state,
|
||||
})
|
||||
case 'SET_LABELLING_FLOW_DATA':
|
||||
const labelling = Object.assign({}, action.labellingFlowData)
|
||||
|
||||
export default ui;
|
||||
return Object.assign({}, state, { labelling })
|
||||
case 'SET_TOOL_CONTEXT_MENU_DATA':
|
||||
const contextMenu = Object.assign({}, state.contextMenu)
|
||||
|
||||
contextMenu[action.viewportIndex] = Object.assign(
|
||||
{},
|
||||
action.toolContextMenuData
|
||||
)
|
||||
|
||||
return Object.assign({}, state, { contextMenu })
|
||||
case 'RESET_LABELLING_AND_CONTEXT_MENU':
|
||||
return Object.assign({}, state, {
|
||||
labelling: defaultState.labelling,
|
||||
contextMenu: defaultState.contextMenu,
|
||||
})
|
||||
default:
|
||||
return state
|
||||
}
|
||||
}
|
||||
|
||||
export default ui
|
||||
|
||||
89
src/setupButtons.js
Normal file
89
src/setupButtons.js
Normal file
@ -0,0 +1,89 @@
|
||||
import OHIF from 'ohif-core'
|
||||
|
||||
const Icons = 'icons.svg'
|
||||
|
||||
export default function setupButtons(store) {
|
||||
const defaultButtons = [
|
||||
{
|
||||
command: 'StackScroll',
|
||||
type: 'tool',
|
||||
text: 'Stack Scroll',
|
||||
svgUrl: `${Icons}#icon-tools-stack-scroll`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
command: 'Zoom',
|
||||
type: 'tool',
|
||||
text: 'Zoom',
|
||||
svgUrl: `${Icons}#icon-tools-zoom`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
command: 'Wwwc',
|
||||
type: 'tool',
|
||||
text: 'Levels',
|
||||
svgUrl: `${Icons}#icon-tools-levels`,
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
command: 'Pan',
|
||||
type: 'tool',
|
||||
text: 'Pan',
|
||||
svgUrl: `${Icons}#icon-tools-pan`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
command: 'Length',
|
||||
type: 'tool',
|
||||
text: 'Length',
|
||||
svgUrl: `${Icons}#icon-tools-measure-temp`,
|
||||
active: false,
|
||||
},
|
||||
/*{
|
||||
command: 'Annotate',
|
||||
type: 'tool',
|
||||
text: 'Annotate',
|
||||
svgUrl: `${Icons}#icon-tools-measure-non-target`,
|
||||
active: false
|
||||
},*/
|
||||
{
|
||||
command: 'Angle',
|
||||
type: 'tool',
|
||||
text: 'Angle',
|
||||
iconClasses: 'fa fa-angle-left',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
command: 'Bidirectional',
|
||||
type: 'tool',
|
||||
text: 'Bidirectional',
|
||||
svgUrl: `${Icons}#icon-tools-measure-target`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
command: 'Brush',
|
||||
type: 'tool',
|
||||
text: 'Brush',
|
||||
iconClasses: 'fa fa-circle',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
command: 'FreehandMouse',
|
||||
type: 'tool',
|
||||
text: 'Freehand',
|
||||
iconClasses: 'fa fa-star',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
command: 'reset',
|
||||
type: 'command',
|
||||
text: 'Reset',
|
||||
svgUrl: `${Icons}#icon-tools-reset`,
|
||||
active: false,
|
||||
},
|
||||
]
|
||||
|
||||
const buttonsAction = OHIF.redux.actions.setAvailableButtons(defaultButtons)
|
||||
|
||||
store.dispatch(buttonsAction)
|
||||
}
|
||||
190
src/setupTools.js
Normal file
190
src/setupTools.js
Normal file
@ -0,0 +1,190 @@
|
||||
import OHIF from 'ohif-core'
|
||||
import updateTableWithNewMeasurementData from './lib/updateTableWithNewMeasurementData'
|
||||
|
||||
function getToolLabellingFlowCallback(store) {
|
||||
const setLabellingFlowDataAction = labellingFlowData => ({
|
||||
type: 'SET_LABELLING_FLOW_DATA',
|
||||
labellingFlowData,
|
||||
})
|
||||
|
||||
const setLabellingFlowData = labellingFlowData => {
|
||||
store.dispatch(setLabellingFlowDataAction(labellingFlowData))
|
||||
}
|
||||
|
||||
return function toolLabellingFlowCallback(
|
||||
measurementData,
|
||||
eventData,
|
||||
doneCallback,
|
||||
options = {}
|
||||
) {
|
||||
const updateLabelling = ({ location, response, description }) => {
|
||||
// Update the measurement data with the labelling parameters
|
||||
|
||||
if (location) {
|
||||
measurementData.location = location
|
||||
}
|
||||
if (description) {
|
||||
measurementData.description = description
|
||||
}
|
||||
if (response) {
|
||||
measurementData.response = response
|
||||
}
|
||||
|
||||
updateTableWithNewMeasurementData(measurementData)
|
||||
}
|
||||
|
||||
const labellingDoneCallback = () => {
|
||||
setLabellingFlowData({ visible: false })
|
||||
}
|
||||
|
||||
const labellingFlowData = {
|
||||
visible: true,
|
||||
eventData,
|
||||
measurementData,
|
||||
skipAddLabelButton: options.skipAddLabelButton,
|
||||
editLocation: options.editLocation,
|
||||
editDescription: options.editDescription,
|
||||
editResponse: options.editResponse,
|
||||
editDescriptionOnDialog: options.editDescriptionOnDialog,
|
||||
labellingDoneCallback,
|
||||
updateLabelling,
|
||||
}
|
||||
|
||||
setLabellingFlowData(labellingFlowData)
|
||||
}
|
||||
}
|
||||
|
||||
const resetLabellingAndContextMenuAction = state => ({
|
||||
type: 'RESET_LABELLING_AND_CONTEXT_MENU',
|
||||
state,
|
||||
})
|
||||
|
||||
const setToolContextMenuDataAction = (viewportIndex, toolContextMenuData) => ({
|
||||
type: 'SET_TOOL_CONTEXT_MENU_DATA',
|
||||
viewportIndex,
|
||||
toolContextMenuData,
|
||||
})
|
||||
|
||||
function getOnRightClickCallback(store) {
|
||||
const setToolContextMenuData = (viewportIndex, toolContextMenuData) => {
|
||||
store.dispatch(resetLabellingAndContextMenuAction())
|
||||
store.dispatch(
|
||||
setToolContextMenuDataAction(viewportIndex, toolContextMenuData)
|
||||
)
|
||||
}
|
||||
|
||||
const getOnCloseCallback = viewportIndex => {
|
||||
return function onClose() {
|
||||
const toolContextMenuData = {
|
||||
visible: false,
|
||||
}
|
||||
|
||||
store.dispatch(
|
||||
setToolContextMenuDataAction(viewportIndex, toolContextMenuData)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return function onRightClick(event) {
|
||||
const eventData = event.detail
|
||||
const viewportIndex = parseInt(eventData.element.dataset.viewportIndex, 10)
|
||||
|
||||
const toolContextMenuData = {
|
||||
eventData,
|
||||
isTouchEvent: false,
|
||||
onClose: getOnCloseCallback(viewportIndex),
|
||||
}
|
||||
|
||||
setToolContextMenuData(viewportIndex, toolContextMenuData)
|
||||
}
|
||||
}
|
||||
|
||||
function getOnTouchPressCallback(store) {
|
||||
const setToolContextMenuData = (viewportIndex, toolContextMenuData) => {
|
||||
store.dispatch(resetLabellingAndContextMenuAction())
|
||||
store.dispatch(
|
||||
setToolContextMenuDataAction(viewportIndex, toolContextMenuData)
|
||||
)
|
||||
}
|
||||
|
||||
const getOnCloseCallback = viewportIndex => {
|
||||
return function onClose() {
|
||||
const toolContextMenuData = {
|
||||
visible: false,
|
||||
}
|
||||
|
||||
store.dispatch(
|
||||
setToolContextMenuDataAction(viewportIndex, toolContextMenuData)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return function onTouchPress(event) {
|
||||
const eventData = event.detail
|
||||
const viewportIndex = parseInt(eventData.element.dataset.viewportIndex, 10)
|
||||
|
||||
const toolContextMenuData = {
|
||||
eventData,
|
||||
isTouchEvent: true,
|
||||
onClose: getOnCloseCallback(viewportIndex),
|
||||
}
|
||||
|
||||
setToolContextMenuData(viewportIndex, toolContextMenuData)
|
||||
}
|
||||
}
|
||||
|
||||
function getResetLabellingAndContextMenu(store) {
|
||||
return function resetLabellingAndContextMenu() {
|
||||
store.dispatch(resetLabellingAndContextMenuAction())
|
||||
}
|
||||
}
|
||||
|
||||
export default function setupTools(store) {
|
||||
const toolLabellingFlowCallback = getToolLabellingFlowCallback(store)
|
||||
const availableTools = [
|
||||
{ name: 'Pan', mouseButtonMasks: [1, 4] },
|
||||
{ name: 'Zoom', mouseButtonMasks: [1, 2] },
|
||||
{ name: 'Wwwc', mouseButtonMasks: [1] },
|
||||
{
|
||||
name: 'Length',
|
||||
configuration: {
|
||||
configuration: {
|
||||
getMeasurementLocationCallback: toolLabellingFlowCallback,
|
||||
},
|
||||
},
|
||||
mouseButtonMasks: [1],
|
||||
},
|
||||
{
|
||||
name: 'Angle',
|
||||
configuration: {
|
||||
configuration: {
|
||||
getMeasurementLocationCallback: toolLabellingFlowCallback,
|
||||
},
|
||||
},
|
||||
mouseButtonMasks: [1],
|
||||
},
|
||||
{ name: 'StackScroll', mouseButtonMasks: [1] },
|
||||
{ name: 'Brush', mouseButtonMasks: [1] },
|
||||
{ name: 'FreehandMouse', mouseButtonMasks: [1] },
|
||||
{ name: 'PanMultiTouch' },
|
||||
{ name: 'ZoomTouchPinch' },
|
||||
{ name: 'StackScrollMouseWheel' },
|
||||
{ name: 'StackScrollMultiTouch' },
|
||||
]
|
||||
|
||||
const onRightClick = getOnRightClickCallback(store)
|
||||
const onTouchPress = getOnTouchPressCallback(store)
|
||||
const onNewImage = getResetLabellingAndContextMenu(store)
|
||||
const onMouseClick = getResetLabellingAndContextMenu(store)
|
||||
const onTouchStart = getResetLabellingAndContextMenu(store)
|
||||
const toolAction = OHIF.redux.actions.setExtensionData('cornerstone', {
|
||||
availableTools,
|
||||
onNewImage,
|
||||
onRightClick,
|
||||
onTouchPress,
|
||||
onTouchStart,
|
||||
onMouseClick,
|
||||
})
|
||||
|
||||
store.dispatch(toolAction)
|
||||
}
|
||||
@ -60,13 +60,6 @@ export default function(baseDirectory = '/') {
|
||||
iconClasses: 'fa fa-angle-left',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
command: 'Bidirectional',
|
||||
type: 'tool',
|
||||
text: 'Bidirectional',
|
||||
svgUrl: `${relativePathToIcons}#icon-tools-measure-target`,
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
command: 'Brush',
|
||||
type: 'tool',
|
||||
|
||||
@ -9603,10 +9603,10 @@ octokit-pagination-methods@^1.1.0:
|
||||
resolved "https://registry.yarnpkg.com/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz#cf472edc9d551055f9ef73f6e42b4dbb4c80bea4"
|
||||
integrity sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ==
|
||||
|
||||
ohif-core@0.4.1:
|
||||
version "0.4.1"
|
||||
resolved "https://registry.yarnpkg.com/ohif-core/-/ohif-core-0.4.1.tgz#3a2b0b92b22f8da80b04fe487dc1faf6c0c2ed6c"
|
||||
integrity sha512-QJRnx3NDf45a655JZQMCNj9tLtyh5YaH7X/tGPsA0Y2zPWEKxWKAQQDUE+TCZNsec135mB+xxYw++a/GkqLX0A==
|
||||
ohif-core@0.4.2:
|
||||
version "0.4.2"
|
||||
resolved "https://registry.yarnpkg.com/ohif-core/-/ohif-core-0.4.2.tgz#1ed2db0cddbd9ac15d5c97b9c789793d791be258"
|
||||
integrity sha512-Wddeta9hKZDe1yyPp2QgtxhL0nM3vSudq52gRXcIVmtl0xCHzRrWqPqCTX10R3BU8OUXsHEF66RQ2gSVJmjH7g==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.2.0"
|
||||
ajv "^6.10.0"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user