MeshBoards

MeshBoards are customizable dashboards in OctoMesh Refinery Studio that allow you to visualize data from your OctoMesh entities using various widget types. They provide a flexible, grid-based layout for creating monitoring dashboards, KPI displays, and data visualizations.

Accessing MeshBoards

Navigate to UI > MeshBoards to access your dashboards.

MeshBoard Toolbar

The MeshBoard toolbar provides these actions:

Button	Description
Manage MeshBoards	Open the MeshBoard management dialog
MeshBoard Settings	Configure the current MeshBoard
Refresh All Widgets	Refresh data in all widgets
Enter/Cancel Edit Mode	Toggle editing mode
ADD WIDGET	Add a new widget to the board
SAVE	Save changes (in edit mode)

Managing MeshBoards

Click Manage MeshBoards to open the management dialog:

From here you can:

• IMPORT: Import a MeshBoard from a file
• NEW MESHBOARD: Create a new MeshBoard
• View and manage existing MeshBoards

MeshBoard Settings

Configure your MeshBoard by clicking MeshBoard Settings:

Basic Settings

Setting	Description
Name	Display name for the MeshBoard
Description	Optional description
Well-Known Name	Unique identifier for routing (e.g., 'cockpit', 'sales-dashboard')

Layout Settings

Setting	Range	Description
Columns	1-12	Number of columns in the grid
Row Height	100-1000	Height of each row in pixels
Gap	0-100	Space between widgets in pixels

Variables

Variables allow you to create dynamic, parameterized dashboards:

1. Click ADD VARIABLE to create a new variable
2. Define the variable name and default value
3. Reference variables in widget filters as $variableName

Example use cases:

• Filter all widgets by a selected time period
• Show data for a specific entity selected by the user
• Dynamic thresholds for KPI widgets

Time Filter

Enable the TIME FILTER option to:

• Show a time range picker in the toolbar
• Automatically set $timeRangeFrom and $timeRangeTo variables
• Filter time-series data across all widgets

Adding Widgets

Click ADD WIDGET to open the widget selection dialog:

Available Widget Types

Data Display Widgets

Widget	Description
Entity Card	Display a single entity with its attributes in a card layout
KPI	Display a single key performance indicator or metric
Entity with Associations	Display an entity with its associated relationships
Table	Display multiple entities in a table with sorting and filtering
Stats Grid	Display multiple KPIs in a grid layout

Visualization Widgets

Widget	Description
Gauge	Visualize a numeric value as a gauge (arc, circular, linear, or radial)
Pie Chart	Display data distribution as a pie or donut chart
Bar Chart	Display data as vertical or horizontal bars

Status Widgets

Widget	Description
Status Indicator	Display a boolean status with visual indicator
Service Health	Display service health status with pulse animation

Integration Widgets

Widget	Description
Process Diagram	Embed a Process Diagram in the dashboard

Configuring Widgets

After adding a widget, you'll see it in edit mode:

Each widget has these actions:

• Configure data source (required): Set up the data binding
• Edit position: Adjust widget size and position in the grid
• Delete widget: Remove the widget from the board

Data Source Configuration

Most widgets require a data source configuration:

1. CK Type: Select the Construction Kit type to query
2. Filters: Define filters to narrow down the data
3. Attribute Mapping: Map entity attributes to widget properties

Position and Size

Widgets are arranged on a grid. In edit mode, you can:

• Drag widgets to reposition them
• Resize widgets by dragging their edges
• Widgets snap to the grid columns

Widget Details

KPI Widget

Displays a single numeric value with optional:

• Title and subtitle
• Unit display
• Trend indicator
• Color thresholds

Gauge Widget

Visualizes numeric values with multiple styles:

• Arc: Semi-circular gauge
• Circular: Full circle gauge
• Linear: Horizontal or vertical bar
• Radial: Radial progress indicator

Configure:

• Min/max values
• Color ranges
• Pointer style
• Scale labels

Table Widget

Displays multiple entities in a tabular format:

• Configurable columns
• Sorting and filtering
• Pagination
• Row selection

Entity Card Widget

Shows a single entity with:

• Title from entity attribute
• Configurable attribute display
• Card styling options

Chart Widgets

Pie Chart:

• Data segmentation
• Legend display
• Donut option

Bar Chart:

• Vertical or horizontal orientation
• Multiple series support
• Axis configuration

Status Widgets

Status Indicator:

• Boolean value display
• Custom colors for states
• Icon selection

Service Health:

• Health status visualization
• Pulse animation for active services
• Connection status display

Edit Mode

Enter edit mode to modify your MeshBoard:

1. Click Enter Edit Mode
2. Add, configure, or remove widgets
3. Drag widgets to reposition
4. Resize widgets as needed
5. Click SAVE to save changes
6. Click Cancel Edit Mode to discard changes

Well-Known Names

Well-known names allow you to create MeshBoards that can be accessed via specific routes:

Well-Known Name	Usage
cockpit	Default dashboard shown on the Cockpit page
Custom names	Accessible via /ui/meshboards/{well-known-name}

To set up a cockpit dashboard:

1. Create a MeshBoard
2. Open MeshBoard Settings
3. Set Well-Known Name to cockpit
4. Save the MeshBoard

Best Practices

1. Plan your layout: Sketch your dashboard layout before building
2. Use consistent sizing: Keep similar widgets at the same size
3. Group related data: Place related widgets near each other
4. Set appropriate refresh intervals: Balance data freshness with performance
5. Use variables: Create reusable, parameterized dashboards
6. Test with real data: Verify widgets work correctly with actual data
7. Document your dashboards: Add descriptions to help users understand the purpose

Keyboard Shortcuts

Shortcut	Action
Escape	Exit edit mode (prompts to save)

Import/Export

MeshBoards can be:

• Exported: Download as JSON for backup or sharing
• Imported: Load from a JSON file

This enables:

• Sharing dashboards between tenants
• Version control of dashboard configurations
• Backup and restore functionality