Skip to content

Commit 8283eb1

Browse files
jcha40jcha40
authored
Merge pull request #39 from CEGRcode/dev
Merge dev branch into master
2 parents ea01283 + 9ead1a1 commit 8283eb1

8 files changed

Lines changed: 302 additions & 21 deletions

File tree

‎index.html‎

Lines changed: 11 additions & 6 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,6 +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 style="display: block; margin-top: 5px;">
66+
<label for="enable-tooltips-checkbox" id="enable-tooltips-label">Enable tooltips</label>
67+
<input id="enable-tooltips-checkbox" type="checkbox">
68+
<script src="js/tooltips.js"></script>
69+
</div>
6570
</div>
6671
</div>
6772
</div>
@@ -121,27 +126,27 @@ <h4>Composite metadata</h4>
121126
<div id="shift-input"></div>
122127
<script src="js/widgets/shift_input.js"></script>
123128
<div>
124-
<label for="combined-checkbox">Combined</label>
129+
<label for="combined-checkbox" id="combined-label">Combined</label>
125130
<input id="combined-checkbox" type="checkbox">
126131
<script src="js/events/combined_checkbox.js"></script>
127132
</div>
128133
<div>
129-
<label for="separate-color-checkbox">Separate colors for strands</label>
134+
<label for="separate-color-checkbox" id="seperate-color-label">Separate colors for strands</label>
130135
<input id="separate-color-checkbox" type="checkbox">
131136
<script src="js/events/separate_color_checkbox.js"></script>
132137
</div>
133138
<div>
134-
<label for="color-trace-checkbox">Color trace</label>
139+
<label for="color-trace-checkbox" id="color-trace-label">Color trace</label>
135140
<input id="color-trace-checkbox" type="checkbox">
136141
<script src="js/events/color_trace_checkbox.js"></script>
137142
</div>
138143
<div>
139-
<label for="tooltip-checkbox">Enable tooltip</label>
144+
<label for="tooltip-checkbox" id="tooltip-label">Enable tooltip</label>
140145
<input id="tooltip-checkbox" type="checkbox" checked>
141146
<script src="js/events/tooltip_checkbox.js"></script>
142147
</div>
143148
<div>
144-
<label for="show-legend-checkbox">Show legend</label>
149+
<label for="show-legend-checkbox" id="show-legend-label">Show legend</label>
145150
<input id="show-legend-checkbox" type="checkbox" checked>
146151
<script src="js/events/show_legend_checkbox.js"></script>
147152
</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: 136 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,20 @@ $(function() {
2424
// Create container for axis controls
2525
let container = d3.select(this.element.context),
2626
xaxis = container.append("div")
27+
.style("user-select","none")
2728
.attr("class", "row")
2829
.append("div")
2930
.attr("class", "col"),
3031
yaxis = container.append("div")
32+
.style("user-select","none")
3133
.attr("class", "row")
3234
.append("div")
3335
.attr("class", "col");
3436

3537
// Create x axis controls
3638
xaxis.append("label")
3739
.attr("for", "xmin-text")
40+
.attr("id", "x-axis-inputs-label")
3841
.text("x axis limits:");
3942

4043
this._elements.xmin_text = xaxis.append("input")
@@ -52,9 +55,65 @@ $(function() {
5255
.style("margin-left", "5px")
5356
.on("change", function() {$("#axes-input").axes_input("change_axis_limits", null, this.value, null, null)});
5457

58+
//Appends the "+" svg/button for the xaxis
59+
let x_plus = xaxis.append("div")
60+
.attr("title", "x_plus")
61+
.style("margin-left", "5px")
62+
.style("display", "inline-block")
63+
.style("cursor","pointer")
64+
.append("svg")
65+
.attr("width", "24px")
66+
.attr("height", "20px")
67+
.attr("baseProfile", "full")
68+
.attr("viewBox", "0 0 25 26")
69+
.attr("version", "1.1")
70+
.attr("xmlns", "http://www.w3.org/2000/svg")
71+
.on("click", function() {
72+
let value_change = 50;
73+
let xmin = parseInt($("#axes-input").axes_input("get_axis_values", 1, value_change));
74+
let xmax = parseInt($("#axes-input").axes_input("get_axis_values", 0, value_change));
75+
$("#axes-input").axes_input("change_axis_limits", xmin - value_change, xmax + value_change, null, null)
76+
})
77+
78+
x_plus.append("path")
79+
.attr("d", "m 1 1 l 24 0 l 0 24 l -24 0 l 0 -24 m 4 12 l 14 0 m -6 -8 l 0 16")
80+
.attr("fill", "none")
81+
.attr("stroke", "orange")
82+
.attr("stroke-width", 2)
83+
.node();
84+
85+
//Appends the "-" svg/button for the xaxis
86+
let x_minus = xaxis.append("div")
87+
.attr("title", "x_minus")
88+
.style("margin-left", "5px")
89+
.style("display", "inline-block")
90+
.style("cursor","pointer")
91+
.append("svg")
92+
.attr("width", "24px")
93+
.attr("height", "20px")
94+
.attr("baseProfile", "full")
95+
.attr("viewBox", "0 0 25 26")
96+
.attr("version", "1.1")
97+
.attr("xmlns", "http://www.w3.org/2000/svg")
98+
.on("click", function() {
99+
let value_change = 50;
100+
let xmin = parseInt($("#axes-input").axes_input("get_axis_values", 1, value_change));
101+
let xmax = parseInt($("#axes-input").axes_input("get_axis_values", 0, value_change));
102+
$("#axes-input").axes_input("change_axis_limits", xmin + value_change, xmax - value_change, null, null)
103+
})
104+
105+
x_minus.append("path")
106+
.attr("d", "m 1 1 l 24 0 l 0 24 l -24 0 l 0 -24 m 4 12 l 14 0")
107+
.attr("fill", "none")
108+
.attr("stroke", "orange")
109+
.attr("stroke-width", 2)
110+
.node();
111+
112+
55113
// Create y axis controls
56114
yaxis.append("label")
57115
.attr("for", "ymin-text")
116+
.attr("id", "y-axis-inputs-label")
58117
.text("y axis limits:");
59118

60119
this._elements.ymin_text = yaxis.append("input")
@@ -71,6 +130,60 @@ $(function() {
71130
.style("width", "50px")
72131
.style("margin-left", "5px")
73132
.on("change", function() {$("#axes-input").axes_input("change_axis_limits", null, null, null, this.value)})
133+
134+
//Appends the "+" svg/button for the yaxis
135+
let y_plus = yaxis.append("div")
136+
.attr("title", "y_plus")
137+
.style("margin-left", "5px")
138+
.style("display", "inline-block")
139+
.style("cursor","pointer")
140+
.append("svg")
141+
.attr("width", "24px")
142+
.attr("height", "20px")
143+
.attr("baseProfile", "full")
144+
.attr("viewBox", "0 0 25 26")
145+
.attr("version", "1.1")
146+
.attr("xmlns", "http://www.w3.org/2000/svg")
147+
.on("click", function() {
148+
let value_change = .1;
149+
let ymin = parseFloat($("#axes-input").axes_input("get_axis_values", 3, value_change));
150+
let ymax = parseFloat($("#axes-input").axes_input("get_axis_values", 2, value_change));
151+
$("#axes-input").axes_input("change_axis_limits", null, null, ymin - value_change, ymax + value_change);
152+
})
153+
154+
y_plus.append("path")
155+
.attr("d", "m 1 1 l 24 0 l 0 24 l -24 0 l 0 -24 m 4 12 l 14 0 m -6 -8 l 0 16")
156+
.attr("fill", "none")
157+
.attr("stroke", "orange")
158+
.attr("stroke-width", 2)
159+
.node();
160+
161+
//Appends the "-" svg/button for the yaxis
162+
let y_minus = yaxis.append("div")
163+
.attr("title", "y_minus")
164+
.style("margin-left", "5px")
165+
.style("display", "inline-block")
166+
.style("cursor","pointer")
167+
.append("svg")
168+
.attr("width", "24px")
169+
.attr("height", "20px")
170+
.attr("baseProfile", "full")
171+
.attr("viewBox", "0 0 25 26")
172+
.attr("version", "1.1")
173+
.attr("xmlns", "http://www.w3.org/2000/svg")
174+
.on("click", function() {
175+
let value_change = .1;
176+
let ymin = parseFloat($("#axes-input").axes_input("get_axis_values", 3, value_change));
177+
let ymax = parseFloat($("#axes-input").axes_input("get_axis_values", 2, value_change));
178+
$("#axes-input").axes_input("change_axis_limits", null, null, parseFloat(ymin + value_change), parseFloat(ymax - value_change));
179+
})
180+
181+
y_minus.append("path")
182+
.attr("d", "m 1 1 l 24 0 l 0 24 l -24 0 l 0 -24 m 4 12 l 14 0")
183+
.attr("fill", "none")
184+
.attr("stroke", "orange")
185+
.attr("stroke-width", 2)
186+
.node();
74187
},
75188

76189
change_axis_limits: function(xmin, xmax, ymin, ymax, change_plot=true) {
@@ -99,11 +212,11 @@ $(function() {
99212
};
100213

101214
// Change the text boxes
102-
this._elements.xmin_text.node().value = this.xmin;
103-
this._elements.xmax_text.node().value = this.xmax;
215+
this._elements.xmin_text.node().value = Math.round(this.xmin * 100) / 100;
216+
this._elements.xmax_text.node().value = Math.round(this.xmax * 100) / 100;
104217
// If the strands are combined, the y axis limit text boxes show 0 for the lower limit and the difference for the upper limit
105-
this._elements.ymin_text.node().value = this.combined ? 0 : this.ymin;
106-
this._elements.ymax_text.node().value = this.combined ? this.ymax - this.ymin : this.ymax;
218+
this._elements.ymin_text.node().value = this.combined ? 0 : Math.round(this.ymin * 100) / 100;
219+
this._elements.ymax_text.node().value = this.combined ? Math.round((this.ymax - this.ymin) * 100)/100 : Math.round(this.ymax * 100) / 100;
107220

108221
// Change the plot, if requested
109222
if (change_plot) {
@@ -112,6 +225,25 @@ $(function() {
112225
}
113226
},
114227

228+
//Returns the current value an axis given an integer and a value the axis is being changed by (so the function calling it can default to zero)
229+
get_axis_values: function(axis, change_val) {
230+
if (parseInt(axis) == 0){
231+
return (this.xmax > change_val) ? this.xmax : change_val;
232+
}
233+
else if (parseInt(axis) == 1){
234+
return (this.xmin < -change_val) ? this.xmin : -change_val;
235+
}
236+
else if (parseInt(axis) == 2){
237+
return (this.ymax > change_val) ? this.ymax : change_val;
238+
}
239+
else if (parseInt(axis) == 3){
240+
return (this.ymin < -change_val) ? this.ymin : -change_val;
241+
}
242+
else{
243+
return null;
244+
}
245+
},
246+
115247
toggle_combined: function(combined) {
116248
this.combined = combined;
117249
// If the strands are combined, the y axis limit text boxes show 0 for the lower limit and the difference for the upper limit

0 commit comments

Comments
 (0)