Repository: holoviz/panel

Issue:
Vega plot not displaying within a holoviz panel in jupyter notebook
Apparently, vega plots have issues being shown when within a panel in a jupyter notebook. This might have something to do with Panel not serialising the data correctly.

For a minimal script showing the issue, see at the bottom of this question.

My findings:

* The vega import works nicely when used outside of a panel: the Vega specification copy/pasted from https://vega.github.io/editor/#/examples/vega/force-directed-layout is visualised as it should be using  `Vega(spec)`.
* When using  `pn.pane.Vega(spec)`  I get an empty space. Running the visualisation externally using  `pn.pane.Vega(spec).show()`  and looking at the source code, I see that the div is empty.

Versions:

* panel 0.7.0
* bokeh 1.4.0
* vega 2.6.0
* jupyter 1.0.0


```
#!/usr/bin/env python
import panel as pn
from bokeh.plotting import figure, output_notebook, show
from vega import VegaLite, Vega
pn.extension()
pn.extension('vega')
output_notebook()

spec = {
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 200,

  "data": [
    {
      "name": "table",
      "values": [
        {"category": "A", "amount": 28},
        {"category": "B", "amount": 55},
        {"category": "C", "amount": 43}
      ]
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "category"},
      "range": "width"
    },
    {
      "name": "yscale",
      "domain": {"data": "table", "field": "amount"},
      "range": "height"
    }
  ],

  "marks": [
    {
      "type": "rect",
      "from": {"data":"table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "category"},
          "width": {"scale": "xscale", "band": 1},
          "y": {"scale": "yscale", "field": "amount"},
          "y2": {"scale": "yscale", "value": 0}
        },
        "update": {
          "fill": {"value": "steelblue"}
        }
      }
    }
  ]
}

Vega(spec) # => shows barchart => OK

pn.Column(pn.panel("## Vega test"),
          pn.pane.Vega(spec),
          pn.panel("_end of test_"))
# => shows "Vega test", then empty space, the "end of test"

pn.Column(pn.panel("## Vega test"),
          pn.panel(spec),
          pn.panel("_end of test_"))
# => shows "Vega test", then empty space, the "end of test"
```

Thank you,
jan.


Discussion:

Resolving patch:
diff --git a/panel/pane/vega.py b/panel/pane/vega.py
--- a/panel/pane/vega.py
+++ b/panel/pane/vega.py
@@ -62,7 +62,11 @@ def _to_json(cls, obj):
         if isinstance(obj, dict):
             json = dict(obj)
             if 'data' in json:
-                json['data'] = dict(json['data'])
+                data = json['data']
+                if isinstance(data, dict):
+                    json['data'] = dict(data)
+                elif isinstance(data, list):
+                    json['data'] = [dict(d) for d in data]
             return json
         return obj.to_dict()
 
@@ -83,9 +87,15 @@ def _get_sources(self, json, sources):
                 sources[name] = ColumnDataSource(data=data)
             else:
                 sources[name] = ColumnDataSource(data=ds_as_cds(data))
-        data = json.get('data', {}).pop('values', {})
-        if data:
-            sources['data'] = ColumnDataSource(data=ds_as_cds(data))
+        data = json.get('data', {})
+        if isinstance(data, dict):
+            data = data.pop('values', {})
+            if data:
+                sources['data'] = ColumnDataSource(data=ds_as_cds(data))
+        elif isinstance(data, list):
+            for d in data:
+                sources[d['name']] = ColumnDataSource(data=ds_as_cds(d['values']))
+            
 
 
     @classmethod


Test patch: