Skip to content

Commit

Permalink
Merge pull request #56 from njzjz/dev
Browse files Browse the repository at this point in the history 
just click!
  • Loading branch information
@njzjz
njzjz authored Jan 23, 2019
2 parents 2e52558 + 049bc19 commit 47bdc69
Show file tree
Hide file tree
Showing 6 changed files with 125 additions and 20 deletions.
27 changes: 19 additions & 8 deletions reacnetgenerator/_reachtml.py
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
# -*- coding: utf-8 -*-
# Generate a web page to show the analysis report

import json
import re
from collections import defaultdict
from collections.abc import Mapping
from multiprocessing import Pool

import htmlmin
import openbabel
import scour.scour
from jinja2 import Template
from ._static import _html, _static_js, _static_css, _static_img

from ._static import _html, _static_css, _static_img, _static_js


class _HTMLResult(object):
Expand All @@ -18,11 +22,10 @@ def __init__(self, ReacNetGenerator):
self._imagefile = ReacNetGenerator.imagefilename
self._nproc = ReacNetGenerator.nproc
self._templatedict = {
"speciesline": 10,
"speciesshownum": 30,
"reactionsline": 10,
"reactionsshownum": 20,
}
self._linkreac = defaultdict(list)

def _report(self):
self._readdata()
Expand All @@ -37,7 +40,10 @@ def _readreaction(self):
for line in f:
sx = line.split()
s = sx[1].split("->")
reaction.append((self._re(s[0]), self._re(s[1]), int(sx[0])))
left, right, num = self._re(s[0]), self._re(s[1]), int(sx[0])
reaction.append((left, right, num))
if len(self._linkreac[left]) < 5:
self._linkreac[left].append(right)
return reaction

