Compatibility for new bokeh layout system (#32)

.appveyor.yml

@@ -1,6 +1,6 @@
 environment:
   global:
-    CHANS_DEV: "-c pyviz/label/dev -c jbednar"
+    CHANS_DEV: "-c pyviz/label/dev -c bokeh/label/dev -c jbednar"
   matrix:
     - PY: "3.6"
       CONDA: "C:\\Miniconda36-x64"

.travis.yml

@@ -11,7 +11,7 @@ sudo: false
 env:
   global:
     - PYENV_VERSION=3.6
-    - CHANS_DEV="-c pyviz/label/dev -c jbednar"
+    - CHANS_DEV="-c pyviz/label/dev -c bokeh/label/dev -c jbednar"
     - CHANS_REL="-c pyviz -c jbednar"
     - LABELS_DEV="--label dev"
     - LABELS_REL="--label dev --label main"
@@ -49,7 +49,7 @@ jobs:
       install:
         - doit env_create $CHANS_DEV --python=$PYENV_VERSION
         - source activate test-environment
-        - doit develop_install -o recommended -o tests $CHANS_DEV
+        - doit develop_install -o recommended -o tests -o build $CHANS_DEV
         - pip install codecov altair
         - doit env_capture
       script: doit test_all_recommended
@@ -81,7 +81,7 @@ jobs:
       install:
         - doit develop_install $CHANS_DEV -o build && pip uninstall -y panel
         - doit pip_on_conda
-        - conda install $CHANS_DEV nodejs=9.11.1
+        - conda install $CHANS_DEV nodejs
         - doit ecosystem=pip package_build $PKG_TEST_PYTHON --test-group=unit
       script: doit ecosystem=pip package_upload -u $PYPIUSER -p $PYPIPASS --pypi ${PYPI}
 

examples/user_guide/Introduction.ipynb

@@ -13,7 +13,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "import panel as pn, numpy as np, pandas as pd, matplotlib.pyplot as plt\n",
+    "import numpy as np, pandas as pd, matplotlib.pyplot as plt\n",
     "%matplotlib inline\n",
     "\n",
     "def mplplot(df, **kwargs):\n",

examples/user_guide/Layouts.ipynb

@@ -6,10 +6,10 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "import panel\n",
+    "import panel as pn\n",
     "from bokeh.plotting import figure\n",
-    "from panel.layout import *\n",
-    "panel.extension()"
+    "\n",
+    "pn.extension()"
    ]
   },
   {
@@ -23,9 +23,9 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "## WidgetBox\n",
+    "## Rows and Columns\n",
     "\n",
-    "In the [Widgets user guide](Widgets.ipynb) we already discovered that the ``WidgetBox`` allows composing multiple widgets."
+    "In the [Widgets user guide](Widgets.ipynb) we already discovered that the ``Row`` and ``Column`` layouts allow composing multiple widgets."
    ]
   },
   {
@@ -34,9 +34,9 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "w1 = panel.widgets.TextInput(name='Text:')\n",
-    "w2 = panel.widgets.FloatSlider(name='Slider')\n",
-    "widgets = WidgetBox(w1, w2, width=400)\n",
+    "w1 = pn.widgets.TextInput(name='Text:')\n",
+    "w2 = pn.widgets.FloatSlider(name='Slider')\n",
+    "widgets = pn.Column(w1, w2, width=400)\n",
     "widgets"
    ]
   },
@@ -53,7 +53,6 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "widgets.width = 300\n",
     "widgets.objects = widgets.objects[::-1]"
    ]
   },
@@ -70,7 +69,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "w3 = panel.widgets.Select(options=['A', 'B', 'C'])\n",
+    "w3 = pn.widgets.Select(options=['A', 'B', 'C'])\n",
     "\n",
     "widgets[1] = w3\n",
     "widgets.append(w1)"
@@ -80,14 +79,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "## Row"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "The ``Row`` and ``Column`` layouts work in exactly the same way but unlike the ``WidgetBox`` they can contain any other object including other layouts."
+    "A ``Row`` or ``Column`` may contain any kind of object including plots:"
    ]
   },
   {
@@ -102,7 +94,7 @@
     "p1.line([1, 2, 3], [1, 2, 3])\n",
     "p2.circle([1, 2, 3], [1, 2, 3])\n",
     "\n",
-    "row = Row(p1, p2)\n",
+    "row = pn.Row(p1, p2)\n",
     "row"
    ]
   },
