yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-08-18 14:16:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(lineage): adding directionality to lineage edges to make the visualization more clear (#2335)

Browse Source
This commit is contained in:
Gabe Lyons 2021-04-05 12:15:05 -07:00 committed by GitHub
parent 17f7c9efd0
commit 0500e50463
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
datahub-web-react/src/app/lineage/LineageEntityNode.tsx
View File

@ -13,8 +13,8 @@ function truncate(input, length) {
return input;
}
const width = 140;
const height = 80;
export const width = 140;
export const height = 80;
const centerX = -width / 2;
const centerY = -height / 2;

2
datahub-web-react/src/app/lineage/LineageTreeNodeAndEdgeRenderer.tsx
View File

@ -119,6 +119,8 @@ export default function LineageTreeNodeAndEdgeRenderer({
fill="none"
key={`edge-${link.source.data.urn}-${link.target.data.urn}-${direction}`}
data-testid={`edge-${link.source.data.urn}-${link.target.data.urn}-${direction}`}
markerEnd="url(#triangle-downstream)"
markerStart="url(#triangle-upstream)"
/>
);
})}

16
datahub-web-react/src/app/lineage/LineageViz.tsx
View File

@ -92,9 +92,9 @@ export default function LineageViz({
>
<defs>
<marker
id="triangle"
id="triangle-downstream"
viewBox="0 0 10 10"
refX="80"
refX="10"
refY="5"
markerUnits="strokeWidth"
markerWidth="10"
@ -103,6 +103,18 @@ export default function LineageViz({
>
<path d="M 0 0 L 10 5 L 0 10 z" fill="#000" />
</marker>
<marker
id="triangle-upstream"
viewBox="0 0 10 10"
refX="0"
refY="5"
markerUnits="strokeWidth"
markerWidth="10"
markerHeight="10"
orient="auto"
>
<path d="M 0 5 L 10 10 L 10 0 L 0 5 z" fill="#000" />
</marker>
</defs>
<rect width={width} height={height} fill="#f6f8fa" />
<LineageTree

6
datahub-web-react/src/app/lineage/utils/adjustVXTreeLayout.ts
View File

@ -1,5 +1,7 @@
import { HierarchyPointNode } from '@vx/hierarchy/lib/types';
import { NodeData, Direction } from '../types';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { width as nodeWidth } from '../LineageEntityNode';
export default function adjustVXTreeLayout({
tree,
@ -50,12 +52,12 @@ export default function adjustVXTreeLayout({
const edgesToReturn = tree.links().map((linkToCopy) => ({
target: {
x: linkToCopy.target.x,
y: linkToCopy.target.y,
y: linkToCopy.target.y + (direction === Direction.Upstream ? 0 : -(nodeWidth / 2)),
data: { ...linkToCopy.target.data },
},
source: {
x: linkToCopy.source.x,
y: linkToCopy.source.y,
y: linkToCopy.source.y + (direction === Direction.Upstream ? -(nodeWidth / 2) : 0),
data: { ...linkToCopy.source.data },
},
}));