Trame 3+ Examples with Vuetify 3 and Vue 3

This repository showcases modern Trame application development using Trame 3+, Vue 3, and Vuetify 3. The examples demonstrate best practices, including the use of the @TrameApp() decorator and an inheritance-based application structure.

Migrating from Trame 2 / Vue 2 / Vuetify 2

Moving to the latest versions of Trame, Vue, and Vuetify offers significant improvements in performance, features, and developer experience. Here are some key considerations:

Trame 3+: Leverages the latest Python features and provides a more streamlined API.
Vue 3: Introduces the Composition API, improved performance, and better TypeScript support.
Vuetify 3: A complete rewrite for Vue 3, offering enhanced components and customization options. It's available via the trame-vuetify package.

Modern Application Structure: `@TrameApp()` and Inheritance

A recommended approach for structuring Trame 3 applications is to use the @TrameApp("AppName") decorator on a class that inherits from trame.app.TrameApp. This pattern promotes modularity and organization.

from trame.app import get_server, TrameApp
from trame.ui.vuetify import VAppLayout # Or other UI components

@TrameApp()
class MyApp(TrameApp):
    def __init__(self, server=None):
        super().__init__(server)
        # Initialize your state, controllers, and UI here
        self.ui = self._build_ui()

    def _build_ui(self):
        with VAppLayout(self.server) as layout:
            # Define your layout and components
            # ...
            return layout

if __name__ == "__main__":
    app = MyApp()
    app.server.start()

Examples

Below are the examples included in this repository. Each example demonstrates specific features or use cases of Trame.

Vuetify Examples

1. DataFrame Table

Script: 00_dataframe-table.py
Description: This example demonstrates how to display a pandas DataFrame using the Vuetify 3 VDataTable component within a Trame 3 application. It showcases features like reactive search, sorting, selection, and dynamic grouping. The application is built using a modern class-based structure.
Image:

2. Menu

Script: 01_menu.py
Description: This example demonstrates a simple Vuetify 3 VMenu component within a Trame 3 application. It shows how to create a menu with items that trigger a Python callback when clicked, all refactored into a modern class-based structure.
Image:

2. Router

Script: 02_router.py
Description: This application demonstrates multi-page navigation using trame-router with Vuetify 3 components in a Trame 3 application. It features a navigation drawer, dynamically generated routes, and showcases how to structure a multi-view application.
Image:

Markdown Examples

1. Markdown Viewer

Script: 00_markdown.py
Description: This application demonstrates how to use the trame-markdown component to render Markdown content within a Trame application. It allows dynamically selecting and rendering local Markdown files, showcasing a state-driven approach to content updates in a modern Trame 3 / Vue 3 class-based structure.
Image:

Charts / Plotly Examples

1. Plotly Charts Selector

Script: 00_plotly-charts-selector.py
Description: This application demonstrates how to dynamically select and display different Plotly charts within a Trame application. It serves as a foundational example for integrating Plotly with Trame and showcases a responsive UI for chart selection.
Image:

2. Resizable Plotly Charts

Script: 01_plotly-charts-resizable.py
Description: This example builds upon basic chart display by demonstrating how to make Plotly charts resizable within the Trame UI. It showcases handling layout changes and ensuring charts adapt to their container size.
Image:

Charts / Altair-Vega Examples

1. Altair Charts Selector

Script: 00_altair-charts-selector.py
Description: This application demonstrates dynamic selection and display of various Altair charts (e.g., Scatter Matrix, US Income By State, StreamGraph) using trame.widgets.vega.Figure. It's built with a modern Trame 3 / Vue 3 class-based structure and highlights compatibility considerations for Altair and Vega-Lite versions.
Image:

Charts / Matplotlib Examples

1. Matplotlib Charts Selector

Script: 00_matplotlib-charts.py
Description: This application demonstrates dynamic selection and display of various Matplotlib charts. It showcases responsive chart rendering using trame.SizeObserver to adapt to browser window resizing and high-DPI displays. The example is built with a modern Trame 3 / Vue 3 class-based structure.
Image:

VTK / ClientOnly Examples

1. Cheatsheet

Script: cheatsheet.py
Description: This application demonstrates client-only rendering and interaction with VTK.js in Trame. It features a cone whose resolution can be dynamically updated using a slider. This example highlights how to use vtk.VtkView, VtkGeometryRepresentation, and VtkAlgorithm for client-side rendering without a server-side VTK pipeline.
Image:

2. Client-Side Cone

Script: client-side-cone.py
Description: This application demonstrates a basic client-side VTK cone rendering. Users can adjust the cone's resolution using a slider. The example is built using a modern Trame 3 class-based structure and showcases client-only rendering with Vue 3/Vuetify 3.
Image:

VTK / SimpleCone Examples

1. Server-Side Cone (ClientView)

Script: 01_SimpleCone/ClientView.py
Description: This application demonstrates server-side VTK rendering with Trame. A cone's resolution is controlled by a slider, with the VTK pipeline running on the server and the resulting geometry pushed to the client. The example is built using a modern Trame 3 class-based structure and showcases how to use vtk.VtkPolyData to display server-side geometry.
Image:

2. Client-Side Cone (LocalRendering)

Script: 01_SimpleCone/LocalRendering.py
Description: This application demonstrates client-side VTK rendering using VtkLocalView. The entire VTK pipeline, including the render window, is managed in Python on the server, and VtkLocalView renders the scene directly in the browser. A slider controls the cone's resolution. This example showcases a modern Trame 3 class-based structure for local rendering.
Image:

3. Server-Side Cone (RemoteRendering)

Script: 01_SimpleCone/RemoteRendering.py
Description: This application demonstrates server-side rendering with VtkRemoteView. The VTK pipeline runs on the server, and rendered images are streamed to the client. It includes a slider to control the cone's resolution and a commented-out implementation for advanced event handling, showing how to capture the full event payload (e.g., mouse position, keys) from the client.
Image:

