[ui] Refactoring to support asset health overview (#21081)

## Summary & Motivation This PR extracts the fetching and filtering portions of the asset catalog into a high-level hook so that it's easier to build UI that re-uses the asset catalog's index caching and filtering. I also exported a few pieces of the left asset sidebar and updated asset context menus to allow them to appear in more places. ## How I Tested These Changes Tested this as part of the new asset health feature in cloud --------- Co-authored-by: bengotow <[email protected]>
dagster-io · Apr 22, 2024 · 530fae2 · 530fae2 · github-actions · Apr 22, 2024
1 parent d519ecb
commit 530fae2
Show file tree

Hide file tree

Showing 22 changed files with 423 additions and 302 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/CollapsibleSection.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/CollapsibleSection.tsx
@@ -39,11 +39,11 @@ export const CollapsibleSection = ({
               name="arrow_drop_down"
               style={{transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)'}}
             />
-            <div>{header}</div>
+            <div style={{userSelect: 'none'}}>{header}</div>
           </>
         ) : (
-          <Box flex={{justifyContent: 'space-between', alignItems: 'center'}}>
-            <div>{header}</div>
+          <Box style={{flex: 1}} flex={{justifyContent: 'space-between', alignItems: 'center'}}>
+            <div style={{userSelect: 'none'}}>{header}</div>
             <Icon
               name="arrow_drop_down"
               style={{transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)'}}

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNodeMenu.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNodeMenu.tsx
@@ -1,7 +1,7 @@
 import {Box, Menu, MenuDivider, MenuItem, Spinner} from '@dagster-io/ui-components';
 import * as React from 'react';
 
-import {GraphData, GraphNode, tokenForAssetKey} from './Utils';
+import {GraphData, tokenForAssetKey} from './Utils';
 import {StatusDot} from './sidebar/StatusDot';
 import {useAssetBaseData} from '../asset-data/AssetBaseDataProvider';
 import {useExecuteAssetMenuItem} from '../assets/AssetActionMenu';
@@ -11,13 +11,24 @@ import {
   AssetKeysDialogHeader,
 } from '../assets/AutoMaterializePolicyPage/AssetKeysDialog';
 import {assetDetailsPathForKey} from '../assets/assetDetailsPathForKey';
+import {AssetKeyInput} from '../graphql/types';
 import {ExplorerPath} from '../pipelines/PipelinePathUtils';
 import {MenuLink} from '../ui/MenuLink';
 import {VirtualizedItemListForDialog} from '../ui/VirtualizedItemListForDialog';
 
+export type AssetNodeMenuNode = {
+  id: string;
+  assetKey: AssetKeyInput;
+  definition: {
+    isSource: boolean;
+    isExecutable: boolean;
+    hasMaterializePermission: boolean;
+  };
+};
+
 export type AssetNodeMenuProps = {
-  graphData: GraphData;
-  node: GraphNode;
+  node: AssetNodeMenuNode;
+  graphData?: GraphData;
   explorerPath?: ExplorerPath;
   onChangeExplorerPath?: (path: ExplorerPath, mode: 'replace' | 'push') => void;
   selectNode?: (e: React.MouseEvent<any> | React.KeyboardEvent<any>, nodeId: string) => void;
@@ -30,8 +41,8 @@ export const useAssetNodeMenu = ({
   explorerPath,
   onChangeExplorerPath,
 }: AssetNodeMenuProps) => {
-  const upstream = Object.keys(graphData.upstream[node.id] ?? {});
-  const downstream = Object.keys(graphData.downstream[node.id] ?? {});
+  const upstream = graphData ? Object.keys(graphData.upstream[node.id] ?? {}) : [];
+  const downstream = graphData ? Object.keys(graphData.downstream[node.id] ?? {}) : [];
 
   const {executeItem, launchpadElement} = useExecuteAssetMenuItem(
     node.assetKey.path,
@@ -80,7 +91,7 @@ export const useAssetNodeMenu = ({
         <MenuDivider />
         {executeItem}
         {executeItem && (upstream.length || downstream.length) ? <MenuDivider /> : null}
-        {upstream.length ? (
+        {upstream.length && graphData ? (
           <MenuItem
             text={`View parents (${upstream.length})`}
             icon="list"
@@ -89,14 +100,14 @@ export const useAssetNodeMenu = ({
             }}
           />
         ) : null}
-        {upstream.length ? (
+        {upstream.length || !graphData ? (
           <MenuItem
             text="Show upstream graph"
             icon="arrow_back"
             onClick={() => showGraph(`*\"${tokenForAssetKey(node.assetKey)}\"`)}
           />
         ) : null}
-        {downstream.length ? (
+        {downstream.length || !graphData ? (
           <MenuItem
             text="Show downstream graph"
             icon="arrow_forward"
@@ -107,14 +118,16 @@ export const useAssetNodeMenu = ({
     ),
     dialog: (
       <>
-        <UpstreamDownstreamDialog
-          title="Parent assets"
-          graphData={graphData}
-          assetKeys={upstream}
-          isOpen={showParents}
-          setIsOpen={setShowParents}
-          selectNode={selectNode}
-        />
+        {graphData && (
+          <UpstreamDownstreamDialog
+            title="Parent assets"
+            graphData={graphData}
+            assetKeys={upstream}
+            isOpen={showParents}
+            setIsOpen={setShowParents}
+            selectNode={selectNode}
+          />
+        )}
         {launchpadElement}
       </>
     ),

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNodeStatusContent.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNodeStatusContent.tsx
@@ -49,7 +49,7 @@ const LOADING_STATUS_CONTENT = {
   ),
 };
 
-type StatusContentArgs = {
+export type StatusContentArgs = {
   assetKey: AssetKeyInput;
   definition: {opNames: string[]; isSource: boolean; isObservable: boolean};
   liveData: LiveDataForNode | null | undefined;

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/ContextMenuWrapper.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/ContextMenuWrapper.tsx
@@ -18,14 +18,24 @@ export const ContextMenuWrapper = ({
   wrapperInnerStyles?: React.CSSProperties;
 }) => {
   const [menuVisible, setMenuVisible] = React.useState(false);
-  const [menuPosition, setMenuPosition] = React.useState<{top: number; left: number}>({
-    top: 0,
-    left: 0,
+  const [menuPosition, setMenuPosition] = React.useState<{
+    x: number;
+    y: number;
+    anchor: 'left' | 'right';
+  }>({
+    anchor: 'left',
+    x: 0,
+    y: 0,
   });
 
   const showMenu = (e: React.MouseEvent) => {
+    const anchor = window.innerWidth - e.pageX < 240 ? 'right' : 'left';
     e.preventDefault();
-    setMenuPosition({top: e.pageY, left: e.pageX});
+    setMenuPosition({
+      x: anchor === 'left' ? e.pageX : window.innerWidth - e.pageX,
+      y: e.pageY,
+      anchor,
+    });
 
     if (!menuVisible) {
       setMenuVisible(true);
@@ -78,8 +88,9 @@ export const ContextMenuWrapper = ({
             <div
               style={{
                 position: 'absolute',
-                top: menuPosition.top,
-                left: menuPosition.left,
+                top: menuPosition.y,
+                left: menuPosition.anchor === 'left' ? menuPosition.x : 'unset',
+                right: menuPosition.anchor === 'right' ? menuPosition.x : 'unset',
                 backgroundColor: Colors.popoverBackground(),
                 boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
                 zIndex: 10,
@@ -102,4 +113,5 @@ export const triggerContextMenu = (e: React.MouseEvent) => {
   const evt = new MouseEvent('contextmenu', e.nativeEvent);
   e.target.dispatchEvent(evt);
   e.stopPropagation();
+  e.preventDefault();
 };
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/AssetSidebarNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/AssetSidebarNode.tsx
@@ -2,7 +2,7 @@ import {Box, Colors, Icon, MiddleTruncate, UnstyledButton} from '@dagster-io/ui-
 import * as React from 'react';
 import styled from 'styled-components';
 
-import {StatusDot} from './StatusDot';
+import {StatusDot, StatusDotNode} from './StatusDot';
 import {
   FolderNodeCodeLocationType,
   FolderNodeGroupType,
@@ -11,13 +11,13 @@ import {
 } from './util';
 import {ExplorerPath} from '../../pipelines/PipelinePathUtils';
 import {AssetGroup} from '../AssetGraphExplorer';
-import {useAssetNodeMenu} from '../AssetNodeMenu';
+import {AssetNodeMenuProps, useAssetNodeMenu} from '../AssetNodeMenu';
 import {useGroupNodeContextMenu} from '../CollapsedGroupNode';
 import {ContextMenuWrapper, triggerContextMenu} from '../ContextMenuWrapper';
 import {GraphData, GraphNode} from '../Utils';
 
 type AssetSidebarNodeProps = {
-  fullAssetGraphData: GraphData;
+  fullAssetGraphData?: GraphData;
   node: GraphNode | FolderNodeNonAssetType;
   level: number;
   toggleOpen: () => void;
@@ -42,10 +42,9 @@ export const AssetSidebarNode = (props: AssetSidebarNodeProps) => {
   const showArrow = !isAssetNode;
 
   return (
-    <Box ref={elementRef} padding={{left: 8}}>
+    <Box ref={elementRef} padding={{left: 8, right: 12}}>
       <BoxWrapper level={level}>
         <ItemContainer
-          padding={{right: 12}}
           flex={{direction: 'row', alignItems: 'center'}}
           onClick={selectThisNode}
           onDoubleClick={(e) => !e.metaKey && toggleOpen()}
@@ -93,6 +92,16 @@ export const AssetSidebarNode = (props: AssetSidebarNodeProps) => {
   );
 };
 
+type AssetSidebarAssetLabelProps = {
+  fullAssetGraphData?: GraphData;
+  node: AssetNodeMenuProps['node'] & StatusDotNode;
+  selectNode: (e: React.MouseEvent<any> | React.KeyboardEvent<any>, nodeId: string) => void;
+  isLastSelected: boolean;
+  isSelected: boolean;
+  explorerPath: ExplorerPath;
+  onChangeExplorerPath: (path: ExplorerPath, mode: 'replace' | 'push') => void;
+};
+
 const AssetSidebarAssetLabel = ({
   node,
   isSelected,
@@ -101,7 +110,7 @@ const AssetSidebarAssetLabel = ({
   selectNode,
   explorerPath,
   onChangeExplorerPath,
-}: Omit<AssetSidebarNodeProps, 'node'> & {node: GraphNode}) => {
+}: AssetSidebarAssetLabelProps) => {
   const {menu, dialog} = useAssetNodeMenu({
     graphData: fullAssetGraphData,
     node,
@@ -196,6 +205,7 @@ const FocusableLabelContainer = ({
     <GrayOnHoverBox
       ref={ref}
       style={{
+        gridTemplateColumns: icon ? 'auto minmax(0, 1fr)' : 'minmax(0, 1fr)',
         ...(isSelected ? {background: Colors.backgroundBlue()} : {}),
       }}
     >
@@ -231,7 +241,7 @@ const BoxWrapper = ({level, children}: {level: number; children: React.ReactNode
 const ExpandMore = styled(UnstyledButton)`
   position: absolute;
   top: 8px;
-  right: 20px;
+  right: 8px;
   visibility: hidden;
 `;
 
@@ -240,8 +250,8 @@ const GrayOnHoverBox = styled(UnstyledButton)`
   user-select: none;
   width: 100%;
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
   flex-direction: row;
+  height: 32px;
   align-items: center;
   padding: 5px 8px;
   justify-content: space-between;
@@ -251,7 +261,7 @@ const GrayOnHoverBox = styled(UnstyledButton)`
   transition: background 100ms linear;
 `;
 
-const ItemContainer = styled(Box)`
+export const ItemContainer = styled(Box)`
   height: 32px;
   position: relative;
   cursor: pointer;

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/StatusDot.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/StatusDot.tsx
@@ -1,9 +1,15 @@
 import {StatusCaseDot} from './util';
 import {useAssetBaseData} from '../../asset-data/AssetBaseDataProvider';
-import {StatusCase, buildAssetNodeStatusContent} from '../AssetNodeStatusContent';
-import {GraphNode} from '../Utils';
+import {AssetKeyInput} from '../../graphql/types';
+import {
+  StatusCase,
+  StatusContentArgs,
+  buildAssetNodeStatusContent,
+} from '../AssetNodeStatusContent';
 
-export function StatusDot({node}: {node: Pick<GraphNode, 'assetKey' | 'definition'>}) {
+export type StatusDotNode = {assetKey: AssetKeyInput; definition: StatusContentArgs['definition']};
+
+export function StatusDot({node}: {node: StatusDotNode}) {
   const {liveData} = useAssetBaseData(node.assetKey);
 
   if (!liveData) {

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/util.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/util.tsx
@@ -2,6 +2,7 @@ import {Colors, Spinner, Tooltip} from '@dagster-io/ui-components';
 import {useMemo} from 'react';
 import styled, {keyframes} from 'styled-components';
 
+import {AssetKeyInput} from '../../graphql/types';
 import {StatusCase} from '../AssetNodeStatusContent';
 import {GraphNode} from '../Utils';
 
@@ -28,7 +29,7 @@ export function nodePathKey(node: {path: string; id: string} | {id: string}) {
   return 'path' in node ? node.path : node.id;
 }
 
-export function getDisplayName(node: GraphNode) {
+export function getDisplayName(node: {assetKey: AssetKeyInput}) {
   return node.assetKey.path[node.assetKey.path.length - 1]!;
 }
 

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetFeatureContext.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetFeatureContext.tsx
@@ -27,6 +27,8 @@ type AssetFeatureContextType = {
   useTabBuilder: (input: AssetTabConfigInput) => AssetTabConfig[];
   renderFeatureView: (input: AssetViewFeatureInput) => React.ReactNode;
   AssetColumnLinksCell: (input: {column: string | null}) => React.ReactNode;
+
+  enableAssetHealthOverviewPreview: boolean;
 };
 
 export const AssetFeatureContext = React.createContext<AssetFeatureContextType>({
@@ -35,6 +37,7 @@ export const AssetFeatureContext = React.createContext<AssetFeatureContextType>(
   AssetColumnLinksCell: () => undefined,
   LineageOptions: undefined,
   LineageGraph: undefined,
+  enableAssetHealthOverviewPreview: false,
 });
 
 const renderFeatureView = () => <span />;
@@ -47,6 +50,7 @@ export const AssetFeatureProvider = ({children}: {children: React.ReactNode}) =>
       AssetColumnLinksCell: () => undefined,
       LineageOptions: undefined,
       LineageGraph: undefined,
+      enableAssetHealthOverviewPreview: false,
     };
   }, []);