Refactor demos - Remove unused files, change requirements linking, remove headers (#16)

* Update demo's component ID

Changing it to avoid duplicate in multi-page
(wrt other apps with the same ID)

* Remove unused files

Procfile and runtime.txt are not needed to run those demo,
only for hosting

* Update requirements linking in demos

Move the requirements.txt to demos, and link to that file from
tests/requirements.txt

* Add missing requirements to the demos

* Refactor pyvista-point-cloud

- Remove bootstrap dependencies
- Decrease subset
- Remove Columns/Rows

* Refactor terrain mesh demo

- Change row heights to %
- Remove title
- Change vtk height/width to %

* Refactor synthetic volume rendering demo

- Change vtk height/width to %

* Refactor usage algorithm

- Change row heights to %
- Remove title
- Change vtk height/width to %

* Refactor VTK-CFD demo

- Change row heights to %
- Remove title
- Change vtk height/width to %

* Refactor volume rendering demo

- Change vtk height/width to %

* Refactor slice rendering demo

- change card style from vh to %
- change row height to %
- Remove title
- change controls to vertically centered

* Run black on demos

Author: Xing Han Lu

demos/pyvista-point-cloud/Procfile

@@ -1,6 +1,5 @@
 import dash
 import dash_vtk
-import dash_bootstrap_components as dbc
 import dash_html_components as html
 import dash_core_components as dcc
 from dash.dependencies import Input, Output, State
@@ -11,7 +10,7 @@
 
 # Get point cloud data from PyVista
 dataset = examples.download_lidar()
-subset = 0.5
+subset = 0.2
 selection = np.random.randint(
     low=0, high=dataset.n_points - 1, size=int(dataset.n_points * subset)
 )
@@ -24,7 +23,7 @@
 print(f"Elevation range: [{min_elevation}, {max_elevation}]")
 
 # Setup VTK rendering of PointCloud
-app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
+app = dash.Dash(__name__)
 server = app.server
 
 vtk_view = dash_vtk.View(
@@ -38,25 +37,9 @@
     ]
 )
 
