feat: create panel with map and control widgets

tsutterley · Apr 9, 2024 · 5be13a3 · 5be13a3
1 parent ab5547b
commit 5be13a3
Show file tree

Hide file tree

Showing 8 changed files with 308 additions and 123 deletions.
diff --git a/IS2view/api.py b/IS2view/api.py
diff --git a/IS2view/tools.py b/IS2view/tools.py
@@ -1,7 +1,7 @@
 #!/usr/bin/env python
 u"""
 tools.py
-Written by Tyler Sutterley (11/2023)
+Written by Tyler Sutterley (04/2024)
 User interface tools for Jupyter Notebooks
 
 PYTHON DEPENDENCIES:
@@ -13,8 +13,11 @@
     matplotlib: Python 2D plotting library
         http://matplotlib.org/
         https://github.com/matplotlib/matplotlib
+    panel: Powerful Data Exploration & Web App Framework for Python
+        https://panel.holoviz.org/index.html
 
 UPDATE HISTORY:
+    Updated 04/2024: include panel import to create a row of widgets
     Updated 11/2023: set time steps using decimal years rather than lags
         setting dynamic colormap with float64 min and max
     Updated 08/2023: added options for ATL14/15 Release-03 data
@@ -34,6 +37,12 @@
     import ipywidgets
 except (AttributeError, ImportError, ModuleNotFoundError) as exc:
     logging.debug("ipywidgets not available")
+try:
+    import panel as pn
+except (AttributeError, ImportError, ModuleNotFoundError) as exc:
+    logging.debug("panel not available")
+else:
+    pn.extension('ipywidgets')
 try:
     import matplotlib.cm as cm
 except (AttributeError, ImportError, ModuleNotFoundError) as exc:
@@ -55,6 +64,9 @@ def __init__(self, **kwargs):
         # pass through some ipywidgets objects
         self.HBox = ipywidgets.HBox
         self.VBox = ipywidgets.VBox
+        # pass through some panel objects
+        self.Row = pn.Row
+        self.Column = pn.Column
 
         # dropdown menu for setting asset
         asset_list = ['nsidc-https', 'nsidc-s3', 'atlas-s3', 'atlas-local']

diff --git a/README.rst b/README.rst
@@ -40,6 +40,7 @@ Dependencies
 - `ipyleaflet: Interactive maps in the Jupyter notebook <https://ipyleaflet.readthedocs.io/en/latest/>`_
 - `matplotlib: Python 2D plotting library <https://matplotlib.org/>`_
 - `numpy: Scientific Computing Tools For Python <https://numpy.org>`_
+- `panel: Powerful Data Exploration & Web App Framework for Python <https://panel.holoviz.org/index.html>`_
 - `rasterio: Access to geospatial raster data <https://rasterio.readthedocs.io/en/latest/>`_
 - `rioxarray: geospatial xarray extension powered by rasterio <https://github.com/corteva/rioxarray>`_
 - `setuptools_scm: manager for python package versions using scm metadata <https://pypi.org/project/setuptools-scm>`_

diff --git a/doc/source/getting_started/Citations.rst b/doc/source/getting_started/Citations.rst
@@ -46,6 +46,7 @@ This software is also dependent on other commonly used Python packages:
 - `matplotlib: Python 2D plotting library <https://matplotlib.org/>`_
 - `h5netcdf: Pythonic interface to netCDF4 via h5py <https://h5netcdf.org/>`_
 - `numpy: Scientific Computing Tools For Python <https://numpy.org>`_
+- `panel: Powerful Data Exploration & Web App Framework for Python <https://panel.holoviz.org/index.html>`_
 - `rasterio: Access to geospatial raster data <https://rasterio.readthedocs.io/en/latest/>`_
 - `rioxarray: geospatial xarray extension powered by rasterio <https://github.com/corteva/rioxarray>`_
 - `setuptools_scm: manager for python package versions using scm metadata <https://pypi.org/project/setuptools-scm>`_

diff --git a/environment.yml b/environment.yml
@@ -7,6 +7,7 @@ dependencies:
   - ipywidgets
   - matplotlib
   - notebook
+  - panel
   - pip
   - python>=3.6
   - numpy>=1.21

diff --git a/notebooks/IS2-ATL14-Viewer.ipynb b/notebooks/IS2-ATL14-Viewer.ipynb
@@ -50,35 +50,6 @@
     "])"
    ]
   },
-  {
-   "attachments": {},
-   "cell_type": "markdown",
-   "metadata": {
-    "tags": []
-   },
-   "source": [
-    "### Interactive Mapping with Leaflet\n",
-    "\n",
-    "Interactive maps within IS2view are built upon [ipyleaflet](https://ipyleaflet.readthedocs.io). Clicking and dragging will pan the field of view, and zooming will adjust the field of view. There are 2 polar stereographic projections available for mapping in IS2view ([North](https://epsg.io/3413) and [South](https://epsg.io/3031)). The map projection, map center and zoom level will all be set based on the ATL14 region selected. The available basemaps are NASA's Next Generation Blue Marble visualization for the Arctic and Antarctic regions.\n",
-    "\n",
-    "Transects can be extracted by interactively drawing polylines on the leaflet map or programmatically using [geopandas GeoDataFrames](https://geopandas.org/en/stable/docs/reference/api/geopandas.GeoDataFrame.html)."
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "m = IS2view.Leaflet(IS2widgets.projection,\n",
-    "    center=IS2widgets.center,\n",
-    "    zoom=IS2widgets.zoom,\n",
-    "    draw_control=True,\n",
-    "    draw_tools='polyline',\n",
-    "    attribution=True)\n",
-    "m.map"
-   ]
-  },
   {
    "attachments": {},
    "cell_type": "markdown",
@@ -130,8 +101,16 @@
   {
    "attachments": {},
    "cell_type": "markdown",
-   "metadata": {},
+   "metadata": {
+    "tags": []
+   },
    "source": [
+    "### Interactive Mapping with Leaflet\n",
+    "\n",
+    "Interactive maps within IS2view are built upon [ipyleaflet](https://ipyleaflet.readthedocs.io). Clicking and dragging will pan the field of view, and zooming will adjust the field of view. There are 2 polar stereographic projections available for mapping in IS2view ([North](https://epsg.io/3413) and [South](https://epsg.io/3031)). The map projection, map center and zoom level will all be set based on the ATL14 region selected. The available basemaps are NASA's Next Generation Blue Marble visualization for the Arctic and Antarctic regions.\n",
+    "\n",
+    "Transects can be extracted by interactively drawing polylines on the leaflet map or programmatically using [geopandas GeoDataFrames](https://geopandas.org/en/stable/docs/reference/api/geopandas.GeoDataFrame.html). See [Recipes](https://is2view.readthedocs.io/en/latest/user_guide/Recipes.html) for more information.\n",
+    "\n",
     "#### Set plot parameters for ATL14"
    ]
   },
@@ -141,13 +120,23 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "# create leaflet map\n",
+    "m = IS2view.Leaflet(IS2widgets.projection,\n",
+    "    center=IS2widgets.center,\n",
+    "    zoom=IS2widgets.zoom,\n",
+    "    draw_control=True,\n",
+    "    draw_tools='polyline',\n",
+    "    attribution=False)\n",
+    "# set plot attributes\n",
     "IS2widgets.set_variables(ds)\n",
     "IS2widgets.set_atl14_defaults()\n",
-    "IS2widgets.VBox([\n",
+    "widget_pane = IS2widgets.VBox([\n",
     "    IS2widgets.variable,\n",
     "    IS2widgets.cmap,\n",
     "    IS2widgets.reverse,\n",
-    "])"
+    "])\n",
+    "# display as a panel row\n",
+    "IS2widgets.Row(m.map, widget_pane)"
    ]
   },
   {
@@ -169,7 +158,9 @@
     "    variable=IS2widgets.variable.value,\n",
     "    cmap=IS2widgets.colormap,\n",
     "    opacity=0.75,\n",
-    "    enable_popups=True)"
+    "    enable_popups=True)\n",
+    "# observe changes in widget parameters\n",
+    "ds.leaflet.observe_widget(IS2widgets)"
    ]
   },
   {
@@ -215,7 +206,7 @@
    "hash": "31f2aee4e71d21fbe5cf8b01ff0e069b9275f58929596ceb00d14d90e3e16cd6"
   },
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -229,7 +220,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.10.12"
+   "version": "3.10.13"
   }
  },
  "nbformat": 4,

diff --git a/notebooks/IS2-ATL15-Viewer.ipynb b/notebooks/IS2-ATL15-Viewer.ipynb
@@ -54,32 +54,6 @@
     "])"
    ]
   },
-  {
-   "attachments": {},
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "### Interactive Mapping with Leaflet\n",
-    "\n",
-    "Interactive maps within IS2view are built upon [ipyleaflet](https://ipyleaflet.readthedocs.io). Clicking and dragging will pan the field of view, and zooming will adjust the field of view. There are 2 polar stereographic projections available for mapping in IS2view ([North](https://epsg.io/3413) and [South](https://epsg.io/3031)). The map projection, map center and zoom level will all be set based on the ATL15 region selected. The available basemaps are NASA's Next Generation Blue Marble visualization for the Arctic and Antarctic regions.\n",
-    "\n",
-    "Regional time series can be extracted from ATL15 by interactively drawing geometries on the leaflet map or programmatically using [geopandas GeoDataFrames](https://geopandas.org/en/stable/docs/reference/api/geopandas.GeoDataFrame.html)."
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "m = IS2view.Leaflet(IS2widgets.projection,\n",
-    "    center=IS2widgets.center,\n",
-    "    zoom=IS2widgets.zoom,\n",
-    "    draw_control=True,\n",
-    "    attribution=True)\n",
-    "m.map"
-   ]
-  },
   {
    "attachments": {},
    "cell_type": "markdown",
@@ -132,6 +106,12 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
+    "### Interactive Mapping with Leaflet\n",
+    "\n",
+    "Interactive maps within IS2view are built upon [ipyleaflet](https://ipyleaflet.readthedocs.io). Clicking and dragging will pan the field of view, and zooming will adjust the field of view. There are 2 polar stereographic projections available for mapping in IS2view ([North](https://epsg.io/3413) and [South](https://epsg.io/3031)). The map projection, map center and zoom level will all be set based on the ATL15 region selected. The available basemaps are NASA's Next Generation Blue Marble visualization for the Arctic and Antarctic regions.\n",
+    "\n",
+    "Regional time series can be extracted from ATL15 by interactively drawing geometries on the leaflet map or programmatically using [geopandas GeoDataFrames](https://geopandas.org/en/stable/docs/reference/api/geopandas.GeoDataFrame.html). See [Recipes](https://is2view.readthedocs.io/en/latest/user_guide/Recipes.html) for more information.\n",
+    "\n",
     "#### Set plot parameters for ATL15\n",
     "Specifies the variable to plot, the [colormap](https://matplotlib.org/gallery/color/colormap_reference.html), and the normalization for the plot colors."
    ]
@@ -142,17 +122,26 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "# create leaflet map\n",
+    "m = IS2view.Leaflet(IS2widgets.projection,\n",
+    "    center=IS2widgets.center,\n",
+    "    zoom=IS2widgets.zoom,\n",
+    "    draw_control=True,\n",
+    "    attribution=False)\n",
+    "# set plot attributes\n",
     "IS2widgets.set_variables(ds)\n",
     "IS2widgets.set_atl15_defaults()\n",
     "IS2widgets.set_time_steps(ds)\n",
-    "IS2widgets.VBox([\n",
+    "widget_pane = IS2widgets.VBox([\n",
     "    IS2widgets.variable,\n",
     "    IS2widgets.timestep,\n",
     "    IS2widgets.dynamic,\n",
     "    IS2widgets.range,\n",
     "    IS2widgets.cmap,\n",
     "    IS2widgets.reverse,\n",
-    "])"
+    "])\n",
+    "# display as a panel row\n",
+    "IS2widgets.Row(m.map, widget_pane)"
    ]
   },
   {
@@ -175,7 +164,8 @@
     "    cmap=IS2widgets.colormap,\n",
     "    opacity=0.75,\n",
     "    enable_popups=False)\n",
-    "IS2widgets.timelag.observe(ds.leaflet.set_lag)"
+    "# observe changes in widget parameters\n",
+    "ds.leaflet.observe_widget(IS2widgets)"
    ]
   },
   {
@@ -224,7 +214,7 @@
    "hash": "31f2aee4e71d21fbe5cf8b01ff0e069b9275f58929596ceb00d14d90e3e16cd6"
   },
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -238,7 +228,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.8"
+   "version": "3.10.13"
   }
  },
  "nbformat": 4,

diff --git a/requirements.txt b/requirements.txt
@@ -2,6 +2,7 @@ h5netcdf
 ipyleaflet
 matplotlib
 numpy
+panel
 rioxarray
 setuptools_scm
 xarray