Refactoring the quries into a single one to get the search results on…

… Home Page (datahub-project#4372)
maggiehays · Aug 1, 2022 · 67aa86e · 67aa86e
1 parent 33c66cb
commit 67aa86e
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 53 deletions.
diff --git a/datahub-web-react/src/Mocks.tsx b/datahub-web-react/src/Mocks.tsx
@@ -2970,4 +2970,69 @@ export const mocks = [
             },
         },
     },
+    {
+        request: {
+            query: GetSearchResultsForMultipleDocument,
+            variables: {
+                input: {
+                    types: [],
+                    query: '*',
+                    start: 0,
+                    count: 20,
+                    filters: [],
+                },
+            },
+        },
+        result: {
+            data: {
+                __typename: 'Query',
+                searchAcrossEntities: {
+                    __typename: 'SearchResults',
+                    start: 0,
+                    count: 1,
+                    total: 1,
+                    searchResults: [
+                        {
+                            entity: {
+                                __typename: 'Dataset',
+                                ...dataset3,
+                            },
+                            matchedFields: [],
+                            insights: [],
+                        },
+                        {
+                            entity: {
+                                __typename: 'Dataset',
+                                ...dataset4,
+                            },
+                            matchedFields: [],
+                            insights: [],
+                        },
+                    ],
+                    facets: [
+                        {
+                            field: 'origin',
+                            displayName: 'origin',
+                            aggregations: [
+                                {
+                                    value: 'PROD',
+                                    count: 3,
+                                    entity: null,
+                                },
+                            ],
+                        },
+                        {
+                            field: 'platform',
+                            displayName: 'platform',
+                            aggregations: [
+                                { value: 'hdfs', count: 1, entity: null },
+                                { value: 'mysql', count: 1, entity: null },
+                                { value: 'kafka', count: 1, entity: null },
+                            ],
+                        },
+                    ],
+                },
+            } as GetSearchResultsForMultipleQuery,
+        },
+    },
 ];
diff --git a/datahub-web-react/src/app/home/HomePageHeader.tsx b/datahub-web-react/src/app/home/HomePageHeader.tsx
@@ -8,8 +8,10 @@ import { useGetAuthenticatedUser } from '../useGetAuthenticatedUser';
 import { useEntityRegistry } from '../useEntityRegistry';
 import { navigateToSearchUrl } from '../search/utils/navigateToSearchUrl';
 import { SearchBar } from '../search/SearchBar';
-import { GetSearchResultsQuery, useGetAutoCompleteMultipleResultsLazyQuery } from '../../graphql/search.generated';
-import { useGetAllEntitySearchResults } from '../../utils/customGraphQL/useGetAllEntitySearchResults';
+import {
+    useGetAutoCompleteMultipleResultsLazyQuery,
+    useGetSearchResultsForMultipleQuery,
+} from '../../graphql/search.generated';
 import { EntityType } from '../../types.generated';
 import analytics, { EventType } from '../analytics';
 import { AdminHeaderLinks } from '../shared/admin/AdminHeaderLinks';
@@ -96,28 +98,6 @@ const SearchBarContainer = styled.div`
     text-align: center;
 `;
 
-function getSuggestionFieldsFromResult(result: GetSearchResultsQuery | undefined): string[] {
-    return (
-        (result?.search?.searchResults
-            ?.map((searchResult) => searchResult.entity)
-            ?.map((entity) => {
-                switch (entity.__typename) {
-                    case 'Dataset':
-                        return entity.name.split('.').slice(-1)[0];
-                    case 'CorpUser':
-                        return entity.username;
-                    case 'Chart':
-                        return entity.properties?.name;
-                    case 'Dashboard':
-                        return entity.properties?.name;
-                    default:
-                        return undefined;
-                }
-            })
-            .filter(Boolean) as string[]) || []
-    );
-}
-
 function truncate(input, length) {
     if (input.length > length) {
         return `${input.substring(0, length)}...`;
@@ -166,38 +146,32 @@ export const HomePageHeader = () => {
         }
     };
 
-    // fetch some results from each entity to display search suggestions
-    const allSearchResultsByType = useGetAllEntitySearchResults({
-        query: '*',
-        start: 0,
-        count: 20,
-        filters: [],
+    // Fetch results
+    const { data: searchResultsData } = useGetSearchResultsForMultipleQuery({
+        variables: {
+            input: {
+                types: [],
+                query: '*',
+                start: 0,
+                count: 20,
+                filters: [],
+            },
+        },
     });
 
-    const suggestionsLoading = Object.keys(allSearchResultsByType).some((type) => {
-        return allSearchResultsByType[type].loading;
-    });
+    const searchResultsToShow = useMemo(() => {
+        let result: string[] | undefined = [];
+        if (searchResultsData) {
+            const entities = searchResultsData?.searchAcrossEntities?.searchResults.map((searchResult) => {
+                return searchResult?.entity;
+            });
 
-    const suggestionsToShow = useMemo(() => {
-        let result: string[] = [];
-        if (!suggestionsLoading) {
-            // TODO: Make this more dynamic.
-            // Add a ticket.
-            // Colored Tags: Feature Request...
-            // ...
-            [EntityType.Dashboard, EntityType.Chart, EntityType.Dataset].forEach((type) => {
-                const suggestionsToShowForEntity = getSuggestionFieldsFromResult(
-                    allSearchResultsByType[type]?.data,
-                ).sort(sortRandom);
-                const suggestionToAddToFront = suggestionsToShowForEntity?.pop();
-                result = [...result, ...suggestionsToShowForEntity];
-                if (suggestionToAddToFront) {
-                    result.splice(0, 0, suggestionToAddToFront);
-                }
+            result = entities?.map((entity) => {
+                return entityRegistry.getDisplayName(entity.type, entity);
             });
         }
-        return result;
-    }, [suggestionsLoading, allSearchResultsByType]);
+        return result?.sort(sortRandom);
+    }, [searchResultsData, entityRegistry]);
 
     return (
         <Background>
@@ -232,11 +206,11 @@ export const HomePageHeader = () => {
                         autoCompleteStyle={styles.searchBox}
                         entityRegistry={entityRegistry}
                     />
-                    {suggestionsToShow && suggestionsToShow.length > 0 && (
+                    {searchResultsToShow && searchResultsToShow.length > 0 && (
                         <SuggestionsContainer>
                             <SuggestedQueriesText strong>Try searching for</SuggestedQueriesText>
                             <SuggestionTagContainer>
-                                {suggestionsToShow.slice(0, 3).map((suggestion) => (
+                                {searchResultsToShow.slice(0, 3).map((suggestion) => (
                                     <SuggestionButton
                                         key={suggestion}
                                         type="link"