@datalayer/core 1.0.1 → 1.0.3

package/lib/otel/OtelMetricsList.js

@@ -0,0 +1,213 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * OtelMetricsList – Tabular view of metric data points grouped by
+ * metric name, with expandable rows showing individual data points.
+ *
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelMetricsList
+ */
+import { useMemo, useState } from 'react';
+import { Box, Text, Label, Spinner, CounterLabel, SegmentedControl, } from '@primer/react';
+import { Blankslate } from '@primer/react/experimental';
+import { MeterIcon, ChevronDownIcon, ChevronRightIcon, GraphIcon, TableIcon, } from '@primer/octicons-react';
+import { formatTime } from './utils';
+import { OtelMetricsChart } from './OtelMetricsChart';
+// ── Helpers ─────────────────────────────────────────────────────────
+/** Group metrics by metric_name. */
+function groupByName(metrics) {
+    const map = new Map();
+    for (const m of metrics) {
+        const key = m.metric_name || '(unnamed)';
+        if (!map.has(key))
+            map.set(key, []);
+        const group = map.get(key);
+        if (group)
+            group.push(m);
+    }
+    return map;
+}
+/** Format a metric value with optional unit. */
+function formatValue(value, unit) {
+    const formatted = Number.isInteger(value) ? String(value) : value.toFixed(3);
+    return unit ? `${formatted} ${unit}` : formatted;
+}
+/** Map metric_type to a Primer Label variant. */
+function typeVariant(type) {
+    switch (type?.toLowerCase()) {
+        case 'gauge':
+            return 'accent';
+        case 'counter':
+        case 'sum':
+            return 'attention';
+        case 'histogram':
+            return 'secondary';
+        case 'exponentialhistogram':
+            return 'success';
+        default:
+            return 'primary';
+    }
+}
+// ── MetricGroup  ────────────────────────────────────────────────────
+const MetricGroup = ({ name, points }) => {
+    const [expanded, setExpanded] = useState(false);
+    const first = points[0];
+    // Compute stats
+    const stats = useMemo(() => {
+        const values = points.map(p => p.value);
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        const avg = values.reduce((a, b) => a + b, 0) / values.length;
+        const latest = values[values.length - 1];
+        const timestamps = points
+            .map(p => new Date(p.timestamp).getTime())
+            .filter(t => !isNaN(t));
+        const startTs = timestamps.length > 0 ? Math.min(...timestamps) : null;
+        const endTs = timestamps.length > 0 ? Math.max(...timestamps) : null;
+        return { min, max, avg, latest, startTs, endTs };
+    }, [points]);
+    return (_jsxs(Box, { sx: {
+            borderBottom: '1px solid',
+            borderColor: 'border.default',
+        }, children: [_jsxs(Box, { onClick: () => setExpanded(!expanded), sx: {
+                    display: 'grid',
+                    gridTemplateColumns: '20px 1fr auto auto auto auto',
+                    gap: 3,
+                    alignItems: 'center',
+                    px: 3,
+                    py: 2,
+                    cursor: 'pointer',
+                    ':hover': { bg: 'canvas.subtle' },
+                }, children: [expanded ? (_jsx(ChevronDownIcon, { size: 16 })) : (_jsx(ChevronRightIcon, { size: 16 })), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 0 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: name }), first?.metric_type && (_jsx(Label, { size: "small", variant: typeVariant(first.metric_type), children: first.metric_type })), first?.unit && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["(", first.unit, ")"] }))] }), stats.startTs !== null && stats.endTs !== null && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle', fontFamily: 'mono' }, children: [formatTime(new Date(stats.startTs).toISOString()), stats.startTs !== stats.endTs && (_jsxs(_Fragment, { children: [" \u2192 ", formatTime(new Date(stats.endTs).toISOString())] }))] }))] }), _jsxs(Box, { sx: { textAlign: 'right' }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "latest" }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', fontFamily: 'mono', ml: 1 }, children: formatValue(stats.latest, first?.unit) })] }), _jsxs(Box, { sx: { textAlign: 'right' }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "avg" }), _jsx(Text, { sx: { fontSize: 1, fontFamily: 'mono', ml: 1 }, children: stats.avg.toFixed(2) })] }), _jsxs(Box, { sx: { textAlign: 'right' }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "min/max" }), _jsxs(Text, { sx: { fontSize: 1, fontFamily: 'mono', ml: 1 }, children: [stats.min.toFixed(1), "\u2013", stats.max.toFixed(1)] })] }), _jsx(CounterLabel, { children: points.length })] }), expanded && (_jsxs(Box, { sx: { bg: 'canvas.subtle' }, children: [_jsxs(Box, { sx: {
+                            display: 'grid',
+                            gridTemplateColumns: '20px 180px 1fr 140px 160px',
+                            gap: 3,
+                            px: 3,
+                            py: 1,
+                            borderTop: '1px solid',
+                            borderColor: 'border.muted',
+                        }, children: [_jsx(Box, {}), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "Time" }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "Service" }), _jsx(Text, { sx: {
+                                    fontSize: 0,
+                                    fontWeight: 'bold',
+                                    color: 'fg.muted',
+                                    textAlign: 'right',
+                                }, children: "Value" }), _jsx(Text, { sx: {
+                                    fontSize: 0,
+                                    fontWeight: 'bold',
+                                    color: 'fg.muted',
+                                    textAlign: 'right',
+                                }, children: "Attributes" })] }), points.map((point, idx) => (_jsx(MetricRow, { metric: point }, `${point.timestamp}-${idx}`)))] }))] }));
+};
+// ── MetricRow ───────────────────────────────────────────────────────
+const MetricRow = ({ metric }) => {
+    const [showAttrs, setShowAttrs] = useState(false);
+    const attrCount = metric.attributes
+        ? Object.keys(metric.attributes).length
+        : 0;
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                    display: 'grid',
+                    gridTemplateColumns: '20px 180px 1fr 140px 160px',
+                    gap: 3,
+                    alignItems: 'center',
+                    px: 3,
+                    py: 1,
+                    borderTop: '1px solid',
+                    borderColor: 'border.muted',
+                    ':hover': { bg: 'canvas.inset' },
+                }, children: [_jsx(Box, {}), _jsx(Text, { sx: { fontSize: 0, fontFamily: 'mono', color: 'fg.muted' }, children: formatTime(metric.timestamp) }), _jsx(Text, { sx: { fontSize: 0 }, children: metric.service_name }), _jsx(Text, { sx: {
+                            fontSize: 1,
+                            fontFamily: 'mono',
+                            fontWeight: 'bold',
+                            textAlign: 'right',
+                        }, children: formatValue(metric.value, metric.unit) }), _jsx(Box, { sx: { textAlign: 'right' }, children: attrCount > 0 ? (_jsxs(Label, { size: "small", variant: "secondary", onClick: (e) => {
+                                e.stopPropagation();
+                                setShowAttrs(!showAttrs);
+                            }, sx: { cursor: 'pointer' }, children: [attrCount, " attr", attrCount !== 1 ? 's' : ''] })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "\u2014" })) })] }), showAttrs && metric.attributes && (_jsx(Box, { sx: { px: 5, py: 2, bg: 'canvas.inset' }, children: _jsx(Box, { as: "pre", sx: {
+                        m: 0,
+                        fontSize: 0,
+                        fontFamily: 'mono',
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-word',
+                    }, children: JSON.stringify(metric.attributes, null, 2) }) }))] }));
+};
+// ── OtelMetricsList ─────────────────────────────────────────────────
+const COOKIE_KEY = 'otel_metrics_view';
+function readViewCookie() {
+    try {
+        const match = document.cookie.match(/(?:^|;\s*)otel_metrics_view=([^;]+)/);
+        if (match && (match[1] === 'chart' || match[1] === 'table'))
+            return match[1];
+    }
+    catch {
+        // ignore
+    }
+    return 'table';
+}
+function writeViewCookie(v) {
+    try {
+        document.cookie = `${COOKIE_KEY}=${v};path=/;max-age=31536000`;
+    }
+    catch {
+        // ignore
+    }
+}
+export const OtelMetricsList = ({ metrics, loading = false, }) => {
+    const [view, setView] = useState(readViewCookie);
+    const handleViewChange = (v) => {
+        writeViewCookie(v);
+        setView(v);
+    };
+    const grouped = useMemo(() => groupByName(metrics), [metrics]);
+    if (loading) {
+        return (_jsx(Box, { sx: {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                p: 5,
+            }, children: _jsx(Spinner, { size: "medium" }) }));
+    }
+    if (metrics.length === 0) {
+        return (_jsxs(Blankslate, { children: [_jsx(Blankslate.Visual, { children: _jsx(MeterIcon, { size: 20 }) }), _jsx(Blankslate.Heading, { children: "No metrics yet" }), _jsx(Blankslate.Description, { children: "Generate some metrics or adjust the filters above." })] }));
+    }
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            minHeight: 0,
+            overflow: 'hidden',
+        }, children: [_jsx(Box, { sx: {
+                    flexShrink: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'flex-end',
+                    px: 3,
+                    py: 2,
+                    bg: 'canvas.subtle',
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                    zIndex: 0,
+                }, children: _jsxs(SegmentedControl, { "aria-label": "Metrics view", size: "small", onChange: (idx) => handleViewChange(idx === 0 ? 'chart' : 'table'), children: [_jsx(SegmentedControl.IconButton, { icon: GraphIcon, "aria-label": "Chart", selected: view === 'chart' }), _jsx(SegmentedControl.IconButton, { icon: TableIcon, "aria-label": "Table", selected: view === 'table' })] }) }), _jsx(Box, { sx: { flex: 1, minHeight: 0, overflow: 'auto' }, children: view === 'chart' ? (_jsx(Box, { sx: { px: 3, py: 2 }, children: _jsx(OtelMetricsChart, { metrics: metrics, height: 280 }) })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                                display: 'grid',
+                                gridTemplateColumns: '20px 1fr auto auto auto auto',
+                                gap: 3,
+                                px: 3,
+                                py: 1,
+                                bg: 'canvas.subtle',
+                                borderBottom: '2px solid',
+                                borderColor: 'border.default',
+                                position: 'sticky',
+                                top: 0,
+                                zIndex: 1,
+                            }, children: [_jsx(Box, {}), ['Metric Name', 'Latest', 'Average', 'Min/Max', 'Points'].map((h, i) => (_jsx(Text, { sx: {
+                                        fontSize: 0,
+                                        fontWeight: 'bold',
+                                        color: 'fg.muted',
+                                        textTransform: 'uppercase',
+                                        letterSpacing: '0.05em',
+                                        textAlign: i === 0 ? undefined : 'right',
+                                    }, children: h }, h)))] }), [...grouped.entries()].map(([name, points]) => (_jsx(MetricGroup, { name: name, points: points }, name)))] })) })] }));
+};

