class trame.widgets.trame.ClientStateChange(children=None, **kwargs)

Bases: AbstractElement

Allow the client side to trigger an event when a state element changes.

  • value (str) – Name of the state variable to monitor

  • immediate (bool) – Trigger change right away rather than at nextTick (default: False)

  • trigger_on_create (bool) – If set to true, the change event will be triggered when the client start. (default: False)

  • change (Function or JS expression (event)) – Event triggered when state[value] change

class trame.widgets.trame.ClientTriggers(ref='trame_triggers', children=None, **kwargs)

Bases: AbstractElement

Allow to trigger an event on the client side

  • ref – Identifier for the client side DOM elem

  • **kwargs

    List of events to registers with their callbacks

call(method, *args)

Perform the call on the client


method – Key used in the kwargs at construction time

class trame.widgets.trame.Cursor(**kwargs)

Bases: AbstractElement

Allow to define the cursor of the parent component based on an active index and the list of css cursor names.

  • active – index to selection the current cursor

  • cursors – Array of available cursor to chose from

class trame.widgets.trame.FloatCard(children=None, **kwargs)

Bases: AbstractElement

A vuetify VCard container which floats above the application and can be moved freely from a handle

  • handle_color

  • handle_position

  • handle_size

  • location

Vuetify VCard attributes

  • color

  • dark

  • flat

  • height

  • elevation

  • hover

  • img

  • light

  • loader_height

  • loading

  • max_height

  • max_width

  • min_height

  • min_width

  • outlined

  • raised

  • rounded

  • shaped

  • tile

  • width

class trame.widgets.trame.GitTree(children=None, **kwargs)

Bases: AbstractElement

A component to present a Tree the same way Git does it (Like a subway map)

  • sources – All of the elements of the tree

  • actives – Any active elements of the tree

Vuetify styling attributes

  • active_background

  • delta_x

  • delta_y

  • font_size

  • margin

  • multiselect

  • offset

  • palette

  • radius

  • root_id

  • stroke

  • width

  • active_circle_stroke_color

  • not_visible_circle_fill_color

  • text_color

  • text_weight

  • action_map

  • action_size


  • actives_change

  • visibility_change

  • action

class trame.widgets.trame.LifeCycleMonitor(children=None, **kwargs)

Bases: AbstractElement

LifeCycleMonitor is a debug purpose tool to validate a sub-tree get the proper expected life cycle event.

This component allow to print into the client side console when any of the monitored event happen.

  • name – User specific text to easily identify which component the event was coming from.

  • type – console[type](…) so you can use ‘log’, ‘error’, ‘info’, ‘warn’

  • value – Another value that is printed when an event occur

  • events – List of events to monitor such as created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed

class trame.widgets.trame.LineSeed(children=None, **kwargs)

Bases: AbstractElement

class trame.widgets.trame.ListBrowser(children=None, **kwargs)

Bases: AbstractElement

A component that list items that be used for browsing directories or simple item picking

  • list – List stored in state

  • filter – Function to filter list

  • path_icon

  • path_selected_icon

  • filter_icon

  • path

class trame.widgets.trame.MouseTrap(**kwargs)

Bases: AbstractElement

MouseTrap allow to capture client side event and bind them to server side trigger.



The keys are meant to be assigned to events.

widget = MouseTrap(Save=save_fn, Open=open_fn, Edit=edit_fn, Escape=exit_fn)

widget.bind(["ctrl+s", "mod+s"], "Save", stop_propagation=True)
widget.bind(["ctrl+o", "mod+o"], "Open", stop_propagation=True)
widget.bind("mod+e", "Edit")
widget.bind("esc", "Escape")
bind(keys, event_name, stop_propagation=False, listen_to=None)

Create binding for key stroke to event name.

class trame.widgets.trame.SizeObserver(_name, **kwargs)

Bases: AbstractElement

SizeObserver allow to monitor the space available in the UI and bind that information onto a state variable.


_name – Name of the state variable to bound the component size to

class trame.widgets.trame.XaiHeatMap(children=None, **kwargs)

Bases: AbstractElement

XaiHeatMap create a visual representation of a numerical array representing a 2D image.

  • heatmap – Array to display

  • shape – expect [width, height]

  • color_mode – full, maxSym, minSym, positive, negative, custom (default: full)

  • color_range – Range to be used when color_mode=”custom”

  • color_preset – Preset name from vtk.js


  • hover – event triggered when moving over the map

  • enter – event triggered when entring the map area

  • exit – event triggered when exiting the map area

  • color_range_change – event triggered when color range used has changed

  • full_range_change – event triggered when full range has changed

class trame.widgets.trame.XaiImage(children=None, **kwargs)

Bases: AbstractElement

XaiImage show an image with a XaiHeatMap as overlay

  • src – URL to the image to display

  • max_height – Limit the size of the image vertically

  • max_width – Limit the size of the image horizontally

  • width – If present use as style.width = “…”

  • colors – Palette to use for areas

  • areas – (optional) Array containing bounding box info

  • area_key – (optional) Key in the area[i][key] that id the area

  • area_style – (optional) css style to apply (default: { stroke-width: 3, rx: 10 })

  • area_selected – (optional) Array of area ids

  • area_selected_opacity – Opacity to use for selected areas 0-1

  • area_opacity – Opacity to use for all areas 0-1

  • heatmaps – Dict of arrays

  • heatmap_opacity – Opacity of the heatmap overlay

  • heatmap_color_preset

    Preset name from vtk.js

  • heatmap_color_range – Range to be used when heatmap_color_mode=”custom”

  • heatmap_active – Key in heatmaps to select

  • heatmap_color_mode – full, maxSym, minSym, positive, negative, custom (default: full)


  • area_selection_change – event triggered when requested area selection change

  • hover – event triggered when moving over the map

  • enter – event triggered when entring the map area

  • exit – event triggered when exiting the map area

  • color_range_change – event triggered when color range used has changed

  • full_range_change – event triggered when full range has changed