biocore / biocore/empress

Fix resizing in main legend when coloring tree by feature metadata gradient with non-numeric warning message

Open
#515 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug good first issue nice to have
Dominant language
JavaScript
Stars
56
Forks
32
PR merge metrics
No merged PRs in 30d

Description

Opening a new issue since we are deferring this from #484.

----

> A less important problem, but one that may annoy users. Currently, resizing the main legend CSS when a gradient is shown breaks things:
>
> ![arghcss](https://user-images.githubusercontent.com/4177727/116769330-23097680-a9f0-11eb-89f3-abd9351df1a4.gif)
>
> This isn't a problem for the barplot legend gradients since those aren't resizable, unlike the main legend.
>
> There are probably multiple good ways of handling this (I just spent some time looking into this). For example, we could prevent resizing the legend CSS, but that will be inconvenient when the default size of the legend is big (e.g. when coloring by Level 7 or something).
>
> For now, one easy solution might be setting [the height of the legend SVG here](https://github.com/biocore/empress/blob/5b8a340bbff046f9d1d7f992248db87224b13c7a/empress/support_files/js/legend.js#L182) to a constant height, e.g. `15em` (matching the `barplot-layer-legend` class), instead of `100%`. This should only be done for the main legend and not for the barplot layer legends -- doing it for those will mess up the formatting and make the default size of the SVGs too large -- so we would need to add a conditional to the Legend JS that checks if this is for the main legend or a barplot layer (this would overlap with the discussion above about making the Legend class aware of if it's used for the main legend or for barplots).
>
> This isn't _urgent_ (I'd be ok merging this PR in without addressing this), so if you'd like to delay it to later that's ok.
>
> _Originally posted by @fedarko in https://github.com/biocore/empress/pull/484#discussion_r624398291_
-----
> I vote to hold this off. I'd like to get this PR merged in ASAP so we can do a new release.
>
> _Originally posted by @kwcantrell in https://github.com/biocore/empress/pull/484#discussion_r626181648_

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading support_files/js/legend.js around line 182 and trace how the Legend is used for the main legend versus barplot-layer legends. Reproduce resizing with a feature-metadata gradient, then verify that the main legend remains correctly sized while barplot legend formatting is unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.