@datalayer/core 1.2.18 → 1.2.20

package/lib/otel/views/OtelLogsList.js

@@ -12,56 +12,28 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * @module otel/OtelLogsList
  */
 import React, { useState } from 'react';
-import { Box, Text, Label, Spinner } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text, Label, Spinner } from '@primer/react';
 import { Blankslate } from '@primer/react/experimental';
 import { LogIcon } from '@primer/octicons-react';
 import { formatTime, severityVariant } from '../utils.js';
 // ── helpers ─────────────────────────────────────────────────────────
 /** Severity badge using Primer Label, centered in its grid cell. */
-const Severity = ({ text }) => (_jsx(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Label, { size: "small", variant: severityVariant(text), children: text }) }));
+const Severity = ({ text }) => (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", children: _jsx(Label, { size: "small", variant: severityVariant(text), children: text }) }));
 /** Expandable row detail for a single log record. */
-const LogDetail = ({ log }) => (_jsxs(Box, { sx: {
-        gridColumn: '1 / -1',
-        bg: 'canvas.subtle',
-        borderBottom: '1px solid',
-        borderColor: 'border.default',
-        p: 3,
-    }, children: [_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Text, { sx: {
+const LogDetail = ({ log }) => (_jsxs(Box, { gridColumn: "1 / -1", bg: "canvas.subtle", borderBottom: "1px solid", borderColor: "border.default", p: 3, children: [_jsxs(Box, { mb: 2, children: [_jsx(Text, { sx: {
                         fontSize: 0,
                         fontWeight: 'bold',
                         color: 'fg.muted',
                         display: 'block',
                         mb: 1,
-                    }, children: "Body" }), _jsx(Box, { as: "pre", sx: {
-                        fontSize: 1,
-                        fontFamily: 'mono',
-                        whiteSpace: 'pre-wrap',
-                        wordBreak: 'break-word',
-                        m: 0,
-                        bg: 'canvas.default',
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 2,
-                        p: 2,
-                    }, children: log.body })] }), log.trace_id && (_jsxs(Box, { sx: { display: 'flex', gap: 3, mb: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontWeight: 'bold' }, children: "trace_id" }), _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: log.trace_id }), log.span_id && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontWeight: 'bold' }, children: "span_id" }), _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: log.span_id })] }))] })), log.attributes && Object.keys(log.attributes).length > 0 && (_jsxs(Box, { children: [_jsx(Text, { sx: {
+                    }, children: "Body" }), _jsx(Box, { as: "pre", fontSize: 1, fontFamily: "mono", whiteSpace: "pre-wrap", wordBreak: "break-word", m: 0, bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 2, children: log.body })] }), log.trace_id && (_jsxs(Box, { display: "flex", gap: 3, mb: 2, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontWeight: 'bold' }, children: "trace_id" }), _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: log.trace_id }), log.span_id && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontWeight: 'bold' }, children: "span_id" }), _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: log.span_id })] }))] })), log.attributes && Object.keys(log.attributes).length > 0 && (_jsxs(Box, { children: [_jsx(Text, { sx: {
                         fontSize: 0,
                         fontWeight: 'bold',
                         color: 'fg.muted',
                         display: 'block',
                         mb: 1,
-                    }, children: "Attributes" }), _jsx(Box, { sx: {
-                        bg: 'canvas.default',
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 2,
-                        p: 2,
-                    }, children: Object.entries(log.attributes).map(([k, v]) => (_jsxs(Box, { sx: {
-                            display: 'flex',
-                            gap: 2,
-                            py: 1,
-                            borderBottom: '1px solid',
-                            borderColor: 'border.muted',
-                        }, children: [_jsx(Text, { sx: {
+                    }, children: "Attributes" }), _jsx(Box, { bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 2, children: Object.entries(log.attributes).map(([k, v]) => (_jsxs(Box, { display: "flex", gap: 2, py: 1, borderBottom: "1px solid", borderColor: "border.muted", children: [_jsx(Text, { sx: {
                                     color: 'accent.fg',
                                     fontSize: 0,
                                     fontFamily: 'mono',
@@ -76,23 +48,12 @@ export const OtelLogsList = ({ logs, loading, selectedLogIndex, onSelectLog, })
     const [expandedIdx, setExpandedIdx] = useState(null);
     const colTemplate = '140px 80px 160px 1fr';
     if (loading && logs.length === 0) {
-        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 5 }, children: _jsx(Spinner, { size: "medium" }) }));
+        return (_jsx(Box, { display: "flex", justifyContent: "center", p: 5, children: _jsx(Spinner, { size: "medium" }) }));
     }
     if (!loading && logs.length === 0) {
         return (_jsxs(Blankslate, { children: [_jsx(Blankslate.Visual, { children: _jsx(LogIcon, { size: 24 }) }), _jsx(Blankslate.Heading, { children: "No log records found" }), _jsx(Blankslate.Description, { children: "Send some log data first." })] }));
     }
-    return (_jsxs(Box, { sx: { flex: 1, minHeight: 0, overflow: 'auto' }, children: [_jsx(Box, { sx: {
-                    display: 'grid',
-                    gridTemplateColumns: colTemplate,
-                    bg: 'canvas.subtle',
-                    borderBottom: '2px solid',
-                    borderColor: 'border.default',
-                    px: 3,
-                    py: 1,
-                    position: 'sticky',
-                    top: 0,
-                    zIndex: 1,
-                }, children: ['Time', 'Severity', 'Service', 'Body'].map(h => (_jsx(Text, { sx: {
+    return (_jsxs(Box, { flex: 1, minHeight: 0, overflow: "auto", children: [_jsx(Box, { display: "grid", gridTemplateColumns: colTemplate, bg: "canvas.subtle", borderBottom: "2px solid", borderColor: "border.default", px: 3, py: 1, position: "sticky", top: 0, zIndex: 1, children: ['Time', 'Severity', 'Service', 'Body'].map(h => (_jsx(Text, { sx: {
                         fontSize: 0,
                         fontWeight: 'bold',
                         color: 'fg.muted',
@@ -102,23 +63,11 @@ export const OtelLogsList = ({ logs, loading, selectedLogIndex, onSelectLog, })
                     }, children: h }, h))) }), logs.map((log, idx) => {
                 const selected = idx === selectedLogIndex;
                 const expanded = idx === expandedIdx;
-                return (_jsxs(React.Fragment, { children: [_jsxs(Box, { sx: {
-                                display: 'grid',
-                                gridTemplateColumns: colTemplate,
-                                px: 3,
-                                py: '5px',
-                                borderBottom: '1px solid',
-                                borderColor: 'border.muted',
-                                cursor: 'pointer',
-                                bg: selected
-                                    ? 'accent.subtle'
-                                    : expanded
-                                        ? 'canvas.subtle'
-                                        : 'canvas.default',
-                                ':hover': {
-                                    bg: selected || expanded ? undefined : 'canvas.subtle',
-                                },
-                            }, onClick: () => {
+                return (_jsxs(React.Fragment, { children: [_jsxs(Box, { display: "grid", gridTemplateColumns: colTemplate, px: 3, py: "5px", borderBottom: "1px solid", borderColor: "border.muted", cursor: "pointer", bg: selected
+                                ? 'accent.subtle'
+                                : expanded
+                                    ? 'canvas.subtle'
+                                    : 'canvas.default', hover: { bg: selected || expanded ? undefined : 'canvas.subtle' }, onClick: () => {
                                 setExpandedIdx(expanded ? null : idx);
                                 onSelectLog?.(log, idx);
                             }, children: [_jsx(Text, { sx: { fontSize: 1, fontFamily: 'mono', color: 'fg.default' }, children: formatTime(log.timestamp) }), _jsx(Severity, { text: log.severity_text }), _jsx(Text, { sx: {

package/lib/otel/views/OtelMetricsChart.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as echarts from 'echarts';
 import ReactECharts from 'echarts-for-react';
-import { Box, Text, Label } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text, Label } from '@primer/react';
 // ── Gradient palette ────────────────────────────────────────────────
 const SERIES_COLORS = [
     {
@@ -269,30 +270,14 @@ export const OtelMetricsChart = ({ metrics, height = 240, }) => {
     const byType = groupByType(metrics);
     // Sort types in a stable, user-friendly order.
     const sortedTypes = [...byType.keys()].sort((a, b) => (TYPE_ORDER[a] ?? 99) - (TYPE_ORDER[b] ?? 99));
-    return (_jsx(Box, { sx: {
-            display: 'grid',
-            gridTemplateColumns: '1fr 1fr',
-            gap: 2,
-        }, children: sortedTypes.map(mtype => {
+    return (_jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2, children: sortedTypes.map(mtype => {
             const nameMap = byType.get(mtype);
             const option = buildOption(mtype, nameMap);
             const stats = computeStats(nameMap);
             const durationMs = stats.startTs !== null && stats.endTs !== null
                 ? stats.endTs - stats.startTs
                 : null;
-            return (_jsxs(Box, { children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 2,
-                            px: 1,
-                            mb: 1,
-                        }, children: [_jsx(Label, { size: "small", variant: typeVariant(mtype), children: mtype }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', color: 'fg.muted' }, children: typeTitle(mtype) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: ["(", [...nameMap.keys()].join(', '), ")"] })] }), _jsxs(Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 3,
-                            px: 1,
-                            mb: 1,
-                        }, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: "Sum:" }), ' ', stats.total.toLocaleString(undefined, {
+            return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 1, mb: 1, children: [_jsx(Label, { size: "small", variant: typeVariant(mtype), children: mtype }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', color: 'fg.muted' }, children: typeTitle(mtype) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: ["(", [...nameMap.keys()].join(', '), ")"] })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 3, px: 1, mb: 1, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: "Sum:" }), ' ', stats.total.toLocaleString(undefined, {
                                         maximumFractionDigits: 4,
                                     })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: "Points:" }), ' ', stats.count] }), stats.startTs !== null && stats.endTs !== null && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: "Interval:" }), ' ', formatTs(stats.startTs), " \u2192 ", formatTs(stats.endTs), durationMs !== null && durationMs > 0 && (_jsxs(Text, { as: "span", sx: { color: 'fg.subtle' }, children: [' ', "(", formatDuration(durationMs), ")"] }))] }))] }), _jsx(ReactECharts, { echarts: echarts, option: option, style: { width: '100%', height: `${height}px` }, notMerge: true })] }, mtype));
         }) }));

package/lib/otel/views/OtelMetricsList.js

@@ -12,7 +12,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * @module otel/OtelMetricsList
  */
 import { useMemo, useState } from 'react';
-import { Box, Text, Label, Spinner, CounterLabel, SegmentedControl, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { 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.js';
@@ -70,27 +71,7 @@ const MetricGroup = ({ name, points }) => {
         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: {
+    return (_jsxs(Box, { borderBottom: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { onClick: () => setExpanded(!expanded), 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, { display: "flex", flexDirection: "column", gap: 0, children: [_jsxs(Box, { 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, { 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, { 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, { 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, { bg: "canvas.subtle", children: [_jsxs(Box, { 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',
@@ -108,31 +89,15 @@ const MetricRow = ({ metric }) => {
     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: {
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { 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) => {
+                        }, children: formatValue(metric.value, metric.unit) }), _jsx(Box, { 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) }) }))] }));
+                            }, sx: { cursor: 'pointer' }, children: [attrCount, " attr", attrCount !== 1 ? 's' : ''] })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "\u2014" })) })] }), showAttrs && metric.attributes && (_jsx(Box, { px: 5, py: 2, bg: "canvas.inset", children: _jsx(Box, { as: "pre", 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';
@@ -163,46 +128,12 @@ export const OtelMetricsList = ({ metrics, loading = false, }) => {
     };
     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" }) }));
+        return (_jsx(Box, { 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: {
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", flex: 1, minHeight: 0, overflow: "hidden", children: [_jsx(Box, { 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, { flex: 1, minHeight: 0, overflow: "auto", children: view === 'chart' ? (_jsx(Box, { px: 3, py: 2, children: _jsx(OtelMetricsChart, { metrics: metrics, height: 280 }) })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { 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',

package/lib/otel/views/OtelSearchBar.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, SegmentedControl, ActionMenu, ActionList, TextInput, Button, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { SegmentedControl, ActionMenu, ActionList, TextInput, Button, } from '@primer/react';
 import { SyncIcon, SearchIcon } from '@primer/octicons-react';
 const SIGNALS = [
     { value: 'traces', label: 'Traces' },
@@ -8,15 +9,5 @@ const SIGNALS = [
 ];
 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" }))] }));
+    return (_jsxs(Box, { 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, { 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/views/OtelSpanDetail.js

@@ -12,7 +12,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @module otel/OtelSpanDetail
  */
 import { useMemo, useState } from 'react';
-import { Box, Text, IconButton, UnderlineNav, CounterLabel, Label, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text, IconButton, UnderlineNav, CounterLabel, Label, } from '@primer/react';
 import { XIcon, ChevronDownIcon, ChevronRightIcon, } from '@primer/octicons-react';
 import { formatDuration, buildSpanTree } from '../utils.js';
 import { OtelSpanTree } from './OtelSpanTree.js';
@@ -21,13 +22,7 @@ import { OtelSpanTree } from './OtelSpanTree.js';
 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: {
+    return (_jsxs(Box, { display: "flex", py: 1, borderBottom: "1px solid", borderColor: "border.muted", gap: 2, children: [_jsx(Text, { sx: {
                     width: 140,
                     minWidth: 140,
                     color: 'fg.muted',
@@ -44,22 +39,7 @@ 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))) }))] }));
+    return (_jsxs(Box, { mt: 3, children: [_jsxs(Box, { 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, { 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))) }))] }));
 };
 /**
  * A value as the detail unfolds it: JSON text of an object or an array (the
@@ -87,24 +67,7 @@ const AttributeRow = ({ attrKey, value: given, depth }) => {
     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: {
+    return (_jsxs(Box, { borderBottom: depth === 0 ? '1px solid' : 'none', borderColor: "border.muted", pb: depth === 0 ? 1 : 0, mb: depth === 0 ? 1 : 0, children: [_jsxs(Box, { display: "flex", gap: 2, py: 1, pl: depth * 16 + 'px', alignItems: "flex-start", children: [isNested ? (_jsx(Box, { 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, { width: 16, flexShrink: 0 })), _jsx(Text, { sx: {
                             color: 'accent.fg',
                             fontSize: 1,
                             fontFamily: 'mono',
@@ -127,7 +90,7 @@ const AttributeRow = ({ attrKey, value: given, depth }) => {
 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." }) }));
+        return (_jsx(Box, { 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 = {};
@@ -144,49 +107,16 @@ export const OtelSpanDetail = ({ span, traceSpans, onClose, }) => {
     }
     // 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: {
+    return (_jsxs(Box, { height: "100%", overflow: "auto", borderLeft: "1px solid", borderColor: "border.default", bg: "canvas.default", display: "flex", flexDirection: "column", children: [_jsxs(Box, { 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, { flex: 1, overflow: "auto", children: [activeTab === 'details' && (_jsxs(Box, { 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, { mt: 3, children: [_jsxs(Box, { 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, { bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", p: 2, mt: 2, children: [_jsxs(Box, { 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: {
+                                                        }, children: ev.timestamp })] }), ev.attributes && Object.keys(ev.attributes).length > 0 && (_jsx(Box, { 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, { mt: 3, children: [_jsxs(Box, { 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) }))] })] }));
+                                        }, 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", 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/views/OtelSpanTree.js

@@ -12,7 +12,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * @module otel/OtelSpanTree
  */
 import { useState, useMemo, useCallback } from 'react';
-import { Box, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
 import { ChevronDownIcon, ChevronRightIcon } from '@primer/octicons-react';
 import { formatDuration, serviceColor, toMs } from '../utils.js';
 const INDENT_PX = 20;
@@ -23,61 +24,18 @@ const SpanNode = ({ span, depth, selectedSpanId, onSelectSpan, expandedIds, togg
     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 => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { 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, { 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: {
+                        }, children: hasChildren ? (isExpanded ? (_jsx(ChevronDownIcon, { size: 12 })) : (_jsx(ChevronRightIcon, { size: 12 }))) : (_jsx(Text, { sx: { color: 'fg.subtle', fontSize: 0 }, children: "\u00B7" })) }), _jsx(Box, { 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: {
+                        }, title: `${span.service_name} / ${span.span_name}`, children: span.span_name }), _jsx(Box, { flex: 1, position: "relative", height: 12, bg: "canvas.subtle", borderRadius: 1, mx: 2, overflow: "hidden", children: _jsx(Box, { 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,
@@ -139,17 +97,9 @@ export const OtelSpanTree = ({ spans, selectedSpanId, onSelectSpan, defaultExpan
         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 (_jsx(Box, { 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: {
+    return (_jsxs(Box, { width: "100%", overflow: "auto", children: [_jsxs(Box, { display: "flex", alignItems: "center", height: 28, px: 2, borderBottom: "2px solid", borderColor: "border.default", bg: "canvas.subtle", children: [_jsx(Box, { width: 20 }), _jsx(Box, { width: 8, mr: 1 }), _jsx(Text, { sx: {
                             flex: '0 0 200px',
                             fontSize: 0,
                             fontWeight: 'bold',