@databiosphere/findable-ui 30.0.0 → 31.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "30.0.0"
+  ".": "31.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [31.0.0](https://github.com/DataBiosphere/findable-ui/compare/v30.0.0...v31.0.0) (2025-05-15)
+
+
+### ⚠ BREAKING CHANGES
+
+* create data dictionary table cell for displaying markdown ([#453](https://github.com/DataBiosphere/findable-ui/issues/453)) (#480)
+* make data dictionary config generic with attribute as default ([#476](https://github.com/DataBiosphere/findable-ui/issues/476)) (#477)
+
+### Features
+
+* create data dictionary table cell for displaying markdown ([#453](https://github.com/DataBiosphere/findable-ui/issues/453)) ([#480](https://github.com/DataBiosphere/findable-ui/issues/480)) ([4ee16e7](https://github.com/DataBiosphere/findable-ui/commit/4ee16e75e66dd56d126ed01773364d6fe5a32ab7))
+* make data dictionary config generic with attribute as default ([#476](https://github.com/DataBiosphere/findable-ui/issues/476)) ([#477](https://github.com/DataBiosphere/findable-ui/issues/477)) ([723585d](https://github.com/DataBiosphere/findable-ui/commit/723585de6e6380eccd5d39f72cbc0aa6db1fc398))
+
 ## [30.0.0](https://github.com/DataBiosphere/findable-ui/compare/v29.0.2...v30.0.0) (2025-05-13)
 
 

package/lib/common/entities.d.ts

@@ -1,5 +1,4 @@
-import { ColumnDef } from "@tanstack/react-table";
-import { GridTrackSize } from "../config/entities";
+import { ColumnDef, RowData } from "@tanstack/react-table";
 /**
  * Model of a value of a metadata class.
  */
@@ -17,10 +16,6 @@ export interface Attribute {
     title: string;
     values?: string;
 }
-/**
- * Model of attribute key types; used mostly when building data dictionary column definitions.
- */
-export type AttributeValueTypes<TValue = unknown> = TValue;
 /**
  * Filterable metadata keys.
  */
@@ -36,8 +31,8 @@ export interface CategoryTag {
 /**
  * Model of a metadata class, to be specified manually or built from LinkML schema.
  */
-export interface Class {
-    attributes: Attribute[];
+export interface Class<T extends RowData = Attribute> {
+    attributes: T[];
     description: string;
     name: string;
     title: string;
@@ -54,36 +49,23 @@ export type DataDictionaryPrefix = Record<string, string>;
 /**
  * Model of a metadata dictionary containing a set of classes and their definitions.
  */
-export interface DataDictionary {
+export interface DataDictionary<T extends RowData = Attribute> {
     annotations?: {
         [key in keyof DataDictionaryPrefix]: string;
     };
-    classes: Class[];
+    classes: Class<T>[];
     description?: string;
     name: string;
     prefixes?: DataDictionaryPrefix;
     title: string;
 }
-/**
- * Display model of a data dictionary column.
- */
-export interface DataDictionaryColumnDef {
-    attributeAccessorFnName?: string;
-    attributeCellName?: string;
-    attributeDisplayName: string;
-    attributeSlotName: string;
-    width: Omit<GridTrackSize, "GridTrackMinMax"> | {
-        max: string;
-        min: string;
-    };
-}
 /**
  * Configuration of data dictionary; contains schema definition (that is, the actual data
  * dictionary) as well as column def for displaying the data dictionary.
  */
-export interface DataDictionaryConfig {
-    columnDefs: ColumnDef<Attribute, AttributeValueTypes>[];
-    dataDictionary: DataDictionary;
+export interface DataDictionaryConfig<T extends RowData = Attribute> {
+    columnDefs: ColumnDef<T, T[keyof T]>[];
+    dataDictionary: DataDictionary<T>;
 }
 /**
  * Label and description values from a data dictionary that are added to a site

package/lib/components/DataDictionary/components/Entities/entities.d.ts

@@ -1,2 +1,4 @@
+import { RowData } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
 import { ClassesProps } from "./types";
-export declare const Entities: ({ classes, columnDefs, spacing, }: ClassesProps) => JSX.Element;
+export declare const Entities: <T extends RowData = Attribute>({ classes, columnDefs, spacing, }: ClassesProps<T>) => JSX.Element;

package/lib/components/DataDictionary/components/Entities/entities.js

@@ -3,5 +3,5 @@ import React from "react";
 import { Entity } from "../Entity/entity";
 import { GRID_PROPS } from "./constants";
 export const Entities = ({ classes, columnDefs, spacing, }) => {
-    return (React.createElement(Grid, { ...GRID_PROPS }, classes.map((classData) => (React.createElement(Entity, { key: classData.name, class: classData, columnDefs: columnDefs, spacing: spacing })))));
+    return (React.createElement(Grid, { ...GRID_PROPS }, classes.map((cls) => (React.createElement(Entity, { key: cls.name, class: cls, columnDefs: columnDefs, spacing: spacing })))));
 };

package/lib/components/DataDictionary/components/Entities/types.d.ts

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

package/lib/components/DataDictionary/components/Entity/entity.d.ts

@@ -1,2 +1,4 @@
+import { RowData } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
 import { EntityProps } from "./types";
-export declare const Entity: ({ class: classData, columnDefs, spacing, }: EntityProps) => JSX.Element;
+export declare const Entity: <T extends RowData = Attribute>({ class: cls, columnDefs, spacing, }: EntityProps<T>) => JSX.Element;

package/lib/components/DataDictionary/components/Entity/entity.js

@@ -6,14 +6,14 @@ import { useTable } from "../Table/hook";
 import { Table } from "../Table/table";
 import { GRID_PROPS } from "./constants";
 import { StyledTypography } from "./entity.styles";
-export const Entity = ({ class: classData, columnDefs, spacing, }) => {
-    const table = useTable(classData.attributes, columnDefs);
+export const Entity = ({ class: cls, columnDefs, spacing, }) => {
+    const table = useTable(cls.attributes, columnDefs);
     return (React.createElement(Grid, { ...GRID_PROPS, rowGap: 4 },
         React.createElement(Grid, { ...GRID_PROPS, rowGap: 1 },
-            React.createElement(StyledTypography, { component: "h3", id: classData.name, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL, ...spacing },
-                classData.title,
+            React.createElement(StyledTypography, { component: "h3", id: cls.name, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL, ...spacing },
+                cls.title,
                 " ",
-                React.createElement(AnchorLink, { anchorLink: classData.name })),
-            React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES }, classData.description)),
+                React.createElement(AnchorLink, { anchorLink: cls.name })),
+            React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES }, cls.description)),
         React.createElement(Table, { table: table })));
 };

package/lib/components/DataDictionary/components/Entity/types.d.ts

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

package/lib/components/DataDictionary/components/Outline/utils.d.ts

@@ -1,8 +1,9 @@
-import { Class } from "../../../../common/entities";
+import { RowData } from "@tanstack/react-table";
+import { Attribute, Class } from "../../../../common/entities";
 import { OutlineItem } from "../../../Layout/components/Outline/types";
 /**
  * Returns outline items from classes.
  * @param classes - Class entities.
  * @returns Outline items.
  */
-export declare function buildClassesOutline(classes: Class[]): OutlineItem[];
+export declare function buildClassesOutline<T extends RowData = Attribute>(classes: Class<T>[]): OutlineItem[];

package/lib/components/DataDictionary/components/Table/hook.d.ts

@@ -1,3 +1,3 @@
-import { ColumnDef, Table } from "@tanstack/react-table";
-import { Attribute, AttributeValueTypes } from "../../../../common/entities";
-export declare const useTable: (data: Attribute[], columnDefs: ColumnDef<Attribute, AttributeValueTypes>[]) => Table<Attribute>;
+import { ColumnDef, RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+export declare const useTable: <T extends RowData = Attribute>(data: T[], columnDefs: ColumnDef<T, T[keyof T]>[]) => Table<T>;

package/lib/components/DataDictionary/components/Table/hook.js

@@ -1,7 +1,9 @@
-import { useReactTable } from "@tanstack/react-table";
+import { useReactTable, } from "@tanstack/react-table";
 import { useTableOptions } from "./options/hook";
 export const useTable = (data, columnDefs) => {
+    // Table options.
     const tableOptions = useTableOptions();
+    // Table instance.
     return useReactTable({
         ...tableOptions,
         columns: columnDefs,

package/lib/components/DataDictionary/components/Table/options/core/constants.d.ts

@@ -1,3 +1,2 @@
-import { CoreOptions } from "@tanstack/react-table";
-import { Attribute } from "../../../../../../common/entities";
-export declare const CORE_OPTIONS: Pick<CoreOptions<Attribute>, "_features" | "getCoreRowModel">;
+import { CoreOptions, RowData } from "@tanstack/react-table";
+export declare const CORE_OPTIONS: Pick<CoreOptions<RowData>, "_features" | "getCoreRowModel">;

package/lib/components/DataDictionary/components/Table/options/hook.d.ts

@@ -1,3 +1,3 @@
-import { TableOptions } from "@tanstack/react-table";
+import { RowData, TableOptions } from "@tanstack/react-table";
 import { Attribute } from "../../../../../common/entities";
-export declare const useTableOptions: () => Omit<TableOptions<Attribute>, "columns" | "data">;
+export declare const useTableOptions: <T extends RowData = Attribute>() => Omit<TableOptions<T>, "columns" | "data">;

package/lib/components/DataDictionary/components/Table/options/sorting/constants.d.ts

@@ -1,3 +1,2 @@
-import { SortingOptions } from "@tanstack/react-table";
-import { Attribute } from "../../../../../../common/entities";
-export declare const SORTING_OPTIONS: Pick<SortingOptions<Attribute>, "enableSorting">;
+import { RowData, SortingOptions } from "@tanstack/react-table";
+export declare const SORTING_OPTIONS: Pick<SortingOptions<RowData>, "enableSorting">;

package/lib/components/DataDictionary/components/Table/table.d.ts

@@ -1,2 +1,3 @@
+import { RowData } from "@tanstack/react-table";
 import { TableProps } from "./types";
-export declare const Table: ({ table }: TableProps) => JSX.Element;
+export declare const Table: <T extends RowData>({ table, }: TableProps<T>) => JSX.Element;

package/lib/components/DataDictionary/components/Table/table.js

@@ -7,7 +7,7 @@ import { GridTable } from "../../../Table/table.styles";
 import { getColumnTrackSizing } from "../../../TableCreator/options/columnTrackSizing/utils";
 import { GridPaper } from "../../../common/Paper/paper.styles";
 import { StyledRoundedPaper } from "./table.styles";
-export const Table = ({ table }) => {
+export const Table = ({ table, }) => {
     return (React.createElement(StyledRoundedPaper, { variant: "table" },
         React.createElement(GridPaper, null,
             React.createElement(TableContainer, null,

package/lib/components/DataDictionary/components/Table/types.d.ts

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

package/lib/components/DataDictionary/dataDictionary.d.ts

@@ -1,2 +1,4 @@
+import { RowData } from "@tanstack/react-table";
+import { Attribute } from "../../common/entities";
 import { DataDictionaryProps } from "./types";
-export declare const DataDictionary: ({ className, EntitiesLayout, Outline, OutlineLayout, Title, TitleLayout, }: DataDictionaryProps) => JSX.Element;
+export declare const DataDictionary: <T extends RowData = Attribute>({ className, EntitiesLayout, Outline, OutlineLayout, Title, TitleLayout, }: DataDictionaryProps) => JSX.Element;

package/lib/components/DataDictionary/hooks/UseDataDictionary/hook.d.ts

@@ -1,2 +1,4 @@
+import { RowData } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
 import { UseDataDictionary } from "./types";
-export declare const useDataDictionary: () => UseDataDictionary;
+export declare const useDataDictionary: <T extends RowData = Attribute>() => UseDataDictionary<T>;

package/lib/components/DataDictionary/hooks/UseDataDictionary/types.d.ts

@@ -1,6 +1,6 @@
-import { ColumnDef } from "@tanstack/react-table";
-import { Attribute, AttributeValueTypes, Class } from "../../../../common/entities";
-export interface UseDataDictionary {
-    classes: Class[];
-    columnDefs: ColumnDef<Attribute, AttributeValueTypes>[];
+import { ColumnDef, RowData } from "@tanstack/react-table";
+import { Attribute, Class } from "../../../../common/entities";
+export interface UseDataDictionary<T extends RowData = Attribute> {
+    classes: Class<T>[];
+    columnDefs: ColumnDef<T, T[keyof T]>[];
 }

package/lib/components/MarkdownRenderer/components/Anchor/anchor.d.ts

@@ -0,0 +1,19 @@
+import { AnchorHTMLAttributes, ClassAttributes } from "react";
+import { BaseComponentProps } from "../../../types";
+/**
+ * rehype-sanitize's default schema allows only a limited set of attributes on <a> elements:
+ * - aria-*
+ * - className
+ * - data-footnote-backref
+ * - data-footnote-ref
+ * - href
+ *
+ * By default, attributes such as:
+ * - download
+ * - rel
+ * - target
+ * are not permitted and will be stripped from anchor tags during sanitization.
+ *
+ * Note: This component currently does not support these excluded attributes.
+ */
+export declare const Anchor: (props: BaseComponentProps & ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement>) => JSX.Element;

package/lib/components/MarkdownRenderer/components/Anchor/anchor.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { Link } from "../../../Links/components/Link/link";
+/**
+ * rehype-sanitize's default schema allows only a limited set of attributes on <a> elements:
+ * - aria-*
+ * - className
+ * - data-footnote-backref
+ * - data-footnote-ref
+ * - href
+ *
+ * By default, attributes such as:
+ * - download
+ * - rel
+ * - target
+ * are not permitted and will be stripped from anchor tags during sanitization.
+ *
+ * Note: This component currently does not support these excluded attributes.
+ */
+export const Anchor = (props) => {
+    return (React.createElement(Link, { className: props.className, label: props.children, url: props.href || "" }));
+};

package/lib/components/MarkdownRenderer/components/Table/table.d.ts

@@ -0,0 +1,3 @@
+import { BaseComponentProps } from "components/types";
+import { ClassAttributes, TableHTMLAttributes } from "react";
+export declare const Table: (props: BaseComponentProps & ClassAttributes<HTMLTableElement> & TableHTMLAttributes<HTMLTableElement>) => JSX.Element;

package/lib/components/MarkdownRenderer/components/Table/table.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { StyledTable } from "./table.styles";
+export const Table = (props) => {
+    return (React.createElement(StyledTable, { className: props.className }, props.children));
+};

package/lib/components/MarkdownRenderer/components/Table/table.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledTable: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+}, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;

package/lib/components/MarkdownRenderer/components/Table/table.styles.js

@@ -0,0 +1,40 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { textBody500 } from "../../../../styles/common/mixins/fonts";
+export const StyledTable = styled("table") `
+  border-collapse: collapse;
+  margin: 16px 0;
+  table-layout: fixed;
+  width: 100%;
+
+  thead {
+    all: unset;
+    display: table-header-group;
+  }
+
+  tbody {
+    all: unset;
+    display: table-row-group;
+  }
+
+  tr {
+    all: unset;
+    display: table-row;
+  }
+
+  td,
+  th {
+    display: table-cell;
+    padding: 2px 4px;
+  }
+
+  th {
+    ${textBody500}
+    border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
+  }
+
+  td {
+    font: inherit;
+    overflow-wrap: break-word;
+  }
+`;

package/lib/components/MarkdownRenderer/constants.d.ts

@@ -0,0 +1,2 @@
+import { Components } from "rehype-react";
+export declare const COMPONENTS: Partial<Components>;

package/lib/components/MarkdownRenderer/constants.js

@@ -0,0 +1,6 @@
+import { Anchor } from "./components/Anchor/anchor";
+import { Table } from "./components/Table/table";
+export const COMPONENTS = {
+    a: Anchor,
+    table: Table,
+};

package/lib/components/MarkdownRenderer/markdownRenderer.d.ts

@@ -0,0 +1,2 @@
+import { MarkdownRendererProps } from "./types";
+export declare const MarkdownRenderer: ({ className, components, value, }: MarkdownRendererProps) => JSX.Element;

package/lib/components/MarkdownRenderer/markdownRenderer.js

@@ -0,0 +1,45 @@
+import { Typography } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import * as production from "react/jsx-runtime";
+import rehypeRaw from "rehype-raw";
+import rehypeReact from "rehype-react";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import { unified } from "unified";
+import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
+import { COMPONENTS } from "./constants";
+import { StyledContainer } from "./markdownRenderer.styles";
+export const MarkdownRenderer = ({ className, components = COMPONENTS, value, }) => {
+    const [element, setElement] = useState(null);
+    const [error, setError] = useState(null);
+    const [componentOptions] = useState(components);
+    useEffect(() => {
+        let cancelled = false;
+        setError(null);
+        const processor = unified()
+            .use(remarkParse)
+            .use(remarkGfm)
+            .use(remarkRehype, { allowDangerousHtml: true })
+            .use(rehypeRaw)
+            .use(rehypeSanitize, defaultSchema)
+            .use(rehypeReact, { ...production, components: componentOptions });
+        processor
+            .process(value)
+            .then((file) => {
+            if (!cancelled)
+                setElement(file?.result);
+        })
+            .catch((err) => {
+            if (!cancelled)
+                setError(err.message);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [componentOptions, value]);
+    if (error)
+        return (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.ERROR, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400 }, error));
+    return React.createElement(StyledContainer, { className: className }, element);
+};

package/lib/components/MarkdownRenderer/markdownRenderer.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/MarkdownRenderer/markdownRenderer.styles.js

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+// See https://github.com/emotion-js/emotion/issues/1105.
+// See https://github.com/emotion-js/emotion/releases/tag/%40emotion%2Fcache%4011.10.2.
+const ignoreSsrWarning = "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */";
+export const StyledContainer = styled("div") `
+  > *:first-child:not(style)${ignoreSsrWarning} {
+    margin-top: 0;
+  }
+
+  > *:last-child:not(style)${ignoreSsrWarning} {
+    margin-bottom: 0;
+  }
+`;

package/lib/components/MarkdownRenderer/types.d.ts

@@ -0,0 +1,6 @@
+import { Components } from "rehype-react";
+import { BaseComponentProps } from "../types";
+export interface MarkdownRendererProps extends BaseComponentProps {
+    components?: Partial<Components>;
+    value: string;
+}

package/lib/components/MarkdownRenderer/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Table/components/TableCell/components/ChipCell/chipCell.d.ts

@@ -1,3 +1,4 @@
 import { ChipProps } from "@mui/material";
 import { CellContext, RowData } from "@tanstack/react-table";
-export declare const ChipCell: <T extends RowData, TValue extends ChipProps = ChipProps>({ getValue, }: CellContext<T, TValue>) => JSX.Element | null;
+import { BaseComponentProps } from "../../../../../types";
+export declare const ChipCell: <T extends RowData, TValue extends ChipProps = ChipProps>({ className, getValue, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/ChipCell/chipCell.js

@@ -1,8 +1,8 @@
 import { Chip } from "@mui/material";
 import React from "react";
-export const ChipCell = ({ getValue, }) => {
+export const ChipCell = ({ className, getValue, }) => {
     const props = getValue();
     if (!props)
         return null;
-    return React.createElement(Chip, { ...props });
+    return React.createElement(Chip, { className: className, ...props });
 };

package/lib/components/Table/components/TableCell/components/LinkCell/linkCell.d.ts

@@ -1,4 +1,4 @@
 import { LinkProps } from "@mui/material";
 import { CellContext, RowData } from "@tanstack/react-table";
 import { BaseComponentProps } from "components/types";
-export declare const LinkCell: <T extends RowData, TValue extends LinkProps = LinkProps>({ getValue, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;
+export declare const LinkCell: <T extends RowData, TValue extends LinkProps = LinkProps>({ className, getValue, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/LinkCell/linkCell.js

@@ -4,11 +4,11 @@ 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 = ({ getValue, }) => {
+export const LinkCell = ({ className, getValue, }) => {
     const props = getValue();
     if (!props)
         return null;
-    const { children, className, color, href = "", rel, target, underline, ...linkProps } = props;
+    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.

package/lib/components/Table/components/TableCell/components/MarkdownCell/markdownCell.d.ts

@@ -0,0 +1,4 @@
+import { CellContext, RowData } from "@tanstack/react-table";
+import { BaseComponentProps } from "components/types";
+import { MarkdownCellProps } from "./types";
+export declare const MarkdownCell: <T extends RowData, TValue extends MarkdownCellProps = MarkdownCellProps>({ className, column, getValue, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/MarkdownCell/markdownCell.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { COMPONENTS } from "../../../../../MarkdownRenderer/constants";
+import { StyledMarkdownRenderer } from "./markdownCell.styles";
+export const MarkdownCell = ({ className, column, getValue, }) => {
+    const props = getValue();
+    if (!props)
+        return null;
+    const { values } = props;
+    const columnDef = column?.columnDef;
+    const columnMeta = columnDef?.meta;
+    const components = columnMeta?.components;
+    return (React.createElement(StyledMarkdownRenderer, { className: className, components: { ...COMPONENTS, ...components }, value: values }));
+};

package/lib/components/Table/components/TableCell/components/MarkdownCell/markdownCell.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledMarkdownRenderer: import("@emotion/styled").StyledComponent<import("../../../../../MarkdownRenderer/types").MarkdownRendererProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Table/components/TableCell/components/MarkdownCell/markdownCell.styles.js

@@ -0,0 +1,30 @@
+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/lib/components/Table/components/TableCell/components/MarkdownCell/stories/args.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from "react";
+import { MarkdownCell } from "../markdownCell";
+export declare const DEFAULT_ARGS: Partial<ComponentProps<typeof MarkdownCell>>;
+export declare const WITH_HTML_ARGS: Partial<ComponentProps<typeof MarkdownCell>>;

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/args.js

@@ -0,0 +1,10 @@
+export const DEFAULT_ARGS = {
+    getValue: (() => ({
+        values: '| 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`. |',
+    })),
+};
+export const WITH_HTML_ARGS = {
+    getValue: (() => ({
+        values: "Hello <br />World <a href='https://www.example.com'>example link</a>",
+    })),
+};

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/constants.d.ts

@@ -0,0 +1,5 @@
+import { Anchor } from "../../../../../../MarkdownRenderer/components/Anchor/anchor";
+/**
+ * Styled anchor component for testing purposes.
+ */
+export declare const STYLED_ANCHOR: typeof Anchor;

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/constants.js

@@ -0,0 +1,9 @@
+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;
+`;