@@ -119,7 +111,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "Column(widgets, row)"
+    "pn.Column(widgets, row)"
    ]
   },
   {
@@ -182,7 +174,7 @@
     "p1.line([1, 2, 3], [1, 2, 3])\n",
     "p2.circle([1, 2, 3], [1, 2, 3])\n",
     "\n",
-    "tabs = Tabs(('Line', p1), ('Scatter', p2), width=350)\n",
+    "tabs = pn.Tabs(('Line', p1), ('Scatter', pn.Column(p2, pn.widgets.TextInput(), pn.widgets.IntSlider())), width=350)\n",
     "tabs"
    ]
   },
@@ -202,6 +194,36 @@
     "print(tabs.active)\n",
     "tabs.active = 1"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Responsive plots\n",
+    "\n",
+    "By default panel objects will use a fixed size if one is provided or a default size if none is provided. However most panel objects also support reactive sizing which adjusts depending on the size of the viewport. These responsive sizing modes can be controlled using the ``sizing_mode`` parameter:"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "#### Sizing mode\n",
+    "\n",
+    "* **\"fixed\"**: Component is not responsive. It will retain its original width and height regardless of any subsequent browser window resize events.\n",
+    "\n",
+    "* **\"stretch_width\"**: Component will responsively resize to stretch to the available width, without maintaining any aspect ratio. The height of the component depends on the type of the component and may be fixed or fit to component's contents.\n",
+    "\n",
+    "* **\"stretch_height\"**: Component will responsively resize to stretch to the available height, without maintaining any aspect ratio. The width of the component depends on the type of the component and may be fixed or fit to component's contents.\n",
+    "\n",
+    "* **\"stretch_both\"**: Component is completely responsive, independently in width and height, and will occupy all the available horizontal and vertical space, even if this changes the aspect ratio of the component.\n",
+    "\n",
+    "* **\"scale_width\"**: Component will responsively resize to stretch to the available width, while maintaining the original or provided aspect ratio.\n",
+    "\n",
+    "* **\"scale_height\"**: Component will responsively resize to stretch to the available height, while maintaining the original or provided aspect ratio.\n",
+    "\n",
+    "* **\"scale_both\"**: Component will responsively resize to both the available width and height, while maintaining the original or provided aspect ratio.\n"
+   ]
   }
  ],
  "metadata": {

examples/user_guide/Links.ipynb

@@ -213,7 +213,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "pn.Row(pn.layout.WidgetBox(toggle, width=200), selections, pn.Spacer(width=50), selected)"
+    "pn.Row(pn.Column(toggle, width=200), selections, pn.Spacer(width=50), selected)"
    ]
   },
   {
@@ -324,7 +324,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "markdown = pn.pane.Markdown(\"<b>Markdown display</b>\")\n",
+    "markdown = pn.pane.Markdown(\"<b>Markdown display</b>\", width=400)\n",
     "text_input = pn.widgets.TextInput(value=\"Markdown display\")\n",
     "\n",
     "code = \"\"\"\n",
@@ -421,7 +421,7 @@
     "size_widget.jslink(points, value='glyph.size')\n",
     "color_widget.jslink(points, value='glyph.fill_color')\n",
     "\n",
-    "pn.Row(points, pn.layout.WidgetBox(size_widget, color_widget))"
+    "pn.Row(points, pn.Column(size_widget, color_widget))"
    ]
   },
   {

examples/user_guide/Panes.ipynb

@@ -45,7 +45,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "print(layout[0])"
+    "print(layout)"
    ]
   },
   {
@@ -126,7 +126,7 @@
    "outputs": [],
    "source": [
     "r.data_source.data['y'] = r.data_source.data['y'][::-1]\n",
-    "bk_layout[0].param.trigger('object')"
+    "bk_layout.param.trigger('object')"
    ]
   },
   {
@@ -145,7 +145,7 @@
     "new_fig = figure(width=300, height=300)\n",
     "r = new_fig.scatter([1, 2, 3], [1, 2, 3])\n",
     "\n",
-    "bk_layout[0].object = new_fig"
+    "bk_layout.object = new_fig"
    ]
   },
   {
@@ -190,7 +190,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "hv_layout[0].object = hv.Violin(box)"
+    "hv_layout.object = hv.Violin(box)"
    ]
   },
   {
@@ -244,7 +244,7 @@
    "outputs": [],
    "source": [
     "artist.set_ydata(artist.get_ydata()[::-1])\n",
-    "mpl_layout[0].param.trigger('object')"
+    "mpl_layout.param.trigger('object')"
    ]
   },
   {
@@ -292,7 +292,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "vega_layout[0].object = chart.mark_circle(size=100)"
+    "vega_layout.object = chart.mark_circle(size=100)"
    ]
   },
   {

examples/user_guide/Widgets.ipynb

@@ -6,10 +6,10 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "import panel\n",
+    "import panel as pn\n",
     "from panel.widgets import *\n",
     "\n",
-    "panel.extension()"
+    "pn.extension()"
    ]
   },
   {
@@ -115,7 +115,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "To compose multiple widgets they can be added to a WidgetBox, which also allows defining a fixed width. To learn more about laying out widgets and panels see the [layout user guide](Layouts.ipynb)."
+    "To compose multiple widgets they can be added to a ``Row`` or ``Column`` layout, which also allows defining a fixed width. To learn more about laying out widgets and panels see the [layout user guide](Layouts.ipynb)."
    ]
   },
   {
@@ -125,7 +125,7 @@
    "outputs": [],
    "source": [
     "slider = FloatSlider(name='Another widget', width=200)\n",
-    "WidgetBox(widget, slider, width=200)"
+    "pn.Column(widget, slider, width=200)"
    ]
   },
   {
@@ -652,13 +652,13 @@
     "options_dict = {'a':1,'b':2,'c':3}\n",
     "toggle_group_check = ToggleGroup(options = options_list)\n",
     "toggle_group_check.value = [2,3]\n",
-    "panel.Column(\n",
+    "pn.Column(\n",
     "    toggle_group_check,\n",
-    "    panel.Row(\n",
+    "    pn.Row(\n",
     "        ToggleGroup(options=options_dict, value=2, widget_type='button', behavior='radio'),\n",
     "        ToggleGroup(options=options_list, value=1, widget_type='box', behavior='radio'),\n",
     "    ),\n",
-    "    panel.Row(\n",
+    "    pn.Row(\n",
     "        ToggleGroup(options=options_dict, value=[2,3], widget_type='button', behavior='check'),\n",
     "        ToggleGroup(options=options_dict, value=[], widget_type='box', behavior='check')\n",
     "    ),\n",
@@ -805,7 +805,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.4"
+   "version": "3.6.8"
   }
  },
  "nbformat": 4,

