@databiosphere/findable-ui 25.1.0 → 26.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "25.1.0"
+  ".": "26.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog
 
+## [26.0.0](https://github.com/DataBiosphere/findable-ui/compare/v25.1.0...v26.0.0) (2025-04-23)
+
+
+### ⚠ BREAKING CHANGES
+
+* bump nextjs version to latest in the 14 branch at least to 14.2.15 ([#431](https://github.com/DataBiosphere/findable-ui/issues/431)) (#436)
+* fix duplication of component type basecomponentprops ([#420](https://github.com/DataBiosphere/findable-ui/issues/420)) (#421)
+* add css shadow variables to theme ([#417](https://github.com/DataBiosphere/findable-ui/issues/417)) (#419)
+* add update catalog mode filters to support a range filter ([#398](https://github.com/DataBiosphere/findable-ui/issues/398)) (#418)
+* separate type exports from useexploremode hook to avoid test import issues ([#414](https://github.com/DataBiosphere/findable-ui/issues/414)) (#415)
+* refactor palette.ts - limit public surface area ([#394](https://github.com/DataBiosphere/findable-ui/issues/394)) (#416)
+* externalized data dictionary config #366 ([#404](https://github.com/DataBiosphere/findable-ui/issues/404))
+* refactor button constants ([#405](https://github.com/DataBiosphere/findable-ui/issues/405)) (#406)
+
+### Features
+
+* add update catalog mode filters to support a range filter ([#398](https://github.com/DataBiosphere/findable-ui/issues/398)) ([#418](https://github.com/DataBiosphere/findable-ui/issues/418)) ([4794b91](https://github.com/DataBiosphere/findable-ui/commit/4794b91d265b679393ba19d794cfd342a4d915ec))
+* chart view - sort bars by size - largest first ([#409](https://github.com/DataBiosphere/findable-ui/issues/409)) ([#411](https://github.com/DataBiosphere/findable-ui/issues/411)) ([768d068](https://github.com/DataBiosphere/findable-ui/commit/768d068924df7a120cd79f82cbb3138f64c028cb))
+* chart view - update titles to show the entity type ([#412](https://github.com/DataBiosphere/findable-ui/issues/412)) ([#413](https://github.com/DataBiosphere/findable-ui/issues/413)) ([e0d9038](https://github.com/DataBiosphere/findable-ui/commit/e0d9038160ef109ce87f417fb729a6c16d0de537))
+* externalized data dictionary config [#366](https://github.com/DataBiosphere/findable-ui/issues/366) ([2b986bb](https://github.com/DataBiosphere/findable-ui/commit/2b986bb0a647019f19653cb0ba758b4778f74267))
+* externalized data dictionary config [#366](https://github.com/DataBiosphere/findable-ui/issues/366) ([#404](https://github.com/DataBiosphere/findable-ui/issues/404)) ([2b986bb](https://github.com/DataBiosphere/findable-ui/commit/2b986bb0a647019f19653cb0ba758b4778f74267))
+* range filter component ([#397](https://github.com/DataBiosphere/findable-ui/issues/397)) ([#408](https://github.com/DataBiosphere/findable-ui/issues/408)) ([56fbc75](https://github.com/DataBiosphere/findable-ui/commit/56fbc756e4175a6c1ccdac325ecfd0603e71b0b6))
+* update chart ui to make charts more compact ([#429](https://github.com/DataBiosphere/findable-ui/issues/429)) ([#430](https://github.com/DataBiosphere/findable-ui/issues/430)) ([916f004](https://github.com/DataBiosphere/findable-ui/commit/916f004fa0e78be356ac0e12edb6f4e256f51092))
+
+
+### Bug Fixes
+
+* make gridtracksize import relative ([#434](https://github.com/DataBiosphere/findable-ui/issues/434)) ([#435](https://github.com/DataBiosphere/findable-ui/issues/435)) ([8da5c47](https://github.com/DataBiosphere/findable-ui/commit/8da5c4729ea2fa4986dacf0ce07d07bdbbbc69fc))
+
+
+### Chores
+
+* bump nextjs version to latest in the 14 branch at least to 14.2.15 ([#431](https://github.com/DataBiosphere/findable-ui/issues/431)) ([#436](https://github.com/DataBiosphere/findable-ui/issues/436)) ([c60b3e8](https://github.com/DataBiosphere/findable-ui/commit/c60b3e82dc2cea513cfda6bff3de44310125fc27))
+
+
+### Code Refactoring
+
+* add css shadow variables to theme ([#417](https://github.com/DataBiosphere/findable-ui/issues/417)) ([#419](https://github.com/DataBiosphere/findable-ui/issues/419)) ([55fcfb4](https://github.com/DataBiosphere/findable-ui/commit/55fcfb4d2f7ecdcbbc9328da585a3026d42ee0b6))
+* chart test ([#432](https://github.com/DataBiosphere/findable-ui/issues/432)) ([#433](https://github.com/DataBiosphere/findable-ui/issues/433)) ([8cabd60](https://github.com/DataBiosphere/findable-ui/commit/8cabd60a9fcfa679b10018d17404270b589eb091))
+* fix duplication of component type basecomponentprops ([#420](https://github.com/DataBiosphere/findable-ui/issues/420)) ([#421](https://github.com/DataBiosphere/findable-ui/issues/421)) ([1096940](https://github.com/DataBiosphere/findable-ui/commit/1096940bdfbabfa0c71bc69cb22f3e1c8883844a))
+* refactor button constants ([#405](https://github.com/DataBiosphere/findable-ui/issues/405)) ([#406](https://github.com/DataBiosphere/findable-ui/issues/406)) ([65681b5](https://github.com/DataBiosphere/findable-ui/commit/65681b5220bf7b9f9d9d29cbc0fd4e5447f98a70))
+* refactor palette.ts - limit public surface area ([#394](https://github.com/DataBiosphere/findable-ui/issues/394)) ([#416](https://github.com/DataBiosphere/findable-ui/issues/416)) ([f2762f5](https://github.com/DataBiosphere/findable-ui/commit/f2762f58c188bbf21c17a73c00f2a7e1ed235fbd))
+* separate type exports from useexploremode hook to avoid test import issues ([#414](https://github.com/DataBiosphere/findable-ui/issues/414)) ([#415](https://github.com/DataBiosphere/findable-ui/issues/415)) ([9981962](https://github.com/DataBiosphere/findable-ui/commit/9981962c614f9e064156d892903c6e2d131215d4))
+
 ## [25.1.0](https://github.com/DataBiosphere/findable-ui/compare/v25.0.0...v25.1.0) (2025-04-14)
 
 

package/lib/common/entities.d.ts

@@ -1,3 +1,5 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { GridTrackSize } from "../config/entities";
 /**
  * Model of a value of a metadata class.
  */
@@ -6,6 +8,10 @@ export interface Attribute {
     key: string;
     label: string;
 }
+/**
+ * Model of attribute keys; used mostly when building data dictionary column definitions.
+ */
+export type AttributeValue = Attribute[keyof Attribute];
 /**
  * Filterable metadata keys.
  */
@@ -38,6 +44,25 @@ export type CategoryValueKey = unknown;
 export interface DataDictionary {
     classes: Class[];
 }
+/**
+ * Display model of a data dictionary column.
+ */
+export interface DataDictionaryColumnDef {
+    attributeDisplayName: string;
+    attributeSlotName: string;
+    width: {
+        max: GridTrackSize;
+        min: GridTrackSize;
+    };
+}
+/**
+ * Configuration of data dictionary; contains schema definition (that is, the actual data
+ * dictionary) as well as column def for displaying the data dictionary.
+ */
+export interface DataDictionaryConfig {
+    columnDefs: ColumnDef<Attribute, Attribute[keyof Attribute]>[];
+    dataDictionary: DataDictionary;
+}
 /**
  * Label and description values from a data dictionary that are added to a site
  * config value.

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

@@ -29,16 +29,18 @@ export function annotateColumnConfig(siteConfig, annotationsByKey) {
  */
 export function annotateSiteConfig(siteConfig) {
     // Build and map data dictionary annotations by key.
-    const { dataDictionary } = siteConfig;
-    if (!dataDictionary) {
+    const { dataDictionaries: dataDictionaryConfigs } = siteConfig;
+    if (!dataDictionaryConfigs || !dataDictionaryConfigs.length) {
         return;
     }
-    const annotationsByKey = keyAnnotationsByKey(dataDictionary);
-    // Annotate elements of site config.
-    annotateEntityConfig(siteConfig, annotationsByKey);
-    annotateDefaultCategoryConfig(siteConfig, annotationsByKey);
-    annotateEntityCategoryConfig(siteConfig, annotationsByKey);
-    annotateColumnConfig(siteConfig, annotationsByKey);
+    for (const dataDictionaryConfig of dataDictionaryConfigs) {
+        const annotationsByKey = keyAnnotationsByKey(dataDictionaryConfig.dataDictionary);
+        // Annotate elements of site config.
+        annotateEntityConfig(siteConfig, annotationsByKey);
+        annotateDefaultCategoryConfig(siteConfig, annotationsByKey);
+        annotateEntityCategoryConfig(siteConfig, annotationsByKey);
+        annotateColumnConfig(siteConfig, annotationsByKey);
+    }
 }
 /**
  * Annotate entity configuration with data dictionary values. Specifically, look

package/lib/components/DataDictionary/components/Entities/entities.d.ts

@@ -1,2 +1,2 @@
 import { ClassesProps } from "./types";
-export declare const Entities: ({ classes, spacing }: ClassesProps) => JSX.Element;
+export declare const Entities: ({ classes, columnDefs, spacing, }: ClassesProps) => JSX.Element;

package/lib/components/DataDictionary/components/Entities/entities.js

@@ -2,6 +2,6 @@ import { Grid } from "@mui/material";
 import React from "react";
 import { Entity } from "../Entity/entity";
 import { GRID_PROPS } from "./constants";
-export const Entities = ({ classes, spacing }) => {
-    return (React.createElement(Grid, { ...GRID_PROPS }, classes.map((classData) => (React.createElement(Entity, { key: classData.key, class: classData, spacing: spacing })))));
+export const Entities = ({ classes, columnDefs, spacing, }) => {
+    return (React.createElement(Grid, { ...GRID_PROPS }, classes.map((classData) => (React.createElement(Entity, { key: classData.key, class: classData, columnDefs: columnDefs, spacing: spacing })))));
 };

package/lib/components/DataDictionary/components/Entities/types.d.ts

@@ -1,6 +1,8 @@
-import { Class } from "../../../../common/entities";
+import { ColumnDef } from "@tanstack/react-table";
+import { Attribute, AttributeValue, Class } from "../../../../common/entities";
 import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
 export interface ClassesProps {
     classes: Class[];
+    columnDefs: ColumnDef<Attribute, AttributeValue>[];
     spacing?: LayoutSpacing;
 }

package/lib/components/DataDictionary/components/Entity/entity.d.ts

@@ -1,2 +1,2 @@
 import { EntityProps } from "./types";
-export declare const Entity: ({ class: classData, spacing, }: EntityProps) => JSX.Element;
+export declare const Entity: ({ class: classData, columnDefs, spacing, }: EntityProps) => JSX.Element;

package/lib/components/DataDictionary/components/Entity/entity.js

@@ -6,8 +6,8 @@ import { useTable } from "../Table/hook";
 import { Table } from "../Table/table";
 import { GRID_PROPS } from "./constants";
 import { StyledTypography } from "./entity.styles";
-export const Entity = ({ class: classData, spacing, }) => {
-    const table = useTable(classData.attributes);
+export const Entity = ({ class: classData, columnDefs, spacing, }) => {
+    const table = useTable(classData.attributes, columnDefs);
     return (React.createElement(Grid, { ...GRID_PROPS, rowGap: 4 },
         React.createElement(Grid, { ...GRID_PROPS, rowGap: 1 },
             React.createElement(StyledTypography, { component: "h3", id: classData.key, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL, ...spacing },

package/lib/components/DataDictionary/components/Entity/types.d.ts

@@ -1,6 +1,8 @@
-import { Class } from "../../../../common/entities";
+import { ColumnDef } from "@tanstack/react-table";
+import { Attribute, AttributeValue, Class } from "../../../../common/entities";
 import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
 export interface EntityProps {
     class: Class;
+    columnDefs: ColumnDef<Attribute, AttributeValue>[];
     spacing?: LayoutSpacing;
 }

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

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

package/lib/components/DataDictionary/components/Table/hook.d.ts

@@ -1,3 +1,3 @@
-import { Table } from "@tanstack/react-table";
+import { ColumnDef, Table } from "@tanstack/react-table";
 import { Attribute } from "../../../../common/entities";
-export declare const useTable: (data: Attribute[]) => Table<Attribute>;
+export declare const useTable: (data: Attribute[], columnDefs: ColumnDef<Attribute, Attribute[keyof Attribute]>[]) => Table<Attribute>;

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

@@ -1,11 +1,10 @@
 import { useReactTable } from "@tanstack/react-table";
-import { COLUMN_DEFS } from "./columns/columnDef";
 import { useTableOptions } from "./options/hook";
-export const useTable = (data) => {
+export const useTable = (data, columnDefs) => {
     const tableOptions = useTableOptions();
     return useReactTable({
         ...tableOptions,
-        columns: COLUMN_DEFS,
+        columns: columnDefs,
         data,
     });
 };

package/lib/components/DataDictionary/dataDictionary.js

@@ -10,7 +10,7 @@ import { View } from "./dataDictionary.styles";
 import { useDataDictionary } from "./hooks/UseDataDictionary/hook";
 import { useLayoutSpacing } from "./hooks/UseLayoutSpacing/hook";
 export const DataDictionary = ({ className, EntitiesLayout = DefaultEntitiesLayout, Outline = DefaultOutline, OutlineLayout = DefaultOutlineLayout, Title = DefaultTitle, TitleLayout = DefaultTitleLayout, }) => {
-    const { classes } = useDataDictionary();
+    const { classes, columnDefs } = useDataDictionary();
     const { spacing } = useLayoutSpacing();
     const outline = useMemo(() => buildClassesOutline(classes), [classes]);
     return (React.createElement(View, { className: className },
@@ -19,5 +19,5 @@ export const DataDictionary = ({ className, EntitiesLayout = DefaultEntitiesLayo
         React.createElement(OutlineLayout, { ...spacing },
             React.createElement(Outline, { outline: outline })),
         React.createElement(EntitiesLayout, { ...spacing },
-            React.createElement(Entities, { classes: classes, spacing: spacing }))));
+            React.createElement(Entities, { classes: classes, columnDefs: columnDefs, spacing: spacing }))));
 };

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

@@ -1,6 +1,11 @@
 import { useMemo } from "react";
 import { useConfig } from "../../../../hooks/useConfig";
 export const useDataDictionary = () => {
-    const { config: { dataDictionary: { classes = [] } = {} }, } = useConfig();
-    return useMemo(() => ({ classes }), [classes]);
+    const { config: { dataDictionaries: dataDictionaryConfigs }, } = useConfig();
+    const dataDictionaryConfig = dataDictionaryConfigs?.[0]; // TODO: Handle multiple data dictionaries
+    return useMemo(() => {
+        const classes = dataDictionaryConfig?.dataDictionary?.classes || [];
+        const columnDefs = dataDictionaryConfig?.columnDefs || [];
+        return { classes, columnDefs };
+    }, [dataDictionaryConfig]);
 };

package/lib/components/DataDictionary/hooks/UseDataDictionary/types.d.ts

@@ -1,4 +1,6 @@
-import { Class } from "../../../../common/entities";
+import { ColumnDef } from "@tanstack/react-table";
+import { Attribute, AttributeValue, Class } from "../../../../common/entities";
 export interface UseDataDictionary {
     classes: Class[];
+    columnDefs: ColumnDef<Attribute, AttributeValue>[];
 }

package/lib/components/Detail/components/Table/stories/args.d.ts

@@ -0,0 +1,27 @@
+import { ComponentProps } from "react";
+import { Table } from "../table";
+export declare const DEFAULT_DATA: {
+    DATA_TYPES: {
+        EXOME: string;
+        METHYLATION_ARRAY: string;
+        RNASEQ: string;
+        WHOLE_GENOME: string;
+    };
+    DISEASES: {
+        ATHEROSCLEROSIS: string;
+        CONTROL: string;
+        EPIGENETIC_VARIATION: string;
+        MYOCARDIAL_INFARCTION: string;
+        NONE: string;
+    };
+    STUDY_NAME: {
+        CARDIOVASCULAR_DISEASE_STUDY: string;
+        CORONARY_ARTERY_DISEASE_STUDY: string;
+        EPIGENETIC_STUDY: string;
+        EPILEPSY_STUDY: string;
+        GENOMIC_STUDY: string;
+        MYOCARDIAL_INFARCTION_STUDY: string;
+        MYOCARDIAL_INFARCTION_STUDY_X: string;
+    };
+};
+export declare const DEFAULT_TABLE_ARGS: ComponentProps<typeof Table>;

package/lib/components/Detail/components/Table/stories/args.js

@@ -0,0 +1,100 @@
+export const DEFAULT_DATA = {
+    DATA_TYPES: {
+        EXOME: "Exome",
+        METHYLATION_ARRAY: "Methylation Array",
+        RNASEQ: "RNAseq",
+        WHOLE_GENOME: "Whole Genome",
+    },
+    DISEASES: {
+        ATHEROSCLEROSIS: "Atherosclerosis",
+        CONTROL: "Control",
+        EPIGENETIC_VARIATION: "Epigenetic Variation",
+        MYOCARDIAL_INFARCTION: "Myocardial Infarction",
+        NONE: "None",
+    },
+    STUDY_NAME: {
+        CARDIOVASCULAR_DISEASE_STUDY: "Cardiovascular Disease Study",
+        CORONARY_ARTERY_DISEASE_STUDY: "Coronary Artery Disease Study",
+        EPIGENETIC_STUDY: "Epigenetic Study",
+        EPILEPSY_STUDY: "Epilepsy Study",
+        GENOMIC_STUDY: "Genomic Study",
+        MYOCARDIAL_INFARCTION_STUDY: "Myocardial Infarction Study",
+        MYOCARDIAL_INFARCTION_STUDY_X: "Myocardial Infarction Study X",
+    },
+};
+export const DEFAULT_TABLE_ARGS = {
+    columns: [
+        {
+            accessorKey: "studyName",
+            filterFn: "arrIncludesSome",
+            header: "Study Name",
+            id: "studyName",
+        },
+        {
+            accessorKey: "dataType",
+            filterFn: "arrIncludesSome",
+            header: "Data Type",
+            id: "dataType",
+        },
+        {
+            accessorKey: "disease",
+            filterFn: "arrIncludesSome",
+            header: "Disease",
+            id: "disease",
+        },
+        {
+            accessorKey: "participantCount",
+            filterFn: "inNumberRange",
+            header: "Participation Count",
+            id: "participantCount",
+        },
+    ],
+    gridTemplateColumns: "auto repeat(3, 1fr) auto",
+    items: [
+        {
+            dataType: [
+                DEFAULT_DATA.DATA_TYPES.WHOLE_GENOME,
+                DEFAULT_DATA.DATA_TYPES.EXOME,
+            ],
+            disease: DEFAULT_DATA.DISEASES.ATHEROSCLEROSIS,
+            participantCount: 265,
+            studyName: DEFAULT_DATA.STUDY_NAME.CORONARY_ARTERY_DISEASE_STUDY,
+        },
+        {
+            dataType: [DEFAULT_DATA.DATA_TYPES.EXOME],
+            disease: DEFAULT_DATA.DISEASES.CONTROL,
+            participantCount: 102,
+            studyName: DEFAULT_DATA.STUDY_NAME.EPILEPSY_STUDY,
+        },
+        {
+            dataType: [DEFAULT_DATA.DATA_TYPES.WHOLE_GENOME],
+            disease: DEFAULT_DATA.DISEASES.MYOCARDIAL_INFARCTION,
+            participantCount: 103,
+            studyName: DEFAULT_DATA.STUDY_NAME.MYOCARDIAL_INFARCTION_STUDY,
+        },
+        {
+            dataType: [DEFAULT_DATA.DATA_TYPES.EXOME],
+            disease: DEFAULT_DATA.DISEASES.MYOCARDIAL_INFARCTION,
+            participantCount: 10,
+            studyName: DEFAULT_DATA.STUDY_NAME.CARDIOVASCULAR_DISEASE_STUDY,
+        },
+        {
+            dataType: [DEFAULT_DATA.DATA_TYPES.RNASEQ],
+            disease: DEFAULT_DATA.DISEASES.NONE,
+            participantCount: 23,
+            studyName: DEFAULT_DATA.STUDY_NAME.GENOMIC_STUDY,
+        },
+        {
+            dataType: [DEFAULT_DATA.DATA_TYPES.METHYLATION_ARRAY],
+            disease: DEFAULT_DATA.DISEASES.EPIGENETIC_VARIATION,
+            participantCount: 1,
+            studyName: DEFAULT_DATA.STUDY_NAME.EPIGENETIC_STUDY,
+        },
+        {
+            dataType: [DEFAULT_DATA.DATA_TYPES.WHOLE_GENOME],
+            disease: DEFAULT_DATA.DISEASES.MYOCARDIAL_INFARCTION,
+            participantCount: 1000,
+            studyName: DEFAULT_DATA.STUDY_NAME.MYOCARDIAL_INFARCTION_STUDY_X,
+        },
+    ],
+};

package/lib/components/Detail/components/Table/stories/constants.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from "react";
+import { Table } from "../table";
+export declare const BOOLEAN_CONTROLS: (keyof ComponentProps<typeof Table>)[];
+export declare const DISABLED_CONTROLS: (keyof ComponentProps<typeof Table>)[];

package/lib/components/Detail/components/Table/stories/constants.js

@@ -0,0 +1,11 @@
+export const BOOLEAN_CONTROLS = [
+    "collapsable",
+];
+export const DISABLED_CONTROLS = [
+    "className",
+    "columns",
+    "gridTemplateColumns",
+    "items",
+    "tableOptions",
+    "tableView",
+];

package/lib/components/Detail/components/Table/stories/filter/args.d.ts

@@ -0,0 +1,5 @@
+import { ColumnFiltersState } from "@tanstack/react-table";
+import { ComponentProps } from "react";
+import { Table } from "../../table";
+export declare const COLUMN_FILTERS_STATE: Record<string, ColumnFiltersState>;
+export declare const FILTER_TABLE_ARGS: ComponentProps<typeof Table>;

package/lib/components/Detail/components/Table/stories/filter/args.js

@@ -0,0 +1,50 @@
+import { getFilteredRowModel } from "@tanstack/react-table";
+import { COLUMN_IDENTIFIER } from "../../../../../Table/common/columnIdentifier";
+import { DEFAULT_DATA, DEFAULT_TABLE_ARGS } from "../args";
+export const COLUMN_FILTERS_STATE = {
+    ARRAY: [
+        {
+            id: "dataType",
+            value: [DEFAULT_DATA.DATA_TYPES.EXOME, DEFAULT_DATA.DATA_TYPES.RNASEQ],
+        },
+    ],
+    RANGE_BETWEEN: [
+        {
+            id: "participantCount",
+            value: [10, 100],
+        },
+    ],
+    RANGE_GREATER_THAN: [
+        {
+            id: "participantCount",
+            value: [100, null],
+        },
+    ],
+    RANGE_LESS_THAN: [
+        {
+            id: "participantCount",
+            value: [null, 100],
+        },
+    ],
+    STRING: [
+        {
+            id: "studyName",
+            value: [
+                DEFAULT_DATA.STUDY_NAME.CORONARY_ARTERY_DISEASE_STUDY,
+                DEFAULT_DATA.STUDY_NAME.MYOCARDIAL_INFARCTION_STUDY,
+            ],
+        },
+    ],
+    STRING_NO_MATCH: [{ id: "studyName", value: ["Invalid"] }],
+};
+export const FILTER_TABLE_ARGS = {
+    ...DEFAULT_TABLE_ARGS,
+    tableOptions: {
+        enableFilters: true,
+        enableRowPosition: false,
+        getFilteredRowModel: getFilteredRowModel(),
+        initialState: {
+            columnVisibility: { [COLUMN_IDENTIFIER.ROW_POSITION]: false },
+        },
+    },
+};

package/lib/components/Detail/components/Table/stories/filter/filter.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Table } from "../../table";
+declare const meta: Meta<typeof Table>;
+export default meta;
+type Story = StoryObj<typeof Table>;
+export declare const FilterByStringValue: Story;
+export declare const FilterByArrayValue: Story;
+export declare const FilterByRangeBetweenValue: Story;
+export declare const FilterByRangeGreaterThanValue: Story;
+export declare const FilterByRangeLessThanValue: Story;
+export declare const FilterByStringValueWithNoMatch: Story;

package/lib/components/Detail/components/Table/stories/filter/filter.stories.js

@@ -0,0 +1,78 @@
+import tableMeta from "../table.stories";
+import { COLUMN_FILTERS_STATE, FILTER_TABLE_ARGS } from "./args";
+const meta = {
+    ...tableMeta,
+};
+export default meta;
+export const FilterByStringValue = {
+    args: {
+        ...FILTER_TABLE_ARGS,
+        tableOptions: {
+            ...FILTER_TABLE_ARGS.tableOptions,
+            initialState: {
+                ...FILTER_TABLE_ARGS.tableOptions?.initialState,
+                columnFilters: COLUMN_FILTERS_STATE.STRING,
+            },
+        },
+    },
+};
+export const FilterByArrayValue = {
+    args: {
+        ...FILTER_TABLE_ARGS,
+        tableOptions: {
+            ...FILTER_TABLE_ARGS.tableOptions,
+            initialState: {
+                ...FILTER_TABLE_ARGS.tableOptions?.initialState,
+                columnFilters: COLUMN_FILTERS_STATE.ARRAY,
+            },
+        },
+    },
+};
+export const FilterByRangeBetweenValue = {
+    args: {
+        ...FILTER_TABLE_ARGS,
+        tableOptions: {
+            ...FILTER_TABLE_ARGS.tableOptions,
+            initialState: {
+                ...FILTER_TABLE_ARGS.tableOptions?.initialState,
+                columnFilters: COLUMN_FILTERS_STATE.RANGE_BETWEEN,
+            },
+        },
+    },
+};
+export const FilterByRangeGreaterThanValue = {
+    args: {
+        ...FILTER_TABLE_ARGS,
+        tableOptions: {
+            ...FILTER_TABLE_ARGS.tableOptions,
+            initialState: {
+                ...FILTER_TABLE_ARGS.tableOptions?.initialState,
+                columnFilters: COLUMN_FILTERS_STATE.RANGE_GREATER_THAN,
+            },
+        },
+    },
+};
+export const FilterByRangeLessThanValue = {
+    args: {
+        ...FILTER_TABLE_ARGS,
+        tableOptions: {
+            ...FILTER_TABLE_ARGS.tableOptions,
+            initialState: {
+                ...FILTER_TABLE_ARGS.tableOptions?.initialState,
+                columnFilters: COLUMN_FILTERS_STATE.RANGE_LESS_THAN,
+            },
+        },
+    },
+};
+export const FilterByStringValueWithNoMatch = {
+    args: {
+        ...FILTER_TABLE_ARGS,
+        tableOptions: {
+            ...FILTER_TABLE_ARGS.tableOptions,
+            initialState: {
+                ...FILTER_TABLE_ARGS.tableOptions?.initialState,
+                columnFilters: COLUMN_FILTERS_STATE.STRING_NO_MATCH,
+            },
+        },
+    },
+};

package/lib/components/Detail/components/Table/stories/table.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Table } from "../table";
+declare const meta: Meta<typeof Table>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/lib/components/Detail/components/Table/stories/table.stories.js

@@ -0,0 +1,19 @@
+import { CONTROL_TYPE } from "../../../../../storybook/controls/types";
+import { configureControls } from "../../../../../storybook/controls/utils";
+import { Table } from "../table";
+import { DEFAULT_TABLE_ARGS } from "./args";
+import { BOOLEAN_CONTROLS, DISABLED_CONTROLS } from "./constants";
+const meta = {
+    argTypes: {
+        ...configureControls(DISABLED_CONTROLS, CONTROL_TYPE.DISABLED),
+        ...configureControls(BOOLEAN_CONTROLS, CONTROL_TYPE.BOOLEAN),
+    },
+    component: Table,
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export default meta;
+export const Default = {
+    args: DEFAULT_TABLE_ARGS,
+};

package/lib/components/Detail/components/Table/table.js

@@ -3,6 +3,7 @@ import { getCoreRowModel, useReactTable, } from "@tanstack/react-table";
 import React from "react";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { TABLET } from "../../../../theme/common/breakpoints";
+import { arrIncludesSome } from "../../../Table/columnDef/columnFilters/filterFn";
 import { COLUMN_DEF } from "../../../Table/common/columnDef";
 import { ROW_DIRECTION } from "../../../Table/common/entities";
 import { TableHead } from "../../../Table/components/TableHead/tableHead";
@@ -25,6 +26,7 @@ export const Table = ({ className, collapsable = true, columns, gridTemplateColu
         ]),
         data: items,
         enableSorting: false,
+        filterFns: { arrIncludesSome },
         getCoreRowModel: getCoreRowModel(),
         ...tableOptions,
     });

package/lib/components/Export/components/ExportMethod/exportMethod.d.ts

@@ -1,11 +1,11 @@
 import { ReactNode } from "react";
-export interface ExportMethodProps {
+import { TrackingProps } from "../../../types";
+export interface ExportMethodProps extends TrackingProps {
     buttonLabel: string;
     description: ReactNode;
     footnote?: ReactNode;
     isAccessible?: boolean;
     route: string;
     title: string;
-    trackingId?: string;
 }
 export declare const ExportMethod: ({ buttonLabel, description, footnote, isAccessible, route, title, trackingId, }: ExportMethodProps) => JSX.Element;

package/lib/components/Export/components/ExportMethod/exportMethod.styles.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
+import { inkLight } from "../../../../styles/common/mixins/colors";
 import { textBodySmall4002Lines } from "../../../../styles/common/mixins/fonts";
-import { inkLight } from "../../../../theme/common/palette";
 import { ButtonPrimary } from "../../../common/Button/components/ButtonPrimary/buttonPrimary";
 export const ExportButton = styled(ButtonPrimary) `
   text-transform: none; // overrides MuiButton theme text-transform "capitalize".

package/lib/components/Filter/components/FilterRange/constants.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps, DividerProps, InputLabelProps, OutlinedInputProps, ToggleButtonGroupProps } from "@mui/material";
+import { RANGE_OPERATOR } from "./types";
+export declare const BUTTON_PROPS: ButtonProps;
+export declare const DIVIDER_PROPS: DividerProps;
+export declare const INPUT_PROPS: OutlinedInputProps;
+export declare const INPUT_LABEL_PROPS: InputLabelProps;
+export declare const RANGE_OPERATOR_DISPLAY: Record<RANGE_OPERATOR, string>;
+export declare const TOGGLE_BUTTON_GROUP_PROPS: ToggleButtonGroupProps;