Segmentation UI for VTKjs (#1685)
* 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
1 parent
19a8e71317
commit
42c22df1b6
22 files changed
+516
-173
No files matched your search
@@ -50,7 +50,7 @@
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"react-vtkjs-viewport": "^0.8.3"
|
||||
"react-vtkjs-viewport": "^0.9.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ohif/core": "^2.9.3",
|
||||
|
||||
@@ -32,16 +32,16 @@ class LoadingIndicator extends PureComponent {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="imageViewerLoadingIndicator loadingIndicator">
|
||||
<div className="indicatorContents">
|
||||
<p>
|
||||
{this.props.t('Reformatting')}...
|
||||
<i className="fa fa-spin fa-circle-o-notch fa-fw" />
|
||||
{percComplete}
|
||||
</p>
|
||||
<div className="imageViewerLoadingIndicator loadingIndicator">
|
||||
<div className="indicatorContents">
|
||||
<p>
|
||||
{this.props.t('Loading...')}
|
||||
<i className="fa fa-spin fa-circle-o-notch fa-fw" />
|
||||
{percComplete}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -49,7 +49,7 @@ class OHIFVTKViewport extends Component {
|
||||
state = {
|
||||
volumes: null,
|
||||
paintFilterLabelMapImageData: null,
|
||||
paintFilterBackgroundImageData: null,
|
||||
paintFilterBackgroundImageData: null
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
@@ -69,7 +69,7 @@ class OHIFVTKViewport extends Component {
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
onScroll: () => {},
|
||||
onScroll: () => { },
|
||||
};
|
||||
|
||||
static id = 'OHIFVTKViewport';
|
||||
@@ -156,6 +156,10 @@ class OHIFVTKViewport extends Component {
|
||||
const { activeLabelmapIndex } = brushStackState;
|
||||
const labelmap3D = brushStackState.labelmaps3D[activeLabelmapIndex];
|
||||
|
||||
this.segmentsDefaultProperties = labelmap3D.segmentsHidden.map(isHidden => {
|
||||
return { visible: !isHidden };
|
||||
});
|
||||
|
||||
const vtkLabelmapID = `${firstImageId}_${activeLabelmapIndex}`;
|
||||
|
||||
if (labelmapCache[vtkLabelmapID]) {
|
||||
@@ -339,13 +343,13 @@ class OHIFVTKViewport extends Component {
|
||||
this.setStateFromProps();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const { displaySet } = this.props.viewportData;
|
||||
const prevDisplaySet = prevProps.viewportData.displaySet;
|
||||
|
||||
if (
|
||||
displaySet.displaySetInstanceUID !==
|
||||
prevDisplaySet.displaySetInstanceUID ||
|
||||
prevDisplaySet.displaySetInstanceUID ||
|
||||
displaySet.SOPInstanceUID !== prevDisplaySet.SOPInstanceUID ||
|
||||
displaySet.frameIndex !== prevDisplaySet.frameIndex
|
||||
) {
|
||||
@@ -405,10 +409,6 @@ class OHIFVTKViewport extends Component {
|
||||
|
||||
const style = { width: '100%', height: '100%', position: 'relative' };
|
||||
|
||||
const visible = configuration.renderFill || configuration.renderOutline;
|
||||
const opacity = configuration.fillAlpha;
|
||||
const outlineThickness = configuration.outlineThickness;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={style}>
|
||||
@@ -428,10 +428,14 @@ class OHIFVTKViewport extends Component {
|
||||
dataDetails={this.state.dataDetails}
|
||||
labelmapRenderingOptions={{
|
||||
colorLUT: this.state.labelmapColorLUT,
|
||||
globalOpacity: opacity,
|
||||
visible,
|
||||
outlineThickness,
|
||||
renderOutline: true,
|
||||
globalOpacity: configuration.fillAlpha,
|
||||
visible: configuration.renderFill,
|
||||
outlineThickness: configuration.outlineWidth,
|
||||
renderOutline: configuration.renderOutline,
|
||||
segmentsDefaultProperties: this.segmentsDefaultProperties,
|
||||
onNewSegmentationRequested: () => {
|
||||
this.setStateFromProps();
|
||||
}
|
||||
}}
|
||||
onScroll={this.props.onScroll}
|
||||
/>
|
||||
|
||||
@@ -5,10 +5,13 @@ import {
|
||||
vtkInteractorStyleMPRRotate,
|
||||
vtkSVGCrosshairsWidget,
|
||||
} from 'react-vtkjs-viewport';
|
||||
|
||||
import { getImageData } from 'react-vtkjs-viewport';
|
||||
import { vec3 } from 'gl-matrix';
|
||||
import setMPRLayout from './utils/setMPRLayout.js';
|
||||
import setViewportToVTK from './utils/setViewportToVTK.js';
|
||||
import Constants from 'vtk.js/Sources/Rendering/Core/VolumeMapper/Constants.js';
|
||||
import OHIFVTKViewport from './OHIFVTKViewport';
|
||||
import vtkCoordinate from 'vtk.js/Sources/Rendering/Core/Coordinate';
|
||||
|
||||
const { BlendMode } = Constants;
|
||||
|
||||
@@ -34,7 +37,6 @@ const commandsModule = ({ commandsManager }) => {
|
||||
}
|
||||
|
||||
const displaySet = viewportSpecificData[activeViewportIndex];
|
||||
|
||||
let api;
|
||||
if (!api) {
|
||||
try {
|
||||
@@ -99,6 +101,20 @@ const commandsModule = ({ commandsManager }) => {
|
||||
});
|
||||
}
|
||||
|
||||
const _convertModelToWorldSpace = (position, vtkImageData) => {
|
||||
const indexToWorld = vtkImageData.getIndexToWorld();
|
||||
const pos = vec3.create();
|
||||
|
||||
position[0] += 0.5; /* Move to the centre of the voxel. */
|
||||
position[1] += 0.5; /* Move to the centre of the voxel. */
|
||||
position[2] += 0.5; /* Move to the centre of the voxel. */
|
||||
|
||||
vec3.set(pos, position[0], position[1], position[2]);
|
||||
vec3.transformMat4(pos, pos, indexToWorld);
|
||||
|
||||
return pos;
|
||||
};
|
||||
|
||||
const actions = {
|
||||
getVtkApis: ({ index }) => {
|
||||
return apis[index];
|
||||
@@ -124,6 +140,119 @@ const commandsModule = ({ commandsManager }) => {
|
||||
|
||||
_setView(api, [0, 1, 0], [0, 0, 1]);
|
||||
},
|
||||
requestNewSegmentation: async ({ viewports }) => {
|
||||
const allViewports = Object.values(viewports.viewportSpecificData);
|
||||
const promises = allViewports.map(async (viewport, viewportIndex) => {
|
||||
let api = apis[viewportIndex];
|
||||
|
||||
if (!api) {
|
||||
api = await _getActiveViewportVTKApi(viewports);
|
||||
apis[viewportIndex] = api;
|
||||
}
|
||||
|
||||
api.requestNewSegmentation();
|
||||
api.updateImage();
|
||||
});
|
||||
await Promise.all(promises);
|
||||
},
|
||||
jumpToSlice: async ({
|
||||
viewports,
|
||||
studies,
|
||||
StudyInstanceUID,
|
||||
displaySetInstanceUID,
|
||||
SOPClassUID,
|
||||
SOPInstanceUID,
|
||||
segmentNumber,
|
||||
frameIndex,
|
||||
frame,
|
||||
done = () => { }
|
||||
}) => {
|
||||
let api = apis[viewports.activeViewportIndex];
|
||||
|
||||
if (!api) {
|
||||
api = await _getActiveViewportVTKApi(viewports);
|
||||
apis[viewports.activeViewportIndex] = api;
|
||||
}
|
||||
|
||||
const stack = OHIFVTKViewport.getCornerstoneStack(
|
||||
studies,
|
||||
StudyInstanceUID,
|
||||
displaySetInstanceUID,
|
||||
SOPClassUID,
|
||||
SOPInstanceUID,
|
||||
frameIndex,
|
||||
);
|
||||
|
||||
const imageDataObject = getImageData(stack.imageIds, displaySetInstanceUID);
|
||||
|
||||
let pixelIndex = 0;
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
let count = 0;
|
||||
|
||||
const rows = imageDataObject.dimensions[1];
|
||||
const cols = imageDataObject.dimensions[0];
|
||||
|
||||
for (let j = 0; j < rows; j++) {
|
||||
for (let i = 0; i < cols; i++) {
|
||||
// [i, j] =
|
||||
const pixel = frame.pixelData[pixelIndex];
|
||||
if (pixel === segmentNumber) {
|
||||
x += i;
|
||||
y += j;
|
||||
count++;
|
||||
}
|
||||
pixelIndex++;
|
||||
}
|
||||
}
|
||||
x /= count;
|
||||
y /= count;
|
||||
|
||||
const position = [x, y, frameIndex];
|
||||
const worldPos = _convertModelToWorldSpace(position, imageDataObject.vtkImageData);
|
||||
|
||||
api.svgWidgets.crosshairsWidget.moveCrosshairs(worldPos, apis);
|
||||
done();
|
||||
},
|
||||
setSegmentationConfiguration: async ({
|
||||
viewports,
|
||||
globalOpacity,
|
||||
visible,
|
||||
renderOutline,
|
||||
outlineThickness,
|
||||
}) => {
|
||||
const allViewports = Object.values(viewports.viewportSpecificData);
|
||||
const promises = allViewports.map(async (viewport, viewportIndex) => {
|
||||
let api = apis[viewportIndex];
|
||||
|
||||
if (!api) {
|
||||
api = await _getActiveViewportVTKApi(viewports);
|
||||
apis[viewportIndex] = api;
|
||||
}
|
||||
|
||||
api.setGlobalOpacity(globalOpacity);
|
||||
api.setVisibility(visible);
|
||||
api.setOutlineThickness(outlineThickness);
|
||||
api.setOutlineRendering(renderOutline);
|
||||
api.updateImage();
|
||||
});
|
||||
await Promise.all(promises);
|
||||
},
|
||||
setSegmentConfiguration: async ({ viewports, visible, segmentNumber }) => {
|
||||
const allViewports = Object.values(viewports.viewportSpecificData);
|
||||
const promises = allViewports.map(async (viewport, viewportIndex) => {
|
||||
let api = apis[viewportIndex];
|
||||
|
||||
if (!api) {
|
||||
api = await _getActiveViewportVTKApi(viewports);
|
||||
apis[viewportIndex] = api;
|
||||
}
|
||||
|
||||
api.setSegmentVisibility(segmentNumber, visible);
|
||||
api.updateImage();
|
||||
});
|
||||
await Promise.all(promises);
|
||||
},
|
||||
enableRotateTool: () => {
|
||||
apis.forEach(api => {
|
||||
const istyle = vtkInteractorStyleMPRRotate.newInstance();
|
||||
@@ -280,6 +409,26 @@ const commandsModule = ({ commandsManager }) => {
|
||||
window.vtkActions = actions;
|
||||
|
||||
const definitions = {
|
||||
requestNewSegmentation: {
|
||||
commandFn: actions.requestNewSegmentation,
|
||||
storeContexts: ['viewports'],
|
||||
options: {},
|
||||
},
|
||||
jumpToSlice: {
|
||||
commandFn: actions.jumpToSlice,
|
||||
storeContexts: ['viewports'],
|
||||
options: {},
|
||||
},
|
||||
setSegmentationConfiguration: {
|
||||
commandFn: actions.setSegmentationConfiguration,
|
||||
storeContexts: ['viewports'],
|
||||
options: {},
|
||||
},
|
||||
setSegmentConfiguration: {
|
||||
commandFn: actions.setSegmentConfiguration,
|
||||
storeContexts: ['viewports'],
|
||||
options: {},
|
||||
},
|
||||
axial: {
|
||||
commandFn: actions.axial,
|
||||
storeContexts: ['viewports'],
|
||||
|
||||
Reference in new issue
Block a user