Add Vega 3 extension from jupyter-renderers

buildutils/src/ensure-repo.ts

@@ -29,7 +29,7 @@ let UNUSED: { [key: string]: string[] } = {
   '@jupyterlab/theme-dark-extension': ['font-awesome'],
   '@jupyterlab/theme-light-extension': ['font-awesome'],
   '@jupyterlab/services': ['node-fetch', 'ws'],
-  '@jupyterlab/vega2-extension': ['d3', 'vega', 'vega-lite']
+  '@jupyterlab/vega3-extension': ['vega', 'vega-lite']
 };
 
 let pkgData: { [key: string]: any } = {};

dev_mode/package.json

@@ -67,7 +67,7 @@
     "@jupyterlab/tooltip": "^0.15.4",
     "@jupyterlab/tooltip-extension": "^0.15.4",
     "@jupyterlab/vdom-extension": "^0.15.4",
-    "@jupyterlab/vega2-extension": "^0.15.5",
+    "@jupyterlab/vega3-extension": "^0.14.2",
     "@phosphor/algorithm": "^1.1.2",
     "@phosphor/application": "^1.5.0",
     "@phosphor/commands": "^1.4.0",
@@ -149,7 +149,7 @@
       "@jupyterlab/json-extension": "",
       "@jupyterlab/pdf-extension": "",
       "@jupyterlab/vdom-extension": "",
-      "@jupyterlab/vega2-extension": ""
+      "@jupyterlab/vega3-extension": ""
     },
     "name": "JupyterLab",
     "buildDir": "./static",
@@ -260,7 +260,7 @@
       "@jupyterlab/tooltip": "../packages/tooltip",
       "@jupyterlab/tooltip-extension": "../packages/tooltip-extension",
       "@jupyterlab/vdom-extension": "../packages/vdom-extension",
-      "@jupyterlab/vega2-extension": "../packages/vega2-extension"
+      "@jupyterlab/vega3-extension": "../packages/vega3-extension"
     }
   }
 }

docs/source/developer/xkcd_extension_tutorial.rst

@@ -196,7 +196,6 @@ should look something like the following:
      [449] ./~/@jupyterlab/theme-dark-extension/lib/index.js 800 bytes {1} [optional] [built]
      [450] ./~/@jupyterlab/theme-light-extension/lib/index.js 804 bytes {1} [optional] [built]
      [451] ./~/@jupyterlab/tooltip-extension/lib/index.js 5.61 kB {1} [optional] [built]
-     [452] ./~/@jupyterlab/vega2-extension/lib/index.js 6.19 kB {1} [optional] [built]
      [453] ./~/es6-promise/auto.js 179 bytes {1} [built]
      [454] /Users/foo/workspace/xkcd/lib/index.js 353 bytes {1} [optional] [built]
      [455] ./~/font-awesome/css/font-awesome.min.css 892 bytes {1} [built]

examples/vega/vega3-extension.ipynb

