Skip to content

Added tooltip feature #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jcha40 merged 1 commit into from
Aug 10, 2023
Merged

Added tooltip feature #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
<div class="row">
<div class="col">
<input type="checkbox" id="lock-axes-checkbox">
<label for="lock-axes-checkbox">Lock axes</label>
<label for="lock-axes-checkbox" id="lock-axes-label">Lock axes</label>
<script src="js/events/lock_axes_checkbox.js"></script>
</div>
</div>
Expand All @@ -62,7 +62,11 @@
<div class="col text-right">
<input type="button" id="reset-plot-button" value="Reset plot">
<script src="js/events/reset_button.js"></script>
</div>
<div style="display: block; margin-top: 5px;">
<label for="enable-tooltips" id="enable-tooltips-label">Enable tooltips</label>
<input id="enable-tooltips-checkbox" type="checkbox">
<script src="js/tooltips.js"></script>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -121,27 +125,27 @@ <h4>Composite metadata</h4>
<div id="shift-input"></div>
<script src="js/widgets/shift_input.js"></script>
<div>
<label for="combined-checkbox">Combined</label>
<label for="combined-checkbox" id="combined-label">Combined</label>
<input id="combined-checkbox" type="checkbox">
<script src="js/events/combined_checkbox.js"></script>
</div>
<div>
<label for="separate-color-checkbox">Separate colors for strands</label>
<label for="separate-color-checkbox" id="seperate-color-label">Separate colors for strands</label>
<input id="separate-color-checkbox" type="checkbox">
<script src="js/events/separate_color_checkbox.js"></script>
</div>
<div>
<label for="color-trace-checkbox">Color trace</label>
<label for="color-trace-checkbox" id="color-trace-label">Color trace</label>
<input id="color-trace-checkbox" type="checkbox">
<script src="js/events/color_trace_checkbox.js"></script>
</div>
<div>
<label for="tooltip-checkbox">Enable tooltip</label>
<label for="tooltip-checkbox" id="tooltip-label">Enable tooltip</label>
<input id="tooltip-checkbox" type="checkbox" checked>
<script src="js/events/tooltip_checkbox.js"></script>
</div>
<div>
<label for="show-legend-checkbox">Show legend</label>
<label for="show-legend-checkbox" id="show-legend-label">Show legend</label>
<input id="show-legend-checkbox" type="checkbox" checked>
<script src="js/events/show_legend_checkbox.js"></script>
</div>
Expand Down
119 changes: 119 additions & 0 deletions js/tooltips.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
const DELAY = 250; //Sets how long it takes for tooltips to appear in ms
const OPACITY = .9; //Sets oppacity of tool-tip background;
const tips = new Map();
tips.set("json-button", "Import plot, metadata, and settings");
tips.set("json-download", "Export uploaded files, metadata, and settings");
tips.set("tsv-download","Export metadata table and plot settings");
tips.set("import-metadata-button", "Import metadata with API key and email");
tips.set("load-composite-button", "Load multiple id's from one '.out' file (Under development)");
tips.set("lock-axes-label", "Prevent axes limits from changing");
tips.set("lock-axes-checkbox", "Prevent axes limits from changing");
tips.set("autoscale-axes-button", "Scales x and y axes to fit plot");
tips.set("color-trace-checkbox", "Toggle outline on plot");
tips.set("autoscale-composites-button", "Sets scale of each composite to 1 / (#of IDs)");
tips.set("reset-plot-button", "Clear settings, metadata, and uploaded files");
tips.set("enable-tooltips-label", "Turn these tooltips on or off");
tips.set("enable-tooltips-checkbox", "Turn these tooltips on or off");
tips.set("x-axis-inputs-label", "Change the x axis limits");
tips.set("xmin-text", "Change x axis minimum");
tips.set("xmax-text", "Change x axis maximum");
tips.set("y-axis-inputs-label", "Change the y axis limits")
tips.set("ymin-text", "Change y axis minimum");
tips.set("ymax-text", "Change y axis maximum");

tips.set("settings-dropdown", "Use preset style settings");
tips.set("opacity-label", "Change opacity of shading for all composites");
tips.set("opacity-text", "Change opacity of shading for all composites");
tips.set("smoothing-label", "Change smoothing on plot for all composites");
tips.set("smoothing-text", "Change smoothing on plot for all composites");
tips.set("shift-label", "Shift all strands back or forth");
tips.set("shift-text", "Shift all strands back or forth");
tips.set("combined-label", "Combine forward and reverse strands");
tips.set("combined-checkbox", "Combine forward and reverse strands");
tips.set("seperate-color-label", "Toggle seperate color to forward and reverse strands");
tips.set("separate-color-checkbox", "Toggle seperate color to forward and reverse strands");
tips.set("color-trace-label", "Toggle outline on graph");
tips.set("color-trace-checkbox", "Toggle outline on graph");
tips.set("tooltip-label", "Enable coordinate tooltip");
tips.set("tooltip-checkbox", "Enable coordinate tooltip");
tips.set("show-legend-label", "Show colors legend for composites");
tips.set("show-legend-checkbox", "Show colors legend for composites");
tips.set("download-svg-button", "Download plot, labels, and legend as SVG");

tips.set("main-plot-title", "Click to change this label");
tips.set("main-plot-xlabel", "Click to change this label");
tips.set("main-plot-ylabel", "Click to change this label");

var tooltip_shown = false;
id = "";

