Removes the 500ms debounce delay when changing edge directionality
in the right panel. Directionality toggle buttons now apply changes
immediately, providing instant visual feedback.
Text fields (relation type and custom label) still use debounced
saves to avoid excessive updates while typing.
Improves UX by making toggle interactions feel more responsive.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Adds quick access to configuration modals from the left panel:
- Settings icon (⚙️) next to "Add Actors" section opens Actor Type config
- Settings icon next to "Relations" section opens Relation Type config
- Icons positioned between section title and expand/collapse chevron
- Tooltips provide clear indication of functionality
This provides convenient access to type configuration without needing
to navigate through the menu bar, improving workflow efficiency.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements a user-friendly dialog that prompts for document names before
creating new documents, replacing the default "Untitled Analysis" behavior.
Features:
- InputDialog component for text input with validation
- useCreateDocument hook to centralize naming logic
- Pre-filled default value "Untitled Analysis"
- Validation to prevent empty document names
- Helpful placeholder text with examples
- Keyboard shortcuts (Enter/Escape)
- Auto-focus and select input field
Updated all document creation entry points:
- Menu Bar: "New Document" and "New from Template"
- Document Tabs: "+" button
- Document Manager: "New Document" button
- Empty State: "New Document" button
- Keyboard shortcut: Ctrl+N
This provides a consistent UX across the application and reduces code
duplication by using a single reusable hook.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Adds full support for directed, bidirectional, and undirected relationships
between actors with visual arrow markers and intuitive controls.
**Type System:**
- Add EdgeDirectionality type (directed | bidirectional | undirected)
- Add directionality field to RelationData
- Add defaultDirectionality field to EdgeTypeConfig
**Visual Representation:**
- Directed edges: single arrow marker at target (→)
- Bidirectional edges: arrow markers at both ends (↔)
- Undirected edges: no arrow markers (—)
- Separate marker definitions for start/end to ensure correct orientation
**Property Panel Controls:**
- MUI ToggleButtonGroup for selecting directionality
- Visual connection indicator with directional symbols
- Reverse direction button (swaps source/target, only for directed edges)
- Live updates with 500ms debounce
**Edge Type Configuration:**
- Default directionality selector in edge type form
- Dropdown with helpful descriptions (→, ↔, —)
- Applied to both create and edit workflows
**Edge Creation:**
- New edges inherit defaultDirectionality from edge type config
- Falls back to 'directed' for backwards compatibility
**Reverse Direction:**
- Swaps source/target and sourceHandle/targetHandle
- Maintains edge ID and selection state
- Tracked in undo/redo history
Includes comprehensive UX specification document with wireframes,
interaction patterns, accessibility guidelines, and implementation phases.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Adds overflow-hidden to GraphMetrics outer container to establish proper
scrolling context. Without it, the flex container doesn't constrain child
height, preventing scrollbar from appearing when metrics content exceeds
available space.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removes Ctrl+B and Ctrl+I keyboard shortcuts that were causing panels
to disappear completely instead of collapsing properly. Also updates
all panel tooltips to no longer reference the removed shortcuts.
Changes:
- Removed Ctrl+B (left panel) and Ctrl+I (right panel) shortcut handlers
- Updated left panel tooltips: removed "(Ctrl+B)" references
- Updated right panel tooltips: removed "(Ctrl+I)" references
- Tooltips now simply show "Collapse Panel" / "Expand Panel"
- Escape key handler preserved for closing property panels
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Consolidates three duplicate header implementations in RightPanel into a
single reusable PanelHeader component, following DRY principles.
Changes:
- Created PanelHeader component in RightPanel.tsx with consistent props
- Refactored Actor Properties to use PanelHeader
- Refactored Relation Properties to use PanelHeader
- Refactored Graph Analysis to use PanelHeader (removed internal header)
- All panel headers now have consistent appearance and behavior
- Supports optional close button and required collapse functionality
Benefits:
- Eliminates code duplication across panel views
- Ensures consistent UX across all panel states
- Easier to maintain and update header behavior in one place
- Reduces bundle size by removing redundant JSX
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements section 6.1 from UX_ANALYSIS.md - Graph Metrics and Analysis.
Transforms the empty "No Selection" state in the right panel into a
valuable analysis dashboard.
Features:
- Graph analysis utility with metric calculations:
- Actor/relation counts
- Graph density (connectivity ratio)
- Average connections per actor
- Most connected actors (top 5)
- Isolated actors count
- Connected components detection
- Breakdown by actor/relation type
- GraphMetrics component with sections:
- Overview: basic stats and density
- Most Connected Actors: ranked list
- Graph Structure: isolated nodes, components
- Type breakdowns: actors and relations by type
- Visual polish: icons, tooltips, hover states
- Warning highlights for isolated actors
- Info highlights for multiple components
- Integration:
- Replaces empty state in RightPanel
- Automatically updates when graph changes
- Memoized calculations for performance
- Consistent styling with existing panels
Now provides immediate analytical value when opening a document,
making the application live up to its "Analyzer" name.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements toast notifications from UX_ANALYSIS.md to provide clear,
non-intrusive feedback for user actions.
Features:
- Toast store with Zustand for global state management
- Four toast variants: success, error, info, warning
- Auto-dismiss after configurable duration (default 4s)
- Max 3 visible toasts with FIFO queue
- Smart positioning that avoids right panel overlap
- Smooth slide-in/fade-out animations
Notifications added for:
- File operations (import/export success/errors)
- Document operations (create/delete/rename/duplicate)
- Workspace operations (import/export)
Toast container dynamically repositions based on right panel state
to ensure toasts never overlap with critical UI elements.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented image export functionality using html-to-image that actually
slaps. No more bloated screenshots with miles of blank space - this baby
wraps your graph tighter than shrink wrap on a fresh deck.
Features:
- PNG export with proper 300 DPI quality (4x pixelRatio)
- SVG vector export for infinite scaling
- Smart bounds calculation that hugs your nodes
- Configurable padding (default: 10px of breathing room)
- Accessible via File menu
Technical highlights:
- Direct transform calculation instead of getViewportForBounds bloat
- Proper pixelRatio handling (not that 16x scaling nonsense)
- Based on React Flow's official pattern but actually optimized
- Uses html-to-image@1.11.11 (newer versions are broken)
Export quality goes hard. Print-ready PNGs. Crisp. Clean. Chef's kiss.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
All keyboard shortcut labels in the MenuBar now come from the
centralized keyboard shortcut manager via the new useShortcutLabels
hook, eliminating hardcoded duplicates.
Changes:
- Add useShortcutLabels hook for retrieving formatted shortcut labels
- Update MenuBar to use dynamic shortcut labels from manager
- Platform-aware display (Cmd on Mac, Ctrl elsewhere)
- Shortcuts automatically update if changed in manager
- Fix MUI icon fontSize prop issue in LeftPanel
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace generic circle icons with the actual node type icons in the
left panel's "Add Actors" section. Icons now match the visual
representation of actors in the graph, making it more intuitive to
identify actor types. Falls back to circle if no icon is defined.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed TypeScript error where onAddNodeRequest callback parameter type
was incorrectly defined. The prop expects a function that receives a
callback, not the node type ID directly.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace TypeScript 'any' types with explicit function signatures to fix ESLint errors. This improves type safety for the onAddNodeRequest callback.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removed the "Edit Properties" option from both node and edge context menus,
leaving only the "Delete" option. Users can simply click on nodes/edges to
select them and edit properties in the right panel, making the context menu
option redundant.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Reorganized the UI to improve clarity and reduce duplication:
- Reintroduced Toolbar component below document tabs
- Moved undo/redo controls from left panel to toolbar
- Simplified toolbar to show only undo/redo (removed actor/relation controls)
- Removed History section from left panel
- Left panel now focuses on content management (actors, relations, etc.)
The toolbar now provides a consistent, always-visible location for history
controls across the top of the editor, while the left panel is dedicated to
adding and managing graph content.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed selection state inconsistency when adding nodes or edges. Previously,
both the new item and previously selected items would remain selected due to
a race condition between Zustand store updates and ReactFlow state syncing.
Changes:
- Added pendingSelectionRef to track items that should be selected after
Zustand sync completes
- Modified useEffect sync logic to preserve selection state normally, but
apply pending selection when new items are added
- Unified node creation logic between context menu and left panel to ensure
consistent behavior
- When adding nodes/edges, all other items are now properly deselected
The fix ensures selection state lives only in ReactFlow (not Zustand) and
is properly coordinated during store updates.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixes an issue where nodes from a previous document would persist when
creating a new document after closing all documents.
The problem occurred because:
1. When all documents were closed (activeDocumentId becomes null), the
graph store wasn't being cleared
2. When a new document was created, stale data from the old document
could contaminate the new document through race conditions
Changes:
- Clear nodes and edges from graph store when activeDocumentId is null
- Add safeguard to prevent saving stale graph data to newly created
documents before they've been fully loaded
- Maintain proper state tracking to prevent cross-document contamination
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added lastSyncedStateRef to track the graph state that was last loaded/synced
for each document. This prevents stale comparisons when switching between
documents by ensuring dirty checks only run against the correct document's
state.
Changes:
- Track last synced state (nodes, edges, nodeTypes, edgeTypes) per document
- Skip dirty check if graph state belongs to a different document
- Compare current graph state against last synced state instead of active document
- Update last synced state reference when loading or saving changes
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
