ATLAS-5324: Enhance Collapsed Sidebar with Module Icons, Interactive Tree Tooltips, and Active State Markers

[Brijesh619]

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 introduces several critical layout stability, styling, strict-typing, and rendering optimizations to ensure these interactions feel instant, seamless, and production-ready:

Sidebar & Layout Enhancements:

• Collapsed Sidebar Module Icons: Added new SVG icons to the collapsed sidebar, providing quick-access entry points for all data trees.
• Interactive Tree Popovers (React Portals): Interacting with these icons now opens a contextual popover containing the relevant data tree. To guarantee top-tier performance, we implemented a dynamic React Portal architecture. The component now renders via createPortal consistently, dynamically reparenting the DOM node between the sidebarWrapper and the popoverContainer. This guarantees exactly one React instance of each tree at all times, preserving Redux/effects states seamlessly without duplicate fetching or node remounting.
• Infinite Render Loop Patch: Engineered stable refCallbacks factory functions mapped by component ID in SideBarBody.tsx to securely track portal references without triggering React dependency cascades.
• 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.
• Main Layout Stability (SideBarBody.tsx): Fixed a major layout bug where collapsing the sidebar caused the main dashboard content to shift left underneath the mini-sidebar, cutting off the left half of the page cards (e.g., the Overview card). Refactored the <Main> styled container to eliminate legacy negative margins (marginLeft: -20%) and padding: theme.spacing(3), converting <Main> into a flex item (flexGrow: 1, minWidth: 0). It now dynamically adapts next to both the 20% expanded drawer and 60px mini-drawer without cutting off content or causing whitespace gaps around the header.
• Tree Component Persistence (SideBarBody): Refactored <Paper> wrappers to use SCSS accessibility-friendly structural concealment (visibility: hidden, width: 0, position: absolute, pointer-events: none) rather than display: none or conditional rendering. This strictly keeps layout/measurements alive for React while pulling nodes cleanly off the visual rendering thread.
• Stale-While-Revalidate Session/Version Fetching: Fixed an issue in sessionSlice.ts where the sidebar version footer flashed empty during transient network errors. The slice now explicitly retains state.versionData.data and state.sessionObj.data during .rejected lifecycle events for a seamless UI experience.
• Popover Height Snapping & Edge Cases (TreeSkeletonLoader): 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. Fortified the skeleton loader to safely handle negative bounds and explicit undefined fallbacks.
• 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 Layout Spacing Fixes (DashBoard.tsx, DashboardOverview.tsx, dashboard.scss):

• Equal Left/Right Card Padding: Fixed a persistent asymmetry where the dashboard cards had significantly more left padding than right. Resolved by setting overflow: hidden on .dash-board-stack-6 and applying sx={{ width: "100%" }} on the Grid container, which constrains the Grid within the padded parent and produces symmetric 24px visual gaps on both left and right sides.
• Balanced Vertical Search Bar Spacing: Fixed excessive and uneven whitespace around the search bar by assigning spacing={0} on the outer DashBoard Stack and structuring equal 16px white space boundaries through dashboard.scss.
• Outer Stack Padding Reset: Set padding={0} on the outer DashBoard Stack to eliminate any MUI default horizontal padding that was contributing to the left/right asymmetry.

Rendering, Strict Typing & Code Quality Optimizations:

• Strict TypeScript & Zero-any Refactoring (AGENTS.md Compliance): Scoured the workspace to completely eliminate any and unsafe type assertions:
  • Eradicated all any usages across the Redux selector pulls in SideBarTree.tsx (e.g., savedSearchData now strictly maps to a SavedSearchItem[] | null interface).
  • Typed mutable refs explicitly (e.g., toastId as React.MutableRefObject<number | string | null>) and downstream method guards.
  • Extracted unsafe as string coercions in convertApiToQueryBuilder and substituted structured string casting String(...) bindings mapping explicit fallbacks.
  • Replaced (v: any) => numberFormatWithComma(v as number) with safe runtime type guards (v: unknown) => (typeof v === "number" ? numberFormatWithComma(v) : "").
• Strict Styling Compliance: Completely removed object-based styling (MUI sx props) and inline styling (style={{...}}) across all modified components.
  • Hardcoded hexadecimal background colours (#ffffff) and raw RGB shadows were wiped globally and re-linked to scalable tokens in variables.scss ($card-bg, $dashboard-bg, $primary-blue, etc.).
  • Migrated QuickSearch.tsx, TreeNodeIcons.tsx, SideBarTree.tsx, and SideBarBody.tsx configurations entirely into SCSS abstraction schemas.

---

How was this patch tested?

Note - Sidebar Resize Logic Removal:
The draggerRef and drawer resizing mouse event listeners (handleMouseDown, handleMouseMove, etc.) were intentionally removed in this PR. This resize logic was pre-existing dead code on master that lacked a functional DOM dragger element, did not actually work, and needlessly bound unmounting event listeners.

Manual UI Testing:

• Verified that hovering/clicking the new collapsed module icons successfully triggers the appropriate popover containing the correct tree data via createPortal.
• Evaluated dynamic viewport limits for popover mounting locations.
• Verified that the dashboard card area has equal left and right padding, and that the search bar has symmetric whitespace above and below it.
• Verified that no sx prop or inline style attribute remains on any component touched by this PR, validating complete SCSS segregation.

Automated Test Suite Expansion (4,865 Passing Tests):

• React Portal Validations: Added dedicated assertions to SideBarBody.test.tsx verifying that toggling createPortal components to/from popovers retains exact component counts, ensuring Redux loops are kept completely isolated.
• Navigation Assertions: Verified logo interaction tests in SideBarBody.test.tsx accurately fire mockNavigate behaviors, while edge cases enforcing blank param routes load exclusively without triggering phantom active states.
• Skeleton & Render Edge Cases: Tested TreeSkeletonLoader.test.tsx for negative bound limits and invalid element strings in table rendering fallbacks.
• State Retention Testing: Injected regression guards confirming .rejected responses in sessionSlice.test.ts hold onto stale local payloads accurately.
• Removed outdated fetch mocks for image rendering in EntityDisplayImage.test.tsx and properly implemented native fireEvent.error DOM fallback simulation.

Performance & Type 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, and the network tab remains quiet.
• Automated Build & Typecheck: Ran npm run typecheck and npm run test locally and verified that the refactored native DOM logic, React Portal lifecycle constraints, layout fixes, and TypeScript strict mode types pass flawlessly with 0 errors.

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

CC. @mneethiraj

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]