@databiosphere/findable-ui 50.6.1 → 50.7.1

package/src/components/Detail/components/Table/stories/filter/filter.stories.tsx

@@ -1,90 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { Table } from "../../table";
-import tableMeta from "../table.stories";
-import { COLUMN_FILTERS_STATE, FILTER_TABLE_ARGS } from "./args";
-
-const meta: Meta<typeof Table> = {
-  ...tableMeta,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Table>;
-
-export const FilterByStringValue: Story = {
-  args: {
-    ...FILTER_TABLE_ARGS,
-    tableOptions: {
-      ...FILTER_TABLE_ARGS.tableOptions,
-      initialState: {
-        ...FILTER_TABLE_ARGS.tableOptions?.initialState,
-        columnFilters: COLUMN_FILTERS_STATE.STRING,
-      },
-    },
-  },
-};
-
-export const FilterByArrayValue: Story = {
-  args: {
-    ...FILTER_TABLE_ARGS,
-    tableOptions: {
-      ...FILTER_TABLE_ARGS.tableOptions,
-      initialState: {
-        ...FILTER_TABLE_ARGS.tableOptions?.initialState,
-        columnFilters: COLUMN_FILTERS_STATE.ARRAY,
-      },
-    },
-  },
-};
-
-export const FilterByRangeBetweenValue: Story = {
-  args: {
-    ...FILTER_TABLE_ARGS,
-    tableOptions: {
-      ...FILTER_TABLE_ARGS.tableOptions,
-      initialState: {
-        ...FILTER_TABLE_ARGS.tableOptions?.initialState,
-        columnFilters: COLUMN_FILTERS_STATE.RANGE_BETWEEN,
-      },
-    },
-  },
-};
-
-export const FilterByRangeGreaterThanValue: Story = {
-  args: {
-    ...FILTER_TABLE_ARGS,
-    tableOptions: {
-      ...FILTER_TABLE_ARGS.tableOptions,
-      initialState: {
-        ...FILTER_TABLE_ARGS.tableOptions?.initialState,
-        columnFilters: COLUMN_FILTERS_STATE.RANGE_GREATER_THAN,
-      },
-    },
-  },
-};
-
-export const FilterByRangeLessThanValue: Story = {
-  args: {
-    ...FILTER_TABLE_ARGS,
-    tableOptions: {
-      ...FILTER_TABLE_ARGS.tableOptions,
-      initialState: {
-        ...FILTER_TABLE_ARGS.tableOptions?.initialState,
-        columnFilters: COLUMN_FILTERS_STATE.RANGE_LESS_THAN,
-      },
-    },
-  },
-};
-
-export const FilterByStringValueWithNoMatch: Story = {
-  args: {
-    ...FILTER_TABLE_ARGS,
-    tableOptions: {
-      ...FILTER_TABLE_ARGS.tableOptions,
-      initialState: {
-        ...FILTER_TABLE_ARGS.tableOptions?.initialState,
-        columnFilters: COLUMN_FILTERS_STATE.STRING_NO_MATCH,
-      },
-    },
-  },
-};

package/src/components/Detail/components/Table/stories/table.stories.tsx

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { ComponentProps } from "react";
-import { CONTROL_TYPE } from "../../../../../storybook/controls/types";
-import { configureControls } from "../../../../../storybook/controls/utils";
-import { Table } from "../table";
-import { DEFAULT_TABLE_ARGS } from "./args";
-import { BOOLEAN_CONTROLS, DISABLED_CONTROLS } from "./constants";
-
-const meta: Meta<typeof Table> = {
-  argTypes: {
-    ...configureControls<ComponentProps<typeof Table>>(
-      DISABLED_CONTROLS,
-      CONTROL_TYPE.DISABLED,
-    ),
-    ...configureControls<ComponentProps<typeof Table>>(
-      BOOLEAN_CONTROLS,
-      CONTROL_TYPE.BOOLEAN,
-    ),
-  },
-  component: Table,
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: DEFAULT_TABLE_ARGS,
-};

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

@@ -1,97 +0,0 @@
-import {
-  TableCellProps as MTableCellProps,
-  TableContainerProps as MTableContainerProps,
-  TableProps as MTableProps,
-  TableContainer,
-} from "@mui/material";
-import {
-  ColumnDef,
-  getCoreRowModel,
-  RowData,
-  TableOptions,
-  useReactTable,
-} from "@tanstack/react-table";
-import { JSX } from "react";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../hooks/useBreakpointHelper";
-import { arrIncludesSome } from "../../../Table/columnDef/columnFilters/filterFn";
-import { COLUMN_DEF } from "../../../Table/common/columnDef";
-import { ROW_DIRECTION } from "../../../Table/common/entities";
-import { TableHead } from "../../../Table/components/TableHead/tableHead";
-import { TABLE_DOWNLOAD_OPTIONS } from "../../../Table/featureOptions/tableDownload/constants";
-import { ROW_POSITION } from "../../../Table/features/RowPosition/constants";
-import { ROW_PREVIEW } from "../../../Table/features/RowPreview/constants";
-import { ROW_SELECTION_VALIDATION } from "../../../Table/features/RowSelectionValidation/constants";
-import { TABLE_DOWNLOAD } from "../../../Table/features/TableDownload/constants";
-import { GridTable } from "../../../Table/table.styles";
-import { generateColumnDefinitions } from "./common/utils";
-import { TableBody } from "./components/TableBody/tableBody";
-
-export interface TableView {
-  table?: Partial<MTableProps>;
-  tableCell?: Partial<MTableCellProps>;
-  tableContainer?: Partial<MTableContainerProps>;
-}
-
-export interface TableProps<T extends RowData> {
-  className?: string;
-  collapsable?: boolean;
-  columns: ColumnDef<T>[];
-  gridTemplateColumns: string;
-  items: T[];
-  tableOptions?: Partial<TableOptions<T>>;
-  tableView?: TableView;
-}
-
-export const Table = <T extends RowData>({
-  className,
-  collapsable = true,
-  columns,
-  gridTemplateColumns,
-  items,
-  tableOptions,
-  tableView,
-}: TableProps<T>): JSX.Element => {
-  const bpDownSm = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "sm");
-  const rowDirection =
-    collapsable && bpDownSm ? ROW_DIRECTION.VERTICAL : ROW_DIRECTION.DEFAULT;
-  const { table, tableContainer } = tableView || {};
-  const { stickyHeader = false } = table || {};
-  const { sx: tableContainerSx } = tableContainer || {};
-  const tableInstance = useReactTable({
-    _features: [
-      ROW_POSITION,
-      ROW_PREVIEW,
-      ROW_SELECTION_VALIDATION,
-      TABLE_DOWNLOAD,
-    ],
-    columns: generateColumnDefinitions([
-      COLUMN_DEF.ROW_POSITION as ColumnDef<T>,
-      ...columns,
-    ]),
-    data: items,
-    enableSorting: false,
-    filterFns: { arrIncludesSome },
-    getCoreRowModel: getCoreRowModel(),
-    ...TABLE_DOWNLOAD_OPTIONS,
-    ...tableOptions,
-  });
-  return (
-    <TableContainer className={className} sx={tableContainerSx}>
-      <GridTable
-        collapsable={collapsable}
-        gridTemplateColumns={gridTemplateColumns}
-        stickyHeader={rowDirection === ROW_DIRECTION.DEFAULT && stickyHeader}
-      >
-        <TableHead tableInstance={tableInstance} />
-        <TableBody
-          rowDirection={rowDirection}
-          tableInstance={tableInstance}
-          tableView={tableView}
-        />
-      </GridTable>
-    </TableContainer>
-  );
-};

