Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ui] add sorting order to show more assets and asset checks #26474

Merged
merged 5 commits into from
Dec 17, 2024
Merged

[ui] add sorting order to show more assets and asset checks #26474

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
63ffa61
add sorting order to show more assets and asset checks
dliu27 Dec 13, 2024
45b8134
address comments
dliu27 Dec 16, 2024
3435b6e
address comments 2
dliu27 Dec 16, 2024
a3f3ed4
address comments
dliu27 Dec 17, 2024
5403f3c
fix
dliu27 Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 39 additions & 7 deletions js_modules/dagster-ui/packages/ui-core/src/runs/AssetTagCollections.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,14 @@ import {TagActionsPopover} from '../ui/TagActions';
import {VirtualizedItemListForDialog} from '../ui/VirtualizedItemListForDialog';
import {numberFormatter} from '../ui/formatters';

const sortItemAssetKey = (a: AssetKey, b: AssetKey) => {
return displayNameForAssetKey(a).localeCompare(displayNameForAssetKey(b));
};

const sortItemAssetCheck = (a: Check, b: Check) => {
return labelForAssetCheck(a).localeCompare(labelForAssetCheck(b));
};

const renderItemAssetKey = (assetKey: AssetKey) => (
<Link to={assetDetailsPathForKey(assetKey)} style={{display: 'block', width: '100%'}}>
<MiddleTruncate text={displayNameForAssetKey(assetKey)} />
Expand Down Expand Up @@ -149,10 +157,20 @@ export function useAdjustChildVisibilityToFill(moreLabelFn: (count: number) => s

export const AssetKeyTagCollection = React.memo((props: AssetKeyTagCollectionProps) => {
const {assetKeys, useTags, maxRows, dialogTitle = 'Assets in run'} = props;
const {setShowMore, dialog} = useShowMoreDialog(dialogTitle, assetKeys, renderItemAssetKey);

const count = assetKeys?.length ?? 0;
const rendered = maxRows ? 10 : count === 1 ? 1 : 0;

const {sortedAssetKeys, slicedSortedAssetKeys} = React.useMemo(() => {
const sortedAssetKeys = assetKeys?.slice().sort(sortItemAssetKey) ?? null;
return {
sortedAssetKeys,
slicedSortedAssetKeys: sortedAssetKeys?.slice(0, rendered) ?? [],
dliu27 marked this conversation as resolved.
Show resolved Hide resolved
};
}, [assetKeys, rendered]);

const {setShowMore, dialog} = useShowMoreDialog(dialogTitle, sortedAssetKeys, renderItemAssetKey);

const moreLabelFn = React.useCallback(
(displayed: number) =>
displayed === 0
Expand All @@ -165,7 +183,7 @@ export const AssetKeyTagCollection = React.memo((props: AssetKeyTagCollectionPro

const {containerRef, moreLabelRef} = useAdjustChildVisibilityToFill(moreLabelFn);

if (!assetKeys || !assetKeys.length) {
if (!sortedAssetKeys || !sortedAssetKeys.length) {
dliu27 marked this conversation as resolved.
Show resolved Hide resolved
dliu27 marked this conversation as resolved.
Show resolved Hide resolved
return null;
}

Expand All @@ -180,7 +198,7 @@ export const AssetKeyTagCollection = React.memo((props: AssetKeyTagCollectionPro
overflow: 'hidden',
}}
>
{assetKeys.slice(0, rendered).map((assetKey) => (
{slicedSortedAssetKeys.map((assetKey) => (
// Outer span ensures the popover target is in the right place if the
// parent is a flexbox.
<TagActionsPopover
Expand Down Expand Up @@ -226,7 +244,7 @@ export const AssetKeyTagCollection = React.memo((props: AssetKeyTagCollectionPro
},
{
label: 'View lineage',
to: globalAssetGraphPathForAssetsAndDescendants(assetKeys),
to: globalAssetGraphPathForAssetsAndDescendants(sortedAssetKeys),
},
]}
>
Expand Down Expand Up @@ -263,10 +281,24 @@ interface AssetCheckTagCollectionProps {

export const AssetCheckTagCollection = React.memo((props: AssetCheckTagCollectionProps) => {
const {assetChecks, maxRows, useTags, dialogTitle = 'Asset checks in run'} = props;
const {setShowMore, dialog} = useShowMoreDialog(dialogTitle, assetChecks, renderItemAssetCheck);

const count = assetChecks?.length ?? 0;
const rendered = maxRows ? 10 : count === 1 ? 1 : 0;

const {sortedAssetChecks, slicedSortedAssetChecks} = React.useMemo(() => {
const sortedAssetChecks = assetChecks?.slice().sort(sortItemAssetCheck) ?? null;
return {
sortedAssetChecks,
slicedSortedAssetChecks: sortedAssetChecks?.slice(0, rendered) ?? [],
};
}, [assetChecks, rendered]);

const {setShowMore, dialog} = useShowMoreDialog(
dialogTitle,
sortedAssetChecks,
renderItemAssetCheck,
);

const moreLabelFn = React.useCallback(
(displayed: number) =>
displayed === 0
Expand All @@ -279,7 +311,7 @@ export const AssetCheckTagCollection = React.memo((props: AssetCheckTagCollectio

const {containerRef, moreLabelRef} = useAdjustChildVisibilityToFill(moreLabelFn);

if (!assetChecks || !assetChecks.length) {
if (!sortedAssetChecks || !sortedAssetChecks.length) {
return null;
}

Expand All @@ -294,7 +326,7 @@ export const AssetCheckTagCollection = React.memo((props: AssetCheckTagCollectio
overflow: 'hidden',
}}
>
{assetChecks.slice(0, rendered).map((check) => (
{slicedSortedAssetChecks.map((check) => (
<TagActionsPopover
key={`${check.name}-${tokenForAssetKey(check.assetKey)}`}
data={{key: '', value: ''}}
Expand Down
Loading