From 70ac429f22899684d80190e576b176dbef6be1d7 Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Thu, 21 Dec 2017 08:55:05 -0500 Subject: [PATCH 01/53] Disentangle 'view' handling in trackster track initialization. This is a step towards making Trackster work again. --- client/galaxy/scripts/viz/trackster/tracks.js | 47 +++++++++---------- 1 file changed, 21 insertions(+), 26 deletions(-) diff --git a/client/galaxy/scripts/viz/trackster/tracks.js b/client/galaxy/scripts/viz/trackster/tracks.js index 0220523f4f6..71aa023b169 100644 --- a/client/galaxy/scripts/viz/trackster/tracks.js +++ b/client/galaxy/scripts/viz/trackster/tracks.js @@ -48,11 +48,9 @@ var moveable = (element, handle_class, container_selector, element_js_obj) => { element .bind("drag", { handle: `.${handle_class}`, relative: true }, function(e, d) { var element = $(this); - var parent = $(this).parent(); - - var // Only sorting amongst tracks and groups. - children = parent.children(".track,.group"); - + var parent = element.parent(); + // Only sorting amongst tracks and groups. + var children = parent.children(".track,.group"); var this_obj = html_elt_js_obj_dict[$(this).attr("id")]; var child; var container; @@ -723,7 +721,6 @@ extend(DrawableGroup.prototype, Drawable.prototype, DrawableCollection.prototype for (i = 0; i < num_drawables; i++) { drawable = this.drawables[i]; if (drawable.get_type() !== a_type) { - can_composite = false; break; } if (drawable instanceof FeatureTrack) { @@ -1315,12 +1312,11 @@ extend(TracksterView.prototype, DrawableCollection.prototype, { if (delay) { // To aggregate calls, use timer and only navigate once // location has stabilized. - var self = this; this.timer = setTimeout(() => { - self.trigger("navigate", `${new_chrom}:${new_low}-${new_high}`); + this.trigger("navigate", `${new_chrom}:${new_low}-${new_high}`); }, 500); } else { - view.trigger("navigate", `${new_chrom}:${new_low}-${new_high}`); + this.trigger("navigate", `${new_chrom}:${new_low}-${new_high}`); } }, @@ -1343,13 +1339,12 @@ extend(TracksterView.prototype, DrawableCollection.prototype, { load_chroms: function(url_parms) { url_parms.num = MAX_CHROMS_SELECTABLE; - var view = this; var chrom_data = $.Deferred(); $.ajax({ url: `${Galaxy.root}api/genomes/${this.dbkey}`, data: url_parms, dataType: "json", - success: function(result) { + success: result => { // Do nothing if could not load chroms. if (result.chrom_info.length === 0) { return; @@ -1357,34 +1352,34 @@ extend(TracksterView.prototype, DrawableCollection.prototype, { // Load chroms. if (result.reference) { - var ref_track = new ReferenceTrack(view); - view.add_label_track(ref_track); - view.reference_track = ref_track; + var ref_track = new ReferenceTrack(this); + this.add_label_track(ref_track); + this.reference_track = ref_track; } - view.chrom_data = result.chrom_info; + this.chrom_data = result.chrom_info; - view.chrom_select.html(""); - view.chrom_select.append($('')); + this.chrom_select.html(""); + this.chrom_select.append($('')); - for (var i = 0, len = view.chrom_data.length; i < len; i++) { - var chrom = view.chrom_data[i].chrom; + for (var i = 0, len = this.chrom_data.length; i < len; i++) { + var chrom = this.chrom_data[i].chrom; var chrom_option = $("`)); + this.chrom_select.append($(``)); } if (result.next_chroms) { - view.chrom_select.append($(``)); + this.chrom_select.append($(``)); } - view.chrom_start_index = result.start_index; + this.chrom_start_index = result.start_index; chrom_data.resolve(result.chrom_info); }, error: function() { - alert(`Could not load chroms for this dbkey: ${view.dbkey}`); + alert(`Could not load chroms for this dbkey: ${this.dbkey}`); } }); return chrom_data; @@ -1779,8 +1774,8 @@ extend(TracksterView.prototype, DrawableCollection.prototype, { this.overview_box.height(this.default_overview_height); this.overview_close.hide(); this.overview_highlight.hide(); - view.resize_window(); - view.overview_drawable = null; + this.resize_window(); + this.overview_drawable = null; } }); From 4112bd51cc59a0a16845fcfeba2b9b8cb3c3925b Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Thu, 21 Dec 2017 09:06:06 -0500 Subject: [PATCH 02/53] Fix undefined incomplete_features reference, use correct 'this.view' for tiledtrack --- client/galaxy/scripts/viz/trackster/tracks.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/client/galaxy/scripts/viz/trackster/tracks.js b/client/galaxy/scripts/viz/trackster/tracks.js index 71aa023b169..beeeacce558 100644 --- a/client/galaxy/scripts/viz/trackster/tracks.js +++ b/client/galaxy/scripts/viz/trackster/tracks.js @@ -3044,7 +3044,7 @@ extend(TiledTrack.prototype, Drawable.prototype, Track.prototype, { if (this.is_overview) { low = this.view.max_low; high = this.view.max_high; - w_scale = width / (view.max_high - view.max_low); + w_scale = width / (this.view.max_high - this.view.max_low); resolution = 1 / w_scale; } @@ -3275,13 +3275,13 @@ extend(TiledTrack.prototype, Drawable.prototype, Track.prototype, { ) => d.data_manager.get_data(region, data_mode, resolution, track.data_url_extra_params)); // Get reference data/promise. - if (view.reference_track) { + if (this.view.reference_track) { tile_data.push( - view.reference_track.data_manager.get_data( + this.view.reference_track.data_manager.get_data( region, mode, resolution, - view.reference_track.data_url_extra_params + this.view.reference_track.data_url_extra_params ) ); } @@ -3312,8 +3312,8 @@ extend(TiledTrack.prototype, Drawable.prototype, Track.prototype, { } // If sequence data is available, subset to get only data in region. - if (view.reference_track) { - seq_data = view.reference_track.data_manager.subset_entry(tile_data.pop(), region); + if (this.view.reference_track) { + seq_data = this.view.reference_track.data_manager.subset_entry(tile_data.pop(), region); } // Get drawing modes, heights for all tracks. @@ -4552,6 +4552,7 @@ extend(FeatureTrack.prototype, Drawable.prototype, TiledTrack.prototype, { ); var feature_mapper = null; + var incomplete_features = null; ctx.fillStyle = this.config.get_value("block_color"); ctx.font = ctx.canvas.manager.default_font; From 975e41a0372c85d1caf86c5fde5492e2fa3c4ec9 Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Thu, 21 Dec 2017 09:08:59 -0500 Subject: [PATCH 03/53] Removal of self reference and unused import in visualization.js --- client/galaxy/scripts/viz/visualization.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/client/galaxy/scripts/viz/visualization.js b/client/galaxy/scripts/viz/visualization.js index 7ba8c775ad3..a5e78f8aaea 100644 --- a/client/galaxy/scripts/viz/visualization.js +++ b/client/galaxy/scripts/viz/visualization.js @@ -5,7 +5,6 @@ import util_mod from "viz/trackster/util"; import config_mod from "utils/config"; import GridView from "mvc/grid/grid-view"; import Tabs from "mvc/ui/ui-tabs"; -import Ui from "mvc/ui/ui-misc"; /** * Mixin for returning custom JSON representation from toJSON. Class attribute to_json_keys defines a set of attributes * to include in the representation; to_json_mappers defines mappers for returned objects. @@ -1112,9 +1111,8 @@ var TrackBrowserRouter = Backbone.Router.extend({ this.route(/([\w\+]+\:[\d,]+-[\d,]+)$/, "change_location"); // Handle navigate events from view. - var self = this; - self.view.on("navigate", new_loc => { - self.navigate(new_loc); + this.view.on("navigate", new_loc => { + this.navigate(new_loc); }); }, From ac872cccf5465a3f3fce197870222168d5b1f550 Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Thu, 21 Dec 2017 10:40:54 -0500 Subject: [PATCH 04/53] Trackster painters overhaul, fixes. --- .../galaxy/scripts/viz/trackster/painters.js | 46 ++++++------------- 1 file changed, 13 insertions(+), 33 deletions(-) diff --git a/client/galaxy/scripts/viz/trackster/painters.js b/client/galaxy/scripts/viz/trackster/painters.js index 4c81e1b9bd5..7877a32bcda 100644 --- a/client/galaxy/scripts/viz/trackster/painters.js +++ b/client/galaxy/scripts/viz/trackster/painters.js @@ -1,5 +1,4 @@ import * as _ from "libs/underscore"; - /** * Compute the type of overlap between two regions. They are assumed to be on the same chrom/contig. * The overlap is computed relative to the second region; hence, OVERLAP_START indicates that the first @@ -219,7 +218,6 @@ LinePainter.prototype.draw = function(ctx, width, height, w_scale) { var // Extract RGB from preference color. pref_color = parseInt(painter_color.slice(1), 16); - var pref_r = (pref_color & 0xff0000) >> 16; var pref_g = (pref_color & 0x00ff00) >> 8; var pref_b = pref_color & 0x0000ff; @@ -524,7 +522,8 @@ _.extend(LinkedFeaturePainter.prototype, FeaturePainter.prototype, { * Draw a feature. Returns an array with feature's start and end X coordinates. */ draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width) { - var feature_uid = feature[0]; + console.debug("draw_element", feature); + // var feature_uid = feature[0]; var feature_start = feature[1]; var feature_end = feature[2]; var feature_name = feature[3]; @@ -540,14 +539,12 @@ _.extend(LinkedFeaturePainter.prototype, FeaturePainter.prototype, { var y_start = (mode === "Dense" ? 0 : 0 + slot) * y_scale + this.get_top_padding(width); - var thickness; - var y_start; var thick_start = null; var thick_end = null; - var // TODO: is there any reason why block, label color cannot be set at the Painter level? + // TODO: is there any reason why block, label color cannot be set at the Painter level? // For now, assume '.' === '+' - block_color = + var block_color = !feature_strand || feature_strand === "+" || feature_strand === "." ? this.prefs.block_color : this.prefs.reverse_strand_color; @@ -660,7 +657,6 @@ _.extend(LinkedFeaturePainter.prototype, FeaturePainter.prototype, { } // Draw blocks. - var start_and_height; for (var k = 0, k_len = feature_blocks.length; k < k_len; k++) { var block = feature_blocks[k]; @@ -988,11 +984,11 @@ _.extend(ReadPainter.prototype, FeaturePainter.prototype, { // Draw sequence. Because cur_seq starts and read/tile start, go to there to start writing. var start_pos = Math.max(seq_start, tile_low); - for (var c = 0; c < cur_seq.length; c++) { + for (let c = 0; c < cur_seq.length; c++) { // Draw base if showing all (i.e. not showing differences) or there is a mismatch. if ((cur_seq && !this.prefs.show_differences) || cig_op === "X") { // Draw base. - var c_start = Math.floor(Math.max(0, (start_pos + c - tile_low) * w_scale)); + let c_start = Math.floor(Math.max(0, (start_pos + c - tile_low) * w_scale)); ctx.fillStyle = this.base_color_fn(cur_seq[c]); if (pack_mode && w_scale > char_width_px) { ctx.fillText(cur_seq[c], c_start, y_start + 9); @@ -1066,8 +1062,8 @@ _.extend(ReadPainter.prototype, FeaturePainter.prototype, { break; } // Draw sequence. - for (var c = 0, str_len = seq.length; c < str_len; c++) { - var c_start = Math.floor(Math.max(0, (seq_start + c - tile_low) * w_scale)); + for (let c = 0, str_len = seq.length; c < str_len; c++) { + let c_start = Math.floor(Math.max(0, (seq_start + c - tile_low) * w_scale)); ctx.fillText(seq[c], c_start - (s_end - s_start) / 2, y_start); } } else { @@ -1110,7 +1106,7 @@ _.extend(ReadPainter.prototype, FeaturePainter.prototype, { var item; var type; var data; - for (var i = 0; i < draw_last.length; i++) { + for (let i = 0; i < draw_last.length; i++) { item = draw_last[i]; type = item.type; data = item.data; @@ -1130,8 +1126,7 @@ _.extend(ReadPainter.prototype, FeaturePainter.prototype, { */ draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width) { // All features need a start, end, and vertical center. - var feature_uid = feature[0]; - + // var feature_uid = feature[0]; var feature_start = feature[1]; var feature_end = feature[2]; var feature_name = feature[3]; @@ -1145,8 +1140,6 @@ _.extend(ReadPainter.prototype, FeaturePainter.prototype, { var draw_height = mode === "Pack" ? PACK_FEATURE_HEIGHT : SQUISH_FEATURE_HEIGHT; - var label_color = this.prefs.label_color; - // Draw read. if (feature[5] instanceof Array) { // Read is paired. @@ -1247,7 +1240,7 @@ var ArcLinkedFeaturePainter = function(data, view_start, view_end, prefs, mode, _.extend(ArcLinkedFeaturePainter.prototype, FeaturePainter.prototype, LinkedFeaturePainter.prototype, { calculate_longest_feature_length: function() { var longest_feature_length = 0; - for (var i = 0, len = this.data.length; i < len; i++) { + for (let i = 0, len = this.data.length; i < len; i++) { var feature = this.data[i]; var feature_start = feature[1]; var feature_end = feature[2]; @@ -1265,13 +1258,7 @@ _.extend(ArcLinkedFeaturePainter.prototype, FeaturePainter.prototype, LinkedFeat draw_connector: function(ctx, block1_start, block1_end, block2_start, block2_end, y_start) { // Arc drawing -- from closest endpoints var x_center = (block1_end + block2_start) / 2; - var radius = block2_start - x_center; - - // For full half circles - var angle1 = Math.PI; - - var angle2 = 0; if (radius > 0) { ctx.beginPath(); ctx.arc(x_center, y_start, block2_start - x_center, Math.PI, 0); @@ -1471,11 +1458,7 @@ DiagonalHeatmapPainter.prototype.default_prefs = { DiagonalHeatmapPainter.prototype.draw = function(ctx, width, height, w_scale) { var min_value = this.prefs.min_value; var max_value = this.prefs.max_value; - var value_range = max_value - min_value; - var height_px = height; var view_start = this.view_start; - var mode = this.mode; - var data = this.data; var invsqrt2 = 1 / Math.sqrt(2); var ramp = new SplitRamp(this.prefs.neg_color, "#FFFFFF", this.prefs.pos_color, min_value, max_value); @@ -1496,8 +1479,8 @@ DiagonalHeatmapPainter.prototype.draw = function(ctx, width, height, w_scale) { ctx.scale(invsqrt2, invsqrt2); // Paint track. - for (var i = 0, len = data.length; i < len; i++) { - d = data[i]; + for (var i = 0, len = this.data.length; i < len; i++) { + d = this.data[i]; s1 = scale(d[1]); e1 = scale(d[2]); @@ -1618,11 +1601,8 @@ _.extend(VariantPainter.prototype, Painter.prototype, { var locus_data; var pos; - var id; var ref; var alt; - var qual; - var filter; var sample_gts; var allele_counts; var variant; From 9c54765e6fb6164816c16ed79628ad37f73a9192 Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Thu, 21 Dec 2017 10:45:11 -0500 Subject: [PATCH 05/53] Scope and minor cleanup in slotting.js --- client/galaxy/scripts/viz/trackster/slotting.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/galaxy/scripts/viz/trackster/slotting.js b/client/galaxy/scripts/viz/trackster/slotting.js index 62fca2451b5..c4b4095ce93 100644 --- a/client/galaxy/scripts/viz/trackster/slotting.js +++ b/client/galaxy/scripts/viz/trackster/slotting.js @@ -45,7 +45,7 @@ extend(FeatureSlotter.prototype, { var draw_end = Math.ceil(feature[2] * this.w_scale); var f_name = feature[3]; - var text_align; + //var text_align; // Update start, end drawing locations to include feature name. // Try to put the name on the left, if not, put on right. @@ -55,10 +55,10 @@ extend(FeatureSlotter.prototype, { var text_len = this.measureText(f_name).width + (LABEL_SPACING + PACK_SPACING); if (draw_start - text_len >= 0) { draw_start -= text_len; - text_align = "left"; + //text_align = "left"; } else { draw_end += text_len; - text_align = "right"; + //text_align = "right"; } } @@ -130,7 +130,7 @@ extend(FeatureSlotter.prototype, { // Loop through features to (a) find those that are not yet slotted and (b) update // those that are slotted if new information is availabe. For (a), features already // slotted (based on slotting from other tiles) will retain their current slot. - for (var i = 0, len = features.length; i < len; i++) { + for (let i = 0, len = features.length; i < len; i++) { feature = features[i]; feature_uid = feature[0]; var slotted_info = this.slots[feature_uid]; @@ -163,7 +163,7 @@ extend(FeatureSlotter.prototype, { // Slot unslotted features. // Do slotting. - for (var i = 0, len = undone.length; i < len; i++) { + for (let i = 0, len = undone.length; i < len; i++) { feature = features[undone[i]]; feature_uid = feature[0]; var draw_coords = this._get_draw_coords(feature); From 00f4ffe166716d91fefb6078881d3d79e014c2bb Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Thu, 21 Dec 2017 10:50:56 -0500 Subject: [PATCH 06/53] Fix undefined var in trackster/filters -- still exists one that I need to fix here, but that'll take some digging. --- client/galaxy/scripts/viz/trackster/filters.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/client/galaxy/scripts/viz/trackster/filters.js b/client/galaxy/scripts/viz/trackster/filters.js index 4cac685ab98..3abc219a983 100644 --- a/client/galaxy/scripts/viz/trackster/filters.js +++ b/client/galaxy/scripts/viz/trackster/filters.js @@ -151,7 +151,7 @@ var NumberFilter = function(obj_dict) { .addClass("elt-label") .appendTo(filter.parent_div); - var name_span = $("") + $("") .addClass("slider-name") .text(`${filter.name} `) .appendTo(filter_label); @@ -341,9 +341,6 @@ extend(NumberFilter.prototype, { return true; } - // Keep value function. - var filter = this; - // Do filtering. var to_filter = element[this.index]; if (to_filter instanceof Array) { @@ -482,7 +479,7 @@ var FiltersManager = function(track, obj_dict) { filter.height_icon.addClass("active").show(); } } else { - console.log("ERROR: unsupported filter: ", name, type); + console.log("ERROR: unsupported filter: ", filters_dict[i]); } } @@ -656,6 +653,7 @@ extend(FiltersManager.prototype, { // Remove current filter. filters = filters.slice(1); + // DBTODO: This will never work, run_tool_url doesn't exist? $.getJSON(run_tool_url, url_params, response => { if (response.error) { // General error. From 2c51bdd5d04f267b5282ee06ed2312e1b3a44d25 Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Thu, 21 Dec 2017 11:23:04 -0500 Subject: [PATCH 07/53] Incremental fixes and work on trackster/tracks.js -- still not painting.... --- client/galaxy/scripts/viz/trackster/tracks.js | 101 ++++++++---------- 1 file changed, 46 insertions(+), 55 deletions(-) diff --git a/client/galaxy/scripts/viz/trackster/tracks.js b/client/galaxy/scripts/viz/trackster/tracks.js index beeeacce558..a0670149a82 100644 --- a/client/galaxy/scripts/viz/trackster/tracks.js +++ b/client/galaxy/scripts/viz/trackster/tracks.js @@ -147,22 +147,23 @@ var moveable = (element, handle_class, container_selector, element_js_obj) => { /** * Init constants & functions used throughout trackster. */ -var // Padding at the top of tracks for error messages -ERROR_PADDING = 20; -var // Maximum number of rows un a slotted track -MAX_FEATURE_DEPTH = 100; +// Padding at the top of tracks for error messages +var ERROR_PADDING = 20; -var // Minimum width for window for squish to be used. -MIN_SQUISH_VIEW_WIDTH = 12000; +// Maximum number of rows un a slotted track +var MAX_FEATURE_DEPTH = 100; -var // Number of pixels per tile, not including left offset. -TILE_SIZE = 400; +// Minimum width for window for squish to be used. +var MIN_SQUISH_VIEW_WIDTH = 12000; + +// Number of pixels per tile, not including left offset. +var TILE_SIZE = 400; var DEFAULT_DATA_QUERY_WAIT = 5000; -var // Maximum number of chromosomes that are selectable at any one time. -MAX_CHROMS_SELECTABLE = 100; +// Maximum number of chromosomes that are selectable at any one time. +var MAX_CHROMS_SELECTABLE = 100; var DATA_ERROR = "Cannot display dataset due to an error. "; @@ -175,13 +176,13 @@ var DATA_PENDING = "If the visualization is saved and closed, preparation will continue in the background."; var DATA_CANNOT_RUN_TOOL = "Tool cannot be rerun: "; -var DATA_LOADING = "Loading data..."; +//var DATA_LOADING = "Loading data..."; var DATA_OK = "Ready for display"; var TILE_CACHE_SIZE = 10; -var DATA_CACHE_SIZE = 20; - -var // Numerical/continuous data display modes. -CONTINUOUS_DATA_MODES = ["Histogram", "Line", "Filled", "Intensity"]; +//var DATA_CACHE_SIZE = 20; +// +// Numerical/continuous data display modes. +var CONTINUOUS_DATA_MODES = ["Histogram", "Line", "Filled", "Intensity"]; /** * Round a number to a given number of decimal places. @@ -769,16 +770,12 @@ extend(DrawableGroup.prototype, Drawable.prototype, DrawableCollection.prototype // manager. // this.filters_manager.remove_all(); - var filters; - var new_filter; - var min; - var max; for (var filter_name in shared_filters) { - filters = shared_filters[filter_name]; + let filters = shared_filters[filter_name]; if (filters.length === num_feature_tracks) { // Add new filter. // FIXME: can filter.copy() be used? - new_filter = new filters_mod.NumberFilter({ + let new_filter = new filters_mod.NumberFilter({ name: filters[0].name, index: filters[0].index }); @@ -831,7 +828,7 @@ extend(DrawableGroup.prototype, Drawable.prototype, DrawableCollection.prototype name: this.config.get_value("name"), drawables: this.drawables }); - var index = this.container.replace_drawable(this, composite_track, true); + this.container.replace_drawable(this, composite_track, true); composite_track.request_draw(); }, @@ -1984,44 +1981,42 @@ var TracksterToolView = Backbone.View.extend({ regions: [region.toJSON()] }; - var current_track = track; - - var // Set name of track to include tool name, parameters, and region used. - track_name = tool.get("name") + current_track.tool_region_and_parameters_str(region); + // Set name of track to include tool name, parameters, and region used. + var track_name = tool.get("name") + track.tool_region_and_parameters_str(region); var container; // If track not in a group, create a group for it and add new track to group. If track // already in group, add track to group. - if (current_track.container === view) { + if (track.container === track.view) { // Create new group. - var group = new DrawableGroup(view, view, { + var group = new DrawableGroup(track.view, track.view, { name: track.config.get_value("name") }); // Replace track with group. - var index = current_track.container.replace_drawable(current_track, group, false); + var index = track.container.replace_drawable(track, group, false); // Update HTML. // FIXME: this is ugly way to replace a track with a group -- make this easier via // a Drawable or DrawableCollection function. - group.container_div.insertBefore(current_track.view.content_div.children()[index]); - group.add_drawable(current_track); - current_track.container_div.appendTo(group.content_div); + group.container_div.insertBefore(track.view.content_div.children()[index]); + group.add_drawable(track); + track.container_div.appendTo(group.content_div); container = group; } else { // Use current group. - container = current_track.container; + container = track.container; } // Create and init new track. - var new_track = new current_track.constructor(view, container, { + var new_track = new track.constructor(track.view, container, { name: track_name, hda_ldda: "hda" }); new_track.init_for_tool_data(); - new_track.change_mode(current_track.mode); - new_track.set_filters_manager(current_track.filters_manager.copy(new_track)); + new_track.change_mode(track.mode); + new_track.set_filters_manager(track.filters_manager.copy(new_track)); new_track.update_icons(); container.add_drawable(new_track); new_track.tiles_div.text("Starting job."); @@ -3035,7 +3030,7 @@ extend(TiledTrack.prototype, Drawable.prototype, Track.prototype, { var clear_after = options && options.clear_after; var low = this.view.low; var high = this.view.high; - var range = high - low; + //var range = high - low; var width = this.view.container.width(); var w_scale = this.view.resolution_px_b; var resolution = 1 / w_scale; @@ -3423,7 +3418,6 @@ extend(TiledTrack.prototype, Drawable.prototype, Track.prototype, { * an existing tile rather than reshowing it. */ show_tile: function(tile, w_scale) { - var track = this; var tile_element = tile.html_elt; // -- Show/move tile element. -- @@ -4131,6 +4125,7 @@ extend(DiagonalHeatmapTrack.prototype, Drawable.prototype, TiledTrack.prototype, * Draw tile. */ draw_tile: function(result, ctx, mode, region, w_scale) { + console.debug("DRaw tile!", result, ctx, mode, region, w_scale); // Paint onto canvas. var canvas = ctx.canvas; @@ -4253,9 +4248,6 @@ extend(FeatureTrack.prototype, Drawable.prototype, TiledTrack.prototype, { postdraw_actions: function(tiles, width, w_scale, clear_after) { TiledTrack.prototype.postdraw_actions.call(this, tiles, width, w_scale, clear_after); - var track = this; - var i; - var line_track_tiles = _.filter(tiles, t => t instanceof LineTrackTile); // @@ -4272,7 +4264,6 @@ extend(FeatureTrack.prototype, Drawable.prototype, TiledTrack.prototype, { }); // Draw incomplete features on each tile. - var self = this; _.each(tiles, tile => { // Remove features already drawn on tile originally. var tile_incomplete_features = _.omit( @@ -4291,16 +4282,16 @@ extend(FeatureTrack.prototype, Drawable.prototype, TiledTrack.prototype, { data: _.values(tile_incomplete_features) }; - var new_canvas = self.view.canvas_manager.new_canvas(); + var new_canvas = this.view.canvas_manager.new_canvas(); var new_canvas_ctx = new_canvas.getContext("2d"); new_canvas.height = Math.max( tile.canvas.height, - self.get_canvas_height(features, tile.mode, tile.w_scale, 100) + this.get_canvas_height(features, tile.mode, tile.w_scale, 100) ); new_canvas.width = tile.canvas.width; new_canvas_ctx.drawImage(tile.canvas, 0, 0); - new_canvas_ctx.translate(track.left_offset, 0); - var new_tile = self.draw_tile( + new_canvas_ctx.translate(this.left_offset, 0); + var new_tile = this.draw_tile( features, new_canvas_ctx, tile.mode, @@ -4343,8 +4334,8 @@ extend(FeatureTrack.prototype, Drawable.prototype, TiledTrack.prototype, { // // Update filtering UI. - if (track.filters_manager) { - var filters = track.filters_manager.filters; + if (this.filters_manager) { + var filters = this.filters_manager.filters; var f; for (f = 0; f < filters.length; f++) { filters[f].update_ui_elt(); @@ -4356,7 +4347,7 @@ extend(FeatureTrack.prototype, Drawable.prototype, TiledTrack.prototype, { var example_feature; var filter; - for (i = 0; i < tiles.length; i++) { + for (let i = 0; i < tiles.length; i++) { if (tiles[i].data.length) { example_feature = tiles[i].data[0]; for (f = 0; f < filters.length; f++) { @@ -4370,12 +4361,12 @@ extend(FeatureTrack.prototype, Drawable.prototype, TiledTrack.prototype, { } // If filter availability changed, hide filter div if necessary and update menu. - if (track.filters_available !== filters_available) { - track.filters_available = filters_available; - if (!track.filters_available) { - track.filters_manager.hide(); + if (this.filters_available !== filters_available) { + this.filters_available = filters_available; + if (!this.filters_available) { + this.filters_manager.hide(); } - track.update_icons(); + this.update_icons(); } } @@ -4384,7 +4375,7 @@ extend(FeatureTrack.prototype, Drawable.prototype, TiledTrack.prototype, { // if (tiles[0] instanceof FeatureTrackTile) { var all_slotted = true; - for (i = 0; i < tiles.length; i++) { + for (let i = 0; i < tiles.length; i++) { if (!tiles[i].all_slotted) { all_slotted = false; break; From 4d7539dbeccc2a51bb36a21b8b34733e7345ae8a Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Thu, 21 Dec 2017 11:43:21 -0500 Subject: [PATCH 08/53] More trackster/tracks work. More variable scoping issues fixed, function definitions standardized. One callback issue resolved. --- client/galaxy/scripts/viz/trackster/tracks.js | 103 +++++++++--------- 1 file changed, 54 insertions(+), 49 deletions(-) diff --git a/client/galaxy/scripts/viz/trackster/tracks.js b/client/galaxy/scripts/viz/trackster/tracks.js index a0670149a82..96ea78141aa 100644 --- a/client/galaxy/scripts/viz/trackster/tracks.js +++ b/client/galaxy/scripts/viz/trackster/tracks.js @@ -24,9 +24,9 @@ var html_elt_js_obj_dict = {}; /** * Designates an HTML as a container. */ -var is_container = (element, obj) => { +function is_container(element, obj) { html_elt_js_obj_dict[element.attr("id")] = obj; -}; +} /** * Make `element` moveable within parent and sibling elements by dragging `handle` (a selector). @@ -37,7 +37,7 @@ var is_container = (element, obj) => { * @param container_selector selector used to identify possible containers for this element * @param element_js_obj JavaScript object associated with element; used */ -var moveable = (element, handle_class, container_selector, element_js_obj) => { +function moveable(element, handle_class, container_selector, element_js_obj) { // HACK: set default value for container selector. container_selector = ".group"; @@ -142,47 +142,47 @@ var moveable = (element, handle_class, container_selector, element_js_obj) => { .bind("dragend", function() { $(this).removeClass("dragging"); }); -}; +} /** * Init constants & functions used throughout trackster. */ // Padding at the top of tracks for error messages -var ERROR_PADDING = 20; +const ERROR_PADDING = 20; // Maximum number of rows un a slotted track -var MAX_FEATURE_DEPTH = 100; +const MAX_FEATURE_DEPTH = 100; // Minimum width for window for squish to be used. -var MIN_SQUISH_VIEW_WIDTH = 12000; +const MIN_SQUISH_VIEW_WIDTH = 12000; // Number of pixels per tile, not including left offset. -var TILE_SIZE = 400; +const TILE_SIZE = 400; -var DEFAULT_DATA_QUERY_WAIT = 5000; +const DEFAULT_DATA_QUERY_WAIT = 5000; // Maximum number of chromosomes that are selectable at any one time. -var MAX_CHROMS_SELECTABLE = 100; +const MAX_CHROMS_SELECTABLE = 100; -var DATA_ERROR = "Cannot display dataset due to an error. "; +const DATA_ERROR = "Cannot display dataset due to an error. "; -var DATA_NOCONVERTER = "A converter for this dataset is not installed. Please check your datatypes_conf.xml file."; +const DATA_NOCONVERTER = "A converter for this dataset is not installed. Please check your datatypes_conf.xml file."; -var DATA_NONE = "No data for this chrom/contig."; +const DATA_NONE = "No data for this chrom/contig."; -var DATA_PENDING = +const DATA_PENDING = "Preparing data. This can take a while for a large dataset. " + "If the visualization is saved and closed, preparation will continue in the background."; -var DATA_CANNOT_RUN_TOOL = "Tool cannot be rerun: "; +const DATA_CANNOT_RUN_TOOL = "Tool cannot be rerun: "; //var DATA_LOADING = "Loading data..."; -var DATA_OK = "Ready for display"; -var TILE_CACHE_SIZE = 10; +const DATA_OK = "Ready for display"; +const TILE_CACHE_SIZE = 10; //var DATA_CACHE_SIZE = 20; // // Numerical/continuous data display modes. -var CONTINUOUS_DATA_MODES = ["Histogram", "Line", "Filled", "Intensity"]; +const CONTINUOUS_DATA_MODES = ["Histogram", "Line", "Filled", "Intensity"]; /** * Round a number to a given number of decimal places. @@ -975,7 +975,8 @@ var TracksterView = Backbone.View.extend({ this.intro_div = $("
") .addClass("intro") .appendTo(this.viewport_container); - var add_tracks_button = $("
") + // Add tracks button + $("
") .text("Add Datasets to Visualization") .addClass("action-button") .appendTo(this.intro_div) @@ -1820,7 +1821,7 @@ var ToolParameterView = Backbone.View.extend({ var param = this.model; // Param label. - var label_div = $("
") + $("
") .addClass("param-label") .text(param.get("label")) .appendTo(param_div); @@ -1873,7 +1874,7 @@ var TracksterToolView = Backbone.View.extend({ }); // Add name, inputs. - var name_div = $("
") + $("
") .appendTo(parent_div) .text(tool.get("name")); tool.get("inputs").each(param => { @@ -2431,12 +2432,17 @@ extend(Track.prototype, Drawable.prototype, { name: "param_space_viz_icon", title: _l("Tool parameter space visualization"), css_class: "arrow-split", - on_click_fn: function(track) { - var html = `Tool:${track.tool.get( - "name" - )}
Dataset:${track.config.get_value( - "name" - )}
Region(s): `; + on_click_fn: track => { + var html = ` + Tool:${track.tool.get("name")}
+ Dataset:${track.config.get_value("name")}
+ Region(s): + + `; var cancel_fn = () => { Galaxy.modal.hide(); @@ -2444,22 +2450,22 @@ extend(Track.prototype, Drawable.prototype, { }; var ok_fn = () => { - var regions_to_use = $('select[name="regions"] option:selected').val(), - regions, - view_region = new visualization.GenomeRegion({ - chrom: view.chrom, - start: view.low, - end: view.high - }), - bookmarked_regions = _.map( - $(".bookmark"), - elt => - new visualization.GenomeRegion({ - from_str: $(elt) - .children(".position") - .text() - }) - ); + var regions_to_use = $('select[name="regions"] option:selected').val(); + var regions; + var view_region = new visualization.GenomeRegion({ + chrom: this.view.chrom, + start: this.view.low, + end: this.view.high + }); + var bookmarked_regions = _.map( + $(".bookmark"), + elt => + new visualization.GenomeRegion({ + from_str: $(elt) + .children(".position") + .text() + }) + ); // Get regions for visualization. if (regions_to_use === "cur") { @@ -2483,6 +2489,8 @@ extend(Track.prototype, Drawable.prototype, { })}`; }; + /* + * TODO: Re-enable this when functional. var check_enter_esc = e => { if ((e.keyCode || e.which) === 27) { // Escape key @@ -2492,6 +2500,7 @@ extend(Track.prototype, Drawable.prototype, { ok_fn(); } }; + */ // show dialog Galaxy.modal.show({ @@ -3330,10 +3339,7 @@ extend(TiledTrack.prototype, Drawable.prototype, Track.prototype, { var canvas = track.view.canvas_manager.new_canvas(); var tile_low = region.get("start"); var tile_high = region.get("end"); - var all_data_index = 0; - var width = Math.ceil((tile_high - tile_low) * w_scale) + track.left_offset; - var height = _.max(drawing_heights); var tile; @@ -3774,7 +3780,7 @@ extend(CompositeTrack.prototype, TiledTrack.prototype, { } // Replace track with group. - var index = this.container.replace_drawable(this, group, true); + this.container.replace_drawable(this, group, true); group.request_draw({ clear_tile_cache: true }); }, @@ -3808,7 +3814,6 @@ extend(CompositeTrack.prototype, TiledTrack.prototype, { * Update minimum, maximum for component tracks. */ update_all_min_max: function() { - var track = this; var min_value = this.config.get_value("min_value"); var max_value = this.config.get_value("max_value"); _.each(this.drawables, d => { @@ -4116,6 +4121,7 @@ extend(DiagonalHeatmapTrack.prototype, Drawable.prototype, TiledTrack.prototype, hda_ldda: track.dataset.get("hda_ldda") }, result => { + // What does this do? Is it meant to be attached to some higher scope state object? var data = result.data; } ); @@ -4125,7 +4131,6 @@ extend(DiagonalHeatmapTrack.prototype, Drawable.prototype, TiledTrack.prototype, * Draw tile. */ draw_tile: function(result, ctx, mode, region, w_scale) { - console.debug("DRaw tile!", result, ctx, mode, region, w_scale); // Paint onto canvas. var canvas = ctx.canvas; From 4a7487400aa45a558a87982888c7ce75a234efa1 Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Thu, 21 Dec 2017 11:45:38 -0500 Subject: [PATCH 09/53] Minor regex fix, drop a debug statement. --- client/galaxy/scripts/viz/trackster/painters.js | 1 - client/galaxy/scripts/viz/trackster/tracks.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/client/galaxy/scripts/viz/trackster/painters.js b/client/galaxy/scripts/viz/trackster/painters.js index 7877a32bcda..eaeae603fb9 100644 --- a/client/galaxy/scripts/viz/trackster/painters.js +++ b/client/galaxy/scripts/viz/trackster/painters.js @@ -522,7 +522,6 @@ _.extend(LinkedFeaturePainter.prototype, FeaturePainter.prototype, { * Draw a feature. Returns an array with feature's start and end X coordinates. */ draw_element: function(ctx, mode, feature, slot, tile_low, tile_high, w_scale, y_scale, width) { - console.debug("draw_element", feature); // var feature_uid = feature[0]; var feature_start = feature[1]; var feature_end = feature[2]; diff --git a/client/galaxy/scripts/viz/trackster/tracks.js b/client/galaxy/scripts/viz/trackster/tracks.js index 96ea78141aa..37ff091c38e 100644 --- a/client/galaxy/scripts/viz/trackster/tracks.js +++ b/client/galaxy/scripts/viz/trackster/tracks.js @@ -1484,7 +1484,7 @@ extend(TracksterView.prototype, DrawableCollection.prototype, { str = str.replace(/,/g, ""); // Replace colons and hyphens with space for easy parsing. - str = str.replace(/:|\-/g, " "); + str = str.replace(/:|-/g, " "); // Parse new location. var chrom_pos = str.split(/\s+/); From 80c7f369148919c93132c08e19e993b290cc4a84 Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Thu, 21 Dec 2017 12:26:31 -0500 Subject: [PATCH 10/53] Fix another regex; var scoping adjustments for trackster. --- client/galaxy/scripts/viz/trackster.js | 12 ++++++------ client/galaxy/scripts/viz/visualization.js | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/client/galaxy/scripts/viz/trackster.js b/client/galaxy/scripts/viz/trackster.js index 2e800c2c6e9..6969fb96b04 100644 --- a/client/galaxy/scripts/viz/trackster.js +++ b/client/galaxy/scripts/viz/trackster.js @@ -279,14 +279,14 @@ var TracksterUI = Base.extend({ var drawable_type; var drawable; - for (var i = 0; i < drawables_config.length; i++) { + for (let i = 0; i < drawables_config.length; i++) { view.add_drawable(tracks.object_from_template(drawables_config[i], view, view)); } } // Set overview. var overview_drawable; - for (var i = 0; i < view.drawables.length; i++) { + for (let i = 0; i < view.drawables.length; i++) { if (view.drawables[i].config.get_value("name") === overview_drawable_name) { view.set_overview(view.drawables[i]); break; @@ -296,7 +296,7 @@ var TracksterUI = Base.extend({ // Load bookmarks. if (bookmarks_config) { var bookmark; - for (var i = 0; i < bookmarks_config.length; i++) { + for (let i = 0; i < bookmarks_config.length; i++) { bookmark = bookmarks_config[i]; self.add_bookmark(bookmark["position"], bookmark["annotation"], editable); } @@ -337,14 +337,14 @@ var TracksterUI = Base.extend({ view.move_fraction(0.25); break; case 38: - var change = Math.round(view.viewport_container.height() / 15.0); + // var change = Math.round(view.viewport_container.height() / 15.0); view.viewport_container.scrollTop(view.viewport_container.scrollTop() - 20); break; case 39: view.move_fraction(-0.25); break; case 40: - var change = Math.round(view.viewport_container.height() / 15.0); + // var change = Math.round(view.viewport_container.height() / 15.0); view.viewport_container.scrollTop(view.viewport_container.scrollTop() + 20); break; } @@ -568,7 +568,7 @@ var TracksterView = Backbone.View.extend({ '