package/src/components/Detail/detail.stories.tsx

@@ -1,66 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { CollaboratingOrganizations } from "../Project/components/CollaboratingOrganizations/collaboratingOrganizations";
-import { CollaboratingOrganizationsStory } from "../Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories";
-import { Contacts } from "../Project/components/Contacts/contacts";
-import { ContactsStory } from "../Project/components/Contacts/contacts.stories";
-import { Contributors } from "../Project/components/Contributors/contributors";
-import { ContributorsStory } from "../Project/components/Contributors/contributors.stories";
-import { DataCurators } from "../Project/components/DataCurators/dataCurators";
-import { DataCuratorsStory } from "../Project/components/DataCurators/dataCurators.stories";
-import { DataReleasePolicy } from "../Project/components/DataReleasePolicy/dataReleasePolicy";
-import { Description } from "../Project/components/Description/description";
-import { DescriptionStory } from "../Project/components/Description/description.stories";
-import { Details } from "../Project/components/Details/details";
-import { DetailsStory } from "../Project/components/Details/details.stories";
-import { Publications } from "../Project/components/Publications/publications";
-import { PublicationsStory } from "../Project/components/Publications/publications.stories";
-import { SupplementaryLinks } from "../Project/components/SupplementaryLinks/supplementaryLinks";
-import { SupplementaryLinksStory } from "../Project/components/SupplementaryLinks/supplementaryLinks.stories";
-import { Detail } from "./detail";
-
-const meta = {
-  argTypes: {
-    Tabs: { table: { disable: true } },
-    isDetailOverview: { control: "boolean" },
-    mainColumn: { table: { disable: true } },
-    sideColumn: { table: { disable: true } },
-    top: { table: { disable: true } },
-  },
-  component: Detail,
-  parameters: {
-    layout: "fullscreen",
-  },
-  title: "Views/EntityDetailView",
-} satisfies Meta<typeof Detail>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const DetailStory: Story = {
-  args: {
-    isDetailOverview: true,
-    mainColumn: (
-      <>
-        <Description
-          projectDescription={
-            DescriptionStory.args.projectDescription || "None"
-          }
-        />
-        <Contacts {...ContactsStory.args} />
-        <Publications {...PublicationsStory.args} />
-        <Contributors {...ContributorsStory.args} />
-        <CollaboratingOrganizations {...CollaboratingOrganizationsStory.args} />
-        <DataCurators {...DataCuratorsStory.args} />
-        <SupplementaryLinks {...SupplementaryLinksStory.args} />
-        <DataReleasePolicy />
-      </>
-    ),
-    sideColumn: (
-      <>
-        <Details {...DetailsStory.args} />
-      </>
-    ),
-    top: <></>,
-  },
-};