package/lib/otel/OtelSearchBar.d.ts

@@ -0,0 +1,11 @@
+/**
+ * OtelSearchBar – Filter toolbar with signal-type tabs, service selector,
+ * query input, and refresh action.
+ *
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelSearchBar
+ */
+import React from 'react';
+import type { OtelSearchBarProps } from './types';
+export declare const OtelSearchBar: React.FC<OtelSearchBarProps>;

package/lib/otel/OtelSearchBar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, SegmentedControl, ActionMenu, ActionList, TextInput, Button, } from '@primer/react';
+import { SyncIcon, SearchIcon } from '@primer/octicons-react';
+const SIGNALS = [
+    { value: 'traces', label: 'Traces' },
+    { value: 'logs', label: 'Logs' },
+    { value: 'metrics', label: 'Metrics' },
+];
+export const OtelSearchBar = ({ signal, onSignalChange, services, selectedService, onServiceChange, query, onQueryChange, onRefresh, loading, }) => {
+    const safeServices = Array.isArray(services) ? services : [];
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 2,
+            px: 3,
+            py: 2,
+            bg: 'canvas.subtle',
+            borderBottom: '1px solid',
+            borderColor: 'border.default',
+            flexWrap: 'wrap',
+        }, children: [_jsx(SegmentedControl, { "aria-label": "Signal type", size: "small", onChange: idx => onSignalChange(SIGNALS[idx].value), children: SIGNALS.map(s => (_jsx(SegmentedControl.Button, { selected: s.value === signal, "aria-label": s.label, children: s.label }, s.value))) }), _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { size: "small", variant: "invisible", children: selectedService || 'All services' }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsxs(ActionList, { selectionVariant: "single", children: [_jsx(ActionList.Item, { selected: selectedService === '', onSelect: () => onServiceChange(''), children: "All services" }), safeServices.length > 0 && _jsx(ActionList.Divider, {}), safeServices.map(svc => (_jsx(ActionList.Item, { selected: selectedService === svc, onSelect: () => onServiceChange(svc), children: svc }, svc)))] }) })] }), _jsx(Box, { sx: { flex: 1, minWidth: 180 }, children: _jsx(TextInput, { leadingVisual: SearchIcon, value: query, onChange: e => onQueryChange(e.target.value), placeholder: "Search spans, logs, metrics\u2026", size: "small", block: true, "aria-label": "Search telemetry" }) }), onRefresh && (_jsx(Button, { size: "small", leadingVisual: SyncIcon, onClick: onRefresh, disabled: loading, "aria-label": "Refresh", children: "Refresh" }))] }));
+};

