-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
## Summary & Motivation https://www.loom.com/share/647d76108782411f8ef1c9b06f55eae5 This adds a sidebar to the left of the asset graph that makes it easier to navigate the asset graph without needing to scroll around. This is useful for cases where the asset graph is very large and it's hard to see the ancestors / descendants of a particular asset. It would be nice if we could figure out how to combine this with the existing asset graph sidebar that shows up on the right side somehow so that there's only one sidebar. I put minimal effort into the design for now since this is just a prototype I built to demonstrate one solution to the problem of navigating large asset graphs. Looking for input as to whether we should pursue this direction or not.
- Loading branch information
Showing
17 changed files
with
1,030 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
114 changes: 114 additions & 0 deletions
114
js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorerFilters.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import {Box, Icon} from '@dagster-io/ui-components'; | ||
| import React from 'react'; | ||
|
|
||
| import {AssetGroupSelector} from '../graphql/types'; | ||
| import {TruncatedTextWithFullTextOnHover} from '../nav/getLeftNavItemsForOption'; | ||
| import {useFilters} from '../ui/Filters'; | ||
| import {FilterObject} from '../ui/Filters/useFilter'; | ||
| import {useStaticSetFilter} from '../ui/Filters/useStaticSetFilter'; | ||
| import {DagsterRepoOption, WorkspaceContext} from '../workspace/WorkspaceContext'; | ||
| import {buildRepoAddress, buildRepoPathForHuman} from '../workspace/buildRepoAddress'; | ||
|
|
||
| export const AssetGraphExplorerFilters = React.memo( | ||
| ({ | ||
| assetGroups, | ||
| visibleAssetGroups, | ||
| setGroupFilters, | ||
| }: | ||
| | { | ||
| assetGroups: AssetGroupSelector[]; | ||
| visibleAssetGroups: AssetGroupSelector[]; | ||
| setGroupFilters: (groups: AssetGroupSelector[]) => void; | ||
| } | ||
| | {assetGroups?: null; setGroupFilters?: null; visibleAssetGroups?: null}) => { | ||
| const {allRepos, visibleRepos, toggleVisible} = React.useContext(WorkspaceContext); | ||
|
|
||
| const visibleReposSet = React.useMemo(() => new Set(visibleRepos), [visibleRepos]); | ||
|
|
||
| const reposFilter = useStaticSetFilter<DagsterRepoOption>({ | ||
| name: 'Repository', | ||
| icon: 'repo', | ||
| allValues: allRepos.map((repo) => ({ | ||
| key: repo.repository.id, | ||
| value: repo, | ||
| match: [buildRepoPathForHuman(repo.repository.name, repo.repositoryLocation.name)], | ||
| })), | ||
| menuWidth: '300px', | ||
| renderLabel: ({value}) => ( | ||
| <Box flex={{direction: 'row', gap: 4, alignItems: 'center'}}> | ||
| <Icon name="repo" /> | ||
| <TruncatedTextWithFullTextOnHover | ||
| text={buildRepoPathForHuman(value.repository.name, value.repositoryLocation.name)} | ||
| /> | ||
| </Box> | ||
| ), | ||
| getStringValue: (value) => | ||
| buildRepoPathForHuman(value.repository.name, value.repositoryLocation.name), | ||
| initialState: visibleReposSet, | ||
| onStateChanged: (values) => { | ||
| allRepos.forEach((repo) => { | ||
| if (visibleReposSet.has(repo) !== values.has(repo)) { | ||
| toggleVisible([buildRepoAddress(repo.repository.name, repo.repositoryLocation.name)]); | ||
| } | ||
| }); | ||
| }, | ||
| }); | ||
|
|
||
| const groupsFilter = useStaticSetFilter<AssetGroupSelector>({ | ||
| name: 'Asset Groups', | ||
| icon: 'asset_group', | ||
| allValues: (assetGroups || []).map((group) => ({ | ||
| key: group.groupName, | ||
| value: | ||
| visibleAssetGroups?.find( | ||
| (visibleGroup) => | ||
| visibleGroup.groupName === group.groupName && | ||
| visibleGroup.repositoryName === group.repositoryName && | ||
| visibleGroup.repositoryLocationName === group.repositoryLocationName, | ||
| ) ?? group, | ||
| match: [group.groupName], | ||
| })), | ||
| menuWidth: '300px', | ||
| renderLabel: ({value}) => ( | ||
| <Box flex={{direction: 'row', gap: 4, alignItems: 'center'}}> | ||
| <Icon name="repo" /> | ||
| <TruncatedTextWithFullTextOnHover | ||
| tooltipText={ | ||
| value.groupName + | ||
| ' - ' + | ||
| buildRepoPathForHuman(value.repositoryName, value.repositoryLocationName) | ||
| } | ||
| text={ | ||
| <> | ||
| {value.groupName} | ||
| <span style={{opacity: 0.5, paddingLeft: '4px'}}> | ||
| {buildRepoPathForHuman(value.repositoryName, value.repositoryLocationName)} | ||
| </span> | ||
| </> | ||
| } | ||
| /> | ||
| </Box> | ||
| ), | ||
| getStringValue: (group) => group.groupName, | ||
| initialState: React.useMemo(() => new Set(visibleAssetGroups ?? []), [visibleAssetGroups]), | ||
| onStateChanged: (values) => { | ||
| if (setGroupFilters) { | ||
| setGroupFilters(Array.from(values)); | ||
| } | ||
| }, | ||
| }); | ||
|
|
||
| const filters: FilterObject[] = []; | ||
| if (allRepos.length > 1) { | ||
| filters.push(reposFilter); | ||
| } | ||
| if (assetGroups) { | ||
| filters.push(groupsFilter); | ||
| } | ||
| const {button} = useFilters({filters}); | ||
| if (allRepos.length <= 1 && !assetGroups) { | ||
| return null; | ||
| } | ||
| return button; | ||
| }, | ||
| ); |
Oops, something went wrong.
27e5b66There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Deploy preview for dagit-storybook ready!
✅ Preview
https://dagit-storybook-d9p84zpkd-elementl.vercel.app
Built with commit 27e5b66.
This pull request is being automatically deployed with vercel-action
27e5b66There was a problem hiding this comment.
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-fpf148naf-elementl.vercel.app
Built with commit 27e5b66.
This pull request is being automatically deployed with vercel-action