Components#

The wrappers to basic Quasar-Components can be found here.

Visualization#

Some special visualization components, like Webgui and Plots.

Components for data visualization

class ngapp.components.visualization.CameraView(

webgui: WebguiComponent,

*args,

**kwargs,

)#

Bases: Col

Camera view component

Parameters:: webgui (WebguiComponent)

class ngapp.components.visualization.Clipping(

webgui: WebguiComponent,

*args,

**kwargs,

)#

Bases: Col

Clipping component

Parameters:: webgui (WebguiComponent)

class ngapp.components.visualization.Colormap(

webgui: WebguiComponent,

*args,

**kwargs,

)#

Bases: Col

Colormap component

Parameters:: webgui (WebguiComponent)

class ngapp.components.visualization.GeometryWebgui(

id: str = '',

caption: str | None = None,

namespace: bool = True,

**kwargs,

)#

Bases: Row

Geometry webgui component

Parameters:

id (str)
caption (str | None)
namespace (bool)

class ngapp.components.visualization.PlotlyComponent(id: str = '', filename: str = '', **kwargs)#

Bases: Component

Plotly plot component

Parameters:

id (str)
filename (str)

class ngapp.components.visualization.SolutionWebgui(

id: str = '',

caption: str | None = None,

namespace: bool = True,

show_clipping: bool = True,

show_view: bool = True,

**kwargs,

)#

Bases: Row

Solution webgui component

Parameters:

id (str)
caption (str | None)
namespace (bool)
show_clipping (bool)
show_view (bool)

class ngapp.components.visualization.WebgpuComponent(width='800px', height='600px', **kwargs)#

Bases: Component

GPU-accelerated 3D canvas for interactive scientific visualization using WebGPU. This uses the webgpu Python package (CERBSim/webgpu) to render 3D scenes directly in the browser.

This component provides a high-performance rendering surface for custom 3D scenes, supporting real-time updates and user interaction. Scenes can be drawn using the webgpu Python package and updated dynamically from Python.

Key features: - Integrates with the webgpu Python ecosystem for advanced graphics. - Supports storing and restoring scenes, camera, and lighting state. - Handles mounting, unmounting, and frontend synchronization automatically. - Allows custom event handling for mouse and interaction events.

Usage:: webgpu = WebgpuComponent() webgpu.draw(scene)

draw(scene, camera=None, light=None)#

Render a 3D scene on the webgpu canvas. Go to the webgpu documentation for more details on how to create scenes.

Args:: scene: A webgpu.scene.Scene, BaseRenderer, or list of renderers. camera: Optional camera settings. light: Optional lighting settings.
Returns:: The active scene object.

screenshot()#

Capture the current canvas as a GPU texture (raw image data).

Returns:: The image data as a numpy array or backend-specific object.

screenshot_as_data_url(format='image/png')#

Get a screenshot of the canvas as a data URL (e.g., for embedding in HTML).

Args:: format: Image format, e.g., “image/png”.
Returns:: Data URL string containing the image.

class ngapp.components.visualization.WebguiComponent(

id: str = '',

caption: str | None = None,

webgui_data: dict[str, Any] | None = None,

**kwargs,

)#

Bases: Component

Webgui component

Parameters:

id (str)
caption (str | None)
webgui_data (dict[str, Any] | None)

static canvas_button(

ui_icon: str = '',

ui_label: str = '',

ui_tooltip: str = '',

on_click: Callable[[Any], None] | None = None,

**kwargs,

) → QBtn#

Create a canvas button

Parameters:

ui_icon (str) – Icon name
ui_label (str) – Button label
ui_tooltip (str) – Tooltip text
on_click (Callable[[Any], None] | None) – Callback function
kwargs – Additional arguments for QBtn

Return type:

QBtn

clear()#: Clear webgui canvas

create_screenshot(width: int = 1042, height: int = 852) → None#

Create a screenshot of the webgui. The image is stored in the storage as a base64 encoded string.

Parameters:

width (int) – (int) Width of the screenshot. Defaults to 1042.
height (int) – (int) Height of the screenshot. Defaults to 852.
depends_on – (list[str] | None) List of job IDs that this job depends on.

Return type:

None

draw(

*args,

data: dict | None = None,

redraw=False,

**kwargs,

) → dict#

draw object (arguments compatible with netgen.webgui.Draw)

