feat: embed mode for e&a

[ram-sharan25]

This PR introduces an &embed=true URL parameter that transforms the standard exploration view into a minimal, simplified dashboard optimized for embedding in an <iframe>. This view removes standard E&A (Explore and Analyze) components, focusing only on essential visualization elements: the map/visualization layer, the legend, and a date/time-change component. This significantly reduces visual clutter and load time for external embeds.

Uses:

• MapBlock for single-layer viewing as well as comparison of two datasets.
• TimelineDatePicker for the calendar.

Other features added:

• zoom to a particular area on the map (using zoom and center url params)
• comparison slider with two different sliders
• calendar selection in embed mode

To test:
Currently, there is no interface to create the embedding link. You can add a layer you want to embed (or also can compare two datasets) edit the url by adding &embed=true at the end of the url in the search bar. At last, reload to see the preview.

• View single Data:
  • Select a dataset in the exploration mode
  • Edit the link by adding &embed=true at the end
  • Reload
    Example:
  • e-a link: https://deploy-preview-1922--veda-ui.netlify.app/exploration?datasets=%5B%7B%22id%22%3A%22VIIRS_SNPP_DayNightBand_At_Sensor_Radiance%22%2C%22settings%22%3A%7B%22isVisible%22%3Atrue%2C%22opacity%22%3A100%2C%22analysisMetrics%22%3A%5B%7B%22id%22%3A%22mean%22%2C%22label%22%3A%22Average%22%2C%22chartLabel%22%3A%22Average%22%2C%22themeColor%22%3A%22infographicB%22%7D%2C%7B%22id%22%3A%22std%22%2C%22label%22%3A%22St+Deviation%22%2C%22chartLabel%22%3A%22St+Deviation%22%2C%22themeColor%22%3A%22infographicD%22%7D%5D%7D%7D%5D&taxonomy=%7B%7D&search=&date=2024-05-05T05%3A00%3A00.000Z
  • embed mode: https://deploy-preview-1922--veda-ui.netlify.app/exploration?datasets=%5B%7B%22id%22%3A%22VIIRS_SNPP_DayNightBand_At_Sensor_Radiance%22%2C%22settings%22%3A%7B%22isVisible%22%3Atrue%2C%22opacity%22%3A100%2C%22analysisMetrics%22%3A%5B%7B%22id%22%3A%22mean%22%2C%22label%22%3A%22Average%22%2C%22chartLabel%22%3A%22Average%22%2C%22themeColor%22%3A%22infographicB%22%7D%2C%7B%22id%22%3A%22std%22%2C%22label%22%3A%22St+Deviation%22%2C%22chartLabel%22%3A%22St+Deviation%22%2C%22themeColor%22%3A%22infographicD%22%7D%5D%7D%7D%5D&taxonomy=%7B%7D&search=&date=2024-05-05T05%3A00%3A00.000Z&embed=true
  • Data with different zoom and center: center is in the format [long,lat] and zoom is simply a number value
    https://deploy-preview-1922--veda-ui.netlify.app/exploration?datasets=%5B%7B%22id%22%3A%22VIIRS_SNPP_DayNightBand_At_Sensor_Radiance%22%2C%22settings%22%3A%7B%22isVisible%22%3Atrue%2C%22opacity%22%3A100%2C%22analysisMetrics%22%3A%5B%7B%22id%22%3A%22mean%22%2C%22label%22%3A%22Average%22%2C%22chartLabel%22%3A%22Average%22%2C%22themeColor%22%3A%22infographicB%22%7D%2C%7B%22id%22%3A%22std%22%2C%22label%22%3A%22St+Deviation%22%2C%22chartLabel%22%3A%22St+Deviation%22%2C%22themeColor%22%3A%22infographicD%22%7D%5D%7D%7D%5D&taxonomy=%7B%7D&search=&date=2025-06-27T05%3A00%3A00.000Z&embed=true&zoom=3&center=[-103.144488,40.6976312]
• Comparison Mode:
  • Select two datasets
  • Click on Add dates to compare
  • Make sure that data values exist for both the dataset layers
  • Edit the link by adding embed=true
  • Reload the tab

Example:

