diff --git a/extensions/ohif-dicom-microscopy-extension/package.json b/extensions/ohif-dicom-microscopy-extension/package.json index 987061df2..0ed117f51 100644 --- a/extensions/ohif-dicom-microscopy-extension/package.json +++ b/extensions/ohif-dicom-microscopy-extension/package.json @@ -19,9 +19,10 @@ "lint": "eslint -c .eslintrc --fix src && prettier --single-quote --write src/**/*.{js,jsx,json,css}" }, "peerDependencies": { + "ohif-core": "^0.6.0", "react": "^15.0.0 || ^16.0.0", "react-dom": "^15.0.0 || ^16.0.0", - "ohif-core": "^0.6.0" + "react-resize-detector": "^4.2.0" }, "devDependencies": { "@babel/core": "^7.2.2", @@ -81,6 +82,7 @@ "dependencies": { "@babel/runtime": "^7.2.0", "classnames": "^2.2.6", - "dicom-microscopy-viewer": "^0.4.3" + "dicom-microscopy-viewer": "0.5.0", + "lodash.debounce": "^4.0.8" } } diff --git a/extensions/ohif-dicom-microscopy-extension/rollup.config.js b/extensions/ohif-dicom-microscopy-extension/rollup.config.js index 26af06fac..936db101b 100644 --- a/extensions/ohif-dicom-microscopy-extension/rollup.config.js +++ b/extensions/ohif-dicom-microscopy-extension/rollup.config.js @@ -10,6 +10,7 @@ import builtins from 'rollup-plugin-node-builtins'; const globals = { react: 'React', + 'react-resize-detector': 'ReactResizeDetector', 'react-dom': 'ReactDOM', 'ohif-core': 'OHIF' }; @@ -52,6 +53,15 @@ export default { ], '.yalc/dicom-microscopy-viewer/build/dicom-microscopy-viewer.js': [ 'api' + ], + 'node_modules/react-resize-detector/node_modules/prop-types/index.js': [ + 'bool', + 'number', + 'string', + 'shape', + 'func', + 'any', + 'node' ] } }) diff --git a/extensions/ohif-dicom-microscopy-extension/src/DicomMicroscopyViewport.js b/extensions/ohif-dicom-microscopy-extension/src/DicomMicroscopyViewport.js index ec9d12ea6..50ebaf3ac 100644 --- a/extensions/ohif-dicom-microscopy-extension/src/DicomMicroscopyViewport.js +++ b/extensions/ohif-dicom-microscopy-extension/src/DicomMicroscopyViewport.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; - +import ReactResizeDetector from 'react-resize-detector'; import { api } from 'dicom-microscopy-viewer'; +import debounce from 'lodash.debounce'; const microscopyViewer = api.VLWholeSlideMicroscopyImageViewer; @@ -9,10 +10,16 @@ class DicomMicroscopyViewport extends Component { error: null, }; + viewer = null; + constructor(props) { super(props); this.container = React.createRef(); + + this.debouncedResize = debounce(() => { + if (this.viewer) this.viewer.resize(); + }, 100); } // install the microscopy renderer into the web page. @@ -52,17 +59,18 @@ class DicomMicroscopyViewport extends Component { .then(metadata => { metadata = metadata.filter(m => m); - const viewer = new microscopyViewer({ + this.viewer = new microscopyViewer({ client: dicomWebClient, metadata, + retrieveRendered: false }); - viewer.render({ container, retrieveRendered: true }); + this.viewer.render({ container }); }); } componentDidMount() { - const { studies, displaySet } = this.props.viewportData; + const { displaySet } = this.props.viewportData; this.installOpenLayersRenderer(this.container.current, displaySet); } @@ -71,6 +79,13 @@ class DicomMicroscopyViewport extends Component { const style = { width: '100%', height: '100%' }; return (
+ {ReactResizeDetector && ( + + )} {this.state.error ? (

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

) : ( @@ -79,6 +94,10 @@ class DicomMicroscopyViewport extends Component {
); } + + onWindowResize = () => { + this.debouncedResize(); + }; } export default DicomMicroscopyViewport; diff --git a/extensions/ohif-dicom-microscopy-extension/yarn.lock b/extensions/ohif-dicom-microscopy-extension/yarn.lock index 9ce017c17..4a6d6841f 100644 --- a/extensions/ohif-dicom-microscopy-extension/yarn.lock +++ b/extensions/ohif-dicom-microscopy-extension/yarn.lock @@ -1617,10 +1617,10 @@ des.js@^1.0.0: inherits "^2.0.1" minimalistic-assert "^1.0.0" -dicom-microscopy-viewer@^0.4.3: - version "0.4.3" - resolved "https://registry.yarnpkg.com/dicom-microscopy-viewer/-/dicom-microscopy-viewer-0.4.3.tgz#defaa821026765bcd109b97258742df72a9b92bb" - integrity sha512-PjT3qH0hv6dKOQzXFIHw4w/d8QCbiUOJOGZHvAkkRvnjeNRP7/ri8vbFvcSev+nYxKskNb1Tn0xd1+dsDpPGNw== +dicom-microscopy-viewer@0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/dicom-microscopy-viewer/-/dicom-microscopy-viewer-0.5.0.tgz#e4f74261337d8a78d51490af0d17edc63997e619" + integrity sha512-r3BPLBvexv9v/Rr/FBTgXgp7orIFKLWW5uYM6IsYpz36ttU84Edk7Z2GAyk6887QNsfEMLzYV+5ik6HRrMg0cA== dependencies: dicomweb-client "^0.4.2" ol "^5.3.0" @@ -3199,6 +3199,11 @@ lodash.camelcase@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6" +lodash.debounce@^4.0.8: + version "4.0.8" + resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" + integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= + lodash.memoize@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" @@ -3238,6 +3243,7 @@ longest-streak@^2.0.1: loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" + integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== dependencies: js-tokens "^3.0.0 || ^4.0.0"