@truedat/dd 8.5.8 → 8.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "8.5.8",
+  "version": "8.5.9",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "module": "src/index.js",
@@ -51,7 +51,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.5.8",
+    "@truedat/test": "8.5.9",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -86,5 +86,5 @@
     "svg-pan-zoom": "^3.6.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "61ad9443b3d822d30dcfa977f5fad3494b3ed5b4"
+  "gitHead": "45e6137b5aa9452db78901e8b0eaa16cc7953b7c"
 }

package/src/components/LineageGraph.js

@@ -36,6 +36,11 @@ const enablePanZoom = (svg) => {
   svg && svg.enablePan();
   svg && svg.enableZoom();
 };
+const isInteractiveGraphElement = (target) =>
+  target &&
+  target.closest &&
+  target.closest("g.resource, g.group, path.link, a");
+
 const togglePanZoom = (svg) => (selectedNode) => {
   _.isEmpty(selectedNode) ? enablePanZoom(svg) : disablePanZoom(svg);
 };
@@ -93,6 +98,7 @@ export const LineageGraph = ({
         instance.resize();
         instance.fit();
         instance.zoomBy(initialScale);
+        instance.center();
         const currentPan = instance.getPan();
         instance.pan({ x: currentPan.x, y: topMargin });
       } catch (_error) {
@@ -168,15 +174,21 @@ export const LineageGraph = ({
   const onHover = (g) =>
     selectedNode ? undefined : () => dispatch(hoverNode.trigger(g));
   const onPointerDown = (event) => {
-    if (event.currentTarget.setPointerCapture && event.pointerId !== undefined) {
+    if (
+      !isInteractiveGraphElement(event.target) &&
+      event.currentTarget.setPointerCapture &&
+      event.pointerId !== undefined
+    ) {
       event.currentTarget.setPointerCapture(event.pointerId);
     }
   };
 
   const onPointerUp = (event) => {
     if (
+      event.pointerId !== undefined &&
       event.currentTarget.releasePointerCapture &&
-      event.pointerId !== undefined
+      event.currentTarget.hasPointerCapture &&
+      event.currentTarget.hasPointerCapture(event.pointerId)
     ) {
       event.currentTarget.releasePointerCapture(event.pointerId);
     }

package/src/components/LineageGroup.js

@@ -36,10 +36,8 @@ export const LineageGroup = ({
     </text>
   );
   const trigger =
-    z == 0 ? null : handleClick ? (
-      <a onContextMenu={handleClick} onClick={handleClick}>
-        {text}
-      </a>
+    z === 0 ? null : handleClick ? (
+      <a>{text}</a>
     ) : (
       text
     );
@@ -69,7 +67,12 @@ export const LineageGroup = ({
     active ? ["active"] : [],
   ]);
   return (
-    <g className={classNames} onMouseOver={onHover} onContextMenu={handleClick}>
+    <g
+      className={classNames}
+      onMouseOver={onHover}
+      onClick={z === 0 ? undefined : handleClick}
+      onContextMenu={handleClick}
+    >
       <title>{name}</title>
       <rect x={x} y={y} rx="6" ry="6" width={w} height={h} />
       {content}

package/src/components/LineageResource.js

@@ -54,6 +54,7 @@ export const LineageResource = ({
     <g
       className={`resource ${active ? "active" : ""}`}
       onMouseOver={onHover}
+      onClick={handleClick}
       onContextMenu={handleClick}
     >
       <title>{name}</title>

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

@@ -1,4 +1,5 @@
 import { render, waitForLoad } from "@truedat/test/render";
+import { fireEvent } from "@testing-library/react";
 import { LineageGroup } from "../LineageGroup";
 
 // Mock LineageContextMenu component
@@ -36,6 +37,10 @@ describe("<LineageGroup />", () => {
     onHover,
   };
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it("matches the latest snapshot", async () => {
     const rendered = render(
       <svg>
@@ -76,4 +81,30 @@ describe("<LineageGroup />", () => {
     await waitForLoad(rendered);
     expect(rendered.container.querySelector(".popup")).not.toBeInTheDocument();
   });
+
+  it("selects the group when clicking the node body", async () => {
+    const rendered = render(
+      <svg>
+        <LineageGroup {...props} />
+      </svg>
+    );
+    await waitForLoad(rendered);
+
+    fireEvent.click(rendered.container.querySelector("rect"));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not select the group when z is 0", async () => {
+    const rendered = render(
+      <svg>
+        <LineageGroup {...props} z={0} />
+      </svg>
+    );
+    await waitForLoad(rendered);
+
+    fireEvent.click(rendered.container.querySelector("rect"));
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
 });

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

@@ -1,4 +1,5 @@
 import { render, waitForLoad } from "@truedat/test/render";
+import { fireEvent } from "@testing-library/react";
 import { LineageResource } from "../LineageResource";
 
 // Mock LineageContextMenu component
@@ -32,6 +33,10 @@ describe("<LineageResource />", () => {
     onHover,
   };
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it("matches the latest snapshot", async () => {
     const rendered = render(
       <svg>
@@ -72,4 +77,17 @@ describe("<LineageResource />", () => {
     await waitForLoad(rendered);
     expect(rendered.container.querySelector(".popup")).not.toBeInTheDocument();
   });
+
+  it("selects the resource when clicking the node body", async () => {
+    const rendered = render(
+      <svg>
+        <LineageResource {...props} />
+      </svg>
+    );
+    await waitForLoad(rendered);
+
+    fireEvent.click(rendered.container.querySelector("rect"));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
 });

package/src/styles/lineageGraph.less

@@ -52,17 +52,19 @@
 }
 
 .structure-lineage .dl {
+  height: 100%;
   padding: 0;
   margin: 0;
 }
 
 .structure-lineage .dl svg {
-  height: clamp(340px, 52vw, 640px) !important;
-  max-height: 640px;
+  width: 100%;
+  height: 100% !important;
+  min-height: 340px;
   background-color: #f7f8fa;
   padding: 0;
   margin: 0;
   display: block;
   margin-left: 0;
   margin-right: 0;
-}
+}