Skip to content

[WIP] select min/max of color gradient #521

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

Open
kwcantrell wants to merge 22 commits into
base: master
Choose a base branch
from
Open

[WIP] select min/max of color gradient #521

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
f2c0cc2
added ability to select min/max of color gradient
kwcantrell May 29, 2021
045a2a5
remove commented code
kwcantrell May 29, 2021
eedede2
Fix ColorOptionsHandler typo
kwcantrell May 29, 2021
29ab14b
fixed style
kwcantrell May 29, 2021
10ddf8c
Merge branch 'master' of https://github.com/biocore/empress into cent…
kwcantrell Jun 6, 2021
fac0812
fixed make-dev-page
kwcantrell Jun 6, 2021
b705358
fixed js test
kwcantrell Jun 6, 2021
c536595
Apply suggestions from code review
kwcantrell Jun 14, 2021
521de84
Merge branch 'master' of https://github.com/biocore/empress into cent…
kwcantrell Jun 16, 2021
c11e7cd
addressed inital comments
kwcantrell Jun 16, 2021
28230e5
resolved merge conflicts
kwcantrell Feb 9, 2022
89ea338
DOC: adjust handler ID, flesh out a comment
fedarko May 20, 2022
70668f2
BUG: Add back null check in parseAndValidateNum()
fedarko May 20, 2022
11d0402
DOC: min -> Minimum, etc in two toasts
fedarko May 20, 2022
adb55c7
ENH: tidy up barplot coloring error handling
fedarko May 20, 2022
2445743
STY: Run prettier on everything
fedarko May 20, 2022
2493252
STY: okay never mind let's use prettier 2.0.5
fedarko May 20, 2022
097eae7
DOC/TST: tidy up, test, and add sanity checking
fedarko May 20, 2022
f89b0fd
BUG: fix the side panel handler being broken w/ fm
fedarko May 20, 2022
2799928
STY/TST: prettify; fix a test
fedarko May 20, 2022
cd5ff7a
Merge branch 'master' of https://github.com/biocore/empress into pr52…
fedarko May 31, 2022
85bc898
Merge branch 'center-colormaps' of https://github.com/kwcantrell/empr…
fedarko May 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 37 additions & 119 deletions empress/support_files/js/barplot-layer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ define([
"spectrum",
"Colorer",
"Legend",
"ColorOptionsHandler",
"util",
], function ($, _, spectrum, Colorer, Legend, util) {
], function ($, _, spectrum, Colorer, Legend, ColorOptionsHandler, util) {
/**
*
* @class BarplotLayer
Expand Down Expand Up @@ -96,6 +97,9 @@ define([
this.colorByFMColorMap = null;
this.colorByFMColorReverse = false;
this.colorByFMContinuous = false;
this.colorByFMContinuousScale = false;
Comment thread
kwcantrell marked this conversation as resolved.
Outdated
this.colorByFMContinuousMin = null;
this.colorByFMContinuousMax = null;
this.colorByFMColorMapDiscrete = true;
this.defaultLength = BarplotLayer.DEFAULT_LENGTH;
this.scaleLengthByFM = false;
Expand Down Expand Up @@ -295,79 +299,28 @@ define([
colorDetailsDiv.classList.add("indented");
colorDetailsDiv.classList.add("hidden");

// Add a row for choosing the color map
var colormapP = colorDetailsDiv.appendChild(
document.createElement("p")
var fColorOptions = new ColorOptionsHandler(
colorDetailsDiv,
(enableContinuousColoring = true)
);
var colormapLbl = colormapP.appendChild(
document.createElement("label")
);
colormapLbl.innerText = "Color Map";
var colormapSC = colormapP.appendChild(document.createElement("label"));
colormapSC.classList.add("select-container");
var colormapSelector = document.createElement("select");
Colorer.addColorsToSelect(colormapSelector);
colormapSC.appendChild(colormapSelector);
colormapSelector.id =
"barplot-layer-" + this.uniqueNum + "-fm-colormap";
colormapLbl.setAttribute("for", colormapSelector.id);

// Add a row for choosing whether the color scale should
// be reversed
var reverseColormapP = colorDetailsDiv.appendChild(
document.createElement("p")
);
var reverseColormapLbl = reverseColormapP.appendChild(
document.createElement("label")
);
reverseColormapLbl.innerText = "Reverse Color Map";
var reverseColormapCheckbox = reverseColormapP.appendChild(
document.createElement("input")
);
reverseColormapCheckbox.id =
"barplot-layer-" + this.uniqueNum + "-fmcolor-reverse-chk";
reverseColormapCheckbox.setAttribute("type", "checkbox");
reverseColormapCheckbox.classList.add("empress-input");
reverseColormapLbl.setAttribute("for", reverseColormapCheckbox.id);

// Add a row for choosing the scale type (i.e. whether to use
// continuous coloring or not)
// This mimics Emperor's "Continuous values" checkbox
var continuousValP = colorDetailsDiv.appendChild(
document.createElement("p")
);
var continuousValLbl = continuousValP.appendChild(
document.createElement("label")
);
continuousValLbl.innerText = "Continuous values?";
var continuousValCheckbox = continuousValP.appendChild(
document.createElement("input")
);
continuousValCheckbox.id =
"barplot-layer-" + this.uniqueNum + "-fmcolor-continuous-chk";
continuousValCheckbox.setAttribute("type", "checkbox");
continuousValCheckbox.classList.add("empress-input");
continuousValLbl.setAttribute("for", continuousValCheckbox.id);
// Hide the "Continuous values?" stuff by default, since the default
// colormap is discrete
continuousValP.classList.add("hidden");

// Initialize defaults to match the UI defaults (e.g. the default
// feature metadata field for coloring is the first in the selector)
var colorOptions = fColorOptions.getOptions();
this.colorByFMField = chgColorFMFieldSelector.value;
this.colorByFMColorMap = colormapSelector.value;
this.colorByFMColorReverse = reverseColormapCheckbox.checked;
this.colorByFMColorMap = colorOptions.color;
this.colorByFMColorReverse = colorOptions.reverse;
// Alter visibility of the color-changing details when the "Color
// by..." checkbox is clicked
$(chgColorCheckbox).change(function () {
colorOptions = fColorOptions.getOptions();
if (chgColorCheckbox.checked) {
colorDetailsDiv.classList.remove("hidden");
chgColorFMFieldSelector.disabled = false;
scope.colorByFM = true;
scope.colorByFMField = chgColorFMFieldSelector.value;
scope.colorByFMColorMap = colormapSelector.value;
scope.colorByFMColorReverse = reverseColormapCheckbox.checked;
scope.colorByFMContinuous = continuousValCheckbox.checked;
scope.colorByFMColorMap = colorOptions.color;
scope.colorByFMColorReverse = colorOptions.reverse;
// Hide the default color row (since default colors
// aren't used when f.m. coloring is enabled)
dfltColorP.classList.add("hidden");
Expand All @@ -386,24 +339,18 @@ define([
$(chgColorFMFieldSelector).change(function () {
scope.colorByFMField = chgColorFMFieldSelector.value;
});
$(colormapSelector).change(function () {
scope.colorByFMColorMap = colormapSelector.value;
// Hide the "Continuous values?" row based on the selected
// colormap's type. This matches how Emperor's ColorViewController
// hides/shows its "Continuous values" elements.
if (Colorer.isColorMapDiscrete(scope.colorByFMColorMap)) {
continuousValP.classList.add("hidden");
scope.colorByFMColorMapDiscrete = true;
} else {
continuousValP.classList.remove("hidden");
scope.colorByFMColorMapDiscrete = false;
}
});
$(reverseColormapCheckbox).change(function () {
scope.colorByFMColorReverse = reverseColormapCheckbox.checked;
});
$(continuousValCheckbox).change(function () {
scope.colorByFMContinuous = continuousValCheckbox.checked;

// register color options
fColorOptions.registerObserver({
colorOptionsUpdate: function (options) {
scope.colorByFMColorMap = options.color;
scope.colorByFMColorReverse = options.reverse;
scope.colorByFMColorMapDiscrete = !options.continuousColoring;
scope.colorByFMContinuous = options.continuousColoring;
scope.colorByFMContinuousScale = options.continuousScale;
scope.colorByFMContinuousMin = options.min;
scope.colorByFMContinuousMax = options.max;
},
});

// create default length settings
Expand Down Expand Up @@ -561,39 +508,7 @@ define([
chgFieldLbl.setAttribute("for", chgFieldSMFieldSelector.id);
chgFieldSC.appendChild(chgFieldSMFieldSelector);

// Add a row for choosing the color map
var colormapP = this.smDiv.appendChild(document.createElement("p"));
var colormapLbl = colormapP.appendChild(
document.createElement("label")
);
colormapLbl.innerText = "Color Map";
var colormapSC = colormapP.appendChild(document.createElement("label"));
colormapSC.classList.add("select-container");
var colormapSelector = document.createElement("select");
Colorer.addColorsToSelect(colormapSelector);
colormapSC.appendChild(colormapSelector);
colormapSelector.id =
"barplot-layer-" + this.uniqueNum + "-sm-colormap";
colormapLbl.setAttribute("for", colormapSelector.id);

// Add a row for choosing whether the color scale should
// be reversed
var reverseColormapP = this.smDiv.appendChild(
document.createElement("p")
);
var reverseColormapLbl = reverseColormapP.appendChild(
document.createElement("label")
);
reverseColormapLbl.innerText = "Reverse Color Map";
var reverseColormapCheckbox = reverseColormapP.appendChild(
document.createElement("input")
);
reverseColormapCheckbox.id =
"barplot-layer-" + this.uniqueNum + "-smcolor-reverse-chk";
reverseColormapCheckbox.setAttribute("type", "checkbox");
reverseColormapCheckbox.classList.add("empress-input");
reverseColormapLbl.setAttribute("for", reverseColormapCheckbox.id);

var sColorOptions = new ColorOptionsHandler(this.smDiv);
var lenP = this.smDiv.appendChild(document.createElement("p"));
var lenLbl = lenP.appendChild(document.createElement("label"));
lenLbl.innerText = "Length";
Expand All @@ -606,18 +521,21 @@ define([
lenLbl.setAttribute("for", lenInput.id);

// TODO initialize defaults more sanely
var options = sColorOptions.getOptions();
this.colorBySMField = chgFieldSMFieldSelector.value;
this.colorBySMColorMap = colormapSelector.value;
this.colorBySMColorReverse = reverseColormapCheckbox.checked;
this.colorBySMColorMap = options.color;
this.colorBySMColorReverse = options.reverse;
$(chgFieldSMFieldSelector).change(function () {
scope.colorBySMField = chgFieldSMFieldSelector.value;
});
$(colormapSelector).change(function () {
scope.colorBySMColorMap = colormapSelector.value;
});
$(reverseColormapCheckbox).change(function () {
scope.colorBySMColorReverse = reverseColormapCheckbox.checked;
sColorOptions.registerObserver({
colorOptionsUpdate: () => {
options = sColorOptions.getOptions();
scope.colorBySMColorMap = options.color;
scope.colorBySMColorReverse = options.reverse;
},
});

$(lenInput).change(function () {
scope.lengthSM = util.parseAndValidateNum(
lenInput,
Expand Down
Loading