|
| 1 | +import styles from 'app/pages/genePage/GenePage.module.scss'; |
| 2 | +import InfoTile from 'app/components/infoTile/InfoTile'; |
| 3 | +import LoETile from 'app/components/infoTile/LoETile'; |
| 4 | +import React from 'react'; |
| 5 | +import { GeneNumber } from 'app/shared/api/generated/OncoKbPrivateAPI'; |
| 6 | +import { |
| 7 | + Oncogenicity, |
| 8 | + Pathogenicity, |
| 9 | +} from 'app/components/oncokbMutationMapper/OncokbMutationMapper'; |
| 10 | +import classnames from 'classnames'; |
| 11 | + |
| 12 | +export interface IGeneInfoTil { |
| 13 | + isGermline: boolean; |
| 14 | + geneNumber: GeneNumber; |
| 15 | + oncogenicities: Oncogenicity[]; |
| 16 | + pathogenicities: Pathogenicity[]; |
| 17 | +} |
| 18 | + |
| 19 | +const GeneInfoTile = (props: IGeneInfoTil) => { |
| 20 | + let count = 1; |
| 21 | + const hasGeneticRiskInfo = |
| 22 | + props.geneNumber.penetrance || props.geneNumber.inheritanceMechanism; |
| 23 | + if (hasGeneticRiskInfo) count++; |
| 24 | + if ( |
| 25 | + props.geneNumber.highestSensitiveLevel || |
| 26 | + props.geneNumber.highestResistanceLevel || |
| 27 | + props.geneNumber.highestDiagnosticImplicationLevel || |
| 28 | + props.geneNumber.highestPrognosticImplicationLevel || |
| 29 | + props.geneNumber.highestFdaLevel |
| 30 | + ) { |
| 31 | + count++; |
| 32 | + } |
| 33 | + |
| 34 | + const tileStyle = count === 2 ? styles.evenInfoTile : styles.autoInfoTile; |
| 35 | + |
| 36 | + return ( |
| 37 | + <div className={styles.infoTileContainer}> |
| 38 | + {hasGeneticRiskInfo && ( |
| 39 | + <InfoTile |
| 40 | + className={classnames(styles.infoTile, tileStyle)} |
| 41 | + title={'Genetic Risk'} |
| 42 | + categories={[ |
| 43 | + { |
| 44 | + title: 'Penetrance', |
| 45 | + content: props.geneNumber.penetrance, |
| 46 | + }, |
| 47 | + { |
| 48 | + title: 'Mechanism of Inheritance', |
| 49 | + content: props.geneNumber.inheritanceMechanism, |
| 50 | + }, |
| 51 | + ]} |
| 52 | + /> |
| 53 | + )} |
| 54 | + <LoETile |
| 55 | + className={classnames(styles.infoTile, tileStyle)} |
| 56 | + highestSensitiveLevel={props.geneNumber.highestSensitiveLevel} |
| 57 | + highestResistanceLevel={props.geneNumber.highestResistanceLevel} |
| 58 | + highestDiagnosticImplicationLevel={ |
| 59 | + props.geneNumber.highestDiagnosticImplicationLevel |
| 60 | + } |
| 61 | + highestPrognosticImplicationLevel={ |
| 62 | + props.geneNumber.highestPrognosticImplicationLevel |
| 63 | + } |
| 64 | + highestFdaLevel={props.geneNumber.highestFdaLevel} |
| 65 | + /> |
| 66 | + <InfoTile |
| 67 | + className={classnames(styles.infoTile, tileStyle)} |
| 68 | + title={`Annotated ${props.isGermline ? 'variants' : 'alterations'}`} |
| 69 | + categories={ |
| 70 | + props.isGermline |
| 71 | + ? props.pathogenicities.map(pathogenicity => { |
| 72 | + return { |
| 73 | + title: pathogenicity.pathogenicity, |
| 74 | + content: pathogenicity.counts.toString(), |
| 75 | + }; |
| 76 | + }) |
| 77 | + : props.oncogenicities.map(oncogenicity => { |
| 78 | + return { |
| 79 | + title: oncogenicity.oncogenicity, |
| 80 | + content: oncogenicity.counts.toString(), |
| 81 | + }; |
| 82 | + }) |
| 83 | + } |
| 84 | + /> |
| 85 | + </div> |
| 86 | + ); |
| 87 | +}; |
| 88 | + |
| 89 | +export default GeneInfoTile; |
0 commit comments