Skip to content

Panels

Panels are the core visualization components in Zelos. They display your data in various formats, from time-series plots to tables, logs, and single values. Each panel type is optimized for specific use cases.

Panel Types

Type Purpose
Plot Time-series data
Table Current values
Log Text log events
Value Single metric
Action System control

Panel Management

Adding Panels

Create new panels to visualize your data:

  1. Click "+ Add Panel" button at the bottom of the workspace
  2. Select the desired panel type
  3. Panel appears in the workspace

Panel Layout

Panels automatically arrange themselves in a responsive grid system.

Grid Features

  • Automatic arrangement - Panels position themselves optimally
  • Drag to reorder - Click and drag panel headers
  • Resize panels - Drag edges or corners
  • Maximize - Double-click header to expand

Panel Controls

Each panel includes standard controls in its header:

Control Function Action
Title Bar Panel identifier and move handle Drag to move
Settings Configure panel Click gear icon
Menu Additional options Click ⋮ for menu
Close Remove panel Click × to delete

In addition, panels contain settings that are unique to the panel type. For example:

Panel Area

Log panel settings.

Adding Data to Panels

Multiple ways to populate panels with signals:

Drag and Drop

The primary method for adding signals:

  1. Locate signal in the sidebar tree
  2. Drag signal to target panel or empty space
  3. Release to add

Double-Click

  • Double-click any signal in the tree
  • Automatically creates appropriate panel type

Dragging

You can drag at any layer of the tree. Dragging an event adds all its fields, dragging a source adds all events and fields.

Panel Export Feature

Export panel data for external analysis or sharing.

Export Methods

Access export from any panel:

  1. Click the ⋮ menu in panel header
  2. Select "Export Data"
  3. Choose format
  4. File downloads automatically

Export Menu

Export option in panel menu.

Export Formats

CSV Format

Best for spreadsheet analysis:

timestamp,source/event.field1,source/event.field2
1746210309.190321,24.5,1200
1746210309.190324,24.6,1201
1746210309.191392,24.7,1202

Features: - First row contains headers (timestamp + signal names) - Timestamps in Unix format (seconds since epoch) - Empty cells for missing data points - Compatible with Excel, Google Sheets, pandas

Empty Cells

Empty cells indicate no data was recorded for that signal at that timestamp.

JSON Format

Best for programmatic processing:

{
  "metadata": {
    "panel": {
      "id": "panel-uuid",
      "title": "Panel Name",
      "type": "PLOT"
    },
    "timeRange": {
      "start": "2024-01-15T10:30:00.000Z",
      "end": "2024-01-15T10:35:00.000Z"
    },
    "signals": ["signal1", "signal2"],
    "exportedAt": "2024-01-15T10:36:00.000Z"
  },
  "data": {
    "timestamps": [1746210309.190321],
    "values": {
      "signal1": [24.5],
      "signal2": [1200]
    }
  }
}

Features: - Complete metadata (panel info, time range, signals) - Preserves data types and structure - Easy to parse programmatically - Includes export timestamp

Text Format (Logs Only)

For log panels:

2024-01-15T10:30:00.123Z [INFO] system: Application started
2024-01-15T10:30:01.456Z [WARN] sensor: Temperature above threshold
2024-01-15T10:30:02.789Z [ERROR] motor: Communication timeout

What Gets Exported

  • Time Range - Current timeline selection
  • Signals - All visible signals in the panel
  • Filtering - Applied filters are respected
  • Precision - Full precision values (no rounding)

File Naming

Files are automatically named with the pattern: 

zelos_[panel-title]_[start-time]_to_[end-time].[format]

Working with Exported Data

Python Example

CSV Processing: 

import pandas as pd

# Load exported CSV
df = pd.read_csv('panel_export.csv')

# Display basic information
print(f"Time range: {df['timestamp'].min()} to {df['timestamp'].max()}")
print(f"Number of data points: {len(df)}")

# Basic analysis
temp_column = 'vcan0/vehicle_status.temperature'
print(f"Average temperature: {df[temp_column].mean():.2f}°C")

# Find when temperature exceeded a threshold
high_temps = df[df[temp_column] > 25.0]
if not high_temps.empty:
    print(f"Temperature exceeded 25°C at {len(high_temps)} timestamps")

JSON Processing: 

import json
import pandas as pd

# Load exported JSON
with open('panel_export.json', 'r') as f:
    data = json.load(f)

# Extract metadata
print(f"Panel: {data['metadata']['panel']['title']}")
print(f"Signals: {data['metadata']['signals']}")

# Convert to DataFrame
df = pd.DataFrame({
    'timestamp': data['data']['timestamps'],
    **data['data']['values']
})

# Sample of the DataFrame
print("\nFirst 3 records:")
print(df.head(3))

Panel-Specific Features

Plot Panel

  • Time-series visualization
  • Precision measurement tool with delta calculations
  • Interactive zooming and panning
  • Signal management and color customization

Table Panel

  • Real-time value updates
  • Multi-signal grouping and expansion
  • Real-time filtering and sorting

Log Panel

  • Real-time log streaming
  • Multi-level filtering by severity and source
  • ANSI color support for terminal formatting
  • Advanced search with glob patterns and highlighting

Next Steps