TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add viewport overlays to microscopy mode (#4776)

Browse Source
This commit is contained in:
Pedro H. Köhler 2025-02-11 14:39:45 -03:00 committed by GitHub
parent 5043ea3260
commit 084a10f783
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 289 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
extensions/dicom-microscopy/src/DicomMicroscopyViewport.tsx
View File

@ -1,101 +1,50 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { cleanDenaturalizedDataset } from '@ohif/extension-default';
import './DicomMicroscopyViewport.css';
import ViewportOverlay from './components/ViewportOverlay';
import getDicomWebClient from './utils/dicomWebClient';
import dcmjs from 'dcmjs';
import MicroscopyService from './services/MicroscopyService';
import { CustomizationService } from '@ohif/core';
import { useSystem } from '@ohif/core';
class DicomMicroscopyViewport extends Component {
state = {
error: null as any,
isLoaded: false,
};
function DicomMicroscopyViewport({
activeViewportId,
setViewportActive,
displaySets,
viewportId,
dataSource,
resizeRef,
}: {
activeViewportId: string;
setViewportActive: Function;
displaySets: any[];
viewportId: string;
dataSource: any;
resizeRef: any;
}) {
const { servicesManager, extensionManager } = useSystem();
const [isLoaded, setIsLoaded] = useState(false);
const [viewer, setViewer] = useState(null);
const [managedViewer, setManagedViewer] = useState(null);
const overlayElement = useRef();
const container = useRef();
const { microscopyService, customizationService } = servicesManager.services;
microscopyService: MicroscopyService;
customizationService: CustomizationService;
viewer: any = null; // dicom-microscopy-viewer instance
managedViewer: any = null; // managed wrapper of microscopy-dicom extension
container = React.createRef();
overlayElement = React.createRef();
constructor(props: any) {
super(props);
const { microscopyService, customizationService } = this.props.servicesManager.services;
this.microscopyService = microscopyService;
this.customizationService = customizationService;
}
static propTypes = {
viewportData: PropTypes.object,
activeViewportId: PropTypes.string,
setViewportActive: PropTypes.func,
// props from OHIF Viewport Grid
displaySets: PropTypes.array,
viewportId: PropTypes.string,
viewportLabel: PropTypes.string,
dataSource: PropTypes.object,
viewportOptions: PropTypes.object,
displaySetOptions: PropTypes.array,
// other props from wrapping component
servicesManager: PropTypes.object,
extensionManager: PropTypes.object,
commandsManager: PropTypes.object,
resizeRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
};
/**
* Get the nearest ROI from the mouse click point
*
* @param event
* @param autoselect
* @returns
*/
getNearbyROI(event: Event, autoselect = true) {
const symbols = Object.getOwnPropertySymbols(this.viewer);
const _drawingSource = symbols.find(p => p.description === 'drawingSource');
const _pyramid = symbols.find(p => p.description === 'pyramid');
const _map = symbols.find(p => p.description === 'map');
const _affine = symbols.find(p => p.description === 'affine');
const feature = this.viewer[_drawingSource].getClosestFeatureToCoordinate(
this.viewer[_map].getEventCoordinate(event)
);
if (!feature) {
return null;
}
const roiAnnotation = this.viewer._getROIFromFeature(
feature,
this.viewer[_pyramid].metadata,
this.viewer[_affine]
);
if (roiAnnotation && autoselect) {
this.microscopyService.selectAnnotation(roiAnnotation);
}
return roiAnnotation;
}
const overlayData = customizationService.getCustomization('microscopyViewport.overlay');
// install the microscopy renderer into the web page.
// you should only do this once.
async installOpenLayersRenderer(container, displaySet) {
const installOpenLayersRenderer = useCallback(
async (container, displaySet) => {
const loadViewer = async metadata => {
const dicomMicroscopyModule = await this.microscopyService.importDicomMicroscopyViewer();
const dicomMicroscopyModule = await microscopyService.importDicomMicroscopyViewer();
const { viewer: DicomMicroscopyViewer, metadata: metadataUtils } = dicomMicroscopyModule;
const microscopyViewer = DicomMicroscopyViewer.VolumeImageViewer;
const client = getDicomWebClient({
extensionManager: this.props.extensionManager,
servicesManager: this.props.servicesManager,
extensionManager,
servicesManager,
});
// Parse, format, and filter metadata
@ -152,7 +101,7 @@ class DicomMicroscopyViewport extends Component {
{
StudyInstanceUID: m.StudyInstanceUID,
SeriesInstanceUID: m.SeriesInstanceUID,
dataSourceConfig: this.props.dataSource.getConfig(),
dataSourceConfig: dataSource.getConfig(),
}
);
if (!inst['00480105']) {
@ -188,36 +137,39 @@ class DicomMicroscopyViewport extends Component {
controls: ['overview', 'position'],
};
this.viewer = new microscopyViewer(options);
const viewer = new microscopyViewer(options);
if (this.overlayElement && this.overlayElement.current && this.viewer.addViewportOverlay) {
this.viewer.addViewportOverlay({
element: this.overlayElement.current,
if (overlayElement && overlayElement.current && viewer.addViewportOverlay) {
viewer.addViewportOverlay({
element: overlayElement.current,
coordinates: [0, 0], // TODO: dicom-microscopy-viewer documentation says this can be false to be automatically, but it is not.
navigate: true,
className: 'OpenLayersOverlay',
});
}
this.viewer.render({ container });
viewer.render({ container });
const { StudyInstanceUID, SeriesInstanceUID } = displaySet;
this.managedViewer = this.microscopyService.addViewer(
this.viewer,
this.props.viewportId,
const managedViewer = microscopyService.addViewer(
viewer,
viewportId,
container,
StudyInstanceUID,
SeriesInstanceUID
);
this.managedViewer.addContextMenuCallback((event: Event) => {
managedViewer.addContextMenuCallback((event: Event) => {
// TODO: refactor this after Bill's changes on ContextMenu feature get merged
// const roiAnnotationNearBy = this.getNearbyROI(event);
});
setViewer(viewer);
setManagedViewer(managedViewer);
};
this.microscopyService.clearAnnotations();
microscopyService.clearAnnotations();
let smDisplaySet = displaySet;
if (displaySet.Modality === 'SR') {
@ -231,49 +183,39 @@ class DicomMicroscopyViewport extends Component {
if (displaySet.Modality === 'SR') {
displaySet.load(smDisplaySet);
}
}
},
[dataSource, extensionManager, microscopyService, servicesManager, viewportId]
);
componentDidMount() {
const { displaySets, viewportOptions } = this.props;
// Todo-rename: this is always getting the 0
useEffect(() => {
const displaySet = displaySets[0];
this.installOpenLayersRenderer(this.container.current, displaySet).then(() => {
this.setState({ isLoaded: true });
installOpenLayersRenderer(container.current, displaySet).then(() => {
setIsLoaded(true);
});
}
componentDidUpdate(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void {
if (this.managedViewer && prevProps.displaySets !== this.props.displaySets) {
const { displaySets } = this.props;
return () => {
if (viewer) {
microscopyService.removeViewer(viewer);
}
};
}, []);
useEffect(() => {
const displaySet = displaySets[0];
this.microscopyService.clearAnnotations();
microscopyService.clearAnnotations();
// loading SR
if (displaySet.Modality === 'SR') {
const referencedDisplaySet = displaySet.getSourceDisplaySet();
displaySet.load(referencedDisplaySet);
}
}
}
}, [managedViewer, displaySets, microscopyService]);
componentWillUnmount() {
this.microscopyService.removeViewer(this.viewer);
}
setViewportActiveHandler = () => {
const { setViewportActive, viewportId, activeViewportId } = this.props;
if (viewportId !== activeViewportId) {
setViewportActive(viewportId);
}
};
render() {
const style = { width: '100%', height: '100%' };
const displaySet = this.props.displaySets[0];
const displaySet = displaySets[0];
const firstInstance = displaySet.firstInstance || displaySet.instance;
const LoadingIndicatorProgress = this.customizationService.getCustomization(
const LoadingIndicatorProgress = customizationService.getCustomization(
'ui.loadingIndicatorProgress'
);
@ -281,13 +223,18 @@ class DicomMicroscopyViewport extends Component {
<div
className={'DicomMicroscopyViewer'}
style={style}
onClick={this.setViewportActiveHandler}
onClick={() => {
if (viewportId !== activeViewportId) {
setViewportActive(viewportId);
}
}}
>
<div style={{ ...style, display: 'none' }}>
<div style={{ ...style }} ref={this.overlayElement}>
<div style={{ ...style }} ref={overlayElement}>
<div style={{ position: 'relative', height: '100%', width: '100%' }}>
{displaySet && firstInstance.imageId && (
<ViewportOverlay
overlayData={overlayData}
displaySet={displaySet}
instance={displaySet.instance}
metadata={displaySet.metadata}
@ -296,23 +243,16 @@ class DicomMicroscopyViewport extends Component {
</div>
</div>
</div>
{this.state.error ? (
<h2>{JSON.stringify(this.state.error)}</h2>
) : (
<div
style={style}
ref={(ref: any) => {
this.container.current = ref;
this.props.resizeRef.current = ref;
container.current = ref;
resizeRef.current = ref;
}}
/>
)}
{this.state.isLoaded ? null : (
<LoadingIndicatorProgress className={'h-full w-full bg-black'} />
)}
{isLoaded ? null : <LoadingIndicatorProgress className={'h-full w-full bg-black'} />}
</div>
);
}
}
export default DicomMicroscopyViewport;

18
extensions/dicom-microscopy/src/components/ViewportOverlay/index.tsx
View File

@ -24,20 +24,18 @@ interface OverlayItem {
* @param {*} extensionManager is used to load the image data.
* @returns
*/
export const generateFromConfig = ({
export const generateFromConfig = ({ config, overlayData, ...props }) => {
const {
topLeft = [],
topRight = [],
bottomLeft = [],
bottomRight = [],
itemGenerator = () => {},
}: {
}: {
topLeft?: OverlayItem[];
topRight?: OverlayItem[];
bottomLeft?: OverlayItem[];
bottomRight?: OverlayItem[];
itemGenerator?: (props: any) => any;
}) => {
return (props: any) => {
} = overlayData ?? {};
const topLeftClass = 'top-viewport left-viewport text-primary-light';
const topRightClass = 'top-viewport right-viewport-scrollbar text-primary-light';
const bottomRightClass = 'bottom-viewport right-viewport-scrollbar text-primary-light';
@ -52,10 +50,7 @@ export const generateFromConfig = ({
</div>
)}
{topRight && topRight.length > 0 && (
<div
data-cy={'viewport-overlay-top-right'}
className={classnames(overlay, topRightClass)}
>
<div data-cy={'viewport-overlay-top-right'} className={classnames(overlay, topRightClass)}>
{listComponentGenerator({
...props,
list: topRight,
@ -89,7 +84,6 @@ export const generateFromConfig = ({
)}
</>
);
};
};
const itemGenerator = (props: any) => {
@ -123,4 +117,4 @@ const itemGenerator = (props: any) => {
);
};
export default generateFromConfig({});
export default generateFromConfig;

3
extensions/dicom-microscopy/src/index.tsx
View File

@ -83,9 +83,6 @@ const extension: Types.Extensions.Extension = {
return (
<MicroscopyViewport
key={displaySetsKey}
servicesManager={servicesManager}
extensionManager={extensionManager}
commandsManager={commandsManager}
activeViewportId={activeViewportId}
setViewportActive={(viewportId: string) => {
viewportGridService.setActiveViewportId(viewportId);

2
platform/core/src/contextProviders/SystemProvider.tsx
View File

@ -14,7 +14,7 @@ interface SystemContextProviderProps {
const systemContext = createContext(null);
const { Provider } = systemContext;
export const useSystem = () => useContext(systemContext);
export const useSystem = () => useContext<SystemContextProviderProps>(systemContext);
export function SystemContextProvider({
children,