D3 Force Graph Component

[widlestudiollp]

🚀 Overview

This PR introduces a fully interactive D3-based force-directed graph component for visualising node-link data inside Retool.

---

✨ Features

• Force-directed graph rendering (D3)

• Dynamic node sizing based on usage (numCalls)

• Automatic grouping detection (e.g. model, category, or inferred fields)

• Custom color mapping per group

• Preset + custom themes (with persistence via localStorage)

• Interactive UI:

  • Zoom in/out + reset controls
  • Drag nodes
  • Hover tooltips
  • Click to inspect node details

• Side panel (InfoPanel):

  • Node metrics (latency, cost, calls, performance)
  • Full metadata display
  • Graph summary view

• Theme editor (ThemeBar):

  • Modify colors (background, links, labels, tooltip, etc.)
  • Persist custom themes + group colors

---

🧠 Data Handling

• Robust parsing + coercion of incoming graphData
• Supports flexible schemas with automatic field detection
• Safely handles invalid or missing data

---

🎨 Theming

Includes preset themes:

• Arctic
• Midnight
• Rose Gold
• Slate Pro

Plus:

• Fully customizable theme editor
• Persistent theme + color settings via localStorage

---

⚙️ Integration

• Built for Retool using @tryretool/custom-component-support
• Uses Retool.useStateObject for dynamic data binding

---

📁 Main Component

• ForceGraphComponent

---

🧪 Notes

• Handles resize via ResizeObserver
• Simulation stabilises automatically or after a timeout, fallback
• Optimised to avoid unnecessary re-renders

---

📸 Future Improvements (optional)

• Edge labels/weights display
• Search & filtering
• Clustering/grouping UI
• Performance tuning for very large graphs

---

✅ Summary

This adds a production-ready, highly customizable graph visualisation component with strong UX, theming flexibility, and robust data handling.