updated rampage data and added functional characterization tab on ccr…

…e details page

screen2.0/src/app/search/ccredetails/ccredetails.tsx

@@ -9,6 +9,7 @@ import { NearByGenomicFeatures } from "./nearbygenomicfeatures"
 import { LinkedGenes } from "./linkedgenes"
 import { Ortholog } from "./linkedccres"
 import { TfIntersection } from "./tfintersection"
+import {FunctionData} from "./functionaldata"
 import Rampage from "./rampage"
 
 import MenuIcon from "@mui/icons-material/Menu"
@@ -90,6 +91,7 @@ export const CcreDetails: React.FC<CcreDetailsProps> = ({ accession, region, glo
                       <StyledTab label="Linked cCREs in other Assemblies" sx={{ alignSelf: "start" }} />
                       <StyledTab label="Associated RAMPAGE Signal" sx={{ alignSelf: "start" }} />
                       <StyledTab label="Associated Gene Expression" sx={{ alignSelf: "start" }} />
+                      <StyledTab label="Functional Data" sx={{ alignSelf: "start" }} />
                     </Tabs>
                   </Box>
                 </Box>
@@ -161,8 +163,9 @@ export const CcreDetails: React.FC<CcreDetailsProps> = ({ accession, region, glo
               />
             )}
             {value === 5 && <Ortholog accession={accession} assembly={assembly} />}
-            {value === 6 && <Rampage accession={accession} assembly={assembly} chromosome={region.chrom} />}
+            {value === 6 && <Rampage gene={genes.distancePC[0].name} />}
             {value === 7 && <GeneExpression accession={accession} assembly={assembly} genes={genes} hamburger={open} />}
+            {value === 8 && <FunctionData coordinates= {{chromosome: region.chrom, start: +region.start.toString().replace(/\D/g, ""),   end: +region.end.toString().replace(/\D/g, "")}} assembly={assembly} />}
           </Grid2>
         </Grid2>
       </Paper>

screen2.0/src/app/search/ccredetails/functionaldata.tsx

@@ -0,0 +1,64 @@
+"use client"
+import React from "react"
+import { client } from "./client"
+import { useQuery } from "@apollo/client"
+import { FUNCTIONAL_DATA_QUERY } from "./queries"
+import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
+import { DataTable } from "@weng-lab/psychscreen-ui-components"
+import { LoadingMessage, ErrorMessage } from "../../../common/lib/utility"
+
+export const FunctionData = ({ coordinates , assembly }) => {
+  const { loading, error, data } = useQuery(FUNCTIONAL_DATA_QUERY, {
+    variables: {
+      assembly: assembly === "GRCh38" ? "grch38" : "mm10",
+      coordinates,
+    },
+    fetchPolicy: "cache-and-network",
+    nextFetchPolicy: "cache-first",
+    client,
+  })
+
+
+  return loading ? (
+    <LoadingMessage />
+  ) : error ? (
+    <ErrorMessage error={error} />
+  ) : (
+    <Grid2 container spacing={3} sx={{ mt: "0rem", mb: "2rem" }}>
+      <Grid2 xs={12} md={12} lg={12}>
+        <DataTable
+          tableTitle={`Mouse transgenic enhancer assays`}
+          columns={[
+            {
+              header: "Chromosome",
+              value: (row) => row.chromosome,
+            },
+            {
+              header: "Start",
+              value: (row) => row.start,
+            },
+            {
+              header: "Stop",
+              value: (row) => row.stop,
+            },
+            {
+              header: "Element Id",
+              value: (row) => row.element_id,
+            },
+            {
+              header: "Assay Result",
+              value: (row) => row.assay_result,
+            },
+            {
+                header: "Tissues [number of embryos positive/number of embryos negative]",
+                value: (row) => row.tissues,
+            }
+          ]}
+          rows={data.functionalCharacterizationQuery || []}
+          sortColumn={3}
+          itemsPerPage={5}
+        />
+      </Grid2>
+    </Grid2>
+  )
+}

screen2.0/src/app/search/ccredetails/queries.ts

@@ -41,6 +41,19 @@ export const LINKED_GENES = gql`
   }
 `
 
+export const FUNCTIONAL_DATA_QUERY= gql`
+query ($coordinates: [GenomicRangeInput!],$assembly: String!) {
+  functionalCharacterizationQuery(assembly: $assembly, coordinates: $coordinates) {
+    tissues
+    element_id
+    assay_result
+    chromosome
+    stop
+    start
+  }
+}
+
+`
 export const GENE_NAME = gql`
   query ($assembly: String!, $name_prefix: [String!]) {
     gene(assembly: $assembly, name_prefix: $name_prefix) {