Cleanup

dagster-io · Mar 17, 2024 · 6962536 · 6962536
1 parent 74f58c8
commit 6962536
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 103 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
@@ -1,4 +1,6 @@
-import {Box, Caption, Tooltip} from '@dagster-io/ui-components';
+import {Box, Caption, Colors, StyledTag, Tooltip} from '@dagster-io/ui-components';
+import {Link} from 'react-router-dom';
+import styled from 'styled-components';
 
 import {
   AssetInsetForHoverEffect,
@@ -7,7 +9,9 @@ import {
   AssetNodeContainer,
 } from './AssetNode';
 import {AssetNodeFragment} from './types/AssetNode.types';
+import {assetDetailsPathForKey} from '../assets/assetDetailsPathForKey';
 import {AssetColumnLineageLocal} from '../assets/lineage/useColumnLineageDataForAssets';
+import {AssetKeyInput} from '../graphql/types';
 import {TypeTag} from '../metadata/TableSchema';
 
 export const AssetColumnsGroupNode = ({
@@ -23,7 +27,7 @@ export const AssetColumnsGroupNode = ({
     <AssetInsetForHoverEffect>
       <AssetNodeContainer $selected={selected}>
         <div style={{minHeight: 24}} />
-        <AssetNodeBox $selected={selected} $isSource={definition.isSource}>
+        <AssetNodeBox $selected={selected} $isSource={definition.isSource} $noScale>
           <AssetNameRow definition={definition} />
           <Box style={{height: height - 60}} flex={{direction: 'column'}}></Box>
         </AssetNodeBox>
@@ -32,19 +36,53 @@ export const AssetColumnsGroupNode = ({
   );
 };
 
-export const AssetColumnNode = ({column}: {column: AssetColumnLineageLocal['']}) => {
+export const AssetColumnNode = ({
+  assetKey,
+  column,
+  selected,
+}: {
+  assetKey: AssetKeyInput;
+  column: AssetColumnLineageLocal[''];
+  selected: boolean;
+}) => {
   return (
     <Box style={{width: '100%', height: 32}} flex={{direction: 'column'}}>
       <Tooltip key={column.name} content={column.description || 'No description provided'}>
-        <Box
-          style={{height: 32}}
-          padding={{left: 8, right: 4}}
-          flex={{gap: 4, justifyContent: 'space-between', alignItems: 'center'}}
+        <ColumnLink
+          to={assetDetailsPathForKey(assetKey, {view: 'lineage', column: column.name})}
+          $selected={selected}
         >
           <Caption>{column.name}</Caption>
           <TypeTag type={column.type || ''} />
-        </Box>
+        </ColumnLink>
       </Tooltip>
     </Box>
   );
 };
+
+const ColumnLink = styled(Link)<{$selected: boolean}>`
+  height: 28px;
+  margin: 2px 0;
+  padding-left: 8px;
+  padding-right: 4px;
+  display: flex;
+  gap: 4px;
+  justify-content: space-between;
+  align-items: center;
+  transition: background 100ms linear;
+  border-radius: 8px;
+
+  ${StyledTag} {
+    background: none;
+    color: ${Colors.textLight()};
+  }
+  ${(p) =>
+    p.$selected
+      ? `
+    background: ${Colors.backgroundBlue()}`
+      : `
+    &:hover {
+      text-decoration: none;
+      background: ${Colors.backgroundLightHover()};
+    }`}
+`;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx
@@ -274,7 +274,11 @@ const AssetNodeShowOnHover = styled.span`
   display: none;
 `;
 
-export const AssetNodeBox = styled.div<{$isSource: boolean; $selected: boolean}>`
+export const AssetNodeBox = styled.div<{
+  $isSource: boolean;
+  $selected: boolean;
+  $noScale?: boolean;
+}>`
   ${(p) =>
     p.$isSource
       ? `border: 2px dashed ${p.$selected ? Colors.accentGrayHover() : Colors.accentGray()}`
@@ -290,7 +294,7 @@ export const AssetNodeBox = styled.div<{$isSource: boolean; $selected: boolean}>
   &:hover {
     ${(p) => !p.$selected && `border: 2px solid ${Colors.lineageNodeBorderHover()};`};
     box-shadow: ${Colors.shadowDefault()} 0px 1px 4px 0px;
-    scale: 1.03;
+    scale: ${(p) => (p.$noScale ? '1' : '1.03')};
     ${AssetNodeShowOnHover} {
       display: initial;
     }

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/layout.ts b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/layout.ts
@@ -45,6 +45,7 @@ export type LayoutAssetGraphConfig = dagre.GraphLabel & {
    */
   groupPaddingTop: number;
   groupPaddingBottom: number;
+  groupRendering: 'if-varied' | 'always';
 };
 
 export type LayoutAssetGraphOptions = {
@@ -65,6 +66,7 @@ export const Config = {
     nodeHeight: 'auto',
     groupPaddingTop: 65,
     groupPaddingBottom: -15,
+    groupRendering: 'if-varied',
   },
   vertical: {
     ranker: 'tight-tree',
@@ -78,6 +80,7 @@ export const Config = {
     nodeHeight: 'auto',
     groupPaddingTop: 40,
     groupPaddingBottom: -20,
+    groupRendering: 'if-varied',
   },
 };
 
@@ -113,7 +116,9 @@ export const layoutAssetGraph = (
   }
 
   // Add all the group boxes to the graph
-  const groupsPresent = Object.keys(groups).length > 1;
+  const groupsPresent =
+    config.groupRendering === 'if-varied' ? Object.keys(groups).length > 1 : true;
+
   if (groupsPresent) {
     Object.keys(groups).forEach((groupId) => {
       if (expandedGroups.includes(groupId)) {

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
@@ -8,7 +8,6 @@ import {fromColumnGraphId, useColumnLineageLayout} from './useColumnLineageLayou
 import {AssetColumnNode, AssetColumnsGroupNode} from '../asset-graph/AssetColumnsNode';
 import {AssetEdges} from '../asset-graph/AssetEdges';
 import {AssetNodeContextMenuWrapper} from '../asset-graph/AssetNode';
-import {AssetNodeLink} from '../asset-graph/ForeignNode';
 import {GraphData, fromGraphId, toGraphId} from '../asset-graph/Utils';
 import {DEFAULT_MAX_ZOOM, SVGViewport} from '../graph/SVGViewport';
 import {isNodeOffscreen} from '../graph/common';
@@ -18,32 +17,27 @@ export const AssetColumnLineageGraph = ({
   assetKey,
   assetGraphData,
   columnLineageData,
-  column,
+  focusedColumn,
 }: {
   assetKey: AssetKeyInput;
   assetGraphData: GraphData;
   columnLineageData: AssetColumnLineages;
-  column: string;
+  focusedColumn: string;
 }) => {
-  const assetGraphId = toGraphId(assetKey);
+  const focusedAssetGraphId = toGraphId(assetKey);
 
   const [highlighted, setHighlighted] = useState<string[] | null>(null);
 
   const {layout, loading} = useColumnLineageLayout(
     assetGraphData,
-    assetGraphId,
-    column,
+    focusedAssetGraphId,
+    focusedColumn,
     columnLineageData,
   );
 
   const viewportEl = useRef<SVGViewport>();
-  //   const history = useHistory();
 
-  //   const onClickAsset = (key: AssetKey) => {
-  //     history.push(assetDetailsPathForKey(key, {...params, lineageScope: 'neighbors'}));
-  //   };
-
-  useLastSavedZoomLevel(viewportEl, layout, assetGraphId);
+  useLastSavedZoomLevel(viewportEl, layout, focusedAssetGraphId);
 
   if (!layout || loading) {
     return (
@@ -88,7 +82,6 @@ export const AssetColumnLineageGraph = ({
                   style={{overflow: 'visible'}}
                   onMouseEnter={() => setHighlighted([id])}
                   onMouseLeave={() => setHighlighted(null)}
-                  // onClick={() => onClickAsset({path})}
                   onDoubleClick={(e) => {
                     viewportEl.current?.zoomToSVGBox(bounds, true, 1.2);
                     e.stopPropagation();
@@ -97,7 +90,7 @@ export const AssetColumnLineageGraph = ({
                   <AssetNodeContextMenuWrapper {...contextMenuProps}>
                     <AssetColumnsGroupNode
                       definition={graphNode!.definition}
-                      selected={assetGraphId === groupAssetGraphId}
+                      selected={focusedAssetGraphId === groupAssetGraphId}
                       height={bounds.height}
                     />
                   </AssetNodeContextMenuWrapper>
@@ -118,7 +111,6 @@ export const AssetColumnLineageGraph = ({
             .map(({id, bounds}) => {
               const {assetGraphId, column} = fromColumnGraphId(id);
               const assetKey = fromGraphId(assetGraphId);
-              const graphNode = assetGraphData.nodes[assetGraphId];
 
               const col = columnLineageData[assetGraphId]?.[column] || {
                 name: column,
@@ -127,11 +119,6 @@ export const AssetColumnLineageGraph = ({
                 upstream: [],
               };
 
-              const contextMenuProps = {
-                graphData: assetGraphData,
-                node: graphNode!,
-              };
-
               return (
                 <foreignObject
                   {...bounds}
@@ -144,13 +131,11 @@ export const AssetColumnLineageGraph = ({
                     e.stopPropagation();
                   }}
                 >
-                  {!graphNode ? (
-                    <AssetNodeLink assetKey={assetKey} />
-                  ) : (
-                    <AssetNodeContextMenuWrapper {...contextMenuProps}>
-                      <AssetColumnNode column={col} />
-                    </AssetNodeContextMenuWrapper>
-                  )}
+                  <AssetColumnNode
+                    assetKey={assetKey}
+                    column={col}
+                    selected={assetGraphId === focusedAssetGraphId && focusedColumn === column}
+                  />
                 </foreignObject>
               );
             })}

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeLineage.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeLineage.tsx
@@ -86,37 +86,42 @@ export const AssetNodeLineage = ({
           onChange={(depth) => setParams({...params, lineageDepth: depth})}
           max={maxDepth}
         />
-        Column
-        {columnLineage ? (
-          <Suggest
-            resetOnQuery={false}
-            resetOnClose={false}
-            resetOnSelect={false}
-            inputProps={{
-              placeholder: 'Select a column…',
-              rightElement: column ? (
-                <ClearButton onClick={() => setColumn(null)} style={{marginTop: 5, marginRight: 4}}>
-                  <Icon name="cancel" />
-                </ClearButton>
-              ) : undefined,
-            }}
-            selectedItem={column}
-            items={Object.keys(columnLineage)}
-            noResults="No matching columns"
-            onItemSelect={setColumn}
-            inputValueRenderer={(item) => item}
-            itemPredicate={(query, item) =>
-              item.toLocaleLowerCase().includes(query.toLocaleLowerCase())
-            }
-            itemRenderer={(item, itemProps) => (
-              <MenuItem
-                active={itemProps.modifiers.active}
-                onClick={(e) => itemProps.handleClick(e)}
-                text={item}
-                key={item}
-              />
-            )}
-          />
+        {columnLineage || column ? (
+          <>
+            Column
+            <Suggest
+              resetOnQuery={false}
+              resetOnClose={false}
+              resetOnSelect={false}
+              inputProps={{
+                placeholder: 'Select a column…',
+                rightElement: column ? (
+                  <ClearButton
+                    onClick={() => setColumn(null)}
+                    style={{marginTop: 5, marginRight: 4}}
+                  >
+                    <Icon name="cancel" />
+                  </ClearButton>
+                ) : undefined,
+              }}
+              selectedItem={column}
+              items={Object.keys(columnLineage || {})}
+              noResults="No matching columns"
+              onItemSelect={setColumn}
+              inputValueRenderer={(item) => item}
+              itemPredicate={(query, item) =>
+                item.toLocaleLowerCase().includes(query.toLocaleLowerCase())
+              }
+              itemRenderer={(item, itemProps) => (
+                <MenuItem
+                  active={itemProps.modifiers.active}
+                  onClick={(e) => itemProps.handleClick(e)}
+                  text={item}
+                  key={item}
+                />
+              )}
+            />
+          </>
         ) : undefined}
         <div style={{flex: 1}} />
         {Object.values(assetGraphData.nodes).length > 1 ? (
@@ -140,7 +145,7 @@ export const AssetNodeLineage = ({
           assetKey={assetKey}
           assetGraphData={assetGraphData}
           columnLineageData={columnLineageData}
-          column={column}
+          focusedColumn={column}
         />
       ) : (
         <AssetNodeLineageGraph