Developed NIFTI 4d viewer with voxel intensity plots. #84

AhmedBasem20 · 2024-10-08T16:16:20Z

Added a new section to the TF2.4 website (the final piece of GSoC):

Features

Multi-viewport Visualization Users can upload a NIFTI file, which is displayed in three synchronized viewports (axial, sagittal, and coronal) using the CornerstoneJS suite.
Voxel Intensity Plot A voxel intensity plot will be generated and displayed when you drag or scroll through an image viewport.
For now, the intensity values are on the Y axis, and the total time points on the X axis.

Testing

I used software like ITK-SNAP and MRIcroGL to test the accuracy of the cursor position and the intensity plots and I got accurate results.

TODO

Update the cursor position and the intensity plot on mouse click event (for now it is updated on scroll and mouse drag only)
Create a pipeline to generate NIFTI files from the repository and display it initially on the viewer, thoughts?
Improve the intensity plot by adding corresponding b-values on the X axis and the fitted curve from d, dp, and f images.

Demo:

https://ahmedbasem20.github.io/TF2.4_IVIM-MRI_CodeCollection/nifti-viewer/

etpeterson

Nicely interactive but I found a few bugs.

etpeterson · 2024-10-10T04:53:11Z

website/nifti-viewer/index.js

+    const trace = {
+        y: values,
+        mode: 'markers',
+        type: 'bar',


Probably want a line or scatter plot here.

etpeterson · 2024-10-10T04:56:51Z

website/nifti-viewer/index.js

+    cornerstoneNIFTIImageLoader.nifti.loadHeader(imageId).then((header) => {
+        dims = [...header.voxelLength, header.timeSlices];
+        loadAndViewImage(document.getElementById('nifti-image-z'), `${imageId}#z,t-0`, 'axial');
+        loadAndViewImage(document.getElementById('nifti-image-x'), `${imageId}#x,t-0`, 'sagittal');


I don't see anything in this view.

There is a bug in synchronizing the sagittal view initially that I'm still trying to figure out.
For now you can fix this by scrolling through the view that is not synched, it will work normally after that.

Actually I'm noticing it's both the sagittal and coronal views that don't act correctly.

Please share with me the image so I can try debugging. (I can't find this issue with the images I'm using)

Same problem sharing images, sorry. Now I'm not seeing the coronal view misbehave. Definitely the sagittal one though. Sounds like you see that too though.

etpeterson · 2024-10-10T05:00:58Z

website/nifti-viewer/index.js

+        imageIds: Array.from({ length: numberOfSlices }, (_, i) => `nifti:${imageIdObject.filePath}#${imageIdObject.slice.dimension}-${i},t-0`)
+    };
+
+    cornerstoneTools.addStackStateManager(element, ['stack']);


I think we also want a rescale tool, sometimes I can barely see anything in those images.

You mean a tool for zooming in/out, right?

No, brightness/contrast is what they seem to call it here. https://www.cornerstonejs.org/live-examples/videocolor

got it, will work on that.

etpeterson · 2024-10-10T05:06:25Z

website/nifti-viewer/index.js

+}
+
+// Extract voxel values across all time points
+function getVoxelValuesAcrossTime(x, y, z, nx, ny, nz, nt) {


This doesn't seem to be correct, select bright parts of images but the value is low. I select dark parts of the image but the value is high. Most likely x, y, and z aren't what you think they are. But also is there no cornerstone based way to do this?

The current voxel values are extracted from cornerstone events cornerstonestackscroll and cornerstonetoolsmousedrag. But I found that I was reducing 1 from the extracted values that's what was causing the issue. I fixed that and it is more precise now.

It's still not working. See how I have a very bright part selected but the values are quite low. Other areas show up much higher on the plot than this.
I'm guessing it's either image orientation differences or still some indexing problems. I don't see how you're handling the orientation differences, so that's one place to start. What I mean by that is that indexing into the raw data doesn't necessarily equate to the displayed x, y, z. There's a possible axis flip and permutation based on the raw data so it's always displayed in the correct orientation.

There is orientation difference and handled it here:

TF2.4_IVIM-MRI_CodeCollection/website/nifti-viewer/index.js

Lines 92 to 94 in 738b6f1

voxelX = Math.min(Math.max(Math.round(voxelX), 1), nx);

voxelY = Math.min(Math.max(ny - Math.round(voxelY), 1), ny);

voxelZ = Math.min(Math.max(nz - Math.round(voxelZ), 1), nz);

I used the complement of y and z due to the axis flip. and the indexing seems accurate according to the images I tested. Can you share the image you're using here so that I can reproduce the issue?

I can't share the images because of patient privacy, but you can't count on that transformation always being the same. I opened the same image in yours and a full viewer and I see the images and notations are flipped left/right. Here's a screenshot showing that and some header info.

But what you want is to rely on cornerstone to do that stuff, not reinvent it yourself. https://docs.cornerstonejs.org/concepts/pixel-coordinate-system.html

etpeterson · 2024-11-15T14:12:15Z

Hey @AhmedBasem20 are you going to be able to get more work done on this?

AhmedBasem20 · 2024-11-15T14:38:53Z

Hi @etpeterson Sorry I've been very busy recently but hopefully I'll get more work in and address your comments next week.

Developed nifti 4d viewer with voxel intensity plots.

fb0b8db

etpeterson requested changes Oct 10, 2024

View reviewed changes

AhmedBasem20 added 2 commits October 14, 2024 20:10

change the bar plot to a line curve

671a525

Fix selected voxel coordinates

738b6f1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Developed NIFTI 4d viewer with voxel intensity plots. #84

Developed NIFTI 4d viewer with voxel intensity plots. #84

AhmedBasem20 commented Oct 8, 2024

etpeterson left a comment

etpeterson Oct 10, 2024

etpeterson Oct 10, 2024

AhmedBasem20 Oct 14, 2024

etpeterson Oct 15, 2024

AhmedBasem20 Oct 16, 2024

etpeterson Oct 18, 2024

etpeterson Oct 10, 2024

AhmedBasem20 Oct 14, 2024

etpeterson Oct 15, 2024

AhmedBasem20 Oct 16, 2024

etpeterson Oct 10, 2024

AhmedBasem20 Oct 14, 2024

etpeterson Oct 15, 2024

AhmedBasem20 Oct 16, 2024

etpeterson Oct 18, 2024 •

edited

Loading

etpeterson commented Nov 15, 2024

AhmedBasem20 commented Nov 15, 2024

	voxelX = Math.min(Math.max(Math.round(voxelX), 1), nx);
	voxelY = Math.min(Math.max(ny - Math.round(voxelY), 1), ny);
	voxelZ = Math.min(Math.max(nz - Math.round(voxelZ), 1), nz);

Developed NIFTI 4d viewer with voxel intensity plots. #84

Are you sure you want to change the base?

Developed NIFTI 4d viewer with voxel intensity plots. #84

Conversation

AhmedBasem20 commented Oct 8, 2024

Features

Testing

TODO

Demo:

etpeterson left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etpeterson Oct 18, 2024 • edited Loading

Choose a reason for hiding this comment

etpeterson commented Nov 15, 2024

AhmedBasem20 commented Nov 15, 2024

etpeterson Oct 18, 2024 •

edited

Loading