Implementation of (Int|Float)[Input|Spinner] (New Bokeh widgets) (#1513)

holoviz · Oct 8, 2020 · 90d8d0e · 90d8d0e
1 parent b648692
commit 90d8d0e
Show file tree

Hide file tree

Showing 6 changed files with 333 additions and 108 deletions.
diff --git a/examples/reference/widgets/FloatInput.ipynb b/examples/reference/widgets/FloatInput.ipynb
@@ -0,0 +1,119 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
+    "\n",
+    "pn.extension()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The ``FloatInput`` widget allows selecting a floating point value using a spinbox. It behaves like a slider except that lower and upper bounds are optional and a specific value can be entered. Value can be changed using keyboard (up, down, page up, page down), mouse wheel and arrow buttons.\n",
+    "\n",
+    "For more information about listening to widget events and laying out widgets refer to the [widgets user guide](../../user_guide/Widgets.ipynb). Alternatively you can learn how to build GUIs by declaring parameters independently of any specific widgets in the [param user guide](../../user_guide/Param.ipynb). To express interactivity entirely using Javascript without the need for a Python server take a look at the [links user guide](../../user_guide/Param.ipynb).\n",
+    "\n",
+    "#### Parameters:\n",
+    "\n",
+    "For layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "\n",
+    "##### Core\n",
+    "\n",
+    "* **``value``** (float): The initial value of the spinner\n",
+    "* **``value_throttled``** (float): The initial value of the spinner\n",
+    "* **``step``** (float): The step added or subtracted to the current value on each click\n",
+    "* **``start``** (float): Optional minimum allowable value\n",
+    "* **``end``** (float): Optional maximum allowable value\n",
+    "* **``format``** (str): Optional format to convert the float value in string, see : http://numbrojs.com/old-format.html\n",
+    "* **``page_step_multiplier``** (int): Defines the multiplication factor applied to step when the page up and page down keys are pressed.\n",
+    "\n",
+    "##### Display\n",
+    "\n",
+    "* **``disabled``** (boolean): Whether the widget is editable\n",
+    "* **``name``** (str): The title of the widget\n",
+    "* **``placeholder``** (str): A placeholder string displayed when no value is entered\n",
+    "\n",
+    "___"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "float_input = pn.widgets.FloatInput(name='FloatInput', value=5., step=1e-1, start=0, end=1000)\n",
+    "\n",
+    "float_input"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "``FloatInput.value`` returns a float value:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "float_input.value"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Controls\n",
+    "\n",
+    "The `FloatSpinner` widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.Row(float_input.controls(jslink=True), float_input)"
+   ]
+  }
+ ],
+ "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.7.5"
+  },
+  "widgets": {
+   "application/vnd.jupyter.widget-state+json": {
+    "state": {},
+    "version_major": 2,
+    "version_minor": 0
+   }
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}
diff --git a/examples/reference/widgets/IntInput.ipynb b/examples/reference/widgets/IntInput.ipynb
@@ -0,0 +1,119 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
+    "\n",
+    "pn.extension()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The ``IntInput`` widget allows selecting an integer value using a spinbox. It behaves like a slider except that lower and upper bounds are optional and a specific value can be entered. Value can be changed using keyboard (up, down, page up, page down), mouse wheel and arrow buttons.\n",
+    "\n",
+    "For more information about listening to widget events and laying out widgets refer to the [widgets user guide](../../user_guide/Widgets.ipynb). Alternatively you can learn how to build GUIs by declaring parameters independently of any specific widgets in the [param user guide](../../user_guide/Param.ipynb). To express interactivity entirely using Javascript without the need for a Python server take a look at the [links user guide](../../user_guide/Param.ipynb).\n",
+    "\n",
+    "#### Parameters:\n",
+    "\n",
+    "For layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "\n",
+    "##### Core\n",
+    "\n",
+    "* **``value``** (int): The initial value of the spinner\n",
+    "* **``value_throttled``** (int): The initial value of the spinner\n",
+    "* **``step``** (int): The step added or subtracted to the current value on each click\n",
+    "* **``start``** (int): Optional minimum allowable value\n",
+    "* **``end``** (int): Optional maximum allowable value\n",
+    "* **``format``** (str): Optional format to convert the float value in string, see : http://numbrojs.com/old-format.html\n",
+    "* **``page_step_multiplier``** (int): Defines the multiplication factor applied to step when the page up and page down keys are pressed.\n",
+    "\n",
+    "##### Display\n",
+    "\n",
+    "* **``disabled``** (boolean): Whether the widget is editable\n",
+    "* **``name``** (str): The title of the widget\n",
+    "* **``placeholder``** (str): A placeholder string displayed when no value is entered\n",
+    "\n",
+    "___"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "int_input = pn.widgets.IntInput(name='IntInput', value=5, step=2, start=0, end=1000)\n",
+    "\n",
+    "int_input"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "``IntInput.value`` returns an integer value:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "int_input.value"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Controls\n",
+    "\n",
+    "The `IntInput` widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.Row(int_input.controls(jslink=True), int_input)"
+   ]
+  }
+ ],
+ "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.7.5"
+  },
+  "widgets": {
+   "application/vnd.jupyter.widget-state+json": {
+    "state": {},
+    "version_major": 2,
+    "version_minor": 0
+   }
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}
diff --git a/examples/reference/widgets/Spinner.ipynb b/examples/reference/widgets/Spinner.ipynb
diff --git a/panel/param.py b/panel/param.py
@@ -27,10 +27,10 @@
 )
 from .viewable import Layoutable
 from .widgets import (
-    Button, Checkbox, ColorPicker, DataFrame, DatePicker, DatetimeInput,
-    DateRangeSlider, FileSelector, FloatSlider, IntSlider, LiteralInput,
-    MultiSelect, RangeSlider, Select, Spinner, StaticText, TextInput,
-    Toggle, Widget
+    Button, Checkbox, ColorPicker, DataFrame, DatePicker,
+    DatetimeInput, DateRangeSlider, FileSelector, FloatSlider,
+    IntInput, IntSlider, LiteralInput, MultiSelect, RangeSlider,
+    Select, FloatInput, StaticText, TextInput, Toggle, Widget
 )
 from .widgets.button import _ButtonBase
 
@@ -381,9 +381,9 @@ def widget(self, p_name):
                 if not widget_class_overridden:
                     if (isinstance(p_obj, param.Number) and
                         not isinstance(p_obj, (param.Date, param.CalendarDate))):
-                        widget_class = Spinner
+                        widget_class = FloatInput
                         if isinstance(p_obj, param.Integer):
-                            kw['step'] = 1
+                            widget_class = IntInput
                     elif not issubclass(widget_class, LiteralInput):
                         widget_class = LiteralInput
             if hasattr(widget_class, 'step') and getattr(p_obj, 'step', None):

diff --git a/panel/widgets/__init__.py b/panel/widgets/__init__.py
@@ -25,6 +25,9 @@
     LiteralInput,
     StaticText,
     TextInput,
+    IntInput,
+    FloatInput,
+    NumberInput,
     Spinner,
     PasswordInput,
     TextAreaInput,