Fix expand sidebar scrolling

Changelog.md

@@ -8,6 +8,8 @@
   (<https://github.com/aws/graph-explorer/pull/434>)
 - Added caching and retries to node expansion and neighbor counts
   (<https://github.com/aws/graph-explorer/pull/434>)
+- Improved scrolling behavior in expand sidebar
+  (<https://github.com/aws/graph-explorer/pull/436>)
 
 **Bug Fixes and Minor Changes**
 

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 {

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;

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 (
     <div
@@ -28,7 +39,7 @@ const NeighborsList = ({
       <div className={pfx("title")}>
         Neighbors ({vertex.data.neighborsCount})
       </div>
-      {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 = ({
           </div>
         );
       })}
+
+      {hasMore ? (
+        <Button variant="text" onPress={() => setShowMore(prev => !prev)}>
+          {showMore
+            ? `Hide ${extraCount} additional neighbors`
+            : `Show ${extraCount} additional neighbors`}
+        </Button>
+      ) : null}
     </div>
   );
 };