EnerOS v0.17.0

Release Date: March 30, 2025 Codename: Insight Git Tag: v0.17.0 Support Status: Stable Total Crates: 46 (4 new) Test Cases: 6380+ (560 new)

Version Overview

EnerOS v0.17.0 “Insight” is the core release for EnerOS in the “Visualization and Human-Machine Interaction” direction. The primary goal is to introduce a Visualization Dashboard and Web UI Framework, providing dispatchers, operations staff, and managers with intuitive, real-time, customizable grid operation views, presenting EnerOS kernel’s powerful computation and insight capabilities to end users in visual form.

Power dispatch traditionally relies on SCADA systems with “numeric tables + simple graphics” interfaces, which have low information density, clumsy interactions, and are difficult to customize. As modern grids continue to expand, a provincial dispatch center may monitor tens of thousands of nodes and hundreds of thousands of telemetry points—traditional interfaces can no longer support efficient decision-making. v0.17.0 introduces a visualization framework based on modern web technologies, integrating the ECharts chart library, D3.js topology rendering, and WebGL acceleration, supporting real-time streaming data updates and drag-and-drop component composition, enabling dispatchers to grasp grid situation globally on a single large screen.

This version introduces four new crates: eneros-dashboard (dashboard core), eneros-dashboard-ui (Web UI framework), eneros-dashboard-chart (real-time charts), and eneros-dashboard-topo (topology visualization). The design philosophy is “what you see is what you control”—the dashboard is not just a display tool but an operation entry point, where dispatchers can directly issue operation commands on the visual interface, with all operations passing through Guardian validation to ensure safety.

Key Metrics

New Features

1. Visualization Dashboard

Introduced the eneros-dashboard crate, providing a complete dashboard runtime supporting multiple dashboards, multiple layouts, and multi-tenancy. Dashboards are described in declarative JSON, supporting runtime dynamic loading and editing.

Dashboard Definition

use eneros_dashboard::{Dashboard, Layout, Widget};

let dashboard = Dashboard::new("province-overview")
    .title("Provincial Grid Overview")
    .layout(Layout::grid(4, 3))  // 4 rows x 3 columns grid
    .widget(Widget::chart("voltage-trend")
        .position(0, 0, 2, 1)  // Occupies 2 columns, 1 row
        .metric("bus.*.voltage")
        .chart_type(ChartType::Line)
        .refresh(Duration::milliseconds(500)))
    .widget(Widget::topology("grid-topo")
        .position(0, 2, 1, 3)
        .source(&network)
        .highlight(HighlightRule::overload()))
    .widget(Widget::gauge("total-load")
        .position(2, 0, 1, 1)
        .metric("system.total-load")
        .range(0, 5000)
        .unit("MW"))
    .widget(Widget::table("alarms")
        .position(2, 1, 1, 2)
        .source("alarm.*")
        .columns(&["time", "severity", "device", "message"]))
    .build()?;

dashboard.serve("0.0.0.0:8080").await?;

Built-in Dashboard Templates

2. Web UI Framework

Introduced the eneros-dashboard-ui crate, providing a React + TypeScript-based frontend framework with 32 built-in power industry-specific components, supporting drag-and-drop composition and theme customization. The frontend communicates with the backend in real-time via WebSocket / SSE, with data refresh latency below 200ms.

Component System

use eneros_dashboard_ui::{Component, ComponentRegistry};

// Register custom components
let registry = ComponentRegistry::new()
    .register(Component::single_line("voltage-display")
        .props(&["bus_id", "precision"])
        .data_source("telemetry.bus.{bus_id}.voltage"))
    .register(Component::status_indicator("breaker-status")
        .props(&["breaker_id"])
        .states(&["open", "closed", "fault"]))
    .register(Component::trend_chart("load-curve")
        .props(&["time_range", "interval"])
        .chart_type(ChartType::Area));

Component Categories

Real-Time Data Binding

use eneros_dashboard_ui::datasource;

// Bind pipeline topic for real-time updates
let binding = datasource::bind("telemetry.bus.*")
    .transform(|e| {
        json!({
            "bus": e.topic.suffix(),
            "voltage": e.payload["voltage"],
            "timestamp": e.timestamp,
        })
    })
    .debounce(Duration::milliseconds(100));

// Push to frontend
dashboard.push("voltage-trend", binding).await?;

3. Real-Time Charts (ECharts)

Introduced the eneros-dashboard-chart crate, integrating the Apache ECharts chart library, supporting 30+ chart types, and achieving 60fps smooth rendering through WebGL acceleration. Chart data is updated in real-time through streaming pipelines, supporting high-performance visualization of million-level data points.

Chart Configuration

use eneros_dashboard_chart::{Chart, ChartConfig, Series};

let chart = Chart::new("voltage-trend")
    .config(ChartConfig {
        chart_type: ChartType::Line,
        theme: Theme::dark(),
        animation: true,
        animation_duration: Duration::milliseconds(300),
        data_zoom: true,
        legend: true,
        tooltip: TooltipConfig::axis(),
    })
    .series(Series::new("bus-1")
        .metric("telemetry.bus.1.voltage")
        .color("#5470c6")
        .smooth(true))
    .series(Series::new("bus-2")
        .metric("telemetry.bus.2.voltage")
        .color("#91cc75"))
    .x_axis(Axis::time())
    .y_axis(Axis::value()
        .name("Voltage (pu)")
        .range(0.9, 1.1)
        .mark_line(MarkLine::at(1.0, "Rated")));

