''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====
''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====
''Allows the user to select a time period to search for images. The selected start and end dates are dispatched to the store.''
====BathymetryBandsAndAlgorithmSelection====
''Allows the user to select the bands and algorithm to apply in the bathymetry processing. The selected configuration is updated in the BathymetryResults object.''
===ProcessingBathymetryPage===
''Shows the results of the bathymetry processing. The user can download the bathymetry image and view the generated statistics.''
==ProcessingPage(props)==
## MainPage(match)
''Page that shows the processing of the selected algorithm (bathymetry, shoreline, coastal squeeze).''
''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.''
''Applies a thresholding algorithm to extract the shoreline from a satellite image. Returns a FeatureCollection with the shoreline geometries.''
==Bathemetry/index.jsx==
*`This is the main page of the application. It handles the routes and redirects the user to the correct page according to the URL.`*
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:
===BathymetryResults.isBathymetry()===
### SelectionPage
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.
===BathymetryResults.getTrainingDataAsMatrix()===
*`The user is presented with options to choose an algorithm for analysis (bathymetry, shoreline, coastal squeeze).`*
This function retrieves the training data from the session storage and parses it into a matrix format.
This function retrieves the training data from the session storage and converts it into an Earth Engine FeatureCollection.
===BathymetryResults.getCoordinatesSystem()===
*`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 retrieves the coordinate system information from the session storage.
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.
===BathymetryResults.getSelectedImage()===
*`Allows the user to select a satellite for the bathymetry analysis. The selected satellite is dispatched to the store.`*
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.
===BathymetryResults.mask(img)===
#### AOIChooser
This function applies a cloud and water mask to the given Sentinel-2 Image. The img parameter represents the image to be masked.
==ProcessingBathemetryPage/index.jsx==
*`Allows the user to draw an area of interest (AOI) on the map. The geometry of the AOI is dispatched to the store.`*
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:
===BathymetryResults.getBathymetryImage()===
#### PeriodChooser
This function returns the bathymetry image calculated by the bathymetry algorithm.
===BathymetryResults.getBathymetryParams()===
*`Allows the user to select a time period to search for images. The selected start and end dates are dispatched to the store.`*
This function returns the visualization parameters for the bathymetry image.
==ProcessingPage/index.jsx==
#### BathymetryBandsAndAlgorithmSelection
This file represents the page that shows the results of the processing. It displays the processed image and allows downloading the results.
==components/*==
*`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 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.
### ProcessingBathymetryPage
== Code Used in Bathymetry ==
*`Shows the results of the bathymetry processing. The user can download the bathymetry image and view the generated statistics.`*
## ProcessingPage(props)
*`Page that shows the processing of the selected algorithm (bathymetry, shoreline, coastal squeeze).`*` `
*`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.`*
// Register the dialogs when the component is mounted
// Register the dialogs when the component is mounted
registerDialogs();
registerDialogs();
...
@@ -108,20 +169,30 @@ component={ProblemsPage}
...
@@ -108,20 +169,30 @@ component={ProblemsPage}
</div>
</div>
);
);
};
};
</syntaxhighlight>
```
#### **Inputs:**
===='''Inputs:'''====
No input parameters for this function.
No input parameters for this function.
===='''Output:'''====
#### **Output:**
Renders the main layout of the application with the appropriate components based on the route.
===='''Use'''====
Renders the main layout of the application with the appropriate
This function is used to handle routing in the application. Based on the route, it renders the appropriate page component.
components based on the route.
#### **Use**
This function is used to handle routing in the application. Based on the
route, it renders the appropriate page component.
### **Bathemetry**
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.
``` javascript
=== '''Bathemetry''' ===
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.
This function is used to handle the bathymetry analysis workflow. It contains the steps required for bathymetry analysis like:
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
It navigates between these steps based on the route and ensures the
pre-requisites for each step are met before rendering them.
1. Area of interest selection
### **ProcessingBathemetryPage**
2. Image selection
3. Bands and algorithm selection
4. Threshold selection
It navigates between these steps based on the route and ensures the pre-requisites for each step are met before rendering them.
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.
``` javascript
=== '''ProcessingBathemetryPage''' ===
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.
Renders the results of the bathymetry analysis like the predicted bathymetry image, statistics and download options.
Renders the results of the bathymetry analysis like the predicted
bathymetry image, statistics and download options.
#### **Use**
This function is used to display the results of the bathymetry analysis.
It shows:
===='''Use'''====
1\. The predicted bathymetry image 2. Statistics like RMSE, bias, slope
This function is used to display the results of the bathymetry analysis. It shows:
etc. 3. Options to download the bathymetry image and statistics
1. The predicted bathymetry image
It handles processing the bathymetry analysis based on the inputs
2. Statistics like RMSE, bias, slope etc.
provided in the previous steps and displays the results to the user.
3. Options to download the bathymetry image and statistics
It handles processing the bathymetry analysis based on the inputs provided in the previous steps and displays the results to the user.
### **ProcessingPage**
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.
``` javascript
=== '''ProcessingPage''' ===
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.
It handles processing the shoreline change analysis based on the inputs
provided in the previous steps and displays the results to the user.
### **SelectionPage**
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.
``` javascript
=== '''SelectionPage''' ===
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.
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.
Renders options to select bands and graphs to select the algorithm for bathymetry analysis.
Renders options to select bands and graphs to select the algorithm for
bathymetry analysis.
#### **Use**
This function is used to select bands and algorithm for bathymetry
analysis. It shows:
===='''Use'''====
1\. Options to select two bands for the analysis. 2. Graphs showing the
This function is used to select bands and algorithm for bathymetry analysis. It shows:
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.
1. Options to select two bands for the analysis.
### **AOIChooser**
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.
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
=== '''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.
