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 fc7f306dbc004..b6ab9d315c87d 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 @@ -301,8 +301,8 @@ const AssetGraphExplorerWithData: React.FC = ({ assetGraphData={assetGraphData} lastSelectedNode={lastSelectedNode} selectNode={React.useCallback( - (nodeId) => { - selectNodeById({stopPropagation: () => {}} as any, nodeId); + (e, nodeId) => { + selectNodeById(e, nodeId); }, [selectNodeById], )} diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorerSidebar.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorerSidebar.tsx index ec1d3e7bb25cd..98d925b71dffe 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorerSidebar.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorerSidebar.tsx @@ -31,7 +31,7 @@ export const AssetGraphExplorerSidebar = React.memo( }: { assetGraphData: GraphData; lastSelectedNode: GraphNode; - selectNode: (nodeId: string) => void; + selectNode: (e: React.MouseEvent | React.KeyboardEvent, nodeId: string) => void; }) => { const [openNodes, setOpenNodes] = React.useState>(new Set()); const [selectedNode, setSelectedNode] = React.useState(null); @@ -172,11 +172,11 @@ export const AssetGraphExplorerSidebar = React.memo( return openNodes; }); }} - selectNode={(id) => { - selectNode(id); + selectNode={(e, id) => { + selectNode(e, id); }} - selectThisNode={() => { - selectNode(node.id); + selectThisNode={(e) => { + selectNode(e, node.id); setSelectedNode(node); }} /> @@ -206,8 +206,8 @@ const Node = ({ node: GraphNode; level: number; toggleOpen: () => void; - selectThisNode: () => void; - selectNode: (nodeId: string) => void; + selectThisNode: (e: React.MouseEvent | React.KeyboardEvent) => void; + selectNode: (e: React.MouseEvent | React.KeyboardEvent, nodeId: string) => void; isOpen: boolean; isSelected: boolean; }) => { @@ -336,7 +336,7 @@ const UpstreamDownstreamDialog = ({ assetGraphData: GraphData; isOpen: boolean; close: () => void; - selectNode: (nodeId: string) => void; + selectNode: (e: React.MouseEvent | React.KeyboardEvent, nodeId: string) => void; }) => { return ( @@ -351,8 +351,8 @@ const UpstreamDownstreamDialog = ({ { - selectNode(asset.id); + onClick={(e) => { + selectNode(e, asset.id); close(); }} /> @@ -394,7 +394,7 @@ const SearchFilter = ({ onSelectValue, }: { values: {label: string; value: T}[]; - onSelectValue: (value: T) => void; + onSelectValue: (e: React.MouseEvent, value: T) => void; }) => { const [searchValue, setSearchValue] = React.useState(''); const filteredValues = React.useMemo(() => { @@ -424,8 +424,8 @@ const SearchFilter = ({ filteredValues.map((value) => ( { - onSelectValue(value.value); + onClick={(e) => { + onSelectValue(e, value.value); setSearchValue(''); }} text={value.label}