@databiosphere/findable-ui 50.6.1 → 50.7.1

package/src/components/NoResults/noResults.styles.ts

@@ -1,14 +0,0 @@
-import styled from "@emotion/styled";
-import { PALETTE } from "../../styles/common/constants/palette";
-import { Section, SectionContent } from "../common/Section/section.styles";
-
-export const StyledSection = styled(Section)`
-  align-items: center;
-  background-color: ${PALETTE.COMMON_WHITE};
-  padding: 40px !important; /* Overrides section padding. */
-`;
-
-export const StyledSectionContent = styled(SectionContent)`
-  max-width: 456px;
-  text-align: center;
-`;

package/src/components/NoResults/noResults.tsx

@@ -1,37 +0,0 @@
-import { Typography } from "@mui/material";
-import { Fragment, JSX } from "react";
-import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
-import { SearchOffIcon } from "../common/CustomIcon/components/SearchOffIcon/searchOffIcon";
-import { SectionTitle } from "../common/Section/components/SectionTitle/sectionTitle";
-import { SectionActions } from "../common/Section/section.styles";
-import { PRIORITY, StatusIcon } from "../common/StatusIcon/statusIcon";
-import { StyledSection, StyledSectionContent } from "./noResults.styles";
-import { NoResultsProps } from "./types";
-
-export const NoResults = ({
-  actions,
-  description,
-  Paper,
-  title,
-}: NoResultsProps): JSX.Element => {
-  const StyledPaper = Paper ?? Fragment;
-  return (
-    <StyledPaper>
-      <StyledSection>
-        <StatusIcon priority={PRIORITY.LOW} StatusIcon={SearchOffIcon} />
-        <StyledSectionContent>
-          <SectionTitle title={title} />
-          {description && (
-            <Typography
-              color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-              variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
-            >
-              {description}
-            </Typography>
-          )}
-        </StyledSectionContent>
-        {actions && <SectionActions>{actions}</SectionActions>}
-      </StyledSection>
-    </StyledPaper>
-  );
-};

package/src/components/NoResults/types.ts

@@ -1,13 +0,0 @@
-import { ReactNode } from "react";
-import {
-  FlatPaper,
-  FluidPaper,
-  RoundedPaper,
-} from "../common/Paper/paper.styles";
-
-export interface NoResultsProps {
-  actions?: ReactNode;
-  description?: string;
-  Paper: typeof FlatPaper | typeof FluidPaper | typeof RoundedPaper | null;
-  title: string;
-}

package/src/components/Plot/components/BarX/barX.tsx

@@ -1,20 +0,0 @@
-import * as Plot from "@observablehq/plot";
-import { JSX, useEffect, useRef } from "react";
-import { BarXProps } from "./types";
-
-export const BarX = ({
-  className,
-  options,
-  testId,
-}: BarXProps): JSX.Element => {
-  const chartRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (chartRef.current) chartRef.current.innerHTML = "";
-    const chart = Plot.plot(options);
-    chartRef.current?.appendChild(chart);
-    return (): void => chart.remove();
-  }, [options]);
-
-  return <div className={className} data-testid={testId} ref={chartRef} />;
-};

package/src/components/Plot/components/BarX/types.ts

@@ -1,6 +0,0 @@
-import { PlotOptions } from "@observablehq/plot";
-import { BaseComponentProps, TestIdProps } from "../../../types";
-
-export interface BarXProps extends BaseComponentProps, TestIdProps {
-  options?: PlotOptions;
-}

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

@@ -1,50 +0,0 @@
-/**
- * Model of project collaborating organization to be used as props for the CollaboratingOrganizations component.
- */
-export interface CollaboratingOrganization {
-  citation: number;
-  name: string;
-}
-
-/**
- * Model of project contact to be used as props for the Contacts component.
- */
-export interface Contact {
-  email?: string;
-  institution?: string;
-  name: string;
-}
-
-/**
- * Model of project contributor to be used as props for the Contributors component.
- */
-export interface Contributor {
-  citation?: number;
-  name: string;
-  role?: string;
-}
-
-/**
- * Model of project data curator to be used as props for the DataCurators component.
- */
-export type DataCurator = string;
-
-/**
- * Model of project description to be used as props for the Description component.
- */
-export type Description = string;
-
-/**
- * Model of project publication to be used as props for the Publication component.
- */
-export interface Publication {
-  doi?: string;
-  officialHcaPublication?: boolean;
-  publicationTitle: string;
-  publicationUrl: string;
-}
-
-/**
- * Model of project supplementary link to be used as props for the SupplementaryLinks component.
- */
-export type SupplementaryLink = string;

package/src/components/Project/components/Citation/citation.stories.tsx

