From 10be8f107b0c841d3f57b17bc50995164f9bcbcd Mon Sep 17 00:00:00 2001 From: Jonathan Fisher Date: Wed, 16 Aug 2023 14:32:11 -0400 Subject: [PATCH 1/7] Changed typing to support incoming data --- .../app/search/ccredetails/ccredetails.tsx | 17 +++-------- .../search/ccredetails/gene-expression.tsx | 9 +++--- screen2.0/src/app/search/ccresearch.tsx | 22 +++++++------- screen2.0/src/app/search/page.tsx | 30 ++++++++----------- screen2.0/src/app/search/types.ts | 28 +++++++++++++++-- .../common/components/MainResultsTable.tsx | 24 ++++++++------- 6 files changed, 72 insertions(+), 58 deletions(-) diff --git a/screen2.0/src/app/search/ccredetails/ccredetails.tsx b/screen2.0/src/app/search/ccredetails/ccredetails.tsx index 1932978b..1dacf0ea 100644 --- a/screen2.0/src/app/search/ccredetails/ccredetails.tsx +++ b/screen2.0/src/app/search/ccredetails/ccredetails.tsx @@ -1,7 +1,7 @@ "use client" import React from "react" import { Tabs, Typography, Paper, ThemeProvider, AppBar, Toolbar, IconButton, Drawer, Box } from "@mui/material" -import { GenomicRegion } from "../types" +import { GenomicRegion, LinkedGenesData } from "../types" import Grid2 from "@mui/material/Unstable_Grid2/Grid2" import { StyledTab } from "../ccresearch" import { InSpecificBiosamples } from "./inspecificbiosample" @@ -22,16 +22,7 @@ type CcreDetailsProps = { assembly: string region: GenomicRegion globals: any - genes: { - pc: { - name: string - __typename: string - }[] - all: { - name: string - __typename: string - }[] - } + genes: LinkedGenesData } export const CcreDetails: React.FC = ({ accession, region, globals, assembly, genes }) => { @@ -154,8 +145,8 @@ export const CcreDetails: React.FC = ({ accession, region, glo assembly={assembly} coordinates={{ chromosome: region.chrom, - start: +region.start.toString().replace(/\D/g, ""), - end: +region.end.toString().replace(/\D/g, ""), + start: +region.start.replace(/\D/g, ""), + end: +region.end.replace(/\D/g, ""), }} /> )} diff --git a/screen2.0/src/app/search/ccredetails/gene-expression.tsx b/screen2.0/src/app/search/ccredetails/gene-expression.tsx index b86a8893..e5191ee2 100644 --- a/screen2.0/src/app/search/ccredetails/gene-expression.tsx +++ b/screen2.0/src/app/search/ccredetails/gene-expression.tsx @@ -28,11 +28,12 @@ import { OptionsScale, } from "../../applets/gene-expression/options" import { GeneExpressionInfoTooltip } from "../../applets/gene-expression/const" +import { LinkedGenesData } from "../types" export function GeneExpression(props: { accession: string assembly: string - genes: { pc: { name: string; __typename: string }[]; all: { name: string; __typename: string }[] } + genes: LinkedGenesData hamburger: boolean }) { const pathname = usePathname() @@ -43,7 +44,7 @@ export function GeneExpression(props: { const [open, setState] = useState(true) const [current_assembly, setAssembly] = useState(props.assembly ? props.assembly : "GRCh38") - const [current_gene, setGene] = useState(props.genes.pc[0].name) + const [current_gene, setGene] = useState(props.genes.distancePC[0].name) const [biosamples, setBiosamples] = useState(["cell line", "in vitro differentiated cells", "primary cell", "tissue"]) const [cell_components, setCellComponents] = useState(["cell"]) @@ -88,8 +89,8 @@ export function GeneExpression(props: { .then((data) => { setData(data) let geneList: string[] = [] - for (let g of props.genes.pc) if (!geneList.includes(g.name)) geneList.push(g.name) - for (let g of props.genes.all) if (!geneList.includes(g.name)) geneList.push(g.name) + for (let g of props.genes.distancePC) if (!geneList.includes(g.name)) geneList.push(g.name) + for (let g of props.genes.distanceAll) if (!geneList.includes(g.name)) geneList.push(g.name) setOptions(geneList) setLoading(false) }) diff --git a/screen2.0/src/app/search/ccresearch.tsx b/screen2.0/src/app/search/ccresearch.tsx index d49f3ac8..c72676a2 100644 --- a/screen2.0/src/app/search/ccresearch.tsx +++ b/screen2.0/src/app/search/ccresearch.tsx @@ -7,10 +7,11 @@ import { CcreDetails } from "./ccredetails/ccredetails" import Grid2 from "../../common/mui-client-wrappers/Grid2" import { ReadonlyURLSearchParams, useSearchParams } from "next/navigation" import styled from "@emotion/styled" +import { MainResultTableRows } from "./types" export const StyledTab = styled(Tab)(() => ({ textTransform: "none", })) -export const CcreSearch = ({ mainQueryParams, ccrerows, globals, assembly }) => { +export const CcreSearch = (props: { mainQueryParams, ccrerows: MainResultTableRows, globals, assembly }) => { const searchParams: ReadonlyURLSearchParams = useSearchParams()! const [value, setValue] = React.useState(searchParams.get("accession") ? 1 : 0) @@ -18,15 +19,14 @@ export const CcreSearch = ({ mainQueryParams, ccrerows, globals, assembly }) => setValue(newValue) } - //This needs to be changed, this will switch to the details tab anytime filter is updated useEffect(() => { if (searchParams.get("accession")) { setValue(1) } }, [searchParams]) - //Need meaningful variable names please - let f = ccrerows.find((c) => c.accession === searchParams.get("accession")) + //Need meaningful variable names please, is showing that this is undefined and throwing an error when using back button on details page since accession is undefined + let f = props.ccrerows.find((c) => c.accession === searchParams.get("accession")) const region = { start: f?.start, chrom: f?.chromosome, end: f?.end } console.log(f) @@ -43,14 +43,14 @@ export const CcreSearch = ({ mainQueryParams, ccrerows, globals, assembly }) => {value === 0 && ( - + @@ -62,8 +62,8 @@ export const CcreSearch = ({ mainQueryParams, ccrerows, globals, assembly }) => diff --git a/screen2.0/src/app/search/page.tsx b/screen2.0/src/app/search/page.tsx index b86d6171..bec6d077 100644 --- a/screen2.0/src/app/search/page.tsx +++ b/screen2.0/src/app/search/page.tsx @@ -2,7 +2,7 @@ import { CcreSearch } from "./ccresearch" import MainQuery, { getGlobals } from "../../common/lib/queries" import { ApolloQueryResult } from "@apollo/client" -import { cCREData, CellTypeData, MainQueryParams } from "./types" +import { cCREData, CellTypeData, MainQueryParams, MainResultTableRows } from "./types" import { checkTrueFalse, passesCriteria } from "../../common/lib/filter-helpers" export default async function Search({ @@ -72,25 +72,14 @@ export default async function Search({ * @param QueryResult Result from Main Query * @returns rows usable by the DataTable component */ - const generateRows = (QueryResult: ApolloQueryResult, biosample: string | null) => { - const rows: { - //atac will need to be changed from string to number when that data is available - accession: string - class: string - chromosome: string - start: string - end: string - dnase?: number - atac: string - h3k4me3?: number - h3k27ac?: number - ctcf?: number - linkedGenes: { pc: { name: string }[]; all: { name: string }[] } - }[] = [] + function generateRows(QueryResult: ApolloQueryResult, biosample: string | null): MainResultTableRows { + const rows: MainResultTableRows = [] const cCRE_data: cCREData[] = QueryResult.data.cCRESCREENSearch let offset = 0 + // I think I need to add the queries right here as it has easy access to the accession which is needed for the first linked genes query, and the result can be tacked on to the rest of the data cCRE_data.forEach((currentElement, index) => { if (passesCriteria(currentElement, biosample, mainQueryParams)) { + // add accession to the array rows[index - offset] = { accession: currentElement.info.accession, class: currentElement.pct, @@ -103,15 +92,22 @@ export default async function Search({ 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, - linkedGenes: { pc: currentElement.genesallpc.pc.intersecting_genes, all: currentElement.genesallpc.all.intersecting_genes }, + linkedGenes: { distancePC: currentElement.genesallpc.pc.intersecting_genes, distanceAll: currentElement.genesallpc.all.intersecting_genes, CTCF_ChIAPET: [], RNAPII_ChIAPET: [] }, } } + // Offset incremented to account for missing rows which do not meet filter criteria else { offset += 1 } }) + //Call query 1 with array + //Create new array from result + //Create blank array for genes + //iterate over the new array, and add gene IDS to the blank array + // Want an array of object that are {Accession} + //Eventually, will need to iterate over the rows and add the gene name (query 2) and linking method (query 1) to each accession return rows } diff --git a/screen2.0/src/app/search/types.ts b/screen2.0/src/app/search/types.ts index 1847955f..910d0f51 100644 --- a/screen2.0/src/app/search/types.ts +++ b/screen2.0/src/app/search/types.ts @@ -1,7 +1,7 @@ export type GenomicRegion = { chrom: string - start: number - end: number + start: string + end: string } export type cCREData = { @@ -110,3 +110,27 @@ 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 + start: string + end: string + dnase?: number + atac: string + h3k4me3?: number + h3k27ac?: number + ctcf?: number + linkedGenes: LinkedGenesData +} + +export type LinkedGenesData = { + distancePC: { name: string }[], + distanceAll: { name: string }[], + CTCF_ChIAPET: { name: string }[], + RNAPII_ChIAPET: { name: string }[] +} diff --git a/screen2.0/src/common/components/MainResultsTable.tsx b/screen2.0/src/common/components/MainResultsTable.tsx index d748ac84..2f56b6a9 100644 --- a/screen2.0/src/common/components/MainResultsTable.tsx +++ b/screen2.0/src/common/components/MainResultsTable.tsx @@ -6,8 +6,9 @@ import React from "react" import { Box, Button, Typography } from "@mui/material" import Link from "next/link" import { ObjectFlags } from "typescript" +import { MainResultTableRow, MainResultTableRows } from "../../app/search/types" -let COLUMNS = (rows) => { +let COLUMNS = (rows: MainResultTableRows) => { // can prob just use link instead here const router = useRouter() const pathname = usePathname() @@ -23,7 +24,7 @@ let COLUMNS = (rows) => { [searchParams] ) - let col: DataTableColumn[] = [ + let col: DataTableColumn[] = [ { header: "Accession", value: (row: { accession: string }) => row.accession, @@ -38,15 +39,16 @@ let COLUMNS = (rows) => { }, { header: "Start", - value: (row: { start: number }) => row.start, + value: (row: { start: string }) => row.start, }, { header: "End", - value: (row: { end: number }) => row.end, + value: (row: { end: string }) => row.end, }, { header: "ATAC", - value: (row: { atac: number }) => row.atac, + //Atac is a string because the data does not exist and is "TBD" for now + value: (row: { atac: string }) => row.atac, }, ] @@ -82,23 +84,23 @@ let COLUMNS = (rows) => { render: (row) => ( - {`PC: `} + {`PC:\u00A0`} - {Object.values(row.linkedGenes.pc).map((gene: { name: string; __typename: string }, i: number) => ( + {Object.values(row.linkedGenes.distancePC).map((gene: { name: string; __typename: string }, i: number) => ( - {i < row.linkedGenes.all.length - 1 ? `\u00A0${gene.name}, ` : `\u00A0${gene.name}`} + {i < row.linkedGenes.distanceAll.length - 1 ? `\u00A0${gene.name},\u00A0` : `\u00A0${gene.name}`} ))} - {`All: `} + {`All:\u00A0`} - {Object.values(row.linkedGenes.all).map((gene: { name: string; __typename: string }, i: number) => ( + {Object.values(row.linkedGenes.distanceAll).map((gene: { name: string; __typename: string }, i: number) => ( - {i < row.linkedGenes.all.length - 1 ? `\u00A0${gene.name}, ` : `\u00A0${gene.name}`} + {i < row.linkedGenes.distanceAll.length - 1 ? `\u00A0${gene.name},\u00A0` : `\u00A0${gene.name}`} ))} From 5f35cab4e354350a74f9dc597bd2a13de9274f04 Mon Sep 17 00:00:00 2001 From: Jonathan Fisher Date: Mon, 21 Aug 2023 16:23:15 -0400 Subject: [PATCH 2/7] Static display of other linked genes --- screen2.0/src/app/search/page.tsx | 66 +++--- screen2.0/src/app/search/types.ts | 4 +- .../common/components/MainResultsTable.tsx | 27 ++- screen2.0/src/common/lib/queries.ts | 75 +++++- screen2.0/yarn.lock | 220 ++++++++++++++---- 5 files changed, 302 insertions(+), 90 deletions(-) diff --git a/screen2.0/src/app/search/page.tsx b/screen2.0/src/app/search/page.tsx index bec6d077..5f7265f4 100644 --- a/screen2.0/src/app/search/page.tsx +++ b/screen2.0/src/app/search/page.tsx @@ -1,9 +1,10 @@ // Search Results Page import { CcreSearch } from "./ccresearch" -import MainQuery, { getGlobals } from "../../common/lib/queries" +import { MainQuery, getGlobals, linkedGenesQuery } from "../../common/lib/queries" import { ApolloQueryResult } from "@apollo/client" -import { cCREData, CellTypeData, MainQueryParams, MainResultTableRows } from "./types" +import { cCREData, CellTypeData, MainQueryParams, MainResultTableRow, MainResultTableRows } from "./types" import { checkTrueFalse, passesCriteria } from "../../common/lib/filter-helpers" +import { LinkedGenes } from "./ccredetails/linkedgenes" export default async function Search({ // Object from URL, see https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional @@ -26,11 +27,11 @@ export default async function Search({ InVitro: searchParams.InVitro ? checkTrueFalse(searchParams.InVitro) : true, Biosample: searchParams.Biosample ? { - selected: true, - biosample: searchParams.Biosample, - tissue: searchParams.BiosampleTissue, - summaryName: searchParams.BiosampleSummary, - } + selected: true, + biosample: searchParams.Biosample, + tissue: searchParams.BiosampleTissue, + summaryName: searchParams.BiosampleSummary, + } : { selected: false, biosample: null, tissue: null, summaryName: null }, // Chromatin Filters // "[...]_s" = start, "[...]_e" = end. @@ -55,8 +56,8 @@ export default async function Search({ TF: searchParams.TF ? checkTrueFalse(searchParams.TF) : true, } - //Main query. Returns -1 if query returns an error - const mainQueryResult: ApolloQueryResult | -1 = await MainQuery( + //Main query + const mainQueryResult: ApolloQueryResult = await MainQuery( mainQueryParams.assembly, mainQueryParams.chromosome, mainQueryParams.start, @@ -72,15 +73,14 @@ export default async function Search({ * @param QueryResult Result from Main Query * @returns rows usable by the DataTable component */ - function generateRows(QueryResult: ApolloQueryResult, biosample: string | null): MainResultTableRows { - const rows: MainResultTableRows = [] + async function generateRows(QueryResult: ApolloQueryResult, biosample: string | null) { const cCRE_data: cCREData[] = QueryResult.data.cCRESCREENSearch - let offset = 0 - // I think I need to add the queries right here as it has easy access to the accession which is needed for the first linked genes query, and the result can be tacked on to the rest of the data - cCRE_data.forEach((currentElement, index) => { + const rows: MainResultTableRows = [] + // Used for Linked Gene Query + const accessions: string[] = [] + cCRE_data.forEach((currentElement) => { if (passesCriteria(currentElement, biosample, mainQueryParams)) { - // add accession to the array - rows[index - offset] = { + rows.push({ accession: currentElement.info.accession, class: currentElement.pct, chromosome: currentElement.chrom, @@ -93,21 +93,31 @@ export default async function Search({ h3k27ac: biosample ? currentElement.ctspecific.h3k27ac_zscore : currentElement.enhancer_zscore, ctcf: biosample ? currentElement.ctspecific.ctcf_zscore : currentElement.ctcf_zscore, linkedGenes: { distancePC: currentElement.genesallpc.pc.intersecting_genes, distanceAll: currentElement.genesallpc.all.intersecting_genes, CTCF_ChIAPET: [], RNAPII_ChIAPET: [] }, - } + }) + accessions.push(currentElement.info.accession) } + }) + + const otherLinked = await linkedGenesQuery(mainQueryParams.assembly, accessions) + console.log(otherLinked.EH38E4028463) + + + //Need to add in biosample information for the hover + rows.forEach((row: MainResultTableRow) => { + const accession = row.accession + const genesToAdd = otherLinked[accession] ?? null + + genesToAdd && genesToAdd.genes.forEach(gene => { + if (gene.linkedBy === "CTCF-ChIAPET") { + 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}) + } + }); - // Offset incremented to account for missing rows which do not meet filter criteria - else { - offset += 1 - } }) - //Call query 1 with array - //Create new array from result - //Create blank array for genes - //iterate over the new array, and add gene IDS to the blank array - // Want an array of object that are {Accession} - //Eventually, will need to iterate over the rows and add the gene name (query 2) and linking method (query 1) to each accession return rows } @@ -116,7 +126,7 @@ export default async function Search({ diff --git a/screen2.0/src/app/search/types.ts b/screen2.0/src/app/search/types.ts index 910d0f51..3d9c581a 100644 --- a/screen2.0/src/app/search/types.ts +++ b/screen2.0/src/app/search/types.ts @@ -131,6 +131,6 @@ export type MainResultTableRow = { export type LinkedGenesData = { distancePC: { name: string }[], distanceAll: { name: string }[], - CTCF_ChIAPET: { name: string }[], - RNAPII_ChIAPET: { name: string }[] + CTCF_ChIAPET: { name: string, biosample: string }[], + RNAPII_ChIAPET: { name: string, biosample: string }[] } diff --git a/screen2.0/src/common/components/MainResultsTable.tsx b/screen2.0/src/common/components/MainResultsTable.tsx index 2f56b6a9..a03c9b45 100644 --- a/screen2.0/src/common/components/MainResultsTable.tsx +++ b/screen2.0/src/common/components/MainResultsTable.tsx @@ -78,6 +78,7 @@ let COLUMNS = (rows: MainResultTableRows) => { } //Is there a good way to sort linked genes? Set to "" because I'm not sure + //Need to import types I set for the linked genes data col.push({ header: "Linked\u00A0Genes\u00A0(Distance)", value: (row) => "", @@ -89,11 +90,11 @@ let COLUMNS = (rows: MainResultTableRows) => { {Object.values(row.linkedGenes.distancePC).map((gene: { name: string; __typename: string }, i: number) => ( - {i < row.linkedGenes.distanceAll.length - 1 ? `\u00A0${gene.name},\u00A0` : `\u00A0${gene.name}`} + {i < row.linkedGenes.distancePC.length - 1 ? `\u00A0${gene.name},\u00A0` : `\u00A0${gene.name}`} ))} - +
{`All:\u00A0`} @@ -104,6 +105,28 @@ let COLUMNS = (rows: MainResultTableRows) => { ))} +
+ + {`CTCF-ChIAPET:\u00A0`} + + + {Object.values(row.linkedGenes.CTCF_ChIAPET).map((gene: { name: string, biosample: string }, i: number) => ( + + {i < row.linkedGenes.CTCF_ChIAPET.length - 1 ? `\u00A0${gene.name},\u00A0` : `\u00A0${gene.name}`} + + ))} + +
+ + {`RNAPII-ChIAPET:\u00A0`} + + + {Object.values(row.linkedGenes.RNAPII_ChIAPET).map((gene: { name: string, biosample: string }, i: number) => ( + + {i < row.linkedGenes.RNAPII_ChIAPET.length - 1 ? `\u00A0${gene.name},\u00A0` : `\u00A0${gene.name}`} + + ))} + ), }) diff --git a/screen2.0/src/common/lib/queries.ts b/screen2.0/src/common/lib/queries.ts index ef1a4406..d3615a38 100644 --- a/screen2.0/src/common/lib/queries.ts +++ b/screen2.0/src/common/lib/queries.ts @@ -214,6 +214,69 @@ function cCRE_QUERY_VARIABLES(assembly: string, chromosome: string, start: numbe } } +const LINKED_GENES_QUERY = gql` + query ($assembly: String!, $accession: [String]!) { + linkedGenesQuery(assembly: $assembly, accession: $accession) { + assay + accession + celltype + gene + } + } +` + +const GENE_QUERY = gql` + query($assembly: String!, $name_prefix: [String!]) { + gene(assembly: $assembly, name_prefix: $name_prefix) { + name + id + } + } +` + +export async function linkedGenesQuery(assembly: string, accession: string[]) { + let returnData: {[key: string]: {genes: {geneName: string, linkedBy: "CTCF-ChIAPET" | "RNAPII-ChIAPET", biosample: string}[]}} = {} + let geneIDs: string[] = [] + let linkedGenes: ApolloQueryResult + let geneNames: ApolloQueryResult + //Attempt first linked genes query + try { + linkedGenes = await getClient().query({ + query: LINKED_GENES_QUERY, + variables: { assembly, accession }, + }) + linkedGenes.data.linkedGenesQuery.forEach((entry) => { + !geneIDs.includes(entry.gene.split(".")[0]) && geneIDs.push(entry.gene.split(".")[0]) + }) + //Attempt to lookup gene names + try { + geneNames = await getClient().query({ + query: GENE_QUERY, + variables: { assembly: assembly, name_prefix: geneIDs }, + }) + //If both queries are successful, go through each of linkedGenes.data.linkedGenesQuery, find the accession and (if doesnt exist) add to linkedGenesData along with any gene names matching the ID in queryRes2 + linkedGenes.data.linkedGenesQuery.forEach((entry) => { + // if returnData does not have an entry for that accession, and if there is a gene in query2 with an id that matches + if (geneNames.data && (!Object.hasOwn(returnData, entry.accession)) && (geneNames.data.gene.find((x) => x.id === entry.gene)!== undefined)){ + Object.defineProperty(returnData, entry.accession, {value: {genes: [{geneName: geneNames.data.gene.find((x) => x.id === entry.gene).name, linkedBy: entry.assay, biosample: entry.celltype}]}, writable: true, enumerable: true, configurable: true}) + } + // if returnData does already have a linked gene for that accession, add the linked gene to the existing data + else if (geneNames.data && (Object.hasOwn(returnData, entry.accession)) && (geneNames.data.gene.find((x) => x.id === entry.gene)!== undefined)){ + Object.defineProperty(returnData[entry.accession], "genes", {value: [...returnData[entry.accession].genes, {geneName: geneNames.data.gene.find((x) => x.id === entry.gene).name, linkedBy: entry.assay, biosample: entry.celltype}], writable: true, enumerable: true, configurable: true}) + } + }) + } catch (error) { + console.log("Gene Name Lookup Failed") + console.log(error) + } + } catch (error) { + console.log(error) + } + //for some reason, the formatting of the data (newlines) aren't consistent. Don't think this has any effect though + return returnData +} + + /** * * @param assembly string, "GRCh38" or "mm10" @@ -223,10 +286,9 @@ function cCRE_QUERY_VARIABLES(assembly: string, chromosome: string, start: numbe * @param biosample optional - a biosample selection. If not specified or "undefined", will be marked as "null" in gql query * @returns cCREs matching the search */ -export default async function MainQuery(assembly: string, chromosome: string, start: number, end: number, biosample: string = null) { - console.log("queried with: " + assembly, chromosome, start, end, biosample) - - var data: ApolloQueryResult | -1 +export async function MainQuery(assembly: string, chromosome: string, start: number, end: number, biosample: string = null) { + // console.log("queried with: " + assembly, chromosome, start, end, biosample) + let data: ApolloQueryResult try { data = await getClient().query({ query: biosample ? cCRE_QUERY_WITH_BIOSAMPLES : cCRE_QUERY, @@ -234,7 +296,6 @@ export default async function MainQuery(assembly: string, chromosome: string, st }) } catch (error) { console.log(error) - data = -1 } finally { return data } @@ -273,8 +334,8 @@ export const TOP_TISSUES = gql` * @returns the shortened byCellType file from https://downloads.wenglab.org/databyct.json */ export const getGlobals = async (assembly: "GRCh38" | "mm10") => { - console.log(assembly) - var res: Response + // console.log(assembly) + let res: Response if (assembly === "GRCh38") { res = await fetch("https://downloads.wenglab.org/databyct.json") } else if (assembly === "mm10") { diff --git a/screen2.0/yarn.lock b/screen2.0/yarn.lock index d0cafcae..1a9851e3 100644 --- a/screen2.0/yarn.lock +++ b/screen2.0/yarn.lock @@ -450,6 +450,29 @@ __metadata: languageName: node linkType: hard +"@mui/base@npm:5.0.0-beta.11": + version: 5.0.0-beta.11 + resolution: "@mui/base@npm:5.0.0-beta.11" + dependencies: + "@babel/runtime": ^7.22.6 + "@emotion/is-prop-valid": ^1.2.1 + "@mui/types": ^7.2.4 + "@mui/utils": ^5.14.5 + "@popperjs/core": ^2.11.8 + clsx: ^2.0.0 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 7a60421c427f3561d3e58abfa223a08ba6fc00e5587ff13c2ebbad52c3ea6bb45bdfa6e8a5cf673be4e90af0aef96b3253ec9098446ba94f5a414eb81e0c3d1a + languageName: node + linkType: hard + "@mui/base@npm:5.0.0-beta.7": version: 5.0.0-beta.7 resolution: "@mui/base@npm:5.0.0-beta.7" @@ -542,6 +565,36 @@ __metadata: languageName: node linkType: hard +"@mui/lab@npm:^5.0.0-alpha.137": + version: 5.0.0-alpha.140 + resolution: "@mui/lab@npm:5.0.0-alpha.140" + dependencies: + "@babel/runtime": ^7.22.6 + "@mui/base": 5.0.0-beta.11 + "@mui/system": ^5.14.5 + "@mui/types": ^7.2.4 + "@mui/utils": ^5.14.5 + clsx: ^2.0.0 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@mui/material": ^5.0.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 8eb8115b8def96b2a7da16dc4e5e80edd24ca9c0d62c450692668ac6eecd838fc7dd71e0b1a9b20575396f8c311518e6cc851f6c28b1690dff7fbb8e39a5dd63 + languageName: node + linkType: hard + "@mui/material@npm:^5.11.7": version: 5.14.0 resolution: "@mui/material@npm:5.14.0" @@ -625,6 +678,23 @@ __metadata: languageName: node linkType: hard +"@mui/private-theming@npm:^5.14.5": + version: 5.14.5 + resolution: "@mui/private-theming@npm:5.14.5" + dependencies: + "@babel/runtime": ^7.22.6 + "@mui/utils": ^5.14.5 + prop-types: ^15.8.1 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 0d42a858725ee52369689f51c5237cd7d296bf2af380954b7406b62f41a09c34820ac698e53475caf1115adb3849b346945fe2dd867d637be7ae182a84c92b56 + languageName: node + linkType: hard + "@mui/styled-engine@npm:^5.13.2": version: 5.13.2 resolution: "@mui/styled-engine@npm:5.13.2" @@ -702,6 +772,34 @@ __metadata: languageName: node linkType: hard +"@mui/system@npm:^5.14.5": + version: 5.14.5 + resolution: "@mui/system@npm:5.14.5" + dependencies: + "@babel/runtime": ^7.22.6 + "@mui/private-theming": ^5.14.5 + "@mui/styled-engine": ^5.13.2 + "@mui/types": ^7.2.4 + "@mui/utils": ^5.14.5 + clsx: ^2.0.0 + csstype: ^3.1.2 + prop-types: ^15.8.1 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: a177012914cf6f86af17e45e15ad489f5203ce5c055d40e77e5152ea0584fa01092c5b27fde956c8d7079b40d9ffd92270edf9c3a5249d4cd217b0dbccadd32d + languageName: node + linkType: hard + "@mui/types@npm:^7.2.4": version: 7.2.4 resolution: "@mui/types@npm:7.2.4" @@ -744,10 +842,25 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:13.4.12": - version: 13.4.12 - resolution: "@next/env@npm:13.4.12" - checksum: 2ccb2e271b3c42697c1e807cdf988429fcb563f80fa0ca72512f65f47cbbcc46c44fc53bf055814d4b467f1394de8c1a1ef6aad14d35f9993004faa956466d02 +"@mui/utils@npm:^5.14.5": + version: 5.14.5 + resolution: "@mui/utils@npm:5.14.5" + dependencies: + "@babel/runtime": ^7.22.6 + "@types/prop-types": ^15.7.5 + "@types/react-is": ^18.2.1 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + react: ^17.0.0 || ^18.0.0 + checksum: 7044d73ae41bdfd9c7c6287a3c1391ec4c5395c8f0092eac3ca4f1fd5359068fad29366f39d8072f68493eb5225399463935bbca266c879d630f8ebaa3db96d7 + languageName: node + linkType: hard + +"@next/env@npm:13.4.20-canary.0": + version: 13.4.20-canary.0 + resolution: "@next/env@npm:13.4.20-canary.0" + checksum: 8b99517e39918bce97f32b9884dfca3dc64a45eab03868c6febb87c7b85f82078f343e136b25e754c8bedb9de592066fb76561718f9a6cd23f4b821af908c5b1 languageName: node linkType: hard @@ -760,65 +873,65 @@ __metadata: languageName: node linkType: hard -"@next/swc-darwin-arm64@npm:13.4.12": - version: 13.4.12 - resolution: "@next/swc-darwin-arm64@npm:13.4.12" +"@next/swc-darwin-arm64@npm:13.4.20-canary.0": + version: 13.4.20-canary.0 + resolution: "@next/swc-darwin-arm64@npm:13.4.20-canary.0" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@next/swc-darwin-x64@npm:13.4.12": - version: 13.4.12 - resolution: "@next/swc-darwin-x64@npm:13.4.12" +"@next/swc-darwin-x64@npm:13.4.20-canary.0": + version: 13.4.20-canary.0 + resolution: "@next/swc-darwin-x64@npm:13.4.20-canary.0" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@next/swc-linux-arm64-gnu@npm:13.4.12": - version: 13.4.12 - resolution: "@next/swc-linux-arm64-gnu@npm:13.4.12" +"@next/swc-linux-arm64-gnu@npm:13.4.20-canary.0": + version: 13.4.20-canary.0 + resolution: "@next/swc-linux-arm64-gnu@npm:13.4.20-canary.0" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-arm64-musl@npm:13.4.12": - version: 13.4.12 - resolution: "@next/swc-linux-arm64-musl@npm:13.4.12" +"@next/swc-linux-arm64-musl@npm:13.4.20-canary.0": + version: 13.4.20-canary.0 + resolution: "@next/swc-linux-arm64-musl@npm:13.4.20-canary.0" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@next/swc-linux-x64-gnu@npm:13.4.12": - version: 13.4.12 - resolution: "@next/swc-linux-x64-gnu@npm:13.4.12" +"@next/swc-linux-x64-gnu@npm:13.4.20-canary.0": + version: 13.4.20-canary.0 + resolution: "@next/swc-linux-x64-gnu@npm:13.4.20-canary.0" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-x64-musl@npm:13.4.12": - version: 13.4.12 - resolution: "@next/swc-linux-x64-musl@npm:13.4.12" +"@next/swc-linux-x64-musl@npm:13.4.20-canary.0": + version: 13.4.20-canary.0 + resolution: "@next/swc-linux-x64-musl@npm:13.4.20-canary.0" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@next/swc-win32-arm64-msvc@npm:13.4.12": - version: 13.4.12 - resolution: "@next/swc-win32-arm64-msvc@npm:13.4.12" +"@next/swc-win32-arm64-msvc@npm:13.4.20-canary.0": + version: 13.4.20-canary.0 + resolution: "@next/swc-win32-arm64-msvc@npm:13.4.20-canary.0" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@next/swc-win32-ia32-msvc@npm:13.4.12": - version: 13.4.12 - resolution: "@next/swc-win32-ia32-msvc@npm:13.4.12" +"@next/swc-win32-ia32-msvc@npm:13.4.20-canary.0": + version: 13.4.20-canary.0 + resolution: "@next/swc-win32-ia32-msvc@npm:13.4.20-canary.0" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@next/swc-win32-x64-msvc@npm:13.4.12": - version: 13.4.12 - resolution: "@next/swc-win32-x64-msvc@npm:13.4.12" +"@next/swc-win32-x64-msvc@npm:13.4.20-canary.0": + version: 13.4.20-canary.0 + resolution: "@next/swc-win32-x64-msvc@npm:13.4.20-canary.0" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -2145,6 +2258,13 @@ __metadata: languageName: node linkType: hard +"clsx@npm:^2.0.0": + version: 2.0.0 + resolution: "clsx@npm:2.0.0" + checksum: a2cfb2351b254611acf92faa0daf15220f4cd648bdf96ce369d729813b85336993871a4bf6978ddea2b81b5a130478339c20d9d0b5c6fc287e5147f0c059276e + languageName: node + linkType: hard + "cluster-key-slot@npm:^1.1.0": version: 1.1.2 resolution: "cluster-key-slot@npm:1.1.2" @@ -5175,20 +5295,20 @@ __metadata: languageName: node linkType: hard -"next@npm:13.4.12": - version: 13.4.12 - resolution: "next@npm:13.4.12" +"next@npm:canary": + version: 13.4.20-canary.0 + resolution: "next@npm:13.4.20-canary.0" dependencies: - "@next/env": 13.4.12 - "@next/swc-darwin-arm64": 13.4.12 - "@next/swc-darwin-x64": 13.4.12 - "@next/swc-linux-arm64-gnu": 13.4.12 - "@next/swc-linux-arm64-musl": 13.4.12 - "@next/swc-linux-x64-gnu": 13.4.12 - "@next/swc-linux-x64-musl": 13.4.12 - "@next/swc-win32-arm64-msvc": 13.4.12 - "@next/swc-win32-ia32-msvc": 13.4.12 - "@next/swc-win32-x64-msvc": 13.4.12 + "@next/env": 13.4.20-canary.0 + "@next/swc-darwin-arm64": 13.4.20-canary.0 + "@next/swc-darwin-x64": 13.4.20-canary.0 + "@next/swc-linux-arm64-gnu": 13.4.20-canary.0 + "@next/swc-linux-arm64-musl": 13.4.20-canary.0 + "@next/swc-linux-x64-gnu": 13.4.20-canary.0 + "@next/swc-linux-x64-musl": 13.4.20-canary.0 + "@next/swc-win32-arm64-msvc": 13.4.20-canary.0 + "@next/swc-win32-ia32-msvc": 13.4.20-canary.0 + "@next/swc-win32-x64-msvc": 13.4.20-canary.0 "@swc/helpers": 0.5.1 busboy: 1.6.0 caniuse-lite: ^1.0.30001406 @@ -5198,7 +5318,6 @@ __metadata: zod: 3.21.4 peerDependencies: "@opentelemetry/api": ^1.1.0 - fibers: ">= 3.1.0" react: ^18.2.0 react-dom: ^18.2.0 sass: ^1.3.0 @@ -5224,13 +5343,11 @@ __metadata: peerDependenciesMeta: "@opentelemetry/api": optional: true - fibers: - optional: true sass: optional: true bin: next: dist/bin/next - checksum: 50bd443ffe09424c1a94d6606d41886ccd1d65185e125aa199957ea92c5e4d1c226f1675f3e5ea92e88f43f8355824ba50db52a8aeae225f7a86b6c901d25527 + checksum: 82d4104b61d729010b155a5919b8c97020fc12b020de7faac48936306cc1ffebcf6b63ed015738a53321b8aa1760b186b9176a614f23904db92fc4aef633463c languageName: node linkType: hard @@ -6542,6 +6659,7 @@ __metadata: "@emotion/react": ^11.11.1 "@emotion/styled": ^11.11.0 "@mui/icons-material": ^5.14.3 + "@mui/lab": ^5.0.0-alpha.137 "@mui/material": ^5.14.2 "@types/node": ^20.4.9 "@types/react": ^18.2.19 @@ -6555,7 +6673,7 @@ __metadata: graphql: ^16.7.1 jubilant-carnival: ^0.6.0 lint-staged: ^13.2.3 - next: 13.4.12 + next: canary normalize.css: ^8.0.1 only: ^0.0.2 postcss: 8.4.27 @@ -7593,11 +7711,11 @@ __metadata: "typescript@patch:typescript@5.1.6#~builtin": version: 5.1.6 - resolution: "typescript@patch:typescript@npm%3A5.1.6#~builtin::version=5.1.6&hash=5da071" + resolution: "typescript@patch:typescript@npm%3A5.1.6#~builtin::version=5.1.6&hash=85af82" bin: tsc: bin/tsc tsserver: bin/tsserver - checksum: f53bfe97f7c8b2b6d23cf572750d4e7d1e0c5fff1c36d859d0ec84556a827b8785077bc27676bf7e71fae538e517c3ecc0f37e7f593be913d884805d931bc8be + checksum: 21e88b0a0c0226f9cb9fd25b9626fb05b4c0f3fddac521844a13e1f30beb8f14e90bd409a9ac43c812c5946d714d6e0dee12d5d02dfc1c562c5aacfa1f49b606 languageName: node linkType: hard From 75224e658b538b03037e340375f5a2dbf388faf0 Mon Sep 17 00:00:00 2001 From: Jonathan Fisher Date: Wed, 23 Aug 2023 15:10:25 -0400 Subject: [PATCH 3/7] Buggy linked genes on main table --- screen2.0/src/app/search/ccresearch.tsx | 2 +- .../common/components/MainResultsTable.tsx | 384 +++++++++++------- 2 files changed, 239 insertions(+), 147 deletions(-) diff --git a/screen2.0/src/app/search/ccresearch.tsx b/screen2.0/src/app/search/ccresearch.tsx index c72676a2..d2198763 100644 --- a/screen2.0/src/app/search/ccresearch.tsx +++ b/screen2.0/src/app/search/ccresearch.tsx @@ -28,7 +28,7 @@ export const CcreSearch = (props: { mainQueryParams, ccrerows: MainResultTableRo //Need meaningful variable names please, is showing that this is undefined and throwing an error when using back button on details page since accession is undefined let f = props.ccrerows.find((c) => c.accession === searchParams.get("accession")) const region = { start: f?.start, chrom: f?.chromosome, end: f?.end } - console.log(f) + // console.log(f) return ( <> diff --git a/screen2.0/src/common/components/MainResultsTable.tsx b/screen2.0/src/common/components/MainResultsTable.tsx index a03c9b45..87b6bf95 100644 --- a/screen2.0/src/common/components/MainResultsTable.tsx +++ b/screen2.0/src/common/components/MainResultsTable.tsx @@ -1,168 +1,260 @@ "use client" +import { DataTable, DataTableProps, DataTableColumn } from "@weng-lab/psychscreen-ui-components" +import React, { useCallback, useEffect, useState } from "react" +import { Box, Typography, Menu, Checkbox, Stack, MenuItem, Container, FormControlLabel, FormGroup } from "@mui/material" +import { MainResultTableRow } from "../../app/search/types" +import ArrowRightIcon from '@mui/icons-material/ArrowRight'; import { usePathname, useRouter, useSearchParams } from "next/navigation" -import { DataTable, DataTableProps, DataTableColumn } from "@weng-lab/psychscreen-ui-components" -import React from "react" -import { Box, Button, Typography } from "@mui/material" -import Link from "next/link" -import { ObjectFlags } from "typescript" -import { MainResultTableRow, MainResultTableRows } from "../../app/search/types" - -let COLUMNS = (rows: MainResultTableRows) => { - // can prob just use link instead here +function MainResultsTable(props: Partial>) { + const [distance, setDistance] = useState(true) + const [CTCF_ChIAPET, setCTCF_ChIAPET] = useState(false) + const [RNAPII_ChIAPET, setRNAPII_ChIAPET] = useState(false) + + const [columns, setColumns] = useState[]>( + [{ + header: "Accession", + value: (row: { accession: string }) => row.accession, + }] + ) + const router = useRouter() const pathname = usePathname() const searchParams: any = useSearchParams()! - const createQueryString = React.useCallback( + const createQueryString = useCallback( (name: string, value: string) => { const params = new URLSearchParams(searchParams) params.set(name, value) return params.toString() - }, - [searchParams] - ) + }, [searchParams]) - let col: DataTableColumn[] = [ - { - header: "Accession", - value: (row: { accession: string }) => row.accession, - }, - { - header: "Class", - value: (row: { class: string }) => row.class, - }, - { - header: "Chr", - value: (row: { chromosome: any }) => row.chromosome, - }, - { - header: "Start", - value: (row: { start: string }) => row.start, - }, - { - header: "End", - value: (row: { end: string }) => row.end, - }, - { - header: "ATAC", - //Atac is a string because the data does not exist and is "TBD" for now - value: (row: { atac: string }) => row.atac, - }, - ] - - if (rows[0] && rows[0].dnase !== null) { - col.push({ - header: "DNase", - value: (row) => (row.dnase && row.dnase.toFixed(2)) || 0, - }) - } - if (rows[0] && rows[0].ctcf !== null) { - col.push({ - header: "CTCF", - value: (row) => (row.ctcf && row.ctcf.toFixed(2)) || 0, - }) - } - if (rows[0] && rows[0].h3k27ac != null) { - col.push({ - header: "H3K27ac", - value: (row) => (row.h3k27ac && row.h3k27ac.toFixed(2)) || 0, - }) - } - if (rows[0] && rows[0].h3k4me3 != null) { - col.push({ - header: "H3K4me3", - value: (row) => (row.h3k4me3 && row.h3k4me3.toFixed(2)) || 0, - }) - } + //How do I tell if I am replacing the array or modifying it? I need to make sure I'm replacing it + useEffect(() => { + let cols: DataTableColumn[] = [ + { + header: "Accession", + value: (row: { accession: string }) => row.accession, + }, + { + header: "Class", + value: (row: { class: string }) => row.class, + }, + { + header: "Chr", + value: (row: { chromosome: any }) => row.chromosome, + }, + { + header: "Start", + value: (row: { start: string }) => row.start, + }, + { + header: "End", + value: (row: { end: string }) => row.end, + }, + { + header: "ATAC", + //Atac is a string because the data does not exist and is "TBD" for now + value: (row: { atac: string }) => row.atac, + }, + ] - //Is there a good way to sort linked genes? Set to "" because I'm not sure - //Need to import types I set for the linked genes data - col.push({ - header: "Linked\u00A0Genes\u00A0(Distance)", - value: (row) => "", - render: (row) => ( - - - {`PC:\u00A0`} - - - {Object.values(row.linkedGenes.distancePC).map((gene: { name: string; __typename: string }, i: number) => ( - - {i < row.linkedGenes.distancePC.length - 1 ? `\u00A0${gene.name},\u00A0` : `\u00A0${gene.name}`} - - ))} - -
- - {`All:\u00A0`} - - - {Object.values(row.linkedGenes.distanceAll).map((gene: { name: string; __typename: string }, i: number) => ( - - {i < row.linkedGenes.distanceAll.length - 1 ? `\u00A0${gene.name},\u00A0` : `\u00A0${gene.name}`} - - ))} - -
- - {`CTCF-ChIAPET:\u00A0`} - - - {Object.values(row.linkedGenes.CTCF_ChIAPET).map((gene: { name: string, biosample: string }, i: number) => ( - - {i < row.linkedGenes.CTCF_ChIAPET.length - 1 ? `\u00A0${gene.name},\u00A0` : `\u00A0${gene.name}`} - - ))} - -
- - {`RNAPII-ChIAPET:\u00A0`} - - - {Object.values(row.linkedGenes.RNAPII_ChIAPET).map((gene: { name: string, biosample: string }, i: number) => ( - - {i < row.linkedGenes.RNAPII_ChIAPET.length - 1 ? `\u00A0${gene.name},\u00A0` : `\u00A0${gene.name}`} - - ))} - - - ), - }) - - return col -} + if (props.rows[0] && props.rows[0].dnase !== null) { + cols.push({ + header: "DNase", + value: (row) => (row.dnase && row.dnase.toFixed(2)) || 0, + }) + } + if (props.rows[0] && props.rows[0].ctcf !== null) { + cols.push({ + header: "CTCF", + value: (row) => (row.ctcf && row.ctcf.toFixed(2)) || 0, + }) + } + if (props.rows[0] && props.rows[0].h3k27ac != null) { + cols.push({ + header: "H3K27ac", + value: (row) => (row.h3k27ac && row.h3k27ac.toFixed(2)) || 0, + }) + } + if (props.rows[0] && props.rows[0].h3k4me3 != null) { + cols.push({ + header: "H3K4me3", + value: (row) => (row.h3k4me3 && row.h3k4me3.toFixed(2)) || 0, + }) + } -function MainResultsTable(props: Partial>) { - const router = useRouter() - const pathname = usePathname() - const searchParams: any = useSearchParams()! + //Is there a good way to sort linked genes? Set to "" because I'm not sure + //Need to import types I set for the linked genes data + //Is this being rerendered and thus the anchor is being wiped? + cols.push({ + header: "Linked\u00A0Genes\u00A0(Distance)", + value: () => "", + headerRender: () => { + const [distanceChecked, setDistanceChecked] = useState(distance) + const [CTCF_ChIAPETChecked, setCTCF_ChIAPETChecked] = useState(CTCF_ChIAPET) + const [RNAPII_ChIAPETChecked, setRNAPII_ChIAPETChecked] = useState(RNAPII_ChIAPET) + const [anchorEl, setAnchorEl] = useState(() => { + console.log("initialization performed") + return null}) + const open = Boolean(anchorEl); - const createQueryString = React.useCallback( - (name: string, value: string) => { - const params = new URLSearchParams(searchParams) - params.set(name, value) + const handleClose = () => { + setDistance(distanceChecked) + setCTCF_ChIAPET(CTCF_ChIAPETChecked) + setRNAPII_ChIAPET(RNAPII_ChIAPETChecked) + console.log("menu closed, state of checkboxes pushed to main state") + setAnchorEl(null); + }; - return params.toString() - }, - [searchParams] - ) - console.log(props.rows) + const handleClick = (event: React.MouseEvent) => { + console.log("New Anchor Set") + setAnchorEl(event.currentTarget); + }; + + const handleCheckboxChange = (event: React.ChangeEvent, value: 0 | 1 | 2) => { + switch (value) { + case 0: + setDistance(event.target.checked) + setDistanceChecked(event.target.checked) + break + case 1: + setCTCF_ChIAPET(event.target.checked) + setCTCF_ChIAPETChecked(event.target.checked) + break + case 2: + setRNAPII_ChIAPET(event.target.checked) + setRNAPII_ChIAPETChecked(event.target.checked) + break + } + }; + + // useEffect(() => { + // setDistanceChecked(distance) + // setCTCF_ChIAPETChecked(CTCF_ChIAPET) + // setRNAPII_ChIAPETChecked(RNAPII_ChIAPET) + // }, []) + + return ( + <> + + + Linked Genes + + + + + handleCheckboxChange(event, 0)} />} label={`Distance`} /> + + + handleCheckboxChange(event, 1)} />} label={`CTCF-ChIAPET`} /> + + + handleCheckboxChange(event, 2)} />} label={`RNAPII-ChIAPET`} /> + + + + + + ) + }, + render: (row) => { + return ( + <> + {distance && + + {`PC:\u00A0`} + + + {Object.values(row.linkedGenes.distancePC).map((gene: { name: string }, i: number) => ( + + {i < row.linkedGenes.distancePC.length - 1 ? `\u00A0${gene.name},\u00A0` : `\u00A0${gene.name}`} + + ))} + + } + {distance && + + {`All:\u00A0`} + + + {Object.values(row.linkedGenes.distanceAll).map((gene: { name: string }, i: number) => ( + + {i < row.linkedGenes.distanceAll.length - 1 ? `\u00A0${gene.name},\u00A0` : `\u00A0${gene.name}`} + + ))} + + } + {CTCF_ChIAPET && + + {`CTCF-ChIAPET:\u00A0`} + + + {row.linkedGenes.CTCF_ChIAPET.length == 0 ? "none" : Object.values(row.linkedGenes.CTCF_ChIAPET).map((gene: { name: string, biosample: string }, i: number) => ( + + {i < row.linkedGenes.CTCF_ChIAPET.length - 1 ? `\u00A0${gene.name},\u00A0` : `\u00A0${gene.name}`} + + ))} + + } + {RNAPII_ChIAPET && + + {`RNAPII-ChIAPET:\u00A0`} + + + {row.linkedGenes.RNAPII_ChIAPET.length == 0 ? "none" : Object.values(row.linkedGenes.RNAPII_ChIAPET).map((gene: { name: string, biosample: string }, i: number) => ( + + {i < row.linkedGenes.RNAPII_ChIAPET.length - 1 ? `\u00A0${gene.name},\u00A0` : `\u00A0${gene.name}`} + + ))} + + } + + ) + }, + }) + console.log("columns recalculated") + handleSetColumns(cols) + }, [props.rows]) + + function handleSetColumns(newColumns: DataTableColumn[]) { + console.log("new columns set") + setColumns(newColumns) + } return ( - { - router.push(pathname + "?" + createQueryString("accession", r.accession)) - }} - tableTitle={props.tableTitle} - sortColumn={6} - /> + <> + Distance - {distance.toString()} + CTCF - {CTCF_ChIAPET.toString()} + RNAPII - {RNAPII_ChIAPET.toString()} + { + router.push(pathname + "?" + createQueryString("accession", r.accession)) + }} + tableTitle={props.tableTitle} + sortColumn={0} + sortDescending + /> + ) } From b1287ff96cbfd74c19bb3fe5b81737e0a8107cd8 Mon Sep 17 00:00:00 2001 From: Jonathan Fisher Date: Thu, 24 Aug 2023 08:12:22 -0400 Subject: [PATCH 4/7] Small Changes --- screen2.0/src/common/components/MainResultsTable.tsx | 3 ++- screen2.0/src/common/lib/queries.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/screen2.0/src/common/components/MainResultsTable.tsx b/screen2.0/src/common/components/MainResultsTable.tsx index 87b6bf95..b4ab9106 100644 --- a/screen2.0/src/common/components/MainResultsTable.tsx +++ b/screen2.0/src/common/components/MainResultsTable.tsx @@ -88,6 +88,7 @@ function MainResultsTable(props: Partial>) { //Is there a good way to sort linked genes? Set to "" because I'm not sure //Need to import types I set for the linked genes data //Is this being rerendered and thus the anchor is being wiped? + //I think the table is always behind the checkboxes, since the main state values are not updated when the code is executed cols.push({ header: "Linked\u00A0Genes\u00A0(Distance)", value: () => "", @@ -224,7 +225,7 @@ function MainResultsTable(props: Partial>) { }) console.log("columns recalculated") handleSetColumns(cols) - }, [props.rows]) + }, [props.rows, CTCF_ChIAPET, RNAPII_ChIAPET, distance]) function handleSetColumns(newColumns: DataTableColumn[]) { console.log("new columns set") diff --git a/screen2.0/src/common/lib/queries.ts b/screen2.0/src/common/lib/queries.ts index 4ccd7680..593c9eb5 100644 --- a/screen2.0/src/common/lib/queries.ts +++ b/screen2.0/src/common/lib/queries.ts @@ -319,7 +319,7 @@ const GENE_QUERY = gql` } ` -export async function linkedGenesQuery(assembly: string, accession: string[]) { +export async function linkedGenesQuery(assembly: "GRCh38" | "mm10", accession: string[]) { let returnData: {[key: string]: {genes: {geneName: string, linkedBy: "CTCF-ChIAPET" | "RNAPII-ChIAPET", biosample: string}[]}} = {} let geneIDs: string[] = [] let linkedGenes: ApolloQueryResult From 61ccac81995f46020abc09d6cd364d2f6f473878 Mon Sep 17 00:00:00 2001 From: Jonathan Fisher Date: Thu, 24 Aug 2023 11:18:03 -0400 Subject: [PATCH 5/7] Updates --- screen2.0/package.json | 1 + screen2.0/src/app/page.tsx | 6 +- screen2.0/src/app/search/page.tsx | 4 -- screen2.0/src/common/components/BedUpload.tsx | 42 ++++++++++++++ .../common/components/MainResultsTable.tsx | 57 +++++++++---------- .../common/components/ResponsiveAppBar.tsx | 2 +- screen2.0/yarn.lock | 34 ++++++++++- 7 files changed, 107 insertions(+), 39 deletions(-) create mode 100644 screen2.0/src/common/components/BedUpload.tsx diff --git a/screen2.0/package.json b/screen2.0/package.json index 9631c1a5..5f27a014 100644 --- a/screen2.0/package.json +++ b/screen2.0/package.json @@ -58,6 +58,7 @@ "postcss": "8.4.27", "react": "18.2.0", "react-dom": "18.2.0", + "react-dropzone": "^14.2.3", "server": "^1.0.38", "sharp": "^0.32.4", "tailwindcss": "3.3.3", diff --git a/screen2.0/src/app/page.tsx b/screen2.0/src/app/page.tsx index ddbd87ee..bea1c552 100644 --- a/screen2.0/src/app/page.tsx +++ b/screen2.0/src/app/page.tsx @@ -2,15 +2,13 @@ "use client" import { Typography } from "@mui/material" - import MainSearch from "../common/components/MainSearch" // Grid v2 isn't declared stable yet, but using it now as it's what MUI is currently developing out import Grid2 from "@mui/material/Unstable_Grid2/Grid2" - import homeImage from "../../public/homeImage.png" - import Image from "next/image" +import BedUpload from "../common/components/BedUpload" export default function Home() { return ( @@ -24,6 +22,8 @@ export default function Home() { Search + Find Intersecting cCREs from BED file + What is SCREEN? diff --git a/screen2.0/src/app/search/page.tsx b/screen2.0/src/app/search/page.tsx index 5f7265f4..28832146 100644 --- a/screen2.0/src/app/search/page.tsx +++ b/screen2.0/src/app/search/page.tsx @@ -97,11 +97,7 @@ export default async function Search({ accessions.push(currentElement.info.accession) } }) - const otherLinked = await linkedGenesQuery(mainQueryParams.assembly, accessions) - console.log(otherLinked.EH38E4028463) - - //Need to add in biosample information for the hover rows.forEach((row: MainResultTableRow) => { const accession = row.accession diff --git a/screen2.0/src/common/components/BedUpload.tsx b/screen2.0/src/common/components/BedUpload.tsx new file mode 100644 index 00000000..ab881473 --- /dev/null +++ b/screen2.0/src/common/components/BedUpload.tsx @@ -0,0 +1,42 @@ +"use client" + +import React, { useState } from "react" +import { Button, Typography, Box } from "@mui/material" +import Dropzone from "react-dropzone" + + +/** + * Things to improve upon old upload: + * - Prevent upload of non BED files + * - Clear files + * - Convert byte size to mb/gb + */ +const BedUpload = () => { + const [files, setFiles] = useState([]) + + function handleFileUploads(uploads){ + setFiles([...files, ...uploads]) + } + + return ( + + handleFileUploads(acceptedFiles)}> + {({ getRootProps, getInputProps }) => ( +
+
+ +

Drag 'n' drop some files here, or click to select files

+
+
+ )} + +
+ {files.map((file: File, index: number) => { + return {file.name} - {file.size} bytes + })} + {files.length > 0 && } + + ) +} + +export default BedUpload \ No newline at end of file diff --git a/screen2.0/src/common/components/MainResultsTable.tsx b/screen2.0/src/common/components/MainResultsTable.tsx index b4ab9106..00e17e5a 100644 --- a/screen2.0/src/common/components/MainResultsTable.tsx +++ b/screen2.0/src/common/components/MainResultsTable.tsx @@ -1,4 +1,5 @@ "use client" +// import { DataTable, DataTableProps, DataTableColumn } from "@weng-lab/psychscreen-ui-components" import { DataTable, DataTableProps, DataTableColumn } from "@weng-lab/psychscreen-ui-components" import React, { useCallback, useEffect, useState } from "react" import { Box, Typography, Menu, Checkbox, Stack, MenuItem, Container, FormControlLabel, FormGroup } from "@mui/material" @@ -11,6 +12,12 @@ function MainResultsTable(props: Partial>) { const [CTCF_ChIAPET, setCTCF_ChIAPET] = useState(false) const [RNAPII_ChIAPET, setRNAPII_ChIAPET] = useState(false) + const [anchorEl, setAnchorEl] = useState(() => { + console.log("initialization performed") + return null}) + + var open = Boolean(anchorEl); + const [columns, setColumns] = useState[]>( [{ header: "Accession", @@ -85,26 +92,24 @@ function MainResultsTable(props: Partial>) { }) } - //Is there a good way to sort linked genes? Set to "" because I'm not sure - //Need to import types I set for the linked genes data - //Is this being rerendered and thus the anchor is being wiped? - //I think the table is always behind the checkboxes, since the main state values are not updated when the code is executed + //Whenever the state of the checkboxes conflicts with the state of the main component, it triggers a rerender cols.push({ header: "Linked\u00A0Genes\u00A0(Distance)", value: () => "", headerRender: () => { - const [distanceChecked, setDistanceChecked] = useState(distance) - const [CTCF_ChIAPETChecked, setCTCF_ChIAPETChecked] = useState(CTCF_ChIAPET) - const [RNAPII_ChIAPETChecked, setRNAPII_ChIAPETChecked] = useState(RNAPII_ChIAPET) - const [anchorEl, setAnchorEl] = useState(() => { - console.log("initialization performed") - return null}) - const open = Boolean(anchorEl); + //IMPORTANT: I CANNOT DECLARE HOOKS HERE UNLESS I CHANGE headerRender to be a custom hook "useHeaderRender" + // const [distanceChecked, setDistanceChecked] = useState(distance) + // const [CTCF_ChIAPETChecked, setCTCF_ChIAPETChecked] = useState(CTCF_ChIAPET) + // const [RNAPII_ChIAPETChecked, setRNAPII_ChIAPETChecked] = useState(RNAPII_ChIAPET) + // const [anchorEl, setAnchorEl] = useState(() => { + // console.log("initialization performed") + // return null}) + const handleClose = () => { - setDistance(distanceChecked) - setCTCF_ChIAPET(CTCF_ChIAPETChecked) - setRNAPII_ChIAPET(RNAPII_ChIAPETChecked) + // setDistance(distanceChecked) + // setCTCF_ChIAPET(CTCF_ChIAPETChecked) + // setRNAPII_ChIAPET(RNAPII_ChIAPETChecked) console.log("menu closed, state of checkboxes pushed to main state") setAnchorEl(null); }; @@ -118,27 +123,21 @@ function MainResultsTable(props: Partial>) { switch (value) { case 0: setDistance(event.target.checked) - setDistanceChecked(event.target.checked) + // setDistanceChecked(event.target.checked) break case 1: setCTCF_ChIAPET(event.target.checked) - setCTCF_ChIAPETChecked(event.target.checked) + // setCTCF_ChIAPETChecked(event.target.checked) break case 2: setRNAPII_ChIAPET(event.target.checked) - setRNAPII_ChIAPETChecked(event.target.checked) + // setRNAPII_ChIAPETChecked(event.target.checked) break } }; - // useEffect(() => { - // setDistanceChecked(distance) - // setCTCF_ChIAPETChecked(CTCF_ChIAPET) - // setRNAPII_ChIAPETChecked(RNAPII_ChIAPET) - // }, []) - return ( - <> + Linked Genes @@ -154,17 +153,17 @@ function MainResultsTable(props: Partial>) { > - handleCheckboxChange(event, 0)} />} label={`Distance`} /> + handleCheckboxChange(event, 0)} />} label={`Distance`} /> - handleCheckboxChange(event, 1)} />} label={`CTCF-ChIAPET`} /> + handleCheckboxChange(event, 1)} />} label={`CTCF-ChIAPET`} /> - handleCheckboxChange(event, 2)} />} label={`RNAPII-ChIAPET`} /> + handleCheckboxChange(event, 2)} />} label={`RNAPII-ChIAPET`} /> - + ) }, @@ -243,7 +242,7 @@ function MainResultsTable(props: Partial>) { //The columns in the DataTable are being stored in an object. It might be that a change in props here doesn't replace the columns on the state variable, but rather modifies the columns attribute, which the React Docs say is bad. //Internally, when the columns are changed (by the modal), the columns are reset properly(?) using the spread operator. //Does a function passed to DataTable have access to the state of the parent function? - key={props.rows[0] && props.rows[0].dnase + props.rows[0].ctcf + props.rows[0].h3k27ac + props.rows[0].h3k4me3 + columns.toString() + distance.toString() + CTCF_ChIAPET.toString() + RNAPII_ChIAPET.toString()} + key={props.rows[0] && props.rows[0].dnase + props.rows[0].ctcf + props.rows[0].h3k27ac + props.rows[0].h3k4me3 + columns.toString() + distance + CTCF_ChIAPET + RNAPII_ChIAPET} rows={props.rows} columns={columns} itemsPerPage={props.itemsPerPage} diff --git a/screen2.0/src/common/components/ResponsiveAppBar.tsx b/screen2.0/src/common/components/ResponsiveAppBar.tsx index 3522d534..df6d8838 100644 --- a/screen2.0/src/common/components/ResponsiveAppBar.tsx +++ b/screen2.0/src/common/components/ResponsiveAppBar.tsx @@ -194,7 +194,7 @@ function ResponsiveAppBar() { {/* Wrap in next/link to enable dyanic link changing from basePath in next.config.js */} - {page.pageName} + {page.pageName} ))} diff --git a/screen2.0/yarn.lock b/screen2.0/yarn.lock index 040626ed..303516f8 100644 --- a/screen2.0/yarn.lock +++ b/screen2.0/yarn.lock @@ -1795,6 +1795,13 @@ __metadata: languageName: node linkType: hard +"attr-accept@npm:^2.2.2": + version: 2.2.2 + resolution: "attr-accept@npm:2.2.2" + checksum: 496f7249354ab53e522510c1dc8f67a1887382187adde4dc205507d2f014836a247073b05e9d9ea51e2e9c7f71b0d2aa21730af80efa9af2d68303e5f0565c4d + languageName: node + linkType: hard + "autoprefixer@npm:10.4.15": version: 10.4.15 resolution: "autoprefixer@npm:10.4.15" @@ -3585,6 +3592,15 @@ __metadata: languageName: node linkType: hard +"file-selector@npm:^0.6.0": + version: 0.6.0 + resolution: "file-selector@npm:0.6.0" + dependencies: + tslib: ^2.4.0 + checksum: 7d051b6e5d793f3c6e2ab287ba5e7c2c6a0971bccc9d56e044c8047ba483e18f60fc0b5771c951dc707c0d15f4f36ccb4f1f1aaf385d21ec8f7700dadf8325ba + languageName: node + linkType: hard + "fill-range@npm:^7.0.1": version: 7.0.1 resolution: "fill-range@npm:7.0.1" @@ -6345,6 +6361,19 @@ __metadata: languageName: node linkType: hard +"react-dropzone@npm:^14.2.3": + version: 14.2.3 + resolution: "react-dropzone@npm:14.2.3" + dependencies: + attr-accept: ^2.2.2 + file-selector: ^0.6.0 + prop-types: ^15.8.1 + peerDependencies: + react: ">= 16.8 || 18.0.0" + checksum: 174b744d5ca898cf3d84ec1aeb6cef5211c446697e45dc8ece8287a03d291f8d07253206d5a1247ef156fd385d65e7de666d4d5c2986020b8543b8f2434e8b40 + languageName: node + linkType: hard + "react-is@npm:^16.13.1, react-is@npm:^16.7.0": version: 16.13.1 resolution: "react-is@npm:16.13.1" @@ -6711,6 +6740,7 @@ __metadata: prettier-plugin-tailwindcss: ^0.4.1 react: 18.2.0 react-dom: 18.2.0 + react-dropzone: ^14.2.3 server: ^1.0.38 sharp: ^0.32.4 tailwindcss: 3.3.3 @@ -7703,11 +7733,11 @@ __metadata: "typescript@patch:typescript@5.1.6#~builtin": version: 5.1.6 - resolution: "typescript@patch:typescript@npm%3A5.1.6#~builtin::version=5.1.6&hash=5da071" + resolution: "typescript@patch:typescript@npm%3A5.1.6#~builtin::version=5.1.6&hash=85af82" bin: tsc: bin/tsc tsserver: bin/tsserver - checksum: f53bfe97f7c8b2b6d23cf572750d4e7d1e0c5fff1c36d859d0ec84556a827b8785077bc27676bf7e71fae538e517c3ecc0f37e7f593be913d884805d931bc8be + checksum: 21e88b0a0c0226f9cb9fd25b9626fb05b4c0f3fddac521844a13e1f30beb8f14e90bd409a9ac43c812c5946d714d6e0dee12d5d02dfc1c562c5aacfa1f49b606 languageName: node linkType: hard From a45bf6eefc0ffe53ca8dd42e5c3c0e70bd0032bf Mon Sep 17 00:00:00 2001 From: Jonathan Fisher Date: Mon, 28 Aug 2023 13:03:31 -0400 Subject: [PATCH 6/7] Change some things around with HeaderRender --- screen2.0/package.json | 2 +- screen2.0/src/common/components/BedUpload.tsx | 2 +- .../common/components/MainResultsTable.tsx | 119 ++++++------------ screen2.0/yarn.lock | 10 +- 4 files changed, 48 insertions(+), 85 deletions(-) diff --git a/screen2.0/package.json b/screen2.0/package.json index 5f27a014..e134b77d 100644 --- a/screen2.0/package.json +++ b/screen2.0/package.json @@ -45,7 +45,7 @@ "@types/node": "^20.5.0", "@types/react": "^18.2.20", "@types/react-dom": "18.2.7", - "@weng-lab/psychscreen-ui-components": "^0.7.8", + "@weng-lab/psychscreen-ui-components": "^0.8.0-a.1", "@weng-lab/ts-ztable": "^4.0.1", "autoprefixer": "10.4.15", "eslint": "8.47.0", diff --git a/screen2.0/src/common/components/BedUpload.tsx b/screen2.0/src/common/components/BedUpload.tsx index ab881473..59ec46b7 100644 --- a/screen2.0/src/common/components/BedUpload.tsx +++ b/screen2.0/src/common/components/BedUpload.tsx @@ -25,7 +25,7 @@ const BedUpload = () => {
-

