Skip to content

Commit 616bcaf

Browse files
mykalmaxmykalmax
committed
pr comments
1 parent 0cbfdf4 commit 616bcaf

File tree

6 files changed

+55
-101
lines changed

6 files changed

+55
-101
lines changed

‎vscode/react/src/App.css‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@
3636
--color-filterable-list-input-border: var(--vscode-input-border);
3737

3838
--color-lineage-background: transparent;
39+
--color-lineage-border: transparent;
3940
--color-lineage-foreground: var(--vscode-foreground);
40-
--color-lineage-border: var(--vscode-editor-background);
4141
--color-lineage-divider: var(--vscode-text-separatorForeground);
4242

4343
--color-lineage-grid-dot: rgba(0, 0, 0, 0.1);
@@ -107,16 +107,6 @@
107107
);
108108
--color-lineage-node-type-border-source: var(--vscode-minimap-errorHighlight);
109109

110-
--color-lineage-node-type-background-cte-subquery: var(
111-
--vscode-minimap-selectionOccurrenceHighlight
112-
);
113-
--color-lineage-node-type-foreground-cte-subquery: var(
114-
--vscode-minimap-selectionOccurrenceHighlight
115-
);
116-
--color-lineage-node-type-border-cte-subquery: var(
117-
--vscode-minimap-selectionOccurrenceHighlight
118-
);
119-
120110
--color-lineage-node-type-handle-icon-background: var(
121111
--vscode-editor-background
122112
);

‎vscode/react/src/pages/ModelLineage.tsx‎

Lines changed: 25 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22

3-
import { Focus, LockOpen, Lock, Rows2, Rows3 } from 'lucide-react'
3+
import { Focus, Rows2, Rows3 } from 'lucide-react'
44

