diff --git a/immuscreen/package.json b/immuscreen/package.json index e66eaf3..05bbdde 100644 --- a/immuscreen/package.json +++ b/immuscreen/package.json @@ -47,6 +47,7 @@ "@types/react": "^18.2.19", "@types/react-dom": "18.2.7", "@visx/axis": "^3.8.0", + "@visx/glyph": "latest", "@visx/event": "latest", "@visx/gradient": "^3.3.0", "@visx/grid": "^3.5.0", diff --git a/immuscreen/src/app/about/page.tsx b/immuscreen/src/app/about/page.tsx index 8f3f78f..31e6f1c 100644 --- a/immuscreen/src/app/about/page.tsx +++ b/immuscreen/src/app/about/page.tsx @@ -13,11 +13,9 @@ export default function About() {
- About immuSCREEN - Search immune Candidate cis-Regulatory Elements by ENCODE - - - + About igSCREEN + Search immune Candidate cis-Regulatory Elements by ENCODE +
) diff --git a/immuscreen/src/app/gene/page.tsx b/immuscreen/src/app/gene/page.tsx index d52118e..2628e56 100644 --- a/immuscreen/src/app/gene/page.tsx +++ b/immuscreen/src/app/gene/page.tsx @@ -1,40 +1,20 @@ "use client" import React, { useState} from "react" -import { Tabs, Tab, Typography } from "@mui/material" +import { Tabs, Tab, Typography, colors } from "@mui/material" import { client } from "../../common/utils" import { StyledTab } from "../../common/utils" import Grid2 from "@mui/material/Unstable_Grid2/Grid2" import { useQuery } from "@apollo/client" -import { gql } from "@apollo/client" import { ReadonlyURLSearchParams, useSearchParams } from "next/navigation" - import { DataTable } from "@weng-lab/psychscreen-ui-components" import { GenomeBrowserView } from "../../common/gbview/genomebrowserview" import { GeneAutoComplete } from "../../common/components/mainsearch/GeneAutocomplete" -import { RNAUMAP } from "./rnaumap" - +import { UmapPlot } from "../../common/components/umapplot" +import { RNA_UMAP_QUERY, EQTL_QUERY } from "./queries" +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; - -const EQTL_QUERY = gql` - query iCREeQTLQuery($study: String!, $geneid: String) - { - icreeQTLQuery(study:$study, geneid:$geneid) { - variant_id - pvalue - qvalue - geneid - pval_nominal - phenotype_id - celltype - study - rsid - pval_beta - - } - } - -` const Gene = () =>{ const searchParams: ReadonlyURLSearchParams = useSearchParams()! const [value, setValue] = useState(0) @@ -42,6 +22,16 @@ const Gene = () =>{ const handleChange = (_, newValue: number) => { setValue(newValue) } + + const { loading: rnaumaploading, data: rnumapdata } = useQuery(RNA_UMAP_QUERY, { + variables: { + gene_id: searchParams.get('gene') + }, + skip: !searchParams.get('gene'), + fetchPolicy: "cache-and-network", + nextFetchPolicy: "cache-first", + client, + }) const { loading: loading, data: data } = useQuery(EQTL_QUERY, { variables: { study: "GTEX", @@ -76,8 +66,13 @@ const Gene = () =>{ }) - - + const [colorScheme, setcolorScheme] = useState('genexp'); + const handleColorSchemeChange = ( + event: React.MouseEvent, + newScheme: string, + ) => { + setcolorScheme(newScheme); + }; return !searchParams.get('gene') ?
@@ -97,8 +92,6 @@ const Gene = () =>{
: (
- - {searchParams.get("gene") && Gene Details: {searchParams.get("gene")}} @@ -107,7 +100,7 @@ const Gene = () =>{ - + @@ -215,9 +208,23 @@ const Gene = () =>{ coordinates={{ start: +searchParams.get("start")-20000, end: +searchParams.get("end")+20000, chromosome:searchParams.get("chromosome") }} />} - {value===2 && - - + {value===2 && rnumapdata && !rnaumaploading && rnumapdata.calderonRnaUmapQuery.length>0 && + + Color Scheme: +

+ + Gene Expression + CellType Cluster + +
+
+ {return {...d, value: Math.log(d.value+0.01)} })} plottitle={"log10 TPM"}/> } diff --git a/immuscreen/src/app/gene/queries.ts b/immuscreen/src/app/gene/queries.ts new file mode 100644 index 0000000..aa4dcbe --- /dev/null +++ b/immuscreen/src/app/gene/queries.ts @@ -0,0 +1,37 @@ + +import { gql } from "@apollo/client" +export const RNA_UMAP_QUERY = gql` +query rnaUmapQuery($gene_id: String!) +{ + calderonRnaUmapQuery(gene_id: $gene_id){ + name + donor + stimulation + celltype + class + umap_1 + umap_2 + value + } + } + +` +export const EQTL_QUERY = gql` + query iCREeQTLQuery($study: String!, $geneid: String) + { + icreeQTLQuery(study:$study, geneid:$geneid) { + variant_id + pvalue + qvalue + geneid + pval_nominal + phenotype_id + celltype + study + rsid + pval_beta + + } + } + +` diff --git a/immuscreen/src/app/gene/rnaumap.tsx b/immuscreen/src/app/gene/rnaumap.tsx deleted file mode 100644 index b5dbf0e..0000000 --- a/immuscreen/src/app/gene/rnaumap.tsx +++ /dev/null @@ -1,214 +0,0 @@ -import { client } from "../../common/utils" -import React, {useMemo, useState} from "react" -import { useQuery } from "@apollo/client" -import { gql } from "@apollo/client" -import { Chart, linearTransform, Scatter } from "jubilant-carnival"; - -export function lower5(x: number): number { - return Math.floor(x / 5) * 5; - } - - export function upper5(x: number): number { - return Math.ceil(x / 5) * 5; - } - export const range = (min: number, max: number, by: number = 1) => { - let newVals: number[] = []; - for (let i = min; i < max; i = i + by) { - newVals.push(i); - } - return newVals; - }; - -const RNA_UMAP_QUERY = gql` -query rnaUmapQuery($gene_id: String!) -{ - calderonRnaUmapQuery(gene_id: $gene_id){ - name - donor - stimulation - - celltype - class - umap_1 - umap_2 - value - - } - } - -` - -export const RNAUMAP = (gene) => { - - const [tooltip, setTooltip] = useState(-1); - const chartRef = React.useRef(null); - const { loading: loading, data: data } = useQuery(RNA_UMAP_QUERY, { - variables: { - gene_id: gene.gene - }, - skip: !gene, - fetchPolicy: "cache-and-network", - nextFetchPolicy: "cache-first", - client, - }) - const maxValue = data && Math.max(...data.calderonRnaUmapQuery.map(a=>a.value)) - - - - const gradient = data && linearTransform( - { start: 0, end: maxValue }, - { start: 215, end: 0 } - ); - const points = useMemo( - () => - data && data.calderonRnaUmapQuery.map((x) => ({ - x: x.umap_1, - y: x.umap_2, - data: x.celltype, - stimulation: x.stimulation, - class: x.class, - name: x.name, - val: x.value, - svgProps: { - fill: `rgb(255,${gradient( - x.value, - ).toFixed(0)},0)`, - fillOpacity: 0.6, - r: 8, - strokeWidth: x.stimulation==="S" ? 4:0, - stroke: "#000000", - strokeOpacity: 0.4, - }, - })), - [data,loading] - ); - - const domain = useMemo( - () => - points && points.length > 0 - ? { - x: { - start: lower5(Math.min(...points.map((x) => x.x)) * 1.1), - end: upper5(Math.max(...points.map((x) => x.x))), - }, - y: { - start: lower5(Math.min(...points.map((x) => x.y)) * 1.1), - end: upper5(Math.max(...points.map((x) => x.y))), - }, - } - : { x: { start: 0, end: 1 }, y: { start: 0, end: 1 } }, - [points] - ); - - let tooltipTimeout - return ( - <> - {points && maxValue && - { - if (tooltipTimeout) clearTimeout(tooltipTimeout); - setTooltip(i); - //setHighlighted(points[i]?.data); - }} - onPointMouseOut={() => { - (tooltipTimeout = setTimeout(() => { - setTooltip(-1); - }, 300)) - - // setHighlighted(""); - }} - /> - - - - - - - {tooltip > -1 && ( - - )} - {tooltip > -1 && ( - - {points[tooltip].name.replace(/_/g, " ")} - - )} - - x.x))) + 2} - y={upper5(Math.max(...points.map((x) => x.y))) - 2} - width={0.5} - height={ - upper5(Math.max(...points.map((x) => x.y))) - - lower5(Math.min(...points.map((x) => x.y))) - - 5 - } - fill="url(#scale)" - /> - x.x))) + 1} - y={ - (lower5(Math.min(...points.map((x) => x.y))) + - upper5(Math.max(...points.map((x) => x.y)))) / - 2 + - 0.5 - } - transform="rotate(-90)" - fontSize={0.5} - textAnchor="middle" - > - Expression - - x.x))) + 2} - y={lower5(Math.min(...points.map((x) => x.y)))+2.5} - fontSize={0.3} - > - 0 - - x.x))) + 1.55} - y={upper5(Math.max(...points.map((x) => x.y)))-1.5} - fontSize={0.3} - > - {maxValue.toFixed(1)} - - - } - - ) -} \ No newline at end of file diff --git a/immuscreen/src/app/icres/atacbarplot.tsx b/immuscreen/src/app/icres/atacbarplot.tsx index 4dcea73..c391814 100644 --- a/immuscreen/src/app/icres/atacbarplot.tsx +++ b/immuscreen/src/app/icres/atacbarplot.tsx @@ -4,13 +4,12 @@ import { Group } from "@visx/group"; import { BarGroup } from "@visx/shape"; import { AxisBottom, AxisLeft } from "@visx/axis"; import { scaleBand, scaleLinear } from "@visx/scale"; -import { stringToColour } from './utils'; +import { stringToColour } from '../../common/utils'; import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'; import { scaleOrdinal } from '@visx/scale'; import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip'; import { localPoint } from '@visx/event'; -import { Text } from "@visx/text"; -import { experimentInfo, cellColors } from "./consts" +import { cellColors } from "../../common/consts" type TooltipData = { bardata: { class: string, subclass: string, description: string , ct_description?: string, value: number } @@ -299,7 +298,7 @@ export const AtacBarPlot: React.FC<{plottitle?: string, byct?: boolean, study: } .labelcolor { - color: #000000; + color: #000000; } `} diff --git a/immuscreen/src/app/icres/atacumap.tsx b/immuscreen/src/app/icres/atacumap.tsx deleted file mode 100644 index b3aca32..0000000 --- a/immuscreen/src/app/icres/atacumap.tsx +++ /dev/null @@ -1,209 +0,0 @@ -import { client } from "../../common/utils" -import React, {useMemo, useState} from "react" -import { useQuery } from "@apollo/client" -import { gql } from "@apollo/client" -import { Chart, linearTransform, Scatter } from "jubilant-carnival"; - -export function lower5(x: number): number { - return Math.floor(x / 5) * 5; - } - - export function upper5(x: number): number { - return Math.ceil(x / 5) * 5; - } - export const range = (min: number, max: number, by: number = 1) => { - let newVals: number[] = []; - for (let i = min; i < max; i = i + by) { - newVals.push(i); - } - return newVals; - }; - -const ATAC_UMAP_QUERY = gql` -query atacUmapQuery($accession: String!) -{ - calderonAtacUmapQuery(accession: $accession){ - name - donor - stimulation - end - celltype - class - umap_1 - umap_2 - value - - } - } - -` - -export const ATACUMAP = (accession) => { - const [tooltip, setTooltip] = useState(-1); - const chartRef = React.useRef(null); - const { loading: loading, data: data } = useQuery(ATAC_UMAP_QUERY, { - variables: { - accession: accession.accession - }, - skip: !accession, - fetchPolicy: "cache-and-network", - nextFetchPolicy: "cache-first", - client, - }) - const maxValue = data && Math.max(...data.calderonAtacUmapQuery.map(a=>a.value)) - - - - const gradient = data && linearTransform( - { start: 0, end: maxValue }, - { start: 215, end: 0 } - ); - const points = useMemo( - () => - data && data.calderonAtacUmapQuery.map((x) => ({ - x: x.umap_1, - y: x.umap_2, - data: x.celltype, - stimulation: x.stimulation, - class: x.class, - val: x.value, - svgProps: { - fill: `rgb(255,${gradient( - x.value, - ).toFixed(0)},0)`, - fillOpacity: 0.6, - r: 8, - strokeWidth: x.stimulation==="S" ? 4:0, - stroke: "#000000", - strokeOpacity: 0.4, - }, - })), - [data,loading] - ); - //console.log(data, points) - const domain = useMemo( - () => - points && points.length > 0 - ? { - x: { - start: lower5(Math.min(...points.map((x) => x.x)) * 1.1), - end: upper5(Math.max(...points.map((x) => x.x))), - }, - y: { - start: lower5(Math.min(...points.map((x) => x.y)) * 1.1), - end: upper5(Math.max(...points.map((x) => x.y))), - }, - } - : { x: { start: 0, end: 1 }, y: { start: 0, end: 1 } }, - [points] - ); - - let tooltipTimeout - return ( - <> - {points && maxValue && - { - if (tooltipTimeout) clearTimeout(tooltipTimeout); - setTooltip(i); - }} - onPointMouseOut={() => { - (tooltipTimeout = setTimeout(() => { - setTooltip(-1); - }, 300)) - - }} - /> - - - - - - - {tooltip > -1 && ( - - )} - {tooltip > -1 && ( - - {points[tooltip].class.replace(/_/g, " ")} - - )} - x.x))) + 2} - y={upper5(Math.max(...points.map((x) => x.y))) - 2} - width={0.5} - height={ - upper5(Math.max(...points.map((x) => x.y))) - - lower5(Math.min(...points.map((x) => x.y))) - - 5 - } - fill="url(#scale)" - /> - x.x))) + 1} - y={ - (lower5(Math.min(...points.map((x) => x.y))) + - upper5(Math.max(...points.map((x) => x.y)))) / - 2 + - 0.5 - } - transform="rotate(-90)" - fontSize={0.5} - textAnchor="middle" - > - Expression - - x.x))) + 2} - y={lower5(Math.min(...points.map((x) => x.y)))+2.5} - fontSize={0.5} - > - 0.0 - - x.x))) + 2} - y={upper5(Math.max(...points.map((x) => x.y)))-1.5} - fontSize={0.5} - > - {maxValue.toFixed(1)} - - - } - - ) -} \ No newline at end of file diff --git a/immuscreen/src/app/icres/page.tsx b/immuscreen/src/app/icres/page.tsx index 337c4af..bce22b5 100644 --- a/immuscreen/src/app/icres/page.tsx +++ b/immuscreen/src/app/icres/page.tsx @@ -1,37 +1,36 @@ -"use client" + "use client" import React, { useState } from "react" import { useRouter } from "next/navigation" import { StyledTab } from "../../common/utils" import { client } from "../../common/utils" import SearchIcon from "@mui/icons-material/Search" -import { CircularProgress, Stack, Typography } from "@mui/material" +import { CircularProgress, Stack, ToggleButtonGroup, Typography } from "@mui/material" import { Tabs } from "@mui/material" import Grid2 from "@mui/material/Unstable_Grid2/Grid2" import { TextField, IconButton, InputAdornment } from "@mui/material" import { FormControl, MenuItem } from "@mui/material" import { useQuery } from "@apollo/client" -import { ReadonlyURLSearchParams, useSearchParams } from "next/navigation" + +import Select, { SelectChangeEvent } from "@mui/material/Select"; +import { ReadonlyURLSearchParams, useSearchParams} from "next/navigation" import { GenomeBrowserView } from "../../common/gbview/genomebrowserview" import { CcreAutoComplete } from "../../common/components/mainsearch/CcreAutocomplete" import { DataTable } from "@weng-lab/psychscreen-ui-components" -import { ATACUMAP } from "./atacumap" -import { AtacBarPlot } from "./atacbarplot" -import InputLabel from "@mui/material/InputLabel"; -import Select, { SelectChangeEvent } from "@mui/material/Select"; -import { stringToColour } from "./utils"; -import { ICRES_CT_ZSCORES_QUERY, ICRES_BYCT_ZSCORES_QUERY, ICRES_QUERY, EBI_ASSO_QUERY } from "./queries"; -import { cellColors } from "./consts"; - -import { IcresByRegion } from "./icresbyregion" +import {IcresByRegion} from "./icresbyregion" +import { ATAC_UMAP_QUERY, EBI_ASSO_QUERY, ICRES_BYCT_ZSCORES_QUERY, ICRES_CT_ZSCORES_QUERY, ICRES_QUERY } from "./queries" +import InputLabel from "@mui/material/InputLabel"; +import { stringToColour } from "../../common/utils"; +import { AtacBarPlot } from "./atacbarplot" +import { cellColors } from "../../common/consts"; +import { UmapPlot } from "../../common/components/umapplot"; import CellTypeTree from "../../common/components/cellTypeTree" import { generateCellLineageTreeState } from "../celllineage/utils" - - //Need better text styling +import ToggleButton from '@mui/material/ToggleButton'; -export default function Icres() { +export default function Icres() { const searchParams: ReadonlyURLSearchParams = useSearchParams()! const [value, setValue] = useState(0) const router = useRouter() @@ -42,8 +41,16 @@ export default function Icres() { const handleSelectedPortal = (event: SelectChangeEvent) => { setSelectedPortal(event.target.value); }; - - const { loading: icrezscoreloading, data: icrezscoredata } = useQuery(ICRES_CT_ZSCORES_QUERY, { + const { loading: atacumaploading, data: atacumapdata } = useQuery(ATAC_UMAP_QUERY, { + variables: { + accession: searchParams.get("accession") + }, + skip: !searchParams.get("accession"), + fetchPolicy: "cache-and-network", + nextFetchPolicy: "cache-first", + client, + }) + const {loading: icrezscoreloading, data: icrezscoredata} = useQuery(ICRES_CT_ZSCORES_QUERY,{ variables: { accession: searchParams.get('accession'), study: [study] @@ -85,6 +92,14 @@ export default function Icres() { } }) + + const [colorScheme, setcolorScheme] = useState('Zscore'); + const handleColorSchemeChange = ( + event: React.MouseEvent, + newScheme: string, + ) => { + setcolorScheme(newScheme); + }; let barplotbyctdata = icrebyctzscoredata && icrebyctzscoredata.calderoncorcesByCtAtacQuery.map(ic => { return { ...ic, @@ -128,243 +143,255 @@ export default function Icres() { const start = coordinates[0] const end = coordinates[1] router.push(`/icres?chromosome=${chromosome}&start=${start}&end=${end}`) - } - - // console.log("coordinates", adata && adata.iCREQuery[0].coordinates) - console.log("active cells: ", adata && adata.iCREQuery[0].celltypes) - return !searchParams.get('accession') && !searchParams.get('chromosome') ? ( -
- - - iCRE Portal -
- - - -
-
-
- {selectedPortal === "Genomic Region" ? - { - if (event.code === "Enter") { - handleSubmit() - } - }} - InputProps={{ - endAdornment: ( - - handleSubmit()} sx={{ color: "black" }}> - - - - ), - style: { color: "black" }, - }} - sx={{ mr: "1em", ml: "1em", fieldset: { borderColor: "black" } }} - /> - : - } - +} +return !searchParams.get('accession') && !searchParams.get('chromosome') ? ( +
+ + + iCRE Portal +
+ + + +
+
+
+ {selectedPortal === "Genomic Region" ? + { + if (event.code === "Enter") { + handleSubmit() + } + }} + InputProps={{ + endAdornment: ( + + handleSubmit()} sx={{ color: "black" }}> + + + + ), + style: { color: "black" }, + }} + sx={{ mr: "1em", ml: "1em", fieldset: { borderColor: "black" } }} + /> + : + } -
) : searchParams.get('chromosome') ? ( - - ) : ( -
- - - - {searchParams.get("accession") && Accession Details: {searchParams.get("accession")}} - - - - - - - - - - + +
) : searchParams.get('chromosome') ? ( + + ) : ( +
+ + + + {searchParams.get("accession") && Accession Details: {searchParams.get("accession")}} + + + + + + + + + + - {value === 0 && adata && - - + - - } - {value === 1 && searchParams.get("accession") && - <> - - + } + assembly={"GRCh38"} + coordinates={{ start: adata.iCREQuery[0].coordinates.start, end: adata.iCREQuery[0].coordinates.end, chromosome: adata.iCREQuery[0].coordinates.chromosome }} + defaultcelltypes={adata.iCREQuery[0].celltypes} + /> + + } + {value === 1 && searchParams.get("accession") && !atacumaploading && atacumapdata && atacumapdata.calderonAtacUmapQuery.length>0 && + + + Color Scheme: +

+ + Zscore + CellType Cluster + +
+
+ - + - } - {value === 2 && ebidata && - - - row.chromosome, - }, - { - header: "Position", - value: (row) => row.position, - }, - { - header: "Strongest snp risk allele", - value: (row) => row.strongest_snp_risk_allele, - }, - { - header: "Risk Allele Frequency", - value: (row) => row.risk_allele_frequency, + } + {value === 2 && ebidata && + + + row.chromosome, + }, + { + header: "Position", + value: (row) => row.position, + }, + { + header: "Strongest snp risk allele", + value: (row) => row.strongest_snp_risk_allele, + }, + { + header: "Risk Allele Frequency", + value: (row) => row.risk_allele_frequency, - }, - { - header: "P-Value", - value: (row) => row.p_value && row.p_value || 0, - }, - { - header: "Study", - value: (row) => row.study, - }, - { - header: "Region", - value: (row) => row.region, - }, - { - header: "Immu screen trait", - value: (row) => row.immu_screen_trait - }, - { - header: "mapped_trait", - value: (row) => row.mapped_trait - }, - { - header: "Pubmed Id", - value: (row) => row.pubmedid + }, + { + header: "P-Value", + value: (row) => row.p_value && row.p_value || 0, + }, + { + header: "Study", + value: (row) => row.study, + }, + { + header: "Region", + value: (row) => row.region, + }, + { + header: "Immu screen trait", + value: (row) => row.immu_screen_trait + }, + { + header: "mapped_trait", + value: (row) => row.mapped_trait + }, + { + header: "Pubmed Id", + value: (row) => row.pubmedid - } + } - ]} - tableTitle={`EBI Associations for ${searchParams.get('accession')}:`} - rows={ebidata.ebiAssociationsQuery || []} + ]} + tableTitle={`EBI Associations for ${searchParams.get('accession')}:`} + rows={ebidata.ebiAssociationsQuery || []} - itemsPerPage={10} - /> - + itemsPerPage={10} + /> - } - {value === 3 && - - - Study - - -
-
- } - {value === 3 && - - - - {study === 'Calderon' && } - + + } + {value === 3 && + + + Study + + +
+
+ } + {value === 3 && + + + + {study === 'Calderon' && } + + + } + {value === 3 && zscoreValue === 0 && icrezscoredata && icrezscoredata.calderoncorcesAtacQuery.length > 0 && barplotdata && + <> + + {barplotdata.filter(b => b.grouping === 'Lymphoid') && + b.grouping === 'Lymphoid')} /> + } + + {barplotdata.filter(b => b.grouping === 'Myeloid') && + b.grouping === 'Myeloid')} /> + } - } - {value === 3 && zscoreValue === 0 && icrezscoredata && icrezscoredata.calderoncorcesAtacQuery.length > 0 && barplotdata && - <> + {study === 'Corces' && - {barplotdata.filter(b => b.grouping === 'Lymphoid') && - b.grouping === 'Lymphoid')} /> + {barplotdata.filter(b => b.grouping === 'Leukemic') && + b.grouping === 'Leukemic')} /> } - {barplotdata.filter(b => b.grouping === 'Myeloid') && - b.grouping === 'Myeloid')} /> + {barplotdata.filter(b => b.grouping === 'Progenitors') && + b.grouping === 'Progenitors')} /> } - {study === 'Corces' && - - {barplotdata.filter(b => b.grouping === 'Leukemic') && - b.grouping === 'Leukemic')} /> - } - - {barplotdata.filter(b => b.grouping === 'Progenitors') && - b.grouping === 'Progenitors')} /> - } - - } - - } - { - value === 3 && zscoreValue === 1 && icrebyctzscoredata && icrebyctzscoredata.calderoncorcesByCtAtacQuery.length > 0 && barplotbyctdata && - - - - + } + + } + { + value === 3 && zscoreValue === 1 && icrebyctzscoredata && icrebyctzscoredata.calderoncorcesByCtAtacQuery.length > 0 && barplotbyctdata && + + + - } - {value === 4 && - (aloading ? - + + } + {value === 4 && + (aloading ? + + : + (adata?.iCREQuery[0].celltypes.length === 0) ? + Not identified as active in immune cells : - (adata?.iCREQuery[0].celltypes.length === 0) ? - Not identified as active in immune cells - : - - {searchParams.get('accession')} is determined to be active in the following cells: - - - ) - } - -
- ) + + {searchParams.get('accession')} is determined to be active in the following cells: + + + ) + } + +
+) } diff --git a/immuscreen/src/app/icres/queries.ts b/immuscreen/src/app/icres/queries.ts index 6a24574..aefb871 100644 --- a/immuscreen/src/app/icres/queries.ts +++ b/immuscreen/src/app/icres/queries.ts @@ -1,5 +1,24 @@ import { gql } from "@apollo/client" + +export const ATAC_UMAP_QUERY = gql` +query atacUmapQuery($accession: String!) +{ + calderonAtacUmapQuery(accession: $accession){ + name + donor + stimulation + end + celltype + class + umap_1 + umap_2 + value + + } + } + +` export const ICRES_CT_ZSCORES_QUERY= gql` query calderoncorceszscoreAtacQuery($accession: [String], $study: [String]) { calderoncorcesAtacQuery(accession: $accession,study: $study) { diff --git a/immuscreen/src/app/icres/utils.ts b/immuscreen/src/app/icres/utils.ts deleted file mode 100644 index bd46cfd..0000000 --- a/immuscreen/src/app/icres/utils.ts +++ /dev/null @@ -1,16 +0,0 @@ - - -//https://stackoverflow.com/questions/3426404/create-a-hexadecimal-colour-based-on-a-string-with-javascript -//generate uniq color based on given string -export const stringToColour = (str: string) => { - let hash = 0; - str.split('').forEach(char => { - hash = char.charCodeAt(0) + ((hash << 5) - hash) - }) - let colour = '#' - for (let i = 0; i < 3; i++) { - const value = (hash >> (i * 8)) & 0xff - colour += value.toString(16).padStart(2, '0') - } - return colour -} \ No newline at end of file diff --git a/immuscreen/src/app/phenotype/ldsc.tsx b/immuscreen/src/app/phenotype/ldsc.tsx index 6abfdad..2a8aa81 100644 --- a/immuscreen/src/app/phenotype/ldsc.tsx +++ b/immuscreen/src/app/phenotype/ldsc.tsx @@ -4,7 +4,7 @@ import { AxisLeft } from "@visx/axis"; import { useMemo } from "react"; import { scaleLinear } from "@visx/scale"; import { Group } from "@visx/group"; -import { experimentInfo, cellColors } from "../icres/consts" +import { experimentInfo, cellColors } from "../../common/consts" import { defaultStyles as defaultTooltipStyles, useTooltip, TooltipWithBounds } from '@visx/tooltip'; import { Text } from '@visx/text'; import { MouseEvent } from "react"; diff --git a/immuscreen/src/common/components/mainsearch/GeneAutocomplete.tsx b/immuscreen/src/common/components/mainsearch/GeneAutocomplete.tsx index f3d03aa..684dca7 100644 --- a/immuscreen/src/common/components/mainsearch/GeneAutocomplete.tsx +++ b/immuscreen/src/common/components/mainsearch/GeneAutocomplete.tsx @@ -7,12 +7,11 @@ import Typography from "@mui/material/Typography" import { debounce } from "@mui/material/utils" import { useRouter } from "next/navigation" import SearchIcon from "@mui/icons-material/Search" -import { IconButton, InputAdornment, InputBaseProps, createTheme } from "@mui/material" export type QueryResponse = [number, string[], any, [string, string, string, string, string, string][], string[]] const GENE_AUTOCOMPLETE_QUERY = ` -query ($assembly: String!, $name_prefix: [String!], $limit: Int) { - gene(assembly: $assembly, name_prefix: $name_prefix, limit: $limit) { +query ($assembly: String!, $name_prefix: [String!], $limit: Int, $version: Int) { + gene(assembly: $assembly, name_prefix: $name_prefix, limit: $limit, version: $version) { name id coordinates { @@ -66,7 +65,8 @@ export const GeneAutoComplete = (props) => { variables: { assembly: "GRCh38", name_prefix: value, - limit: 1000, + version: 40, + limit: 1000 }, }), headers: { "Content-Type": "application/json" }, @@ -145,14 +145,14 @@ export const GeneAutoComplete = (props) => { setInputValue(newInputValue) }} - noOptionsText="e.g sox4,gapdh" + noOptionsText="e.g TGFB1,IL2" renderInput={(params) => ( +
{title}
+ {children} + + + ); +} +export const UmapPlot = (props) => { + + const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = useTooltip(); + const handleHover = (event: MouseEvent, point: UmapPoint) => { + showTooltip({ + tooltipTop: event.pageY, + tooltipLeft: event.pageX, + tooltipData: { + name: point.name, + value: point.value, + donor: point.donor, + celltype: point.celltype, + class: point.class + } + }) + } + const handleLeaveHover = (event: MouseEvent, point: UmapPoint) => { + hideTooltip() + } + + const spaceForAxis = 70 + const paddingRight = 20 + const paddingTop = 20 + const paddingBottom = 80 + const width = 800 + const height = 600 + const plotWidth = width - spaceForAxis - paddingRight + const plotHeight = height - paddingTop - paddingBottom + + const xMin: number = Math.min(...props.data.map(x => x.umap_1)) + const xMax: number = Math.max(...props.data.map(x => x.umap_1)) + const xScale = useMemo( + () => + scaleLinear({ + domain: [xMin-0.5, xMax+0.5], + range: [0, plotWidth], //Start at 20 to provide left side padding to data points + }), + [plotWidth, props], + ); + + const yMin: number = Math.min(...props.data.map(x => x.umap_1)) + const yMax: number = Math.max(...props.data.map(x => x.umap_2)) + const yScale = useMemo( + () => + scaleLinear({ + domain: [yMin-0.5, yMax+0.5], + range: [plotHeight, 0] + }), + [yMin, yMax, plotHeight], + ); + + const maxValue =Math.max(...props.data.map(a=>a.value)) + const minValue =Math.min(...props.data.map(a=>a.value)) + + const linearScale = scaleLinear({ + domain: [minValue, maxValue], + range: ["#ffcd00", "#ff0000"], + }); + + const valueLinearScale = scaleLinear({ + domain: [minValue, maxValue], + range: [0.1, 1], + }); + + const shapeScale = scaleOrdinal({ + domain: ["unstimulated", "stimulated"], + range: [ + , + + ], + }); + + const legendGlyphSize = 15; + return ( + + + + + + + + {props.data.map(point=>{ + return( + + { point.stimulation==='S' ? + handleHover(event, point)} + onMouseLeave={(event) => handleLeaveHover(event, point)} + fill= {( props.colorScheme==='geneexp' || props.colorScheme==='ZScore') ? linearScale(point.value) : cellColors[point.celltype]} + + stroke={tooltipData && tooltipData.celltype===point.celltype ? 'black': ''} + /> : + handleHover(event, point)} + onMouseLeave={(event) => handleLeaveHover(event, point)} + //fill= {`${linearScale(point.value)}`} + fill= { (props.colorScheme==='geneexp' || props.colorScheme==='ZScore') ? linearScale(point.value) : cellColors[point.celltype]} + stroke={tooltipData && tooltipData.celltype===point.celltype ? 'black': ''} + + /> + } + ) + })} + + + {tooltipOpen && tooltipData && ( + +
+

Celltype: {cellLineageTreeStaticInfo[tooltipData.celltype] ? cellLineageTreeStaticInfo[tooltipData.celltype].displayName: tooltipData.celltype }

+
+
+

Name: {tooltipData.name}

+
+
+

Class {tooltipData.class}

+
+
+

Value {tooltipData.value.toFixed(2)}

+
+ + )} + + +
+ {(props.colorScheme==='geneexp'|| props.colorScheme==='ZScore' ) && + (+d).toFixed(2)} + > + {(labels) => + labels.sort((a,b)=> b.index - a.index).map((label, i) => ( + { + //if (events) alert(`clicked: ${JSON.stringify(label)}`); + }} + > + + + + + {label.text} + + + )) + } + + } +
+ + + {(labels) => ( + <> + {labels.map((label, i) => { + + const shape = shapeScale(label.datum); + const isValidElement = React.isValidElement(shape); + return ( + + + {isValidElement + ? React.cloneElement(shape as React.ReactElement) + : React.createElement( + shape as React.ComponentType<{ fill: string }>, + { + fill: "black", + } + )} + + + + {label.text} + + + ); + })} + + )} + + +
+ +
+ + + ) +} + + + + diff --git a/immuscreen/src/app/icres/consts.ts b/immuscreen/src/common/consts.ts similarity index 100% rename from immuscreen/src/app/icres/consts.ts rename to immuscreen/src/common/consts.ts diff --git a/immuscreen/src/common/gbview/chrombpnetatactracks.tsx b/immuscreen/src/common/gbview/chrombpnetatactracks.tsx index 7e7f6ad..7c6d418 100644 --- a/immuscreen/src/common/gbview/chrombpnetatactracks.tsx +++ b/immuscreen/src/common/gbview/chrombpnetatactracks.tsx @@ -62,6 +62,7 @@ import { CalderonBigWigTracksMetadata, CalderonCellTypesMetadata } from "./const defaultcelltypes }) => { + console.log("defaultcelltypes",defaultcelltypes) const r = defaultcelltypes && CalderonBigWigTracksMetadata.filter(c=>defaultcelltypes.includes(c.celltype_name)) @@ -106,8 +107,8 @@ import { CalderonBigWigTracksMetadata, CalderonCellTypesMetadata } from "./const title={x[0]} height={130} width={1400} + imputedSignalURL={`${x[1]}`} signalURL={`${x[1].replace('bigWig','profile_scores.bw')}`} - imputedSignalURL={`${x[1].replace('bigWig','profile_scores.bw')}`} domain={domain} neutralRegions={[]} /> diff --git a/immuscreen/src/common/gbview/consts.ts b/immuscreen/src/common/gbview/consts.ts index 78a495e..fb3b0f8 100644 --- a/immuscreen/src/common/gbview/consts.ts +++ b/immuscreen/src/common/gbview/consts.ts @@ -228,7 +228,139 @@ export const CalderonBigWigTracks = [ ["1003-Memory_NK-U","Memory Natural Killer cells","Memory Natural Killer cells in donor 1003","Lymphoid"], ["1004-Memory_NK-U","Memory Natural Killer cells","Memory Natural Killer cells in donor 1004","Lymphoid"], ["1008-Memory_NK-U","Memory Natural Killer cells","Memory Natural Killer cells in donor 1008","Lymphoid"], -["1010-Memory_NK-U","Memory Natural Killer cells","Memory Natural Killer cells in donor 1010","Lymphoid"]] +["1010-Memory_NK-U","Memory Natural Killer cells","Memory Natural Killer cells in donor 1010","Lymphoid"], +["1020-CD34_Cord_Blood-SRX1427814","CD34+ Cord Blood","CD34+ Cord Blood in donor 1020","Progenitors"], +["7291-CD34_Bone_Marrow-SRX1427812","CD34+ Bone Marrow","CD34+ Bone Marrow in donor 7291","Progenitors"], +["7292-CD34_Bone_Marrow-SRX1427813","CD34+ Bone Marrow","CD34+ Bone Marrow in donor 7292","Progenitors"], +["2596-HSC-SRX1427829","Hematopoetic Stem Cells","Hematopoetic Stem Cells in donor 2596","Progenitors"], +["2596-HSC-SRX1427830","Hematopoetic Stem Cells","Hematopoetic Stem Cells in donor 2596","Progenitors"], +["4983-HSC-SRX1427789","Hematopoetic Stem Cells","Hematopoetic Stem Cells in donor 4983","Progenitors"], +["6792-HSC-SRX1427800","Hematopoetic Stem Cells","Hematopoetic Stem Cells in donor 6792","Progenitors"], +["6792-HSC-SRX1427801","Hematopoetic Stem Cells","Hematopoetic Stem Cells in donor 6792","Progenitors"], +["7256-HSC-SRX1427854","Hematopoetic Stem Cells","Hematopoetic Stem Cells in donor 7256","Progenitors"], +["7256-HSC-SRX1427855","Hematopoetic Stem Cells","Hematopoetic Stem Cells in donor 7256","Progenitors"], +["2596-MPP-SRX1427832","Mulipotent Progenitors","Mulipotent Progenitors in donor 2596","Progenitors"], +["2596-MPP-SRX1427833","Mulipotent Progenitors","Mulipotent Progenitors in donor 2596","Progenitors"], +["4983-MPP-SRX1427790","Mulipotent Progenitors","Mulipotent Progenitors in donor 4983","Progenitors"], +["6792-MPP-SRX1427802","Mulipotent Progenitors","Mulipotent Progenitors in donor 6792","Progenitors"], +["7256-MPP-SRX1427856","Mulipotent Progenitors","Mulipotent Progenitors in donor 7256","Progenitors"], +["7256-MPP-SRX1427857","Mulipotent Progenitors","Mulipotent Progenitors in donor 7256","Progenitors"], +["2596-CMP-SRX1427823","Common Myeloid Progenitors","Common Myeloid Progenitors in donor 2596","Progenitors"], +["2596-CMP-SRX1427824","Common Myeloid Progenitors","Common Myeloid Progenitors in donor 2596","Progenitors"], +["4983-CMP-SRX1427792","Common Myeloid Progenitors","Common Myeloid Progenitors in donor 4983","Progenitors"], +["4983-CMP-SRX1427793","Common Myeloid Progenitors","Common Myeloid Progenitors in donor 4983","Progenitors"], +["6792-CMP-SRX1427804","Common Myeloid Progenitors","Common Myeloid Progenitors in donor 6792","Progenitors"], +["6792-CMP-SRX1427805","Common Myeloid Progenitors","Common Myeloid Progenitors in donor 6792","Progenitors"], +["7256-CMP-SRX1427859","Common Myeloid Progenitors","Common Myeloid Progenitors in donor 7256","Progenitors"], +["7256-CMP-SRX1427860","Common Myeloid Progenitors","Common Myeloid Progenitors in donor 7256","Progenitors"], +["2596-GMP-SRX1427828","Granulocyte-Monocyte Progenitors","Granulocyte-Monocyte Progenitors in donor 2596","Progenitors"], +["4983-GMP-SRX1427794","Granulocyte-Monocyte Progenitors","Granulocyte-Monocyte Progenitors in donor 4983","Progenitors"], +["4983-GMP-SRX1427795","Granulocyte-Monocyte Progenitors","Granulocyte-Monocyte Progenitors in donor 4983","Progenitors"], +["6792-GMP-SRX1427806","Granulocyte-Monocyte Progenitors","Granulocyte-Monocyte Progenitors in donor 6792","Progenitors"], +["6792-GMP-SRX1427807","Granulocyte-Monocyte Progenitors","Granulocyte-Monocyte Progenitors in donor 6792","Progenitors"], +["7256-GMP-SRX1427861","Granulocyte-Monocyte Progenitors","Granulocyte-Monocyte Progenitors in donor 7256","Progenitors"], +["7256-GMP-SRX1427862","Granulocyte-Monocyte Progenitors","Granulocyte-Monocyte Progenitors in donor 7256","Progenitors"], +["4983-Mono-SRX1427798","Monocytes","Monocytes in donor 4983","Myeloid"], +["4983-Mono-SRX1427799","Monocytes","Monocytes in donor 4983","Myeloid"], +["6792-Mono-SRX1427810","Monocytes","Monocytes in donor 6792","Myeloid"], +["6792-Mono-SRX1427811","Monocytes","Monocytes in donor 6792","Myeloid"], +["7256-Mono-SRX1427865","Monocytes","Monocytes in donor 7256","Myeloid"], +["7256-Mono-SRX1427866","Monocytes","Monocytes in donor 7256","Myeloid"], +["2596-MEP-SRX1427831","Megakaryocyte Erythroid Progenitor","Megakaryocyte Erythroid Progenitor in donor 2596","Progenitors"], +["4983-MEP-SRX1427796","Megakaryocyte Erythroid Progenitor","Megakaryocyte Erythroid Progenitor in donor 4983","Progenitors"], +["4983-MEP-SRX1427797","Megakaryocyte Erythroid Progenitor","Megakaryocyte Erythroid Progenitor in donor 4983","Progenitors"], +["6792-MEP-SRX1427808","Megakaryocyte Erythroid Progenitor","Megakaryocyte Erythroid Progenitor in donor 6792","Progenitors"], +["6792-MEP-SRX1427809","Megakaryocyte Erythroid Progenitor","Megakaryocyte Erythroid Progenitor in donor 6792","Progenitors"], +["7256-MEP-SRX1427863","Megakaryocyte Erythroid Progenitor","Megakaryocyte Erythroid Progenitor in donor 7256","Progenitors"], +["7256-MEP-SRX1427864","Megakaryocyte Erythroid Progenitor","Megakaryocyte Erythroid Progenitor in donor 7256","Progenitors"], +["2596-Ery-SRX1427825","Erythrocyte","Erythrocyte in donor 2596","Myeloid"], +["2596-Ery-SRX1427826","Erythrocyte","Erythrocyte in donor 2596","Myeloid"], +["2596-Ery-SRX1427827","Erythrocyte","Erythrocyte in donor 2596","Myeloid"], +["5483-Ery-SRX1427846","Erythrocyte","Erythrocyte in donor 5483","Myeloid"], +["5483-Ery-SRX1427847","Erythrocyte","Erythrocyte in donor 5483","Myeloid"], +["5483-Ery-SRX1427848","Erythrocyte","Erythrocyte in donor 5483","Myeloid"], +["6926-Ery-SRX1427852","Erythrocyte","Erythrocyte in donor 6926","Myeloid"], +["6926-Ery-SRX1427853","Erythrocyte","Erythrocyte in donor 6926","Myeloid"], +["4983-LMPP-SRX1427791","Lymphocyte-Primed Multipotent Progenitor","Lymphocyte-Primed Multipotent Progenitor in donor 4983","Progenitors"], +["6792-LMPP-SRX1427803","Lymphocyte-Primed Multipotent Progenitor","Lymphocyte-Primed Multipotent Progenitor in donor 6792","Progenitors"], +["7256-LMPP-SRX1427858","Lymphocyte-Primed Multipotent Progenitor","Lymphocyte-Primed Multipotent Progenitor in donor 7256","Progenitors"], +["2596-CLP-SRX1427821","Common Lymphoid Progenitor","Common Lymphoid Progenitor in donor 2596","Progenitors"], +["2596-CLP-SRX1427822","Common Lymphoid Progenitor","Common Lymphoid Progenitor in donor 2596","Progenitors"], +["5483-CLP-SRX1427845","Common Lymphoid Progenitor","Common Lymphoid Progenitor in donor 5483","Progenitors"], +["6926-CLP-SRX1427851","Common Lymphoid Progenitor","Common Lymphoid Progenitor in donor 6926","Progenitors"], +["6926-CLP-SRX1427868","Common Lymphoid Progenitor","Common Lymphoid Progenitor in donor 6926","Progenitors"], +["1022-Bcell-SRX1427815","B cell","B cell in donor 1022","Lymphoid"], +["4983-Bcell-SRX1427836","B cell","B cell in donor 4983","Lymphoid"], +["5483-Bcell-SRX1427840","B cell","B cell in donor 5483","Lymphoid"], +["5483-Bcell-SRX1427867","B cell","B cell in donor 5483","Lymphoid"], +["1022-CD4Tcell-SRX1427816","CD4+ T cells","CD4+ T cells in donor 1022","Lymphoid"], +["2596-CD4Tcell-SRX1427819","CD4+ T cells","CD4+ T cells in donor 2596","Lymphoid"], +["4983-CD4Tcell-SRX1427837","CD4+ T cells","CD4+ T cells in donor 4983","Lymphoid"], +["5483-CD4Tcell-SRX1427841","CD4+ T cells","CD4+ T cells in donor 5483","Lymphoid"], +["5483-CD4Tcell-SRX1427842","CD4+ T cells","CD4+ T cells in donor 5483","Lymphoid"], +["1022-CD8Tcell-SRX1427817","CD8+ T cells","CD8+ T cells in donor 1022","Lymphoid"], +["2596-CD8Tcell-SRX1427820","CD8+ T cells","CD8+ T cells in donor 2596","Lymphoid"], +["4983-CD8Tcell-SRX1427838","CD8+ T cells","CD8+ T cells in donor 4983","Lymphoid"], +["5483-CD8Tcell-SRX1427843","CD8+ T cells","CD8+ T cells in donor 5483","Lymphoid"], +["5483-CD8Tcell-SRX1427844","CD8+ T cells","CD8+ T cells in donor 5483","Lymphoid"], +["1022-NKcell-SRX1427818","Natural Killer cells","Natural Killer cells in donor 1022","Lymphoid"], +["2596-NKcell-SRX1427834","Natural Killer cells","Natural Killer cells in donor 2596","Lymphoid"], +["2596-NKcell-SRX1427835","Natural Killer cells","Natural Killer cells in donor 2596","Lymphoid"], +["4983-NKcell-SRX1427839","Natural Killer cells","Natural Killer cells in donor 4983","Lymphoid"], +["5483-NKcell-SRX1427849","Natural Killer cells","Natural Killer cells in donor 5483","Lymphoid"], +["5483-NKcell-SRX1427850","Natural Killer cells","Natural Killer cells in donor 5483","Lymphoid"], +["SU048-pHSC-SRX1427875","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU04","Leukemic"], +["SU070-pHSC-SRX1427879","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU07","Leukemic"], +["SU070-pHSC-SRX1427880","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU07","Leukemic"], +["SU209-pHSC-SRX1427883","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU20","Leukemic"], +["SU209-pHSC-SRX1427884","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU20","Leukemic"], +["SU209-pHSC-SRX1427885","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU20","Leukemic"], +["SU306-pHSC-SRX1427887","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU30","Leukemic"], +["SU336-pHSC-SRX1427889","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU33","Leukemic"], +["SU351-pHSC-SRX1427891","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU35","Leukemic"], +["SU353-pHSC-SRX1427894","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU35","Leukemic"], +["SU444-pHSC-SRX1427897","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU44","Leukemic"], +["SU484-pHSC-SRX1427899","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU48","Leukemic"], +["SU496-pHSC-SRX1427902","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU49","Leukemic"], +["SU501-pHSC-SRX1427904","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU50","Leukemic"], +["SU575-pHSC-SRX1427907","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU57","Leukemic"], +["SU583-pHSC-SRX1427910","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU58","Leukemic"], +["SU583-pHSC-SRX1427911","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU58","Leukemic"], +["SU623-pHSC-SRX1427915","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU62","Leukemic"], +["SU654-pHSC-SRX1427918","Preleukemic Hematopoetic Stem Cells","Preleukemic Hematopoetic Stem Cells in donor SU65","Leukemic"], +["SU070-LSC-SRX1427878","Leukemia Stem Cells","Leukemia Stem Cells in donor SU07","Leukemic"], +["SU209-LSC-SRX1427882","Leukemia Stem Cells","Leukemia Stem Cells in donor SU20","Leukemic"], +["SU353-LSC-SRX1427893","Leukemia Stem Cells","Leukemia Stem Cells in donor SU35","Leukemic"], +["SU444-LSC-SRX1427896","Leukemia Stem Cells","Leukemia Stem Cells in donor SU44","Leukemic"], +["SU496-LSC-SRX1427901","Leukemia Stem Cells","Leukemia Stem Cells in donor SU49","Leukemic"], +["SU575-LSC-SRX1427906","Leukemia Stem Cells","Leukemia Stem Cells in donor SU57","Leukemic"], +["SU583-LSC-SRX1427909","Leukemia Stem Cells","Leukemia Stem Cells in donor SU58","Leukemic"], +["SU654-LSC-SRX1427917","Leukemia Stem Cells","Leukemia Stem Cells in donor SU65","Leukemic"], +["SU048-Blast-SRX1427869","Leukemic Blast Cells","Leukemic Blast Cells in donor SU04","Leukemic"], +["SU048-Blast-SRX1427870","Leukemic Blast Cells","Leukemic Blast Cells in donor SU04","Leukemic"], +["SU048-Blast-SRX1427871","Leukemic Blast Cells","Leukemic Blast Cells in donor SU04","Leukemic"], +["SU048-Blast-SRX1427872","Leukemic Blast Cells","Leukemic Blast Cells in donor SU04","Leukemic"], +["SU048-Blast-SRX1427873","Leukemic Blast Cells","Leukemic Blast Cells in donor SU04","Leukemic"], +["SU048-Blast-SRX1427874","Leukemic Blast Cells","Leukemic Blast Cells in donor SU04","Leukemic"], +["SU070-Blast-SRX1427876","Leukemic Blast Cells","Leukemic Blast Cells in donor SU07","Leukemic"], +["SU070-Blast-SRX1427877","Leukemic Blast Cells","Leukemic Blast Cells in donor SU07","Leukemic"], +["SU209-Blast-SRX1427881","Leukemic Blast Cells","Leukemic Blast Cells in donor SU20","Leukemic"], +["SU306-Blast-SRX1427886","Leukemic Blast Cells","Leukemic Blast Cells in donor SU30","Leukemic"], +["SU336-Blast-SRX1427888","Leukemic Blast Cells","Leukemic Blast Cells in donor SU33","Leukemic"], +["SU351-Blast-SRX1427890","Leukemic Blast Cells","Leukemic Blast Cells in donor SU35","Leukemic"], +["SU353-Blast-SRX1427892","Leukemic Blast Cells","Leukemic Blast Cells in donor SU35","Leukemic"], +["SU444-Blast-SRX1427895","Leukemic Blast Cells","Leukemic Blast Cells in donor SU44","Leukemic"], +["SU484-Blast-SRX1427898","Leukemic Blast Cells","Leukemic Blast Cells in donor SU48","Leukemic"], +["SU496-Blast-SRX1427900","Leukemic Blast Cells","Leukemic Blast Cells in donor SU49","Leukemic"], +["SU501-Blast-SRX1427903","Leukemic Blast Cells","Leukemic Blast Cells in donor SU50","Leukemic"], +["SU575-Blast-SRX1427905","Leukemic Blast Cells","Leukemic Blast Cells in donor SU57","Leukemic"], +["SU583-Blast-SRX1427908","Leukemic Blast Cells","Leukemic Blast Cells in donor SU58","Leukemic"], +["SU623-Blast-SRX1427912","Leukemic Blast Cells","Leukemic Blast Cells in donor SU62","Leukemic"], +["SU623-Blast-SRX1427913","Leukemic Blast Cells","Leukemic Blast Cells in donor SU62","Leukemic"], +["SU623-Blast-SRX1427914","Leukemic Blast Cells","Leukemic Blast Cells in donor SU62","Leukemic"], +["SU654-Blast-SRX1427916","Leukemic Blast Cells","Leukemic Blast Cells in donor SU65","Leukemic"], + +] export const CalderonCellTypesMetadata = CalderonCellTypes.map(c=>{ return { diff --git a/immuscreen/src/common/gbview/genomebrowserview.tsx b/immuscreen/src/common/gbview/genomebrowserview.tsx index 0d6c378..1a326ae 100644 --- a/immuscreen/src/common/gbview/genomebrowserview.tsx +++ b/immuscreen/src/common/gbview/genomebrowserview.tsx @@ -28,8 +28,8 @@ type GenomeBrowserViewProps = { assembly: string } const GENE_QUERY = gql` - query s($chromosome: String, $start: Int, $end: Int, $assembly: String!) { - gene(chromosome: $chromosome, start: $start, end: $end, assembly: $assembly) { + query s($chromosome: String, $start: Int, $end: Int, $assembly: String!, $version: Int) { + gene(chromosome: $chromosome, start: $start, end: $end, assembly: $assembly, version :$version) { name strand transcripts { @@ -80,7 +80,7 @@ export const GenomeBrowserView: React.FC = (props) => { const [highlight, setHighlight] = useState(null) const snpResponse = useQuery(GENE_QUERY, { - variables: { ...coordinates, assembly: props.assembly }, + variables: { ...coordinates, assembly: props.assembly, version: 40 }, fetchPolicy: "cache-and-network", nextFetchPolicy: "cache-first", client, diff --git a/immuscreen/src/common/lib/queries.ts b/immuscreen/src/common/lib/queries.ts index c8741ff..b6f250f 100644 --- a/immuscreen/src/common/lib/queries.ts +++ b/immuscreen/src/common/lib/queries.ts @@ -311,8 +311,8 @@ const LINKED_GENES_QUERY = gql` ` const GENE_QUERY = gql` - query($assembly: String!, $name_prefix: [String!]) { - gene(assembly: $assembly, name_prefix: $name_prefix) { + query($assembly: String!, $name_prefix: [String!], $version: Int) { + gene(assembly: $assembly, name_prefix: $name_prefix, version: $version) { name id } @@ -337,7 +337,7 @@ export async function linkedGenesQuery(assembly: "GRCh38" | "mm10", accession: s try { geneNames = await getClient().query({ query: GENE_QUERY, - variables: { assembly: assembly, name_prefix: geneIDs }, + variables: { assembly: assembly, name_prefix: geneIDs, version: 40 }, }) //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) => { diff --git a/immuscreen/src/common/utils.ts b/immuscreen/src/common/utils.ts index 546c70e..e3660d2 100644 --- a/immuscreen/src/common/utils.ts +++ b/immuscreen/src/common/utils.ts @@ -8,4 +8,50 @@ export const client = new ApolloClient({ export const StyledTab = styled(Tab)({ textTransform: "none", -}) \ No newline at end of file +}) + + + +//https://stackoverflow.com/questions/3426404/create-a-hexadecimal-colour-based-on-a-string-with-javascript +//generate uniq color based on given string +export const stringToColour = (str: string) => { + let hash = 0; + str.split('').forEach(char => { + hash = char.charCodeAt(0) + ((hash << 5) - hash) + }) + let colour = '#' + for (let i = 0; i < 3; i++) { + const value = (hash >> (i * 8)) & 0xff + colour += value.toString(16).padStart(2, '0') + } + return colour +} + +//https://learnersbucket.com/examples/interview/convert-hex-color-to-rgb-in-javascript/ +//convert hex to rgb + +//create full hex +const fullHex = (hex) => { + let r = hex.slice(1,2); + let g = hex.slice(2,3); + let b = hex.slice(3,4); + + r = parseInt(r+r, 16); + g = parseInt(g+g, 16); + b = parseInt(b+b, 16); + + + return { r, g, b }; +} +export const hex2rgb = (hex) => { + if(hex.length === 4){ + return fullHex(hex); + } + + const r = parseInt(hex.slice(1, 3), 16); + const g = parseInt(hex.slice(3, 5), 16); + const b = parseInt(hex.slice(5, 7), 16); + + + return `${r},${g},${b}`; +} \ No newline at end of file