@databiosphere/findable-ui 35.2.0 → 37.0.0

package/src/components/DataDictionary/components/Filters/stories/constants.ts

@@ -1,20 +1,37 @@
+import { fn } from "@storybook/test";
 import { PartialColumn } from "./types";
 
 export const BIONETWORK: PartialColumn = {
   columnDef: { header: "BioNetwork" },
   getCanFilter: () => true,
+  getCanGlobalFilter: () => false,
   getFacetedUniqueValues: () =>
     new Map([
       ["Nervous System", 3],
       ["Brain", 2],
       ["Lung", 1],
     ]),
+  getFilterValue: () => ["Nervous System", "Brain"],
   id: "bioNetwork",
+  setFilterValue: fn(),
+};
+
+export const DESCRIPTION: PartialColumn = {
+  columnDef: { header: "Description" },
+  getCanFilter: () => false,
+  getCanGlobalFilter: () => true,
+  getFacetedUniqueValues: () =>
+    new Map([
+      ["Platform used for single cell library construction.", 1],
+      ["Platform used for sequencing.", 1],
+    ]),
+  id: "description",
 };
 
 export const EXAMPLE: PartialColumn = {
   columnDef: { header: "Example" },
   getCanFilter: () => false,
+  getCanGlobalFilter: () => false,
   getFacetedUniqueValues: () => new Map([["EFO:0008563", 1]]),
   id: "example",
 };
