# git-network-trainline

**Repository Path**: daoos_admin/git-network-trainline

## Basic Information

- **Project Name**: git-network-trainline
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-27
- **Last Updated**: 2026-01-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<h1 align="center">Git Network Component Visualization</h1>
<h3 align="center">🧩 Visualize component architecture and dependencies using Git Network</h3>

# 🚀 Quick Start

### Method 1: Repository-Based with Correct Hierarchy ⭐⭐⭐⭐⭐ (RECOMMENDED!)

**Best version!** Repository grouping with horizontal layout (same hierarchy as github-network.html):

```bash
node githubNetworkGraphCorrected.js data github-network-corrected.html
```

**✨ Key Features:**
- 📊 **Repository grouping** (22 repos, not author-based)
- 🎯 **Horizontal layout** (all commits in same repository on same horizontal line)
- ⏱️ **Horizontal time axis** (left to right by time)
- 🔀 **Orthogonal connections** (horizontal then vertical)
- 📏 **Fixed row height** (40px, consistent layout)
- 🎨 **22 distinct colors** for different repositories
- 🔄 **Dual-panel synced scrolling**
- 💡 **Interactive tooltips** with commit details

**This version matches github-network.html's hierarchy perfectly!**

### Method 1.1: Timeline Version V2 - Repository-Based with Graph Analysis

**Latest version!** Repository grouping with graph-structure-based row heights:

```bash
node githubNetworkGraphTimeAxisV2.js data github-network-timeline-v2.html
```

**✨ Key Features:**
- 📊 **Repository grouping** (not author-based)
- ⏱️ **Horizontal time axis** (commits positioned by actual time)
- 🎯 **Smart time compression** (large gaps compressed, small gaps preserved)
- 📏 **Graph-based row heights** (calculated from commit graph structure, not just density)
- 🔍 **Complete graph analysis** (merges, branches, lanes)
- 🎨 **22 distinct colors** for different repositories
- 🔄 **Dual-panel synced scrolling**
- 💡 **Interactive tooltips** with commit details
- 📈 **Detailed statistics** (M: merges, B: branches, C: complexity)

### Method 1.1: Timeline Version V1 - Repository-Based with Density

**Earlier version!** Repository grouping with density-based row heights:

```bash
node githubNetworkGraphTimeAxis.js data github-network-timeline.html
```

**✨ Key Features:**
- 📊 **Repository grouping** (not author-based)
- ⏱️ **Horizontal time axis** (commits positioned by actual time)
- 🎯 **Smart time compression** (large gaps compressed, small gaps preserved)
- 📏 **Auto-calculated row heights** (based on commit density)
- 🎨 **22 distinct colors** for different repositories
- 🔄 **Dual-panel synced scrolling**
- 💡 **Interactive tooltips** with commit details

Open `github-network-timeline.html` in your browser!

### Method 2: GitHub-Style Network Graph (Author-Based)

Complete GitHub-style network visualizations with full feature set:

```bash
# Generate V3 - Enhanced (Recommended)
node githubNetworkGraphV3.js data github-network-v3.html

# Generate V2 - Basic GitHub-style
node githubNetworkGraphV2.js data github-network-v2.html

# Generate V1 - Basic GitHub-style
node githubNetworkGraph.js data github-network.html
```

**✨ Features:**
- Dual-panel layout (contributors list + network graph)
- Each row = one contributor with all commits in that row
- Distinct colors for each person and branch
- Orthogonal lines (horizontal/vertical only)
- Special merge point handling with fold lines
- Interactive tooltips
- Synchronized scrolling

### Method 3: Visualize from Data

Generate interactive visualizations directly from Git network data without using Git commands:

```bash
# Generate interactive HTML visualization
node visualizeNetwork.js data html

# Generate static SVG visualization
node visualizeNetwork.js data svg
```

Open `network.html` in your browser to explore the interactive network graph!

### Method 4: Generate Git Network

Create Git commits to visualize in GitHub's network graph:

```bash
# Generate from real Git data (authors mode)
node generateFromData.js authors

# Or use custom component definitions
# Edit src/rawInput.js

# Generate Git network
node .
```

View results at: https://github.com/{username}/{repo}/network

# 📊 How It Works

## Timeline Version (Repository-Based)

- **Repositories** → Left panel rows
- **Time axis** → Horizontal positioning
- **Commits** → Colored points positioned by time
- **Time compression** → Smart algorithm to compress large gaps
- **Row heights** → Auto-calculated based on commit density

## Author-Based Versions

- **Components** → Git branches
- **Component features** → Git commits
- **Component dependencies** → Git merges
- **Feature markers** → Emoji branch labels

This visualization helps you understand:
- Which components depend on others
- The complexity of each component
- Potential circular dependencies
- Component hierarchy and relationships

# 📁 Documentation

- **[TIMELINE_VERSION.md](TIMELINE_VERSION.md)** - Complete guide for the new Timeline version
- **[VERSION_COMPARISON.md](VERSION_COMPARISON.md)** - Compare all available versions
- **[GITHUB_NETWORK_GUIDE.md](GITHUB_NETWORK_GUIDE.md)** - Guide for GitHub-style visualizations
- **[VISUALIZATION.md](VISUALIZATION.md)** - General visualization guide
- **[DATA_USAGE.md](DATA_USAGE.md)** - How to work with data files
- **[QUICK_START.md](QUICK_START.md)** - Quick start guide

# 😞 Limitations

**Timeline Version:**
1. **Time precision**: Grouped by day, doesn't show intra-day variations
2. **Compression loss**: Large time spans are compressed, not 1:1 scale
3. **Repository IDs**: Uses numeric IDs, not full repository names

**Author-Based Versions:**
1. **No cyclic dependencies**: Make sure your component graph has no circular dependencies. This will prevent the graph from being fully generated.
2. **Unique emoji markers**: Don't use the same emoji for different features unless they represent shared junction points.
3. **Distinct component names**: Component names must be unique.

# 💡 Use Cases

- **Timeline Version**: Repository collaboration analysis, time-based review, cross-repo workflow tracking
- **Author-Based**: Document component architecture, visualize refactoring impact, identify coupling

# 📝 License

[MIT](https://github.com/ayonious/git-network-trainline/blob/master/LICENSE)