• e-a link:https://deploy-preview-1922--veda-ui.netlify.app/exploration?datasets=%5B%7B%22id%22%3A%22casa-gfed-co2-flux%22%2C%22settings%22%3A%7B%22isVisible%22%3Atrue%2C%22opacity%22%3A100%2C%22analysisMetrics%22%3A%5B%7B%22id%22%3A%22mean%22%2C%22label%22%3A%22Average%22%2C%22chartLabel%22%3A%22Average%22%2C%22themeColor%22%3A%22infographicB%22%7D%2C%7B%22id%22%3A%22std%22%2C%22label%22%3A%22St+Deviation%22%2C%22chartLabel%22%3A%22St+Deviation%22%2C%22themeColor%22%3A%22infographicD%22%7D%5D%2C%22colorMap%22%3A%22viridis%22%2C%22scale%22%3A%7B%22min%22%3A0%2C%22max%22%3A0.3%7D%7D%7D%2C%7B%22id%22%3A%22VIIRS_SNPP_DayNightBand_At_Sensor_Radiance%22%2C%22settings%22%3A%7B%22isVisible%22%3Atrue%2C%22opacity%22%3A100%2C%22analysisMetrics%22%3A%5B%7B%22id%22%3A%22mean%22%2C%22label%22%3A%22Average%22%2C%22chartLabel%22%3A%22Average%22%2C%22themeColor%22%3A%22infographicB%22%7D%2C%7B%22id%22%3A%22std%22%2C%22label%22%3A%22St+Deviation%22%2C%22chartLabel%22%3A%22St+Deviation%22%2C%22themeColor%22%3A%22infographicD%22%7D%5D%7D%7D%5D&taxonomy=%7B%7D&search=&date=2012-12-14T06%3A00%3A00.000Z&dateCompare=2022-07-25T05%3A00%3A00.000Z
• embed mode: https://deploy-preview-1922--veda-ui.netlify.app/exploration?datasets=%5B%7B%22id%22%3A%22casa-gfed-co2-flux%22%2C%22settings%22%3A%7B%22isVisible%22%3Atrue%2C%22opacity%22%3A100%2C%22analysisMetrics%22%3A%5B%7B%22id%22%3A%22mean%22%2C%22label%22%3A%22Average%22%2C%22chartLabel%22%3A%22Average%22%2C%22themeColor%22%3A%22infographicB%22%7D%2C%7B%22id%22%3A%22std%22%2C%22label%22%3A%22St+Deviation%22%2C%22chartLabel%22%3A%22St+Deviation%22%2C%22themeColor%22%3A%22infographicD%22%7D%5D%2C%22colorMap%22%3A%22viridis%22%2C%22scale%22%3A%7B%22min%22%3A0%2C%22max%22%3A0.3%7D%7D%7D%2C%7B%22id%22%3A%22VIIRS_SNPP_DayNightBand_At_Sensor_Radiance%22%2C%22settings%22%3A%7B%22isVisible%22%3Atrue%2C%22opacity%22%3A100%2C%22analysisMetrics%22%3A%5B%7B%22id%22%3A%22mean%22%2C%22label%22%3A%22Average%22%2C%22chartLabel%22%3A%22Average%22%2C%22themeColor%22%3A%22infographicB%22%7D%2C%7B%22id%22%3A%22std%22%2C%22label%22%3A%22St+Deviation%22%2C%22chartLabel%22%3A%22St+Deviation%22%2C%22themeColor%22%3A%22infographicD%22%7D%5D%7D%7D%5D&taxonomy=%7B%7D&search=&date=2012-12-14T06%3A00%3A00.000Z&dateCompare=2022-07-25T05%3A00%3A00.000Z&embed=true
• with different zoom and center: https://deploy-preview-1922--veda-ui.netlify.app/exploration?datasets=%5B%7B%22id%22%3A%22casa-gfed-co2-flux%22%2C%22settings%22%3A%7B%22isVisible%22%3Atrue%2C%22opacity%22%3A100%2C%22analysisMetrics%22%3A%5B%7B%22id%22%3A%22mean%22%2C%22label%22%3A%22Average%22%2C%22chartLabel%22%3A%22Average%22%2C%22themeColor%22%3A%22infographicB%22%7D%2C%7B%22id%22%3A%22std%22%2C%22label%22%3A%22St+Deviation%22%2C%22chartLabel%22%3A%22St+Deviation%22%2C%22themeColor%22%3A%22infographicD%22%7D%5D%2C%22colorMap%22%3A%22viridis%22%2C%22scale%22%3A%7B%22min%22%3A0%2C%22max%22%3A0.3%7D%7D%7D%2C%7B%22id%22%3A%22VIIRS_SNPP_DayNightBand_At_Sensor_Radiance%22%2C%22settings%22%3A%7B%22isVisible%22%3Atrue%2C%22opacity%22%3A100%2C%22analysisMetrics%22%3A%5B%7B%22id%22%3A%22mean%22%2C%22label%22%3A%22Average%22%2C%22chartLabel%22%3A%22Average%22%2C%22themeColor%22%3A%22infographicB%22%7D%2C%7B%22id%22%3A%22std%22%2C%22label%22%3A%22St+Deviation%22%2C%22chartLabel%22%3A%22St+Deviation%22%2C%22themeColor%22%3A%22infographicD%22%7D%5D%7D%7D%5D&taxonomy=%7B%7D&search=&date=2012-12-14T06%3A00%3A00.000Z&dateCompare=2022-07-25T05%3A00%3A00.000Z&embed=true&zoom=3&center=[-103.144488,40.6976312]

