Skip to content
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.

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

Support exporting all barplot legends, including color gradient and length legends; export collapsed clade shapes and barplots #392

Merged
merged 62 commits into from
Nov 5, 2020

Conversation

fedarko
Copy link
Collaborator

@fedarko fedarko commented Sep 24, 2020

Part of the work on #303.

Closes #421.

Required some substantial refactoring to the way gradient SVGs are stored in Empress, in order to make it easier to scale these differently within a legend.

Also as part of this PR, slightly changed the way numbers are formatted in the Tree Statistics (so now commas are used as thousands separators [at least for English locales], etc.)

TODOs:

  • Add more vertical padding at the end of gradient and length legends (currently the text is flush with the surrounding border, which looks a bit too close for comfort)
  • Show a warning (for both gradient and length legends [Add warning to length legends if missing / non-numeric values #391]) if there are missing / non-numeric values in the field. Currently this warning (which is already shown for gradient legends in the interface) is not included.
  • Refactor legend exporting code so that there isn't a notion of "rows" any more, so each legend can arbitrarily increase its vertical space without messing up other legends (all that should be kept track of are the height and width of each legend).
  • Unbreak tests (the colorer and legend tests, and maybe more, are extremely broken by these changes)

Also added a newline after </style>
-Use "long form" font specification for the style SVG (fixes problems
 with GIMP and Inkscape)
-Put the style code higher up in the output legend SVG -- has the
 effect of applying the rect stroke to the topmost legend rect, which
 was a problem in Inkscape but not in chromium (:thonk:)
-Add note about GIMP choking on dominant-baseline (tldr not worth
 worrying abt now i think)
(the text styles are now across multiple lines)
similar to what we do for categorical export
make life less painful (tm)
Now, things are split up into a "Solo" and "HTML" SVG -- the gradient
shown on the page is a combo of these, and the one we export is just
the Solo one. This makes scaling it properly for the export SO MUCH
EASIER AHH

All we gotta do now is just add in value text and update rowsUsed /
maxLineWidth. think that should be good?

oh also this is gonna explode the tests ofc. that is a job for TOMORROW
MARCUS (tm)
IT WORKS SO WELL AOGIHDSOIGHJ

something worth noting: there seems to be some unaccounted-for
horizontal padding on the right side in the cat legend export.
i matched it in the continuous legend export b/c it looks nice but
worth looking into...?
it looks like things are the opposite from how i thought -- looks like
the perceived extra space was just due to the boldfont used in
estimating the texts (when you make the text bold it's almost snug
with the border on the right side). may as well add the same padding
as for the continuous legends so things look consistent ish.

Still, this leaves it kinda unclear as to why continuous legends were
so comparatively snug with the border until i added padding ... maybe
boldface numbers are just not that bigger? idk

UPDATE: yeah i checked it and bold numbers are basically the same size
but bold letters are much larger. mystery solved 💯
looks not great (gotta align max and min headers like in table)
but good enough tm
Actually not that bad. wack.
@fedarko fedarko changed the title [WIP] Support exporting all barplot legends, including color gradient and length legends [WIP] Support exporting all barplot legends, including color gradient and length legends; export collapsed clade shapes Oct 8, 2020
@fedarko fedarko changed the title [WIP] Support exporting all barplot legends, including color gradient and length legends; export collapsed clade shapes [WIP] Support exporting all barplot legends, including color gradient and length legends; export collapsed clade shapes and barplots Oct 9, 2020
shoutouts to https://stackoverflow.com/a/53309814/10730311.

this is very easy to configure (just a line in the svg header),
so if users prefer different things we can document this.
export is broken (height is somehow nan?) but at least this works now
@emperor-helper
Copy link

The following artifacts were built for this PR: empire-biplot.qzv, empire.qzv, empress-tree.qzv, just-fm.qzv, plain.qzv

At least for cat legends -- no longer do we have to worry about
rows and units and all that. each legend just returns its width and
height, and that's all we care about.
@fedarko
Copy link
Collaborator Author

fedarko commented Oct 15, 2020

These changes are not very well covered by tests, but as a initial version that supports exporting I think this may be ok.

GIF showing how this looks --

combo

@fedarko fedarko marked this pull request as ready for review October 15, 2020 08:22
@fedarko fedarko changed the title [WIP] Support exporting all barplot legends, including color gradient and length legends; export collapsed clade shapes and barplots Support exporting all barplot legends, including color gradient and length legends; export collapsed clade shapes and barplots Oct 15, 2020
@ElDeveloper
Copy link
Member

That is looking super cool!

Copy link
Collaborator

@kwcantrell kwcantrell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @fedarko! I just have a couple of comments.

empress/support_files/js/empress.js Outdated Show resolved Hide resolved
empress/support_files/js/export-util.js Outdated Show resolved Hide resolved
empress/support_files/js/export-util.js Outdated Show resolved Hide resolved
empress/support_files/js/legend.js Show resolved Hide resolved
addresses @kwcantrell comment. Required breaking up the barplot
drawing stuff into a separate function that returns the coords
tldr gotta reverse the stop colors. reason this worked _before_ was
that it was accessing the interpolator to build up the stop colors
@fedarko
Copy link
Collaborator Author

fedarko commented Oct 27, 2020

Thanks for the feedback @kwcantrell! I think all of your comments should be addressed now.

I also realized that this PR introduced a bug where gradient legends (when the color reversing was selected) weren't getting reversed -- this was due to an error in how this PR used the chroma.js .colors() method. The problem should be fixed and tested now.

Copy link
Collaborator

@kwcantrell kwcantrell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, I just have a few (minor) comments.

empress/support_files/js/colorer.js Outdated Show resolved Hide resolved
*
* @returns {Object} Contains three entries:
* -coords: An array of coordinate data, in the format
* [x, y, r, g, b, ...] (TODO FOR SELF: Update this when
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe the only thing that will need to change in empress.js is this doc string.

empress/support_files/js/export-util.js Outdated Show resolved Hide resolved
empress/support_files/js/export-util.js Outdated Show resolved Hide resolved
empress/support_files/js/export-util.js Outdated Show resolved Hide resolved
@kwcantrell
Copy link
Collaborator

thanks @fedarko and @ElDeveloper

@kwcantrell kwcantrell merged commit 13438f9 into biocore:master Nov 5, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Gradient SVGs are slightly inaccurate
4 participants