@truedat/core 8.14.0 → 8.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.14.0",
+  "version": "8.14.2",
   "description": "Truedat Web Core",
   "sideEffects": [
     "**/*.css",
@@ -57,7 +57,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.14.0",
+    "@truedat/test": "8.14.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -99,5 +99,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "9396fc850fc50e8e44a7198bac95c7a965396159"
+  "gitHead": "3814d239579315d817ba0e3467771e6a128e5788"
 }

package/src/components/TrueModal.js

@@ -1,4 +1,4 @@
-import { useId } from "react";
+import { useCallback, useId, useRef } from "react";
 import PropTypes from "prop-types";
 import { useIntl, FormattedMessage } from "react-intl";
 import { Button, Icon, Modal } from "semantic-ui-react";
@@ -26,9 +26,44 @@ export const TrueModal = ({
   onCancel,
   onCreate,
   className,
+  closeDisabled = false,
   ...modalProps
 }) => {
   const titleId = useId();
+  const headingRef = useRef(null);
+  const setHeading = useCallback((node) => {
+    headingRef.current = node;
+    if (!node) return undefined;
+    const frame = requestAnimationFrame(() => {
+      node.closest(".ui.modal")?.querySelector(".true-modal-close")?.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, []);
+  const handleKeyDown = (event) => {
+    modalProps.onKeyDown?.(event);
+    if (event.key !== "Tab" || event.defaultPrevented) return;
+    const dialog = headingRef.current?.closest(".ui.modal");
+    const controls = Array.from(
+      dialog?.querySelectorAll(
+        'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), [tabindex="0"]',
+      ) || [],
+    ).filter(
+      (node) =>
+        node.getClientRects().length &&
+        !node.closest("[aria-disabled=true], fieldset[disabled]"),
+    );
+    const first = controls[0];
+    const last = controls[controls.length - 1];
+    if (
+      first &&
+      (!dialog.contains(document.activeElement) ||
+        (event.shiftKey && document.activeElement === first) ||
+        (!event.shiftKey && document.activeElement === last))
+    ) {
+      event.preventDefault();
+      (event.shiftKey ? last : first).focus();
+    }
+  };
   const { formatMessage } = useIntl();
   const defaultActions = _.compact([
     onCancel && {
@@ -50,6 +85,7 @@ export const TrueModal = ({
     <Modal
       {..._.omit(["header", "content", "closeIcon"])(modalProps)}
       className={_.compact(["true-modal", className]).join(" ")}
+      onKeyDown={handleKeyDown}
       role="dialog"
       aria-labelledby={
         modalProps["aria-labelledby"] ||
@@ -58,6 +94,7 @@ export const TrueModal = ({
       closeIcon={
         <button
           type="button"
+          disabled={closeDisabled}
           className="true-modal-close"
           style={{ color: headerTextColor }}
           aria-label={formatMessage({
@@ -71,7 +108,7 @@ export const TrueModal = ({
     >
       <Modal.Header style={{ background: headerColor, color: headerTextColor }}>
         {icon ? <Icon name={icon} size="large" /> : null}
-        <div className="true-modal-heading">
+        <div ref={setHeading} className="true-modal-heading">
           <span id={titleId}>{title}</span>
           {subtitle != null ? (
             <p className="true-modal-subtitle">{subtitle}</p>
@@ -132,6 +169,7 @@ TrueModal.propTypes = {
   onCancel: PropTypes.func,
   onCreate: PropTypes.func,
   className: PropTypes.string,
+  closeDisabled: PropTypes.bool,
 };
 
 export default TrueModal;

package/src/components/__tests__/ColoredEdge.spec.js

@@ -5,6 +5,7 @@ import ColoredEdge, {
   edgeAnimationDuration,
   getClassicArrowPoints,
   getFlexibleEdgePath,
+  isCompactInternalEdgeVisible,
 } from "../graph/ColoredEdge";
 
 jest.mock("@xyflow/react", () => ({
@@ -291,3 +292,218 @@ describe("edgeAnimationDuration", () => {
     },
   );
 });
+
+describe("guided internal curves", () => {
+  const props = {
+    id: "internal",
+    source: "a",
+    target: "b",
+    sourceX: 360,
+    sourceY: 80,
+    targetX: 512,
+    targetY: 160,
+    sourcePosition: "right",
+    targetPosition: "left",
+    markerEnd: { type: "arrow" },
+  };
+  const data = {
+    internalOwnerId: "g",
+    edgePath: "guided-bezier",
+    dependencyLayout: "compact",
+    lockSourcePort: true,
+    lockTargetPort: true,
+    metadata: { relation: "depends_on" },
+    routeGuide: {
+      kind: "corridor",
+      laneX: 420,
+      sourceStubX: 384,
+      targetStubX: 488,
+      labelPoint: { x: 420, y: 120 },
+    },
+  };
+  it("hides all interaction when unrelated and reveals the same curve for the active node", () => {
+    const onClick = jest.fn();
+    const view = render(
+      <EdgeHoverContext.Provider value={{ compactReferenceNodeId: "other" }}>
+        <svg>
+          <ColoredEdge {...props} data={{ ...data, onClick }} />
+        </svg>
+      </EdgeHoverContext.Provider>,
+    );
+    const path = view.container.querySelector("path#internal");
+    const d = path.getAttribute("d");
+    expect(d).toContain(" C ");
+    expect(path.closest("g")).toHaveStyle({ display: "none" });
+    expect(view.container.querySelector(".td-graph-edge-hit-area")).toBeNull();
+    expect(
+      view.container.querySelector(".td-graph-edge-metadata-badge"),
+    ).toBeNull();
+    view.rerender(
+      <EdgeHoverContext.Provider value={{ compactReferenceNodeId: "a" }}>
+        <svg>
+          <ColoredEdge {...props} data={{ ...data, onClick }} />
+        </svg>
+      </EdgeHoverContext.Provider>,
+    );
+    expect(
+      view.container.querySelector("path#internal").getAttribute("d"),
+    ).toBe(d);
+    const hit = view.container.querySelector(".td-graph-edge-hit-area");
+    expect(hit.getAttribute("d")).toBe(d);
+    fireEvent.click(hit);
+    expect(onClick).toHaveBeenCalledWith(data.metadata);
+  });
+  it("reveals indirect focused dependencies and hides them when selection clears", () => {
+    const view = render(
+      <EdgeHoverContext.Provider value={{ compactReferenceNodeId: "upstream" }}>
+        <svg>
+          <ColoredEdge {...props} data={{ ...data, focusFocused: true }} />
+        </svg>
+      </EdgeHoverContext.Provider>,
+    );
+
+    expect(
+      view.container.querySelector("path#internal").closest("g"),
+    ).not.toHaveStyle({ display: "none" });
+    expect(
+      view.container.querySelector(".td-graph-edge-hit-area"),
+    ).not.toBeNull();
+
+    view.rerender(
+      <EdgeHoverContext.Provider value={{}}>
+        <svg>
+          <ColoredEdge {...props} data={data} />
+        </svg>
+      </EdgeHoverContext.Provider>,
+    );
+
+    expect(
+      view.container.querySelector("path#internal").closest("g"),
+    ).toHaveStyle({ display: "none" });
+    expect(view.container.querySelector(".td-graph-edge-hit-area")).toBeNull();
+  });
+  it.each([
+    ["hover", { hoveredNodeId: "a" }],
+    ["keyboard focus", { keyboardFocusedNodeId: "a" }],
+  ])(
+    "reveals the %s node dependencies while another node remains selected",
+    (_interaction, activeContext) => {
+      const view = render(
+        <EdgeHoverContext.Provider
+          value={{ compactReferenceNodeId: "selected-node", ...activeContext }}
+        >
+          <svg>
+            <ColoredEdge {...props} data={data} />
+          </svg>
+        </EdgeHoverContext.Provider>,
+      );
+
+      expect(
+        view.container.querySelector("path#internal").closest("g"),
+      ).not.toHaveStyle({ display: "none" });
+      expect(
+        view.container.querySelector(".td-graph-edge-hit-area"),
+      ).not.toBeNull();
+    },
+  );
+  it("uses supplied controls and keeps the path stable on hover", () => {
+    const view = render(
+      <svg>
+        <ColoredEdge
+          {...props}
+          data={{ ...data, dependencyLayout: "expanded" }}
+        />
+      </svg>,
+    );
+    const d = view.container.querySelector("path#internal").getAttribute("d");
+    fireEvent.mouseEnter(
+      view.container.querySelector(".td-graph-edge-hit-area"),
+    );
+    expect(
+      view.container.querySelector("path#internal").getAttribute("d"),
+    ).toBe(d);
+    view.rerender(
+      <svg>
+        <ColoredEdge
+          {...props}
+          data={{
+            ...data,
+            dependencyLayout: "expanded",
+            routeGuide: { ...data.routeGuide, laneX: 460 },
+          }}
+        />
+      </svg>,
+    );
+    expect(
+      view.container.querySelector("path#internal").getAttribute("d"),
+    ).not.toBe(d);
+  });
+});
+
+describe("isCompactInternalEdgeVisible", () => {
+  const edge = {
+    id: "internal",
+    source: "source",
+    target: "target",
+    data: { internalOwnerId: "group" },
+  };
+  const visibility = (context = {}) =>
+    isCompactInternalEdgeVisible({
+      edge,
+      dependencyLayout: "compact",
+      ...context,
+    });
+
+  it.each([
+    ["selected edge", { selectedEdgeId: "internal" }],
+    ["keyboard focus", { keyboardFocusedNodeId: "source" }],
+    ["node hover", { hoveredNodeId: "target" }],
+  ])("reveals an internal dependency for %s", (_label, context) => {
+    expect(visibility(context)).toBe(true);
+  });
+
+  it("reveals focused dependencies for the pinned or selected reference", () => {
+    expect(
+      visibility({
+        edge: { ...edge, data: { ...edge.data, focusFocused: true } },
+        referenceNodeId: "upstream-pin",
+      }),
+    ).toBe(true);
+  });
+});
+
+it("reuses guided geometry during hover and recomputes it when coordinates change", () => {
+  const laneX = jest.fn(() => 200);
+  const guide = {
+    kind: "corridor",
+    sourceStubX: 24,
+    targetStubX: 376,
+    get laneX() {
+      return laneX();
+    },
+  };
+  const data = { edgePath: "guided-bezier", routeGuide: guide };
+  const edge = (hoveredNodeId, targetX = 400) => (
+    <EdgeHoverContext.Provider value={{ hoveredNodeId }}>
+      <svg>
+        <ColoredEdge
+          id="memo-edge"
+          source="a"
+          target="b"
+          sourceX={0}
+          sourceY={0}
+          targetX={targetX}
+          targetY={100}
+          data={data}
+        />
+      </svg>
+    </EdgeHoverContext.Provider>
+  );
+  const view = render(edge(null));
+  const calls = laneX.mock.calls.length;
+  expect(calls).toBeGreaterThan(0);
+  view.rerender(edge("a"));
+  expect(laneX).toHaveBeenCalledTimes(calls);
+  view.rerender(edge("b", 500));
+  expect(laneX.mock.calls.length).toBeGreaterThan(calls);
+});

package/src/components/__tests__/LineageGroupNode.spec.js

@@ -118,6 +118,65 @@ describe("<LineageGroupNode />", () => {
     expect(rendered.getByText("1 nodo")).toBeInTheDocument();
   });
 
+  it("renders compact dependency guidance and role columns while expanded", () => {
+    const rendered = render(
+      <LineageGroupNode
+        id="dependency-group"
+        data={{
+          collapsed: false,
+          internalHint: "Select a node to reveal dependencies",
+          internalSummary: "3 internal dependencies",
+          internalColumns: [
+            {
+              key: "source",
+              label: "Sources",
+              countLabel: "2 nodes",
+              title: "Source role",
+              x: 24,
+              y: 64,
+              width: 120,
+            },
+          ],
+          label: "Dependency group",
+          variant: "absolute",
+        }}
+      />,
+    );
+
+    expect(
+      rendered
+        .getByText(/3 internal dependencies/)
+        .closest(".td-lineage-group-node__internal-summary"),
+    ).toHaveAttribute(
+      "title",
+      "3 internal dependencies · Select a node to reveal dependencies",
+    );
+    expect(rendered.getByText("Sources · 2 nodes")).toHaveAttribute(
+      "title",
+      "Source role",
+    );
+  });
+
+  it("hides compact dependency guidance and role columns while collapsed", () => {
+    const rendered = render(
+      <LineageGroupNode
+        id="collapsed-dependency-group"
+        data={{
+          collapsed: true,
+          internalSummary: "3 internal dependencies",
+          internalColumns: [
+            { key: "source", label: "Sources", countLabel: "2 nodes" },
+          ],
+          label: "Dependency group",
+          variant: "absolute",
+        }}
+      />,
+    );
+
+    expect(rendered.queryByText(/3 internal dependencies/)).toBeNull();
+    expect(rendered.queryByText("Sources · 2 nodes")).toBeNull();
+  });
+
   it("retains an explicit classic modifier", () => {
     const rendered = render(
       <LineageGroupNode

package/src/components/__tests__/TrueModal.spec.js

@@ -1,4 +1,4 @@
-import { screen } from "@testing-library/react";
+import { act, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
 import { TrueModal } from "../index";
@@ -190,4 +190,27 @@ describe("<TrueModal />", () => {
     rerender(<TrueModal open={false} title="Title" />);
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
   });
+  it("focuses the dialog and wraps keyboard focus within its controls", async () => {
+    const rects = jest
+      .spyOn(HTMLElement.prototype, "getClientRects")
+      .mockReturnValue([{}]);
+    renderModal({
+      children: <input aria-label="Name" />,
+      actions: [{ key: "save", content: "Save" }],
+    });
+    act(() => jest.advanceTimersByTime(20));
+    const close = screen.getByRole("button", { name: "Close" });
+    await waitFor(() => expect(close).toHaveFocus());
+    const user = setupUser();
+    await user.tab({ shift: true });
+    expect(screen.getByRole("button", { name: "Save" })).toHaveFocus();
+    await user.tab();
+    expect(close).toHaveFocus();
+    rects.mockRestore();
+  });
+
+  it("exposes disabled semantics on the close control while an operation is pending", () => {
+    renderModal({ closeDisabled: true });
+    expect(screen.getByRole("button", { name: "Close" })).toBeDisabled();
+  });
 });

package/src/components/graph/ColoredEdge.js

@@ -3,6 +3,7 @@ import {
   memo,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -376,14 +377,89 @@ export const getFlexibleEdgePath = ({
   };
 };
 
+export const getGuidedBezierEdgePath = ({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition = "right",
+  targetPosition = "left",
+  routeGuide,
+}) => {
+  if (!routeGuide)
+    return getFlexibleEdgePath({
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      sourcePosition,
+      targetPosition,
+    });
+  const sourceVector = portVector(sourcePosition),
+    targetVector = portVector(targetPosition);
+  const sourceStubX = routeGuide.sourceStubX ?? sourceX + sourceVector.x * 24;
+  const targetStubX = routeGuide.targetStubX ?? targetX + targetVector.x * 24;
+  const corridor = routeGuide.kind === "corridor";
+  const points = corridor
+    ? []
+    : dedupePoints([
+        point(sourceX, sourceY),
+        point(sourceStubX, sourceY),
+        point(routeGuide.sourceLaneX, sourceY),
+        point(routeGuide.sourceLaneX, routeGuide.laneY),
+        point(routeGuide.targetLaneX, routeGuide.laneY),
+        point(routeGuide.targetLaneX, targetY),
+        point(targetStubX, targetY),
+        point(targetX, targetY),
+      ]);
+  const path = corridor
+    ? `M ${sourceX},${sourceY} L ${sourceStubX},${sourceY} C ${routeGuide.laneX},${sourceY} ${routeGuide.laneX},${targetY} ${targetStubX},${targetY} L ${targetX},${targetY}`
+    : roundedOrthogonalPath(points, routeGuide.cornerRadius ?? 24);
+  return {
+    path,
+    labelX: corridor
+      ? getBezierPoint(
+          0.5,
+          sourceStubX,
+          routeGuide.laneX,
+          routeGuide.laneX,
+          targetStubX,
+        )
+      : routeGuide.labelPoint.x,
+    labelY: corridor ? (sourceY + targetY) / 2 : routeGuide.labelPoint.y,
+    sourceTangent: sourceVector,
+    targetTangent: normalizeVector(-targetVector.x, -targetVector.y),
+  };
+};
+
+export const isCompactInternalEdgeVisible = ({
+  edge,
+  dependencyLayout,
+  referenceNodeId,
+  selectedEdgeId,
+  keyboardFocusedNodeId,
+  hoveredNodeId,
+}) => {
+  if (dependencyLayout !== "compact" || !edge.data?.internalOwnerId)
+    return true;
+  if (edge.id === selectedEdgeId) return true;
+  if (referenceNodeId && edge.data?.focusFocused) return true;
+  return [referenceNodeId, keyboardFocusedNodeId, hoveredNodeId].some(
+    (activeNodeId) =>
+      activeNodeId &&
+      (edge.source === activeNodeId || edge.target === activeNodeId),
+  );
+};
+
 export const getEdgeSlotOffsets = (data = {}) => ({
   sourceSlotOffset: data.lockSourcePort
     ? 0
     : data.sourceFieldIndex === undefined
       ? getTargetSlotOffset(data.sourceSlotIndex, data.sourceSlotCount)
       : 0,
-  targetSlotOffset:
-    data.targetFieldIndex === undefined
+  targetSlotOffset: data.lockTargetPort
+    ? 0
+    : data.targetFieldIndex === undefined
       ? getTargetSlotOffset(
           data.targetSlotIndex,
           data.targetSlotCount,
@@ -394,7 +470,11 @@ export const getEdgeSlotOffsets = (data = {}) => ({
       : 0,
 });
 
-export const getLineageEdgeVisualState = (data = {}, hovered = false) => {
+export const getLineageEdgeVisualState = (
+  data = {},
+  hovered = false,
+  visible = true,
+) => {
   const aggregatedCount = Number(data.aggregatedCount);
   const aggregated = Number.isFinite(aggregatedCount) && aggregatedCount > 1;
   const dimmed = Boolean(data.focusDimmed) && !hovered;
@@ -403,9 +483,10 @@ export const getLineageEdgeVisualState = (data = {}, hovered = false) => {
     aggregated,
     highlighted:
       !data.containment && !dimmed && (hovered || Boolean(data.focusFocused)),
-    showDecorations: !dimmed,
-    showHitArea: true,
+    showDecorations: visible && !dimmed,
+    showHitArea: visible,
     showLabel:
+      visible &&
       !dimmed &&
       (aggregated
         ? Boolean(data.selectedEndpoint)
@@ -430,6 +511,14 @@ const ColoredEdge = ({
   const hoverCtx = useContext(EdgeHoverContext);
   const hoveredNodeId = hoverCtx?.hoveredNodeId;
   const hoveredEdgeEndpoints = hoverCtx?.hoveredEdgeEndpoints;
+  const compactVisible = isCompactInternalEdgeVisible({
+    edge: { id, source, target, data },
+    dependencyLayout: data.dependencyLayout,
+    referenceNodeId: hoverCtx?.compactReferenceNodeId,
+    selectedEdgeId: hoverCtx?.selectedEdgeId,
+    keyboardFocusedNodeId: hoverCtx?.keyboardFocusedNodeId,
+    hoveredNodeId,
+  });
   const [hovered, setHovered] = useState(false);
   const [motionTiming, setMotionTiming] = useState(null);
   const gRef = useRef(null);
@@ -440,12 +529,14 @@ const ColoredEdge = ({
   const interactive = Boolean(data.onClick);
   const { sourceSlotOffset, targetSlotOffset } = getEdgeSlotOffsets(data);
   const useOrthogonalPath = data.edgePath === "orthogonal";
+  const useGuidedBezierPath = data.edgePath === "guided-bezier";
+  const useGuidedPath = useOrthogonalPath || useGuidedBezierPath;
   const useFlexibleBezierPath = data.edgePath === "bezier";
-  const useClassicEdgePath = !useOrthogonalPath && !useFlexibleBezierPath;
+  const useClassicEdgePath = !useGuidedPath && !useFlexibleBezierPath;
   const adjustedSourceY = sourceY + (data.bundleSource ? 0 : sourceSlotOffset);
   const adjustedTargetY = targetY + (data.bundleTarget ? 0 : targetSlotOffset);
   const { aggregated, highlighted, showDecorations, showHitArea, showLabel } =
-    getLineageEdgeVisualState(data, hovered);
+    getLineageEdgeVisualState(data, hovered, compactVisible);
   const dependenciesOnLeft =
     data.selectedEndpoint === "source" ? targetX < sourceX : sourceX < targetX;
   const setHoveredEdgeEndpoints = hoverCtx?.setHoveredEdgeEndpoints;
@@ -458,13 +549,13 @@ const ColoredEdge = ({
     };
   }, [id, showHitArea, setHoveredEdgeEndpoints]);
   const forceHorizontalPorts = Boolean(
-    useOrthogonalPath && data.forceHorizontalPorts,
+    useGuidedPath && data.forceHorizontalPorts,
   );
   const stroke = style.stroke || "var(--td-graph-edge-stroke, #b0b8c8)";
   const markerPosition = data.markerPosition;
   const showTargetMarker =
     showDecorations &&
-    (useOrthogonalPath
+    (useGuidedPath
       ? markerPosition === "target" ||
         markerPosition === "both" ||
         (markerPosition === undefined && data.showTargetArrow !== false)
@@ -483,7 +574,19 @@ const ColoredEdge = ({
   const sourcePortY = adjustedSourceY;
   const targetPortX = targetX;
   const targetPortY = adjustedTargetY;
-  const { edgePath, labelX, labelY, targetTangent, sourceTangent } = (() => {
+  const geometry = useMemo(() => {
+    if (useGuidedBezierPath) {
+      const curve = getGuidedBezierEdgePath({
+        sourceX: sourcePortX,
+        sourceY: sourcePortY,
+        targetX: targetPortX,
+        targetY: targetPortY,
+        sourcePosition: effectiveSourcePosition,
+        targetPosition: effectiveTargetPosition,
+        routeGuide: data.routeGuide,
+      });
+      return { ...curve, edgePath: curve.path };
+    }
     if (useOrthogonalPath) {
       const orthogonalEdge = getOrthogonalEdgePath({
         sourceX: sourcePortX,
@@ -606,9 +709,37 @@ const ColoredEdge = ({
 
       return { edgePath, labelX, labelY, targetTangent, sourceTangent };
     }
-  })();
+  }, [
+    useGuidedBezierPath,
+    useOrthogonalPath,
+    useFlexibleBezierPath,
+    sourcePortX,
+    sourcePortY,
+    targetPortX,
+    targetPortY,
+    effectiveSourcePosition,
+    effectiveTargetPosition,
+    sourceX,
+    targetX,
+    adjustedSourceY,
+    adjustedTargetY,
+    sourcePosition,
+    targetPosition,
+    data.routeGuide,
+    data.edgeBorderRadius,
+    data.edgeOffset,
+    data.routeIndex,
+    data.routeCount,
+    data.sourceNodeY,
+    data.targetNodeY,
+    data.edgeCurvature,
+    data.bundleSource,
+    data.bundleTarget,
+    data.bundleOffset,
+  ]);
+  const { edgePath, labelX, labelY, targetTangent, sourceTangent } = geometry;
   useEffect(() => {
-    if (!data.animated || !gRef.current) return;
+    if (!compactVisible || !data.animated || !gRef.current) return;
 
     const pathElement = gRef.current.querySelector("path.td-graph-edge");
 
@@ -623,7 +754,7 @@ const ColoredEdge = ({
         ? current
         : { duration, path: edgePath },
     );
-  }, [data.animated, edgePath]);
+  }, [compactVisible, data.animated, edgePath]);
   const animationDuration =
     motionTiming?.path === edgePath ? motionTiming.duration : null;
   const nodeHovered = hoveredNodeId
@@ -643,7 +774,7 @@ const ColoredEdge = ({
       ? "var(--td-graph-edge-active, var(--td-graph-accent, #ed5c17))"
       : stroke;
   const handleClick = (event) => {
-    if (!interactive) return;
+    if (!interactive || !compactVisible) return;
     event.stopPropagation();
     data.onClick(data.metadata);
   };
@@ -664,7 +795,13 @@ const ColoredEdge = ({
     .join(" ");
 
   return (
-    <g ref={gRef}>
+    <g
+      ref={gRef}
+      style={
+        compactVisible ? undefined : { display: "none", pointerEvents: "none" }
+      }
+      aria-hidden={!compactVisible || undefined}
+    >
       <BaseEdge
         className={edgeClassName}
         id={id}
@@ -674,7 +811,7 @@ const ColoredEdge = ({
           stroke: effectiveStroke,
         }}
       />
-      {data.animated && animationDuration ? (
+      {compactVisible && data.animated && animationDuration ? (
         <circle
           aria-hidden="true"
           className="td-graph-edge-flow-dot"

package/src/components/graph/LineageGroupNode.js

@@ -49,6 +49,9 @@ const LineageGroupNode = ({ id, data = {} }) => {
     oversized,
     oversizedWarningOpen,
     resourceContainer,
+    internalColumns = [],
+    internalSummary,
+    internalHint,
     systemTypeClassName,
     systemTypeLabel,
     systemTypeMissing,
@@ -195,6 +198,30 @@ const LineageGroupNode = ({ id, data = {} }) => {
           ) : null}
         </div>
       ) : null}
+      {!collapsed && internalSummary ? (
+        <div
+          className="td-lineage-group-node__internal-summary"
+          title={[internalSummary, internalHint].filter(Boolean).join(" · ")}
+        >
+          <Icon aria-hidden="true" name="info circle" />
+          <span>
+            {internalSummary}
+            {internalHint ? ` · ${internalHint}` : null}
+          </span>
+        </div>
+      ) : null}
+      {!collapsed
+        ? internalColumns.map((column) => (
+            <span
+              key={`${column.key}-${column.y}`}
+              className="td-lineage-group-node__column-label"
+              title={column.title}
+              style={{ left: column.x, top: column.y, width: column.width }}
+            >
+              {column.label} · {column.countLabel ?? column.count}
+            </span>
+          ))
+        : null}
       {showContentSummary ? (
         <div className="td-lineage-group-node__footer">
           <span className="td-lineage-group-node__content-summary">
@@ -296,6 +323,20 @@ LineageGroupNode.propTypes = {
     oversized: PropTypes.bool,
     oversizedWarningOpen: PropTypes.bool,
     resourceContainer: PropTypes.bool,
+    internalColumns: PropTypes.arrayOf(
+      PropTypes.shape({
+        key: PropTypes.string,
+        label: PropTypes.string,
+        title: PropTypes.string,
+        x: PropTypes.number,
+        y: PropTypes.number,
+        width: PropTypes.number,
+        count: PropTypes.number,
+        countLabel: PropTypes.string,
+      }),
+    ),
+    internalSummary: PropTypes.string,
+    internalHint: PropTypes.string,
     systemTypeClassName: PropTypes.string,
     systemTypeLabel: PropTypes.string,
     systemTypeMissing: PropTypes.bool,

package/src/styles/LineageGroupNode.less

@@ -556,3 +556,42 @@
 .td-lineage-group-node.td-lineage-group-node {
   .lineage-node-states(td-lineage-group-node);
 }
+
+.td-lineage-group-node__column-label {
+  position: absolute;
+  height: 24px;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 24px;
+  pointer-events: none;
+}
+.td-lineage-group-node__internal-summary {
+  position: absolute;
+  top: 42px;
+  right: 0;
+  left: 0;
+  display: flex;
+  height: 16px;
+  align-items: center;
+  gap: 4px;
+  padding: 0 6px;
+  background: #eff6ff;
+  color: #1e40af;
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 16px;
+
+  > .icon {
+    flex-shrink: 0;
+    height: 16px;
+    margin: 0;
+    line-height: 16px;
+  }
+
+  > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}