From a8dd3f88d2f2a52bd96f9a1c046268e7303ca6fb Mon Sep 17 00:00:00 2001 From: Marcus Fedarko Date: Mon, 21 Sep 2020 20:02:52 -0700 Subject: [PATCH] ENH: Add UI of barplot border options;fix CSS #350 there was some extra v-space when barplots were available due to layout but 'draw barplots' was unchecked; this was because a

was not hidden (although the one button inside it was). This discrepancy has since been fixed. --- .../support_files/js/barplot-panel-handler.js | 88 +++++++++++++++++-- .../support_files/templates/side-panel.html | 26 +++++- 2 files changed, 105 insertions(+), 9 deletions(-) diff --git a/empress/support_files/js/barplot-panel-handler.js b/empress/support_files/js/barplot-panel-handler.js index c81369284..d9a4572c1 100644 --- a/empress/support_files/js/barplot-panel-handler.js +++ b/empress/support_files/js/barplot-panel-handler.js @@ -1,8 +1,11 @@ -define(["underscore", "BarplotLayer", "Colorer"], function ( - _, - BarplotLayer, - Colorer -) { +define([ + "jquery", + "underscore", + "spectrum", + "BarplotLayer", + "Colorer", + "util", +], function ($, _, spectrum, BarplotLayer, Colorer, util) { /** * * @class BarplotPanel @@ -35,16 +38,40 @@ define(["underscore", "BarplotLayer", "Colorer"], function ( this.smCols = this.empress.getSampleCategories(); // References to various DOM elements + + // Toggles the visibility of the barplot UI this.barplotCheckbox = document.getElementById("barplot-chk"); + + // Controls for adding additional layers this.addOptions = document.getElementById("barplot-add-options"); this.addButton = document.getElementById("barplot-add-btn"); + + // Controls for re-drawing barplots + this.updateOptions = document.getElementById("barplot-update-options"); this.updateButton = document.getElementById("barplot-update"); + + // Controls for adjusting the barplot borders + this.borderContent = document.getElementById("barplot-border-content"); + this.borderCheckbox = document.getElementById("barplot-border-chk"); + this.borderOptions = document.getElementById("barplot-border-options"); + this.borderColorPicker = document.getElementById( + "barplot-border-color" + ); + this.borderLengthInput = document.getElementById( + "barplot-border-length" + ); + + // Contains the UI of each of the barplot layers this.layerContainer = document.getElementById( "barplot-layer-container" ); + + // Shown when the current layout supports barplots this.availContent = document.getElementById( "barplot-available-content" ); + + // Shown when the current layout does not support barplots this.unavailContent = document.getElementById( "barplot-unavailable-content" ); @@ -77,21 +104,33 @@ define(["underscore", "BarplotLayer", "Colorer"], function ( this.barplotCheckbox.onclick = function () { if (scope.barplotCheckbox.checked) { scope.layerContainer.classList.remove("hidden"); + scope.borderContent.classList.remove("hidden"); scope.addOptions.classList.remove("hidden"); - scope.updateButton.classList.remove("hidden"); + scope.updateOptions.classList.remove("hidden"); scope.enabled = true; // We don't immediately draw barplots: see // https://github.com/biocore/empress/issues/343. The user has // to click "Update" first. } else { scope.layerContainer.classList.add("hidden"); + scope.borderContent.classList.add("hidden"); scope.addOptions.classList.add("hidden"); - scope.updateButton.classList.add("hidden"); + scope.updateOptions.classList.add("hidden"); scope.enabled = false; scope.empress.undrawBarplots(); } }; + // When the "Add a border around barplot layers?" checkbox is checked, + // toggle the visibility of the border options + this.borderCheckbox.onclick = function () { + if (scope.borderCheckbox.checked) { + scope.borderOptions.classList.remove("hidden"); + } else { + scope.borderOptions.classList.add("hidden"); + } + }; + // Define behavior for adding a new layer this.addButton.onclick = function () { scope.addLayer(); @@ -102,6 +141,14 @@ define(["underscore", "BarplotLayer", "Colorer"], function ( scope.empress.drawBarplots(scope.layers); }; + // Borders (when enabled) default to white + this.borderColor = "#ffffff"; + // ... and to having a length of whatever the default barplot layer + // length divided by 2 is :) + this.borderLength = BarplotLayer.DEFAULT_LENGTH / 2; + // Now, initialize the border options UI accordingly + this.initBorderOptions(); + // To get things started off with, let's add a layer this.addLayer(); } @@ -198,6 +245,33 @@ define(["underscore", "BarplotLayer", "Colorer"], function ( this.unavailContent.classList.add("hidden"); }; + /** + * Initializes the border options. + * + * This mostly includes setting up the color picker and adding a reasonable + * default / minimum to the length input (to mimic the sort of properties + * added to the barplot layer length inputs). + */ + BarplotPanel.prototype.initBorderOptions = function () { + var scope = this; + + $(this.borderColorPicker).spectrum({ + color: scope.borderColor, + change: function (newColor) { + scope.borderColor = Colorer.hex2RGB(newColor.toHexString()); + }, + }); + + this.borderLengthInput.setAttribute("min", BarplotLayer.MIN_LENGTH); + this.borderLengthInput.value = this.borderLength; + $(this.borderLengthInput).change(function () { + scope.borderLength = util.parseAndValidateNum( + scope.borderLengthInput, + BarplotLayer.MIN_LENGTH + ); + }); + }; + /** * Array containing the names of layouts compatible with barplots. */ diff --git a/empress/support_files/templates/side-panel.html b/empress/support_files/templates/side-panel.html index 87ec1a5c7..8afcfbe72 100644 --- a/empress/support_files/templates/side-panel.html +++ b/empress/support_files/templates/side-panel.html @@ -139,12 +139,34 @@

+ -

- +