Skip to content

Commit 57e7764

Browse files
jcha40jcha40
authored
Merge pull request #38 from CEGRcode/tool-tips
Added tooltip feature
2 parents dc9276b + 7b5a674 commit 57e7764

7 files changed

Lines changed: 145 additions & 12 deletions

File tree

‎index.html‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
<div class="row">
5151
<div class="col">
5252
<input type="checkbox" id="lock-axes-checkbox">
53-
<label for="lock-axes-checkbox">Lock axes</label>
53+
<label for="lock-axes-checkbox" id="lock-axes-label">Lock axes</label>
5454
<script src="js/events/lock_axes_checkbox.js"></script>
5555
</div>
5656
</div>
@@ -62,7 +62,11 @@
6262
<div class="col text-right">
6363
<input type="button" id="reset-plot-button" value="Reset plot">
6464
<script src="js/events/reset_button.js"></script>
65-
</div>
65+
<div style="display: block; margin-top: 5px;">
66+
<label for="enable-tooltips" id="enable-tooltips-label">Enable tooltips</label>
67+
<input id="enable-tooltips-checkbox" type="checkbox">
68+
<script src="js/tooltips.js"></script>
69+
</div>
6670
</div>
6771
</div>
6872
</div>
@@ -121,27 +125,27 @@ <h4>Composite metadata</h4>
121125
<div id="shift-input"></div>
122126
<script src="js/widgets/shift_input.js"></script>
123127
<div>
124-
<label for="combined-checkbox">Combined</label>
128+
<label for="combined-checkbox" id="combined-label">Combined</label>
125129
<input id="combined-checkbox" type="checkbox">
126130
<script src="js/events/combined_checkbox.js"></script>
127131
</div>
128132
<div>
129-
<label for="separate-color-checkbox">Separate colors for strands</label>
133+
<label for="separate-color-checkbox" id="seperate-color-label">Separate colors for strands</label>
130134
<input id="separate-color-checkbox" type="checkbox">
131135
<script src="js/events/separate_color_checkbox.js"></script>
132136
</div>
133137
<div>
134-
<label for="color-trace-checkbox">Color trace</label>
138+
<label for="color-trace-checkbox" id="color-trace-label">Color trace</label>
135139
<input id="color-trace-checkbox" type="checkbox">
136140
<script src="js/events/color_trace_checkbox.js"></script>
137141
</div>
138142
<div>
139-
<label for="tooltip-checkbox">Enable tooltip</label>
143+
<label for="tooltip-checkbox" id="tooltip-label">Enable tooltip</label>
140144
<input id="tooltip-checkbox" type="checkbox" checked>
141145
<script src="js/events/tooltip_checkbox.js"></script>
142146
</div>
143147
<div>
144-
<label for="show-legend-checkbox">Show legend</label>
148+
<label for="show-legend-checkbox" id="show-legend-label">Show legend</label>
145149
<input id="show-legend-checkbox" type="checkbox" checked>
146150
<script src="js/events/show_legend_checkbox.js"></script>
147151
</div>

