@databiosphere/findable-ui 43.0.0 → 44.0.0

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

@@ -7,9 +7,10 @@ import {
   SelectCategoryValueView,
   SelectCategoryView,
 } from "../../../../../../common/entities";
+import { FILTER_SORT } from "../../../../../../common/filters/sort/config/types";
+import { sortCategoryValueViews } from "../../../../../../common/filters/sort/models/utils";
 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";
@@ -31,16 +32,22 @@ function buildCategoryConfigs<T extends RowData>(
 /**
  * Adapter for TanStack table to category filters.
  * @param table - Table.
+ * @param filterSort - Filter sort.
  * @param categoryGroups - Category groups.
  * @returns Category filters.
  */
 function buildCategoryFilters<T extends RowData>(
   table: Table<T>,
+  filterSort: FILTER_SORT,
   categoryGroups: CategoryGroup[]
 ): SurfaceProps["categoryFilters"] {
   return categoryGroups.reduce<SurfaceProps["categoryFilters"]>(
     (acc, categoryGroup) => {
-      const categoryFilter = mapCategoryFilter(table, categoryGroup);
+      const categoryFilter = mapCategoryFilter(
+        table,
+        filterSort,
+        categoryGroup
+      );
       if (categoryFilter) acc.push(categoryFilter);
       return acc;
     },
@@ -51,10 +58,12 @@ function buildCategoryFilters<T extends RowData>(
 /**
  * Adapter for TanStack table column filters to category filters.
  * @param table - Table.
+ * @param filterSort - Filter sort.
  * @returns Category filters.
  */
 export function buildColumnFilters<T extends RowData>(
-  table: Table<T>
+  table: Table<T>,
+  filterSort = FILTER_SORT.ALPHA
 ): SurfaceProps["categoryFilters"] {
   const { options } = table;
   const { meta = {} } = options;
@@ -64,11 +73,13 @@ export function buildColumnFilters<T extends RowData>(
     // 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: "" }]);
+    return buildCategoryFilters(table, filterSort, [
+      { categoryConfigs, label: "" },
+    ]);
   }
 
   // Build category filters from category groups.
-  return buildCategoryFilters(table, categoryGroups);
+  return buildCategoryFilters(table, filterSort, categoryGroups);
 }
 
 /**
@@ -104,11 +115,13 @@ function mapCategoryConfig<T extends RowData>(
 /**
  * Adapter for TanStack table to category filter.
  * @param table - Table.
+ * @param filterSort - Filter sort.
  * @param categoryGroup - Category group.
  * @returns Category filter.
  */
 function mapCategoryFilter<T extends RowData>(
   table: Table<T>,
+  filterSort: FILTER_SORT,
   categoryGroup: CategoryGroup
 ): CategoryFilter | undefined {
   const { categoryConfigs, label } = categoryGroup;
@@ -126,7 +139,11 @@ function mapCategoryFilter<T extends RowData>(
         categoryView = mapColumnToRangeCategoryView(column, categoryConfig);
       } else {
         // Build select category view.
-        categoryView = mapColumnToSelectCategoryView(column, categoryConfig);
+        categoryView = mapColumnToSelectCategoryView(
+          column,
+          filterSort,
+          categoryConfig
+        );
       }
 
       return [...acc, categoryView];
@@ -174,16 +191,18 @@ function mapColumnToRangeCategoryView<T extends RowData>(
 /**
  * Adapter for TanStack column to select category view.
  * @param column - Column.
+ * @param filterSort - Filter sort.
  * @param categoryConfig - Category config.
  * @returns Select category view.
  */
 function mapColumnToSelectCategoryView<T extends RowData>(
   column: Column<T>,
+  filterSort: FILTER_SORT,
   categoryConfig?: CategoryConfig
 ): SelectCategoryView {
   const facetedUniqueValues = column.getFacetedUniqueValues();
   const isDisabled = facetedUniqueValues.size === 0;
-  const values = mapColumnToSelectCategoryValueView(column);
+  const values = mapColumnToSelectCategoryValueView(column, filterSort);
   return {
     annotation: undefined,
     enableChartView: false,
@@ -198,22 +217,24 @@ function mapColumnToSelectCategoryView<T extends RowData>(
 /**
  * Adapter for TanStack column to select category value view.
  * @param column - Column.
+ * @param filterSort - Filter sort.
  * @returns Select category value view.
  */
 function mapColumnToSelectCategoryValueView<T extends RowData>(
-  column: Column<T>
+  column: Column<T>,
+  filterSort: FILTER_SORT
 ): SelectCategoryValueView[] {
   // Get the faceted unique values and sort them.
   const facetedUniqueValues = column.getFacetedUniqueValues();
-  const sortedFacetsValues = getSortedFacetedValues(facetedUniqueValues);
 
   // Selected values for the column.
   const filterValue = (column.getFilterValue() || []) as unknown[];
 
   // Build the select category values.
-  const selectCategoryValues: SelectCategoryValueView[] = [];
-  for (const [label, count] of sortedFacetsValues) {
-    selectCategoryValues.push({
+  const categoryValueViews: SelectCategoryValueView[] = [];
+
+  for (const [label, count] of [...facetedUniqueValues]) {
+    categoryValueViews.push({
       count,
       key: String(label),
       label: String(label),
@@ -221,5 +242,7 @@ function mapColumnToSelectCategoryValueView<T extends RowData>(
     });
   }
 
-  return selectCategoryValues;
+  sortCategoryValueViews(categoryValueViews, filterSort);
+
+  return categoryValueViews;
 }

package/src/components/Filter/components/controls/Controls/components/FilterSort/constants.ts

@@ -0,0 +1,22 @@
+import { ListItemTextProps, MenuProps, SvgIconProps } from "@mui/material";
+import { SVG_ICON_PROPS as MUI_SVG_ICON_PROPS } from "../../../../../../../styles/common/mui/svgIcon";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+
+export const LIST_ITEM_BUTTON_TEXT_PROPS: ListItemTextProps = {
+  slotProps: { primary: { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 } },
+};
+
+export const LIST_ITEM_TEXT_PROPS: ListItemTextProps = {
+  slotProps: { primary: { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_500 } },
+};
+
+export const MENU_PROPS: Omit<MenuProps, "anchorEl" | "onClose" | "open"> = {
+  anchorOrigin: { horizontal: "left", vertical: "bottom" },
+  marginThreshold: 8,
+  slotProps: { paper: { variant: "menu" } },
+  transformOrigin: { horizontal: "left", vertical: "top" },
+};
+
+export const SVG_ICON_PROPS: SvgIconProps = {
+  fontSize: MUI_SVG_ICON_PROPS.FONT_SIZE.SMALL,
+};

package/src/components/Filter/components/controls/Controls/components/FilterSort/filterSort.styles.ts

@@ -0,0 +1,34 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import {
+  IconButton,
+  Menu,
+  MenuProps,
+  menuClasses,
+  paperClasses,
+} from "@mui/material";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
+import { MuiListItemButtonRoot } from "../../../../FilterList/filterList.styles";
+
+export const StyledIconButton = styled(IconButton)<Pick<MenuProps, "open">>`
+  align-self: center;
+  padding: 0;
+
+  ${({ open }) =>
+    open &&
+    css`
+      color: ${PALETTE.INK_MAIN};
+    `}
+`;
+
+export const StyledMenu = styled(Menu)`
+  .${paperClasses.root} {
+    margin: 4px 0;
+    max-width: 300px;
+    width: 100%;
+
+    .${menuClasses.list} {
+      ${MuiListItemButtonRoot}
+    }
+  }
+`;

package/src/components/Filter/components/controls/Controls/components/FilterSort/filterSort.tsx

@@ -0,0 +1,73 @@
+import { SettingsOutlined } from "@mui/icons-material";
+import { ListItem, ListItemButton, ListItemText, Radio } from "@mui/material";
+import React, { Fragment } from "react";
+import { FILTER_SORT } from "../../../../../../../common/filters/sort/config/types";
+import { ICON_BUTTON_PROPS } from "../../../../../../../styles/common/mui/iconButton";
+import { TEST_IDS } from "../../../../../../../tests/testIds";
+import { RadioCheckedIcon } from "../../../../../../common/CustomIcon/components/RadioCheckedIcon/radioCheckedIcon";
+import { RadioUncheckedIcon } from "../../../../../../common/CustomIcon/components/RadioUncheckedIcon/radioUncheckedIcon";
+import { useMenu } from "../../../../../../common/Menu/hooks/useMenu";
+import {
+  LIST_ITEM_BUTTON_TEXT_PROPS,
+  LIST_ITEM_TEXT_PROPS,
+  MENU_PROPS,
+  SVG_ICON_PROPS,
+} from "./constants";
+import { StyledIconButton, StyledMenu } from "./filterSort.styles";
+import { FilterSortProps } from "./types";
+
+export const FilterSort = ({
+  enabled = false,
+  filterSort = FILTER_SORT.ALPHA,
+  onFilterSortChange,
+}: FilterSortProps): JSX.Element | null => {
+  const { anchorEl, onClose, onOpen, open } = useMenu();
+
+  if (!enabled || !onFilterSortChange) return null;
+
+  return (
+    <Fragment>
+      <StyledIconButton
+        color={ICON_BUTTON_PROPS.COLOR.INK_LIGHT}
+        data-testid={TEST_IDS.FILTER_SORT_BUTTON}
+        onClick={onOpen}
+        open={open}
+      >
+        <SettingsOutlined {...SVG_ICON_PROPS} />
+      </StyledIconButton>
+      <StyledMenu
+        {...MENU_PROPS}
+        anchorEl={anchorEl}
+        data-testid={TEST_IDS.FILTER_SORT_MENU}
+        onClose={onClose}
+        open={open}
+      >
+        <ListItem>
+          <ListItemText {...LIST_ITEM_TEXT_PROPS}>
+            Sort Filter Values By
+          </ListItemText>
+        </ListItem>
+        <ListItemButton onClick={() => onFilterSortChange(FILTER_SORT.ALPHA)}>
+          <Radio
+            checked={filterSort === FILTER_SORT.ALPHA}
+            checkedIcon={<RadioCheckedIcon {...SVG_ICON_PROPS} />}
+            icon={<RadioUncheckedIcon {...SVG_ICON_PROPS} />}
+          />
+          <ListItemText {...LIST_ITEM_BUTTON_TEXT_PROPS}>
+            Alphabetical
+          </ListItemText>
+        </ListItemButton>
+        <ListItemButton onClick={() => onFilterSortChange(FILTER_SORT.COUNT)}>
+          <Radio
+            checked={filterSort === FILTER_SORT.COUNT}
+            checkedIcon={<RadioCheckedIcon {...SVG_ICON_PROPS} />}
+            icon={<RadioUncheckedIcon {...SVG_ICON_PROPS} />}
+          />
+          <ListItemText {...LIST_ITEM_BUTTON_TEXT_PROPS}>
+            By Count (Descending)
+          </ListItemText>
+        </ListItemButton>
+      </StyledMenu>
+    </Fragment>
+  );
+};

package/src/components/Filter/components/controls/Controls/components/FilterSort/stories/filterSort.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { FILTER_SORT } from "../../../../../../../../common/filters/sort/config/types";
+import { FilterSort } from "../filterSort";
+
+const meta: Meta<typeof FilterSort> = {
+  component: FilterSort,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DEFAULT: Story = {
+  args: { enabled: true, filterSort: FILTER_SORT.ALPHA },
+};

package/src/components/Filter/components/controls/Controls/components/FilterSort/types.ts

@@ -0,0 +1,7 @@
+import { FILTER_SORT } from "../../../../../../../common/filters/sort/config/types";
+
+export type FilterSortProps = {
+  enabled?: boolean;
+  filterSort?: FILTER_SORT;
+  onFilterSortChange?: (filterSort: FILTER_SORT) => void;
+};

package/src/components/Filter/components/controls/Controls/controls.styles.ts

@@ -3,7 +3,8 @@ import { Grid } from "@mui/material";
 
 export const StyledGrid = styled(Grid)`
   display: grid;
-  gap: 8px 0;
+  gap: 8px 16px;
+  grid-auto-flow: column;
   grid-template-columns: 1fr auto;
   margin: 8px 0;
   padding: 0 16px;

package/src/components/Filter/components/controls/Controls/controls.tsx

@@ -3,9 +3,9 @@ import React from "react";
 import { CLEAR_ALL } from "../../../../../common/entities";
 import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 import { BUTTON_PROPS } from "../../../../common/Button/constants";
-import { BaseComponentProps } from "../../../../types";
-import { SurfaceProps } from "../../surfaces/types";
+import { FilterSort } from "./components/FilterSort/filterSort";
 import { StyledGrid } from "./controls.styles";
+import { ControlsProps } from "./types";
 
 /**
  * Renders filter title and "Clear All" button.
@@ -13,8 +13,11 @@ import { StyledGrid } from "./controls.styles";
 
 export const Controls = ({
   className,
+  filterSort,
+  filterSortEnabled = false,
   onFilter,
-}: BaseComponentProps & Pick<SurfaceProps, "onFilter">): JSX.Element | null => {
+  onFilterSortChange,
+}: ControlsProps): JSX.Element | null => {
   return (
     <StyledGrid className={className} container>
       <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500}>
@@ -26,6 +29,11 @@ export const Controls = ({
       >
         Clear All
       </MButton>
+      <FilterSort
+        enabled={filterSortEnabled}
+        filterSort={filterSort}
+        onFilterSortChange={onFilterSortChange}
+      />
     </StyledGrid>
   );
 };

package/src/components/Filter/components/controls/Controls/types.ts

@@ -0,0 +1,10 @@
+import { BaseComponentProps } from "../../../../types";
+import { SurfaceProps } from "../../surfaces/types";
+import { FilterSortProps } from "./components/FilterSort/types";
+
+export interface ControlsProps
+  extends BaseComponentProps,
+    Pick<SurfaceProps, "onFilter">,
+    Omit<FilterSortProps, "enabled"> {
+  filterSortEnabled?: boolean;
+}

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

@@ -1,9 +1,11 @@
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { CategoryFilter } from "../Filters/filters";
+import { FilterSortProps } from "../controls/Controls/components/FilterSort/types";
 
-export interface SurfaceProps {
+export interface SurfaceProps extends Omit<FilterSortProps, "enabled"> {
   categoryFilters: CategoryFilter[];
   count?: number;
+  filterSortEnabled: boolean;
   onFilter: OnFilterFn;
 }
 

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UsePlotOptions/hook.ts

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
 import { SelectCategoryValueView } from "../../../../../../../../../../../common/entities";
+import { sortCategoryValueViewsCount } from "../../../../../../../../../../../common/filters/sort/models/utils";
 import { getPlotOptions } from "../../barX/plot";
 import { getCategoryTotalCount } from "../../barX/utils";
-import { sortByCountThenLabel } from "../../utils";
 import { UsePlotOptions } from "./types";
 
 export const usePlotOptions = (
@@ -13,7 +13,7 @@ export const usePlotOptions = (
   // Organise the select category value views (sort and slice) for chart display.
   const data = selectCategoryValueViews
     // Sort the category values by count and label.
-    .sort(sortByCountThenLabel)
+    .sort(sortCategoryValueViewsCount)
     // Slice the category values to the number of bars to display.
     .slice(0, barCount);
 

package/src/components/Index/components/EntityView/components/views/ChartView/components/Chart/utils.ts

@@ -1,5 +1,4 @@
 import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
-import { sortCategoryValueViews } from "../../../../../../../../../hooks/useCategoryFilter";
 
 /**
  * Renders the button text for the chart.
@@ -19,17 +18,3 @@ export function renderButtonText(
 
   return `Show ${count} additional results`;
 }
-
-/**
- * Sorts category value views by count in descending order, then label in ascending order.
- * @param a - First category value view.
- * @param b - Second category value view.
- * @returns Sorted category value views.
- */
-export function sortByCountThenLabel(
-  a: SelectCategoryValueView,
-  b: SelectCategoryValueView
-): number {
-  const compare = b.count - a.count;
-  return compare === 0 ? sortCategoryValueViews(a, b) : compare;
-}

package/src/config/entities.ts

@@ -17,6 +17,7 @@ import {
   DataDictionaryConfig,
   SelectedFilter,
 } from "../common/entities";
+import { FilterSortConfig } from "../common/filters/sort/config/types";
 import { FooterProps } from "../components/Layout/components/Footer/footer";
 import { HeaderProps } from "../components/Layout/components/Header/header";
 import { ExploreMode } from "../hooks/useExploreMode/types";
@@ -378,6 +379,7 @@ export interface SiteConfig {
   export?: ExportConfig;
   exportsRequireAuth?: boolean;
   exportToTerraUrl?: string; // TODO(cc) revist location; possibly nest inside "export"?
+  filterSort?: FilterSortConfig;
   gitHubUrl?: string;
   layout: {
     floating?: FloatingConfig;

package/src/hooks/useCategoryFilter.ts

@@ -18,6 +18,8 @@ import {
   SelectCategoryView,
   SelectedFilter,
 } from "../common/entities";
+import { FILTER_SORT } from "../common/filters/sort/config/types";
+import { sortCategoryValueViews } from "../common/filters/sort/models/utils";
 
 /**
  * State backing filter functionality and calculations. Converted to view model for display.
@@ -94,12 +96,14 @@ function buildCategoryView(
  * @param categories - Categories, category value and their counts with the current filter applied.
  * @param categoryConfigs - Category configs indicating accept list as well as label configuration.
  * @param filterState - Current set of selected category and category values.
+ * @param filterSort - Sort configuration (ALPHA or COUNT).
  * @returns Array of category view objects.
  */
 export function buildCategoryViews(
   categories: Category[],
   categoryConfigs: CategoryConfig[] | undefined,
-  filterState: FilterState
+  filterState: FilterState,
+  filterSort: FILTER_SORT
 ): CategoryView[] {
   if (!categories || !categoryConfigs) {
     return [];
@@ -131,7 +135,9 @@ export function buildCategoryViews(
     const categoryValueViews = category.values.map((categoryValue) =>
       buildCategoryValueView(categoryValue, categorySelectedFilter)
     );
-    categoryValueViews.sort(sortCategoryValueViews);
+
+    // Sort category value views based on filter sort configuration.
+    sortCategoryValueViews(categoryValueViews, filterSort);
 
     // Build category view model.
     return buildCategoryView(category, categoryValueViews, categoryConfigs);
@@ -272,23 +278,6 @@ function isCategoryAcceptListed(
   );
 }
 
-/**
- * Sort category value views by key, ascending.
- * @param cvv0 - First category value view to compare.
- * @param cvv1 - Second category value view to compare.
- * @returns Number indicating sort precedence of cv0 vs cv1.
- */
-export function sortCategoryValueViews(
-  cvv0: SelectCategoryValueView,
-  cvv1: SelectCategoryValueView
-): number {
-  return !cvv0.label
-    ? 1
-    : !cvv1.label
-    ? -1
-    : COLLATOR_CASE_INSENSITIVE.compare(cvv0.label, cvv1.label);
-}
-
 /**
  * Sort category views by display label, ascending.
  * @param c0 - First category view to compare.

package/src/providers/exploreState/actions/updateFilterSort/action.ts

@@ -0,0 +1,30 @@
+import { ExploreState } from "../../../exploreState";
+import { updateEntityStateByCategoryGroupConfigKey } from "../../utils";
+import { UpdateFilterSortPayload } from "./types";
+import { sortCategoryViews } from "./utils";
+
+/**
+ * Reducer function to handle the "update filter sort" action.
+ * Updates the filter sort in the state for the current entity.
+ * @param state - Explore State.
+ * @param payload - Payload.
+ * @returns explore state.
+ */
+export function updateFilterSortAction(
+  state: ExploreState,
+  payload: UpdateFilterSortPayload
+): ExploreState {
+  const filterSort = payload;
+
+  // Sort the category views based on the new filter sort.
+  const categoryViews = sortCategoryViews(state, filterSort);
+
+  // Update entity state by category group config key
+  updateEntityStateByCategoryGroupConfigKey(state, { categoryViews });
+
+  return {
+    ...state,
+    categoryViews,
+    filterSort,
+  };
+}

package/src/providers/exploreState/actions/updateFilterSort/dispatch.ts

@@ -0,0 +1,16 @@
+import { ExploreActionKind } from "../../../exploreState";
+import { UpdateFilterSortAction, UpdateFilterSortPayload } from "./types";
+
+/**
+ * Action creator for updating filter sort in the state.
+ * @param payload - Payload.
+ * @returns Action with payload and action type.
+ */
+export function updateFilterSort(
+  payload: UpdateFilterSortPayload
+): UpdateFilterSortAction {
+  return {
+    payload,
+    type: ExploreActionKind.UpdateFilterSort,
+  };
+}

package/src/providers/exploreState/actions/updateFilterSort/types.ts

@@ -0,0 +1,9 @@
+import { FILTER_SORT } from "../../../../common/filters/sort/config/types";
+import { ExploreActionKind } from "../../../exploreState";
+
+export type UpdateFilterSortAction = {
+  payload: UpdateFilterSortPayload;
+  type: ExploreActionKind.UpdateFilterSort;
+};
+
+export type UpdateFilterSortPayload = FILTER_SORT;

package/src/providers/exploreState/actions/updateFilterSort/utils.ts

@@ -0,0 +1,30 @@
+import { isRangeCategory } from "../../../../common/categories/models/range/typeGuards";
+import { CategoryView } from "../../../../common/categories/views/types";
+import { FILTER_SORT } from "../../../../common/filters/sort/config/types";
+import { sortCategoryValueViews } from "../../../../common/filters/sort/models/utils";
+import { ExploreState } from "../../../exploreState";
+
+/**
+ * Sorts the category views for the current entity type, based on the filter sort.
+ * @param state - Explore state.
+ * @param filterSort - Filter sort.
+ * @returns Sorted category views.
+ */
+export function sortCategoryViews(
+  state: ExploreState,
+  filterSort: FILTER_SORT
+): CategoryView[] {
+  return [...state.categoryViews].map((categoryView) => {
+    // Skip range categories.
+    if (isRangeCategory(categoryView)) return categoryView;
+
+    // Use structural clone for select categories that need sorting.
+    const nextCategoryView = {
+      ...categoryView,
+      values: [...categoryView.values],
+    };
+
+    sortCategoryValueViews(nextCategoryView.values, filterSort);
+    return nextCategoryView;
+  });
+}

package/src/providers/exploreState/initializer/constants.ts

@@ -1,3 +1,4 @@
+import { FILTER_SORT } from "../../../common/filters/sort/config/types";
 import { CategoryGroup } from "../../../config/entities";
 import { ExploreState, PaginationState } from "../../exploreState";
 import { SELECT_CATEGORY_KEY } from "../constants";
@@ -34,6 +35,7 @@ export const INITIAL_STATE: ExploreState = {
   entityStateByCategoryGroupConfigKey: new Map(),
   featureFlagState: undefined,
   filterCount: 0,
+  filterSort: FILTER_SORT.ALPHA,
   filterState: [],
   listItems: [],
   loading: true,

package/src/providers/exploreState/initializer/utils.ts

@@ -5,6 +5,7 @@ import {
 } from "@tanstack/react-table";
 import { CategoryConfig } from "../../../common/categories/config/types";
 import { SelectCategory, SelectedFilter } from "../../../common/entities";
+import { getFilterSortType } from "../../../common/filters/sort/config/utils";
 import { getInitialColumnVisibilityState } from "../../../components/TableCreator/options/initialState/columnVisibility";
 import {
   CategoryGroup,
@@ -325,6 +326,7 @@ export function initReducerArguments(
     entityStateByCategoryGroupConfigKey,
     featureFlagState: decodedFeatureFlagParam,
     filterCount: getFilterCount(filterState),
+    filterSort: getFilterSortType(config),
     filterState,
     tabValue: entityListType,
   };