55
import {
66
type LineageNode,
@@ -78,9 +78,11 @@ export const ModelLineage = ({
7878
? toNodeID<ModelNodeId>(selectedModelName)
7979
: null
8080

81+
// Store all nodes to keep track of the position and to reuse nodes
82+
const allNodesMap = React.useRef<LineageNodesMap<NodeData, ModelNodeId>>({})
83+
8184
const [zoom, setZoom] = React.useState(ZOOM_THRESHOLD)
8285
const [isBuildingLayout, setIsBuildingLayout] = React.useState(false)
83-
const [nodesDraggable, setNodesDraggable] = React.useState(false)
8486
const [edges, setEdges] = React.useState<
8587
LineageEdge<
8688
EdgeData,
@@ -153,14 +155,15 @@ export const ModelLineage = ({
153155
tags: detail.tags || [],
154156
columns,
155157
})
158+
156159
const selectedColumnsCount = new Set(
157160
Object.keys(columns ?? {}).map(k => toPortID(detail.name, k)),
158161
).intersection(selectedColumns).size
159162
// We are trying to project the node hight so we are including the ceiling and floor heights
160163
const nodeBaseHeight = calculateNodeBaseHeight({
161164
includeNodeFooterHeight: false,
162165
includeCeilingHeight: true,
163-
includeFloorHeight: true,
166+
includeFloorHeight: false,
164167
})
165168
const nodeDetailsHeight = calculateNodeDetailsHeight({
166169
nodeDetailsCount: 0,
@@ -193,7 +196,7 @@ export const ModelLineage = ({
193196
ModelLineageNodeDetails,
194197
NodeData,
195198
ModelNodeId
196-
>(adjacencyListKeys, lineageDetails, transformNode)
199+
>(adjacencyListKeys, lineageDetails, transformNode, allNodesMap.current)
197200
}, [adjacencyListKeys, lineageDetails, transformNode])
198201

199202
const transformEdge = React.useCallback(
@@ -293,7 +296,10 @@ export const ModelLineage = ({
293296
ModelColumnLeftHandleId
294297
>[],
295298
nds: LineageNodesMap<NodeData, ModelNodeId>,
299+
buildingLayoutId: NodeJS.Timeout,
296300
) => {
301+
clearTimeout(buildingLayoutId)
302+
297303
const layoutNodesMap = buildLayout<
298304
NodeData,
299305
EdgeData,
@@ -304,19 +310,22 @@ export const ModelLineage = ({
304310
ModelColumnLeftHandleId
305311
>({ edges: eds, nodesMap: nds })
306312

313+
allNodesMap.current = { ...allNodesMap.current, ...layoutNodesMap }
314+
307315
setEdges(eds)
308316
setNodesMap(layoutNodesMap)
309317
setIsBuildingLayout(false)
310318
},
311-
[],
319+
[allNodesMap.current],
312320
)
313321

314322
const nodes = React.useMemo(() => {
315323
return Object.values(nodesMap)
316324
}, [nodesMap])
317325

318-
const currentNode = currentNodeId ? nodesMap[currentNodeId] : null
319-
const selectedNode = selectedNodeId ? nodesMap[selectedNodeId] : null
326+
const selectedNode = selectedNodeId
327+
? allNodesMap.current[selectedNodeId]
328+
: null
320329

321330
const handleReset = React.useCallback(() => {
322331
setShowColumns(false)
@@ -325,12 +334,14 @@ export const ModelLineage = ({
325334
setShowOnlySelectedNodes(false)
326335
setSelectedNodes(new Set())
327336
setSelectedEdges(new Set())
328-
setSelectedNodeId(null)
337+
setSelectedNodeId(currentNodeId)
329338
setColumnLevelLineage(new Map())
330-
}, [])
339+
}, [currentNodeId])
331340

332341
React.useEffect(() => {
333-
setIsBuildingLayout(true)
342+
const buildingLayoutId = setTimeout(() => {
343+
setIsBuildingLayout(true)
344+
}, 500)
334345

335346
if (showOnlySelectedNodes) {
336347
const onlySelectedNodesMap = getOnlySelectedNodes<NodeData, ModelNodeId>(
@@ -340,27 +351,15 @@ export const ModelLineage = ({
340351
const onlySelectedEdges = transformedEdges.filter(edge =>
341352
selectedEdges.has(edge.id as ModelEdgeId),
342353
)
343-
calculateLayout(onlySelectedEdges, onlySelectedNodesMap)
354+
calculateLayout(onlySelectedEdges, onlySelectedNodesMap, buildingLayoutId)
344355
} else {
345-
calculateLayout(transformedEdges, transformedNodesMap)
356+
calculateLayout(transformedEdges, transformedNodesMap, buildingLayoutId)
346357
}
347358
}, [showOnlySelectedNodes, transformedEdges, transformedNodesMap])
348359

349-
// currentNodeId is passed from the parent component
350-
// we it change we need to reset the selectedNodeId
351-
React.useEffect(() => {
352-
setSelectedNodeId(currentNodeId)
353-
}, [currentNodeId])
354-
355-
// When the selectedColumns is empty it measn we dont have any selected columns
356-
// so we need to set the selectedNodeId back to the currentNode.id
357-
// where currentNode derived from currentNodeId if present in nodesMap
358-
// if the currentNode is null we need to set the selectedNodeId to null
359360
React.useEffect(() => {
360-
if (selectedColumns.size === 0 && selectedNodeId != currentNode?.id) {
361-
setSelectedNodeId(currentNode?.id || null)
362-
}
363-
}, [selectedColumns, currentNode?.id])
361+
handleReset()
362+
}, [handleReset])
364363

365364
function toggleColumns() {
366365
setShowColumns(prev => !prev)
@@ -380,7 +379,6 @@ export const ModelLineage = ({
380379
selectedNodeId,
381380
selectedNode,
382381
currentNodeId,
383-
currentNode,
384382
zoom,
385383
edges,
386384
nodes,
@@ -414,7 +412,6 @@ export const ModelLineage = ({
414412
onNodeClick={onNodeClick}
415413
isBuildingLayout={isBuildingLayout}
416414
showControlOnlySelectedNodes={selectedColumns.size === 0}
417-
nodesDraggable={nodesDraggable}
418415
controls={
419416
<>
420417
<LineageControlButton
@@ -435,13 +432,6 @@ export const ModelLineage = ({
435432
>
436433
<LineageControlIcon Icon={Focus} />
437434
</LineageControlButton>
438-
<LineageControlButton
439-
text={nodesDraggable ? 'Lock nodes' : 'Unlock nodes'}
440-
onClick={() => setNodesDraggable(prev => !prev)}
441-
disabled={isBuildingLayout}
442-
>
443-
<LineageControlIcon Icon={nodesDraggable ? Lock : LockOpen} />
444-
</LineageControlButton>
445435
</>
446436
}
447437
/>

‎vscode/react/src/pages/ModelNode.tsx‎

Lines changed: 19 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const ModelNode = React.memo(function ModelNode({
5151
const {
5252
selectedColumns,
5353
zoom,
54-
currentNode,
54+
currentNodeId,
5555
selectedNodeId,
5656
selectedNodes,
5757
showColumns,
@@ -69,7 +69,7 @@ export const ModelNode = React.memo(function ModelNode({
6969
isCurrent,
7070
isSelected, // if selected from inside the lineage and node is selcted
7171
isActive, // if selected from inside the lineage and node is not selected but in path
72-
} = useNodeMetadata(nodeId, currentNode, selectedNodeId, selectedNodes)
72+
} = useNodeMetadata(nodeId, currentNodeId, selectedNodeId, selectedNodes)
7373

7474
const {
7575
columns,
@@ -93,6 +93,7 @@ export const ModelNode = React.memo(function ModelNode({
9393
const modelType = data.model_type?.toLowerCase() as ModelType
9494
const hasColumnsFilter =
9595
shouldShowColumns && columns.length > MAX_COLUMNS_TO_DISPLAY
96+
9697
// We are not including the footer, because we need actual height to dynamically adjust node container height
9798
const nodeBaseHeight = calculateNodeBaseHeight({
9899
includeNodeFooterHeight: false,
@@ -126,8 +127,8 @@ export const ModelNode = React.memo(function ModelNode({
126127
return (
127128
<NodeContainer
128129
className={cn(
129-
'hover:opacity-100 group',
130-
selectedNodeId == null || isActive || isSelected
130+
'hover:opacity-100',
131+
isActive || isSelected || hasSelectedColumns
131132
? 'opacity-100'
132133
: 'opacity-10',
133134
)}
@@ -140,10 +141,16 @@ export const ModelNode = React.memo(function ModelNode({
140141
className="bg-lineage-node-appendix-background"
141142
>
142143
<HorizontalContainer className="gap-1 items-center overflow-visible h-5">
143-
{isCurrent && (
144-
<NodeBadge className="bg-lineage-node-current-background text-lineage-node-current-foreground">
145-
current
146-
</NodeBadge>
144+
{modelType && (
145+
<Badge
146+
size={zoom > ZOOM_THRESHOLD ? '2xs' : 'm'}
147+
className={cn(
148+
'text-[white] font-black',
149+
NODE_TYPE_COLOR[modelType],
150+
)}
151+
>
152+
{modelType.toUpperCase()}
153+
</Badge>
147154
)}
148155
{zoom > ZOOM_THRESHOLD && (
149156
<>
@@ -180,7 +187,7 @@ export const ModelNode = React.memo(function ModelNode({
180187
{...props}
181188
className={cn(
182189
'ring-offset-2 z-10',
183-
isSelected
190+
isCurrent || isSelected
184191
? 'ring-2 ring-lineage-node-selected-border ring-offset-lineage-node-background'
185192
: 'hover:ring-2 hover:ring-lineage-node-border-hover',
186193
)}
@@ -232,7 +239,7 @@ export const ModelNode = React.memo(function ModelNode({
232239
name={column.name}
233240
description={column.description}
234241
type={column.data_type}
235-
className="py-1 px-3 first:border-t-0 h-6"
242+
className="px-2 first:border-t-0 h-6"
236243
/>
237244
))}
238245
</VerticalContainer>
@@ -255,39 +262,16 @@ export const ModelNode = React.memo(function ModelNode({
255262
name={column.name}
256263
description={column.description}
257264
type={column.data_type}
258-
className="py-1 px-3 border-t border-lineage-divider first:border-t-0 h-6"
265+
className="border-t border-lineage-divider first:border-t-0 h-6"
259266
/>
260267
)}
261-
className="border-t border-lineage-divider cursor-default"
268+
className="border-t border-lineage-divider"
262269
/>
263270
)}
264271
</>
265272
)}
266273
</VerticalContainer>
267274
</NodeBase>
268-
{modelType && (
269-
<NodeAppendix
270-
position="bottom"
271-
className="bg-lineage-node-appendix-background"
272-
>
273-
<HorizontalContainer
274-
className={cn(
275-
'gap-1 items-center overflow-visible',
276-
zoom > ZOOM_THRESHOLD ? 'h-5' : 'h-8',
277-
)}
278-
>
279-
<Badge
280-
size={zoom > ZOOM_THRESHOLD ? '2xs' : 'm'}
281-
className={cn(
282-
'text-[white] font-black',
283-
NODE_TYPE_COLOR[modelType],
284-
)}
285-
>
286-
{modelType.toUpperCase()}
287-
</Badge>
288-
</HorizontalContainer>
289-
</NodeAppendix>
290-
)}
291275
</NodeContainer>
292276
)
293277
})

‎vscode/react/src/pages/ModelNodeColumn.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,8 @@ export const ModelNodeColumn = React.memo(function ModelNodeColumn({
4141
description?: string | null
4242
className?: string
4343
}) {
44-
const {
45-
selectedColumns,
46-
setColumnLevelLineage,
47-
setFetchingColumns,
48-
setSelectedNodeId,
49-
} = useModelLineage()
44+
const { selectedColumns, setColumnLevelLineage, setFetchingColumns } =
45+
useModelLineage()
5046

5147
const isSelectedColumn = selectedColumns.has(id)
5248

@@ -67,8 +63,6 @@ export const ModelNodeColumn = React.memo(function ModelNodeColumn({
6763
return new Map(prev)
6864
})
6965
} else {
70-
setSelectedNodeId(nodeId)
71-
7266
if (columnLineageData == null) {
7367
setTimeout(() => {
7468
setFetchingColumns(prev => new Set(prev.add(id)))
@@ -108,7 +102,7 @@ export const ModelNodeColumn = React.memo(function ModelNodeColumn({
108102
type={type}
109103
description={description}
110104
className={cn(
111-
'ModelNodeColumn',
105+
'ModelNodeColumn cursor-pointer',
112106
isSelectedColumn && 'bg-lineage-model-column-active-background',
113107
className,
114108
)}

‎vscode/react/src/pages/help.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,31 @@
11
import type { ModelType } from '@/api/client'
22

3-
type NodeType = ModelType | 'cte/subquery'
3+
type NodeType = ModelType
44

55
export const NODE_TYPE_COLOR_VAR: Record<NodeType, string> = {
66
sql: 'var(--color-lineage-node-type-background-sql)',
77
python: 'var(--color-lineage-node-type-background-python)',
8-
'cte/subquery': 'var(--color-lineage-node-type-background-cte-subquery)',
98
source: 'var(--color-lineage-node-type-background-source)',
109
seed: 'var(--color-lineage-node-type-background-source)',
1110
external: 'var(--color-lineage-node-type-background-source)',
1211
}
1312
export const NODE_TYPE_COLOR: Record<NodeType, string> = {
1413
sql: 'bg-lineage-node-type-background-sql',
1514
python: 'bg-lineage-node-type-background-python',
16-
'cte/subquery': 'bg-lineage-node-type-background-cte-subquery',
1715
source: 'bg-lineage-node-type-background-source',
1816
seed: 'bg-lineage-node-type-background-source',
1917
external: 'bg-lineage-node-type-background-source',
2018
}
2119
export const NODE_TYPE_TEXT_COLOR: Record<NodeType, string> = {
2220
sql: 'text-lineage-node-type-foreground-sql',
2321
python: 'text-lineage-node-type-foreground-python',
24-
'cte/subquery': 'text-lineage-node-type-foreground-cte-subquery',
2522
source: 'text-lineage-node-type-foreground-source',
2623
seed: 'text-lineage-node-type-foreground-source',
2724
external: 'text-lineage-node-type-foreground-source',
2825
}
2926
export const NODE_TYPE_BORDER_COLOR: Record<NodeType, string> = {
3027
sql: 'border-lineage-node-type-border-sql',
3128
python: 'border-lineage-node-type-border-python',
32-
'cte/subquery': 'border-lineage-node-type-border-cte-subquery',
3329
source: 'border-lineage-node-type-border-source',
3430
seed: 'border-lineage-node-type-border-source',
3531
external: 'border-lineage-node-type-border-source',

0 commit comments

Comments
 (0)