Skip to content

Commit

Permalink
take storage_kind label off the asset node (#23371)
Browse files Browse the repository at this point in the history 
## Summary & Motivation

This turned out controversial, because of the alternative of introducing
a new `kinds` attribute. So walking this back.

## How I Tested These Changes
  • Loading branch information
@sryza
sryza authored Aug 5, 2024
1 parent 497d7fb commit ce26af9
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 87 deletions.
44 changes: 19 additions & 25 deletions js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ import {AssetFilterState} from '../assets/useAssetDefinitionFilterState.oss';
import {DEFAULT_MAX_ZOOM, SVGViewport} from '../graph/SVGViewport';
import {useAssetLayout} from '../graph/asyncGraphLayout';
import {closestNodeInDirection, isNodeOffscreen} from '../graph/common';
import {DefinitionTag} from '../graphql/types';
import {useQueryAndLocalStoragePersistedState} from '../hooks/useQueryAndLocalStoragePersistedState';
import {PageLoadTrace} from '../performance';
import {
Expand Down Expand Up @@ -105,26 +104,25 @@ export const AssetGraphExplorer = (props: Props) => {

const {explorerPath, onChangeExplorerPath} = props;

const {button, filterBar, computeKindTagsFilter, storageKindTagsFilter} =
useAssetGraphExplorerFilters({
nodes: React.useMemo(
() => (fullAssetGraphData ? Object.values(fullAssetGraphData.nodes) : []),
[fullAssetGraphData],
),
loading: fetchResult.loading,
isGlobalGraph: !!props.isGlobalGraph,
assetFilterState: props.assetFilterState,
explorerPath: explorerPath.opsQuery,
clearExplorerPath: React.useCallback(() => {
onChangeExplorerPath(
{
...explorerPath,
opsQuery: '',
},
'push',
);
}, [explorerPath, onChangeExplorerPath]),
});
const {button, filterBar, computeKindTagsFilter} = useAssetGraphExplorerFilters({
nodes: React.useMemo(
() => (fullAssetGraphData ? Object.values(fullAssetGraphData.nodes) : []),
[fullAssetGraphData],
),
loading: fetchResult.loading,
isGlobalGraph: !!props.isGlobalGraph,
assetFilterState: props.assetFilterState,
explorerPath: explorerPath.opsQuery,
clearExplorerPath: React.useCallback(() => {
onChangeExplorerPath(
{
...explorerPath,
opsQuery: '',
},
'push',
);
}, [explorerPath, onChangeExplorerPath]),
});

return (
<Loading allowStaleData queryResult={fetchResult}>
Expand Down Expand Up @@ -154,7 +152,6 @@ export const AssetGraphExplorer = (props: Props) => {
filterBar={filterBar}
filterButton={button}
computeKindTagsFilter={computeKindTagsFilter}
storageKindTagsFilter={storageKindTagsFilter}
{...props}
/>
);
Expand All @@ -174,7 +171,6 @@ type WithDataProps = Props & {
isGlobalGraph?: boolean;
trace?: PageLoadTrace;
computeKindTagsFilter?: StaticSetFilter<string>;
storageKindTagsFilter?: StaticSetFilter<DefinitionTag>;
};

const AssetGraphExplorerWithData = ({
Expand All @@ -192,7 +188,6 @@ const AssetGraphExplorerWithData = ({
filterBar,
assetFilterState,
isGlobalGraph = false,
storageKindTagsFilter,
computeKindTagsFilter,
trace,
}: WithDataProps) => {
Expand Down Expand Up @@ -634,7 +629,6 @@ const AssetGraphExplorerWithData = ({
definition={graphNode.definition}
selected={selectedGraphNodes.includes(graphNode)}
computeKindTagsFilter={computeKindTagsFilter}
storageKindTagsFilter={storageKindTagsFilter}
/>
</AssetNodeContextMenuWrapper>
)}
Expand Down
107 changes: 45 additions & 62 deletions js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,81 +18,64 @@ import {ChangedReasonsTag, MinimalNodeChangedDot} from '../assets/ChangedReasons
import {MinimalNodeStaleDot, StaleReasonsTag, isAssetStale} from '../assets/Stale';
import {AssetChecksStatusSummary} from '../assets/asset-checks/AssetChecksStatusSummary';
import {assetDetailsPathForKey} from '../assets/assetDetailsPathForKey';
import {
AssetComputeKindTag,
AssetStorageKindTag,
isCanonicalStorageKindTag,
} from '../graph/KindTags';
import {DefinitionTag} from '../graphql/types';
import {AssetComputeKindTag} from '../graph/KindTags';
import {StaticSetFilter} from '../ui/BaseFilters/useStaticSetFilter';
import {markdownToPlaintext} from '../ui/markdownToPlaintext';

interface Props {
definition: AssetNodeFragment;
selected: boolean;
computeKindTagsFilter?: StaticSetFilter<string>;
storageKindTagsFilter?: StaticSetFilter<DefinitionTag>;
}

export const AssetNode = React.memo(
({definition, selected, computeKindTagsFilter, storageKindTagsFilter}: Props) => {
const isSource = definition.isSource;
export const AssetNode = React.memo(({definition, selected, computeKindTagsFilter}: Props) => {
const isSource = definition.isSource;

const {liveData} = useAssetLiveData(definition.assetKey);
const storageKindTag = definition.tags?.find(isCanonicalStorageKindTag);
return (
<AssetInsetForHoverEffect>
<Box
flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'center'}}
style={{minHeight: 24}}
>
<StaleReasonsTag liveData={liveData} assetKey={definition.assetKey} />
<ChangedReasonsTag
changedReasons={definition.changedReasons}
assetKey={definition.assetKey}
/>
</Box>
<AssetNodeContainer $selected={selected}>
<AssetNodeBox $selected={selected} $isSource={isSource}>
<AssetNameRow definition={definition} />
<Box style={{padding: '6px 8px'}} flex={{direction: 'column', gap: 4}} border="top">
{definition.description ? (
<AssetDescription $color={Colors.textDefault()}>
{markdownToPlaintext(definition.description).split('\n')[0]}
</AssetDescription>
) : (
<AssetDescription $color={Colors.textLight()}>No description</AssetDescription>
)}
{definition.isPartitioned && !definition.isSource && (
<PartitionCountTags definition={definition} liveData={liveData} />
)}
</Box>

<AssetNodeStatusRow definition={definition} liveData={liveData} />
{(liveData?.assetChecks || []).length > 0 && (
<AssetNodeChecksRow definition={definition} liveData={liveData} />
const {liveData} = useAssetLiveData(definition.assetKey);
return (
<AssetInsetForHoverEffect>
<Box
flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'center'}}
style={{minHeight: 24}}
>
<StaleReasonsTag liveData={liveData} assetKey={definition.assetKey} />
<ChangedReasonsTag
changedReasons={definition.changedReasons}
assetKey={definition.assetKey}
/>
</Box>
<AssetNodeContainer $selected={selected}>
<AssetNodeBox $selected={selected} $isSource={isSource}>
<AssetNameRow definition={definition} />
<Box style={{padding: '6px 8px'}} flex={{direction: 'column', gap: 4}} border="top">
{definition.description ? (
<AssetDescription $color={Colors.textDefault()}>
{markdownToPlaintext(definition.description).split('\n')[0]}
</AssetDescription>
) : (
<AssetDescription $color={Colors.textLight()}>No description</AssetDescription>
)}
</AssetNodeBox>
<Box flex={{direction: 'row-reverse', gap: 8}}>
{storageKindTag && (
<AssetStorageKindTag
storageKind={storageKindTag.value}
style={{position: 'relative', paddingTop: 7, margin: 0}}
currentPageFilter={storageKindTagsFilter}
/>
{definition.isPartitioned && !definition.isSource && (
<PartitionCountTags definition={definition} liveData={liveData} />
)}
<AssetComputeKindTag
definition={definition}
style={{position: 'relative', paddingTop: 7, margin: 0}}
currentPageFilter={computeKindTagsFilter}
/>
</Box>
</AssetNodeContainer>
</AssetInsetForHoverEffect>
);
},
isEqual,
);

<AssetNodeStatusRow definition={definition} liveData={liveData} />
{(liveData?.assetChecks || []).length > 0 && (
<AssetNodeChecksRow definition={definition} liveData={liveData} />
)}
</AssetNodeBox>
<Box flex={{direction: 'row-reverse', gap: 8}}>
<AssetComputeKindTag
definition={definition}
style={{position: 'relative', paddingTop: 7, margin: 0}}
currentPageFilter={computeKindTagsFilter}
/>
</Box>
</AssetNodeContainer>
</AssetInsetForHoverEffect>
);
}, isEqual);

export const AssetNameRow = ({definition}: {definition: AssetNodeFragment}) => {
const displayName = definition.assetKey.path[definition.assetKey.path.length - 1]!;
Expand Down

1 comment on commit ce26af9

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for dagit-core-storybook ready!

✅ Preview
https://dagit-core-storybook-69uasid7y-elementl.vercel.app

Built with commit ce26af9.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.