docs: documentation update

README.md

@@ -63,46 +63,58 @@ Make sure that that file is configured properly.
 You can use `eodag-labextension` inside a Jupyter notebook. Start Jupyter lab with `jupyter lab`, and in Jupyter lab
 open a notebook.
 
-![extension logo](https://raw.githubusercontent.com/CS-SI/eodag-labextension/develop/notebooks/images/eodag_labext_form.png)
-
-### Search
+## Search
 
 ![extension logo](https://raw.githubusercontent.com/CS-SI/eodag-labextension/develop/notebooks/images/eodag_labext_icon.png)
-Open the EODAG tab on the left side of the JupuytuerLab interface by clicking on that icon.
+Click on this icon in the left of JupyterLab interface to open EODAG-Labextension tab.
+
+![form](https://raw.githubusercontent.com/CS-SI/eodag-labextension/develop/notebooks/images/eodag_labext_form.png)
+
+With displayed search form, you can enter search extent and following search criteria:
+
+- **Product type**: the searched product type. List filtering is performed using product types description keywords.
+  For each entry of the drop-down list, a tooltip is displayed at hovering time with corresponding description.
+  ![product types](https://raw.githubusercontent.com/CS-SI/eodag-labextension/develop/notebooks/images/eodag_labext_product_types.png)
 
-With displayed search form, you can enter select your data geographically and apply some search criteria:
+- **Date range**: minimal and maximal dates of the search temporal window.
+- **Max cloud cover**: maximum cloud cover allowed in search results in percent. 100% will disable cloud cover
+  filtering.
+- **Additional parameters**: used to enter key-value pairs criteria for the request. See
+  [available parameters in EODAG documentation](https://eodag.readthedocs.io/en/stable/add_provider.html#opensearch-parameters-csv).
 
-- **Product type**: the searched product type. For each entry of the drop-down list, a tooltip is displayed at
-  hovering time with corresponding description.
-- **Start date**: minimal date of the search temporal window.
-- **End date**: maximal date of the search temporal window.
-- **Max cloud cover**: maximum cloud cover allowed in search results in percent.
-- **Additional parameters**: used to enter key-value pairs criteria for the request.
+As **search geometry** you can draw multiple extents, or use none. Each extent can be a rectangle or a free polygon.
 
-You can draw multiple extents, or use none. Each extent can be a rectangle or a free polygon.
-Product type is mandatory. Other criteria are optional.
+_Product type is mandatory. Other criteria are optional._
 
-Once search criteria are filled out, click on the "Search" button to proceed to next step. At the end of the search,
-a popup opens and displays results.
+Once search criteria are filled out, click on:
+
+- `Generate Code` to automatically generate and insert the corresponding eodag search code bellow the active cell.
+- `Preview Results` to perform a search in background, display results, and generate search code in a second step.
+
+![settings logo](https://raw.githubusercontent.com/CS-SI/eodag-labextension/develop/notebooks/images/eodag_labext_settings_icon.png)
+Click on this icon to open EODAG-Labextension settings. You will be enable to choose whether newly inserted code should
+replace existing search code or not.
 
 ### Results overview
 
+![extension popup](https://raw.githubusercontent.com/CS-SI/eodag-labextension/develop/notebooks/images/eodag_labext_popup.png)
+
 The results overview popup is compopsed of 3 parts:
 
-- a map showing products extent
-- a table listing products
+- a map showing products extent,
+- a table listing products,
 - a pane containing metadata for currently selected product.
 
 The results table allows you to access product metadata by clicking on the desired product line. The magnifying glass
 button allows you to zoom in on the product's in the map view. By scrolling down in the list of results, the search is
 automatically restarted to retrieve the following results.
 
-In the metadata view, clicking on the thumbnail displays it in native resolution. Clicking it again reduces its size
+In the metadata view, clicking on the _Quicklook_ displays it in native resolution. Clicking it again reduces its size
 again.
 
 ### Apply to the Jupyter notebook
 
-If the search result is correct, clicking on the "`Apply`" button will insert the Python eodag code in a new cell
+If the search result is correct, clicking on the "`Generate code`" button will insert the Python eodag code in a new cell
 after the selected cell of the currently open notebook. The popup is automatically closed. From there, it is possible
 to work in the notebook on the search results by executing the eodag search.
 

notebooks/basic_usage.ipynb

@@ -41,8 +41,11 @@
    "metadata": {},
    "source": [
     "## 2. Search\n",
-    "Please **select this notebook cell** and **use the left panel** to search for products. Then in the search results page, please click on the `apply` button (upper-right). See the [user manual](user_manual.ipynb) for further details.\n",
-    "This will automatically generate and insert the corresponding `eodag` search code bellow this cell. Execute it to continue the workflow."
+    "Please **select this notebook cell** and **use the left panel** to fill your search criteria, then directly click on `Generate Code` or `Preview Results`.\n",
+    "- `Generate Code` will automatically generate and insert the corresponding `eodag` search code bellow this cell.\n",
+    "- `Preview Results` will perform a search in background and display results with associated geometries, quicklooks, and metadata. Then from the search result page, click on `Generate Code` to insert search code bellow this cell.\n",
+    "\n",
+    "Execute the generated code to continue the workflow."
    ]
   },
   {
@@ -68,7 +71,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -82,7 +85,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.10"
+   "version": "3.10.4"
   },
   "widgets": {
    "application/vnd.jupyter.widget-state+json": {

notebooks/user_manual.ipynb

@@ -65,22 +65,29 @@
    "source": [
     "## Search\n",
     "\n",
-    "![extension logo](https://raw.githubusercontent.com/CS-SI/eodag-labextension/develop/notebooks/images/eodag_labext_icon.png) Activate the plugin tab on the left of the JupuytuerLab interface by clicking on that icon.\n",
+    "![extension logo](https://raw.githubusercontent.com/CS-SI/eodag-labextension/develop/notebooks/images/eodag_labext_icon.png) Click on this icon in the left of JupyterLab interface to open EODAG-Labextension tab.\n",
     "\n",
-    "![extension form](https://raw.githubusercontent.com/CS-SI/eodag-labextension/develop/notebooks/images/eodag_labext_form.png)\n",
+    "<img style=\"float: left; margin-right: 30px; border: solid; border-color: Gainsboro; \" src=\"https://raw.githubusercontent.com/CS-SI/eodag-labextension/develop/notebooks/images/eodag_labext_form.png\" alt=\"form\">\n",
     "\n",
     "With displayed search form, you can enter search extent and following search criteria:\n",
     "\n",
-    "* **Product type**: the searched product type. For each entry of the drop-down list, a tooltip is displayed at hovering time with corresponding description. \n",
-    "* **Start date**: minimal date of the search temporal window.\n",
-    "* **End date**: maximal date of the search temporal window.\n",
-    "* **Max cloud cover**: maximum cloud cover allowed in search results in percent.\n",
-    "* **Additional parameters**: used to enter key-value pairs criteria for the request.\n",
+    "* **Product type**: the searched product type. List filtering is performed using product types description keywords. For each entry of the drop-down list, a tooltip is displayed at hovering time with corresponding description.\n",
+    "<img style=\"display: block;\" src=\"https://raw.githubusercontent.com/CS-SI/eodag-labextension/develop/notebooks/images/eodag_labext_product_types.png\" alt=\"product types\">\n",
     "\n",
-    "You can draw multiple extents, or use none. Each extent can be a rectangle or a free polygon.\n",
-    "Product type is mandatory. Other criteria are optional.\n",
+    "* **Date range**: minimal and maximal dates of the search temporal window.\n",
+    "* **Max cloud cover**: maximum cloud cover allowed in search results in percent. 100% will disable cloud cover filtering.\n",
+    "* **Additional parameters**: used to enter key-value pairs criteria for the request. See [available parameters in EODAG documentation](https://eodag.readthedocs.io/en/stable/add_provider.html#opensearch-parameters-csv).\n",
     "\n",
-    "Once search criteria are filled out, click on the \"Search\" button to proceed to next step. At the end of the search, a popup opens and displays results."
+    "As **search geometry** you can draw multiple extents, or use none. Each extent can be a rectangle or a free polygon.\n",
+    "\n",
+    "*Product type is mandatory. Other criteria are optional.*\n",
+    "\n",
+    "<span style=\"clear: left; display:block;\"></span>\n",
+    "Once search criteria are filled out, click on:\n",
+    "- `Generate Code` to automatically generate and insert the corresponding eodag search code bellow the active cell.\n",
+    "- `Preview Results` to perform a search in background, display results, and generate search code in a second step.\n",
+    "\n",
+    "![settings logo](https://raw.githubusercontent.com/CS-SI/eodag-labextension/develop/notebooks/images/eodag_labext_settings_icon.png) Click on this icon to open EODAG-Labextension settings. You will be enable to choose whether newly inserted code should replace existing search code or not."
    ]
   },
   {
@@ -99,7 +106,7 @@
     "\n",
     "The results table allows you to access product metadata by clicking on the desired product line. The magnifying glass button allows you to zoom in on the product's in the map view. By scrolling down in the list of results, the search is automatically restarted to retrieve the following results.\n",
     "\n",
-    "In the metadata view, clicking on the thumbnail displays it in native resolution. Clicking it again reduces its size again."
+    "In the metadata view, clicking on the *Quicklook* displays it in native resolution. Clicking it again reduces its size again."
    ]
   },
   {
@@ -108,7 +115,7 @@
    "source": [
     "## Apply to the Jupyter notebook\n",
     "\n",
-    "If the search result is correct, clicking on the \"`Apply`\" button will insert the Python eodag code in a new cell of the currently open notebook. The popup is automatically closed. From there, it is possible to work in the notebook on the search results by executing the eodag search.\n",
+    "If the search result is correct, clicking on the `Generate code` button will insert the Python eodag code in a new cell of the currently open notebook. The popup is automatically closed. From there, it is possible to work in the notebook on the search results by executing the eodag search.\n",
     "\n",
     "Here is an example of generated code:"
    ]
@@ -128,9 +135,9 @@
     "search_results, total_count = dag.search(\n",
     "  productType=\"S2_MSI_L1C\",\n",
     "  geom=geometry,\n",
-    "  start=\"2021-08-01\",\n",
-    "  end=\"2021-08-11\",\n",
-    "  cloudCover=17,\n",
+    "  start=\"2022-11-01\",\n",
+    "  end=\"2022-11-10\",\n",
+    "  cloudCover=5,\n",
     ")"
    ]
   },
@@ -244,7 +251,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -258,7 +265,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.10"
+   "version": "3.10.4"
   },
   "widgets": {
    "application/vnd.jupyter.widget-state+json": {