diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index a8c8e33c7..51c3ad744 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -1,10 +1,10 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import { Link, withRouter } from 'react-router-dom' -import { Dropdown } from 'react-viewerbase' -import './Header.css' -import OHIFLogo from '../OHIFLogo/OHIFLogo.js' -import ConnectedUserPreferencesModal from '../../connectedComponents/ConnectedUserPreferencesModal.js' +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { Link, withRouter } from 'react-router-dom'; +import { Dropdown } from 'react-viewerbase'; +import './Header.css'; +import OHIFLogo from '../OHIFLogo/OHIFLogo.js'; +import ConnectedUserPreferencesModal from '../../connectedComponents/ConnectedUserPreferencesModal.js'; class Header extends Component { static propTypes = { @@ -12,19 +12,19 @@ class Header extends Component { location: PropTypes.object.isRequired, openUserPreferencesModal: PropTypes.func, children: PropTypes.node, - } + }; static defaultProps = { home: true, children: OHIFLogo(), - } + }; constructor(props) { - super(props) + super(props); this.state = { userPreferencesOpen: false, - } + }; this.options = [ { @@ -41,7 +41,7 @@ class Header extends Component { }, link: 'http://ohif.org', }, - ] + ]; } render() { @@ -78,8 +78,8 @@ class Header extends Component { - ) + ); } } -export default withRouter(Header) +export default withRouter(Header); diff --git a/src/components/Labelling/LabellingFlow.js b/src/components/Labelling/LabellingFlow.js index 434778e7a..c0e15d412 100644 --- a/src/components/Labelling/LabellingFlow.js +++ b/src/components/Labelling/LabellingFlow.js @@ -1,14 +1,14 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; -import cloneDeep from 'lodash.clonedeep' -import bounding from '../../lib/utils/bounding.js' +import cloneDeep from 'lodash.clonedeep'; +import bounding from '../../lib/utils/bounding.js'; -import LabellingTransition from './LabellingTransition.js' -import { SelectTree, Icon } from 'react-viewerbase' -import { getAddLabelButtonStyle } from './labellingPositionUtils.js' +import LabellingTransition from './LabellingTransition.js'; +import { SelectTree, Icon } from 'react-viewerbase'; +import { getAddLabelButtonStyle } from './labellingPositionUtils.js'; -import OHIFLabellingData from './OHIFLabellingData.js' +import OHIFLabellingData from './OHIFLabellingData.js'; export default class LabellingFlow extends Component { static propTypes = { @@ -21,16 +21,16 @@ export default class LabellingFlow extends Component { skipAddLabelButton: PropTypes.bool, editLocation: PropTypes.bool, editDescription: PropTypes.bool, - } + }; constructor(props) { - super(props) + super(props); - const { location, locationLabel, description } = props.measurementData + const { location, locationLabel, description } = props.measurementData; - let style = props.componentStyle + let style = props.componentStyle; if (!props.skipAddLabelButton) { - style = getAddLabelButtonStyle(props.measurementData, props.eventData) + style = getAddLabelButtonStyle(props.measurementData, props.eventData); } this.state = { @@ -43,28 +43,28 @@ export default class LabellingFlow extends Component { componentStyle: style, confirmationState: false, displayComponent: true, - } + }; - this.mainElement = React.createRef() - this.descriptionInput = React.createRef() + this.mainElement = React.createRef(); + this.descriptionInput = React.createRef(); - this.initialItems = OHIFLabellingData - this.currentItems = cloneDeep(this.initialItems) + this.initialItems = OHIFLabellingData; + this.currentItems = cloneDeep(this.initialItems); } componentDidUpdate = () => { - this.repositionComponent() - } + this.repositionComponent(); + }; render() { - let mainElementClassName = 'labellingComponent' + let mainElementClassName = 'labellingComponent'; if (this.state.editDescription) { - mainElementClassName += ' editDescription' + mainElementClassName += ' editDescription'; } - const style = Object.assign({}, this.state.componentStyle) + const style = Object.assign({}, this.state.componentStyle); if (this.state.skipAddLabelButton) { - style.left -= 160 + style.left -= 160; } return ( @@ -82,7 +82,7 @@ export default class LabellingFlow extends Component { {this.labellingStateFragment()} - ) + ); } labellingStateFragment = () => { @@ -91,7 +91,7 @@ export default class LabellingFlow extends Component { editLocation, description, locationLabel, - } = this.state + } = this.state; if (!skipAddLabelButton) { return ( @@ -104,7 +104,7 @@ export default class LabellingFlow extends Component { {this.state.location ? 'Edit' : 'Add'} Label - ) + ); } else { if (editLocation) { return ( @@ -115,7 +115,7 @@ export default class LabellingFlow extends Component { selectTreeFirstTitle="Assign Label" onComponentChange={this.repositionComponent} /> - ) + ); } else { return ( <> @@ -170,53 +170,53 @@ export default class LabellingFlow extends Component { - ) + ); } } - } + }; relabel = () => { this.setState({ editLocation: true, - }) - } + }); + }; setDescriptionUpdateMode = () => { - this.descriptionInput.current.focus() + this.descriptionInput.current.focus(); this.setState({ editDescription: true, - }) - } + }); + }; descriptionCancel = () => { - const { description = '' } = cloneDeep(this.state) - this.descriptionInput.current.value = description + 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 }) + 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 location = itemSelected.value; + this.props.updateLabelling({ location }); - const viewportTopPosition = this.mainElement.current.offsetParent.offsetTop + const viewportTopPosition = this.mainElement.current.offsetParent.offsetTop; const componentStyle = { top: event.nativeEvent.y - viewportTopPosition - 25, left: this.state.componentStyle.left, - } + }; this.setState({ editLocation: false, @@ -224,51 +224,51 @@ export default class LabellingFlow extends Component { location: itemSelected.value, locationLabel: itemSelected.label, componentStyle, - }) + }); if (this.isTouchScreen) { this.setTimeout = setTimeout(() => { this.setState({ displayComponent: false, - }) - }, 2000) + }); + }, 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) - } + }); + }, 1000); + }; fadeOutAndLeaveFast = () => { this.setState({ displayComponent: false, - }) - } + }); + }; clearFadeOutTimer = () => { if (!this.fadeOutTimer) { - return + return; } - clearTimeout(this.fadeOutTimer) - } + clearTimeout(this.fadeOutTimer); + }; repositionComponent = () => { // SetTimeout for the css animation to end. setTimeout(() => { - bounding(this.mainElement) - }, 200) - } + bounding(this.mainElement); + }, 200); + }; } diff --git a/src/components/OHIFLogo/OHIFLogo.js b/src/components/OHIFLogo/OHIFLogo.js index fd55be090..1f5d69471 100644 --- a/src/components/OHIFLogo/OHIFLogo.js +++ b/src/components/OHIFLogo/OHIFLogo.js @@ -1,7 +1,7 @@ -import './OHIFLogo.css' +import './OHIFLogo.css'; -import { Icon } from 'react-viewerbase' -import React from 'react' +import { Icon } from 'react-viewerbase'; +import React from 'react'; function OHIFLogo() { return ( @@ -14,7 +14,7 @@ function OHIFLogo() {
Open Health Imaging Foundation
- ) + ); } -export default OHIFLogo +export default OHIFLogo; diff --git a/src/connectedComponents/ConnectedPluginSwitch.js b/src/connectedComponents/ConnectedPluginSwitch.js index 54156e95c..4281064c1 100644 --- a/src/connectedComponents/ConnectedPluginSwitch.js +++ b/src/connectedComponents/ConnectedPluginSwitch.js @@ -1,38 +1,38 @@ -import { connect } from 'react-redux' -import PluginSwitch from './PluginSwitch.js' -import OHIF from 'ohif-core' +import { connect } from 'react-redux'; +import PluginSwitch from './PluginSwitch.js'; +import OHIF from 'ohif-core'; -const { setLayout } = OHIF.redux.actions +const { setLayout } = OHIF.redux.actions; const mapStateToProps = state => { - const { activeViewportIndex, layout } = state.viewports + const { activeViewportIndex, layout } = state.viewports; return { activeViewportIndex, layout, - } -} + }; +}; const mapDispatchToProps = dispatch => { return { setLayout: data => { - dispatch(setLayout(data)) + dispatch(setLayout(data)); }, - } -} + }; +}; function setSingleLayoutData(originalArray, viewportIndex, data) { - const viewports = originalArray.slice() - const layoutData = Object.assign({}, viewports[viewportIndex], data) + const viewports = originalArray.slice(); + const layoutData = Object.assign({}, viewports[viewportIndex], data); - viewports[viewportIndex] = layoutData + viewports[viewportIndex] = layoutData; - return viewports + return viewports; } const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { - const { activeViewportIndex, layout } = propsFromState - const { setLayout } = propsFromDispatch + const { activeViewportIndex, layout } = propsFromState; + const { setLayout } = propsFromDispatch; // TODO: Do not display certain options if the current display set // cannot be displayed using these view types @@ -43,15 +43,15 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { icon: 'bars', active: false, onClick: () => { - console.warn('Original Acquisition') + console.warn('Original Acquisition'); const layoutData = setSingleLayoutData( layout.viewports, activeViewportIndex, { plugin: 'cornerstone' } - ) + ); - setLayout({ viewports: layoutData }) + setLayout({ viewports: layoutData }); }, }, { @@ -59,22 +59,22 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { icon: 'cube', active: false, onClick: () => { - console.warn('Axial') + console.warn('Axial'); const data = { plugin: 'vtk', vtk: { mode: 'mpr', sliceNormal: [0, 0, 1], }, - } + }; const layoutData = setSingleLayoutData( layout.viewports, activeViewportIndex, data - ) + ); - setLayout({ viewports: layoutData }) + setLayout({ viewports: layoutData }); }, }, { @@ -82,22 +82,22 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { icon: 'cube', active: false, onClick: () => { - console.warn('Sagittal') + console.warn('Sagittal'); const data = { plugin: 'vtk', vtk: { mode: 'mpr', sliceNormal: [1, 0, 0], }, - } + }; const layoutData = setSingleLayoutData( layout.viewports, activeViewportIndex, data - ) + ); - setLayout({ viewports: layoutData }) + setLayout({ viewports: layoutData }); }, }, { @@ -105,22 +105,22 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { icon: 'cube', active: false, onClick: () => { - console.warn('Coronal') + console.warn('Coronal'); const data = { plugin: 'vtk', vtk: { mode: 'mpr', sliceNormal: [0, 1, 0], }, - } + }; const layoutData = setSingleLayoutData( layout.viewports, activeViewportIndex, data - ) + ); - setLayout({ viewports: layoutData }) + setLayout({ viewports: layoutData }); }, }, /*{ @@ -140,17 +140,17 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { setLayout({ viewports: layoutData }); } }*/ - ] + ]; return { buttons, - } -} + }; +}; const ConnectedPluginSwitch = connect( mapStateToProps, mapDispatchToProps, mergeProps -)(PluginSwitch) +)(PluginSwitch); -export default ConnectedPluginSwitch +export default ConnectedPluginSwitch; diff --git a/src/connectedComponents/ToolbarRow.js b/src/connectedComponents/ToolbarRow.js index a80a8af67..deda8d4c4 100644 --- a/src/connectedComponents/ToolbarRow.js +++ b/src/connectedComponents/ToolbarRow.js @@ -1,12 +1,12 @@ -import './ToolbarRow.css' +import './ToolbarRow.css'; -import React, { Component } from 'react' +import React, { Component } from 'react'; -import ConnectedLayoutButton from './ConnectedLayoutButton' -import ConnectedPluginSwitch from './ConnectedPluginSwitch.js' -import OHIF from 'ohif-core' -import PropTypes from 'prop-types' -import { RoundedButtonGroup } from 'react-viewerbase' +import ConnectedLayoutButton from './ConnectedLayoutButton'; +import ConnectedPluginSwitch from './ConnectedPluginSwitch.js'; +import OHIF from 'ohif-core'; +import PropTypes from 'prop-types'; +import { RoundedButtonGroup } from 'react-viewerbase'; class ToolbarRow extends Component { static propTypes = { @@ -15,20 +15,20 @@ class ToolbarRow extends Component { setLeftSidebarOpen: PropTypes.func, setRightSidebarOpen: PropTypes.func, pluginId: PropTypes.string, - } + }; static defaultProps = { leftSidebarOpen: false, rightSidebarOpen: false, - } + }; onLeftSidebarValueChanged = value => { - this.props.setLeftSidebarOpen(!!value) - } + this.props.setLeftSidebarOpen(!!value); + }; onRightSidebarValueChanged = value => { - this.props.setRightSidebarOpen(!!value) - } + this.props.setRightSidebarOpen(!!value); + }; render() { const leftSidebarToggle = [ @@ -37,7 +37,7 @@ class ToolbarRow extends Component { icon: 'th-large', bottomLabel: 'Series', }, - ] + ]; const rightSidebarToggle = [ { @@ -45,28 +45,30 @@ class ToolbarRow extends Component { icon: 'list', bottomLabel: 'Measurements', }, - ] + ]; const leftSidebarValue = this.props.leftSidebarOpen ? leftSidebarToggle[0].value - : null + : null; const rightSidebarValue = this.props.rightSidebarOpen ? rightSidebarToggle[0].value - : null + : null; - const currentPluginId = this.props.pluginId + const currentPluginId = this.props.pluginId; - const { PLUGIN_TYPES, availablePlugins } = OHIF.plugins + const { PLUGIN_TYPES, availablePlugins } = OHIF.plugins; const plugin = availablePlugins.find(entry => { - return entry.type === PLUGIN_TYPES.TOOLBAR && entry.id === currentPluginId - }) + return ( + entry.type === PLUGIN_TYPES.TOOLBAR && entry.id === currentPluginId + ); + }); - let pluginComp + let pluginComp; if (plugin) { - const PluginComponent = plugin.component + const PluginComponent = plugin.component; - pluginComp = + pluginComp = ; } return ( @@ -89,8 +91,8 @@ class ToolbarRow extends Component { /> - ) + ); } } -export default ToolbarRow +export default ToolbarRow; diff --git a/src/utils/getDefaultToolbarButtons.js b/src/utils/getDefaultToolbarButtons.js index 4f26f6bd5..985e8fee9 100644 --- a/src/utils/getDefaultToolbarButtons.js +++ b/src/utils/getDefaultToolbarButtons.js @@ -98,5 +98,5 @@ export default function() { icon: 'reset', active: false, }, - ] + ]; } diff --git a/src/utils/getDefaultToolbarButtons.test.js b/src/utils/getDefaultToolbarButtons.test.js index dec3dc6c6..8f59f53fa 100644 --- a/src/utils/getDefaultToolbarButtons.test.js +++ b/src/utils/getDefaultToolbarButtons.test.js @@ -1,9 +1,9 @@ -import getDefaultToolbarButtons from './getDefaultToolbarButtons.js' +import getDefaultToolbarButtons from './getDefaultToolbarButtons.js'; describe('getDefaultToolbarButtons.js', () => { it('returns a non-empty array', () => { - const buttons = getDefaultToolbarButtons() + const buttons = getDefaultToolbarButtons(); - expect(buttons.length).toBeGreaterThan(0) - }) -}) + expect(buttons.length).toBeGreaterThan(0); + }); +});