[ui] Experimental asset Overview page (#19739)

## Summary & Motivation

- New asset overview page is hidden behind the existing "new AMP page"
feature flag, which has been renamed in the UI.
- Figma:
https://www.figma.com/file/wQHGZ2cjfpna2P2OaM4aTs/aset-catalog-ui?type=design&node-id=208-45869&mode=design&t=rUdPOq932g3jaHWh-0
- Linear:
https://linear.app/dagster-labs/issue/FE-174/implement-new-asset-overview-designs

## TODOs / Further work:

- The top header is unchanged
- In the sidebar, code location does not use a tag

## How I Tested These Changes

Tested manually with a number of different assets in different states

![image](https://github.com/dagster-io/dagster/assets/1037212/15462fe0-bb27-464c-8232-453bebeab1ae)

---------

Co-authored-by: bengotow <[email protected]>
(cherry picked from commit b3a1f2c)

js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx

@@ -132,6 +132,7 @@ import splitscreen from '../icon-svgs/splitscreen.svg';
 import star from '../icon-svgs/star.svg';
 import star_outline from '../icon-svgs/star_outline.svg';
 import status from '../icon-svgs/status.svg';
+import sticky_note from '../icon-svgs/sticky_note.svg';
 import subtract from '../icon-svgs/subtract.svg';
 import sync_problem from '../icon-svgs/sync_problem.svg';
 import table_view from '../icon-svgs/table_view.svg';
@@ -146,6 +147,7 @@ import unfold_more from '../icon-svgs/unfold_more.svg';
 import vertical_align_bottom from '../icon-svgs/vertical_align_bottom.svg';
 import vertical_align_center from '../icon-svgs/vertical_align_center.svg';
 import vertical_align_top from '../icon-svgs/vertical_align_top.svg';
+import view_column from '../icon-svgs/view_column.svg';
 import view_list from '../icon-svgs/view_list.svg';
 import visibility from '../icon-svgs/visibility.svg';
 import visibility_off from '../icon-svgs/visibility_off.svg';
@@ -310,6 +312,7 @@ export const Icons = {
   star,
   star_outline,
   status,
+  sticky_note,
   sync_problem,
   table_view,
   timer,
@@ -319,6 +322,7 @@ export const Icons = {
   unfold_less,
   unfold_more,
   view_list,
+  view_column,
   visibility,
   visibility_off,
   warning,

js_modules/dagster-ui/packages/ui-components/src/components/Tag.tsx

@@ -7,7 +7,9 @@ import {Colors} from './Color';
 import {Icon, IconName} from './Icon';
 import {Spinner} from './Spinner';
 
-const intentToFillColor = (intent: React.ComponentProps<typeof BlueprintTag>['intent']) => {
+export type TagIntent = React.ComponentProps<typeof BlueprintTag>['intent'];
+
+const intentToFillColor = (intent: TagIntent) => {
   switch (intent) {
     case 'primary':
       return Colors.backgroundBlue();
@@ -23,7 +25,7 @@ const intentToFillColor = (intent: React.ComponentProps<typeof BlueprintTag>['in
   }
 };
 
-const intentToTextColor = (intent: React.ComponentProps<typeof BlueprintTag>['intent']) => {
+const intentToTextColor = (intent: TagIntent) => {
   switch (intent) {
     case 'primary':
       return Colors.textBlue();
@@ -39,7 +41,7 @@ const intentToTextColor = (intent: React.ComponentProps<typeof BlueprintTag>['in
   }
 };
 
-const intentToIconColor = (intent: React.ComponentProps<typeof BlueprintTag>['intent']) => {
+const intentToIconColor = (intent: TagIntent) => {
   switch (intent) {
     case 'primary':
       return Colors.accentBlue();

js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.tsx

@@ -21,7 +21,7 @@ export const getVisibleFeatureFlagRows = () => [
     flagType: FeatureFlag.flagDebugConsoleLogging,
   },
   {
-    key: 'Use new asset auto-materialize history page',
+    key: 'Use new asset overview and automation pages',
     flagType: FeatureFlag.flagUseNewAutomationPage,
   },
 ];

js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx

@@ -1,6 +1,5 @@
 import {gql} from '@apollo/client';
-import {Box, Colors, FontFamily, Icon, Spinner, Tooltip} from '@dagster-io/ui-components';
-import countBy from 'lodash/countBy';
+import {Box, Colors, FontFamily, Icon, Tooltip} from '@dagster-io/ui-components';
 import isEqual from 'lodash/isEqual';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
@@ -17,9 +16,9 @@ import {withMiddleTruncation} from '../app/Util';
 import {useAssetLiveData} from '../asset-data/AssetLiveDataProvider';
 import {PartitionCountTags} from '../assets/AssetNodePartitionCounts';
 import {StaleReasonsTags} from '../assets/Stale';
+import {AssetChecksStatusSummary} from '../assets/asset-checks/AssetChecksStatusSummary';
 import {assetDetailsPathForKey} from '../assets/assetDetailsPathForKey';
 import {AssetComputeKindTag} from '../graph/OpTags';
-import {AssetCheckExecutionResolvedStatus, AssetCheckSeverity} from '../graphql/types';
 import {ExplorerPath} from '../pipelines/PipelinePathUtils';
 import {markdownToPlaintext} from '../ui/markdownToPlaintext';
 
@@ -127,42 +126,6 @@ const AssetNodeStatusRow = ({definition, liveData}: StatusRowProps) => {
   );
 };
 
-type AssetCheckIconType =
-  | Exclude<
-      AssetCheckExecutionResolvedStatus,
-      AssetCheckExecutionResolvedStatus.FAILED | AssetCheckExecutionResolvedStatus.EXECUTION_FAILED
-    >
-  | 'NOT_EVALUATED'
-  | 'WARN'
-  | 'ERROR';
-
-const AssetCheckIconsOrdered: {type: AssetCheckIconType; content: React.ReactNode}[] = [
-  {
-    type: AssetCheckExecutionResolvedStatus.IN_PROGRESS,
-    content: <Spinner purpose="caption-text" />,
-  },
-  {
-    type: 'NOT_EVALUATED',
-    content: <Icon name="dot" color={Colors.accentGray()} />,
-  },
-  {
-    type: 'ERROR',
-    content: <Icon name="cancel" color={Colors.accentRed()} />,
-  },
-  {
-    type: 'WARN',
-    content: <Icon name="warning_outline" color={Colors.accentYellow()} />,
-  },
-  {
-    type: AssetCheckExecutionResolvedStatus.SKIPPED,
-    content: <Icon name="dot" color={Colors.accentGray()} />,
-  },
-  {
-    type: AssetCheckExecutionResolvedStatus.SUCCEEDED,
-    content: <Icon name="check_circle" color={Colors.accentGreen()} />,
-  },
-];
-
 export const AssetNodeContextMenuWrapper = React.memo(
   ({
     children,
@@ -208,21 +171,6 @@ const AssetNodeChecksRow = ({
     return <span />;
   }
 
-  const byIconType = countBy(liveData.assetChecks, (c) => {
-    const status = c.executionForLatestMaterialization?.status;
-    const value: AssetCheckIconType =
-      status === undefined
-        ? 'NOT_EVALUATED'
-        : status === AssetCheckExecutionResolvedStatus.FAILED
-        ? c.executionForLatestMaterialization?.evaluation?.severity === AssetCheckSeverity.WARN
-          ? 'WARN'
-          : 'ERROR'
-        : status === AssetCheckExecutionResolvedStatus.EXECUTION_FAILED
-        ? 'ERROR'
-        : status;
-    return value;
-  });
-
   return (
     <AssetNodeRowBox
       padding={{horizontal: 8}}
@@ -235,14 +183,7 @@ const AssetNodeChecksRow = ({
         to={assetDetailsPathForKey(definition.assetKey, {view: 'checks'})}
         onClick={(e) => e.stopPropagation()}
       >
-        <Box flex={{gap: 6, alignItems: 'center'}}>
-          {AssetCheckIconsOrdered.filter((a) => byIconType[a.type]).map((icon) => (
-            <Box flex={{gap: 2, alignItems: 'center'}} key={icon.type}>
-              {icon.content}
-              {byIconType[icon.type]}
-            </Box>
-          ))}
-        </Box>
+        <AssetChecksStatusSummary liveData={liveData} rendering="dag" />
       </Link>
     </AssetNodeRowBox>
   );

js_modules/dagster-ui/packages/ui-core/src/asset-graph/SidebarAssetInfo.tsx

@@ -106,7 +106,11 @@ export const SidebarAssetInfo = ({graphNode}: {graphNode: GraphNode}) => {
 
       <div style={{borderBottom: `2px solid ${Colors.borderDefault()}`}} />
 
-      {nodeDependsOnSelf(graphNode) && <DependsOnSelfBanner />}
+      {nodeDependsOnSelf(graphNode) && (
+        <Box padding={{vertical: 16, left: 24, right: 12}} border="bottom">
+          <DependsOnSelfBanner />
+        </Box>
+      )}
 
       {asset.opVersion && (
         <SidebarSection title="Code Version">

js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Sidebar.tsx

@@ -139,7 +139,7 @@ export const AssetGraphExplorerSidebar = React.memo(
       > = {};
 
       let groupsCount = 0;
-      Object.entries(graphData.nodes).forEach(([id, node]) => {
+      Object.values(graphData.nodes).forEach((node) => {
         const locationName = node.definition.repository.location.name;
         const repositoryName = node.definition.repository.name;
         const groupName = node.definition.groupName || 'default';

js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/StatusDot.tsx

@@ -5,6 +5,7 @@ import {GraphNode} from '../Utils';
 
 export function StatusDot({node}: {node: Pick<GraphNode, 'assetKey' | 'definition'>}) {
   const {liveData} = useAssetLiveData(node.assetKey);
+
   if (!liveData) {
     return <StatusCaseDot statusCase={StatusCase.LOADING} />;
   }

js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventDetail.tsx

@@ -115,7 +115,7 @@ export const AssetEventDetail = ({
 
       <Box padding={{top: 24}} flex={{direction: 'column', gap: 8}}>
         <Subheading>Metadata</Subheading>
-        <AssetEventMetadataEntriesTable event={event} />
+        <AssetEventMetadataEntriesTable event={event} showDescriptions />
       </Box>
 
       {event.__typename === 'MaterializationEvent' && (
@@ -167,7 +167,7 @@ export const AssetEventDetailEmpty = () => (
 
     <Box padding={{top: 24}} flex={{direction: 'column', gap: 8}}>
       <Subheading>Metadata</Subheading>
-      <AssetEventMetadataEntriesTable event={null} />
+      <AssetEventMetadataEntriesTable event={null} showDescriptions />
     </Box>
   </Box>
 );