Skip to content

Commit 3a73409

Browse files
mykalmaxmykalmax
committed
adjust linegae story
1 parent 76ab773 commit 3a73409

File tree

15 files changed

+410
-289
lines changed

15 files changed

+410
-289
lines changed

‎web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.tsx‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { AlertCircle, CircleOff, FileText, Workflow } from 'lucide-react'
1+
import {
2+
AlertCircle,
3+
CircleOff,
4+
FileCode,
5+
FileMinus,
6+
Workflow,
7+
} from 'lucide-react'
28
import React from 'react'
39

410
import { cn } from '@/utils'
@@ -34,6 +40,7 @@ export function FactoryColumn(useLineage: ColumnLevelLineageContextHook) {
3440
error,
3541
renderError,
3642
renderExpression,
43+
renderSource,
3744
onClick,
3845
onCancel,
3946
}: {
@@ -49,6 +56,7 @@ export function FactoryColumn(useLineage: ColumnLevelLineageContextHook) {
4956
error?: Error | null
5057
renderError?: (error: Error) => React.ReactNode
5158
renderExpression?: (expression: string) => React.ReactNode
59+
renderSource?: (source: string) => React.ReactNode
5260
onClick?: () => void
5361
onCancel?: () => void
5462
}) {
@@ -125,17 +133,33 @@ export function FactoryColumn(useLineage: ColumnLevelLineageContextHook) {
125133
)}
126134
/>
127135
)}
136+
{column?.source && renderSource && (
137+
<Tooltip
138+
trigger={
139+
<FileCode
140+
size={16}
141+
className="text-lineage-model-column-icon hover:text-lineage-model-column-icon-active"
142+
/>
143+
}
144+
side="left"
145+
sideOffset={20}
146+
className="p-0 min-w-[30rem] max-w-xl bg-lineage-model-column-source-background"
147+
delayDuration={0}
148+
>
149+
{renderSource(column.source)}
150+
</Tooltip>
151+
)}
128152
{column?.expression && renderExpression && (
129153
<Tooltip
130154
trigger={
131-
<FileText
155+
<FileMinus
132156
size={16}
133157
className="text-lineage-model-column-icon hover:text-lineage-model-column-icon-active"
134158
/>
135159
}
136160
side="left"
137161
sideOffset={20}
138-
className="p-0 min-w-[30rem] max-w-xl"
162+
className="p-0 min-w-[30rem] max-w-xl bg-lineage-model-column-expression-background"
139163
delayDuration={0}
140164
>
141165
{renderExpression(column.expression)}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ export function getEdgesFromColumnLineage<
100100

101101
edges.push(
102102
transformEdge(
103+
'port',
103104
edgeId,
104105
sourceNodeId,
105106
targetNodeId,
@@ -114,7 +115,7 @@ export function getEdgesFromColumnLineage<
114115

115116
Array.from(modelLevelEdgeIDs.entries()).forEach(
116117
([edgeId, [sourceNodeId, targetNodeId]]) => {
117-
edges.push(transformEdge(edgeId, sourceNodeId, targetNodeId))
118+
edges.push(transformEdge('edge', edgeId, sourceNodeId, targetNodeId))
118119
},
119120
)
120121
return edges

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

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import {
2+
type Edge,
3+
type EdgeProps,
4+
getBezierPath,
5+
getSmoothStepPath,
6+
getStraightPath,
7+
} from '@xyflow/react'
8+
import React, { useId } from 'react'
9+
10+
import { type EdgeId, type LineageEdgeData, type PathType } from '../utils'
11+
12+
export interface EdgeData extends LineageEdgeData {
13+
startColor?: string
14+
endColor?: string
15+
strokeWidth?: number
16+
pathType?: PathType
17+
}
18+
19+
export const EdgeWithGradient = React.memo(
20+
<TEdgeData extends EdgeData = EdgeData>({
21+
id,
22+
sourceX,
23+
sourceY,
24+
targetX,
25+
targetY,
26+
sourcePosition,
27+
targetPosition,
28+
style,
29+
data,
30+
markerEnd,
31+
}: EdgeProps<Edge<TEdgeData>>) => {
32+
const edgeId = id as EdgeId
33+
34+
const gradientId = useId()
35+
const startColor = data?.startColor || 'var(--color-lineage-edge)'
36+
const endColor = data?.endColor || 'var(--color-lineage-edge)'
37+
const pathType = data?.pathType || 'bezier'
38+
const strokeWidth = data?.strokeWidth || 4
39+
const edgePath = getEdgePath(pathType)
40+
41+
function getEdgePath(pathType: PathType) {
42+
return {
43+
straight: getStraightPath({
44+
sourceX,
45+
sourceY,
46+
targetX,
47+
targetY,
48+
}),
49+
smoothstep: getSmoothStepPath({
50+
sourceX,
51+
sourceY,
52+
sourcePosition,
53+
targetX,
54+
targetY,
55+
targetPosition,
56+
borderRadius: 10,
57+
}),
58+
bezier: getBezierPath({
59+
sourceX,
60+
sourceY,
61+
sourcePosition,
62+
targetX,
63+
targetY,
64+
targetPosition,
65+
}),
66+
step: getSmoothStepPath({
67+
sourceX,
68+
sourceY,
69+
sourcePosition,
70+
targetX,
71+
targetY,
72+
targetPosition,
73+
borderRadius: 0,
74+
}),
75+
}[pathType]
76+
}
77+
78+
return (
79+
<>
80+
<defs>
81+
<linearGradient
82+
id={gradientId}
83+
x1={sourceX}
84+
y1={sourceY}
85+
x2={targetX}
86+
y2={targetY}
87+
gradientUnits="userSpaceOnUse"
88+
>
89+
<stop
90+
offset="0%"
91+
stopColor={startColor}
92+
/>
93+
<stop
94+
offset="100%"
95+
stopColor={endColor}
96+
/>
97+
</linearGradient>
98+
</defs>
99+
<path
100+
id={edgeId}
101+
style={{
102+
...style,
103+
stroke: `url(#${gradientId})`,
104+
strokeWidth,
105+
fill: 'none',
106+
}}
107+
className="react-flow__edge-path"
108+
d={edgePath[0]}
109+
markerEnd={markerEnd}
110+
/>
111+
</>
112+
)
113+
},
114+
)

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

Lines changed: 22 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
import {
2-
type Edge,
3-
type EdgeProps,
4-
getBezierPath,
5-
getSmoothStepPath,
6-
getStraightPath,
7-
} from '@xyflow/react'
8-
import React, { useId } from 'react'
1+
import React from 'react'
92

103
import { type LineageContextHook } from '../LineageContext'
114
import {
@@ -14,6 +7,8 @@ import {
147
type LineageNodeData,
158
type PathType,
169
} from '../utils'
10+
import { EdgeWithGradient } from './EdgeWithGradient'
11+
import type { Edge, EdgeProps } from '@xyflow/react'
1712

1813
export interface EdgeData extends LineageEdgeData {
1914
startColor?: string
@@ -26,101 +21,34 @@ export function FactoryEdgeWithGradient<
2621
TNodeData extends LineageNodeData = LineageNodeData,
2722
TEdgeData extends EdgeData = EdgeData,
2823
>(useLineage: LineageContextHook<TNodeData, TEdgeData>) {
29-
return React.memo(function EdgeWithGradient({
30-
id,
31-
sourceX,
32-
sourceY,
33-
targetX,
34-
targetY,
35-
sourcePosition,
36-
targetPosition,
37-
style,
38-
data,
39-
markerEnd,
40-
}: EdgeProps<Edge<TEdgeData>>) {
24+
return React.memo(({ data, id, ...props }: EdgeProps<Edge<TEdgeData>>) => {
4125
const edgeId = id as EdgeId
4226

4327
const { selectedEdges } = useLineage()
4428

45-
const gradientId = useId()
46-
const startColor = data?.startColor || 'var(--color-lineage-edge)'
47-
const endColor = data?.endColor || 'var(--color-lineage-edge)'
48-
const pathType = data?.pathType || 'bezier'
49-
const strokeWidth = data?.strokeWidth || 4
50-
const edgePath = getEdgePath(pathType)
5129
const isActive = selectedEdges.has(edgeId)
5230

53-
function getEdgePath(pathType: PathType) {
54-
return {
55-
straight: getStraightPath({
56-
sourceX,
57-
sourceY,
58-
targetX,
59-
targetY,
60-
}),
61-
smoothstep: getSmoothStepPath({
62-
sourceX,
63-
sourceY,
64-
sourcePosition,
65-
targetX,
66-
targetY,
67-
targetPosition,
68-
borderRadius: 10,
69-
}),
70-
bezier: getBezierPath({
71-
sourceX,
72-
sourceY,
73-
sourcePosition,
74-
targetX,
75-
targetY,
76-
targetPosition,
77-
}),
78-
step: getSmoothStepPath({
79-
sourceX,
80-
sourceY,
81-
sourcePosition,
82-
targetX,
83-
targetY,
84-
targetPosition,
85-
borderRadius: 0,
86-
}),
87-
}[pathType]
31+
let startColor = 'var(--color-lineage-edge)'
32+
let endColor = 'var(--color-lineage-edge)'
33+
34+
if (isActive && data?.startColor) {
35+
startColor = data?.startColor
36+
}
37+
38+
if (isActive && data?.endColor) {
39+
endColor = data?.endColor
8840
}
8941

9042
return (
91-
<>
92-
<defs>
93-
<linearGradient
94-
id={gradientId}
95-
x1={sourceX}
96-
y1={sourceY}
97-
x2={targetX}
98-
y2={targetY}
99-
gradientUnits="userSpaceOnUse"
100-
>
101-
<stop
102-
offset="0%"
103-
stopColor={isActive ? startColor : 'var(--color-lineage-edge)'}
104-
/>
105-
<stop
106-
offset="100%"
107-
stopColor={isActive ? endColor : 'var(--color-lineage-edge)'}
108-
/>
109-
</linearGradient>
110-
</defs>
111-
<path
112-
id={edgeId}
113-
style={{
114-
...style,
115-
stroke: `url(#${gradientId})`,
116-
strokeWidth,
117-
fill: 'none',
118-
}}
119-
className="react-flow__edge-path"
120-
d={edgePath[0]}
121-
markerEnd={markerEnd}
122-
/>
123-
</>
43+
<EdgeWithGradient
44+
{...props}
45+
id={edgeId}
46+
data={{
47+
...data,
48+
startColor,
49+
endColor,
50+
}}
51+
/>
12452
)
12553
})
12654
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,16 +86,16 @@ export function getTransformedModelEdges<
8686

8787
const edgeId = toEdgeID(adjacencyListKey, target)
8888

89-
edges.push(transformEdge(edgeId, nodeId, toNodeID(target)))
89+
edges.push(transformEdge('edge', edgeId, nodeId, toNodeID(target)))
9090
}
9191
}
9292

9393
return edges
9494
}
9595

9696
export function createNode<TNodeData extends LineageNodeData = LineageNodeData>(
97+
type: string,
9798
nodeId: NodeId,
98-
type: string = 'node',
9999
data: TNodeData,
100100
) {
101101
return {
@@ -156,10 +156,10 @@ export function calculateNodeDetailsHeight({
156156
}
157157

158158
export function createEdge<TEdgeData extends LineageEdgeData = LineageEdgeData>(
159+
type: string,
159160
edgeId: EdgeId,
160161
sourceId: NodeId,
161162
targetId: NodeId,
162-
type: string = 'edge',
163163
sourceHandleId?: PortId,
164164
targetHandleId?: PortId,
165165
data?: TEdgeData,

‎web/common/src/components/Lineage/node/NodeHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const NodeHeader = forwardRef<HTMLElement, NodeHeaderProps>(
1717
ref={ref}
1818
{...props}
1919
className={cn(
20-
'flex w-full items-center justify-between p-0',
20+
'flex w-full items-center justify-between p-0 relative',
2121
className,
2222
)}
2323
/>

‎web/common/src/components/Lineage/node/NodePort.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,10 @@ export const NodePort = React.memo(function NodePort({
4242
<NodeHandles
4343
data-component="NodePort"
4444
leftIcon={
45-
<span className="flex-shrink-0 p-1.5 rounded-full bg-lineage-node-port-handle"></span>
45+
<span className="flex-shrink-0 p-1.5 rounded-full bg-lineage-node-port-handle-target"></span>
4646
}
4747
rightIcon={
48-
<span className="flex-shrink-0 p-1.5 rounded-full bg-lineage-node-port-handle"></span>
48+
<span className="flex-shrink-0 p-1.5 rounded-full bg-lineage-node-port-handle-source"></span>
4949
}
5050
leftId={leftId}
5151
rightId={rightId}

‎web/common/src/components/Lineage/node/NodePorts.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export function NodePorts<
2626
items={items}
2727
estimatedListItemHeight={estimatedListItemHeight}
2828
renderListItem={item => renderPort(item)}
29+
className={cn(!isFilterable && className)}
2930
/>
3031
)
3132
}

0 commit comments

Comments
 (0)