Change lineage positioning algorithm (#18897)

* use elk algorithm to position nodes * change positioning * fix spacing * do not reset zoom value * minor pw fix * force click on lineage edge
open-metadata · Dec 4, 2024 · fe661a2 · fe661a2
1 parent e2789da
commit fe661a2
Show file tree

Hide file tree

Showing 10 changed files with 260 additions and 123 deletions.
diff --git a/openmetadata-ui/src/main/resources/ui/package.json b/openmetadata-ui/src/main/resources/ui/package.json
@@ -85,6 +85,7 @@
     "eventemitter3": "^5.0.1",
     "fast-json-patch": "^3.1.1",
     "history": "4.5.1",
+    "elkjs": "^0.9.3",
     "html-react-parser": "^1.4.14",
     "https-browserify": "^1.0.0",
     "i18next": "^21.10.0",

diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Lineage.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Lineage.spec.ts
@@ -92,58 +92,70 @@ for (const EntityClass of entities) {
       defaultEntity
     );
 
-    await test.step('Should create lineage for the entity', async () => {
-      await redirectToHomePage(page);
-      await currentEntity.visitEntityPage(page);
-      await visitLineageTab(page);
-      await verifyColumnLayerInactive(page);
-      await editLineage(page);
-      await performZoomOut(page);
-      for (const entity of entities) {
-        await connectEdgeBetweenNodes(page, currentEntity, entity);
-      }
-
-      await redirectToHomePage(page);
-      await currentEntity.visitEntityPage(page);
-      await visitLineageTab(page);
-      await page
-        .locator('.react-flow__controls-fitview')
-        .dispatchEvent('click');
-
-      for (const entity of entities) {
-        await verifyNodePresent(page, entity);
-      }
-    });
-
-    await test.step('Should create pipeline between entities', async () => {
-      await editLineage(page);
-      await performZoomOut(page);
-
-      for (const entity of entities) {
-        await applyPipelineFromModal(page, currentEntity, entity, pipeline);
-      }
-    });
-
-    await test.step('Verify Lineage Export CSV', async () => {
-      await redirectToHomePage(page);
-      await currentEntity.visitEntityPage(page);
-      await visitLineageTab(page);
-      await verifyExportLineageCSV(page, currentEntity, entities, pipeline);
-    });
-
-    await test.step('Remove lineage between nodes for the entity', async () => {
-      await redirectToHomePage(page);
-      await currentEntity.visitEntityPage(page);
-      await visitLineageTab(page);
-      await editLineage(page);
-      await performZoomOut(page);
-
-      for (const entity of entities) {
-        await deleteEdge(page, currentEntity, entity);
-      }
-    });
+    try {
+      await test.step('Should create lineage for the entity', async () => {
+        await redirectToHomePage(page);
+        await currentEntity.visitEntityPage(page);
+        await visitLineageTab(page);
+        await verifyColumnLayerInactive(page);
+        await editLineage(page);
+        await performZoomOut(page);
+        for (const entity of entities) {
+          await connectEdgeBetweenNodes(page, currentEntity, entity);
+        }
 
-    await cleanup();
+        await redirectToHomePage(page);
+        await currentEntity.visitEntityPage(page);
+        await visitLineageTab(page);
+        await page.click('[data-testid="edit-lineage"]');
+        await page
+          .locator('.react-flow__controls-fitview')
+          .dispatchEvent('click');
+
+        for (const entity of entities) {
+          await verifyNodePresent(page, entity);
+        }
+        await page.click('[data-testid="edit-lineage"]');
+      });
+
+      await test.step('Should create pipeline between entities', async () => {
+        await redirectToHomePage(page);
+        await currentEntity.visitEntityPage(page);
+        await visitLineageTab(page);
+        await editLineage(page);
+        await page
+          .locator('.react-flow__controls-fitview')
+          .dispatchEvent('click');
+
+        for (const entity of entities) {
+          await applyPipelineFromModal(page, currentEntity, entity, pipeline);
+        }
+      });
+
+      await test.step('Verify Lineage Export CSV', async () => {
+        await redirectToHomePage(page);
+        await currentEntity.visitEntityPage(page);
+        await visitLineageTab(page);
+        await verifyExportLineageCSV(page, currentEntity, entities, pipeline);
+      });
+
+      await test.step(
+        'Remove lineage between nodes for the entity',
+        async () => {
+          await redirectToHomePage(page);
+          await currentEntity.visitEntityPage(page);
+          await visitLineageTab(page);
+          await editLineage(page);
+          await performZoomOut(page);
+
+          for (const entity of entities) {
+            await deleteEdge(page, currentEntity, entity);
+          }
+        }
+      );
+    } finally {
+      await cleanup();
+    }
   });
 }
 

diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/lineage.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/lineage.ts
@@ -132,7 +132,9 @@ export const dragAndDropNode = async (
   await page.hover(originSelector);
   await page.mouse.down();
   const box = (await destinationElement.boundingBox())!;
-  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+  const x = (box.x + box.width / 2) * 0.25; // 0.25 as zoom factor
+  const y = (box.y + box.height / 2) * 0.25; // 0.25 as zoom factor
+  await page.mouse.move(x, y);
   await destinationElement.hover();
   await page.mouse.up();
 };
