oncoprintjs 6.0.2 → 6.0.4

package/dist/index.js

@@ -1395,6 +1395,12 @@ var OncoprintModel = /** @class */ (function () {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "data_groups", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "column_indexes_after_a_gap", {
             enumerable: true,
             configurable: true,
@@ -1616,6 +1622,38 @@ var OncoprintModel = /** @class */ (function () {
             }
             return gapIds;
         });
+        this.data_groups = new CachedProperty({}, function (model) {
+            // multiple tracks can have gaps
+            // the groups will be segemented heirarchically
+            var trackIdsWithGaps = model
+                .getTracks()
+                .filter(function (trackId) { return model.getTrackShowGaps(trackId); });
+            var data_groups = ___default["default"].reduce(model.track_label, function (agg, label, trackId) {
+                // key the data by the datum UID
+                var keyedData = ___default["default"].keyBy(model.track_data[trackId], function (m) { return m.uid; });
+                var groups = trackIdsWithGaps.map(function (id) {
+                    // we need the datum in sorted order
+                    var data = model.id_order.map(function (d) { return keyedData[d]; });
+                    var 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
+                    var groupStartIndexes = tslib.__spreadArrays([0], indexesAfterGap);
+                    // using the group start indexes, slice the id data into corresponding groups
+                    return groupStartIndexes.map(function (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);
         this.column_indexes_after_a_gap = new CachedProperty([], function (model) {
@@ -2195,7 +2233,12 @@ var OncoprintModel = /** @class */ (function () {
         configurable: true,
         writable: true,
         value: function () {
-            return this.getCellWidth(true);
+            if (this.showGaps()) {
+                return 50; // this creates enough space for 3 digit percentage
+            }
+            else {
+                return this.getCellWidth(true);
+            }
         }
     });
     Object.defineProperty(OncoprintModel.prototype, "getCellWidth", {
@@ -3021,7 +3064,18 @@ var OncoprintModel = /** @class */ (function () {
             var 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
+            var lastGap = this.showGaps() ? this.getGapSize() : 0;
+            return lastIdLeft + this.getCellWidth(base) + lastGap + 1; // this fixes some edge case issues with scrolling
+        }
+    });
+    Object.defineProperty(OncoprintModel.prototype, "showGaps", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            return ___default["default"].some(this.track_show_gaps);
         }
     });
     Object.defineProperty(OncoprintModel.prototype, "getOncoprintWidthNoColumnPaddingNoGaps", {
@@ -3340,6 +3394,29 @@ var OncoprintModel = /** @class */ (function () {
             this.track_custom_options[track_id] = options;
         }
     });
+    // get the pixel offset (from the grid origin) for the gaps based
+    Object.defineProperty(OncoprintModel.prototype, "getGapOffsets", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            var _this = this;
+            var offsets = ___default["default"](this.ids_after_a_gap.get())
+                .keys()
+                .map(function (num) { return _this.getZoomedColumnLeft(num); })
+                .sort(function (a, b) { return a - b; })
+                .value();
+            // we only want to include this if gaps are on
+            if (this.showGaps) {
+                var last = this.getZoomedColumnLeft(this.id_order[this.id_order.length - 1]) +
+                    this.getGapSize() +
+                    this.cell_width +
+                    this.cell_padding;
+                offsets.push(last);
+            }
+            return offsets;
+        }
+    });
     Object.defineProperty(OncoprintModel.prototype, "setTrackInfoTooltip", {
         enumerable: false,
         configurable: true,
@@ -4438,7 +4515,7 @@ var COLUMN_LABEL_ANGLE = 65;
 var COLUMN_LABEL_MARGIN = 30;
 var CELL_HIGHLIGHT_STROKE = 'rgba(0,0,0,0.5)';
 var OncoprintWebGLCellView = /** @class */ (function () {
-    function OncoprintWebGLCellView($container, $canvas, $overlay_canvas, $column_label_canvas, $dummy_scroll_div_contents, model, tooltip, highlight_area_callback, cell_over_callback, cell_click_callback) {
+    function OncoprintWebGLCellView($container, $canvas, $overlay_canvas, $gap_canvas, $column_label_canvas, $dummy_scroll_div_contents, model, tooltip, highlight_area_callback, cell_over_callback, cell_click_callback) {
         Object.defineProperty(this, "$container", {
             enumerable: true,
             configurable: true,
@@ -4457,6 +4534,12 @@ var OncoprintWebGLCellView = /** @class */ (function () {
             writable: true,
             value: $overlay_canvas
         });
+        Object.defineProperty(this, "$gap_canvas", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: $gap_canvas
+        });
         Object.defineProperty(this, "$column_label_canvas", {
             enumerable: true,
             configurable: true,
@@ -4529,6 +4612,12 @@ var OncoprintWebGLCellView = /** @class */ (function () {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "gap_ctx", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "ext", {
             enumerable: true,
             configurable: true,
@@ -4661,6 +4750,18 @@ var OncoprintWebGLCellView = /** @class */ (function () {
             writable: true,
             value: {}
         }); // index of first vertex corresponding to given id for given track, e.g. 0, 3, 6, ...
+        Object.defineProperty(this, "gapTooltipTargets", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "hoveredGap", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.getWebGLContextAndSetUpMatrices();
         this.setUpShaders(model);
         this.getOverlayContextAndClear();
@@ -4767,9 +4868,28 @@ var OncoprintWebGLCellView = /** @class */ (function () {
                             self.scroll_y, model.getTrackTooltipFn(overlapping_cells.track)(overlapping_data));
                     }
                     else {
-                        tooltip.hideIfNotAlreadyGoingTo(150);
                         overlapping_cells = null;
                     }
+                    // find a gap which is in range of mouse position
+                    var overlappingGap = self.gapTooltipTargets.find(function (t) {
+                        return (___default["default"].inRange(mouseX - t.origin_x, 0, 20) &&
+                            ___default["default"].inRange(t.origin_y - mouseY, -10, 15));
+                    });
+                    // if there is no gap, turn
+                    if (overlappingGap === undefined) {
+                        self.hoveredGap = undefined;
+                    }
+                    else if (self.hoveredGap === overlappingGap) ;
+                    else {
+                        // we have a new hovered gap, so show a tooltip
+                        var clientRect = self.$overlay_canvas[0].getBoundingClientRect();
+                        self.hoveredGap = overlappingGap;
+                        tooltip.center = false;
+                        tooltip.show(250, clientRect.left + overlappingGap.origin_x, clientRect.top + overlappingGap.origin_y - 20, $__default["default"]("<span>" + overlappingGap.data.tooltipFormatter() + "</span>"), false);
+                    }
+                    if (!overlapping_data && !overlappingGap) {
+                        tooltip.hideIfNotAlreadyGoingTo(150);
+                    }
                 }
                 else {
                     overlapping_cells = null;
@@ -4813,6 +4933,22 @@ var OncoprintWebGLCellView = /** @class */ (function () {
             self.highlightHighlightedTracks(model);
         });
     }
+    Object.defineProperty(OncoprintWebGLCellView.prototype, "drawGapLabel", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (txt, x, y) {
+            this.gap_ctx.font = '15pt Arial';
+            this.gap_ctx.textAlign = 'right';
+            var origin_x = x * this.supersampling_ratio + 52;
+            var origin_y = y * this.supersampling_ratio + 4;
+            this.gap_ctx.fillText(txt, origin_x, origin_y);
+            return {
+                origin_x: x,
+                origin_y: y,
+            };
+        }
+    });
     Object.defineProperty(OncoprintWebGLCellView.prototype, "getNewCanvas", {
         enumerable: false,
         configurable: true,
@@ -4828,6 +4964,19 @@ var OncoprintWebGLCellView = /** @class */ (function () {
             this.ext = null;
         }
     });
+    Object.defineProperty(OncoprintWebGLCellView.prototype, "getGapContext", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            try {
+                return this.$gap_canvas[0].getContext('2d');
+            }
+            catch (e) {
+                return null;
+            }
+        }
+    });
     Object.defineProperty(OncoprintWebGLCellView.prototype, "getWebGLCanvasContext", {
         enumerable: false,
         configurable: true,
@@ -4991,6 +5140,7 @@ var OncoprintWebGLCellView = /** @class */ (function () {
         configurable: true,
         writable: true,
         value: function () {
+            this.gap_ctx = this.getGapContext();
             this.ctx = this.getWebGLCanvasContext();
             if (this.ctx) {
                 this.ext = this.ctx.getExtension('ANGLE_instanced_arrays');
@@ -5069,6 +5219,11 @@ var OncoprintWebGLCellView = /** @class */ (function () {
             this.dummy_scroll_div_client_size.update();
             this.$canvas[0].height = this.supersampling_ratio * height;
             this.$canvas[0].style.height = height + 'px';
+            this.$gap_canvas[0].height = this.supersampling_ratio * height;
+            this.$gap_canvas[0].style.height = height + 'px';
+            this.$gap_canvas[0].width =
+                this.supersampling_ratio * visible_area_width;
+            this.$gap_canvas[0].style.width = visible_area_width + 'px';
             this.$overlay_canvas[0].height = this.supersampling_ratio * height;
             this.$overlay_canvas[0].style.height = height + 'px';
             this.$column_label_canvas[0].height = this.supersampling_ratio * height;
@@ -5094,6 +5249,7 @@ var OncoprintWebGLCellView = /** @class */ (function () {
         configurable: true,
         writable: true,
         value: function (model, dont_resize) {
+            var _this = this;
             if (this.rendering_suppressed) {
                 return;
             }
@@ -5123,75 +5279,98 @@ var OncoprintWebGLCellView = /** @class */ (function () {
             }
             this.ctx.clearColor(1.0, 1.0, 1.0, 1.0);
             this.ctx.clear(this.ctx.COLOR_BUFFER_BIT | this.ctx.DEPTH_BUFFER_BIT);
+            this.gap_ctx.clearRect(0, 0, this.$gap_canvas[0].width, this.$gap_canvas[0].height);
+            var gapOffsets = model.getGapOffsets();
             var tracks = model.getTracks();
-            for (var i = 0; i < tracks.length; i++) {
+            this.gapTooltipTargets = [];
+            var _loop_1 = function (i) {
                 var track_id = tracks[i];
                 var cell_top = model.getCellTops(track_id);
                 var cell_height = model.getCellHeight(track_id);
+                if (model.showGaps()) {
+                    var gaps = this_1.getGaps(model, track_id);
+                    if (gaps) {
+                        gaps.forEach(function (gap, i) {
+                            var x = gapOffsets[i] - scroll_x - model.getGapSize();
+                            var y = model.getZoomedTrackTops()[track_id] +
+                                cell_height -
+                                scroll_y;
+                            _this.drawGapLabel(gap.labelFormatter(), x, y);
+                            _this.gapTooltipTargets.push({
+                                origin_x: x,
+                                origin_y: y,
+                                data: gap,
+                            });
+                        });
+                    }
+                }
                 if (cell_top / zoom_y >= window_bottom ||
                     (cell_top + cell_height) / zoom_y < window_top) {
-                    // vertical clipping
-                    continue;
+                    return "continue";
                 }
-                var buffers = this.getTrackBuffers(track_id);
+                var buffers = this_1.getTrackBuffers(track_id);
                 if (buffers.position.numItems === 0) {
-                    continue;
+                    return "continue";
                 }
                 for (var _i = 0, _a = [false, true]; _i < _a.length; _i++) {
                     var forSpecificShapes = _a[_i];
-                    var shader_program = this.shader_program;
-                    this.ctx.useProgram(shader_program);
+                    var shader_program = this_1.shader_program;
+                    this_1.ctx.useProgram(shader_program);
                     if (forSpecificShapes) {
-                        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, buffers.position);
-                        this.ctx.vertexAttribPointer(shader_program.vertexPositionAttribute, buffers.position.itemSize, this.ctx.FLOAT, false, 0, 0);
-                        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, buffers.color);
-                        this.ctx.vertexAttribPointer(shader_program.vertexColorAttribute, buffers.color.itemSize, this.ctx.FLOAT, false, 0, 0);
-                        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, buffers.column);
-                        this.ctx.vertexAttribPointer(shader_program.vertexOncoprintColumnAttribute, buffers.column.itemSize, this.ctx.FLOAT, false, 0, 0);
+                        this_1.ctx.bindBuffer(this_1.ctx.ARRAY_BUFFER, buffers.position);
+                        this_1.ctx.vertexAttribPointer(shader_program.vertexPositionAttribute, buffers.position.itemSize, this_1.ctx.FLOAT, false, 0, 0);
+                        this_1.ctx.bindBuffer(this_1.ctx.ARRAY_BUFFER, buffers.color);
+                        this_1.ctx.vertexAttribPointer(shader_program.vertexColorAttribute, buffers.color.itemSize, this_1.ctx.FLOAT, false, 0, 0);
+                        this_1.ctx.bindBuffer(this_1.ctx.ARRAY_BUFFER, buffers.column);
+                        this_1.ctx.vertexAttribPointer(shader_program.vertexOncoprintColumnAttribute, buffers.column.itemSize, this_1.ctx.FLOAT, false, 0, 0);
                         // make sure to set divisor 0, otherwise the track will only use the first item in the column buffer
-                        this.ext.vertexAttribDivisorANGLE(shader_program.vertexOncoprintColumnAttribute, 0);
+                        this_1.ext.vertexAttribDivisorANGLE(shader_program.vertexOncoprintColumnAttribute, 0);
                     }
                     else {
                         // set up for drawArraysInstanced
                         var universalShapesStart = buffers.position.specificShapesNumItems *
                             buffers.position.itemSize;
-                        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, buffers.position);
-                        this.ctx.vertexAttribPointer(shader_program.vertexPositionAttribute, buffers.position.itemSize, this.ctx.FLOAT, false, 0, 4 * universalShapesStart);
-                        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, buffers.color);
-                        this.ctx.vertexAttribPointer(shader_program.vertexColorAttribute, buffers.color.itemSize, this.ctx.FLOAT, false, 0, 4 * universalShapesStart);
-                        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.simple_count_buffer);
-                        this.ctx.vertexAttribPointer(shader_program.vertexOncoprintColumnAttribute, 1, this.ctx.FLOAT, false, 0, 4 * horz_first_id_in_window_index);
-                        this.ext.vertexAttribDivisorANGLE(shader_program.vertexOncoprintColumnAttribute, 1);
+                        this_1.ctx.bindBuffer(this_1.ctx.ARRAY_BUFFER, buffers.position);
+                        this_1.ctx.vertexAttribPointer(shader_program.vertexPositionAttribute, buffers.position.itemSize, this_1.ctx.FLOAT, false, 0, 4 * universalShapesStart);
+                        this_1.ctx.bindBuffer(this_1.ctx.ARRAY_BUFFER, buffers.color);
+                        this_1.ctx.vertexAttribPointer(shader_program.vertexColorAttribute, buffers.color.itemSize, this_1.ctx.FLOAT, false, 0, 4 * universalShapesStart);
+                        this_1.ctx.bindBuffer(this_1.ctx.ARRAY_BUFFER, this_1.simple_count_buffer);
+                        this_1.ctx.vertexAttribPointer(shader_program.vertexOncoprintColumnAttribute, 1, this_1.ctx.FLOAT, false, 0, 4 * horz_first_id_in_window_index);
+                        this_1.ext.vertexAttribDivisorANGLE(shader_program.vertexOncoprintColumnAttribute, 1);
                     }
-                    this.ctx.activeTexture(this.ctx.TEXTURE0);
-                    this.ctx.bindTexture(this.ctx.TEXTURE_2D, buffers.color_tex.texture);
-                    this.ctx.uniform1i(shader_program.samplerUniform, 0);
-                    this.ctx.uniform1f(shader_program.texSizeUniform, buffers.color_tex.size);
-                    this.ctx.uniform1fv(shader_program.columnsRightAfterGapsUniform, this.getColumnIndexesAfterAGap(model)); // need min size of 1
-                    this.ctx.uniform1f(shader_program.gapSizeUniform, model.getGapSize());
-                    this.ctx.uniformMatrix4fv(shader_program.pMatrixUniform, false, this.pMatrix);
-                    this.ctx.uniformMatrix4fv(shader_program.mvMatrixUniform, false, this.mvMatrix);
-                    this.ctx.uniform1f(shader_program.columnWidthUniform, model.getCellWidth(true) + model.getCellPadding(true));
-                    this.ctx.uniform1f(shader_program.scrollXUniform, scroll_x);
-                    this.ctx.uniform1f(shader_program.scrollYUniform, scroll_y);
-                    this.ctx.uniform1f(shader_program.zoomXUniform, zoom_x);
-                    this.ctx.uniform1f(shader_program.zoomYUniform, zoom_y);
-                    this.ctx.uniform1f(shader_program.offsetYUniform, cell_top);
-                    this.ctx.uniform1f(shader_program.supersamplingRatioUniform, this.supersampling_ratio);
-                    this.ctx.uniform1f(shader_program.positionBitPackBaseUniform, this.position_bit_pack_base);
+                    this_1.ctx.activeTexture(this_1.ctx.TEXTURE0);
+                    this_1.ctx.bindTexture(this_1.ctx.TEXTURE_2D, buffers.color_tex.texture);
+                    this_1.ctx.uniform1i(shader_program.samplerUniform, 0);
+                    this_1.ctx.uniform1f(shader_program.texSizeUniform, buffers.color_tex.size);
+                    this_1.ctx.uniform1fv(shader_program.columnsRightAfterGapsUniform, this_1.getColumnIndexesAfterAGap(model)); // need min size of 1
+                    this_1.ctx.uniform1f(shader_program.gapSizeUniform, model.getGapSize());
+                    this_1.ctx.uniformMatrix4fv(shader_program.pMatrixUniform, false, this_1.pMatrix);
+                    this_1.ctx.uniformMatrix4fv(shader_program.mvMatrixUniform, false, this_1.mvMatrix);
+                    this_1.ctx.uniform1f(shader_program.columnWidthUniform, model.getCellWidth(true) + model.getCellPadding(true));
+                    this_1.ctx.uniform1f(shader_program.scrollXUniform, scroll_x);
+                    this_1.ctx.uniform1f(shader_program.scrollYUniform, scroll_y);
+                    this_1.ctx.uniform1f(shader_program.zoomXUniform, zoom_x);
+                    this_1.ctx.uniform1f(shader_program.zoomYUniform, zoom_y);
+                    this_1.ctx.uniform1f(shader_program.offsetYUniform, cell_top);
+                    this_1.ctx.uniform1f(shader_program.supersamplingRatioUniform, this_1.supersampling_ratio);
+                    this_1.ctx.uniform1f(shader_program.positionBitPackBaseUniform, this_1.position_bit_pack_base);
                     if (forSpecificShapes) {
-                        var first_index = this.id_to_first_vertex_index[track_id][horz_first_id_in_window];
+                        var first_index = this_1.id_to_first_vertex_index[track_id][horz_first_id_in_window];
                         var first_index_out = horz_first_id_after_window === null
                             ? buffers.position.specificShapesNumItems
-                            : this.id_to_first_vertex_index[track_id][horz_first_id_after_window];
-                        this.ctx.drawArrays(this.ctx.TRIANGLES, first_index, first_index_out - first_index);
+                            : this_1.id_to_first_vertex_index[track_id][horz_first_id_after_window];
+                        this_1.ctx.drawArrays(this_1.ctx.TRIANGLES, first_index, first_index_out - first_index);
                     }
                     else {
-                        this.ext.drawArraysInstancedANGLE(this.ctx.TRIANGLES, 0, buffers.position.itemSize *
+                        this_1.ext.drawArraysInstancedANGLE(this_1.ctx.TRIANGLES, 0, buffers.position.itemSize *
                             buffers.position.universalShapesNumItems, horz_first_id_after_window_index -
                             horz_first_id_in_window_index);
                     }
                 }
+            };
+            var this_1 = this;
+            for (var i = 0; i < tracks.length; i++) {
+                _loop_1(i);
             }
             this.ctx.flush();
             this.renderColumnLabels(model, id_order.slice(horz_first_id_in_window_index, horz_first_id_after_window_index === -1
@@ -6200,21 +6379,57 @@ var OncoprintWebGLCellView = /** @class */ (function () {
             return this.dummy_scroll_div_client_size.get();
         }
     });
+    Object.defineProperty(OncoprintWebGLCellView.prototype, "getGaps", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (model, track_id) {
+            var _a;
+            var custom = model.getTrackCustomOptions(track_id);
+            return ___default["default"].isEmpty(model.ids_after_a_gap.get())
+                ? undefined
+                : (_a = custom.find(function (t) { return !!t.gapLabelsFn; })) === null || _a === void 0 ? void 0 : _a.gapLabelsFn(model);
+        }
+    });
     Object.defineProperty(OncoprintWebGLCellView.prototype, "toSVGGroup", {
         enumerable: false,
         configurable: true,
         writable: true,
         value: function (model, offset_x, offset_y) {
+            var _a;
             var root = svgfactory.group(offset_x || 0, offset_y || 0);
             var cell_tops = model.getCellTops();
             var tracks = model.getTracks();
             var zoomedColumnLeft = model.getZoomedColumnLeft();
             // add cell shapes
-            for (var i = 0; i < tracks.length; i++) {
+            var gapOffsets = model.getGapOffsets();
+            var _loop_2 = function (i) {
                 var track_id = tracks[i];
                 var offset_y_1 = cell_tops[track_id];
+                var cell_height = model.getCellHeight(track_id);
                 var universal_shapes = model.getTrackUniversalShapes(track_id, false);
                 var identified_shape_list_list = model.getSpecificShapesForData(track_id, false);
+                var custom = model.getTrackCustomOptions(track_id);
+                if (gapOffsets[0]) {
+                    var gaps = ___default["default"].isEmpty(model.ids_after_a_gap.get())
+                        ? undefined
+                        : (_a = custom.find(function (t) { return !!t.gapLabelsFn; })) === null || _a === void 0 ? void 0 : _a.gapLabelsFn(model);
+                    if (gaps) {
+                        gaps.forEach(function (gap, i) {
+                            var textElt = makesvgelement('text', {
+                                x: gapOffsets[i] - model.getGapSize() + 25,
+                                y: offset_y_1 + cell_height - 3,
+                                'font-size': '10',
+                                'font-family': 'Arial',
+                                'font-weight': 'normal',
+                                'text-anchor': 'end',
+                                'alignment-baseline': 'top',
+                            });
+                            textElt.textContent = gap.labelFormatter();
+                            root.appendChild(textElt);
+                        });
+                    }
+                }
                 for (var j = 0; j < identified_shape_list_list.length; j++) {
                     var id_sl = identified_shape_list_list[j];
                     var id = id_sl.id;
@@ -6233,6 +6448,9 @@ var OncoprintWebGLCellView = /** @class */ (function () {
                         root.appendChild(svgfactory.fromShape(sl[h], offset_x_1, offset_y_1));
                     }
                 }
+            };
+            for (var i = 0; i < tracks.length; i++) {
+                _loop_2(i);
             }
             // add column labels
             var labels = model.getColumnLabels();
@@ -9720,20 +9938,24 @@ var OncoprintTrackOptionsView = /** @class */ (function () {
                 .addClass(SEPARATOR_CLASS);
         }
     });
+    // 11/2/2023 we are removing sort arrow
+    // leaving commented out if it needs to be restored based on complaint
     Object.defineProperty(OncoprintTrackOptionsView, "renderSortArrow", {
         enumerable: false,
         configurable: true,
         writable: true,
         value: function ($sortarrow, model, track_id) {
-            var 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);
         }
     });
     Object.defineProperty(OncoprintTrackOptionsView.prototype, "renderTrackOptions", {
@@ -10827,7 +11049,7 @@ var OncoprintTrackInfoView = /** @class */ (function () {
         })
             .appendTo(this.$div);
         this.$text_ctr = $__default["default"]('<div></div>')
-            .css({ position: 'absolute' })
+            .css({ position: 'absolute', overflow: 'visible', width: '100%' })
             .appendTo(this.$ctr);
     }
     Object.defineProperty(OncoprintTrackInfoView.prototype, "destroyLabelElts", {
@@ -10870,13 +11092,26 @@ var OncoprintTrackInfoView = /** @class */ (function () {
                         'font-family': self.font_family,
                         'font-weight': self.font_weight,
                         'font-size': font_size,
+                        right: '11px',
                     })
                         .addClass('noselect');
                     var text = model.getTrackInfo(tracks[i]);
                     if (!text) {
                         return;
                     }
-                    $new_label.text(text);
+                    var float = parseFloat(text);
+                    var formattedPercent = '';
+                    if (isNaN(float)) {
+                        formattedPercent = 'N/P';
+                    }
+                    else if (_.isNumber(float)) {
+                        formattedPercent =
+                            float < 1 && float > 0
+                                ? '<1%'
+                                : Math.round(float) + '%';
+                    }
+                    else ;
+                    $new_label.text(formattedPercent);
                     $new_label.appendTo(self.$text_ctr);
                     self.$label_elts.push($new_label);
                     setTimeout(function () {
@@ -11179,6 +11414,7 @@ var OncoprintZoomSlider = /** @class */ (function () {
         value: function (params) {
             var $ctr = this.$div;
             var icon_size = Math.round(params.btn_size * 0.7);
+            var icon_div_border_size = 1;
             var icon_padding = Math.round((params.btn_size - icon_size) / 2);
             var $slider_bar = $__default["default"]('<div>')
                 .css({
@@ -11202,7 +11438,7 @@ var OncoprintZoomSlider = /** @class */ (function () {
                 'min-height': params.btn_size,
                 'min-width': params.btn_size,
                 'background-color': '#ffffff',
-                border: 'solid 1px black',
+                border: "solid " + icon_div_border_size + "px black",
                 'border-radius': '3px',
                 cursor: 'pointer',
             })
@@ -11211,8 +11447,8 @@ var OncoprintZoomSlider = /** @class */ (function () {
                 .addClass('icon fa fa-plus')
                 .css({
                 position: 'absolute',
-                top: icon_padding,
-                left: icon_padding,
+                top: icon_padding - icon_div_border_size,
+                left: icon_padding - icon_div_border_size,
                 'min-width': icon_size,
                 'min-height': icon_size,
             })
@@ -11223,7 +11459,7 @@ var OncoprintZoomSlider = /** @class */ (function () {
                 'min-height': params.btn_size,
                 'min-width': params.btn_size,
                 'background-color': '#ffffff',
-                border: 'solid 1px black',
+                border: "solid " + icon_div_border_size + "px black",
                 'border-radius': '3px',
                 cursor: 'pointer',
             })
@@ -11232,8 +11468,8 @@ var OncoprintZoomSlider = /** @class */ (function () {
                 .addClass('icon fa fa-minus')
                 .css({
                 position: 'absolute',
-                top: icon_padding,
-                left: icon_padding,
+                top: icon_padding - icon_div_border_size,
+                left: icon_padding - icon_div_border_size,
                 'min-width': icon_size,
                 'min-height': icon_size,
             })
@@ -13115,6 +13351,10 @@ var Oncoprint = /** @class */ (function () {
             .attr({ width: '0px', height: '0px' })
             .css({ position: 'absolute', top: '0px', left: '0px' })
             .addClass('noselect');
+        var $gap_canvas = $__default["default"]('<canvas></canvas>')
+            .attr({ width: '0px', height: '0px' })
+            .css({ position: 'absolute', top: '0px', left: '0px' })
+            .addClass('noselect gap_canvas');
         var $dummy_scroll_div = $__default["default"]('<div>')
             .css({
             position: 'absolute',
@@ -13177,6 +13417,7 @@ var Oncoprint = /** @class */ (function () {
         $legend_div.appendTo($legend_ctr);
         $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);
@@ -13198,7 +13439,7 @@ var Oncoprint = /** @class */ (function () {
         this.$cell_overlay_canvas = $cell_overlay_canvas;
         this.model = new OncoprintModel(params);
         this.header_view = new OncoprintHeaderView(this.$header_div);
-        this.cell_view = new OncoprintWebGLCellView($cell_div, $cell_canvas, $cell_overlay_canvas, $column_label_canvas, $dummy_scroll_div_contents, this.model, new OncoprintToolTip($tooltip_ctr), function (left, right) {
+        this.cell_view = new OncoprintWebGLCellView($cell_div, $cell_canvas, $cell_overlay_canvas, $gap_canvas, $column_label_canvas, $dummy_scroll_div_contents, this.model, new OncoprintToolTip($tooltip_ctr), function (left, right) {
             var enclosed_ids = self.model.getIdsInZoomedLeftInterval(left, right);
             self.setHorzZoom(self.model.getHorzZoomToFit(self.cell_view.getVisibleAreaWidth(), enclosed_ids));
             self.$dummy_scroll_div.scrollLeft(self.model.getZoomedColumnLeft(enclosed_ids[0]));
@@ -14754,6 +14995,7 @@ var Oncoprint = /** @class */ (function () {
 
 exports.GeneticAlterationRuleSet = GeneticAlterationRuleSet;
 exports.OncoprintJS = Oncoprint;
+exports.OncoprintModel = OncoprintModel;
 exports.Rule = Rule;
 exports.RuleSet = RuleSet;
 exports.shapeToSvg = shapeToSVG;