From 96ee37606fadc4c06bb22cc4cab19bff5dfbe2c3 Mon Sep 17 00:00:00 2001 From: prabhat Date: Tue, 14 May 2024 20:49:20 +0100 Subject: [PATCH] std score colors and ref/info changes --- src/styles/search/_ImpactSearchResults.scss | 26 ++++++- src/ui/App.tsx | 14 +++- src/ui/components/common/Common.tsx | 10 +++ .../components/function/FunctionalDataRow.tsx | 2 +- .../function/ResidueRegionTable.tsx | 67 ++++++++----------- .../function/prediction/AlphaMissensePred.tsx | 24 ++++--- .../function/prediction/ConservPred.tsx | 24 ++++--- .../function/prediction/EsmPred.tsx | 53 +++++++++------ .../function/prediction/EvePred.tsx | 27 +++++--- .../function/prediction/FoldxPred.tsx | 28 +++++--- .../function/prediction/PredConstants.ts | 7 ++ .../function/prediction/Prediction.tsx | 24 ++++--- src/ui/components/search/CaddScorePred.ts | 11 +-- src/ui/components/search/PrimaryRow.tsx | 8 +-- src/ui/components/search/ResultTable.tsx | 10 +-- src/ui/layout/DefaultPageLayout.tsx | 2 +- src/ui/modal/LegendModal.tsx | 48 ++++++++----- src/ui/pages/query/QueryPage.tsx | 8 +-- src/ui/pages/search/SearchResultPage.tsx | 3 +- 19 files changed, 244 insertions(+), 152 deletions(-) create mode 100644 src/ui/components/common/Common.tsx create mode 100644 src/ui/components/function/prediction/PredConstants.ts diff --git a/src/styles/search/_ImpactSearchResults.scss b/src/styles/search/_ImpactSearchResults.scss index fe714503..eb99bbf4 100644 --- a/src/styles/search/_ImpactSearchResults.scss +++ b/src/styles/search/_ImpactSearchResults.scss @@ -652,7 +652,13 @@ .esm1b-score-grad { background-color: #460556; - background-image: linear-gradient(to right, #460556 , #218c8f, #f9e725); + background-image: linear-gradient(to right, #460556, #218c8f, #f9e725); + width: 8rem; + height: 1.5rem; + } + .esm1b-score-grad-std { + background-color: red; + background-image: linear-gradient(to right, blue, lightgray, red); width: 8rem; height: 1.5rem; } @@ -754,4 +760,20 @@ .aa-pred{ display: grid; grid-template-columns: 35% 20% auto; -} \ No newline at end of file +} + +.info { + display: inline-block; + padding-left: 4px; + padding-right: 4px; +} +.info::before { + content: 'i'; + font-style: italic; + vertical-align: super; + font-size: smaller; +} +.info:hover { + cursor: help; +} + diff --git a/src/ui/App.tsx b/src/ui/App.tsx index b3fe8fca..69974522 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -1,4 +1,4 @@ -import {useState} from "react"; +import React, {createContext, useState} from "react"; import {useNavigate, Route, Routes} from "react-router-dom"; import HomePage from "./pages/home/HomePage"; import SearchResultsPage from "./pages/search/SearchResultPage"; @@ -18,13 +18,19 @@ import DownloadPage from "./pages/download/DownloadPage"; import HelpPage from "./pages/help/HelpPage"; import {FormData, initialFormData} from "../types/FormData"; +export const StdColorContext = createContext(true); export default function App() { + const [stdColor, setStdColor] = useState(true); const [loading, setLoading] = useState(false); const [formData, setFormData] = useState(initialFormData); const [page, setPage] = useState(firstPage(0)); const [searchResults, setSearchResults] = useState([]); const navigate = useNavigate(); + const toggleStdColor = () => { + setStdColor(stdColor ? false : true); + }; + // MappingRecord 3d array -> [][][] list of mappings/genes/isoforms // mappings : [ // ... @@ -152,7 +158,7 @@ export default function App() { .finally(() => setLoading(false)); } - return ( + return ( } /> - } /> + } /> } /> } /> } /> @@ -181,5 +188,6 @@ export default function App() { } /> } /> + ); } diff --git a/src/ui/components/common/Common.tsx b/src/ui/components/common/Common.tsx new file mode 100644 index 00000000..480f083e --- /dev/null +++ b/src/ui/components/common/Common.tsx @@ -0,0 +1,10 @@ +export function Info(props: {text?: string}) { + if (props.text === null) + return <> + return
+} + +export const pubmedRef = (id: number) => { + return ref +} \ No newline at end of file diff --git a/src/ui/components/function/FunctionalDataRow.tsx b/src/ui/components/function/FunctionalDataRow.tsx index bec548b7..7a015b5c 100644 --- a/src/ui/components/function/FunctionalDataRow.tsx +++ b/src/ui/components/function/FunctionalDataRow.tsx @@ -20,7 +20,7 @@ function FunctionalDataRow(props: FunctionalDataRowProps) {
-
protein icon Reference Function
+
protein icon Functional information
diff --git a/src/ui/components/function/ResidueRegionTable.tsx b/src/ui/components/function/ResidueRegionTable.tsx index 91d1c023..d3b1873e 100644 --- a/src/ui/components/function/ResidueRegionTable.tsx +++ b/src/ui/components/function/ResidueRegionTable.tsx @@ -9,7 +9,8 @@ import {StringVoidFun} from "../../../constants/CommonTypes"; import {aminoAcid3to1Letter, formatRange, getKeyValue} from "../../../utills/Util"; import {FunctionalResponse, Pocket, Foldx, P2PInteraction, ProteinFeature} from "../../../types/FunctionalResponse"; import {MappingRecord} from "../../../utills/Convertor"; -import {Prediction} from "./prediction/Prediction"; +import {Prediction, PUBMED_ID} from "./prediction/Prediction"; +import {pubmedRef} from "../common/Common"; interface ResidueRegionTableProps { functionalData: FunctionalResponse @@ -42,8 +43,8 @@ function ResidueRegionTable(props: ResidueRegionTableProps) { Region Containing Variant Position - {getResidues(residues, props.record, props.functionalData.foldxs, oneLetterVariantAA, expendedRowKey, toggleRow)} - {getRegions(regions, props.functionalData.accession, props.functionalData.pockets, props.functionalData.interactions, expendedRowKey, toggleRow)} + {getResidues(residues, props.record, props.functionalData.foldxs, oneLetterVariantAA, expendedRowKey, toggleRow)} + {getRegions(regions, props.functionalData.accession, props.functionalData.pockets, props.functionalData.interactions, expendedRowKey, toggleRow)} @@ -52,14 +53,16 @@ function ResidueRegionTable(props: ResidueRegionTableProps) { } function getResidues(regions: Array, record: MappingRecord, foldxs: Array, oneLetterVariantAA: string | null, expendedRowKey: string, toggleRow: StringVoidFun) { - let counter = 0; let foldxs_ = oneLetterVariantAA ? foldxs.filter(foldx => foldx.mutatedType.toLowerCase() === oneLetterVariantAA) : foldxs return <> + Annotations from UniProt + {regions.length === 0 &&
+ No functional data for the variant position +
+ } { - regions.forEach((region) => { - counter = counter + 1; - let key = 'residue-' + counter; - return getFeatureList(region, key, expendedRowKey, toggleRow); + regions.map((region, idx) => { + return getFeatureList(region, `residue-${idx}`, expendedRowKey, toggleRow); }) } @@ -68,40 +71,26 @@ function getResidues(regions: Array, record: MappingRecord, fold } function getRegions(regions: Array, accession: string, pockets: Array, interactions: Array, expendedRowKey: string, toggleRow: StringVoidFun) { - let regionsList: Array = []; - let counter = 0; - - if (regions.length === 0) { - return (<> - -

- Predictions -
(Source: PubMed ID 15980494)
- - - ); - } - regions.forEach((region) => { - counter = counter + 1; - let key = 'region-' + counter; - var list = getFeatureList(region, key, expendedRowKey, toggleRow); - regionsList.push(list); - }); - return <> - Curated observations from UniProt - {regionsList} -

- Predictions -
(Source: PubMed ID 15980494)
+ return (<> + Annotations from UniProt + {regions.length === 0 &&
+ No functional data for the region +
+ } + { + regions.map((region, idx) => { + return getFeatureList(region, `region-${idx}`, expendedRowKey, toggleRow); + }) + } + { + (pockets.length > 0 || interactions.length >0) && <> + Structure predictions{pubmedRef(PUBMED_ID.INTERFACES)} + + } - + ); } function getFeatureList(feature: ProteinFeature, key: string, expendedRowKey: string, toggleRow: StringVoidFun) { diff --git a/src/ui/components/function/prediction/AlphaMissensePred.tsx b/src/ui/components/function/prediction/AlphaMissensePred.tsx index 73af66fb..ff91d93f 100644 --- a/src/ui/components/function/prediction/AlphaMissensePred.tsx +++ b/src/ui/components/function/prediction/AlphaMissensePred.tsx @@ -1,29 +1,31 @@ import {AMScore} from "../../../../types/MappingResponse"; -import {getPredRef, PredAttr, PUBMED_ID} from "./Prediction"; +import {PredAttr, PUBMED_ID} from "./Prediction"; import Spaces from "../../../elements/Spaces"; +import {STD_BENIGN_COLOR, STD_PATHOGENIC_COLOR, STD_UNCERTAIN_COLOR} from "./PredConstants"; +import {pubmedRef} from "../../common/Common"; export const AM_SCORE_ATTR: {[key: string]: PredAttr} = { - PATHOGENIC: { color: '#ed1e24', title: 'pathogenic' }, - AMBIGUOUS: { color: '#a8a9ad', title: 'ambiguous' }, - BENIGN: { color: '#3853a4', title: 'benign' } + BENIGN: { color: '#3853a4', stdColor: STD_BENIGN_COLOR, title: 'benign' }, + AMBIGUOUS: { color: '#a8a9ad', stdColor: STD_UNCERTAIN_COLOR, title: 'ambiguous' }, + PATHOGENIC: { color: '#ed1e24', stdColor: STD_PATHOGENIC_COLOR, title: 'pathogenic' } } -export const AlphaMissensePred = (props: { am?: AMScore }) => { +export const AlphaMissensePred = (props: { am?: AMScore, stdColor: boolean }) => { if (props.am === undefined || props.am === null) { return <> } return
-
AlphaMissense {getPredRef(PUBMED_ID.AM)}
+
AlphaMissense {pubmedRef(PUBMED_ID.AM)}
{props.am.amPathogenicity}
-
+
} -function AlphaMissensePredIcon(props: { amScore?: AMScore }) { - if (props.amScore) { - let cls = props.amScore.amClass as keyof PredAttr +function AlphaMissensePredIcon(props: { am?: AMScore, stdColor: boolean }) { + if (props.am) { + let cls = props.am.amClass as keyof PredAttr return <> - + {AM_SCORE_ATTR[cls].title} } diff --git a/src/ui/components/function/prediction/ConservPred.tsx b/src/ui/components/function/prediction/ConservPred.tsx index afa390fd..da5ad241 100644 --- a/src/ui/components/function/prediction/ConservPred.tsx +++ b/src/ui/components/function/prediction/ConservPred.tsx @@ -1,16 +1,17 @@ import tinygradient from "tinygradient"; import {ConservScore} from "../../../../types/MappingResponse"; -import {getPredRef, PredAttr, PUBMED_ID} from "./Prediction"; +import {PredAttr, PUBMED_ID} from "./Prediction"; import Spaces from "../../../elements/Spaces"; +import {Info, pubmedRef} from "../../common/Common"; export const CONSERV_SCORE_ATTR: PredAttr[] = [ - {color: '#732faf', title: 'very low' }, - {color: '#194888', title: 'low' }, - {color: '#277777', title: 'fairly low' }, - {color: '#72cb5d', title: 'moderate' }, - {color: '#bab518', title: 'fairly high' }, - {color: '#c46307', title: 'high' }, - {color: '#9d0101', title: 'very high' } + {color: '#732faf', stdColor: '', title: 'very low' }, + {color: '#194888', stdColor: '', title: 'low' }, + {color: '#277777', stdColor: '', title: 'fairly low' }, + {color: '#72cb5d', stdColor: '', title: 'moderate' }, + {color: '#bab518', stdColor: '', title: 'fairly high' }, + {color: '#c46307', stdColor: '', title: 'high' }, + {color: '#9d0101', stdColor: '', title: 'very high' } ] export const CONSERV_COLOUR_GRADIENT = tinygradient(CONSERV_SCORE_ATTR.map(s => s.color)); @@ -20,8 +21,10 @@ export const ConservPred = (props: { conserv?: ConservScore }) => { return <> } return
-
Conservation {getPredRef(PUBMED_ID.CONSERV)}
-
{props.conserv.score}
+
Conservation {pubmedRef(PUBMED_ID.CONSERV)}
+
{props.conserv.score} + +
} @@ -33,6 +36,7 @@ function ConservPredIcon(props: { conservScore?: ConservScore }) { return <> {scoreAttr.title} + } return <> diff --git a/src/ui/components/function/prediction/EsmPred.tsx b/src/ui/components/function/prediction/EsmPred.tsx index 3fae303c..3209525b 100644 --- a/src/ui/components/function/prediction/EsmPred.tsx +++ b/src/ui/components/function/prediction/EsmPred.tsx @@ -1,43 +1,56 @@ import tinygradient from "tinygradient"; import {ESMScore} from "../../../../types/MappingResponse"; -import {getPredRef, PredAttr, PUBMED_ID} from "./Prediction"; +import { + PredAttr, + PUBMED_ID +} from "./Prediction"; import Spaces from "../../../elements/Spaces"; +import {STD_BENIGN_COLOR, STD_PATHOGENIC_COLOR, STD_UNCERTAIN_COLOR} from "./PredConstants"; +import {Info, pubmedRef} from "../../common/Common"; -// James: A score of -7.5 appears to be used for pathogenicity in ESM1b. I am not sure we can say that 0--7.5 is benign though. -// Perhaps just leave those blank for now and just label the ones -7.5 and below. +// likely pathogenic (yellow) -25 <------> 0 likely benign (blue) export const ESM_SCORE_ATTR: PredAttr[] = [ - {color: '#460556', title: 'pathogenic' }, - {color: '#218c8f', title: '' }, - {color: '#f9e725', title: '' } // maybe benign + {color: '#460556', stdColor: STD_BENIGN_COLOR , title: 'benign', info: '-5 to 0 likely benign' }, + {color: '#218c8f', stdColor: STD_UNCERTAIN_COLOR, title: 'uncertain', info: '-10 to -5 uncertain significance' }, + {color: '#f9e725', stdColor: STD_PATHOGENIC_COLOR, title: 'pathogenic', info: '-25 to -10 likely pathogenic' } ] export const ESM_MAX_SCORE = -25 -export const ESM_PATHOGENIC_SCORE = -7.5 -export const ESM_COLOUR_GRADIENT = tinygradient(ESM_SCORE_ATTR.map(s => s.color)); - -export const EsmPred = (props: { esm?: ESMScore }) => { +export const EsmPred = (props: { esm?: ESMScore, stdColor: boolean }) => { if (props.esm === undefined || props.esm === null) { return <> } return
-
ESM-1b {getPredRef(PUBMED_ID.ESM)}
+
ESM-1b {pubmedRef(PUBMED_ID.ESM)}
{props.esm.score}
-
+
} -function EsmPredIcon(props: {esmScore?: ESMScore}) { - if (props.esmScore) { - let title = ''; - if (props.esmScore.score < ESM_PATHOGENIC_SCORE) { - title = ESM_SCORE_ATTR[0].title - } - const colorAtPos = ESM_COLOUR_GRADIENT.rgbAt(props.esmScore.score/ ESM_MAX_SCORE).toHexString() +function EsmPredIcon(props: {esm?: ESMScore, stdColor: boolean }) { + if (props.esm) { + const colorGrad = tinygradient(ESM_SCORE_ATTR.map(s => (props.stdColor ? s.stdColor : s.color))); + const colorAtPos = colorGrad.rgbAt(props.esm.score/ ESM_MAX_SCORE).toHexString() + const esmAttr = esmScoreAttr(props.esm.score) return <> - {title} + {esmAttr && <> + {esmAttr.title} + + } } return <> +} + +function esmScoreAttr(score: number) { + if (score >= -5 && score < 0) { + return ESM_SCORE_ATTR[0] + } else if (score >= -10 && score < -5) { + return ESM_SCORE_ATTR[1] + } else if (score >= -25 && score < -10) { + return ESM_SCORE_ATTR[2] + } + return null } \ No newline at end of file diff --git a/src/ui/components/function/prediction/EvePred.tsx b/src/ui/components/function/prediction/EvePred.tsx index 582aff69..48c2b58e 100644 --- a/src/ui/components/function/prediction/EvePred.tsx +++ b/src/ui/components/function/prediction/EvePred.tsx @@ -1,29 +1,34 @@ import {EVEScore} from "../../../../types/MappingResponse"; -import {getPredRef, PredAttr, PUBMED_ID} from "./Prediction"; +import { + PredAttr, + PUBMED_ID +} from "./Prediction"; import Spaces from "../../../elements/Spaces"; +import {STD_BENIGN_COLOR, STD_PATHOGENIC_COLOR, STD_UNCERTAIN_COLOR} from "./PredConstants"; +import {pubmedRef} from "../../common/Common"; export const EVE_SCORE_ATTR: {[key: string]: PredAttr} = { - PATHOGENIC: { color: 'red', title: 'pathogenic' }, - UNCERTAIN: { color: 'lightgrey', title: 'uncertain' }, - BENIGN: { color: 'blue', title: 'benign' } + BENIGN: { color: 'blue', stdColor: STD_BENIGN_COLOR, title: 'benign' }, + UNCERTAIN: { color: 'lightgrey', stdColor: STD_UNCERTAIN_COLOR, title: 'uncertain' }, + PATHOGENIC: { color: 'red', stdColor: STD_PATHOGENIC_COLOR, title: 'pathogenic' } } -export const EvePred = (props: { eve?: EVEScore }) => { +export const EvePred = (props: { eve?: EVEScore, stdColor: boolean }) => { if (props.eve === undefined || props.eve === null) { return <> } return
-
EVE {getPredRef(PUBMED_ID.EVE)}
+
EVE {pubmedRef(PUBMED_ID.EVE)}
{props.eve.score}
-
+
} -function EvePredIcon(props: { eveScore?: EVEScore }) { - if (props.eveScore) { - let cls = props.eveScore.eveClass as keyof PredAttr +function EvePredIcon(props: { eve?: EVEScore, stdColor: boolean }) { + if (props.eve) { + let cls = props.eve.eveClass as keyof PredAttr return <> - + {EVE_SCORE_ATTR[cls].title} } diff --git a/src/ui/components/function/prediction/FoldxPred.tsx b/src/ui/components/function/prediction/FoldxPred.tsx index eb881741..b0bfce09 100644 --- a/src/ui/components/function/prediction/FoldxPred.tsx +++ b/src/ui/components/function/prediction/FoldxPred.tsx @@ -1,21 +1,33 @@ import {Foldx} from "../../../../types/FunctionalResponse"; import Spaces from "../../../elements/Spaces"; -import {getPredRef, PUBMED_ID} from "./Prediction"; +import {PUBMED_ID} from "./Prediction"; +import {Info, pubmedRef} from "../../common/Common"; export const FoldxPred = (props: { foldxs: Array }) => { if (props.foldxs === null || props.foldxs.length === 0) { return <> } return
- Foldx {getPredRef(PUBMED_ID.FOLDX)}
+
Stability change ΔΔG{pubmedRef(PUBMED_ID.FOLDX)}
ΔΔGpred
-
{props.foldxs[0].foldxDdg}
-
-
-
pLDDT
-
{props.foldxs[0].plddt}
+ destabilising variant.">{props.foldxs[0].foldxDdg} + +
+
+} + +function FoldxPredIcon(props: { foldx?: Foldx }) { + if (props.foldx) { + const color = props.foldx.foldxDdg >= 2 ? 'red' : 'blue' + const text = props.foldx.foldxDdg >= 2 ? 'likely to be destabilising' : 'unlikely to be destabilising' + return <> + + {text} + + + } + return <> } \ No newline at end of file diff --git a/src/ui/components/function/prediction/PredConstants.ts b/src/ui/components/function/prediction/PredConstants.ts new file mode 100644 index 00000000..3c3fc63f --- /dev/null +++ b/src/ui/components/function/prediction/PredConstants.ts @@ -0,0 +1,7 @@ +import tinygradient from "tinygradient"; + +export const STD_BENIGN_COLOR: string = 'blue' +export const STD_UNCERTAIN_COLOR: string = 'lightgray' +export const STD_PATHOGENIC_COLOR: string = 'red' + +export const STD_COLOR_GRADIENT = tinygradient(STD_BENIGN_COLOR, STD_UNCERTAIN_COLOR, STD_PATHOGENIC_COLOR); diff --git a/src/ui/components/function/prediction/Prediction.tsx b/src/ui/components/function/prediction/Prediction.tsx index b0eed0c2..bcd75320 100644 --- a/src/ui/components/function/prediction/Prediction.tsx +++ b/src/ui/components/function/prediction/Prediction.tsx @@ -5,31 +5,33 @@ import {EvePred} from "./EvePred"; import {EsmPred} from "./EsmPred"; import {FoldxPred} from "./FoldxPred"; import {Foldx} from "../../../../types/FunctionalResponse"; +import {useContext} from "react"; +import {StdColorContext} from "../../../App"; export type PredAttr = { title: string, color: string, + stdColor: string, + info?: string } export const PUBMED_ID = { - CONSERV: 31606900, + CONSERV: 11093265, AM: 37733863, EVE: 34707284, ESM: 33876751, FOLDX: 15980494, -} - -export const getPredRef = (id: number) => { - return ref + INTERFACES: 36690744 } export const Prediction = (props: { record: MappingRecord, foldxs: Array }) => { - return <> - Predictions
+ const stdColor = useContext(StdColorContext); + return <>
- - - + Structure predictions
+ Pathogenicity predictions
+ + + } \ No newline at end of file diff --git a/src/ui/components/search/CaddScorePred.ts b/src/ui/components/search/CaddScorePred.ts index bca8f90a..c5f8b4bb 100644 --- a/src/ui/components/search/CaddScorePred.ts +++ b/src/ui/components/search/CaddScorePred.ts @@ -1,11 +1,12 @@ import {PredAttr} from "../function/prediction/Prediction"; +import {STD_COLOR_GRADIENT} from "../function/prediction/PredConstants"; export const CADD_SCORE_ATTR: PredAttr[] = [ - {color: 'DarkGreen', title: '<15.0 Likely benign' }, - {color: 'DarkSeaGreen', title: '15.0-19.9 Potentially deleterious' }, - {color: 'Gold', title: '20.0-24.9 Quite likely deleterious' }, - {color: 'DarkOrange', title: '25.0-29.9 Probably deleterious' }, - {color: 'FireBrick', title: '>29.9 Highly likely deleterious' } + {color: 'DarkGreen', stdColor: STD_COLOR_GRADIENT.rgbAt(0).toHexString(), title: '<15.0 Likely benign' }, + {color: 'DarkSeaGreen', stdColor: STD_COLOR_GRADIENT.rgbAt(0.5).toHexString(), title: '15.0-19.9 Potentially deleterious' }, + {color: 'Gold', stdColor: STD_COLOR_GRADIENT.rgbAt(0.65).toHexString(), title: '20.0-24.9 Quite likely deleterious' }, + {color: 'DarkOrange', stdColor: STD_COLOR_GRADIENT.rgbAt(0.8).toHexString(), title: '25.0-29.9 Probably deleterious' }, + {color: 'FireBrick', stdColor: STD_COLOR_GRADIENT.rgbAt(1).toHexString(), title: '>29.9 Highly likely deleterious' } ] export function caddScoreAttr(cadd?: string) { diff --git a/src/ui/components/search/PrimaryRow.tsx b/src/ui/components/search/PrimaryRow.tsx index 55a1ab7a..f63f7074 100644 --- a/src/ui/components/search/PrimaryRow.tsx +++ b/src/ui/components/search/PrimaryRow.tsx @@ -1,5 +1,5 @@ import './PrimaryRow.css'; -import { Fragment, lazy, Suspense } from "react"; +import {Fragment, lazy, Suspense} from "react"; import { StringVoidFun } from "../../../constants/CommonTypes"; import { CADD_INFO_URL, AM_INFO_URL, @@ -32,7 +32,7 @@ const PopulationDetail = lazy(() => import(/* webpackChunkName: "PopulationDetai const FunctionalDetail = lazy(() => import(/* webpackChunkName: "FunctionalDetail" */ "../function/FunctionalDetail")); const getPrimaryRow = (record: MappingRecord, toggleOpenGroup: string, isoFormGroupExpanded: string, toggleIsoFormGroup: StringVoidFun, - annotationExpanded: string, toggleAnnotation: StringVoidFun, hasAltIsoForm: boolean, currStyle: object) => { + annotationExpanded: string, toggleAnnotation: StringVoidFun, hasAltIsoForm: boolean, currStyle: object, stdColor: boolean) => { const caddAttr = caddScoreAttr(record.cadd) const amAttr = amScoreAttr(record.amScore?.amClass) @@ -109,7 +109,7 @@ const getPrimaryRow = (record: MappingRecord, toggleOpenGroup: string, isoFormGr
- + 9 ? 0 : 2} />{isNaN(parseFloat(record.cadd!)) ? "" : parseFloat(record.cadd!).toFixed(1)} @@ -143,7 +143,7 @@ const getPrimaryRow = (record: MappingRecord, toggleOpenGroup: string, isoFormGr {record.aaChange} {record.consequences} - + {record.amScore?.amPathogenicity.toString().substring(0,4)} diff --git a/src/ui/components/search/ResultTable.tsx b/src/ui/components/search/ResultTable.tsx index 4286bd62..278e918f 100644 --- a/src/ui/components/search/ResultTable.tsx +++ b/src/ui/components/search/ResultTable.tsx @@ -1,4 +1,4 @@ -import { useState } from "react" +import {useContext, useState} from "react" import { StringVoidFun } from "../../../constants/CommonTypes"; import { MappingRecord } from "../../../utills/Convertor"; import AlternateIsoFormRow from "./AlternateIsoFormRow"; @@ -6,6 +6,7 @@ import { GENOMIC_COLS, PROTEIN_COLS } from "../../../constants/SearchResultTable import Tool from "../../elements/Tool"; import getPrimaryRow from "./PrimaryRow"; import MsgRow from "./MsgRow"; +import {StdColorContext} from "../../App"; interface ResultTableProps { mappings: Array>> @@ -20,6 +21,7 @@ export function getProteinName(record: MappingRecord) { } function ResultTable(props: ResultTableProps) { + const stdColor = useContext(StdColorContext); const [isoFormGroupExpanded, setIsoFormGroupExpanded] = useState('') const [annotationExpanded, setAnnotationExpanded] = useState('') @@ -31,7 +33,7 @@ function ResultTable(props: ResultTableProps) { setAnnotationExpanded(annotationExpanded === key ? '' : key); } - const tableRows = getTableRows(props.mappings, isoFormGroupExpanded, toggleIsoFormGroup, annotationExpanded, toggleAnnotation); + const tableRows = getTableRows(props.mappings, isoFormGroupExpanded, toggleIsoFormGroup, annotationExpanded, toggleAnnotation, stdColor); return @@ -67,7 +69,7 @@ function ResultTable(props: ResultTableProps) { } const getTableRows = (mappings: MappingRecord[][][], isoFormGroupExpanded: string, toggleIsoFormGroup: StringVoidFun, - annotationExpanded: string, toggleAnnotation: StringVoidFun) => { + annotationExpanded: string, toggleAnnotation: StringVoidFun, stdColor: boolean) => { const tableRows: Array = []; const rowStyle = { a: {backgroundColor: "#F4F3F3" }, b: {backgroundColor: "#FFFFFF" }} let prevInput = "" @@ -91,7 +93,7 @@ const getTableRows = (mappings: MappingRecord[][][], isoFormGroupExpanded: strin } else tableRows.push(getPrimaryRow(isoform, currentGroup, isoFormGroupExpanded, toggleIsoFormGroup, annotationExpanded, - toggleAnnotation, matchingIsoForms.length > 1, currStyle)) + toggleAnnotation, matchingIsoForms.length > 1, currStyle, stdColor)) else if (currentGroup === isoFormGroupExpanded) tableRows.push() } diff --git a/src/ui/layout/DefaultPageLayout.tsx b/src/ui/layout/DefaultPageLayout.tsx index 038b4fbd..784910dd 100644 --- a/src/ui/layout/DefaultPageLayout.tsx +++ b/src/ui/layout/DefaultPageLayout.tsx @@ -16,7 +16,7 @@ interface DefaultPageLayoutProps { searchResults?: MappingRecord[][][] } -const bannerText = "AlphaMissense prediction has replaced EVE score in the main table. You can now find EVE score under Predictions in the Functional Annotations section." +const bannerText = "AlphaMissense prediction has replaced EVE score in the main table. You can now find EVE score under Predictions in the Functional Information section." function DefaultPageLayout(props: DefaultPageLayoutProps) { const [showBanner, setShowBanner ] = useState(bannerText == null ? false : true); diff --git a/src/ui/modal/LegendModal.tsx b/src/ui/modal/LegendModal.tsx index 82cf8510..d6ab8254 100644 --- a/src/ui/modal/LegendModal.tsx +++ b/src/ui/modal/LegendModal.tsx @@ -1,4 +1,5 @@ -import { useState, useCallback, useRef } from 'react' +import {useState, useCallback, useRef, useContext} from 'react' +import { v1 as uuidv1 } from 'uuid'; import Button from '../elements/form/Button' import Modal from './Modal' import useOnClickOutside from '../../hooks/useOnClickOutside' @@ -7,8 +8,10 @@ import {CADD_SCORE_ATTR} from "../components/search/CaddScorePred"; import {PredAttr} from "../components/function/prediction/Prediction"; import {AM_SCORE_ATTR} from "../components/function/prediction/AlphaMissensePred"; import {EVE_SCORE_ATTR} from "../components/function/prediction/EvePred"; +import {StdColorContext} from "../App"; -function LegendModal() { +function LegendModal(props: {toggleStdColor: () => void}) { + const stdColor = useContext(StdColorContext); const [showModel, setShowModel] = useState(false) const downloadModelDiv = useRef(null) @@ -17,6 +20,7 @@ function LegendModal() { useCallback(() => setShowModel(false), []), ) + return (
- +

- +
-
- +
+
+
+ +
) } -function CaddLegend() { +interface CommonLegendProps { + stdColor: boolean +} + +function CaddLegend(props: CommonLegendProps) { return (
CADD phred-like score @@ -68,9 +82,9 @@ function CaddLegend() {
{ Object.values(CADD_SCORE_ATTR).map((sc: PredAttr) => { - return
+ return
- +
{sc.title}
; @@ -99,7 +113,7 @@ function ConservLegend() { ); } -function EsmLegend() { +function EsmLegend(props: CommonLegendProps) { return (
ESM1b LLR score @@ -108,7 +122,7 @@ function EsmLegend() {
-
+
0 -5 -10 -15 -20 -25
@@ -117,16 +131,16 @@ function EsmLegend() { ); } -function AlphaMissenseLegend() { +function AlphaMissenseLegend(props: CommonLegendProps) { return
AlphaMissense score
{ Object.values(AM_SCORE_ATTR).map((sc: PredAttr) => { - return
+ return
- +
{sc.title}
; @@ -137,7 +151,7 @@ function AlphaMissenseLegend() {
; } -function EveLegend() { +function EveLegend(props: CommonLegendProps) { return (
EVE score @@ -145,9 +159,9 @@ function EveLegend() {
{ Object.values(EVE_SCORE_ATTR).map((sc: PredAttr) => { - return
+ return
- +
{sc.title}
; diff --git a/src/ui/pages/query/QueryPage.tsx b/src/ui/pages/query/QueryPage.tsx index bbc7370e..1774f294 100644 --- a/src/ui/pages/query/QueryPage.tsx +++ b/src/ui/pages/query/QueryPage.tsx @@ -157,7 +157,7 @@ function getInputsFromUrl(location: any): any { return [] } -const QueryPageContent = () => { +const QueryPageContent = (props: {toggleStdColor: () => void}) => { const location = useLocation() const [loaded, setLoaded] = useState(false) const [err, setErr] = useState(false) @@ -190,7 +190,7 @@ const QueryPageContent = () => {
- +
@@ -203,8 +203,8 @@ const QueryPageContent = () => { return <>{loaded ? result : (err ? : )} } -function QueryPage() { - return } /> +function QueryPage(props: {toggleStdColor: () => void}) { + return } /> } export default QueryPage diff --git a/src/ui/pages/search/SearchResultPage.tsx b/src/ui/pages/search/SearchResultPage.tsx index 6505eac1..77806188 100644 --- a/src/ui/pages/search/SearchResultPage.tsx +++ b/src/ui/pages/search/SearchResultPage.tsx @@ -16,6 +16,7 @@ interface SearchResultPageProps { fetchNextPage: NextPageFun rows: MappingRecord[][][] loading: boolean + toggleStdColor: () => void } function SearchResultsPageContent(props: SearchResultPageProps) { @@ -34,7 +35,7 @@ function SearchResultsPageContent(props: SearchResultPageProps) {
- +