Skip to main content

Refinery Studio

The OctoMesh Refinery Studio is the web-based interface for visualizing and interacting with your OctoMesh data. The sidebar in Refinery Studio is organized into the following sections.

UI​

Visual design tools for building dashboards and process visualizations. Requires the AdminPanelManagement role.

MeshBoards​

Create customizable dashboards with various widget types:

  • Build grid-based layouts with configurable columns and row heights
  • Choose from multiple Widget Types: KPI, Gauge, Chart, Table, and more
  • Define Variables for dynamic, parameterized dashboards
  • Enable Time Filters for time-series data analysis
  • Use Well-Known Names for routing (e.g., 'cockpit' for the home dashboard)

Process Diagrams​

Build complete process visualizations by combining symbols and primitives:

  • Drag symbols from your libraries onto the canvas
  • Add primitive shapes for custom graphics
  • Create Connections between elements to show flow
  • Configure symbol instance properties
  • Connect to live OctoMesh data for real-time updates

Symbol Designer​

Create reusable graphical symbols for your process diagrams and dashboards:

  • Design symbols using primitive shapes (rectangles, ellipses, lines, paths, text)
  • Define Transform Properties that control symbol appearance based on input values
  • Create dynamic visualizations with Bindings that connect properties to element attributes
  • Test your symbols with the Simulation panel
  • Organize symbols in Symbol Libraries

Repository​

Data management tools for querying and browsing your OctoMesh data. Requires the AdminPanelManagement role.

Query Builder​

Create and manage reusable queries for your OctoMesh data:

  • Build queries visually without writing GraphQL
  • Choose from Query Types: Simple Query, Aggregation, Grouped Aggregation
  • Select CK Types and configure columns to include
  • Add Filters with various operators (Equals, Like, In, RegEx, etc.)
  • Use Aggregation Functions: COUNT, MIN, MAX, AVG, SUM
  • Save queries for reuse in dashboards and reports

Identity​

User and access management for your tenant. Requires the UserManagement role.

Identity Management​

Manage users, roles, groups, and authentication:

  • Create and manage Users with role and group assignments
  • Define Roles for permission control
  • Organize permissions with Groups and nested group hierarchies
  • Configure OAuth Clients for applications
  • Set up Identity Providers for external authentication (Google, Azure AD, LDAP, etc.)
  • Automate group assignment with Email Domain Group Rules

General​

System configuration for OctoMesh services. Requires the AdminPanelManagement role.

Configurations​

Manage system settings for OctoMesh services:

  • Configure Tenant Settings for version tracking and migrations
  • Set Tenant Mode for environment and maintenance control
  • Define E-Mail Sender configurations for SMTP connectivity
  • Configure SAP Connections for enterprise integration

Workflow Overview​

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│ Symbol Designer │ ──► │ Symbol Libraries │ ──► │ Process Diagrams│
└─────────────────┘     └──────────────────┘     └────────┬────────┘
   Create symbols         Organize & share                │
                                                          ▼
┌─────────────────┐                              ┌─────────────────┐
│  Query Builder  │ ─────────────────────────────│   MeshBoards    │
└─────────────────┘                              └─────────────────┘
   Create queries           Data sources           Build dashboards
  1. Create Symbols: Use the Symbol Designer to create reusable graphical components
  2. Organize in Libraries: Save symbols to libraries for easy access and sharing
  3. Build Diagrams: Combine symbols in Process Diagrams to create complete visualizations
  4. Create Queries: Use Query Builder to define reusable data queries
  5. Create Dashboards: Use MeshBoards to build monitoring dashboards with widgets
  6. Connect to Data: Bind symbol properties and widgets to OctoMesh runtime data for live updates

Key Concepts​

Primitives​

Basic SVG shapes that form the building blocks of symbols:

  • Rectangle, Ellipse, Polygon
  • Line, Polyline, Path
  • Text, Image

Symbols​

Reusable compositions of primitives with:

  • Transform Properties: Exposed parameters that control appearance
  • Bindings: Mappings from properties to element attributes
  • Animations: Dynamic visual effects

Transform Properties​

Parameters exposed by symbols that can be controlled at runtime:

  • Number: Numeric values (e.g., 0-100 for a level)
  • Color: Color values
  • Boolean: On/off states
  • String: Text values

Bindings​

Connect transform properties to element effects:

  • Fill Level (for tank visualizations)
  • Rotation (for gauges)
  • Color changes (for status indication)
  • Visibility (show/hide elements)
  • And many more...

Expressions​

Mathematical formulas that transform property values:

value           // Pass through
value * 3.6     // Scale (0-100 to 0-360)
lerp(value, 0, 100, 0, 360)  // Linear interpolation
lerpColor(value, 0, 100, "#00ff00", "#ff0000")  // Color gradient