-app.layout = dbc.Container(
-    fluid=True,
-    children=[
-        html.H1("Demo of dash_vtk.PointCloudRepresentation"),
-        html.Hr(),
-        dbc.Row(
-            [
-                dbc.Col(
-                    width=12,
-                    children=[
-                        html.Div(
-                            vtk_view,
-                            style={"height": "calc(80vh - 20px)", "width": "100%"},
-                        )
-                    ],
-                ),
-            ]
-        ),
-    ],
+app.layout = html.Div(
+    style={"height": "calc(100vh - 16px)"},
+    children=[html.Div(vtk_view, style={"height": "100%", "width": "100%"})],
 )
 
 if __name__ == "__main__":

demos/pyvista-point-cloud/app.py

@@ -1,5 +1,4 @@
 # If you skipped `pip install -e ../../`, the package below will be retrieved from pypi:
 dash-vtk
-dash-bootstrap-components
 pyvista
 numpy

demos/pyvista-point-cloud/requirements.txt

@@ -75,48 +75,33 @@ def updateWarp(factor=1):
 
 app.layout = dbc.Container(
     fluid=True,
+    style={"height": "100vh"},
     children=[
         dbc.Row(
             [
-                dbc.Col(width=6, children=[html.H1("Terrain deformation"),]),
                 dbc.Col(
-                    width=3,
-                    children=[
-                        dcc.Slider(
-                            id="scale-factor",
-                            min=0.1,
-                            max=5,
-                            step=0.1,
-                            value=1,
-                            marks={0.1: "0.1", 5: "5"},
-                        ),
-                    ],
+                    children=dcc.Slider(
+                        id="scale-factor",
+                        min=0.1,
+                        max=5,
+                        step=0.1,
+                        value=1,
+                        marks={0.1: "0.1", 5: "5"},
+                    )
                 ),
                 dbc.Col(
-                    width=3,
-                    children=[
-                        dcc.Dropdown(
-                            id="dropdown-preset",
-                            options=list(map(toDropOption, presets)),
-                            value="erdc_rainbow_bright",
-                        ),
-                    ],
+                    children=dcc.Dropdown(
+                        id="dropdown-preset",
+                        options=list(map(toDropOption, presets)),
+                        value="erdc_rainbow_bright",
+                    ),
                 ),
-            ]
+            ],
+            style={"height": "12%", "align-items": "center"},
         ),
-        html.Hr(),
-        dbc.Row(
-            [
-                dbc.Col(
-                    width=12,
-                    children=[
-                        html.Div(
-                            vtk_view,
-                            style={"height": "calc(80vh - 20px)", "width": "100%"},
-                        )
-                    ],
-                ),
-            ]
+        html.Div(
+            html.Div(vtk_view, style={"height": "100%", "width": "100%"}),
+            style={"height": "88%"},
         ),
     ],
 )

demos/pyvista-point-cloud/runtime.txt

@@ -3,3 +3,4 @@ dash-vtk
 dash-bootstrap-components
 pyvista
 numpy
+vtk

demos/pyvista-terrain-following-mesh/Procfile

@@ -0,0 +1,8 @@
+-r ./usage-algorithm/requirements.txt
+-r ./pyvista-terrain-following-mesh/requirements.txt
+-r ./slice-rendering/requirements.txt
+-r ./pyvista-point-cloud/requirements.txt
+-r ./volume-rendering/requirements.txt
+-r ./usage-vtk-cfd/requirements.txt
+-r ./usage-algorithm/requirements.txt
+-r ./synthetic-volume-rendering/requirements.txt

demos/pyvista-terrain-following-mesh/app.py

@@ -30,7 +30,7 @@ def custom_card(children):
     return dbc.Card(
         html.Div(children, style={"height": "100%"}),
         body=True,
-        style={"height": "70vh"},
+        style={"height": "100%"},
     )
 
 
@@ -106,16 +106,18 @@ def custom_card(children):
 
 app.layout = dbc.Container(
     fluid=True,
+    style={"height": "calc(100vh - 30px)"},
     children=[
-        html.H2("Demo of Slice Rendering"),
-        html.Br(),
-        controls,
-        html.Br(),
+        html.Div(
+            style={"height": "20%", "display": "flex", "align-items": "center"},
+            children=[html.Br(), controls, html.Br(),],
+        ),
         dbc.Row(
-            [
+            style={"height": "80%"},
+            children=[
                 dbc.Col(width=6, children=custom_card(slice_view)),
                 dbc.Col(width=6, children=custom_card(volume_view)),
-            ]
+            ],
         ),
     ],
 )

demos/pyvista-terrain-following-mesh/requirements.txt

@@ -9,18 +9,20 @@
 app = dash.Dash(__name__)
 server = app.server
 
+volume_view = dash_vtk.View(
+    children=dash_vtk.VolumeDataRepresentation(
+        spacing=[1, 1, 1],
+        dimensions=[10, 10, 10],
+        origin=[0, 0, 0],
+        scalars=[random.random() for _ in range(1000)],
+        rescaleColorMap=False,
+    )
+)
+
 app.layout = html.Div(
-    style={"height": "calc(100vh - 30px)", "width": "100%",},
+    style={"height": "calc(100vh - 16px)"},
     children=[
-        dash_vtk.View(
-            children=dash_vtk.VolumeDataRepresentation(
-                spacing=[1, 1, 1],
-                dimensions=[10, 10, 10],
-                origin=[0, 0, 0],
-                scalars=[random.random() for _ in range(1000)],
-                rescaleColorMap=False,
-            )
-        )
+        html.Div(children=volume_view, style={"height": "100%", "width": "100%"})
     ],
 )
 

demos/pyvista-terrain-following-mesh/runtime.txt

@@ -13,7 +13,7 @@
 server = app.server
 
 vtk_view = dash_vtk.View(
-    id="vtk-view",
+    id="geometry-view",
     children=[
         dash_vtk.GeometryRepresentation(
             [
@@ -55,29 +55,26 @@
 
 app.layout = dbc.Container(
     fluid=True,
+    style={"margin-top": "15px", "height": "calc(100vh - 30px)"},
     children=[
-        html.H1("Demo of dash_vtk.Algorithm"),
-        html.Hr(),
         dbc.Row(
             [
                 dbc.Col(width=4, children=controls),
                 dbc.Col(
                     width=8,
                     children=[
-                        html.Div(
-                            vtk_view,
-                            style={"height": "calc(80vh - 20px)", "width": "100%"},
-                        )
+                        html.Div(vtk_view, style={"height": "100%", "width": "100%"},)
                     ],
                 ),
-            ]
+            ],
+            style={"height": "100%"},
         ),
     ],
 )
 
 
 @app.callback(
-    [Output("vtk-algorithm", "state"), Output("vtk-view", "triggerResetCamera")],
+    [Output("vtk-algorithm", "state"), Output("geometry-view", "triggerResetCamera")],
     [Input("slider-resolution", "value"), Input("capping-checklist", "value")],
 )
 def update_cone(slider_val, checked_values):