[
https://issues.apache.org/jira/browse/ATLAS-5324?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Brijesh Bhalala updated ATLAS-5324:
-----------------------------------
Description:
This ticket enhances the UX of the collapsed navigation sidebar by introducing
interactive module icons and popover trees, allowing users to access complex
navigation (like Business Metadata, Glossary, etc.) without expanding the main
sidebar. It also includes critical layout stability optimizations to ensure
smooth rendering during these interactions.
h3. *Features Implemented*
* *Collapsed Sidebar Module Icons:* Added new SVG icons to the collapsed
sidebar, providing quick-access entry points for various data trees.
* *Interactive Tree Popovers:* Hovering/Clicking on these icons now opens a
sleek contextual popover containing the relevant data tree, allowing seamless
navigation without shifting the main layout.
* *Active State Markers:* Added active state indicators to clearly show users
which sidebar module is currently engaged.
h3. *UI & Performance Optimizations (Included Fixes)*
During the implementation of the collapsed popovers, several downstream
rendering bottlenecks were identified and resolved to ensure the interactions
feel premium and instant:
* *Dashboard Re-rendering Lag:* Fixed a major issue where toggling the sidebar
or interacting with popovers caused the entire main right-hand dashboard
({{{}<Outlet />{}}}) to unmount and re-render. Implemented stable {{useMemo}}
caching in {{SideBarBody}} to ensure the dashboard view remains completely
stable during sidebar interactions.
* *Popover Height Snapping:* Fixed an issue where the new sidebar popovers
would open with a massive vertical height and abruptly shrink down. Added an
{{isPopover}} context flag so the tree dynamically renders a minimal 2-row
loading skeleton instead of the default 7-row skeleton, perfectly matching the
popover bounds.
* *Search Table Image Flickering:* Fixed an underlying issue where layout
shifts from the sidebar caused the Search Data Table to remount cells,
triggering heavy network {{fetch}} requests for entity icons and flashing
loading skeletons. Completely refactored {{EntityDisplayImage}} to use
synchronous browser-native {{<img onError>}} fallbacks, ensuring layout resizes
are smooth and flicker-free.
was:
*Background / Problem:* Currently, when the Atlas Dashboard sidebar is
collapsed, the space beneath the Atlas logo remains completely empty. This
results in underutilized screen real estate and forces the user to fully expand
the sidebar every time they want to navigate to a different module or tree
structure.
*Objective:* Improve the UX of the collapsed sidebar (mini-variant) by
displaying recognizable icons for each module, enabling quick navigation via
interactive tooltips, and providing visual feedback on the user's current
context.
*Acceptance Criteria:*
*Module Icons in Collapsed State:*
When the sidebar is collapsed, display a vertical stack of icons corresponding
to the main modules: Search/Entities, Classifications, Business Metadata,
Glossary, Relationships, and Custom Filters.
*Interactive Tree Tooltips on Hover:*
Hovering over any of these module icons must trigger an interactive
popup/tooltip.
The tooltip must render the actual, fully functional tree structure (e.g.,
<GlossaryTree />, <EntitiesTree />) for that specific module, allowing users to
browse and click nodes directly from the collapsed state.
The tooltip should have a defined maxHeight and scrollability to handle large
tree structures cleanly.
Active State Indication:
The system must determine the currently active module by evaluating the URL
location.pathname and searchParams.
The icon representing the currently active module must display a visual
selection marker (e.g., a 4px solid #2ccebb left border and subtle background
highlight).
This active marker must perfectly match the visual styling of selected tree
nodes in the open sidebar to maintain design consistency.
Click to Expand:
Clicking directly on any of the module icons should instantly slide open the
main sidebar drawer.
> Atlas React UI: Enhance Collapsed Sidebar with Module Icons, Interactive
> Tree Tooltips, and Active State Markers
> -----------------------------------------------------------------------------------------------------------------
>
> Key: ATLAS-5324
> URL: https://issues.apache.org/jira/browse/ATLAS-5324
> Project: Atlas
> Issue Type: New Feature
> Components: atlas-core
> Reporter: Brijesh Bhalala
> Assignee: Brijesh Bhalala
> Priority: Major
> Labels: atlas-react
>
> This ticket enhances the UX of the collapsed navigation sidebar by
> introducing interactive module icons and popover trees, allowing users to
> access complex navigation (like Business Metadata, Glossary, etc.) without
> expanding the main sidebar. It also includes critical layout stability
> optimizations to ensure smooth rendering during these interactions.
> h3. *Features Implemented*
> * *Collapsed Sidebar Module Icons:* Added new SVG icons to the collapsed
> sidebar, providing quick-access entry points for various data trees.
> * *Interactive Tree Popovers:* Hovering/Clicking on these icons now opens a
> sleek contextual popover containing the relevant data tree, allowing seamless
> navigation without shifting the main layout.
> * *Active State Markers:* Added active state indicators to clearly show
> users which sidebar module is currently engaged.
> h3. *UI & Performance Optimizations (Included Fixes)*
> During the implementation of the collapsed popovers, several downstream
> rendering bottlenecks were identified and resolved to ensure the interactions
> feel premium and instant:
> * *Dashboard Re-rendering Lag:* Fixed a major issue where toggling the
> sidebar or interacting with popovers caused the entire main right-hand
> dashboard ({{{}<Outlet />{}}}) to unmount and re-render. Implemented stable
> {{useMemo}} caching in {{SideBarBody}} to ensure the dashboard view remains
> completely stable during sidebar interactions.
> * *Popover Height Snapping:* Fixed an issue where the new sidebar popovers
> would open with a massive vertical height and abruptly shrink down. Added an
> {{isPopover}} context flag so the tree dynamically renders a minimal 2-row
> loading skeleton instead of the default 7-row skeleton, perfectly matching
> the popover bounds.
> * *Search Table Image Flickering:* Fixed an underlying issue where layout
> shifts from the sidebar caused the Search Data Table to remount cells,
> triggering heavy network {{fetch}} requests for entity icons and flashing
> loading skeletons. Completely refactored {{EntityDisplayImage}} to use
> synchronous browser-native {{<img onError>}} fallbacks, ensuring layout
> resizes are smooth and flicker-free.
>
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
