Skip to content

Component | Graph: Support D3 curve factories and smooth-step links - #985

Open
rokotyan wants to merge 5 commits into
f5:mainfrom
rokotyan:codex/graph-smooth-step-factory
Open

rokotyan wants to merge 5 commits into
f5:mainfrom
rokotyan:codex/graph-smooth-step-factory

Conversation

@rokotyan

@rokotyan rokotyan commented Nov 5, 2026 •

Copy link
Copy Markdown
Contributor

Adds Graph.linkCurve as a D3 curve factory and provides curveSmoothStep through the same rendering path. This is a standalone alternative to #973, based on main, for discussing the factory-based API with maintainers.

import { curveSmoothStep, SmoothStepDirection } from '@unovis/ts/utils/curves/smooth-step'

const config = {
  linkCurve: curveSmoothStep.radius(5).offset(20).direction(SmoothStepDirection.Up),
}

Behavior and API

  • linkCurve accepts D3 line-compatible factories, including built-in curves and curveSmoothStep. There is no smooth-step string or Graph-specific enum branch in the renderer.
  • Leaving linkCurve unset preserves the existing cubic Bézier geometry and linkCurvature behavior.
  • Smooth-step routing and rounding live in a standalone factory. Explicit directions remain fixed during dragging and partial updates. direction(SmoothStepDirection.Auto) instead picks the dominant endpoint displacement separately for each link (horizontal on ties), recalculating during dragging. This is per-link inference, not Component | Graph: Update graph curve options - 1.8 #973's average over the links in a Graph update.
  • Input contract: Graph supplies source, two Bézier control points, and target. curveSmoothStep routes between the first and last points of each segment and ignores intermediate points. It supports SVG/Canvas drawing contexts and d3.line(), but not d3.area().
  • Curve changes use path interpolation. Immediate updates still interrupt active transitions, so an earlier animation cannot overwrite a dragged link.

The routing follows the smooth-step proposal in #973. The dev example compares the default Bézier rendering with the selected factory on identical data, with direction, radius, and offset controls. Selecting auto keeps the current ELK layout while changing link routing.

Review order

Five commits, with no merge or fixup commits:

  1. Core factory with the SmoothStepDirection enum and per-link auto routing, Graph integration, exports, and regression tests.
  2. Dev example with configurable curve factories.
  3. Generated Angular linkCurve input. All five wrapper generators were run; the other wrappers inherit the config type.
  4. Graph documentation and the endpoint contract.
  5. Agent instructions: upload PR screenshots and recordings with gh --attach; never commit PR review media.
  • Core and tests
  • Dev example
  • Wrappers regenerated
  • Docs
  • Separate gallery example — not included in this proposal

Validation

  • pnpm cmds-report --concurrency=3 --timeout=300 --port=3738: 26/26 passed, including core tests, all wrapper builds/generation, Svelte compatibility tests, dev/website builds, and size checks.
  • pnpm build && pnpm build:dev: passed separately, including SSR/MCP builds.
  • pnpm test:ts: 148 tests passed, including 20 new curve/Graph tests.
  • pnpm size:ts: passed with the existing baseline; no baseline changes.
  • Changed-file lint, commit hooks, commitlint, and git diff --check passed for the five cleaned-up commits.
  • Chromium 151 and WebKit 26.5: light/dark rendering, all four directions, radius/offset changes, curve switching, node dragging, and zooming passed without browser errors.
  • Verified the built direct-import subpath renders with d3.line() and that SmoothStepDirection is available as a runtime export from both the factory module and types/curve.
  • Auto-direction follow-up: core/dev builds and 20 focused curve/Graph tests passed; browser checks covered light/dark rendering, axis changes during dragging, preserving a horizontal ELK layout on switching to auto, and radius/offset controls.

Repository-wide pnpm lint still reports 14 errors in unchanged files: missing Karma dependencies; unresolved imports in existing dev examples; Solid parser configuration; the existing geojson import; and missing terser / svelte-preprocess imports in website tooling. These are outside this PR.

Not run: the entire Playwright suite, MCP/SSR test/browser lanes, or website-wide typecheck. These are excluded from the command report; the relevant core and browser checks above were run explicitly.

@rokotyan
rokotyan force-pushed the codex/graph-smooth-step-factory branch 2 times, most recently from 641ea6d to 8d3e278 Compare November 5, 2026 00:13
@rokotyan

rokotyan commented Nov 5, 2026 •

Copy link
Copy Markdown
Contributor Author

Added curveSmoothStep.direction(SmoothStepDirection.Auto) in 061bba8. The DevExample now exposes it in the Direction selector; choosing auto preserves the current ELK layout.

The comparison recordings use the same graph seed, layout, radius (5), offset (20), and node movement:

  1. Fixed up keeps the source/target exit and entry direction while the node moves, producing a detour when it crosses below the source.
  2. auto chooses the dominant axis and direction from each link's endpoints and recalculates as the node moves. Horizontal wins when the displacements are equal.

Auto is deliberately per link, so the factory remains usable with plain d3.line(). It does not reproduce #973's averaging over all links in the current Graph update. Fixed directions and the default (down) are unchanged.

Validation: 148 core tests passed (including eight new auto-direction cases), 26/26 command-report checks passed, and the example was checked for dragging, light/dark rendering, layout preservation, and radius/offset controls. The existing repository-wide lint failures are unchanged.

Fixed up recording

fixed-direction.mp4

auto recording

auto-direction.mp4

@rokotyan
rokotyan force-pushed the codex/graph-smooth-step-factory branch from d473d3a to 52e07af Compare November 5, 2026 05:22
@rokotyan
rokotyan marked this pull request as ready for review November 5, 2026 05:33

This branch has not been deployed

No deployments
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