@assistant-ui/react-o11y 0.0.18 → 0.0.21
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.
|
@@ -11,11 +11,9 @@ type SpanData = {
|
|
|
11
11
|
endedAt: number | null;
|
|
12
12
|
latencyMs: number | null;
|
|
13
13
|
};
|
|
14
|
-
declare const SpanResource: (
|
|
14
|
+
declare const SpanResource: import("@assistant-ui/tap").Resource<ClientOutput<"span">, [{
|
|
15
15
|
spans: SpanData[];
|
|
16
|
-
}
|
|
17
|
-
spans: SpanData[];
|
|
18
|
-
}>;
|
|
16
|
+
}]>;
|
|
19
17
|
//#endregion
|
|
20
18
|
export { SpanData, SpanResource };
|
|
21
19
|
//# sourceMappingURL=SpanResource.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpanResource.d.ts","names":[],"sources":["../../src/resources/SpanResource.tsx"],"mappings":";;;KAOY,QAAA;EACV,EAAA;EACA,YAAA;EACA,IAAA;EACA,IAAA;EACA,MAAA;EACA,SAAA;EACA,OAAA;EACA,SAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"SpanResource.d.ts","names":[],"sources":["../../src/resources/SpanResource.tsx"],"mappings":";;;KAOY,QAAA;EACV,EAAA;EACA,YAAA;EACA,IAAA;EACA,IAAA;EACA,MAAA;EACA,SAAA;EACA,OAAA;EACA,SAAA;AAAA;AAAA,cAgMW,YAAA,8BAAY,QAAA,CAAA,YAAA;SAjEhB,QAAQ;AAAA"}
|
|
@@ -74,7 +74,7 @@ function buildFlatList(allSpans, collapsedIds) {
|
|
|
74
74
|
dfs(null);
|
|
75
75
|
return result;
|
|
76
76
|
}
|
|
77
|
-
const
|
|
77
|
+
const useSpanChildResource = ({ span, timeRange, onToggleCollapse }) => {
|
|
78
78
|
const state = {
|
|
79
79
|
...span,
|
|
80
80
|
children: [],
|
|
@@ -89,8 +89,9 @@ const SpanChildResource = resource(function SpanChildResource({ span, timeRange,
|
|
|
89
89
|
onToggleCollapse(span.id);
|
|
90
90
|
}
|
|
91
91
|
};
|
|
92
|
-
}
|
|
93
|
-
const
|
|
92
|
+
};
|
|
93
|
+
const SpanChildResource = resource(useSpanChildResource);
|
|
94
|
+
const useSpanResource = ({ spans }) => {
|
|
94
95
|
const { allSpans, timeRange } = useMemo(() => enrichSpans(spans), [spans]);
|
|
95
96
|
const [collapsedIds, setCollapsedIds] = useState(() => /* @__PURE__ */ new Set());
|
|
96
97
|
const visibleSpans = useMemo(() => buildFlatList(allSpans, collapsedIds), [allSpans, collapsedIds]);
|
|
@@ -131,7 +132,8 @@ const SpanResource = resource(function SpanResource({ spans }) {
|
|
|
131
132
|
child: lookup.get,
|
|
132
133
|
toggleCollapse: () => {}
|
|
133
134
|
};
|
|
134
|
-
}
|
|
135
|
+
};
|
|
136
|
+
const SpanResource = resource(useSpanResource);
|
|
135
137
|
//#endregion
|
|
136
138
|
export { SpanResource };
|
|
137
139
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpanResource.js","names":[],"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 spanMap: Map<string, SpanData>,\n cache: Map<string, number>,\n): number {\n const cached = cache.get(spanId);\n if (cached !== undefined) return cached;\n\n const span = spanMap.get(spanId);\n if (!span?.parentSpanId) {\n cache.set(spanId, 0);\n return 0;\n }\n\n const depth = calculateDepth(span.parentSpanId, spanMap, cache) + 1;\n cache.set(spanId, depth);\n return depth;\n}\n\nfunction enrichSpans(rawSpans: SpanData[]): {\n allSpans: Map<string, SpanItemState>;\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 depthCache = new Map<string, number>();\n const childrenCount = new Map<string, number>();\n for (const span of rawSpans) {\n if (span.parentSpanId) {\n childrenCount.set(\n span.parentSpanId,\n (childrenCount.get(span.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, spanMap, depthCache);\n const hasChildren = (childrenCount.get(span.id) ?? 0) > 0;\n allSpans.set(span.id, { ...span, depth, hasChildren, isCollapsed: false });\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, timeRange: { min, max } };\n}\n\nfunction buildFlatList(\n allSpans: Map<string, SpanItemState>,\n collapsedIds: Set<string>,\n): SpanItemState[] {\n const children = new Map<string | null, SpanItemState[]>();\n for (const span of allSpans.values()) {\n const parent = span.parentSpanId ?? 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
|
|
1
|
+
{"version":3,"file":"SpanResource.js","names":[],"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 spanMap: Map<string, SpanData>,\n cache: Map<string, number>,\n): number {\n const cached = cache.get(spanId);\n if (cached !== undefined) return cached;\n\n const span = spanMap.get(spanId);\n if (!span?.parentSpanId) {\n cache.set(spanId, 0);\n return 0;\n }\n\n const depth = calculateDepth(span.parentSpanId, spanMap, cache) + 1;\n cache.set(spanId, depth);\n return depth;\n}\n\nfunction enrichSpans(rawSpans: SpanData[]): {\n allSpans: Map<string, SpanItemState>;\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 depthCache = new Map<string, number>();\n const childrenCount = new Map<string, number>();\n for (const span of rawSpans) {\n if (span.parentSpanId) {\n childrenCount.set(\n span.parentSpanId,\n (childrenCount.get(span.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, spanMap, depthCache);\n const hasChildren = (childrenCount.get(span.id) ?? 0) > 0;\n allSpans.set(span.id, { ...span, depth, hasChildren, isCollapsed: false });\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, timeRange: { min, max } };\n}\n\nfunction buildFlatList(\n allSpans: Map<string, SpanItemState>,\n collapsedIds: Set<string>,\n): SpanItemState[] {\n const children = new Map<string | null, SpanItemState[]>();\n for (const span of allSpans.values()) {\n const parent = span.parentSpanId ?? 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, timeRange } = useMemo(() => enrichSpans(spans), [spans]);\n\n const [collapsedIds, setCollapsedIds] = useState<Set<string>>(\n () => new Set(),\n );\n\n const visibleSpans = useMemo(\n () => buildFlatList(allSpans, collapsedIds),\n [allSpans, 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 () =>\n visibleSpans.map((span) =>\n withKey(\n span.id,\n SpanChildResource({\n span,\n timeRange,\n onToggleCollapse: toggleCollapse,\n }),\n ),\n ),\n [visibleSpans, timeRange, toggleCollapse],\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.
|
|
3
|
+
"version": "0.0.21",
|
|
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.5",
|
|
32
|
-
"@assistant-ui/store": "0.2.
|
|
33
|
-
"@assistant-ui/tap": "0.
|
|
32
|
+
"@assistant-ui/store": "0.2.16",
|
|
33
|
+
"@assistant-ui/tap": "0.7.1"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"@types/react": "*",
|
|
@@ -110,7 +110,7 @@ function buildFlatList(
|
|
|
110
110
|
return result;
|
|
111
111
|
}
|
|
112
112
|
|
|
113
|
-
const
|
|
113
|
+
const useSpanChildResource = ({
|
|
114
114
|
span,
|
|
115
115
|
timeRange,
|
|
116
116
|
onToggleCollapse,
|
|
@@ -118,7 +118,7 @@ const SpanChildResource = resource(function SpanChildResource({
|
|
|
118
118
|
span: SpanItemState;
|
|
119
119
|
timeRange: { min: number; max: number };
|
|
120
120
|
onToggleCollapse: (spanId: string) => void;
|
|
121
|
-
}): ClientOutput<"span"> {
|
|
121
|
+
}): ClientOutput<"span"> => {
|
|
122
122
|
const state: SpanState = {
|
|
123
123
|
...span,
|
|
124
124
|
children: [],
|
|
@@ -133,13 +133,15 @@ const SpanChildResource = resource(function SpanChildResource({
|
|
|
133
133
|
onToggleCollapse(span.id);
|
|
134
134
|
},
|
|
135
135
|
};
|
|
136
|
-
}
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
const SpanChildResource = resource(useSpanChildResource);
|
|
137
139
|
|
|
138
|
-
|
|
140
|
+
const useSpanResource = ({
|
|
139
141
|
spans,
|
|
140
142
|
}: {
|
|
141
143
|
spans: SpanData[];
|
|
142
|
-
}): ClientOutput<"span"> {
|
|
144
|
+
}): ClientOutput<"span"> => {
|
|
143
145
|
const { allSpans, timeRange } = useMemo(() => enrichSpans(spans), [spans]);
|
|
144
146
|
|
|
145
147
|
const [collapsedIds, setCollapsedIds] = useState<Set<string>>(
|
|
@@ -201,4 +203,6 @@ export const SpanResource = resource(function SpanResource({
|
|
|
201
203
|
// Root span collapse is a no-op
|
|
202
204
|
},
|
|
203
205
|
};
|
|
204
|
-
}
|
|
206
|
+
};
|
|
207
|
+
|
|
208
|
+
export const SpanResource = resource(useSpanResource);
|