npm - @mastra/playground-ui - Versions diffs - 65.0.0-alpha.2 → 65.0.0-alpha.4 - Mend

@mastra/playground-ui 65.0.0-alpha.2 → 65.0.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (883) hide show

package/dist/domains/traces/components/span-rows.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"span-rows.cjs.js","sources":["../../../../src/domains/traces/components/span-rows.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { Fragment, useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { getOverallLatency } from '../utils/span-timing';\nimport { getSpanTypeUi } from './shared';\n\nexport type SpanRowExpansion = {\n hasChildren: boolean;\n numOfChildren: number;\n toggleChildren: () => void;\n};\n\nexport type SpanRowContext = {\n span: UISpan;\n spanUI: UISpanStyle \| null \| undefined;\n depth: number;\n isRootSpan: boolean;\n isLastChild: boolean;\n isExpanded: boolean;\n isSelected: boolean;\n isFaded: boolean;\n isRevealed: boolean;\n overallLatency: number;\n overallStartTime: string;\n onSpanClick?: (id: string) => void;\n expansion: SpanRowExpansion;\n};\n\ntype SharedRowProps = {\n renderRow: (ctx: SpanRowContext) => ReactNode;\n onSpanClick?: (id: string) => void;\n selectedSpanId?: string;\n /** Row flagged as revealed once mounted (ancestors auto-expand when the span is featured). /\n revealSpanId?: string;\n fadedTypes?: string[];\n featuredSpanIds?: string[];\n expandedSpanIds?: string[];\n setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n};\n\nexport type SpanRowsProps = SharedRowProps & {\n spans: UISpan[];\n};\n\n/\n Headless depth-first walker over a span hierarchy. Owns the expansion / fade /\n * reveal state of each row and delegates all markup to `renderRow`. Children are\n * only mounted while their parent is expanded.\n */\nexport function SpanRows({ spans, ...rowProps }: SpanRowsProps) {\n const overallLatency = getOverallLatency(spans);\n const overallStartTime = spans[0]?.startTime \|\| '';\n\n return (\n <>\n {spans.map((span, idx) => (\n <SpanRow\n key={span.id}\n span={span}\n depth={0}\n isLastChild={idx === spans.length - 1}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n {...rowProps}\n />\n ))}\n </>\n );\n}\n\ntype SpanRowProps = SharedRowProps & {\n span: UISpan;\n depth: number;\n isLastChild: boolean;\n overallLatency: number;\n overallStartTime: string;\n};\n\nfunction SpanRow({\n span,\n depth,\n isLastChild,\n overallLatency,\n overallStartTime,\n renderRow,\n onSpanClick,\n selectedSpanId,\n revealSpanId,\n fadedTypes,\n featuredSpanIds,\n expandedSpanIds,\n setExpandedSpanIds,\n}: SpanRowProps) {\n const hasChildren = Boolean(span.spans && span.spans.length > 0);\n const numOfChildren = span.spans ? span.spans.length : 0;\n const allDescendantIds = getSpanDescendantIds(span);\n const isRootSpan = depth === 0;\n const spanUI = getSpanTypeUi(span?.type);\n const isExpanded = expandedSpanIds ? expandedSpanIds.includes(span.id) : false;\n const isFadedBySearch = featuredSpanIds && featuredSpanIds.length > 0 ? !featuredSpanIds.includes(span.id) : false;\n const isFadedByType = fadedTypes && fadedTypes.length > 0 ? fadedTypes.includes(spanUI?.typePrefix \|\| '') : false;\n const isFaded = isFadedByType \|\| isFadedBySearch;\n\n useEffect(() => {\n if (!featuredSpanIds \|\| allDescendantIds.length === 0) return;\n if (isExpanded) return;\n const hasFeaturedDescendant = allDescendantIds.some(id => featuredSpanIds.includes(id));\n if (hasFeaturedDescendant && setExpandedSpanIds) {\n setExpandedSpanIds(prev => (!prev \|\| prev.includes(span.id) ? (prev ?? [span.id]) : [...prev, span.id]));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [featuredSpanIds, allDescendantIds]);\n\n const toggleChildren = () => {\n if (!setExpandedSpanIds) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n return isExpanded ? prev.filter(id => id !== span.id) : [...prev, span.id];\n });\n };\n\n const ctx: SpanRowContext = {\n span,\n spanUI,\n depth,\n isRootSpan,\n isLastChild,\n isExpanded,\n isSelected: selectedSpanId === span.id,\n isFaded,\n isRevealed: revealSpanId === span.id,\n overallLatency,\n overallStartTime,\n onSpanClick,\n expansion: {\n hasChildren,\n numOfChildren,\n toggleChildren,\n },\n };\n\n return (\n <Fragment>\n {renderRow(ctx)}\n {hasChildren &&\n isExpanded &&\n span.spans?.map((childSpan, idx, array) => (\n <SpanRow\n key={childSpan.id}\n span={childSpan}\n depth={depth + 1}\n isLastChild={idx === array.length - 1}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n renderRow={renderRow}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n revealSpanId={revealSpanId}\n fadedTypes={fadedTypes}\n featuredSpanIds={featuredSpanIds}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n />\n ))}\n </Fragment>\n );\n}\n"],"names":["getOverallLatency","jsx","Fragment","getSpanDescendantIds","getSpanTypeUi","useEffect","jsxs"],"mappings":";;;;;;;;;;~~AAkDO~~,SAAS,QAAA,CAAS,EAAE,KAAA,EAAO,GAAG,UAAS,EAAkB;AAC9D,EAAA,MAAM,cAAA,GAAiBA,kDAAkB,KAAK,CAAA;AAC9C,EAAA,MAAM,gBAAA,GAAmB,KAAA,CAAM,CAAC,CAAA,EAAG,SAAA,IAAa,EAAA;AAEhD,EAAA,uBACEC,cAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,MAAM,GAAA,qBAChBD,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MAEC,IAAA;AAAA,MACA,KAAA,EAAO,CAAA;AAAA,MACP,WAAA,EAAa,GAAA,KAAQ,KAAA,CAAM,MAAA,GAAS,CAAA;AAAA,MACpC,cAAA;AAAA,MACA,gBAAA;AAAA,MACC,GAAG;AAAA,KAAA;AAAA,~~IANC~~,IAAA,CAAK;AAAA,~~GAQb~~,CAAA,EACH,CAAA;AAEJ;~~AAUA~~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~~MAbK~~,SAAA,CAAU;AAAA,~~KAelB~~;AAAA,GAAA,EACL,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"span-rows.cjs.js","sources":["../../../../src/domains/traces/components/span-rows.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { Fragment, useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { getOverallLatency } from '../utils/span-timing';\nimport { getSpanTypeUi } from './shared';\n\nexport type SpanRowExpansion = {\n hasChildren: boolean;\n numOfChildren: number;\n toggleChildren: () => void;\n};\n\nexport type SpanRowContext = {\n span: UISpan;\n spanUI: UISpanStyle \| null \| undefined;\n depth: number;\n isRootSpan: boolean;\n isLastChild: boolean;\n /** One entry per ancestor level below the root: whether that ancestor still has siblings below, so its connector line keeps running through this row. /\n guides: boolean[];\n isExpanded: boolean;\n isSelected: boolean;\n isFaded: boolean;\n isRevealed: boolean;\n overallLatency: number;\n overallStartTime: string;\n onSpanClick?: (id: string) => void;\n expansion: SpanRowExpansion;\n};\n\ntype SharedRowProps = {\n renderRow: (ctx: SpanRowContext) => ReactNode;\n onSpanClick?: (id: string) => void;\n selectedSpanId?: string;\n /* Row flagged as revealed once mounted (ancestors auto-expand when the span is featured). /\n revealSpanId?: string;\n fadedTypes?: string[];\n featuredSpanIds?: string[];\n expandedSpanIds?: string[];\n setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n};\n\nexport type SpanRowsProps = SharedRowProps & {\n spans: UISpan[];\n};\n\n/\n Headless depth-first walker over a span hierarchy. Owns the expansion / fade /\n * reveal state of each row and delegates all markup to `renderRow`. Children are\n * only mounted while their parent is expanded.\n */\nexport function SpanRows({ spans, ...rowProps }: SpanRowsProps) {\n const overallLatency = getOverallLatency(spans);\n const overallStartTime = spans[0]?.startTime \|\| '';\n\n return (\n <>\n {spans.map((span, idx) => (\n <SpanRow\n key={span.id}\n span={span}\n depth={0}\n isLastChild={idx === spans.length - 1}\n guides={[]}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n {...rowProps}\n />\n ))}\n </>\n );\n}\n\ntype SpanRowProps = SharedRowProps & {\n span: UISpan;\n depth: number;\n isLastChild: boolean;\n guides: boolean[];\n overallLatency: number;\n overallStartTime: string;\n};\n\nfunction SpanRow({\n span,\n depth,\n isLastChild,\n guides,\n overallLatency,\n overallStartTime,\n renderRow,\n onSpanClick,\n selectedSpanId,\n revealSpanId,\n fadedTypes,\n featuredSpanIds,\n expandedSpanIds,\n setExpandedSpanIds,\n}: SpanRowProps) {\n const hasChildren = Boolean(span.spans && span.spans.length > 0);\n const numOfChildren = span.spans ? span.spans.length : 0;\n const allDescendantIds = getSpanDescendantIds(span);\n const isRootSpan = depth === 0;\n const spanUI = getSpanTypeUi(span?.type);\n const isExpanded = expandedSpanIds ? expandedSpanIds.includes(span.id) : false;\n const isFadedBySearch = featuredSpanIds && featuredSpanIds.length > 0 ? !featuredSpanIds.includes(span.id) : false;\n const isFadedByType = fadedTypes && fadedTypes.length > 0 ? fadedTypes.includes(spanUI?.typePrefix \|\| '') : false;\n const isFaded = isFadedByType \|\| isFadedBySearch;\n\n useEffect(() => {\n if (!featuredSpanIds \|\| allDescendantIds.length === 0) return;\n if (isExpanded) return;\n const hasFeaturedDescendant = allDescendantIds.some(id => featuredSpanIds.includes(id));\n if (hasFeaturedDescendant && setExpandedSpanIds) {\n setExpandedSpanIds(prev => (!prev \|\| prev.includes(span.id) ? (prev ?? [span.id]) : [...prev, span.id]));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [featuredSpanIds, allDescendantIds]);\n\n const childGuides = isRootSpan ? [] : [...guides, !isLastChild];\n\n const toggleChildren = () => {\n if (!setExpandedSpanIds) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n return isExpanded ? prev.filter(id => id !== span.id) : [...prev, span.id];\n });\n };\n\n const ctx: SpanRowContext = {\n span,\n spanUI,\n depth,\n isRootSpan,\n isLastChild,\n guides,\n isExpanded,\n isSelected: selectedSpanId === span.id,\n isFaded,\n isRevealed: revealSpanId === span.id,\n overallLatency,\n overallStartTime,\n onSpanClick,\n expansion: {\n hasChildren,\n numOfChildren,\n toggleChildren,\n },\n };\n\n return (\n <Fragment>\n {renderRow(ctx)}\n {hasChildren &&\n isExpanded &&\n span.spans?.map((childSpan, idx, array) => (\n <SpanRow\n key={childSpan.id}\n span={childSpan}\n depth={depth + 1}\n isLastChild={idx === array.length - 1}\n guides={childGuides}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n renderRow={renderRow}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n revealSpanId={revealSpanId}\n fadedTypes={fadedTypes}\n featuredSpanIds={featuredSpanIds}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n />\n ))}\n </Fragment>\n );\n}\n"],"names":["getOverallLatency","jsx","Fragment","getSpanDescendantIds","getSpanTypeUi","useEffect","jsxs"],"mappings":"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"}

package/dist/domains/traces/components/span-rows.es.js CHANGED Viewed

@@ -13,6 +13,7 @@ function SpanRows({ spans, ...rowProps }) {
       span,
       depth: 0,
       isLastChild: idx === spans.length - 1,
+      guides: [],
       overallLatency,
       overallStartTime,
       ...rowProps
@@ -24,6 +25,7 @@ function SpanRow({
   span,
   depth,
   isLastChild,
+  guides,
   overallLatency,
   overallStartTime,
   renderRow,
@@ -52,6 +54,7 @@ function SpanRow({
       setExpandedSpanIds((prev) => !prev || prev.includes(span.id) ? prev ?? [span.id] : [...prev, span.id]);
     }
   }, [featuredSpanIds, allDescendantIds]);
+  const childGuides = isRootSpan ? [] : [...guides, !isLastChild];
   const toggleChildren = () => {
     if (!setExpandedSpanIds) return;
     setExpandedSpanIds((prev) => {
@@ -65,6 +68,7 @@ function SpanRow({
     depth,
     isRootSpan,
     isLastChild,
+    guides,
     isExpanded,
     isSelected: selectedSpanId === span.id,
     isFaded,
@@ -86,6 +90,7 @@ function SpanRow({
         span: childSpan,
         depth: depth + 1,
         isLastChild: idx === array.length - 1,
+        guides: childGuides,
         overallLatency,
         overallStartTime,
         renderRow,

package/dist/domains/traces/components/span-rows.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"span-rows.es.js","sources":["../../../../src/domains/traces/components/span-rows.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { Fragment, useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { getOverallLatency } from '../utils/span-timing';\nimport { getSpanTypeUi } from './shared';\n\nexport type SpanRowExpansion = {\n hasChildren: boolean;\n numOfChildren: number;\n toggleChildren: () => void;\n};\n\nexport type SpanRowContext = {\n span: UISpan;\n spanUI: UISpanStyle \| null \| undefined;\n depth: number;\n isRootSpan: boolean;\n isLastChild: boolean;\n isExpanded: boolean;\n isSelected: boolean;\n isFaded: boolean;\n isRevealed: boolean;\n overallLatency: number;\n overallStartTime: string;\n onSpanClick?: (id: string) => void;\n expansion: SpanRowExpansion;\n};\n\ntype SharedRowProps = {\n renderRow: (ctx: SpanRowContext) => ReactNode;\n onSpanClick?: (id: string) => void;\n selectedSpanId?: string;\n /** Row flagged as revealed once mounted (ancestors auto-expand when the span is featured). /\n revealSpanId?: string;\n fadedTypes?: string[];\n featuredSpanIds?: string[];\n expandedSpanIds?: string[];\n setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n};\n\nexport type SpanRowsProps = SharedRowProps & {\n spans: UISpan[];\n};\n\n/\n Headless depth-first walker over a span hierarchy. Owns the expansion / fade /\n * reveal state of each row and delegates all markup to `renderRow`. Children are\n * only mounted while their parent is expanded.\n */\nexport function SpanRows({ spans, ...rowProps }: SpanRowsProps) {\n const overallLatency = getOverallLatency(spans);\n const overallStartTime = spans[0]?.startTime \|\| '';\n\n return (\n <>\n {spans.map((span, idx) => (\n <SpanRow\n key={span.id}\n span={span}\n depth={0}\n isLastChild={idx === spans.length - 1}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n {...rowProps}\n />\n ))}\n </>\n );\n}\n\ntype SpanRowProps = SharedRowProps & {\n span: UISpan;\n depth: number;\n isLastChild: boolean;\n overallLatency: number;\n overallStartTime: string;\n};\n\nfunction SpanRow({\n span,\n depth,\n isLastChild,\n overallLatency,\n overallStartTime,\n renderRow,\n onSpanClick,\n selectedSpanId,\n revealSpanId,\n fadedTypes,\n featuredSpanIds,\n expandedSpanIds,\n setExpandedSpanIds,\n}: SpanRowProps) {\n const hasChildren = Boolean(span.spans && span.spans.length > 0);\n const numOfChildren = span.spans ? span.spans.length : 0;\n const allDescendantIds = getSpanDescendantIds(span);\n const isRootSpan = depth === 0;\n const spanUI = getSpanTypeUi(span?.type);\n const isExpanded = expandedSpanIds ? expandedSpanIds.includes(span.id) : false;\n const isFadedBySearch = featuredSpanIds && featuredSpanIds.length > 0 ? !featuredSpanIds.includes(span.id) : false;\n const isFadedByType = fadedTypes && fadedTypes.length > 0 ? fadedTypes.includes(spanUI?.typePrefix \|\| '') : false;\n const isFaded = isFadedByType \|\| isFadedBySearch;\n\n useEffect(() => {\n if (!featuredSpanIds \|\| allDescendantIds.length === 0) return;\n if (isExpanded) return;\n const hasFeaturedDescendant = allDescendantIds.some(id => featuredSpanIds.includes(id));\n if (hasFeaturedDescendant && setExpandedSpanIds) {\n setExpandedSpanIds(prev => (!prev \|\| prev.includes(span.id) ? (prev ?? [span.id]) : [...prev, span.id]));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [featuredSpanIds, allDescendantIds]);\n\n const toggleChildren = () => {\n if (!setExpandedSpanIds) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n return isExpanded ? prev.filter(id => id !== span.id) : [...prev, span.id];\n });\n };\n\n const ctx: SpanRowContext = {\n span,\n spanUI,\n depth,\n isRootSpan,\n isLastChild,\n isExpanded,\n isSelected: selectedSpanId === span.id,\n isFaded,\n isRevealed: revealSpanId === span.id,\n overallLatency,\n overallStartTime,\n onSpanClick,\n expansion: {\n hasChildren,\n numOfChildren,\n toggleChildren,\n },\n };\n\n return (\n <Fragment>\n {renderRow(ctx)}\n {hasChildren &&\n isExpanded &&\n span.spans?.map((childSpan, idx, array) => (\n <SpanRow\n key={childSpan.id}\n span={childSpan}\n depth={depth + 1}\n isLastChild={idx === array.length - 1}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n renderRow={renderRow}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n revealSpanId={revealSpanId}\n fadedTypes={fadedTypes}\n featuredSpanIds={featuredSpanIds}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n />\n ))}\n </Fragment>\n );\n}\n"],"names":["Fragment"],"mappings":";;;;;;~~AAkDO~~,SAAS,QAAA,CAAS,EAAE,KAAA,EAAO,GAAG,UAAS,EAAkB;AAC9D,EAAA,MAAM,cAAA,GAAiB,kBAAkB,KAAK,CAAA;AAC9C,EAAA,MAAM,gBAAA,GAAmB,KAAA,CAAM,CAAC,CAAA,EAAG,SAAA,IAAa,EAAA;AAEhD,EAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,MAAM,GAAA,qBAChB,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MAEC,IAAA;AAAA,MACA,KAAA,EAAO,CAAA;AAAA,MACP,WAAA,EAAa,GAAA,KAAQ,KAAA,CAAM,MAAA,GAAS,CAAA;AAAA,MACpC,cAAA;AAAA,MACA,gBAAA;AAAA,MACC,GAAG;AAAA,KAAA;AAAA,~~IANC~~,IAAA,CAAK;AAAA,~~GAQb~~,CAAA,EACH,CAAA;AAEJ;~~AAUA~~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~~MAbK~~,SAAA,CAAU;AAAA,~~KAelB~~;AAAA,GAAA,EACL,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"span-rows.es.js","sources":["../../../../src/domains/traces/components/span-rows.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { Fragment, useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { getOverallLatency } from '../utils/span-timing';\nimport { getSpanTypeUi } from './shared';\n\nexport type SpanRowExpansion = {\n hasChildren: boolean;\n numOfChildren: number;\n toggleChildren: () => void;\n};\n\nexport type SpanRowContext = {\n span: UISpan;\n spanUI: UISpanStyle \| null \| undefined;\n depth: number;\n isRootSpan: boolean;\n isLastChild: boolean;\n /** One entry per ancestor level below the root: whether that ancestor still has siblings below, so its connector line keeps running through this row. /\n guides: boolean[];\n isExpanded: boolean;\n isSelected: boolean;\n isFaded: boolean;\n isRevealed: boolean;\n overallLatency: number;\n overallStartTime: string;\n onSpanClick?: (id: string) => void;\n expansion: SpanRowExpansion;\n};\n\ntype SharedRowProps = {\n renderRow: (ctx: SpanRowContext) => ReactNode;\n onSpanClick?: (id: string) => void;\n selectedSpanId?: string;\n /* Row flagged as revealed once mounted (ancestors auto-expand when the span is featured). /\n revealSpanId?: string;\n fadedTypes?: string[];\n featuredSpanIds?: string[];\n expandedSpanIds?: string[];\n setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n};\n\nexport type SpanRowsProps = SharedRowProps & {\n spans: UISpan[];\n};\n\n/\n Headless depth-first walker over a span hierarchy. Owns the expansion / fade /\n * reveal state of each row and delegates all markup to `renderRow`. Children are\n * only mounted while their parent is expanded.\n */\nexport function SpanRows({ spans, ...rowProps }: SpanRowsProps) {\n const overallLatency = getOverallLatency(spans);\n const overallStartTime = spans[0]?.startTime \|\| '';\n\n return (\n <>\n {spans.map((span, idx) => (\n <SpanRow\n key={span.id}\n span={span}\n depth={0}\n isLastChild={idx === spans.length - 1}\n guides={[]}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n {...rowProps}\n />\n ))}\n </>\n );\n}\n\ntype SpanRowProps = SharedRowProps & {\n span: UISpan;\n depth: number;\n isLastChild: boolean;\n guides: boolean[];\n overallLatency: number;\n overallStartTime: string;\n};\n\nfunction SpanRow({\n span,\n depth,\n isLastChild,\n guides,\n overallLatency,\n overallStartTime,\n renderRow,\n onSpanClick,\n selectedSpanId,\n revealSpanId,\n fadedTypes,\n featuredSpanIds,\n expandedSpanIds,\n setExpandedSpanIds,\n}: SpanRowProps) {\n const hasChildren = Boolean(span.spans && span.spans.length > 0);\n const numOfChildren = span.spans ? span.spans.length : 0;\n const allDescendantIds = getSpanDescendantIds(span);\n const isRootSpan = depth === 0;\n const spanUI = getSpanTypeUi(span?.type);\n const isExpanded = expandedSpanIds ? expandedSpanIds.includes(span.id) : false;\n const isFadedBySearch = featuredSpanIds && featuredSpanIds.length > 0 ? !featuredSpanIds.includes(span.id) : false;\n const isFadedByType = fadedTypes && fadedTypes.length > 0 ? fadedTypes.includes(spanUI?.typePrefix \|\| '') : false;\n const isFaded = isFadedByType \|\| isFadedBySearch;\n\n useEffect(() => {\n if (!featuredSpanIds \|\| allDescendantIds.length === 0) return;\n if (isExpanded) return;\n const hasFeaturedDescendant = allDescendantIds.some(id => featuredSpanIds.includes(id));\n if (hasFeaturedDescendant && setExpandedSpanIds) {\n setExpandedSpanIds(prev => (!prev \|\| prev.includes(span.id) ? (prev ?? [span.id]) : [...prev, span.id]));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [featuredSpanIds, allDescendantIds]);\n\n const childGuides = isRootSpan ? [] : [...guides, !isLastChild];\n\n const toggleChildren = () => {\n if (!setExpandedSpanIds) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n return isExpanded ? prev.filter(id => id !== span.id) : [...prev, span.id];\n });\n };\n\n const ctx: SpanRowContext = {\n span,\n spanUI,\n depth,\n isRootSpan,\n isLastChild,\n guides,\n isExpanded,\n isSelected: selectedSpanId === span.id,\n isFaded,\n isRevealed: revealSpanId === span.id,\n overallLatency,\n overallStartTime,\n onSpanClick,\n expansion: {\n hasChildren,\n numOfChildren,\n toggleChildren,\n },\n };\n\n return (\n <Fragment>\n {renderRow(ctx)}\n {hasChildren &&\n isExpanded &&\n span.spans?.map((childSpan, idx, array) => (\n <SpanRow\n key={childSpan.id}\n span={childSpan}\n depth={depth + 1}\n isLastChild={idx === array.length - 1}\n guides={childGuides}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n renderRow={renderRow}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n revealSpanId={revealSpanId}\n fadedTypes={fadedTypes}\n featuredSpanIds={featuredSpanIds}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n />\n ))}\n </Fragment>\n );\n}\n"],"names":["Fragment"],"mappings":"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"}

package/dist/domains/traces/components/span-summary-description.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
-const dataPanel = require('../../../data-panel-BkfjzriB.cjs');
+const dataPanel = require('../../../data-panel-DGNV14pm.cjs');
 const utils_truncateString = require('../../../utils/truncate-string.cjs.js');
 const utils_dateFormat = require('../../../utils/date-format.cjs.js');
 const utils_duration = require('../../../utils/duration.cjs.js');

package/dist/domains/traces/components/span-summary-description.es.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { CalendarClockIcon, TimerIcon, HashIcon } from 'lucide-react';
 import { getSpanDurationMs } from '../utils/span-utils.es.js';
-import { D as DataPanel } from '../../../data-panel-CMkR6Avv.js';
+import { D as DataPanel } from '../../../data-panel-DjtnX70w.js';
 import { truncateString } from '../../../utils/truncate-string.es.js';
 import { formatDate, formatTimestampPrecise } from '../../../utils/date-format.es.js';
 import { formatDurationPrecise } from '../../../utils/duration.es.js';

package/dist/domains/traces/components/span-timeline-row.cjs.js CHANGED Viewed

@@ -18,9 +18,9 @@ function SpanTimelineRow({ ctx }) {
   const {
     span,
     spanUI,
-    depth,
     isRootSpan,
     isLastChild,
+    guides,
     isExpanded,
     isSelected,
     isFaded,
@@ -53,40 +53,46 @@ function SpanTimelineRow({ ctx }) {
         }
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-stretch", style: { paddingLeft: `${depth}rem` }, children: [
-          !isRootSpan && /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_timelineStructureSign.TimelineStructureSign, { isLastChild }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-stretch pl-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            domains_traces_components_timelineStructureSign.TimelineStructureSign,
+            {
+              guides,
+              isRootSpan,
+              isLastChild,
+              hasStem: expansion.hasChildren && isExpanded,
+              dot: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  title: spanUI?.label,
+                  style: { backgroundColor: spanUI?.color },
+                  className: "size-2 shrink-0 rounded-full"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
               className: utils_cn.cn(
                 "text-foreground",
-                "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left",
+                "flex min-w-0 flex-1 cursor-pointer items-center rounded-md pr-2 pl-1.5 text-left",
                 primitives_transitions.focusRingInset
               ),
-              children: [
-                spanUI?.color && /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    "aria-hidden": true,
-                    title: spanUI.label,
-                    style: { backgroundColor: spanUI.color },
-                    className: "inline-block size-2 shrink-0 rounded-full"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Txt.Txt,
-                  {
-                    as: "span",
-                    variant: "caption",
-                    "data-highlight": span.matchedInPayloadOnly ? void 0 : "",
-                    "data-highlight-indirect": span.matchedInPayloadOnly ? "" : void 0,
-                    title: span.matchedInPayloadOnly ? "Matches your search in this span’s details" : void 0,
-                    className: "min-w-0 truncate",
-                    children: span.name
-                  }
-                )
-              ]
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                Txt.Txt,
+                {
+                  as: "span",
+                  variant: "caption",
+                  "data-highlight": span.matchedInPayloadOnly ? void 0 : "",
+                  "data-highlight-indirect": span.matchedInPayloadOnly ? "" : void 0,
+                  title: span.matchedInPayloadOnly ? "Matches your search in this span’s details" : void 0,
+                  className: "min-w-0 truncate",
+                  children: span.name
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-7 shrink-0 items-center justify-center", children: expansion.hasChildren && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/domains/traces/components/span-timeline-row.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"span-timeline-row.cjs.js","sources":["../../../../src/domains/traces/components/span-timeline-row.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { focusRing, focusRingInset } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\nexport type SpanTimelineRowProps = {\n ctx: SpanRowContext;\n};\n\n/*\n One row of `TraceSpanTimeline`: compact single-line name cell plus a bar on the\n * shared trace time axis. The row spans both grid columns (subgrid) so hover and\n * selection cover the name and the bar together.\n /\nexport function SpanTimelineRow({ ctx }: SpanTimelineRowProps) {\n const {\n span,\n spanUI,\n ~~depth~~,\n ~~isRootSpan~~,\n ~~isLastChild~~,\n isExpanded,\n isSelected,\n isFaded,\n isRevealed,\n overallLatency,\n overallStartTime,\n onSpanClick,\n expansion,\n } = ctx;\n const rowRef = useRef<HTMLDivElement>(null);\n const shouldScrollIntoView = isSelected \|\| isRevealed;\n\n // Nested rows mount late, once expansion opens, so scroll on mount as well as on change.\n useEffect(() => {\n if (!shouldScrollIntoView) return;\n // A highlighted span is centered so it never sits at the panel's edge; a clicked one only moves if hidden.\n rowRef.current?.scrollIntoView({ block: isRevealed ? 'center' : 'nearest', behavior: 'smooth' });\n }, [shouldScrollIntoView, isRevealed]);\n\n const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n const toggleLabel = isExpanded\n ? `Collapse children (${expansion.numOfChildren})`\n : `Expand children (${expansion.numOfChildren})`;\n\n return (\n <div\n ref={rowRef}\n aria-label={`View details for span ${span.name}`}\n aria-selected={isSelected}\n // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n onClick={() => onSpanClick?.(span.id)}\n className={cn(\n 'col-span-2 grid h-7 cursor-pointer grid-cols-subgrid items-stretch rounded-md opacity-80 hover:bg-fill-subtle',\n {\n 'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n 'bg-fill-hover': isSelected,\n },\n )}\n >\n <div className=\"flex min-w-0 items-stretch\" ~~style~~={{ ~~paddingLeft: `$~~{~~depth~~}~~rem` }}>\~~n {~~!isRootSpan~~ && <~~TimelineStructureSign isLastChild~~={~~isLastChild~~} />}\n\n <button\n type=\"button\"\n className={cn(\n 'text-foreground',\n 'flex min-w-0 flex-1 cursor-pointer items-center ~~gap-1.5~~ rounded-md px-2 text-left',\n focusRingInset,\n )}\n >\n ~~{spanUI?.color && (\n~~ <span\n aria-hidden\n title={spanUI.label}\n style={{ backgroundColor: spanUI.color }}\n className=\"inline-block size-2 shrink-0 rounded-full\"\n />\n )}\n <Txt\n as=\"span\"\n variant=\"caption\"\n data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n className=\"min-w-0 truncate\"\n >\n {span.name}\n </Txt>\n </button>\n\n {/ Slot is always present so names stay aligned whether or not the span has children. */}\n <div className=\"flex w-7 shrink-0 items-center justify-center\">\n {expansion.hasChildren && (\n <button\n type=\"button\"\n onClick={e => {\n e.stopPropagation();\n expansion.toggleChildren();\n }}\n aria-label={toggleLabel}\n aria-expanded={isExpanded}\n className={cn(\n 'flex size-5 cursor-pointer items-center justify-center rounded-md',\n 'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n focusRing,\n )}\n >\n {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n </button>\n )}\n </div>\n </div>\n\n <HoverCard>\n <HoverCardTrigger\n render={<div />}\n className=\"grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2\"\n >\n <div className=\"relative h-4 w-full rounded-sm bg-fill-subtle\">\n <div\n data-testid=\"span-timeline-bar\"\n className=\"absolute inset-y-0 rounded-sm\"\n style={{\n left: `${leftPercent}%`,\n width: widthPercent ? `${widthPercent}%` : '2px',\n backgroundColor: spanUI?.color,\n }}\n />\n </div>\n <Txt as=\"p\" variant=\"meta\" font=\"mono\" tone=\"muted\" className=\"w-12 text-right\">\n {formatDurationPrecise(span.latency)}\n </Txt>\n </HoverCardTrigger>\n <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n </HoverCard>\n </div>\n );\n}\n"],"names":["useRef","useEffect","getSpanTimingLayout","jsxs","cn","jsx","TimelineStructureSign","focusRingInset","Txt","focusRing","ChevronDownIcon","ChevronRightIcon","HoverCard","HoverCardTrigger","formatDurationPrecise","SpanTimingHoverCard"],"mappings":";;;;;;;;;;;;;;;;AAqBO,SAAS,eAAA,CAAgB,EAAE,GAAA,EAAI,EAAyB;AAC7D,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,MAAA;AAAA,IACA,~~KAAA~~;AAAA,IACA,~~UAAA~~;AAAA,IACA,~~WAAA~~;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF,GAAI,GAAA;AACJ,EAAA,MAAM,MAAA,GAASA,aAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,uBAAuB,UAAA,IAAc,UAAA;AAG3C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,oBAAA,EAAsB;AAE3B,IAAA,MAAA,CAAO,OAAA,EAAS,eAAe,EAAE,KAAA,EAAO,aAAa,QAAA,GAAW,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,CAAA;AAAA,EACjG,CAAA,EAAG,CAAC,oBAAA,EAAsB,UAAU,CAAC,CAAA;AAErC,EAAA,MAAM,EAAE,cAAc,WAAA,EAAa,YAAA,KAAiBC,mDAAA,CAAoB,IAAA,EAAM,gBAAgB,gBAAgB,CAAA;AAC9G,EAAA,MAAM,WAAA,GAAc,aAChB,CAAA,mBAAA,EAAsB,SAAA,CAAU,aAAa,CAAA,CAAA,CAAA,GAC7C,CAAA,iBAAA,EAAoB,UAAU,aAAa,CAAA,CAAA,CAAA;AAE/C,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,eAAA,EAAe,UAAA;AAAA,MAEf,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,MACpC,SAAA,EAAWC,WAAA;AAAA,QACT,+GAAA;AAAA,QACA;AAAA,UACE,2EAAA,EAA6E,OAAA;AAAA,UAC7E,eAAA,EAAiB;AAAA;AACnB,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,~~4BAAA~~,~~EAA6B~~,~~KAAA,EAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAK,CAAA,GAAA,CAAA,EAAM,EAC7E,~~QAAA,EAAA;AAAA,~~UAAA~~,~~CAAC,UAAA,oBAAcE,~~cAAA~~,CAACC,qEAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA~~;AAAA,~~0BAEjEH~~,~~eAAA~~;AAAA,~~YAAC,QAAA;AAAA,~~YAAA;AAAA,cACC,~~IAAA,EAAK,QAAA~~;AAAA,~~cACL~~,~~SAAA,EAAWC,WAAA~~;AAAA,~~gBACT~~,~~iBAAA~~;AAAA,~~gBACA~~,~~mFAAA;AAAA~~,~~gBACAG;AAAA~~,~~eACF;AAAA~~,~~cAEC~~,~~QAAA~~,~~EAAA~~;AAAA,~~gBAAA~~,~~MAAA~~,~~EAAQ~~,~~KAAA,oBACPF,~~cAAA;AAAA,~~kBAAC~~,MAAA;AAAA,~~kBAAA~~;AAAA,~~oBACC~~,aAAA,EAAW,IAAA;AAAA,~~oBACX~~,OAAO,MAAA,~~CAAO~~,KAAA;AAAA,~~oBACd~~,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,~~CAAO~~,KAAA,EAAM;AAAA,~~oBACvC~~,SAAA,EAAU;AAAA;AAAA,~~iBACZ~~;AAAA,~~gCAEFA~~,cAAA;AAAA,~~kBAACG~~,OAAA;AAAA,~~kBAAA~~;AAAA,~~oBACC~~,EAAA,EAAG,MAAA;AAAA,~~oBACH~~,OAAA,EAAQ,SAAA;AAAA,~~oBACR~~,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,~~oBACxD~~,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,~~oBAC1D~~,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,~~oBAClF~~,SAAA,EAAU,kBAAA;AAAA,~~oBAET~~,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR;AAAA~~;AAAA~~,WACF;AAAA,0BAGAH,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+CAAA,EACZ,oBAAU,WAAA,oBACTA,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,SAAS,CAAA,CAAA,KAAK;AACZ,gBAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,gBAAA,SAAA,CAAU,cAAA,EAAe;AAAA,cAC3B,CAAA;AAAA,cACA,YAAA,EAAY,WAAA;AAAA,cACZ,eAAA,EAAe,UAAA;AAAA,cACf,SAAA,EAAWD,WAAA;AAAA,gBACT,mEAAA;AAAA,gBACA,2EAAA;AAAA,gBACAK;AAAA,eACF;AAAA,cAEC,QAAA,EAAA,UAAA,mBAAaJ,cAAA,CAACK,2BAAA,EAAA,EAAgB,CAAA,kCAAMC,4BAAA,EAAA,EAAiB;AAAA;AAAA,WACxD,EAEJ;AAAA,SAAA,EACF,CAAA;AAAA,wCAECC,mBAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAAT,eAAA;AAAA,YAACU,0BAAA;AAAA,YAAA;AAAA,cACC,MAAA,iCAAS,KAAA,EAAA,EAAI,CAAA;AAAA,cACb,SAAA,EAAU,iFAAA;AAAA,cAEV,QAAA,EAAA;AAAA,gCAAAR,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,+CAAA,EACb,QAAA,kBAAAA,cAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,aAAA,EAAY,mBAAA;AAAA,oBACZ,SAAA,EAAU,+BAAA;AAAA,oBACV,KAAA,EAAO;AAAA,sBACL,IAAA,EAAM,GAAG,WAAW,CAAA,CAAA,CAAA;AAAA,sBACpB,KAAA,EAAO,YAAA,GAAe,CAAA,EAAG,YAAY,CAAA,CAAA,CAAA,GAAM,KAAA;AAAA,sBAC3C,iBAAiB,MAAA,EAAQ;AAAA;AAC3B;AAAA,iBACF,EACF,CAAA;AAAA,gCACAA,cAAA,CAACG,OAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,SAAQ,MAAA,EAAO,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,SAAQ,SAAA,EAAU,iBAAA,EAC3D,QAAA,EAAAM,oCAAA,CAAsB,IAAA,CAAK,OAAO,CAAA,EACrC;AAAA;AAAA;AAAA,WACF;AAAA,0BACAT,cAAA,CAACU,iEAAA,EAAA,EAAoB,IAAA,EAAY,YAAA,EAA4B;AAAA,SAAA,EAC/D;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
1	+ {"version":3,"file":"span-timeline-row.cjs.js","sources":["../../../../src/domains/traces/components/span-timeline-row.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { focusRing, focusRingInset } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\nexport type SpanTimelineRowProps = {\n ctx: SpanRowContext;\n};\n\n/*\n One row of `TraceSpanTimeline`: compact single-line name cell plus a bar on the\n * shared trace time axis. The row spans both grid columns (subgrid) so hover and\n * selection cover the name and the bar together.\n /\nexport function SpanTimelineRow({ ctx }: SpanTimelineRowProps) {\n const {\n span,\n spanUI,\n isRootSpan,\n isLastChild,\n guides,\n isExpanded,\n isSelected,\n isFaded,\n isRevealed,\n overallLatency,\n overallStartTime,\n onSpanClick,\n expansion,\n } = ctx;\n const rowRef = useRef<HTMLDivElement>(null);\n const shouldScrollIntoView = isSelected \|\| isRevealed;\n\n // Nested rows mount late, once expansion opens, so scroll on mount as well as on change.\n useEffect(() => {\n if (!shouldScrollIntoView) return;\n // A highlighted span is centered so it never sits at the panel's edge; a clicked one only moves if hidden.\n rowRef.current?.scrollIntoView({ block: isRevealed ? 'center' : 'nearest', behavior: 'smooth' });\n }, [shouldScrollIntoView, isRevealed]);\n\n const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n const toggleLabel = isExpanded\n ? `Collapse children (${expansion.numOfChildren})`\n : `Expand children (${expansion.numOfChildren})`;\n\n return (\n <div\n ref={rowRef}\n aria-label={`View details for span ${span.name}`}\n aria-selected={isSelected}\n // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n onClick={() => onSpanClick?.(span.id)}\n className={cn(\n 'col-span-2 grid h-7 cursor-pointer grid-cols-subgrid items-stretch rounded-md opacity-80 hover:bg-fill-subtle',\n {\n 'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n 'bg-fill-hover': isSelected,\n },\n )}\n >\n <div className=\"flex min-w-0 items-stretch pl-1\">\n <TimelineStructureSign\n guides={guides}\n isRootSpan={isRootSpan}\n isLastChild={isLastChild}\n hasStem={expansion.hasChildren && isExpanded}\n dot={\n <span\n aria-hidden\n title={spanUI?.label}\n style={{ backgroundColor: spanUI?.color }}\n className=\"size-2 shrink-0 rounded-full\"\n />\n }\n />\n\n <button\n type=\"button\"\n className={cn(\n 'text-foreground',\n 'flex min-w-0 flex-1 cursor-pointer items-center rounded-md pr-2 pl-1.5 text-left',\n focusRingInset,\n )}\n >\n <Txt\n as=\"span\"\n variant=\"caption\"\n data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n className=\"min-w-0 truncate\"\n >\n {span.name}\n </Txt>\n </button>\n\n {/ Slot is always present so names stay aligned whether or not the span has children. */}\n <div className=\"flex w-7 shrink-0 items-center justify-center\">\n {expansion.hasChildren && (\n <button\n type=\"button\"\n onClick={e => {\n e.stopPropagation();\n expansion.toggleChildren();\n }}\n aria-label={toggleLabel}\n aria-expanded={isExpanded}\n className={cn(\n 'flex size-5 cursor-pointer items-center justify-center rounded-md',\n 'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n focusRing,\n )}\n >\n {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n </button>\n )}\n </div>\n </div>\n\n <HoverCard>\n <HoverCardTrigger\n render={<div />}\n className=\"grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2\"\n >\n <div className=\"relative h-4 w-full rounded-sm bg-fill-subtle\">\n <div\n data-testid=\"span-timeline-bar\"\n className=\"absolute inset-y-0 rounded-sm\"\n style={{\n left: `${leftPercent}%`,\n width: widthPercent ? `${widthPercent}%` : '2px',\n backgroundColor: spanUI?.color,\n }}\n />\n </div>\n <Txt as=\"p\" variant=\"meta\" font=\"mono\" tone=\"muted\" className=\"w-12 text-right\">\n {formatDurationPrecise(span.latency)}\n </Txt>\n </HoverCardTrigger>\n <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n </HoverCard>\n </div>\n );\n}\n"],"names":["useRef","useEffect","getSpanTimingLayout","jsxs","cn","jsx","TimelineStructureSign","focusRingInset","Txt","focusRing","ChevronDownIcon","ChevronRightIcon","HoverCard","HoverCardTrigger","formatDurationPrecise","SpanTimingHoverCard"],"mappings":"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"}

package/dist/domains/traces/components/span-timeline-row.es.js CHANGED Viewed

@@ -14,9 +14,9 @@ function SpanTimelineRow({ ctx }) {
   const {
     span,
     spanUI,
-    depth,
     isRootSpan,
     isLastChild,
+    guides,
     isExpanded,
     isSelected,
     isFaded,
@@ -49,40 +49,46 @@ function SpanTimelineRow({ ctx }) {
         }
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-stretch", style: { paddingLeft: `${depth}rem` }, children: [
-          !isRootSpan && /* @__PURE__ */ jsx(TimelineStructureSign, { isLastChild }),
-          /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-stretch pl-1", children: [
+          /* @__PURE__ */ jsx(
+            TimelineStructureSign,
+            {
+              guides,
+              isRootSpan,
+              isLastChild,
+              hasStem: expansion.hasChildren && isExpanded,
+              dot: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  title: spanUI?.label,
+                  style: { backgroundColor: spanUI?.color },
+                  className: "size-2 shrink-0 rounded-full"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               className: cn(
                 "text-foreground",
-                "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left",
+                "flex min-w-0 flex-1 cursor-pointer items-center rounded-md pr-2 pl-1.5 text-left",
                 focusRingInset
               ),
-              children: [
-                spanUI?.color && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    "aria-hidden": true,
-                    title: spanUI.label,
-                    style: { backgroundColor: spanUI.color },
-                    className: "inline-block size-2 shrink-0 rounded-full"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Txt,
-                  {
-                    as: "span",
-                    variant: "caption",
-                    "data-highlight": span.matchedInPayloadOnly ? void 0 : "",
-                    "data-highlight-indirect": span.matchedInPayloadOnly ? "" : void 0,
-                    title: span.matchedInPayloadOnly ? "Matches your search in this span’s details" : void 0,
-                    className: "min-w-0 truncate",
-                    children: span.name
-                  }
-                )
-              ]
+              children: /* @__PURE__ */ jsx(
+                Txt,
+                {
+                  as: "span",
+                  variant: "caption",
+                  "data-highlight": span.matchedInPayloadOnly ? void 0 : "",
+                  "data-highlight-indirect": span.matchedInPayloadOnly ? "" : void 0,
+                  title: span.matchedInPayloadOnly ? "Matches your search in this span’s details" : void 0,
+                  className: "min-w-0 truncate",
+                  children: span.name
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsx("div", { className: "flex w-7 shrink-0 items-center justify-center", children: expansion.hasChildren && /* @__PURE__ */ jsx(

package/dist/domains/traces/components/span-timeline-row.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"span-timeline-row.es.js","sources":["../../../../src/domains/traces/components/span-timeline-row.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { focusRing, focusRingInset } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\nexport type SpanTimelineRowProps = {\n ctx: SpanRowContext;\n};\n\n/*\n One row of `TraceSpanTimeline`: compact single-line name cell plus a bar on the\n * shared trace time axis. The row spans both grid columns (subgrid) so hover and\n * selection cover the name and the bar together.\n /\nexport function SpanTimelineRow({ ctx }: SpanTimelineRowProps) {\n const {\n span,\n spanUI,\n ~~depth~~,\n ~~isRootSpan~~,\n ~~isLastChild~~,\n isExpanded,\n isSelected,\n isFaded,\n isRevealed,\n overallLatency,\n overallStartTime,\n onSpanClick,\n expansion,\n } = ctx;\n const rowRef = useRef<HTMLDivElement>(null);\n const shouldScrollIntoView = isSelected \|\| isRevealed;\n\n // Nested rows mount late, once expansion opens, so scroll on mount as well as on change.\n useEffect(() => {\n if (!shouldScrollIntoView) return;\n // A highlighted span is centered so it never sits at the panel's edge; a clicked one only moves if hidden.\n rowRef.current?.scrollIntoView({ block: isRevealed ? 'center' : 'nearest', behavior: 'smooth' });\n }, [shouldScrollIntoView, isRevealed]);\n\n const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n const toggleLabel = isExpanded\n ? `Collapse children (${expansion.numOfChildren})`\n : `Expand children (${expansion.numOfChildren})`;\n\n return (\n <div\n ref={rowRef}\n aria-label={`View details for span ${span.name}`}\n aria-selected={isSelected}\n // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n onClick={() => onSpanClick?.(span.id)}\n className={cn(\n 'col-span-2 grid h-7 cursor-pointer grid-cols-subgrid items-stretch rounded-md opacity-80 hover:bg-fill-subtle',\n {\n 'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n 'bg-fill-hover': isSelected,\n },\n )}\n >\n <div className=\"flex min-w-0 items-stretch\" ~~style~~={{ ~~paddingLeft: `$~~{~~depth~~}~~rem` }}>\~~n {~~!isRootSpan~~ && <~~TimelineStructureSign isLastChild~~={~~isLastChild~~} />}\n\n <button\n type=\"button\"\n className={cn(\n 'text-foreground',\n 'flex min-w-0 flex-1 cursor-pointer items-center ~~gap-1.5~~ rounded-md px-2 text-left',\n focusRingInset,\n )}\n >\n ~~{spanUI?.color && (\n~~ <span\n aria-hidden\n title={spanUI.label}\n style={{ backgroundColor: spanUI.color }}\n className=\"inline-block size-2 shrink-0 rounded-full\"\n />\n )}\n <Txt\n as=\"span\"\n variant=\"caption\"\n data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n className=\"min-w-0 truncate\"\n >\n {span.name}\n </Txt>\n </button>\n\n {/ Slot is always present so names stay aligned whether or not the span has children. */}\n <div className=\"flex w-7 shrink-0 items-center justify-center\">\n {expansion.hasChildren && (\n <button\n type=\"button\"\n onClick={e => {\n e.stopPropagation();\n expansion.toggleChildren();\n }}\n aria-label={toggleLabel}\n aria-expanded={isExpanded}\n className={cn(\n 'flex size-5 cursor-pointer items-center justify-center rounded-md',\n 'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n focusRing,\n )}\n >\n {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n </button>\n )}\n </div>\n </div>\n\n <HoverCard>\n <HoverCardTrigger\n render={<div />}\n className=\"grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2\"\n >\n <div className=\"relative h-4 w-full rounded-sm bg-fill-subtle\">\n <div\n data-testid=\"span-timeline-bar\"\n className=\"absolute inset-y-0 rounded-sm\"\n style={{\n left: `${leftPercent}%`,\n width: widthPercent ? `${widthPercent}%` : '2px',\n backgroundColor: spanUI?.color,\n }}\n />\n </div>\n <Txt as=\"p\" variant=\"meta\" font=\"mono\" tone=\"muted\" className=\"w-12 text-right\">\n {formatDurationPrecise(span.latency)}\n </Txt>\n </HoverCardTrigger>\n <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n </HoverCard>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAqBO,SAAS,eAAA,CAAgB,EAAE,GAAA,EAAI,EAAyB;AAC7D,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,MAAA;AAAA,IACA,~~KAAA~~;AAAA,IACA,~~UAAA~~;AAAA,IACA,~~WAAA~~;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF,GAAI,GAAA;AACJ,EAAA,MAAM,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,uBAAuB,UAAA,IAAc,UAAA;AAG3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,oBAAA,EAAsB;AAE3B,IAAA,MAAA,CAAO,OAAA,EAAS,eAAe,EAAE,KAAA,EAAO,aAAa,QAAA,GAAW,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,CAAA;AAAA,EACjG,CAAA,EAAG,CAAC,oBAAA,EAAsB,UAAU,CAAC,CAAA;AAErC,EAAA,MAAM,EAAE,cAAc,WAAA,EAAa,YAAA,KAAiB,mBAAA,CAAoB,IAAA,EAAM,gBAAgB,gBAAgB,CAAA;AAC9G,EAAA,MAAM,WAAA,GAAc,aAChB,CAAA,mBAAA,EAAsB,SAAA,CAAU,aAAa,CAAA,CAAA,CAAA,GAC7C,CAAA,iBAAA,EAAoB,UAAU,aAAa,CAAA,CAAA,CAAA;AAE/C,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,eAAA,EAAe,UAAA;AAAA,MAEf,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,MACpC,SAAA,EAAW,EAAA;AAAA,QACT,+GAAA;AAAA,QACA;AAAA,UACE,2EAAA,EAA6E,OAAA;AAAA,UAC7E,eAAA,EAAiB;AAAA;AACnB,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,~~4BAAA~~,~~EAA6B~~,~~KAAA,EAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAK,CAAA,GAAA,CAAA,EAAM,EAC7E,~~QAAA,EAAA;AAAA,~~UAAA~~,~~CAAC,UAAA,oBAAc,~~GAAA~~,CAAC,qBAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA~~;AAAA,~~0BAEjE,IAAA;AAAA,~~YAAC,~~QAAA~~;AAAA,YAAA;AAAA,cACC,~~IAAA,EAAK,QAAA~~;AAAA,~~cACL~~,~~SAAA,EAAW,EAAA~~;AAAA,~~gBACT~~,~~iBAAA~~;AAAA,~~gBACA~~,~~mFAAA;AAAA~~,~~gBACA;AAAA~~,~~eACF;AAAA~~,~~cAEC~~,~~QAAA~~,~~EAAA~~;AAAA,~~gBAAA~~,~~MAAA~~,~~EAAQ~~,~~KAAA,oBACP,~~GAAA;AAAA,~~kBAAC~~,MAAA;AAAA,~~kBAAA~~;AAAA,~~oBACC~~,aAAA,EAAW,IAAA;AAAA,~~oBACX~~,OAAO,MAAA,~~CAAO~~,KAAA;AAAA,~~oBACd~~,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,~~CAAO~~,KAAA,EAAM;AAAA,~~oBACvC~~,SAAA,EAAU;AAAA;AAAA,~~iBACZ~~;AAAA,~~gCAEF~~,GAAA;AAAA,~~kBAAC~~,~~GAAA~~;AAAA,kBAAA;AAAA,~~oBACC~~,EAAA,EAAG,MAAA;AAAA,~~oBACH~~,OAAA,EAAQ,SAAA;AAAA,~~oBACR~~,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,~~oBACxD~~,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,~~oBAC1D~~,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,~~oBAClF~~,SAAA,EAAU,kBAAA;AAAA,~~oBAET~~,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR;AAAA~~;AAAA~~,WACF;AAAA,0BAGA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+CAAA,EACZ,oBAAU,WAAA,oBACT,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,SAAS,CAAA,CAAA,KAAK;AACZ,gBAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,gBAAA,SAAA,CAAU,cAAA,EAAe;AAAA,cAC3B,CAAA;AAAA,cACA,YAAA,EAAY,WAAA;AAAA,cACZ,eAAA,EAAe,UAAA;AAAA,cACf,SAAA,EAAW,EAAA;AAAA,gBACT,mEAAA;AAAA,gBACA,2EAAA;AAAA,gBACA;AAAA,eACF;AAAA,cAEC,QAAA,EAAA,UAAA,mBAAa,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA,uBAAM,gBAAA,EAAA,EAAiB;AAAA;AAAA,WACxD,EAEJ;AAAA,SAAA,EACF,CAAA;AAAA,6BAEC,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,gBAAA;AAAA,YAAA;AAAA,cACC,MAAA,sBAAS,KAAA,EAAA,EAAI,CAAA;AAAA,cACb,SAAA,EAAU,iFAAA;AAAA,cAEV,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,+CAAA,EACb,QAAA,kBAAA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,aAAA,EAAY,mBAAA;AAAA,oBACZ,SAAA,EAAU,+BAAA;AAAA,oBACV,KAAA,EAAO;AAAA,sBACL,IAAA,EAAM,GAAG,WAAW,CAAA,CAAA,CAAA;AAAA,sBACpB,KAAA,EAAO,YAAA,GAAe,CAAA,EAAG,YAAY,CAAA,CAAA,CAAA,GAAM,KAAA;AAAA,sBAC3C,iBAAiB,MAAA,EAAQ;AAAA;AAC3B;AAAA,iBACF,EACF,CAAA;AAAA,gCACA,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,SAAQ,MAAA,EAAO,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,SAAQ,SAAA,EAAU,iBAAA,EAC3D,QAAA,EAAA,qBAAA,CAAsB,IAAA,CAAK,OAAO,CAAA,EACrC;AAAA;AAAA;AAAA,WACF;AAAA,0BACA,GAAA,CAAC,mBAAA,EAAA,EAAoB,IAAA,EAAY,YAAA,EAA4B;AAAA,SAAA,EAC/D;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
1	+ {"version":3,"file":"span-timeline-row.es.js","sources":["../../../../src/domains/traces/components/span-timeline-row.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { focusRing, focusRingInset } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\nexport type SpanTimelineRowProps = {\n ctx: SpanRowContext;\n};\n\n/*\n One row of `TraceSpanTimeline`: compact single-line name cell plus a bar on the\n * shared trace time axis. The row spans both grid columns (subgrid) so hover and\n * selection cover the name and the bar together.\n /\nexport function SpanTimelineRow({ ctx }: SpanTimelineRowProps) {\n const {\n span,\n spanUI,\n isRootSpan,\n isLastChild,\n guides,\n isExpanded,\n isSelected,\n isFaded,\n isRevealed,\n overallLatency,\n overallStartTime,\n onSpanClick,\n expansion,\n } = ctx;\n const rowRef = useRef<HTMLDivElement>(null);\n const shouldScrollIntoView = isSelected \|\| isRevealed;\n\n // Nested rows mount late, once expansion opens, so scroll on mount as well as on change.\n useEffect(() => {\n if (!shouldScrollIntoView) return;\n // A highlighted span is centered so it never sits at the panel's edge; a clicked one only moves if hidden.\n rowRef.current?.scrollIntoView({ block: isRevealed ? 'center' : 'nearest', behavior: 'smooth' });\n }, [shouldScrollIntoView, isRevealed]);\n\n const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n const toggleLabel = isExpanded\n ? `Collapse children (${expansion.numOfChildren})`\n : `Expand children (${expansion.numOfChildren})`;\n\n return (\n <div\n ref={rowRef}\n aria-label={`View details for span ${span.name}`}\n aria-selected={isSelected}\n // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n onClick={() => onSpanClick?.(span.id)}\n className={cn(\n 'col-span-2 grid h-7 cursor-pointer grid-cols-subgrid items-stretch rounded-md opacity-80 hover:bg-fill-subtle',\n {\n 'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n 'bg-fill-hover': isSelected,\n },\n )}\n >\n <div className=\"flex min-w-0 items-stretch pl-1\">\n <TimelineStructureSign\n guides={guides}\n isRootSpan={isRootSpan}\n isLastChild={isLastChild}\n hasStem={expansion.hasChildren && isExpanded}\n dot={\n <span\n aria-hidden\n title={spanUI?.label}\n style={{ backgroundColor: spanUI?.color }}\n className=\"size-2 shrink-0 rounded-full\"\n />\n }\n />\n\n <button\n type=\"button\"\n className={cn(\n 'text-foreground',\n 'flex min-w-0 flex-1 cursor-pointer items-center rounded-md pr-2 pl-1.5 text-left',\n focusRingInset,\n )}\n >\n <Txt\n as=\"span\"\n variant=\"caption\"\n data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n className=\"min-w-0 truncate\"\n >\n {span.name}\n </Txt>\n </button>\n\n {/ Slot is always present so names stay aligned whether or not the span has children. */}\n <div className=\"flex w-7 shrink-0 items-center justify-center\">\n {expansion.hasChildren && (\n <button\n type=\"button\"\n onClick={e => {\n e.stopPropagation();\n expansion.toggleChildren();\n }}\n aria-label={toggleLabel}\n aria-expanded={isExpanded}\n className={cn(\n 'flex size-5 cursor-pointer items-center justify-center rounded-md',\n 'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n focusRing,\n )}\n >\n {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n </button>\n )}\n </div>\n </div>\n\n <HoverCard>\n <HoverCardTrigger\n render={<div />}\n className=\"grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2\"\n >\n <div className=\"relative h-4 w-full rounded-sm bg-fill-subtle\">\n <div\n data-testid=\"span-timeline-bar\"\n className=\"absolute inset-y-0 rounded-sm\"\n style={{\n left: `${leftPercent}%`,\n width: widthPercent ? `${widthPercent}%` : '2px',\n backgroundColor: spanUI?.color,\n }}\n />\n </div>\n <Txt as=\"p\" variant=\"meta\" font=\"mono\" tone=\"muted\" className=\"w-12 text-right\">\n {formatDurationPrecise(span.latency)}\n </Txt>\n </HoverCardTrigger>\n <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n </HoverCard>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAqBO,SAAS,eAAA,CAAgB,EAAE,GAAA,EAAI,EAAyB;AAC7D,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,MAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF,GAAI,GAAA;AACJ,EAAA,MAAM,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,uBAAuB,UAAA,IAAc,UAAA;AAG3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,oBAAA,EAAsB;AAE3B,IAAA,MAAA,CAAO,OAAA,EAAS,eAAe,EAAE,KAAA,EAAO,aAAa,QAAA,GAAW,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,CAAA;AAAA,EACjG,CAAA,EAAG,CAAC,oBAAA,EAAsB,UAAU,CAAC,CAAA;AAErC,EAAA,MAAM,EAAE,cAAc,WAAA,EAAa,YAAA,KAAiB,mBAAA,CAAoB,IAAA,EAAM,gBAAgB,gBAAgB,CAAA;AAC9G,EAAA,MAAM,WAAA,GAAc,aAChB,CAAA,mBAAA,EAAsB,SAAA,CAAU,aAAa,CAAA,CAAA,CAAA,GAC7C,CAAA,iBAAA,EAAoB,UAAU,aAAa,CAAA,CAAA,CAAA;AAE/C,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,eAAA,EAAe,UAAA;AAAA,MAEf,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,MACpC,SAAA,EAAW,EAAA;AAAA,QACT,+GAAA;AAAA,QACA;AAAA,UACE,2EAAA,EAA6E,OAAA;AAAA,UAC7E,eAAA,EAAiB;AAAA;AACnB,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iCAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,qBAAA;AAAA,YAAA;AAAA,cACC,MAAA;AAAA,cACA,UAAA;AAAA,cACA,WAAA;AAAA,cACA,OAAA,EAAS,UAAU,WAAA,IAAe,UAAA;AAAA,cAClC,GAAA,kBACE,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,EAAQ,KAAA;AAAA,kBACf,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,EAAQ,KAAA,EAAM;AAAA,kBACxC,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA,WAEJ;AAAA,0BAEA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,SAAA,EAAW,EAAA;AAAA,gBACT,iBAAA;AAAA,gBACA,kFAAA;AAAA,gBACA;AAAA,eACF;AAAA,cAEA,QAAA,kBAAA,GAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAG,MAAA;AAAA,kBACH,OAAA,EAAQ,SAAA;AAAA,kBACR,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,kBACxD,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,kBAC1D,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,kBAClF,SAAA,EAAU,kBAAA;AAAA,kBAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR;AAAA,WACF;AAAA,0BAGA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+CAAA,EACZ,oBAAU,WAAA,oBACT,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,SAAS,CAAA,CAAA,KAAK;AACZ,gBAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,gBAAA,SAAA,CAAU,cAAA,EAAe;AAAA,cAC3B,CAAA;AAAA,cACA,YAAA,EAAY,WAAA;AAAA,cACZ,eAAA,EAAe,UAAA;AAAA,cACf,SAAA,EAAW,EAAA;AAAA,gBACT,mEAAA;AAAA,gBACA,2EAAA;AAAA,gBACA;AAAA,eACF;AAAA,cAEC,QAAA,EAAA,UAAA,mBAAa,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA,uBAAM,gBAAA,EAAA,EAAiB;AAAA;AAAA,WACxD,EAEJ;AAAA,SAAA,EACF,CAAA;AAAA,6BAEC,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,gBAAA;AAAA,YAAA;AAAA,cACC,MAAA,sBAAS,KAAA,EAAA,EAAI,CAAA;AAAA,cACb,SAAA,EAAU,iFAAA;AAAA,cAEV,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,+CAAA,EACb,QAAA,kBAAA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,aAAA,EAAY,mBAAA;AAAA,oBACZ,SAAA,EAAU,+BAAA;AAAA,oBACV,KAAA,EAAO;AAAA,sBACL,IAAA,EAAM,GAAG,WAAW,CAAA,CAAA,CAAA;AAAA,sBACpB,KAAA,EAAO,YAAA,GAAe,CAAA,EAAG,YAAY,CAAA,CAAA,CAAA,GAAM,KAAA;AAAA,sBAC3C,iBAAiB,MAAA,EAAQ;AAAA;AAC3B;AAAA,iBACF,EACF,CAAA;AAAA,gCACA,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,SAAQ,MAAA,EAAO,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,SAAQ,SAAA,EAAU,iBAAA,EAC3D,QAAA,EAAA,qBAAA,CAAsB,IAAA,CAAK,OAAO,CAAA,EACrC;AAAA;AAAA;AAAA,WACF;AAAA,0BACA,GAAA,CAAC,mBAAA,EAAA,EAAoB,IAAA,EAAY,YAAA,EAA4B;AAAA,SAAA,EAC/D;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/domains/traces/components/span-timing-hover-card.cjs.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
-const dataKeysAndValues = require('../../../data-keys-and-values-1lYi60YK.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-DBXIqeXt.cjs');
 const hoverCard = require('../../../hover-card-DVBz-iu-.cjs');
 const Txt = require('../../../Txt-CIS2G5Jx.cjs');
 const utils_cn = require('../../../cn-DlOJCxrS.cjs');

package/dist/domains/traces/components/span-timing-hover-card.es.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { D as DataKeysAndValues } from '../../../data-keys-and-values-CHpxKsfq.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-DHp6cHJo.js';
 import { a as HoverCardContent } from '../../../hover-card-CJ1fcJvo.js';
 import { T as Txt } from '../../../Txt-BtIGLRk1.js';
 import { c as cn } from '../../../cn-CQUhN5Jx.js';

package/dist/domains/traces/components/span-token-usage.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const domains_traces_components_spanTokenUsage_utils = require('./span-token-usage.utils.cjs.js');
-const dataKeysAndValues = require('../../../data-keys-and-values-1lYi60YK.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-DBXIqeXt.cjs');
 const Txt = require('../../../Txt-CIS2G5Jx.cjs');
 const utils_cn = require('../../../cn-DlOJCxrS.cjs');

package/dist/domains/traces/components/span-token-usage.es.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Fragment } from 'react';
 import { getTokenUsageView } from './span-token-usage.utils.es.js';
-import { D as DataKeysAndValues } from '../../../data-keys-and-values-CHpxKsfq.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-DHp6cHJo.js';
 import { T as Txt } from '../../../Txt-BtIGLRk1.js';
 import { c as cn } from '../../../cn-CQUhN5Jx.js';

package/dist/domains/traces/components/span-tree-rail.cjs.js ADDED Viewed

@@ -0,0 +1,50 @@
+'use strict';
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const jsxRuntime = require('react/jsx-runtime');
+const SPAN_TREE_INDENT = 24;
+const SPAN_TREE_PAD_Y = 4.5;
+const SPAN_TREE_LINE = 20;
+const BADGE_HALF = 10;
+const GAP = 2;
+const RADIUS = 8;
+const MID = SPAN_TREE_PAD_Y + SPAN_TREE_LINE / 2;
+const SPAN_TREE_META_GAP = 1;
+const railStyle = { color: "oklch(var(--fill-tint) 0 0)", opacity: 0.19 };
+function SpanTreeRail({ depth, guides, isLastChild, hasStem }) {
+  const x = (col) => col * SPAN_TREE_INDENT + SPAN_TREE_INDENT / 2 + 0.5;
+  const parts = [];
+  const vertical = (key, col, top, testId) => /* @__PURE__ */ jsxRuntime.jsx("line", { "data-testid": testId, x1: x(col), x2: x(col), y1: top, y2: "100%" }, key);
+  guides.forEach((show, col) => {
+    if (show) parts.push(vertical(`guide-${col}`, col, 0, "span-tree-guide"));
+  });
+  if (depth > 0) {
+    const cx = x(depth - 1);
+    const end = x(depth) - 0.5 - BADGE_HALF - GAP;
+    parts.push(
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: `M${cx} 0V${MID - RADIUS}Q${cx} ${MID} ${cx + RADIUS} ${MID}H${end}`, fill: "none" }, "elbow")
+    );
+    if (!isLastChild) parts.push(vertical("trunk", depth - 1, 0));
+  }
+  if (hasStem) parts.push(vertical("stem", depth, MID + BADGE_HALF + GAP));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      "aria-hidden": true,
+      className: "pointer-events-none absolute top-0 left-1 h-[calc(100%+1px)] w-full overflow-visible",
+      stroke: "currentColor",
+      strokeWidth: 1,
+      style: railStyle,
+      children: parts
+    }
+  );
+}
+exports.SPAN_TREE_INDENT = SPAN_TREE_INDENT;
+exports.SPAN_TREE_LINE = SPAN_TREE_LINE;
+exports.SPAN_TREE_META_GAP = SPAN_TREE_META_GAP;
+exports.SPAN_TREE_PAD_Y = SPAN_TREE_PAD_Y;
+exports.SpanTreeRail = SpanTreeRail;
+//# sourceMappingURL=span-tree-rail.cjs.js.map

package/dist/domains/traces/components/span-tree-rail.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"span-tree-rail.cjs.js","sources":["../../../../src/domains/traces/components/span-tree-rail.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\n/** Width of one nesting level; a row's badge sits centred in column `depth`. */\nexport const SPAN_TREE_INDENT = 24;\n/** Vertical padding of a tree row. */\nexport const SPAN_TREE_PAD_Y = 4.5;\n/** Height of the name line; the badge and the elbow centre on it. */\nexport const SPAN_TREE_LINE = 20;\n\nconst BADGE_HALF = 10;\nconst GAP = 2;\nconst RADIUS = 8;\nconst MID = SPAN_TREE_PAD_Y + SPAN_TREE_LINE / 2;\n\n/** Gap between the name line and the duration line; with the padding, rows land on whole pixels (46px). */\nexport const SPAN_TREE_META_GAP = 1;\n\n/**\n * `--border-strong` is the neutral tint at 19% alpha. Every line is drawn at full strength in one SVG and\n * the 19% is applied once to the whole rail, so a pixel two lines share (a join, a half-pixel end) is\n * painted once and never comes out brighter or darker than the line.\n */\nconst railStyle = { color: 'oklch(var(--fill-tint) 0 0)', opacity: 0.19 };\n\ntype SpanTreeRailProps = {\n depth: number;\n /** Per ancestor level (shallowest first): whether that level's connector continues past this row. */\n guides: boolean[];\n isLastChild?: boolean;\n /** Draw the line from this row's badge down to its children. */\n hasStem?: boolean;\n};\n\n/**\n * Tree connectors of one span row, drawn over the row's left edge: a guide per ancestor level that\n * continues, a rounded elbow from the parent's line into the badge, and a stem down to the children.\n * Vertical lines run 1px past the row to bridge the gap to the next one.\n */\nexport function SpanTreeRail({ depth, guides, isLastChild, hasStem }: SpanTreeRailProps) {\n // +0.5 centres a 1px stroke on a pixel column so vertical lines stay crisp.\n const x = (col: number) => col * SPAN_TREE_INDENT + SPAN_TREE_INDENT / 2 + 0.5;\n const parts: ReactNode[] = [];\n const vertical = (key: string, col: number, top: number, testId?: string) => (\n <line key={key} data-testid={testId} x1={x(col)} x2={x(col)} y1={top} y2=\"100%\" />\n );\n\n guides.forEach((show, col) => {\n if (show) parts.push(vertical(`guide-${col}`, col, 0, 'span-tree-guide'));\n });\n\n if (depth > 0) {\n const cx = x(depth - 1);\n const end = x(depth) - 0.5 - BADGE_HALF - GAP;\n // Rounded elbow from the top of the row into the badge; later siblings keep the trunk going.\n parts.push(\n <path key=\"elbow\" d={`M${cx} 0V${MID - RADIUS}Q${cx} ${MID} ${cx + RADIUS} ${MID}H${end}`} fill=\"none\" />,\n );\n if (!isLastChild) parts.push(vertical('trunk', depth - 1, 0));\n }\n\n if (hasStem) parts.push(vertical('stem', depth, MID + BADGE_HALF + GAP));\n\n return (\n <svg\n aria-hidden\n className=\"pointer-events-none absolute top-0 left-1 h-[calc(100%+1px)] w-full overflow-visible\"\n stroke=\"currentColor\"\n strokeWidth={1}\n style={railStyle}\n >\n {parts}\n </svg>\n );\n}\n"],"names":["jsx"],"mappings":";;;;;;AAGO,MAAM,gBAAA,GAAmB;AAEzB,MAAM,eAAA,GAAkB;AAExB,MAAM,cAAA,GAAiB;AAE9B,MAAM,UAAA,GAAa,EAAA;AACnB,MAAM,GAAA,GAAM,CAAA;AACZ,MAAM,MAAA,GAAS,CAAA;AACf,MAAM,GAAA,GAAM,kBAAkB,cAAA,GAAiB,CAAA;AAGxC,MAAM,kBAAA,GAAqB;AAOlC,MAAM,SAAA,GAAY,EAAE,KAAA,EAAO,6BAAA,EAA+B,SAAS,IAAA,EAAK;AAgBjE,SAAS,aAAa,EAAE,KAAA,EAAO,MAAA,EAAQ,WAAA,EAAa,SAAQ,EAAsB;AAEvF,EAAA,MAAM,IAAI,CAAC,GAAA,KAAgB,GAAA,GAAM,gBAAA,GAAmB,mBAAmB,CAAA,GAAI,GAAA;AAC3E,EAAA,MAAM,QAAqB,EAAC;AAC5B,EAAA,MAAM,QAAA,GAAW,CAAC,GAAA,EAAa,GAAA,EAAa,KAAa,MAAA,qBACvDA,cAAA,CAAC,MAAA,EAAA,EAAe,aAAA,EAAa,MAAA,EAAQ,EAAA,EAAI,EAAE,GAAG,CAAA,EAAG,IAAI,CAAA,CAAE,GAAG,GAAG,EAAA,EAAI,GAAA,EAAK,EAAA,EAAG,MAAA,EAAA,EAA9D,GAAqE,CAAA;AAGlF,EAAA,MAAA,CAAO,OAAA,CAAQ,CAAC,IAAA,EAAM,GAAA,KAAQ;AAC5B,IAAA,IAAI,IAAA,EAAM,KAAA,CAAM,IAAA,CAAK,QAAA,CAAS,CAAA,MAAA,EAAS,GAAG,CAAA,CAAA,EAAI,GAAA,EAAK,CAAA,EAAG,iBAAiB,CAAC,CAAA;AAAA,EAC1E,CAAC,CAAA;AAED,EAAA,IAAI,QAAQ,CAAA,EAAG;AACb,IAAA,MAAM,EAAA,GAAK,CAAA,CAAE,KAAA,GAAQ,CAAC,CAAA;AACtB,IAAA,MAAM,GAAA,GAAM,CAAA,CAAE,KAAK,CAAA,GAAI,MAAM,UAAA,GAAa,GAAA;AAE1C,IAAA,KAAA,CAAM,IAAA;AAAA,sBACJA,cAAA,CAAC,UAAiB,CAAA,EAAG,CAAA,CAAA,EAAI,EAAE,CAAA,GAAA,EAAM,GAAA,GAAM,MAAM,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA,EAAI,GAAG,CAAA,CAAA,EAAI,EAAA,GAAK,MAAM,CAAA,CAAA,EAAI,GAAG,IAAI,GAAG,CAAA,CAAA,EAAI,IAAA,EAAK,MAAA,EAAA,EAAtF,OAA6F;AAAA,KACzG;AACA,IAAA,IAAI,CAAC,aAAa,KAAA,CAAM,IAAA,CAAK,SAAS,OAAA,EAAS,KAAA,GAAQ,CAAA,EAAG,CAAC,CAAC,CAAA;AAAA,EAC9D;AAEA,EAAA,IAAI,OAAA,QAAe,IAAA,CAAK,QAAA,CAAS,QAAQ,KAAA,EAAO,GAAA,GAAM,UAAA,GAAa,GAAG,CAAC,CAAA;AAEvE,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAU,sFAAA;AAAA,MACV,MAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAa,CAAA;AAAA,MACb,KAAA,EAAO,SAAA;AAAA,MAEN,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;;;;;;;;"}

package/dist/domains/traces/components/span-tree-rail.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from '../../../src/domains/traces/components/span-tree-rail'
2	+ export {}

package/dist/domains/traces/components/span-tree-rail.es.js ADDED Viewed

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+const SPAN_TREE_INDENT = 24;
+const SPAN_TREE_PAD_Y = 4.5;
+const SPAN_TREE_LINE = 20;
+const BADGE_HALF = 10;
+const GAP = 2;
+const RADIUS = 8;
+const MID = SPAN_TREE_PAD_Y + SPAN_TREE_LINE / 2;
+const SPAN_TREE_META_GAP = 1;
+const railStyle = { color: "oklch(var(--fill-tint) 0 0)", opacity: 0.19 };
+function SpanTreeRail({ depth, guides, isLastChild, hasStem }) {
+  const x = (col) => col * SPAN_TREE_INDENT + SPAN_TREE_INDENT / 2 + 0.5;
+  const parts = [];
+  const vertical = (key, col, top, testId) => /* @__PURE__ */ jsx("line", { "data-testid": testId, x1: x(col), x2: x(col), y1: top, y2: "100%" }, key);
+  guides.forEach((show, col) => {
+    if (show) parts.push(vertical(`guide-${col}`, col, 0, "span-tree-guide"));
+  });
+  if (depth > 0) {
+    const cx = x(depth - 1);
+    const end = x(depth) - 0.5 - BADGE_HALF - GAP;
+    parts.push(
+      /* @__PURE__ */ jsx("path", { d: `M${cx} 0V${MID - RADIUS}Q${cx} ${MID} ${cx + RADIUS} ${MID}H${end}`, fill: "none" }, "elbow")
+    );
+    if (!isLastChild) parts.push(vertical("trunk", depth - 1, 0));
+  }
+  if (hasStem) parts.push(vertical("stem", depth, MID + BADGE_HALF + GAP));
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": true,
+      className: "pointer-events-none absolute top-0 left-1 h-[calc(100%+1px)] w-full overflow-visible",
+      stroke: "currentColor",
+      strokeWidth: 1,
+      style: railStyle,
+      children: parts
+    }
+  );
+}
+export { SPAN_TREE_INDENT, SPAN_TREE_LINE, SPAN_TREE_META_GAP, SPAN_TREE_PAD_Y, SpanTreeRail };
+//# sourceMappingURL=span-tree-rail.es.js.map

package/dist/domains/traces/components/span-tree-rail.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"span-tree-rail.es.js","sources":["../../../../src/domains/traces/components/span-tree-rail.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\n/** Width of one nesting level; a row's badge sits centred in column `depth`. */\nexport const SPAN_TREE_INDENT = 24;\n/** Vertical padding of a tree row. */\nexport const SPAN_TREE_PAD_Y = 4.5;\n/** Height of the name line; the badge and the elbow centre on it. */\nexport const SPAN_TREE_LINE = 20;\n\nconst BADGE_HALF = 10;\nconst GAP = 2;\nconst RADIUS = 8;\nconst MID = SPAN_TREE_PAD_Y + SPAN_TREE_LINE / 2;\n\n/** Gap between the name line and the duration line; with the padding, rows land on whole pixels (46px). */\nexport const SPAN_TREE_META_GAP = 1;\n\n/**\n * `--border-strong` is the neutral tint at 19% alpha. Every line is drawn at full strength in one SVG and\n * the 19% is applied once to the whole rail, so a pixel two lines share (a join, a half-pixel end) is\n * painted once and never comes out brighter or darker than the line.\n */\nconst railStyle = { color: 'oklch(var(--fill-tint) 0 0)', opacity: 0.19 };\n\ntype SpanTreeRailProps = {\n depth: number;\n /** Per ancestor level (shallowest first): whether that level's connector continues past this row. */\n guides: boolean[];\n isLastChild?: boolean;\n /** Draw the line from this row's badge down to its children. */\n hasStem?: boolean;\n};\n\n/**\n * Tree connectors of one span row, drawn over the row's left edge: a guide per ancestor level that\n * continues, a rounded elbow from the parent's line into the badge, and a stem down to the children.\n * Vertical lines run 1px past the row to bridge the gap to the next one.\n */\nexport function SpanTreeRail({ depth, guides, isLastChild, hasStem }: SpanTreeRailProps) {\n // +0.5 centres a 1px stroke on a pixel column so vertical lines stay crisp.\n const x = (col: number) => col * SPAN_TREE_INDENT + SPAN_TREE_INDENT / 2 + 0.5;\n const parts: ReactNode[] = [];\n const vertical = (key: string, col: number, top: number, testId?: string) => (\n <line key={key} data-testid={testId} x1={x(col)} x2={x(col)} y1={top} y2=\"100%\" />\n );\n\n guides.forEach((show, col) => {\n if (show) parts.push(vertical(`guide-${col}`, col, 0, 'span-tree-guide'));\n });\n\n if (depth > 0) {\n const cx = x(depth - 1);\n const end = x(depth) - 0.5 - BADGE_HALF - GAP;\n // Rounded elbow from the top of the row into the badge; later siblings keep the trunk going.\n parts.push(\n <path key=\"elbow\" d={`M${cx} 0V${MID - RADIUS}Q${cx} ${MID} ${cx + RADIUS} ${MID}H${end}`} fill=\"none\" />,\n );\n if (!isLastChild) parts.push(vertical('trunk', depth - 1, 0));\n }\n\n if (hasStem) parts.push(vertical('stem', depth, MID + BADGE_HALF + GAP));\n\n return (\n <svg\n aria-hidden\n className=\"pointer-events-none absolute top-0 left-1 h-[calc(100%+1px)] w-full overflow-visible\"\n stroke=\"currentColor\"\n strokeWidth={1}\n style={railStyle}\n >\n {parts}\n </svg>\n );\n}\n"],"names":[],"mappings":";;AAGO,MAAM,gBAAA,GAAmB;AAEzB,MAAM,eAAA,GAAkB;AAExB,MAAM,cAAA,GAAiB;AAE9B,MAAM,UAAA,GAAa,EAAA;AACnB,MAAM,GAAA,GAAM,CAAA;AACZ,MAAM,MAAA,GAAS,CAAA;AACf,MAAM,GAAA,GAAM,kBAAkB,cAAA,GAAiB,CAAA;AAGxC,MAAM,kBAAA,GAAqB;AAOlC,MAAM,SAAA,GAAY,EAAE,KAAA,EAAO,6BAAA,EAA+B,SAAS,IAAA,EAAK;AAgBjE,SAAS,aAAa,EAAE,KAAA,EAAO,MAAA,EAAQ,WAAA,EAAa,SAAQ,EAAsB;AAEvF,EAAA,MAAM,IAAI,CAAC,GAAA,KAAgB,GAAA,GAAM,gBAAA,GAAmB,mBAAmB,CAAA,GAAI,GAAA;AAC3E,EAAA,MAAM,QAAqB,EAAC;AAC5B,EAAA,MAAM,QAAA,GAAW,CAAC,GAAA,EAAa,GAAA,EAAa,KAAa,MAAA,qBACvD,GAAA,CAAC,MAAA,EAAA,EAAe,aAAA,EAAa,MAAA,EAAQ,EAAA,EAAI,EAAE,GAAG,CAAA,EAAG,IAAI,CAAA,CAAE,GAAG,GAAG,EAAA,EAAI,GAAA,EAAK,EAAA,EAAG,MAAA,EAAA,EAA9D,GAAqE,CAAA;AAGlF,EAAA,MAAA,CAAO,OAAA,CAAQ,CAAC,IAAA,EAAM,GAAA,KAAQ;AAC5B,IAAA,IAAI,IAAA,EAAM,KAAA,CAAM,IAAA,CAAK,QAAA,CAAS,CAAA,MAAA,EAAS,GAAG,CAAA,CAAA,EAAI,GAAA,EAAK,CAAA,EAAG,iBAAiB,CAAC,CAAA;AAAA,EAC1E,CAAC,CAAA;AAED,EAAA,IAAI,QAAQ,CAAA,EAAG;AACb,IAAA,MAAM,EAAA,GAAK,CAAA,CAAE,KAAA,GAAQ,CAAC,CAAA;AACtB,IAAA,MAAM,GAAA,GAAM,CAAA,CAAE,KAAK,CAAA,GAAI,MAAM,UAAA,GAAa,GAAA;AAE1C,IAAA,KAAA,CAAM,IAAA;AAAA,sBACJ,GAAA,CAAC,UAAiB,CAAA,EAAG,CAAA,CAAA,EAAI,EAAE,CAAA,GAAA,EAAM,GAAA,GAAM,MAAM,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA,EAAI,GAAG,CAAA,CAAA,EAAI,EAAA,GAAK,MAAM,CAAA,CAAA,EAAI,GAAG,IAAI,GAAG,CAAA,CAAA,EAAI,IAAA,EAAK,MAAA,EAAA,EAAtF,OAA6F;AAAA,KACzG;AACA,IAAA,IAAI,CAAC,aAAa,KAAA,CAAM,IAAA,CAAK,SAAS,OAAA,EAAS,KAAA,GAAQ,CAAA,EAAG,CAAC,CAAC,CAAA;AAAA,EAC9D;AAEA,EAAA,IAAI,OAAA,QAAe,IAAA,CAAK,QAAA,CAAS,QAAQ,KAAA,EAAO,GAAA,GAAM,UAAA,GAAa,GAAG,CAAC,CAAA;AAEvE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAU,sFAAA;AAAA,MACV,MAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAa,CAAA;AAAA,MACb,KAAA,EAAO,SAAA;AAAA,MAEN,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/domains/traces/components/span-tree-row.cjs.js CHANGED Viewed

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_components_timelineNameCol = require('./timeline-name-col.cjs.js');
 function SpanTreeRow({ ctx, meta, trailing }) {
-  const { span, spanUI, depth, isRootSpan, isLastChild, isExpanded, isSelected, isFaded, onSpanClick, expansion } = ctx;
+  const { span, spanUI, isRootSpan, isLastChild, guides, isExpanded, isSelected, isFaded, onSpanClick, expansion } = ctx;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       domains_traces_components_timelineNameCol.TimelineNameCol,
@@ -14,11 +14,11 @@ function SpanTreeRow({ ctx, meta, trailing }) {
         span,
         spanUI,
         isFaded,
-        depth,
         onSpanClick,
         selectedSpanId: isSelected ? span.id : void 0,
         revealSpanId: ctx.isRevealed ? span.id : void 0,
         isLastChild,
+        guides,
         hasChildren: expansion.hasChildren,
         numOfChildren: expansion.numOfChildren,
         isRootSpan,