diff --git a/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.tsx b/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.tsx
index 19b73c3ef6..90def0f5ea 100644
--- a/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.tsx
+++ b/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.tsx
@@ -202,10 +202,22 @@ export function FactoryColumn<
className="FactoryColumn__Information"
info={description}
>
-
+
) : (
-
+
)}
@@ -214,7 +226,7 @@ export function FactoryColumn<
{type}
}
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 (
{name}
diff --git a/web/common/src/components/Lineage/LineageControlButton.tsx b/web/common/src/components/Lineage/LineageControlButton.tsx
index 6f66f90db7..d3f3d5d215 100644
--- a/web/common/src/components/Lineage/LineageControlButton.tsx
+++ b/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={
{
- 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 (
,
@@ -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 && (
() => cleanupLayoutWorker(), [])
diff --git a/web/common/tailwind.lineage.config.js b/web/common/tailwind.lineage.config.js
index c2c8800a6f..b615ea756f 100644
--- a/web/common/tailwind.lineage.config.js
+++ b/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)',