Skip to content

Commit

Permalink
fix: Lineage render problem (#2408)
Browse files Browse the repository at this point in the history
* fix: Lineage render problem

* Spotless Apply

---------

Co-authored-by: leechor <[email protected]>
  • Loading branch information
leechor and leechor authored Oct 19, 2023
1 parent 4fb4303 commit 227b6e9
Show file tree
Hide file tree
Showing 3 changed files with 194 additions and 114 deletions.
189 changes: 88 additions & 101 deletions dinky-web/src/components/LineageGraph/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Badge, Tooltip, Typography } from 'antd';

import LineageDagExt from '@/components/LineageGraph/lineage-dag-ext';
import {
LineageDetailInfo,
LineageRelations,
Expand All @@ -18,11 +19,8 @@ import {
} from '@ant-design/icons';
import _ from 'lodash';
import React, { useEffect } from 'react';
import LineageDag from 'react-lineage-dag';
import 'react-lineage-dag/dist/index.css';

const { Text } = Typography;

interface LineageState {
lineageData: LineageDetailInfo;
canvas: any;
Expand All @@ -42,6 +40,20 @@ interface LineageState {
collapseUpstream: boolean;
}

type JobLineageProps = {
lineageData: LineageDetailInfo;
refreshCallBack: () => void;
};

type ITable = {
id: string;
name: string;
isCollapse: boolean;
fields: LineageTableColumn[];
};

const { Text } = Typography;

const InitLineageState: LineageState = {
lineageData: {
tables: [],
Expand All @@ -64,48 +76,22 @@ const InitLineageState: LineageState = {
collapseUpstream: false
};

type JobLineageProps = {
lineageData: LineageDetailInfo;
refreshCallBack: () => void;
};

type ITable = {
id: string;
name: string;
isCollapse: boolean;
fields: LineageTableColumn[];
};

const LineageGraph: React.FC<JobLineageProps> = (props) => {
const { lineageData, refreshCallBack } = props;

const [lineageState, setLineageState] = React.useState<LineageState>(InitLineageState);

useEffect(() => {
if (lineageData) {
setLineageState((prevState) => ({
...prevState,
lineageData: lineageData,
tables: buildLineageTables(lineageData.tables),
relations: buildLineageRelations(lineageData.relations)
}));
}
}, [lineageData, lineageState.refresh]);

const buildLineageColumns = (data: LineageDetailInfo) => {
return [
{
key: 'id',
width: '100',
render: (text: any, record: any, index: number) => {
return (
<>
<Badge
count={index + 1}
size={'small'}
color={index < 10 ? 'red' : index < 20 ? 'blue' : index < 30 ? 'gold' : 'cyan'}
/>
</>
<Badge
count={index + 1}
size={'small'}
color={index < 10 ? 'red' : index < 20 ? 'blue' : index < 30 ? 'gold' : 'cyan'}
/>
);
}
},
Expand Down Expand Up @@ -143,26 +129,19 @@ const LineageGraph: React.FC<JobLineageProps> = (props) => {
}));
};

function findTableById(id: string) {
const { tables } = lineageState;
return tables.find((item) => {
return String(item.id) === String(id);
});
}

const handleExpandField = (nodeData: any, tables: ITable[]) => {
const { isCollapse, id } = nodeData;
console.log(id, findTableById(id), tables);
const iTable = findTableById(id);
if (iTable) {
iTable.isCollapse = isCollapse;
}
lineageState.tables
.filter((item) => item.id === id)
.forEach((item) => (item.isCollapse = isCollapse));

// todo: 待实现 展开字段
setLineageState((prevState) => ({ ...prevState, expandField: !prevState.expandField }));
SuccessNotification(
lineageState.expandField ? l('lineage.expandField') : l('lineage.expandField')
);
};

const buildActionMenu = (data: ITable[]) => {
return [
{
Expand Down Expand Up @@ -273,7 +252,7 @@ const LineageGraph: React.FC<JobLineageProps> = (props) => {
];
};

const renderTitle = (title: string) => {
const RenderTitle = (title: string) => {
return (
<Text
title={title}
Expand All @@ -291,62 +270,70 @@ const LineageGraph: React.FC<JobLineageProps> = (props) => {
);
};

useEffect(() => {
if (lineageData) {
setLineageState((prevState) => ({
...prevState,
lineageData: lineageData,
tables: buildLineageTables(lineageData.tables),
relations: buildLineageRelations(lineageData.relations)
}));
}
}, [lineageData, lineageState.refresh]);

return (
<>
<LineageDag
delayDraw={2000}
tables={buildLineageTables(lineageState.lineageData.tables)}
relations={buildLineageRelations(lineageState.lineageData.relations)}
columns={buildLineageColumns(lineageState.lineageData)}
operator={buildActionMenu(lineageState.tables)}
centerId={lineageState.centerId}
onLoaded={(canvas: any) => setLineageState((prevState) => ({ ...prevState, canvas }))}
onChange={(data: any) =>
setLineageState((prevState) => ({ ...prevState, centerId: data.id }))
}
config={{
titleRender: (title: string) => renderTitle(title),
minimap: { enable: lineageState.showMinimap },
enableHoverChain: true,
showActionIcon: true,
gridMode: {
isAdsorb: true,
theme: {
shapeType: 'line',
gap: 20,
lineWidth: 1,
lineColor: '#e8e8e8',
circleRadiu: 5,
circleColor: '#e8e8e8'
}
<LineageDagExt
tables={buildLineageTables(lineageState.lineageData.tables)}
relations={buildLineageRelations(lineageState.lineageData.relations)}
columns={buildLineageColumns(lineageState.lineageData)}
operator={buildActionMenu(lineageState.tables)}
centerId={lineageState.centerId}
onLoaded={(canvas: any) => setLineageState((prevState) => ({ ...prevState, canvas }))}
onChange={(data: any) =>
setLineageState((prevState) => ({ ...prevState, centerId: data.id }))
}
config={{
titleRender: (title: string) => RenderTitle(title),
minimap: { enable: lineageState.showMinimap },
enableHoverChain: true,
showActionIcon: true,
gridMode: {
isAdsorb: true,
theme: {
shapeType: 'line',
gap: 20,
lineWidth: 1,
lineColor: '#e8e8e8',
circleRadiu: 5,
circleColor: '#e8e8e8'
}
// theme: {
// isMouseMoveStopPropagation: true,
// autoFixCanvas: {
// enable: true,
// autoMovePadding: [40, 40, 40, 40],
// },
// edge: {
// type: 'endpoint',
// shapeType: 'AdvancedBezier',
// hasRadius: true,
// isExpandWidth: true,
// label: '111',
// defaultAnimate: true,
// arrowPosition: 1,
// arrowOffset: -5
// },
// }
}}
butterfly={{
zoomable: true,
draggable: true,
movable: true,
linkable: true
}}
actionMenu={renderExtActionButton()}
/>
</>
}
// theme: {
// isMouseMoveStopPropagation: true,
// autoFixCanvas: {
// enable: true,
// autoMovePadding: [40, 40, 40, 40],
// },
// edge: {
// type: 'endpoint',
// shapeType: 'AdvancedBezier',
// hasRadius: true,
// isExpandWidth: true,
// label: '111',
// defaultAnimate: true,
// arrowPosition: 1,
// arrowOffset: -5
// },
// }
}}
butterfly={{
zoomable: true,
draggable: true,
movable: true,
linkable: true
}}
actionMenu={renderExtActionButton()}
/>
);
};

Expand Down
95 changes: 95 additions & 0 deletions dinky-web/src/components/LineageGraph/lineage-dag-ext.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import LineageDag from 'react-lineage-dag';

import * as _ from 'lodash';
import * as ReactDOM from 'react-dom';
import { transformEdges, transformInitData } from 'react-lineage-dag/src/adaptor';
import LineageCanvas from 'react-lineage-dag/src/canvas/canvas';

export default class LineageDagExt extends LineageDag {
componentDidMount() {
let root = ReactDOM.findDOMNode(this) as HTMLElement;

let enableHoverChain = _.get(this.props, 'config.enableHoverChain', true);
let titleRender = _.get(this.props, 'config.titleRender');

let canvasObj = {
root: root,
disLinkable: false,
linkable: false,
draggable: false,
zoomable: true,
moveable: true,
theme: {
edge: {
type: 'endpoint',
// shapeType: 'AdvancedBezier',
arrow: true,
isExpandWidth: true,
arrowPosition: 1,
arrowOffset: -5
},
endpoint: {
limitNum: undefined,
expandArea: {
left: 0,
right: 0,
top: 0,
botton: 0
}
}
},
data: {
enableHoverChain: enableHoverChain
}
};

this.canvas = new LineageCanvas(canvasObj);

let result = transformInitData({
tables: this.props.tables,
relations: this.props.relations,
columns: this.props.columns,
operator: this.props.operator,
_titleRender: titleRender,
_enableHoverChain: enableHoverChain,
_emptyContent: this.props.emptyContent,
_emptyWidth: this.props.emptyWidth
});

this.originEdges = result.edges;

result = transformEdges(result.nodes, _.cloneDeep(result.edges));
this.canvasData = {
nodes: result.nodes,
edges: result.edges
};

let minimap = _.get(this, 'props.config.minimap', {});

const minimapCfg = _.assign({}, minimap.config, {
events: ['system.node.click', 'system.canvas.click']
});

if (minimap && minimap.enable) {
this.canvas.setMinimap(true, minimapCfg);
}

if (_.get(this, 'props.config.gridMode')) {
this.canvas.setGridMode(true, _.assign({}, _.get(this, 'props.config.gridMode', {})));
}

if (result.nodes.length !== 0) {
this.canvas.focusCenterWithAnimate();
this._isFirstFocus = true;
}

this.props.onLoaded && this.props.onLoaded(this.canvas);
this.canvas.on('system.node.click', (data) => {
let node = data.node;
this.canvas.focus(node.id);
});
this.canvas.on('system.canvas.click', () => {
this.canvas.unfocus();
});
}
}
24 changes: 11 additions & 13 deletions dinky-web/src/pages/DataStudio/BottomContainer/Lineage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,19 +54,17 @@ const Lineage: React.FC<connect> = (props) => {
}, [activeKey]);

return (
<>
<Card hoverable bodyStyle={{ height: bottomHeight - 50 }} style={{ height: bottomHeight }}>
{lineageData && (lineageData.tables.length !== 0 || lineageData.relations.length !== 0) ? (
<LineageGraph lineageData={lineageData} refreshCallBack={queryLineageData} />
) : (
<Result
style={{ height: bottomHeight - 120 }}
status='warning'
title={l('lineage.getError')}
/>
)}
</Card>
</>
<Card hoverable bodyStyle={{ height: bottomHeight - 50 }} style={{ height: bottomHeight }}>
{lineageData && (lineageData.tables.length !== 0 || lineageData.relations.length !== 0) ? (
<LineageGraph lineageData={lineageData} refreshCallBack={queryLineageData} />
) : (
<Result
style={{ height: bottomHeight - 120 }}
status='warning'
title={l('lineage.getError')}
/>
)}
</Card>
);
};

Expand Down

0 comments on commit 227b6e9

Please sign in to comment.