forked from enviPath/enviPy
Basic System (#31)
Co-authored-by: Tim Lorsbach <tim@lorsba.ch> Reviewed-on: enviPath/enviPy#31
This commit is contained in:
@ -507,28 +507,6 @@ function makeAccordionPanel(accordionId, panelName, panelContent, collapsed, id)
|
||||
+ "</div>";
|
||||
}
|
||||
|
||||
function makeSearchList(divToAppend, jsonob) {
|
||||
|
||||
if(jsonob.status){
|
||||
$(divToAppend).append('<div class="alert alert-danger" role="alert"><p>'+"No results..."+'</p></div>');
|
||||
return;
|
||||
}
|
||||
|
||||
var content = makeAccordionHead("searchAccordion", "Results","");
|
||||
|
||||
for ( var type in jsonob){
|
||||
var obj = jsonob[type];
|
||||
var objs = "";
|
||||
for ( var x in obj) {
|
||||
objs += "<a class='list-group-item' href=\"" + obj[x].id + "\">"
|
||||
+ obj[x].name + "</a>";
|
||||
}
|
||||
content += makeAccordionPanel("searchAccordion", type, objs, true);
|
||||
}
|
||||
$(divToAppend).append(content);
|
||||
|
||||
}
|
||||
|
||||
function fillPRCurve(modelUri, onclick){
|
||||
if (modelUri == '') {
|
||||
return;
|
||||
|
||||
153
static/js/pw.js
153
static/js/pw.js
@ -1,5 +1,18 @@
|
||||
console.log("loaded")
|
||||
|
||||
|
||||
function predictFromNode(url) {
|
||||
$.post("", {node: url})
|
||||
.done(function (data) {
|
||||
console.log("Success:", data);
|
||||
window.location.href = data.success;
|
||||
})
|
||||
.fail(function (xhr, status, error) {
|
||||
console.error("Error:", xhr.status, xhr.responseText);
|
||||
// show user-friendly message or log error
|
||||
});
|
||||
}
|
||||
|
||||
// data = {{ pathway.d3_json | safe }};
|
||||
// elem = 'vizdiv'
|
||||
function draw(pathway, elem) {
|
||||
@ -48,7 +61,7 @@ function draw(pathway, elem) {
|
||||
const avgY = d3.mean(childNodes, d => d.y);
|
||||
n.fx = avgX;
|
||||
// keep level as is
|
||||
n.fy = n.y;
|
||||
n.fy = n.y;
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -77,8 +90,100 @@ function draw(pathway, elem) {
|
||||
d3.select(t).select("circle").classed("highlighted", !d3.select(t).select("circle").classed("highlighted"));
|
||||
}
|
||||
|
||||
// Wait one second before showing popup
|
||||
var popupWaitBeforeShow = 1000;
|
||||
// Keep Popup at least for one second
|
||||
var popushowAtLeast = 1000;
|
||||
|
||||
const tooltip = d3.select("#tooltip");
|
||||
function pop_show_e(element) {
|
||||
var e = element;
|
||||
setTimeout(function () {
|
||||
if ($(e).is(':hover')) { // if element is still hovered
|
||||
$(e).popover("show");
|
||||
|
||||
// workaround to set fixed positions
|
||||
pop = $(e).attr("aria-describedby")
|
||||
h = $('#' + pop).height();
|
||||
$('#' + pop).attr("style", `position: fixed; top: ${clientY - (h / 2.0)}px; left: ${clientX + 10}px; margin: 0px; max-width: 1000px; display: block;`)
|
||||
setTimeout(function () {
|
||||
var close = setInterval(function () {
|
||||
if (!$(".popover:hover").length // mouse outside popover
|
||||
&& !$(e).is(':hover')) { // mouse outside element
|
||||
$(e).popover('hide');
|
||||
clearInterval(close);
|
||||
}
|
||||
}, 100);
|
||||
}, popushowAtLeast);
|
||||
}
|
||||
}, popupWaitBeforeShow);
|
||||
}
|
||||
|
||||
function pop_add(objects, title, contentFunction) {
|
||||
objects.attr("id", "pop")
|
||||
.attr("data-container", "body")
|
||||
.attr("data-toggle", "popover")
|
||||
.attr("data-placement", "right")
|
||||
.attr("title", title);
|
||||
|
||||
objects.each(function (d, i) {
|
||||
options = {trigger: "manual", html: true, animation: false};
|
||||
this_ = this;
|
||||
var p = $(this).popover(options).on("mouseenter", function () {
|
||||
pop_show_e(this);
|
||||
});
|
||||
p.on("show.bs.popover", function (e) {
|
||||
// this is to dynamically ajdust the content and bounds of the popup
|
||||
p.attr('data-content', contentFunction(d));
|
||||
p.data("bs.popover").setContent();
|
||||
p.data("bs.popover").tip().css({"max-width": "1000px"});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function node_popup(n) {
|
||||
popupContent = "<a href='" + n.url +"'>" + n.name + "</a><br>";
|
||||
popupContent += "Depth " + n.depth + "<br>"
|
||||
popupContent += "<img src='" + n.image + "' width='"+ 20 * nodeRadius +"'><br>"
|
||||
if (n.scenarios.length > 0) {
|
||||
popupContent += '<b>Half-lives and related scenarios:</b><br>'
|
||||
for (var s of n.scenarios) {
|
||||
popupContent += "<a href='" + s.url + "'>" + s.name + "</a><br>";
|
||||
}
|
||||
}
|
||||
|
||||
var isLeaf = pathway.links.filter(obj => obj.source.id === n.id).length === 0;
|
||||
if(pathway.isIncremental && isLeaf) {
|
||||
popupContent += '<br><a class="btn btn-primary" onclick="predictFromNode(\'' + n.url + '\')" href="#">Predict from here</a><br>';
|
||||
}
|
||||
|
||||
return popupContent;
|
||||
}
|
||||
|
||||
function edge_popup(e) {
|
||||
popupContent = "<a href='" + e.url +"'>" + e.name + "</a><br>";
|
||||
popupContent += "<img src='" + e.image + "' width='"+ 20 * nodeRadius +"'><br>"
|
||||
if (e.reaction_probability) {
|
||||
popupContent += '<b>Probability:</b><br>' + e.reaction_probability.toFixed(3) + '<br>';
|
||||
}
|
||||
|
||||
|
||||
if (e.scenarios.length > 0) {
|
||||
popupContent += '<b>Half-lives and related scenarios:</b><br>'
|
||||
for (var s of e.scenarios) {
|
||||
popupContent += "<a href='" + s.url + "'>" + s.name + "</a><br>";
|
||||
}
|
||||
}
|
||||
|
||||
return popupContent;
|
||||
}
|
||||
|
||||
var clientX;
|
||||
var clientY;
|
||||
document.addEventListener('mousemove', function(event) {
|
||||
clientX = event.clientX;
|
||||
clientY =event.clientY;
|
||||
});
|
||||
|
||||
const zoomable = d3.select("#zoomable");
|
||||
|
||||
@ -102,10 +207,10 @@ function draw(pathway, elem) {
|
||||
|
||||
orig_depth = n.depth
|
||||
// console.log(n.id, parents)
|
||||
for(idx in parents) {
|
||||
for (idx in parents) {
|
||||
p = nodes[parents[idx]]
|
||||
// console.log(p.depth)
|
||||
if(p.depth >= n.depth) {
|
||||
if (p.depth >= n.depth) {
|
||||
// keep the .5 steps for pseudo nodes
|
||||
n.depth = n.pseudo ? p.depth + 1 : Math.floor(p.depth + 1);
|
||||
// console.log("Adjusting", orig_depth, Math.floor(p.depth + 1));
|
||||
@ -128,13 +233,15 @@ function draw(pathway, elem) {
|
||||
.enter().append("line")
|
||||
// Check if target is pseudo and draw marker only if not pseudo
|
||||
.attr("class", d => d.target.pseudo ? "link_no_arrow" : "link")
|
||||
.on("mouseover", (event, d) => {
|
||||
tooltip.style("visibility", "visible")
|
||||
.text(`Link: ${d.source.id} → ${d.target.id}`)
|
||||
.style("top", `${event.pageY + 5}px`)
|
||||
.style("left", `${event.pageX + 5}px`);
|
||||
})
|
||||
.on("mouseout", () => tooltip.style("visibility", "hidden"));
|
||||
// .on("mouseover", (event, d) => {
|
||||
// tooltip.style("visibility", "visible")
|
||||
// .text(`Link: ${d.source.id} → ${d.target.id}`)
|
||||
// .style("top", `${event.pageY + 5}px`)
|
||||
// .style("left", `${event.pageX + 5}px`);
|
||||
// })
|
||||
// .on("mouseout", () => tooltip.style("visibility", "hidden"));
|
||||
|
||||
pop_add(link, "Reaction", edge_popup);
|
||||
|
||||
// Knoten zeichnen
|
||||
const node = zoomable.append("g")
|
||||
@ -145,19 +252,19 @@ function draw(pathway, elem) {
|
||||
.on("start", dragstarted)
|
||||
.on("drag", dragged)
|
||||
.on("end", dragended))
|
||||
.on("click", function(event, d) {
|
||||
.on("click", function (event, d) {
|
||||
d3.select(this).select("circle").classed("highlighted", !d3.select(this).select("circle").classed("highlighted"));
|
||||
})
|
||||
.on("mouseover", (event, d) => {
|
||||
if (d.pseudo) {
|
||||
return
|
||||
}
|
||||
tooltip.style("visibility", "visible")
|
||||
.text(`Node: ${d.id} Depth: ${d.depth}`)
|
||||
.style("top", `${event.pageY + 5}px`)
|
||||
.style("left", `${event.pageX + 5}px`);
|
||||
})
|
||||
.on("mouseout", () => tooltip.style("visibility", "hidden"));
|
||||
// .on("mouseover", (event, d) => {
|
||||
// if (d.pseudo) {
|
||||
// return
|
||||
// }
|
||||
// tooltip.style("visibility", "visible")
|
||||
// .text(`Node: ${d.id} Depth: ${d.depth}`)
|
||||
// .style("top", `${event.pageY + 5}px`)
|
||||
// .style("left", `${event.pageX + 5}px`);
|
||||
// })
|
||||
// .on("mouseout", () => tooltip.style("visibility", "hidden"));
|
||||
|
||||
// Kreise für die Knoten hinzufügen
|
||||
node.append("circle")
|
||||
@ -172,4 +279,6 @@ function draw(pathway, elem) {
|
||||
.attr("y", -nodeRadius)
|
||||
.attr("width", nodeRadius * 2)
|
||||
.attr("height", nodeRadius * 2);
|
||||
|
||||
pop_add(node, "Compound", node_popup);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user