fix: column level lineage rendering (#11250)

* fix: column level lineage rendering

* fix: show drawer for selected node
This commit is contained in:
karanh37 2023-04-25 15:06:25 +05:30 committed by GitHub
parent 1cec768993
commit 20b6dbb8b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 16 deletions

View File

@ -197,6 +197,7 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
const [nodes, setNodes, onNodesChange] = useNodesState([]); const [nodes, setNodes, onNodesChange] = useNodesState([]);
const [edges, setEdges, onEdgesChange] = useEdgesState([]); const [edges, setEdges, onEdgesChange] = useEdgesState([]);
const edgesRef = useRef<Edge[]>([]);
const [paginationData, setPaginationData] = useState({}); const [paginationData, setPaginationData] = useState({});
const [entityLineage, setEntityLineage] = useState<EntityLineage>(); const [entityLineage, setEntityLineage] = useState<EntityLineage>();
const [updatedLineageData, setUpdatedLineageData] = useState<EntityLineage>(); const [updatedLineageData, setUpdatedLineageData] = useState<EntityLineage>();
@ -368,11 +369,7 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
if (node.type === EntityLineageNodeType.LOAD_MORE) { if (node.type === EntityLineageNodeType.LOAD_MORE) {
selectLoadMoreNode(node); selectLoadMoreNode(node);
} else { } else {
const selectedNode = [ const selectedNode = node.data.node;
...(updatedLineageData?.nodes || []),
updatedLineageData?.entity,
].find((n) => n && node.id.includes(n.id));
if (!expandButton.current) { if (!expandButton.current) {
selectNodeHandler(true, { selectNodeHandler(true, {
name: selectedNode?.name as string, name: selectedNode?.name as string,
@ -697,7 +694,10 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
...col, ...col,
type: isEditMode type: isEditMode
? EntityLineageNodeType.DEFAULT ? EntityLineageNodeType.DEFAULT
: getColumnType(edges, col.fullyQualifiedName || col.name), : getColumnType(
edgesRef.current,
col.fullyQualifiedName || col.name
),
}; };
}); });
prevNode.data.columns = cols; prevNode.data.columns = cols;
@ -1213,7 +1213,10 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
...col, ...col,
type: isEditMode type: isEditMode
? 'default' ? 'default'
: getColumnType(edges, col.fullyQualifiedName || col.name), : getColumnType(
edgesRef.current,
col.fullyQualifiedName || col.name
),
}; };
}); });
node.data.columns = cols; node.data.columns = cols;
@ -1640,6 +1643,10 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
} }
}, [pipelineSearchValue]); }, [pipelineSearchValue]);
useEffect(() => {
edgesRef.current = edges;
}, [edges]);
if (isLineageLoading || (nodes.length === 0 && !deleted)) { if (isLineageLoading || (nodes.length === 0 && !deleted)) {
return <Loader />; return <Loader />;
} }

View File

@ -257,16 +257,7 @@ export const getLineageData = (
edge.lineageDetails.columnsLineage?.forEach((e) => { edge.lineageDetails.columnsLineage?.forEach((e) => {
const toColumn = e.toColumn || ''; const toColumn = e.toColumn || '';
if (toColumn && e.fromColumns && e.fromColumns.length > 0) { if (toColumn && e.fromColumns && e.fromColumns.length > 0) {
const targetCol = nodes.find((n) => toColumn === n.id);
if (!targetCol) {
return;
}
e.fromColumns.forEach((fromColumn) => { e.fromColumns.forEach((fromColumn) => {
const sourceCol = nodes.find((n) => fromColumn === n.id);
if (!sourceCol) {
return;
}
lineageEdgesV1.push({ lineageEdgesV1.push({
id: `column-${fromColumn}-${toColumn}-edge-${edge.fromEntity}-${edge.toEntity}`, id: `column-${fromColumn}-${toColumn}-edge-${edge.fromEntity}-${edge.toEntity}`,
source: edge.fromEntity, source: edge.fromEntity,