@truedat/dd 8.12.10 → 8.12.12

package/src/styles/LineageGraph.less

@@ -2481,8 +2481,8 @@
       var(--td-lineage-inspector-toolbar-offset) +
       var(--td-lineage-context-control-size) - 1px
   );
-  --td-lineage-inspector-motion-duration: 180ms;
-  --td-lineage-inspector-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --td-lineage-inspector-motion-duration: 220ms;
+  --td-lineage-inspector-motion-easing: cubic-bezier(0.22, 0.68, 0, 1);
 
   position: relative;
   display: flex;
@@ -2540,12 +2540,16 @@
   content: "";
   pointer-events: none;
 }
+.lineage-graph__dock-context--pinned .lineage-graph__dock-context-bar {
+  background: var(--td-graph-accent, #ed5c17);
+}
 .lineage-graph__dock-context--pinned
   .lineage-graph__dock-context-bar:not(
     .lineage-graph__dock-context-bar--expanded
   ) {
   background: var(--td-graph-accent, #ed5c17);
-  box-shadow: 0 5px 12px rgba(237, 92, 23, 0.28);
+  box-shadow: 0 5px 12px
+    color-mix(in srgb, var(--td-graph-accent, #ed5c17) 28%, transparent);
 }
 .lineage-graph__dock-context-bar--edge {
   background: var(--td-graph-edge-metadata, #7c3aed);
@@ -2564,6 +2568,11 @@
   cursor: pointer;
 }
 .lineage-graph__dock-context-reopen {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
   position: static;
   display: flex;
   height: 100%;
@@ -2572,28 +2581,30 @@
   align-items: center;
   text-align: left;
 }
+button.lineage-graph__dock-context-reopen {
+  cursor: pointer;
+}
 .lineage-graph__dock-context-clear,
 .lineage-graph__dock-context-unpin {
   width: var(--td-lineage-context-control-size);
   min-width: var(--td-lineage-context-control-size);
 }
+@keyframes td-lineage-context-copy-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 .lineage-graph__dock-context-clear {
   border-left: 1px solid rgba(255, 255, 255, 0.34);
 }
 .lineage-graph__dock-context-bar--expanded .lineage-graph__dock-context-clear {
   border-left: 0;
 }
-.lineage-graph__dock-context-bar--expanded .lineage-graph__dock-context-unpin {
-  height: 100%;
-  border-right: 1px solid rgba(255, 255, 255, 0.34);
-}
-.lineage-graph__dock-context--pinned
-  .lineage-graph__dock-context-bar--expanded
-  .lineage-graph__dock-context-unpin {
-  background: var(--td-graph-accent, #ed5c17);
-  color: #ffffff;
-}
 .lineage-graph__dock-context-summary {
+  animation: td-lineage-context-copy-in 140ms ease-out;
   display: flex;
   width: 100%;
   height: 100%;
@@ -2614,12 +2625,6 @@
   border: 1px solid transparent;
   border-radius: 6px;
   transition:
-    width var(--td-lineage-inspector-motion-duration)
-      var(--td-lineage-inspector-motion-easing),
-    min-width var(--td-lineage-inspector-motion-duration)
-      var(--td-lineage-inspector-motion-easing),
-    height var(--td-lineage-inspector-motion-duration)
-      var(--td-lineage-inspector-motion-easing),
     border-color var(--td-lineage-inspector-motion-duration)
       var(--td-lineage-inspector-motion-easing),
     background-color var(--td-lineage-inspector-motion-duration)
@@ -2635,7 +2640,7 @@
   flex: 1 1 auto;
   flex-direction: column;
   justify-content: center;
-  gap: 3px;
+  gap: 0;
 }
 .lineage-graph__dock-context-label,
 .lineage-graph__dock-context-type {
@@ -2649,8 +2654,6 @@
 .lineage-graph__dock-context-label {
   font-size: 11px;
   font-weight: 700;
-  transition: font-size var(--td-lineage-inspector-motion-duration)
-    var(--td-lineage-inspector-motion-easing);
 }
 .lineage-graph__dock-context-type {
   max-height: 0;
@@ -2662,8 +2665,6 @@
   text-transform: uppercase;
   transform: translateY(-3px);
   transition:
-    max-height var(--td-lineage-inspector-motion-duration)
-      var(--td-lineage-inspector-motion-easing),
     opacity var(--td-lineage-inspector-motion-duration)
       var(--td-lineage-inspector-motion-easing),
     transform var(--td-lineage-inspector-motion-duration)
@@ -2678,6 +2679,9 @@
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.1);
 }
+.lineage-graph__dock-context-bar--expanded .lineage-graph__dock-context-copy {
+  gap: 3px;
+}
 .lineage-graph__dock-context-bar--expanded .lineage-graph__dock-context-label {
   font-size: 16px;
   font-weight: 800;
@@ -3607,6 +3611,7 @@
 @media (prefers-reduced-motion: reduce) {
   .lineage-graph__tool-panel,
   .lineage-inspector,
+  .lineage-graph__dock-context-summary,
   .lineage-graph__dock-context-clear .icon {
     animation: none;
   }
@@ -3642,28 +3647,96 @@
     box-shadow: 0 12px 28px rgba(15, 23, 42, 0.13);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
-    transition: width 200ms ease;
-  }
-
-  .td-graph-minimap-shell--collapsed {
-    width: 200px;
+    box-sizing: content-box;
+    transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1);
   }
 
   .td-graph-minimap-shell--expanded {
-    width: auto;
-    min-width: 288px;
+    width: 288px;
   }
 
   .td-graph-minimap-body {
     position: relative;
     width: 100%;
+    height: 150px;
+    overflow: hidden;
+    opacity: 1;
+    transition:
+      height 220ms cubic-bezier(0.22, 1, 0.36, 1),
+      opacity 160ms ease;
+  }
+
+  .td-graph-minimap-shell--expanded .td-graph-minimap-body {
+    height: 200px;
+  }
+
+  .td-graph-minimap-shell--collapsed {
+    width: 200px;
+
+    .td-graph-minimap-body {
+      height: 0;
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  .td-graph-minimap {
+    transition:
+      width 220ms cubic-bezier(0.22, 1, 0.36, 1),
+      height 220ms cubic-bezier(0.22, 1, 0.36, 1);
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .td-graph-minimap-shell,
+    .td-graph-minimap-body,
+    .td-graph-minimap {
+      transition: none;
+    }
   }
 
   .td-graph-minimap-expand {
-    display: none;
+    position: absolute;
+    bottom: 6px;
+    left: 6px;
+    z-index: 2;
+    display: inline-flex;
+    width: 22px;
+    height: 22px;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 1px solid rgba(15, 23, 42, 0.12);
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.88);
+    color: #64748b;
+    cursor: pointer;
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    transition:
+      background-color 120ms ease,
+      color 120ms ease,
+      border-color 120ms ease;
+  }
+
+  .td-graph-minimap-expand:hover {
+    background: rgba(255, 255, 255, 0.98);
+    border-color: #002057;
+    color: #002057;
+  }
+
+  .td-graph-minimap-expand:focus-visible {
+    outline: 2px solid #ed5c17;
+    outline-offset: 2px;
   }
 
   .td-graph-minimap-header {
+    position: relative;
     display: flex;
     height: 32px;
     align-items: center;
@@ -3673,6 +3746,13 @@
     color: #334155;
   }
 
+  .td-graph-minimap-toggle::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    cursor: pointer;
+  }
+
   .td-graph-minimap-title {
     display: inline-flex;
     min-width: 0;
@@ -4044,3 +4124,55 @@
 .lineage-graph__legend-section {
   flex-shrink: 0;
 }
+
+.lineage-graph__stage-surface
+  .react-flow__node.lineage-node--pinned
+  > :is(.td-lineage-resource-node, .td-lineage-group-node) {
+  box-shadow: inset 0 0 0 2px var(--td-graph-accent, #ed5c17);
+  opacity: 1;
+
+  > :is(
+      .td-lineage-resource-node__header,
+      .td-lineage-group-node__header,
+      .td-lineage-group-node__absolute-header
+    ) {
+    background: var(--td-lineage-interaction-bg, #fff7ed);
+    box-shadow: none;
+    color: color-mix(in srgb, var(--td-graph-accent, #ed5c17) 70%, #000000);
+
+    :is(
+      .td-lineage-resource-node__label,
+      .td-lineage-resource-node__kind,
+      .td-lineage-group-node__label,
+      .td-lineage-group-node__absolute-label,
+      .td-lineage-group-node__toggle,
+      .td-lineage-group-node__type-icon.icon
+    ) {
+      color: color-mix(in srgb, var(--td-graph-accent, #ed5c17) 70%, #000000);
+    }
+  }
+}
+
+.lineage-graph__stage-surface .lineage-graph__node-unpin {
+  position: absolute;
+  top: -10px;
+  left: -10px;
+  z-index: 5;
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--td-graph-accent, #ed5c17);
+  border-radius: 50%;
+  background: var(--td-graph-accent, #ed5c17);
+  color: #ffffff;
+  cursor: pointer;
+  pointer-events: auto;
+
+  &:focus-visible {
+    outline: 2px solid #0284c7;
+    outline-offset: 2px;
+  }
+}

package/src/utils/__tests__/lineageLayout.spec.js

@@ -233,6 +233,74 @@ describe("compound root columns", () => {
   });
 });
 
+describe("relations within one lineage group", () => {
+  const group = { ...node("group"), data: { label: "group", topology: true } };
+  const child = (id) => ({ ...node(id), parentId: "group" });
+
+  it("places related siblings from left to right and keeps an unrelated sibling separate", () => {
+    const nodes = [group, child("source"), child("target"), child("unrelated")];
+    const edges = [{ source: "source", target: "target" }];
+    const positions = geometry(freshLayout()({ nodes, edges }));
+
+    expect(positions.source.x + positions.source.w).toBeLessThan(
+      positions.target.x,
+    );
+    expect(positions.unrelated.x).toBe(positions.source.x);
+    expect(positions.unrelated.y).toBeGreaterThan(positions.source.y);
+    expect(positions.target.x + positions.target.w).toBeLessThanOrEqual(
+      positions.group.x + positions.group.w,
+    );
+  });
+
+  it("projects relations between nested nodes onto their sibling groups", () => {
+    const nodes = [
+      group,
+      child("left"),
+      child("right"),
+      { ...node("left/leaf"), parentId: "left" },
+      { ...node("right/leaf"), parentId: "right" },
+    ];
+    const edges = [{ source: "left/leaf", target: "right/leaf" }];
+    const positions = geometry(freshLayout()({ nodes, edges }));
+
+    expect(positions.left.x + positions.left.w).toBeLessThan(positions.right.x);
+    expect(positions["left/leaf"].x).toBeGreaterThanOrEqual(positions.left.x);
+    expect(positions["right/leaf"].x).toBeGreaterThanOrEqual(positions.right.x);
+  });
+
+  it("reflows the whole graph when an internal dependency widens a group", () => {
+    const nodes = [group, child("source"), child("target"), node("other")];
+    const layout = freshLayout();
+    const before = geometry(layout({ nodes, edges: [] }));
+    const after = geometry(
+      layout({
+        nodes,
+        edges: [{ source: "source", target: "target" }],
+      }),
+    );
+
+    expect(after.group.w).toBeGreaterThan(before.group.w);
+    expect(after.group.h).toBeLessThan(before.group.h);
+    expect(after.other.y).toBeLessThan(before.other.y);
+  });
+
+  it("keeps cyclic siblings in one column without overlapping", () => {
+    const nodes = [group, child("a"), child("b")];
+    const positions = geometry(
+      freshLayout()({
+        nodes,
+        edges: [
+          { source: "a", target: "b" },
+          { source: "b", target: "a" },
+        ],
+      }),
+    );
+
+    expect(positions.a.x).toBe(positions.b.x);
+    expect(positions.b.y).toBeGreaterThanOrEqual(positions.a.y + positions.a.h);
+  });
+});
+
 it.each([undefined, "lineage-field"])(
   "leaves only bottom padding after the last child (%s)",
   (variant) => {

package/src/utils/lineageGraph.js

@@ -3108,8 +3108,8 @@ export const planLineageEdgeRoutes = (edges = [], nodes = []) => {
     data: {
       ...edge.data,
       ...routePortPositions[index],
-      edgeOffset: routeGuides[index]?.edgeOffset ?? edge.data?.edgeOffset,
-      routeGuide: routeGuides[index] || edge.data?.routeGuide,
+      edgeOffset: routeGuides[index]?.edgeOffset,
+      routeGuide: routeGuides[index],
     },
   }));
 };
@@ -3139,6 +3139,7 @@ export const focusLineageNodes = (
   focusedNodeIds,
   focusActive,
   selectedNodeId,
+  pinnedNodeId,
 ) =>
   focusActive
     ? nodes.map((node) => {
@@ -3147,7 +3148,8 @@ export const focusLineageNodes = (
           node.data?.lineageNode?.lineageKind === "group";
         const selected = node.id === selectedNodeId;
         const direct = !selected && focusedNodeIds.has(node.id);
-        const dimmed = !selected && !focusedNodeIds.has(node.id);
+        const dimmed =
+          !selected && node.id !== pinnedNodeId && !focusedNodeIds.has(node.id);
 
         return {
           ...node,