feat: make analysis buttons open workflow landing pages (#137)

app/apis/catalog/brc-analytics-catalog/common/constants.ts

@@ -0,0 +1,8 @@
+import { ANALYSIS_METHOD, WORKFLOW_ID } from "./entities";
+
+export const WORKFLOW_IDS_BY_ANALYSIS_METHOD: Partial<
+  Record<ANALYSIS_METHOD, WORKFLOW_ID>
+> = {
+  [ANALYSIS_METHOD.REGULATION]: WORKFLOW_ID.REGULATION,
+  [ANALYSIS_METHOD.TRANSCRIPTOMICS]: WORKFLOW_ID.TRANSCRIPTOMICS,
+};

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

@@ -1,3 +1,12 @@
+export enum ANALYSIS_METHOD {
+  ASSEMBLY = "ASSEMBLY",
+  GENOME_COMPARISONS = "GENOME_COMPARISONS",
+  PROTEIN_FOLDING = "PROTEIN_FOLDING",
+  REGULATION = "REGULATION",
+  TRANSCRIPTOMICS = "TRANSCRIPTOMICS",
+  VARIANT_CALLING = "VARIANT_CALLING",
+}
+
 export type BRCCatalog = BRCDataCatalogGenome;
 
 export interface BRCDataCatalogGenome {
@@ -25,3 +34,8 @@ export interface EntitiesResponsePagination {
   size: number;
   total: number;
 }
+
+export enum WORKFLOW_ID {
+  REGULATION = "https://dockstore.org/api/ga4gh/trs/v2/tools/#workflow/github.com/iwc-workflows/chipseq-pe/main/versions/v0.12",
+  TRANSCRIPTOMICS = "https://dockstore.org/api/ga4gh/trs/v2/tools/#workflow/github.com/iwc-workflows/rnaseq-pe/main/versions/v0.9",
+}

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

@@ -7,22 +7,30 @@ import {
   ANCHOR_TARGET,
   REL_ATTRIBUTE,
 } from "@databiosphere/findable-ui/lib/components/Links/common/entities";
+import { useAsync } from "@databiosphere/findable-ui/src/hooks/useAsync";
 import { Card } 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 {
-  url: string;
+  analysisMethod: ANALYSIS_METHOD;
+  genomeVersionAssemblyId: string;
 }
 
 export const AnalysisMethod = ({
+  analysisMethod,
+  genomeVersionAssemblyId,
   Paper = FluidPaper,
   text,
   title,
-  url,
 }: AnalysisMethodProps): JSX.Element => {
+  const workflowId = WORKFLOW_IDS_BY_ANALYSIS_METHOD[analysisMethod];
+  const { data: landingUrl, isLoading, run } = useAsync<string>();
   return (
     <Card component={Paper}>
       <CardSection>
@@ -31,16 +39,22 @@ export const AnalysisMethod = ({
           <CardText>{text}</CardText>
         </StyledCardContent>
         <StyledButtonPrimary
-          disabled={!url}
-          onClick={(): void => {
+          disabled={!workflowId || isLoading}
+          onClick={async (): Promise<void> => {
+            if (!workflowId) return;
+            const url =
+              landingUrl ??
+              (await run(
+                getWorkflowLandingUrl(workflowId, genomeVersionAssemblyId)
+              ));
             window.open(
               url,
               ANCHOR_TARGET.BLANK,
               REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
             );
           }}
         >
-          Analyze
+          {isLoading ? "Loading..." : "Analyze"}
         </StyledButtonPrimary>
       </CardSection>
     </Card>

app/components/Entity/components/AnalysisMethodsTitle/analysisMethodsTitle.tsx

@@ -0,0 +1,16 @@
+import { TEXT_HEADING } from "@databiosphere/findable-ui/lib/theme/common/typography";
+import { Typography } from "@mui/material";
+
+interface AnalysisMethodsTitleProps {
+  title: React.ReactNode;
+}
+
+export const AnalysisMethodsTitle = ({
+  title,
+}: AnalysisMethodsTitleProps): JSX.Element => {
+  return (
+    <Typography color="ink.main" component="h2" variant={TEXT_HEADING}>
+      {title}
+    </Typography>
+  );
+};

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 { AnalysisMethodsTitle } from "./Entity/components/AnalysisMethodsTitle/analysisMethodsTitle";
 export { AnalysisPortals } from "./Entity/components/AnalysisPortals/analysisPortals";
 export { DetailViewHero } from "./Layout/components/Detail/components/DetailViewHero/detailViewHero";
 export { GridPaperSection } from "./Layout/components/Detail/components/Section/section.styles";

app/utils/galaxy-api.ts

@@ -0,0 +1,60 @@
+import ky from "ky";
+import { WORKFLOW_ID } from "../apis/catalog/brc-analytics-catalog/common/entities";
+
+interface WorkflowLandingsBody {
+  public: true;
+  request_state: WorkflowLandingsBodyRequestState;
+  workflow_id: string;
+  workflow_target_type: "trs_url";
+}
+
+type WorkflowLandingsBodyRequestState = { reference_genome: string };
+
+interface WorkflowLanding {
+  uuid: string;
+}
+
+const WORKFLOW_LANDINGS_API_URL =
+  "https://test.galaxyproject.org/api/workflow_landings";
+
+const WORKFLOW_LANDING_URL_PREFIX =
+  "https://test.galaxyproject.org/workflow_landings/";
+
+/**
+ * Get the URL of the workflow landing page for the given genome workflow.
+ * @param workflowId - Value for the `workflow_id` parameter sent to the API.
+ * @param referenceGenome - Genome version/assembly ID.
+ * @returns workflow landing URL.
+ */
+export async function getWorkflowLandingUrl(
+  workflowId: WORKFLOW_ID,
+  referenceGenome: string
+): Promise<string> {
+  const body: WorkflowLandingsBody = {
+    public: true,
+    request_state: getWorkflowLandingsRequestState(workflowId, referenceGenome),
+    workflow_id: workflowId,
+    workflow_target_type: "trs_url",
+  };
+  const res = await ky.post<WorkflowLanding>(WORKFLOW_LANDINGS_API_URL, {
+    json: body,
+    retry: {
+      methods: ["post"],
+    },
+  });
+  const id = (await res.json()).uuid;
+  return `${WORKFLOW_LANDING_URL_PREFIX}${encodeURIComponent(id)}?public=true`;
+}
+
+/**
+ * Get the appropriate `request_state` object for the given workflow ID and reference genome.
+ * @param workflowId - Workflow ID.
+ * @param referenceGenome - Reference genome.
+ * @returns `request_state` value for the workflow landings request body.
+ */
+function getWorkflowLandingsRequestState(
+  workflowId: WORKFLOW_ID,
+  referenceGenome: string
+): WorkflowLandingsBodyRequestState {
+  return { reference_genome: referenceGenome };
+}

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

@@ -7,7 +7,10 @@ import {
 import { ViewContext } from "@databiosphere/findable-ui/lib/config/entities";
 import { ComponentProps } from "react";
 import { ROUTES } from "../../../../../routes/constants";
-import { BRCDataCatalogGenome } from "../../../../apis/catalog/brc-analytics-catalog/common/entities";
+import {
+  ANALYSIS_METHOD,
+  BRCDataCatalogGenome,
+} from "../../../../apis/catalog/brc-analytics-catalog/common/entities";
 import * as C from "../../../../components";
 import { GENOME_BROWSER } from "./constants";
 
@@ -62,17 +65,22 @@ export const buildContigs = (
  * @param cardProps - Card properties.
  * @param cardProps.text - Card text.
  * @param cardProps.title - Card title.
- * @param cardProps.url - Card url.
+ * @param cardProps.analysisMethod - Analysis method.
  * @returns Props to be used for the AnalysisMethod component.
  */
 export const buildGenomeAnalysisMethod = (
   genome: BRCDataCatalogGenome,
-  { text, title, url }: Partial<CardProps> & { url: string }
+  {
+    analysisMethod,
+    text,
+    title,
+  }: Partial<CardProps> & { analysisMethod: ANALYSIS_METHOD }
 ): ComponentProps<typeof C.AnalysisMethod> => {
   return {
+    analysisMethod,
+    genomeVersionAssemblyId: genome.genomeVersionAssemblyId,
     text,
     title,
-    url,
   };
 };
 

package.json

@@ -24,6 +24,7 @@
     "@next/mdx": "^14.1.0",
     "@tanstack/react-table": "^8.19.2",
     "copy-to-clipboard": "^3.3.1",
+    "ky": "^1.7.2",
     "next": "^14.1.0",
     "next-compose-plugins": "^2.2.1",
     "react": "^18.3.1",

site-config/brc-analytics/local/entity/genome/analysisMethodMainColumn.ts

@@ -1,72 +1,93 @@
 import { ComponentsConfig } from "@databiosphere/findable-ui/lib/config/entities";
+import { ANALYSIS_METHOD } from "../../../../../app/apis/catalog/brc-analytics-catalog/common/entities";
 import * as C from "../../../../../app/components";
 import * as MDX from "../../../../../app/components/Entity/components/AnalysisMethod/content";
 import * as V from "../../../../../app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders";
 
 export const mainColumn: ComponentsConfig = [
   {
     children: [
+      {
+        component: C.AnalysisMethodsTitle,
+        props: {
+          title: "Preview",
+        },
+      },
       {
         component: C.FluidAlert,
         props: {
-          severity: "warning",
-          title:
-            "We are in the process of adopting these workflows to the needs of the pathogen community.",
+          severity: "info",
+          title: "Preview the worklows below in a test environment.",
           variant: "banner",
         },
       },
       {
         component: C.AnalysisMethod,
         viewBuilder: (r) =>
           V.buildGenomeAnalysisMethod(r, {
-            text: MDX.VariantCalling({}),
-            title: "Variant calling",
-            url: "",
+            analysisMethod: ANALYSIS_METHOD.TRANSCRIPTOMICS,
+            text: MDX.Transcriptomics({}),
+            title: "Transcriptomics",
           }),
       },
       {
         component: C.AnalysisMethod,
         viewBuilder: (r) =>
           V.buildGenomeAnalysisMethod(r, {
-            text: MDX.Transcriptomics({}),
-            title: "Transcriptomics",
-            url: "",
+            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 adopting these workflows to the needs of the pathogen community.",
+          variant: "banner",
+        },
+      },
       {
         component: C.AnalysisMethod,
         viewBuilder: (r) =>
           V.buildGenomeAnalysisMethod(r, {
-            text: MDX.Regulation({}),
-            title: "Regulation",
-            url: "",
+            analysisMethod: ANALYSIS_METHOD.VARIANT_CALLING,
+            text: MDX.VariantCalling({}),
+            title: "Variant calling",
           }),
       },
       {
         component: C.AnalysisMethod,
         viewBuilder: (r) =>
           V.buildGenomeAnalysisMethod(r, {
+            analysisMethod: ANALYSIS_METHOD.ASSEMBLY,
             text: MDX.Assembly({}),
             title: "Assembly",
-            url: "",
           }),
       },
       {
         component: C.AnalysisMethod,
         viewBuilder: (r) =>
           V.buildGenomeAnalysisMethod(r, {
+            analysisMethod: ANALYSIS_METHOD.GENOME_COMPARISONS,
             text: MDX.GenomeComparisons({}),
             title: "Genome comparisons",
-            url: "",
           }),
       },
       {
         component: C.AnalysisMethod,
         viewBuilder: (r) =>
           V.buildGenomeAnalysisMethod(r, {
+            analysisMethod: ANALYSIS_METHOD.PROTEIN_FOLDING,
             text: MDX.ProteinFolding({}),
             title: "Protein folding",
-            url: "",
           }),
       },
     ],