Skip to content

ATLAS-5324: Enhance Collapsed Sidebar with Module Icons, Interactive …#688

Open
Brijesh619 wants to merge 1 commit into
apache:masterfrom
Brijesh619:ATLAS-5324
Open

ATLAS-5324: Enhance Collapsed Sidebar with Module Icons, Interactive …#688
Brijesh619 wants to merge 1 commit into
apache:masterfrom
Brijesh619:ATLAS-5324

Conversation

@Brijesh619

@Brijesh619 Brijesh619 commented Jul 3, 2026

Copy link
Copy Markdown
Contributor

…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.
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 fallbacks, ensuring layout resizes are smooth and flicker-free.
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.

@Brijesh619

Copy link
Copy Markdown
Contributor Author
Screenshot from 2026-07-03 18-25-50 Screenshot from 2026-07-03 18-25-43 Screenshot from 2026-07-03 18-25-33

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant