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
• 🧩 Group Rules (Prefix Aggregation) - Aggregate nodes by package/prefix rules
• 🔎 Prefix Filter - Show only nodes/providers matching a prefix
• 🧭 Group Subgraph - View a group's internal + upstream/downstream dependencies
• 📡 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

🧩 Group Rules (Prefix Aggregation)

You can aggregate nodes by package or prefix using group rules. Rules can be configured:

• In UI (group list)
• From backend via RegisterGroupRules (recommended for production)

Backend registration:

import "github.com/pubgo/dix/v2/dixhttp"

dixhttp.RegisterGroupRules(
  dixhttp.GroupRule{
    Name: "service",
    Prefixes: []string{
      "github.com/acme/app/service",
      "github.com/acme/app/internal/service",
    },
  },
  dixhttp.GroupRule{
    Name: "router",
    Prefixes: []string{"github.com/acme/app/router"},
  },
)

The UI will auto-load /api/group-rules if local rules are empty.

🔎 Prefix Filter

The toolbar provides a Prefix Filter field. It filters the current graph to show only nodes/providers whose package/type/function name contains the given prefix. This works in:

• Providers/Types view
• Type-focused dependency view
• Group subgraph view

🧭 Group Subgraph

Click a virtual group node to open the group detail panel, then click View group graph to see:

• Internal nodes
• Upstream & downstream dependencies
• Depth control applied from the toolbar

📦 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",
      "output_pkg": "github.com/example/app/service",
      "function_name": "main.NewServiceA",
      "function_pkg": "github.com/example/app",
      "input_types": ["*main.Config"],
      "input_pkgs": ["github.com/example/app/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"}
  ]
}

### GET `/api/group-rules`
Returns backend-registered group rules (used as UI defaults)

```json
[
  {"name": "service", "prefixes": ["github.com/acme/app/service"]}
]

## Tech Stack

- **Backend**: Go standard library `net/http`
- **Frontend**: 
  - [Tailwind CSS](https://tailwindcss.com/) - Styling
  - [Alpine.js](https://alpinejs.dev/) - Reactive interactions
  - [vis-network](https://visjs.github.io/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.