feat(app): /graph force-directed entity graph (PR ι-graph)#47
Open
Ayaan2907 wants to merge 4 commits into
Open
feat(app): /graph force-directed entity graph (PR ι-graph)#47Ayaan2907 wants to merge 4 commits into
Ayaan2907 wants to merge 4 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
🚅 Deployed to the wingmic-pr-47 environment in wingmic
|
There was a problem hiding this comment.
Pull request overview
Adds a new authenticated /graph screen that visualizes a user-scoped entity graph (people connected to companies/events/topics) using a force-directed canvas, backed by a new graph.get tRPC procedure and covered by router + UI tests.
Changes:
- Introduces
graph.gettRPC procedure that assembles{ nodes, links }fromentities+entity{Companies,Events,Topics}(userId-scoped, soft-delete +sourceDeleted=false). - Implements
/graphserver route andGraphClientUI usingreact-force-graph-2dvia dynamic import (ssr: false). - Adds the new dependency (
react-force-graph-2d) plus Vitest coverage for router isolation/mapping and GraphClient behaviors.
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/superpowers/plans/2026-06-06-v0.1.2-pr-iota-graph.md | Implementation plan for the graph screen and associated backend/UI work. |
| bun.lock | Lockfile updates for the new graph visualization dependency chain. |
| apps/app/package.json | Adds react-force-graph-2d dependency. |
| apps/app/middleware.ts | Protects /graph behind auth and adds middleware matcher. |
| apps/app/lib/trpc/routers/graph.ts | New graph.get procedure building force-graph {nodes, links} payload. |
| apps/app/lib/trpc/routers/graph.test.ts | In-memory libSQL tests for graph isolation, filtering, and mapping. |
| apps/app/lib/trpc/routers/_app.ts | Registers the new graph router on the root tRPC router. |
| apps/app/app/graph/page.tsx | Server-loaded, auth-gated /graph page that calls graph.get. |
| apps/app/app/graph/GraphClient.tsx | Client-side force-directed canvas + filters + selected-node card UI. |
| apps/app/app/graph/tests/GraphClient.test.tsx | UI tests (mocking the graph lib) for rendering, navigation, and empty state. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+59
to
+61
| const links = data.links.filter( | ||
| (l) => visibleIds.has(l.source) && visibleIds.has(l.target), | ||
| ); |
Comment on lines
+211
to
+213
| <a | ||
| href={'/' + selected.kind + '/' + selected.id} | ||
| style={{ |
Comment on lines
+29
to
+34
| const people = await db.query.entities.findMany({ | ||
| where: and( | ||
| eq(schema.entities.ownerUserId, userId), | ||
| isNull(schema.entities.deletedAt), | ||
| ), | ||
| }); |
Comment on lines
+26
to
+31
| const KIND_COLOR: Record<NodeKind, string> = { | ||
| person: accent, // #FFC452 | ||
| company: blue, // #7DD3FC | ||
| event: 'var(--text-55)', | ||
| topic: violet, // #A78BFA | ||
| }; |
This was referenced Jun 6, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR ι-graph — graph screen
Adds
/graph— a force-directed canvas of the user's real entity graph. Second surface of the v0.1.2 queue (eng-review decision D=B: real-thin, not mocked — the edges already exist in the db).What changed
graph.gettRPC (lib/trpc/routers/graph.ts) — userId-scoped{ nodes, links }assembled fromentityCompanies/entityEvents/entityTopics, mirroringentity.detail's filters (ownerUserId,deletedAt IS NULL,sourceDeleted = false). People→company (works_at), →event (attended), →topic (discussed).GraphClient—react-force-graph-2ddynamically imported withssr: false; nodes colored by kind; tap a node → floating card with→ openlinking to/{kind}/{id}; filter chips per kind; empty state./graphroute — server-loaded, auth-gated; added tomiddlewarePROTECTED_PATHS.New dependency (approved)
react-force-graph-2d@1.29.1(+force-graph,react-kapsule,prop-types) — the canonical MIT force-graph React wrapper. It was assumed pre-installed by the plan but wasn't; added with lockfile integrity. User-approved before this PR.Tests
typecheck ✓ · lint ✓ · 92 pass (16 files).
graph.get: two-user isolation, node/link mapping, soft-delete +sourceDeletedexclusion, empty graph.GraphClient: node render, node→entity navigation, empty state.Known follow-up (not blocking)
Next in queue
ζ acts → η settings → κ onboarding → θ search (architecture locked).