diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx index 973688fcc27a2..eca01fb130fbd 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx @@ -58,6 +58,7 @@ import {useAssetLayout} from '../graph/asyncGraphLayout'; import {closestNodeInDirection, isNodeOffscreen} from '../graph/common'; import {AssetGroupSelector} from '../graphql/types'; import {useQueryAndLocalStoragePersistedState} from '../hooks/useQueryAndLocalStoragePersistedState'; +import {useUpdatingRef} from '../hooks/useUpdatingRef'; import { GraphExplorerOptions, OptionsOverlay, @@ -107,6 +108,8 @@ export const AssetGraphExplorer = (props: Props) => { const {explorerPath, onChangeExplorerPath} = props; + const explorerPathRef = useUpdatingRef(explorerPath); + const {button, filterBar, groupsFilter, kindFilter, filterFn, filteredAssetsLoading} = useAssetGraphExplorerFilters({ nodes: React.useMemo( @@ -115,16 +118,19 @@ export const AssetGraphExplorer = (props: Props) => { ), loading: fetchResult.loading, viewType: props.viewType, - explorerPath: explorerPath.opsQuery, - clearExplorerPath: React.useCallback(() => { - onChangeExplorerPath( - { - ...explorerPath, - opsQuery: '', - }, - 'push', - ); - }, [explorerPath, onChangeExplorerPath]), + assetSelection: explorerPath.opsQuery, + setAssetSelection: React.useCallback( + (assetSelection: string) => { + onChangeExplorerPath( + { + ...explorerPathRef.current, + opsQuery: assetSelection, + }, + 'push', + ); + }, + [explorerPathRef, onChangeExplorerPath], + ), }); useLayoutEffect(() => { diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphFilterBar.oss.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphFilterBar.oss.tsx index f4f1cb0ddbcac..f78adb34dfba5 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphFilterBar.oss.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphFilterBar.oss.tsx @@ -1,19 +1,23 @@ import {Box} from '@dagster-io/ui-components'; +import {useCallback} from 'react'; import {FilterTag, FilterTagHighlightedText} from '../ui/BaseFilters/useFilter'; export const AssetGraphFilterBar = ({ activeFiltersJsx, right, - explorerPath, - clearExplorerPath, + assetSelection, + setAssetSelection, }: { activeFiltersJsx: JSX.Element[]; right?: JSX.Element; - clearExplorerPath: () => void; - explorerPath: string; + assetSelection: string; + setAssetSelection: (selection: string) => void; }) => { - if (!activeFiltersJsx.length && !explorerPath) { + const clearAssetSelection = useCallback(() => { + setAssetSelection(''); + }, [setAssetSelection]); + if (!activeFiltersJsx.length && !assetSelection) { return null; } return ( @@ -23,17 +27,17 @@ export const AssetGraphFilterBar = ({ > <Box flex={{gap: 12, alignItems: 'center', direction: 'row', grow: 1}}> {activeFiltersJsx} - {explorerPath ? ( + {assetSelection ? ( <FilterTag label={ <Box flex={{direction: 'row', alignItems: 'center'}}> Asset selection is - <FilterTagHighlightedText tooltipText={explorerPath}> - {explorerPath} + <FilterTagHighlightedText tooltipText={assetSelection}> + {assetSelection} </FilterTagHighlightedText> </Box> } - onRemove={clearExplorerPath} + onRemove={clearAssetSelection} /> ) : null} </Box> diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/useAssetGraphExplorerFilters.oss.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/useAssetGraphExplorerFilters.oss.tsx index 0a83eacca9ab2..ba13f0ad744c1 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/useAssetGraphExplorerFilters.oss.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/useAssetGraphExplorerFilters.oss.tsx @@ -3,10 +3,10 @@ import {useAssetCatalogFiltering} from 'shared/assets/useAssetCatalogFiltering.o import {AssetGraphViewType, GraphNode} from './Utils'; -type Props = { +export type Props = { nodes: GraphNode[]; - clearExplorerPath: () => void; - explorerPath: string; + setAssetSelection: (selection: string) => void; + assetSelection: string; viewType: AssetGraphViewType; loading: boolean; }; @@ -14,9 +14,9 @@ type Props = { export function useAssetGraphExplorerFilters({ nodes, viewType, - explorerPath, + assetSelection, loading, - clearExplorerPath, + setAssetSelection, }: Props) { const ret = useAssetCatalogFiltering({ assets: nodes, @@ -30,8 +30,8 @@ export function useAssetGraphExplorerFilters({ filterBar: ( <AssetGraphFilterBar activeFiltersJsx={ret.activeFiltersJsx} - explorerPath={explorerPath} - clearExplorerPath={clearExplorerPath} + assetSelection={assetSelection} + setAssetSelection={setAssetSelection} /> ), }; diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/BaseFilters/useFilter.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/BaseFilters/useFilter.tsx index 582a658dfaf66..61d86b47f81e3 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ui/BaseFilters/useFilter.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/BaseFilters/useFilter.tsx @@ -4,6 +4,7 @@ import {useMemo} from 'react'; import styled from 'styled-components'; import {TruncatedTextWithFullTextOnHover} from '../../nav/getLeftNavItemsForOption'; +import {testId} from '../../testing/testId'; export type FilterObject<T = any> = { isActive: boolean; @@ -53,7 +54,12 @@ export const FilterTag = ({ icon={iconName ? <Icon name={iconName} color={textColor} /> : undefined} rightIcon={ onRemove ? ( - <div onClick={onRemove} style={{cursor: 'pointer'}} tabIndex={0}> + <div + onClick={onRemove} + style={{cursor: 'pointer'}} + tabIndex={0} + data-testid={testId('filter-tag-remove')} + > <Icon name="close" color={textColor} /> </div> ) : null