@@ -348,7 +350,8 @@ export const applyPipelineFromModal = async (
 
   await page
     .locator(`[data-testid="edge-${fromNodeFqn}-${toNodeFqn}"]`)
-    .dispatchEvent('click');
+    .click({ force: true });
+
   await page.locator('[data-testid="add-pipeline"]').dispatchEvent('click');
 
   const waitForSearchResponse = page.waitForResponse(

diff --git a/...adata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageNodeLabelV1.tsx b/...adata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageNodeLabelV1.tsx
@@ -85,12 +85,8 @@ const LineageNodeLabelV1 = ({ node }: Pick<LineageNodeLabelProps, 'node'>) => {
   return (
     <div className="w-76">
       <div className="m-0 p-x-md p-y-xs">
-        <div className="d-flex gap-2 items-center m-b-xs">
-          <Space
-            wrap
-            align="start"
-            className="lineage-breadcrumb w-full"
-            size={4}>
+        {breadcrumbs.length > 0 && (
+          <div className="d-flex gap-2 items-center m-b-xs lineage-breadcrumb">
             {breadcrumbs.map((breadcrumb, index) => (
               <React.Fragment key={breadcrumb.name}>
                 <Typography.Text
@@ -105,8 +101,9 @@ const LineageNodeLabelV1 = ({ node }: Pick<LineageNodeLabelProps, 'node'>) => {
                 )}
               </React.Fragment>
             ))}
-          </Space>
-        </div>
+          </div>
+        )}
+
         <EntityLabel node={node} />
       </div>
     </div>

diff --git a/.../resources/ui/src/components/Entity/EntityLineage/NodeChildren/NodeChildren.component.tsx b/.../resources/ui/src/components/Entity/EntityLineage/NodeChildren/NodeChildren.component.tsx
@@ -113,6 +113,10 @@ const NodeChildren = ({ node, isConnectable }: NodeChildrenProps) => {
     }
   }, [children]);
 
+  useEffect(() => {
+    setShowAllColumns(expandAllColumns);
+  }, [expandAllColumns]);
+
   const renderRecord = useCallback(
     (record: Column) => {
       const isColumnTraced = tracedColumns.includes(

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less
@@ -30,6 +30,7 @@
 .ant-btn.ant-btn-background-ghost.expand-btn {
   background-color: white;
   box-shadow: none;
+
   &:hover {
     background-color: white;
   }
@@ -43,23 +44,28 @@
   border: 1px solid @lineage-border;
   border-radius: 10px;
   overflow: hidden;
+
   .profiler-item {
     width: 36px;
     height: 36px;
     margin-right: 4px;
     border-radius: 4px;
     line-height: 36px;
     font-size: 14px;
+
     &.green {
       border: 1px solid @green-5;
     }
+
     &.amber {
       border: 1px solid @yellow-4;
     }
+
     &.red {
       border: 1px solid @red-5;
     }
   }
+
   .column-container {
     min-height: 48px;
     padding: 12px;
@@ -68,19 +74,24 @@
     .lineage-collapse-column.ant-collapse {
       border: none;
       border-radius: 0;
+
       .ant-collapse-header {
         padding: 0;
         font-size: 12px;
+
         .custom-node-column-container {
           background-color: @lineage-collapse-header;
         }
+
         .lineage-column-node-handle {
           background-color: @lineage-collapse-header;
         }
       }
+
       .ant-collapse-content-box {
         padding: 4px;
       }
+
       .ant-collapse-item {
         border: none;
         border-radius: 0;
@@ -114,6 +125,7 @@
   .lineage-node-handle {
     border-color: @primary-color;
   }
+
   .lineage-node {
     border-color: @primary-color !important;
   }
@@ -137,15 +149,19 @@
   .lineage-node {
     border-color: @primary-color !important;
   }
+
   .lineage-node-handle {
     border-color: @primary-color;
+
     svg {
       color: @primary-color;
     }
   }
+
   .label-container {
     background: @primary-1;
   }
+
   .column-container {
     background: @primary-1;
     border-top: 1px solid @border-color;
@@ -171,15 +187,19 @@
     &.lineage-node {
       border-color: @red-3 !important;
     }
+
     .lineage-node-handle {
       border-color: @red-3;
+
       svg {
         color: @red-3;
       }
     }
+
     .label-container {
       background: fade(@red-3, 10%);
     }
+
     .column-container {
       background: fade(@red-3, 10%);
       border-top: 1px solid @border-color;
@@ -191,15 +211,18 @@
   .label-container {
     background: @primary-1;
   }
+
   .column-container {
     background: @primary-1;
     border-top: 1px solid @border-color;
   }
 }
+
 .data-quality-failed-custom-node-header.custom-node-header-active {
   .label-container {
     background: fade(@red-3, 10%);
   }
+
   .column-container {
     background: fade(@red-3, 10%);
     border-top: 1px solid @red-3;
@@ -214,6 +237,7 @@
   .lineage-node-handle.react-flow__handle-left {
     left: -22px;
   }
+
   .lineage-node-handle.react-flow__handle-right {
     right: -22px;
   }
@@ -227,6 +251,7 @@
   border-color: @lineage-border !important;
   background: @white !important;
   top: 43px !important; // Need to show handles on top half
+
   svg {
     color: @text-grey-muted;
   }
@@ -241,9 +266,11 @@
   height: 25px;
   transform: none;
   border: none;
+
   &.react-flow__handle-left {
     left: 0;
   }
+
   &.react-flow__handle-right {
     right: 0;
   }
@@ -266,6 +293,7 @@
 
     .custom-node-name-icon {
       width: 14px;
+      display: flex;
     }
   }
 

diff --git a/...data-ui/src/main/resources/ui/src/components/Entity/EntityLineage/lineage-node-label.less b/...data-ui/src/main/resources/ui/src/components/Entity/EntityLineage/lineage-node-label.less
@@ -15,9 +15,9 @@
     height: 28px;
     width: 28px;
   }
+
   .lineage-breadcrumb {
     .lineage-breadcrumb-item {
-      max-width: 140px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;