Here are some improvements i'd like to make to the demos; @jourdain feel free to share your thoughts on them:

• [ ] CFD: better seed line labels; it's not clear what the first and second sliders mean. I'll think of better labels
• [ ] Slice Rendering: Remove the 3D volume viewer on the right-side to improve speed and make the app simpler/easier to understand.

@jourdain You mentioned about updating the sliders on change (instead of on release) for certain cases:

Could you remind me which ones you mentioned?

See: https://github.com/plotly/dash-docs/pull/1091

import vtkmodules avoid importing the libGL library in vtk v9.0.1, as opposed to import vtk which always loads (thus requires) libgl

About

Description of changes

Pre-Merge checklist

• [ ] The project was correctly built with npm run build.
• [ ] If there was any conflict, it was solved correctly.
• [ ] All changes were documented in CHANGELOG.md.
• [ ] All tests on CircleCI have passed.
• [ ] All Percy visual changes have been approved.
• [ ] Two people have :dancer:'d the pull request. You can be one of these people if you are a Dash core contributor.

Reference Issues

Closes #[issue number]

Other comments

Bug

I built a set of radio buttons to alternate between different representations (volumes and algorithms). This is done through a callback. When the data (i.e. ImageData) remains the same, but the child PointData changes, dash-vtk will not correctly re-render the new view.

Here's a demo:

Notice how going random -> progressive doesn't work, but random -> cone or cone -> progressive works. This is because cone uses a Algorithm instead of ImageData, so it would trigger a rerender.

Code

import dash_vtk
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import numpy as np


def build_vtk_representation(field):
    return dash_vtk.VolumeRepresentation(
        [
            dash_vtk.VolumeController(),
            dash_vtk.ImageData(
                id="image-data",
                dimensions=[10, 10, 10],
                spacing=[1, 1, 1],
                origin=[0, 0, 0],
                children=dash_vtk.PointData(
                    dash_vtk.DataArray(registration="setScalars", values=field)
                ),
            ),
        ]
    )


views = [
    build_vtk_representation([np.random.random() for i in range(10 * 10 * 10)]),
    build_vtk_representation(np.linspace(0, 1, num=10 * 10 * 10)),
    dash_vtk.GeometryRepresentation(
        [
            dash_vtk.Algorithm(
                vtkClass="vtkConeSource", state={"resolution": 64, "capping": False,},
            )
        ]
    ),
]


app = dash.Dash(__name__)
server = app.server


app.layout = html.Div(
    style={"width": "100%", "height": "calc(90vh - 16px)"},
    children=[
        dcc.RadioItems(
            id="radio-items",
            options=[
                {"value": i, "label": x}
                for i, x in enumerate(["random", "progressive", "cone"])
            ],
            value=0,
        ),
        html.Br(),
        dash_vtk.View(id="vtk-view"),
        html.Div(id="output"),
    ],
)


@app.callback(
    Output("vtk-view", "children"),
    Output("vtk-view", "triggerRender"),
    Input("radio-items", "value"),
)
def update_vtk_view(value):
    if value is None:
        return dash.no_update
    return views[value], np.random.random()


if __name__ == "__main__":
    app.run_server(debug=True)

Here's a snippet:

def build_vtk_representation(field):
    return dash_vtk.VolumeRepresentation(
        children=[
            dash_vtk.VolumeController(),
            dash_vtk.ImageData(
                ...,
                children=dash_vtk.PointData(
                    dash_vtk.DataArray(registration="setScalars", values=field)
                ),
            ),
        ]
    )


views = [
    build_vtk_representation([np.random.random() for i in range(10 * 10 * 10)]),
    build_vtk_representation(np.linspace(0, 1, num=10 * 10 * 10)),
    dash_vtk.GeometryRepresentation(
        [
            dash_vtk.Algorithm(
                vtkClass="vtkConeSource", state={"resolution": 64, "capping": False,},
            )
        ]
    ),
]

app = dash.Dash(__name__)
server = app.server
app.layout = ...

@app.callback(
    Output("vtk-view", "children"),
    Output("vtk-view", "triggerRender"),
    Input("radio-items", "value"),
)
def update_vtk_view(value):
    if value is None:
        return dash.no_update
    return views[value], np.random.random()

