feat: added AnVIL data dictionary column defs #4451

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 @@
     };
   };
 }
+
+/**
+ * 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<Attribute, AttributeValue>[] {
+  return columnDefConfigs.map((columnDefConfig) => {
+    const {
+      attributeDisplayName: header,
+      attributeSlotName: key,
+      width: { max, min },
+    } = columnDefConfig;
+    return {
+      accessorFn: (row) => row[key as keyof Attribute],
+      cell: (props: CellContext<Attribute, AttributeValue>) =>
+        BasicCell({ ...props }),
+      header: `${header}`,
+      id: key,
+      meta: { width: { max, min } },
+    };
+  });
+}

site-config/anvil-cmg/dev/config.ts

@@ -2,7 +2,10 @@
 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 { 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 @@
       key: "anvil-cmg",
     },
     contentDir: "anvil-cmg",
-    dataDictionary,
+    dataDictionaries: [
+      {
+        columnDefs: buildColumnDefs(columnDefs),
+        dataDictionary,
+      },
+    ],
     dataSource: {
       defaultListParams: {
         size: "25",

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"
+    }
+  }
+]