Widget example.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Utilizzo dei Widget\n",
    "\n",
    "I widget sono una soluzione molto comoda per fornire interattività alle nostre procedure di analisi dei dati. Essi si agganciano in maniera molto semplice ad una funzione, tipicamente come decoratori, e possono influenzare la visualizzazione di una tabella di dati o di un grafico.\n",
    "\n",
    "\n",
    "## Installazione\n",
    "\n",
    "L'installazione comporta l'aggiunta del pacchetto di backend (estensione server di Jupyter Notebook) nel nostro ambiente di lavoro, la sua eventuale attivazione, e l'aggiunta dell'estensione di front-end a Jupyter Lab.\n",
    "\n",
    "Il backend usa JavaScript e il rendering viene fatto in HTML all'interni del browser. L'esecuzione di un notebook all'interno di un IDE come `PyCharm` comporta la mancata visualizzazione dei widget stessi.\n",
    "\n",
    "### Prerequisiti\n",
    "- gestore dei pacchetti `conda` o `pip`\n",
    "- `nodejs`\n",
    "- `jupyter`\n",
    "\n",
    "### Pip\n",
    "Se si usa `pip` digitare:\n",
    "```\n",
    "pip install ipywidgets\n",
    "jupyter nbextension enable --py widgetsnbextension\n",
    "```\n",
    "\n",
    "### Conda\n",
    "Se si usa `conda` portarsi nell'environment in cui si vuole fare l'installazione e digitare:\n",
    "```\n",
    "conda install -c conda-forge ipywidgets\n",
    "```\n",
    "\n",
    "`conda install` attiverà l'estensione server automaticamente.\n",
    "\n",
    "\n",
    "### Jupyter Lab\n",
    "Digitare:\n",
    "```\n",
    "jupyter labextension install @jupyter-widgets/jupyterlab-manager\n",
    "```\n",
    "\n",
    "## Utilizzo base\n",
    "Per utilizzare i widget, bisognerà importare `ipywidget` nella nostra applicazione:\n",
    "```python\n",
    "from ipywidgets import interact, interactive, fixed, interact_manual\n",
    "import ipywidgets as widgets\n",
    "```\n",
    "\n",
    "Le funzioni `interact`, `interactive`, `interact_manual` sono tre versioni del comando di interazione con l'utente in ingresso e rispettivamente:\n",
    "- interazione diretta con output del risultato\n",
    "- creazione di un widget che poi dev'essere mostrato con la funzione esplicita `display` di `IPython`\n",
    "- interazione manuale al click di un pulsante\n",
    "\n",
    "La funzione `fixed` serve a fissare un argomento in ingresso alla funzione cui stiamo applicando l'interattività. In caso contrario saranno generati widget per tutti gli input.\n",
    "\n",
    "Di seguito riportiamo alcuni esempi di chiamata delle tre funzioni."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "pycharm": {
     "is_executing": false
    }
   },
   "outputs": [
    {
     "output_type": "display_data",
     "data": {
      "text/plain": "interactive(children=(IntSlider(value=10, description='x', max=30, min=-10), IntSlider(value=3, description='y…",
      "application/vnd.jupyter.widget-view+json": {
       "version_major": 2,
       "version_minor": 0,
       "model_id": "694eea9a21a843bc95d0f3918eb86062"
      }
     },
     "metadata": {}
    }
   ],
   "source": [
    "from ipywidgets import interact, interactive, fixed, interact_manual\n",
    "import ipywidgets as widgets\n",
    "\n",
    "def f(x,y):\n",
    "    return x+y\n",
    "\n",
    "interact(f,x=10,y=3);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Come si vede, `interact` chiama la funzione per cui si vogliono definire gli nput in maniera interattiva e il codice `x=10, y=3` stabilisce i valori di defalut visualizzati per gli input e seleziona il widget `IntSlider` sulla base del fatto che sono stati passati dei valori numerici interi alle variabili."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "pycharm": {
     "is_executing": false
    }
   },
   "outputs": [
    {
     "output_type": "display_data",
     "data": {
      "text/plain": "interactive(children=(FloatSlider(value=0.75, continuous_update=False, description='a', max=3.0, min=-3.0), Fl…",
      "application/vnd.jupyter.widget-view+json": {
       "version_major": 2,
       "version_minor": 0,
       "model_id": "2e975b50d63c4369abb2ba6894b21417"
      }
     },
     "metadata": {}
    }
   ],
   "source": [
    "from ipywidgets import interact, interactive, fixed, interact_manual\n",
    "import ipywidgets as widgets\n",
    "\n",
    "from IPython.display import display\n",
    "\n",
    "def f(a, b):\n",
    "    display(a + b)\n",
    "    return a+b\n",
    "\n",
    "w=interactive(f,a=widgets.FloatSlider(min=-3.0,max=3.0,step=0.1,value=0.75,continuous_update=False),b=widgets.FloatSlider(min=-3.0,max=3.0,step=0.1,value=-2.4,continuous_update=False))\n",
    "display(w)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Nel codice precedente, la funzione `interactive` definisce esplicitamente un `FloatSlider` con tutte le sue proprietà passate esplicitamente come `kwargs` (_keyword arguments_) al costruttore.\n",
    "\n",
    "L'uso di `display` qui è duplice: `display(a, b)` visualizza il risultato all'interno della definizione della funzione `f`, mentre `display(w)` visualizza i due widget e il risultato in output. Si provi a commentare alternativamente le due chiamate.\n",
    "\n",
    "E' interessante il comportamento del `FloatSlider` con il parametro `continuous_update` impostato rispettivamente a `True`e `False`. Il risultato è che, nel caso `True` i valori cambiano con continuità sullo schermo, mentre in caso contrario il cambiamento si ha solo quando lo slider si ferma.\n",
    "\n",
    "Si noti che `interactive` costruisce una intera GUI in cui i diversi widget sono inclusi come tupla, di cui fa parte anche un widget di `Output`. Basta richiamare le informazioni su `w` dell'esempio precedente:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "output_type": "execute_result",
     "data": {
      "text/plain": [
       "(FloatSlider(value=-1.1, continuous_update=False, description='a', max=3.0, min=-3.0),\n",
       " FloatSlider(value=0.5, continuous_update=False, description='b', max=3.0, min=-3.0),\n",
       " Output(outputs=({'output_type': 'display_data', 'data': {'text/plain': '-0.6000000000000001'}, 'metadata': {}},)))"
      ]
     },
     "metadata": {},
     "execution_count": 3
    }
   ],
   "source": [
    "w.children"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "La funzione seguente stampa il suo argomento `i` e la sequenza di tutti i numeri da 0 al valore di `i`, posto che questi o i loro quadrati siano palindromi: la rappresentazione stringa del numero `str(x)` coincide col suo inverso ottenuto tramite slicing da destra a sinistra `str(x)[::-1]`. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "output_type": "stream",
     "name": "stdout",
     "text": [
      "1000000 [0, 1, 2, 3, 11, 22, 101, 111, 121, 202, 212, 1001, 1111, 2002, 10001, 10101, 10201, 11011, 11111, 11211, 20002, 20102, 100001, 101101, 110011, 111111, 200002]\nCPU times: user 460 ms, sys: 5.58 ms, total: 466 ms\nWall time: 465 ms\n"
     ]
    }
   ],
   "source": [
    "%%time\n",
    "def slow_function(i):\n",
    "    print(int(i),list(x for x in range(int(i)) if\n",
    "                str(x)==str(x)[::-1] and\n",
    "                str(x**2)==str(x**2)[::-1]))\n",
    "    return\n",
    "\n",
    "slow_function(1e6)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`slow_function` è molto lenta come ci dice il magic code IPython `%%time` che riporta i tempi di esecuzione della cella.\n",
    "\n",
    "L'uso diretto di `interact` o `interactive` causa problemi perché ogni aggiornamento dello slider risulta in una nuova esecuzione di `slow_function` che si sovrappone alla precedente."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "output_type": "display_data",
     "data": {
      "text/plain": "interactive(children=(FloatSlider(value=100000.0, description='i', max=10000000.0, min=100000.0, step=100000.0…",
      "application/vnd.jupyter.widget-view+json": {
       "version_major": 2,
       "version_minor": 0,
       "model_id": "3305d024b9d74f52a8246a9c9f8d32b3"
      }
     },
     "metadata": {}
    }
   ],
   "source": [
    "from ipywidgets import FloatSlider\n",
    "\n",
    "def slow_function(i):\n",
    "    print(int(i),list(x for x in range(int(i)) if\n",
    "                str(x)==str(x)[::-1] and\n",
    "                str(x**2)==str(x**2)[::-1]))\n",
    "    return\n",
    "\n",
    "\n",
    "interact_manual(slow_function,i=FloatSlider(min=1e5, max=1e7, step=1e5));"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "L'uso di `interact_manual` aggiunge un pulsante per l'esecuzione _on demand_ di `slow_function` solo dopo che il widget è stato posizionato correttamente.\n",
    "\n",
    "Infine, come esemplificato di seguito, `fixed` semplicemente blocca un elemento di input in modo tale da non visualizzare il corrispondente widget e da bloccarne il valore."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "pycharm": {
     "is_executing": false
    }
   },
   "outputs": [
    {
     "output_type": "display_data",
     "data": {
      "text/plain": "interactive(children=(IntSlider(value=10, description='x', max=30, min=-10), Output()), _dom_classes=('widget-…",
      "application/vnd.jupyter.widget-view+json": {
       "version_major": 2,
       "version_minor": 0,
       "model_id": "d25dadc614864c68b414d02082ad13ff"
      }
     },
     "metadata": {}
    }
   ],
   "source": [
    "from ipywidgets import interact, interactive, fixed, interact_manual\n",
    "import ipywidgets as widgets\n",
    "\n",
    "def f(x,y):\n",
    "    return x+y\n",
    "\n",
    "interact(f,x=10,y=fixed(3));"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Tipologie di Widget\n",
    "\n",
    "Esistono diverse tipologie di widget direttamente abbinate al tipo di dato su sui operano. Nell'esempio seguente, l'uso di un `dict` genera un drop-dpwn menu in cui le chiavi sono le voci del menu mentre la funzione opera direttamente sui valori associati."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "pycharm": {
     "is_executing": false
    }
   },
   "outputs": [
    {
     "output_type": "display_data",
     "data": {
      "text/plain": "interactive(children=(Dropdown(description='x', options={'mango': 1, 'banana': 2}, value=1), Output()), _dom_c…",
      "application/vnd.jupyter.widget-view+json": {
       "version_major": 2,
       "version_minor": 0,
       "model_id": "e91a35afb1e848ecaaa44d596acd2f49"
      }
     },
     "metadata": {}
    }
   ],
   "source": [
    "from ipywidgets import interact, interactive, fixed, interact_manual\n",
    "import ipywidgets as widgets\n",
    "\n",
    "\n",
    "def f(x):\n",
    "    return x\n",
    "\n",
    "\n",
    "interact(f, x={'mango':1,'banana':2});"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Nell'esempio seguente `interact` è usata come decoratore e i due argomenti generano una checkbox a partire da un tipo booleano e un `FloatSlider` a partire da un numero reale."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "pycharm": {
     "is_executing": false
    }
   },
   "outputs": [
    {
     "output_type": "display_data",
     "data": {
      "text/plain": "interactive(children=(Checkbox(value=True, description='x'), FloatSlider(value=1.0, description='y', max=3.0, …",
      "application/vnd.jupyter.widget-view+json": {
       "version_major": 2,
       "version_minor": 0,
       "model_id": "f1528bc8c4b14bf99308a9f5e1bae9be"
      }
     },
     "metadata": {}
    }
   ],
   "source": [
    "from ipywidgets import interact, interactive, fixed, interact_manual\n",
    "import ipywidgets as widgets\n",
    "\n",
    "@interact\n",
    "def g(x=True, y=1.0):\n",
    "    return (x, y)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Per una lista completa dei widget si consulti la [documentazione di ipywidget](https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20List.html)\n",
    "\n",
    "## Gestione degli eventi, animazione e interazione con i grafici\n",
    "\n",
    "La gestione degli eventi per i widgets avviene attraverso registrazioni di funzioni di callback che fanno da gestione di eventi. Un `Button` ha il suo evento `on_click` cui basta registrare un gestore per ottenere il comportamento voluto, come nel codice seguente, dove viene definito un semplice comportamento di _toggle_ per visualizzare e nascondere alternativamente un messaggio."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "pycharm": {
     "is_executing": false
    }
   },
   "outputs": [
    {
     "output_type": "display_data",
     "data": {
      "text/plain": "Button(button_style='info', description='Click Me!', style=ButtonStyle())",
      "application/vnd.jupyter.widget-view+json": {
       "version_major": 2,
       "version_minor": 0,
       "model_id": "35f2fd48cdc744ad8ebfa5f34dee54e6"
      }
     },
     "metadata": {}
    },
    {
     "output_type": "display_data",
     "data": {
      "text/plain": "Output()",
      "application/vnd.jupyter.widget-view+json": {
       "version_major": 2,
       "version_minor": 0,
       "model_id": "cb785e1db6774109947b4c4f4d1070ca"
      }
     },
     "metadata": {}
    }
   ],
   "source": [
    "import ipywidgets as widgets\n",
    "from IPython.display import display\n",
    "\n",
    "button = widgets.Button(description=\"Click Me!\",button_style='info')\n",
    "output = widgets.Output()\n",
    "click_count = 0\n",
    "\n",
    "display(button, output)\n",
    "\n",
    "def on_button_clicked(b):\n",
    "    global click_count \n",
    "    click_count = click_count + 1\n",
    "    with output:\n",
    "        output.clear_output()\n",
    "        if click_count%2 !=0:\n",
    "            print(\"You clicked me!\")\n",
    "\n",
    "button.on_click(on_button_clicked)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Nell'esempio seguente si illustra una gestione degli eventi generica, associata ad un widget qualunque. L'evento generico è `observe` che registra un gestore il quale deve avere una _signature_ (nel nostro caso `change`) che è in realtà un `dict` che ci dice cosa andiamo a notificare tramite il gestore quando c'è un cambiamento:\n",
    "\n",
    "- `type` il tipo di notifica\n",
    "- `new` il nuovo valore di ciò che è cambiato\n",
    "- `old` il vecchio valore di ciò che è cambiato\n",
    "- `name` il nome dell'attributo che è cambiato\n",
    "\n",
    "`observe` seleziona l'attributo da osservare attraverso il parametro `names`.\n",
    "\n",
    "Si noti l'uso di `HBox` che, insieme a `VBox` crea allineamenti orizzontali o verticali dei singoli widgets passati come una lista."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "output_type": "display_data",
     "data": {
      "text/plain": "HBox(children=(Label(value='The values of range1 and range2 are synchronized'), IntSlider(value=1, description…",
      "application/vnd.jupyter.widget-view+json": {
       "version_major": 2,
       "version_minor": 0,
       "model_id": "f1a2c33e3b34470dacc3da76bf1f0022"
      }
     },
     "metadata": {}
    }
   ],
   "source": [
    "import ipywidgets as widgets\n",
    "from IPython.display import display\n",
    "\n",
    "caption = widgets.Label(value='The values of range1 and range2 are synchronized')\n",
    "slider = widgets.IntSlider(min=-5, max=5, value=1, description='Slider')\n",
    "\n",
    "def handle_slider_change(change):\n",
    "    caption.value = 'The slider value is ' + (\n",
    "        'negative' if change.new < 0 else 'nonnegative'\n",
    "    )\n",
    "\n",
    "slider.observe(handle_slider_change, names='value')\n",
    "\n",
    "display(widgets.HBox([caption, slider]))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "L'interazione con i grafici è certamente la caratteristica più interessante dei widgets. Nell'esempio seguente, la funzione `f` traccia una retta di dato coefficiente angolare ed intercetta i quali sono passati come argomento. Il _magic code_ `%matplotlib inline` imposta il backend per il rendering di `matplotlib` che è quello del default di sistema operativo. La funzione `f` ha al suo interno la creazione del grafico come `matplotlib.pyplot.figure` e utilizza il vettore di valori di ascissa generato da `numpy.linspace`.\n",
    "\n",
    "L'interattività con il grafico si ottiene, al solito, utilizzando `interactive` cui passiamo i widget associati ai parametri di `f`. E' interessante l'utilizzo della proprietà `layout` a livello di singolo widget e a livello di tutta la GUI `inteactive_plot`. La proprietà `layout` consente di accedere direttamente ad alcune proprietà CSS che condizionano il rendering del widget. Il modello di layout utilizzato è [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) di cui `HBox` e `VBox` sono dei casi particolari con delle caratteristiche già predefinite.\n",
    "\n",
    "Per ulteriori approfondimenti si veda la [documentazione di ipywidgets](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html#)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "output_type": "display_data",
     "data": {
      "text/plain": "interactive(children=(FloatSlider(value=0.0, description='m', max=2.0, min=-2.0, orientation='vertical'), Floa…",
      "application/vnd.jupyter.widget-view+json": {
       "version_major": 2,
       "version_minor": 0,
       "model_id": "42141495eb27481d9cc896350f3fae9f"
      }
     },
     "metadata": {}
    }
   ],
   "source": [
    "%matplotlib inline\n",
    "\n",
    "import ipywidgets as widgets\n",
    "from ipywidgets import interactive\n",
    "import matplotlib.pyplot as plt\n",
    "import numpy as np\n",
    "\n",
    "def f(m, b):\n",
    "    plt.figure(2)\n",
    "    x = np.linspace(-10, 10, num=1000)\n",
    "    plt.plot(x, m * x + b)\n",
    "    plt.ylim(-5, 5)\n",
    "    plt.show()\n",
    "\n",
    "interactive_plot = interactive(f, m=widgets.FloatSlider(min=-2.0, max=2.0, orientation='vertical'), \n",
    "                               b=widgets.FloatSlider(min=-3, max=3, step=0.5, orientation='vertical'))\n",
    "\n",
    "output = interactive_plot.children[-1]\n",
    "output.layout = widgets.Layout(max_width='500px',margin='50px')\n",
    "output.layout.border = '1px solid red'\n",
    "interactive_plot.layout.flex_flow='row nowrap'\n",
    "\n",
    "interactive_plot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Infine, l'esempio seguente mostra l'animazione di un grafico usando il widget `Play`. L'interazione si ottiene collegando gli attributi `value` rispettivamente del player e dello slider utilizzato per controllare la pendenza della retta. Il player procede a passi interi e quindi si fa una scalatura del valore del parametro in ingresso ad `f`. Lo slider è usato solo come mezzo per collegare il player al grafico e non viene visualizzato esplicitamente. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "output_type": "display_data",
     "data": {
      "text/plain": "VBox(children=(Play(value=0, description='spin the straight line', interval=0, max=200, min=-200), Output()))",
      "application/vnd.jupyter.widget-view+json": {
       "version_major": 2,
       "version_minor": 0,
       "model_id": "aa30ab9241014aaeab1bb679a030cd66"
      }
     },
     "metadata": {}
    }
   ],
   "source": [
    "%matplotlib inline\n",
    "\n",
    "import ipywidgets as widgets\n",
    "from ipywidgets import interactive\n",
    "import matplotlib.pyplot as plt\n",
    "import numpy as np\n",
    "\n",
    "def f(m, b):\n",
    "    \n",
    "    # scaliamo il coefficiente angolare\n",
    "    slope = m / 100.0\n",
    "    plt.figure(2)\n",
    "    x = np.linspace(-10, 10, num=1000)\n",
    "    plt.plot(x, slope * x + b)\n",
    "    plt.ylim(-5, 5)\n",
    "    plt.show()\n",
    "\n",
    "play = widgets.Play(\n",
    "    interval=0.100,\n",
    "    value=0,\n",
    "    min=-200,\n",
    "    max=200,\n",
    "    step=1,\n",
    "    description=\"spin the straight line\",\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "interactive_plot = interactive(f,m=widgets.IntSlider(min=-200, max=200),b=fixed(0))\n",
    "\n",
    "widgets.jslink((play, 'value'), (interactive_plot.children[-2], 'value'))\n",
    "widgets.VBox([play,interactive_plot.children[-1]])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Esercizi\n",
    "\n",
    "1. Si crei un grafico che mostra l'andamento di un polinomio $P(x) = \\sum_{i=0}^na_ix^i,\\ x \\in [-5.0,5.0],\\ n \\in \\mathbb{N}$ in cui ogni coefficiente $a_i$ sia regolabile attraverso un `FloatText`. Si utilizzi un layout dinamico a griglia, con non più di tre widget per riga, in dipendenza dal grado del polinomio, impostato attraverso un proprio `IntSlider` con intervallo da $0$ a $10$. La finestra del grafico sarà in fondo, sotto i widget."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "name": "Python 3.8.3 64-bit ('bigdata': conda)",
   "display_name": "Python 3.8.3 64-bit ('bigdata': conda)",
   "metadata": {
    "interpreter": {
     "hash": "ddc5808000e670ee531b6d0df5cab3b50e0bc41afef88fb058cf86665e26377c"
    }
   }
  },
  "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.8.3-final"
  },
  "pycharm": {
   "stem_cell": {
    "cell_type": "raw",
    "source": [],
    "metadata": {
     "collapsed": false
    }
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}