Merge pull request #29 from vannizhang/master

Add Sentinel-2 Explorer

.env.template

@@ -1,2 +1,31 @@
 # Custom hostname for starting the Webpack Dev server
-WEBPACK_DEV_SERVER_HOSTNAME = my-custome-hostname.com
+# This is useful when you want to access the Webpack Dev server from a different hostname
+WEBPACK_DEV_SERVER_HOSTNAME = my-custome-hostname.com
+
+# Specifies the service tier for the application, either development or production
+# This is used to determine which service proxy URL to use
+SERVICE_TIER = development
+
+# Service proxy URL for Landsat-Level-2 in development environment
+# You can ignore this if you are not running the Landsat Explorer app
+LANDSAT_SERVICE_PROXY_URL_DEV = https://dev.landsat.service.proxy.url
+
+# Service proxy URL for Landsat-Level-2 in production environment
+# You can ignore this if you are not running the Landsat Explorer app
+LANDSAT_SERVICE_PROXY_URL_PROD = https://prod.landsat.service.proxy.url
+
+# Service proxy URL for Sentinel-2 in development environment
+# You can ignore this if you are not running the Sentinel-2 Explorer app
+SENTINEL2_SERVICE_PROXY_URL_DEV = https://dev.sentinel2.service.proxy.url
+
+# Service proxy URL for Sentinel-2 in production environment
+# You can ignore this if you are not running the Sentinel-2 Explorer app
+SENTINEL2_SERVICE_PROXY_URL_PROD = https://prod.sentinel2.service.proxy.url
+
+# Service proxy URL for Sentinel-1 in development environment
+# You can ignore this if you are not running the Sentinel-1 Explorer app
+SENTINEL1_SERVICE_PROXY_URL_DEV = https://dev.sentinel1.service.proxy.url
+
+# Service proxy URL for Sentinel-1 in production environment
+# You can ignore this if you are not running the Sentinel-1 Explorer app
+SENTINEL1_SERVICE_PROXY_URL_PROD = https://prod.sentinel1.service.proxy.url

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
     "browser": true,
     "es2021": true
   },
-  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier", "plugin:storybook/recommended"],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier"],
   "overrides": [],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

CHANGELOG.md

@@ -8,8 +8,32 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ### Added
 ### Changed
-### Fixed
 ### Removed
+### Fixed
+
+## [2025-02-19]
+
+## Sentinel-2 Explorer
+
+### Added
+- Add the Sentinel-2 Explorer application that includes the following modes/tools
+    - Dynamic View
+    - Find a Scene mode
+    - Swipe mode
+    - Animate mode
+    - Index Mask Tool
+    - Temporal Profile Tool
+    - Spectral Profile Tool
+    - Change Detection Tool
+
+## Shared
+
+### Added
+- Add "Save Panel" that allows users to save the current state of the app or selected imagery scenes to ArcGIS Online Web Map or Hosted Imagery Layer.
+- Add "Auto-Swipe" option for Swipe Mode.
+- Add "Expanded Chart" panel to Spectral Profile Tool.
+- Add tooltip to Spectral Profile Tool chart.
+- Add "Click to Copy Coordinates" indicator in popup.
 
 ## 2024 July Release
 

README.md

