@databiosphere/findable-ui 29.0.2 → 31.0.0

package/src/components/Filter/components/Filters/stories/args.ts

@@ -0,0 +1,24 @@
+import { fn } from "@storybook/test";
+import { ComponentProps } from "react";
+import { Filters } from "../filters";
+import {
+  BIOLOGICAL_SEX,
+  DONOR_COUNT,
+  FILE_FORMAT,
+  FILE_TYPE,
+  GENUS_SPECIES,
+} from "./constants";
+
+export const DEFAULT_ARGS: ComponentProps<typeof Filters> = {
+  categoryFilters: [
+    {
+      categoryViews: [BIOLOGICAL_SEX, GENUS_SPECIES, DONOR_COUNT],
+      label: "Donor",
+    },
+    {
+      categoryViews: [FILE_FORMAT, FILE_TYPE],
+      label: "File",
+    },
+  ],
+  onFilter: fn(),
+};

package/src/components/Filter/components/Filters/stories/constants.ts

@@ -0,0 +1,151 @@
+import { RangeCategoryView } from "../../../../../common/categories/views/range/types";
+import { SelectCategoryView } from "../../../../../common/entities";
+
+/**
+ * Biological Sex
+ */
+const MALE = {
+  count: 14,
+  key: "male",
+  label: "Male",
+  selected: false,
+};
+
+/**
+ * Biological Sex
+ */
+const FEMALE = {
+  count: 12,
+  key: "female",
+  label: "Female",
+  selected: false,
+};
+
+/**
+ * Genus Species
+ */
+const HOMO_SAPIENS = {
+  count: 471,
+  key: "Homo sapiens",
+  label: "Homo sapiens",
+  selected: false,
+};
+
+/**
+ * Genus Species
+ */
+const MUS_MUSCLES = {
+  count: 55,
+  key: "Mus musculus",
+  label: "Mus musculus",
+  selected: false,
+};
+
+/**
+ * File Format
+ */
+const BAM = {
+  count: 7,
+  key: "bam",
+  label: "bam",
+  selected: false,
+};
+
+/**
+ * File Format
+ */
+const CSV = {
+  count: 5,
+  key: "csv",
+  label: "csv",
+  selected: false,
+};
+
+/**
+ * File Format
+ */
+const FASTQ = {
+  count: 38,
+  key: "fastq",
+  label: "fastq",
+  selected: false,
+};
+
+/**
+ * File Format
+ */
+const TSV = {
+  count: 3,
+  key: "tsv",
+  label: "tsv",
+  selected: false,
+};
+
+/**
+ * File Type
+ */
+const RAW = {
+  count: 1,
+  key: "raw",
+  label: "raw",
+  selected: false,
+};
+
+/**
+ * File Type
+ */
+const PROCESSED = {
+  count: 1,
+  key: "processed",
+  label: "processed",
+  selected: false,
+};
+
+/**
+ * Biological Sex select category view
+ */
+export const BIOLOGICAL_SEX: SelectCategoryView = {
+  key: "biologicalSex",
+  label: "Biological Sex",
+  values: [MALE, FEMALE],
+};
+
+/**
+ * Genus Species select category view
+ */
+export const GENUS_SPECIES: SelectCategoryView = {
+  key: "genusSpecies",
+  label: "Genus Species",
+  values: [HOMO_SAPIENS, MUS_MUSCLES],
+};
+
+/**
+ * Donor Count range category view
+ */
+export const DONOR_COUNT: RangeCategoryView = {
+  key: "Donor Count",
+  label: "Donor Count",
+  max: 200,
+  min: 10,
+  selectedMax: null,
+  selectedMin: null,
+};
+
+/**
+ * File Format select category view
+ */
+export const FILE_FORMAT: SelectCategoryView = {
+  key: "fileFormat",
+  label: "File Format",
+  values: [BAM, CSV, FASTQ, TSV],
+};
+
+/**
+ * File Type select category view
+ */
+export const FILE_TYPE: SelectCategoryView = {
+  isDisabled: true,
+  key: "fileType",
+  label: "File Type",
+  values: [RAW, PROCESSED],
+};

package/src/components/Filter/components/Filters/stories/filters.stories.tsx

