diff --git a/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.css b/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.css new file mode 100644 index 0000000000..d6eea6674a --- /dev/null +++ b/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.css @@ -0,0 +1,31 @@ +:root { + --color-lineage-model-column-badge-background: var( + --color-lineage-node-badge-background + ); + --color-lineage-model-column-badge-foreground: var( + --color-lineage-node-badge-foreground + ); + + --color-lineage-model-column-metadata-label: var(--color-metadata-label); + --color-lineage-model-column-metadata-value: var(--color-metadata-value); + + --color-lineage-model-column-information-info: var(--color-information-info); +} + +.FactoryColumn__Metadata { + --color-metadata-label: var(--color-lineage-model-column-metadata-label); + --color-metadata-value: var(--color-lineage-model-column-metadata-value); +} + +.FactoryColumn__NodeBadge { + --color-lineage-node-badge-background: var( + --color-lineage-model-column-badge-background + ); + --color-lineage-node-badge-foreground: var( + --color-lineage-model-column-badge-foreground + ); +} + +.FactoryColumn__Information { + --color-typography-info: var(--color-lineage-model-column-information-info); +} diff --git a/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.tsx b/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.tsx index 7b5e9e0ae0..19b73c3ef6 100644 --- a/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.tsx +++ b/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.tsx @@ -21,6 +21,8 @@ import { HorizontalContainer } from '@/components/HorizontalContainer/Horizontal import { Information } from '@/components/Typography/Information' import { LoadingContainer } from '@/components/LoadingContainer/LoadingContainer' +import './FactoryColumn.css' + export function FactoryColumn< TAdjacencyListKey extends string, TAdjacencyListColumnKey extends string, @@ -184,7 +186,7 @@ export function FactoryColumn< function renderColumn() { return ( {renderColumnStates()} {description ? ( - + ) : ( @@ -205,9 +210,11 @@ export function FactoryColumn< } - value={{type}} + value={ + {type} + } className={cn( - 'relative overflow-visible group p-0', + 'FactoryColumn__Metadata relative overflow-visible group p-0', isDisabledColumn && 'cursor-not-allowed', className, )} diff --git a/web/common/src/components/Lineage/LineageControlButton.tsx b/web/common/src/components/Lineage/LineageControlButton.tsx index 5f1abaa952..6f66f90db7 100644 --- a/web/common/src/components/Lineage/LineageControlButton.tsx +++ b/web/common/src/components/Lineage/LineageControlButton.tsx @@ -23,7 +23,7 @@ export function LineageControlButton({ delayDuration={0} className="px-2 py-1 text-xs rounded-sm font-semibold bg-lineage-control-button-tooltip-background text-lineage-control-button-tooltip-foreground" trigger={ -
+
{ }) }) - describe('getTransformedModelEdges', () => { - test('should transform edges using the provided transform function', () => { - const adjacencyListKeys = ['model1', 'model2', 'model3'] - const lineageAdjacencyList: LineageAdjacencyList = { - model1: ['model2', 'model3'], - model2: ['model3'], - model3: [], - } - - const transformEdge = ( - type: string, - edgeId: EdgeId, - sourceId: NodeId, - targetId: NodeId, - ) => ({ - id: edgeId, - source: sourceId, - target: targetId, - type, - zIndex: 1, - }) - - const result = getTransformedModelEdges( - adjacencyListKeys, - lineageAdjacencyList, - transformEdge, - ) - - expect(result).toHaveLength(3) - - const model1Id = toNodeID('model1') - const model2Id = toNodeID('model2') - const model3Id = toNodeID('model3') - - expect(result[0]).toEqual({ - id: toEdgeID('model1', 'model2'), - source: model1Id, - target: model2Id, - type: 'edge', - zIndex: 1, - }) - expect(result[1]).toEqual({ - id: toEdgeID('model1', 'model3'), - source: model1Id, - target: model3Id, - type: 'edge', - zIndex: 1, - }) - expect(result[2]).toEqual({ - id: toEdgeID('model2', 'model3'), - source: model2Id, - target: model3Id, - type: 'edge', - zIndex: 1, - }) - }) - - test('should skip edges where target is not in adjacency list', () => { - const adjacencyListKeys = ['model1'] - const lineageAdjacencyList: LineageAdjacencyList = { - model1: ['model2'], // model2 is not in the adjacency list - } - - const transformEdge = ( - type: string, - edgeId: EdgeId, - sourceId: NodeId, - targetId: NodeId, - ) => ({ - id: edgeId, - source: sourceId, - target: targetId, - type, - zIndex: 1, - }) - - const result = getTransformedModelEdges( - adjacencyListKeys, - lineageAdjacencyList, - transformEdge, - ) - - expect(result).toHaveLength(0) - }) - - test('should handle empty adjacency list', () => { - const adjacencyListKeys: string[] = [] - const lineageAdjacencyList: LineageAdjacencyList = {} - - const transformEdge = ( - type: string, - edgeId: EdgeId, - sourceId: NodeId, - targetId: NodeId, - ) => ({ - id: edgeId, - source: sourceId, - target: targetId, - type, - zIndex: 1, - }) - - const result = getTransformedModelEdges( - adjacencyListKeys, - lineageAdjacencyList, - transformEdge, - ) - - expect(result).toHaveLength(0) - }) - - test('should handle nodes with no targets', () => { - const adjacencyListKeys = ['model1', 'model2'] - const lineageAdjacencyList = { - model1: [], - model2: null, - } as unknown as LineageAdjacencyList - - const transformEdge = ( - type: string, - edgeId: EdgeId, - sourceId: NodeId, - targetId: NodeId, - ) => ({ - id: edgeId, - source: sourceId, - target: targetId, - type, - zIndex: 1, - }) - - const result = getTransformedModelEdges( - adjacencyListKeys, - lineageAdjacencyList, - transformEdge, - ) - - expect(result).toHaveLength(0) - }) - }) - describe('getTransformedModelEdgesSourceTargets', () => { test('should transform edges from source to targets using the provided transform function', () => { const adjacencyListKeys = ['model1', 'model2', 'model3'] diff --git a/web/common/src/components/Lineage/help.ts b/web/common/src/components/Lineage/help.ts index 1e5d5a9d6b..97f4ad9542 100644 --- a/web/common/src/components/Lineage/help.ts +++ b/web/common/src/components/Lineage/help.ts @@ -57,47 +57,6 @@ export function getTransformedNodes< return nodesMap } -export function getTransformedModelEdges< - TAdjacencyListKey extends string, - TEdgeData extends LineageEdgeData = LineageEdgeData, - TNodeID extends string = NodeId, - TEdgeID extends string = EdgeId, - TPortID extends string = PortId, ->( - adjacencyListKeys: TAdjacencyListKey[], - lineageAdjacencyList: LineageAdjacencyList, - transformEdge: TransformEdgeFn, -) { - const nodesCount = adjacencyListKeys.length - - if (nodesCount === 0) return [] - - const edges = [] - - for (let i = 0; i < nodesCount; i++) { - const adjacencyListKey = adjacencyListKeys[i] - const nodeId = toNodeID(adjacencyListKey) - const targets = lineageAdjacencyList[adjacencyListKey] - const targetsCount = targets?.length || 0 - - if (targets == null || targetsCount < 1) continue - - for (let j = 0; j < targetsCount; j++) { - const target = targets[j] - - if (!(target in lineageAdjacencyList)) continue - - const edgeId = toEdgeID(adjacencyListKey, target) - - edges.push( - transformEdge('edge', edgeId, nodeId, toNodeID(target)), - ) - } - } - - return edges -} - export function getTransformedModelEdgesSourceTargets< TAdjacencyListKey extends string, TEdgeData extends LineageEdgeData = LineageEdgeData, diff --git a/web/common/src/components/Lineage/node/NodeAppendix.tsx b/web/common/src/components/Lineage/node/NodeAppendix.tsx index 76d64affed..5a703a468f 100644 --- a/web/common/src/components/Lineage/node/NodeAppendix.tsx +++ b/web/common/src/components/Lineage/node/NodeAppendix.tsx @@ -32,6 +32,7 @@ export const NodeAppendix = forwardRef( return (
diff --git a/web/common/src/components/Lineage/node/NodeBadge.tsx b/web/common/src/components/Lineage/node/NodeBadge.tsx index 943e5e9267..8c894ecca2 100644 --- a/web/common/src/components/Lineage/node/NodeBadge.tsx +++ b/web/common/src/components/Lineage/node/NodeBadge.tsx @@ -8,8 +8,9 @@ export const NodeBadge = React.forwardRef( return ( {hasDivider && } + return ( +
+ ) } diff --git a/web/common/src/components/Lineage/node/NodeHandle.tsx b/web/common/src/components/Lineage/node/NodeHandle.tsx index e737ff4327..4bfbfa6181 100644 --- a/web/common/src/components/Lineage/node/NodeHandle.tsx +++ b/web/common/src/components/Lineage/node/NodeHandle.tsx @@ -18,6 +18,7 @@ export const NodeHandle = React.memo(function NodeHandle({ }) { return ( ( ({ className, ...props }, ref) => { return (
( ref={ref} data-component="Metadata" className={cn( - 'justify-between gap-2 items-center whitespace-nowrap h-auto', + 'Metadata justify-between gap-2 items-center whitespace-nowrap h-auto', className, )} {...props} diff --git a/web/common/src/components/VirtualList/FilterableList.css b/web/common/src/components/VirtualList/FilterableList.css index 4dfdd87eea..3b1a8f8c3d 100644 --- a/web/common/src/components/VirtualList/FilterableList.css +++ b/web/common/src/components/VirtualList/FilterableList.css @@ -7,3 +7,10 @@ --color-filterable-list-input-placeholder: var(--color-input-placeholder); --color-filterable-list-input-border: var(--color-input-border); } + +.FilterableList__Input { + --color-input-background: var(--color-filterable-list-input-background); + --color-input-foreground: var(--color-filterable-list-input-foreground); + --color-input-placeholder: var(--color-filterable-list-input-placeholder); + --color-input-border: var(--color-filterable-list-input-border); +} diff --git a/web/common/src/components/VirtualList/FilterableList.tsx b/web/common/src/components/VirtualList/FilterableList.tsx index 5ea0d35039..d22bfca784 100644 --- a/web/common/src/components/VirtualList/FilterableList.tsx +++ b/web/common/src/components/VirtualList/FilterableList.tsx @@ -57,7 +57,7 @@ export function FilterableList({ setSearch(e.target.value) } inputSize="xs" - className="w-full" + className="FilterableList__Input w-full" />