diff --git a/app/config/utils.ts b/app/config/utils.ts index d5080a15c..7592a247f 100644 --- a/app/config/utils.ts +++ b/app/config/utils.ts @@ -1,4 +1,11 @@ -import { SelectCategoryValue } from "@databiosphere/findable-ui/lib/common/entities"; +import { + Attribute, + AttributeValue, + DataDictionaryColumnDef, + SelectCategoryValue, +} from "@databiosphere/findable-ui/lib/common/entities"; +import { CellContext, ColumnDef } from "@tanstack/react-table"; +import { BasicCell } from "@databiosphere/findable-ui/lib/components/DataDictionary/components/Table/components/BasicCell/basicCell"; /** * Returns select category value with formatted label. @@ -15,3 +22,29 @@ export function mapSelectCategoryValue( }; }; } + +/** + * Returns an array of column defs, built from column def configurations, to + * use when displaying the data dictionary. + * @param columnDefConfigs - Array of column def configurations. + * @returns Array of column defs. + */ +export function buildColumnDefs( + columnDefConfigs: DataDictionaryColumnDef[] +): ColumnDef[] { + return columnDefConfigs.map((columnDefConfig) => { + const { + attributeDisplayName: header, + attributeSlotName: key, + width: { max, min }, + } = columnDefConfig; + return { + accessorFn: (row) => row[key as keyof Attribute], + cell: (props: CellContext) => + BasicCell({ ...props }), + header: `${header}`, + id: key, + meta: { width: { max, min } }, + }; + }); +} diff --git a/site-config/anvil-cmg/dev/config.ts b/site-config/anvil-cmg/dev/config.ts index 03a990aeb..40d181999 100644 --- a/site-config/anvil-cmg/dev/config.ts +++ b/site-config/anvil-cmg/dev/config.ts @@ -2,7 +2,10 @@ import { APIEndpoints } from "@databiosphere/findable-ui/lib/apis/azul/common/en import { SystemStatusBindResponseFn } from "@databiosphere/findable-ui/lib/config/entities"; import { CATALOG_DEFAULT } from "../../../app/apis/azul/anvil-cmg/common/constants"; import * as C from "../../../app/components/index"; -import { mapSelectCategoryValue } from "../../../app/config/utils"; +import { + buildColumnDefs, + mapSelectCategoryValue, +} from "../../../app/config/utils"; import { bindSystemStatusResponse } from "../../../app/viewModelBuilders/azul/common/systemStatusMapper/systemStatusMapper"; import { FLATTEN, GIT_HUB_REPO_URL } from "../../common/constants"; import { SiteConfig } from "../../common/entities"; @@ -19,6 +22,7 @@ import { filesEntityConfig } from "./index/filesEntityConfig"; import { summary } from "./index/summary"; import { floating } from "./layout/floating"; import dataDictionary from "./dataDictionary/data-dictionary.json"; +import columnDefs from "./dataDictionary/column-defs.json"; // Template constants const APP_TITLE = "AnVIL Data Explorer"; @@ -126,7 +130,12 @@ export function makeConfig( key: "anvil-cmg", }, contentDir: "anvil-cmg", - dataDictionary, + dataDictionaries: [ + { + columnDefs: buildColumnDefs(columnDefs), + dataDictionary, + }, + ], dataSource: { defaultListParams: { size: "25", diff --git a/site-config/anvil-cmg/dev/dataDictionary/column-defs.json b/site-config/anvil-cmg/dev/dataDictionary/column-defs.json new file mode 100644 index 000000000..84d1597c6 --- /dev/null +++ b/site-config/anvil-cmg/dev/dataDictionary/column-defs.json @@ -0,0 +1,26 @@ +[ + { + "attributeDisplayName": "Label", + "attributeSlotName": "label", + "width": { + "max": "1fr", + "min": "200px" + } + }, + { + "attributeDisplayName": "Description", + "attributeSlotName": "description", + "width": { + "max": "2fr", + "min": "480px" + } + }, + { + "attributeDisplayName": "Key", + "attributeSlotName": "key", + "width": { + "max": "1fr", + "min": "180px" + } + } +]