Activity Documentation for Bathymetry Module

This documentation provides a detailed explanation of the user interaction pages in the Bathymetry 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

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)

Page that shows the processing of the selected algorithm (bathymetry, shoreline, coastal squeeze).  

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.

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.

Bathemetry/index.jsx

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()

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()

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.

 
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> 
); 
}; 

Inputs:

No input parameters for this function.

Output:

Renders the main layout of the application with the appropriate 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.

 
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... 
 
return (   
<div className={classes.wrapper}> 
// Render the steps...  
</div> 
); 
}; 

Inputs:

No input parameters for this function.

Output:

Renders the bathymetry analysis workflow.

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

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.

 
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>  
); 
}; 

Inputs:

No input parameters for this function.

Output:

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:

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.

 
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> 
); 
}; 

Inputs:

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.

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

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.

 
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> 
);   
}; 

Inputs:

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.

Use

This function is used to render the landing page of the application. It 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.

 
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> 
); 
};  

Inputs:

No input parameters for this function.

Output:

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:

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.

 
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>   
); 
}; 

Inputs:

No input parameters for this function.

Output:

Renders a map to selected area.