@telorun/debug-ui 0.6.6 → 0.6.8
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.
- package/package.json +2 -2
- package/src/graph.test.ts +45 -45
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telorun/debug-ui",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.8",
|
|
4
4
|
"description": "Browser-safe debug event UI for Telo: wire types, filtering, SSE client, and React components for watching a running app's event stream.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"telo",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@dagrejs/dagre": "^3.0.0",
|
|
47
47
|
"@xyflow/react": "^12.10.2",
|
|
48
48
|
"lucide-react": "^1.8.0",
|
|
49
|
-
"@telorun/debug-wire": "0.4.
|
|
49
|
+
"@telorun/debug-wire": "0.4.6"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"react": ">=18",
|
package/src/graph.test.ts
CHANGED
|
@@ -177,73 +177,73 @@ describe("deriveGraph", () => {
|
|
|
177
177
|
});
|
|
178
178
|
|
|
179
179
|
describe("owner grouping", () => {
|
|
180
|
-
const todos: Owner = { kind: "Crud.
|
|
181
|
-
const users: Owner = { kind: "Crud.
|
|
180
|
+
const todos: Owner = { kind: "Crud.Api", name: "todos", id: "Crud.Api.todos" };
|
|
181
|
+
const users: Owner = { kind: "Crud.Api", name: "users", id: "Crud.Api.users" };
|
|
182
182
|
|
|
183
183
|
it("keeps same-named children of two templated instances from colliding", () => {
|
|
184
184
|
const { nodes } = deriveGraph([
|
|
185
|
-
createdR("Crud.
|
|
186
|
-
createdR("Crud.
|
|
185
|
+
createdR("Crud.Api", "todos"),
|
|
186
|
+
createdR("Crud.Api", "users"),
|
|
187
187
|
createdR("SqlRepo.Read", "reader", { owner: todos }),
|
|
188
188
|
createdR("SqlRepo.Read", "reader", { owner: users }),
|
|
189
189
|
]);
|
|
190
190
|
const readers = nodes.filter((n) => n.name === "reader");
|
|
191
191
|
expect(readers.map((n) => n.id).sort()).toEqual([
|
|
192
|
-
"Crud.
|
|
193
|
-
"Crud.
|
|
192
|
+
"Crud.Api.todos/SqlRepo.Read.reader",
|
|
193
|
+
"Crud.Api.users/SqlRepo.Read.reader",
|
|
194
194
|
]);
|
|
195
195
|
expect(readers.map((n) => n.ownerId).sort()).toEqual([
|
|
196
|
-
"Crud.
|
|
197
|
-
"Crud.
|
|
196
|
+
"Crud.Api.todos",
|
|
197
|
+
"Crud.Api.users",
|
|
198
198
|
]);
|
|
199
199
|
});
|
|
200
200
|
|
|
201
201
|
it("attributes an invocation to the right instance via ref.id", () => {
|
|
202
202
|
const { nodes } = deriveGraph([
|
|
203
|
-
createdR("Crud.
|
|
204
|
-
createdR("Crud.
|
|
203
|
+
createdR("Crud.Api", "todos"),
|
|
204
|
+
createdR("Crud.Api", "users"),
|
|
205
205
|
createdR("SqlRepo.Read", "reader", { owner: todos }),
|
|
206
206
|
createdR("SqlRepo.Read", "reader", { owner: users }),
|
|
207
|
-
dispId("reader", "SqlRepo.Read", "Crud.
|
|
207
|
+
dispId("reader", "SqlRepo.Read", "Crud.Api.todos/SqlRepo.Read.reader", "ok", "Invoked", {
|
|
208
208
|
inputs: {},
|
|
209
209
|
outputs: 1,
|
|
210
210
|
}),
|
|
211
211
|
]);
|
|
212
|
-
expect(nodes.find((n) => n.id === "Crud.
|
|
213
|
-
expect(nodes.find((n) => n.id === "Crud.
|
|
212
|
+
expect(nodes.find((n) => n.id === "Crud.Api.todos/SqlRepo.Read.reader")?.invokeCount).toBe(1);
|
|
213
|
+
expect(nodes.find((n) => n.id === "Crud.Api.users/SqlRepo.Read.reader")?.invokeCount).toBe(0);
|
|
214
214
|
});
|
|
215
215
|
|
|
216
216
|
it("collapseTopology hides children until their owner is expanded", () => {
|
|
217
217
|
const graph = deriveGraph([
|
|
218
|
-
createdR("Crud.
|
|
218
|
+
createdR("Crud.Api", "todos"),
|
|
219
219
|
createdR("SqlRepo.Read", "reader", { owner: todos }),
|
|
220
220
|
createdR("SqlRepo.Create", "creator", { owner: todos }),
|
|
221
221
|
]);
|
|
222
222
|
|
|
223
223
|
const collapsedDefault = collapseTopology(graph, new Set());
|
|
224
|
-
expect(collapsedDefault.nodes.map((n) => n.id)).toEqual(["Crud.
|
|
224
|
+
expect(collapsedDefault.nodes.map((n) => n.id)).toEqual(["Crud.Api.todos"]);
|
|
225
225
|
expect(collapsedDefault.nodes[0]).toMatchObject({ childCount: 2, expanded: false });
|
|
226
226
|
|
|
227
|
-
const expanded = collapseTopology(graph, new Set(["Crud.
|
|
227
|
+
const expanded = collapseTopology(graph, new Set(["Crud.Api.todos"]));
|
|
228
228
|
expect(expanded.nodes.map((n) => n.id).sort()).toEqual([
|
|
229
|
-
"Crud.
|
|
230
|
-
"Crud.
|
|
231
|
-
"Crud.
|
|
229
|
+
"Crud.Api.todos",
|
|
230
|
+
"Crud.Api.todos/SqlRepo.Create.creator",
|
|
231
|
+
"Crud.Api.todos/SqlRepo.Read.reader",
|
|
232
232
|
]);
|
|
233
|
-
expect(expanded.nodes.find((n) => n.id === "Crud.
|
|
233
|
+
expect(expanded.nodes.find((n) => n.id === "Crud.Api.todos")).toMatchObject({ expanded: true });
|
|
234
234
|
|
|
235
235
|
// Revealed children stay attached to their owner via ownership edges.
|
|
236
236
|
const owns = expanded.edges.filter((e) => e.ownership);
|
|
237
237
|
expect(owns.map((e) => e.target).sort()).toEqual([
|
|
238
|
-
"Crud.
|
|
239
|
-
"Crud.
|
|
238
|
+
"Crud.Api.todos/SqlRepo.Create.creator",
|
|
239
|
+
"Crud.Api.todos/SqlRepo.Read.reader",
|
|
240
240
|
]);
|
|
241
|
-
expect(owns.every((e) => e.source === "Crud.
|
|
241
|
+
expect(owns.every((e) => e.source === "Crud.Api.todos")).toBe(true);
|
|
242
242
|
});
|
|
243
243
|
|
|
244
244
|
it("adds no ownership edges while the owner is collapsed", () => {
|
|
245
245
|
const graph = deriveGraph([
|
|
246
|
-
createdR("Crud.
|
|
246
|
+
createdR("Crud.Api", "todos"),
|
|
247
247
|
createdR("SqlRepo.Read", "reader", { owner: todos }),
|
|
248
248
|
]);
|
|
249
249
|
expect(collapseTopology(graph, new Set()).edges.some((e) => e.ownership)).toBe(false);
|
|
@@ -252,7 +252,7 @@ describe("owner grouping", () => {
|
|
|
252
252
|
it("collapseTopology folds a hidden child's edge onto its owner", () => {
|
|
253
253
|
const graph = deriveGraph([
|
|
254
254
|
createdR("Sql.Connection", "db"),
|
|
255
|
-
createdR("Crud.
|
|
255
|
+
createdR("Crud.Api", "todos"),
|
|
256
256
|
createdR("SqlRepo.Read", "reader", {
|
|
257
257
|
owner: todos,
|
|
258
258
|
deps: [{ kind: "Sql.Connection", name: "db", id: "Sql.Connection.db" }],
|
|
@@ -260,8 +260,8 @@ describe("owner grouping", () => {
|
|
|
260
260
|
]);
|
|
261
261
|
const collapsed = collapseTopology(graph, new Set());
|
|
262
262
|
expect(collapsed.edges).toContainEqual({
|
|
263
|
-
id: "Crud.
|
|
264
|
-
source: "Crud.
|
|
263
|
+
id: "Crud.Api.todos->Sql.Connection.db",
|
|
264
|
+
source: "Crud.Api.todos",
|
|
265
265
|
target: "Sql.Connection.db",
|
|
266
266
|
});
|
|
267
267
|
// The child node itself is hidden while collapsed.
|
|
@@ -270,30 +270,30 @@ describe("owner grouping", () => {
|
|
|
270
270
|
});
|
|
271
271
|
|
|
272
272
|
describe("subtreeGraph (drill-down pane)", () => {
|
|
273
|
-
const todos: Owner = { kind: "Crud.
|
|
273
|
+
const todos: Owner = { kind: "Crud.Api", name: "todos", id: "Crud.Api.todos" };
|
|
274
274
|
|
|
275
275
|
it("links the parent only to children not already reached by a sibling", () => {
|
|
276
276
|
const topology = deriveGraph([
|
|
277
|
-
createdR("Crud.
|
|
277
|
+
createdR("Crud.Api", "todos"),
|
|
278
278
|
createdR("Http.Api", "api", {
|
|
279
279
|
owner: todos,
|
|
280
|
-
deps: [{ kind: "SqlRepo.Read", name: "reader", id: "Crud.
|
|
280
|
+
deps: [{ kind: "SqlRepo.Read", name: "reader", id: "Crud.Api.todos/SqlRepo.Read.reader" }],
|
|
281
281
|
}),
|
|
282
282
|
createdR("SqlRepo.Read", "reader", { owner: todos }),
|
|
283
283
|
]);
|
|
284
|
-
const sub = subtreeGraph(topology, "Crud.
|
|
284
|
+
const sub = subtreeGraph(topology, "Crud.Api.todos");
|
|
285
285
|
|
|
286
286
|
expect(sub.nodes.map((n) => n.id).sort()).toEqual([
|
|
287
|
-
"Crud.
|
|
288
|
-
"Crud.
|
|
289
|
-
"Crud.
|
|
287
|
+
"Crud.Api.todos",
|
|
288
|
+
"Crud.Api.todos/Http.Api.api",
|
|
289
|
+
"Crud.Api.todos/SqlRepo.Read.reader",
|
|
290
290
|
]);
|
|
291
|
-
expect(sub.nodes.find((n) => n.id === "Crud.
|
|
291
|
+
expect(sub.nodes.find((n) => n.id === "Crud.Api.todos")?.expanded).toBe(true);
|
|
292
292
|
|
|
293
293
|
// The parent owns `api` directly; `reader` is reached through `api`, so the
|
|
294
294
|
// redundant parent→reader ownership edge is dropped.
|
|
295
295
|
const owns = sub.edges.filter((e) => e.ownership);
|
|
296
|
-
expect(owns.map((e) => e.target)).toEqual(["Crud.
|
|
296
|
+
expect(owns.map((e) => e.target)).toEqual(["Crud.Api.todos/Http.Api.api"]);
|
|
297
297
|
expect(owns.some((e) => e.target.endsWith("SqlRepo.Read.reader"))).toBe(false);
|
|
298
298
|
|
|
299
299
|
// The dependency edge among children (api → reader) is kept.
|
|
@@ -301,8 +301,8 @@ describe("subtreeGraph (drill-down pane)", () => {
|
|
|
301
301
|
sub.edges.some(
|
|
302
302
|
(e) =>
|
|
303
303
|
!e.ownership &&
|
|
304
|
-
e.source === "Crud.
|
|
305
|
-
e.target === "Crud.
|
|
304
|
+
e.source === "Crud.Api.todos/Http.Api.api" &&
|
|
305
|
+
e.target === "Crud.Api.todos/SqlRepo.Read.reader",
|
|
306
306
|
),
|
|
307
307
|
).toBe(true);
|
|
308
308
|
});
|
|
@@ -311,34 +311,34 @@ describe("subtreeGraph (drill-down pane)", () => {
|
|
|
311
311
|
const reader: Owner = {
|
|
312
312
|
kind: "SqlRepo.Read",
|
|
313
313
|
name: "reader",
|
|
314
|
-
id: "Crud.
|
|
314
|
+
id: "Crud.Api.todos/SqlRepo.Read.reader",
|
|
315
315
|
};
|
|
316
316
|
const topology = deriveGraph([
|
|
317
|
-
createdR("Crud.
|
|
317
|
+
createdR("Crud.Api", "todos"),
|
|
318
318
|
createdR("SqlRepo.Read", "reader", { owner: todos }),
|
|
319
319
|
createdR("Sql.Query", "reader-query", { owner: reader }),
|
|
320
320
|
]);
|
|
321
321
|
|
|
322
|
-
const lvl1 = subtreeGraph(topology, "Crud.
|
|
322
|
+
const lvl1 = subtreeGraph(topology, "Crud.Api.todos");
|
|
323
323
|
expect(lvl1.nodes.find((n) => n.id === reader.id)?.childCount).toBe(1);
|
|
324
324
|
|
|
325
325
|
const lvl2 = subtreeGraph(topology, reader.id);
|
|
326
326
|
expect(lvl2.nodes.map((n) => n.id).sort()).toEqual([
|
|
327
|
-
"Crud.
|
|
328
|
-
"Crud.
|
|
327
|
+
"Crud.Api.todos/SqlRepo.Read.reader",
|
|
328
|
+
"Crud.Api.todos/SqlRepo.Read.reader/Sql.Query.reader-query",
|
|
329
329
|
]);
|
|
330
330
|
});
|
|
331
331
|
|
|
332
332
|
it("drops dependency edges that leave the subtree", () => {
|
|
333
333
|
const topology = deriveGraph([
|
|
334
334
|
createdR("Sql.Connection", "db"),
|
|
335
|
-
createdR("Crud.
|
|
335
|
+
createdR("Crud.Api", "todos"),
|
|
336
336
|
createdR("SqlRepo.Read", "reader", {
|
|
337
337
|
owner: todos,
|
|
338
338
|
deps: [{ kind: "Sql.Connection", name: "db", id: "Sql.Connection.db" }],
|
|
339
339
|
}),
|
|
340
340
|
]);
|
|
341
|
-
const sub = subtreeGraph(topology, "Crud.
|
|
341
|
+
const sub = subtreeGraph(topology, "Crud.Api.todos");
|
|
342
342
|
expect(sub.nodes.some((n) => n.id === "Sql.Connection.db")).toBe(false);
|
|
343
343
|
expect(sub.edges.some((e) => e.target === "Sql.Connection.db")).toBe(false);
|
|
344
344
|
});
|