Todo:

• date picker
• date boundary in the ui
• zoom, center

[netlify]

✅ Deploy Preview for veda-ui ready!

Name	Link
🔨 Latest commit	fb8bedb
🔍 Latest deploy log	https://app.netlify.com/projects/veda-ui/deploys/6920e396e1ca4d00087b8fe2
😎 Deploy Preview	https://deploy-preview-1922--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 project configuration.

[aboydnw]

I like this idea! Just to check my understanding, when we say "embed mode" here, we pretty much mean "simplified version of E&A," right?

Asking because I am curious if there is anything else about this PR that makes E&A (or any map interface) easier to place in an iframe. If so, that would be useful to know about so we can implement in other places.

For the "simplified version of E&A" part, I am thinking about our MultiLaterMapBlock that we did earlier in the year. It seems to be focusing on a very similar use case.

I want to embed a straightforward map visualization onto my website so that users can simply "see the data" without worrying about all the extra capabilities that other tools have.

If so, maybe there is some work we can do on the MultiLayerMapBlock to make it more useful? Or somehow merge these efforts? Just trying to avoid having two things that serve a similar purpose.

[slesaad]

Yes, embed mode means simplified e&a.

We can't directly use MultiLayerMapBlock because it's a component that has to be put on a page to be viewable - you can't get to it via an url which is needed for iframing, which this PR adds the support for.

The feature is using the existing MapBlock component used in the stories to build out this feature and I've asked Ram to look into the MultiLayerMapBlock component to see if we can take some pointers from that too.

[ram-sharan25]

@vgeorge @dzole0311 Can you please look at this and let me know if there is anything I need to change before we can merge this ? It is time-sensitive.

[vgeorge]

@ram-sharan25 This seems to work as expected. I think we can better organize the atoms and component files related to the embed feature, but lets address on a separated PR to avoid blocking you work.

[vgeorge]

@ram-sharan25 this was merged to main and will be release in the next scheduled cycle, which is Dec 1st. Please let us know if you need to release it sooner.

[slesaad]

@vgeorge dec 1st should be good!

[Jeanne-le-Roux]

@slesaad links needed for staging:

• U.S. Gridded Anthropogenic Methane Emissions Inventory; Total Methane (annual) layer; centered on CONUS; 2020
• GRA²PES Greenhouse Gas and Air Quality Species; CO₂ Emissions layer; centered on CONUS; July 2021
• Black Marble Nighttime at Sensor Radiance; Nighttime at Sensor Radiance layer; centered on CONUS; can we just default to the latest date? If not, use Aug 18, 2025
• MiCASA Land Carbon Flux; (Monthly Mean) Net Primary Production (NPP) layer; centered on CONUS; can we just default to the latest date? If not, use Dec 2024

Still need to get list of links for stories.