Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added wizard section to openEO web Editor documentation #233

Merged
merged 9 commits into from
Dec 22, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 60 additions & 12 deletions Applications/WebEditor.qmd
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ The openEO Web Editor can be accessed via [https://openeo.dataspace.copernicus.e

Upon initial access to the provided link, users are presented with the following screen which is further explained below in refernce to the given numbering:

![](_images/webeditor.png)
![](_images/webeditor/webeditor.png)

1. **Service Offering**

Expand Down Expand Up @@ -54,7 +54,7 @@ Upon initial access to the provided link, users are presented with the following

As previously mentioned, it is necessary to log in to interact with the server. A new window will appear when attempting to log in, as demonstrated below. While other options are sometimes available, the recommended authentication choice is the "Copernicus Data Space Ecosystem". For further information regarding various authentication methods or to seek assistance, you can always click on the "help" option at the top or contact us.

<centre><img src="_images/login.PNG" width="80%" height="60%"></centre>
<centre><img src="_images/webeditor/editor_login.PNG" width="80%" height="60%"></centre>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note that this image is pretty outdated, it still contains "EGI" and "internal" options, which are dropped now

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated the image



## Create a workflow
Expand All @@ -63,48 +63,96 @@ Based on their applications user can build their model by simple drag and drop m

1. Load Collection

In order to load the required collection make sure it is available by searching in the sidebar. Once you find your collection you can simply drag and drop it for carrying out further actions. In the following clip, you can observe the sequential actions are taken to accomplish the following tasks: choosing a collection of interest, defining the spatial and temporal boundaries, and filtering the necessary bands for subsequent processing. Specifically, for calculating the NDVI, the Red band (B04) and Near-Infrared (NIR) band (B08) have been selected.
a. To start a task within the openEO web editor, your first step is to search the necessary collections for the analysis. Thus, you must check the required collections exists within the openEO database, you can do this by exploring/searching the list of available collections from the sidebar of the interface.
In our example, we want to calculate the Normalized Difference Vegetation Index (NDVI), so the Sentinel 2 L2A collection will be used. So the next step is to drag and drop it into the Process Editor for further operations.

![](_images/webeditor/drag_collection.png)


![](_images/gif/load_collection.gif)
b. Now, once you load collection, there are several parameters you need to specify, including the area of interest, the temporal extent, and the selection of bands. By clicking on `load_collection`, a window pops up, where you can define the necessary parameters for subsequent processing.

To specify the area of interest, you can choose between generating a bounding box or importing your spatial extent by dragging and dropping GeoJSON or KML files onto the map view. While this example demonstrates the use of a bounding box, we suggest experimenting with a suitably compact area for testing purposes. There is also an option to "No filter", that will include all the data in the datacube.

![](_images/webeditor/define_bbox.png)

Another parameter to consider is the temporal extent, allowing you to restrict the loaded data to a specified time window. We encourage you to choose a timeframe of 1-2 weeks for testing purposes.

![](_images/webeditor/define_temporal.png)

In our case, for NDVI calculation, we have specifically chosen the Red band (B04) and the Near-Infrared (NIR) band (B08).

![](_images/webeditor/define_bands.png)

2. Apply Processes

Eventually, the next step involves implementing essential processes, ranging from straightforward operations like adding bands to more complex tasks such as importing or defining user-defined functions (UDFs). In the following clip, a reduce_dimension() process is employed to eliminate the temporal dimension by selecting the maximum value. The same process is utilised to reduce the band dimension after executing a series of addition, subtraction, and division operations necessary for the NDVI calculation.
The next step involves applying essential openEO processes, ranging from straightforward mathematical operations to more complex tasks such spatial or temporal aggregations.

In this task, we'll using a specific openEO process called `reduce_dimension` two times to simplify our data cube. First we deal with the various bands and then reduce the temporal dimension.

![](_images/webeditor/reduce_dimension.png)

In the initial process, the `reduce_dimension` algorithm is utilised to reduce the band dimension after executing a series of addition, subtraction, and division operations necessary for the NDVI calculation.

<centre><img src="_images/webeditor/reduce_bands.png" width="80%" height="60%"></centre>

Following this, with the same `reduce_dimension` algorithm we eliminate the temporal dimension by selecting the maximum value using the max function.

<centre><img src="_images/webeditor/temporal_reducer.png" width="80%" height="60%"></centre>

![](_images/gif/apply_process.gif)

3. Select a format

As a final step in the workflow creation, the following clip demonstrates selecting the output format. Since our application involves simple NDVI calculation, we want to save it as a GeoTiff.
As a final step in the workflow creation is to select the output format.

![](_images/webeditor/save_process.png)

Since our workflow eliminated the temporal dimension, we can keep things simple and just save the result as a GeoTiff.

![](_images/webeditor/save_as_gtiff.png)

![](_images/gif/save_result.gif)

## Execute the workflow

To complete the data analysis process, the final step involves executing the created workflow. This can be done in two ways: synchronously or through batch job-based method. Synchronous method allows the user to download the data directly, whereas batch job-based method enables the user to execute process as a batch. The choice of method depends on the user's preference and the size of the dataset.

![](_images/jobs.png)
![](_images/webeditor/execute_jobs.png)

In the above figure, the red box includes the two methods possible for executing the process. In this example, I used the synchronus method by directly clicking on *Run now*, which popped up a box in the bottom right corner.

Once the execution process is completed, the result is automatically saved locally. It can also be visualised in the parallel window as shown in the image below:

![](_images/result.PNG)
![](_images/webeditor/webeditor_result.PNG)


Furthermore, if you have created Batch Job, you can monitor its action from the same window.


## Data Download using Wizard

The Wizard feature at the top navigation bar allows easy creation of process graphs for common, basic use cases without having to drag and drop processes as done earlier.

:::{callout-warning}

This feature is experimental and it's not guaranteed that the generated process graphs are fully functional.

:::

At the time of this documentation release, two cases are currently available through the Wizard feature: direct downloading of data for a selected area and downloading computed spectral indices as shown in the figure below:

![](_images/webeditor/wizard.png)

You have the option to choose any one of them and enter the necessary parameters as instructed. This method makes the task considerably more straightforward than the previously mentioned workflow creation approach, as the structure is already established and you only need to input the essential parameters.

## Monitor the workflow

When a batch job is created, openEO's logs feature can help with *monitoring and debugging* of workflows. The back-end typically uses this to dump information during data processing that may be relevant for the user (e.g. warnings, resource stats, …). Like many other processes, job logs can be visualized programmatically as well as in the web editor.

As shown in the following image, you have the option to access the job logs by clicking on the icon located next to the job ID at the bottom of the interface.

![](./_images/joblist.png)
![](./_images/webeditor/joblist.png)

When clicking on it, a pane emerges on the right, as shown below:

![](./_images/joblogs.png)
![](./_images/webeditor/joblogs.png)

Moreover, users can use openEO processes like `inspect`, this will allow you to log your own information to be displayed in the job logs.
Binary file removed Applications/_images/gif/apply_process.gif
Binary file not shown.
Binary file removed Applications/_images/gif/load_collection.gif
Binary file not shown.
Binary file removed Applications/_images/gif/save_result.gif
Binary file not shown.
Binary file removed Applications/_images/login.PNG
Binary file not shown.
Binary file added Applications/_images/webeditor/define_bands.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Applications/_images/webeditor/define_bbox.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Applications/_images/webeditor/reduce_bands.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Applications/_images/webeditor/save_as_gtiff.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Applications/_images/webeditor/save_process.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Applications/_images/webeditor/wizard.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.