From 5f1b5322e44d24d951155c60255be82d7aca46da Mon Sep 17 00:00:00 2001 From: Marco Salazar Date: Fri, 22 Sep 2023 16:13:11 -0400 Subject: [PATCH 1/4] nits --- .../asset-graph/AssetGraphExplorerFilters.tsx | 2 +- .../asset-graph/AssetGraphExplorerSidebar.tsx | 47 +++++++++---------- 2 files changed, 24 insertions(+), 25 deletions(-) diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorerFilters.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorerFilters.tsx index e423e614c3a51..5ea9541724606 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorerFilters.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorerFilters.tsx @@ -26,7 +26,7 @@ export const AssetGraphExplorerFilters = React.memo( const visibleReposSet = React.useMemo(() => new Set(visibleRepos), [visibleRepos]); const reposFilter = useStaticSetFilter({ - name: 'Repository', + name: 'Code location', icon: 'repo', allValues: allRepos.map((repo) => ({ key: repo.repository.id, 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 0fbd52f2cd8a1..f37320e87c2d6 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 @@ -84,7 +84,7 @@ export const AssetGraphExplorerSidebar = React.memo( if (!assetGraphData.nodes[id]) { try { const path = JSON.parse(id); - const nextOpsQuery = `${explorerPath.opsQuery} \"${tokenForAssetKey({path})}\"`; + const nextOpsQuery = `\"${tokenForAssetKey({path})}\"`; onChangeExplorerPath( { ...explorerPath, @@ -447,7 +447,7 @@ const Node = ({ const newQuery = `\"${tokenForAssetKey({path})}\"*`; const nextOpsQuery = explorerPath.opsQuery.includes(newQuery) ? explorerPath.opsQuery - : `${explorerPath.opsQuery} ${newQuery}`; + : newQuery; onChangeExplorerPath( { ...explorerPath, @@ -462,7 +462,7 @@ const Node = ({ const newQuery = `*\"${tokenForAssetKey({path})}\"`; const nextOpsQuery = explorerPath.opsQuery.includes(newQuery) ? explorerPath.opsQuery - : `${explorerPath.opsQuery} ${newQuery}`; + : newQuery; onChangeExplorerPath( { ...explorerPath, @@ -517,7 +517,7 @@ const Node = ({ style={{ width: '100%', borderRadius: '8px', - ...(isSelected ? {background: Colors.LightPurple} : {}), + ...(isSelected ? {background: Colors.Blue50} : {}), }} >
- +
@@ -654,7 +654,7 @@ const BoxWrapper = ({level, children}: {level: number; children: React.ReactNode 0 ? {side: 'left', width: 1, color: Colors.KeylineGray} : undefined} > {sofar} @@ -692,7 +692,7 @@ const SearchFilter = ({ targetTagName="div" content={ searchValue ? ( - ({ overflow: 'auto', }} > - - {filteredValues.length ? ( - filteredValues.map((value) => ( - { - onSelectValue(e, value.value); - setSearchValue(''); - }} - text={value.label} - /> - )) - ) : ( - No results - )} - - + {filteredValues.length ? ( + filteredValues.map((value) => ( + { + onSelectValue(e, value.value); + setSearchValue(''); + }} + text={value.label} + /> + )) + ) : ( + No results + )} + ) : (
) @@ -741,6 +739,7 @@ const ExpandMore = styled.div``; const GrayOnHoverBox = styled(Box)` border-radius: 8px; + cursor: pointer; &:hover { background: ${Colors.Gray100}; transition: background 100ms linear; From c895ddd88f09eaabf8e529f6b1ac3ea6c957b1b7 Mon Sep 17 00:00:00 2001 From: Marco Salazar Date: Fri, 22 Sep 2023 16:31:20 -0400 Subject: [PATCH 2/4] use suggest component instead --- .../asset-graph/AssetGraphExplorerSidebar.tsx | 77 ++++++------------- 1 file changed, 24 insertions(+), 53 deletions(-) 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 f37320e87c2d6..6c5ad81c860ab 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 @@ -16,6 +16,7 @@ import { Spinner, ButtonGroup, Tooltip, + Suggest, } from '@dagster-io/ui-components'; import {useVirtualizer} from '@tanstack/react-virtual'; import React from 'react'; @@ -677,61 +678,31 @@ const SearchFilter = ({ values: {label: string; value: T}[]; onSelectValue: (e: React.MouseEvent, value: T) => void; }) => { - const [searchValue, setSearchValue] = React.useState(''); - const filteredValues = React.useMemo(() => { - if (searchValue) { - return values.filter(({label}) => label.toLowerCase().includes(searchValue.toLowerCase())); - } - return values; - }, [searchValue, values]); - const {viewport, containerProps} = useViewport(); return ( - - {filteredValues.length ? ( - filteredValues.map((value) => ( - { - onSelectValue(e, value.value); - setSearchValue(''); - }} - text={value.label} - /> - )) - ) : ( - No results - )} - - ) : ( -
- ) - } - > -
- { - setSearchValue(e.target.value); - }} - placeholder="Search assets" - {...(containerProps as any)} - /> -
- +
+ + key="asset-graph-explorer-search-bar" + inputProps={{placeholder: 'Search', style: {width: viewport.width + 'px'}}} + items={values} + inputValueRenderer={(item) => item.label} + itemPredicate={(query, item) => + item.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()) + } + popoverProps={{targetProps: {style: {width: viewport.width + 'px'}}}} + itemRenderer={(item, itemProps) => ( + itemProps.handleClick(e)} + key={item.label} + text={item.label} + /> + )} + noResults={} + onItemSelect={(item, e) => onSelectValue(e as any, item.value)} + selectedItem={null} + /> +
); }; From a79ace24d8e0c7ad4a58da6b2a278589f1f4429b Mon Sep 17 00:00:00 2001 From: Marco Salazar Date: Fri, 22 Sep 2023 16:37:36 -0400 Subject: [PATCH 3/4] use suggest component instead --- .../ui-core/src/asset-graph/AssetGraphExplorerSidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 6c5ad81c860ab..2cb3cc0439c3c 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 @@ -689,7 +689,7 @@ const SearchFilter = ({ itemPredicate={(query, item) => item.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()) } - popoverProps={{targetProps: {style: {width: viewport.width + 'px'}}}} + popoverProps={{usePortal: false}} itemRenderer={(item, itemProps) => ( Date: Fri, 22 Sep 2023 22:19:07 -0400 Subject: [PATCH 4/4] full width --- .../asset-graph/AssetGraphExplorerSidebar.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) 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 2cb3cc0439c3c..ab92b335d0c1d 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 @@ -9,7 +9,6 @@ import { Menu, MenuItem, Popover, - TextInput, MiddleTruncate, useViewport, MenuDivider, @@ -680,16 +679,17 @@ const SearchFilter = ({ }) => { const {viewport, containerProps} = useViewport(); return ( -
+ key="asset-graph-explorer-search-bar" - inputProps={{placeholder: 'Search', style: {width: viewport.width + 'px'}}} + inputProps={{placeholder: 'Search', style: {width: `min(100%, ${viewport.width}px)`}}} items={values} inputValueRenderer={(item) => item.label} itemPredicate={(query, item) => item.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()) } - popoverProps={{usePortal: false}} + menuWidth={viewport.width} + popoverProps={{usePortal: false, fill: true}} itemRenderer={(item, itemProps) => ( ({ onItemSelect={(item, e) => onSelectValue(e as any, item.value)} selectedItem={null} /> -
+ ); }; @@ -736,3 +736,9 @@ const ButtonGroupWrapper = styled.div` function nodeId(node: {path: string; id: string} | {id: string}) { return 'path' in node ? node.path : node.id; } + +const SuggestWrapper = styled.div` + .bp4-input-group.dagster-suggest-input { + width: 100%; + } +`;