CSqueeze.md

@@ -11,18 +11,15 @@
 
 # Activity Documentation for Csqueeze Module
 
-This documentation provides a detailed explanation of the user
-interaction pages in the Csqueeze module.
+This documentation provides a detailed explanation of the user interaction pages in the Csqueeze module.
 
 ## Diagram
 
-[1100x1100px](Arquivo:Csqueeze_Activity_Diagram.png "wikilink")
+![csqueeze](https://codigos.ufsc.br/loc/cassie/-/wikis/uploads/00738cfb4c73a5c5faf0428c3407b07c/csqueeze.png)
 
 ## app/pages/SelectionPage
 
-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.
+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.
 
 ## app/pages/CSqueeze
 
@@ -34,71 +31,51 @@ This page shows the processing screen for the Coastal Squeeze analysis.
 
 ## app/components/csqueeze/AOIChooser
 
-This component is responsible for the user to choose the Area of
-Interest (AOI). It has the following functions:
+This component is responsible for the user to choose the Area of Interest (AOI). It has the following functions:
 
 ### getMangroves()
 
-This function, from algorithms/csqueeze, uses the "ESA/WorldCover/v200"
-collection to get possible mangrove areas around the world.
+This function, from algorithms/csqueeze, uses the "ESA/WorldCover/v200" collection to get possible mangrove areas around the world.
 
 ### useEffect()
 
-This useEffect calls getMangroves() when the component is mounted to
-show possible mangrove areas on the map.
+This useEffect calls getMangroves() when the component is mounted to show possible mangrove areas on the map.
 
 ### handleMapClick()
 
-This function is called when the user clicks on the map. It starts the
-drawing of the AOI using the Google Maps Drawing Manager.
+This function is called when the user clicks on the map. It starts the drawing of the AOI using the Google Maps Drawing Manager.
 
 ### endDrawing()
 
-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()).
+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()).
 
 ## app/components/csqueeze/YearsSelect
 
-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()).
+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()).
 
 ## app/components/csqueeze/ImagesSelect
 
-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()).
+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()).
 
 ## app/components/csqueeze/CloudFilters
 
-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()).
+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()).
 
 ## app/components/csqueeze/LandCover
 
-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()).
+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()).
 
 ## algorithms/acquisition
 
-This module contains the functions to acquire the satellite images and
-perform the cloud masking.
+This module contains the functions to acquire the satellite images and perform the cloud masking.
 
 ### getSatelliteImages()
 
-This function gets the satellite images for the selected years and AOI
-using the Google Earth Engine API.
+This function gets the satellite images for the selected years and AOI using the Google Earth Engine API.
 
 ### maskClouds()
 
-This function masks the clouds in the selected images using the cloud
-filters selected by the user.
+This function masks the clouds in the selected images using the cloud filters selected by the user.
 
 ## algorithms/geodesy
 
@@ -106,77 +83,61 @@ This module contains the functions to perform the geodesic calculations.
 
 ### calculateArea()
 
-This function calculates the area of the AOI in square kilometers using
-the Haversine formula.
+This function calculates the area of the AOI in square kilometers using the Haversine formula.
 
 ### calculateDistance()
 
-This function calculates the distance between two points in meters using
-the Vincenty formula.
+This function calculates the distance between two points in meters using the Vincenty formula.
 
 ## algorithms/satellite
 
-This module contains the functions to perform the Coastal Squeeze
-analysis.
+This module contains the functions to perform the Coastal Squeeze analysis.
 
 ### calculateNDVI()
 
-This function calculates the Normalized Difference Vegetation Index
-(NDVI) for the selected images.
+This function calculates the Normalized Difference Vegetation Index (NDVI) for the selected images.
 
 ### calculateShoreline()
 
-This function calculates the shoreline for the selected images using the
-mangrove and land cover polygons drawn by the user.
+This function calculates the shoreline for the selected images using the mangrove and land cover polygons drawn by the user.
 
 ## algorithms/utils
 
