Commit 94a132a9 authored by Floreal Cabanettes's avatar Floreal Cabanettes
Browse files

Refactor web design

parent 07008bfb
......@@ -9,4 +9,4 @@ threads = 4
minimap2 = /home/fcabanettes/minimap2/minimap2
[database]
sqlite_file = /home/fcabanettes/algeco/srv/database.sqlite
sqlite_file = /home/fcabanettes/dgenies/srv/database.sqlite
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
body {
font-size: 14px;
font-family: sans-serif;
padding-top: 50px;
padding-bottom: 30px;
}
#body {
max-width: 850px;
}
.navbar-brand {
padding-left: 50px;
background: url("images/logo.png") no-repeat 0 5px;
background-size: 40px 40px;
}
#legend {
/*position: fixed;*/
/*top: calc(50% - 100px);*/
......@@ -71,6 +79,10 @@ input[type=range] {
width: 100px;
}
#sidebar label {
font-weight: normal !important;
}
#supdraw {
width:1020px;
height: 850px;
......@@ -85,7 +97,7 @@ input[type=range] {
font-size: 18pt;
font-weight: bold;
font-family: FreeSans, sans-serif;
top: 5pt;
top: 10pt;
position: absolute;
}
......@@ -113,6 +125,7 @@ input[type=range] {
}
#loading .label {
color: black;
display: inline-block;
padding-left: 55px;
padding-right: 5px;
......@@ -226,6 +239,11 @@ input[type=range] {
table.form td.label {
padding-top:5px;
padding-right: 10px;
color: black;
}
table.form td {
padding-bottom: 5px !important;
}
table.form {
......@@ -237,6 +255,18 @@ table.form input[type=text],table.form input[type=email]{
width: 250px;
}
.form-group, .form-group input {
margin-bottom: 5px !important;
}
h2.title-launch {
margin-bottom: 20px;
}
.form-group input[type=text], .form-group input[type=email] {
width: 300px;
}
#body {
margin-left: 15px;
margin-top: 10px;
......
......@@ -24,7 +24,6 @@ config_reader = AppConfigReader()
UPLOAD_FOLDER = config_reader.get_upload_folder()
app_title = "D-GENIES - Dotplot for Genomes Interactive, E-connected and Speedy"
app_title_small = "D-GENIES"
# Init Flask:
app = Flask(__name__, static_url_path='/static')
......@@ -38,13 +37,19 @@ app_data = config_reader.get_app_data()
# Main
@app.route("/", methods=['GET'])
def main():
return render_template("index.html", title=app_title, menu="index")
@app.route("/run", methods=['GET'])
def run():
id_job = random_string(5) + "_" + datetime.datetime.fromtimestamp(time.time()).strftime('%Y%m%d%H%M%S')
if "id_job" in request.args:
id_job = request.args["id_job"]
email = ""
if "email" in request.args:
email = request.args["email"]
return render_template("index.html", title=app_title, title_small=app_title_small, id_job=id_job, email=email)
return render_template("run.html", title=app_title, id_job=id_job, email=email,
menu="run")
# Launch analysis
......@@ -101,7 +106,7 @@ def launch_analysis():
job.launch()
return redirect(url_for(".status", id_job=id_job))
else:
return redirect(url_for(".main", id_job=id_job, email=email))
return redirect(url_for(".run", id_job=id_job, email=email))
else:
return redirect(url_for(".main", id_job=id_job, email=email))
......@@ -111,13 +116,14 @@ def launch_analysis():
def status(id_job):
job = JobManager(id_job)
status = job.status()
return render_template("status.html", title=app_title, title_small=app_title_small, status=status, id_job=id_job)
return render_template("status.html", title=app_title, status=status, id_job=id_job,
menu="results")
# Results path
@app.route("/result/<id_res>", methods=['GET'])
def result(id_res):
return render_template("results.html", title=app_title, title_small=app_title_small, id=id_res)
return render_template("results.html", title=app_title, id=id_res, menu="results")
# Get graph (ajax request)
......
......@@ -5,22 +5,74 @@
<title>{{ title }}</title>
<script src="{{ url_for('static', filename='js/jquery-3.2.1.min.js') }}" type="text/JavaScript"></script>
<script src="{{ url_for('static', filename='js/jquery-ui.min.js') }}" type="text/JavaScript"></script>
<script src="{{ url_for('static', filename='js/popper.min.js') }}" type="text/JavaScript"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}" type="text/JavaScript"></script>
<script src="{{ url_for('static', filename='js/d3.min.js') }}" type="text/JavaScript"></script>
<script src="{{ url_for('static', filename='js/d3.boxplot.js') }}" type="text/JavaScript"></script>
<script src="{{ url_for('static', filename='js/jquery-ui.min.js') }}" type="text/JavaScript"></script>
<script src="{{ url_for('static', filename='js/popper.min.js') }}" type="text/JavaScript"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}" type="text/JavaScript"></script>
<script src="{{ url_for('static', filename='js/d3.min.js') }}" type="text/JavaScript"></script>
<script src="{{ url_for('static', filename='js/d3.boxplot.js') }}" type="text/JavaScript"></script>
<script src="{{ url_for('static', filename='js/d3.boxplot.events.js') }}" type="text/JavaScript"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/jquery-ui.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css">
<link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/jquery-ui.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-theme.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css">
<link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
</head>
<body onload="{% block onload %}{% endblock %}">
<body role="document" onload="{% block onload %}{% endblock %}">
{% block body %}
<div id="main-bar-title">
<img src="{{ url_for('static', filename='images/logo.png') }}" height="40px" alt=""/><h1>{{ title_small }}</h1>
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">D-GENIES</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="{% if(menu == 'index') %}active{% endif %}"><a href="/">About</a></li>
<li class="{% if(menu == 'run') %}active{% endif %}"><a href="/run">Run</a></li>
<li class="dropdown {% if(menu == 'results') %}active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Results<span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
{% block results %}
<li><a href="#">Please run a job!</a></li>
{% endblock %}
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Documentation<span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Launch a job</a></li>
<li><a href="#">Zoom</a></li>
<li><a href="#">Filter data</a></li>
</ul>
</li>
<li><a href="mailto:support.genopole@toulouse.inra.fr">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container theme-showcase" role="main">
{% block content %}
{% endblock %}
<hr>
<footer>
<div class="container" style="text-align: center;">
<p>Copyright © 2017, INRA | Designed by <a target="_blank" href="http://bioinfo.genotoul.fr/">GenoToul
Bioinfo platform</a>.</p>
</div>
</footer>
</div> <!-- /container -->
{% endblock %}
</body>
</html>
\ No newline at end of file
{% extends 'base.html' %}
{% block body %}
{{ super() }}
<div id="body">
<p class="description">DGENIES &#150; for Dotplot for Genomes Interactive, E-connected and Speedy &#150; is an online tool
designed to compare two genomes. It supports large genome and you can interact with the lot to improve the visualisation.</p>
<p class="description">We use minimap version 2 to align the two genomes. Then, the PAF file is parsed and plotted into
an interactive plot written with d3.js library.</p>
<form id="submit_minimap" method=post enctype=multipart/form-data action="/launch_analysis">
<h2>Launch map analysis</h2>
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="errors-submit">
<ul class=flashes>
{% for message in messages %}
<li>{{ message | safe }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endwith %}
<table class="form">
<tr>
<td class="label">
<label for="id_job">Name of your job</label>
</td>
<td>
<input type="text" id="id_job" name="id_job" value="{{ id_job }}" required/>
</td>
</tr>
<tr>
<td class="label">
<label for="email">E-mail*</label>
</td>
<td>
<input type="email" name="email" id="email" value="{{ email }}" required/>
</td>
</tr>
<tr>
<td class="label">
<label>Query fasta</label>
</td>
<td>
<input type="file" name="file_query" id="file_query" required/>
</td>
</tr>
<tr>
<td class="label">
<label>Target fasta</label>
</td>
<td>
<input type="file" name="file_target" id="file_target" required/>
</td>
</tr>
</table>
<p>* We will send you results by mail.</p>
<button type="submit">Submit</button>
</form>
</div>
{% block content %}
<!-- Jumbotron -->
<div class="jumbotron" style="margin-top:-25px;text-align:justify">
<h1>D-Genies</h1>
<p class="description lead">D-GENIES &#150; for Dotplot for Genomes Interactive, E-connected and Speedy &#150; is an online tool
designed to compare two genomes. It supports large genome and you can interact with the lot to improve the visualisation.</p>
<p class="description">We use minimap version 2 to align the two genomes. Then, the PAF file is parsed and plotted into
an interactive plot written with d3.js library.</p>
</div>
<div class="row">
<div class="col-lg-6" style="text-align:justify">
<h1 class="page-header">D-Genies <small>Summary</small></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique diam eu dolor viverra, aliquam malesuada ante dapibus. Fusce aliquet commodo justo, eu tristique tellus. Fusce sapien ligula, rutrum a luctus et, condimentum a leo. Donec at metus urna. Vivamus lacus ante, fringilla sed bibendum sed, faucibus vel diam. Aliquam erat volutpat. Etiam eu ante id odio interdum lacinia id id nisi. Duis placerat pharetra nulla at cursus.</p>
</div>
<div class="col-lg-6" style="text-align:justify">
<h1 class="page-header">D-Genies <small>Availability</small></h1>
<p>D-Genies is available under the GNU General
Public License (GPL). The package is comming with a full documentation and test data. Sources are available <a target="_blank" href="#">here</a>.</p>
</div><!--/span-->
</div><!--/row-->
{% endblock %}
\ No newline at end of file
{% extends 'base.html' %}
{% block onload %}d3.boxplot.init('{{ id }}');{% endblock %}
{% block body %}
{% block content %}
{{ super() }}
<div id="supdraw">
<div class="master">
......
{% extends 'base.html' %}
{% block content %}
<form id="submit_minimap" method=post enctype=multipart/form-data action="/launch_analysis">
<h2 class="title-launch">Launch map analysis</h2>
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="errors-submit">
<ul class=flashes>
{% for message in messages %}
<li>{{ message | safe }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endwith %}
<div class="submit-form">
<fieldset>
<div class="form-group">
<label for="id_job" class="col-sm-2">Name of your job</label>
<div class="col-sm-10">
<input type="text" id="id_job" name="id_job" value="{{ id_job }}" required/>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2">E-mail*</label>
<div class="col-sm-10">
<input type="email" name="email" id="email" value="{{ email }}" required/>
</div>
</div>
<div class="form-group">
<label for="file_query" class="col-sm-2">Query fasta</label>
<div class="col-sm-10">
<input type="file" name="file_query" id="file_query" required/>
</div>
</div>
<div class="form-group">
<label for="file_target" class="col-sm-2">Target fasta</label>
<div class="col-sm-10">
<input type="file" name="file_target" id="file_target" required/>
</div>
</div>
</fieldset>
</div>
<p class="afterworlff">* We will send you results by mail.</p>
<button type="submit">Submit</button>
</form>
{% endblock %}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment