Implements a comprehensive timeline system that enables documents to contain multiple constellation states with branching timelines. This allows users to create different versions of their analysis for temporal evolution, alternative scenarios, or what-if analysis. Core Features: - Timeline store managing multiple states per document with branching structure - Visual timeline panel with React Flow-based state graph visualization - State management: create, switch, rename, duplicate (parallel/series), delete - Per-state undo/redo history (max 50 actions per state) - Context menu for timeline node operations - Collapsible timeline panel (always visible, moved toolbar to panel header) Architecture Changes: - Document structure: removed top-level graph field, states now only in timeline - Global types: nodeTypes and edgeTypes are now global per document, not per state - State graphs: only contain nodes and edges, types inherited from document - Persistence: full timeline serialization/deserialization with all states - History system: converted from document-level to per-state independent stacks Timeline Components: - TimelineView: main timeline visualization with state nodes and edges - BottomPanel: collapsible container with timeline controls in header - StateNode: custom node component showing state info and active indicator - CreateStateDialog: dialog for creating new timeline states - RenameStateDialog: dialog for renaming existing states - Context menu: right-click operations (rename, duplicate parallel/series, delete) Document Management: - Documents always have timeline (initialized with root state on creation) - Timeline persisted with document in localStorage - Export/import includes complete timeline with all states - Migration support for legacy single-state documents Store Updates: - timelineStore: manages timelines, states, and timeline operations - historyStore: per-state history with independent undo/redo stacks - workspaceStore: saves/loads timeline data, handles global types - panelStore: added timeline panel visibility state - useActiveDocument: syncs timeline state with graph editor Context Menu Improvements: - Smart viewport edge detection to prevent overflow - Click-outside detection for React Flow panes - Consistent styling across application Files Added: - src/types/timeline.ts - Timeline type definitions - src/stores/timelineStore.ts - Timeline state management - src/components/Timeline/TimelineView.tsx - Main timeline component - src/components/Timeline/BottomPanel.tsx - Timeline panel container - src/components/Timeline/StateNode.tsx - State node visualization - src/components/Timeline/CreateStateDialog.tsx - State creation dialog - src/components/Timeline/RenameStateDialog.tsx - State rename dialog Files Removed: - src/stores/persistence/middleware.ts - Obsolete persistence middleware Documentation: - Added comprehensive timeline feature documentation - Implementation checklists and quick reference guides - Temporal analysis concepts and UX guidelines 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
17 KiB
Temporal & Scenario Analysis - Implementation Summary
Overview
This document provides a high-level summary of the revised multi-graph implementation plan, now correctly framed as a temporal and scenario analysis tool for constellation analyses.
Key Correction: NOT Version Control
Previous Misunderstanding
The initial approach treated this as a version control system (like Git for graphs), focusing on:
- Commits and checkouts
- Branching for collaboration
- Merge operations
- Edit history
Corrected Understanding
This is actually a temporal and scenario analysis tool focused on:
- Temporal evolution: How constellations change over time
- Scenario exploration: Comparing alternative futures
- Comparison analysis: Visual diff and change tracking
- Storytelling: Presenting network dynamics
Core Use Cases
1. Historical/Temporal Analysis
Example: Track how a team evolved from 2020 to 2024
- Capture states at key time points (quarters, years, milestones)
- Navigate through timeline to see evolution
- Compare early vs. late states
- Identify inflection points and trends
2. Therapeutic/Session-Based Tracking
Example: Family therapist tracking constellation across 10 sessions
- Capture state after each therapy session
- Track relationship changes over time
- Visualize progress and breakthroughs
- Compare initial vs. final states
3. Strategic Scenario Planning
Example: Explore three different organizational strategies
- Start from current state
- Branch into multiple scenarios (Strategy A, B, C)
- Develop each scenario independently
- Compare outcomes side-by-side
- Present findings to stakeholders
4. Project Evolution
Example: Stakeholder network from project kickoff to closure
- Capture states at project phases
- Track key stakeholders across phases
- Animate evolution for presentations
- Generate actor journey reports
Key Features
Phase 1: Core State Management (Weeks 1-2)
Status: Not started Priority: HIGH - Foundation
- Capture current graph as a "state" (snapshot)
- Load states to view at different points
- Basic state metadata (label, notes)
- Simple state selector dropdown
Deliverable: Users can create and switch between states
Phase 2: Temporal Analysis (Weeks 3-4)
Status: Not started Priority: HIGH - Core use case
- Timeline management (ordered sequence of states)
- Timeline panel UI with scrubber
- Temporal metadata (dates, sequence numbers)
- Timeline navigation (previous/next)
Deliverable: Users can create temporal sequences and navigate through time
Phase 3: Comparison & Diff (Weeks 5-6)
Status: Not started Priority: HIGH - Key analytical feature
- Diff calculation engine
- Visual diff overlay on graph
- Comparison view (side-by-side)
- Change summary panel
- Export comparison reports
Deliverable: Users can compare states and see visual differences
Phase 4: Scenario Branching (Weeks 7-8)
Status: Not started Priority: MEDIUM
- Scenario data model and tree structure
- "Branch from here" UI
- Scenario tree visualization
- Scenario comparison
Deliverable: Users can create and explore alternative scenarios
Phase 5: Actor Journeys (Weeks 9-10)
Status: Not started Priority: MEDIUM
- Track specific actors across states
- Journey visualization
- Property and relationship evolution
- Export actor journey reports
Deliverable: Users can follow individual actors through time
Phase 6: Animation & Presentation (Weeks 11-12)
Status: Not started Priority: MEDIUM
- Smooth transitions between states
- Animation controls (play/pause/speed)
- Presentation mode (full-screen slideshow)
- Export animations (stretch goal)
Deliverable: Users can animate evolution and present findings
Phase 7: ChromaDB Integration (Weeks 13-14)
Status: Not started Priority: MEDIUM
- Index states in ChromaDB
- Semantic search for states
- Pattern recognition
- Annotation storage and search
Deliverable: Users can search and analyze state history semantically
Phase 8: Advanced Features (Weeks 15-16)
Status: Not started Priority: LOW
- Auto-capture states
- State templates
- Collaborative features (stretch)
- Advanced analytics
Data Model Changes
New Type: AnalysisState
Represents the constellation at a specific moment:
interface AnalysisState {
stateId: string;
stateType: 'temporal' | 'scenario';
snapshot: {
nodes: SerializedActor[];
edges: SerializedRelation[];
};
temporal?: TemporalMetadata; // For time-based states
scenario?: ScenarioMetadata; // For scenario branches
relationships: StateRelationship[]; // Links to other states
notes?: string;
createdAt: string;
}
Updated: ConstellationDocument
Existing documents get optional state support:
interface ConstellationDocument {
metadata: { ... };
graph: { ... }; // Current working graph
states?: {
stateList: AnalysisState[];
currentStateId: string | null;
timelines: Timeline[];
scenarioTrees: ScenarioTree[];
settings: { ... };
};
}
New Type: Timeline
Ordered sequence of temporal states:
interface Timeline {
timelineId: string;
label: string;
states: string[]; // Ordered state IDs
displaySettings: { ... };
}
New Type: ScenarioTree
Hierarchical structure of branched scenarios:
interface ScenarioTree {
rootStateId: string;
branches: Array<{
branchId: string;
label: string;
states: string[];
color?: string;
}>;
}
Architecture Changes
New Store: stateStore.ts
Manages all state-related operations:
- Create/read/update/delete states
- Timeline management
- Scenario branch management
- State comparison
- Actor journey tracking
- ChromaDB integration
New Components: TemporalAnalysis/
/src/components/TemporalAnalysis/
├── TimelinePanel.tsx # Bottom panel with timeline
├── StateSelector.tsx # Dropdown to select states
├── ComparisonView.tsx # Side-by-side comparison
├── StateDiffViewer.tsx # List of changes
├── StateMetadataEditor.tsx # Edit state metadata
├── ActorJourneyViewer.tsx # Track actor across states
├── StateAnimator.tsx # Animation controls
└── PresentationMode.tsx # Full-screen slideshow
Updated Components
- Toolbar: Add state controls (capture, current state indicator)
- BottomPanel: Integrate TimelinePanel
- RightPanel: Add state history section
- MenuBar: Add "States" menu
- GraphEditor: Support diff overlay and state loading
Terminology Changes
| Old Term (Version Control) | New Term (Temporal/Scenario) |
|---|---|
| Version | State / Timepoint / Scenario |
| Commit | Capture State / Create Snapshot |
| Checkout | Load State / View State |
| Branch | Create Scenario Branch |
| Version History | Timeline / State History |
| Version Graph | Timeline / Scenario Tree |
| Diff | Comparison / Change Analysis |
| Merge | N/A (not applicable) |
| Revert | Restore State |
User Workflows
Workflow 1: Create Temporal Sequence
- Work on graph normally
- At key milestone, click "Capture State"
- Label it (e.g., "Q1 2023")
- Continue editing graph
- Capture next state (e.g., "Q2 2023")
- Repeat for all time points
- View timeline panel to see sequence
- Use scrubber to navigate
Workflow 2: Compare Two States
- Select first state (e.g., "Q1 2023")
- Click "Compare" button
- Select second state (e.g., "Q4 2023")
- View side-by-side comparison
- See highlighted changes
- Review change summary
- Export comparison report
Workflow 3: Create Scenario Branch
- Load the state to branch from (e.g., "Current")
- Click "Create Scenario Branch"
- Name it (e.g., "Strategy A")
- Add description and assumptions
- Modify graph for this scenario
- Capture states along scenario
- Return to branching point
- Create alternative scenario (e.g., "Strategy B")
- Compare scenarios
Workflow 4: Track Actor Journey
- Select actor on graph
- Click "View Journey" in right panel
- See timeline of actor appearances
- Review property changes over time
- Examine relationship evolution
- Export journey report
Workflow 5: Animate & Present
- Create timeline with multiple states
- Click "Animate" button
- Adjust animation speed
- Play animation (smooth transitions)
- Enter presentation mode (full-screen)
- Navigate through slideshow
- Present to stakeholders
ChromaDB Integration Strategy
Collections
1. State Metadata Collection
- Index state descriptions, notes, assumptions
- Enable semantic search ("Find states about merger")
- Support tag-based filtering
2. Actor Journey Collection
- Store actor trajectories
- Enable actor-centric queries
- Track relationship evolution
3. Comparison Cache Collection
- Cache expensive diff calculations
- Speed up repeated comparisons
- Store change summaries
4. Annotation Collection
- Store user notes and insights
- Link to specific states or changes
- Enable annotation search
Use Cases
- Semantic Search: "Find all states related to organizational restructuring"
- Pattern Recognition: "Find states similar to current state"
- Actor Tracking: "Find all states where Alice appears"
- Change Analysis: "Find states with significant network changes"
- Insight Discovery: "Search annotations for mentions of 'conflict'"
Implementation Priority
Must-Have (MVP)
- Phase 1: Core State Management
- Phase 2: Temporal Analysis
- Phase 3: Comparison & Diff
These three phases provide core value:
- Users can capture states at different times
- Navigate through temporal sequences
- Compare and analyze differences
Should-Have
- Phase 4: Scenario Branching
- Phase 5: Actor Journeys
- Phase 6: Animation & Presentation
These add significant analytical and storytelling power.
Nice-to-Have
- Phase 7: ChromaDB Integration
- Phase 8: Advanced Features
These enhance but aren't essential for core functionality.
Success Metrics
Feature Adoption
- Percentage of documents with states enabled
- Average number of states per document
- Temporal vs. scenario usage ratio
User Engagement
- Time spent in comparison view
- Number of comparisons per session
- Animation playback frequency
- Actor journey queries
Performance
- State creation time < 500ms
- Diff calculation time < 1s
- Animation frame rate > 30fps
- ChromaDB query latency < 200ms
User Satisfaction
- Qualitative feedback
- Feature requests
- Support tickets
- User testimonials
Migration Strategy
Existing Documents
- All existing documents continue to work
- States are optional (
states?property) - No breaking changes
Enabling States
Users can enable temporal analysis for any document:
- Click "Enable Temporal Analysis" in menu
- System captures current graph as initial state
- Creates default timeline
- User can now create additional states
Export/Import
- Export includes all states (if present)
- Import preserves state structure
- Backward compatible with old exports
Documentation Plan
User Documentation
- Quick Start Guide:
TEMPORAL_QUICK_START.md(created) - Use Case Examples: Included in quick start
- Best Practices: Included in quick start
- Video Tutorials: To be created
Developer Documentation
- Implementation Plan:
TEMPORAL_SCENARIO_IMPLEMENTATION_PLAN.md(created) - Implementation Checklist:
IMPLEMENTATION_CHECKLIST.md(created) - Visual Examples:
VISUAL_EXAMPLES.md(created) - API Reference: To be created with code
- Type Definitions: To be created in code
Design Documentation
- Visual wireframes: Included in plan and examples
- Interaction patterns: Included in examples
- Component hierarchy: Included in plan
Common Pitfalls to Avoid
1. Creating Too Many States
Problem: State for every tiny change Solution: Capture states only at significant milestones
2. Poor State Naming
Problem: "State 1", "State 2" with no context Solution: Use descriptive labels with date/context
3. Not Using Comparison
Problem: Just switching between states without analysis Solution: Actively use comparison view to identify changes
4. Mixing Temporal and Scenario
Problem: Scenarios and time in same timeline Solution: Keep temporal timelines and scenario branches separate
5. Neglecting Metadata
Problem: States without descriptions or notes Solution: Always add context (date, description, key changes)
6. Performance Issues with Large Graphs
Problem: Slow diff calculation or animation Solution: Implement caching, Web Workers, progressive rendering
Next Steps
Immediate (This Week)
- Review and approve this revised plan
- Set up project board/tracker
- Create initial type definitions
- Begin Phase 1 implementation
Short-Term (Next 2-4 Weeks)
- Complete Phase 1 (Core State Management)
- Begin Phase 2 (Temporal Analysis)
- Create example documents for testing
- Gather early user feedback
Medium-Term (Next 2-3 Months)
- Complete Phases 2-3 (Temporal + Comparison)
- Begin Phase 4 (Scenario Branching)
- User testing with real use cases
- Iterate based on feedback
Long-Term (3-6 Months)
- Complete Phases 4-6 (Scenarios, Journeys, Animation)
- ChromaDB integration (Phase 7)
- Advanced features (Phase 8)
- Production release
Files Created
This revision has created the following documentation:
-
TEMPORAL_SCENARIO_IMPLEMENTATION_PLAN.md (24KB)
- Complete technical implementation plan
- Data models and type definitions
- Component architecture
- Phase-by-phase breakdown
- ChromaDB integration details
- Algorithms and utilities
-
TEMPORAL_QUICK_START.md (16KB)
- User-focused guide
- Core concepts explained
- Common use cases with examples
- Workflow walkthroughs
- Best practices
- FAQ
-
IMPLEMENTATION_CHECKLIST.md (15KB)
- Granular task breakdown
- Phase-by-phase checklist
- Testing requirements
- Documentation tasks
- Success metrics
-
VISUAL_EXAMPLES.md (20KB)
- Concrete visual examples
- 8 detailed scenarios
- UI mockups and wireframes
- Interaction patterns
- Before/after visualizations
-
TEMPORAL_ANALYSIS_SUMMARY.md (This document)
- High-level overview
- Quick reference
- Links to detailed docs
Questions & Answers
Q: Is this replacing the existing document system?
A: No, it's an optional enhancement. Documents work fine without states.
Q: Can I use this for undo/redo?
A: No, states are for temporal/scenario analysis, not edit history. Undo/redo is separate.
Q: How many states can a document have?
A: No hard limit, but recommend <100 for performance. We'll implement pagination for large collections.
Q: Will this work with existing documents?
A: Yes, fully backward compatible. Enable states when you need them.
Q: Can I export just the timeline?
A: Yes, you can export specific timelines or scenario branches independently.
Q: How does this differ from version control?
A: Version control tracks edit history for recovery. This tracks temporal evolution and scenarios for analysis and storytelling.
Q: What about collaborative editing?
A: That's a separate feature. States can be shared but editing is still single-user.
Q: Can I animate between any two states?
A: Yes, animation works between any pair of states, not just sequential ones.
Resources
Documentation
- Main plan:
TEMPORAL_SCENARIO_IMPLEMENTATION_PLAN.md - User guide:
TEMPORAL_QUICK_START.md - Checklist:
IMPLEMENTATION_CHECKLIST.md - Examples:
VISUAL_EXAMPLES.md
Code (To Be Created)
- Types:
/src/types/temporal.ts - Store:
/src/stores/stateStore.ts - Components:
/src/components/TemporalAnalysis/ - Utils:
/src/utils/stateDiff.ts,stateAnimation.ts, etc.
External Resources
- ChromaDB docs: https://docs.trychroma.com/
- React Flow (for graph): https://reactflow.dev/
- Zustand (state management): https://github.com/pmndrs/zustand
Conclusion
This revised implementation plan transforms Constellation Analyzer from a static graph editor into a powerful temporal and scenario analysis tool. By correctly framing this as storytelling and analysis (not version control), we enable users to:
- Understand change: Track how networks evolve over time
- Explore alternatives: Compare different possible futures
- Analyze dynamics: Identify patterns, trends, and inflection points
- Communicate insights: Present findings with animation and comparison
The phased approach ensures we deliver value incrementally while building toward a comprehensive solution. Starting with core state management and temporal analysis provides immediate utility, while later phases add sophisticated analytical and presentation capabilities.
Ready to begin implementation!