package/src/components/Detail/detail.tsx

@@ -1,28 +0,0 @@
-import { JSX, ReactNode } from "react";
-import { BackPageView } from "../Layout/components/BackPage/backPageView";
-
-export interface DetailProps {
-  isDetailOverview?: boolean;
-  mainColumn: ReactNode;
-  sideColumn?: ReactNode;
-  Tabs?: ReactNode;
-  top: ReactNode;
-}
-
-export const Detail = ({
-  isDetailOverview,
-  mainColumn,
-  sideColumn,
-  Tabs,
-  top,
-}: DetailProps): JSX.Element => {
-  return (
-    <BackPageView
-      isDetailOverview={isDetailOverview}
-      mainColumn={mainColumn}
-      sideColumn={sideColumn}
-      Tabs={Tabs}
-      top={top}
-    />
-  );
-};

package/src/components/Error/error.stories.tsx

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { Error } from "./error";
-
-export default {
-  argTypes: {
-    errorMessage: { control: "text" },
-    requestUrlMessage: { control: "text" },
-    rootPath: { control: "text" },
-  },
-  component: Error,
-  parameters: {
-    layout: "fullscreen",
-  },
-  title: "Components/Communication",
-} as Meta<typeof Error>;
-
-type Story = StoryObj<typeof Error>;
-
-export const ClientSideErrorStory: Story = {
-  args: {
-    rootPath: "#",
-  },
-};
-
-export const ClientSideErrorWithErrorCodeStory: Story = {
-  args: {
-    errorMessage:
-      "curl --location --fail 'https://service.azul.data.humancellatlas.org/manifest/files?catalog=dcp16&format=curl&filters=%7B%22projectId%22%3A+%7B%22is%22%3A+%5B%22f86f1ab4-1fbb-4510-ae35-3ffd752d4dfc%22%5D%7D%2C+%22fileFormat%22%3A+%7B%22is%22%3A+%5B%22fastq.gz%22%5D%7D%2C+%22genusSpecies%22%3A%7B%22is%22%3A%5B%22Homo+sapiens%22%5D%7D%7D&objectKey=manifests%2Fee705e99-35d3-5ae1-9e31-89d206e4240b.e735a6e0-9914-5b40-8fa2-c4d581644f50.curlrc' | curl --config -",
-    requestUrlMessage:
-      "https://service.azul.data.humancellatlas.org/manifest/files?catalog=dcp16&format=compact&filters=%7B%22projectId%22%3A+%7B%22is%22%3A+%5B%2274b6d569-3b11-42ef-b6b1-a0454522b4a0%22%5D%7D%2C+%22genusSpecies%22%3A+%7B%22is%22%",
-    rootPath: "#",
-  },
-};

