Skip to content

Commit

Permalink
Automatically resize main legend when changing tree coloring (#512)
Browse files Browse the repository at this point in the history
* ENH: auto resize main legend on changing

* MNT: move legend resizing to sep func

so this'll play well w/ grad coloring
  • Loading branch information
fedarko authored May 4, 2021
1 parent 5b8a340 commit 5eb4b65
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 0 deletions.
7 changes: 7 additions & 0 deletions empress/support_files/css/empress.css
Original file line number Diff line number Diff line change
Expand Up @@ -594,13 +594,20 @@ p.side-header button:hover,

/* The legend is resizable, thanks to resize: both; and overflow: auto.
* See https://stackoverflow.com/a/61976603/10730311.
*
* The 0.1px bottom padding prevents an unnecessary vertical scrollbar
* that kept showing up when setting the legend's width/height back to
* their defaults ("") in empress.js. It seems like having a tiny bit
* of extra vertical space is needed to get rid of this. It's barely
* visible to the user so it shouldn't be a problem.
*/
#legend-main {
margin: 20px;
min-width: 150px;
max-width: 33vw;
min-height: 30px;
max-height: 85vh;
padding-bottom: 0.1px;
resize: both;
overflow: auto;
background-color: rgba(255, 255, 255, 0.5);
Expand Down
15 changes: 15 additions & 0 deletions empress/support_files/js/empress.js
Original file line number Diff line number Diff line change
Expand Up @@ -2620,6 +2620,20 @@ define([
this._legend.clear();
};

/**
* Set the #legend-main width and height back to their defaults.
*
* This allows the legend to be resized back to whatever the default
* size will be, since manually resizing the legend sets a fixed
* width/height value.
*/
Empress.prototype.resizeLegend = function () {
// Setting CSS properties to "" causes the default values to be used:
// see https://stackoverflow.com/a/21457941.
document.getElementById("legend-main").style.width = "";
document.getElementById("legend-main").style.height = "";
};

/**
* Updates the legend based on a categorical color key.
*
Expand All @@ -2633,6 +2647,7 @@ define([
* color, expressed in hex format.
*/
Empress.prototype.updateLegendCategorical = function (name, keyInfo) {
this.resizeLegend();
this._legend.addCategoricalKey(name, keyInfo);
};

Expand Down

0 comments on commit 5eb4b65

Please sign in to comment.