Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Topic/d3v4 upgrade fieldmap #4773

Merged
merged 4 commits into from
Jan 9, 2024
Merged

Topic/d3v4 upgrade fieldmap #4773

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
add81b7
upgrade fieldmap to d3v4
isaak Dec 13, 2023
c8ed652
make click and double click dispatch events work
isaak Dec 14, 2023
8d109ff
Merge branch 'master' into topic/d3v4-upgrade-fieldmap
isaak Dec 28, 2023
6a26abf
remove multiple d3 versions libs
isaak Dec 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 40 additions & 21 deletions js/source/entries/fieldmap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import '../legacy/d3/d3Min.js';
import '../legacy/d3/d3v4Min.js';
import '../legacy/jquery.js';
import '../legacy/brapi/BrAPI.js';

Expand Down Expand Up @@ -343,14 +343,14 @@ export function init() {
this.meta_data.num_cols = this.meta_data.num_rows;
this.meta_data.num_rows = tempNumCols;

d3v3.select("svg").remove();
d3.select("svg").remove();
this.add_borders();
this.render();

}

clickcancel() {
var event = d3v3.dispatch('click', 'dblclick');
var event = d3.dispatch('click', 'dblclick');
function cc(selection) {
var down,
tolerance = 5,
Expand All @@ -360,33 +360,52 @@ export function init() {
return Math.sqrt(Math.pow(a[0] - b[0], 2), Math.pow(a[1] - b[1], 2));
}
selection.on('mousedown', function() {
down = d3v3.mouse(document.body);
down = d3.mouse(document.body);
last = +new Date();
});
selection.on('mouseup', function() {
if (dist(down, d3v3.mouse(document.body)) > tolerance) {
if (dist(down, d3.mouse(document.body)) > tolerance) {
return;
} else {
if (wait) {
window.clearTimeout(wait);
wait = null;
event.dblclick(d3v3.event);
event.call("dblclick", this, d3.event);
} else {
wait = window.setTimeout((function(e) {
return function() {
event.click(e);
return function() {
event.call("click", this, e);
wait = null;
};
})(d3v3.event), 300);
})(d3.event), 300);
}
}
});
};
return d3v3.rebind(cc, event, 'on');
// return d3.rebind(cc, event, 'on');
return _rebind(cc, event, "on");

// Copies a variable number of methods from source to target.
function _rebind(target, source) {
var i = 1, n = arguments.length,
method;
while (++i < n) target[method = arguments[i]] = d3_rebind(target, source, source[method]);
return target;
};

// Method is assumed to be a standard D3 getter-setter:
// If passed with no arguments, gets the value.
// If passed with arguments, sets the value and returns the target.
function d3_rebind(target, source, method) {
return function() {
var value = method.apply(source, arguments);
return arguments.length ? target : value;
};
}
}

heatmap_plot_click(plot, heatmap_object, trait_name) {
if (d3v3.event && d3v3.event.detail > 1) {
if (d3.event && d3.event.detail > 1) {
return;
} else if (trait_name in heatmap_object && heatmap_object[trait_name][plot.observationUnitDbId]) {
let val, plot_name, pheno_id;
Expand All @@ -402,7 +421,7 @@ export function init() {
}

fieldmap_plot_click(plot) {
if (d3v3.event && d3v3.event.detail > 1) {
if (d3.event && d3.event.detail > 1) {
return;
} else {
function btnClick(n){
Expand Down Expand Up @@ -483,7 +502,7 @@ export function init() {
for (let obs_unit of Object.values(plots_with_selected_trait)) {
trait_vals.push(obs_unit.val);
}
var colorScale = d3v3.scale.quantile()
var colorScale = d3.scaleQuantile()
.domain(trait_vals)
.range(colors);
}
Expand Down Expand Up @@ -572,7 +591,7 @@ export function init() {

var handle_mouseover = function(d) {
if (d.observationUnitPosition.observationLevel) {
d3v3.select(`#fieldmap-plot-${d.observationUnitDbId}`)
d3.select(`#fieldmap-plot-${d.observationUnitDbId}`)
.style('fill', 'green')
.style('cursor', 'pointer')
.style("stroke-width", 3)
Expand All @@ -585,7 +604,7 @@ export function init() {
}

var handle_mouseout = function(d) {
d3v3.select(`#fieldmap-plot-${d.observationUnitDbId}`)
d3.select(`#fieldmap-plot-${d.observationUnitDbId}`)
.style('fill', !isHeatMap ? get_fieldmap_plot_color(d) : get_heatmap_plot_color(d))
.style('cursor', 'default')
.style("stroke-width", 2)
Expand Down Expand Up @@ -658,12 +677,12 @@ export function init() {
var num_rows = this.meta_data.num_rows;
var isHeatMap = this.heatmap_selected;

var grid = d3v3.select("#fieldmap_chart")
var grid = d3.select("#fieldmap_chart")
.append("svg")
.attr("width", width * 50 + 20 + "px")
.attr("height", height * 50 + 20 + "px")

var tooltip = d3v3.select("#fieldmap_chart")
var tooltip = d3.select("#fieldmap_chart")
.append("rect")
.attr("id", "tooltip")
.attr("class", "tooltip")
Expand All @@ -686,13 +705,13 @@ export function init() {
.on("mouseover", handle_mouseover)
.on("mouseout", handle_mouseout)
.call(cc);

cc.on("click", (el) => {
var plot = d3v3.select(el.srcElement).data()[0];
var plot = d3.select(el.srcElement).data()[0];
plot_click(plot, heatmap_object, trait_name)
});
cc.on("dblclick", (el) => {
var me = d3v3.select(el.srcElement);
var me = d3.select(el.srcElement);
var d = me.data()[0];
if (d.observationUnitDbId) {
window.open('/stock/'+d.observationUnitDbId+'/view');
Expand Down Expand Up @@ -785,7 +804,7 @@ export function init() {


load() {
d3v3.select("svg").remove();
d3.select("svg").remove();
this.change_dimensions(this.meta_data.num_cols, this.meta_data.num_rows);
this.add_borders();
this.render();
Expand Down
2 changes: 1 addition & 1 deletion mason/breeders_toolbox/trial/phenotype_heatmap.mas
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ $has_col_and_row_numbers => undef
</%args>

<& /util/import_css.mas, paths => ['fieldmap/leaflet-search.min.css', 'fieldmap/leaflet.css'] &>
<& /util/import_javascript.mas, entries => ['fieldmap'], classes => [ 'jqueryui.js', 'jquery.js', 'd3.d3v4Min', 'jstree.dist.jstree', 'd3.d3Min.js', "thickbox", "CXGN.Page.FormattingHelpers", 'brapi.fieldmap.leaflet', 'brapi.fieldmap.L-Path-Transform', 'brapi.fieldmap.leaflet-search', 'brapi.fieldmap.turf', 'brapi.BrAPI', 'brapi.BrAPIFieldmap' ] &>
<& /util/import_javascript.mas, entries => ['fieldmap'], classes => [ 'jqueryui.js', 'jquery.js', 'jstree.dist.jstree', "thickbox", "CXGN.Page.FormattingHelpers", 'brapi.fieldmap.leaflet', 'brapi.fieldmap.L-Path-Transform', 'brapi.fieldmap.leaflet-search', 'brapi.fieldmap.turf', 'brapi.BrAPI', 'brapi.BrAPIFieldmap' ] &>

<style>
#trait_heatmap {display: inline; }
Expand Down
Loading