package/src/components/Error/error.styles.ts

@@ -1,47 +0,0 @@
-import styled from "@emotion/styled";
-import { FONT } from "../../styles/common/constants/font";
-import { bpUpSm } from "../../styles/common/mixins/breakpoints";
-import { Section, sectionMarginXsm } from "../common/Section/section.styles";
-
-interface Props {
-  offset: number;
-}
-
-export const ErrorLayout = styled("div", {
-  shouldForwardProp: (prop) => prop !== "offset",
-})<Props>`
-  flex: 1;
-  margin-top: ${({ offset }) => offset}px;
-`;
-
-export const Error = styled.div`
-  margin: 0 auto;
-  max-width: 648px;
-  padding: 40px 20px;
-  width: 100%;
-
-  hr {
-    margin: 32px 0;
-  }
-`;
-
-export const ErrorSection = styled(Section)`
-  align-items: center;
-  padding: 0;
-
-  ${bpUpSm} {
-    padding: 0;
-  }
-`;
-
-export const SectionContent = styled.div`
-  text-align: center;
-`;
-
-export const ErrorCode = styled.div`
-  ${sectionMarginXsm}
-  font: ${FONT.BODY_400_2_LINES};
-  font-family: "Roboto Mono", monospace;
-  font-size: 12px;
-  overflow-wrap: anywhere;
-`;

package/src/components/Error/error.tsx

