Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Branch Selection React Component (#140)
* WIP branch selection react component

* working on branch selection

* branch selection edits with SW

* absrel branch selection

* integrate hyphy-vision

* functional submital pages and more vision integration

* working branch selection components for all methods that use branch selection

* setup temporary CI for this branch
  • Loading branch information
Ryan Velazquez committed Aug 21, 2018
1 parent 8d33a40 commit eb4b94e
Show file tree
Hide file tree
Showing 31 changed files with 615 additions and 1,610 deletions.
21 changes: 11 additions & 10 deletions .travis.yml
@@ -1,6 +1,6 @@
language: node_js

services:
services:
- mongodb
- redis-server

Expand All @@ -10,18 +10,19 @@ node_js:
sudo: false

notifications:
email:
recipients:
- spond@temple.edu
- steven@stevenweaver.org
- sshank@temple.edu
on_success: always
on_failure: always
email:
recipients:
- spond@temple.edu
- steven@stevenweaver.org
- sshank@temple.edu
on_success: always
on_failure: always

branches:
only:
- master
- develop
- master
- develop
- bootstrap4

cache:
yarn: true
Expand Down
84 changes: 30 additions & 54 deletions app/templates/absrel/form.ejs
Expand Up @@ -4,63 +4,39 @@

<%- include header.ejs %>

<h2 class="page-header">Analysis Options</h2>
<h5 class="phylotree-header">Select Test Branches</h5>

<div class="col-lg-8 phylo-nav">
<div class="btn-group">
<button title="Expand spacing" id="expand_spacing" class="btn btn-default btn-sm" type="button">
<i class="fa fa-expand"></i>
</button>
<button title="Compress spacing" id="compress_spacing" class="btn btn-default btn-sm" type="button">
<i class="fa fa-compress"></i>
</button>
<button title="Sort deepest clades to the bototm" id="sort_ascending" class="btn btn-default btn-sm" type="button">
<i class="fa fa-sort-amount-asc"></i>
</button>
<button title="Sort deepsest clades to the top" id="sort_descending" class="btn btn-default btn-sm" type="button">
<i class="fa fa-sort-amount-desc"></i>
</button>
<button title="Restore original order" id="sort_original" class="btn btn-default btn-sm" type="button">
<i class="fa fa-sort"></i>
</button>
<button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle" type="button">Selection <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a id="select_all" href="#">Select all</a></li>
<li><a id="select_all_internal" href="#">Select only internal nodes</a></li>
<li><a id="select_all_leaves" href="#">Select only leaf nodes</a></li>
<li><a id="select_none" href="#">Clear selection</a></li>
</ul>
</div>
</div>

<% if (absrel.msa[0].usertree) { %>
<div id="tree-select-btn-group" class="col-lg-4 phylo-nav">
<div class="btn-group" data-toggle="buttons">
<label title="Highlight Test Branches" id="usertree-highlighter" class="btn btn-default btn-sm active" data-name='usertree'>
<input type="radio" name="options" id="relax-ut-select" autocomplete="off" checked>User Defined Tree</input>
</label>
<label title="Highlight Reference Branches" id="nj-highlighter" class="btn btn-default btn-sm" data-name='nj'>
<input type="radio" name="options" id="relax-nj-select" autocomplete="off" checked>Neighbor Joining Tree</input>
</label>
</div>
</div>
<% } %>

<div id="neighbor-tree" data-tree="<%= absrel.msa[0].nj %>" <% if (absrel.msa[0].usertree) { %> data-usertree="<%= absrel.msa[0].usertree %>"<% } %>>
<div id="tree-body">
<div id='tree_container' class='tree-widget'></div>
</div>
</div>
<div class="container" id="branch-selection-container"></div>

<form action="/absrel/<%= absrel._id %>/select-foreground" enctype="multipart/form-data" method="POST" name="modelForm">
<div>
<button type="submit" class="btn pull-right"><span class="glyphicon glyphicon-play dm-continue-btn"></span></button>
</div>
</form>

</div>
</div>

<%- include ../includes/modal.ejs %>
<%- include ../includes/footer.ejs %>

<script src="/assets/js/absrel/fg-selection.js"></script>
<script>
// Get trees.
var user_tree = "<%= absrel.msa[0].usertree %>"
var nj_tree = "<%= absrel.msa[0].nj %>"
// Create callback for posting annotated tree.
datamonkey_post_annotated_tree = function (annotated_tree) {
var formData = new FormData();
formData.append('nwk_tree', annotated_tree);
var xhr = new XMLHttpRequest();
var id = "<%= absrel._id %>"
xhr.open('post','/absrel/' + id + '/select-foreground', true);
xhr.onload = function(res) {
// Replace field with green text, name of file
var result = JSON.parse(this.responseText);
if('_id' in result.absrel) {
window.location.href = '/absrel/' + result.absrel._id;
} else if ('error' in result) {
datamonkey.errorModal(result.error);
}
};
xhr.send(formData);
}
render_branch_selection("branch-selection-container", user_tree , nj_tree , datamonkey_post_annotated_tree, 800, 600, false)
</script>
89 changes: 29 additions & 60 deletions app/templates/busted/form.ejs
@@ -1,73 +1,42 @@
<%- include ../includes/header.ejs %>

<!--
<link href="/assets/css/busted/font-awesome-4.2.0/css/font-awesome.css" rel="stylesheet">
<link href="/assets/lib/phylotree/phylotree.css" rel="stylesheet">
<link href="/assets/css/neighbor-join.css" rel="stylesheet">
-->

<div class="container">

<%- include header.ejs %>

<h2 class="page-header">Analysis Options</h2>

<div class="col-lg-8 phylo-nav">
<div class="btn-group">
<button title="Expand spacing" id="expand_spacing" class="btn btn-default btn-sm" type="button">
<i class="fa fa-expand"></i>
</button>
<button title="Compress spacing" id="compress_spacing" class="btn btn-default btn-sm" type="button">
<i class="fa fa-compress"></i>
</button>
<button title="Sort deepest clades to the bototm" id="sort_ascending" class="btn btn-default btn-sm" type="button">
<i class="fa fa-sort-amount-asc"></i>
</button>
<button title="Sort deepsest clades to the top" id="sort_descending" class="btn btn-default btn-sm" type="button">
<i class="fa fa-sort-amount-desc"></i>
</button>
<button title="Restore original order" id="sort_original" class="btn btn-default btn-sm" type="button">
<i class="fa fa-sort"></i>
</button>
<button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle" type="button">Selection <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a id="select_all" href="#">Select all</a></li>
<li><a id="select_all_internal" href="#">Select only internal nodes</a></li>
<li><a id="select_all_leaves" href="#">Select only leaf nodes</a></li>
<li><a id="select_none" href="#">Clear selection</a></li>
</ul>
</div>
</div>

<% if (busted.msa[0].usertree) { %>
<div id="tree-select-btn-group" class="col-lg-4 phylo-nav">
<div class="btn-group" data-toggle="buttons">
<label title="Highlight Test Branches" id="usertree-highlighter" class="btn btn-default btn-sm active" data-name='usertree'>
<input type="radio" name="options" id="relax-ut-select" autocomplete="off" checked>User Defined Tree</input>
</label>
<label title="Highlight Reference Branches" id="nj-highlighter" class="btn btn-default btn-sm" data-name='nj'>
<input type="radio" name="options" id="relax-nj-select" autocomplete="off" checked>Neighbor Joining Tree</input>
</label>
</div>
</div>
<% } %>

<div id="neighbor-tree" data-tree="<%= busted.msa[0].nj %>" <% if (busted.msa[0].usertree) { %> data-usertree="<%= busted.msa[0].usertree %>"<% } %>>
<div id="tree-body">
<div id='tree_container' class='tree-widget'></div>
</div>
</div>
<h5 class="phylotree-header">Select Test Branches</h5>

<form action="/busted/<%= busted._id %>/select-foreground" enctype="multipart/form-data" method="POST" name="modelForm">
<div>
<button type="submit" class="btn pull-right"><span class="glyphicon
glyphicon-play dm-continue-btn"></span></button>
</div>
</form>
<div class="container" id="branch-selection-container"></div>

</div>

<%- include ../includes/modal.ejs %>
<%- include ../includes/footer.ejs %>

<script src="/assets/js/busted/fg-selection.js"></script>
<script>
// Get trees.
var user_tree = "<%= busted.msa[0].usertree %>"
var nj_tree = "<%= busted.msa[0].nj %>"
// Create callback for posting annotated tree.
datamonkey_post_annotated_tree = function (annotated_tree) {
var formData = new FormData();
formData.append('nwk_tree', annotated_tree);
var xhr = new XMLHttpRequest();
var id = "<%= busted._id %>"
xhr.open('post','/busted/' + id + '/select-foreground', true);
xhr.onload = function(res) {
// Replace field with green text, name of file
var result = JSON.parse(this.responseText);
if('_id' in result.busted) {
window.location.href = '/busted/' + result.busted._id;
} else if ('error' in result) {
datamonkey.errorModal(result.error);
}
};
xhr.send(formData);
}
render_branch_selection("branch-selection-container", user_tree , nj_tree , datamonkey_post_annotated_tree, 800, 600, false)
</script>
4 changes: 2 additions & 2 deletions app/templates/busted/results.ejs
Expand Up @@ -5,7 +5,7 @@

<script>
var fasta_read = false;
var fasta_ready = false;
d3.json(window.location.href+"/fasta", (err, data) => {
var fasta = data.fasta
Expand All @@ -19,7 +19,7 @@
if (fasta_ready == false) {
$(document).ready( function () {
hyphyVision.busted($("#job-report").data('jobid') + '/results', "content", fasta, true, true)
hyphyVision.busted($("#job-report").data('jobid') + '/results', "content", null, true, true)
});
}
Expand Down
2 changes: 1 addition & 1 deletion app/templates/busted/upload_msa.ejs
Expand Up @@ -81,7 +81,7 @@
</div>
</div><!-- /form-group -->
<button type="submit" class="btn pull-right">
<span class="glyphicon dm-continue-btn glyphicon-play dm-continue-btn"></span>
<span class="glyphicon dm-continue-btn fas fa-play"></span>
</button>
</form>
</div>
Expand Down
82 changes: 29 additions & 53 deletions app/templates/fel/form.ejs
Expand Up @@ -4,63 +4,39 @@

<%- include header.ejs %>

<h2 class="page-header">Analysis Options</h2>
<h5 class="phylotree-header">Select Test Branches</h5>

<div class="col-lg-8 phylo-nav">
<div class="btn-group">
<button title="Expand spacing" id="expand_spacing" class="btn btn-default btn-sm" type="button">
<i class="fa fa-expand"></i>
</button>
<button title="Compress spacing" id="compress_spacing" class="btn btn-default btn-sm" type="button">
<i class="fa fa-compress"></i>
</button>
<button title="Sort deepest clades to the bototm" id="sort_ascending" class="btn btn-default btn-sm" type="button">
<i class="fa fa-sort-amount-asc"></i>
</button>
<button title="Sort deepsest clades to the top" id="sort_descending" class="btn btn-default btn-sm" type="button">
<i class="fa fa-sort-amount-desc"></i>
</button>
<button title="Restore original order" id="sort_original" class="btn btn-default btn-sm" type="button">
<i class="fa fa-sort"></i>
</button>
<button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle" type="button">Selection <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a id="select_all" href="#">Select all</a></li>
<li><a id="select_all_internal" href="#">Select only internal nodes</a></li>
<li><a id="select_all_leaves" href="#">Select only leaf nodes</a></li>
<li><a id="select_none" href="#">Clear selection</a></li>
</ul>
</div>
</div>

<% if (fel.msa[0].usertree) { %>
<div id="tree-select-btn-group" class="col-lg-4 phylo-nav">
<div class="btn-group" data-toggle="buttons">
<label title="Highlight Test Branches" id="usertree-highlighter" class="btn btn-default btn-sm active" data-name='usertree'>
<input type="radio" name="options" id="relax-ut-select" autocomplete="off" checked>User Defined Tree</input>
</label>
<label title="Highlight Reference Branches" id="nj-highlighter" class="btn btn-default btn-sm" data-name='nj'>
<input type="radio" name="options" id="relax-nj-select" autocomplete="off" checked>Neighbor Joining Tree</input>
</label>
</div>
</div>
<% } %>

<div id="neighbor-tree" data-tree="<%= fel.msa[0].nj %>" <% if (fel.msa[0].usertree) { %> data-usertree="<%= fel.msa[0].usertree %>"<% } %>>
<div id="tree-body">
<div id='tree_container' class='tree-widget'></div>
</div>
</div>

<form action="/fel/<%= fel._id %>/select-foreground" enctype="multipart/form-data" method="POST" name="modelForm">
<div>
<button type="submit" class="btn pull-right"><span class="glyphicon glyphicon-play dm-continue-btn"></span></button>
</div>
</form>
<div class="container" id="branch-selection-container"></div>

</div>

<%- include ../includes/modal.ejs %>
<%- include ../includes/footer.ejs %>

<script src="/assets/js/fel/fg-selection.js"></script>
<script>
// Get trees.
var user_tree = "<%= fel.msa[0].usertree %>"
var nj_tree = "<%= fel.msa[0].nj %>"
// Create callback for posting annotated tree.
datamonkey_post_annotated_tree = function (annotated_tree) {
var formData = new FormData();
formData.append('nwk_tree', annotated_tree);
var xhr = new XMLHttpRequest();
var id = "<%= fel._id %>"
xhr.open('post','/fel/' + id + '/select-foreground', true);
xhr.onload = function(res) {
// Replace field with green text, name of file
var result = JSON.parse(this.responseText);
if('_id' in result.fel) {
window.location.href = '/fel/' + result.fel._id;
} else if ('error' in result) {
datamonkey.errorModal(result.error);
}
};
xhr.send(formData);
}
render_branch_selection("branch-selection-container", user_tree , nj_tree , datamonkey_post_annotated_tree, 800, 600, false)
</script>
2 changes: 1 addition & 1 deletion app/templates/fel/msa_form.ejs
Expand Up @@ -96,7 +96,7 @@
</div><!-- /form-group -->

<button type="submit" class="btn pull-right">
<span class="dm-continue-btn glyphicon glyphicon-play"></span>
<span class="dm-continue-btn fas fa-play"></span>
</button>

</form>
Expand Down
4 changes: 2 additions & 2 deletions app/templates/fel/results.ejs
Expand Up @@ -5,7 +5,7 @@

<script>
var fasta_read = false;
var fasta_ready = false;
d3.json(window.location.href+"/fasta", (err, data) => {
var fasta = data.fasta
Expand All @@ -19,7 +19,7 @@
if (fasta_ready == false) {
$(document).ready( function () {
hyphyVision.fel($("#job-report").data('jobid') + '/results', "content", fasta, true, true)
hyphyVision.fel($("#job-report").data('jobid') + '/results', "content", null, true, true)
});
}
Expand Down
3 changes: 1 addition & 2 deletions app/templates/fubar/form.ejs
Expand Up @@ -4,8 +4,7 @@
<div id="upload-form"></div>
<%- include ../includes/modal.ejs %>
</div>
<%- include ../includes/footer.ejs %>
<script>
fubar_form();
</script>

<%- include ../includes/footer.ejs %>

0 comments on commit eb4b94e

Please sign in to comment.