feat: add filter tags to data dictionary (#529) (#536)

Author: frano-m

src/components/DataDictionary/components/Entities/constants.ts

@@ -3,13 +3,11 @@ import { ComponentProps } from "react";
 import { NoResults } from "../../../NoResults/noResults";
 import { StyledRoundedPaper } from "./entities.styles";
 
-export const ENTITIES_ROW_GAP = 8;
-
 export const GRID_PROPS: GridProps = {
   container: true,
   direction: "column",
   flexWrap: "nowrap",
-  rowGap: ENTITIES_ROW_GAP,
+  rowGap: 8,
 };
 
 export const NO_RESULTS_PROPS: ComponentProps<typeof NoResults> = {

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

@@ -1,18 +1,9 @@
 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 + TOP}px;
+  scroll-margin-top: ${({ top = 0 }) => top}px;
 
   &:hover a {
     opacity: 1;

src/components/DataDictionary/components/Filters/components/ColumnFilterTags/columnFilterTags.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
+
+export const StyledGrid = styled(Grid)`
+  .MuiChip-root:last-of-type {
+    margin-right: 8px;
+  }
+`;

src/components/DataDictionary/components/Filters/components/ColumnFilterTags/columnFilterTags.tsx

@@ -0,0 +1,33 @@
+import { Button } from "@mui/material";
+import { RowData } from "@tanstack/react-table";
+import React from "react";
+import { Attribute } from "../../../../../../common/entities";
+import { BUTTON_PROPS } from "../../../../../../styles/common/mui/button";
+import { ColumnFilterTag } from "../../../../../Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/columnFilterTag";
+import { StyledGrid } from "./columnFilterTags.styles";
+import { GRID_PROPS } from "./constants";
+import { ColumnFilterTagsProps } from "./types";
+
+export const ColumnFilterTags = <T extends RowData = Attribute>({
+  className,
+  table,
+}: ColumnFilterTagsProps<T>): JSX.Element | null => {
+  const { getAllColumns, resetColumnFilters } = table;
+  const columns = getAllColumns().filter((column) => column.getIsFiltered());
+
+  if (columns.length === 0) return null;
+
+  return (
+    <StyledGrid className={className} {...GRID_PROPS}>
+      {columns.map((column) => (
+        <ColumnFilterTag key={column.id} column={column} />
+      ))}
+      <Button
+        onClick={() => resetColumnFilters(true)}
+        variant={BUTTON_PROPS.VARIANT.TEXT}
+      >
+        Clear all
+      </Button>
+    </StyledGrid>
+  );
+};

src/components/DataDictionary/components/Filters/components/ColumnFilterTags/constants.ts

@@ -0,0 +1,8 @@
+import { GridProps } from "@mui/material";
+
+export const GRID_PROPS: GridProps = {
+  container: true,
+  direction: "row",
+  spacing: 2,
+  wrap: "wrap",
+};

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

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

src/components/DataDictionary/components/Filters/stories/constants.ts

@@ -1,3 +1,4 @@
+import { fn } from "@storybook/test";
 import { PartialColumn } from "./types";
 
 export const BIONETWORK: PartialColumn = {
@@ -10,7 +11,9 @@ export const BIONETWORK: PartialColumn = {
       ["Brain", 2],
       ["Lung", 1],
     ]),
+  getFilterValue: () => ["Nervous System", "Brain"],
   id: "bioNetwork",
+  setFilterValue: fn(),
 };
 
 export const DESCRIPTION: PartialColumn = {

src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.ts

@@ -5,16 +5,12 @@ import { LAYOUT_SPACING } from "../../constants";
 
 const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
 const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
-const FILTERS_HEIGHT =
-  LAYOUT_SPACING.FILTERS_HEIGHT +
-  LAYOUT_SPACING.FILTERS_PADDING_TOP; /* filters height */
-const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
 
 export const Layout = styled("div")<LayoutSpacing>`
   grid-column: 2;
   grid-row: 1;
   padding-bottom: ${PB}px;
-  padding-top: ${({ top }) => top + TITLE_HEIGHT + FILTERS_HEIGHT + PT}px;
+  padding-top: ${({ top }) => top}px;
   z-index: 1; /* not required, but helpful in that the entities are always on top */
 
   ${mediaTabletDown} {

src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.tsx

@@ -1,10 +1,16 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { Layout } from "./entitiesLayout.styles";
 import { EntitiesLayoutProps } from "./types";
 
-export const EntitiesLayout = ({
-  children,
-  ...props
-}: EntitiesLayoutProps): JSX.Element => {
-  return <Layout {...props}>{children}</Layout>;
-};
+export const EntitiesLayout = forwardRef<HTMLDivElement, EntitiesLayoutProps>(
+  function EntitiesLayout(
+    { children, spacing, ...props }: EntitiesLayoutProps,
+    ref
+  ): JSX.Element {
+    return (
+      <Layout ref={ref} {...spacing} {...props}>
+        {children}
+      </Layout>
+    );
+  }
+);

src/components/DataDictionary/components/Layout/components/EntitiesLayout/types.ts

@@ -1,6 +1,8 @@
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
 
-export interface EntitiesLayoutProps extends LayoutSpacing {
+export interface EntitiesLayoutProps {
   children: ReactNode;
+  spacing: LayoutSpacing;
+  style?: CSSProperties; // Required for Fade component. See https://mui.com/material-ui/transitions/#child-requirement.
 }