Skip to content

Commit 87884e1

Browse files
author
bengotow
committed
Self review
1 parent 7098a82 commit 87884e1

File tree

6 files changed

+141
-48
lines changed

6 files changed

+141
-48
lines changed

Diff for: ‎js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,11 @@ const AssetGraphExplorerWithData = ({
204204
});
205205
const focusGroupIdAfterLayoutRef = React.useRef('');
206206

207-
const layoutResult = useAssetLayout(
207+
const {
208+
layout,
209+
loading: layoutLoading,
210+
async,
211+
} = useAssetLayout(
208212
assetGraphData,
209213
expandedGroups,
210214
useMemo(
@@ -213,8 +217,6 @@ const AssetGraphExplorerWithData = ({
213217
),
214218
);
215219

216-
const {layout, loading: layoutLoading, async} = layoutResult;
217-
218220
const viewportEl = React.useRef<SVGViewportRef>();
219221

220222
const selectedTokens =

Diff for: ‎js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode2025.tsx

+40-14
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Box, Colors, Icon, Tag} from '@dagster-io/ui-components';
1+
import {Box, Colors, Icon, Tag, Tooltip} from '@dagster-io/ui-components';
22
import isEqual from 'lodash/isEqual';
33
import * as React from 'react';
44
import {Link} from 'react-router-dom';
@@ -72,19 +72,9 @@ export const AssetNode2025 = React.memo(
7272
)}
7373
{facets.has(AssetNodeFacet.Owner) && (
7474
<AssetNodeRow label={labelForFacet(AssetNodeFacet.Owner)}>
75-
{definition.owners.length > 0
76-
? definition.owners.map((owner, idx) =>
77-
owner.__typename === 'UserAssetOwner' ? (
78-
<UserDisplayWrapNoPadding key={idx}>
79-
<UserDisplay email={owner.email} size="very-small" />
80-
</UserDisplayWrapNoPadding>
81-
) : (
82-
<Tag icon="people" key={idx}>
83-
{owner.team}
84-
</Tag>
85-
),
86-
)
87-
: null}
75+
{definition.owners.length > 0 ? (
76+
<SingleOwnerOrTooltip owners={definition.owners} />
77+
) : null}
8878
</AssetNodeRow>
8979
)}
9080
{facets.has(AssetNodeFacet.LatestEvent) && (
@@ -204,6 +194,42 @@ const AssetNodeStatusRow = ({definition, liveData}: StatusRowProps) => {
204194
);
205195
};
206196

197+
const SingleOwnerOrTooltip = ({owners}: {owners: AssetNodeFragment['owners']}) => {
198+
if (owners.length === 1) {
199+
const owner = owners[0]!;
200+
return owner.__typename === 'UserAssetOwner' ? (
201+
<UserDisplayWrapNoPadding>
202+
<UserDisplay email={owner.email} size="very-small" />
203+
</UserDisplayWrapNoPadding>
204+
) : (
205+
<Tag icon="people">{owner.team}</Tag>
206+
);
207+
}
208+
209+
return (
210+
<Tooltip
211+
placement="top"
212+
content={
213+
<Box flex={{wrap: 'wrap', gap: 12}} style={{maxWidth: 300}}>
214+
{owners.map((o, idx) =>
215+
o.__typename === 'UserAssetOwner' ? (
216+
<UserDisplayWrapNoPadding key={idx}>
217+
<UserDisplay email={o.email} size="very-small" />
218+
</UserDisplayWrapNoPadding>
219+
) : (
220+
<Tag key={idx} icon="people">
221+
{o.team}
222+
</Tag>
223+
),
224+
)}
225+
</Box>
226+
}
227+
>
228+
{`${owners.length} owners`}
229+
</Tooltip>
230+
);
231+
};
232+
207233
const UserDisplayWrapNoPadding = styled.div`
208234
& > div > div {
209235
background: none;

Diff for: ‎js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNodeFacetSettingsButton.tsx

+56-23
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@ import {AssetNode2025} from './AssetNode2025';
66
import {
77
AssetNodeFragmentBasic,
88
LiveDataForNodeMaterializedAndStaleAndOverdue,
9+
LiveDataForNodeMaterializedWithChecks,
910
} from './__fixtures__/AssetNode.fixtures';
10-
import {tokenForAssetKey} from './Utils';
11+
import {LiveDataForNodeWithStaleData, tokenForAssetKey} from './Utils';
1112
import {
1213
AssetCheckExecutionResolvedStatus,
1314
AssetCheckSeverity,
@@ -16,42 +17,74 @@ import {
1617
buildAssetCheckExecution,
1718
buildAssetKey,
1819
buildAssetNode,
20+
buildMaterializationEvent,
1921
buildStaleCause,
22+
StaleCauseCategory,
23+
StaleStatus,
2024
} from 'shared/graphql/types';
2125
import {AssetBaseData} from 'shared/asset-data/AssetBaseDataProvider';
2226
import {AssetStaleStatusData} from 'shared/asset-data/AssetStaleStatusDataProvider';
2327
import {ASSET_NODE_WIDTH} from './layout';
2428

29+
const ExampleAssetChecks = [
30+
buildAssetCheck({
31+
name: 'check_1',
32+
executionForLatestMaterialization: buildAssetCheckExecution({
33+
runId: '1234',
34+
status: AssetCheckExecutionResolvedStatus.SUCCEEDED,
35+
evaluation: buildAssetCheckEvaluation({
36+
severity: AssetCheckSeverity.WARN,
37+
}),
38+
}),
39+
}),
40+
buildAssetCheck({
41+
name: 'check_2',
42+
executionForLatestMaterialization: buildAssetCheckExecution({
43+
runId: '1234',
44+
status: AssetCheckExecutionResolvedStatus.SUCCEEDED,
45+
evaluation: buildAssetCheckEvaluation({
46+
severity: AssetCheckSeverity.WARN,
47+
}),
48+
}),
49+
}),
50+
];
51+
2552
const ExampleAssetNode = {
2653
...AssetNodeFragmentBasic,
2754
assetKey: buildAssetKey({path: ['example_asset']}),
2855
kinds: ['sql'],
29-
assetChecks: [
30-
buildAssetCheck({
31-
name: 'check_1',
32-
executionForLatestMaterialization: buildAssetCheckExecution({
33-
runId: '1234',
34-
status: AssetCheckExecutionResolvedStatus.SUCCEEDED,
35-
evaluation: buildAssetCheckEvaluation({
36-
severity: AssetCheckSeverity.WARN,
37-
}),
38-
}),
39-
}),
40-
buildAssetCheck({
41-
name: 'check_2',
42-
executionForLatestMaterialization: buildAssetCheckExecution({
43-
runId: '1234',
44-
status: AssetCheckExecutionResolvedStatus.SUCCEEDED,
45-
evaluation: buildAssetCheckEvaluation({
46-
severity: AssetCheckSeverity.WARN,
47-
}),
48-
}),
56+
assetChecks: ExampleAssetChecks,
57+
};
58+
59+
const ExampleLiveData: LiveDataForNodeWithStaleData = {
60+
stepKey: 'asset9',
61+
unstartedRunIds: [],
62+
inProgressRunIds: [],
63+
lastMaterialization: buildMaterializationEvent({
64+
runId: 'ABCDEF',
65+
timestamp: `${Math.floor(Date.now() / 1000 - 5 * 60)}`,
66+
}),
67+
lastMaterializationRunStatus: null,
68+
lastObservation: null,
69+
runWhichFailedToMaterialize: null,
70+
staleStatus: StaleStatus.STALE,
71+
staleCauses: [
72+
buildStaleCause({
73+
key: buildAssetKey({path: ['asset1']}),
74+
reason: 'has a new code version',
75+
category: StaleCauseCategory.CODE,
76+
dependency: buildAssetKey({path: ['asset1']}),
4977
}),
5078
],
79+
freshnessInfo: {
80+
__typename: 'AssetFreshnessInfo',
81+
currentMinutesLate: 12,
82+
},
83+
partitionStats: null,
84+
opNames: [],
85+
assetChecks: ExampleAssetChecks,
5186
};
5287

53-
const ExampleLiveData = LiveDataForNodeMaterializedAndStaleAndOverdue;
54-
5588
export const AssetNodeFacetSettingsButton = ({
5689
value,
5790
onChange,

Diff for: ‎js_modules/dagster-ui/packages/ui-core/src/asset-graph/__fixtures__/AssetNode.fixtures.ts

+3
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,9 @@ export const AssetNodeFragmentBasic: AssetNodeFragment = buildAssetNode({
7171
buildUserAssetOwner({
7272
email: '[email protected]',
7373
}),
74+
buildUserAssetOwner({
75+
email: '[email protected]',
76+
}),
7477
],
7578
});
7679

Diff for: ‎js_modules/dagster-ui/packages/ui-core/src/asset-graph/__stories__/AssetNode.stories.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,12 @@ export const LiveStates = () => {
9191
}}
9292
>
9393
<div style={{position: 'absolute', width: dimensions.width, transform: 'scale(0.4)'}}>
94-
<AssetNodeMinimal definition={definitionCopy} selected={false} height={82} />
94+
<AssetNodeMinimal
95+
definition={definitionCopy}
96+
selected={false}
97+
height={82}
98+
facets={newDesign ? facets : null}
99+
/>
95100
</div>
96101
</div>
97102
</Box>

Diff for: ‎js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeLineageGraph.tsx

+31-7
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ import {useAssetLayout} from '../graph/asyncGraphLayout';
2020
import {isNodeOffscreen} from '../graph/common';
2121
import {AssetKeyInput} from '../graphql/types';
2222
import {useOpenInNewTab} from '../hooks/useOpenInNewTab';
23+
import {useFeatureFlags} from 'shared/app/Flags';
24+
import {AssetNode2025} from 'shared/asset-graph/AssetNode2025';
25+
import {AssetNodeFacetSettingsButton} from 'shared/asset-graph/AssetNodeFacetSettingsButton';
26+
import {useSavedAssetNodeFacets} from 'shared/asset-graph/AssetNodeFacets';
2327
export type AssetNodeLineageGraphProps = {
2428
assetKey: AssetKeyInput;
2529
assetGraphData: GraphData;
@@ -50,11 +54,17 @@ const AssetNodeLineageGraphInner = ({
5054

5155
const [highlighted, setHighlighted] = useState<string[] | null>(null);
5256
const [direction, setDirection] = useLayoutDirectionState();
57+
const [facets, setFacets] = useSavedAssetNodeFacets();
58+
59+
const {flagAssetNodeFacets} = useFeatureFlags();
5360

5461
const {layout, loading} = useAssetLayout(
5562
assetGraphData,
5663
allGroups,
57-
useMemo(() => ({direction}), [direction]),
64+
useMemo(
65+
() => ({direction, facets: flagAssetNodeFacets ? Array.from(facets) : false}),
66+
[direction, facets, flagAssetNodeFacets],
67+
),
5868
);
5969
const viewportEl = useRef<SVGViewportRef>();
6070
const history = useHistory();
@@ -98,7 +108,12 @@ const AssetNodeLineageGraphInner = ({
98108
maxZoom={DEFAULT_MAX_ZOOM}
99109
maxAutocenterZoom={DEFAULT_MAX_ZOOM}
100110
additionalToolbarElements={
101-
<AssetGraphSettingsButton direction={direction} setDirection={setDirection} />
111+
<>
112+
<AssetGraphSettingsButton direction={direction} setDirection={setDirection} />
113+
{flagAssetNodeFacets ? (
114+
<AssetNodeFacetSettingsButton value={facets} onChange={setFacets} />
115+
) : undefined}
116+
</>
102117
}
103118
>
104119
{({scale}, viewportRect) => (
@@ -167,20 +182,29 @@ const AssetNodeLineageGraphInner = ({
167182
>
168183
{!graphNode ? (
169184
<AssetNodeLink assetKey={{path}} />
170-
) : scale < MINIMAL_SCALE ? (
185+
) : scale < MINIMAL_SCALE || (flagAssetNodeFacets && facets.size === 0) ? (
171186
<AssetNodeContextMenuWrapper {...contextMenuProps}>
172187
<AssetNodeMinimal
188+
facets={flagAssetNodeFacets ? facets : null}
173189
definition={graphNode.definition}
174190
selected={graphNode.id === assetGraphId}
175191
height={bounds.height}
176192
/>
177193
</AssetNodeContextMenuWrapper>
178194
) : (
179195
<AssetNodeContextMenuWrapper {...contextMenuProps}>
180-
<AssetNode
181-
definition={graphNode.definition}
182-
selected={graphNode.id === assetGraphId}
183-
/>
196+
{flagAssetNodeFacets ? (
197+
<AssetNode2025
198+
facets={facets}
199+
definition={graphNode.definition}
200+
selected={graphNode.id === assetGraphId}
201+
/>
202+
) : (
203+
<AssetNode
204+
definition={graphNode.definition}
205+
selected={graphNode.id === assetGraphId}
206+
/>
207+
)}
184208
</AssetNodeContextMenuWrapper>
185209
)}
186210
</foreignObject>

0 commit comments

Comments
 (0)