@databiosphere/findable-ui 32.1.1 → 34.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "32.1.1"
+  ".": "34.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [34.0.0](https://github.com/DataBiosphere/findable-ui/compare/v33.0.0...v34.0.0) (2025-05-27)
+
+
+### ⚠ BREAKING CHANGES
+
+* implement required filter on data dictionary ([#497](https://github.com/DataBiosphere/findable-ui/issues/497)) (#503)
+
+### Features
+
+* implement required filter on data dictionary ([#497](https://github.com/DataBiosphere/findable-ui/issues/497)) ([#503](https://github.com/DataBiosphere/findable-ui/issues/503)) ([5087d0c](https://github.com/DataBiosphere/findable-ui/commit/5087d0cd0f0bab0071dc87a7e9d7894735b69512))
+
+## [33.0.0](https://github.com/DataBiosphere/findable-ui/compare/v32.1.1...v33.0.0) (2025-05-23)
+
+
+### ⚠ BREAKING CHANGES
+
+* updated allowed annotation values #489 ([#498](https://github.com/DataBiosphere/findable-ui/issues/498))
+
+### Features
+
+* updated allowed annotation values [#489](https://github.com/DataBiosphere/findable-ui/issues/489) ([#498](https://github.com/DataBiosphere/findable-ui/issues/498)) ([78a6d4c](https://github.com/DataBiosphere/findable-ui/commit/78a6d4ca3bd798079ae1596078eb91ae2a1b9ab2))
+
+
+### Bug Fixes
+
+* fix incorrect labels on filters ([#499](https://github.com/DataBiosphere/findable-ui/issues/499)) ([#500](https://github.com/DataBiosphere/findable-ui/issues/500)) ([d6d85e4](https://github.com/DataBiosphere/findable-ui/commit/d6d85e4d04e2d9b6f441a9a2105a1bd31baf560f))
+
 ## [32.1.1](https://github.com/DataBiosphere/findable-ui/compare/v32.1.0...v32.1.1) (2025-05-22)
 
 

package/jest.config.js

@@ -1,5 +1,9 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
+  moduleNameMapper: {
+    "^@storybook/addon-actions$":
+      "<rootDir>/src/mocks/@storybook/addon-actions.ts",
+  },
   preset: "ts-jest/presets/js-with-ts-esm",
   setupFiles: ["<rootDir>/tests/setup.ts"],
   testEnvironment: "jest-environment-jsdom",

package/lib/common/categories/config/utils.d.ts

@@ -9,7 +9,7 @@ import { CategoryConfig } from "./types";
  * @returns category config.
  */
 export declare function findCategoryConfig<V extends VIEW_KIND>(viewKind: V, key: Category["key"], configs: CategoryConfig[]): Extract<CategoryConfig, {
-    viewKind: V;
+    viewKind?: V;
 }> | undefined;
 /**
  * Returns the range category config for the given category config key.

package/lib/common/categories/config/utils.js

@@ -7,7 +7,11 @@ import { VIEW_KIND } from "../views/types";
  * @returns category config.
  */
 export function findCategoryConfig(viewKind, key, configs) {
-    return configs.find((c) => c.viewKind === viewKind && c.key === key);
+    return configs.find((c) => 
+    // When `viewKind` is undefined, it corresponds to a `SelectCategoryConfig`.
+    // This predicate ensures that `viewKind` is either explicitly matched or treated as undefined
+    // for compatibility with `SelectCategoryConfig` and other explicitly defined view kinds.
+    (c.viewKind === undefined || c.viewKind === viewKind) && c.key === key);
 }
 /**
  * Returns the range category config for the given category config key.

package/lib/common/entities.d.ts

@@ -1,11 +1,10 @@
-import { ColumnDef, RowData } from "@tanstack/react-table";
+import { ColumnDef, RowData, TableOptions } from "@tanstack/react-table";
 /**
  * Model of a value of a metadata class.
  */
 export interface Attribute {
-    annotations?: {
-        [key in keyof DataDictionaryPrefix]: string;
-    };
+    annotations?: Record<string, string | string[] | undefined>;
+    classKey?: string;
     description: string;
     example?: string;
     multivalued: boolean;
@@ -66,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>;
+    tableOptions?: Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel">;
 }
 /**
  * Label and description values from a data dictionary that are added to a site

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

@@ -1,4 +1,4 @@
 import { RowData } from "@tanstack/react-table";
 import { Attribute } from "../../../../common/entities";
 import { ClassesProps } from "./types";
-export declare const Entities: <T extends RowData = Attribute>({ classes, columnDefs, spacing, }: ClassesProps<T>) => JSX.Element;
+export declare const Entities: <T extends RowData = Attribute>({ spacing, table, }: ClassesProps<T>) => JSX.Element;

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

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

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

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

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

@@ -1,4 +1,4 @@
 import { RowData } from "@tanstack/react-table";
 import { Attribute } from "../../../../common/entities";
 import { EntityProps } from "./types";
-export declare const Entity: <T extends RowData = Attribute>({ class: cls, columnDefs, spacing, }: EntityProps<T>) => JSX.Element;
+export declare const Entity: <T extends RowData = Attribute>({ row, spacing, table, }: EntityProps<T>) => JSX.Element | null;

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

@@ -2,18 +2,24 @@ import { Grid, Typography } from "@mui/material";
 import React from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { AnchorLink } from "../../../common/AnchorLink/anchorLink";
-import { useTable } from "../Table/hook";
 import { Table } from "../Table/table";
 import { GRID_PROPS } from "./constants";
 import { StyledTypography } from "./entity.styles";
-export const Entity = ({ class: cls, columnDefs, spacing, }) => {
-    const table = useTable(cls.attributes, columnDefs);
+import { getClassMeta } from "./utils";
+export const Entity = ({ row, spacing, table, }) => {
+    // Get class key from row.
+    const classKey = row.getValue("classKey");
+    // Get class metadata from table options.
+    const cls = getClassMeta(classKey, table);
+    // Class not found in table meta - return null.
+    if (!cls)
+        return null;
     return (React.createElement(Grid, { ...GRID_PROPS, rowGap: 4 },
         React.createElement(Grid, { ...GRID_PROPS, rowGap: 1 },
-            React.createElement(StyledTypography, { component: "h3", id: cls.name, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL, ...spacing },
+            React.createElement(StyledTypography, { component: "h3", id: classKey, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL, ...spacing },
                 cls.title,
                 " ",
-                React.createElement(AnchorLink, { anchorLink: cls.name })),
+                React.createElement(AnchorLink, { anchorLink: classKey })),
             React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES }, cls.description)),
-        React.createElement(Table, { table: table })));
+        React.createElement(Table, { row: row, table: table })));
 };

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

@@ -1,8 +1,14 @@
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
 import { ENTITIES_ROW_GAP } from "../Entities/constants";
+import { LAYOUT_SPACING } from "../Layout/constants";
+const TOP = ENTITIES_ROW_GAP +
+    LAYOUT_SPACING.TITLE_HEIGHT +
+    LAYOUT_SPACING.FILTERS_HEIGHT +
+    LAYOUT_SPACING.FILTERS_PADDING_TOP +
+    LAYOUT_SPACING.CONTENT_PADDING_TOP;
 export const StyledTypography = styled(Typography) `
-  scroll-margin-top: ${({ top = 0 }) => top + ENTITIES_ROW_GAP}px;
+  scroll-margin-top: ${({ top = 0 }) => top + TOP}px;
 
   &:hover a {
     opacity: 1;

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

@@ -1,8 +1,8 @@
-import { ColumnDef, RowData } from "@tanstack/react-table";
-import { Attribute, Class } from "../../../../common/entities";
+import { Row, RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
 import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
 export interface EntityProps<T extends RowData = Attribute> {
-    class: Class<T>;
-    columnDefs: ColumnDef<T, T[keyof T]>[];
+    row: Row<T>;
     spacing?: LayoutSpacing;
+    table: Table<T>;
 }

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

@@ -0,0 +1,9 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { Attribute, Class } from "../../../../common/entities";
+/**
+ * Retrieves class metadata from the table options meta.
+ * @param classKey - Class key.
+ * @param table - Table instance.
+ * @returns Class metadata or undefined.
+ */
+export declare function getClassMeta<T extends RowData = Attribute>(classKey: string | undefined, table: Table<T>): Pick<Class<T>, "description" | "title"> | undefined;

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

@@ -0,0 +1,18 @@
+/**
+ * Retrieves class metadata from the table options meta.
+ * @param classKey - Class key.
+ * @param table - Table instance.
+ * @returns Class metadata or undefined.
+ */
+export function getClassMeta(classKey, table) {
+    if (!classKey)
+        return;
+    // Grab the table meta and return if not defined.
+    const meta = table.options.meta;
+    if (!meta)
+        return;
+    // Return class metadata if defined.
+    if ("classMeta" in meta) {
+        return meta.classMeta?.[classKey];
+    }
+}

package/lib/components/DataDictionary/components/Filters/components/ColumnFilters/columnFilters.d.ts

@@ -0,0 +1,4 @@
+import { RowData } from "@tanstack/react-table";
+import { Attribute } from "../../../../../../common/entities";
+import { ColumnFiltersProps } from "./types";
+export declare const ColumnFilters: <T extends RowData = Attribute>({ table, }: ColumnFiltersProps<T>) => JSX.Element;

package/lib/components/DataDictionary/components/Filters/components/ColumnFilters/columnFilters.js

@@ -0,0 +1,9 @@
+import { ButtonGroup } from "@mui/material";
+import React from "react";
+import { BUTTON_GROUP_PROPS } from "../../../../../common/ButtonGroup/constants";
+import { ColumnFilter } from "../../../../../Table/components/TableFeatures/ColumnFilter/columnFilter";
+export const ColumnFilters = ({ table, }) => {
+    const columns = table.getAllColumns();
+    const columnFilters = columns.filter((column) => column.getCanFilter());
+    return (React.createElement(ButtonGroup, { ...BUTTON_GROUP_PROPS.SECONDARY_OUTLINED }, columnFilters.map((column) => (React.createElement(ColumnFilter, { key: column.id, column: column })))));
+};

package/lib/components/DataDictionary/components/Filters/components/ColumnFilters/types.d.ts

@@ -0,0 +1,5 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../../../common/entities";
+export interface ColumnFiltersProps<T extends RowData = Attribute> {
+    table: Table<T>;
+}

package/lib/components/DataDictionary/components/Filters/components/ColumnFilters/types.js

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

package/lib/components/DataDictionary/components/Filters/filters.d.ts

@@ -0,0 +1,4 @@
+import { RowData } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+import { FiltersProps } from "./types";
+export declare const Filters: <T extends RowData = Attribute>({ table, }: FiltersProps<T>) => JSX.Element;

package/lib/components/DataDictionary/components/Filters/filters.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { ColumnFilters } from "./components/ColumnFilters/columnFilters";
+import { StyledGrid } from "./filters.styles";
+export const Filters = ({ table, }) => {
+    return (React.createElement(StyledGrid, null,
+        React.createElement(ColumnFilters, { table: table })));
+};

package/lib/components/DataDictionary/components/Filters/filters.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledGrid: import("@emotion/styled").StyledComponent<import("@mui/material").GridBaseProps & {
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
+} & import("@mui/system").SystemProps<import("@mui/material").Theme> & 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;
+}, ("p" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "color" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign") | "sx" | keyof import("@mui/material").GridBaseProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/DataDictionary/components/Filters/filters.styles.js

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
+import { BUTTON_GROUP_PROPS } from "../../../../styles/common/mui/buttonGroup";
+export const StyledGrid = styled(Grid) `
+  align-items: center;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: 1fr auto;
+
+  .${BUTTON_GROUP_PROPS.CLASSES.ROOT} {
+    grid-column: 2;
+  }
+`;

package/lib/components/DataDictionary/components/Filters/stories/constants.d.ts

@@ -0,0 +1,4 @@
+import { PartialColumn } from "./types";
+export declare const BIONETWORK: PartialColumn;
+export declare const EXAMPLE: PartialColumn;
+export declare const REQUIRED: PartialColumn;

package/lib/components/DataDictionary/components/Filters/stories/constants.js

@@ -0,0 +1,25 @@
+export const BIONETWORK = {
+    columnDef: { header: "BioNetwork" },
+    getCanFilter: () => true,
+    getFacetedUniqueValues: () => new Map([
+        ["Nervous System", 3],
+        ["Brain", 2],
+        ["Lung", 1],
+    ]),
+    id: "bioNetwork",
+};
+export const EXAMPLE = {
+    columnDef: { header: "Example" },
+    getCanFilter: () => false,
+    getFacetedUniqueValues: () => new Map([["EFO:0008563", 1]]),
+    id: "example",
+};
+export const REQUIRED = {
+    columnDef: { header: "Required" },
+    getCanFilter: () => true,
+    getFacetedUniqueValues: () => new Map([
+        ["Required", 16],
+        ["Not Required", 30],
+    ]),
+    id: "required",
+};

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

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

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

@@ -0,0 +1,31 @@
+import { action } from "@storybook/addon-actions";
+import { functionalUpdate } from "@tanstack/react-table";
+import React from "react";
+import { Filters } from "../filters";
+import { BIONETWORK, EXAMPLE, REQUIRED } from "./constants";
+import { useFilterStore } from "./hook";
+const meta = {
+    component: Filters,
+};
+export default meta;
+const DefaultStory = () => {
+    const { filterStore, setFilterStore } = useFilterStore();
+    const makeColumn = (column) => ({
+        ...column,
+        getFilterValue: () => filterStore[column.id],
+        getIsFiltered: () => !!filterStore[column.id],
+        setFilterValue: (updaterOrValue) => {
+            const next = functionalUpdate(updaterOrValue, filterStore[column.id]);
+            setFilterStore({ ...filterStore, [column.id]: next });
+            action("setFilterValue")(next);
+            return next;
+        },
+    });
+    const table = {
+        getAllColumns: () => [REQUIRED, BIONETWORK, EXAMPLE].map(makeColumn),
+    };
+    return React.createElement(Filters, { table: table });
+};
+export const Default = {
+    render: () => React.createElement(DefaultStory, null),
+};

package/lib/components/DataDictionary/components/Filters/stories/hook.d.ts

@@ -0,0 +1,5 @@
+import { Dispatch, SetStateAction } from "react";
+export declare function useFilterStore(): {
+    filterStore: Record<string, unknown>;
+    setFilterStore: Dispatch<SetStateAction<Record<string, unknown>>>;
+};

package/lib/components/DataDictionary/components/Filters/stories/hook.js

@@ -0,0 +1,5 @@
+import { useState } from "react";
+export function useFilterStore() {
+    const [filterStore, setFilterStore] = useState({});
+    return { filterStore, setFilterStore };
+}

package/lib/components/DataDictionary/components/Filters/stories/types.d.ts

@@ -0,0 +1,4 @@
+import { Column } from "@tanstack/react-table";
+export type PartialColumn = Partial<Column<unknown>> & {
+    id: string;
+};

package/lib/components/DataDictionary/components/Filters/stories/types.js

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

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

@@ -0,0 +1,5 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+export interface FiltersProps<T extends RowData = Attribute> {
+    table: Table<T>;
+}

package/lib/components/DataDictionary/components/Filters/types.js

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

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.js

@@ -3,12 +3,14 @@ import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoi
 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") `
   grid-column: 2;
   grid-row: 1;
   padding-bottom: ${PB}px;
-  padding-top: ${({ top }) => top + TITLE_HEIGHT + PT}px;
+  padding-top: ${({ top }) => top + TITLE_HEIGHT + FILTERS_HEIGHT + PT}px;
   z-index: 1; /* not required, but helpful in that the entities are always on top */
 
   ${mediaTabletDown} {

package/lib/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.d.ts

@@ -0,0 +1,2 @@
+import { FiltersLayoutProps } from "./types";
+export declare const FiltersLayout: ({ children, ...props }: FiltersLayoutProps) => JSX.Element;

package/lib/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { Layout } from "./filtersLayout.styles";
+export const FiltersLayout = ({ children, ...props }) => {
+    return React.createElement(Layout, { ...props }, children);
+};

package/lib/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.styles.d.ts

@@ -0,0 +1,5 @@
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+export declare const Layout: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & LayoutSpacing, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.styles.js

@@ -0,0 +1,24 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { LAYOUT_SPACING } from "../../constants";
+const PB = LAYOUT_SPACING.FILTERS_PADDING_BOTTOM; /* bottom padding */
+const PT = LAYOUT_SPACING.FILTERS_PADDING_TOP; /* top padding */
+const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
+export const Layout = styled("div") `
+  align-self: flex-start;
+  background-color: ${PALETTE.BACKGROUND_DEFAULT};
+  grid-column: 2;
+  grid-row: 1;
+  margin-bottom: ${PB}px;
+  padding-top: ${({ top }) => top + TITLE_HEIGHT + PT}px;
+  position: sticky;
+  top: 0;
+  z-index: 2; /* required, filters should be on top of entities */
+
+  ${mediaTabletDown} {
+    grid-column: 1;
+    grid-row: auto;
+    padding-top: ${PT}px;
+  }
+`;

package/lib/components/DataDictionary/components/Layout/components/FiltersLayout/types.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+export interface FiltersLayoutProps extends LayoutSpacing {
+    children: ReactNode;
+}

package/lib/components/DataDictionary/components/Layout/components/FiltersLayout/types.js

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

package/lib/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.styles.js

@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
 import { LAYOUT_SPACING } from "../../constants";
 const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
-const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
+const PT = LAYOUT_SPACING.OUTLINE_PADDING_TOP; /* top padding */
 const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
 export const Layout = styled("div") `
   grid-column: 1;

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.js

@@ -7,6 +7,7 @@ export const Layout = styled("div") `
   padding-top: ${({ top }) => top}px; /* header height */
   position: sticky;
   top: 0;
+  z-index: 4;
 
   ${mediaTabletDown} {
     grid-column: 1;

package/lib/components/DataDictionary/components/Layout/constants.d.ts

@@ -1,5 +1,9 @@
 export declare const LAYOUT_SPACING: {
     CONTENT_PADDING_BOTTOM: number;
     CONTENT_PADDING_TOP: number;
+    FILTERS_HEIGHT: number;
+    FILTERS_PADDING_BOTTOM: number;
+    FILTERS_PADDING_TOP: number;
+    OUTLINE_PADDING_TOP: number;
     TITLE_HEIGHT: number;
 };

package/lib/components/DataDictionary/components/Layout/constants.js

@@ -1,5 +1,9 @@
 export const LAYOUT_SPACING = {
     CONTENT_PADDING_BOTTOM: 24,
     CONTENT_PADDING_TOP: 16,
+    FILTERS_HEIGHT: 40,
+    FILTERS_PADDING_BOTTOM: 16,
+    FILTERS_PADDING_TOP: 16,
+    OUTLINE_PADDING_TOP: 16,
     TITLE_HEIGHT: 74,
 };

package/lib/components/DataDictionary/components/Outline/utils.d.ts

@@ -1,9 +1,9 @@
-import { RowData } from "@tanstack/react-table";
-import { Attribute, Class } from "../../../../common/entities";
+import { RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
 import { OutlineItem } from "../../../Layout/components/Outline/types";
 /**
- * Returns outline items from classes.
- * @param classes - Class entities.
+ * Returns outline items from class metadata.
+ * @param table - Table instance.
  * @returns Outline items.
  */
-export declare function buildClassesOutline<T extends RowData = Attribute>(classes: Class<T>[]): OutlineItem[];
+export declare function buildClassesOutline<T extends RowData = Attribute>(table: Table<T>): OutlineItem[];

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

@@ -1,15 +1,32 @@
 /**
- * Returns outline items from classes.
- * @param classes - Class entities.
+ * Returns outline items from class metadata.
+ * @param table - Table instance.
  * @returns Outline items.
  */
-export function buildClassesOutline(classes) {
-    return classes.map(({ name, title }) => {
+export function buildClassesOutline(table) {
+    const meta = table.options.meta;
+    if (!meta)
+        return [];
+    if (!("classMeta" in meta))
+        return [];
+    return Object.entries(meta.classMeta).map(([classKey, { title }]) => {
         return {
             depth: 2,
-            disabled: false,
-            hash: name,
+            disabled: !hasGroupedRow(table, classKey),
+            hash: classKey,
             value: title,
         };
     });
 }
+/**
+ * Returns true if a grouped row exists for a class key.
+ * @param table - Table instance.
+ * @param classKey - Class key.
+ * @returns True if a grouped row exists, false otherwise.
+ */
+function hasGroupedRow(table, classKey) {
+    const groupRow = table
+        .getGroupedRowModel()
+        .rows.find((row) => row.getValue("classKey") === classKey);
+    return !!groupRow;
+}

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

@@ -1,3 +1,3 @@
-import { ColumnDef, RowData, Table } from "@tanstack/react-table";
-import { Attribute } from "../../../../common/entities";
-export declare const useTable: <T extends RowData = Attribute>(data: T[], columnDefs: ColumnDef<T, T[keyof T]>[]) => Table<T>;
+import { ColumnDef, RowData, Table, TableOptions } from "@tanstack/react-table";
+import { Attribute, Class } from "../../../../common/entities";
+export declare const useTable: <T extends RowData = Attribute>(classes: Class<T>[], columnDefs: ColumnDef<T, T[keyof T]>[], tableOptions?: Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel">) => Table<T>;

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

@@ -1,12 +1,20 @@
 import { useReactTable, } from "@tanstack/react-table";
+import { useMemo } from "react";
 import { useTableOptions } from "./options/hook";
-export const useTable = (data, columnDefs) => {
-    // Table options.
-    const tableOptions = useTableOptions();
+import { buildClassMeta, buildTableData } from "./utils";
+export const useTable = (classes, columnDefs, tableOptions) => {
+    // Build table data.
+    const data = useMemo(() => buildTableData(classes), [classes]);
+    // Default table options.
+    const defaultTableOptions = useTableOptions();
+    // Build class meta.
+    const classMeta = useMemo(() => buildClassMeta(classes), [classes]);
     // Table instance.
     return useReactTable({
+        ...defaultTableOptions,
         ...tableOptions,
         columns: columnDefs,
         data,
+        meta: { classMeta },
     });
 };

package/lib/components/DataDictionary/components/Table/options/columnFilters/constants.d.ts

@@ -0,0 +1,2 @@
+import { ColumnFiltersOptions, RowData } from "@tanstack/react-table";
+export declare const COLUMN_FILTERS_OPTIONS: Pick<ColumnFiltersOptions<RowData>, "enableColumnFilters" | "enableFilters" | "filterFns" | "getFilteredRowModel">;