@databiosphere/findable-ui 38.2.0 → 39.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "38.2.0"
+  ".": "39.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [39.0.0](https://github.com/DataBiosphere/findable-ui/compare/v38.3.0...v39.0.0) (2025-07-23)
+
+
+### ⚠ BREAKING CHANGES
+
+* fix global search when a marked value is inside another HTML tag ([#539](https://github.com/DataBiosphere/findable-ui/issues/539)) (#573)
+
+### Features
+
+* fix global search when a marked value is inside another HTML tag ([#539](https://github.com/DataBiosphere/findable-ui/issues/539)) ([#573](https://github.com/DataBiosphere/findable-ui/issues/573)) ([7b58c24](https://github.com/DataBiosphere/findable-ui/commit/7b58c2429ba947e752358a012a6a7d545f0ffc28))
+
+## [38.3.0](https://github.com/DataBiosphere/findable-ui/compare/v38.2.0...v38.3.0) (2025-07-22)
+
+
+### Features
+
+* add table row expansion to table components ([#569](https://github.com/DataBiosphere/findable-ui/issues/569)) ([#570](https://github.com/DataBiosphere/findable-ui/issues/570)) ([d23c5b8](https://github.com/DataBiosphere/findable-ui/commit/d23c5b8c091a899295a3005ff80d7cd297949033))
+
 ## [38.2.0](https://github.com/DataBiosphere/findable-ui/compare/v38.1.1...v38.2.0) (2025-07-11)
 
 

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

@@ -1,2 +1,2 @@
 import { ExpandedOptions, RowData } from "@tanstack/react-table";
-export declare const EXPANDED_OPTIONS: Pick<ExpandedOptions<RowData>, "enableExpanding" | "getExpandedRowModel">;
+export declare const EXPANDED_OPTIONS: Pick<ExpandedOptions<RowData>, "enableExpanding" | "getExpandedRowModel" | "getRowCanExpand">;

package/lib/components/DataDictionary/components/Table/options/expanded/constants.js

@@ -2,4 +2,5 @@ import { getExpandedRowModel, } from "@tanstack/react-table";
 export const EXPANDED_OPTIONS = {
     enableExpanding: true,
     getExpandedRowModel: getExpandedRowModel(),
+    getRowCanExpand: () => true,
 };

package/lib/components/Detail/components/Table/components/TableRows/tableRows.js

@@ -2,6 +2,7 @@ import { TableCell } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { getTableCellAlign, getTableCellPadding, } from "../../../../../Table/components/TableCell/common/utils";
+import { handleToggleExpanded } from "../../../../../Table/components/TableFeatures/RowExpanding/utils";
 import { StyledTableRow } from "../../../../../Table/components/TableRow/tableRow.styles";
 export const TableRows = ({ rows: leafOrSubRows, tableInstance, tableView, }) => {
     const { getRowModel } = tableInstance;
@@ -9,7 +10,7 @@ export const TableRows = ({ rows: leafOrSubRows, tableInstance, tableView, }) =>
     const { tableCell } = tableView || {};
     const { size: tableCellSize = "medium" } = tableCell || {};
     return (React.createElement(Fragment, null, (leafOrSubRows || rows).map((row) => {
-        return (React.createElement(StyledTableRow, { key: row.id, isGrouped: row.getIsGrouped(), isPreview: row.getIsPreview() }, row.getVisibleCells().map((cell) => {
+        return (React.createElement(StyledTableRow, { key: row.id, canExpand: row.getCanExpand(), isExpanded: row.getIsExpanded(), isGrouped: row.getIsGrouped(), isPreview: row.getIsPreview(), onClick: () => handleToggleExpanded(row) }, row.getVisibleCells().map((cell) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())

package/lib/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.js

@@ -15,12 +15,12 @@ export const ExploreViewLink = ({ className, label, onClick, target = ANCHOR_TAR
     const filters = getSelectedFilters(url.query);
     const grouping = getGrouping(url.query);
     const sorting = getSorting(url.query);
-    return (React.createElement(Link, { className: className, href: url.href, onClick: () => {
+    return (React.createElement(Link, { className: className, href: url.href, onClick: (e) => {
             exploreDispatch({
                 payload: { entityListType, filters, grouping, sorting },
                 type: ExploreActionKind.UpdateEntityFilters,
             });
-            onClick?.();
+            onClick?.(e);
         }, rel: REL_ATTRIBUTE.NO_OPENER, target: target }, label));
 };
 /**

package/lib/components/Links/components/Link/link.d.ts

@@ -6,7 +6,6 @@ import { ANCHOR_TARGET, Url } from "../../common/entities";
 export interface LinkProps extends BaseComponentProps, Omit<MLinkProps, "children" | "component"> {
     copyable?: boolean;
     label: ReactNode;
-    onClick?: () => void;
     target?: ANCHOR_TARGET;
     TypographyProps?: TypographyProps;
     url: Url;

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

@@ -17,5 +17,10 @@ import { Link } from "../../../Links/components/Link/link";
  * 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 || "" }));
+    return (React.createElement(Link, { className: props.className, label: props.children, 
+        /*
+         * Prevents click events from bubbling up to parent components
+         * (such as CardActionArea or Accordion) when the link is activated.
+         */
+        onClick: (e) => e.stopPropagation(), url: props.href || "" }));
 };

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

@@ -11,4 +11,4 @@ import { MarkdownRendererProps } from "./types";
  * rehype plug-ins are chosen from versions that still target Unified 10:
  * rehype-raw 7.x, rehype-sanitize 5.x and rehype-react 7.x.
  */
-export declare const MarkdownRenderer: ({ className, components: componentOptions, value, }: MarkdownRendererProps) => JSX.Element;
+export declare const MarkdownRenderer: ({ className, components: componentOptions, regex: markdownRegex, value, }: MarkdownRendererProps) => JSX.Element;

package/lib/components/MarkdownRenderer/markdownRenderer.js

@@ -1,5 +1,5 @@
 import { Typography } from "@mui/material";
-import React, { Fragment, createElement, useEffect, useState } from "react";
+import React, { Fragment, createElement, useEffect, useMemo, useState, } from "react";
 import rehypeRaw from "rehype-raw";
 import rehypeReact from "rehype-react";
 import rehypeSanitize from "rehype-sanitize";
@@ -10,6 +10,7 @@ import { unified } from "unified";
 import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
 import { COMPONENTS } from "./constants";
 import { StyledContainer } from "./markdownRenderer.styles";
+import { rehypeHighlight } from "./rehypeHighlight";
 /**
  * Markdown Rendering - Pipeline Version Constraints
  *
@@ -22,10 +23,11 @@ import { StyledContainer } from "./markdownRenderer.styles";
  * rehype plug-ins are chosen from versions that still target Unified 10:
  * rehype-raw 7.x, rehype-sanitize 5.x and rehype-react 7.x.
  */
-export const MarkdownRenderer = ({ className, components: componentOptions = COMPONENTS, value, }) => {
+export const MarkdownRenderer = ({ className, components: componentOptions = COMPONENTS, regex: markdownRegex, value, }) => {
     const [element, setElement] = useState(null);
     const [error, setError] = useState(null);
     const [components] = useState(componentOptions);
+    const regex = useMemo(() => markdownRegex, [markdownRegex]);
     useEffect(() => {
         let cancelled = false;
         setError(null);
@@ -35,6 +37,7 @@ export const MarkdownRenderer = ({ className, components: componentOptions = COM
             .use(remarkRehype, { allowDangerousHtml: true })
             .use(rehypeRaw)
             .use(rehypeSanitize)
+            .use(rehypeHighlight, { regex })
             .use(rehypeReact, { Fragment, components, createElement });
         processor
             .process(value)
@@ -49,7 +52,7 @@ export const MarkdownRenderer = ({ className, components: componentOptions = COM
         return () => {
             cancelled = true;
         };
-    }, [components, value]);
+    }, [components, regex, 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/rehypeHighlight.d.ts

@@ -0,0 +1,10 @@
+import { Root } from "hast";
+/**
+ * Custom rehype plugin to highlight markdown from given regex.
+ * @param options - Options.
+ * @param options.regex - Regex to match.
+ * @returns A rehype plugin.
+ */
+export declare function rehypeHighlight(options: {
+    regex: RegExp | undefined;
+}): (tree: Root) => void;

package/lib/components/MarkdownRenderer/rehypeHighlight.js

@@ -0,0 +1,49 @@
+import { visit } from "unist-util-visit";
+/**
+ * Custom rehype plugin to highlight markdown from given regex.
+ * @param options - Options.
+ * @param options.regex - Regex to match.
+ * @returns A rehype plugin.
+ */
+// eslint-disable-next-line sonarjs/cognitive-complexity -- ignoring for readability
+export function rehypeHighlight(options) {
+    const { regex } = options;
+    if (!regex)
+        return () => { };
+    return (tree) => {
+        visit(tree, "text", (node, index, parent) => {
+            if (!parent)
+                return;
+            if (typeof index !== "number")
+                return;
+            // Avoid double marking, breaking scripts, and breaking styles.
+            if ("tagName" in parent &&
+                ["mark", "script", "style"].includes(parent.tagName)) {
+                return;
+            }
+            const parts = node.value.split(regex);
+            if (parts.length === 1)
+                return; // No text to highlight.
+            const newNodes = [];
+            parts.forEach((part, i) => {
+                if (!part)
+                    return; // Skip empties.
+                if (i % 2) {
+                    // Captured text.
+                    newNodes.push({
+                        children: [{ type: "text", value: part }],
+                        properties: {},
+                        tagName: "mark",
+                        type: "element",
+                    });
+                }
+                else {
+                    // Normal text.
+                    newNodes.push({ type: "text", value: part });
+                }
+            });
+            // Replace the original text node with the new nodes.
+            parent.children.splice(index, 1, ...newNodes);
+        });
+    };
+}

package/lib/components/MarkdownRenderer/stories/args.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+import { MarkdownRenderer } from "../markdownRenderer";
+export declare const DEFAULT_ARGS: ComponentProps<typeof MarkdownRenderer>;

package/lib/components/MarkdownRenderer/stories/args.js

@@ -0,0 +1,4 @@
+export const DEFAULT_ARGS = {
+    regex: /(UBERON|955)/gi,
+    value: '| 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`. |',
+};

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { MarkdownRenderer } from "../markdownRenderer";
+declare const meta: Meta<typeof MarkdownRenderer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -0,0 +1,22 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { PALETTE } from "../../../styles/common/constants/palette";
+import { MarkdownRenderer } from "../markdownRenderer";
+import { DEFAULT_ARGS } from "./args";
+const meta = {
+    component: MarkdownRenderer,
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: {
+                backgroundColor: PALETTE.COMMON_WHITE,
+                fontSize: "14px",
+                lineHeight: "20px",
+                padding: 3,
+                width: 480,
+            } },
+            React.createElement(Story, null))),
+    ],
+};
+export default meta;
+export const Default = {
+    args: DEFAULT_ARGS,
+};

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

@@ -3,5 +3,6 @@ import { BaseComponentProps } from "../types";
 export type MarkdownRendererComponents = Record<string, ComponentType<any>>;
 export interface MarkdownRendererProps extends BaseComponentProps {
     components?: MarkdownRendererComponents;
+    regex?: RegExp;
     value: string;
 }

package/lib/components/Table/columnDef/globalFilter/utils.js

@@ -6,11 +6,14 @@ import { RANK_ITEM_OPTIONS } from "./constants";
  * @returns Array of terms.
  */
 export function parseSearchTerms(value) {
-    return String(value ?? "")
+    const terms = String(value ?? "")
         .toLowerCase()
         .trim()
         .split(/\s+/)
-        .filter(Boolean);
+        .filter(Boolean)
+        .sort((a, b) => b.length - a.length);
+    const termsSet = new Set(terms);
+    return [...termsSet];
 }
 /**
  * Ranks a column's value against search terms.
@@ -38,7 +41,6 @@ export function rankColumnValue(row, columnId, terms) {
  * @param terms - Search terms to match against.
  */
 export function rankRowColumns(row, columnId, terms) {
-    const columnFiltersMeta = row.columnFiltersMeta;
     // Process other columns.
     for (const { column } of row.getAllCells()) {
         // Column is not searchable.
@@ -47,8 +49,6 @@ export function rankRowColumns(row, columnId, terms) {
         // 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.

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

@@ -17,5 +17,10 @@ export const LinkCell = ({ className, getValue, }) => {
     if (!isValid)
         return (React.createElement(Typography, { className: className, color: TYPOGRAPHY_PROPS.COLOR.INHERIT, component: "span", variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...linkProps }, children));
     // If the href is valid, return a Link component.
-    return (React.createElement(MLink, { className: className, color: color, component: getComponent(href, isClientSide), href: href, rel: getRelAttribute(rel, isClientSide), target: getTargetAttribute(target, isClientSide), underline: underline, ...linkProps }, children));
+    return (React.createElement(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));
 };

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

@@ -1,4 +1,3 @@
 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;
+export declare const MarkdownCell: <T extends RowData, TValue extends string = string>({ className, column, getValue, row, table, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;

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

@@ -1,13 +1,18 @@
 import React from "react";
 import { COMPONENTS } from "../../../../../MarkdownRenderer/constants";
+import { getTokens, getTokensRegex, isRankedCell } from "../RankedCell/utils";
 import { StyledMarkdownRenderer } from "./markdownCell.styles";
-export const MarkdownCell = ({ className, column, getValue, }) => {
-    const props = getValue();
-    if (!props)
+export const MarkdownCell = ({ className, column, getValue, row, table, }) => {
+    const value = getValue();
+    if (!value)
         return null;
-    const { values } = props;
+    // Get column metadata (components to be rendered in MarkdownRenderer).
     const columnDef = column?.columnDef;
     const columnMeta = columnDef?.meta;
     const components = columnMeta?.components;
-    return (React.createElement(StyledMarkdownRenderer, { className: className, components: { ...COMPONENTS, ...components }, value: values }));
+    // 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 (React.createElement(StyledMarkdownRenderer, { className: className, components: { ...COMPONENTS, ...components }, regex: regex, value: value }));
 };

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

@@ -1,10 +1,12 @@
 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`. |',
-    })),
+    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: "" }) },
 };
 export const WITH_HTML_ARGS = {
-    getValue: (() => ({
-        values: "Hello <br />World <a href='https://www.example.com'>example link</a>",
-    })),
+    column: { id: "description" },
+    getValue: () => "Hello <br />World <a href='https://www.example.com'>example link</a>",
+    row: { columnFiltersMeta: { description: { passed: false } } },
+    table: { getState: () => ({ globalFilter: "" }) },
 };

package/lib/components/Table/components/TableCell/components/RankedCell/utils.d.ts

@@ -1,13 +1,4 @@
 import { Row, RowData, Table } from "@tanstack/react-table";
-/**
- * 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 declare function renderRankedCell<T extends RowData>(table: Table<T>, row: Row<T>, columnId: string, value: string | undefined | null): string;
 /**
  * Returns the current global filter tokens from the table.
  * @param table - Table.

package/lib/components/Table/components/TableCell/components/RankedCell/utils.js

@@ -1,32 +1,5 @@
 import { escapeRegExp } from "../../../../../../common/utils";
 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(table, row, columnId, value) {
-    // 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.

package/lib/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.js

@@ -4,5 +4,10 @@ import { CheckedIcon } from "../../../../../common/CustomIcon/components/Checked
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 export const RowSelectionCell = ({ row, }) => {
     const { getIsSelected, getToggleSelectedHandler } = row;
-    return (React.createElement(MCheckbox, { checked: getIsSelected(), checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null), onChange: getToggleSelectedHandler() }));
+    return (React.createElement(MCheckbox, { checked: getIsSelected(), checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null), 
+        /*
+         * Prevents click events from bubbling up to parent components
+         * (such as CardActionArea or Accordion) when the checkbox is activated.
+         */
+        onClick: (e) => e.stopPropagation(), onChange: getToggleSelectedHandler() }));
 };

package/lib/components/Table/components/TableFeatures/RowExpanding/utils.d.ts

@@ -0,0 +1,10 @@
+import { Row, RowData } from "@tanstack/react-table";
+/**
+ * Handles toggling the expanded state of a row.
+ * Rows can not be expanded if:
+ * - the row can not be expanded.
+ * - the row is grouped (expanded rows are not supported on grouped rows).
+ * - the user is selecting text.
+ * @param row - Row.
+ */
+export declare function handleToggleExpanded<T extends RowData>(row: Row<T>): void;

package/lib/components/Table/components/TableFeatures/RowExpanding/utils.js

@@ -0,0 +1,22 @@
+/**
+ * Handles toggling the expanded state of a row.
+ * Rows can not be expanded if:
+ * - the row can not be expanded.
+ * - the row is grouped (expanded rows are not supported on grouped rows).
+ * - the user is selecting text.
+ * @param row - Row.
+ */
+export function handleToggleExpanded(row) {
+    const { getCanExpand, getIsGrouped, toggleExpanded } = row;
+    // Row can not be expanded.
+    if (!getCanExpand())
+        return;
+    // Row is grouped - row expansion not supported on a grouped row.
+    if (getIsGrouped())
+        return;
+    // User is selecting text - do not toggle row expanded state.
+    if (window.getSelection()?.toString())
+        return;
+    // Toggle row expanded state.
+    toggleExpanded();
+}

package/lib/components/Table/components/TableRow/tableRow.styles.d.ts

@@ -1,4 +1,6 @@
 export interface StyledTableRowProps {
+    canExpand?: boolean;
+    isExpanded?: boolean;
     isGrouped?: boolean;
     isPreview?: boolean;
 }

package/lib/components/Table/components/TableRow/tableRow.styles.js

@@ -1,17 +1,20 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { TableRow as MTableRow } from "@mui/material";
-import { primaryLightest, smokeLightest, } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { textBodySmall500 } from "../../../../styles/common/mixins/fonts";
 export const StyledTableRow = styled(MTableRow, {
-    shouldForwardProp: (prop) => prop !== "isPreview" && prop !== "isGrouped",
+    shouldForwardProp: (prop) => prop !== "canExpand" &&
+        prop !== "isExpanded" &&
+        prop !== "isPreview" &&
+        prop !== "isGrouped",
 }) `
   && {
     transition: background-color 300ms ease-in;
 
     ${(props) => props.isGrouped &&
     css `
-        background-color: ${smokeLightest(props)};
+        background-color: ${PALETTE.SMOKE_LIGHTEST};
 
         td {
           ${textBodySmall500(props)};
@@ -20,9 +23,24 @@ export const StyledTableRow = styled(MTableRow, {
         }
       `}
 
-    ${(props) => props.isPreview &&
+    ${({ canExpand, isExpanded, isGrouped }) => !isGrouped &&
+    canExpand &&
     css `
-        background-color: ${primaryLightest(props)};
+        cursor: pointer;
+
+        &:hover {
+          background-color: #f8fbfd;
+        }
+
+        ${isExpanded &&
+        css `
+          background-color: #f8fbfd;
+        `}
+      `}
+
+    ${({ isPreview }) => isPreview &&
+    css `
+        background-color: ${PALETTE.PRIMARY_LIGHTEST};
       `}
   }
 `;

package/lib/components/Table/components/TableRows/tableRows.js

@@ -3,14 +3,15 @@ import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { getTableCellAlign, getTableCellPadding, } from "../TableCell/common/utils";
+import { handleToggleExpanded } from "../TableFeatures/RowExpanding/utils";
 import { StyledTableRow } from "../TableRow/tableRow.styles";
 export const TableRows = ({ rows, virtualizer, }) => {
     const virtualItems = virtualizer.getVirtualItems();
     return (React.createElement(Fragment, null, virtualItems.map((virtualRow) => {
         const rowIndex = virtualRow.index;
         const row = rows[rowIndex];
-        const { getIsGrouped, getIsPreview } = row;
-        return (React.createElement(StyledTableRow, { key: row.id, "data-index": rowIndex, isGrouped: getIsGrouped(), isPreview: getIsPreview(), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell, i) => {
+        const { getCanExpand, getIsExpanded, getIsGrouped, getIsPreview } = row;
+        return (React.createElement(StyledTableRow, { key: row.id, canExpand: getCanExpand(), "data-index": rowIndex, isExpanded: getIsExpanded(), isGrouped: getIsGrouped(), isPreview: getIsPreview(), onClick: () => handleToggleExpanded(row), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell, i) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "38.2.0",
+  "version": "39.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/DataDictionary/components/Table/options/expanded/constants.ts

@@ -6,8 +6,9 @@ import {
 
 export const EXPANDED_OPTIONS: Pick<
   ExpandedOptions<RowData>,
-  "enableExpanding" | "getExpandedRowModel"
+  "enableExpanding" | "getExpandedRowModel" | "getRowCanExpand"
 > = {
   enableExpanding: true,
   getExpandedRowModel: getExpandedRowModel(),
+  getRowCanExpand: () => true,
 };

package/src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -5,6 +5,7 @@ import {
   getTableCellAlign,
   getTableCellPadding,
 } from "../../../../../Table/components/TableCell/common/utils";
+import { handleToggleExpanded } from "../../../../../Table/components/TableFeatures/RowExpanding/utils";
 import { StyledTableRow } from "../../../../../Table/components/TableRow/tableRow.styles";
 import { TableView } from "../../table";
 
@@ -34,8 +35,11 @@ export const TableRows = <T extends RowData>({
         return (
           <StyledTableRow
             key={row.id}
+            canExpand={row.getCanExpand()}
+            isExpanded={row.getIsExpanded()}
             isGrouped={row.getIsGrouped()}
             isPreview={row.getIsPreview()}
+            onClick={() => handleToggleExpanded(row)}
           >
             {row.getVisibleCells().map((cell) => {
               if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.

package/src/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.tsx

@@ -46,12 +46,12 @@ export const ExploreViewLink = ({
     <Link
       className={className}
       href={url.href}
-      onClick={(): void => {
+      onClick={(e): void => {
         exploreDispatch({
           payload: { entityListType, filters, grouping, sorting },
           type: ExploreActionKind.UpdateEntityFilters,
         });
-        onClick?.();
+        onClick?.(e);
       }}
       rel={REL_ATTRIBUTE.NO_OPENER}
       target={target}

package/src/components/Links/components/Link/link.tsx

@@ -22,7 +22,6 @@ export interface LinkProps
     Omit<MLinkProps, "children" | "component"> {
   copyable?: boolean;
   label: ReactNode /* link label may be an element */;
-  onClick?: () => void;
   target?: ANCHOR_TARGET;
   TypographyProps?: TypographyProps;
   url: Url /* url specified as UrlObject with href and query defined, and is currently only used for internal links */;

package/src/components/MarkdownRenderer/components/Anchor/anchor.tsx

@@ -28,6 +28,11 @@ export const Anchor = (
     <Link
       className={props.className}
       label={props.children}
+      /*
+       * Prevents click events from bubbling up to parent components
+       * (such as CardActionArea or Accordion) when the link is activated.
+       */
+      onClick={(e) => e.stopPropagation()}
       url={props.href || ""}
     />
   );

package/src/components/MarkdownRenderer/markdownRenderer.tsx

@@ -1,5 +1,11 @@
 import { Typography } from "@mui/material";
-import React, { Fragment, createElement, useEffect, useState } from "react";
+import React, {
+  Fragment,
+  createElement,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import rehypeRaw from "rehype-raw";
 import rehypeReact from "rehype-react";
 import rehypeSanitize from "rehype-sanitize";
@@ -10,6 +16,7 @@ import { unified } from "unified";
 import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
 import { COMPONENTS } from "./constants";
 import { StyledContainer } from "./markdownRenderer.styles";
+import { rehypeHighlight } from "./rehypeHighlight";
 import { MarkdownRendererComponents, MarkdownRendererProps } from "./types";
 
 /**
@@ -28,11 +35,13 @@ import { MarkdownRendererComponents, MarkdownRendererProps } from "./types";
 export const MarkdownRenderer = ({
   className,
   components: componentOptions = COMPONENTS,
+  regex: markdownRegex,
   value,
 }: MarkdownRendererProps): JSX.Element => {
   const [element, setElement] = useState<JSX.Element | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [components] = useState<MarkdownRendererComponents>(componentOptions);
+  const regex = useMemo(() => markdownRegex, [markdownRegex]);
 
   useEffect(() => {
     let cancelled = false;
@@ -44,6 +53,7 @@ export const MarkdownRenderer = ({
       .use(remarkRehype, { allowDangerousHtml: true })
       .use(rehypeRaw)
       .use(rehypeSanitize)
+      .use(rehypeHighlight, { regex })
       .use(rehypeReact, { Fragment, components, createElement });
 
     processor
@@ -58,7 +68,7 @@ export const MarkdownRenderer = ({
     return (): void => {
       cancelled = true;
     };
-  }, [components, value]);
+  }, [components, regex, value]);
 
   if (error)
     return (

package/src/components/MarkdownRenderer/rehypeHighlight.ts

@@ -0,0 +1,54 @@
+import { Element, Root, Text } from "hast";
+import { visit } from "unist-util-visit";
+
+/**
+ * Custom rehype plugin to highlight markdown from given regex.
+ * @param options - Options.
+ * @param options.regex - Regex to match.
+ * @returns A rehype plugin.
+ */
+// eslint-disable-next-line sonarjs/cognitive-complexity -- ignoring for readability
+export function rehypeHighlight(options: { regex: RegExp | undefined }) {
+  const { regex } = options;
+
+  if (!regex) return (): void => {};
+
+  return (tree: Root): void => {
+    visit(tree, "text", (node, index, parent) => {
+      if (!parent) return;
+      if (typeof index !== "number") return;
+
+      // Avoid double marking, breaking scripts, and breaking styles.
+      if (
+        "tagName" in parent &&
+        ["mark", "script", "style"].includes(parent.tagName)
+      ) {
+        return;
+      }
+
+      const parts = node.value.split(regex);
+      if (parts.length === 1) return; // No text to highlight.
+
+      const newNodes: (Element | Text)[] = [];
+
+      parts.forEach((part, i) => {
+        if (!part) return; // Skip empties.
+        if (i % 2) {
+          // Captured text.
+          newNodes.push({
+            children: [{ type: "text", value: part }],
+            properties: {},
+            tagName: "mark",
+            type: "element",
+          });
+        } else {
+          // Normal text.
+          newNodes.push({ type: "text", value: part });
+        }
+      });
+
+      // Replace the original text node with the new nodes.
+      parent.children.splice(index, 1, ...newNodes);
+    });
+  };
+}

package/src/components/MarkdownRenderer/stories/args.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from "react";
+import { MarkdownRenderer } from "../markdownRenderer";
+
+export const DEFAULT_ARGS: ComponentProps<typeof MarkdownRenderer> = {
+  regex: /(UBERON|955)/gi,
+  value:
+    '| 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`. |',
+};

package/src/components/MarkdownRenderer/stories/markdownRenderer.stories.tsx

@@ -0,0 +1,33 @@
+import { Box } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { PALETTE } from "../../../styles/common/constants/palette";
+import { MarkdownRenderer } from "../markdownRenderer";
+import { DEFAULT_ARGS } from "./args";
+
+const meta: Meta<typeof MarkdownRenderer> = {
+  component: MarkdownRenderer,
+  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,
+};

package/src/components/MarkdownRenderer/types.ts

@@ -6,5 +6,6 @@ export type MarkdownRendererComponents = Record<string, ComponentType<any>>;
 
 export interface MarkdownRendererProps extends BaseComponentProps {
   components?: MarkdownRendererComponents;
+  regex?: RegExp;
   value: string;
 }

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

@@ -8,11 +8,14 @@ import { RANK_ITEM_OPTIONS } from "./constants";
  * @returns Array of terms.
  */
 export function parseSearchTerms(value: unknown): string[] {
-  return String(value ?? "")
+  const terms = String(value ?? "")
     .toLowerCase()
     .trim()
     .split(/\s+/)
-    .filter(Boolean);
+    .filter(Boolean)
+    .sort((a, b) => b.length - a.length);
+  const termsSet = new Set(terms);
+  return [...termsSet];
 }
 
 /**
@@ -54,8 +57,6 @@ export function rankRowColumns<T extends RowData>(
   columnId: string,
   terms: string[]
 ): void {
-  const columnFiltersMeta = row.columnFiltersMeta;
-
   // Process other columns.
   for (const { column } of row.getAllCells()) {
     // Column is not searchable.
@@ -63,7 +64,6 @@ export function rankRowColumns<T extends RowData>(
 
     // 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);

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

@@ -53,6 +53,11 @@ export const LinkCell = <
       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}

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

@@ -2,28 +2,38 @@ import { CellContext, RowData } from "@tanstack/react-table";
 import { BaseComponentProps } from "components/types";
 import React from "react";
 import { COMPONENTS } from "../../../../../MarkdownRenderer/constants";
+import { getTokens, getTokensRegex, isRankedCell } from "../RankedCell/utils";
 import { StyledMarkdownRenderer } from "./markdownCell.styles";
-import { MarkdownCellProps } from "./types";
 
 export const MarkdownCell = <
   T extends RowData,
-  TValue extends MarkdownCellProps = MarkdownCellProps
+  TValue extends string = string
 >({
   className,
   column,
   getValue,
+  row,
+  table,
 }: BaseComponentProps & CellContext<T, TValue>): JSX.Element | null => {
-  const props = getValue();
-  if (!props) return null;
-  const { values } = props;
+  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 }}
-      value={values}
+      regex={regex}
+      value={value}
     />
   );
 };

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

@@ -1,17 +1,18 @@
 import { ComponentProps } from "react";
 import { MarkdownCell } from "../markdownCell";
-import { GetValue } from "./types";
 
-export const DEFAULT_ARGS: Partial<ComponentProps<typeof MarkdownCell>> = {
-  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`. |',
-  })) as GetValue,
-};
+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: Partial<ComponentProps<typeof MarkdownCell>> = {
-  getValue: (() => ({
-    values:
-      "Hello <br />World <a href='https://www.example.com'>example link</a>",
-  })) as GetValue,
-};
+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/RankedCell/utils.ts

@@ -3,43 +3,6 @@ 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.

package/src/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.tsx

@@ -13,6 +13,11 @@ export const RowSelectionCell = <T extends RowData, TValue = unknown>({
       checked={getIsSelected()}
       checkedIcon={<CheckedIcon />}
       icon={<UncheckedIcon />}
+      /*
+       * Prevents click events from bubbling up to parent components
+       * (such as CardActionArea or Accordion) when the checkbox is activated.
+       */
+      onClick={(e) => e.stopPropagation()}
       onChange={getToggleSelectedHandler()}
     />
   );

package/src/components/Table/components/TableFeatures/RowExpanding/utils.ts

@@ -0,0 +1,25 @@
+import { Row, RowData } from "@tanstack/react-table";
+
+/**
+ * Handles toggling the expanded state of a row.
+ * Rows can not be expanded if:
+ * - the row can not be expanded.
+ * - the row is grouped (expanded rows are not supported on grouped rows).
+ * - the user is selecting text.
+ * @param row - Row.
+ */
+export function handleToggleExpanded<T extends RowData>(row: Row<T>): void {
+  const { getCanExpand, getIsGrouped, toggleExpanded } = row;
+
+  // Row can not be expanded.
+  if (!getCanExpand()) return;
+
+  // Row is grouped - row expansion not supported on a grouped row.
+  if (getIsGrouped()) return;
+
+  // User is selecting text - do not toggle row expanded state.
+  if (window.getSelection()?.toString()) return;
+
+  // Toggle row expanded state.
+  toggleExpanded();
+}

package/src/components/Table/components/TableRow/tableRow.styles.ts

@@ -1,19 +1,22 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { TableRow as MTableRow } from "@mui/material";
-import {
-  primaryLightest,
-  smokeLightest,
-} from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { textBodySmall500 } from "../../../../styles/common/mixins/fonts";
 
 export interface StyledTableRowProps {
+  canExpand?: boolean;
+  isExpanded?: boolean;
   isGrouped?: boolean;
   isPreview?: boolean;
 }
 
 export const StyledTableRow = styled(MTableRow, {
-  shouldForwardProp: (prop) => prop !== "isPreview" && prop !== "isGrouped",
+  shouldForwardProp: (prop) =>
+    prop !== "canExpand" &&
+    prop !== "isExpanded" &&
+    prop !== "isPreview" &&
+    prop !== "isGrouped",
 })<StyledTableRowProps>`
   && {
     transition: background-color 300ms ease-in;
@@ -21,7 +24,7 @@ export const StyledTableRow = styled(MTableRow, {
     ${(props) =>
       props.isGrouped &&
       css`
-        background-color: ${smokeLightest(props)};
+        background-color: ${PALETTE.SMOKE_LIGHTEST};
 
         td {
           ${textBodySmall500(props)};
@@ -30,10 +33,26 @@ export const StyledTableRow = styled(MTableRow, {
         }
       `}
 
-    ${(props) =>
-      props.isPreview &&
+    ${({ canExpand, isExpanded, isGrouped }) =>
+      !isGrouped &&
+      canExpand &&
+      css`
+        cursor: pointer;
+
+        &:hover {
+          background-color: #f8fbfd;
+        }
+
+        ${isExpanded &&
+        css`
+          background-color: #f8fbfd;
+        `}
+      `}
+
+    ${({ isPreview }) =>
+      isPreview &&
       css`
-        background-color: ${primaryLightest(props)};
+        background-color: ${PALETTE.PRIMARY_LIGHTEST};
       `}
   }
 `;

package/src/components/Table/components/TableRows/tableRows.tsx

@@ -7,6 +7,7 @@ import {
   getTableCellAlign,
   getTableCellPadding,
 } from "../TableCell/common/utils";
+import { handleToggleExpanded } from "../TableFeatures/RowExpanding/utils";
 import { StyledTableRow } from "../TableRow/tableRow.styles";
 
 export interface TableRowsProps<T extends RowData> {
@@ -24,13 +25,16 @@ export const TableRows = <T extends RowData>({
       {virtualItems.map((virtualRow) => {
         const rowIndex = virtualRow.index;
         const row = rows[rowIndex] as Row<T>;
-        const { getIsGrouped, getIsPreview } = row;
+        const { getCanExpand, getIsExpanded, getIsGrouped, getIsPreview } = row;
         return (
           <StyledTableRow
             key={row.id}
+            canExpand={getCanExpand()}
             data-index={rowIndex}
+            isExpanded={getIsExpanded()}
             isGrouped={getIsGrouped()}
             isPreview={getIsPreview()}
+            onClick={() => handleToggleExpanded(row)}
             ref={virtualizer.measureElement}
           >
             {row.getVisibleCells().map((cell, i) => {

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

@@ -1,3 +0,0 @@
-import { CellContext, RowData } from "@tanstack/react-table";
-import { MarkdownCellProps } from "../types";
-export type GetValue = CellContext<RowData, MarkdownCellProps>["getValue"];

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

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

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

@@ -1,3 +0,0 @@
-export type MarkdownCellProps = {
-    values: string;
-};

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

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

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

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

package/src/components/Table/components/TableCell/components/MarkdownCell/types.ts

@@ -1,3 +0,0 @@
-export type MarkdownCellProps = {
-  values: string;
-};