ohif/react-vtkjs-viewport

VTK.js image viewport component in React

🔔🔔🔔🔔 Attention: Cornerstone.js has evolved! We're excited to introduce Cornerstone3D 🚀. Expect advanced rendering, stellar performance, and a modern toolset. 🌐 Navigate to the new repository for the latest updates and improvements.

react-vtkjs-viewport

VTK.js image viewport component for React

Install

This project consumes vtk.js as an ES6 dependency. If you're unsure of how to consume vtk.js as an ES6 dependency, please check out Kitware's guide.

# With NPM
npm install --save react-vtkjs-viewport vtk.js

# With Yarn
yarn add react-vtkjs-viewport vtk.js

Development

Local development uses <root>/examples as a test application. You can import the VTK Viewport using a WebPack alias like so:

import VtkViewport from '@vtk-viewport'

Any updates to the example files or the VtkViewport's source will cause WebPack to rebuild.

# Restore Dependencies
yarn install

# Start Local Dev Server
yarn run dev

License

MIT © OHIF

react-vtkjs-viewport's Issues

Example rotatable-crosshairs has bug to reset crosshairs?

https://react-vtkjs-viewport.netlify.app/rotatable-crosshairs

First, i moved the crosshairs center,
second, rotate a reference line,
then i click the 'reset crosshairs' button, the second viewport shows a wrong slice.

Intergrate cornerstoneTools into react-vtkjs-viewport

I'm trying to do some measurements and annotations on the View2D viewport, I have no idea to intergrage cornerstoneTools, Is there any better way to do it? Expect some suggestions.

Crosshairs Failed to Open

Sorry to bother you, but I can't open the crosshairs demo. It failed because of the requests time out. I'm not sure whether it was caused by my network status; but I failed so many times. Do you mind helping me to ensure this problem?

[Bug] Crash error in Google Chrome

Hello I hope you are well.

During the last update of google chrome I noticed that it started to crash when trying to display the model in 3d.

The error displayed on the console is as follows.

It only happens in the latest version of chrome, in other browsers and in previous versions of chrome it works normally

I appreciate your help in advance.

OS: Mac OS 12.3
Browser: Chrome 116.0.5845.140.

Can you provide an example of remote rendering

For low-configuration devices, client-side rendering often cannot be hosted and lower browser versions do not support the use of wasm

The scroll up and down in the axial view is paging wrong

QQ.20210608141953.mp4

After the operations of reticle rotation and drag are finished, press the Restore key to restore the view. The scroll up and down in the axial view is paging wrong. This problem may require several debugging

ReferenceError: fracToDec is not defined

Support for 8-bit images

@swederik how difficult would it be to add support for 8-bit images? Any chance you could help point me in the right direction?

react-vtkjs-viewport/src/lib/getImageData.js

Line 47 in 0a3cb79

'8 Bit signed images are not yet supported by this plugin.'

How does the data of the 'ArrayBuffer' type translate into common data and store it in the database?Is it directly stored as an ArrayBuffer type?

Failed to compile on build

met with the following error on build:

ERROR in ./node_modules/vtk.js/Sources/Filters/General/PaintFilter/PaintFilter.worker.js
Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
ValidationError: Worker Loader Invalid Options

options.inline should be boolean

    at validateOptions (/mnt/c/Users/ShaneBenlolo/react-vtkjs-viewport/node_modules/worker-loader/node_modules/schema-utils/src/validateOptions.js:31:11)
    at Object.pitch (/mnt/c/Users/ShaneBenlolo/react-vtkjs-viewport/node_modules/worker-loader/dist/index.js:57:29)
 @ ./node_modules/vtk.js/Sources/Filters/General/PaintFilter/index.js 8:0-94 42:21-38
 @ ./src/VTKViewport/View3D.js
 @ ./src/index.js
 @ ./examples/VTKLoadImageDataExample.js
 @ ./examples/App.js
 @ ./examples/index.js

Steps to reproduce:

git clone https://github.com/OHIF/react-vtkjs-viewport.git
cd react-vtkjs-viewport/
yarn add react-vtkjs-viewport vtk.js
yarn install
yarn run dev

