@databiosphere/findable-ui 0.0.0

package/src/components/Detail/components/Table/components/TableHead/tableHead.tsx

@@ -0,0 +1,34 @@
+import { TableCell, TableHead as MTableHead, TableRow } from "@mui/material";
+import { flexRender, Table } from "@tanstack/react-table";
+import React, { Fragment } from "react";
+import { ROW_DIRECTION } from "../../../../../Table/common/entities";
+
+export interface TableBodyProps<T> {
+  rowDirection: ROW_DIRECTION;
+  tableInstance: Table<T>;
+}
+
+export const TableHead = <T extends object>({
+  rowDirection,
+  tableInstance,
+}: TableBodyProps<T>): JSX.Element => {
+  return (
+    <Fragment>
+      {rowDirection === ROW_DIRECTION.DEFAULT &&
+        tableInstance.getHeaderGroups().map((headerGroup) => (
+          <MTableHead key={headerGroup.id}>
+            <TableRow>
+              {headerGroup.headers.map((header) => (
+                <TableCell key={header.id}>
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  )}
+                </TableCell>
+              ))}
+            </TableRow>
+          </MTableHead>
+        ))}
+    </Fragment>
+  );
+};

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

@@ -0,0 +1,28 @@
+import { TableRow } from "@mui/material";
+import { Table } from "@tanstack/react-table";
+import React, { Fragment } from "react";
+import { v4 as uuid4 } from "uuid";
+import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
+
+export interface CollapsableRowsProps<T> {
+  tableInstance: Table<T>;
+}
+
+export const CollapsableRows = <T extends object>({
+  tableInstance,
+}: CollapsableRowsProps<T>): JSX.Element => {
+  const { getRowModel } = tableInstance;
+  const { rows } = getRowModel();
+  const uuid = uuid4(); // Generate a unique ID for the collapsable rows.
+  return (
+    <Fragment>
+      {rows.map((row) => {
+        return (
+          <TableRow key={`${uuid}${row.id}`}>
+            <CollapsableCell row={row} />
+          </TableRow>
+        );
+      })}
+    </Fragment>
+  );
+};

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

@@ -0,0 +1,36 @@
+import { TableCell, TableRow as MTableRow } from "@mui/material";
+import { flexRender, Table } from "@tanstack/react-table";
+import React, { Fragment } from "react";
+import { TableView } from "../../table";
+
+export interface TableRowsProps<T> {
+  tableInstance: Table<T>;
+  tableView?: TableView;
+}
+
+export const TableRows = <T extends object>({
+  tableInstance,
+  tableView,
+}: TableRowsProps<T>): JSX.Element => {
+  const { getRowModel } = tableInstance;
+  const { rows } = getRowModel();
+  const { tableCell } = tableView || {};
+  const { size: tableCellSize = "medium" } = tableCell || {};
+  return (
+    <Fragment>
+      {rows.map((row) => {
+        return (
+          <MTableRow key={row.id}>
+            {row.getVisibleCells().map((cell) => {
+              return (
+                <TableCell key={cell.id} size={tableCellSize}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              );
+            })}
+          </MTableRow>
+        );
+      })}
+    </Fragment>
+  );
+};

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

