@databiosphere/findable-ui 50.6.1 → 50.7.1

package/src/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.tsx

@@ -1,79 +0,0 @@
-import { Collapse, IconButton, Typography } from "@mui/material";
-import { Cell, flexRender, Row, RowData } from "@tanstack/react-table";
-import { JSX } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
-import { UnfoldMoreIcon } from "../../../../../common/CustomIcon/components/UnfoldMoreIcon/unfoldMoreIcon";
-import { getPinnedCellIndex } from "../../../../common/utils";
-import {
-  CollapsedContents,
-  Content,
-  PinnedCell,
-  TableCell,
-} from "./collapsableCell.styles";
-
-export interface CollapsableCellProps<T extends RowData> {
-  isDisabled?: boolean;
-  row: Row<T>;
-}
-
-export const CollapsableCell = <T extends RowData>({
-  isDisabled = false,
-  row,
-}: CollapsableCellProps<T>): JSX.Element => {
-  const [pinnedCell, pinnedIndex] = getPinnedCellIndex(row);
-  return (
-    <TableCell isExpanded={row.getIsExpanded()}>
-      <PinnedCell>
-        {flexRender(pinnedCell.column.columnDef.cell, pinnedCell.getContext())}
-        <IconButton
-          color="ink"
-          disabled={isDisabled}
-          edge="end"
-          onClick={() => row.toggleExpanded()}
-          size="large"
-        >
-          <UnfoldMoreIcon fontSize="small" />
-        </IconButton>
-      </PinnedCell>
-      <Collapse in={row.getIsExpanded()}>
-        <CollapsedContents>
-          {getRowVisibleCells(row).map((cell, i) => {
-            if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.
-            if (cell.getIsPlaceholder()) return null; // Display of placeholder cells is currently not supported.
-            const header = cell.column.columnDef.meta?.header;
-            return (
-              i !== pinnedIndex && (
-                <Content key={cell.id}>
-                  {header && (
-                    <Typography
-                      color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-                      component="div"
-                      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
-                    >
-                      {header}
-                    </Typography>
-                  )}
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </Content>
-              )
-            );
-          })}
-        </CollapsedContents>
-      </Collapse>
-    </TableCell>
-  );
-};
-
-/**
- * Returns row or sub row visible cells.
- * @param row - Row.
- * @returns row or sub row visible cells.
- */
-function getRowVisibleCells<T extends RowData>(
-  row: Row<T>,
-): Cell<T, unknown>[] {
-  if (row.getIsGrouped()) {
-    return row.subRows.map(({ getVisibleCells }) => getVisibleCells()).flat();
-  }
-  return row.getVisibleCells();
-}

package/src/components/Table/components/TableCell/components/LinkCell/linkCell.tsx

@@ -1,69 +0,0 @@
-import { LinkProps, Link as MLink, Typography } from "@mui/material";
-import { CellContext, RowData } from "@tanstack/react-table";
-import { BaseComponentProps } from "components/types";
-import { JSX } from "react";
-import { isValidUrl } from "../../../../../../common/utils";
-import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
-import { isClientSideNavigation } from "../../../../../Links/common/utils";
-import { getComponent, getRelAttribute, getTargetAttribute } from "./utils";
-
-export const LinkCell = <
-  T extends RowData,
-  TValue extends LinkProps = LinkProps,
->({
-  className,
-  getValue,
-}: BaseComponentProps & CellContext<T, TValue>): JSX.Element | null => {
-  const props = getValue();
-  if (!props) return null;
-  const {
-    children,
-    color,
-    href = "",
-    rel,
-    target,
-    underline,
-    ...linkProps
-  } = props;
-
-  // Determine if the href should use client-side navigation.
-  const isClientSide = isClientSideNavigation(href);
-
-  // Determine if the href is valid.
-  const isValid = isClientSide || isValidUrl(href);
-
-  // If the href is invalid, return a Typography component.
-  if (!isValid)
-    return (
-      <Typography
-        className={className}
-        color={TYPOGRAPHY_PROPS.COLOR.INHERIT}
-        component="span"
-        variant={TYPOGRAPHY_PROPS.VARIANT.INHERIT}
-        {...linkProps}
-      >
-        {children}
-      </Typography>
-    );
-
-  // If the href is valid, return a Link component.
-  return (
-    <MLink
-      className={className}
-      color={color}
-      component={getComponent(href, isClientSide)}
-      href={href}
-      /*
-       * Prevents click events from bubbling up to parent components
-       * (such as CardActionArea or Accordion) when the link is activated.
-       */
-      onClick={(e) => e.stopPropagation()}
-      rel={getRelAttribute(rel, isClientSide)}
-      target={getTargetAttribute(target, isClientSide)}
-      underline={underline}
-      {...linkProps}
-    >
-      {children}
-    </MLink>
-  );
-};

