@Tim020

Overview

Add visual timeline and density visualization for cue distribution across the script to help technical directors identify cue-heavy sections, balance crew workload, and spot potential timing conflicts.

Current State

• CueCountStats.vue displays a table showing cue counts per act/scene
• Cues are displayed inline during performance
• CueAssociation model links cues to specific script lines within revisions
• Multiple cue types exist with custom color coding

Proposed Features

1. Cue Timeline

• Horizontal timeline showing when each cue occurs in the script (by page number or line position)
• Color-coded by cue type using existing CueType.color values
• Interactive: hover to see cue details, click to navigate to that script position
• Revision-aware: filter/switch between different script revisions

2. Density Heatmap

• Color-coded visualization showing cue concentration across acts/scenes
• Intensity indicates number of cues in each section
• Helps identify cue-heavy sections requiring extra crew attention

3. Type Distribution

• Stacked area chart or timeline showing how different cue types (lights, sound, props) are distributed throughout the script
• Visual breakdown of technical workload by category

4. Gap Analysis

• Visual indicators for long stretches without cues
• Highlight periods with cue clustering
• Helps identify optimal equipment change windows

User Benefits

• Technical Directors: Visualize cue distribution to balance crew workload
• Stage Managers: Identify sections requiring extra coordination
• Crew Planning: Spot potential timing conflicts before they occur
• Equipment Management: Plan changes during identified gaps

Technical Implementation Notes

• Use D3.js (already in dependencies from revision graph implementation)
• Data source: CueAssociation model (revision-scoped: revision_id, line_id, cue_id)
• Scale based on ScriptLineRevisionAssociation ordering
• Must be revision-aware since cue placements differ across script versions
• Could be added to Show Config > Cues section
• Real-time updates via WebSocket for live performance tracking (optional enhancement)

Related Components

• client/src/vue_components/show/config/cues/CueCountStats.vue - existing stats table
• client/src/vue_components/show/config/script/RevisionGraph.vue - reference for D3.js patterns
• server/models/cue.py - data models

Priority

High - Solves real technical coordination problems with highly visual, actionable insights

Feature