From b24a502433ff9b9eb8586efa7a4fb6441f271010 Mon Sep 17 00:00:00 2001 From: Biharck Araujo Date: Mon, 27 May 2019 08:22:33 -0300 Subject: [PATCH 1/6] React viewport (#439) Implementing hotkeys actions --- .../src/ConnectedCornerstoneViewport.js | 3 +- .../ConnectedViewerMain.js | 59 ++++++---- .../ConnectedViewerRetrieveStudyData.js | 24 ++-- src/connectedComponents/ViewerMain.js | 104 ++++++++++-------- src/studylist/ConnectedStudyList.js | 26 ++--- 5 files changed, 123 insertions(+), 93 deletions(-) diff --git a/extensions/ohif-cornerstone-extension/src/ConnectedCornerstoneViewport.js b/extensions/ohif-cornerstone-extension/src/ConnectedCornerstoneViewport.js index 4f8e65d56..9095ab2e5 100644 --- a/extensions/ohif-cornerstone-extension/src/ConnectedCornerstoneViewport.js +++ b/extensions/ohif-cornerstone-extension/src/ConnectedCornerstoneViewport.js @@ -30,7 +30,8 @@ const mapStateToProps = (state, ownProps) => { ...dataFromStore, enableStackPrefetch: isActive, //stack: viewportSpecificData.stack, - cineToolData: viewportSpecificData.cine + cineToolData: viewportSpecificData.cine, + viewport: viewportSpecificData.viewport }; }; diff --git a/src/connectedComponents/ConnectedViewerMain.js b/src/connectedComponents/ConnectedViewerMain.js index 211a99146..4a021e407 100644 --- a/src/connectedComponents/ConnectedViewerMain.js +++ b/src/connectedComponents/ConnectedViewerMain.js @@ -1,33 +1,44 @@ -import { connect } from 'react-redux'; -import ViewerMain from './ViewerMain'; -import OHIF from 'ohif-core'; +import { connect } from 'react-redux' +import ViewerMain from './ViewerMain' +import OHIF from 'ohif-core' -const { setViewportSpecificData, clearViewportSpecificData } = OHIF.redux.actions; +const { + setViewportSpecificData, + clearViewportSpecificData, + setToolActive, + setActiveViewportSpecificData, +} = OHIF.redux.actions const mapStateToProps = state => { - const { activeViewportIndex, layout, viewportSpecificData } = state.viewports; + const { activeViewportIndex, layout, viewportSpecificData } = state.viewports - return { - activeViewportIndex, - layout, - viewportSpecificData - } -}; + return { + activeViewportIndex, + layout, + viewportSpecificData, + } +} const mapDispatchToProps = dispatch => { - return { - setViewportSpecificData: (viewportIndex, data) => { - dispatch(setViewportSpecificData(viewportIndex, data)); - }, - clearViewportSpecificData: () => { - dispatch(clearViewportSpecificData()); - } - }; -}; + return { + setViewportSpecificData: (viewportIndex, data) => { + dispatch(setViewportSpecificData(viewportIndex, data)) + }, + clearViewportSpecificData: () => { + dispatch(clearViewportSpecificData()) + }, + setToolActive: tool => { + dispatch(setToolActive(tool)) + }, + setActiveViewportSpecificData: viewport => { + dispatch(setActiveViewportSpecificData(viewport)) + }, + } +} const ConnectedViewerMain = connect( - mapStateToProps, - mapDispatchToProps -)(ViewerMain); + mapStateToProps, + mapDispatchToProps +)(ViewerMain) -export default ConnectedViewerMain; +export default ConnectedViewerMain diff --git a/src/connectedComponents/ConnectedViewerRetrieveStudyData.js b/src/connectedComponents/ConnectedViewerRetrieveStudyData.js index b6d10d8e1..7dd57437b 100644 --- a/src/connectedComponents/ConnectedViewerRetrieveStudyData.js +++ b/src/connectedComponents/ConnectedViewerRetrieveStudyData.js @@ -1,19 +1,19 @@ -import { connect } from 'react-redux'; -import ViewerRetrieveStudyData from './ViewerRetrieveStudyData.js'; +import { connect } from 'react-redux' +import ViewerRetrieveStudyData from './ViewerRetrieveStudyData.js' -const isActive = (a) => a.active === true; +const isActive = a => a.active === true const mapStateToProps = state => { - const activeServer = state.servers.servers.find(isActive); + const activeServer = state.servers.servers.find(isActive) - return { - server: activeServer, - }; -}; + return { + server: activeServer, + } +} const ConnectedViewerRetrieveStudyData = connect( - mapStateToProps, - null -)(ViewerRetrieveStudyData); + mapStateToProps, + null +)(ViewerRetrieveStudyData) -export default ConnectedViewerRetrieveStudyData; +export default ConnectedViewerRetrieveStudyData diff --git a/src/connectedComponents/ViewerMain.js b/src/connectedComponents/ViewerMain.js index 93dd9395b..871a2db7d 100644 --- a/src/connectedComponents/ViewerMain.js +++ b/src/connectedComponents/ViewerMain.js @@ -1,52 +1,61 @@ -import { Component } from 'react'; -import React from 'react'; -import PropTypes from 'prop-types'; -import { OHIF } from 'ohif-core'; -import ConnectedLayoutManager from './ConnectedLayoutManager.js'; -import './ViewerMain.css'; +import { Component } from 'react' +import React from 'react' +import PropTypes from 'prop-types' +import { OHIF } from 'ohif-core' +import ConnectedLayoutManager from './ConnectedLayoutManager.js' +import './ViewerMain.css' class ViewerMain extends Component { static propTypes = { studies: PropTypes.array.isRequired, setViewportSpecificData: PropTypes.func.isRequired, - clearViewportSpecificData: PropTypes.func.isRequired - }; + clearViewportSpecificData: PropTypes.func.isRequired, + setToolActive: PropTypes.func.isRequired, + setActiveViewportSpecificData: PropTypes.func.isRequired, + } constructor(props) { - super(props); - OHIF.hotkeysUtil.setup('viewer'); + super(props) + + // OHIF.hotkeysUtil.setup('viewer') + const hotkeysUtil = new OHIF.HotkeysUtil('viewer', { + setViewportSpecificData: props.setViewportSpecificData, + clearViewportSpecificData: props.clearViewportSpecificData, + setToolActive: props.setToolActive, + setActiveViewportSpecificData: props.setActiveViewportSpecificData, + }) this.state = { - displaySets: [] + displaySets: [], } } getDisplaySets(studies) { - const displaySets = []; + const displaySets = [] studies.forEach(study => { study.displaySets.forEach(dSet => { if (!dSet.plugin) { - dSet.plugin = 'cornerstone'; + dSet.plugin = 'cornerstone' } - displaySets.push(dSet); - }); - }); + displaySets.push(dSet) + }) + }) - return displaySets; + return displaySets } findDisplaySet(studies, studyInstanceUid, displaySetInstanceUid) { const study = studies.find(study => { - return study.studyInstanceUid === studyInstanceUid; - }); + return study.studyInstanceUid === studyInstanceUid + }) if (!study) { - return; + return } return study.displaySets.find(displaySet => { - return displaySet.displaySetInstanceUid === displaySetInstanceUid; - }); + return displaySet.displaySetInstanceUid === displaySetInstanceUid + }) } componentDidMount() { @@ -54,41 +63,50 @@ class ViewerMain extends Component { //window.addEventListener('beforeunload', unloadHandlers.beforeUnload); // Get all the display sets for the viewer studies - const displaySets = this.getDisplaySets(this.props.studies); + const displaySets = this.getDisplaySets(this.props.studies) this.setState({ - displaySets - }); + displaySets, + }) } getViewportData = () => { - const viewportData = []; - const { layout, viewportSpecificData } = this.props; + const viewportData = [] + const { layout, viewportSpecificData } = this.props - for (let viewportIndex = 0; viewportIndex < layout.viewports.length; viewportIndex++) { - let displaySet = viewportSpecificData[viewportIndex]; + 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)); + const { displaySets } = this.state + displaySet = displaySets.find( + ds => + !viewportData.some( + v => v.displaySetInstanceUid === ds.displaySetInstanceUid + ) + ) } - viewportData.push(displaySet); + viewportData.push(displaySet) } - return viewportData; - }; + return viewportData + } setViewportData = ({ viewportIndex, item }) => { const displaySet = this.findDisplaySet( this.props.studies, item.studyInstanceUid, item.displaySetInstanceUid - ); + ) - this.props.setViewportSpecificData(viewportIndex, displaySet); - }; + this.props.setViewportSpecificData(viewportIndex, displaySet) + } render() { return ( @@ -99,15 +117,15 @@ class ViewerMain extends Component { setViewportData={this.setViewportData} /> - ); + ) } componentWillUnmount() { // Clear the entire viewport specific data - const { viewportSpecificData } = this.props; - Object.keys(viewportSpecificData).forEach((viewportIndex) => { - this.props.clearViewportSpecificData(viewportIndex); - }); + const { viewportSpecificData } = this.props + Object.keys(viewportSpecificData).forEach(viewportIndex => { + this.props.clearViewportSpecificData(viewportIndex) + }) // Remove beforeUnload event handler... //window.removeEventListener('beforeunload', unloadHandlers.beforeUnload); @@ -126,4 +144,4 @@ class ViewerMain extends Component { } } -export default ViewerMain; +export default ViewerMain diff --git a/src/studylist/ConnectedStudyList.js b/src/studylist/ConnectedStudyList.js index 21c9fce67..e7181441a 100644 --- a/src/studylist/ConnectedStudyList.js +++ b/src/studylist/ConnectedStudyList.js @@ -1,21 +1,21 @@ -import { connect } from 'react-redux'; +import { connect } from 'react-redux' -import StudyListWithData from './StudyListWithData.js'; +import StudyListWithData from './StudyListWithData.js' -const isActive = (a) => a.active === true; +const isActive = a => a.active === true const mapStateToProps = state => { - const activeServer = state.servers.servers.find(isActive); + const activeServer = state.servers.servers.find(isActive) - return { - server: activeServer, - user: state.oidc.user, - }; -}; + return { + server: activeServer, + user: state.oidc.user, + } +} const ConnectedStudyList = connect( - mapStateToProps, - null -)(StudyListWithData); + mapStateToProps, + null +)(StudyListWithData) -export default ConnectedStudyList; +export default ConnectedStudyList From c2eb5f342fb17d845b2ff1d92f76d68ce7c7dd4c Mon Sep 17 00:00:00 2001 From: Evren Ozkan Date: Mon, 27 May 2019 11:09:11 -0400 Subject: [PATCH 2/6] Revert "React viewport (#439)" (#487) This reverts commit b24a502433ff9b9eb8586efa7a4fb6441f271010. --- .../src/ConnectedCornerstoneViewport.js | 3 +- .../ConnectedViewerMain.js | 59 ++++------ .../ConnectedViewerRetrieveStudyData.js | 24 ++-- src/connectedComponents/ViewerMain.js | 104 ++++++++---------- src/studylist/ConnectedStudyList.js | 26 ++--- 5 files changed, 93 insertions(+), 123 deletions(-) diff --git a/extensions/ohif-cornerstone-extension/src/ConnectedCornerstoneViewport.js b/extensions/ohif-cornerstone-extension/src/ConnectedCornerstoneViewport.js index 9095ab2e5..4f8e65d56 100644 --- a/extensions/ohif-cornerstone-extension/src/ConnectedCornerstoneViewport.js +++ b/extensions/ohif-cornerstone-extension/src/ConnectedCornerstoneViewport.js @@ -30,8 +30,7 @@ const mapStateToProps = (state, ownProps) => { ...dataFromStore, enableStackPrefetch: isActive, //stack: viewportSpecificData.stack, - cineToolData: viewportSpecificData.cine, - viewport: viewportSpecificData.viewport + cineToolData: viewportSpecificData.cine }; }; diff --git a/src/connectedComponents/ConnectedViewerMain.js b/src/connectedComponents/ConnectedViewerMain.js index 4a021e407..211a99146 100644 --- a/src/connectedComponents/ConnectedViewerMain.js +++ b/src/connectedComponents/ConnectedViewerMain.js @@ -1,44 +1,33 @@ -import { connect } from 'react-redux' -import ViewerMain from './ViewerMain' -import OHIF from 'ohif-core' +import { connect } from 'react-redux'; +import ViewerMain from './ViewerMain'; +import OHIF from 'ohif-core'; -const { - setViewportSpecificData, - clearViewportSpecificData, - setToolActive, - setActiveViewportSpecificData, -} = OHIF.redux.actions +const { setViewportSpecificData, clearViewportSpecificData } = OHIF.redux.actions; const mapStateToProps = state => { - const { activeViewportIndex, layout, viewportSpecificData } = state.viewports + const { activeViewportIndex, layout, viewportSpecificData } = state.viewports; - return { - activeViewportIndex, - layout, - viewportSpecificData, - } -} + return { + activeViewportIndex, + layout, + viewportSpecificData + } +}; const mapDispatchToProps = dispatch => { - return { - setViewportSpecificData: (viewportIndex, data) => { - dispatch(setViewportSpecificData(viewportIndex, data)) - }, - clearViewportSpecificData: () => { - dispatch(clearViewportSpecificData()) - }, - setToolActive: tool => { - dispatch(setToolActive(tool)) - }, - setActiveViewportSpecificData: viewport => { - dispatch(setActiveViewportSpecificData(viewport)) - }, - } -} + return { + setViewportSpecificData: (viewportIndex, data) => { + dispatch(setViewportSpecificData(viewportIndex, data)); + }, + clearViewportSpecificData: () => { + dispatch(clearViewportSpecificData()); + } + }; +}; const ConnectedViewerMain = connect( - mapStateToProps, - mapDispatchToProps -)(ViewerMain) + mapStateToProps, + mapDispatchToProps +)(ViewerMain); -export default ConnectedViewerMain +export default ConnectedViewerMain; diff --git a/src/connectedComponents/ConnectedViewerRetrieveStudyData.js b/src/connectedComponents/ConnectedViewerRetrieveStudyData.js index 7dd57437b..b6d10d8e1 100644 --- a/src/connectedComponents/ConnectedViewerRetrieveStudyData.js +++ b/src/connectedComponents/ConnectedViewerRetrieveStudyData.js @@ -1,19 +1,19 @@ -import { connect } from 'react-redux' -import ViewerRetrieveStudyData from './ViewerRetrieveStudyData.js' +import { connect } from 'react-redux'; +import ViewerRetrieveStudyData from './ViewerRetrieveStudyData.js'; -const isActive = a => a.active === true +const isActive = (a) => a.active === true; const mapStateToProps = state => { - const activeServer = state.servers.servers.find(isActive) + const activeServer = state.servers.servers.find(isActive); - return { - server: activeServer, - } -} + return { + server: activeServer, + }; +}; const ConnectedViewerRetrieveStudyData = connect( - mapStateToProps, - null -)(ViewerRetrieveStudyData) + mapStateToProps, + null +)(ViewerRetrieveStudyData); -export default ConnectedViewerRetrieveStudyData +export default ConnectedViewerRetrieveStudyData; diff --git a/src/connectedComponents/ViewerMain.js b/src/connectedComponents/ViewerMain.js index 871a2db7d..93dd9395b 100644 --- a/src/connectedComponents/ViewerMain.js +++ b/src/connectedComponents/ViewerMain.js @@ -1,61 +1,52 @@ -import { Component } from 'react' -import React from 'react' -import PropTypes from 'prop-types' -import { OHIF } from 'ohif-core' -import ConnectedLayoutManager from './ConnectedLayoutManager.js' -import './ViewerMain.css' +import { Component } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; +import { OHIF } from 'ohif-core'; +import ConnectedLayoutManager from './ConnectedLayoutManager.js'; +import './ViewerMain.css'; class ViewerMain extends Component { static propTypes = { studies: PropTypes.array.isRequired, setViewportSpecificData: PropTypes.func.isRequired, - clearViewportSpecificData: PropTypes.func.isRequired, - setToolActive: PropTypes.func.isRequired, - setActiveViewportSpecificData: PropTypes.func.isRequired, - } + clearViewportSpecificData: PropTypes.func.isRequired + }; constructor(props) { - super(props) - - // OHIF.hotkeysUtil.setup('viewer') - const hotkeysUtil = new OHIF.HotkeysUtil('viewer', { - setViewportSpecificData: props.setViewportSpecificData, - clearViewportSpecificData: props.clearViewportSpecificData, - setToolActive: props.setToolActive, - setActiveViewportSpecificData: props.setActiveViewportSpecificData, - }) + super(props); + OHIF.hotkeysUtil.setup('viewer'); this.state = { - displaySets: [], + displaySets: [] } } getDisplaySets(studies) { - const displaySets = [] + const displaySets = []; studies.forEach(study => { study.displaySets.forEach(dSet => { if (!dSet.plugin) { - dSet.plugin = 'cornerstone' + dSet.plugin = 'cornerstone'; } - displaySets.push(dSet) - }) - }) + displaySets.push(dSet); + }); + }); - return displaySets + return displaySets; } findDisplaySet(studies, studyInstanceUid, displaySetInstanceUid) { const study = studies.find(study => { - return study.studyInstanceUid === studyInstanceUid - }) + return study.studyInstanceUid === studyInstanceUid; + }); if (!study) { - return + return; } return study.displaySets.find(displaySet => { - return displaySet.displaySetInstanceUid === displaySetInstanceUid - }) + return displaySet.displaySetInstanceUid === displaySetInstanceUid; + }); } componentDidMount() { @@ -63,50 +54,41 @@ class ViewerMain extends Component { //window.addEventListener('beforeunload', unloadHandlers.beforeUnload); // Get all the display sets for the viewer studies - const displaySets = this.getDisplaySets(this.props.studies) + const displaySets = this.getDisplaySets(this.props.studies); this.setState({ - displaySets, - }) + displaySets + }); } getViewportData = () => { - const viewportData = [] - const { layout, viewportSpecificData } = this.props + const viewportData = []; + const { layout, viewportSpecificData } = this.props; - for ( - let viewportIndex = 0; - viewportIndex < layout.viewports.length; - viewportIndex++ - ) { - let displaySet = viewportSpecificData[viewportIndex] + 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 - ) - ) + const { displaySets } = this.state; + displaySet = displaySets.find(ds => !viewportData.some(v => v.displaySetInstanceUid === ds.displaySetInstanceUid)); } - viewportData.push(displaySet) + viewportData.push(displaySet); } - return viewportData - } + return viewportData; + }; setViewportData = ({ viewportIndex, item }) => { const displaySet = this.findDisplaySet( this.props.studies, item.studyInstanceUid, item.displaySetInstanceUid - ) + ); - this.props.setViewportSpecificData(viewportIndex, displaySet) - } + this.props.setViewportSpecificData(viewportIndex, displaySet); + }; render() { return ( @@ -117,15 +99,15 @@ class ViewerMain extends Component { setViewportData={this.setViewportData} /> - ) + ); } componentWillUnmount() { // Clear the entire viewport specific data - const { viewportSpecificData } = this.props - Object.keys(viewportSpecificData).forEach(viewportIndex => { - this.props.clearViewportSpecificData(viewportIndex) - }) + const { viewportSpecificData } = this.props; + Object.keys(viewportSpecificData).forEach((viewportIndex) => { + this.props.clearViewportSpecificData(viewportIndex); + }); // Remove beforeUnload event handler... //window.removeEventListener('beforeunload', unloadHandlers.beforeUnload); @@ -144,4 +126,4 @@ class ViewerMain extends Component { } } -export default ViewerMain +export default ViewerMain; diff --git a/src/studylist/ConnectedStudyList.js b/src/studylist/ConnectedStudyList.js index e7181441a..21c9fce67 100644 --- a/src/studylist/ConnectedStudyList.js +++ b/src/studylist/ConnectedStudyList.js @@ -1,21 +1,21 @@ -import { connect } from 'react-redux' +import { connect } from 'react-redux'; -import StudyListWithData from './StudyListWithData.js' +import StudyListWithData from './StudyListWithData.js'; -const isActive = a => a.active === true +const isActive = (a) => a.active === true; const mapStateToProps = state => { - const activeServer = state.servers.servers.find(isActive) + const activeServer = state.servers.servers.find(isActive); - return { - server: activeServer, - user: state.oidc.user, - } -} + return { + server: activeServer, + user: state.oidc.user, + }; +}; const ConnectedStudyList = connect( - mapStateToProps, - null -)(StudyListWithData) + mapStateToProps, + null +)(StudyListWithData); -export default ConnectedStudyList +export default ConnectedStudyList; From 3bae254a6f42de54fec42ba1dc48811bf1f42ea3 Mon Sep 17 00:00:00 2001 From: Evren Ozkan Date: Mon, 27 May 2019 11:31:39 -0400 Subject: [PATCH 3/6] fix(hotkeys): Fix the issues with hotkeys (#488) * wip viewport * refactoring to do not use dispatch from window * fixing server active testing * fix(dependencies): Bump ohif-core to 0.5.5 --- .../src/ConnectedCornerstoneViewport.js | 3 +- package.json | 2 +- .../ConnectedViewerMain.js | 59 ++++++---- .../ConnectedViewerRetrieveStudyData.js | 24 ++-- src/connectedComponents/ViewerMain.js | 104 ++++++++++-------- src/studylist/ConnectedStudyList.js | 26 ++--- yarn.lock | 8 +- 7 files changed, 128 insertions(+), 98 deletions(-) diff --git a/extensions/ohif-cornerstone-extension/src/ConnectedCornerstoneViewport.js b/extensions/ohif-cornerstone-extension/src/ConnectedCornerstoneViewport.js index 4f8e65d56..9095ab2e5 100644 --- a/extensions/ohif-cornerstone-extension/src/ConnectedCornerstoneViewport.js +++ b/extensions/ohif-cornerstone-extension/src/ConnectedCornerstoneViewport.js @@ -30,7 +30,8 @@ const mapStateToProps = (state, ownProps) => { ...dataFromStore, enableStackPrefetch: isActive, //stack: viewportSpecificData.stack, - cineToolData: viewportSpecificData.cine + cineToolData: viewportSpecificData.cine, + viewport: viewportSpecificData.viewport }; }; diff --git a/package.json b/package.json index c7c0407a3..90f78f4f6 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "hammerjs": "^2.0.8", "lodash.isequal": "4.5.0", "moment": "^2.24.0", - "ohif-core": "0.5.3", + "ohif-core": "0.5.5", "ohif-cornerstone-extension": "0.0.30", "ohif-dicom-html-extension": "^0.0.2", "ohif-dicom-microscopy-extension": "^0.0.5", diff --git a/src/connectedComponents/ConnectedViewerMain.js b/src/connectedComponents/ConnectedViewerMain.js index 211a99146..4a021e407 100644 --- a/src/connectedComponents/ConnectedViewerMain.js +++ b/src/connectedComponents/ConnectedViewerMain.js @@ -1,33 +1,44 @@ -import { connect } from 'react-redux'; -import ViewerMain from './ViewerMain'; -import OHIF from 'ohif-core'; +import { connect } from 'react-redux' +import ViewerMain from './ViewerMain' +import OHIF from 'ohif-core' -const { setViewportSpecificData, clearViewportSpecificData } = OHIF.redux.actions; +const { + setViewportSpecificData, + clearViewportSpecificData, + setToolActive, + setActiveViewportSpecificData, +} = OHIF.redux.actions const mapStateToProps = state => { - const { activeViewportIndex, layout, viewportSpecificData } = state.viewports; + const { activeViewportIndex, layout, viewportSpecificData } = state.viewports - return { - activeViewportIndex, - layout, - viewportSpecificData - } -}; + return { + activeViewportIndex, + layout, + viewportSpecificData, + } +} const mapDispatchToProps = dispatch => { - return { - setViewportSpecificData: (viewportIndex, data) => { - dispatch(setViewportSpecificData(viewportIndex, data)); - }, - clearViewportSpecificData: () => { - dispatch(clearViewportSpecificData()); - } - }; -}; + return { + setViewportSpecificData: (viewportIndex, data) => { + dispatch(setViewportSpecificData(viewportIndex, data)) + }, + clearViewportSpecificData: () => { + dispatch(clearViewportSpecificData()) + }, + setToolActive: tool => { + dispatch(setToolActive(tool)) + }, + setActiveViewportSpecificData: viewport => { + dispatch(setActiveViewportSpecificData(viewport)) + }, + } +} const ConnectedViewerMain = connect( - mapStateToProps, - mapDispatchToProps -)(ViewerMain); + mapStateToProps, + mapDispatchToProps +)(ViewerMain) -export default ConnectedViewerMain; +export default ConnectedViewerMain diff --git a/src/connectedComponents/ConnectedViewerRetrieveStudyData.js b/src/connectedComponents/ConnectedViewerRetrieveStudyData.js index b6d10d8e1..7dd57437b 100644 --- a/src/connectedComponents/ConnectedViewerRetrieveStudyData.js +++ b/src/connectedComponents/ConnectedViewerRetrieveStudyData.js @@ -1,19 +1,19 @@ -import { connect } from 'react-redux'; -import ViewerRetrieveStudyData from './ViewerRetrieveStudyData.js'; +import { connect } from 'react-redux' +import ViewerRetrieveStudyData from './ViewerRetrieveStudyData.js' -const isActive = (a) => a.active === true; +const isActive = a => a.active === true const mapStateToProps = state => { - const activeServer = state.servers.servers.find(isActive); + const activeServer = state.servers.servers.find(isActive) - return { - server: activeServer, - }; -}; + return { + server: activeServer, + } +} const ConnectedViewerRetrieveStudyData = connect( - mapStateToProps, - null -)(ViewerRetrieveStudyData); + mapStateToProps, + null +)(ViewerRetrieveStudyData) -export default ConnectedViewerRetrieveStudyData; +export default ConnectedViewerRetrieveStudyData diff --git a/src/connectedComponents/ViewerMain.js b/src/connectedComponents/ViewerMain.js index 93dd9395b..8c4b2478a 100644 --- a/src/connectedComponents/ViewerMain.js +++ b/src/connectedComponents/ViewerMain.js @@ -1,52 +1,61 @@ -import { Component } from 'react'; -import React from 'react'; -import PropTypes from 'prop-types'; -import { OHIF } from 'ohif-core'; -import ConnectedLayoutManager from './ConnectedLayoutManager.js'; -import './ViewerMain.css'; +import { Component } from 'react' +import React from 'react' +import PropTypes from 'prop-types' +import { OHIF } from 'ohif-core' +import ConnectedLayoutManager from './ConnectedLayoutManager.js' +import './ViewerMain.css' class ViewerMain extends Component { static propTypes = { studies: PropTypes.array.isRequired, setViewportSpecificData: PropTypes.func.isRequired, - clearViewportSpecificData: PropTypes.func.isRequired - }; + clearViewportSpecificData: PropTypes.func.isRequired, + setToolActive: PropTypes.func.isRequired, + setActiveViewportSpecificData: PropTypes.func.isRequired, + } constructor(props) { - super(props); - OHIF.hotkeysUtil.setup('viewer'); + super(props) + + // Initialize hotkeys + new OHIF.HotkeysUtil('viewer', { + setViewportSpecificData: props.setViewportSpecificData, + clearViewportSpecificData: props.clearViewportSpecificData, + setToolActive: props.setToolActive, + setActiveViewportSpecificData: props.setActiveViewportSpecificData, + }) this.state = { - displaySets: [] + displaySets: [], } } getDisplaySets(studies) { - const displaySets = []; + const displaySets = [] studies.forEach(study => { study.displaySets.forEach(dSet => { if (!dSet.plugin) { - dSet.plugin = 'cornerstone'; + dSet.plugin = 'cornerstone' } - displaySets.push(dSet); - }); - }); + displaySets.push(dSet) + }) + }) - return displaySets; + return displaySets } findDisplaySet(studies, studyInstanceUid, displaySetInstanceUid) { const study = studies.find(study => { - return study.studyInstanceUid === studyInstanceUid; - }); + return study.studyInstanceUid === studyInstanceUid + }) if (!study) { - return; + return } return study.displaySets.find(displaySet => { - return displaySet.displaySetInstanceUid === displaySetInstanceUid; - }); + return displaySet.displaySetInstanceUid === displaySetInstanceUid + }) } componentDidMount() { @@ -54,41 +63,50 @@ class ViewerMain extends Component { //window.addEventListener('beforeunload', unloadHandlers.beforeUnload); // Get all the display sets for the viewer studies - const displaySets = this.getDisplaySets(this.props.studies); + const displaySets = this.getDisplaySets(this.props.studies) this.setState({ - displaySets - }); + displaySets, + }) } getViewportData = () => { - const viewportData = []; - const { layout, viewportSpecificData } = this.props; + const viewportData = [] + const { layout, viewportSpecificData } = this.props - for (let viewportIndex = 0; viewportIndex < layout.viewports.length; viewportIndex++) { - let displaySet = viewportSpecificData[viewportIndex]; + 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)); + const { displaySets } = this.state + displaySet = displaySets.find( + ds => + !viewportData.some( + v => v.displaySetInstanceUid === ds.displaySetInstanceUid + ) + ) } - viewportData.push(displaySet); + viewportData.push(displaySet) } - return viewportData; - }; + return viewportData + } setViewportData = ({ viewportIndex, item }) => { const displaySet = this.findDisplaySet( this.props.studies, item.studyInstanceUid, item.displaySetInstanceUid - ); + ) - this.props.setViewportSpecificData(viewportIndex, displaySet); - }; + this.props.setViewportSpecificData(viewportIndex, displaySet) + } render() { return ( @@ -99,15 +117,15 @@ class ViewerMain extends Component { setViewportData={this.setViewportData} /> - ); + ) } componentWillUnmount() { // Clear the entire viewport specific data - const { viewportSpecificData } = this.props; - Object.keys(viewportSpecificData).forEach((viewportIndex) => { - this.props.clearViewportSpecificData(viewportIndex); - }); + const { viewportSpecificData } = this.props + Object.keys(viewportSpecificData).forEach(viewportIndex => { + this.props.clearViewportSpecificData(viewportIndex) + }) // Remove beforeUnload event handler... //window.removeEventListener('beforeunload', unloadHandlers.beforeUnload); @@ -126,4 +144,4 @@ class ViewerMain extends Component { } } -export default ViewerMain; +export default ViewerMain diff --git a/src/studylist/ConnectedStudyList.js b/src/studylist/ConnectedStudyList.js index 21c9fce67..e7181441a 100644 --- a/src/studylist/ConnectedStudyList.js +++ b/src/studylist/ConnectedStudyList.js @@ -1,21 +1,21 @@ -import { connect } from 'react-redux'; +import { connect } from 'react-redux' -import StudyListWithData from './StudyListWithData.js'; +import StudyListWithData from './StudyListWithData.js' -const isActive = (a) => a.active === true; +const isActive = a => a.active === true const mapStateToProps = state => { - const activeServer = state.servers.servers.find(isActive); + const activeServer = state.servers.servers.find(isActive) - return { - server: activeServer, - user: state.oidc.user, - }; -}; + return { + server: activeServer, + user: state.oidc.user, + } +} const ConnectedStudyList = connect( - mapStateToProps, - null -)(StudyListWithData); + mapStateToProps, + null +)(StudyListWithData) -export default ConnectedStudyList; +export default ConnectedStudyList diff --git a/yarn.lock b/yarn.lock index 5a71e89b5..db77ae91e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9674,10 +9674,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.5.3: - version "0.5.3" - resolved "https://registry.yarnpkg.com/ohif-core/-/ohif-core-0.5.3.tgz#cf78f0e4b28ed5a602b032483cdd44f3baea34f2" - integrity sha512-pdzVz9WkdXVm99TuBSx1JYEed9aPaD9/CKd/+YM4R3lgchDNLxuz0l76HBPHpFV2XDIKmu1q5EyETyMiOxhZsw== +ohif-core@0.5.5: + version "0.5.5" + resolved "https://registry.yarnpkg.com/ohif-core/-/ohif-core-0.5.5.tgz#78ace87fa06b3b23a004414a702cc23cb00edf9d" + integrity sha512-BORJCxOWuVAx2CE6+LSdL5+1+PG6gkYgl6tyAZhHhAgT46DWAfbq8nkAIX7Rhwot0BWpAcHkkBWIavGOBOH24Q== dependencies: "@babel/runtime" "^7.2.0" ajv "^6.10.0" From 3c8e646f0f3bb5cc503dc61d64b914effb46be6d Mon Sep 17 00:00:00 2001 From: Evren Ozkan Date: Mon, 27 May 2019 19:02:05 -0400 Subject: [PATCH 4/6] fix(dependencies): Bump react-cornerstone-viewport to 0.1.28 (#490) * fix(dependencies): Bump react-cornerstone-viewport to 0.1.28 * fix(dependencies): Bump ohif-cornerstone-extension to 0.0.31 --- .../ohif-cornerstone-extension/package.json | 4 ++-- .../ohif-cornerstone-extension/yarn.lock | 8 ++++---- package.json | 2 +- yarn.lock | 18 +++++++++--------- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/extensions/ohif-cornerstone-extension/package.json b/extensions/ohif-cornerstone-extension/package.json index e52692294..0832e1384 100644 --- a/extensions/ohif-cornerstone-extension/package.json +++ b/extensions/ohif-cornerstone-extension/package.json @@ -1,6 +1,6 @@ { "name": "ohif-cornerstone-extension", - "version": "0.0.30", + "version": "0.0.31", "description": "OHIF extension for Cornerstone", "author": "OHIF", "license": "MIT", @@ -39,7 +39,7 @@ "@babel/runtime": "^7.2.0", "classnames": "^2.2.6", "lodash.throttle": "^4.1.1", - "react-cornerstone-viewport": "0.1.27" + "react-cornerstone-viewport": "0.1.28" }, "devDependencies": { "@babel/core": "^7.2.2", diff --git a/extensions/ohif-cornerstone-extension/yarn.lock b/extensions/ohif-cornerstone-extension/yarn.lock index ec1b162c7..73cc6b4a1 100644 --- a/extensions/ohif-cornerstone-extension/yarn.lock +++ b/extensions/ohif-cornerstone-extension/yarn.lock @@ -4418,10 +4418,10 @@ randomfill@^1.0.3: randombytes "^2.0.5" safe-buffer "^5.1.0" -react-cornerstone-viewport@0.1.27: - version "0.1.27" - resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-0.1.27.tgz#6e00be845c1684aadaf31d0f0ee3933fd44e33f3" - integrity sha512-pPIy7snnIXjxyZcghAKmyxvrim8xzQxhml7TxGZ/fv2L+rAsF2ZhsB7LLEUCXIZXL3F8A30VTHWLK3lV92TBDQ== +react-cornerstone-viewport@0.1.28: + version "0.1.28" + resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-0.1.28.tgz#ca1b0062c9f08868c653c11d6cdef8f5d519f90a" + integrity sha512-lGXFB1pxUJE+tozAHjQD8KcmnGuGG/nD3CGrK44cFqx8e3W/CKU9/bZM6qomy/X1fK5TlnJUaZ9NOCaDLhzJrQ== dependencies: lodash.debounce "^4.0.8" moment "^2.23.0" diff --git a/package.json b/package.json index 90f78f4f6..2e2650356 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "lodash.isequal": "4.5.0", "moment": "^2.24.0", "ohif-core": "0.5.5", - "ohif-cornerstone-extension": "0.0.30", + "ohif-cornerstone-extension": "0.0.31", "ohif-dicom-html-extension": "^0.0.2", "ohif-dicom-microscopy-extension": "^0.0.5", "ohif-dicom-pdf-extension": "^0.0.6", diff --git a/yarn.lock b/yarn.lock index db77ae91e..793c72a47 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9688,15 +9688,15 @@ ohif-core@0.5.5: lodash.merge "^4.6.1" validate.js "^0.12.0" -ohif-cornerstone-extension@0.0.30: - version "0.0.30" - resolved "https://registry.yarnpkg.com/ohif-cornerstone-extension/-/ohif-cornerstone-extension-0.0.30.tgz#b5c87d83f2215d7648f3324f1d2655955123afb5" - integrity sha512-UAaeiCB50FOv+YnK/Nl9ASEwJOE5OsVODDkMz4SNmWznLxS0luYZNZC8cDZl2dPLvWkVGRgyjY8WHfBqMdWPfw== +ohif-cornerstone-extension@0.0.31: + version "0.0.31" + resolved "https://registry.yarnpkg.com/ohif-cornerstone-extension/-/ohif-cornerstone-extension-0.0.31.tgz#39669e5d8a5e39a4e84f0bdae02b39e222c222aa" + integrity sha512-7skySEBTkQ2cVOvHXI1Q4rPsjynD1xQ9xQTnPskNNvMEiH4/XJbBXsmbg37D3hocXL16CKIztHoYpNqF0cruYQ== dependencies: "@babel/runtime" "^7.2.0" classnames "^2.2.6" lodash.throttle "^4.1.1" - react-cornerstone-viewport "0.1.27" + react-cornerstone-viewport "0.1.28" ohif-dicom-html-extension@^0.0.2: version "0.0.2" @@ -11480,10 +11480,10 @@ react-bootstrap-modal@4.2.0, react-bootstrap-modal@^4.2.0: react-overlays "^0.8.0" react-transition-group "^2.0.0" -react-cornerstone-viewport@0.1.27: - version "0.1.27" - resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-0.1.27.tgz#6e00be845c1684aadaf31d0f0ee3933fd44e33f3" - integrity sha512-pPIy7snnIXjxyZcghAKmyxvrim8xzQxhml7TxGZ/fv2L+rAsF2ZhsB7LLEUCXIZXL3F8A30VTHWLK3lV92TBDQ== +react-cornerstone-viewport@0.1.28: + version "0.1.28" + resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-0.1.28.tgz#ca1b0062c9f08868c653c11d6cdef8f5d519f90a" + integrity sha512-lGXFB1pxUJE+tozAHjQD8KcmnGuGG/nD3CGrK44cFqx8e3W/CKU9/bZM6qomy/X1fK5TlnJUaZ9NOCaDLhzJrQ== dependencies: lodash.debounce "^4.0.8" moment "^2.23.0" From 4795c8d95efda681f9fa560dd5a7a0f45714cc78 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Tue, 28 May 2019 10:06:54 -0400 Subject: [PATCH 5/6] Fix codesandbox link --- docs/latest/deployment/index.md | 4 ++-- docs/latest/deployment/recipes/embedded-viewer.md | 9 +++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/latest/deployment/index.md b/docs/latest/deployment/index.md index 324a27c44..4df90267f 100644 --- a/docs/latest/deployment/index.md +++ b/docs/latest/deployment/index.md @@ -24,8 +24,7 @@ add a powerful medical imaging viewer to an existing web page using only a few include tags. - Read more about it here: [Embedded Viewer](./recipes/embedded-viewer.md) -- And check out our - [live demo on CodeSandbox](https://codesandbox.io/s/lrjoo3znxm) +- And check out our [live demo on CodeSandbox][code-sandbox] {% include "./_embedded-viewer-diagram.md" %} @@ -207,4 +206,5 @@ Please feel free to suggest or contribute your own recipes. [host-static-assets]: https://www.netlify.com/blog/2016/05/18/9-reasons-your-site-should-be-static/ [cors]: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS [code-flows]: https://medium.com/@darutk/diagrams-of-all-the-openid-connect-flows-6968e3990660 +[code-sandbox]: https://codesandbox.io/s/ohif-viewer-script-tag-usage-b3st9 diff --git a/docs/latest/deployment/recipes/embedded-viewer.md b/docs/latest/deployment/recipes/embedded-viewer.md index d35bf3dea..c3590f7b1 100644 --- a/docs/latest/deployment/recipes/embedded-viewer.md +++ b/docs/latest/deployment/recipes/embedded-viewer.md @@ -92,10 +92,9 @@ ReactDOM.render(app, document.getElementById('ohif-viewer-target')) > I'm having trouble getting this to work. Where can I go for help? -First, check out this fully functional -[CodeSandbox](https://codesandbox.io/s/ohif-viewer-script-tag-usage-b3st9) -example. If you're still having trouble, feel free to search or GitHub issues. -Can't find anything related your problem? Create a new one. +First, check out this fully functional [CodeSandbox][code-sandbox] example. If +you're still having trouble, feel free to search or GitHub issues. Can't find +anything related your problem? Create a new one. > When I include bootstrap, other styles on my page no longer work correctly. > What can I do? @@ -108,3 +107,5 @@ Have that working? Good. Now `embed` that new page using an This should produce the expected result while also protecting your page from any globally defined styles/scripts. + +[code-sandbox]: https://codesandbox.io/s/ohif-viewer-script-tag-usage-b3st9 From f1f2981415d3ed07528bcc73cf943467c7498cbf Mon Sep 17 00:00:00 2001 From: Evren Ozkan Date: Tue, 28 May 2019 10:49:01 -0400 Subject: [PATCH 6/6] fix(dependencies): Bump cornerstone-tools to 3.11.0 (#497) --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 2e2650356..6e5bd1860 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,7 @@ "classnames": "^2.2.6", "cornerstone-core": "^2.2.8", "cornerstone-math": "^0.1.8", - "cornerstone-tools": "^3.9.0", + "cornerstone-tools": "^3.11.0", "cornerstone-wado-image-loader": "^2.2.3", "dcmjs": "^0.3.8", "dicom-parser": "^1.8.3", diff --git a/yarn.lock b/yarn.lock index 793c72a47..78f611c75 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3477,10 +3477,10 @@ cornerstone-math@^0.1.8: resolved "https://registry.yarnpkg.com/cornerstone-math/-/cornerstone-math-0.1.8.tgz#68ab1f9e4fdcd7c5cb23a0d2eb4263f9f894f1c5" integrity sha512-x7NEQHBtVG7j1yeyj/aRoKTpXv1Vh2/H9zNLMyqYJDtJkNng8C4Q8M3CgZ1qer0Yr7eVq2x+Ynmj6kfOm5jXKw== -cornerstone-tools@^3.9.0: - version "3.9.0" - resolved "https://registry.yarnpkg.com/cornerstone-tools/-/cornerstone-tools-3.9.0.tgz#6e5a2865fe2ba6d80bf907b1b9734848b83132a0" - integrity sha512-gi+KhxYx3OEr4E0vt7Rp+MiQ5SRf1Qf/qf/D12i/VywDg3mPTLpe588nZZoUxeBJc0wF2s+Zybyv15NrbkoP2Q== +cornerstone-tools@^3.11.0: + version "3.11.0" + resolved "https://registry.yarnpkg.com/cornerstone-tools/-/cornerstone-tools-3.11.0.tgz#8d14537548ef4f0cc2f38fd55b343bc28d73f5a7" + integrity sha512-n1zeYr7rJ4wNCE3a9IJvb7wWnvYfMWOiiaKL0IN093VrYiJU2DBvjC+97gbQE+AboQyp02JbUV2ac4fhdyzMQg== dependencies: "@babel/runtime" "7.1.2" cornerstone-math "0.1.7"