Add async loading to reduce package size (#29)

* Change import path

* npm run build

* Add babel's plugin-syntax-dynamic-import

Enables the use of the import function inside react for React.lazy

* Add LazyComponents module

This exports lazy components which are imported
in the respective component scripts. This is needed
in order for dash to detect the component and add it
to _imports_.py

* Update View.react.js to use async component

* npm run build

* npm run build

* npm i && npm run build

* install @plotly/webpack-dash-dynamic-import

* npm i terser-webpack-plugin --save-dev

* Add rules and optimization to webpack.config.js

* change terser-webpack-plugin to v2.x

* npm run build

* Upgrade react-vtk-js to 1.2.2

* npm run build

* Remove use of Suspense in View.react.js

* npm run build

* npm run build

* install dash-components-plugins

* npm run build

* Try to use suspense/lazy (#40)

* tried stuff

* ok let's go back to where it was before

* tried some more stuff that seems to make it work?

* set async to true

* Add usage simple, simplify import structure

* Generalized the async component with a async component builder function

Temporarily commenting out the other components that were causing problem

* Expand async to more components; usage.py now runs but still white square

* Improve naming for clarity

* Replace all with async react vtk

* Add more components to async-react-vtk, make builder more verbose

* Wrap Mesh with lazy/suspense

* npm run build

* Fix incorrect source map

* Add tests for docs tutorials

* Move the async import call inside the builder function

* npm run build

* Tests: Increase sleep time for demo, decrease for tutorials

* fix typo in usage-vtk-cfd

* update react-vtk-js to 1.4.1

* update generated files

* trigger circleci

* update react-vtk-js to 1.4.2

* update generated files

* trigger ci

* Apply black to all tests and usage files

* Remove dummy app

* Update code to be eslint compliant

* run build

Co-authored-by: Sebastien Jourdain <sebastien.jourdain@kitware.com>

* Add async files to manifest.in

* update react-vtk-js to 1.4.3

* Upgrade react-vtk-js to 1.5.0

* Remove 🔪 unused module and cache group

* npm run build

Co-authored-by: Sebastien Jourdain <sebastien.jourdain@kitware.com>
Co-authored-by: Joseph Damiba <joseph.damiba@plot.ly>

.gitignore

@@ -278,3 +278,4 @@ GitHub.sublime-settings
 dash_vtk/output.js
 *deps/output.js
 .vscode/settings.json
+.build_cache

MANIFEST.in

@@ -1,5 +1,7 @@
 include dash_vtk/dash_vtk.min.js
 include dash_vtk/dash_vtk.min.js.map
+include dash_vtk/async-ReactVTK.js
+include dash_vtk/async-ReactVTK.js.map
 include dash_vtk/metadata.json
 include dash_vtk/package-info.json
 include README.md

R/internal.R

@@ -10,6 +10,18 @@ version = "0.0.7", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'dash_vtk.min.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashVtk",
+all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
+`dash_vtk` = structure(list(name = "dash_vtk",
+version = "0.0.7", src = list(href = NULL,
+file = "deps"), meta = NULL,
+script = 'async-ReactVTK.js',
+stylesheet = NULL, head = NULL, attachment = NULL, package = "dashVtk",
+all_files = FALSE, async = TRUE), class = "html_dependency"),
+`dash_vtk` = structure(list(name = "dash_vtk",
+version = "0.0.7", src = list(href = NULL,
+file = "deps"), meta = NULL,
+script = 'async-ReactVTK.js.map',
+stylesheet = NULL, head = NULL, attachment = NULL, package = "dashVtk",
 all_files = FALSE, dynamic = TRUE), class = "html_dependency"))
 return(deps_metadata)
 }

