fix(web_common): make styling in some components more flexible

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);
+}

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 (
         <Metadata
-          data-component="ModelColumn"
+          data-component="FactoryColumn"
           onClick={handleSelectColumn}
           label={
             <LoadingContainer
@@ -196,7 +198,10 @@ export function FactoryColumn<
               >
                 {renderColumnStates()}
                 {description ? (
-                  <Information info={description}>
+                  <Information
+                    className="FactoryColumn__Information"
+                    info={description}
+                  >
                     <DisplayColumName name={name} />
                   </Information>
                 ) : (
@@ -205,9 +210,11 @@ export function FactoryColumn<
               </HorizontalContainer>
             </LoadingContainer>
           }
-          value={<NodeBadge>{type}</NodeBadge>}
+          value={
+            <NodeBadge className="FactoryColumn__NodeBadge">{type}</NodeBadge>
+          }
           className={cn(
-            'relative overflow-visible group p-0',
+            'FactoryColumn__Metadata relative overflow-visible group p-0',
             isDisabledColumn && 'cursor-not-allowed',
             className,
           )}

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={
-        <div>
+        <div data-component="LineageControlButton">
           <ControlButton
             onClick={onClick}
             className={cn(

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

@@ -28,6 +28,7 @@ export const LineageControlIcon = React.forwardRef<
     return (
       <Icon
         ref={ref}
+        data-component="LineageControlIcon"
         size={size}
         className={cn(
           'text-lineage-control-icon-foreground stroke-lineage-control-icon-background',

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

@@ -352,6 +352,7 @@ function LineageLayoutBase<
 
   return (
     <VerticalContainer
+      data-component="LineageLayout"
       className={cn(
         'border-2 border-lineage-border bg-lineage-background relative h-full',
         className,

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

@@ -4,7 +4,6 @@ import { Position } from '@xyflow/react'
 import {
   getOnlySelectedNodes,
   getTransformedNodes,
-  getTransformedModelEdges,
   getTransformedModelEdgesSourceTargets,
   getTransformedModelEdgesTargetSources,
   createNode,
@@ -144,147 +143,6 @@ describe('Lineage Help Functions', () => {
     })
   })
 
-  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']

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<TAdjacencyListKey>,
-  transformEdge: TransformEdgeFn<TEdgeData, TNodeID, TEdgeID, TPortID>,
-) {
-  const nodesCount = adjacencyListKeys.length
-
-  if (nodesCount === 0) return []
-
-  const edges = []
-
-  for (let i = 0; i < nodesCount; i++) {
-    const adjacencyListKey = adjacencyListKeys[i]
-    const nodeId = toNodeID<TNodeID>(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<TEdgeID>(adjacencyListKey, target)
-
-      edges.push(
-        transformEdge('edge', edgeId, nodeId, toNodeID<TNodeID>(target)),
-      )
-    }
-  }
-
-  return edges
-}
-
 export function getTransformedModelEdgesSourceTargets<
   TAdjacencyListKey extends string,
   TEdgeData extends LineageEdgeData = LineageEdgeData,

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

@@ -32,6 +32,7 @@ export const NodeAppendix = forwardRef<HTMLDivElement, NodeAppendixProps>(
     return (
       <div
         ref={ref}
+        data-component="NodeAppendix"
         className={cn(appendixVariants({ position }), className)}
         {...props}
       >

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

@@ -8,8 +8,9 @@ export const NodeBadge = React.forwardRef<HTMLSpanElement, BadgeProps>(
     return (
       <Badge
         ref={ref}
+        data-component="NodeBadge"
         className={cn(
-          'font-mono bg-lineage-node-badge-background h-[18px] text-lineage-node-badge-foreground rounded-sm px-1.5 pt-0.5 font-extrabold',
+          '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',
           className,
         )}
         size="2xs"

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

@@ -17,6 +17,7 @@ export function NodeDetail({
     <>
       {hasDivider && <NodeDivider />}
       <Metadata
+        data-component="NodeDetail"
         label={label}
         value={value}
         className={cn('px-2 text-xs shrink-0 h-6', className)}

web/common/src/components/Lineage/node/NodeDivider.tsx

@@ -1,3 +1,8 @@
 export function NodeDivider() {
-  return <div className="border-t border-lineage-divider" />
+  return (
+    <div
+      data-component="NodeDivider"
+      className="border-t border-lineage-divider"
+    />
+  )
 }

web/common/src/components/Lineage/node/NodeHandle.tsx

@@ -18,6 +18,7 @@ export const NodeHandle = React.memo(function NodeHandle({
 }) {
   return (
     <BaseHandle
+      data-component="NodeHandle"
       type={type}
       position={type === 'target' ? Position.Left : Position.Right}
       id={id}

web/common/src/components/Lineage/node/NodeHandleIcon.tsx

@@ -11,6 +11,7 @@ export function NodeHandleIcon({
 }) {
   return (
     <ArrowRight
+      data-component="NodeHandleIcon"
       size={iconSize}
       className={cn(
         'flex-shrink-0 p-0.5 border-2 rounded-full bg-lineage-node-handle-icon-background',

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

@@ -14,6 +14,7 @@ export const NodeHeader = forwardRef<HTMLElement, NodeHeaderProps>(
   ({ className, ...props }, ref) => {
     return (
       <header
+        data-component="NodeHeader"
         ref={ref}
         {...props}
         className={cn(

web/common/src/components/Metadata/Metadata.tsx

@@ -14,7 +14,7 @@ export const Metadata = React.forwardRef<HTMLDivElement, MetadataProps>(
         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}

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);
+}

web/common/src/components/VirtualList/FilterableList.tsx

@@ -57,7 +57,7 @@ export function FilterableList<TItem>({
             setSearch(e.target.value)
           }
           inputSize="xs"
-          className="w-full"
+          className="FilterableList__Input w-full"
         />
         <Counter
           itemsLength={items.length}