feat(edges): aggregate cross-group edges into exit/bridge/entry paths

packages/demo-app-ts/src/Demos.ts

@@ -13,6 +13,7 @@ import { ContextMenus } from './demos/ContextMenus';
 import { TopologyPackage } from './demos/topologyPackageDemo/TopologyPackage';
 import { ComplexGroup } from './demos/Groups';
 import { CollapsibleGroups } from './demos/CollapsibleGroups';
+import { AggregateEdges } from './demos/aggregateEdges/AggregateEdges';
 import { StatusConnectors } from './demos/statusConnectorsDemo/StatusConnectors';
 
 import './Demo.css';
@@ -143,6 +144,11 @@ export const Demos: DemoInterface[] = [
     id: 'collapsible-groups',
     name: 'Collapsible Groups',
     componentType: CollapsibleGroups
+  },
+  {
+    id: 'aggregate-edges',
+    name: 'Aggregate Edges',
+    componentType: AggregateEdges
   }
 ];
 

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

@@ -0,0 +1,46 @@
+import { FunctionComponent } from 'react';
+import { observer } from 'mobx-react';
+import { AggregateEdgeRole, DefaultAggregatedEdge, GraphElement, WithSelectionProps } from '@patternfly/react-topology';
+import { useAggregateEdgesDemo } from './DemoContext';
+
+type AggregateEdgeProps = {
+  element: GraphElement;
+} & WithSelectionProps;
+
+/**
+ * Demo wrapper around DefaultAggregatedEdge: maps model data + demo toolbar
+ * options into explicit props (apps can derive these differently).
+ *
+ * Intentionally omits `onSelect` from `withSelection` so path multi-select from
+ * DefaultAggregatedEdge is not overwritten by single-id selection.
+ */
+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 ? (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 } : {})}
+    />
+  );
+});
+
+export default AggregateEdge;

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

