HeliosUI

class

Back to Helios Web API

Kind

class

Source

src/ui/HeliosUI.js:341

Description

Optional built-in control surface for a Helios visualization.

Signature

export class HeliosUI {

Parameters

Name	Type	Attributes	Default	Description
options	Object	optional		UI construction options.
|helios	Helios	optional		Helios instance to inspect and control.
|container	HTMLElement	optional		Existing UI container. When omitted the UI creates or reuses a layer on the Helios root.
|layerName	string	optional	'ui'	Layer name used when the UI attaches to the Helios layer manager.
|theme	'dark'|'light'	optional		Initial UI theme.
|styles	'default'|string	optional	'default'	Built-in style preset or external style mode.
|document	Document	optional		Document used for custom elements and style installation.
|allowDrag	boolean	optional	true	Enable dragging floating panels.
|labelColumn	number|string	optional		Optional fixed label-column sizing for generated controls.
|persistenceIndicators	boolean	optional		Show dirty/default markers when persistent storage supports them.
|interface	Object	optional		Interface behavior options passed to helios.useBehavior('interface', ...).
|behaviors	Object	optional		Behavior option bag used by built-in UI behaviors.

User Interface

registerStateControl(path, options = {}) → {Function|null}

Source: src/ui/HeliosUI.js:482

Register a UI-owned value with the Helios state manager.

Parameters

Name	Type	Attributes	Default	Description
path	string			Persistent state path.
options	Object	optional		State metadata and UI-control hints.

Returns

Cleanup function returned by the state manager, or null when state tracking is unavailable.

Type Function|null

writeStateControl(path, value, options = {}) → {*|null}

Source: src/ui/HeliosUI.js:525

Write a UI control value through the Helios state manager.

Parameters

Name	Type	Attributes	Default	Description
path	string			Persistent state path.
value	*			Value to store.
options	Object	optional		Persistence, debounce, source, and override-tracking options.

Returns

State-manager write result, or null when state tracking is unavailable.

Type *|null

createStateIndicator(path = '', scope = null, options = {}) → {HTMLElement|null}

Source: src/ui/HeliosUI.js:563

Create a dirty/default indicator for a state path or state scope.

Parameters

Name	Type	Attributes	Default	Description
path	string	optional	''	State path to observe.
scope	string|null	optional	null	Indicator scope override.
options	Object	optional		Registration and tooltip options.

Returns

Indicator element, or null when indicators are disabled.

Type HTMLElement|null

setTheme(theme, options = {}) → {void}

Source: src/ui/HeliosUI.js:621

Apply a UI theme.

Parameters

Name	Type	Attributes	Default	Description
theme	'dark'|'light'|string			Theme name stored on the UI container.
options	Object	optional	{}	Options object for this operation.

Returns

Type void

toggleTheme(options = {}) → {void}

Source: src/ui/HeliosUI.js:635

Toggle between the built-in dark and light themes.

Parameters

Name	Type	Attributes	Default	Description
options	Object	optional	{}	Options object for this operation.

Returns

Type void

Example

helios.toggleTheme({
  enabled: true,
});

serializeState() → {Object}

Source: src/ui/HeliosUI.js:650

Serialize UI panel, dock, theme, and responsive-interface state.

Returns

Serializable UI state snapshot.

Type Object

restoreState(state = {}) → {HeliosUI}

Source: src/ui/HeliosUI.js:669

Restore a UI state snapshot.

Parameters

Name	Type	Attributes	Default	Description
state	Object	optional	{}	Snapshot returned by serializeState().

Returns

This UI instance.

Type HeliosUI

getViewportWidth() → {number}

Source: src/ui/HeliosUI.js:687

Resolve the best available viewport width for responsive UI behavior.

Returns

Width in CSS pixels, or zero when unavailable.

Type number

Example

const value = helios.getViewportWidth();

applyInterfaceBehaviorState(state = {}) → {HeliosUI}

Source: src/ui/HeliosUI.js:711

Apply responsive interface state to the UI container and panel manager.

Parameters

Name	Type	Attributes	Default	Description
state	Object	optional	{}	Interface behavior snapshot.

Returns

This UI instance.

Type HeliosUI

bindHeliosAccessor(accessorName, options = {}) → {UIAttribute}

Source: src/ui/HeliosUI.js:1350

Bind a Helios accessor method to a UIAttribute.

Parameters

Name	Type	Attributes	Default	Description
accessorName	string			Name of the Helios getter/setter method.
options	Object	optional		Attribute metadata, range, persistence, and labeling options.

Returns

Attribute wrapper suitable for controls and panels.

Type UIAttribute

bindBehaviorAccessor(behavior, accessorName, options = {}) → {UIAttribute}

Source: src/ui/HeliosUI.js:1419

Bind a behavior accessor method to a UIAttribute.

Parameters

Name	Type	Attributes	Default	Description
behavior	Behavior			Behavior instance that owns the accessor.
accessorName	string			Name of the behavior getter/setter method.
options	Object	optional		Attribute metadata, range, persistence, and labeling options.

Returns

Attribute wrapper suitable for controls and panels.

Type UIAttribute

createPanel(options) → {Panel}

Source: src/ui/HeliosUI.js:1542

Create a standard Helios UI panel.

Parameters

Name	Type	Attributes	Default	Description
options	Object			Panel id, title, placement, content, schema, and persistence options.

Returns

Panel instance returned by the panel manager.

Type Panel

Example

helios.createPanel({
  enabled: true,
});

createTabbedPanel(options = {}) → {Panel}

Source: src/ui/HeliosUI.js:1579

Create a panel whose content is managed by a tabbed panel primitive.

Parameters

Name	Type	Attributes	Default	Description
options	Object	optional		Panel and tab options.

Returns

Created panel instance.

Type Panel

Example

helios.createTabbedPanel({
  enabled: true,
});

createDemoPanel(options = {}) → {Panel}

Source: src/ui/HeliosUI.js:1607

Create the default scene/demo controls panel.

Parameters

Name	Type	Attributes	Default	Description
options	Object	optional		Panel placement and title options.

Returns

Created panel instance.

Type Panel

Example

helios.createDemoPanel({
  enabled: true,
});

createFilterPanel(options = {}) → {Panel}

Source: src/ui/HeliosUI.js:4352

Create the graph filtering panel with node and edge rule editors.

Parameters

Name	Type	Attributes	Default	Description
options	Object	optional		Panel placement, throttling, width, and initial filter options.

Returns

Created panel instance.

Type Panel

Example

helios.createFilterPanel({
  enabled: true,
});

createMetricsPanel(options = {}) → {Panel}

Source: src/ui/HeliosUI.js:4616

Create a metrics panel for basic graph and renderer counters.

Parameters

Name	Type	Attributes	Default	Description
options	Object	optional		Panel placement and collapsed-state options.

Returns

Created panel instance.

Type Panel

Example

helios.createMetricsPanel({
  enabled: true,
});

createDebugPanel(options = {}) → {Panel}

Source: src/ui/HeliosUI.js:7104

Create a debug panel for persistence and state-manager counters.

Parameters

Name	Type	Attributes	Default	Description
options	Object	optional		Panel placement and refresh-window options.

Returns

Created panel instance.

Type Panel

Example

helios.createDebugPanel({
  enabled: true,
});

destroy() → {void}

Source: src/ui/HeliosUI.js:7181

Dispose all UI controls, panels, listeners, timers, and container resources.

Returns

Type void

createMappersPanel(options = {}) → {Panel}

Source: src/ui/HeliosUI.js:7206

Create the visual mapper configuration panel.

Parameters

Name	Type	Attributes	Default	Description
options	Object	optional		Panel placement and mapper panel options.

Returns

Created panel instance.

Type Panel

Example

helios.createMappersPanel({
  enabled: true,
});

createLayoutPanel(options = {}) → {Panel}

Source: src/ui/HeliosUI.js:9223

Create the layout controls panel.

Parameters

Name	Type	Attributes	Default	Description
options	Object	optional		Panel placement and layout panel options.

Returns

Created panel instance.

Type Panel

Example

helios.createLayoutPanel({
  enabled: true,
});

createLegendsPanel(options = {}) → {Panel}

Source: src/ui/HeliosUI.js:9235

Create the legends controls panel.

Parameters

Name	Type	Attributes	Default	Description
options	Object	optional		Panel placement and legend panel options.

Returns

Created panel instance.

Type Panel

Example

helios.createLegendsPanel({
  enabled: true,
});

createCameraPanel(options = {}) → {Panel}

Source: src/ui/HeliosUI.js:9247

Create the camera controls panel.

Parameters

Name	Type	Attributes	Default	Description
options	Object	optional		Panel placement and camera panel options.

Returns

Created panel instance.

Type Panel

Example

helios.createCameraPanel({
  enabled: true,
});

createSelectionPanel(options = {}) → {Panel}

Source: src/ui/HeliosUI.js:9259

Create the selection and hover controls panel.

Parameters

Name	Type	Attributes	Default	Description
options	Object	optional		Panel placement and selection panel options.

Returns

Created panel instance.

Type Panel

Example

helios.createSelectionPanel({
  enabled: true,
});

Example

const ui = new HeliosUI({ helios, theme: 'dark' });