Commit 9b0a61a3 authored by Mathieu Giraud's avatar Mathieu Giraud
Browse files

Merge branch 'feature-c/4370-label-tooltip-graph' into 'dev'

Resolve "Label dans les graph; avoir des tooltips"

Closes #4370

See merge request !747
parents d4b88c8c fd9b8c2f
Pipeline #231381 failed with stages
in 8 minutes and 37 seconds
......@@ -2327,3 +2327,25 @@ form .form_label {
.margined-bottom {
margin-bottom: 10px;
}
div.tooltip {
position: absolute;
text-align: left;
padding: 2px;
font: 14px sans-serif;
color: #ffffff;
background: #444343;
border: 0px;
border-radius: 3px;
pointer-events: none;
}
.labelFocusMinor {
color: grey;
opacity: 0.7;
font-size: 12px;
}
.labelFocusMajor {
color: black;
opacity: 1;
font-weight: bold;
font-size: 16px;
}
......@@ -2327,3 +2327,25 @@ form .form_label {
.margined-bottom {
margin-bottom: 10px;
}
div.tooltip {
position: absolute;
text-align: left;
padding: 2px;
font: 14px sans-serif;
color: #ffffff;
background: #444343;
border: 0px;
border-radius: 3px;
pointer-events: none;
}
.labelFocusMinor {
color: grey;
opacity: 0.7;
font-size: 12px;
}
.labelFocusMajor {
color: black;
opacity: 1;
font-weight: bold;
font-size: 16px;
}
......@@ -2653,6 +2653,7 @@ form {
color: @default;
}
.set_group {
display: inline-flex;
flex-wrap: wrap;
......@@ -2686,3 +2687,27 @@ form {
.margined-bottom {
margin-bottom: 10px;
}
div.tooltip {
position: absolute;
text-align: left;
padding: 2px;
font: 14px sans-serif;
color: #ffffff;
background: #444343;
border: 0px;
border-radius: 3px;
pointer-events: none;
}
.labelFocusMinor {
color: grey;
opacity: 0.7;
font-size: 12px;
}
.labelFocusMajor {
color: black;
opacity: 1;
font-weight: bold;
font-size: 16px;
}
\ No newline at end of file
......@@ -360,11 +360,18 @@ Graph.prototype = {
list_content.appendChild(line_content_text)
// Add all descripion of sample keys as tooltip
var tooltip = this.m.getStrTime(i, "names")
tooltip += String.fromCharCode(13) + this.m.getStrTime(i, "sampling_date")
tooltip += String.fromCharCode(13) + this.m.getStrTime(i, "delta_date")
var tooltip = this.getTooltip(i, false, false)
list_content.title = tooltip
/* jshint ignore:start */
list_content.onmouseover = function() {
self.graphListFocus(this.dataset.time)
};
list_content.onmouseout = function() {
self.graphListFocus(undefined)
};
/* jshint ignore:end */
table.appendChild(list_content)
}
......@@ -551,6 +558,7 @@ Graph.prototype = {
speed = typeof speed !== 'undefined' ? speed : 500;
this.updateListElemSelected();
this.updateCountActiveSample();
this.graphListFocus(undefined)
if (this.m.samples.number > 1){
this.updateList()
}
......@@ -1433,6 +1441,13 @@ Graph.prototype = {
return d['class']
})
if (document.getElementById(this.id + "_tooltip") == null){
d3.select("body").append("div")
.attr("class", "tooltip")
.attr("id", this.id + "_tooltip")
.style("opacity", 0);
}
this.text_container.selectAll("text")
.on("click", function (d) {
if (d.type == "axis_v" || d.type == "axis_v2") return self.m.changeTime(d.time)
......@@ -1453,7 +1468,25 @@ Graph.prototype = {
}
})
.on("mouseover", function(d) {
var div = d3.select("#"+self.id + "_tooltip")
var time = d.time
var tooltip = self.getTooltip(time, true, true)
div.transition()
.delay(1000)
.duration(200)
.style("opacity", 1);
div .html(tooltip)
.style("left", (d3.event.pageX + 24) + "px")
.style("top", (d3.event.pageY - 32) + "px");
})
.on("mouseout", function(d) {
var div = d3.select("#"+self.id + "_tooltip")
div.transition()
.duration(500)
.style("opacity", 0);
});
return this
},
......@@ -1598,6 +1631,45 @@ Graph.prototype = {
this.init();
this.smartUpdate();
this.resize();
},
getTooltip: function(time, htmlFormat, includeName){
var breakChar
if (htmlFormat){
breakChar = "<br/>"
} else {
breakChar = String.fromCharCode(13)
}
var tooltip = "";
tooltip += this.m.getStrTime(time, "names")
var sampling_date = this.m.getStrTime(time, "sampling_date")
var delta_date = this.m.getStrTime(time, "delta_date")
tooltip += ( (sampling_date != "-/-") ? (breakChar + sampling_date) : "" )
tooltip += ( (delta_date != "-/-") ? (breakChar + delta_date) : "" )
// duplicate from info; refactor
var read_number = this.m.reads.segmented
var percent = (read_number[this.m.t] / this.m.reads.total[this.m.t]) * 100;
var reads = this.m.toStringThousands(read_number[this.m.t]) + " reads (" + percent.toFixed(2) + "%)";
tooltip += breakChar + reads
return tooltip
},
graphListFocus: function(timeFocus){
var div;
for (var time = 0; time < this.m.samples.number; time++) {
div = document.getElementById("time"+time)
if (div != null){ // at init of graph, these div could be not already created
div.classList.remove("labelFocusMinor")
div.classList.remove("labelFocusMajor")
if (timeFocus != undefined ){
if (timeFocus == time){
div.classList.add("labelFocusMajor")
} else {
div.classList.add("labelFocusMinor")
}
}
}
}
}
......
# coding: utf-8
load 'vidjil_browser.rb'
load 'browser_test.rb'
#browser test suite
class TestGraph < BrowserTest
def setup
super
if not defined? $b
set_browser("/doc/analysis-example2.vidjil")
if $b.div(id: 'tip-container').present?
$b.div(:id => 'tip-container').div(:class => 'tip_1').element(:class => 'icon-cancel').click
end
$tooltip = $b.div(:id => "visu2_tooltip")
end
end
def after_tests
end
# issue 4370; test tooltip content on graph
def test_00_mouseover_delay
# before hover, tooltip should be hidden
assert ( $tooltip.style('opacity') == "0" ), "correct opacity of tooltip when label is NOT hover"
$b.graph_x_legend('1').hover
sleep 0.5 # no update icon in this case; so whould use a fixed time
assert ( $tooltip.style('opacity') == "0" ), "correct opacity of tooltip when label is hover"
$b.graph_x_legend('1').hover
sleep 3
assert ( $tooltip.style('opacity') == "1" ), "correct opacity of tooltip when label is hover"
end
def test_01_mouseover_with_dates
# sleep 10
$b.graph_x_legend('1').hover
sleep 1.5 # no update icon in this case; so whould use a fixed time
assert ( $tooltip.style('opacity') == "1" ), "correct opacity of tooltip when label is hover"
content = "T8045-BC082-fu1\n2019-12-27\n+10\n250 000 reads (57.19%)"
assert ( $tooltip.text == content), "Correct text in the sample tooltip"
end
def test_02_mouseover_without_dates
set_browser("/doc/analysis-example.vidjil")
$b.graph_x_legend('0').hover
sleep 2
assert ( $tooltip.style('opacity') == "1" ), "correct opacity of tooltip when label is hover"
content = "helloworld\n741 684 reads (94.26%)"
assert ( $tooltip.text == content), "Correct text in the sample tooltip"
end
# Not really a test
def test_zz_close
close_everything
end
end
......@@ -194,6 +194,35 @@ class TestGraph < BrowserTest
end
def test_08_mouseover
## reset, time 0, preset 0
$b.send_keys 0
$b.graph_x_legend("0").fire_event('click')
$b.update_icon.wait_while(&:present?)
# Use show all and hide all button
$b.div(:id => 'visu2_menu').click
$b.update_icon.wait_while(&:present?) # wait update
$b.td(:id => 'visu2_listElem_showAll').click
$b.update_icon.wait_while(&:present?) # wait update
# Hover the sample in graphList. Label in graph should be changed in size
menu = $b.div(:id => 'visu2_menu')
$b.td(:id => "visu2_listElem_text_0").hover
assert ( $b.element(tag_name: 'text', :id => 'time0').style('font-size') == "16px" ), "sample 0 have correct label size when hover 0 in graphlist"
assert ( $b.element(tag_name: 'text', :id => 'time1').style('font-size') == "12px" ), "sample 1 have correct label size when hover 1 in graphlist"
$b.td(:id => "visu2_listElem_text_1").hover
assert ( $b.element(tag_name: 'text', :id => 'time1').style('font-size') == "16px" ), "sample 1 have correct label size when hover 1 in graphlist"
assert ( $b.element(tag_name: 'text', :id => 'time0').style('font-size') == "12px" ), "sample 0 have correct label size when hover 0 in graphlist"
$b.clone_in_list('4').click
$b.update_icon.wait_while(&:present?) # wait update
assert ( $b.graph_x_legend('0', :class => 'graph_time2').exists? ), "sample 1 have correct label size when no hover in graphlist (bold as select)"
end
# Not really a test
def test_zz_close
close_everything
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment