Add comprehensive presentation/viewer mode optimized for touch table
interactions with clean UI and touch-friendly timeline navigation.
State Management:
- Add presentationMode toggle to settingsStore with localStorage persistence
- Add preferPresentationMode to DocumentMetadata for per-document preferences
- Auto-enter presentation mode when opening documents that prefer it
- Add setDocumentPresentationPreference() helper to workspaceStore
UI Components:
- Create PresentationTimelineOverlay component with floating timeline control
- Previous/Next navigation buttons with chevron icons
- Horizontal scrollable state list
- Only shows when document has 2+ states
- Proper vertical alignment using flex items-stretch and centered content
- Scales to ~10 states with max-w-screen-md (768px) container
- Create presentation.css for touch optimizations (60px+ touch targets)
UI Modifications:
- App.tsx: Conditional rendering hides editing chrome in presentation mode
- GraphEditor: Disable editing interactions, keep pan/zoom enabled
- MenuBar: Add "Presentation Mode" menu item
- Global shortcuts: F11 to toggle, Escape to exit presentation mode
Tests:
- Add presentation mode tests to settingsStore.test.ts
- Add document preference tests to workspaceStore.test.ts
- All 376 tests passing
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Allow zooming out to 10% (previously 50%) to better accommodate large constellation analyses. Added zoom constants (MIN_ZOOM=0.1, MAX_ZOOM=2.5) for consistency across fitView and ReactFlow component.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fixes TypeScript compilation errors that prevented production build:
- Fix invalid node shape type in integration test (diamond → circle)
- Export WorkspaceSettings type from main types module
- Exclude test files from production build TypeScript check
All tests (368), linting, and build now pass successfully.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements complete testing setup with Vitest and Testing Library,
including unit tests for all Zustand stores and CI/CD automation.
Test Infrastructure:
- Vitest configuration with JSDOM environment
- Testing Library for React component testing
- Test setup with mocks for React Flow and browser APIs
- Comprehensive test suite for all 10 Zustand stores
Store Tests Added:
- bibliographyStore.test.ts: Bibliography entry management
- editorStore.test.ts: Document editor state and operations
- graphStore.test.ts: Graph state and node/edge operations
- historyStore.test.ts: Undo/redo functionality
- panelStore.test.ts: Panel visibility and state management
- searchStore.test.ts: Search functionality and filters
- settingsStore.test.ts: Application settings persistence
- timelineStore.test.ts: Timeline state management
- toastStore.test.ts: Toast notification system
- workspaceStore.test.ts: Workspace and document operations
CI/CD Pipelines:
- New CI workflow for PRs and pushes to main/develop
- Enhanced deployment workflow with test execution
- Automated linting, testing, and type checking
- GitHub Actions integration with artifact deployment
Build Configuration:
- Updated Vite config for test support
- Test scripts in package.json (test:run, test:ui, test:watch)
- Type checking integrated into build process
Documentation:
- Architecture review with recommendations
- Test documentation and patterns guide
All tests passing with comprehensive coverage of store functionality,
edge cases, and error handling scenarios.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Remove three unnecessary eslint-disable comments for @typescript-eslint/no-unused-vars
that were no longer needed, as the destructured variables are actually used.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add double-click handler for minimized groups to quickly maximize them,
providing a faster alternative to using the context menu.
Implementation:
- Add handleNodeDoubleClick callback in GraphEditor
- Check if double-clicked node is a minimized group
- Call toggleGroupMinimized to maximize the group
- Wire handler to ReactFlow's onNodeDoubleClick prop
This improves UX by allowing users to quickly expand minimized groups
to see and edit individual relations within them.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements visual aggregation of edges when multiple relations exist
between two minimized groups, preventing overlapping edges and improving
graph readability.
Key features:
- Aggregate edges between minimized groups using normalized keys (sorted
node IDs) so bidirectional edges (A->B and B->A) merge together
- Display single neutral-styled edge (dark gray, solid, no arrows) with
relation counter badge showing "X relations"
- Disable context menu and use special info panel for aggregated edges
- Hide individual edge type labels when aggregated
- Store all original relation data in aggregatedRelations array
Implementation details:
- GraphEditor: Use Map to deduplicate edges with bidirectional key for
group-to-group connections, attach aggregatedCount metadata
- CustomEdge: Detect aggregated edges and apply neutral styling (#4b5563
color, undirected/no arrows, no type label)
- RightPanel: Show "Aggregated Relations" info panel instead of
EdgeEditorPanel for aggregated edges
- Context menu: Skip aggregated edges to prevent editing synthetic edges
Users can maximize groups to see and edit individual relations. This
keeps the graph clean when working with minimized groups while preserving
all underlying relationship data.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements proper edge rendering when both source and target actors are
in minimized groups. Edges are now correctly rerouted to connect the
minimized group nodes with dynamic floating edge calculations.
Key changes:
- Add edge rerouting logic to redirect edges from hidden actors to their
parent minimized groups
- Implement edge deduplication to prevent multiple edges between same
groups when multiple actors have connections
- Fix floating edge calculations with fallback dimensions to prevent NaN
- Use canonical parentId property instead of actorIds array for accuracy
- Create constants.ts for MINIMIZED_GROUP_WIDTH/HEIGHT (220x80)
- Replace magic numbers throughout codebase with named constants
- Remove sourceHandle/targetHandle properties when routing to groups to
avoid React Flow validation errors
Technical details:
- GraphEditor: Build actor-to-group mapping using parentId, deduplicate
edges with Map keyed by source_target, strip handle properties
- CustomEdge: Use floating edge params for minimized groups on both ends
- edgeUtils: Add fallback dimensions and division-by-zero guards in
getNodeIntersection and getEdgePosition
- graphStore: Use constants for minimized group dimensions
Edges between minimized groups now render with proper Bezier curves and
dynamic connection points that adapt to group positions.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements comprehensive multi-selection support for bulk operations on
actors, relations, and groups.
Features:
- New MultiSelectProperties panel for 2+ selected elements
- Bulk operations: group, ungroup, delete, minimize/maximize
- Add actors to existing groups (expands group bounds)
- Reverse relation directions
- Change directionality for multiple relations
- Immediate UI feedback with local state for directionality
- Standardized panel layout with scrollable content and footer
Fixes:
- Group positioning: actors stay at absolute positions when added/removed
- Minimize/maximize: properly stores/restores dimensions and visibility
- Position conversion between absolute and relative coordinates
- Type-safe width/height handling for group dimensions
UI Consistency:
- All property panels use fragment wrapper pattern
- Scrollable content area with px-3 py-3 padding
- Fixed footer section with action buttons
- Consistent button styles across panels
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Edge labels were appearing behind edges when a group was selected
because React Flow elevates selected nodes to z-index ~1000, bringing
their child edges above the edge labels.
Solution:
- Increased edge label z-index from 1000 to 1100
- Ensures labels always render on top of edges, even in selected groups
The issue occurred because:
1. Edge labels use EdgeLabelRenderer (separate overlay layer)
2. When groups are selected, React Flow increases their z-index
3. Group edges (SVG elements) inherit the elevated z-index
4. Edge labels at z-index 1000 were below the elevated edges
By setting edge labels to z-index 1100, they now consistently
render above all edges regardless of selection state.
Benefits:
- ✅ Edge labels always readable, even with selected groups
- ✅ Consistent label visibility across all interaction states
- ✅ Better UX for understanding relationships in groups
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Maximized groups now display their assigned background color instead
of using the hardcoded default gray color.
Changes:
GroupNode.tsx:
- Added background color overlay div in maximized state
- Uses data.color property (same as minimized groups)
- Positioned absolutely to fill entire group area
- Set pointerEvents: 'none' to allow interaction with children
index.css:
- Changed .react-flow__node-group background to transparent
- Changed .react-flow__node-group.selected background to transparent
- Inner div now controls the background color
This ensures visual consistency between minimized and maximized
groups - both now respect the user-selected color from the group
properties panel.
Benefits:
- ✅ Visual consistency between group states
- ✅ User-selected colors are always visible
- ✅ Better visual organization with color-coded groups
- ✅ Matches user expectations for group appearance
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Completed Phase 6.2 of the state management refactoring plan.
Investigation Result: ✅ ALREADY COMPLIANT
The codebase already has strictNullChecks enabled via "strict": true
in tsconfig.json and passes all type safety requirements with zero
compilation errors.
Findings:
- TypeScript strict mode is enabled (includes strictNullChecks)
- Entire codebase compiles cleanly with no null/undefined errors
- All 9 non-null assertions (!) are used safely with prior checks
- Code demonstrates excellent TypeScript hygiene
Audit of Non-Null Assertions:
- timelineStore.ts: 7 instances (safe - after null checks)
- TimelineView.tsx: 2 instances (safe - after null checks)
All assertions follow the pattern of checking for null/undefined
before the assertion, making them safe in practice.
Conclusion:
No changes required. The development team has maintained strict
null safety throughout the project. Phase 6.2 requirements are
already satisfied.
🎉 ALL 6 PHASES OF REFACTORING PLAN COMPLETE 🎉
- ✅ Phase 1: Remove legacy code
- ✅ Phase 2: Centralize snapshot creation
- ✅ Phase 3: Add type management atomicity
- ✅ Phase 4: Fix group creation history timing
- ✅ Phase 5: Improve label deletion atomicity
- ✅ Phase 6.1: Document sync points
- ✅ Phase 6.2: Strict null checks (already enabled)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements Phase 6.1 of the state management refactoring plan.
Added detailed documentation for all 5 critical sync points in the
state management architecture, making data flow explicit and traceable.
Sync Points Documented:
1. Document → graphStore (useActiveDocument.ts:67-80)
- When: Active document switches
- What: Loads timeline state into editor
- Direction: ConstellationDocument → graphStore
2. graphStore → timeline current state (useActiveDocument.ts:197-214)
- When: Graph changes detected
- What: Updates timeline's current state
- Direction: graphStore → timeline.states[currentStateId]
3. timeline → document (workspaceStore.ts:789-818)
- When: Document save
- What: Serializes timeline to storage
- Direction: timelineStore → document.timeline → localStorage
4. document types → graphStore (workspaceStore.ts:1018-1034)
- When: Type management operations
- What: Syncs types to editor if active
- Direction: document → graphStore (if active)
5. timeline → graphStore (timelineStore.ts:286-311)
- When: Timeline state switch
- What: Loads state's graph into editor
- Direction: timeline.states[targetId] → graphStore
Each sync point includes:
- ✅ Visual separator for easy identification
- ✅ Trigger condition (when it occurs)
- ✅ Data being synchronized (what changes)
- ✅ Source of truth clarification
- ✅ Data flow direction
- ✅ Context and rationale
Benefits:
- Clear understanding of data flow through the system
- Easier onboarding for new developers
- Prevents accidental breaking of sync relationships
- Makes debugging state issues much faster
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Applied luminosity-based contrast color calculation to minimized
group labels, matching the same accessibility approach used for
actor nodes.
Changes:
- Added rgbToHex() helper to convert rgb/rgba colors to hex format
- Import getContrastColor() from colorUtils
- Calculate text color based on background luminosity
- Apply calculated color to both label and subtitle
Typography updates to match actor nodes:
- Main label: text-base font-bold (was text-sm font-semibold)
- Subtitle: text-xs font-medium with 0.7 opacity (was text-gray-600)
- Both use dynamic textColor instead of fixed gray values
Benefits:
- ✅ Readable labels on both light and dark group backgrounds
- ✅ Consistent typography between actor nodes and group nodes
- ✅ Follows WCAG 2.0 luminance contrast standards
- ✅ Professional appearance across all color choices
The minimized group labels now automatically switch between white
and black text based on the background color's luminosity, ensuring
optimal readability in all cases.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements Phase 5 of the state management refactoring plan.
Problem:
The previous implementation mutated timeline states in place when
removing label references from nodes and edges. This created a risk
of partial state corruption if an error occurred mid-operation.
Solution:
Refactored deleteLabelFromDocument to use immutable updates:
1. Build new timeline states Map with cleaned labels
- Map over all states, nodes, and edges immutably
- Create new objects instead of mutating existing ones
2. Atomic timeline swap
- Replace entire timeline structure at once
- Either fully succeeds or fully fails (no partial state)
3. Simplified rollback
- Capture entire original timeline (shallow copy)
- Restore complete timeline on failure
- No need to patch individual nodes/edges
Benefits:
- ✅ True atomicity - timeline updates are all-or-nothing
- ✅ Cleaner rollback - restore entire structure, not individual items
- ✅ Reduced mutation risk - immutable pattern throughout
- ✅ Better data integrity across timeline states
- ✅ Consistent with React/Zustand best practices
The operation now builds a completely new timeline structure and
swaps it atomically, ensuring that label deletion either fully
succeeds across all timeline states or fully rolls back.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The group property panel's minimize/maximize button label was not
updating after clicking because it relied on the selectedGroup prop
passed from the parent, which was set once on selection and never
updated when the group's minimized state changed in the store.
Changes:
- Added currentGroup lookup from the store's groups array
- Use currentGroup (from store) for minimized state checks
- Button label now reflects the actual current state
This ensures the button always shows the correct action based on
the group's actual minimized state in the store, not the stale
prop value.
Fixes the issue where clicking "Minimize Group" would minimize the
group visually but the button would still say "Minimize Group"
instead of changing to "Maximize Group".
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements Phase 3.1 of the state management refactoring plan.
Changes:
- Added executeTypeTransaction() helper in workspaceStore for atomic
operations with automatic rollback on failure
- Refactored all 9 type/label operations to use transaction pattern:
* Node types: add, update, delete
* Edge types: add, update, delete
* Labels: add, update, delete
- Each operation now captures original state and can rollback if:
* localStorage quota is exceeded (QuotaExceededError)
* Any other error occurs during the multi-step process
Transaction pattern ensures atomicity:
1. Capture original state (for rollback)
2. Execute operation (update doc, save storage, mark dirty, sync)
3. If error: rollback to original state and show error toast
4. Rollback restores: document state, isDirty flag, graphStore sync
Label deletion includes comprehensive rollback:
- Restores label array
- Restores label references in all timeline states (nodes and edges)
- Syncs graphStore if active document
Benefits:
- Prevents partial failures leaving state inconsistent
- Handles storage quota errors gracefully
- Provides user feedback via toast notifications
- Maintains data integrity across all stores
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixes architectural issue where snapshot logic was duplicated between
hook and store layers.
Problem Identified:
- useDocumentHistory (hook) created snapshots with duplicate logic
- timelineStore (store) created snapshots with duplicate logic
- timelineStore couldn't call useDocumentHistory (hooks can't be used in stores)
- Snapshot creation logic scattered across codebase
Root Cause:
Timeline operations happen in the store layer but history was managed
via a hook. This architectural mismatch forced duplication.
Solution:
- Add pushToHistory() method to historyStore
- Single source of truth for snapshot creation
- Both hook and store layers call historyStore.pushToHistory()
- Eliminates all snapshot creation duplication
Changes:
- Add historyStore.pushToHistory() - high-level API with snapshot creation
- Keep historyStore.pushAction() - low-level API (for future use)
- Update useDocumentHistory to call historyStore.pushToHistory()
- Update timelineStore pushDocumentHistory() to call historyStore.pushToHistory()
- Remove createDocumentSnapshot import from useDocumentHistory
- Remove createDocumentSnapshot import from timelineStore
Architecture:
Before:
Hook (useDocumentHistory) → creates snapshot → historyStore.pushAction()
Store (timelineStore) → creates snapshot → historyStore.pushAction()
[Duplication at 2 call sites]
After:
Hook (useDocumentHistory) → historyStore.pushToHistory() → creates snapshot
Store (timelineStore) → historyStore.pushToHistory() → creates snapshot
[Single implementation in historyStore]
Benefits:
- ✅ Zero snapshot creation duplication
- ✅ Proper architectural separation (store handles snapshots, not hook/store)
- ✅ Single source of truth (historyStore.pushToHistory)
- ✅ Timeline and graph operations use identical snapshot logic
- ✅ Easy to modify snapshot behavior in future (one place)
Impact:
- No breaking changes
- No behavior changes
- Better code organization
- Easier maintenance
Related: Phase 2.1 architectural improvement
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Eliminates duplicate snapshot logic between useDocumentHistory and timelineStore.
Problem:
- useDocumentHistory created snapshots reading types from document (correct)
- timelineStore created snapshots reading types from graphStore (incorrect)
- ~30 lines of duplicated snapshot creation logic
- Risk of inconsistent behavior between graph and timeline operations
Solution:
- Created createDocumentSnapshot() in documentUtils.ts
- Single source of truth for snapshot creation
- Always reads types/labels from document (correct source)
- Syncs timeline current state before snapshot (ensures latest data)
Changes:
- Add createDocumentSnapshot() to src/stores/workspace/documentUtils.ts
- Update useDocumentHistory.ts to use centralized helper
- Update timelineStore.ts pushDocumentHistory() to use centralized helper
- Remove duplicate snapshot creation code (~30 lines)
Benefits:
- ✅ Consistent snapshot behavior everywhere
- ✅ Types always read from document (source of truth)
- ✅ Easier to maintain (single implementation)
- ✅ Fixes potential bug where timelineStore had stale types
- ✅ Better code organization
Impact:
- No breaking changes
- Undo/redo behavior unchanged for users
- Timeline operations now have correct type information
- Safer - impossible for snapshot logic to diverge
Testing:
- TypeScript compilation passes
- No runtime behavior changes expected
- Snapshot structure unchanged
Related: Phase 2.1 of STATE_MANAGEMENT_REFACTORING_PLAN.md
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removes ~350 lines of legacy code from single-document system.
Changes:
- Delete src/stores/persistence/loader.ts (legacy load functions)
- Delete src/stores/persistence/saver.ts (legacy save functions)
- Delete src/stores/workspace/migration.ts (no migration support needed)
- Create src/stores/workspace/documentUtils.ts (consolidated utilities)
Extracted and consolidated:
- validateDocument() - document structure validation
- getCurrentGraphFromDocument() - extract current graph from timeline
- deserializeGraphState() - convert storage to runtime format
- serializeActors/Relations/Groups() - convert runtime to storage format
- createDocument() - create new document with initial timeline state
Updated imports:
- workspaceStore.ts: use documentUtils instead of loader/saver
- useActiveDocument.ts: use documentUtils.getCurrentGraphFromDocument
- fileIO.ts: use documentUtils for serialization/validation
- persistence.ts: use documentUtils.validateDocument
- graphStore.ts: remove legacy loadGraphState, start with empty state
Removed legacy storage keys:
- LEGACY_GRAPH_STATE from workspace/persistence.ts
- hasLegacyData() function (no longer needed)
- References to LEGACY_GRAPH_STATE in cleanupStorage.ts
Impact:
- No breaking changes for existing users (workspace format unchanged)
- Cleaner code organization (all document utils in one place)
- No migration support (old documents will not be loaded)
- Reduced technical debt (~350 lines removed)
Related: Phase 1 of STATE_MANAGEMENT_REFACTORING_PLAN.md
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixes incorrect undo behavior when creating groups with actors.
Previously, history was captured AFTER mutations, causing undo to restore
a state that included the group. This fix moves history capture to BEFORE
mutations, making it consistent with all other operations (addNode,
deleteNode, addEdge, etc.).
Changes:
- Move pushToHistory() call before mutations in createGroupWithActors
- Add detailed comment explaining the timing
- Update refactoring plan with implementation status
Impact:
- Undo now correctly removes groups and ungroups actors
- Behavior consistent with all other operations
- No breaking changes to existing functionality
Testing:
- TypeScript compilation verified (npx tsc --noEmit)
- Manual testing plan documented in PHASE_4_1_TEST_PLAN.md
- 6 test cases defined for comprehensive verification
Related: Phase 4.1 of STATE_MANAGEMENT_REFACTORING_PLAN.md
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements comprehensive group minimize/maximize functionality and migrates
to React Flow v12 (@xyflow/react) with improved edge routing.
## Group Minimize/Maximize Features:
- Minimized groups render as compact 220×80px solid rectangles
- Original dimensions preserved in metadata and restored on maximize
- Child actors hidden (not filtered) to prevent React Flow state issues
- Solid color backgrounds (transparency removed for minimized state)
- Internal edges filtered out when group is minimized
- Dimension sync before minimize ensures correct size on maximize
## Floating Edges:
- Dynamic edge routing for connections to/from minimized groups
- Edges connect to closest point on minimized group border
- Regular actors maintain fixed handle connections
- Smooth transitions when toggling group state
## React Flow v12 Migration:
- Updated package from 'reactflow' to '@xyflow/react'
- Changed imports to named imports (ReactFlow is now named)
- Updated CSS imports to '@xyflow/react/dist/style.css'
- Fixed NodeProps/EdgeProps to use full Node/Edge types
- Added Record<string, unknown> to data interfaces for v12 compatibility
- Replaced useStore(state => state.connectionNodeId) with useConnection()
- Updated nodeInternals to nodeLookup (renamed in v12)
- Fixed event handler types for v12 API changes
## Edge Label Improvements:
- Added explicit z-index (1000) to edge labels via EdgeLabelRenderer
- Labels now properly render above edge paths
## Type Safety & Code Quality:
- Removed all 'any' type assertions in useDocumentHistory
- Fixed missing React Hook dependencies
- Fixed unused variable warnings
- All ESLint checks passing (0 errors, 0 warnings)
- TypeScript compilation clean
## Bug Fixes:
- Group drag positions now properly persisted to store
- Minimized group styling (removed dotted border, padding)
- Node visibility using 'hidden' property instead of array filtering
- Dimension sync prevents actors from disappearing on maximize
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements visual grouping of actors with context menu operations,
resizable containers, and complete history tracking integration.
Features:
- Create groups from multiple selected actors via context menu
- Groups visualized as resizable containers with child nodes
- Ungroup actors (non-destructive) or delete group with actors
- Right-click context menu with group-specific operations
- Dedicated GroupEditorPanel for group properties
- Smart minimum size constraint based on child node positions
- Full undo/redo support for group operations and resizes
Technical Implementation:
- GroupNode component with React Flow NodeResizer integration
- Atomic createGroupWithActors operation for consistent history
- Parent-child relationship using React Flow v11 parentId pattern
- Groups stored separately from actors in graphStore
- Fixed history tracking to sync graphStore before snapshots
- Resize tracking to prevent state sync loops during interaction
- Dynamic minimum dimensions to keep children inside bounds
- Sanitization of orphaned parentId references on state load
History Fixes:
- pushToHistory now syncs timeline with graphStore before snapshot
- Prevents missing groups/nodes in history states
- Ensures undo/redo correctly restores all graph elements
- Atomic state updates to avoid React Flow processing stale state
Storage & Persistence:
- Groups saved in timeline states and document structure
- Safe JSON serialization to prevent prototype pollution
- Cleanup utilities for removing __proto__ from localStorage
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replaces Material-UI components in Timeline dialogs with custom Tailwind
CSS styling to match the application's standard dialog design.
Changes:
- RenameStateDialog: Replaced MUI Dialog, TextField, and Button components
with custom styled elements matching ConfirmDialog/InputDialog pattern
- CreateStateDialog: Converted all MUI form components (TextField, Checkbox,
Button) to native HTML elements with Tailwind styling
- Added consistent visual design with large icons, gray backgrounds, and
proper spacing
- Improved keyboard handling (Enter/Escape) with proper event listeners
- Enhanced focus management with auto-select on input fields
- Maintained all existing functionality while improving UI consistency
Both dialogs now feature:
- Icon-based visual hierarchy with 48px icons
- Consistent button styling (gray cancel, blue confirm)
- Proper disabled states and hover effects
- Gray-50 background on action button areas
- Backdrop click to close
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Extends bibliography smart import capabilities with additional citation.js plugins:
- @citation-js/plugin-pubmed: Support for PubMed IDs (PMID/PMCID)
- @citation-js/plugin-software-formats: Support for software citations (CFF, GitHub, npm, Zenodo)
Updates smart-parser.ts to recognize and validate Zenodo DOI format (10.5281/zenodo.xxxxx).
Improves input type detection for better user feedback.
Includes code formatting improvements to bibliographyStore.ts for consistency.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Adds detection and parsing support for more input formats that
citation.js can handle, making the smart import feature more powerful.
New supported formats:
- RIS format (common export from EndNote, RefWorks, Zotero)
- PubMed Central IDs (PMCID) in addition to existing PMID support
- Wikidata IDs (e.g., Q12345 or wikidata:Q12345)
- Zenodo records (URLs and IDs like zenodo.1234567)
- Citation File Format (CFF) for software citations
Benefits:
- Users can now paste RIS exports from reference managers directly
- Support for Wikidata citations enables citing entities/concepts
- Zenodo support facilitates citing datasets and research outputs
- CFF support enables proper software citation
- Enhanced format detection provides better user feedback
The smart parser now detects all these formats automatically and
displays the appropriate format hint to users. All formats are
processed through citation.js's robust parsing engine.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements complete bibliography management with citation assignment to
nodes and edges, following CSL-JSON standard.
Features:
- Bibliography store with Zustand and citation.js integration
- Smart import supporting DOI, BibTeX, PubMed ID, and URLs
- Manual entry and editing forms for references
- Citation selector with autocomplete text field interface
- History tracking for undo/redo support
- Workspace integration for import/export
- Support for multiple reference types including interview and other
- Description/notes field for additional reference information
Components:
- CitationSelector: autocomplete UI for selecting citations
- BibliographyConfigModal: main bibliography management interface
- QuickAddReferenceForm: smart import and manual entry
- EditReferenceInline: full reference editing form
- ReferenceManagementList: list view with citation counts
Integration:
- NodeEditorPanel: citation assignment to actors
- EdgeEditorPanel: citation assignment to relations
- MenuBar: bibliography menu item
- WorkspaceStore: bibliography persistence in workspace files
Technical details:
- CSL-JSON format for bibliographic data
- citation.js for parsing and formatting
- TypeScript with proper type definitions
- Debounced updates for performance
- Citation count tracking across graph elements
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Update generateRandomColor to return hex codes instead of HSL strings
to ensure proper color storage in database.
Changes:
- Add hslToHex conversion function
- Maintain same pastel color generation (random hue, 70% saturation, 65% lightness)
- Return hex format (#rrggbb) instead of HSL string
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add quick access edit button next to "Labels" field in both Node Editor
and Edge Editor panels, matching the existing pattern for Actor Type and
Relation Type edit buttons.
Changes:
- Add small edit icon button next to Labels field
- Opens LabelConfigModal for managing label definitions
- Consistent UX with existing type configuration buttons
- Available in both NodeEditorPanel and EdgeEditorPanel
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Improves code organization and maintainability by separating panel
implementations into focused, single-responsibility components.
Changes:
- Extract NodeEditorPanel for actor property editing
- Extract EdgeEditorPanel for relation property editing
- Extract GraphAnalysisPanel for graph metrics display
- Simplify RightPanel to act as routing/layout component (745→114 lines)
- Remove old unused Editor/NodePropertiesPanel.tsx
- Remove old unused Editor/EdgePropertiesPanel.tsx
All existing functionality preserved including live updates, debouncing,
modals, and connection displays. Each panel now self-contained with its
own state management and logic.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements a comprehensive label system and completely redesigns all
filtering (labels, actor types, relation types) to use intuitive positive
filtering where empty selection shows all items.
Label System Features:
- Create, edit, delete labels with names, colors, and scope (actors/relations/both)
- Inline editing with click-to-edit UI for quick modifications
- Quick-add label forms in config modals
- Autocomplete label selector with inline label creation
- Label badges rendered on nodes and edges (no overflow limits)
- Full undo/redo support for label operations
- Label validation and cleanup when labels are deleted
- Labels stored per-document in workspace system
Filter System Redesign:
- Changed from negative to positive filtering for all filter types
- Empty selection = show all items (intuitive default)
- Selected items = show only those items (positive filter)
- Consistent behavior across actor types, relation types, and labels
- Clear visual feedback with selection counts and helper text
- Auto-zoom viewport adjustment works for all filter types including labels
Label Cleanup & Validation:
- When label deleted, automatically removed from all nodes/edges across all timeline states
- Label references validated during node/edge updates
- Unknown label IDs filtered out to maintain data integrity
UI Improvements:
- All labels rendered without overflow limits (removed +N more indicators)
- Filter checkboxes start unchecked (select to filter, not hide)
- Helper text explains current filter state
- Selection counts displayed in filter section headers
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Adds a small edit icon button next to the "Relation Type" label in the
RightPanel Relation Properties section that opens the EdgeTypeConfigModal
directly in edit mode for the selected relation's type.
Changes:
- Added edit icon button aligned to the right of "Relation Type" label
- Opens existing EdgeTypeConfigModal in edit mode for current type
- Enhanced EdgeTypeConfigModal to support initialEditingTypeId prop
- Modal automatically enters edit mode when opened with a type ID
This mirrors the actor type edit button functionality and provides a
convenient shortcut for editing relation types without navigating to
the settings menu or left panel configuration.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Adds a small edit icon button next to the "Actor Type" label in the
RightPanel Actor Properties section that opens the NodeTypeConfigModal
directly in edit mode for the selected actor's type.
Changes:
- Added edit icon button aligned to the right of "Actor Type" label
- Opens existing NodeTypeConfigModal in edit mode for current type
- Enhanced NodeTypeConfigModal to support initialEditingTypeId prop
- Modal automatically enters edit mode when opened with a type ID
- Fixed TypeScript error with showAdvancedByDefault prop
This provides a convenient shortcut for editing actor types without
navigating to the settings menu or left panel configuration.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Updates the relation type configuration to match the new actor type UX
with a modern two-column layout and streamlined workflows.
Changes to relation type configuration:
- Two-column layout: quick add (left) + management list (right)
- Inline editing replaces the right column when editing
- Single-row layout for name, color, and line style fields
- Line style preview with visual feedback
- White background cards with click-to-edit interaction
- Always-visible duplicate and delete buttons
- Full-width edit mode for better focus
- Toast notifications for all actions
- Keyboard shortcuts (Cmd/Ctrl+Enter to add/save, Esc to cancel)
- Removed old EdgeTypeForm in favor of modular components
Changes to actor type configuration:
- Updated TypeManagementList to match EdgeTypeManagementList styling
- White background cards with click-to-edit
- Always-visible action buttons (no hover-to-reveal)
- Simplified implementation (removed complex menu states)
- Consistent appearance across both type configurations
New components:
- EdgeTypeFormFields: Reusable form with compact layout
- EditEdgeTypeInline: Inline editing component
- QuickAddEdgeTypeForm: Quick add interface
- EdgeTypeManagementList: Scrollable list with actions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Consolidates name, color, and icon fields into a single horizontal row
for more compact form layout. Removes progressive disclosure pattern to
show all fields at once.
Changes:
- Single-row layout for name, color, and icon fields with proper alignment
- Name field uses flex-1 with min-w-0 for proper text truncation
- Color picker fixed at h-8 to match input heights
- Icon popover uses fixed positioning (z-9999) to prevent clipping
- All form fields now always visible (removed collapsible advanced options)
- Removed edit panel header for cleaner UI
- Removed border above action buttons
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements configurable shape variants for actor nodes, allowing visual
differentiation of node types beyond just color.
Features:
- Five shape options: rectangle, circle, rounded rectangle, ellipse, pill
- All shapes use pure CSS (border-radius) for consistent behavior
- Auto-grow with content
- Perfect shadow and selection/highlight effects
- Proper React Flow handle alignment
- Shape selector UI with visual previews
- Migration logic for existing documents (defaults to rectangle)
Shape characteristics:
- Rectangle: Standard, general purpose
- Circle: Round, for people and concepts
- Rounded Rectangle: Soft edges, friendly appearance
- Ellipse: Oval/horizontal, for processes and stages
- Pill: Capsule, compact for tags and labels
Technical approach:
- Uses border-radius for all shapes (no clip-path)
- Ensures boxShadow follows shape contours properly
- Each shape component maintains consistent props interface
- NodeShapeRenderer routes to appropriate shape component
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Creates a new extendable settings store for application-wide preferences
that persist across browser sessions using Zustand's persist middleware.
Architecture:
- New settingsStore.ts using Zustand persist middleware
- Automatic localStorage synchronization
- Versioned schema (v1) for future migrations
- Clean, typed interface for easy extensibility
Changes:
- Created settingsStore for persistent global settings
- Migrated autoZoomEnabled from searchStore to settingsStore
- Updated GraphEditor to use settings store for auto-zoom
- Updated LeftPanel to use settings store for toggle control
- searchStore now focuses on ephemeral filter/search state
Settings Persistence:
- Storage key: 'constellation-settings'
- Automatically saves on any setting change
- Restores settings on page reload
- Same proven pattern as panelStore
Future Extensibility:
The settings store is designed to easily accommodate new settings:
- Theme preferences (light/dark mode)
- Default view options
- User interface preferences
- Any application-wide persistent settings
Benefits:
- User preferences persist across sessions
- Clean separation between ephemeral and persistent state
- Type-safe settings management
- Easy to extend for future features
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements automatic viewport adjustment to focus on filtered nodes when
search or filter criteria change, providing immediate visual feedback.
Features:
- Auto-zoom triggers when search text or type filters are applied
- 300ms debouncing prevents excessive zooming while typing
- Only zooms when some (but not all) nodes match filters
- Smooth 300ms animation with 20% padding and 2.5x max zoom
- Toggle control via compact icon button in search header
- Enabled by default, persists user preference in search store
UI Changes:
- Added CenterFocusStrong icon toggle in LeftPanel search header
- Icon is blue when enabled, gray when disabled
- Tooltip shows current state
- Positioned after "Reset filters" button
Implementation:
- Search store tracks autoZoomEnabled state
- GraphEditor monitors filter changes and calculates matching nodes
- Uses React Flow's fitView() with smart node filtering
- Skips zoom when disabled, no nodes, or no active filters
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Extends the search and filter system to include edge/relation searching
alongside the existing actor search functionality.
Changes:
- Search input now searches both actors AND relations
- Edges are filtered by custom label or relation type name
- Updated placeholder text to "Search actors and relations..."
- Results summary now shows separate counts for actors and relations
- Non-matching edges are dimmed to 20% opacity when filters are active
- Search logic applies consistently across CustomEdge and LeftPanel
The same search text field is used for both actors and relations,
providing a unified search experience across the entire graph.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removes the Ctrl+A keyboard shortcut and associated select-all functionality
that was not working properly.
Changes:
- Remove select-all shortcut definition from useGlobalShortcuts
- Remove "Select All" menu item from View menu
- Remove handleSelectAll stub function from App.tsx
- Clean up onSelectAll prop from MenuBar component
The select-all feature was dysfunctional (only logging to console) and
not properly implemented, so it has been removed entirely.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Refactors the type management system to properly follow the
Workspace→Document→Timeline→Graph hierarchy, where nodeTypes and
edgeTypes are owned by the document rather than being independent
state in graphStore.
Changes:
- Add type management actions to workspaceStore (document-level)
- Update workspaceStore.saveDocument to stop copying types from graphStore
- Modify useActiveDocument to only track node/edge changes for dirty state
- Update useGraphWithHistory to route type operations through workspaceStore
- Update useDocumentHistory to read/restore types from document
Architecture:
- Document: Source of truth for types (persistent storage)
- graphStore: Synchronized working memory (optimized for React Flow)
- useActiveDocument: Bridge that syncs document → graphStore
- Type mutations: Always go through workspaceStore, then sync to graphStore
This ensures proper data ownership while maintaining graphStore as a
performance optimization layer for the UI.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removes the upper toolbar and consolidates undo/redo controls into the
Edit menu for a cleaner interface with more screen space.
Changes:
- Move undo/redo buttons from Toolbar to Edit menu with descriptions
- Remove Toolbar component from App layout
- Implement closeAllMenus event system for coordinated menu management
- Add event listeners to close menus when clicking on graph/timeline canvas
- Add cross-menu closing: context menus close menu bar and vice versa
- Fix React warning by deferring event dispatch with setTimeout
Benefits:
- Cleaner UI with more vertical space for graph editor
- Unified menu system prevents multiple menus open simultaneously
- Context menus and menu bar dropdowns coordinate properly
- Consistent UX: clicking anywhere closes open menus
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