package/lib/otel/OtelSpanDetail.d.ts

@@ -0,0 +1,11 @@
+/**
+ * OtelSpanDetail – Detail panel for a selected span, with metadata,
+ * collapsible attributes, gen_ai arguments, events, and links.
+ *
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelSpanDetail
+ */
+import React from 'react';
+import type { OtelSpanDetailProps } from './types';
+export declare const OtelSpanDetail: React.FC<OtelSpanDetailProps>;

package/lib/otel/OtelSpanDetail.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * OtelSpanDetail – Detail panel for a selected span, with metadata,
+ * collapsible attributes, gen_ai arguments, events, and links.
+ *
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelSpanDetail
+ */
+import { useState } from 'react';
+import { Box, Text, IconButton, UnderlineNav, CounterLabel, Label, } from '@primer/react';
+import { XIcon, ChevronDownIcon, ChevronRightIcon, } from '@primer/octicons-react';
+import { formatDuration, buildSpanTree } from './utils';
+import { OtelSpanTree } from './OtelSpanTree';
+// ── Helpers ─────────────────────────────────────────────────────────
+/** Single key–value metadata row. */
+const MetadataRow = ({ label, value, mono = false }) => {
+    if (value === undefined || value === null || value === '')
+        return null;
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            py: 1,
+            borderBottom: '1px solid',
+            borderColor: 'border.muted',
+            gap: 2,
+        }, children: [_jsx(Text, { sx: {
+                    width: 140,
+                    minWidth: 140,
+                    color: 'fg.muted',
+                    fontSize: 1,
+                    fontWeight: 'bold',
+                }, children: label }), _jsx(Text, { sx: {
+                    fontSize: 1,
+                    fontFamily: mono ? 'mono' : 'normal',
+                    wordBreak: 'break-all',
+                }, children: String(value) })] }));
+};
+/** Collapsible section for nested JSON/attribute data with tree rendering. */
+const CollapsibleSection = ({ title, data, defaultOpen = false }) => {
+    const [open, setOpen] = useState(defaultOpen);
+    if (!data || Object.keys(data).length === 0)
+        return null;
+    return (_jsxs(Box, { sx: { mt: 3 }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                    cursor: 'pointer',
+                    py: 1,
+                    userSelect: 'none',
+                }, onClick: () => setOpen(!open), children: [open ? _jsx(ChevronDownIcon, { size: 16 }) : _jsx(ChevronRightIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: title }), _jsx(CounterLabel, { children: Object.keys(data).length })] }), open && (_jsx(Box, { sx: {
+                    bg: 'canvas.subtle',
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    p: 2,
+                    mt: 1,
+                    overflowX: 'auto',
+                }, children: Object.entries(data).map(([key, val]) => (_jsx(AttributeRow, { attrKey: key, value: val, depth: 0 }, key))) }))] }));
+};
+/** Recursive attribute row – supports nested objects and arrays. */
+const AttributeRow = ({ attrKey, value, depth }) => {
+    const [open, setOpen] = useState(depth < 1);
+    const isObject = typeof value === 'object' && value !== null && !Array.isArray(value);
+    const isArray = Array.isArray(value);
+    const isNested = isObject || isArray;
+    return (_jsxs(Box, { sx: {
+            borderBottom: depth === 0 ? '1px solid' : 'none',
+            borderColor: 'border.muted',
+            pb: depth === 0 ? 1 : 0,
+            mb: depth === 0 ? 1 : 0,
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    gap: 2,
+                    py: 1,
+                    pl: depth * 16 + 'px',
+                    alignItems: 'flex-start',
+                }, children: [isNested ? (_jsx(Box, { sx: {
+                            cursor: 'pointer',
+                            color: 'fg.muted',
+                            userSelect: 'none',
+                            width: 16,
+                            flexShrink: 0,
+                        }, onClick: () => setOpen(!open), children: open ? (_jsx(ChevronDownIcon, { size: 12 })) : (_jsx(ChevronRightIcon, { size: 12 })) })) : (_jsx(Box, { sx: { width: 16, flexShrink: 0 } })), _jsx(Text, { sx: {
+                            color: 'accent.fg',
+                            fontSize: 1,
+                            fontFamily: 'mono',
+                            minWidth: 180,
+                            wordBreak: 'break-all',
+                            flexShrink: 0,
+                        }, children: attrKey }), !isNested && (_jsx(Text, { sx: {
+                            fontSize: 1,
+                            fontFamily: 'mono',
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                            color: typeof value === 'string' ? 'accent.emphasis' : 'attention.fg',
+                        }, children: typeof value === 'string' ? value : JSON.stringify(value) })), isNested && !open && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontFamily: 'mono' }, children: isArray
+                            ? `[${value.length} items]`
+                            : `{${Object.keys(value).length} keys}` }))] }), isNested && open && (_jsx(Box, { children: isArray
+                    ? value.map((item, idx) => (_jsx(AttributeRow, { attrKey: `[${idx}]`, value: item, depth: depth + 1 }, idx)))
+                    : Object.entries(value).map(([k, v]) => (_jsx(AttributeRow, { attrKey: k, value: v, depth: depth + 1 }, k))) }))] }));
+};
+// ── Main component ──────────────────────────────────────────────────
+export const OtelSpanDetail = ({ span, traceSpans, onClose, }) => {
+    const [activeTab, setActiveTab] = useState('details');
+    if (!span) {
+        return (_jsx(Box, { sx: { p: 5, color: 'fg.muted', textAlign: 'center' }, children: _jsx(Text, { children: "Select a span to view details." }) }));
+    }
+    // Separate gen_ai attributes from other attributes
+    const genAiAttrs = {};
+    const otherAttrs = {};
+    if (span.attributes) {
+        for (const [k, v] of Object.entries(span.attributes)) {
+            if (k.startsWith('gen_ai.') || k.startsWith('model_request')) {
+                genAiAttrs[k] = v;
+            }
+            else {
+                otherAttrs[k] = v;
+            }
+        }
+    }
+    // Build tree from traceSpans for tree tab
+    const tree = traceSpans && traceSpans.length > 0 ? buildSpanTree(traceSpans) : undefined;
+    return (_jsxs(Box, { sx: {
+            height: '100%',
+            overflow: 'auto',
+            borderLeft: '1px solid',
+            borderColor: 'border.default',
+            bg: 'canvas.default',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [_jsxs(Box, { sx: {
+                    px: 3,
+                    py: 2,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    bg: 'canvas.subtle',
+                    flexShrink: 0,
+                }, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: span.span_name }), onClose && (_jsx(IconButton, { icon: XIcon, "aria-label": "Close detail panel", variant: "invisible", size: "small", onClick: onClose }))] }), _jsxs(UnderlineNav, { "aria-label": "Span detail tabs", children: [_jsx(UnderlineNav.Item, { "aria-current": activeTab === 'details' ? 'page' : undefined, onClick: () => setActiveTab('details'), children: "Details" }), tree && (_jsx(UnderlineNav.Item, { "aria-current": activeTab === 'tree' ? 'page' : undefined, onClick: () => setActiveTab('tree'), children: "Trace Tree" })), _jsx(UnderlineNav.Item, { "aria-current": activeTab === 'raw' ? 'page' : undefined, onClick: () => setActiveTab('raw'), children: "Raw Data" })] }), _jsxs(Box, { sx: { flex: 1, overflow: 'auto' }, children: [activeTab === 'details' && (_jsxs(Box, { sx: { p: 3 }, children: [_jsx(MetadataRow, { label: "span_name", value: span.span_name }), _jsx(MetadataRow, { label: "service_name", value: span.service_name }), _jsx(MetadataRow, { label: "otel_scope_name", value: span.otel_scope_name }), _jsx(MetadataRow, { label: "kind", value: span.kind }), _jsx(MetadataRow, { label: "trace_id", value: span.trace_id, mono: true }), _jsx(MetadataRow, { label: "span_id", value: span.span_id, mono: true }), _jsx(MetadataRow, { label: "parent_span_id", value: span.parent_span_id, mono: true }), _jsx(MetadataRow, { label: "duration", value: formatDuration(span.duration_ms) }), _jsx(MetadataRow, { label: "start_time", value: span.start_time, mono: true }), _jsx(MetadataRow, { label: "end_time", value: span.end_time, mono: true }), _jsx(MetadataRow, { label: "status_code", value: span.status_code }), _jsx(MetadataRow, { label: "status_message", value: span.status_message }), _jsx(CollapsibleSection, { title: "Arguments", data: genAiAttrs, defaultOpen: Object.keys(genAiAttrs).length > 0 }), _jsx(CollapsibleSection, { title: "Attributes", data: otherAttrs }), span.events && span.events.length > 0 && (_jsxs(Box, { sx: { mt: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: "Events" }), _jsx(CounterLabel, { children: span.events.length })] }), span.events.map((ev, idx) => (_jsxs(Box, { sx: {
+                                            bg: 'canvas.subtle',
+                                            borderRadius: 2,
+                                            border: '1px solid',
+                                            borderColor: 'border.default',
+                                            p: 2,
+                                            mt: 2,
+                                        }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Label, { children: ev.name }), _jsx(Text, { sx: {
+                                                            fontSize: 0,
+                                                            color: 'fg.muted',
+                                                            fontFamily: 'mono',
+                                                        }, children: ev.timestamp })] }), ev.attributes && Object.keys(ev.attributes).length > 0 && (_jsx(Box, { sx: { mt: 1 }, children: Object.entries(ev.attributes).map(([k, v]) => (_jsx(AttributeRow, { attrKey: k, value: v, depth: 0 }, k))) }))] }, idx)))] })), span.links && span.links.length > 0 && (_jsxs(Box, { sx: { mt: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: "Links" }), _jsx(CounterLabel, { children: span.links.length })] }), span.links.map((link, idx) => (_jsxs(Text, { sx: {
+                                            display: 'block',
+                                            fontSize: 1,
+                                            fontFamily: 'mono',
+                                            py: 1,
+                                            borderBottom: '1px solid',
+                                            borderColor: 'border.muted',
+                                        }, children: ["trace: ", link.trace_id, " \u2192 span: ", link.span_id] }, idx)))] }))] })), activeTab === 'tree' && tree && (_jsx(OtelSpanTree, { spans: tree, selectedSpanId: span.span_id, defaultExpandDepth: 4 })), activeTab === 'raw' && (_jsx(Box, { as: "pre", sx: {
+                            p: 3,
+                            fontSize: 0,
+                            fontFamily: 'mono',
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                            m: 0,
+                            bg: 'canvas.subtle',
+                        }, children: JSON.stringify(span, null, 2) }))] })] }));
+};

