From 346476a5179a800f1719b59ea483b1c732139b90 Mon Sep 17 00:00:00 2001
From: bengotow <bgotow@elementl.com>
Date: Tue, 19 Mar 2024 09:12:28 -0500
Subject: [PATCH] Bold columns connected to the current column

---
 .../src/asset-graph/AssetColumnsNode.tsx        | 15 ++++++++++++---
 .../src/assets/AssetColumnLineageGraph.tsx      | 17 ++++++++++++++++-
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetColumnsNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetColumnsNode.tsx
index 96db8139d59c9..c4f7c2eda6b4a 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetColumnsNode.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetColumnsNode.tsx
@@ -52,22 +52,31 @@ export const AssetColumnNode = ({
   assetKey,
   column,
   selected,
+  bolded,
 }: {
   assetKey: AssetKeyInput;
   column: AssetColumnLineageLocalColumn;
   selected: boolean;
+  bolded: boolean;
 }) => {
   const icon = iconForColumnType(column.type ?? '');
 
   return (
-    <Box margin={{horizontal: 12}} style={{height: 32}} flex={{direction: 'column'}}>
+    <Box flex={{direction: 'column'}}>
       <Tooltip key={column.name} content={column.description || 'No description provided'}>
         <ColumnLink
           to={assetDetailsPathForKey(assetKey, {view: 'lineage', column: column.name})}
           $selected={selected}
         >
           {icon ? <Icon name={icon} /> : <span style={{width: 16}} />}
-          <Caption style={{whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>
+          <Caption
+            style={{
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              fontWeight: bolded ? 600 : 'initial',
+            }}
+          >
             {column.name}
           </Caption>
         </ColumnLink>
@@ -78,7 +87,7 @@ export const AssetColumnNode = ({
 
 const ColumnLink = styled(Link)<{$selected: boolean}>`
   height: 28px;
-  margin: 2px 0;
+  margin: 2px 12px;
   padding-left: 2px;
   padding-right: 4px;
   display: flex;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetColumnLineageGraph.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetColumnLineageGraph.tsx
index 613356af3971f..b4b49ea57a2a0 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetColumnLineageGraph.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetColumnLineageGraph.tsx
@@ -1,5 +1,5 @@
 import {Box, Spinner} from '@dagster-io/ui-components';
-import {useRef, useState} from 'react';
+import {useMemo, useRef, useState} from 'react';
 import styled from 'styled-components';
 
 import {SVGSaveZoomLevel, useLastSavedZoomLevel} from './SavedZoomLevel';
@@ -39,6 +39,20 @@ export const AssetColumnLineageGraph = ({
 
   useLastSavedZoomLevel(viewportEl, layout, focusedAssetGraphId);
 
+  const bolded = useMemo(() => {
+    const bolded = new Set<string>();
+    if (!highlighted || !layout) {
+      return bolded;
+    }
+
+    for (const id of highlighted) {
+      bolded.add(id);
+      layout.edges.filter((e) => e.fromId === id).forEach((e) => bolded.add(e.toId));
+      layout.edges.filter((e) => e.toId === id).forEach((e) => bolded.add(e.fromId));
+    }
+    return bolded;
+  }, [layout, highlighted]);
+
   if (!layout || loading) {
     return (
       <Box style={{flex: 1}} flex={{alignItems: 'center', justifyContent: 'center'}}>
@@ -139,6 +153,7 @@ export const AssetColumnLineageGraph = ({
                   <AssetColumnNode
                     assetKey={assetKey}
                     column={col}
+                    bolded={bolded.has(id)}
                     selected={assetGraphId === focusedAssetGraphId && focusedColumn === column}
                   />
                 </foreignObject>