Skip to content

Commit

Permalink
Add oncoprint gap mode to hide percentages
Browse files Browse the repository at this point in the history
  • Loading branch information
@alisman
alisman committed Sep 11, 2024
1 parent 441a3d5 commit 44dff19
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 32 deletions.
16 changes: 11 additions & 5 deletions packages/oncoprintjs/src/js/oncoprint.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import OncoprintModel, {
ColumnProp,
CustomTrackOption,
Datum,
GAP_MODE_ENUM,
LibraryTrackSpec,
SortConfig,
TrackGroup,
TrackGroupHeader,
TrackGroupIndex,
TrackId,
Expand All @@ -33,6 +33,7 @@ import svgfactory from './svgfactory';
import $ from 'jquery';
import { clamp } from './utils';
import OncoprintHeaderView from './oncoprintheaderview';
import { getBrowserWindow } from 'cbioportal-frontend-commons';

export type InitParams = {
init_cell_width?: number;
Expand Down Expand Up @@ -122,6 +123,8 @@ export default class Oncoprint {

const self = this;

getBrowserWindow().aaron = this;

this.destroyed = false;
this.webgl_unavailable =
document
Expand Down Expand Up @@ -1234,7 +1237,7 @@ export default class Oncoprint {

if (this.model.getTrackSortDirection(track_id) === 0) {
if (this.model.getTrackShowGaps(track_id)) {
this.setTrackShowGaps(track_id, false);
this.setTrackShowGaps(track_id, GAP_MODE_ENUM.HIDE_GAPS);
}
}
}
Expand Down Expand Up @@ -1292,9 +1295,12 @@ export default class Oncoprint {
this.resizeAndOrganizeAfterTimeout();
}

public setTrackShowGaps(track_id: TrackId, showGaps: boolean) {
this.model.setTrackShowGaps(track_id, showGaps);
if (this.model.getTrackSortDirection(track_id) === 0 && showGaps) {
public setTrackShowGaps(track_id: TrackId, gap_mode: GAP_MODE_ENUM) {
this.model.setTrackShowGaps(track_id, gap_mode);
if (
this.model.getTrackSortDirection(track_id) === 0 &&
gap_mode !== GAP_MODE_ENUM.HIDE_GAPS
) {
this.setTrackSortDirection(track_id, 1);
}
this.track_options_view.setTrackShowGaps(
Expand Down
45 changes: 38 additions & 7 deletions packages/oncoprintjs/src/js/oncoprintmodel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@ import PrecomputedComparator from './precomputedcomparator';
import { calculateHeaderTops, calculateTrackTops } from './modelutils';
import { OncoprintGapConfig } from './oncoprintwebglcellview';

export enum GAP_MODE_ENUM {
SHOW_GAPS = 'SHOW_GAPS',
SHOW_GAPS_PERCENT = 'SHOW_GAPS_PERCENT',
HIDE_GAPS = 'HIDE_GAPS',
}

export type ColumnId = string;
export type ColumnIndex = number;
export type TrackId = number;
Expand Down Expand Up @@ -62,7 +68,10 @@ export type TrackSortDirectionChangeCallback = (
track_id: TrackId,
dir: number
) => void;
export type TrackGapChangeCallBack = (track_id: TrackId, on: boolean) => void;
export type TrackGapChangeCallBack = (
track_id: TrackId,
mode: GAP_MODE_ENUM
) => void;
export type CustomTrackOption = {
label?: string;
separator?: boolean;
Expand Down Expand Up @@ -318,7 +327,7 @@ export default class OncoprintModel {
private track_expansion_parent: TrackProp<TrackId>;
private track_custom_options: TrackProp<CustomTrackOption[]>;
private track_can_show_gaps: TrackProp<boolean>;
private track_show_gaps: TrackProp<boolean>;
private track_show_gaps: TrackProp<GAP_MODE_ENUM>;

// Rule set properties
private rule_sets: { [ruleSetId: number]: RuleSet };
Expand Down Expand Up @@ -571,7 +580,11 @@ export default class OncoprintModel {
const precomputedComparator = model.precomputed_comparator.get();
const trackIdsWithGaps = model
.getTracks()
.filter(trackId => model.getTrackShowGaps(trackId));
.filter(
trackId =>
model.getTrackShowGaps(trackId) !==
GAP_MODE_ENUM.HIDE_GAPS
);
const ids = model.visible_id_order.get();

for (let i = 1; i < ids.length; i++) {
Expand Down Expand Up @@ -736,7 +749,7 @@ export default class OncoprintModel {
this.column_left.addBoundProperty(this.column_left_no_padding);
}

public setTrackShowGaps(trackId: TrackId, show: boolean) {
public setTrackShowGaps(trackId: TrackId, show: GAP_MODE_ENUM) {
this.track_show_gaps[trackId] = show;
this.track_gap_change_callback[trackId](trackId, show);
this.ids_after_a_gap.update(this);
Expand Down Expand Up @@ -1143,7 +1156,14 @@ export default class OncoprintModel {

public getGapSize() {
if (this.showGaps()) {
return 50; // this creates enough space for 3 digit percentage
switch (this.gapMode()) {
case GAP_MODE_ENUM.SHOW_GAPS:
return this.getCellWidth(true);
case GAP_MODE_ENUM.SHOW_GAPS_PERCENT:
return 50;
default:
return 50;
}
} else {
return this.getCellWidth(true);
}
Expand Down Expand Up @@ -1425,7 +1445,9 @@ export default class OncoprintModel {
);

const trackShowGaps = ifndef(params.show_gaps_on_init, false);
this.track_show_gaps[track_id] = trackShowGaps;
this.track_show_gaps[track_id] = trackShowGaps
? GAP_MODE_ENUM.SHOW_GAPS_PERCENT
: GAP_MODE_ENUM.HIDE_GAPS;
const trackNotSorted = this.track_sort_direction[track_id] === 0;
if (trackShowGaps && trackNotSorted) {
this.track_sort_direction[track_id] = 1;
Expand Down Expand Up @@ -1889,7 +1911,16 @@ export default class OncoprintModel {
}

public showGaps() {
return _.some(this.track_show_gaps);
return _(this.track_show_gaps)
.values()
.some(t => t !== GAP_MODE_ENUM.HIDE_GAPS);
}

public gapMode() {
const mode = _(this.track_show_gaps)
.values()
.find(g => g !== GAP_MODE_ENUM.HIDE_GAPS);
return mode || GAP_MODE_ENUM.HIDE_GAPS;
}

public getOncoprintWidthNoColumnPaddingNoGaps() {
Expand Down
48 changes: 33 additions & 15 deletions packages/oncoprintjs/src/js/oncoprinttrackoptionsview.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import $ from 'jquery';
import menuDotsIcon from '../img/menudots.svg';
import OncoprintModel, {
TrackGroupProp,
GAP_MODE_ENUM,
TrackId,
TrackProp,
TrackSortDirection,
} from './oncoprintmodel';
import ClickEvent = JQuery.ClickEvent;
import { CLOSE_MENUS_EVENT as HEADER_VIEW_CLOSE_MENUS_EVENT } from './oncoprintheaderview';
import ClickEvent = JQuery.ClickEvent;

const TOGGLE_BTN_CLASS = 'oncoprintjs__track_options__toggle_btn_img';
const TOGGLE_BTN_OPEN_CLASS = 'oncoprintjs__track_options__open';
Expand Down Expand Up @@ -44,7 +44,10 @@ export default class OncoprintTrackOptionsView {
sortDirection: TrackSortDirection
) => void,
private unexpandCallback: TrackCallback,
private showGapsCallback: (trackId: TrackId, showGaps: boolean) => void
private showGapsCallback: (
trackId: TrackId,
showGaps: GAP_MODE_ENUM
) => void
) {
const position = $div.css('position');
if (position !== 'absolute' && position !== 'relative') {
Expand Down Expand Up @@ -448,31 +451,46 @@ export default class OncoprintTrackOptionsView {
$dropdown.append(
OncoprintTrackOptionsView.$makeDropdownSeparator()
);
const $show_gaps_opt = OncoprintTrackOptionsView.$makeDropdownOption(
'Show gaps',

const $show_gaps_percent_opt = OncoprintTrackOptionsView.$makeDropdownOption(
model.getTrackShowGaps(track_id) ===
GAP_MODE_ENUM.SHOW_GAPS_PERCENT
? 'Hide gaps (%)'
: 'Show Gaps (%)',
model.getTrackShowGaps(track_id) ? 'bold' : 'normal',
false,
function(evt) {
evt.stopPropagation();
$show_gaps_opt.css('font-weight', 'bold');
$dont_show_gaps_opt.css('font-weight', 'normal');
self.showGapsCallback(track_id, true);
const mode: GAP_MODE_ENUM = [
GAP_MODE_ENUM.SHOW_GAPS_PERCENT,
].includes(model.getTrackShowGaps(track_id))
? GAP_MODE_ENUM.HIDE_GAPS
: GAP_MODE_ENUM.SHOW_GAPS_PERCENT;
self.showGapsCallback(track_id, mode);
}
);
const $dont_show_gaps_opt = OncoprintTrackOptionsView.$makeDropdownOption(
"Don't show gaps",
model.getTrackShowGaps(track_id) ? 'normal' : 'bold',

const $show_gaps_opt = OncoprintTrackOptionsView.$makeDropdownOption(
model.getTrackShowGaps(track_id) === GAP_MODE_ENUM.SHOW_GAPS
? 'Hide gaps'
: 'Show Gaps',
model.getTrackShowGaps(track_id) ? 'bold' : 'normal',
false,
function(evt) {
evt.stopPropagation();

$show_gaps_opt.css('font-weight', 'normal');
$dont_show_gaps_opt.css('font-weight', 'bold');
self.showGapsCallback(track_id, false);
$show_gaps_opt.css('font-weight', 'bold');
const mode: GAP_MODE_ENUM = [
GAP_MODE_ENUM.SHOW_GAPS,
].includes(model.getTrackShowGaps(track_id))
? GAP_MODE_ENUM.HIDE_GAPS
: GAP_MODE_ENUM.SHOW_GAPS;
self.showGapsCallback(track_id, mode);
}
);

$dropdown.append($show_gaps_opt);
$dropdown.append($dont_show_gaps_opt);
$dropdown.append($show_gaps_percent_opt);
}
// Add custom options
const custom_options = model.getTrackCustomOptions(track_id);
Expand Down
15 changes: 10 additions & 5 deletions packages/oncoprintjs/src/js/oncoprintwebglcellview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,19 @@ import OncoprintModel, {
ColumnId,
ColumnLabel,
ColumnProp,
GAP_MODE_ENUM,
IdentifiedShapeList,
TrackId,
TrackOverlappingCells,
TrackProp,
} from './oncoprintmodel';
import OncoprintToolTip from './oncoprinttooltip';
import { arrayFindIndex, ifndef, sgndiff } from './utils';
import MouseUpEvent = JQuery.MouseUpEvent;
import MouseMoveEvent = JQuery.MouseMoveEvent;
import { ifndef, sgndiff } from './utils';
import { CellClickCallback, CellMouseOverCallback } from './oncoprint';
import { getFragmentShaderSource, getVertexShaderSource } from './shaders';
import _ from 'lodash';
import MouseUpEvent = JQuery.MouseUpEvent;
import MouseMoveEvent = JQuery.MouseMoveEvent;

type ColorBankIndex = number; // index into vertex bank (e.g. 0, 4, 8, ...)
type ColorBank = number[]; // flat list of color: [c0,c0,c0,c0,v1,v1,v1,c1,c1,c1,c1,...]
Expand Down Expand Up @@ -846,15 +847,19 @@ export default class OncoprintWebGLCellView {
const cell_top = model.getCellTops(track_id);
const cell_height = model.getCellHeight(track_id);

if (model.showGaps()) {
if (
model.showGaps() &&
model.gapMode() === GAP_MODE_ENUM.SHOW_GAPS_PERCENT
) {
const gaps = this.getGaps(model, track_id);
if (gaps) {
gaps.forEach((gap: OncoprintGapConfig, i: number) => {
const x = gapOffsets[i] - scroll_x - model.getGapSize();
const y =
model.getZoomedTrackTops()[track_id] +
cell_height -
scroll_y;
scroll_y -
4;

this.drawGapLabel(gap.labelFormatter(), x, y);

Expand Down

0 comments on commit 44dff19

Please sign in to comment.