issue can be fixed by editing /react-vtkjs-viewport/node_modules/worker-loader/dist/options.json, line 8 to "type": "string" rather than "type": "boolean".

However, when I get it to compile after making that adjustment, none of the examples work. What is going on here? I want to check out the fusion example. When I click the fusion example, I'm met with the following error:

Uncaught (in promise) TypeError: Cannot read property 'render' of undefined
    at VTKFusionExample.js:481
    at Array.forEach (<anonymous>)
    at VTKFusionExample.rerenderAll (VTKFusionExample.js:476)
    at onPixelDataInsertedCallback (VTKFusionExample.js:351)
    at getImageData.js:78
    at Array.forEach (<anonymous>)
    at Object._publishPixelDataInserted (getImageData.js:77)
    at insertPixelData (loadImageData.js:102)
    at cornerstoneTools.js:10001

all other examples have different errors and are not working.

Error occur when I use vtkRectangleWidget

In View2D.js, I add the following code, when I enable painting(set props.painting to true), the viewport will crash with the error like the photo.

this.rectangleWidget = vtkRectangleWidget.newInstance({
      resetAfterPointPlacement: false,
      useHandles: true,
    });

...
this.viewWidget = this.widgetManager.addWidget(
          this.rectangleWidget,
          ViewTypes.SLICE
        );


this.widgetManager.grabFocus(this.rectangleWidget);
        this.widgetManager.enablePicking();

        this.genericRenderWindow.resize();

How can I change the mouse scrolling step in 2D MPR(VTK extension)

As I need the 2D MPR function to view the OCT images of small organs, the spacing information is set rightly and images can be viewed under 2D MPR mode. But when I scroll mouse, the crosshairs move greatly (about 1mm in real world). This brings great inconvinience to operations.

Questions: How can I change the scroll steps in 2D MPR(VTK extension)? I tried to find answers in code, but failed. I found that VTKplugin repository, step is set to spacing value, which is the right behavior I expected, but can not find any clue in Viewers repository and react-vtkjs-viewport repository.
Could you please give me a hand on this. Thank you!

Lanny

Updating to latest vtk.js version

First of all, great work, so far everything works very well. I'm toying with creating a sample viewer that consumes the react-vtkjs-viewport directly (which works now).
My only concern is that updating to the latest vtk.js version isn't currently possible (and how to handle such cases in the future).
When using the latest vtk.js (14.11.4 currently) there is one breaking change that creates an error when using together with this library: in View2D.js Ln 77: handle.rotateFromDirections(handle.getDirection(), normal);
Apparently the api has changed and rotateFromDirections is now in vtkMatrixBuilder.
Unfortunately I also have a problem using the new api, replacing with:
vtkMatrixBuilder.buildfromDegree().matrix.rotateFromDirections(handle.getDirection(), normal);
and including the vtkMatrixBuilder:
import vtkMatrixBuilder from 'vtk.js/Sources/Common/Core/MatrixBuilder';
compiles but I get scope issues with webpack later running the example:
Uncaught TypeError: vtk_js_Sources_Common_Core_MatrixBuilder__WEBPACK_IMPORTED_MODULE_19__.default.buildfromDegree is not a function
Here is my fork with the changes: https://github.com/knopkem/react-vtkjs-viewport
Thanks

Adding a View3D component or an example into OHIF

Hello everyone, I am experienced in vtkjs and have made many projects with it, also I like the idea of this plugin, but I have a project that contains OHIF viewer embedded inside it with the basic commands (such as mpr) inside vtk extension, what are the steps to add for example 3D view component or any one of these examples inside OHIF easily and fast?

thanks

Netlify deploys have stopped working

Looks like Netlify have stopped working due to the Ubuntu version we were running reaching end of life:

This started mid last year, Please read! End of support for Trusty build image: Everything you need to know

I believe it should be a quick fix for someone who has access to Netlify? Although it might be worth also bumping Node and yarn version specified here I believe most of OHIF is running node v14.15.0 and yarn ~v2?

Unable to run

here is the err when I do "yarn run dev"

 10% building 1/1 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:3000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master
