forked from enviPath/enviPy
Implemented Compound Names / Reaction Names View Option
This commit is contained in:
Tim Lorsbach
@ -154,6 +154,10 @@ function draw(pathway, elem) {
|
||||
});
|
||||
|
||||
node.attr("transform", d => `translate(${d.x},${d.y})`);
|
||||
|
||||
linkText
|
||||
.attr("x", d => (d.source.x + d.target.x) / 2)
|
||||
.attr("y", d => (d.source.y + d.target.y) / 2);
|
||||
}
|
||||
|
||||
function dragstarted(event, d) {
|
||||
@ -647,21 +651,32 @@ function draw(pathway, elem) {
|
||||
.on("tick", ticked);
|
||||
|
||||
// Kanten zeichnen
|
||||
const link = zoomable.append("g")
|
||||
.selectAll("path")
|
||||
.data(links)
|
||||
.enter().append("path")
|
||||
// Check if target is pseudo and draw marker only if not pseudo
|
||||
.attr("class", d => d.target.pseudo ? "link_no_arrow" : "link")
|
||||
.attr("marker-end", d => {
|
||||
if (d.target.pseudo) return '';
|
||||
if (d.source.id === d.target.id) return 'url(#curve-arrow)'; // Use curve arrow for self-loops
|
||||
return d.multi_step ? 'url(#doublearrow)' : 'url(#arrow)';
|
||||
})
|
||||
.attr("fill", "none")
|
||||
.on("click", function(event, d) {
|
||||
const linkGroup = zoomable.append("g")
|
||||
.selectAll("g")
|
||||
.data(links)
|
||||
.enter()
|
||||
.append("g")
|
||||
.attr("class", "link-group");
|
||||
|
||||
|
||||
const link = linkGroup
|
||||
.append("path")
|
||||
.attr("class", d => d.target.pseudo ? "link_no_arrow" : "link")
|
||||
.attr("marker-end", d => d.target.pseudo ? "" : "url(#arrow)")
|
||||
.attr("fill", "none")
|
||||
|
||||
// Check if target is pseudo and draw marker only if not pseudo
|
||||
.attr("class", d => d.target.pseudo ? "link_no_arrow" : "link")
|
||||
.attr("marker-end", d => {
|
||||
if (d.target.pseudo) return '';
|
||||
if (d.source.id === d.target.id) return 'url(#curve-arrow)'; // Use curve arrow for self-loops
|
||||
return d.multi_step ? 'url(#doublearrow)' : 'url(#arrow)';
|
||||
}
|
||||
)
|
||||
.attr("fill", "none")
|
||||
.on("click", function(event, d) {
|
||||
const wasHighlighted = d3.select(this).classed("highlighted");
|
||||
d3.selectAll("path").classed("highlighted", false);
|
||||
d3.selectAll("path").classed("highlighted", false);
|
||||
if (!wasHighlighted) {
|
||||
const toHighlight = [];
|
||||
toHighlight.push(d.el);
|
||||
@ -688,6 +703,18 @@ function draw(pathway, elem) {
|
||||
}
|
||||
});
|
||||
|
||||
const linkText = linkGroup
|
||||
.append("text")
|
||||
.attr("class", "link-label")
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("dy", -6)
|
||||
.style("font-size", "4px")
|
||||
.style("pointer-events", "none")
|
||||
.style("display", "none")
|
||||
.text(d => d.name)
|
||||
.attr("x", d => (d.source.x + d.target.x) / 2)
|
||||
.attr("y", d => (d.source.y + d.target.y) / 2);
|
||||
|
||||
// add element to links array
|
||||
link.each(function (d) {
|
||||
d.el = this; // attach the DOM element to the data object
|
||||
|
||||
@ -177,6 +177,52 @@
|
||||
tabindex="0"
|
||||
class="dropdown-content menu bg-base-100 rounded-box z-50 w-60 p-2"
|
||||
>
|
||||
<li>
|
||||
<a id="compound-names-toggle-button" class="cursor-pointer">
|
||||
<svg
|
||||
id="compound-names-icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-eye"
|
||||
>
|
||||
<path
|
||||
d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
|
||||
/>
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
Compound Names
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="reaction-names-toggle-button" class="cursor-pointer">
|
||||
<svg
|
||||
id="reaction-names-icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-eye"
|
||||
>
|
||||
<path
|
||||
d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
|
||||
/>
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
Reaction Names
|
||||
</a>
|
||||
</li>
|
||||
{% if pathway.setting.model.app_domain %}
|
||||
<li>
|
||||
<a id="app-domain-toggle-button" class="cursor-pointer">
|
||||
@ -497,6 +543,10 @@
|
||||
{{ pathway.d3_json|json_script:"pathway" }}
|
||||
|
||||
<script>
|
||||
// Global switch for compound names view
|
||||
var compoundNamesViewEnabled = false;
|
||||
// Gloabl switch for reaction names view
|
||||
var reactionNamesViewEnabled = false;
|
||||
// Global switch for app domain view
|
||||
var appDomainViewEnabled = false;
|
||||
// Global switch for timeseries view
|
||||
@ -532,6 +582,67 @@
|
||||
descContent.innerHTML = newDesc;
|
||||
}
|
||||
|
||||
const compoundNamesBtn = document.getElementById("compound-names-toggle-button");
|
||||
if (compoundNamesBtn) {
|
||||
compoundNamesBtn.addEventListener("click", function () {
|
||||
compoundNamesViewEnabled = !compoundNamesViewEnabled;
|
||||
const icon = document.getElementById("compound-names-icon");
|
||||
|
||||
if (compoundNamesViewEnabled) {
|
||||
// Change to eye-off icon
|
||||
icon.innerHTML =
|
||||
'<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/>';
|
||||
|
||||
nodes.forEach((x) => {
|
||||
if (x.name) {
|
||||
d3.select(x.el)
|
||||
.append("text")
|
||||
.text(d => d.name)
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("y", -20)
|
||||
.style("font-size", "4px");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Change back to eye icon
|
||||
icon.innerHTML =
|
||||
'<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>';
|
||||
|
||||
nodes.forEach((x) => {
|
||||
d3.select(x.el)
|
||||
.select("text")
|
||||
.remove()
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const reactionNamesBtn = document.getElementById("reaction-names-toggle-button");
|
||||
if (reactionNamesBtn) {
|
||||
reactionNamesBtn.addEventListener("click", function () {
|
||||
reactionNamesViewEnabled = !reactionNamesViewEnabled;
|
||||
const icon = document.getElementById("reaction-names-icon");
|
||||
|
||||
if (reactionNamesViewEnabled) {
|
||||
// Change to eye-off icon
|
||||
icon.innerHTML =
|
||||
'<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/>';
|
||||
|
||||
d3.selectAll(".link-label")
|
||||
.style("display", null);
|
||||
|
||||
} else {
|
||||
// Change back to eye icon
|
||||
icon.innerHTML =
|
||||
'<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>';
|
||||
|
||||
d3.selectAll(".link-label")
|
||||
.style("display", "none");
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// App domain toggle
|
||||
const appDomainBtn = document.getElementById("app-domain-toggle-button");
|
||||
if (appDomainBtn) {
|
||||
|
||||
Reference in New Issue
Block a user