Improve STAC Browser experience

[j08lue]

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:

• Rendered asset thumbnails https://github.com/NASA-IMPACT/veda-architecture/issues/309
• More complete and consistent metadata https://github.com/NASA-IMPACT/veda-architecture/issues/335
• Set up s3 bucket and permissions for thumbnails
• Nicer title and description Add proper title and description to VEDA STAC #123

[smohiudd]

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

[anayeaye]

@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]

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]

@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]

Thanks @anayeaye for getting this started!

[anayeaye]

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

{
  "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]

Currently looking into this....

[anayeaye]

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]

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

[amarouane-ABDELHAK]

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

[amarouane-ABDELHAK]

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]

We will track adding thumbnails in the following tickets:

• Add thumbnail assets to production collections #143
• Add collection thumbnails #122