Refactor floating menus to shared base component with resizing and scrolling #73
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
![mentatbot[bot]](https://avatars.githubusercontent.com/in/837875?s=60&v=4){kind=small}
- Created FloatingMenu base component with shared dragging, resizing, and scrolling functionality - Refactored all floating menu components to inherit from FloatingMenu: - DraggableControls (Connection Weights) - DynamicLegend (Legend) - FloatingNodeSizing (Node Sizing) - FileDetails (File Details) - UnifiedVisualizationControls (Visualization Controls) - Added resizing capability with drag handles in bottom-right corner - Added automatic scroll bars when content exceeds menu size - Eliminated code duplication across all floating menus - Consistent styling and behavior across all menus Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/1164cba6-117d-48ee-ad9e-0c952bef0e30 Co-authored-by: jakethekoenig <[email protected]>
- Fix dynamic Tailwind class issue by using inline styles for title border colors - Fix potential negative maxHeight values when resizing menus below 80px - Add proper color mapping for all supported title colors - Ensure scroll container always has valid CSS values Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/cb614db8-6a7e-4682-99da-695c336409d9 Co-authored-by: jakethekoenig <[email protected]>
- Simplify title color mapping using object literal instead of switch statement - Fix SSR compatibility by checking for window existence before accessing window.innerWidth - Improve code maintainability and prevent runtime errors in SSR environments Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/e83ee1f0-7f53-4ba6-8c9a-4ffa60fa3669 Co-authored-by: jakethekoenig <[email protected]>
- Remove isInitialized state and setTimeout logic that could cause memory leaks - Simplify position initialization by using initial state directly - Clean up useEffect dependencies and remove potential race conditions - Maintain all functionality while reducing complexity Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/96ca28d5-6a78-4bd8-950a-1917ba3c8005 Co-authored-by: jakethekoenig <[email protected]>
- Replace useCallback with useRef pattern to prevent multiple event listeners - Prevents stacking of mousemove/mouseup handlers during resize operations - Improves performance by avoiding unnecessary re-creation of event handlers - Maintains all functionality while fixing potential memory and performance issues Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/82c9ac4d-1c8b-4d36-8796-d028423aeb0d Co-authored-by: jakethekoenig <[email protected]>
- Clean up unused import that would cause TypeScript build failures in strict mode - All functionality preserved, just removing dead code Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/beab9832-8188-45b8-a5f3-3ce250ea742d Co-authored-by: jakethekoenig <[email protected]>
- Clean up unused import that would cause TypeScript build failures in strict mode - All functionality preserved, just removing dead code - TypeScript compilation now passes cleanly Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/da150bcc-1935-423c-a817-d0d101634ec2 Co-authored-by: jakethekoenig <[email protected]>
- Prevent dragging when clicking on textarea elements - Ensures consistent behavior with other form controls - Maintains good UX when interacting with text areas in menus Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/811a4c1e-b2a4-48b0-9197-b9d5b8606e70 Co-authored-by: jakethekoenig <[email protected]>
- Add initial position clamping in FloatingMenu useEffect on mount - Ensures menus stay visible even when initialPosition uses window.innerWidth calculations - Prevents negative positions that would render menus off-screen - Maintains all functionality while improving UX on narrow screens Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/0cb3f396-96e1-4a8a-be4e-ad2f9b25261a Co-authored-by: jakethekoenig <[email protected]>
- Fix event listener performance issue by using stable handler with refs - Add draggable-controls className to menus with range sliders to preserve custom styling - Ensure slider styling continues to work after refactor to FloatingMenu base component Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/7b7f596f-444a-4630-aa39-cbba0ae75cc2 Co-authored-by: jakethekoenig <[email protected]>
- Add SSR compatibility guard for window object access - Handle cases where parent element is null by falling back to document bounds - Ensure dragging works even when menu is rendered without a parent container - Maintain all functionality while improving reliability across different render scenarios Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/ad1b2579-141d-4318-9759-f25bdf096191 Co-authored-by: jakethekoenig <[email protected]>
- Suppress exhaustive-deps warning for mount-only effect that intentionally ignores dependencies - Prevents re-clamping on prop changes which would interfere with user positioning - TypeScript compilation passes cleanly with no remaining legacy drag code Mentat precommit script failed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/e0d05828-1f16-42d3-8529-3d5995bf097c Co-authored-by: jakethekoenig <[email protected]>
- Remove react-hooks/exhaustive-deps disable comment that causes CI failure - The empty dependency array is intentional for mount-only effect - Comment explains the reasoning for ignoring dependencies Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/782d8377-863d-4473-9f1e-234e97b99836 Co-authored-by: jakethekoenig <[email protected]>
This commit introduces a significant refactoring of the visualization controls and improves the visual design of all floating menus. ### Changes - **Split `UnifiedVisualizationControls`**: The monolithic `UnifiedVisualizationControls` component has been removed and replaced with two more focused components: `NodeControls` and `EdgeControls`. This simplifies the UI and makes it easier to manage node and edge-related visual features independently. - **Improved `FloatingMenu` Aesthetics**: - Added more padding to prevent content from touching the edges. - Restyled the close button to be a more subtle "X" icon without a border or prominent background. - Improved content overflow handling with a more robust flexbox layout. - Added support for a `headerIcon` prop to give each menu a unique visual identifier. - **Updated `App.tsx`**: - Replaced the single "Controls" button with two separate buttons for "Node Controls" and "Edge Controls", each with a distinct icon. - Integrated the new `NodeControls` and `EdgeControls` components, allowing them to be opened and managed independently. Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/011babe9-40bd-4a1d-aa27-46314857a1bf Co-authored-by: jakethekoenig <[email protected]>
This commit fixes a critical bug in the `FloatingMenu` component and improves its server-side rendering (SSR) compatibility. ### Changes - **Fix `headerIcon` Destructuring**: The `headerIcon` prop was not being destructured in the `FloatingMenu` component, which would cause a `ReferenceError` at runtime. This has been corrected. - **Add SSR Guards**: The `NodeControls` and `EdgeControls` components were using `window.innerWidth` to set their initial positions, which would cause a crash in an SSR environment. A check for `typeof window !== 'undefined'` has been added to prevent this. Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/cc02a227-441f-4b97-aff2-5897273e5ebc Co-authored-by: jakethekoenig <[email protected]>
This commit updates the `tailwind.config.js` file to correctly scan for all `.tsx` files in the `src` directory. This resolves a styling issue where Tailwind CSS classes were not being applied to the new `NodeControls` and `EdgeControls` components. Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/6b09398a-ac74-49e4-b590-19b3bb10e3c7 Co-authored-by: jakethekoenig <[email protected]>
This commit reverts the `tailwind.config.js` file to its original state. The previous change was not the correct fix for the styling issue, and this commit restores the original configuration. Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/1b065300-9ae3-4d9f-9cd6-e2f831e23aa0 Co-authored-by: jakethekoenig <[email protected]>
This commit adds a `postcss.config.js` file to the frontend directory. This file is necessary to enable the Tailwind CSS and Autoprefixer plugins, which resolves the styling issues with the new components. Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/b3a6cbe6-2373-41a3-82b0-6735cb8e7fef Co-authored-by: jakethekoenig <[email protected]>
This commit renames `postcss.config.js` to `postcss.config.cjs` to ensure it is treated as a CommonJS module, as required by the project's configuration. This resolves the PostCSS loading error and allows Tailwind CSS to be applied correctly. Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/5a3f5c41-3b76-40b2-9c1e-6dafba9c82c5 Co-authored-by: jakethekoenig <[email protected]>
This commit introduces two main improvements to the `FloatingMenu` component: 1. **Improved Drag Performance**: The drag handling logic has been refactored to use `requestAnimationFrame` and directly manipulate the DOM's `transform` property. This makes the dragging much smoother and more responsive by avoiding frequent re-renders. 2. **Removed UI Clutter**: The non-functional "traffic light" buttons have been removed from the header of the `FloatingMenu` component, resulting in a cleaner and more focused UI. Additionally, this commit resolves a merge conflict with the `main` branch by removing the now-obsolete `UnifiedVisualizationControls.tsx` file. Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/41d72bd9-d559-43e0-84cb-b7f71d084a9d Co-authored-by: jakethekoenig <[email protected]>
This commit introduces two main changes: 1. **Add Threshold Sliders**: Threshold sliders have been added back to the `NodeControls` and `EdgeControls` components, allowing users to control the visibility of nodes and edges based on their importance. 2. **Fix Tests**: The failing frontend tests have been fixed. This includes updating the `App.test.tsx` to reflect the new control components, fixing a type error in `RepositoryGraph.tsx`, and updating the `FileDetails.test.tsx` to correctly find the close button. Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/e9b41855-eba6-4a8c-ab4e-0f4859b770eb Co-authored-by: jakethekoenig <[email protected]>
This commit introduces several improvements and refactorings: 1. **Refactor Controls**: The `NodeControls` and `EdgeControls` components have been refactored to use a shared `DataSourceWeights` component, which significantly reduces code duplication. 2. **Improve `FloatingMenu`**: The `FloatingMenu` component has been improved to handle resizing more efficiently and to properly cancel animation frames on unmount. 3. **Memoize `toggleNodeExpansion`**: The `toggleNodeExpansion` function in `RepositoryGraph.tsx` has been memoized using `useCallback` to prevent unnecessary re-renders. 4. **Update Preview Script**: The preview script has been updated to include a 5-second sleep, which should give the dev server enough time to initialize and apply the Tailwind CSS styling correctly. Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/074d2a37-4d12-40ce-877a-0632e7176553 Co-authored-by: jakethekoenig <[email protected]>
This commit addresses the feedback from the auto-review: 1. **Fix Preview Script**: The preview script has been updated to use `wait` to prevent the container from exiting prematurely. 2. **Remove Unused Imports**: Unused imports have been removed from `NodeControls.tsx` and `EdgeControls.tsx` to prevent potential build failures. Mentat precommit script passed. Log: https://mentat.ai/gh/AbanteAI/repo-visualizer/log/b75dde04-a7a3-455e-963f-c946b107004a Co-authored-by: jakethekoenig <[email protected]>
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.
This PR consolidates all floating menu components to use a shared
FloatingMenubase component, eliminating code duplication and adding new functionality.Changes Made
Code Reuse & Consolidation
FloatingMenubase component handling all common functionalityDraggableControls(Connection Weights)DynamicLegend(Legend)FloatingNodeSizing(Node Sizing)FileDetails(File Details)UnifiedVisualizationControls(Visualization Controls)New Features
Technical Improvements
draggable-controlsclassNameDeveloper Experience
All existing functionality is preserved while significantly improving code maintainability and adding user-requested features.
🤖 This PR was created with Mentat. See my steps and cost here ✨