Skip to content

Commit ddcb13e

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

File tree

5 files changed

+283
-20
lines changed

5 files changed

+283
-20
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: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@ 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 {
12+
SHOW_ALPHAMISSENSE,
13+
SHOW_MUTATION_ASSESSOR,
14+
} from '../../config/configDefaults';
1115
import Separator from '../Separator';
1216
import { GENOME_BUILD } from '../../util/SearchUtils';
1317

14-
// Most of this component comes from cBioPortal-frontend
15-
1618
interface IFunctionalPredictionProps {
1719
variantAnnotation?: VariantAnnotation;
1820
isCanonicalTranscriptSelected: boolean;
@@ -25,6 +27,8 @@ interface IFunctionalImpactData {
2527
siftPrediction: string | undefined;
2628
polyPhenScore: number | undefined;
2729
polyPhenPrediction: string | undefined;
30+
amClass: string | undefined;
31+
amPathogenicityScore: number | undefined;
2832
}
2933

3034
@observer
@@ -52,8 +56,23 @@ class FunctionalPrediction extends React.Component<IFunctionalPredictionProps> {
5256
genomeNexusData &&
5357
genomeNexusData.transcript_consequences &&
5458
genomeNexusData.transcript_consequences[0].polyphen_prediction;
59+
const amClass =
60+
genomeNexusData &&
61+
genomeNexusData.transcript_consequences &&
62+
genomeNexusData.transcript_consequences[0].alphaMissense
63+
? genomeNexusData.transcript_consequences[0].alphaMissense
64+
.pathogenicity
65+
: 'N/A';
66+
const amPathogenicityScore =
67+
genomeNexusData &&
68+
genomeNexusData.transcript_consequences &&
69+
genomeNexusData.transcript_consequences[0].alphaMissense
70+
? genomeNexusData.transcript_consequences[0].alphaMissense.score
71+
: -1;
5572

5673
return {
74+
amClass,
75+
amPathogenicityScore,
5776
mutationAssessor,
5877
siftScore,
5978
siftPrediction,
@@ -67,6 +86,9 @@ class FunctionalPrediction extends React.Component<IFunctionalPredictionProps> {
6786
const shouldShowMutationAssessor =
6887
SHOW_MUTATION_ASSESSOR &&
6988
this.props.genomeBuild === GENOME_BUILD.GRCh37;
89+
const shouldShowAlphaMissense =
90+
SHOW_ALPHAMISSENSE &&
91+
this.props.genomeBuild === GENOME_BUILD.GRCh37;
7092
return (
7193
<div>
7294
<PolyPhen2
@@ -89,6 +111,13 @@ class FunctionalPrediction extends React.Component<IFunctionalPredictionProps> {
89111
siftScore={data.siftScore}
90112
siftPrediction={data.siftPrediction}
91113
/>
114+
<Separator />
115+
{shouldShowAlphaMissense && (
116+
<AlphaMissense
117+
amClass={data.amClass}
118+
amPathogenicityScore={data.amPathogenicityScore}
119+
></AlphaMissense>
120+
)}
92121
</div>
93122
);
94123
}

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

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

‎src/config/configDefaults.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
export const SHOW_MUTATION_ASSESSOR = true;
2-
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)