fix: Legend populated after enountering a datset without it

[vidhi04bhatia]

Related Ticket: #1484

Description of Changes

The current .mdx file contains a temporary fix where the legend properties are set to a transparent color to avoid issues with scrollytelling. We will update this to set legends that do not need a color swatch (e.g., categorical or graphical types) to type: text and remove unnecessary properties like stops, color, and label.

Before (Temporary Fix):

legend:
  type: categorical
  stops:
    - color: "rgba(0, 0, 0, 0)"  # using transparent for now to fix the issues with scrollytelling
      label: "Imagery"

After (Updated Configuration):

legend:
  type: text

Notes & Questions About Changes

Would it be better if we could just remove the swatch and keep the legend title instead of removing the legend all together. This would help users who are accessing the story to know what imagery they are look at on the map. Removing the legends entirely could create a sense of unknowingness with what is shown on the map. (implemented in this pull request)

Validation / Testing

1. In the .mdx file

• Find the legend configuration for any layers that were previously set as type: categorical or type: graphical.
• Update type to text for legends that do not require a color swatch.
• Remove unnecessary properties like stops, color, and label.

3. Go to https://www.earthdata.nasa.gov/dashboard/stories/blizzards or https://www.earthdata.nasa.gov/dashboard/stories/2024-tornadoes
4. Go to Scrollytelling section, and notice that the legends are populated even after we scroll through block that does not have a legend.

Note

The use case for this legend type is for satellite imagery, where we'd still want the information of what is being shown, but don't need to show colors

[netlify]

✅ Deploy Preview for veda-ui ready!

Name	Link
🔨 Latest commit	5fd6edc
🔍 Latest deploy log	https://app.netlify.com/sites/veda-ui/deploys/67f6ce52c340750008be66a9
😎 Deploy Preview	https://deploy-preview-1550--veda-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[slesaad]

can you add an example in the mock dataset, so we can validate it in the deploy preview?

[vidhi04bhatia]

An example of the new legend type text has been added and can be validated on the storytelling story: Air Quality and COVID-19.

Below is a screenshot of the storytelling chapters. When navigating from the chapter "Like Flipping a Switch: Lockdowns and NO2" to "Seasonal Changes in NO2", you can observe the changes made to display only the title for the legend of type: text.

[slesaad]

Looks good to me. But would be nice to also be reviewed by @hanbyul-here or someone from the ui team.

[AliceR]

Hi @vidhi04bhatia - Thank you for improving the legend! I agree with you that it makes sense to keep the legend to display a title for those satellite layers. It surely does look better than having the transparent rgba(0, 0, 0, 0) bar in those cases.
I tried the new category with a couple of stories in veda-config and it all looks good to me!