panel/holoviews.py

@@ -9,7 +9,7 @@
 
 import param
 
-from .layout import Panel, WidgetBox
+from .layout import Panel, Column
 from .pane import PaneBase, Pane
 from .viewable import Viewable
 from .widgets import Player
@@ -38,7 +38,7 @@ class HoloViews(PaneBase):
 
     def __init__(self, object, **params):
         super(HoloViews, self).__init__(object, **params)
-        self.widget_box = WidgetBox()
+        self.widget_box = Column()
         self._update_widgets()
         self._plots = {}
 

panel/interact.py

@@ -29,7 +29,7 @@
 
 import param
 
-from .layout import WidgetBox, Panel, Column, Row
+from .layout import Panel, Column, Row
 from .pane import PaneBase, Pane
 from .util import basestring, as_unicode
 from .widgets import (Checkbox, TextInput, Widget, IntSlider, FloatSlider,
@@ -138,7 +138,7 @@ def __init__(self, object, params={}, **kwargs):
         self._pane = Pane(self.object(**self.kwargs), name=self.name,
                           _temporary=True)
         self._inner_layout = Row(self._pane)
-        self.widget_box = WidgetBox(*(widget for _, widget in widgets
+        self.widget_box = Column(*(widget for _, widget in widgets
                                       if isinstance(widget, Widget)))
         self.layout.objects = [self.widget_box, self._inner_layout]
         self._link_widgets()