Skip to content

Commit 4e7dc1e

Browse files
mykalmaxmykalmax
committed
make styling in some components more flexible
1 parent 285b8f2 commit 4e7dc1e

File tree

17 files changed

+67
-192
lines changed

17 files changed

+67
-192
lines changed

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
:root {
2+
--color-lineage-model-column-badge-background: var(
3+
--color-lineage-node-badge-background
4+
);
5+
--color-lineage-model-column-badge-foreground: var(
6+
--color-lineage-node-badge-foreground
7+
);
8+
9+
--color-lineage-model-column-metadata-label: var(--color-metadata-label);
10+
--color-lineage-model-column-metadata-value: var(--color-metadata-value);
11+
12+
--color-lineage-model-column-information-info: var(--color-information-info);
13+
}
14+
15+
.FactoryColumn__Metadata {
16+
--color-metadata-label: var(--color-lineage-model-column-metadata-label);
17+
--color-metadata-value: var(--color-lineage-model-column-metadata-value);
18+
}
19+
20+
.FactoryColumn__NodeBadge {
21+
--color-lineage-node-badge-background: var(
22+
--color-lineage-model-column-badge-background
23+
);
24+
--color-lineage-node-badge-foreground: var(
25+
--color-lineage-model-column-badge-foreground
26+
);
27+
}
28+
29+
.FactoryColumn__Information {
30+
--color-typography-info: var(--color-lineage-model-column-information-info);
31+
}

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import { HorizontalContainer } from '@/components/HorizontalContainer/Horizontal
2121
import { Information } from '@/components/Typography/Information'
2222
import { LoadingContainer } from '@/components/LoadingContainer/LoadingContainer'
2323

