[ui] Fall back to definition-time metadata for overview columns, impr…

…ove icons (dagster-io#19817)

## Summary & Motivation

- Now with better icons!
- Now using the definition-time metadata if no metadata for columns is
available in the latest materialization

<img width="1190" alt="image"
src="https://github.com/dagster-io/dagster/assets/1037212/6f593256-9fb6-4b58-b6e6-ac46ec1015f4">


## How I Tested These Changes

Tested manually with a variety of assets

Co-authored-by: bengotow <[email protected]>

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

@@ -44,6 +44,10 @@ import collapse_arrows from '../icon-svgs/collapse_arrows.svg';
 import concept_book from '../icon-svgs/concept-book.svg';
 import console_icon from '../icon-svgs/console.svg';
 import content_copy from '../icon-svgs/content_copy.svg';
+import datatype_array from '../icon-svgs/datatype_array.svg';
+import datatype_bool from '../icon-svgs/datatype_bool.svg';
+import datatype_number from '../icon-svgs/datatype_number.svg';
+import datatype_string from '../icon-svgs/datatype_string.svg';
 import date from '../icon-svgs/date.svg';
 import deleteSVG from '../icon-svgs/delete.svg';
 import done from '../icon-svgs/done.svg';
@@ -176,6 +180,10 @@ export const Icons = {
   backfill,
   badge,
   date,
+  datatype_array,
+  datatype_bool,
+  datatype_string,
+  datatype_number,
   expectation,
   execute,
   materialization,

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

@@ -95,15 +95,19 @@ export const AssetNodeOverview = ({
   const visibleJobNames = assetNode.jobNames.filter((jobName) => !isHiddenAssetGroupJob(jobName));
 
   const assetNodeLoadTimestamp = location ? location.updatedTimestamp * 1000 : undefined;
-  const latestPartitionEvents = useLatestPartitionEvents(
+
+  const {materialization, observation} = useLatestPartitionEvents(
     assetNode,
     assetNodeLoadTimestamp,
     liveData,
   );
 
-  const tableSchema = [...(latestPartitionEvents.materialization?.metadataEntries || [])].find(
-    isCanonicalTableSchemaEntry,
-  );
+  let tableSchema = materialization?.metadataEntries.find(isCanonicalTableSchemaEntry);
+  let tableSchemaLoadTimestamp = materialization ? Number(materialization.timestamp) : undefined;
+  if (!tableSchema) {
+    tableSchema = assetNode?.metadataEntries.find(isCanonicalTableSchemaEntry);
+    tableSchemaLoadTimestamp = assetNodeLoadTimestamp;
+  }
 
   return (
     <Box
@@ -143,7 +147,7 @@ export const AssetNodeOverview = ({
           {tableSchema ? (
             <TableSchema
               schema={tableSchema.schema}
-              schemaLoadTimestamp={latestPartitionEvents.materialization?.timestamp}
+              schemaLoadTimestamp={tableSchemaLoadTimestamp}
             />
           ) : (
             <Caption color={Colors.textLight()}>No table schema</Caption>
@@ -155,16 +159,10 @@ export const AssetNodeOverview = ({
             showTimestamps
             showFilter
             hideTableSchema
-            observations={
-              latestPartitionEvents.observation && latestPartitionEvents.materialization
-                ? [latestPartitionEvents.observation]
-                : []
-            }
+            observations={observation && materialization ? [observation] : []}
             definitionMetadata={assetMetadata}
             definitionLoadTimestamp={assetNodeLoadTimestamp}
-            event={
-              latestPartitionEvents.materialization || latestPartitionEvents.observation || null
-            }
+            event={materialization || observation || null}
           />
         </LargeCollapsibleSection>
         <LargeCollapsibleSection

js_modules/dagster-ui/packages/ui-core/src/metadata/TableSchema.tsx

@@ -1,5 +1,15 @@
 import {gql} from '@apollo/client';
-import {Box, Caption, Colors, Mono, Tag, TextInput, Tooltip} from '@dagster-io/ui-components';
+import {
+  Box,
+  Caption,
+  Colors,
+  Icon,
+  IconName,
+  Mono,
+  Tag,
+  TextInput,
+  Tooltip,
+} from '@dagster-io/ui-components';
 import {Spacing} from '@dagster-io/ui-components/src/components/types';
 import {useState} from 'react';
 
@@ -14,7 +24,7 @@ const MAX_CONSTRAINT_TAG_CHARS = 30;
 
 interface ITableSchemaProps {
   schema: ITableSchema;
-  schemaLoadTimestamp?: string | undefined;
+  schemaLoadTimestamp?: number | undefined;
   itemHorizontalPadding?: Spacing;
 }
 
@@ -36,7 +46,7 @@ export const TableSchema = ({
 
   return (
     <Box padding={{horizontal: itemHorizontalPadding}}>
-      <Box padding={{bottom: 12}} flex={{justifyContent: 'space-between'}}>
+      <Box padding={{bottom: 12}} flex={{alignItems: 'center', justifyContent: 'space-between'}}>
         <TextInput
           value={filter}
           style={{minWidth: 250}}
@@ -45,9 +55,9 @@ export const TableSchema = ({
           placeholder="Filter columns"
         />
         {schemaLoadTimestamp && (
-          <Box>
-            Updated <Timestamp timestamp={{ms: Number(schemaLoadTimestamp)}} />
-          </Box>
+          <Caption color={Colors.textLighter()}>
+            Updated <Timestamp timestamp={{ms: schemaLoadTimestamp}} />
+          </Caption>
         )}
       </Box>
       {multiColumnConstraints.length > 0 && (
@@ -75,7 +85,7 @@ export const TableSchema = ({
                 <Mono>{column.name}</Mono>
               </td>
               <td>
-                <TypeTag type={column.type} />
+                <TypeTag type={column.type} icon={iconForType(column.type)} />
                 {!column.constraints.nullable && NonNullableTag}
                 {column.constraints.unique && UniqueTag}
                 {column.constraints.other.map((constraint, i) => (
@@ -98,7 +108,34 @@ export const TableSchema = ({
   );
 };
 
-const TypeTag = ({type}: {type: string}) => <Tag intent="none">{type}</Tag>;
+const iconForType = (type: string): IconName | null => {
+  const lower = type.toLowerCase();
+  if (lower.includes('bool')) {
+    return 'datatype_bool';
+  }
+  if (['char', 'str', 'text', 'uuid'].some((term) => lower.includes(term))) {
+    return 'datatype_string';
+  }
+  if (lower.includes('arr') || lower.includes('[]')) {
+    return 'datatype_array';
+  }
+  if (['int', 'float', 'double', 'num', 'decimal'].some((term) => lower.includes(term))) {
+    return 'datatype_number';
+  }
+  if (lower.includes('time') || lower.includes('date')) {
+    return 'schedule';
+  }
+  return null;
+};
+
+const TypeTag = ({type, icon}: {type: string; icon: IconName | null}) => (
+  <Tag intent="none">
+    <Box flex={{gap: 4}}>
+      {icon ? <Icon name={icon} /> : <span style={{width: 16}} />}
+      {type}
+    </Box>
+  </Tag>
+);
 
 const NonNullableTag = <Tag intent="primary">non-nullable</Tag>;