Paraview web with Multi Planar Reconstruction support

Web Support
1

Hi, I was able to build Paraview visualizer code and test out the remote volume rendering functionality. Also, I’m aware that Paraview Visualizer is just an example of what is possible with paraview web, reactjs and pvpython, but I really like the remote rendering functionality so I don’t really want to re-invent the wheel, starting from scratch. I’m also interested to know if it’s there’s any way to integrate Multi planar reconstruction(MPR) with it. Say in a different viewport display the axial, coronal and saggital views for the chosen data.

Right now, if my understand is correct, by looking at the Paraview Vizualizer’s server code, a viewport is registered, so it can be accessed on the client side in vtkRenderer as a unique viewId. So, based on the data size, 3d reconstruction happens on the server/client side and the user just gets a way to interact with the data with mouse events.

So, if this is the case and I want to perform MPR, creating 3 more viewports one for each axial, coronal and saggital views will do I guess.

But, I’m not sure how to do this or even how to get started. Any advice is welcomed. Thank you in advance.

2

Are you familiar with VTK code to setup a renderwindow and the parameters needed to configure your transfer function along with the slices for the MPR part?

If so it might be easier to build something new using what the next version of ParaViewWeb has to offer for building new web app. The current limitation is that you will need either pip install vtk --dev or paraview/nightly.

My worry with Visualizer is (1) editing the old react code from the client side and (2) add needed python code on the server side for the MPR. Especially lot of the code is really designed to be “like paraview” with a single view.

The (2) is really not bad when you know ParaView as you just have to create other views and tune them to match your expectation using the python interface.

And in fact if you prefer to interact with ParaView you can use that python code on the server side with “ParaViewWeb (next)” as well.

1 Like
3

Hi. First of all thank you for your quick reply. And yes, I do have some experience with VTK doing multi-planar reconstruction a few months ago.
The py-web-vue looks amazing.
Looks like py-web-vue is pretty straight forward. I’ll definitely explore it myself and get back.

Thank you so much.

4

Hi. I’d also like to try out modifying visualizer’s client and server code approach.

Coming to paraview visualizer modifying approach I feel client side(reactjs) is very straightforward just adding multiple Renderers with different viewIds and indexing from the viewsIds that are registered from the Python part.
Something like this example of yours:

But, I’m not sure where and how to fit the MPR part here. Say, my MPR code is very similar to this code over here:

Here, we load one specific data and do MPR on it.

I understand the general pipeline of Visualizer, an entire directory is registered, so the user can choose the data on the client side and based on his need he can choose to Slice, Surface or Volume render, etc and after choosing based on mouse events, those mouse events are updated to the server and the data gets rendered and the updated images get sent back to the client.

I also don’t fully understand how Volume rendering is taking place here, when you click Volume from the drop-down. I’m trying to wrap my head around it by comparing it to the VTK pipeline.

Choosing the data on the client side, sets up the “Reader” with the required data.
Choosing Volume, Slice, etc from the drop-down sets up the “Actor”.
The, vtkRenderer/vtkGeometry renderer in paraviewweb adds the actor to it based on viewId.
Then, the registered viewport acts as a “renderwindow”.
The, Paraviewweb mouse handler sets up the “renderWindowInteractor”.

I don’t understand how the mapper is being setup in the paraview vizualizer pipeline.

So, how do you suggest I approach this MPR given the current pipeline, any advice is appreciated.

Thank you so much.

5

Lot of the magic of visualizer is based on the usage of proxy and updating their properties. Hence my worry that it could be tricky to “patch” things for what you are looking for.

The better approach to see how to do the MPR part with ParaView is to use the GUI while “Tools > Start trace” is running. Then once done, “stop trace” and you will get the Python code equivalent (proxy/prop-edits) to achieve what you did. From there you should be able to start creating new protocols specific to your usage or just initialization.

HTH

Seb

1 Like
6

Okay thank you so much!

7

Hi, I decide to do it with vtk, as I’m more comfortable with that. I’m able to do mpr properly for one view.

I basically used, vtk as server as base reference for one view.

I’m trying to create multiple views using this link as base reference.

I’m basically getting confused on how to do this part equivalent in vtk, i.e return view.GetGlobalIDAsString()

As vtkrenderwindow doesn’t have something like that. I see there are other methods like GetGenericWindowId(), GetGenericDisplayId(), etc.

Not sure, how to do create multiple views using vtk.
Any direction or examples will help.
Thanks in advance.

8

You need to use the vtkObject/IdMapper to assign id to each of your views and make sure the client use the proper id to connect to. The example above use the “activeView” but by calling that, you will be able to get the Id that you were looking for.

HTH

1 Like
9

Thank you so much. I’ll definitely try it out.

10

Hi there. First of all thank you. That answer was exactly to the point and that exactly gave me the answer I was looking for.
I tried that and I was able to get the different render windows using GetGlobalId(), typecast to str, pass those ids as a list to a custom protocol, override VtkImageDeliveryProtocol and was able to access them in the client side with the view id.

