Skip to content

Commit

Permalink
Finalize precision oncology therapies page (#1025)
Browse files Browse the repository at this point in the history 
- Use compact version of the filters(Option 1)
- move drug classification column as first column
- use filtered px tx when calculating drug classification and detection method
- use small button for clear filter and download data
  • Loading branch information
@zhx828
zhx828 authored Sep 29, 2023
1 parent 6129810 commit f5d3e48
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 166 deletions.
Binary file modified ...__baseline_snapshots__/Precision Oncology Therapies Page without Login-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
196 changes: 48 additions & 148 deletions src/main/webapp/app/pages/precisionOncologyTherapiesPage/precisionOncologyTherapiesPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,21 @@ import OncoKBTable, {
} from 'app/components/oncokbTable/OncoKBTable';
import poTxs from 'content/files/precisionOncologyTx/presitionOncologyTx.json';
import poTxsExcel from 'content/files/precisionOncologyTx/Classification_of_FDA-approved_precision_oncology_therapies.xlsx';
import { COMPONENT_PADDING, LG_TABLE_FIXED_HEIGHT } from 'app/config/constants';
import { filterByKeyword, toggleStrList } from 'app/shared/utils/Utils';
import { Accordion, Button, Col, OverlayTrigger, Row } from 'react-bootstrap';
import {
COMPONENT_PADDING,
LG_TABLE_FIXED_HEIGHT,
ONCOKB_TM,
} from 'app/config/constants';
import { filterByKeyword } from 'app/shared/utils/Utils';
import { Button, Col, Row } from 'react-bootstrap';
import classnames from 'classnames';
import Select from 'react-select';
import _ from 'lodash';
import { Input } from 'reactstrap';
import { DownloadButton } from 'app/components/downloadButton/DownloadButton';
import './styles.scss';
import Tooltip from 'rc-tooltip';
import WithSeparator from 'react-with-separator';
import InfoIcon from 'app/shared/icons/InfoIcon';
import { COLOR_GREY, COLOR_LIGHT_GREY } from 'app/config/theme';
import ShowHideText from 'app/shared/texts/ShowHideText';
import { CitationLink } from 'app/shared/utils/UrlUtils';

type PrecisionOncologyTherapy = {
id: number;
Expand Down Expand Up @@ -70,10 +70,6 @@ const footnotes = {
'Pembrolizumab in combination with lenvatinib is FDA-approved approved for endometrial cancer that is pMMR',
'*':
'The exact year of the drug’s first FDA-approval could not be determined due to absent or ambiguous data on FDA.gov website',
addl1:
'NGS, Next-generation sequencing; ER, Estrogen Receptor; HR, Hormone Receptor; MSI-H, Microsatellite instability-high; HRR, Homologous Recombination Repair; TMB-H, Tumor mutational burden-high; dMMR, mismatch repair deficient; pMMR, mismatch repair proficient; PMSA, prostate-specific membrane antigen',
addl2:
'First-in class = 33; Mechanistically-distinct = 7; Follow-on = 19; Resistance = 10',
};

const DefinitionTooltip: React.FunctionComponent<{
Expand Down Expand Up @@ -161,12 +157,6 @@ const PrecisionOncologyTherapiesPage: React.FunctionComponent<{}> = props => {
);
}, [filteredPoTxs]);

const onToggleDrugClassificationSelection = (classification: string) => {
setSelectedDrugClassifications([
...toggleStrList(classification, selectedDrugClassifications),
]);
};

const clearFilters = () => {
setBiomarkerSearch('');
setTherapySearch('');
Expand All @@ -176,36 +166,15 @@ const PrecisionOncologyTherapiesPage: React.FunctionComponent<{}> = props => {

const columns: SearchColumn<PrecisionOncologyTherapy>[] = [
{
accessor: 'year',
accessor: 'drugClassification',
Header: (
<span>
Year of drug’s first FDA-approval
<DefinitionTooltip footnoteKey={'a'} />
Drug classification
<DefinitionTooltip footnoteKey={'d'} />
</span>
),
Cell(tableProps: { original: PrecisionOncologyTherapy }) {
if (tableProps.original.year.endsWith('*')) {
return (
<span>
{tableProps.original.year.slice(
0,
tableProps.original.year.length - 1
)}
<DefinitionTooltip footnoteKey={'*'} />
</span>
);
} else {
return tableProps.original.year;
}
},
sortMethod(
a: PrecisionOncologyTherapy,
b: PrecisionOncologyTherapy
): number {
return a.id - b.id;
},
onFilter: (data: PrecisionOncologyTherapy, keyword) =>
filterByKeyword(data.year, keyword),
filterByKeyword(data.drugClassification, keyword),
},
{
accessor: 'tx',
Expand Down Expand Up @@ -236,15 +205,36 @@ const PrecisionOncologyTherapiesPage: React.FunctionComponent<{}> = props => {
filterByKeyword(data.biomarkerDetection, keyword),
},
{
accessor: 'drugClassification',
accessor: 'year',
Header: (
<span>
Drug classification
<DefinitionTooltip footnoteKey={'d'} />
Year of drug’s first FDA-approval
<DefinitionTooltip footnoteKey={'a'} />
</span>
),
Cell(tableProps: { original: PrecisionOncologyTherapy }) {
if (tableProps.original.year.endsWith('*')) {
return (
<span>
{tableProps.original.year.slice(
0,
tableProps.original.year.length - 1
)}
<DefinitionTooltip footnoteKey={'*'} />
</span>
);
} else {
return tableProps.original.year;
}
},
sortMethod(
a: PrecisionOncologyTherapy,
b: PrecisionOncologyTherapy
): number {
return a.id - b.id;
},
onFilter: (data: PrecisionOncologyTherapy, keyword) =>
filterByKeyword(data.drugClassification, keyword),
filterByKeyword(data.year, keyword),
},
];

Expand All @@ -254,14 +244,12 @@ const PrecisionOncologyTherapiesPage: React.FunctionComponent<{}> = props => {
<Col>
<h2 className={'mb-3'}>FDA-approved Precision Oncology Therapies</h2>
<div>
Precision oncology therapies (refer to definition below) approved by
the US Food and Drug Administration (FDA) beginning with the 1998
approval of trastuzumab. Also listed is the year each drug was first
FDA approved, the FDA-recognized biomarker(s), the method of
biomarker detection, and classification of each drug as
first-in-class, mechanistically-distinct, follow-on, or resistance
(refer to definitions below). For additional information, please
refer to XXX [will cite publication here]
The following US Food and Drug Administration (FDA)-approved
therapies are considered precision oncology therapies by {ONCOKB_TM}{' '}
and are further classified as either first-in-class,
mechanistically-distinct, follow-on, or resistance based on
Suehnholz et al., Cancer Discovery 2023 (also refer to definitions
below).
<ShowHideText
className={'my-2'}
show={showDefinition}
Expand Down Expand Up @@ -306,110 +294,21 @@ const PrecisionOncologyTherapiesPage: React.FunctionComponent<{}> = props => {
</div>
</Col>
</Row>
<h5>Option 1</h5>
<Row
style={{ paddingLeft: '0.5rem', paddingRight: '0.5rem' }}
className={'mb-2'}
>
<Col className={classnames(...COMPONENT_PADDING)} lg={4} md={6} xs={12}>
<Input
style={{ height: '100%' }}
placeholder={'Search Therapy'}
value={therapySearch}
onChange={event => setTherapySearch(event.target.value)}
/>
</Col>
<Col className={classnames(...COMPONENT_PADDING)} lg={4} md={6} xs={12}>
<Input
style={{ height: '100%' }}
placeholder={'Search Biomarker'}
value={biomarkerSearch}
onChange={event => setBiomarkerSearch(event.target.value)}
/>
</Col>
<Col className={classnames(...COMPONENT_PADDING)} lg={4} md={6} xs={12}>
<Select
placeholder={'Select Detection Method'}
options={sortAndUniqByValue(poTxs, 'biomarkerDetection')}
isClearable={true}
value={selectedDetectionMethod}
onChange={(selectedOption: any) =>
setSelectedDetectionMethod(selectedOption)
}
/>
</Col>
</Row>
<Row>
<Col className={'d-flex justify-content-between align-items-center'}>
<div>
<span className={'mr-2'}>Drug Classifications:</span>
{[
DRUG_CLASSIFICATION.FIRST_IN_CLASS,
DRUG_CLASSIFICATION.MECHANISTICALLY_DISTINCT,
DRUG_CLASSIFICATION.FOLLOW_ON,
DRUG_CLASSIFICATION.RESISTANCE,
].map(classification => (
<Button
key={classification}
variant={'outline-secondary'}
onClick={() =>
onToggleDrugClassificationSelection(classification)
}
active={selectedDrugClassifications.includes(classification)}
className={'mr-2'}
style={{ borderColor: COLOR_LIGHT_GREY }}
>
{classification}
<span
className={'ml-2 py-1 px-2'}
style={{
backgroundColor: 'grey',
borderRadius: '1rem',
color: 'white',
}}
>
{drugClassificationStats[classification]
? _.uniq(
drugClassificationStats[classification].map(
row => row.tx
)
).length
: 0}
</span>
</Button>
))}
{hasFilter ? (
<Button
variant="outline-primary"
className={'ml-2'}
style={{ whiteSpace: 'nowrap' }}
onClick={clearFilters}
>
<span className={'fa fa-times mr-1'}></span>
Reset filters
</Button>
) : undefined}
</div>
<DownloadButton className={'ml-2'} href={poTxsExcel}>
Download Table
</DownloadButton>
</Col>
</Row>
<br />
<h5>Option 2</h5>
<Row
style={{ paddingLeft: '0.5rem', paddingRight: '0.5rem' }}
className={'mb-2'}
>
<Col className={classnames(...COMPONENT_PADDING)} lg={2} md={6} xs={12}>
<Input
style={{ height: 38 }}
placeholder={'Search Therapy'}
value={therapySearch}
onChange={event => setTherapySearch(event.target.value)}
/>
</Col>
<Col className={classnames(...COMPONENT_PADDING)} lg={2} md={6} xs={12}>
<Input
style={{ height: 38 }}
placeholder={'Search Biomarker'}
value={biomarkerSearch}
onChange={event => setBiomarkerSearch(event.target.value)}
Expand All @@ -418,7 +317,7 @@ const PrecisionOncologyTherapiesPage: React.FunctionComponent<{}> = props => {
<Col className={classnames(...COMPONENT_PADDING)} lg={4} md={6} xs={12}>
<Select
placeholder={'Select Detection Method'}
options={sortAndUniqByValue(poTxs, 'biomarkerDetection')}
options={sortAndUniqByValue(filteredPoTxs, 'biomarkerDetection')}
isClearable={true}
value={selectedDetectionMethod}
onChange={(selectedOption: any) =>
Expand All @@ -429,7 +328,7 @@ const PrecisionOncologyTherapiesPage: React.FunctionComponent<{}> = props => {
<Col className={classnames(...COMPONENT_PADDING)} lg={4} md={6} xs={12}>
<Select
placeholder={'Select Drug Classification'}
options={sortAndUniqByValue(poTxs, 'drugClassification')}
options={sortAndUniqByValue(filteredPoTxs, 'drugClassification')}
isClearable={true}
isMulti
closeMenuOnSelect={false}
Expand Down Expand Up @@ -481,13 +380,14 @@ const PrecisionOncologyTherapiesPage: React.FunctionComponent<{}> = props => {
className={'ml-2'}
style={{ whiteSpace: 'nowrap' }}
onClick={clearFilters}
size={'sm'}
>
<span className={'fa fa-times mr-1'}></span>
Reset filters
</Button>
) : undefined}
</div>
<DownloadButton className={'ml-2'} href={poTxsExcel}>
<DownloadButton className={'ml-2'} href={poTxsExcel} size={'sm'}>
Download Table
</DownloadButton>
</Col>
Expand Down
18 changes: 0 additions & 18 deletions src/main/webapp/app/pages/precisionOncologyTherapiesPage/styles.scss
View file

This file was deleted.

0 comments on commit f5d3e48

Please sign in to comment.