@databiosphere/findable-ui 35.0.2 → 35.1.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "35.0.2"
+  ".": "35.1.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [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)
+
+
+### Bug Fixes
+
+* fix catalog and feature flag state in url on page refresh ([#520](https://github.com/DataBiosphere/findable-ui/issues/520)) ([#521](https://github.com/DataBiosphere/findable-ui/issues/521)) ([4f08211](https://github.com/DataBiosphere/findable-ui/commit/4f082111837530d8f045329867b276aaeb66d389))
+
 ## [35.0.2](https://github.com/DataBiosphere/findable-ui/compare/v35.0.1...v35.0.2) (2025-06-03)
 
 

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/providers/exploreState/entities/state.js

@@ -14,22 +14,25 @@ export function buildNextEntities(state, entityListType, nextEntityState) {
     for (const [entityPath, entity] of Object.entries(state.entities)) {
         // Grab the entity key for the entity.
         const entityKey = entity.entityKey;
-        if (entityKey !== key) {
-            // For entities that do not share the same key, leave the context unchanged.
-            entities[entityPath] = entity;
-            continue;
-        }
         // Clone the entity context.
         const entityContext = { ...entity };
-        // Update entity context with "shared" context (e.g. filterState).
-        entityContext.query = buildQuery(entityPath, {
-            ...nextEntityState,
+        // Build the params object.
+        // All entities share the same catalog and feature flag state.
+        // Filter state is default to an empty array and updated below,
+        // if the entity key matches the current entity key.
+        const params = {
             catalogState: state.catalogState,
             featureFlagState: state.featureFlagState,
-        });
+            filterState: [],
+        };
+        // Update entity context with "shared" context (e.g. filterState).
+        if (entityKey === key) {
+            Object.assign(params, nextEntityState);
+        }
         // At some point, we may need to update the entity context with additional properties that
         // are not "shared" (e.g. column grouping).
         // For now, this is not needed and so we update entities with the updated entity context and continue.
+        entityContext.query = buildQuery(entityPath, params);
         entities[entityPath] = entityContext;
     }
     return entities;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "35.0.2",
+  "version": "35.1.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(() => {

package/src/providers/exploreState/entities/state.ts

@@ -24,25 +24,28 @@ export function buildNextEntities(
     // Grab the entity key for the entity.
     const entityKey = entity.entityKey;
 
-    if (entityKey !== key) {
-      // For entities that do not share the same key, leave the context unchanged.
-      entities[entityPath] = entity;
-      continue;
-    }
-
     // Clone the entity context.
     const entityContext = { ...entity };
 
-    // Update entity context with "shared" context (e.g. filterState).
-    entityContext.query = buildQuery(entityPath, {
-      ...nextEntityState,
+    // Build the params object.
+    // All entities share the same catalog and feature flag state.
+    // Filter state is default to an empty array and updated below,
+    // if the entity key matches the current entity key.
+    const params: EntityState = {
       catalogState: state.catalogState,
       featureFlagState: state.featureFlagState,
-    });
+      filterState: [],
+    };
+
+    // Update entity context with "shared" context (e.g. filterState).
+    if (entityKey === key) {
+      Object.assign(params, nextEntityState);
+    }
 
     // At some point, we may need to update the entity context with additional properties that
     // are not "shared" (e.g. column grouping).
     // For now, this is not needed and so we update entities with the updated entity context and continue.
+    entityContext.query = buildQuery(entityPath, params);
     entities[entityPath] = entityContext;
   }
 

package/lib/components/DataDictionary/components/Table/columns/columnDef.d.ts

@@ -1,6 +0,0 @@
-import { ColumnDef } from "@tanstack/react-table";
-import { Attribute } from "../../../../../common/entities";
-import { COLUMN_IDENTIFIER } from "./columnIdentifier";
-import { AttributeValue } from "./types";
-export declare const COLUMN_DEF: Record<keyof typeof COLUMN_IDENTIFIER, ColumnDef<Attribute, AttributeValue>>;
-export declare const COLUMN_DEFS: ColumnDef<Attribute, AttributeValue>[];

package/lib/components/DataDictionary/components/Table/columns/columnDef.js

@@ -1,33 +0,0 @@
-import { BasicCell } from "../components/BasicCell/basicCell";
-import { COLUMN_IDENTIFIER } from "./columnIdentifier";
-const COLUMN_DEF_DESCRIPTION = {
-    accessorFn: (row) => row.description,
-    cell: (props) => BasicCell({ ...props }),
-    header: "Description",
-    id: COLUMN_IDENTIFIER.DESCRIPTION,
-    meta: { width: { max: "2fr", min: "480px" } },
-};
-const COLUMN_DEF_KEY = {
-    accessorFn: (row) => row.key,
-    cell: (props) => BasicCell({ ...props }),
-    header: "Key",
-    id: COLUMN_IDENTIFIER.KEY,
-    meta: { width: { max: "1fr", min: "180px" } },
-};
-const COLUMN_DEF_LABEL = {
-    accessorFn: (row) => row.label,
-    cell: (props) => BasicCell({ ...props }),
-    header: "Label",
-    id: COLUMN_IDENTIFIER.LABEL,
-    meta: { width: { max: "1fr", min: "200px" } },
-};
-export const COLUMN_DEF = {
-    DESCRIPTION: COLUMN_DEF_DESCRIPTION,
-    KEY: COLUMN_DEF_KEY,
-    LABEL: COLUMN_DEF_LABEL,
-};
-export const COLUMN_DEFS = [
-    COLUMN_DEF.LABEL,
-    COLUMN_DEF.KEY,
-    COLUMN_DEF.DESCRIPTION,
-];

package/lib/components/DataDictionary/components/Table/columns/columnIdentifier.d.ts

@@ -1,5 +0,0 @@
-export declare const COLUMN_IDENTIFIER: {
-    readonly DESCRIPTION: "description";
-    readonly KEY: "key";
-    readonly LABEL: "label";
-};

package/lib/components/DataDictionary/components/Table/columns/columnIdentifier.js

@@ -1,5 +0,0 @@
-export const COLUMN_IDENTIFIER = {
-    DESCRIPTION: "description",
-    KEY: "key",
-    LABEL: "label",
-};

package/lib/components/DataDictionary/components/Table/columns/types.d.ts

@@ -1,2 +0,0 @@
-import { Attribute } from "../../../../../common/entities";
-export type AttributeValue = Attribute[keyof Attribute];

package/lib/components/DataDictionary/components/Table/columns/types.js

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

package/lib/components/DataDictionary/components/Table/components/BasicCell/types.d.ts

@@ -1,4 +0,0 @@
-import { CellContext } from "@tanstack/react-table";
-import { Attribute } from "../../../../../../common/entities";
-import { AttributeValue } from "../../columns/types";
-export type BasicCellProps = CellContext<Attribute, AttributeValue>;

package/lib/components/DataDictionary/components/Table/components/BasicCell/types.js

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

package/lib/components/Detail/components/Table/components/TableHead/tableHead.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { Table } from "@tanstack/react-table";
-import { ROW_DIRECTION } from "../../../../../Table/common/entities";
-export interface TableBodyProps<T> {
-    rowDirection: ROW_DIRECTION;
-    tableInstance: Table<T>;
-}
-export declare const TableHead: <T extends object>({ rowDirection, tableInstance, }: TableBodyProps<T>) => JSX.Element;

package/lib/components/Detail/components/Table/components/TableHead/tableHead.js

@@ -1,36 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableHead = void 0;
-const material_1 = require("@mui/material");
-const react_table_1 = require("@tanstack/react-table");
-const react_1 = __importStar(require("react"));
-const entities_1 = require("../../../../../Table/common/entities");
-const TableHead = ({ rowDirection, tableInstance, }) => {
-    return (react_1.default.createElement(react_1.Fragment, null, rowDirection === entities_1.ROW_DIRECTION.DEFAULT &&
-        tableInstance.getHeaderGroups().map((headerGroup) => (react_1.default.createElement(material_1.TableHead, { key: headerGroup.id },
-            react_1.default.createElement(material_1.TableRow, null, headerGroup.headers.map((header) => (react_1.default.createElement(material_1.TableCell, { key: header.id }, (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()))))))))));
-};
-exports.TableHead = TableHead;

package/lib/components/Filter/components/Filter/filter.stories.d.ts

@@ -1,25 +0,0 @@
-import { StoryObj } from "@storybook/react";
-import React from "react";
-declare const meta: {
-    argTypes: {
-        tags: {
-            control: {
-                disable: true;
-            };
-        };
-    };
-    component: ({ categorySection, categoryView, closeAncestor, isFilterDrawer, onFilter, tags, trackFilterOpened, }: import("./filter").FilterProps) => JSX.Element;
-    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        categorySection?: string | undefined;
-        categoryView: import("../../../../common/entities").SelectCategoryView;
-        closeAncestor?: (() => void) | undefined;
-        isFilterDrawer: boolean;
-        onFilter: import("../../../../hooks/useCategoryFilter").OnFilterFn;
-        tags?: React.ReactNode;
-        trackFilterOpened?: import("../../../../config/entities").TrackFilterOpenedFunction | undefined;
-    }>) => JSX.Element)[];
-    title: string;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const FilterStory: Story;

package/lib/components/Filter/components/Filter/filter.stories.js

@@ -1,42 +0,0 @@
-import React from "react";
-import { Filter } from "./filter";
-const meta = {
-    argTypes: {
-        tags: { control: { disable: true } },
-    },
-    component: Filter,
-    decorators: [
-        (Story) => (React.createElement("div", { style: { padding: "8px 12px 8px 16px", width: 264 } },
-            React.createElement(Story, null))),
-    ],
-    title: "Components/Filter/Filter",
-};
-export default meta;
-const onFilter = () => {
-    // onFilter function
-};
-export const FilterStory = {
-    args: {
-        categoryView: {
-            isDisabled: false,
-            key: "genusSpecies",
-            label: "Genus Species",
-            values: [
-                {
-                    count: 12,
-                    key: "homoSapiens",
-                    label: "Homo sapiens",
-                    selected: false,
-                },
-                {
-                    count: 6,
-                    key: "musMusculus",
-                    label: "Mus musculus",
-                    selected: false,
-                },
-            ],
-        },
-        isFilterDrawer: false,
-        onFilter,
-    },
-};

package/lib/components/Filter/components/FilterTag/filterTag.stories.d.ts

@@ -1,16 +0,0 @@
-import { StoryObj } from "@storybook/react";
-declare const meta: {
-    argTypes: {
-        label: {
-            control: "text";
-        };
-        superseded: {
-            control: "boolean";
-        };
-    };
-    component: ({ label, onRemove, superseded, }: import("./filterTag").FilterTagProps) => JSX.Element;
-    title: string;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const FilterTagStory: Story;

package/lib/components/Filter/components/FilterTag/filterTag.stories.js

@@ -1,17 +0,0 @@
-import { FilterTag } from "./filterTag";
-const meta = {
-    argTypes: {
-        label: { control: "text" },
-        superseded: { control: "boolean" },
-    },
-    component: FilterTag,
-    title: "Components/Filter/FilterTag",
-};
-export default meta;
-export const FilterTagStory = {
-    args: {
-        label: "Male",
-        onRemove: () => { },
-        superseded: false,
-    },
-};

package/lib/components/Filter/components/Filters/filters.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Filters } from "./filters";
-declare const _default: Meta<typeof Filters>;
-export default _default;
-type Story = StoryObj<typeof Filters>;
-export declare const FiltersStory: Story;

package/lib/components/Filter/components/Filters/filters.stories.js

@@ -1,91 +0,0 @@
-import React from "react";
-import { FilterMenuStory } from "../FilterMenu/filterMenu.stories";
-import { Filters } from "./filters";
-export default {
-    argTypes: {
-        categories: { control: { disable: true } },
-        onFilter: { control: { disable: true } },
-    },
-    component: Filters,
-    decorators: [
-        (Story) => (React.createElement("div", { style: { width: 264 } },
-            React.createElement(Story, null))),
-    ],
-    title: "Components/Filter/Filters",
-};
-const onFilter = () => {
-    // onFilter function
-};
-const defaultValues = [
-    {
-        count: 1,
-        key: "item1",
-        label: "Item 1",
-        selected: false,
-    },
-    {
-        count: 10,
-        key: "item2",
-        label: "Item 2",
-        selected: false,
-    },
-];
-export const FiltersStory = {
-    args: {
-        categoryFilters: [
-            {
-                categoryViews: [
-                    {
-                        isDisabled: false,
-                        key: "genusSpecies",
-                        label: "Genus Species",
-                        values: [
-                            {
-                                count: 12,
-                                key: "homoSapiens",
-                                label: "Homo sapiens",
-                                selected: false,
-                            },
-                            {
-                                count: 6,
-                                key: "musMusculus",
-                                label: "Mus musculus",
-                                selected: false,
-                            },
-                        ],
-                    },
-                ],
-            },
-            {
-                categoryViews: [
-                    {
-                        isDisabled: false,
-                        key: "donorDisease",
-                        label: "Donor Disease",
-                        values: FilterMenuStory.args?.values || defaultValues,
-                    },
-                    {
-                        isDisabled: true,
-                        key: "anatomicalEntity",
-                        label: "Anatomical Entity",
-                        values: [
-                            {
-                                count: 12,
-                                key: "oralCavity",
-                                label: "oral cavity",
-                                selected: true,
-                            },
-                            {
-                                count: 6,
-                                key: "pancreas",
-                                label: "pancreas",
-                                selected: false,
-                            },
-                        ],
-                    },
-                ],
-            },
-        ],
-        onFilter: onFilter,
-    },
-};

package/lib/components/Index/components/Cell/cell.d.ts

@@ -1,7 +0,0 @@
-export interface CellProps {
-    value?: number | string | string[];
-}
-/**
- * @deprecated - use BasicCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell"
- */
-export declare const Cell: ({ value }: CellProps) => JSX.Element;

package/lib/components/Index/components/Cell/cell.js

@@ -1,10 +0,0 @@
-import React from "react";
-/**
- * @deprecated - use BasicCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell"
- */
-export const Cell = ({ value = "Unspecified" }) => {
-    if (typeof value === "string" || typeof value === "number") {
-        return React.createElement("div", null, value);
-    }
-    return (React.createElement(React.Fragment, null, value.map((v) => (React.createElement("div", { key: v }, v)))));
-};

package/lib/components/Index/components/EntitiesView/constants.d.ts

@@ -1 +0,0 @@
-export declare const ENTITIES_VIEW_TEST_ID = "entities-view";

package/lib/components/Index/components/EntitiesView/constants.js

@@ -1 +0,0 @@
-export const ENTITIES_VIEW_TEST_ID = "entities-view";

package/lib/components/Index/components/Hero/components/Summaries/summaries.stories.d.ts

@@ -1,13 +0,0 @@
-import { StoryObj } from "@storybook/react";
-declare const meta: {
-    argTypes: {
-        summaries: {
-            control: "object";
-        };
-    };
-    component: ({ summaries }: import("./summaries").SummariesProps) => JSX.Element;
-    title: string;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const SummariesStory: Story;

package/lib/components/Index/components/Hero/components/Summaries/summaries.stories.js

@@ -1,18 +0,0 @@
-import { Summaries } from "./summaries";
-const meta = {
-    argTypes: {
-        summaries: { control: "object" },
-    },
-    component: Summaries,
-    title: "Components/Summary",
-};
-export default meta;
-export const SummariesStory = {
-    args: {
-        summaries: [
-            { count: "1", label: "Species" },
-            { count: "1.1k", label: "Donors" },
-            { count: "508.5k", label: "Files" },
-        ],
-    },
-};

package/lib/components/Index/components/Hero/hero.stories.d.ts

@@ -1,23 +0,0 @@
-import { StoryObj } from "@storybook/react";
-declare const meta: {
-    argTypes: {
-        Summaries: {
-            table: {
-                disable: true;
-            };
-        };
-        title: {
-            table: {
-                disable: true;
-            };
-        };
-    };
-    component: ({ SideBarButton, Summaries, title, }: import("./hero").HeroProps) => JSX.Element;
-    parameters: {
-        layout: string;
-    };
-    title: string;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const HeroStory: Story;

package/lib/components/Index/components/Hero/hero.stories.js

@@ -1,22 +0,0 @@
-import React from "react";
-import { Summaries } from "./components/Summaries/summaries";
-import { SummariesStory } from "./components/Summaries/summaries.stories";
-import { Hero } from "./hero";
-const meta = {
-    argTypes: {
-        Summaries: { table: { disable: true } },
-        title: { table: { disable: true } },
-    },
-    component: Hero,
-    parameters: {
-        layout: "fullscreen",
-    },
-    title: "Components/Hero/ExploreView",
-};
-export default meta;
-export const HeroStory = {
-    args: {
-        Summaries: React.createElement(Summaries, { ...SummariesStory.args }),
-        title: "Data Explorer",
-    },
-};