Skip to content

Commit

Permalink
Merge pull request #4709 from BasLee/restyle-oncoprint-annotation-menu
Browse files Browse the repository at this point in the history 
[RFC 76] Redesign oncoprint annotation menu
  • Loading branch information
@alisman
alisman authored Sep 25, 2023
2 parents 5ef9512 + d4ad3c7 commit 9122026
Show file tree
Hide file tree
Showing 10 changed files with 319 additions and 320 deletions.
8 changes: 4 additions & 4 deletions end-to-end-test/local/runtime-config/portal.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,10 +263,10 @@ ucsc.build=hg19
oncoprint.defaultview=patient

# OncoPrint driver mutation annotations
oncoprint.custom_driver_annotation.binary.menu_label=Custom driver annotation
oncoprint.custom_driver_annotation.tiers.menu_label=Custom driver tiers
oncoprint.custom_driver_annotation.binary.default=true
oncoprint.custom_driver_annotation.tiers.default=true
oncoprint.custom_driver_annotation.binary.menu_label=Custom driver annotations
oncoprint.custom_driver_annotation.tiers.menu_label=Driver tiers
oncoprint.custom_driver_annotation.binary.default=true
oncoprint.custom_driver_annotation.tiers.default=true
oncoprint.oncokb.default=true
oncoprint.hotspots.default=true
# oncoprint.hide_vus.default=true
Expand Down
51 changes: 0 additions & 51 deletions end-to-end-test/local/specs/custom-driver-annotations-in-result-view.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,25 +74,6 @@ describe('custom driver annotations feature in result view', function() {
waitForOncoprint();
assert(!$('div.alert-info').isExisting());
});

it('(de-)selects custom driver checkboxes with main annotation select option', () => {
$('input[data-test=ColorByDriver]').click();
waitForOncoprint();

$('input[data-test=annotateCustomBinary]').waitForExist();
var topCheckBox = $('input[data-test=annotateCustomBinary]');
var tiersCheckboxes = $('span[data-test=annotateCustomTiers]').$$(
'input'
);
assert(!topCheckBox.isSelected());
assert(!tiersCheckboxes[0].isSelected());
assert(!tiersCheckboxes[1].isSelected());

$('input[data-test=ColorByDriver]').click();
assert(topCheckBox.isSelected());
assert(tiersCheckboxes[0].isSelected());
assert(tiersCheckboxes[1].isSelected());
});
});

describe('oncoprint tab - discrete CNA', () => {
Expand Down Expand Up @@ -157,23 +138,6 @@ describe('custom driver annotations feature in result view', function() {
$('div.alert-info*=16 copy number alterations').isExisting()
);
});

it('(de-)selects custom driver checkboxes with main annotation select option', () => {
$('input[data-test=ColorByDriver]').click();
waitForOncoprint();
var topCheckBox = $('input[data-test=annotateCustomBinary]');
var tiersCheckboxes = $('span[data-test=annotateCustomTiers]').$$(
'input'
);
assert(!topCheckBox.isSelected());
assert(!tiersCheckboxes[0].isSelected());
assert(!tiersCheckboxes[1].isSelected());

$('input[data-test=ColorByDriver]').click();
assert(topCheckBox.isSelected());
assert(tiersCheckboxes[0].isSelected());
assert(tiersCheckboxes[1].isSelected());
});
});

