@databiosphere/findable-ui 29.0.2 → 31.0.0

package/src/components/Filter/components/FilterRange/filterRange.tsx

@@ -2,6 +2,7 @@ import {
   Button,
   Divider,
   FormControl,
+  FormHelperText,
   Grid,
   InputLabel,
   OutlinedInput,
@@ -10,62 +11,133 @@ import {
 } from "@mui/material";
 import React, { Fragment } from "react";
 import { TEST_IDS } from "../../../../tests/testIds";
+import { SouthIcon } from "../../../common/CustomIcon/components/SouthIcon/southIcon";
+import {
+  FilterViewTools,
+  StyledButtonBase,
+} from "../FilterMenu/filterMenu.styles";
 import {
   BUTTON_PROPS,
   DIVIDER_PROPS,
   INPUT_LABEL_PROPS,
   INPUT_PROPS,
-  RANGE_OPERATOR_DISPLAY,
   TOGGLE_BUTTON_GROUP_PROPS,
 } from "./constants";
 import { StyledForm } from "./filterRange.styles";
+import { FIELD_NAME } from "./hooks/UseFilterRange/constants";
 import { useFilterRange } from "./hooks/UseFilterRange/hook";
-import { FilterRangeProps, RANGE_OPERATOR } from "./types";
+import { RANGE_OPERATOR } from "./hooks/UseFilterRange/types";
+import { FilterRangeProps } from "./types";
+import { getRangeOperator } from "./utils";
 
-export const FilterRange = ({ className }: FilterRangeProps): JSX.Element => {
-  const { onChange, onSubmit, value } = useFilterRange();
+export const FilterRange = ({
+  categoryKey,
+  categoryLabel,
+  categorySection,
+  className,
+  isFilterDrawer,
+  max,
+  min,
+  onCloseFilter,
+  onFilter,
+  selectedMax,
+  selectedMin,
+  unit,
+}: FilterRangeProps): JSX.Element => {
+  const rangeOperator = getRangeOperator({ selectedMax, selectedMin });
+  const {
+    clearErrors,
+    formState: { errors },
+    handleSubmit,
+    onChange,
+    value,
+  } = useFilterRange(rangeOperator);
   return (
-    <StyledForm
-      className={className}
-      data-testid={TEST_IDS.FILTER_RANGE}
-      onSubmit={onSubmit}
-    >
-      <ToggleButtonGroup
-        {...TOGGLE_BUTTON_GROUP_PROPS}
-        onChange={onChange}
-        value={value}
+    <Fragment>
+      {isFilterDrawer && (
+        <FilterViewTools>
+          <StyledButtonBase onClick={onCloseFilter}>
+            <SouthIcon fontSize="small" />
+            {categoryLabel}
+          </StyledButtonBase>
+        </FilterViewTools>
+      )}
+      <StyledForm
+        className={className}
+        data-testid={TEST_IDS.FILTER_RANGE}
+        onSubmit={handleSubmit(onFilter, {
+          categoryKey,
+          categorySection,
+        })}
       >
-        <ToggleButton value={RANGE_OPERATOR.BETWEEN}>Between</ToggleButton>
-        <ToggleButton value={RANGE_OPERATOR.LESS_THAN}>Less Than</ToggleButton>
-        <Divider {...DIVIDER_PROPS} />
-        <ToggleButton value={RANGE_OPERATOR.GREATER_THAN}>
-          Greater Than
-        </ToggleButton>
-      </ToggleButtonGroup>
-      <Grid>
-        <FormControl>
-          <InputLabel {...INPUT_LABEL_PROPS} htmlFor={value}>
-            {RANGE_OPERATOR_DISPLAY[value]}
-          </InputLabel>
-          <OutlinedInput {...INPUT_PROPS} name={value} placeholder="eg. 1" />
-        </FormControl>
-        {value === RANGE_OPERATOR.BETWEEN && (
-          <Fragment>
-            <Divider />
-            <FormControl>
-              <InputLabel {...INPUT_LABEL_PROPS} htmlFor="between-to">
-                To
+        <ToggleButtonGroup
+          {...TOGGLE_BUTTON_GROUP_PROPS}
+          onChange={(e, value) => {
+            clearErrors();
+            onChange?.(e, value);
+          }}
+          value={value}
+        >
+          <ToggleButton value={RANGE_OPERATOR.BETWEEN}>Between</ToggleButton>
+          <ToggleButton value={RANGE_OPERATOR.LESS_THAN}>
+            Less Than
+          </ToggleButton>
+          <Divider {...DIVIDER_PROPS} />
+          <ToggleButton value={RANGE_OPERATOR.GREATER_THAN}>
+            Greater Than
+          </ToggleButton>
+        </ToggleButtonGroup>
+        <Grid>
+          {value !== RANGE_OPERATOR.LESS_THAN && (
+            <FormControl error={!!errors[FIELD_NAME.MIN]}>
+              <InputLabel {...INPUT_LABEL_PROPS} htmlFor={FIELD_NAME.MIN}>
+                {value === RANGE_OPERATOR.BETWEEN ? "Min" : "Greater Than"}
+                {unit && ` (${unit})`}
+              </InputLabel>
+              <OutlinedInput
+                {...INPUT_PROPS}
+                defaultValue={selectedMin}
+                id={FIELD_NAME.MIN}
+                name={FIELD_NAME.MIN}
+                onFocus={clearErrors}
+                placeholder="eg. 1"
+              />
+              <FormHelperText>
+                {errors[FIELD_NAME.MIN]
+                  ? errors[FIELD_NAME.MIN]
+                  : value === RANGE_OPERATOR.BETWEEN
+                  ? `Min allowed: ${min}`
+                  : `Allowed values: \u2265 ${min} and \u2264 ${max}`}
+              </FormHelperText>
+            </FormControl>
+          )}
+          {value === RANGE_OPERATOR.BETWEEN && <Divider />}
+          {value !== RANGE_OPERATOR.GREATER_THAN && (
+            <FormControl error={!!errors[FIELD_NAME.MAX]}>
+              <InputLabel {...INPUT_LABEL_PROPS} htmlFor={FIELD_NAME.MAX}>
+                {value === RANGE_OPERATOR.BETWEEN ? "Max" : "Less Than"}
+                {unit && ` (${unit})`}
               </InputLabel>
               <OutlinedInput
                 {...INPUT_PROPS}
-                name="between-to"
-                placeholder="eg. 2"
+                defaultValue={selectedMax}
+                id={FIELD_NAME.MAX}
+                name={FIELD_NAME.MAX}
+                onFocus={clearErrors}
+                placeholder="eg. 20"
               />
+              <FormHelperText color="inkLight">
+                {errors[FIELD_NAME.MAX]
+                  ? errors[FIELD_NAME.MAX]
+                  : value === RANGE_OPERATOR.BETWEEN
+                  ? `Max allowed: ${max}`
+                  : `Allowed values: \u2265 ${min} and \u2264 ${max}`}
+              </FormHelperText>
             </FormControl>
-          </Fragment>
-        )}
-      </Grid>
-      <Button {...BUTTON_PROPS}>Filter</Button>
-    </StyledForm>
+          )}
+        </Grid>
+        <Button {...BUTTON_PROPS}>Filter</Button>
+      </StyledForm>
+    </Fragment>
   );
 };

package/src/components/Filter/components/FilterRange/hooks/UseFilterRange/constants.ts

@@ -0,0 +1,5 @@
+export const FIELD_NAME = {
+  MAX: "max",
+  MIN: "min",
+  RANGE_OPERATOR: "rangeOperator",
+};

package/src/components/Filter/components/FilterRange/hooks/UseFilterRange/hook.ts

@@ -1,20 +1,61 @@
-import { FormEvent, useCallback } from "react";
+import { FormEvent, useCallback, useState } from "react";
+import { ValidationError } from "yup";
+import { VIEW_KIND } from "../../../../../../common/categories/views/types";
 import { useToggleButtonGroup } from "../../../../../common/ToggleButtonGroup/hooks/UseToggleButtonGroup/hook";
-import { RANGE_OPERATOR } from "../../types";
-import { UseFilterRange } from "./types";
+import { SCHEMA } from "./schema";
+import {
+  FieldErrors,
+  OnSubmitFn,
+  RANGE_OPERATOR,
+  SubmitParams,
+  UseFilterRange,
+} from "./types";
+import { getFormValues } from "./utils";
 
-export const useFilterRange = (): UseFilterRange => {
-  const { onChange, value } = useToggleButtonGroup<RANGE_OPERATOR>(
-    RANGE_OPERATOR.BETWEEN
-  );
+export const useFilterRange = (
+  initialValue: RANGE_OPERATOR = RANGE_OPERATOR.BETWEEN
+): UseFilterRange => {
+  const [errors, setErrors] = useState<FieldErrors>({});
+  const { onChange, value } =
+    useToggleButtonGroup<RANGE_OPERATOR>(initialValue);
 
-  const onSubmit = useCallback((e: FormEvent) => {
-    e.preventDefault();
+  const clearErrors = useCallback(() => {
+    setErrors({});
   }, []);
 
+  const handleSubmit = useCallback(
+    (onSubmit: OnSubmitFn, parameters: SubmitParams) => {
+      return (e: FormEvent<HTMLFormElement>): void => {
+        e.preventDefault();
+        const fieldValues = getFormValues(e.currentTarget, value); // `value` is current range operator.
+        SCHEMA.validate(fieldValues, { abortEarly: false })
+          .then((result) => {
+            setErrors({});
+            onSubmit(
+              parameters.categoryKey,
+              [result.min, result.max],
+              true,
+              parameters.categorySection,
+              VIEW_KIND.RANGE
+            );
+          })
+          .catch((validationError: ValidationError) => {
+            const fieldErrors: FieldErrors = {};
+            for (const error of validationError.inner) {
+              if (error.path) fieldErrors[error.path] = error.message;
+            }
+            setErrors(fieldErrors);
+          });
+      };
+    },
+    [value]
+  );
+
   return {
+    clearErrors,
+    formState: { errors },
+    handleSubmit,
     onChange,
-    onSubmit,
     value,
   };
 };

package/src/components/Filter/components/FilterRange/hooks/UseFilterRange/schema.ts

@@ -0,0 +1,60 @@
+import { mixed, number, object } from "yup";
+import { FIELD_NAME } from "./constants";
+import { RANGE_OPERATOR } from "./types";
+
+export const SCHEMA = object({
+  [FIELD_NAME.MAX]: number()
+    .typeError("Value must be a number")
+    .when(FIELD_NAME.RANGE_OPERATOR, {
+      is: RANGE_OPERATOR.BETWEEN,
+      then: (schema) => schema.notRequired(),
+    })
+    .when(FIELD_NAME.RANGE_OPERATOR, {
+      is: RANGE_OPERATOR.LESS_THAN,
+      then: (schema) => schema.required("Value is required"),
+    })
+    .when(FIELD_NAME.RANGE_OPERATOR, {
+      is: RANGE_OPERATOR.GREATER_THAN,
+      then: (schema) => schema.notRequired(),
+    }),
+  [FIELD_NAME.MIN]: number()
+    .typeError("Value must be a number")
+    .when(FIELD_NAME.RANGE_OPERATOR, {
+      is: RANGE_OPERATOR.BETWEEN,
+      then: (schema) =>
+        schema
+          .notRequired()
+          .test(
+            "min-less-than-max",
+            "Min must be less than max",
+            function (min) {
+              const max = this.parent[FIELD_NAME.MAX];
+              // If either value is not a number, skip validation.
+              if (!min || !max) return true;
+              if (Number.isNaN(min) || Number.isNaN(max)) return true;
+              return min < max;
+            }
+          )
+          .test(
+            "at-least-min-or-max",
+            "Min or Max is required",
+            function (min) {
+              const max = this.parent[FIELD_NAME.MAX];
+              // If both values are null, validation fails.
+              return !(min === null && max === null);
+            }
+          ),
+    })
+    .when(FIELD_NAME.RANGE_OPERATOR, {
+      is: RANGE_OPERATOR.LESS_THAN,
+      then: (schema) => schema.notRequired(),
+    })
+    .when(FIELD_NAME.RANGE_OPERATOR, {
+      is: RANGE_OPERATOR.GREATER_THAN,
+      otherwise: (schema) => schema.notRequired(),
+      then: (schema) => schema.required("Value is required"),
+    }),
+  [FIELD_NAME.RANGE_OPERATOR]: mixed<RANGE_OPERATOR>().default(
+    RANGE_OPERATOR.BETWEEN
+  ),
+});

package/src/components/Filter/components/FilterRange/hooks/UseFilterRange/types.ts

@@ -1,9 +1,40 @@
 import { ToggleButtonGroupProps } from "@mui/material";
-import { FormEvent } from "react";
-import { RANGE_OPERATOR } from "../../types";
+import { OnFilterFn } from "hooks/useCategoryFilter";
+import { FormEventHandler } from "react";
+import { FIELD_NAME } from "./constants";
+
+export type FieldErrors = Partial<Record<FieldName, string>>;
+
+export type FieldName = (typeof FIELD_NAME)[keyof typeof FIELD_NAME];
+
+export interface FieldValues {
+  max: FormDataEntryValue | null;
+  min: FormDataEntryValue | null;
+  rangeOperator: RANGE_OPERATOR;
+}
+
+export type OnSubmitFn = OnFilterFn;
+
+export type OnSubmitParams = Parameters<OnSubmitFn>;
+
+export enum RANGE_OPERATOR {
+  BETWEEN = "between",
+  GREATER_THAN = "greaterThan",
+  LESS_THAN = "lessThan",
+}
+
+export type SubmitParams = {
+  categoryKey: OnSubmitParams[0];
+  categorySection?: OnSubmitParams[3];
+};
 
 export interface UseFilterRange {
+  clearErrors: () => void;
+  formState: { errors: FieldErrors };
+  handleSubmit: (
+    onSubmit: OnSubmitFn,
+    parameters: SubmitParams
+  ) => FormEventHandler;
   onChange: ToggleButtonGroupProps["onChange"];
-  onSubmit: (e: FormEvent) => void;
   value: RANGE_OPERATOR;
 }

package/src/components/Filter/components/FilterRange/hooks/UseFilterRange/utils.ts

@@ -0,0 +1,32 @@
+import { FieldValues, RANGE_OPERATOR } from "./types";
+
+/**
+ * Retrieves the min and max field values from a form.
+ * @param e - The form element to retrieve values from.
+ * @param rangeOperator - The range operator value in use.
+ * @returns The values from the form.
+ */
+export function getFormValues(
+  e: HTMLFormElement,
+  rangeOperator: RANGE_OPERATOR
+): FieldValues {
+  const formData = new FormData(e);
+  const fieldValues = {} as FieldValues;
+  fieldValues.max = parseMinMaxValue(formData.get("max"));
+  fieldValues.min = parseMinMaxValue(formData.get("min"));
+  fieldValues.rangeOperator = rangeOperator;
+  return fieldValues;
+}
+
+/**
+ * Parses a form data value null or empty string to null.
+ * Schema validation will handle the rest.
+ * @param value - The value to parse.
+ * @returns The parsed value, or null if the value is null or empty string.
+ */
+export function parseMinMaxValue(
+  value: FormDataEntryValue | null
+): FormDataEntryValue | null {
+  if (value === null || value === "") return null;
+  return value;
+}

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

@@ -0,0 +1,16 @@
+import { fn } from "@storybook/test";
+import { ComponentProps } from "react";
+import { FilterRange } from "../filterRange";
+
+export const DEFAULT_ARGS: ComponentProps<typeof FilterRange> = {
+  categoryKey: "Weight",
+  categoryLabel: "Weight",
+  isFilterDrawer: false,
+  max: 2100,
+  min: 100,
+  onCloseFilter: fn(),
+  onFilter: fn(),
+  selectedMax: null,
+  selectedMin: null,
+  unit: "kg",
+};

package/src/components/Filter/components/FilterRange/stories/filterRange.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { FilterRange } from "../filterRange";
+import { DEFAULT_ARGS } from "./args";
 
 const meta: Meta<typeof FilterRange> = {
-  args: {},
   component: FilterRange,
 };
 
@@ -11,5 +11,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {},
+  args: DEFAULT_ARGS,
 };

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

@@ -1,9 +1,15 @@
+import { RangeCategoryView } from "../../../../common/categories/views/range/types";
+import { CategoryKey } from "../../../../common/entities";
+import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { BaseComponentProps } from "../../../types";
 
-export interface FilterRangeProps extends BaseComponentProps {}
-
-export enum RANGE_OPERATOR {
-  BETWEEN = "between",
-  GREATER_THAN = "greaterThan",
-  LESS_THAN = "lessThan",
+export interface FilterRangeProps
+  extends Omit<RangeCategoryView, "key" | "label">,
+    BaseComponentProps {
+  categoryKey: CategoryKey;
+  categoryLabel: string;
+  categorySection?: string;
+  isFilterDrawer: boolean;
+  onCloseFilter: () => void;
+  onFilter: OnFilterFn;
 }

package/src/components/Filter/components/FilterRange/utils.ts

@@ -0,0 +1,16 @@
+import { RangeCategoryView } from "../../../../common/categories/views/range/types";
+import { RANGE_OPERATOR } from "./hooks/UseFilterRange/types";
+
+/**
+ * Returns the range operator based on the selected values.
+ * @param categoryView - View model of range category.
+ * @returns The range operator or undefined if no valid range is selected.
+ */
+export function getRangeOperator(
+  categoryView: Pick<RangeCategoryView, "selectedMax" | "selectedMin">
+): RANGE_OPERATOR | undefined {
+  const { selectedMax, selectedMin } = categoryView;
+  if (selectedMin && selectedMax) return RANGE_OPERATOR.BETWEEN;
+  if (selectedMin) return RANGE_OPERATOR.GREATER_THAN;
+  if (selectedMax) return RANGE_OPERATOR.LESS_THAN;
+}

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

@@ -0,0 +1,22 @@
+import { fn } from "@storybook/test";
+import { ComponentProps } from "react";
+import { LOREM_IPSUM } from "storybook/loremIpsum";
+import { FilterTag } from "../filterTag";
+
+export const DEFAULT_ARGS: ComponentProps<typeof FilterTag> = {
+  label: "male",
+  onRemove: fn(),
+  superseded: false,
+};
+
+export const WITH_ELLIPSIS_ARGS: ComponentProps<typeof FilterTag> = {
+  label: LOREM_IPSUM.LONG,
+  onRemove: fn(),
+  superseded: false,
+};
+
+export const WITH_RANGE_ARGS: ComponentProps<typeof FilterTag> = {
+  label: "10 - 34",
+  onRemove: fn(),
+  superseded: false,
+};

package/src/components/Filter/components/FilterTag/stories/filterTag.stories.tsx

@@ -0,0 +1,32 @@
+import { Box } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { FilterTag } from "../filterTag";
+import { DEFAULT_ARGS, WITH_ELLIPSIS_ARGS, WITH_RANGE_ARGS } from "./args";
+
+const meta: Meta<typeof FilterTag> = {
+  component: FilterTag,
+  decorators: [
+    (Story): JSX.Element => (
+      <Box sx={{ width: 232 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: DEFAULT_ARGS,
+};
+
+export const WithEllipsis: Story = {
+  args: WITH_ELLIPSIS_ARGS,
+};
+
+export const WithRange: Story = {
+  args: WITH_RANGE_ARGS,
+};

package/src/components/Filter/components/FilterTag/utils.ts

@@ -0,0 +1,57 @@
+import { RangeCategoryView } from "../../../../common/categories/views/range/types";
+import { VIEW_KIND } from "../../../../common/categories/views/types";
+import { CategoryTag } from "../../../../common/entities";
+import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
+import { RANGE_OPERATOR } from "../FilterRange/hooks/UseFilterRange/types";
+import { getRangeOperator } from "../FilterRange/utils";
+
+/**
+ * Returns set of filter tags with tag label (the selected range values) and corresponding Tag onRemove function.
+ * @param categoryView - View model of range category.
+ * @param onFilter - Function to execute on selection or removal of category value.
+ * @returns Array of selected filter tags.
+ */
+export function buildRangeTag(
+  categoryView: RangeCategoryView,
+  onFilter: OnFilterFn
+): CategoryTag[] {
+  const rangeOperator = getRangeOperator(categoryView);
+  if (!rangeOperator) return [];
+  return [
+    {
+      label: buildRangeTagLabel(categoryView, rangeOperator),
+      onRemove: () =>
+        onFilter(
+          categoryView.key,
+          undefined,
+          false,
+          undefined,
+          VIEW_KIND.RANGE
+        ),
+      superseded: false,
+    },
+  ];
+}
+
+/**
+ * Returns the label for the range tag based on the selected values.
+ * @param categoryView - View model of range category.
+ * @param rangeOperator - The range operator.
+ * @returns The label for the range tag.
+ */
+function buildRangeTagLabel(
+  categoryView: RangeCategoryView,
+  rangeOperator: RANGE_OPERATOR
+): string {
+  const { selectedMax, selectedMin } = categoryView;
+  switch (rangeOperator) {
+    case RANGE_OPERATOR.BETWEEN:
+      return `${selectedMin} - ${selectedMax}`;
+    case RANGE_OPERATOR.GREATER_THAN:
+      return `> ${selectedMin}`;
+    case RANGE_OPERATOR.LESS_THAN:
+      return `< ${selectedMax}`;
+    default:
+      return "";
+  }
+}

package/src/components/Filter/components/Filters/filters.tsx

@@ -1,6 +1,8 @@
 import { Divider } from "@mui/material";
 import React, { Fragment, useEffect, useRef, useState } from "react";
-import { CategoryTag, SelectCategoryView } from "../../../../common/entities";
+import { isRangeCategoryView } from "../../../../common/categories/views/range/typeGuards";
+import { CategoryView } from "../../../../common/categories/views/types";
+import { CategoryTag } from "../../../../common/entities";
 import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import {
   BREAKPOINT_FN_NAME,
@@ -11,11 +13,12 @@ import { useWindowResize } from "../../../../hooks/useWindowResize";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { Filter } from "../Filter/filter";
+import { buildRangeTag } from "../FilterTag/utils";
 import { FilterTags } from "../FilterTags/filterTags";
 import { CategoryViewsLabel, Filters as FilterList } from "./filters.styles";
 
 export interface CategoryFilter {
-  categoryViews: SelectCategoryView[];
+  categoryViews: CategoryView[];
   label?: string;
 }
 
@@ -28,15 +31,21 @@ export interface FiltersProps {
 }
 
 /**
- * Returns set of selected category tags with tag label (the selected metadata label) and corresponding Tag onRemove function.
+ * Returns filter tags for the given category view.
  * @param categoryView - View model of category to display.
- * @param onFilter - Function to execute on select of category value or remove of selected category value.
- * @returns Array of selected category tags.
+ * @param onFilter - Function to execute on selection or removal of category value.
+ * @returns Array of filter tags.
  */
-function buildSelectCategoryTags(
-  categoryView: SelectCategoryView,
+function buildFilterTags(
+  categoryView: CategoryView,
   onFilter: OnFilterFn
 ): CategoryTag[] {
+  // Handle range category views
+  if (isRangeCategoryView(categoryView)) {
+    return buildRangeTag(categoryView, onFilter);
+  }
+
+  // Handle select category views.
   const { key: categoryKey, values } = categoryView;
   return values
     .filter(({ selected }) => selected)
@@ -50,16 +59,16 @@ function buildSelectCategoryTags(
 }
 
 /**
- * Build selected filter tags element for the given category type.
+ * Returns filter tags element for the given category view.
  * @param categoryView - View model of category to display.
- * @param onFilter - Function to execute on select of category value or remove of selected category value.
- * @returns Filter tags element displaying selected category values.
+ * @param onFilter - Function to execute on selection or removal of category value.
+ * @returns Filter tags element.
  */
 function renderFilterTags(
-  categoryView: SelectCategoryView,
+  categoryView: CategoryView,
   onFilter: OnFilterFn
 ): JSX.Element {
-  const tags = buildSelectCategoryTags(categoryView, onFilter);
+  const tags = buildFilterTags(categoryView, onFilter);
   return <FilterTags tags={tags} />;
 }