@@ -0,0 +1,74 @@
+import {
+  TableCellProps as MTableCellProps,
+  TableContainer,
+  TableContainerProps as MTableContainerProps,
+  TableProps as MTableProps,
+} from "@mui/material";
+import {
+  ColumnDef,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import React from "react";
+import {
+  BREAKPOINT_FN_NAME,
+  useBreakpointHelper,
+} from "../../../../hooks/useBreakpointHelper";
+import { TABLET } from "../../../../theme/common/breakpoints";
+import { ROW_DIRECTION } from "../../../Table/common/entities";
+import { GridTable } from "../../../Table/table.styles";
+import { generateColumnDefinitions } from "./common/utils";
+import { TableBody } from "./components/TableBody/tableBody";
+import { TableHead } from "./components/TableHead/tableHead";
+
+export interface TableView {
+  table?: Partial<MTableProps>;
+  tableCell?: Partial<MTableCellProps>;
+  tableContainer?: Partial<MTableContainerProps>;
+}
+
+export interface TableProps<T extends object> {
+  className?: string;
+  collapsable?: boolean;
+  columns: ColumnDef<T>[];
+  gridTemplateColumns: string;
+  items: T[];
+  tableView?: TableView;
+}
+
+export const Table = <T extends object>({
+  className,
+  collapsable = true,
+  columns,
+  gridTemplateColumns,
+  items,
+  tableView,
+}: TableProps<T>): JSX.Element => {
+  const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
+  const rowDirection =
+    collapsable && tabletDown ? ROW_DIRECTION.VERTICAL : ROW_DIRECTION.DEFAULT;
+  const { table, tableContainer } = tableView || {};
+  const { stickyHeader = false } = table || {};
+  const { sx: tableContainerSx } = tableContainer || {};
+  const tableInstance = useReactTable({
+    columns: generateColumnDefinitions(columns),
+    data: items,
+    getCoreRowModel: getCoreRowModel(),
+  });
+  return (
+    <TableContainer className={className} sx={tableContainerSx}>
+      <GridTable
+        collapsable={collapsable}
+        gridTemplateColumns={gridTemplateColumns}
+        stickyHeader={rowDirection === ROW_DIRECTION.DEFAULT && stickyHeader}
+      >
+        <TableHead rowDirection={rowDirection} tableInstance={tableInstance} />
+        <TableBody
+          rowDirection={rowDirection}
+          tableInstance={tableInstance}
+          tableView={tableView}
+        />
+      </GridTable>
+    </TableContainer>
+  );
+};

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

@@ -0,0 +1,62 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { CollaboratingOrganizationsStory } from "../Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories";
+import { ContactsStory } from "../Project/components/Contacts/contacts.stories";
+import { ContributorsStory } from "../Project/components/Contributors/contributors.stories";
+import { DataCuratorsStory } from "../Project/components/DataCurators/dataCurators.stories";
+import { DataReleasePolicyStory } from "../Project/components/DataReleasePolicy/dataReleasePolicy.stories";
+import { DescriptionStory } from "../Project/components/Description/description.stories";
+import { DetailsStory } from "../Project/components/Details/details.stories";
+import { PublicationsStory } from "../Project/components/Publications/publications.stories";
+import { SupplementaryLinksStory } from "../Project/components/SupplementaryLinks/supplementaryLinks.stories";
+import { Detail } from "./detail";
+
+export default {
+  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",
+} as ComponentMeta<typeof Detail>;
+
+const DetailTemplate: ComponentStory<typeof Detail> = (args) => (
+  <Detail {...args} />
+);
+
+export const DetailStory = DetailTemplate.bind({});
+DetailStory.args = {
+  isDetailOverview: true,
+  mainColumn: (
+    <>
+      <DescriptionStory
+        projectDescription={DescriptionStory.args?.projectDescription || "None"}
+      />
+      <ContactsStory {...ContactsStory.args} />
+      <PublicationsStory {...PublicationsStory.args} />
+      <ContributorsStory {...ContributorsStory.args} />
+      <CollaboratingOrganizationsStory
+        {...CollaboratingOrganizationsStory.args}
+      />
+      <DataCuratorsStory {...DataCuratorsStory.args} />
+      {/*<CitationStory {...CitationStory.args} />*/}
+      <SupplementaryLinksStory {...SupplementaryLinksStory.args} />
+      <DataReleasePolicyStory />
+    </>
+  ),
+  sideColumn: (
+    <>
+      <DetailsStory
+        keyValuePairs={DetailsStory.args?.keyValuePairs}
+        title={DetailsStory.args?.title ?? ""}
+      />
+    </>
+  ),
+  top: <></>,
+};

package/src/components/Detail/detail.tsx

@@ -0,0 +1,28 @@
+import React, { 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

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/react";
+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

@@ -0,0 +1,47 @@
+import styled from "@emotion/styled";
+import { textBody4002Lines } from "../../styles/common/mixins/fonts";
+import { TABLET } from "../../theme/common/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;
+
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+    padding: 0;
+  }
+`;
+
+export const SectionContent = styled.div`
+  text-align: center;
+`;
+
+export const ErrorCode = styled.div`
+  ${sectionMarginXsm}
+  ${textBody4002Lines}
+  font-family: "Roboto Mono", monospace;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+`;

package/src/components/Error/error.tsx

@@ -0,0 +1,111 @@
+import { Divider, Typography } from "@mui/material";
+import Link from "next/link";
+import React from "react";
+import { useExploreState } from "../../hooks/useExploreState";
+import { useLayoutState } from "../../hooks/useLayoutState";
+import { ExploreActionKind } from "../../providers/exploreState";
+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 {
+  SectionActions,
+  SectionContent as Content,
+} 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="text-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 {
+    layoutState: { headerHeight },
+  } = useLayoutState();
+
+  const handleToHomePageClicked = (): void => {
+    onReset?.();
+    exploreDispatch({
+      payload: "",
+      type: ExploreActionKind.ResetState,
+    });
+  };
+
+  return (
+    <ErrorLayout offset={headerHeight}>
+      <CustomError>
+        <ErrorSection>
+          <StatusIcon priority={PRIORITY.HIGH} StatusIcon={AlertIcon} />
+          <SectionContent>
+            <Typography component="h1" variant="text-heading-xlarge">
+              Error
+            </Typography>
+            <Typography variant="text-body-large-400">
+              An error occurred processing your request
+            </Typography>
+          </SectionContent>
+          {rootPath && (
+            <SectionActions>
+              <Link href={rootPath} legacyBehavior passHref>
+                <ButtonPrimary
+                  onClick={handleToHomePageClicked}
+                  href="passHref"
+                >
+                  To Homepage
+                </ButtonPrimary>
+              </Link>
+            </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

@@ -0,0 +1,46 @@
+import React, { PropsWithChildren, PropsWithRef } from "react";
+
+interface ErrorBoundaryState {
+  error?: Error;
+}
+
+interface FallbackRenderProps {
+  error: Error;
+  reset: () => void;
+}
+
+interface ErrorBoundaryProps {
+  fallbackRender: (props: FallbackRenderProps) => React.ReactNode;
+}
+
+type ErrorBoundaryPropsType = PropsWithRef<
+  PropsWithChildren<ErrorBoundaryProps>
+>;
+
+export class ErrorBoundary extends React.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

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

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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,30 @@
+import { track } from "../../../common/analytics/analytics";
+import { EVENT_NAME, EVENT_PARAM } from "../../../common/analytics/entities";
+
+/**
+ * Executes event tracking for bulk download.
+ * @param index - Index.
+ * @param toolName - Tool name.
+ * @param requestParams - Request params.
+ */
+export function bulkDownloadTracking(
+  index: string,
+  toolName: string,
+  requestParams?: URLSearchParams
+): void {
+  if (!requestParams) {
+    return;
+  }
+  // Grab catalog and current query from the request params.
+  const catalog = requestParams.get("catalog") as string; // Catalog will be defined.
+  const currentQuery = requestParams.get("filters") as string; // Filters will be defined.
+
+  // Track the bulk download requested event.
+  track(EVENT_NAME.BULK_DOWNLOAD_REQUESTED, {
+    [EVENT_PARAM.CATALOG]: catalog,
+    [EVENT_PARAM.CURRENT_QUERY]: currentQuery,
+    [EVENT_PARAM.ENTITY_TYPE]: "Bulk Download",
+    [EVENT_PARAM.INDEX]: index,
+    [EVENT_PARAM.TOOL_NAME]: toolName,
+  });
+}

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

@@ -0,0 +1,45 @@
+import { EXPORT_TO_TERRA_URL_PFB_FORMAT } from "../../../apis/azul/common/constants";
+import { MANIFEST_DOWNLOAD_FORMAT } from "../../../apis/azul/common/entities";
+
+/**
+ * Build URL to open Azul-generated location in Terra. Export URL requires encoded location and Terra-specific format
+ * if PFB.
+ * @param exportToTerraUrl - Environment-specific origin used when generating links to Terra.
+ * @param requestParams - Query string params used to generate the location.
+ * @param location - The generated location returned from Azul.
+ * @returns Complete URL for exporting to Terra.
+ */
+export function buildExportToTerraUrl(
+  exportToTerraUrl: string,
+  requestParams: URLSearchParams,
+  location?: string
+): string {
+  if (!location) {
+    console.error(
+      "Error attempting to build export to Terra link. No location given."
+    );
+    return "";
+  }
+
+  const format = requestParams.get("format"); // TODO(cc) constant
+  if (!format) {
+    console.error(
+      "Error attempting to build export to Terra link. No format found."
+    );
+    return "";
+  }
+
+  // Build up request params for export link: format if PFB and the encoded location.
+  const paramTokens = [];
+  if (format === MANIFEST_DOWNLOAD_FORMAT.TERRA_PFB) {
+    // Translate Azul PFB format param value to Terra PFB format value. That is, terra.pfb to PFB.
+    paramTokens.push(`format=${EXPORT_TO_TERRA_URL_PFB_FORMAT}`);
+  }
+
+  const encodedUrl = encodeURIComponent(location);
+  paramTokens.push(`url=${encodedUrl}`);
+  const urlParams = paramTokens.join("&");
+
+  // Generate complete export URL. TODO(cc) update domain to be configurable.
+  return `${exportToTerraUrl}#import-data?${urlParams}`;
+}

package/src/components/Export/components/DownloadCurlCommand/components/DownloadCurlCommandForm/downloadCurlCommandForm.styles.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+import { ButtonPrimary } from "../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
+
+export const Button = styled(ButtonPrimary)`
+  text-transform: none;
+`;