fix(web): keep shared edge routes orthogonal

[naorsabag]

Summary

• Insert orthogonal bend points when routed edge points would otherwise render diagonal SVG segments.
• Include straight sibling edges when calculating shared source trunks, so bent branches split later while straight roads stay straight.
• Add focused layout regressions for diagonal route points and shared straight+bent source routes.

Test plan

• npx tsx -e "... buildOrthogonalPath assertion ..."
• npx tsx -e "... bundleSharedSourcePrefixes assertion ..."
• npx tsc --noEmit -p packages/web
• Browser-verified http://localhost:8788/flow/8AdyEvHrojv0

Note: npm test -w @openhop/web -- flow-layout.test.ts ... is currently blocked locally because @openhop/shared is not resolvable in the workspace install, and npm install hit a Windows EACCES on node_modules\@openhop\shared.

Summary by CodeRabbit

• Bug Fixes

  • Flow layouts now defer certain back-edges to prevent nodes from appearing on isolated rows; node positions snap to a row grid and connected routes shift to stay aligned.
  • Routing orthogonalization now inserts right-angle corners to avoid diagonal segments.
  • Self-loop visuals scaled and positioned more consistently.
  • Route bundling no longer shifts straight sibling routes when mixed with bent routes.

• Tests

  • Added tests covering these layout and routing edge cases.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: ead058fe-6878-4836-873f-5789137aee3b

📥 Commits

Reviewing files that changed from the base of the PR and between d6a8e98 and 2d758ea.

📒 Files selected for processing (1)

• packages/web/src/lib/flow-layout.ts

---

Walkthrough

Defers promotion of back-edge layout edges, orthogonalizes intermediate route points (inserting 90° corners), refines shared-source trunk bundling to avoid shifting straight routes, snaps ELK node y-positions to a row grid (shifting routes accordingly), and exports SELF_LOOP_WIDTH/SELF_LOOP_HEIGHT. Tests updated/added accordingly.

Changes

Flow Layout: topology, orthogonalization, bundling, snapping, self-loop constants

Layer / File(s)	Summary
Topology collection / Back-edge deferral packages/web/src/lib/flow-layout.ts	buildFlowTopology defers edges whose target was already seen into deferredBackEdges and later promotes them only when the source would otherwise be absent from layoutNodeIds; self-edges are skipped.
Orthogonalization helpers packages/web/src/lib/flow-layout.ts	Added chooseOrthogonalCorner and orthogonalizeRoutePoints to convert diagonal consecutive transitions into orthogonal corner point sequences.
Path generation update packages/web/src/lib/flow-layout.ts	buildOrthogonalPath now runs orthogonalizeRoutePoints(dedupeRoutePoints(points)) (instead of only deduping) before producing the SVG M/L path.
Self-loop dimensions exported packages/web/src/lib/flow-layout.ts	Replaced internal SELF_LOOP_OFFSET with exported SELF_LOOP_WIDTH = 48 and SELF_LOOP_HEIGHT = 40, and updated self-loop intermediate point construction to use these constants.
Bundling / trunk alignment refinement packages/web/src/lib/flow-layout.ts	bundleSharedSourcePrefixes now includes routes with route.length >= 2 for grouping, but computes naturalTrunkX/Y and reapplies trunk shifts only from the bent subset (route.length >= 3), leaving straight/short routes unshifted.
Row-grid snapping & route shifting around ELK packages/web/src/lib/flow-layout.ts	computeElkLayout snaps node y-positions to a row grid and shifts routes (snapPositionsToRowGrid, shiftRoutesAfterSnap) after the first ELK pass (normalizing first-pass routes via orthogonalizeRoutePoints(dedupeRoutePoints(route)) for port inference) and again after the second pass prior to final bundling.
Tests: new & updated cases packages/web/__tests__/flow-layout.test.ts	Added test ensuring a node with only a back-edge source is retained and row-aligned; refined self-loop ear assertions to use NODE_WIDTH/HEIGHT and SELF_LOOP_*; added orthogonal 90° bend insertion test; added bundling test with a straight sibling route to assert trunk delay/shift behavior.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• feat(web): render self-loops as a small loop over the top-right #55: Modifies self-loop and orthogonal routing logic in the same packages/web/src/lib/flow-layout.ts module; closely related to the self-loop geometry and routing changes in this PR.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 23.08% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(web): keep shared edge routes orthogonal' directly relates to the main changes: orthogonalizing edge routes and fixing shared source prefix bundling to work correctly with orthogonal paths.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/orthogonal-shared-edge-routes

---

_{Review rate limit: 8/10 reviews remaining, refill in 9 minutes and 28 seconds.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/web/src/lib/flow-layout.ts`:
- Around line 322-347: The handle-inference step is still receiving the raw ELK
polylines, so call orthogonalizeRoutePoints (or the same normalization used in
buildOrthogonalPath, i.e., orthogonalizeRoutePoints(dedupeRoutePoints(...)))
before passing routes into inferPortAssignmentsFromRoutes; locate where
inferPortAssignmentsFromRoutes is invoked and replace the raw route argument(s)
with the normalized/deduped route(s) to ensure port inference uses the
orthogonalized path (reference functions: orthogonalizeRoutePoints,
buildOrthogonalPath, inferPortAssignmentsFromRoutes).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 423ae476-d7e2-4311-9daa-60f51547a4b2

📥 Commits

Reviewing files that changed from the base of the PR and between 2a46d8e and d6d9f0c.

📒 Files selected for processing (2)

• packages/web/__tests__/flow-layout.test.ts
• packages/web/src/lib/flow-layout.ts