irev-dev / mri-volume-slice Goto Github PK

This is simple application that is really useful, would you be open to moving this over the react? It could help with increasing contributions + new feature development (especially if you're considering using a GraphQL backend) as it's much easier to develop with and has a huge community.

I would be happy to take this on, but it would be a large shift so I wanted to see what you thought! No issue either way 😄- just a suggestion!

Since #20, we fetch MRI data on page load, so the data in the data file is no longer needed.
Please delete everything in this folder including the folder. This can be done with:

git rm -r data

🎉

Ever since PR #20 we are fetching data from openneuro.org, this takes a while while (5-15s I'm guessing) It would be good to have something displaying "loading" or similar while this is happening.

Currently you can scroll when you have your mouse over one of the MRI views, and this updates the 'slice' that you are currently viewing, thought the page still trys to scroll as you are doing this, making the interface feel very sloppy.

todo:
stop the page from scrolling when the mouse is over one of the 3 canvases.

Feature request: Scrolling the mouse when on an image will scroll through slices on that view.

Currently when you click and drag and on one image the other two update (showing a cross-section that matches the mouse coordinates), but it would be good and intuitive to be-able to scroll throw the slices of the images you are currently mousing over by scrolling the mouse.

Should be reasonably easy for someone to have a go at as we already have event listeners setup, just more will need to be added. Have a look at what's happening in updateCanvases() and see if that function should be updated or a new function created. The current slice locations are stored in this.currentView so this should only need to be incremented/decremented and then existing functions called to update the canvases.

Currently cross hairs are on by default and can't be turned off, it would be good if for some one using MRI-Volume-Slice.js as a library to be able to turn them off or on. It should be fairly easy to do as where they are drawn on is very defined in it's own function. line 210.

Bonus points if the cross hairs are drawn on when the app first loads (currently only start working after the user clicks) and likewise would be good if the images updated to add and removed the cross hairs when the state of the cross-hairs toggle updates, i.e. the user doesn't need to click again for this to take effect.

_drawCrossHairs(contexts, viewCoors) {
     contexts.z.fillStyle = 'yellow';
     contexts.y.fillStyle = 'yellow';
     contexts.z.fillRect(viewCoors.x, 0, 1, this.size.y);
     contexts.y.fillRect(viewCoors.x, 0, 1, this.size.z);
     
     contexts.z.fillStyle = 'cyan';
     contexts.x.fillStyle = 'cyan';
     contexts.z.fillRect(0, viewCoors.y, this.size.x, 1);
     contexts.x.fillRect(0, viewCoors.y, this.size.z, 1);
     
     contexts.x.fillStyle = 'purple';
     contexts.y.fillStyle = 'purple';
     contexts.x.fillRect(viewCoors.z, 0, 1, this.size.y);
     contexts.y.fillRect(0, this.size.z - viewCoors.z, this.size.x, 1);
}

@Irev-Dev I would add the linter myself but I'm not sure how you want the project setup, and as you mentioned the IDE I am currently using has different default settings and is adding in weird whitespace and such.

Currently a nifti file is being use as part of the bundle making it pretty large (20mb or so), it would be good to fetch data from open neuro instead. for example
https://openneuro.org/crn/datasets/ds001417/files/sub-study002:ses-after:anat:sub-study002_ses-after_T1w.nii.gz
will work just fine.

default data is currently being loaded in at line 41 of scipts.js

async function loadDefaultData(niftiData) {
    const response = await fetch(niftiData);
    const blob = await response.blob();

niftiData can more or less be replaced with the url above however it is .gz compressed which is common, so a decompression library from npm is in order.

(later we might add functionality to select from a few data sets)

UI looks good when the page first loads, but when a new data is loaded with the upload button the ui goes completely vertical, and there is some other weirdness see below.

I suspect is related to #14,
later if I have time I might do a git bisect to figure out what's happened.

To reproduce:

1. download niftif data, for example this https://openneuro.org/crn/datasets/ds000174/snapshots/00001/files/sub-101:ses-BL:anat:sub-101_ses-BL_T1w.nii.gz
2. un-zip it
3. open it with the upload button
4. see problem.

@elistone Has done a great job in #6 getting toggle-able crosshairs working. However when the page loads the cross hairs don't appear until he images are interacted with, and toggling the cross hairs before the images have been interacted with also doesn't work.

hint, likely related to this (in MRI-Volume-Slice.js line: 220)

hideCrossHairs(){
        this.useCrosshairs = false;
        if(this.lastEvent){
            this.updateCanvases(this.lastEvent);
        }
    }

it uses the last event (a mouse event) and on page load there hasn't been any mouse events on the images yet.

test

open neuro has a GraphQL interface, which is great 👍.
https://openneuro.org/crn/graphql

Currently we fetch a dataset from openneuro, but it's hard coded, we're always grabbing the same one. It would be good if we instead used the API and grabbed a random dataset each time, we could also add a button for 'load random MRI' to get a new one (but the botton can be done later).

Extra info

I have never used graphQL before so I was really flaying about but I did have a little play and using the query below I was able to get it to return a number of url's for files. We would be interested in files ending in .nii.gz, so filtering and probably limiting the number per files return per dataset seems appropriate.

{
  datasets {
    id
    draft {
      id
      partial
      files {
     	 	urls
    	}
      summary {
        modalities
        totalFiles
        tasks
        size
        __typename
      }
      __typename
    }
    analytics {
      views
      downloads
      __typename
    }
    __typename
  }
}

If you've visited the website, you'll know it takes a while to load, this is because it's fetching about 20mb of MRI data before it can display it (and I don't think openneuro.org's servers are very speedy). It would be good if we could store the last viewed MRI data in local storage so that it can be pulled up if a user re-visits the site.

If it's any help below is a little bit of hacking I did to see if I could get it working and I couldn't 🤷‍♀️ .
At the bottom of setupNifti I'm storing the data, and trying to do so efficiently since it's a sizable chunk, then at the top of setupNifti I'm trying to load it in (so the second time you visit you can access this) just trying to log things out for now, if was working, then loading from local storage wouldn't be in setupNifti.
Anyway when I log out blob I get [object object] 😔 .

function setupNifti(file) {
  const locals = JSON.parse(localStorage.getItem('niftiSize'));
  console.log('nifti sizes from storage', locals);
  const blob = localStorage.getItem('niftiBlob');
  console.log('storged blob', blob);
  // const fr = new FileReader();
  // fr.onload = (fileLoadEvent) => {
  //   console.log(fileLoadEvent.target.result);
  // };
  // fr.readAsArrayBuffer(blob);

  mRISlice.loadNewNifti(nifti.parse(file));
  mRISlice.mouseNavigationEnabled('enable please');
  hideLoader();


  const nifitSizeToStore = this.size;
  localStorage.setItem('niftiSize', JSON.stringify(nifitSizeToStore));

  const niftiBlob = new Blob([this.volume.buffer], { type: 'application/json' });
  localStorage.setItem('niftiBlob', URL.createObjectURL(niftiBlob));
  console.log('local storage set');
}

Add functionality so that if a URL to a data set on openneuro.org is put in the URL as a search parameter than the app fetches that data to display.

I.e.
mrislice.netlify.com/?https://openneuro.org/crn/datasets/ds001545/snapshots/1.0.0/files/sub-01:anat:sub-01_T1w.json
will display data from
https://openneuro.org/crn/datasets/ds001545/snapshots/1.0.0/files/sub-01:anat:sub-01_T1w.json

Instead of the hard coded dataset on line: 55 of 'script.js`

async function loadDefaultData() {
  const lastFile = await idb.get('LastNiftiFile');
  if (lastFile) return setupNifti(lastFile);
  const url = 'https://openneuro.org/crn/datasets/ds001417/files/sub-study002:ses-after:anat:sub-study002_ses-after_T1w.nii.gz';
  // load from the cache API or fetch if not found
let response;
 . . . 

hint: window.location.search will give you string following the ? in the url.