@@ -6,6 +6,7 @@ This repository contains a collection of Imagery Explorer web applications devel
 - [Landsat Explorer](#landsat-explorer)
 - [Sentinel-2 Landcover Explorer](#sentinel-2-land-cover-explorer)
 - [Sentinel-1 Explorer](#sentinel-1-explorer)
+- [Sentinel-2 Explorer](#sentinel-2-explorer)
 
 ## Getting Started
 Before you begin, make sure you have a fresh version of [Node.js](https://nodejs.org/en/) and NPM installed. The current Long Term Support (LTS) release is an ideal starting point.
@@ -26,7 +27,7 @@ The Landsat Explorer app offers an intuitive user experience, it leverages a var
 
 [View it live](https://livingatlas.arcgis.com/landsatexplorer/)
 
-![App](./public/thumbnails/landsat.jpg)
+![App](./public/thumbnails/landsatexplorer.jpg)
 
 ### Features:
 - Visual exploration of a Dynamic global mosaic of the best available Landsat scenes.
@@ -36,27 +37,26 @@ The Landsat Explorer app offers an intuitive user experience, it leverages a var
 - Analysis such as threshold masking and temporal profiles for vegetation, water, land surface temperature, and more.
 
 ### Usage
-Before running the application, update the `landsat-level-2` URLs in the [`config.json`](./src/config.json) to use the URL of your service proxy for [Landsat Level-2](https://landsat.imagery1.arcgis.com/arcgis/rest/services/LandsatC2L2/ImageServer). 
-
-[`config.json`](./src/config.json):
-```js
-{
-    //...
-    "services": {
-        "landsat-level-2": {
-            "development": "URL_OF_YOUR_PROXY_SERVICE_FOR_LANDSAT_LEVEL_2",
-            "production": "URL_OF_YOUR_PROXY_SERVICE_FOR_LANDSAT_LEVEL_2"
-        }
-    }
-}
+Before running the application, update the `LANDSAT_SERVICE_PROXY_URL_DEV` and `LANDSAT_SERVICE_PROXY_URL_PROD` in the `.env` file to use the URL of your service proxy for [Landsat Level-2](https://landsat.imagery1.arcgis.com/arcgis/rest/services/LandsatC2L2/ImageServer). 
+
+```sh
+# Service proxy URL for Landsat-Level-2 in development environment
+LANDSAT_SERVICE_PROXY_URL_DEV = https://dev.landsat.service.proxy.url
+
+# Service proxy URL for Landsat-Level-2 in production environment
+LANDSAT_SERVICE_PROXY_URL_PROD = https://prod.landsat.service.proxy.url
+
+# Specifies the service tier for the application, either development or production
+# This is used to determine which service proxy URL to use
+SERVICE_TIER = development
 ```
 
 To run and test the app on your local machine:
 ```sh
 npm run start:landsat
 ```
 
-To build the app, you can run the command below, this will place all files needed for deployment into the `/dist/landsat` directory.
+To build the app, you can run the command below, this will place all files needed for deployment into the `/dist/landsatexplorer` directory.
 ```sh
 npm run build:landsat
 ```
@@ -78,7 +78,7 @@ The Sentinel-2 Land Cover Explorer app provides dynamic visual and statistical c
 
 [View it live](https://livingatlas.arcgis.com/landcoverexplorer/)
 
-![App](./public/thumbnails/landcover-explorer.jpg)
+![App](./public/thumbnails/landcoverexplorer.jpg)
 
 ### Features:
 - Visual change analysis with either ‘Step Mode’ or ‘Swipe Mode’
@@ -95,7 +95,7 @@ To run and test the app on your local machine:
 npm run start:landcover
 ```
 
-To build the app, you can run the command below, this will place all files needed for deployment into the `/dist/landcover-explorer` directory.
+To build the app, you can run the command below, this will place all files needed for deployment into the `/dist/landcoverexplorer` directory.
 ```sh
 npm run build:landcover
 ```
@@ -112,7 +112,7 @@ Through an intuitive user experience, this app leverages a variety of ArcGIS cap
 
 [View it live](https://livingatlas.arcgis.com/sentinel1explorer/)
 
-![App](./public/thumbnails/sentinel1-explorer.jpg)
+![App](./public/thumbnails/sentinel1explorer.jpg)
 
 ### Features:
 - Visual exploration of a Dynamic global mosaic of the best available Sentinel-1 scenes.
@@ -122,27 +122,26 @@ Through an intuitive user experience, this app leverages a variety of ArcGIS cap
 - Analysis such as threshold masking and temporal profiles for vegetation, water, land surface temperature, and more.
 
 ### Usage
-Before running the application, update the `"sentinel-1` URLs in the [`config.json`](./src/config.json) to use the URL of your service proxy for [Sentinel-1 RTC](https://sentinel1.imagery1.arcgis.com/arcgis/rest/services/Sentinel1RTC/ImageServer). 
-
-[`config.json`](./src/config.json):
-```js
-{
-    //...
-    "services": {
-        "sentinel-1": {
-            "development": "URL_OF_YOUR_PROXY_SERVICE_FOR_SENTINEL_1",
-            "production": "URL_OF_YOUR_PROXY_SERVICE_FOR_SENTINEL_1"
-        }
-    }
-}
+Before running the application, update the `SENTINEL1_SERVICE_PROXY_URL_DEV` and `SENTINEL1_SERVICE_PROXY_URL_PROD` in the `.env` file to use the URL of your service proxy for [Sentinel-1 RTC](https://sentinel1.imagery1.arcgis.com/arcgis/rest/services/Sentinel1RTC/ImageServer).
+
+```sh
+# Service proxy URL for Sentinel-1 in development environment
+SENTINEL1_SERVICE_PROXY_URL_DEV = https://dev.sentinel1.service.proxy.url
+
+# Service proxy URL for Sentinel-1 in production environment
+SENTINEL1_SERVICE_PROXY_URL_PROD = https://prod.sentinel1.service.proxy.url
+
+# Specifies the service tier for the application, either development or production
+# This is used to determine which service proxy URL to use
+SERVICE_TIER = development
 ```
 
 To run and test the app on your local machine:
 ```sh
 npm run start:sentinel1
 ```
 
-To build the app, you can run the command below, this will place all files needed for deployment into the `/dist/sentinel1-explorer` directory.
+To build the app, you can run the command below, this will place all files needed for deployment into the `/dist/sentinel1explorer` directory.
 ```sh
 npm run build:sentinel1
 ```
@@ -156,6 +155,52 @@ npm run build:sentinel1
 - Sentinel-1 RTC Image Service - This work is licensed under the Esri Master License Agreement. [View Summary](https://downloads2.esri.com/arcgisonline/docs/tou_summary.pdf) | [View Terms of Use](https://www.esri.com/en-us/legal/terms/full-master-agreement)
 
 
+## Sentinel-2 Explorer
+
+Sentinel-2 multispectral imagery helps to track and document land use and land change associated with climate change, urbanization, drought, wildfire, deforestation, and other natural processes, disasters, and human activity.
+
+Through an intuitive user experience, this app leverages a variety of ArcGIS capabilities to explore and begin to unlock the wealth of information that Sentinel-2 provides. Some of the key capabilities include:
+
+[View it live](https://livingatlas.arcgis.com/sentinel2explorer/)
+
+![App](./public/thumbnails/sentinel2explorer.jpg)
+
+### Features:
+- Visual exploration of a Dynamic global mosaic of the best available Sentinel-2 scenes.
+- On-the-fly multispectral band combinations and indices for visualization and analysis.
+- Interactive Find a Scene by location, sensor, time, and cloud cover.
+- Visual change by time, and comparison of different renderings, with Swipe and Animation modes.
+- Analysis such as threshold masking and temporal profiles for vegetation, water, and more.
+
+### Usage
+Before running the application, update the `SENTINEL2_SERVICE_PROXY_URL_DEV` and `SENTINEL2_SERVICE_PROXY_URL_PROD` in the `.env` file to use the URL of your service proxy for [Sentinel-2 Level-2A](https://sentinel.imagery1.arcgis.com/arcgis/rest/services/Sentinel2L2A/ImageServer).
+
+```sh
+# Service proxy URL for Sentinel-2 in development environment
+SENTINEL2_SERVICE_PROXY_URL_DEV = https://dev.sentinel2.service.proxy.url
+
+# Service proxy URL for Sentinel-2 in production environment
+SENTINEL2_SERVICE_PROXY_URL_PROD = https://prod.sentinel2.service.proxy.url
+
+# Specifies the service tier for the application, either development or production
+# This is used to determine which service proxy URL to use
+SERVICE_TIER = development
+```
+
+To run and test the app on your local machine:
+```sh
+npm run start:sentinel2
+```
+
+To build the app, you can run the command below, this will place all files needed for deployment into the `/dist/sentinel2explorer` directory.
+```sh
+npm run build:sentinel2
+```
+
+### Sentinel-2 Level-2A Imagery Service Licensing
+- Source Sentinel-2 Imagery – The access and use of Copernicus Sentinel Data and Service Information is regulated under EU law. In particular, the law provides that users shall have a free, full and open access to Copernicus Sentinel Data and Service Information without any express or implied warranty, including as regards quality and suitability for any purpose. [More](https://sentinel.esa.int/documents/247904/690755/Sentinel_Data_Legal_Notice).
+- Sentinel-2 Image Service - This work is licensed under the Esri Master License Agreement. [View Summary](https://downloads2.esri.com/arcgisonline/docs/tou_summary.pdf) | [View Terms of Use](https://www.esri.com/en-us/legal/terms/full-master-agreement)
+
 ## Issues
 Find a bug or want to request a new feature?  Please let us know by submitting an issue.
 

jest.config.js

@@ -39,6 +39,14 @@ module.exports = {
         "^@shared(.*)$": "<rootDir>/src/shared$1",
     } ,
     globals: {
-        "WEBPACK_DEFINED_APP_NAME": "landsat"
+        "WEBPACK_DEFINED_APP_NAME": "landsat",
+        LANDSAT_SERVICE_PROXY_URL_DEV: "http://localhost:3000/landsat-dev",
+        LANDSAT_SERVICE_PROXY_URL_PROD: "https://api.example.com/landsat-prod",
+        SENTINEL2_SERVICE_PROXY_URL_DEV: "http://localhost:3000/sentinel2-dev",
+        SENTINEL2_SERVICE_PROXY_URL_PROD: "https://api.example.com/sentinel2-prod",
+        SENTINEL1_SERVICE_PROXY_URL_DEV: "http://localhost:3000/sentinel1-dev",
+        SENTINEL1_SERVICE_PROXY_URL_PROD: "https://api.example.com/sentinel1-prod",
+        SERVICE_TIER: "development",
+        CUSTOM_ARCGIS_PORTAL_ROOT: "https://www.arcgis.com",
     }
 };

jest.setup.js

@@ -1,5 +1,10 @@
 jest.mock("nanoid", () => { 
     return {
-        nanoid : jest.fn(() => 'abc')
+        nanoid: jest.fn()
+            .mockImplementationOnce(() => '1')
+            .mockImplementationOnce(() => '2')
+            .mockImplementationOnce(() => '3')
+            .mockImplementationOnce(() => '4')
+            .mockImplementationOnce(() => '5')
     }
 });