Skip to content

Commit 7bb7421

Browse files
jcha40jcha40
committed
Added checkbox to enable/disable tooltip
1 parent e596da1 commit 7bb7421

3 files changed

Lines changed: 60 additions & 40 deletions

File tree

‎index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,11 @@ <h4>Composite metadata</h4>
135135
<input id="color-trace-checkbox" type="checkbox">
136136
<script src="js/events/color_trace_checkbox.js"></script>
137137
</div>
138+
<div>
139+
<label for="tooltip-checkbox">Enable tooltip</label>
140+
<input id="tooltip-checkbox" type="checkbox" checked>
141+
<script src="js/events/tooltip_checkbox.js"></script>
142+
</div>
138143
<div>
139144
<input type="button" id="download-svg-button" value="Download as SVG">
140145
<script src="js/events/download_svg_button.js"></script>

‎js/events/tooltip_checkbox.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
$(function() {
2+
d3.select("#tooltip-checkbox").on("change", function() {
3+
$("#main-plot").main_plot("toggle_tooltip", this.checked);
4+
if (!this.checked) {
5+
$("#main-plot").main_plot("hide_tooltip")
6+
}
7+
})
8+
})

‎js/widgets/main_plot.js‎

Lines changed: 47 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ $(function() {
1818
combined: false,
1919
color_trace: false,
2020
locked: false,
21+
enable_tooltip: true,
2122

2223
_elements: {
2324
main_plot: null,
@@ -139,8 +140,7 @@ $(function() {
139140
.attr("id", "composite-plot-tooltip");
140141

141142
main_plot.on("mousemove", function(e) {
142-
let data = $("#settings-table").settings_table("export").filter(d => d.files_loaded > 0 && !d.hide);
143-
$("#main-plot").main_plot("move_tooltip", e, data)
143+
$("#main-plot").main_plot("move_tooltip", e)
144144
});
145145
main_plot.on("mouseleave", function() {
146146
$("#main-plot").main_plot("hide_tooltip")
@@ -597,46 +597,53 @@ $(function() {
597597
this.locked = locked
598598
},
599599

600-
move_tooltip: function(ev, data) {
601-
let {x: plot_x, y: plot_y, width, height} = this._elements.main_plot.node().getBoundingClientRect(),
602-
mouse_x = (ev.clientX - plot_x) * this.width / width,
603-
mouse_y = (ev.clientY - plot_y) * this.height / height;
600+
toggle_tooltip: function(enable) {
601+
this.enable_tooltip = enable
602+
},
604603

605-
if (mouse_x >= this.margins.left && mouse_x <= this.width - this.margins.right &&
606-
mouse_y >= this.margins.top && mouse_y <= this.height - this.margins.bottom) {
607-
let mouse_x_scaled = Math.round(this.xscale.invert(mouse_x));
608-
data = data.filter(d => d.xmin <= mouse_x_scaled && d.xmax >= mouse_x_scaled);
604+
move_tooltip: function(ev) {
605+
if (this.enable_tooltip) {
606+
let data = $("#settings-table").settings_table("export").filter(d => d.files_loaded > 0 && !d.hide),
607+
{x: plot_x, y: plot_y, width, height} = this._elements.main_plot.node().getBoundingClientRect(),
608+
mouse_x = (ev.clientX - plot_x) * this.width / width,
609+
mouse_y = (ev.clientY - plot_y) * this.height / height;
609610

610-
this._elements.tooltip
611-
.style("display", null)
612-
.attr("transform", "translate(" + this.xscale(mouse_x_scaled) + " " + mouse_y + ")");
613-
614-
let tooltip_border = this._elements.tooltip.selectAll("path")
615-
.data([null])
616-
.join("path")
617-
.attr("fill", "white")
618-
.attr("stroke", "black"),
619-
tooltip_text = this._elements.tooltip.selectAll("text")
620-
.data([null])
621-
.join("text")
622-
.attr("font-size", "8px")
623-
.attr("stroke", "black")
624-
.attr("stroke-width", "0.15px");
625-
626-
tooltip_text.selectAll("tspan")
627-
.data([mouse_x_scaled, ...data])
628-
.join("tspan")
629-
.attr("x", 0)
630-
.attr("y", (_, i) => (i * 1.1) + "em")
631-
.attr("font-weight", (_, i) => i === 0 ? "bold" : null)
632-
.attr("fill", (d, i) => i === 0 ? "black" : d.color)
633-
.text((d, i) => i === 0 ? this.xlabel + ": " + d : d.name + ": " + (this.combined ? parseFloat((d.sense[mouse_x_scaled - d.xmin] + d.anti[mouse_x_scaled - d.xmin]).toPrecision(2))
634-
: parseFloat(d.sense[mouse_x_scaled - d.xmin].toPrecision(2)) + "; " + parseFloat(d.anti[mouse_x_scaled - d.xmin].toPrecision(2))));
635-
let {y, width: w, height: h} = tooltip_text.node().getBBox();
636-
tooltip_text.attr("transform", "translate(" + (-w / 2) + " " + (15 - y) + ")");
637-
tooltip_border.attr("d", "M" + (-w / 2 - 10) + ",5H-5l5,-5l5,5H" + (w / 2 + 10) + "v" + (h + 20) + "h-" + (w + 20) + "z")
638-
} else {
639-
this._elements.tooltip.style("display", "none")
611+
if (mouse_x >= this.margins.left && mouse_x <= this.width - this.margins.right &&
612+
mouse_y >= this.margins.top && mouse_y <= this.height - this.margins.bottom) {
613+
let mouse_x_scaled = Math.round(this.xscale.invert(mouse_x));
614+
data = data.filter(d => d.xmin <= mouse_x_scaled && d.xmax >= mouse_x_scaled);
615+
616+
this._elements.tooltip
617+
.style("display", null)
618+
.attr("transform", "translate(" + this.xscale(mouse_x_scaled) + " " + mouse_y + ")");
619+
620+
let tooltip_border = this._elements.tooltip.selectAll("path")
621+
.data([null])
622+
.join("path")
623+
.attr("fill", "white")
624+
.attr("stroke", "black"),
625+
tooltip_text = this._elements.tooltip.selectAll("text")
626+
.data([null])
627+
.join("text")
628+
.attr("font-size", "8px")
629+
.attr("stroke", "black")
630+
.attr("stroke-width", "0.15px");
631+
632+
tooltip_text.selectAll("tspan")
633+
.data([mouse_x_scaled, ...data])
634+
.join("tspan")
635+
.attr("x", 0)
636+
.attr("y", (_, i) => (i * 1.1) + "em")
637+
.attr("font-weight", (_, i) => i === 0 ? "bold" : null)
638+
.attr("fill", (d, i) => i === 0 ? "black" : d.color)
639+
.text((d, i) => i === 0 ? this.xlabel + ": " + d : d.name + ": " + (this.combined ? parseFloat((d.sense[mouse_x_scaled - d.xmin] + d.anti[mouse_x_scaled - d.xmin]).toPrecision(2))
640+
: parseFloat(d.sense[mouse_x_scaled - d.xmin].toPrecision(2)) + "; " + parseFloat(d.anti[mouse_x_scaled - d.xmin].toPrecision(2))));
641+
let {y, width: w, height: h} = tooltip_text.node().getBBox();
642+
tooltip_text.attr("transform", "translate(" + (-w / 2) + " " + (15 - y) + ")");
643+
tooltip_border.attr("d", "M" + (-w / 2 - 10) + ",5H-5l5,-5l5,5H" + (w / 2 + 10) + "v" + (h + 20) + "h-" + (w + 20) + "z")
644+
} else {
645+
this._elements.tooltip.style("display", "none")
646+
}
640647
}
641648
},
642649

0 commit comments

Comments
 (0)