Drag 'n' drop some files here, or click to select files

+ Drag and drop some files here, or click to select files
)} diff --git a/screen2.0/src/common/components/MainResultsTable.tsx b/screen2.0/src/common/components/MainResultsTable.tsx index 00e17e5a..b7863a1d 100644 --- a/screen2.0/src/common/components/MainResultsTable.tsx +++ b/screen2.0/src/common/components/MainResultsTable.tsx @@ -1,5 +1,4 @@ "use client" -// import { DataTable, DataTableProps, DataTableColumn } from "@weng-lab/psychscreen-ui-components" import { DataTable, DataTableProps, DataTableColumn } from "@weng-lab/psychscreen-ui-components" import React, { useCallback, useEffect, useState } from "react" import { Box, Typography, Menu, Checkbox, Stack, MenuItem, Container, FormControlLabel, FormGroup } from "@mui/material" @@ -8,22 +7,9 @@ import ArrowRightIcon from '@mui/icons-material/ArrowRight'; import { usePathname, useRouter, useSearchParams } from "next/navigation" function MainResultsTable(props: Partial>) { - const [distance, setDistance] = useState(true) - const [CTCF_ChIAPET, setCTCF_ChIAPET] = useState(false) - const [RNAPII_ChIAPET, setRNAPII_ChIAPET] = useState(false) - - const [anchorEl, setAnchorEl] = useState(() => { - console.log("initialization performed") - return null}) - - var open = Boolean(anchorEl); - - const [columns, setColumns] = useState[]>( - [{ - header: "Accession", - value: (row: { accession: string }) => row.accession, - }] - ) + const [distance, setDistance] = useState(true) + const [CTCF_ChIAPET, setCTCF_ChIAPET] = useState(false) + const [RNAPII_ChIAPET, setRNAPII_ChIAPET] = useState(false) const router = useRouter() const pathname = usePathname() @@ -37,8 +23,7 @@ function MainResultsTable(props: Partial>) { return params.toString() }, [searchParams]) - //How do I tell if I am replacing the array or modifying it? I need to make sure I'm replacing it - useEffect(() => { + const columns = (funcSetDistance: React.Dispatch>, funcSetCTCF_ChIAPET: React.Dispatch>, funcSetRNAPII_ChIAPET: React.Dispatch>) => { let cols: DataTableColumn[] = [ { header: "Accession", @@ -96,44 +81,32 @@ function MainResultsTable(props: Partial>) { cols.push({ header: "Linked\u00A0Genes\u00A0(Distance)", value: () => "", - headerRender: () => { - //IMPORTANT: I CANNOT DECLARE HOOKS HERE UNLESS I CHANGE headerRender to be a custom hook "useHeaderRender" - // const [distanceChecked, setDistanceChecked] = useState(distance) - // const [CTCF_ChIAPETChecked, setCTCF_ChIAPETChecked] = useState(CTCF_ChIAPET) - // const [RNAPII_ChIAPETChecked, setRNAPII_ChIAPETChecked] = useState(RNAPII_ChIAPET) - // const [anchorEl, setAnchorEl] = useState(() => { - // console.log("initialization performed") - // return null}) + HeaderRender: () => { + const [checkedState, setCheckedState] = useState([distance, CTCF_ChIAPET, RNAPII_ChIAPET]) + const [anchorEl, setAnchorEl] = useState(null) + var open = Boolean(anchorEl); const handleClose = () => { - // setDistance(distanceChecked) - // setCTCF_ChIAPET(CTCF_ChIAPETChecked) - // setRNAPII_ChIAPET(RNAPII_ChIAPETChecked) - console.log("menu closed, state of checkboxes pushed to main state") + console.log("closed properly") + funcSetDistance(checkedState[0]) + funcSetCTCF_ChIAPET(checkedState[1]) + funcSetRNAPII_ChIAPET(checkedState[2]) setAnchorEl(null); }; const handleClick = (event: React.MouseEvent) => { - console.log("New Anchor Set") setAnchorEl(event.currentTarget); }; const handleCheckboxChange = (event: React.ChangeEvent, value: 0 | 1 | 2) => { - switch (value) { - case 0: - setDistance(event.target.checked) - // setDistanceChecked(event.target.checked) - break - case 1: - setCTCF_ChIAPET(event.target.checked) - // setCTCF_ChIAPETChecked(event.target.checked) - break - case 2: - setRNAPII_ChIAPET(event.target.checked) - // setRNAPII_ChIAPETChecked(event.target.checked) - break - } + setCheckedState(checkedState.map((prevValue, index) => { + if (index === value) { + return event.target.checked + } else { + return prevValue + } + })) }; return ( @@ -153,13 +126,13 @@ function MainResultsTable(props: Partial>) { > - handleCheckboxChange(event, 0)} />} label={`Distance`} /> + handleCheckboxChange(event, 0)} />} label={`Distance`} /> - handleCheckboxChange(event, 1)} />} label={`CTCF-ChIAPET`} /> + handleCheckboxChange(event, 1)} />} label={`CTCF-ChIAPET`} /> - handleCheckboxChange(event, 2)} />} label={`RNAPII-ChIAPET`} /> + handleCheckboxChange(event, 2)} />} label={`RNAPII-ChIAPET`} /> @@ -223,38 +196,28 @@ function MainResultsTable(props: Partial>) { }, }) console.log("columns recalculated") - handleSetColumns(cols) - }, [props.rows, CTCF_ChIAPET, RNAPII_ChIAPET, distance]) - - function handleSetColumns(newColumns: DataTableColumn[]) { - console.log("new columns set") - setColumns(newColumns) + return cols } return ( - <> - Distance - {distance.toString()} - CTCF - {CTCF_ChIAPET.toString()} - RNAPII - {RNAPII_ChIAPET.toString()} - { - router.push(pathname + "?" + createQueryString("accession", r.accession)) - }} - tableTitle={props.tableTitle} - sortColumn={0} - sortDescending - /> - + { + router.push(pathname + "?" + createQueryString("accession", r.accession)) + }} + tableTitle={props.tableTitle} + sortColumn={0} + sortDescending + /> ) } diff --git a/screen2.0/yarn.lock b/screen2.0/yarn.lock index 303516f8..c2541f26 100644 --- a/screen2.0/yarn.lock +++ b/screen2.0/yarn.lock @@ -1418,12 +1418,12 @@ __metadata: languageName: node linkType: hard -"@weng-lab/psychscreen-ui-components@npm:^0.7.8": - version: 0.7.8 - resolution: "@weng-lab/psychscreen-ui-components@npm:0.7.8" +"@weng-lab/psychscreen-ui-components@npm:^0.8.0-a.1": + version: 0.8.0-a.1 + resolution: "@weng-lab/psychscreen-ui-components@npm:0.8.0-a.1" peerDependencies: react: ">=16" - checksum: 516eed3de77f161f65f7c3e2af230faa9cc6218456d8d6123d1226da1c745f2b2458d1c9a0562ccd9c0bbc5ba7dd9b657ee8d9aac6532fdf10fcb728036f6e92 + checksum: 7485d6958f402ba713e02051f7c7b30852515814c853e6ccd93abe6d578822e155ff8f54d1b3d857485810ae999248aaf82bed1a8a9f4827738d9afcaa9200fc languageName: node linkType: hard @@ -6723,7 +6723,7 @@ __metadata: "@types/node": ^20.5.0 "@types/react": ^18.2.20 "@types/react-dom": 18.2.7 - "@weng-lab/psychscreen-ui-components": ^0.7.8 + "@weng-lab/psychscreen-ui-components": ^0.8.0-a.1 "@weng-lab/ts-ztable": ^4.0.1 autoprefixer: 10.4.15 eslint: 8.47.0 From ff33a2428d8c022d744a616f09668bded3666643 Mon Sep 17 00:00:00 2001 From: Jonathan Fisher Date: Mon, 28 Aug 2023 20:01:04 -0400 Subject: [PATCH 7/7] Move bed upload, add unsortable to column --- screen2.0/package.json | 2 +- screen2.0/src/app/applets/multi-region-search/page.tsx | 4 +++- screen2.0/src/app/page.tsx | 2 -- screen2.0/src/common/components/BedUpload.tsx | 2 +- screen2.0/src/common/components/MainResultsTable.tsx | 1 + screen2.0/yarn.lock | 10 +++++----- 6 files changed, 11 insertions(+), 10 deletions(-) diff --git a/screen2.0/package.json b/screen2.0/package.json index e134b77d..be152630 100644 --- a/screen2.0/package.json +++ b/screen2.0/package.json @@ -45,7 +45,7 @@ "@types/node": "^20.5.0", "@types/react": "^18.2.20", "@types/react-dom": "18.2.7", - "@weng-lab/psychscreen-ui-components": "^0.8.0-a.1", + "@weng-lab/psychscreen-ui-components": "^0.8.0-a.2", "@weng-lab/ts-ztable": "^4.0.1", "autoprefixer": "10.4.15", "eslint": "8.47.0", diff --git a/screen2.0/src/app/applets/multi-region-search/page.tsx b/screen2.0/src/app/applets/multi-region-search/page.tsx index 037eb7e3..257811c2 100644 --- a/screen2.0/src/app/applets/multi-region-search/page.tsx +++ b/screen2.0/src/app/applets/multi-region-search/page.tsx @@ -1,10 +1,12 @@ "use client" import { Typography } from "@mui/material" +import BedUpload from "../../../common/components/BedUpload" export default function MultiRegionSearch() { return (
- This is the Multi-Region Search page + Find Intersecting cCREs from BED file +
) } diff --git a/screen2.0/src/app/page.tsx b/screen2.0/src/app/page.tsx index bea1c552..bc4209e7 100644 --- a/screen2.0/src/app/page.tsx +++ b/screen2.0/src/app/page.tsx @@ -22,8 +22,6 @@ export default function Home() { Search - Find Intersecting cCREs from BED file - What is SCREEN? diff --git a/screen2.0/src/common/components/BedUpload.tsx b/screen2.0/src/common/components/BedUpload.tsx index 59ec46b7..d49f5a90 100644 --- a/screen2.0/src/common/components/BedUpload.tsx +++ b/screen2.0/src/common/components/BedUpload.tsx @@ -25,7 +25,7 @@ const BedUpload = () => {
- Drag and drop some files here, or click to select files +
)} diff --git a/screen2.0/src/common/components/MainResultsTable.tsx b/screen2.0/src/common/components/MainResultsTable.tsx index b7863a1d..3e37ad5e 100644 --- a/screen2.0/src/common/components/MainResultsTable.tsx +++ b/screen2.0/src/common/components/MainResultsTable.tsx @@ -81,6 +81,7 @@ function MainResultsTable(props: Partial>) { cols.push({ header: "Linked\u00A0Genes\u00A0(Distance)", value: () => "", + unsortable: true, HeaderRender: () => { const [checkedState, setCheckedState] = useState([distance, CTCF_ChIAPET, RNAPII_ChIAPET]) const [anchorEl, setAnchorEl] = useState(null) diff --git a/screen2.0/yarn.lock b/screen2.0/yarn.lock index c2541f26..b6f44525 100644 --- a/screen2.0/yarn.lock +++ b/screen2.0/yarn.lock @@ -1418,12 +1418,12 @@ __metadata: languageName: node linkType: hard -"@weng-lab/psychscreen-ui-components@npm:^0.8.0-a.1": - version: 0.8.0-a.1 - resolution: "@weng-lab/psychscreen-ui-components@npm:0.8.0-a.1" +"@weng-lab/psychscreen-ui-components@npm:^0.8.0-a.2": + version: 0.8.0-a.2 + resolution: "@weng-lab/psychscreen-ui-components@npm:0.8.0-a.2" peerDependencies: react: ">=16" - checksum: 7485d6958f402ba713e02051f7c7b30852515814c853e6ccd93abe6d578822e155ff8f54d1b3d857485810ae999248aaf82bed1a8a9f4827738d9afcaa9200fc + checksum: d70fd09ad78cfa3558348f261172fb694e864c694b7bc6e6f2aacdba4b186f80991d1046cfb0e53780a1be9d4abbcbbf895e5dbe865041b7027dce85b0f38e34 languageName: node linkType: hard @@ -6723,7 +6723,7 @@ __metadata: "@types/node": ^20.5.0 "@types/react": ^18.2.20 "@types/react-dom": 18.2.7 - "@weng-lab/psychscreen-ui-components": ^0.8.0-a.1 + "@weng-lab/psychscreen-ui-components": ^0.8.0-a.2 "@weng-lab/ts-ztable": ^4.0.1 autoprefixer: 10.4.15 eslint: 8.47.0