oncoprintjs 6.0.3 → 6.0.5

package/dist/js/oncoprintmodel.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="jquery" />
 /// <reference types="jstree" />
+import CachedProperty from './CachedProperty';
 import { RuleSet, RuleSetParams, RuleWithId } from './oncoprintruleset';
 import { InitParams } from './oncoprint';
 import { ComputedShapeParams } from './oncoprintshape';
+import { OncoprintGapConfig } from './oncoprintwebglcellview';
 export declare type ColumnId = string;
 export declare type ColumnIndex = number;
 export declare type TrackId = number;
@@ -49,6 +51,7 @@ export declare type CustomTrackOption = {
     onClick?: (id: TrackId) => void;
     weight?: string;
     disabled?: boolean;
+    gapLabelsFn?: (model: OncoprintModel) => OncoprintGapConfig[];
 };
 export declare type CustomTrackGroupOption = {
     label?: string;
@@ -70,6 +73,7 @@ export declare type UserTrackSpec<D> = {
     onClickRemoveInTrackMenu?: (track_id: TrackId) => void;
     label?: string;
     sublabel?: string;
+    gapLabelFn?: (model: OncoprintModel) => string[];
     html_label?: string;
     track_label_color?: string;
     track_label_circle_color?: string;
@@ -143,6 +147,9 @@ export declare type ColumnProp<T> = {
 export declare type ColumnIdSet = {
     [columnId: string]: any;
 };
+export declare type OncoprintDataGroupsByTrackId<T> = Record<string, OncoprintDataGroups<T>[]>;
+export declare type OncoprintDataGroups<T> = OncoprintDataGroup<T>[];
+export declare type OncoprintDataGroup<T> = T[];
 export default class OncoprintModel {
     private sort_config;
     rendering_suppressed_depth: number;
@@ -224,7 +231,8 @@ export default class OncoprintModel {
     private zoomed_column_left;
     private column_left_no_padding;
     private precomputed_comparator;
-    private ids_after_a_gap;
+    ids_after_a_gap: CachedProperty<ColumnIdSet>;
+    data_groups: CachedProperty<OncoprintDataGroupsByTrackId<TrackProp<ColumnProp<Datum>>>>;
     private column_indexes_after_a_gap;
     private track_groups;
     private unclustered_track_group_order?;
@@ -328,6 +336,7 @@ export default class OncoprintModel {
     getZoomedColumnLeft(id: ColumnId): number;
     getOncoprintHeight(base?: boolean): number;
     getOncoprintWidth(base?: boolean): number;
+    showGaps(): boolean;
     getOncoprintWidthNoColumnPaddingNoGaps(): number;
     getColumnLabels(): ColumnProp<ColumnLabel>;
     setColumnLabels(labels: ColumnProp<ColumnLabel>): void;
@@ -372,6 +381,7 @@ export default class OncoprintModel {
     getLastExpansion(track_id: TrackId): number;
     getTrackCustomOptions(track_id: TrackId): CustomTrackOption[];
     setTrackCustomOptions(track_id: TrackId, options: CustomTrackOption[] | undefined): void;
+    getGapOffsets(): any;
     setTrackInfoTooltip(track_id: TrackId, $tooltip_elt: JQuery | undefined): void;
     $getTrackInfoTooltip(track_id: TrackId): JQuery<HTMLElement>;
     getRuleSet(track_id: TrackId): RuleSet;

package/dist/js/oncoprintwebglcellview.d.ts

@@ -4,6 +4,15 @@ import OncoprintModel, { ColumnId, TrackId, TrackProp } from './oncoprintmodel';
 import OncoprintToolTip from './oncoprinttooltip';
 import { CellClickCallback, CellMouseOverCallback } from './oncoprint';
 declare type ColorBank = number[];
+declare type OncoprintGap = {
+    origin_x: number;
+    origin_y: number;
+    data: OncoprintGapConfig;
+};
+export declare type OncoprintGapConfig = {
+    labelFormatter: () => string;
+    tooltipFormatter: () => string;
+};
 export declare type OncoprintWebGLContext = WebGLRenderingContext & {
     viewportWidth: number;
     viewportHeight: number;
@@ -39,6 +48,7 @@ export default class OncoprintWebGLCellView {
     private $container;
     private $canvas;
     private $overlay_canvas;
+    private $gap_canvas;
     private $column_label_canvas;
     private $dummy_scroll_div_contents;
     private tooltip;
@@ -51,6 +61,7 @@ export default class OncoprintWebGLCellView {
     visible_area_width: number;
     private mouseMoveHandler;
     private ctx;
+    private gap_ctx;
     private ext;
     private overlay_ctx;
     private column_label_ctx;
@@ -78,8 +89,10 @@ export default class OncoprintWebGLCellView {
     private is_buffer_empty;
     private color_texture;
     private id_to_first_vertex_index;
-    constructor($container: JQuery, $canvas: JQuery<HTMLCanvasElement>, $overlay_canvas: JQuery<HTMLCanvasElement>, $column_label_canvas: JQuery<HTMLCanvasElement>, $dummy_scroll_div_contents: JQuery, model: OncoprintModel, tooltip: OncoprintToolTip, highlight_area_callback: undefined | ((left: number, right: number) => void), cell_over_callback: CellMouseOverCallback, cell_click_callback: CellClickCallback);
+    constructor($container: JQuery, $canvas: JQuery<HTMLCanvasElement>, $overlay_canvas: JQuery<HTMLCanvasElement>, $gap_canvas: JQuery<HTMLCanvasElement>, $column_label_canvas: JQuery<HTMLCanvasElement>, $dummy_scroll_div_contents: JQuery, model: OncoprintModel, tooltip: OncoprintToolTip, highlight_area_callback: undefined | ((left: number, right: number) => void), cell_over_callback: CellMouseOverCallback, cell_click_callback: CellClickCallback);
+    private drawGapLabel;
     private getNewCanvas;
+    private getGapContext;
     private getWebGLCanvasContext;
     private createShaderProgram;
     private createShader;
@@ -94,6 +107,8 @@ export default class OncoprintWebGLCellView {
     private getColumnIndexesAfterAGap;
     private setUpShaders;
     private resizeAndClear;
+    gapTooltipTargets: OncoprintGap[];
+    hoveredGap: OncoprintGap;
     private renderAllTracks;
     private static getColumnLabelsFontSize;
     private prepareContextForColumnLabelText;
@@ -162,6 +177,7 @@ export default class OncoprintWebGLCellView {
         width: number;
         height: number;
     };
+    getGaps(model: OncoprintModel, track_id: number): OncoprintGapConfig[];
     toSVGGroup(model: OncoprintModel, offset_x: number, offset_y: number): SVGGElement;
     destroy(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oncoprintjs",
-  "version": "6.0.3",
+  "version": "6.0.5",
   "description": "A data visualization for cancer genomic data.",
   "types": "./dist/js/oncoprint.d.ts",
   "main": "dist/index.js",
@@ -60,5 +60,5 @@
     "tayden-clusterfck": "^0.7.0",
     "typescript": "4.0.3"
   },
-  "gitHead": "faeca13017380790ba67cacc87bd4fc4ce38fe41"
+  "gitHead": "96b79a82694659deb1b06520d65e98633299055d"
 }

package/src/index.tsx

@@ -9,5 +9,6 @@ export {
 } from './js/oncoprint';
 
 export * from './js/oncoprintruleset';
+export { default as OncoprintModel } from './js/oncoprintmodel';
 export * from './js/oncoprintmodel';
 export { default as shapeToSvg } from './js/oncoprintshapetosvg';

package/src/js/oncoprint.ts

@@ -192,6 +192,11 @@ export default class Oncoprint {
             .css({ position: 'absolute', top: '0px', left: '0px' })
             .addClass('noselect') as JQuery<HTMLCanvasElement>;
 
+        const $gap_canvas = $('<canvas></canvas>')
+            .attr({ width: '0px', height: '0px' })
+            .css({ position: 'absolute', top: '0px', left: '0px' })
+            .addClass('noselect gap_canvas') as JQuery<HTMLCanvasElement>;
+
         const $dummy_scroll_div = $('<div>')
             .css({
                 position: 'absolute',
@@ -270,6 +275,7 @@ export default class Oncoprint {
         $minimap_div.appendTo($ctr);
 
         $cell_canvas.appendTo($cell_div);
+        $gap_canvas.appendTo($cell_div);
         $cell_overlay_canvas.appendTo($cell_div);
         $column_label_canvas.appendTo($cell_div); // column labels should show above the overlay canvas because the text should show over the highlights
         $dummy_scroll_div.appendTo($cell_div);
@@ -300,6 +306,7 @@ export default class Oncoprint {
             $cell_div,
             $cell_canvas,
             $cell_overlay_canvas,
+            $gap_canvas,
             $column_label_canvas,
             $dummy_scroll_div_contents,
             this.model,
@@ -756,6 +763,7 @@ export default class Oncoprint {
         if (this.webgl_unavailable || this.destroyed) {
             return [];
         }
+
         // Update model
         const track_ids: TrackId[] = [];
         const library_params_list = (params_list as LibraryTrackSpec<

package/src/js/oncoprintmodel.ts

@@ -19,6 +19,7 @@ import { ComputedShapeParams } from './oncoprintshape';
 import { CaseItem, EntityItem } from './workers/clustering-worker';
 import PrecomputedComparator from './precomputedcomparator';
 import { calculateHeaderTops, calculateTrackTops } from './modelutils';
+import { OncoprintGapConfig } from './oncoprintwebglcellview';
 
 export type ColumnId = string;
 export type ColumnIndex = number;
@@ -68,6 +69,7 @@ export type CustomTrackOption = {
     onClick?: (id: TrackId) => void;
     weight?: string;
     disabled?: boolean;
+    gapLabelsFn?: (model: OncoprintModel) => OncoprintGapConfig[];
 };
 export type CustomTrackGroupOption = {
     label?: string;
@@ -89,6 +91,7 @@ export type UserTrackSpec<D> = {
     onClickRemoveInTrackMenu?: (track_id: TrackId) => void;
     label?: string;
     sublabel?: string;
+    gapLabelFn?: (model: OncoprintModel) => string[];
     html_label?: string;
     track_label_color?: string;
     track_label_circle_color?: string;
@@ -235,6 +238,15 @@ export type TrackGroupProp<T> = { [trackGroupIndex: number]: T };
 export type ColumnProp<T> = { [columnId: string]: T };
 export type ColumnIdSet = { [columnId: string]: any };
 
+export type OncoprintDataGroupsByTrackId<T> = Record<
+    string,
+    OncoprintDataGroups<T>[]
+>;
+
+export type OncoprintDataGroups<T> = OncoprintDataGroup<T>[];
+
+export type OncoprintDataGroup<T> = T[];
+
 export default class OncoprintModel {
     // Global properties
     private sort_config: SortConfig;
@@ -333,7 +345,12 @@ export default class OncoprintModel {
     private precomputed_comparator: CachedProperty<
         TrackProp<PrecomputedComparator<Datum>>
     >;
-    private ids_after_a_gap: CachedProperty<ColumnIdSet>;
+    public ids_after_a_gap: CachedProperty<ColumnIdSet>;
+
+    public data_groups: CachedProperty<
+        OncoprintDataGroupsByTrackId<TrackProp<ColumnProp<Datum>>>
+    >;
+
     private column_indexes_after_a_gap: CachedProperty<number[]>;
 
     private track_groups: TrackGroup[];
@@ -571,6 +588,61 @@ export default class OncoprintModel {
 
             return gapIds;
         });
+
+        this.data_groups = new CachedProperty({}, function(
+            model: OncoprintModel
+        ) {
+            // multiple tracks can have gaps
+            // the groups will be segemented heirarchically
+            const trackIdsWithGaps = model
+                .getTracks()
+                .filter(trackId => model.getTrackShowGaps(trackId));
+
+            const data_groups = _.reduce(
+                model.track_label,
+                (
+                    agg: OncoprintDataGroupsByTrackId<
+                        TrackProp<ColumnProp<Datum>>
+                    >,
+                    label,
+                    trackId: number
+                ) => {
+                    // key the data by the datum UID
+                    const keyedData = _.keyBy(
+                        model.track_data[trackId],
+                        m => m.uid
+                    );
+                    const groups = trackIdsWithGaps.map(id => {
+                        // we need the datum in sorted order
+                        const data = model.id_order.map(d => keyedData[d]);
+
+                        const indexesAfterGap = model.column_indexes_after_a_gap.get();
+
+                        // the indexes come AFTER a gap, so we need to include zero up front
+                        // in order to get initial slice of data
+                        const groupStartIndexes = [0, ...indexesAfterGap];
+
+                        // using the group start indexes, slice the id data into corresponding groups
+                        return groupStartIndexes.map((n, i) => {
+                            if (i === groupStartIndexes.length - 1) {
+                                // we're at last one, so last group
+                                return data.slice(n);
+                            } else {
+                                return data.slice(n, groupStartIndexes[i + 1]);
+                            }
+                        });
+                    });
+
+                    agg[label.trim()] = groups;
+
+                    return agg;
+                },
+                {}
+            );
+
+            return data_groups;
+        });
+
         this.visible_id_order.addBoundProperty(this.ids_after_a_gap);
         this.precomputed_comparator.addBoundProperty(this.ids_after_a_gap);
 
@@ -1070,7 +1142,11 @@ export default class OncoprintModel {
     }
 
     public getGapSize() {
-        return this.getCellWidth(true);
+        if (this.showGaps()) {
+            return 50; // this creates enough space for 3 digit percentage
+        } else {
+            return this.getCellWidth(true);
+        }
     }
 
     public getCellWidth(base?: boolean) {
@@ -1804,7 +1880,16 @@ export default class OncoprintModel {
         const lastIdLeft = base
             ? this.getColumnLeft(lastId)
             : this.getZoomedColumnLeft(lastId);
-        return lastIdLeft + this.getCellWidth(base) + 1; // this fixes some edge case issues with scrolling
+
+        // when gaps are showing, we need to add space at the end of the
+        // oncoprint to accomodate the label
+        const lastGap = this.showGaps() ? this.getGapSize() : 0;
+
+        return lastIdLeft + this.getCellWidth(base) + lastGap + 1; // this fixes some edge case issues with scrolling
+    }
+
+    public showGaps() {
+        return _.some(this.track_show_gaps);
     }
 
     public getOncoprintWidthNoColumnPaddingNoGaps() {
@@ -2032,6 +2117,28 @@ export default class OncoprintModel {
         this.track_custom_options[track_id] = options;
     }
 
+    // get the pixel offset (from the grid origin) for the gaps based
+    public getGapOffsets(): any {
+        const offsets = _(this.ids_after_a_gap.get())
+            .keys()
+            .map(num => this.getZoomedColumnLeft(num))
+            .sort((a, b) => a - b)
+            .value();
+
+        // we only want to include this if gaps are on
+        if (this.showGaps) {
+            const last =
+                this.getZoomedColumnLeft(
+                    this.id_order[this.id_order.length - 1]
+                ) +
+                this.getGapSize() +
+                this.cell_width +
+                this.cell_padding;
+            offsets.push(last);
+        }
+        return offsets;
+    }
+
     public setTrackInfoTooltip(
         track_id: TrackId,
         $tooltip_elt: JQuery | undefined

package/src/js/oncoprinttrackinfoview.ts

@@ -2,6 +2,7 @@ import svgfactory from './svgfactory';
 import $ from 'jquery';
 import OncoprintToolTip from './oncoprinttooltip';
 import OncoprintModel from './oncoprintmodel';
+import { isNumber } from 'lodash';
 
 export default class OncoprintTrackInfoView {
     private $ctr: JQuery;
@@ -25,7 +26,7 @@ export default class OncoprintTrackInfoView {
             })
             .appendTo(this.$div);
         this.$text_ctr = $('<div></div>')
-            .css({ position: 'absolute' })
+            .css({ position: 'absolute', overflow: 'visible', width: '100%' })
             .appendTo(this.$ctr);
     }
 
@@ -68,13 +69,33 @@ export default class OncoprintTrackInfoView {
                         'font-family': self.font_family,
                         'font-weight': self.font_weight,
                         'font-size': font_size,
+                        right: '11px',
                     })
                     .addClass('noselect');
                 const text = model.getTrackInfo(tracks[i]);
                 if (!text) {
                     return;
                 }
-                $new_label.text(text);
+
+                const num = text.match(/^[\d\.]*/)?.[0];
+                let suffix = text.match(/[^\d]*$/)?.[0];
+
+                const float = parseFloat(num);
+                let formattedPercent = '';
+
+                if (isNaN(float)) {
+                    formattedPercent = 'N/P';
+                    suffix = ''; // we don't want any suffix in this case
+                } else if (isNumber(float)) {
+                    formattedPercent =
+                        float < 1 && float > 0
+                            ? '<1'
+                            : Math.round(float).toString();
+                } else {
+                    // do nothing
+                }
+
+                $new_label.text(formattedPercent + suffix);
                 $new_label.appendTo(self.$text_ctr);
                 self.$label_elts.push($new_label);
                 setTimeout(function() {

package/src/js/oncoprinttrackoptionsview.ts

@@ -206,22 +206,24 @@ export default class OncoprintTrackOptionsView {
             .addClass(SEPARATOR_CLASS);
     }
 
+    // 11/2/2023 we are removing sort arrow
+    // leaving commented out if it needs to be restored based on complaint
     private static renderSortArrow(
         $sortarrow: JQuery,
         model: OncoprintModel,
         track_id: TrackId
     ) {
-        let sortarrow_char = '';
-        if (model.isTrackSortDirectionChangeable(track_id)) {
-            sortarrow_char = {
-                '1':
-                    '<i class="fa fa-signal" aria-hidden="true" title="Sorted ascending"></i>',
-                '-1':
-                    '<i class="fa fa-signal" style="transform: scaleX(-1);" aria-hidden="true" title="Sorted descending"></i>',
-                '0': '',
-            }[model.getTrackSortDirection(track_id)];
-        }
-        $sortarrow.html(sortarrow_char);
+        // let sortarrow_char = '';
+        // if (model.isTrackSortDirectionChangeable(track_id)) {
+        //     sortarrow_char = {
+        //         '1':
+        //             '<i class="fa fa-signal" aria-hidden="true" title="Sorted ascending"></i>',
+        //         '-1':
+        //             '<i class="fa fa-signal" style="transform: scaleX(-1);" aria-hidden="true" title="Sorted descending"></i>',
+        //         '0': '',
+        //     }[model.getTrackSortDirection(track_id)];
+        // }
+        // $sortarrow.html(sortarrow_char);
     }
 
     private renderTrackOptions(