Parameters:: data (dict | None)
Return type:: dict

on_draw(callback: Callable) → None#

Set callback for draw event

Parameters:: callback (Callable)
Return type:: None

property screenshot#: Get the webgui screenshot

set_camera(data: dict = {}) → None#

Set camera

Parameters:: data (dict)
Return type:: None

set_clipping_plane(data: dict) → None#

Set clipping plane

Parameters:: data (dict)
Return type:: None

set_color( *, faces: dict[int, list[float]] | list[float] | None = None, edges: dict[int, list[float]] | list[list[float]] | None = None, ) → None#

Set color of faces and edges

Parameters:

faces (dict[int, list[float]] | list[float] | None)
edges (dict[int, list[float]] | list[list[float]] | None)

Return type:

None

set_colormap(data: dict = {}) → None#

Set colormap

Parameters:: data (dict)
Return type:: None

property slot_buttons: list[Component]#: Get custom components to webgui buttons

property slot_canvas: list[Component]#: Get custom components to webgui canvas

toggle_fullscreen() → None#

Toggle fullscreen

Return type:: None

toggle_mesh() → None#

Toggle mesh

Return type:: None

update_camera_settings()#

Update camera settings

Parameters:: callback – Callback function to call after settings are updated

property webgui_data: dict[str, Any]#: get webgui data (either from file, input or dynamic data)

ngapp.components.visualization.generate_webgui_html(data, filename)#: Generates an html file with the given webgui data.

Materials#

Some convenience components for material definitions.

Material model and parameter

class ngapp.components.material.Constants#

Bases: object

Physical constants

class ngapp.components.material.QuantityInput(

ui_units: list[str] | str,

ui_value: str | None = None,

ui_label: str = '',

**kwargs,

)#

Bases: NumberInput

A float parameter with a unit

Parameters:

ui_units (list[str])
ui_value (str | None)
ui_label (str)

m_as(unit: str) → float | None#

Converts the magnitute (float) in the given unit

Parameters:: unit (str)
Return type:: float | None

property quantity: Quantity | None#: The value of the parameter as quantity

to(unit: str) → Quantity | None#

Converts the value to the given unit

Parameters:: unit (str)
Return type:: Quantity | None

property ui_label#: A text label that will “float” up above the input field, once the field gets focus

property unit#: The unit of the parameter

Components#

These components are convinence wrapper to QComponents or basic HTML objects. You can use these or the base QComponents. You can also use them as templates on how to customize QComponents to your liking.

class ngapp.components.helper_components.Centered(*children: Component | str, **kwargs)#

Bases: Component

Create a div with centered content

Parameters:: children (Component | str)

class ngapp.components.helper_components.Col(

*children: Component | str,

weights: list[int] | list[str] | None = None,

**kwargs,

)#

Bases: Component

A container component that creates a vertical layout.

For more details on Quasar’s column grid system, see: https://quasar.dev/layout/grid/column

Args:

*children: Variable number of child components or strings to be arranged in the column. weights: Optional list of integers or strings specifying row weights/classes. **kwargs: Additional keyword arguments passed to the parent Component.

Raises:

ValueError: If the length of weights doesn’t match the number of children.

Examples:

# Equal height rows (each takes available space) Col(Div(“Row 1”), Div(“Row 2”))

# Specific row heights with weights Col(Div(“Small”), Div(“Large”), weights=[3, 9])

Parameters:

children (Component | str)
weights (list[int] | list[str] | None)

class ngapp.components.helper_components.CopySimulationButton(

app,

ui_tooltip='Copy',

ui_icon='mdi-content-copy',

ui_flat=True,

*args,

**kwargs,

)#

Bases: QBtn

Helper class to copy a simulation

class ngapp.components.helper_components.FileName(

app=None,

ui_label='Filename',

ui_borderless=True,

compute_filename: Callable | None = None,

**kwargs,

)#

Bases: QInput

Helper to set simulation file name based on input. No input will set name to ‘Untitled’.

Args:: app: The app instance ui_label: The label for the input ui_borderless: Use ‘borderless’ design for the input

Parameters:: compute_filename (Callable | None)

class ngapp.components.helper_components.JobComponent(id: str, compute_function: Callable, *args, **kwargs)#

Bases: QBtn

A button to start and stop a job and monitor its status.

