dixhttp

Dix HTTP Visualization Module

This module provides an HTTP server to visualize dependency relationships in the Dix dependency injection container. Designed for large projects, with support for fuzzy search, package grouping, bidirectional dependency tracking, and depth control.

中文文档

Features

• 📊 Interactive Visualization - Modern UI built with vis.js + Tailwind CSS + Alpine.js
• 🔍 Global Fuzzy Search - Quickly search for type names or function names to view dependencies
• 📦 Package Grouping - Collapsible left panel to browse by package
• 🔄 Bidirectional Dependency Tracking - Show both upstream (dependencies) and downstream (dependents)
• 📏 Depth Control - Limit dependency graph display levels (1-5 or all)
• 🎨 Multiple Layouts - Support hierarchical and force-directed layouts
• 📡 RESTful API - Provide JSON format dependency data

Quick Start

package main

import (
    "log"
    "github.com/pubgo/dix/v2"
    "github.com/pubgo/dix/v2/dixhttp"
    "github.com/pubgo/dix/v2/dixinternal"
)

func main() {
    // Create Dix container
    di := dix.New()
    
    // Register providers
    dix.Provide(di, func() *Config {
        return &Config{}
    })
    
    dix.Provide(di, func(c *Config) *Database {
        return &Database{Config: c}
    })
    
    dix.Provide(di, func(db *Database) *UserService {
        return &UserService{DB: db}
    })
    
    // Create and start HTTP server
    server := dixhttp.NewServer((*dixinternal.Dix)(di))
    log.Println("Server starting at http://localhost:8080")
    if err := server.ListenAndServe(":8080"); err != nil {
        log.Fatal(err)
    }
}

Open browser and visit http://localhost:8080 to view the dependency graph.

Base Path / Prefix

If you need to mount the UI and API under a path prefix (e.g. behind a gateway), use WithBasePath:

server := dixhttp.NewServerWithOptions(
  (*dixinternal.Dix)(di),
  dixhttp.WithBasePath("/dix"),
)
// Visit http://localhost:8080/dix/

UI Layout

┌─────────────────────────────────────────────────────────────────────┐
│  🔗 Dix Dependency Visualization            📦 8 Pkgs  ⚡ 42 Provs  │
├──────────┬────────────────────────────────────────────┬─────────────┤
│ 📦 Pkgs  │  [Providers] [Types]  Layout: Hier  Depth: 2  🔍 Search  │ 📋 Details  │
│          │                                            │             │
│ 📁 All   │                                            │  Function   │
│  42      │           ┌─────────┐                      │  xxx.func   │
│          │           │ Config  │                      │             │
│ .../app  │           └────┬────┘                      │  Output     │
│  12      │                │                           │  *Config    │
│          │           ┌────▼────┐                      │             │
│ .../db   │           │Database │                      │  Inputs     │
│  8       │           └────┬────┘                      │  (clickable)│
│          │                │                           │             │
│          │        ┌───────▼───────┐                   │ [View Deps] │
│          │        │  UserService  │                   │             │
│          │        └───────────────┘                   │             │
├──────────┴────────────────────────────────────────────┼─────────────┤
│  « Collapse                                           │   Legend    │
└───────────────────────────────────────────────────────┴─────────────┘

Three-Panel Layout

Core Features

🔍 Global Fuzzy Search

The search box on the right side of the toolbar supports:

• Fuzzy Matching - Enter keywords to match type names or function names
• Real-time Suggestions - Show matching results dropdown (max 20)
• Quick Jump - Click result or press Enter to view dependency graph
• Category Labels - Results marked as Provider or Type

🔄 Bidirectional Dependency Tracking

After searching or clicking a type, the system shows that type as center:

     ┌──────────┐
     │ Upstream │  ← Green nodes
     │ (Config) │
     └────┬─────┘
          │
          ▼
     ┌──────────┐
     │  Target  │  ← Yellow highlight
     │(Database)│
     └────┬─────┘
          │
          ▼
     ┌──────────┐
     │Downstream│  ← Red nodes
     │(Service) │
     └──────────┘

Color Legend:

• 🟡 Yellow - Target node (searched object)
• 🟢 Green - Dependencies (upstream, what target depends on)
• 🔴 Red - Dependents (downstream, what depends on target)

📏 Depth Control

Depth determines how many levels to expand up/down:

Example: Assume dependency chain is Config → Database → UserService → Handler

Search UserService with different depths:

• Depth 1: Database ← UserService → Handler
• Depth 2: Config ← Database ← UserService → Handler

📦 Package Grouping

Left panel features:

• Package List - Show all packages with Provider counts
• Search Filter - Quickly locate specific packages
• Click Filter - Show only that package's dependencies
• Collapse - Click « button to collapse sidebar, expand graph area

Interactions

API Endpoints

GET /

Returns HTML visualization page

GET /api/stats

Returns summary statistics

{
  "provider_count": 42,
  "object_count": 15,
  "package_count": 8,
  "edge_count": 67
}

GET /api/packages

Returns package list

[
  {
    "name": "github.com/example/app/service",
    "provider_count": 12,
    "types": ["*service.UserService", "*service.OrderService"]
  }
]

GET /api/dependencies?package=xxx&limit=100

Returns dependency data, supports package filtering

{
  "providers": [
    {
      "id": "provider_*main.ServiceA_0",
      "output_type": "*main.ServiceA",
      "function_name": "main.NewServiceA",
      "input_types": ["*main.Config"]
    }
  ],
  "objects": [...],
  "edges": [...]
}

GET /api/package/{packageName}

Returns Provider details for specified package

GET /api/type/{typeName}?depth=2

Returns dependency chain for specified type

{
  "root_type": "*service.UserService",
  "depth": 2,
  "nodes": [
    {"id": "*service.UserService", "type": "*service.UserService", "package": "...", "level": 0}
  ],
  "edges": [
    {"from": "*db.Database", "to": "*service.UserService", "type": "dependency"}
  ]
}

Tech Stack

• Backend: Go standard library net/http
• Frontend:
  • Tailwind CSS - Styling
  • Alpine.js - Reactive interactions
  • vis-network - Graph rendering
• Template: Go embed single-file HTML

Use Cases

✅ Recommended:

• Large projects (100+ providers)
• Modular architecture needing package-based viewing
• Tracking specific type dependency chains
• Debugging circular dependency issues
• Onboarding new team members

⚠️ Notes:

• Production environment should restrict access (internal network or dev only)
• Very large projects (1000+ providers) should use depth limits

Example

See example/http/main.go for complete example.