Graph Visualization Surface Map

This repo has a small number of true graph/network surfaces and a larger set of graph-like or chart-like surfaces. The dependency surface is already pretty lean: only one part of the app uses a dedicated graph library stack, and most other visualizations are custom canvas, SVG, or Tailwind-driven markup.

Package Inventory

• cytoscape is the only dedicated graph engine in use.
• cytoscape-fcose and cytoscape-cose-bilkent are Cytoscape layout plugins.
• lucide-react is used for icons across many surfaces, but it is not part of the graph rendering stack.
• cn from @/lib/utils is just styling glue on top of clsx / tailwind-merge.
• There is no d3, visx, recharts, nivo, chart.js, echarts, sigma, reactflow, dagre, or elkjs usage in this repo today.

Surface Map

Surface	Files	Packages Used	Right-Sizing Verdict
Cockpit interactive knowledge graph	app/cockpit/GraphCanvas.tsx, app/cockpit/CockpitInspector.tsx, app/cockpit/page.tsx	React, Next, internal BFF client, no graph package	Right-sized as a custom canvas surface. Keep it package-free unless it grows into a second true graph workspace.
Admin trace causal graph	app/admin/traces/page.tsx, app/design-system/components/CausalGraphVisualizer.tsx, contract/components/CausalGraph.api.ts	cytoscape, cytoscape-fcose, cytoscape-cose-bilkent, lucide-react, cn	Right-sized for a real interactive graph with layouts, selection, and path highlighting. This is the only place that justifies the heavier stack.
Evidence graph composite	app/design-system/components/EvidenceGraph.tsx, app/design-system/page.tsx, app/experience/page.tsx	React, lucide-react, cn	Right-sized as a package-light provenance matrix/list. It is not a spatial graph engine, so keep it custom.
Journey flow map	app/design-system/components/JourneyMap.tsx, app/design-system/components/MobileVisualizerGallery.tsx	React, lucide-react, cn	Right-sized. This is a flow/step visualization, not a candidate for a dedicated graph engine.
Swimlane chart	app/design-system/components/SwimlaneChart.tsx, app/design-system/page.tsx	React, cn	Right-sized. Keep it as HTML/CSS.
Sparkline primitive	app/design-system/components/Sparkline.tsx, plus many consumers	React only	Right-sized. This should stay a lightweight inline SVG primitive.
Small multiples primitive	app/design-system/components/SmallMultiples.tsx, plus many consumers	React only	Right-sized. Shared scale plus inline SVG is the right level of abstraction.
Cockpit stats widgets	app/cockpit/DashboardWidgets.tsx, app/cockpit/CockpitCard.tsx	React only	Right-sized. These are chart-like summaries, not graph engines.
Admin self-build map views	app/admin/self-build/components/CapabilityHeatmap.tsx, app/admin/self-build/components/GanttChartView.tsx	React, lucide-react	Right-sized. These are custom dashboard views, not graph-lib candidates.
Fleet and console visual aids	app/fleet/components/primitives.tsx, app/fleet/components/FleetScreen.tsx, app/fleet/components/RigScreen.tsx	React, local primitives, occasional lucide-react	Right-sized. These should remain self-contained.

Right-Sizing Guidance

1. Keep cytoscape isolated to the causal graph workspace.
2. Do not add a second graph library for GraphCanvas, EvidenceGraph, or the chart-like dashboard widgets.
3. Prefer custom canvas or inline SVG for summary views and sparklines.
4. If another true network graph surface appears later, reuse the Cytoscape stack instead of introducing a new rendering package.
5. If dependency budget gets tighter, the only plausible prune candidates are Cytoscape layout plugins after confirming which layouts are actually in use.

Notes

• This map intentionally groups repeated consumers of the same primitives rather than listing every call site.
• A few surfaces are graph-like rather than true graph engines. That is deliberate and is part of the right-sizing story.