@databiosphere/findable-ui 35.0.3 → 35.2.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "35.0.3"
+  ".": "35.2.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [35.2.0](https://github.com/DataBiosphere/findable-ui/compare/v35.1.0...v35.2.0) (2025-06-16)
+
+
+### Features
+
+* add table <code> element ([#525](https://github.com/DataBiosphere/findable-ui/issues/525)) ([#527](https://github.com/DataBiosphere/findable-ui/issues/527)) ([02cb3b6](https://github.com/DataBiosphere/findable-ui/commit/02cb3b698b25a4295fc5ea2048541869301b918f))
+
+
+### Bug Fixes
+
+* make user request project metadata by clicking the request link button ([#530](https://github.com/DataBiosphere/findable-ui/issues/530)) ([#531](https://github.com/DataBiosphere/findable-ui/issues/531)) ([b645e0f](https://github.com/DataBiosphere/findable-ui/commit/b645e0fe5604dfc7fc195f91747d4a7985b39e4d))
+
+## [35.1.0](https://github.com/DataBiosphere/findable-ui/compare/v35.0.3...v35.1.0) (2025-06-05)
+
+
+### Features
+
+* added handling of multiple dictionaries [#423](https://github.com/DataBiosphere/findable-ui/issues/423) ([#523](https://github.com/DataBiosphere/findable-ui/issues/523)) ([212d09a](https://github.com/DataBiosphere/findable-ui/commit/212d09a55f0699a19f5a9dd9c5f917bd46de7a14))
+
 ## [35.0.3](https://github.com/DataBiosphere/findable-ui/compare/v35.0.2...v35.0.3) (2025-06-04)
 
 

package/lib/common/entities.d.ts

@@ -65,6 +65,7 @@ export interface DataDictionary<T extends RowData = Attribute> {
 export interface DataDictionaryConfig<T extends RowData = Attribute> {
     columnDefs: ColumnDef<T, T[keyof T]>[];
     dataDictionary: DataDictionary<T>;
+    path: string;
     tableOptions?: Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel">;
 }
 /**

package/lib/components/DataDictionary/components/Table/hook.js

@@ -15,6 +15,7 @@ export const useTable = (classes, columnDefs, tableOptions) => {
         ...tableOptions,
         columns: columnDefs,
         data,
+        manualPagination: true,
         meta: { classMeta },
     });
 };

package/lib/components/DataDictionary/hooks/UseDataDictionary/hook.js

@@ -1,11 +1,24 @@
+import { useRouter } from "next/router";
 import { useMemo } from "react";
 import { useConfig } from "../../../../hooks/useConfig";
 import { buildClassesOutline } from "../../components/Outline/utils";
 import { useTable } from "../../components/Table/hook";
 export const useDataDictionary = () => {
     const { config: { dataDictionaries: dataDictionaryConfigs }, } = useConfig();
-    // Get dictionary config.
-    const dataDictionaryConfig = dataDictionaryConfigs?.[0]; // TODO: Handle multiple data dictionaries
+    // Dynamic paths must be resolved at this point otherwise the initial settings
+    // passed to useTable on subsequent renders will be ignored (as the table will have
+    // already been initialized).
+    const router = useRouter();
+    const query = router.query;
+    const { dictionary } = query;
+    // 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);
+    }, [dataDictionaryConfigs, dictionary]);
     // Get configured dictionary classes, column definitions and table options.
     const { classes, columnDefs, tableOptions, title } = useMemo(() => {
         return {

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestDownload/fileManifestDownload.js

@@ -1,49 +1,41 @@
-import { ButtonBase, TableBody, TableCell, TableRow, Tooltip, } from "@mui/material";
+import { Button, TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
 import copy from "copy-to-clipboard";
-import React, { useRef } from "react";
+import React from "react";
 import { useDownloadStatus } from "../../../../../../../../hooks/useDownloadStatus";
 import { useFileManifestDownload } from "../../../../../../../../hooks/useFileManifest/useFileManifestDownload";
 import { useLoginGuard } from "../../../../../../../../providers/loginGuard/hook";
+import { BUTTON_PROPS } from "../../../../../../../common/Button/constants";
 import { ButtonGroup } from "../../../../../../../common/ButtonGroup/buttonGroup";
-import { ButtonGroupButton } from "../../../../../../../common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton";
 import { ContentCopyIconSmall, DownloadIconSmall, } from "../../../../../../../common/CustomIcon/common/constants";
 import { FluidPaper, GridPaper, } from "../../../../../../../common/Paper/paper.styles";
 import { Loading, LOADING_PANEL_STYLE, } from "../../../../../../../Loading/loading";
 import { GridTable } from "../../../../../../../Table/common/gridTable.styles";
+import { TOOLTIP_PROPS } from "../../constants";
 import { SectionTitle, TableContainer, } from "../../manifestDownloadEntity.styles";
 export const FileManifestDownload = ({ filters, }) => {
-    const downloadRef = useRef(null);
     const { disabled, message } = useDownloadStatus();
-    const { fileName, isIdle, isLoading, manifestURL } = useFileManifestDownload(filters, disabled);
-    const isInProgress = (isIdle || isLoading) && !disabled;
-    const isReady = Boolean(manifestURL) || disabled;
+    const { fileName, isIdle, isLoading, manifestURL, requestManifest } = useFileManifestDownload(filters);
     // Prompt user for login before download and copy, if required.
     const { requireLogin } = useLoginGuard();
-    // Copies file manifest.
-    const copyManifestURL = (url) => {
-        if (!url)
-            return;
-        copy(url);
-    };
-    // Downloads file manifest.
-    const downloadManifestURL = () => {
-        downloadRef.current?.click();
-    };
     return (React.createElement(FluidPaper, null,
         React.createElement(GridPaper, null,
             React.createElement(SectionTitle, null, "File Manifest"),
             React.createElement(TableContainer, null,
-                React.createElement(Loading, { loading: isInProgress, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
-                React.createElement(GridTable, { gridTemplateColumns: isReady ? "auto 1fr" : "1fr" },
+                React.createElement(Loading, { loading: isLoading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
+                React.createElement(GridTable, { gridTemplateColumns: "auto 1fr" },
                     React.createElement(TableBody, null,
-                        React.createElement(TableRow, null, isInProgress ? (React.createElement(TableCell, null)) : isReady ? (React.createElement(React.Fragment, null,
-                            React.createElement(TableCell, null,
-                                React.createElement(ButtonBase, { disabled: disabled, href: manifestURL ?? "", ref: downloadRef, sx: { display: "none" } }),
-                                React.createElement(Tooltip, { arrow: true, title: message },
-                                    React.createElement("span", null,
-                                        React.createElement(ButtonGroup, { Buttons: [
-                                                React.createElement(ButtonGroupButton, { key: "download", action: "Download file manifest", disabled: disabled, label: React.createElement(DownloadIconSmall, null), onClick: () => requireLogin(downloadManifestURL) }),
-                                                React.createElement(ButtonGroupButton, { key: "copy", action: "Copy file manifest", disabled: disabled, label: React.createElement(ContentCopyIconSmall, null), onClick: () => requireLogin(() => copyManifestURL(manifestURL)) }),
-                                            ] })))),
-                            React.createElement(TableCell, null, fileName))) : (React.createElement(TableCell, null, "The manifest is not available for this project.")))))))));
+                        React.createElement(TableRow, null, isIdle || isLoading ? (React.createElement(TableCell, null,
+                            React.createElement(Tooltip, { ...TOOLTIP_PROPS, title: message },
+                                React.createElement("span", null,
+                                    React.createElement(Button, { ...BUTTON_PROPS.PRIMARY_CONTAINED, disabled: disabled || isLoading, onClick: () => requireLogin(requestManifest) }, "Request link"))))) : (React.createElement(React.Fragment, null,
+                            manifestURL && (React.createElement(TableCell, null,
+                                React.createElement(ButtonGroup, { Buttons: [
+                                        React.createElement(Button, { key: "download", download: true, href: manifestURL },
+                                            React.createElement(DownloadIconSmall, null)),
+                                        React.createElement(Button, { key: "copy", onClick: () => copy(manifestURL) },
+                                            React.createElement(ContentCopyIconSmall, null)),
+                                    ] }))),
+                            React.createElement(TableCell, null, manifestURL
+                                ? fileName
+                                : "The manifest is not available for this project."))))))))));
 };

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestSpreadsheet/fileManifestSpreadsheet.js

@@ -1,53 +1,38 @@
-import { ButtonBase, TableBody, TableCell, TableRow, Tooltip, } from "@mui/material";
+import { Button, TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
 import copy from "copy-to-clipboard";
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import { useDownloadStatus } from "../../../../../../../../hooks/useDownloadStatus";
 import { useFileManifestSpreadsheet } from "../../../../../../../../hooks/useFileManifest/useFileManifestSpreadsheet";
-import { useRequestFileLocation } from "../../../../../../../../hooks/useRequestFileLocation";
+import { BUTTON_PROPS } from "../../../../../../../common/Button/constants";
 import { ButtonGroup } from "../../../../../../../common/ButtonGroup/buttonGroup";
-import { ButtonGroupButton } from "../../../../../../../common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton";
 import { ContentCopyIconSmall, DownloadIconSmall, } from "../../../../../../../common/CustomIcon/common/constants";
 import { FluidPaper, GridPaper, } from "../../../../../../../common/Paper/paper.styles";
 import { Loading, LOADING_PANEL_STYLE, } from "../../../../../../../Loading/loading";
 import { GridTable } from "../../../../../../../Table/common/gridTable.styles";
+import { TOOLTIP_PROPS } from "../../constants";
 import { SectionTitle, TableContainer, } from "../../manifestDownloadEntity.styles";
 export const FileManifestSpreadsheet = ({ filters, }) => {
-    const downloadRef = useRef(null);
     const { disabled, message } = useDownloadStatus();
-    const { exists, fileName, fileUrl } = useFileManifestSpreadsheet(filters, disabled) || {};
-    const { data, isLoading, run } = useRequestFileLocation(fileUrl);
-    const spreadsheetURL = data?.location;
-    const isInProgress = (exists === undefined || isLoading) && !disabled;
-    const isReady = Boolean(spreadsheetURL) || disabled;
-    // Copies metadata spreadsheet.
-    const copyMetadataURL = (url) => {
-        if (!url)
-            return;
-        copy(url);
-    };
-    // Downloads metadata spreadsheet.
-    const downloadMetadataURL = () => {
-        downloadRef.current?.click();
-    };
-    // Requests metadata spreadsheet.
-    useEffect(() => {
-        run();
-    }, [fileUrl, run]);
+    const { fileName, isIdle = false, isLoading = false, requestManifest, spreadsheetUrl, } = useFileManifestSpreadsheet(filters) || {};
     return (React.createElement(FluidPaper, null,
         React.createElement(GridPaper, null,
             React.createElement(SectionTitle, null, "Metadata"),
             React.createElement(TableContainer, null,
-                React.createElement(Loading, { loading: isInProgress, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
-                React.createElement(GridTable, { gridTemplateColumns: isReady ? "auto 1fr" : "1fr" },
+                React.createElement(Loading, { loading: isLoading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
+                React.createElement(GridTable, { gridTemplateColumns: "auto 1fr" },
                     React.createElement(TableBody, null,
-                        React.createElement(TableRow, null, isInProgress ? (React.createElement(TableCell, null)) : isReady ? (React.createElement(React.Fragment, null,
-                            React.createElement(TableCell, null,
-                                React.createElement(ButtonBase, { disabled: disabled, download: true, href: spreadsheetURL ?? "", ref: downloadRef, sx: { display: "none" } }),
-                                React.createElement(Tooltip, { arrow: true, title: message },
-                                    React.createElement("span", null,
-                                        React.createElement(ButtonGroup, { Buttons: [
-                                                React.createElement(ButtonGroupButton, { key: "download", action: "Download metadata spreadsheet", disabled: disabled, label: React.createElement(DownloadIconSmall, null), onClick: downloadMetadataURL }),
-                                                React.createElement(ButtonGroupButton, { key: "copy", action: "Copy metadata spreadsheet", disabled: disabled, label: React.createElement(ContentCopyIconSmall, null), onClick: () => copyMetadataURL(spreadsheetURL) }),
-                                            ] })))),
-                            React.createElement(TableCell, null, fileName))) : (React.createElement(TableCell, null, "The metadata is not available for this project.")))))))));
+                        React.createElement(TableRow, null, isIdle || isLoading ? (React.createElement(TableCell, null,
+                            React.createElement(Tooltip, { ...TOOLTIP_PROPS, title: message },
+                                React.createElement("span", null,
+                                    React.createElement(Button, { ...BUTTON_PROPS.PRIMARY_CONTAINED, disabled: disabled || isLoading, onClick: () => requestManifest?.() }, "Request link"))))) : (React.createElement(React.Fragment, null,
+                            spreadsheetUrl && (React.createElement(TableCell, null,
+                                React.createElement(ButtonGroup, { Buttons: [
+                                        React.createElement(Button, { key: "download", download: true, href: spreadsheetUrl },
+                                            React.createElement(DownloadIconSmall, null)),
+                                        React.createElement(Button, { key: "copy", onClick: () => copy(spreadsheetUrl) },
+                                            React.createElement(ContentCopyIconSmall, null)),
+                                    ] }))),
+                            React.createElement(TableCell, null, spreadsheetUrl
+                                ? fileName
+                                : "The metadata is not available for this project."))))))))));
 };

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/constants.d.ts

@@ -0,0 +1,2 @@
+import { TooltipProps } from "@mui/material";
+export declare const TOOLTIP_PROPS: Partial<TooltipProps>;

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/constants.js

@@ -0,0 +1,22 @@
+export const TOOLTIP_PROPS = {
+    arrow: true,
+    slotProps: {
+        popper: {
+            modifiers: [
+                {
+                    name: "offset",
+                    options: {
+                        offset: [0, -4],
+                    },
+                },
+                {
+                    name: "preventOverflow",
+                    options: { padding: 8 },
+                },
+            ],
+        },
+        tooltip: {
+            sx: { maxWidth: "none" },
+        },
+    },
+};

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.d.ts

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

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { CHIP_PROPS } from "../../../../../../styles/common/mui/chip";
+import { StyledChip } from "./codeCell.styles";
+export const CodeCell = ({ className, getValue, }) => {
+    const value = getValue();
+    if (!value)
+        return null;
+    return (React.createElement(StyledChip, { className: className, color: CHIP_PROPS.COLOR.DEFAULT, label: value, size: CHIP_PROPS.SIZE.SMALL }));
+};

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & 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;
+}, "label" | "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.styles.js

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+import { Chip } from "@mui/material";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+export const StyledChip = styled(Chip) `
+  border-radius: 4px;
+  box-shadow: 0 0 0 2px ${PALETTE.COMMON_WHITE};
+  height: auto;
+  justify-self: flex-start;
+  min-width: 0;
+
+  .MuiChip-label {
+    padding: 2px 8px;
+    white-space: normal;
+  }
+`;

package/lib/hooks/useFileManifest/useFileManifestDownload.d.ts

@@ -4,11 +4,11 @@ export interface ManifestDownload {
     isIdle: boolean;
     isLoading: boolean;
     manifestURL?: string;
+    requestManifest: () => void;
 }
 /**
  * Returns file manifest download url and file name.
  * @param filters - Filters.
- * @param disabled - Disabled.
  * @returns file manifest download url and file name.
  */
-export declare const useFileManifestDownload: (filters: Filters, disabled: boolean) => ManifestDownload;
+export declare const useFileManifestDownload: (filters: Filters) => ManifestDownload;

package/lib/hooks/useFileManifest/useFileManifestDownload.js

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { MANIFEST_DOWNLOAD_FORMAT } from "../../apis/azul/common/entities";
 import { BULK_DOWNLOAD_EXECUTION_ENVIRONMENT } from "../../components/Export/common/entities";
 import { useCatalog } from "../useCatalog";
@@ -8,10 +7,9 @@ import { buildRequestManifest } from "../useRequestManifest/utils";
 /**
  * Returns file manifest download url and file name.
  * @param filters - Filters.
- * @param disabled - Disabled.
  * @returns file manifest download url and file name.
  */
-export const useFileManifestDownload = (filters, disabled) => {
+export const useFileManifestDownload = (filters) => {
     // Retrieve the endpoint URL from configured data source.
     const config = useConfig();
     const endpointUrl = config.config.dataSource.url;
@@ -19,20 +17,15 @@ export const useFileManifestDownload = (filters, disabled) => {
     const catalog = useCatalog(); // catalog should be defined.
     // Build request manifest request URL.
     const { requestMethod, requestUrl } = buildRequestManifest(endpointUrl, catalog, filters, MANIFEST_DOWNLOAD_FORMAT.COMPACT);
-    const { data, isIdle, isLoading, run } = useRequestFileLocation(requestUrl, requestMethod);
+    const { data, isIdle, isLoading, run: requestManifest, } = useRequestFileLocation(requestUrl, requestMethod);
     const manifestURL = getManifestDownloadURL(data);
     const fileName = getManifestDownloadFileName(data);
-    // Requests file manifest.
-    useEffect(() => {
-        if (disabled)
-            return;
-        run();
-    }, [disabled, requestUrl, run]);
     return {
         fileName,
         isIdle,
         isLoading,
         manifestURL,
+        requestManifest,
     };
 };
 /**

package/lib/hooks/useFileManifest/useFileManifestSpreadsheet.d.ts

@@ -1,14 +1,15 @@
 import { Filters } from "../../common/entities";
 export interface ManifestSpreadsheet {
-    exists?: boolean;
-    fileFormat?: string;
     fileName?: string;
     fileUrl?: string;
+    isIdle?: boolean;
+    isLoading?: boolean;
+    requestManifest?: () => void;
+    spreadsheetUrl?: string;
 }
 /**
  * Returns file manifest spreadsheet.
  * @param filters - Filters.
- * @param disabled - Disabled.
  * @returns file manifest spreadsheet.
  */
-export declare const useFileManifestSpreadsheet: (filters: Filters, disabled: boolean) => ManifestSpreadsheet | undefined;
+export declare const useFileManifestSpreadsheet: (filters: Filters) => Omit<ManifestSpreadsheet, "fileUrl">;

package/lib/hooks/useFileManifest/useFileManifestSpreadsheet.js

@@ -1,17 +1,17 @@
-import { useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { APIEndpoints, } from "../../apis/azul/common/entities";
 import { fetchEntitiesFromURL } from "../../entity/common/service";
 import { fetchQueryParams } from "../../utils/fetchQueryParams";
 import { useAsync } from "../useAsync";
 import { useCatalog } from "../useCatalog";
 import { useFetchRequestURL } from "../useFetchRequestURL";
+import { useRequestFileLocation } from "../useRequestFileLocation";
 /**
  * Returns file manifest spreadsheet.
  * @param filters - Filters.
- * @param disabled - Disabled.
  * @returns file manifest spreadsheet.
  */
-export const useFileManifestSpreadsheet = (filters, disabled) => {
+export const useFileManifestSpreadsheet = (filters) => {
     // Determine catalog.
     const catalog = useCatalog(); // catalog should be defined.
     // Build request params.
@@ -19,16 +19,26 @@ export const useFileManifestSpreadsheet = (filters, disabled) => {
     // Build request URL.
     const requestURL = useFetchRequestURL(APIEndpoints.FILES, requestParams);
     // Fetch files to determine if file exists.
-    const { data, run } = useAsync();
+    const { data: files, isIdle, isLoading: isFilesLoading, run: requestFiles, } = useAsync();
     // Grab manifest spreadsheet.
-    const manifestSpreadsheet = useMemo(() => getManifestSpreadsheet(data?.hits), [data]);
+    const { fileName, fileUrl } = useMemo(() => getManifestSpreadsheet(files?.hits), [files]);
+    // Fetch file manifest.
+    const { data, isLoading, run } = useRequestFileLocation(fileUrl);
     // Fetch response from files endpoint.
+    const requestManifest = useCallback(() => {
+        requestFiles(fetchEntitiesFromURL(requestURL, undefined));
+    }, [requestFiles, requestURL]);
+    // Fetch file manifest.
     useEffect(() => {
-        if (disabled)
-            return;
-        run(fetchEntitiesFromURL(requestURL, undefined));
-    }, [disabled, requestURL, run]);
-    return manifestSpreadsheet;
+        run();
+    }, [fileUrl, run]);
+    return {
+        fileName,
+        isIdle,
+        isLoading: isFilesLoading || isLoading,
+        requestManifest,
+        spreadsheetUrl: data?.location,
+    };
 };
 /**
  * Prepend "/fetch" to the path of the specified file URL, if not already included.
@@ -52,20 +62,14 @@ function buildFetchFileUrl(fileUrl) {
  * @returns manifest spreadsheet.
  */
 function getManifestSpreadsheet(files) {
-    if (!files) {
-        return;
-    }
+    if (!files)
+        return { fileName: undefined, fileUrl: undefined };
     // Handle case where file does not exist.
-    if (files.length === 0) {
-        return {
-            exists: false,
-        };
-    }
+    if (files.length === 0)
+        return { fileName: undefined, fileUrl: undefined };
     // Project manifest spreadsheet exists.
     const file = files[0];
     return {
-        exists: true,
-        fileFormat: file.files[0]?.format,
         fileName: file.files[0]?.name,
         fileUrl: buildFetchFileUrl(file.files[0]?.url),
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "35.0.3",
+  "version": "35.2.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/common/entities.ts

@@ -74,6 +74,7 @@ export interface DataDictionary<T extends RowData = Attribute> {
 export interface DataDictionaryConfig<T extends RowData = Attribute> {
   columnDefs: ColumnDef<T, T[keyof T]>[];
   dataDictionary: DataDictionary<T>;
+  path: string; // Used as a key to find the dictionary to display
   tableOptions?: Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel">;
 }
 

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

@@ -30,6 +30,7 @@ export const useTable = <T extends RowData = Attribute>(
     ...tableOptions,
     columns: columnDefs,
     data,
+    manualPagination: true,
     meta: { classMeta },
   });
 };

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

@@ -1,4 +1,5 @@
 import { RowData } from "@tanstack/react-table";
+import { useRouter } from "next/router";
 import { useMemo } from "react";
 import { Attribute, DataDictionaryConfig } from "../../../../common/entities";
 import { useConfig } from "../../../../hooks/useConfig";
@@ -12,11 +13,23 @@ export const useDataDictionary = <
   const {
     config: { dataDictionaries: dataDictionaryConfigs },
   } = useConfig();
+  // Dynamic paths must be resolved at this point otherwise the initial settings
+  // passed to useTable on subsequent renders will be ignored (as the table will have
+  // already been initialized).
+  const router = useRouter();
+  const query = router.query;
+  const { dictionary } = query;
 
-  // Get dictionary config.
-  const dataDictionaryConfig = dataDictionaryConfigs?.[0] as
-    | DataDictionaryConfig<T>
-    | undefined; // TODO: Handle multiple data dictionaries
+  // 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]);
 
   // Get configured dictionary classes, column definitions and table options.
   const { classes, columnDefs, tableOptions, title } = useMemo(() => {