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:
@ -1,113 +1,182 @@
|
||||
{% extends "framework.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% load static %}
|
||||
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||||
<style>
|
||||
svg { width: 100%; height: 600px; 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; }
|
||||
.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>
|
||||
{% load static %}
|
||||
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||||
<style>
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
<p></p>
|
||||
.link {
|
||||
stroke: #999;
|
||||
stroke-opacity: 0.6;
|
||||
marker-end: url(#arrow);
|
||||
}
|
||||
|
||||
<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">
|
||||
.link_no_arrow {
|
||||
stroke: #999;
|
||||
stroke-opacity: 0.6;
|
||||
}
|
||||
|
||||
.node image {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.node circle {
|
||||
fill: lightblue;
|
||||
stroke: steelblue;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.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/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 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">
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" id="showCompoundNames">
|
||||
<span class="glyphicon glyphicon-eye-open"></span> Show Compound Names</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" onclick="goFullscreen('pwcontent')">
|
||||
<span class="glyphicon glyphicon-fullscreen"></span>Fullscreen
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a role="button" data-toggle="modal" onclick="goFullscreen('pwcontent')">
|
||||
<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 width="2000" height="2000">
|
||||
{% 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">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="#999"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<g id="zoomable"></g>
|
||||
</svg>
|
||||
<div id="tooltip" class="tooltip"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</nav>
|
||||
<div id="vizdiv">
|
||||
<svg width="2000" height="2000">
|
||||
{% 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">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="#999"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<g id="zoomable"></g>
|
||||
</svg>
|
||||
<div id="tooltip" class="tooltip"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<script>
|
||||
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>');
|
||||
}
|
||||
function transformReferences(text) {
|
||||
return text.replace(/\[\s*(http[^\]|]+)\s*\|\s*([^\]]+)\s*\]/g, '<a target="parent" href="$1">$2</a>');
|
||||
}
|
||||
|
||||
pathway = {{ pathway.d3_json | safe }};
|
||||
pathway = {{ pathway.d3_json | safe }};
|
||||
|
||||
$(function() {
|
||||
draw(pathway, 'vizdiv');
|
||||
// TODO fix somewhere else...
|
||||
var newDesc = transformReferences($('#DescriptionContent')[0].innerText);
|
||||
$('#DescriptionContent').html(newDesc);
|
||||
});
|
||||
$(function () {
|
||||
draw(pathway, 'vizdiv');
|
||||
// TODO fix somewhere else...
|
||||
var newDesc = transformReferences($('#DescriptionContent')[0].innerText);
|
||||
$('#DescriptionContent').html(newDesc);
|
||||
});
|
||||
|
||||
</script>
|
||||
</script>
|
||||
{% endblock content %}
|
||||
|
||||
Reference in New Issue
Block a user