Quick Start Graph Creation and UI Synchronization Fixes #32
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit implements automatic Welcome graph creation for new users and standardizes UI terminology from "Node" to "Work Item" across all user-facing components. Key Features: - Automatic Welcome graph creation when user has no graphs - Creates 4 tutorial work items with dependency connections - Graph name: "Welcome" (simplified from "Welcome to GraphDone") - Tutorial covers: introduction, creating items, connections, views Terminology Standardization: - Updated all modals to use "Work Item" instead of "Node" - Components updated: - DeleteNodeModal: "Delete Work Item" - EditNodeModal: "Edit Work Item" - CreateNodeModal: "Create Work Item" - DeleteGraphModal: "Work Item Deleted Successfully" - InteractiveGraphVisualization: Context menu items Technical Implementation: - Added useRef hook to prevent infinite loops - Integrated with GraphQL mutations for graph/work item creation - Added comprehensive debug logging for troubleshooting - Uses GET_GRAPHS_BY_USER query for proper user isolation - Graph protection resolver to prevent Welcome graph deletion Files Modified: - packages/web/src/contexts/GraphContext.tsx - packages/web/src/components/DeleteNodeModal.tsx - packages/web/src/components/EditNodeModal.tsx - packages/web/src/components/CreateNodeModal.tsx - packages/web/src/components/DeleteGraphModal.tsx - packages/web/src/components/InteractiveGraphVisualization.tsx - packages/web/src/graphql/graph.ts - packages/server/src/resolvers/graph-protection.ts (new)
Replace useRef flag with state-based flag to prevent duplicate Welcome graph creation across logout/login cycles. The useRef flag was being reset when the component unmounted during logout, causing duplicate graphs to be created on each login. Changes: - Remove useRef(welcomeGraphCreated) dependency - Add isCreatingWelcomeGraph state flag - Flag persists during session to prevent duplicate creation - Resets on error to allow retry - Works consistently across logout/login cycles
Complete UI terminology standardization to align with WorkItem backend model. All user-visible references to "Node" have been replaced with "Work Item" throughout the application for consistency and clarity. Changes: - Landing page: "Create your first work item" messaging - All modals: Create, Edit, Delete, Connect, Disconnect - Form labels: "Work Item Type" instead of "Node Type" - Success/error notifications - Context menu tooltips - Empty states and placeholders - ID labels: "Work Item ID" instead of "Node ID" - Graph selector: "Total: X Graphs" format - Welcome graph: Removed emoji, updated statuses Technical notes: - Backend model already uses WorkItem - Internal code comments and utilities still use "node" (developer-facing) - No breaking changes to API or data model
Added internal state tracking to properly detect changes after save: - Added savedNode state to track baseline independently of parent prop - Update both editedNode and savedNode after successful mutation - Compare editedNode with savedNode instead of stale node prop - Added awaitRefetchQueries to ensure mutation completes before state update - Added keyboard shortcuts (ESC to close, Ctrl+S to save) - Integrated with dialog manager for proper cleanup This fixes the issue where the Save button remained enabled after pressing Ctrl+S because the parent component's node prop wasn't updating after the GraphQL refetch.
- Fixed stale closure in handleSave using useCallback with proper dependencies - Added dual protection (isSaving state + isSavingRef) to prevent multiple saves - Enhanced updateVisualizationData to update DOM elements (titles, types, descriptions) - Extracted getNodeDimensions as shared useCallback function for proper scoping - Added fresh node lookup by ID before passing to modal (synced with Apollo cache) - Track node property changes in useEffect dependencies for immediate updates - Resolves issues with graph not updating after modal saves Co-Authored-By: Claude <[email protected]>
Server changes: - Add onboarding service for automatic Welcome graph creation - Create Welcome graphs on user signup with sample work items - Fix duplicate Welcome graph creation on logout/login - Improve seed script with better data structure Web changes: - Streamline CreateGraphModal with improved UX - Enhance UpdateGraphModal with better form layout - Update CodeCaptcha component styling - Standardize terminology from 'Node' to 'Work Item'
🧪 Test ResultsSummary
Test Suites
Installation Script Validation
|
1 similar comment
🧪 Test ResultsSummary
Test Suites
Installation Script Validation
|
- Add check for existing shared/system Welcome graph before creating new one - Frontend now detects server-created shared Welcome graph - Prevents duplicate Welcome graphs when user logs in - Maintains fallback creation if no Welcome graph exists at all
🧪 Test ResultsSummary
Test Suites
Installation Script Validation
|
1 similar comment
🧪 Test ResultsSummary
Test Suites
Installation Script Validation
|
- Update NodeDetailsModal Eye icon with teal-magenta gradient - Add blue focus ring to CreateNodeModal when inputs are focused - Add onSubmit prop to CreateNodeModal interface for extensibility - Fix TypeScript errors in InteractiveGraphVisualization
- Move Welcome graph creation from server to frontend (per-user instead of shared) - Add comprehensive guards to prevent duplicate Welcome graph creation - Use ref instead of state to prevent race conditions during graph creation - Enhance NodeTypeSelector with emerald/green theme and better visual feedback - Update TagInput with improved focus indicators and consistent border styling - Add detailed logging for debugging graph loading and creation flow
🧪 Test ResultsSummary
Test Suites
Installation Script Validation
|
1 similar comment
🧪 Test ResultsSummary
Test Suites
Installation Script Validation
|
…base
Comprehensive rename to align with domain language and improve clarity:
Component Files Renamed:
- CreateNodeModal → CreateWorkItemModal
- EditNodeModal → EditWorkItemModal
- DeleteNodeModal → DeleteWorkItemModal
- ConnectNodeModal → ConnectWorkItemModal
- DisconnectNodeModal → DisconnectWorkItemModal
- NodeDetailsModal → WorkItemDetailsModal
- NodeCategorySelector → WorkItemTypeSelector
Code Updates:
- All interfaces renamed (e.g., CreateNodeModalProps → CreateWorkItemModalProps)
- All function exports updated
- All import statements updated
- All JSX component usage updated
- Variable names updated (parentNodeId → parentWorkItemId, etc.)
User-Facing Text Updates:
- "Create a standalone node" → "Create a standalone work item"
- "Connect to Existing Nodes" → "Connect to Existing Work Items"
- "Search node types" → "Search work item types"
- "Node Templates" → "Work Item Templates"
- "node priorities" → "work item priorities"
- "node dependencies" → "work item dependencies"
Documentation & Tests:
- Updated all test files with new terminology
- Updated documentation files (graph-creation.md, agent-planning-scenarios.md)
Technical Terms Preserved:
- GraphQL syntax (where: { node: { id } }) - Neo4j convention
- D3.js simulation nodes - JavaScript library convention
- DOM nodes - Web API convention
All changes validated:
✅ TypeScript compilation passing
✅ ESLint checks passing
✅ 40 files modified, 7 files renamed
🧪 Test ResultsSummary
Test Suites
Installation Script Validation
|
1 similar comment
🧪 Test ResultsSummary
Test Suites
Installation Script Validation
|
Member
Author
Yes, thank you so much! |
mvalancy
added a commit
that referenced
this pull request
Nov 17, 2025
Quick Start Graph Creation and UI Synchronization Fixes
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds automatic Welcome graph creation for new users and fixes critical synchronization issues between the NodeDetailsModal and graph visualization.
Key Features
🎉 Welcome Graph Creation
🔄 Graph Visualization Synchronization
handleSaveusinguseCallbackwith proper dependenciesisSavingstate +isSavingRef) to prevent multiple savesupdateVisualizationDatato update both simulation physics AND DOM elementsgetNodeDimensionsas shareduseCallbackfunction for proper scoping🎨 UI Improvements
🔧 Comprehensive Node → Work Item Terminology Refactoring
Component Files Renamed (7 files):
CreateNodeModal→CreateWorkItemModalEditNodeModal→EditWorkItemModalDeleteNodeModal→DeleteWorkItemModalConnectNodeModal→ConnectWorkItemModalDisconnectNodeModal→DisconnectWorkItemModalNodeDetailsModal→WorkItemDetailsModalNodeCategorySelector→WorkItemTypeSelectorCode Updates:
CreateNodeModalProps→CreateWorkItemModalProps)parentNodeId→parentWorkItemId, etc.)User-Facing Text Updates:
Files Modified: 39 files changed with 481 insertions(+), 296 deletions(-)
🖱️ Mouse Right Click Context Menu
Changes
Test Plan
Related Issues
Addresses #27 - No node shown when doing first time graph setup
Addresses #28 - Default node edit dialog is too large on standard laptop
Resolves #31 - Node → Work Item terminology standardization (mouse right click on node is done)
Fixes graph visualization not updating after NodeDetailsModal saves
Fixes duplicate Welcome graph creation