notebooks/itslive/itslive-widget.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "330a2f00",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%capture\n",
    "%matplotlib widget\n",
    "\n",
    "import matplotlib\n",
    "import markdown \n",
    "from ipywidgets import widgets, HTML, Output\n",
    "\n",
    "from velocity_widget import ITSLIVE\n",
    "\n",
    "matplotlib.rcParams['figure.figsize'] = [6, 4]\n",
    "matplotlib.rcParams[\"figure.autolayout\"] = True\n",
    "\n",
    "velocity_widget = ITSLIVE()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1905eb53-c87a-425a-beb3-115720d58af8",
   "metadata": {},
   "outputs": [],
   "source": [
    "html_title = markdown.markdown(\"\"\"\n",
    "\n",
    "<div>\n",
    "    <h2><center><a href=\"https://its-live.jpl.nasa.gov/\"><img align=\"middle\" src=\"https://its-live-data.s3.amazonaws.com/documentation/ITS_LIVE_logo.png\" height=\"50\"/></a></center></h2>\n",
    "    <h3><center>Global Glacier Velocity Point Data Access</center></h3>\n",
    "</div>\n",
    "\n",
    "***\n",
    "\"\"\")\n",
    "\n",
    "\n",
    "html_instructions = markdown.markdown(\"\"\" Click and drag on the map to pan the field of view. Select locations by double-clicking on the map then press Plot. Once plotted you can change the Variable that is being shown and how the markers are colored using Plot By. You can drag individual points after they are placed to relocate them, and then Plot again or Clear markers to start over.\n",
    "You can also single-click on the map to populate the Lat and Lon boxes then add a point using the Add Point. Lat and Lon can also be edited manually.\n",
    "Hovering your cursor over the plot reveals tools to zoom, pan, and save the figure.\n",
    "\n",
    "Press Export Data to generate comma separated value (.csv) files of the data. Press Download Data to retrieve locally. Export Data must be pressed each time new data is requested.\n",
    "Check out the video tutorial if you're a visual learner:\n",
    "\n",
    "<center><a href=\"https://www.youtube.com/watch?v=VYKsVvpVbmU\" target=\"_blank\"><img width=\"50%\" src=\"https://its-live-data.s3.amazonaws.com/documentation/ITS_LIVE_widget_youtube.jpg\"></a></center>\n",
    "\n",
    "Data are Version 2 of the ITS_LIVE global glacier velocity dataset that provides up-to-date velocities from Sentinel-1, Sentinel-2, Landsat-8 and Landsat-9 data. Version 2 annual mosaics are coming soon, and will be followed by Landsat 7 and improved Landsat 9 velocities.\n",
    "Please refer to the <b>[project website](https://its-live.jpl.nasa.gov/)</b> for known issues, citation and other product information.\n",
    "\"\"\")\n",
    "\n",
    "\n",
    "title = HTML(html_title, layout=widgets.Layout(width=\"100%\",\n",
    "                                               display='flex',\n",
    "                                               align_items='stretch'))\n",
    "instructions = widgets.Accordion(children=[HTML(html_instructions)], selected_index=None)\n",
    "instructions.set_title(0,title=\"Instructions\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cdc8e3f9",
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "dates_range = widgets.SelectionRangeSlider(\n",
    "    options=[i for i in range(546)],\n",
    "    index=(1, 120),\n",
    "    continuous_update=False,\n",
    "    description='Interval (days): ',\n",
    "    orientation='horizontal',\n",
    "    layout={'width': '90%',\n",
    "            'display': 'flex'},\n",
    "    style={'description_width': 'initial'})\n",
    "\n",
    "variables =  widgets.Dropdown(\n",
    "    options=['v', 'v_error', 'vx', 'vy'],\n",
    "    description='Variable: ',\n",
    "    disabled=False,\n",
    "    value='v',\n",
    "    layout={'width': '20%',\n",
    "            'display': 'flex'},\n",
    "    style={'description_width': 'initial'})\n",
    "\n",
    "plot_type =  widgets.Dropdown(\n",
    "    options=['location', 'satellite'],\n",
    "    description='Plot By: ',\n",
    "    disabled=False,\n",
    "    value='location',\n",
    "    layout={'width': '20%',\n",
    "            'display': 'flex'},\n",
    "    style={'description_width': 'initial'})\n",
    "\n",
    "plot_button =  widgets.Button(\n",
    "    description='Plot',\n",
    "    button_style='primary',\n",
    "    icon='line-chart',\n",
    "    style={'description_width': 'initial'})\n",
    "\n",
    "clear_button =  widgets.Button(\n",
    "    description='Clear Points',\n",
    "    # button_style='warning',\n",
    "    icon=\"trash\",\n",
    "    style={'description_width': 'initial'})\n",
    "\n",
    "latitude = widgets.BoundedFloatText(\n",
    "    value=0.0,\n",
    "    min=-90.0,\n",
    "    max=90.0,\n",
    "    step=0.1,\n",
    "    description='Lat: ',\n",
    "    disabled=False,\n",
    "    style={'description_width': 'initial'},\n",
    "    layout={'width': '20%',\n",
    "            'display': 'flex'},\n",
    ")\n",
    "\n",
    "longitude = widgets.BoundedFloatText(\n",
    "    value=0.0,\n",
    "    min=-180.0,\n",
    "    max=180.0,\n",
    "    step=0.1,\n",
    "    description='Lon: ',\n",
    "    disabled=False,\n",
    "    style={'description_width': 'initial'},\n",
    "    layout={'width': '20%',\n",
    "            'display': 'flex'},\n",
    ")\n",
    "\n",
    "add_button =  widgets.Button(\n",
    "    description='Add Point',\n",
    "    # button_style='info',\n",
    "    icon=\"map-marker\",\n",
    "    style={'description_width': 'initial'})\n",
    "\n",
    "include_running_mean =  widgets.Checkbox(\n",
    "            value=False,\n",
    "            description=\"Include Running Mean\",\n",
    "            style={'description_width': 'initial'},\n",
    "            disabled=False,\n",
    "            indent=False,\n",
    "            tooltip=\"Plot running mean through each time series\",\n",
    "            layout=widgets.Layout(width=\"25%\"),\n",
    "        )\n",
    "\n",
    "export_button = widgets.Button(\n",
    "    description='Export Data',\n",
    "    # button_style='info',\n",
    "    icon=\"file-export\",\n",
    "    style={'description_width': 'initial'})\n",
    "\n",
    "data_link = widgets.HTML(\n",
    "    value=\"<br>\"\n",
    ")\n",
    "\n",
    "# If this congiguration changes we need to rerun the cell.\n",
    "config = { \n",
    "    \"plot\": \"v\", # or other ITS_LIVE variables: vx, vy ...\n",
    "    \"min_separation_days\": 1,\n",
    "    \"max_separation_days\": 90,\n",
    "    \"color_by\": \"location\", # valid values: satellite, points\n",
    "    \"verbose\": True, # print operations\n",
    "    \"runnig_mean\": True,\n",
    "    \"coords\": {\n",
    "        \"latitude\": latitude,\n",
    "        \"longitude\": longitude\n",
    "    },\n",
    "    \"data_link\": data_link\n",
    "}\n",
    "\n",
    "\n",
    "plot_button.on_click(velocity_widget.plot_time_series)\n",
    "clear_button.on_click(velocity_widget.clear_points)\n",
    "\n",
    "def update_variable(change):\n",
    "        if change['type'] == 'change' and change['name'] == 'value':\n",
    "            config[\"plot\"] = variables.value\n",
    "            velocity_widget.set_config(config)\n",
    "            velocity_widget.plot_time_series()\n",
    "            \n",
    "def update_range(change):\n",
    "        if change['type'] == 'change' and change['name'] == 'value':\n",
    "            start, end = change['new']\n",
    "            config[\"min_separation_days\"] = start\n",
    "            config[\"max_separation_days\"] = end\n",
    "            velocity_widget.set_config(config)\n",
    "            velocity_widget.plot_time_series()\n",
    "            \n",
    "def update_plottype(change):\n",
    "        if change['type'] == 'change' and change['name'] == 'value':\n",
    "            config[\"color_by\"] = plot_type.value\n",
    "            velocity_widget.set_config(config)\n",
    "            velocity_widget.plot_time_series()\n",
    "            \n",
    "def update_mean(change):\n",
    "        if change['type'] == 'change' and change['name'] == 'value':\n",
    "            config[\"running_mean\"] = include_running_mean.value\n",
    "            velocity_widget.set_config(config)\n",
    "            velocity_widget.plot_time_series()\n",
    "            \n",
    "def add_point(event):\n",
    "    coords = (latitude.value, longitude.value)\n",
    "    velocity_widget.add_point(coords)\n",
    "    \n",
    "def export_ts(event):\n",
    "    velocity_widget.export_data()\n",
    "\n",
    "\n",
    "export_button.on_click(export_ts)\n",
    "\n",
    "\n",
    "add_button.on_click(add_point)\n",
    "dates_range.observe(update_range, 'value')\n",
    "plot_type.observe(update_plottype, 'value')\n",
    "variables.observe(update_variable, 'value')\n",
    "include_running_mean.observe(update_mean, 'value')\n",
    "\n",
    "layout = widgets.Layout(align_items='stretch',\n",
    "                        display='flex',\n",
    "                        flex_flow='row wrap',\n",
    "                        border='none',\n",
    "                        grid_template_columns=\"repeat(auto-fit, minmax(420px, 1fr))\",\n",
    "                        # grid_template_columns='48% 48%',\n",
    "                        width='99%',\n",
    "                        height='100%')\n",
    "\n",
    "velocity_widget.set_config(config)\n",
    "\n",
    "velocity_widget.fig.canvas.capture_scroll = True\n",
    "\n",
    "\n",
    "widgets.GridBox([widgets.VBox([title,\n",
    "                 instructions], layout=widgets.Layout(width=\"100%\")),\n",
    "                 widgets.VBox([velocity_widget.map,\n",
    "                               widgets.HBox([latitude, longitude, add_button, clear_button], layout=widgets.Layout(align_items=\"flex-start\",\n",
    "                                                                                                                   flex_flow='row wrap')),\n",
    "                               dates_range,\n",
    "                               widgets.HBox([plot_button, variables, plot_type, include_running_mean], layout=widgets.Layout(justify_content=\"flex-start\",\n",
    "                                                                                                                             flex_flow='row wrap'))],\n",
    "                              layout=widgets.Layout(min_width=\"420px\",\n",
    "                                                    # display=\"flex\",\n",
    "                                                    # height=\"100%\",\n",
    "                                                    # max_height=\"100%\",\n",
    "                                                    max_width=\"100%\")),\n",
    "                  widgets.VBox([\n",
    "                               velocity_widget.fig.canvas,\n",
    "                               widgets.HBox([export_button, data_link])\n",
    "                               ], layout=widgets.Layout(min_width=\"420px\",\n",
    "                                                        overflow='scroll',\n",
    "                                                        max_width=\"100%\",\n",
    "                                                        display='flex'))],\n",
    "                 layout=layout)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.13"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}