Skip to content

Commit e343517

Browse files
JamesAPettsJamesAPetts
authored
feat: 🎸 Refactor loadImageData for progressive loading
* Make sure examples don't prefetch on index * Improve examples, painting example same WL and orientation. * WL works on SUT for PET. * Refactor loadImageData such that progressive loading is possible. Add api for WL fixes. Update examples to work with changes. * Use PR ##1226 of vtk-js to set the range in loadImageData. * Unbreak examples.
1 parent 82d82d8 commit e343517

14 files changed

+437
-286
lines changed

‎examples/VTKCornerstonePaintingSyncExample.js‎

Lines changed: 63 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ import vtkVolume from 'vtk.js/Sources/Rendering/Core/Volume';
1414
const { EVENTS } = cornerstoneTools;
1515
window.cornerstoneTools = cornerstoneTools;
1616

17+
const voi = {
18+
windowCenter: 35,
19+
windowWidth: 80,
20+
};
21+
1722
function setupSyncedBrush(imageDataObject) {
1823
// Create buffer the size of the 3D volume
1924
const dimensions = imageDataObject.dimensions;
@@ -116,45 +121,60 @@ class VTKCornerstonePaintingSyncExample extends Component {
116121
return cornerstone.loadAndCacheImage(imageId);
117122
});
118123