def _convertsvg(self, smiles):
Expand Down Expand Up @@ -71,20 +77,25 @@ def _generateresult(self):
self._generatesvg()
self._templatedict["species"] = self._specs
self._templatedict["reactions"] = self._reaction
self._templatedict["css"] = ''.join([
self._templatedict["css"] = [
_static_css["bootstrap.min.css"],
_static_css["creative.min.css"],
_static_css["magnific-popup.min.css"],
_html['bk-css']])
_html['bk-css']
]
self._templatedict["bkimage"] = _static_img["fire.jpg"]
self._templatedict["javascript"] = "".join([
self._templatedict["javascript"] = [
_static_js["jquery.min.js"],
_static_js["bootstrap.bundle.min.js"],
_static_js["jquery.easing.min.js"],
_static_js["scrollreveal.min.js"],
_static_js["jquery.magnific-popup.min.js"],
_static_js["creative.min.js"],
])
_static_js["d3.min.js"],
_static_js["jsnetworkx.js"],
_static_js["reacnetgen.js"],
]
self._templatedict["linkreac"] = json.dumps(self._linkreac)
template = Template(_html["template"])
webpage = template.render(**self._templatedict)
with open(self._resultfile, 'w', encoding="utf-8") as f:
Expand Down
3 changes: 3 additions & 0 deletions reacnetgenerator/_static.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ def imgtobase64(path):
"scrollreveal.min.js": getresource('static/js/scrollreveal.min.js'),
"jquery.magnific-popup.min.js": getresource('static/js/jquery.magnific-popup.min.js'),
"creative.min.js": getresource('static/js/creative.min.js'),
"d3.min.js": getresource('static/js/d3.min.js'),
"jsnetworkx.js": getresource('static/js/jsnetworkx.min.js'),
"reacnetgen.js": getresource('static/js/reacnetgen.js'),
}
_static_css = {
"bootstrap.min.css": getresource('static/css/bootstrap.min.css'),
Expand Down
46 changes: 34 additions & 12 deletions reacnetgenerator/static/html/template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,17 @@
</head>

<body id="page-top">
<style>{{ css }}</style>
<style>
{% for c in css %}
{{ c }}
{% endfor %}
</style>

<svg class="d-none">
<defs>
<path id="narrow" style="text-align:start;line-height:100%;-inkscape-font-specification:Arial Unicode MS" d="M24.35 7.613c-3.035 1.11-5.407 2.908-7.113 5.395h-1.299c.585-1.743 1.567-3.39 2.945-4.938H.649V6.278h18.234c-1.378-1.548-2.36-3.2-2.945-4.956h1.299c1.706 2.487 4.078 4.285 7.114 5.395v.896z"
font-size="39.506" font-weight="400" font-family="Arial Unicode MS" />
<circle id="circle" cx="50" cy="50" r="45" stroke="#00f" stroke-width="2" fill="#fff" />
</defs>
</svg>

Expand Down Expand Up @@ -80,10 +85,20 @@ <h2>Reaction Network</h2>
<defs>
{% for spec in speciessvg %}
<svg id="{{ spec.name }}">{{ spec.svg }}</svg>
<svg id="{{ spec.name }}_border">
<use xlink:href="#circle"></use>
<use xlink:href="#{{ spec.name }}"></use>
</svg>
{% endfor %}
</defs>
</svg>

<div id="canvassec" class='bg-white mx-auto'>
<div class="container">
<div class="w-100 h-100" id="canvas"></div>
</div>
</div>

<section id="species" class='bg-white mx-auto'>
<div class="container">
<div class="row">
Expand All @@ -92,10 +107,10 @@ <h2 class='text-center'>Species</h2>
<div class="container-fluid p-0">
<div class="row no-gutters">
{% for spec in species %}
<div class="mx-auto">
<div><svg class='spec'>
<div class="mx-auto {% if loop.index> speciesshownum %} specnone{% endif %}">
<div><a class="popup-modal" href="#canvassec" onclick="addnode('{{ spec }}');"><svg class='spec'>
<use xlink:href="#{{ spec }}"></use>
</svg></div>
</svg></a></div>
<div>{{ loop.index }}</div>
</div>
{% endfor %}
Expand All @@ -104,7 +119,7 @@ <h2 class='text-center'>Species</h2>
</div>
{% if species|length > speciesshownum %}
<div class="mx-auto text-center mt-5">
<a class="btn btn-primary btn-xl js-scroll-trigger" href="javascript:$('.specnone').show();$('#showmorespec').hide();"
<a class="btn btn-primary btn-xl js-scroll-trigger" href="javascript:$('.specnone').removeClass('specnone');$('#showmorespec').hide();"
id="showmorespec">Show all</a>
</div>
{% endif %}
Expand All @@ -120,26 +135,26 @@ <h4 class='text-center'>(sorted by frequency)</h4>
<div class="container-fluid p-0">
<div class="row no-gutters">
{% for reac in reactions %}
<div class="row mx-auto">
<div class="row mx-auto{% if loop.index> reactionsshownum %} reacnone{% endif %}">
<div class="reacid">{{ loop.index }}</div>
<div><svg class='spec'>
<div><a class="popup-modal" href="#canvassec" onclick="addnode('{{ reac[0] }}');"></a><svg class='spec'>
<use xlink:href="#{{ reac[0] }}"></use>
</svg></div>
</svg></a></div>
<div>
<div class="reacnum">{{ reac[2] }}</div>
<div><svg width="25" height="14.33">
<use xlink:href="#narrow" /></svg></div>
</div>
<div><svg class='spec'>
<div><a class="popup-modal" href="#canvassec" onclick="addnode('{{ reac[1] }}');"></a><svg class='spec'>
<use xlink:href="#{{ reac[1] }}"></use>
</svg></div>
</svg></a></div>
</div>
{% endfor %}
</div>
</div>
{% if reactions|length > reactionsshownum %}
<div class="mx-auto text-center mt-5">
<a class="btn btn-primary btn-xl js-scroll-trigger" href="javascript:$('.reacnone').show();$('#showmorereac').hide();"
<a class="btn btn-primary btn-xl js-scroll-trigger" href="javascript:$('.reacnone').removeClass('reacnone');$('#showmorereac').hide();"
id="showmorereac">Show all</a>
</div>
{% endif %}
Expand All @@ -165,7 +180,14 @@ <h4 class='text-center'>(sorted by frequency)</h4>
</div>
</div>
</section>
<script>{{ javascript }}</script>


<script>
linkreac={{ linkreac }}
{% for js in javascript %}
{{ js }}
{% endfor %}
</script>
</body>

</html>
5 changes: 5 additions & 0 deletions reacnetgenerator/static/js/d3.min.js
View file

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions reacnetgenerator/static/js/jsnetworkx.min.js
View file

Large diffs are not rendered by default.

56 changes: 56 additions & 0 deletions reacnetgenerator/static/js/reacnetgen.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
var canvas = document.getElementById('canvas');

var G = new jsnx.Graph();
var timer=null;

jsnx.draw(G, {
element: canvas,
layoutAttr: {
charge: -1000,
linkDistance: 300,
gravity: 0.05,
},
panZoom: {
enabled: false
},
nodeShape: "use",
nodeAttr: {
title: function (d) { return d.label; },
"xlink:href":function (d) {return "#"+d.node+"_border"; },
onclick: function (d) {
return "clearTimeout(timer);timer = setTimeout(function(){addnode('"+d.node+"')}, 300);";
},
ondblclick: function (d) {
return "clearTimeout(timer);G.removeNode('"+d.node+"');";
},
width: 100,
height: 100,
x: -50,
y: -50,
},
nodeStyle: {
border: "1px solid #ddd"
},
edgeStyle: {
fill: '#999'
},
edgeAttr: {
ondblclick: function (d) {
return "G.removeEdge('"+d.edge[0]+"','"+d.edge[1]+"');";
},
}
}, true);
$("#canvassec").addClass("mfp-hide");

$('.popup-modal').magnificPopup({
type: 'inline',
preloader: false,
});

function addnode(spec){
G.addNode(spec);
for (var i in linkreac[spec]){
G.addNode(linkreac[spec][i]);
G.addEdge(linkreac[spec][i],spec);
}
}

2 comments on commit 47bdc69

@njzjz
Copy link
Member Author

@njzjz njzjz commented on 47bdc69 Jan 27, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CodeFactor found an issue: 'timer' is assigned a value but never used.

It's currently on:
reacnetgenerator\static\js\reacnetgen.js:6
Commit 47bdc69

@njzjz
Copy link
Member Author

@njzjz njzjz commented on 47bdc69 Jan 27, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CodeFactor found an issue: 'addnode' is defined but never used.

It's currently on:
reacnetgenerator\static\js\reacnetgen.js:55
Commit 47bdc69

Please sign in to comment.