Skip to content

feat: service registry sections, hosting groups, and React Flow graph canvas - #9

Merged
shingkid merged 22 commits into
mainfrom
feat/service-registry-sections
Apr 23, 2026
Merged

feat: service registry sections, hosting groups, and React Flow graph canvas#9
shingkid merged 22 commits into
mainfrom
feat/service-registry-sections

Conversation

@shingkid

@shingkid shingkid commented Apr 23, 2026

Copy link
Copy Markdown
Owner

Summary

  • Added stakeholders and hosting sections to the service registry, with per-service environment references
  • Replaced the custom SVG canvas with a React Flow-based GraphCanvas supporting interactive nodes/edges and a hosting group toggle
  • Implemented dual layout modes: compact ELKjs partitioned layout and a left-to-right request-flow layout for the Business Flow tab

Test Plan

  • Service registry displays stakeholders and hosting sections correctly
  • Graph canvas renders service nodes, edges, and hosting group nodes via React Flow
  • Hosting toggle shows/hides HostingGroupNode containers
  • Business Flow tab uses LR request-flow layout; other tabs use compact layout
  • fitView triggers correctly on layout change
  • All 76 existing tests pass (npm test)

Open in Devin Review

shingkid and others added 20 commits April 23, 2026 04:21
Introduces a top-level stakeholders map where each entry captures a
team's name, description, and contact point. Business flows now
reference stakeholder keys instead of inline strings, enabling
quick lookup of stakeholder details from a single source of truth.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Introduces a top-level hosting map where named configs (environment,
provider, account) are defined once and referenced by key from each
service. Adds cross-reference validation, checklist entries, colored
node borders and bottom strips in the graph, and a Hosting detail in
the impact panel. Moves DEFAULT_REGISTRY_TEMPLATE to a .yaml?raw import.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…lapping hosting bubbles

Use elkjs with elk.partitioning.activate so nodes sharing the same hosting
key are always placed in the same horizontal band. The previous hand-rolled
topological layering centered each layer independently, causing bounding-box
bubbles to drift and overlap across layers. ELK handles cycle-breaking
natively and paves the way for a future React Flow migration.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… modes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… guard in ServiceNode

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replaces old GraphCanvas props with rfNodes/rfEdges, adds enrichedNodes
memo to hydrate ServiceNodeData, adds hosting toggle button to footer
legend, and stubs ResizeObserver in tests for @xyflow/react compatibility.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… child nodes, globalThis in setup

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Business Flow tab now renders left-to-right with entry-point services
  on the left and datastores on the right, arrows following request direction
- TB (infra) layout keeps dependency→consumer downward arrows and X-spread
  redistribution; LR uses consumer→dependency edges and Y-spread redistribution
- ServiceNode switches handles to Left/Right in LR so bezier curves are
  horizontal; ServiceEdge forwards sourcePosition/targetPosition to getBezierPath
  so arrowheads orient along the curve naturally
- Hosting toggle hidden in Business Flow footer; LR always bypasses the
  hosting-mode branch in computeLayout so stale showHosting state on tab
  switch no longer reverts the layout to TB

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 865797c864

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/features/catalog/components/GraphCanvas.tsx Outdated
Comment thread src/features/catalog/useCatalogViewModel.ts
shingkid and others added 2 commits April 24, 2026 01:42
…lection

- GraphCanvas: FitViewOnChange now tracks layoutNodes (raw ELK output)
  instead of enriched rfNodes, so fitView no longer fires on
  highlight/dim state updates from service selection
- useCatalogViewModel: split combined memo into separate visibleServices
  and { affectedSet, highlightKey } memos so selectedService changes
  in impact mode don't create a new Set reference and trigger ELK re-layout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@shingkid
shingkid merged commit a6331df into main Apr 23, 2026
2 checks passed
@shingkid
shingkid deleted the feat/service-registry-sections branch April 23, 2026 17:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant