Skip to content

GitLab

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

scripts

parent d2ecff9e
Hide whitespace changes
Inline Side-by-side
app.py 0 → 100644
View file @ 8cfe978c
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)
static/css/style.css 0 → 100644
View file @ 8cfe978c
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>
static/js/d3draw.html 0 → 100644
View file @ 8cfe978c
<!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>
static/js/graph.js 0 → 100644
View file @ 8cfe978c
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;
}
}
templates/default.html 0 → 100644
View file @ 8cfe978c
{% 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 %}
templates/graph.html 0 → 100644
View file @ 8cfe978c
<!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",