fix(web_common): lineage styling and border colors (#5494)

Author: mykalmax

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

@@ -202,10 +202,22 @@ export function FactoryColumn<
                     className="FactoryColumn__Information"
                     info={description}
                   >
-                    <DisplayColumName name={name} />
+                    <DisplayColumName
+                      name={name}
+                      className={cn(
+                        isTriggeredColumn &&
+                          'text-lineage-model-column-active-foreground',
+                      )}
+                    />
                   </Information>
                 ) : (
-                  <DisplayColumName name={name} />
+                  <DisplayColumName
+                    name={name}
+                    className={cn(
+                      isTriggeredColumn &&
+                        'text-lineage-model-column-active-foreground',
+                    )}
+                  />
                 )}
               </HorizontalContainer>
             </LoadingContainer>
@@ -214,7 +226,7 @@ export function FactoryColumn<
             <NodeBadge className="FactoryColumn__NodeBadge">{type}</NodeBadge>
           }
           className={cn(
-            'FactoryColumn__Metadata relative overflow-visible group p-0',
+            'FactoryColumn__Metadata relative overflow-visible group',
             isDisabledColumn && 'cursor-not-allowed',
             className,
           )}
@@ -240,8 +252,8 @@ export function FactoryColumn<
         id={id}
         nodeId={nodeId}
         className={cn(
-          'border-t border-lineage-divider first:border-t-0 px-2',
-          isTriggeredColumn && 'bg-lineage-model-column-active',
+          'border-t border-lineage-divider first:border-t-0',
+          isTriggeredColumn && 'bg-lineage-model-column-active-background',
         )}
       >
         {renderColumn()}
@@ -252,11 +264,20 @@ export function FactoryColumn<
   })
 }
 
-function DisplayColumName({ name }: { name: string }) {
+function DisplayColumName({
+  name,
+  className,
+}: {
+  name: string
+  className?: string
+}) {
   return (
     <span
       title={name}
-      className="text-xs font-mono font-semibold w-full truncate"
+      className={cn(
+        'text-xs font-mono font-semibold w-full truncate',
+        className,
+      )}
     >
       {name}
     </span>

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

@@ -21,7 +21,7 @@ export function LineageControlButton({
       side="left"
       sideOffset={8}
       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"
+      className="px-2 py-1 text-xs rounded-sm font-semibold bg-lineage-control-button-tooltip-background text-lineage-control-button-tooltip-foreground border-2 border-lineage-control-button-tooltip-border"
       trigger={
         <div data-component="LineageControlButton">
           <ControlButton

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

@@ -275,21 +275,6 @@ export function LineageLayoutBase<
     updateZoom(viewportZoom)
   }, [updateZoom, viewportZoom])
 
-  React.useEffect(() => {
-    if (currentNode?.id) {
-      setSelectedNodeId(currentNode.id)
-    } else {
-      const node = nodes.length > 0 ? nodes[nodes.length - 1] : null
-
-      if (node) {
-        setCenter(node.position.x, node.position.y, {
-          zoom: zoom,
-          duration: 0,
-        })
-      }
-    }
-  }, [currentNode?.id, setSelectedNodeId, setCenter])
-
   return (
     <ReactFlow<
       LineageNode<TNodeData, TNodeID>,
@@ -327,6 +312,7 @@ export function LineageLayoutBase<
         showInteractive={false}
         showFitView={false}
         position="top-right"
+        className="m-1 border-2 border-lineage-control-border rounded-sm overflow-hidden"
       >
         {currentNode && (
           <LineageControlButton

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

@@ -53,7 +53,7 @@ export const NodePort = React.memo(function NodePort<
       leftId={leftId}
       rightId={rightId}
       className={cn(
-        'relative overflow-visible group p-0 bg-lineage-node-port-background h-auto',
+        'relative overflow-visible group bg-lineage-node-port-background h-auto',
         className,
       )}
       handleClassName="absolute"

web/common/src/components/Lineage/stories/ModelLineage.tsx

@@ -338,7 +338,7 @@ export const ModelLineage = ({
     } else {
       handleReset()
     }
-  }, [handleReset, selectedModelName])
+  }, [handleReset, selectedModelName, nodesMap])
 
   // Cleanup worker on unmount
   React.useEffect(() => () => cleanupLayoutWorker(), [])

web/common/tailwind.lineage.config.js

@@ -8,6 +8,7 @@ export default {
           divider: 'var(--color-lineage-divider)',
           border: 'var(--color-lineage-border)',
           control: {
+            border: 'var(--color-lineage-control-border)',
             background: {
               DEFAULT: 'var(--color-lineage-control-background)',
               hover: 'var(--color-lineage-control-background-hover)',
@@ -18,6 +19,7 @@ export default {
             },
             button: {
               tooltip: {
+                border: 'var(--color-lineage-control-button-tooltip-border)',
                 background:
                   'var(--color-lineage-control-button-tooltip-background)',
                 foreground:
@@ -68,6 +70,12 @@ export default {
           },
           model: {
             column: {
+              active: {
+                background:
+                  'var(--color-lineage-model-column-active-background)',
+                foreground:
+                  'var(--color-lineage-model-column-active-foreground)',
+              },
               source: {
                 background:
                   'var(--color-lineage-model-column-source-background)',
@@ -81,7 +89,6 @@ export default {
                   'var(--color-lineage-model-column-error-background)',
                 icon: 'var(--color-lineage-model-column-error-icon)',
               },
-              active: 'var(--color-lineage-model-column-active)',
               icon: {
                 DEFAULT: 'var(--color-lineage-model-column-icon)',
                 active: 'var(--color-lineage-model-column-icon-active)',