feat: virtualize search over all filters list (#298)

packages/data-explorer-ui/src/components/Filter/components/FilterNoResultsFound/filterNoResultsFound.tsx

@@ -1,5 +1,5 @@
 import { Typography } from "@mui/material";
-import React from "react";
+import React, { forwardRef } from "react";
 import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
 import { FilterNoResultsFound as FilterNoResults } from "./filterNoResultsFound.styles";
 
@@ -9,11 +9,15 @@ export interface FilterNoResultsFoundProps {
   onClearSearchTerm?: OnClearSearchTermFn;
 }
 
-export const FilterNoResultsFound = ({
-  onClearSearchTerm,
-}: FilterNoResultsFoundProps): JSX.Element => {
+export const FilterNoResultsFound = forwardRef<
+  HTMLDivElement,
+  FilterNoResultsFoundProps
+>(function FilterNoResultsFound(
+  { onClearSearchTerm }: FilterNoResultsFoundProps,
+  ref
+): JSX.Element {
   return (
-    <FilterNoResults>
+    <FilterNoResults ref={ref}>
       <Typography component="div" variant="text-body-500">
         No results found!
       </Typography>
@@ -33,4 +37,4 @@ export const FilterNoResultsFound = ({
       )}
     </FilterNoResults>
   );
-};
+});

packages/data-explorer-ui/src/components/Filter/components/SearchAllFilters/common/constants.ts

@@ -1,7 +1,10 @@
 import { PaperProps, PopperProps } from "@mui/material";
+import { DividerItem, ITEM_TYPE, NoResultsItem } from "./entites";
 
 export const DEFAULT_LIST_HEIGHT = 0;
 
+export const DIVIDER_HEIGHT = 17;
+
 export const PAPER_PROPS: Partial<PaperProps> = {
   sx: {
     width: 368,
@@ -19,3 +22,12 @@ export const POPPER_PROPS: Partial<PopperProps> = {
   ],
   placement: "bottom-start",
 };
+
+export const DIVIDER_ITEM: DividerItem = {
+  type: ITEM_TYPE.DIVIDER,
+};
+
+export const NO_RESULTS_ITEM: NoResultsItem = {
+  key: "noResults",
+  type: ITEM_TYPE.NO_RESULTS,
+};

packages/data-explorer-ui/src/components/Filter/components/SearchAllFilters/common/entites.ts

@@ -0,0 +1,37 @@
+import { SelectCategoryValueView } from "../../../../../common/entities";
+
+export enum ITEM_TYPE {
+  CATEGORY = "CATEGORY",
+  DIVIDER = "DIVIDER",
+  NO_RESULTS = "NO_RESULTS",
+  VALUE = "VALUE",
+}
+
+export interface CategoryItem {
+  categoryLabel: string;
+  key: string;
+  type: ITEM_TYPE.CATEGORY;
+}
+
+export interface DividerItem {
+  type: ITEM_TYPE.DIVIDER;
+}
+
+export interface NoResultsItem {
+  key: "noResults";
+  type: ITEM_TYPE.NO_RESULTS;
+}
+
+export interface ValueItem {
+  categoryKey: string;
+  key: string;
+  type: ITEM_TYPE.VALUE;
+  value: SelectCategoryValueView;
+}
+
+export type SearchAllFiltersDynamicItem =
+  | CategoryItem
+  | ValueItem
+  | NoResultsItem;
+
+export type SearchAllFiltersItem = SearchAllFiltersDynamicItem | DividerItem;