Enhance graph components and layout with new filtering and sidebar features#5
Merged
Conversation
…pacing adjustments
feat(docker): add workflows for building and pushing Docker images refactor(prerequisites): update Playwright installation command refactor(index): simplify page title for clarity test(config): enhance tests for LINK_PORT and validation errors
…ecks workflow Co-authored-by: Copilot <copilot@github.com>
…andling - Added EditorSidebar component for managing nodes and edges, including creation, editing, and deletion functionalities. - Introduced GraphMap component for visualizing the graph structure with interactive node and edge selection. - Created reusable components: TypeFilterControl, Panel, TabButton, and MetadataEditor for better UI organization. - Defined types for metadata, graph nodes, edges, and types in a new types.ts file. - Implemented utility functions for API requests, form handling, and metadata serialization in utils.ts. Co-authored-by: Copilot <copilot@github.com>
There was a problem hiding this comment.
Pull request overview
This PR upgrades the Link project’s graph UI and layout engine while also tightening developer tooling and operational workflows (typechecking, GitHub Actions release pipelines), plus small API/config robustness improvements.
Changes:
- Introduces a new graph map experience (zoom/pan/fullscreen, type-based filtering/search) and moves editing into a dedicated sidebar UI.
- Refactors the graph layout algorithm to better space dense components, account for node “radius”, and improve separation between clusters; adds/updates layout tests.
- Adds CI/CD workflows for PR checks and release artifacts (Docker + binaries), adds a
typecheckscript, and strengthens API/config behavior (bootstrap seed conflict +LINK_PORTsupport).
Reviewed changes
Copilot reviewed 25 out of 28 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.json | Adds Bun typings configuration; removes TS path alias config. |
| src/storage/sqlite.test.ts | Adjusts deletion timestamp expectation in repository test. |
| src/server/config.ts | Adds LINK_PORT env support for port selection and updates error message. |
| src/server/config.test.ts | Adds tests for LINK_PORT precedence and validation. |
| src/server/app.ts | Tightens Bun typings for index dependency and server return type. |
| src/realtime/hub.ts | Tightens Bun WebSocket typings to ServerWebSocket<undefined>. |
| src/index.html | Updates document title. |
| src/index.css | Adds styles for graph map, filters menu, and search results UI. |
| src/graph/layout.ts | Major layout engine update: spacing controls, clustering, node radii-aware bounds, and new layout heuristics. |
| src/graph/layout.test.ts | Expands test suite to cover new layout behavior (clearance, clustering separation, degree spacing). |
| src/app/utils.ts | Extracts client helpers (API wrapper, form parsing, metadata serialization). |
| src/app/types.ts | Introduces shared app-level types and emptyGraph. |
| src/app/components.tsx | Adds reusable UI components (filter control, panel, tabs, metadata editor). |
| src/app/GraphMap.tsx | New interactive SVG graph renderer (zoom/pan, fullscreen, filtering dimming, search integration). |
| src/app/EditorSidebar.tsx | New sidebar-based graph editor UI for nodes/edges/types. |
| src/api/http.ts | Refactors routes via defineRoutes, tightens Bun types, adds 409 conflict behavior for bootstrap seeding. |
| src/api/http.test.ts | Adds test for bootstrap seed conflict; improves tool-result parsing robustness. |
| src/App.tsx | Large UI refactor: replaces old panels with GraphMap + sidebar editor + filters/search. |
| package.json | Adds typecheck script and runs it as part of build. |
| bun-env.d.ts | Adds module typing for *.css imports. |
| .vscode/mcp.json | Adds local MCP server config for development. |
| .playwright/cli.config.json | Removes Playwright CLI custom browser config. |
| .gitignore | Ignores Playwright install directories. |
| .github/workflows/pr-checks.yml | Adds PR build/test workflow. |
| .github/workflows/docker-release.yml | Adds Docker multi-arch build/push on releases. |
| .github/workflows/docker-main.yml | Adds Docker build/push on main with a health check. |
| .github/workflows/binary-release.yml | Adds cross-platform binary builds and release uploads. |
| .devcontainer/install-prerequisites.sh | Installs all Playwright browsers instead of Chromium-only. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+215
to
+223
| if (hasDragged && (deltaX !== 0 || deltaY !== 0)) { | ||
| const svgBounds = event.currentTarget.getBoundingClientRect(); | ||
| const graphUnitsPerClientPixelX = layout.bounds.width / svgBounds.width; | ||
| const graphUnitsPerClientPixelY = layout.bounds.height / svgBounds.height; | ||
|
|
||
| setOffset(current => ({ | ||
| x: current.x + deltaX * graphUnitsPerClientPixelX, | ||
| y: current.y + deltaY * graphUnitsPerClientPixelY, | ||
| })); |
Comment on lines
+5
to
+6
| headers: { "content-type": "application/json", ...(init?.headers ?? {}) }, | ||
| ...init, |
Comment on lines
+92
to
+98
| <aside | ||
| id="graph-editor-sidebar" | ||
| className={props.editorSidebarOpen | ||
| ? "fixed bottom-6 right-6 top-20 z-40 w-[min(32rem,calc(100vw-3rem))] translate-x-0 opacity-100 transition-all duration-300 ease-out" | ||
| : "pointer-events-none fixed bottom-6 right-6 top-20 z-40 w-[min(32rem,calc(100vw-3rem))] translate-x-[calc(100%+1.5rem)] opacity-0 transition-all duration-300 ease-out"} | ||
| aria-hidden={!props.editorSidebarOpen} | ||
| > |
Comment on lines
459
to
+463
| return ( | ||
| <main className="min-h-screen bg-zinc-950 text-zinc-100"> | ||
| <header className="border-b border-zinc-800 bg-zinc-900/80 px-6 py-5"> | ||
| <div className="mx-auto flex max-w-7xl flex-col gap-3 md:flex-row md:items-end md:justify-between"> | ||
| <div> | ||
| <p className="text-sm font-semibold uppercase tracking-[0.3em] text-violet-300">Link</p> | ||
| <h1 className="text-3xl font-bold">Project interaction graph</h1> | ||
| <p className="mt-2 max-w-3xl text-zinc-300"> | ||
| Manage flexible entities, relationship types, metadata, and realtime graph updates from one deterministic UI. | ||
| </p> | ||
| </div> | ||
| <div className="rounded-xl border border-zinc-700 bg-zinc-900 px-4 py-3 text-sm"> | ||
| <strong>Version:</strong> {graph.version} · <strong>Nodes:</strong> {graph.nodes.length} · <strong>Edges:</strong>{" "} | ||
| {graph.edges.length} | ||
| </div> | ||
| <main className="flex h-screen flex-col bg-zinc-950 text-zinc-100"> | ||
| <header className="flex-none border-b border-zinc-800 bg-zinc-900/80 px-6 py-5"> | ||
| <div className="flex items-center justify-between gap-4"> | ||
| <p className="text-sm font-semibold uppercase tracking-[0.3em] text-violet-300">Link</p> |
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.
This pull request introduces several significant improvements to the project's CI/CD workflows, API robustness, and developer tooling. The most notable updates are the addition of comprehensive GitHub Actions workflows for building, testing, and releasing both binaries and Docker images, as well as enhancements to the HTTP API for improved error handling and type safety.
CI/CD Workflow Enhancements:
.github/workflows/pr-checks.yml: Runs build and test checks on pull requests to ensure code quality..github/workflows/binary-release.yml: Builds and uploads cross-platform standalone binaries on release publication..github/workflows/docker-main.yml: Builds and pushes Docker images for themainbranch, including health checks..github/workflows/docker-release.yml: Builds and pushes multi-platform Docker images on release publication.API Improvements:
/api/admin/seed/bootstrapnow returns a 409 Conflict if bootstrap seeding is attempted when types already exist, with corresponding test coverage. [1] [2]defineRouteshelper and streamlining handler signatures. [1] [2] [3] [4] [5] [6]Developer Tooling and Configuration:
typecheckscript and made type checking part of the build process inpackage.json..vscode/mcp.jsonfor local development server configuration.Other Notable Changes:
These changes collectively improve the reliability of the release process, the robustness of the API, and the developer experience.