Giter VIP home page Giter VIP logo

niivue-vscode's Introduction

NiiVue

NiiVue is web-based visualization tool for neuroimaging that can run on any operating system and any web device (phone, tablet, computer). This repository contains only the core NiiVue package that can be embedded into other projects. We have additional repositories that wrap NiiVue for use in jupyter notebooks, vscode, and electron applications.

News

The NiiVue iOS app is now available on iPhone and iPad.

Apple App Store

What makes NiiVue unique is its ability to simultaneously display all the datatypes popular with neuroimaging: voxels, meshes, tractography streamlines, statistical maps and connectomes. Alternative voxel-based web tools include ami, BioImage Suite Web, BrainBrowser, nifti-drop, OHIF DICOM Viewer, Papaya, VTK.js, and slicedrop.

Local Development

To run a hot-loading development that is updated whenever you save changes to any source files, you can run:

git clone [email protected]:niivue/niivue.git
cd niivue
npm install
npm run dev

The command npm run demo will minify the project and locally host all of the live demos. The DEVELOP.md file provides more details for developers.

Developer Documentation

Click here for the docs web page

Projects and People using NiiVue

Funding

Supported Formats

NiiVue supports many popular brain imaging formats:

niivue-vscode's People

Contributors

astewartau avatar felenitaribeiro avatar iishiishii avatar korbinian90 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

niivue-vscode's Issues

Dropping in vscode

It should work to support drop in vscode, since it works for the niivue instance inside the webview

Meshes

  • Reduce required performance
  • Switching the underlying surface
  • Save/Load view settings

Reduce waiting time while loading multiple images

Loading multiple large images in compare view can take several seconds.
Displaying them one at a time might make the wait time more bearable and transparent.

The amount of time is roughly the same for .nii and .nii.gz (with 15% of the size). Therefore, the time for loading is probably not vscode related but the data loading / preparation in NiiVue. <- Need to investigate this more closely to find out if a speedup is possible

Feature Ideas

Functionalty

  • Open remote files
  • click on links to images (remote and local)
  • Open clicked web urls for supported image types (currently web urls are sent to the browser) (solved with hover)
  • Mosaic view when selecting multiple files
  • File Picker to select files
  • DICOM folders
  • Not reading the full file for 4D images
  • Overlays

UI

  • Add decorators (highlights) for links of images
  • Add brain-icon to supported file types
  • Add NiiVue icon for extension
  • Buttons
  • Box to enter Link (via command Niivue: Open Image)
  • Show NIfTI info
  • Show scale
  • Change color scale

This is just brainstorming, some features might be simple, some impossible.

rearrange/remove loaded images

An X button in the corner to remove an image should be easy to add

A drag-bar could be at the top, which when clicked would move the image.
The insertion logic at a new place could be swap or insert. Probably insert is more intuitive

Adapt license

It makes probably sense to adapt the license to match the other repositories in the niivue organization

Home screen for web app

Show a nice layout when no image is loaded.

Maybe instructions about Niivue-ify and other projects

execute niivue code

We could create a command to send code from an open editor to the niivue extension.
For example files ending in .niivue could execute in the extension, producing a niivue output.

Create hmtl page for debugging main.js

Currently debugging the webview layout is quite challenging in the vscode rendering. It doesn't give access to console or debug view.

Making the same html with the main.js file run in plain html (with mockup data or drag'n drop) would make it easier to debug/develop

Stacked mode

All images would be rendered above each other to switch between the images with identical pixel locations

Display in change viewer

It seems like it could work in the change viewer of vscode source control, but it only sometimes renders.

image

Refactor main.js - display logic

Currently, there are different modes. For the compareView, a NvArray is used and for the normal view a nv object.
Better combining both modes and using the same display and resize logic (with special case if it's only one nv in the array) would make the functionality for the different views more consistent.

Add apply button for scale

Only applying the scale on click would solve two issues

  • loading additional images and reapplying the same scale
  • avoid long waiting time for many large images between scaling min and max

reset web app

The web app needs a button to reset (F5 works currently)

Permit adding overlays from vscode file manager

Hi, thanks for this effort on niivue, it's amazing. It's especially useful when working in remote servers, to visualize images without downloading them locally.

However: I use vscode-remote, images are opened quite well in niivue, but to add an overlay I first have to download it because when I click add overlay, it opens a file browser to open a local file. I would like to be able to open files from vscode file browser (maybe via drag and drop?).

Make it usable as replacement for mricro

  • change origin
  • change voxel size
  • zoom
  • set scaling like on console (scale applies to selected images)

Simon:

  • some images don't load, for reasons that don't have anything to do with the size, but maybe due to eccentric/broken headeres (in the example I sent you, if I multiply Julia_t2star_centred.nii by 1 with fslmaths it works)?
  • currently only seems to view in triplanar in the stand-alone implementation - (axial/sag/cor option doesn't seem to work)
  • maybe make a clearer space to drop new images (e.g. when the display is full)?
  • middle button image shift is nice - could there be a reset (like "home zoom/pan" in Siemens Syngo)?
  • what about adding blue box highlight round 'active' images (the ones current operations e.g. windowing/zoom are applied to)? ctr-a to highlight all?
  • for multi-echo/multi- time points, could you add the option to pick an echo/tp?
  • will it be possible to write out images as pngs, etc?
  • Linux thing 1: what would the bash command be to open images?

Open files with corrupted header as well

results/rsos we have

  1. ICE_t2star.nii
  2. Julia_t2star_centred.nii
  3. Julia_t2star.nii

Only 3) loaded. These might be good images for debugging the load issue. (FYI I notice that when I multiply Julia_t2star_centred.nii by 1 with fslmaths it works - so maybe an excentric/broken header?)

Optimize tests for surfaces

When building tests to check whether surfaces were appropriately loaded, we noticed that it takes a little while to detect them. Currently, we have to load two surfaces to change the state of whether a surface was loaded and then be able to test for the loading by checking the output about the number of points/nodes as in:

${isMesh.value? getNumberOfPoints(nvArraySelected.value[0]): 'No mesh'}

in the niivue/src/components/Menu.ts file.

The same problem happens with the surface overlay.

name change?

The name of the web app changed to "niivue-vscode web app"

Add tests

The extension consists of two parts, the vs code part (simple logic) and the webview app (most logic)

  1. Test communication: vs code <-> app
  2. Test app logic. Are the correct elements shown for a given task (probably use Jest, maybe RTL/enzyme in addition)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.