ℹ ｢wds｣: 404s will fallback to /index.html
 10% building 1/3 modules 2 active ...r/client/index.js?http://localhost:3000Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (/Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/webpack/lib/util/createHash.js:90:53)
    at NormalModule._initBuildHash (/Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/webpack/lib/NormalModule.js:401:16)
    at handleParseError (/Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/webpack/lib/NormalModule.js:452:10)
    at /Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/webpack/lib/NormalModule.js:484:5
    at /Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/webpack/lib/NormalModule.js:343:12
    at /Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
node:internal/crypto/hash:69
  this[kHandle] = new _Hash(algorithm, xofLen);
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (/Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/webpack/lib/util/createHash.js:90:53)
    at NormalModule._initBuildHash (/Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/webpack/lib/NormalModule.js:401:16)
    at handleParseError (/Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/webpack/lib/NormalModule.js:452:10)
    at /Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/webpack/lib/NormalModule.js:484:5
    at /Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/webpack/lib/NormalModule.js:343:12
    at /Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/hanglok/work/Vtk/sample/react-vtkjs-viewport-master/node_modules/graceful-fs/graceful-fs.js:115:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read/context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

PET Images Adjustable Window Level in MPR

I noticed using the OHIF Viewer that PET images in 2DMPR mode can't have their window level changed (using the WWWC tool) like CT images can. After some investigation I found that because the range of window width and window center is much smaller with PET then CT the rounding that takes place effectively makes changes impossible.