I have a last few couple of major questions to ask you.

Actually, the Paraview Visualizer is an amazing example of doing the same thing as the paraview desktop application. But, my interest is only on loading data from the server side and choosing the required data to visualize, basically web based remote volume rendering, then modifying the existing client side and the server side to support only remote volume rendering and later adding mpr and segmentation to it is very challenging and time consuming.

So, my approach is the vtk.web protocols and the normal vtk pipeline as I’m more comfortable with it for remote volume rendering and mpr and itk for segmentation.

So, coming to my questions:

  1. Is there any advantage(provide better color maps to the data which gives a more realistic volume rendering effect) of doing the same thing with paraview python rather than vtk, considering my use case.

  2. Loading data remotely with vtk.web protocols which consists of data folder with multiple file-formats like DICOM and mhd/mha. I know on the server side, registering the vtk file listing protocol is necessary and on the client side, to the Paraview web client’s create client func passing the filelisting along with other protocols as an array is required.
    And I’m aware that filelisting module has listServerDirectory function, but after this I’m not able to understand how to link this listServerDirectory to the FileBrowser widget or to a drop-down and intern clicking on a file, sets the filename on the server side for the vtk reader pipeline, when an entire directory of files is chosen, because vtk has various readers like DICOM reader and mhd, where SetDirectoryName would be for DICOM and SetFileName for mhd files. That intern sets up usual vtk pipeline.

So, I’m not entirely sure how to tackle this. Or where to even start.

Some things I’ve tried.

  1. Paraview visualizer code - unable to understand/visualize due to lack of knowledge on redux for state management on the client side and paraview python on the server side.
  2. I also looked into py-web-vue project and vue-vtk-js-template and didn’t really find anything related to this.

So, I’m really confused.
Any simple example for the above in Vanilla JS/React with vtk web or even simple steps to achieve or at least the direction in which I should start looking will help.

Thank you so much!

11

  1. Not one of your question but for a small data usage (single node) aside from VTK/PV knowledge, PV provide a leaner and simpler API but in term of rendering or performance VTK would do as good as PV.

  2. No, VTK is totally fine

  3. For loading your files, you would have to implement it for VTK for both the client and server. The protocols you’ve listed only exist for ParaView (I think) as they rely on proxy api. This is mandatory for ParaView as the data might not be on the web server side but on the cluster that run the processing servers on which the web server act as a client. Since you are in control, you could implement and layout your data the way you want with even adding meta files that could be the only thing you display on the client side. By creating method calls between client/server you should be able to do it with only browseDirectory and openFile.

HTH,

Seb

1 Like
12

Oh okay thanks. I’ll try and let u know.

13

Hi Sebastian.
The above approach I feel is a bit challenging to implement.

Also, vtkWebFileBrowser exist for vtk.web server side, is that similar to paraview’s FileListing.

Can it be done with vtkWebFileBrowser on the server side and any of the paraviewweb client side functionality?

Can you provide me any direction in this?
Thank you.

14

Glancing through the code, it seems to be the case. You should be able to use the pvw react component with that server protocol.

1 Like
15

Yeah thanks. I’ll try that and let you know.

16

I decided to move on to something else for moment. But, thanks anyway for helping! Your guidance helped a lot.

17

@jourdain

Hi, I had another question regarding ParaviewWeb, it seemed like a simple question, so I didn’t want to start another thread just for this one question, let me know if another thread is required.

Anyways,
My question is about setting viewport size in ParaviewWebViewPort and vtkWebViewPort. I’ve referred to this code visualizer/pvw-visualizer.py at master · Kitware/visualizer · GitHub
And I noticed that the viewport scale and max width and height is set to the constructor of ParaViewWebViewPort, i tired doing the same thing to vtkWebViewPort and realized that vtkWebViewPort doesn’t have a constructor to set the height, width and scale.

My code is similar to this code here - paraviewweb-examples/multiviews at master · Kitware/paraviewweb-examples · GitHub
With multiple views, instead of paraviewwebprotocols I’m using vtkwebprotcols. I notice that the sizes of the viewports are very small and fill only half the screen. How do I change the viewport sizes to make them larger?

Any help on this is highly appreciated.
Thank you.

18

The client request the size. The max width/height are just to make sure we don’t even try to send a 8K image at 30 fps.

My guess is that you need to fix your css in your HTML to make those view the size you expect them to be and let the layout do the rest. (i.e.: height: 50vh, width: 50vw)

19

yeah that worked thanks

1 Like
20

Dear BadCookie, seems you have implemented the MPR with ParaviewWeb or vtk web, I am also trying this to render DICOM volumns at server side, but it’s hard and challenge for me. Do you have a demo github project? And if possible could you please share us some sample code? Really appreciated. Thanks.

1 Like