@@ -0,0 +1,208 @@
+import { FunctionComponent, useEffect, useState, useRef } from 'react';
+import { action } from 'mobx';
+import { ToolbarGroup, ToolbarItem, Checkbox } from '@patternfly/react-core';
+import {
+  ColaLayout,
+  DefaultNode,
+  Graph,
+  GraphComponent,
+  GraphElement,
+  isEdge,
+  isNode,
+  Layout,
+  LayoutFactory,
+  ModelKind,
+  SELECTION_EVENT,
+  SelectionEventListener,
+  TopologyView,
+  Visualization,
+  VisualizationProvider,
+  VisualizationSurface,
+  withDragNode,
+  withPanZoom,
+  withSelection,
+  useEventListener,
+  observer
+} from '@patternfly/react-topology';
+import DemoControlBar from '../DemoControlBar';
+import AggregateEdge from './AggregateEdge';
+import AggregateGroup from './AggregateGroup';
+import LabeledDefaultEdge from './LabeledDefaultEdge';
+import { getModel } from './model';
+import { AggregateEdgesDemoModel, AggregateEdgesDemoProvider, useAggregateEdgesDemo } from './DemoContext';
+
+const layoutFactory: LayoutFactory = (_type: string, graph: Graph): Layout | undefined =>
+  new ColaLayout(graph, {
+    layoutOnDrag: false,
+    nodeDistance: 80,
+    // Demo-sized graph: fewer ticks keeps aggregate edge snapping responsive.
+    maxTicks: 200,
+    initialUnconstrainedIterations: 50,
+    initialUserConstraintIterations: 25,
+    initialAllConstraintsIterations: 50
+  });
+
+/** Live Node.isCollapsed() — used only as input to createAggregateEdges. */
+const collectCollapsedIds = (controller: Visualization): Set<string> => {
+  const ids = new Set<string>();
+  controller.getElements().forEach((element: GraphElement) => {
+    if (isNode(element) && element.isGroup() && element.isCollapsed()) {
+      ids.add(element.getId());
+    }
+  });
+  return ids;
+};
+
+/**
+ * Reused bridge/stub elements keep setStartPoint/setEndPoint overrides across collapse.
+ * Clear them so anchors recompute against the new collapsed bounds.
+ */
+const clearAggregateEdgeEndpoints = (controller: Visualization) => {
+  controller.getElements().forEach((element) => {
+    if (!isEdge(element) || element.getType() !== 'aggregate-edge') {
+      return;
+    }
+    element.setStartPoint();
+    element.setEndPoint();
+  });
+};
+
+const applyDemoModel = (
+  controller: Visualization,
+  groupEdges: boolean,
+  opts: { layout?: boolean; merge?: boolean; clearEndpoints?: boolean } = {}
+) => {
+  const { layout = false, merge = true, clearEndpoints = false } = opts;
+  action(() => {
+    // Pass live collapse only for aggregation; getModel strips it before fromModel
+    // so we never re-drive Node.setCollapsed (DefaultGroup already owns that).
+    const model = getModel({
+      groupEdges,
+      collapsedIds: collectCollapsedIds(controller)
+    });
+    controller.fromModel(model, merge);
+    // Only clear on collapse/expand — label/tag toggles are UI-only and must not
+    // clear endpoints (geoKey unchanged → no AggregateEdge snap effect).
+    if (clearEndpoints) {
+      clearAggregateEdgeEndpoints(controller);
+    }
+    if (layout) {
+      controller.getGraph().layout();
+      controller.getGraph().fit(80);
+    }
+  })();
+};
+
+const AggregateEdgesView: FunctionComponent<{ controller: Visualization }> = observer(({ controller }) => {
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const {
+    groupEdges,
+    setGroupEdges,
+    showEdgeLabels,
+    setShowEdgeLabels,
+    showMetricTags,
+    setShowMetricTags,
+    setOnCollapseChange,
+    bumpSnapGeneration
+  } = useAggregateEdgesDemo();
+  const fittedRef = useRef(false);
+  const groupEdgesRef = useRef(groupEdges);
+  groupEdgesRef.current = groupEdges;
+
+  useEventListener<SelectionEventListener>(SELECTION_EVENT, (ids) => {
+    setSelectedIds(ids);
+  });
+
+  useEffect(() => {
+    const isFirstLoad = !fittedRef.current;
+    applyDemoModel(controller, groupEdges, {
+      merge: !isFirstLoad,
+      layout: isFirstLoad
+    });
+    if (isFirstLoad) {
+      fittedRef.current = true;
+    }
+  }, [controller, groupEdges]);
+
+  useEffect(() => {
+    setOnCollapseChange(() => {
+      // Collapse is already applied on the Node by DefaultGroup; rebuild aggregates only.
+      applyDemoModel(controller, groupEdgesRef.current, { merge: true, layout: false, clearEndpoints: true });
+      bumpSnapGeneration();
+    });
+  }, [bumpSnapGeneration, controller, setOnCollapseChange]);
+
+  const viewToolbar = (
+    <ToolbarGroup>
+      <ToolbarItem>
+        <Checkbox
+          id="group-edges"
+          label="Aggregate edges between groups"
+          isChecked={groupEdges}
+          onChange={(_event, checked) => {
+            // Full graph shape change — re-layout + fit.
+            fittedRef.current = false;
+            setGroupEdges(checked);
+          }}
+        />
+      </ToolbarItem>
+      <ToolbarItem>
+        <Checkbox
+          id="edge-labels"
+          label="Show custom edge labels"
+          isChecked={showEdgeLabels}
+          onChange={(_event, checked) => setShowEdgeLabels(checked)}
+        />
+      </ToolbarItem>
+      <ToolbarItem>
+        <Checkbox
+          id="metric-tags"
+          label="Show metric tags (summed Bps)"
+          isChecked={showMetricTags}
+          onChange={(_event, checked) => setShowMetricTags(checked)}
+        />
+      </ToolbarItem>
+    </ToolbarGroup>
+  );
+
+  return (
+    <TopologyView controlBar={<DemoControlBar />} viewToolbar={viewToolbar}>
+      <VisualizationSurface state={{ selectedIds }} />
+    </TopologyView>
+  );
+});
+
+export const AggregateEdges = () => {
+  const [controller] = useState(() => {
+    const vis = new Visualization();
+    vis.registerLayoutFactory(layoutFactory);
+    vis.registerComponentFactory((kind, type) => {
+      if (kind === ModelKind.graph) {
+        return withPanZoom()(GraphComponent);
+      }
+      if (type === 'group') {
+        return withDragNode({ canCancel: false })(withSelection()(AggregateGroup));
+      }
+      if (type === 'aggregate-edge') {
+        return withSelection()(AggregateEdge);
+      }
+      if (kind === ModelKind.node) {
+        return withDragNode({ canCancel: false })(withSelection()(DefaultNode));
+      }
+      if (kind === ModelKind.edge) {
+        return withSelection()(LabeledDefaultEdge);
+      }
+      return undefined;
+    });
+    vis.fromModel(getModel({ groupEdges: false }), false);
+    return vis;
+  });
+
+  return (
+    <AggregateEdgesDemoProvider value={new AggregateEdgesDemoModel()}>
+      <VisualizationProvider controller={controller}>
+        <AggregateEdgesView controller={controller} />
+      </VisualizationProvider>
+    </AggregateEdgesDemoProvider>
+  );
+};

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