@@ -1,115 +0,0 @@
-import { Divider, Typography } from "@mui/material";
-import Link from "next/link";
-import { JSX } from "react";
-import { useExploreState } from "../../hooks/useExploreState";
-import { ExploreActionKind } from "../../providers/exploreState";
-import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
-import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
-import { ButtonPrimary } from "../common/Button/components/ButtonPrimary/buttonPrimary";
-import { AlertIcon } from "../common/CustomIcon/components/AlertIcon/alertIcon";
-import { Grid } from "../common/Grid/grid";
-import { RoundedPaper } from "../common/Paper/paper.styles";
-import {
-  SectionContent as Content,
-  SectionActions,
-} from "../common/Section/section.styles";
-import { PRIORITY, StatusIcon } from "../common/StatusIcon/statusIcon";
-import {
-  Error as CustomError,
-  ErrorCode,
-  ErrorLayout,
-  ErrorSection,
-  SectionContent,
-} from "./error.styles";
-
-interface ErrorDetailSectionProps {
-  detail: string;
-  title: string;
-}
-
-const ErrorMessage = ({
-  detail,
-  title,
-}: ErrorDetailSectionProps): JSX.Element => (
-  <Content>
-    <Typography
-      component="h3"
-      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500}
-    >
-      {title}
-    </Typography>
-    <RoundedPaper>
-      <ErrorCode>{detail}</ErrorCode>
-    </RoundedPaper>
-  </Content>
-);
-
-export interface ErrorProps {
-  errorMessage?: string;
-  onReset?: () => void;
-  requestUrlMessage?: string;
-  rootPath?: string;
-}
-
-export const Error = ({
-  errorMessage,
-  onReset,
-  requestUrlMessage,
-  rootPath,
-}: ErrorProps): JSX.Element => {
-  const { exploreDispatch } = useExploreState();
-  const { dimensions } = useLayoutDimensions();
-
-  const handleToHomePageClicked = (): void => {
-    onReset?.();
-    exploreDispatch({
-      payload: "",
-      type: ExploreActionKind.ResetState,
-    });
-  };
-
-  return (
-    <ErrorLayout offset={dimensions.header.height}>
-      <CustomError>
-        <ErrorSection>
-          <StatusIcon priority={PRIORITY.HIGH} StatusIcon={AlertIcon} />
-          <SectionContent>
-            <Typography
-              component="h1"
-              variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_XLARGE}
-            >
-              Error
-            </Typography>
-            <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_400}>
-              An error occurred processing your request
-            </Typography>
-          </SectionContent>
-          {rootPath && (
-            <SectionActions>
-              <ButtonPrimary
-                component={Link}
-                href={rootPath}
-                onClick={handleToHomePageClicked}
-              >
-                To Homepage
-              </ButtonPrimary>
-            </SectionActions>
-          )}
-        </ErrorSection>
-        {(requestUrlMessage || errorMessage) && (
-          <>
-            <Divider />
-            <Grid gridSx={{ gap: 6 }}>
-              {requestUrlMessage && (
-                <ErrorMessage detail={requestUrlMessage} title="Request URL" />
-              )}
-              {errorMessage && (
-                <ErrorMessage detail={errorMessage} title="Error Message" />
-              )}
-            </Grid>
-          </>
-        )}
-      </CustomError>
-    </ErrorLayout>
-  );
-};

package/src/components/ErrorBoundary/errorBoundary.tsx

@@ -1,46 +0,0 @@
-import { Component, ReactNode, PropsWithChildren, PropsWithRef } from "react";
-
-interface ErrorBoundaryState {
-  error?: Error;
-}
-
-interface FallbackRenderProps {
-  error: Error;
-  reset: () => void;
-}
-
-interface ErrorBoundaryProps {
-  fallbackRender: (props: FallbackRenderProps) => ReactNode;
-}
-
-type ErrorBoundaryPropsType = PropsWithRef<
-  PropsWithChildren<ErrorBoundaryProps>
->;
-
-export class ErrorBoundary extends Component<
-  ErrorBoundaryPropsType,
-  ErrorBoundaryState
-> {
-  constructor(props: ErrorBoundaryPropsType) {
-    super(props);
-    this.reset = this.reset.bind(this);
-    this.state = {};
-  }
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { error };
-  }
-
-  reset(): void {
-    this.setState({});
-  }
-
-  render(): React.ReactNode {
-    if (this.state.error) {
-      const fallbackProps = { error: this.state.error, reset: this.render };
-      return this.props.fallbackRender(fallbackProps);
-    }
-
-    return this.props.children;
-  }
-}

package/src/components/ErrorBoundary/index.ts

@@ -1 +0,0 @@
-export { ErrorBoundary } from "./errorBoundary";

package/src/components/Export/common/entities.ts