describe('oncoprint tab - structural variants', () => {
Expand Down Expand Up @@ -213,20 +177,5 @@ describe('custom driver annotations feature in result view', function() {
waitForOncoprint();
assert($('div.alert-info*=2 structural variants').isExisting());
});

it('(de-)selects custom driver checkboxes with main annotation select option', () => {
$('input[data-test=ColorByDriver]').click();
waitForOncoprint();
var topCheckBox = $('input[data-test=annotateCustomBinary]');
var tiersCheckboxes = $('span[data-test=annotateCustomTiers]').$$(
'input'
);
assert(!topCheckBox.isSelected());
assert(!tiersCheckboxes[0].isSelected());

$('input[data-test=ColorByDriver]').click();
assert(topCheckBox.isSelected());
assert(tiersCheckboxes[0].isSelected());
});
});
});
17 changes: 0 additions & 17 deletions end-to-end-test/remote/specs/core/oncoprinter.screenshot.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,24 +266,7 @@ describe('oncoprinter screenshot tests', function() {
var res = checkOncoprintElement();
assertScreenShotMatch(res);
});
it('oncoprinter example data, dont color by driver vs VUS', function() {
goToUrlAndSetLocalStorage(`${CBIOPORTAL_URL}/oncoprinter`);
$('.oncoprinterGeneticExampleData').waitForExist();
$('.oncoprinterClinicalExampleData').waitForExist();
$('.oncoprinterHeatmapExampleData').waitForExist();
$('.oncoprinterGeneticExampleData').click();
$('.oncoprinterClinicalExampleData').click();
$('.oncoprinterHeatmapExampleData').click();
$('.oncoprinterSubmit').click();
waitForOncoprint(TIMEOUT);
setOncoprintMutationsMenuOpen(true);
$('input[data-test="ColorByDriver"]').click();
waitForOncoprint(TIMEOUT);
setOncoprintMutationsMenuOpen(false); // get it out of the way for screenshot

var res = checkOncoprintElement();
assertScreenShotMatch(res);
});
it('oncoprinter example data, hide VUS', function() {
goToUrlAndSetLocalStorage(`${CBIOPORTAL_URL}/oncoprinter`);
$('.oncoprinterGeneticExampleData').waitForExist();
Expand Down
4 changes: 2 additions & 2 deletions src/config/serverConfigDefaults.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ export const ServerConfigDefaults: Partial<IServerConfig> = {
'https://mygene.info/v3/gene/<%= entrezGeneId %>?fields=uniprot',

oncoprint_custom_driver_annotation_binary_menu_label:
'Custom driver annotation',
oncoprint_custom_driver_annotation_tiers_menu_label: 'Custom driver tiers',
'Custom driver annotations',
oncoprint_custom_driver_annotation_tiers_menu_label: 'Driver tiers',
oncoprint_custom_driver_annotation_binary_default: true,
oncoprint_custom_driver_annotation_tiers_default: true,
oncoprint_oncokb_default: true,
Expand Down
4 changes: 2 additions & 2 deletions src/shared/alterationFiltering/AnnotationFilteringSettings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export function buildDriverAnnotationSettings(
this._includeDriver = val;
},
get includeVUS() {
return this._includeVUS;
return this._includeVUS || !this.driversAnnotated;
},
set includeVUS(val: boolean) {
this._includeVUS = val;
Expand All @@ -124,7 +124,7 @@ export function buildDriverAnnotationSettings(
this.oncoKb ||
this.hotspots ||
this.customBinary ||
_.some(this.driverTiers.entries(), entry => entry[1]);
_.some([...this.driverTiers.entries()], entry => entry[1]);
return anySelected;
},

Expand Down
84 changes: 60 additions & 24 deletions src/shared/alterationFiltering/SettingsMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
buildDriverAnnotationControlsHandlers,
} from './AnnotationFilteringSettings';
import styles from 'shared/components/driverAnnotations/styles.module.scss';
import InfoIcon from 'shared/components/InfoIcon';

enum EVENT_KEY {
hidePutativePassengers = '0',
Expand Down Expand Up @@ -110,22 +111,20 @@ export default class SettingsMenu extends React.Component<
style={{ padding: 5 }}
>
{this.props.annotationTitleComponent}
<div style={{ marginLeft: 10 }}>
<DriverAnnotationControls
state={this.driverSettingsState}
handlers={this.driverSettingsHandlers}
showOnckbAnnotationControls={
this.props.showOnckbAnnotationControls
}
/>
</div>
<DriverAnnotationControls
state={this.driverSettingsState}
handlers={this.driverSettingsHandlers}
showOnckbAnnotationControls={
this.props.showOnckbAnnotationControls
}
/>
{this.props.showFilterControls && (
<>
<hr />
<h5 style={{ marginTop: 'auto', marginBottom: 'auto' }}>
Filter Data
</h5>
<div style={{ marginLeft: 10 }}>
<div>
<div className="checkbox">
<label>
<input
Expand All @@ -143,9 +142,20 @@ export default class SettingsMenu extends React.Component<
.distinguishDrivers
}
/>{' '}
Exclude alterations (mutations, structural
variants and copy number) of unknown
significance
Show only drivers
<InfoIcon
style={{ color: 'grey' }}
divStyle={{
display: 'inline-block',
marginLeft: 6,
}}
tooltip={
<>
Exclude VUS: Drivers are defined
through the options above
</>
}
/>
</label>
</div>
<div className="checkbox">
Expand All @@ -160,11 +170,21 @@ export default class SettingsMenu extends React.Component<
}
onClick={this.onInputClick}
/>{' '}
Exclude germline mutations
Show only somatic
<InfoIcon
style={{ color: 'grey' }}
divStyle={{
display: 'inline-block',
marginLeft: 6,
}}
tooltip={
<>Exclude germline mutations</>
}
/>
</label>
</div>
{this.props.showExcludeUnprofiledSamplesControl && (
<div>
<>
<div className="checkbox">
<label>
<input
Expand All @@ -180,10 +200,28 @@ export default class SettingsMenu extends React.Component<
}
onClick={this.onInputClick}
/>{' '}
Exclude unprofiled samples
Show only profiled
<InfoIcon
style={{ color: 'grey' }}
divStyle={{
display: 'inline-block',
marginLeft: 6,
}}
tooltip={
<>
Exclude unprofiled
samples
</>
}
/>
</label>
</div>
<div style={{ marginLeft: 10 }}>
<div
style={{
marginLeft: 10,
marginTop: -5,
}}
>
<div className="radio">
<label>
<input
Expand All @@ -198,9 +236,8 @@ export default class SettingsMenu extends React.Component<
}
onClick={this.onInputClick}
/>
Exclude samples that are
unprofiled in any queried gene
or profile
Profiled in <strong>all</strong>{' '}
queried genes/profiles
</label>
<label>
<input
Expand All @@ -215,13 +252,12 @@ export default class SettingsMenu extends React.Component<
}
onClick={this.onInputClick}
/>
Exclude samples that are
unprofiled in every queried gene
and profile.
Profiled in <strong>any</strong>{' '}
queried genes/profiles
</label>
</div>
</div>
</div>
</>
)}
</div>
</>
Expand Down
Loading

0 comments on commit 9122026

Please sign in to comment.