Commit 8cfe978c authored by Carlos GO's avatar Carlos GO
Browse files

scripts

parent d2ecff9e
import os
import shutil
import sys
import logging
import uuid
from collections import defaultdict
from flask import Flask
from flask import render_template
from flask import request
from flask import flash
from flask import redirect
from flask import url_for
from flask import session
from werkzeug.utils import secure_filename
import numpy as np
# logging.basicConfig(filename='main.log',level=logging.DEBUG)
app = Flask(__name__)
@app.route("/")
def home():
motif_ids = os.listdir("static/motifs")
motif_dict = defaultdict(list)
for mot in motif_ids:
size = len(mot.split("-"))
motif_dict[size].append(mot)
sorted_dict = {}
for size in sorted(motif_dict.keys()):
sorted_dict[size] = motif_dict[size]
return render_template("home.html", motif_dict=sorted_dict)
@app.route("/hmp")
def hmp():
return render_template("hmp.html")
@app.route('/motif_json/<motif_id>')
def motif_json(motif_id):
print(motif_id)
motif_path = os.path.join("static", "motifs_json", motif_id)
print(motif_path)
instance_paths = [os.path.join("motifs_json", motif_id, inst) for inst in os.listdir(motif_path)]
return render_template("graph.html", instance_paths=instance_paths)
@app.route('/motif_page/<motif_id>')
def motif_page(motif_id):
print(motif_id)
motif_path = os.path.join("static", "motifs", motif_id)
instance_paths = [os.path.join("motifs", motif_id, inst) for inst in os.listdir(motif_path)]
return render_template("motif_page.html", instance_paths=instance_paths)
@app.route('/graphlets')
def graphlets():
graphlet_path = os.path.join("static", "graphlets")
instance_paths = [os.path.join("graphlets", inst) for inst in os.listdir(graphlet_path)]
print(instance_paths)
return render_template("graphlets.html", instance_paths=instance_paths)
if __name__ == "__main__":
app.run(debug=True)
body{
width: 43%;
padding 100px;
margin:auto;
font-family: monospace;
}
p{
color: #424344;
line-height: 1.2;
text-align: left;
}
#svgMain {margin-left:auto; margin-right:auto; display:block; padding-top:50px;padding-bottom:50px;width:50%;}
#frame{
/*border:10px groove gold;*/
/*border-image:url('../frame.png');*/
}
#border {
border-image-source: url(../frame.png);
border-image-slice: 70;
border-image-repeat: stretch;
height : 300px;
border-width: 70px;
border-style: solid;
}
#query {
text-align: center;
}
#lig{
width: 10em;
}
#about{
text-align: center;
}
.img{
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
/*width: 20px;*/
}
input{
margin:20px auto;
}
#query{
border: 0px solid #404040;
background-color:lightgrey;
margin: auto;
text-align: left;
width: 100%;
}
#query_submit{
background-color: red;
border: none;
color: white;
padding: 20px;
cursor: pointer;
font-size: 16px;
margin: 30px 30px 30px;
}
#inp{
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
table {
border-collapse: collapse;
width: 100%;
}
ul{
padding-left: 0pt;
}
td {
text-align: left;
padding: 8px;
}
th{
text-align: center;
padding: 8px;
}
.codeblock {
word-wrap: break-word
}
pre code {
background-color: #eee;
border: 1px solid #999;
display: block;
padding: 20px;
white-space: pre-line;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Force Layout with labels on edges</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var w = 1000;
var h = 600;
var linkDistance=200;
var colors = d3.scale.category10();
var dataset = {
nodes: [
{name: "Adam"},
{name: "Bob"},
{name: "Carrie"},
{name: "Donovan"},
{name: "Edward"},
{name: "Felicity"},
{name: "George"},
{name: "Hannah"},
{name: "Iris"},
{name: "Jerry"}
],
edges: [
{source: 0, target: 1},
{source: 0, target: 2},
{source: 0, target: 3},
{source: 0, target: 4},
{source: 1, target: 5},
{source: 2, target: 5},
{source: 2, target: 5},
{source: 3, target: 4},
{source: 5, target: 8},
{source: 5, target: 9},
{source: 6, target: 7},
{source: 7, target: 8},
{source: 8, target: 9}
]
};
var svg = d3.select("body").append("svg").attr({"width":w,"height":h});
var force = d3.layout.force()
.nodes(dataset.nodes)
.links(dataset.edges)
.size([w,h])
.linkDistance([linkDistance])
.charge([-500])
.theta(0.1)
.gravity(0.05)
.start();
var edges = svg.selectAll("line")
.data(dataset.edges)
.enter()
.append("line")
.attr("id",function(d,i) {return 'edge'+i})
.attr('marker-end','url(#arrowhead)')
.style("stroke","#ccc")
.style("pointer-events", "none");
var nodes = svg.selectAll("circle")
.data(dataset.nodes)
.enter()
.append("circle")
.attr({"r":15})
.style("fill",function(d,i){return colors(i);})
.call(force.drag)
var nodelabels = svg.selectAll(".nodelabel")
.data(dataset.nodes)
.enter()
.append("text")
.attr({"x":function(d){return d.x;},
"y":function(d){return d.y;},
"class":"nodelabel",
"stroke":"black"})
.text(function(d){return d.name;});
var edgepaths = svg.selectAll(".edgepath")
.data(dataset.edges)
.enter()
.append('path')
.attr({'d': function(d) {return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y},
'class':'edgepath',
'fill-opacity':0,
'stroke-opacity':0,
'fill':'blue',
'stroke':'red',
'id':function(d,i) {return 'edgepath'+i}})
.style("pointer-events", "none");
var edgelabels = svg.selectAll(".edgelabel")
.data(dataset.edges)
.enter()
.append('text')
.style("pointer-events", "none")
.attr({'class':'edgelabel',
'id':function(d,i){return 'edgelabel'+i},
'dx':80,
'dy':0,
'font-size':10,
'fill':'#aaa'});
edgelabels.append('textPath')
.attr('xlink:href',function(d,i) {return '#edgepath'+i})
.style("pointer-events", "none")
.text(function(d,i){return 'label '+i});
svg.append('defs').append('marker')
.attr({'id':'arrowhead',
'viewBox':'-0 -5 10 10',
'refX':25,
'refY':0,
//'markerUnits':'strokeWidth',
'orient':'auto',
'markerWidth':10,
'markerHeight':10,
'xoverflow':'visible'})
.append('svg:path')
.attr('d', 'M 0,-5 L 10 ,0 L 0,5')
.attr('fill', '#ccc')
.attr('stroke','#ccc');
force.on("tick", function(){
edges.attr({"x1": function(d){return d.source.x;},
"y1": function(d){return d.source.y;},
"x2": function(d){return d.target.x;},
"y2": function(d){return d.target.y;}
});
nodes.attr({"cx":function(d){return d.x;},
"cy":function(d){return d.y;}
});
nodelabels.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
edgepaths.attr('d', function(d) { var path='M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y;
//console.log(d)
return path});
edgelabels.attr('transform',function(d,i){
if (d.target.x<d.source.x){
bbox = this.getBBox();
rx = bbox.x+bbox.width/2;
ry = bbox.y+bbox.height/2;
return 'rotate(180 '+rx+' '+ry+')';
}
else {
return 'rotate(0)';
}
});
});
</script>
</body>
</html>
drawGraph(path){
var colors = d3.scaleOrdinal(d3.schemeCategory10);
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
node,
link;
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function (d) {return d.id;}).distance(100).strength(1))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
d3.json(path, function (error, graph) {
if (error) throw error;
update(graph.links, graph.nodes);
})
function update(links, nodes) {
link = svg.selectAll(".link")
.data(links)
.enter()
.append("line")
.attr("class", "link")
<!--.attr('marker-end','url(#arrowhead)')-->
link.append("title")
.text(function (d) {return d.type;});
edgepaths = svg.selectAll(".edgepath")
.data(links)
.enter()
.append('path')
.attrs({
'class': 'edgepath',
'fill-opacity': 0,
'stroke-opacity': 0,
'id': function (d, i) {return 'edgepath' + i}
})
.style("pointer-events", "none");
edgelabels = svg.selectAll(".edgelabel")
.data(links)
.enter()
.append('text')
.style("pointer-events", "none")
.attrs({
'class': 'edgelabel',
'id': function (d, i) {return 'edgelabel' + i},
'font-size': 10,
'fill': '#aaa'
});
edgelabels.append('textPath')
.attr('xlink:href', function (d, i) {return '#edgepath' + i})
.style("text-anchor", "middle")
.style("pointer-events", "none")
.attr("startOffset", "50%")
.text(function (d) {return d.type});
node = svg.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
//.on("end", dragended)
);
node.append("circle")
.attr("r", 5)
.style("fill", function (d, i) {return colors(i);})
node.append("title")
.text(function (d) {return d.id;});
node.append("text")
.attr("dy", -3)
.text(function (d) {return d.id;});
simulation
.nodes(nodes)
.on("tick", ticked);
simulation.force("link")
.links(links);
}
function ticked() {
link
.attr("x1", function (d) {return d.source.x;})
.attr("y1", function (d) {return d.source.y;})
.attr("x2", function (d) {return d.target.x;})
.attr("y2", function (d) {return d.target.y;});
node
.attr("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";});
edgepaths.attr('d', function (d) {
return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y;
});
edgelabels.attr('transform', function (d) {
if (d.target.x < d.source.x) {
var bbox = this.getBBox();
rx = bbox.x + bbox.width / 2;
ry = bbox.y + bbox.height / 2;
return 'rotate(180 ' + rx + ' ' + ry + ')';
}
else {
return 'rotate(0)';
}
});
}
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart()
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
}
{% block head %}
<head>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/style.css')}}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
{% endblock %}
<a href="/">
<img src="{{url_for('static', filename='vernal2.png')}}" style="width:60%" id="border">
</a>
<p>Welcome to the VERNAL motif gallery.</p>
{%block body %}
{% endblock %}
{% block results %}
{% endblock %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
<script src="https://d3js.org/d3-selection-multi.v1.js"></script>
<style type="text/css">
.node {}
.link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
</style>
</head>
<body>
</body>
<script type="text/javascript">
{% for graph_path in instance_paths %}
drawGraph( "{{ url_for('static', filename=graph_path) }}" );
{% endfor %}
function drawGraph(graphPath){
var colors = d3.scaleOrdinal(d3.schemeCategory10);
var svg = d3.select("body")
.append("svg")
var width = +svg.attr("width"),
height = +svg.attr("height"),
node,
link;
svg.append('defs').append('marker')
.attrs({'id':'arrowhead',
'viewBox':'-0 -5 10 10',
'refX':13,
'refY':0,
'orient':'auto',
'markerWidth':13,
'markerHeight':13,
'xoverflow':'visible'})
.append('svg:path')
.attr('d', 'M 0,-5 L 10 ,0 L 0,5')
.attr('fill', 'green')
.style('stroke','none');
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function (d) {return d.id;}).distance(100).strength(1))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
d3.json(graphPath, function (error, graph) {
if (error) throw error;
update(graph.links, graph.nodes);
})
function update(links, nodes) {
link = svg.selectAll(".link")
.data(links)
.enter()
.append("line")
.attr("class", "link")
.attr('marker-end','url(#arrowhead)')
link.append("title")
.text(function (d) {return d.label;});
edgepaths = svg.selectAll(".edgepath")
.data(links)
.enter()
.append('path')
.attrs({
'class': 'edgepath',
'fill-opacity': 0,
'stroke-opacity': 0,
'id': function (d, i) {return 'edgepath' + i}
})
.style("pointer-events", "none");
edgelabels = svg.selectAll(".edgelabel")
.data(links)
.enter()
.append('text')
.style("pointer-events", "none")
.attrs({
'class': 'edgelabel',
'id': function (d, i) {return 'edgelabel' + i},
'font-size': 10,
'fill': '#aaa'
});
edgelabels.append('textPath')
.attr('xlink:href', function (d, i) {return '#edgepath' + i})
.style("text-anchor", "middle")
.style("pointer-events",