Skip to content

Commit 81a92f0

Browse files
calvinlu3calvinlu3
committed
Add gene info
1 parent 8b690c9 commit 81a92f0

File tree

4 files changed

+93
-38
lines changed

4 files changed

+93
-38
lines changed

‎src/main/webapp/app/pages/annotationPage/SomaticGermlineCancerTypePage.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ import { SomaticGermlineAlterationTiles } from 'app/shared/tiles/tile-utils';
7474
import GeneticTypeTag from 'app/components/tag/GeneticTypeTag';
7575
import VariantOverView from 'app/shared/sections/VariantOverview';
7676
import styles from './SomaticGermlineCancerTypePage.module.scss';
77+
import GeneAdditionalInfoSection from 'app/shared/sections/GeneAdditionalInfoSection';
7778

7879
type MatchParams = {
7980
hugoSymbol: string;
@@ -100,6 +101,7 @@ export class SomaticGermlineCancerTypePage extends React.Component<
100101
private selectedTab: ANNOTATION_PAGE_TAB_KEYS;
101102

102103
@observable showMutationEffect = true;
104+
@observable showAdditionalGeneInfo = false;
103105

104106
constructor(props: SomaticGermlineCancerTypePageProps) {
105107
super(props);
@@ -156,6 +158,11 @@ export class SomaticGermlineCancerTypePage extends React.Component<
156158
this.showMutationEffect = value;
157159
}
158160

161+
@action.bound
162+
toggleAdditionalGeneInfo() {
163+
this.showAdditionalGeneInfo = !this.showAdditionalGeneInfo;
164+
}
165+
159166
@computed
160167
get pageShouldBeRendered() {
161168
return (
@@ -613,6 +620,12 @@ export class SomaticGermlineCancerTypePage extends React.Component<
613620
/>
614621
}
615622
/>
623+
<GeneAdditionalInfoSection
624+
gene={this.store.gene.result}
625+
ensemblGenes={this.store.ensemblGenes.result}
626+
show={this.showAdditionalGeneInfo}
627+
onToggle={this.toggleAdditionalGeneInfo}
628+
/>
616629
</Col>
617630
<Col md={11}>
618631
<Row className={classnames(styles.descriptionContainer)}>

‎src/main/webapp/app/pages/genePage/SomaticGermlineGenePage.tsx‎

Lines changed: 8 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -59,15 +59,13 @@ import {
5959
} from 'app/shared/route/types';
6060
import AlterationTableTabs from 'app/pages/annotationPage/AlterationTableTabs';
6161
import { getGeneTypeSentence } from './GeneInfo';
62-
import GeneAdditionalInfoTable from 'app/pages/genePage/GeneAdditionalInfoTable';
6362
import OncokbLollipopPlot from './OncokbLollipopPlot';
6463
import { getUniqueFdaImplications } from 'app/pages/annotationPage/Utils';
6564
import ShowHideText from 'app/shared/texts/ShowHideText';
6665
import { AnnotationType } from 'app/pages/annotationPage/AnnotationPage';
6766
import SummaryWithRefs from 'app/oncokb-frontend-commons/src/components/SummaryWithRefs';
68-
import { findLast, upperFirst } from 'app/shared/utils/LodashUtils';
67+
import { upperFirst } from 'app/shared/utils/LodashUtils';
6968
import { Helmet } from 'react-helmet-async';
70-
import { NcbiLink } from 'app/shared/links/NcbiLink';
7169
import GeneAliasesDescription from 'app/shared/texts/GeneAliasesDescription';
7270
import { COLOR_GREY, COLOR_SOMATIC } from 'app/config/theme';
7371
import GeneticTypeTabs, {
@@ -83,6 +81,7 @@ import MiniNavBarHeader from 'app/shared/nav/MiniNavBarHeader';
8381
import { GenomicIndicatorTable } from 'app/pages/genePage/GenomicIndicatorTable';
8482
import GeneticTypeTag from 'app/components/tag/GeneticTypeTag';
8583
import { SomaticGermlineGeneInfoTiles } from 'app/shared/tiles/tile-utils';
84+
import GeneAdditionalInfoSection from 'app/shared/sections/GeneAdditionalInfoSection';
8685

8786
interface MatchParams {
8887
hugoSymbol: string;
@@ -588,41 +587,12 @@ export default class SomaticGermlineGenePage extends React.Component<
588587
this.store.gene.result.geneType
589588
)}
590589
</h5>
591-
<div className={'d-flex'}>
592-
<NcbiLink
593-
entrezGeneId={
594-
this.store.gene.result.entrezGeneId
595-
}
596-
/>
597-
<span className={'mx-2'}>|</span>
598-
<ShowHideText
599-
show={this.showAdditionalGeneInfo}
600-
title={'additional gene information'}
601-
content={''}
602-
onClick={this.toggleAdditionalGeneInfo}
603-
/>
604-
</div>
605-
{this.showAdditionalGeneInfo && (
606-
<Row className={'mt-2'}>
607-
<Col lg={6} md={8} xs={12}>
608-
<GeneAdditionalInfoTable
609-
gene={this.store.gene.result}
610-
grch37ensemblGene={findLast(
611-
this.store.ensemblGenes.result,
612-
item =>
613-
item.referenceGenome ===
614-
REFERENCE_GENOME.GRCh37
615-
)}
616-
grch38ensemblGene={findLast(
617-
this.store.ensemblGenes.result,
618-
item =>
619-
item.referenceGenome ===
620-
REFERENCE_GENOME.GRCh38
621-
)}
622-
/>
623-
</Col>
624-
</Row>
625-
)}
590+
<GeneAdditionalInfoSection
591+
gene={this.store.gene.result}
592+
ensemblGenes={this.store.ensemblGenes.result}
593+
show={this.showAdditionalGeneInfo}
594+
onToggle={this.toggleAdditionalGeneInfo}
595+
/>
626596
{this.store.geneSummary.result && (
627597
<div className="mt-2">
628598
<SummaryWithRefs

‎src/main/webapp/app/pages/somaticGermlineAlterationPage/SomaticGermlineAlterationPage.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ import { RouterStore } from 'mobx-react-router';
7676
import { SomaticGermlineAlterationTiles } from 'app/shared/tiles/tile-utils';
7777
import GeneticTypeTag from 'app/components/tag/GeneticTypeTag';
7878
import VariantOverView from 'app/shared/sections/VariantOverview';
79+
import GeneAdditionalInfoSection from 'app/shared/sections/GeneAdditionalInfoSection';
7980

8081
type MatchParams = {
8182
hugoSymbol: string;
@@ -101,6 +102,7 @@ export class SomaticGermlineAlterationPage extends React.Component<
101102
private selectedTab: ANNOTATION_PAGE_TAB_KEYS;
102103

103104
@observable showMutationEffect = true;
105+
@observable showAdditionalGeneInfo = false;
104106

105107
constructor(props: SomaticGermlineAlterationPageProps) {
106108
super(props);
@@ -146,6 +148,11 @@ export class SomaticGermlineAlterationPage extends React.Component<
146148
this.showMutationEffect = value;
147149
}
148150

151+
@action.bound
152+
toggleAdditionalGeneInfo() {
153+
this.showAdditionalGeneInfo = !this.showAdditionalGeneInfo;
154+
}
155+
149156
@computed
150157
get pageShouldBeRendered() {
151158
return (
@@ -564,6 +571,12 @@ export class SomaticGermlineAlterationPage extends React.Component<
564571
}
565572
isGermline={this.store.germline}
566573
/>
574+
<GeneAdditionalInfoSection
575+
gene={this.store.gene.result}
576+
ensemblGenes={this.store.ensemblGenes.result}
577+
show={this.showAdditionalGeneInfo}
578+
onToggle={this.toggleAdditionalGeneInfo}
579+
/>
567580
</Col>
568581
<Col md={11}>
569582
<Row className={classnames(styles.descriptionContainer)}>

‎src/main/webapp/app/shared/sections/GeneAdditionalInfoSection.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
import { Row, Col } from 'react-bootstrap';
3+
import { Gene, EnsemblGene } from 'app/shared/api/generated/OncoKbPrivateAPI';
4+
import { NcbiLink } from 'app/shared/links/NcbiLink';
5+
import ShowHideText from 'app/shared/texts/ShowHideText';
6+
import GeneAdditionalInfoTable from 'app/pages/genePage/GeneAdditionalInfoTable';
7+
import { REFERENCE_GENOME } from 'app/config/constants';
8+
import { findLast } from 'app/shared/utils/LodashUtils';
9+
10+
type GeneAdditionalInfoSectionProps = {
11+
gene: Gene;
12+
ensemblGenes: EnsemblGene[];
13+
show: boolean;
14+
onToggle: () => void;
15+
};
16+
17+
const GeneAdditionalInfoSection: React.FunctionComponent<GeneAdditionalInfoSectionProps> = ({
18+
gene,
19+
ensemblGenes,
20+
show,
21+
onToggle,
22+
}) => {
23+
const grch37ensemblGene = findLast(
24+
ensemblGenes,
25+
item => item.referenceGenome === REFERENCE_GENOME.GRCh37
26+
);
27+
const grch38ensemblGene = findLast(
28+
ensemblGenes,
29+
item => item.referenceGenome === REFERENCE_GENOME.GRCh38
30+
);
31+
32+
return (
33+
<>
34+
<div className={'d-flex'}>
35+
<NcbiLink entrezGeneId={gene.entrezGeneId} />
36+
<span className={'mx-2'}>|</span>
37+
<ShowHideText
38+
show={show}
39+
title={'additional gene information'}
40+
content={''}
41+
onClick={onToggle}
42+
/>
43+
</div>
44+
{show && (
45+
<Row className={'mt-2'}>
46+
<Col lg={6} md={8} xs={12}>
47+
<GeneAdditionalInfoTable
48+
gene={gene}
49+
grch37ensemblGene={grch37ensemblGene}
50+
grch38ensemblGene={grch38ensemblGene}
51+
/>
52+
</Col>
53+
</Row>
54+
)}
55+
</>
56+
);
57+
};
58+
59+
export default GeneAdditionalInfoSection;

0 commit comments

Comments
 (0)