Skip to content

Move Dagre layout to Web Worker for large graph performance #279

@mnesbitt

Description

@mnesbitt

References

User-reported: carrot-app.json (1192 components, 1285 links, 129 external links) freezes browser on full graph view

Summary

The Dagre layout computation in computeDagreLayout.ts runs synchronously on the main thread. For graphs with ~1300 nodes and ~1400 edges, this blocks the browser for several seconds. Additionally, the mouseenter handler in ForceGraph.tsx filters all links O(n) on every hover. Solution: move Dagre to a Web Worker, add loading state, and precompute hover connection maps.

Full Details

  1. Create dagre-layout.worker.ts Web Worker that receives serializable node/edge data and returns positions. 2. Create useDagreLayout hook to manage the worker lifecycle and expose positions + computing state. 3. Update ForceGraph.tsx to use async layout with a loading indicator while computing. 4. Precompute a Map of node connection counts from links so hover lookups are O(1) instead of O(n). Key files: apps/eclair/src/platform/infra/graph/ForceGraph/computeDagreLayout.ts, ForceGraph.tsx, graph-types.ts

Acceptance Criteria

  • Dagre layout runs in a Web Worker off the main thread
  • Loading indicator shown while layout computes
  • Hover tooltip uses precomputed connection counts (O(1) instead of O(n))
  • carrot-app.json loads without freezing the browser
  • All existing tests pass
  • 100% test coverage maintained
  • A mergeable PR is ready for user review, created via /complete-task

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions