@databiosphere/findable-ui 35.2.0 → 36.0.0

package/src/components/DataDictionary/hooks/UseMeasureFilters/hook.ts

@@ -0,0 +1,27 @@
+import { useRef } from "react";
+import {
+  getBorderBoxSizeHeight,
+  useResizeObserver,
+} from "../../../../hooks/useResizeObserver";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
+import { UseMeasureFilters } from "./types";
+
+export const useMeasureFilters = (): UseMeasureFilters => {
+  // Get header dimensions.
+  const { dimensions } = useLayoutDimensions();
+  const { header } = dimensions;
+
+  // Measure filters dimensions.
+  const filtersRef = useRef<HTMLElement>(null);
+  const filtersRect = useResizeObserver(
+    filtersRef,
+    getBorderBoxSizeHeight,
+    header.height > 0 // Only measure filters height, when header measurement is available.
+  );
+  const { height = 0 } = filtersRect || {};
+
+  return {
+    dimensions: { height },
+    filtersRef,
+  };
+};

package/src/components/DataDictionary/hooks/UseMeasureFilters/types.ts

@@ -0,0 +1,6 @@
+import { RefObject } from "react";
+
+export interface UseMeasureFilters {
+  dimensions: { height: number };
+  filtersRef: RefObject<HTMLElement> | null;
+}

package/src/components/DataDictionary/types.ts