@@ -22,6 +39,7 @@ export const EXAMPLE: PartialColumn = {
 export const REQUIRED: PartialColumn = {
   columnDef: { header: "Required" },
   getCanFilter: () => true,
+  getCanGlobalFilter: () => false,
   getFacetedUniqueValues: () =>
     new Map([
       ["Required", 16],

package/src/components/DataDictionary/components/Filters/stories/filters.stories.tsx

@@ -1,14 +1,22 @@
+import { Box } from "@mui/material";
 import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj } from "@storybook/react";
 import { functionalUpdate, Table } from "@tanstack/react-table";
 import React from "react";
 import { Filters } from "../filters";
-import { BIONETWORK, EXAMPLE, REQUIRED } from "./constants";
-import { useFilterStore } from "./hook";
+import { BIONETWORK, DESCRIPTION, EXAMPLE, REQUIRED } from "./constants";
+import { useFilterStore, useGlobalFilterStore } from "./hook";
 import { PartialColumn } from "./types";
 
 const meta: Meta<typeof Filters> = {
   component: Filters,
+  decorators: [
+    (Story): JSX.Element => (
+      <Box sx={{ width: 600 }}>
+        <Story />
+      </Box>
+    ),
+  ],
 };
 
 export default meta;
@@ -17,6 +25,7 @@ type Story = StoryObj<typeof meta>;
 
 const DefaultStory = (): JSX.Element => {
   const { filterStore, setFilterStore } = useFilterStore();
+  const { globalFilter, setGlobalFilter } = useGlobalFilterStore();
 
   const makeColumn = (column: PartialColumn): PartialColumn => ({
     ...column,
@@ -31,7 +40,10 @@ const DefaultStory = (): JSX.Element => {
   });
 
   const table = {
-    getAllColumns: () => [REQUIRED, BIONETWORK, EXAMPLE].map(makeColumn),
+    getAllColumns: () =>
+      [DESCRIPTION, REQUIRED, BIONETWORK, EXAMPLE].map(makeColumn),
+    getState: () => ({ globalFilter }),
+    setGlobalFilter,
   } as Table<unknown>;
 
   return <Filters table={table} />;

package/src/components/DataDictionary/components/Filters/stories/hook.ts

@@ -7,3 +7,11 @@ export function useFilterStore(): {
   const [filterStore, setFilterStore] = useState<Record<string, unknown>>({});
   return { filterStore, setFilterStore };
 }
+
+export function useGlobalFilterStore(): {
+  globalFilter: string | undefined;
+  setGlobalFilter: Dispatch<SetStateAction<string | undefined>>;
+} {
+  const [globalFilter, setGlobalFilter] = useState<string | undefined>();
+  return { globalFilter, setGlobalFilter };
+}

package/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.ts

@@ -5,16 +5,12 @@ import { LAYOUT_SPACING } from "../../constants";
 
 const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
 const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
-const FILTERS_HEIGHT =
-  LAYOUT_SPACING.FILTERS_HEIGHT +
-  LAYOUT_SPACING.FILTERS_PADDING_TOP; /* filters height */
-const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
 
 export const Layout = styled("div")<LayoutSpacing>`
   grid-column: 2;
   grid-row: 1;
   padding-bottom: ${PB}px;
-  padding-top: ${({ top }) => top + TITLE_HEIGHT + FILTERS_HEIGHT + PT}px;
+  padding-top: ${({ top }) => top}px;
   z-index: 1; /* not required, but helpful in that the entities are always on top */
 
   ${mediaTabletDown} {

package/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.tsx

@@ -1,10 +1,16 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { Layout } from "./entitiesLayout.styles";
 import { EntitiesLayoutProps } from "./types";
 
-export const EntitiesLayout = ({
-  children,
-  ...props
-}: EntitiesLayoutProps): JSX.Element => {
-  return <Layout {...props}>{children}</Layout>;
-};
+export const EntitiesLayout = forwardRef<HTMLDivElement, EntitiesLayoutProps>(
+  function EntitiesLayout(
+    { children, spacing, ...props }: EntitiesLayoutProps,
+    ref
+  ): JSX.Element {
+    return (
+      <Layout ref={ref} {...spacing} {...props}>
+        {children}
+      </Layout>
+    );
+  }
+);

package/src/components/DataDictionary/components/Layout/components/EntitiesLayout/types.ts

@@ -1,6 +1,8 @@
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
 
-export interface EntitiesLayoutProps extends LayoutSpacing {
+export interface EntitiesLayoutProps {
   children: ReactNode;
+  spacing: LayoutSpacing;
+  style?: CSSProperties; // Required for Fade component. See https://mui.com/material-ui/transitions/#child-requirement.
 }

package/src/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.styles.ts

@@ -11,9 +11,11 @@ const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
 export const Layout = styled("div")<LayoutSpacing>`
   align-self: flex-start;
   background-color: ${PALETTE.BACKGROUND_DEFAULT};
+  display: grid;
+  gap: 12px;
   grid-column: 2;
   grid-row: 1;
-  margin-bottom: ${PB}px;
+  padding-bottom: ${PB}px;
   padding-top: ${({ top }) => top + TITLE_HEIGHT + PT}px;
   position: sticky;
   top: 0;
@@ -23,5 +25,6 @@ export const Layout = styled("div")<LayoutSpacing>`
     grid-column: 1;
     grid-row: auto;
     padding-top: ${PT}px;
+    position: relative;
   }
 `;

package/src/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.tsx

@@ -1,10 +1,16 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { Layout } from "./filtersLayout.styles";
 import { FiltersLayoutProps } from "./types";
 
-export const FiltersLayout = ({
-  children,
-  ...props
-}: FiltersLayoutProps): JSX.Element => {
-  return <Layout {...props}>{children}</Layout>;
-};
+export const FiltersLayout = forwardRef<HTMLDivElement, FiltersLayoutProps>(
+  function FiltersLayout(
+    { children, ...props }: FiltersLayoutProps,
+    ref
+  ): JSX.Element {
+    return (
+      <Layout ref={ref} {...props}>
+        {children}
+      </Layout>
+    );
+  }
+);

package/src/components/DataDictionary/components/Table/hook.ts

@@ -1,5 +1,4 @@
 import {
-  ColumnDef,
   RowData,
   Table,
   TableOptions,
@@ -7,15 +6,16 @@ import {
 } from "@tanstack/react-table";
 import { useMemo } from "react";
 import { Attribute, Class } from "../../../../common/entities";
+import { useDataDictionaryState } from "../../../../providers/dataDictionaryState/hooks/UseDataDictionaryState/hook";
 import { useTableOptions } from "./options/hook";
 import { buildClassMeta, buildTableData } from "./utils";
 
 export const useTable = <T extends RowData = Attribute>(
+  dictionary: string,
   classes: Class<T>[],
-  columnDefs: ColumnDef<T, T[keyof T]>[],
-  tableOptions?: Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel">
+  tableOptions: Omit<TableOptions<T>, "data" | "getCoreRowModel">
 ): Table<T> => {
-  // Build table data.
+  // Table data.
   const data = useMemo(() => buildTableData(classes), [classes]);
 
   // Default table options.
@@ -24,13 +24,17 @@ export const useTable = <T extends RowData = Attribute>(
   // Build class meta.
   const classMeta = useMemo(() => buildClassMeta(classes), [classes]);
 
+  // Table state.
+  const { dataDictionaryState } = useDataDictionaryState();
+  const { dictionaries } = dataDictionaryState;
+  const { state = {} } = dictionaries?.[dictionary] || {};
+
   // Table instance.
   return useReactTable<T>({
     ...defaultTableOptions,
     ...tableOptions,
-    columns: columnDefs,
     data,
-    manualPagination: true,
     meta: { classMeta },
+    state,
   });
 };

package/src/components/DataDictionary/components/Table/options/columnFilters/constants.ts

@@ -4,6 +4,7 @@ import {
   getFilteredRowModel,
 } from "@tanstack/react-table";
 import { arrIncludesSome } from "../../../../../Table/columnDef/columnFilters/filterFn";
+import { fuzzy } from "../../../../../Table/columnDef/globalFilter/filterFn";
 
 export const COLUMN_FILTERS_OPTIONS: Pick<
   ColumnFiltersOptions<RowData>,
@@ -11,6 +12,6 @@ export const COLUMN_FILTERS_OPTIONS: Pick<
 > = {
   enableColumnFilters: true,
   enableFilters: true,
-  filterFns: { arrIncludesSome },
+  filterFns: { arrIncludesSome, fuzzy },
   getFilteredRowModel: getFilteredRowModel(),
 };

package/src/components/DataDictionary/components/Table/options/columnFilters/hook.ts

@@ -4,25 +4,26 @@ import {
   RowData,
   Updater,
 } from "@tanstack/react-table";
-import { Dispatch, SetStateAction, useCallback } from "react";
+import { useCallback } from "react";
 import { Attribute } from "../../../../../../common/entities";
-import { resolveUpdater } from "../../../../../Table/options/updater";
+import { useDataDictionary } from "../../../../../../providers/dataDictionary/hook";
+import { updateColumnFilters } from "../../../../../../providers/dataDictionaryState/actions/updateColumnFilters/dispatch";
+import { useDataDictionaryState } from "../../../../../../providers/dataDictionaryState/hooks/UseDataDictionaryState/hook";
 import { COLUMN_FILTERS_OPTIONS } from "./constants";
 
-export const useColumnFiltersOptions = <T extends RowData = Attribute>({
-  setColumnFilters,
-}: {
-  setColumnFilters: Dispatch<SetStateAction<ColumnFiltersState>>;
-}): ColumnFiltersOptions<T> => {
-  // Column filters change handler.
-  // TODO dispatch to provider with reducer.
+export const useColumnFiltersOptions = <
+  T extends RowData = Attribute
+>(): ColumnFiltersOptions<T> => {
+  const { dictionary } = useDataDictionary();
+  const { dataDictionaryDispatch } = useDataDictionaryState();
+
   const onColumnFiltersChange = useCallback(
     (updaterOrValue: Updater<ColumnFiltersState>): void => {
-      setColumnFilters((old) =>
-        resolveUpdater<ColumnFiltersState>(updaterOrValue, old)
+      dataDictionaryDispatch?.(
+        updateColumnFilters({ dictionary, updaterOrValue })
       );
     },
-    [setColumnFilters]
+    [dataDictionaryDispatch, dictionary]
   );
 
   return {

package/src/components/DataDictionary/components/Table/options/globalFilter/constants.ts

@@ -0,0 +1,14 @@
+import {
+  FilterFnOption,
+  GlobalFilterOptions,
+  RowData,
+} from "@tanstack/react-table";
+
+export const GLOBAL_FILTER_OPTIONS: Pick<
+  GlobalFilterOptions<RowData>,
+  "enableGlobalFilter" | "getColumnCanGlobalFilter" | "globalFilterFn"
+> = {
+  enableGlobalFilter: true,
+  getColumnCanGlobalFilter: () => true,
+  globalFilterFn: "fuzzy" as FilterFnOption<RowData>,
+};

package/src/components/DataDictionary/components/Table/options/globalFilter/hook.ts

@@ -0,0 +1,28 @@
+import { GlobalFilterOptions, RowData, Updater } from "@tanstack/react-table";
+import { useCallback } from "react";
+import { Attribute } from "../../../../../../common/entities";
+import { useDataDictionary } from "../../../../../../providers/dataDictionary/hook";
+import { updateGlobalFilter } from "../../../../../../providers/dataDictionaryState/actions/updateGlobalFilter/dispatch";
+import { useDataDictionaryState } from "../../../../../../providers/dataDictionaryState/hooks/UseDataDictionaryState/hook";
+import { GLOBAL_FILTER_OPTIONS } from "./constants";
+
+export const useGlobalFilterOptions = <
+  T extends RowData = Attribute
+>(): GlobalFilterOptions<T> => {
+  const { dictionary } = useDataDictionary();
+  const { dataDictionaryDispatch } = useDataDictionaryState();
+
+  const onGlobalFilterChange = useCallback(
+    (updaterOrValue: Updater<string | undefined>): void => {
+      dataDictionaryDispatch?.(
+        updateGlobalFilter({ dictionary, updaterOrValue })
+      );
+    },
+    [dataDictionaryDispatch, dictionary]
+  );
+
+  return {
+    ...GLOBAL_FILTER_OPTIONS,
+    onGlobalFilterChange,
+  } as GlobalFilterOptions<T>;
+};

package/src/components/DataDictionary/components/Table/options/hook.ts

@@ -1,15 +1,12 @@
-import {
-  ColumnFiltersState,
-  RowData,
-  TableOptions,
-} from "@tanstack/react-table";
-import { useState } from "react";
+import { RowData, TableOptions } from "@tanstack/react-table";
 import { Attribute } from "../../../../../common/entities";
 import { useColumnFiltersOptions } from "./columnFilters/hook";
 import { CORE_OPTIONS } from "./core/constants";
 import { EXPANDED_OPTIONS } from "./expanded/constants";
 import { FACETED_OPTIONS } from "./faceted/constants";
+import { useGlobalFilterOptions } from "./globalFilter/hook";
 import { GROUPING_OPTIONS } from "./grouping/constants";
+import { PAGINATION_OPTIONS } from "./pagination/constants";
 import { SORTING_OPTIONS } from "./sorting/constants";
 import { VISIBILITY_OPTIONS } from "./visibility/constants";
 
@@ -17,11 +14,11 @@ export const useTableOptions = <T extends RowData = Attribute>(): Omit<
   TableOptions<T>,
   "columns" | "data" | "initialState"
 > => {
-  // Column filters state - to be moved to a provider with a reducer.
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-
   // Column filters options.
-  const columnFiltersOptions = useColumnFiltersOptions<T>({ setColumnFilters });
+  const columnFiltersOptions = useColumnFiltersOptions<T>();
+
+  // Global filter options.
+  const globalFilterOptions = useGlobalFilterOptions<T>();
 
   // Table options.
   return {
@@ -29,9 +26,10 @@ export const useTableOptions = <T extends RowData = Attribute>(): Omit<
     ...CORE_OPTIONS,
     ...EXPANDED_OPTIONS,
     ...FACETED_OPTIONS,
+    ...globalFilterOptions,
     ...GROUPING_OPTIONS,
+    ...PAGINATION_OPTIONS,
     ...SORTING_OPTIONS,
     ...VISIBILITY_OPTIONS,
-    state: { columnFilters },
   } as TableOptions<T>;
 };

package/src/components/DataDictionary/components/Table/options/pagination/constants.ts

@@ -0,0 +1,6 @@
+import { PaginationOptions } from "@tanstack/react-table";
+
+export const PAGINATION_OPTIONS: Pick<PaginationOptions, "autoResetPageIndex"> =
+  {
+    autoResetPageIndex: false, // Temporary fix for hydration issue, see https://github.com/TanStack/table/issues/5026.
+  };

package/src/components/DataDictionary/dataDictionary.tsx

@@ -1,21 +1,27 @@
+import { Fade } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { Attribute } from "../../common/entities";
 import { Entities } from "./components/Entities/entities";
+import { ColumnFilterTags } from "./components/Filters/components/ColumnFilterTags/columnFilterTags";
 import { Filters } from "./components/Filters/filters";
 import { EntitiesLayout as DefaultEntitiesLayout } from "./components/Layout/components/EntitiesLayout/entitiesLayout";
 import { FiltersLayout as DefaultFiltersLayout } from "./components/Layout/components/FiltersLayout/filtersLayout";
 import { OutlineLayout as DefaultOutlineLayout } from "./components/Layout/components/OutlineLayout/outlineLayout";
 import { TitleLayout as DefaultTitleLayout } from "./components/Layout/components/TitleLayout/titleLayout";
 import { Outline as DefaultOutline } from "./components/Outline/outline";
+import { buildClassesOutline } from "./components/Outline/utils";
+import { useTable } from "./components/Table/hook";
 import { Title as DefaultTitle } from "./components/Title/title";
 import { View } from "./dataDictionary.styles";
-import { useDataDictionary } from "./hooks/UseDataDictionary/hook";
+import { useDataDictionaryConfig } from "./hooks/UseDataDictionaryConfig/hook";
 import { useLayoutSpacing } from "./hooks/UseLayoutSpacing/hook";
+import { useMeasureFilters } from "./hooks/UseMeasureFilters/hook";
 import { DataDictionaryProps } from "./types";
 
 export const DataDictionary = <T extends RowData = Attribute>({
   className,
+  dictionary,
   EntitiesLayout = DefaultEntitiesLayout,
   FiltersLayout = DefaultFiltersLayout,
   Outline = DefaultOutline,
@@ -23,22 +29,45 @@ export const DataDictionary = <T extends RowData = Attribute>({
   Title = DefaultTitle,
   TitleLayout = DefaultTitleLayout,
 }: DataDictionaryProps): JSX.Element => {
-  const { outline, table, title } = useDataDictionary<T>();
+  // Get dictionary configuration.
+  const { classes, tableOptions, title } =
+    useDataDictionaryConfig<T>(dictionary);
+
+  // Layout measurements.
+  // Get header and footer dimensions.
   const { spacing } = useLayoutSpacing();
+  // Measure filters dimensions.
+  const { dimensions, filtersRef } = useMeasureFilters();
+  // Update entities' spacing with filters dimensions.
+  const entitiesSpacing = { ...spacing, top: dimensions.height };
+
+  // Table instance.
+  const table = useTable<T>(dictionary, classes, tableOptions);
+
+  // Dictionary outline.
+  const outline = buildClassesOutline<T>(table);
+
   return (
-    <View className={className}>
-      <TitleLayout {...spacing}>
-        <Title title={title} />
-      </TitleLayout>
-      <OutlineLayout {...spacing}>
-        <Outline outline={outline} />
-      </OutlineLayout>
-      <FiltersLayout {...spacing}>
-        <Filters table={table} />
-      </FiltersLayout>
-      <EntitiesLayout {...spacing}>
-        <Entities spacing={spacing} table={table} />
-      </EntitiesLayout>
-    </View>
+    <Fade in={spacing.top > 0}>
+      {/* Fade in when header is measured. */}
+      <View className={className}>
+        <TitleLayout {...spacing}>
+          <Title title={title} />
+        </TitleLayout>
+        <OutlineLayout {...spacing}>
+          <Outline outline={outline} />
+        </OutlineLayout>
+        <FiltersLayout ref={filtersRef} {...spacing}>
+          <Filters table={table} />
+          <ColumnFilterTags table={table} />
+        </FiltersLayout>
+        <Fade in={dimensions.height > 0}>
+          {/* Fade in entities when filters are measured. */}
+          <EntitiesLayout spacing={entitiesSpacing}>
+            <Entities spacing={entitiesSpacing} table={table} />
+          </EntitiesLayout>
+        </Fade>
+      </View>
+    </Fade>
   );
 };

package/src/components/DataDictionary/hooks/UseDataDictionaryConfig/hook.ts

@@ -0,0 +1,38 @@
+import { RowData } from "@tanstack/react-table";
+import { useMemo } from "react";
+import { Attribute, DataDictionaryConfig } from "../../../../common/entities";
+import { useConfig } from "../../../../hooks/useConfig";
+import { UseDataDictionaryConfig } from "./types";
+import { throwDictionaryConfigNotFoundError } from "./utils";
+
+export const useDataDictionaryConfig = <T extends RowData = Attribute>(
+  dictionary: string
+): UseDataDictionaryConfig<T> => {
+  const {
+    config: { dataDictionaries: dataDictionaryConfigs },
+  } = useConfig();
+  // Get dictionary config by matching the current path with the data dictionary path
+  const dataDictionaryConfig = useMemo(() => {
+    if (!dataDictionaryConfigs?.length) return undefined;
+
+    // Find the data dictionary with a path that matches the current route
+    // We check if the current path starts with the dictionary path to handle nested routes
+    return dataDictionaryConfigs.find(
+      (config) => config.path === dictionary
+    ) as DataDictionaryConfig<T> | undefined;
+  }, [dataDictionaryConfigs, dictionary]);
+
+  // Throw error if the dictionary config is not found.
+  if (!dataDictionaryConfig) throwDictionaryConfigNotFoundError(dictionary);
+
+  // Get configured dictionary classes, column definitions and table options.
+  return useMemo(() => {
+    // Using non-null assertion (!) because we've already checked dataDictionaryConfig
+    // exists above and would have thrown an error if undefined.
+    return {
+      classes: dataDictionaryConfig!.dataDictionary.classes,
+      tableOptions: dataDictionaryConfig!.tableOptions,
+      title: dataDictionaryConfig!.dataDictionary.title,
+    };
+  }, [dataDictionaryConfig]);
+};

package/src/components/DataDictionary/hooks/UseDataDictionaryConfig/types.ts

@@ -0,0 +1,8 @@
+import { RowData, TableOptions } from "@tanstack/react-table";
+import { Attribute, Class } from "../../../../common/entities";
+
+export interface UseDataDictionaryConfig<T extends RowData = Attribute> {
+  classes: Class<T>[];
+  tableOptions: Omit<TableOptions<T>, "data" | "getCoreRowModel">;
+  title: string;
+}

package/src/components/DataDictionary/hooks/UseDataDictionaryConfig/utils.ts

@@ -0,0 +1,8 @@
+/**
+ * Error thrown when a dictionary config is not found.
+ * @param dictionary - Dictionary ID.
+ * @throws Error - Dictionary config not found.
+ */
+export function throwDictionaryConfigNotFoundError(dictionary: string): void {
+  throw new Error(`Dictionary config not found for dictionary: ${dictionary}`);
+}

package/src/components/DataDictionary/hooks/UseMeasureFilters/hook.ts

@@ -0,0 +1,27 @@
+import { useRef } from "react";
+import {
+  getBorderBoxSizeHeight,
+  useResizeObserver,
+} from "../../../../hooks/useResizeObserver";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
+import { UseMeasureFilters } from "./types";
+
+export const useMeasureFilters = (): UseMeasureFilters => {
+  // Get header dimensions.
+  const { dimensions } = useLayoutDimensions();
+  const { header } = dimensions;
+
+  // Measure filters dimensions.
+  const filtersRef = useRef<HTMLElement>(null);
+  const filtersRect = useResizeObserver(
+    filtersRef,
+    getBorderBoxSizeHeight,
+    header.height > 0 // Only measure filters height, when header measurement is available.
+  );
+  const { height = 0 } = filtersRect || {};
+
+  return {
+    dimensions: { height },
+    filtersRef,
+  };
+};

package/src/components/DataDictionary/hooks/UseMeasureFilters/types.ts

@@ -0,0 +1,6 @@
+import { RefObject } from "react";
+
+export interface UseMeasureFilters {
+  dimensions: { height: number };
+  filtersRef: RefObject<HTMLElement> | null;
+}

package/src/components/DataDictionary/types.ts

@@ -2,6 +2,7 @@ import { ElementType } from "react";
 import { BaseComponentProps } from "../types";
 
 export interface DataDictionaryProps extends BaseComponentProps {
+  dictionary: string;
   EntitiesLayout?: ElementType;
   FiltersLayout?: ElementType;
   Outline?: ElementType;

package/src/components/Export/components/DownloadCurlCommand/downloadCurlCommand.tsx

@@ -4,6 +4,7 @@ import { Filters } from "../../../../common/entities";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import { FileManifestType } from "../../../../hooks/useFileManifest/common/entities";
 import { useFileManifest } from "../../../../hooks/useFileManifest/useFileManifest";
+import { useFileManifestFileCount } from "../../../../hooks/useFileManifest/useFileManifestFileCount";
 import {
   FileLocation,
   useRequestFileLocation,
@@ -30,6 +31,7 @@ interface DownloadCurlCommandProps {
   filters: Filters; // Initializes bulk download filters.
   formFacet: FormFacet;
   manifestDownloadFormat?: ManifestDownloadFormat;
+  speciesFacetName: string;
 }
 
 export const DownloadCurlCommand = ({
@@ -41,8 +43,10 @@ export const DownloadCurlCommand = ({
   filters,
   formFacet,
   manifestDownloadFormat = MANIFEST_DOWNLOAD_FORMAT.CURL,
+  speciesFacetName,
 }: DownloadCurlCommandProps): JSX.Element => {
   useFileManifest(filters, fileSummaryFacetName);
+  useFileManifestFileCount(filters, speciesFacetName, fileSummaryFacetName);
   const [executionEnvironment, setExecutionEnvironment] =
     useState<ExecutionEnvironment>(BULK_DOWNLOAD_EXECUTION_ENVIRONMENT.BASH);
   const {