[dagit] Show asset “compute kind” in the global asset graph (#7516)

dagster-io · Apr 25, 2022 · 65b8cbd · 65b8cbd
1 parent e9f0ebc
commit 65b8cbd
Show file tree

Hide file tree

Showing 12 changed files with 34 additions and 43 deletions.
diff --git a/js_modules/dagit/packages/core/src/asset-graph/AssetGraphExplorer.tsx b/js_modules/dagit/packages/core/src/asset-graph/AssetGraphExplorer.tsx
@@ -34,7 +34,6 @@ import {
 } from '../pipelines/GraphNotices';
 import {ExplorerPath} from '../pipelines/PipelinePathUtils';
 import {SidebarPipelineOrJobOverview} from '../pipelines/SidebarPipelineOrJobOverview';
-import {GraphExplorerSolidHandleFragment} from '../pipelines/types/GraphExplorerSolidHandleFragment';
 import {useDidLaunchEvent} from '../runs/RunUtils';
 import {PipelineSelector} from '../types/globalTypes';
 import {GraphQueryInput} from '../ui/GraphQueryInput';
@@ -67,11 +66,6 @@ interface Props {
   pipelineSelector?: PipelineSelector;
   filterNodes?: (assetNode: AssetGraphQuery_assetNodes) => boolean;
 
-  // Optionally pass op handles to display op metadata on the assets linked to each op.
-  // (eg: the "ipynb" tag annotation). Right now, we already have this data loaded for
-  // individual jobs, and the global asset graph quietly doesn't display these.
-  handles?: GraphExplorerSolidHandleFragment[];
-
   explorerPath: ExplorerPath;
   onChangeExplorerPath: (path: ExplorerPath, mode: 'replace' | 'push') => void;
 }
@@ -144,7 +138,6 @@ const AssetGraphExplorerWithData: React.FC<
   } & Props
 > = (props) => {
   const {
-    handles = [],
     options,
     setOptions,
     explorerPath,
@@ -309,10 +302,6 @@ const AssetGraphExplorerWithData: React.FC<
                           <AssetNode
                             definition={graphNode.definition}
                             liveData={liveDataByNode[graphNode.id]}
-                            metadata={
-                              handles.find((h) => h.handleID === graphNode.definition.opName)?.solid
-                                .definition.metadata || []
-                            }
                             selected={selectedGraphNodes.includes(graphNode)}
                           />
                         )}

