{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Scroll and Zoom\n",
    "\n",
    "BeakerX's table and plot widgets both support the scroll wheel.\n",
    "For tables, the scroll wheel scrolls vertically.\n",
    "For plots, the scroll wheel zooms.\n",
    "However, for the notebook as a whole, the scroll wheel also has a meaning, to scroll the notebook.\n",
    "So there's an ambiguity, and the UI needs a way to resolve it and decide where the scroll events go.\n",
    "\n",
    "BeakerX's approach starts with idea of *focus*, a widget that would be the target of any user commands.\n",
    "And indeed, in BeakerX when you click on a table or a plot, it gets the focus.\n",
    "This is represented by a green outline around the widget.\n",
    "The outline is styled to match the blue one that Jupyter uses to indicate the current cell.\n",
    "\n",
    "The widget will keep the focus as long as the mouse remains over it.  Feel free to interact with the widget, clicking, scrolling, and zooming away.  When you are done and move the mouse elsewhere, the green outline will vanish.  Focus is returned to the notebook, and the next scroll event will go to the page, and not to a widget.\n",
    "\n",
    "This **keyless blur** is a BeakerX innovation.\n",
    "\n",
    "Try it with the widgets below:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "from beakerx import *"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "TableDisplay([{'y1':4, 'm3':2, 'z2':1}, {'m3':4, 'z2':2}])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pd.read_csv('../resources/data/interest-rates.csv')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "rng = pd.date_range('1/1/2011', periods=1000, freq='H')\n",
    "ts = pd.Series(np.random.randn(len(rng)), index=rng)\n",
    "df = pd.DataFrame(ts, columns=['mV'])\n",
    "SimpleTimePlot(df, ['mV'])"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "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.6.5"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": false,
   "sideBar": false,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": false,
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}