Skip to content
Permalink
963efdee82
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

CoNekT/planet/templates/expression_graph.html

Go to file
 
 
Cannot retrieve contributors at this time
210 lines (202 sloc) 11.3 KB
Raw Blame
{% extends 'base.html' %}
{% block container %}
<div class=container-fluid">
<div class="row">
<div class="col-lg-2 col-sm-4 col-md-4 sidebar" id="sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#"><strong>Options</strong></a></li>
<li><br/></li>
{% if node %}
<li><p>Depth</p>
<div class="text-center">
<div class="btn-group" role="group">
<a href="#" role="button" class="btn btn-primary cy-depth-filter" cutoff=1>Direct</a>
<a href="#" role="button" class="btn btn-primary cy-depth-filter active" cutoff=2>2<sup>nd</sup> Degree</a>
</div>
</div>
</li>
<li><hr /></li>
{% endif %}
<li><p>Nodes</p></li>
<li>
<div class="row">
<div class="col-md-6 col-sm-12">
<label>Color</label><br />
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Default <span class="caret"></span>
</button>
<ul class="dropdown-menu cy-option-menu">
<li><a href="#" class="cy-node-color" attr="color">Default</a></li>
<li><a href="#" class="cy-node-color" attr="family_clade_count">Clade</a></li>
{% if node %}
<li><a href="#" class="cy-node-color" attr="depth_color">Depth</a></li>
{% endif %}
<li><a href="#" class="cy-node-color" attr="family_color">Family</a></li>
<li><a href="#" class="cy-node-color" attr="lc_color">Label Co-occ.</a></li>
{% if cluster or cluster_one %}
<li><a href="#" class="cy-node-color" attr="neighbors">Neighbors</a></li>
{% endif %}
</ul>
</div>
</div>
<div class="col-md-6 col-sm-12">
<label>Shape</label><br />
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Default <span class="caret"></span>
</button>
<ul class="dropdown-menu cy-option-menu">
<li><a href="#" class="cy-node-shape" attr="shape">Default</a></li>
<li><a href="#" class="cy-node-shape" attr="family_shape">Family</a></li>
<li><a href="#" class="cy-node-shape" attr="lc_shape">Label Co-occ.</a></li>
</ul>
</div>
</div>
</div>
</li>
<li><br/></li>
<li>
<div class="row">
<div class="col-lg-12">
<label>Find node</label><br />
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." id="cy-search-term">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="cy-search" search-url="{{ url_for('search.search_json_genes', label='')}}"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
</div>
</li>
<li><hr /></li>
<li><p>Edges</p></li>
<li>
<div class="row">
<div class="col-md-6 col-sm-12">
<label>Color</label><br />
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Default <span class="caret"></span>
</button>
<ul class="dropdown-menu cy-option-menu">
<li><a href="#" class="cy-edge-color" attr="color">Default</a></li>
{% if node %}
<li><a href="#" class="cy-edge-color" attr="depth_color">Depth</a></li>
{% endif %}
<li><a href="#" class="cy-edge-color" attr="link_score">Score</a></li>
</ul>
</div>
</div>
<div class="col-md-6 col-sm-12">
<label>Width</label><br />
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Default <span class="caret"></span>
</button>
<ul class="dropdown-menu cy-option-menu">
<li><a href="#" class="cy-edge-width" attr="default">Default</a></li>
{% if node %}
<li><a href="#" class="cy-edge-width" attr="depth">Depth</a></li>
{% endif %}
</ul>
</div>
</div>
</div>
</li>
<li>
<div>
<br /><p><strong>Score</strong> <span id="cy-edge-score-value" class="text-muted">30</span></p>
<input id="cy-edge-score" data-slider-id='cy-edge-score-slider' type="text" data-slider-min="0" data-slider-max="30" data-slider-step="1" data-slider-value="30" data-slider-tooltip="hide"/>
</div>
</li>
<li><hr /></li>
<li><p>Layout</p></li>
<li>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Concentric <span class="caret"></span>
</button>
<ul class="dropdown-menu cy-option-menu">
<li><a href="#" class="cy-layout" layout="arbor">Arbor</a></li>
<li><a href="#" class="cy-layout" layout="breadthfirst">Breadthfirst</a></li>
<li><a href="#" class="cy-layout" layout="circle">Circle</a></li>
<li><a href="#" class="cy-layout" layout="concentric">Concentric</a></li>
<li><a href="#" class="cy-layout" layout="cose">Cose</a></li>
<li><a href="#" class="cy-layout" layout="grid">Grid</a></li>
<li class="divider"></li>
<li><a href="#" class="cy-layout" layout="random">Random</a></li>
</ul>
</div>
</div></div>
</li>
<li><hr /></li>
<li>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="nav-header"><p class="text-muted">data</p></li>
<li><a href="#" id="cy-download-json">JSON (network)</a></li>
<li><a href="#" id="cy-download-jsoncy">JSON (network + colors/shapes)</a></li>
<li><a href="#" id="cy-download-xgmml">xgmml</a></li>
<li class="divider"></li>
<li class="nav-header"><p class="text-muted">image</p></li>
<li><a href="#" id="cy-download-svg">SVG</a></li>
<li><a href="#" id="cy-download-img-hires">PNG, hi-res</a></li>
<li><a href="#" id="cy-download-img-lowres">PNG, low-res</a></li>
<!--<li class="nav-header"><p class="text-muted">experimental</p></li>-->
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-lg-10 col-lg-offset-2 col-sm-8 col-sm-offset-4 col-md-8 col-md-offset-4 main" id="main">
{% if node %}
<h1>Expression Graph: <strong>{{ node.probe }}</strong><br /><small>({{ node.method.description }})</small><button id="cy-reset" class="btn btn-default"><i class="fa fa-arrows-h"></i></button></h1>
<div class="row">
<div id="cy" json="{{ url_for('expression_network.expression_network_json', node_id=node.id, depth=depth, family_method_id=family_method_id) }}" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
{% elif cluster %}
<h1>Coexpression cluster: <strong>{{ cluster.name }}</strong><br /><small>{{ cluster.method.method }}</small><button id="cy-reset" class="btn btn-default"><i class="fa fa-arrows-h"></i></button></h1>
<a href="{{ url_for('expression_cluster.expression_cluster_view', cluster_id=cluster.id) }}">View table</a>
<div id="cy" json="{{ url_for('expression_cluster.expression_cluster_json', cluster_id=cluster.id, family_method_id=family_method_id) }}" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
{% elif cluster_one %}
<h1>Comparing clusters: <strong>{{ cluster_one.name }}</strong> vs <strong>{{ cluster_two.name }}</strong><br /><button id="cy-reset" class="btn btn-default"><i class="fa fa-arrows-h"></i></button></h1>
<div id="cy" json="{{ url_for('graph_comparison.graph_comparison_cluster_json', one=cluster_one.id, two=cluster_two.id, family_method_id=family_method_id) }}" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
{% endif %}
<div id="loading"><span class="fa fa-refresh fa-spin"></span></div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extrajs %}
<script src="{{ url_for('static', filename='js/bootstrap-slider.min.js') }}"></script>
<script>
$('#cy-edge-score').slider({
formatter: function(value) {
return 'Cut-off: ' + value;
}
});
$('#cy-edge-score').on("slide", function(slideEvt) {
$("#cy-edge-score-value").text(slideEvt.value);
});
</script>
<script src="{{ url_for('static', filename='js/XMLWriter-1.0.0-min.js') }}"></script>
<script src="{{ url_for('static', filename='js/pablo.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/planet_xgmml.js') }}"></script>
<script src="{{ url_for('static', filename='js/planet_svg.js') }}"></script>
<script src="{{ url_for('static', filename='js/arbor.js') }}"></script>
<script src="{{ url_for('static', filename='js/cytoscape.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery.qtip.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/cytoscape-qtip.js') }}"></script>
<script src="{{ url_for('static', filename='js/planet_graph.js') }}"></script>
{% endblock %}