diff --git a/app/components/Entity/components/AnalysisMethod/analysisMethod.styles.ts b/app/components/Entity/components/AnalysisMethod/analysisMethod.styles.ts index 7bf6fce..e948148 100644 --- a/app/components/Entity/components/AnalysisMethod/analysisMethod.styles.ts +++ b/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", +})` + 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; + } `; diff --git a/app/components/Entity/components/AnalysisMethod/analysisMethod.tsx b/app/components/Entity/components/AnalysisMethod/analysisMethod.tsx index 977c5c0..7a9c93c 100644 --- a/app/components/Entity/components/AnalysisMethod/analysisMethod.tsx +++ b/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(); return ( - - - - {title} - {text} - - => { - 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"} - - - + => { + 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" + > + + {content} + + + ); }; diff --git a/app/components/Entity/components/AnalysisMethod/constants.ts b/app/components/Entity/components/AnalysisMethod/constants.ts new file mode 100644 index 0000000..25cf44b --- /dev/null +++ b/app/components/Entity/components/AnalysisMethod/constants.ts @@ -0,0 +1,10 @@ +import { ChipProps, SvgIconProps } from "@mui/material"; + +export const CHIP_PROPS: Partial = { + variant: "status", +}; + +export const ICON_PROPS: Partial = { + color: "inkLight", + fontSize: "small", +}; diff --git a/app/components/Entity/components/AnalysisMethod/content/assembly.mdx b/app/components/Entity/components/AnalysisMethod/content/assembly.mdx index 128d783..1af7a37 100644 --- a/app/components/Entity/components/AnalysisMethod/content/assembly.mdx +++ b/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. diff --git a/app/components/Entity/components/AnalysisMethod/content/genomeComparisons.mdx b/app/components/Entity/components/AnalysisMethod/content/genomeComparisons.mdx index 116c1ad..2605151 100644 --- a/app/components/Entity/components/AnalysisMethod/content/genomeComparisons.mdx +++ b/app/components/Entity/components/AnalysisMethod/content/genomeComparisons.mdx @@ -1 +1,3 @@ +### Genome comparisons + Workflows for creation of pairwise and multiple genome alignments. diff --git a/app/components/Entity/components/AnalysisMethod/content/proteinFolding.mdx b/app/components/Entity/components/AnalysisMethod/content/proteinFolding.mdx index 57e1d2e..d2e4215 100644 --- a/app/components/Entity/components/AnalysisMethod/content/proteinFolding.mdx +++ b/app/components/Entity/components/AnalysisMethod/content/proteinFolding.mdx @@ -1 +1,3 @@ +### Protein folding + Analysis of protein folding using the ColabFold framework. diff --git a/app/components/Entity/components/AnalysisMethod/content/regulation.mdx b/app/components/Entity/components/AnalysisMethod/content/regulation.mdx index 6d887dd..c019369 100644 --- a/app/components/Entity/components/AnalysisMethod/content/regulation.mdx +++ b/app/components/Entity/components/AnalysisMethod/content/regulation.mdx @@ -1 +1,3 @@ +### Regulation + Workflows for the analysis of ChIP-seq, ATAC-Seq and beyond. diff --git a/app/components/Entity/components/AnalysisMethod/content/transcriptomics.mdx b/app/components/Entity/components/AnalysisMethod/content/transcriptomics.mdx index 91f0480..1a426ad 100644 --- a/app/components/Entity/components/AnalysisMethod/content/transcriptomics.mdx +++ b/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. diff --git a/app/components/Entity/components/AnalysisMethod/content/variantCalling.mdx b/app/components/Entity/components/AnalysisMethod/content/variantCalling.mdx index 86599c4..639908e 100644 --- a/app/components/Entity/components/AnalysisMethod/content/variantCalling.mdx +++ b/app/components/Entity/components/AnalysisMethod/content/variantCalling.mdx @@ -1 +1,3 @@ +### Variant calling + Identify nucleotide polymorphisms and short indels from Illumina and Element data. diff --git a/app/components/Entity/components/AnalysisMethod/types.ts b/app/components/Entity/components/AnalysisMethod/types.ts new file mode 100644 index 0000000..3c8fb1a --- /dev/null +++ b/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; +} diff --git a/app/components/Entity/components/AnalysisMethod/utils.ts b/app/components/Entity/components/AnalysisMethod/utils.ts new file mode 100644 index 0000000..68c94b1 --- /dev/null +++ b/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"; +} diff --git a/app/components/Entity/components/AnalysisMethods/analysisMethods.tsx b/app/components/Entity/components/AnalysisMethods/analysisMethods.tsx new file mode 100644 index 0000000..7d96b7f --- /dev/null +++ b/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 ( + + + Choose Analysis Method + {children} + + + ); +}; diff --git a/app/components/Entity/components/AnalysisMethods/types.ts b/app/components/Entity/components/AnalysisMethods/types.ts new file mode 100644 index 0000000..64e7177 --- /dev/null +++ b/app/components/Entity/components/AnalysisMethods/types.ts @@ -0,0 +1,5 @@ +import { ReactNode } from "react"; + +export interface Props { + children: ReactNode | ReactNode[]; +} diff --git a/app/components/index.ts b/app/components/index.ts index feea23d..db22014 100644 --- a/app/components/index.ts +++ b/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"; diff --git a/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts b/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts index 5ad0a6b..49c7fc1 100644 --- a/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts +++ b/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts @@ -1,5 +1,4 @@ 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, @@ -7,10 +6,7 @@ import { 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 & { - analysisMethod: ANALYSIS_METHOD; - } + analysisMethodProps: Pick< + ComponentProps, + "analysisMethod" | "content" + > ): ComponentProps => { return { - analysisMethod, + ...analysisMethodProps, geneModelUrl: genome.geneModelUrl, genomeVersionAssemblyId: genome.genomeVersionAssemblyId, - text, - title, }; }; diff --git a/site-config/brc-analytics/local/entity/genome/analysisMethodMainColumn.ts b/site-config/brc-analytics/local/entity/genome/analysisMethodMainColumn.ts index 8cf9769..fe962c6 100644 --- a/site-config/brc-analytics/local/entity/genome/analysisMethodMainColumn.ts +++ b/site-config/brc-analytics/local/entity/genome/analysisMethodMainColumn.ts @@ -8,87 +8,57 @@ export const mainColumn: ComponentsConfig = [ { children: [ { - component: C.AnalysisMethodsTitle, - props: { - title: "Preview", - }, - }, - { - component: C.FluidAlert, - props: { - severity: "info", - title: "Preview the worklows below in a test environment.", - variant: "banner", - }, - }, - { - component: C.AnalysisMethod, - viewBuilder: (r) => - V.buildGenomeAnalysisMethod(r, { - analysisMethod: ANALYSIS_METHOD.VARIANT_CALLING, - text: MDX.VariantCalling({}), - title: "Variant calling", - }), - }, - { - component: C.AnalysisMethod, - viewBuilder: (r) => - V.buildGenomeAnalysisMethod(r, { - analysisMethod: ANALYSIS_METHOD.TRANSCRIPTOMICS, - text: MDX.Transcriptomics({}), - title: "Transcriptomics", - }), - }, - { - component: C.AnalysisMethod, - viewBuilder: (r) => - V.buildGenomeAnalysisMethod(r, { - analysisMethod: ANALYSIS_METHOD.REGULATION, - text: MDX.Regulation({}), - title: "Regulation", - }), - }, - { - component: C.AnalysisMethodsTitle, - props: { - title: "Coming Soon", - }, - }, - { - component: C.FluidAlert, - props: { - severity: "info", - title: - "We are in the process of adapting these workflows to the needs of the pathogen community.", - variant: "banner", - }, - }, - { - component: C.AnalysisMethod, - viewBuilder: (r) => - V.buildGenomeAnalysisMethod(r, { - analysisMethod: ANALYSIS_METHOD.ASSEMBLY, - text: MDX.Assembly({}), - title: "Assembly", - }), - }, - { - component: C.AnalysisMethod, - viewBuilder: (r) => - V.buildGenomeAnalysisMethod(r, { - analysisMethod: ANALYSIS_METHOD.GENOME_COMPARISONS, - text: MDX.GenomeComparisons({}), - title: "Genome comparisons", - }), - }, - { - component: C.AnalysisMethod, - viewBuilder: (r) => - V.buildGenomeAnalysisMethod(r, { - analysisMethod: ANALYSIS_METHOD.PROTEIN_FOLDING, - text: MDX.ProteinFolding({}), - title: "Protein folding", - }), + children: [ + { + component: C.AnalysisMethod, + viewBuilder: (r) => + V.buildGenomeAnalysisMethod(r, { + analysisMethod: ANALYSIS_METHOD.VARIANT_CALLING, + content: MDX.VariantCalling({}), + }), + }, + { + component: C.AnalysisMethod, + viewBuilder: (r) => + V.buildGenomeAnalysisMethod(r, { + analysisMethod: ANALYSIS_METHOD.TRANSCRIPTOMICS, + content: MDX.Transcriptomics({}), + }), + }, + { + component: C.AnalysisMethod, + viewBuilder: (r) => + V.buildGenomeAnalysisMethod(r, { + analysisMethod: ANALYSIS_METHOD.REGULATION, + content: MDX.Regulation({}), + }), + }, + { + component: C.AnalysisMethod, + viewBuilder: (r) => + V.buildGenomeAnalysisMethod(r, { + analysisMethod: ANALYSIS_METHOD.ASSEMBLY, + content: MDX.Assembly({}), + }), + }, + { + component: C.AnalysisMethod, + viewBuilder: (r) => + V.buildGenomeAnalysisMethod(r, { + analysisMethod: ANALYSIS_METHOD.GENOME_COMPARISONS, + content: MDX.GenomeComparisons({}), + }), + }, + { + component: C.AnalysisMethod, + viewBuilder: (r) => + V.buildGenomeAnalysisMethod(r, { + analysisMethod: ANALYSIS_METHOD.PROTEIN_FOLDING, + content: MDX.ProteinFolding({}), + }), + }, + ], + component: C.AnalysisMethods, }, ], component: C.BackPageContentMainColumn,