window.addEventListener('mousemove', e => {
element = document.elementFromPoint(e.clientX, e.clientY);
console.log(element.id);
if (element != null)
{
id = element.id.toString();
}
if (tips.has(id) && document.getElementById("enable-tooltips-checkbox").checked && !tooltip_shown){
tooltip_shown = true;
makeToolTip(id, e);
//Delete the tooltip when mouse leaves element
d3.select("#" + id).on("mouseout", function() {
d3.select("#tooltip").remove();
tooltip_shown = false;
});
}
},{passive: true})

function makeToolTip(id, e)
{
//Create invisible tooltip
let message = tips.get(id);
let button = document.getElementById(id).getBoundingClientRect();
let visible = false;
d3.select("body")
.append("div")
.attr("id", "tooltip")
.style("position", "absolute")
.style("top", parseFloat(button.bottom + 5) +"px")
.style("z-index", "999")
.style("background-color", "rgba(255, 255, 255, " + OPACITY + ")")
.style("visibility", "hidden")
.style("inline-size", "150px")
.style("overflow-wrap", "break-word")
.style("text-align", "center")
.text(message)
.style("color", "black")
.style("font-size", "80%")
.style("opacity", "1")
.append("svg")
.attr("width", "12px")
.attr("height", "10px")
.attr("baseProfile", "full")
.attr("viewBox", "0 0 32 32")
.attr("version", "1.1")
.attr("xmlns", "http://www.w3.org/2000/svg")
.style("position", "absolute")
.style("top","-7px")
.style("left",parseFloat(document.getElementById("tooltip").getBoundingClientRect().width / 2) - 6 + "px")
.append("path")
.attr("d", "M 1 24 L 16 1 L 31 24")
.attr("fill", "rgba(255, 255, 255, 0.9)")
.attr("stroke", "rgba(255, 255, 255, 0.9)")
.attr("stroke-width", 2);
//If mouse is still over element after DELAY make tooltip visible
setTimeout(() => {
if ($("#"+ id + ":hover").length !== 0 && !visible) {
let mouseX = e.clientX;
visible = true;
d3.select("#tooltip")
.style("left", parseFloat(mouseX - document.getElementById("tooltip").getBoundingClientRect().width / 2) + "px")
.style("visibility", "visible");
}
}, DELAY);
//Delete the tooltip when mouse leaves element before the time has passed
d3.select("#" + id).on("mouseout", function() {
d3.select("#tooltip").remove();
tooltip_shown = false;
});
}
2 changes: 2 additions & 0 deletions js/widgets/axes_input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ $(function() {
// Create x axis controls
xaxis.append("label")
.attr("for", "xmin-text")
.attr("id", "x-axis-inputs-label")
.text("x axis limits:");

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

this._elements.ymin_text = yaxis.append("input")
Expand Down
15 changes: 10 additions & 5 deletions js/widgets/main_plot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,15 +120,17 @@ $(function() {
text: this.title,
x: (this.width + this.margins.left - this.margins.right) / 2,
y: 20,
font_size: 16
});
font_size: 16,
id: "main-plot-title"
})
this._elements.xlabel = main_plot.append("g");
$(this._elements.xlabel.node()).editable_svg_text({
label: "xlabel",
text: this.xlabel,
x: (this.width + this.margins.left - this.margins.right) / 2,
y: this.height - 5,
font_size: 16
font_size: 16,
id: "main-plot-xlabel"
});
this._elements.ylabel = main_plot.append("g");
$(this._elements.ylabel.node()).editable_svg_text({
Expand All @@ -137,7 +139,8 @@ $(function() {
x: 12,
y: (this.height + this.margins.top - this.margins.bottom) / 2,
font_size: 16,
rotation: "vertical"
rotation: "vertical",
id: "main-plot-ylabel"
});

// Create container for composites
Expand Down Expand Up @@ -888,7 +891,8 @@ $(function() {
x: null,
y: null,
font_size: null,
rotation: "horizontal"
rotation: "horizontal",
id: id
},

_create: function() {
Expand All @@ -897,6 +901,7 @@ $(function() {
this.text_label = label_group.append("text")
.attr("x", this.options.x)
.attr("y", this.options.y)
.attr("id", this.options.id)
.attr("font-size", this.options.font_size)
.attr("transform", "rotate(" + (this.options.rotation === "horizontal" ? 0 : -90 + " " + this.options.x + " " + this.options.y) + ")")
.style("text-anchor", "middle")
Expand Down
1 change: 1 addition & 0 deletions js/widgets/opacity_input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ $(function() {
let container = d3.select(this.element.context),
label = container.append("label")
.attr("for", "opacity-slider")
.attr("id", "opacity-label")
.text("Opacity:"),
slider = container.append("input")
.attr("type", "range")
Expand Down
1 change: 1 addition & 0 deletions js/widgets/shift_input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ $(function() {
let container = d3.select(this.element.context),
label = container.append("label")
.attr("for", "shift-slider")
.attr("id", "shift-label")
.text("BP shift:"),
slider = container.append("input")
.attr("type", "range")
Expand Down
1 change: 1 addition & 0 deletions js/widgets/smoothing_input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ $(function() {
let container = d3.select(this.element.context),
label = container.append("label")
.attr("for", "smoothing-slider")
.attr("id", "smoothing-label")
.text("Smoothing:"),
slider = container.append("input")
.attr("type", "range")
Expand Down