Skip to content

feat: Thread timeline visualization with Gantt chart #10

@rlaope

Description

@rlaope

Problem

The current dashboard shows metrics and event logs, but lacks visual representation of thread lifecycles:

  • Hard to understand thread execution patterns
  • Cannot see thread concurrency visually
  • Difficult to identify long-running threads

Proposed Solution

Implement a Gantt chart style timeline visualization:

  1. Horizontal bars representing thread lifecycles
  2. Color coding by thread state (running, pinned, ended)
  3. Zoomable and scrollable timeline
  4. Click to view thread details

Acceptance Criteria

  • Add timeline section to dashboard
  • Display threads as horizontal bars (START to END)
  • Color code: green (running), red (pinned), gray (ended)
  • Implement zoom (1s, 10s, 1min, 5min views)
  • Add horizontal scroll for time navigation
  • Click bar to open thread detail modal
  • Show carrier thread assignment on hover

Technical Considerations

  • Use Canvas or SVG for rendering (consider performance with 1000+ threads)
  • Virtual scrolling for large thread counts
  • Aggregate threads when zoomed out (show density)
  • Consider using PixiJS for WebGL acceleration

UI Mockup

Timeline                              [1s] [10s] [1min] [5min]
├─────────────────────────────────────────────────────────────┤
│ 00:00:00    00:00:05    00:00:10    00:00:15    00:00:20    │
├─────────────────────────────────────────────────────────────┤
│ VT-1  ████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
│ VT-2  ░░░░████████████████████████████████████████░░░░░░░  │
│ VT-3  ░░░░░░░░░░░░████████████████░░░░░░░░░░░░░░░░░░░░░░░  │
│ VT-4  ░░░░░░░░░░░░░░░░░░░░████████████████████████████████  │
│ VT-5  ████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
└─────────────────────────────────────────────────────────────┘

Legend: ████ Running   ████ Pinned   ░░░░ Not started/Ended

Data Structure

{
  "threads": [
    {
      "threadId": 123,
      "threadName": "VT-1",
      "startTime": 1704067200000,
      "endTime": 1704067205000,
      "pinnedRanges": [
        { "from": 1704067202000, "to": 1704067203000 }
      ]
    }
  ]
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions