Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bootstrap4] Branch Selection React Component #140

Merged
merged 10 commits into from Aug 21, 2018
Merged

[Bootstrap4] Branch Selection React Component #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6b2a5f6
WIP branch selection react component
Aug 15, 2018
d9c4cd1
working on branch selection
Aug 16, 2018
2b36bc5
branch selection edits with SW
Aug 20, 2018
e086e1f
absrel branch selection
Aug 20, 2018
2dc57f0
Merge branch 'bootstrap4' of https://github.com/veg/datamonkey-js int…
Aug 20, 2018
55b112e
Merge branch 'bootstrap4' of https://github.com/veg/datamonkey-js int…
Aug 21, 2018
dbf278a
integrate hyphy-vision
Aug 21, 2018
3d15e00
functional submital pages and more vision integration
Aug 21, 2018
6a29a12
working branch selection components for all methods that use branch s…
Aug 21, 2018
03fbe94
setup temporary CI for this branch
Aug 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 11 additions & 10 deletions .travis.yml
View file
Open in desktop
@@ -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
View file
Open in desktop
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
View file
Open in desktop
@@ -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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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 %>