Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
lazy fetch clinical attributes instead of all on page load
- Loading branch information
1 parent
8f2a649
commit 4b0b8a8
Showing
70 changed files
with
616 additions
and
54 deletions.
There are no files selected for viewing
Binary file modified
BIN
+431 Bytes
(100%)
...does_not_show_ascn_columns_study_with_no_ascn_data_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+896 Bytes
(100%)
..._where_some_samples_have_ascn_data_and_some_do_not_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-392 Bytes
(100%)
...7_with_alk_and_sos1_-_sos1_should_be_not_sequenced_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-78 Bytes
(100%)
...sclc_tcga_broad_2016_for_query_egfr:_mut=t790m_amp_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-80 Bytes
(100%)
...d_2016_with_cdkn2a_mdm2_and_merged_track_mdm4_tp53_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-76 Bytes
(100%)
..._tab_-_nsclc_tcga_broad_2016_with_overlapping_tp53_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-79 Bytes
(100%)
...nce/download_tab_-_nsclc_tcga_broad_2016_with_tp53_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-933 Bytes
(100%)
...nce/enrichments_tab_coadread_tcga_pub_mrna_profile_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-3.91 KB
(98%)
...cluding_unprofiled_samples_comparison_tab_clinical_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-4.96 KB
(99%)
...ofiled_samples_comparison_tab_mutation_enrichments_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-618 Bytes
(100%)
...eference/excluding_unprofiled_samples_mutation_tab_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-46 Bytes
(100%)
...s/reference/excluding_unprofiled_samples_mutex_tab_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+1.75 KB
(100%)
...eference/excluding_unprofiled_samples_survival_tab_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-1.94 KB
(99%)
...p_comparison_page_cna_enrichments_tab_patient_mode_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-1.96 KB
(99%)
...oup_comparison_page_cna_enrichments_tab_two_groups_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+324 Bytes
(100%)
...on_page_methylation_enrichments_tab_several_groups_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-1.06 KB
(100%)
...arison_page_methylation_enrichments_tab_two_groups_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+225 Bytes
(100%)
...rison_page_microbiome_signature_tab_several_groups_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+245 Bytes
(100%)
...omparison_page_microbiome_signature_tab_two_groups_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+206 Bytes
(100%)
...omparison_page_mrna_enrichments_tab_several_groups_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+239 Bytes
(100%)
...up_comparison_page_mrna_enrichments_tab_two_groups_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+341 Bytes
(100%)
...arison_page_protein_enrichments_tab_several_groups_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+341 Bytes
(100%)
...comparison_page_protein_enrichments_tab_two_groups_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-850 Bytes
(100%)
...ference/no_session_comparison_tab_mrna_enrichments_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-60 Bytes
(100%)
...nce/no_session_comparison_tab_mutation_enrichments_element_chrome_1600x1000.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-587 Bytes
(100%)
...mote/screenshots/reference/no_session_mutation_tab_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-38 Bytes
(100%)
.../remote/screenshots/reference/no_session_mutex_tab_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
+213 Bytes
(100%)
...reenshots/reference/patient_view_lgg_ucsf_2014_p04_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
+183 Bytes
(100%)
...ge_heatmap_with_two_mutations_selected_from_before_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
+182 Bytes
(100%)
...shots/reference/pvge_hover_a_mutation_with_heatmap_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
+180 Bytes
(100%)
...ts/reference/pvge_hover_a_mutation_with_line_chart_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
+208 Bytes
(100%)
...nshots/reference/pvge_initial_view_with_line_chart_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
+182 Bytes
(100%)
.../reference/pvge_one_mutation_selected_with_heatmap_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
+185 Bytes
(100%)
...ference/pvge_one_mutation_selected_with_line_chart_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
+180 Bytes
(100%)
...st/remote/screenshots/reference/pvge_show_timeline_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-356 Bytes
(100%)
...arison_tab_clinical_tab_bar_chart_chi_squared_test_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-42 Bytes
(100%)
...ab_include_overlapping_samples_kruskal_wallis_test_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-92 Bytes
(100%)
...on_tab_clinical_tab_log_scale__kruskal_wallis_test_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-351 Bytes
(100%)
...chart_exclude_overlapping_samples_chi_squared_test_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-294 Bytes
(100%)
...ab_clinical_tab_stacked_bar_chart_chi_squared_test_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-336 Bytes
(100%)
...stacked_bar_chart_horizontal_bars_chi_squared_test_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-520 Bytes
(100%)
...tab_stacked_bar_chart_swaped_axes_chi_squared_test_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
+19 Bytes
(100%)
...n_tab_clinical_tab_swaped_axes_kruskal_wallis_test_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
+1.08 KB
(100%)
...son_tab_methylation_enrichments_tab_several_groups_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-1.14 KB
(100%)
...parison_tab_methylation_enrichments_tab_two_groups_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-1.25 KB
(100%)
...comparison_tab_mrna_enrichments_tab_several_groups_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-941 Bytes
(100%)
...iew_comparison_tab_mrna_enrichments_tab_two_groups_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-4.37 KB
(99%)
...parison_tab_protein_enrichments_tab_several_groups_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-1.76 KB
(99%)
..._comparison_tab_protein_enrichments_tab_two_groups_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-115 Bytes
(100%)
...eenshots/reference/session_comparison_tab_clinical_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-850 Bytes
(100%)
.../reference/session_comparison_tab_mrna_enrichments_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-60 Bytes
(100%)
...erence/session_comparison_tab_mutation_enrichments_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-587 Bytes
(100%)
.../remote/screenshots/reference/session_mutation_tab_element_chrome_1600x1000.png
Oops, something went wrong.
Binary file modified
BIN
-38 Bytes
(100%)
...est/remote/screenshots/reference/session_mutex_tab_element_chrome_1600x1000.png
Oops, something went wrong.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,270 @@ | ||
import * as React from 'react'; | ||
import * as _ from 'lodash'; | ||
import { Checkbox } from 'react-bootstrap'; | ||
import { observer } from 'mobx-react'; | ||
import { action, computed, makeObservable, observable } from 'mobx'; | ||
import { remoteData, getTextWidth } from 'cbioportal-frontend-commons'; | ||
import { ClinicalAttribute } from 'cbioportal-ts-api-client'; | ||
import { IColumnVisibilityControlsProps } from 'shared/components/columnVisibilityControls/ColumnVisibilityControls'; | ||
import { MSKTab, MSKTabs } from 'shared/components/MSKTabs/MSKTabs'; | ||
import CustomDropdown from 'shared/components/oncoprint/controls/CustomDropdown'; | ||
import AddChartByType from '../../studyView/addChartButton/addChartByType/AddChartByType'; | ||
import { ChartDataCountSet } from '../../studyView/StudyViewUtils'; | ||
|
||
export interface IAddColumnsProps extends IColumnVisibilityControlsProps { | ||
clinicalAttributes: ClinicalAttribute[]; | ||
clinicalAttributeIdToAvailableSampleCount: { [id: string]: number }; | ||
sampleCount: number; | ||
} | ||
|
||
enum Tab { | ||
MUTATIONS = 'Mutations', | ||
CLINICAL = 'Clinical', | ||
} | ||
|
||
type Option = { | ||
key: string; | ||
label: string; | ||
selected: boolean; | ||
}; | ||
|
||
// Copied these constants from oncoprint/AddTracks.tsx | ||
// since importing them results in errors during testing | ||
// due to a separate import in that file. | ||
const MIN_DROPDOWN_WIDTH = 400; | ||
const CONTAINER_PADDING_WIDTH = 20; | ||
const TAB_PADDING_WIDTH = 14; | ||
const COUNT_PADDING_WIDTH = 17; | ||
@observer | ||
export default class AddColumns extends React.Component<IAddColumnsProps, {}> { | ||
@observable tabId: Tab = Tab.MUTATIONS; | ||
|
||
constructor(props: IAddColumnsProps) { | ||
super(props); | ||
makeObservable(this); | ||
} | ||
|
||
@action.bound | ||
private updateTabId(newId: Tab) { | ||
this.tabId = newId; | ||
} | ||
|
||
@action.bound | ||
private addAll(ids: string[], options: Option[] | undefined) { | ||
if (this.props.onColumnToggled && options) { | ||
for (let option of options) { | ||
if (!option.selected && ids.includes(option.key)) { | ||
this.props.onColumnToggled(option.key); | ||
} | ||
} | ||
} | ||
} | ||
|
||
@action.bound | ||
private clearAll(ids: string[], options: Option[] | undefined) { | ||
if (this.props.onColumnToggled && options) { | ||
for (let option of options) { | ||
if (option.selected && ids.includes(option.key)) { | ||
this.props.onColumnToggled(option.key); | ||
} | ||
} | ||
} | ||
} | ||
|
||
@action.bound | ||
private toggle(id: string) { | ||
if (this.props.onColumnToggled && id) { | ||
this.props.onColumnToggled(id); | ||
} | ||
} | ||
|
||
readonly emptyPromise = remoteData({ | ||
invoke: () => | ||
new Promise<ChartDataCountSet>(() => { | ||
return; | ||
}), | ||
}); | ||
|
||
readonly clinicalAttributeIdToAvailableFrequencyPromise = remoteData({ | ||
invoke: () => | ||
Promise.resolve( | ||
_.mapValues( | ||
this.props.clinicalAttributeIdToAvailableSampleCount, | ||
count => (100 * count) / this.props.sampleCount | ||
) | ||
), | ||
}); | ||
|
||
@computed get clinicalAttributeIds(): Set<string> { | ||
let ids: Set<string> = new Set(); | ||
this.props.clinicalAttributes.forEach(x => | ||
ids.add(x.clinicalAttributeId) | ||
); | ||
return ids.add('CANCER_TYPE_DETAILED').add('MUTATION_COUNT'); | ||
} | ||
|
||
@computed get mutationsOptions(): Option[] | undefined { | ||
return this.props.columnVisibility | ||
?.filter(col => !this.clinicalAttributeIds.has(col.id)) | ||
.map(col => ({ | ||
key: col.id, | ||
label: col.name, | ||
selected: col.visible, | ||
})); | ||
} | ||
|
||
@computed get mutationsTabContent() { | ||
return ( | ||
<div> | ||
{this.mutationsOptions && ( | ||
<AddChartByType | ||
options={this.mutationsOptions} | ||
freqPromise={this.emptyPromise} | ||
onAddAll={(ids: string[]) => | ||
this.addAll(ids, this.mutationsOptions) | ||
} | ||
onClearAll={(ids: string[]) => | ||
this.clearAll(ids, this.mutationsOptions) | ||
} | ||
onToggleOption={this.toggle} | ||
optionsGivenInSortedOrder={true} | ||
width={this.dropdownWidth} | ||
excludeFrequency={true} | ||
/> | ||
)} | ||
</div> | ||
); | ||
} | ||
|
||
@computed get clinicalOptions(): Option[] | undefined { | ||
if (!this.props.columnVisibility) return undefined; | ||
|
||
return this.props.columnVisibility | ||
.filter(col => this.clinicalAttributeIds.has(col.id)) | ||
.map(col => ({ | ||
key: col.id, | ||
label: col.name, | ||
selected: col.visible, | ||
})); | ||
} | ||
|
||
@computed get clinicalTabContent() { | ||
return ( | ||
<div> | ||
{this.props.columnVisibility && this.clinicalOptions && ( | ||
<AddChartByType | ||
options={this.clinicalOptions} | ||
freqPromise={ | ||
this.clinicalAttributeIdToAvailableFrequencyPromise | ||
} | ||
onAddAll={(ids: string[]) => | ||
this.addAll(ids, this.clinicalOptions) | ||
} | ||
onClearAll={(ids: string[]) => | ||
this.clearAll(ids, this.clinicalOptions) | ||
} | ||
onToggleOption={this.toggle} | ||
optionsGivenInSortedOrder={false} | ||
width={this.dropdownWidth} | ||
/> | ||
)} | ||
</div> | ||
); | ||
} | ||
|
||
@computed get mutationsTabText() { | ||
return ( | ||
<div> | ||
{Tab.MUTATIONS} | ||
<span style={{ paddingLeft: 5 }}> | ||
<span className="oncoprintDropdownCount"> | ||
{this.mutationsOptions?.length} | ||
</span> | ||
</span> | ||
</div> | ||
); | ||
} | ||
|
||
@computed get clinicalTabText() { | ||
return ( | ||
<div> | ||
{Tab.CLINICAL} | ||
<span style={{ paddingLeft: 5 }}> | ||
<span className="oncoprintDropdownCount"> | ||
{this.clinicalOptions?.length} | ||
</span> | ||
</span> | ||
</div> | ||
); | ||
} | ||
|
||
private getTextPixel(text: string | undefined, fontSize: string) { | ||
// This is a very specified function to calculate the text length in Add Tracks dropdown | ||
const FRONT_FAMILY = 'Helvetica Neue'; | ||
return Math.floor( | ||
getTextWidth(text ? text : '', FRONT_FAMILY, fontSize) | ||
); | ||
} | ||
|
||
@computed get dropdownWidth() { | ||
let width = 2 * CONTAINER_PADDING_WIDTH; | ||
const HEADER_FONT_SIZE = '14px'; | ||
const COUNT_FONT_SIZE = '11px'; | ||
|
||
const textWidth = | ||
this.getTextPixel(Tab.CLINICAL, HEADER_FONT_SIZE) + | ||
TAB_PADDING_WIDTH; | ||
const countTextWidth = | ||
this.getTextPixel( | ||
this.clinicalOptions?.length.toString(), | ||
COUNT_FONT_SIZE | ||
) + COUNT_PADDING_WIDTH; | ||
width += textWidth + countTextWidth; | ||
|
||
return Math.max(width, MIN_DROPDOWN_WIDTH); | ||
} | ||
|
||
render() { | ||
return ( | ||
<div style={{ float: 'right' }}> | ||
<CustomDropdown | ||
bsStyle="default" | ||
title="Columns" | ||
id="addColumnsDropdown" | ||
className={this.props.className} | ||
styles={{ minWidth: MIN_DROPDOWN_WIDTH, width: 'auto' }} | ||
buttonClassName="btn btn-default btn-sm" | ||
> | ||
<div | ||
style={{ | ||
display: 'flex', | ||
flexDirection: 'column', | ||
}} | ||
> | ||
<MSKTabs | ||
activeTabId={this.tabId} | ||
onTabClick={this.updateTabId} | ||
unmountOnHide={false} | ||
className="mainTabs mutationsTabAddColumnsDropdown" | ||
> | ||
<MSKTab | ||
key={0} | ||
id={Tab.MUTATIONS} | ||
linkText={this.mutationsTabText} | ||
> | ||
{this.mutationsTabContent} | ||
</MSKTab> | ||
<MSKTab | ||
key={1} | ||
id={Tab.CLINICAL} | ||
linkText={this.clinicalTabText} | ||
> | ||
{this.clinicalTabContent} | ||
</MSKTab> | ||
</MSKTabs> | ||
</div> | ||
</CustomDropdown> | ||
</div> | ||
); | ||
} | ||
} |
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
Oops, something went wrong.