hide orphans node when view options are changing

Author: william-schlegel

packages/app-builder/src/components/Graph/GraphImpl.tsx

@@ -25,7 +25,7 @@ import {
   withBestHandles,
 } from './GraphComponents';
 import { layoutGraphElements } from './layout-graph';
-import { toFlatFlowElements } from './utils';
+import { reachableNodeIds, toFlatFlowElements } from './utils';
 import '@xyflow/react/dist/style.css';
 
 export { layoutGraphElements };
@@ -89,10 +89,22 @@ function applyVisibilityFilters(
   nodes: GraphRfNode[],
   edges: GraphRfEdge[],
   filters: VisibilityFilters,
+  startKey: string,
 ): { nodes: GraphRfNode[]; edges: GraphRfEdge[] } {
-  const visibleNodes = nodes.filter((node) => isNodeVisible(node, filters));
+  const typeVisibleNodes = nodes.filter((node) => isNodeVisible(node, filters));
+  const typeVisibleIds = new Set(typeVisibleNodes.map((node) => node.id));
+  const typeVisibleEdges = edges.filter((edge) => typeVisibleIds.has(edge.source) && typeVisibleIds.has(edge.target));
+
+  // Drop nodes disconnected from the start after type/attribute filters
+  // (e.g. children of a hidden company).
+  const reachable = reachableNodeIds(
+    typeVisibleNodes.map((node) => node.id),
+    typeVisibleEdges,
+    startKey,
+  );
+  const visibleNodes = typeVisibleNodes.filter((node) => reachable.has(node.id));
   const visibleIds = new Set(visibleNodes.map((node) => node.id));
-  const visibleEdges = edges.filter((edge) => visibleIds.has(edge.source) && visibleIds.has(edge.target));
+  const visibleEdges = typeVisibleEdges.filter((edge) => visibleIds.has(edge.source) && visibleIds.has(edge.target));
   return { nodes: visibleNodes, edges: visibleEdges };
 }
 
@@ -108,11 +120,16 @@ export function GraphImpl({ data, dataModel, maxExplorationHops = 0 }: GraphImpl
   );
 
   const filteredLayout = useMemo(() => {
-    const filtered = applyVisibilityFilters(flatGraph.nodes, flatGraph.edges, {
-      showPersons,
-      showCompanies,
-      attributes,
-    });
+    const filtered = applyVisibilityFilters(
+      flatGraph.nodes,
+      flatGraph.edges,
+      {
+        showPersons,
+        showCompanies,
+        attributes,
+      },
+      flatGraph.startKey,
+    );
     return layoutGraphElements(filtered.nodes, filtered.edges, flatGraph.startKey);
   }, [flatGraph, showPersons, showCompanies, attributes]);
 

packages/app-builder/src/components/Graph/utils.ts

@@ -168,15 +168,11 @@ export function toFlatFlowElements(
   return { nodes, edges, startKey };
 }
 
-/**
- * BFS spanning-tree edges from `startKey` (parent → child) for Dagre ranking.
- * Handles cycles by only recording the first discovery edge.
- */
-export function bfsSpanningTreeEdges(
+/** Undirected adjacency for the given node ids and edges. */
+function buildUndirectedIdAdjacency(
   nodeIds: string[],
   edges: Array<{ source: string; target: string }>,
-  startKey: string,
-): Array<{ source: string; target: string }> {
+): Map<string, string[]> {
   const idSet = new Set(nodeIds);
   const adj = new Map<string, string[]>();
   for (const id of nodeIds) {
@@ -187,10 +183,52 @@ export function bfsSpanningTreeEdges(
     adj.get(edge.source)!.push(edge.target);
     adj.get(edge.target)!.push(edge.source);
   }
+  return adj;
+}
 
+/**
+ * Node ids reachable from `startKey` via undirected edges.
+ * Falls back to the first node id when `startKey` is missing.
+ */
+export function reachableNodeIds(
+  nodeIds: string[],
+  edges: Array<{ source: string; target: string }>,
+  startKey: string,
+): Set<string> {
+  const idSet = new Set(nodeIds);
+  const root = idSet.has(startKey) ? startKey : (nodeIds[0] ?? '');
+  if (!root) return new Set();
+
+  const adj = buildUndirectedIdAdjacency(nodeIds, edges);
+  const visited = new Set<string>([root]);
+  const queue = [root];
+
+  while (queue.length > 0) {
+    const cur = queue.shift()!;
+    for (const nxt of adj.get(cur) ?? []) {
+      if (visited.has(nxt)) continue;
+      visited.add(nxt);
+      queue.push(nxt);
+    }
+  }
+
+  return visited;
+}
+
+/**
+ * BFS spanning-tree edges from `startKey` (parent → child) for Dagre ranking.
+ * Handles cycles by only recording the first discovery edge.
+ */
+export function bfsSpanningTreeEdges(
+  nodeIds: string[],
+  edges: Array<{ source: string; target: string }>,
+  startKey: string,
+): Array<{ source: string; target: string }> {
+  const idSet = new Set(nodeIds);
   const root = idSet.has(startKey) ? startKey : (nodeIds[0] ?? '');
   if (!root) return [];
 
+  const adj = buildUndirectedIdAdjacency(nodeIds, edges);
   const tree: Array<{ source: string; target: string }> = [];
   const visited = new Set<string>([root]);
   const queue = [root];