@@ -2,6 +2,7 @@ import { ElementType } from "react";
 import { BaseComponentProps } from "../types";
 
 export interface DataDictionaryProps extends BaseComponentProps {
+  dictionary: string;
   EntitiesLayout?: ElementType;
   FiltersLayout?: ElementType;
   Outline?: ElementType;

package/src/components/Filter/components/FilterCountChip/filterCountChip.styles.ts

@@ -0,0 +1,19 @@
+import { Chip, styled } from "@mui/material";
+
+export const StyledChip = styled(Chip)`
+  align-items: center;
+  border-radius: 10px;
+  flex: none;
+  gap: 0;
+  height: 16px;
+  justify-content: center;
+  min-width: 16px;
+  padding: 0 4px;
+
+  .MuiChip-label {
+    font-size: 9px;
+    font-weight: 600;
+    line-height: 16px;
+    padding: 0;
+  }
+`;

package/src/components/Filter/components/FilterCountChip/filterCountChip.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { CHIP_PROPS } from "../../../../styles/common/mui/chip";
+import { StyledChip } from "./filterCountChip.styles";
+import { FilterCountChipProps } from "./types";
+
+export const FilterCountChip = ({
+  className,
+  count,
+  ...props /* MuiChipProps */
+}: FilterCountChipProps): JSX.Element | null => {
+  if (!count) return null;
+  return (
+    <StyledChip
+      className={className}
+      color={CHIP_PROPS.COLOR.PRIMARY}
+      label={String(count)}
+      variant={CHIP_PROPS.VARIANT.FILLED}
+      {...props}
+    />
+  );
+};

package/src/components/Filter/components/FilterCountChip/stories/filterCountChip.stories.tsx

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { FilterCountChip } from "../filterCountChip";
+
+const meta: Meta<typeof FilterCountChip> = {
+  component: FilterCountChip,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DEFAULT: Story = { args: { count: 1, onDelete: undefined } };

package/src/components/Filter/components/FilterCountChip/types.ts

@@ -0,0 +1,6 @@
+import { ChipProps } from "@mui/material";
+import { BaseComponentProps } from "../../../types";
+
+export interface FilterCountChipProps extends BaseComponentProps, ChipProps {
+  count?: number | string;
+}

package/src/components/Table/columnDef/globalFilter/constants.ts

@@ -0,0 +1,5 @@
+import { rankings, RankItemOptions } from "@tanstack/match-sorter-utils";
+
+export const RANK_ITEM_OPTIONS: RankItemOptions = {
+  threshold: rankings.CONTAINS,
+};

package/src/components/Table/columnDef/globalFilter/filterFn.ts

@@ -0,0 +1,34 @@
+import { FilterMeta, Row, RowData } from "@tanstack/react-table";
+import { parseSearchTerms, rankColumnValue, rankRowColumns } from "./utils";
+
+/**
+ * Fuzzy matches a column against search terms.
+ * A true value is returned if the column's value passes the ranking threshold.
+ * Normally, TanStack global filtering will not process remaining row columns if a match is found.
+ * This function ranks other row columns for highlighting purposes.
+ * @param row - Row.
+ * @param columnId - Column identifier.
+ * @param value - Search term.
+ * @param addMeta - Function to add filter metadata.
+ * @returns Whether the row passed the filter.
+ */
+export function fuzzy<T extends RowData>(
+  row: Row<T>,
+  columnId: string,
+  value: unknown,
+  addMeta: (meta: FilterMeta) => void
+): boolean {
+  // Split the search term into terms.
+  const terms = parseSearchTerms(value);
+
+  // Rank the column value.
+  const passed = rankColumnValue(row, columnId, terms);
+
+  // Add the filter metadata.
+  addMeta({ passed });
+
+  // Rank other columns for highlighting purposes (TanStack global filtering will not process remaining columns if a match is found).
+  if (passed) rankRowColumns(row, columnId, terms);
+
+  return passed;
+}

package/src/components/Table/columnDef/globalFilter/types.ts

@@ -0,0 +1,5 @@
+import { FilterMeta } from "@tanstack/react-table";
+
+export interface ColumnFilterMeta extends FilterMeta {
+  passed?: boolean;
+}

package/src/components/Table/columnDef/globalFilter/utils.ts

@@ -0,0 +1,74 @@
+import { rankItem } from "@tanstack/match-sorter-utils";
+import { Row, RowData } from "@tanstack/react-table";
+import { RANK_ITEM_OPTIONS } from "./constants";
+
+/**
+ * Parses a search term into an array of terms.
+ * @param value - Search term.
+ * @returns Array of terms.
+ */
+export function parseSearchTerms(value: unknown): string[] {
+  return String(value ?? "")
+    .toLowerCase()
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean);
+}
+
+/**
+ * Ranks a column's value against search terms.
+ * @param row - Row to rank.
+ * @param columnId - Column identifier.
+ * @param terms - Search terms to match against.
+ * @returns Whether the value passed.
+ */
+export function rankColumnValue<T extends RowData>(
+  row: Row<T>,
+  columnId: string,
+  terms: string[]
+): boolean {
+  // Get the column value.
+  const columnValue = row.getValue(columnId);
+
+  // Return false if the column value is undefined or null.
+  if (columnValue === undefined || columnValue === null) return false;
+
+  // Check if each term matches the column value.
+  // Ranking from CASE_SENSITIVE_EQUAL to CONTAINS (excludes `ACRONYM`, `MATCHES` threshold).
+  const rankings = terms.map((term) =>
+    rankItem(String(columnValue), term, RANK_ITEM_OPTIONS)
+  );
+
+  return rankings.every(({ passed }) => passed);
+}
+
+/**
+ * Ranks a row's columns against search terms.
+ * Processes columns that are searchable and have not already been processed.
+ * @param row - Row to rank.
+ * @param columnId - Column identifier.
+ * @param terms - Search terms to match against.
+ */
+export function rankRowColumns<T extends RowData>(
+  row: Row<T>,
+  columnId: string,
+  terms: string[]
+): void {
+  const columnFiltersMeta = row.columnFiltersMeta;
+
+  // Process other columns.
+  for (const { column } of row.getAllCells()) {
+    // Column is not searchable.
+    if (!column.getCanGlobalFilter()) continue;
+
+    // Column has already been processed.
+    if (column.id === columnId) continue;
+    if (column.id in columnFiltersMeta) continue;
+
+    // Rank the column value.
+    const passed = rankColumnValue(row, column.id, terms);
+
+    // Add the filter metadata.
+    row.columnFiltersMeta[column.id] = { passed };
+  }
+}

package/src/components/Table/components/TableCell/components/RankedCell/rankedCell.tsx

@@ -0,0 +1,50 @@
+import { CellContext, RowData } from "@tanstack/react-table";
+import React, { Fragment } from "react";
+import { BaseComponentProps } from "../../../../../types";
+import { getTokens, getTokensRegex, isRankedCell } from "./utils";
+
+export const RankedCell = <
+  T extends RowData,
+  TValue = string | undefined | null
+>({
+  className,
+  column,
+  getValue,
+  row,
+  table,
+}: BaseComponentProps & CellContext<T, TValue>): JSX.Element | null => {
+  // Get the cell value.
+  const value = getValue();
+
+  // If the cell value is undefined or null, return null.
+  if (value === undefined || value === null) return null;
+
+  // Convert the cell value to a string.
+  const stringValue = String(value);
+
+  // Check if the cell is ranked.
+  const isRanked = isRankedCell(table, row, column.id);
+
+  // Return the unranked cell, as-is.
+  if (!isRanked) return <Fragment>{stringValue}</Fragment>;
+
+  // Tokenise the current global filter.
+  const tokens = getTokens(table);
+
+  // If there are no tokens, return the value as-is.
+  if (tokens.length === 0) return <Fragment>{stringValue}</Fragment>;
+
+  // Create regex pattern.
+  const regex = getTokensRegex(tokens);
+
+  // Return the ranked cell, with highlighting.
+  return (
+    <span className={className}>
+      {stringValue.split(regex).map((part, i) => (
+        <Fragment key={i}>
+          {part.match(regex) ? <mark>{part}</mark> : part}
+        </Fragment>
+      ))}
+    </span>
+  );
+};

package/src/components/Table/components/TableCell/components/RankedCell/utils.ts

@@ -0,0 +1,85 @@
+import { Row, RowData, Table } from "@tanstack/react-table";
+import { escapeRegExp } from "../../../../../../common/utils";
+import { ColumnFilterMeta } from "../../../../columnDef/globalFilter/types";
+import { parseSearchTerms } from "../../../../columnDef/globalFilter/utils";
+
+/**
+ * Renders a cell value with highlighting if it matches item rank filter criteria.
+ * @param table - Table.
+ * @param row - Row.
+ * @param columnId - Column identifier.
+ * @param value - Cell value.
+ * @returns Rendered cell value with highlighting.
+ */
+export function renderRankedCell<T extends RowData>(
+  table: Table<T>,
+  row: Row<T>,
+  columnId: string,
+  value: string | undefined | null
+): string {
+  // If the cell value is undefined or null, return an empty string.
+  if (value === undefined || value === null) return "";
+
+  const stringValue = String(value);
+
+  // Check if the cell is ranked.
+  const isRanked = isRankedCell(table, row, columnId);
+
+  // Return the unranked cell, as-is, in string form.
+  if (!isRanked) return stringValue;
+
+  // Tokenise the current global filter.
+  const tokens = getTokens(table);
+
+  // If there are no tokens, return the value as-is, in string form.
+  if (tokens.length === 0) return stringValue;
+
+  // Create regex pattern.
+  const regex = getTokensRegex(tokens);
+
+  return stringValue.replace(regex, "<mark>$1</mark>");
+}
+
+/**
+ * Returns the current global filter tokens from the table.
+ * @param table - Table.
+ * @returns An array of search tokens.
+ */
+export function getTokens<T extends RowData>(table: Table<T>): string[] {
+  const { getState } = table;
+  const { globalFilter } = getState();
+  return parseSearchTerms(globalFilter);
+}
+
+/**
+ * Returns a RegExp pattern for matching search tokens.
+ * @param tokens - Search tokens.
+ * @returns A RegExp pattern that matches any of the tokens.
+ */
+export function getTokensRegex(tokens: string[]): RegExp {
+  return new RegExp(`(${tokens.map(escapeRegExp).join("|")})`, "gi");
+}
+
+/**
+ * Checks if a cell is ranked based on the global filter.
+ * @param table - Table.
+ * @param row - Row.
+ * @param columnId - Column identifier.
+ * @returns Whether the cell is ranked.
+ */
+export function isRankedCell<T extends RowData>(
+  table: Table<T>,
+  row: Row<T>,
+  columnId: string
+): boolean {
+  const { getState } = table;
+  const { globalFilter } = getState();
+
+  // If there is no global filter, return the value as-is.
+  if (!globalFilter) return false;
+
+  // Check if the column has filter metadata with itemRank.passed
+  const columnFilterMeta = row.columnFiltersMeta[columnId] as ColumnFilterMeta;
+
+  return columnFilterMeta?.passed ?? false;
+}

package/src/components/Table/components/TableFeatures/ColumnFilter/columnFilter.styles.ts

@@ -1,11 +1,36 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { Menu, menuClasses, paperClasses } from "@mui/material";
+import { Button, Menu, menuClasses, paperClasses } from "@mui/material";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
 import { MAX_LIST_HEIGHT_PX } from "../../../../Filter/common/constants";
 import {
   MuiListItemButtonRoot,
   MuiListItemTextRoot,
 } from "../../../../Filter/components/FilterList/filterList.styles";
 
+interface Props {
+  open: boolean;
+}
+
+export const StyledButton = styled(Button, {
+  shouldForwardProp: (prop) => prop !== "open",
+})<Props>`
+  &.MuiButtonGroup-grouped {
+    gap: 0;
+
+    .MuiButton-endIcon {
+      margin-left: 0;
+      margin-right: -8px;
+    }
+
+    ${({ open }) =>
+      open &&
+      css`
+        background-color: ${PALETTE.SMOKE_LIGHT};
+      `}
+  }
+`;
+
 export const StyledMenu = styled(Menu)`
   .${paperClasses.root} {
     margin: 4px 0;

package/src/components/Table/components/TableFeatures/ColumnFilter/columnFilter.tsx

@@ -1,8 +1,8 @@
 import {
   Checkbox,
+  Grid,
   ListItemButton,
   ListItemText,
-  Button as MButton,
   Typography,
 } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
@@ -13,10 +13,11 @@ import { CheckedIcon } from "../../../../common/CustomIcon/components/CheckedIco
 import { UncheckedIcon } from "../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 import { DropDownIcon } from "../../../../common/Form/components/Select/components/DropDownIcon/dropDownIcon";
 import { useMenu } from "../../../../common/Menu/hooks/useMenu";
+import { FilterCountChip } from "../../../../Filter/components/FilterCountChip/filterCountChip";
 import { getColumnHeader } from "../../../common/utils";
 import { getSortedFacetedValues } from "../../../featureOptions/facetedColumn/utils";
-import { StyledMenu } from "./columnFilter.styles";
-import { MENU_PROPS } from "./constants";
+import { StyledButton, StyledMenu } from "./columnFilter.styles";
+import { GRID_PROPS, MENU_PROPS } from "./constants";
 import { ColumnFilterProps } from "./types";
 import { updater } from "./utils";
 
@@ -26,7 +27,7 @@ import { updater } from "./utils";
  */
 
 export const ColumnFilter = <T extends RowData>({
-  Button = MButton,
+  Button = StyledButton,
   className,
   column,
   ...props /* MuiMenuProps */
@@ -39,10 +40,15 @@ export const ColumnFilter = <T extends RowData>({
     <Fragment>
       <Button
         key={column.id}
+        disabled={sortedValues.length === 0}
         endIcon={<DropDownIcon color={SVG_ICON_PROPS.COLOR.INK_LIGHT} />}
         onClick={onOpen}
+        open={open}
       >
-        {getColumnHeader(column)}
+        <Grid {...GRID_PROPS}>
+          {getColumnHeader(column)}
+          <FilterCountChip count={filterValue.length} />
+        </Grid>
       </Button>
       <StyledMenu
         {...MENU_PROPS}

package/src/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/columnFilterTag.styles.ts

@@ -0,0 +1,25 @@
+import styled from "@emotion/styled";
+import { Chip } from "@mui/material";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
+
+export const StyledChip = styled(Chip)`
+  border-radius: 4px;
+  box-shadow: 0 0 0 2px ${PALETTE.COMMON_WHITE};
+  cursor: pointer;
+  gap: 4px;
+  justify-self: flex-start;
+  padding: 0 8px;
+
+  .MuiChip-label {
+    padding: 0;
+  }
+
+  .MuiChip-deleteIcon {
+    font-size: 16px;
+    margin: 0 -4px 0 0;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+`;

package/src/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/columnFilterTag.tsx

@@ -0,0 +1,31 @@
+import { CloseRounded } from "@mui/icons-material";
+import { RowData } from "@tanstack/react-table";
+import React, { Fragment } from "react";
+import { updater } from "../../../../../components/TableFeatures/ColumnFilter/utils";
+import { StyledChip } from "./columnFilterTag.styles";
+import { CHIP_PROPS, SVG_ICON_PROPS } from "./constants";
+import { ColumnFilterTagProps } from "./types";
+
+export const ColumnFilterTag = <T extends RowData>({
+  className,
+  column,
+  ...props /* MuiChipProps */
+}: ColumnFilterTagProps<T>): JSX.Element => {
+  const filterValue = column.getFilterValue() as unknown[];
+  return (
+    <Fragment>
+      {filterValue.map((value) => (
+        <StyledChip
+          {...CHIP_PROPS}
+          key={String(value)}
+          className={className}
+          deleteIcon={<CloseRounded {...SVG_ICON_PROPS} />}
+          label={String(value)}
+          onClick={() => column.setFilterValue(updater(value))}
+          onDelete={() => column.setFilterValue(updater(value))}
+          {...props}
+        />
+      ))}
+    </Fragment>
+  );
+};

package/src/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/constants.ts

@@ -0,0 +1,13 @@
+import { ChipProps, SvgIconProps } from "@mui/material";
+import { CHIP_PROPS as MUI_CHIP_PROPS } from "../../../../../../../styles/common/mui/chip";
+import { SVG_ICON_PROPS as MUI_SVG_ICON_PROPS } from "../../../../../../../styles/common/mui/svgIcon";
+
+export const CHIP_PROPS: ChipProps = {
+  clickable: false,
+  color: MUI_CHIP_PROPS.COLOR.DEFAULT,
+  size: MUI_CHIP_PROPS.SIZE.MEDIUM,
+};
+
+export const SVG_ICON_PROPS: SvgIconProps = {
+  color: MUI_SVG_ICON_PROPS.COLOR.INHERIT,
+};

package/src/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/stories/columFilterTag.stories.tsx

@@ -0,0 +1,26 @@
+import { Box } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { BIONETWORK } from "../../../../../../../DataDictionary/components/Filters/stories/constants";
+import { ColumnFilterTag } from "../columnFilterTag";
+
+const meta: Meta<typeof ColumnFilterTag> = {
+  component: ColumnFilterTag,
+  decorators: [
+    (Story): JSX.Element => (
+      <Box sx={{ display: "grid", gap: 2, gridAutoFlow: "column" }}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    column: BIONETWORK,
+  },
+};

package/src/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/types.ts

@@ -0,0 +1,9 @@
+import { ChipProps } from "@mui/material";
+import { Column, RowData } from "@tanstack/react-table";
+import { BaseComponentProps } from "../../../../../../types";
+
+export interface ColumnFilterTagProps<T extends RowData>
+  extends BaseComponentProps,
+    ChipProps {
+  column: Column<T>;
+}

package/src/components/Table/components/TableFeatures/ColumnFilter/constants.ts

@@ -1,4 +1,11 @@
-import { MenuProps } from "@mui/material";
+import { GridProps, MenuProps } from "@mui/material";
+
+export const GRID_PROPS: GridProps = {
+  alignItems: "center",
+  container: true,
+  direction: "row",
+  gap: 1,
+};
 
 export const MENU_PROPS: Omit<MenuProps, "anchorEl" | "onClose" | "open"> = {
   anchorOrigin: {

package/src/components/Table/components/TableFeatures/ColumnFilter/types.ts

@@ -1,10 +1,11 @@
-import { Button, MenuProps } from "@mui/material";
+import { MenuProps } from "@mui/material";
 import { Column, RowData } from "@tanstack/react-table";
 import { BaseComponentProps } from "../../../../types";
+import { StyledButton } from "./columnFilter.styles";
 
 export interface ColumnFilterProps<T extends RowData>
   extends BaseComponentProps,
     Omit<MenuProps, "anchorEl" | "onClose" | "open"> {
-  Button?: typeof Button;
+  Button?: typeof StyledButton;
   column: Column<T>;
 }

package/src/components/Table/components/TableFeatures/GlobalFilter/constants.ts

@@ -0,0 +1,8 @@
+import { OutlinedInputProps } from "@mui/material";
+import { OUTLINED_INPUT_PROPS as MUI_OUTLINED_INPUT_PROPS } from "../../../../../styles/common/mui/outlinedInput";
+
+export const OUTLINED_INPUT_PROPS: OutlinedInputProps = {
+  color: MUI_OUTLINED_INPUT_PROPS.COLOR.SECONDARY,
+  fullWidth: true,
+  id: "global-filter",
+};

package/src/components/Table/components/TableFeatures/GlobalFilter/globalFilter.tsx

@@ -0,0 +1,33 @@
+import { RowData } from "@tanstack/react-table";
+import React from "react";
+import { ClearInputAdornment } from "../../../../common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/clearInputAdornment";
+import { SearchInputAdornment } from "../../../../common/OutlinedInput/components/InputAdornment/components/SearchInputAdornment/searchInputAdornment";
+import { StyledOutlinedInput } from "../../../../common/OutlinedInput/outlinedInput.styles";
+import { OUTLINED_INPUT_PROPS } from "./constants";
+import { GlobalFilterProps } from "./types";
+
+export const GlobalFilter = <T extends RowData>({
+  className,
+  table,
+  ...props /* MuiOutlinedInputProps */
+}: GlobalFilterProps<T>): JSX.Element => {
+  const { getState, setGlobalFilter } = table;
+  const { globalFilter } = getState();
+  return (
+    <StyledOutlinedInput
+      {...OUTLINED_INPUT_PROPS}
+      className={className}
+      endAdornment={
+        <ClearInputAdornment
+          in={!!globalFilter}
+          onClick={() => setGlobalFilter(undefined)}
+        />
+      }
+      hasValue={!!globalFilter}
+      onChange={(e) => setGlobalFilter(e.target.value)}
+      startAdornment={<SearchInputAdornment />}
+      value={globalFilter ?? ""}
+      {...props}
+    />
+  );
+};

package/src/components/Table/components/TableFeatures/GlobalFilter/types.ts

@@ -0,0 +1,9 @@
+import { OutlinedInputProps } from "@mui/material";
+import { RowData, Table } from "@tanstack/react-table";
+import { BaseComponentProps } from "components/types";
+
+export interface GlobalFilterProps<T extends RowData>
+  extends BaseComponentProps,
+    OutlinedInputProps {
+  table: Table<T>;
+}

package/src/components/Table/coreOptions/state/pagination/constants.ts

@@ -0,0 +1,8 @@
+import { PaginationTableState } from "@tanstack/react-table";
+
+export const PAGINATION_TABLE_STATE: PaginationTableState = {
+  pagination: {
+    pageIndex: 0,
+    pageSize: 10,
+  },
+};