Review colormap legend functionality

[j08lue]

There are several open tickets regarding color map functionality and UX:

• Load colormaps from TiTiler to ensure tiles and legend agree #885
• Feature request: User can change color range in Exploration view #555
• https://github.com/US-GHG-Center/feature-requests/issues/3

Acceptance criteria

• Triaged these issues and determined whether they are related / should be handled in one bigger change or separately

[faustoperez]

Assigning this to myself, @j08lue

[aboydnw]

Related: WHIS recently enabled the changing of rescale and colormap values: https://water-health-ind.netlify.app/

[faustoperez]

WHIS recently enabled the changing of rescale and colormap values

Spoke with @danielfdsilva about the WHIS implementation:

I got the colors from the python package to use them on the app but titiler supports them
Some color ramps can be provided by d3. for the other ones I had to do it manually
the colors are here: https://github.com/developmentseed/whis-frontend/tree/main/app/utils/colormaps
they are in decimal rgb format, but they’re easy to convert to hex

I also asked on the veda-data-services slack channel. I will report back

[faustoperez]

The colormap values come from matplotlib https://matplotlib.org/stable/gallery/color/colormap_reference.html

[faustoperez]

These are the tentative designs for the colormap selection (please note this is WIP) and I have a few questions:

• How feasible is it to have a histogram to rescale the color ramps? Is there an endpoint to get that info? How performant would it be? If not, we can use a simple range slider for that functionality.
• We need a way to assign a type at the layer level so we can display the applicable colormaps: sequential, divergent. I don’t think there’s a use case for categorical datasets.
• We also need to shortlist the ramps coming from titiler/matplotlib so we have a 10-12 item list and it doesn’t overwhelm the user. How can we make that selection?

[wildintellect]

• Histogram - fast (maybe) if the summary stats are in STAC already, moderately fast if it's from 1 granule, a bit of a problem if you need it from the whole collection
• There are use cases for Categorical but not generally with sensor data, only with derived products; so maybe not in the current
• VEDA/GHG but likely in the near future MAAP instance where forest classification and Land use maps are layers (could actually also apply if someone want to apply categories like high, med, low to air pollutants or other data)
  This is always hard. Perceptual Uniform is probably the most important https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html ,

('Perceptually Uniform Sequential', [
            'viridis', 'plasma', 'inferno', 'magma', 'cividis'])

The fact that Rainbow is the top selected ramp right now might actually be a problem, and might need to be replaced with https://research.google/blog/turbo-an-improved-rainbow-colormap-for-visualization/ (called turbo in the R link above). Of course this also all depends on the default background layer used. There's a lot of prior art in this domain, but we can probably drop some of the ramps based by preferencing ramps that are better at larger value differences (i.e. greens are great because humans can differentiate a lot of greens). I'll reference back to https://colorbrewer2.org/ for helping decide which of the 1-3 color variants to pick from.

[aboydnw]

@slesaad mentioned today that there might be some work on data services to enable to selection of different color maps.

@sandrahoang686 might be worth a convo in the upcoming team sync

[aboydnw]

@faustoperez Deborah asked a question about this today

Is there a way to tell the user which colormap is preferred by the data provider?

I assume that is what would be indicated by "Default," is that correct? If so, did you consider other words, like, "Preferred" or something along those lines?

I'm a bit ambivalent on which word we use, just wanted to pass along the question and thought.

Also, might be valuable to show the state once somebody selects another option (not default) of colormap

[wildintellect]

@aboydnw yes the 'default` as defined in the STAC Render extension should be considered the Preferred by data provider.
Am I correct in assuming the tool being discussed here is for changing the color once it's already loading in a map on the website, because we could also double down and use it to help make the choice to begin with.

[aboydnw]

@wildintellect what would that look like? The default/preferred should be set by the data provider during configuration

[j08lue]

Re configuration workflow

we could also double down and use it to help make the choice to begin with

Not sure this is what you meant, @wildintellect, but I could see a very nice data configuration workflow for data providers like this:

1. Data provider stages their data in cloud storage + staging / dev STAC
2. Uses STAC Admin + a generic tile browser UI to preview the data and edit the render information until they are happy
3. Commits the desired render configuration in STAC Admin
4. Marks the dataset as ready for publication

But this is not VEDA UI material, just ideas for STAC Admin etc. development (cc @oliverroick, @ricardoduplos) - inspiration Mapbox Studio

[j08lue]

Re TiTiler upgrade:

• Plans for upgrading to TiTiler-PgSTAC 1.0? veda-backend#364 (comment)

[faustoperez]

Thanks all for the great feedback!

@wildintellect

Histogram - fast (maybe) if the summary stats are in STAC already, moderately fast if it's from 1 granule, a bit of a problem if you need it from the whole collection

We'll keep the histogram functionality out for now 👍

There are use cases for Categorical but not generally with sensor data, only with derived products; so maybe not in the current VEDA/GHG but likely in the near future MAAP instance where forest classification and Land use maps are layers

Categorical layers won't have a colormap selector and will default to the preferred colors from the data provider

The fact that Rainbow is the top selected ramp right now might actually be a problem

Totally agree. I like the suggestion of offering Turbo as a better option on the selector, but not using rainbow palettes is something that has to come from the data providers in the configuration phase.

Am I correct in assuming the tool being discussed here is for changing the color once it's already loading in a map on the website, because we could also double down and use it to help make the choice to begin with

This piece of work relates to the E&A page so the layer would already be loaded on the map. Happy to work on a tool to help data providers choose ramps during the configuration process so we can introduce better practices. This could also include the basemap selection 🤔

@aboydnw

I assume that is what would be indicated by "Default," is that correct? If so, did you consider other words, like, "Preferred" or something along those lines? I'm a bit ambivalent on which word we use, just wanted to pass along the question and thought. Also, might be valuable to show the state once somebody selects another option (not default) of colormap

The preferred colormap from the provider is at the top of the list and labeled as "Default". I will work on the designs to make it more evident, and show the state when other ramp is selected.

[j08lue]

Btw, we already have a categorical dataset in EIC and Earthdata Dashboard: GEOGLAM - https://earth.gov/data-catalog/geoglam

https://github.com/NASA-IMPACT/veda-config-eic/blob/develop/datasets/geoglam.data.mdx?plain=1#L39

[wildintellect]

• @j08lue Categorical - sounds like the decision is that users at this time can't change such layers
• @faustoperez - yes I'm suggesting we strongly discourage the use of Rainbow in the Data config options (during PR review, docs etc), and that we do not show it users in your config UI. But I think it means we also might need an upstream ticket to support Turbo in Titiler.

[faustoperez]

Thanks all for the great discussion, here are the updated designs:

Link to Figma file 👉 https://www.figma.com/design/9INQauBWhiRxvOWDGhRrxO/US-GHG-Center?node-id=1781-3165&t=0jzLPDHhTvO3k5bR-1