[dagit] Update the linking between asset groups + jobs (#8377)

Co-authored-by: bengotow <bgotow@elementl.com>

js_modules/dagit/packages/core/src/asset-graph/AssetGraphExplorer.tsx

@@ -3,7 +3,6 @@ import pickBy from 'lodash/pickBy';
 import uniq from 'lodash/uniq';
 import without from 'lodash/without';
 import React from 'react';
-import {useHistory} from 'react-router-dom';
 import styled from 'styled-components/macro';
 
 import {GraphQueryItem} from '../app/GraphQueryImpl';
@@ -54,7 +53,7 @@ import {
 import {AssetGraphLayout} from './layout';
 import {AssetGraphQuery_assetNodes} from './types/AssetGraphQuery';
 import {AssetGraphFetchScope, useAssetGraphData} from './useAssetGraphData';
-import {useFindJobForAsset} from './useFindJobForAsset';
+import {AssetLocation, useFindAssetLocation} from './useFindAssetLocation';
 import {useLiveDataForAssetKeys} from './useLiveDataForAssetKeys';
 
 type AssetNode = AssetGraphQuery_assetNodes;
@@ -67,6 +66,7 @@ interface Props {
 
   explorerPath: ExplorerPath;
   onChangeExplorerPath: (path: ExplorerPath, mode: 'replace' | 'push') => void;
+  onNavigateToForeignNode: (node: AssetLocation) => void;
 }
 
 export const EXPERIMENTAL_MINI_SCALE = 0.5;
@@ -137,6 +137,7 @@ export const AssetGraphExplorerWithData: React.FC<
     setOptions,
     explorerPath,
     onChangeExplorerPath,
+    onNavigateToForeignNode,
     liveDataRefreshState,
     liveDataByNode,
     assetGraphData,
@@ -145,8 +146,7 @@ export const AssetGraphExplorerWithData: React.FC<
     fetchOptions,
   } = props;
 
-  const history = useHistory();
-  const findJobForAsset = useFindJobForAsset();
+  const findAssetLocation = useFindAssetLocation();
 
   const [highlighted, setHighlighted] = React.useState<string | null>(null);
 
@@ -171,33 +171,10 @@ export const AssetGraphExplorerWithData: React.FC<
       const token = tokenForAssetKey(assetKey);
       const nodeIsInDisplayedGraph = node?.definition;
 
-      let clicked: {opNames: string[]; jobName: string | null} = {opNames: [], jobName: null};
-
-      if (nodeIsInDisplayedGraph) {
-        // The asset's defintion was provided in our job.assetNodes query. Show it in the current graph.
-        clicked = {opNames: node.definition.opNames, jobName: explorerPath.pipelineName};
-      } else {
+      if (!nodeIsInDisplayedGraph) {
         // The asset's definition was not provided in our query for job.assetNodes. It's either
         // in another job or asset group, or is a source asset not defined in any repository.
-        clicked = await findJobForAsset(assetKey);
-      }
-
-      if (!clicked.jobName || !clicked.opNames.length) {
-        // This op has no definition in any loaded repository (source asset).
-        // The best we can do is show the asset page. This will still be mostly empty,
-        // but there can be a description.
-        history.push(`/instance/assets/${assetKey.path.join('/')}?view=definition`);
-        return;
-      }
-
-      // This asset is in different job (and we're in the job explorer),
-      // go to the other job.
-      if (clicked.jobName !== explorerPath.pipelineName) {
-        onChangeExplorerPath(
-          {...explorerPath, opNames: [token], opsQuery: '', pipelineName: clicked.jobName!},
-          'replace',
-        );
-        return;
+        return onNavigateToForeignNode(await findAssetLocation(assetKey));
       }
 
       // This asset is in a job and we can stay in the job graph explorer!
@@ -237,8 +214,8 @@ export const AssetGraphExplorerWithData: React.FC<
     [
       explorerPath,
       onChangeExplorerPath,
-      findJobForAsset,
-      history,
+      onNavigateToForeignNode,
+      findAssetLocation,
       lastSelectedNode,
       assetGraphData,
       layout,

js_modules/dagit/packages/core/src/asset-graph/SidebarAssetInfo.tsx

@@ -12,6 +12,7 @@ import {
   metadataForAssetNode,
 } from '../assets/AssetMetadata';
 import {PartitionHealthSummary, usePartitionHealthData} from '../assets/PartitionHealthSummary';
+import {assetDetailsPathForKey} from '../assets/assetDetailsPathForKey';
 import {AssetKey} from '../assets/types';
 import {DagsterTypeSummary} from '../dagstertype/DagsterType';
 import {DagsterTypeFragment} from '../dagstertype/types/DagsterTypeFragment';
@@ -145,7 +146,7 @@ const Header: React.FC<{assetKey: AssetKey; opName?: string}> = ({assetKey, opNa
           </Box>
         ) : undefined}
       </SidebarTitle>
-      <AssetCatalogLink to={`/instance/assets/${assetKey.path.join('/')}`}>
+      <AssetCatalogLink to={assetDetailsPathForKey(assetKey)}>
         {'View in Asset Catalog '}
         <Icon name="open_in_new" color={Colors.Link} />
       </AssetCatalogLink>

js_modules/dagit/packages/core/src/asset-graph/useFindJobForAsset.tsx → js_modules/dagit/packages/core/src/asset-graph/useFindAssetLocation.tsx

@@ -1,31 +1,47 @@
 import {gql, useApolloClient} from '@apollo/client';
 import React from 'react';
 
+import {AssetKey} from '../assets/types';
 import {AssetKeyInput} from '../types/globalTypes';
+import {buildRepoAddress} from '../workspace/buildRepoAddress';
+import {RepoAddress} from '../workspace/types';
 
 import {isHiddenAssetGroupJob} from './Utils';
 import {
   AssetForNavigationQuery,
   AssetForNavigationQueryVariables,
 } from './types/AssetForNavigationQuery';
 
-export function useFindJobForAsset() {
+export interface AssetLocation {
+  assetKey: AssetKey;
+  opNames: string[];
+  jobName: string | null;
+  groupName: string | null;
+  repoAddress: RepoAddress | null;
+}
+
+export function useFindAssetLocation() {
   const apollo = useApolloClient();
 
   return React.useCallback(
-    async (key: AssetKeyInput): Promise<{opNames: string[]; jobName: string | null}> => {
+    async (key: AssetKeyInput): Promise<AssetLocation> => {
       const {data} = await apollo.query<AssetForNavigationQuery, AssetForNavigationQueryVariables>({
         query: ASSET_FOR_NAVIGATION_QUERY,
         variables: {key},
       });
       if (data?.assetOrError.__typename === 'Asset' && data?.assetOrError.definition) {
         const def = data.assetOrError.definition;
         return {
+          assetKey: key,
           opNames: def.opNames,
           jobName: def.jobNames.find((jobName) => !isHiddenAssetGroupJob(jobName)) || null,
+          groupName: def.groupName,
+          repoAddress: def.repository
+            ? buildRepoAddress(def.repository.name, def.repository.location.name)
+            : null,
         };
       }
-      return {opNames: [], jobName: null};
+      return {assetKey: key, opNames: [], jobName: null, groupName: null, repoAddress: null};
     },
     [apollo],
   );
@@ -41,6 +57,15 @@ const ASSET_FOR_NAVIGATION_QUERY = gql`
           id
           opNames
           jobNames
+          groupName
+          repository {
+            id
+            name
+            location {
+              id
+              name
+            }
+          }
         }
       }
     }

js_modules/dagit/packages/core/src/assets/AssetGroupRoot.tsx

@@ -1,17 +1,23 @@
-import {Box, Heading, Page, PageHeader, Tabs, Tag} from '@dagster-io/ui';
+import {Page, PageHeader, Heading, Box, Tag, Tabs} from '@dagster-io/ui';
 import * as React from 'react';
 import {useHistory, useParams} from 'react-router-dom';
 
 import {AssetGraphExplorer} from '../asset-graph/AssetGraphExplorer';
+import {AssetLocation} from '../asset-graph/useFindAssetLocation';
 import {useDocumentTitle} from '../hooks/useDocumentTitle';
 import {RepositoryLink} from '../nav/RepositoryLink';
-import {explorerPathFromString, explorerPathToString} from '../pipelines/PipelinePathUtils';
+import {
+  ExplorerPath,
+  explorerPathFromString,
+  explorerPathToString,
+} from '../pipelines/PipelinePathUtils';
 import {TabLink} from '../ui/TabLink';
 import {ReloadAllButton} from '../workspace/ReloadAllButton';
 import {RepoAddress} from '../workspace/types';
 import {workspacePathFromAddress} from '../workspace/workspacePath';
 
 import {AssetsCatalogTable} from './AssetsCatalogTable';
+import {assetDetailsPathForKey} from './assetDetailsPathForKey';
 
 interface AssetGroupRootParams {
   groupName: string;
@@ -38,6 +44,31 @@ export const AssetGroupRoot: React.FC<{repoAddress: RepoAddress; tab: 'lineage'
     [groupName, repoAddress],
   );
 
+  const onChangeExplorerPath = React.useCallback(
+    (path: ExplorerPath, mode: 'push' | 'replace') => {
+      history[mode](`${groupPath}/${explorerPathToString(path)}`);
+    },
+    [groupPath, history],
+  );
+
+  const onNavigateToForeignNode = React.useCallback(
+    (node: AssetLocation) => {
+      if (node.groupName && node.repoAddress) {
+        history.replace(
+          workspacePathFromAddress(
+            node.repoAddress,
+            `/asset-groups/${node.groupName}/lineage/${node.assetKey.path
+              .map(encodeURIComponent)
+              .join('/')}`,
+          ),
+        );
+      } else {
+        history.push(assetDetailsPathForKey(node.assetKey, {view: 'definition'}));
+      }
+    },
+    [history],
+  );
+
   return (
     <Page style={{display: 'flex', flexDirection: 'column', paddingBottom: 0}}>
       <PageHeader
@@ -66,9 +97,8 @@ export const AssetGroupRoot: React.FC<{repoAddress: RepoAddress; tab: 'lineage'
           fetchOptions={{groupSelector}}
           options={{preferAssetRendering: true, explodeComposites: true}}
           explorerPath={explorerPathFromString(path || 'lineage/')}
-          onChangeExplorerPath={(path, mode) => {
-            history[mode](`${groupPath}/${explorerPathToString(path)}`);
-          }}
+          onChangeExplorerPath={onChangeExplorerPath}
+          onNavigateToForeignNode={onNavigateToForeignNode}
         />
       ) : (
         <AssetsCatalogTable

js_modules/dagit/packages/core/src/assets/AssetLineageElements.tsx

@@ -1,11 +1,11 @@
 import {gql} from '@apollo/client';
 import {Box, ButtonLink, Tooltip} from '@dagster-io/ui';
-import qs from 'qs';
 import React from 'react';
 import {Link} from 'react-router-dom';
 
 import {Timestamp} from '../app/time/Timestamp';
 
+import {assetDetailsPathForKey} from './assetDetailsPathForKey';
 import {AssetLineageFragment} from './types/AssetLineageFragment';
 
 const AssetLineageInfoElement: React.FC<{
@@ -16,9 +16,7 @@ const AssetLineageInfoElement: React.FC<{
   const partition_list_str = lineage_info.partitions
     .map((partition) => `"${partition}"`)
     .join(', ');
-  const to = `/instance/assets/${lineage_info.assetKey.path
-    .map(encodeURIComponent)
-    .join('/')}?${qs.stringify({asOf: timestamp})}`;
+  const to = assetDetailsPathForKey(lineage_info.assetKey, {asOf: timestamp});
 
   return (
     <Box margin={{bottom: 4}}>

js_modules/dagit/packages/core/src/assets/AssetLink.tsx

@@ -2,13 +2,15 @@ import {Box, Colors, Icon} from '@dagster-io/ui';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 
+import {assetDetailsPathForKey} from './assetDetailsPathForKey';
+
 export const AssetLink: React.FC<{
   path: string[];
   icon?: 'asset' | 'asset_non_sda' | 'folder';
   url?: string;
   isGroup?: boolean;
 }> = ({path, icon, url, isGroup}) => {
-  const linkUrl = url ? url : `/instance/assets/${path.map(encodeURIComponent).join('/')}`;
+  const linkUrl = url ? url : assetDetailsPathForKey({path});
 
   return (
     <Box flex={{direction: 'row', alignItems: 'center', display: 'inline-flex'}}>

js_modules/dagit/packages/core/src/assets/AssetNodeLineage.tsx

@@ -60,6 +60,7 @@ export const AssetNodeLineage: React.FC<{
         assetNode={assetNode}
         liveDataByNode={liveDataByNode}
         assetGraphData={assetGraphData}
+        params={params}
       />
     </>
   );

js_modules/dagit/packages/core/src/assets/AssetNodeLineageGraph.tsx

@@ -12,6 +12,8 @@ import {SVGViewport} from '../graph/SVGViewport';
 import {useAssetLayout} from '../graph/asyncGraphLayout';
 import {getJSONForKey} from '../hooks/useStateWithStorage';
 
+import {AssetViewParams} from './AssetView';
+import {assetDetailsPathForKey} from './assetDetailsPathForKey';
 import {AssetKey} from './types';
 import {AssetNodeDefinitionFragment} from './types/AssetNodeDefinitionFragment';
 
@@ -23,7 +25,8 @@ export const AssetNodeLineageGraph: React.FC<{
   assetNode: AssetNodeDefinitionFragment;
   assetGraphData: GraphData;
   liveDataByNode: LiveData;
-}> = ({assetNode, assetGraphData, liveDataByNode}) => {
+  params: AssetViewParams;
+}> = ({assetNode, assetGraphData, liveDataByNode, params}) => {
   const assetGraphId = toGraphId(assetNode.assetKey);
 
   const [highlighted, setHighlighted] = React.useState<string | null>(null);
@@ -33,7 +36,7 @@ export const AssetNodeLineageGraph: React.FC<{
   const history = useHistory();
 
   const onClickAsset = (key: AssetKey) => {
-    history.push(`/instance/assets/${key.path.join('/')}?view=lineage`);
+    history.push(assetDetailsPathForKey(key, {...params, lineageScope: 'neighbors'}));
   };
 
   React.useEffect(() => {

js_modules/dagit/packages/core/src/assets/AssetNodeList.tsx

@@ -7,6 +7,8 @@ import {AssetNode} from '../asset-graph/AssetNode';
 import {LiveData, toGraphId} from '../asset-graph/Utils';
 import {AssetGraphQuery_assetNodes} from '../asset-graph/types/AssetGraphQuery';
 
+import {assetDetailsPathForKey} from './assetDetailsPathForKey';
+
 export const AssetNodeList: React.FC<{
   items: AssetGraphQuery_assetNodes[] | null;
   liveDataByNode: LiveData;
@@ -28,7 +30,7 @@ export const AssetNodeList: React.FC<{
           key={asset.id}
           onClick={(e) => {
             e.stopPropagation();
-            history.push(`/instance/assets/${asset.assetKey.path.join('/')}?view=definition`);
+            history.push(assetDetailsPathForKey(asset.assetKey, {view: 'definition'}));
           }}
         >
           <AssetNode