scivianna.component package

Scivianna Component Module

The component module provides custom UI components for building interactive Scivianna dashboards using Panel.

Files

File	Description
`__init__.py`	Package initialization file
`gridstack_component.py`	GridStack layout component for resizable, draggable panels
`overlay_component.py`	Overlay component for layering UI elements over plots
`server_file_browser.py`	File browser component for server-side file navigation
`splitjs_component.py`	Split-pane component using Split.js for resizable divisions
`dist/`	Compiled JavaScript bundles for custom components

Components Overview

GridStack Component

Implements a grid-based layout system where panels can be:

Resized dynamically
Dragged to new positions
Added or removed interactively

Overlay Component

Provides a container for overlaying buttons, titles, and controls on top of visualization plots.

SplitJS Component

Creates split-pane layouts with draggable dividers for flexible horizontal or vertical divisions.

Server File Browser

Enables browsing and loading files from the server filesystem directly within the Panel application.

Submodules

scivianna.component.gridstack_component module

class scivianna.component.gridstack_component.CustomGridStack(*, close_modal, open_modal, loading, align, aspect_ratio, css_classes, design, height, height_policy, margin, max_height, max_width, min_height, min_width, sizing_mode, styles, stylesheets, tags, visible, width, width_policy, name, **kwargs)

Bases: GridStack

Custom version of the panel.layout.gridstack.GridStack to allow clearing the objects properly.

add_object(obj: Viewable, x_range: Tuple[int, int], y_range: Tuple[int, int])

Adds an object to the gridstack objects dict

Parameters:

obj (pn.viewable.Viewable) – Panel added
x_range (Tuple[int, int]) – Horizontal range used to update the number of rows and columns
y_range (Tuple[int, int]) – Vertical range used to update the number of rows and columns

clear_objects(): Clears the objects list and the object dictionnary.

name = 'CustomGridStack'

object_dict: Dict[str, pn.viewable.Viewable] = {}: Dictionnary of viewables that have to be manually added using the function add_object

print_state(): Prints the current gridstack state (viewable id to coordinates in the grid).

print_stored_items(): Prints the information of the objects stored

scivianna.component.overlay_component module

class scivianna.component.overlay_component.Overlay(*, close_modal, open_modal, loading, align, aspect_ratio, css_classes, design, height, height_policy, margin, max_height, max_width, min_height, min_width, sizing_mode, styles, stylesheets, tags, visible, width, width_policy, name, **kwargs)

Bases: ReactiveHTML

This component allow displaying buttons over a figure only when the mouse is in the area.

button = None: First button (displayed on the top right of the figure)

distance_from_left: String = '10px': Distance between the title and the left of the figure (increased when the axis are displayed)

distance_from_top: String = '10px': Distance between the button and the right of the figure (increased when the axis are displayed)

figure = None

main component

Type:: Figure

hide_buttons(*args, **kwargs): Hide all element on top of the figure

name = 'Overlay'

show_buttons(*args, **kwargs): Show all element on top of the figure if the mouse is in the frame

title = None: Figure title (displayed on the top left of the figure)

scivianna.component.server_file_browser module

class scivianna.component.server_file_browser.ServerFileBrowser(folder_path: str | Path = None, width: int = 300, *args, **kwargs)

Bases: Viewer

The ServerFileBrowser is a file explorer based on a Select widget that lets browse on the server side.

current_folder: Path: Crrently browsing folder

name = 'ServerFileBrowser'

on_value_change(event: Event)

Event triggered by a dropdown open change, it updates the content of the select if a value was selected:

If a folder is selected, the select updates its content to the folder content, and the folder path is saved;
If a file is selected, its path is saved in selected_file.

Parameters:: event (param.Event) – Change event

selected_file: String = '': Full path of currently selected file

scivianna.component.splitjs_component module

class scivianna.component.splitjs_component.SplitJSHorizontal(*, bottom, top, loading, align, aspect_ratio, css_classes, design, height, height_policy, margin, max_height, max_width, min_height, min_width, sizing_mode, styles, stylesheets, tags, visible, width, width_policy, name)

Bases: JSComponent

Javascript component that hosts two Viewables on top of one another, and separate them with a draggable horizontal line.

bottom = None

name = 'SplitJSHorizontal'

top = None

class scivianna.component.splitjs_component.SplitJSVertical(*, left, right, loading, align, aspect_ratio, css_classes, design, height, height_policy, margin, max_height, max_width, min_height, min_width, sizing_mode, styles, stylesheets, tags, visible, width, width_policy, name)