diff --git a/js_modules/dagit/packages/core/src/asset-graph/AssetNode.tsx b/js_modules/dagit/packages/core/src/asset-graph/AssetNode.tsx
@@ -26,11 +26,9 @@ const MISSING_LIVE_DATA = {
 export const AssetNode: React.FC<{
   definition: AssetNodeFragment;
   liveData?: LiveDataForNode;
-  metadata: {key: string; value: string}[];
   selected: boolean;
   inAssetCatalog?: boolean;
-}> = React.memo(({definition, metadata, selected, liveData, inAssetCatalog}) => {
-  const kind = metadata.find((m) => m.key === 'kind')?.value;
+}> = React.memo(({definition, selected, liveData, inAssetCatalog}) => {
   const stepKey = definition.opName || '';
 
   const displayName = withMiddleTruncation(displayNameForAssetKey(definition.assetKey), {
@@ -138,13 +136,13 @@ export const AssetNode: React.FC<{
             )}
           </StatsRow>
         </Stats>
-        {kind && (
+        {definition.computeKind && (
           <OpTags
             minified={false}
             style={{right: -2, paddingTop: 5}}
             tags={[
               {
-                label: kind,
+                label: definition.computeKind,
                 onClick: () => {
                   window.requestAnimationFrame(() =>
                     document.dispatchEvent(new Event('show-kind-info')),
@@ -195,6 +193,7 @@ export const ASSET_NODE_FRAGMENT = gql`
     opName
     description
     partitionDefinition
+    computeKind
     assetKey {
       path
     }

diff --git a/js_modules/dagit/packages/core/src/asset-graph/SidebarAssetInfo.tsx b/js_modules/dagit/packages/core/src/asset-graph/SidebarAssetInfo.tsx
@@ -19,10 +19,8 @@ import {Description} from '../pipelines/Description';
 import {SidebarSection, SidebarTitle} from '../pipelines/SidebarComponents';
 import {pluginForMetadata} from '../plugins';
 import {buildRepoAddress} from '../workspace/buildRepoAddress';
-import {RepoAddress} from '../workspace/types';
 
 import {LiveDataForNode, displayNameForAssetKey} from './Utils';
-import {SidebarAssetFragment} from './types/SidebarAssetFragment';
 import {SidebarAssetQuery, SidebarAssetQueryVariables} from './types/SidebarAssetQuery';
 
 export const SidebarAssetInfo: React.FC<{
@@ -50,6 +48,9 @@ export const SidebarAssetInfo: React.FC<{
 
   const repoAddress = buildRepoAddress(asset.repository.name, asset.repository.location.name);
   const {assetMetadata, assetType} = metadataForAssetNode(asset);
+  const hasAssetMetadata = assetType || assetMetadata.length > 0;
+
+  const OpMetadataPlugin = asset.op?.metadata && pluginForMetadata(asset.op.metadata);
 
   return (
     <>
@@ -68,8 +69,15 @@ export const SidebarAssetInfo: React.FC<{
 
       <div style={{borderBottom: `2px solid ${Colors.Gray300}`}} />
 
-      {(asset.description || !(asset.description || assetType || assetMetadata)) && (
-        <DescriptionSidebarSection asset={asset} repoAddress={repoAddress} />
+      {(asset.description || OpMetadataPlugin?.SidebarComponent || !hasAssetMetadata) && (
+        <SidebarSection title="Description">
+          <Box padding={{vertical: 16, horizontal: 24}}>
+            <Description description={asset.description || 'No description provided.'} />
+          </Box>
+          {asset.op && OpMetadataPlugin?.SidebarComponent && (
+            <OpMetadataPlugin.SidebarComponent definition={asset.op} repoAddress={repoAddress} />
+          )}
+        </SidebarSection>
       )}
 
       {assetMetadata.length > 0 && (
@@ -92,24 +100,6 @@ export const SidebarAssetInfo: React.FC<{
   );
 };
 
-const DescriptionSidebarSection: React.FC<{
-  asset: SidebarAssetFragment;
-  repoAddress: RepoAddress;
-}> = ({asset, repoAddress}) => {
-  const Plugin = asset.op?.metadata && pluginForMetadata(asset.op.metadata);
-
-  return (
-    <SidebarSection title="Description">
-      <Box padding={{vertical: 16, horizontal: 24}}>
-        <Description description={asset.description || 'No description provided.'} />
-      </Box>
-      {asset.op && Plugin && Plugin.SidebarComponent && (
-        <Plugin.SidebarComponent definition={asset.op} repoAddress={repoAddress} />
-      )}
-    </SidebarSection>
-  );
-};
-
 const TypeSidebarSection: React.FC<{
   assetType: DagsterTypeFragment;
 }> = ({assetType}) => {

diff --git a/js_modules/dagit/packages/core/src/asset-graph/types/AssetGraphQuery.ts b/js_modules/dagit/packages/core/src/asset-graph/types/AssetGraphQuery.ts
diff --git a/js_modules/dagit/packages/core/src/asset-graph/types/AssetNodeFragment.ts b/js_modules/dagit/packages/core/src/asset-graph/types/AssetNodeFragment.ts
diff --git a/js_modules/dagit/packages/core/src/assets/AssetNodeList.tsx b/js_modules/dagit/packages/core/src/assets/AssetNodeList.tsx
@@ -38,7 +38,6 @@ export const AssetNodeList: React.FC<{
             {asset.jobNames.length ? (
               <AssetNode
                 definition={asset}
-                metadata={[]}
                 inAssetCatalog
                 selected={false}
                 liveData={liveDataByNode[toGraphId(asset.assetKey)]}

diff --git a/js_modules/dagit/packages/core/src/assets/types/AssetNodeDefinitionFragment.ts b/js_modules/dagit/packages/core/src/assets/types/AssetNodeDefinitionFragment.ts
diff --git a/js_modules/dagit/packages/core/src/assets/types/AssetQuery.ts b/js_modules/dagit/packages/core/src/assets/types/AssetQuery.ts
diff --git a/js_modules/dagit/packages/core/src/graphql/schema.graphql b/js_modules/dagit/packages/core/src/graphql/schema.graphql
diff --git a/js_modules/dagit/packages/core/src/pipelines/PipelineExplorerRoot.tsx b/js_modules/dagit/packages/core/src/pipelines/PipelineExplorerRoot.tsx
@@ -89,7 +89,6 @@ export const PipelineExplorerContainer: React.FC<{
               options={options}
               setOptions={setOptions}
               pipelineSelector={pipelineSelector}
-              handles={displayedHandles}
               explorerPath={explorerPath}
               onChangeExplorerPath={onChangeExplorerPath}
             />

diff --git a/python_modules/dagster-graphql/dagster_graphql/schema/asset_graph.py b/python_modules/dagster-graphql/dagster_graphql/schema/asset_graph.py
@@ -84,7 +84,7 @@ class GrapheneAssetNode(graphene.ObjectType):
         beforeTimestampMillis=graphene.String(),
         limit=graphene.Int(),
     )
-    computeKind: graphene.String
+    computeKind = graphene.String()
     dependedBy = non_null_list(GrapheneAssetDependency)
     dependedByKeys = non_null_list(GrapheneAssetKey)
     dependencies = non_null_list(GrapheneAssetDependency)

diff --git a/python_modules/dagster-test/dagster_test/graph_job_op_toys/partitioned_assets.py b/python_modules/dagster-test/dagster_test/graph_job_op_toys/partitioned_assets.py
@@ -12,12 +12,18 @@
 daily_partitions_def = DailyPartitionsDefinition(start_date="2020-01-01")
 
 
-@asset(metadata={"owner": "alice@example.com"}, partitions_def=daily_partitions_def)
+@asset(
+    metadata={"owner": "alice@example.com"},
+    compute_kind="ipynb",
+    partitions_def=daily_partitions_def,
+)
 def upstream_daily_partitioned_asset():
     pass
 
 
-@asset(metadata={"owner": "alice@example.com"}, partitions_def=daily_partitions_def)
+@asset(
+    metadata={"owner": "alice@example.com"}, compute_kind="sql", partitions_def=daily_partitions_def
+)
 def downstream_daily_partitioned_asset(upstream_daily_partitioned_asset):
     assert upstream_daily_partitioned_asset is None