Chart Type Support

Large Dataset Optimization

// Use downsampling for million-level data points
let chart = Chart::new("large-dataset")
    .config(ChartConfig {
        chart_type: ChartType::Line,
        sampling: SamplingStrategy::lttb(1000),  // LTTB downsample to 1000 points
        progressive_render: true,
        progressive_threshold: 10000,
        ..Default::default()
    });

4. Topology Visualization

Introduced the eneros-dashboard-topo crate, providing visual rendering of grid topology, supporting three views: single-line diagram, geographic diagram, and hierarchical diagram. Based on WebGL acceleration, it can smoothly render 50,000-node grid topology, supporting interactions such as zoom, pan, and box selection.

Topology Rendering

use eneros_dashboard_topo::{TopologyView, ViewConfig, Layout};

let view = TopologyView::new("grid-topo")
    .source(&network)
    .config(ViewConfig {
        layout: Layout::geo(&geo_coordinates),  // Geographic layout
        node_size: NodeSize::by_voltage_level(),
        edge_width: EdgeWidth::by_power_flow(),
        color_scheme: ColorScheme::voltage(),
        labels: LabelConfig::show_on_zoom(0.7),
    })
    .highlight(HighlightRule::overload()
        .color(Color::from_rgb(255, 0, 0)))
    .highlight(HighlightRule::outage()
        .color(Color::from_rgb(128, 128, 128)));

view.render().await?;

View Modes

Real-Time Power Flow Animation

// Display real-time power flow animation on topology
view.animate_power_flow(AnimationConfig {
    speed: AnimationSpeed::by_magnitude(),
    direction: AnimationDirection::actual(),
    particle_density: 0.8,
    color: Color::by_load_level(),
});

5. Custom Components

Supports users developing custom components using React/TypeScript, interacting with the EnerOS backend through standard protocols. Components can be published to the component marketplace for reuse by other tenants.

Component Development

// my-voltage-gauge.tsx
import { useEnerosData } from '@eneros/dashboard-sdk';

export function VoltageGauge({ busId }: { busId: string }) {
    const { data, loading } = useEnerosData(`telemetry.bus.${busId}.voltage`);
    
    return (
        <Gauge
            value={data?.voltage ?? 0}
            min={0.9}
            max={1.1}
            marks={[{ value: 1.0, label: 'Rated' }]}
            color={data?.voltage > 1.05 ? 'red' : 'green'}
        />
    );
}

Component Registration

use eneros_dashboard_ui::custom;

// Register custom component
custom::register("my-voltage-gauge")
    .entrypoint("/widgets/voltage-gauge.js")
    .props(&["bus_id"])
    .preview("/widgets/voltage-gauge-preview.png")
    .category("custom")
    .permissions(&["telemetry:read"])?;

Component Marketplace

Improvements

• API Gateway: New WebSocket and SSE endpoints, supporting real-time data push
• Pipeline: Data pipeline supports filtering by dashboard subscriptions, reducing unnecessary network transmission
• Digital Twin: Twin state changes automatically pushed to dashboard, no polling required
• Guardian System: Operation components automatically integrated with guardian validation, ensuring visual operation safety

Bug Fixes

• Fixed eneros-dashboard rendering lag when component count exceeds 50 (#1709)
• Fixed eneros-dashboard-chart memory overflow when data points exceed 100,000 (#1715)
• Fixed eneros-dashboard-topo node position disorder during topology zoom (#1721)
• Fixed eneros-dashboard-ui data loss after WebSocket reconnection (#1727)

Breaking Changes

• Dashboard::serve: Default port changed from 3000 to 8080
• Component::register: New permissions parameter, requires declaring component required permissions
• Chart::config: theme field changed from String to strongly typed Theme

Performance Improvements

• Data refresh latency reduced from 5s to 200ms (25x improvement)
• Topology render node count increased from 1000 to 50000 (50x improvement)
• Chart render frame rate increased from 5fps to 60fps (12x improvement)
• Large dataset downsampling enables million-point rendering

Contributors

This version was jointly completed by 28 contributors with 512 commits. Special thanks to:

• @dashboard-core: Dashboard runtime and layout engine
• @ui-framework: React component framework and SDK
• @chart-master: ECharts integration and WebGL acceleration
• @topo-renderer: Topology visualization and force-directed layout

Upgrade Guide

Upgrading from v0.16.0

1. Update Dependencies

# Cargo.toml
[dependencies]
eneros-dashboard = { version = "0.17" }
eneros-dashboard-ui = { version = "0.17" }
eneros-dashboard-chart = { version = "0.17", features = ["webgl"] }
eneros-dashboard-topo = { version = "0.17" }

2. Enable Dashboard Service

# eneros.toml
[dashboard]
enabled = true
bind = "0.0.0.0:8080"
theme = "dark"
realtime_push = true
websocket = true

3. Load Built-in Dashboards

use eneros_dashboard::templates;

// Load provincial overview template
let dashboard = templates::province_overview()
    .tenant(TenantId::from("default"))
    .load()
    .await?;

4. Develop Custom Components (Optional)

To develop custom components, refer to the frontend development guide, use the @eneros/dashboard-sdk package, and register components to the dashboard via custom::register after development.

5. Large Screen Deployment Recommendations

For production environments, 4K large screen deployment is recommended, with hardware configuration: CPU 8+ cores, memory 16GB+, GPU supporting WebGL 2.0. For multi-screen tiling, use the multi_screen configuration mode to ensure cross-screen topology continuity.