Add Plotly Dash support

holoviz · Sep 29, 2020 · 72160d8 · 72160d8
1 parent 5f3c75f
commit 72160d8
Show file tree

Hide file tree

Showing 12 changed files with 1,284 additions and 11 deletions.
diff --git a/examples/reference/containers/plotly/DynamicMap.ipynb b/examples/reference/containers/plotly/DynamicMap.ipynb
@@ -64,7 +64,8 @@
     "\n",
     "# When run live, this cell's output should match the behavior of the GIF below\n",
     "dmap = hv.DynamicMap(sine_curve, kdims=['phase', 'frequency'])\n",
-    "dmap.redim.range(phase=(0.5,1), frequency=(0.5,1.25))"
+    "dmap = dmap.redim.range(phase=(0.5,1), frequency=(0.5,1.25))\n",
+    "dmap"
    ]
   },
   {
@@ -74,6 +75,41 @@
     "<img src='https://s3-eu-west-1.amazonaws.com/assets.holoviews.org/gifs/examples/containers/plotly/DynamicMap.gif'>"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "source": [
+    "This example can also be displayed using [Plotly Dash](https://dash.plotly.com/):\n",
+    "\n",
+    "```python\n",
+    "from holoviews.plotting.plotly.dash import holoviews_to_dash\n",
+    "import dash\n",
+    "import dash_html_components as html\n",
+    "\n",
+    "# Create App\n",
+    "external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n",
+    "app = dash.Dash(__name__, external_stylesheets=external_stylesheets)\n",
+    "\n",
+    "# Dash display\n",
+    "components = holoviews_to_dash(app, [dmap])\n",
+    "\n",
+    "app.layout = html.Div(\n",
+    "    [components.graphs[0],\n",
+    "     components.kdims[\"phase\"],  # Phase slider\n",
+    "     components.kdims[\"frequency\"],  # Frequency Slider\n",
+    "     components.store]\n",
+    ")\n",
+    "\n",
+    "if __name__ == '__main__':\n",
+    "    app.run_server(debug=True)\n",
+    "```"
+   ],
+   "metadata": {
+    "collapsed": false,
+    "pycharm": {
+     "name": "#%% md\n"
+    }
+   }
+  },
   {
    "cell_type": "markdown",
    "metadata": {},

diff --git a/examples/reference/streams/plotly/Bounds.ipynb b/examples/reference/streams/plotly/Bounds.ipynb
@@ -58,7 +58,8 @@
     "xhist = hv.operation.histogram(dmap, bin_range=points.range('x'), dimension='x', dynamic=True, normed=False)\n",
     "\n",
     "# Combine components and display\n",
-    "points * mean_sel * bounds << yhist << xhist"
+    "layout = points * mean_sel * bounds << yhist << xhist\n",
+    "layout"
    ]
   },
   {
@@ -67,6 +68,37 @@
    "source": [
     "<center><img src=\"https://assets.holoviews.org/gifs/examples/streams/plotly/bounds_selection.gif\" width=400></center>"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "source": [
+    "This example can also be displayed using [Plotly Dash](https://dash.plotly.com/):\n",
+    "\n",
+    "```python\n",
+    "from holoviews.plotting.plotly.dash import holoviews_to_dash\n",
+    "import dash\n",
+    "import dash_html_components as html\n",
+    "\n",
+    "# Create App\n",
+    "external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n",
+    "app = dash.Dash(__name__, external_stylesheets=external_stylesheets)\n",
+    "\n",
+    "# Dash display\n",
+    "components = holoviews_to_dash(\n",
+    "    app, [layout], reset_button=True\n",
+    ")\n",
+    "\n",
+    "app.layout = html.Div(\n",
+    "    [components.graphs[0], components.resets[0], components.store]\n",
+    ")\n",
+    "\n",
+    "if __name__ == '__main__':\n",
+    "    app.run_server(debug=True)\n",
+    "```"
+   ],
+   "metadata": {
+    "collapsed": false
+   }
   }
  ],
  "metadata": {

diff --git a/examples/reference/streams/plotly/BoundsX.ipynb b/examples/reference/streams/plotly/BoundsX.ipynb
@@ -45,7 +45,8 @@
     "\n",
     "dmap = hv.DynamicMap(make_from_boundsx, streams=[streams.BoundsX(source=curve, boundsx=(0,0))])\n",
     "\n",
-    "curve + dmap"
+    "layout = curve + dmap\n",
+    "layout"
    ]
   },
   {
@@ -54,6 +55,37 @@
    "source": [
     "<center><img src=\"https://assets.holoviews.org/gifs/examples/streams/plotly/boundsx_selection.gif\"></center>"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "source": [
+    "This example can also be displayed using [Plotly Dash](https://dash.plotly.com/):\n",
+    "\n",
+    "```python\n",
+    "from holoviews.plotting.plotly.dash import holoviews_to_dash\n",
+    "import dash\n",
+    "import dash_html_components as html\n",
+    "\n",
+    "# Create App\n",
+    "external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n",
+    "app = dash.Dash(__name__, external_stylesheets=external_stylesheets)\n",
+    "\n",
+    "# Dash display\n",
+    "components = holoviews_to_dash(\n",
+    "    app, [layout], reset_button=True\n",
+    ")\n",
+    "\n",
+    "app.layout = html.Div(\n",
+    "    [components.graphs[0], components.resets[0], components.store]\n",
+    ")\n",
+    "\n",
+    "if __name__ == '__main__':\n",
+    "    app.run_server(debug=True)\n",
+    "```"
+   ],
+   "metadata": {
+    "collapsed": false
+   }
   }
  ],
  "metadata": {

diff --git a/examples/reference/streams/plotly/BoundsY.ipynb b/examples/reference/streams/plotly/BoundsY.ipynb
@@ -50,7 +50,8 @@
     "area_dmap = hv.DynamicMap(make_area, streams=[bounds_stream])\n",
     "table_dmap = hv.DynamicMap(make_items, streams=[bounds_stream])\n",
     "\n",
-    "(curve * scatter * area_dmap + table_dmap)"
+    "layout = (curve * scatter * area_dmap + table_dmap)\n",
+    "layout"
    ]
   },
   {
@@ -59,6 +60,37 @@
    "source": [
     "<center><img src=\"https://assets.holoviews.org/gifs/examples/streams/plotly/boundsy_selection.gif\"></center>"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "source": [
+    "This example can also be displayed using [Plotly Dash](https://dash.plotly.com/):\n",
+    "\n",
+    "```python\n",
+    "from holoviews.plotting.plotly.dash import holoviews_to_dash\n",
+    "import dash\n",
+    "import dash_html_components as html\n",
+    "\n",
+    "# Create App\n",
+    "external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n",
+    "app = dash.Dash(__name__, external_stylesheets=external_stylesheets)\n",
+    "\n",
+    "# Dash display\n",
+    "components = holoviews_to_dash(\n",
+    "    app, [layout], reset_button=True\n",
+    ")\n",
+    "\n",
+    "app.layout = html.Div(\n",
+    "    [components.graphs[0], components.resets[0], components.store]\n",
+    ")\n",
+    "\n",
+    "if __name__ == '__main__':\n",
+    "    app.run_server(debug=True)\n",
+    "```"
+   ],
+   "metadata": {
+    "collapsed": false
+   }
   }
  ],
  "metadata": {

diff --git a/examples/reference/streams/plotly/RangeXY.ipynb b/examples/reference/streams/plotly/RangeXY.ipynb
@@ -46,7 +46,8 @@
     "rangexy = hv.streams.RangeXY(source=img)\n",
     "\n",
     "# Adjoin the dynamic histogram computed based on the current ranges\n",
-    "img << hv.DynamicMap(selected_hist, streams=[rangexy])"
+    "layout = img << hv.DynamicMap(selected_hist, streams=[rangexy])\n",
+    "layout"
    ]
   },
   {
@@ -55,6 +56,37 @@
    "source": [
     "<center><img src=\"https://assets.holoviews.org/gifs/examples/streams/plotly/range_histogram.gif\" width=400></center>"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "source": [
+    "This example can also be displayed using [Plotly Dash](https://dash.plotly.com/):\n",
+    "\n",
+    "```python\n",
+    "from holoviews.plotting.plotly.dash import holoviews_to_dash\n",
+    "import dash\n",
+    "import dash_html_components as html\n",
+    "\n",
+    "# Create App\n",
+    "external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n",
+    "app = dash.Dash(__name__, external_stylesheets=external_stylesheets)\n",
+    "\n",
+    "# Dash display\n",
+    "components = holoviews_to_dash(\n",
+    "    app, [layout], reset_button=True\n",
+    ")\n",
+    "\n",
+    "app.layout = html.Div(\n",
+    "    [components.graphs[0], components.resets[0], components.store]\n",
+    ")\n",
+    "\n",
+    "if __name__ == '__main__':\n",
+    "    app.run_server(debug=True)\n",
+    "```"
+   ],
+   "metadata": {
+    "collapsed": false
+   }
   }
  ],
  "metadata": {

diff --git a/examples/reference/streams/plotly/Selection1D_paired.ipynb b/examples/reference/streams/plotly/Selection1D_paired.ipynb
@@ -45,8 +45,10 @@
     "hline2 = hv.DynamicMap(lambda index: hv.HLine(points2['y'][index].mean() if index else -10), streams=[sel2])\n",
     "\n",
     "# Combine points and dynamic HLines\n",
-    "(points * points2 * hline1 * hline2).opts(\n",
-    "    opts.Points(height=400, width=400))"
+    "overlay = (points * points2 * hline1 * hline2).opts(\n",
+    "    opts.Points(height=400, width=400))\n",
+    "\n",
+    "overlay"
    ]
   },
   {
@@ -55,6 +57,37 @@
    "source": [
     "<center><img src=\"https://assets.holoviews.org/gifs/examples/streams/plotly/multiple_selection.gif\" width=350></center>"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "source": [
+    "This example can also be displayed using [Plotly Dash](https://dash.plotly.com/):\n",
+    "\n",
+    "```python\n",
+    "from holoviews.plotting.plotly.dash import holoviews_to_dash\n",
+    "import dash\n",
+    "import dash_html_components as html\n",
+    "\n",
+    "# Create App\n",
+    "external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n",
+    "app = dash.Dash(__name__, external_stylesheets=external_stylesheets)\n",
+    "\n",
+    "# Dash display\n",
+    "components = holoviews_to_dash(\n",
+    "    app, [overlay], reset_button=True\n",
+    ")\n",
+    "\n",
+    "app.layout = html.Div(\n",
+    "    [components.graphs[0], components.resets[0], components.store]\n",
+    ")\n",
+    "\n",
+    "if __name__ == '__main__':\n",
+    "    app.run_server(debug=True)\n",
+    "```"
+   ],
+   "metadata": {
+    "collapsed": false
+   }
   }
  ],
  "metadata": {

diff --git a/examples/reference/streams/plotly/Selection1D_points.ipynb b/examples/reference/streams/plotly/Selection1D_points.ipynb
@@ -47,7 +47,8 @@
     "    return selected.relabel(label).opts(color='red')\n",
     "\n",
     "# Combine points and DynamicMap\n",
-    "points + hv.DynamicMap(selected_info, streams=[selection])"
+    "layout = points + hv.DynamicMap(selected_info, streams=[selection])\n",
+    "layout"
    ]
   },
   {
@@ -56,6 +57,37 @@
    "source": [
     "<center><img src=\"https://assets.holoviews.org/gifs/examples/streams/plotly/point_selection1d.gif\" width=600></center>"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "source": [
+    "This example can also be displayed using [Plotly Dash](https://dash.plotly.com/):\n",
+    "\n",
+    "```python\n",
+    "from holoviews.plotting.plotly.dash import holoviews_to_dash\n",
+    "import dash\n",
+    "import dash_html_components as html\n",
+    "\n",
+    "# Create App\n",
+    "external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n",
+    "app = dash.Dash(__name__, external_stylesheets=external_stylesheets)\n",
+    "\n",
+    "# Dash display\n",
+    "components = holoviews_to_dash(\n",
+    "    app, [layout], reset_button=True\n",
+    ")\n",
+    "\n",
+    "app.layout = html.Div(\n",
+    "    [components.graphs[0], components.resets[0], components.store]\n",
+    ")\n",
+    "\n",
+    "if __name__ == '__main__':\n",
+    "    app.run_server(debug=True)\n",
+    "```"
+   ],
+   "metadata": {
+    "collapsed": false
+   }
   }
  ],
  "metadata": {

diff --git a/holoviews/core/decollate.py b/holoviews/core/decollate.py
@@ -3,7 +3,7 @@
 from .. import (
     Layout, DynamicMap, Element, Callable, Overlay, GridSpace, NdOverlay, HoloMap
 )
-from . import ViewableTree
+from . import ViewableTree, AdjointLayout
 from collections import namedtuple
 from ..streams import Stream, Derived
 
@@ -148,7 +148,7 @@ def to_expr_extract_streams(
                     stream_mapping.setdefault(container_key, []).append(cloned_stream)
             return stream_index
 
-    elif isinstance(hvobj, (Layout, GridSpace, NdOverlay, HoloMap, Overlay)):
+    elif isinstance(hvobj, (Layout, GridSpace, NdOverlay, HoloMap, Overlay, AdjointLayout)):
         fn = hvobj.clone(data={}).clone
         args = []
         data_expr = []

diff --git a/holoviews/plotting/plotly/__init__.py b/holoviews/plotting/plotly/__init__.py
@@ -89,6 +89,7 @@
                 Overlay: OverlayPlot,
                 NdOverlay: OverlayPlot,
                 Layout: LayoutPlot,
+                AdjointLayout: AdjointLayoutPlot,
                 NdLayout: LayoutPlot,
                 GridSpace: GridPlot,
                 GridMatrix: GridPlot}, backend='plotly')