@@ -0,0 +1,505 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# vega3-extension"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {
+    "collapsed": true
+   },
+   "outputs": [],
+   "source": [
+    "from IPython.display import display\n",
+    "import pandas as pd\n",
+    "\n",
+    "def Vega(spec):\n",
+    "    bundle = {}\n",
+    "    bundle['application/vnd.vega.v3+json'] = spec\n",
+    "    display(bundle, raw=True)\n",
+    "    \n",
+    "def VegaLite(spec):\n",
+    "    bundle = {}\n",
+    "    bundle['application/vnd.vegalite.v2+json'] = spec\n",
+    "    display(bundle, raw=True)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Vega(spec: dict)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {
+    "collapsed": true
+   },
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.vega.v3+json": {
+       "$schema": "https://vega.github.io/schema/vega/v3.0.json",
+       "axes": [
+        {
+         "orient": "bottom",
+         "scale": "xscale"
+        },
+        {
+         "orient": "left",
+         "scale": "yscale"
+        }
+       ],
+       "data": [
+        {
+         "name": "table",
+         "values": [
+          {
+           "amount": 28,
+           "category": "A"
+          },
+          {
+           "amount": 55,
+           "category": "B"
+          },
+          {
+           "amount": 43,
+           "category": "C"
+          },
+          {
+           "amount": 91,
+           "category": "D"
+          },
+          {
+           "amount": 81,
+           "category": "E"
+          },
+          {
+           "amount": 53,
+           "category": "F"
+          },
+          {
+           "amount": 19,
+           "category": "G"
+          },
+          {
+           "amount": 87,
+           "category": "H"
+          }
+         ]
+        }
+       ],
+       "height": 200,
+       "marks": [
+        {
+         "encode": {
+          "enter": {
+           "width": {
+            "band": 1,
+            "scale": "xscale"
+           },
+           "x": {
+            "field": "category",
+            "scale": "xscale"
+           },
+           "y": {
+            "field": "amount",
+            "scale": "yscale"
+           },
+           "y2": {
+            "scale": "yscale",
+            "value": 0
+           }
+          },
+          "hover": {
+           "fill": {
+            "value": "red"
+           }
+          },
+          "update": {
+           "fill": {
+            "value": "steelblue"
+           }
+          }
+         },
+         "from": {
+          "data": "table"
+         },
+         "type": "rect"
+        },
+        {
+         "encode": {
+          "enter": {
+           "align": {
+            "value": "center"
+           },
+           "baseline": {
+            "value": "bottom"
+           },
+           "fill": {
+            "value": "#333"
+           }
+          },
+          "update": {
+           "fillOpacity": [
+            {
+             "test": "datum === tooltip",
+             "value": 0
+            },
+            {
+             "value": 1
+            }
+           ],
+           "text": {
+            "signal": "tooltip.amount"
+           },
+           "x": {
+            "band": 0.5,
+            "scale": "xscale",
+            "signal": "tooltip.category"
+           },
+           "y": {
+            "offset": -2,
+            "scale": "yscale",
+            "signal": "tooltip.amount"
+           }
+          }
+         },
+         "type": "text"
+        }
+       ],
+       "padding": 5,
+       "scales": [
+        {
+         "domain": {
+          "data": "table",
+          "field": "category"
+         },
+         "name": "xscale",
+         "padding": 0.05,
+         "range": "width",
+         "round": true,
+         "type": "band"
+        },
+        {
+         "domain": {
+          "data": "table",
+          "field": "amount"
+         },
+         "name": "yscale",
+         "nice": true,
+         "range": "height"
+        }
+       ],
+       "signals": [
+        {
+         "name": "tooltip",
+         "on": [
+          {
+           "events": "rect:mouseover",
+           "update": "datum"
+          },
+          {
+           "events": "rect:mouseout",
+           "update": "{}"
+          }
+         ],
+         "value": {}
+        }
+       ],
+       "width": 400
+      }
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "Vega({\n",
+    "  \"$schema\": \"https://vega.github.io/schema/vega/v3.0.json\",\n",
+    "  \"width\": 400,\n",
+    "  \"height\": 200,\n",
+    "  \"padding\": 5,\n",
+    "\n",
+    "  \"data\": [\n",
+    "    {\n",
+    "      \"name\": \"table\",\n",
+    "      \"values\": [\n",
+    "        {\"category\": \"A\", \"amount\": 28},\n",
+    "        {\"category\": \"B\", \"amount\": 55},\n",
+    "        {\"category\": \"C\", \"amount\": 43},\n",
+    "        {\"category\": \"D\", \"amount\": 91},\n",
+    "        {\"category\": \"E\", \"amount\": 81},\n",
+    "        {\"category\": \"F\", \"amount\": 53},\n",
+    "        {\"category\": \"G\", \"amount\": 19},\n",
+    "        {\"category\": \"H\", \"amount\": 87}\n",
+    "      ]\n",
+    "    }\n",
+    "  ],\n",
+    "\n",
+    "  \"signals\": [\n",
+    "    {\n",
+    "      \"name\": \"tooltip\",\n",
+    "      \"value\": {},\n",
+    "      \"on\": [\n",
+    "        {\"events\": \"rect:mouseover\", \"update\": \"datum\"},\n",
+    "        {\"events\": \"rect:mouseout\",  \"update\": \"{}\"}\n",
+    "      ]\n",
+    "    }\n",
+    "  ],\n",
+    "\n",
+    "  \"scales\": [\n",
+    "    {\n",
+    "      \"name\": \"xscale\",\n",
+    "      \"type\": \"band\",\n",
+    "      \"domain\": {\"data\": \"table\", \"field\": \"category\"},\n",
+    "      \"range\": \"width\",\n",
+    "      \"padding\": 0.05,\n",
+    "      \"round\": True\n",
+    "    },\n",
+    "    {\n",
+    "      \"name\": \"yscale\",\n",
+    "      \"domain\": {\"data\": \"table\", \"field\": \"amount\"},\n",
+    "      \"nice\": True,\n",
+    "      \"range\": \"height\"\n",
+    "    }\n",
+    "  ],\n",
+    "\n",
+    "  \"axes\": [\n",
+    "    { \"orient\": \"bottom\", \"scale\": \"xscale\" },\n",
+    "    { \"orient\": \"left\", \"scale\": \"yscale\" }\n",
+    "  ],\n",
+    "\n",
+    "  \"marks\": [\n",
+    "    {\n",
+    "      \"type\": \"rect\",\n",
+    "      \"from\": {\"data\":\"table\"},\n",
+    "      \"encode\": {\n",
+    "        \"enter\": {\n",
+    "          \"x\": {\"scale\": \"xscale\", \"field\": \"category\"},\n",
+    "          \"width\": {\"scale\": \"xscale\", \"band\": 1},\n",
+    "          \"y\": {\"scale\": \"yscale\", \"field\": \"amount\"},\n",
+    "          \"y2\": {\"scale\": \"yscale\", \"value\": 0}\n",
+    "        },\n",
+    "        \"update\": {\n",
+    "          \"fill\": {\"value\": \"steelblue\"}\n",
+    "        },\n",
+    "        \"hover\": {\n",
+    "          \"fill\": {\"value\": \"red\"}\n",
+    "        }\n",
+    "      }\n",
+    "    },\n",
+    "    {\n",
+    "      \"type\": \"text\",\n",
+    "      \"encode\": {\n",
+    "        \"enter\": {\n",
+    "          \"align\": {\"value\": \"center\"},\n",
+    "          \"baseline\": {\"value\": \"bottom\"},\n",
+    "          \"fill\": {\"value\": \"#333\"}\n",
+    "        },\n",
+    "        \"update\": {\n",
+    "          \"x\": {\"scale\": \"xscale\", \"signal\": \"tooltip.category\", \"band\": 0.5},\n",
+    "          \"y\": {\"scale\": \"yscale\", \"signal\": \"tooltip.amount\", \"offset\": -2},\n",
+    "          \"text\": {\"signal\": \"tooltip.amount\"},\n",
+    "          \"fillOpacity\": [\n",
+    "            {\"test\": \"datum === tooltip\", \"value\": 0},\n",
+    "            {\"value\": 1}\n",
+    "          ]\n",
+    "        }\n",
+    "      }\n",
+    "    }\n",
+    "  ]\n",
+    "})"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Vega(spec: string)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {
+    "collapsed": true
+   },
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.vega.v3+json": "https://raw.githubusercontent.com/vega/vega/master/docs/examples/bar-chart.vg.json"
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "Vega('https://raw.githubusercontent.com/vega/vega/master/docs/examples/bar-chart.vg.json')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## VegaLite(spec: dict)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {
+    "collapsed": true
+   },
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.vegalite.v2+json": {
+       "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
+       "data": {
+        "values": [
+         {
+          "a": "A",
+          "b": 28
+         },
+         {
+          "a": "B",
+          "b": 55
+         },
+         {
+          "a": "C",
+          "b": 43
+         },
+         {
+          "a": "D",
+          "b": 91
+         },
+         {
+          "a": "E",
+          "b": 81
+         },
+         {
+          "a": "F",
+          "b": 53
+         },
+         {
+          "a": "G",
+          "b": 19
+         },
+         {
+          "a": "H",
+          "b": 87
+         },
+         {
+          "a": "I",
+          "b": 52
+         }
+        ]
+       },
+       "description": "A simple bar chart with embedded data.",
+       "encoding": {
+        "x": {
+         "field": "a",
+         "type": "ordinal"
+        },
+        "y": {
+         "field": "b",
+         "type": "quantitative"
+        }
+       },
+       "mark": "bar"
+      }
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "VegaLite({\n",
+    "  \"$schema\": \"https://vega.github.io/schema/vega-lite/v2.json\",\n",
+    "  \"description\": \"A simple bar chart with embedded data.\",\n",
+    "  \"data\": {\n",
+    "    \"values\": [\n",
+    "      {\"a\": \"A\",\"b\": 28}, {\"a\": \"B\",\"b\": 55}, {\"a\": \"C\",\"b\": 43},\n",
+    "      {\"a\": \"D\",\"b\": 91}, {\"a\": \"E\",\"b\": 81}, {\"a\": \"F\",\"b\": 53},\n",
+    "      {\"a\": \"G\",\"b\": 19}, {\"a\": \"H\",\"b\": 87}, {\"a\": \"I\",\"b\": 52}\n",
+    "    ]\n",
+    "  },\n",
+    "  \"mark\": \"bar\",\n",
+    "  \"encoding\": {\n",
+    "    \"x\": {\"field\": \"a\", \"type\": \"ordinal\"},\n",
+    "    \"y\": {\"field\": \"b\", \"type\": \"quantitative\"}\n",
+    "  }\n",
+    "})"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## VegaLite(spec: string)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {
+    "collapsed": true
+   },
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.vegalite.v2+json": "https://raw.githubusercontent.com/vega/vega-lite/master/examples/specs/bar.vl.json"
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "VegaLite('https://raw.githubusercontent.com/vega/vega-lite/master/examples/specs/bar.vl.json')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "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.6.3"
+  },
+  "widgets": {
+   "application/vnd.jupyter.widget-state+json": {
+    "state": {},
+    "version_major": 1,
+    "version_minor": 0
+   }
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

examples/vega/vega3-extension.vg.json

@@ -0,0 +1,199 @@
+{
+    "$schema": "https://vega.github.io/schema/vega/v3.0.json",
+    "description": "A simple bar chart with embedded data.",
+    "autosize": "pad",
+    "padding": 5,
+    "height": 200,
+    "style": "cell",
+    "data": [
+        {
+            "name": "source_0",
+            "values": [
+                {
+                    "a": "A",
+                    "b": 28
+                },
+                {
+                    "a": "B",
+                    "b": 55
+                },
+                {
+                    "a": "C",
+                    "b": 43
+                },
+                {
+                    "a": "D",
+                    "b": 91
+                },
+                {
+                    "a": "E",
+                    "b": 81
+                },
+                {
+                    "a": "F",
+                    "b": 53
+                },
+                {
+                    "a": "G",
+                    "b": 19
+                },
+                {
+                    "a": "H",
+                    "b": 87
+                },
+                {
+                    "a": "I",
+                    "b": 52
+                }
+            ]
+        },
+        {
+            "name": "data_0",
+            "source": "source_0",
+            "transform": [
+                {
+                    "type": "formula",
+                    "expr": "toNumber(datum[\"b\"])",
+                    "as": "b"
+                },
+                {
+                    "type": "filter",
+                    "expr": "datum[\"b\"] !== null && !isNaN(datum[\"b\"])"
+                }
+            ]
+        }
+    ],
+    "signals": [
+        {
+            "name": "x_step",
+            "value": 21
+        },
+        {
+            "name": "width",
+            "update": "bandspace(domain('x').length, 0.1, 0.05) * x_step"
+        }
+    ],
+    "marks": [
+        {
+            "name": "marks",
+            "type": "rect",
+            "style": [
+                "bar"
+            ],
+            "from": {
+                "data": "data_0"
+            },
+            "encode": {
+                "update": {
+                    "x": {
+                        "scale": "x",
+                        "field": "a"
+                    },
+                    "width": {
+                        "scale": "x",
+                        "band": true
+                    },
+                    "y": {
+                        "scale": "y",
+                        "field": "b"
+                    },
+                    "y2": {
+                        "scale": "y",
+                        "value": 0
+                    },
+                    "fill": {
+                        "value": "#4c78a8"
+                    }
+                }
+            }
+        }
+    ],
+    "scales": [
+        {
+            "name": "x",
+            "type": "band",
+            "domain": {
+                "data": "data_0",
+                "field": "a",
+                "sort": true
+            },
+            "range": {
+                "step": {
+                    "signal": "x_step"
+                }
+            },
+            "paddingInner": 0.1,
+            "paddingOuter": 0.05
+        },
+        {
+            "name": "y",
+            "type": "linear",
+            "domain": {
+                "data": "data_0",
+                "field": "b"
+            },
+            "range": [
+                {
+                    "signal": "height"
+                },
+                0
+            ],
+            "nice": true,
+            "zero": true
+        }
+    ],
+    "axes": [
+        {
+            "scale": "x",
+            "orient": "bottom",
+            "labelOverlap": true,
+            "title": "a",
+            "zindex": 1,
+            "encode": {
+                "labels": {
+                    "update": {
+                        "angle": {
+                            "value": 270
+                        },
+                        "align": {
+                            "value": "right"
+                        },
+                        "baseline": {
+                            "value": "middle"
+                        }
+                    }
+                }
+            }
+        },
+        {
+            "scale": "y",
+            "orient": "left",
+            "labelOverlap": true,
+            "tickCount": {
+                "signal": "ceil(height/40)"
+            },
+            "title": "b",
+            "zindex": 1
+        },
+        {
+            "scale": "y",
+            "orient": "left",
+            "domain": false,
+            "grid": true,
+            "labels": false,
+            "maxExtent": 0,
+            "minExtent": 0,
+            "tickCount": {
+                "signal": "ceil(height/40)"
+            },
+            "ticks": false,
+            "zindex": 0,
+            "gridScale": "x"
+        }
+    ],
+    "config": {
+        "axisY": {
+            "minExtent": 30
+        }
+    }
+}

examples/vega/vega3-extension.vl.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
+  "description": "A simple bar chart with embedded data.",
+  "data": {
+    "values": [
+      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
+      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
+      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
+    ]
+  },
+  "mark": "bar",
+  "encoding": {
+    "x": {"field": "a", "type": "ordinal"},
+    "y": {"field": "b", "type": "quantitative"}
+  }
+}

