From 5b334175c370afb930b4b6dbd307ddece8f850e3 Mon Sep 17 00:00:00 2001 From: Rodrigo Antinarelli Date: Tue, 29 Oct 2019 15:21:56 -0300 Subject: [PATCH] fix: Set SR viewport as active by interaction (#1118) * fix: Set SR viewport as active by interaction * quick fix * (eslint) add "before" as global variables * add data-cy * add data-cy * create E2E test * (E2E) create custom command to set layout size * remove .only e2e * remove throttle for onScroll --- .eslintrc.json | 1 + .../src/ConnectedDicomHtmlViewport.js | 33 ++++++++++++ .../dicom-html/src/DicomHtmlViewport.js | 52 +++++++++++++------ .../dicom-html/src/OHIFDicomHtmlViewport.js | 9 +++- .../integration/pwa/OHIFExtensionHTML.spec.js | 19 +++++++ platform/viewer/cypress/support/commands.js | 17 +++++- 6 files changed, 112 insertions(+), 19 deletions(-) create mode 100644 extensions/dicom-html/src/ConnectedDicomHtmlViewport.js diff --git a/.eslintrc.json b/.eslintrc.json index 49f82e81c56..55db8c49169 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -16,6 +16,7 @@ }, "globals": { "cy": true, + "before": true, "context": true, "Cypress": true, "assert": true diff --git a/extensions/dicom-html/src/ConnectedDicomHtmlViewport.js b/extensions/dicom-html/src/ConnectedDicomHtmlViewport.js new file mode 100644 index 00000000000..9e66b0b7419 --- /dev/null +++ b/extensions/dicom-html/src/ConnectedDicomHtmlViewport.js @@ -0,0 +1,33 @@ +import OHIF from '@ohif/core'; +import { connect } from 'react-redux'; +import DicomHtmlViewport from './DicomHtmlViewport'; + +const { setViewportActive } = OHIF.redux.actions; + +const mapStateToProps = (state, ownProps) => { + const { viewportIndex, byteArray } = ownProps; + const activeViewportIndex = state.viewports; + + return { + viewportIndex, + activeViewportIndex, + byteArray, + }; +}; + +const mapDispatchToProps = (dispatch, ownProps) => { + const { viewportIndex } = ownProps; + + return { + setViewportActive: () => { + dispatch(setViewportActive(viewportIndex)); + }, + }; +}; + +const ConnectedDicomHtmlViewport = connect( + mapStateToProps, + mapDispatchToProps +)(DicomHtmlViewport); + +export default ConnectedDicomHtmlViewport; diff --git a/extensions/dicom-html/src/DicomHtmlViewport.js b/extensions/dicom-html/src/DicomHtmlViewport.js index 686c0057bd7..1008d92cd75 100644 --- a/extensions/dicom-html/src/DicomHtmlViewport.js +++ b/extensions/dicom-html/src/DicomHtmlViewport.js @@ -1,6 +1,8 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import * as dcmjs from 'dcmjs'; import TypedArrayProp from './TypedArrayProp'; + import './DicomHtmlViewport.css'; function getRelationshipString(data) { @@ -30,7 +32,7 @@ function getValueString(data) { const { CodeMeaning, CodeValue, - CodingSchemeDesignator + CodingSchemeDesignator, } = data.ConceptNameCodeSequence; return `${CodeMeaning} (${CodeValue}, ${CodingSchemeDesignator})`; @@ -75,7 +77,7 @@ function constructContentSequence(data, header) { } const result = { - items + items, }; if (header) { @@ -106,9 +108,7 @@ const { DicomMetaDictionary, DicomMessage } = dcmjs.data; function getMainData(data) { const root = []; - const patientValue = `${data.PatientName} (${data.PatientSex}, #${ - data.PatientID - })`; + const patientValue = `${data.PatientName} (${data.PatientSex}, #${data.PatientID})`; root.push(getMainDataItem('Patient', patientValue)); const studyValue = data.StudyDescription; @@ -117,15 +117,13 @@ function getMainData(data) { const seriesValue = `${data.SeriesDescription} (#${data.SeriesNumber})`; root.push(getMainDataItem('Series', seriesValue)); - const manufacturerValue = `${data.Manufacturer} (${ - data.ManufacturerModelName - }, #${data.DeviceSerialNumber})`; + const manufacturerValue = `${data.Manufacturer} (${data.ManufacturerModelName}, #${data.DeviceSerialNumber})`; root.push(getMainDataItem('Manufacturer', manufacturerValue)); const mainDataObjects = { CompletionFlag: 'Completion flag', - VerificationFlag: 'Verification flag' + VerificationFlag: 'Verification flag', }; Object.keys(mainDataObjects).forEach(key => { @@ -154,7 +152,7 @@ const getContentSequence = (data, level = 1) => { const { CodeMeaning, CodeValue, - CodingSchemeDesignator + CodingSchemeDesignator, } = data.ConceptNameCodeSequence; header = `${CodeMeaning} (${CodeValue} - ${CodingSchemeDesignator})`; @@ -198,11 +196,14 @@ function getMainDataItem(key, value) { class DicomHtmlViewport extends Component { state = { content: null, - error: null + error: null, }; static propTypes = { - byteArray: TypedArrayProp.uint8 + byteArray: TypedArrayProp.uint8, + setViewportActive: PropTypes.func.isRequired, + viewportIndex: PropTypes.number.isRequired, + activeViewportIndex: PropTypes.number.isRequired, }; componentDidMount() { @@ -225,15 +226,34 @@ class DicomHtmlViewport extends Component { ); this.setState({ - content + content, }); } + setViewportActiveHandler = () => { + const { + setViewportActive, + viewportIndex, + activeViewportIndex, + } = this.props; + + if (viewportIndex !== activeViewportIndex) { + setViewportActive(); + } + }; + render() { + const { content, error } = this.state; + return ( -
- {this.state.content} - {this.state.error &&

{JSON.stringify(this.state.error)}

} +
+ {content} + {error &&

{JSON.stringify(error)}

}
); } diff --git a/extensions/dicom-html/src/OHIFDicomHtmlViewport.js b/extensions/dicom-html/src/OHIFDicomHtmlViewport.js index 0d9e26557a1..bd804981151 100644 --- a/extensions/dicom-html/src/OHIFDicomHtmlViewport.js +++ b/extensions/dicom-html/src/OHIFDicomHtmlViewport.js @@ -1,7 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import DicomHtmlViewport from './DicomHtmlViewport'; import OHIF from '@ohif/core'; +import ConnectedDicomHtmlViewport from './ConnectedDicomHtmlViewport'; + const { DicomLoaderService } = OHIF.utils; class OHIFDicomHtmlViewport extends Component { @@ -9,6 +10,7 @@ class OHIFDicomHtmlViewport extends Component { studies: PropTypes.object, displaySet: PropTypes.object, viewportIndex: PropTypes.number, + viewportData: PropTypes.object, }; state = { @@ -40,7 +42,10 @@ class OHIFDicomHtmlViewport extends Component { return ( <> {this.state.byteArray && ( - + )} {this.state.error &&

{JSON.stringify(this.state.error)}

} diff --git a/platform/viewer/cypress/integration/pwa/OHIFExtensionHTML.spec.js b/platform/viewer/cypress/integration/pwa/OHIFExtensionHTML.spec.js index 08757cec9e7..6249392510f 100644 --- a/platform/viewer/cypress/integration/pwa/OHIFExtensionHTML.spec.js +++ b/platform/viewer/cypress/integration/pwa/OHIFExtensionHTML.spec.js @@ -22,4 +22,23 @@ describe('OHIF HTML Extension', () => { 'Imaging Measurement Report' ); }); + + it('checks if the HTML viewport has been set to active by interaction', () => { + cy.setLayout('3', '3'); + + // check if viewport has been set as active by CLICKING + cy.get('[data-cy=viewprt-grid] > :nth-child(4)') + .click() + .then($viewport => { + cy.wrap($viewport).should('have.class', 'active'); + }); + + // check if viewport has been set as active by SCROLLING + cy.get('[data-cy=viewprt-grid] > :nth-child(7)').then($viewport => { + cy.wrap($viewport) + .find('[data-cy=dicom-html-viewport]') + .scrollTo('bottom'); + cy.wrap($viewport).should('have.class', 'active'); + }); + }); }); diff --git a/platform/viewer/cypress/support/commands.js b/platform/viewer/cypress/support/commands.js index b2a2ba846ea..4fa5be9eb4f 100644 --- a/platform/viewer/cypress/support/commands.js +++ b/platform/viewer/cypress/support/commands.js @@ -328,6 +328,21 @@ Cypress.Commands.add('percyCanvasSnapshot', (name, options = {}) => { }); }); +Cypress.Commands.add('setLayout', (columns = 1, rows = 1) => { + cy.get('.toolbar-button-label') + .contains('Layout') + .click(); + + cy.get('.layoutChooser') + .find('tr') + .eq(rows - 1) + .find('td') + .eq(columns - 1) + .click(); + + cy.wait(1000); +}); + function convertCanvas(documentClone) { documentClone .querySelectorAll('canvas') @@ -364,4 +379,4 @@ function canvasToImage(selectorOrEl) { canvas.setAttribute('data-percy-canvas', true); canvas.parentElement.appendChild(image); canvas.style = 'display: none'; -} \ No newline at end of file +}