‎js/tooltips.js‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
const DELAY = 250; //Sets how long it takes for tooltips to appear in ms
2+
const OPACITY = .9; //Sets oppacity of tool-tip background;
3+
const tips = new Map();
4+
tips.set("json-button", "Import plot, metadata, and settings");
5+
tips.set("json-download", "Export uploaded files, metadata, and settings");
6+
tips.set("tsv-download","Export metadata table and plot settings");
7+
tips.set("import-metadata-button", "Import metadata with API key and email");
8+
tips.set("load-composite-button", "Load multiple id's from one '.out' file (Under development)");
9+
tips.set("lock-axes-label", "Prevent axes limits from changing");
10+
tips.set("lock-axes-checkbox", "Prevent axes limits from changing");
11+
tips.set("autoscale-axes-button", "Scales x and y axes to fit plot");
12+
tips.set("color-trace-checkbox", "Toggle outline on plot");
13+
tips.set("autoscale-composites-button", "Sets scale of each composite to 1 / (#of IDs)");
14+
tips.set("reset-plot-button", "Clear settings, metadata, and uploaded files");
15+
tips.set("enable-tooltips-label", "Turn these tooltips on or off");
16+
tips.set("enable-tooltips-checkbox", "Turn these tooltips on or off");
17+
tips.set("x-axis-inputs-label", "Change the x axis limits");
18+
tips.set("xmin-text", "Change x axis minimum");
19+
tips.set("xmax-text", "Change x axis maximum");
20+
tips.set("y-axis-inputs-label", "Change the y axis limits")
21+
tips.set("ymin-text", "Change y axis minimum");
22+
tips.set("ymax-text", "Change y axis maximum");
23+
24+
tips.set("settings-dropdown", "Use preset style settings");
25+
tips.set("opacity-label", "Change opacity of shading for all composites");
26+
tips.set("opacity-text", "Change opacity of shading for all composites");
27+
tips.set("smoothing-label", "Change smoothing on plot for all composites");
28+
tips.set("smoothing-text", "Change smoothing on plot for all composites");
29+
tips.set("shift-label", "Shift all strands back or forth");
30+
tips.set("shift-text", "Shift all strands back or forth");
31+
tips.set("combined-label", "Combine forward and reverse strands");
32+
tips.set("combined-checkbox", "Combine forward and reverse strands");
33+
tips.set("seperate-color-label", "Toggle seperate color to forward and reverse strands");
34+
tips.set("separate-color-checkbox", "Toggle seperate color to forward and reverse strands");
35+
tips.set("color-trace-label", "Toggle outline on graph");
36+
tips.set("color-trace-checkbox", "Toggle outline on graph");
37+
tips.set("tooltip-label", "Enable coordinate tooltip");
38+
tips.set("tooltip-checkbox", "Enable coordinate tooltip");
39+
tips.set("show-legend-label", "Show colors legend for composites");
40+
tips.set("show-legend-checkbox", "Show colors legend for composites");
41+
tips.set("download-svg-button", "Download plot, labels, and legend as SVG");
42+
43+
tips.set("main-plot-title", "Click to change this label");
44+
tips.set("main-plot-xlabel", "Click to change this label");
45+
tips.set("main-plot-ylabel", "Click to change this label");
46+
47+
var tooltip_shown = false;
48+
id = "";
49+
50+
window.addEventListener('mousemove', e => {
51+
element = document.elementFromPoint(e.clientX, e.clientY);
52+
console.log(element.id);
53+
if (element != null)
54+
{
55+
id = element.id.toString();
56+
}
57+
if (tips.has(id) && document.getElementById("enable-tooltips-checkbox").checked && !tooltip_shown){
58+
tooltip_shown = true;
59+
makeToolTip(id, e);
60+
//Delete the tooltip when mouse leaves element
61+
d3.select("#" + id).on("mouseout", function() {
62+
d3.select("#tooltip").remove();
63+
tooltip_shown = false;
64+
});
65+
}
66+
},{passive: true})
67+
68+
function makeToolTip(id, e)
69+
{
70+
//Create invisible tooltip
71+
let message = tips.get(id);
72+
let button = document.getElementById(id).getBoundingClientRect();
73+
let visible = false;
74+
d3.select("body")
75+
.append("div")
76+
.attr("id", "tooltip")
77+
.style("position", "absolute")
78+
.style("top", parseFloat(button.bottom + 5) +"px")
79+
.style("z-index", "999")
80+
.style("background-color", "rgba(255, 255, 255, " + OPACITY + ")")
81+
.style("visibility", "hidden")
82+
.style("inline-size", "150px")
83+
.style("overflow-wrap", "break-word")
84+
.style("text-align", "center")
85+
.text(message)
86+
.style("color", "black")
87+
.style("font-size", "80%")
88+
.style("opacity", "1")
89+
.append("svg")
90+
.attr("width", "12px")
91+
.attr("height", "10px")
92+
.attr("baseProfile", "full")
93+
.attr("viewBox", "0 0 32 32")
94+
.attr("version", "1.1")
95+
.attr("xmlns", "http://www.w3.org/2000/svg")
96+
.style("position", "absolute")
97+
.style("top","-7px")
98+
.style("left",parseFloat(document.getElementById("tooltip").getBoundingClientRect().width / 2) - 6 + "px")
99+
.append("path")
100+
.attr("d", "M 1 24 L 16 1 L 31 24")
101+
.attr("fill", "rgba(255, 255, 255, 0.9)")
102+
.attr("stroke", "rgba(255, 255, 255, 0.9)")
103+
.attr("stroke-width", 2);
104+
//If mouse is still over element after DELAY make tooltip visible
105+
setTimeout(() => {
106+
if ($("#"+ id + ":hover").length !== 0 && !visible) {
107+
let mouseX = e.clientX;
108+
visible = true;
109+
d3.select("#tooltip")
110+
.style("left", parseFloat(mouseX - document.getElementById("tooltip").getBoundingClientRect().width / 2) + "px")
111+
.style("visibility", "visible");
112+
}
113+
}, DELAY);
114+
//Delete the tooltip when mouse leaves element before the time has passed
115+
d3.select("#" + id).on("mouseout", function() {
116+
d3.select("#tooltip").remove();
117+
tooltip_shown = false;
118+
});
119+
}

