yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2026-01-03 13:24:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui) Display duplicate nodes in lineage viz (#6526)

Browse Source
This commit is contained in:
Chris Collins 2022-11-23 18:14:21 -06:00 committed by GitHub
parent cc832124df
commit 6255181169
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 14 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
datahub-web-react/src/app/lineage/LineageTree.tsx
View File

@ -1,7 +1,7 @@
import React, { useContext, useEffect, useMemo, useState } from 'react';
import { TransformMatrix } from '@vx/zoom/lib/types';
import { NodeData, Direction, EntitySelectParams, TreeProps, EntityAndType, FetchedEntity } from './types';
import { NodeData, EntitySelectParams, TreeProps, EntityAndType, FetchedEntity } from './types';
import LineageTreeNodeAndEdgeRenderer from './LineageTreeNodeAndEdgeRenderer';
import layoutTree from './utils/layoutTree';
import { LineageExplorerContext } from './utils/LineageExplorerContext';
@ -21,7 +21,6 @@ type LineageTreeProps = {
hoveredEntity?: EntitySelectParams;
setHoveredEntity: (EntitySelectParams) => void;
margin: TreeProps['margin'];
direction: Direction;
canvasHeight: number;
setIsDraggingNode: (isDraggingNode: boolean) => void;
draggedNodes: Record<string, { x: number; y: number }>;
@ -40,7 +39,6 @@ export default function LineageTree({
selectedEntity,
hoveredEntity,
setHoveredEntity,
direction,
canvasHeight,
setIsDraggingNode,
draggedNodes,
@ -151,7 +149,6 @@ export default function LineageTree({
selectedEntity={selectedEntity}
hoveredEntity={hoveredEntity}
setHoveredEntity={setHoveredEntity}
direction={direction}
/>
);
}

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

@ -4,7 +4,7 @@ import { curveBasis } from '@vx/curve';
import { LinePath } from '@vx/shape';
import { TransformMatrix } from '@vx/zoom/lib/types';
import { NodeData, Direction, EntitySelectParams, TreeProps, VizNode, VizEdge, EntityAndType } from './types';
import { NodeData, EntitySelectParams, TreeProps, VizNode, VizEdge, EntityAndType } from './types';
import LineageEntityNode from './LineageEntityNode';
import { ANTD_GRAY } from '../entity/shared/constants';
import { LineageExplorerContext } from './utils/LineageExplorerContext';
@ -22,7 +22,6 @@ type Props = {
setHoveredEntity: (EntitySelectParams) => void;
onDrag: (params: EntitySelectParams, event: React.MouseEvent) => void;
margin: TreeProps['margin'];
direction: Direction;
nodesToRender: VizNode[];
edgesToRender: VizEdge[];
nodesByUrn: Record<string, VizNode>;
@ -50,7 +49,6 @@ export default function LineageTreeNodeAndEdgeRenderer({
hoveredEntity,
setHoveredEntity,
onDrag,
direction,
nodesToRender,
edgesToRender,
nodesByUrn,
@ -77,7 +75,7 @@ export default function LineageTreeNodeAndEdgeRenderer({
const isHighlighted = isLinkHighlighted(link);
const key = `edge-${idx}-${link.source.data.urn}${link.sourceField && `-${link.sourceField}`}-${
link.target.data.urn
}${link.targetField && `-${link.targetField}`}-${direction}`;
}${link.targetField && `-${link.targetField}`}-${link.target.direction}`;
return (
<Group key={key}>
@ -91,18 +89,19 @@ export default function LineageTreeNodeAndEdgeRenderer({
strokeWidth="1"
markerEnd={`url(#triangle-downstream${isHighlighted ? '-highlighted' : ''})`}
markerStart={`url(#triangle-upstream${isHighlighted ? '-highlighted' : ''})`}
data-testid={`edge-${link.source.data.urn}-${link.target.data.urn}-${direction}`}
data-testid={`edge-${link.source.data.urn}-${link.target.data.urn}-${link.target.direction}`}
/>
</Group>
);
})}
{nodesToRender.map((node) => {
{nodesToRender.map((node, index) => {
const isSelected = node.data.urn === selectedEntity?.urn;
const isHovered = node.data.urn === hoveredEntity?.urn;
const key = `node-${node.data.urn}-${node.direction}-${index}`;
return (
<LineageEntityNode
key={`node-${node.data.urn}-${direction}`}
key={key}
node={node}
isSelected={isSelected}
isHovered={isHovered}

1
datahub-web-react/src/app/lineage/LineageVizInsideZoom.tsx
View File

@ -322,7 +322,6 @@ export default function LineageVizInsideZoom({
selectedEntity={selectedEntity}
hoveredEntity={hoveredEntity}
setHoveredEntity={setHoveredEntity}
direction={Direction.Downstream}
canvasHeight={height}
setIsDraggingNode={setIsDraggingNode}
draggedNodes={draggedNodes}

9
datahub-web-react/src/app/lineage/utils/layoutTree.ts
View File

@ -34,7 +34,6 @@ function layoutNodesForOneDirection(
collapsedColumnsNodes: any,
nodesToRender: VizNode[],
edgesToRender: VizEdge[],
renderedNodeUrns: Set<string>,
) {
const nodesByUrn: Record<string, VizNode> = {};
const xModifier = direction === Direction.Downstream ? 1 : UPSTREAM_X_MODIFIER;
@ -109,10 +108,7 @@ function layoutNodesForOneDirection(
node: child,
})) || []),
];
if (!renderedNodeUrns.has(node.urn)) {
nodesToRender.push(vizNodeForNode);
renderedNodeUrns.add(node.urn);
}
nodesToRender.push(vizNodeForNode);
}
if (parent) {
@ -354,7 +350,6 @@ export default function layoutTree(
nodesByUrn: Record<string, VizNode>;
layers: number;
} {
const renderedNodeUrns = new Set<string>();
const nodesToRender: VizNode[] = [];
const edgesToRender: VizEdge[] = [];
@ -368,7 +363,6 @@ export default function layoutTree(
collapsedColumnsNodes,
nodesToRender,
edgesToRender,
renderedNodeUrns,
);
const { numInCurrentLayer: numDownstream, nodesByUrn: downstreamNodesByUrn } = layoutNodesForOneDirection(
@ -381,7 +375,6 @@ export default function layoutTree(
collapsedColumnsNodes,
nodesToRender,
edgesToRender,
renderedNodeUrns,
);
const nodesByUrn = { ...upstreamNodesByUrn, ...downstreamNodesByUrn };

11
smoke-test/tests/cypress/cypress/integration/siblings/siblings.js
View File

@ -117,10 +117,11 @@ describe('siblings', () => {
// check the names
cy.get('text:contains(raw_orders)').should('have.length', 1);
cy.get('text:contains(customers)').should('have.length', 1);
cy.get('text:contains(stg_orders)').should('have.length', 1);
// center counts twice since we secretely render two center nodes
cy.get('text:contains(stg_orders)').should('have.length', 2);
// check the platform
cy.get('svg').get('text:contains(dbt & BigQuery)').should('have.length', 4);
cy.get('svg').get('text:contains(dbt & BigQuery)').should('have.length', 5);
});
it('can separate results in lineage if flag is set', () => {
@ -136,12 +137,12 @@ describe('siblings', () => {
// check the names
cy.get('text:contains(raw_orders)').should('have.length', 1);
// center node plus the downstream bigquery
cy.get('text:contains(stg_orders)').should('have.length', 2);
// center counts twice since we secretely render two center nodes, plus the downstream bigquery
cy.get('text:contains(stg_orders)').should('have.length', 3);
// check the platform
cy.get('svg').get('text:contains(dbt & BigQuery)').should('have.length', 0);
cy.get('svg').get('text:contains(Dbt)').should('have.length', 2);
cy.get('svg').get('text:contains(Dbt)').should('have.length', 3);
cy.get('svg').get('text:contains(Bigquery)').should('have.length', 1);
});
});