@databiosphere/findable-ui 21.1.1 → 21.3.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "21.1.1"
+  ".": "21.3.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [21.3.0](https://github.com/DataBiosphere/findable-ui/compare/v21.2.0...v21.3.0) (2025-02-14)
+
+
+### Features
+
+* add data dictionary tooltip support [#4131](https://github.com/DataBiosphere/findable-ui/issues/4131) ([#320](https://github.com/DataBiosphere/findable-ui/issues/320)) ([849e5cf](https://github.com/DataBiosphere/findable-ui/commit/849e5cf5898f71be210436863c9b10baf85a8427))
+
+## [21.2.0](https://github.com/DataBiosphere/findable-ui/compare/v21.1.1...v21.2.0) (2025-02-12)
+
+
+### Features
+
+* create data dictionary tooltip component ([#317](https://github.com/DataBiosphere/findable-ui/issues/317)) ([#318](https://github.com/DataBiosphere/findable-ui/issues/318)) ([be4fd30](https://github.com/DataBiosphere/findable-ui/commit/be4fd30bcc2d04db230f0beefbae5ff3f7998d0b))
+
 ## [21.1.1](https://github.com/DataBiosphere/findable-ui/compare/v21.1.0...v21.1.1) (2025-01-31)
 
 

package/lib/common/entities.d.ts

@@ -1,3 +1,11 @@
+/**
+ * Model of a value of a metadata class.
+ */
+export interface Attribute {
+    description: string;
+    key: string;
+    label: string;
+}
 /**
  * Filterable metadata keys.
  */
@@ -10,10 +18,34 @@ export interface CategoryTag {
     onRemove: () => void;
     superseded: boolean;
 }
+/**
+ * Model of a metadata class, to be specified manually or built from LinkML schema.
+ */
+export interface Class {
+    attributes: Attribute[];
+    description: string;
+    key: string;
+    label: string;
+    name: string;
+}
 /**
  * Category values to be used as keys. For example, "Homo sapiens" or "10X 3' v2 sequencing".
  */
 export type CategoryValueKey = unknown;
+/**
+ * Model of a metadata dictionary containing a set of classes and their definitions.
+ */
+export interface DataDictionary {
+    classes: Class[];
+}
+/**
+ * Label and description values from a data dictionary that are added to a site
+ * config value.
+ */
+export interface DataDictionaryAnnotation {
+    description: string;
+    label: string;
+}
 /**
  * Set of selected category values.
  */
@@ -63,6 +95,7 @@ export interface SelectCategoryValueView {
  * View model of category, for multiselect categories.
  */
 export interface SelectCategoryView {
+    annotation?: DataDictionaryAnnotation;
     isDisabled?: boolean;
     key: CategoryKey;
     label: string;

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

@@ -0,0 +1,38 @@
+import { DataDictionaryAnnotation } from "../../../common/entities";
+import { SiteConfig } from "../../../config/entities";
+/**
+ * Annotate each entity column configuration with data dictionary values. Specifically,
+ * look up label and description for each column key.
+ * @param siteConfig - Site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export declare function annotateColumnConfig(siteConfig: SiteConfig, annotationsByKey: Record<string, DataDictionaryAnnotation>): void;
+/**
+ * Annotate filter and colummn configuration with data dictionary values. Note this
+ * functionality mutates the site config. A possible future improvement would be to
+ * create either a specific "raw"  or "annotated" type to indicate clearly the point
+ * at which the config has been annotated.
+ * @param siteConfig - The site configuration to annotate.
+ */
+export declare function annotateSiteConfig(siteConfig: SiteConfig): void;
+/**
+ * Annotate entity configuration with data dictionary values. Specifically, look
+ * up label and description for each entity key.
+ * @param siteConfig - The site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export declare function annotateEntityConfig(siteConfig: SiteConfig, annotationsByKey: Record<string, DataDictionaryAnnotation>): void;
+/**
+ * Annotate top-level (app-wide) category config with data dictionary values.
+ * Specifically, look up label and description for each filter key.
+ * @param siteConfig - Site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export declare function annotateDefaultCategoryConfig(siteConfig: SiteConfig, annotationsByKey: Record<string, DataDictionaryAnnotation>): void;
+/**
+ * Annotate entity-specific category config with data dictionary values. Specifically,
+ * look up label and description for each category key.
+ * @param siteConfig - Site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export declare function annotateEntityCategoryConfig(siteConfig: SiteConfig, annotationsByKey: Record<string, DataDictionaryAnnotation>): void;

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

@@ -0,0 +1,122 @@
+/**
+ * Annotate each entity column configuration with data dictionary values. Specifically,
+ * look up label and description for each column key.
+ * @param siteConfig - Site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export function annotateColumnConfig(siteConfig, annotationsByKey) {
+    // Annotate every column in every entity.
+    siteConfig.entities.forEach((entity) => {
+        entity.list.columns.forEach((columnConfig) => {
+            // Find the annotation for the column key.
+            const annotation = annotationsByKey[columnConfig.id];
+            if (!annotation) {
+                return;
+            }
+            if (!columnConfig.meta) {
+                columnConfig.meta = {};
+            }
+            columnConfig.meta.annotation = annotation;
+        });
+    });
+}
+/**
+ * Annotate filter and colummn configuration with data dictionary values. Note this
+ * functionality mutates the site config. A possible future improvement would be to
+ * create either a specific "raw"  or "annotated" type to indicate clearly the point
+ * at which the config has been annotated.
+ * @param siteConfig - The site configuration to annotate.
+ */
+export function annotateSiteConfig(siteConfig) {
+    // Build and map data dictionary annotations by key.
+    const { dataDictionary } = siteConfig;
+    if (!dataDictionary) {
+        return;
+    }
+    const annotationsByKey = keyAnnotationsByKey(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
+ * up label and description for each entity key.
+ * @param siteConfig - The site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export function annotateEntityConfig(siteConfig, annotationsByKey) {
+    // Annotate every entity.
+    siteConfig.entities.forEach((entityConfig) => {
+        // Check entity for a data dictionary key.
+        const { key } = entityConfig;
+        if (!key) {
+            return;
+        }
+        // Find corresponding annotation for the key and set on entity config.
+        entityConfig.annotation = annotationsByKey[key];
+    });
+}
+/**
+ * Annotate top-level (app-wide) category config with data dictionary values.
+ * Specifically, look up label and description for each filter key.
+ * @param siteConfig - Site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export function annotateDefaultCategoryConfig(siteConfig, annotationsByKey) {
+    const { categoryGroupConfig } = siteConfig;
+    if (categoryGroupConfig) {
+        annotateCategoryGroupConfig(categoryGroupConfig, annotationsByKey);
+    }
+}
+/**
+ * Annotate entity-specific category config with data dictionary values. Specifically,
+ * look up label and description for each category key.
+ * @param siteConfig - Site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export function annotateEntityCategoryConfig(siteConfig, annotationsByKey) {
+    // Annotate every category in every entity.
+    siteConfig.entities.forEach((entityConfig) => {
+        const { categoryGroupConfig } = entityConfig;
+        if (categoryGroupConfig) {
+            annotateCategoryGroupConfig(categoryGroupConfig, annotationsByKey);
+        }
+    });
+}
+/**
+ * Annonate category group configuration with data dictionary values.
+ * @param categoryGroupConfig - Category group to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+function annotateCategoryGroupConfig(categoryGroupConfig, annotationsByKey) {
+    categoryGroupConfig.categoryGroups.forEach((categoryGroup) => {
+        categoryGroup.categoryConfigs.forEach((categorConfig) => {
+            categorConfig.annotation = annotationsByKey[categorConfig.key];
+        });
+    });
+}
+/**
+ * Transform a data dictionary into a key-annotation map. Build annotations for both
+ * classes and attributes and add to map.
+ * @param dataDictionary - Data dictionary to transform into a key-annotation map.
+ * @returns Key-annotation map.
+ */
+function keyAnnotationsByKey(dataDictionary) {
+    return dataDictionary.classes.reduce((acc, cls) => {
+        // Add class to map.
+        acc[cls.key] = {
+            description: cls.description,
+            label: cls.label,
+        };
+        // Add each class attribute to the map.
+        cls.attributes.forEach((attribute) => {
+            acc[attribute.key] = {
+                description: attribute.description,
+                label: attribute.label,
+            };
+        });
+        return acc;
+    }, {});
+}

package/lib/components/DataDictionary/components/Tooltip/components/Title/constants.d.ts

@@ -0,0 +1,3 @@
+import { StackProps, TypographyProps } from "@mui/material";
+export declare const STACK_PROPS: StackProps;
+export declare const TYPOGRAPHY_PROPS: TypographyProps;

package/lib/components/DataDictionary/components/Tooltip/components/Title/constants.js

@@ -0,0 +1,8 @@
+export const STACK_PROPS = {
+    spacing: 2,
+    useFlexGap: true,
+};
+export const TYPOGRAPHY_PROPS = {
+    color: "ink.light",
+    component: "div",
+};

package/lib/components/DataDictionary/components/Tooltip/components/Title/title.d.ts

@@ -0,0 +1,3 @@
+import { BaseComponentProps } from "../../../../../types";
+import { TitleProps } from "./types";
+export declare const Title: ({ className, description, title, }: BaseComponentProps & Required<TitleProps>) => JSX.Element;

package/lib/components/DataDictionary/components/Tooltip/components/Title/title.js

@@ -0,0 +1,9 @@
+import { Stack, Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_LARGE_500 } from "../../../../../../theme/common/typography";
+import { STACK_PROPS, TYPOGRAPHY_PROPS } from "./constants";
+export const Title = ({ className, description, title, }) => {
+    return (React.createElement(Stack, { ...STACK_PROPS, className: className },
+        React.createElement(Typography, { variant: TEXT_BODY_LARGE_500 }, title),
+        React.createElement(Typography, { ...TYPOGRAPHY_PROPS }, description)));
+};

package/lib/components/DataDictionary/components/Tooltip/components/Title/types.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface TitleProps {
+    description?: ReactNode;
+    title: ReactNode;
+}

package/lib/components/DataDictionary/components/Tooltip/components/Title/types.js

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

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

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

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

@@ -0,0 +1,24 @@
+import { TEXT_BODY_SMALL_400_2_LINES } from "../../../../theme/common/typography";
+export const TOOLTIP_PROPS = {
+    arrow: true,
+    disableInteractive: true,
+    enterNextDelay: 250,
+    slotProps: {
+        arrow: { sx: (theme) => ({ color: theme.palette.common.white }) },
+        popper: {
+            modifiers: [
+                { name: "offset", options: { offset: [0, 2] } },
+                { name: "preventOverflow", options: { padding: 8 } },
+            ],
+        },
+        tooltip: {
+            sx: (theme) => ({
+                ...theme.typography[TEXT_BODY_SMALL_400_2_LINES],
+                backgroundColor: theme.palette.common.white,
+                borderRadius: 2,
+                color: theme.palette.ink.main,
+                padding: 4,
+            }),
+        },
+    },
+};

package/lib/components/DataDictionary/components/Tooltip/tooltip.d.ts

@@ -0,0 +1,4 @@
+import { BaseComponentProps } from "../../../types";
+import { TitleProps } from "./components/Title/types";
+import { TooltipProps } from "./types";
+export declare const Tooltip: ({ children, className, description, title, ...props }: BaseComponentProps & TitleProps & TooltipProps) => JSX.Element;

package/lib/components/DataDictionary/components/Tooltip/tooltip.js

@@ -0,0 +1,8 @@
+import { Tooltip as MTooltip } from "@mui/material";
+import React from "react";
+import { Title } from "./components/Title/title";
+import { TOOLTIP_PROPS } from "./constants";
+export const Tooltip = ({ children, className, description, title, ...props }) => {
+    return (React.createElement(MTooltip, { ...TOOLTIP_PROPS, className: className, title: description && React.createElement(Title, { description: description, title: title }), ...props },
+        React.createElement("span", null, children)));
+};

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

@@ -0,0 +1,5 @@
+import { TooltipProps as MTooltipProps } from "@mui/material";
+import { ReactNode } from "react";
+export type TooltipProps = Omit<MTooltipProps, "children"> & {
+    children: ReactNode;
+};

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

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

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

@@ -48,7 +48,7 @@ export const Filter = ({ categorySection, categoryView, closeAncestor, isFilterD
         trackFilterOpened?.({ category: categoryView.key });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(FilterLabel, { count: categoryView.values.length, disabled: categoryView.isDisabled, isOpen: isOpen, label: categoryView.label, onClick: onOpenFilter }),
+        React.createElement(FilterLabel, { annotation: categoryView.annotation, count: categoryView.values.length, disabled: categoryView.isDisabled, isOpen: isOpen, label: categoryView.label, onClick: onOpenFilter }),
         React.createElement(FilterPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, TransitionComponent: TransitionComponent, transitionDuration: TransitionDuration },
             isOpen && isFilterDrawer && (React.createElement(IconButton, { Icon: CloseRounded, onClick: onCloseFilters, size: "medium" })),
             React.createElement(FilterMenu, { categorySection: categorySection, categoryKey: categoryView.key, categoryLabel: categoryView.label, isFilterDrawer: isFilterDrawer, onFilter: onFilter, onCloseFilter: onCloseFilter, values: categoryView.values })),

package/lib/components/Filter/components/FilterLabel/filterLabel.d.ts

@@ -1,9 +1,11 @@
 import { MouseEvent } from "react";
+import { DataDictionaryAnnotation } from "../../../../common/entities";
 export interface FilterLabelProps {
+    annotation?: DataDictionaryAnnotation;
     count?: number;
     disabled?: boolean;
     isOpen: boolean;
     label: string;
     onClick: (event: MouseEvent<HTMLButtonElement>) => void;
 }
-export declare const FilterLabel: ({ count, disabled, isOpen, label, onClick, }: FilterLabelProps) => JSX.Element;
+export declare const FilterLabel: ({ annotation, count, disabled, isOpen, label, onClick, }: FilterLabelProps) => JSX.Element;

package/lib/components/Filter/components/FilterLabel/filterLabel.js

@@ -1,7 +1,9 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
 import React from "react";
+import { Tooltip } from "../../../DataDictionary/components/Tooltip/tooltip";
 import { FilterLabel as Label } from "./filterLabel.styles";
-export const FilterLabel = ({ count, disabled = false, isOpen, label, onClick, }) => {
+export const FilterLabel = ({ annotation, count, disabled = false, isOpen, label, onClick, }) => {
     const filterLabel = count ? `${label}\xa0(${count})` : label; // When the count is present, a non-breaking space is used to prevent it from being on its own line
-    return (React.createElement(Label, { color: "inherit", disabled: disabled, endIcon: React.createElement(ArrowDropDownRoundedIcon, { fontSize: "small" }), fullWidth: true, isOpen: isOpen, onClick: onClick }, filterLabel));
+    return (React.createElement(Tooltip, { description: annotation?.description, title: annotation?.label },
+        React.createElement(Label, { color: "inherit", disabled: disabled, endIcon: React.createElement(ArrowDropDownRoundedIcon, { fontSize: "small" }), fullWidth: true, isOpen: isOpen, onClick: onClick }, filterLabel)));
 };

package/lib/components/Index/components/Tabs/common/utils.js

@@ -4,9 +4,10 @@
  * @returns tabs list.
  */
 export function getEntityListTabs(entities) {
-    return entities.reduce((acc, { label, listView: { enableTab = true } = {}, route, tabIcon: icon, tabIconPosition: iconPosition, }) => {
+    return entities.reduce((acc, { annotation, label, listView: { enableTab = true } = {}, route, tabIcon: icon, tabIconPosition: iconPosition, }) => {
         if (enableTab) {
             acc.push({
+                annotation,
                 icon,
                 iconPosition,
                 label,

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

@@ -2,6 +2,7 @@ import SouthRoundedIcon from "@mui/icons-material/SouthRounded";
 import { TableHead as MTableHead, TableRow as MTableRow, TableCell, TableSortLabel, } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
+import { Tooltip } from "../../../DataDictionary/components/Tooltip/tooltip";
 import { ROW_DIRECTION } from "../../common/entities";
 import { getTableCellAlign, getTableCellPadding, } from "../TableCell/common/utils";
 import { handleToggleSorting } from "../TableFeatures/RowSorting/utils";
@@ -11,6 +12,8 @@ export const TableHead = ({ rowDirection, tableInstance, }) => {
         tableInstance.getHeaderGroups().map((headerGroup) => (React.createElement(MTableHead, { key: headerGroup.id },
             React.createElement(MTableRow, null, headerGroup.headers.map(({ column, getContext, id }) => {
                 const { columnDef, getIsGrouped, getIsSorted } = column;
-                return getIsGrouped() ? null : (React.createElement(TableCell, { key: id, align: getTableCellAlign(column), padding: getTableCellPadding(id) }, shouldSortColumn(tableInstance, column) ? (React.createElement(TableSortLabel, { IconComponent: SouthRoundedIcon, active: Boolean(getIsSorted()), direction: getIsSorted() || undefined, disabled: isSortDisabled(tableInstance), onClick: (mouseEvent) => handleToggleSorting(mouseEvent, tableInstance, column) }, flexRender(columnDef.header, getContext()))) : (flexRender(columnDef.header, getContext()))));
+                const annotation = columnDef.meta?.annotation;
+                return getIsGrouped() ? null : (React.createElement(TableCell, { key: id, align: getTableCellAlign(column), padding: getTableCellPadding(id) },
+                    React.createElement(Tooltip, { description: annotation?.description, title: annotation?.label }, shouldSortColumn(tableInstance, column) ? (React.createElement(TableSortLabel, { IconComponent: SouthRoundedIcon, active: Boolean(getIsSorted()), direction: getIsSorted() || undefined, disabled: isSortDisabled(tableInstance), onClick: (mouseEvent) => handleToggleSorting(mouseEvent, tableInstance, column) }, flexRender(columnDef.header, getContext()))) : (flexRender(columnDef.header, getContext())))));
             })))))));
 };

package/lib/components/common/Tabs/tabs.d.ts

@@ -1,9 +1,11 @@
 import { TabProps as MTabProps, TabsProps as MTabsProps } from "@mui/material";
 import { ReactNode } from "react";
+import { DataDictionaryAnnotation } from "../../../common/entities";
 export type TabsValue = MTabsProps["value"];
 export type TabValue = MTabProps["value"];
 export type OnTabChangeFn = (tabValue: TabValue) => void;
 export interface Tab {
+    annotation?: DataDictionaryAnnotation;
     count?: string;
     icon?: MTabProps["icon"];
     iconPosition?: MTabProps["iconPosition"];

package/lib/components/common/Tabs/tabs.js

@@ -1,6 +1,19 @@
 import { Tabs as MTabs, } from "@mui/material";
 import React from "react";
+import { Tooltip } from "../../DataDictionary/components/Tooltip/tooltip";
 import { Tab, TabScrollFuzz } from "./tabs.styles";
 export const Tabs = ({ className, onTabChange, tabs, value, }) => {
-    return (React.createElement(MTabs, { allowScrollButtonsMobile: true, className: className, onChange: (_, tabValue) => onTabChange(tabValue), ScrollButtonComponent: TabScrollFuzz, value: value }, tabs.map(({ count, icon, iconPosition = "start", label, value: tabValue }, t) => (React.createElement(Tab, { icon: icon, iconPosition: icon ? iconPosition : undefined, key: `${label}${t}`, label: count ? `${label} (${count})` : label, value: tabValue })))));
+    return (React.createElement(MTabs, { allowScrollButtonsMobile: true, className: className, onChange: (_, tabValue) => onTabChange(tabValue), ScrollButtonComponent: TabScrollFuzz, value: value }, tabs.map(({ annotation, count, icon, iconPosition = "start", label, value: tabValue, }, t) => (React.createElement(Tab, { icon: icon, iconPosition: icon ? iconPosition : undefined, key: `${label}${t}`, label: buildTabLabel(label, count, annotation), value: tabValue })))));
 };
+/**
+ * Build a tab value from a tab config. Specifically, display the tab label
+ * with a tooltip annotation if necessary.
+ * @param label - Tab display value.
+ * @param count - Optional count to display next to the tab label.
+ * @param annotation - Data dictionary annotation.
+ * @returns Tab label with optional count and tooltip.
+ */
+function buildTabLabel(label, count, annotation) {
+    return (React.createElement(Tooltip, { description: annotation?.description, title: annotation?.label },
+        React.createElement("span", null, count ? `${label} (${count})` : label)));
+}

package/lib/config/entities.d.ts

@@ -1,7 +1,7 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
 import { CellContext, ColumnDef, ColumnMeta, ColumnSort, GroupingState, RowData, Table, TableOptions } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
-import { SelectCategoryValueView, SelectedFilter } from "../common/entities";
+import { DataDictionary, DataDictionaryAnnotation, SelectCategoryValueView, SelectedFilter } from "../common/entities";
 import { HeroTitle } from "../components/common/Title/title";
 import { FooterProps } from "../components/Layout/components/Footer/footer";
 import { HeaderProps } from "../components/Layout/components/Header/header";
@@ -70,6 +70,7 @@ export interface CategoryGroup {
  * Model of category configured in site config.
  */
 export interface CategoryConfig {
+    annotation?: DataDictionaryAnnotation;
     key: string;
     label: string;
     mapSelectCategoryValue?: (selectCategoryValue: SelectCategoryValueView) => SelectCategoryValueView;
@@ -127,6 +128,7 @@ export type EntityPath = string;
  * the detail and the list page configuration.
  */
 export interface EntityConfig<T = any, I = any> extends TabConfig {
+    annotation?: DataDictionaryAnnotation;
     apiPath?: EntityPath;
     categoryGroupConfig?: CategoryGroupConfig;
     detail: BackPageConfig;
@@ -137,6 +139,7 @@ export interface EntityConfig<T = any, I = any> extends TabConfig {
     getId?: GetIdFunction<T>;
     getTitle?: GetTitleFunction<T>;
     hideTabs?: boolean;
+    key?: string;
     list: ListConfig<T>;
     listView?: ListViewConfig;
     options?: Options;
@@ -295,6 +298,7 @@ export interface SiteConfig {
     categoryGroupConfig?: CategoryGroupConfig;
     contentDir?: string;
     contentThemeOptionsFn?: ThemeOptionsFn;
+    dataDictionary?: DataDictionary;
     dataSource: DataSourceConfig;
     entities: EntityConfig[];
     explorerTitle: HeroTitle;

package/lib/hooks/useCategoryFilter.js

@@ -27,6 +27,7 @@ function buildCategoryView(category, categoryValueViews, categoryConfigs) {
     const categoryConfig = findCategoryConfig(category.key, categoryConfigs);
     const mapSelectCategoryValue = categoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
     return {
+        annotation: categoryConfig?.annotation,
         isDisabled: false,
         key: category.key,
         label: getCategoryLabel(category.key, categoryConfig),

package/lib/providers/config.js

@@ -1,4 +1,5 @@
-import React, { createContext } from "react";
+import React, { createContext, useState } from "react";
+import { annotateSiteConfig } from "../components/DataDictionary/common/utils";
 import { getDefaultConfig, getDefaultEntityConfig, getEntityConfig, } from "../config/utils";
 export const ConfigContext = createContext({
     config: getDefaultConfig(),
@@ -7,7 +8,13 @@ export const ConfigContext = createContext({
     entityListType: "",
 });
 export function ConfigProvider({ children, config, entityListType = "", }) {
-    const { entities } = config;
+    // Annote config on init. Note config is mutated but using state here to
+    // ensure annotated config is calculated once and is used rather than the raw config.
+    const [annotatedConfig] = useState(() => {
+        annotateSiteConfig(config);
+        return config;
+    });
+    const { entities } = annotatedConfig;
     const defaultEntityListType = config.redirectRootToPath.slice(1);
     const entityName = entityListType || defaultEntityListType;
     const entityConfig = getEntityConfig(entities, entityName);

package/package.json

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

package/src/common/entities.ts

@@ -1,3 +1,12 @@
+/**
+ * Model of a value of a metadata class.
+ */
+export interface Attribute {
+  description: string;
+  key: string;
+  label: string;
+}
+
 /**
  * Filterable metadata keys.
  */
@@ -12,11 +21,38 @@ export interface CategoryTag {
   superseded: boolean;
 }
 
+/**
+ * Model of a metadata class, to be specified manually or built from LinkML schema.
+ */
+export interface Class {
+  attributes: Attribute[];
+  description: string;
+  key: string;
+  label: string;
+  name: string;
+}
+
 /**
  * Category values to be used as keys. For example, "Homo sapiens" or "10X 3' v2 sequencing".
  */
 export type CategoryValueKey = unknown;
 
+/**
+ * Model of a metadata dictionary containing a set of classes and their definitions.
+ */
+export interface DataDictionary {
+  classes: Class[];
+}
+
+/**
+ * Label and description values from a data dictionary that are added to a site
+ * config value.
+ */
+export interface DataDictionaryAnnotation {
+  description: string;
+  label: string;
+}
+
 /**
  * Set of selected category values.
  */
@@ -72,6 +108,7 @@ export interface SelectCategoryValueView {
  * View model of category, for multiselect categories.
  */
 export interface SelectCategoryView {
+  annotation?: DataDictionaryAnnotation;
   isDisabled?: boolean;
   key: CategoryKey;
   label: string;