Add AlphaMissense in Functional prediction by JunheZoooo · Pull Request #160 · genome-nexus/genome-nexus-frontend

JunheZoooo · 2024-08-18T14:23:19Z

Description

This pull request adds new features and improvements to the AlphaMissense

Result Display

(1)

(2)

(3)

onursumer · 2024-08-19T20:54:50Z

package.json

    "rehype-raw": "^6.1.0",
    "rehype-sanitize": "^5.0.0",
    "remark-gfm": "^3.0.1",
+    "sass": "^1.32.4",


why do we need to update this library version?

onursumer · 2024-08-19T20:56:00Z

src/component/variantPage/FunctionalPrediction.tsx

+import AlphaMissense from './functionalPrediction/AlphaMissense';
+import {
+    SHOW_ALPHAMISSENSE,
+    SHOW_MUTATION_ASSESSOR,


SHOW_MUTATION_ASSESSOR shouldn't be relevant for AlphaMissense. Let's remove this.

Suggested change

SHOW_MUTATION_ASSESSOR,

onursumer · 2024-08-19T20:57:43Z

src/component/variantPage/FunctionalPrediction.tsx

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


let's keep this comment

onursumer · 2024-08-19T20:59:42Z

src/component/variantPage/FunctionalPrediction.tsx

+        const shouldShowAlphaMissense =
+            SHOW_ALPHAMISSENSE &&
+            this.props.genomeBuild === GENOME_BUILD.GRCh37;


Is AlphaMissense only available in grch37?

No it's available for both grch37 and grch38

changed it to
const shouldShowAlphaMissense =
SHOW_ALPHAMISSENSE &&
(this.props.genomeBuild === GENOME_BUILD.GRCh37
|| this.props.genomeBuild === GENOME_BUILD.GRCh38);

onursumer · 2024-08-19T21:00:10Z

src/component/variantPage/FunctionalPrediction.tsx

+                    <AlphaMissense
+                        amClass={data.amClass}
+                        amPathogenicityScore={data.amPathogenicityScore}
+                    ></AlphaMissense>


Suggested change

></AlphaMissense>

/>

</AlphaMissense> Still there

onursumer · 2024-08-19T21:04:50Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+            >
+                AlphaMissense
+            </a>{' '}
+            This is AlphaMissense information


We need to display an actual info here.

Please add a short description of what is Alpha Missense (1-2 sentences), and briefly describe the pathogenicity classes and score range of each group, also add link to Alpha Missense text to the paper

onursumer · 2024-08-19T21:07:59Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+                    <Collapse in={this.showDetails}>
+                        <div className="pt-2">
+                            <AlphamissenseValue
+                                amClass={this.props.amClass}
+                                amPathogenicityScore={
+                                    this.props.amPathogenicityScore
+                                }
+                            />
+                            <br />
+                            <AlphamissenseLegend />
+                        </div>
+                    </Collapse>


I think this content is always hidden because we don't seem to have a More button

deleted Collapse part

onursumer · 2024-08-19T21:11:38Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+        if (this.props.amClass === 'N/A') {
+            alphamissenseContent = <span> N/A </span>;
+        } else if (this.props.amClass && this.props.amClass.length > 0) {


Suggested change

if (this.props.amClass === 'N/A') {

alphamissenseContent = <span> N/A </span>;

} else if (this.props.amClass && this.props.amClass.length > 0) {

if (this.props.amClass && this.props.amClass.length > 0 && this.props.amClass !== 'N/A') {

leexgh · 2024-08-19T21:33:55Z

src/component/variantPage/FunctionalPrediction.tsx

+        const shouldShowAlphaMissense =
+            SHOW_ALPHAMISSENSE &&
+            this.props.genomeBuild === GENOME_BUILD.GRCh37;


No it's available for both grch37 and grch38

leexgh · 2024-08-19T21:39:24Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+    );
+};
+
+const AlphamissenseLegend: React.FunctionComponent = () => {


Looks like this is copied from Sift? Let's keep the code clean and make sure only components we need are in the pull request

leexgh · 2024-08-19T21:39:45Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+            <div>
+                Please refer to the score range{' '}
+                <a
+                    href="https://useast.ensembl.org/info/genome/variation/prediction/protein_function.html"


What is this link referring to? Is this element copied from Sift or Polyphen? Please make sure we need the exact same element before copy anything, otherwise it will probably cause more issues

leexgh · 2024-08-19T21:43:35Z

src/component/variantPage/FunctionalPrediction.tsx

+        const amPathogenicityScore =
+            genomeNexusData &&
+            genomeNexusData.transcript_consequences &&
+            genomeNexusData.transcript_consequences[0].alphaMissense
+                ? genomeNexusData.transcript_consequences[0].alphaMissense.score
+                : -1;


Is it possible to get through annotationSummary? The transcript_consequences[0] may not be the canonical transcript for this variant and alpha missense is associated with transcript id. Using annotationSummary's transcriptConsequenceSummary will make sure it's canonical transcript

leexgh · 2024-08-19T21:53:20Z

src/component/variantPage/FunctionalPrediction.tsx

+        const amPathogenicityScore =
+            genomeNexusData &&
+            genomeNexusData.transcript_consequences &&
+            genomeNexusData.transcript_consequences[0].alphaMissense
+                ? genomeNexusData.transcript_consequences[0].alphaMissense.score
+                : -1;


Is -1 an appropriate default value? For people unfamiliar with the score range, -1 might confuse them. I believe the score and pathogenicity are always together, they either both exist or both not exsit, so we can do the checking on a higher level and show NA to avoid setting default value

changed it to undefined

leexgh · 2024-08-19T21:56:11Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+    }
+
+    public render() {
+        let alphamissenseContent: JSX.Element;


Suggested change

let alphamissenseContent: JSX.Element;

let alphaMissenseContent: JSX.Element;

leexgh · 2024-08-19T22:00:59Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+            >
+                AlphaMissense
+            </a>{' '}
+            This is AlphaMissense information


Please add a short description of what is Alpha Missense (1-2 sentences), and briefly describe the pathogenicity classes and score range of each group, also add link to Alpha Missense text to the paper

leexgh · 2024-08-19T22:01:35Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+    );
+};
+
+const AlphamissenseValue: React.FunctionComponent<IAlphamissenseProps> = (


Suggested change

const AlphamissenseValue: React.FunctionComponent<IAlphamissenseProps> = (

const AlphaMissenseValue: React.FunctionComponent<IAlphamissenseProps> = (

leexgh · 2024-08-19T22:02:26Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+import functionalImpactColor from './styles/functionalImpactTooltip.module.scss';
+import functionalGroupsStyle from '../functionalGroups.module.scss';
+
+export interface IAlphamissenseProps {


Suggested change

export interface IAlphamissenseProps {

export interface IAlphaMissenseProps {

changed it all the alphamissense to alphaMissense

leexgh · 2024-08-19T22:02:39Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+
+const ALPHAMISSENSE_URL = 'https://www.science.org/doi/10.1126/science.adg7492';
+
+const AlphamissenseInfo: React.FunctionComponent = () => {


Suggested change

const AlphamissenseInfo: React.FunctionComponent = () => {

const AlphaMissenseInfo: React.FunctionComponent = () => {

leexgh · 2024-08-20T14:47:13Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+        <div>
+            <a
+                href={ALPHAMISSENSE_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                AlphaMissense
+            </a>{' '}
+            {' '}
+            is a feature within the VEP plugin used to
+            predict the pathogenicity of missense variants. Missense
+            variants refer to changes in a single base of the gene that
+            result in a change in the encoded amino acid, potentially
+            affecting the function of the protein. AlphaMissense
+            utilizes deep learning algorithms to assess the potential
+            impact of these variants, aiding researchers in better
+            understanding the relationship between the variant, gene
+            function, and disease. <b>Pathogenic:</b> Score &gt; 0.564;
+            significant impact; may cause disease.
+            <b>Benign:</b> Score &lt; 0.34; minor impact; unlikely to
+            cause disease.
+            <b>Ambiguous:</b> Score between 0.34 and 0.564; intermediate
+            score; insufficient data.-{' '}
+        </div>


Some suggestions I have:

Can you make the description a bit shorter?

"alpha missense is a feature within the VEP plugin used to predict the pathogenicity of missense variants" could confuse users. This should be about what is alpha missense itself, not where we get the data from.

Probably no need to describe what is missense variant, people using this website usually already know it.

Could you clean up extra - and whitespace?

Can you show score and range in new line with bullet point? Right now it's a bit hard to read

leexgh · 2024-08-20T14:48:16Z

src/component/variantPage/FunctionalPrediction.tsx

+                    <AlphaMissense
+                        amClass={data.amClass}
+                        amPathogenicityScore={data.amPathogenicityScore}
+                    ></AlphaMissense>


</AlphaMissense> Still there

leexgh · 2024-08-20T15:11:24Z

src/component/variantPage/FunctionalPrediction.tsx

+        const shouldShowAlphaMissense =
+            SHOW_ALPHAMISSENSE &&
+            (this.props.genomeBuild === GENOME_BUILD.GRCh37
+            || this.props.genomeBuild === GENOME_BUILD.GRCh38);


No need to check the genome build in this case, it will always be either grch37 or grch38, no other options available. Just the SHOW_ALPHAMISSENSE should do the work

leexgh · 2024-08-20T15:12:04Z

src/component/variantPage/FunctionalPrediction.tsx

+        const amClass =
+            genomeNexusData &&
+            genomeNexusData.annotation_summary &&
+            genomeNexusData.annotation_summary.transcriptConsequenceSummary &&
+            genomeNexusData.annotation_summary.transcriptConsequenceSummary.alphaMissense
+                ? genomeNexusData.annotation_summary.transcriptConsequenceSummary.alphaMissense.pathogenicity
+                : 'N/A';


Suggested change

const amClass =

genomeNexusData &&

genomeNexusData.annotation_summary &&

genomeNexusData.annotation_summary.transcriptConsequenceSummary &&

genomeNexusData.annotation_summary.transcriptConsequenceSummary.alphaMissense

? genomeNexusData.annotation_summary.transcriptConsequenceSummary.alphaMissense.pathogenicity

: 'N/A';

const amClass = genomeNexusData?.annotation_summary?.transcriptConsequenceSummary?.alphaMissense?.pathogenicity || undefined;

Same for amPathogenicityScore

leexgh · 2024-08-20T15:12:34Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+    @action
+    onToggleDetails = () => {
+        this.showDetails = !this.showDetails;
+    };


Where do we use this?

leexgh · 2024-08-20T21:17:00Z

src/component/variantPage/FunctionalPrediction.tsx

-        const shouldShowMutationAssessor =
-            SHOW_MUTATION_ASSESSOR &&
-            this.props.genomeBuild === GENOME_BUILD.GRCh37;
+        const shouldShowAlphaMissense = SHOW_ALPHAMISSENSE;


Do we need to set to an extra const? Just SHOW_ALPHAMISSENSE should be enough

leexgh · 2024-08-20T21:21:16Z

src/component/variantPage/FunctionalPrediction.tsx

-        // Mutation Assessor only available in grch37
-        const shouldShowMutationAssessor =
-            SHOW_MUTATION_ASSESSOR &&
-            this.props.genomeBuild === GENOME_BUILD.GRCh37;


We shouldn't remove this, right?

Right, we should keep this feature.

changed back

leexgh · 2024-08-20T21:21:48Z

src/component/variantPage/FunctionalPrediction.tsx

                    polyPhenPrediction={data.polyPhenPrediction}
                />
                <Separator />
-                {shouldShowMutationAssessor && (


Same here, we shouldn't remove the mutation assessor checking

yes we should keep it, I was only referring to the import SHOW_MUTATION_ASSESSOR statement which seemed redundant to me but probably I overlooked those changes.

changed back

leexgh · 2024-08-20T21:24:08Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+    IAlphaMissenseProps,
+    {}
+> {
+    @observable showDetails = false;


This is not used anymore

leexgh · 2024-08-20T21:25:02Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+        if (
+            this.props.amClass &&
+            this.props.amClass.length > 0 &&
+            this.props.amClass !== 'N/A'


Is it even possible to have 'N/A'?

And do we need to check both this.props.amClass && this.props.amClass.length > 0?

amClass has a default value of 'na'. The checks are in place to ensure that the value is valid, not an empty string, and not equal to 'N/A', which helps prevent any issues with uninitialized or default values.

@JunheZoooo

const amClass = genomeNexusData?.annotation_summary?.transcriptConsequenceSummary ?.alphaMissense?.pathogenicity || undefined;

Isn't the default value undefined? I couldn't be 'N/A', right?

leexgh · 2024-08-20T21:25:51Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+            this.props.amClass !== 'N/A'
+        ) {
+            alphaMissenseContent = (
+                <span>


Do we need the extra <span>?

leexgh · 2024-08-20T21:26:33Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+                    <p>
+                        {this.props.amClass + ' '}(
+                        {this.props.amPathogenicityScore})
+                    </p>{' '}


What is this last {' '} for? I guess we can delete it, right?

onursumer · 2024-08-21T16:05:52Z

src/component/variantPage/FunctionalPrediction.tsx

-        // Mutation Assessor only available in grch37
-        const shouldShowMutationAssessor =
-            SHOW_MUTATION_ASSESSOR &&
-            this.props.genomeBuild === GENOME_BUILD.GRCh37;


Right, we should keep this feature.

onursumer · 2024-08-21T16:06:18Z

src/component/variantPage/FunctionalPrediction.tsx

 import MutationAssessor from './functionalPrediction/MutationAssesor';
 import Sift from './functionalPrediction/Sift';
 import PolyPhen2 from './functionalPrediction/PolyPhen2';
-import { SHOW_MUTATION_ASSESSOR } from '../../config/configDefaults';


we need this import. sorry for the confusion.

onursumer · 2024-08-21T16:08:06Z

src/component/variantPage/FunctionalPrediction.tsx

                    polyPhenPrediction={data.polyPhenPrediction}
                />
                <Separator />
-                {shouldShowMutationAssessor && (


yes we should keep it, I was only referring to the import SHOW_MUTATION_ASSESSOR statement which seemed redundant to me but probably I overlooked those changes.

leexgh · 2024-08-21T18:34:01Z

src/component/variantPage/functionalPrediction/AlphaMissense.tsx

+        if (
+            this.props.amClass &&
+            this.props.amClass.length > 0 &&
+            this.props.amClass !== 'N/A'


@JunheZoooo

const amClass = genomeNexusData?.annotation_summary?.transcriptConsequenceSummary ?.alphaMissense?.pathogenicity || undefined;

Isn't the default value undefined? I couldn't be 'N/A', right?

leexgh

Looks good to me!

JunheZoooo force-pushed the master branch 5 times, most recently from aaf55c2 to ddcb13e Compare August 19, 2024 20:27

leexgh requested review from leexgh and onursumer August 19, 2024 20:41

onursumer requested changes Aug 19, 2024

View reviewed changes

leexgh requested changes Aug 19, 2024

View reviewed changes

JunheZoooo force-pushed the master branch 2 times, most recently from cb61f5b to 819e9b2 Compare August 20, 2024 02:13

leexgh requested changes Aug 20, 2024

View reviewed changes

JunheZoooo force-pushed the master branch 3 times, most recently from 0669165 to 6238031 Compare August 20, 2024 19:46

Add AlphaMissense in Functional prediction

89c36f8

JunheZoooo force-pushed the master branch from 6238031 to 89c36f8 Compare August 20, 2024 19:56

leexgh requested changes Aug 20, 2024

View reviewed changes

onursumer reviewed Aug 21, 2024

View reviewed changes

leexgh requested changes Aug 21, 2024

View reviewed changes

JunheZoooo force-pushed the master branch 2 times, most recently from 015b1bb to 5442d52 Compare August 21, 2024 19:15

Add AlphaMissense in Functional prediction

ede6196

JunheZoooo force-pushed the master branch from 5442d52 to ede6196 Compare August 21, 2024 19:21

leexgh approved these changes Aug 21, 2024

View reviewed changes

onursumer approved these changes Aug 21, 2024

View reviewed changes

	let alphamissenseContent: JSX.Element;
	let alphaMissenseContent: JSX.Element;

	const AlphamissenseValue: React.FunctionComponent<IAlphamissenseProps> = (
	const AlphaMissenseValue: React.FunctionComponent<IAlphamissenseProps> = (

	export interface IAlphamissenseProps {
	export interface IAlphaMissenseProps {


		const ALPHAMISSENSE_URL = 'https://www.science.org/doi/10.1126/science.adg7492';

		const AlphamissenseInfo: React.FunctionComponent = () => {

Conversation

JunheZoooo commented Aug 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Result Display

(1)

(2)

(3)

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

leexgh Aug 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JunheZoooo Aug 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

leexgh Aug 19, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

leexgh Aug 19, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

JunheZoooo commented Aug 18, 2024 •

edited

Loading

leexgh Aug 20, 2024 •

edited

Loading

JunheZoooo Aug 20, 2024 •

edited

Loading

leexgh Aug 19, 2024 •

edited

Loading

leexgh Aug 19, 2024 •

edited

Loading

JunheZoooo Aug 20, 2024 •

edited

Loading

leexgh Aug 20, 2024 •

edited

Loading