trame

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

Bases: AbstractElement

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

Parameters:

  • 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

Parameters:

  • 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

Parameters:

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.

Parameters:

  • 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

Parameters:

  • handle_color –

  • handle_position –

  • handle_size –

  • location –

Vuetify VCard attributes

Parameters:

  • 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)

Parameters:

  • sources – All of the elements of the tree

  • actives – Any active elements of the tree

Vuetify styling attributes

Parameters:

  • 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 –

Events

Parameters:

  • 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.

Parameters:

  • 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.ListBrowser(children=None, **kwargs)

Bases: AbstractElement

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

Parameters:

  • 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.

Parameters:

**kwargs –

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.

Parameters:

_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.

Parameters:

  • 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

Events:

Parameters:

  • 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

Parameters:

  • 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)

Events:

Parameters:

  • 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