I am trying to load a mesh/multiple meshes I created with vedo which is based off vtk. Upon loading into the dash I get a type error for Mesh is not JSON serializable. Any suggestions on how to fix?

Thanks

About

Description of changes

Pre-Merge checklist

• [ ] The project was correctly built with npm run build.
• [ ] If there was any conflict, it was solved correctly.
• [ ] All changes were documented in CHANGELOG.md.
• [ ] All tests on CircleCI have passed.
• [ ] All Percy visual changes have been approved.
• [ ] Two people have :dancer:'d the pull request. You can be one of these people if you are a Dash core contributor.

Reference Issues

Closes #[issue number]

Other comments

Wow the user guide is really great! Just minor details:

• Some parts include react code (see example). Should we modify them to be Dash code?
• I'm not sure whether it's possible to import those modules since they start with numbers. Will think about it but might need to rename them if I can't use importlib; would that be ok?

I'd like to set the camera location, depth of view, etc. via code, but I cannot find any way to do this. Is it possible to add this as a feature? Is there a workaround I could use in the meantime?

Thanks, and thanks for all the great work!

Hello everyone!

I'm building a web app using dash_vtk in python to visualize CFD data, so for now 3D surfaces coloured based on some parameter value like pressure. So far everything's good, but can't activate the colour legend and I saw no example with it, so I'm starting to question if it is possible at this point. To be clear, I'd like to be able to associate a value to the colours I'm seeing. I saw the example with the F1 car where values are displayed when hovering, but I'd prefer a simple scale. Is it possible?

Thank you, Franco

I feel the triggerRender is a bit clunky and makes it impossible to have more than one callback that updates a given view. how much effort would it be to make that implicit?

EDIT: Ok so it already works with the trigger render, so let's remove it from the demos:

• [ ] usage-vtk-cfd
• [ ] slice-rendering
• [ ]

What was tried

Over the weekend I was able to incorporate React.lazy and React.Suspense for each of the components. To do that, I created some modules:

• src/lib/ReactVTK.js: This module simply imports and export the react-vtk-js library, which is needed in order to use the webpackChunkName functionality added in webpack and create a async-ReactVTK.js file.
• src/lib/AsyncReactVTK.js: This module contains a AsyncComponentBuilder function. It creates an async function that returns a module-like object, which we can then pass to React.lazy without causing errors. Later on (inside the components definition), it gets rendered correctly by React.Suspense (in theory only). This is the component builder function I used: https://github.com/plotly/dash-vtk/blob/4cd17de0abdd967b4980ba74bde0259ca949a59f/src/lib/AsyncReactVTK.js#L5-L15 (I'm happy to hop on a call to explain how I got to this).

I also brought some modifications to the files:

