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

Segmentation UI for VTKjs (#1685)

Browse Source 
* Add single viewport configuration

* Multiple viewport configuration

* Improve performance by using independent set methods

* Add jump to slice command

* Add context configuration

* Cache panel visibility

* Fix sync between vtk and cornerstone

* Remove apis index

* Add approach

* Add loading to update volumes

* Fix broken configuration

* Bump vtk version

* Use loading label

* Update cy tests after vtk loading label changed

* Remove loading for segs
This commit is contained in:
Igor Octaviano authored and GitHub committed 2020-05-06 19:17:44 +02:00
1 parent 19a8e71317
commit 42c22df1b6
22 files changed
+516 -173
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

extensions/dicom-segmentation/package.json
+1
View File
@@ -38,6 +38,7 @@
},
"dependencies": {
"@babel/runtime": "^7.5.5",
"gl-matrix": "^3.3.0",
"react-select": "^3.0.8"
}
}
extensions/dicom-segmentation/src/components/SegmentItem/SegmentItem.js
+6 -1
View File
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { TableListItem, Icon } from '@ohif/ui';
@@ -19,6 +19,11 @@ ColoredCircle.propTypes = {
const SegmentItem = ({ index, label, onClick, itemClass, color, visible = true, onVisibilityChange }) => {
const [isVisible, setIsVisible] = useState(visible);
useEffect(() => {
setIsVisible(visible);
}, [visible]);
return (
<div className="dcmseg-segment-item">
<TableListItem
extensions/dicom-segmentation/src/components/SegmentationPanel/SegmentationPanel.js
+163 -68
View File
@@ -32,7 +32,11 @@ const refreshViewport = () => {
* @param {Array} props.viewports - Viewports data (viewportSpecificData)
* @param {number} props.activeIndex - Active viewport index
* @param {boolean} props.isOpen - Boolean that indicates if the panel is expanded
* @param {Function} props.onSegItemClick - Segment click handler
* @param {Function} props.onSegmentItemClick - Segment click handler
* @param {Function} props.onSegmentVisibilityChange - Segment visibiliy change handler
* @param {Function} props.onConfigurationChange - Configuration change handler
* @param {Function} props.activeContexts - List of active application contexts
* @param {Function} props.contexts - List of available application contexts
* @returns component
*/
const SegmentationPanel = ({
@@ -40,25 +44,40 @@ const SegmentationPanel = ({
viewports,
activeIndex,
isOpen,
onSegItemClick,
UINotificationService,
onSegmentItemClick,
onSegmentVisibilityChange,
onConfigurationChange,
onDisplaySetLoadFailure,
onSelectedSegmentationChange,
activeContexts,
contexts,
}) => {
const isVTK = () => activeContexts.includes(contexts.VTK);
const isCornerstone = () => activeContexts.includes(contexts.CORNERSTONE);
/*
* TODO: wrap get/set interactions with the cornerstoneTools
* store with context to make these kind of things less blurry.
*/
const { configuration } = cornerstoneTools.getModule('segmentation');
const DEFAULT_BRUSH_RADIUS = configuration.radius || 10;
/*
* TODO: We shouldn't hardcode brushColor color, in the future
* the SEG may set the colorLUT to whatever it wants.
*/
const [state, setState] = useState({
brushRadius: DEFAULT_BRUSH_RADIUS,
brushColor:
'rgba(221, 85, 85, 1)' /* TODO: We shouldn't hardcode this color, in the future the SEG may set the colorLUT to whatever it wants. */,
'rgba(221, 85, 85, 1)',
selectedSegment: null,
selectedSegmentation: null,
showSegSettings: false,
showSegmentationSettings: false,
brushStackState: null,
labelmapList: [],
segmentList: [],
cachedSegmentsProperties: [],
isLoading: false
});
useEffect(() => {
@@ -75,6 +94,25 @@ const SegmentationPanel = ({
updateState('brushStackState', module.state.series[firstImageId]);
};
/*
* TODO: Improve the way we notify parts of the app that depends on segs to be loaded.
*
* Currently we are using a non-ideal implementation through a custom event to notify the segmentation panel
* or other components that could rely on loaded segmentations that
* the segments were loaded so that e.g. when the user opens the panel
* before the segments are fully loaded, the panel can subscribe to this custom event
* and update itself with the new segments.
*
* This limitation is due to the fact that the cs segmentation module is an object (which will be
* updated after the segments are loaded) that React its not aware of its changes
* because the module object its not passed in to the panel component as prop but accessed externally.
*
* Improving this event approach to something reactive that can be tracked inside the react lifecycle,
* allows us to easily watch the module or the segmentations loading process in any other component
* without subscribing to external events.
*/
document.addEventListener('extensiondicomsegmentationsegloaded', refreshSegmentations);
/*
* These are specific to each element;
* Need to iterate cornerstone-tools tracked enabled elements?
@@ -88,6 +126,7 @@ const SegmentationPanel = ({
);
return () => {
document.removeEventListener('extensiondicomsegmentationsegloaded', refreshSegmentations);
cornerstoneTools.store.state.enabledElements.forEach(enabledElement =>
enabledElement.removeEventListener(
'cornerstonetoolslabelmapmodified',
@@ -95,9 +134,9 @@ const SegmentationPanel = ({
)
);
};
});
}, [activeIndex, viewports]);
useEffect(() => {
const refreshSegmentations = useCallback(() => {
const module = cornerstoneTools.getModule('segmentation');
const activeViewport = viewports[activeIndex];
const studyMetadata = studyMetadataManager.get(
@@ -107,7 +146,6 @@ const SegmentationPanel = ({
activeViewport.displaySetInstanceUID
);
const brushStackState = module.state.series[firstImageId];
if (brushStackState) {
const labelmap3D =
brushStackState.labelmaps3D[brushStackState.activeLabelmapIndex];
@@ -136,19 +174,20 @@ const SegmentationPanel = ({
}));
}
}, [
studies,
viewports,
activeIndex,
getLabelmapList,
getSegmentList,
state.selectedSegmentation,
state.isLoading
]);
useEffect(() => {
refreshSegmentations();
}, [viewports, activeIndex, state.selectedSegmentation, activeContexts, state.isLoading]);
/* Handle open/closed panel behaviour */
useEffect(() => {
setState(state => ({
...state,
showSegSettings: state.showSegSettings && !isOpen,
showSegmentationSettings: state.showSegmentationSettings && !isOpen,
}));
}, [isOpen]);
@@ -183,7 +222,8 @@ const SegmentationPanel = ({
displaySet,
firstImageId,
brushStackState.activeLabelmapIndex,
UINotificationService
() => onSelectedSegmentationChange(),
onDisplaySetLoadFailure
);
updateState('selectedSegmentation', activatedLabelmapIndex);
},
@@ -262,65 +302,104 @@ const SegmentationPanel = ({
: prev;
});
const enabledElements = cornerstone.getEnabledElements();
const element = enabledElements[activeIndex].element;
const toolState = cornerstoneTools.getToolState(element, 'stack');
if (isCornerstone()) {
const enabledElements = cornerstone.getEnabledElements();
const element = enabledElements[activeIndex].element;
const toolState = cornerstoneTools.getToolState(element, 'stack');
if (!toolState) {
return;
if (!toolState) {
return;
}
const imageIds = toolState.data[0].imageIds;
const imageId = imageIds[closest];
const frameIndex = imageIds.indexOf(imageId);
const SOPInstanceUID = cornerstone.metaData.get(
'SOPInstanceUID',
imageId
);
const StudyInstanceUID = cornerstone.metaData.get(
'StudyInstanceUID',
imageId
);
onSegmentItemClick({
StudyInstanceUID,
SOPInstanceUID,
frameIndex,
activeViewportIndex: activeIndex,
});
}
const imageIds = toolState.data[0].imageIds;
const imageId = imageIds[closest];
const frameIndex = imageIds.indexOf(imageId);
if (isVTK()) {
const activeViewport = viewports[activeIndex];
const studyMetadata = studyMetadataManager.get(
activeViewport.StudyInstanceUID
);
const allDisplaySets = studyMetadata.getDisplaySets();
const currentDisplaySet = allDisplaySets.find(
displaySet =>
displaySet.displaySetInstanceUID ===
activeViewport.displaySetInstanceUID
);
const SOPInstanceUID = cornerstone.metaData.get(
'SOPInstanceUID',
imageId
);
const StudyInstanceUID = cornerstone.metaData.get(
'StudyInstanceUID',
imageId
);
const frame = labelmap3D.labelmaps2D[closest];
onSegItemClick({
StudyInstanceUID,
SOPInstanceUID,
frameIndex,
activeViewportIndex: activeIndex,
});
onSegmentItemClick({
studies,
StudyInstanceUID: currentDisplaySet.StudyInstanceUID,
displaySetInstanceUID: currentDisplaySet.displaySetInstanceUID,
SOPClassUID: viewports[activeIndex].sopClassUIDs[0],
SOPInstanceUID: currentDisplaySet.SOPInstanceUID,
segmentNumber,
frameIndex: closest,
frame,
});
}
};
const enabledElements = cornerstone.getEnabledElements();
const enabledElementViewport = enabledElements[activeIndex];
const isSegmentVisible = () => {
return !labelmap3D.segmentsHidden[segmentIndex];
};
let isVisible = true;
if (enabledElementViewport) {
const element = enabledElementViewport.element;
const module = cornerstoneTools.getModule('segmentation');
isVisible = module.getters.isSegmentVisible(
element,
segmentNumber,
brushStackState.activeLabelmapIndex
);
const toggleSegmentVisibility = () => {
const segmentsHidden = labelmap3D.segmentsHidden;
segmentsHidden[segmentIndex] = !segmentsHidden[segmentIndex];
return !segmentsHidden[segmentIndex];
};
const cachedSegmentProperties = state.cachedSegmentsProperties[segmentNumber];
let visible = isSegmentVisible();
if (cachedSegmentProperties && cachedSegmentProperties.visible !== visible) {
toggleSegmentVisibility();
}
segmentList.push(
<SegmentItem
key={segmentNumber}
itemClass={`segment-item ${sameSegment && 'selected'}`}
onClick={setCurrentSelectedSegment}
onClick={() => setCurrentSelectedSegment()}
label={segmentLabel}
index={segmentNumber}
color={color}
visible={isVisible}
onVisibilityChange={() => {
const element = enabledElements[activeIndex].element;
module.setters.toggleSegmentVisibility(
element,
segmentNumber,
brushStackState.activeLabelmapIndex
);
visible={visible}
onVisibilityChange={newVisibility => {
if (isCornerstone()) {
const enabledElements = cornerstone.getEnabledElements();
const element = enabledElements[activeIndex].element;
module.setters.toggleSegmentVisibility(
element,
segmentNumber,
brushStackState.activeLabelmapIndex
);
}
if (isVTK()) {
onSegmentVisibilityChange(segmentNumber, newVisibility);
}
updateCachedSegmentsProperties(segmentNumber, { visible: newVisibility });
refreshViewport();
}}
/>
@@ -336,9 +415,25 @@ const SegmentationPanel = ({
* Show default name
*/
},
[activeIndex, onSegItemClick, state.selectedSegment]
[activeIndex, onSegmentItemClick, state.selectedSegment, state.isLoading]
);
const updateCachedSegmentsProperties = (segmentNumber, properties) => {
const segmentsProperties = state.cachedSegmentsProperties;
const segmentProperties = state.cachedSegmentsProperties[segmentNumber];
segmentsProperties[segmentNumber] =
segmentProperties ?
{ ...segmentProperties, ...properties } :
properties;
updateState('cachedSegmentsProperties', segmentsProperties);
};
useEffect(() => {
updateState('cachedSegmentsProperties', []);
}, [activeContexts]);
const updateState = (field, value) => {
setState(state => ({ ...state, [field]: value }));
};
@@ -387,7 +482,6 @@ const SegmentationPanel = ({
};
const updateConfiguration = newConfiguration => {
/* Supported configuration */
configuration.renderFill = newConfiguration.renderFill;
configuration.renderOutline = newConfiguration.renderOutline;
configuration.shouldRenderInactiveLabelmaps =
@@ -397,14 +491,17 @@ const SegmentationPanel = ({
configuration.outlineWidth = newConfiguration.outlineWidth;
configuration.fillAlphaInactive = newConfiguration.fillAlphaInactive;
configuration.outlineAlphaInactive = newConfiguration.outlineAlphaInactive;
onConfigurationChange(newConfiguration);
refreshViewport();
};
if (state.showSegSettings) {
const disabledConfigurationFields = ['outlineAlpha', 'shouldRenderInactiveLabelmaps'];
if (state.showSegmentationSettings) {
return (
<SegmentationSettings
disabledFields={isVTK() ? disabledConfigurationFields : []}
configuration={configuration}
onBack={() => updateState('showSegSettings', false)}
onBack={() => updateState('showSegmentationSettings', false)}
onChange={updateConfiguration}
/>
);
@@ -416,7 +513,7 @@ const SegmentationPanel = ({
name="cog"
width="25px"
height="25px"
onClick={() => updateState('showSegSettings', true)}
onClick={() => updateState('showSegmentationSettings', true)}
/>
{false && (
<form className="selector-form">
@@ -525,7 +622,8 @@ const _setActiveLabelmap = async (
displaySet,
firstImageId,
activeLabelmapIndex,
UINotificationService
callback = () => { },
onDisplaySetLoadFailure
) => {
if (displaySet.labelmapIndex === activeLabelmapIndex) {
log.warn(`${activeLabelmapIndex} is already the active labelmap`);
@@ -539,12 +637,7 @@ const _setActiveLabelmap = async (
const loadPromise = displaySet.load(viewportSpecificData, studies);
loadPromise.catch(error => {
UINotificationService.show({
title: 'DICOM Segmentation Loader',
message: error.message,
type: 'error',
autoClose: false,
});
onDisplaySetLoadFailure(error);
// Return old index.
return activeLabelmapIndex;
@@ -559,6 +652,8 @@ const _setActiveLabelmap = async (
refreshViewport();
callback();
return displaySet.labelmapIndex;
};
extensions/dicom-segmentation/src/components/SegmentationSettings/SegmentationSettings.js
+26 -22
View File
@@ -4,7 +4,7 @@ import { Range } from '@ohif/ui';
import './SegmentationSettings.css';
const SegmentationSettings = ({ configuration, onBack, onChange }) => {
const SegmentationSettings = ({ configuration, onBack, onChange, disabledFields = [] }) => {
const [state, setState] = useState({
renderFill: configuration.renderFill,
renderOutline: configuration.renderOutline,
@@ -70,28 +70,32 @@ const SegmentationSettings = ({ configuration, onBack, onChange }) => {
/>
{state.renderOutline && (
<>
<CustomRange
value={state.outlineAlpha * 100}
label="Opacity"
showPercentage
step={1}
min={0}
max={100}
onChange={event => save('outlineAlpha', toFloat(event.target.value))}
/>
<CustomRange
value={state.outlineWidth}
label="Width"
showValue
step={1}
min={0}
max={5}
onChange={event => save('outlineWidth', parseInt(event.target.value))}
/>
{!disabledFields.includes('outlineAlpha') && (
<CustomRange
value={state.outlineAlpha * 100}
label="Opacity"
showPercentage
step={1}
min={0}
max={100}
onChange={event => save('outlineAlpha', toFloat(event.target.value))}
/>
)}
{!disabledFields.includes('outlineWidth') && (
<CustomRange
value={state.outlineWidth}
label="Width"
showValue
step={1}
min={0}
max={5}
onChange={event => save('outlineWidth', parseInt(event.target.value))}
/>
)}
</>
)}
</div>
{(state.renderFill || state.renderOutline) && (
{(state.renderFill || state.renderOutline) && !disabledFields.includes('shouldRenderInactiveLabelmaps') && (
<div
className="settings-group"
style={{ marginBottom: state.shouldRenderInactiveLabelmaps ? 15 : 0 }}
@@ -103,7 +107,7 @@ const SegmentationSettings = ({ configuration, onBack, onChange }) => {
/>
{state.shouldRenderInactiveLabelmaps && (
<>
{state.renderFill && (
{state.renderFill && !disabledFields.includes('fillAlphaInactive') && (
<CustomRange
label="Fill Opacity"
showPercentage
@@ -114,7 +118,7 @@ const SegmentationSettings = ({ configuration, onBack, onChange }) => {
onChange={event => save('fillAlphaInactive', toFloat(event.target.value))}
/>
)}
{state.renderOutline && (
{state.renderOutline && !disabledFields.includes('outlineAlphaInactive') && (
<CustomRange
label="Outline Opacity"
showPercentage
extensions/dicom-segmentation/src/index.js
+43 -6
View File
@@ -23,19 +23,56 @@ export default {
getToolbarModule({ servicesManager }) {
return toolbarModule;
},
getPanelModule({ commandsManager, servicesManager }) {
getPanelModule({ commandsManager, api, servicesManager }) {
const { UINotificationService } = servicesManager;
const ExtendedSegmentationPanel = props => {
const segItemClickHandler = segData => {
commandsManager.runCommand('jumpToImage', segData);
const { activeContexts } = api.hooks.useAppContext();
const onDisplaySetLoadFailureHandler = error => {
UINotificationService.show({
title: 'DICOM Segmentation Loader',
message: error.message,
type: 'error',
autoClose: false,
});
};
const { UINotificationService } = servicesManager.services;
const segmentItemClickHandler = data => {
commandsManager.runCommand('jumpToImage', data);
commandsManager.runCommand('jumpToSlice', data);
};
const onSegmentVisibilityChangeHandler = (segmentNumber, visible) => {
commandsManager.runCommand('setSegmentConfiguration', {
segmentNumber,
visible
});
};
const onConfigurationChangeHandler = configuration => {
commandsManager.runCommand('setSegmentationConfiguration', {
globalOpacity: configuration.fillAlpha,
outlineThickness: configuration.outlineWidth,
renderOutline: configuration.renderOutline,
visible: configuration.renderFill
});
};
const onSelectedSegmentationChangeHandler = () => {
commandsManager.runCommand('requestNewSegmentation');
};
return (
<SegmentationPanel
{...props}
onSegItemClick={segItemClickHandler}
UINotificationService={UINotificationService}
activeContexts={activeContexts}
contexts={api.contexts}
onSegmentItemClick={segmentItemClickHandler}
onSegmentVisibilityChange={onSegmentVisibilityChangeHandler}
onConfigurationChange={onConfigurationChangeHandler}
onSelectedSegmentationChange={onSelectedSegmentationChangeHandler}
onDisplaySetLoadFailure={onDisplaySetLoadFailureHandler}
/>
);
};
extensions/dicom-segmentation/src/loadSegmentation.js
+21
View File
@@ -63,6 +63,27 @@ export default async function loadSegmentation(
segDisplaySet.labelmapIndex = labelmapIndex;
/*
* TODO: Improve the way we notify parts of the app that depends on segs to be loaded.
*
* Currently we are using a non-ideal implementation through a custom event to notify the segmentation panel
* or other components that could rely on loaded segmentations that
* the segments were loaded so that e.g. when the user opens the panel
* before the segments are fully loaded, the panel can subscribe to this custom event
* and update itself with the new segments.
*
* This limitation is due to the fact that the cs segmentation module is an object (which will be
* updated after the segments are loaded) that React its not aware of its changes
* because the module object its not passed in to the panel component as prop but accessed externally.
*
* Improving this event approach to something reactive that can be tracked inside the react lifecycle,
* allows us to easily watch the module or the segmentations loading process in any other component
* without subscribing to external events.
*/
console.log('Segmentation loaded.');
const event = new CustomEvent('extensiondicomsegmentationsegloaded');
document.dispatchEvent(event);
resolve(labelmapIndex);
});
}