npm - @mastra/playground-ui - Versions diffs - 53.1.0-alpha.2 → 53.1.0-alpha.3 - Mend

@mastra/playground-ui 53.1.0-alpha.2 → 53.1.0-alpha.3

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 (16) hide show

package/dist/domains/traces/components/timeline-name-col.cjs.js CHANGED Viewed

@@ -3,12 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
 const domains_traces_components_timelineStructureSign = require('./timeline-structure-sign.cjs.js');
 const utils_cn = require('../../../cn-DCPcv4xv.cjs');
-const revealRow = (node) => {
-  node?.scrollIntoView({ block: "nearest" });
-};
 function TimelineNameCol({
   span,
   spanUI,
@@ -16,16 +14,23 @@ function TimelineNameCol({
   depth = 0,
   onSpanClick,
   selectedSpanId,
+  revealSpanId,
   isLastChild,
   hasChildren: _hasChildren,
   isRootSpan,
   isExpanded: _isExpanded
 }) {
+  const rowRef = React.useRef(null);
   const isSelected = selectedSpanId === span.id;
+  const isRevealed = revealSpanId === span.id;
+  const shouldScrollIntoView = isSelected || isRevealed;
+  React.useEffect(() => {
+    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [shouldScrollIntoView]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref: isSelected ? revealRow : void 0,
+      ref: rowRef,
       "aria-label": `View details for span ${span.name}`,
       className: utils_cn.cn("flex min-h-8 items-center rounded-md rounded-l-lg opacity-80", {
         "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,

package/dist/domains/traces/components/timeline-name-col.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timeline-name-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n span: UISpan;\n spanUI?: UISpanStyle \| null;\n isFaded?: boolean;\n depth?: number;\n onSpanClick?: (id: string) => void;\n selectedSpanId?: string;\n isLastChild?: boolean;\n hasChildren?: boolean;\n isRootSpan?: boolean;\n isExpanded?: boolean;\n};\n\~~n// Nested rows mount late, once expansion opens their ancestors.\nconst revealRow = (node: HTMLDivElement \| null) => {\n node?.scrollIntoView({ block: 'nearest' });\n};\n\~~nexport function TimelineNameCol({\n span,\n spanUI,\n isFaded,\n depth = 0,\n onSpanClick,\n selectedSpanId,\n isLastChild,\n hasChildren: _hasChildren,\n isRootSpan,\n isExpanded: _isExpanded,\n}: TimelineNameColProps) {\n const isSelected = selectedSpanId === span.id;\n\n return (\n <div\n ref={~~isSelected ? revealRow : undefined~~}\n aria-label={`View details for span ${span.name}`}\n className={cn('flex min-h-8 items-center rounded-md rounded-l-lg opacity-80', {\n 'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n 'bg-surface4': isSelected,\n })}\n style={{ paddingLeft: `${depth * 1}rem` }}\n >\n {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n <button\n onClick={() => onSpanClick?.(span.id)}\n className={cn(\n 'flex size-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-ui-smd text-neutral6 transition-colors',\n '[&>svg]:ml-auto [&>svg]:size-[1em] [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:transition-all',\n 'hover:bg-surface4 [&:hover>svg]:opacity-60',\n 'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset',\n )}\n >\n {spanUI?.color && (\n <span\n aria-hidden\n title={spanUI.label}\n className=\"inline-block size-2 shrink-0 rounded-full\"\n style={{ backgroundColor: spanUI.color }}\n />\n )}\n {/* Searchable: the span name is what the timeline search matches on. When the match\n is in the span's payload instead, the whole name is painted in the indirect color\n so the row explains its own presence. */}\n <span\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 </span>\n </button>\n </div>\n );\n}\n"],"names":["jsxs","cn","jsx","TimelineStructureSign"],"mappings":"~~;;;;;;;;AAkBA~~,~~MAAM,SAAA,GAAY,CAAC,IAAA,KAAgC;AACjD,EAAA,IAAA,EAAM,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAW,CAAA;AAC3C,CAAA;AAEO,~~SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA,EAAa,YAAA;AAAA,EACb,UAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;~~AAE3C~~,EAAA,~~uBACEA~~,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,~~aAAa,SAAA,GAAY,~~MAAA;AAAA,~~MAC9B~~,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,SAAA,EAAWC,YAAG,8DAAA,EAAgE;AAAA,QAC5E,2EAAA,EAA6E,OAAA;AAAA,QAC7E,aAAA,EAAe;AAAA,OAChB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAcC,cAAA,CAACC,qEAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjEH,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,YACpC,SAAA,EAAWC,WAAA;AAAA,cACT,wHAAA;AAAA,cACA,8FAAA;AAAA,cACA,4CAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACPC,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,2CAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAKFA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,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;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}
1	+ {"version":3,"file":"timeline-name-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n span: UISpan;\n spanUI?: UISpanStyle \| null;\n isFaded?: boolean;\n depth?: number;\n onSpanClick?: (id: string) => void;\n selectedSpanId?: string;\n revealSpanId?: string;\n isLastChild?: boolean;\n hasChildren?: boolean;\n isRootSpan?: boolean;\n isExpanded?: boolean;\n};\n\nexport function TimelineNameCol({\n span,\n spanUI,\n isFaded,\n depth = 0,\n onSpanClick,\n selectedSpanId,\n revealSpanId,\n isLastChild,\n hasChildren: _hasChildren,\n isRootSpan,\n isExpanded: _isExpanded,\n}: TimelineNameColProps) {\n const rowRef = useRef<HTMLDivElement>(null);\n const isSelected = selectedSpanId === span.id;\n const isRevealed = revealSpanId === span.id;\n const shouldScrollIntoView = isSelected \|\| isRevealed;\n\n // Nested rows mount late, once expansion opens their ancestors; the effect runs on that\n // mount as well as when the row becomes the selected / revealed one.\n useEffect(() => {\n if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n }, [shouldScrollIntoView]);\n\n return (\n <div\n ref={rowRef}\n aria-label={`View details for span ${span.name}`}\n className={cn('flex min-h-8 items-center rounded-md rounded-l-lg opacity-80', {\n 'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n 'bg-surface4': isSelected,\n })}\n style={{ paddingLeft: `${depth * 1}rem` }}\n >\n {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n <button\n onClick={() => onSpanClick?.(span.id)}\n className={cn(\n 'flex size-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-ui-smd text-neutral6 transition-colors',\n '[&>svg]:ml-auto [&>svg]:size-[1em] [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:transition-all',\n 'hover:bg-surface4 [&:hover>svg]:opacity-60',\n 'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset',\n )}\n >\n {spanUI?.color && (\n <span\n aria-hidden\n title={spanUI.label}\n className=\"inline-block size-2 shrink-0 rounded-full\"\n style={{ backgroundColor: spanUI.color }}\n />\n )}\n {/* Searchable: the span name is what the timeline search matches on. When the match\n is in the span's payload instead, the whole name is painted in the indirect color\n so the row explains its own presence. */}\n <span\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 </span>\n </button>\n </div>\n );\n}\n"],"names":["useRef","useEffect","jsxs","cn","jsx","TimelineStructureSign"],"mappings":";;;;;;;;;AAmBO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA,EAAa,YAAA;AAAA,EACb,UAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,MAAA,GAASA,aAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;AAC3C,EAAA,MAAM,UAAA,GAAa,iBAAiB,IAAA,CAAK,EAAA;AACzC,EAAA,MAAM,uBAAuB,UAAA,IAAc,UAAA;AAI3C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,oBAAA,SAA6B,OAAA,EAAS,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,CAAA;AAAA,EACnG,CAAA,EAAG,CAAC,oBAAoB,CAAC,CAAA;AAEzB,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,SAAA,EAAWC,YAAG,8DAAA,EAAgE;AAAA,QAC5E,2EAAA,EAA6E,OAAA;AAAA,QAC7E,aAAA,EAAe;AAAA,OAChB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAcC,cAAA,CAACC,qEAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjEH,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,YACpC,SAAA,EAAWC,WAAA;AAAA,cACT,wHAAA;AAAA,cACA,8FAAA;AAAA,cACA,4CAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACPC,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,2CAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAKFA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,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;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/domains/traces/components/timeline-name-col.es.js CHANGED Viewed

@@ -1,10 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
 import { TimelineStructureSign } from './timeline-structure-sign.es.js';
 import { c as cn } from '../../../cn-B4oPhFx9.js';
-const revealRow = (node) => {
-  node?.scrollIntoView({ block: "nearest" });
-};
 function TimelineNameCol({
   span,
   spanUI,
@@ -12,16 +10,23 @@ function TimelineNameCol({
   depth = 0,
   onSpanClick,
   selectedSpanId,
+  revealSpanId,
   isLastChild,
   hasChildren: _hasChildren,
   isRootSpan,
   isExpanded: _isExpanded
 }) {
+  const rowRef = useRef(null);
   const isSelected = selectedSpanId === span.id;
+  const isRevealed = revealSpanId === span.id;
+  const shouldScrollIntoView = isSelected || isRevealed;
+  useEffect(() => {
+    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [shouldScrollIntoView]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: isSelected ? revealRow : void 0,
+      ref: rowRef,
       "aria-label": `View details for span ${span.name}`,
       className: cn("flex min-h-8 items-center rounded-md rounded-l-lg opacity-80", {
         "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,

package/dist/domains/traces/components/timeline-name-col.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timeline-name-col.es.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n span: UISpan;\n spanUI?: UISpanStyle \| null;\n isFaded?: boolean;\n depth?: number;\n onSpanClick?: (id: string) => void;\n selectedSpanId?: string;\n isLastChild?: boolean;\n hasChildren?: boolean;\n isRootSpan?: boolean;\n isExpanded?: boolean;\n};\n\~~n// Nested rows mount late, once expansion opens their ancestors.\nconst revealRow = (node: HTMLDivElement \| null) => {\n node?.scrollIntoView({ block: 'nearest' });\n};\n\~~nexport function TimelineNameCol({\n span,\n spanUI,\n isFaded,\n depth = 0,\n onSpanClick,\n selectedSpanId,\n isLastChild,\n hasChildren: _hasChildren,\n isRootSpan,\n isExpanded: _isExpanded,\n}: TimelineNameColProps) {\n const isSelected = selectedSpanId === span.id;\n\n return (\n <div\n ref={~~isSelected ? revealRow : undefined~~}\n aria-label={`View details for span ${span.name}`}\n className={cn('flex min-h-8 items-center rounded-md rounded-l-lg opacity-80', {\n 'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n 'bg-surface4': isSelected,\n })}\n style={{ paddingLeft: `${depth * 1}rem` }}\n >\n {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n <button\n onClick={() => onSpanClick?.(span.id)}\n className={cn(\n 'flex size-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-ui-smd text-neutral6 transition-colors',\n '[&>svg]:ml-auto [&>svg]:size-[1em] [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:transition-all',\n 'hover:bg-surface4 [&:hover>svg]:opacity-60',\n 'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset',\n )}\n >\n {spanUI?.color && (\n <span\n aria-hidden\n title={spanUI.label}\n className=\"inline-block size-2 shrink-0 rounded-full\"\n style={{ backgroundColor: spanUI.color }}\n />\n )}\n {/* Searchable: the span name is what the timeline search matches on. When the match\n is in the span's payload instead, the whole name is painted in the indirect color\n so the row explains its own presence. */}\n <span\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 </span>\n </button>\n </div>\n );\n}\n"],"names":[],"mappings":"~~;;;;AAkBA~~,~~MAAM,SAAA,GAAY,CAAC,IAAA,KAAgC;AACjD,EAAA,IAAA,EAAM,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAW,CAAA;AAC3C,CAAA;AAEO,~~SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA,EAAa,YAAA;AAAA,EACb,UAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;~~AAE3C~~,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,~~aAAa,SAAA,GAAY,~~MAAA;AAAA,~~MAC9B~~,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,SAAA,EAAW,GAAG,8DAAA,EAAgE;AAAA,QAC5E,2EAAA,EAA6E,OAAA;AAAA,QAC7E,aAAA,EAAe;AAAA,OAChB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAc,GAAA,CAAC,qBAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjE,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,YACpC,SAAA,EAAW,EAAA;AAAA,cACT,wHAAA;AAAA,cACA,8FAAA;AAAA,cACA,4CAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACP,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,2CAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAKF,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,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;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}
1	+ {"version":3,"file":"timeline-name-col.es.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n span: UISpan;\n spanUI?: UISpanStyle \| null;\n isFaded?: boolean;\n depth?: number;\n onSpanClick?: (id: string) => void;\n selectedSpanId?: string;\n revealSpanId?: string;\n isLastChild?: boolean;\n hasChildren?: boolean;\n isRootSpan?: boolean;\n isExpanded?: boolean;\n};\n\nexport function TimelineNameCol({\n span,\n spanUI,\n isFaded,\n depth = 0,\n onSpanClick,\n selectedSpanId,\n revealSpanId,\n isLastChild,\n hasChildren: _hasChildren,\n isRootSpan,\n isExpanded: _isExpanded,\n}: TimelineNameColProps) {\n const rowRef = useRef<HTMLDivElement>(null);\n const isSelected = selectedSpanId === span.id;\n const isRevealed = revealSpanId === span.id;\n const shouldScrollIntoView = isSelected \|\| isRevealed;\n\n // Nested rows mount late, once expansion opens their ancestors; the effect runs on that\n // mount as well as when the row becomes the selected / revealed one.\n useEffect(() => {\n if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n }, [shouldScrollIntoView]);\n\n return (\n <div\n ref={rowRef}\n aria-label={`View details for span ${span.name}`}\n className={cn('flex min-h-8 items-center rounded-md rounded-l-lg opacity-80', {\n 'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n 'bg-surface4': isSelected,\n })}\n style={{ paddingLeft: `${depth * 1}rem` }}\n >\n {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n <button\n onClick={() => onSpanClick?.(span.id)}\n className={cn(\n 'flex size-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-ui-smd text-neutral6 transition-colors',\n '[&>svg]:ml-auto [&>svg]:size-[1em] [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:transition-all',\n 'hover:bg-surface4 [&:hover>svg]:opacity-60',\n 'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset',\n )}\n >\n {spanUI?.color && (\n <span\n aria-hidden\n title={spanUI.label}\n className=\"inline-block size-2 shrink-0 rounded-full\"\n style={{ backgroundColor: spanUI.color }}\n />\n )}\n {/* Searchable: the span name is what the timeline search matches on. When the match\n is in the span's payload instead, the whole name is painted in the indirect color\n so the row explains its own presence. */}\n <span\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 </span>\n </button>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;AAmBO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA,EAAa,YAAA;AAAA,EACb,UAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;AAC3C,EAAA,MAAM,UAAA,GAAa,iBAAiB,IAAA,CAAK,EAAA;AACzC,EAAA,MAAM,uBAAuB,UAAA,IAAc,UAAA;AAI3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,oBAAA,SAA6B,OAAA,EAAS,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,CAAA;AAAA,EACnG,CAAA,EAAG,CAAC,oBAAoB,CAAC,CAAA;AAEzB,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,SAAA,EAAW,GAAG,8DAAA,EAAgE;AAAA,QAC5E,2EAAA,EAA6E,OAAA;AAAA,QAC7E,aAAA,EAAe;AAAA,OAChB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAc,GAAA,CAAC,qBAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjE,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,YACpC,SAAA,EAAW,EAAA;AAAA,cACT,wHAAA;AAAA,cACA,8FAAA;AAAA,cACA,4CAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACP,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,2CAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAKF,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,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;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -16,6 +16,7 @@ function TraceTimelineSpan({
   depth = 0,
   onSpanClick,
   selectedSpanId,
+  revealSpanId,
   isLastChild,
   overallLatency,
   overallStartTime,
@@ -103,6 +104,7 @@ function TraceTimelineSpan({
         depth,
         onSpanClick,
         selectedSpanId,
+        revealSpanId,
         isLastChild,
         hasChildren,
         isRootSpan,
@@ -150,6 +152,7 @@ function TraceTimelineSpan({
           depth: depth + 1,
           onSpanClick,
           selectedSpanId,
+          revealSpanId,
           isLastChild: isLast,
           overallLatency,
           overallStartTime,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"trace-timeline-span.cjs.js","sources":["../../../../src/domains/traces/components/trace-timeline-span.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi } from './shared';\nimport { TimelineExpandCol } from './timeline-expand-col';\nimport { TimelineNameCol } from './timeline-name-col';\nimport { TimelineTimingCol } from './timeline-timing-col';\n\ntype TraceTimelineSpanProps = {\n span: UISpan;\n siblings?: UISpan[];\n depth?: number;\n onSpanClick?: (id: string) => void;\n selectedSpanId?: string;\n isLastChild?: boolean;\n overallLatency?: number;\n overallStartTime?: string;\n fadedTypes?: string[];\n searchPhrase?: string;\n featuredSpanIds?: string[];\n expandedSpanIds?: string[];\n setExpandedSpanIds?: React.Dispatch<React.SetStateAction<string[]>>;\n chartWidth?: 'wide' \| 'default';\n};\n\nexport function TraceTimelineSpan({\n span,\n siblings,\n depth = 0,\n onSpanClick,\n selectedSpanId,\n isLastChild,\n overallLatency,\n overallStartTime,\n fadedTypes,\n searchPhrase,\n featuredSpanIds,\n expandedSpanIds,\n setExpandedSpanIds,\n chartWidth,\n}: TraceTimelineSpanProps) {\n const hasChildren = span.spans && span.spans.length > 0;\n const numOfChildren = span.spans ? span.spans.length : 0;\n const allDescendantIds = getSpanDescendantIds(span);\n const totalDescendants = allDescendantIds.length;\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 expandAllDescendants = () => {\n if (!setExpandedSpanIds) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n return Array.from(new Set([...prev, span.id, ...allDescendantIds]));\n });\n };\n\n const collapseAllDescendants = () => {\n if (!setExpandedSpanIds) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n const idsToRemove = new Set(allDescendantIds);\n return prev.filter(id => !idsToRemove.has(id));\n });\n };\n\n const collapseAll = () => {\n if (!setExpandedSpanIds) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n const idsToRemove = new Set([span.id, ...allDescendantIds]);\n return prev.filter(id => !idsToRemove.has(id));\n });\n };\n\n const allDescendantsExpanded = allDescendantIds.every(id => expandedSpanIds?.includes(id));\n\n const siblingsWithChildren = (siblings ?? []).filter(s => s.spans && s.spans.length > 0);\n const siblingsWithChildrenCount = siblingsWithChildren.length;\n const siblingsAllExpanded =\n siblingsWithChildrenCount > 0 && siblingsWithChildren.every(s => expandedSpanIds?.includes(s.id));\n\n const toggleSiblings = () => {\n if (!setExpandedSpanIds \|\| siblingsWithChildrenCount === 0) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n if (siblingsAllExpanded) {\n const idsToRemove = new Set<string>();\n siblingsWithChildren.forEach(s => {\n idsToRemove.add(s.id);\n getSpanDescendantIds(s).forEach(id => idsToRemove.add(id));\n });\n return prev.filter(id => !idsToRemove.has(id));\n }\n return Array.from(new Set([...prev, ...siblingsWithChildren.map(s => s.id)]));\n });\n };\n\n return (\n <>\n <TimelineNameCol\n span={span}\n spanUI={spanUI}\n isFaded={isFaded}\n depth={depth}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n isLastChild={isLastChild}\n hasChildren={hasChildren}\n isRootSpan={isRootSpan}\n isExpanded={isExpanded}\n />\n\n <TimelineExpandCol\n isSelected={selectedSpanId === span.id}\n isFaded={isFaded}\n isExpanded={isExpanded}\n isRootSpan={isRootSpan}\n toggleChildren={toggleChildren}\n expandAllDescendants={expandAllDescendants}\n collapseAllDescendants={collapseAllDescendants}\n collapseAll={collapseAll}\n totalDescendants={totalDescendants}\n allDescendantsExpanded={allDescendantsExpanded}\n numOfChildren={numOfChildren}\n toggleSiblings={toggleSiblings}\n siblingsAllExpanded={siblingsAllExpanded}\n siblingsWithChildrenCount={siblingsWithChildrenCount}\n />\n\n <TimelineTimingCol\n span={span}\n selectedSpanId={selectedSpanId}\n isFaded={isFaded}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n color={spanUI?.color}\n chartWidth={chartWidth}\n />\n\n {hasChildren &&\n isExpanded &&\n span.spans?.map((childSpan: UISpan, idx: number, array: UISpan[]) => {\n const isLast = idx === array.length - 1;\n\n return (\n <TraceTimelineSpan\n key={childSpan.id}\n span={childSpan}\n siblings={array}\n depth={depth + 1}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n isLastChild={isLast}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n fadedTypes={fadedTypes}\n searchPhrase={searchPhrase}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n featuredSpanIds={featuredSpanIds}\n chartWidth={chartWidth}\n />\n );\n })}\n </>\n );\n}\n"],"names":["getSpanDescendantIds","getSpanTypeUi","useEffect","jsxs","Fragment","jsx","TimelineNameCol","TimelineExpandCol","TimelineTimingCol"],"mappings":"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"}
1	+ {"version":3,"file":"trace-timeline-span.cjs.js","sources":["../../../../src/domains/traces/components/trace-timeline-span.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi } from './shared';\nimport { TimelineExpandCol } from './timeline-expand-col';\nimport { TimelineNameCol } from './timeline-name-col';\nimport { TimelineTimingCol } from './timeline-timing-col';\n\ntype TraceTimelineSpanProps = {\n span: UISpan;\n siblings?: UISpan[];\n depth?: number;\n onSpanClick?: (id: string) => void;\n selectedSpanId?: string;\n revealSpanId?: string;\n isLastChild?: boolean;\n overallLatency?: number;\n overallStartTime?: string;\n fadedTypes?: string[];\n searchPhrase?: string;\n featuredSpanIds?: string[];\n expandedSpanIds?: string[];\n setExpandedSpanIds?: React.Dispatch<React.SetStateAction<string[]>>;\n chartWidth?: 'wide' \| 'default';\n};\n\nexport function TraceTimelineSpan({\n span,\n siblings,\n depth = 0,\n onSpanClick,\n selectedSpanId,\n revealSpanId,\n isLastChild,\n overallLatency,\n overallStartTime,\n fadedTypes,\n searchPhrase,\n featuredSpanIds,\n expandedSpanIds,\n setExpandedSpanIds,\n chartWidth,\n}: TraceTimelineSpanProps) {\n const hasChildren = span.spans && span.spans.length > 0;\n const numOfChildren = span.spans ? span.spans.length : 0;\n const allDescendantIds = getSpanDescendantIds(span);\n const totalDescendants = allDescendantIds.length;\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 expandAllDescendants = () => {\n if (!setExpandedSpanIds) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n return Array.from(new Set([...prev, span.id, ...allDescendantIds]));\n });\n };\n\n const collapseAllDescendants = () => {\n if (!setExpandedSpanIds) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n const idsToRemove = new Set(allDescendantIds);\n return prev.filter(id => !idsToRemove.has(id));\n });\n };\n\n const collapseAll = () => {\n if (!setExpandedSpanIds) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n const idsToRemove = new Set([span.id, ...allDescendantIds]);\n return prev.filter(id => !idsToRemove.has(id));\n });\n };\n\n const allDescendantsExpanded = allDescendantIds.every(id => expandedSpanIds?.includes(id));\n\n const siblingsWithChildren = (siblings ?? []).filter(s => s.spans && s.spans.length > 0);\n const siblingsWithChildrenCount = siblingsWithChildren.length;\n const siblingsAllExpanded =\n siblingsWithChildrenCount > 0 && siblingsWithChildren.every(s => expandedSpanIds?.includes(s.id));\n\n const toggleSiblings = () => {\n if (!setExpandedSpanIds \|\| siblingsWithChildrenCount === 0) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n if (siblingsAllExpanded) {\n const idsToRemove = new Set<string>();\n siblingsWithChildren.forEach(s => {\n idsToRemove.add(s.id);\n getSpanDescendantIds(s).forEach(id => idsToRemove.add(id));\n });\n return prev.filter(id => !idsToRemove.has(id));\n }\n return Array.from(new Set([...prev, ...siblingsWithChildren.map(s => s.id)]));\n });\n };\n\n return (\n <>\n <TimelineNameCol\n span={span}\n spanUI={spanUI}\n isFaded={isFaded}\n depth={depth}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n revealSpanId={revealSpanId}\n isLastChild={isLastChild}\n hasChildren={hasChildren}\n isRootSpan={isRootSpan}\n isExpanded={isExpanded}\n />\n\n <TimelineExpandCol\n isSelected={selectedSpanId === span.id}\n isFaded={isFaded}\n isExpanded={isExpanded}\n isRootSpan={isRootSpan}\n toggleChildren={toggleChildren}\n expandAllDescendants={expandAllDescendants}\n collapseAllDescendants={collapseAllDescendants}\n collapseAll={collapseAll}\n totalDescendants={totalDescendants}\n allDescendantsExpanded={allDescendantsExpanded}\n numOfChildren={numOfChildren}\n toggleSiblings={toggleSiblings}\n siblingsAllExpanded={siblingsAllExpanded}\n siblingsWithChildrenCount={siblingsWithChildrenCount}\n />\n\n <TimelineTimingCol\n span={span}\n selectedSpanId={selectedSpanId}\n isFaded={isFaded}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n color={spanUI?.color}\n chartWidth={chartWidth}\n />\n\n {hasChildren &&\n isExpanded &&\n span.spans?.map((childSpan: UISpan, idx: number, array: UISpan[]) => {\n const isLast = idx === array.length - 1;\n\n return (\n <TraceTimelineSpan\n key={childSpan.id}\n span={childSpan}\n siblings={array}\n depth={depth + 1}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n revealSpanId={revealSpanId}\n isLastChild={isLast}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n fadedTypes={fadedTypes}\n searchPhrase={searchPhrase}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n featuredSpanIds={featuredSpanIds}\n chartWidth={chartWidth}\n />\n );\n })}\n </>\n );\n}\n"],"names":["getSpanDescendantIds","getSpanTypeUi","useEffect","jsxs","Fragment","jsx","TimelineNameCol","TimelineExpandCol","TimelineTimingCol"],"mappings":"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"}

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

@@ -12,6 +12,7 @@ function TraceTimelineSpan({
   depth = 0,
   onSpanClick,
   selectedSpanId,
+  revealSpanId,
   isLastChild,
   overallLatency,
   overallStartTime,
@@ -99,6 +100,7 @@ function TraceTimelineSpan({
         depth,
         onSpanClick,
         selectedSpanId,
+        revealSpanId,
         isLastChild,
         hasChildren,
         isRootSpan,
@@ -146,6 +148,7 @@ function TraceTimelineSpan({
           depth: depth + 1,
           onSpanClick,
           selectedSpanId,
+          revealSpanId,
           isLastChild: isLast,
           overallLatency,
           overallStartTime,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"trace-timeline-span.es.js","sources":["../../../../src/domains/traces/components/trace-timeline-span.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi } from './shared';\nimport { TimelineExpandCol } from './timeline-expand-col';\nimport { TimelineNameCol } from './timeline-name-col';\nimport { TimelineTimingCol } from './timeline-timing-col';\n\ntype TraceTimelineSpanProps = {\n span: UISpan;\n siblings?: UISpan[];\n depth?: number;\n onSpanClick?: (id: string) => void;\n selectedSpanId?: string;\n isLastChild?: boolean;\n overallLatency?: number;\n overallStartTime?: string;\n fadedTypes?: string[];\n searchPhrase?: string;\n featuredSpanIds?: string[];\n expandedSpanIds?: string[];\n setExpandedSpanIds?: React.Dispatch<React.SetStateAction<string[]>>;\n chartWidth?: 'wide' \| 'default';\n};\n\nexport function TraceTimelineSpan({\n span,\n siblings,\n depth = 0,\n onSpanClick,\n selectedSpanId,\n isLastChild,\n overallLatency,\n overallStartTime,\n fadedTypes,\n searchPhrase,\n featuredSpanIds,\n expandedSpanIds,\n setExpandedSpanIds,\n chartWidth,\n}: TraceTimelineSpanProps) {\n const hasChildren = span.spans && span.spans.length > 0;\n const numOfChildren = span.spans ? span.spans.length : 0;\n const allDescendantIds = getSpanDescendantIds(span);\n const totalDescendants = allDescendantIds.length;\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 expandAllDescendants = () => {\n if (!setExpandedSpanIds) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n return Array.from(new Set([...prev, span.id, ...allDescendantIds]));\n });\n };\n\n const collapseAllDescendants = () => {\n if (!setExpandedSpanIds) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n const idsToRemove = new Set(allDescendantIds);\n return prev.filter(id => !idsToRemove.has(id));\n });\n };\n\n const collapseAll = () => {\n if (!setExpandedSpanIds) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n const idsToRemove = new Set([span.id, ...allDescendantIds]);\n return prev.filter(id => !idsToRemove.has(id));\n });\n };\n\n const allDescendantsExpanded = allDescendantIds.every(id => expandedSpanIds?.includes(id));\n\n const siblingsWithChildren = (siblings ?? []).filter(s => s.spans && s.spans.length > 0);\n const siblingsWithChildrenCount = siblingsWithChildren.length;\n const siblingsAllExpanded =\n siblingsWithChildrenCount > 0 && siblingsWithChildren.every(s => expandedSpanIds?.includes(s.id));\n\n const toggleSiblings = () => {\n if (!setExpandedSpanIds \|\| siblingsWithChildrenCount === 0) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n if (siblingsAllExpanded) {\n const idsToRemove = new Set<string>();\n siblingsWithChildren.forEach(s => {\n idsToRemove.add(s.id);\n getSpanDescendantIds(s).forEach(id => idsToRemove.add(id));\n });\n return prev.filter(id => !idsToRemove.has(id));\n }\n return Array.from(new Set([...prev, ...siblingsWithChildren.map(s => s.id)]));\n });\n };\n\n return (\n <>\n <TimelineNameCol\n span={span}\n spanUI={spanUI}\n isFaded={isFaded}\n depth={depth}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n isLastChild={isLastChild}\n hasChildren={hasChildren}\n isRootSpan={isRootSpan}\n isExpanded={isExpanded}\n />\n\n <TimelineExpandCol\n isSelected={selectedSpanId === span.id}\n isFaded={isFaded}\n isExpanded={isExpanded}\n isRootSpan={isRootSpan}\n toggleChildren={toggleChildren}\n expandAllDescendants={expandAllDescendants}\n collapseAllDescendants={collapseAllDescendants}\n collapseAll={collapseAll}\n totalDescendants={totalDescendants}\n allDescendantsExpanded={allDescendantsExpanded}\n numOfChildren={numOfChildren}\n toggleSiblings={toggleSiblings}\n siblingsAllExpanded={siblingsAllExpanded}\n siblingsWithChildrenCount={siblingsWithChildrenCount}\n />\n\n <TimelineTimingCol\n span={span}\n selectedSpanId={selectedSpanId}\n isFaded={isFaded}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n color={spanUI?.color}\n chartWidth={chartWidth}\n />\n\n {hasChildren &&\n isExpanded &&\n span.spans?.map((childSpan: UISpan, idx: number, array: UISpan[]) => {\n const isLast = idx === array.length - 1;\n\n return (\n <TraceTimelineSpan\n key={childSpan.id}\n span={childSpan}\n siblings={array}\n depth={depth + 1}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n isLastChild={isLast}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n fadedTypes={fadedTypes}\n searchPhrase={searchPhrase}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n featuredSpanIds={featuredSpanIds}\n chartWidth={chartWidth}\n />\n );\n })}\n </>\n );\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"trace-timeline-span.es.js","sources":["../../../../src/domains/traces/components/trace-timeline-span.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi } from './shared';\nimport { TimelineExpandCol } from './timeline-expand-col';\nimport { TimelineNameCol } from './timeline-name-col';\nimport { TimelineTimingCol } from './timeline-timing-col';\n\ntype TraceTimelineSpanProps = {\n span: UISpan;\n siblings?: UISpan[];\n depth?: number;\n onSpanClick?: (id: string) => void;\n selectedSpanId?: string;\n revealSpanId?: string;\n isLastChild?: boolean;\n overallLatency?: number;\n overallStartTime?: string;\n fadedTypes?: string[];\n searchPhrase?: string;\n featuredSpanIds?: string[];\n expandedSpanIds?: string[];\n setExpandedSpanIds?: React.Dispatch<React.SetStateAction<string[]>>;\n chartWidth?: 'wide' \| 'default';\n};\n\nexport function TraceTimelineSpan({\n span,\n siblings,\n depth = 0,\n onSpanClick,\n selectedSpanId,\n revealSpanId,\n isLastChild,\n overallLatency,\n overallStartTime,\n fadedTypes,\n searchPhrase,\n featuredSpanIds,\n expandedSpanIds,\n setExpandedSpanIds,\n chartWidth,\n}: TraceTimelineSpanProps) {\n const hasChildren = span.spans && span.spans.length > 0;\n const numOfChildren = span.spans ? span.spans.length : 0;\n const allDescendantIds = getSpanDescendantIds(span);\n const totalDescendants = allDescendantIds.length;\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 expandAllDescendants = () => {\n if (!setExpandedSpanIds) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n return Array.from(new Set([...prev, span.id, ...allDescendantIds]));\n });\n };\n\n const collapseAllDescendants = () => {\n if (!setExpandedSpanIds) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n const idsToRemove = new Set(allDescendantIds);\n return prev.filter(id => !idsToRemove.has(id));\n });\n };\n\n const collapseAll = () => {\n if (!setExpandedSpanIds) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n const idsToRemove = new Set([span.id, ...allDescendantIds]);\n return prev.filter(id => !idsToRemove.has(id));\n });\n };\n\n const allDescendantsExpanded = allDescendantIds.every(id => expandedSpanIds?.includes(id));\n\n const siblingsWithChildren = (siblings ?? []).filter(s => s.spans && s.spans.length > 0);\n const siblingsWithChildrenCount = siblingsWithChildren.length;\n const siblingsAllExpanded =\n siblingsWithChildrenCount > 0 && siblingsWithChildren.every(s => expandedSpanIds?.includes(s.id));\n\n const toggleSiblings = () => {\n if (!setExpandedSpanIds \|\| siblingsWithChildrenCount === 0) return;\n setExpandedSpanIds(prev => {\n if (!prev) return prev;\n if (siblingsAllExpanded) {\n const idsToRemove = new Set<string>();\n siblingsWithChildren.forEach(s => {\n idsToRemove.add(s.id);\n getSpanDescendantIds(s).forEach(id => idsToRemove.add(id));\n });\n return prev.filter(id => !idsToRemove.has(id));\n }\n return Array.from(new Set([...prev, ...siblingsWithChildren.map(s => s.id)]));\n });\n };\n\n return (\n <>\n <TimelineNameCol\n span={span}\n spanUI={spanUI}\n isFaded={isFaded}\n depth={depth}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n revealSpanId={revealSpanId}\n isLastChild={isLastChild}\n hasChildren={hasChildren}\n isRootSpan={isRootSpan}\n isExpanded={isExpanded}\n />\n\n <TimelineExpandCol\n isSelected={selectedSpanId === span.id}\n isFaded={isFaded}\n isExpanded={isExpanded}\n isRootSpan={isRootSpan}\n toggleChildren={toggleChildren}\n expandAllDescendants={expandAllDescendants}\n collapseAllDescendants={collapseAllDescendants}\n collapseAll={collapseAll}\n totalDescendants={totalDescendants}\n allDescendantsExpanded={allDescendantsExpanded}\n numOfChildren={numOfChildren}\n toggleSiblings={toggleSiblings}\n siblingsAllExpanded={siblingsAllExpanded}\n siblingsWithChildrenCount={siblingsWithChildrenCount}\n />\n\n <TimelineTimingCol\n span={span}\n selectedSpanId={selectedSpanId}\n isFaded={isFaded}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n color={spanUI?.color}\n chartWidth={chartWidth}\n />\n\n {hasChildren &&\n isExpanded &&\n span.spans?.map((childSpan: UISpan, idx: number, array: UISpan[]) => {\n const isLast = idx === array.length - 1;\n\n return (\n <TraceTimelineSpan\n key={childSpan.id}\n span={childSpan}\n siblings={array}\n depth={depth + 1}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n revealSpanId={revealSpanId}\n isLastChild={isLast}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n fadedTypes={fadedTypes}\n searchPhrase={searchPhrase}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n featuredSpanIds={featuredSpanIds}\n chartWidth={chartWidth}\n />\n );\n })}\n </>\n );\n}\n"],"names":[],"mappings":"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"}

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

@@ -18,6 +18,7 @@ function TraceTimeline({
   expandedSpanIds,
   setExpandedSpanIds,
   featuredSpanIds,
+  revealSpanId,
   chartWidth = "default",
   leadingSlot
 }) {
@@ -79,6 +80,7 @@ function TraceTimeline({
         overallStartTime,
         fadedTypes,
         featuredSpanIds,
+        revealSpanId,
         expandedSpanIds,
         setExpandedSpanIds,
         chartWidth

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

	@@ -1 +1 @@
1	- {"version":3,"file":"trace-timeline.cjs.js","sources":["../../../../src/domains/traces/components/trace-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { spanTypePrefixes, getSpanTypeUi } from './shared';\nimport { TraceTimelineSpan } from './trace-timeline-span';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\ntype TraceTimelineProps = {\n hierarchicalSpans: UISpan[];\n onSpanClick: (id: string) => void;\n selectedSpanId?: string;\n isLoading?: boolean;\n fadedTypes?: string[];\n expandedSpanIds?: string[];\n setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n featuredSpanIds?: string[];\n chartWidth?: 'wide' \| 'default';\n /** Rendered full-width above the span type legend row. */\n leadingSlot?: ReactNode;\n};\n\nexport function TraceTimeline({\n hierarchicalSpans = [],\n onSpanClick,\n selectedSpanId,\n isLoading,\n fadedTypes,\n expandedSpanIds,\n setExpandedSpanIds,\n featuredSpanIds,\n chartWidth = 'default',\n leadingSlot,\n}: TraceTimelineProps) {\n const overallLatency = hierarchicalSpans?.[0]?.latency \|\| 0;\n const overallStartTime = hierarchicalSpans?.[0]?.startTime \|\| '';\n\n const usedSpanTypes = useMemo(() => {\n const collectTypes = (spans: UISpan[]): Set<string> => {\n const types = new Set<string>();\n for (const span of spans) {\n const prefix = span.type?.toLowerCase().split('_')[0];\n if (prefix) types.add(prefix);\n if (span.spans) {\n for (const t of collectTypes(span.spans)) types.add(t);\n }\n }\n return types;\n };\n const types = collectTypes(hierarchicalSpans);\n const hasOther = [...types].some(t => !spanTypePrefixes.includes(t));\n const known = spanTypePrefixes.filter(p => p !== 'other' && types.has(p));\n if (hasOther) known.push('other');\n return known;\n }, [hierarchicalSpans]);\n\n return (\n <>\n {isLoading ? (\n <div\n className={cn(\n 'flex items-center justify-center gap-3 rounded-md bg-surface3/50 p-3 text-ui-sm text-neutral3',\n '[&_svg]:size-[1.25em] [&_svg]:opacity-50',\n )}\n >\n <Spinner /> Loading Trace Timeline ...\n </div>\n ) : (\n <>\n {leadingSlot && <div className=\"px-2 pt-1.5\">{leadingSlot}</div>}\n {usedSpanTypes.length > 0 && (\n <div className=\"flex flex-wrap items-center justify-end gap-3 px-2 py-1.5\">\n {usedSpanTypes.map(type => {\n const spanUI = getSpanTypeUi(type);\n return (\n <div key={type} className=\"text-ui-sm text-neutral3 flex shrink-0 items-center gap-1\">\n <span\n className=\"inline-block size-1.5 shrink-0 rounded-full\"\n style={{ backgroundColor: spanUI?.color }}\n />\n {spanUI?.label \|\| type}\n </div>\n );\n })}\n </div>\n )}\n <div className=\"grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1\">\n {hierarchicalSpans?.map(span => (\n <TraceTimelineSpan\n key={span.id}\n span={span}\n siblings={hierarchicalSpans}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n fadedTypes={fadedTypes}\n featuredSpanIds={featuredSpanIds}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n chartWidth={chartWidth}\n />\n ))}\n </div>\n </>\n )}\n </>\n );\n}\n"],"names":["useMemo","types","spanTypePrefixes","jsxs","cn","jsx","Spinner","Fragment","getSpanTypeUi","TraceTimelineSpan"],"mappings":";;;;;;;;;;;~~AAsBO~~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~~MAXK~~,IAAA,CAAK;AAAA,~~KAab~~,CAAA,EACH;AAAA,GAAA,EACF,CAAA,EAEJ,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"trace-timeline.cjs.js","sources":["../../../../src/domains/traces/components/trace-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { spanTypePrefixes, getSpanTypeUi } from './shared';\nimport { TraceTimelineSpan } from './trace-timeline-span';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\ntype TraceTimelineProps = {\n hierarchicalSpans: UISpan[];\n onSpanClick: (id: string) => void;\n selectedSpanId?: string;\n isLoading?: boolean;\n fadedTypes?: string[];\n expandedSpanIds?: string[];\n setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n featuredSpanIds?: string[];\n /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). /\n revealSpanId?: string;\n chartWidth?: 'wide' \| 'default';\n /* Rendered full-width above the span type legend row. */\n leadingSlot?: ReactNode;\n};\n\nexport function TraceTimeline({\n hierarchicalSpans = [],\n onSpanClick,\n selectedSpanId,\n isLoading,\n fadedTypes,\n expandedSpanIds,\n setExpandedSpanIds,\n featuredSpanIds,\n revealSpanId,\n chartWidth = 'default',\n leadingSlot,\n}: TraceTimelineProps) {\n const overallLatency = hierarchicalSpans?.[0]?.latency \|\| 0;\n const overallStartTime = hierarchicalSpans?.[0]?.startTime \|\| '';\n\n const usedSpanTypes = useMemo(() => {\n const collectTypes = (spans: UISpan[]): Set<string> => {\n const types = new Set<string>();\n for (const span of spans) {\n const prefix = span.type?.toLowerCase().split('_')[0];\n if (prefix) types.add(prefix);\n if (span.spans) {\n for (const t of collectTypes(span.spans)) types.add(t);\n }\n }\n return types;\n };\n const types = collectTypes(hierarchicalSpans);\n const hasOther = [...types].some(t => !spanTypePrefixes.includes(t));\n const known = spanTypePrefixes.filter(p => p !== 'other' && types.has(p));\n if (hasOther) known.push('other');\n return known;\n }, [hierarchicalSpans]);\n\n return (\n <>\n {isLoading ? (\n <div\n className={cn(\n 'flex items-center justify-center gap-3 rounded-md bg-surface3/50 p-3 text-ui-sm text-neutral3',\n '[&_svg]:size-[1.25em] [&_svg]:opacity-50',\n )}\n >\n <Spinner /> Loading Trace Timeline ...\n </div>\n ) : (\n <>\n {leadingSlot && <div className=\"px-2 pt-1.5\">{leadingSlot}</div>}\n {usedSpanTypes.length > 0 && (\n <div className=\"flex flex-wrap items-center justify-end gap-3 px-2 py-1.5\">\n {usedSpanTypes.map(type => {\n const spanUI = getSpanTypeUi(type);\n return (\n <div key={type} className=\"text-ui-sm text-neutral3 flex shrink-0 items-center gap-1\">\n <span\n className=\"inline-block size-1.5 shrink-0 rounded-full\"\n style={{ backgroundColor: spanUI?.color }}\n />\n {spanUI?.label \|\| type}\n </div>\n );\n })}\n </div>\n )}\n <div className=\"grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1\">\n {hierarchicalSpans?.map(span => (\n <TraceTimelineSpan\n key={span.id}\n span={span}\n siblings={hierarchicalSpans}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n fadedTypes={fadedTypes}\n featuredSpanIds={featuredSpanIds}\n revealSpanId={revealSpanId}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n chartWidth={chartWidth}\n />\n ))}\n </div>\n </>\n )}\n </>\n );\n}\n"],"names":["useMemo","types","spanTypePrefixes","jsxs","cn","jsx","Spinner","Fragment","getSpanTypeUi","TraceTimelineSpan"],"mappings":"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"}

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

@@ -14,6 +14,7 @@ function TraceTimeline({
   expandedSpanIds,
   setExpandedSpanIds,
   featuredSpanIds,
+  revealSpanId,
   chartWidth = "default",
   leadingSlot
 }) {
@@ -75,6 +76,7 @@ function TraceTimeline({
         overallStartTime,
         fadedTypes,
         featuredSpanIds,
+        revealSpanId,
         expandedSpanIds,
         setExpandedSpanIds,
         chartWidth

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

	@@ -1 +1 @@
1	- {"version":3,"file":"trace-timeline.es.js","sources":["../../../../src/domains/traces/components/trace-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { spanTypePrefixes, getSpanTypeUi } from './shared';\nimport { TraceTimelineSpan } from './trace-timeline-span';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\ntype TraceTimelineProps = {\n hierarchicalSpans: UISpan[];\n onSpanClick: (id: string) => void;\n selectedSpanId?: string;\n isLoading?: boolean;\n fadedTypes?: string[];\n expandedSpanIds?: string[];\n setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n featuredSpanIds?: string[];\n chartWidth?: 'wide' \| 'default';\n /** Rendered full-width above the span type legend row. */\n leadingSlot?: ReactNode;\n};\n\nexport function TraceTimeline({\n hierarchicalSpans = [],\n onSpanClick,\n selectedSpanId,\n isLoading,\n fadedTypes,\n expandedSpanIds,\n setExpandedSpanIds,\n featuredSpanIds,\n chartWidth = 'default',\n leadingSlot,\n}: TraceTimelineProps) {\n const overallLatency = hierarchicalSpans?.[0]?.latency \|\| 0;\n const overallStartTime = hierarchicalSpans?.[0]?.startTime \|\| '';\n\n const usedSpanTypes = useMemo(() => {\n const collectTypes = (spans: UISpan[]): Set<string> => {\n const types = new Set<string>();\n for (const span of spans) {\n const prefix = span.type?.toLowerCase().split('_')[0];\n if (prefix) types.add(prefix);\n if (span.spans) {\n for (const t of collectTypes(span.spans)) types.add(t);\n }\n }\n return types;\n };\n const types = collectTypes(hierarchicalSpans);\n const hasOther = [...types].some(t => !spanTypePrefixes.includes(t));\n const known = spanTypePrefixes.filter(p => p !== 'other' && types.has(p));\n if (hasOther) known.push('other');\n return known;\n }, [hierarchicalSpans]);\n\n return (\n <>\n {isLoading ? (\n <div\n className={cn(\n 'flex items-center justify-center gap-3 rounded-md bg-surface3/50 p-3 text-ui-sm text-neutral3',\n '[&_svg]:size-[1.25em] [&_svg]:opacity-50',\n )}\n >\n <Spinner /> Loading Trace Timeline ...\n </div>\n ) : (\n <>\n {leadingSlot && <div className=\"px-2 pt-1.5\">{leadingSlot}</div>}\n {usedSpanTypes.length > 0 && (\n <div className=\"flex flex-wrap items-center justify-end gap-3 px-2 py-1.5\">\n {usedSpanTypes.map(type => {\n const spanUI = getSpanTypeUi(type);\n return (\n <div key={type} className=\"text-ui-sm text-neutral3 flex shrink-0 items-center gap-1\">\n <span\n className=\"inline-block size-1.5 shrink-0 rounded-full\"\n style={{ backgroundColor: spanUI?.color }}\n />\n {spanUI?.label \|\| type}\n </div>\n );\n })}\n </div>\n )}\n <div className=\"grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1\">\n {hierarchicalSpans?.map(span => (\n <TraceTimelineSpan\n key={span.id}\n span={span}\n siblings={hierarchicalSpans}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n fadedTypes={fadedTypes}\n featuredSpanIds={featuredSpanIds}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n chartWidth={chartWidth}\n />\n ))}\n </div>\n </>\n )}\n </>\n );\n}\n"],"names":["types"],"mappings":";;;;;;;~~AAsBO~~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~~MAXK~~,IAAA,CAAK;AAAA,~~KAab~~,CAAA,EACH;AAAA,GAAA,EACF,CAAA,EAEJ,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"trace-timeline.es.js","sources":["../../../../src/domains/traces/components/trace-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { spanTypePrefixes, getSpanTypeUi } from './shared';\nimport { TraceTimelineSpan } from './trace-timeline-span';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\ntype TraceTimelineProps = {\n hierarchicalSpans: UISpan[];\n onSpanClick: (id: string) => void;\n selectedSpanId?: string;\n isLoading?: boolean;\n fadedTypes?: string[];\n expandedSpanIds?: string[];\n setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n featuredSpanIds?: string[];\n /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). /\n revealSpanId?: string;\n chartWidth?: 'wide' \| 'default';\n /* Rendered full-width above the span type legend row. */\n leadingSlot?: ReactNode;\n};\n\nexport function TraceTimeline({\n hierarchicalSpans = [],\n onSpanClick,\n selectedSpanId,\n isLoading,\n fadedTypes,\n expandedSpanIds,\n setExpandedSpanIds,\n featuredSpanIds,\n revealSpanId,\n chartWidth = 'default',\n leadingSlot,\n}: TraceTimelineProps) {\n const overallLatency = hierarchicalSpans?.[0]?.latency \|\| 0;\n const overallStartTime = hierarchicalSpans?.[0]?.startTime \|\| '';\n\n const usedSpanTypes = useMemo(() => {\n const collectTypes = (spans: UISpan[]): Set<string> => {\n const types = new Set<string>();\n for (const span of spans) {\n const prefix = span.type?.toLowerCase().split('_')[0];\n if (prefix) types.add(prefix);\n if (span.spans) {\n for (const t of collectTypes(span.spans)) types.add(t);\n }\n }\n return types;\n };\n const types = collectTypes(hierarchicalSpans);\n const hasOther = [...types].some(t => !spanTypePrefixes.includes(t));\n const known = spanTypePrefixes.filter(p => p !== 'other' && types.has(p));\n if (hasOther) known.push('other');\n return known;\n }, [hierarchicalSpans]);\n\n return (\n <>\n {isLoading ? (\n <div\n className={cn(\n 'flex items-center justify-center gap-3 rounded-md bg-surface3/50 p-3 text-ui-sm text-neutral3',\n '[&_svg]:size-[1.25em] [&_svg]:opacity-50',\n )}\n >\n <Spinner /> Loading Trace Timeline ...\n </div>\n ) : (\n <>\n {leadingSlot && <div className=\"px-2 pt-1.5\">{leadingSlot}</div>}\n {usedSpanTypes.length > 0 && (\n <div className=\"flex flex-wrap items-center justify-end gap-3 px-2 py-1.5\">\n {usedSpanTypes.map(type => {\n const spanUI = getSpanTypeUi(type);\n return (\n <div key={type} className=\"text-ui-sm text-neutral3 flex shrink-0 items-center gap-1\">\n <span\n className=\"inline-block size-1.5 shrink-0 rounded-full\"\n style={{ backgroundColor: spanUI?.color }}\n />\n {spanUI?.label \|\| type}\n </div>\n );\n })}\n </div>\n )}\n <div className=\"grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1\">\n {hierarchicalSpans?.map(span => (\n <TraceTimelineSpan\n key={span.id}\n span={span}\n siblings={hierarchicalSpans}\n onSpanClick={onSpanClick}\n selectedSpanId={selectedSpanId}\n overallLatency={overallLatency}\n overallStartTime={overallStartTime}\n fadedTypes={fadedTypes}\n featuredSpanIds={featuredSpanIds}\n revealSpanId={revealSpanId}\n expandedSpanIds={expandedSpanIds}\n setExpandedSpanIds={setExpandedSpanIds}\n chartWidth={chartWidth}\n />\n ))}\n </div>\n </>\n )}\n </>\n );\n}\n"],"names":["types"],"mappings":"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"}

package/dist/src/domains/traces/components/timeline-name-col.d.ts CHANGED Viewed

@@ -6,10 +6,11 @@ type TimelineNameColProps = {
     depth?: number;
     onSpanClick?: (id: string) => void;
     selectedSpanId?: string;
+    revealSpanId?: string;
     isLastChild?: boolean;
     hasChildren?: boolean;
     isRootSpan?: boolean;
     isExpanded?: boolean;
 };
-export declare function TimelineNameCol({ span, spanUI, isFaded, depth, onSpanClick, selectedSpanId, isLastChild, hasChildren: _hasChildren, isRootSpan, isExpanded: _isExpanded, }: TimelineNameColProps): import("react").JSX.Element;
+export declare function TimelineNameCol({ span, spanUI, isFaded, depth, onSpanClick, selectedSpanId, revealSpanId, isLastChild, hasChildren: _hasChildren, isRootSpan, isExpanded: _isExpanded, }: TimelineNameColProps): import("react").JSX.Element;
 export {};

package/dist/src/domains/traces/components/trace-timeline-span.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ type TraceTimelineSpanProps = {
     depth?: number;
     onSpanClick?: (id: string) => void;
     selectedSpanId?: string;
+    revealSpanId?: string;
     isLastChild?: boolean;
     overallLatency?: number;
     overallStartTime?: string;
@@ -15,5 +16,5 @@ type TraceTimelineSpanProps = {
     setExpandedSpanIds?: React.Dispatch<React.SetStateAction<string[]>>;
     chartWidth?: 'wide' | 'default';
 };
-export declare function TraceTimelineSpan({ span, siblings, depth, onSpanClick, selectedSpanId, isLastChild, overallLatency, overallStartTime, fadedTypes, searchPhrase, featuredSpanIds, expandedSpanIds, setExpandedSpanIds, chartWidth, }: TraceTimelineSpanProps): import("react").JSX.Element;
+export declare function TraceTimelineSpan({ span, siblings, depth, onSpanClick, selectedSpanId, revealSpanId, isLastChild, overallLatency, overallStartTime, fadedTypes, searchPhrase, featuredSpanIds, expandedSpanIds, setExpandedSpanIds, chartWidth, }: TraceTimelineSpanProps): import("react").JSX.Element;
 export {};

package/dist/src/domains/traces/components/trace-timeline.d.ts CHANGED Viewed

@@ -9,9 +9,11 @@ type TraceTimelineProps = {
     expandedSpanIds?: string[];
     setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;
     featuredSpanIds?: string[];
+    /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). */
+    revealSpanId?: string;
     chartWidth?: 'wide' | 'default';
     /** Rendered full-width above the span type legend row. */
     leadingSlot?: ReactNode;
 };
-export declare function TraceTimeline({ hierarchicalSpans, onSpanClick, selectedSpanId, isLoading, fadedTypes, expandedSpanIds, setExpandedSpanIds, featuredSpanIds, chartWidth, leadingSlot, }: TraceTimelineProps): import("react").JSX.Element;
+export declare function TraceTimeline({ hierarchicalSpans, onSpanClick, selectedSpanId, isLoading, fadedTypes, expandedSpanIds, setExpandedSpanIds, featuredSpanIds, revealSpanId, chartWidth, leadingSlot, }: TraceTimelineProps): import("react").JSX.Element;
 export {};

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "53.1.0-alpha.2",
+  "version": "53.1.0-alpha.3",
   "description": "Mastra Playground components",
   "sideEffects": [
     "**/*.css"
@@ -160,8 +160,8 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/react": "1.4.12-alpha.2",
-    "@mastra/client-js": "^1.44.1-alpha.2"
+    "@mastra/react": "1.4.12-alpha.3",
+    "@mastra/client-js": "^1.44.1-alpha.3"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.4.1",
@@ -202,11 +202,11 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.1.10",
-    "@mastra/core": "1.66.0-alpha.2",
-    "@mastra/react": "1.4.12-alpha.2",
-    "@mastra/memory": "1.29.0-alpha.1",
-    "@mastra/client-js": "^1.44.1-alpha.2",
-    "@internal/lint": "0.0.131"
+    "@mastra/client-js": "^1.44.1-alpha.3",
+    "@internal/lint": "0.0.131",
+    "@mastra/core": "1.66.0-alpha.3",
+    "@mastra/memory": "1.29.0-alpha.2",
+    "@mastra/react": "1.4.12-alpha.3"
   },
   "homepage": "https://mastra.ai",
   "repository": {