jupyterlab/staging/package.json

@@ -67,7 +67,6 @@
     "@jupyterlab/tooltip": "^0.15.4",
     "@jupyterlab/tooltip-extension": "^0.15.4",
     "@jupyterlab/vdom-extension": "^0.15.4",
-    "@jupyterlab/vega2-extension": "^0.15.5",
     "@phosphor/algorithm": "^1.1.2",
     "@phosphor/application": "^1.5.0",
     "@phosphor/commands": "^1.4.0",
@@ -149,7 +148,7 @@
       "@jupyterlab/json-extension": "",
       "@jupyterlab/pdf-extension": "",
       "@jupyterlab/vdom-extension": "",
-      "@jupyterlab/vega2-extension": ""
+      "@jupyterlab/vega3-extension": ""
     },
     "name": "JupyterLab",
     "buildDir": "./build",

packages/metapackage/package.json

@@ -89,7 +89,7 @@
     "@jupyterlab/tooltip": "^0.15.4",
     "@jupyterlab/tooltip-extension": "^0.15.4",
     "@jupyterlab/vdom-extension": "^0.15.4",
-    "@jupyterlab/vega2-extension": "^0.15.5"
+    "@jupyterlab/vega3-extension": "^0.14.2"
   },
   "devDependencies": {
     "fs-extra": "~4.0.2",

packages/metapackage/src/index.ts

@@ -58,4 +58,4 @@ import '@jupyterlab/theme-light-extension';
 import '@jupyterlab/tooltip';
 import '@jupyterlab/tooltip-extension';
 import '@jupyterlab/vdom-extension';
-import '@jupyterlab/vega2-extension';
+import '@jupyterlab/vega3-extension';

packages/metapackage/src/typings.d.ts

@@ -7,4 +7,3 @@
 /// <reference path="../../rendermime/typings/ansi_up/ansi_up.d.ts"/>
 /// <reference path="../../terminal/typings/xterm/xterm.d.ts"/>
 /// <reference path="../../vdom-extension/src/transform-vdom.d.ts"/>
-/// <reference path="../../vega2-extension/typings/vega-embed/vega-embed.d.ts"/>

packages/rendermime-interfaces/README.md

@@ -11,4 +11,4 @@ When using these interfaces, extensions only need to provide some metadata about
 wht kind of mime bundle they are able to render, and a `Widget` with
 a `renderModel` method that renders the mime bundle.
 
-Examples can be found in [@jupyterlab/vega2-extension](../vega2-extension) and [@jupyterlab/pdf-extension](../pdf-extension).
+Examples can be found in [@jupyterlab/vega3-extension](../vega3-extension) and [@jupyterlab/pdf-extension](../pdf-extension).

packages/vega2-extension/src/index.ts

@@ -1,240 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-import {
-  JSONObject, JSONValue, ReadonlyJSONObject
-} from '@phosphor/coreutils';
-
-import {
-  Widget
-} from '@phosphor/widgets';
-
-import {
-  IRenderMime
-} from '@jupyterlab/rendermime-interfaces';
-
-/**
- * Import vega-embed in this manner due to how it is exported.
- */
-// Import only the typings for vega-embed - do not use for values.
-import embed = require('vega-embed');
-
-
-import '../style/index.css';
-
-
-/**
- * The CSS class to add to the Vega and Vega-Lite widget.
- */
-const VEGA_COMMON_CLASS = 'jp-RenderedVegaCommon';
-
-/**
- * The CSS class to add to the Vega.
- */
-const VEGA_CLASS = 'jp-RenderedVega';
-
-/**
- * The CSS class to add to the Vega-Lite.
- */
-const VEGALITE_CLASS = 'jp-RenderedVegaLite';
-
-/**
- * The MIME type for Vega.
- *
- * #### Notes
- * The version of this follows the major version of Vega.
- */
-export
-const VEGA_MIME_TYPE = 'application/vnd.vega.v2+json';
-
-/**
- * The MIME type for Vega-Lite.
- *
- * #### Notes
- * The version of this follows the major version of Vega-Lite.
- */
-export
-const VEGALITE_MIME_TYPE = 'application/vnd.vegalite.v1+json';
-
-
-/**
- * A widget for rendering Vega or Vega-Lite data, for usage with rendermime.
- */
-export
-class RenderedVega extends Widget implements IRenderMime.IRenderer {
-  /**
-   * Create a new widget for rendering Vega/Vega-Lite.
-   */
-  constructor(options: IRenderMime.IRendererOptions) {
-    super();
-    this.addClass(VEGA_COMMON_CLASS);
-
-    // Handle things related to the MIME type.
-    let mimeType = this._mimeType = options.mimeType;
-    if (mimeType === VEGA_MIME_TYPE) {
-      this.addClass(VEGA_CLASS);
-      this._mode = 'vega';
-    } else {
-      this.addClass(VEGALITE_CLASS);
-      this._mode = 'vega-lite';
-    }
-  }
-
-  /**
-   * Render Vega/Vega-Lite into this widget's node.
-   */
-  renderModel(model: IRenderMime.IMimeModel): Promise<void> {
-
-    let data = model.data[this._mimeType] as ReadonlyJSONObject;
-    let updatedData: JSONObject;
-    if (this._mode === 'vega-lite') {
-      updatedData = Private.updateVegaLiteDefaults(data);
-    } else {
-      updatedData = data as JSONObject;
-    }
-
-    let embedSpec = {
-      mode: this._mode,
-      spec: updatedData
-    };
-
-    return Private.ensureMod().then(embedFunc => {
-      return new Promise<void>((resolve, reject) => {
-        embedFunc(this.node, embedSpec, (error: any, result: any): any => {
-          if (error) {
-            return reject(error);
-          }
-
-          // Save png data in MIME bundle along with original MIME data.
-          if (!model.data['image/png']) {
-            let imageData = result.view.toImageURL().split(',')[1] as JSONValue;
-            let newData = {...(model.data), 'image/png': imageData};
-            model.setData({ data: newData });
-          }
-          resolve(undefined);
-        });
-      });
-    });
-  }
-
-  private _mimeType: string;
-  private _mode: string;
-}
-
-
-/**
- * A mime renderer factory for vega data.
- */
-export
-const rendererFactory: IRenderMime.IRendererFactory = {
-  safe: true,
-  mimeTypes: [VEGA_MIME_TYPE, VEGALITE_MIME_TYPE],
-  defaultRank: 60,
-  createRenderer: options => new RenderedVega(options)
-};
-
-const extension: IRenderMime.IExtension = {
-  id: '@jupyterlab/vega2-extension:factory',
-  rendererFactory,
-  dataType: 'json',
-  documentWidgetFactoryOptions: [{
-    name: 'Vega',
-    modelName: 'text',
-    primaryFileType: 'vega',
-    fileTypes: ['vega', 'json'],
-    defaultFor: ['vega']
-  },
-  {
-    name: 'Vega Lite',
-    modelName: 'text',
-    primaryFileType: 'vega-lite',
-    fileTypes: ['vega-lite', 'json'],
-    defaultFor: ['vega-lite']
-  }],
-  fileTypes: [{
-    mimeTypes: [VEGA_MIME_TYPE],
-    name: 'vega',
-    displayName: 'Vega File',
-    fileFormat: 'text',
-    extensions: ['.vg', '.vg.json', '.vega'],
-    iconClass: 'jp-MaterialIcon jp-VegaIcon',
-  },
-  {
-    mimeTypes: [VEGALITE_MIME_TYPE],
-    name: 'vega-lite',
-    displayName: 'Vega-Lite File',
-    fileFormat: 'text',
-    extensions: ['.vl', '.vl.json', '.vegalite'],
-    iconClass: 'jp-MaterialIcon jp-VegaIcon',
-  }]
-};
-
-export default extension;
-
-
-/**
- * Namespace for module privates.
- */
-namespace Private {
-
-  /**
-   * Default cell config for Vega-Lite.
-   */
-  const defaultCellConfig: JSONObject = {
-    'width': 400,
-    'height': 400 / 1.5
-  };
-
-  /**
-   * The embed module import.
-   */
-  let mod: typeof embed;
-
-  /**
-   * Initialize the vega-embed module.
-   */
-  export
-  function ensureMod(): Promise<typeof embed> {
-    return new Promise((resolve, reject) => {
-      if (mod !== undefined) {
-        resolve(mod);
-        return;
-      }
-      (require as any).ensure(['vega-embed'], (require: NodeRequire) => {
-        mod = require('vega-embed');
-        resolve(mod);
-      },
-      (err: any) => {
-        reject(err);
-      },
-      'vega2'
-      );
-    });
-  }
-
-  /**
-   * Apply the default cell config to the spec in place.
-   *
-   * #### Notes
-   * This carefully does a shallow copy to avoid copying the potentially
-   * large data.
-   */
-  export
-  function updateVegaLiteDefaults(spec: ReadonlyJSONObject): JSONObject {
-    let config = spec.config as JSONObject;
-    if (!config) {
-      return {...{'config': {'cell': defaultCellConfig}}, ...spec};
-    }
-    let cell = config.cell as JSONObject;
-    if (cell) {
-      return {
-        ...{'config': {...{'cell': {...defaultCellConfig, ...cell}}}, ...config},
-        ...spec
-      };
-    } else {
-      return {...{'config': {...{'cell': {...defaultCellConfig}}}, ...config}, ...spec};
-    }
-  }
-}

packages/vega2-extension/src/typings.d.ts

@@ -1 +0,0 @@
-/// <reference path="../typings/vega-embed/vega-embed.d.ts"/>

packages/vega2-extension/typings/vega-embed/vega-embed.d.ts

@@ -1,4 +0,0 @@
-declare module 'vega-embed' {
-    function embed(el: any, opt: any, callback: any): any;
-    export = embed;
-}

packages/vega2-extension/README.md → packages/vega3-extension/README.md

@@ -1,6 +1,6 @@
-# @jupyterlab/vega2-extension
+# @jupyterlab/vega3-extension
 
-A mime-renderer extension for JupyterLab that provides support for rendering Vega and Vega-lite documents and mimebundles.
+A mime-renderer extension for JupyterLab that provides support for rendering Vega and Vega-Lite documents and mimebundles.
 
 
 Example in Python:
@@ -10,8 +10,8 @@ Example in Python:
 from IPython.display import display
 
 display({
-    "application/vnd.vegalite.v1+json": {
-        "$schema": "https://vega.github.io/schema/vega-lite/v1.json",
+    "application/vnd.vegalite.v2+json": {
+        "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
         "description": "A simple bar chart with embedded data.",
         "data": {
             "values": [

packages/vega2-extension/package.json → packages/vega3-extension/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@jupyterlab/vega2-extension",
-  "version": "0.15.5",
-  "description": "JupyterLab - Vega 2 Mime Renderer Extension",
+  "name": "@jupyterlab/vega3-extension",
+  "version": "0.14.2",
+  "description": "JupyterLab - Vega 3 and Vega-Lite 2 Mime Renderer Extension",
   "homepage": "https://github.com/jupyterlab/jupyterlab",
   "bugs": {
     "url": "https://github.com/jupyterlab/jupyterlab/issues"
@@ -10,9 +10,8 @@
   "author": "Project Jupyter",
   "files": [
     "lib/*.d.ts",
-    "lib/*.js.map",
     "lib/*.js",
-    "style/*.css"
+    "style/*.*"
   ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -33,13 +32,10 @@
     "@jupyterlab/rendermime-interfaces": "^1.0.6",
     "@phosphor/coreutils": "^1.3.0",
     "@phosphor/widgets": "^1.5.0",
-    "d3": "~3.5.17",
-    "vega": "~2.6.5",
-    "vega-embed": "~2.2.0",
-    "vega-lite": "~1.0.16"
+    "vega-embed": "^3.1.1"
   },
   "devDependencies": {
-    "@types/node": "~8.0.47",
+    "@types/vega": "^0.0.30",
     "rimraf": "~2.6.2",
     "typescript": "~2.6.2"
   },

packages/vega3-extension/src/index.ts

@@ -0,0 +1,139 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+import {
+  JSONObject
+} from '@phosphor/coreutils';
+
+import {
+  Widget
+} from '@phosphor/widgets';
+
+import {
+  IRenderMime
+} from '@jupyterlab/rendermime-interfaces';
+
+import vegaEmbed, { Mode, vega } from 'vega-embed';
+
+import '../style/index.css';
+
+
+/**
+ * The CSS class to add to the Vega and Vega-Lite widget.
+ */
+const VEGA_COMMON_CLASS = 'jp-RenderedVegaCommon3';
+
+/**
+ * The CSS class to add to the Vega.
+ */
+const VEGA_CLASS = 'jp-RenderedVega3';
+
+/**
+ * The CSS class to add to the Vega-Lite.
+ */
+const VEGALITE_CLASS = 'jp-RenderedVegaLite2';
+
+/**
+ * The MIME type for Vega.
+ *
+ * #### Notes
+ * The version of this follows the major version of Vega.
+ */
+export
+const VEGA_MIME_TYPE = 'application/vnd.vega.v3+json';
+
+/**
+ * The MIME type for Vega-Lite.
+ *
+ * #### Notes
+ * The version of this follows the major version of Vega-Lite.
+ */
+export
+const VEGALITE_MIME_TYPE = 'application/vnd.vegalite.v2+json';
+
+
+/**
+ * A widget for rendering Vega or Vega-Lite data, for usage with rendermime.
+ */
+export
+class RenderedVega3 extends Widget implements IRenderMime.IRenderer {
+  /**
+   * Create a new widget for rendering Vega/Vega-Lite.
+   */
+  constructor(options: IRenderMime.IRendererOptions) {
+    super();
+    this._mimeType = options.mimeType;
+    this._resolver = options.resolver;
+    this.addClass(VEGA_COMMON_CLASS);
+    this.addClass(this._mimeType === VEGA_MIME_TYPE ? VEGA_CLASS : VEGALITE_CLASS);
+  }
+
+  /**
+   * Render Vega/Vega-Lite into this widget's node.
+   */
+  renderModel(model: IRenderMime.IMimeModel): Promise<void> {
+    const data = model.data[this._mimeType] as JSONObject;
+    const mode: Mode = this._mimeType === VEGA_MIME_TYPE ? 'vega' : 'vega-lite';
+    return this._resolver.resolveUrl('').then((path: string) => {
+      const baseURL = `/files/${path}`;
+      const loader = vega.loader({ baseURL });
+      const options = {
+        mode,
+        loader,
+        actions: true
+      };
+      return vegaEmbed(this.node as HTMLBaseElement, data, options).then((result) => {
+        // result contains the Vega spec and view
+      }).catch(console.warn);
+    });
+  }
+
+  private _mimeType: string;
+  private _resolver: IRenderMime.IResolver;
+}
+
+
+/**
+ * A mime renderer factory for vega data.
+ */
+export
+const rendererFactory: IRenderMime.IRendererFactory = {
+  safe: true,
+  mimeTypes: [VEGA_MIME_TYPE, VEGALITE_MIME_TYPE],
+  createRenderer: options => new RenderedVega3(options)
+};
+
+const extension: IRenderMime.IExtension = {
+  id: '@jupyterlab/vega3-extension:factory',
+  rendererFactory,
+  rank: 50,  // prefer over vega 2 extension
+  dataType: 'json',
+  documentWidgetFactoryOptions: [{
+    name: 'Vega 3',
+    primaryFileType: 'vega3',
+    fileTypes: ['vega3', 'json'],
+    defaultFor: ['vega3']
+  },
+  {
+    name: 'Vega-Lite 2',
+    primaryFileType: 'vega-lite2',
+    fileTypes: ['vega-lite2', 'json'],
+    defaultFor: ['vega-lite2']
+  }],
+  fileTypes: [{
+    mimeTypes: [VEGA_MIME_TYPE],
+    name: 'vega3',
+    extensions: ['.vg', '.vg.json', '.vega'],
+    iconClass: 'jp-MaterialIcon jp-VegaIcon',
+  },
+  {
+    mimeTypes: [VEGALITE_MIME_TYPE],
+    name: 'vega-lite2',
+    extensions: ['.vl', '.vl.json', '.vegalite'],
+    iconClass: 'jp-MaterialIcon jp-VegaIcon',
+  }]
+};
+
+export default extension;

packages/vega2-extension/style/index.css → packages/vega3-extension/style/index.css

@@ -4,25 +4,23 @@
 |----------------------------------------------------------------------------*/
 
 
-.jp-RenderedVegaCommon .vega-actions a {
+.jp-RenderedVegaCommon3 .vega-actions a {
   margin-right: 8px;
   font-size: var(--jp-ui-font-size1);
   color: var(--jp-ui-font-color2);
 }
 
 
-.jp-BaseVegaWidget .jp-RenderedVegaCommon
+.jp-RenderedVegaCommon3
  {
   margin-left: 8px;
   margin-top: 8px;
 }
 
-
-.jp-MimeDocument.jp-Document .jp-RenderedVegaCommon {
+.jp-MimeDocument .jp-RenderedVegaCommon3 {
   padding: 16px;
 }
 
-
 .vega canvas {
   background: var(--jp-vega-background);
 }