oncoprintjs 6.1.3 → 6.1.5

package/dist/js/oncoprintmodel.d.ts

@@ -58,6 +58,7 @@ export type CustomTrackOption = {
     weight?: string;
     disabled?: boolean;
     gapLabelsFn?: (model: OncoprintModel) => OncoprintGapConfig[];
+    children?: CustomTrackOption[];
 };
 export type CustomTrackGroupOption = {
     label?: string;
@@ -103,6 +104,10 @@ export type UserTrackSpec<D> = {
     $track_info_tooltip_elt?: JQuery;
     track_can_show_gaps?: boolean;
     show_gaps_on_init?: boolean;
+    on_move_up?: () => void;
+    on_move_down?: () => void;
+    move_up_disabled?: boolean;
+    move_down_disabled?: boolean;
 };
 export type LibraryTrackSpec<D> = UserTrackSpec<D> & {
     rule_set: RuleSet;
@@ -198,6 +203,10 @@ export default class OncoprintModel {
     private track_removable;
     private track_remove_callback;
     private track_remove_option_callback;
+    private track_on_move_up;
+    private track_on_move_down;
+    private track_move_up_disabled;
+    private track_move_down_disabled;
     private track_sort_cmp_fn;
     private track_sort_direction_changeable;
     private track_sort_direction;
@@ -365,6 +374,10 @@ export default class OncoprintModel {
     getTrackGroupPadding(base?: boolean): number;
     isTrackRemovable(track_id: TrackId): boolean;
     getTrackRemoveOptionCallback(track_id: TrackId): (track_id: number) => void;
+    getTrackOnMoveUp(track_id: TrackId): () => void;
+    getTrackOnMoveDown(track_id: TrackId): () => void;
+    isTrackMoveUpDisabled(track_id: TrackId): boolean;
+    isTrackMoveDownDisabled(track_id: TrackId): boolean;
     isTrackSortDirectionChangeable(track_id: TrackId): boolean;
     isTrackExpandable(track_id: TrackId): boolean;
     expandTrack(track_id: TrackId): void;

package/dist/js/oncoprintruleset.d.ts

@@ -58,6 +58,7 @@ export interface IStackedBarRuleSetParams extends IGeneralRuleSetParams {
     value_key: string;
     categories: string[];
     fills?: RGBAColor[];
+    max_total?: number;
 }
 export interface IGeneticAlterationRuleSetParams extends IGeneralRuleSetParams {
     type: RuleSetType.GENE;

package/dist/js/oncoprinttrackoptionsview.d.ts

@@ -31,6 +31,7 @@ export default class OncoprintTrackOptionsView {
     private hideMenusExcept;
     private static $makeDropdownOption;
     private static $makeDropdownSeparator;
+    private static $makeDropdownSubmenuOption;
     private static renderSortArrow;
     private renderTrackOptions;
     enableInteraction(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oncoprintjs",
-  "version": "6.1.3",
+  "version": "6.1.5",
   "description": "A data visualization for cancer genomic data.",
   "types": "./dist/js/oncoprint.d.ts",
   "main": "dist/index.js",
@@ -57,5 +57,5 @@
     "tayden-clusterfck": "^0.7.0",
     "typescript": "4.0.3"
   },
-  "gitHead": "77f7d81ab0b6e1c0f5b6846d2b39851593f6e6e7"
+  "gitHead": "a7270762c0180a3e41ebce361df3c1417072c72d"
 }

package/src/js/oncoprintmodel.ts

@@ -79,6 +79,9 @@ export type CustomTrackOption = {
     weight?: string;
     disabled?: boolean;
     gapLabelsFn?: (model: OncoprintModel) => OncoprintGapConfig[];
+    // When set, this option is a parent item: hovering shows a submenu of the
+    // nested options. Mutually exclusive with onClick.
+    children?: CustomTrackOption[];
 };
 export type CustomTrackGroupOption = {
     label?: string;
@@ -124,6 +127,12 @@ export type UserTrackSpec<D> = {
     $track_info_tooltip_elt?: JQuery;
     track_can_show_gaps?: boolean;
     show_gaps_on_init?: boolean;
+    // Optional overrides for Move up / Move down: a callback fully replaces the
+    // default within-group move; the disabled flags gray out the item.
+    on_move_up?: () => void;
+    on_move_down?: () => void;
+    move_up_disabled?: boolean;
+    move_down_disabled?: boolean;
 };
 export type LibraryTrackSpec<D> = UserTrackSpec<D> & {
     rule_set: RuleSet;
@@ -305,6 +314,10 @@ export default class OncoprintModel {
     private track_remove_option_callback: TrackProp<
         (track_id: TrackId) => void
     >;
+    private track_on_move_up: TrackProp<(() => void) | undefined>;
+    private track_on_move_down: TrackProp<(() => void) | undefined>;
+    private track_move_up_disabled: TrackProp<boolean>;
+    private track_move_down_disabled: TrackProp<boolean>;
     private track_sort_cmp_fn: TrackProp<TrackSortSpecification<Datum>>;
     private track_sort_direction_changeable: TrackProp<boolean>;
     private track_sort_direction: TrackProp<TrackSortDirection>;
@@ -416,6 +429,10 @@ export default class OncoprintModel {
         this.track_removable = {};
         this.track_remove_callback = {};
         this.track_remove_option_callback = {};
+        this.track_on_move_up = {};
+        this.track_on_move_down = {};
+        this.track_move_up_disabled = {};
+        this.track_move_down_disabled = {};
         this.track_sort_cmp_fn = {};
         this.track_sort_direction_changeable = {};
         this.track_sort_direction = {}; // 1: ascending, -1: descending, 0: not
@@ -1142,11 +1159,11 @@ export default class OncoprintModel {
         ) {
             return self.track_rule_set_id[track_id];
         });
-        const unique_rule_set_ids = arrayUnique(
-            rule_set_ids.map(x => x.toString())
-        );
+        // Dedupe numeric IDs directly to avoid the core-js parseInt polyfill's
+        // per-call trim(), which dominated chart-type-switch cost on large studies.
+        const unique_rule_set_ids = Array.from(new Set(rule_set_ids));
         return unique_rule_set_ids.map(function(rule_set_id) {
-            return self.rule_sets[parseInt(rule_set_id, 10)];
+            return self.rule_sets[rule_set_id];
         });
     }
 
@@ -1375,6 +1392,10 @@ export default class OncoprintModel {
             const params = params_list[i];
             this.addTrack(params);
         }
+        // Update track_tops synchronously before the (un-awaited) sort below, so
+        // views reading getZoomedTrackTops() for the new track don't get
+        // `undefined` and compute NaN heights — i.e. a zero-height canvas.
+        this.track_tops.update();
         if (this.rendering_suppressed_depth === 0) {
             if (this.keep_sorted) {
                 await this.sort();
@@ -1424,6 +1445,16 @@ export default class OncoprintModel {
         this.track_remove_option_callback[
             track_id
         ] = ifndef(params.onClickRemoveInTrackMenu, function() {});
+        this.track_on_move_up[track_id] = params.on_move_up;
+        this.track_on_move_down[track_id] = params.on_move_down;
+        this.track_move_up_disabled[track_id] = ifndef(
+            params.move_up_disabled,
+            false
+        );
+        this.track_move_down_disabled[track_id] = ifndef(
+            params.move_down_disabled,
+            false
+        );
 
         if (typeof params.expandCallback !== 'undefined') {
             this.track_expand_callback[track_id] = params.expandCallback;
@@ -1493,7 +1524,8 @@ export default class OncoprintModel {
         const group_arrays = [this.track_groups[params.target_group].tracks];
         if (
             this.sort_config.type === 'cluster' &&
-            this.sort_config.track_group_index === params.target_group
+            this.sort_config.track_group_index === params.target_group &&
+            this.unclustered_track_group_order
         ) {
             // if target group is clustered, also add track to unclustered order
             group_arrays.push(this.unclustered_track_group_order);
@@ -1633,6 +1665,10 @@ export default class OncoprintModel {
         delete this.track_movable[track_id];
         delete this.track_removable[track_id];
         delete this.track_remove_callback[track_id];
+        delete this.track_on_move_up[track_id];
+        delete this.track_on_move_down[track_id];
+        delete this.track_move_up_disabled[track_id];
+        delete this.track_move_down_disabled[track_id];
         delete this.track_sort_cmp_fn[track_id];
         delete this.track_sort_direction_changeable[track_id];
         delete this.track_sort_direction[track_id];
@@ -1708,9 +1744,14 @@ export default class OncoprintModel {
             return null;
         }
 
-        // Next, see if it's in a track
+        // Next, see if it's in a track.
+        // Try binary search first for performance, but fall back to linear
+        // scan if the result is invalid. cell_tops may not be monotonically
+        // ordered relative to the tracks array during async clustering
+        // transitions, which causes binary search to return wrong results.
         const tracks = this.getTracks();
         const cell_tops = this.getCellTops() as TrackProp<number>;
+        let nearest_track: TrackId | undefined;
         const nearest_track_index = binarysearch(
             tracks,
             y,
@@ -1719,12 +1760,26 @@ export default class OncoprintModel {
             },
             true
         );
-        if (nearest_track_index === -1) {
-            return null;
+        if (nearest_track_index !== -1) {
+            const candidate = tracks[nearest_track_index];
+            if (
+                y >= cell_tops[candidate] &&
+                y < cell_tops[candidate] + this.getCellHeight(candidate)
+            ) {
+                nearest_track = candidate;
+            }
+        }
+        if (nearest_track === undefined) {
+            // Binary search failed (tracks out of order) - linear fallback
+            for (let t = 0; t < tracks.length; t++) {
+                const top = cell_tops[tracks[t]];
+                if (y >= top && y < top + this.getCellHeight(tracks[t])) {
+                    nearest_track = tracks[t];
+                    break;
+                }
+            }
         }
-        const nearest_track = tracks[nearest_track_index];
-        if (y >= cell_tops[nearest_track] + this.getCellHeight(nearest_track)) {
-            // we know y is past the top of the track (>= cell_tops[nearest_track]), so this checks if y is past the bottom of the track
+        if (nearest_track === undefined) {
             return null;
         }
 
@@ -2060,6 +2115,18 @@ export default class OncoprintModel {
     public getTrackRemoveOptionCallback(track_id: TrackId) {
         return this.track_remove_option_callback[track_id];
     }
+    public getTrackOnMoveUp(track_id: TrackId) {
+        return this.track_on_move_up[track_id];
+    }
+    public getTrackOnMoveDown(track_id: TrackId) {
+        return this.track_on_move_down[track_id];
+    }
+    public isTrackMoveUpDisabled(track_id: TrackId) {
+        return this.track_move_up_disabled[track_id] === true;
+    }
+    public isTrackMoveDownDisabled(track_id: TrackId) {
+        return this.track_move_down_disabled[track_id] === true;
+    }
 
     public isTrackSortDirectionChangeable(track_id: TrackId) {
         return this.track_sort_direction_changeable[track_id];

package/src/js/oncoprintruleset.ts

@@ -116,6 +116,10 @@ export interface IStackedBarRuleSetParams extends IGeneralRuleSetParams {
     value_key: string;
     categories: string[];
     fills?: RGBAColor[];
+    // When set, bar heights scale against this constant instead of each datum's
+    // own total, so height reflects absolute magnitude rather than per-sample
+    // composition. Typically max(sum(datum values)) across all data.
+    max_total?: number;
 }
 
 export interface IGeneticAlterationRuleSetParams extends IGeneralRuleSetParams {
@@ -1169,6 +1173,7 @@ class StackedBarRuleSet extends ConditionRuleSet {
         const value_key = params.value_key;
         const fills = params.fills || [];
         const categories = params.categories || [];
+        const max_total = params.max_total;
         const getUnusedColor = makeUniqueColorGetter(fills.map(rgbaToHex));
 
         // Initialize with default values
@@ -1196,41 +1201,95 @@ class StackedBarRuleSet extends ConditionRuleSet {
                                 fill: fills[I],
                                 width: 100,
                                 height: function(d) {
-                                    var total = 0;
+                                    var denom;
+                                    if (max_total) {
+                                        denom = max_total;
+                                        return (
+                                            (+d[value_key][categories[I]] *
+                                                100) /
+                                            denom
+                                        );
+                                    }
+                                    // Composition mode: rows fill the full cell
+                                    // height. Snap the last rect to
+                                    // "100 - prev_sum_pct" so float drift in the
+                                    // fractions never leaves a gap at the bottom.
+                                    denom = 0;
                                     for (
                                         var j = 0;
                                         j < categories.length;
                                         j++
                                     ) {
-                                        total += parseFloat(
-                                            d[value_key][categories[j]]
-                                        );
+                                        denom += +d[value_key][categories[j]];
+                                    }
+                                    if (denom === 0) {
+                                        return 0;
+                                    }
+                                    if (I === categories.length - 1) {
+                                        var prev_pct = 0;
+                                        for (var k = 0; k < I; k++) {
+                                            prev_pct +=
+                                                (+d[value_key][categories[k]] *
+                                                    100) /
+                                                denom;
+                                        }
+                                        return 100 - prev_pct;
                                     }
                                     return (
-                                        (parseFloat(
-                                            d[value_key][categories[I]]
-                                        ) *
-                                            100) /
-                                        total
+                                        (+d[value_key][categories[I]] * 100) /
+                                        denom
                                     );
                                 },
                                 y: function(d) {
-                                    var total = 0;
+                                    var denom;
                                     var prev_vals_sum = 0;
-                                    for (
-                                        var j = 0;
-                                        j < categories.length;
-                                        j++
-                                    ) {
-                                        var new_val = parseFloat(
-                                            d[value_key][categories[j]]
+                                    if (max_total) {
+                                        // Absolute mode: anchor bars to the
+                                        // bottom baseline. empty_pct is the
+                                        // whitespace above a short bar.
+                                        denom = max_total;
+                                        var total = 0;
+                                        for (
+                                            var j = 0;
+                                            j < categories.length;
+                                            j++
+                                        ) {
+                                            total += +d[value_key][
+                                                categories[j]
+                                            ];
+                                        }
+                                        var empty_pct =
+                                            ((max_total - total) * 100) /
+                                            max_total;
+                                        for (var j = 0; j < I; j++) {
+                                            prev_vals_sum += +d[value_key][
+                                                categories[j]
+                                            ];
+                                        }
+                                        return (
+                                            empty_pct +
+                                            (prev_vals_sum * 100) / denom
                                         );
-                                        if (j < I) {
-                                            prev_vals_sum += new_val;
+                                    } else {
+                                        denom = 0;
+                                        for (
+                                            var j = 0;
+                                            j < categories.length;
+                                            j++
+                                        ) {
+                                            var new_val = +d[value_key][
+                                                categories[j]
+                                            ];
+                                            if (j < I) {
+                                                prev_vals_sum += new_val;
+                                            }
+                                            denom += new_val;
+                                        }
+                                        if (denom === 0) {
+                                            return 0;
                                         }
-                                        total += new_val;
+                                        return (prev_vals_sum * 100) / denom;
                                     }
-                                    return (prev_vals_sum * 100) / total;
                                 },
                             },
                         ],

package/src/js/oncoprinttrackoptionsview.ts

@@ -1,6 +1,7 @@
 import $ from 'jquery';
 import menuDotsIcon from '../img/menudots.svg';
 import OncoprintModel, {
+    CustomTrackOption,
     GAP_MODE_ENUM,
     TrackId,
     TrackProp,
@@ -176,12 +177,31 @@ export default class OncoprintTrackOptionsView {
                 'font-weight': weight,
                 'font-size': 12,
                 'border-bottom': '1px solid rgba(0,0,0,0.3)',
+                // Disables the iOS 300ms tap delay and lets click fire on first tap.
+                'touch-action': 'manipulation',
             });
         if (!disabled) {
             if (callback) {
                 li.addClass('clickable');
                 li.css({ cursor: 'pointer' });
-                li.click(callback).hover(
+                // Also fire on touchend so taps work when the synthetic click
+                // doesn't arrive (sticky hover on iOS). preventDefault on the
+                // touch stops the follow-up click so the callback runs once.
+                let fired = false;
+                const invoke = function(evt: any) {
+                    if (fired) return;
+                    fired = true;
+                    setTimeout(() => {
+                        fired = false;
+                    }, 400);
+                    callback(evt);
+                };
+                li.on('click', invoke);
+                li.on('touchend', function(evt) {
+                    evt.preventDefault();
+                    invoke(evt);
+                });
+                li.hover(
                     function() {
                         $(this).css({ 'background-color': 'rgb(200,200,200)' });
                     },
@@ -209,6 +229,110 @@ export default class OncoprintTrackOptionsView {
             .addClass(SEPARATOR_CLASS);
     }
 
+    // Hover-expanding parent item that reveals a floating submenu with leaf
+    // options. Used for nested "Sort by > <category>" style menus without
+    // cluttering the top-level dropdown.
+    private static $makeDropdownSubmenuOption(
+        text: string,
+        children: CustomTrackOption[],
+        track_id: TrackId,
+        closeOuterMenu: () => void
+    ) {
+        const $li = $('<li>')
+            .text(text + ' \u25B8')
+            .css({
+                'font-weight': 'normal',
+                'font-size': 12,
+                'border-bottom': '1px solid rgba(0,0,0,0.3)',
+                cursor: 'default',
+                position: 'relative',
+            })
+            .addClass('has-submenu');
+        const $submenu = $('<ul>')
+            .appendTo($li)
+            .css({
+                position: 'absolute',
+                left: '100%',
+                top: 0,
+                display: 'none',
+                'list-style-type': 'none',
+                padding: 0,
+                margin: 0,
+                'padding-left': '6px',
+                'padding-right': '6px',
+                'background-color': 'rgb(255,255,255)',
+                border: '1px solid rgba(0,0,0,0.2)',
+                'z-index': 100,
+                'min-width': '140px',
+            });
+        let clickedOpen = false;
+        for (const child of children) {
+            if (child.separator) {
+                $submenu.append(
+                    OncoprintTrackOptionsView.$makeDropdownSeparator()
+                );
+                continue;
+            }
+            $submenu.append(
+                OncoprintTrackOptionsView.$makeDropdownOption(
+                    child.label || '',
+                    child.weight || 'normal',
+                    child.disabled,
+                    child.onClick &&
+                        function(evt) {
+                            evt.stopPropagation();
+                            clickedOpen = false;
+                            $submenu.hide();
+                            child.onClick!(track_id);
+                            closeOuterMenu();
+                        }
+                )
+            );
+        }
+        $li.hover(
+            function() {
+                $(this).css({ 'background-color': 'rgb(200,200,200)' });
+                $submenu.show();
+            },
+            function() {
+                $(this).css({ 'background-color': 'rgba(255,255,255,0)' });
+                if (!clickedOpen) $submenu.hide();
+            }
+        );
+        // Touch devices have no hover — tapping the parent toggles the submenu
+        // and keeps it open until a child is picked or the outer menu closes.
+        $li.css({ 'touch-action': 'manipulation' });
+        let parentFired = false;
+        const toggleSubmenu = function(evt: any) {
+            if (
+                $(evt.target)
+                    .closest('ul')
+                    .is($submenu)
+            )
+                return;
+            if (parentFired) return;
+            parentFired = true;
+            setTimeout(() => {
+                parentFired = false;
+            }, 400);
+            evt.stopPropagation();
+            clickedOpen = !clickedOpen;
+            $submenu.toggle(clickedOpen);
+        };
+        $li.on('click', toggleSubmenu);
+        $li.on('touchend', function(evt) {
+            if (
+                $(evt.target)
+                    .closest('ul')
+                    .is($submenu)
+            )
+                return;
+            evt.preventDefault();
+            toggleSubmenu(evt);
+        });
+        return $li;
+    }
+
     // 11/2/2023 we are removing sort arrow
     // leaving commented out if it needs to be restored based on complaint
     private static renderSortArrow(
@@ -302,7 +426,14 @@ export default class OncoprintTrackOptionsView {
                 }
             }
         );
-        $img.click(function(evt) {
+        $img.css({ 'touch-action': 'manipulation' });
+        let imgFired = false;
+        const toggleImgMenu = function(evt: any) {
+            if (imgFired) return;
+            imgFired = true;
+            setTimeout(() => {
+                imgFired = false;
+            }, 400);
             evt.stopPropagation();
             if ($dropdown.is(':visible')) {
                 $img.addClass(TOGGLE_BTN_OPEN_CLASS);
@@ -312,21 +443,40 @@ export default class OncoprintTrackOptionsView {
                 self.showTrackMenu(track_id);
             }
             self.hideMenusExcept(track_id);
+        };
+        $img.on('click', toggleImgMenu);
+        $img.on('touchend', function(evt) {
+            evt.preventDefault();
+            toggleImgMenu(evt);
         });
 
+        // Gray out Move up/down only when the track belongs to a clustered
+        // group AND there are siblings to move against. A single-track group
+        // can never be "clustered" in any meaningful way, and showing the
+        // items as disabled there is confusing (users see a grayed-out option
+        // with no explanation).
+        const containingTracks = model.getContainingTrackGroup(track_id) || [];
         const movingDisabled =
             model.getTrackMovable(track_id) &&
-            model.isTrackInClusteredGroup(track_id);
+            model.isTrackInClusteredGroup(track_id) &&
+            containingTracks.length > 1;
 
         if (model.getTrackMovable(track_id)) {
+            const customMoveUp = model.getTrackOnMoveUp(track_id);
+            const customMoveDown = model.getTrackOnMoveDown(track_id);
+            const moveUpDisabled =
+                movingDisabled || model.isTrackMoveUpDisabled(track_id);
+            const moveDownDisabled =
+                movingDisabled || model.isTrackMoveDownDisabled(track_id);
             $dropdown.append(
                 OncoprintTrackOptionsView.$makeDropdownOption(
                     'Move up',
                     'normal',
-                    movingDisabled,
+                    moveUpDisabled,
                     function(evt) {
                         evt.stopPropagation();
-                        self.moveUpCallback(track_id);
+                        if (customMoveUp) customMoveUp();
+                        else self.moveUpCallback(track_id);
                     }
                 )
             );
@@ -334,10 +484,11 @@ export default class OncoprintTrackOptionsView {
                 OncoprintTrackOptionsView.$makeDropdownOption(
                     'Move down',
                     'normal',
-                    movingDisabled,
+                    moveDownDisabled,
                     function(evt) {
                         evt.stopPropagation();
-                        self.moveDownCallback(track_id);
+                        if (customMoveDown) customMoveDown();
+                        else self.moveDownCallback(track_id);
                     }
                 )
             );
@@ -509,6 +660,15 @@ export default class OncoprintTrackOptionsView {
                         $dropdown.append(
                             OncoprintTrackOptionsView.$makeDropdownSeparator()
                         );
+                    } else if (option.children && option.children.length) {
+                        $dropdown.append(
+                            OncoprintTrackOptionsView.$makeDropdownSubmenuOption(
+                                option.label || '',
+                                option.children,
+                                track_id,
+                                () => self.hideTrackMenu(track_id)
+                            )
+                        );
                     } else {
                         $dropdown.append(
                             OncoprintTrackOptionsView.$makeDropdownOption(

package/src/js/oncoprintwebglcellview.ts

@@ -630,9 +630,13 @@ export default class OncoprintWebGLCellView {
                 self.ctx.viewportWidth,
                 self.ctx.viewportHeight,
                 0,
-                -5,
+                -1000,
                 1000
-            ); // y axis inverted so that y increases down like SVG
+            ); // y axis inverted so that y increases down like SVG.
+            // z_index in packed vertex positions equals shape-list index, which
+            // for stacked-bar rule sets is one-per-category. A wide near plane
+            // (-1000) keeps shapes with z>5 from being frustum-clipped, which
+            // would shorten bars for tracks with 7+ categories.
             self.pMatrix = pMatrix;
         })(this);
     }