@tyndall/graph-monitor

Overview

@tyndall/graph-monitor is a web service and utility package for visualizing Hyper project module graphs with reverse-dependent inspection.

Responsibilities

• Builds project module graph through @tyndall/dynamic-graph.
• Supports lazy entry registration and explicit full rebuild.
• Exposes transitive reverse dependent graph for any selected module.
• Serves an interactive graph UI over HTTP.
• Exports DOT/SVG/PNG rendering helpers for offline graph artifacts.

Install (workspace)

bun add -d @tyndall/graph-monitor

Programmatic Usage

import {
  createHyperGraphMonitor,
  startGraphMonitorServer,
} from "@tyndall/graph-monitor";

const monitor = await createHyperGraphMonitor({
  rootDir: process.cwd(),
});

monitor.rebuildAllEntries();
const full = monitor.snapshot();
const dependents = monitor.getDependentsSubgraph("src/components/button.tsx", {
  depth: 4,
});

const server = await startGraphMonitorServer({
  rootDir: process.cwd(),
  port: 4173,
});
console.log(server.url);

HTTP Endpoints

• GET /: Interactive graph monitor UI.
• GET /api/graph: Full graph snapshot JSON.
• GET /api/dependents?module=<path>&depth=<n>: Reverse dependent subgraph JSON.
• POST /api/rebuild: Rebuild graph (full or changed-path based).

Visualization Controls

• Node text size slider.
• Node size slider.
• Edge thickness slider.
• Label wrap width slider.
• Interactive zoom ratio slider and zoom-in/zoom-out/fit controls.
• Route entry overlay toggle.
• Minimap toggle with click-to-center navigation.
• Route entry list panel with filter input.
• Module list panel with filter input.
• Selection-driven graph rendering from chosen routes/modules.
• Route/module path labels are rendered relative to the configured rootDir.

Graph Monitor CLI Defaults

bun run graph:monitor supports UI default toggles:

• --show-route-entries / --hide-route-entries
• --show-minimap / --hide-minimap

Notes

• Route entry discovery defaults to src/pages and uses Hyper route graph conventions.
• Reverse dependent edges preserve import direction (dependent -> dependency).

Documentation

• Package spec: packages/tyndall-graph-monitor/spec.md
• Architecture detail: packages/tyndall-graph-monitor/architecture.md
• Change history: packages/tyndall-graph-monitor/CHANGELOG.md