-
Notifications
You must be signed in to change notification settings - Fork 0
feat: Performance Profiling System + Major O(n) → O(1) Optimizations #10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
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
…tions • Performance Profiling Suite - PerformanceProfiler: comprehensive timing and memory tracking - ExpandAllProfiler: specialized profiling for bulk container operations - PerformanceDashboard: real-time performance monitoring UI - PaxosPerformanceAnalyzer: workload-specific performance analysis • Core Architecture Optimizations - Replace O(n²) nested loops with O(1) Map-based lookups in VisualizationState - Add container parent mapping for efficient hierarchy traversal - Implement memoized recursive leaf node counting - Add layout suspension during bulk operations to prevent layout thrashing • Bulk Operations Performance - Optimized expandAllContainers() eliminates O(n²) parent container lookups - Added validation batching to reduce overhead during bulk expansions - Intelligent layout triggering prevents redundant layout calculations - Container visibility checks now use efficient Map operations • Bridge Performance Improvements - ReactFlowBridge and ELKBridge now use O(1) VisualizationState lookups - Eliminated expensive linear searches in parent mapping operations - Reduced bridge computational complexity for large graphs These optimizations significantly improve performance for large graphs with hundreds of containers and thousands of nodes, while maintaining full compatibility with existing functionality.
jhellerstein
commented
Sep 2, 2025
Contributor
Author
jhellerstein
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
some cleanup required
jhellerstein
pushed a commit
that referenced
this pull request
Oct 28, 2025
Addresses high-priority items from PR review: 1. PNG Export Implementation (Issue #1) - Replace fragile SVG serialization with html-to-image library - Add html-to-image@1.11.13 as production dependency - Properly handles CSS styles, fonts, and complex layouts - Uses 2x pixel ratio for better quality - Improved error handling with user-friendly messages 2. Memory Leak in Modal Creation (Issue #3) - Replace DOM manipulation with proper React component - New SaveDialog component with proper lifecycle management - Handles cleanup on unmount - Supports escape key and overlay click to close - No more dangling event listeners 3. Theme Detection Caching (Issue #2 partial) - Add 100ms cache to avoid repeated theme detection - Invalidate cache on actual theme changes - Reduces performance overhead 4. UI Scale Validation (Issue #7) - Add validation and constraints for uiScale prop - Clamp to range [0.5, 2.0] - Show warning in development when out of range 5. Error Handling Improvements (Issue #4) - Replace silent catches with console.warn in development - Better visibility of theme detection edge cases 6. Code Quality (Issue #8) - Extract CONTROL_BUTTON_STYLE constant to remove duplication - Cleaner button styling in CustomControls 7. TypeScript Strictness (Issue #10) - Replace (globalThis as any) with properly typed interface - Better type safety in theme detection Changes: - Add html-to-image production dependency - Create SaveDialog component for export format selection - Improve theme detection with caching and logging - Add uiScale validation with warnings - Better error handling throughout - Code cleanup and type improvements All tests passing (1410 passed | 13 skipped). Builds successfully with no lint errors.
jhellerstein
added a commit
that referenced
this pull request
Oct 28, 2025
…#81) * feat: Add semantic color tokens, dark mode support, and UI scaling BREAKING CHANGE: Edge colors now use semantic tokens instead of hex values. Legacy "color" field still supported for backward compatibility. Features: - Add semantic color token system for edges (default, muted, light, highlight-1/2/3, success, warning, danger) - Implement theme-aware token mapping with automatic dark mode detection - Add runtime edge color resolution based on current theme - Increase dark mode edge contrast (brighter stroke colors for better visibility) - Add dark mode safety override for legacy pure black colors - Add UI scaling prop (uiScale) for IDE integrations (0.85 recommended) - Add Save button to export visualization as PNG or JSON - Add initialZoom prop to HydroscopeCore for custom initial zoom levels Theme & Color Improvements: - Enhanced detectDarkMode() with computed background luminance heuristic - Added VS Code webview theme detection (.vscode-dark, .vscode-high-contrast) - Brightened dark mode color palette for better contrast - Updated dark default stroke colors (#cbd5e1, #e5e7eb) - Added theme change listeners for dynamic updates - Force light mode during tests for deterministic results Visual Improvements: - Add strokeWidth: 2 to all edge style mappings for consistency - Update waviness to use "none"/"wavy" string values (backward compatible with boolean) - Improve edge style validation with domain checking for all visual channels Documentation: - Add JSON_FORMAT.md documentation for color-token and theme-aware mappings - Add UI_SCALING.md guide for IDE integrations - Add migration script (scripts/update-color-tokens.mjs) for legacy JSONs - Update examples with save functionality Sample Data: - Migrate paxos.json, paxos-flipped.json, paxos-old.json to use color-token - Migrate simple_cluster.json to use color-token - Add full backtrace data to simple_cluster nodes CSS & Styling: - Add comprehensive VS Code dark theme support in dark-mode.css - Scale ReactFlow controls, minimap, and custom controls with uiScale - Add pointer-events handling for scaled panel toggle buttons - Improve dark mode specificity for all UI components Architecture: - StyleProcessor now uses getEdgeColorForToken(token, isDark) for runtime mapping - Edge colors decoupled from node color palette changes - Test-safe theme detection (no flakiness from environment differences) Migration: Legacy hex colors still work via fallback. To migrate: - Replace "color": "#2563eb" with "color-token": "highlight-1" - Replace "color": "#000000" with "color-token": "default" - Replace "color": "#6b7280" with "color-token": "muted" - Run: node scripts/update-color-tokens.mjs Files Modified: - src/components/Hydroscope.tsx - src/components/HydroscopeCore.tsx - src/shared/config/theme.ts - src/shared/config/styling.ts - src/utils/StyleProcessor.ts - src/styles/dark-mode.css - src/examples/hydroscope-example.tsx - test-data/*.json (4 files) - scripts/update-color-tokens.mjs (new) - docs/UI_SCALING.md (new) * fix: address PR review feedback for semantic color tokens Addresses high-priority items from PR review: 1. PNG Export Implementation (Issue #1) - Replace fragile SVG serialization with html-to-image library - Add html-to-image@1.11.13 as production dependency - Properly handles CSS styles, fonts, and complex layouts - Uses 2x pixel ratio for better quality - Improved error handling with user-friendly messages 2. Memory Leak in Modal Creation (Issue #3) - Replace DOM manipulation with proper React component - New SaveDialog component with proper lifecycle management - Handles cleanup on unmount - Supports escape key and overlay click to close - No more dangling event listeners 3. Theme Detection Caching (Issue #2 partial) - Add 100ms cache to avoid repeated theme detection - Invalidate cache on actual theme changes - Reduces performance overhead 4. UI Scale Validation (Issue #7) - Add validation and constraints for uiScale prop - Clamp to range [0.5, 2.0] - Show warning in development when out of range 5. Error Handling Improvements (Issue #4) - Replace silent catches with console.warn in development - Better visibility of theme detection edge cases 6. Code Quality (Issue #8) - Extract CONTROL_BUTTON_STYLE constant to remove duplication - Cleaner button styling in CustomControls 7. TypeScript Strictness (Issue #10) - Replace (globalThis as any) with properly typed interface - Better type safety in theme detection Changes: - Add html-to-image production dependency - Create SaveDialog component for export format selection - Improve theme detection with caching and logging - Add uiScale validation with warnings - Better error handling throughout - Code cleanup and type improvements All tests passing (1410 passed | 13 skipped). Builds successfully with no lint errors. * refactor: address additional PR feedback 1. Luminance Calculation Optimization - Extract luminance calculation into cached helper function - Avoid redundant RGB parsing and floating-point operations - Cache background color string to skip recalculation 2. Download URL Cleanup Safety - Increase timeout from 100ms to 1000ms for both PNG and JSON - More reliable on slower systems and network conditions - Better ensures download completes before URL revocation 3. CSS Duplication Elimination - Refactor dark-mode.css to use CSS custom properties - Eliminate 677 lines of duplicated code (81% reduction) - Single source of truth for dark mode colors - Reduced from 834 lines to 157 lines - Much easier to maintain going forward 4. Type Guard Simplification - Remove redundant GlobalWithProcess interface - Use optional chaining directly on globalThis.process - Cleaner and more concise code All checks passing: - TypeScript compilation ✓ - Linting (prod + tests) ✓ - Build ✓ - Tests: 1410 passed | 13 skipped ✓ --------- Co-authored-by: Joe Hellerstein <jmhwork@amazon.com>
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.
Overview
This PR introduces a comprehensive performance profiling system and implements major architectural optimizations that eliminate O(n²) and O(n) performance bottlenecks in VisualizationState operations.
🚀 New Performance Profiling System
Core Profiling Tools
Key Features
⚡ Core Architecture Optimizations
O(n²) → O(1) Container Operations
_containerParentMapOptimized VisualizationState Methods
getContainerParent(): O(1) parent container lookupgetNodeById(): O(1) node retrievalcountRecursiveLeafNodes(): Memoized recursive countingexpandAllContainers(): Bulk operations with layout suspensionBridge Performance Improvements
🔧 Bulk Operations Enhancements
Layout Optimization
Container Expansion Performance
📊 Performance Impact
Large Graph Performance (1000+ nodes, 100+ containers)
Real-world Benefits
🧪 Quality Assurance
🛠️ Technical Details
New Mapping Structures
Layout Control Interface
This represents a major performance milestone for Hydroscope, enabling smooth visualization of significantly larger and more complex graphs while providing powerful profiling tools for continued optimization work.