Skip to content

Commit 7b5a674

Browse files
benjaminbeer256benjaminbeer256
committed
Added tooltip feature
Settings for the tooltip (like delay and background opacity) can be changed tooltip.js Also, things in the settings table already had title properties, so I left them alone
1 parent 846df3a commit 7b5a674

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
@@ -35,6 +35,7 @@ $(function() {
3535
// Create x axis controls
3636
xaxis.append("label")
3737
.attr("for", "xmin-text")
38+
.attr("id", "x-axis-inputs-label")
3839
.text("x axis limits:");
3940

4041
this._elements.xmin_text = xaxis.append("input")
@@ -55,6 +56,7 @@ $(function() {
5556
// Create y axis controls
5657
yaxis.append("label")
5758
.attr("for", "ymin-text")
59+
.attr("id", "y-axis-inputs-label")
5860
.text("y axis limits:");
5961

6062
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)