Enhance NodeDetailsModal and implement comprehensive UI improvements#12
Merged
mvalancy merged 31 commits intodevelopmentfrom Aug 31, 2025
Merged
Enhance NodeDetailsModal and implement comprehensive UI improvements#12mvalancy merged 31 commits intodevelopmentfrom
mvalancy merged 31 commits intodevelopmentfrom
Conversation
…de spacing, and priority colors ## Key Improvements ### Text Wrapping & Node Sizing - Expand text wrapping from 2 to 3 lines maximum for better title display - Increase base node dimensions by 15-20px per type to accommodate longer titles - Implement dynamic height calculation based on actual text wrapping needs - Add proper word-boundary wrapping with ellipsis truncation for overflow ### Node Spacing & Edge Visibility - Increase edge distances from 180px to 300px for better visual separation - Enhance collision detection with 130px radius and stronger force iterations - Boost node repulsion forces (EPIC: -300, FEATURE: -180, TASK: -150, etc.) - Optimize hierarchical link distances (EPIC→MILESTONE: 250px, FEATURE→TASK: 200px) ### Priority Color System Consistency - Fix "Minimal" priority color from green to gray across all components - Update AnimatedPriority to use discrete color levels instead of interpolation - Ensure consistent priority colors: Critical(red), High(orange), Medium(yellow), Low(blue), Minimal(gray) - Apply color fixes to CreateNodeModal, EditNodeModal, and other priority components ### User Experience Enhancements - Add empty graph state with helpful call-to-action for first node creation - Improve notification system integration for graph/node CRUD operations - Clean up debug console logs and unused imports for production readiness - Simplify drag interactions while maintaining smooth collision resolution ### Technical Improvements - Optimize force simulation parameters for better performance and stability - Remove redundant code and improve TypeScript compliance - Enhanced error handling and user feedback throughout the application - Better responsive design with dynamic node sizing based on content
## Box Expansion Fix - Replace dynamic width calculation with stable fixed widths in DisconnectNodeModal - Use CSS maxWidth properties instead of dynamic JavaScript calculations - Remove ResizeObserver that was causing re-calculations during selection state changes - Apply conservative fixed widths: source/target nodes (140px), relationship (100px) - Prevent dramatic size changes during connection box selection ## TypeScript Error Fixes - Add explicit return types (Promise<void>) to async functions in ConnectNodeModal and DisconnectNodeModal - Fix missing return statements in map functions that could return undefined - Add null coalescing operators for validation.reason and validation.suggestion properties - Fix property access issues with d.source.id using type assertions - Resolve boolean | null assignment issues with disabled button properties ## Code Quality Improvements - Clean up unused variables and imports - Maintain consistent error handling patterns - Ensure stable layout during user interactions - Preserve existing functionality while fixing expansion bugs ## Components Updated - DisconnectNodeModal: Fixed box expansion and width calculation stability - ConnectNodeModal: Resolved TypeScript errors and improved type safety - InteractiveGraphVisualization: Fixed source node property access - connectionUtils: Maintained existing utility functions
## Issue - Node deletion was failing with 'Database schema issue detected' error - WorkItem edges relationships had type mismatch with Edge entity relationships - WorkItem defined: sourceEdges @relationship(type: "EDGE", direction: OUT) - Edge defined: source @relationship(type: "EDGE_SOURCE", direction: OUT) ## Fix - Corrected WorkItem relationship types to match Edge definitions: - sourceEdges: @relationship(type: "EDGE_SOURCE", direction: IN) - targetEdges: @relationship(type: "EDGE_TARGET", direction: IN) - This ensures proper cascade deletion when removing nodes with connections - Maintains referential integrity in Neo4j database ## Components Affected - packages/server/src/schema/neo4j-schema.ts: Fixed relationship type consistency ## Result - Node deletion should now work properly even when nodes have connected edges - Cascade deletion will remove both the node and its relationships - Database constraints properly enforced
…d UX - Replace early return pattern with overlay approach for consistent D3 canvas - Add professional empty state with gradient title and enhanced messaging - Implement eye-catching "Create Your First Node" button with hover effects - Fix conditional hooks issues by removing skip parameters from useQuery - Add separate CreateNodeModal rendering for empty state (no selectedNode) - Update CreateNodeModal subtitle to "Add your first node to begin the journey" - Improve instruction text readability with better opacity (85%) - Create initializeEmptyVisualization for proper empty canvas setup - Ensure consistent graph visualization behavior across all states
- Remove conditional useQuery hooks that violated Rules of Hooks - Replace skip parameters with conditional variables and fetchPolicy approach - Ensure consistent hook calling order across all render cycles - Maintain proper GraphQL query behavior without hook violations
- Add Node Actions panel with Add/Update/Delete functionality - Implement node selection with visual highlighting - Remove clutter icons from GraphSelector sidebar - Improve node spacing with enhanced force simulation - Add proper color consistency across node types and icons - Enhance UI layout with better positioning and spacing - Add right-slide animation for NodeDetailsModal
- Remove Node Actions panel from graph visualization - Reposition Node Type legend box for better layout - Add comprehensive search and filter dropdowns to Table/Card/Kanban views - Replace simple selects with styled ListView-pattern dropdowns with icons - Fix Dashboard pie chart legends to use icons instead of circles - Standardize RightSidebar width across all views (320px) - Remove radar chart internal titles to prevent duplication - Clean up unused imports and code - Remove unused ListView.tsx and TimelineView.tsx files - Ensure consistent UI patterns and improved user experience
- Fix NodeDetailsModal to open as centered modal instead of right sidebar - Add comprehensive icons throughout NodeDetailsModal for better UX - Fix EditNodeModal click propagation issues preventing form input - Standardize icon and badge colors across all components - Ensure perfect color consistency between NodeDetailsModal and EditNodeModal - Update status colors to match EditNodeModal exactly - Fix type and priority icon colors to match their badge colors - Improve visual consistency and user experience across modal interfaces
- Reverted Type, Status, and Priority badge text back to left alignment - Reverted all section headers back to original left alignment - Removed justify-center and min-width constraints from badges - Maintained icon and color consistency improvements
- Add unified color system utility (nodeColorSystem.ts) for Status, Type, and Priority - Implement consistent Lucide icons across ConnectNodeModal and CreateNodeModal - Match icons exactly with CreateNodeModal: * Status: ClipboardList, Calendar, Clock, CheckCircle, AlertCircle * Type: Layers, Trophy, Target, Sparkles, ListTodo, AlertTriangle, Lightbulb, Microscope * Priority: Flame, Zap, Triangle, Circle, ArrowDown - Format status/type labels as title case (e.g., 'Planned' instead of 'PLANNED') - Add priority progress bar with color-coded visualization - Fix disconnect modal relationship display to show full names - Remove Smart Suggestions section per user request - Improve overall visual consistency and user experience
- Add minimize/show toggle for Node Types legend with meaningful "Node Types" label when collapsed - Implement beautiful pink gradient color scheme (pink to orange with rose hover effect) - Fix disconnect modal text truncation by adding whitespace-nowrap and flex controls - Add Minus icon import for minimize button - Include enhanced visual feedback with scale transform and shadow effects
- Add minimize/show toggle for Graph Control Panel with Gemini gradient colors - Implement intelligent positioning system to prevent panel overlap in all scenarios - Add green status indicators to both expanded and minimized states - Fix dynamic spacing based on panel states (295px height, 27px/32px spacing) - Handle all edge cases: both expanded, both minimized, mixed states - Enhance visual feedback with pulsing green circles and hover effects
- Add Create Node button with green gradient styling positioned after Graph Panel - Ensure consistent sizing (w-40 h-12) for all minimized panel buttons - Remove blinking circle from minimized Node Types legend - Fix BLOCKED status percentage logic (50% vs 70% for IN_PROGRESS)
- Update EdgeType enum to include all 12 relationship types: DEPENDS_ON, BLOCKS, ENABLES, RELATES_TO, IS_PART_OF, FOLLOWS, PARALLEL_WITH, DUPLICATES, CONFLICTS_WITH, VALIDATES, REFERENCES, CONTAINS - Remove deprecated DEPENDENCY type and convert all references to DEPENDS_ON - Add comprehensive connections display to NodeDetailsModal with icons and colors - Ensure consistent relationship colors and icons between Connect Node modal and Node Details modal - Update database schema to remove legacy relationship types - Fix validation logic that was incorrectly converting new types to old types - Add empty state for nodes with no connections - Update all mock data and type definitions to use consistent relationship types
- Add one relationship per node pair restriction to prevent duplicate connections - Replace basic select dropdowns with custom styled dropdowns matching table view - Implement proper relationship validation using hasAnyRelationship function - Update UI to show "Has relationship" status for connected nodes - Fix Type/Status/Priority filter ordering and labels - Standardize PART_OF to IS_PART_OF across all relationship types - Add priority filtering with proper range-based logic - Remove placeholder ellipsis from search input - Enhance connection preview counts to reflect actual available nodes
…DEPENDS_ON The test was using the incorrect enum value EdgeType.DEPENDENCY which doesn't exist. Updated to use the correct EdgeType.DEPENDS_ON enum value that matches the actual implementation.
…improvements - Create centralized workItemConstants.tsx with unified type/status/priority definitions - Consolidate 15+ components to use centralized icons and colors consistently - Add helper functions (getTypeIconElement, getStatusIconElement, getPriorityIconElement) with automatic color application - Fix icon conflicts: Bug (AlertTriangle/red) vs Cancelled (XCircle/slate) now use distinct icons and colors - Update Node Types legend to use centralized helper functions for consistent styling - Implement dynamic "Create New Node" messaging based on existing nodes count - Export all work item icons from central file for consistent importing patterns - Maintain Type → Status → Priority ordering across all components - Enhanced color schemes: Bug uses red-500, Cancelled uses unique slate-400 - All major view components (TableView, Dashboard, CardView, KanbanView, etc.) now centralized
- Add missing REFERENCES and CONTAINS relationship types to graph.ts - Update ConnectNodeModal, CreateNodeModal, DisconnectNodeModal to use centralized relationship types - Replace all getRelationshipIcon calls with centralized getRelationshipIconElement function - Update NodeDetailsModal to use centralized relationship configuration - Fix InteractiveGraphVisualization relationship icon references - Ensure consistent relationship type definitions across entire codebase
- Replace hardcoded node types with WORK_ITEM_TYPES constants - Replace hardcoded icons with getTypeIconElement() function - Replace hardcoded colors with centralized color schemes - Add complete Relationships section using RELATIONSHIP_TYPES - Add relationship search and detail modal functionality - Remove placeholder ellipsis from search inputs - All icons, colors, and data now sourced from central constants file
- Replace all hardcoded switch statements with centralized functions - Update all view components to use workItemConstants.tsx - Fix GraphQL schema CANCELLED vs ARCHIVED status mismatch - Add colorful status boxes in KanbanView matching status colors - Maintain consistent styling across all UI components Components updated: - CardView, KanbanView, TableView, NodeDetailsModal - GanttChart, CalendarView, NodeDistributionRadar, TaskDistributionRadar - InteractiveGraphVisualization
…ting - Add simple priority progress bar in NodeDetailsModal matching node visualization style - Fix status display to show "IN PROGRESS" instead of "IN_PROGRESS" with proper formatting - Use color-coded progress bar based on priority level (red for critical, orange for high, etc.) - Clean up unused imports and improve component consistency
…stent UX - Transform Gantt Chart with professional timeline visualization, zoom controls, and dependency arrows - Enhance Calendar View with interactive date selection and priority indicators - Modernize Activity Feed with real-time updates, advanced filtering, and expandable details - Integrate centralized constants (STATUS_OPTIONS, PRIORITY_OPTIONS, TYPE_OPTIONS) across all views - Implement consistent colored dropdown filters with icons across all components - Add unified search functionality with "Search tasks by type, status, priority" placeholder - Add duplicate name validation to prevent nodes with identical titles - Organize Gantt Chart controls into two-row layout for better UX - Fix TypeScript errors and ensure clean compilation - Standardize dropdown order: Type → Status → Priority across all views
…nagement - Fix schema mismatch: change PART_OF to IS_PART_OF in seed script - Update admin credentials to admin/graphdone for consistency - Implement comprehensive Delete Graph modal with node connection management - Add centralized type styling using WORK_ITEM_TYPES from workItemConstants - Enable bulk disconnect functionality with Disconnect First action - Improve UX with proper type icons and labels in delete workflow
- Update Ontology page to show exact fields from CreateNodeModal in same order - Set both graph panel and legend panel collapsed by default for cleaner startup - Hide Create Node panel when graph is empty to focus on Transform Your Vision message - Add dynamic panel positioning that adjusts when Create Node panel is hidden
Remove redundant createEdge call that was creating duplicate connections when using "Create & Connect Node" feature. Connection is already established through the dependencies field in workItemInput.
- Hide select graph button when no graphs are available - Check both currentGraph and graphHierarchy.length to prevent UI inconsistency - Ensures "No graphs available" message shows instead of misleading selector
- Hide select graph button in GraphSelector component when graphHierarchy is empty - Update Workspace page to conditionally show select graph button based on availableGraphs - Change messaging from 'No Graph Selected' to 'No Graphs Available' when appropriate - Ensure TypeScript type safety for currentGraph null checks Resolves issue where users saw misleading 'Select Graph' options with no graphs present.
- Make all view labels single-word (Graph, Dashboard, Table, Card, Kanban, Gantt, Calendar, Activity) - Increase icon sizes with responsive scaling (h-6 to h-10 based on screen size) - Add thinner stroke width (1.5) to icons for cleaner appearance when zoomed - Implement responsive spacing and layout (gap-1 to gap-4, min-w-0 for overflow handling) - Change 'Select a Graph' to 'Create a Graph' when no graphs are available - Maintain horizontal scroll prevention with proper overflow handling Resolves UI space waste and improves visual hierarchy in the view selection area.
- Disable template graph type with gray styling and coming soon tooltip - Gray out all template selection buttons with disabled state - Fix creation flow: change 'Create Graph' to 'Continue' in type step - Ensure users reach details step to enter required graph name - Preserve template UI structure for future implementation
- Remove templateId and copyFromGraphId from GraphQL mutation input - Prevents 'templateId is not defined by type GraphCreateInput' error - Allows graph creation to work with current Neo4j schema
- Remove second verification step requiring text input - Keep first step with two checkboxes for risk acknowledgment - Delete button now works directly after checking both boxes - Eliminate 'Final Verification Required' step completely - Maintain connection blocking and warning UI - Clean up unused state variables and step navigation
Member
|
This merged PR is looking really good and the application is starting to come to life! 🚀 The improvements we've made really enhance the user experience: ✅ Graph Creation Flow - Fixed so users can actually enter graph names properly The application now feels much more polished and intuitive to use. Users can create graphs smoothly, manage nodes efficiently, and the whole experience feels like a real, working application rather than a prototype. Great progress on making GraphDone something users will genuinely enjoy working with! The foundation is solid and it's really starting to feel alive. 🎉 |
Member
Author
Thank you so much @mvalancy-mt for your detailed review of the PR. |
Patel230
pushed a commit
that referenced
this pull request
Oct 27, 2025
This PR is looking really good and the application is starting to come to life! 🚀 The improvements include: - Fixed graph creation flow so users can properly enter graph names - Simplified node deletion to single-step verification (removed the cumbersome text input requirement) - Disabled template functionality with proper 'Coming Soon' messaging - Enhanced UI responsiveness and icon sizing throughout - Resolved GraphQL mutation errors for unsupported fields The user experience is becoming much more polished and intuitive. Great progress on making GraphDone feel like a real, working application that users will enjoy using!
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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
Key Features
Test Plan