package/lib/otel/OtelSpanTree.d.ts

@@ -0,0 +1,11 @@
+/**
+ * OtelSpanTree – Collapsible tree view of nested spans within a trace.
+ *
+ * Renders spans as an indented, expandable tree with duration bars.
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelSpanTree
+ */
+import React from 'react';
+import type { OtelSpanTreeProps } from './types';
+export declare const OtelSpanTree: React.FC<OtelSpanTreeProps>;

package/lib/otel/OtelSpanTree.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * OtelSpanTree – Collapsible tree view of nested spans within a trace.
+ *
+ * Renders spans as an indented, expandable tree with duration bars.
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelSpanTree
+ */
+import { useState, useMemo, useCallback } from 'react';
+import { Box, Text } from '@primer/react';
+import { ChevronDownIcon, ChevronRightIcon } from '@primer/octicons-react';
+import { formatDuration, serviceColor, toMs } from './utils';
+const INDENT_PX = 20;
+const SpanNode = ({ span, depth, selectedSpanId, onSelectSpan, expandedIds, toggleExpanded, traceMinTime, traceDuration, }) => {
+    const hasChildren = (span.children?.length ?? 0) > 0;
+    const isExpanded = expandedIds.has(span.span_id);
+    const isSelected = selectedSpanId === span.span_id;
+    const color = serviceColor(span.service_name);
+    const startPct = ((toMs(span.start_time) - traceMinTime) / traceDuration) * 100;
+    const widthPct = Math.max(((span.duration_ms || 0) / traceDuration) * 100, 0.5);
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    height: 28,
+                    pl: `${depth * INDENT_PX}px`,
+                    pr: 2,
+                    cursor: 'pointer',
+                    bg: isSelected ? 'accent.subtle' : 'canvas.default',
+                    borderBottom: '1px solid',
+                    borderColor: 'border.muted',
+                    ':hover': {
+                        bg: isSelected ? 'accent.subtle' : 'canvas.subtle',
+                    },
+                }, onClick: () => onSelectSpan?.(span), children: [_jsx(Box, { sx: {
+                            width: 20,
+                            textAlign: 'center',
+                            color: 'fg.muted',
+                            userSelect: 'none',
+                            flexShrink: 0,
+                            cursor: hasChildren ? 'pointer' : 'default',
+                        }, onClick: e => {
+                            e.stopPropagation();
+                            if (hasChildren)
+                                toggleExpanded(span.span_id);
+                        }, children: hasChildren ? (isExpanded ? (_jsx(ChevronDownIcon, { size: 12 })) : (_jsx(ChevronRightIcon, { size: 12 }))) : (_jsx(Text, { sx: { color: 'fg.subtle', fontSize: 0 }, children: "\u00B7" })) }), _jsx(Box, { sx: {
+                            width: 8,
+                            height: 8,
+                            borderRadius: '50%',
+                            bg: color,
+                            flexShrink: 0,
+                            mr: 1,
+                        } }), _jsx(Text, { sx: {
+                            flex: '0 0 200px',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            fontSize: 1,
+                            fontWeight: isSelected ? 'bold' : 'normal',
+                        }, title: `${span.service_name} / ${span.span_name}`, children: span.span_name }), _jsx(Box, { sx: {
+                            flex: 1,
+                            position: 'relative',
+                            height: 12,
+                            bg: 'canvas.subtle',
+                            borderRadius: 1,
+                            mx: 2,
+                            overflow: 'hidden',
+                        }, children: _jsx(Box, { sx: {
+                                position: 'absolute',
+                                left: `${startPct}%`,
+                                width: `${widthPct}%`,
+                                height: '100%',
+                                bg: color,
+                                borderRadius: 1,
+                                opacity: isSelected ? 1 : 0.7,
+                            } }) }), _jsx(Text, { sx: {
+                            minWidth: 60,
+                            textAlign: 'right',
+                            fontSize: 0,
+                            fontFamily: 'mono',
+                            color: 'fg.muted',
+                            flexShrink: 0,
+                        }, children: formatDuration(span.duration_ms) })] }), hasChildren &&
+                isExpanded &&
+                span.children.map(child => (_jsx(SpanNode, { span: child, depth: depth + 1, selectedSpanId: selectedSpanId, onSelectSpan: onSelectSpan, expandedIds: expandedIds, toggleExpanded: toggleExpanded, traceMinTime: traceMinTime, traceDuration: traceDuration }, child.span_id)))] }));
+};
+export const OtelSpanTree = ({ spans, selectedSpanId, onSelectSpan, defaultExpandDepth = 2, }) => {
+    // Pre-compute which IDs should be expanded by default
+    const defaultExpanded = useMemo(() => {
+        const ids = new Set();
+        function walk(nodes, depth) {
+            for (const n of nodes) {
+                if (depth < defaultExpandDepth) {
+                    ids.add(n.span_id);
+                }
+                if (n.children)
+                    walk(n.children, depth + 1);
+            }
+        }
+        walk(spans, 0);
+        return ids;
+    }, [spans, defaultExpandDepth]);
+    const [expandedIds, setExpandedIds] = useState(defaultExpanded);
+    const toggleExpanded = useCallback((id) => {
+        setExpandedIds(prev => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+            return next;
+        });
+    }, []);
+    // Compute trace time bounds
+    const { traceMinTime, traceDuration } = useMemo(() => {
+        let min = Infinity;
+        let max = -Infinity;
+        function walk(nodes) {
+            for (const s of nodes) {
+                const start = toMs(s.start_time);
+                const end = toMs(s.end_time);
+                if (start < min)
+                    min = start;
+                if (end > max)
+                    max = end;
+                if (s.children)
+                    walk(s.children);
+            }
+        }
+        walk(spans);
+        if (min === Infinity)
+            return { traceMinTime: 0, traceDuration: 1 };
+        return { traceMinTime: min, traceDuration: max - min || 1 };
+    }, [spans]);
+    if (spans.length === 0) {
+        return (_jsx(Box, { sx: { p: 3, color: 'fg.muted', textAlign: 'center' }, children: _jsx(Text, { children: "No span tree to display." }) }));
+    }
+    return (_jsxs(Box, { sx: { width: '100%', overflow: 'auto' }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    height: 28,
+                    px: 2,
+                    borderBottom: '2px solid',
+                    borderColor: 'border.default',
+                    bg: 'canvas.subtle',
+                }, children: [_jsx(Box, { sx: { width: 20 } }), _jsx(Box, { sx: { width: 8, mr: 1 } }), _jsx(Text, { sx: {
+                            flex: '0 0 200px',
+                            fontSize: 0,
+                            fontWeight: 'bold',
+                            color: 'fg.muted',
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.05em',
+                        }, children: "Span" }), _jsx(Text, { sx: {
+                            flex: 1,
+                            mx: 2,
+                            fontSize: 0,
+                            fontWeight: 'bold',
+                            color: 'fg.muted',
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.05em',
+                        }, children: "Timeline" }), _jsx(Text, { sx: {
+                            minWidth: 60,
+                            textAlign: 'right',
+                            fontSize: 0,
+                            fontWeight: 'bold',
+                            color: 'fg.muted',
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.05em',
+                        }, children: "Duration" })] }), spans.map(root => (_jsx(SpanNode, { span: root, depth: 0, selectedSpanId: selectedSpanId, onSelectSpan: onSelectSpan, expandedIds: expandedIds, toggleExpanded: toggleExpanded, traceMinTime: traceMinTime, traceDuration: traceDuration }, root.span_id)))] }));
+};

package/lib/otel/OtelSqlView.d.ts

@@ -0,0 +1,16 @@
+/**
+ * OtelSqlView – Ad-hoc DataFusion SQL query panel for the OTEL service.
+ *
+ * Features:
+ *  - Preset query dropdown (spans, logs, metrics)
+ *  - Query history persisted to cookie `otel_sql_history` (max 10 entries)
+ *  - ⌘/Ctrl + Enter to run
+ *
+ * Available tables: `spans`, `metrics`, `logs`.
+ */
+import React from 'react';
+export interface OtelSqlViewProps {
+    token?: string;
+    baseUrl?: string;
+}
+export declare const OtelSqlView: React.FC<OtelSqlViewProps>;