‎js/widgets/axes_input.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ $(function() {
3737
// Create x axis controls
3838
xaxis.append("label")
3939
.attr("for", "xmin-text")
40+
.attr("id", "x-axis-inputs-label")
4041
.text("x axis limits:");
4142

4243
this._elements.xmin_text = xaxis.append("input")
@@ -112,6 +113,7 @@ $(function() {
112113
// Create y axis controls
113114
yaxis.append("label")
114115
.attr("for", "ymin-text")
116+
.attr("id", "y-axis-inputs-label")
115117
.text("y axis limits:");
116118

117119
this._elements.ymin_text = yaxis.append("input")

‎js/widgets/main_plot.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -120,15 +120,17 @@ $(function() {
120120
text: this.title,
121121
x: (this.width + this.margins.left - this.margins.right) / 2,
122122
y: 20,
123-
font_size: 16
124-
});
123+
font_size: 16,
124+
id: "main-plot-title"
125+
})
125126
this._elements.xlabel = main_plot.append("g");
126127
$(this._elements.xlabel.node()).editable_svg_text({
127128
label: "xlabel",
128129
text: this.xlabel,
129130
x: (this.width + this.margins.left - this.margins.right) / 2,
130131
y: this.height - 5,
131-
font_size: 16
132+
font_size: 16,
133+
id: "main-plot-xlabel"
132134
});
133135
this._elements.ylabel = main_plot.append("g");
134136
$(this._elements.ylabel.node()).editable_svg_text({
@@ -137,7 +139,8 @@ $(function() {
137139
x: 12,
138140
y: (this.height + this.margins.top - this.margins.bottom) / 2,
139141
font_size: 16,
140-
rotation: "vertical"
142+
rotation: "vertical",
143+
id: "main-plot-ylabel"
141144
});
142145

143146
// Create container for composites
@@ -888,7 +891,8 @@ $(function() {
888891
x: null,
889892
y: null,
890893
font_size: null,
891-
rotation: "horizontal"
894+
rotation: "horizontal",
895+
id: id
892896
},
893897

894898
_create: function() {
@@ -897,6 +901,7 @@ $(function() {
897901
this.text_label = label_group.append("text")
898902
.attr("x", this.options.x)
899903
.attr("y", this.options.y)
904+
.attr("id", this.options.id)
900905
.attr("font-size", this.options.font_size)
901906
.attr("transform", "rotate(" + (this.options.rotation === "horizontal" ? 0 : -90 + " " + this.options.x + " " + this.options.y) + ")")
902907
.style("text-anchor", "middle")

‎js/widgets/opacity_input.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ $(function() {
1111
let container = d3.select(this.element.context),
1212
label = container.append("label")
1313
.attr("for", "opacity-slider")
14+
.attr("id", "opacity-label")
1415
.text("Opacity:"),
1516
slider = container.append("input")
1617
.attr("type", "range")

‎js/widgets/shift_input.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ $(function() {
1111
let container = d3.select(this.element.context),
1212
label = container.append("label")
1313
.attr("for", "shift-slider")
14+
.attr("id", "shift-label")
1415
.text("BP shift:"),
1516
slider = container.append("input")
1617
.attr("type", "range")

‎js/widgets/smoothing_input.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ $(function() {
1111
let container = d3.select(this.element.context),
1212
label = container.append("label")
1313
.attr("for", "smoothing-slider")
14+
.attr("id", "smoothing-label")
1415
.text("Smoothing:"),
1516
slider = container.append("input")
1617
.attr("type", "range")

0 commit comments

Comments
 (0)