-This module contains utility functions used in the Coastal Squeeze
-analysis.
+This module contains utility functions used in the Coastal Squeeze analysis.
 
 ### getPolygonArea()
 
-This function calculates the area of a polygon in square kilometers
-using the Shoelace formula.
+This function calculates the area of a polygon in square kilometers using the Shoelace formula.
 
 ### getPolygonPerimeter()
 
-This function calculates the perimeter of a polygon in meters using the
-Haversine formula.
+This function calculates the perimeter of a polygon in meters using the Haversine formula.
 
 ## app/pages/ProcessingPage
 
-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 page shows the final maps and analysis for the Coastal Squeeze. It uses the data saved in the Redux store from the previous steps.
 
 ### useEffect()
 
-This useEffect calls the following functions when the component is
-mounted:
+This useEffect calls the following functions when the component is mounted:
 
-\- getSatelliteImages() - maskClouds() - calculateNDVI() -
-calculateShoreline()
+\- getSatelliteImages() - maskClouds() - calculateNDVI() - calculateShoreline()
 
 ### calculateCoastalSqueeze()
 
-This function calculates the Coastal Squeeze index for the selected
-images and displays the results on the map. It uses the following
-functions:
+This function calculates the Coastal Squeeze index for the selected images and displays the results on the map. It uses the following functions:
 
-\- calculateArea() - calculateDistance() - getPolygonArea() -
-getPolygonPerimeter()
+\- calculateArea() - calculateDistance() - getPolygonArea() - getPolygonPerimeter()
 
-The results are saved in the Redux store using
-dispatch(Acquisition.setCoastalSqueeze()).
+The results are saved in the Redux store using dispatch(Acquisition.setCoastalSqueeze()).
 
 ## 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.
+This function returns a Google Maps layer with possible mangrove areas around the world using the "ESA/WorldCover/v200" collection.
 
