From cbaebe05461fc2f865ba2177c78134d2859fd4a7 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 14:25:40 +0200 Subject: [PATCH 01/33] docs(examples): fix example by making timestamp serializable --- examples/02_vuetify/00_dataframe-table.py | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/02_vuetify/00_dataframe-table.py b/examples/02_vuetify/00_dataframe-table.py index 541113fa..6d1cb230 100644 --- a/examples/02_vuetify/00_dataframe-table.py +++ b/examples/02_vuetify/00_dataframe-table.py @@ -96,6 +96,7 @@ def selection_change(selection=[], **kwargs): chart_data = DATA_FRAME.loc[ :, ["date_time_naive", "apple", "banana", "chocolate"] ].assign(source="total") + chart_data["date_time_naive"] = chart_data["date_time_naive"].astype(str) if not selected_df.empty: selected_data = selected_df.loc[ From 1a7f116117a6cbfd5d35e71a06a3ec891c876dcf Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 14:26:31 +0200 Subject: [PATCH 02/33] docs(examples): make examples work with panda2.2+ --- .../Applications/FiniteElementAnalysis/app_client_view.py | 6 +++--- .../Applications/FiniteElementAnalysis/app_local_view.py | 6 +++--- .../Applications/FiniteElementAnalysis/app_remote_view.py | 6 +++--- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/examples/06_vtk/Applications/FiniteElementAnalysis/app_client_view.py b/examples/06_vtk/Applications/FiniteElementAnalysis/app_client_view.py index 7af93b54..ee698dad 100644 --- a/examples/06_vtk/Applications/FiniteElementAnalysis/app_client_view.py +++ b/examples/06_vtk/Applications/FiniteElementAnalysis/app_client_view.py @@ -74,7 +74,7 @@ def update_grid(nodes_file, elems_file, field_file, **kwargs): df_nodes = pd.read_csv( io.StringIO(nodes_bytes.decode("utf-8")), - delim_whitespace=True, + sep=r"\s+", header=None, skiprows=1, names=["id", "x", "y", "z"], @@ -91,7 +91,7 @@ def update_grid(nodes_file, elems_file, field_file, **kwargs): io.StringIO(elems_bytes.decode("utf-8")), skiprows=1, header=None, - delim_whitespace=True, + sep=r"\s+", engine="python", index_col=None, ).sort_values(0) @@ -165,7 +165,7 @@ def update_grid(nodes_file, elems_file, field_file, **kwargs): field_bytes = b"".join(field_bytes) df_elem_data = pd.read_csv( io.StringIO(field_bytes.decode("utf-8")), - delim_whitespace=True, + sep=r"\s+", header=None, skiprows=1, names=["id", "val"], diff --git a/examples/06_vtk/Applications/FiniteElementAnalysis/app_local_view.py b/examples/06_vtk/Applications/FiniteElementAnalysis/app_local_view.py index 7a56b72d..45123111 100644 --- a/examples/06_vtk/Applications/FiniteElementAnalysis/app_local_view.py +++ b/examples/06_vtk/Applications/FiniteElementAnalysis/app_local_view.py @@ -97,7 +97,7 @@ def update_grid(nodes_file, elems_file, field_file, **kwargs): df_nodes = pd.read_csv( io.StringIO(nodes_bytes.decode("utf-8")), - delim_whitespace=True, + sep=r"\s+", header=None, skiprows=1, names=["id", "x", "y", "z"], @@ -114,7 +114,7 @@ def update_grid(nodes_file, elems_file, field_file, **kwargs): io.StringIO(elems_bytes.decode("utf-8")), skiprows=1, header=None, - delim_whitespace=True, + sep=r"\s+", engine="python", index_col=None, ).sort_values(0) @@ -189,7 +189,7 @@ def update_grid(nodes_file, elems_file, field_file, **kwargs): field_bytes = b"".join(field_bytes) df_elem_data = pd.read_csv( io.StringIO(field_bytes.decode("utf-8")), - delim_whitespace=True, + sep=r"\s+", header=None, skiprows=1, names=["id", "val"], diff --git a/examples/06_vtk/Applications/FiniteElementAnalysis/app_remote_view.py b/examples/06_vtk/Applications/FiniteElementAnalysis/app_remote_view.py index f6145214..0fddd57a 100644 --- a/examples/06_vtk/Applications/FiniteElementAnalysis/app_remote_view.py +++ b/examples/06_vtk/Applications/FiniteElementAnalysis/app_remote_view.py @@ -97,7 +97,7 @@ def update_grid(nodes_file, elems_file, field_file, **kwargs): df_nodes = pd.read_csv( io.StringIO(nodes_bytes.decode("utf-8")), - delim_whitespace=True, + sep=r"\s+", header=None, skiprows=1, names=["id", "x", "y", "z"], @@ -114,7 +114,7 @@ def update_grid(nodes_file, elems_file, field_file, **kwargs): io.StringIO(elems_bytes.decode("utf-8")), skiprows=1, header=None, - delim_whitespace=True, + sep=r"\s+", engine="python", index_col=None, ).sort_values(0) @@ -189,7 +189,7 @@ def update_grid(nodes_file, elems_file, field_file, **kwargs): field_bytes = b"".join(field_bytes) df_elem_data = pd.read_csv( io.StringIO(field_bytes.decode("utf-8")), - delim_whitespace=True, + sep=r"\s+", header=None, skiprows=1, names=["id", "val"], From 77eb2ffe4edb7071a36755cb8c03d5b0c0ebb88d Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 14:27:11 +0200 Subject: [PATCH 03/33] ci(pre-commit): change ruff python version to 3.10 --- pyproject.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pyproject.toml b/pyproject.toml index 57be7aa8..26791340 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -56,7 +56,7 @@ upload_to_vcs_release = true [tool.ruff] line-length = 88 indent-width = 4 -target-version = "py39" +target-version = "py310" [tool.ruff.lint] select = ["E", "W", "F"] From b35ce89bfdefc5a8755a8f45f59ca74d0d06ef0d Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 14:28:13 +0200 Subject: [PATCH 04/33] docs(examples): change broken image link --- examples/06_vtk/Applications/MultiFilter/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/06_vtk/Applications/MultiFilter/README.md b/examples/06_vtk/Applications/MultiFilter/README.md index e6aeb752..8a4d5971 100644 --- a/examples/06_vtk/Applications/MultiFilter/README.md +++ b/examples/06_vtk/Applications/MultiFilter/README.md @@ -1,3 +1,3 @@ # VTK Multi Filter Example -![VTK Multi Filter Example](../../../../docs/content/examples/MultiFilter.jpg) +![VTK Multi Filter Example](./preview.jpg) From e7f0e2d135a6181a4b8736b9296b0dfead6e84aa Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 14:28:43 +0200 Subject: [PATCH 05/33] docs(examples): change broken image link --- examples/06_vtk/Applications/SurfacePicking/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/06_vtk/Applications/SurfacePicking/README.md b/examples/06_vtk/Applications/SurfacePicking/README.md index 461d891f..4aaeeb2a 100644 --- a/examples/06_vtk/Applications/SurfacePicking/README.md +++ b/examples/06_vtk/Applications/SurfacePicking/README.md @@ -3,8 +3,8 @@ This example illustrates how VTK's picking features can integrate with a trame application.

- - + +

From a91e2612b49a74d23a34672819e80e722fa61b63 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 14:29:37 +0200 Subject: [PATCH 06/33] docs(examples): change broken image link --- examples/06_vtk/Applications/ZarrContourViewer/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/06_vtk/Applications/ZarrContourViewer/README.md b/examples/06_vtk/Applications/ZarrContourViewer/README.md index c08236f8..50851e12 100644 --- a/examples/06_vtk/Applications/ZarrContourViewer/README.md +++ b/examples/06_vtk/Applications/ZarrContourViewer/README.md @@ -1,3 +1,3 @@ # Zarr Contour Viewer Example -![Zarr Contour Viewer](../../../../docs/content/examples/ZarrContourViewer.jpg) +![Zarr Contour Viewer](https://kitware.github.io/trame/assets/ZarrContourViewer.Sq6ukGyj.jpg) From 1fcd4417e115bcc1a138d38da924945465fab482 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 14:30:48 +0200 Subject: [PATCH 07/33] docs(examples): fix data path error and camera reset view error --- .../ContourGeometry/DynamicLocalRemoteRendering.py | 2 +- examples/07_paraview/ContourGeometry/RemoteRendering.py | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/07_paraview/ContourGeometry/DynamicLocalRemoteRendering.py b/examples/07_paraview/ContourGeometry/DynamicLocalRemoteRendering.py index 2b52e522..45de98cf 100644 --- a/examples/07_paraview/ContourGeometry/DynamicLocalRemoteRendering.py +++ b/examples/07_paraview/ContourGeometry/DynamicLocalRemoteRendering.py @@ -23,7 +23,7 @@ # Data file # ----------------------------------------------------------------------------- -data_directory = Path(__file__).parent.parent.parent.with_name("data") +data_directory = Path(__file__).parent.parent.with_name("data") head_vti = data_directory / "head.vti" # ----------------------------------------------------------------------------- diff --git a/examples/07_paraview/ContourGeometry/RemoteRendering.py b/examples/07_paraview/ContourGeometry/RemoteRendering.py index 72da929b..ed4bc4a8 100644 --- a/examples/07_paraview/ContourGeometry/RemoteRendering.py +++ b/examples/07_paraview/ContourGeometry/RemoteRendering.py @@ -25,7 +25,7 @@ simple.LoadDistributedPlugin("AcceleratedAlgorithms", remote=False, ns=globals()) -data_directory = Path(__file__).parent.parent.parent.with_name("data") +data_directory = Path(__file__).parent.parent.with_name("data") head_vti = data_directory / "head.vti" reader = simple.XMLImageDataReader(FileName=[str(head_vti)]) @@ -106,7 +106,7 @@ def commit_changes(): hide_details=True, ) - with vuetify.VBtn(icon=True, click="$refs.view.resetCamera()"): + with vuetify.VBtn(icon=True, click=ctrl.view_reset_camera): vuetify.VIcon("mdi-crop-free") vuetify.VProgressLinear( From 6142599671bebd1de06868c74debf71587a91a2e Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 14:31:24 +0200 Subject: [PATCH 08/33] docs(examples): remove useless file, another example file can be used --- .../07_paraview/TimeAnimation/car-crash.json | 23 ------------------- 1 file changed, 23 deletions(-) delete mode 100644 examples/07_paraview/TimeAnimation/car-crash.json diff --git a/examples/07_paraview/TimeAnimation/car-crash.json b/examples/07_paraview/TimeAnimation/car-crash.json deleted file mode 100644 index 61a5e0ab..00000000 --- a/examples/07_paraview/TimeAnimation/car-crash.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "files": [ - "Car_Crash_Frame_1.vtu", - "Car_Crash_Frame_2.vtu", - "Car_Crash_Frame_3.vtu", - "Car_Crash_Frame_4.vtu", - "Car_Crash_Frame_5.vtu", - "Car_Crash_Frame_6.vtu", - "Car_Crash_Frame_7.vtu", - "Car_Crash_Frame_8.vtu", - "Car_Crash_Frame_9.vtu", - "Car_Crash_Frame_10.vtu", - "Car_Crash_Frame_11.vtu" - ], - "reader_properties": { - "CellArrayStatus": ["Max. Pl. Strain", "Von Mises Stress", "Element id"] - }, - "fields": [ - { "text": "Max. Pl. Strain", "value": 0, "location": "CELLS", "range": [0.0001, 0.05] }, - { "text": "Von Mises Stress", "value": 1, "location": "CELLS" , "range": [50, 500]}, - { "text": "Element id", "value": 2, "location": "CELLS" , "range": [2000000, 4000000] } - ] -} \ No newline at end of file From 4206a7bd7b16582c01342ca0c7617d046b1f278a Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 14:32:21 +0200 Subject: [PATCH 09/33] docs(examples): make panda object serializable --- examples/08_pydeck/00_mapping-demo.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/08_pydeck/00_mapping-demo.py b/examples/08_pydeck/00_mapping-demo.py index 185d6862..a789b9d9 100644 --- a/examples/08_pydeck/00_mapping-demo.py +++ b/examples/08_pydeck/00_mapping-demo.py @@ -56,7 +56,7 @@ def from_data_file(filename): "https://raw.githubusercontent.com/streamlit/" "example-data/master/hello/v1/%s" % filename ) - return pd.read_json(url) + return pd.read_json(url).to_dict(orient="records") ALL_LAYERS = { From c9cce40a67eb145a370766c667e841b9d4da39be Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 14:33:05 +0200 Subject: [PATCH 10/33] docs(examples): make panda object serializable --- examples/08_pydeck/01_uber-nyc-pickups.py | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/08_pydeck/01_uber-nyc-pickups.py b/examples/08_pydeck/01_uber-nyc-pickups.py index f6ffaac0..2dd0a1f9 100644 --- a/examples/08_pydeck/01_uber-nyc-pickups.py +++ b/examples/08_pydeck/01_uber-nyc-pickups.py @@ -82,6 +82,7 @@ def load_data(nrows): def updateMap(data, id, lat, lon, zoom, **kwarg): + data = data.to_dict(orient="records") deck = pdk.Deck( map_provider="mapbox", map_style="mapbox://styles/mapbox/light-v9", From 1dfd30452d65800e0493c71ec67c78116356c655 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 14:33:53 +0200 Subject: [PATCH 11/33] docs(examples): change port to 9000 used by default --- docs/vitepress/examples/core/docker.md | 22 ++----------------- .../deploy/docker/RenderingInfo/README.md | 4 ++-- examples/deploy/docker/SingleFile/README.md | 6 ++--- examples/deploy/docker/VtkRendering/README.md | 4 ++-- 4 files changed, 9 insertions(+), 27 deletions(-) diff --git a/docs/vitepress/examples/core/docker.md b/docs/vitepress/examples/core/docker.md index ca3610b3..06703de3 100644 --- a/docs/vitepress/examples/core/docker.md +++ b/docs/vitepress/examples/core/docker.md @@ -7,26 +7,8 @@ For instance you could deploy the following on a CapRover instance by just runni [![Simple deployment over https](/assets/images/deployment/cone-caprover.png)](https://github.com/Kitware/trame-app-cone) ::: code-group - -```Dockerfile -FROM kitware/trame:py3.10-glvnd - -RUN apt-get update \ - && apt-get install -y \ - libxrender1 \ - && rm -rf /var/lib/apt/lists/* - -COPY --chown=trame-user:trame-user . /deploy - -RUN /opt/trame/entrypoint.sh build -``` - -```captain-definition -{ - "schemaVersion": 2, - "dockerfilePath": "./Dockerfile" -} -``` +<<< @/../../examples/deploy/docker/Dockerfile +<<< @/../../examples/deploy/docker/captain-definition <<< @/../../examples/deploy/docker/VtkRendering/app.py <<< @/../../examples/deploy/docker/VtkRendering/setup/apps.yml [./setup/apps.yaml] <<< @/../../examples/deploy/docker/VtkRendering/setup/requirements.txt [./setup/requirements.txt] diff --git a/examples/deploy/docker/RenderingInfo/README.md b/examples/deploy/docker/RenderingInfo/README.md index c94ec452..4a56cf15 100644 --- a/examples/deploy/docker/RenderingInfo/README.md +++ b/examples/deploy/docker/RenderingInfo/README.md @@ -8,10 +8,10 @@ The current example rely trame.tools.vtk to display rendering capabilities of yo docker build -t trame-vtk-info . ``` -# Run the image on port 8080 +# Run the image on port 9000 ```bash -docker run -it --rm -p 8080:80 trame-vtk-info +docker run -it --rm -p 9000:80 trame-vtk-info ``` # Deploying into CapRover diff --git a/examples/deploy/docker/SingleFile/README.md b/examples/deploy/docker/SingleFile/README.md index f7e2c9ef..9aaac202 100644 --- a/examples/deploy/docker/SingleFile/README.md +++ b/examples/deploy/docker/SingleFile/README.md @@ -4,16 +4,16 @@ docker build -t trame-app . ``` -# Run the image on port 8080 +# Run the image on port 9000 ```bash -docker run -it --rm -p 8080:80 trame-app +docker run -it --rm -p 9000:80 trame-app ``` Or if you need some prefix ```bash -docker run -it --rm -p 8080:80 -e TRAME_URL_PREFIX=/my-app/sub/path trame-app +docker run -it --rm -p 9000:80 -e TRAME_URL_PREFIX=/my-app/sub/path trame-app ``` diff --git a/examples/deploy/docker/VtkRendering/README.md b/examples/deploy/docker/VtkRendering/README.md index 07fb245a..5feb9421 100644 --- a/examples/deploy/docker/VtkRendering/README.md +++ b/examples/deploy/docker/VtkRendering/README.md @@ -9,10 +9,10 @@ using the nvidia-runtime with __kitware/trame:glvnd__ base image and an EGL buil docker build -t trame-vtk-app . ``` -# Run the image on port 8080 +# Run the image on port 9000 ```bash -docker run -it --rm -p 8080:80 trame-vtk-app +docker run -it --rm -p 9000:80 trame-vtk-app ``` # Deploying into CapRover From 5555402e790bca71aeeef72201a11d3e8de02977 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 14:35:08 +0200 Subject: [PATCH 12/33] docs(examples): remove trame-markdown examples' broken features --- examples/03_markdown/01_markdown.py | 10 +++--- examples/03_markdown/demo.md | 40 ---------------------- examples/03_markdown/module.md | 2 +- examples/03_markdown/sample.md | 52 +++-------------------------- 4 files changed, 10 insertions(+), 94 deletions(-) diff --git a/examples/03_markdown/01_markdown.py b/examples/03_markdown/01_markdown.py index 01ca9c93..712fc45e 100644 --- a/examples/03_markdown/01_markdown.py +++ b/examples/03_markdown/01_markdown.py @@ -6,14 +6,14 @@ import os from trame.app import get_server -from trame.ui.vuetify import SinglePageLayout -from trame.widgets import markdown, vuetify +from trame.ui.vuetify3 import SinglePageLayout +from trame.widgets import markdown, vuetify3 # ----------------------------------------------------------------------------- # Trame setup # ----------------------------------------------------------------------------- -server = get_server(client_type="vue2") +server = get_server(client_type="vue3") state, ctrl = server.state, server.controller # ----------------------------------------------------------------------------- @@ -38,8 +38,8 @@ def update_md(file_name, **kwargs): layout.title.set_text("Markdown Viewer") with layout.toolbar: - vuetify.VSpacer() - vuetify.VSelect( + vuetify3.VSpacer() + vuetify3.VSelect( v_model=("file_name", "demo.md"), items=("options", ["demo.md", "sample.md", "module.md"]), hide_details=True, diff --git a/examples/03_markdown/demo.md b/examples/03_markdown/demo.md index f8ca15de..f01d2857 100644 --- a/examples/03_markdown/demo.md +++ b/examples/03_markdown/demo.md @@ -73,16 +73,6 @@ Term 2 ## AsciiMath -Inline AsciiMath: `@(1/2[1-(1/2)^n])/(1-(1/2))=s_n@` - -```AsciiMath -oint_Cx^3 dx+4y^2 dy - -2=(((3-x)xx2)/(3-x)) - -sum_(m=1)^oosum_(n=1)^oo(m^2 n)/(3^m(m3^n+n3^m) -``` - ```ASCIIMath phi_n(kappa) = 1/(4pi^2 kappa^2) int_0^oo (sin(kappa R))/(kappa R) @@ -106,10 +96,6 @@ You can also use inline math: `$29^{th}$` [Emoji Cheat Sheet](http://www.emoji-cheat-sheet.com/) -## Fontawesome: :fa-car: :fa-flag: :fa-bicycle: :fa-leaf: :fa-heart: - -[All the Font Awesome icons](http://fontawesome.io/icons/) - ## code ### c @@ -150,29 +136,3 @@ npm install markdown-it-vue | ------------- | ------------- | | Content Cell | Content Cell | | Content Cell | Content Cell | - -## flowchart.js - -```flowchart.js -st=>start: Start|past:>http://www.google.com[blank] -e=>end: End:>http://www.google.com -op1=>operation: My Operation|past -op2=>operation: Stuff|current -sub1=>subroutine: My Subroutine|invalid -cond=>condition: Yes -or No?|approved:>http://www.google.com -c2=>condition: Good idea|rejected -io=>inputoutput: catch something...|request -para=>parallel: parallel tasks - -st->op1(right)->cond -cond(yes, right)->c2 -cond(no)->para -c2(true)->io->e -c2(false)->e - -para(path1, bottom)->sub1(left)->op1 -para(path2, right)->op2->e - -st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"}) -``` diff --git a/examples/03_markdown/module.md b/examples/03_markdown/module.md index c473d9e9..06402bc3 100644 --- a/examples/03_markdown/module.md +++ b/examples/03_markdown/module.md @@ -27,7 +27,7 @@ graph TD; ``` -```AsciiMath +```ASCIIMath oint_Cx^3 dx+4y^2 dy 2=(((3-x)xx2)/(3-x)) diff --git a/examples/03_markdown/sample.md b/examples/03_markdown/sample.md index f81f9416..74a0fe4f 100644 --- a/examples/03_markdown/sample.md +++ b/examples/03_markdown/sample.md @@ -3,12 +3,7 @@ An h1 header Paragraphs are separated by a blank line. -2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists -look like: - - * this one - * that one - * the other one +2nd paragraph. *Italic*, **bold**, and `monospace`. Note that --- not considering the asterisk --- the actual text content starts at 4-columns in. @@ -20,7 +15,7 @@ content starts at 4-columns in. > if you like. Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all -in chapters 12--14"). Three dots ... will be converted to an ellipsis. +in chapters 12--14"). Unicode is supported. ☺ @@ -28,12 +23,6 @@ Unicode is supported. ☺ An h2 header ------------ -Here's a numbered list: - - 1. first item - 2. second item - 3. third item - Note again how the actual text starts at 4 columns in (4 characters from the left side). Here's a code sample: @@ -97,31 +86,6 @@ doc](#an-h2-header). Here's a footnote [^1]. [^1]: Footnote text goes here. -Tables can look like this: - -size material color ----- ------------ ------------ -9 leather brown -10 hemp canvas natural -11 glass transparent - -Table: Shoes, their sizes, and what they're made of - -(The above is the caption for the table.) Pandoc also supports -multi-line tables: - --------- ----------------------- -keyword text --------- ----------------------- -red Sunsets, apples, and - other red or reddish - things. - -green Leaves, grass, frogs - and other things it's - not easy being. --------- ----------------------- - A horizontal rule follows. *** @@ -130,24 +94,16 @@ Here's a definition list: apples : Good for making applesauce. + oranges : Citrus! + tomatoes : There's no "e" in tomato. Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.) -Here's a "line block": - -| Line one -| Line too -| Line tree - -and images can be specified like so: - -![example image](example-image.jpg "An exemplary image") - Inline math equations go in like so: $\omega = d\phi / dt$. Display math should get its own line and be put in in double-dollarsigns: From f8864b3319cc5c59c692472e25a6be02b030a8fd Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 14:36:27 +0200 Subject: [PATCH 13/33] docs(examples): change ParaView URL, example still not working --- examples/07_paraview/Docker/Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/07_paraview/Docker/Dockerfile b/examples/07_paraview/Docker/Dockerfile index f99d9ffb..04d02f86 100644 --- a/examples/07_paraview/Docker/Dockerfile +++ b/examples/07_paraview/Docker/Dockerfile @@ -3,7 +3,7 @@ FROM kitware/trame:py3.10-ubuntu22.04 RUN install -d -o trame-user -g trame-user /deploy RUN apt update -y && apt install -y libosmesa6-dev -ARG PV_URL='https://www.paraview.org/files/v5.12/ParaView-5.12.0-RC1-osmesa-MPI-Linux-Python3.10-x86_64.tar.gz' +ARG PV_URL='https://www.paraview.org/files/v5.13/ParaView-5.13.3-osmesa-MPI-Linux-Python3.10-x86_64.tar.gz' RUN mkdir -p /opt/paraview && cd /opt/paraview && wget -qO- $PV_URL | tar --strip-components=1 -xzv ENV TRAME_PARAVIEW=/opt/paraview From be580cd13cb764f83e09084e5881cebc35e74a05 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 14:37:27 +0200 Subject: [PATCH 14/33] docs(examples): fix confetti example --- examples/09_advanced/external-esm.py | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/examples/09_advanced/external-esm.py b/examples/09_advanced/external-esm.py index befa6735..6d9418d9 100644 --- a/examples/09_advanced/external-esm.py +++ b/examples/09_advanced/external-esm.py @@ -20,7 +20,10 @@ def __init__(self, server=None): def _build_ui(self): with DivLayout(self.server): - html.Button("Click Me") + html.Button( + "Click Me", + click="import('https://esm.sh/canvas-confetti@1.9.3').then(c => c.create()())", + ) def main(): From aa098bb88861715cc80f41260bf39ced4d1e585c Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 14:38:19 +0200 Subject: [PATCH 15/33] docs(examples): use paraview venv --- examples/07_paraview/SimpleCone/LocalRendering.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/07_paraview/SimpleCone/LocalRendering.py b/examples/07_paraview/SimpleCone/LocalRendering.py index 559254bc..29e2242a 100644 --- a/examples/07_paraview/SimpleCone/LocalRendering.py +++ b/examples/07_paraview/SimpleCone/LocalRendering.py @@ -3,7 +3,7 @@ pip install trame trame-vuetify trame-vtk """ -# import paraview.web.venv # Available in PV 5.11 +import paraview.web.venv # Available in PV 5.11 from paraview import simple from trame.app import get_server From 5705a28c48caba1e82a7d88804ca9ce6732b2bfa Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 14:40:05 +0200 Subject: [PATCH 16/33] docs(examples): fix colors in example --- examples/data/can.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/data/can.json b/examples/data/can.json index 233a667b..dba72bdd 100644 --- a/examples/data/can.json +++ b/examples/data/can.json @@ -8,10 +8,10 @@ "ElementBlockFields": [], "NodeSets": [], "SideSets": [] - }, + }, "fields": [ - { "text": "accl", "value": 0, "location": "POINTS", "range": [60000, 201941280] }, - { "text": "displ", "value": 1, "location": "POINTS" , "range": [2, 20]}, - { "text": "vel", "value": 2, "location": "POINTS" , "range": [1500, 5000] } + { "text": "ACCL", "value": 0, "location": "POINTS", "range": [60000, 201941280] }, + { "text": "DISPL", "value": 1, "location": "POINTS" , "range": [2, 20]}, + { "text": "VEL", "value": 2, "location": "POINTS" , "range": [1500, 5000] } ] } \ No newline at end of file From 5c591fb6451c3a2c097c76db3b94bb0b9c09ed99 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 10 Apr 2026 15:35:11 +0200 Subject: [PATCH 17/33] docs(examples): fix images' URL to relative path instead of deployed image URL --- examples/06_vtk/Applications/SurfacePicking/README.md | 4 ++-- examples/06_vtk/Applications/ZarrContourViewer/README.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/06_vtk/Applications/SurfacePicking/README.md b/examples/06_vtk/Applications/SurfacePicking/README.md index 4aaeeb2a..e7fd4f32 100644 --- a/examples/06_vtk/Applications/SurfacePicking/README.md +++ b/examples/06_vtk/Applications/SurfacePicking/README.md @@ -3,8 +3,8 @@ This example illustrates how VTK's picking features can integrate with a trame application.

- - + +

diff --git a/examples/06_vtk/Applications/ZarrContourViewer/README.md b/examples/06_vtk/Applications/ZarrContourViewer/README.md index 50851e12..8a2527d8 100644 --- a/examples/06_vtk/Applications/ZarrContourViewer/README.md +++ b/examples/06_vtk/Applications/ZarrContourViewer/README.md @@ -1,3 +1,3 @@ # Zarr Contour Viewer Example -![Zarr Contour Viewer](https://kitware.github.io/trame/assets/ZarrContourViewer.Sq6ukGyj.jpg) +![Zarr Contour Viewer](../../../../docs/vitepress/assets/images/examples/ZarrContourViewer.jpg) From 6480a19dca61650437354db2bdd0f12aaf75c4d0 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Tue, 14 Apr 2026 17:00:08 +0200 Subject: [PATCH 18/33] docs(examples): bump paraview to 6.1 --- examples/07_paraview/Docker/Dockerfile | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/examples/07_paraview/Docker/Dockerfile b/examples/07_paraview/Docker/Dockerfile index 04d02f86..025cfddf 100644 --- a/examples/07_paraview/Docker/Dockerfile +++ b/examples/07_paraview/Docker/Dockerfile @@ -1,9 +1,10 @@ -FROM kitware/trame:py3.10-ubuntu22.04 +FROM kitware/trame:uv-glvnd + +ENV TRAME_PYTHON=3.12 RUN install -d -o trame-user -g trame-user /deploy -RUN apt update -y && apt install -y libosmesa6-dev -ARG PV_URL='https://www.paraview.org/files/v5.13/ParaView-5.13.3-osmesa-MPI-Linux-Python3.10-x86_64.tar.gz' +ARG PV_URL='https://www.paraview.org/files/v6.1/ParaView-6.1.0-MPI-Linux-Python3.12-x86_64.tar.gz' RUN mkdir -p /opt/paraview && cd /opt/paraview && wget -qO- $PV_URL | tar --strip-components=1 -xzv ENV TRAME_PARAVIEW=/opt/paraview From 239c387fe442611b7f5148af90af2487ff0ef2d6 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Tue, 14 Apr 2026 17:48:04 +0200 Subject: [PATCH 19/33] docs(examples): make demo.md features work --- examples/03_markdown/demo.md | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/examples/03_markdown/demo.md b/examples/03_markdown/demo.md index f01d2857..2433042d 100644 --- a/examples/03_markdown/demo.md +++ b/examples/03_markdown/demo.md @@ -2,8 +2,9 @@ ## Image size and Viewer -![gvf](http://www.aqcoder.com/gvf-project.png =x50) -![ravenq](http://www.aqcoder.com/ravenq-qr.png =50x50) + + +![ravenq](https://octodex.github.com/images/minion.png) ## GitHub Table of Contents @@ -73,6 +74,16 @@ Term 2 ## AsciiMath +Inline ASCIIMath: ``(1/2[1-(1/2)^n])/(1-(1/2))=s_n`` + +```ASCIIMath +oint_Cx^3 dx+4y^2 dy + +2=(((3-x)xx2)/(3-x)) + +sum_(m=1)^oosum_(n=1)^oo(m^2 n)/(3^m(m3^n+n3^m) +``` + ```ASCIIMath phi_n(kappa) = 1/(4pi^2 kappa^2) int_0^oo (sin(kappa R))/(kappa R) @@ -84,18 +95,22 @@ phi_n(kappa) = 1/(4pi^2 kappa^2) ## Subscript: H~2~O -You can also use inline math: `$H_2O$` +You can also use inline math: $H_2O$ ## Superscript: 29^th^ -You can also use inline math: `$29^{th}$` +You can also use inline math: $29^{th}$ ## Emoji: :panda_face: :sparkles: :camel: :boom: :pig: [Emoji Cheat Sheet](http://www.emoji-cheat-sheet.com/) +## Fontawesome: :fa fa-car: :fa-solid fa-flag: :fa-regular fa-flag: :fa fa-bicycle: :fa fa-leaf: :fa-solid fa-heart: :fa-regular fa-heart: + +[All the Font Awesome icons](http://fontawesome.io/icons/) + ## code ### c From 7dbc08fd055709ec678869d46a45d7d84a68f9bf Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Tue, 14 Apr 2026 18:04:19 +0200 Subject: [PATCH 20/33] docs(examples): change port back to 8080 Ref: https://github.com/Kitware/trame/pull/876/changes/BASE.. 5c591fb6451c3a2c097c76db3b94bb0b9c09ed99#r3080002193 --- examples/deploy/docker/RenderingInfo/README.md | 4 ++-- examples/deploy/docker/SingleFile/README.md | 6 +++--- examples/deploy/docker/VtkRendering/README.md | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/examples/deploy/docker/RenderingInfo/README.md b/examples/deploy/docker/RenderingInfo/README.md index 4a56cf15..c94ec452 100644 --- a/examples/deploy/docker/RenderingInfo/README.md +++ b/examples/deploy/docker/RenderingInfo/README.md @@ -8,10 +8,10 @@ The current example rely trame.tools.vtk to display rendering capabilities of yo docker build -t trame-vtk-info . ``` -# Run the image on port 9000 +# Run the image on port 8080 ```bash -docker run -it --rm -p 9000:80 trame-vtk-info +docker run -it --rm -p 8080:80 trame-vtk-info ``` # Deploying into CapRover diff --git a/examples/deploy/docker/SingleFile/README.md b/examples/deploy/docker/SingleFile/README.md index 9aaac202..f7e2c9ef 100644 --- a/examples/deploy/docker/SingleFile/README.md +++ b/examples/deploy/docker/SingleFile/README.md @@ -4,16 +4,16 @@ docker build -t trame-app . ``` -# Run the image on port 9000 +# Run the image on port 8080 ```bash -docker run -it --rm -p 9000:80 trame-app +docker run -it --rm -p 8080:80 trame-app ``` Or if you need some prefix ```bash -docker run -it --rm -p 9000:80 -e TRAME_URL_PREFIX=/my-app/sub/path trame-app +docker run -it --rm -p 8080:80 -e TRAME_URL_PREFIX=/my-app/sub/path trame-app ``` diff --git a/examples/deploy/docker/VtkRendering/README.md b/examples/deploy/docker/VtkRendering/README.md index 5feb9421..07fb245a 100644 --- a/examples/deploy/docker/VtkRendering/README.md +++ b/examples/deploy/docker/VtkRendering/README.md @@ -9,10 +9,10 @@ using the nvidia-runtime with __kitware/trame:glvnd__ base image and an EGL buil docker build -t trame-vtk-app . ``` -# Run the image on port 9000 +# Run the image on port 8080 ```bash -docker run -it --rm -p 9000:80 trame-vtk-app +docker run -it --rm -p 8080:80 trame-vtk-app ``` # Deploying into CapRover From 3df33e19b75340e0a5eae631b58aef15a98f8de1 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Wed, 15 Apr 2026 09:30:33 +0200 Subject: [PATCH 21/33] docs(examples): remove `import paraview.web.venv` Also replace all mentions of commands like `[pvpython] [script.py] --venv [venv]` by `[pvpython] --venv [venv] [script.py]` --- docs/vitepress/guide/tutorial/paraview.md | 24 ++++++------------- .../DynamicLocalRemoteRendering.py | 1 - .../ContourGeometry/RemoteRendering.py | 1 - examples/07_paraview/Docker/SimpleCone.py | 1 - examples/07_paraview/README.md | 4 +--- .../07_paraview/SimpleCone/LocalRendering.py | 1 - .../07_paraview/SimpleCone/RemoteRendering.py | 1 - examples/07_paraview/StateViewer/app.py | 1 - examples/07_paraview/SurfacePicker/app.py | 1 - examples/07_paraview/TimeAnimation/app.py | 1 - examples/07_paraview/Wavelet/app.py | 1 - .../core/23_pv_interactive_render_exit.py | 3 +-- 12 files changed, 9 insertions(+), 31 deletions(-) diff --git a/docs/vitepress/guide/tutorial/paraview.md b/docs/vitepress/guide/tutorial/paraview.md index a633467f..bbcdb589 100644 --- a/docs/vitepress/guide/tutorial/paraview.md +++ b/docs/vitepress/guide/tutorial/paraview.md @@ -4,17 +4,17 @@ ParaView is the world’s leading open source post-processing visualization engi ## Download ParaView -ParaView 5.10+ can be downloaded from [here](https://www.paraview.org/download). +ParaView 6+ can be downloaded from [here](https://www.paraview.org/download). ## Virtual Environment -ParaView comes with its own Python, which may be missing some dependencies for the desired usage. We can add more Python packages into ParaView by creating a virtual environment and then activating it inside the application using the import line `import paraview.web.venv` or by using our [local version](https://github.com/Kitware/trame/blob/master/examples/v1/ParaView/venv.py) and importing it. +ParaView comes with its own Python, which may be missing some dependencies for the desired usage. We can add more Python packages into ParaView by creating a virtual environment and then activating it. **First**, we need to setup the ParaView add-on python environment, in which we will only install ***trame***, but we could add any other Python libraries that are not included in the ParaView bundle. ```bash -python3.9 -m venv .pvenv +python3.12 -m venv .pvenv source ./.pvenv/bin/activate python -m pip install --upgrade pip pip install trame trame-vtk trame-vuetify @@ -24,7 +24,7 @@ deactivate **Note:** - We can not use our virtual environment with a `vtk` as our `vtk` library will conflict with the one inside Paraview. - Since ParaView includes `vtk`, any VTK example can be run with ParaView assuming the proper code is used to handle the virtual-env loading to get ***trame*** inside our Python script. - - The python you use for creating your virtual-environment must match the Python version that comes with ParaView. (So far 5.10 and 5.11 use Python 3.9) + - The python you use for creating your virtual-environment must match the Python version that comes with ParaView. (So far 6.0 and 6.1 use Python 3.12) ## Conda environment @@ -42,24 +42,14 @@ conda activate pv-env python .../trame-app.py ``` -## Making ***trame*** available in ParaView - -At the very top of our scripts, we need to import our helper script so the `--venv path/to/venv` can be processed. - -```python -import paraview.web.venv # When using downloaded ParaView from Kitware -``` - -After that we can import ***trame*** and start using it (assuming we run our application with the `--venv /path/to/venv/with/trame` argument). - ## Running an example The command line below illustrate how a SimpleCone example can be run on a **Mac** computer where ParaView 5.10 has been installed. ```bash -/Applications/ParaView-5.10.1.app/Contents/bin/pvpython \ - ./05_paraview/SimpleCone.py \ - --venv .pvenv +/Applications/ParaView-6.1.0.app/Contents/bin/pvpython \ + --venv .pvenv \ + ./05_paraview/SimpleCone.py ``` ![Simple Cone](/assets/images/examples/pvSimpleCone-Remote.jpg) diff --git a/examples/07_paraview/ContourGeometry/DynamicLocalRemoteRendering.py b/examples/07_paraview/ContourGeometry/DynamicLocalRemoteRendering.py index 45de98cf..00f9601c 100644 --- a/examples/07_paraview/ContourGeometry/DynamicLocalRemoteRendering.py +++ b/examples/07_paraview/ContourGeometry/DynamicLocalRemoteRendering.py @@ -5,7 +5,6 @@ from pathlib import Path -import paraview.web.venv from paraview import simple from trame.app import get_server diff --git a/examples/07_paraview/ContourGeometry/RemoteRendering.py b/examples/07_paraview/ContourGeometry/RemoteRendering.py index ed4bc4a8..1326d868 100644 --- a/examples/07_paraview/ContourGeometry/RemoteRendering.py +++ b/examples/07_paraview/ContourGeometry/RemoteRendering.py @@ -5,7 +5,6 @@ from pathlib import Path -import paraview.web.venv from paraview import simple from trame.app import get_server diff --git a/examples/07_paraview/Docker/SimpleCone.py b/examples/07_paraview/Docker/SimpleCone.py index bada2d24..a53f182b 100755 --- a/examples/07_paraview/Docker/SimpleCone.py +++ b/examples/07_paraview/Docker/SimpleCone.py @@ -1,4 +1,3 @@ -import paraview.web.venv # Available in PV 5.10 from paraview import simple from trame.app import get_server diff --git a/examples/07_paraview/README.md b/examples/07_paraview/README.md index d9ca57f6..d5d2e9c0 100644 --- a/examples/07_paraview/README.md +++ b/examples/07_paraview/README.md @@ -16,7 +16,7 @@ deactivate ## Running an application with ParaView Python ```bash -/Application/ParaView-5.10.app/Content/bin/pvpython ./app.py --venv .pvenv +/Application/ParaView-5.10.app/Content/bin/pvpython --venv .pvenv ./app.py ``` Or using PV_VENV environmnent variable @@ -27,6 +27,4 @@ export PV_VENV=$PWD/.pvenv ``` **Note**: - - venv handling was introduced in ParaView 5.10+ under `import paraview.web.venv` - - Otherwise you can use our local version of venv.py if not available for your app - trame v2 requires ParaView 5.11+ \ No newline at end of file diff --git a/examples/07_paraview/SimpleCone/LocalRendering.py b/examples/07_paraview/SimpleCone/LocalRendering.py index 29e2242a..ae838882 100644 --- a/examples/07_paraview/SimpleCone/LocalRendering.py +++ b/examples/07_paraview/SimpleCone/LocalRendering.py @@ -3,7 +3,6 @@ pip install trame trame-vuetify trame-vtk """ -import paraview.web.venv # Available in PV 5.11 from paraview import simple from trame.app import get_server diff --git a/examples/07_paraview/SimpleCone/RemoteRendering.py b/examples/07_paraview/SimpleCone/RemoteRendering.py index 5a8d1b3e..b1c85eca 100644 --- a/examples/07_paraview/SimpleCone/RemoteRendering.py +++ b/examples/07_paraview/SimpleCone/RemoteRendering.py @@ -3,7 +3,6 @@ pip install trame trame-vuetify trame-vtk """ -import paraview.web.venv # Available in PV 5.11 from paraview import simple from trame.app import get_server diff --git a/examples/07_paraview/StateViewer/app.py b/examples/07_paraview/StateViewer/app.py index ff2c45a4..e86900ee 100644 --- a/examples/07_paraview/StateViewer/app.py +++ b/examples/07_paraview/StateViewer/app.py @@ -5,7 +5,6 @@ from pathlib import Path -import paraview.web.venv from paraview import simple from trame.app import get_server diff --git a/examples/07_paraview/SurfacePicker/app.py b/examples/07_paraview/SurfacePicker/app.py index 6c6a9f83..1d01daee 100644 --- a/examples/07_paraview/SurfacePicker/app.py +++ b/examples/07_paraview/SurfacePicker/app.py @@ -2,7 +2,6 @@ from typing import Any -import paraview.web.venv from paraview import simple from trame_server import Server from trame_server.controller import Controller diff --git a/examples/07_paraview/TimeAnimation/app.py b/examples/07_paraview/TimeAnimation/app.py index ada9075e..acf9bf26 100644 --- a/examples/07_paraview/TimeAnimation/app.py +++ b/examples/07_paraview/TimeAnimation/app.py @@ -11,7 +11,6 @@ import os import paraview as pv -import paraview.web.venv # Available in PV 5.10-RC2+ from paraview import simple from trame.app import asynchronous, get_server diff --git a/examples/07_paraview/Wavelet/app.py b/examples/07_paraview/Wavelet/app.py index 90c1d835..debb3e06 100644 --- a/examples/07_paraview/Wavelet/app.py +++ b/examples/07_paraview/Wavelet/app.py @@ -5,7 +5,6 @@ import asyncio -import paraview.web.venv from paraview import simple from trame.app import asynchronous, get_server diff --git a/examples/validation/core/23_pv_interactive_render_exit.py b/examples/validation/core/23_pv_interactive_render_exit.py index 0ccfd158..ba7dc68f 100644 --- a/examples/validation/core/23_pv_interactive_render_exit.py +++ b/examples/validation/core/23_pv_interactive_render_exit.py @@ -1,6 +1,5 @@ # To run with Paraview -# pvpython ./examples/validation/core/23_pv_interactive_render_exit.py --venv .venv -import paraview.web.venv +# pvpython --venv .venv ./examples/validation/core/23_pv_interactive_render_exit.py # ----------------------------------------------------------------------------- # VTK From ef4d0c4be90553b7e151b063753a40cd2f27ecfa Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Wed, 15 Apr 2026 10:04:57 +0200 Subject: [PATCH 22/33] docs(examples): use best practice with TrameApp --- examples/03_markdown/01_markdown.py | 72 ++++++++++++++++------------- 1 file changed, 41 insertions(+), 31 deletions(-) diff --git a/examples/03_markdown/01_markdown.py b/examples/03_markdown/01_markdown.py index 712fc45e..b9a965c9 100644 --- a/examples/03_markdown/01_markdown.py +++ b/examples/03_markdown/01_markdown.py @@ -5,55 +5,65 @@ import os -from trame.app import get_server +from trame.app import TrameApp from trame.ui.vuetify3 import SinglePageLayout -from trame.widgets import markdown, vuetify3 +from trame.widgets import markdown +from trame.widgets import vuetify3 as v3 +from trame.decorators import change # ----------------------------------------------------------------------------- # Trame setup # ----------------------------------------------------------------------------- -server = get_server(client_type="vue3") -state, ctrl = server.state, server.controller -# ----------------------------------------------------------------------------- -# Read markdown file -# ----------------------------------------------------------------------------- +class MarkdownApp(TrameApp): + def __init__(self, server=None): + super().__init__(server) + self._build_ui() + # ----------------------------------------------------------------------------- + # Read markdown file + # ----------------------------------------------------------------------------- -@state.change("file_name") -def update_md(file_name, **kwargs): - md_file_path = os.path.join(os.path.dirname(__file__), file_name) - with open(md_file_path, encoding="utf-8") as md: - ctrl.md_update(md.read()) + @change("file_name") + def update_md(self, file_name, **kwargs): + md_file_path = os.path.join(os.path.dirname(__file__), file_name) + with open(md_file_path, encoding="utf-8") as md: + self.ctrl.md_update(md.read()) + # ----------------------------------------------------------------------------- + # GUI + # ----------------------------------------------------------------------------- -# ----------------------------------------------------------------------------- -# GUI -# ----------------------------------------------------------------------------- - -state.trame__title = "MD Viewer" + def _build_ui(self): + self.state.trame__title = "MD Viewer" -with SinglePageLayout(server) as layout: - layout.title.set_text("Markdown Viewer") + with SinglePageLayout(self.server) as self.ui: + self.ui.title.set_text("Markdown Viewer") - with layout.toolbar: - vuetify3.VSpacer() - vuetify3.VSelect( - v_model=("file_name", "demo.md"), - items=("options", ["demo.md", "sample.md", "module.md"]), - hide_details=True, - dense=True, - ) + with self.ui.toolbar: + v3.VSpacer() + v3.VSelect( + v_model=("file_name", "demo.md"), + items=("options", ["demo.md", "sample.md", "module.md"]), + hide_details=True, + dense=True, + ) - with layout.content: - md = markdown.Markdown(classes="pa-4 mx-2") - ctrl.md_update = md.update + with self.ui.content: + md = markdown.Markdown(classes="pa-4 mx-2") + self.ctrl.md_update = md.update # ----------------------------------------------------------------------------- # Main # ----------------------------------------------------------------------------- + +def main(): + mdApp = MarkdownApp() + mdApp.server.start() + + if __name__ == "__main__": - server.start() + main() From 8c87dd7a5b403c25c8e498020711a1f27ba848d6 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Wed, 15 Apr 2026 10:39:32 +0200 Subject: [PATCH 23/33] docs(examples): use best practice with TrameApp --- examples/02_vuetify/00_dataframe-table.py | 264 +++++++++++----------- 1 file changed, 137 insertions(+), 127 deletions(-) diff --git a/examples/02_vuetify/00_dataframe-table.py b/examples/02_vuetify/00_dataframe-table.py index 6d1cb230..5595d4eb 100644 --- a/examples/02_vuetify/00_dataframe-table.py +++ b/examples/02_vuetify/00_dataframe-table.py @@ -9,145 +9,155 @@ import numpy as np import pandas as pd -from trame.app import get_server +from trame.app import TrameApp from trame.ui.vuetify import SinglePageLayout -from trame.widgets import vega, vuetify +from trame.widgets import vuetify, vega +from trame.decorators import change # ----------------------------------------------------------------------------- # Trame setup # ----------------------------------------------------------------------------- -server = get_server(client_type="vue2") -state, ctrl = server.state, server.controller - -# -------------------------------------------------------------------------------- -# Making dataframe -# -------------------------------------------------------------------------------- -np.random.seed(4) -DATA_FRAME = None - - -def fetch_data(samples=15): - global DATA_FRAME - deltas = cycle( - [ - pd.Timedelta(weeks=-2), - pd.Timedelta(days=-1), - pd.Timedelta(hours=-1), - pd.Timedelta(0), - pd.Timedelta(minutes=5), - pd.Timedelta(seconds=10), - pd.Timedelta(microseconds=50), - pd.Timedelta(microseconds=10), - ] - ) - dummy_data = { - "id": range(samples), - "date_time_naive": pd.date_range("2021-01-01", periods=samples), - "apple": np.random.randint(0, 100, samples) / 3.0, - "banana": np.random.randint(0, 100, samples) / 5.0, - "chocolate": np.random.randint(0, 100, samples), - "group": np.random.choice(["A", "B"], size=samples), - "season": np.random.choice( - ["Spring", "Summer", "Fall", "Winter"], size=samples - ), - "date_only": pd.date_range("2020-01-01", periods=samples).date, - "timedelta": [next(deltas) for i in range(samples)], - "date_tz_aware": pd.date_range( - "2022-01-01", periods=samples, tz="Asia/Katmandu" - ), - } - DATA_FRAME = pd.DataFrame(dummy_data) - return DATA_FRAME - - -fetch_data() - -# -------------------------------------------------------------------------------- -# Preparing table -# -------------------------------------------------------------------------------- -header_options = {"apple": {"sortable": False}} -headers, rows = vuetify.dataframe_to_grid(DATA_FRAME, header_options) - -table = { - "headers": ("headers", headers), - "items": ("rows", rows), - "v_model": ("selection", []), - "search": ("query", ""), - "classes": "elevation-1 ma-4", - "multi_sort": True, - "dense": True, - "show_select": True, - "single_select": False, - "item_key": "id", -} - -# -------------------------------------------------------------------------------- -# Describing chart -# -------------------------------------------------------------------------------- - - -@state.change("selection") -def selection_change(selection=[], **kwargs): - global DATA_FRAME - selected_df = pd.DataFrame(selection) - - # Chart - chart_data = DATA_FRAME.loc[ - :, ["date_time_naive", "apple", "banana", "chocolate"] - ].assign(source="total") - chart_data["date_time_naive"] = chart_data["date_time_naive"].astype(str) - - if not selected_df.empty: - selected_data = selected_df.loc[ - :, ["date_time_naive", "apple", "banana", "chocolate"] - ].assign(source="selection") - chart_data = pd.concat([chart_data, selected_data]) - - chart_data = pd.melt( - chart_data, - id_vars=["date_time_naive", "source"], - var_name="item", - value_name="quantity", - ) - chart = ( - alt.Chart(chart_data) - .mark_bar() - .encode( - x=alt.X("item:O"), - y=alt.Y("sum(quantity):Q", stack=False), - color=alt.Color("source:N", scale=alt.Scale(domain=["total", "selection"])), - ) - ).properties(width="container", height=100) - - ctrl.fig_update(chart) - - -# -------------------------------------------------------------------------------- -# GUI -# -------------------------------------------------------------------------------- -with SinglePageLayout(server) as layout: - layout.title.set_text("Vuetify table example") - with layout.toolbar: - vuetify.VSpacer() - vuetify.VTextField( - v_model=("query",), - placeholder="Search", - dense=True, - hide_details=True, - prepend_icon="mdi-magnify", +class DataframeTable(TrameApp): + def __init__(self, server=None): + super().__init__(server, client_type="vue2") + + np.random.seed(4) + self.fetch_data() + self.prepare_table() + + self._build_ui() + + # -------------------------------------------------------------------------------- + # Making dataframe + # -------------------------------------------------------------------------------- + + def fetch_data(self, samples=15): + deltas = cycle( + [ + pd.Timedelta(weeks=-2), + pd.Timedelta(days=-1), + pd.Timedelta(hours=-1), + pd.Timedelta(0), + pd.Timedelta(minutes=5), + pd.Timedelta(seconds=10), + pd.Timedelta(microseconds=50), + pd.Timedelta(microseconds=10), + ] ) + dummy_data = { + "id": range(samples), + "date_time_naive": pd.date_range("2021-01-01", periods=samples), + "apple": np.random.randint(0, 100, samples) / 3.0, + "banana": np.random.randint(0, 100, samples) / 5.0, + "chocolate": np.random.randint(0, 100, samples), + "group": np.random.choice(["A", "B"], size=samples), + "season": np.random.choice( + ["Spring", "Summer", "Fall", "Winter"], size=samples + ), + "date_only": pd.date_range("2020-01-01", periods=samples).date, + "timedelta": [next(deltas) for i in range(samples)], + "date_tz_aware": pd.date_range( + "2022-01-01", periods=samples, tz="Asia/Katmandu" + ), + } + self.DATA_FRAME = pd.DataFrame(dummy_data) + + # -------------------------------------------------------------------------------- + # Preparing table + # -------------------------------------------------------------------------------- + + def prepare_table(self): + header_options = {"apple": {"sortable": False}} + headers, rows = vuetify.dataframe_to_grid(self.DATA_FRAME, header_options) + + self.table = { + "headers": ("headers", headers), + "items": ("rows", rows), + "v_model": ("selection", []), + "search": ("query", ""), + "classes": "elevation-1 ma-4", + "multi_sort": True, + "dense": True, + "show_select": True, + "single_select": False, + "item_key": "id", + } + + # -------------------------------------------------------------------------------- + # Describing chart + # -------------------------------------------------------------------------------- + + @change("selection") + def selection_change(self, selection=[], **kwargs): + selected_df = pd.DataFrame(selection) + + # Chart + chart_data = self.DATA_FRAME.loc[ + :, ["date_time_naive", "apple", "banana", "chocolate"] + ].assign(source="total") + chart_data["date_time_naive"] = chart_data["date_time_naive"].astype(str) + + if not selected_df.empty: + selected_data = selected_df.loc[ + :, ["date_time_naive", "apple", "banana", "chocolate"] + ].assign(source="selection") + chart_data = pd.concat([chart_data, selected_data]) + + chart_data = pd.melt( + chart_data, + id_vars=["date_time_naive", "source"], + var_name="item", + value_name="quantity", + ) + self.chart = ( + alt.Chart(chart_data) + .mark_bar() + .encode( + x=alt.X("item:O"), + y=alt.Y("sum(quantity):Q", stack=False), + color=alt.Color( + "source:N", scale=alt.Scale(domain=["total", "selection"]) + ), + ) + ).properties(width="container", height=100) + + self.ctrl.fig_update(self.chart) + + # -------------------------------------------------------------------------------- + # GUI + # -------------------------------------------------------------------------------- + + def _build_ui(self): + with SinglePageLayout(self.server) as self.ui: + self.ui.title.set_text("Vuetify table example") + with self.ui.toolbar: + vuetify.VSpacer() + vuetify.VTextField( + v_model=("query",), + placeholder="Search", + dense=True, + hide_details=True, + prepend_icon="mdi-magnify", + ) + + with self.ui.content: + with vuetify.VRow(classes="justify-center ma-6"): + fig = vega.Figure(classes="ma-2", style="width: 100%;") + self.ctrl.fig_update = fig.update + vuetify.VDataTable(**self.table) - with layout.content: - with vuetify.VRow(classes="justify-center ma-6"): - fig = vega.Figure(classes="ma-2", style="width: 100%;") - ctrl.fig_update = fig.update - vuetify.VDataTable(**table) # ----------------------------------------------------------------------------- # Start server # ----------------------------------------------------------------------------- + +def main(): + dfTable = DataframeTable() + dfTable.server.start() + + if __name__ == "__main__": - server.start() + main() From b763491f00e51b3ce6e6d7a4f888e9b0b00416a7 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Wed, 15 Apr 2026 10:54:51 +0200 Subject: [PATCH 24/33] docs(examples): use best practice with TrameApp --- .../02_vuetify/00_dataframe-table-vue3.py | 417 +++++++++--------- 1 file changed, 213 insertions(+), 204 deletions(-) diff --git a/examples/02_vuetify/00_dataframe-table-vue3.py b/examples/02_vuetify/00_dataframe-table-vue3.py index e7e3dd46..ba8df86f 100644 --- a/examples/02_vuetify/00_dataframe-table-vue3.py +++ b/examples/02_vuetify/00_dataframe-table-vue3.py @@ -5,213 +5,222 @@ import pandas as pd -from trame.app import get_server +from trame.app import TrameApp from trame.ui.vuetify3 import SinglePageLayout from trame.widgets import html -from trame.widgets import vuetify3 as vuetify - -server = get_server(client_type="vue3") -state, ctrl = server.state, server.controller - -state.setdefault("active_ui", None) - -# -------------------------------------------------------------------------------- -# Loading dataframe -# -------------------------------------------------------------------------------- -data = [ - { - "name": "Frozen Yogurt", - "calories": 200, - "fat": 6, - "carbs": 24, - "protein": 4, - "iron": "1%", - "glutenfree": True, - }, - { - "name": "Ice cream sandwich", - "calories": 200, - "fat": 9, - "carbs": 37, - "protein": 4.3, - "iron": "1%", - "glutenfree": False, - }, - { - "name": "Eclair", - "calories": 300, - "fat": 16, - "carbs": 23, - "protein": 6, - "iron": "7%", - "glutenfree": False, - }, - { - "name": "Cupcake", - "calories": 300, - "fat": 3.7, - "carbs": 67, - "protein": 4.3, - "iron": "8%", - "glutenfree": True, - }, - { - "name": "Gingerbread", - "calories": 400, - "fat": 16, - "carbs": 49, - "protein": 3.9, - "iron": "16%", - "glutenfree": True, - }, - { - "name": "Jelly bean", - "calories": 400, - "fat": 0, - "carbs": 94, - "protein": 0, - "iron": "0%", - "glutenfree": False, - }, - { - "name": "Lollipop", - "calories": 400, - "fat": 0.2, - "carbs": 98, - "protein": 0, - "iron": "2%", - "glutenfree": True, - }, - { - "name": "Honeycomb", - "calories": 400, - "fat": 3.2, - "carbs": 87, - "protein": 6.5, - "iron": "45%", - "glutenfree": True, - }, - { - "name": "Donut", - "calories": 500, - "fat": 25, - "carbs": 51, - "protein": 4.9, - "iron": "22%", - "glutenfree": True, - }, - { - "name": "KitKat", - "calories": 500, - "fat": 26, - "carbs": 65, - "protein": 7, - "iron": "6%", - "glutenfree": True, - }, -] - - -frame = pd.DataFrame.from_dict(data) - -# -------------------------------------------------------------------------------- -# Configure table columns and options -# -------------------------------------------------------------------------------- - -# fmt: off -headers = [ - {"key": "name", "title": "Dessert", "align": "start", "sortable": False}, - {"key": "calories", "title": "Calories"}, - {"key": "fat", "title": "Fat (g)"}, - {"key": "carbs", "title": "Carbs (g)"}, - {"key": "protein", "title": "Protein (g)"}, - {"key": "iron", "title": "Iron (%)"}, - {"key": "glutenfree", "title": "Gluten-Free"}, -] - -state.setdefault("group_by", [{"key": "glutenfree", "order": "asc"}]) - -# fmt: on -_, rows = vuetify.dataframe_to_grid(frame) - - -table = { - "group_by": ("group_by",), - "headers": ("headers", headers), - "items": ("rows", rows), - "search": ("query", ""), - "classes": "elevation-1 ma-4", - "multi_sort": True, - "dense": True, - "items_per_page": 10, -} - - -# -------------------------------------------------------------------------------- -# GUI -# -------------------------------------------------------------------------------- - - -@state.change("rows") -def update_values(rows, **kwargs): - print("rows changed") - # print(rows) - - -with SinglePageLayout(server) as layout: - layout.title.set_text("Vuetify table example") - with layout.toolbar: - vuetify.VSpacer() - vuetify.VTextField( - v_model=("query", ""), - placeholder="Search", - dense=True, - hide_details=True, - ) - - with layout.content: - state.rows = rows - with vuetify.VDataTable(**table): - with vuetify.Template( - group_header="{ item, columns, toggleGroup, isGroupOpen }", - __properties=[ - ("group_header", "v-slot:group-header"), - ], - ): - with html.Tr(): - with html.Td(colspan=("columns.length",)): - vuetify.VBtn( - icon=("isGroupOpen(item) ? '$expand' : '$next'",), - size="small", - variant="text", - click="toggleGroup(item)", - ) - html.Span("{{ item.value ?'Gluten free' : 'Contains gluten' }}") - - with vuetify.Template( - calories="{ item }", - __properties=[ - ("calories", "v-slot:item.calories"), - ], - ): - vuetify.VChip( - "{{ item.calories }}", - color=("item.color",), - dark=True, - ) - with vuetify.Template( - glutenfree="{ item }", - __properties=[ - ("glutenfree", "v-slot:item.glutenfree"), - ], - ): - vuetify.VCheckbox( - "{{ item.glutenfree }}", - v_model=("item.glutenfree",), - disabled=False, - input="flushState('rows')", +from trame.widgets import vuetify3 as v3 +from trame.decorators import change + + +class DataframeTable(TrameApp): + def __init__(self, server=None): + super().__init__(server) + self.state.setdefault("active_ui", None) + self.load_data() + self.configure_table() + self._build_ui() + + # -------------------------------------------------------------------------------- + # Loading dataframe + # -------------------------------------------------------------------------------- + def load_data(self): + data = [ + { + "name": "Frozen Yogurt", + "calories": 200, + "fat": 6, + "carbs": 24, + "protein": 4, + "iron": "1%", + "glutenfree": True, + }, + { + "name": "Ice cream sandwich", + "calories": 200, + "fat": 9, + "carbs": 37, + "protein": 4.3, + "iron": "1%", + "glutenfree": False, + }, + { + "name": "Eclair", + "calories": 300, + "fat": 16, + "carbs": 23, + "protein": 6, + "iron": "7%", + "glutenfree": False, + }, + { + "name": "Cupcake", + "calories": 300, + "fat": 3.7, + "carbs": 67, + "protein": 4.3, + "iron": "8%", + "glutenfree": True, + }, + { + "name": "Gingerbread", + "calories": 400, + "fat": 16, + "carbs": 49, + "protein": 3.9, + "iron": "16%", + "glutenfree": True, + }, + { + "name": "Jelly bean", + "calories": 400, + "fat": 0, + "carbs": 94, + "protein": 0, + "iron": "0%", + "glutenfree": False, + }, + { + "name": "Lollipop", + "calories": 400, + "fat": 0.2, + "carbs": 98, + "protein": 0, + "iron": "2%", + "glutenfree": True, + }, + { + "name": "Honeycomb", + "calories": 400, + "fat": 3.2, + "carbs": 87, + "protein": 6.5, + "iron": "45%", + "glutenfree": True, + }, + { + "name": "Donut", + "calories": 500, + "fat": 25, + "carbs": 51, + "protein": 4.9, + "iron": "22%", + "glutenfree": True, + }, + { + "name": "KitKat", + "calories": 500, + "fat": 26, + "carbs": 65, + "protein": 7, + "iron": "6%", + "glutenfree": True, + }, + ] + + self.frame = pd.DataFrame.from_dict(data) + + # -------------------------------------------------------------------------------- + # Configure table columns and options + # -------------------------------------------------------------------------------- + + def configure_table(self): + # fmt: off + self.headers = [ + {"key": "name", "title": "Dessert", "align": "start", "sortable": False}, + {"key": "calories", "title": "Calories"}, + {"key": "fat", "title": "Fat (g)"}, + {"key": "carbs", "title": "Carbs (g)"}, + {"key": "protein", "title": "Protein (g)"}, + {"key": "iron", "title": "Iron (%)"}, + {"key": "glutenfree", "title": "Gluten-Free"}, + ] + + self.state.setdefault("group_by", [{"key": "glutenfree", "order": "asc"}]) + + # fmt: on + _, self.rows = v3.dataframe_to_grid(self.frame) + + self.table = { + "group_by": ("group_by",), + "headers": ("headers", self.headers), + "items": ("rows", self.rows), + "search": ("query", ""), + "classes": "elevation-1 ma-4", + "multi_sort": True, + "dense": True, + "items_per_page": 10, + } + + # -------------------------------------------------------------------------------- + # GUI + # -------------------------------------------------------------------------------- + + @change("rows") + def update_values(self, rows, **kwargs): + print("rows changed") + + def _build_ui(self): + with SinglePageLayout(self.server) as self.ui: + self.ui.title.set_text("Vuetify table example") + with self.ui.toolbar: + v3.VSpacer() + v3.VTextField( + v_model=("query", ""), + placeholder="Search", + dense=True, + hide_details=True, ) + with self.ui.content: + self.state.rows = self.rows + with v3.VDataTable(**self.table): + with v3.Template( + group_header="{ item, columns, toggleGroup, isGroupOpen }", + __properties=[ + ("group_header", "v-slot:group-header"), + ], + ): + with html.Tr(): + with html.Td(colspan=("columns.length",)): + v3.VBtn( + icon=("isGroupOpen(item) ? '$expand' : '$next'",), + size="small", + variant="text", + click="toggleGroup(item)", + ) + html.Span( + "{{ item.value ?'Gluten free' : 'Contains gluten' }}" + ) + + with v3.Template( + calories="{ item }", + __properties=[ + ("calories", "v-slot:item.calories"), + ], + ): + v3.VChip( + "{{ item.calories }}", + color=("item.color",), + dark=True, + ) + with v3.Template( + glutenfree="{ item }", + __properties=[ + ("glutenfree", "v-slot:item.glutenfree"), + ], + ): + v3.VCheckbox( + "{{ item.glutenfree }}", + v_model=("item.glutenfree",), + disabled=False, + input="flushState('rows')", + ) + + +def main(): + dfTable = DataframeTable() + dfTable.server.start() + if __name__ == "__main__": - server.start() + main() From 2045b953d2974dad899a0d0bd2062a3f7a698947 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Thu, 16 Apr 2026 11:17:25 +0200 Subject: [PATCH 25/33] docs: dense=True -> density="compact" for vue3 --- docs/vitepress/guide/tutorial/application.md | 24 +++++++++---------- docs/vitepress/guide/tutorial/html.md | 6 ++--- docs/vitepress/guide/tutorial/paraview.md | 2 +- examples/00_howdoi/data_from_remote_url.py | 2 +- .../02_vuetify/00_dataframe-table-vue3.py | 2 +- examples/03_markdown/01_markdown.py | 2 +- examples/05_charts/Plotly/drag-and-drop.py | 2 +- examples/jupyter/webinar/gui.ipynb | 4 ++-- examples/validation/panel/app_trame.py | 8 +++---- trame/app/pv_demo.py | 2 +- 10 files changed, 27 insertions(+), 27 deletions(-) diff --git a/docs/vitepress/guide/tutorial/application.md b/docs/vitepress/guide/tutorial/application.md index 65134095..071b79ba 100644 --- a/docs/vitepress/guide/tutorial/application.md +++ b/docs/vitepress/guide/tutorial/application.md @@ -286,7 +286,7 @@ def standard_buttons(): off_icon="mdi-cube-off-outline", classes="mx-1", hide_details=True, - dense=True, + density="compact", ) vuetify.VCheckbox( v_model="$vuetify.theme.dark", @@ -294,7 +294,7 @@ def standard_buttons(): off_icon="mdi-lightbulb-outline", classes="mx-1", hide_details=True, - dense=True, + density="compact", ) vuetify.VCheckbox( v_model=("viewMode", "local"), # VtkRemoteLocalView => {namespace}Mode=['local', 'remote'] @@ -304,7 +304,7 @@ def standard_buttons(): false_value="remote", classes="mx-1", hide_details=True, - dense=True, + density="compact", ) with vuetify.VBtn(icon=True, click=ctrl.view_reset_camera): vuetify.VIcon("mdi-crop-free") @@ -379,7 +379,7 @@ def ui_card(title, ui_name): classes="grey lighten-1 py-1 grey--text text--darken-3", style="user-select: none; cursor: pointer", hide_details=True, - dense=True, + density="compact", ) content = vuetify.VCardText(classes="py-2") return content @@ -399,7 +399,7 @@ def mesh_card(): vuetify.VSelect( # Representation ) - with vuetify.VRow(classes="pt-2", dense=True): + with vuetify.VRow(classes="pt-2", density="compact"): with vuetify.VCol(cols="6"): vuetify.VSelect( # Color By @@ -436,7 +436,7 @@ def contour_card(): * vuetify.VSelect( * # Representation * ) - * with vuetify.VRow(classes="pt-2", dense=True): + * with vuetify.VRow(classes="pt-2", density="compact"): * with vuetify.VCol(cols="6"): * vuetify.VSelect( * # Color By @@ -494,7 +494,7 @@ vuetify.VSelect( ), label="Representation", hide_details=True, - dense=True, + density="compact", outlined=True, classes="pt-1", ) @@ -529,7 +529,7 @@ vuetify.VSelect( v_model=("mesh_color_array_idx", 0), items=("array_list", dataset_arrays), hide_details=True, - dense=True, + density="compact", outlined=True, classes="pt-1", ) @@ -582,7 +582,7 @@ Second, we create a dropdown menu for the color map. The `VSelect` component is ], ), hide_details=True, - dense=True, + density="compact", outlined=True, classes="pt-1", ) @@ -620,7 +620,7 @@ We create a slider for the opacity. The `VSlider` component is used to create th label="Opacity", classes="mt-1", hide_details=True, - dense=True, + density="compact", ) ``` @@ -656,7 +656,7 @@ We create a dropdown menu for the contour by. The `VSelect` component is used to v_model=("contour_by_array_idx", 0), items=("array_list", dataset_arrays), hide_details=True, - dense=True, + density="compact", outlined=True, classes="pt-1", ) @@ -682,7 +682,7 @@ We create a slider for the contour value. The `VSlider` component is used to cre label="Value", classes="my-1", hide_details=True, - dense=True, + density="compact", ) ``` diff --git a/docs/vitepress/guide/tutorial/html.md b/docs/vitepress/guide/tutorial/html.md index 488c870e..52d7baa2 100644 --- a/docs/vitepress/guide/tutorial/html.md +++ b/docs/vitepress/guide/tutorial/html.md @@ -132,7 +132,7 @@ with SinglePageLayout(server) as layout: vuetify.VSwitch( v_model="$vuetify.theme.dark", hide_details=True, - dense=True, + density="compact", ) with vuetify.VBtn( icon=True, @@ -182,7 +182,7 @@ with SinglePageLayout(server) as layout: vuetify.VSlider( v_model=("resolution", DEFAULT_RESOLUTION), # (var_name, initial_value) min=3, max=60, step=1, # min/max/step - hide_details=True, dense=True, # presentation params + hide_details=True, density="compact", # presentation params style="max-width: 300px", # css style ) with vuetify.VBtn(icon=True, click=reset_resolution): @@ -192,7 +192,7 @@ with SinglePageLayout(server) as layout: vuetify.VSwitch( v_model="$vuetify.theme.dark", hide_details=True, - dense=True, + density="compact", ) with vuetify.VBtn(icon=True, click=ctrl.view_reset_camera): vuetify.VIcon("mdi-crop-free") diff --git a/docs/vitepress/guide/tutorial/paraview.md b/docs/vitepress/guide/tutorial/paraview.md index bbcdb589..75984abb 100644 --- a/docs/vitepress/guide/tutorial/paraview.md +++ b/docs/vitepress/guide/tutorial/paraview.md @@ -125,7 +125,7 @@ with layout.toolbar: max=60, step=1, hide_details=True, - dense=True, + density="compact", ) ``` diff --git a/examples/00_howdoi/data_from_remote_url.py b/examples/00_howdoi/data_from_remote_url.py index 01d993d5..501d880e 100755 --- a/examples/00_howdoi/data_from_remote_url.py +++ b/examples/00_howdoi/data_from_remote_url.py @@ -92,7 +92,7 @@ def _build_ui(self): with self.ui.content: with v3.VContainer(fluid=True, classes="fill-height pa-0 ma-0"): - with v3.VRow(dense=True, style="height: 100%;"): + with v3.VRow(density="compact", style="height: 100%;"): with v3.VCol( classes="pa-0", style="border-right: 1px solid #ccc; position: relative;", diff --git a/examples/02_vuetify/00_dataframe-table-vue3.py b/examples/02_vuetify/00_dataframe-table-vue3.py index ba8df86f..1377c881 100644 --- a/examples/02_vuetify/00_dataframe-table-vue3.py +++ b/examples/02_vuetify/00_dataframe-table-vue3.py @@ -167,7 +167,7 @@ def _build_ui(self): v3.VTextField( v_model=("query", ""), placeholder="Search", - dense=True, + density="compact", hide_details=True, ) diff --git a/examples/03_markdown/01_markdown.py b/examples/03_markdown/01_markdown.py index b9a965c9..ec71d040 100644 --- a/examples/03_markdown/01_markdown.py +++ b/examples/03_markdown/01_markdown.py @@ -47,7 +47,7 @@ def _build_ui(self): v_model=("file_name", "demo.md"), items=("options", ["demo.md", "sample.md", "module.md"]), hide_details=True, - dense=True, + density="compact", ) with self.ui.content: diff --git a/examples/05_charts/Plotly/drag-and-drop.py b/examples/05_charts/Plotly/drag-and-drop.py index 7c672091..c2594727 100644 --- a/examples/05_charts/Plotly/drag-and-drop.py +++ b/examples/05_charts/Plotly/drag-and-drop.py @@ -128,7 +128,7 @@ def _build_ui(self): ) with v3.VMain(): - with v3.VRow(classes="h-100 pa-1 ma-0", dense=True): + with v3.VRow(classes="h-100 pa-1 ma-0", density="compact"): for i in range(4): name = f"slot_{i}" with v3.VCol(cols="6", classes="h-50"): diff --git a/examples/jupyter/webinar/gui.ipynb b/examples/jupyter/webinar/gui.ipynb index ac8275b1..b842488a 100644 --- a/examples/jupyter/webinar/gui.ipynb +++ b/examples/jupyter/webinar/gui.ipynb @@ -182,7 +182,7 @@ "source": [ "with VAppLayout(server, fill_height=True) as layout:\n", " with v3.VContainer(classes=\"pa-md-12\", fluid=True):\n", - " with v3.VRow(dense=True):\n", + " with v3.VRow(density=\"compact\"):\n", " v3.VSlider(\n", " v_model=(\"size\", 1),\n", " min=1,\n", @@ -203,7 +203,7 @@ " hide_details=True,\n", " classes=\"ml-4\",\n", " )\n", - " with v3.VRow(dense=True):\n", + " with v3.VRow(density=\"compact\"):\n", " with v3.VCol(v_for=\"item, idx in data\", key=\"idx\", cols=12, sm=6, md=4):\n", " StatCard(card_name=\"item\")\n", "\n", diff --git a/examples/validation/panel/app_trame.py b/examples/validation/panel/app_trame.py index fd9af77d..5b658b25 100644 --- a/examples/validation/panel/app_trame.py +++ b/examples/validation/panel/app_trame.py @@ -79,7 +79,7 @@ def ui(self): with quasar.QToolbar(): with quasar.QToolbarTitle() as title: quasar.QBtn( - dense=True, + density="compact", flat=True, round=True, icon="menu", @@ -128,7 +128,7 @@ def ui(self): with quasar.QInput( filled=True, v_model=("scene_bg_color", "#ffffff"), - dense=True, + density="compact", classes="q-my-sm", style=("{ background: scene_bg_color }",), ): @@ -168,7 +168,7 @@ def ui(self): label="Interpolation", classes="q-mb-md", v_model=("actor_interpolation", "Flat"), - dense=True, + density="compact", options=( "actor_interpolation_options", ["Flat", "Phong"], @@ -196,7 +196,7 @@ def ui(self): label="Representation", classes="q-mb-md", v_model=("actor_representation", "Surface"), - dense=True, + density="compact", options=( "actor_representation_options", ["Surface", "Wireframe", "Points"], diff --git a/trame/app/pv_demo.py b/trame/app/pv_demo.py index d00aacb7..51925359 100644 --- a/trame/app/pv_demo.py +++ b/trame/app/pv_demo.py @@ -60,7 +60,7 @@ def _build_ui(self): max=60, step=1, hide_details=True, - dense=True, + density="compact", style="max-width: 300px", ) v3.VDivider(vertical=True, classes="mx-2") From 51c5d787d634b77f93345ebd2fb48c8a459ab7c6 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Thu, 16 Apr 2026 11:28:02 +0200 Subject: [PATCH 26/33] docs: dense=True -> density="compact" for vue3 --- examples/validation/discussion/655.py | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/validation/discussion/655.py b/examples/validation/discussion/655.py index f10ff216..f2346fa0 100644 --- a/examples/validation/discussion/655.py +++ b/examples/validation/discussion/655.py @@ -57,7 +57,7 @@ def update_cube_axes_visibility(**kwargs): with vuetify.VCard(): vuetify.VCardTitle("This is home") with vuetify.VContainer(fluid=True, style="height: 600px;"): - with vuetify.VRow(dense=True): + with vuetify.VRow(density="compact"): vuetify.VSpacer() figure = plotly.Figure( display_logo=False, @@ -97,7 +97,7 @@ def update_cube_axes_visibility(**kwargs): false_value="light", classes="mx-1", hide_details=True, - dense=True, + density="compact", ) # vuetify.VCheckbox( # v_model="$vuetify.theme.dark", @@ -107,7 +107,7 @@ def update_cube_axes_visibility(**kwargs): # off_icon="mdi-lightbulb-outline", # classes="mx-1", # hide_details=True, - # dense=True, + # density="compact", # ) with layout.content: From da98a870ac78c3592349b3fcc6f61ab63e747f2d Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Thu, 16 Apr 2026 11:38:03 +0200 Subject: [PATCH 27/33] docs(examples): make it clear that vue2 is used with alias v2 Ref: https://github.com/Kitware/trame/pull/876#discussion_r3090508161 --- examples/02_vuetify/00_dataframe-table.py | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/examples/02_vuetify/00_dataframe-table.py b/examples/02_vuetify/00_dataframe-table.py index 5595d4eb..ed322c85 100644 --- a/examples/02_vuetify/00_dataframe-table.py +++ b/examples/02_vuetify/00_dataframe-table.py @@ -11,7 +11,8 @@ from trame.app import TrameApp from trame.ui.vuetify import SinglePageLayout -from trame.widgets import vuetify, vega +from trame.widgets import vega +from trame.widgets import vuetify as v2 from trame.decorators import change # ----------------------------------------------------------------------------- @@ -70,7 +71,7 @@ def fetch_data(self, samples=15): def prepare_table(self): header_options = {"apple": {"sortable": False}} - headers, rows = vuetify.dataframe_to_grid(self.DATA_FRAME, header_options) + headers, rows = v2.dataframe_to_grid(self.DATA_FRAME, header_options) self.table = { "headers": ("headers", headers), @@ -133,8 +134,8 @@ def _build_ui(self): with SinglePageLayout(self.server) as self.ui: self.ui.title.set_text("Vuetify table example") with self.ui.toolbar: - vuetify.VSpacer() - vuetify.VTextField( + v2.VSpacer() + v2.VTextField( v_model=("query",), placeholder="Search", dense=True, @@ -143,10 +144,10 @@ def _build_ui(self): ) with self.ui.content: - with vuetify.VRow(classes="justify-center ma-6"): + with v2.VRow(classes="justify-center ma-6"): fig = vega.Figure(classes="ma-2", style="width: 100%;") self.ctrl.fig_update = fig.update - vuetify.VDataTable(**self.table) + v2.VDataTable(**self.table) # ----------------------------------------------------------------------------- From 5679c70a5eaf0f70202f5f4121cbbd0affb79fd0 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Thu, 16 Apr 2026 11:40:44 +0200 Subject: [PATCH 28/33] docs(examples): change **kwargs to **_ Ref: https://github.com/Kitware/trame/pull/876#discussion_r3090511969 --- examples/03_markdown/01_markdown.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/03_markdown/01_markdown.py b/examples/03_markdown/01_markdown.py index ec71d040..e7f026ce 100644 --- a/examples/03_markdown/01_markdown.py +++ b/examples/03_markdown/01_markdown.py @@ -26,7 +26,7 @@ def __init__(self, server=None): # ----------------------------------------------------------------------------- @change("file_name") - def update_md(self, file_name, **kwargs): + def update_md(self, file_name, **_): md_file_path = os.path.join(os.path.dirname(__file__), file_name) with open(md_file_path, encoding="utf-8") as md: self.ctrl.md_update(md.read()) From 00f71b5a2ebbce81ff2ab9c1125916d2cd4cd685 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Thu, 16 Apr 2026 11:46:03 +0200 Subject: [PATCH 29/33] docs(examples): change to ParaView 5.13.that includes the --venv native arg Ref: https://github.com/Kitware/trame/pull/876/changes/ BASE..b763491f00e51b3ce6e6d7a4f888e9b0b00416a7#r3090520084 --- examples/07_paraview/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/07_paraview/README.md b/examples/07_paraview/README.md index d5d2e9c0..12a8e9c6 100644 --- a/examples/07_paraview/README.md +++ b/examples/07_paraview/README.md @@ -7,7 +7,7 @@ We can add more Python packages into ParaView by create a virtual environment an ## venv for ParaView ```bash -python3.9 -m venv .pvenv +python3.12 -m venv .pvenv source .pvenv/bin/activate pip install trame>=2.0.0 deactivate @@ -27,4 +27,4 @@ export PV_VENV=$PWD/.pvenv ``` **Note**: - - trame v2 requires ParaView 5.11+ \ No newline at end of file + - trame requires ParaView 5.13+ \ No newline at end of file From fe2f2e6fb677484e0bc75b082f21d64c7dd0faf4 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Thu, 16 Apr 2026 11:53:55 +0200 Subject: [PATCH 30/33] docs(examples): change **kwargs to **_ because unused Ref: https://github.com/Kitware/trame/pull/876/changes/ BASE..b763491f00e51b3ce6e6d7a4f888e9b0b00416a7#r3090500370 --- examples/02_vuetify/00_dataframe-table.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/02_vuetify/00_dataframe-table.py b/examples/02_vuetify/00_dataframe-table.py index ed322c85..ba140fc4 100644 --- a/examples/02_vuetify/00_dataframe-table.py +++ b/examples/02_vuetify/00_dataframe-table.py @@ -91,7 +91,7 @@ def prepare_table(self): # -------------------------------------------------------------------------------- @change("selection") - def selection_change(self, selection=[], **kwargs): + def selection_change(self, selection=[], **_): selected_df = pd.DataFrame(selection) # Chart From bd2d32885c98d004bde76a23394e70b6a5df42e1 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Thu, 16 Apr 2026 12:07:01 +0200 Subject: [PATCH 31/33] docs(examples): use v_slot_group_header Ref: https://github.com/Kitware/trame/pull/876/changes/ BASE..b763491f00e51b3ce6e6d7a4f888e9b0b00416a7#r3090494150 --- examples/02_vuetify/00_dataframe-table-vue3.py | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/examples/02_vuetify/00_dataframe-table-vue3.py b/examples/02_vuetify/00_dataframe-table-vue3.py index 1377c881..da4cb3b8 100644 --- a/examples/02_vuetify/00_dataframe-table-vue3.py +++ b/examples/02_vuetify/00_dataframe-table-vue3.py @@ -175,10 +175,7 @@ def _build_ui(self): self.state.rows = self.rows with v3.VDataTable(**self.table): with v3.Template( - group_header="{ item, columns, toggleGroup, isGroupOpen }", - __properties=[ - ("group_header", "v-slot:group-header"), - ], + v_slot_group_header="{ item, columns, toggleGroup, isGroupOpen }", ): with html.Tr(): with html.Td(colspan=("columns.length",)): From e5d0a47558aae3956b78dd3e959e16f5a41ddf2b Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Thu, 16 Apr 2026 14:03:51 +0200 Subject: [PATCH 32/33] docs(examples): update version of trame Ref: https://github.com/Kitware/trame/pull/876/changes/ BASE..bd2d32885c98d004bde76a23394e70b6a5df42e1#r3092867340 --- examples/07_paraview/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/07_paraview/README.md b/examples/07_paraview/README.md index 12a8e9c6..23b5837a 100644 --- a/examples/07_paraview/README.md +++ b/examples/07_paraview/README.md @@ -9,7 +9,7 @@ We can add more Python packages into ParaView by create a virtual environment an ```bash python3.12 -m venv .pvenv source .pvenv/bin/activate -pip install trame>=2.0.0 +pip install trame deactivate ``` @@ -27,4 +27,4 @@ export PV_VENV=$PWD/.pvenv ``` **Note**: - - trame requires ParaView 5.13+ \ No newline at end of file + - trame requires ParaView 5.13+ From 825781874dfb9683b47b803a8cd08acf3fbdf844 Mon Sep 17 00:00:00 2001 From: Ulysse DURAND Date: Fri, 17 Apr 2026 15:52:20 +0200 Subject: [PATCH 33/33] docs(examples): fix code snippet path Ref: https://github.com/Kitware/trame/actions/runs/24511784824/job/71644607253 --- docs/vitepress/examples/core/docker.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/vitepress/examples/core/docker.md b/docs/vitepress/examples/core/docker.md index 06703de3..651e9a49 100644 --- a/docs/vitepress/examples/core/docker.md +++ b/docs/vitepress/examples/core/docker.md @@ -7,8 +7,8 @@ For instance you could deploy the following on a CapRover instance by just runni [![Simple deployment over https](/assets/images/deployment/cone-caprover.png)](https://github.com/Kitware/trame-app-cone) ::: code-group -<<< @/../../examples/deploy/docker/Dockerfile -<<< @/../../examples/deploy/docker/captain-definition +<<< @/../../examples/deploy/docker/VtkRendering/Dockerfile +<<< @/../../examples/deploy/docker/VtkRendering/captain-definition <<< @/../../examples/deploy/docker/VtkRendering/app.py <<< @/../../examples/deploy/docker/VtkRendering/setup/apps.yml [./setup/apps.yaml] <<< @/../../examples/deploy/docker/VtkRendering/setup/requirements.txt [./setup/requirements.txt]