VTK / ContourGeometry Examples

1. Client-Side Contour Visualization

Script: 02_ContourGeometry/ClientView.py
Description: This application demonstrates visualizing a VTK contour filter's output by sending the generated geometry (VtkPolyData) to the client for rendering. A slider dynamically changes the contour value, and the updated geometry is pushed to the client. The example is built with a modern Trame 3 class-based structure.
Image:

2. Server-Side Contour Visualization (Remote Rendering)

Script: 02_ContourGeometry/RemoteViewRendering.py
Description: This application demonstrates server-side rendering of a VTK contour filter's output using VtkRemoteView. It loads a medical head scan (head.vti), allows users to adjust the isovalue with a slider, and streams the rendered images to the client. The example showcases handling both interactive and on-release slider updates by dynamically exposing the end event on the VSlider component using the __events attribute.
Image:

3. Client-Side Contour Visualization (Local Rendering)

Script: 02_ContourGeometry/LocalViewRendering.py
Description: This application demonstrates client-side VTK rendering using VtkLocalView. The entire VTK pipeline, including the render window, is managed in Python on the server, and VtkLocalView renders the scene directly in the browser. A slider controls the contour value. This example showcases a modern Trame 3 class-based structure for local rendering.
Image:

4. Contour Visualization (Dynamic Local/Remote Rendering)

Script: 02_ContourGeometry/LocalViewRemoteViewRendering.py
Description: This application demonstrates how to use both VtkLocalView (client-side rendering) and VtkRemoteView (server-side rendering) within the same Trame application. It allows the user to toggle between rendering modes at runtime and showcases advanced features like conditional UI rendering, managing multiple view contexts, and synchronizing UI controls (slider, buttons) with the active view.
Image:

5. Contour Visualization (Unified Dynamic Local/Remote Rendering)

Script: 02_ContourGeometry/RemoteLocalViewRendering.py
Description: This application demonstrates dynamic switching between local (client-side) and remote (server-side) rendering using the unified VtkRemoteLocalView component. The example has been fully refactored into a modern Trame 3 class-based structure. It showcases best practices such as using the component's mounted lifecycle hook for a reliable initial camera reset and exposing the end event on the VSlider to trigger view updates only on release, optimizing performance.
Image:

VTK / MultiViews Examples

1. Multi-View Synchronization

Script: vtk/03_MultiViews/multiview.py
Description: This application demonstrates how to display multiple synchronized VtkRemoteView instances of the same VTK scene. Each view has a different background color, and all views share the same cone geometry. The resolution of the cone can be controlled globally via a slider. The example is built with a modern Trame 3 class-based structure and showcases a responsive grid layout for the views.
Image:

VTK / WASM Examples

1. Bike CFD with Client-Side Rendering (WASM)

Script: vtk/04_wasm/wasm.py
Description: This application demonstrates client-side rendering of a bike CFD simulation using trame-vtklocal (VTK compiled to WebAssembly - WASM). It allows interaction with a line widget to change streamlines and adjust the bike's opacity. The example showcases HttpFile for remote data fetching and robust event handling between the WASM client and the Python server.
Image:

VTK / Applications

1. Multi-Filter VTK Pipeline

Script: vtk/05_Applications/MultiFilter.py
Description: A refactored and modernized Trame 3 application that demonstrates a VTK pipeline with multiple, dependent filters (a mesh and a contour). The UI provides dynamic controls for actor visibility, representation, color mapping, and opacity, all built with Vuetify 3. It showcases a class-based structure, reactive state management, and local/remote view toggling.
Image:

2. Remote Selection

Script: vtk/05_Applications/RemoteSelection.py
Description: This application demonstrates how to link a VTK remote view with a Plotly chart, allowing for cross-selection between the two. It has been fully refactored into a modern Trame 3 class-based structure, fixing several bugs from the original implementation and ensuring robust, reactive state management.
Image:

PyDeck Examples

1. Mapping Demo

Script: 00_mapping-demo.py
Description: This application showcases the integration of Deck.gl with Trame for visualizing geospatial data. It demonstrates how to create interactive maps with multiple data layers (e.g., bike rentals, BART stops) using PyDeck and Mapbox, all within a modern Trame 3 / Vue 3 structure.
Image:

2. Uber NYC Pickups Visualization

Script: 01_uber-nyc-pickups.py
Description: Visualizes Uber pickup data across New York City using Deck.gl for heatmap layers on multiple maps (Overall NYC, JFK, Newark, and LaGuardia airports). Features an Altair-based histogram displaying pickups per minute for a user-selected hour. Includes a slider to filter data by the hour of the day. Demonstrates reactive updates, a Vuetify 3 grid layout, and Mapbox API integration for base maps. Requires a MAPBOX_API_KEY environment variable for map rendering.
Image:

More examples to come!

Running the Examples

Ensure you have Python and pip installed.

Create and activate a virtual environment:

python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

Install the required dependencies using the requirements.txt file:
```
pip install -r requirements.txt
```

Run an example script:

python charts/plotly/00_plotly-charts-selector.py

Open your web browser and navigate to the URL provided in the console (usually http://localhost:8080).

Name		Name	Last commit message	Last commit date
Latest commit History 46 Commits
charts		charts
data		data
docs/images		docs/images
markdown		markdown
pydeck		pydeck
vtk		vtk
vuetify		vuetify
.gitignore		.gitignore
COLLABORATION_GUIDELINES.md		COLLABORATION_GUIDELINES.md
README.md		README.md
requirements.txt		requirements.txt

patrickoleary/trame-3-examples

Folders and files

Latest commit

History

Repository files navigation