@@ -0,0 +1,24 @@
+import { Box } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Filters } from "../filters";
+import { DEFAULT_ARGS } from "./args";
+
+const meta: Meta<typeof Filters> = {
+  component: Filters,
+  decorators: [
+    (Story): JSX.Element => (
+      <Box sx={{ width: 264 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Filters>;
+
+export const Default: Story = {
+  args: DEFAULT_ARGS,
+};

package/src/components/Filter/components/SearchAllFilters/components/VariableSizeList/VariableSizeList.tsx

@@ -46,12 +46,12 @@ export type ItemSizeByItemKey = Map<string, number>;
 
 export interface VariableSizeListProps {
   autocompleteListProps: Omit<MListProps, "children">;
-  categoryViews: SelectCategoryView[];
   height?: number; // Height of list; vertical list must be a number.
   itemSize?: number; // Default item size.
   onFilter: OnFilterFn;
   overscanCount?: ListProps["overscanCount"];
   searchTerm: string;
+  selectCategoryViews: SelectCategoryView[];
   width?: ListProps["width"]; // Width of list; default to 100% width of parent element.
 }
 
@@ -120,17 +120,17 @@ export const VariableSizeList = forwardRef<
 >(function VariableSizeList(
   {
     autocompleteListProps,
-    categoryViews,
     height: initHeight = MAX_LIST_HEIGHT_PX,
     itemSize = LIST_ITEM_HEIGHT,
     onFilter,
     overscanCount = MAX_DISPLAYABLE_LIST_ITEMS * 2,
     searchTerm,
+    selectCategoryViews,
     width = "100%",
   }: VariableSizeListProps,
   autocompleteListRef
 ): JSX.Element {
-  const filteredItems = applyMenuFilter(categoryViews, searchTerm);
+  const filteredItems = applyMenuFilter(selectCategoryViews, searchTerm);
   let resizeRequired = true;
   const desktopSmDown = useBreakpointHelper(
     BREAKPOINT_FN_NAME.DOWN,
@@ -223,40 +223,43 @@ export const VariableSizeList = forwardRef<
 
 /**
  * Filter categories' values by a search term and return model of list items
- * @param categoryViews - Select category views
+ * @param selectCategoryViews - Select category views
  * @param inputValue - Search term
  * @returns array of objects representing list items to be rendered
  */
 function applyMenuFilter(
-  categoryViews: SelectCategoryView[],
+  selectCategoryViews: SelectCategoryView[],
   inputValue: string
 ): SearchAllFiltersItem[] {
   const sortMatches = getSortMatchesFn(inputValue);
-  const filteredItems = categoryViews.reduce((filteredItems, category) => {
-    if (!category.isDisabled) {
-      const categoryValueKeyPrefix =
-        "value_" + category.key.replaceAll(";", ";;") + ";_"; // Terminating the category key with a semicolon (and escaping preceding semicolons) ensures a unique prefix
-      const filteredCategoryValues = sortMatches(category.values).map(
-        (match): ValueItem => ({
-          categoryKey: category.key,
-          key: categoryValueKeyPrefix + match.value.key,
-          matchRanges: match.labelRanges,
-          type: ITEM_TYPE.VALUE,
-          value: match.value,
-        })
-      );
-      if (filteredCategoryValues.length) {
-        if (filteredItems.length) filteredItems.push(DIVIDER_ITEM);
-        filteredItems.push({
-          categoryLabel: category.label,
-          key: "category_" + category.key,
-          type: ITEM_TYPE.CATEGORY,
-        });
-        filteredItems.push(...filteredCategoryValues);
+  const filteredItems = selectCategoryViews.reduce(
+    (filteredItems, category) => {
+      if (!category.isDisabled) {
+        const categoryValueKeyPrefix =
+          "value_" + category.key.replaceAll(";", ";;") + ";_"; // Terminating the category key with a semicolon (and escaping preceding semicolons) ensures a unique prefix
+        const filteredCategoryValues = sortMatches(category.values).map(
+          (match): ValueItem => ({
+            categoryKey: category.key,
+            key: categoryValueKeyPrefix + match.value.key,
+            matchRanges: match.labelRanges,
+            type: ITEM_TYPE.VALUE,
+            value: match.value,
+          })
+        );
+        if (filteredCategoryValues.length) {
+          if (filteredItems.length) filteredItems.push(DIVIDER_ITEM);
+          filteredItems.push({
+            categoryLabel: category.label,
+            key: "category_" + category.key,
+            type: ITEM_TYPE.CATEGORY,
+          });
+          filteredItems.push(...filteredCategoryValues);
+        }
       }
-    }
-    return filteredItems;
-  }, [] as SearchAllFiltersItem[]);
+      return filteredItems;
+    },
+    [] as SearchAllFiltersItem[]
+  );
   if (filteredItems.length === 0) filteredItems.push(NO_RESULTS_ITEM);
   return filteredItems;
 }

package/src/components/Filter/components/SearchAllFilters/components/VariableSizeListItem/variableSizeListItem.tsx

@@ -6,6 +6,7 @@ import {
   Typography,
 } from "@mui/material";
 import React, { useEffect, useRef } from "react";
+import { VIEW_KIND } from "../../../../../../common/categories/views/types";
 import { OnFilterFn } from "../../../../../../hooks/useCategoryFilter";
 import { TEST_IDS } from "../../../../../../tests/testIds";
 import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
@@ -54,7 +55,14 @@ export default function VariableSizeListItem({
         ref={setRef}
         key={key}
         onClick={(): void =>
-          onFilter(categoryKey, valueKey, !selected, undefined, searchTerm)
+          onFilter(
+            categoryKey,
+            valueKey,
+            !selected,
+            undefined,
+            VIEW_KIND.SELECT,
+            searchTerm
+          )
         }
         selected={selected}
         style={style}

package/src/components/Filter/components/SearchAllFilters/searchAllFilters.tsx

@@ -10,6 +10,8 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { isSelectCategoryView } from "../../../../common/categories/views/select/typeGuards";
+import { CategoryView } from "../../../../common/categories/views/types";
 import { SelectCategoryView } from "../../../../common/entities";
 import { SELECTOR } from "../../../../common/selectors";
 import {
@@ -29,18 +31,18 @@ import { VariableSizeList } from "./components/VariableSizeList/VariableSizeList
 import { Autocomplete } from "./searchAllFilters.styles";
 
 export interface SearchAllFiltersProps {
-  categoryViews: SelectCategoryView[];
+  categoryViews: CategoryView[];
   drawerOpen?: boolean;
   onFilter: OnFilterFn;
 }
 
 interface ListboxContextValue {
-  categoryViews: SelectCategoryView[];
   onClearSearch: () => void;
   onCloseSearch: () => void;
   onFilter: OnFilterFn;
   open: boolean;
   searchTerm: string;
+  selectCategoryViews: SelectCategoryView[];
 }
 
 const renderInput = (params: AutocompleteRenderInputParams): JSX.Element => (
@@ -48,12 +50,12 @@ const renderInput = (params: AutocompleteRenderInputParams): JSX.Element => (
 );
 
 export const ListboxContext = createContext<ListboxContextValue>({
-  categoryViews: [],
   onClearSearch: (): void => undefined,
   onCloseSearch: (): void => undefined,
   onFilter: (): void => undefined,
   open: false,
   searchTerm: "",
+  selectCategoryViews: [],
 });
 
 const Listbox = React.forwardRef<HTMLUListElement, MListProps>(function Listbox(
@@ -63,14 +65,15 @@ const Listbox = React.forwardRef<HTMLUListElement, MListProps>(function Listbox(
   props = Object.assign({}, props, {
     children: undefined, // Content is controlled by VariableSizeList
   });
-  const { categoryViews, onFilter, searchTerm } = useContext(ListboxContext);
+  const { onFilter, searchTerm, selectCategoryViews } =
+    useContext(ListboxContext);
   return (
     <VariableSizeList
       autocompleteListProps={props}
-      categoryViews={categoryViews}
       onFilter={onFilter}
       ref={ref}
       searchTerm={searchTerm}
+      selectCategoryViews={selectCategoryViews}
     />
   );
 });
@@ -84,6 +87,9 @@ export const SearchAllFilters = ({
   const autocompleteRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
+  const selectCategoryViews = categoryViews.filter((view) =>
+    isSelectCategoryView(view)
+  );
 
   // Handles background scroll action (desktop only).
   const handleBackgroundScroll = (overflowStyle: OVERFLOW_STYLE): void => {
@@ -145,12 +151,12 @@ export const SearchAllFilters = ({
   return (
     <ListboxContext.Provider
       value={{
-        categoryViews,
         onClearSearch,
         onCloseSearch,
         onFilter,
         open,
         searchTerm,
+        selectCategoryViews,
       }}
     >
       <Autocomplete

package/src/components/Filter/components/VariableSizeListItem/variableSizeListItem.tsx

@@ -5,6 +5,7 @@ import {
   Typography,
 } from "@mui/material";
 import React, { CSSProperties, useEffect, useRef } from "react";
+import { VIEW_KIND } from "../../../../common/categories/views/types";
 import { CategoryKey } from "../../../../common/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { SELECT_CATEGORY_KEY } from "../../../../providers/exploreState/constants";
@@ -45,7 +46,7 @@ export default function VariableSizeListItem({
   }, [key, onUpdateItemSizeByItemKey]);
 
   const handleItemClicked = (): void => {
-    onFilter(categoryKey, key, !selected, categorySection);
+    onFilter(categoryKey, key, !selected, categorySection, VIEW_KIND.SELECT);
   };
 
   return (

package/src/components/Index/components/EntitiesView/components/ChartView/utils.ts

@@ -1,3 +1,4 @@
+import { isSelectCategoryView } from "../../../../../../common/categories/views/select/typeGuards";
 import { SelectCategoryView } from "../../../../../../common/entities";
 import { CategoryFilter } from "../../../../../Filter/components/Filters/filters";
 
@@ -11,6 +12,7 @@ export function getSelectCategoryViews(
 ): SelectCategoryView[] {
   return categoryFilters
     .flatMap(({ categoryViews }) => categoryViews)
+    .filter(isSelectCategoryView)
     .filter(({ enableChartView = true }) => enableChartView)
     .filter(({ values }) => values.length > 0);
 }

package/src/components/Index/table/hook.ts

@@ -33,6 +33,7 @@ import {
   isClientFilteringEnabled,
   sortingFn,
 } from "../../Table/common/utils";
+import { getFacetedMinMaxValues } from "../../Table/featureOptions/facetedColumn/getFacetedMinMaxValues";
 import { ROW_POSITION } from "../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../Table/features/RowPreview/constants";
 import { RowPreviewState } from "../../Table/features/RowPreview/entities";
@@ -167,6 +168,9 @@ export const useTable = <T extends RowData>(): UseTable<T> => {
     enableMultiSort: clientFiltering, // TODO(cc) move to sorting options; default to false and let the table options in config flag this value.
     filterFns: { arrIncludesSome },
     getCoreRowModel: getCoreRowModel(),
+    getFacetedMinMaxValues: clientFiltering
+      ? getFacetedMinMaxValues()
+      : undefined,
     getFacetedRowModel: clientFiltering ? getFacetedRowModel() : undefined,
     getFacetedUniqueValues: clientFiltering
       ? getFacetedUniqueValuesWithArrayValues()

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

@@ -0,0 +1,34 @@
+import React, { AnchorHTMLAttributes, ClassAttributes } from "react";
+import { Link } from "../../../Links/components/Link/link";
+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 const Anchor = (
+  props: BaseComponentProps &
+    ClassAttributes<HTMLAnchorElement> &
+    AnchorHTMLAttributes<HTMLAnchorElement>
+): JSX.Element => {
+  return (
+    <Link
+      className={props.className}
+      label={props.children}
+      url={props.href || ""}
+    />
+  );
+};

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

@@ -0,0 +1,41 @@
+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/src/components/MarkdownRenderer/components/Table/table.tsx

@@ -0,0 +1,13 @@
+import { BaseComponentProps } from "components/types";
+import React, { ClassAttributes, TableHTMLAttributes } from "react";
+import { StyledTable } from "./table.styles";
+
+export const Table = (
+  props: BaseComponentProps &
+    ClassAttributes<HTMLTableElement> &
+    TableHTMLAttributes<HTMLTableElement>
+): JSX.Element => {
+  return (
+    <StyledTable className={props.className}>{props.children}</StyledTable>
+  );
+};

package/src/components/MarkdownRenderer/constants.ts

@@ -0,0 +1,8 @@
+import { Components } from "rehype-react";
+import { Anchor } from "./components/Anchor/anchor";
+import { Table } from "./components/Table/table";
+
+export const COMPONENTS: Partial<Components> = {
+  a: Anchor,
+  table: Table,
+};

package/src/components/MarkdownRenderer/markdownRenderer.styles.ts

@@ -0,0 +1,16 @@
+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/src/components/MarkdownRenderer/markdownRenderer.tsx

@@ -0,0 +1,62 @@
+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, { Components } 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";
+import { MarkdownRendererProps } from "./types";
+
+export const MarkdownRenderer = ({
+  className,
+  components = COMPONENTS,
+  value,
+}: MarkdownRendererProps): JSX.Element => {
+  const [element, setElement] = useState<JSX.Element | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [componentOptions] = useState<Partial<Components>>(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 (): void => {
+      cancelled = true;
+    };
+  }, [componentOptions, value]);
+
+  if (error)
+    return (
+      <Typography
+        color={TYPOGRAPHY_PROPS.COLOR.ERROR}
+        variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400}
+      >
+        {error}
+      </Typography>
+    );
+
+  return <StyledContainer className={className}>{element}</StyledContainer>;
+};

package/src/components/MarkdownRenderer/types.ts

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

package/src/components/Table/columnDef/accessorFn/typeGuards.ts

@@ -0,0 +1,15 @@
+import { RowData } from "@tanstack/react-table";
+
+/**
+ * Type guard to check if a row has a specific key.
+ * Useful for generic accessor functions.
+ * @param row - The row to check.
+ * @param key - The key to check.
+ * @returns True if the row has the specified key, false otherwise.
+ */
+export function rowHasKey<T extends RowData, K extends PropertyKey, TValue>(
+  row: T,
+  key: K
+): row is T & Record<K, TValue> {
+  return row != null && typeof row === "object" && key in row;
+}