@databiosphere/findable-ui 28.0.0 → 29.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "28.0.0"
+  ".": "29.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [29.0.0](https://github.com/DataBiosphere/findable-ui/compare/v28.0.1...v29.0.0) (2025-05-06)
+
+
+### ⚠ BREAKING CHANGES
+
+* updated data dictionary model #423 ([#454](https://github.com/DataBiosphere/findable-ui/issues/454))
+
+### Features
+
+* updated data dictionary model [#423](https://github.com/DataBiosphere/findable-ui/issues/423) ([#454](https://github.com/DataBiosphere/findable-ui/issues/454)) ([729da9e](https://github.com/DataBiosphere/findable-ui/commit/729da9e569addd680c2b160973f47630441d613c))
+
+## [28.0.1](https://github.com/DataBiosphere/findable-ui/compare/v28.0.0...v28.0.1) (2025-04-30)
+
+
+### Bug Fixes
+
+* fix observable plot y-scale warning caused by numeric strings ([#449](https://github.com/DataBiosphere/findable-ui/issues/449)) ([#450](https://github.com/DataBiosphere/findable-ui/issues/450)) ([53df97a](https://github.com/DataBiosphere/findable-ui/commit/53df97a8508c822aef48aac4c71646cfddc0b605))
+
 ## [28.0.0](https://github.com/DataBiosphere/findable-ui/compare/v27.0.0...v28.0.0) (2025-04-30)
 
 

package/lib/common/entities.d.ts

@@ -3,14 +3,23 @@ import { ColumnDef } from "@tanstack/react-table";
  * Model of a value of a metadata class.
  */
 export interface Attribute {
+    annotations?: {
+        [key in keyof DataDictionaryPrefix]: string;
+    };
     description: string;
-    key: string;
-    label: string;
+    example?: string;
+    multivalued: boolean;
+    name: string;
+    range: string;
+    rationale?: string;
+    required: boolean;
+    title: string;
+    values?: string;
 }
 /**
- * Model of attribute keys; used mostly when building data dictionary column definitions.
+ * Model of attribute key types; used mostly when building data dictionary column definitions.
  */
-export type AttributeValue = Attribute[keyof Attribute];
+export type AttributeValueTypes = string | boolean;
 /**
  * Filterable metadata keys.
  */
@@ -29,19 +38,30 @@ export interface CategoryTag {
 export interface Class {
     attributes: Attribute[];
     description: string;
-    key: string;
-    label: string;
     name: string;
+    title: string;
 }
 /**
  * Category values to be used as keys. For example, "Homo sapiens" or "10X 3' v2 sequencing".
  */
 export type CategoryValueKey = unknown;
+/**
+ * Key value pair where the key is an identifier for a schema and the value is
+ * a URL to the schema definition.
+ */
+export type DataDictionaryPrefix = Record<string, string>;
 /**
  * Model of a metadata dictionary containing a set of classes and their definitions.
  */
 export interface DataDictionary {
+    annotations: {
+        [key in keyof DataDictionaryPrefix]: string;
+    };
     classes: Class[];
+    description: string;
+    name: string;
+    prefixes: DataDictionaryPrefix;
+    title: string;
 }
 /**
  * Display model of a data dictionary column.
@@ -59,7 +79,7 @@ export interface DataDictionaryColumnDef {
  * dictionary) as well as column def for displaying the data dictionary.
  */
 export interface DataDictionaryConfig {
-    columnDefs: ColumnDef<Attribute, Attribute[keyof Attribute]>[];
+    columnDefs: ColumnDef<Attribute>[];
     dataDictionary: DataDictionary;
 }
 /**

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

@@ -108,15 +108,15 @@ function annotateCategoryGroupConfig(categoryGroupConfig, annotationsByKey) {
 function keyAnnotationsByKey(dataDictionary) {
     return dataDictionary.classes.reduce((acc, cls) => {
         // Add class to map.
-        acc[cls.key] = {
+        acc[cls.name] = {
             description: cls.description,
-            label: cls.label,
+            label: cls.title,
         };
         // Add each class attribute to the map.
         cls.attributes.forEach((attribute) => {
-            acc[attribute.key] = {
+            acc[attribute.name] = {
                 description: attribute.description,
-                label: attribute.label,
+                label: attribute.title,
             };
         });
         return acc;

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

@@ -3,5 +3,5 @@ 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((classData) => (React.createElement(Entity, { key: classData.key, class: classData, columnDefs: columnDefs, spacing: spacing })))));
+    return (React.createElement(Grid, { ...GRID_PROPS }, classes.map((classData) => (React.createElement(Entity, { key: classData.name, class: classData, columnDefs: columnDefs, spacing: spacing })))));
 };

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

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

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

@@ -10,10 +10,10 @@ 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 },
-                classData.label,
+            React.createElement(StyledTypography, { component: "h3", id: classData.name, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL, ...spacing },
+                classData.title,
                 " ",
-                React.createElement(AnchorLink, { anchorLink: classData.key })),
+                React.createElement(AnchorLink, { anchorLink: classData.name })),
             React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES }, classData.description)),
         React.createElement(Table, { table: table })));
 };

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

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

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

@@ -4,12 +4,12 @@
  * @returns Outline items.
  */
 export function buildClassesOutline(classes) {
-    return classes.map(({ key, name }) => {
+    return classes.map(({ name, title }) => {
         return {
             depth: 2,
             disabled: false,
-            hash: key,
-            value: name,
+            hash: name,
+            value: title,
         };
     });
 }

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

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

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

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

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

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

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/plot.js

@@ -85,6 +85,7 @@ export function getPlotOptions(selectCategoryValueViews, width) {
             paddingOuter: getYPaddingOuter(),
             tickFormat: () => "",
             tickSize: 0,
+            type: "band", // Treats number-like strings as categorical labels to prevent numeric scale warnings.
         },
     };
 }

package/package.json

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

package/src/common/entities.ts

@@ -4,15 +4,24 @@ import { ColumnDef } from "@tanstack/react-table";
  * Model of a value of a metadata class.
  */
 export interface Attribute {
+  annotations?: {
+    [key in keyof DataDictionaryPrefix]: string; // Prefix to fragment mapping, e.g. cxg: "batch_condition".
+  };
   description: string;
-  key: string;
-  label: string;
+  example?: string; // Free text example of attribute
+  multivalued: boolean; // True if attribute can have multiple values
+  name: string; // Programmatic slot name or key (e.g. batch_condition, biosamples.anatomical_site)
+  range: string; // Type of attribute value e.g. "string"
+  rationale?: string; // Free text rationale for attribute
+  required: boolean;
+  title: string; // Display name
+  values?: string; // Free text description of attribute values
 }
 
 /**
- * Model of attribute keys; used mostly when building data dictionary column definitions.
+ * Model of attribute key types; used mostly when building data dictionary column definitions.
  */
-export type AttributeValue = Attribute[keyof Attribute];
+export type AttributeValueTypes = string | boolean;
 
 /**
  * Filterable metadata keys.
@@ -34,9 +43,8 @@ export interface CategoryTag {
 export interface Class {
   attributes: Attribute[];
   description: string;
-  key: string;
-  label: string;
-  name: string;
+  name: string; // Programmatic name or key (e.g. cell, sample)
+  title: string; // Display name
 }
 
 /**
@@ -44,11 +52,24 @@ export interface Class {
  */
 export type CategoryValueKey = unknown;
 
+/**
+ * Key value pair where the key is an identifier for a schema and the value is
+ * a URL to the schema definition.
+ */
+export type DataDictionaryPrefix = Record<string, string>;
+
 /**
  * Model of a metadata dictionary containing a set of classes and their definitions.
  */
 export interface DataDictionary {
+  annotations: {
+    [key in keyof DataDictionaryPrefix]: string; // Prefix to title e.g. "cxg": "CELLxGENE"
+  };
   classes: Class[];
+  description: string; // Free text description of data dictionary
+  name: string; // Programmatic name or key (e.g. tier1, hca)
+  prefixes: DataDictionaryPrefix;
+  title: string; // Display name
 }
 
 /**
@@ -69,7 +90,7 @@ export interface DataDictionaryColumnDef {
  * dictionary) as well as column def for displaying the data dictionary.
  */
 export interface DataDictionaryConfig {
-  columnDefs: ColumnDef<Attribute, Attribute[keyof Attribute]>[];
+  columnDefs: ColumnDef<Attribute>[];
   dataDictionary: DataDictionary;
 }
 

package/src/components/DataDictionary/common/utils.ts

@@ -145,16 +145,16 @@ function keyAnnotationsByKey(
   return dataDictionary.classes.reduce(
     (acc: Record<string, DataDictionaryAnnotation>, cls: Class) => {
       // Add class to map.
-      acc[cls.key] = {
+      acc[cls.name] = {
         description: cls.description,
-        label: cls.label,
+        label: cls.title,
       };
 
       // Add each class attribute to the map.
       cls.attributes.forEach((attribute: Attribute) => {
-        acc[attribute.key] = {
+        acc[attribute.name] = {
           description: attribute.description,
-          label: attribute.label,
+          label: attribute.title,
         };
       });
       return acc;

package/src/components/DataDictionary/components/Entities/entities.tsx

@@ -13,7 +13,7 @@ export const Entities = ({
     <Grid {...GRID_PROPS}>
       {classes.map((classData) => (
         <Entity
-          key={classData.key}
+          key={classData.name}
           class={classData}
           columnDefs={columnDefs}
           spacing={spacing}

package/src/components/DataDictionary/components/Entities/types.ts

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

package/src/components/DataDictionary/components/Entity/entity.tsx

@@ -19,11 +19,11 @@ export const Entity = ({
       <Grid {...GRID_PROPS} rowGap={1}>
         <StyledTypography
           component="h3"
-          id={classData.key}
+          id={classData.name}
           variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL}
           {...spacing}
         >
-          {classData.label} <AnchorLink anchorLink={classData.key} />
+          {classData.title} <AnchorLink anchorLink={classData.name} />
         </StyledTypography>
         <Typography
           color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}

package/src/components/DataDictionary/components/Entity/types.ts

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

package/src/components/DataDictionary/components/Outline/utils.ts

@@ -7,12 +7,12 @@ import { OutlineItem } from "../../../Layout/components/Outline/types";
  * @returns Outline items.
  */
 export function buildClassesOutline(classes: Class[]): OutlineItem[] {
-  return classes.map(({ key, name }) => {
+  return classes.map(({ name, title }) => {
     return {
       depth: 2,
       disabled: false,
-      hash: key,
-      value: name,
+      hash: name,
+      value: title,
     };
   });
 }

package/src/components/DataDictionary/components/Table/components/BasicCell/types.ts

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

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

@@ -1,10 +1,10 @@
 import { ColumnDef, Table, useReactTable } from "@tanstack/react-table";
-import { Attribute } from "../../../../common/entities";
+import { Attribute, AttributeValueTypes } from "../../../../common/entities";
 import { useTableOptions } from "./options/hook";
 
 export const useTable = (
   data: Attribute[],
-  columnDefs: ColumnDef<Attribute, Attribute[keyof Attribute]>[]
+  columnDefs: ColumnDef<Attribute, AttributeValueTypes>[]
 ): Table<Attribute> => {
   const tableOptions = useTableOptions();
   return useReactTable<Attribute>({

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

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

package/src/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/plot.ts

@@ -105,6 +105,7 @@ export function getPlotOptions(
       paddingOuter: getYPaddingOuter(),
       tickFormat: () => "",
       tickSize: 0,
+      type: "band", // Treats number-like strings as categorical labels to prevent numeric scale warnings.
     },
   };
 }