R/vtkAlgorithm.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-vtkAlgorithm <- function(children=NULL, id=NULL, port=NULL, vtkClass=NULL, state=NULL) {
+vtkAlgorithm <- function(children=NULL, id=NULL, port=NULL, state=NULL, vtkClass=NULL) {
 
-    props <- list(children=children, id=id, port=port, vtkClass=vtkClass, state=state)
+    props <- list(children=children, id=id, port=port, state=state, vtkClass=vtkClass)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'Algorithm',
         namespace = 'dash_vtk',
-        propNames = c('children', 'id', 'port', 'vtkClass', 'state'),
+        propNames = c('children', 'id', 'port', 'state', 'vtkClass'),
         package = 'dashVtk'
         )
 

R/vtkCalculator.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-vtkCalculator <- function(children=NULL, id=NULL, port=NULL, name=NULL, location=NULL, arrays=NULL, formula=NULL) {
+vtkCalculator <- function(children=NULL, id=NULL, arrays=NULL, formula=NULL, location=NULL, name=NULL, port=NULL) {
 
-    props <- list(children=children, id=id, port=port, name=name, location=location, arrays=arrays, formula=formula)
+    props <- list(children=children, id=id, arrays=arrays, formula=formula, location=location, name=name, port=port)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'Calculator',
         namespace = 'dash_vtk',
-        propNames = c('children', 'id', 'port', 'name', 'location', 'arrays', 'formula'),
+        propNames = c('children', 'id', 'arrays', 'formula', 'location', 'name', 'port'),
         package = 'dashVtk'
         )
 

R/vtkDataArray.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-vtkDataArray <- function(id=NULL, type=NULL, name=NULL, values=NULL, numberOfComponents=NULL, registration=NULL) {
+vtkDataArray <- function(id=NULL, name=NULL, numberOfComponents=NULL, registration=NULL, type=NULL, values=NULL) {
 
-    props <- list(id=id, type=type, name=name, values=values, numberOfComponents=numberOfComponents, registration=registration)
+    props <- list(id=id, name=name, numberOfComponents=numberOfComponents, registration=registration, type=type, values=values)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'DataArray',
         namespace = 'dash_vtk',
-        propNames = c('id', 'type', 'name', 'values', 'numberOfComponents', 'registration'),
+        propNames = c('id', 'name', 'numberOfComponents', 'registration', 'type', 'values'),
         package = 'dashVtk'
         )
 

R/vtkGeometryRepresentation.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-vtkGeometryRepresentation <- function(children=NULL, id=NULL, actor=NULL, mapper=NULL, property=NULL, colorMapPreset=NULL, colorDataRange=NULL, showCubeAxes=NULL, cubeAxesStyle=NULL) {
+vtkGeometryRepresentation <- function(children=NULL, id=NULL, actor=NULL, colorDataRange=NULL, colorMapPreset=NULL, cubeAxesStyle=NULL, mapper=NULL, property=NULL, showCubeAxes=NULL) {
 
-    props <- list(children=children, id=id, actor=actor, mapper=mapper, property=property, colorMapPreset=colorMapPreset, colorDataRange=colorDataRange, showCubeAxes=showCubeAxes, cubeAxesStyle=cubeAxesStyle)
+    props <- list(children=children, id=id, actor=actor, colorDataRange=colorDataRange, colorMapPreset=colorMapPreset, cubeAxesStyle=cubeAxesStyle, mapper=mapper, property=property, showCubeAxes=showCubeAxes)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'GeometryRepresentation',
         namespace = 'dash_vtk',
-        propNames = c('children', 'id', 'actor', 'mapper', 'property', 'colorMapPreset', 'colorDataRange', 'showCubeAxes', 'cubeAxesStyle'),
+        propNames = c('children', 'id', 'actor', 'colorDataRange', 'colorMapPreset', 'cubeAxesStyle', 'mapper', 'property', 'showCubeAxes'),
         package = 'dashVtk'
         )
 

R/vtkGlyphRepresentation.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-vtkGlyphRepresentation <- function(children=NULL, id=NULL, actor=NULL, mapper=NULL, property=NULL, colorMapPreset=NULL, colorDataRange=NULL) {
+vtkGlyphRepresentation <- function(children=NULL, id=NULL, actor=NULL, colorDataRange=NULL, colorMapPreset=NULL, mapper=NULL, property=NULL) {
 
-    props <- list(children=children, id=id, actor=actor, mapper=mapper, property=property, colorMapPreset=colorMapPreset, colorDataRange=colorDataRange)
+    props <- list(children=children, id=id, actor=actor, colorDataRange=colorDataRange, colorMapPreset=colorMapPreset, mapper=mapper, property=property)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'GlyphRepresentation',
         namespace = 'dash_vtk',
-        propNames = c('children', 'id', 'actor', 'mapper', 'property', 'colorMapPreset', 'colorDataRange'),
+        propNames = c('children', 'id', 'actor', 'colorDataRange', 'colorMapPreset', 'mapper', 'property'),
         package = 'dashVtk'
         )
 

R/vtkImageData.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-vtkImageData <- function(children=NULL, id=NULL, port=NULL, dimensions=NULL, spacing=NULL, origin=NULL, direction=NULL) {
+vtkImageData <- function(children=NULL, id=NULL, dimensions=NULL, direction=NULL, origin=NULL, port=NULL, spacing=NULL) {
 
-    props <- list(children=children, id=id, port=port, dimensions=dimensions, spacing=spacing, origin=origin, direction=direction)
+    props <- list(children=children, id=id, dimensions=dimensions, direction=direction, origin=origin, port=port, spacing=spacing)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'ImageData',
         namespace = 'dash_vtk',
-        propNames = c('children', 'id', 'port', 'dimensions', 'spacing', 'origin', 'direction'),
+        propNames = c('children', 'id', 'dimensions', 'direction', 'origin', 'port', 'spacing'),
         package = 'dashVtk'
         )
 

R/vtkPointCloudRepresentation.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-vtkPointCloudRepresentation <- function(xyz=NULL, rgb=NULL, rgba=NULL, scalars=NULL, colorMapPreset=NULL, colorDataRange=NULL, property=NULL) {
+vtkPointCloudRepresentation <- function(colorDataRange=NULL, colorMapPreset=NULL, property=NULL, rgb=NULL, rgba=NULL, scalars=NULL, xyz=NULL) {
 
-    props <- list(xyz=xyz, rgb=rgb, rgba=rgba, scalars=scalars, colorMapPreset=colorMapPreset, colorDataRange=colorDataRange, property=property)
+    props <- list(colorDataRange=colorDataRange, colorMapPreset=colorMapPreset, property=property, rgb=rgb, rgba=rgba, scalars=scalars, xyz=xyz)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'PointCloudRepresentation',
         namespace = 'dash_vtk',
-        propNames = c('xyz', 'rgb', 'rgba', 'scalars', 'colorMapPreset', 'colorDataRange', 'property'),
+        propNames = c('colorDataRange', 'colorMapPreset', 'property', 'rgb', 'rgba', 'scalars', 'xyz'),
         package = 'dashVtk'
         )
 

R/vtkPolyData.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-vtkPolyData <- function(children=NULL, id=NULL, port=NULL, points=NULL, verts=NULL, lines=NULL, polys=NULL, strips=NULL, connectivity=NULL) {
+vtkPolyData <- function(children=NULL, id=NULL, connectivity=NULL, lines=NULL, points=NULL, polys=NULL, port=NULL, strips=NULL, verts=NULL) {
 
-    props <- list(children=children, id=id, port=port, points=points, verts=verts, lines=lines, polys=polys, strips=strips, connectivity=connectivity)
+    props <- list(children=children, id=id, connectivity=connectivity, lines=lines, points=points, polys=polys, port=port, strips=strips, verts=verts)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'PolyData',
         namespace = 'dash_vtk',
-        propNames = c('children', 'id', 'port', 'points', 'verts', 'lines', 'polys', 'strips', 'connectivity'),
+        propNames = c('children', 'id', 'connectivity', 'lines', 'points', 'polys', 'port', 'strips', 'verts'),
         package = 'dashVtk'
         )
 

R/vtkReader.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-vtkReader <- function(children=NULL, id=NULL, port=NULL, vtkClass=NULL, url=NULL, parseAsText=NULL, parseAsArrayBuffer=NULL, renderOnUpdate=NULL, resetCameraOnUpdate=NULL) {
+vtkReader <- function(children=NULL, id=NULL, parseAsArrayBuffer=NULL, parseAsText=NULL, port=NULL, renderOnUpdate=NULL, resetCameraOnUpdate=NULL, url=NULL, vtkClass=NULL) {
 
-    props <- list(children=children, id=id, port=port, vtkClass=vtkClass, url=url, parseAsText=parseAsText, parseAsArrayBuffer=parseAsArrayBuffer, renderOnUpdate=renderOnUpdate, resetCameraOnUpdate=resetCameraOnUpdate)
+    props <- list(children=children, id=id, parseAsArrayBuffer=parseAsArrayBuffer, parseAsText=parseAsText, port=port, renderOnUpdate=renderOnUpdate, resetCameraOnUpdate=resetCameraOnUpdate, url=url, vtkClass=vtkClass)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'Reader',
         namespace = 'dash_vtk',
-        propNames = c('children', 'id', 'port', 'vtkClass', 'url', 'parseAsText', 'parseAsArrayBuffer', 'renderOnUpdate', 'resetCameraOnUpdate'),
+        propNames = c('children', 'id', 'parseAsArrayBuffer', 'parseAsText', 'port', 'renderOnUpdate', 'resetCameraOnUpdate', 'url', 'vtkClass'),
         package = 'dashVtk'
         )
 

R/vtkShareDataSet.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-vtkShareDataSet <- function(children=NULL, id=NULL, port=NULL, name=NULL) {
+vtkShareDataSet <- function(children=NULL, id=NULL, name=NULL, port=NULL) {
 
-    props <- list(children=children, id=id, port=port, name=name)
+    props <- list(children=children, id=id, name=name, port=port)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'ShareDataSet',
         namespace = 'dash_vtk',
-        propNames = c('children', 'id', 'port', 'name'),
+        propNames = c('children', 'id', 'name', 'port'),
         package = 'dashVtk'
         )
 

R/vtkSliceRepresentation.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-vtkSliceRepresentation <- function(children=NULL, id=NULL, mapper=NULL, actor=NULL, property=NULL, colorMapPreset=NULL, colorDataRange=NULL, iSlice=NULL, jSlice=NULL, kSlice=NULL, xSlice=NULL, ySlice=NULL, zSlice=NULL) {
+vtkSliceRepresentation <- function(children=NULL, id=NULL, actor=NULL, colorDataRange=NULL, colorMapPreset=NULL, iSlice=NULL, jSlice=NULL, kSlice=NULL, mapper=NULL, property=NULL, xSlice=NULL, ySlice=NULL, zSlice=NULL) {
 
-    props <- list(children=children, id=id, mapper=mapper, actor=actor, property=property, colorMapPreset=colorMapPreset, colorDataRange=colorDataRange, iSlice=iSlice, jSlice=jSlice, kSlice=kSlice, xSlice=xSlice, ySlice=ySlice, zSlice=zSlice)
+    props <- list(children=children, id=id, actor=actor, colorDataRange=colorDataRange, colorMapPreset=colorMapPreset, iSlice=iSlice, jSlice=jSlice, kSlice=kSlice, mapper=mapper, property=property, xSlice=xSlice, ySlice=ySlice, zSlice=zSlice)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'SliceRepresentation',
         namespace = 'dash_vtk',
-        propNames = c('children', 'id', 'mapper', 'actor', 'property', 'colorMapPreset', 'colorDataRange', 'iSlice', 'jSlice', 'kSlice', 'xSlice', 'ySlice', 'zSlice'),
+        propNames = c('children', 'id', 'actor', 'colorDataRange', 'colorMapPreset', 'iSlice', 'jSlice', 'kSlice', 'mapper', 'property', 'xSlice', 'ySlice', 'zSlice'),
         package = 'dashVtk'
         )
 

R/vtkView.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-vtkView <- function(children=NULL, id=NULL, style=NULL, className=NULL, background=NULL, interactorSettings=NULL, cameraPosition=NULL, cameraViewUp=NULL, cameraParallelProjection=NULL, triggerRender=NULL, triggerResetCamera=NULL, pickingModes=NULL, clickInfo=NULL, hoverInfo=NULL) {
+vtkView <- function(children=NULL, id=NULL, background=NULL, cameraParallelProjection=NULL, cameraPosition=NULL, cameraViewUp=NULL, className=NULL, clickInfo=NULL, hoverInfo=NULL, interactorSettings=NULL, pickingModes=NULL, style=NULL, triggerRender=NULL, triggerResetCamera=NULL) {
 
-    props <- list(children=children, id=id, style=style, className=className, background=background, interactorSettings=interactorSettings, cameraPosition=cameraPosition, cameraViewUp=cameraViewUp, cameraParallelProjection=cameraParallelProjection, triggerRender=triggerRender, triggerResetCamera=triggerResetCamera, pickingModes=pickingModes, clickInfo=clickInfo, hoverInfo=hoverInfo)
+    props <- list(children=children, id=id, background=background, cameraParallelProjection=cameraParallelProjection, cameraPosition=cameraPosition, cameraViewUp=cameraViewUp, className=className, clickInfo=clickInfo, hoverInfo=hoverInfo, interactorSettings=interactorSettings, pickingModes=pickingModes, style=style, triggerRender=triggerRender, triggerResetCamera=triggerResetCamera)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'View',
         namespace = 'dash_vtk',
-        propNames = c('children', 'id', 'style', 'className', 'background', 'interactorSettings', 'cameraPosition', 'cameraViewUp', 'cameraParallelProjection', 'triggerRender', 'triggerResetCamera', 'pickingModes', 'clickInfo', 'hoverInfo'),
+        propNames = c('children', 'id', 'background', 'cameraParallelProjection', 'cameraPosition', 'cameraViewUp', 'className', 'clickInfo', 'hoverInfo', 'interactorSettings', 'pickingModes', 'style', 'triggerRender', 'triggerResetCamera'),
         package = 'dashVtk'
         )
 

R/vtkVolumeController.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-vtkVolumeController <- function(id=NULL, size=NULL, rescaleColorMap=NULL) {
+vtkVolumeController <- function(id=NULL, rescaleColorMap=NULL, size=NULL) {
 
-    props <- list(id=id, size=size, rescaleColorMap=rescaleColorMap)
+    props <- list(id=id, rescaleColorMap=rescaleColorMap, size=size)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'VolumeController',
         namespace = 'dash_vtk',
-        propNames = c('id', 'size', 'rescaleColorMap'),
+        propNames = c('id', 'rescaleColorMap', 'size'),
         package = 'dashVtk'
         )
 

R/vtkVolumeDataRepresentation.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-vtkVolumeDataRepresentation <- function(id=NULL, dimensions=NULL, spacing=NULL, origin=NULL, rgb=NULL, rgba=NULL, scalars=NULL, scalarsType=NULL, mapper=NULL, volume=NULL, property=NULL, colorMapPreset=NULL, volumeController=NULL, controllerSize=NULL, rescaleColorMap=NULL, colorDataRange=NULL) {
+vtkVolumeDataRepresentation <- function(id=NULL, colorDataRange=NULL, colorMapPreset=NULL, controllerSize=NULL, dimensions=NULL, mapper=NULL, origin=NULL, property=NULL, rescaleColorMap=NULL, rgb=NULL, rgba=NULL, scalars=NULL, scalarsType=NULL, spacing=NULL, volume=NULL, volumeController=NULL) {
 
-    props <- list(id=id, dimensions=dimensions, spacing=spacing, origin=origin, rgb=rgb, rgba=rgba, scalars=scalars, scalarsType=scalarsType, mapper=mapper, volume=volume, property=property, colorMapPreset=colorMapPreset, volumeController=volumeController, controllerSize=controllerSize, rescaleColorMap=rescaleColorMap, colorDataRange=colorDataRange)
+    props <- list(id=id, colorDataRange=colorDataRange, colorMapPreset=colorMapPreset, controllerSize=controllerSize, dimensions=dimensions, mapper=mapper, origin=origin, property=property, rescaleColorMap=rescaleColorMap, rgb=rgb, rgba=rgba, scalars=scalars, scalarsType=scalarsType, spacing=spacing, volume=volume, volumeController=volumeController)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'VolumeDataRepresentation',
         namespace = 'dash_vtk',
-        propNames = c('id', 'dimensions', 'spacing', 'origin', 'rgb', 'rgba', 'scalars', 'scalarsType', 'mapper', 'volume', 'property', 'colorMapPreset', 'volumeController', 'controllerSize', 'rescaleColorMap', 'colorDataRange'),
+        propNames = c('id', 'colorDataRange', 'colorMapPreset', 'controllerSize', 'dimensions', 'mapper', 'origin', 'property', 'rescaleColorMap', 'rgb', 'rgba', 'scalars', 'scalarsType', 'spacing', 'volume', 'volumeController'),
         package = 'dashVtk'
         )
 

R/vtkVolumeRepresentation.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-vtkVolumeRepresentation <- function(children=NULL, id=NULL, mapper=NULL, volume=NULL, property=NULL, colorMapPreset=NULL, colorDataRange=NULL) {
+vtkVolumeRepresentation <- function(children=NULL, id=NULL, colorDataRange=NULL, colorMapPreset=NULL, mapper=NULL, property=NULL, volume=NULL) {
 
-    props <- list(children=children, id=id, mapper=mapper, volume=volume, property=property, colorMapPreset=colorMapPreset, colorDataRange=colorDataRange)
+    props <- list(children=children, id=id, colorDataRange=colorDataRange, colorMapPreset=colorMapPreset, mapper=mapper, property=property, volume=volume)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'VolumeRepresentation',
         namespace = 'dash_vtk',
-        propNames = c('children', 'id', 'mapper', 'volume', 'property', 'colorMapPreset', 'colorDataRange'),
+        propNames = c('children', 'id', 'colorDataRange', 'colorMapPreset', 'mapper', 'property', 'volume'),
         package = 'dashVtk'
         )