@databiosphere/findable-ui 38.3.0 → 39.1.0

package/lib/hooks/useHtmlStyle/hook.js

@@ -0,0 +1,18 @@
+import { useLayoutEffect } from "react";
+export const useHtmlStyle = (property, value) => {
+    useLayoutEffect(() => {
+        // Get the HTML element.
+        const el = document.documentElement;
+        // Get the previous value.
+        const previousValue = el.style.getPropertyValue(property);
+        if (value !== null)
+            el.style.setProperty(property, value);
+        return () => {
+            // Restore or remove property value on the HTML element.
+            if (previousValue)
+                el.style.setProperty(property, previousValue);
+            else
+                el.style.removeProperty(property);
+        };
+    }, [property, value]);
+};

package/lib/hooks/useHtmlStyle/types.d.ts

@@ -0,0 +1,2 @@
+import type * as CSS from "csstype";
+export type CSSPropHyphen = keyof CSS.PropertiesHyphen;

package/package.json

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

package/src/components/DataDictionary/components/Entities/entities.tsx

@@ -8,7 +8,6 @@ import { GRID_PROPS, NO_RESULTS_PROPS } from "./constants";
 import { ClassesProps } from "./types";
 
 export const Entities = <T extends RowData = Attribute>({
-  spacing,
   table,
 }: ClassesProps<T>): JSX.Element => {
   const { getGroupedRowModel } = table;
@@ -20,7 +19,7 @@ export const Entities = <T extends RowData = Attribute>({
     <Grid {...GRID_PROPS}>
       {/* Render grouped rows where each "group" is a class e.g. "donor" */}
       {rows.map((row) => (
-        <Entity key={row.id} row={row} spacing={spacing} table={table} />
+        <Entity key={row.id} row={row} table={table} />
       ))}
     </Grid>
   );

package/src/components/DataDictionary/components/Entities/types.ts

@@ -1,8 +1,6 @@
 import { RowData, Table } from "@tanstack/react-table";
 import { Attribute } from "../../../../common/entities";
-import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
 
 export interface ClassesProps<T extends RowData = Attribute> {
-  spacing?: LayoutSpacing;
   table: Table<T>;
 }

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

@@ -1,10 +1,7 @@
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
-import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
-
-export const StyledTypography = styled(Typography)<Partial<LayoutSpacing>>`
-  scroll-margin-top: ${({ top = 0 }) => top}px;
 
+export const StyledTypography = styled(Typography)`
   &:hover a {
     opacity: 1;
   }

package/src/components/DataDictionary/components/Entity/entity.tsx

@@ -12,7 +12,6 @@ import { getClassMeta } from "./utils";
 
 export const Entity = <T extends RowData = Attribute>({
   row,
-  spacing,
   table,
 }: EntityProps<T>): JSX.Element | null => {
   // Get class key from row.
@@ -32,17 +31,18 @@ export const Entity = <T extends RowData = Attribute>({
           component="h3"
           id={classKey}
           variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL}
-          {...spacing}
         >
           {cls.title} <AnchorLink anchorLink={classKey} />
         </StyledTypography>
-        <Typography
-          color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-          component="div"
-          variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES}
-        >
-          {cls.description}
-        </Typography>
+        {cls.description && (
+          <Typography
+            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+            component="div"
+            variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES}
+          >
+            {cls.description}
+          </Typography>
+        )}
       </Grid>
       {/* Class attributes table */}
       <Table row={row} table={table} />

package/src/components/DataDictionary/components/Entity/types.ts

@@ -1,9 +1,7 @@
 import { Row, RowData, Table } from "@tanstack/react-table";
 import { Attribute } from "../../../../common/entities";
-import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
 
 export interface EntityProps<T extends RowData = Attribute> {
   row: Row<T>;
-  spacing?: LayoutSpacing;
   table: Table<T>;
 }

package/src/components/DataDictionary/components/Table/table.styles.ts

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
+
+export const StyledRoundedPaper = styled(RoundedPaper)`
+  background-color: ${PALETTE.SMOKE_MAIN};
+  display: grid;
+  gap: 1px;
+`;

package/src/components/DataDictionary/components/Table/table.tsx

@@ -6,8 +6,7 @@ import { ROW_DIRECTION } from "../../../Table/common/entities";
 import { TableHead } from "../../../Table/components/TableHead/tableHead";
 import { GridTable } from "../../../Table/table.styles";
 import { getColumnTrackSizing } from "../../../TableCreator/options/columnTrackSizing/utils";
-import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
-import { GridPaper } from "../../../common/Paper/paper.styles";
+import { StyledRoundedPaper } from "./table.styles";
 import { TableProps } from "./types";
 
 export const Table = <T extends RowData>({
@@ -15,23 +14,21 @@ export const Table = <T extends RowData>({
   table,
 }: TableProps<T>): JSX.Element => {
   return (
-    <RoundedPaper elevation={0}>
-      <GridPaper>
-        <TableContainer>
-          <GridTable
-            gridTemplateColumns={getColumnTrackSizing(
-              table.getVisibleFlatColumns()
-            )}
-          >
-            <TableHead tableInstance={table} />
-            <TableBody
-              rowDirection={ROW_DIRECTION.DEFAULT}
-              rows={row.getLeafRows()}
-              tableInstance={table}
-            />
-          </GridTable>
-        </TableContainer>
-      </GridPaper>
-    </RoundedPaper>
+    <StyledRoundedPaper elevation={0}>
+      <TableContainer>
+        <GridTable
+          gridTemplateColumns={getColumnTrackSizing(
+            table.getVisibleFlatColumns()
+          )}
+        >
+          <TableHead tableInstance={table} />
+          <TableBody
+            rowDirection={ROW_DIRECTION.DEFAULT}
+            rows={row.getLeafRows()}
+            tableInstance={table}
+          />
+        </GridTable>
+      </TableContainer>
+    </StyledRoundedPaper>
   );
 };

package/src/components/DataDictionary/dataDictionary.tsx

@@ -2,6 +2,8 @@ import { Fade } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { Attribute } from "../../common/entities";
+import { PROPERTY } from "../../hooks/useHtmlStyle/constants";
+import { useHtmlStyle } from "../../hooks/useHtmlStyle/hook";
 import { useLayoutSpacing } from "../../hooks/UseLayoutSpacing/hook";
 import { Description } from "./components/Description/description";
 import { Entities } from "./components/Entities/entities";
@@ -48,6 +50,10 @@ export const DataDictionary = <T extends RowData = Attribute>({
   // Dictionary outline.
   const outline = buildClassesOutline<T>(table);
 
+  // Update scroll-padding-top on the HTML element.
+  // Scroll-snaps table rows to below the sticky filters.
+  useHtmlStyle(PROPERTY.SCROLL_PADDING_TOP, `${dimensions.height}px`);
+
   return (
     <Fade in={spacing.top > 0}>
       {/* Fade in when header is measured. */}
@@ -66,7 +72,7 @@ export const DataDictionary = <T extends RowData = Attribute>({
           {/* Fade in entities when filters are measured. */}
           <EntitiesLayout spacing={entitiesSpacing}>
             <Description description={description} />
-            <Entities spacing={entitiesSpacing} table={table} />
+            <Entities table={table} />
           </EntitiesLayout>
         </Fade>
       </View>

package/src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -27,7 +27,11 @@ export const CollapsableRows = <T extends RowData>({
       {(leafOrSubRows || rows).map((row) => {
         if (row.depth > 0) return null; // Hide sub rows.
         return (
-          <StyledTableRow key={row.id} isPreview={row.getIsPreview()}>
+          <StyledTableRow
+            key={row.id}
+            id={row.id}
+            isPreview={row.getIsPreview()}
+          >
             <CollapsableCell
               isDisabled={isCollapsableRowDisabled(tableInstance)}
               row={row}

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

@@ -35,6 +35,7 @@ export const TableRows = <T extends RowData>({
         return (
           <StyledTableRow
             key={row.id}
+            id={row.id}
             canExpand={row.getCanExpand()}
             isExpanded={row.getIsExpanded()}
             isGrouped={row.getIsGrouped()}

package/src/components/Index/index.styles.ts

@@ -5,7 +5,9 @@ import { PALETTE } from "../../styles/common/constants/palette";
 import { mediaTabletDown } from "../../styles/common/mixins/breakpoints";
 import { FluidPaper } from "../common/Paper/components/FluidPaper/fluidPaper";
 
-export const StyledGridEntityView = styled(Grid)<LayoutSpacing>`
+export const StyledGridEntityView = styled(Grid, {
+  shouldForwardProp: (prop) => prop !== "bottom" && prop !== "top",
+})<LayoutSpacing>`
   align-content: flex-start;
   display: grid;
   flex: 1;

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/MarkdownCell/markdownCell.tsx

@@ -1,29 +1,39 @@
 import { CellContext, RowData } from "@tanstack/react-table";
-import { BaseComponentProps } from "components/types";
 import React from "react";
 import { COMPONENTS } from "../../../../../MarkdownRenderer/constants";
+import { BaseComponentProps } from "../../../../../types";
+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/rankedCell.tsx

@@ -1,18 +1,22 @@
 import { CellContext, RowData } from "@tanstack/react-table";
 import React, { Fragment } from "react";
-import { BaseComponentProps } from "../../../../../types";
+import { BaseComponentProps, ChildrenProps } from "../../../../../types";
 import { getTokens, getTokensRegex, isRankedCell } from "./utils";
 
 export const RankedCell = <
   T extends RowData,
   TValue = string | undefined | null
 >({
+  /* children - e.g. AnchorLink component */
+  children,
   className,
   column,
   getValue,
   row,
   table,
-}: BaseComponentProps & CellContext<T, TValue>): JSX.Element | null => {
+}: BaseComponentProps &
+  CellContext<T, TValue> &
+  ChildrenProps): JSX.Element | null => {
   // Get the cell value.
   const value = getValue();
 
@@ -26,13 +30,25 @@ export const RankedCell = <
   const isRanked = isRankedCell(table, row, column.id);
 
   // Return the unranked cell, as-is.
-  if (!isRanked) return <Fragment>{stringValue}</Fragment>;
+  if (!isRanked)
+    return (
+      <Fragment>
+        {stringValue}
+        {children}
+      </Fragment>
+    );
 
   // Tokenise the current global filter.
   const tokens = getTokens(table);
 
   // If there are no tokens, return the value as-is.
-  if (tokens.length === 0) return <Fragment>{stringValue}</Fragment>;
+  if (tokens.length === 0)
+    return (
+      <Fragment>
+        {stringValue}
+        {children}
+      </Fragment>
+    );
 
   // Create regex pattern.
   const regex = getTokensRegex(tokens);
@@ -45,6 +61,7 @@ export const RankedCell = <
           {part.match(regex) ? <mark>{part}</mark> : part}
         </Fragment>
       ))}
+      {children}
     </span>
   );
 };

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/common/AnchorLink/anchorLink.styles.ts

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
 import Link from "next/link";
-import { inkLight } from "../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../styles/common/constants/palette";
 
 export const StyledNextLink = styled(Link)`
-  color: ${inkLight};
+  color: ${PALETTE.INK_LIGHT};
   margin-left: 4px;
   opacity: 0;
   position: absolute;