publicAPI.windowLevelFromMouse = pos => {  
const range = model.volumeActor  
  .getMapper()  
  .getInputData()  
  .getPointData()  
  .getScalars()  
  .getRange();  
const imageDynamicRange = range[1] - range[0];  
const multiplier =  
  Math.round(imageDynamicRange / 1024) * publicAPI.getLevelScale();  
const dx = Math.round((pos[0] - model.wlStartPos[0]) * multiplier);  
const dy = Math.round((pos[1] - model.wlStartPos[1]) * multiplier);  
let windowWidth = model.levels.windowWidth + dx;  
let windowCenter = model.levels.windowCenter - dy; 

from vtkInteractorStyleMPRWindowLevel.js

For PET the multiplier gets rounded to 0 and leaves dx and dy as 0 as well. For reasonable changes to take place in the levels in PET we want dx and dy values between -1 and 1. If I remove all three Math.round calls then I can adjust the window level for both PET and CT with no issues.

If others agree that the rounding here is unnecessary I'd be happy to make a PR to address this. I'm open to other solutions to this issue as well.

How to free GPU memory?

GPU memory is still occupied every time the component is closed

Add Support for React 17.*

Could React 17 be supported by this project?
I don't feel like this would lead to any major changes if any.

failed to load headsq.vti and its .gz data file into browser

the http request to load headsq.vti always results in a 'download completed' dialog box, i tried with IE, chrome and firefox and the behaviour is the same. does this happen to you as well? just run the example in the development mode.

How do You pick up pixel information in View2D?Thank you!

The image reconstructed by MPR is very small by default. Can any parameter control the size

Update to the latest vtk js version

Hi all!

When I build MPR using View2D with the latest version of vtk.js (currently is 16.2.2) I get an error in View2D (rotateFromDirections is undefined https://github.com/OHIF/react-vtkjs-viewport/blob/master/src/VTKViewport/View2D.js#L86) due to the change in mixin of vtkPaintWidget: Kitware/vtk-js@0f86669#diff-b5418036475f3273583a6b26f89bd42ceec1b43d41a1f88a4044a641424d7b24R166

Best regards,
Stas

Delete / Clear Cache 3D

Hello, I would like to be able to clear the cache when rendering in 3D, since it calls the getImageData (imageIds, displaySetInstanceUid) method and saves said cache, there is no way to erase it.

You could put that if you call getImageData (imageIds, displaySetInstanceUid, true / false)
with a true or false clear the cache. and make a new new Map () or something like that.

Load local Dicom files

Hello, i have a problem to load local multiframes Dicom files who not finish with .dcm like this
'MR.1.2.840.113619.2.80.1641507309.20875.1646768043.17.D0002983800008000016'

const promises = imageids.map(imageId => {
  return cornerstone.loadAndCacheImage(imageId);
});

i have tried put '.dcm' but the promises keep give me a error

bringing in other widgets for segmentation / painting

I am trying to expand upon the functionality shown in this example https://react-vtkjs-viewport.netlify.app/painting to have more functionality and options like in this example https://kitware.github.io/vtk-js/examples/PaintWidget.html

I can import, and instantiate the wdigets like so:

    // brush types
    this.paintWidget = vtkPaintWidget.newInstance();
    this.paintWidget.setRadius(radius);
    this.rectangleWidget = vtkRectangleWidget.newInstance({
      resetAfterPointPlacement: true
    });
   
    widgets = [
      this.paintWidget,
      this.rectangleWidget
    ];

but when I replace paintWidget with rectangleWidget when adding a widget to the widgetManager like this:

    if (prevProps.painting !== this.props.painting) {
      if (this.props.painting) {
        this.viewWidget = this.widgetManager.addWidget(
          this.rectangleWidget,
          ViewTypes.SLICE
        );
        this.subs.paintStart.sub(
          this.viewWidget.onStartInteractionEvent(() => {
            this.paintFilter.startStroke();
            this.paintFilter.addPoint(
              this.rectangleWidget.getWidgetState().getTrueOrigin()
            );
            if (this.props.onPaintStart) {
              this.props.onPaintStart();
            }
          })
        );
        this.subs.paint.sub(
          this.viewWidget.onInteractionEvent(() => {
            if (this.viewWidget.getPainting()) {
              this.paintFilter.addPoint(
                this.rectangleWidget.getWidgetState().getTrueOrigin()
              );
              if (this.props.onPaint) {
                this.props.onPaint();
              }
            }
          })
        );
        this.subs.paintEnd.sub(
          this.viewWidget.onEndInteractionEvent(() => {
            const strokeBufferPromise = this.paintFilter.endStroke();

            if (this.props.onPaintEnd) {
              strokeBufferPromise.then(strokeBuffer => {
                this.props.onPaintEnd(strokeBuffer);
              });
            }
          })
        );

        this.widgetManager.grabFocus(this.rectangleWidget);
        this.widgetManager.enablePicking();

        this.genericRenderWindow.resize();
      } else if (this.viewWidget) {
        this.widgetManager.releaseFocus();
        this.widgetManager.removeWidget(this.rectangleWidget);
        this.widgetManager.disablePicking();

        this.subs.paintStart.unsubscribe();
        this.subs.paint.unsubscribe();
        this.subs.paintEnd.unsubscribe();
        this.viewWidget = null;

        this.genericRenderWindow.resize();
      }
    }

I receive the following error in OHIF: ViewerMain: Cannot read properties of null (reading 'isAttributeUsed'), this is the snippet of code throwing the error in index.js:

      if (program.isAttributeUsed('vertexDC')) {
        if (
          !cellBO
            .getVAO()
            .addAttributeArray(
              program,
              cellBO.getCABO(),
              'vertexDC',
              cellBO.getCABO().getVertexOffset(),
              cellBO.getCABO().getStride(),
              model.context.FLOAT,
              3,
              model.context.FALSE
            )
        ) {
          vtkErrorMacro('Error setting vertexDC in shader VAO.');
        }
      }

Does anyone know what I am doing wrong?

How to implement bouding box on MPR view

Hi everyone,

I am trying to implementd draw/show bouding box on MPR view, but I don't know how to do it, anyone has idea? please let me know.

Viewport View3D sometimes needs window resize to draw properly

I got an issue that sometimes the view3D component won't draw, but once I resize the window it draws.

I checked the code and it might be related to file VTKViewport/view3D.js line 108
// TODO: Not sure why this is necessary to force the initial draw
this.genericRenderWindow.resize();

I wonder if you have figured out why this is necessary, could you explain what happens here?

Also, can I trigger an event or something to call this resize() call forcefully? hopefully that will fix the problem I encountered.

How to get the Volume Pixel Data

Hi, Im using ohif with vtk.js and this api in the context of my thesis. I am trying to have an 3d opencv object consuming the pixelArray of a CT volume.
The pipeline of my operation is supposed to be :
1- get the whole pixel array from the series.
2- send it to a python server using XMLHttpRequest
3- Having the array being consumed with opencv for some processing
4- send it back to ohif viewer to then reconstruct it with mpr.

My question is : what is the best /most correct way on doing this. Since ohif preloads the images when the studiesis selected, I am trying to get the pixel array from the image cache.
Im looking at this example VTKCornerstonePaintingSyncExample.js where an 3d Array buffer is constructed to consume the series coming from cornestone.js, but since I'm still not familiar with this API I can't find the proper object where the whole pixelArray volume is located.

Being stuck for a while in this part, can someone help?

Best regards.

Error 'does not contain a default export (imported as 'PaintFilterWorker')' when i import method from 'react-vtkjs-viewport'

i use create-react-app and use this module. But when i import it will show this error:

./node_modules/vtk.js/Sources/Filters/General/PaintFilter/index.js
Attempted import error: 'vtk.js/Sources/Filters/General/PaintFilter/PaintFilter.worker' does not contain a default export (imported as 'PaintFilterWorker').

Please help me fix this issue.

"react-vtkjs-viewport": "^0.14.2",
"vtk.js": "^16.1.1"

"scripts": {
    "start": "rescripts start",
    "build": "rescripts build",
    "test": "rescripts test",
    "eject": "rescripts eject"
  },

Unable to customize crosshairs color

Unable to customize crosshairs color .

Add This Variables Please

Please could you add this to the original version to be able to clear the cache and re-generate the 3D.
It would be simply adding this:

Thanks in advance.

change brush / stroke color after changing labelmap3d.activeSegmentIndex

am using cornerstone.js, cornerstoneTools-4.0 & react-vtkjs-viewport (npm-version 0.8.4), vtkjs (npm-version-13.14.2)

I have an issue with View3D, maybe someone can help:

when I change labelmap3d.activeSegmentIndex, color of painting-brush-stroke does not change on right side (react-vtkjs), the stroke color changes on left side (cornerstoneTools)
(see attached screenshot1)

watch short video here
https://www.youtube.com/watch?v=jQNOye3iB0I

Changing the Slab size ends up working like a zoom for large slabs.

An alternative approach is now that we are using parallel projection, we can keep the camera position outside of the volume, and just move the near and far clipping planes along with the focal point, which will be the center of the target slice. Zoom is then achieved by making the parallelScaling of the frustum larger and smaller.

This will also come with the benefits of not having to worry if the camera is within the MIP volume.

Parallel projection is incorrect

It still seems to have some perspective to it, so there must be an error lower down in vtkjs.

We can use a 1% FOV with a perspective camera to "approximate" parallel projection, to give us a target of what to expect (note by default tacking this on means you have to zoom way out):

Perspective Projection FOV 1%:

"Parallel Projection":

vtk.js vs @kitware/vtk.js ?

It's been a little while since I've used vtk.js, in part because of the extra packaging required for loaders. I see that the new ES6 packaging under the @Kitware namespace apparently fixes that problem.

Is @kitware/vtk.js the one true way of the future, and if so, are you planning to convert react-vtkjs-viewport over?

Exceptions with MPR rotate example

This is for version v0.14.1 (it was working before).
Running the MPRRotateExample shows lots of exceptions in the console, e.g.:

    at publicAPI.handleMouseMove (vtkInteractorStyleMPRSlice.js:285)
    at Object.publicAPI.handleMouseMove (vtkInteractorStyleMPRRotate.js:35)
    at Object.<anonymous> (index.js:59)
    at _loop (macro.js:825)
    at Object.invoke [as invokeMouseMove] (macro.js:814)
    at Object.publicAPI.<computed> [as mouseMoveEvent] (index.js:718)
    at HTMLDivElement.publicAPI.handleMouseMove (index.js:427)

Crosshairs samples incorrect location when using Slab operations

react-vtkjs-viewport/src/VTKViewport/vtkInteractorStyleMPRCrosshairs.js

Line 71 in ea4685d

const worldPos = dPos.getComputedWorldValue(renderer);

This needs to add half of the slab thickness in the directional of projection to the world coords. Right now we believe it is using the world coords at the display location projected onto the near clipping plane.

vtk_js_Sources_Interaction_Widgets_PiecewiseGaussianWidget__WEBPACK_IMPORTED_MODULE_5__.default is not a constructor

Hello!

I know I need to configure the webpack to use vtk.js.
However, using "npm i react-vtk-viewport" and "npm i vtk.js" does not seem to require a separate web pack configuration.

As a result, I succeeded in implementing the vti viewer.

[Already Implemented]

However, I want to apply the Gaussian filter as follows.

[I Want to this]

However, the following error occurred.
Can you tell me how to do this? Do I have to do additional web pack setup?

Thank you!!

Paint widget and Zoom in MPR View

Hi guys,

As already discussed in this PR, I noticed that the paint widget is not correctly rendered when the MPR view is zoomed.
You can easily reproduce this issue in the online example:

• Select the paint option -> the blue circle follow the mouse in the 2D View
• Select the Rotate option and zoom with the right mouse button
• Select the paint option -> the blue circle does no more folow the mouse movement

Seems that we need to update parallelScale and parallelProjection paint camera settings in the updateCameras method to have both layers synchronized :

...
    const viewAngle = baseCamera.getReferenceByName('viewAngle');
    const parallelScale = baseCamera.getReferenceByName('parallelScale');
    const parallelProjection = baseCamera.getReferenceByName('parallelProjection');

    paintCamera.set({
        position,
        focalPoint,
        viewUp,
        viewAngle,
        parallelScale,
        parallelProjection,
    });
};
...

Thanks for your help.

Wrong orientation for Sagittal plane

Almost all DICOM viewers render the Sagittal view with the head facing left. See attached image for different b/w OHIF and Radiant.

I tried modifying the sliceNormal for the sagittal view from [1,0,0] to [-1, 0, 0] in the props to View2D component which makes the orientation right but selects the wrong slice. Is there any way this can be corrected? I have basic understanding of VTK. If somebody can give me pointers on how to go about making this change inside react-vtkjs-viewer, I can attempt to fix this.

Changes to Image Loading again requires modalities some users may not have.

In an older commit, Image loading was improved to work in scenarios when certain cornerstone metadata items were not present, (due to Asteris' involvement and me explaining how we don't have stuff).

It's since been refactored back and now requires the seriesModule again. This does not work for us.

Please observe the logic provided around the time of commit 82d82d8, where all module related code was in its own block, but still worked without it.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Combine rescale computation with slice insertion into volume

When I added the modalityOrSUVPixels code I didn’t think about the fact that we are duplicating the loop through the slice.

We should merge the slope / intercept (or SUV) calculation with the calculation performed in insertSlice (https://github.com/OHIF/react-vtkjs-viewport/blob/master/src/lib/data/insertSlice.js#L11)

That would cut the number of loops through the pixels back down to 1.

Please help with volume rendering preset

In presets.js it has a collection of parameters to be used in creating a CT 3D actor by calling
applyPreset(actor, preset);

The question I have is How to adjust these parameters to make a proper 3D volume rendering. For example, the CT-Bone preset below will pick up Bone pixels and show it in red-orange color and semi transparent way. I would like to be able to disable the transparency and show it in a more nature color (e.g,. yellow or gray). How should I change the preset?
{
name: 'CT-Bone',
gradientOpacity: '4 0 1 255 1',
specularPower: '10',
scalarOpacity: '8 -3024 0 -16.4458 0 641.385 0.715686 3071 0.705882',
id: 'vtkMRMLVolumePropertyNode3',
specular: '0.2',
shade: '1',
ambient: '0.1',
colorTransfer:
'16 -3024 0 0 0 -16.4458 0.729412 0.254902 0.301961 641.385 0.905882 0.815686 0.552941 3071 1 1 1',
selectable: 'true',
diffuse: '0.9',
interpolation: '1',
effectiveRange: '-16.4458 641.385',
}

Is there any place explain these parameters and how it should be defined?

scroll the mouse but Crosshairs not fllow change

scroll the mouse but Crosshairs not fllow change

module "vtk-viewport" not installed

I have run the code to install the modules:

npm install --save react-vtkjs-viewport vtk.js

However, run the codes of in example/, it raises the error module "vtk-viewport" not installed.

Shall I download the source code and compile it with yarn? Or how could I install "vtk-viewport".
Thanks a lot!!!