Graph Visualization

Commands for visualizing project and task dependencies through interactive web-based graphs that help understand workspace structure and execution flow.

Capabilities

Action Graph

Display an interactive dependency graph of all tasks and actions in the execution pipeline.

moon action-graph [targets...] [--dependents] [--host <HOST>] [--port <PORT>]

Alias: moon ag

Arguments:

• targets (optional) - Specific targets to focus the graph on

Options:

• --dependents - Include dependents of the focused targets in the graph
• --host <HOST> - Host address for the graph server (default: "127.0.0.1")
• --port <PORT> - Port to bind the graph server to (default: "0" for auto-selection)

Usage Examples:

# Show all actions in the workspace
moon action-graph

# Focus on specific targets
moon action-graph my-app:build my-app:test

# Include dependents of focused targets
moon action-graph my-app:build --dependents

# Use short alias
moon ag

# Custom host and port
moon action-graph --host 0.0.0.0 --port 3000

The action graph shows:

• Individual task nodes with status and timing
• Dependency relationships between tasks
• Execution order and parallel opportunities
• Cache hit/miss information
• Task failure points and error details

Project Graph

Display an interactive graph showing relationships between projects in the workspace.

moon project-graph [id] [--dependents] [--host <HOST>] [--port <PORT>]

Alias: moon pg

Arguments:

• id (optional) - Project ID to focus the graph on

Options:

• --dependents - Include direct dependents of the focused project
• --host <HOST> - Host address for the graph server (default: "127.0.0.1")
• --port <PORT> - Port to bind the graph server to (default: "0" for auto-selection)

Usage Examples:

# Show all projects in workspace
moon project-graph

# Focus on a specific project
moon project-graph my-app

# Include project dependents
moon project-graph shared-utils --dependents

# Use short alias
moon pg

# Custom server configuration
moon project-graph --host localhost --port 8080

The project graph displays:

• Project nodes with metadata (language, type, platform)
• Dependency relationships between projects
• Workspace structure and organization
• Project health and status indicators

Task Graph

Display an interactive graph of tasks and their dependencies within the workspace.

moon task-graph [target] [--dependents] [--host <HOST>] [--port <PORT>]

Alias: moon tg

Arguments:

• target (optional) - Specific task target to focus the graph on

Options:

• --dependents - Include direct dependents of the focused target
• --host <HOST> - Host address for the graph server (default: "127.0.0.1")
• --port <PORT> - Port to bind the graph server to (default: "0" for auto-selection)

Usage Examples:

# Show all tasks in workspace
moon task-graph

# Focus on a specific task
moon task-graph my-app:build

# Include task dependents
moon task-graph shared-utils:build --dependents

# Use short alias
moon tg

# Bind to all interfaces
moon task-graph --host 0.0.0.0

The task graph shows:

• Task nodes with configuration details
• Inter-task dependencies and execution flow
• Task types and platforms
• Estimated execution times and resource usage

Graph Features

Interactive Navigation

• Zoom and Pan - Navigate large graphs with mouse and keyboard
• Node Filtering - Filter nodes by type, status, or metadata
• Search - Find specific projects or tasks quickly
• Layout Options - Switch between different graph layouts

Node Information

• Hover Details - View detailed information by hovering over nodes
• Click Actions - Click nodes to view full configuration
• Status Indicators - Visual indicators for success, failure, and cache status
• Timing Information - Execution times and performance metrics

Export and Sharing

• URL Sharing - Share graph views via URL parameters
• Screenshot Export - Export graph visualizations as images
• JSON Export - Export graph data for external analysis

Graph Server

Moon starts a local web server to serve the interactive graphs:

# Default behavior - auto-select port
moon project-graph
# Output: Graph server running at http://127.0.0.1:3001

# Specify custom port
moon action-graph --port 4000
# Output: Graph server running at http://127.0.0.1:4000

# Bind to all interfaces
moon task-graph --host 0.0.0.0 --port 3000
# Output: Graph server running at http://0.0.0.0:3000

The server automatically:

• Opens the graph in your default browser
• Provides real-time updates as the workspace changes
• Supports multiple concurrent viewers
• Shuts down when the command is terminated

Environment Variables

Graph server behavior can be configured via environment variables:

• MOON_HOST - Default host address for graph servers
• MOON_PORT - Default port for graph servers

# Set default host and port
export MOON_HOST=0.0.0.0
export MOON_PORT=3000
moon project-graph

Use Cases

Development Workflow

• Dependency Analysis - Understand project relationships before making changes
• Task Planning - Visualize task execution order and optimization opportunities
• Impact Assessment - See which projects will be affected by changes

CI/CD Optimization

• Parallel Execution - Identify tasks that can run in parallel
• Bottleneck Detection - Find tasks that block parallel execution
• Resource Planning - Optimize CI job distribution based on task dependencies

Architecture Review

• Dependency Validation - Ensure project dependencies follow architectural guidelines
• Circular Dependencies - Identify and resolve circular dependency issues
• Modularization - Plan project splits and dependency refactoring

Team Communication

• Onboarding - Help new team members understand codebase structure
• Documentation - Visual documentation of system architecture
• Planning - Collaborate on architectural changes using visual graphs