Brijesh619 commented on code in PR #688:
URL: https://github.com/apache/atlas/pull/688#discussion_r3543910053
##########
dashboard/src/views/SideBar/SideBarBody.tsx:
##########
@@ -337,10 +672,12 @@ const SideBarBody = (props: {
className="sidebar-wrapper"
sx={{
flex: 1,
- overflow: "hidden auto",
- paddingBottom: "0px", // Account for bottom toggle button
+ overflowX: "hidden",
+ overflowY: "auto",
+ paddingBottom: "48px", // Added space so it doesn't touch the
bottom toggle button
...(open == false && {
overflow: "hidden",
+ display: "none",
Review Comment:
Resolved! The expanded sidebar trees are now conditionally rendered and
completely unmount when the sidebar is collapsed, preventing duplicate
component instances and Redux subscriptions.
##########
dashboard/src/views/SideBar/SideBarBody.tsx:
##########
@@ -246,38 +380,227 @@ const SideBarBody = (props: {
backgroundColor: "#034858",
}}
>
- {/* Collapsed sidebar logo */}
+ {/* Collapsed sidebar logo and module icons */}
{!open && (
- <div
- style={{
- width: "100%",
- textAlign: "center",
- paddingLeft: "12px",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- minHeight: "64px",
- cursor: "pointer",
- boxSizing: "border-box",
- }}
- role="button"
- tabIndex={0}
- aria-label="Atlas home — refresh dashboard"
- onClick={handleAtlasLogoClick}
- onKeyDown={handleAtlasLogoKeyDown}
- data-cy="apache-atlas-logo-collapsed"
+ <Stack
+ alignItems="center"
+ sx={{ width: "100%", flex: 1, minHeight: 0, overflowY: "auto",
overflowX: "hidden", boxSizing: "border-box", pb: 2, '&::-webkit-scrollbar': {
display: 'none' }, msOverflowStyle: 'none', scrollbarWidth: 'none' }}
>
- <img
- src={apacheAtlasLogo}
- alt="Apache Atlas logo"
+ <div
style={{
- width: "29px",
- height: "auto",
- maxWidth: "100%",
- display: "block",
+ width: "100%",
+ textAlign: "center",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ minHeight: "64px",
+ cursor: "pointer",
+ boxSizing: "border-box",
+ marginBottom: "1rem",
}}
- />
- </div>
+ role="button"
+ tabIndex={0}
+ aria-label="Atlas home — refresh dashboard"
+ onClick={handleAtlasLogoClick}
+ onKeyDown={handleAtlasLogoKeyDown}
+ data-cy="apache-atlas-logo-collapsed"
+ >
+ <img
+ src={apacheAtlasLogo}
+ alt="Apache Atlas logo"
+ style={{
+ width: "29px",
+ height: "auto",
+ maxWidth: "100%",
+ display: "block",
+ }}
+ />
+ </div>
+
+ {/* Module Icons for Mini Drawer */}
+ <Stack alignItems="stretch" gap="1rem" sx={{ width: "100%" }}>
+ {/* Search */}
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: "4px solid transparent", borderRight: "4px solid transparent",
background: "transparent" }}>
+ <Tooltip title="Search" placement="right">
+ <IconButton onClick={() => setOpen(true)} sx={{ '&:hover':
{ background: 'rgba(255, 255, 255, 0.1)' } }}>
+ <img src="/img/sidebar-icons/icon-search.svg" style={{
width: "20px", height: "20px", opacity: 1 }} alt="search" />
+ </IconButton>
+ </Tooltip>
+ </Box>
+
+ {/* Entities */}
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: isEntitiesActive ? "4px solid #2ccebb" : "4px solid transparent",
borderRight: "4px solid transparent", background: isEntitiesActive ? "rgba(255,
255, 255, 0.08)" : "transparent" }}>
+ <Tooltip title="Entities" placement="right">
+ <IconButton onClick={(e) => handlePopoverOpen(e,
"entities")} sx={{ '&:hover': { background: 'rgba(255, 255, 255, 0.1)' } }}>
+ <img src="/img/sidebar-icons/icon-entities.svg" style={{
width: "20px", height: "20px", opacity: 1 }} alt="entities" />
+ </IconButton>
+ </Tooltip>
+ </Box>
+ <Popover
Review Comment:
Resolved. Instead of creating multiple SidebarTreePopover instances, I
reduced the ~160 lines × 6 down to a single reusable Popover component. I
created a modules configuration array and now map over it to render the
CollapsedModuleIcon buttons dynamically. The single shared Popover then
dynamically renders the correct lazy tree slot based on the active state. This
eliminated all duplicate markup and makes adding future modules completely
configuration-driven.
##########
dashboard/src/views/SideBar/SideBarBody.tsx:
##########
@@ -246,38 +380,227 @@ const SideBarBody = (props: {
backgroundColor: "#034858",
}}
>
- {/* Collapsed sidebar logo */}
+ {/* Collapsed sidebar logo and module icons */}
{!open && (
- <div
- style={{
- width: "100%",
- textAlign: "center",
- paddingLeft: "12px",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- minHeight: "64px",
- cursor: "pointer",
- boxSizing: "border-box",
- }}
- role="button"
- tabIndex={0}
- aria-label="Atlas home — refresh dashboard"
- onClick={handleAtlasLogoClick}
- onKeyDown={handleAtlasLogoKeyDown}
- data-cy="apache-atlas-logo-collapsed"
+ <Stack
+ alignItems="center"
+ sx={{ width: "100%", flex: 1, minHeight: 0, overflowY: "auto",
overflowX: "hidden", boxSizing: "border-box", pb: 2, '&::-webkit-scrollbar': {
display: 'none' }, msOverflowStyle: 'none', scrollbarWidth: 'none' }}
>
- <img
- src={apacheAtlasLogo}
- alt="Apache Atlas logo"
+ <div
style={{
- width: "29px",
- height: "auto",
- maxWidth: "100%",
- display: "block",
+ width: "100%",
+ textAlign: "center",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ minHeight: "64px",
+ cursor: "pointer",
+ boxSizing: "border-box",
+ marginBottom: "1rem",
}}
- />
- </div>
+ role="button"
+ tabIndex={0}
+ aria-label="Atlas home — refresh dashboard"
+ onClick={handleAtlasLogoClick}
+ onKeyDown={handleAtlasLogoKeyDown}
+ data-cy="apache-atlas-logo-collapsed"
+ >
+ <img
+ src={apacheAtlasLogo}
+ alt="Apache Atlas logo"
+ style={{
+ width: "29px",
+ height: "auto",
+ maxWidth: "100%",
+ display: "block",
+ }}
+ />
+ </div>
+
+ {/* Module Icons for Mini Drawer */}
+ <Stack alignItems="stretch" gap="1rem" sx={{ width: "100%" }}>
+ {/* Search */}
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: "4px solid transparent", borderRight: "4px solid transparent",
background: "transparent" }}>
+ <Tooltip title="Search" placement="right">
+ <IconButton onClick={() => setOpen(true)} sx={{ '&:hover':
{ background: 'rgba(255, 255, 255, 0.1)' } }}>
+ <img src="/img/sidebar-icons/icon-search.svg" style={{
width: "20px", height: "20px", opacity: 1 }} alt="search" />
+ </IconButton>
+ </Tooltip>
+ </Box>
+
+ {/* Entities */}
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: isEntitiesActive ? "4px solid #2ccebb" : "4px solid transparent",
borderRight: "4px solid transparent", background: isEntitiesActive ? "rgba(255,
255, 255, 0.08)" : "transparent" }}>
+ <Tooltip title="Entities" placement="right">
+ <IconButton onClick={(e) => handlePopoverOpen(e,
"entities")} sx={{ '&:hover': { background: 'rgba(255, 255, 255, 0.1)' } }}>
+ <img src="/img/sidebar-icons/icon-entities.svg" style={{
width: "20px", height: "20px", opacity: 1 }} alt="entities" />
+ </IconButton>
+ </Tooltip>
+ </Box>
+ <Popover
+ marginThreshold={64}
+ open={activePopover === "entities"}
+ anchorEl={popoverAnchor}
+ onClose={handlePopoverClose}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+ PaperProps={{ sx: { ml: 1, width: 320, maxHeight:
'calc(100vh - 250px) !important', display: 'flex', flexDirection: 'column',
backgroundColor: '#034858', borderRadius: 1, boxShadow: 6, pb: 2, overflow:
'visible', '&::before': { content: '""', display: 'block', position:
'absolute', top: 14, left: -8, width: 0, height: 0, borderTop: '8px solid
transparent', borderBottom: '8px solid transparent', borderRight: '8px solid
#034858' } } }}
+ >
+ {renderPopoverSearch()}
+ <div style={{ flex: 1, overflow: 'auto' }}>
+ <Suspense fallback={<TreeSkeletonLoader count={2} />}>
+ <div className="sidebar-treeview-container" style={{
padding: '8px' }}>
+ <EntitiesTree sideBarOpen={true}
searchTerm={searchTerm} isPopover={true} />
+ </div>
+ </Suspense>
+
+ </div>
+ </Popover>
+
+ {/* Classifications */}
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: isClassificationActive ? "4px solid #2ccebb" : "4px solid
transparent", borderRight: "4px solid transparent", background:
isClassificationActive ? "rgba(255, 255, 255, 0.08)" : "transparent" }}>
+ <Tooltip title="Classifications" placement="right">
+ <IconButton onClick={(e) => handlePopoverOpen(e,
"classification")} sx={{ '&:hover': { background: 'rgba(255, 255, 255, 0.1)' }
}}>
+ <img src="/img/sidebar-icons/icon-classifications.svg"
style={{ width: "20px", height: "20px", opacity: 1 }} alt="classifications" />
+ </IconButton>
+ </Tooltip>
+ </Box>
+ <Popover
+ marginThreshold={64}
+ open={activePopover === "classification"}
+ anchorEl={popoverAnchor}
+ onClose={handlePopoverClose}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+ PaperProps={{ sx: { ml: 1, width: 320, maxHeight:
'calc(100vh - 250px) !important', display: 'flex', flexDirection: 'column',
backgroundColor: '#034858', borderRadius: 1, boxShadow: 6, pb: 2, overflow:
'visible', '&::before': { content: '""', display: 'block', position:
'absolute', top: 14, left: -8, width: 0, height: 0, borderTop: '8px solid
transparent', borderBottom: '8px solid transparent', borderRight: '8px solid
#034858' } } }}
+ >
+ {renderPopoverSearch()}
+ <div style={{ flex: 1, overflow: 'auto' }}>
+ <Suspense fallback={<TreeSkeletonLoader count={2} />}>
+ <div className="sidebar-treeview-container" style={{
padding: '8px' }}>
+ <ClassificationTree sideBarOpen={true}
searchTerm={searchTerm} isPopover={true} />
+ </div>
+ </Suspense>
+
+ </div>
+ </Popover>
+
+ {/* Glossary */}
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: isGlossaryActive ? "4px solid #2ccebb" : "4px solid transparent",
borderRight: "4px solid transparent", background: isGlossaryActive ? "rgba(255,
255, 255, 0.08)" : "transparent" }}>
+ <Tooltip title="Glossary" placement="right">
+ <IconButton onClick={(e) => handlePopoverOpen(e,
"glossary")} sx={{ '&:hover': { background: 'rgba(255, 255, 255, 0.1)' } }}>
+ <img src="/img/sidebar-icons/icon-glossary.svg" style={{
width: "20px", height: "20px", opacity: 1 }} alt="glossary" />
+ </IconButton>
+ </Tooltip>
+ </Box>
+ <Popover
+ marginThreshold={64}
+ open={activePopover === "glossary"}
+ anchorEl={popoverAnchor}
+ onClose={handlePopoverClose}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+ PaperProps={{ sx: { ml: 1, width: 320, maxHeight:
'calc(100vh - 250px) !important', display: 'flex', flexDirection: 'column',
backgroundColor: '#034858', borderRadius: 1, boxShadow: 6, pb: 2, overflow:
'visible', '&::before': { content: '""', display: 'block', position:
'absolute', top: 14, left: -8, width: 0, height: 0, borderTop: '8px solid
transparent', borderBottom: '8px solid transparent', borderRight: '8px solid
#034858' } } }}
+ >
+ {renderPopoverSearch()}
+ <div style={{ flex: 1, overflow: 'auto' }}>
+ <Suspense fallback={<TreeSkeletonLoader count={2} />}>
+ <div className="sidebar-treeview-container" style={{
padding: '8px' }}>
+ <GlossaryTree sideBarOpen={true}
searchTerm={searchTerm} isPopover={true} />
+ </div>
+ </Suspense>
+
+ </div>
+ </Popover>
+
+ {/* Business Metadata */}
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: isBusinessMetadataActive ? "4px solid #2ccebb" : "4px solid
transparent", borderRight: "4px solid transparent", background:
isBusinessMetadataActive ? "rgba(255, 255, 255, 0.08)" : "transparent" }}>
+ <Tooltip title="Business Metadata" placement="right">
+ <IconButton onClick={(e) => handlePopoverOpen(e,
"businessMetadata")} sx={{ '&:hover': { background: 'rgba(255, 255, 255, 0.1)'
} }}>
+ <img src="/img/sidebar-icons/icon-business-metadata.svg"
style={{ width: "20px", height: "20px", opacity: 1 }} alt="business metadata" />
+ </IconButton>
+ </Tooltip>
+ </Box>
+ <Popover
+ marginThreshold={64}
+ open={activePopover === "businessMetadata"}
+ anchorEl={popoverAnchor}
+ onClose={handlePopoverClose}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+ PaperProps={{ sx: { ml: 1, width: 320, maxHeight:
'calc(100vh - 250px) !important', display: 'flex', flexDirection: 'column',
backgroundColor: '#034858', borderRadius: 1, boxShadow: 6, pb: 2, overflow:
'visible', '&::before': { content: '""', display: 'block', position:
'absolute', top: 14, left: -8, width: 0, height: 0, borderTop: '8px solid
transparent', borderBottom: '8px solid transparent', borderRight: '8px solid
#034858' } } }}
+ >
+ {renderPopoverSearch()}
+ <div style={{ flex: 1, overflow: 'auto' }}>
+ <Suspense fallback={<TreeSkeletonLoader count={2} />}>
+ <div className="sidebar-treeview-container" style={{
padding: '8px' }}>
+ <BusinessMetadataTree sideBarOpen={true}
searchTerm={searchTerm} isPopover={true} />
+ </div>
+ </Suspense>
+
+ </div>
+ </Popover>
+
+ {/* Relationships */}
+ {relationshipSearch && (
+ <>
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: isRelationshipActive ? "4px solid #2ccebb" : "4px solid
transparent", background: isRelationshipActive ? "rgba(255, 255, 255, 0.08)" :
"transparent" }}>
+ <Tooltip title="Relationships" placement="right">
+ <IconButton onClick={(e) => handlePopoverOpen(e,
"relationships")} sx={{ color: isRelationshipActive ? "white" : "rgba(255, 255,
255, 0.6)", '&:hover': { color: 'white', background: 'rgba(255, 255, 255, 0.1)'
} }}>
Review Comment:
Resolved.
Replaced the generic MUI relationship icon with a custom SVG
(icon-relationships.svg) that uses a network/hub path, and added it to the
expanded sidebar header for consistency.
Fixed the collapsed sidebar CSS so the module icons have a visible scrollbar
and don't get hidden behind the toggle button.
Fixed the popover height overflowing the bottom of the screen by dynamically
calculating the maxHeight based on the exact pixel distance from the clicked
anchor icon to the bottom of the viewport (leaving a 24px gap).
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
