519 lines
15 KiB
TypeScript
519 lines
15 KiB
TypeScript
import React, { useEffect, useCallback } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
|
|
import { utils } from '@ohif/core';
|
|
import EmptyViewport from './EmptyViewport';
|
|
import classNames from 'classnames';
|
|
|
|
const { isEqualWithin } = utils;
|
|
|
|
const ORIENTATION_MAP = {
|
|
axial: {
|
|
viewPlaneNormal: [0, 0, -1],
|
|
viewUp: [0, -1, 0],
|
|
},
|
|
sagittal: {
|
|
viewPlaneNormal: [1, 0, 0],
|
|
viewUp: [0, 0, 1],
|
|
},
|
|
coronal: {
|
|
viewPlaneNormal: [0, 1, 0],
|
|
viewUp: [0, 0, 1],
|
|
},
|
|
};
|
|
|
|
function ViewerViewportGrid(props) {
|
|
const { servicesManager, viewportComponents, dataSource } = props;
|
|
const [viewportGrid, viewportGridService] = useViewportGrid();
|
|
|
|
const { numCols, numRows, activeViewportIndex, viewports } = viewportGrid;
|
|
|
|
// TODO -> Need some way of selecting which displaySets hit the viewports.
|
|
const {
|
|
displaySetService,
|
|
measurementService,
|
|
hangingProtocolService,
|
|
uiNotificationService,
|
|
} = servicesManager.services;
|
|
|
|
/**
|
|
* This callback runs only after displaySets have changed (created and added or modified)
|
|
*/
|
|
const updateDisplaySetsForViewports = useCallback(
|
|
availableDisplaySets => {
|
|
if (!availableDisplaySets.length) {
|
|
return;
|
|
}
|
|
|
|
const {
|
|
viewportMatchDetails,
|
|
hpAlreadyApplied,
|
|
} = hangingProtocolService.getMatchDetails();
|
|
|
|
if (!viewportMatchDetails.size) {
|
|
return;
|
|
}
|
|
|
|
const gridDisplaySetUIDs = [];
|
|
const blankViewportIndices = [];
|
|
|
|
// Match each viewport individually.
|
|
const numViewports = viewportGridService.getNumViewportPanes();
|
|
|
|
for (
|
|
let viewportIndex = 0;
|
|
viewportIndex < numViewports;
|
|
viewportIndex++
|
|
) {
|
|
const viewportDisplaySetUIDs =
|
|
viewports[viewportIndex]?.displaySetInstanceUIDs ?? [];
|
|
|
|
if (hpAlreadyApplied.get(viewportIndex)) {
|
|
gridDisplaySetUIDs.push(...viewportDisplaySetUIDs);
|
|
continue;
|
|
}
|
|
|
|
// if current viewport doesn't have a match
|
|
if (viewportMatchDetails.get(viewportIndex) === undefined) {
|
|
// if the current viewport is empty/blank
|
|
if (viewportDisplaySetUIDs.length === 0) {
|
|
blankViewportIndices.push(viewportIndex);
|
|
} else {
|
|
gridDisplaySetUIDs.push(...viewportDisplaySetUIDs);
|
|
}
|
|
|
|
continue;
|
|
}
|
|
|
|
const { displaySetsInfo, viewportOptions } = viewportMatchDetails.get(
|
|
viewportIndex
|
|
);
|
|
|
|
const displaySetUIDsToHang = [];
|
|
const displaySetUIDsToHangOptions = [];
|
|
displaySetsInfo.forEach(
|
|
({ displaySetInstanceUID, displaySetOptions }) => {
|
|
if (!displaySetInstanceUID) {
|
|
return;
|
|
}
|
|
|
|
displaySetUIDsToHang.push(displaySetInstanceUID);
|
|
displaySetUIDsToHangOptions.push(displaySetOptions);
|
|
}
|
|
);
|
|
|
|
gridDisplaySetUIDs.push(...displaySetUIDsToHang);
|
|
|
|
viewportGridService.setDisplaySetsForViewport({
|
|
viewportIndex: viewportIndex,
|
|
displaySetInstanceUIDs: displaySetUIDsToHang,
|
|
viewportOptions,
|
|
displaySetOptions: displaySetUIDsToHangOptions,
|
|
});
|
|
|
|
// During setting displaySets for viewport, we need to update the hanging protocol
|
|
// but some viewports contain more than one display set (fusion), and their displaySet
|
|
// will not be available at the time of setting displaySets for viewport. So we need to
|
|
// update the hanging protocol after making sure all the matched display sets are available
|
|
// and set on the viewport
|
|
if (displaySetUIDsToHang.length === displaySetsInfo.length) {
|
|
// The following will set the viewportsDisplaySetsMatched state
|
|
|
|
const suppressEvent = true;
|
|
const applied = true;
|
|
hangingProtocolService.setHangingProtocolAppliedForViewport(
|
|
viewportIndex,
|
|
applied,
|
|
suppressEvent
|
|
);
|
|
}
|
|
}
|
|
|
|
blankViewportIndices.forEach((blankVPIndex: number) => {
|
|
// try to fill the empty viewport with a display set not already in the grid
|
|
const displaySetsNotInGrid = availableDisplaySets.filter(
|
|
displaySet =>
|
|
gridDisplaySetUIDs.indexOf(displaySet.displaySetInstanceUID) ===
|
|
-1 &&
|
|
['SEG', 'SR', 'RTSTRUCT'].indexOf(displaySet.Modality) === -1
|
|
);
|
|
|
|
if (displaySetsNotInGrid.length > 0) {
|
|
const displaySetUIDToAdd =
|
|
displaySetsNotInGrid[0].displaySetInstanceUID;
|
|
gridDisplaySetUIDs.push(displaySetUIDToAdd);
|
|
|
|
viewportGridService.setDisplaySetsForViewport({
|
|
viewportIndex: blankVPIndex,
|
|
displaySetInstanceUIDs: [displaySetUIDToAdd],
|
|
});
|
|
}
|
|
});
|
|
},
|
|
[viewportGrid, numRows, numCols]
|
|
);
|
|
|
|
const _getUpdatedViewports = useCallback(
|
|
(viewportIndex, displaySetInstanceUID) => {
|
|
let updatedViewports = [];
|
|
try {
|
|
updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
|
|
viewportIndex,
|
|
displaySetInstanceUID
|
|
);
|
|
} catch (error) {
|
|
console.warn(error);
|
|
uiNotificationService.show({
|
|
title: 'Drag and Drop',
|
|
message:
|
|
'The selected display sets could not be added to the viewport due to a mismatch in the Hanging Protocol rules.',
|
|
type: 'info',
|
|
duration: 3000,
|
|
});
|
|
}
|
|
|
|
return updatedViewports;
|
|
},
|
|
[hangingProtocolService, uiNotificationService]
|
|
);
|
|
|
|
useEffect(() => {
|
|
const displaySets = displaySetService.getActiveDisplaySets();
|
|
updateDisplaySetsForViewports(displaySets);
|
|
}, [numRows, numCols]);
|
|
|
|
// Layout change based on hanging protocols
|
|
useEffect(() => {
|
|
const { unsubscribe } = hangingProtocolService.subscribe(
|
|
hangingProtocolService.EVENTS.NEW_LAYOUT,
|
|
({ layoutType, numRows, numCols, layoutOptions }) => {
|
|
viewportGridService.setLayout({
|
|
numRows,
|
|
numCols,
|
|
layoutType,
|
|
layoutOptions,
|
|
});
|
|
}
|
|
);
|
|
|
|
return () => {
|
|
unsubscribe();
|
|
};
|
|
}, []);
|
|
|
|
// Using Hanging protocol engine to match the displaySets
|
|
useEffect(() => {
|
|
const { unsubscribe } = hangingProtocolService.subscribe(
|
|
hangingProtocolService.EVENTS.PROTOCOL_CHANGED,
|
|
() => {
|
|
const displaySets = displaySetService.getActiveDisplaySets();
|
|
updateDisplaySetsForViewports(displaySets);
|
|
}
|
|
);
|
|
|
|
return () => {
|
|
unsubscribe();
|
|
};
|
|
}, [viewports]);
|
|
|
|
useEffect(() => {
|
|
const { unsubscribe } = hangingProtocolService.subscribe(
|
|
hangingProtocolService.EVENTS.STAGE_CHANGE,
|
|
() => {
|
|
const displaySets = DisplaySetService.getActiveDisplaySets();
|
|
updateDisplaySetsForViewports(displaySets);
|
|
}
|
|
);
|
|
|
|
return () => {
|
|
unsubscribe();
|
|
};
|
|
}, [viewports]);
|
|
|
|
useEffect(() => {
|
|
const { unsubscribe } = measurementService.subscribe(
|
|
measurementService.EVENTS.JUMP_TO_MEASUREMENT,
|
|
({ viewportIndex, measurement }) => {
|
|
const {
|
|
displaySetInstanceUID: referencedDisplaySetInstanceUID,
|
|
metadata: { viewPlaneNormal },
|
|
} = measurement;
|
|
|
|
// if we already have the displaySet in one of the viewports
|
|
// Todo: handle fusion display sets?
|
|
for (const viewport of viewports) {
|
|
const isMatch = viewport.displaySetInstanceUIDs.includes(
|
|
referencedDisplaySetInstanceUID
|
|
);
|
|
if (isMatch) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
const displaySet = displaySetService.getDisplaySetByUID(
|
|
referencedDisplaySetInstanceUID
|
|
);
|
|
|
|
let imageIndex;
|
|
// jump straight to the initial image index if we can
|
|
if (displaySet.images && measurement.SOPInstanceUID) {
|
|
imageIndex = displaySet.images.findIndex(
|
|
image => image.SOPInstanceUID === measurement.SOPInstanceUID
|
|
);
|
|
}
|
|
|
|
const updatedViewports = _getUpdatedViewports(
|
|
viewportIndex,
|
|
referencedDisplaySetInstanceUID
|
|
);
|
|
|
|
if (!updatedViewports || !updatedViewports.length) {
|
|
return;
|
|
}
|
|
|
|
updatedViewports.forEach(vp => {
|
|
const { orientation, viewportType } = vp.viewportOptions;
|
|
let initialImageOptions;
|
|
|
|
// For initial imageIndex to hang be careful for the volume viewport
|
|
if (viewportType === 'stack') {
|
|
initialImageOptions = {
|
|
index: imageIndex,
|
|
};
|
|
} else if (viewportType === 'volume') {
|
|
// For the volume viewports, be careful to not jump in the viewports
|
|
// that are not in the same orientation.
|
|
// Todo: this doesn't work for viewports that have custom orientation
|
|
// vectors specified
|
|
if (
|
|
orientation &&
|
|
viewPlaneNormal &&
|
|
isEqualWithin(
|
|
ORIENTATION_MAP[orientation]?.viewPlaneNormal,
|
|
viewPlaneNormal
|
|
)
|
|
) {
|
|
initialImageOptions = {
|
|
index: imageIndex,
|
|
};
|
|
}
|
|
}
|
|
|
|
vp.viewportOptions['initialImageOptions'] = initialImageOptions;
|
|
});
|
|
|
|
viewportGridService.setDisplaySetsForViewports(updatedViewports);
|
|
}
|
|
);
|
|
|
|
return () => {
|
|
unsubscribe();
|
|
};
|
|
}, [viewports]);
|
|
|
|
/**
|
|
const onDoubleClick = viewportIndex => {
|
|
// TODO -> Disabled for now.
|
|
// onNewImage on a cornerstone viewport is firing setDisplaySetsForViewport.
|
|
// Which it really really shouldn't. We need a larger fix for jump to
|
|
// measurements and all cornerstone "imageIndex" state to fix this.
|
|
if (cachedLayout) {
|
|
viewportGridService.set({
|
|
numCols: cachedLayout.numCols,
|
|
numRows: cachedLayout.numRows,
|
|
activeViewportIndex: cachedLayout.activeViewportIndex,
|
|
viewports: cachedLayout.viewports,
|
|
cachedLayout: null,
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
const cachedViewports = viewports.map(viewport => {
|
|
return {
|
|
displaySetInstanceUID: viewport.displaySetInstanceUID,
|
|
};
|
|
});
|
|
|
|
viewportGridService.set({
|
|
numCols: 1,
|
|
numRows: 1,
|
|
activeViewportIndex: 0,
|
|
viewports: [
|
|
{
|
|
displaySetInstanceUID: viewports[viewportIndex].displaySetInstanceUID,
|
|
imageIndex: undefined,
|
|
},
|
|
],
|
|
cachedLayout: {
|
|
numCols,
|
|
numRows,
|
|
viewports: cachedViewports,
|
|
activeViewportIndex: viewportIndex,
|
|
},
|
|
});
|
|
};
|
|
*/
|
|
|
|
const onDropHandler = (viewportIndex, { displaySetInstanceUID }) => {
|
|
const updatedViewports = _getUpdatedViewports(
|
|
viewportIndex,
|
|
displaySetInstanceUID
|
|
);
|
|
viewportGridService.setDisplaySetsForViewports(updatedViewports);
|
|
};
|
|
|
|
const getViewportPanes = useCallback(() => {
|
|
const viewportPanes = [];
|
|
|
|
const numViewports = viewportGridService.getNumViewportPanes();
|
|
for (let i = 0; i < numViewports; i++) {
|
|
const viewportIndex = i;
|
|
const isActive = activeViewportIndex === viewportIndex;
|
|
const paneMetadata = viewports[i] || {};
|
|
const {
|
|
displaySetInstanceUIDs,
|
|
viewportOptions,
|
|
displaySetOptions, // array of options for each display set in the viewport
|
|
x: viewportX,
|
|
y: viewportY,
|
|
width: viewportWidth,
|
|
height: viewportHeight,
|
|
viewportLabel,
|
|
} = paneMetadata;
|
|
|
|
const displaySetInstanceUIDsToUse = displaySetInstanceUIDs || [];
|
|
|
|
// This is causing the viewport components re-render when the activeViewportIndex changes
|
|
const displaySets = displaySetInstanceUIDsToUse.map(
|
|
displaySetInstanceUID => {
|
|
return (
|
|
displaySetService.getDisplaySetByUID(displaySetInstanceUID) || {}
|
|
);
|
|
}
|
|
);
|
|
|
|
const ViewportComponent = _getViewportComponent(
|
|
displaySets,
|
|
viewportComponents,
|
|
uiNotificationService
|
|
);
|
|
|
|
// look inside displaySets to see if they need reRendering
|
|
const displaySetsNeedsRerendering = displaySets.some(displaySet => {
|
|
return displaySet.needsRerendering;
|
|
});
|
|
|
|
const onInteractionHandler = event => {
|
|
if (isActive) return;
|
|
|
|
if (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
|
|
viewportGridService.setActiveViewportIndex(viewportIndex);
|
|
};
|
|
|
|
// TEMP -> Double click disabled for now
|
|
// onDoubleClick={() => onDoubleClick(viewportIndex)}
|
|
|
|
viewportPanes[i] = (
|
|
<ViewportPane
|
|
key={viewportIndex}
|
|
acceptDropsFor="displayset"
|
|
onDrop={onDropHandler.bind(null, viewportIndex)}
|
|
onInteraction={onInteractionHandler}
|
|
customStyle={{
|
|
position: 'absolute',
|
|
top: viewportY * 100 + 0.2 + '%',
|
|
left: viewportX * 100 + 0.2 + '%',
|
|
width: viewportWidth * 100 - 0.3 + '%',
|
|
height: viewportHeight * 100 - 0.3 + '%',
|
|
}}
|
|
isActive={isActive}
|
|
>
|
|
<div
|
|
className={classNames('h-full w-full flex flex-col', {
|
|
'pointer-events-none': !isActive,
|
|
})}
|
|
>
|
|
<ViewportComponent
|
|
displaySets={displaySets}
|
|
viewportIndex={viewportIndex}
|
|
viewportLabel={numViewports > 1 ? viewportLabel : ''}
|
|
dataSource={dataSource}
|
|
viewportOptions={viewportOptions}
|
|
displaySetOptions={displaySetOptions}
|
|
needsRerendering={displaySetsNeedsRerendering}
|
|
/>
|
|
</div>
|
|
</ViewportPane>
|
|
);
|
|
}
|
|
|
|
return viewportPanes;
|
|
}, [viewports, activeViewportIndex, viewportComponents, dataSource]);
|
|
|
|
/**
|
|
* Loading indicator until numCols and numRows are gotten from the hangingProtocolService
|
|
*/
|
|
if (!numRows || !numCols) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<ViewportGrid numRows={numRows} numCols={numCols}>
|
|
{/* {ViewportPanes} */}
|
|
{getViewportPanes()}
|
|
</ViewportGrid>
|
|
);
|
|
}
|
|
|
|
ViewerViewportGrid.propTypes = {
|
|
viewportComponents: PropTypes.array.isRequired,
|
|
};
|
|
|
|
ViewerViewportGrid.defaultProps = {
|
|
viewportComponents: [],
|
|
};
|
|
|
|
function _getViewportComponent(
|
|
displaySets,
|
|
viewportComponents,
|
|
uiNotificationService
|
|
) {
|
|
if (!displaySets || !displaySets.length) {
|
|
return EmptyViewport;
|
|
}
|
|
|
|
// Todo: Do we have a viewport that has two different SOPClassHandlerIds?
|
|
const SOPClassHandlerId = displaySets[0].SOPClassHandlerId;
|
|
|
|
for (let i = 0; i < viewportComponents.length; i++) {
|
|
if (!viewportComponents[i]) {
|
|
throw new Error('viewport components not defined');
|
|
}
|
|
if (!viewportComponents[i].displaySetsToDisplay) {
|
|
throw new Error('displaySetsToDisplay is null');
|
|
}
|
|
if (
|
|
viewportComponents[i].displaySetsToDisplay.includes(SOPClassHandlerId)
|
|
) {
|
|
const { component } = viewportComponents[i];
|
|
return component;
|
|
}
|
|
}
|
|
|
|
console.log("Can't show displaySet", SOPClassHandlerId, displaySets[0]);
|
|
uiNotificationService.show({
|
|
title: 'Viewport Not Supported Yet',
|
|
message: `Cannot display SOPClassId of ${displaySets[0].SOPClassUID} yet`,
|
|
type: 'error',
|
|
});
|
|
|
|
return EmptyViewport;
|
|
}
|
|
|
|
export default ViewerViewportGrid;
|