dotstream^TM UI

Interactive GIS Map

Full-featured map viewer with dynamic popup system, station markers, and real-time status updates. Integrated with GeoServer for geographic data layers.

• Custom popup components per station type (OHVD, traffic cameras, sensors)
• Real-time station status via WebSocket connections
• Multi-layer GIS integration with GeoServer
• Station panel with live video feeds, relay controls, and event history

Station Control Panel

Comprehensive station management interface with PTZ camera controls, relay toggles, and VMS (Variable Message Sign) messaging.

Real-Time KPI Dashboard

Dashboard with live metrics, filtering by station/date range/alert type, and database-level aggregations via PostgREST.

Technical Implementation

• PostgREST API layer with custom PostgreSQL views
• Station filtering using UUID (not names) for data integrity
• Date range filtering with proper timezone handling
• Pagination handling for large datasets (16,000+ events)

Live PTZ & VCA Camera Feeds

WebSocket-based frame streaming from the backend dVS (dotstream Video Service), with offline detection, retry logic, and graceful degradation.

// OHVDStream.tsx - Key state management
const [isOffline, setIsOffline] = useState(false);
const [cooldownMessage, setCooldownMessage] = useState<string | null>(null);
const [retryCount, setRetryCount] = useState(0);
const startupTimeoutRef = useRef<NodeJS.Timeout | null>(null);

// Flow: Check offline status -> Initialize stream -> Wait for first frame
// 30-second timeout with automatic offline recheck

Features Implemented

• WebSocket frame streaming with CSRF token authentication
• Camera offline detection with retry mechanism (5-min cooldown)
• 30-second initialization timeout with graceful fallback
• Spinner shows until first frame received (not on socket connect)
• Video file playback for recorded alerts

Event Notification System

Client-side MQTT integration for real-time alert notifications and station status updates.