[Asset-graph] Rename a few props (#25949)

## Summary & Motivation as titled
dagster-io · Nov 20, 2024 · 8d2a447 · 8d2a447 · github-actions · Nov 20, 2024
1 parent 7360e30
commit 8d2a447
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 27 deletions.
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
@@ -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
@@ -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&nbsp;
-                <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
@@ -3,20 +3,20 @@ 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;
 };
 
 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
@@ -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