[2/k][ui] Replace compute kind filters with kind filters

js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx

@@ -101,25 +101,24 @@ export const AssetGraphExplorer = (props: Props) => {
 
   const {explorerPath, onChangeExplorerPath} = props;
 
-  const {button, filterBar, groupsFilter, computeKindTagsFilter, filterFn} =
-    useAssetGraphExplorerFilters({
-      nodes: React.useMemo(
-        () => (fullAssetGraphData ? Object.values(fullAssetGraphData.nodes) : []),
-        [fullAssetGraphData],
-      ),
-      loading: fetchResult.loading,
-      isGlobalGraph: !!props.isGlobalGraph,
-      explorerPath: explorerPath.opsQuery,
-      clearExplorerPath: React.useCallback(() => {
-        onChangeExplorerPath(
-          {
-            ...explorerPath,
-            opsQuery: '',
-          },
-          'push',
-        );
-      }, [explorerPath, onChangeExplorerPath]),
-    });
+  const {button, filterBar, groupsFilter, kindFilter, filterFn} = useAssetGraphExplorerFilters({
+    nodes: React.useMemo(
+      () => (fullAssetGraphData ? Object.values(fullAssetGraphData.nodes) : []),
+      [fullAssetGraphData],
+    ),
+    loading: fetchResult.loading,
+    isGlobalGraph: !!props.isGlobalGraph,
+    explorerPath: explorerPath.opsQuery,
+    clearExplorerPath: React.useCallback(() => {
+      onChangeExplorerPath(
+        {
+          ...explorerPath,
+          opsQuery: '',
+        },
+        'push',
+      );
+    }, [explorerPath, onChangeExplorerPath]),
+  });
 
   useEffect(() => {
     setHideNodesMatching(() => (node: AssetNodeForGraphQueryFragment) => !filterFn(node));
@@ -152,7 +151,7 @@ export const AssetGraphExplorer = (props: Props) => {
             graphQueryItems={graphQueryItems}
             filterBar={filterBar}
             filterButton={button}
-            computeKindTagsFilter={computeKindTagsFilter}
+            kindFilter={kindFilter}
             groupsFilter={groupsFilter}
             {...props}
           />
@@ -172,7 +171,7 @@ type WithDataProps = Props & {
   filterBar: React.ReactNode;
   isGlobalGraph?: boolean;
 
-  computeKindTagsFilter: StaticSetFilter<string>;
+  kindFilter: StaticSetFilter<string>;
   groupsFilter: StaticSetFilter<AssetGroupSelector>;
 };
 
@@ -190,7 +189,7 @@ const AssetGraphExplorerWithData = ({
   filterButton,
   filterBar,
   isGlobalGraph = false,
-  computeKindTagsFilter,
+  kindFilter,
   groupsFilter,
 }: WithDataProps) => {
   const findAssetLocation = useFindAssetLocation();
@@ -626,7 +625,7 @@ const AssetGraphExplorerWithData = ({
                       <AssetNode
                         definition={graphNode.definition}
                         selected={selectedGraphNodes.includes(graphNode)}
-                        computeKindTagsFilter={computeKindTagsFilter}
+                        kindFilter={kindFilter}
                       />
                     </AssetNodeContextMenuWrapper>
                   )}

js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx

@@ -25,7 +25,7 @@ import {markdownToPlaintext} from '../ui/markdownToPlaintext';
 interface Props {
   definition: AssetNodeFragment;
   selected: boolean;
-  computeKindTagsFilter?: StaticSetFilter<string>;
+  kindFilter?: StaticSetFilter<string>;
 }
 
 export const AssetNode = React.memo(({definition, selected}: Props) => {

js_modules/dagster-ui/packages/ui-core/src/asset-graph/useAssetGraphData.tsx

@@ -16,13 +16,14 @@ import {GraphQueryItem, filterByQuery} from '../app/GraphQueryImpl';
 import {AssetKey} from '../assets/types';
 import {AssetGroupSelector, PipelineSelector} from '../graphql/types';
 import {useIndexedDBCachedQuery} from '../search/useIndexedDBCachedQuery';
+import {doesFilterArrayMatchValueArray} from '../ui/Filters/useAssetTagFilter';
 
 export interface AssetGraphFetchScope {
   hideEdgesToNodesOutsideQuery?: boolean;
   hideNodesMatching?: (node: AssetNodeForGraphQueryFragment) => boolean;
   pipelineSelector?: PipelineSelector;
   groupSelector?: AssetGroupSelector;
-  computeKinds?: string[];
+  kinds?: string[];
 }
 
 export type AssetGraphQueryItem = GraphQueryItem & {
@@ -116,10 +117,15 @@ export function useAssetGraphData(opsQuery: string, options: AssetGraphFetchScop
     // get to leverage the useQuery cache almost 100% of the time above, making this
     // super fast after the first load vs a network fetch on every page view.
     const {all: allFilteredByOpQuery} = filterByQuery(graphQueryItems, opsQuery);
-    const computeKinds = options.computeKinds?.map((c) => c.toLowerCase());
-    const all = computeKinds?.length
+    const kinds = options.kinds?.map((c) => c.toLowerCase());
+    const all = kinds?.length
       ? allFilteredByOpQuery.filter(
-          ({node}) => node.computeKind && computeKinds.includes(node.computeKind.toLowerCase()),
+          ({node}) =>
+            node.kinds &&
+            doesFilterArrayMatchValueArray(
+              kinds,
+              node.kinds.map((k) => k.toLowerCase()),
+            ),
         )
       : allFilteredByOpQuery;
 
@@ -139,7 +145,7 @@ export function useAssetGraphData(opsQuery: string, options: AssetGraphFetchScop
     repoFilteredNodes,
     graphQueryItems,
     opsQuery,
-    options.computeKinds,
+    options.kinds,
     options.hideEdgesToNodesOutsideQuery,
   ]);
 

js_modules/dagster-ui/packages/ui-core/src/asset-graph/useAssetGraphExplorerFilters.oss.tsx

@@ -18,15 +18,15 @@ export function useAssetGraphExplorerFilters({
   loading,
   clearExplorerPath,
 }: Props) {
-  const {filterButton, computeKindFilter, groupsFilter, activeFiltersJsx, filterFn} =
+  const {filterButton, kindFilter, groupsFilter, activeFiltersJsx, filterFn} =
     useAssetCatalogFiltering({
       assets: nodes,
       includeRepos: isGlobalGraph,
       loading,
     });
 
   return {
-    computeKindTagsFilter: computeKindFilter,
+    kindFilter,
     groupsFilter,
     button: filterButton,
     filterFn,

js_modules/dagster-ui/packages/ui-core/src/assets/AssetTable.tsx

@@ -39,7 +39,7 @@ interface Props {
   displayPathForAsset: (asset: Asset) => string[];
   searchPath: string;
   isFiltered: boolean;
-  computeKindFilter?: StaticSetFilter<string>;
+  kindFilter?: StaticSetFilter<string>;
 }
 
 export const AssetTable = ({
@@ -52,7 +52,7 @@ export const AssetTable = ({
   searchPath,
   isFiltered,
   view,
-  computeKindFilter,
+  kindFilter,
 }: Props) => {
   const groupedByDisplayKey = useMemo(
     () => groupBy(assets, (a) => JSON.stringify(displayPathForAsset(a))),
@@ -137,7 +137,7 @@ export const AssetTable = ({
         onRefresh={() => refreshState.refetch()}
         showRepoColumn
         view={view}
-        computeKindFilter={computeKindFilter}
+        kindFilter={kindFilter}
       />
     );
   };

js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx

@@ -207,7 +207,7 @@ export const AssetsCatalogTable = ({
     isFiltered,
     filterButton,
     activeFiltersJsx,
-    computeKindFilter,
+    kindFilter,
   } = useAssetCatalogFiltering({assets});
 
   const {searchPath, filterInput, filtered} = useBasicAssetSearchInput(
@@ -284,7 +284,7 @@ export const AssetsCatalogTable = ({
       prefixPath={prefixPath || emptyArray}
       searchPath={searchPath}
       displayPathForAsset={displayPathForAsset}
-      computeKindFilter={computeKindFilter}
+      kindFilter={kindFilter}
     />
   );
 };

js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/filterAssetDefinition.test.tsx

@@ -1,6 +1,7 @@
 import {
   AssetFilterBaseType,
   AssetFilterType,
+  FilterableAssetDefinition,
   filterAssetDefinition,
 } from 'shared/assets/useAssetDefinitionFilterState.oss';
 
@@ -58,12 +59,12 @@ describe('filterAssetDefinition', () => {
     expect(filterAssetDefinition(filters, definition)).toBe(false);
   });
 
-  it('returns false when computeKindTags filter does not match the definition', () => {
+  it('returns false when kinds filter does not match the definition', () => {
     const filters = {
-      computeKindTags: ['computeKind2'],
+      kinds: ['computeKind2'],
     };
     const definition = {
-      computeKind: 'computeKind1',
+      kinds: ['computeKind1'],
     };
     expect(filterAssetDefinition(filters, definition)).toBe(false);
   });
@@ -144,7 +145,7 @@ describe('filterAssetDefinition', () => {
     const filters = {
       codeLocations: [repo],
       groups: [group],
-      computeKindTags: ['computeKind1'],
+      kinds: ['computeKind1'],
       changedInBranch: [ChangeReason.DEPENDENCIES, ChangeReason.PARTITIONS_DEFINITION],
       owners: [owner],
       tags: [tag],
@@ -157,7 +158,7 @@ describe('filterAssetDefinition', () => {
         }),
       }),
       groupName: group.groupName,
-      computeKind: 'computeKind1',
+      kinds: ['computeKind1'],
       changedReasons: [ChangeReason.DEPENDENCIES, ChangeReason.PARTITIONS_DEFINITION],
       owners: [owner],
       tags: [tag],
@@ -167,7 +168,7 @@ describe('filterAssetDefinition', () => {
   });
 
   (
-    ['changedInBranch', 'computeKindTags', 'groups', 'owners', 'codeLocations', 'tags'] as Array<
+    ['changedInBranch', 'kinds', 'groups', 'owners', 'codeLocations', 'tags'] as Array<
       keyof AssetFilterBaseType
     >
   ).forEach((filter) => {
@@ -187,15 +188,15 @@ describe('filterAssetDefinition', () => {
       const filters: Partial<AssetFilterType> = {
         selectAllFilters: [filter],
       };
-      const definition = {
+      const definition: FilterableAssetDefinition = {
         repository: buildRepository({
           name: group.repositoryName,
           location: buildRepositoryLocation({
             name: group.repositoryLocationName,
           }),
         }),
         groupName: group.groupName,
-        computeKind: 'computeKind1',
+        kinds: ['computeKind1'],
         changedReasons: [ChangeReason.DEPENDENCIES, ChangeReason.PARTITIONS_DEFINITION],
         owners: [owner],
         tags: [tag],

js_modules/dagster-ui/packages/ui-core/src/assets/useAssetCatalogFiltering.oss.tsx

@@ -15,10 +15,7 @@ import {useAssetOwnerFilter, useAssetOwnersForAssets} from '../ui/Filters/useAss
 import {useAssetTagFilter, useAssetTagsForAssets} from '../ui/Filters/useAssetTagFilter';
 import {useChangedFilter} from '../ui/Filters/useChangedFilter';
 import {useCodeLocationFilter} from '../ui/Filters/useCodeLocationFilter';
-import {
-  useAssetKindTagsForAssets,
-  useComputeKindTagFilter,
-} from '../ui/Filters/useComputeKindTagFilter';
+import {useAssetKindsForAssets, useKindFilter} from '../ui/Filters/useKindFilter';
 import {WorkspaceContext} from '../workspace/WorkspaceContext';
 import {buildRepoAddress} from '../workspace/buildRepoAddress';
 
@@ -47,15 +44,14 @@ export function useAssetCatalogFiltering<
     filterFn,
     setAssetTags,
     setChangedInBranch,
-    setComputeKindTags,
+    setKinds,
     setGroups,
     setOwners,
     setCodeLocations,
     setSelectAllFilters,
   } = useAssetDefinitionFilterState({isEnabled});
 
   const allAssetGroupOptions = useAssetGroupSelectorsForAssets(assets);
-  const allComputeKindTags = useAssetKindTagsForAssets(assets);
   const allAssetOwners = useAssetOwnersForAssets(assets);
 
   const groupsFilter = useAssetGroupFilter({
@@ -71,19 +67,20 @@ export function useAssetCatalogFiltering<
       : filters.changedInBranch,
     setChangedInBranch,
   });
-  const computeKindFilter = useComputeKindTagFilter({
-    allComputeKindTags,
-    computeKindTags: filters.selectAllFilters.includes('computeKindTags')
-      ? allComputeKindTags
-      : filters.computeKindTags,
-    setComputeKindTags,
-  });
+
   const ownersFilter = useAssetOwnerFilter({
     allAssetOwners,
     owners: filters.selectAllFilters.includes('owners') ? allAssetOwners : filters.owners,
     setOwners,
   });
 
+  const allKinds = useAssetKindsForAssets(assets);
+  const kindFilter = useKindFilter({
+    allAssetKinds: allKinds,
+    kinds: filters.selectAllFilters.includes('kinds') ? allKinds : filters.kinds,
+    setKinds,
+  });
+
   const tags = useAssetTagsForAssets(assets);
 
   const tagsFilter = useAssetTagFilter({
@@ -109,7 +106,7 @@ export function useAssetCatalogFiltering<
   });
 
   const uiFilters = React.useMemo(() => {
-    const uiFilters: FilterObject[] = [groupsFilter, computeKindFilter, ownersFilter, tagsFilter];
+    const uiFilters: FilterObject[] = [groupsFilter, kindFilter, ownersFilter, tagsFilter];
     if (isBranchDeployment) {
       uiFilters.push(changedInBranchFilter);
     }
@@ -120,7 +117,7 @@ export function useAssetCatalogFiltering<
   }, [
     allRepos.length,
     changedInBranchFilter,
-    computeKindFilter,
+    kindFilter,
     groupsFilter,
     includeRepos,
     isBranchDeployment,
@@ -155,7 +152,7 @@ export function useAssetCatalogFiltering<
     [
       ['owners', filters.owners, allAssetOwners] as const,
       ['tags', filters.tags, tags] as const,
-      ['computeKindTags', filters.computeKindTags, allComputeKindTags] as const,
+      ['kinds', filters.kinds, allKinds] as const,
       ['groups', filters.groups, allAssetGroupOptions] as const,
       ['changedInBranch', filters.changedInBranch, Object.values(ChangeReason)] as const,
       ['codeLocations', filters.codeLocations, allRepos] as const,
@@ -182,7 +179,7 @@ export function useAssetCatalogFiltering<
   }, [
     allAssetGroupOptions,
     allAssetOwners,
-    allComputeKindTags,
+    allKinds,
     allRepos,
     didWaitAfterLoading,
     filters,
@@ -203,7 +200,7 @@ export function useAssetCatalogFiltering<
     isFiltered,
     filterFn,
     filtered,
-    computeKindFilter,
+    kindFilter,
     groupsFilter,
     renderFilterButton: components.renderButton,
   };