Giter VIP home page Giter VIP logo

niivue-vscode's Introduction

NiiVue VSCode README

WebGL 2.0 medical image viewer
This extension uses NiiVue to display images selected in VSCode.

Web version

The web version can be installed as a local app with file associations (only supported in Chrome)

VS Code screenshots

Default View when opening an image Comparing multiple images

List of Hotkeys

  • Right Mouse: Drag with the right mouse button to zoom
  • Middle Mouse: Drag with the right mouse button to pan
  • Mouse Scroll: Change slice in currently hovered image
  • ← →: change volume in 4D image
  • V: Cycle through viewmodes
  • C: Cycle through clip plane orientations in 3D render
  • shift: Changes mouse behaviour to 2D dragging and 3D viewplane rotation
  • H: Move the cross to R
  • L: Move the cross to L
  • J: Move the cross to P
  • K: Move the cross to A
  • ctrl+U: Move the cross to S
  • ctrl+D: Move the cross to I

Features

  • Open local files by selecting them in the VSCode explorer
  • Selecting multiple files -> right click -> NiiVue: Compare
  • Open web links to files with the command "NiiVue: Open Image" (Ctr+Shift+P)
  • Open local or remote files when hovering over the link in an open editor
  • Add overlays
  • Works in web-based VSCode NiiVue in web-based VSCode

Supported Formats

NiiVue can open several formats popular with brain imaging:

If niivue-vscode fails to open any of these files, please create an issue.

Developing this extension in VSCode

  • Fork this repository;
  • Clone this repository and open in VSCode
  • Run inside the niivue-vscode folder

Installing

    npm install --global yarn
    yarn install:all

It might be required to update node first before running 'yarn install'. This can be done with the following:

    npm install --global n
    n latest

Hot Reload Development in browser

    yarn start:webview

Debugging the extension in vscode

This requires a full compilation and is slow

    yarn watch:webview
  • Press F5 (a new VSCode window opens: Extension Development Host)
  • Test the extension in the Extension Development Host by opening an image file
  • Press Ctrl+R in the Extension Development Host for reload after a code change

Playwright Tests

The playwright tests are for the niivue webview. Install the vscode extension Playwright Test for VSCode. Open the command line and execute

    yarn start:webview

Open the vscode test interface and run the tests. New tests can be added under niivue/tests

Test in the web version of vscode

    yarn esbuild
    yarn open-in-browser

Publishing

First publish to vscode marketplace, this automatically increments the version number and creates a git commit

    vsce publish patch|minor|major [--pre-release]    

Then publish to openVSX marketplace

    npx ovsx publish --pat <openVSX access key>

niivue-vscode's People

Contributors

astewartau avatar felenitaribeiro avatar iishiishii avatar korbinian90 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

niivue-vscode's Issues

name change?

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

webworker doesn't update

The standalone app (cached webpage) should update automatically to the newest version. This doesn't occur on windows (chrome)

Presets

Add presets for scaling and colorrange for

  • QSM
  • segmentation
  • phase

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.

pre-release broken on vscode web

mainThreadExtensionService.ts:113 Activating extension 'KorbinianEckstein.niivue' failed: Cannot load module './editorProvider'.

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.

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?)

vscode open dicom folder

  • The web version can open dicom folders by using a modified version of readDirectory.
  • The vscode version needs to read files as buffers first and open the dicoms from the buffers.
  • A drag and drop version should be simple to include afterwards as well.

Display in change viewer

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

image

reset web app

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

Linux issues

  • does not seem to work in vscode under Linux (niivue canvas remains black)
  • not available in marketplace of vscodium

DICOM folder as overlay

Currently, DICOM folders are only supported with the "Add Image" Button, but not with the "Overlay" button

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?

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)

Meshes

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

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

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

vscode

  • add to the context menu, so that when right clicking a file there would be the option: Add as overlay

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

Can't load NRRD files with "spacings" in header

This is a very simple image, when I removed the spacings header, it works perfectly, when I add the spacings header it displays this:

image

Here is a simple example script:

import numpy as np
import nrrd
data = np.random.randint(0, 2, size=(20, 20, 20), dtype=np.uint8)
header = {
    "type": "uint8",
    "dimension": 3,
    "sizes": list(data.shape),
    'encoding': 'gzip',
    "spacings": [1.0, 1.0, 0.625],
}
nrrd.write("data.nrrd", data, header)

Here is the file when I cat it:

> cat data.nrrd
NRRD0005
# This NRRD file was generated by pynrrd
# on 2024-03-08 21:53:01(GMT).
# Complete NRRD file format specification at:
# http://teem.sourceforge.net/nrrd/format.html
type: uint8
dimension: 3
sizes: 20 20 20
encoding: gzip
spacings: 1 1 0.625

m���0
OD�Ubo����I�Ěg|awr���Jg�S ��M���>~?��+�~���\�|>���������s!����{���������7=w>�y����<]�9��]���{��ds�wG�q��<y��ϯ��x7p��CM&X��������ʻ��d�:���<�p���L��h���l��#��5h;�=��v�
�X�p��:9e
���v�CR\��v0@Q�D� ����,�"����z"[��9N@DiV^��
Ǒ�a�P�x�x��!�n[�I9�I|�Q��c�h}$:�ߗ�p�Q0G��6�0TG�ĕQ$O���k���A����L�������~����׍(b�=I���5
D�����t��9yz�H��-�V���n=&.C�`4�RsITe��
                                      u�s�m����-@t���M�"�a�*H�]GO�
���&�:��}�S�7�tX8D�YU�&�d�                                        �b�q�H���$Z�����#*�A,�
�I��)΄|d���[]����IPf��@��c�ߝڀ�&���
b�y��(�1r��zJBo�f�1[9A�$�ˬ�R_Zg�"����D��Ԥ�%W���S
�_�m�,�=ZuF����F^�P�M��e�I���[]����=����zX%     �[J�>���jKe7��|<77kd�O�"�.�@a6
S                                                                             )�R"!c�S�pEV}{v;Aït�gjD�#EJ-�R�r=���     $�9%�OG�xCҢl� nYC7-Yq��Y�j��s��CL�W�د�'*�zFE
4�Q/�`#�_�e�����Z�zޤ�J���ۗu��S�jӎe"9���s1�[�_Β�B�FOD�e&gm<�uOx[^/!8Ä5����M�ח5rlL��@�_�6%K/۠X怡��R����_�X=MC�jb����|��mE����ɬ�肆>�&i��H_��;�3�$C=s,M�e�Tf's���D��f�
 �;K����"�ع�wL��-
                 �WT���2c4���`t*���f;X�p�E�    ��ef�L��e}�n��~ � n��0��ٚ9W�ڡ��'��ݣ<i�pΪ��лMg�'��r{���4l�/�MF�Ԉiq��G6B`91~��4S�.H�~�z��� ����R
                                                                                                                                             ]��n��bA��90���^h��y���t@(

Feature requests

  • Mrview Like contrast
  • Select mouse mode
  • Cool scale reset
  • Render sync zoom
  • Home -> close all
  • Große Datensätze
  • Show Like in spm - all in mnispace - all in space of image x - plus warning if resampled
  • not show NaN
  • show value close to mouse while dragging
  • add sliced 3d view, synchronized

Adapt license

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

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

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.

Stacked mode

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

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

Dropping in vscode

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

Home screen for web app

Show a nice layout when no image is loaded.

Maybe instructions about Niivue-ify and other projects

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?).

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

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.