Skip to content

Commit 723585d

Browse files
frano-mfrano-m
authored
feat!: make data dictionary config generic with attribute as default (#476) (#477)
1 parent efd244b commit 723585d

17 files changed

Lines changed: 92 additions & 104 deletions

File tree

‎src/common/entities.ts‎

Lines changed: 8 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { ColumnDef } from "@tanstack/react-table";
2-
import { GridTrackSize } from "../config/entities";
1+
import { ColumnDef, RowData } from "@tanstack/react-table";
32

43
/**
54
* Model of a value of a metadata class.
@@ -19,11 +18,6 @@ export interface Attribute {
1918
values?: string; // Free text description of attribute values
2019
}
2120

22-
/**
23-
* Model of attribute key types; used mostly when building data dictionary column definitions.
24-
*/
25-
export type AttributeValueTypes<TValue = unknown> = TValue;
26-
2721
/**
2822
* Filterable metadata keys.
2923
*/
@@ -41,8 +35,8 @@ export interface CategoryTag {
4135
/**
4236
* Model of a metadata class, to be specified manually or built from LinkML schema.
4337
*/
44-
export interface Class {
45-
attributes: Attribute[];
38+
export interface Class<T extends RowData = Attribute> {
39+
attributes: T[];
4640
description: string;
4741
name: string; // Programmatic name or key (e.g. cell, sample)
4842
title: string; // Display name
@@ -62,41 +56,24 @@ export type DataDictionaryPrefix = Record<string, string>;
6256
/**
6357
* Model of a metadata dictionary containing a set of classes and their definitions.
6458
*/
65-
export interface DataDictionary {
59+
export interface DataDictionary<T extends RowData = Attribute> {
6660
annotations?: {
6761
[key in keyof DataDictionaryPrefix]: string; // Prefix to title e.g. "cxg": "CELLxGENE"
6862
};
69-
classes: Class[];
63+
classes: Class<T>[];
7064
description?: string; // Free text description of data dictionary
7165
name: string; // Programmatic name or key (e.g. tier1, hca)
7266
prefixes?: DataDictionaryPrefix;
7367
title: string; // Display name
7468
}
7569

76-
/**
77-
* Display model of a data dictionary column.
78-
*/
79-
export interface DataDictionaryColumnDef {
80-
attributeAccessorFnName?: string; // Name of accessor function to map to.
81-
attributeCellName?: string; // Name of cell renderer component to map to.
82-
attributeDisplayName: string;
83-
attributeSlotName: string;
84-
// Adding width here for now; possibly revisit separating column def and UI.
85-
width:
86-
| Omit<GridTrackSize, "GridTrackMinMax">
87-
| {
88-
max: string;
89-
min: string;
90-
};
91-
}
92-
9370
/**
9471
* Configuration of data dictionary; contains schema definition (that is, the actual data
9572
* dictionary) as well as column def for displaying the data dictionary.
9673
*/
97-
export interface DataDictionaryConfig {
98-
columnDefs: ColumnDef<Attribute, AttributeValueTypes>[];
99-
dataDictionary: DataDictionary;
74+
export interface DataDictionaryConfig<T extends RowData = Attribute> {
75+
columnDefs: ColumnDef<T, T[keyof T]>[];
76+
dataDictionary: DataDictionary<T>;
10077
}
10178

10279
/**

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
import { Grid } from "@mui/material";
2+
import { RowData } from "@tanstack/react-table";
23
import React from "react";
4+
import { Attribute } from "../../../../common/entities";
35
import { Entity } from "../Entity/entity";
46
import { GRID_PROPS } from "./constants";
57
import { ClassesProps } from "./types";
68

7-
export const Entities = ({
9+
export const Entities = <T extends RowData = Attribute>({
810
classes,
911
columnDefs,
1012
spacing,
11-
}: ClassesProps): JSX.Element => {
13+
}: ClassesProps<T>): JSX.Element => {
1214
return (
1315
<Grid {...GRID_PROPS}>
14-
{classes.map((classData) => (
16+
{classes.map((cls) => (
1517
<Entity
16-
key={classData.name}
17-
class={classData}
18+
key={cls.name}
19+
class={cls}
1820
columnDefs={columnDefs}
1921
spacing={spacing}
2022
/>

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

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
1-
import { ColumnDef } from "@tanstack/react-table";
2-
import {
3-
Attribute,
4-
AttributeValueTypes,
5-
Class,
6-
} from "../../../../common/entities";
1+
import { ColumnDef, RowData } from "@tanstack/react-table";
2+
import { Attribute, Class } from "../../../../common/entities";
73
import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
84

9-
export interface ClassesProps {
10-
classes: Class[];
11-
columnDefs: ColumnDef<Attribute, AttributeValueTypes>[];
5+
export interface ClassesProps<T extends RowData = Attribute> {
6+
classes: Class<T>[];
7+
columnDefs: ColumnDef<T, T[keyof T]>[];
128
spacing?: LayoutSpacing;
139
}

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Grid, Typography } from "@mui/material";
2+
import { RowData } from "@tanstack/react-table";
23
import React from "react";
4+
import { Attribute } from "../../../../common/entities";
35
import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
46
import { AnchorLink } from "../../../common/AnchorLink/anchorLink";
57
import { useTable } from "../Table/hook";
@@ -8,29 +10,29 @@ import { GRID_PROPS } from "./constants";
810
import { StyledTypography } from "./entity.styles";
911
import { EntityProps } from "./types";
1012

11-
export const Entity = ({
12-
class: classData,
13+
export const Entity = <T extends RowData = Attribute>({
14+
class: cls,
1315
columnDefs,
1416
spacing,
15-
}: EntityProps): JSX.Element => {
16-
const table = useTable(classData.attributes, columnDefs);
17+
}: EntityProps<T>): JSX.Element => {
18+
const table = useTable<T>(cls.attributes, columnDefs);
1719
return (
1820
<Grid {...GRID_PROPS} rowGap={4}>
1921
<Grid {...GRID_PROPS} rowGap={1}>
2022
<StyledTypography
2123
component="h3"
22-
id={classData.name}
24+
id={cls.name}
2325
variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL}
2426
{...spacing}
2527
>
26-
{classData.title} <AnchorLink anchorLink={classData.name} />
28+
{cls.title} <AnchorLink anchorLink={cls.name} />
2729
</StyledTypography>
2830
<Typography
2931
color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
3032
component="div"
3133
variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES}
3234
>
33-
{classData.description}
35+
{cls.description}
3436
</Typography>
3537
</Grid>
3638
<Table table={table} />

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

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
1-
import { ColumnDef } from "@tanstack/react-table";
2-
import {
3-
Attribute,
4-
AttributeValueTypes,
5-
Class,
6-
} from "../../../../common/entities";
1+
import { ColumnDef, RowData } from "@tanstack/react-table";
2+
import { Attribute, Class } from "../../../../common/entities";
73
import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
84

9-
export interface EntityProps {
10-
class: Class;
11-
columnDefs: ColumnDef<Attribute, AttributeValueTypes>[];
5+
export interface EntityProps<T extends RowData = Attribute> {
6+
class: Class<T>;
7+
columnDefs: ColumnDef<T, T[keyof T]>[];
128
spacing?: LayoutSpacing;
139
}

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1-
import { Class } from "../../../../common/entities";
1+
import { RowData } from "@tanstack/react-table";
2+
import { Attribute, Class } from "../../../../common/entities";
23
import { OutlineItem } from "../../../Layout/components/Outline/types";
34

45
/**
56
* Returns outline items from classes.
67
* @param classes - Class entities.
78
* @returns Outline items.
89
*/
9-
export function buildClassesOutline(classes: Class[]): OutlineItem[] {
10+
export function buildClassesOutline<T extends RowData = Attribute>(
11+
classes: Class<T>[]
12+
): OutlineItem[] {
1013
return classes.map(({ name, title }) => {
1114
return {
1215
depth: 2,

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

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
1-
import { ColumnDef, Table, useReactTable } from "@tanstack/react-table";
2-
import { Attribute, AttributeValueTypes } from "../../../../common/entities";
1+
import {
2+
ColumnDef,
3+
RowData,
4+
Table,
5+
useReactTable,
6+
} from "@tanstack/react-table";
7+
import { Attribute } from "../../../../common/entities";
38
import { useTableOptions } from "./options/hook";
49

5-
export const useTable = (
6-
data: Attribute[],
7-
columnDefs: ColumnDef<Attribute, AttributeValueTypes>[]
8-
): Table<Attribute> => {
9-
const tableOptions = useTableOptions();
10-
return useReactTable<Attribute>({
10+
export const useTable = <T extends RowData = Attribute>(
11+
data: T[],
12+
columnDefs: ColumnDef<T, T[keyof T]>[]
13+
): Table<T> => {
14+
// Table options.
15+
const tableOptions = useTableOptions<T>();
16+
17+
// Table instance.
18+
return useReactTable<T>({
1119
...tableOptions,
1220
columns: columnDefs,
1321
data,

‎src/components/DataDictionary/components/Table/options/core/constants.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { CoreOptions, getCoreRowModel } from "@tanstack/react-table";
2-
import { Attribute } from "../../../../../../common/entities";
1+
import { CoreOptions, getCoreRowModel, RowData } from "@tanstack/react-table";
32
import { ROW_POSITION } from "../../../../../Table/features/RowPosition/constants";
43
import { ROW_PREVIEW } from "../../../../../Table/features/RowPreview/constants";
54

65
export const CORE_OPTIONS: Pick<
7-
CoreOptions<Attribute>,
6+
CoreOptions<RowData>,
87
"_features" | "getCoreRowModel"
98
> = {
109
_features: [ROW_POSITION, ROW_PREVIEW],

‎src/components/DataDictionary/components/Table/options/hook.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { TableOptions } from "@tanstack/react-table";
1+
import { RowData, TableOptions } from "@tanstack/react-table";
22
import { Attribute } from "../../../../../common/entities";
33
import { CORE_OPTIONS } from "./core/constants";
44
import { SORTING_OPTIONS } from "./sorting/constants";
55

6-
export const useTableOptions = (): Omit<
7-
TableOptions<Attribute>,
6+
export const useTableOptions = <T extends RowData = Attribute>(): Omit<
7+
TableOptions<T>,
88
"columns" | "data"
99
> => {
1010
return {

‎src/components/DataDictionary/components/Table/options/sorting/constants.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
import { SortingOptions } from "@tanstack/react-table";
2-
import { Attribute } from "../../../../../../common/entities";
1+
import { RowData, SortingOptions } from "@tanstack/react-table";
32

4-
export const SORTING_OPTIONS: Pick<
5-
SortingOptions<Attribute>,
6-
"enableSorting"
7-
> = {
3+
export const SORTING_OPTIONS: Pick<SortingOptions<RowData>, "enableSorting"> = {
84
enableSorting: false,
95
};

0 commit comments

Comments
 (0)