@databiosphere/findable-ui 45.1.0 → 46.1.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "45.1.0"
+  ".": "46.1.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## [46.1.0](https://github.com/DataBiosphere/findable-ui/compare/v46.0.0...v46.1.0) (2025-11-03)
+
+
+### Features
+
+* update column filter adapter to render custom filter values ([#694](https://github.com/DataBiosphere/findable-ui/issues/694)) ([#695](https://github.com/DataBiosphere/findable-ui/issues/695)) ([67404e9](https://github.com/DataBiosphere/findable-ui/commit/67404e940ea7610153e8a756609cd402225fa0cc))
+
+
+### Bug Fixes
+
+* update column filter adapter to always show filter values with a zero count ([#696](https://github.com/DataBiosphere/findable-ui/issues/696)) ([#697](https://github.com/DataBiosphere/findable-ui/issues/697)) ([a693f3b](https://github.com/DataBiosphere/findable-ui/commit/a693f3bf4f84cacf5602bbbe134b7a4f611e36dc))
+
+## [46.0.0](https://github.com/DataBiosphere/findable-ui/compare/v45.1.0...v46.0.0) (2025-10-28)
+
+
+### ⚠ BREAKING CHANGES
+
+* add get static props helper function ([#691](https://github.com/DataBiosphere/findable-ui/issues/691)) (#692)
+* add helper functions remarkHeadings and rehypeSlug ([#684](https://github.com/DataBiosphere/findable-ui/issues/684)) (#685)
+* add get static paths helper function ([#688](https://github.com/DataBiosphere/findable-ui/issues/688)) (#693)
+
+### Features
+
+* add get static paths helper function ([#688](https://github.com/DataBiosphere/findable-ui/issues/688)) ([#693](https://github.com/DataBiosphere/findable-ui/issues/693)) ([887b1d8](https://github.com/DataBiosphere/findable-ui/commit/887b1d82770ce472957e03b483aeeacb06ab8fdd))
+* add get static props helper function ([#691](https://github.com/DataBiosphere/findable-ui/issues/691)) ([#692](https://github.com/DataBiosphere/findable-ui/issues/692)) ([71b2927](https://github.com/DataBiosphere/findable-ui/commit/71b2927059e5e55b6e03bda6dc87dad009533fe9))
+* add helper functions remarkHeadings and rehypeSlug ([#684](https://github.com/DataBiosphere/findable-ui/issues/684)) ([#685](https://github.com/DataBiosphere/findable-ui/issues/685)) ([b130b3c](https://github.com/DataBiosphere/findable-ui/commit/b130b3c4a2527566eadcdab174c937e95338a394))
+* update entity list summary component to optionally display summary label ([#679](https://github.com/DataBiosphere/findable-ui/issues/679)) ([#681](https://github.com/DataBiosphere/findable-ui/issues/681)) ([e57e366](https://github.com/DataBiosphere/findable-ui/commit/e57e3660d92e0c155f5cdb56dcd5769bfc0ca2b0))
+* update outline component prop 'outline' to be optional ([#686](https://github.com/DataBiosphere/findable-ui/issues/686)) ([#687](https://github.com/DataBiosphere/findable-ui/issues/687)) ([eaba690](https://github.com/DataBiosphere/findable-ui/commit/eaba690d4277e69e88f3a6cd11d558c9e27918e6))
+
+
+### Bug Fixes
+
+* reintstate file download button component ([#667](https://github.com/DataBiosphere/findable-ui/issues/667)) ([#678](https://github.com/DataBiosphere/findable-ui/issues/678)) ([aa538a3](https://github.com/DataBiosphere/findable-ui/commit/aa538a39f64b07e02f4bc512c51c25fb1234fb89))
+
+
+### Chores
+
+* upgrade packages (minor) and fix security warnings ([#671](https://github.com/DataBiosphere/findable-ui/issues/671)) ([#673](https://github.com/DataBiosphere/findable-ui/issues/673)) ([6b067d5](https://github.com/DataBiosphere/findable-ui/commit/6b067d5e189d72253e6b39551c1ab5d49aa8126a))
+
 ## [45.1.0](https://github.com/DataBiosphere/findable-ui/compare/v45.0.0...v45.1.0) (2025-09-18)
 
 

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/utils.js

@@ -1,6 +1,7 @@
 import { isRangeCategoryConfig } from "../../../../../../common/categories/config/range/typeGuards";
 import { FILTER_SORT } from "../../../../../../common/filters/sort/config/types";
 import { sortCategoryValueViews } from "../../../../../../common/filters/sort/models/utils";
+import { getSelectCategoryValue } from "../../../../../../hooks/useCategoryFilter";
 import { getColumnHeader } from "../../../../../Table/common/utils";
 /**
  * Adapter for TanStack table to category configs.
@@ -132,8 +133,16 @@ function mapColumnToRangeCategoryView(column, categoryConfig) {
  */
 function mapColumnToSelectCategoryView(column, filterSort, categoryConfig) {
     const facetedUniqueValues = column.getFacetedUniqueValues();
+    // Selected values for the column.
+    const filterValue = (column.getFilterValue() || []);
+    // Update faceted unique values with selected filters that are not in the faceted unique values.
+    for (const value of filterValue) {
+        if (facetedUniqueValues.has(value))
+            continue;
+        facetedUniqueValues.set(value, 0);
+    }
     const isDisabled = facetedUniqueValues.size === 0;
-    const values = mapColumnToSelectCategoryValueView(column, filterSort);
+    const values = mapColumnToSelectCategoryValueView(column, filterSort).map(categoryConfig?.mapSelectCategoryValue || getSelectCategoryValue);
     return {
         annotation: undefined,
         enableChartView: false,

package/lib/components/Index/components/EntityView/components/layout/Summary/summary.js

@@ -12,5 +12,5 @@ export const Summary = ({ className, }) => {
     return (React.createElement(StyledGrid, { ...GRID_PROPS, className: className, "data-testid": TEST_IDS.ENTITY_SUMMARY }, summaries.map(([count, label], i) => (React.createElement(Fragment, { key: i },
         i !== 0 && React.createElement(StyledDot, null),
         React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500 }, count),
-        React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400 }, label))))));
+        label && (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400 }, label)))))));
 };

package/lib/components/Layout/components/Outline/outline.js

@@ -3,7 +3,9 @@ import { DEFAULT_TAB_VALUE } from "./hooks/UseTabs/constants";
 import { useTabs } from "./hooks/UseTabs/hook";
 import { StyledTab, StyledTabs } from "./outline.styles";
 export const Outline = ({ className, Contents, outline, ...props /* MuiTabsProps */ }) => {
-    const { indicatorColor, onChange, orientation, value } = useTabs(outline);
+    const { indicatorColor, onChange, orientation, value } = useTabs(outline ?? []);
+    if (!outline?.length)
+        return null;
     return (React.createElement(StyledTabs, { className: className, indicatorColor: indicatorColor, onChange: onChange, orientation: orientation, value: value, ...props },
         React.createElement(Contents, { value: DEFAULT_TAB_VALUE }),
         outline.map(({ depth, disabled, hash, value }) => (React.createElement(StyledTab, { depth: depth, disabled: disabled, key: hash, label: value, value: hash })))));

package/lib/components/Layout/components/Outline/types.d.ts

@@ -10,5 +10,5 @@ export interface OutlineItem {
 }
 export interface OutlineProps extends BaseComponentProps, TabsProps {
     Contents: ElementType<ContentsTabProps>;
-    outline: OutlineItem[];
+    outline?: OutlineItem[] | null;
 }

package/lib/components/common/Button/components/FileDownloadButton/fileDownloadButton.d.ts

@@ -0,0 +1,5 @@
+export interface FileDownloadButtonProps {
+    fileName?: string;
+    fileUrl?: string;
+}
+export declare const FileDownloadButton: ({ fileName, fileUrl, }: FileDownloadButtonProps) => JSX.Element;

package/lib/components/common/Button/components/FileDownloadButton/fileDownloadButton.js

@@ -0,0 +1,14 @@
+import { Box } from "@mui/material";
+import React, { useEffect, useRef } from "react";
+export const FileDownloadButton = ({ fileName, fileUrl, }) => {
+    const downloadRef = useRef(null);
+    // Initiates file download when file url request is successful.
+    useEffect(() => {
+        if (downloadRef.current && fileName && fileUrl) {
+            downloadRef.current.setAttribute("href", fileUrl);
+            downloadRef.current.setAttribute("download", fileName);
+            downloadRef.current.click();
+        }
+    }, [fileName, fileUrl]);
+    return (React.createElement(Box, { component: "a", download: true, ref: downloadRef, sx: { display: "none" } }));
+};

package/lib/utils/mdx/files/mapMDXSlugByFilePaths.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Maps each MDX file path to its slug.
+ * @param docsDirectory - Docs directory.
+ * @param dirPath - Directory path.
+ * @param slugByFilePaths - Accumulator: Map of slug by mdx file path.
+ * @returns returns slug by mdx file path.
+ */
+export declare function mapMDXSlugByFilePaths(docsDirectory: string, dirPath?: string, slugByFilePaths?: Map<string, string[]>): Map<string, string[]>;

package/lib/utils/mdx/files/mapMDXSlugByFilePaths.js

@@ -0,0 +1,39 @@
+import fs from "fs";
+import * as path from "path";
+/**
+ * Returns true if the file is an MDX file.
+ * @param fileName - File name.
+ * @returns true if the file is an MDX file.
+ */
+function isMdxFile(fileName) {
+    return fileName.endsWith(".mdx");
+}
+/**
+ * Maps each MDX file path to its slug.
+ * @param docsDirectory - Docs directory.
+ * @param dirPath - Directory path.
+ * @param slugByFilePaths - Accumulator: Map of slug by mdx file path.
+ * @returns returns slug by mdx file path.
+ */
+export function mapMDXSlugByFilePaths(docsDirectory, dirPath = docsDirectory, slugByFilePaths = new Map()) {
+    const dirents = fs.readdirSync(dirPath, { withFileTypes: true });
+    return dirents.reduce((acc, dirent) => {
+        /* Accumulate the slug for each MDX file. */
+        if (dirent.isFile() && isMdxFile(dirent.name)) {
+            const mdxPath = path.resolve(dirPath, dirent.name);
+            /* Build the slug from the file relative directory and file name. */
+            const mdxRelativePath = path.relative(docsDirectory, mdxPath);
+            const { dir, name } = path.parse(mdxRelativePath);
+            let slug = [];
+            if (dir)
+                slug = dir.split(path.sep);
+            slug.push(name);
+            acc.set(mdxPath, slug);
+        }
+        /* Recurse into subdirectories. */
+        if (dirent.isDirectory()) {
+            mapMDXSlugByFilePaths(docsDirectory, path.resolve(dirPath, dirent.name), acc);
+        }
+        return acc;
+    }, slugByFilePaths);
+}

package/lib/utils/mdx/files/resolveRelativeDirs.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Resolves an absolute docs path from a single set of directory segments.
+ * @param relativeDirs - Directory segments relative to the docs root.
+ * @returns Absolute path.
+ */
+export declare function resolveRelativeDirs(relativeDirs: string[]): string;

package/lib/utils/mdx/files/resolveRelativeDirs.js

@@ -0,0 +1,9 @@
+import * as path from "path";
+/**
+ * Resolves an absolute docs path from a single set of directory segments.
+ * @param relativeDirs - Directory segments relative to the docs root.
+ * @returns Absolute path.
+ */
+export function resolveRelativeDirs(relativeDirs) {
+    return path.join(process.cwd(), ...relativeDirs);
+}

package/lib/utils/mdx/frontmatter/getMatter.d.ts

@@ -0,0 +1,8 @@
+import matter from "gray-matter";
+/**
+ * Returns matter object (frontmatter and content) from the given MD/MDX path.
+ * Server-only: uses Node fs, import only in SSG/SSR/build contexts.
+ * @param filePath - File path of MD/MDX file.
+ * @returns matter object.
+ */
+export declare function getMatter(filePath: string): matter.GrayMatterFile<string>;

package/lib/utils/mdx/frontmatter/getMatter.js

@@ -0,0 +1,12 @@
+import fs from "fs";
+import matter from "gray-matter";
+/**
+ * Returns matter object (frontmatter and content) from the given MD/MDX path.
+ * Server-only: uses Node fs, import only in SSG/SSR/build contexts.
+ * @param filePath - File path of MD/MDX file.
+ * @returns matter object.
+ */
+export function getMatter(filePath) {
+    const markdownWithMeta = fs.readFileSync(filePath, "utf-8");
+    return matter(markdownWithMeta);
+}

package/lib/utils/mdx/frontmatter/types.d.ts

@@ -0,0 +1,7 @@
+interface BaseFrontmatterProps {
+    description: string;
+    hidden?: boolean;
+    title: string;
+}
+export type FrontmatterProps<F extends object> = BaseFrontmatterProps & F;
+export {};

package/lib/utils/mdx/frontmatter/types.js

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

package/lib/utils/mdx/frontmatter/validateMatter.d.ts

@@ -0,0 +1,8 @@
+import matter from "gray-matter";
+import { FrontmatterProps } from "./types";
+/**
+ * Returns the frontmatter from the given gray matter file data.
+ * @param data - Gray matter file data.
+ * @returns Frontmatter.
+ */
+export declare function validateMatter<F extends object>(data: matter.GrayMatterFile<string>["data"]): FrontmatterProps<F> | undefined;

package/lib/utils/mdx/frontmatter/validateMatter.js

@@ -0,0 +1,13 @@
+/**
+ * Returns the frontmatter from the given gray matter file data.
+ * @param data - Gray matter file data.
+ * @returns Frontmatter.
+ */
+export function validateMatter(data) {
+    if ("title" in data &&
+        typeof data.title === "string" &&
+        "description" in data &&
+        typeof data.description === "string") {
+        return data;
+    }
+}

package/lib/utils/mdx/plugins/rehypeSlug.d.ts

@@ -0,0 +1,6 @@
+import { Plugin } from "unified";
+/**
+ * Rehype plugin to generate an ID for each heading in MDX content.
+ * @returns plugin to generate an ID for each heading in MDX content.
+ */
+export declare function rehypeSlug(): Plugin;

package/lib/utils/mdx/plugins/rehypeSlug.js

@@ -0,0 +1,34 @@
+import { visit } from "unist-util-visit";
+import { getHeadingTextValue } from "./remarkHeadings";
+import { generateUniqueId, slugifyHeading } from "./utils";
+/**
+ * Rehype plugin to generate an ID for each heading in MDX content.
+ * @returns plugin to generate an ID for each heading in MDX content.
+ */
+export function rehypeSlug() {
+    return (tree) => {
+        const setOfIds = new Set();
+        visit(tree, "element", (node) => {
+            if (/^h[1-6]$/.test(node.tagName)) {
+                const headingText = getHeadingTextValue(node.children);
+                const headingSlug = slugifyHeading(headingText);
+                const id = generateUniqueId(setOfIds, headingSlug);
+                // Add the ID to the heading element.
+                node.properties.id = id;
+                node.properties.style = "position: relative;";
+                // Append AnchorLink to the heading element.
+                node.children.push({
+                    attributes: [
+                        {
+                            name: "anchorLink",
+                            type: "mdxJsxAttribute",
+                            value: id,
+                        },
+                    ],
+                    name: "AnchorLink",
+                    type: "mdxJsxFlowElement",
+                });
+            }
+        });
+    };
+}

package/lib/utils/mdx/plugins/remarkHeadings.d.ts

@@ -0,0 +1,29 @@
+import { PhrasingContent } from "mdast";
+import { Plugin } from "unified";
+import { OutlineItem } from "../../../components/Layout/components/Outline/types";
+interface Options {
+    depth?: {
+        max?: number;
+        min?: number;
+    };
+    outline: OutlineItem[];
+}
+/**
+ * Remark plugin to generate an outline from MDX content.
+ * The outline is a list of headings with their depth, hash, and value.
+ * @param options - Options.
+ * @param options.depth - Depth of the headings.
+ * @param options.depth.max - Maximum depth of the headings.
+ * @param options.depth.min - Minimum depth of the headings.
+ * @param options.outline - Outline items.
+ * @returns plugin to generate an outline from MDX content.
+ */
+export declare function remarkHeadings({ depth: { max, min }, outline, }: Options): Plugin;
+/**
+ * Returns the value of the heading.
+ * @param children - Phrasing content.
+ * @param value - List of heading text values.
+ * @returns heading text value.
+ */
+export declare function getHeadingTextValue(children: PhrasingContent[], value?: string[]): string;
+export {};

package/lib/utils/mdx/plugins/remarkHeadings.js

@@ -0,0 +1,50 @@
+import { visit } from "unist-util-visit";
+import { generateUniqueId, slugifyHeading } from "./utils";
+/**
+ * Remark plugin to generate an outline from MDX content.
+ * The outline is a list of headings with their depth, hash, and value.
+ * @param options - Options.
+ * @param options.depth - Depth of the headings.
+ * @param options.depth.max - Maximum depth of the headings.
+ * @param options.depth.min - Minimum depth of the headings.
+ * @param options.outline - Outline items.
+ * @returns plugin to generate an outline from MDX content.
+ */
+export function remarkHeadings({ depth: { max = 3, min = 2 } = {}, outline, }) {
+    return (tree) => {
+        const setOfIds = new Set();
+        visit(tree, "heading", (node) => {
+            const heading = node;
+            const { children, depth } = heading;
+            if (depth < min || depth > max)
+                return;
+            const value = getHeadingTextValue(children);
+            const headingSlug = slugifyHeading(value);
+            const hash = generateUniqueId(setOfIds, headingSlug);
+            outline.push({
+                depth,
+                hash,
+                value,
+            });
+        });
+    };
+}
+/**
+ * Returns the value of the heading.
+ * @param children - Phrasing content.
+ * @param value - List of heading text values.
+ * @returns heading text value.
+ */
+export function getHeadingTextValue(children, value = []) {
+    for (const child of children) {
+        if ("value" in child) {
+            value.push(child.value);
+        }
+        if ("children" in child) {
+            // Recurse into nested children, accumulating text into the shared `value` array.
+            // The return value is ignored here because accumulation happens via in-place mutation.
+            getHeadingTextValue(child.children, value);
+        }
+    }
+    return value.join("");
+}

package/lib/utils/mdx/plugins/utils.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns node ID, ensuring uniqueness.
+ * @param setOfIds - Set of IDs.
+ * @param slug - Slug.
+ * @returns node ID.
+ */
+export declare function generateUniqueId(setOfIds: Set<string>, slug: string): string;
+/**
+ * Slugify the heading text to generate an ID.
+ * @param headingText - Heading text.
+ * @returns heading ID.
+ */
+export declare function slugifyHeading(headingText: string): string;

package/lib/utils/mdx/plugins/utils.js

@@ -0,0 +1,25 @@
+import slugify from "slugify";
+/**
+ * Returns node ID, ensuring uniqueness.
+ * @param setOfIds - Set of IDs.
+ * @param slug - Slug.
+ * @returns node ID.
+ */
+export function generateUniqueId(setOfIds, slug) {
+    let id = slug;
+    let i = 1;
+    while (setOfIds.has(id)) {
+        id = `${slug}-${i}`;
+        i++;
+    }
+    setOfIds.add(id);
+    return id;
+}
+/**
+ * Slugify the heading text to generate an ID.
+ * @param headingText - Heading text.
+ * @returns heading ID.
+ */
+export function slugifyHeading(headingText) {
+    return slugify(headingText, { lower: true, strict: true });
+}

package/lib/utils/mdx/staticGeneration/staticPaths.d.ts

@@ -0,0 +1,8 @@
+import { GetStaticPathsResult } from "next";
+/**
+ * Builds Next.js static paths for MDX page files found under the given relative directories.
+ * Each path’s `slug` is composed of the file’s relative directory segments plus the MDX filename (without extension).
+ * @param relativeDirs - Relative directories to scan for MDX pages.
+ * @returns Array of path objects suitable for `getStaticPaths`.
+ */
+export declare function buildStaticPaths(relativeDirs: string[]): GetStaticPathsResult["paths"];

package/lib/utils/mdx/staticGeneration/staticPaths.js

@@ -0,0 +1,12 @@
+import { mapMDXSlugByFilePaths } from "../files/mapMDXSlugByFilePaths";
+import { resolveRelativeDirs } from "../files/resolveRelativeDirs";
+/**
+ * Builds Next.js static paths for MDX page files found under the given relative directories.
+ * Each path’s `slug` is composed of the file’s relative directory segments plus the MDX filename (without extension).
+ * @param relativeDirs - Relative directories to scan for MDX pages.
+ * @returns Array of path objects suitable for `getStaticPaths`.
+ */
+export function buildStaticPaths(relativeDirs) {
+    const slugByFilePaths = mapMDXSlugByFilePaths(resolveRelativeDirs(relativeDirs));
+    return [...slugByFilePaths].map(([, slug]) => ({ params: { slug } }));
+}

package/lib/utils/mdx/staticGeneration/staticProps.d.ts

@@ -0,0 +1,5 @@
+import { SerializeOptions } from "next-mdx-remote/dist/types";
+import { GetStaticPropsResult } from "next/types";
+import { FrontmatterProps } from "../frontmatter/types";
+import { StaticProps } from "./types";
+export declare function buildStaticProps<F extends object, P extends object>(fileName: string | undefined, slug: string[] | undefined, frontmatterFn?: (frontmatter: FrontmatterProps<F> | undefined) => FrontmatterProps<F> | undefined, serializeOptions?: SerializeOptions, otherProps?: P): Promise<GetStaticPropsResult<StaticProps<FrontmatterProps<F>, P>> | undefined>;

package/lib/utils/mdx/staticGeneration/staticProps.js

@@ -0,0 +1,44 @@
+import { serialize } from "next-mdx-remote/serialize";
+import remarkGfm from "remark-gfm";
+import { getMatter } from "../frontmatter/getMatter";
+import { validateMatter } from "../frontmatter/validateMatter";
+import { rehypeSlug } from "../plugins/rehypeSlug";
+import { remarkHeadings } from "../plugins/remarkHeadings";
+export async function buildStaticProps(fileName, slug, frontmatterFn = (frontmatter) => frontmatter, serializeOptions = {}, otherProps = {}) {
+    if (!slug)
+        return;
+    if (!fileName)
+        return;
+    // Extract frontmatter and content from the MDX file.
+    const { content, data } = getMatter(fileName);
+    const frontmatter = frontmatterFn(validateMatter(data));
+    // If the frontmatter is hidden, return.
+    if (!frontmatter || frontmatter.hidden)
+        return;
+    // We expect the frontmatter to have a title.
+    if (!frontmatter.title)
+        return;
+    // Serialize the MDX content.
+    const outline = [];
+    const mdxSource = await serialize(content, {
+        ...serializeOptions,
+        mdxOptions: {
+            development: false,
+            rehypePlugins: [rehypeSlug],
+            remarkPlugins: [[remarkHeadings, { outline }], remarkGfm],
+            ...serializeOptions.mdxOptions,
+        },
+        scope: { ...serializeOptions.scope, frontmatter },
+    });
+    const { title: pageTitle } = frontmatter;
+    return {
+        props: {
+            frontmatter,
+            mdxSource,
+            outline,
+            pageTitle,
+            slug,
+            ...otherProps,
+        },
+    };
+}

package/lib/utils/mdx/staticGeneration/types.d.ts

@@ -0,0 +1,12 @@
+import { MDXRemoteSerializeResult } from "next-mdx-remote";
+import { OutlineItem } from "../../../components/Layout/components/Outline/types";
+import { FrontmatterProps } from "../frontmatter/types";
+interface BaseStaticProps<F extends object> {
+    frontmatter: FrontmatterProps<F> | null;
+    mdxSource: MDXRemoteSerializeResult | null;
+    outline: OutlineItem[] | null;
+    pageTitle: string;
+    slug: string[];
+}
+export type StaticProps<F extends object, P extends object> = BaseStaticProps<F> & P;
+export {};

package/lib/utils/mdx/staticGeneration/types.js

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

package/lib/utils/mdx/staticGeneration/utils.d.ts

@@ -0,0 +1,15 @@
+import { GetStaticPropsContext } from "next/types";
+/**
+ * Builds the MDX file path from the given list of doc directories and slug.
+ * @param dirs - Doc directories e.g. ["app", "docs"].
+ * @param slug - Doc slug e.g. ["learn", "featured-analyses"].
+ * @returns MDX file path.
+ */
+export declare function buildMDXFilePath(dirs: string[], slug: string[] | undefined): string | undefined;
+/**
+ * Returns the MDX page slug for the given static props context and section.
+ * @param props - Static props context.
+ * @param section - Docs section e.g. "learn".
+ * @returns MDX page slug.
+ */
+export declare function buildMDXSlug(props: GetStaticPropsContext, section?: string): string[] | undefined;

package/lib/utils/mdx/staticGeneration/utils.js

@@ -0,0 +1,26 @@
+import { resolveRelativeDirs } from "../files/resolveRelativeDirs";
+/**
+ * Builds the MDX file path from the given list of doc directories and slug.
+ * @param dirs - Doc directories e.g. ["app", "docs"].
+ * @param slug - Doc slug e.g. ["learn", "featured-analyses"].
+ * @returns MDX file path.
+ */
+export function buildMDXFilePath(dirs, slug) {
+    if (!slug)
+        return;
+    return resolveRelativeDirs(dirs.concat(slug)).concat(".mdx");
+}
+/**
+ * Returns the MDX page slug for the given static props context and section.
+ * @param props - Static props context.
+ * @param section - Docs section e.g. "learn".
+ * @returns MDX page slug.
+ */
+export function buildMDXSlug(props, section) {
+    const slug = props.params?.slug;
+    if (!slug || typeof slug === "string")
+        return;
+    if (section)
+        return [section, ...slug];
+    return slug;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "45.1.0",
+  "version": "46.1.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
@@ -26,7 +26,7 @@
     "@commitlint/config-conventional": "^17.4.2",
     "@emotion/jest": "^11.13.0",
     "@mui/types": "^7.4.0",
-    "@next/eslint-plugin-next": "^14.2.30",
+    "@next/eslint-plugin-next": "^14.2.32",
     "@storybook/addon-actions": "^8.6.4",
     "@storybook/addon-essentials": "^8.6.4",
     "@storybook/addon-interactions": "^8.6.4",
@@ -46,7 +46,7 @@
     "@types/uuid": "8.3.4",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "eslint": "^8.33.0",
-    "eslint-config-next": "^14.2.30",
+    "eslint-config-next": "^14.2.32",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-jsdoc": "^48.1.0",
@@ -76,10 +76,12 @@
     "@tanstack/react-table": "^8.19.2",
     "@tanstack/react-virtual": "^3.13.12",
     "copy-to-clipboard": "3.3.1",
+    "gray-matter": "^4.0.3",
     "isomorphic-dompurify": "^2.22.0",
     "ky": "^1.7.2",
-    "next": "^14.2.30",
-    "next-auth": "^4.24.7",
+    "next": "^14.2.32",
+    "next-auth": "4.24.11",
+    "next-mdx-remote": "^4.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
@@ -92,6 +94,7 @@
     "remark-gfm": "^3.0.1",
     "remark-parse": "^10.0.2",
     "remark-rehype": "^10.1.0",
+    "slugify": "^1.6.6",
     "unified": "^10.1.2",
     "uuid": "8.3.2",
     "yup": "^1.6.1"

package/src/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/utils.ts

@@ -1,6 +1,9 @@
 import { Column, RowData, Table } from "@tanstack/react-table";
 import { isRangeCategoryConfig } from "../../../../../../common/categories/config/range/typeGuards";
-import { CategoryConfig } from "../../../../../../common/categories/config/types";
+import {
+  CategoryConfig,
+  SelectCategoryConfig,
+} from "../../../../../../common/categories/config/types";
 import { RangeCategoryView } from "../../../../../../common/categories/views/range/types";
 import { CategoryView } from "../../../../../../common/categories/views/types";
 import {
@@ -10,6 +13,7 @@ import {
 import { FILTER_SORT } from "../../../../../../common/filters/sort/config/types";
 import { sortCategoryValueViews } from "../../../../../../common/filters/sort/models/utils";
 import { CategoryGroup } from "../../../../../../config/entities";
+import { getSelectCategoryValue } from "../../../../../../hooks/useCategoryFilter";
 import { getColumnHeader } from "../../../../../Table/common/utils";
 import { CategoryFilter } from "../../../Filters/filters";
 import { SurfaceProps } from "../../../surfaces/types";
@@ -142,7 +146,7 @@ function mapCategoryFilter<T extends RowData>(
         categoryView = mapColumnToSelectCategoryView(
           column,
           filterSort,
-          categoryConfig
+          categoryConfig as SelectCategoryConfig
         );
       }
 
@@ -198,11 +202,23 @@ function mapColumnToRangeCategoryView<T extends RowData>(
 function mapColumnToSelectCategoryView<T extends RowData>(
   column: Column<T>,
   filterSort: FILTER_SORT,
-  categoryConfig?: CategoryConfig
+  categoryConfig?: SelectCategoryConfig
 ): SelectCategoryView {
   const facetedUniqueValues = column.getFacetedUniqueValues();
+
+  // Selected values for the column.
+  const filterValue = (column.getFilterValue() || []) as unknown[];
+
+  // Update faceted unique values with selected filters that are not in the faceted unique values.
+  for (const value of filterValue) {
+    if (facetedUniqueValues.has(value)) continue;
+    facetedUniqueValues.set(value, 0);
+  }
+
   const isDisabled = facetedUniqueValues.size === 0;
-  const values = mapColumnToSelectCategoryValueView(column, filterSort);
+  const values = mapColumnToSelectCategoryValueView(column, filterSort).map(
+    categoryConfig?.mapSelectCategoryValue || getSelectCategoryValue
+  );
   return {
     annotation: undefined,
     enableChartView: false,

package/src/components/Index/components/EntityView/components/layout/Summary/summary.tsx

@@ -26,12 +26,14 @@ export const Summary = ({
           <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500}>
             {count}
           </Typography>
-          <Typography
-            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
-          >
-            {label}
-          </Typography>
+          {label && (
+            <Typography
+              color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+              variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
+            >
+              {label}
+            </Typography>
+          )}
         </Fragment>
       ))}
     </StyledGrid>

package/src/components/Layout/components/Outline/outline.tsx

@@ -10,7 +10,12 @@ export const Outline = ({
   outline,
   ...props /* MuiTabsProps */
 }: OutlineProps): JSX.Element | null => {
-  const { indicatorColor, onChange, orientation, value } = useTabs(outline);
+  const { indicatorColor, onChange, orientation, value } = useTabs(
+    outline ?? []
+  );
+
+  if (!outline?.length) return null;
+
   return (
     <StyledTabs
       className={className}

package/src/components/Layout/components/Outline/types.ts

@@ -12,5 +12,5 @@ export interface OutlineItem {
 
 export interface OutlineProps extends BaseComponentProps, TabsProps {
   Contents: ElementType<ContentsTabProps>;
-  outline: OutlineItem[];
+  outline?: OutlineItem[] | null;
 }

package/src/components/common/Button/components/FileDownloadButton/fileDownloadButton.tsx

@@ -0,0 +1,27 @@
+import { Box } from "@mui/material";
+import React, { useEffect, useRef } from "react";
+
+export interface FileDownloadButtonProps {
+  fileName?: string;
+  fileUrl?: string;
+}
+
+export const FileDownloadButton = ({
+  fileName,
+  fileUrl,
+}: FileDownloadButtonProps): JSX.Element => {
+  const downloadRef = useRef<HTMLAnchorElement>(null);
+
+  // Initiates file download when file url request is successful.
+  useEffect(() => {
+    if (downloadRef.current && fileName && fileUrl) {
+      downloadRef.current.setAttribute("href", fileUrl);
+      downloadRef.current.setAttribute("download", fileName);
+      downloadRef.current.click();
+    }
+  }, [fileName, fileUrl]);
+
+  return (
+    <Box component="a" download ref={downloadRef} sx={{ display: "none" }} />
+  );
+};

package/src/utils/mdx/files/mapMDXSlugByFilePaths.ts

@@ -0,0 +1,48 @@
+import fs from "fs";
+import * as path from "path";
+
+/**
+ * Returns true if the file is an MDX file.
+ * @param fileName - File name.
+ * @returns true if the file is an MDX file.
+ */
+function isMdxFile(fileName: string): boolean {
+  return fileName.endsWith(".mdx");
+}
+
+/**
+ * Maps each MDX file path to its slug.
+ * @param docsDirectory - Docs directory.
+ * @param dirPath - Directory path.
+ * @param slugByFilePaths - Accumulator: Map of slug by mdx file path.
+ * @returns returns slug by mdx file path.
+ */
+export function mapMDXSlugByFilePaths(
+  docsDirectory: string,
+  dirPath = docsDirectory,
+  slugByFilePaths: Map<string, string[]> = new Map()
+): Map<string, string[]> {
+  const dirents = fs.readdirSync(dirPath, { withFileTypes: true });
+  return dirents.reduce((acc, dirent) => {
+    /* Accumulate the slug for each MDX file. */
+    if (dirent.isFile() && isMdxFile(dirent.name)) {
+      const mdxPath = path.resolve(dirPath, dirent.name);
+      /* Build the slug from the file relative directory and file name. */
+      const mdxRelativePath = path.relative(docsDirectory, mdxPath);
+      const { dir, name } = path.parse(mdxRelativePath);
+      let slug = [] as string[];
+      if (dir) slug = dir.split(path.sep);
+      slug.push(name);
+      acc.set(mdxPath, slug);
+    }
+    /* Recurse into subdirectories. */
+    if (dirent.isDirectory()) {
+      mapMDXSlugByFilePaths(
+        docsDirectory,
+        path.resolve(dirPath, dirent.name),
+        acc
+      );
+    }
+    return acc;
+  }, slugByFilePaths);
+}

package/src/utils/mdx/files/resolveRelativeDirs.ts

@@ -0,0 +1,10 @@
+import * as path from "path";
+
+/**
+ * Resolves an absolute docs path from a single set of directory segments.
+ * @param relativeDirs - Directory segments relative to the docs root.
+ * @returns Absolute path.
+ */
+export function resolveRelativeDirs(relativeDirs: string[]): string {
+  return path.join(process.cwd(), ...relativeDirs);
+}

package/src/utils/mdx/frontmatter/getMatter.ts

@@ -0,0 +1,13 @@
+import fs from "fs";
+import matter from "gray-matter";
+
+/**
+ * Returns matter object (frontmatter and content) from the given MD/MDX path.
+ * Server-only: uses Node fs, import only in SSG/SSR/build contexts.
+ * @param filePath - File path of MD/MDX file.
+ * @returns matter object.
+ */
+export function getMatter(filePath: string): matter.GrayMatterFile<string> {
+  const markdownWithMeta = fs.readFileSync(filePath, "utf-8");
+  return matter(markdownWithMeta);
+}

package/src/utils/mdx/frontmatter/types.ts

@@ -0,0 +1,7 @@
+interface BaseFrontmatterProps {
+  description: string;
+  hidden?: boolean;
+  title: string;
+}
+
+export type FrontmatterProps<F extends object> = BaseFrontmatterProps & F;

package/src/utils/mdx/frontmatter/validateMatter.ts

@@ -0,0 +1,20 @@
+import matter from "gray-matter";
+import { FrontmatterProps } from "./types";
+
+/**
+ * Returns the frontmatter from the given gray matter file data.
+ * @param data - Gray matter file data.
+ * @returns Frontmatter.
+ */
+export function validateMatter<F extends object>(
+  data: matter.GrayMatterFile<string>["data"]
+): FrontmatterProps<F> | undefined {
+  if (
+    "title" in data &&
+    typeof data.title === "string" &&
+    "description" in data &&
+    typeof data.description === "string"
+  ) {
+    return data as FrontmatterProps<F>;
+  }
+}

package/src/utils/mdx/plugins/rehypeSlug.ts

@@ -0,0 +1,36 @@
+import { Plugin } from "unified";
+import { visit } from "unist-util-visit";
+import { getHeadingTextValue } from "./remarkHeadings";
+import { generateUniqueId, slugifyHeading } from "./utils";
+
+/**
+ * Rehype plugin to generate an ID for each heading in MDX content.
+ * @returns plugin to generate an ID for each heading in MDX content.
+ */
+export function rehypeSlug(): Plugin {
+  return (tree) => {
+    const setOfIds = new Set<string>();
+    visit(tree, "element", (node) => {
+      if (/^h[1-6]$/.test(node.tagName)) {
+        const headingText = getHeadingTextValue(node.children);
+        const headingSlug = slugifyHeading(headingText);
+        const id = generateUniqueId(setOfIds, headingSlug);
+        // Add the ID to the heading element.
+        node.properties.id = id;
+        node.properties.style = "position: relative;";
+        // Append AnchorLink to the heading element.
+        node.children.push({
+          attributes: [
+            {
+              name: "anchorLink",
+              type: "mdxJsxAttribute",
+              value: id,
+            },
+          ],
+          name: "AnchorLink",
+          type: "mdxJsxFlowElement",
+        });
+      }
+    });
+  };
+}

package/src/utils/mdx/plugins/remarkHeadings.ts

@@ -0,0 +1,67 @@
+import { Heading, PhrasingContent, Root } from "mdast";
+import { Plugin } from "unified";
+import { visit } from "unist-util-visit";
+import { OutlineItem } from "../../../components/Layout/components/Outline/types";
+import { generateUniqueId, slugifyHeading } from "./utils";
+
+interface Options {
+  depth?: { max?: number; min?: number };
+  outline: OutlineItem[];
+}
+
+/**
+ * Remark plugin to generate an outline from MDX content.
+ * The outline is a list of headings with their depth, hash, and value.
+ * @param options - Options.
+ * @param options.depth - Depth of the headings.
+ * @param options.depth.max - Maximum depth of the headings.
+ * @param options.depth.min - Minimum depth of the headings.
+ * @param options.outline - Outline items.
+ * @returns plugin to generate an outline from MDX content.
+ */
+export function remarkHeadings({
+  depth: { max = 3, min = 2 } = {},
+  outline,
+}: Options): Plugin {
+  return (tree: Root): void => {
+    const setOfIds = new Set<string>();
+    visit(tree, "heading", (node) => {
+      const heading = node as Heading;
+      const { children, depth } = heading;
+
+      if (depth < min || depth > max) return;
+
+      const value = getHeadingTextValue(children);
+      const headingSlug = slugifyHeading(value);
+      const hash = generateUniqueId(setOfIds, headingSlug);
+      outline.push({
+        depth,
+        hash,
+        value,
+      });
+    });
+  };
+}
+
+/**
+ * Returns the value of the heading.
+ * @param children - Phrasing content.
+ * @param value - List of heading text values.
+ * @returns heading text value.
+ */
+export function getHeadingTextValue(
+  children: PhrasingContent[],
+  value: string[] = []
+): string {
+  for (const child of children) {
+    if ("value" in child) {
+      value.push(child.value);
+    }
+    if ("children" in child) {
+      // Recurse into nested children, accumulating text into the shared `value` array.
+      // The return value is ignored here because accumulation happens via in-place mutation.
+      getHeadingTextValue(child.children, value);
+    }
+  }
+  return value.join("");
+}

package/src/utils/mdx/plugins/utils.ts

@@ -0,0 +1,27 @@
+import slugify from "slugify";
+
+/**
+ * Returns node ID, ensuring uniqueness.
+ * @param setOfIds - Set of IDs.
+ * @param slug - Slug.
+ * @returns node ID.
+ */
+export function generateUniqueId(setOfIds: Set<string>, slug: string): string {
+  let id = slug;
+  let i = 1;
+  while (setOfIds.has(id)) {
+    id = `${slug}-${i}`;
+    i++;
+  }
+  setOfIds.add(id);
+  return id;
+}
+
+/**
+ * Slugify the heading text to generate an ID.
+ * @param headingText - Heading text.
+ * @returns heading ID.
+ */
+export function slugifyHeading(headingText: string): string {
+  return slugify(headingText, { lower: true, strict: true });
+}

package/src/utils/mdx/staticGeneration/staticPaths.ts

@@ -0,0 +1,18 @@
+import { GetStaticPathsResult } from "next";
+import { mapMDXSlugByFilePaths } from "../files/mapMDXSlugByFilePaths";
+import { resolveRelativeDirs } from "../files/resolveRelativeDirs";
+
+/**
+ * Builds Next.js static paths for MDX page files found under the given relative directories.
+ * Each path’s `slug` is composed of the file’s relative directory segments plus the MDX filename (without extension).
+ * @param relativeDirs - Relative directories to scan for MDX pages.
+ * @returns Array of path objects suitable for `getStaticPaths`.
+ */
+export function buildStaticPaths(
+  relativeDirs: string[]
+): GetStaticPathsResult["paths"] {
+  const slugByFilePaths = mapMDXSlugByFilePaths(
+    resolveRelativeDirs(relativeDirs)
+  );
+  return [...slugByFilePaths].map(([, slug]) => ({ params: { slug } }));
+}

package/src/utils/mdx/staticGeneration/staticProps.ts

@@ -0,0 +1,62 @@
+import { SerializeOptions } from "next-mdx-remote/dist/types";
+import { serialize } from "next-mdx-remote/serialize";
+import { GetStaticPropsResult } from "next/types";
+import remarkGfm from "remark-gfm";
+import { OutlineItem } from "../../../components/Layout/components/Outline/types";
+import { getMatter } from "../frontmatter/getMatter";
+import { FrontmatterProps } from "../frontmatter/types";
+import { validateMatter } from "../frontmatter/validateMatter";
+import { rehypeSlug } from "../plugins/rehypeSlug";
+import { remarkHeadings } from "../plugins/remarkHeadings";
+import { StaticProps } from "./types";
+
+export async function buildStaticProps<F extends object, P extends object>(
+  fileName: string | undefined,
+  slug: string[] | undefined,
+  frontmatterFn = (
+    frontmatter: FrontmatterProps<F> | undefined
+  ): FrontmatterProps<F> | undefined => frontmatter,
+  serializeOptions: SerializeOptions = {},
+  otherProps: P = {} as P
+): Promise<
+  GetStaticPropsResult<StaticProps<FrontmatterProps<F>, P>> | undefined
+> {
+  if (!slug) return;
+  if (!fileName) return;
+
+  // Extract frontmatter and content from the MDX file.
+  const { content, data } = getMatter(fileName);
+  const frontmatter = frontmatterFn(validateMatter(data));
+
+  // If the frontmatter is hidden, return.
+  if (!frontmatter || frontmatter.hidden) return;
+
+  // We expect the frontmatter to have a title.
+  if (!frontmatter.title) return;
+
+  // Serialize the MDX content.
+  const outline: OutlineItem[] = [];
+  const mdxSource = await serialize(content, {
+    ...serializeOptions,
+    mdxOptions: {
+      development: false,
+      rehypePlugins: [rehypeSlug],
+      remarkPlugins: [[remarkHeadings, { outline }], remarkGfm],
+      ...serializeOptions.mdxOptions,
+    },
+    scope: { ...serializeOptions.scope, frontmatter },
+  });
+
+  const { title: pageTitle } = frontmatter;
+
+  return {
+    props: {
+      frontmatter,
+      mdxSource,
+      outline,
+      pageTitle,
+      slug,
+      ...otherProps,
+    },
+  };
+}

package/src/utils/mdx/staticGeneration/types.ts

@@ -0,0 +1,16 @@
+import { MDXRemoteSerializeResult } from "next-mdx-remote";
+import { OutlineItem } from "../../../components/Layout/components/Outline/types";
+import { FrontmatterProps } from "../frontmatter/types";
+
+interface BaseStaticProps<F extends object> {
+  frontmatter: FrontmatterProps<F> | null;
+  mdxSource: MDXRemoteSerializeResult | null;
+  outline: OutlineItem[] | null;
+  pageTitle: string;
+  slug: string[];
+}
+
+export type StaticProps<
+  F extends object,
+  P extends object
+> = BaseStaticProps<F> & P;

package/src/utils/mdx/staticGeneration/utils.ts

@@ -0,0 +1,32 @@
+import { GetStaticPropsContext } from "next/types";
+import { resolveRelativeDirs } from "../files/resolveRelativeDirs";
+
+/**
+ * Builds the MDX file path from the given list of doc directories and slug.
+ * @param dirs - Doc directories e.g. ["app", "docs"].
+ * @param slug - Doc slug e.g. ["learn", "featured-analyses"].
+ * @returns MDX file path.
+ */
+export function buildMDXFilePath(
+  dirs: string[],
+  slug: string[] | undefined
+): string | undefined {
+  if (!slug) return;
+  return resolveRelativeDirs(dirs.concat(slug)).concat(".mdx");
+}
+
+/**
+ * Returns the MDX page slug for the given static props context and section.
+ * @param props - Static props context.
+ * @param section - Docs section e.g. "learn".
+ * @returns MDX page slug.
+ */
+export function buildMDXSlug(
+  props: GetStaticPropsContext,
+  section?: string
+): string[] | undefined {
+  const slug = props.params?.slug;
+  if (!slug || typeof slug === "string") return;
+  if (section) return [section, ...slug];
+  return slug;
+}

package/tests/chart.test.tsx

@@ -18,8 +18,10 @@ const CLASSNAMES = {
 
 const { Default, Selected } = composeStories(stories);
 
-const DATA = Default.args.selectCategoryValueViews || [];
-const SELECTED_DATA = Selected.args.selectCategoryValueViews || [];
+const DATA: SelectCategoryValueView[] =
+  Default.args.selectCategoryValueViews || [];
+const SELECTED_DATA: SelectCategoryValueView[] =
+  Selected.args.selectCategoryValueViews || [];
 const TOTAL_COUNT = getCategoryTotalCount(DATA);
 
 describe("Chart", () => {

package/tests/markdownCell.test.tsx

@@ -10,7 +10,6 @@ import {
 } from "../src/components/Links/common/entities";
 import { STYLED_ANCHOR } from "../src/components/Table/components/TableCell/components/MarkdownCell/stories/constants";
 import * as stories from "../src/components/Table/components/TableCell/components/MarkdownCell/stories/markdownCell.stories";
-import { MarkdownCellProps } from "../src/components/Table/components/TableCell/components/MarkdownCell/types";
 
 expect.extend(matchers);
 
@@ -41,7 +40,7 @@ describe("MarkdownCell", () => {
         column={
           {
             columnDef: { meta: { components: { a: STYLED_ANCHOR } } },
-          } as unknown as Column<unknown, MarkdownCellProps>
+          } as unknown as Column<unknown, string>
         }
       />
     );