feat!: implement required filter on data dictionary (#497) (#503)

* feat!: implement required filter on data dictionary (#497)

* refactor: tables into a singular table, grouped by class name (#497)

* refactor: data dictionary table options (#497)

* feat: added filter state to data dictionary (#497)

* feat: update outline (#497)

* feat: linting (#497)

* feat: change filter menu position (#497)

* fix: layout constants (#497)

* fix: grouped row array index to row.id (#497)

* feat: added filter story (#497)

* fix: linting (#497)

* feat: update story args (#497)

* feat: basic column filters test added (#497)

* feat: added column filter tests (#497)

* feat: added clear all disabled test (#497)

---------

Co-authored-by: Fran McDade <franmcdade@Frans-MacBook-Pro.local>

Author: frano-m

jest.config.js

@@ -1,5 +1,9 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
+  moduleNameMapper: {
+    "^@storybook/addon-actions$":
+      "<rootDir>/src/mocks/@storybook/addon-actions.ts",
+  },
   preset: "ts-jest/presets/js-with-ts-esm",
   setupFiles: ["<rootDir>/tests/setup.ts"],
   testEnvironment: "jest-environment-jsdom",

src/common/entities.ts

@@ -1,11 +1,12 @@
-import { ColumnDef, RowData } from "@tanstack/react-table";
+import { ColumnDef, RowData, TableOptions } from "@tanstack/react-table";
 
 /**
  * Model of a value of a metadata class.
  */
 export interface Attribute {
   // Prefix to fragment mapping, e.g. cxg: "batch_condition", or, general tags e.g. tier: "Tier 1" and bionetwork: ["gut"]
   annotations?: Record<string, string | string[] | undefined>; // 'undefined' allows for mix of keys across attributes e.g. tier, or tier and cxg, or cxg
+  classKey?: string; // Programmatic class name or key (e.g. cell, sample) the attribute belongs to.
   description: string;
   example?: string; // Free text example of attribute
   multivalued: boolean; // True if attribute can have multiple values
@@ -73,6 +74,7 @@ export interface DataDictionary<T extends RowData = Attribute> {
 export interface DataDictionaryConfig<T extends RowData = Attribute> {
   columnDefs: ColumnDef<T, T[keyof T]>[];
   dataDictionary: DataDictionary<T>;
+  tableOptions?: Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel">;
 }
 
 /**

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

@@ -7,19 +7,15 @@ import { GRID_PROPS } from "./constants";
 import { ClassesProps } from "./types";
 
 export const Entities = <T extends RowData = Attribute>({
-  classes,
-  columnDefs,
   spacing,
+  table,
 }: ClassesProps<T>): JSX.Element => {
+  const { getGroupedRowModel } = table;
   return (
     <Grid {...GRID_PROPS}>
-      {classes.map((cls) => (
-        <Entity
-          key={cls.name}
-          class={cls}
-          columnDefs={columnDefs}
-          spacing={spacing}
-        />
+      {/* Render grouped rows where each "group" is a class e.g. "donor" */}
+      {getGroupedRowModel().rows.map((row) => (
+        <Entity key={row.id} row={row} spacing={spacing} table={table} />
       ))}
     </Grid>
   );

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

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

src/components/DataDictionary/components/Entity/entity.styles.ts

@@ -2,9 +2,17 @@ import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
 import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
 import { ENTITIES_ROW_GAP } from "../Entities/constants";
+import { LAYOUT_SPACING } from "../Layout/constants";
+
+const TOP =
+  ENTITIES_ROW_GAP +
+  LAYOUT_SPACING.TITLE_HEIGHT +
+  LAYOUT_SPACING.FILTERS_HEIGHT +
+  LAYOUT_SPACING.FILTERS_PADDING_TOP +
+  LAYOUT_SPACING.CONTENT_PADDING_TOP;
 
 export const StyledTypography = styled(Typography)<Partial<LayoutSpacing>>`
-  scroll-margin-top: ${({ top = 0 }) => top + ENTITIES_ROW_GAP}px;
+  scroll-margin-top: ${({ top = 0 }) => top + TOP}px;
 
   &:hover a {
     opacity: 1;

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

@@ -4,28 +4,37 @@ import React from "react";
 import { Attribute } from "../../../../common/entities";
 import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { AnchorLink } from "../../../common/AnchorLink/anchorLink";
-import { useTable } from "../Table/hook";
 import { Table } from "../Table/table";
 import { GRID_PROPS } from "./constants";
 import { StyledTypography } from "./entity.styles";
 import { EntityProps } from "./types";
+import { getClassMeta } from "./utils";
 
 export const Entity = <T extends RowData = Attribute>({
-  class: cls,
-  columnDefs,
+  row,
   spacing,
-}: EntityProps<T>): JSX.Element => {
-  const table = useTable<T>(cls.attributes, columnDefs);
+  table,
+}: EntityProps<T>): JSX.Element | null => {
+  // Get class key from row.
+  const classKey = row.getValue<string>("classKey");
+
+  // Get class metadata from table options.
+  const cls = getClassMeta<T>(classKey, table);
+
+  // Class not found in table meta - return null.
+  if (!cls) return null;
+
   return (
     <Grid {...GRID_PROPS} rowGap={4}>
+      {/* Class title and description */}
       <Grid {...GRID_PROPS} rowGap={1}>
         <StyledTypography
           component="h3"
-          id={cls.name}
+          id={classKey}
           variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL}
           {...spacing}
         >
-          {cls.title} <AnchorLink anchorLink={cls.name} />
+          {cls.title} <AnchorLink anchorLink={classKey} />
         </StyledTypography>
         <Typography
           color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
@@ -35,7 +44,8 @@ export const Entity = <T extends RowData = Attribute>({
           {cls.description}
         </Typography>
       </Grid>
-      <Table table={table} />
+      {/* Class attributes table */}
+      <Table row={row} table={table} />
     </Grid>
   );
 };

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

@@ -1,9 +1,9 @@
-import { ColumnDef, RowData } from "@tanstack/react-table";
-import { Attribute, Class } from "../../../../common/entities";
+import { Row, RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
 import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
 
 export interface EntityProps<T extends RowData = Attribute> {
-  class: Class<T>;
-  columnDefs: ColumnDef<T, T[keyof T]>[];
+  row: Row<T>;
   spacing?: LayoutSpacing;
+  table: Table<T>;
 }

src/components/DataDictionary/components/Entity/utils.ts

@@ -0,0 +1,25 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { Attribute, Class } from "../../../../common/entities";
+import { ClassMeta } from "../Table/types";
+
+/**
+ * Retrieves class metadata from the table options meta.
+ * @param classKey - Class key.
+ * @param table - Table instance.
+ * @returns Class metadata or undefined.
+ */
+export function getClassMeta<T extends RowData = Attribute>(
+  classKey: string | undefined,
+  table: Table<T>
+): Pick<Class<T>, "description" | "title"> | undefined {
+  if (!classKey) return;
+
+  // Grab the table meta and return if not defined.
+  const meta = table.options.meta;
+  if (!meta) return;
+
+  // Return class metadata if defined.
+  if ("classMeta" in meta) {
+    return (meta.classMeta as ClassMeta)?.[classKey];
+  }
+}

src/components/DataDictionary/components/Filters/components/ColumnFilters/columnFilters.tsx

@@ -0,0 +1,21 @@
+import { ButtonGroup } from "@mui/material";
+import { RowData } from "@tanstack/react-table";
+import React from "react";
+import { Attribute } from "../../../../../../common/entities";
+import { BUTTON_GROUP_PROPS } from "../../../../../common/ButtonGroup/constants";
+import { ColumnFilter } from "../../../../../Table/components/TableFeatures/ColumnFilter/columnFilter";
+import { ColumnFiltersProps } from "./types";
+
+export const ColumnFilters = <T extends RowData = Attribute>({
+  table,
+}: ColumnFiltersProps<T>): JSX.Element => {
+  const columns = table.getAllColumns();
+  const columnFilters = columns.filter((column) => column.getCanFilter());
+  return (
+    <ButtonGroup {...BUTTON_GROUP_PROPS.SECONDARY_OUTLINED}>
+      {columnFilters.map((column) => (
+        <ColumnFilter key={column.id} column={column} />
+      ))}
+    </ButtonGroup>
+  );
+};

src/components/DataDictionary/components/Filters/components/ColumnFilters/types.ts

@@ -0,0 +1,6 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../../../common/entities";
+
+export interface ColumnFiltersProps<T extends RowData = Attribute> {
+  table: Table<T>;
+}