Linked genes filter (#186)

* Add support for distance linked params

* Formatting, remove snp buffer

* Infrastructure for linked genes filter

* Working all but without slider

* Add support for multiple genes, cleanup

* Fix build error, cleanup

* Cleanup

Author: jpfisher72

screen2.0/src/app/about/page.tsx

@@ -213,7 +213,7 @@ export default function About() {
             cell and tissue types are displayed here for each study.
           </Typography>
         </Grid2>
-        {/* <Grid2 xs={12} id="tutorials">
+        <Grid2 xs={12} id="tutorials">
           <Typography variant="h3">Tutorials</Typography>
         </Grid2>
         <Grid2 xs={12} id="api-documentation">
@@ -227,7 +227,7 @@ export default function About() {
         </Grid2>
         <Grid2 xs={12} id="contact-us">
           <Typography variant="h3">Contact Us</Typography>
-        </Grid2> */}
+        </Grid2>
       </Grid2>
     </main>
   )

screen2.0/src/app/applets/gene-expression/gene-autocomplete.tsx

@@ -7,7 +7,7 @@ import { gene } from "./types"
 import { QueryResponse } from "../../../../types/types"
 import { Dispatch, SetStateAction } from "react"
 import Config from "../../../config.json"
-import { Search } from "@mui/icons-material"
+import { Add, Search } from "@mui/icons-material"
 
 
 const GENE_AUTOCOMPLETE_QUERY = `
@@ -28,6 +28,7 @@ export default function GeneAutoComplete(props: {
   assembly: "mm10" | "GRCh38"
   gene: string
   setGene: Dispatch<SetStateAction<any>>
+  plusIcon?: boolean
 }) {
   const router = useRouter()
 
@@ -173,7 +174,11 @@ export default function GeneAutoComplete(props: {
         }}
         color="primary"
       >
-        <Search />
+        {props.plusIcon ?
+          <Add />
+          :
+          <Search />
+        }
       </IconButton>
     </Stack>
   )

screen2.0/src/app/search/fetchRows.ts

@@ -2,21 +2,27 @@
 
 import { ApolloQueryResult } from "@apollo/client"
 import { MainQuery, linkedGenesQuery } from "../../common/lib/queries"
-import { passesCriteria } from "./search-helpers"
+import { passesCriteria, passesLinkedGenesFilter } from "./search-helpers"
 import { MainQueryParams, cCREData, MainResultTableRows, MainResultTableRow } from "./types"
 
 export async function fetchRows(mainQueryParams: MainQueryParams, accessions?: string[]) {
     //Should be able to send server-side query here
     let mainQueryResult: ApolloQueryResult<any>
 
     //This needs to be split up since the query will fail if accessions is passed and is null unlike other fields
+    //Main Query should probably just be passed the entire mainQueryParams object, no?
     if (accessions) {
       mainQueryResult = await MainQuery(
         mainQueryParams.assembly,
         mainQueryParams.chromosome,
         mainQueryParams.start,
         mainQueryParams.end,
         mainQueryParams.Biosample.biosample,
+        mainQueryParams.distanceFromcCRE,
+        //This is the limit of distance linked gene
+        //Default is 3, leaving null for now
+        //TODO dynamically change this away from 3
+        null,
         accessions
       )
     } else {
@@ -26,6 +32,8 @@ export async function fetchRows(mainQueryParams: MainQueryParams, accessions?: s
         mainQueryParams.start,
         mainQueryParams.end,
         mainQueryParams.Biosample.biosample,
+        mainQueryParams.distanceFromcCRE,
+        null
       )
     }
 
@@ -51,8 +59,6 @@ export async function generateRows(QueryResult: ApolloQueryResult<any>, biosampl
         start: currentElement.start.toLocaleString("en-US"),
         end: (currentElement.start + currentElement.len).toLocaleString("en-US"),
         dnase: biosample ? currentElement.ctspecific.dnase_zscore : currentElement.dnase_zscore,
-        //Need to get this data still from somewhere
-        
         h3k4me3: biosample ? currentElement.ctspecific.h3k4me3_zscore : currentElement.promoter_zscore,
         h3k27ac: biosample ? currentElement.ctspecific.h3k27ac_zscore : currentElement.enhancer_zscore,
         ctcf: biosample ? currentElement.ctspecific.ctcf_zscore : currentElement.ctcf_zscore,
@@ -71,13 +77,14 @@ export async function generateRows(QueryResult: ApolloQueryResult<any>, biosampl
 
     genesToAdd && genesToAdd.genes.forEach(gene => {
       if (gene.linkedBy === "CTCF-ChIAPET") {
-        row.linkedGenes.CTCF_ChIAPET.push({name: gene.geneName, biosample: gene.biosample})
+        row.linkedGenes.CTCF_ChIAPET.push({ name: gene.geneName, biosample: gene.biosample })
       }
-      else if (gene.linkedBy === "RNAPII-ChIAPET"){
-        row.linkedGenes.RNAPII_ChIAPET.push({name: gene.geneName, biosample: gene.biosample})
+      else if (gene.linkedBy === "RNAPII-ChIAPET") {
+        row.linkedGenes.RNAPII_ChIAPET.push({ name: gene.geneName, biosample: gene.biosample })
       }
-    });
+    })
   })
 
-  return rows
+  //Is there a better way to structure this code?
+  return rows.filter((row) => passesLinkedGenesFilter(row, mainQueryParams))
 }

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

@@ -14,7 +14,7 @@ export default async function Search({
   //Get search parameters and define defaults.
   const mainQueryParams: MainQueryParams = {
     //Flag that user-entered accessions are to be used
-    bed_intersect: searchParams.intersect ? checkTrueFalse(searchParams.intersect): false,
+    bed_intersect: searchParams.intersect ? checkTrueFalse(searchParams.intersect) : false,
     assembly: searchParams.assembly === "GRCh38" || searchParams.assembly === "mm10" ? searchParams.assembly : "GRCh38",
     gene: searchParams.gene,
     snpid: searchParams.snpid,
@@ -48,7 +48,7 @@ export default async function Search({
     h3k27ac_e: searchParams.h3k27ac_e ? Number(searchParams.h3k27ac_e) : 10,
     ctcf_s: searchParams.ctcf_s ? Number(searchParams.ctcf_s) : -10,
     ctcf_e: searchParams.ctcf_e ? Number(searchParams.ctcf_e) : 10,
-    
+
     atac_s: searchParams.atac_s ? Number(searchParams.atac_s) : -10,
     atac_e: searchParams.atac_e ? Number(searchParams.atac_e) : 10,
     // Classification Filters
@@ -63,11 +63,18 @@ export default async function Search({
     TF: searchParams.TF ? checkTrueFalse(searchParams.TF) : true,
     //Conservation Filter
     prim_s: searchParams.prim_s ? Number(searchParams.prim_s) : -2,
-    prim_e:searchParams.prim_e ? Number(searchParams.prim_e) : 2,
+    prim_e: searchParams.prim_e ? Number(searchParams.prim_e) : 2,
     mamm_s: searchParams.mamm_s ? Number(searchParams.mamm_s) : -4,
-    mamm_e:searchParams.mamm_e ? Number(searchParams.mamm_e) : 8,
+    mamm_e: searchParams.mamm_e ? Number(searchParams.mamm_e) : 8,
     vert_s: searchParams.vert_s ? Number(searchParams.vert_s) : -3,
-    vert_e:searchParams.vert_e ? Number(searchParams.vert_e) : 8,
+    vert_e: searchParams.vert_e ? Number(searchParams.vert_e) : 8,
+    //Linked Genes Filter
+    genesToFind: searchParams.genesToFind ? searchParams.genesToFind.split(",") : null,
+    distancePC: searchParams.distancePC ? checkTrueFalse(searchParams.distancePC) : true,
+    distanceAll: searchParams.distanceAll ? checkTrueFalse(searchParams.distanceAll) : true,
+    distanceFromcCRE: searchParams.distanceFromcCRE ? Number(searchParams.distanceFromcCRE) : 1000000,
+    CTCF_ChIA_PET: searchParams.CTCF_ChIA_PET ? checkTrueFalse(searchParams.CTCF_ChIA_PET) : true,
+    RNAPII_ChIA_PET: searchParams.RNAPII_ChIA_PET ? checkTrueFalse(searchParams.RNAPII_ChIA_PET) : true
   }
 
   //Contains cell type data of the specified assembly

screen2.0/src/app/search/search-helpers.ts

@@ -113,6 +113,30 @@ function passesClassificationFilter(currentElement: cCREData, mainQueryParams: M
   }
 }
 
+export function passesLinkedGenesFilter(row: MainResultTableRow, mainQueryParams: MainQueryParams) {
+  //If there is a gene to find a match for
+  let found = false
+  if (mainQueryParams.genesToFind) {
+    const genes = row.linkedGenes
+    //For each selected checkbox, try to find it in the corresponding spot, mark flag as found
+    if (mainQueryParams.distancePC && genes.distancePC.find((gene) => mainQueryParams.genesToFind.find((x) => x === gene.name))) {
+      found = true
+    }
+    if (mainQueryParams.distanceAll && genes.distanceAll.find((gene) => mainQueryParams.genesToFind.find((x) => x === gene.name))) {
+      found = true
+    }
+    if (mainQueryParams.CTCF_ChIA_PET && genes.CTCF_ChIAPET.find((gene) => mainQueryParams.genesToFind.find((x) => x === gene.name))) {
+      found = true
+    }
+    if (mainQueryParams.RNAPII_ChIA_PET && genes.RNAPII_ChIAPET.find((gene) => mainQueryParams.genesToFind.find((x) => x === gene.name))) {
+      found = true
+    }
+    return found
+  } else {
+    return true
+  }
+}
+
 /**
  * @param experiments Array of objects containing biosample experiments for a given biosample type
  * @returns an object with keys dnase, atac, h3k4me3, h3k27ac, ctcf with each marked true or false
@@ -222,6 +246,7 @@ export function assayHoverInfo(assays: { dnase: boolean; h3k27ac: boolean; h3k4m
  *
  * @param newBiosample optional, use if setting Biosample State and then immediately triggering router before re-render when the new state is accessible
  * @returns A URL configured with filter information
+ * @todo this function should only take in urlParams, not mainQueryParams (which should be renamed). urlParams is more like filterParams. Also this should not append things to the url unless it changes from the default value
  */
 export function constructURL(
   mainQueryParams: MainQueryParams,
@@ -268,8 +293,10 @@ export function constructURL(
 
   const conservationFilters = `&prim_s=${urlParams.PrimateStart}&prim_e=${urlParams.PrimateEnd}&mamm_s=${urlParams.MammalStart}&mamm_e=${urlParams.MammalEnd}&vert_s=${urlParams.VertebrateStart}&vert_e=${urlParams.VertebrateEnd}`
 
+  const linkedGenesFilter = `&genesToFind=${urlParams.genesToFind.join(',')}&distancePC=${outputT_or_F(urlParams.distancePC)}&distanceAll=${outputT_or_F(urlParams.distanceAll)}&distanceFromcCRE=${urlParams.distanceFromcCRE}&CTCF_ChIA_PET=${outputT_or_F(urlParams.CTCF_ChIA_PET)}&RNAPII_ChIA_PET=${outputT_or_F(urlParams.RNAPII_ChIA_PET)}`
+
   const accessionsAndPage = `&accession=${urlParams.Accessions}&page=${urlParams.Page}`
 
-  const url = `${urlBasics}${biosampleFilters}${chromatinFilters}${classificationFilters}${conservationFilters}${accessionsAndPage}`
+  const url = `${urlBasics}${biosampleFilters}${chromatinFilters}${classificationFilters}${conservationFilters}${urlParams.genesToFind.length > 0 ? linkedGenesFilter : ""}${accessionsAndPage}`
   return url
 }

screen2.0/src/app/search/types.ts

@@ -34,6 +34,7 @@ export type cCREData = {
       intersecting_genes: { name: string }[]
     }
   }
+
 }
 
 export type MainQueryParams = {
@@ -79,6 +80,12 @@ export type MainQueryParams = {
   pELS?: boolean
   PLS?: boolean
   TF?: boolean
+  genesToFind: string[]
+  distancePC: boolean
+  distanceAll: boolean
+  distanceFromcCRE: number
+  CTCF_ChIA_PET: boolean
+  RNAPII_ChIA_PET: boolean
 }
 
 export type CellTypeData = {
@@ -129,7 +136,6 @@ export type FilteredBiosampleData = [
 export type MainResultTableRows = MainResultTableRow[]
 
 export type MainResultTableRow = {
-  //atac will need to be changed from string to number when that data is available
   accession: string
   class: string
   chromosome: string
@@ -158,7 +164,7 @@ export type LinkedGenesData = {
 }
 
 /**
- * Represents the state variables used by the filters and passed to the constructURL function to refresh results
+ * I guess this is best described as the parameters that can be modified by the filters panel. Strong overlap with mainQueryParams
  */
 export type URLParams = {
     Tissue: boolean
@@ -198,6 +204,12 @@ export type URLParams = {
     MammalEnd: number
     VertebrateStart: number
     VertebrateEnd: number
+    genesToFind: string[]
+    distancePC: boolean
+    distanceAll: boolean
+    distanceFromcCRE: number
+    CTCF_ChIA_PET: boolean
+    RNAPII_ChIA_PET: boolean
     Accessions: string
     Page: number
 }