Merge pull request #163 from ElDeveloper/issue_162

Add color selector to biplot labels
biocore · Aug 5, 2013 · 62f8d2d · 62f8d2d
2 parents 227a0e9 + f32ad9a
commit 62f8d2d
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 25 deletions.
diff --git a/ChangeLog.md b/ChangeLog.md
@@ -18,6 +18,7 @@ Emperor 0.9.1 (changes since Emperor 0.9.0 go here)
 * Export to SVG your visualization.
 * Emperor now relies on QIIME 1.7.0.
 * Added option `--number_of_segments` to control the quality of all spheres
+* Labels for biplots now have a color picker.
 * Add color pickers for connecting bars in coordinate comparison plots.
 * Add option to select a master set of coordinates when making a comparison plot.
 

diff --git a/emperor/format.py b/emperor/format.py
@@ -392,6 +392,7 @@ def format_emperor_html_footer_string(has_biplots=False, has_ellipses=False,
     optional_strings.append(if_(has_biplots, _BIPLOT_SPHERES_COLOR_SELECTOR,''))
     optional_strings.append(if_(has_biplots, _BIPLOT_VISIBILITY_SELECTOR, ''))
     optional_strings.append(if_(has_biplots, _TAXA_LABELS_SELECTOR, ''))
+    optional_strings.append(if_(has_biplots, _TAXA_LABELS_COLOR_SELECTOR, ''))
     optional_strings.append(if_(has_edges, _EDGES_COLOR_SELECTOR, ''))
     optional_strings.append(if_(has_ellipses, _ELLIPSE_OPACITY_SLIDER, ''))
     optional_strings.append(if_(has_vectors, _VECTORS_OPACITY_SLIDER, ''))
@@ -452,6 +453,10 @@ def format_emperor_html_footer_string(has_biplots=False, has_ellipses=False,
             <input type="checkbox" onClick="toggleTaxaLabels()">Biplots Label Visibility</input>
             </form>"""
 
+_TAXA_LABELS_COLOR_SELECTOR = """
+            <tr><td><div id="taxalabelcolor" class="colorbox"></div></td><td><label>Taxa Label Color</label></td></tr>
+"""
+
 _BIPLOT_VISIBILITY_SELECTOR = """
             <br>
             <form name="biplotsvisibility">
@@ -565,10 +570,9 @@ def format_emperor_html_footer_string(has_biplots=False, has_ellipses=False,
             <label id="labelopacity" class="slidervalue"></label>
             <div id="lopacityslider" class="slider-range-max"></div>
             <div id="labelColorHolder clearfix">
-            <table><tr>
-            <td><div id="labelColor" class="colorbox">
-            </div></td><td><label>Master Label Color</label></td>
-            </tr></table></div>
+            <table>
+                <tr><td><div id="labelColor" class="colorbox"></div></td><td><label>Master Label Color</label></td></tr>%s
+            </table></div>
         </div>
             <br>
             <select id="labelcombo" onchange="labelMenuChanged()">

diff --git a/emperor/support_files/emperor/js/emperor.js b/emperor/support_files/emperor/js/emperor.js
@@ -58,7 +58,7 @@ g_validAsciiCodes = g_validAsciiCodes.concat([65,66,67,68,68,70,71,72,73,74,75,7
 g_validAsciiCodes = g_validAsciiCodes.concat([97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122]);
 
 // taken from the qiime/colors.py module; a total of 29 colors
-k_QIIME_COLORS = [
+var k_QIIME_COLORS = [
 "0xFF0000", // red1
 "0x0000FF", // blue1
 "0xF27304", // orange1
@@ -1214,6 +1214,31 @@ function setJqueryUi() {
 				}
 		});
 	}
+	// set up the color selector for the taxa labels
+	if(document.getElementById('taxalabelcolor')){
+		$('#taxalabelcolor').css('backgroundColor',"#FFFFFF");
+		$("#taxalabelcolor").spectrum({
+			localStorageKey: 'key',
+			color: "#FFFFFF",
+			preferredFormat: "hex6",
+			showInitial: true,
+			showInput: true,
+			change:
+				function(color) {
+				// pass a boolean flag to convert to hex6 string
+				var c = color.toHexString(true);
+
+				// set the color for the box and for the renderer
+				$(this).css('backgroundColor', c);
+
+				// get the taxonomic assignments and append '_taxalabel' to
+				// retrieve all the labels belonging to a sphere in the plot
+				for(var key in g_taxaPositions) {
+					$('#'+key+"_taxalabel").css('color', c);
+				}
+			}// on-change callback
+		});
+	}
 
 	// check if the plot is a comparison plot if so, setup the elements that
 	// will allow the user to change the color of the two sides of the edges

diff --git a/tests/test_format.py b/tests/test_format.py
@@ -525,10 +525,9 @@ def test_format_emperor_html_footer_string(self):
             <label id="labelopacity" class="slidervalue"></label>
             <div id="lopacityslider" class="slider-range-max"></div>
             <div id="labelColorHolder clearfix">
-            <table><tr>
-            <td><div id="labelColor" class="colorbox">
-            </div></td><td><label>Master Label Color</label></td>
-            </tr></table></div>
+            <table>
+                <tr><td><div id="labelColor" class="colorbox"></div></td><td><label>Master Label Color</label></td></tr>
+            </table></div>
         </div>
             <br>
             <select id="labelcombo" onchange="labelMenuChanged()">
@@ -700,10 +699,11 @@ def test_format_emperor_html_footer_string(self):
             <label id="labelopacity" class="slidervalue"></label>
             <div id="lopacityslider" class="slider-range-max"></div>
             <div id="labelColorHolder clearfix">
-            <table><tr>
-            <td><div id="labelColor" class="colorbox">
-            </div></td><td><label>Master Label Color</label></td>
-            </tr></table></div>
+            <table>
+                <tr><td><div id="labelColor" class="colorbox"></div></td><td><label>Master Label Color</label></td></tr>
+            <tr><td><div id="taxalabelcolor" class="colorbox"></div></td><td><label>Taxa Label Color</label></td></tr>
+
+            </table></div>
         </div>
             <br>
             <select id="labelcombo" onchange="labelMenuChanged()">
@@ -858,10 +858,9 @@ def test_format_emperor_html_footer_string(self):
             <label id="labelopacity" class="slidervalue"></label>
             <div id="lopacityslider" class="slider-range-max"></div>
             <div id="labelColorHolder clearfix">
-            <table><tr>
-            <td><div id="labelColor" class="colorbox">
-            </div></td><td><label>Master Label Color</label></td>
-            </tr></table></div>
+            <table>
+                <tr><td><div id="labelColor" class="colorbox"></div></td><td><label>Master Label Color</label></td></tr>
+            </table></div>
         </div>
             <br>
             <select id="labelcombo" onchange="labelMenuChanged()">
@@ -1015,10 +1014,9 @@ def test_format_emperor_html_footer_string(self):
             <label id="labelopacity" class="slidervalue"></label>
             <div id="lopacityslider" class="slider-range-max"></div>
             <div id="labelColorHolder clearfix">
-            <table><tr>
-            <td><div id="labelColor" class="colorbox">
-            </div></td><td><label>Master Label Color</label></td>
-            </tr></table></div>
+            <table>
+                <tr><td><div id="labelColor" class="colorbox"></div></td><td><label>Master Label Color</label></td></tr>
+            </table></div>
         </div>
             <br>
             <select id="labelcombo" onchange="labelMenuChanged()">
@@ -1176,10 +1174,9 @@ def test_format_emperor_html_footer_string(self):
             <label id="labelopacity" class="slidervalue"></label>
             <div id="lopacityslider" class="slider-range-max"></div>
             <div id="labelColorHolder clearfix">
-            <table><tr>
-            <td><div id="labelColor" class="colorbox">
-            </div></td><td><label>Master Label Color</label></td>
-            </tr></table></div>
+            <table>
+                <tr><td><div id="labelColor" class="colorbox"></div></td><td><label>Master Label Color</label></td></tr>
+            </table></div>
         </div>
             <br>
             <select id="labelcombo" onchange="labelMenuChanged()">