119-
Promise.all(promises).then(
120-
() => {
121-
const displaySetInstanceUid = '12345';
122-
const cornerstoneViewportData = {
123-
stack: {
124-
imageIds,
125-
currentImageIdIndex: 0,
126-
},
127-
displaySetInstanceUid,
128-
};
129-
130-
const imageDataObject = getImageData(imageIds, displaySetInstanceUid);
131-
const labelMapInputData = setupSyncedBrush(imageDataObject);
132-
133-
this.onMeasurementsChanged = event => {
134-
if (event.type !== EVENTS.LABELMAP_MODIFIED) {
135-
return;
136-
}
137-
138-
labelMapInputData.modified();
139-
140-
this.rerenderAllVTKViewports();
141-
};
142-
143-
loadImageData(imageDataObject).then(() => {
144-
const { actor } = createActorMapper(imageDataObject.vtkImageData);
145-
146-
this.setState({
147-
vtkImageData: imageDataObject.vtkImageData,
148-
volumes: [actor],
149-
cornerstoneViewportData,
150-
labelMapInputData,
151-
});
124+
Promise.all(promises).then(() => {
125+
const displaySetInstanceUid = '12345';
126+
const cornerstoneViewportData = {
127+
stack: {
128+
imageIds,
129+
currentImageIdIndex: 0,
130+
},
131+
displaySetInstanceUid,
132+
};
133+
134+
const imageDataObject = getImageData(imageIds, displaySetInstanceUid);
135+
const labelMapInputData = setupSyncedBrush(imageDataObject);
136+
137+
this.onMeasurementsChanged = event => {
138+
if (event.type !== EVENTS.LABELMAP_MODIFIED) {
139+
return;
140+
}
141+
142+
labelMapInputData.modified();
143+
144+
this.rerenderAllVTKViewports();
145+
};
146+
147+
loadImageData(imageDataObject);
148+
Promise.all(imageDataObject.insertPixelDataPromises).then(() => {
149+
const { actor } = createActorMapper(imageDataObject.vtkImageData);
150+
151+
const rgbTransferFunction = actor
152+
.getProperty()
153+
.getRGBTransferFunction(0);
154+
155+
const low = voi.windowCenter - voi.windowWidth / 2;
156+
const high = voi.windowCenter + voi.windowWidth / 2;
157+
158+
rgbTransferFunction.setMappingRange(low, high);
159+
160+
this.setState({
161+
vtkImageData: imageDataObject.vtkImageData,
162+
volumes: [actor],
163+
cornerstoneViewportData,
164+
labelMapInputData,
152165
});
153-
},
154-
error => {
155-
throw new Error(error);
156-
}
157-
);
166+
});
167+
});
168+
}
169+
170+
setVtkjsPortOrientation(api) {
171+
const renderWindow = api.genericRenderWindow.getRenderWindow();
172+
const istyle = renderWindow.getInteractor().getInteractorStyle();
173+
174+
istyle.setSliceNormal(0, 0, 1);
175+
istyle.setViewUp(0, -1, 0);
176+
177+
renderWindow.render();
158178
}
159179

160180
onPaintEnd = strokeBuffer => {
@@ -300,7 +320,11 @@ class VTKCornerstonePaintingSyncExample extends Component {
300320
paintFilterLabelMapImageData={this.state.labelMapInputData}
301321
painting={this.state.focusedWidgetId === 'PaintWidget'}
302322
onPaintEnd={this.onPaintEnd}
303-
onCreated={this.saveComponentReference(0)}
323+
initialOrientation
324+
onCreated={api => {
325+
this.saveComponentReference(0);
326+
this.setVtkjsPortOrientation(api);
327+
}}
304328
/>
305329
)}
306330
</div>

‎examples/VTKFusionExample.js‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,11 @@ import './initCornerstone.js';
99
import vtkColorTransferFunction from 'vtk.js/Sources/Rendering/Core/ColorTransferFunction';
1010
import vtkPiecewiseFunction from 'vtk.js/Sources/Common/DataModel/PiecewiseFunction';
1111
import vtkColorMaps from 'vtk.js/Sources/Rendering/Core/ColorTransferFunction/ColorMaps';
12-
1312
import presets from './presets.js';
1413

1514
window.cornerstoneWADOImageLoader = cornerstoneWADOImageLoader;
1615

1716
const url = 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs';
18-
//const url = 'http://localhost:8080/dcm4chee-arc/aets/DCM4CHEE/rs'
19-
const client = new api.DICOMwebClient({ url });
2017
const studyInstanceUID =
2118
'1.3.6.1.4.1.14519.5.2.1.2744.7002.373729467545468642229382466905';
2219
const ctSeriesInstanceUID =
@@ -60,7 +57,7 @@ function createCT2dPipeline(imageData) {
6057

6158
function createPET2dPipeline(imageData, petColorMapId) {
6259
const { actor, mapper } = createActorMapper(imageData);
63-
mapper.setSampleDistance(5.0);
60+
mapper.setSampleDistance(1.0);
6461

6562
const cfun = vtkColorTransferFunction.newInstance();
6663
const preset = vtkColorMaps.getPresetByName(petColorMapId);
@@ -223,8 +220,14 @@ function createCT3dPipeline(imageData, ctTransferFunctionPresetId) {
223220
.reduce((a, b) => a + b, 0)
224221
);
225222

226-
const range = imageData.getPointData().getScalars().getRange();
227-
actor.getProperty().getRGBTransferFunction(0).setRange(range[0], range[1])
223+
const range = imageData
224+
.getPointData()
225+
.getScalars()
226+
.getRange();
227+
actor
228+
.getProperty()
229+
.getRGBTransferFunction(0)
230+
.setRange(range[0], range[1]);
228231

229232
mapper.setSampleDistance(sampleDistance);
230233

@@ -276,6 +279,8 @@ function createStudyImageIds(baseUrl, studySearchOptions) {
276279
const SOP_INSTANCE_UID = '00080018';
277280
const SERIES_INSTANCE_UID = '0020000E';
278281

282+
const client = new api.DICOMwebClient({ url });
283+
279284
return new Promise((resolve, reject) => {
280285
client.retrieveStudyMetadata(studySearchOptions).then(instances => {
281286
const imageIds = instances.map(metaData => {
@@ -303,16 +308,11 @@ function createStudyImageIds(baseUrl, studySearchOptions) {
303308
});
304309
}
305310

306-
const imageIdPromise = createStudyImageIds(url, searchInstanceOptions);
307-
308311
function loadDataset(imageIds, displaySetInstanceUid) {
309-
return new Promise((resolve, reject) => {
310-
const imageDataObject = getImageData(imageIds, displaySetInstanceUid);
312+
const imageDataObject = getImageData(imageIds, displaySetInstanceUid);
311313

312-
loadImageData(imageDataObject).then(() => {
313-
resolve(imageDataObject.vtkImageData);
314-
});
315-
});
314+
loadImageData(imageDataObject);
315+
return imageDataObject;
316316
}
317317

318318
class VTKFusionExample extends Component {
@@ -324,6 +324,8 @@ class VTKFusionExample extends Component {
324324
};
325325

326326
async componentDidMount() {
327+
const imageIdPromise = createStudyImageIds(url, searchInstanceOptions);
328+
327329
this.components = {};
328330

329331
const imageIds = await imageIdPromise;
@@ -337,11 +339,19 @@ class VTKFusionExample extends Component {
337339
);
338340
petImageIds = petImageIds.slice(0, petImageIds.length / 4);
339341

340-
const ctImageDataPromise = loadDataset(ctImageIds, 'ctDisplaySet');
341-
const petImageDataPromise = loadDataset(petImageIds, 'petDisplaySet');
342-
const promises = [ctImageDataPromise, petImageDataPromise];
342+
const ctImageDataObject = loadDataset(ctImageIds, 'ctDisplaySet');
343+
const petImageDataObject = loadDataset(petImageIds, 'petDisplaySet');
344+
const promises = [
345+
...ctImageDataObject.insertPixelDataPromises,
346+
...petImageDataObject.insertPixelDataPromises,
347+
];
348+
349+
// TODO -> We could stream this ala 2D but its not done yet, so wait.
350+
351+
Promise.all(promises).then(() => {
352+
const ctImageData = ctImageDataObject.vtkImageData;
353+
const petImageData = petImageDataObject.vtkImageData;
343354

344-
Promise.all(promises).then(([ctImageData, petImageData]) => {
345355
const ctVol = createCT2dPipeline(ctImageData);
346356
const petVol = createPET2dPipeline(
347357
petImageData,

‎examples/VTKLoadImageDataExample.js‎

Lines changed: 87 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,27 @@ import vtkVolume from 'vtk.js/Sources/Rendering/Core/Volume';
1010

1111
window.cornerstoneTools = cornerstoneTools;
1212

13+
const ORIENTATION = {
14+
AXIAL: {
15+
slicePlaneNormal: [0, 0, 1],
16+
sliceViewUp: [0, -1, 0],
17+
},
18+
SAGITTAL: {
19+
slicePlaneNormal: [1, 0, 0],
20+
sliceViewUp: [0, 0, 1],
21+
},
22+
CORONAL: {
23+
slicePlaneNormal: [0, 1, 0],
24+
sliceViewUp: [0, 0, 1],
25+
},
26+
};
27+
28+
const voi = {
29+
// In SUV as this example uses a PET
30+
windowCenter: 2.5,
31+
windowWidth: 2.5,
32+
};
33+
1334
function createActorMapper(imageData) {
1435
const mapper = vtkVolumeMapper.newInstance();
1536
mapper.setInputData(imageData);
@@ -23,18 +44,18 @@ function createActorMapper(imageData) {
2344
};
2445
}
2546

26-
const ROOT_URL =
27-
window.location.hostname === 'localhost'
28-
? window.location.host
29-
: window.location.hostname;
47+
function getImageIds() {
48+
const ROOT_URL =
49+
'https://s3.amazonaws.com/IsomicsPublic/SampleData/QIN-H%2BN-0139/PET-sorted/';
50+
51+
const imageNames = [];
52+
53+
for (let i = 1; i < 546; i++) {
54+
imageNames.push('PET_HeadNeck_0-' + i + '.dcm');
55+
}
3056

31-
const imageIds = [
32-
`dicomweb://${ROOT_URL}/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032221.1.dcm`,
33-
`dicomweb://${ROOT_URL}/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032221.2.dcm`,
34-
`dicomweb://${ROOT_URL}/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032221.3.dcm`,
35-
`dicomweb://${ROOT_URL}/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032221.4.dcm`,
36-
`dicomweb://${ROOT_URL}/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032221.5.dcm`,
37-
];
57+
return imageNames.map(name => `dicomweb:${ROOT_URL}${name}`);
58+
}
3859

3960
class VTKLoadImageDataExample extends Component {
4061
state = {
@@ -49,6 +70,8 @@ class VTKLoadImageDataExample extends Component {
4970
this.components = {};
5071
this.cornerstoneElements = {};
5172

73+
const imageIds = getImageIds();
74+
5275
// Pre-retrieve the images for demo purposes
5376
// Note: In a real application you wouldn't need to do this
5477
// since you would probably have the image metadata ahead of time.
@@ -72,14 +95,25 @@ class VTKLoadImageDataExample extends Component {
7295

7396
const imageDataObject = getImageData(imageIds, displaySetInstanceUid);
7497

75-
loadImageData(imageDataObject).then(() => {
76-
const { actor } = createActorMapper(imageDataObject.vtkImageData);
98+
loadImageData(imageDataObject);
99+
100+
const { actor } = createActorMapper(imageDataObject.vtkImageData);
101+
102+
this.imageDataObject = imageDataObject;
77103

78-
this.setState({
79-
vtkImageData: imageDataObject.vtkImageData,
80-
volumes: [actor],
81-
cornerstoneViewportData,
82-
});
104+
const rgbTransferFunction = actor
105+
.getProperty()
106+
.getRGBTransferFunction(0);
107+
108+
const low = voi.windowCenter - voi.windowWidth / 2;
109+
const high = voi.windowCenter + voi.windowWidth / 2;
110+
111+
rgbTransferFunction.setMappingRange(low, high);
112+
113+
this.setState({
114+
vtkImageData: imageDataObject.vtkImageData,
115+
volumes: [actor],
116+
cornerstoneViewportData,
83117
});
84118
},
85119
error => {
@@ -88,20 +122,22 @@ class VTKLoadImageDataExample extends Component {
88122
);
89123
}
90124

91-
saveCornerstoneElements = viewportIndex => {
92-
return event => {
93-
this.cornerstoneElements[viewportIndex] = event.detail.element;
94-
};
95-
};
125+
storeApi = orientation => {
126+
return api => {
127+
const renderWindow = api.genericRenderWindow.getRenderWindow();
128+
const istyle = renderWindow.getInteractor().getInteractorStyle();
129+
130+
const { slicePlaneNormal, sliceViewUp } = ORIENTATION[orientation];
96131

97-
setWidget = event => {
98-
const widgetId = event.target.value;
132+
istyle.setSliceNormal(...slicePlaneNormal);
133+
istyle.setViewUp(...sliceViewUp);
99134

100-
if (widgetId === 'rotate') {
101-
this.setState({
102-
focusedWidgetId: null,
135+
this.imageDataObject.insertPixelDataPromises.forEach(promise => {
136+
promise.then(() => renderWindow.render());
103137
});
104-
}
138+
139+
renderWindow.render();
140+
};
105141
};
106142

107143
render() {
@@ -129,7 +165,28 @@ class VTKLoadImageDataExample extends Component {
129165
</label>
130166
</div>
131167
<div className="col-xs-12 col-sm-6">
132-
{this.state.volumes && <View2D volumes={this.state.volumes} />}
168+
{this.state.volumes && (
169+
<>
170+
<div className="col-xs-12 col-sm-6">
171+
<View2D
172+
volumes={this.state.volumes}
173+
onCreated={this.storeApi('AXIAL')}
174+
/>
175+
</div>
176+
<div className="col-xs-12 col-sm-6">
177+
<View2D
178+
volumes={this.state.volumes}
179+
onCreated={this.storeApi('SAGITTAL')}
180+
/>
181+
</div>
182+
<div className="col-xs-12 col-sm-6">
183+
<View2D
184+
volumes={this.state.volumes}
185+
onCreated={this.storeApi('CORONAL')}
186+
/>
187+
</div>
188+
</>
189+
)}
133190
</div>
134191
</div>
135192
</div>

0 commit comments

Comments
 (0)