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, chart alignment, and rendering optimizations to ensure these interactions feel instant, seamless, and production-ready:

Sidebar & Layout Enhancements:

• Collapsed Sidebar Module Icons (Vite Dynamic Imports): Added new SVG icons to the collapsed sidebar, providing quick-access entry points for all data trees. Migrated all hardcoded absolute string paths (e.g., "/img/sidebar-icons/...") to native Vite module imports (import iconEntities from ...) ensuring the bundler correctly hashes and dynamically routes the SVGs relative to any base URL path in production.
• 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.
• Redundant API Call Elimination (SideBarTree & SideBarBody Modules): Fixed an issue where toggling the sidebar, remounting layouts, and opening individual tree popovers triggered redundant data-fetching API calls across the main SideBarBody and all 6 sidebar tree components (Entities, Classifications, Glossary, etc.). Replaced the loosely typed isEmpty() utility with strict === null || === undefined cache checks within the useEffect hooks, completely stopping infinite network polling loops when the backend actively returns an empty payload (e.g., { entityDefs: [] }).
• 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.
• Empty State UI ("No Records Found"): Fixed several bugs where the "No Records Found" fallback text was improperly aligned, dim, and incorrectly interactive. Restored proper indentation by wrapping the placeholder in a native, disabled <CustomTreeItem>, increased text opacity for readability, and added a strict labelProps?.node !== undefined guard to prevent MUI from illegally applying active .Mui-selected highlighting to empty states.
• 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.

Classification Distribution Card Alignment & Visual Polish (ClassificationDistributionCard.tsx, dashboardChartPalette.ts, dashboard.scss):

• Reference Mockup Layout Alignment: Aligned the ClassificationDistributionCard visual layout 1:1 with the reference design specification:
  • Header Divider & Subtext Spacing: Refined header bottom padding (10px), divider border line (#e8e8e8), total associations top margin (16px), and description top margin (6px).
  • Bold Label Formatting: Restored bold formatting (<strong>Tag-entity associations (total):</strong>) for the total associations label.
  • Reduced Y-Axis Gutter: Decreased CLASSIFICATION_Y_AXIS_MIN_WIDTH from 80 to 56 and CLASSIFICATION_Y_AXIS_CHAR_WIDTH to 7 in dashboardChartPalette.ts, eliminating empty whitespace on the left side of the card and bringing Y-axis labels cleanly next to the axis line.
  • Chart Ticks & Vertical Gridlines: Restored subtle tick mark dashes (tickLine={{ stroke: "#d9d9d9" }}) on X/Y axes, configured <CartesianGrid horizontal={false} vertical={true} /> to render vertical gridlines without horizontal dividers, and set bar fill color to #1890ff (vibrant primary blue) with barSize={20}.

Entity Detail & Image Loading Fixes:

• Avatar Fallback Image Fix (EntityDisplayImage.tsx & EntityDetailPage.tsx): Fixed a regression where missing entity icons (like StorageDesc.png) failed to show the service-level fallback image (like hive.png) on the detail page:
  • Handled the missing serviceType on the detail page API response by injecting it manually from the global Type Definitions (entityObj).
  • Replaced unstable DOM manipulation (target.src = fallbackUrl) with native React useState hooks. This prevents Material-UI's <Avatar> from aggressively unmounting the underlying <img> tag upon an onError event, ensuring the fallback icon triggers a clean re-render and successfully displays.

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 width: 100% on the Grid container, constraining the Grid within the padded parent to produce symmetric 24px visual gaps on both 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 whitespace boundaries through dashboard.scss.
• Outer Stack Padding Reset: Set padding={0} on the outer DashBoard Stack to eliminate any MUI default horizontal padding contributing to left/right asymmetry.

Rendering, Strict Typing & Code Quality Optimizations:

• Vite SWC & SCSS Build Stability: Resolved strict build compilation errors by terminating trailing commas in React module imports and sanitizing literal string newline characters (\n) within the SCSS architecture.
• BEM-Style Semantic Refactoring: Fully refactored and eliminated all auto-generated, sequential class names across dashboard charts and containers (e.g., swapping .classification-distribution-card-box-9 for .classification-distribution-card__tooltip), greatly enhancing long-term code readability and CSS maintainability.
• Strict Styling Compliance (AGENTS.md Rule 7): Completely removed inline sx props and style={{...}} attributes across modified components.
  • Hardcoded hexadecimal background colors (#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 configurations for QuickSearch.tsx, TreeNodeIcons.tsx, SideBarTree.tsx, SideBarBody.tsx, and ClassificationDistributionCard.tsx entirely into SCSS abstraction schemas.
• Strict TypeScript & Zero-any Refactoring (AGENTS.md Compliance): Scoured the workspace to completely eliminate any and unsafe type assertions:
  • Eradicated all any usages across Redux selector pulls in SideBarTree.tsx and SideBarBody.tsx (relying strictly on RootState inference).
  • Fixed preexisting typos in Redux store selectors (e.g., rootClassificationType vs rootClassification).
  • 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.
  • Enhanced Component Type-Safety (EntityDisplayImage.tsx): Eliminated loosely-typed Record<string, unknown> masking for entity props, replacing it with a rigorous EntityData interface that strictly defines guid and isProcess. This guarantees safe dot-notation access and strictly enforces type-safe component consumption.

---

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.
• Visually confirmed that the ClassificationDistributionCard header border, bold total associations text, subtext margins, Y-axis tick dashes, and vertical grid lines match the reference design 1:1.
• Visually confirmed that the entity detail page gracefully loads the service-level fallback icon when a type-specific icon is missing.
• Verified that no sx prop or inline style attribute remains on any component touched by this PR, validating complete SCSS segregation.
• Confirmed the "No Records Found" text cleanly displays as a disabled element without selection bugs.

Automated Test Suite Expansion:

• 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.
• Classification Distribution Card Suite (ClassificationDistributionCard.test.tsx):
  • Added assertion verifying Tag-entity associations (total): renders with bold <strong> formatting.
  • Added assertion for description text rendering.
  • Added test for isLoading={true} guard returning null.
  • Added test for clicking the View All link calling navigateToSearch.
  • Added test for clicking interactive Y-axis tick labels calling navigateToClassificationSearch.
• Data-Fetching Cache Assertions: Extended all Sidebar Tree component test suites and SideBarBody.tsx to strictly enforce the new conditional data-fetching rules. Added mock environments to guarantee dispatch is entirely bypassed when Redux holds an empty target payload instead of null.
• SVG Path Architecture Validation: Asserted SideBarBody.test.tsx accurately maps Vite SVG module imports onto the node endpoints, explicitly confirming no hardcoded static strings remain.
• Placeholder UI Logic (SideBarTree.test.tsx): Engineered regression tests targeting the fallback "No Records Found" component behavior, actively asserting its structural security and preventing interactive .Mui-selected state injections.
• 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 (for both version data and session data) hold onto stale local payloads accurately.
• Sidebar Search Accessibility Checks (SidebarSearchInput.test.tsx): Confirmed existing strict coverage for keyboard accessibility, assuring both mouse clicks and <Enter>/<Space> inputs accurately clear the sidebar search filter input.

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 network tab remains quiet, and redundant module APIs are no longer firing.
• Automated Build, Lint & Typecheck: Executed npm run typecheck, npm run lint, and full Jest test runner (195 passed test suites, 4,887 passed tests) locally with 0 errors.

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

CC. @mneethiraj

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

Rebase onto latest master; resolve conflict with #764 disabled-search + SCSS migration

Done!