Skip to content

Commit b91407f

Browse files
mykalmaxmykalmax
committed
split more to include in vscode and data catalog
1 parent 27105d7 commit b91407f

17 files changed

Lines changed: 410 additions & 283 deletions

‎web/common/package.json‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,17 @@
6464
},
6565
"./styles/*": "./dist/styles/*",
6666
"./design/*": "./dist/styles/design/*",
67-
"./configs/*": "./dist/configs/*"
67+
"./configs/*": "./dist/configs/*",
68+
"./lineage": {
69+
"import": {
70+
"types": "./dist/lineage/index.d.ts",
71+
"default": "./dist/lineage/index.es.js"
72+
},
73+
"require": {
74+
"types": "./dist/lineage/index.d.ts",
75+
"default": "./dist/lineage/index.umd.js"
76+
}
77+
}
6878
},
6979
"files": [
7080
"/dist"

‎web/common/src/components/Lineage/LineageColumnLevel/ColumnLevelLineageContext.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export type ColumnLevelLineageContextValue<
6767
setFetchingColumns: React.Dispatch<React.SetStateAction<Set<TColumnID>>>
6868
}
6969

70-
export function getInitial<
70+
export function getColumnLevelLineageContextInitial<
7171
TAdjacencyListKey extends string,
7272
TAdjacencyListColumnKey extends string,
7373
TColumnID extends string = PortId,

