From 85062e68e167875c1a9f4c160b151afd17e39fca Mon Sep 17 00:00:00 2001
From: Chiara Cotroneo <10923004+selenocysteine@users.noreply.github.com>
Date: Fri, 7 Sep 2018 10:59:27 +0100
Subject: [PATCH] Proposed fix for the node highlighter in the demo.

---
 README.md    |  19 +++++
 demo/ete.css | 218 +++++++++++++++++++++++++--------------------------
 demo/ete.js  | 116 +++++++++++++--------------
 3 files changed, 184 insertions(+), 169 deletions(-)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..8fbcd98
--- /dev/null
+++ b/README.md
@@ -0,0 +1,19 @@
+### Dependencies
+
+- ete3 from github (master branch)
+
+```
+pip install https://github.com/etetoolkit/ete/archive/master.zip
+pip install bottle cherrypy
+```
+
+### Demo
+- To run the demo:
+
+```
+python test_phylotastic.py
+```
+
+- open ``demo/webplugin_example.html` in a browser running in the machine as the test script.
+
+
diff --git a/demo/ete.css b/demo/ete.css
index 1eabd45..0bcb4d2 100644
--- a/demo/ete.css
+++ b/demo/ete.css
@@ -1,125 +1,121 @@
-#popup
-{
-  font-family: Arial;
-  font-size: 10pt;
-  border: 1px solid #777;
-  margin: 0px;
-  padding: 0px;
-  z-index:100;
-  }
-
-#popup ul
-{
-  margin: 0px;
-  padding: 0px;
- }
-
-#popup li
-{
-  font-size: 10pt;
-  margin: 0px;
-  margin-left: 4px;
-  padding: 0px;
-  list-style-type: none;
-  padding-left: 2px;
-  padding-right: 2px;
-  border-bottom: 1px solid #ccc;
-  background-image: none;
-  }
-
-#popup a
-{
-  color: #565B53;
-  text-decoration:none;
-}
-
-#popup a:hover
-{
-  color: #000000;
-  text-decoration:none;
-}
-
-#ete_popup_header_text
-{
-  margin-right: 10px;
-  margin-left: 6px;
-  font-size: 12pt;
-  color: #565B53;
-}
-
-.ete_popup_item
-{
-  color: #565B53;
-  border-bottom: 1px solid #ccc;
- }
-
-#ete_popup_header{
-  cursor: move;
-  margin-bottom: 4px;
-  padding-right: 2px;
-  padding-left: 2px;
-  background-color:#EEE;
-  border-bottom: 1px solid #ccc;
-  padding: 0px;
-  font-size: 10pt;
-  font-weight:bold;
-  border-bottom:6px solid #565B53;
- }
-
-#ete_close_popup{
-    background-image:url('/TreeViewer/close.png');
-    width:16px;
-    height:16px;
-    cursor:auto;
-    float:right;
-}
-
-#ete_popup_header span{
-cursor: auto;
-}
-
-#ete_tree_buttons{
+#popup {
+    font-family: Arial;
+    font-size: 10pt;
+    border: 1px solid #777;
+    margin: 0px;
+    padding: 0px;
+    z-index: 100;
+}
+
+#popup ul {
+    margin: 0px;
+    padding: 0px;
+}
+
+#popup li {
+    font-size: 10pt;
+    margin: 0px;
+    margin-left: 4px;
+    padding: 0px;
+    list-style-type: none;
+    padding-left: 2px;
+    padding-right: 2px;
+    border-bottom: 1px solid #ccc;
+    background-image: none;
+}
+
+#popup a {
+    color: #565B53;
+    text-decoration: none;
+}
+
+#popup a:hover {
+    color: #000000;
+    text-decoration: none;
+}
+
+#ete_popup_header_text {
+    margin-right: 10px;
+    margin-left: 6px;
+    font-size: 12pt;
+    color: #565B53;
+}
+
+.ete_popup_item {
+    color: #565B53;
     border-bottom: 1px solid #ccc;
 }
 
-#ete_tree_buttons li{
+#ete_popup_header {
+    cursor: move;
+    margin-bottom: 4px;
+    padding-right: 2px;
+    padding-left: 2px;
+    background-color: #EEE;
+    border-bottom: 1px solid #ccc;
+    padding: 0px;
+    font-size: 10pt;
+    font-weight: bold;
+    border-bottom: 6px solid #565B53;
+}
+
+#ete_close_popup {
+    background-image: url('/TreeViewer/close.png');
+    width: 16px;
+    height: 16px;
+    cursor: auto;
+    float: right;
+}
+
+#ete_popup_header span {
+    cursor: auto;
+}
+
+#ete_tree_buttons {
+    border-bottom: 1px solid #ccc;
+}
+
+#ete_tree_buttons li {
     display: inline;
 }
 
-.tree_box_header{
- padding-right:4px;
- background-color:#eee;
- border-bottom:4px solid #555;
- font-weight:bold;
- cursor:move;
+.tree_box_header {
+    padding-right: 4px;
+    background-color: #eee;
+    border-bottom: 4px solid #555;
+    font-weight: bold;
+    cursor: move;
 }
 
-.tree_box_header img{
- float:right;
- cursor: auto;
+.tree_box_header img {
+    float: right;
+    cursor: auto;
 }
 
-#tree_features_box{
-display:none;
-z-index:100;
-border: 1px dotted #555;
-text-align:left;
-background-color: #fff;
+#tree_features_box {
+    display: none;
+    z-index: 100;
+    border: 1px dotted #555;
+    text-align: left;
+    background-color: #fff;
 }
-#search_in_tree_box{
-display:none;
-z-index:100;
-border: 1px dotted #555;
-text-align:center;
-background-color: #fff;
+
+#search_in_tree_box {
+    display: none;
+    z-index: 100;
+    border: 1px dotted #555;
+    text-align: center;
+    background-color: #fff;
 }
 
 #highlighter {
-  position: absolute;
-  visibility: visible;
-  z-index:100;
-  top:0;
-  left:0;
-   width: 70px; height: 70px;
-   border: 1px solid indianred;
-  }
+    position: absolute;
+    visibility: visible;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 70px;
+    height: 70px;
+    border: 1px solid indianred;
+    background: indianred;
+}
diff --git a/demo/ete.js b/demo/ete.js
index d62fe5e..700d288 100644
--- a/demo/ete.js
+++ b/demo/ete.js
@@ -2,89 +2,89 @@
 var ete_webplugin_URL = "http://localhost:8989";
 var loading_img = '<img border=0 src="loader.gif">';
 
-function update_server_status(){
-  console.log('updating');
-  $('#server_status').load(ete_webplugin_URL+"/status");
 
+function update_server_status() {
+    $('#server_status').load(ete_webplugin_URL + "/status");
 }
 
-function get_tree_image(newick, recipient){
-  var treeid = makeid();
-  $(recipient).html('<div id="' + treeid + '">' + loading_img + '</div>');
-  //$(recipient).fadeTo(500, 0.2);
-  var params = {'newick':newick, 'treeid':treeid};
-  $('#'+treeid).load(ete_webplugin_URL+'/get_tree_image', params,
-    function() {
-            $('#'+treeid).fadeTo(100, 0.9);
-  });
+
+function get_tree_image(newick, recipient) {
+    var treeid = makeid();
+    $(recipient).html('<div id="' + treeid + '">' + loading_img + '</div>');
+    //$(recipient).fadeTo(500, 0.2);
+    var params = {'newick': newick, 'treeid': treeid};
+    $('#' + treeid).load(ete_webplugin_URL + '/get_tree_image', params,
+        function () {
+            $('#' + treeid).fadeTo(100, 0.9);
+        });
 }
 
-function show_actions(treeid, nodeid, faceid){
-  $("#popup").html(loading_img);
-  var params = {"treeid": treeid, "nodeid": nodeid, "faceid": faceid};
-  $('#popup').load(ete_webplugin_URL+'/get_actions', params);
+
+function show_actions(treeid, nodeid, faceid) {
+    $("#popup").html(loading_img);
+    var params = {"treeid": treeid, "nodeid": nodeid, "faceid": faceid};
+    $('#popup').load(ete_webplugin_URL + '/get_actions', params);
 }
 
-function run_action(treeid, nodeid, faceid, aindex){
-  $("#popup").hide();
-  $('#'+treeid).html(loading_img);
-  console.log(treeid, nodeid, faceid, aindex, $('#'+treeid));
-  var params = {"treeid": treeid, "nodeid": nodeid, "faceid": faceid, "aindex":aindex};
-  $('#'+treeid).load(ete_webplugin_URL+'/run_action', params,
-    function() {
-      console.log('run action');
-            $('#'+treeid).fadeTo(100, 0.9);
-  });
+function run_action(treeid, nodeid, faceid, aindex) {
+    $("#popup").hide();
+    $('#' + treeid).html(loading_img);
+    console.log(treeid, nodeid, faceid, aindex, $('#' + treeid));
+    var params = {"treeid": treeid, "nodeid": nodeid, "faceid": faceid, "aindex": aindex};
+    $('#' + treeid).load(ete_webplugin_URL + '/run_action', params,
+        function () {
+            console.log('run action');
+            $('#' + treeid).fadeTo(100, 0.9);
+        });
 }
 
 
-function bind_popup(){
-  $(".ete_tree_img").bind('click',function(e){
-                          $("#popup").css('left',e.pageX-2 );
-                          $("#popup").css('top',e.pageY-2 );
-                          $("#popup").css('position',"absolute" );
-                          $("#popup").css('background-color',"#fff" );
-                          $("#popup").draggable({ cancel: 'span,li' });
-                          $("#popup").show();
-                            });
+function bind_popup() {
+    $(".ete_tree_img").bind('click', function (e) {
+        $("#popup").css('left', e.pageX - 2);
+        $("#popup").css('top', e.pageY - 2);
+        $("#popup").css('position', "absolute");
+        $("#popup").css('background-color', "#fff");
+        $("#popup").draggable({cancel: 'span,li'});
+        $("#popup").show();
+    });
 }
-function hide_popup(){
-  $('#popup').hide();
+
+function hide_popup() {
+    $('#popup').hide();
 }
 
-function highlight_node(treeid, nodeid, faceid, x, y, width, height){
-  return;
-  console.log(treeid, nodeid, x, y, width, height);
-  var img = $('#img_'+treeid);
-  var offset = img.offset();
-  console.log(img);
-  console.log(offset);
 
-  $("#highlighter").show();
-  $("#highlighter").css("top", offset.top+y-1);
-  $("#highlighter").css("left", offset.left+x-1);
-  $("#highlighter").css("width", width+1);
-  $("#highlighter").css("height", height+1);
+function highlight_node(treeid, nodeid, faceid, x, y, width, height) {
+    var img = $('#img_' + treeid);
+    var offset = img.offset();
+
+    $("#highlighter").show();
+    $("#highlighter").css("top", offset.top + y - 1);
+    $("#highlighter").css("left", offset.left + x - 1);
+    $("#highlighter").css("width", width + 1);
+    $("#highlighter").css("height", height + 1);
 
 }
-function unhighlight_node(){
-  console.log("unhighlight");
-  $("#highlighter").hide();
+
+function unhighlight_node() {
+    $("#highlighter").hide();
 }
 
-function makeid()
-{
+
+function makeid() {
     var text = "";
     var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
-    for( var i=0; i < 5; i++ )
+    for (var i = 0; i < 5; i++)
         text += possible.charAt(Math.floor(Math.random() * possible.length));
 
     return text;
 }
 
 
-$(document).ready(function(){
-  hide_popup();
-  update_server_status();
+$(document).ready(function () {
+    unhighlight_node();
+    hide_popup();
+    update_server_status();
 });