package/src/components/Table/components/TableCell/components/LinkCell/stories/args.ts

@@ -1,35 +0,0 @@
-import { ComponentProps } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
-import { LinkCell } from "../linkCell";
-import { GetValue } from "./types";
-
-export const CLIENT_SIDE_ARGS: Partial<ComponentProps<typeof LinkCell>> = {
-  getValue: (() => ({
-    children: "Explore",
-    href: "/",
-  })) as GetValue,
-};
-
-export const EXTERNAL_ARGS: Partial<ComponentProps<typeof LinkCell>> = {
-  getValue: (() => ({
-    children: "Explore",
-    href: "https://www.example.com",
-  })) as GetValue,
-};
-
-export const INVALID_ARGS: Partial<ComponentProps<typeof LinkCell>> = {
-  getValue: (() => ({
-    children: "Explore",
-  })) as GetValue,
-};
-
-export const WITH_CUSTOM_STYLE_ARGS: Partial<ComponentProps<typeof LinkCell>> =
-  {
-    getValue: (() => ({
-      children: "Explore",
-      color: "success",
-      href: "/",
-      underline: "none",
-      variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400,
-    })) as GetValue,
-  };

package/src/components/Table/components/TableCell/components/LinkCell/stories/linkCell.stories.tsx

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { LinkCell } from "../linkCell";
-import {
-  CLIENT_SIDE_ARGS,
-  EXTERNAL_ARGS,
-  INVALID_ARGS,
-  WITH_CUSTOM_STYLE_ARGS,
-} from "./args";
-
-const meta: Meta<typeof LinkCell> = {
-  component: LinkCell,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const ClientSide: Story = {
-  args: CLIENT_SIDE_ARGS,
-};
-
-export const External: Story = {
-  args: EXTERNAL_ARGS,
-};
-
-export const Invalid: Story = {
-  args: INVALID_ARGS,
-};
-
-export const WithCustomStyle: Story = {
-  args: WITH_CUSTOM_STYLE_ARGS,
-};

package/src/components/Table/components/TableCell/components/LinkCell/stories/types.ts

@@ -1,4 +0,0 @@
-import { LinkProps } from "@mui/material";
-import { CellContext, RowData } from "@tanstack/react-table";
-
-export type GetValue = CellContext<RowData, LinkProps>["getValue"];

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

@@ -1,59 +0,0 @@
-import Link from "next/link";
-import { ElementType } from "react";
-import { isValidUrl } from "../../../../../../common/utils";
-import {
-  ANCHOR_TARGET,
-  REL_ATTRIBUTE,
-} from "../../../../../Links/common/entities";
-import {
-  assertAnchorRelAttribute,
-  assertAnchorTargetAttribute,
-} from "../../../../../common/Link/typeGuards";
-
-/**
- * Returns the component to use for a link based on the given href and client-side navigation flag.
- * @param href - The href attribute to use.
- * @param isClientSide - Whether the link is a client-side navigation.
- * @returns The component to use for the link.
- */
-export function getComponent(href: string, isClientSide: boolean): ElementType {
-  if (isClientSide) return Link; // Use Next/Link for client-side navigation.
-  if (isValidUrl(href)) return "a"; // Use anchor tag for external links.
-  return "span"; // Use span for invalid links.
-}
-
-/**
- * Returns the rel attribute for a link based on the given rel and client-side navigation flag.
- * @param rel - The rel attribute to use.
- * @param isClientSideNavigation - Whether the link is a client-side navigation.
- * @returns The rel attribute for the link.
- */
-export function getRelAttribute(
-  rel: string | undefined,
-  isClientSideNavigation: boolean,
-): string {
-  if (rel) {
-    assertAnchorRelAttribute(rel);
-    return rel;
-  }
-  return isClientSideNavigation
-    ? REL_ATTRIBUTE.NO_OPENER
-    : REL_ATTRIBUTE.NO_OPENER_NO_REFERRER;
-}
-
-/**
- * Returns the target attribute for a link based on the given target and client-side navigation flag.
- * @param target - The target attribute to use.
- * @param isClientSideNavigation - Whether the link is a client-side navigation.
- * @returns The target attribute for the link.
- */
-export function getTargetAttribute(
-  target: string | undefined,
-  isClientSideNavigation: boolean,
-): string {
-  if (target) {
-    assertAnchorTargetAttribute(target);
-    return target;
-  }
-  return isClientSideNavigation ? ANCHOR_TARGET.SELF : ANCHOR_TARGET.BLANK;
-}

package/src/components/Table/components/TableCell/components/MarkdownCell/markdownCell.styles.ts

@@ -1,33 +0,0 @@
-import styled from "@emotion/styled";
-import { PALETTE } from "../../../../../../styles/common/constants/palette";
-import { MarkdownRenderer } from "../../../../../MarkdownRenderer/markdownRenderer";
-
-export const StyledMarkdownRenderer = styled(MarkdownRenderer)`
-  align-self: flex-start;
-
-  code {
-    all: unset;
-    font: inherit;
-    font-family:
-      Roboto Mono,
-      monospace;
-  }
-
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 8px 0;
-  }
-
-  hr {
-    border: none;
-    border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
-    margin: 16px 0;
-  }
-
-  p {
-    font: inherit;
-  }
-`;

package/src/components/Table/components/TableCell/components/MarkdownCell/markdownCell.tsx

@@ -1,39 +0,0 @@
-import { CellContext, RowData } from "@tanstack/react-table";
-import { JSX } from "react";
-import { COMPONENTS } from "../../../../../MarkdownRenderer/constants";
-import { BaseComponentProps } from "../../../../../types";
-import { getTokens, getTokensRegex, isRankedCell } from "../RankedCell/utils";
-import { StyledMarkdownRenderer } from "./markdownCell.styles";
-
-export const MarkdownCell = <
-  T extends RowData,
-  TValue extends string = string,
->({
-  className,
-  column,
-  getValue,
-  row,
-  table,
-}: BaseComponentProps & CellContext<T, TValue>): JSX.Element | null => {
-  const value = getValue();
-  if (!value) return null;
-
-  // Get column metadata (components to be rendered in MarkdownRenderer).
-  const columnDef = column?.columnDef;
-  const columnMeta = columnDef?.meta;
-  const components = columnMeta?.components;
-
-  // Determine if the cell is ranked.
-  const isRanked = isRankedCell(table, row, column.id);
-  // Build regex for markdown highlighting.
-  const regex = isRanked ? getTokensRegex(getTokens(table)) : undefined;
-
-  return (
-    <StyledMarkdownRenderer
-      className={className}
-      components={{ ...COMPONENTS, ...components }}
-      regex={regex}
-      value={value}
-    />
-  );
-};

package/src/components/Table/components/TableCell/components/MarkdownCell/stories/args.ts

@@ -1,18 +0,0 @@
-import { ComponentProps } from "react";
-import { MarkdownCell } from "../markdownCell";
-
-export const DEFAULT_ARGS = {
-  column: { id: "description" },
-  getValue: () =>
-    '| Key | Annotator | Value |\n| --- | --- | --- |\n| `tissue_ontology_term_id` | Curator | categorical with `str` categories. This **MUST** be the UBERON or CL term that best describes the tissue the cell was derived from, depending on the sample type. |\n\n**Mapping guidance**\n\n| For | Use |\n| --- | --- |\n| Tissue | STRONGLY RECOMMENDED to be an UBERON term&nbsp;<br />(e.g. [`UBERON:0008930`](http://purl.obolibrary.org/obo/UBERON_0008930) for a *somatosensory cortex* tissue sample) |\n| Cell culture | MUST be a CL term appended with \\" (cell culture)\\"&nbsp;<br />(e.g. [`CL:0000057`](http://purl.obolibrary.org/obo/CL_0000057) **(cell culture)** for the *WTC-11* cell line) |\n| Organoid | MUST be an UBERON term appended with \\" (organoid)\\"&nbsp;<br />(e.g. [`UBERON:0000955`](http://purl.obolibrary.org/obo/UBERON_0000955) **(organoid)** for a *brain organoid*) |\n| Enriched / sorted / isolated cells from a tissue | MUST be an UBERON or CL term and **SHOULD NOT** use terms that do not capture the tissue of origin.<br /><br />• *CD3+ kidney cells* → [`UBERON:0002113`](https://www.ebi.ac.uk/ols/ontologies/uberon/terms?iri=http://purl.obolibrary.org/obo/UBERON_0002113) (*kidney*) instead of [`CL:000084`](https://www.ebi.ac.uk/ols/ontologies/cl/terms?iri=http://purl.obolibrary.org/obo/CL_0000084) (*T cell*).<br />• *EPCAM+ cervical cells* → [`CL:0000066`](https://www.ebi.ac.uk/ols/ontologies/cl/terms?iri=http://purl.obolibrary.org/obo/CL_0000066) (*epithelial cell* of the cervix). |\n\n---\n\nWhen a dataset is uploaded, the **cellxgene Data Portal** MUST automatically add the matching human-readable name for the corresponding ontology term to the `obs` dataframe. Curators **MUST NOT** annotate the following columns.\n\n### `assay`\n\n| Key | Annotator | Value |\n| --- | --- | --- |\n| `assay` | Data Portal | categorical with `str` categories. This **MUST** be the human-readable name assigned to the value of `assay_ontology_term_id`. |',
-  row: { columnFiltersMeta: { description: { passed: false } } },
-  table: { getState: () => ({ globalFilter: "" }) },
-} as unknown as Partial<ComponentProps<typeof MarkdownCell>>;
-
-export const WITH_HTML_ARGS = {
-  column: { id: "description" },
-  getValue: () =>
-    "Hello <br />World <a href='https://www.example.com'>example link</a>",
-  row: { columnFiltersMeta: { description: { passed: false } } },
-  table: { getState: () => ({ globalFilter: "" }) },
-} as unknown as Partial<ComponentProps<typeof MarkdownCell>>;

package/src/components/Table/components/TableCell/components/MarkdownCell/stories/constants.ts

@@ -1,11 +0,0 @@
-import styled from "@emotion/styled";
-import { Anchor } from "../../../../../../MarkdownRenderer/components/Anchor/anchor";
-
-/**
- * Styled anchor component for testing purposes.
- */
-
-export const STYLED_ANCHOR = styled(Anchor)`
-  background-color: green;
-  color: white;
-` as typeof Anchor;

package/src/components/Table/components/TableCell/components/MarkdownCell/stories/markdownCell.stories.tsx

@@ -1,37 +0,0 @@
-import { Box } from "@mui/material";
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { JSX } from "react";
-import { PALETTE } from "../../../../../../../styles/common/constants/palette";
-import { MarkdownCell } from "../markdownCell";
-import { DEFAULT_ARGS, WITH_HTML_ARGS } from "./args";
-
-const meta: Meta<typeof MarkdownCell> = {
-  component: MarkdownCell,
-  decorators: [
-    (Story): JSX.Element => (
-      <Box
-        sx={{
-          backgroundColor: PALETTE.COMMON_WHITE,
-          fontSize: "14px",
-          lineHeight: "20px",
-          padding: 3,
-          width: 480,
-        }}
-      >
-        <Story />
-      </Box>
-    ),
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: DEFAULT_ARGS,
-};
-
-export const WithHtml: Story = {
-  args: WITH_HTML_ARGS,
-};

package/src/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip.styles.ts

@@ -1,11 +0,0 @@
-import styled from "@emotion/styled";
-
-export const TooltipContent = styled.span`
-  overflow: scroll;
-  overscroll-behavior: none;
-  padding: 8px 12px;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`;

package/src/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip.tsx

@@ -1,86 +0,0 @@
-import {
-  Tooltip as MTooltip,
-  TooltipProps as MTooltipProps,
-  PopperProps,
-} from "@mui/material";
-import { detectOverflow } from "@popperjs/core";
-import { State } from "@popperjs/core/lib/types";
-import { JSX, useMemo, useState } from "react";
-import { TooltipContent } from "./tooltip.styles";
-
-const DEFAULT_FLIP_MODIFIER = {
-  enabled: true,
-  name: "flip",
-  options: {
-    fallbackPlacements: ["bottom", "right", "left"],
-  },
-};
-
-const DEFAULT_PREVENT_OVERFLOW_MODIFIER = {
-  enabled: true,
-  name: "preventOverflow",
-  options: {
-    padding: 16,
-  },
-};
-
-export interface TooltipProps extends MTooltipProps {
-  className?: string;
-}
-
-export const Tooltip = ({
-  children,
-  className,
-  title,
-  ...props /* Spread props to allow for Mui Tooltip specific prop overrides. */
-}: TooltipProps): JSX.Element => {
-  const [maxHeight, setMaxHeight] = useState<number>();
-  const modifiers: PopperProps["modifiers"] = useMemo(
-    () => [
-      {
-        enabled: true,
-        fn: ({ state }): void => setMaxHeight(calculateMaxHeight(state)),
-        name: "maxHeight",
-        phase: "main",
-        requiresIfExists: ["offset"],
-      },
-      DEFAULT_FLIP_MODIFIER,
-      DEFAULT_PREVENT_OVERFLOW_MODIFIER,
-    ],
-    [],
-  );
-  return (
-    <MTooltip
-      arrow
-      className={className}
-      onClose={(): void => setMaxHeight(undefined)}
-      slotProps={{
-        popper: { modifiers },
-        tooltip: { style: { display: "flex", maxHeight, padding: 0 } },
-      }}
-      title={<TooltipContent>{title}</TooltipContent>}
-      {...props}
-    >
-      {children}
-    </MTooltip>
-  );
-};
-
-/**
- * Calculate the max height of the tooltip based on the current popper modifier state.
- * @param state - Popper modifier state.
- * @returns tooltip maximum height.
- */
-function calculateMaxHeight(state: State): number | undefined {
-  const overflow = detectOverflow(state);
-  const { placement } = state;
-  if (placement === "left" || placement === "right") {
-    return window.innerHeight - 32;
-  }
-  if (placement === "top") {
-    return state.rects.popper.height - overflow.top - 24;
-  }
-  if (placement === "bottom") {
-    return state.rects.popper.height - overflow.bottom - 24;
-  }
-}

package/src/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag.tsx

@@ -1,21 +0,0 @@
-import { JSX, ReactElement } from "react";
-import { Tooltip } from "./components/Tooltip/tooltip";
-
-export interface NTagProps {
-  className?: string;
-  Tag: ReactElement;
-  TooltipTitle: ReactElement;
-}
-
-export const NTag = ({
-  className,
-  Tag,
-  TooltipTitle,
-  ...props /* Spread props to allow for Mui Tooltip specific prop overrides. */
-}: NTagProps): JSX.Element => {
-  return (
-    <Tooltip className={className} title={TooltipTitle} {...props}>
-      {Tag}
-    </Tooltip>
-  );
-};

package/src/components/Table/components/TableCell/components/NTagCell/nTagCell.tsx

@@ -1,73 +0,0 @@
-import {
-  Chip as MChip,
-  ChipProps as MChipProps,
-  Typography,
-} from "@mui/material";
-import { JSX, forwardRef } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
-import { TypographyProps } from "../../../../../common/Typography/common/entities";
-import { NTag } from "./components/NTag/nTag";
-
-// Template constants
-const MAX_DISPLAYABLE_VALUES = 1;
-
-export type MetadataValue = string;
-
-export interface NTagCellProps {
-  label: string;
-  TypographyProps?: TypographyProps;
-  values: MetadataValue[];
-}
-
-/**
- * String-concatenates the specified list of metadata values to a string value, joined by a comma ",".
- * @param metadataValues - List of metadata values.
- * @returns the metadata values in a string, each value joined by a comma.
- */
-function stringifyMetadataValues(metadataValues: MetadataValue[]): string {
-  return metadataValues.join(", ");
-}
-
-/**
- * Renders tag for NTag component.
- * Tooltip children require forward ref.
- */
-const Tag = forwardRef<HTMLDivElement, MChipProps>(function Tag(props, ref) {
-  return <MChip ref={ref} {...props} />;
-});
-
-export const NTagCell = ({
-  label,
-  TypographyProps,
-  values,
-}: NTagCellProps): JSX.Element => {
-  const metadataCount = values.length;
-  const showNTag = metadataCount > MAX_DISPLAYABLE_VALUES;
-  return (
-    <>
-      {showNTag ? (
-        <NTag
-          Tag={<Tag label={`${metadataCount} ${label}`} variant="ntag" />}
-          TooltipTitle={
-            <Typography
-              display="block"
-              variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
-            >
-              {stringifyMetadataValues(values)}
-            </Typography>
-          }
-        />
-      ) : (
-        values.map((value, v) => (
-          <Typography
-            key={`${value}${v}`}
-            variant={TYPOGRAPHY_PROPS.VARIANT.INHERIT}
-            {...TypographyProps}
-          >
-            {value}
-          </Typography>
-        ))
-      )}
-    </>
-  );
-};