@databiosphere/findable-ui 42.1.0 → 43.0.0

package/src/components/Filter/components/SearchAllFilters/searchAllFilters.tsx

@@ -1,61 +1,25 @@
-import {
-  AutocompleteRenderInputParams,
-  ListProps as MListProps,
-} from "@mui/material";
-import React, {
-  ChangeEvent,
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { ListProps as MListProps } from "@mui/material";
+import React, { useCallback, useRef, useState } from "react";
 import { isSelectCategoryView } from "../../../../common/categories/views/select/typeGuards";
-import { CategoryView } from "../../../../common/categories/views/types";
-import { SelectCategoryView } from "../../../../common/entities";
 import { SELECTOR } from "../../../../common/selectors";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../hooks/useBreakpointHelper";
-import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { TEST_IDS } from "../../../../tests/testIds";
-import { useDrawer } from "../../../common/Drawer/provider/hook";
-import { SearchCloseButton } from "../SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton";
-import { SearchAllFiltersSearch } from "../SearchAllFiltersSearch/searchAllFiltersSearch";
-import { DEFAULT_SLOT_PROPS, DRAWER_SLOT_PROPS } from "./common/constants";
+import {
+  StyledPopper,
+  StyledPopperDrawer,
+} from "../surfaces/popper/Popper/popper.styles";
+import { SURFACE_TYPE } from "../surfaces/types";
+import {
+  POPPER_DRAWER_SLOT_PROPS,
+  POPPER_MENU_SLOT_PROPS,
+} from "./common/constants";
 import { OVERFLOW_STYLE } from "./common/entites";
 import { setElementsOverflowStyle } from "./common/utils";
-import { AutocompletePopper } from "./components/AutocompletePopper/autocompletePopper.styles";
+import { OutlinedInput } from "./components/OutlinedInput/outlinedInput";
 import { VariableSizeList } from "./components/VariableSizeList/VariableSizeList";
-import { Autocomplete } from "./searchAllFilters.styles";
-
-export interface SearchAllFiltersProps {
-  categoryViews: CategoryView[];
-  onFilter: OnFilterFn;
-}
-
-interface ListboxContextValue {
-  onClearSearch: () => void;
-  onCloseSearch: () => void;
-  onFilter: OnFilterFn;
-  open: boolean;
-  searchTerm: string;
-  selectCategoryViews: SelectCategoryView[];
-}
-
-const renderInput = (params: AutocompleteRenderInputParams): JSX.Element => (
-  <SearchAllFiltersSearch {...params} />
-);
-
-export const ListboxContext = createContext<ListboxContextValue>({
-  onClearSearch: (): void => undefined,
-  onCloseSearch: (): void => undefined,
-  onFilter: (): void => undefined,
-  open: false,
-  searchTerm: "",
-  selectCategoryViews: [],
-});
+import { AutocompleteContext } from "./context/context";
+import { useAutocomplete } from "./context/hook";
+import { StyledAutocomplete } from "./searchAllFilters.styles";
+import { SearchAllFiltersProps } from "./types";
 
 const Listbox = React.forwardRef<HTMLUListElement, MListProps>(function Listbox(
   props,
@@ -64,8 +28,8 @@ const Listbox = React.forwardRef<HTMLUListElement, MListProps>(function Listbox(
   props = Object.assign({}, props, {
     children: undefined, // Content is controlled by VariableSizeList
   });
-  const { onFilter, searchTerm, selectCategoryViews } =
-    useContext(ListboxContext);
+  const { onFilter, searchTerm, selectCategoryViews, surfaceType } =
+    useAutocomplete();
   return (
     <VariableSizeList
       autocompleteListProps={props}
@@ -73,120 +37,94 @@ const Listbox = React.forwardRef<HTMLUListElement, MListProps>(function Listbox(
       ref={ref}
       searchTerm={searchTerm}
       selectCategoryViews={selectCategoryViews}
+      surfaceType={surfaceType}
     />
   );
 });
 
 export const SearchAllFilters = ({
   categoryViews,
+  className,
   onFilter,
+  surfaceType = SURFACE_TYPE.POPPER_MENU,
+  ...props /* Mui AutocompleteProps */
 }: SearchAllFiltersProps): JSX.Element => {
-  const { open: isDrawerOpen } = useDrawer();
-  const bpUpMd = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "md");
   const autocompleteRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
-  const selectCategoryViews = categoryViews.filter((view) =>
-    isSelectCategoryView(view)
-  );
-
-  // Handles background scroll action ("md" and up).
-  const handleBackgroundScroll = (overflowStyle: OVERFLOW_STYLE): void => {
-    if (bpUpMd) {
-      setElementsOverflowStyle(
-        [
-          document.querySelector(SELECTOR.BODY),
-          document.getElementById(SELECTOR.SIDEBAR_POSITIONER),
-        ],
-        overflowStyle
-      );
-    }
-  };
+  const selectCategoryViews = categoryViews.filter(isSelectCategoryView);
 
-  // Callback fired when the value is changed.
-  const onChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    setSearchTerm(event.target.value);
-  };
-
-  // Clear search
-  const onClearSearch = (): void => {
-    setSearchTerm("");
-  };
+  // Handles background scroll action.
+  const handleBackgroundScroll = useCallback(
+    (overflowStyle: OVERFLOW_STYLE): void => {
+      if (surfaceType === SURFACE_TYPE.POPPER_MENU) {
+        setElementsOverflowStyle(
+          [
+            document.querySelector(SELECTOR.BODY),
+            document.getElementById(SELECTOR.SIDEBAR_POSITIONER),
+          ],
+          overflowStyle
+        );
+      }
+    },
+    [surfaceType]
+  );
 
-  // Close search.
-  const onCloseSearch = (): void => {
+  const onClose = useCallback((): void => {
     setSearchTerm("");
     setOpen(false);
     handleBackgroundScroll(OVERFLOW_STYLE.NONE);
-  };
-
-  // Callback fired when the popup requests to be opened.
-  const onOpen = (): void => {
-    handleBackgroundScroll(OVERFLOW_STYLE.HIDDEN);
-  };
+    setTimeout(() => {
+      autocompleteRef.current?.querySelector("input")?.blur();
+    }, 100);
+  }, [handleBackgroundScroll]);
 
-  // Open search.
-  const onOpenSearch = (): void => {
-    if (open) {
-      return;
-    }
+  const onOpen = useCallback((): void => {
     setOpen(true);
-  };
-
-  useEffect(() => {
-    if (!open) {
-      autocompleteRef.current?.querySelector("input")?.blur();
-    }
-  }, [open]);
+    handleBackgroundScroll(OVERFLOW_STYLE.HIDDEN);
+  }, [handleBackgroundScroll]);
 
-  // Close search when filter drawer is closed.
-  useEffect(() => {
-    if (!isDrawerOpen) {
-      setSearchTerm("");
-      setOpen(false);
-    }
-  }, [isDrawerOpen]);
+  const onClear = useCallback((): void => {
+    setSearchTerm("");
+    if (surfaceType === SURFACE_TYPE.POPPER_DRAWER) onClose();
+  }, [onClose, surfaceType]);
 
   return (
-    <ListboxContext.Provider
+    <AutocompleteContext.Provider
       value={{
-        onClearSearch,
-        onCloseSearch,
+        onClear,
         onFilter,
         open,
         searchTerm,
         selectCategoryViews,
+        surfaceType,
       }}
     >
-      <Autocomplete
-        clearOnBlur={bpUpMd}
+      <StyledAutocomplete
+        className={className}
         data-testid={TEST_IDS.SEARCH_ALL_FILTERS}
         filterOptions={(options): string[] => options}
         freeSolo
-        ListboxComponent={Listbox}
-        onBlur={bpUpMd ? onCloseSearch : undefined}
-        onClose={bpUpMd ? onCloseSearch : undefined}
-        onFocus={onOpenSearch}
+        onClose={onClose}
+        onInputChange={(_, v = "") => setSearchTerm(v)}
         onOpen={onOpen}
         open={open}
         options={[""]} // Placeholder options, since item rendering is fully controlled by VariableSizeList
-        PopperComponent={AutocompletePopper}
         ref={autocompleteRef}
-        renderInput={(props): JSX.Element =>
-          renderInput({
-            ...props,
-            InputProps: {
-              ...props.InputProps,
-              endAdornment: <SearchCloseButton />,
-            },
-            inputProps: {
-              ...props.inputProps,
-              onChange,
-            },
-          })
+        renderInput={OutlinedInput}
+        slotProps={
+          surfaceType === SURFACE_TYPE.POPPER_MENU
+            ? POPPER_MENU_SLOT_PROPS
+            : POPPER_DRAWER_SLOT_PROPS
+        }
+        slots={
+          surfaceType === SURFACE_TYPE.POPPER_MENU
+            ? { listbox: Listbox, popper: StyledPopper }
+            : { listbox: Listbox, popper: StyledPopperDrawer }
         }
-        slotProps={bpUpMd ? DEFAULT_SLOT_PROPS : DRAWER_SLOT_PROPS}
+        value={searchTerm}
+        {...props}
       />
-    </ListboxContext.Provider>
+    </AutocompleteContext.Provider>
   );
 };

package/src/components/Filter/components/SearchAllFilters/stories/args.ts

@@ -0,0 +1,15 @@
+import { fn } from "@storybook/test";
+import { ComponentProps } from "react";
+import {
+  BIOLOGICAL_SEX,
+  DONOR_COUNT,
+  GENUS_SPECIES,
+} from "../../Filters/stories/constants";
+import { SURFACE_TYPE } from "../../surfaces/types";
+import { SearchAllFilters } from "../searchAllFilters";
+
+export const DEFAULT_ARGS: ComponentProps<typeof SearchAllFilters> = {
+  categoryViews: [BIOLOGICAL_SEX, GENUS_SPECIES, DONOR_COUNT],
+  onFilter: fn(),
+  surfaceType: SURFACE_TYPE.POPPER_MENU,
+};

package/src/components/Filter/components/SearchAllFilters/stories/searchAllFilters.stories.tsx

@@ -0,0 +1,29 @@
+import { Box } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
+import { SearchAllFilters } from "../searchAllFilters";
+import { DEFAULT_ARGS } from "./args";
+
+const meta: Meta<typeof SearchAllFilters> = {
+  component: SearchAllFilters,
+  decorators: [
+    (Story): JSX.Element => (
+      <Box sx={{ backgroundColor: PALETTE.COMMON_WHITE, minWidth: 264 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const DefaultStory = (): JSX.Element => {
+  return <SearchAllFilters {...DEFAULT_ARGS} />;
+};
+
+export const Default: Story = {
+  render: () => <DefaultStory />,
+};

package/src/components/Filter/components/SearchAllFilters/types.ts

@@ -0,0 +1,16 @@
+import { AutocompleteProps } from "@mui/material";
+import { CategoryView } from "../../../../common/categories/views/types";
+import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
+import { BaseComponentProps } from "../../../types";
+import { SURFACE_TYPE } from "../surfaces/types";
+
+export interface SearchAllFiltersProps
+  extends Omit<
+      AutocompleteProps<string, false, false, true>,
+      "options" | "renderInput"
+    >,
+    BaseComponentProps {
+  categoryViews: CategoryView[];
+  onFilter: OnFilterFn;
+  surfaceType?: SURFACE_TYPE;
+}

package/src/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/columnFiltersAdapter.tsx

@@ -1,5 +1,6 @@
 import { RowData } from "@tanstack/react-table";
 import { useCallback } from "react";
+import { VIEW_KIND } from "../../../../../../common/categories/views/types";
 import {
   CategoryKey,
   CategoryValueKey,
@@ -22,13 +23,23 @@ export const ColumnFiltersAdapter = <T extends RowData>({
       categoryKey: CategoryKey | ClearAll,
       selectedCategoryValue: CategoryValueKey,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars -- `selected` is not required by TanStack adapter.
-      _selected: boolean
+      _selected: boolean,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- `categorySection` is not required by TanStack adapter.
+      _categorySection?: string,
+      viewKind?: VIEW_KIND
     ) => {
       if (categoryKey === CLEAR_ALL) {
         table.resetColumnFilters();
         return;
       }
 
+      // Range filters use direct value assignment (e.g., [min, max] tuple for numeric ranges).
+      if (viewKind === VIEW_KIND.RANGE) {
+        table.getColumn(categoryKey)?.setFilterValue(selectedCategoryValue);
+        return;
+      }
+
+      // Select filters use an updater function to toggle individual values in/out of the filter array.
       table
         .getColumn(categoryKey)
         ?.setFilterValue(updater(selectedCategoryValue));

package/src/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/types.ts

@@ -1,7 +1,16 @@
-import { RowData, Table } from "@tanstack/react-table";
+import {
+  RowData,
+  Table,
+  TableMeta as TanStackTableMeta,
+} from "@tanstack/react-table";
+import { CategoryGroup } from "../../../../../../config/entities";
 import { SurfaceProps } from "../../../surfaces/types";
 
 export interface ColumnFiltersAdapterProps<T extends RowData> {
   renderSurface: (props: SurfaceProps) => JSX.Element | null;
   table: Table<T>;
 }
+export interface ColumnFiltersTableMeta<T extends RowData>
+  extends TanStackTableMeta<T> {
+  categoryGroups?: CategoryGroup[];
+}

package/src/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/utils.ts

@@ -1,9 +1,52 @@
 import { Column, RowData, Table } from "@tanstack/react-table";
+import { isRangeCategoryConfig } from "../../../../../../common/categories/config/range/typeGuards";
+import { CategoryConfig } from "../../../../../../common/categories/config/types";
+import { RangeCategoryView } from "../../../../../../common/categories/views/range/types";
 import { CategoryView } from "../../../../../../common/categories/views/types";
-import { SelectCategoryValueView } from "../../../../../../common/entities";
+import {
+  SelectCategoryValueView,
+  SelectCategoryView,
+} from "../../../../../../common/entities";
+import { CategoryGroup } from "../../../../../../config/entities";
 import { getColumnHeader } from "../../../../../Table/common/utils";
 import { getSortedFacetedValues } from "../../../../../Table/featureOptions/facetedColumn/utils";
+import { CategoryFilter } from "../../../Filters/filters";
 import { SurfaceProps } from "../../../surfaces/types";
+import { ColumnFiltersTableMeta } from "./types";
+
+/**
+ * Adapter for TanStack table to category configs.
+ * @param table - Table.
+ * @returns Category configs.
+ */
+function buildCategoryConfigs<T extends RowData>(
+  table: Table<T>
+): CategoryConfig[] {
+  return table
+    .getAllColumns()
+    .filter((column) => column.getCanFilter())
+    .map(mapCategoryConfig);
+}
+
+/**
+ * Adapter for TanStack table to category filters.
+ * @param table - Table.
+ * @param categoryGroups - Category groups.
+ * @returns Category filters.
+ */
+function buildCategoryFilters<T extends RowData>(
+  table: Table<T>,
+  categoryGroups: CategoryGroup[]
+): SurfaceProps["categoryFilters"] {
+  return categoryGroups.reduce<SurfaceProps["categoryFilters"]>(
+    (acc, categoryGroup) => {
+      const categoryFilter = mapCategoryFilter(table, categoryGroup);
+      if (categoryFilter) acc.push(categoryFilter);
+      return acc;
+    },
+    []
+  );
+}
 
 /**
  * Adapter for TanStack table column filters to category filters.
@@ -13,13 +56,19 @@ import { SurfaceProps } from "../../../surfaces/types";
 export function buildColumnFilters<T extends RowData>(
   table: Table<T>
 ): SurfaceProps["categoryFilters"] {
-  // Build the category views; single category filter.
-  const categoryViews = table
-    .getAllColumns()
-    .filter((column) => column.getCanFilter())
-    .map(mapColumnToCategoryView);
+  const { options } = table;
+  const { meta = {} } = options;
+  const { categoryGroups } = meta as ColumnFiltersTableMeta<T>;
 
-  return [{ categoryViews }];
+  if (!categoryGroups) {
+    // Build single category group with all (filterable) columns.
+    const categoryConfigs: CategoryConfig[] = buildCategoryConfigs(table);
+    // Build category filters from single category group.
+    return buildCategoryFilters(table, [{ categoryConfigs, label: "" }]);
+  }
+
+  // Build category filters from category groups.
+  return buildCategoryFilters(table, categoryGroups);
 }
 
 /**
@@ -39,14 +88,99 @@ export function getColumnFiltersCount<T extends RowData>(
 }
 
 /**
- * Adapter for TanStack column to category view.
- * Currently supports only select category views.
+ * Adapter for TanStack column to category config.
  * @param column - Column.
- * @returns Category view.
+ * @returns Category config.
  */
-function mapColumnToCategoryView<T extends RowData>(
+function mapCategoryConfig<T extends RowData>(
   column: Column<T>
-): CategoryView {
+): CategoryConfig {
+  return {
+    key: column.id,
+    label: getColumnHeader(column),
+  };
+}
+
+/**
+ * Adapter for TanStack table to category filter.
+ * @param table - Table.
+ * @param categoryGroup - Category group.
+ * @returns Category filter.
+ */
+function mapCategoryFilter<T extends RowData>(
+  table: Table<T>,
+  categoryGroup: CategoryGroup
+): CategoryFilter | undefined {
+  const { categoryConfigs, label } = categoryGroup;
+
+  const categoryViews = categoryConfigs.reduce<CategoryView[]>(
+    (acc, categoryConfig) => {
+      const column = table.getColumn(categoryConfig.key);
+      if (!column) return acc;
+      if (!column.getCanFilter()) return acc;
+
+      let categoryView: CategoryView;
+
+      if (isRangeCategoryConfig(categoryConfig)) {
+        // Build range category view.
+        categoryView = mapColumnToRangeCategoryView(column, categoryConfig);
+      } else {
+        // Build select category view.
+        categoryView = mapColumnToSelectCategoryView(column, categoryConfig);
+      }
+
+      return [...acc, categoryView];
+    },
+    []
+  );
+
+  if (categoryViews.length === 0) return;
+
+  return { categoryViews, label };
+}
+
+/**
+ * Adapter for TanStack column to range category view.
+ * @param column - Column.
+ * @param categoryConfig - Category config.
+ * @returns Range category view.
+ */
+function mapColumnToRangeCategoryView<T extends RowData>(
+  column: Column<T>,
+  categoryConfig?: CategoryConfig
+): RangeCategoryView {
+  const minMax = column.getFacetedMinMaxValues();
+  const isDisabled = !minMax;
+
+  // Selected values for the column.
+  const filterValue = (column.getFilterValue() || [null, null]) as [
+    number | null,
+    number | null
+  ];
+
+  return {
+    annotation: undefined,
+    isDisabled,
+    key: column.id,
+    label: getColumnHeader(column),
+    max: minMax?.[1] || Infinity,
+    min: minMax?.[0] || -Infinity,
+    selectedMax: filterValue[1],
+    selectedMin: filterValue[0],
+    ...categoryConfig,
+  };
+}
+
+/**
+ * Adapter for TanStack column to select category view.
+ * @param column - Column.
+ * @param categoryConfig - Category config.
+ * @returns Select category view.
+ */
+function mapColumnToSelectCategoryView<T extends RowData>(
+  column: Column<T>,
+  categoryConfig?: CategoryConfig
+): SelectCategoryView {
   const facetedUniqueValues = column.getFacetedUniqueValues();
   const isDisabled = facetedUniqueValues.size === 0;
   const values = mapColumnToSelectCategoryValueView(column);
@@ -57,6 +191,7 @@ function mapColumnToCategoryView<T extends RowData>(
     key: column.id,
     label: getColumnHeader(column),
     values,
+    ...categoryConfig,
   };
 }
 

package/src/components/Filter/components/surfaces/popper/Popper/popper.styles.ts

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import { Popper } from "@mui/material";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+
+export const StyledPopper = styled(Popper)`
+  .MuiPaper-root {
+    width: 368px;
+  }
+`;
+
+export const StyledPopperDrawer = styled(Popper)`
+  .MuiPaper-root {
+    background-color: ${PALETTE.SMOKE_LIGHT};
+    width: 312px;
+
+    .MuiList-root {
+      margin: 0;
+    }
+  }
+`;

package/src/components/Filter/components/surfaces/types.ts

@@ -10,4 +10,6 @@ export interface SurfaceProps {
 export enum SURFACE_TYPE {
   DRAWER = "DRAWER",
   MENU = "MENU",
+  POPPER_DRAWER = "POPPER_DRAWER",
+  POPPER_MENU = "POPPER_MENU",
 }

package/src/styles/common/mui/textField.ts

@@ -0,0 +1,33 @@
+import { TextFieldProps } from "@mui/material";
+
+type TextFieldPropsOptions = {
+  COLOR: typeof COLOR;
+  SIZE: typeof SIZE;
+  VARIANT: typeof VARIANT;
+};
+
+const COLOR: Record<string, TextFieldProps["color"]> = {
+  ERROR: "error",
+  INFO: "info",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SUCCESS: "success",
+  WARNING: "warning",
+} as const;
+
+const SIZE: Record<string, TextFieldProps["size"]> = {
+  MEDIUM: "medium",
+  SMALL: "small",
+} as const;
+
+const VARIANT: Record<string, TextFieldProps["variant"]> = {
+  FILLED: "filled",
+  OUTLINED: "outlined",
+  STANDARD: "standard",
+} as const;
+
+export const TEXT_FIELD_PROPS: TextFieldPropsOptions = {
+  COLOR,
+  SIZE,
+  VARIANT,
+};

package/src/views/ExploreView/exploreView.tsx

@@ -135,6 +135,9 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
             <SearchAllFilters
               categoryViews={categoryViews}
               onFilter={onFilterChange.bind(null, true)}
+              surfaceType={
+                mdDown ? SURFACE_TYPE.POPPER_DRAWER : SURFACE_TYPE.POPPER_MENU
+              }
             />
           </SidebarTools>
           <Filters

package/lib/components/Filter/components/SearchAllFilters/components/AutocompletePopper/autocompletePopper.styles.d.ts

@@ -1,3 +0,0 @@
-export declare const AutocompletePopper: import("@emotion/styled").StyledComponent<import("@mui/material").PopperProps & import("react").RefAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;

package/lib/components/Filter/components/SearchAllFilters/components/AutocompletePopper/autocompletePopper.styles.js

@@ -1,15 +0,0 @@
-import styled from "@emotion/styled";
-import { Popper as MPopper } from "@mui/material";
-import { PALETTE } from "../../../../../../styles/common/constants/palette";
-import { bpDownMd } from "../../../../../../styles/common/mixins/breakpoints";
-export const AutocompletePopper = styled(MPopper) `
-  ${bpDownMd} {
-    .MuiPaper-root {
-      background-color: ${PALETTE.SMOKE_LIGHT};
-
-      .MuiList-root {
-        margin: 0;
-      }
-    }
-  }
-`;

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { SearchAllFilters } from "./searchAllFilters";
-declare const _default: Meta<typeof SearchAllFilters>;
-export default _default;
-type Story = StoryObj<typeof SearchAllFilters>;
-export declare const SearchAllFiltersStory: Story;