| ... | ... | @@ -9,385 +9,534 @@ |
|
|
|
|
|
|
|
</details>
|
|
|
|
|
|
|
|
# Activity Documentation for Bathymetry Module
|
|
|
|
|
|
|
|
This documentation provides a detailed explanation of the user interaction pages in the Bathymetry module.
|
|
|
|
# Activity Documentation for Shoreline Module
|
|
|
|
|
|
|
|
## Diagram
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## MainPage(match)
|
|
|
|
|
|
|
|
_`This is the main page of the application. It handles the routes and redirects the user to the correct page according to the URL.`_
|
|
|
|
|
|
|
|
### SelectionPage
|
|
|
|
|
|
|
|
_`The user is presented with options to choose an algorithm for analysis (bathymetry, shoreline, coastal squeeze).`_
|
|
|
|
|
|
|
|
### Bathemetry(props)
|
|
|
|
|
|
|
|
_`This is the main page for the bathymetry analysis process. It shows a stepper with the steps to configure the bathymetry processing. The steps are:`_
|
|
|
|
|
|
|
|
#### SatelliteChooser
|
|
|
|
This documentation provides a detailed explanation of the user
|
|
|
|
interaction pages in the Shoreline module.
|
|
|
|
|
|
|
|
_`Allows the user to select a satellite for the bathymetry analysis. The selected satellite is dispatched to the store.`_
|
|
|
|
|
|
|
|
#### AOIChooser
|
|
|
|
|
|
|
|
_`Allows the user to draw an area of interest (AOI) on the map. The geometry of the AOI is dispatched to the store.`_
|
|
|
|
|
|
|
|
#### PeriodChooser
|
|
|
|
## Diagram
|
|
|
|
|
|
|
|
_`Allows the user to select a time period to search for images. The selected start and end dates are dispatched to the store.`_
|
|
|
|
|
|
|
|
|
|
|
|
#### BathymetryBandsAndAlgorithmSelection
|
|
|
|
## SelectionPage
|
|
|
|
|
|
|
|
_`Allows the user to select the bands and algorithm to apply in the bathymetry processing. The selected configuration is updated in the BathymetryResults object.`_
|
|
|
|
The SelectionPage is the initial page where users can choose the
|
|
|
|
analysis module. When the user selects the Shoreline Analyst option,
|
|
|
|
they are redirected to the ProcessingPage . This page displays options
|
|
|
|
for the user to choose the analysis module. When the user selects the
|
|
|
|
Shoreline Analyst option, they are redirected to the ProcessingPage .
|
|
|
|
|
|
|
|
### ProcessingBathymetryPage
|
|
|
|
### push('/processing')
|
|
|
|
|
|
|
|
_`Shows the results of the bathymetry processing. The user can download the bathymetry image and view the generated statistics.`_
|
|
|
|
This function redirects the user to the ProcessingPage when they select
|
|
|
|
the Shoreline Analyst option.
|
|
|
|
|
|
|
|
## ProcessingPage(props)
|
|
|
|
## ProcessingPage
|
|
|
|
|
|
|
|
_`Page that shows the processing of the selected algorithm (bathymetry, shoreline, coastal squeeze).`_` `
|
|
|
|
The ProcessingPage is the page where users go through the steps of the
|
|
|
|
shoreline analysis.
|
|
|
|
|
|
|
|
### deriveShorelines(images, geometry, spacing, extension, thresholds)
|
|
|
|
## ProcessingPage
|
|
|
|
|
|
|
|
_`Loops through a list of images and extracts the shorelines for each one, accumulating the results in a FeatureCollection. Returns the final FeatureCollection with all shorelines.`_
|
|
|
|
*Page that shows the processing of the selected algorithm (bathymetry,
|
|
|
|
shoreline or coastal squeeze).*
|
|
|
|
|
|
|
|
### extractShoreline(image, geometry, spacing, extension, threshold)
|
|
|
|
This page guides the user through the steps of the shoreline analysis.
|
|
|
|
The steps are as follows:
|
|
|
|
|
|
|
|
_`Applies a thresholding algorithm to extract the shoreline from a satellite image. Returns a FeatureCollection with the shoreline geometries.`_
|
|
|
|
1\. Choose Satellite: The user selects either the Sentinel-2 or Landsat
|
|
|
|
satellite for the analysis. 2. Set Region of Interest: The user draws a
|
|
|
|
polygon on the map to define the area of interest. 3. Set Period: The
|
|
|
|
user selects a start and end date to filter the available images. 4.
|
|
|
|
Filter Images: The user selects the desired images from the available
|
|
|
|
options. 5. Set Parameters: The user enters parameters such as transect
|
|
|
|
spacing, extension, and threshold. 6. Results: The results of the
|
|
|
|
shoreline analysis are displayed, including charts, statistics, and
|
|
|
|
exports.
|
|
|
|
|
|
|
|
## Bathemetry/index.jsx
|
|
|
|
### useSelector(getAcquisitionParameters)
|
|
|
|
|
|
|
|
This file defines the bathemetry acquisition process page. It handles the steps and routes of the bathemetry acquisition process. It may include the following function calls:
|
|
|
|
This function retrieves the acquisition parameters selected by the user
|
|
|
|
in the previous steps, including the satellite choice, region of
|
|
|
|
interest, period, selected images, and analysis parameters.
|
|
|
|
|
|
|
|
### BathymetryResults.isBathymetry()
|
|
|
|
## AlgorithmCard
|
|
|
|
|
|
|
|
This function checks if the current page is the bathymetry page. It returns a boolean value, indicating whether the page is the bathymetry page or not.
|
|
|
|
The AlgorithmCard component displays information for each step of the
|
|
|
|
shoreline analysis process. The cards specific to the Shoreline Analyst
|
|
|
|
steps are shown. This component shows a card with information for each
|
|
|
|
step of the shoreline analysis. The cards related to the Shoreline
|
|
|
|
Analyst steps are displayed.
|
|
|
|
|
|
|
|
### BathymetryResults.getTrainingDataAsMatrix()
|
|
|
|
## Function Calls within Shoreline Analysis Steps
|
|
|
|
|
|
|
|
This function retrieves the training data from the session storage and parses it into a matrix format.
|
|
|
|
The following function calls are made within the Shoreline Analyst steps
|
|
|
|
of the ProcessingPage :
|
|
|
|
|
|
|
|
### BathymetryResults.getTrainingDataAsFeatureCollection()
|
|
|
|
### getAvailableImages(geometry, startDate, endDate)
|
|
|
|
|
|
|
|
This function retrieves the training data from the session storage and converts it into an Earth Engine FeatureCollection.
|
|
|
|
This function fetches the available images from the selected satellite
|
|
|
|
based on the defined region of interest and period. It returns a list of
|
|
|
|
images with metadata such as image ID, date, and cloud coverage
|
|
|
|
percentage.
|
|
|
|
|
|
|
|
### BathymetryResults.getCoordinatesSystem()
|
|
|
|
### createTransects(geometry, transectSpacing, transectExtension)
|
|
|
|
|
|
|
|
This function retrieves the coordinate system information from the session storage.
|
|
|
|
This function creates transects (lines) within the defined region of
|
|
|
|
interest based on the user-entered parameters for transect spacing and
|
|
|
|
extension.
|
|
|
|
|
|
|
|
### BathymetryResults.getMedianImage(collectionName, geometry, dtBegin, dtEnd)
|
|
|
|
### extraction(images, threshold)
|
|
|
|
|
|
|
|
This function calculates the median of an Earth Engine ImageCollection filtered by the given geometry and dates. The parameters collectionName , geometry , dtBegin , and dtEnd specify the collection to filter and the time range. It returns the thumbnail URL and the median Image.
|
|
|
|
This function extracts shorelines from the selected images. The
|
|
|
|
threshold parameter is used to determine the land-water boundary.
|
|
|
|
|
|
|
|
### BathymetryResults.getSelectedImage()
|
|
|
|
### statistics(shorelines)
|
|
|
|
|
|
|
|
This function acquires the selected Sentinel-2 image based on the chosen date and satellite mission. It handles using the median image if selected. The parameters date and satelliteMission specify the desired image. It returns the Image.
|
|
|
|
This function calculates statistics for the extracted shorelines,
|
|
|
|
including Shoreline Change Envelope (SCE), Net Shoreline Movement (NSM),
|
|
|
|
End Point Rate (EPR), and Linear Regression Rate (LRR). It also
|
|
|
|
classifies the LRR using Esteves and Finkl (1998) intervals.
|
|
|
|
|
|
|
|
### BathymetryResults.mask(img)
|
|
|
|
### transects(shorelines)
|
|
|
|
|
|
|
|
This function applies a cloud and water mask to the given Sentinel-2 Image. The img parameter represents the image to be masked.
|
|
|
|
This function calculates the intersection points of the transects and
|
|
|
|
shorelines. It also computes summary statistics for each shoreline, such
|
|
|
|
as mean distance and standard deviation.
|
|
|
|
|
|
|
|
## ProcessingBathemetryPage/index.jsx
|
|
|
|
## Code Used in Shoreline
|
|
|
|
|
|
|
|
This file represents the page that shows the results of the bathemetry process. It displays the predicted bathymetry image, statistics, and allows downloading the results. It may include the following function calls:
|
|
|
|
### **push('/processing')**
|
|
|
|
|
|
|
|
### BathymetryResults.getBathymetryImage()
|
|
|
|
Redirects to the processing page.
|
|
|
|
|
|
|
|
This function returns the bathymetry image calculated by the bathymetry algorithm.
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
dispatch(push('/processing'));
|
|
|
|
```
|
|
|
|
|
|
|
|
### BathymetryResults.getBathymetryParams()
|
|
|
|
#### **Inputs:**
|
|
|
|
|
|
|
|
This function returns the visualization parameters for the bathymetry image.
|
|
|
|
No input parameters for this function.
|
|
|
|
|
|
|
|
## ProcessingPage/index.jsx
|
|
|
|
#### **Output:**
|
|
|
|
|
|
|
|
This file represents the page that shows the results of the processing. It displays the processed image and allows downloading the results.
|
|
|
|
Redirects to '/processing' page.
|
|
|
|
|
|
|
|
## components/\*
|
|
|
|
#### **Use**
|
|
|
|
|
|
|
|
The components folder contains various reusable components used throughout the application. These components may include UI elements, input fields, buttons, etc., which are utilized in the above-mentioned pages.
|
|
|
|
Call this function to redirect to the processing page.
|
|
|
|
|
|
|
|
## Code Used in Bathymetry
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
push('/processing');
|
|
|
|
```
|
|
|
|
|
|
|
|
### **MainPage**
|
|
|
|
### **useSelector(getAcquisitionParameters)**
|
|
|
|
|
|
|
|
This is the main page of the application. It contains the routes for the application and renders the appropriate components based on the route.
|
|
|
|
Extracts acquisition parameters from the store.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
const MainPage = ({ match }) => {
|
|
|
|
// Register the dialogs when the component is mounted
|
|
|
|
registerDialogs();
|
|
|
|
|
|
|
|
// useStyles hook to inject custom styles
|
|
|
|
const classes = useStyles();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={classes.wrapper}>
|
|
|
|
<DialogRoot />
|
|
|
|
|
|
|
|
<NavigationBar />
|
|
|
|
|
|
|
|
<Switch>
|
|
|
|
<Route
|
|
|
|
exact
|
|
|
|
strict
|
|
|
|
path={ ${match.url}/selection }
|
|
|
|
component={SelectionPage}
|
|
|
|
/>
|
|
|
|
<Route exact strict path={ ${match.url}/faq } component={FAQ} />
|
|
|
|
<Route
|
|
|
|
exact
|
|
|
|
strict
|
|
|
|
path={ ${match.url}/problems }
|
|
|
|
component={ProblemsPage}
|
|
|
|
/>
|
|
|
|
// Other routes...
|
|
|
|
</Switch>
|
|
|
|
|
|
|
|
<ActivityIndicator />
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
const acquisitionData = useSelector(getAcquisitionParameters, shallowEqual);
|
|
|
|
```
|
|
|
|
|
|
|
|
#### **Inputs:**
|
|
|
|
|
|
|
|
No input parameters for this function.
|
|
|
|
getAcquisitionParameters: Selector function to extract data from the
|
|
|
|
store.
|
|
|
|
|
|
|
|
#### **Output:**
|
|
|
|
|
|
|
|
Renders the main layout of the application with the appropriate components based on the route.
|
|
|
|
acquisitionData: The acquisition parameters extracted from the store.
|
|
|
|
|
|
|
|
#### **Use**
|
|
|
|
|
|
|
|
This function is used to handle routing in the application. Based on the route, it renders the appropriate page component.
|
|
|
|
Call this hook to extract data from the Redux store.
|
|
|
|
|
|
|
|
### **Bathemetry**
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
const someData = useSelector(someSelector);
|
|
|
|
```
|
|
|
|
|
|
|
|
This page handles the bathymetry analysis workflow. It contains the steps for bathymetry analysis like area of interest selection, image selection, bands and algorithm selection etc.
|
|
|
|
### **getAvailableImages(geometry, startDate, endDate)**
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
const Bathemetry = (props) => {
|
|
|
|
// Check if the user is authenticated
|
|
|
|
dispatch(Auth.begin());
|
|
|
|
|
|
|
|
// Check if the step is valid and check the requirements
|
|
|
|
if (!stepAttendsRequirements()) {
|
|
|
|
// If it is not, redirect to the first step
|
|
|
|
navigate(FIRST);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Other code...
|
|
|
|
Fetches available satellite images within a geometry and time period.
|
|
|
|
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={classes.wrapper}>
|
|
|
|
// Render the steps...
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
//algorithms/acquisition/index.js
|
|
|
|
export const getAvailableImages = (geometry, startDate, endDate) => {
|
|
|
|
// Compute a list of valid dates in the region to be retrieved
|
|
|
|
const query = getSatelliteCollection().filterBounds(geometry).filterDate(startDate, endDate);
|
|
|
|
|
|
|
|
const process = (available) => {
|
|
|
|
// Retrieve the globally extreme dates (earliest and latest)
|
|
|
|
const global = retrieveExtremes(available);
|
|
|
|
|
|
|
|
// Compute the grid position of each image and sort in ascending order
|
|
|
|
const enhanced = available
|
|
|
|
.map(addGridPosition)
|
|
|
|
.sort(Metadata.GRID_POSITION);
|
|
|
|
|
|
|
|
// Retrieve the northeasternmost grid position within the specified bounds
|
|
|
|
const northeasternPosition = ee
|
|
|
|
.Image(enhanced.toList(1).get(0))
|
|
|
|
.get(Metadata.GRID_POSITION);
|
|
|
|
|
|
|
|
// Keep images in the slice where the satellite passed first (northeast)
|
|
|
|
const filtered = enhanced.filter(
|
|
|
|
ee.Filter.eq(Metadata.GRID_POSITION, northeasternPosition)
|
|
|
|
);
|
|
|
|
|
|
|
|
// Retrieve the extremes in the northeastern position
|
|
|
|
const northeastern = retrieveExtremes(filtered);
|
|
|
|
|
|
|
|
// Compute the difference in days between the earliest image in the
|
|
|
|
// northeastern position and the globally earliest image
|
|
|
|
const difference = northeastern.earliest
|
|
|
|
.difference(global.earliest, "day")
|
|
|
|
.abs();
|
|
|
|
const remainder = ee.Number(difference).mod(REVISIT_DAYS);
|
|
|
|
|
|
|
|
// The amount of days we need to go back is given by the reverse of the
|
|
|
|
// difference, in terms of the duration of an orbit
|
|
|
|
const step = ee.Number(REVISIT_DAYS).subtract(remainder);
|
|
|
|
|
|
|
|
// Compute the date of the earliest possible image in the northeastern
|
|
|
|
// position (whether or not it exists) by going back in time
|
|
|
|
const earliestDate = global.earliest.advance(step.multiply(-1), "day");
|
|
|
|
|
|
|
|
// Compute the amount of complete orbital cycles between the earliest and
|
|
|
|
// latest possible dates of the images in the northeastern position (whether
|
|
|
|
// or not they exist)
|
|
|
|
const completeCycles = ee
|
|
|
|
.Number(earliestDate.difference(global.latest, "day").abs())
|
|
|
|
.divide(REVISIT_DAYS)
|
|
|
|
.ceil();
|
|
|
|
|
|
|
|
// Generate slices of 16 (0, 16, 32, 48, ...), one for each complete cycle
|
|
|
|
const additions = ee.List.sequence(0, null, REVISIT_DAYS, completeCycles);
|
|
|
|
|
|
|
|
// Transform each slice into an empty image. If the slice contains at least
|
|
|
|
// one image, we add metadata related to the correspondent orbital cycle,
|
|
|
|
// to allow for filtering later
|
|
|
|
const carriers = additions.map((increment) => {
|
|
|
|
const startingDate = earliestDate.advance(increment, "day");
|
|
|
|
const collection = sliceByRevisit(available, startingDate, REVISIT_DAYS);
|
|
|
|
|
|
|
|
const empty = ee.Algorithms.IsEqual(collection.size(), 0);
|
|
|
|
const properties = ee.Algorithms.If(
|
|
|
|
empty,
|
|
|
|
{},
|
|
|
|
mergeProperties(collection)
|
|
|
|
);
|
|
|
|
|
|
|
|
return ee.Image(0).set(properties);
|
|
|
|
});
|
|
|
|
|
|
|
|
// Keep only the images whose combined geometries contain the AOI
|
|
|
|
const valid = ee.ImageCollection.fromImages(carriers).filter(
|
|
|
|
ee.Filter.contains(Metadata.FOOTPRINT, geometry)
|
|
|
|
);
|
|
|
|
|
|
|
|
// For now only the date of the slice is important.
|
|
|
|
return ee.List(valid.toList(valid.size()).map(getDate));
|
|
|
|
};
|
|
|
|
|
|
|
|
return ee.List(
|
|
|
|
ee.Algorithms.If(query.size().gt(0), process(query), ee.List([]))
|
|
|
|
);
|
|
|
|
};
|
|
|
|
```
|
|
|
|
|
|
|
|
#### **Inputs:**
|
|
|
|
|
|
|
|
No input parameters for this function.
|
|
|
|
geometry: The geometry to fetch images within. startDate: The start date
|
|
|
|
of the time period. endDate: The end date of the time period.
|
|
|
|
|
|
|
|
#### **Output:**
|
|
|
|
|
|
|
|
Renders the bathymetry analysis workflow.
|
|
|
|
A list of available images within the given geometry and time period.
|
|
|
|
|
|
|
|
#### **Use**
|
|
|
|
|
|
|
|
This function is used to handle the bathymetry analysis workflow. It contains the steps required for bathymetry analysis like:
|
|
|
|
|
|
|
|
1\. Area of interest selection 2. Image selection 3. Bands and algorithm selection 4. Threshold selection
|
|
|
|
Call this generator function to get available satellite images within a
|
|
|
|
given area and time range.
|
|
|
|
|
|
|
|
It navigates between these steps based on the route and ensures the pre-requisites for each step are met before rendering them.
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
yield* getAvailableImages(geometry, '2020-01-01', '2020-12-31');
|
|
|
|
```
|
|
|
|
|
|
|
|
### **ProcessingBathemetryPage**
|
|
|
|
### **createTransects(geometry, transectSpacing, transectExtension)**
|
|
|
|
|
|
|
|
This page handles displaying the results of the bathymetry analysis. It shows the predicted bathymetry image, statistics like RMSE, bias, slope etc. and provides options to download the results.
|
|
|
|
Generates transects within a geometry.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
const ProcessingBathymetryPage = () => {
|
|
|
|
// Check if the user is drawing a shape
|
|
|
|
const isDrawing = useSelector((state) => state.map.currentlyDrawing);
|
|
|
|
// Get the map coordinates
|
|
|
|
const coordinates = useSelector((state) => state.acquisition.coordinates);
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
// Custom styles
|
|
|
|
const classes = useStyles();
|
|
|
|
// Get the current language
|
|
|
|
const [t] = useTranslation();
|
|
|
|
|
|
|
|
// Code to process the bathymetry analysis and get the results...
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Box className={classes.wrapper}>
|
|
|
|
{/* Render the results */}
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
/**
|
|
|
|
* Generates transects orthogonal to the specified polygon.
|
|
|
|
* @param {ee.Feature} polygon a Feature describing the area to be covered
|
|
|
|
*/
|
|
|
|
export const generateOrthogonalTransects = (coordinates, step, extent) => {
|
|
|
|
coordinates = ee.List(coordinates);
|
|
|
|
|
|
|
|
const first = ee.Dictionary({
|
|
|
|
a: ee.List(coordinates.get(0)),
|
|
|
|
remainder: 0,
|
|
|
|
transects: [],
|
|
|
|
});
|
|
|
|
|
|
|
|
const result = coordinates
|
|
|
|
.slice(1)
|
|
|
|
.iterate(transectAccumulator(step, extent), [first]);
|
|
|
|
|
|
|
|
let transects = ee
|
|
|
|
.List(result)
|
|
|
|
.map((dict) => ee.Feature(ee.Dictionary(dict).get("transects")))
|
|
|
|
.flatten();
|
|
|
|
|
|
|
|
transects = ee.FeatureCollection(transects);
|
|
|
|
transects = ee.Algorithms.If(
|
|
|
|
ee.Algorithms.IsEqual(transects.size(), 0),
|
|
|
|
ee.List([]),
|
|
|
|
transects.toList(transects.size())
|
|
|
|
);
|
|
|
|
|
|
|
|
return ee.List(transects);
|
|
|
|
};
|
|
|
|
```
|
|
|
|
|
|
|
|
#### **Inputs:**
|
|
|
|
|
|
|
|
No input parameters for this function.
|
|
|
|
geometry: The geometry to generate transects within. transectSpacing:
|
|
|
|
The spacing between transects. transectExtension: The length of each
|
|
|
|
transect.
|
|
|
|
|
|
|
|
#### **Output:**
|
|
|
|
|
|
|
|
Renders the results of the bathymetry analysis like the predicted bathymetry image, statistics and download options.
|
|
|
|
A list of transect features.
|
|
|
|
|
|
|
|
#### **Use**
|
|
|
|
|
|
|
|
This function is used to display the results of the bathymetry analysis. It shows:
|
|
|
|
|
|
|
|
1\. The predicted bathymetry image 2. Statistics like RMSE, bias, slope etc. 3. Options to download the bathymetry image and statistics
|
|
|
|
Call this generator function to generate transects within a given
|
|
|
|
geometry.
|
|
|
|
|
|
|
|
It handles processing the bathymetry analysis based on the inputs provided in the previous steps and displays the results to the user.
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
yield* createTransects(geometry, 100, 500);
|
|
|
|
```
|
|
|
|
|
|
|
|
### **ProcessingPage**
|
|
|
|
### **extraction(images, threshold)**
|
|
|
|
|
|
|
|
This page handles displaying the results of the shoreline change analysis. It shows the shoreline change maps, transect report, transect evolution graphs and provides options to download the results.
|
|
|
|
Extracts shorelines from a list of images.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
const ProcessingPage = () => {
|
|
|
|
// Get the analysis results from the store
|
|
|
|
const { transects, baseline, shorelines } = useSelector(
|
|
|
|
(state) => state.shoreline.results
|
|
|
|
);
|
|
|
|
|
|
|
|
// Code to process the shoreline change analysis and get the results...
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Box className={classes.wrapper}>
|
|
|
|
{/* Render the results */}
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
/**
|
|
|
|
* Extracts shorelines from the specified images.
|
|
|
|
* @param {ee.ImageCollection|ee.Image} images the input images
|
|
|
|
* @param {Number} threshold the threshold to binarize the images
|
|
|
|
*/
|
|
|
|
export const extraction = (images, threshold) => {
|
|
|
|
// Cast to ImageCollection and filter invalid images
|
|
|
|
images = ee.ImageCollection(images).filter(ee.Filter.notNull(['B1', 'B2', 'B3']));
|
|
|
|
|
|
|
|
// Add NDWI band
|
|
|
|
const withNDWI = images.map(addNDWI);
|
|
|
|
|
|
|
|
// Reduce collection to a single image
|
|
|
|
const reduced = withNDWI.reduce('mean');
|
|
|
|
|
|
|
|
// Binarize using the threshold
|
|
|
|
const binary = reduced.lt(threshold);
|
|
|
|
|
|
|
|
// Extract shorelines from the binary image
|
|
|
|
const shorelines = binary.reduceToVectors({
|
|
|
|
geometry: binary.geometry(),
|
|
|
|
crs: binary.projection(),
|
|
|
|
scale: binary.projection().nominalScale(),
|
|
|
|
eightConnected: false,
|
|
|
|
maxPixels: 1e9
|
|
|
|
});
|
|
|
|
|
|
|
|
return shorelines;
|
|
|
|
};
|
|
|
|
```
|
|
|
|
|
|
|
|
#### **Inputs:**
|
|
|
|
|
|
|
|
No input parameters for this function.
|
|
|
|
images: A list of images to extract shorelines from. threshold: The
|
|
|
|
threshold value for water segmentation.
|
|
|
|
|
|
|
|
#### **Output:**
|
|
|
|
|
|
|
|
Renders the results of the shoreline change analysis like shoreline change maps, transect report, transect evolution graphs and download options.
|
|
|
|
A list of shoreline features.
|
|
|
|
|
|
|
|
#### **Use**
|
|
|
|
|
|
|
|
This function is used to display the results of the shoreline change analysis. It shows:
|
|
|
|
|
|
|
|
1\. Shoreline change maps 2. Transect report 3. Transect evolution graphs 4. Options to download the results
|
|
|
|
Call this generator function to extract shorelines from a list of
|
|
|
|
images.
|
|
|
|
|
|
|
|
It handles processing the shoreline change analysis based on the inputs provided in the previous steps and displays the results to the user.
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
const shorelines = yield* extraction(images, 0.2);
|
|
|
|
```
|
|
|
|
|
|
|
|
### **SelectionPage**
|
|
|
|
### **statistics(shorelines)**
|
|
|
|
|
|
|
|
This is the landing page of the application. It provides an overview of the capabilities of the application like bathymetry analysis, shoreline change analysis and coastal squeeze and options to start them.
|
|
|
|
Calculates shoreline change statistics.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
const SelectionPage = () => {
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
const [t] = useTranslation();
|
|
|
|
const classes = useStyles();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<HomePageLayout>
|
|
|
|
<Box className={classes.wrapper}>
|
|
|
|
{/* Render the options to start bathymetry analysis, shoreline change analysis and coastal squeeze */}
|
|
|
|
</Box>
|
|
|
|
</HomePageLayout>
|
|
|
|
);
|
|
|
|
/**
|
|
|
|
* Adds statistics about the distances observed in *transects*,
|
|
|
|
* such as StdDev and Mean.
|
|
|
|
* *Adds CASSIE internals props*
|
|
|
|
* @param {ee.List<Feature>} transects
|
|
|
|
* @param {ee.FeatureCollection} shorelines
|
|
|
|
* @returns {ee.FeatureCollection} the shorelines with added statistics
|
|
|
|
*/
|
|
|
|
export const summaryShorelineStatistics = (transects, shorelines) => {
|
|
|
|
const shorelineList = ee.List(shorelines.toList(shorelines.size()));
|
|
|
|
const shorelineIds = shorelineList.map((feature) => ee.Feature(feature).id());
|
|
|
|
const shorelineTable = ee.Dictionary.fromLists(shorelineIds, shorelineList);
|
|
|
|
|
|
|
|
const distances = ee
|
|
|
|
.List(transects)
|
|
|
|
.map((transect) =>
|
|
|
|
ee
|
|
|
|
.Dictionary(
|
|
|
|
ee.Dictionary(ee.Feature(transect).get(INTERNALS)).get("measurement")
|
|
|
|
)
|
|
|
|
.values()
|
|
|
|
)
|
|
|
|
.flatten();
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Reduce distances per shoreline
|
|
|
|
*/
|
|
|
|
const transformed = ee.Dictionary(
|
|
|
|
distances.iterate((input, acc) => {
|
|
|
|
const current = ee.Dictionary(input);
|
|
|
|
const dict = ee.Dictionary(acc);
|
|
|
|
|
|
|
|
const key = current.get("withRespectTo");
|
|
|
|
const value = current.get("distance");
|
|
|
|
const feature = ee.Feature(shorelineTable.get(key));
|
|
|
|
|
|
|
|
const target = ee.Dictionary(dict.get(key, { distances: [] }));
|
|
|
|
const targetList = ee.List(target.get("distances"));
|
|
|
|
|
|
|
|
return dict.set(
|
|
|
|
key,
|
|
|
|
target.combine(
|
|
|
|
ee.Dictionary({
|
|
|
|
distances: targetList.add(value),
|
|
|
|
date: feature.get(TIME_START),
|
|
|
|
})
|
|
|
|
)
|
|
|
|
);
|
|
|
|
}, ee.Dictionary({}))
|
|
|
|
);
|
|
|
|
|
|
|
|
/* Attach properties to shorelines */
|
|
|
|
const features = ee.List(transformed.keys()).map((key) => {
|
|
|
|
const summary = ee.Dictionary(transformed.get(key));
|
|
|
|
const distances = ee.List(summary.get("distances", []));
|
|
|
|
|
|
|
|
const stats = distances.reduce(
|
|
|
|
combineReducers(ee.Reducer.mean(), ee.Reducer.stdDev())
|
|
|
|
);
|
|
|
|
|
|
|
|
const internals = ee.Dictionary({ [INTERNALS]: distances });
|
|
|
|
|
|
|
|
return ee
|
|
|
|
.Feature(shorelineTable.get(key))
|
|
|
|
.setMulti(
|
|
|
|
summary
|
|
|
|
.remove(["distances"])
|
|
|
|
.combine(ee.Dictionary(stats))
|
|
|
|
.combine(internals)
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
return ee.FeatureCollection(features).sort("date");
|
|
|
|
};
|
|
|
|
```
|
|
|
|
|
|
|
|
#### **Inputs:**
|
|
|
|
|
|
|
|
No input parameters for this function.
|
|
|
|
shorelines: A list of shoreline features.
|
|
|
|
|
|
|
|
#### **Output:**
|
|
|
|
|
|
|
|
Renders the landing page of the application with options to start bathymetry analysis, shoreline change analysis and coastal squeeze.
|
|
|
|
Shoreline change statistics.
|
|
|
|
|
|
|
|
#### **Use**
|
|
|
|
|
|
|
|
This function is used to render the landing page of the application. It shows:
|
|
|
|
Call this generator function to calculate shoreline change statistics
|
|
|
|
from a list of shorelines.
|
|
|
|
|
|
|
|
1\. An overview of the capabilities of the application like bathymetry analysis, shoreline change analysis and coastal squeeze. 2. Options to start bathymetry analysis, shoreline change analysis and coastal squeeze.
|
|
|
|
|
|
|
|
When the user selects an option, they are navigated to the corresponding workflow.
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
const stats = yield* statistics(shorelines);
|
|
|
|
```
|
|
|
|
|
|
|
|
### **BathymetryBandsAndAlgorithmSelection**
|
|
|
|
### **transects(shorelines)**
|
|
|
|
|
|
|
|
This component is used to select bands and algorithm for bathymetry analysis. It shows options to select bands for the analysis and graphs to select the algorithm. It handles updating the store with the selected bands and algorithm.
|
|
|
|
Generates transects and calculates transect-based shoreline change
|
|
|
|
statistics.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
const BathymetryBandsAndAlgorithmSelection = () => {
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
const [t] = useTranslation();
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
// Code to select bands and algorithm...
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Box>
|
|
|
|
{/* Render options to select bands and graphs to select algorithm */}
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
export const generateOrthogonalTransects = (coordinates, step, extent) => {
|
|
|
|
coordinates = ee.List(coordinates);
|
|
|
|
|
|
|
|
const first = ee.Dictionary({
|
|
|
|
a: ee.List(coordinates.get(0)),
|
|
|
|
remainder: 0,
|
|
|
|
transects: [],
|
|
|
|
});
|
|
|
|
|
|
|
|
const result = coordinates
|
|
|
|
.slice(1)
|
|
|
|
.iterate(transectAccumulator(step, extent), [first]);
|
|
|
|
|
|
|
|
let transects = ee
|
|
|
|
.List(result)
|
|
|
|
.map((dict) => ee.Feature(ee.Dictionary(dict).get("transects")))
|
|
|
|
.flatten();
|
|
|
|
|
|
|
|
transects = ee.FeatureCollection(transects);
|
|
|
|
transects = ee.Algorithms.If(
|
|
|
|
ee.Algorithms.IsEqual(transects.size(), 0),
|
|
|
|
ee.List([]),
|
|
|
|
transects.toList(transects.size())
|
|
|
|
);
|
|
|
|
|
|
|
|
return ee.List(transects);
|
|
|
|
};
|
|
|
|
```
|
|
|
|
|
|
|
|
#### **Inputs:**
|
|
|
|
|
|
|
|
No input parameters for this function.
|
|
|
|
shorelines: A list of shoreline features. transects: A list of transect
|
|
|
|
features.
|
|
|
|
|
|
|
|
#### **Output:**
|
|
|
|
|
|
|
|
Renders options to select bands and graphs to select the algorithm for bathymetry analysis.
|
|
|
|
Transect features with shoreline change statistics.
|
|
|
|
|
|
|
|
#### **Use**
|
|
|
|
|
|
|
|
This function is used to select bands and algorithm for bathymetry analysis. It shows:
|
|
|
|
|
|
|
|
1\. Options to select two bands for the analysis. 2. Graphs showing the relationship between the selected bands and depth. The user can select an algorithm by clicking on a graph. 3. It handles updating the store with the selected bands and algorithm so they can be used for bathymetry analysis.
|
|
|
|
|
|
|
|
### **AOIChooser**
|
|
|
|
Call this generator function to generate transects from shorelines and
|
|
|
|
calculate transect-based shoreline change statistics.
|
|
|
|
|
|
|
|
This component is used to select the area of interest. It shows a map where the user can draw the area of interest and options to import it from a KML file. It handles updating the store with the selected area of interest.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
|
|
const AOIChooser = () => {
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
const [t] = useTranslation();
|
|
|
|
const classes = useStyles();
|
|
|
|
``` javascript
|
|
|
|
|
|
|
|
// Code to select area of interest...
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Box>
|
|
|
|
{/* Render map to draw area of interest and options to import from KML */}
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
const transects = yield* transects(shorelines, transects);
|
|
|
|
``` |
|
|
|
|
|
|
|
#### **Inputs:**
|
|
|
|
|
|
|
|
No input parameters for this function.
|
|
|
|
|
|
|
|
#### **Output:**
|
|
|
|
|
|
|
|
Renders a map to select the |
|
|
\ No newline at end of file |
