-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
35 changed files
with
731 additions
and
230 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
src/main/webapp/app/oncokb-commons/components/texts/GeneAliasesDescription.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import React from 'react'; | ||
|
|
||
| const GeneAliasesDescription: React.FunctionComponent<{ | ||
| geneAliases: string[]; | ||
| className?: string; | ||
| style?: React.CSSProperties; | ||
| }> = props => { | ||
| return <span className={props.className} style={props.style}>{`Also known as ${props.geneAliases.join(', ')}`}</span>; | ||
| }; | ||
| export default GeneAliasesDescription; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
141 changes: 141 additions & 0 deletions
141
src/main/webapp/app/pages/curation/geneticTypeTabs/GeneticTypeTabs.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| import React, { useEffect, useMemo, useState } from 'react'; | ||
| import * as styles from './genetic-type-tabs.module.scss'; | ||
| import classnames from 'classnames'; | ||
| import { componentInject } from 'app/shared/util/typed-inject'; | ||
| import { observer } from 'mobx-react'; | ||
| import { IRootStore } from 'app/stores'; | ||
| import { IGene } from 'app/shared/model/gene.model'; | ||
| import DefaultBadge from 'app/shared/badge/DefaultBadge'; | ||
| import { createGeneIfDoesNotExist, geneMetaReviewHasUuids, getFirebaseMetaGenePath } from 'app/shared/util/firebase/firebase-utils'; | ||
| import { GERMLINE_PATH, SOMATIC_GERMLINE_SETTING_KEY, SOMATIC_PATH } from 'app/config/constants/constants'; | ||
| import { notifyError } from 'app/oncokb-commons/components/util/NotificationUtils'; | ||
| import { onValue, ref, Unsubscribe } from 'firebase/database'; | ||
| import { useLocation } from 'react-router-dom'; | ||
| import { MetaReview } from 'app/shared/model/firebase/firebase.model'; | ||
|
|
||
| export enum GENETIC_TYPE { | ||
| SOMATIC = 'somatic', | ||
| GERMLINE = 'germline', | ||
| } | ||
|
|
||
| export interface IGeneticTypeTabs extends StoreProps { | ||
| geneEntity: IGene; | ||
| geneticType: GENETIC_TYPE; | ||
| } | ||
|
|
||
| const GeneticTypeTabs = ({ geneEntity, geneticType, firebaseDb, createGene }: IGeneticTypeTabs) => { | ||
| const { pathname } = useLocation(); | ||
| const [selected, setSelected] = useState<GENETIC_TYPE>(geneticType || GENETIC_TYPE.SOMATIC); | ||
| const [somaticMetaReview, setSomaticMetaReview] = useState<MetaReview>(); | ||
| const [germlineMetaReview, setGermlineMetaReview] = useState<MetaReview>(); | ||
|
|
||
| const currentVariantType = selected === GENETIC_TYPE.SOMATIC ? SOMATIC_PATH : GERMLINE_PATH; | ||
| const newVariantType = selected === GENETIC_TYPE.SOMATIC ? GERMLINE_PATH : SOMATIC_PATH; | ||
|
|
||
| useEffect(() => { | ||
| if (!firebaseDb) { | ||
| return; | ||
| } | ||
| const callbacks = [] as Unsubscribe[]; | ||
| callbacks.push( | ||
| onValue(ref(firebaseDb, `${getFirebaseMetaGenePath(false, geneEntity.hugoSymbol)}/review`), snapshot => { | ||
| setSomaticMetaReview(snapshot.val()); | ||
| }), | ||
| ); | ||
| callbacks.push( | ||
| onValue(ref(firebaseDb, `${getFirebaseMetaGenePath(true, geneEntity.hugoSymbol)}/review`), snapshot => { | ||
| setGermlineMetaReview(snapshot.val()); | ||
| }), | ||
| ); | ||
| return () => callbacks.forEach(callback => callback?.()); | ||
| }, []); | ||
|
|
||
| const geneReleaseStatus = useMemo(() => { | ||
| const somaticStatus = !!geneEntity?.flags?.find(flag => flag.flag === 'ONCOKB_SOMATIC' && flag.name === 'OncoKB Somatic'); | ||
| const germlineStatus = !!geneEntity?.flags?.find(flag => flag.flag === 'ONCOKB_GERMLINE' && flag.name === 'OncoKB Germline'); | ||
| return { | ||
| [GENETIC_TYPE.SOMATIC]: somaticStatus, | ||
| [GENETIC_TYPE.GERMLINE]: germlineStatus, | ||
| }; | ||
| }, [geneEntity]); | ||
|
|
||
| const getGeneReleaseStatusBadge = (type: GENETIC_TYPE) => { | ||
| const badges: JSX.Element[] = []; | ||
| const sharedClassname = 'ms-2'; | ||
| const sharedStyle: React.CSSProperties = { fontSize: '0.8rem' }; | ||
|
|
||
| const needsReview = { | ||
| [GENETIC_TYPE.SOMATIC]: geneMetaReviewHasUuids(somaticMetaReview), | ||
| [GENETIC_TYPE.GERMLINE]: geneMetaReviewHasUuids(germlineMetaReview), | ||
| }; | ||
| if (needsReview[type]) { | ||
| badges.push( | ||
| <DefaultBadge square color={'warning'} className={sharedClassname} style={sharedStyle}> | ||
| Needs Review | ||
| </DefaultBadge>, | ||
| ); | ||
| } | ||
|
|
||
| const isGeneReleased = geneReleaseStatus[type]; | ||
| if (isGeneReleased) { | ||
| // Todo: In tooltip show when gene was released | ||
| badges.push( | ||
| <DefaultBadge square color="success" className={sharedClassname} style={sharedStyle}> | ||
| Released | ||
| </DefaultBadge>, | ||
| ); | ||
| } else { | ||
| badges.push( | ||
| <DefaultBadge square color={'warning'} className={sharedClassname} style={sharedStyle}> | ||
| Pending Release | ||
| </DefaultBadge>, | ||
| ); | ||
| } | ||
|
|
||
| return <>{badges.map(badge => badge)}</>; | ||
| }; | ||
|
|
||
| async function handleToggle() { | ||
| if (!firebaseDb) { | ||
| return; | ||
| } | ||
| if (geneEntity.hugoSymbol && createGene) { | ||
| // On curation page | ||
| try { | ||
| await createGeneIfDoesNotExist(geneEntity.hugoSymbol, newVariantType === 'germline', firebaseDb, createGene); | ||
| } catch (error) { | ||
| notifyError(error); | ||
| } | ||
| } | ||
| localStorage.setItem(SOMATIC_GERMLINE_SETTING_KEY, newVariantType); | ||
| window.location.href = pathname.replace(currentVariantType, newVariantType); | ||
| } | ||
|
|
||
| return ( | ||
| <div className={styles.tabs}> | ||
| {[GENETIC_TYPE.SOMATIC, GENETIC_TYPE.GERMLINE].map((geneOrigin, idx) => ( | ||
| <div | ||
| key={idx} | ||
| style={{ width: '50%' }} | ||
| className={ | ||
| selected === geneOrigin ? classnames(styles.tab, styles.selectedTab, 'fw-bold') : classnames(styles.tab, styles.unselectedTab) | ||
| } | ||
| onClick={handleToggle} | ||
| > | ||
| {geneOrigin.substring(0, 1).toUpperCase()} | ||
| {geneOrigin.toLowerCase().slice(1)} | ||
| {getGeneReleaseStatusBadge(geneOrigin)} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const mapStoreToProps = ({ firebaseAppStore, firebaseGeneService }: IRootStore) => ({ | ||
| firebaseDb: firebaseAppStore.firebaseDb, | ||
| createGene: firebaseGeneService.createGene, | ||
| }); | ||
|
|
||
| type StoreProps = Partial<ReturnType<typeof mapStoreToProps>>; | ||
|
|
||
| export default componentInject(mapStoreToProps)(observer(GeneticTypeTabs)); |
Oops, something went wrong.