Merge pull request #21 from vannizhang/master

2024 July Release

.env.template

@@ -0,0 +1,2 @@
+# Custom hostname for starting the Webpack Dev server
+WEBPACK_DEV_SERVER_HOSTNAME = my-custome-hostname.com

.gitignore

@@ -105,4 +105,8 @@ dist
 
 *.http
 
-temp/
+temp/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

CHANGELOG.md

@@ -0,0 +1,65 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+
+## [Unreleased]
+
+### Added
+### Changed
+### Fixed
+### Removed
+
+## 2024 July Release
+
+## Sentinel-1 Explorer
+
+### Added
+- add Temporal Composite Tool 
+- add Change Detection Tool
+- add Index Mask Tool 
+- add Temporal Profile Tool
+- add Orbit Direction Filter
+- lock relative orbit orbit direction for Change Detection tool and Temporal Composite Tool 
+- show Foot Print for Change Compare and Temporal Composite tool
+- add documentation panel
+
+## Landsat Explorer
+
+### Added
+- add Raster Function Templates of the Landsat Level-2 service
+
+### Changed
+- Scene Info table should display ID in one line
+- use `useImageryLayerByObjectId` custom hook from `shared/hooks` to get Landsat Layer
+- use `getFeatureByObjectId` from `shared/services/helpers`
+- use `getExtentByObjectId` from `shared/services/helpers`
+- use `intersectWithImageryScene` from `shared/services/helpers`
+- use `identify` from `shared/services/helpers`
+- update `queryAvailableScenes` in `/@shared/store/Landsat/thunks` to use `deduplicateListOfImageryScenes`
+- use `@shared/components/ImageryLayer/ImageryLayerByObjectID` instead of `LandsatLayer`
+- use `@shared/components/SwipeWidget/SwipeWidget4ImageryLayers`
+- `<LandsatMissionFilter />` should be passed as a child components to `Calendar`.
+- update `<Layout />` to use `useShouldShowSecondaryControls` hook
+- use `<MapPopup />` `from @shared/components/MapPopup`
+- use `Change Compare Tool` from `@shared/components/ChandCompareTool`
+- update `MaskLayer` to use `ImageryLayerWithPixelFilter`
+- update `ChangeCompareLayer` to use `ImageryLayerWithPixelFilter`
+
+## Shared
+
+### Added
+- add tooltip and click to copy feature to Scene Info component
+- add Play/Pause button to AnimationDownloadPanel
+- include estimated area calculation for Mask tool
+- include estimated area calculation for Change Detection
+- display current map scale and pixel resolution in Custom Attribution component
+- add Documentation Panel
+
+### Changed
+- upgrade @arcgis/core to use version 4.29
+- update animation panel to re-fetch animation images when user minimizes bottom panel
+- use `.env` to save `WEBPACK_DEV_SERVER_HOSTNAME`
+- add Zoom2ExtentContainer to shared components
+- update map popup to include X/Y coordinates

README.md

