Skip to content

Commit eac85ba

Browse files
author
Hongxin Zhang
committed
Properly handle the rendering when queried gene does not exist
1 parent 1379d95 commit eac85ba

File tree

6 files changed

+285
-241
lines changed

6 files changed

+285
-241
lines changed

‎src/main/webapp/app/config/constants.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,8 @@ export const ONCOGENICITY_CLASS_NAMES: { [oncogenic: string]: string } = {
121121
[ONCOGENICITY.LIKELY_ONCOGENIC]: 'oncogenic',
122122
[ONCOGENICITY.ONCOGENIC]: 'oncogenic'
123123
};
124-
124+
export const DEFAULT_MESSAGE_UNKNOWN_GENE =
125+
'We do not have any information for this gene';
125126
export enum EVIDENCE_TYPES {
126127
GENE_SUMMARY = 'GENE_SUMMARY',
127128
GENE_BACKGROUND = 'GENE_BACKGROUND',

‎src/main/webapp/app/pages/ActionableGenesPage.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -333,7 +333,9 @@ export default class ActionableGenesPage extends React.Component<
333333
? this.filteredTreatments
334334
: this.allTreatments;
335335
treatmentSource.map(treatment => {
336-
levelNumbers[treatment.level].push(treatment.hugoSymbol);
336+
if (levelNumbers[treatment.level]) {
337+
levelNumbers[treatment.level].push(treatment.hugoSymbol);
338+
}
337339
});
338340
return _.reduce(
339341
levelNumbers,
@@ -632,7 +634,9 @@ export default class ActionableGenesPage extends React.Component<
632634
loading={this.relevantTumorTypes.isPending}
633635
columns={this.columns}
634636
pageSize={
635-
this.filteredTreatments.length === 0 ? 1 : this.filteredTreatments.length
637+
this.filteredTreatments.length === 0
638+
? 1
639+
: this.filteredTreatments.length
636640
}
637641
style={{
638642
height: LG_TABLE_FIXED_HEIGHT

‎src/main/webapp/app/pages/alterationPage/AlterationPage.tsx

+145-124
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import Select from 'react-select';
1212
import LoadingIndicator from 'app/components/loadingIndicator/LoadingIndicator';
1313
import autobind from 'autobind-decorator';
1414
import {
15+
DEFAULT_GENE,
1516
DEFAULT_MARGIN_BOTTOM_LG,
16-
TABLE_COLUMN_KEY,
17-
THRESHOLD_ALTERATION_PAGE_TABLE_FIXED_HEIGHT
17+
TABLE_COLUMN_KEY
1818
} from 'app/config/constants';
1919
import OncoKBTable, {
2020
SearchColumn
@@ -31,10 +31,11 @@ import { RouterStore } from 'mobx-react-router';
3131
import { getHighestLevelStrings } from '../genePage/GenePage';
3232
import styles from './AlterationPage.module.scss';
3333
import classnames from 'classnames';
34-
import SmallPageContainer from 'app/components/SmallPageContainer';
3534
import InfoIcon from 'app/shared/icons/InfoIcon';
3635
import DocumentTitle from 'react-document-title';
3736
import { MutationEffectResp } from 'app/shared/api/generated/OncoKbPrivateAPI';
37+
import { Else, If, Then } from 'react-if';
38+
import { UnknownGeneAlert } from 'app/shared/alert/UnknownGeneAlert';
3839

3940
enum SummaryKey {
4041
GENE_SUMMARY = 'geneSummary',
@@ -286,130 +287,150 @@ export default class GenePage extends React.Component<
286287
render() {
287288
return (
288289
<DocumentTitle title={this.documentTitle}>
289-
<>
290-
<h2 className={'d-flex align-items-center'}>
291-
<GenePageLink
292-
hugoSymbol={this.store.hugoSymbol}
293-
highlightContent={false}
294-
/>
295-
<span className={'ml-2'}>{` ${this.store.alterationQuery}`}</span>
296-
</h2>
297-
<AlterationInfo
298-
oncogenicity={this.store.annotationResult.result.oncogenic}
299-
mutationEffect={this.store.annotationResult.result.mutationEffect}
300-
isVus={this.store.annotationResult.result.vus}
301-
highestSensitiveLevel={
302-
this.store.annotationResult.result.highestSensitiveLevel
303-
}
304-
highestResistanceLevel={
305-
this.store.annotationResult.result.highestResistanceLevel
306-
}
307-
/>
308-
<Row>
309-
<Col>
310-
{this.alterationSummaries.map(summary => {
311-
return (
312-
<div className={DEFAULT_MARGIN_BOTTOM_LG}>
313-
{summary.content}
314-
</div>
315-
);
316-
})}
317-
</Col>
318-
</Row>
319-
<Row>
320-
<Col>
321-
<div className="d-flex align-items-center">
322-
<span
323-
className={classnames(
324-
DEFAULT_MARGIN_BOTTOM_LG,
325-
styles.headerTumorTypeSelection,
326-
'mr-2'
327-
)}
328-
>
329-
<Select
330-
styles={{
331-
control: (base, state) => ({
332-
...base,
333-
height: '30px',
334-
'min-height': '30px'
335-
}),
336-
dropdownIndicator: base => ({
337-
...base,
338-
padding: 4
339-
}),
340-
clearIndicator: base => ({
341-
...base,
342-
padding: 4
343-
}),
344-
valueContainer: base => ({
345-
...base,
346-
padding: '0px 6px'
347-
}),
348-
input: base => ({
349-
...base,
350-
margin: 0,
351-
padding: 0
352-
})
353-
}}
354-
value={this.tumorTypeSelectValue}
355-
placeholder="Select a tumor type"
356-
options={this.store.allTumorTypesOptions.result}
357-
formatGroupLabel={this.formatGroupLabel}
358-
isClearable={true}
359-
onChange={(selectedOption: any) =>
360-
this.updateTumorTypeQuery(selectedOption)
361-
}
290+
<If condition={this.store.gene.isComplete}>
291+
<Then>
292+
{this.store.gene.isError ||
293+
this.store.gene.result === DEFAULT_GENE ? (
294+
<UnknownGeneAlert />
295+
) : (
296+
<>
297+
<h2 className={'d-flex align-items-center'}>
298+
<GenePageLink
299+
hugoSymbol={this.store.hugoSymbol}
300+
highlightContent={false}
362301
/>
363-
</span>
364-
<InfoIcon
365-
overlay="For tumor type specific information, please select a tumor type from the dropdown"
366-
placement="top"
367-
style={{ fontSize: '0.6rem' }}
368-
/>
369-
</div>
370-
</Col>
371-
</Row>
372-
{this.store.tumorTypeQuery ? (
373-
<Row>
374-
<Col>
375-
{this.tumorTypeSummaries.map(summary => {
376-
return (
377-
<div className={DEFAULT_MARGIN_BOTTOM_LG}>
378-
{summary.content}
379-
</div>
380-
);
381-
})}
382-
</Col>
383-
</Row>
384-
) : null}
385-
{this.store.therapeuticImplications.length > 0 ? (
386-
<Row>
387-
<Col>
388-
<OncoKBTable
389-
data={this.store.therapeuticImplications}
390-
columns={this.therapeuticTableColumns}
391-
pageSize={
392-
this.store.therapeuticImplications.length === 0
393-
? 1
394-
: this.store.therapeuticImplications.length
302+
<span
303+
className={'ml-2'}
304+
>{` ${this.store.alterationQuery}`}</span>
305+
</h2>
306+
<AlterationInfo
307+
oncogenicity={this.store.annotationResult.result.oncogenic}
308+
mutationEffect={
309+
this.store.annotationResult.result.mutationEffect
310+
}
311+
isVus={this.store.annotationResult.result.vus}
312+
highestSensitiveLevel={
313+
this.store.annotationResult.result.highestSensitiveLevel
314+
}
315+
highestResistanceLevel={
316+
this.store.annotationResult.result.highestResistanceLevel
395317
}
396-
loading={this.store.annotationResult.isPending}
397-
disableSearch={true}
398-
defaultSorted={[
399-
{
400-
id: TABLE_COLUMN_KEY.LEVEL,
401-
desc: false
402-
},
403-
{
404-
id: TABLE_COLUMN_KEY.ALTERATION,
405-
desc: false
406-
}
407-
]}
408318
/>
409-
</Col>
410-
</Row>
411-
) : null}
412-
</>
319+
<Row>
320+
<Col>
321+
{this.alterationSummaries.map(summary => {
322+
return (
323+
<div className={DEFAULT_MARGIN_BOTTOM_LG}>
324+
{summary.content}
325+
</div>
326+
);
327+
})}
328+
</Col>
329+
</Row>
330+
<Row>
331+
<Col>
332+
<div className="d-flex align-items-center">
333+
<span
334+
className={classnames(
335+
DEFAULT_MARGIN_BOTTOM_LG,
336+
styles.headerTumorTypeSelection,
337+
'mr-2'
338+
)}
339+
>
340+
<Select
341+
styles={{
342+
control: (base, state) => ({
343+
...base,
344+
height: '30px',
345+
'min-height': '30px'
346+
}),
347+
dropdownIndicator: base => ({
348+
...base,
349+
padding: 4
350+
}),
351+
clearIndicator: base => ({
352+
...base,
353+
padding: 4
354+
}),
355+
valueContainer: base => ({
356+
...base,
357+
padding: '0px 6px'
358+
}),
359+
input: base => ({
360+
...base,
361+
margin: 0,
362+
padding: 0
363+
})
364+
}}
365+
value={this.tumorTypeSelectValue}
366+
placeholder="Select a tumor type"
367+
options={this.store.allTumorTypesOptions.result}
368+
formatGroupLabel={this.formatGroupLabel}
369+
isClearable={true}
370+
onChange={(selectedOption: any) =>
371+
this.updateTumorTypeQuery(selectedOption)
372+
}
373+
/>
374+
</span>
375+
<InfoIcon
376+
overlay="For tumor type specific information, please select a tumor type from the dropdown"
377+
placement="top"
378+
style={{ fontSize: '0.6rem' }}
379+
/>
380+
</div>
381+
</Col>
382+
</Row>
383+
{this.store.tumorTypeQuery ? (
384+
<Row>
385+
<Col>
386+
{this.tumorTypeSummaries.map(summary => {
387+
return (
388+
<div className={DEFAULT_MARGIN_BOTTOM_LG}>
389+
{summary.content}
390+
</div>
391+
);
392+
})}
393+
</Col>
394+
</Row>
395+
) : null}
396+
{this.store.therapeuticImplications.length > 0 ? (
397+
<Row>
398+
<Col>
399+
<OncoKBTable
400+
data={this.store.therapeuticImplications}
401+
columns={this.therapeuticTableColumns}
402+
pageSize={
403+
this.store.therapeuticImplications.length === 0
404+
? 1
405+
: this.store.therapeuticImplications.length
406+
}
407+
loading={this.store.annotationResult.isPending}
408+
disableSearch={true}
409+
defaultSorted={[
410+
{
411+
id: TABLE_COLUMN_KEY.LEVEL,
412+
desc: false
413+
},
414+
{
415+
id: TABLE_COLUMN_KEY.ALTERATION,
416+
desc: false
417+
}
418+
]}
419+
/>
420+
</Col>
421+
</Row>
422+
) : null}
423+
</>
424+
)}
425+
</Then>
426+
<Else>
427+
<LoadingIndicator
428+
size={'big'}
429+
center={true}
430+
isLoading={this.store.gene.isPending}
431+
/>
432+
</Else>
433+
</If>
413434
</DocumentTitle>
414435
);
415436
}

0 commit comments

Comments
 (0)