refactor(edges): pass aggregate metadata as DefaultAggregatedEdge props

Let apps supply role, count, and bidirectional leaf ids instead of reading
a fixed getData() shape inside the toolkit component.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: jpinsonneau

packages/demo-app-ts/src/demos/aggregateEdges/AggregateEdge.tsx

@@ -1,27 +1,39 @@
 import { FunctionComponent } from 'react';
 import { observer } from 'mobx-react';
-import { DefaultAggregatedEdge, GraphElement, WithSelectionProps } from '@patternfly/react-topology';
+import { AggregateEdgeRole, DefaultAggregatedEdge, GraphElement, WithSelectionProps } from '@patternfly/react-topology';
 import { useAggregateEdgesDemo } from './DemoContext';
 
 type AggregateEdgeProps = {
   element: GraphElement;
 } & WithSelectionProps;
 
 /**
- * Demo wrapper around DefaultAggregatedEdge: supplies snapGeneration after
- * collapse and optional label/metric tags from the demo toolbar.
+ * Demo wrapper around DefaultAggregatedEdge: maps model data + demo toolbar
+ * options into explicit props (apps can derive these differently).
  */
 const AggregateEdge: FunctionComponent<AggregateEdgeProps> = observer(({ element, selected }) => {
   const { snapGeneration, showEdgeLabels, showMetricTags } = useAggregateEdgesDemo();
+  const data = element.getData() || {};
+  const role = data.role as AggregateEdgeRole | undefined;
+  const count = data.count as number | undefined;
+  const bidirectional = data.bidirectional as boolean | undefined;
+  const forwardEdgeIds = data.forwardEdgeIds as string[] | undefined;
+  const reverseEdgeIds = data.reverseEdgeIds as string[] | undefined;
+
   const edgeLabel = showEdgeLabels ? element.getLabel() : undefined;
-  const metricTag = showMetricTags ? (element.getData()?.tag as string | undefined) : undefined;
+  const metricTag = showMetricTags ? (data.tag as string | undefined) : undefined;
   // Only override the default count tag when the demo toolbar opts into labels/metrics.
   const tag = edgeLabel || metricTag;
 
   return (
     <DefaultAggregatedEdge
       element={element}
       selected={selected}
+      role={role}
+      count={count}
+      bidirectional={bidirectional}
+      forwardEdgeIds={forwardEdgeIds}
+      reverseEdgeIds={reverseEdgeIds}
       snapGeneration={snapGeneration}
       {...(tag ? { tag } : {})}
     />

packages/module/src/components/edges/DefaultAggregatedEdge.tsx

@@ -10,6 +10,7 @@ import {
   isEdge,
   isNode
 } from '../../types';
+import { AggregateEdgeRole } from '../../utils/createAggregateEdges';
 import { SELECTION_STATE } from '../../behavior';
 import { useEventListener } from '../../hooks';
 import DefaultEdge from './DefaultEdge';
@@ -32,6 +33,22 @@ export interface DefaultAggregatedEdgeProps {
   element: GraphElement;
   /** Flag indicating if the element is selected. Part of WithSelectionProps */
   selected?: boolean;
+  /**
+   * Segment role (`exit` / `bridge` / `entry`). Typically from `createAggregateEdges`
+   * edge data, but apps may supply an equivalent.
+   */
+  role?: AggregateEdgeRole | string;
+  /**
+   * Number of leaf edges folded into this segment. Used for the default bridge tag
+   * when {@link DefaultAggregatedEdgeProps.tag} is omitted.
+   */
+  count?: number;
+  /** When true, the bridge shows terminals on both ends. */
+  bidirectional?: boolean;
+  /** Leaf edge ids flowing in the bridge's stored orientation. */
+  forwardEdgeIds?: string[];
+  /** Leaf edge ids flowing opposite the bridge orientation. */
+  reverseEdgeIds?: string[];
   /**
    * Bump after structural changes (e.g. group collapse / model rebuild) that leave
    * fixed endpoints stale without enough bound change to re-trigger snap.
@@ -58,11 +75,26 @@ export interface DefaultAggregatedEdgeProps {
  * - Multi-segment path selection by shared `aggregatedEdgeIds`
  * - Bidirectional bridge terminals, muting the opposite arrow when selection is one-way
  *
+ * Aggregate metadata (`role`, `count`, `bidirectional`, …) is passed as props so apps
+ * can derive or override them instead of reading a fixed `element.getData()` shape.
+ *
  * Note: path selection updates `SELECTION_STATE` directly. Prefer `withSelection()` for the
  * `selected` prop only — do not rely on its `onSelect` (it would collapse the path to one id).
  */
 const DefaultAggregatedEdge: FunctionComponent<DefaultAggregatedEdgeProps> = observer(
-  ({ element, selected, snapGeneration = 0, tag: tagProp, className, children }) => {
+  ({
+    element,
+    selected,
+    role,
+    count,
+    bidirectional,
+    forwardEdgeIds,
+    reverseEdgeIds,
+    snapGeneration = 0,
+    tag: tagProp,
+    className,
+    children
+  }) => {
     const edge = isEdge(element) ? (element as Edge) : null;
     const [layoutSnapGeneration, setLayoutSnapGeneration] = useState(0);
 
@@ -80,9 +112,7 @@ const DefaultAggregatedEdge: FunctionComponent<DefaultAggregatedEdgeProps> = obs
     // Clear this edge's fixed endpoints and force-resnap when Cola (etc.) finishes.
     // Mid-layout snaps often leave stubs/bridges pointing at stale hulls.
     useEventListener(GRAPH_LAYOUT_END_EVENT, onLayoutEnd);
-    const data = edge?.getData() || {};
-    const role = data.role as string | undefined;
-    const count = data.count as number | undefined;
+
     const sourceNode = edge?.getSource();
     const targetNode = edge?.getTarget();
 
@@ -174,7 +204,11 @@ const DefaultAggregatedEdge: FunctionComponent<DefaultAggregatedEdgeProps> = obs
       const selectionState = edge.getController().getState<{ [SELECTION_STATE]?: string[] }>();
       const selectedIds = selectionState[SELECTION_STATE] || [];
       const focusLeaves = getSelectionFocusLeaves(edge, selectedIds);
-      const terminals = getBridgeTerminalPresentation(data, selected, focusLeaves);
+      const terminals = getBridgeTerminalPresentation(
+        { bidirectional, forwardEdgeIds, reverseEdgeIds },
+        selected,
+        focusLeaves
+      );
       startTerminalType = terminals.start;
       endTerminalType = terminals.end;
       if (terminals.muteStart) {

packages/module/src/components/edges/aggregateEdgeUtils.ts

@@ -223,7 +223,11 @@ export const getSelectionFocusLeaves = (edge: Edge, selectedIds: string[]): Set<
 };
 
 export const getBridgeTerminalPresentation = (
-  data: Record<string, unknown>,
+  options: {
+    bidirectional?: boolean;
+    forwardEdgeIds?: string[];
+    reverseEdgeIds?: string[];
+  },
   selected: boolean | undefined,
   focusLeaves: Set<string>
 ): {
@@ -232,7 +236,7 @@ export const getBridgeTerminalPresentation = (
   muteStart: boolean;
   muteEnd: boolean;
 } => {
-  const bidirectional = !!data.bidirectional;
+  const bidirectional = !!options.bidirectional;
   if (!bidirectional) {
     return {
       start: EdgeTerminalType.none,
@@ -253,8 +257,8 @@ export const getBridgeTerminalPresentation = (
     return both;
   }
 
-  const forwardIds = (data.forwardEdgeIds as string[]) || [];
-  const reverseIds = (data.reverseEdgeIds as string[]) || [];
+  const forwardIds = options.forwardEdgeIds || [];
+  const reverseIds = options.reverseEdgeIds || [];
   const hasForward = forwardIds.some((id) => focusLeaves.has(id));
   const hasReverse = reverseIds.some((id) => focusLeaves.has(id));