Skip to content

Commit aaf55c2

Browse files
JunheZooooJunheZoooo
committed
Add AlphaMissense in Functional prediction
1 parent 562cc0d commit aaf55c2

File tree

5 files changed

+266
-21
lines changed

5 files changed

+266
-21
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,10 @@
2626
"classnames": "^2.2.6",
2727
"file-loader": "^4.3.0",
2828
"font-awesome": "^4.7.0",
29-
"genome-nexus-ts-api-client": "1.1.32",
29+
"genome-nexus-ts-api-client": "1.1.33",
3030
"lodash": "^4.17.21",
3131
"mobx": "^6.0.0",
3232
"mobx-react": "^6.0.0",
33-
"sass": "^1.32.4",
3433
"oncokb-frontend-commons": "^0.0.18",
3534
"oncokb-styles": "~1.4.2",
3635
"oncokb-ts-api-client": "^1.3.3",
@@ -53,6 +52,7 @@
5352
"rehype-raw": "^6.1.0",
5453
"rehype-sanitize": "^5.0.0",
5554
"remark-gfm": "^3.0.1",
55+
"sass": "^1.32.4",
5656
"typeface-open-sans": "^0.0.54",
5757
"typescript": "^4.3.5"
5858
},

‎src/component/variantPage/FunctionalPrediction.tsx‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import {
77
import MutationAssessor from './functionalPrediction/MutationAssesor';
88
import Sift from './functionalPrediction/Sift';
99
import PolyPhen2 from './functionalPrediction/PolyPhen2';
10-
import { SHOW_MUTATION_ASSESSOR } from '../../config/configDefaults';
10+
import AlphaMissense from './functionalPrediction/AlphaMissense';
11+
import {SHOW_ALPHAMISSENSE, SHOW_MUTATION_ASSESSOR} from '../../config/configDefaults';
1112
import Separator from '../Separator';
1213
import { GENOME_BUILD } from '../../util/SearchUtils';
1314

14-
// Most of this component comes from cBioPortal-frontend
1515

1616
interface IFunctionalPredictionProps {
1717
variantAnnotation?: VariantAnnotation;
@@ -25,10 +25,13 @@ interface IFunctionalImpactData {
2525
siftPrediction: string | undefined;
2626
polyPhenScore: number | undefined;
2727
polyPhenPrediction: string | undefined;
28+
amClass: string | undefined;
29+
amPathogenicityScore: number | undefined;
2830
}
2931

3032
@observer
3133
class FunctionalPrediction extends React.Component<IFunctionalPredictionProps> {
34+
3235
public getData(
3336
genomeNexusData: VariantAnnotation | undefined
3437
): IFunctionalImpactData {
@@ -52,13 +55,25 @@ class FunctionalPrediction extends React.Component<IFunctionalPredictionProps> {
5255
genomeNexusData &&
5356
genomeNexusData.transcript_consequences &&
5457
genomeNexusData.transcript_consequences[0].polyphen_prediction;
58+
const amClass =
59+
genomeNexusData &&
60+
genomeNexusData.transcript_consequences &&
61+
genomeNexusData.transcript_consequences[0].alphaMissense?
62+
genomeNexusData.transcript_consequences[0].alphaMissense.pathogenicity : 'N/A';
63+
const amPathogenicityScore =
64+
genomeNexusData &&
65+
genomeNexusData.transcript_consequences &&
66+
genomeNexusData.transcript_consequences[0].alphaMissense?
67+
genomeNexusData.transcript_consequences[0].alphaMissense.score : -1;
5568

5669
return {
70+
amClass,
71+
amPathogenicityScore,
5772
mutationAssessor,
5873
siftScore,
5974
siftPrediction,
6075
polyPhenScore,
61-
polyPhenPrediction,
76+
polyPhenPrediction
6277
};
6378
}
6479
public render() {
@@ -67,6 +82,9 @@ class FunctionalPrediction extends React.Component<IFunctionalPredictionProps> {
6782
const shouldShowMutationAssessor =
6883
SHOW_MUTATION_ASSESSOR &&
6984
this.props.genomeBuild === GENOME_BUILD.GRCh37;
85+
const shouldShowAlphaMissense =
86+
SHOW_ALPHAMISSENSE &&
87+
this.props.genomeBuild === GENOME_BUILD.GRCh37;
7088
return (
7189
<div>
7290
<PolyPhen2
@@ -89,6 +107,13 @@ class FunctionalPrediction extends React.Component<IFunctionalPredictionProps> {
89107
siftScore={data.siftScore}
90108
siftPrediction={data.siftPrediction}
91109
/>
110+
<Separator />
111+
{shouldShowAlphaMissense && (
112+
<AlphaMissense
113+
amClass={data.amClass}
114+
amPathogenicityScore={data.amPathogenicityScore}>
115+
</AlphaMissense>
116+
)}
92117
</div>
93118
);
94119
}

‎src/component/variantPage/functionalPrediction/AlphaMissense.tsx‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
import * as React from 'react';
2+
import classNames from 'classnames';
3+
import { DefaultTooltip } from 'cbioportal-frontend-commons';
4+
import { action, makeObservable, observable } from 'mobx';
5+
import { observer } from 'mobx-react';
6+
import { Collapse, Table } from 'react-bootstrap';
7+
import functionalImpactColor from './styles/functionalImpactTooltip.module.scss';
8+
import functionalGroupsStyle from '../functionalGroups.module.scss';
9+
10+
export interface IAlphamissenseProps {
11+
amClass?: string;
12+
amPathogenicityScore?: number;
13+
}
14+
15+
const ALPHAMISSENSE_URL = 'https://www.science.org/doi/10.1126/science.adg7492';
16+
17+
const AlphamissenseInfo: React.FunctionComponent = () => {
18+
return (
19+
<div>
20+
<a href={ALPHAMISSENSE_URL} target="_blank" rel="noopener noreferrer">
21+
AlphaMissense
22+
</a>{' '}
23+
This is AlphaMissense information
24+
</div>
25+
);
26+
};
27+
28+
const AlphamissenseLegend: React.FunctionComponent = () => {
29+
return (
30+
<div style={{ minWidth: 450 }}>
31+
<Table table-border-top striped bordered hover size="sm">
32+
<thead>
33+
<tr>
34+
<th>Legend</th>
35+
<th>
36+
<span
37+
style={{ display: 'inline-block' }}
38+
title="AlphaMissense"
39+
>
40+
<img
41+
height={14}
42+
src={require('./styles/siftFunnel.png')}
43+
alt="AlphaMissense"
44+
/>
45+
&nbsp;Qualitative prediction
46+
</span>
47+
</th>
48+
</tr>
49+
</thead>
50+
<tbody>
51+
<tr>
52+
<td>
53+
<span>
54+
<i
55+
className={classNames(
56+
functionalImpactColor['high'],
57+
'fa fa-circle'
58+
)}
59+
aria-hidden="true"
60+
/>
61+
</span>
62+
</td>
63+
<td>
64+
<b>deleterious</b>
65+
</td>
66+
</tr>
67+
<tr>
68+
<td>
69+
<span>
70+
<i
71+
className={classNames(
72+
functionalImpactColor['low'],
73+
'fa fa-circle'
74+
)}
75+
aria-hidden="true"
76+
/>
77+
</span>
78+
</td>
79+
<td>
80+
<b>deleterious_low_confidence</b>
81+
</td>
82+
</tr>
83+
<tr>
84+
<td>
85+
<span>
86+
<i
87+
className={classNames(
88+
functionalImpactColor['neutral'],
89+
'fa fa-circle'
90+
)}
91+
aria-hidden="true"
92+
/>
93+
</span>
94+
</td>
95+
<td>
96+
<b>tolerated_low_confidence</b>
97+
</td>
98+
</tr>
99+
<tr>
100+
<td>
101+
<span>
102+
<i
103+
className={classNames(
104+
functionalImpactColor['neutral'],
105+
'fa fa-circle'
106+
)}
107+
aria-hidden="true"
108+
/>
109+
</span>
110+
</td>
111+
<td>
112+
<b>tolerated</b>
113+
</td>
114+
</tr>
115+
</tbody>
116+
</Table>
117+
</div>
118+
);
119+
};
120+
121+
const AlphamissenseValue: React.FunctionComponent<IAlphamissenseProps> = (props) => {
122+
return props.amClass ? (
123+
<div>
124+
<div>
125+
Please refer to the score range{' '}
126+
<a
127+
href="https://useast.ensembl.org/info/genome/variation/prediction/protein_function.html"
128+
target="_blank"
129+
rel="noopener noreferrer"
130+
>
131+
here
132+
</a>
133+
.
134+
</div>
135+
</div>
136+
) : null;
137+
};
138+
139+
@observer
140+
export default class AlphaMissense extends React.Component<IAlphamissenseProps, {}> {
141+
@observable showDetails = false;
142+
143+
constructor(props: IAlphamissenseProps) {
144+
super(props);
145+
makeObservable(this);
146+
}
147+
148+
public render() {
149+
let alphamissenseContent: JSX.Element;
150+
151+
const dataSource = (
152+
<>
153+
AlphaMissense&nbsp;
154+
<i className="fas fa-external-link-alt" />
155+
</>
156+
);
157+
if (this.props.amClass === "N/A"){
158+
alphamissenseContent = <span> N/A </span>;
159+
}
160+
else if (this.props.amClass && this.props.amClass.length > 0) {
161+
alphamissenseContent = <span>
162+
<p>{this.props.amClass + ' '}({this.props.amPathogenicityScore})</p> </span>;
163+
} else {
164+
alphamissenseContent = <span> N/A </span>;
165+
}
166+
167+
return (
168+
<div className={functionalGroupsStyle['functional-group']}>
169+
<div className={functionalGroupsStyle['data-source']}>
170+
<DefaultTooltip
171+
placement="top"
172+
overlay={
173+
<div style={{ maxWidth: 450 }}>
174+
<AlphamissenseInfo />
175+
</div>
176+
}
177+
>
178+
<a
179+
href={ALPHAMISSENSE_URL}
180+
target="_blank"
181+
rel="noopener noreferrer"
182+
>
183+
{dataSource}
184+
</a>
185+
</DefaultTooltip>
186+
</div>
187+
<div>
188+
<span className={functionalGroupsStyle['data-with-link']}>
189+
<a
190+
href={ALPHAMISSENSE_URL}
191+
target="_blank"
192+
rel="noopener noreferrer"
193+
>
194+
{alphamissenseContent}
195+
196+
</a>
197+
</span>
198+
<Collapse in={this.showDetails}>
199+
<div className="pt-2">
200+
<AlphamissenseValue
201+
amClass={this.props.amClass}
202+
amPathogenicityScore={this.props.amPathogenicityScore}
203+
/>
204+
<br />
205+
<AlphamissenseLegend />
206+
</div>
207+
</Collapse>
208+
</div>
209+
</div>
210+
);
211+
}
212+
213+
@action
214+
onToggleDetails = () => {
215+
this.showDetails = !this.showDetails;
216+
};
217+
}
218+

‎src/config/configDefaults.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
export const SHOW_MUTATION_ASSESSOR = true;
2-
1+
export const SHOW_MUTATION_ASSESSOR =true;
2+
export const SHOW_ALPHAMISSENSE = true;
33
export function annotationQueryFields() {
44
const fields = DEFAULT_ANNOTATION_QUERY_FIELDS;
55
if (SHOW_MUTATION_ASSESSOR) {
66
fields.push('mutation_assessor');
77
}
88
return fields;
99
}
10-
1110
export const DEFAULT_ANNOTATION_QUERY_FIELDS = [
1211
'hotspots',
1312
'annotation_summary',

‎yarn.lock‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4260,15 +4260,10 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
42604260
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000985.tgz#208c723beb15123eb27cc6ad9bc285b4f27a3f87"
42614261
integrity sha512-1m3CC9+dYNh/FHd0V1/McOB73CxjmzzrcXi360x8mKoApUY8QIOYXg4bU5QeJmlenn++20GBI38EKw6qQpJ3kQ==
42624262

4263-
caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000984:
4264-
version "1.0.30000985"
4265-
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000985.tgz#0eb40f6c8a8c219155cbe43c4975c0efb4a0f77f"
4266-
integrity sha512-1ngiwkgqAYPG0JSSUp3PUDGPKKY59EK7NrGGX+VOxaKCNzRbNc7uXMny+c3VJfZxtoK3wSImTvG9T9sXiTw2+w==
4267-
4268-
caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219:
4269-
version "1.0.30001245"
4270-
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001245.tgz#45b941bbd833cb0fa53861ff2bae746b3c6ca5d4"
4271-
integrity sha512-768fM9j1PKXpOCKws6eTo3RHmvTUsG9UrpT4WoREFeZgJBTi4/X9g565azS/rVUGtqb8nt7FjLeF5u4kukERnA==
4263+
caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30000984, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219:
4264+
version "1.0.30001643"
4265+
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001643.tgz"
4266+
integrity sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==
42724267

42734268
canvg@1.5.3:
42744269
version "1.5.3"
@@ -7038,10 +7033,10 @@ gauge@~2.7.3:
70387033
strip-ansi "^3.0.1"
70397034
wide-align "^1.1.0"
70407035

7041-
genome-nexus-ts-api-client@1.1.32, genome-nexus-ts-api-client@^1.1.32:
7042-
version "1.1.32"
7043-
resolved "https://registry.yarnpkg.com/genome-nexus-ts-api-client/-/genome-nexus-ts-api-client-1.1.32.tgz#e8a9c70d6644e17ae7f76c803ecb0d3e1720c7d9"
7044-
integrity sha512-ELXH+50alvUVnRioxCOLvxf5VcN57YVheF80kEVFBXT5cnO178tvDLHdaqbmAlEvezHwptercQ9kqh8d9TTm5Q==
7036+
genome-nexus-ts-api-client@1.1.33:
7037+
version "1.1.33"
7038+
resolved "https://registry.yarnpkg.com/genome-nexus-ts-api-client/-/genome-nexus-ts-api-client-1.1.33.tgz#aea3eafe6ca59e0187c25c487b7fb9f9b704bdde"
7039+
integrity sha512-wrbDKoVjw9etDChfacrNStlORqWlS/k2dA5DzlxFEfen3WYO7QtXAFLVSxpjanA/3sGQnVqaxreZzjTPDXhs1A==
70457040
dependencies:
70467041
superagent "^3.8.3"
70477042
typescript "4.0.3"
@@ -7054,6 +7049,14 @@ genome-nexus-ts-api-client@^1.1.28:
70547049
superagent "^3.8.3"
70557050
typescript "4.0.3"
70567051

7052+
genome-nexus-ts-api-client@^1.1.32:
7053+
version "1.1.32"
7054+
resolved "https://registry.yarnpkg.com/genome-nexus-ts-api-client/-/genome-nexus-ts-api-client-1.1.32.tgz#e8a9c70d6644e17ae7f76c803ecb0d3e1720c7d9"
7055+
integrity sha512-ELXH+50alvUVnRioxCOLvxf5VcN57YVheF80kEVFBXT5cnO178tvDLHdaqbmAlEvezHwptercQ9kqh8d9TTm5Q==
7056+
dependencies:
7057+
superagent "^3.8.3"
7058+
typescript "4.0.3"
7059+
70577060
gensync@^1.0.0-beta.1:
70587061
version "1.0.0-beta.2"
70597062
resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"

0 commit comments

Comments
 (0)