@@ -5,6 +5,7 @@ This repository contains a collection of Imagery Explorer web applications devel
 - [Getting Started](#getting-started)
 - [Landsat Explorer](#landsat-explorer)
 - [Sentinel-2 Landcover Explorer](#sentinel-2-land-cover-explorer)
+- [Sentinel-1 Explorer](#sentinel-1-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.
@@ -52,12 +53,12 @@ Before running the application, update the `landsat-level-2` URLs in the [`confi
 
 To run and test the app on your local machine:
 ```sh
-npm run start-landsat
+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.
 ```sh
-npm run build-landsat
+npm run build:landsat
 ```
 
 ### Resources
@@ -91,17 +92,65 @@ The Sentinel-2 Land Cover Explorer app provides dynamic visual and statistical c
 ### Usage
 To run and test the app on your local machine:
 ```sh
-npm run start-landcover
+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.
 ```sh
-npm run build-landcover
+npm run build:landcover
 ```
 
 ### Resources
 - [Global Land Cover Revealed](https://www.esri.com/arcgis-blog/products/arcgis-living-atlas/imagery/global-land-cover-revealed/)
 
+## Sentinel-1 Explorer
+
+Sentinel-1 SAR imagery helps to track and document land use and land change associated with climate change, urbanization, drought, wildfire, deforestation, and other natural processes 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-1 provides.
+
+[View it live](https://livingatlas.arcgis.com/sentinel1explorer/)
+
+![App](./public/thumbnails/sentinel1-explorer.jpg)
+
+### Features:
+- Visual exploration of a Dynamic global mosaic of the best available Sentinel-1 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, 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"
+        }
+    }
+}
+```
+
+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.
+```sh
+npm run build:sentinel1
+```
+
+### Sentinel-1 RTC Imagery Service Licensing
+- Sentinel-1 RTC Source Imagery – The source imagery is hosted on Microsoft Planetary Computer under an open [CC BY 4.0 license](https://creativecommons.org/licenses/by/4.0/).
+- 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)
+
+
 ## Issues
 Find a bug or want to request a new feature?  Please let us know by submitting an issue.
 

e2e/base.config.ts

@@ -0,0 +1,78 @@
+import type { PlaywrightTestConfig, } from "@playwright/test";
+import { devices } from "@playwright/test";
+import { config } from "dotenv";
+config({
+    path: '../.env'
+})
+
+export const DEV_SERVER_URL = process.env.WEBPACK_DEV_SERVER_HOSTNAME || 'https://localhost:8080'
+
+export const baseConfig:PlaywrightTestConfig = {
+    testDir: './',
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: !!process.env.CI,
+    /* Retry on CI only */
+    retries: process.env.CI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: 'html',
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+      /* Base URL to use in actions like `await page.goto('/')`. */
+      // baseURL: 'http://127.0.0.1:3000',
+
+      /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+      trace: 'on-first-retry',
+
+      ignoreHTTPSErrors: true,
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+      {
+        name: 'chromium',
+        use: { ...devices['Desktop Chrome'] },
+      },
+
+      {
+        name: 'firefox',
+        use: { ...devices['Desktop Firefox'] },
+      },
+
+      {
+        name: 'webkit',
+        use: { ...devices['Desktop Safari'] },
+      },
+
+      /* Test against mobile viewports. */
+      // {
+      //   name: 'Mobile Chrome',
+      //   use: { ...devices['Pixel 5'] },
+      // },
+      // {
+      //   name: 'Mobile Safari',
+      //   use: { ...devices['iPhone 12'] },
+      // },
+
+      /* Test against branded browsers. */
+      // {
+      //   name: 'Microsoft Edge',
+      //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+      // },
+      // {
+      //   name: 'Google Chrome',
+      //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+      // },
+    ],
+
+    /* Run your local dev server before starting the tests */
+    webServer: {
+      command: 'npm run start',
+      url: DEV_SERVER_URL,
+      reuseExistingServer: !process.env.CI,
+      ignoreHTTPSErrors: true
+    },
+}

e2e/landsat/landsat.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+import { DEV_SERVER_URL } from '../base.config';
+
+test('has title', async ({ page }) => {
+  await page.goto(DEV_SERVER_URL);
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Landsat Explorer/);
+});
+
+// test('get started link', async ({ page }) => {
+//   await page.goto('https://playwright.dev/');
+
+//   // Click the get started link.
+//   await page.getByRole('link', { name: 'Get started' }).click();
+
+//   // Expects page to have a heading with the name of Installation.
+//   await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+// });

e2e/playwright.landsat.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig, devices } from '@playwright/test';
+import { baseConfig } from './base.config';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...baseConfig,
+  testDir: './landsat',
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    ...baseConfig.webServer,
+    command: 'npm run start:landsat',
+  },
+});

e2e/playwright.sentinel1.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig, devices } from '@playwright/test';
+import { baseConfig } from './base.config';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    ...baseConfig,
+    testDir: './sentinel1',
+    /* Run your local dev server before starting the tests */
+    webServer: {
+        ...baseConfig.webServer,
+        command: 'npm run start:sentinel1',
+    },
+});

e2e/sentinel1/sentinel1.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+import { DEV_SERVER_URL } from '../base.config';
+
+test('has title', async ({ page }) => {
+  await page.goto(DEV_SERVER_URL);
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Sentinel-1 Explorer/);
+});
+
+// test('get started link', async ({ page }) => {
+//   await page.goto('https://playwright.dev/');
+
+//   // Click the get started link.
+//   await page.getByRole('link', { name: 'Get started' }).click();
+
+//   // Expects page to have a heading with the name of Installation.
+//   await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+// });

jest.config.js

@@ -24,7 +24,7 @@ module.exports = {
 
     // // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
     // testPathIgnorePatterns: ['\\\\node_modules\\\\'],
-    testPathIgnorePatterns: ['/__jest_utils__/'],
+    testPathIgnorePatterns: ['/__jest_utils__/', 'e2e'],
 
     // // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
     // testURL: 'http://localhost',