ENH: bring over custom webio commands

assets/index.js

@@ -0,0 +1,67 @@
+import {contains, filter, has, isNil, type} from 'ramda';
+
+
+WebIO.CommandSets.Plotly = {
+  filterEventData: function(gd, eventData, event) {
+    let filteredEventData;
+    if (contains(event, ['click', 'hover', 'selected'])) {
+        const points = [];
+
+        if (isNil(eventData)) {
+            return null;
+        }
+
+        /*
+         * remove `data`, `layout`, `xaxis`, etc
+         * objects from the event data since they're so big
+         * and cause JSON stringify ciricular structure errors.
+         *
+         * also, pull down the `customdata` point from the data array
+         * into the event object
+         */
+        const data = gd.data;
+
+        for(let i=0; i < eventData.points.length; i++) {
+            const fullPoint = eventData.points[i];
+            const pointData = filter(function(o) {
+                return !contains(type(o), ['Object', 'Array'])
+            }, fullPoint);
+            if (has('curveNumber', fullPoint) &&
+                has('pointNumber', fullPoint) &&
+                has('customdata', data[pointData.curveNumber])
+            ) {
+                pointData['customdata'] = data[
+                    pointData.curveNumber
+                ].customdata[fullPoint.pointNumber];
+            }
+
+            // specific to histogram. see https://github.com/plotly/plotly.js/pull/2113/
+            if (has('pointNumbers', fullPoint)) {
+                pointData.pointNumbers = fullPoint.pointNumbers;
+            }
+
+            points[i] = pointData;
+
+        }
+        filteredEventData = {points}
+    } else if (event === 'relayout') {
+        /*
+         * relayout shouldn't include any big objects
+         * it will usually just contain the ranges of the axes like
+         * "xaxis.range[0]": 0.7715822247381828,
+         * "xaxis.range[1]": 3.0095292008680063`
+         */
+        filteredEventData = eventData;
+    }
+    if (has('range', eventData)) {
+        filteredEventData.range = eventData.range;
+    }
+    if (has('lassoPoints', eventData)) {
+        filteredEventData.lassoPoints = eventData.lassoPoints;
+    }
+    return {
+      out: filteredEventData,
+      isnil: isNil(filteredEventData)
+    };
+  }
+}

assets/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "assets",
+  "version": "1.0.0",
+  "description": "WebIO.jl support for plotly",
+  "main": "index.js",
+  "dependencies": {
+    "ramda": "^0.24.1"
+  },
+  "devDependencies": {
+    "clean-webpack-plugin": "^0.1.19",
+    "webpack": "^4.17.1",
+    "webpack-cli": "^3.1.0",
+    "webpack-merge": "^4.1.4"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack-dev-server --open --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js"
+  },
+  "keywords": [],
+  "author": "Spencer Lyon",
+  "license": "MIT"
+}

assets/webpack.common.js

@@ -0,0 +1,15 @@
+const path = require('path');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+
+module.exports = {
+  entry: {
+    app: './index.js'
+  },
+  plugins: [
+    new CleanWebpackPlugin(['dist'])
+  ],
+  output: {
+    filename: 'plotly_webio.bundle.js',
+    path: path.resolve(__dirname)
+  }
+};

assets/webpack.dev.js

@@ -0,0 +1,10 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    contentBase: './dist'
+  }
+});

assets/webpack.prod.js

@@ -0,0 +1,6 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'production',
+});

src/display.jl

@@ -88,7 +88,7 @@ function SyncPlot(
     # setup scope
     deps = [
         "Plotly" => joinpath(@__DIR__, "..", "assets", "plotly-latest.min.js"),
-        joinpath(@__DIR__, "..", "assets", "plotly_webio_bundle.js")
+        joinpath(@__DIR__, "..", "assets", "plotly_webio.bundle.js")
     ]
     scope = Scope(imports=deps)
     scope.dom = dom"div"(id=string("plot-", p.divid), events=events)