Parameters:

id (str) – Compoent id
compute_function (Callable) – Function that is called with compute_node

on_start(handler: Callable)#

Set the function to be called when the job is started.

Parameters:: handler (Callable)

on_stop(handler: Callable)#

Set the function to be called when the job is stopped.

Parameters:: handler (Callable)

class ngapp.components.helper_components.LoadDialog(app, *args, **kwargs)#

Bases: QDialog

A dialog to load simulations from the server

class ngapp.components.helper_components.LoadSimulationButton(

app,

ui_tooltip='Load',

ui_icon='mdi-folder-open',

ui_flat=True,

*args,

**kwargs,

)#

Bases: QBtn

Helper class to run a simulation

class ngapp.components.helper_components.NewSimulationButton(

ui_tooltip='New',

ui_icon='mdi-file-plus',

ui_flat=True,

*args,

**kwargs,

)#

Bases: QBtn

Helper class to create a new simulation

class ngapp.components.helper_components.NumberInput(*children, ui_class=['q-mx-xs'], ui_step='any', **kwargs)#

Bases: QInput

Thin wrapper for QInput with type=’number’ and model_value returning float

class ngapp.components.helper_components.Report(

app,

id,

ui_tooltip='Report',

ui_icon='mdi-file-document',

ui_flat=True,

ui_disable=True,

*args,

**kwargs,

)#

Bases: QBtn

A button that generates a pdf report from a specified format (docx, md)

create_report( filename, file_type: Literal['md', 'docx'], template_path: str, )#

Create a report in the specified format.

Args:: filename (str): The name of the report file. file_type (Literal[“md”, “docx”]): The format of the report file. template_path (str): The path to the template file. Needs to be in assets folder.
Raises:: ValueError: If the file type is not supported.

Parameters:

file_type (Literal['md', 'docx'])
template_path (str)

class ngapp.components.helper_components.Row(

*children: Component | str,

weights: list[int] | list[str] | None = None,

**kwargs,

)#

Bases: Component

A container component that arranges its children in a horizontal row layout.

For more details on Quasar’s row grid system, see: https://quasar.dev/layout/grid/row

Args:
*children: Variable number of child components or strings to be arranged in the row. weights: Optional list of integers or strings specifying column weights/classes. **kwargs: Additional keyword arguments passed to the parent Component.

Raises:
ValueError: If the length of weights doesn’t match the number of children.

Example:
Row(Div(“Column 1”), Div(“Column 2”), weights=[6, 6]) # Equal columns Row(“Auto width”, “Flexible”, weights=[“col-md-8”, “col-md-4”])

Parameters:

children (Component | str)
weights (list[int] | list[str] | None)

class ngapp.components.helper_components.RunSimulationButton(

run_function: Callable,

ui_tooltip='Run',

ui_icon='mdi-play',

ui_flat=True,

*args,

**kwargs,

)#

Bases: QBtn

Helper class to run a simulation

Parameters:: run_function (Callable)

class ngapp.components.helper_components.SaveSimulationButton(

app,

ui_tooltip='Save',

ui_icon='mdi-content-save',

ui_flat=True,

*args,

**kwargs,

)#

Bases: QBtn

Helper class to save a simulation

class ngapp.components.helper_components.SimulationTable(dialog=None)#

Bases: QTable

A table to display simulations from the server, if no dialog is given, the rows must be set manually

class ngapp.components.helper_components.Table(

ui_title='',

ui_rows=[],

ui_header=None,

ui_align=None,

ui_hide_bottom=True,

ui_pagination={'rowsPerPage': 0},

ui_hide_pagination=True,

ui_style='min-width:400px;margin-bottom:50px;',

**kwargs,

)#

Bases: QTable

Wrapper class around QTable that allows to pass a list of lists as rows and disables pagination by default

get_markdown()#: Get the table as markdown

property ui_rows#: Rows of data to display

class ngapp.components.helper_components.ToolBar(

app,

ui_class='bg-grey-5 text-white',

logo: str | None = None,

app_name: str | None = None,

filename: FileName | None = None,

buttons: list[Component] = [],

*args,

**kwargs,

)#

Bases: QToolbar

A toolbar with a logo, app name, filename input, new, load, save and run buttons

Parameters:

logo (str | None)
app_name (str | None)
filename (FileName | None)
buttons (list[Component])

