forked from enviPath/enviPy
374 lines
17 KiB
HTML
374 lines
17 KiB
HTML
{% extends "framework.html" %}
|
|
{% load static %}
|
|
{% block content %}
|
|
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
<style>
|
|
#vizdiv {
|
|
width: 100%;
|
|
height: 600px;
|
|
background: white;
|
|
}
|
|
|
|
#pwsvg {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: red;
|
|
}
|
|
|
|
.link {
|
|
stroke: #999;
|
|
stroke-opacity: 0.6;
|
|
//marker-end: url(#arrow);
|
|
}
|
|
|
|
.link_no_arrow {
|
|
stroke: #999;
|
|
stroke-opacity: 0.6;
|
|
}
|
|
|
|
.node image {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.node circle {
|
|
fill: lightblue;
|
|
stroke: steelblue;
|
|
stroke-width: 1.5px;
|
|
}
|
|
|
|
.inside_app_domain {
|
|
fill: green;
|
|
stroke: green;
|
|
stroke-width: 1.5px;
|
|
}
|
|
|
|
.outside_app_domain {
|
|
fill: red;
|
|
stroke: red;
|
|
stroke-width: 1.5px;
|
|
}
|
|
|
|
.passes_app_domain {
|
|
stroke: green;
|
|
stroke-width: 1.5px;
|
|
stroke-opacity: 0.6;
|
|
}
|
|
|
|
.fails_app_domain {
|
|
stroke: red;
|
|
stroke-width: 1.5px;
|
|
stroke-opacity: 0.6;
|
|
}
|
|
|
|
|
|
.highlighted {
|
|
stroke: red;
|
|
stroke-width: 3px;
|
|
}
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
background: lightgrey;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
visibility: hidden;
|
|
opacity: 1
|
|
}
|
|
</style>
|
|
<script src="{% static 'js/pw.js' %}"></script>
|
|
|
|
{% block action_modals %}
|
|
{% include "modals/objects/add_pathway_node_modal.html" %}
|
|
{% include "modals/objects/add_pathway_edge_modal.html" %}
|
|
{% include "modals/objects/download_pathway_modal.html" %}
|
|
{% include "modals/objects/edit_pathway_modal.html" %}
|
|
{% include "modals/objects/delete_pathway_node_modal.html" %}
|
|
{% include "modals/objects/delete_pathway_edge_modal.html" %}
|
|
{% include "modals/objects/delete_pathway_modal.html" %}
|
|
{% endblock action_modals %}
|
|
|
|
<p></p>
|
|
<div id="pwcontent">
|
|
<div class="panel-group" id="pwAccordion">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
|
|
{{ pathway.name }}
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
|
<h4 class="panel-title">
|
|
<a id="vizLink" data-toggle="collapse" data-parent="#pwAccordion" href="#viz">
|
|
Graphical Representation
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="viz" class="panel-collapse collapse in">
|
|
<nav role="navigation" class="navbar navbar-default" style="margin: 0;">
|
|
<div class="navbar-header">
|
|
</div>
|
|
<div id="editbarCollapse" class="collapse navbar-collapse ">
|
|
<ul class="nav navbar-nav">
|
|
<li class="dropdown requiresWritePerm">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
|
aria-haspopup="true" aria-expanded="false">
|
|
<span class="glyphicon glyphicon-edit"></span>
|
|
Edit
|
|
<span class="caret"></span></a>
|
|
<ul id="editingList" class="dropdown-menu">
|
|
{% block actions %}
|
|
{% include "actions/objects/pathway.html" %}
|
|
{% endblock %}
|
|
</ul>
|
|
</li>
|
|
{% if pathway.setting.model.app_domain %}
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
|
aria-haspopup="true" aria-expanded="false">
|
|
<span class="glyphicon glyphicon-eye-open"></span>
|
|
View
|
|
<span class="caret"></span></a>
|
|
<ul id="editingList" class="dropdown-menu">
|
|
<li>
|
|
<a class="button" id="app-domain-toggle-button">
|
|
<i id="app-domain-toggle-button" class="glyphicon glyphicon-eye-open"></i> App Domain View</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li>
|
|
<a role="button" data-toggle="modal" onclick="goFullscreen('vizdiv')">
|
|
<span class="glyphicon glyphicon-fullscreen"></span>
|
|
Fullscreen
|
|
</a>
|
|
</li>
|
|
<li>
|
|
{% if pathway.completed %}
|
|
<button type="button" class="btn btn-default navbar-btn" data-toggle="tooltip"
|
|
id="status" data-original-title="" title=""
|
|
data-content="Pathway prediction complete.">
|
|
<span class="glyphicon glyphicon-ok"></span>
|
|
</button>
|
|
{% elif pathway.failed %}
|
|
<button type="button" class="btn btn-default navbar-btn" data-toggle="tooltip"
|
|
id="status" data-original-title="" title=""
|
|
data-content="Pathway prediction failed.">
|
|
<span class="glyphicon glyphicon-remove"></span>
|
|
</button>
|
|
{% else %}
|
|
<button type="button" class="btn btn-default navbar-btn" data-toggle="tooltip"
|
|
id="status" data-original-title="" title=""
|
|
data-content="Pathway prediction running.">
|
|
<img height="20" src="{% static '/images/wait.gif' %}">
|
|
</button>
|
|
{% endif %}
|
|
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</nav>
|
|
<div id="vizdiv" >
|
|
<svg id="pwsvg">
|
|
{% if debug %}
|
|
<rect width="100%" height="100%" fill="aliceblue"/>
|
|
{% endif %}
|
|
<defs>
|
|
<marker id="arrow" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
|
|
orient="auto-start-reverse" markerUnits="userSpaceOnUse">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#999"/>
|
|
</marker>
|
|
<marker id="arrow_passes_app_domain" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
|
|
orient="auto-start-reverse" markerUnits="userSpaceOnUse">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="green"/>
|
|
</marker>
|
|
<marker id="arrow_fails_app_domain" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
|
|
orient="auto-start-reverse" markerUnits="userSpaceOnUse">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="red"/>
|
|
</marker>
|
|
</defs>
|
|
<g id="zoomable"></g>
|
|
</svg>
|
|
<div id="tooltip" class="tooltip"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Description -->
|
|
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
|
<h4 class="panel-title">
|
|
<a id="DescriptionLink" data-toggle="collapse" data-parent="#pathwayAccordion"
|
|
href="#Description">Description</a></h4>
|
|
</div>
|
|
<div id="Description" class="panel-collapse collapse in">
|
|
<div class="panel-body list-group-item" id="DescriptionContent">
|
|
{{ pathway.description | safe }}
|
|
</div>
|
|
</div>
|
|
|
|
{% if pathway.setting %}
|
|
<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
|
|
<h4 class="panel-title">
|
|
<a id="pathwaySettingLink" data-toggle="collapse" data-parent="#pathwayAccordion"
|
|
href="#pathwaySetting">Setting</a></h4>
|
|
</div>
|
|
<div id="pathwaySetting" class="panel-collapse collapse">
|
|
<div class="panel-body list-group-item" id="pathwaySettingContent">
|
|
<table class="table table-bordered table-hover">
|
|
<tr style="background-color: rgba(0, 0, 0, 0.08);">
|
|
<th scope="col" width="20%">Parameter</th>
|
|
<th scope="col" width="80%">Value</th>
|
|
</tr>
|
|
<tbody>
|
|
{% if pathway.setting.model %}
|
|
<tr>
|
|
<td width="20%">Model</td>
|
|
<td width="80%">
|
|
<table width="100%" class="table table-bordered table-hover">
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="2">
|
|
<li class="list-group-item">
|
|
<a href="{{ pathway.setting.model.url }}">
|
|
{{ pathway.setting.model.name }}
|
|
</a>
|
|
</li>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th width="20%">Model Parameter</th>
|
|
<th width="80%">Parameter Value</th>
|
|
</tr>
|
|
<tr>
|
|
<td width="20%">
|
|
Threshold
|
|
</td>
|
|
<td width="80%">
|
|
{{ pathway.setting.model_threshold }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% if pathway.setting.rule_packages.all %}
|
|
<tr>
|
|
<td width="20%">Rule Packages</td>
|
|
<td width="80%">
|
|
<table width="100%" class="table table-bordered table-hover">
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="2">
|
|
{% for p in pathway.setting.rule_packages.all %}
|
|
<li class="list-group-item">
|
|
<a href="{{ p.url }}">
|
|
{{ p.name }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
<tr>
|
|
<td>
|
|
<p>Max Nodes</p>
|
|
</td>
|
|
<td>
|
|
<p>{{ pathway.setting.max_nodes }}</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p>Max Depth</p>
|
|
</td>
|
|
<td>
|
|
<p>{{ pathway.setting.max_depth }}</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// Globla switch for app domain view
|
|
var appDomainViewEnabled = false;
|
|
|
|
function goFullscreen(id) {
|
|
var element = document.getElementById(id);
|
|
if (element.mozRequestFullScreen) {
|
|
element.mozRequestFullScreen();
|
|
} else if (element.webkitRequestFullScreen) {
|
|
element.webkitRequestFullScreen();
|
|
}
|
|
}
|
|
|
|
function transformReferences(text) {
|
|
return text.replace(/\[\s*(http[^\]|]+)\s*\|\s*([^\]]+)\s*\]/g, '<a target="parent" href="$1">$2</a>');
|
|
}
|
|
|
|
pathway = {{ pathway.d3_json | safe }};
|
|
|
|
$(function () {
|
|
draw(pathway, 'vizdiv');
|
|
// TODO fix somewhere else...
|
|
var newDesc = transformReferences($('#DescriptionContent')[0].innerText);
|
|
$('#DescriptionContent').html(newDesc);
|
|
|
|
|
|
$('#app-domain-toggle-button').on('click', function () {
|
|
// glyphicon glyphicon-eye-close
|
|
// glyphicon glyphicon-eye-open
|
|
appDomainViewEnabled = !appDomainViewEnabled;
|
|
|
|
if (appDomainViewEnabled) {
|
|
$('#app-domain-toggle-button > i').removeClass('glyphicon-eye-open');
|
|
$('#app-domain-toggle-button > i').addClass('glyphicon-eye-close');
|
|
nodes.forEach((x) => {
|
|
if(x.app_domain) {
|
|
if (x.app_domain.inside_app_domain) {
|
|
d3.select(x.el).select("circle").classed("inside_app_domain", true);
|
|
} else {
|
|
d3.select(x.el).select("circle").classed("outside_app_domain", true);
|
|
}
|
|
}
|
|
});
|
|
links.forEach((x) => {
|
|
if(x.app_domain) {
|
|
if (x.app_domain.passes_app_domain) {
|
|
d3.select(x.el).attr("marker-end", d => d.target.pseudo ? "" : "url(#arrow_passes_app_domain)");
|
|
d3.select(x.el).classed("passes_app_domain", true);
|
|
} else {
|
|
d3.select(x.el).attr("marker-end", d => d.target.pseudo ? "" : "url(#arrow_fails_app_domain)");
|
|
d3.select(x.el).classed("fails_app_domain", true);
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
$('#app-domain-toggle-button > i').removeClass('glyphicon-eye-close');
|
|
$('#app-domain-toggle-button > i').addClass('glyphicon-eye-open');
|
|
nodes.forEach((x) => {
|
|
d3.select(x.el).select("circle").classed("inside_app_domain", false);
|
|
d3.select(x.el).select("circle").classed("outside_app_domain", false);
|
|
});
|
|
links.forEach((x) => {
|
|
d3.select(x.el).attr("marker-end", d => d.target.pseudo ? "" : "url(#arrow)");
|
|
d3.select(x.el).classed("passes_app_domain", false);
|
|
d3.select(x.el).classed("fails_app_domain", false);
|
|
});
|
|
}
|
|
})
|
|
|
|
});
|
|
|
|
</script>
|
|
{% endblock content %}
|