24+
import './FactoryColumn.css'
25+
2426
export function FactoryColumn<
2527
TAdjacencyListKey extends string,
2628
TAdjacencyListColumnKey extends string,
@@ -184,7 +186,7 @@ export function FactoryColumn<
184186
function renderColumn() {
185187
return (
186188
<Metadata
187-
data-component="ModelColumn"
189+
data-component="FactoryColumn"
188190
onClick={handleSelectColumn}
189191
label={
190192
<LoadingContainer
@@ -196,7 +198,10 @@ export function FactoryColumn<
196198
>
197199
{renderColumnStates()}
198200
{description ? (
199-
<Information info={description}>
201+
<Information
202+
className="FactoryColumn__Information"
203+
info={description}
204+
>
200205
<DisplayColumName name={name} />
201206
</Information>
202207
) : (
@@ -205,9 +210,11 @@ export function FactoryColumn<
205210
</HorizontalContainer>
206211
</LoadingContainer>
207212
}
208-
value={<NodeBadge>{type}</NodeBadge>}
213+
value={
214+
<NodeBadge className="FactoryColumn__NodeBadge">{type}</NodeBadge>
215+
}
209216
className={cn(
210-
'relative overflow-visible group p-0',
217+
'FactoryColumn__Metadata relative overflow-visible group p-0',
211218
isDisabledColumn && 'cursor-not-allowed',
212219
className,
213220
)}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function LineageControlButton({
2323
delayDuration={0}
2424
className="px-2 py-1 text-xs rounded-sm font-semibold bg-lineage-control-button-tooltip-background text-lineage-control-button-tooltip-foreground"
2525
trigger={
26-
<div>
26+
<div data-component="LineageControlButton">
2727
<ControlButton
2828
onClick={onClick}
2929
className={cn(

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export const LineageControlIcon = React.forwardRef<
2828
return (
2929
<Icon
3030
ref={ref}
31+
data-component="LineageControlIcon"
3132
size={size}
3233
className={cn(
3334
'text-lineage-control-icon-foreground stroke-lineage-control-icon-background',

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -352,6 +352,7 @@ function LineageLayoutBase<
352352

353353
return (
354354
<VerticalContainer
355+
data-component="LineageLayout"
355356
className={cn(
356357
'border-2 border-lineage-border bg-lineage-background relative h-full',
357358
className,

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

Lines changed: 0 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Position } from '@xyflow/react'
44
import {
55
getOnlySelectedNodes,
66
getTransformedNodes,
7-
getTransformedModelEdges,
87
getTransformedModelEdgesSourceTargets,
98
getTransformedModelEdgesTargetSources,
109
createNode,
@@ -144,147 +143,6 @@ describe('Lineage Help Functions', () => {
144143
})
145144
})
146145

147-
describe('getTransformedModelEdges', () => {
148-
test('should transform edges using the provided transform function', () => {
149-
const adjacencyListKeys = ['model1', 'model2', 'model3']
150-
const lineageAdjacencyList: LineageAdjacencyList = {
151-
model1: ['model2', 'model3'],
152-
model2: ['model3'],
153-
model3: [],
154-
}
155-
156-
const transformEdge = (
157-
type: string,
158-
edgeId: EdgeId,
159-
sourceId: NodeId,
160-
targetId: NodeId,
161-
) => ({
162-
id: edgeId,
163-
source: sourceId,
164-
target: targetId,
165-
type,
166-
zIndex: 1,
167-
})
168-
169-
const result = getTransformedModelEdges(
170-
adjacencyListKeys,
171-
lineageAdjacencyList,
172-
transformEdge,
173-
)
174-
175-
expect(result).toHaveLength(3)
176-
177-
const model1Id = toNodeID('model1')
178-
const model2Id = toNodeID('model2')
179-
const model3Id = toNodeID('model3')
180-
181-
expect(result[0]).toEqual({
182-
id: toEdgeID('model1', 'model2'),
183-
source: model1Id,
184-
target: model2Id,
185-
type: 'edge',
186-
zIndex: 1,
187-
})
188-
expect(result[1]).toEqual({
189-
id: toEdgeID('model1', 'model3'),
190-
source: model1Id,
191-
target: model3Id,
192-
type: 'edge',
193-
zIndex: 1,
194-
})
195-
expect(result[2]).toEqual({
196-
id: toEdgeID('model2', 'model3'),
197-
source: model2Id,
198-
target: model3Id,
199-
type: 'edge',
200-
zIndex: 1,
201-
})
202-
})
203-
204-
test('should skip edges where target is not in adjacency list', () => {
205-
const adjacencyListKeys = ['model1']
206-
const lineageAdjacencyList: LineageAdjacencyList = {
207-
model1: ['model2'], // model2 is not in the adjacency list
208-
}
209-
210-
const transformEdge = (
211-
type: string,
212-
edgeId: EdgeId,
213-
sourceId: NodeId,
214-
targetId: NodeId,
215-
) => ({
216-
id: edgeId,
217-
source: sourceId,
218-
target: targetId,
219-
type,
220-
zIndex: 1,
221-
})
222-
223-
const result = getTransformedModelEdges(
224-
adjacencyListKeys,
225-
lineageAdjacencyList,
226-
transformEdge,
227-
)
228-
229-
expect(result).toHaveLength(0)
230-
})
231-
232-
test('should handle empty adjacency list', () => {
233-
const adjacencyListKeys: string[] = []
234-
const lineageAdjacencyList: LineageAdjacencyList = {}
235-
236-
const transformEdge = (
237-
type: string,
238-
edgeId: EdgeId,
239-
sourceId: NodeId,
240-
targetId: NodeId,
241-
) => ({
242-
id: edgeId,
243-
source: sourceId,
244-
target: targetId,
245-
type,
246-
zIndex: 1,
247-
})
248-
249-
const result = getTransformedModelEdges(
250-
adjacencyListKeys,
251-
lineageAdjacencyList,
252-
transformEdge,
253-
)
254-
255-
expect(result).toHaveLength(0)
256-
})
257-
258-
test('should handle nodes with no targets', () => {
259-
const adjacencyListKeys = ['model1', 'model2']
260-
const lineageAdjacencyList = {
261-
model1: [],
262-
model2: null,
263-
} as unknown as LineageAdjacencyList
264-
265-
const transformEdge = (
266-
type: string,
267-
edgeId: EdgeId,
268-
sourceId: NodeId,
269-
targetId: NodeId,
270-
) => ({
271-
id: edgeId,
272-
source: sourceId,
273-
target: targetId,
274-
type,
275-
zIndex: 1,
276-
})
277-
278-
const result = getTransformedModelEdges(
279-
adjacencyListKeys,
280-
lineageAdjacencyList,
281-
transformEdge,
282-
)
283-
284-
expect(result).toHaveLength(0)
285-
})
286-
})
287-
288146
describe('getTransformedModelEdgesSourceTargets', () => {
289147
test('should transform edges from source to targets using the provided transform function', () => {
290148
const adjacencyListKeys = ['model1', 'model2', 'model3']

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

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -57,47 +57,6 @@ export function getTransformedNodes<
5757
return nodesMap
5858
}
5959

60-
export function getTransformedModelEdges<
61-
TAdjacencyListKey extends string,
62-
TEdgeData extends LineageEdgeData = LineageEdgeData,
63-
TNodeID extends string = NodeId,
64-
TEdgeID extends string = EdgeId,
65-
TPortID extends string = PortId,
66-
>(
67-
adjacencyListKeys: TAdjacencyListKey[],
68-
lineageAdjacencyList: LineageAdjacencyList<TAdjacencyListKey>,
69-
transformEdge: TransformEdgeFn<TEdgeData, TNodeID, TEdgeID, TPortID>,
70-
) {
71-
const nodesCount = adjacencyListKeys.length
72-
73-
if (nodesCount === 0) return []
74-
75-
const edges = []
76-
77-
for (let i = 0; i < nodesCount; i++) {
78-
const adjacencyListKey = adjacencyListKeys[i]
79-
const nodeId = toNodeID<TNodeID>(adjacencyListKey)
80-
const targets = lineageAdjacencyList[adjacencyListKey]
81-
const targetsCount = targets?.length || 0
82-
83-
if (targets == null || targetsCount < 1) continue
84-
85-
for (let j = 0; j < targetsCount; j++) {
86-
const target = targets[j]
87-
88-
if (!(target in lineageAdjacencyList)) continue
89-
90-
const edgeId = toEdgeID<TEdgeID>(adjacencyListKey, target)
91-
92-
edges.push(
93-
transformEdge('edge', edgeId, nodeId, toNodeID<TNodeID>(target)),
94-
)
95-
}
96-
}
97-
98-
return edges
99-
}
100-
10160
export function getTransformedModelEdgesSourceTargets<
10261
TAdjacencyListKey extends string,
10362
TEdgeData extends LineageEdgeData = LineageEdgeData,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export const NodeAppendix = forwardRef<HTMLDivElement, NodeAppendixProps>(
3232
return (
3333
<div
3434
ref={ref}
35+
data-component="NodeAppendix"
3536
className={cn(appendixVariants({ position }), className)}
3637
{...props}
3738
>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ export const NodeBadge = React.forwardRef<HTMLSpanElement, BadgeProps>(
88
return (
99
<Badge
1010
ref={ref}
11+
data-component="NodeBadge"
1112
className={cn(
12-
'font-mono bg-lineage-node-badge-background h-[18px] text-lineage-node-badge-foreground rounded-sm px-1.5 pt-0.5 font-extrabold',
13+
'NodeBadge font-mono bg-lineage-node-badge-background h-[18px] text-lineage-node-badge-foreground rounded-sm px-1.5 pt-0.5 font-extrabold',
1314
className,
1415
)}
1516
size="2xs"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export function NodeDetail({
1717
<>
1818
{hasDivider && <NodeDivider />}
1919
<Metadata
20+
data-component="NodeDetail"
2021
label={label}
2122
value={value}
2223
className={cn('px-2 text-xs shrink-0 h-6', className)}

0 commit comments

Comments
 (0)