import eoapi-cdk constructs and reuse them

.gitignore

@@ -113,3 +113,8 @@ node_modules/
 
 # Demo files to ignore
 demo/cmip6/CMIP6_daily_*stac_items.ndjson
+
+
+# browser compiled code and default config
+infrastructure/aws/stac-browser
+infrastructure/aws/browser_config.js

README.md

@@ -32,6 +32,8 @@
 
 - **OGC Features and Vector Tiles** API built on top of [https://github.com/developmentseed/tipg](https://github.com/developmentseed/tipg)
 
+- **A STAC Catalog browsing UI** based on the radiant earth browser : [https://github.com/radiantearth/stac-browser](https://github.com/radiantearth/stac-browser)
+
 ---
 
 ## 🌍 eoAPI: An Open-Source Community Project
@@ -57,22 +59,19 @@ Then you can start exploring your dataset with:
 
   - the STAC Metadata service [http://localhost:8081](http://localhost:8081)
   - the Raster service [http://localhost:8082](http://localhost:8082)
+  - the browser UI [http://localhost:8085](http://localhost:8085)
 
 If you've added a vector dataset to the `public` schema in the Postgres database, they will be available through the **Vector** service at [http://localhost:8083](http://localhost:8083).
 
-## Deployment
+## Deployment with standard runtimes
 
 This repository has current runtimes that are consistently updated with new functionality.
 
-The services can be deployed locally via docker with `docker compose up`.
-
-Two Infrastructure as Code (IaC) repositories are available:
-- [eoapi-cdk](https://github.com/developmentseed/eoapi-cdk): A set of AWS CDK constructs to deploy eoAPI services
-- [eoapi-k8s](https://github.com/developmentseed/eoapi-k8s): IaC and Helm charts for deploying eoAPI services on AWS and GCP
+### Local deployment
 
-Finally, [eoapi-template](https://github.com/developmentseed/eoapi-template) is an AWS CDK app that shows how to configure the eoapi-cdk constructs.
+The services can be deployed altogether locally with `docker compose up`.
 
-Alternatively, you may install the libraries locally:
+Alternatively, you may install the libraries and launch the applications manually : 
 
 <details>
 
@@ -109,7 +108,19 @@ Note: python libraries might have incompatible dependencies, which you can resol
 
 </details>
 
-## Custom runtimes
+### Deployment on the cloud
+
+#### Kubernetes 
+
+[eoapi-k8s](https://github.com/developmentseed/eoapi-k8s) contains IaC and Helm charts for deploying eoAPI services on AWS and GCP.
+
+#### AWS CDK
+
+[eoapi-cdk](https://github.com/developmentseed/eoapi-cdk) defines a set of AWS CDK constructs that can be used to deploy eoAPI services on AWS. This repository itself makes use of these in `infrastructure/aws`. An official example usage of these constructs can be found at [eoapi-template](https://github.com/developmentseed/eoapi-template).
+
+
+
+## Deployment with custom runtimes
 
 The eoAPI repository hosts customized versions of each base service which can work in parallel or in combination with each other.
 

docker-compose.custom.yml

@@ -1,6 +1,18 @@
 version: '3'
 
 services:
+  stac-browser:
+    profiles:
+      - gunicorn
+    build:
+      context: dockerfiles
+      dockerfile: Dockerfile.browser
+    ports:
+      - "${MY_DOCKER_IP:-127.0.0.1}:8085:8085"
+    depends_on:
+      - stac
+      - database
+      - raster
   stac:
     container_name: eoapi.stac
     profiles:

docker-compose.yml

@@ -1,6 +1,19 @@
 version: '3'
 
 services:
+
+  # change to official image when available https://github.com/radiantearth/stac-browser/pull/386
+  stac-browser:
+    build:
+      context: dockerfiles
+      dockerfile: Dockerfile.browser
+    ports:
+      - "${MY_DOCKER_IP:-127.0.0.1}:8085:8085"
+    depends_on:
+      - stac-fastapi
+      - titiler-pgstac
+      - database
+
   stac-fastapi:
     # Note:
     # the official ghcr.io/stac-utils/stac-fastapi-pgstac image uses python 3.8 and uvicorn

dockerfiles/Dockerfile.browser

@@ -0,0 +1,34 @@
+# Copyright Radiant Earth Foundation
+
+FROM node:lts-alpine3.18 AS build-step
+ARG DYNAMIC_CONFIG=true
+
+WORKDIR /app
+
+RUN apk add --no-cache git
+RUN git clone https://github.com/radiantearth/stac-browser.git .
+# remove the default config.js
+RUN rm config.js
+RUN npm install
+# replace the default config.js with our config file
+COPY ./browser_config.js ./config.js
+RUN \[ "${DYNAMIC_CONFIG}" == "true" \] && sed -i 's/<!-- <script defer="defer" src=".\/config.js"><\/script> -->/<script defer="defer" src=".\/config.js"><\/script>/g' public/index.html
+RUN npm run build
+
+
+FROM nginx:1-alpine-slim
+
+COPY --from=build-step /app/dist /usr/share/nginx/html
+COPY --from=build-step /app/config.schema.json /etc/nginx/conf.d/config.schema.json
+
+# change default port to 8084
+RUN apk add jq pcre-tools && \
+    sed -i 's/\s*listen\s*80;/    listen 8084;/' /etc/nginx/conf.d/default.conf && \
+    sed -i 's/\s*location \/ {/    location \/ {\n        try_files $uri $uri\/ \/index.html;/' /etc/nginx/conf.d/default.conf
+
+EXPOSE 8084
+
+STOPSIGNAL SIGTERM
+
+# override entrypoint, which calls nginx-entrypoint underneath
+COPY --from=build-step /app/docker/docker-entrypoint.sh ./docker-entrypoint.d/40-stac-browser-entrypoint.sh

dockerfiles/browser_config.js

@@ -0,0 +1,39 @@
+module.exports = {
+    catalogUrl: "http://0.0.0.0:8081",
+    catalogTitle: "eoAPI STAC Browser",
+    allowExternalAccess: true, // Must be true if catalogUrl is not given
+    allowedDomains: [],
+    detectLocaleFromBrowser: true,
+    storeLocale: true,
+    locale: "en",
+    fallbackLocale: "en",
+    supportedLocales: [
+        "de",
+        "es",
+        "en",
+        "fr",
+        "it",
+        "ro"
+    ],
+    apiCatalogPriority: null,
+    useTileLayerAsFallback: true,
+    displayGeoTiffByDefault: false,
+    buildTileUrlTemplate: ({href, asset}) => "http://0.0.0.0:8082/cog/tiles/{z}/{x}/{y}@2x?url=" + encodeURIComponent(asset.href.startsWith("/vsi") ? asset.href : href),
+    stacProxyUrl: null,
+    pathPrefix: "/",
+    historyMode: "history",
+    cardViewMode: "cards",
+    cardViewSort: "asc",
+    showThumbnailsAsAssets: false,
+    stacLint: true,
+    geoTiffResolution: 128,
+    redirectLegacyUrls: false,
+    itemsPerPage: 12,
+    defaultThumbnailSize: null,
+    maxPreviewsOnMap: 50,
+    crossOriginMedia: null,
+    requestHeaders: {},
+    requestQueryParameters: {},
+    preprocessSTAC: null,
+    authConfig: null
+};

docs/src/services.md

@@ -109,4 +109,27 @@ It enables vector Features/Features Collection exploration and visualization for
 
     - https://vector.eoapi.dev/collections/public.landsat_wrs/viewer shows the `landsat_wrs` Table on a Map client using vector tiles
 
-    - https://vector.eoapi.dev/tileMatrixSets/WebMercatorQuad `WebMercatorQuad` TileMatrixSet information
+    - https://vector.eoapi.dev/tileMatrixSets/WebMercatorQuad `WebMercatorQuad` TileMatrixSet information
+
+
+## Browsing UI
+
+The browsing UI deployed in eoAPI is built on [the radiant earth STAC browser](https://github.com/radiantearth/stac-browser), and provides a configurable, user-friendly interface to search across and within collections and quickly visualize single items assets. 
+
+By default, the STAC metadata service will have a set of endpoints to *search* and list STAC collections and items. Below we display an example of what the interface shows for a given item : 
+
+
+<p align="center">
+<img alt="stac-fastapi" src="https://github.com/developmentseed/eoAPI/assets/45140658/fae75d99-44c5-4899-8185-d003cd3c2c6a"/>
+</p>
+
+!!! example
+
+    - http://eoapi-dev-stac-browser.s3-website-us-east-1.amazonaws.com landing page
+
+    - http://eoapi-dev-stac-browser.s3-website-us-east-1.amazonaws.com/collections display available **Collection**
+
+    - http://eoapi-dev-stac-browser.s3-website-us-east-1.amazonaws.com/collections/MAXAR_southafrica_flooding22/items display available **Items** for the `MAXAR_southafrica_flooding22` collection
+
+    - http://eoapi-dev-stac-browser.s3-website-us-east-1.amazonaws.com/collections/MAXAR_southafrica_flooding22/items/36_213131033000_1040010076566100 show the `36_213131033000_1040010076566100` **Item** in the `MAXAR_southafrica_flooding22` collection and visualize its "visual" asset. 
+---

infrastructure/aws/browser_config.example.js

@@ -0,0 +1,39 @@
+module.exports = {
+    catalogUrl: null,
+    catalogTitle: "eoAPI STAC Browser",
+    allowExternalAccess: true, // Must be true if catalogUrl is not given
+    allowedDomains: [],
+    detectLocaleFromBrowser: true,
+    storeLocale: true,
+    locale: "en",
+    fallbackLocale: "en",
+    supportedLocales: [
+        "de",
+        "es",
+        "en",
+        "fr",
+        "it",
+        "ro"
+    ],
+    apiCatalogPriority: null,
+    useTileLayerAsFallback: true,
+    displayGeoTiffByDefault: false,
+    buildTileUrlTemplate: ({href, asset}) => "https://raster.dev/cog/tiles/{z}/{x}/{y}@2x?url=" + encodeURIComponent(asset.href.startsWith("/vsi") ? asset.href : href),
+    stacProxyUrl: null,
+    pathPrefix: "/",
+    historyMode: "history",
+    cardViewMode: "cards",
+    cardViewSort: "asc",
+    showThumbnailsAsAssets: false,
+    stacLint: true,
+    geoTiffResolution: 128,
+    redirectLegacyUrls: false,
+    itemsPerPage: 12,
+    defaultThumbnailSize: null,
+    maxPreviewsOnMap: 50,
+    crossOriginMedia: null,
+    requestHeaders: {},
+    requestQueryParameters: {},
+    preprocessSTAC: null,
+    authConfig: null
+};