Changes

Page history
Update Shoreline authored by Ramicés dos Santos Silva's avatar Ramicés dos Santos Silva
Show whitespace changes
Inline Side-by-side
Shoreline.md
View page @ 8c42e686
......@@ -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
This documentation provides a detailed explanation of the user
interaction pages in the Shoreline module.
![bathmetry](https://codigos.ufsc.br/loc/cassie/-/wikis/uploads/58eb67f8b3a9c1acd4804f7a00eee3d9/bathmetry.png)
## MainPage(match)
## Diagram
_`This is the main page of the application. It handles the routes and redirects the user to the correct page according to the URL.`_
![bathmetry](https://codigos.ufsc.br/loc/cassie/-/wikis/uploads/58eb67f8b3a9c1acd4804f7a00eee3d9/bathmetry.png)
### SelectionPage
## SelectionPage
_`The user is presented with options to choose an algorithm for analysis (bathymetry, shoreline, coastal squeeze).`_
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 .
### Bathemetry(props)
### push('/processing')
_`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:`_
This function redirects the user to the ProcessingPage when they select
the Shoreline Analyst option.
#### SatelliteChooser
## ProcessingPage
_`Allows the user to select a satellite for the bathymetry analysis. The selected satellite is dispatched to the store.`_
The ProcessingPage is the page where users go through the steps of the
shoreline analysis.
#### AOIChooser
## ProcessingPage
_`Allows the user to draw an area of interest (AOI) on the map. The geometry of the AOI is dispatched to the store.`_
*Page that shows the processing of the selected algorithm (bathymetry,
shoreline or coastal squeeze).*
#### PeriodChooser
This page guides the user through the steps of the shoreline analysis.
The steps are as follows:
_`Allows the user to select a time period to search for images. The selected start and end dates are dispatched to the store.`_
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.
#### BathymetryBandsAndAlgorithmSelection
### useSelector(getAcquisitionParameters)
_`Allows the user to select the bands and algorithm to apply in the bathymetry processing. The selected configuration is updated in the BathymetryResults object.`_
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.
### ProcessingBathymetryPage
## AlgorithmCard
_`Shows the results of the bathymetry processing. The user can download the bathymetry image and view the generated statistics.`_
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.
## ProcessingPage(props)
## Function Calls within Shoreline Analysis Steps
_`Page that shows the processing of the selected algorithm (bathymetry, shoreline, coastal squeeze).`_` `
The following function calls are made within the Shoreline Analyst steps
of the ProcessingPage :
### deriveShorelines(images, geometry, spacing, extension, thresholds)
### getAvailableImages(geometry, startDate, endDate)
_`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.`_
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.
### extractShoreline(image, geometry, spacing, extension, threshold)
### createTransects(geometry, transectSpacing, transectExtension)
_`Applies a thresholding algorithm to extract the shoreline from a satellite image. Returns a FeatureCollection with the shoreline geometries.`_
This function creates transects (lines) within the defined region of
interest based on the user-entered parameters for transect spacing and
extension.
## Bathemetry/index.jsx
### extraction(images, threshold)
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 extracts shorelines from the selected images. The
threshold parameter is used to determine the land-water boundary.
### BathymetryResults.isBathymetry()
### statistics(shorelines)
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.
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.getTrainingDataAsMatrix()
### transects(shorelines)
This function retrieves the training data from the session storage and parses it into a matrix format.
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.
### BathymetryResults.getTrainingDataAsFeatureCollection()
## Code Used in Shoreline
This function retrieves the training data from the session storage and converts it into an Earth Engine FeatureCollection.
### **push('/processing')**
### BathymetryResults.getCoordinatesSystem()
Redirects to the processing page.
This function retrieves the coordinate system information from the session storage.
``` javascript
### BathymetryResults.getMedianImage(collectionName, geometry, dtBegin, dtEnd)
dispatch(push('/processing'));
```
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.
#### **Inputs:**
### BathymetryResults.getSelectedImage()
No input parameters for this function.
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.
#### **Output:**
### BathymetryResults.mask(img)
Redirects to '/processing' page.
This function applies a cloud and water mask to the given Sentinel-2 Image. The img parameter represents the image to be masked.
#### **Use**
## ProcessingBathemetryPage/index.jsx
Call this function to redirect to the processing page.
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:
``` javascript
### BathymetryResults.getBathymetryImage()
push('/processing');
```
This function returns the bathymetry image calculated by the bathymetry algorithm.
### **useSelector(getAcquisitionParameters)**
### BathymetryResults.getBathymetryParams()
Extracts acquisition parameters from the store.
This function returns the visualization parameters for the bathymetry image.
``` javascript
## ProcessingPage/index.jsx
const acquisitionData = useSelector(getAcquisitionParameters, shallowEqual);
```
This file represents the page that shows the results of the processing. It displays the processed image and allows downloading the results.
#### **Inputs:**
## components/\*
getAcquisitionParameters: Selector function to extract data from the
store.
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.
#### **Output:**
## Code Used in Bathymetry
acquisitionData: The acquisition parameters extracted from the store.
### **MainPage**
#### **Use**
This is the main page of the application. It contains the routes for the application and renders the appropriate components based on the route.
Call this hook to extract data from the Redux 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>
);
};
const someData = useSelector(someSelector);
```
#### **Inputs:**
### **getAvailableImages(geometry, startDate, endDate)**
No input parameters for this function.
Fetches available satellite images within a geometry and time period.
#### **Output:**
``` javascript
Renders the main layout of the application with the appropriate components based on the route.
//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);
#### **Use**
const process = (available) => {
// Retrieve the globally extreme dates (earliest and latest)
const global = retrieveExtremes(available);
This function is used to handle routing in the application. Based on the route, it renders the appropriate page component.
// Compute the grid position of each image and sort in ascending order
const enhanced = available
.map(addGridPosition)
.sort(Metadata.GRID_POSITION);
### **Bathemetry**
// Retrieve the northeasternmost grid position within the specified bounds
const northeasternPosition = ee
.Image(enhanced.toList(1).get(0))
.get(Metadata.GRID_POSITION);
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.
// Keep images in the slice where the satellite passed first (northeast)
const filtered = enhanced.filter(
ee.Filter.eq(Metadata.GRID_POSITION, northeasternPosition)
);
```javascript
// 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)
);
const Bathemetry = (props) => {
// Check if the user is authenticated
dispatch(Auth.begin());
return ee.Image(0).set(properties);
});
// Check if the step is valid and check the requirements
if (!stepAttendsRequirements()) {
// If it is not, redirect to the first step
navigate(FIRST);
}
// Keep only the images whose combined geometries contain the AOI
const valid = ee.ImageCollection.fromImages(carriers).filter(
ee.Filter.contains(Metadata.FOOTPRINT, geometry)
);
// Other code...
// For now only the date of the slice is important.
return ee.List(valid.toList(valid.size()).map(getDate));
};
return (
<div className={classes.wrapper}>
// Render the steps...
</div>
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:
Call this generator function to get available satellite images within a
given area and time range.
1\. Area of interest selection 2. Image selection 3. Bands and algorithm selection 4. Threshold selection
``` javascript
It navigates between these steps based on the route and ensures the pre-requisites for each step are met before rendering them.
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...
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:
Call this generator function to generate transects within a given
geometry.
1\. The predicted bathymetry image 2. Statistics like RMSE, bias, slope etc. 3. Options to download the bathymetry image and statistics
``` javascript
It handles processing the bathymetry analysis based on the inputs provided in the previous steps and displays the results to the user.
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
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:
Call this generator function to extract shorelines from a list of
images.
1\. Shoreline change maps 2. Transect report 3. Transect evolution graphs 4. Options to download the results
``` javascript
It handles processing the shoreline change analysis based on the inputs provided in the previous steps and displays the results to the user.
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
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.
``` javascript
When the user selects an option, they are navigated to the corresponding workflow.
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();
// 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**
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.
Call this generator function to generate transects from shorelines and
calculate transect-based shoreline change statistics.
``` javascript
const AOIChooser = () => {
const dispatch = useDispatch();
const [t] = useTranslation();
const classes = useStyles();
// 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