[ui] Fix “filter to group” action no longer working in the asset graph (

#23768) ## Summary & Motivation https://linear.app/dagster-labs/issue/FE-521/[bug]-filter-to-group-action-no-longer-works-in-the-lineage-ui The AssetGraphExplorer had an optional `assetFilterState?: AssetFilterState` that needed to be passed for this filtering to work, and it's no longer passed anywhere the component is used. I updated this to work the same way the clickable computeKind tags work. ## How I Tested These Changes I verified that the asset graph sidebar and asset graph collapsed + expanded nodes "Filter to group" options all still work Co-authored-by: bengotow <[email protected]>
dagster-io · Aug 20, 2024 · dea312f · dea312f · github-actions · Aug 20, 2024
1 parent 3bd53c0
commit dea312f
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 47 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
@@ -16,7 +16,6 @@ import without from 'lodash/without';
 import * as React from 'react';
 import {useEffect, useMemo, useState} from 'react';
 import {useAssetGraphExplorerFilters} from 'shared/asset-graph/useAssetGraphExplorerFilters.oss';
-import {AssetFilterState} from 'shared/assets/useAssetDefinitionFilterState.oss';
 import styled from 'styled-components';
 
 import {AssetEdges} from './AssetEdges';
@@ -55,6 +54,7 @@ import {AssetKey} from '../assets/types';
 import {DEFAULT_MAX_ZOOM, SVGViewport} from '../graph/SVGViewport';
 import {useAssetLayout} from '../graph/asyncGraphLayout';
 import {closestNodeInDirection, isNodeOffscreen} from '../graph/common';
+import {AssetGroupSelector} from '../graphql/types';
 import {useQueryAndLocalStoragePersistedState} from '../hooks/useQueryAndLocalStoragePersistedState';
 import {
   GraphExplorerOptions,
@@ -74,8 +74,6 @@ type Props = {
   options: GraphExplorerOptions;
   setOptions?: (options: GraphExplorerOptions) => void;
 
-  assetFilterState?: AssetFilterState;
-
   fetchOptions: AssetGraphFetchScope;
 
   explorerPath: ExplorerPath;
@@ -98,34 +96,30 @@ export const AssetGraphExplorer = (props: Props) => {
 
   const {fetchResult, assetGraphData, graphQueryItems, allAssetKeys} = useAssetGraphData(
     props.explorerPath.opsQuery,
-    {
-      ...props.fetchOptions,
-      computeKinds: props.assetFilterState?.filters.computeKindTags,
-      hideNodesMatching,
-    },
+    {...props.fetchOptions, hideNodesMatching},
   );
 
   const {explorerPath, onChangeExplorerPath} = props;
 
-  const {button, filterBar, computeKindTagsFilter, filterFn} = useAssetGraphExplorerFilters({
-    nodes: React.useMemo(
-      () => (fullAssetGraphData ? Object.values(fullAssetGraphData.nodes) : []),
-      [fullAssetGraphData],
-    ),
-    loading: fetchResult.loading,
-    isGlobalGraph: !!props.isGlobalGraph,
-    assetFilterState: props.assetFilterState,
-    explorerPath: explorerPath.opsQuery,
-    clearExplorerPath: React.useCallback(() => {
-      onChangeExplorerPath(
-        {
-          ...explorerPath,
-          opsQuery: '',
-        },
-        'push',
-      );
-    }, [explorerPath, onChangeExplorerPath]),
-  });
+  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]),
+    });
 
   useEffect(() => {
     setHideNodesMatching(() => (node: AssetNodeForGraphQueryFragment) => !filterFn(node));
@@ -159,6 +153,7 @@ export const AssetGraphExplorer = (props: Props) => {
             filterBar={filterBar}
             filterButton={button}
             computeKindTagsFilter={computeKindTagsFilter}
+            groupsFilter={groupsFilter}
             {...props}
           />
         );
@@ -173,10 +168,12 @@ type WithDataProps = Props & {
   fullAssetGraphData: GraphData;
   graphQueryItems: AssetGraphQueryItem[];
 
-  filterButton?: React.ReactNode;
-  filterBar?: React.ReactNode;
+  filterButton: React.ReactNode;
+  filterBar: React.ReactNode;
   isGlobalGraph?: boolean;
-  computeKindTagsFilter?: StaticSetFilter<string>;
+
+  computeKindTagsFilter: StaticSetFilter<string>;
+  groupsFilter: StaticSetFilter<AssetGroupSelector>;
 };
 
 const AssetGraphExplorerWithData = ({
@@ -192,9 +189,9 @@ const AssetGraphExplorerWithData = ({
   allAssetKeys,
   filterButton,
   filterBar,
-  assetFilterState,
   isGlobalGraph = false,
   computeKindTagsFilter,
+  groupsFilter,
 }: WithDataProps) => {
   const findAssetLocation = useFindAssetLocation();
   const [highlighted, setHighlighted] = React.useState<string[] | null>(null);
@@ -440,13 +437,15 @@ const AssetGraphExplorerWithData = ({
   const [showSidebar, setShowSidebar] = React.useState(isGlobalGraph);
 
   const onFilterToGroup = (group: AssetGroup | GroupLayout) => {
-    assetFilterState?.setGroups([
-      {
-        groupName: group.groupName,
-        repositoryName: group.repositoryName,
-        repositoryLocationName: group.repositoryLocationName,
-      },
-    ]);
+    groupsFilter?.setState(
+      new Set([
+        {
+          groupName: group.groupName,
+          repositoryName: group.repositoryName,
+          repositoryLocationName: group.repositoryLocationName,
+        },
+      ]),
+    );
   };
 
   const svgViewport = layout ? (

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
@@ -1,6 +1,4 @@
-import React from 'react';
 import {useAssetCatalogFiltering} from 'shared/assets/useAssetCatalogFiltering.oss';
-import {AssetFilterState} from 'shared/assets/useAssetDefinitionFilterState.oss';
 
 import {AssetGraphFilterBar} from './AssetGraphFilterBar';
 import {GraphNode} from './Utils';
@@ -10,7 +8,6 @@ type Props = {
   clearExplorerPath: () => void;
   explorerPath: string;
   isGlobalGraph: boolean;
-  assetFilterState?: AssetFilterState;
   loading: boolean;
 };
 
@@ -21,16 +18,23 @@ export function useAssetGraphExplorerFilters({
   loading,
   clearExplorerPath,
 }: Props) {
-  const {filterButton, computeKindFilter, storageKindFilter, activeFiltersJsx, filterFn} =
-    useAssetCatalogFiltering({
-      assets: nodes,
-      includeRepos: isGlobalGraph,
-      loading,
-    });
+  const {
+    filterButton,
+    computeKindFilter,
+    storageKindFilter,
+    groupsFilter,
+    activeFiltersJsx,
+    filterFn,
+  } = useAssetCatalogFiltering({
+    assets: nodes,
+    includeRepos: isGlobalGraph,
+    loading,
+  });
 
   return {
     computeKindTagsFilter: computeKindFilter,
     storageKindTagsFilter: storageKindFilter,
+    groupsFilter,
     button: filterButton,
     filterFn,
     activeFiltersJsx,

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/useAssetCatalogFiltering.oss.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/useAssetCatalogFiltering.oss.tsx
@@ -229,6 +229,7 @@ export function useAssetCatalogFiltering<
     filtered,
     computeKindFilter,
     storageKindFilter,
+    groupsFilter,
     renderFilterButton: components.renderButton,
   };
 }