Skip to content

Commit

Permalink
handle asset search fork in hook
Browse files Browse the repository at this point in the history
  • Loading branch information
@clairelin135
clairelin135 committed Mar 11, 2024
1 parent 7847ab7 commit ecffd16
Show file tree
Hide file tree
Showing 5 changed files with 78 additions and 95 deletions.
2 changes: 1 addition & 1 deletion js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ export const AppTopNav = ({
<div style={{width: '0px', height: '30px'}} />
</ShortcutHandler>
) : null}
<SearchDialog searchPlaceholder={searchPlaceholder} isAssetSearch={false} />
<SearchDialog searchPlaceholder={searchPlaceholder} />
{children}
</Box>
</AppTopNavContainer>
Expand Down
30 changes: 9 additions & 21 deletions js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {useHistory} from 'react-router-dom';
import styled from 'styled-components';

import {SearchResults} from './SearchResults';
import {SearchResult, SearchResultType} from './types';
import {SearchResult} from './types';
import {useGlobalSearch} from './useGlobalSearch';
import {__updateSearchVisibility} from './useSearchVisibility';
import {ShortcutHandler} from '../app/ShortcutHandler';
Expand Down Expand Up @@ -72,15 +72,11 @@ const initialState: State = {

const DEBOUNCE_MSEC = 100;

export const SearchDialog = ({
searchPlaceholder,
isAssetSearch,
}: {
searchPlaceholder: string;
isAssetSearch: boolean;
}) => {
export const SearchDialog = ({searchPlaceholder}: {searchPlaceholder: string}) => {
const history = useHistory();
const {initialize, loading, searchPrimary, searchSecondary} = useGlobalSearch();
const {initialize, loading, searchPrimary, searchSecondary} = useGlobalSearch({
includeAssetFilters: false,
});
const trackEvent = useTrackEvent();

const [state, dispatch] = React.useReducer(reducer, initialState);
Expand Down Expand Up @@ -124,25 +120,17 @@ export const SearchDialog = ({
);

const searchAndHandleSecondary = React.useCallback(
async (queryString: string, returnAssetFilters: boolean) => {
async (queryString: string) => {
const {queryString: queryStringForResults, results} = await searchSecondary(queryString);
if (!returnAssetFilters) {
dispatch({
type: 'complete-secondary',
queryString: queryStringForResults,
results: results.filter((result) => result.item.type === SearchResultType.Asset), // Only return asset results
});
} else {
dispatch({type: 'complete-secondary', queryString: queryStringForResults, results});
}
dispatch({type: 'complete-secondary', queryString: queryStringForResults, results});
},
[searchSecondary],
);

const debouncedSearch = React.useMemo(() => {
const debouncedSearch = debounce(async (queryString: string) => {
searchAndHandlePrimary(queryString);
searchAndHandleSecondary(queryString, isAssetSearch);
searchAndHandleSecondary(queryString);
}, DEBOUNCE_MSEC);
return (queryString: string) => {
if (!firstSearchTrace.current && isFirstSearch.current) {
Expand All @@ -153,7 +141,7 @@ export const SearchDialog = ({
}
return debouncedSearch(queryString);
};
}, [searchAndHandlePrimary, searchAndHandleSecondary, isAssetSearch]);
}, [searchAndHandlePrimary, searchAndHandleSecondary]);

const onChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const newValue = e.target.value;
Expand Down
4 changes: 2 additions & 2 deletions js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import * as React from 'react';
import {Link} from 'react-router-dom';
import styled from 'styled-components';

import {SearchResult, SearchResultType} from './types';
import {AssetFilterSearchResultType, SearchResult, SearchResultType} from './types';

const iconForType = (type: SearchResultType): IconName => {
const iconForType = (type: SearchResultType | AssetFilterSearchResultType): IconName => {
switch (type) {
case SearchResultType.Asset:
return 'asset';
Expand Down
11 changes: 0 additions & 11 deletions js_modules/dagster-ui/packages/ui-core/src/search/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,6 @@ export enum AssetFilterSearchResultType {
AssetGroup = 'AssetFilterSearchResultType.AssetGroup',
}

export function isAssetFilterSearchResultType(
type: SearchResultType | AssetFilterSearchResultType,
): type is AssetFilterSearchResultType {
return (
type === AssetFilterSearchResultType.AssetGroup ||
type === AssetFilterSearchResultType.CodeLocation ||
type === AssetFilterSearchResultType.ComputeKind ||
type === AssetFilterSearchResultType.Owner
);
}

export type SearchResult = {
label: string;
description: string;
Expand Down
126 changes: 66 additions & 60 deletions js_modules/dagster-ui/packages/ui-core/src/search/useGlobalSearch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,63 +141,17 @@ const primaryDataToSearchResults = (input: {data?: SearchPrimaryQuery}) => {
return allEntries;
};

const secondaryDataToSearchResults = (input: {data?: SearchSecondaryQuery}) => {
const secondaryDataToSearchResults = (
input: {data?: SearchSecondaryQuery},
includeAssetFilters: boolean,
) => {
const {data} = input;
if (!data?.assetsOrError || data.assetsOrError.__typename === 'PythonError') {
return [];
}

const {nodes} = data.assetsOrError;

const countsBySection = buildAssetCountBySection(nodes);

const computeKindResults: SearchResult[] = Object.entries(
countsBySection.countsByComputeKind,
).map(([computeKind, count]) => ({
label: computeKind,
description: '',
type: AssetFilterSearchResultType.ComputeKind,
// TODO display correct link once https://github.com/dagster-io/dagster/pull/20342 lands
href: '/assets',
numResults: count,
}));

const codeLocationResults: SearchResult[] = countsBySection.countPerCodeLocation.map(
(codeLocationAssetCount) => ({
label: buildRepoPathForHuman(
codeLocationAssetCount.repoAddress.name,
codeLocationAssetCount.repoAddress.location,
),
description: '',
type: AssetFilterSearchResultType.CodeLocation,
// TODO display correct link once https://github.com/dagster-io/dagster/pull/20342 lands
href: '/assets',
numResults: codeLocationAssetCount.assetCount,
}),
);

const groupResults: SearchResult[] = countsBySection.countPerAssetGroup.map(
(groupAssetCount) => ({
label: groupAssetCount.groupMetadata.groupName,
description: '',
type: AssetFilterSearchResultType.AssetGroup,
// TODO display correct link once https://github.com/dagster-io/dagster/pull/20342 lands
href: '/assets',
numResults: groupAssetCount.assetCount,
}),
);

const ownerResults: SearchResult[] = Object.entries(countsBySection.countsByOwner).map(
([owner, count]) => ({
label: owner,
description: '',
type: AssetFilterSearchResultType.Owner,
// TODO display correct link once https://github.com/dagster-io/dagster/pull/20342 lands
href: '/assets',
numResults: count,
}),
);

const assets = nodes
.filter(({definition}) => definition !== null)
.map(({key, definition}) => {
Expand All @@ -213,13 +167,65 @@ const secondaryDataToSearchResults = (input: {data?: SearchSecondaryQuery}) => {
};
});

return [
...assets,
...computeKindResults,
...codeLocationResults,
...ownerResults,
...groupResults,
];
if (!includeAssetFilters) {
return [...assets];
} else {
const countsBySection = buildAssetCountBySection(nodes);

const computeKindResults: SearchResult[] = Object.entries(
countsBySection.countsByComputeKind,
).map(([computeKind, count]) => ({
label: computeKind,
description: '',
type: AssetFilterSearchResultType.ComputeKind,
// TODO display correct link once https://github.com/dagster-io/dagster/pull/20342 lands
href: '/assets',
numResults: count,
}));

const codeLocationResults: SearchResult[] = countsBySection.countPerCodeLocation.map(
(codeLocationAssetCount) => ({
label: buildRepoPathForHuman(
codeLocationAssetCount.repoAddress.name,
codeLocationAssetCount.repoAddress.location,
),
description: '',
type: AssetFilterSearchResultType.CodeLocation,
// TODO display correct link once https://github.com/dagster-io/dagster/pull/20342 lands
href: '/assets',
numResults: codeLocationAssetCount.assetCount,
}),
);

const groupResults: SearchResult[] = countsBySection.countPerAssetGroup.map(
(groupAssetCount) => ({
label: groupAssetCount.groupMetadata.groupName,
description: '',
type: AssetFilterSearchResultType.AssetGroup,
// TODO display correct link once https://github.com/dagster-io/dagster/pull/20342 lands
href: '/assets',
numResults: groupAssetCount.assetCount,
}),
);

const ownerResults: SearchResult[] = Object.entries(countsBySection.countsByOwner).map(
([owner, count]) => ({
label: owner,
description: '',
type: AssetFilterSearchResultType.Owner,
// TODO display correct link once https://github.com/dagster-io/dagster/pull/20342 lands
href: '/assets',
numResults: count,
}),
);
return [
...assets,
...computeKindResults,
...codeLocationResults,
...ownerResults,
...groupResults,
];
}
};

const fuseOptions = {
Expand Down Expand Up @@ -250,7 +256,7 @@ type IndexBuffer = {
*
* A `terminate` function is provided, but it's probably not necessary to use it.
*/
export const useGlobalSearch = () => {
export const useGlobalSearch = ({includeAssetFilters}: {includeAssetFilters: boolean}) => {
const primarySearch = useRef<WorkerSearchResult | null>(null);
const secondarySearch = useRef<WorkerSearchResult | null>(null);

Expand Down Expand Up @@ -300,13 +306,13 @@ export const useGlobalSearch = () => {
if (!secondaryData) {
return;
}
const results = secondaryDataToSearchResults({data: secondaryData});
const results = secondaryDataToSearchResults({data: secondaryData}, includeAssetFilters);
if (!secondarySearch.current) {
secondarySearch.current = createSearchWorker('secondary', fuseOptions);
}
secondarySearch.current.update(results);
consumeBufferEffect(secondarySearchBuffer, secondarySearch.current);
}, [consumeBufferEffect, secondaryData]);
}, [consumeBufferEffect, secondaryData, includeAssetFilters]);

const primarySearchBuffer = useRef<IndexBuffer | null>(null);
const secondarySearchBuffer = useRef<IndexBuffer | null>(null);
Expand Down

0 comments on commit ecffd16

Please sign in to comment.