murmuraba
Version:
Real-time audio noise reduction with advanced chunked processing for web applications
56 lines (55 loc) • 5.49 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useCallback } from 'react';
const MetricItem = ({ label, value, 'data-testid': testId }) => (_jsxs("div", { className: "metric-item", "data-testid": testId, children: [_jsx("span", { className: "metric-label", children: label }), _jsx("span", { className: "metric-value", children: value })] }));
const PerformanceIndicator = ({ memoryUsage }) => {
const performance = useMemo(() => {
const memoryMB = memoryUsage / (1024 * 1024);
if (memoryMB < 50)
return { level: 'good', text: '🟢 Good' };
if (memoryMB < 100)
return { level: 'moderate', text: '🟡 Moderate' };
return { level: 'high', text: '🔴 High' };
}, [memoryUsage]);
return (_jsx("span", { className: `performance-indicator performance-indicator--${performance.level}`, children: performance.text }));
};
const PanelHeader = ({ onClose }) => {
const handleKeyDown = useCallback((event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
onClose();
}
if (event.key === 'Escape') {
onClose();
}
}, [onClose]);
return (_jsxs("header", { className: "panel-header", children: [_jsx("h2", { className: "panel-title", children: "\uD83D\uDD2C Engine Diagnostics" }), _jsx("button", { type: "button", className: "panel-close-button", onClick: onClose, onKeyDown: handleKeyDown, "aria-label": "Close diagnostics panel", children: _jsx("span", { "aria-hidden": "true", children: "\u2715" }) })] }));
};
/**
* Advanced metrics panel displaying comprehensive engine diagnostics
* with full accessibility support and clean architecture.
*/
export function AdvancedMetricsPanel({ isVisible, diagnostics, onClose, className = '', 'aria-label': ariaLabel, }) {
// Handle escape key at panel level
const handleKeyDown = useCallback((event) => {
if (event.key === 'Escape') {
onClose();
}
}, [onClose]);
// Format memory usage safely
const formatMemoryUsage = useCallback((bytes) => {
const megabytes = bytes / (1024 * 1024);
return `${megabytes.toFixed(2)} MB`;
}, []);
// Format processing time safely
const formatProcessingTime = useCallback((time) => {
return `${time.toFixed(2)}ms`;
}, []);
// Early returns for non-display states
if (!isVisible || !diagnostics) {
return null;
}
// Safe browser info access
const browserName = diagnostics.browserInfo?.name || 'Unknown';
const audioAPIsSupported = diagnostics.browserInfo?.audioAPIsSupported ?? [];
return (_jsxs("div", { className: `advanced-metrics-panel ${className}`.trim(), role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || 'Engine Diagnostics Panel', onKeyDown: handleKeyDown, tabIndex: -1, children: [_jsx("div", { className: "panel-backdrop", onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: "panel-container", children: [_jsx(PanelHeader, { onClose: onClose }), _jsx("main", { className: "panel-content", children: _jsxs("div", { className: "metrics-grid", role: "grid", children: [_jsx(MetricItem, { label: "Version:", value: diagnostics.engineVersion, "data-testid": "metric-version" }), _jsx(MetricItem, { label: "WASM Status:", value: diagnostics.wasmLoaded ? '✅ Loaded' : '❌ Not Loaded', "data-testid": "metric-wasm-status" }), _jsx(MetricItem, { label: "Active Processors:", value: diagnostics.activeProcessors.toString(), "data-testid": "metric-active-processors" }), _jsx(MetricItem, { label: "Memory Usage:", value: formatMemoryUsage(diagnostics.memoryUsage), "data-testid": "metric-memory-usage" }), _jsx(MetricItem, { label: "Processing Time:", value: formatProcessingTime(diagnostics.processingTime), "data-testid": "metric-processing-time" }), _jsx(MetricItem, { label: "Engine State:", value: _jsx("span", { className: "engine-state", children: diagnostics.engineState }), "data-testid": "metric-engine-state" }), _jsx(MetricItem, { label: "Browser:", value: browserName, "data-testid": "metric-browser" }), _jsx(MetricItem, { label: "Audio APIs:", value: audioAPIsSupported.length > 0 ? `✅ ${audioAPIsSupported.join(', ')}` : '❌ Limited', "data-testid": "metric-audio-apis" }), _jsx(MetricItem, { label: "Performance:", value: _jsx(PerformanceIndicator, { memoryUsage: diagnostics.memoryUsage }), "data-testid": "metric-performance" }), _jsx(MetricItem, { label: "Buffer Usage:", value: diagnostics.bufferUsage ? `${diagnostics.bufferUsage.toFixed(1)}%` : 'N/A', "data-testid": "metric-buffer-usage" }), _jsx(MetricItem, { label: "Current Latency:", value: diagnostics.currentLatency ? `${diagnostics.currentLatency.toFixed(1)}ms` : 'N/A', "data-testid": "metric-current-latency" }), _jsx(MetricItem, { label: "Frame Rate:", value: diagnostics.frameRate ? `${diagnostics.frameRate.toFixed(1)} fps` : 'N/A', "data-testid": "metric-frame-rate" }), _jsx(MetricItem, { label: "Active Streams:", value: diagnostics.activeStreams?.toString() || '0', "data-testid": "metric-active-streams" }), _jsx(MetricItem, { label: "Noise Reduction:", value: diagnostics.noiseReductionLevel ? `${(diagnostics.noiseReductionLevel * 100).toFixed(1)}%` : 'N/A', "data-testid": "metric-noise-reduction" }), _jsx(MetricItem, { label: "Audio Quality:", value: diagnostics.audioQuality || 'Standard', "data-testid": "metric-audio-quality" })] }) })] })] }));
}