@assistant-ui/react-o11y 0.0.39 → 0.0.41

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 (6) hide show
  1. package/dist/resources/SpanResource.d.ts.map +1 -1
  2. package/dist/resources/SpanResource.js +13 -10
  3. package/dist/resources/SpanResource.js.map +1 -1
  4. package/package.json +4 -4
  5. package/src/resources/SpanResource.test.tsx +33 -3
  6. package/src/resources/SpanResource.tsx +16 -8
package/dist/resources/SpanResource.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SpanResource.d.ts","names":[],"sources":["../../src/resources/SpanResource.tsx"],"mappings":";;;KAOY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;cA6PW,0CAAY,SAAA;EAlEhB,OAAA"}
1
+ {"version":3,"file":"SpanResource.d.ts","names":[],"sources":["../../src/resources/SpanResource.tsx"],"mappings":";;;KAOY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;cAqQW,0CAAY,SAAA;EAlEhB,OAAA"}
package/dist/resources/SpanResource.js CHANGED
@@ -98,18 +98,21 @@ function buildFlatList(allSpans, parents, collapsedIds) {
98
98
  }
99
99
  for (const group of children.values()) group.sort((a, b) => a.startedAt - b.startedAt);
100
100
  const result = [];
101
- function dfs(parentId) {
102
- const kids = children.get(parentId);
103
- if (!kids) return;
104
- for (const span of kids) {
105
- result.push({
106
- ...span,
107
- isCollapsed: collapsedIds.has(span.id)
108
- });
109
- if (!collapsedIds.has(span.id)) dfs(span.id);
101
+ const stack = [];
102
+ const roots = children.get(null) ?? [];
103
+ for (let index = roots.length - 1; index >= 0; index--) stack.push(roots[index]);
104
+ while (stack.length > 0) {
105
+ const span = stack.pop();
106
+ const isCollapsed = collapsedIds.has(span.id);
107
+ result.push({
108
+ ...span,
109
+ isCollapsed
110
+ });
111
+ if (!isCollapsed) {
112
+ const kids = children.get(span.id) ?? [];
113
+ for (let index = kids.length - 1; index >= 0; index--) stack.push(kids[index]);
110
114
  }
111
115
  }
112
- dfs(null);
113
116
  return result;
114
117
  }
115
118
  const useSpanChildResource = ({ span, timeRange, onToggleCollapse }) => {
package/dist/resources/SpanResource.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SpanResource.js","names":["useMemo","useState","resource","withKey","useClientLookup","ClientOutput","SpanItemState","SpanState","SpanData","id","parentSpanId","name","type","status","startedAt","endedAt","latencyMs","calculateDepth","spanId","parents","Map","cache","cached","get","undefined","path","current","depth","currentDepth","push","index","length","set","normalizeSpanParents","spanMap","span","values","has","resolved","Set","keys","pathIds","add","enrichSpans","rawSpans","allSpans","timeRange","min","max","depthCache","childrenCount","Infinity","hasChildren","isCollapsed","end","Date","now","buildFlatList","collapsedIds","children","parent","group","sort","a","b","result","dfs","parentId","kids","useSpanChildResource","onToggleCollapse","state","getState","child","Error","toggleCollapse","SpanChildResource","useSpanResource","t0","$","_c","spans","t1","setCollapsedIds","_temp","t2","visibleSpans","t3","Symbol","for","prev","next","delete","t4","t5","map","lookup","t6","t7","rootState","t8","_temp2","SpanResource"],"sources":["../../src/resources/SpanResource.tsx"],"sourcesContent":["import \"../o11y-scope\";\n\nimport { useMemo, useState } from \"react\";\nimport { resource, withKey } from \"@assistant-ui/tap\";\nimport { useClientLookup, type ClientOutput } from \"@assistant-ui/store\";\nimport type { SpanItemState, SpanState } from \"../o11y-scope\";\n\nexport type SpanData = {\n id: string;\n parentSpanId: string | null;\n name: string;\n type: string;\n status: \"running\" | \"completed\" | \"failed\" | \"skipped\";\n startedAt: number;\n endedAt: number | null;\n latencyMs: number | null;\n};\n\nfunction calculateDepth(\n spanId: string,\n parents: Map<string, string | null>,\n cache: Map<string, number>,\n): number {\n const cached = cache.get(spanId);\n if (cached !== undefined) return cached;\n\n const path: string[] = [];\n let current: string | null = spanId;\n let depth = -1;\n\n while (current !== null) {\n const currentDepth = cache.get(current);\n if (currentDepth !== undefined) {\n depth = currentDepth;\n break;\n }\n\n path.push(current);\n current = parents.get(current) ?? null;\n }\n\n for (let index = path.length - 1; index >= 0; index--) {\n depth += 1;\n cache.set(path[index]!, depth);\n }\n\n return depth;\n}\n\nfunction normalizeSpanParents(\n spanMap: Map<string, SpanData>,\n): Map<string, string | null> {\n const parents = new Map<string, string | null>();\n for (const span of spanMap.values()) {\n parents.set(\n span.id,\n span.parentSpanId && spanMap.has(span.parentSpanId)\n ? span.parentSpanId\n : null,\n );\n }\n\n const resolved = new Set<string>();\n for (const spanId of spanMap.keys()) {\n if (resolved.has(spanId)) continue;\n\n const path: string[] = [];\n const pathIds = new Set<string>();\n let current: string | null = spanId;\n\n while (current !== null && !resolved.has(current)) {\n if (pathIds.has(current)) {\n parents.set(current, null);\n break;\n }\n\n path.push(current);\n pathIds.add(current);\n current = parents.get(current) ?? null;\n }\n\n for (const id of path) resolved.add(id);\n }\n\n return parents;\n}\n\nfunction enrichSpans(rawSpans: SpanData[]): {\n allSpans: Map<string, SpanItemState>;\n parents: Map<string, string | null>;\n timeRange: { min: number; max: number };\n} {\n const spanMap = new Map<string, SpanData>();\n for (const span of rawSpans) {\n spanMap.set(span.id, span);\n }\n\n const parents = normalizeSpanParents(spanMap);\n const depthCache = new Map<string, number>();\n const childrenCount = new Map<string, number>();\n for (const span of rawSpans) {\n const parentSpanId = parents.get(span.id);\n if (parentSpanId) {\n childrenCount.set(\n parentSpanId,\n (childrenCount.get(parentSpanId) ?? 0) + 1,\n );\n }\n }\n\n const allSpans = new Map<string, SpanItemState>();\n let min = Infinity;\n let max = -Infinity;\n\n for (const span of rawSpans) {\n const depth = calculateDepth(span.id, parents, depthCache);\n const hasChildren = (childrenCount.get(span.id) ?? 0) > 0;\n allSpans.set(span.id, {\n ...span,\n parentSpanId: parents.get(span.id) ?? null,\n depth,\n hasChildren,\n isCollapsed: false,\n });\n\n if (span.startedAt < min) min = span.startedAt;\n const end = span.endedAt ?? Date.now();\n if (end > max) max = end;\n }\n\n if (min === Infinity) min = Date.now();\n if (max === -Infinity) max = Date.now();\n if (max === min) max = min + 100;\n\n return { allSpans, parents, timeRange: { min, max } };\n}\n\nfunction buildFlatList(\n allSpans: Map<string, SpanItemState>,\n parents: Map<string, string | null>,\n collapsedIds: Set<string>,\n): SpanItemState[] {\n const children = new Map<string | null, SpanItemState[]>();\n for (const span of allSpans.values()) {\n const parent = parents.get(span.id) ?? null;\n let group = children.get(parent);\n if (!group) {\n group = [];\n children.set(parent, group);\n }\n group.push(span);\n }\n\n for (const group of children.values()) {\n group.sort((a, b) => a.startedAt - b.startedAt);\n }\n\n const result: SpanItemState[] = [];\n function dfs(parentId: string | null) {\n const kids = children.get(parentId);\n if (!kids) return;\n for (const span of kids) {\n result.push({ ...span, isCollapsed: collapsedIds.has(span.id) });\n if (!collapsedIds.has(span.id)) {\n dfs(span.id);\n }\n }\n }\n dfs(null);\n return result;\n}\n\nconst useSpanChildResource = ({\n span,\n timeRange,\n onToggleCollapse,\n}: {\n span: SpanItemState;\n timeRange: { min: number; max: number };\n onToggleCollapse: (spanId: string) => void;\n}): ClientOutput<\"span\"> => {\n const state: SpanState = {\n ...span,\n children: [],\n timeRange,\n };\n return {\n getState: () => state,\n child: () => {\n throw new Error(\"child spans do not have children in flat mode\");\n },\n toggleCollapse: () => {\n onToggleCollapse(span.id);\n },\n };\n};\n\nconst SpanChildResource = resource(useSpanChildResource);\n\nconst useSpanResource = ({\n spans,\n}: {\n spans: SpanData[];\n}): ClientOutput<\"span\"> => {\n const { allSpans, parents, timeRange } = useMemo(\n () => enrichSpans(spans),\n [spans],\n );\n\n const [collapsedIds, setCollapsedIds] = useState<Set<string>>(\n () => new Set(),\n );\n\n const visibleSpans = useMemo(\n () => buildFlatList(allSpans, parents, collapsedIds),\n [allSpans, parents, collapsedIds],\n );\n\n const toggleCollapse = (spanId: string) => {\n setCollapsedIds((prev) => {\n const next = new Set(prev);\n if (next.has(spanId)) {\n next.delete(spanId);\n } else {\n next.add(spanId);\n }\n return next;\n });\n };\n\n const lookup = useClientLookup(\n visibleSpans.map((span) =>\n withKey(\n span.id,\n SpanChildResource({\n span,\n timeRange,\n onToggleCollapse: toggleCollapse,\n }),\n ),\n ),\n );\n\n const rootState: SpanState = {\n id: \"__root__\",\n parentSpanId: null,\n name: \"\",\n type: \"root\",\n status: \"completed\",\n startedAt: timeRange.min,\n endedAt: timeRange.max,\n latencyMs: timeRange.max - timeRange.min,\n depth: -1,\n hasChildren: lookup.state.length > 0,\n isCollapsed: false,\n children: lookup.state,\n timeRange,\n };\n\n return {\n getState: () => rootState,\n child: lookup.get,\n toggleCollapse: () => {\n // Root span collapse is a no-op\n },\n };\n};\n\nexport const SpanResource = resource(useSpanResource);\n"],"mappings":"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"}
1
+ {"version":3,"file":"SpanResource.js","names":["useMemo","useState","resource","withKey","useClientLookup","ClientOutput","SpanItemState","SpanState","SpanData","id","parentSpanId","name","type","status","startedAt","endedAt","latencyMs","calculateDepth","spanId","parents","Map","cache","cached","get","undefined","path","current","depth","currentDepth","push","index","length","set","normalizeSpanParents","spanMap","span","values","has","resolved","Set","keys","pathIds","add","enrichSpans","rawSpans","allSpans","timeRange","min","max","depthCache","childrenCount","Infinity","hasChildren","isCollapsed","end","Date","now","buildFlatList","collapsedIds","children","parent","group","sort","a","b","result","stack","roots","pop","kids","useSpanChildResource","onToggleCollapse","state","getState","child","Error","toggleCollapse","SpanChildResource","useSpanResource","t0","$","_c","spans","t1","setCollapsedIds","_temp","t2","visibleSpans","t3","Symbol","for","prev","next","delete","t4","t5","map","lookup","t6","t7","rootState","t8","_temp2","SpanResource"],"sources":["../../src/resources/SpanResource.tsx"],"sourcesContent":["import \"../o11y-scope\";\n\nimport { useMemo, useState } from \"react\";\nimport { resource, withKey } from \"@assistant-ui/tap\";\nimport { useClientLookup, type ClientOutput } from \"@assistant-ui/store\";\nimport type { SpanItemState, SpanState } from \"../o11y-scope\";\n\nexport type SpanData = {\n id: string;\n parentSpanId: string | null;\n name: string;\n type: string;\n status: \"running\" | \"completed\" | \"failed\" | \"skipped\";\n startedAt: number;\n endedAt: number | null;\n latencyMs: number | null;\n};\n\nfunction calculateDepth(\n spanId: string,\n parents: Map<string, string | null>,\n cache: Map<string, number>,\n): number {\n const cached = cache.get(spanId);\n if (cached !== undefined) return cached;\n\n const path: string[] = [];\n let current: string | null = spanId;\n let depth = -1;\n\n while (current !== null) {\n const currentDepth = cache.get(current);\n if (currentDepth !== undefined) {\n depth = currentDepth;\n break;\n }\n\n path.push(current);\n current = parents.get(current) ?? null;\n }\n\n for (let index = path.length - 1; index >= 0; index--) {\n depth += 1;\n cache.set(path[index]!, depth);\n }\n\n return depth;\n}\n\nfunction normalizeSpanParents(\n spanMap: Map<string, SpanData>,\n): Map<string, string | null> {\n const parents = new Map<string, string | null>();\n for (const span of spanMap.values()) {\n parents.set(\n span.id,\n span.parentSpanId && spanMap.has(span.parentSpanId)\n ? span.parentSpanId\n : null,\n );\n }\n\n const resolved = new Set<string>();\n for (const spanId of spanMap.keys()) {\n if (resolved.has(spanId)) continue;\n\n const path: string[] = [];\n const pathIds = new Set<string>();\n let current: string | null = spanId;\n\n while (current !== null && !resolved.has(current)) {\n if (pathIds.has(current)) {\n parents.set(current, null);\n break;\n }\n\n path.push(current);\n pathIds.add(current);\n current = parents.get(current) ?? null;\n }\n\n for (const id of path) resolved.add(id);\n }\n\n return parents;\n}\n\nfunction enrichSpans(rawSpans: SpanData[]): {\n allSpans: Map<string, SpanItemState>;\n parents: Map<string, string | null>;\n timeRange: { min: number; max: number };\n} {\n const spanMap = new Map<string, SpanData>();\n for (const span of rawSpans) {\n spanMap.set(span.id, span);\n }\n\n const parents = normalizeSpanParents(spanMap);\n const depthCache = new Map<string, number>();\n const childrenCount = new Map<string, number>();\n for (const span of rawSpans) {\n const parentSpanId = parents.get(span.id);\n if (parentSpanId) {\n childrenCount.set(\n parentSpanId,\n (childrenCount.get(parentSpanId) ?? 0) + 1,\n );\n }\n }\n\n const allSpans = new Map<string, SpanItemState>();\n let min = Infinity;\n let max = -Infinity;\n\n for (const span of rawSpans) {\n const depth = calculateDepth(span.id, parents, depthCache);\n const hasChildren = (childrenCount.get(span.id) ?? 0) > 0;\n allSpans.set(span.id, {\n ...span,\n parentSpanId: parents.get(span.id) ?? null,\n depth,\n hasChildren,\n isCollapsed: false,\n });\n\n if (span.startedAt < min) min = span.startedAt;\n const end = span.endedAt ?? Date.now();\n if (end > max) max = end;\n }\n\n if (min === Infinity) min = Date.now();\n if (max === -Infinity) max = Date.now();\n if (max === min) max = min + 100;\n\n return { allSpans, parents, timeRange: { min, max } };\n}\n\nfunction buildFlatList(\n allSpans: Map<string, SpanItemState>,\n parents: Map<string, string | null>,\n collapsedIds: Set<string>,\n): SpanItemState[] {\n const children = new Map<string | null, SpanItemState[]>();\n for (const span of allSpans.values()) {\n const parent = parents.get(span.id) ?? null;\n let group = children.get(parent);\n if (!group) {\n group = [];\n children.set(parent, group);\n }\n group.push(span);\n }\n\n for (const group of children.values()) {\n group.sort((a, b) => a.startedAt - b.startedAt);\n }\n\n const result: SpanItemState[] = [];\n const stack: SpanItemState[] = [];\n const roots = children.get(null) ?? [];\n for (let index = roots.length - 1; index >= 0; index--) {\n stack.push(roots[index]!);\n }\n\n while (stack.length > 0) {\n const span = stack.pop()!;\n const isCollapsed = collapsedIds.has(span.id);\n result.push({ ...span, isCollapsed });\n\n if (!isCollapsed) {\n const kids = children.get(span.id) ?? [];\n for (let index = kids.length - 1; index >= 0; index--) {\n stack.push(kids[index]!);\n }\n }\n }\n\n return result;\n}\n\nconst useSpanChildResource = ({\n span,\n timeRange,\n onToggleCollapse,\n}: {\n span: SpanItemState;\n timeRange: { min: number; max: number };\n onToggleCollapse: (spanId: string) => void;\n}): ClientOutput<\"span\"> => {\n const state: SpanState = {\n ...span,\n children: [],\n timeRange,\n };\n return {\n getState: () => state,\n child: () => {\n throw new Error(\"child spans do not have children in flat mode\");\n },\n toggleCollapse: () => {\n onToggleCollapse(span.id);\n },\n };\n};\n\nconst SpanChildResource = resource(useSpanChildResource);\n\nconst useSpanResource = ({\n spans,\n}: {\n spans: SpanData[];\n}): ClientOutput<\"span\"> => {\n const { allSpans, parents, timeRange } = useMemo(\n () => enrichSpans(spans),\n [spans],\n );\n\n const [collapsedIds, setCollapsedIds] = useState<Set<string>>(\n () => new Set(),\n );\n\n const visibleSpans = useMemo(\n () => buildFlatList(allSpans, parents, collapsedIds),\n [allSpans, parents, collapsedIds],\n );\n\n const toggleCollapse = (spanId: string) => {\n setCollapsedIds((prev) => {\n const next = new Set(prev);\n if (next.has(spanId)) {\n next.delete(spanId);\n } else {\n next.add(spanId);\n }\n return next;\n });\n };\n\n const lookup = useClientLookup(\n visibleSpans.map((span) =>\n withKey(\n span.id,\n SpanChildResource({\n span,\n timeRange,\n onToggleCollapse: toggleCollapse,\n }),\n ),\n ),\n );\n\n const rootState: SpanState = {\n id: \"__root__\",\n parentSpanId: null,\n name: \"\",\n type: \"root\",\n status: \"completed\",\n startedAt: timeRange.min,\n endedAt: timeRange.max,\n latencyMs: timeRange.max - timeRange.min,\n depth: -1,\n hasChildren: lookup.state.length > 0,\n isCollapsed: false,\n children: lookup.state,\n timeRange,\n };\n\n return {\n getState: () => rootState,\n child: lookup.get,\n toggleCollapse: () => {\n // Root span collapse is a no-op\n },\n };\n};\n\nexport const SpanResource = resource(useSpanResource);\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@assistant-ui/react-o11y",
3
- "version": "0.0.39",
3
+ "version": "0.0.41",
4
4
  "description": "Observability primitives for @assistant-ui",
5
5
  "keywords": [
6
6
  "observability",
@@ -29,8 +29,8 @@
29
29
  "sideEffects": false,
30
30
  "dependencies": {
31
31
  "@radix-ui/react-primitive": "^2.1.10",
32
- "@assistant-ui/store": "0.3.9",
33
- "@assistant-ui/tap": "0.9.12"
32
+ "@assistant-ui/store": "0.3.10",
33
+ "@assistant-ui/tap": "0.9.14"
34
34
  },
35
35
  "peerDependencies": {
36
36
  "@types/react": "*",
@@ -47,7 +47,7 @@
47
47
  "react": "^19.2.8",
48
48
  "react-dom": "^19.2.8",
49
49
  "vitest": "^4.1.10",
50
- "@assistant-ui/x-buildutils": "0.0.22"
50
+ "@assistant-ui/x-buildutils": "0.0.23"
51
51
  },
52
52
  "publishConfig": {
53
53
  "access": "public",
package/src/resources/SpanResource.test.tsx CHANGED
@@ -4,14 +4,18 @@ import { AuiProvider, useAui } from "@assistant-ui/store";
4
4
  import * as SpanPrimitive from "../primitives/span";
5
5
  import { SpanResource, type SpanData } from "./SpanResource";
6
6
 
7
- const createSpan = (id: string, parentSpanId: string | null): SpanData => ({
7
+ const createSpan = (
8
+ id: string,
9
+ parentSpanId: string | null,
10
+ startedAt = 0,
11
+ ): SpanData => ({
8
12
  id,
9
13
  parentSpanId,
10
14
  name: id,
11
15
  type: "test",
12
16
  status: "completed",
13
- startedAt: 0,
14
- endedAt: 1,
17
+ startedAt,
18
+ endedAt: startedAt + 1,
15
19
  latencyMs: 1,
16
20
  });
17
21
 
@@ -103,4 +107,30 @@ describe("SpanResource", () => {
103
107
  'data-span-id="orphan" data-parent-span-id="root" data-span-depth="0"',
104
108
  );
105
109
  });
110
+
111
+ it("preserves depth-first start-time ordering", () => {
112
+ const html = renderSpans([
113
+ createSpan("root", null),
114
+ createSpan("later", "root", 2),
115
+ createSpan("earlier", "root", 1),
116
+ createSpan("nested", "earlier", 3),
117
+ ]);
118
+
119
+ const spanIds = [...html.matchAll(/data-span-id="([^"]+)"/g)].map(
120
+ (match) => match[1],
121
+ );
122
+ expect(spanIds).toEqual(["root", "earlier", "nested", "later"]);
123
+ });
124
+
125
+ it("renders deeply nested parent chains without overflowing the stack", () => {
126
+ const spans = Array.from({ length: 20_000 }, (_, index) =>
127
+ createSpan(`span-${index}`, index === 0 ? null : `span-${index - 1}`),
128
+ );
129
+
130
+ const html = renderSpans(spans);
131
+
132
+ expect(html).toContain(
133
+ 'data-span-id="span-19999" data-parent-span-id="span-19998" data-span-depth="19999"',
134
+ );
135
+ });
106
136
  });
package/src/resources/SpanResource.tsx CHANGED
@@ -156,17 +156,25 @@ function buildFlatList(
156
156
  }
157
157
 
158
158
  const result: SpanItemState[] = [];
159
- function dfs(parentId: string | null) {
160
- const kids = children.get(parentId);
161
- if (!kids) return;
162
- for (const span of kids) {
163
- result.push({ ...span, isCollapsed: collapsedIds.has(span.id) });
164
- if (!collapsedIds.has(span.id)) {
165
- dfs(span.id);
159
+ const stack: SpanItemState[] = [];
160
+ const roots = children.get(null) ?? [];
161
+ for (let index = roots.length - 1; index >= 0; index--) {
162
+ stack.push(roots[index]!);
163
+ }
164
+
165
+ while (stack.length > 0) {
166
+ const span = stack.pop()!;
167
+ const isCollapsed = collapsedIds.has(span.id);
168
+ result.push({ ...span, isCollapsed });
169
+
170
+ if (!isCollapsed) {
171
+ const kids = children.get(span.id) ?? [];
172
+ for (let index = kids.length - 1; index >= 0; index--) {
173
+ stack.push(kids[index]!);
166
174
  }
167
175
  }
168
176
  }
169
- dfs(null);
177
+
170
178
  return result;
171
179
  }
172
180