[E & A] Implement layer info modal

[hanbyul-here]

Implementation ticket of

• https://github.com/NASA-IMPACT/veda-ui/issues/811

Refinement needed

• Clarification on the timeline needed
• The details of the design can be changed. Check the Figma link to see the latest design.

Acceptance Criteria

• [x] Offer a way for editors to add a layer info through MDX file
• [x] Add layer info icon to trigger layer info modal
• [x] Display of layer info modal

[faustoperez]

This ticket should link to #811 and implement the designs below:

Link to Figma file 👉 https://www.figma.com/file/9INQauBWhiRxvOWDGhRrxO/US-GHG-Center?type=design&node-id=821%3A1763&mode=design&t=7ar7IlCwHjYGLLbQ-1

[hanbyul-here]

I got some questions while working on this 🤚

• Can the description under the title be templated from the data below? or is it something editorial that a human needs to write?
• The design includes a link for the Data Latency section. So the expectation for these strings is HTML?

@j08lue @faustoperez

[j08lue]

Can the description under the title be templated from the data below?

I would make that subtitle manually curated for now until we have a more structured, schema-checked list of metadata that we are sure will always be present, so we can build robust templates later.

Manual now, templated later.

The design includes a link for the Data Latency section. So the expectation for these strings is HTML?

I think Markdown would be great, also when we eventually get this information - and more - from STAC. Planetary Computer is storing Markdown in STAC to render e.g. the long-text dataset descriptions. See for example Landsat-2:

"description": "Landsat Collection 2 Level-2 [Science Products](https://www.usgs.gov/landsat-missions/landsat-collection-2-level-2-science-products), consisting of atmospherically corrected [surface reflectance](https://www.usgs.gov/landsat-missions/landsat-collection-2-surface-reflectance) and [surface temperature](https://www.usgs.gov/landsat-missions/landsat-collection-2-surface-temperature) image data. Collection 2 Level-2 Science Products are available from August 22, 1982 to present.\n\nThis dataset represents the global archive of Level-2 data from [Landsat Collection 2](https://www.usgs.gov/core-science-systems/nli/landsat/landsat-collection-2) acquired by the [Thematic Mapper](https://landsat.gsfc.nasa.gov/thematic-mapper/) onboard Landsat 4 and 5, the [Enhanced Thematic Mapper](https://landsat.gsfc.nasa.gov/the-enhanced-thematic-mapper-plus-etm/) onboard Landsat 7, and the [Operatational Land Imager](https://landsat.gsfc.nasa.gov/satellites/landsat-8/spacecraft-instruments/operational-land-imager/) and [Thermal Infrared Sensor](https://landsat.gsfc.nasa.gov/satellites/landsat-8/spacecraft-instruments/thermal-infrared-sensor/) onboard Landsat 8 and 9. Images are stored in [cloud-optimized GeoTIFF](https://www.cogeo.org/) format.\n",

(rendered in data catalog)

[hanbyul-here]

One more question: Where would 'Learn more' take a user to? Should this be another attribute? or is this a link to the dataset catalog page?

[j08lue]

or is this a link to the dataset catalog page?

That, yes.

[faustoperez]

@hanbyul-here

Can the description under the title be templated from the data below? or is it something editorial that a human needs to write? The design includes a link for the Data Latency section. So the expectation for these strings is HTML?

The sample content for this design is taken from the layer overview page here 👉 https://earth.gov/ghgcenter/data-catalog/odiac-ffco2-monthgrid-v2022

This includes the header description and tags, and the bullet list for the dataset attributes (including the external link). We should standardize this info so it doesn't have to be manually entered in two different places. Hope this helps!

As Jonas said, "Learn more" takes the user to the data catalog page.

[hanbyul-here]

Closed via https://github.com/NASA-IMPACT/veda-ui/commit/24a06b30d9b04097493ffebceb2138194d04a1dd