ATLAS-5324: Enhance Collapsed Sidebar with Module Icons, Interactive …#688
Open
Brijesh619 wants to merge 1 commit into
Open
ATLAS-5324: Enhance Collapsed Sidebar with Module Icons, Interactive …#688Brijesh619 wants to merge 1 commit into
Brijesh619 wants to merge 1 commit into
Conversation
…Tree Tooltips, and Active State Markers
Contributor
Author
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
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.



…Tree Tooltips, and Active State Markers
What changes were proposed in this pull request? This PR significantly enhances the user experience of the collapsed navigation sidebar by introducing interactive module icons and sleek popover trees. This allows users to access complex navigation (like Business Metadata, Glossary, etc.) without fully expanding the main sidebar, preserving valuable screen real-estate for the main dashboard.
Additionally, it includes several critical layout stability and rendering optimizations to ensure these interactions feel instant and premium:
Collapsed Sidebar Module Icons: Added new SVG icons to the collapsed sidebar, providing quick-access entry points for all data trees.
fallbacks, ensuring layout resizes are smooth and flicker-free.
Interactive Tree Popovers: Interacting with these icons now opens a contextual popover containing the relevant data tree, allowing seamless navigation without shifting the main layout.
Active State Markers: Added active state indicators to the collapsed icons to clearly show users which sidebar module is currently engaged based on the active route.
Popover Height Snapping: Added an isPopover context flag so the popover tree dynamically renders a minimal 2-row loading skeleton instead of the default 7-row skeleton, perfectly matching the popover bounds without visual snapping.
Tree Selection Persistence: Fixed an issue where Custom Filter selections were lost when the popover was closed. The selection state is now safely persisted via URL parameters.
Dashboard Re-rendering Lag (SideBarBody): Fixed a major issue where interacting with the sidebar caused the entire right-hand dashboard () to unmount and re-render. Implemented stable useMemo caching and display: none lifecycle hooks in SideBarBody to ensure the dashboard view remains completely stable during sidebar interactions.
Search Table Image Flickering (EntityDisplayImage): Fixed an underlying bottleneck where layout shifts caused the Search Data Table to remount cells, triggering heavy network fetch requests for entity icons and flashing loading skeletons. Completely refactored EntityDisplayImage to drop React useState tracking in favor of synchronous browser-native
How was this patch tested?
Manual UI Testing:
Verified that hovering/clicking the new collapsed module icons successfully triggers the appropriate popover containing the correct tree data.
Verified that opening a popover does not cause the main dashboard layout to shift or unmount.
Verified that selecting a Custom Filter from within a popover persists its selected state even if the popover is closed and reopened.
Performance Verification:
Executed a search returning a large volume of entities (50+ rows). Rapidly toggled the sidebar to trigger layout resizes and visually confirmed that the entity icons in the table no longer flash or flicker.
Automated Build: Ran npm run build and npm run type-check to verify that the refactored native onError DOM logic complies with strict TypeScript typing constraints and compiles successfully.