From 38e901a51e518d179e2197e361a4f7f900d5639c Mon Sep 17 00:00:00 2001 From: Tim Lorsbach Date: Thu, 7 May 2026 09:07:36 +0200 Subject: [PATCH] PW interactions --- static/js/pw.js | 37 ++++++++++++++++++- templates/actions/objects/pathway.html | 20 +++++++--- .../new_prediction_setting_modal.html | 4 +- .../objects/delete_pathway_edge_modal.html | 19 ++++++++++ .../objects/delete_pathway_node_modal.html | 16 ++++++++ templates/objects/pathway.html | 6 +-- 6 files changed, 91 insertions(+), 11 deletions(-) diff --git a/static/js/pw.js b/static/js/pw.js index 26f4d870..4f581fc2 100644 --- a/static/js/pw.js +++ b/static/js/pw.js @@ -605,7 +605,36 @@ function draw(pathway, elem) { // 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 => d.target.pseudo ? '' : d.multi_step ? 'url(#doublearrow)' : 'url(#arrow)') + .on("click", function(event, d) { + const wasHighlighted = d3.select(this).classed("highlighted"); + d3.selectAll("line").classed("highlighted", false); + + if (!wasHighlighted) { + const toHighlight = []; + toHighlight.push(d.el); + + if (d.source.pseudo || d.target.pseudo) { + if (d.target.pseudo) { + d3.selectAll("line").each(e => { + if (e !== undefined && e.source.id === d.target.id) { + toHighlight.push(e.el); + } + }); + } else { + d3.selectAll("line").each(e => { + if (e !== undefined && (e.target.id === d.source.id || e.source.id === d.source.id)) { + toHighlight.push(e.el); + } + }); + } + } + + for (const e of toHighlight) { + d3.select(e).classed("highlighted", true); + } + } + }) // add element to links array link.each(function (d) { @@ -624,7 +653,13 @@ function draw(pathway, elem) { .on("drag", dragged) .on("end", dragended)) .on("click", function (event, d) { - d3.select(this).select("circle").classed("highlighted", !d3.select(this).select("circle").classed("highlighted")); + const wasHighlighted = d3.select(this).select("circle").classed("highlighted"); + + d3.selectAll('circle.highlighted').classed('highlighted', false); + + if (!wasHighlighted) { + d3.select(this).select("circle").classed("highlighted", !d3.select(this).select("circle").classed("highlighted")); + } }) // Kreise für die Knoten hinzufügen diff --git a/templates/actions/objects/pathway.html b/templates/actions/objects/pathway.html index 85e4164b..91c861d6 100644 --- a/templates/actions/objects/pathway.html +++ b/templates/actions/objects/pathway.html @@ -22,7 +22,7 @@ {% for tpl in action_button_templates %} {% include tpl %} {% endfor %} - + {% endif %}
    • - +
  • Set Aliases
    • - +
  • Delete Compound @@ -111,7 +116,12 @@
  • Delete Reaction diff --git a/templates/modals/collections/new_prediction_setting_modal.html b/templates/modals/collections/new_prediction_setting_modal.html index 9d85f976..efe8f243 100644 --- a/templates/modals/collections/new_prediction_setting_modal.html +++ b/templates/modals/collections/new_prediction_setting_modal.html @@ -203,11 +203,11 @@ id="model-based-prediction-setting-threshold" name="model-based-prediction-setting-threshold" class="input input-bordered w-full" - placeholder="0.25" + value="0.25" type="number" min="0" max="1" - step="0.05" + step="any" /> diff --git a/templates/modals/objects/delete_pathway_edge_modal.html b/templates/modals/objects/delete_pathway_edge_modal.html index 82ad8f4f..a56e3137 100644 --- a/templates/modals/objects/delete_pathway_edge_modal.html +++ b/templates/modals/objects/delete_pathway_edge_modal.html @@ -4,6 +4,25 @@ id="delete_pathway_edge_modal" class="modal" x-data="modalForm({ state: { selectedEdge: '', imageUrl: '' } })" + @modal-opened.window=" + const links = d3.selectAll('line.highlighted'); + console.log(links); + if (!links.empty()) { + const el = links.node(); + const selectElement = document.getElementById('delete_pathway_edge_edges'); + console.log(el); + console.log(el.__data__); + for (let option of selectElement.options) { + if (option.value === el.__data__.url) { + option.selected = true; + break; + } + } + + selectElement.dispatchEvent(new Event('change')); + + } + " @close="reset()" >
    diff --git a/templates/modals/objects/delete_pathway_node_modal.html b/templates/modals/objects/delete_pathway_node_modal.html index 41767e8f..b2075f3e 100644 --- a/templates/modals/objects/delete_pathway_node_modal.html +++ b/templates/modals/objects/delete_pathway_node_modal.html @@ -4,6 +4,22 @@ id="delete_pathway_node_modal" class="modal" x-data="modalForm({ state: { selectedNode: '', imageUrl: '' } })" + @modal-opened.window=" + const el = d3.select('circle.highlighted').node(); + + if (el !== null) { + const selectElement = document.getElementById('delete_pathway_node_nodes'); + + for (let option of selectElement.options) { + if (option.value === el.__data__.url) { + option.selected = true; + break; + } + } + + selectElement.dispatchEvent(new Event('change')); + } + " @close="reset()" >
    diff --git a/templates/objects/pathway.html b/templates/objects/pathway.html index 3ca6045e..e90eee2f 100644 --- a/templates/objects/pathway.html +++ b/templates/objects/pathway.html @@ -106,12 +106,12 @@
    -
    +
    Graphical Representation
    -
    +
    @@ -140,7 +140,7 @@
      {% include "actions/objects/pathway.html" %}