mirror of
https://github.com/OFFIS-ESC/constellation-analyzer
synced 2026-01-27 07:43:41 +00:00
1149 lines
41 KiB
Markdown
1149 lines
41 KiB
Markdown
# Temporal & Scenario Analysis - UX Concept (Revised)
|
|
|
|
## Executive Summary
|
|
|
|
This document outlines the UX concept for multi-graph capabilities in Constellation Analyzer, focusing on **temporal evolution** and **scenario exploration**. This is NOT a version control system - it's a tool for understanding how constellations change over time and exploring alternative futures.
|
|
|
|
**Core Use Cases:**
|
|
- Track relationship evolution across time periods (historical analysis)
|
|
- Explore alternative scenarios and strategic options (what-if analysis)
|
|
- Compare different states side-by-side (comparative analysis)
|
|
- Present evolution to stakeholders (storytelling and presentation)
|
|
|
|
---
|
|
|
|
## 1. Terminology & Mental Model
|
|
|
|
### 1.1 Recommended Terms
|
|
|
|
After careful consideration, we recommend a **dual-mode terminology** that adapts to user context:
|
|
|
|
#### Primary Terms:
|
|
- **State** - A single snapshot of the constellation at a point in time or scenario
|
|
- **Timeline** - The collection of states with temporal/branching relationships
|
|
- **Evolution** - The progression of states over time
|
|
- **Branch** - A divergence point where scenarios split from a common state
|
|
|
|
#### Context-Specific Labels:
|
|
The system should allow users to set their analysis mode:
|
|
|
|
**Temporal Mode** (for time-based analysis):
|
|
- States are called "Timepoints"
|
|
- Labels show dates/periods: "January 2024", "Q2 2024", "6 months post-merger"
|
|
- Navigation emphasizes chronological progression
|
|
- Visual: Timeline with chronological markers
|
|
|
|
**Scenario Mode** (for strategic exploration):
|
|
- States are called "Scenarios"
|
|
- Labels show scenario names: "Aggressive Growth", "Conservative Approach", "Status Quo"
|
|
- Navigation emphasizes comparison and alternatives
|
|
- Visual: Decision tree or parallel tracks
|
|
|
|
**Hybrid Mode** (combines both):
|
|
- Temporal progression WITH scenario branches at key points
|
|
- Example: "Pre-merger" → "Option A: Quick Integration" vs "Option B: Gradual Transition"
|
|
- Visual: Timeline with branching points
|
|
|
|
### 1.2 Mental Model
|
|
|
|
Users should think of this feature as:
|
|
> "A timeline of my constellation's evolution, with the ability to explore 'what-if' branches at any point"
|
|
|
|
**Metaphor:** Think of a photo album with multiple timelines - you can flip through one person's life chronologically, or compare different life paths they could have taken at decision points.
|
|
|
|
**Not like:** Git branches, version control, or undo/redo history
|
|
|
|
---
|
|
|
|
## 2. UI Architecture
|
|
|
|
### 2.1 Layout Overview
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ Header: Constellation Analyzer │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ Menu Bar │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ Document Tabs │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ ┌──────┐ Current State Indicator │
|
|
│ │ ICON │ "Jan 2024" or "Scenario A: Aggressive Growth" │
|
|
│ └──────┘ [Timeline Controls] [Compare] [Present] │
|
|
├──────────┬──────────────────────────────────┬──────────────┤
|
|
│ Left │ │ Right │
|
|
│ Panel │ Graph Canvas │ Panel │
|
|
│ (Tools) │ │ (Properties) │
|
|
│ │ │ │
|
|
├──────────┴──────────────────────────────────┴──────────────┤
|
|
│ Timeline Panel │
|
|
│ [═══●═══●═══●═══●═══] Timeline scrubber │
|
|
│ [Visual timeline with states and branches] │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### 2.2 Current State Indicator (New Component)
|
|
|
|
**Location:** Between toolbar and main canvas, full width
|
|
**Purpose:** Always show which state user is viewing/editing
|
|
|
|
**Design:**
|
|
```
|
|
┌────────────────────────────────────────────────────────────────┐
|
|
│ 📍 Current State: January 2024 │
|
|
│ ← Q4 2023 | [Edit State Info] | Feb 2024 → │
|
|
│ Branch: Main Timeline │
|
|
└────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**Features:**
|
|
- Large, clear state name/label
|
|
- Navigation arrows to previous/next state in sequence
|
|
- Branch indicator if applicable
|
|
- Quick edit button for state metadata
|
|
- Visual connection to timeline panel below
|
|
|
|
### 2.3 Timeline Panel (Bottom Panel - Redesigned)
|
|
|
|
**Default State:** Collapsed (shows only scrubber bar)
|
|
**Expanded State:** Shows full timeline visualization
|
|
|
|
#### Collapsed View (40px height):
|
|
```
|
|
┌────────────────────────────────────────────────────────────────┐
|
|
│ ▲ Timeline [═══●═══●═══●═══●═══] [+] [⚙] [Expand] │
|
|
└────────────────────────────────────────────────────────────────┘
|
|
```
|
|
- Mini timeline scrubber with state markers
|
|
- Current state highlighted
|
|
- Click markers to jump to state
|
|
- Quick add state button
|
|
- Settings for timeline display
|
|
- Expand/collapse toggle
|
|
|
|
#### Expanded View (200-400px height, resizable):
|
|
```
|
|
┌────────────────────────────────────────────────────────────────┐
|
|
│ Timeline View: [Linear] [Tree] [Matrix] [+] [⚙] [▼] │
|
|
├────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ Temporal Mode (Linear): │
|
|
│ ─────●─────────●──────────●──────────●─────────●──── │
|
|
│ Jan 24 Mar 24 Jun 24 Sep 24 Dec 24 │
|
|
│ "Setup" "Growth" "Stable" "Expansion" "Future" │
|
|
│ │
|
|
│ Scenario Mode (Tree): │
|
|
│ ┌──●── "Aggressive" ───●── "Year 2" │
|
|
│ │ "High Risk" "Scale Up" │
|
|
│ ──●───────●──────● │
|
|
│ "Now" "Setup" │ "Decision Point" │
|
|
│ │ │
|
|
│ └──●── "Conservative" ───●── "Stable" │
|
|
│ "Low Risk" "Maintain" │
|
|
│ │
|
|
│ Hybrid Mode (Matrix): │
|
|
│ Shows both temporal and scenario dimensions │
|
|
│ │
|
|
└────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**Visualization Modes:**
|
|
|
|
1. **Linear Timeline** (Temporal):
|
|
- Horizontal timeline with evenly spaced or date-proportional spacing
|
|
- State cards with labels, dates, descriptions
|
|
- Visual continuity indicators (lines/arrows)
|
|
- Current state highlighted with distinct styling
|
|
- Hover shows preview thumbnail
|
|
|
|
2. **Tree View** (Scenarios):
|
|
- Branch visualization showing decision points
|
|
- Parent-child relationships clear
|
|
- Color coding by branch/scenario family
|
|
- Collapsible branches
|
|
- Labels emphasize scenario names over dates
|
|
|
|
3. **Matrix View** (Hybrid):
|
|
- Horizontal axis: Time progression
|
|
- Vertical tracks: Different scenario branches
|
|
- Grid layout showing all parallel scenarios at each timepoint
|
|
- Quick comparison across scenarios
|
|
|
|
**Interactions:**
|
|
- Click state to navigate to it
|
|
- Drag to reorder (with confirmation)
|
|
- Right-click for context menu
|
|
- Double-click to edit metadata
|
|
- Drag timeline area to scroll
|
|
- Pinch/zoom to adjust spacing
|
|
|
|
---
|
|
|
|
## 3. Core Workflows
|
|
|
|
### 3.1 Creating a New State
|
|
|
|
**From Current State:**
|
|
|
|
1. User clicks [+ New State] button in timeline panel or current state indicator
|
|
2. Dialog appears:
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ Create New State │
|
|
├─────────────────────────────────────────┤
|
|
│ ○ Continue Timeline │
|
|
│ Next step in temporal progression │
|
|
│ │
|
|
│ ○ Branch into Scenario │
|
|
│ Alternative possibility from here │
|
|
├─────────────────────────────────────────┤
|
|
│ Label: [_____________________] │
|
|
│ │
|
|
│ ○ Temporal Mode │
|
|
│ Date/Period: [Jan 2024 ▼] │
|
|
│ │
|
|
│ ○ Scenario Mode │
|
|
│ Description: [____________] │
|
|
│ │
|
|
│ Starting Point: │
|
|
│ ⦿ Clone current state │
|
|
│ ○ Clean slate │
|
|
│ │
|
|
│ [Cancel] [Create State] │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
3. User fills in:
|
|
- **Label:** Required name for the state
|
|
- **Type:** Continue timeline (sequential) or branch (alternative)
|
|
- **Mode:** Temporal (with date) or Scenario (with description)
|
|
- **Starting point:** Clone current actors/relations or start empty
|
|
|
|
4. New state is created and becomes the active state
|
|
5. Timeline panel updates to show new state in context
|
|
|
|
**Quick Actions:**
|
|
- "Next Month" button (temporal): Creates next sequential timepoint
|
|
- "What If?" button (scenario): Creates branch from current state
|
|
- Keyboard shortcut: Ctrl+Shift+N
|
|
|
|
### 3.2 Navigating Between States
|
|
|
|
**Timeline Panel:**
|
|
- Click any state marker to jump to it
|
|
- Use scrubber to drag through states (with animation)
|
|
- Arrow keys when timeline focused: ← → navigate chronologically
|
|
|
|
**Current State Indicator:**
|
|
- Previous/Next arrows for sequential navigation
|
|
- Dropdown showing all states with search/filter
|
|
|
|
**Keyboard Shortcuts:**
|
|
- Alt + Left/Right Arrow: Previous/Next state
|
|
- Alt + Number: Jump to state (1-9)
|
|
- Alt + B: Show branch menu
|
|
|
|
**Animation:**
|
|
- When navigating between states, show smooth transition
|
|
- Actors that exist in both: morph positions/properties
|
|
- Actors only in old state: fade out
|
|
- Actors only in new state: fade in
|
|
- Configurable animation speed or instant toggle
|
|
|
|
### 3.3 Comparing States
|
|
|
|
Users need powerful comparison tools for analysis.
|
|
|
|
#### Side-by-Side Comparison
|
|
|
|
1. Click [Compare] button in toolbar
|
|
2. Comparison mode activates:
|
|
```
|
|
┌────────────────────────────────────────────────────────┐
|
|
│ Compare Mode: [State A ▼] vs [State B ▼] [Exit] │
|
|
├──────────────────────────┬─────────────────────────────┤
|
|
│ │ │
|
|
│ State A: Jan 2024 │ State B: Jun 2024 │
|
|
│ "Initial Setup" │ "After Growth" │
|
|
│ │ │
|
|
│ [Graph visualization] │ [Graph visualization] │
|
|
│ │ │
|
|
└──────────────────────────┴─────────────────────────────┘
|
|
```
|
|
|
|
3. Features:
|
|
- Synchronized zoom/pan (toggle)
|
|
- Highlight differences
|
|
- Shared actors connected with visual lines
|
|
- Color coding: Added (green), Removed (red), Changed (yellow)
|
|
- Comparison metrics panel (optional)
|
|
|
|
#### Overlay/Diff Mode
|
|
|
|
1. From comparison mode, toggle to overlay
|
|
2. Single canvas shows both states:
|
|
- State A actors: Semi-transparent
|
|
- State B actors: Full opacity
|
|
- Movement arrows showing position changes
|
|
- New/removed actors clearly marked
|
|
- Toggle layers on/off
|
|
|
|
#### Difference Report
|
|
|
|
1. Click [Generate Report] in comparison mode
|
|
2. Automatic analysis shows:
|
|
- Actors added/removed
|
|
- Relations added/removed
|
|
- Property changes
|
|
- Network metrics comparison (density, centrality, etc.)
|
|
- Export as PDF/HTML
|
|
|
|
### 3.4 Animation Between States
|
|
|
|
**Presentation Mode** (for stakeholder demos):
|
|
|
|
1. Click [Present] button
|
|
2. Presentation interface appears:
|
|
```
|
|
┌──────────────────────────────────────────────────────────┐
|
|
│ ╔═════════════╗ │
|
|
│ ║ ◄ ▐▐ ► ║ [Exit Presentation] │
|
|
│ ╚═════════════╝ │
|
|
├──────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ Full-screen Graph View │
|
|
│ │
|
|
│ State: January 2024 │
|
|
│ "Initial Team Structure" │
|
|
│ │
|
|
│ [Actors and relations displayed] │
|
|
│ │
|
|
└──────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
3. Features:
|
|
- Full-screen mode (ESC to exit)
|
|
- Play/pause automated progression through states
|
|
- Adjustable animation speed
|
|
- State titles and descriptions display as subtitles
|
|
- Voice-over text field (optional annotations read aloud)
|
|
- Export as video/animated GIF
|
|
|
|
4. Presentation Controls:
|
|
- Left/Right arrows: Previous/Next state
|
|
- Space: Play/Pause animation
|
|
- Number keys: Jump to state
|
|
- Escape: Exit presentation mode
|
|
|
|
**Auto-play Settings:**
|
|
- Duration per state: 3s / 5s / 10s / Custom
|
|
- Animation speed: Slow / Medium / Fast / Instant
|
|
- Pause on branches (show decision point)
|
|
|
|
### 3.5 Editing State Metadata
|
|
|
|
**State Information Dialog:**
|
|
|
|
Right-click state in timeline → "Edit State Info"
|
|
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ State Information │
|
|
├─────────────────────────────────────────┤
|
|
│ Label: [January 2024____________] │
|
|
│ │
|
|
│ Mode: ⦿ Temporal ○ Scenario │
|
|
│ │
|
|
│ [Temporal] │
|
|
│ Date: [2024-01-15___] │
|
|
│ Period: [Q1 2024_________] │
|
|
│ │
|
|
│ Description: │
|
|
│ [Initial team structure │
|
|
│ after reorganization...] │
|
|
│ │
|
|
│ Tags: [planning] [actual] [+] │
|
|
│ │
|
|
│ Parent State: ← Q4 2023 │
|
|
│ Next State: → February 2024 │
|
|
│ │
|
|
│ Color: [🎨 Blue] │
|
|
│ │
|
|
│ Notes: │
|
|
│ [Additional context for │
|
|
│ presenters and analysts...] │
|
|
│ │
|
|
│ [Delete State] [Save] │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
**Fields:**
|
|
- **Label:** Display name (required)
|
|
- **Mode:** Temporal or Scenario
|
|
- **Date/Period:** For temporal states
|
|
- **Description:** Rich text description
|
|
- **Tags:** Categorization and filtering
|
|
- **Color:** Custom color for timeline visualization
|
|
- **Notes:** Presenter notes (shown in presentation mode)
|
|
|
|
---
|
|
|
|
## 4. Visual Design Recommendations
|
|
|
|
### 4.1 Timeline Visualization
|
|
|
|
**State Cards in Timeline:**
|
|
```
|
|
┌────────────────────┐
|
|
│ January 2024 │ ← Large, readable label
|
|
│ ┌──────────────┐ │
|
|
│ │ [preview] │ │ ← Small graph thumbnail (optional)
|
|
│ └──────────────┘ │
|
|
│ Initial Setup │ ← Short description
|
|
│ 📅 2024-01-15 │ ← Date/metadata
|
|
│ 👥 12 actors │ ← Quick stats
|
|
└────────────────────┘
|
|
● ← Connection point
|
|
│
|
|
```
|
|
|
|
**Current State Highlighting:**
|
|
- Distinct color (blue/accent color)
|
|
- Subtle glow or border
|
|
- Larger card size
|
|
- Animated pulse (subtle)
|
|
|
|
**Branch Visualization:**
|
|
```
|
|
Main Timeline
|
|
─────●─────●─────●─────
|
|
│
|
|
├──●──● "Scenario A"
|
|
│
|
|
└──●──● "Scenario B"
|
|
```
|
|
- Branch lines with different colors
|
|
- Clear labels at divergence points
|
|
- Hierarchy preserved visually
|
|
|
|
### 4.2 Color Coding System
|
|
|
|
**By Branch/Timeline:**
|
|
- Main timeline: Blue
|
|
- Scenario branches: Purple, Orange, Green, etc.
|
|
- Auto-assign colors, user can override
|
|
|
|
**By State Type:**
|
|
- Temporal (historical): Darker shades
|
|
- Temporal (projected): Lighter shades, dashed borders
|
|
- Scenarios: Solid colors, distinct from temporal
|
|
|
|
**By Status:**
|
|
- Current state: Highlighted accent color
|
|
- Past states: Full color
|
|
- Future states: Semi-transparent
|
|
- Draft/incomplete: Gray with icon
|
|
|
|
### 4.3 Comparison View Design
|
|
|
|
**Side-by-Side:**
|
|
- Vertical divider with drag handle
|
|
- Synchronized indicators (when zoom/pan synced)
|
|
- Difference highlights:
|
|
- Added actors: Green outline with + badge
|
|
- Removed actors: Red outline with - badge (ghost in removed state)
|
|
- Changed actors: Yellow outline
|
|
- Unchanged actors: Normal appearance
|
|
|
|
**Overlay/Diff:**
|
|
- Layer opacity controls
|
|
- Toggle visibility per layer
|
|
- Color shifts to indicate temporal position
|
|
- Movement arrows with directional animation
|
|
|
|
### 4.4 Animation Design
|
|
|
|
**Smooth Transitions:**
|
|
- Actor movement: Bezier curve paths (not straight lines)
|
|
- Fade timing: Staggered (not all at once)
|
|
- Duration: 300-800ms (configurable)
|
|
- Easing: Ease-in-out for natural feel
|
|
|
|
**Attention Direction:**
|
|
- Highlight changes sequentially
|
|
- Narration overlay option
|
|
- Pause points at key changes
|
|
|
|
---
|
|
|
|
## 5. Advanced Features
|
|
|
|
### 5.1 Diff Analysis Tools
|
|
|
|
**Change Detection:**
|
|
- Automatic identification of:
|
|
- New actors (not in previous state)
|
|
- Removed actors
|
|
- Moved actors (position change >threshold)
|
|
- Re-typed actors (type change)
|
|
- New relations
|
|
- Removed relations
|
|
- Changed relation properties
|
|
|
|
**Visualization:**
|
|
- Diff panel (bottom or right)
|
|
- List of changes with categories
|
|
- Click to highlight in graph
|
|
- Filter by change type
|
|
|
|
**Example:**
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ Changes: Jan 2024 → Jun 2024 │
|
|
├─────────────────────────────────────────┤
|
|
│ ✅ Actors Added (3) │
|
|
│ + Alice Johnson (Team Lead) │
|
|
│ + Bob Chen (Designer) │
|
|
│ + Carol Smith (Engineer) │
|
|
│ │
|
|
│ ❌ Actors Removed (1) │
|
|
│ - David Lee (Former Manager) │
|
|
│ │
|
|
│ 🔄 Relations Changed (5) │
|
|
│ ≈ Alice → Bob: "supervises" │
|
|
│ ≈ Carol → Bob: "collaborates" │
|
|
│ ... │
|
|
│ │
|
|
│ 📊 Network Metrics │
|
|
│ Density: 0.45 → 0.52 (+15%) │
|
|
│ Avg Connections: 3.2 → 4.1 │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
### 5.2 Actor Tracking Across Time
|
|
|
|
**Follow Actor Feature:**
|
|
|
|
1. Right-click actor → "Track Across States"
|
|
2. Actor timeline appears:
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ Tracking: Alice Johnson │
|
|
├─────────────────────────────────────────┤
|
|
│ │
|
|
│ Jan 24 Mar 24 Jun 24 Sep 24 │
|
|
│ ●─────────●─────────●─────────● │
|
|
│ │ │ │ │ │
|
|
│ Junior Team Senior Manager │
|
|
│ Dev Lead Dev │
|
|
│ │
|
|
│ Connections: 2 → 5 → 8 → 12 │
|
|
│ Centrality: 0.1 → 0.3 → 0.5 → 0.7 │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
3. Shows:
|
|
- Actor presence in each state
|
|
- Property changes over time
|
|
- Relationship changes
|
|
- Metrics evolution
|
|
- Graph of metrics over time
|
|
|
|
**Use Cases:**
|
|
- Track individual's career progression
|
|
- Monitor key stakeholder involvement
|
|
- Analyze relationship building patterns
|
|
- Identify critical transition points
|
|
|
|
### 5.3 Scenario Comparison Matrix
|
|
|
|
**For Strategic Planning:**
|
|
|
|
```
|
|
┌───────────────────────────────────────────────────────────┐
|
|
│ Scenario Comparison Matrix │
|
|
├───────────┬─────────────┬─────────────┬─────────────┬────┤
|
|
│ │ Aggressive │ Conservative│ Status Quo │...│
|
|
├───────────┼─────────────┼─────────────┼─────────────┼────┤
|
|
│ Team Size │ 25 actors │ 15 actors │ 12 actors │ │
|
|
│ Density │ 0.65 │ 0.42 │ 0.38 │ │
|
|
│ Leaders │ 4 │ 2 │ 1 │ │
|
|
│ Risk │ High │ Medium │ Low │ │
|
|
│ Cost │ $$$ │ $$ │ $ │ │
|
|
├───────────┴─────────────┴─────────────┴─────────────┴────┤
|
|
│ [View] [View] [View] [View] │
|
|
└───────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
- Compare metrics across scenarios
|
|
- Custom metric definitions
|
|
- Export to spreadsheet
|
|
- Visual heatmap of differences
|
|
|
|
### 5.4 Smart Suggestions
|
|
|
|
**AI-Assisted Analysis:**
|
|
|
|
- "Key changes between states" summary
|
|
- "Critical actors in this period" identification
|
|
- "Potential issues" detection (isolated actors, broken connections)
|
|
- "Similar patterns" from other states
|
|
- "Recommended next state" based on patterns
|
|
|
|
(Note: Requires AI integration, future feature)
|
|
|
|
### 5.5 Export & Reporting
|
|
|
|
**Export Options:**
|
|
|
|
1. **Timeline Report (PDF/HTML):**
|
|
- All states with graphs
|
|
- Annotations and descriptions
|
|
- Change summaries
|
|
- Metrics evolution charts
|
|
- Professional formatting
|
|
|
|
2. **Presentation Deck:**
|
|
- PowerPoint/Google Slides
|
|
- One slide per state
|
|
- Transition animations
|
|
- Speaker notes from state notes
|
|
|
|
3. **Video/Animation:**
|
|
- MP4 export of presentation mode
|
|
- Configurable duration and transitions
|
|
- Voiceover from notes (text-to-speech)
|
|
- Watermark and branding options
|
|
|
|
4. **Data Export:**
|
|
- CSV with state metadata
|
|
- JSON with full state data
|
|
- Graph metrics per state
|
|
- Change log
|
|
|
|
---
|
|
|
|
## 6. Data Model
|
|
|
|
### 6.1 State Structure
|
|
|
|
```typescript
|
|
interface ConstellationState {
|
|
id: string;
|
|
label: string;
|
|
description?: string;
|
|
|
|
// Mode and temporal information
|
|
mode: 'temporal' | 'scenario';
|
|
date?: string; // ISO date for temporal states
|
|
period?: string; // e.g., "Q1 2024", "6 months post-merger"
|
|
|
|
// Graph data
|
|
nodes: Actor[];
|
|
edges: Relation[];
|
|
nodeTypes: NodeTypeConfig[];
|
|
edgeTypes: EdgeTypeConfig[];
|
|
|
|
// Relationships to other states
|
|
parentStateId?: string; // State this was created from
|
|
childStateIds: string[]; // States created from this one
|
|
branchName?: string; // For organizing branches
|
|
|
|
// Metadata
|
|
tags: string[];
|
|
color?: string; // Custom color for timeline
|
|
notes?: string; // Presenter notes
|
|
thumbnail?: string; // Base64 or URL to preview image
|
|
|
|
// Timestamps
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
}
|
|
```
|
|
|
|
### 6.2 Timeline Structure
|
|
|
|
```typescript
|
|
interface Timeline {
|
|
id: string;
|
|
documentId: string; // Link to parent document
|
|
|
|
states: ConstellationState[];
|
|
|
|
// Timeline metadata
|
|
name: string;
|
|
description?: string;
|
|
defaultMode: 'temporal' | 'scenario' | 'hybrid';
|
|
|
|
// View preferences
|
|
viewMode: 'linear' | 'tree' | 'matrix';
|
|
sortBy: 'date' | 'created' | 'custom';
|
|
|
|
// Presentation settings
|
|
presentationSettings: {
|
|
autoPlayDuration: number; // seconds per state
|
|
animationSpeed: 'slow' | 'medium' | 'fast' | 'instant';
|
|
showDescriptions: boolean;
|
|
pauseOnBranches: boolean;
|
|
};
|
|
}
|
|
```
|
|
|
|
### 6.3 Document Structure Update
|
|
|
|
```typescript
|
|
interface Document {
|
|
// Existing fields...
|
|
id: string;
|
|
name: string;
|
|
|
|
// Add timeline reference
|
|
timelineId?: string;
|
|
currentStateId?: string; // Active state being edited
|
|
|
|
// Legacy support: documents without timeline
|
|
// use existing nodes/edges directly
|
|
nodes?: Actor[];
|
|
edges?: Relation[];
|
|
nodeTypes?: NodeTypeConfig[];
|
|
edgeTypes?: EdgeTypeConfig[];
|
|
}
|
|
```
|
|
|
|
**Migration Strategy:**
|
|
- Existing documents: Continue to work without timeline
|
|
- User can "Enable Timeline" to convert to multi-state
|
|
- First state created automatically from current graph
|
|
- Backwards compatible
|
|
|
|
---
|
|
|
|
## 7. User Stories & Use Cases
|
|
|
|
### 7.1 Organizational Consultant
|
|
|
|
**Scenario:** Track team dynamics over 6-month transformation
|
|
|
|
**Story:**
|
|
> "As an organizational consultant, I want to document how team relationships evolved during a restructuring so that I can present the transformation to leadership and identify success factors."
|
|
|
|
**Workflow:**
|
|
1. Create document: "Sales Team Transformation"
|
|
2. Set to Temporal Mode
|
|
3. Create state "January 2024 - Before Restructure"
|
|
- Add all team members
|
|
- Map current reporting relationships
|
|
4. Create state "March 2024 - Mid-transition"
|
|
- Update structure, add new manager
|
|
- Show matrix relationships forming
|
|
5. Create state "June 2024 - New Structure"
|
|
- Final organizational structure
|
|
- New collaboration patterns
|
|
6. Use Compare mode to show before/after
|
|
7. Generate presentation showing evolution
|
|
8. Present to leadership with animated transitions
|
|
|
|
**Key Features Used:**
|
|
- Temporal mode with dates
|
|
- State-to-state animation
|
|
- Comparison view
|
|
- Presentation mode
|
|
- Change detection
|
|
|
|
### 7.2 Strategic Planner
|
|
|
|
**Scenario:** Evaluate three alternative market entry strategies
|
|
|
|
**Story:**
|
|
> "As a strategic planner, I want to model different partnership scenarios so that our executive team can compare approaches and make an informed decision."
|
|
|
|
**Workflow:**
|
|
1. Create document: "APAC Market Entry 2025"
|
|
2. Set to Scenario Mode
|
|
3. Create base state "Current Partnerships - Q4 2024"
|
|
- Map existing partner ecosystem
|
|
4. Branch into three scenarios:
|
|
- "Scenario A: Direct Entry" (build own team)
|
|
- "Scenario B: Strategic Acquisition" (acquire local player)
|
|
- "Scenario C: JV Partnership" (joint venture)
|
|
5. Model each scenario:
|
|
- Different actor sets (internal vs. external)
|
|
- Different relationship patterns
|
|
- Add cost/risk tags
|
|
6. Use Comparison Matrix to evaluate:
|
|
- Team size, relationship density
|
|
- Risk factors, dependencies
|
|
7. Present all three to executive team
|
|
8. Decision made, continue developing chosen scenario
|
|
|
|
**Key Features Used:**
|
|
- Scenario mode with branches
|
|
- State cloning with modifications
|
|
- Comparison matrix
|
|
- Scenario-specific metadata
|
|
- Multi-scenario presentation
|
|
|
|
### 7.3 Family Therapist
|
|
|
|
**Scenario:** Track family system changes through therapy
|
|
|
|
**Story:**
|
|
> "As a family therapist, I want to visualize how family relationships evolve over our sessions so that family members can see their progress and understand the changes they've made."
|
|
|
|
**Workflow:**
|
|
1. Create document: "Johnson Family System"
|
|
2. Set to Temporal Mode
|
|
3. Create state "Session 1 - Initial Intake"
|
|
- Map family members
|
|
- Show conflict patterns (red edges)
|
|
- Identify isolated members
|
|
4. Create state "Session 5 - After First Intervention"
|
|
- Update relationship types
|
|
- Show new communication patterns
|
|
5. Create state "Session 10 - Current State"
|
|
- Document improvements
|
|
- Identify remaining work areas
|
|
6. Show animated progression to family
|
|
7. Highlight positive changes
|
|
8. Discuss next goals based on visual
|
|
|
|
**Key Features Used:**
|
|
- Temporal progression
|
|
- Relationship type tracking
|
|
- Visual storytelling
|
|
- Change highlighting
|
|
- Actor tracking (family member journeys)
|
|
|
|
### 7.4 Researcher - Historical Analysis
|
|
|
|
**Scenario:** Study political alliance formation pre-WWI
|
|
|
|
**Story:**
|
|
> "As a historian, I want to map how European alliances shifted from 1900-1914 so that I can analyze the path to war and teach students about alliance dynamics."
|
|
|
|
**Workflow:**
|
|
1. Create document: "European Alliances 1900-1914"
|
|
2. Set to Temporal Mode
|
|
3. Create states for key years:
|
|
- "1900 - Post-Victorian Era"
|
|
- "1904 - Entente Cordiale"
|
|
- "1907 - Triple Entente Formed"
|
|
- "1912 - Balkan Wars Impact"
|
|
- "1914 - Pre-War System"
|
|
4. For each state:
|
|
- Add nations as actors
|
|
- Map alliances as relations
|
|
- Annotate with historical context
|
|
5. Create "What-If" branches:
|
|
- "If Britain remained neutral"
|
|
- "If Russia-Japan alliance continued"
|
|
6. Use presentation mode for lectures
|
|
7. Generate report with analysis
|
|
|
|
**Key Features Used:**
|
|
- Historical timeline
|
|
- Dense annotations
|
|
- Counterfactual scenarios (branches)
|
|
- Educational presentation
|
|
- Export for publication
|
|
|
|
### 7.5 Product Manager - Stakeholder Mapping
|
|
|
|
**Scenario:** Plan stakeholder engagement for product launch
|
|
|
|
**Story:**
|
|
> "As a product manager, I want to model how our stakeholder ecosystem will evolve from beta to GA launch so that we can plan our engagement strategy and identify key influencers at each stage."
|
|
|
|
**Workflow:**
|
|
1. Create document: "Product X Launch Stakeholders"
|
|
2. Set to Temporal Mode
|
|
3. Create states:
|
|
- "Current - Pre-announcement"
|
|
- "Beta Program - Month 1"
|
|
- "Beta Program - Month 3"
|
|
- "GA Launch"
|
|
- "3 Months Post-GA"
|
|
4. For each state:
|
|
- Add/remove stakeholders
|
|
- Update engagement levels (edge strength)
|
|
- Mark key influencers
|
|
5. Track specific stakeholders across timeline
|
|
6. Identify where to focus engagement efforts
|
|
7. Share with marketing team
|
|
|
|
**Key Features Used:**
|
|
- Temporal planning
|
|
- Actor tracking
|
|
- Relationship strength evolution
|
|
- Strategic planning view
|
|
- Team collaboration
|
|
|
|
---
|
|
|
|
## 8. Implementation Priorities
|
|
|
|
### Phase 1: Core Functionality (MVP)
|
|
**Goal:** Basic multi-state support
|
|
|
|
- [ ] State data model and storage
|
|
- [ ] Create/switch between states
|
|
- [ ] Simple timeline panel (linear view)
|
|
- [ ] Current state indicator
|
|
- [ ] Basic state metadata editing
|
|
- [ ] Timeline navigation
|
|
|
|
**Success Criteria:**
|
|
- User can create multiple states
|
|
- User can switch between states
|
|
- Changes are saved per-state
|
|
- UI clearly shows current state
|
|
|
|
### Phase 2: Temporal & Scenario Modes
|
|
**Goal:** Differentiate use cases
|
|
|
|
- [ ] Temporal vs. Scenario mode selection
|
|
- [ ] Date/period fields for temporal states
|
|
- [ ] Branch creation from states
|
|
- [ ] Tree view in timeline panel
|
|
- [ ] State cloning options
|
|
- [ ] Basic comparison (side-by-side)
|
|
|
|
**Success Criteria:**
|
|
- User can track temporal progression
|
|
- User can branch into scenarios
|
|
- User can compare two states side-by-side
|
|
- Timeline visualizes branches clearly
|
|
|
|
### Phase 3: Analysis & Comparison
|
|
**Goal:** Power user features
|
|
|
|
- [ ] Advanced comparison (overlay/diff)
|
|
- [ ] Change detection and highlighting
|
|
- [ ] Actor tracking across states
|
|
- [ ] Comparison matrix for scenarios
|
|
- [ ] Metrics evolution charts
|
|
- [ ] Difference reports
|
|
|
|
**Success Criteria:**
|
|
- User can analyze changes between states
|
|
- User can track individual actors over time
|
|
- User can generate comparison reports
|
|
|
|
### Phase 4: Presentation & Export
|
|
**Goal:** Storytelling and sharing
|
|
|
|
- [ ] Presentation mode
|
|
- [ ] State-to-state animation
|
|
- [ ] Auto-play with timing controls
|
|
- [ ] Export timeline as PDF
|
|
- [ ] Export as PowerPoint
|
|
- [ ] Video/GIF export
|
|
- [ ] Presenter notes support
|
|
|
|
**Success Criteria:**
|
|
- User can present evolution to stakeholders
|
|
- User can export for external sharing
|
|
- Animations are smooth and professional
|
|
|
|
### Phase 5: Advanced Features
|
|
**Goal:** Enterprise and research use
|
|
|
|
- [ ] Smart suggestions/AI analysis
|
|
- [ ] Custom metrics tracking
|
|
- [ ] Advanced filtering and search
|
|
- [ ] Collaborative editing per state
|
|
- [ ] Template scenarios
|
|
- [ ] Import/export timeline formats
|
|
|
|
---
|
|
|
|
## 9. Design Patterns & Best Practices
|
|
|
|
### 9.1 State Management
|
|
|
|
**Immutability:**
|
|
- Each state is independent snapshot
|
|
- Editing state A doesn't affect state B
|
|
- Changes are isolated to active state
|
|
|
|
**Auto-save:**
|
|
- Changes save immediately to current state
|
|
- No "save state" button needed
|
|
- Visual indicator when saving
|
|
|
|
**Conflicts:**
|
|
- Not applicable (no concurrent editing of same state)
|
|
- But consider: collaborative scenarios in future
|
|
|
|
### 9.2 Performance Considerations
|
|
|
|
**Large Timelines:**
|
|
- Lazy load state data
|
|
- Only active state + neighbors in memory
|
|
- Thumbnails for preview
|
|
- Virtualized timeline rendering
|
|
|
|
**Complex Graphs:**
|
|
- Same optimization as single-state graphs
|
|
- Cache state thumbnails
|
|
- Progressive loading in comparison mode
|
|
|
|
### 9.3 User Guidance
|
|
|
|
**First-time Use:**
|
|
- Onboarding tour explaining temporal/scenario concepts
|
|
- Template timelines for common use cases
|
|
- Example documents with states
|
|
|
|
**Inline Help:**
|
|
- Tooltips explaining state operations
|
|
- Context-sensitive help in timeline panel
|
|
- Visual cues for branch points
|
|
|
|
### 9.4 Accessibility
|
|
|
|
**Keyboard Navigation:**
|
|
- All timeline operations keyboard-accessible
|
|
- State switcher with keyboard
|
|
- Presentation mode keyboard controls
|
|
|
|
**Screen Readers:**
|
|
- Announce state changes
|
|
- Describe timeline structure
|
|
- Alternative text for visualizations
|
|
|
|
**Visual Design:**
|
|
- High contrast for current state
|
|
- Clear focus indicators
|
|
- Colorblind-safe highlighting
|
|
|
|
---
|
|
|
|
## 10. Measuring Success
|
|
|
|
### 10.1 User Metrics
|
|
|
|
**Engagement:**
|
|
- Percentage of users who create 2+ states
|
|
- Average states per document
|
|
- Time spent in comparison mode
|
|
- Presentation mode usage
|
|
|
|
**Feature Adoption:**
|
|
- Temporal mode vs. Scenario mode usage
|
|
- Branch creation frequency
|
|
- Actor tracking usage
|
|
- Export/presentation frequency
|
|
|
|
### 10.2 User Feedback
|
|
|
|
**Qualitative:**
|
|
- User interviews with consultants, strategists
|
|
- Usability testing of timeline panel
|
|
- Feedback on comparison features
|
|
- Presentation mode effectiveness
|
|
|
|
**Quantitative:**
|
|
- NPS score for timeline feature
|
|
- Feature satisfaction ratings
|
|
- Bug reports and friction points
|
|
|
|
### 10.3 Success Indicators
|
|
|
|
**Good Signs:**
|
|
- Users naturally create states without prompting
|
|
- Users share presentations with stakeholders
|
|
- Users request advanced comparison features
|
|
- Users migrate existing documents to timelines
|
|
|
|
**Warning Signs:**
|
|
- Users confused about state vs. document
|
|
- Timeline panel rarely used
|
|
- Users try to use as version control
|
|
- High abandonment of multi-state documents
|
|
|
|
---
|
|
|
|
## 11. Future Enhancements
|
|
|
|
### 11.1 Collaborative Scenarios
|
|
|
|
**Multi-user Planning:**
|
|
- Different team members model different scenarios
|
|
- Merge scenarios for discussion
|
|
- Voting/commenting on scenario states
|
|
|
|
### 11.2 Dynamic States
|
|
|
|
**Live Data Integration:**
|
|
- States update from external data sources
|
|
- Real-time stakeholder maps
|
|
- Automated state creation from events
|
|
|
|
### 11.3 AI-Powered Insights
|
|
|
|
**Predictive Modeling:**
|
|
- "Likely evolution" suggestions
|
|
- Pattern matching from similar timelines
|
|
- Risk assessment across scenarios
|
|
- Anomaly detection
|
|
|
|
### 11.4 Advanced Visualizations
|
|
|
|
**3D Timeline:**
|
|
- Time as Z-axis
|
|
- Spatial evolution visualization
|
|
- VR presentation mode
|
|
|
|
**Network Metrics Over Time:**
|
|
- Animated metric dashboards
|
|
- Trend analysis
|
|
- Correlation detection
|
|
|
|
---
|
|
|
|
## Conclusion
|
|
|
|
This revised UX concept positions Constellation Analyzer's multi-graph feature as a powerful tool for **temporal analysis** and **scenario exploration**, not version control.
|
|
|
|
**Key Differentiators:**
|
|
1. **Dual-mode design**: Temporal and Scenario modes for different use cases
|
|
2. **Comparison-first**: Multiple ways to compare and analyze states
|
|
3. **Presentation-ready**: Built for storytelling and stakeholder communication
|
|
4. **Evolution tracking**: Follow actors and relationships over time
|
|
5. **Strategic planning**: Model and evaluate alternative futures
|
|
|
|
**Next Steps:**
|
|
1. Validate terminology with target users (consultants, strategists, researchers)
|
|
2. Create interactive prototype of timeline panel
|
|
3. User test comparison and presentation modes
|
|
4. Prioritize Phase 1 features for development
|
|
5. Build example use cases for each user persona
|
|
|
|
---
|
|
|
|
## Appendix: Alternative Terminology Considered
|
|
|
|
### Timeline Terms:
|
|
- ✅ Timeline - Clear, intuitive
|
|
- ❌ History - Implies past only
|
|
- ❌ Evolution - Too biological
|
|
- ❌ Journey - Too narrative-focused
|
|
- ❌ Progression - Good but less common
|
|
|
|
### State Terms:
|
|
- ✅ State - Neutral, technical but clear
|
|
- ✅ Snapshot - Intuitive but implies static
|
|
- ❌ Version - Too version-control-like
|
|
- ❌ Instance - Too technical
|
|
- ❌ Frame - Too video-like
|
|
- ❌ Point - Too minimal
|
|
|
|
### Branch Terms:
|
|
- ✅ Branch - Familiar from trees/git
|
|
- ✅ Scenario - Clear for alternatives
|
|
- ❌ Fork - Too git-specific
|
|
- ❌ Alternative - Too wordy
|
|
- ❌ Path - Could work but less clear
|
|
|
|
**Final Decision:** Adaptive terminology based on user-selected mode (Temporal vs. Scenario) provides the best user experience.
|