Minor changes

.vscode/launch.json

@@ -11,10 +11,12 @@
       "skipFiles": ["<node_internals>/**"],
       "runtimeExecutable": "sh",
       "program": "${workspaceFolder}/packages/graph-explorer/node_modules/.bin/jest",
+      "cwd": "${workspaceFolder}",
       "args": [
         "${relativeFile}",
         "--coverage=false",
-        "--config=${workspaceFolder}/packages/graph-explorer/jest.config.ts"
+        "--config=${workspaceFolder}/packages/graph-explorer/jest.config.ts",
+        "--runInBand"
       ],
       "console": "integratedTerminal",
       "internalConsoleOptions": "openOnFirstSessionStart"

Changelog.md

@@ -6,6 +6,8 @@
 
 **Bug Fixes and Minor Changes**
 
+- Fix edge case where node badges are stale
+  (<https://github.com/aws/graph-explorer/pull/427>)
 - Fixed issue with Gremlin Server 3.7
   (<https://github.com/aws/graph-explorer/pull/411>)
 - Fixed server starting log message

packages/graph-explorer/src/components/Graph/hooks/useRenderBadges.ts

@@ -120,13 +120,11 @@ const useRenderBadges = <TNodeData extends VertexData = VertexData>({
             return;
           }
 
-          const badgeGetter = getNodeBadges;
           const nodeBoundingBox = getNodeBoundingBox(node);
-          const badges =
-            badgeGetter?.(nodeData, nodeBoundingBox, {
-              context,
-              zoomLevel,
-            }) || [];
+          const badges = getNodeBadges(nodeData, nodeBoundingBox, {
+            context,
+            zoomLevel,
+          });
           badges.forEach(badge => {
             if (!badge) {
               return;
@@ -136,7 +134,13 @@ const useRenderBadges = <TNodeData extends VertexData = VertexData>({
           });
         });
       };
+
+      // Run once to render the initial badges and when the dependencies change
+      onCanvasResize();
+
+      // Wire up the resize event to re-render the badges
       cy.on("render", onCanvasResize);
+
       return () => {
         cy.off("render", onCanvasResize);
       };

packages/graph-explorer/src/connector/gremlin/templates/keywordSearchTemplate.test.ts

@@ -88,6 +88,16 @@ describe("Gremlin > keywordSearchTemplate", () => {
     );
   });
 
+  it("Should return a template for a single vertex and paged", () => {
+    const template = keywordSearchTemplate({
+      vertexTypes: ["airport"],
+      offset: 25,
+      limit: 25,
+    });
+
+    expect(template).toBe('g.V().hasLabel("airport").range(25,50)');
+  });
+
   it("Should return a template with an offset and limit", () => {
     const template = keywordSearchTemplate({
       searchTerm: "JFK",

packages/graph-explorer/src/hooks/useEntities.ts

@@ -28,14 +28,9 @@ type ProcessedEntities = {
   edges: Edge[];
 };
 
-type UseEntitiesProps = {
-  originalEntities: ProcessedEntities;
-};
-
 const useEntities = ({ disableFilters }: { disableFilters?: boolean } = {}): [
   ProcessedEntities,
   SetterOrUpdater<Entities>,
-  UseEntitiesProps,
 ] => {
   const config = useConfiguration();
   const filteredNodesIds = useRecoilValue(nodesFilteredIdsAtom);
@@ -156,13 +151,7 @@ const useEntities = ({ disableFilters }: { disableFilters?: boolean } = {}): [
     };
   }, [filteredEdgesIds, filteredEntitiesByGlobalFilters, filteredNodesIds]);
 
-  return [
-    filteredEntities,
-    setEntities,
-    {
-      originalEntities: filteredEntitiesByGlobalFilters,
-    },
-  ];
+  return [filteredEntities, setEntities];
 };
 
 export default useEntities;

packages/graph-explorer/src/hooks/useExpandNode.ts

@@ -17,8 +17,9 @@ const useExpandNode = () => {
 
       if (!result || !result.vertices.length) {
         enqueueNotification({
-          title: "No Results",
-          message: "Your search has returned no results",
+          title: "No more neighbors",
+          message:
+            "This vertex has been fully expanded or it does not have connections",
         });
         return;
       }

packages/graph-explorer/src/modules/GraphViewer/GraphViewer.tsx

@@ -142,7 +142,7 @@ export default function GraphViewer({
   const pfx = withClassNamePrefix("ft");
 
   const graphRef = useRef<GraphRef | null>(null);
-  const [entities] = useEntities();
+  const [entities, setEntities] = useEntities();
   const { dropAreaRef, isOver, canDrop } = useNodeDrop();
 
   const [nodesSelectedIds, setNodesSelectedIds] =
@@ -228,7 +228,6 @@ export default function GraphViewer({
   );
 
   const [layout, setLayout] = useState("F_COSE");
-  const [, setEntities] = useEntities();
   const onClearCanvas = useCallback(() => {
     setEntities({
       nodes: [],

packages/graph-explorer/src/modules/GraphViewer/useNodeBadges.ts

@@ -30,14 +30,15 @@ const useNodeBadges = () => {
   return useCallback(
     (outOfFocusIds: Set<string>): BadgeRenderer =>
       (nodeData, boundingBox, { zoomLevel }) => {
+        // Ensure we have the node name and title
+        const name = nodesCurrentNames[nodeData.id]?.name ?? "";
+        const title = nodesCurrentNames[nodeData.id]?.title ?? "";
+
         return [
           {
-            text: nodesCurrentNames[nodeData.id].name,
+            text: name,
             hidden: zoomLevel === "small" || outOfFocusIds.has(nodeData.id),
-            title:
-              zoomLevel === "large"
-                ? nodesCurrentNames[nodeData.id].title
-                : undefined,
+            title: zoomLevel === "large" ? title : undefined,
             maxWidth: zoomLevel === "large" ? 80 : 50,
             anchor: "center",
             fontSize: 7,