Skip to content

GitLab

Bathymetry · Changes

Page history
Update Bathymetry authored by Ramicés dos Santos Silva's avatar Ramicés dos Santos Silva
Hide whitespace changes
Inline Side-by-side
Bathymetry.md
View page @ 24aee804
= Activity Documentation for Bathymetry Module = # Activity Documentation for Bathymetry Module
This documentation provides a detailed explanation of the user interaction pages in the Bathymetry module. This documentation provides a detailed explanation of the user
interaction pages in the Bathymetry module.
== Diagram ==
[[Arquivo:Bathmetry Diagram.png|1100x1100px]] ## Diagram
==MainPage(match)== [1100x1100px](Arquivo:Bathmetry_Diagram.png "wikilink")
''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=== ## MainPage(match)
''The user is presented with options to choose an algorithm for analysis (bathymetry, shoreline, coastal squeeze).''
===Bathemetry(props)=== *`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 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==== ### SelectionPage
''Allows the user to select a satellite for the bathymetry analysis. The selected satellite is dispatched to the store.''
====AOIChooser==== *`The user is presented with options to choose an algorithm for analysis (bathymetry, shoreline, coastal squeeze).`*
''Allows the user to draw an area of interest (AOI) on the map. The geometry of the AOI is dispatched to the store.''
====PeriodChooser==== ### Bathemetry(props)
''Allows the user to select a time period to search for images. The selected start and end dates are dispatched to the store.''
====BathymetryBandsAndAlgorithmSelection==== *`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:`*
''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=== #### SatelliteChooser
''Shows the results of the bathymetry processing. The user can download the bathymetry image and view the generated statistics.''
*`Allows the user to select a satellite for the bathymetry analysis. The selected satellite is dispatched to the store.`*
==ProcessingPage(props)==
''Page that shows the processing of the selected algorithm (bathymetry, shoreline, coastal squeeze).'' #### AOIChooser
===deriveShorelines(images, geometry, spacing, extension, thresholds)===
''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.'' *`Allows the user to draw an area of interest (AOI) on the map. The geometry of the AOI is dispatched to the store.`*
===extractShoreline(image, geometry, spacing, extension, threshold)===
''Applies a thresholding algorithm to extract the shoreline from a satellite image. Returns a FeatureCollection with the shoreline geometries.'' #### PeriodChooser
==Bathemetry/index.jsx== *`Allows the user to select a time period to search for images. The selected start and end dates are dispatched to the store.`*
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:
#### BathymetryBandsAndAlgorithmSelection
===BathymetryResults.isBathymetry()===
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. *`Allows the user to select the bands and algorithm to apply in the bathymetry processing. The selected configuration is updated in the BathymetryResults object.`*
===BathymetryResults.getTrainingDataAsMatrix()=== ### ProcessingBathymetryPage
This function retrieves the training data from the session storage and parses it into a matrix format.
*`Shows the results of the bathymetry processing. The user can download the bathymetry image and view the generated statistics.`*
===BathymetryResults.getTrainingDataAsFeatureCollection()===
This function retrieves the training data from the session storage and converts it into an Earth Engine FeatureCollection. ## ProcessingPage(props)
===BathymetryResults.getCoordinatesSystem()=== *`Page that shows the processing of the selected algorithm (bathymetry, shoreline, coastal squeeze).`*`  `
This function retrieves the coordinate system information from the session storage.
### deriveShorelines(images, geometry, spacing, extension, thresholds)
===BathymetryResults.getMedianImage(collectionName, geometry, dtBegin, dtEnd)===
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. *`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.`*
===BathymetryResults.getSelectedImage()=== ### extractShoreline(image, geometry, spacing, extension, threshold)
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.
*`Applies a thresholding algorithm to extract the shoreline from a satellite image. Returns a FeatureCollection with the shoreline geometries.`*
===BathymetryResults.mask(img)===
This function applies a cloud and water mask to the given Sentinel-2 Image. The img parameter represents the image to be masked. ## Bathemetry/index.jsx
==ProcessingBathemetryPage/index.jsx==
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()===
This function returns the bathymetry image calculated by the bathymetry algorithm.
===BathymetryResults.getBathymetryParams()===
This function returns the visualization parameters for the bathymetry image.
==ProcessingPage/index.jsx==
This file represents the page that shows the results of the processing. It displays the processed image and allows downloading the results.
==components/*==
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.
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:
== Code Used in Bathymetry == ### BathymetryResults.isBathymetry()
=== '''MainPage''' === This function checks if the current page is the bathymetry page. It
This is the main page of the application. It contains the routes for the application and renders the appropriate components based on the route. returns a boolean value, indicating whether the page is the bathymetry
<syntaxhighlight lang="javascript" line="1" start="1"> page or not.
### BathymetryResults.getTrainingDataAsMatrix()
This function retrieves the training data from the session storage and
parses it into a matrix format.
### BathymetryResults.getTrainingDataAsFeatureCollection()
This function retrieves the training data from the session storage and
converts it into an Earth Engine FeatureCollection.
### BathymetryResults.getCoordinatesSystem()
This function retrieves the coordinate system information from the
session storage.
### BathymetryResults.getMedianImage(collectionName, geometry, dtBegin, dtEnd)
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()
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)
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
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()
This function returns the bathymetry image calculated by the bathymetry
algorithm.
### BathymetryResults.getBathymetryParams()
This function returns the visualization parameters for the bathymetry
image.
## ProcessingPage/index.jsx
This file represents the page that shows the results of the processing.
It displays the processed image and allows downloading the results.
## components/\*
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.
## Code Used in Bathymetry
### **MainPage**
This is the main page of the application. It contains the routes for the
application and renders the appropriate components based on the route.
``` javascript
const MainPage = ({ match }) => { const MainPage = ({ match }) => {
// 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:'''====
Renders the main layout of the application with the appropriate components based on the route. #### **Output:**
===='''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.
<syntaxhighlight lang="javascript" line="1" start="1">
const Bathemetry = (props) => { const Bathemetry = (props) => {
// Check if the user is authenticated // Check if the user is authenticated
dispatch(Auth.begin()); dispatch(Auth.begin());
...@@ -140,27 +211,35 @@ return ( ...@@ -140,27 +211,35 @@ return (
</div> </div>
); );
}; };
</syntaxhighlight> ```
===='''Inputs:'''==== #### **Inputs:**
No input parameters for this function.
No input parameters for this function.
===='''Output:'''====
Renders the bathymetry analysis workflow. #### **Output:**
===='''Use'''==== Renders the bathymetry analysis workflow.
This function is used to handle the bathymetry analysis workflow. It contains the steps required for bathymetry analysis like:
#### **Use**
1. Area of interest selection
2. Image selection This function is used to handle the bathymetry analysis workflow. It
3. Bands and algorithm selection contains the steps required for bathymetry analysis like:
4. Threshold selection
1\. Area of interest selection 2. Image selection 3. Bands and algorithm
It navigates between these steps based on the route and ensures the pre-requisites for each step are met before rendering them. 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.
### **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.
``` 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.
<syntaxhighlight lang="javascript" line="1" start="1">
const ProcessingBathymetryPage = () => { const ProcessingBathymetryPage = () => {
// Check if the user is drawing a shape // Check if the user is drawing a shape
const isDrawing = useSelector((state) => state.map.currentlyDrawing); const isDrawing = useSelector((state) => state.map.currentlyDrawing);
...@@ -180,26 +259,36 @@ return ( ...@@ -180,26 +259,36 @@ return (
</Box> </Box>
); );
}; };
</syntaxhighlight> ```
===='''Inputs:'''==== #### **Inputs:**
No input parameters for this function.
No input parameters for this function.
===='''Output:'''====
Renders the results of the bathymetry analysis like the predicted bathymetry image, statistics and download options. #### **Output:**
===='''Use'''==== Renders the results of the bathymetry analysis like the predicted
This function is used to display the results of the bathymetry analysis. It shows: bathymetry image, statistics and download options.
1. The predicted bathymetry image #### **Use**
2. Statistics like RMSE, bias, slope etc.
3. Options to download the bathymetry image and statistics This function is used to display the results of the bathymetry analysis.
It shows:
It handles processing the bathymetry analysis based on the inputs provided in the previous steps and displays the results to the user.
1\. The predicted bathymetry image 2. Statistics like RMSE, bias, slope
etc. 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.
<syntaxhighlight lang="javascript" line="1" start="1">
const ProcessingPage = () => { const ProcessingPage = () => {
// Get the analysis results from the store // Get the analysis results from the store
const { transects, baseline, shorelines } = useSelector( const { transects, baseline, shorelines } = useSelector(
...@@ -214,27 +303,37 @@ return ( ...@@ -214,27 +303,37 @@ return (
</Box> </Box>
); );
}; };
</syntaxhighlight> ```
===='''Inputs:'''==== #### **Inputs:**
No input parameters for this function.
No input parameters for this function.
===='''Output:'''====
Renders the results of the shoreline change analysis like shoreline change maps, transect report, transect evolution graphs and download options. #### **Output:**
===='''Use'''==== Renders the results of the shoreline change analysis like shoreline
This function is used to display the results of the shoreline change analysis. It shows: change maps, transect report, transect evolution graphs and download
options.
1. Shoreline change maps
2. Transect report #### **Use**
3. Transect evolution graphs
4. Options to download the results This function is used to display the results of the shoreline change
analysis. It shows:
It handles processing the shoreline change analysis based on the inputs provided in the previous steps and displays the results to the user.
1\. Shoreline change maps 2. Transect report 3. Transect evolution
graphs 4. 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.
<syntaxhighlight lang="javascript" line="1" start="1">
const SelectionPage = () => { const SelectionPage = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [t] = useTranslation(); const [t] = useTranslation();
...@@ -248,25 +347,39 @@ return ( ...@@ -248,25 +347,39 @@ return (
</HomePageLayout> </HomePageLayout>
); );
}; };
</syntaxhighlight> ```
===='''Inputs:'''==== #### **Inputs:**
No input parameters for this function.
No input parameters for this function.
===='''Output:'''====
Renders the landing page of the application with options to start bathymetry analysis, shoreline change analysis and coastal squeeze. #### **Output:**
===='''Use'''==== Renders the landing page of the application with options to start
This function is used to render the landing page of the application. It shows: bathymetry analysis, shoreline change analysis and coastal squeeze.
1. An overview of the capabilities of the application like bathymetry analysis, shoreline change analysis and coastal squeeze. #### **Use**
2. Options to start bathymetry analysis, shoreline change analysis and coastal squeeze.
This function is used to render the landing page of the application. It
When the user selects an option, they are navigated to the corresponding workflow. shows:
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.
### **BathymetryBandsAndAlgorithmSelection**
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.
``` javascript
=== '''BathymetryBandsAndAlgorithmSelection''' ===
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.
<syntaxhighlight lang="javascript" line="1" start="1">
const BathymetryBandsAndAlgorithmSelection = () => { const BathymetryBandsAndAlgorithmSelection = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [t] = useTranslation(); const [t] = useTranslation();
...@@ -279,24 +392,37 @@ return ( ...@@ -279,24 +392,37 @@ return (
</Box> </Box>
); );
}; };
</syntaxhighlight> ```
===='''Inputs:'''==== #### **Inputs:**
No input parameters for this function.
No input parameters for this function.
===='''Output:'''====
Renders options to select bands and graphs to select the algorithm for bathymetry analysis. #### **Output:**
===='''Use'''==== Renders options to select bands and graphs to select the algorithm for
This function is used to select bands and algorithm for bathymetry analysis. It shows: bathymetry analysis.
1. Options to select two bands for the analysis. #### **Use**
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 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.
``` 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.
<syntaxhighlight lang="javascript" line="1" start="1">
const AOIChooser = () => { const AOIChooser = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [t] = useTranslation(); const [t] = useTranslation();
...@@ -310,10 +436,12 @@ return ( ...@@ -310,10 +436,12 @@ return (
</Box> </Box>
); );
}; };
</syntaxhighlight> ```
===='''Inputs:'''==== #### **Inputs:**
No input parameters for this function.
No input parameters for this function.
===='''Output:'''====
Renders a map to select the #### **Output:**
\ No newline at end of file
Renders a map to select the