@databiosphere/findable-ui 35.1.0 → 36.0.0

package/src/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestDownload/fileManifestDownload.tsx

@@ -1,18 +1,12 @@
-import {
-  ButtonBase,
-  TableBody,
-  TableCell,
-  TableRow,
-  Tooltip,
-} from "@mui/material";
+import { Button, TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
 import copy from "copy-to-clipboard";
-import React, { useRef } from "react";
+import React from "react";
 import { Filters } from "../../../../../../../../common/entities";
 import { useDownloadStatus } from "../../../../../../../../hooks/useDownloadStatus";
 import { useFileManifestDownload } from "../../../../../../../../hooks/useFileManifest/useFileManifestDownload";
 import { useLoginGuard } from "../../../../../../../../providers/loginGuard/hook";
+import { BUTTON_PROPS } from "../../../../../../../common/Button/constants";
 import { ButtonGroup } from "../../../../../../../common/ButtonGroup/buttonGroup";
-import { ButtonGroupButton } from "../../../../../../../common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton";
 import {
   ContentCopyIconSmall,
   DownloadIconSmall,
@@ -26,6 +20,7 @@ import {
   LOADING_PANEL_STYLE,
 } from "../../../../../../../Loading/loading";
 import { GridTable } from "../../../../../../../Table/common/gridTable.styles";
+import { TOOLTIP_PROPS } from "../../constants";
 import {
   SectionTitle,
   TableContainer,
@@ -38,87 +33,64 @@ export interface FileManifestDownloadProps {
 export const FileManifestDownload = ({
   filters,
 }: FileManifestDownloadProps): JSX.Element => {
-  const downloadRef = useRef<HTMLAnchorElement>(null);
   const { disabled, message } = useDownloadStatus();
-  const { fileName, isIdle, isLoading, manifestURL } = useFileManifestDownload(
-    filters,
-    disabled
-  );
-  const isInProgress = (isIdle || isLoading) && !disabled;
-  const isReady = Boolean(manifestURL) || disabled;
+  const { fileName, isIdle, isLoading, manifestURL, requestManifest } =
+    useFileManifestDownload(filters);
 
   // Prompt user for login before download and copy, if required.
   const { requireLogin } = useLoginGuard();
 
-  // Copies file manifest.
-  const copyManifestURL = (url?: string): void => {
-    if (!url) return;
-    copy(url);
-  };
-
-  // Downloads file manifest.
-  const downloadManifestURL = (): void => {
-    downloadRef.current?.click();
-  };
-
   return (
     <FluidPaper>
       <GridPaper>
         <SectionTitle>File Manifest</SectionTitle>
         <TableContainer>
           <Loading
-            loading={isInProgress}
+            loading={isLoading}
             panelStyle={LOADING_PANEL_STYLE.INHERIT}
           />
-          <GridTable gridTemplateColumns={isReady ? "auto 1fr" : "1fr"}>
+          <GridTable gridTemplateColumns="auto 1fr">
             <TableBody>
               <TableRow>
-                {isInProgress ? (
-                  <TableCell />
-                ) : isReady ? (
+                {isIdle || isLoading ? (
+                  <TableCell>
+                    <Tooltip {...TOOLTIP_PROPS} title={message}>
+                      <span>
+                        <Button
+                          {...BUTTON_PROPS.PRIMARY_CONTAINED}
+                          disabled={disabled || isLoading}
+                          onClick={() => requireLogin(requestManifest)}
+                        >
+                          Request link
+                        </Button>
+                      </span>
+                    </Tooltip>
+                  </TableCell>
+                ) : (
                   <>
+                    {manifestURL && (
+                      <TableCell>
+                        <ButtonGroup
+                          Buttons={[
+                            <Button key="download" download href={manifestURL}>
+                              <DownloadIconSmall />
+                            </Button>,
+                            <Button
+                              key="copy"
+                              onClick={() => copy(manifestURL)}
+                            >
+                              <ContentCopyIconSmall />
+                            </Button>,
+                          ]}
+                        />
+                      </TableCell>
+                    )}
                     <TableCell>
-                      <ButtonBase
-                        disabled={disabled}
-                        href={manifestURL ?? ""}
-                        ref={downloadRef}
-                        sx={{ display: "none" }}
-                      />
-                      <Tooltip arrow title={message}>
-                        <span>
-                          <ButtonGroup
-                            Buttons={[
-                              <ButtonGroupButton
-                                key="download"
-                                action="Download file manifest"
-                                disabled={disabled}
-                                label={<DownloadIconSmall />}
-                                onClick={() =>
-                                  requireLogin(downloadManifestURL)
-                                }
-                              />,
-                              <ButtonGroupButton
-                                key="copy"
-                                action="Copy file manifest"
-                                disabled={disabled}
-                                label={<ContentCopyIconSmall />}
-                                onClick={() =>
-                                  requireLogin((): void =>
-                                    copyManifestURL(manifestURL)
-                                  )
-                                }
-                              />,
-                            ]}
-                          />
-                        </span>
-                      </Tooltip>
+                      {manifestURL
+                        ? fileName
+                        : "The manifest is not available for this project."}
                     </TableCell>
-                    <TableCell>{fileName}</TableCell>
                   </>
-                ) : (
-                  <TableCell>
-                    The manifest is not available for this project.
-                  </TableCell>
                 )}
               </TableRow>
             </TableBody>

package/src/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestSpreadsheet/fileManifestSpreadsheet.tsx

@@ -1,18 +1,11 @@
-import {
-  ButtonBase,
-  TableBody,
-  TableCell,
-  TableRow,
-  Tooltip,
-} from "@mui/material";
+import { Button, TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
 import copy from "copy-to-clipboard";
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import { Filters } from "../../../../../../../../common/entities";
 import { useDownloadStatus } from "../../../../../../../../hooks/useDownloadStatus";
 import { useFileManifestSpreadsheet } from "../../../../../../../../hooks/useFileManifest/useFileManifestSpreadsheet";
-import { useRequestFileLocation } from "../../../../../../../../hooks/useRequestFileLocation";
+import { BUTTON_PROPS } from "../../../../../../../common/Button/constants";
 import { ButtonGroup } from "../../../../../../../common/ButtonGroup/buttonGroup";
-import { ButtonGroupButton } from "../../../../../../../common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton";
 import {
   ContentCopyIconSmall,
   DownloadIconSmall,
@@ -26,6 +19,7 @@ import {
   LOADING_PANEL_STYLE,
 } from "../../../../../../../Loading/loading";
 import { GridTable } from "../../../../../../../Table/common/gridTable.styles";
+import { TOOLTIP_PROPS } from "../../constants";
 import {
   SectionTitle,
   TableContainer,
@@ -38,30 +32,14 @@ export interface FileManifestSpreadsheetProps {
 export const FileManifestSpreadsheet = ({
   filters,
 }: FileManifestSpreadsheetProps): JSX.Element => {
-  const downloadRef = useRef<HTMLAnchorElement>(null);
   const { disabled, message } = useDownloadStatus();
-  const { exists, fileName, fileUrl } =
-    useFileManifestSpreadsheet(filters, disabled) || {};
-  const { data, isLoading, run } = useRequestFileLocation(fileUrl);
-  const spreadsheetURL = data?.location;
-  const isInProgress = (exists === undefined || isLoading) && !disabled;
-  const isReady = Boolean(spreadsheetURL) || disabled;
-
-  // Copies metadata spreadsheet.
-  const copyMetadataURL = (url?: string): void => {
-    if (!url) return;
-    copy(url);
-  };
-
-  // Downloads metadata spreadsheet.
-  const downloadMetadataURL = (): void => {
-    downloadRef.current?.click();
-  };
-
-  // Requests metadata spreadsheet.
-  useEffect(() => {
-    run();
-  }, [fileUrl, run]);
+  const {
+    fileName,
+    isIdle = false,
+    isLoading = false,
+    requestManifest,
+    spreadsheetUrl,
+  } = useFileManifestSpreadsheet(filters) || {};
 
   return (
     <FluidPaper>
@@ -69,55 +47,55 @@ export const FileManifestSpreadsheet = ({
         <SectionTitle>Metadata</SectionTitle>
         <TableContainer>
           <Loading
-            loading={isInProgress}
+            loading={isLoading}
             panelStyle={LOADING_PANEL_STYLE.INHERIT}
           />
-          <GridTable gridTemplateColumns={isReady ? "auto 1fr" : "1fr"}>
+          <GridTable gridTemplateColumns="auto 1fr">
             <TableBody>
               <TableRow>
-                {isInProgress ? (
-                  <TableCell />
-                ) : isReady ? (
+                {isIdle || isLoading ? (
+                  <TableCell>
+                    <Tooltip {...TOOLTIP_PROPS} title={message}>
+                      <span>
+                        <Button
+                          {...BUTTON_PROPS.PRIMARY_CONTAINED}
+                          disabled={disabled || isLoading}
+                          onClick={() => requestManifest?.()}
+                        >
+                          Request link
+                        </Button>
+                      </span>
+                    </Tooltip>
+                  </TableCell>
+                ) : (
                   <>
+                    {spreadsheetUrl && (
+                      <TableCell>
+                        <ButtonGroup
+                          Buttons={[
+                            <Button
+                              key="download"
+                              download
+                              href={spreadsheetUrl}
+                            >
+                              <DownloadIconSmall />
+                            </Button>,
+                            <Button
+                              key="copy"
+                              onClick={() => copy(spreadsheetUrl)}
+                            >
+                              <ContentCopyIconSmall />
+                            </Button>,
+                          ]}
+                        />
+                      </TableCell>
+                    )}
                     <TableCell>
-                      <ButtonBase
-                        disabled={disabled}
-                        download
-                        href={spreadsheetURL ?? ""}
-                        ref={downloadRef}
-                        sx={{ display: "none" }}
-                      />
-                      <Tooltip arrow title={message}>
-                        <span>
-                          <ButtonGroup
-                            Buttons={[
-                              <ButtonGroupButton
-                                key="download"
-                                action="Download metadata spreadsheet"
-                                disabled={disabled}
-                                label={<DownloadIconSmall />}
-                                onClick={downloadMetadataURL}
-                              />,
-                              <ButtonGroupButton
-                                key="copy"
-                                action="Copy metadata spreadsheet"
-                                disabled={disabled}
-                                label={<ContentCopyIconSmall />}
-                                onClick={(): void =>
-                                  copyMetadataURL(spreadsheetURL)
-                                }
-                              />,
-                            ]}
-                          />
-                        </span>
-                      </Tooltip>
+                      {spreadsheetUrl
+                        ? fileName
+                        : "The metadata is not available for this project."}
                     </TableCell>
-                    <TableCell>{fileName}</TableCell>
                   </>
-                ) : (
-                  <TableCell>
-                    The metadata is not available for this project.
-                  </TableCell>
                 )}
               </TableRow>
             </TableBody>

package/src/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/constants.ts

@@ -0,0 +1,24 @@
+import { TooltipProps } from "@mui/material";
+
+export const TOOLTIP_PROPS: Partial<TooltipProps> = {
+  arrow: true,
+  slotProps: {
+    popper: {
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, -4],
+          },
+        },
+        {
+          name: "preventOverflow",
+          options: { padding: 8 },
+        },
+      ],
+    },
+    tooltip: {
+      sx: { maxWidth: "none" },
+    },
+  },
+};

package/src/components/Filter/components/FilterCountChip/filterCountChip.styles.ts

@@ -0,0 +1,19 @@
+import { Chip, styled } from "@mui/material";
+
+export const StyledChip = styled(Chip)`
+  align-items: center;
+  border-radius: 10px;
+  flex: none;
+  gap: 0;
+  height: 16px;
+  justify-content: center;
+  min-width: 16px;
+  padding: 0 4px;
+
+  .MuiChip-label {
+    font-size: 9px;
+    font-weight: 600;
+    line-height: 16px;
+    padding: 0;
+  }
+`;

package/src/components/Filter/components/FilterCountChip/filterCountChip.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { CHIP_PROPS } from "../../../../styles/common/mui/chip";
+import { StyledChip } from "./filterCountChip.styles";
+import { FilterCountChipProps } from "./types";
+
+export const FilterCountChip = ({
+  className,
+  count,
+  ...props /* MuiChipProps */
+}: FilterCountChipProps): JSX.Element | null => {
+  if (!count) return null;
+  return (
+    <StyledChip
+      className={className}
+      color={CHIP_PROPS.COLOR.PRIMARY}
+      label={String(count)}
+      variant={CHIP_PROPS.VARIANT.FILLED}
+      {...props}
+    />
+  );
+};

package/src/components/Filter/components/FilterCountChip/stories/filterCountChip.stories.tsx

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { FilterCountChip } from "../filterCountChip";
+
+const meta: Meta<typeof FilterCountChip> = {
+  component: FilterCountChip,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DEFAULT: Story = { args: { count: 1, onDelete: undefined } };

package/src/components/Filter/components/FilterCountChip/types.ts

@@ -0,0 +1,6 @@
+import { ChipProps } from "@mui/material";
+import { BaseComponentProps } from "../../../types";
+
+export interface FilterCountChipProps extends BaseComponentProps, ChipProps {
+  count?: number | string;
+}

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

@@ -0,0 +1,5 @@
+import { rankings, RankItemOptions } from "@tanstack/match-sorter-utils";
+
+export const RANK_ITEM_OPTIONS: RankItemOptions = {
+  threshold: rankings.CONTAINS,
+};

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

@@ -0,0 +1,34 @@
+import { FilterMeta, Row, RowData } from "@tanstack/react-table";
+import { parseSearchTerms, rankColumnValue, rankRowColumns } from "./utils";
+
+/**
+ * Fuzzy matches a column against search terms.
+ * A true value is returned if the column's value passes the ranking threshold.
+ * Normally, TanStack global filtering will not process remaining row columns if a match is found.
+ * This function ranks other row columns for highlighting purposes.
+ * @param row - Row.
+ * @param columnId - Column identifier.
+ * @param value - Search term.
+ * @param addMeta - Function to add filter metadata.
+ * @returns Whether the row passed the filter.
+ */
+export function fuzzy<T extends RowData>(
+  row: Row<T>,
+  columnId: string,
+  value: unknown,
+  addMeta: (meta: FilterMeta) => void
+): boolean {
+  // Split the search term into terms.
+  const terms = parseSearchTerms(value);
+
+  // Rank the column value.
+  const passed = rankColumnValue(row, columnId, terms);
+
+  // Add the filter metadata.
+  addMeta({ passed });
+
+  // Rank other columns for highlighting purposes (TanStack global filtering will not process remaining columns if a match is found).
+  if (passed) rankRowColumns(row, columnId, terms);
+
+  return passed;
+}

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

@@ -0,0 +1,5 @@
+import { FilterMeta } from "@tanstack/react-table";
+
+export interface ColumnFilterMeta extends FilterMeta {
+  passed?: boolean;
+}

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

@@ -0,0 +1,74 @@
+import { rankItem } from "@tanstack/match-sorter-utils";
+import { Row, RowData } from "@tanstack/react-table";
+import { RANK_ITEM_OPTIONS } from "./constants";
+
+/**
+ * Parses a search term into an array of terms.
+ * @param value - Search term.
+ * @returns Array of terms.
+ */
+export function parseSearchTerms(value: unknown): string[] {
+  return String(value ?? "")
+    .toLowerCase()
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean);
+}
+
+/**
+ * Ranks a column's value against search terms.
+ * @param row - Row to rank.
+ * @param columnId - Column identifier.
+ * @param terms - Search terms to match against.
+ * @returns Whether the value passed.
+ */
+export function rankColumnValue<T extends RowData>(
+  row: Row<T>,
+  columnId: string,
+  terms: string[]
+): boolean {
+  // Get the column value.
+  const columnValue = row.getValue(columnId);
+
+  // Return false if the column value is undefined or null.
+  if (columnValue === undefined || columnValue === null) return false;
+
+  // Check if each term matches the column value.
+  // Ranking from CASE_SENSITIVE_EQUAL to CONTAINS (excludes `ACRONYM`, `MATCHES` threshold).
+  const rankings = terms.map((term) =>
+    rankItem(String(columnValue), term, RANK_ITEM_OPTIONS)
+  );
+
+  return rankings.every(({ passed }) => passed);
+}
+
+/**
+ * Ranks a row's columns against search terms.
+ * Processes columns that are searchable and have not already been processed.
+ * @param row - Row to rank.
+ * @param columnId - Column identifier.
+ * @param terms - Search terms to match against.
+ */
+export function rankRowColumns<T extends RowData>(
+  row: Row<T>,
+  columnId: string,
+  terms: string[]
+): void {
+  const columnFiltersMeta = row.columnFiltersMeta;
+
+  // Process other columns.
+  for (const { column } of row.getAllCells()) {
+    // Column is not searchable.
+    if (!column.getCanGlobalFilter()) continue;
+
+    // Column has already been processed.
+    if (column.id === columnId) continue;
+    if (column.id in columnFiltersMeta) continue;
+
+    // Rank the column value.
+    const passed = rankColumnValue(row, column.id, terms);
+
+    // Add the filter metadata.
+    row.columnFiltersMeta[column.id] = { passed };
+  }
+}

package/src/components/Table/components/TableCell/components/CodeCell/codeCell.styles.ts

@@ -0,0 +1,16 @@
+import styled from "@emotion/styled";
+import { Chip } from "@mui/material";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+
+export const StyledChip = styled(Chip)`
+  border-radius: 4px;
+  box-shadow: 0 0 0 2px ${PALETTE.COMMON_WHITE};
+  height: auto;
+  justify-self: flex-start;
+  min-width: 0;
+
+  .MuiChip-label {
+    padding: 2px 8px;
+    white-space: normal;
+  }
+`;

package/src/components/Table/components/TableCell/components/CodeCell/codeCell.tsx

@@ -0,0 +1,21 @@
+import { CellContext, RowData } from "@tanstack/react-table";
+import React from "react";
+import { CHIP_PROPS } from "../../../../../../styles/common/mui/chip";
+import { BaseComponentProps } from "../../../../../types";
+import { StyledChip } from "./codeCell.styles";
+
+export const CodeCell = <T extends RowData, TValue extends string = string>({
+  className,
+  getValue,
+}: BaseComponentProps & CellContext<T, TValue>): JSX.Element | null => {
+  const value = getValue();
+  if (!value) return null;
+  return (
+    <StyledChip
+      className={className}
+      color={CHIP_PROPS.COLOR.DEFAULT}
+      label={value}
+      size={CHIP_PROPS.SIZE.SMALL}
+    />
+  );
+};

package/src/components/Table/components/TableCell/components/RankedCell/rankedCell.tsx

@@ -0,0 +1,50 @@
+import { CellContext, RowData } from "@tanstack/react-table";
+import React, { Fragment } from "react";
+import { BaseComponentProps } from "../../../../../types";
+import { getTokens, getTokensRegex, isRankedCell } from "./utils";
+
+export const RankedCell = <
+  T extends RowData,
+  TValue = string | undefined | null
+>({
+  className,
+  column,
+  getValue,
+  row,
+  table,
+}: BaseComponentProps & CellContext<T, TValue>): JSX.Element | null => {
+  // Get the cell value.
+  const value = getValue();
+
+  // If the cell value is undefined or null, return null.
+  if (value === undefined || value === null) return null;
+
+  // Convert the cell value to a string.
+  const stringValue = String(value);
+
+  // Check if the cell is ranked.
+  const isRanked = isRankedCell(table, row, column.id);
+
+  // Return the unranked cell, as-is.
+  if (!isRanked) return <Fragment>{stringValue}</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>;
+
+  // Create regex pattern.
+  const regex = getTokensRegex(tokens);
+
+  // Return the ranked cell, with highlighting.
+  return (
+    <span className={className}>
+      {stringValue.split(regex).map((part, i) => (
+        <Fragment key={i}>
+          {part.match(regex) ? <mark>{part}</mark> : part}
+        </Fragment>
+      ))}
+    </span>
+  );
+};