Merge pull request #25 from galaxyproject/fran/18-analysis

feat: add "analysis" section (#18)

data-catalog/app/apis/catalog/brc-analytics-catalog/common/entities.ts

@@ -1,3 +1,5 @@
+export type BRCCatalog = BRCDataCatalogGenome;
+
 export interface BRCDataCatalogGenome {
   chromosomes: number;
   contigs: number;
@@ -9,3 +11,16 @@ export interface BRCDataCatalogGenome {
   ucscBrowserUrl: string;
   vEuPathDbProject: string;
 }
+
+export interface EntitiesResponse<R> {
+  hits: R[];
+  pagination: EntitiesResponsePagination;
+  termFacets: Record<never, never>;
+}
+
+export interface EntitiesResponsePagination {
+  count: number;
+  pages: number;
+  size: number;
+  total: number;
+}

data-catalog/app/apis/catalog/brc-analytics-catalog/common/utils.ts

@@ -1,5 +1,10 @@
 import { BRCDataCatalogGenome } from "./entities";
 
 export function getGenomeId(genome: BRCDataCatalogGenome): string {
-  return genome.organism;
+  return genome.genomeVersionAssemblyId;
+}
+
+export function getGenomeTitle(genome?: BRCDataCatalogGenome): string {
+  if (!genome) return "";
+  return `${genome.species} - ${genome.strain}`;
 }

data-catalog/app/components/Entity/components/AnalysisMethod/analysisMethod.styles.ts

@@ -0,0 +1,13 @@
+import { ButtonPrimary } from "@databiosphere/findable-ui/lib/components/common/Button/components/ButtonPrimary/buttonPrimary";
+import { CardContent } from "@databiosphere/findable-ui/lib/components/common/Card/card.styles";
+import styled from "@emotion/styled";
+
+export const StyledCardContent = styled(CardContent)`
+  gap: 4px;
+`;
+
+export const StyledButtonPrimary = styled(ButtonPrimary)`
+  justify-self: flex-start;
+  padding-bottom: 8px;
+  padding-top: 8px;
+`;

data-catalog/app/components/Entity/components/AnalysisMethod/analysisMethod.tsx

@@ -0,0 +1,48 @@
+import { CardProps } from "@databiosphere/findable-ui/lib/components/common/Card/card";
+import { CardSection } from "@databiosphere/findable-ui/lib/components/common/Card/card.styles";
+import { CardText } from "@databiosphere/findable-ui/lib/components/common/Card/components/CardText/cardText";
+import { CardTitle } from "@databiosphere/findable-ui/lib/components/common/Card/components/CardTitle/cardTitle";
+import { FluidPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
+import {
+  ANCHOR_TARGET,
+  REL_ATTRIBUTE,
+} from "@databiosphere/findable-ui/lib/components/Links/common/entities";
+import { Card } from "@mui/material";
+import {
+  StyledButtonPrimary,
+  StyledCardContent,
+} from "./analysisMethod.styles";
+
+export interface AnalysisMethodProps extends CardProps {
+  url: string;
+}
+
+export const AnalysisMethod = ({
+  Paper = FluidPaper,
+  text,
+  title,
+  url,
+}: AnalysisMethodProps): JSX.Element => {
+  return (
+    <Card component={Paper}>
+      <CardSection>
+        <StyledCardContent>
+          <CardTitle>{title}</CardTitle>
+          <CardText>{text}</CardText>
+        </StyledCardContent>
+        <StyledButtonPrimary
+          disabled={!url}
+          onClick={(): void => {
+            window.open(
+              url,
+              ANCHOR_TARGET.BLANK,
+              REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+            );
+          }}
+        >
+          Analyze
+        </StyledButtonPrimary>
+      </CardSection>
+    </Card>
+  );
+};

data-catalog/app/components/Entity/components/AnalysisMethod/mdx/assembly.mdx

@@ -0,0 +1 @@
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

data-catalog/app/components/Entity/components/AnalysisMethod/mdx/genomeComparisons.mdx

@@ -0,0 +1 @@
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

data-catalog/app/components/Entity/components/AnalysisMethod/mdx/index.tsx

@@ -0,0 +1,6 @@
+export { default as Assembly } from "./assembly.mdx";
+export { default as GenomeComparisons } from "./genomeComparisons.mdx";
+export { default as ProteinFolding } from "./proteinFolding.mdx";
+export { default as Regulation } from "./regulation.mdx";
+export { default as Transcriptomics } from "./transcriptomics.mdx";
+export { default as VariantCalling } from "./variantCalling.mdx";

data-catalog/app/components/Entity/components/AnalysisMethod/mdx/proteinFolding.mdx

@@ -0,0 +1 @@
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

data-catalog/app/components/Entity/components/AnalysisMethod/mdx/regulation.mdx

@@ -0,0 +1 @@
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

data-catalog/app/components/Entity/components/AnalysisMethod/mdx/transcriptomics.mdx

@@ -0,0 +1 @@
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

data-catalog/app/components/Entity/components/AnalysisMethod/mdx/variantCalling.mdx

@@ -0,0 +1 @@
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

data-catalog/app/components/Entity/components/AnalysisPortals/analysisPortals.styles.ts

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { ButtonBase } from "@mui/material";
+
+export const StyledButtonBase = styled(ButtonBase)`
+  display: grid;
+  gap: 8px;
+  grid-template-columns: auto 1fr;
+  justify-items: flex-start;
+`;

data-catalog/app/components/Entity/components/AnalysisPortals/analysisPortals.tsx

@@ -0,0 +1,47 @@
+import {
+  StaticImage,
+  StaticImageProps,
+} from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage";
+import {
+  ANCHOR_TARGET,
+  REL_ATTRIBUTE,
+} from "@databiosphere/findable-ui/lib/components/Links/common/entities";
+import { TEXT_BODY_400 } from "@databiosphere/findable-ui/lib/theme/common/typography";
+import { Typography } from "@mui/material";
+import { Fragment } from "react";
+import { StyledButtonBase } from "./analysisPortals.styles";
+
+export interface AnalysisPortals {
+  imageProps: StaticImageProps;
+  label: string;
+  url: string;
+}
+
+interface AnalysisPortalsProps {
+  portals: AnalysisPortals[];
+}
+
+export const AnalysisPortals = ({
+  portals,
+}: AnalysisPortalsProps): JSX.Element => {
+  if (portals.length === 0) return <span>None</span>;
+  return (
+    <Fragment>
+      {portals.map(({ imageProps, label, url }) => (
+        <StyledButtonBase
+          key={label}
+          onClick={(): void => {
+            window.open(
+              url,
+              ANCHOR_TARGET.BLANK,
+              REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+            );
+          }}
+        >
+          <StaticImage {...imageProps} key={label} />
+          <Typography variant={TEXT_BODY_400}>{label}</Typography>
+        </StyledButtonBase>
+      ))}
+    </Fragment>
+  );
+};

data-catalog/app/components/Layout/components/Detail/components/DetailViewHero/components/BackButton/backButton.styles.ts

@@ -0,0 +1,10 @@
+import { mediaDesktopSmallUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
+import styled from "@emotion/styled";
+import { HeroActions as DetailViewActions } from "../../detailViewHero.styles";
+
+export const HeroActions = styled(DetailViewActions)`
+  ${mediaDesktopSmallUp} {
+    align-self: flex-start;
+    margin: 8px 0;
+  }
+`;

data-catalog/app/components/Layout/components/Detail/components/DetailViewHero/components/BackButton/backButton.tsx

@@ -0,0 +1,32 @@
+import { SouthIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/SouthIcon/southIcon";
+import { IconButton } from "@mui/material";
+import { useRouter } from "next/router";
+import { useCallback } from "react";
+import { HeroActions } from "./backButton.styles";
+
+export const BackButton = (): JSX.Element => {
+  const { asPath, push } = useRouter();
+  const onNavigate = useCallback(
+    () => push(getNextPath(asPath)),
+    [asPath, push]
+  );
+  return (
+    <HeroActions>
+      <IconButton color="secondary" size="medium" onClick={onNavigate}>
+        <SouthIcon />
+      </IconButton>
+    </HeroActions>
+  );
+};
+
+/**
+ * Returns the next path to navigate to when the back button is clicked.
+ * The back button will navigate to the parent path of the current path.
+ * @param asPath - Current path.
+ * @returns next path.
+ */
+function getNextPath(asPath: string): string {
+  const path = asPath.split("/");
+  path.pop();
+  return path.join("/");
+}

data-catalog/app/components/Layout/components/Detail/components/DetailViewHero/detailViewHero.styles.ts

@@ -0,0 +1,60 @@
+import {
+  mediaDesktopSmallUp,
+  mediaTabletUp,
+} from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
+import styled from "@emotion/styled";
+
+export const DetailViewHero = styled.div`
+  display: grid;
+  gap: 16px;
+  grid-column: 1 / -1;
+  margin-bottom: 8px;
+`;
+
+export const DetailViewHeroHeadline = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  ${mediaDesktopSmallUp} {
+    flex-direction: row;
+  }
+`;
+
+export const HeroHeader = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+export const HeroTitle = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  ${mediaTabletUp} {
+    align-items: center;
+    flex-direction: row;
+  }
+
+  .MuiTypography-text-heading {
+    max-width: 726px;
+  }
+`;
+
+export const Titles = styled.div`
+  display: grid;
+  gap: 4px;
+`;
+
+export const HeroActions = styled.div`
+  align-items: center;
+  align-self: flex-start;
+  display: flex;
+  gap: 8px;
+
+  ${mediaDesktopSmallUp} {
+    align-self: center;
+  }
+`;

data-catalog/app/components/Layout/components/Detail/components/DetailViewHero/detailViewHero.tsx

@@ -0,0 +1,51 @@
+import { BackPageTabs } from "@databiosphere/findable-ui/lib/components/Layout/components/BackPage/backPageView.styles";
+import { SubTitle } from "@databiosphere/findable-ui/lib/components/Layout/components/BackPage/components/BackPageHero/components/SubTitle/subTitle";
+import { TEXT_HEADING } from "@databiosphere/findable-ui/lib/theme/common/typography";
+import { HeroTitle as Typography } from "@databiosphere/findable-ui/src/components/common/Title/title.styles";
+import { ReactNode } from "react";
+import { BackButton } from "./components/BackButton/backButton";
+import {
+  DetailViewHero as DetailViewHeroLayout,
+  DetailViewHeroHeadline,
+  HeroHeader,
+  HeroTitle,
+  Titles,
+} from "./detailViewHero.styles";
+
+export interface DetailViewHeroProps {
+  breadcrumbs?: ReactNode;
+  subTitle?: ReactNode;
+  tabs?: ReactNode;
+  title?: ReactNode;
+}
+
+export const DetailViewHero = ({
+  breadcrumbs,
+  subTitle,
+  tabs,
+  title,
+}: DetailViewHeroProps): JSX.Element => {
+  return (
+    <DetailViewHeroLayout>
+      {(breadcrumbs || title) && (
+        <DetailViewHeroHeadline>
+          <BackButton />
+          <HeroHeader>
+            {breadcrumbs}
+            <HeroTitle>
+              <Titles>
+                {title && (
+                  <Typography component="h1" variant={TEXT_HEADING}>
+                    {title}
+                  </Typography>
+                )}
+                {subTitle && <SubTitle subTitle={subTitle} />}
+              </Titles>
+            </HeroTitle>
+          </HeroHeader>
+        </DetailViewHeroHeadline>
+      )}
+      {tabs && <BackPageTabs>{tabs}</BackPageTabs>}
+    </DetailViewHeroLayout>
+  );
+};

data-catalog/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.styles.ts

@@ -0,0 +1,8 @@
+import { ButtonGroup } from "@databiosphere/findable-ui/lib/components/common/ButtonGroup/buttonGroup";
+import styled from "@emotion/styled";
+
+export const StyledButtonGroup = styled(ButtonGroup)`
+  .MuiButton-sizeSmall {
+    padding: 8px;
+  }
+`;

data-catalog/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.tsx

@@ -0,0 +1,57 @@
+import {
+  ANCHOR_TARGET,
+  REL_ATTRIBUTE,
+} from "@databiosphere/findable-ui/lib/components/Links/common/entities";
+import { Button } from "@mui/material";
+import Router from "next/router";
+import { ROUTES } from "../../../../../../../routes/contants";
+import { BRCDataCatalogGenome } from "../../../../../../apis/catalog/brc-analytics-catalog/common/entities";
+import { AnalyzeGenomeIcon } from "../../../../../common/CustomIcon/components/AnalyzeGenomeIcon/analyzeGenomeIcon";
+import { ViewGenomeIcon } from "../../../../../common/CustomIcon/components/ViewGenomeIcon/viewGenomeIcon";
+import { StyledButtonGroup } from "./analyzeGenome.styles";
+import {
+  BUTTON_GROUP_PROPS,
+  BUTTON_PROPS,
+  ICON_PROPS,
+} from "./common/constants";
+
+export interface AnalyzeGenomeProps {
+  genome: BRCDataCatalogGenome;
+}
+
+export const AnalyzeGenome = ({ genome }: AnalyzeGenomeProps): JSX.Element => {
+  const { genomeVersionAssemblyId, ucscBrowserUrl } = genome;
+
+  const onAnalyze = (entityId: string): void => {
+    Router.push(`${ROUTES.GENOMES}/${entityId}`);
+  };
+
+  const onView = (url: string | null): void => {
+    if (!url) return;
+    window.open(url, ANCHOR_TARGET.BLANK, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
+  };
+
+  return (
+    <StyledButtonGroup
+      {...BUTTON_GROUP_PROPS}
+      Buttons={[
+        <Button
+          {...BUTTON_PROPS}
+          disabled={!genomeVersionAssemblyId}
+          key="analyze"
+          onClick={(): void => onAnalyze(genomeVersionAssemblyId)}
+        >
+          <AnalyzeGenomeIcon {...ICON_PROPS} />
+        </Button>,
+        <Button
+          {...BUTTON_PROPS}
+          disabled={!ucscBrowserUrl}
+          key="view"
+          onClick={(): void => onView(ucscBrowserUrl)}
+        >
+          <ViewGenomeIcon {...ICON_PROPS} />
+        </Button>,
+      ]}
+    />
+  );
+};