fix: explore quick filters should behave like facet filters (#12206)

* fix: explore quick filters

* fix: code smells

openmetadata-ui/src/main/resources/ui/src/assets/svg/close-circle-outlined-color.svg

@@ -1,12 +1,22 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#7147E8" stroke="#7147E8">
+<svg width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#0968da" stroke="#0968da">
+
 <g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
 <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
 <g id="SVGRepo_iconCarrier">
+
 <title>ionicons-v5-m</title>
-
<path d="M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z" style="fill:none;stroke:#7147E8;stroke-miterlimit:10;stroke-width:32px"/>
+
-
<line x1="320" y1="320" x2="192" y2="192" style="fill:none;stroke:#7147E8;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>
+<path d="M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z" style="fill:none;stroke:#0968da;stroke-miterlimit:10;stroke-width:32px"/>
-
<line x1="192" y1="320" x2="320" y2="192" style="fill:none;stroke:#7147E8;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>
+
+<line x1="320" y1="320" x2="192" y2="192" style="fill:none;stroke:#0968da;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>
+
+<line x1="192" y1="320" x2="320" y2="192" style="fill:none;stroke:#0968da;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>
+
 </g>
+
 </svg>

openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx

@@ -514,9 +514,9 @@ export const DataAssetsHeader = ({
                   <Typography.Text>{followers}</Typography.Text>
                 </Button>
                 <Tooltip
+                  open={!isEmpty(copyTooltip)}
                   placement="bottomRight"
-                  title={copyTooltip}
+                  title={copyTooltip}>
-                  visible={!isEmpty(copyTooltip)}>
                   <Button
                     icon={<Icon component={ShareIcon} />}
                     onClick={handleShareButtonClick}

openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPILatestResultsV1.tsx

@@ -63,7 +63,7 @@ const KPILatestResultsV1: FC<Props> = ({ kpiLatestResultsRecord }) => {
 
         return (
           <Row key={name}>
-            <Col className="flex-center" span={24}>
+            <Col className="d-flex items-center" span={24}>
               <div
                 className="kpi-days-section"
                 style={{
@@ -77,7 +77,7 @@ const KPILatestResultsV1: FC<Props> = ({ kpiLatestResultsRecord }) => {
                   {t('label.day-left', { day: 'days' })}
                 </Typography.Text>
               </div>
-              <div className="m-l-sm">
+              <div className="m-l-sm flex-1">
                 <Typography.Text className="text-xs">
                   {resultData.displayName ?? name}
                 </Typography.Text>

openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/entityLineage.style.less

@@ -13,6 +13,8 @@
 
 @import url('../../styles/variables.less');
 
+@sidebar-width: 100px;
+
 .custom-react-flow {
   .react-flow__node-input.selectable.selected {
     box-shadow: none;
@@ -90,8 +92,8 @@
   width: 400px;
   height: 32px;
 }
-.custom-control-search-box-edit-mode {
+.ant-select.custom-control-search-box-edit-mode {
-  margin-left: 83px;
+  margin-left: @sidebar-width;
 }
 .custom-control-basic-button {
   padding-left: 4px;
@@ -157,3 +159,24 @@
 .lineage-card .react-flow__edge.animated path {
   animation: none;
 }
+
+.entity-lineage.sidebar {
+  height: 110%;
+  background: @white;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: @sidebar-width;
+  z-index: 200;
+  overflow-y: auto;
+  padding: 8px;
+  transform: translateX(100%);
+  display: none;
+  border-right: 1px solid @border-color;
+  transition: transform 0.3s ease-out;
+}
+
+.entity-lineage.sidebar.open {
+  transform: translateX(0);
+  display: block;
+}

openmetadata-ui/src/main/resources/ui/src/components/Explore/ExploreQuickFilters.interface.ts

@@ -11,12 +11,14 @@
  *  limitations under the License.
  */
 
+import { Aggregations } from 'interface/search.interface';
 import { SearchIndex } from '../../enums/search.enum';
 import { ExploreQuickFilterField } from './explore.interface';
 
 export interface ExploreQuickFiltersProps {
   index: SearchIndex;
   fields: Array<ExploreQuickFilterField>;
+  aggregations?: Aggregations;
   onFieldValueSelect: (field: ExploreQuickFilterField) => void;
   onAdvanceSearch: () => void;
   showDeleted?: boolean;

openmetadata-ui/src/main/resources/ui/src/components/Explore/ExploreQuickFilters.tsx

@@ -15,6 +15,7 @@ import { Space } from 'antd';
 import { AxiosError } from 'axios';
 import { SearchIndex } from 'enums/search.enum';
 import { isEqual, isUndefined, uniqWith } from 'lodash';
+import { Bucket } from 'Models';
 import React, { FC, useState } from 'react';
 import {
   getAdvancedFieldDefaultOptions,
@@ -29,6 +30,7 @@ import {
 } from '../../constants/AdvancedSearch.constants';
 import {
   getAdvancedField,
+  getOptionsFromAggregationBucket,
   getOptionTextFromKey,
 } from '../../utils/AdvancedSearchUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
@@ -39,15 +41,22 @@ import { ExploreQuickFiltersProps } from './ExploreQuickFilters.interface';
 const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
   fields,
   index,
+  aggregations,
   onFieldValueSelect,
 }) => {
   const [options, setOptions] = useState<SearchDropdownOption[]>();
   const [isOptionsLoading, setIsOptionsLoading] = useState<boolean>(false);
+  const [tierOptions, setTierOptions] = useState<SearchDropdownOption[]>();
 
   const fetchDefaultOptions = async (
     index: SearchIndex | SearchIndex[],
     key: string
   ) => {
+    let buckets: Bucket[] = [];
+
+    if (aggregations?.[key] && key !== 'tier.tagFQN') {
+      buckets = aggregations[key].buckets;
+    } else {
       const [res, tierTags] = await Promise.all([
         getAdvancedFieldDefaultOptions(index, key),
         key === 'tier.tagFQN'
@@ -55,17 +64,10 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
           : Promise.resolve(null),
       ]);
 
-    const buckets = res.data.aggregations[`sterms#${key}`].buckets;
+      buckets = res.data.aggregations[`sterms#${key}`].buckets;
 
-    const optionsArray = buckets.map((option) => ({
-      key: option.key,
-      label: option.key,
-      count: option.doc_count ?? 0,
-    }));
-
-    let options;
       if (key === 'tier.tagFQN' && tierTags) {
-      options = tierTags.data.map((option) => {
+        const options = tierTags.data.map((option) => {
           const bucketItem = buckets.find(
             (item) => item.key === option.fullyQualifiedName
           );
@@ -76,11 +78,14 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
             count: bucketItem?.doc_count ?? 0,
           };
         });
-    } else {
+        setTierOptions(uniqWith(options, isEqual));
-      options = optionsArray;
+        setOptions(uniqWith(options, isEqual));
+
+        return;
+      }
     }
 
-    setOptions(uniqWith(options, isEqual));
+    setOptions(uniqWith(getOptionsFromAggregationBucket(buckets), isEqual));
   };
 
   const getInitialOptions = async (key: string) => {
@@ -106,14 +111,27 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
     setIsOptionsLoading(true);
     setOptions([]);
     try {
-      if (value) {
+      if (!value) {
-        const advancedField = getAdvancedField(key);
+        getInitialOptions(key);
-        if (!MISC_FIELDS.includes(key)) {
+
-          const res = await getAdvancedFieldOptions(
+        return;
-            value,
+      }
-            index,
+      if (aggregations?.[key] && key !== 'tier.tagFQN') {
-            advancedField
+        const defaultOptions = getOptionsFromAggregationBucket(
+          aggregations[key].buckets
         );
+        const filteredOptions = defaultOptions.filter((option) => {
+          return option.label.toLowerCase().includes(value.toLowerCase());
+        });
+        setOptions(filteredOptions);
+      } else if (key === 'tier.tagFQN') {
+        const filteredOptions = tierOptions?.filter((option) => {
+          return option.label.toLowerCase().includes(value.toLowerCase());
+        });
+        setOptions(filteredOptions);
+      } else if (!MISC_FIELDS.includes(key)) {
+        const advancedField = getAdvancedField(key);
+        const res = await getAdvancedFieldOptions(value, index, advancedField);
 
         const suggestOptions =
           res.data.suggest['metadata-suggest'][0].options ?? [];
@@ -128,8 +146,7 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
         });
 
         setOptions(uniqWith(formattedSuggestions, isEqual));
-        } else {
+      } else if (key === 'tags.tagFQN') {
-          if (key === 'tags.tagFQN') {
         const res = await getTagSuggestions(value);
 
         const suggestOptions =
@@ -158,10 +175,6 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
 
         setOptions(uniqWith(formattedSuggestions, isEqual));
       }
-        }
-      } else {
-        getInitialOptions(key);
-      }
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {

openmetadata-ui/src/main/resources/ui/src/components/Explore/explore.interface.ts

@@ -29,7 +29,6 @@ import { Table } from '../../generated/entity/data/table';
 import { Topic } from '../../generated/entity/data/topic';
 import { Aggregations, SearchResponse } from '../../interface/search.interface';
 import { SearchDropdownOption } from '../SearchDropdown/SearchDropdown.interface';
-import { FilterObject } from './AdvanceSearchProvider/AdvanceSearchProvider.interface';
 
 export type UrlParams = {
   searchQuery: string;
@@ -67,9 +66,6 @@ export interface ExploreProps {
     queryFilter: QueryFilterInterface | undefined
   ) => void;
 
-  facetFilters?: FilterObject;
-  onChangeFacetFilters: (filter: FilterObject) => void;
-
   searchIndex: ExploreSearchIndex;
   onChangeSearchIndex: (searchIndex: ExploreSearchIndex) => void;
 

openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/ExploreV1.component.tsx

@@ -61,10 +61,10 @@ import Loader from '../Loader/Loader';
 import './ExploreV1.style.less';
 
 const ExploreV1: React.FC<ExploreProps> = ({
+  aggregations,
   searchResults,
   tabCounts,
   onChangeAdvancedSearchQuickFilters,
-  facetFilters,
   searchIndex,
   onChangeSearchIndex,
   sortOrder,
@@ -79,7 +79,6 @@ const ExploreV1: React.FC<ExploreProps> = ({
 }) => {
   const { t } = useTranslation();
   const { tab } = useParams<{ tab: string }>();
-
   const [selectedQuickFilters, setSelectedQuickFilters] = useState<
     ExploreQuickFilterField[]
   >([] as ExploreQuickFilterField[]);
@@ -144,7 +143,7 @@ const ExploreV1: React.FC<ExploreProps> = ({
       })
     );
 
-    return searchQueryParam && !facetFilters
+    return searchQueryParam
       ? items.filter((tabItem) => {
           return tabItem.count > 0 || tabItem.key === searchCriteria;
         })
@@ -287,6 +286,7 @@ const ExploreV1: React.FC<ExploreProps> = ({
     <div className="explore-page bg-white">
       <div className="w-full h-full">
         {tabItems.length > 0 && (
+          <>
             <Row gutter={[8, 0]} wrap={false}>
               <Col span={24}>
                 <Tabs
@@ -307,6 +307,7 @@ const ExploreV1: React.FC<ExploreProps> = ({
                         span={24}>
                         {showFilters && (
                           <ExploreQuickFilters
+                            aggregations={aggregations}
                             fields={selectedQuickFilters}
                             index={activeTabKey}
                             showDeleted={showDeleted}
@@ -390,8 +391,6 @@ const ExploreV1: React.FC<ExploreProps> = ({
                 </Row>
               </Col>
             </Row>
-        )}
-      </div>
             <PageLayoutV1
               className="p-0 explore-page-layout"
               pageTitle={t('label.explore')}
@@ -423,10 +422,15 @@ const ExploreV1: React.FC<ExploreProps> = ({
                   )}
                 </Col>
               </Row>
+            </PageLayoutV1>
+          </>
+        )}
+      </div>
+
       {searchQueryParam && tabItems.length === 0 && !loading && (
         <Space
           align="center"
-            className="w-full h-full flex-center"
+          className="w-full flex-center full-height"
           data-testid="no-search-results"
           direction="vertical"
           size={48}>
@@ -437,7 +441,6 @@ const ExploreV1: React.FC<ExploreProps> = ({
         </Space>
       )}
       {searchQueryParam && tabItems.length === 0 && loading && <Loader />}
-      </PageLayoutV1>
     </div>
   );
 };

openmetadata-ui/src/main/resources/ui/src/constants/AdvancedSearch.constants.ts

@@ -44,18 +44,18 @@ export const COMMON_DROPDOWN_ITEMS = [
   },
   {
     label: t('label.service'),
-    key: 'service.name',
+    key: 'service.name.keyword',
   },
 ];
 
 export const TABLE_DROPDOWN_ITEMS = [
   {
     label: t('label.database'),
-    key: 'database.name',
+    key: 'database.name.keyword',
   },
   {
     label: t('label.schema'),
-    key: 'databaseSchema.name',
+    key: 'databaseSchema.name.keyword',
   },
   {
     label: t('label.column'),

openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsPage.tsx

@@ -1040,9 +1040,7 @@ const TagsPage = () => {
       {isUpdateLoading ? (
         <Loader />
       ) : (
-        <div
+        <div className="p-x-md" data-testid="tags-container">
-          className="full-height page-container"
-          data-testid="tags-container">
           {currentClassification && (
             <Row data-testid="header" wrap={false}>
               <Col flex="auto">

openmetadata-ui/src/main/resources/ui/src/pages/explore/ExplorePageV1.component.tsx

@@ -37,7 +37,6 @@ import React, {
 } from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { searchQuery } from 'rest/searchAPI';
-import useDeepCompareEffect from 'use-deep-compare-effect';
 import {
   getCombinedQueryFilterObject,
   getUpdatedAggregateFieldValue,
@@ -51,10 +50,6 @@ import {
 } from '../../constants/explore.constants';
 import { SearchIndex } from '../../enums/search.enum';
 import { Aggregations, SearchResponse } from '../../interface/search.interface';
-import {
-  filterObjectToElasticsearchQuery,
-  isFilterObject,
-} from '../../utils/FilterUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import {
   QueryFieldInterface,
@@ -109,19 +104,6 @@ const ExplorePageV1: FunctionComponent = () => {
     [location.search]
   );
 
-  const facetFilters = useMemo(
-    () =>
-      isFilterObject(parsedSearch.facetFilter)
-        ? parsedSearch.facetFilter
-        : undefined,
-    [parsedSearch.facetFilter]
-  );
-
-  const elasticsearchQueryFilter = useMemo(
-    () => filterObjectToElasticsearchQuery(facetFilters),
-    [facetFilters]
-  );
-
   const handlePageChange: ExploreProps['onChangePage'] = (page, size) => {
     history.push({
       search: Qs.stringify({ ...parsedSearch, page, size: size ?? PAGE_SIZE }),
@@ -197,14 +179,6 @@ const ExplorePageV1: FunctionComponent = () => {
     [history, parsedSearch]
   );
 
-  const handleFacetFilterChange: ExploreProps['onChangeFacetFilters'] = (
-    facetFilter
-  ) => {
-    history.push({
-      search: Qs.stringify({ ...parsedSearch, facetFilter, page: 1 }),
-    });
-  };
-
   const handleShowDeletedChange: ExploreProps['onChangeShowDeleted'] = (
     showDeleted
   ) => {
@@ -301,11 +275,10 @@ const ExplorePageV1: FunctionComponent = () => {
     fetchFilterAggregationsWithoutFilters();
   }, [searchIndex]);
 
-  useDeepCompareEffect(() => {
+  useEffect(() => {
     const updatedQuickFilters = getAdvancedSearchQuickFilters();
 
     const combinedQueryFilter = getCombinedQueryFilterObject(
-      elasticsearchQueryFilter as unknown as QueryFilterInterface,
       updatedQuickFilters as QueryFilterInterface,
       queryFilter as unknown as QueryFilterInterface
     );
@@ -390,7 +363,6 @@ const ExplorePageV1: FunctionComponent = () => {
     sortValue,
     sortOrder,
     showDeleted,
-    elasticsearchQueryFilter,
     searchIndex,
     page,
     size,
@@ -440,7 +412,6 @@ const ExplorePageV1: FunctionComponent = () => {
   return (
     <ExploreV1
       aggregations={updatedAggregations}
-      facetFilters={facetFilters}
       loading={isLoading && !isTourOpen}
       quickFilters={advancesSearchQuickFilters}
       searchIndex={searchIndex}
@@ -454,7 +425,6 @@ const ExplorePageV1: FunctionComponent = () => {
       sortValue={sortValue}
       tabCounts={searchHitCounts}
       onChangeAdvancedSearchQuickFilters={handleAdvanceSearchQuickFiltersChange}
-      onChangeFacetFilters={handleFacetFilterChange}
       onChangePage={handlePageChange}
       onChangeSearchIndex={handleSearchIndexChange}
       onChangeShowDeleted={handleShowDeletedChange}

openmetadata-ui/src/main/resources/ui/src/styles/app.less

@@ -439,3 +439,7 @@ a[href].link-text-grey,
 .global-border-radius {
   border-radius: 10px;
 }
+
+.full-height {
+  height: calc(100vh - 64px); // removing only navbar height
+}

openmetadata-ui/src/main/resources/ui/src/styles/temp.css

@@ -828,27 +828,6 @@ body .list-option.rdw-option-active {
 
 /* EntityLineage Sidebar CSS */
 
-.entity-lineage.sidebar {
-  height: 110%;
-  background: white;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100px;
-  z-index: 200;
-  overflow-y: auto;
-  padding: 8px;
-  transform: translateX(100%);
-  display: none;
-  border-right: 1px solid #d9ceee;
-  transition: transform 0.3s ease-out;
-}
-
-.entity-lineage.sidebar.open {
-  transform: translateX(0);
-  display: block;
-}
-
 /* login slider */
 
 .login-slider.slick-dots li.slick-active button:before {

openmetadata-ui/src/main/resources/ui/src/styles/x-master.css

@@ -709,12 +709,6 @@ body .profiler-graph .recharts-active-dot circle {
   width: calc(100% - 330px);
 }
 
-/* page-container v1 */
-
-.full-height {
-  height: calc(100vh - 110px);
-}
-
 /* 64 header + ( 16 + 16 )spacing Y = 96*/
 #left-panel {
   position: fixed;

openmetadata-ui/src/main/resources/ui/src/utils/AdvancedSearchUtils.tsx

@@ -17,6 +17,7 @@ import ProfilePicture from 'components/common/ProfilePicture/ProfilePicture';
 import { SearchDropdownOption } from 'components/SearchDropdown/SearchDropdown.interface';
 import i18next from 'i18next';
 import {
+  Bucket,
   ContainerSearchSource,
   DashboardSearchSource,
   ExploreSearchSource,
@@ -389,3 +390,15 @@ export const getOptionTextFromKey = (
     }
   }
 };
+
+export const getOptionsFromAggregationBucket = (buckets: Bucket[]) => {
+  if (!buckets) {
+    return [];
+  }
+
+  return buckets.map((option) => ({
+    key: option.key,
+    label: option.key,
+    count: option.doc_count ?? 0,
+  }));
+};