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; return input;
} }
const width = 140; export const width = 140;
const height = 80; export const height = 80;
const centerX = -width / 2; const centerX = -width / 2;
const centerY = -height / 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" fill="none"
key={`edge-${link.source.data.urn}-${link.target.data.urn}-${direction}`} key={`edge-${link.source.data.urn}-${link.target.data.urn}-${direction}`}
data-testid={`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> <defs>
<marker <marker
id="triangle" id="triangle-downstream"
viewBox="0 0 10 10" viewBox="0 0 10 10"
refX="80" refX="10"
refY="5" refY="5"
markerUnits="strokeWidth" markerUnits="strokeWidth"
markerWidth="10" markerWidth="10"
@ -103,6 +103,18 @@ export default function LineageViz({
> >
<path d="M 0 0 L 10 5 L 0 10 z" fill="#000" /> <path d="M 0 0 L 10 5 L 0 10 z" fill="#000" />
</marker> </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> </defs>
<rect width={width} height={height} fill="#f6f8fa" /> <rect width={width} height={height} fill="#f6f8fa" />
<LineageTree <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 { HierarchyPointNode } from '@vx/hierarchy/lib/types';
import { NodeData, Direction } from '../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({ export default function adjustVXTreeLayout({
tree, tree,
@ -50,12 +52,12 @@ export default function adjustVXTreeLayout({
const edgesToReturn = tree.links().map((linkToCopy) => ({ const edgesToReturn = tree.links().map((linkToCopy) => ({
target: { target: {
x: linkToCopy.target.x, x: linkToCopy.target.x,
y: linkToCopy.target.y, y: linkToCopy.target.y + (direction === Direction.Upstream ? 0 : -(nodeWidth / 2)),
data: { ...linkToCopy.target.data }, data: { ...linkToCopy.target.data },
}, },
source: { source: {
x: linkToCopy.source.x, x: linkToCopy.source.x,
y: linkToCopy.source.y, y: linkToCopy.source.y + (direction === Direction.Upstream ? -(nodeWidth / 2) : 0),
data: { ...linkToCopy.source.data }, data: { ...linkToCopy.source.data },
}, },
})); }));