@@ -1,53 +0,0 @@
-import { MANIFEST_DOWNLOAD_FORMAT } from "../../../apis/azul/common/entities";
-import {
-  FileFacet,
-  Term,
-} from "../../../hooks/useFileManifest/common/entities";
-
-/**
- * Set of supported shells that bulk download curl can be executed on.
- */
-export enum BULK_DOWNLOAD_EXECUTION_ENVIRONMENT {
-  "BASH" = "bash",
-  "CMD_EXE" = "cmd.exe",
-}
-
-/**
- * Execution environment.
- */
-export type ExecutionEnvironment = BULK_DOWNLOAD_EXECUTION_ENVIRONMENT;
-
-/**
- * Model of file summary "file type/file format" facet.
- */
-export interface FileSummaryFacet extends Omit<FileFacet, "terms"> {
-  formLabel?: string;
-  terms: FileSummaryTerm[];
-}
-
-/**
- * Model of file summary "file type/file format" facet term.
- */
-export interface FileSummaryTerm extends Term {
-  size?: number;
-}
-
-/**
- * Model of form related facet.
- */
-export interface FormFacet {
-  fileSummaryFacet?: FileSummaryFacet;
-  speciesFacet?: FormFileFacet;
-}
-
-/**
- * Model of form file facet.
- */
-export interface FormFileFacet extends FileFacet {
-  formLabel?: string;
-}
-
-/**
- * Manifest download format.
- */
-export type ManifestDownloadFormat = MANIFEST_DOWNLOAD_FORMAT;

package/src/components/Export/common/tracking.ts

@@ -1,73 +0,0 @@
-import { track } from "../../../common/analytics/analytics";
-import { EVENT_NAME, EVENT_PARAM } from "../../../common/analytics/entities";
-
-/**
- * Executes event tracking for bulk download.
- * @param entity_name - Entity (tab) name.
- * @param toolName - Tool name.
- */
-export function trackBulkDownloadRequested(
-  entity_name: string,
-  toolName: string,
-): void {
-  // Track the bulk download requested event.
-  track(EVENT_NAME.BULK_DOWNLOAD_REQUESTED, {
-    [EVENT_PARAM.ENTITY_NAME]: entity_name,
-    [EVENT_PARAM.TOOL_NAME]: toolName,
-  });
-}
-
-/**
- * Executes event tracking for the dataset file manifest export.
- */
-export function trackDatasetFileManifestRequested(): void {
-  track(EVENT_NAME.DATASET_FILE_MANIFEST_REQUESTED);
-}
-
-/**
- * Executes event tracking for the dataset Terra export.
- */
-export function trackDatasetExportToTerraRequested(): void {
-  track(EVENT_NAME.DATASET_ANALYZE_IN_TERRA_REQUESTED);
-}
-
-/**
- * Executes event tracking for the file manifest export.
- * @param entity_name - Entity (tab) name.
- */
-export function trackFileManifestRequested(entity_name: string): void {
-  // Track the file manifest requested event.
-  track(EVENT_NAME.INDEX_FILE_MANIFEST_REQUESTED, {
-    [EVENT_PARAM.ENTITY_NAME]: entity_name,
-  });
-}
-
-/**
- * Executes event tracking for the Terra export.
- * @param entity_name - Entity (tab) name.
- */
-export function trackExportToTerraRequested(entity_name: string): void {
-  // Track the export to terra event.
-  track(EVENT_NAME.INDEX_ANALYZE_IN_TERRA_REQUESTED, {
-    [EVENT_PARAM.ENTITY_NAME]: entity_name,
-  });
-}
-
-/**
- * Executes event tracking for individual file downloads
- * @param entity_name - The name of the file downloaded.
- * @param related_entity_id - The ID of the file's dataset / project
- * @param related_entity_name -The name of the file's dataset / project
- */
-export function trackFileDownloaded(
-  entity_name: string,
-  related_entity_id: string,
-  related_entity_name: string,
-): void {
-  // Track the file downloaded event.
-  track(EVENT_NAME.FILE_DOWNLOADED, {
-    [EVENT_PARAM.ENTITY_NAME]: entity_name,
-    [EVENT_PARAM.RELATED_ENTITY_ID]: related_entity_id,
-    [EVENT_PARAM.RELATED_ENTITY_NAME]: related_entity_name,
-  });
-}