Skip to content

GitLab

CSqueeze · Changes

Page history
Update CSqueeze authored by Ramicés dos Santos Silva's avatar Ramicés dos Santos Silva
Show whitespace changes
Inline Side-by-side
CSqueeze.md
View page @ 5e956fc8
......@@ -9,152 +9,188 @@
</details>
# Activity Documentation for Bathymetry Module
# Activity Documentation for Csqueeze 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 Csqueeze module.
## Diagram
![bathmetry](https://codigos.ufsc.br/loc/cassie/-/wikis/uploads/58eb67f8b3a9c1acd4804f7a00eee3d9/bathmetry.png)
[1100x1100px](Arquivo:Csqueeze_Activity_Diagram.png "wikilink")
## MainPage(match)
## app/pages/SelectionPage
_`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 page shows the options available to the user. When the user chooses
the Coastal Squeeze option, the page redirects to the app/pages/CSqueeze
page.
### SelectionPage
## app/pages/CSqueeze
_`The user is presented with options to choose an algorithm for analysis (bathymetry, shoreline, coastal squeeze).`_
This page contains the steps to perform the Coastal Squeeze analysis.
### Bathemetry(props)
## app/pages/ProcessingPage
_`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 page shows the processing screen for the Coastal Squeeze analysis.
#### SatelliteChooser
## app/components/csqueeze/AOIChooser
_`Allows the user to select a satellite for the bathymetry analysis. The selected satellite is dispatched to the store.`_
This component is responsible for the user to choose the Area of
Interest (AOI). It has the following functions:
#### AOIChooser
### getMangroves()
_`Allows the user to draw an area of interest (AOI) on the map. The geometry of the AOI is dispatched to the store.`_
This function, from algorithms/csqueeze, uses the "ESA/WorldCover/v200"
collection to get possible mangrove areas around the world.
#### PeriodChooser
### useEffect()
_`Allows the user to select a time period to search for images. The selected start and end dates are dispatched to the store.`_
This useEffect calls getMangroves() when the component is mounted to
show possible mangrove areas on the map.
#### BathymetryBandsAndAlgorithmSelection
### handleMapClick()
_`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 is called when the user clicks on the map. It starts the
drawing of the AOI using the Google Maps Drawing Manager.
### ProcessingBathymetryPage
### endDrawing()
_`Shows the results of the bathymetry processing. The user can download the bathymetry image and view the generated statistics.`_
This function is called when the drawing of the AOI is finished. It gets
the AOI coordinates, area, and overlay and saves them in the state and
in the Redux store using dispatch(Acquisition.setAreaOfInterest()).
## ProcessingPage(props)
## app/components/csqueeze/YearsSelect
_`Page that shows the processing of the selected algorithm (bathymetry, shoreline, coastal squeeze).`_`  `
This component shows a slider for the user to select two years to
perform the analysis. When the years are selected, they are saved in the
Redux store using dispatch(Acquisition.setDates()).
### deriveShorelines(images, geometry, spacing, extension, thresholds)
## app/components/csqueeze/ImagesSelect
_`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 component shows the available images for the selected years and
AOI. The user must choose at least one image for each year. When the
images are selected, they are saved in the Redux store using
dispatch(Acquisition.setImages()).
### extractShoreline(image, geometry, spacing, extension, threshold)
## app/components/csqueeze/CloudFilters
_`Applies a thresholding algorithm to extract the shoreline from a satellite image. Returns a FeatureCollection with the shoreline geometries.`_
This component shows the available cloud filters for the selected
images. The user must choose at least one filter. When the filters are
selected, they are saved in the Redux store using
dispatch(Acquisition.setCloudFilters()).
## Bathemetry/index.jsx
## app/components/csqueeze/LandCover
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 component shows the map with the selected images and AOI. The user
must draw at least one polygon of mangrove and another type of land
cover. When the polygons are drawn, they are saved in the Redux store
using dispatch(Acquisition.setLandCover()).
### BathymetryResults.isBathymetry()
## algorithms/acquisition
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 module contains the functions to acquire the satellite images and
perform the cloud masking.
### BathymetryResults.getTrainingDataAsMatrix()
### getSatelliteImages()
This function retrieves the training data from the session storage and parses it into a matrix format.
This function gets the satellite images for the selected years and AOI
using the Google Earth Engine API.
### BathymetryResults.getTrainingDataAsFeatureCollection()
### maskClouds()
This function retrieves the training data from the session storage and converts it into an Earth Engine FeatureCollection.
This function masks the clouds in the selected images using the cloud
filters selected by the user.
### BathymetryResults.getCoordinatesSystem()
## algorithms/geodesy
This function retrieves the coordinate system information from the session storage.
This module contains the functions to perform the geodesic calculations.
### BathymetryResults.getMedianImage(collectionName, geometry, dtBegin, dtEnd)
### calculateArea()
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 calculates the area of the AOI in square kilometers using
the Haversine formula.
### BathymetryResults.getSelectedImage()
### calculateDistance()
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 the distance between two points in meters using
the Vincenty formula.
### BathymetryResults.mask(img)
## algorithms/satellite
This function applies a cloud and water mask to the given Sentinel-2 Image. The img parameter represents the image to be masked.
This module contains the functions to perform the Coastal Squeeze
analysis.
## ProcessingBathemetryPage/index.jsx
### calculateNDVI()
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:
This function calculates the Normalized Difference Vegetation Index
(NDVI) for the selected images.
### BathymetryResults.getBathymetryImage()
### calculateShoreline()
This function returns the bathymetry image calculated by the bathymetry algorithm.
This function calculates the shoreline for the selected images using the
mangrove and land cover polygons drawn by the user.
### BathymetryResults.getBathymetryParams()
## algorithms/utils
This function returns the visualization parameters for the bathymetry image.
This module contains utility functions used in the Coastal Squeeze
analysis.
## ProcessingPage/index.jsx
### getPolygonArea()
This file represents the page that shows the results of the processing. It displays the processed image and allows downloading the results.
This function calculates the area of a polygon in square kilometers
using the Shoelace formula.
## components/\*
### getPolygonPerimeter()
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 function calculates the perimeter of a polygon in meters using the
Haversine formula.
## Code Used in Bathymetry
## app/pages/ProcessingPage
### **MainPage**
This page shows the final maps and analysis for the Coastal Squeeze. It
uses the data saved in the Redux store from the previous steps.
This is the main page of the application. It contains the routes for the application and renders the appropriate components based on the route.
### useEffect()
```javascript
This useEffect calls the following functions when the component is
mounted:
const MainPage = ({ match }) => {
// Register the dialogs when the component is mounted
registerDialogs();
\- getSatelliteImages() - maskClouds() - calculateNDVI() -
calculateShoreline()
// useStyles hook to inject custom styles
const classes = useStyles();
### calculateCoastalSqueeze()
return (
<div className={classes.wrapper}>
<DialogRoot />
This function calculates the Coastal Squeeze index for the selected
images and displays the results on the map. It uses the following
functions:
<NavigationBar />
\- calculateArea() - calculateDistance() - getPolygonArea() -
getPolygonPerimeter()
<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>
The results are saved in the Redux store using
dispatch(Acquisition.setCoastalSqueeze()).
<ActivityIndicator />
</div>
);
};
## Code Used in Csqueeze
### **getMangroves()**
This function returns a Google Maps layer with possible mangrove areas
around the world using the "ESA/WorldCover/v200" collection.
``` javascript
function getMangroves() {
var mangroves = ee.ImageCollection("ESA/WorldCover/v200")
.filter(ee.Filter.eq("class", 2))
.mosaic()
.clipToCollection(AOI);
var visParams = {
min: 0.0,
max: 1.0,
palette: ["#687537"],
};
var mapLayer = mangroves.visualize(visParams);
return mapLayer;
}
```
#### **Inputs:**
......@@ -163,231 +199,481 @@ No input parameters for this function.
#### **Output:**
Renders the main layout of the application with the appropriate components based on the route.
Google Maps layer with possible mangrove areas.
#### **Use**
This function is used to handle routing in the application. Based on the route, it renders the appropriate page component.
To use this function, simply call getMangroves() and add the returned
Google Maps layer to the map using map.addLayer().
``` javascript
var mangrovesLayer = getMangroves();
map.addLayer(mangrovesLayer);
```
### **useEffect()**
This React hook runs when the component mounts and unmounts. It adds a
Google Maps layer showing possible mangrove areas and a drawing manager
to the map.
``` javascript
useEffect(() => {
mangroveLayer.current = getMangroves();
mapRef.current.overlayMapTypes.push(mangroveLayer.current);
drawingManager.current = new google.maps.drawing.DrawingManager({
drawingMode: "rectangle",
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ["rectangle", "polygon"]
},
rectangleOptions: {
fillColor: "#00B3A1",
fillOpacity: 0.2,
strokeColor: "#003832",
strokeOpacity: 1,
strokeWeight: 0.5
}
});
drawingManager.current.setMap(mapRef.current);
}, []);
```
#### **Inputs:**
No input parameters. This is a React hook.
#### **Output:**
A Google Maps layer showing possible mangrove areas and a drawing
manager are added to the map.
### **Bathemetry**
#### **Use**
Since this is a React hook, it will run automatically when the component
mounts. No usage example is needed.
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.
### **handleMapClick()**
```javascript
This function handles clicks on the map. It checks if the click was
within the AOI and either starts or ends the drawing of a rectangle.
const Bathemetry = (props) => {
// Check if the user is authenticated
dispatch(Auth.begin());
``` javascript
// Check if the step is valid and check the requirements
if (!stepAttendsRequirements()) {
// If it is not, redirect to the first step
navigate(FIRST);
function handleMapClick(event) {
if (isPointInside(event.latLng, AOI.current.getPath())) {
if (!isDrawing.current) {
startDrawing(event.latLng);
setIsDrawing(true);
} else {
endDrawing(event.latLng);
setIsDrawing(false);
}
}
}
```
#### **Inputs:**
event - The click event on the map.
#### **Output:**
// Other code...
Either starts or ends the drawing of a rectangle on the map.
return (
<div className={classes.wrapper}>
// Render the steps...
</div>
);
};
#### **Use**
This function is set as the click listener on the map. Whenever the map
is clicked, this function will handle the click and check if the click
was within the AOI, in which case it will either start or end the
drawing of a rectangle.
``` javascript
mapRef.current.addListener("click", (event) => {
handleMapClick(event);
});
```
### **endDrawing()**
This function ends the drawing of a rectangle on the map. It checks if
the rectangle is within the AOI and if so, it stores the rectangle for
further use.
``` javascript
function endDrawing(endPoint) {
if (isRectangleInside(rectangle.current, AOI.current)) {
rectangles.current.push({
overlay: rectangle.current,
type: "rectangle"
});
} else {
rectangle.current.setMap(null);
}
drawingManager.current.setDrawingMode(null);
}
```
#### **Inputs:**
No input parameters for this function.
endPoint - The end point of the rectangle.
#### **Output:**
Renders the bathymetry analysis workflow.
Ends the drawing of the rectangle and either stores it for further use
or removes it from the map.
#### **Use**
This function is used to handle the bathymetry analysis workflow. It contains the steps required for bathymetry analysis like:
This function is called when ending the drawing of a rectangle to check
if it is within the AOI and handle it appropriately.
``` javascript
1\. Area of interest selection 2. Image selection 3. Bands and algorithm selection 4. Threshold selection
function handleMapClick(event) {
// ...
if (isDrawing.current) {
endDrawing(event.latLng);
setIsDrawing(false);
}
}
```
It navigates between these steps based on the route and ensures the pre-requisites for each step are met before rendering them.
### **getSatelliteImages()**
### **ProcessingBathemetryPage**
This function queries the Google Earth Engine API to get available
satellite images within a given geometry and time range. It returns a
list of image objects containing metadata for the images found.
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
```javascript
function getSatelliteImages(geometry, startDate, endDate) {
var imageList = [];
var imageCollection = ee.ImageCollection("LANDSAT/LC08/C01/T1_SR")
.filterBounds(geometry)
.filterDate(startDate, endDate);
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();
var count = imageCollection.size();
print("Total de imagens:", count);
// Code to process the bathymetry analysis and get the results...
for (var i = 0; i < count; i++) {
var image = imageCollection.toList(count).get(i);
var date = ee.Date(image.get("system:time_start"));
var cloudCover = image.get("CLOUD_COVER");
return (
<Box className={classes.wrapper}>
{/* Render the results */}
</Box>
);
};
imageList.push({
id: i,
date: date.format("YYYY-MM-dd"),
url: image.getThumbURL({ dimensions: 256 }),
cloudCover: cloudCover
});
}
return imageList;
}
```
#### **Inputs:**
No input parameters for this function.
geometry - The geometry to query images within. startDate - The start
date of the time range to query. endDate - The end date of the time
range to query.
#### **Output:**
Renders the results of the bathymetry analysis like the predicted bathymetry image, statistics and download options.
A list of image objects containing metadata for the images found.
#### **Use**
This function is used to display the results of the bathymetry analysis. It shows:
This function can be used to query satellite images within a given area
and time range. The returned list of images can then be used to select
images for analysis.
``` javascript
var images = getSatelliteImages(geometry, "2020-01-01", "2020-12-31");
// Use images for selecting images, displaying thumbnails, etc.
```
1\. The predicted bathymetry image 2. Statistics like RMSE, bias, slope etc. 3. Options to download the bathymetry image and statistics
### **maskClouds()**
It handles processing the bathymetry analysis based on the inputs provided in the previous steps and displays the results to the user.
This function masks clouds in a Landsat 8 image using the CFmask band.
It returns a new image with the cloudy pixels masked.
### **ProcessingPage**
``` javascript
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.
function maskClouds(image) {
var cfmask = image.select("cfmask");
var clouds = cfmask.eq(1); // Bit 1 is clouds
var shadows = cfmask.eq(2); // Bit 2 is shadows
var mask = clouds.or(shadows);
return image.updateMask(mask.not());
}
```
```javascript
#### **Inputs:**
const ProcessingPage = () => {
// Get the analysis results from the store
const { transects, baseline, shorelines } = useSelector(
(state) => state.shoreline.results
);
image - The Landsat 8 image to mask clouds in.
// Code to process the shoreline change analysis and get the results...
#### **Output:**
return (
<Box className={classes.wrapper}>
{/* Render the results */}
</Box>
);
};
A new image with the cloudy pixels masked.
#### **Use**
This function can be used to mask clouds in a Landsat 8 image before
performing analysis on the image.
``` javascript
var maskedImage = maskClouds(image);
// Use maskedImage for analysis
```
### **calculateArea()**
This function calculates the area of a polygon in square meters. It uses
the Google Maps Geometry library to calculate the area.
``` javascript
function calculateArea(polygon) {
var area = 0;
var len = polygon.length;
var j = len - 1;
for (var i = 0; i < len; i++) {
area += (polygon[j].x + polygon[i].x) * (polygon[j].y - polygon[i].y);
j = i;
}
return Math.abs(area / 2);
}
```
#### **Inputs:**
No input parameters for this function.
polygon - The polygon to calculate the area of, as a list of points.
#### **Output:**
Renders the results of the shoreline change analysis like shoreline change maps, transect report, transect evolution graphs and download options.
The area of the polygon in square meters.
#### **Use**
This function is used to display the results of the shoreline change analysis. It shows:
This function can be used to calculate the area of a polygon. Each point
in the polygon should be an object with x and y properties representing
the longitude and latitude of the point.
``` javascript
var area = calculateArea(polygon);
console.log("Area of polygon: " + area + " square meters");
```
### **calculateDistance()**
This function calculates the distance between two points in meters. It
uses the Google Maps Geometry library to calculate the distance.
``` javascript
function calculateDistance(point1, point2) {
return google.maps.geometry.spherical.computeDistanceBetween(point1, point2);
}
```
#### **Inputs:**
point1 - The first point as a google.maps.LatLng object. point2 - The
second point as a google.maps.LatLng object.
#### **Output:**
The distance between the two points in meters.
1\. Shoreline change maps 2. Transect report 3. Transect evolution graphs 4. Options to download the results
#### **Use**
This function can be used to calculate the distance between two points.
Each point should be a google.maps.LatLng object.
It handles processing the shoreline change analysis based on the inputs provided in the previous steps and displays the results to the user.
``` javascript
### **SelectionPage**
var distance = calculateDistance(point1, point2);
console.log("Distance between points: " + distance + " meters");
```
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.
### **calculateNDVI()**
```javascript
This function calculates the Normalized Difference Vegetation Index
(NDVI) for a given image. It uses bands 4 (Red) and 5 (Near Infrared) to
calculate the NDVI.
const SelectionPage = () => {
const dispatch = useDispatch();
const [t] = useTranslation();
const classes = useStyles();
``` javascript
return (
<HomePageLayout>
<Box className={classes.wrapper}>
{/* Render the options to start bathymetry analysis, shoreline change analysis and coastal squeeze */}
</Box>
</HomePageLayout>
);
};
function calculateNDVI(image) {
var nir = image.select("B5");
var red = image.select("B4");
var ndvi = nir.subtract(red).divide(nir.add(red)).rename("NDVI");
return image.addBands(ndvi);
}
```
#### **Inputs:**
No input parameters for this function.
image - The image to calculate the NDVI for.
#### **Output:**
Renders the landing page of the application with options to start bathymetry analysis, shoreline change analysis and coastal squeeze.
The image with the NDVI band added.
#### **Use**
This function is used to render the landing page of the application. It shows:
This function can be used to calculate the NDVI for a given image. The
image should be a Landsat 8 image.
``` javascript
var ndviImage = calculateNDVI(image);
// Use ndviImage for analysis
```
### **calculateShoreline()**
This function calculates the shoreline of a given image by thresholding
the NDVI and applying a morphological operation to remove small islands
and fill small holes.
``` javascript
function calculateShoreline(image) {
var ndvi = image.select("NDVI");
var threshold = ndvi.lt(0.2);
var shoreline = threshold.focal_mode(3);
return shoreline.rename("Shoreline");
}
```
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.
#### **Inputs:**
When the user selects an option, they are navigated to the corresponding workflow.
image - The image to calculate the shoreline for.
### **BathymetryBandsAndAlgorithmSelection**
#### **Output:**
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.
The image with the shoreline band added.
```javascript
#### **Use**
const BathymetryBandsAndAlgorithmSelection = () => {
const dispatch = useDispatch();
const [t] = useTranslation();
This function can be used to calculate the shoreline for a given image.
The image should be a Landsat 8 image with an NDVI band.
// Code to select bands and algorithm...
``` javascript
return (
<Box>
{/* Render options to select bands and graphs to select algorithm */}
</Box>
);
};
var shorelineImage = calculateShoreline(ndviImage);
// Use shorelineImage for analysis
```
### **getPolygonArea()**
This function calculates the area of a polygon in square kilometers. It
uses the Google Earth Engine API to calculate the area.
``` javascript
function getPolygonArea(polygon) {
return ee.Geometry(polygon).area().divide(1000000);
}
```
#### **Inputs:**
No input parameters for this function.
polygon - The polygon to calculate the area of, as an ee.Geometry
object.
#### **Output:**
Renders options to select bands and graphs to select the algorithm for bathymetry analysis.
The area of the polygon in square kilometers.
#### **Use**
This function is used to select bands and algorithm for bathymetry analysis. It shows:
This function can be used to calculate the area of a polygon. The
polygon should be an ee.Geometry object.
``` javascript
var area = getPolygonArea(polygon);
console.log("Area of polygon: " + area + " square kilometers");
```
### **getPolygonPerimeter()**
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.
This function calculates the perimeter of a polygon in kilometers. It
uses the Google Earth Engine API to calculate the perimeter.
### **AOIChooser**
``` javascript
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.
function getPolygonPerimeter(polygon) {
return ee.Geometry(polygon).perimeter().divide(1000);
}
```
#### **Inputs:**
```javascript
polygon - The polygon to calculate the perimeter of, as an ee.Geometry
object.
const AOIChooser = () => {
const dispatch = useDispatch();
const [t] = useTranslation();
const classes = useStyles();
#### **Output:**
The perimeter of the polygon in kilometers.
#### **Use**
// Code to select area of interest...
This function can be used to calculate the perimeter of a polygon. The
polygon should be an ee.Geometry object.
return (
<Box>
{/* Render map to draw area of interest and options to import from KML */}
</Box>
);
};
``` javascript
var perimeter = getPolygonPerimeter(polygon);
console.log("Perimeter of polygon: " + perimeter + " kilometers");
```
### **calculateCoastalSqueeze()**
This function calculates the coastal squeeze for a given image. It uses
the shoreline and mangrove bands to calculate the squeeze.
``` javascript
function calculateCoastalSqueeze(image) {
var shoreline = image.select("Shoreline");
var mangroves = image.select("Mangroves");
var squeeze = mangroves.and(shoreline.not());
return squeeze.rename("Coastal Squeeze");
}
```
#### **Inputs:**
No input parameters for this function.
image - The image to calculate the coastal squeeze for.
#### **Output:**
Renders a map to select the
\ No newline at end of file
The image with the coastal squeeze band added.
#### **Use**
This function can be used to calculate the coastal squeeze for a given
image. The image should have shoreline and mangrove bands.
``` javascript
var squeezeImage = calculateCoastalSqueeze(image);
// Use squeezeImage for analysis
```
<hr>