@databiosphere/findable-ui 43.0.0 → 45.0.0

package/lib/components/Filter/components/controls/Controls/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Filter/components/surfaces/types.d.ts

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

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UsePlotOptions/hook.js

@@ -1,12 +1,12 @@
 import { useMemo } from "react";
+import { sortCategoryValueViewsCount } from "../../../../../../../../../../../common/filters/sort/models/utils";
 import { getPlotOptions } from "../../barX/plot";
 import { getCategoryTotalCount } from "../../barX/utils";
-import { sortByCountThenLabel } from "../../utils";
 export const usePlotOptions = (selectCategoryValueViews, width, barCount) => {
     // 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);
     // Build the plot options.

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/utils.d.ts

@@ -6,10 +6,3 @@ import { SelectCategoryValueView } from "../../../../../../../../../common/entit
  * @returns Button text.
  */
 export declare function renderButtonText(maxBarCount: number | undefined, selectCategoryValueViews: SelectCategoryValueView[]): string;
-/**
- * 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 declare function sortByCountThenLabel(a: SelectCategoryValueView, b: SelectCategoryValueView): number;

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/utils.js

@@ -1,4 +1,3 @@
-import { sortCategoryValueViews } from "../../../../../../../../../hooks/useCategoryFilter";
 /**
  * Renders the button text for the chart.
  * @param maxBarCount - Maximum number of bars to display.
@@ -13,13 +12,3 @@ export function renderButtonText(maxBarCount, selectCategoryValueViews) {
     const count = totalBars - maxBarCount;
     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, b) {
-    const compare = b.count - a.count;
-    return compare === 0 ? sortCategoryValueViews(a, b) : compare;
-}

package/lib/components/Index/table/hook.js

@@ -11,8 +11,10 @@ import { arrIncludesSome } from "../../Table/columnDef/columnFilters/filterFn";
 import { COLUMN_DEF } from "../../Table/common/columnDef";
 import { buildCategoryViews, getFacetedUniqueValuesWithArrayValues, getTableStatePagination, isClientFilteringEnabled, sortingFn, } from "../../Table/common/utils";
 import { getFacetedMinMaxValues } from "../../Table/featureOptions/facetedColumn/getFacetedMinMaxValues";
+import { TABLE_DOWNLOAD_OPTIONS } from "../../Table/featureOptions/tableDownload/constants";
 import { ROW_POSITION } from "../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../Table/features/RowPreview/constants";
+import { TABLE_DOWNLOAD } from "../../Table/features/TableDownload/constants";
 import { buildBaseColumnDef } from "../../TableCreator/common/utils";
 import { useTableOptions } from "../../TableCreator/options/hook";
 import { createCell } from "./coreOptions/columns/cellFactory";
@@ -97,7 +99,7 @@ export const useTable = ({ entityListType, }) => {
      * - This will simplify the configuration structure and centralize table state definitions, reducing redundancy and improving clarity.
      */
     const table = useReactTable({
-        _features: [ROW_POSITION, ROW_PREVIEW],
+        _features: [ROW_POSITION, ROW_PREVIEW, TABLE_DOWNLOAD],
         columns: columnDefs,
         data: listItems || [],
         enableColumnFilters: true, // client-side filtering.
@@ -122,6 +124,7 @@ export const useTable = ({ entityListType, }) => {
         onRowSelectionChange,
         onSortingChange,
         pageCount,
+        ...TABLE_DOWNLOAD_OPTIONS,
         state,
         ...tableOptions,
     });

package/lib/components/Table/common/columnDef.js

@@ -10,6 +10,7 @@ export const COLUMN_DEF = {
         enableGrouping: false,
         enableHiding: false,
         enableSorting: false,
+        enableTableDownload: false,
         header: "",
         id: COLUMN_IDENTIFIER.ROW_POSITION,
         meta: {
@@ -25,6 +26,7 @@ export const COLUMN_DEF = {
         enableGrouping: false,
         enableHiding: false,
         enableSorting: false,
+        enableTableDownload: false,
         header: HeadSelectionCell,
         id: COLUMN_IDENTIFIER.ROW_SELECTION,
         meta: {

package/lib/components/Table/common/utils.d.ts

@@ -22,12 +22,6 @@ export declare function buildCategoryViews<T extends RowData>(columns: Column<T>
  * @returns column header.
  */
 export declare function getColumnHeader<T extends RowData>(column: Column<T>): string;
-/**
- * Returns filtered entity results as a blob.
- * @param rows - Table rows.
- * @returns filtered entity results as a blob.
- */
-export declare function generateDownloadBlob<T extends RowData>(rows: Row<T>[]): Blob | undefined;
 /**
  * Returns unique category term counts keyed by category terms.
  * Custom function based off react table function getFacetedUniqueValues, see

package/lib/components/Table/common/utils.js

@@ -1,6 +1,5 @@
 import { memo, sortingFns, } from "@tanstack/react-table";
 import { EXPLORE_MODE } from "../../../hooks/useExploreMode/types";
-import { COLUMN_IDENTIFIER } from "./columnIdentifier";
 /**
  * Build view-specific models from react table faceted values function.
  * @param columns - Table columns.
@@ -60,46 +59,6 @@ export function getColumnHeader(column) {
     // Return header from meta or id.
     return meta?.header || id;
 }
-/**
- * Format data to TSV string.
- * @param data - Table data.
- * @returns table data formatted into a TSV string.
- */
-function formatDataToTSV(data) {
-    return data
-        .map((row) => {
-        return row
-            .map((data) => {
-            // Use empty string in place of undefined and null.
-            if (data === undefined || data === null)
-                return "";
-            // Convert to string.
-            const dataString = Array.isArray(data)
-                ? data.join(", ")
-                : String(data);
-            // Quote if necessary.
-            return /[\t\r\n"]/.test(dataString)
-                ? `"${dataString.replaceAll('"', '""')}"`
-                : dataString;
-        })
-            .join("\t");
-    })
-        .join("\n");
-}
-/**
- * Returns filtered entity results as a blob.
- * @param rows - Table rows.
- * @returns filtered entity results as a blob.
- */
-export function generateDownloadBlob(rows) {
-    if (rows.length === 0) {
-        return;
-    }
-    const tableHeaders = getHeadersTableData(rows);
-    const tableData = getRowsTableData(rows);
-    const tsv = formatDataToTSV([tableHeaders, ...tableData]);
-    return new Blob([tsv], { type: "text/tab-separated-values" });
-}
 /**
  * Returns unique category term counts keyed by category terms.
  * Custom function based off react table function getFacetedUniqueValues, see
@@ -166,28 +125,6 @@ export function getTableStatePagination(pageIndex = 0, pageSize) {
         pageSize,
     };
 }
-/**
- * Returns the list of table headers, excluding "rowSelection" column.
- * @param rows - Table rows.
- * @returns list of headers.
- */
-function getHeadersTableData(rows) {
-    return rows[0]
-        .getAllCells()
-        .filter((cell) => cell.column.id !== COLUMN_IDENTIFIER.ROW_SELECTION)
-        .map((cell) => cell.column.columnDef.header);
-}
-/**
- * Returns the list of table data, excluding "rowSelection" column.
- * @param rows - Table rows.
- * @returns list of data.
- */
-function getRowsTableData(rows) {
-    return rows.map((row) => row
-        .getAllCells()
-        .filter((cell) => cell.column.id !== COLUMN_IDENTIFIER.ROW_SELECTION)
-        .map((cell) => cell.getValue()));
-}
 /**
  * Returns true if any or all table rows are selected.
  * @param table - Table.

package/lib/components/Table/components/TableFeatures/TableDownload/tableDownload.d.ts

@@ -0,0 +1,3 @@
+import { RowData } from "@tanstack/react-table";
+import { TableDownloadProps } from "./types";
+export declare const TableDownload: <T extends RowData>({ className, table, }: TableDownloadProps<T>) => JSX.Element | null;

package/lib/components/Table/components/TableFeatures/TableDownload/tableDownload.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { BUTTON_PROPS } from "../../../../common/Button/constants";
+import { DownloadIcon } from "../../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
+import { StyledButton } from "./tableDownload.styles";
+export const TableDownload = ({ className, table, }) => {
+    if (!table.options.enableTableDownload)
+        return null;
+    return (React.createElement(StyledButton, { ...BUTTON_PROPS.SECONDARY_CONTAINED, className: className, onClick: () => table.downloadData(), startIcon: React.createElement(DownloadIcon, null) }, "Download TSV"));
+};

package/lib/components/Table/components/{DownloadEntityResults/downloadEntityResults.styles.js → TableFeatures/TableDownload/tableDownload.styles.js}

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Button } from "@mui/material";
-import { bpDownSm } from "../../../../styles/common/mixins/breakpoints";
+import { bpDownSm } from "../../../../../styles/common/mixins/breakpoints";
 export const StyledButton = styled(Button) `
   ${bpDownSm} {
     display: none;

package/lib/components/Table/components/TableFeatures/TableDownload/types.d.ts

@@ -0,0 +1,5 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { BaseComponentProps } from "../../../../types";
+export interface TableDownloadProps<T extends RowData> extends BaseComponentProps {
+    table: Table<T>;
+}

package/lib/components/Table/components/TableFeatures/TableDownload/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Table/components/TableToolbar/tableToolbar.js

@@ -3,8 +3,8 @@ import React, { Fragment } from "react";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import { ViewToggle } from "../../../Index/components/EntityView/components/controls/ViewToggle/viewToggle";
 import { isAnyRowSelected } from "../../common/utils";
-import { DownloadEntityResults } from "../DownloadEntityResults/downloadEntityResults";
 import { PaginationSummary } from "../PaginationSummary/paginationSummary";
+import { TableDownload } from "../TableFeatures/TableDownload/tableDownload";
 import { ColumnGrouping } from "./components/ColumnGrouping/columnGrouping";
 import { ColumnVisibility } from "./components/ColumnVisibility/columnVisibility";
 import { RowPreview } from "./components/RowPreview/rowPreview";
@@ -16,14 +16,14 @@ export const TableToolbar = ({ listView, tableInstance, }) => {
     const { paginationState } = exploreState;
     const { currentPage, pages, pageSize, rows } = paginationState;
     const { getSelectedRowModel } = tableInstance;
-    const { enableDownload, rowPreviewView } = listView || {};
+    const { rowPreviewView } = listView || {};
     return (React.createElement(Fragment, null,
         React.createElement(StyledToolbar, null,
             React.createElement(Grid, { ...GRID_PROPS, gap: 6 },
                 React.createElement(ViewToggle, null),
                 isAnyRowSelected(tableInstance) ? (React.createElement(RowSelection, { rows: getSelectedRowModel().rows, rowSelectionView: listView?.rowSelectionView })) : (React.createElement(PaginationSummary, { firstResult: (currentPage - 1) * pageSize + 1, lastResult: currentPage === pages ? rows : pageSize * currentPage, totalResult: rows }))),
             React.createElement(Grid, { ...GRID_PROPS },
-                enableDownload && (React.createElement(DownloadEntityResults, { entityName: exploreState.tabValue, rows: tableInstance.getFilteredRowModel().rows })),
+                React.createElement(TableDownload, { table: tableInstance }),
                 React.createElement(ColumnGrouping, { tableInstance: tableInstance }),
                 React.createElement(ColumnVisibility, { tableInstance: tableInstance }))),
         React.createElement(RowPreview, { rowPreviewView: rowPreviewView, tableInstance: tableInstance })));

package/lib/components/Table/components/TableToolbar2/tableToolbar2.d.ts

@@ -0,0 +1,3 @@
+import { RowData } from "@tanstack/react-table";
+import { TableToolbar2Props } from "./types";
+export declare const TableToolbar2: <T extends RowData>({ table, }: TableToolbar2Props<T>) => JSX.Element;

package/lib/components/Table/components/TableToolbar2/tableToolbar2.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { TableDownload } from "../TableFeatures/TableDownload/tableDownload";
+import { StyledStack, StyledToolbar } from "./tableToolbar2.styles";
+export const TableToolbar2 = ({ table, }) => {
+    return (React.createElement(StyledToolbar, null,
+        React.createElement(StyledStack, null,
+            React.createElement(TableDownload, { table: table }))));
+};

package/lib/components/Table/components/TableToolbar2/tableToolbar2.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const StyledToolbar: import("@emotion/styled").StyledComponent<import("@mui/material").ToolbarOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "style" | "className" | "classes" | "children" | "sx" | "variant" | "disableGutters"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledStack: import("@emotion/styled").StyledComponent<import("@mui/material").StackOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/material").StackOwnProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Table/components/TableToolbar2/tableToolbar2.styles.js

@@ -0,0 +1,16 @@
+import styled from "@emotion/styled";
+import { Toolbar as MToolbar, Stack } from "@mui/material";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+export const StyledToolbar = styled(MToolbar) `
+  align-items: center;
+  background-color: ${PALETTE.COMMON_WHITE};
+  display: flex;
+  padding: 16px;
+`;
+export const StyledStack = styled(Stack) `
+  align-items: center;
+  flex: 1;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: flex-end;
+`;

package/lib/components/Table/components/TableToolbar2/types.d.ts

@@ -0,0 +1,4 @@
+import { RowData, Table } from "@tanstack/react-table";
+export interface TableToolbar2Props<T extends RowData> {
+    table: Table<T>;
+}

package/lib/components/Table/components/TableToolbar2/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Table/featureOptions/tableDownload/constants.d.ts

@@ -0,0 +1,3 @@
+import { RowData } from "@tanstack/react-table";
+import { TableDownloadOptions } from "../../features/TableDownload/types";
+export declare const TABLE_DOWNLOAD_OPTIONS: Pick<TableDownloadOptions<RowData>, "enableTableDownload">;

package/lib/components/Table/featureOptions/tableDownload/constants.js

@@ -0,0 +1,3 @@
+export const TABLE_DOWNLOAD_OPTIONS = {
+    enableTableDownload: false,
+};

package/lib/components/Table/features/TableDownload/constants.d.ts

@@ -0,0 +1,2 @@
+import { TableFeature } from "@tanstack/react-table";
+export declare const TABLE_DOWNLOAD: TableFeature;

package/lib/components/Table/features/TableDownload/constants.js

@@ -0,0 +1,10 @@
+import { downloadData, getCanTableDownload, onTableDownload } from "./utils";
+export const TABLE_DOWNLOAD = {
+    createColumn: (column, table) => {
+        column.getCanTableDownload = () => getCanTableDownload(column, table);
+    },
+    createTable: (table) => {
+        table.downloadData = () => downloadData(table);
+    },
+    getDefaultOptions: () => ({ enableTableDownload: false, onTableDownload }),
+};

package/lib/components/Table/features/TableDownload/onDownload/utils.d.ts

@@ -0,0 +1,14 @@
+import { Column, RowData, Table } from "@tanstack/react-table";
+/**
+ * Format data to TSV string.
+ * @param data - Table data.
+ * @returns table data formatted into a TSV string.
+ */
+export declare function formatDataToTSV(data: unknown[][]): string;
+export declare function getBlob<T extends RowData>(table: Table<T>): Blob | undefined;
+/**
+ * Filters table columns from column.getCanDownload API.
+ * @param table - Table.
+ * @returns Columns configured to be downloadable.
+ */
+export declare function getDownloadableColumns<T extends RowData>(table: Table<T>): Column<T>[];

package/lib/components/Table/features/TableDownload/onDownload/utils.js

@@ -0,0 +1,63 @@
+import { getColumnHeader } from "../../../common/utils";
+/**
+ * Format data to TSV string.
+ * @param data - Table data.
+ * @returns table data formatted into a TSV string.
+ */
+export function formatDataToTSV(data) {
+    return data
+        .map((row) => {
+        return row
+            .map((value) => {
+            // Use empty string in place of undefined and null.
+            if (value === undefined || value === null)
+                return "";
+            // Convert unknown value to string.
+            let valueStr;
+            // Test if object / array.
+            if (typeof value === "object") {
+                if (Array.isArray(value)) {
+                    // Handle array.
+                    valueStr = value.join(", ") || "";
+                }
+                else {
+                    // Handle object.
+                    valueStr = JSON.stringify(value);
+                }
+            }
+            else {
+                // Handle primitive.
+                valueStr = String(value);
+            }
+            // Quote if necessary.
+            return /[\t\r\n"]/.test(valueStr)
+                ? `"${valueStr.replaceAll('"', '""')}"`
+                : valueStr;
+        })
+            .join("\t");
+    })
+        .join("\n");
+}
+export function getBlob(table) {
+    const rows = table.getRowModel().rows;
+    if (rows.length === 0)
+        return;
+    // Get downloadable columns based on getCanDownload property.
+    const downloadableColumns = getDownloadableColumns(table);
+    // Extract column IDs for filtering.
+    const downloadableColumnIds = downloadableColumns.map((column) => column.id);
+    // Get table headers from downloadable columns.
+    const tableHeaders = downloadableColumns.map(getColumnHeader);
+    // Get row data but only for downloadable columns.
+    const tableData = rows.map((row) => downloadableColumnIds.map((columnId) => row.getValue(columnId)));
+    const tsv = formatDataToTSV([tableHeaders, ...tableData]);
+    return new Blob([tsv], { type: "text/tab-separated-values" });
+}
+/**
+ * Filters table columns from column.getCanDownload API.
+ * @param table - Table.
+ * @returns Columns configured to be downloadable.
+ */
+export function getDownloadableColumns(table) {
+    return table.getAllColumns().filter((column) => column.getCanTableDownload());
+}

package/lib/components/Table/features/TableDownload/types.d.ts

@@ -0,0 +1,15 @@
+import { RowData, Table } from "@tanstack/react-table";
+export interface TableDownloadColumn {
+    getCanTableDownload: () => boolean;
+}
+export interface TableDownloadColumnDef {
+    enableTableDownload?: boolean;
+}
+export interface TableDownloadInstance {
+    downloadData: () => void;
+}
+export interface TableDownloadOptions<T extends RowData> {
+    downloadFilename?: string;
+    enableTableDownload?: boolean;
+    onTableDownload?: (table: Table<T>) => void;
+}

package/lib/components/Table/features/TableDownload/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Table/features/TableDownload/utils.d.ts

@@ -0,0 +1,19 @@
+import { Column, RowData, Table } from "@tanstack/react-table";
+/**
+ * Function that downloads the table data as a TSV file.
+ * Uses the onDownload callback, or a custom download function if provided.
+ * @param table - Table.
+ */
+export declare function downloadData<T extends RowData>(table: Table<T>): void;
+/**
+ * Returns true if column can be downloaded.
+ * @param column - Column.
+ * @param table - Table.
+ * @returns True if column can be downloaded.
+ */
+export declare function getCanTableDownload<T extends RowData, TValue>(column: Column<T, TValue>, table: Table<T>): boolean;
+/**
+ * Default download function that downloads the table data as a TSV file.
+ * @param table - Table.
+ */
+export declare function onTableDownload<T extends RowData>(table: Table<T>): void;

package/lib/components/Table/features/TableDownload/utils.js

@@ -0,0 +1,46 @@
+import { getBlob } from "./onDownload/utils";
+/**
+ * Function that downloads the table data as a TSV file.
+ * Uses the onDownload callback, or a custom download function if provided.
+ * @param table - Table.
+ */
+export function downloadData(table) {
+    table.options.onTableDownload?.(table);
+}
+/**
+ * Returns true if column can be downloaded.
+ * @param column - Column.
+ * @param table - Table.
+ * @returns True if column can be downloaded.
+ */
+export function getCanTableDownload(column, table) {
+    return ((column.columnDef.enableTableDownload ?? true) &&
+        (table.options.enableTableDownload ?? false));
+}
+/**
+ * Default download function that downloads the table data as a TSV file.
+ * @param table - Table.
+ */
+export function onTableDownload(table) {
+    // Check if download is enabled.
+    if (!(table.options.enableTableDownload ?? false))
+        return;
+    // Generate the blob.
+    const blob = getBlob(table);
+    if (!blob)
+        return;
+    // Create an object URL for the blob.
+    const url = URL.createObjectURL(blob);
+    // Create a download link.
+    const anchorEl = document.createElement("a");
+    anchorEl.href = url;
+    anchorEl.download = table.options.downloadFilename || "table-data.tsv";
+    // Append to the document body for better cross-browser support.
+    document.body.appendChild(anchorEl);
+    // Trigger the download.
+    anchorEl.click();
+    // Remove the element after triggering download.
+    document.body.removeChild(anchorEl);
+    // Clean up.
+    URL.revokeObjectURL(url);
+}

package/lib/components/Table/features/entities.d.ts

@@ -1,8 +1,13 @@
 import { RowData } from "@tanstack/react-table";
 import { RowPositionOptions, RowPositionRow } from "./RowPosition/types";
 import { RowPreviewInstance, RowPreviewOptions, RowPreviewRow, RowPreviewTableState } from "./RowPreview/entities";
+import { TableDownloadColumn, TableDownloadInstance, TableDownloadOptions } from "./TableDownload/types";
+export type CustomFeatureColumn = TableDownloadColumn;
+export interface CustomFeatureInstance<T extends RowData> extends TableDownloadInstance, RowPreviewInstance<T> {
+}
 export type CustomFeatureInitialTableState = Partial<RowPreviewTableState>;
-export type CustomFeatureInstance<T extends RowData> = RowPreviewInstance<T>;
-export type CustomFeatureOptions = RowPreviewOptions & RowPositionOptions;
-export type CustomFeatureRow = RowPositionRow & RowPreviewRow;
+export interface CustomFeatureOptions<T extends RowData> extends TableDownloadOptions<T>, RowPositionOptions, RowPreviewOptions {
+}
+export interface CustomFeatureRow extends RowPositionRow, RowPreviewRow {
+}
 export type CustomFeatureTableState = RowPreviewTableState;

package/lib/config/entities.d.ts

@@ -4,6 +4,7 @@ import { JSXElementConstructor, ReactNode } from "react";
 import { AzulSummaryResponse } from "../apis/azul/common/entities";
 import { CategoryConfig } from "../common/categories/config/types";
 import { DataDictionaryAnnotation, 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";
@@ -214,7 +215,6 @@ export interface ListConfig<T extends RowData> {
  */
 export interface ListViewConfig {
     disablePagination?: boolean;
-    enableDownload?: boolean;
     rowPreviewView?: ComponentsConfig;
     rowSelectionView?: ComponentsConfig;
 }
@@ -305,6 +305,7 @@ export interface SiteConfig {
     export?: ExportConfig;
     exportsRequireAuth?: boolean;
     exportToTerraUrl?: string;
+    filterSort?: FilterSortConfig;
     gitHubUrl?: string;
     layout: {
         floating?: FloatingConfig;

package/lib/hooks/useCategoryFilter.d.ts

@@ -1,7 +1,8 @@
 import { CategoryConfig } from "../common/categories/config/types";
 import { Category } from "../common/categories/models/types";
 import { CategoryView, VIEW_KIND } from "../common/categories/views/types";
-import { CategoryKey, CategoryValueKey, ClearAll, Filters, SelectCategoryValue, SelectCategoryValueView } from "../common/entities";
+import { CategoryKey, CategoryValueKey, ClearAll, Filters, SelectCategoryValue } from "../common/entities";
+import { FILTER_SORT } from "../common/filters/sort/config/types";
 /**
  * State backing filter functionality and calculations. Converted to view model for display.
  */
@@ -15,9 +16,10 @@ export type OnFilterFn = (categoryKey: CategoryKey | ClearAll, selectedCategoryV
  * @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 declare function buildCategoryViews(categories: Category[], categoryConfigs: CategoryConfig[] | undefined, filterState: FilterState): CategoryView[];
+export declare function buildCategoryViews(categories: Category[], categoryConfigs: CategoryConfig[] | undefined, filterState: FilterState, filterSort: FILTER_SORT): CategoryView[];
 /**
  * Build new set of selected filters on de/select of filter.
  * @param filterState - Current set of selected category and category values.
@@ -34,10 +36,3 @@ export declare function buildNextFilterState(filterState: FilterState, categoryK
  * @returns original select category value.
  */
 export declare function getSelectCategoryValue(selectCategoryValue: SelectCategoryValue): SelectCategoryValue;
-/**
- * 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 declare function sortCategoryValueViews(cvv0: SelectCategoryValueView, cvv1: SelectCategoryValueView): number;

package/lib/hooks/useCategoryFilter.js

@@ -5,6 +5,7 @@ import { buildNextSelectFilterState } from "../common/categories/models/select/u
 import { buildRangeCategoryView } from "../common/categories/views/range/utils";
 import { VIEW_KIND } from "../common/categories/views/types";
 import { COLLATOR_CASE_INSENSITIVE } from "../common/constants";
+import { sortCategoryValueViews } from "../common/filters/sort/models/utils";
 /**
  * Build the view-specific model of the given category value.
  * @param categoryValue - The category value to build a view model of.
@@ -46,9 +47,10 @@ function buildCategoryView(selectCategory, selectCategoryValueViews, categoryCon
  * @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, categoryConfigs, filterState) {
+export function buildCategoryViews(categories, categoryConfigs, filterState, filterSort) {
     if (!categories || !categoryConfigs) {
         return [];
     }
@@ -64,7 +66,8 @@ export function buildCategoryViews(categories, categoryConfigs, filterState) {
         }
         // Build view model for single or multiselect categories.
         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);
     });
@@ -156,19 +159,6 @@ function isCategoryValueSelected(categoryValueKey, categorySelectedFilter) {
 function isCategoryAcceptListed(category, categoryConfigs) {
     return categoryConfigs.some((categoryConfig) => categoryConfig.key === category.key);
 }
-/**
- * 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, cvv1) {
-    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.