diff --git a/Changelog.md b/Changelog.md index 77d44668a..6132098e3 100644 --- a/Changelog.md +++ b/Changelog.md @@ -8,6 +8,8 @@ () - Added caching and retries to node expansion and neighbor counts () +- Improved scrolling behavior in expand sidebar + () **Bug Fixes and Minor Changes** diff --git a/packages/graph-explorer/src/modules/NodeExpand/NodeExpandContent.styles.ts b/packages/graph-explorer/src/modules/NodeExpand/NodeExpandContent.styles.ts index be321d463..e5254f0ef 100644 --- a/packages/graph-explorer/src/modules/NodeExpand/NodeExpandContent.styles.ts +++ b/packages/graph-explorer/src/modules/NodeExpand/NodeExpandContent.styles.ts @@ -8,6 +8,7 @@ const defaultStyles = height: 100%; display: flex; flex-direction: column; + overflow-y: scroll; background: ${theme.palette.background.default}; .${pfx}-empty-panel-state { diff --git a/packages/graph-explorer/src/modules/common/NeighborsList/NeighborsList.styles.ts b/packages/graph-explorer/src/modules/common/NeighborsList/NeighborsList.styles.ts index 1b26c44c3..9d726f6a7 100644 --- a/packages/graph-explorer/src/modules/common/NeighborsList/NeighborsList.styles.ts +++ b/packages/graph-explorer/src/modules/common/NeighborsList/NeighborsList.styles.ts @@ -10,8 +10,6 @@ const defaultStyles = padding: ${theme.spacing["4x"]}; gap: ${theme.spacing["2x"]}; border-bottom: solid 1px ${theme.palette.divider}; - height: 30%; - overflow: auto; .${pfx}-title { font-weight: bold; diff --git a/packages/graph-explorer/src/modules/common/NeighborsList/NeighborsList.tsx b/packages/graph-explorer/src/modules/common/NeighborsList/NeighborsList.tsx index 036bde502..88ce852c0 100644 --- a/packages/graph-explorer/src/modules/common/NeighborsList/NeighborsList.tsx +++ b/packages/graph-explorer/src/modules/common/NeighborsList/NeighborsList.tsx @@ -1,9 +1,16 @@ import { cx } from "@emotion/css"; import { Vertex } from "../../../@types/entities"; -import { Chip, Tooltip, VertexIcon, VisibleIcon } from "../../../components"; +import { + Button, + Chip, + Tooltip, + VertexIcon, + VisibleIcon, +} from "../../../components"; import { useWithTheme, withClassNamePrefix } from "../../../core"; import useNeighborsOptions from "../../../hooks/useNeighborsOptions"; import defaultStyles from "./NeighborsList.styles"; +import { useState } from "react"; export type NeighborsListProps = { classNamePrefix?: string; @@ -17,6 +24,10 @@ const NeighborsList = ({ const styleWithTheme = useWithTheme(); const pfx = withClassNamePrefix(classNamePrefix); const neighborsOptions = useNeighborsOptions(vertex); + const [showMore, setShowMore] = useState(false); + const maxStartingItems = 5; + const hasMore = neighborsOptions.length > maxStartingItems; + const extraCount = hasMore ? neighborsOptions.length - maxStartingItems : 0; return (
Neighbors ({vertex.data.neighborsCount})
- {neighborsOptions.map(op => { + {neighborsOptions.slice(0, showMore ? undefined : 5).map(op => { const neighborsInView = vertex.data.neighborsCountByType[op.value] - (vertex.data.__unfetchedNeighborCounts?.[op.value] ?? 0); @@ -62,6 +73,14 @@ const NeighborsList = ({ ); })} + + {hasMore ? ( + + ) : null} ); };