feat: update dataset level 'choose analysis method' (#148) (#158)

Co-authored-by: Fran McDade <[email protected]>

app/components/Entity/components/AnalysisMethod/analysisMethod.styles.ts

@@ -1,13 +1,77 @@
-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 { GridPaperSection } from "@databiosphere/findable-ui/lib/components/common/Section/section.styles";
+import {
+  inkLight,
+  smokeDark,
+  smokeLightest,
+} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
+import {
+  textBody4002Lines,
+  textBody500,
+} from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
-export const StyledCardContent = styled(CardContent)`
-  gap: 4px;
+interface Props {
+  isPreview: boolean;
+}
+
+export const StyledSection = styled(GridPaperSection, {
+  shouldForwardProp: (props) => props !== "isPreview",
+})<Props>`
+  flex-direction: row;
+  gap: 16px;
+
+  .MuiChip-root,
+  .MuiSvgIcon-root {
+    align-self: center;
+  }
+
+  .MuiSvgIcon-root {
+    transform: rotate(180deg);
+    transition: transform 300ms;
+  }
+
+  &:hover {
+    .MuiSvgIcon-root {
+      transform: rotate(180deg) translateX(-2px);
+    }
+  }
+
+  ${(props) =>
+    props.isPreview &&
+    css`
+      cursor: pointer;
+    `}
+
+  ${(props) =>
+    !props.isPreview &&
+    css`
+      background-color: ${smokeLightest(props)};
+      pointer-events: none;
+
+      .MuiChip-root {
+        .MuiChip-label {
+          color: ${inkLight(props)};
+        }
+      }
+
+      .MuiSvgIcon-root {
+        color: ${smokeDark(props)};
+      }
+    `}
 `;
 
-export const StyledButtonPrimary = styled(ButtonPrimary)`
-  justify-self: flex-start;
-  padding-bottom: 8px;
-  padding-top: 8px;
+export const SectionContent = styled.div`
+  flex: 1;
+
+  h3 {
+    ${textBody500};
+    margin: 0 0 4px;
+  }
+
+  p {
+    ${textBody4002Lines};
+    color: ${inkLight};
+    margin: 0;
+  }
 `;

app/components/Entity/components/AnalysisMethod/analysisMethod.tsx

@@ -1,68 +1,60 @@
-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 { SouthIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/SouthIcon/southIcon";
 import {
   ANCHOR_TARGET,
   REL_ATTRIBUTE,
 } from "@databiosphere/findable-ui/lib/components/Links/common/entities";
+import {
+  Loading,
+  LOADING_PANEL_STYLE,
+} from "@databiosphere/findable-ui/lib/components/Loading/loading";
 import { useAsync } from "@databiosphere/findable-ui/src/hooks/useAsync";
-import { Card } from "@mui/material";
+import { Chip } from "@mui/material";
 import { WORKFLOW_IDS_BY_ANALYSIS_METHOD } from "app/apis/catalog/brc-analytics-catalog/common/constants";
 import { getWorkflowLandingUrl } from "app/utils/galaxy-api";
-import { ANALYSIS_METHOD } from "../../../../apis/catalog/brc-analytics-catalog/common/entities";
-import {
-  StyledButtonPrimary,
-  StyledCardContent,
-} from "./analysisMethod.styles";
-
-export interface AnalysisMethodProps extends CardProps {
-  analysisMethod: ANALYSIS_METHOD;
-  geneModelUrl: string;
-  genomeVersionAssemblyId: string;
-}
+import { SectionContent, StyledSection } from "./analysisMethod.styles";
+import { CHIP_PROPS, ICON_PROPS } from "./constants";
+import { Props } from "./types";
+import { getChipColor, getChipLabel } from "./utils";
 
 export const AnalysisMethod = ({
   analysisMethod,
+  content,
   geneModelUrl,
   genomeVersionAssemblyId,
-  Paper = FluidPaper,
-  text,
-  title,
-}: AnalysisMethodProps): JSX.Element => {
+}: Props): JSX.Element => {
   const workflowId = WORKFLOW_IDS_BY_ANALYSIS_METHOD[analysisMethod];
+  const isPreview = Boolean(workflowId);
   const { data: landingUrl, isLoading, run } = useAsync<string>();
   return (
-    <Card component={Paper}>
-      <CardSection>
-        <StyledCardContent>
-          <CardTitle>{title}</CardTitle>
-          <CardText>{text}</CardText>
-        </StyledCardContent>
-        <StyledButtonPrimary
-          disabled={!workflowId || isLoading}
-          onClick={async (): Promise<void> => {
-            if (!workflowId) return;
-            const url =
-              landingUrl ??
-              (await run(
-                getWorkflowLandingUrl(
-                  workflowId,
-                  genomeVersionAssemblyId,
-                  geneModelUrl
-                )
-              ));
-            window.open(
-              url,
-              ANCHOR_TARGET.BLANK,
-              REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
-            );
-          }}
-        >
-          {isLoading ? "Loading..." : "Analyze"}
-        </StyledButtonPrimary>
-      </CardSection>
-    </Card>
+    <StyledSection
+      isPreview={isPreview}
+      onClick={async (): Promise<void> => {
+        if (!workflowId) return;
+        const url =
+          landingUrl ??
+          (await run(
+            getWorkflowLandingUrl(
+              workflowId,
+              genomeVersionAssemblyId,
+              geneModelUrl
+            )
+          ));
+        window.open(
+          url,
+          ANCHOR_TARGET.BLANK,
+          REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+        );
+      }}
+      role="button"
+    >
+      <Loading loading={isLoading} panelStyle={LOADING_PANEL_STYLE.INHERIT} />
+      <SectionContent>{content}</SectionContent>
+      <Chip
+        {...CHIP_PROPS}
+        color={getChipColor(isPreview)}
+        label={getChipLabel(isPreview)}
+      />
+      <SouthIcon {...ICON_PROPS} />
+    </StyledSection>
   );
 };

app/components/Entity/components/AnalysisMethod/constants.ts

@@ -0,0 +1,10 @@
+import { ChipProps, SvgIconProps } from "@mui/material";
+
+export const CHIP_PROPS: Partial<ChipProps> = {
+  variant: "status",
+};
+
+export const ICON_PROPS: Partial<SvgIconProps> = {
+  color: "inkLight",
+  fontSize: "small",
+};

app/components/Entity/components/AnalysisMethod/content/assembly.mdx

@@ -1 +1,3 @@
+### Assembly
+
 Best practices for assembly of prokaryotic and eukaryotic genomes sequenced with a variety of technologies.

app/components/Entity/components/AnalysisMethod/content/genomeComparisons.mdx

@@ -1 +1,3 @@
+### Genome comparisons
+
 Workflows for creation of pairwise and multiple genome alignments.

app/components/Entity/components/AnalysisMethod/content/proteinFolding.mdx

@@ -1 +1,3 @@
+### Protein folding
+
 Analysis of protein folding using the ColabFold framework.

app/components/Entity/components/AnalysisMethod/content/regulation.mdx

@@ -1 +1,3 @@
+### Regulation
+
 Workflows for the analysis of ChIP-seq, ATAC-Seq and beyond.

app/components/Entity/components/AnalysisMethod/content/transcriptomics.mdx

@@ -1 +1,3 @@
+### Transcriptomics
+
 Analyze bulk or single-cell RNA seq data using a variety of approaches.

app/components/Entity/components/AnalysisMethod/content/variantCalling.mdx

@@ -1 +1,3 @@
+### Variant calling
+
 Identify nucleotide polymorphisms and short indels from Illumina and Element data.

app/components/Entity/components/AnalysisMethod/types.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import { ANALYSIS_METHOD } from "../../../../apis/catalog/brc-analytics-catalog/common/entities";
+
+export interface Props {
+  analysisMethod: ANALYSIS_METHOD;
+  content: ReactNode;
+  geneModelUrl: string;
+  genomeVersionAssemblyId: string;
+}

app/components/Entity/components/AnalysisMethod/utils.ts

@@ -0,0 +1,19 @@
+import { STATUS_BADGE_COLOR } from "@databiosphere/findable-ui/lib/components/common/StatusBadge/statusBadge";
+
+/**
+ * Returns chip color.
+ * @param canPreview - Analysis method can be previewed.
+ * @returns Chip color.
+ */
+export function getChipColor(canPreview: boolean): STATUS_BADGE_COLOR {
+  return canPreview ? STATUS_BADGE_COLOR.INFO : STATUS_BADGE_COLOR.DEFAULT;
+}
+
+/**
+ * Returns chip label.
+ * @param canPreview - Analysis method can be previewed.
+ * @returns Chip label.
+ */
+export function getChipLabel(canPreview: boolean): string {
+  return canPreview ? "Preview" : "Coming Soon";
+}

app/components/Entity/components/AnalysisMethods/analysisMethods.tsx

@@ -0,0 +1,17 @@
+import {
+  FluidPaper,
+  GridPaper,
+} from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
+import { GridPaperSection } from "@databiosphere/findable-ui/lib/components/common/Section/section.styles";
+import { Props } from "./types";
+
+export const AnalysisMethods = ({ children }: Props): JSX.Element => {
+  return (
+    <FluidPaper>
+      <GridPaper>
+        <GridPaperSection>Choose Analysis Method</GridPaperSection>
+        {children}
+      </GridPaper>
+    </FluidPaper>
+  );
+};

app/components/Entity/components/AnalysisMethods/types.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export interface Props {
+  children: ReactNode | ReactNode[];
+}

app/components/index.ts

@@ -23,6 +23,7 @@ export { Link } from "@databiosphere/findable-ui/lib/components/Links/components
 export { BasicCell } from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell";
 export { CopyText } from "./common/CopyText/copyText";
 export { AnalysisMethod } from "./Entity/components/AnalysisMethod/analysisMethod";
+export { AnalysisMethods } from "./Entity/components/AnalysisMethods/analysisMethods";
 export { AnalysisMethodsTitle } from "./Entity/components/AnalysisMethodsTitle/analysisMethodsTitle";
 export { AnalysisPortals } from "./Entity/components/AnalysisPortals/analysisPortals";
 export { DetailViewHero } from "./Layout/components/Detail/components/DetailViewHero/detailViewHero";

app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts

@@ -1,16 +1,12 @@
 import { Breadcrumb } from "@databiosphere/findable-ui/lib/components/common/Breadcrumbs/breadcrumbs";
-import { CardProps } from "@databiosphere/findable-ui/lib/components/common/Card/card";
 import {
   Key,
   Value,
 } from "@databiosphere/findable-ui/lib/components/common/KeyValuePairs/keyValuePairs";
 import { ViewContext } from "@databiosphere/findable-ui/lib/config/entities";
 import { ComponentProps } from "react";
 import { ROUTES } from "../../../../../routes/constants";
-import {
-  ANALYSIS_METHOD,
-  BRCDataCatalogGenome,
-} from "../../../../apis/catalog/brc-analytics-catalog/common/entities";
+import { BRCDataCatalogGenome } from "../../../../apis/catalog/brc-analytics-catalog/common/entities";
 import * as C from "../../../../components";
 import { GENOME_BROWSER, NCBI_DATASETS_URL } from "./constants";
 
@@ -76,28 +72,22 @@ export const buildContigs = (
 /**
  * Build props for the genome AnalysisMethod component.
  * @param genome - Genome entity.
- * @param cardProps - Card properties.
- * @param cardProps.text - Card text.
- * @param cardProps.title - Card title.
- * @param cardProps.analysisMethod - Analysis method.
+ * @param analysisMethodProps - Analysis Method properties.
+ * @param analysisMethodProps.analysisMethod - Analysis method.
+ * @param analysisMethodProps.content - Content to be displayed.
  * @returns Props to be used for the AnalysisMethod component.
  */
 export const buildGenomeAnalysisMethod = (
   genome: BRCDataCatalogGenome,
-  {
-    analysisMethod,
-    text,
-    title,
-  }: Partial<CardProps> & {
-    analysisMethod: ANALYSIS_METHOD;
-  }
+  analysisMethodProps: Pick<
+    ComponentProps<typeof C.AnalysisMethod>,
+    "analysisMethod" | "content"
+  >
 ): ComponentProps<typeof C.AnalysisMethod> => {
   return {
-    analysisMethod,
+    ...analysisMethodProps,
     geneModelUrl: genome.geneModelUrl,
     genomeVersionAssemblyId: genome.genomeVersionAssemblyId,
-    text,
-    title,
   };
 };