forked from dagster-io/dagster
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Selection Input] Refactor auto-complete system. (dagster-io#27389)
## Summary & Motivation
The primary goal of this refactor is to decouple the auto-complete
suggestion UI from the autocomplete visitor logic.
Before:
- Visitor hard coded the types of the suggestions
- UI rendering was tightly coupled to those types
- The types were too restrictive, they required all of the values to be
strings but that doesn't work well for tags which have a key and a
value. Encoding the tags as a string (eg: `"key"="value"`) created
ambiguities, where we could not tell if the string was a tag of `{key:
"key", value: "value"}` or a tag of `{key: "key"="value", value:
undefined}`.
After:
- Rendering is encapsulated in the SelectionAutoCompleteProvider which
is also responsible for making auto-complete suggestions and can handle
both string and tag object types.
## How I Tested These Changes
Existing jest test in SelectionAutocomplete.ts. + Manual testing in
cloud and OSS.- Loading branch information
Showing
17 changed files
with
1,301 additions
and
1,395 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
23 changes: 0 additions & 23 deletions
23
...gster-ui/packages/ui-core/src/asset-selection/input/useAssetSelectionAutoComplete.oss.tsx
This file was deleted.
Oops, something went wrong.
39 changes: 39 additions & 0 deletions
39
.../packages/ui-core/src/asset-selection/input/useAssetSelectionAutoCompleteProvider.oss.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,39 @@ | ||
| import {useMemo} from 'react'; | ||
|
|
||
| import {attributeToIcon, getAttributesMap} from './util'; | ||
| import {AssetGraphQueryItem} from '../../asset-graph/useAssetGraphData'; | ||
| import {createSelectionAutoComplete} from '../../selection/SelectionAutoComplete'; | ||
| import { | ||
| SelectionAutoCompleteProvider, | ||
| createProvider, | ||
| } from '../../selection/SelectionAutoCompleteProvider'; | ||
|
|
||
| export function useAssetSelectionAutoCompleteProvider( | ||
| assets: AssetGraphQueryItem[], | ||
| ): Pick<SelectionAutoCompleteProvider, 'useAutoComplete'> { | ||
| const attributesMap = useMemo(() => getAttributesMap(assets), [assets]); | ||
|
|
||
| const baseProvider = useMemo( | ||
| () => | ||
| createProvider({ | ||
| attributesMap, | ||
| primaryAttributeKey: 'key', | ||
| attributeToIcon, | ||
| }), | ||
| [attributesMap], | ||
| ); | ||
| const selectionHint = useMemo(() => createSelectionAutoComplete(baseProvider), [baseProvider]); | ||
|
|
||
| return { | ||
| useAutoComplete: ({line, cursorIndex}) => { | ||
| const autoCompleteResults = useMemo( | ||
| () => selectionHint(line, cursorIndex), | ||
| [line, cursorIndex], | ||
| ); | ||
| return { | ||
| autoCompleteResults, | ||
| loading: false, | ||
| }; | ||
| }, | ||
| }; | ||
| } |
2 changes: 1 addition & 1 deletion
2
js_modules/dagster-ui/packages/ui-core/src/asset-selection/input/useAssetSelectionInput.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
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
57 changes: 57 additions & 0 deletions
57
...ules/dagster-ui/packages/ui-core/src/gantt/useGanttChartSelectionAutoCompleteProvider.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,57 @@ | ||
| import {useMemo} from 'react'; | ||
|
|
||
| import {RunGraphQueryItem} from './toGraphQueryItems'; | ||
| import {NO_STATE} from '../run-selection/AntlrRunSelectionVisitor'; | ||
| import {createSelectionAutoComplete} from '../selection/SelectionAutoComplete'; | ||
| import { | ||
| SelectionAutoCompleteProvider, | ||
| createProvider, | ||
| } from '../selection/SelectionAutoCompleteProvider'; | ||
|
|
||
| export function useGanttChartSelectionAutoCompleteProvider( | ||
| items: RunGraphQueryItem[], | ||
| ): Pick<SelectionAutoCompleteProvider, 'useAutoComplete'> { | ||
| const attributesMap = useMemo(() => { | ||
| const statuses = new Set<string>(); | ||
| const names = new Set<string>(); | ||
|
|
||
| items.forEach((item) => { | ||
| if (item.metadata?.state) { | ||
| statuses.add(item.metadata.state); | ||
| } else { | ||
| statuses.add(NO_STATE); | ||
| } | ||
| names.add(item.name); | ||
| }); | ||
| return {name: Array.from(names), status: Array.from(statuses)}; | ||
| }, [items]); | ||
|
|
||
| const baseProvider = useMemo( | ||
| () => | ||
| createProvider({ | ||
| attributesMap, | ||
| primaryAttributeKey: 'name', | ||
| attributeToIcon: iconMap, | ||
| }), | ||
| [attributesMap], | ||
| ); | ||
| const selectionHint = useMemo(() => createSelectionAutoComplete(baseProvider), [baseProvider]); | ||
|
|
||
| return { | ||
| useAutoComplete: ({line, cursorIndex}) => { | ||
| const autoCompleteResults = useMemo( | ||
| () => selectionHint(line, cursorIndex), | ||
| [line, cursorIndex], | ||
| ); | ||
| return { | ||
| autoCompleteResults, | ||
| loading: false, | ||
| }; | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| export const iconMap = { | ||
| name: 'magnify_glass', | ||
| status: 'status', | ||
| } as const; |
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
Oops, something went wrong.