Improve STAC Browser experience

j08lue commented 1 month ago

Description

When you load our STAC into STAC Browser, the experience is pretty bare-bones.

Example

Planetary Computer shows how it can be done:

Microsoft Planetary Computer	VEDA Earthdata Dashboard

PI Objective

24.3 Objective 2: Publish STAC metadata into Production VEDA

Acceptance criteria

To catch up, we would need:

[x] Rendered asset thumbnails https://github.com/NASA-IMPACT/veda-architecture/issues/309
[x] More complete and consistent metadata https://github.com/NASA-IMPACT/veda-architecture/issues/335
[x] Set up s3 bucket and permissions for thumbnails
[x] Nicer title and description https://github.com/NASA-IMPACT/veda-data/issues/123

smohiudd commented 1 month ago

@anayeaye we talked about thumbnails before and setting a public bucket that can serve thumbnail image files. Can we do that in MCP?

anayeaye commented 1 month ago

@smohiudd I'll give that a try today. It would be a nice to add the pngs from veda-config to our STAC collections as thumbnail assets to get this rolling

anayeaye commented 1 month ago

Also I'm curious what PC is doing here for their public assets https://planetarycomputer.microsoft.com/api/stac/v1/collections/io-lulc-9-class

"assets": {
"thumbnail": {
"href": "https://ai4edatasetspublicassets.blob.core.windows.net/assets/pc_thumbnails/io-lulc-9-class.png",
"title": "10m Annual Land Use Land Cover (9-class)",
"media_type": "image/png"
},

anayeaye commented 1 month ago

@smohiudd @amarouane-ABDELHAK I published a temporary collection to test.openveda.cloud with a thumbnail asset in the collection. The collection, s3 object, and distribution get policy are not a working solution but I think we can use the collection and object to test out an edge or cloudfront function.

Published test collection: A Thumbnail Test in https://test.openveda.cloud/?.language=en (https://test.openveda.cloud/api/stac/collections/to-delete)

The collection has this thumbnail asset

  "assets": {
    "thumbnail": {
      "href": "s3://veda-thumbnails/hls-events-ej--dataset-cover.png",
      "type": "image/png"
    }
  },

This bucket is in MCP and is protected. I started a permissions policy that includes this git object action for the CF distribution

"Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::veda-test-stac-browser/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::the-test-dist-id"
                }
            }

smohiudd commented 1 month ago

Thanks @anayeaye for getting this started!

anayeaye commented 1 month ago

We are doing some automation testing in mcp-test so here is the test collection with thumbnail asset for us to add when working on exposing thumbnails in s3 via cloudfront (if we need to recreate it).

collection.json

```json { "id": "to-delete", "type": "Collection", "links": [], "title": "A Thumbnail Test", "assets": { "thumbnail": { "href": "s3://veda-thumbnails/hls-events-ej--dataset-cover.png", "type": "image/png" } }, "extent": { "spatial": { "bbox": [ [ -90.932637, 17.961538, -65.110098, 30.71627 ] ] }, "temporal": { "interval": [ [ "2017-06-06T14:43:41.335694+00:00", "2021-10-21T16:32:32.165563+00:00" ] ] } }, "license": "MIT", "providers": [ { "url": "https://lpdaac.usgs.gov/product_search/", "name": "USGS", "roles": [ "producer" ] }, { "url": "https://www.earthdata.nasa.gov/dashboard/", "name": "NASA VEDA", "roles": [ "host" ] }, { "url": "https://www.earthdata.nasa.gov/dashboard/", "name": "NASA VEDA", "roles": [ "processor" ] } ], "summaries": { "datetime": [ "2017-06-06T14:43:41Z", "2017-06-22T14:43:47Z", "2017-07-24T14:43:56Z", "2017-08-09T14:44:03Z", "2017-08-25T14:44:07Z", "2017-09-26T14:44:14Z", "2017-10-12T14:44:19Z", "2017-10-28T14:44:20Z", "2017-11-13T14:44:17Z", "2017-11-29T14:44:11Z", "2021-07-01T16:31:59Z", "2021-07-17T16:32:01Z", "2021-08-18T16:32:15Z", "2021-09-03T16:32:20Z", "2021-09-19T16:32:23Z", "2021-10-05T16:32:29Z", "2021-10-21T16:32:32Z" ] }, "description": "A subset of HLS L30 data to support visualization of specific events. Read more about the source data on the NASA CMR Landing page: https://cmr.earthdata.nasa.gov/search/concepts/C2021957295-LPCLOUD.html", "item_assets": {}, "stac_version": "1.0.0", "stac_extensions": [ "https://stac-extensions.github.io/render/v1.0.0/schema.json", "https://stac-extensions.github.io/item-assets/v1.0.0/schema.json" ], "dashboard:is_periodic": false, "dashboard:time_density": "day" } ```

I have also copied all of the dataset cover thumbnails (cp -r datasets/*-cover.(jpg|png) thumbs/) in veda-config to s3://veda-thumbnails (the same not public MCP bucket referenced above). There are only 30 so there will be duplicates for collections that belong to a multi-collection dashboard datset.

amarouane-ABDELHAK commented 1 month ago

Currently looking into this....

anayeaye commented 1 month ago

This is exciting! Here is a preview of a collection with a thumbnail href using a test cloudfront for thumbnails. My vote for a persistent cloudfront that we can use for collection thumbnail hrefs is thumbnails.openveda.cloud. If it is not tied to the routes of a particular instance we can manage it as a constant collection level asset href.

amarouane-ABDELHAK commented 1 month ago

We need to request a new Hosted Zone thumbnails.openveda.cloud in MCP

amarouane-ABDELHAK commented 1 month ago

Request to have thumbnails.openveda.cloud hosted zone created was submitted to MCP (IMPACT-VEDA account)

amarouane-ABDELHAK commented 3 weeks ago

Route 53 was added to MCP. we have a working thumbnails URL use https://thumbnails.openveda.cloud/caldor-fire--dataset-cover.jpg To access s3://veda-thumbnails/caldor-fire--dataset-cover.jpg

smohiudd commented 3 weeks ago

We will track adding thumbnails in the following tickets:

NASA-IMPACT / veda-data