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 (