-``` javascript
+```javascript
  
 function getMangroves() { 
   var mangroves = ee.ImageCollection("ESA/WorldCover/v200") 
@@ -203,10 +164,9 @@ Google Maps layer with possible mangrove areas.
 
 #### **Use**
 
-To use this function, simply call getMangroves() and add the returned
-Google Maps layer to the map using map.addLayer().
+To use this function, simply call getMangroves() and add the returned Google Maps layer to the map using map.addLayer().
 
-``` javascript
+```javascript
  
 var mangrovesLayer = getMangroves(); 
 map.addLayer(mangrovesLayer); 
@@ -214,11 +174,9 @@ 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.
+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
+```javascript
  
 useEffect(() => { 
   mangroveLayer.current = getMangroves(); 
@@ -250,20 +208,17 @@ 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.
+A Google Maps layer showing possible mangrove areas and a drawing manager are added to the map.
 
 #### **Use**
 
-Since this is a React hook, it will run automatically when the component
-mounts. No usage example is needed.
+Since this is a React hook, it will run automatically when the component mounts. No usage example is needed.
 
 ### **handleMapClick()**
 
-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.
+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.
 
-``` javascript
+```javascript
   
 function handleMapClick(event) { 
   if (isPointInside(event.latLng, AOI.current.getPath())) { 
@@ -288,12 +243,9 @@ Either starts or ends the drawing of a rectangle on the map.
 
 #### **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.
+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
+```javascript
  
 mapRef.current.addListener("click", (event) => { 
   handleMapClick(event); 
@@ -302,11 +254,9 @@ mapRef.current.addListener("click", (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.
+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
+```javascript
  
 function endDrawing(endPoint) { 
   if (isRectangleInside(rectangle.current, AOI.current)) { 
@@ -327,15 +277,13 @@ endPoint - The end point of the rectangle.
 
 #### **Output:**
 
-Ends the drawing of the rectangle and either stores it for further use
-or removes it from the map.
+Ends the drawing of the rectangle and either stores it for further use or removes it from the map.
 
 #### **Use**
 
-This function is called when ending the drawing of a rectangle to check
-if it is within the AOI and handle it appropriately.
+This function is called when ending the drawing of a rectangle to check if it is within the AOI and handle it appropriately.
 
-``` javascript
+```javascript
  
 function handleMapClick(event) { 
   // ... 
@@ -348,11 +296,9 @@ function handleMapClick(event) {
 
 ### **getSatelliteImages()**
 
-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 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.
 
-``` javascript
+```javascript
  
 function getSatelliteImages(geometry, startDate, endDate) { 
   var imageList = []; 
@@ -382,9 +328,7 @@ function getSatelliteImages(geometry, startDate, endDate) {
 
 #### **Inputs:**
 
-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.
+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:**
 
@@ -392,11 +336,9 @@ A list of image objects containing metadata for the images found.
 
 #### **Use**
 
-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.
+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
+```javascript
  
 var images = getSatelliteImages(geometry, "2020-01-01", "2020-12-31"); 
 // Use images for selecting images, displaying thumbnails, etc. 
@@ -404,10 +346,9 @@ var images = getSatelliteImages(geometry, "2020-01-01", "2020-12-31");
 
 ### **maskClouds()**
 
-This function masks clouds in a Landsat 8 image using the CFmask band.
-It returns a new image with the cloudy pixels masked.
+This function masks clouds in a Landsat 8 image using the CFmask band. It returns a new image with the cloudy pixels masked.
 
-``` javascript
+```javascript
  
 function maskClouds(image) { 
   var cfmask = image.select("cfmask"); 
@@ -428,10 +369,9 @@ 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.
+This function can be used to mask clouds in a Landsat 8 image before performing analysis on the image.
 
-``` javascript
+```javascript
  
 var maskedImage = maskClouds(image); 
 // Use maskedImage for analysis  
@@ -439,10 +379,9 @@ var maskedImage = maskClouds(image);
 
 ### **calculateArea()**
 
-This function calculates the area of a polygon in square meters. It uses
-the Google Maps Geometry library to calculate the area.
+This function calculates the area of a polygon in square meters. It uses the Google Maps Geometry library to calculate the area.
 
-``` javascript
+```javascript
  
 function calculateArea(polygon) { 
   var area = 0; 
@@ -466,11 +405,9 @@ The area of the polygon in square meters.
 
 #### **Use**
 
-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.
+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
+```javascript
  
 var area = calculateArea(polygon); 
 console.log("Area of polygon: " + area + " square meters"); 
@@ -478,10 +415,9 @@ 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.
+This function calculates the distance between two points in meters. It uses the Google Maps Geometry library to calculate the distance.
 
-``` javascript
+```javascript
  
 function calculateDistance(point1, point2) { 
   return google.maps.geometry.spherical.computeDistanceBetween(point1, point2); 
@@ -490,8 +426,7 @@ function calculateDistance(point1, point2) {
 
 #### **Inputs:**
 
-point1 - The first point as a google.maps.LatLng object. point2 - The
-second point as a google.maps.LatLng object.
+point1 - The first point as a google.maps.LatLng object. point2 - The second point as a google.maps.LatLng object.
 
 #### **Output:**
 
@@ -499,10 +434,9 @@ The distance between the two points in meters.
 
 #### **Use**
 
-This function can be used to calculate the distance between two points.
-Each point should be a google.maps.LatLng object.
+This function can be used to calculate the distance between two points. Each point should be a google.maps.LatLng object.
 
-``` javascript
+```javascript
  
 var distance = calculateDistance(point1, point2); 
 console.log("Distance between points: " + distance + " meters"); 
@@ -510,11 +444,9 @@ console.log("Distance between points: " + distance + " meters");
 
 ### **calculateNDVI()**
 
-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.
+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.
 
-``` javascript
+```javascript
  
 function calculateNDVI(image) { 
   var nir = image.select("B5"); 
@@ -534,10 +466,9 @@ The image with the NDVI band added.
 
 #### **Use**
 
-This function can be used to calculate the NDVI for a given image. The
-image should be a Landsat 8 image.
+This function can be used to calculate the NDVI for a given image. The image should be a Landsat 8 image.
 
-``` javascript
+```javascript
  
 var ndviImage = calculateNDVI(image); 
 // Use ndviImage for analysis 
@@ -545,11 +476,9 @@ var ndviImage = calculateNDVI(image);
 
 ### **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.
+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
+```javascript
  
 function calculateShoreline(image) { 
   var ndvi = image.select("NDVI"); 
@@ -569,10 +498,9 @@ The image with the shoreline band added.
 
 #### **Use**
 
-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.
+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.
 
-``` javascript
+```javascript
  
 var shorelineImage = calculateShoreline(ndviImage); 
 // Use shorelineImage for analysis 
@@ -580,10 +508,9 @@ var shorelineImage = calculateShoreline(ndviImage);
 
 ### **getPolygonArea()**
 
-This function calculates the area of a polygon in square kilometers. It
-uses the Google Earth Engine API to calculate the area.
+This function calculates the area of a polygon in square kilometers. It uses the Google Earth Engine API to calculate the area.
 
-``` javascript
+```javascript
  
 function getPolygonArea(polygon) { 
   return ee.Geometry(polygon).area().divide(1000000); 
@@ -592,8 +519,7 @@ function getPolygonArea(polygon) {
 
 #### **Inputs:**
 
-polygon - The polygon to calculate the area of, as an ee.Geometry
-object.
+polygon - The polygon to calculate the area of, as an ee.Geometry object.
 
 #### **Output:**
 
@@ -601,10 +527,9 @@ The area of the polygon in square kilometers.
 
 #### **Use**
 
-This function can be used to calculate the area of a polygon. The
-polygon should be an ee.Geometry object.
+This function can be used to calculate the area of a polygon. The polygon should be an ee.Geometry object.
 
-``` javascript
+```javascript
  
 var area = getPolygonArea(polygon); 
 console.log("Area of polygon: " + area + " square kilometers"); 
@@ -612,10 +537,9 @@ console.log("Area of polygon: " + area + " square kilometers");
 
 ### **getPolygonPerimeter()**
 
-This function calculates the perimeter of a polygon in kilometers. It
-uses the Google Earth Engine API to calculate the perimeter.
+This function calculates the perimeter of a polygon in kilometers. It uses the Google Earth Engine API to calculate the perimeter.
 
-``` javascript
+```javascript
  
 function getPolygonPerimeter(polygon) { 
   return ee.Geometry(polygon).perimeter().divide(1000); 
@@ -624,8 +548,7 @@ function getPolygonPerimeter(polygon) {
 
 #### **Inputs:**
 
-polygon - The polygon to calculate the perimeter of, as an ee.Geometry
-object.
+polygon - The polygon to calculate the perimeter of, as an ee.Geometry object.
 
 #### **Output:**
 
@@ -633,10 +556,9 @@ The perimeter of the polygon in kilometers.
 
 #### **Use**
 
-This function can be used to calculate the perimeter of a polygon. The
-polygon should be an ee.Geometry object.
+This function can be used to calculate the perimeter of a polygon. The polygon should be an ee.Geometry object.
 
-``` javascript
+```javascript
  
 var perimeter = getPolygonPerimeter(polygon); 
 console.log("Perimeter of polygon: " + perimeter + " kilometers"); 
@@ -644,10 +566,9 @@ 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.
+This function calculates the coastal squeeze for a given image. It uses the shoreline and mangrove bands to calculate the squeeze.
 
-``` javascript
+```javascript
  
 function calculateCoastalSqueeze(image) { 
   var shoreline = image.select("Shoreline"); 
@@ -667,13 +588,12 @@ 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.
+This function can be used to calculate the coastal squeeze for a given image. The image should have shoreline and mangrove bands.
 
-``` javascript
+```javascript
  
 var squeezeImage = calculateCoastalSqueeze(image); 
 // Use squeezeImage for analysis 
 ```
 
-<hr>
+---
\ No newline at end of file