@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { Citation } from "./citation";
-
-const meta: Meta<typeof Citation> = {
-  argTypes: {
-    projectPath: { control: "text" },
-    url: { control: "text" },
-  },
-  component: Citation,
-  title: "Components/SectionContent/Content/Project",
-};
-
-export default meta;
-type Story = StoryObj<typeof Citation>;
-
-export const CitationStory: Story = {
-  args: {
-    projectPath: "60ea42e1-af49-42f5-8164-d641fdb696bc",
-    url: "https://data.humancellatlas.org/explore/projects/",
-  },
-};

package/src/components/Project/components/Citation/citation.styles.ts

@@ -1,22 +0,0 @@
-import styled from "@emotion/styled";
-
-export const SectionContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 0; /* required to ellipsis any flex child */
-  width: 100%; /* required to ellipsis any flex child */
-`;
-
-export const CitationLink = styled.div`
-  align-items: center;
-  display: flex;
-  min-width: 0;
-
-  // Copy icon button
-  & button {
-    bottom: 2px; /* Center aligns icon with link text without affecting overall rendered citation link height */
-    margin-left: 8px;
-    position: relative;
-  }
-`;

package/src/components/Project/components/Citation/citation.tsx

@@ -1,37 +0,0 @@
-import { Typography } from "@mui/material";
-import { JSX } from "react";
-import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
-import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
-import { ANCHOR_TARGET } from "../../../Links/common/entities";
-import { Link } from "../../../Links/components/Link/link";
-import { CitationLink, SectionContent } from "./citation.styles";
-
-export interface CitationProps {
-  projectPath?: string;
-  url?: string;
-}
-
-export const Citation = ({ projectPath, url }: CitationProps): JSX.Element => {
-  return (
-    <CollapsableSection collapsable title="Citation">
-      {projectPath && url ? (
-        <SectionContent>
-          <Typography>
-            To reference this project, please use the following link:
-          </Typography>
-          <CitationLink>
-            <Link
-              copyable
-              label={`${url}${projectPath}`}
-              noWrap
-              target={ANCHOR_TARGET.BLANK}
-              url={`${url}${projectPath}`}
-            />
-          </CitationLink>
-        </SectionContent>
-      ) : (
-        <SectionDetailsEmpty />
-      )}
-    </CollapsableSection>
-  );
-};

package/src/components/Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories.tsx

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { CollaboratingOrganizations } from "./collaboratingOrganizations";
-
-const meta = {
-  argTypes: {
-    collaboratingOrganizations: { control: "object" },
-  },
-  component: CollaboratingOrganizations,
-  title: "Components/SectionContent/Content/Project",
-} satisfies Meta<typeof CollaboratingOrganizations>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const CollaboratingOrganizationsStory: Story = {
-  args: {
-    collaboratingOrganizations: [
-      {
-        citation: 1,
-        name: "The Jackson Laboratory",
-      },
-      {
-        citation: 2,
-        name: "The New York Genome Center",
-      },
-      {
-        citation: 3,
-        name: "Weill Cornell Medicine",
-      },
-    ],
-  },
-};

package/src/components/Project/components/CollaboratingOrganizations/collaboratingOrganizations.tsx

@@ -1,30 +0,0 @@
-import { JSX } from "react";
-import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
-import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
-import { CollaboratingOrganization } from "../../common/entities";
-import { Sup } from "../Sup/sup.styles";
-
-export interface CollaboratingOrganizationsProps {
-  collaboratingOrganizations?: CollaboratingOrganization[];
-}
-
-export const CollaboratingOrganizations = ({
-  collaboratingOrganizations,
-}: CollaboratingOrganizationsProps): JSX.Element => {
-  return (
-    <CollapsableSection collapsable title="Collaborating Organizations">
-      {collaboratingOrganizations ? (
-        <div>
-          {collaboratingOrganizations.map(({ citation, name }, c) => (
-            <div key={`${name}${c}`}>
-              <Sup>{citation}</Sup>
-              <span>{name}</span>
-            </div>
-          ))}
-        </div>
-      ) : (
-        <SectionDetailsEmpty />
-      )}
-    </CollapsableSection>
-  );
-};

package/src/components/Project/components/Contacts/contacts.stories.tsx

@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { Contacts } from "./contacts";
-
-const meta = {
-  argTypes: {
-    contacts: { control: "object" },
-  },
-  component: Contacts,
-  title: "Components/SectionContent/Content/Project",
-} satisfies Meta<typeof Contacts>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const ContactsStory: Story = {
-  args: {
-    contacts: [
-      {
-        email: "gervaise.henry@utsouthwestern.edu",
-        institution: "UT Southwestern",
-        name: "Gervaise H Henry",
-      },
-      {
-        email: "poppy@utsouthwestern.edu",
-        institution: "UT Southwestern",
-        name: "Poppy Rose Roberts",
-      },
-    ],
-  },
-};

package/src/components/Project/components/Contacts/contacts.tsx

@@ -1,34 +0,0 @@
-import { Link, Typography } from "@mui/material";
-import { JSX } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
-import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
-import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
-import { SectionContentListItem } from "../../../common/Section/section.styles";
-import { Contact } from "../../common/entities";
-
-export interface ContactsProps {
-  contacts?: Contact[];
-}
-
-export const Contacts = ({ contacts }: ContactsProps): JSX.Element => {
-  return (
-    <CollapsableSection collapsable title="Contact">
-      {contacts ? (
-        contacts.map(({ email, institution, name }, c) => (
-          <SectionContentListItem key={`${name}${c}`}>
-            <Typography
-              fontWeight={500}
-              variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}
-            >
-              {name}
-            </Typography>
-            {institution && <span>{institution}</span>}
-            {email && <Link href={`mailto:${email}`}>{email}</Link>}
-          </SectionContentListItem>
-        ))
-      ) : (
-        <SectionDetailsEmpty />
-      )}
-    </CollapsableSection>
-  );
-};

package/src/components/Project/components/Contributors/contributors.stories.tsx

@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { Contributors } from "./contributors";
-
-const meta = {
-  component: Contributors,
-  title: "Components/SectionContent/Content/Project",
-} satisfies Meta<typeof Contributors>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const ContributorsStory: Story = {
-  args: {
-    contributors: [
-      {
-        citation: 1,
-        name: "Rose R Reginold",
-        role: undefined,
-      },
-      {
-        citation: 1,
-        name: "Frank D Dirk",
-        role: "Project Coordinator",
-      },
-      {
-        citation: 2,
-        name: "Marcelo Freire",
-        role: "Principal Investigator",
-      },
-      {
-        citation: 3,
-        name: "Nathan Lawlor",
-        role: "Computational Scientist",
-      },
-    ],
-  },
-};

package/src/components/Project/components/Contributors/contributors.tsx

@@ -1,31 +0,0 @@
-import { JSX } from "react";
-import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
-import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
-import { Contributor } from "../../common/entities";
-import { Sup } from "../Sup/sup.styles";
-
-export interface ContributorsProps {
-  contributors?: Contributor[];
-}
-
-export const Contributors = ({
-  contributors,
-}: ContributorsProps): JSX.Element => {
-  return (
-    <CollapsableSection collapsable title="Contributors">
-      {contributors ? (
-        <div>
-          {contributors.map(({ citation, name, role }, c) => (
-            <div key={`${name}${c}`}>
-              <span>{name}</span>
-              {role && <span> ({role})</span>}
-              {citation && <Sup>{citation}</Sup>}
-            </div>
-          ))}
-        </div>
-      ) : (
-        <SectionDetailsEmpty />
-      )}
-    </CollapsableSection>
-  );
-};

package/src/components/Project/components/DataCurators/dataCurators.stories.tsx

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { DataCurators } from "./dataCurators";
-
-const meta = {
-  argTypes: {
-    dataCurators: { control: "object" },
-  },
-  component: DataCurators,
-  title: "Components/SectionContent/Content/Project",
-} satisfies Meta<typeof DataCurators>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const DataCuratorsStory: Story = {
-  args: {
-    dataCurators: ["Schwartz Rachel", "William Sullivan", "Parisa Nejad"],
-  },
-};

package/src/components/Project/components/DataCurators/dataCurators.tsx

@@ -1,26 +0,0 @@
-import { JSX } from "react";
-import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
-import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
-import { DataCurator } from "../../common/entities";
-
-export interface DataCuratorsProps {
-  dataCurators?: DataCurator[];
-}
-
-export const DataCurators = ({
-  dataCurators,
-}: DataCuratorsProps): JSX.Element => {
-  return (
-    <CollapsableSection collapsable title="Data Curators">
-      {dataCurators ? (
-        <div>
-          {dataCurators.map((name, n) => (
-            <div key={`${name}${n}`}>{name}</div>
-          ))}
-        </div>
-      ) : (
-        <SectionDetailsEmpty />
-      )}
-    </CollapsableSection>
-  );
-};

package/src/components/Project/components/DataReleasePolicy/dataReleasePolicy.stories.tsx

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { DataReleasePolicy } from "./dataReleasePolicy";
-
-const meta = {
-  component: DataReleasePolicy,
-  title: "Components/SectionContent/Content/Project",
-} satisfies Meta<typeof DataReleasePolicy>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const DataReleasePolicyStory: Story = {};

package/src/components/Project/components/DataReleasePolicy/dataReleasePolicy.tsx

@@ -1,22 +0,0 @@
-import { Link, Typography } from "@mui/material";
-import { JSX } from "react";
-import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
-import { ANCHOR_TARGET, REL_ATTRIBUTE } from "../../../Links/common/entities";
-
-export const DataReleasePolicy = (): JSX.Element => {
-  return (
-    <CollapsableSection title="Data Access Policy">
-      <Typography>
-        For information regarding data sharing and data use, please see our{" "}
-        <Link
-          href="https://anvilproject.org/faq/data-security/"
-          rel={REL_ATTRIBUTE.NO_OPENER_NO_REFERRER}
-          target={ANCHOR_TARGET.BLANK}
-        >
-          Data Access Policy
-        </Link>
-        .
-      </Typography>
-    </CollapsableSection>
-  );
-};

package/src/components/Project/components/Description/description.stories.tsx

@@ -1,18 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { Description } from "./description";
-
-const meta = {
-  component: Description,
-  title: "Components/SectionContent/Content/Project",
-} satisfies Meta<typeof Description>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const DescriptionStory: Story = {
-  args: {
-    projectDescription:
-      "Although the function of the mammalian pancreas hinges on complex interactions of distinct cell types, gene expression profiles have primarily been described with bulk mixtures. Here we implemented a droplet-based, single-cell RNA-seq method to determine the transcriptomes of over 12,000 individual pancreatic cells from four human donors and two mouse strains. Cells could be divided into 15 clusters that matched previously characterized cell types: all endocrine cell types, including rare epsilon-cells; exocrine cell types; vascular cells; Schwann cells; quiescent and activated stellate cells; and four types of immune cells. We detected subpopulations of ductal cells with distinct expression profiles and validated their existence with immuno-histochemistry stains. Moreover, among human beta- cells, we detected heterogeneity in the regulation of genes relating to functional maturation and levels of ER stress. Finally, we deconvolved bulk gene expression samples using the single-cell data to detect disease-associated differential expression. Our dataset provides a resource for the discovery of novel cell type-specific transcription factors, signaling receptors, and medically relevant genes.",
-  },
-};

package/src/components/Project/components/Description/description.tsx

@@ -1,18 +0,0 @@
-import { Typography } from "@mui/material";
-import { JSX } from "react";
-import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
-import { Description as ProjectDescription } from "../../common/entities";
-
-export interface DescriptionProps {
-  projectDescription: ProjectDescription;
-}
-
-export const Description = ({
-  projectDescription,
-}: DescriptionProps): JSX.Element => {
-  return (
-    <CollapsableSection title={"Description"}>
-      <Typography>{projectDescription}</Typography>
-    </CollapsableSection>
-  );
-};

package/src/components/Project/components/Details/details.stories.tsx

@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { KeyValues } from "../../../common/KeyValuePairs/keyValuePairs";
-import { Details } from "./details";
-
-// Template constants
-const details: KeyValues = new Map([
-  ["Project Label", "HeterogeneityCD4TCells"],
-  ["Species", "Homo sapiens"],
-  ["Sample Type", "specimens"],
-  ["Anatomical Entity", "eye"],
-]);
-
-const meta = {
-  argTypes: {
-    keyValuePairs: { control: "object" },
-    title: { control: "text" },
-  },
-  component: Details,
-  title: "Components/SectionContent/Content/Project",
-} satisfies Meta<typeof Details>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const DetailsStory: Story = {
-  args: {
-    keyValuePairs: details,
-    title: "",
-  },
-};

package/src/components/Project/components/Details/details.tsx

@@ -1,50 +0,0 @@
-import { Typography } from "@mui/material";
-import { Fragment, JSX } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
-import {
-  Key,
-  KeyValuePairs,
-  KeyValues,
-} from "../../../common/KeyValuePairs/keyValuePairs";
-import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
-import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
-import { Stack } from "../../../common/Stack/stack";
-
-export interface DetailsProps {
-  keyValuePairs?: KeyValues;
-  title: string;
-}
-
-/**
- * Wrapper element around the key.
- * @param props - Set of values accepted by this component as props.
- * @param props.children - Key component children.
- * @returns typography component.
- */
-function renderKey(props: { children: Key }): JSX.Element {
-  return (
-    <Typography color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}>
-      {props.children}
-    </Typography>
-  );
-}
-
-export const Details = ({
-  keyValuePairs,
-  title,
-}: DetailsProps): JSX.Element => {
-  return (
-    <CollapsableSection collapsable title={title}>
-      {keyValuePairs ? (
-        <KeyValuePairs
-          KeyElType={renderKey}
-          keyValuePairs={keyValuePairs}
-          KeyValuesElType={Fragment}
-          KeyValueElType={Stack}
-        />
-      ) : (
-        <SectionDetailsEmpty />
-      )}
-    </CollapsableSection>
-  );
-};