@@ -0,0 +1,35 @@
+import { FunctionComponent } from 'react';
+import { observer } from 'mobx-react';
+import { DefaultGroup, GraphElement, WithDragNodeProps, WithSelectionProps } from '@patternfly/react-topology';
+import { useAggregateEdgesDemo } from './DemoContext';
+
+type AggregateGroupProps = {
+  element: GraphElement;
+} & WithDragNodeProps &
+  WithSelectionProps;
+
+const COLLAPSED_SIZE = 60;
+
+/**
+ * Collapsible group built on DefaultGroup so expand/collapse uses the built-in
+ * chrome (rather than external toolbar toggles). Collapse notifies the demo so
+ * aggregate edges can be rebuilt from leaf edges.
+ */
+const AggregateGroup: FunctionComponent<AggregateGroupProps> = observer(({ element, ...rest }) => {
+  const { onCollapseChange } = useAggregateEdgesDemo();
+  const data = element.getData() || {};
+  return (
+    <DefaultGroup
+      element={element}
+      collapsible
+      // Rect outline → RectAnchor (O(1)). Hull SVG sampling is too expensive under Cola ticks.
+      hulledOutline={false}
+      collapsedWidth={data.collapsedWidth ?? COLLAPSED_SIZE}
+      collapsedHeight={data.collapsedHeight ?? COLLAPSED_SIZE}
+      onCollapseChange={onCollapseChange}
+      {...rest}
+    />
+  );
+});
+
+export default AggregateGroup;

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

@@ -0,0 +1,64 @@
+import { createContext, useContext } from 'react';
+import { action, makeObservable, observable } from 'mobx';
+
+export class AggregateEdgesDemoModel {
+  private groupEdgesP: boolean = false;
+  protected showEdgeLabelsP: boolean = false;
+  protected showMetricTagsP: boolean = false;
+  protected snapGenerationP: number = 0;
+  protected onCollapseChangeP: () => void;
+
+  constructor() {
+    makeObservable<
+      AggregateEdgesDemoModel,
+      'groupEdgesP' | 'showEdgeLabelsP' | 'showMetricTagsP' | 'snapGenerationP' | 'onCollapseChangeP'
+    >(this, {
+      groupEdgesP: observable,
+      showEdgeLabelsP: observable,
+      showMetricTagsP: observable,
+      onCollapseChangeP: observable,
+      snapGenerationP: observable,
+      setGroupEdges: action,
+      setShowEdgeLabels: action,
+      setShowMetricTags: action,
+      bumpSnapGeneration: action,
+      setOnCollapseChange: action
+    });
+  }
+
+  public get groupEdges(): boolean {
+    return this.groupEdgesP;
+  }
+  public setGroupEdges = (grouped: boolean): void => {
+    this.groupEdgesP = grouped;
+  };
+  public get showEdgeLabels(): boolean {
+    return this.showEdgeLabelsP;
+  }
+  public setShowEdgeLabels = (show: boolean): void => {
+    this.showEdgeLabelsP = show;
+  };
+  public get showMetricTags(): boolean {
+    return this.showMetricTagsP;
+  }
+  public setShowMetricTags = (show: boolean): void => {
+    this.showMetricTagsP = show;
+  };
+  public get snapGeneration(): number {
+    return this.snapGenerationP;
+  }
+  public bumpSnapGeneration = (): void => {
+    this.snapGenerationP = this.snapGenerationP + 1;
+  };
+  public get onCollapseChange(): () => void {
+    return this.onCollapseChangeP;
+  }
+  public setOnCollapseChange = (onChange: () => void): void => {
+    this.onCollapseChangeP = onChange;
+  };
+}
+export const AggregateEdgesDemoContext = createContext<AggregateEdgesDemoModel>(new AggregateEdgesDemoModel());
+
+export const AggregateEdgesDemoProvider = AggregateEdgesDemoContext.Provider;
+
+export const useAggregateEdgesDemo = (): AggregateEdgesDemoModel => useContext(AggregateEdgesDemoContext);

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

@@ -0,0 +1,20 @@
+import { FunctionComponent } from 'react';
+import { observer } from 'mobx-react';
+import { DefaultEdge, GraphElement, WithSelectionProps } from '@patternfly/react-topology';
+import { useAggregateEdgesDemo } from './DemoContext';
+
+type LabeledDefaultEdgeProps = {
+  element: GraphElement;
+} & WithSelectionProps;
+
+/**
+ * Leaf (non-aggregate) edge that shows a custom label or metric tag when present.
+ */
+const LabeledDefaultEdge: FunctionComponent<LabeledDefaultEdgeProps> = observer(({ element, ...rest }) => {
+  const { showEdgeLabels, showMetricTags } = useAggregateEdgesDemo();
+  const label = showEdgeLabels ? element.getLabel() : undefined;
+  const metricTag = showMetricTags ? (element.getData()?.tag as string) : undefined;
+  return <DefaultEdge element={element} {...rest} tag={label || metricTag || undefined} />;
+});
+
+export default LabeledDefaultEdge;