Conversation
- Update pull_request branches to include develop instead of development - Update build job condition to trigger on develop branch - Ensures CI works properly with renamed development branch
…tion - Implement rounded corner edge labels with proper text fitting - Use centralized relationship icons, colors, and configurations - Add edge labels that follow edge angles and rotate for readability - Enhance relationship display with adaptive arrows and descriptions - Fix relationship visualization across all modal components
Previously, CreateNodeModal always created DEPENDS_ON relationships regardless of user selection. Now properly creates edges with the user-selected relationship type (BLOCKS, ENABLES, etc.). - Remove hardcoded dependencies field from node creation - Add separate CREATE_EDGE mutation after node creation - Use selectedRelationType for edge type - Maintains automatic sync with ConnectNodeModal via refetchQueries
- Implement click-to-create nodes on canvas without modal dialogs - Add DEFAULT work item type with Square icon for generic nodes - Auto-increment node names (New Node 1, 2, 3, etc.) - Add bulk delete for unconnected nodes in Delete Graph modal - Use in-page confirmation instead of browser popups - Simplify node deletion for unconnected nodes
- Replace individual node deletions with single bulk operation using id_IN - Add clearer confirmation dialog with explanation text - Improve success notification to show count and graph name - Optimize for large graphs (100K+ nodes) with single database operation
…tion - Add zoom-based LOD thresholds for progressive detail reveal - Implement smooth opacity transitions instead of sudden visibility changes - Add viewport culling for performance with large graphs (100K+ nodes) - Edge labels now fade in gradually starting at 0.4x zoom - Optimize rendering by filtering visible nodes and edges only - Create game-like experience where detail increases with zoom level
- Implement fullscreen toggle with Zen mode for distraction-free graph work - Add clean navigation between workspace and fullscreen modes - Hide all UI panels in fullscreen for pure graph visualization - Standardize minimized panel buttons to consistent w-36 h-10 sizing - Reduce spacing between panels from 27px to 12px for compact layout - Fix TypeScript errors in edge filtering and node creation - Maintain LOD system for smooth progressive detail reveal
- Implement 10-second visual feedback for Shift+Click edge creation - Add smooth fade-in (1s) and dotted-to-solid transformation (9s) - Centralize DEFAULT_EDGE relationship type across all edge creation methods - Add X close button to node context menu for improved UX - Update GraphQL schema to include DEFAULT_EDGE relationship type - Fix TypeScript type issues with centralized RelationshipType imports
- Click on edge labels to open relationship type selector - Modern dropdown with smooth fade-in animation positioned at label - Professional UI with icons, descriptions, and current selection indicator - Keyboard support with ESC to close dropdown - Hover effects on edge labels to indicate clickability - Import getRelationshipIconElement for proper icon rendering
…tants - Replace hardcoded SVG paths with centralized React components - Add getRelationshipIconForD3() function for D3/SVG context integration - Enable real-time icon updates when relationship types change - Maintain visual consistency between edge labels and dropdown interfaces
Removed all console.log statements and cleaned up unused imports across InteractiveGraphVisualization and ConnectNodeModal components. Fixed TypeScript compilation errors and organized code structure for better maintainability.
- Implemented edge clicking with invisible clickable areas for better UX - Added edge details panel that appears near clicked edge - Shows relationship type, source/target nodes, and delete option - Fixed TypeScript errors and added notification context - Improved edge label styling with matching background colors - Enhanced hover effects for visual feedback
…and fix icon rendering
- Replace hardcoded type colors with centralized getTypeConfig system - Fix EditNodeModal to use correct graph ID for cache updates - Ensure immediate UI updates when editing nodes without page refresh - Maintain consistent colors across all node type changes
- Add IN_REVIEW and ON_HOLD statuses to complete 9-status workflow - Update Dashboard with all 9 status cards and full-width Total Tasks display - Sync pie chart and radar chart with new status system and centralized colors - Update GanttChart progress calculation for all status types - Modify ViewManager stats calculation to track all 9 status counts - Ensure all views (Table, Card, Kanban, Calendar, Activity) use centralized configuration
…uration - Add complete 9-status system (NOT_STARTED as default, PROPOSED, PLANNED, IN_PROGRESS, IN_REVIEW, BLOCKED, ON_HOLD, COMPLETED, CANCELLED) - Centralize all work item colors, icons, and utility functions in workItemConstants.tsx - Update all components to use centralized configuration instead of hardcoded values - Fix GraphQL assignedTo relationship handling with proper connect/disconnect syntax - Update server schema to include all 9 statuses - Add project health color system with utility functions - Ensure all icons are unique across the system - Maintain TypeScript type safety and pass lint/typecheck
- Set default status to NOT_STARTED instead of PROPOSED - Set default node type to DEFAULT - Remove mandatory asterisks (*) from Node Type and Relationship Type since they have defaults - Remove validation checks for fields with default values - Maintain TypeScript type safety and pass lint/typecheck
- Add getStatusCompletionPercentage function to workItemConstants.tsx - Update InteractiveGraphVisualization to use centralized function - Include all 9 statuses with logical workflow progression percentages - Maintain consistent status percentage logic across the application
…tions - Update GanttChart to use getStatusCompletionPercentage() for progress calculation - Replace hardcoded status styling in InteractiveGraphVisualization with getStatusConfig() - Update progress color logic to use actual status instead of inferring from percentage - Ensure all status-related functionality uses centralized workItemConstants
- Comment out entire NodeList.tsx file since it's not used in the application - Add deprecation notice and TODO for future centralization work - Prevents accidental usage of legacy hardcoded status/type logic - Preserves code for potential future reactivation
- Remove legacy nodeColorSystem imports from ConnectNodeModal and CreateNodeModal - Add proper imports for getTypeColorScheme, getStatusColorScheme, getPriorityColorScheme - Fix TypeScript type errors by using correct color scheme functions - Comment out deprecated nodeColorSystem.ts and unused NodeList.tsx components - All components now use centralized workItemConstants.tsx for consistent styling
- Update GraphVisualization.tsx to use dynamic type/priority legends with getTypeConfig() and getPriorityConfig() - Fix InteractiveGraphVisualization priority colors to use getPriorityConfig() - Update NodeDistributionRadar to use getTypeIconElement() for consistent icon styling - Replace all hardcoded priority colors in EditNodeModal with centralized getPriorityConfig() - All visualization components now use workItemConstants.tsx for consistent color schemes
… system" This reverts commit 47b3ed7.
- Remove unused variables in ConnectNodeModal.tsx - Add disconnect functionality to DeleteNodeModal.tsx - Improve edge mutation consistency across components - Remove eslint-disable comments from deprecated files
- Reduce polling interval from 5s to 100ms for near real-time updates - Add awaitRefetchQueries to CREATE_WORK_ITEM mutation for immediate cache updates - Fix isRelationshipDisabled function to properly validate duplicate edges - Implement comprehensive duplicate prevention using validateNewConnection - Enhance edge creation validation in ConnectNodeModal
- Replace direct node creation on empty space clicks with context menu - Add 'Create Node' option to create nodes at clicked position - Add 'Zoom to Fit' option that scales and centers view to show all nodes - Context menu supports both left-click and right-click - Exclusive dialog behavior closes other dialogs when context menu opens - Zoom to fit properly syncs with D3 zoom behavior state to prevent reversion - Context menu positioned with viewport boundary checking
- Move Zen Mode button to top-right with proper spacing (top-4 right-6) - Position Data Health button below Zen Mode (top-20 right-6) to prevent overlap - Align Back button with Zen Mode button position for consistency - Add shadow-lg to buttons for better visual separation - Create clean empty zone around Zen Mode button
- Remove scroll bars by eliminating minHeight constraint from graph container - Remove node position bounds constraints to allow infinite panning - Improve empty space click detection with larger background area (20000x20000) - Fix button positioning: Zen Mode at top-4 right-6, Data Health at top-20 right-6 - Align Back button position with Zen Mode button for consistency - Completely rewrite zoom to fit algorithm for proper node detection - Zoom out much more aggressively (max 0.2x scale) with generous margins - Improve node creation stability by removing disruptive refetch() call - Add detailed logging for zoom to fit debugging - Preserve all existing functionality including context menus
- Add overflow-hidden to graph route wrapper in App.tsx - Add overflow-hidden class to graph container component - Force body and html overflow to hidden when graph component mounts - Restore original overflow settings when component unmounts - Ensure .graph-container CSS has overflow-hidden - Multi-layered approach prevents scroll bars at all levels - Reset layout button now always visible without scrolling - UI properly resizes to match available screen space
- Add persistent node positioning that saves drag positions to database - Implement smart initial positioning for unconnected nodes on periphery - Add cluster drag behavior with edge stretching threshold (80px) - Implement dynamic edge length constraints (min 40%, max 60% of screen) - Stronger repulsion for connected nodes to emphasize edge connections - Stabilize physics simulation with simplified force calculations - Remove glitchy peripheral force and complex charge calculations - Configure simulation for smoother movement and better stability - Automatic position saving on drag end with console logging - Unconnected nodes start distributed in circle around edge - Connected nodes use saved positions and stay in focus area
…tive graph elements ## New Features - **Pulsing Glow Effects**: Added bright green pulsing glow to highlight active dialog elements - Nodes pulse when menu is open with 'dialog-glow' SVG filter - Edges pulse with stronger 'edge-dialog-glow' filter when relationship dropdown or details dialog is active - 12px thick edges and 8px thick node borders during active dialogs for maximum visibility - **Smart Dialog Positioning**: Dialogs now position themselves to avoid obstructing the glow effects - Edge details dialog appears 100px to the side of clicked edge - Relationship dropdown appears 120px to the side with intelligent boundary detection - Both dialogs automatically flip to opposite side if they would go off-screen - **Intelligent Dropdown Auto-Positioning**: Relationship dropdowns detect off-screen positioning - Uses DOM measurements with getBoundingClientRect() for precision - Gradually slides dropdowns back into view with smooth CSS transitions - Maintains 20px margins from all screen edges ## Enhanced User Experience - **Consistent Visual Feedback**: Both edge interactions (clicking line vs clicking label) show identical thick line + glow effects - **Improved Dialog Management**: All dialogs now properly close on background click with backdrop handlers - **Physics-Aware Styling**: Glow effects persist through D3 simulation ticks and zoom operations - **Non-Permanent Changes**: Edge thickness automatically resets when dialogs close ## Technical Implementation - Created separate SVG filters for nodes (15px-35px blur) and edges (25px-50px blur) with pulsing animations - Added React useEffect-based glow management that works alongside D3.js physics simulation - Implemented backdrop click handlers for consistent dialog dismissal behavior - Enhanced background click logic to handle multiple dialog types (nodeMenu, edgeMenu, editingEdge, showEdgeDetails)
…sistency - Change glow effects from generic green to type-specific colors: * Node glows use node type colors (OUTCOME, TASK, MILESTONE) * Edge glows use relationship type colors (DEPENDENCY, BLOCKS, RELATES_TO) - Fix edge arrow fill colors to match relationship types instead of source node colors - Remove CSS edge color overrides to ensure JavaScript-applied relationship colors take precedence - All visual indicators now maintain color consistency with their semantic types
- Add immediate glow effect on node click without requiring mouse movement - Implement type-specific hover effects for all 9 work item types using correct colors - Keep hover effects (white border) separate from click effects (type-colored glow) - Fix edge hover effects to use white borders consistently - Remove conflicting JavaScript hover handlers that interfered with glow effects - Combine hover highlights with instant click feedback for better UX
- Fix implicit any type errors in drag handler destructuring - Remove console.log statements that were causing lint warnings - Fix unused variable warnings in optimistic response handlers - Clean up unused imports and variables to reduce warning count
Add edge labels with icons and centralized styling
Member
|
Great work @mvalancy-mt 🚀 The edge labels and glow effects make the graph much clearer and smoother to use 👌 |
Patel230
pushed a commit
that referenced
this pull request
Oct 27, 2025
Release v0.2.2-alpha: Edge Labels and Enhanced Graph Interactions
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
Features Added
Technical Details
Test Plan