Current Dev State

templates/objects/pathway.html

@@ -0,0 +1,113 @@
+{% 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>
+
+<p></p>
+
+<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">
+                                <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>
+                        &nbsp;
+                    </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>
+</div>
+<script>
+
+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);
+});
+
+</script>
+{% endblock content %}