Base Component#

The base component that handles synchronization between Python and Javascript.

class ngapp.components.basecomponent.AppStatus( capture_events: bool = False, capture_call_stack: bool = False, app_id: int | None = None, file_id: int | None = None, app: object = None, components_by_id: dict[str, object] = <factory>, )#

Bases: object

Parameters:

capture_events (bool)
capture_call_stack (bool)
app_id (int | None)
file_id (int | None)
app (object)
components_by_id (dict[str, object])

Bases: object

Base component class, the component name is passed as argument

Parameters:

component (str)
ui_children (T | str)
ui_slots (dict[str, list] | None)
namespace (bool)
ui_style (str | dict | None)
ui_class (str | list[str] | None)
id (str)

add_keybinding(key: str, callback: Callable)#

Add key binding to component

Parameters:

key (str)
callback (Callable)

call_js(func: Callable, *args, **kwargs)#

This method ensures safe JavaScript execution by automatically deferring the function call until the JavaScript environment is ready. If JavaScript is already available, the function executes immediately.

Args:

func (callable): A Python function *args: Positional arguments to pass to the function when called. **kwargs: Keyword arguments to pass to the function when called.

Note:

Safe to call in app __init__ method (when .js is not yet available)

Example: ``` def my_method(js)

return js.console.log(“Hi from JS when app is initialized”)

self.call_js(my_method) ```

Parameters:: func (Callable)

create_event_handler( function, prevent_default: bool = True, stop_propagation: bool = False, stop_immediate_propagation: bool = False, return_value: object | None = None, )#

Create an event handler for the component.

Args:: function (Callable): The function to call when the event is triggered. prevent_default (bool): Whether to prevent the default action of the event. stop_propagation (bool): Whether to stop the propagation of the event. stop_immediate_propagation (bool): Whether to stop immediate propagation of the event. return_value (object, optional): The value to return from the event handler.

Parameters:

prevent_default (bool)
stop_propagation (bool)
stop_immediate_propagation (bool)
return_value (object | None)

dump()#: Override this method for components with a state. Dumps component state for storage on backend. Only data types which can be converted to json are allowed

property js#

Direct access to the JavaScript environment for immediate execution.

This property provides direct access to the JavaScript runtime environment, allowing you to run any JavaScript function or access any JavaScript object immediately.

Note:

Cannot be used in __init__ methods - use call_js() instead for deferred execution
Only available after the JavaScript environment is fully loaded

Example:

self.js.console.log(“Hello from Python!”)

load(data)#: Override this method for components with a state. Loads component data from backend (data argument is the return value of dump)

on( events: str | list, func: Callable[[Event], None] | Callable[[], None], arg: object = None, clear_existing: bool = False, )#

Add event listener

Parameters:

events (str | list)
func (Callable[[Event], None] | Callable[[], None])
arg (object)
clear_existing (bool)

property quasar#

Access to the Quasar framework’s $q object and utilities.

Provides access to all Quasar framework functionality through a Python interface. The returned proxy object allows calling any method available on Quasar’s $q object as documented at: https://quasar.dev/options/the-q-object

Note:

Cannot be used in __init__ methods

Example:

# Show a notification self.quasar.notify({

‘message’: ‘Operation completed successfully!’, ‘color’: ‘positive’,

})

property ui_hidden#: Set display to none. Compare with below - the class hidden means the element will not show and will not take up space in the layout.

property ui_invisible#: Set visibility to hidden. Compare with above - the class invisible means the element will not show, but it will still take up space in the layout.

class ngapp.components.basecomponent.Event( name: str, component: 'Component', arg: object | None = None, value: object | None = None, )#

Bases: object

Parameters:

name (str)
component (Component)
arg (object | None)
value (object | None)

class ngapp.components.basecomponent.Storage(component: T)#

Bases: object

Storage class for components, use it to store large chunks of data on the backend

Parameters:: component (T)

delete(key: str)#

Delete data from storage

Parameters:: key (str)

get(key: str)#

Get data from storage

Parameters:: key (str)

set( key: str, value: str | dict | list | bytes | object, use_pickle=False, )#

Set data in storage

Parameters:

key (str)
value (str | dict | list | bytes | object)

Components#

Visualization#

Materials#

Components#

Base Component#

This Page