• webpack.config.js: Some changes in lazy-loading (see https://github.com/plotly/dash-vtk/pull/29), no change here. Mostly code for chunk splitting in order to allow async.
• package.json: Some changes in lazy-loading (see https://github.com/plotly/dash-vtk/pull/29), no change here. Added a few packages that were necessary to use the new webpack optimization.
• src/lib/components: Each component here was updated such that the import came from AsyncReactVTK.js instead of react-vtk-js, and also the component outputted is wrapped with a React.Suspense.
• dash_vtk/__init__.py: The following elements were added to _js_dist in order to load the async fragment:

{
    'relative_package_path': 'async-ReactVTK.js',
    'external_url': 'https://unpkg.com/{0}@{2}/{1}/async-ReactVTK.js'.format(package_name, __name__, __version__),
    'namespace': package_name,
    'async': True
},
{
    'relative_package_path': 'async-ReactVTK.js.map',
    'external_url': 'https://unpkg.com/{0}@{2}/{1}/async-ReactVTK.js.map'.format(package_name, __name__, __version__),
    'namespace': package_name,
    'dynamic': True
}

What worked

Rendering the simplest possible app, i.e. an empty dash_vtk.View worked with this new approach; no error was found in the console. Moreover, I tried with usage.py, which yielded this result:

So it partially worked in the sense that the cone and the starwars obj were rendered correctly, but not the colored pane in the back. Moreover, very simple demos like the synthetic-volume-rendering and t05_reader seemed to work as well. Additionally, some apps seem to load after a few seconds, but the intiial view is completely broken (you have to zoom out and drag it around to have the correct view; this didn't happen before):

What didn't work

Most of the apps (except maybe two) have problems in some way or another. In many cases, the app is completely broken and can't be used at all. Here are two examples of issues with the apps:

• [ ] slice-rendering: Getting this error in the console:

  Uncaught TypeError: Failed to execute 'bindTexture' on 'WebGL2RenderingContext': parameter 2 is not of type 'WebGLTexture'.
  

• [ ] volume-rendering: Getting this error in the console:

  dash_renderer.v1_9_1m1618031064.dev.js:100499 TypeError: Failed to execute 'bindTexture' on 'WebGL2RenderingContext': parameter 2 is not of type 'WebGLTexture'.
   at Object.Ln.e.bind (async-ReactVTK.v0_0_7m1618261439.js:2)
   at Object.Ln.e.activate (async-ReactVTK.v0_0_7m1618261439.js:2)
   at Object.Io.e.renderPieceDraw (async-ReactVTK.v0_0_7m1618261439.js:2)
   at Object.Io.e.renderPiece (async-ReactVTK.v0_0_7m1618261439.js:2)
   at Io.e.volumePass (async-ReactVTK.v0_0_7m1618261439.js:2)
   at Object.e.apply (async-ReactVTK.v0_0_7m1618261439.js:2)
   at Object.e.traverse (async-ReactVTK.v0_0_7m1618261439.js:2)
   at e.traverseVolumePass (async-ReactVTK.v0_0_7m1618261439.js:2)
   at Object.e.traverse (async-ReactVTK.v0_0_7m1618261439.js:2)
   at Object.e.traverse (async-ReactVTK.v0_0_7m1618261439.js:2)
  

Not actual async loading

~~Moreover, I also noticed that when I import dash_vtk inside an app that doesn't use dash_vtk at all, it will still load async-ReactVTK.js, which is the new file with 500kb:~~

~~So although we have correctly implemented async, something inside the react-vtk-js initialization code forces this file to still be loaded; unfortunately i do not have insight on that.~~

UPDATE: In f6b8c8a2fb26063d3b5e707c4ce787d507bb4fa4, I moved the the import('./ReactVTK') call inside the builder function and that seemed to have resolved that issue. Furthermore, it seems like the colored pane in usage.py works correctly now.

Next step

So far, @jdamiba and I successfully achieved the suggested approach from a React perspective by using React.lazy and React.Suspense; we also used the same approach as dash-core-components for loading the components (install extra packages in package.json, add custom webpack commands, use webpackChunkName in the import calls, etc), albeit with minor modifications through the AsyncComponentBuilder function, which I highlight doubt is the cause of the problems here.

As a next step, it would be amazing if @jourdain takes a look at this branch (specifically, the new and modified files in src/lib) and decide whether more development will be needed (in react-vtk-js or in dash-vtk's JS code) in order to achieve the async functionality that we added in this branch.

Furthermore, I think it'd be beneficial if @alexcjohnson @Marc-Andre-Rivet reviews our tentative approach to determine if there's a simple fix that @jdamiba and I missed, or if we are doing something wrong.

In demo page's SourceViewer demo, we can see that the component is updated every time the slider is dragged:

However, the same demo in Dash doesn't automatically update the component when the callback is fired by the slider; instead, you have to click on the canvas:

Any idea why this might happen?

Description

Attached mesh is not correctly plotted with Dash VTK. No issue with ParaView or PyVista. No problem with simpler meshes with Dash VTK.

mesh.zip

Steps/Code to Reproduce

import dash
import dash_vtk
from dash_vtk.utils import to_mesh_state
import pyvista

mesh = pyvista.read("mesh.dat")
mesh_state = to_mesh_state(mesh)

app = dash.Dash(__name__)
app.layout = dash.html.Div(
    dash_vtk.View(
        dash_vtk.GeometryRepresentation(
            dash_vtk.Mesh(state=mesh_state),
            property={"edgeVisibility": True},
        ),
        cameraPosition=[1005.0, -5000.0, -1500.0],
        cameraViewUp=[0.0, 0.0, 1.0],
    ),
    style={"width": "600px", "height": "600px"},
)

if __name__ == "__main__":
    app.run_server(debug=True)

Expected Results

Actual Results

Versions

dash == 2.0.0 dash_vtk == 0.0.9

Description

formula prop available in Python, though JS formulae are unusable from Python.

Steps/Code to Reproduce

In the python REPL run:

help (dash_vtk.Calculator)

We see there is a prop formula available, but JS formulae are unusable from Python

Expected Results

Only have props that can be used in Python

Actual Results

formula is available.

Versions

Dash 2.0.0 :3: UserWarning: The dash_html_components package is deprecated. Please replace import dash_html_components as html with from dash import html import dash_html_components; print("Dash Core Components", dash_html_components.version) Dash Core Components 2.0.0 :4: UserWarning: The dash_core_components package is deprecated. Please replace import dash_core_components as dcc with from dash import dcc import dash_core_components; print("Dash HTML Components", dash_core_components.version) Dash HTML Components 2.0.0 Dash VTK 0.0.9

@alexcjohnson

Description

I am unable to reproduce the README example of R.

Code to Reproduce

The original R code provided in README have some ending ")" missing. I added them and the id property in vtkView as well but the rest remains the same.

library(dash)
library(dashVtk)
library(dashHtmlComponents)

app <- Dash$new()

app$layout(
    htmlDiv(id = "outerDiv",
        style = list("width" = "100%", "height" = "calc(100vh - 16px)"),
        children = vtkView(
            id = "vtkview",
            list(
                vtkGeometryRepresentation(
                    vtkAlgorithm(
                        vtkClass = "vtkConeSource",
                        state = list("resolution" = 64, "capping" = FALSE),
                    )
                )
            )
        )
    )
)

app$run_server()

Results

The browser (either chrome or safari) opens the app exposed on localhost but the page is entirely blank, not showing anything. In fact, the R console shows the following warning: warning: The dependency 'async-reactvtk.js' could not be loaded; the file was not found. from NULL

I'm wondering if the above dependency was not added to the package.

Versions

> sapply(c("dashVtk", "dash", "dashHtmlComponents"), packageVersion, USE.NAMES = T)
$dashVtk
[1] '0.0.9'
$dash
[1] '0.5.0'
$dashHtmlComponents
[1] '1.0.3'

> R.Version()$platform
[1] "x86_64-apple-darwin15.6.0"
> R.Version()$version.string
[1] "R version 3.6.0 (2019-04-26)"

Thanks for your attention and for providing this integration between Dash and VTK.

See readme https://github.com/lizzjs/dash-vtk

@jourdain this seems out of my domain, do you think this is an easy fix or something that can be added to docs?

For VolumeRepresentation, I use some codes like: dash_vtk.VolumeRepresentation( id='vol', colorMapPreset='jet', colorDataRange=[0,255], children=..... ),

it works fine~

but in SliceRepresentation, I use: dash_vtk.SliceRepresentation( id="slice-x", xSlice=128, colorMapPreset='jet', colorDataRange=[120,255], children=dash_vtk.ShareDataSet(), ),

nothing happened....it is still in grayscale on the slicer why?

Hi,

First of all thank you for the awesome work on interfacing dash and VTK! Coming from the Python world, I was really impressed how smoothly I could move from my usual Python vtk tools to dash_vtk (thanks for that utils module ;) )

I was wondering if there could be an easy way for users to introduce their own custom colormap presets in a Representation, something I can imagine a lot of people would want to do at some point... (No matter how many options are available, I guess there will always be THAT crucial one missing...)

Would it be possible to go beyond the provided list, or is it a limitation that comes already from vtk.js? I'm thinking of a simple syntax reflecting the presets definition like this one:

view = dash_vtk.View(
    dash_vtk.GeometryRepresentation(
        children=[...],
        colorMapPreset= {
            'ColorSpace' : 'RGB',
            'Name' : 'gray',
            'RGBPoints' : [0, 0, 0, 0,
                           1, 1, 1, 1]
        }
    )
)

But there might be other options... I was expecting to have such an option through the mapper argument of the Representation, being used to do a mapper.setLookupTable, but I failed to find out how exactly the colormap information is passed to the mapper...

Thank you!