‎web/common/src/components/Lineage/LineageLayout.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
type EdgeTypes,
66
type NodeTypes,
77
ReactFlow,
8+
ReactFlowProvider,
89
type SetCenter,
910
getConnectedEdges,
1011
getIncomers,
@@ -79,6 +80,58 @@ export function LineageLayout<
7980
event: React.MouseEvent<Element, MouseEvent>,
8081
node: LineageNode<TNodeData, TNodeID>,
8182
) => void
83+
}) {
84+
return (
85+
<ReactFlowProvider>
86+
<LineageLayoutBase
87+
nodeTypes={nodeTypes}
88+
edgeTypes={edgeTypes}
89+
className={className}
90+
controls={controls}
91+
useLineage={useLineage}
92+
onNodeClick={onNodeClick}
93+
onNodeDoubleClick={onNodeDoubleClick}
94+
/>
95+
</ReactFlowProvider>
96+
)
97+
}
98+
99+
function LineageLayoutBase<
100+
TNodeData extends LineageNodeData = LineageNodeData,
101+
TEdgeData extends LineageEdgeData = LineageEdgeData,
102+
TNodeID extends string = NodeId,
103+
TEdgeID extends string = EdgeId,
104+
TPortID extends string = PortId,
105+
>({
106+
nodeTypes,
107+
edgeTypes,
108+
className,
109+
controls,
110+
useLineage,
111+
onNodeClick,
112+
onNodeDoubleClick,
113+
}: {
114+
useLineage: LineageContextHook<
115+
TNodeData,
116+
TEdgeData,
117+
TNodeID,
118+
TEdgeID,
119+
TPortID
120+
>
121+
nodeTypes?: NodeTypes
122+
edgeTypes?: EdgeTypes
123+
className?: string
124+
controls?:
125+
| React.ReactNode
126+
| (({ setCenter }: { setCenter: SetCenter }) => React.ReactNode)
127+
onNodeClick?: (
128+
event: React.MouseEvent<Element, MouseEvent>,
129+
node: LineageNode<TNodeData, TNodeID>,
130+
) => void
131+
onNodeDoubleClick?: (
132+
event: React.MouseEvent<Element, MouseEvent>,
133+
node: LineageNode<TNodeData, TNodeID>,
134+
) => void
82135
}) {
83136
const { zoom: viewportZoom } = useViewport()
84137
const { setCenter } = useReactFlow()

‎web/common/src/components/Lineage/edge/FactoryEdgeWithGradient.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,13 @@ import React from 'react'
33
import { type LineageContextHook } from '../LineageContext'
44
import {
55
type EdgeId,
6-
type LineageEdgeData,
76
type LineageNodeData,
87
type NodeId,
9-
type PathType,
108
type PortId,
119
} from '../utils'
12-
import { EdgeWithGradient } from './EdgeWithGradient'
10+
import { EdgeWithGradient, type EdgeData } from './EdgeWithGradient'
1311
import type { Edge, EdgeProps } from '@xyflow/react'
1412

15-
export interface EdgeData extends LineageEdgeData {
16-
startColor?: string
17-
endColor?: string
18-
strokeWidth?: number
19-
pathType?: PathType
20-
}
21-
2213
export function FactoryEdgeWithGradient<
2314
TNodeData extends LineageNodeData = LineageNodeData,
2415
TEdgeData extends EdgeData = EdgeData,

‎web/common/src/components/Lineage/index.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
export * from './utils'
2+
export * from './LineageLayout'
3+
export * from './LineageContext'
4+
export * from './LineageControlButton'
5+
export * from './LineageControlIcon'
6+
export * from './help'
7+
export * from './node/base-handle'
8+
export * from './node/base-node'
9+
export * from './node/NodeContainer'
10+
export * from './node/NodeBase'
11+
export * from './node/NodeDivider'
12+
export * from './node/NodeHandleIcon'
13+
export * from './node/NodeHandles'
14+
export * from './node/NodeHandle'
15+
export * from './node/NodeHeader'
16+
export * from './node/NodePorts'
17+
export * from './node/NodePort'
18+
export * from './node/NodeAppendix'
19+
export * from './node/NodeBadge'
20+
export * from './node/useNodeMetadata'
21+
export * from './edge/EdgeWithGradient'
22+
export * from './edge/FactoryEdgeWithGradient'
23+
export * from './layout/dagreLayout'
24+
export * from './LineageColumnLevel/ColumnLevelLineageContext'
25+
export * from './LineageColumnLevel/FactoryColumn'
26+
export * from './LineageColumnLevel/useColumns'
27+
export * from './LineageColumnLevel/useColumnLevelLineage'
28+
export * from './LineageColumnLevel/help'

‎web/common/src/components/Lineage/layout/dagreLayout.ts‎

Lines changed: 68 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,90 @@
11
import {
2+
DEFAULT_NODE_WIDTH,
23
type EdgeId,
3-
type LayoutedGraph,
44
type LineageEdge,
55
type LineageEdgeData,
66
type LineageNodeData,
77
type LineageNodesMap,
88
type NodeId,
99
type PortId,
1010
} from '../utils'
11+
import dagre from 'dagre'
1112

12-
const DEFAULT_TIMEOUT = 1000 * 60 // 1 minute
13-
14-
let workerInstance: Worker | null = null
15-
16-
function getWorker(): Worker {
17-
if (workerInstance) return workerInstance
18-
19-
workerInstance = new Worker(
20-
new URL('./dagreLayout.worker.ts', import.meta.url),
21-
{ type: 'module' },
22-
)
23-
24-
return workerInstance
25-
}
26-
27-
export async function getLayoutedGraph<
13+
export function buildLayout<
2814
TNodeData extends LineageNodeData = LineageNodeData,
2915
TEdgeData extends LineageEdgeData = LineageEdgeData,
3016
TNodeID extends string = NodeId,
3117
TEdgeID extends string = EdgeId,
3218
TPortID extends string = PortId,
33-
>(
34-
edges: LineageEdge<TEdgeData, TNodeID, TEdgeID, TPortID>[],
35-
nodesMap: LineageNodesMap<TNodeData>,
36-
): Promise<LayoutedGraph<TNodeData, TEdgeData, TNodeID, TEdgeID, TPortID>> {
37-
let timeoutId: NodeJS.Timeout | null = null
38-
39-
return new Promise((resolve, reject) => {
40-
const nodes = Object.values(nodesMap)
41-
42-
if (nodes.length === 0) return resolve({ edges: [], nodesMap: {} })
43-
44-
const worker = getWorker()
45-
46-
if (worker == null)
47-
return errorHandler(new ErrorEvent('Failed to create worker'))
48-
49-
timeoutId = setTimeout(
50-
() => errorHandler(new ErrorEvent('Layout calculation timed out')),
51-
DEFAULT_TIMEOUT,
52-
)
53-
54-
worker.addEventListener('message', handler)
55-
worker.addEventListener('error', errorHandler)
56-
57-
try {
58-
worker.postMessage({ edges, nodesMap } as LayoutedGraph<
59-
TNodeData,
60-
TEdgeData,
61-
TNodeID,
62-
TEdgeID,
63-
TPortID
64-
>)
65-
} catch (postError) {
66-
errorHandler(postError as ErrorEvent)
19+
>({
20+
edges,
21+
nodesMap,
22+
}: {
23+
edges: LineageEdge<TEdgeData, TNodeID, TEdgeID, TPortID>[]
24+
nodesMap: LineageNodesMap<TNodeData>
25+
}) {
26+
const nodes = Object.values(nodesMap)
27+
const nodeCount = nodes.length
28+
const edgeCount = edges.length
29+
30+
if (nodeCount === 0)
31+
return {
32+
edges: [],
33+
nodesMap: {},
6734
}
6835

69-
function handler(
70-
event: MessageEvent<
71-
LayoutedGraph<TNodeData, TEdgeData, TNodeID, TEdgeID, TPortID> & {
72-
error: ErrorEvent
73-
}
74-
>,
75-
) {
76-
cleanup()
77-
78-
if (event.data.error) return errorHandler(event.data.error)
79-
80-
resolve(event.data)
81-
}
36+
const g = new dagre.graphlib.Graph({
37+
compound: true,
38+
multigraph: true,
39+
directed: true,
40+
})
8241

83-
function errorHandler(error: ErrorEvent) {
84-
cleanup()
85-
reject(error)
86-
}
42+
g.setGraph({
43+
rankdir: 'LR',
44+
nodesep: 0,
45+
ranksep: 48,
46+
edgesep: 0,
47+
ranker: 'longest-path',
48+
})
8749

88-
function cleanup() {
89-
if (timeoutId) {
90-
clearTimeout(timeoutId)
91-
timeoutId = null
92-
}
93-
worker?.removeEventListener('message', handler)
94-
worker?.removeEventListener('error', errorHandler)
50+
g.setDefaultEdgeLabel(() => ({}))
51+
52+
// Building layout already heavy operation, so trying to optimize it a bit
53+
for (let i = 0; i < edgeCount; i++) {
54+
g.setEdge(edges[i].source, edges[i].target)
55+
}
56+
57+
for (let i = 0; i < nodeCount; i++) {
58+
const node = nodes[i]
59+
g.setNode(node.id, {
60+
width: node.width || DEFAULT_NODE_WIDTH,
61+
height: node.height || 0,
62+
})
63+
}
64+
65+
dagre.layout(g)
66+
67+
// Building layout already heavy operation, so trying to optimize it a bit
68+
for (let i = 0; i < nodeCount; i++) {
69+
const node = nodes[i]
70+
const width = node.width || DEFAULT_NODE_WIDTH
71+
const height = node.height || 0
72+
const nodeId = node.id as NodeId
73+
const nodeWithPosition = g.node(nodeId)
74+
const halfWidth = width / 2
75+
const halfHeight = height / 2
76+
77+
nodesMap[nodeId] = {
78+
...node,
79+
position: {
80+
x: nodeWithPosition.x - halfWidth,
81+
y: nodeWithPosition.y - halfHeight,
82+
},
9583
}
96-
})
97-
}
84+
}
9885

99-
export function cleanupLayoutWorker(): void {
100-
workerInstance?.terminate()
101-
workerInstance = null
86+
return {
87+
edges,
88+
nodesMap,
89+
}
10290
}

0 commit comments

Comments
 (0)