From af07d9493634e4bb12e78a054b40dbc599d15ba3 Mon Sep 17 00:00:00 2001
From: Mark Keller <7525285+keller-mark@users.noreply.github.com>
Date: Thu, 26 Dec 2019 22:34:59 -0500
Subject: [PATCH 1/5] Render to canvas and svg using two.js, then download to
 svg. Working ScatterPlot

---
 package.json                           |   3 +-
 src/components/PlotContainer.vue       | 184 +++++++++++++------------
 src/components/axes/Axis.vue           |  87 ++++++++----
 src/components/axes/DendrogramAxis.vue |   6 -
 src/components/axes/GenomeAxis.vue     |   8 --
 src/components/plots/ScatterPlot.vue   |  66 +++++----
 src/components/plots/mixin.js          |   6 -
 yarn.lock                              |   5 +
 8 files changed, 204 insertions(+), 161 deletions(-)

diff --git a/package.json b/package.json
index a95dc15..5c41509 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
     "d3-dispatch-nosplit": "^2.0.1",
     "lodash": "^4.17.11",
     "save-svg-as-png": "^1.4.6",
-    "simple-statistics": "^6.1.1"
+    "simple-statistics": "^6.1.1",
+    "two.js": "^0.7.0-beta.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.0-beta.6",
diff --git a/src/components/PlotContainer.vue b/src/components/PlotContainer.vue
index 68bb2e4..a16de51 100644
--- a/src/components/PlotContainer.vue
+++ b/src/components/PlotContainer.vue
@@ -1,6 +1,7 @@
 <script>
 import { getRetinaRatio } from './../helpers.js';
 import { DOWNLOAD_PATH } from './../icons.js';
+import { create as d3_create } from 'd3';
 
 
 /**
@@ -28,22 +29,29 @@ const addProp = function(slotArray, newProps) {
 }
 
 /**
- * Given a canvas context, x and y offsets, and an image URI, render the image to the context.
+ * Given an SVG DOM node, return the SVG contents as a data URI that can be saved to a file.
  * @private
- * @param {Context} ctx The canvas context.
- * @param {string} uri The image data URI.
- * @param {int} x The x offset.
- * @param {int} y The y offset.
+ * @param {any} svg The SVG node.
+ * @returns {string}
  */
-const renderToContext = function(ctx, uri, x, y, width, height) {
-    return new Promise((resolve, reject) => {
-        var img = new Image;
-        img.onload = () => {
-            ctx.drawImage(img, x, y, width, height);
-            resolve();
-        };
-        img.src = uri;
-    });
+const svgToUri = function(svg) {
+    // Reference: https://stackoverflow.com/a/23218877
+    const serializer = new XMLSerializer();
+    var source = serializer.serializeToString(svg);
+
+    // Add namespace.
+    if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
+        source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
+    }
+    if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
+        source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
+    }
+
+    // Add xml declaration.
+    source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
+
+    // Convert svg source to URI.
+    return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
 };
 
 
@@ -209,95 +217,95 @@ export default {
         }
     },
     methods: {
-        renderToContext(ctx, x, y, uri) {
-            var img = new Image;
-            img.onload = () => {
-                ctx.drawImage(img, x, y); // Or at whatever offset you like
-            };
-            img.src = uri;
-        },
         downloadViaButton() {
-            this.downloadWithoutAxisBrushing()
-            .then((uri) => {
-                const downloadAnchorNode = document.createElement('a');
-                downloadAnchorNode.setAttribute("href", uri);
-                downloadAnchorNode.setAttribute("download", this.downloadName + ".png");
-                document.body.appendChild(downloadAnchorNode); // required for firefox
-                downloadAnchorNode.click();
-                downloadAnchorNode.remove();
-            });
-        },
-        downloadWithoutAxisBrushing() {
-            let axisTopDisableBrushing = this.$slots.axisTop.forEach((vnode) => { vnode.componentInstance.preDownload(); });
-            let axisLeftDisableBrushing = this.$slots.axisLeft.forEach((vnode) => { vnode.componentInstance.preDownload(); });
-            let axisRightDisableBrushing = this.$slots.axisRight.forEach((vnode) => { vnode.componentInstance.preDownload(); });
-            let axisBottomDisableBrushing = this.$slots.axisBottom.forEach((vnode) => { vnode.componentInstance.preDownload(); });
-
-            return new Promise((resolve, reject) => {
-                Promise.all([axisTopDisableBrushing, axisLeftDisableBrushing, axisRightDisableBrushing, axisBottomDisableBrushing]).then(() => {
-                    this.download().then((uri) => {
-                        resolve(uri);
-                        this.$slots.axisTop.forEach((vnode) => { vnode.componentInstance.postDownload(); });
-                        this.$slots.axisLeft.forEach((vnode) => { vnode.componentInstance.postDownload(); });
-                        this.$slots.axisRight.forEach((vnode) => { vnode.componentInstance.postDownload(); });
-                        this.$slots.axisBottom.forEach((vnode) => { vnode.componentInstance.postDownload(); });
-                    });
-                });
-            });
+            const uri = this.download()
+            const downloadAnchorNode = document.createElement('a');
+            downloadAnchorNode.setAttribute("href", uri);
+            downloadAnchorNode.setAttribute("download", this.downloadName + ".svg");
+            document.body.appendChild(downloadAnchorNode); // required for firefox
+            downloadAnchorNode.click();
+            downloadAnchorNode.remove();
         },
         download() {
-            const canvas = document.createElement('canvas');
-            const ctx = canvas.getContext('2d');
+            const svg = d3_create("svg")
+                .attr("width", this.fullWidth)
+                .attr("height", this.fullHeight);
+            
+            const defs = svg
+                .append("defs");
             
-            const ratio = getRetinaRatio(ctx);
-            const scaledWidth = this.fullWidth * ratio;
-            const scaledHeight = this.fullHeight * ratio;
-
-            canvas.width = scaledWidth;
-            canvas.height = scaledHeight;
-            ctx.scale(ratio, ratio);
-
             const renderAxisToContext = (axisType) => {
                 if(this.$slots[axisType].length > 0) {
-                    return this.$slots[axisType][0].componentInstance.downloadAxis()
-                        .then((uri) => {
-                            const x = this.$slots[axisType][0].componentInstance.computedLeft;
-                            const y = this.$slots[axisType][0].componentInstance.computedTop;
-                            const width = this.$slots[axisType][0].componentInstance.computedWidth;
-                            const height = this.$slots[axisType][0].componentInstance.computedHeight;
-                            return renderToContext(ctx, uri, x, y, width, height);
-                        });
+                    const x = this.$slots[axisType][0].componentInstance.computedLeft;
+                    const y = this.$slots[axisType][0].componentInstance.computedTop;
+                    const width = this.$slots[axisType][0].componentInstance.computedWidth;
+                    const height = this.$slots[axisType][0].componentInstance.computedHeight;
+
+                    defs
+                        .append("clipPath")
+                            .attr("id", `cp-${axisType}`)
+                        .append("rect")
+                            .attr("width", width)
+                            .attr("height", height);
+
+                    const axisSvg = d3_create("svg")
+                        .attr("width", width)
+                        .attr("height", height);
+
+                    this.$slots[axisType][0].componentInstance.drawAxis(axisSvg, true);
+                    this.$slots[axisType][0].componentInstance.drawAxis();
+
+                    const axisG = svg
+                        .append("g")
+                            .attr("class", `download-g-${axisType}`)
+                            .attr("width", width)
+                            .attr("height", height)
+                            .attr("transform", `translate(${x},${y})`)
+                            .attr("clip-path", `url(#cp-${axisType})`);
+                    
+                    axisG.html(axisSvg.node().innerHTML);
                 }
-                return Promise.resolve();
             };
 
             const renderPlotToContext = () => {
                 if(this.$slots.plot.length > 0) {
-                    return this.$slots.plot[0].componentInstance.downloadPlot()
-                        .then((uri) => {
-                            const x = this.pMarginLeft;
-                            const y = this.pMarginTop;
-                            const width = this.pWidth;
-                            const height = this.pHeight;
-                            return renderToContext(ctx, uri, x, y, width, height);
-                        });
+                    const x = this.pMarginLeft;
+                    const y = this.pMarginTop;
+                    const width = this.pWidth;
+                    const height = this.pHeight;
+
+                    defs
+                        .append("clipPath")
+                            .attr("id", `cp-plot`)
+                        .append("rect")
+                            .attr("width", width)
+                            .attr("height", height);
+
+                    const plotSvg = d3_create("svg")
+                        .attr("width", width)
+                        .attr("height", height);
+                    
+                    this.$slots.plot[0].componentInstance.drawPlot(plotSvg);
+                    this.$slots.plot[0].componentInstance.drawPlot();
+
+                    const plotG = svg
+                        .append("g")
+                            .attr("class", `download-g-plot`)
+                            .attr("width", width)
+                            .attr("height", height)
+                            .attr("transform", `translate(${x},${y})`)
+                            .attr("clip-path", `url(#cp-plot)`);
+                    plotG.html(plotSvg.node().innerHTML);
                 }
-                return Promise.resolve();
             };
             
-            const renderPromises = [];
-            renderPromises.push(renderAxisToContext("axisTop"));
-            renderPromises.push(renderAxisToContext("axisLeft"));
-            renderPromises.push(renderPlotToContext());
-            renderPromises.push(renderAxisToContext("axisRight"));
-            renderPromises.push(renderAxisToContext("axisBottom"));
+            renderAxisToContext("axisTop");
+            renderAxisToContext("axisLeft");
+            renderPlotToContext();
+            renderAxisToContext("axisRight");
+            renderAxisToContext("axisBottom");
 
-            return new Promise((resolve, reject) => {
-                Promise.all(renderPromises).then(() => {
-                    const uri = canvas.toDataURL("image/png");
-                    resolve(uri);
-                });
-            });
+            return svgToUri(svg.node());
         }
     }
 }
diff --git a/src/components/axes/Axis.vue b/src/components/axes/Axis.vue
index 287f5fc..ba188c4 100644
--- a/src/components/axes/Axis.vue
+++ b/src/components/axes/Axis.vue
@@ -17,8 +17,6 @@ import { axisTop as d3_axisTop, axisLeft as d3_axisLeft, axisRight as d3_axisRig
 import { brushX as d3_brushX, brushY as d3_brushY } from 'd3-brush';
 import { event as d3_event } from 'd3';
 
-import { svgAsPngUri } from 'save-svg-as-png';
-
 import AbstractScale from './../../scales/AbstractScale.js';
 import HistoryEvent from './../../history/HistoryEvent.js';
 import HistoryStack from './../../history/HistoryStack.js';
@@ -235,13 +233,7 @@ export default {
         removeAxis() {
             d3_select(this.axisSelector).select("svg").remove();
         },
-        preDownload() {
-            this.drawAxis(true);
-        },
-        postDownload() {
-            this.drawAxis();
-        },
-        drawAxis(brushingOverride) {
+        drawAxis(d3Node, brushingOverride) {
             const vm = this;
             vm.removeAxis();
 
@@ -323,11 +315,16 @@ export default {
             /*
              * Create the SVG elements
              */
-
-            const container = d3_select(vm.axisSelector)
-                .append("svg")
-                    .attr("width", vm.computedWidth)
-                    .attr("height", vm.computedHeight);
+            
+            var container;
+            if(d3Node) {
+                container = d3Node;
+            } else {
+                container = d3_select(vm.axisSelector)
+                    .append("svg")
+                        .attr("width", vm.computedWidth)
+                        .attr("height", vm.computedHeight);
+            }
             
             const containerZoomedIn = container.append("g")
                     .attr("class", "axis-zoomed-in")
@@ -377,7 +374,12 @@ export default {
             }
 
             const tickTransformFunction = (d, i, v) => {
-                let tickBbox = v[i].getBBox();
+                let tickBbox;
+                try {
+                    tickBbox = v[i].getBBox();
+                } catch(e) {
+                    tickBbox = { height: 0 };
+                }
                 let tickRotateX = 0;
                 let tickRotateY = 0;
                 if(vm._side === SIDES.TOP) {
@@ -415,7 +417,15 @@ export default {
             
             
             // Get the width/height of the zoomed-in axis, before removing the text
-            const axisBboxZoomedIn = container.select(".axis-zoomed-in").node().getBBox();
+            let axisBboxZoomedIn;
+            try {
+                axisBboxZoomedIn = container.select(".axis-zoomed-in").node().getBBox();
+            } catch(e) {
+                axisBboxZoomedIn = {
+                    height: 0,
+                    width: 0,
+                };
+            }
             
             if(varScale instanceof CategoricalScale) {
                 if(vm._orientation === ORIENTATIONS.HORIZONTAL) {
@@ -467,14 +477,26 @@ export default {
                         .tickSizeOuter(tickSizeOuter)
                         .tickFormat(tickFormatFunction2)
                 );
-                const textBboxZoomedOut = ticksZoomedOut.select("text").node().getBBox();
+                let textBboxZoomedOut;
+                try {
+                    textBboxZoomedOut = ticksZoomedOut.select("text").node().getBBox();
+                } catch(e) {
+                    textBboxZoomedOut = { height: 0 };
+                }
 
                 ticksZoomedOut.selectAll("text")	
                         .style("text-anchor", tickTextAnchor)
                         .attr("transform", tickTransformFunction);
                 
                 // Get the width/height of the zoomed-out axis, before removing the text
-                axisBboxZoomedOut = container.select(".axis-zoomed-out").node().getBBox();
+                try {
+                    axisBboxZoomedOut = container.select(".axis-zoomed-out").node().getBBox();
+                } catch(e) {
+                    axisBboxZoomedOut = {
+                        height: 0,
+                        width: 0,
+                    };
+                }
                 
                 if(varScale instanceof CategoricalScale) {
                     const barWidth = vm.pWidth / varScaleDomain.length;
@@ -722,7 +744,25 @@ export default {
                 .style("font-family", "Avenir")
                 .text(varScale.name);
 
-            const labelTextBbox = labelText.node().getBBox();
+            let labelTextBbox;
+            try {
+                labelTextBbox = labelText.node().getBBox();
+                if(d3Node) {
+                    throw new Error("no bbox, use catch block");
+                }
+            } catch(e) {
+                if(vm._orientation === ORIENTATIONS.HORIZONTAL) {
+                    labelTextBbox = {
+                        height: vm.computedHeight / 2,
+                        width: 0
+                    };
+                } else if(vm._orientation === ORIENTATIONS.VERTICAL) {
+                    labelTextBbox = {
+                        height: vm.computedWidth / 2,
+                        width: 0
+                    };
+                }
+            }
 
             if(disableBrushing) {
                 axisBboxZoomedOut = { width: 0, height: 0 };
@@ -756,15 +796,6 @@ export default {
                 labelText.attr("fill-opacity", 0);
             }
             
-        },
-        downloadAxis() {
-            const node = d3_select(this.axisSelector).select("svg").node();
-            return new Promise((resolve, reject) => {
-                svgAsPngUri(node, {}, (uri) => {
-                    resolve(uri);
-                });
-            });
-            
         }
     }
 }
diff --git a/src/components/axes/DendrogramAxis.vue b/src/components/axes/DendrogramAxis.vue
index a30adcf..b9b3035 100644
--- a/src/components/axes/DendrogramAxis.vue
+++ b/src/components/axes/DendrogramAxis.vue
@@ -202,12 +202,6 @@ export default {
         removeAxis() {
             d3_select(this.axisSelector).select("svg").remove();
         },
-        preDownload() {
-            // noop
-        },
-        postDownload() {
-            // noop
-        },
         drawAxis() {
             const vm = this;
             vm.removeAxis();
diff --git a/src/components/axes/GenomeAxis.vue b/src/components/axes/GenomeAxis.vue
index 5660f6b..cec428e 100644
--- a/src/components/axes/GenomeAxis.vue
+++ b/src/components/axes/GenomeAxis.vue
@@ -343,14 +343,6 @@ export default {
         removeAxis() {
             d3_select(this.axisSelector).select("svg").selectAll("g").remove();
         },
-        preDownload() {
-            // noop
-            // TODO
-        },
-        postDownload() {
-            // noop
-            // TODO
-        },
         drawAxis() {
             const vm = this;
             vm.removeAxis();
diff --git a/src/components/plots/ScatterPlot.vue b/src/components/plots/ScatterPlot.vue
index 2367e71..5efeeaa 100644
--- a/src/components/plots/ScatterPlot.vue
+++ b/src/components/plots/ScatterPlot.vue
@@ -48,12 +48,13 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleLinear as d3_scaleLinear, scaleLog as d3_scaleLog } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
 import debounce from 'lodash/debounce';
 import { TOOLTIP_DEBOUNCE } from './../../constants.js';
-import { getRetinaRatio, getDelaunay } from './../../helpers.js';
+import { getDelaunay } from './../../helpers.js';
 
 import AbstractScale from './../../scales/AbstractScale.js';
 import DataContainer from './../../data/DataContainer.js';
@@ -258,7 +259,7 @@ export default {
             this.highlightX1 = null;
             this.highlightY1 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._xScale.isLoading || vm._yScale.isLoading || (vm.hasC && vm._cScale.isLoading)) {
@@ -300,48 +301,64 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
-
-            const ratio = getRetinaRatio(context);
-            const scaledWidth = vm.pWidth * ratio;
-            const scaledHeight = vm.pHeight * ratio;
+            var canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
+            const canvasNode = canvas.node();
 
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             /*
              * Draw the points
              */
+            const twoCircleArray = [];
             data.forEach((d) => {
+                const circle = two.makeCircle(x(d[vm.x]), y(d[vm.y]), vm.pointSize);
+
                 if(this.hasC) {
-                    context.fillStyle = cScale.color(d[vm.c]);
-                    context.strokeStyle = cScale.color(d[vm.c]);
+                    circle.fill = cScale.color(d[vm.c]);
+                    circle.stroke = cScale.color(d[vm.c]);
                 } else {
-                    context.fillStyle = vm.pointColor;
-                    context.strokeStyle = vm.pointColor;
-                }
-                context.beginPath();
-                context.arc(x(d[vm.x]), y(d[vm.y]), vm.pointSize, 0, 2*Math.PI);
-                context.stroke();
-                if(vm.fillPoints) {
-                    context.fill();
+                    circle.fill = vm.pointColor;
+                    circle.stroke = vm.pointColor;
                 }
+
+                twoCircleArray.push(circle);
             });
 
+            const twoCircleGroup = two.makeGroup(twoCircleArray);
+            twoCircleGroup.linewidth = 1;
+            twoCircleGroup.opacity = 1;
+
+            if(!vm.fillPoints) {
+                twoCircleGroup.noFill();
+            }
+
+            two.update();
+
+            if(!canvas) {
+                /* Ignore interactivity if no canvas. In this case an SVG was probably passed in */
+                return;
+            }
+
             /*
              * Prepare for interactivity
              */
+
             const points = data.map((d) => [x(d[vm.x]), y(d[vm.y])]);
             const delaunay = getDelaunay(points, true);
-            
+
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
 
             const getDataFromMouse = (mouseX, mouseY) => {
                 const i = delaunay.find(mouseX, mouseY);
@@ -380,6 +397,7 @@ export default {
                     }
                 });
             }
+
         }
     }
 }
diff --git a/src/components/plots/mixin.js b/src/components/plots/mixin.js
index cc37d87..17bec99 100644
--- a/src/components/plots/mixin.js
+++ b/src/components/plots/mixin.js
@@ -107,12 +107,6 @@ export default {
         },
         drawPlot: function() {
             // stub
-        },
-        downloadPlot: function() {
-            const uri = document.getElementById(this.plotElemID).toDataURL("image/png");
-            return new Promise((resolve, reject) => {
-                resolve(uri);
-            });
         }
     }
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index f96b531..a6840af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11371,6 +11371,11 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
   integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
 
+two.js@^0.7.0-beta.3:
+  version "0.7.0-beta.3"
+  resolved "https://registry.yarnpkg.com/two.js/-/two.js-0.7.0-beta.3.tgz#0edff0768fd6ed10611d01aef7d0d7bcc0c538ab"
+  integrity sha512-oPEmRGCo5c296Wn40+yTxYydwPTf1iwJY+EPdLoka5TxUkLkAUo10CkQxRZJ7VGmbShBxQRXQxS5i5/otwqGZg==
+
 type-check@~0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"

From be95135f1dbf4fa01c079b782525d995851adeea Mon Sep 17 00:00:00 2001
From: Mark Keller <7525285+keller-mark@users.noreply.github.com>
Date: Thu, 26 Dec 2019 23:54:29 -0500
Subject: [PATCH 2/5] More two.js adoption

---
 examples-src/App.vue                        |    2 +
 src/components/plots/ScatterPlot.vue        |    2 +-
 src/components/plots/StackedBarPlot.vue     |   50 +-
 src/components/plots/StratifiedSinaPlot.vue |   69 +-
 yarn.lock                                   | 1100 ++++++++++++-------
 5 files changed, 762 insertions(+), 461 deletions(-)

diff --git a/examples-src/App.vue b/examples-src/App.vue
index b416df1..fe0ee87 100755
--- a/examples-src/App.vue
+++ b/examples-src/App.vue
@@ -79,6 +79,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="150"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -705,6 +706,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="180"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
diff --git a/src/components/plots/ScatterPlot.vue b/src/components/plots/ScatterPlot.vue
index 5efeeaa..1b09a13 100644
--- a/src/components/plots/ScatterPlot.vue
+++ b/src/components/plots/ScatterPlot.vue
@@ -301,7 +301,7 @@ export default {
             /*
              * Scale up the canvas
              */
-            var canvas;
+            let canvas;
             if(d3Node) {
                 canvas = d3Node;
             } else {
diff --git a/src/components/plots/StackedBarPlot.vue b/src/components/plots/StackedBarPlot.vue
index d9bec6a..110c792 100644
--- a/src/components/plots/StackedBarPlot.vue
+++ b/src/components/plots/StackedBarPlot.vue
@@ -58,6 +58,7 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleBand as d3_scaleBand, scaleLinear as d3_scaleLinear } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { stack as d3_stack, stackOrderNone as d3_stackOrderNone, stackOffsetNone as d3_stackOffsetNone } from 'd3-shape';
@@ -221,7 +222,7 @@ export default {
             this.highlightX1 = null;
             this.highlightX2 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._xScale.isLoading || vm._yScale.isLoading || vm._cScale.isLoading) {
@@ -277,21 +278,29 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
+
+            const canvasNode = canvas.node();
+
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             const canvasHidden = d3_select(this.hiddenPlotSelector);
             const contextHidden = canvasHidden.node().getContext('2d');
 
-            const ratio = getRetinaRatio(context);
+            const ratio = getRetinaRatio(contextHidden);
             const scaledWidth = vm.pWidth * ratio;
             const scaledHeight = vm.pHeight * ratio;
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
-
             canvasHidden
                 .attr("width", scaledWidth)
                 .attr("height", scaledHeight);
@@ -329,8 +338,9 @@ export default {
                 barMarginX = 0;
             }
 
+            const twoRectArray = [];
+
             series.forEach((layer) => {
-                context.fillStyle = cScale.color(layer["key"]); 
                 layer.forEach((d) => {
                     const col = genColor();
                     colToNode[col] = { "x": d.data[vm.x], "y": d.data[layer["key"]], "c": layer["key"] };
@@ -339,15 +349,31 @@ export default {
                     if(height + y(d[1]) > vm.pHeight) {
                         height = vm.pHeight - y(d[1]);
                     }
-                    context.fillRect(x(d.data[vm.x]) + (barMarginX/2), y(d[1]), barWidth - barMarginX, height);
+
+                    const rect = two.makeRectangle(x(d.data[vm.x]) + (barMarginX/2) + ((barWidth - barMarginX)/2), y(d[1]) + (height/2), barWidth - barMarginX, height);
+                    //console.log(x(d.data[vm.x]) + (barMarginX/2), y(d[1]), barWidth - barMarginX, height);
+                    rect.fill = cScale.color(layer["key"]);
+                    twoRectArray.push(rect);
+
                     contextHidden.fillRect(x(d.data[vm.x]), y(d[1]), barWidth, height);
                 })
             });
+
+            const twoRectGroup = two.makeGroup(twoRectArray);
+            twoRectGroup.linewidth = 0;
+            twoRectGroup.opacity = 1;
+            twoRectGroup.noStroke();
+
+            two.update();
+
+            if(!canvas) {
+                /* Ignore interactivity if no canvas. In this case an SVG was probably passed in */
+                return;
+            }
             
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
 
             const getDataFromMouse = (mouseX, mouseY) => {
                 // Get the corresponding pixel color on the hidden canvas
diff --git a/src/components/plots/StratifiedSinaPlot.vue b/src/components/plots/StratifiedSinaPlot.vue
index bd35100..13bf2cf 100644
--- a/src/components/plots/StratifiedSinaPlot.vue
+++ b/src/components/plots/StratifiedSinaPlot.vue
@@ -89,6 +89,7 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleLinear as d3_scaleLinear, scaleQuantile as d3_scaleQuantile, scaleBand as d3_scaleBand } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
@@ -96,7 +97,7 @@ import debounce from 'lodash/debounce';
 import { min as d3_min, max as d3_max, mean as d3_mean, histogram as d3_histogram } from 'd3-array';
 
 import { TOOLTIP_DEBOUNCE } from './../../constants.js';
-import { getRetinaRatio, seededRandom, getDelaunay } from './../../helpers.js';
+import { seededRandom, getDelaunay } from './../../helpers.js';
 
 
 import AbstractScale from './../../scales/AbstractScale.js';
@@ -317,7 +318,7 @@ export default {
             this.highlightX2 = null;
             this.highlightY1 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._stratificationDataContainer.isLoading || vm._xScale.isLoading || vm._yScale.isLoading || vm._oScale.isLoading) {
@@ -352,17 +353,20 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
 
-            const ratio = getRetinaRatio(context);
-            const scaledWidth = vm.pWidth * ratio;
-            const scaledHeight = vm.pHeight * ratio;
+            const canvasNode = canvas.node();
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             /*
              * Get the random number generator.
@@ -379,18 +383,12 @@ export default {
              * Draw the boxes
              */
 
+            const twoCircleArray = [];
+
             const boxWidth = (barWidth / 2);
             const boxMargin = barWidth / 4;
 
-            if(vm.strokeColor !== undefined) {
-                context.strokeStyle = vm.strokeColor;
-            }
             xScale.domainFiltered.forEach((boxVar) => {
-                if(vm.strokeColor === undefined) {
-                    context.strokeStyle = xScale.color(boxVar);
-                }
-                context.fillStyle = xScale.color(boxVar);
-
                 let boxData = data.filter((dEl) => {
                     let sEl = stratificationData.find((sEl) => sEl[vm.o] === dEl[vm.o]);
                     return (sEl !== undefined && sEl[vm.x] === boxVar);
@@ -433,14 +431,14 @@ export default {
 
                 bins.forEach((binData) => {
                     binData.forEach((d) => {
-                        context.beginPath();
-                        let xVal = innerX(-binData.length)+random()*2*(innerX(binData.length)-innerXZero);
-                        let yVal = y(d[vm.variable]);
-                        context.arc(xVal, yVal, vm.pointSize, 0, 2*Math.PI);
-                        context.stroke();
-                        if(vm.fillPoints) {
-                            context.fill(); 
-                        }
+                        const xVal = innerX(-binData.length)+random()*2*(innerX(binData.length)-innerXZero);
+                        const yVal = y(d[vm.variable]);
+                        
+                        const circle = two.makeCircle(xVal, yVal, vm.pointSize);
+                        circle.stroke = (vm.strokeColor ? vm.strokeColor : xScale.color(boxVar));
+                        circle.fill = xScale.color(boxVar);
+
+                        twoCircleArray.push(circle);
 
                         points.push([xVal, yVal]); // For Delaunay
                         pointsData.push({
@@ -451,14 +449,27 @@ export default {
                     });
                 });
             });
+
+            const twoCircleGroup = two.makeGroup(twoCircleArray);
+            twoCircleGroup.linewidth = 1;
+            twoCircleGroup.opacity = 1;
+
+            if(!vm.fillPoints) {
+                twoCircleGroup.noFill();
+            }
+
+            two.update();
+
+            if(!canvas) {
+                /* Ignore interactivity if no canvas. In this case an SVG was probably passed in */
+                return;
+            }
             
             const delaunay = getDelaunay(points, false);
 
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 const i = delaunay.find(mouseX, mouseY);
                 return pointsData[i];
diff --git a/yarn.lock b/yarn.lock
index a6840af..036b22d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1495,19 +1495,19 @@
     to-fast-properties "^2.0.0"
 
 "@hapi/address@2.x.x":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.2.tgz#1c794cd6dbf2354d1eb1ef10e0303f573e1c7222"
-  integrity sha512-O4QDrx+JoGKZc6aN64L04vqa7e41tIiLU+OvKdcYaEMP97UttL0f9GIi9/0A4WAMx0uBd6SidDIhktZhgOcN8Q==
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
+  integrity sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==
 
 "@hapi/bourne@1.x.x":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-1.3.2.tgz#0a7095adea067243ce3283e1b56b8a8f453b242a"
   integrity sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA==
 
-"@hapi/hoek@8.x.x":
-  version "8.2.4"
-  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.2.4.tgz#684a14f4ca35d46f44abc87dfc696e5e4fe8a020"
-  integrity sha512-Ze5SDNt325yZvNO7s5C4fXDscjJ6dcqLFXJQ/M7dZRQCewuDj2iDUuBi6jLQt+APbW9RjjVEvLr35FXuOEqjow==
+"@hapi/hoek@8.x.x", "@hapi/hoek@^8.3.0":
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.0.tgz#2f9ce301c8898e1c3248b0a8564696b24d1a9a5a"
+  integrity sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw==
 
 "@hapi/joi@^15.0.1":
   version "15.1.1"
@@ -1520,11 +1520,11 @@
     "@hapi/topo" "3.x.x"
 
 "@hapi/topo@3.x.x":
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-3.1.4.tgz#42e2fe36f593d90ad258a08b582be128c141c45d"
-  integrity sha512-aVWQTOI9wBD6zawmOr6f+tdEIxQC8JXfQVLTjgGe8YEStAWGn/GNNVTobKJhbWKveQj2RyYF3oYbO9SC8/eOCA==
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-3.1.6.tgz#68d935fa3eae7fdd5ab0d7f953f3205d8b2bfc29"
+  integrity sha512-tAag0jEcjwH+P2quUfipd7liWCNX2F8NvYjQp2wtInsZxnMlypdw0FtAOLxtvvkO+GSRRbmNi8m/5y42PQJYCQ==
   dependencies:
-    "@hapi/hoek" "8.x.x"
+    "@hapi/hoek" "^8.3.0"
 
 "@intervolga/optimize-cssnano-plugin@^1.0.5":
   version "1.0.6"
@@ -1557,6 +1557,11 @@
     error-stack-parser "^2.0.0"
     string-width "^2.0.0"
 
+"@types/color-name@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
+  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -1577,9 +1582,9 @@
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
 "@types/node@*":
-  version "12.7.5"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.7.5.tgz#e19436e7f8e9b4601005d73673b6dc4784ffcc2f"
-  integrity sha512-9fq4jZVhPNW8r+UYKnxF1e2HkDWOWKM5bC2/7c9wPV835I0aOrVbS/Hw/pWPk2uKrNXQqg9Z959Kz+IYDd5p3w==
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.1.1.tgz#6d11a8c2d58405b3db9388ab740106cbfa64c3c9"
+  integrity sha512-hx6zWtudh3Arsbl3cXay+JnkvVgCKzCWKv42C9J01N2T2np4h8w5X8u6Tpz5mj38kE3M9FM0Pazx8vKFFMnjLQ==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
@@ -1621,10 +1626,10 @@
     babel-plugin-dynamic-import-node "^2.0.0"
     babel-plugin-transform-vue-jsx "^4.0.1"
 
-"@vue/cli-overlay@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-3.11.0.tgz#88d49060095c9c5168ac6014d4c4eb66e7dd4874"
-  integrity sha512-yYZP27vjioWmohwXQ9mTPHHxktfAaTM6RDehyG83yvY07wcdxhwrNNCMm8eE9My/K2F8oAPf8uoDZZmkr/EXBw==
+"@vue/cli-overlay@^3.12.1":
+  version "3.12.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-3.12.1.tgz#bdfde8f7123561ab06e4e4c60b854cc5092f5ab1"
+  integrity sha512-Bym92EN+lj+cNRN2ozbYyH+V8DMXWGbCDUk+hiJ4EYDBZfBkZKvalk1/mOBFwyxiopnnbOEBAAhL/UuMQ1xARg==
 
 "@vue/cli-plugin-babel@^3.0.0-beta.6":
   version "3.0.4"
@@ -1664,14 +1669,14 @@
     vue-jest "^3.0.4"
 
 "@vue/cli-service@^3.0.0-beta.6":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-3.11.0.tgz#356526e9100a7a0a258e3c4a13ff421de29eadde"
-  integrity sha512-HSU4wHlYKQt8O968JUz/AeYvFSokxJjMkr7dgVNVb6rpBn859Emkr960plWGr1z1hc3qNOwLuSUGk5OSfq1inA==
+  version "3.12.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-3.12.1.tgz#13220b1c189254e7c003390df329086f9b6e77e6"
+  integrity sha512-PDxNrTGnSKzeV1ruFlsRIAO8JcPizwT0EJXq9GeyooU+p+sOkv7aKkCBJQVYNjZapD1NOGWx6CvAAC/wAW+gew==
   dependencies:
     "@intervolga/optimize-cssnano-plugin" "^1.0.5"
     "@soda/friendly-errors-webpack-plugin" "^1.7.1"
-    "@vue/cli-overlay" "^3.11.0"
-    "@vue/cli-shared-utils" "^3.11.0"
+    "@vue/cli-overlay" "^3.12.1"
+    "@vue/cli-shared-utils" "^3.12.1"
     "@vue/component-compiler-utils" "^3.0.0"
     "@vue/preload-webpack-plugin" "^1.1.0"
     "@vue/web-component-wrapper" "^1.2.0"
@@ -1704,7 +1709,7 @@
     lodash.defaultsdeep "^4.6.1"
     lodash.mapvalues "^4.6.0"
     lodash.transform "^4.6.0"
-    mini-css-extract-plugin "^0.6.0"
+    mini-css-extract-plugin "^0.8.0"
     minimist "^1.2.0"
     ora "^3.4.0"
     portfinder "^1.0.20"
@@ -1725,10 +1730,10 @@
     webpack-dev-server "^3.4.1"
     webpack-merge "^4.2.1"
 
-"@vue/cli-shared-utils@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-3.11.0.tgz#a3d6f809b0dfb367e626b71405f85dea0631310b"
-  integrity sha512-D7pst/4v9H1DD66fLxlZOwRR09R03MV0ROdKxBHmh3FmnApCA/RiaolFA/8w+B3CnevYMlV3SJ5fOAgedbswbA==
+"@vue/cli-shared-utils@^3.11.0", "@vue/cli-shared-utils@^3.12.1":
+  version "3.12.1"
+  resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-3.12.1.tgz#bcf076287ddadeebbb97c6a748dfe9ff50ec8df0"
+  integrity sha512-jFblzRFjutGwu5utOKdVlPlsbA1lBUNNQlAThzNqej+JtTKJjnvjlhjKX0Gq0oOny5FjKWhoyfQ74p9h1qE6JQ==
   dependencies:
     "@hapi/joi" "^15.0.1"
     chalk "^2.4.1"
@@ -1743,10 +1748,10 @@
     semver "^6.0.0"
     string.prototype.padstart "^3.0.0"
 
-"@vue/component-compiler-utils@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.0.0.tgz#d16fa26b836c06df5baaeb45f3d80afc47e35634"
-  integrity sha512-am+04/0UX7ektcmvhYmrf84BDVAD8afFOf4asZjN84q8xzxFclbk5x0MtxuKGfp+zjN5WWPJn3fjFAWtDdIGSw==
+"@vue/component-compiler-utils@^3.0.0", "@vue/component-compiler-utils@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.1.0.tgz#64cd394925f5af1f9c3228c66e954536f5311857"
+  integrity sha512-OJ7swvl8LtKtX5aYP8jHhO6fQBIRIGkU6rvWzK+CGJiNOnvg16nzcBkd9qMZzW8trI2AsqAKx263nv7kb5rhZw==
   dependencies:
     consolidate "^0.15.1"
     hash-sum "^1.0.2"
@@ -1754,7 +1759,7 @@
     merge-source-map "^1.1.0"
     postcss "^7.0.14"
     postcss-selector-parser "^5.0.0"
-    prettier "1.16.3"
+    prettier "^1.18.2"
     source-map "~0.6.1"
     vue-template-es2015-compiler "^1.9.0"
 
@@ -1985,11 +1990,16 @@ acorn@^5.2.1, acorn@^5.5.0, acorn@^5.5.3:
   version "5.7.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
 
-acorn@^6.0.1, acorn@^6.0.7, acorn@^6.1.1, acorn@^6.2.1:
+acorn@^6.0.1:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.3.0.tgz#0087509119ffa4fc0a0041d1e93a417e68cb856e"
   integrity sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==
 
+acorn@^6.0.7, acorn@^6.1.1, acorn@^6.2.1:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.0.tgz#b659d2ffbafa24baf5db1cdbb2c94a983ecd2784"
+  integrity sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==
+
 address@^1.0.3:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
@@ -2069,6 +2079,11 @@ ansi-regex@^4.1.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
   integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
 
+ansi-regex@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
+  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
+
 ansi-styles@^2.0.1, ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -2081,6 +2096,14 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.0.tgz#5681f0dcf7ae5880a7841d8831c4724ed9cc0172"
+  integrity sha512-7kFQgnEaMdRtwf6uSfUnVr9gSGC7faurn+J/Mv90/W+iTtN0405/nLdopfMWwchyxhbGYl6TC4Sccn9TUkGAgg==
+  dependencies:
+    "@types/color-name" "^1.1.1"
+    color-convert "^2.0.1"
+
 any-promise@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
@@ -2256,12 +2279,7 @@ async-limiter@~1.0.0:
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
-async@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
-  integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
-
-async@^2.1.4:
+async@^2.1.4, async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
   integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
@@ -2279,17 +2297,17 @@ atob@^2.1.1:
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
 autoprefixer@^9.5.1:
-  version "9.6.1"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.6.1.tgz#51967a02d2d2300bb01866c1611ec8348d355a47"
-  integrity sha512-aVo5WxR3VyvyJxcJC3h4FKfwCQvQWb1tSI5VHNibddCVWrcD1NvlxEweg3TSgiPztMnWfjpy2FURKA2kvDE+Tw==
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.3.tgz#fd42ed03f53de9beb4ca0d61fb4f7268a9bb50b4"
+  integrity sha512-8T5Y1C5Iyj6PgkPSFd0ODvK9DIleuPKUPYniNxybS47g2k2wFgLZ46lGQHlBuGKIAEV8fbCDfKCCRS1tvOgc3Q==
   dependencies:
-    browserslist "^4.6.3"
-    caniuse-lite "^1.0.30000980"
+    browserslist "^4.8.0"
+    caniuse-lite "^1.0.30001012"
     chalk "^2.4.2"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^7.0.17"
-    postcss-value-parser "^4.0.0"
+    postcss "^7.0.23"
+    postcss-value-parser "^4.0.2"
 
 aws-sign2@~0.7.0:
   version "0.7.0"
@@ -2297,9 +2315,9 @@ aws-sign2@~0.7.0:
   integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
 
 aws4@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
-  integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.0.tgz#24390e6ad61386b0a747265754d2a17219de862c"
+  integrity sha512-Uvq6hVe90D0B2WEnUqtdgY1bATGz3mw33nH9Y+dmA+w5DHvUmBgkr5rM/KCHpCsiFNRUfokW/szpPPgMK2hm4A==
 
 babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
@@ -2605,6 +2623,13 @@ binary-extensions@^1.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
   integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
 
+bindings@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
+  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
+  dependencies:
+    file-uri-to-path "1.0.0"
+
 block-stream@*:
   version "0.0.9"
   resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
@@ -2613,9 +2638,9 @@ block-stream@*:
     inherits "~2.0.0"
 
 bluebird@^3.1.1, bluebird@^3.5.1, bluebird@^3.5.5:
-  version "3.5.5"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.5.tgz#a8d0afd73251effbbd5fe384a77d73003c17a71f"
-  integrity sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   version "4.11.8"
@@ -2781,7 +2806,16 @@ browserslist@^3.0.0:
     caniuse-lite "^1.0.30000844"
     electron-to-chromium "^1.3.47"
 
-browserslist@^4.0.0, browserslist@^4.5.4, browserslist@^4.6.0, browserslist@^4.6.3, browserslist@^4.6.6:
+browserslist@^4.0.0, browserslist@^4.5.4, browserslist@^4.8.0:
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.2.tgz#b45720ad5fbc8713b7253c20766f701c9a694289"
+  integrity sha512-+M4oeaTplPm/f1pXDw84YohEv7B1i/2Aisei8s4s6k3QsoSHa7i5sz8u/cGQkkatCPxMASKxPualR4wwYgVboA==
+  dependencies:
+    caniuse-lite "^1.0.30001015"
+    electron-to-chromium "^1.3.322"
+    node-releases "^1.1.42"
+
+browserslist@^4.6.0, browserslist@^4.6.6:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.7.0.tgz#9ee89225ffc07db03409f2fee524dc8227458a17"
   integrity sha512-9rGNDtnj+HaahxiVV38Gn8n8Lr8REKsel68v1sPFfIGEK6uSXTY3h9acgiT1dZVtOOUtifo/Dn8daDQ5dUgVsA==
@@ -2823,9 +2857,9 @@ buffer-xor@^1.0.3:
   integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
 
 buffer@^4.3.0:
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
-  integrity sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
+  integrity sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==
   dependencies:
     base64-js "^1.0.2"
     ieee754 "^1.1.4"
@@ -3004,7 +3038,12 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000980, caniuse-lite@^1.0.30000989:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001012, caniuse-lite@^1.0.30001015:
+  version "1.0.30001016"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001016.tgz#16ea48d7d6e8caf3cad3295c2d746fe38c4e7f66"
+  integrity sha512-yYQ2QfotceRiH4U+h1Us86WJXtVHDmy3nEKIdYPsZCYnOV5/tMgGbmoIlrMzmh2VXlproqYtVaKeGDBkMZifFA==
+
+caniuse-lite@^1.0.30000844:
   version "1.0.30000989"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000989.tgz#b9193e293ccf7e4426c5245134b8f2a56c0ac4b9"
   integrity sha512-vrMcvSuMz16YY6GSVZ0dWDTJP8jqk3iFQ/Aq5iqblPwxSVVZI+zxDyTX0VPqtQsDnfdrBDcsmhgTEOh5R8Lbpw==
@@ -3051,6 +3090,14 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 character-entities-html4@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-1.1.3.tgz#5ce6e01618e47048ac22f34f7f39db5c6fd679ef"
@@ -3101,9 +3148,9 @@ chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.1.8:
     fsevents "^1.2.7"
 
 chownr@^1.0.1, chownr@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.2.tgz#a18f1e0b269c8a6a5d3c86eb298beb14c3dd7bf6"
-  integrity sha512-GkfeAQh+QNy3wquu9oIZr6SS5x7wGdSgNQvD10X3r+AZr1Oys22HW8kAmDMvNg2+Dm0TeGaEuO8gFwdBXxwO8A==
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
+  integrity sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==
 
 chrome-trace-event@^1.0.2:
   version "1.0.2"
@@ -3155,15 +3202,16 @@ cli-cursor@^2.1.0:
     restore-cursor "^2.0.0"
 
 cli-highlight@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/cli-highlight/-/cli-highlight-2.1.1.tgz#2180223d51618b112f4509cf96e4a6c750b07e97"
-  integrity sha512-0y0VlNmdD99GXZHYnvrQcmHxP8Bi6T00qucGgBgGv4kJ0RyDthNnnFPupHV7PYv/OXSVk+azFbOeaW6+vGmx9A==
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/cli-highlight/-/cli-highlight-2.1.4.tgz#098cb642cf17f42adc1c1145e07f960ec4d7522b"
+  integrity sha512-s7Zofobm20qriqDoU9sXptQx0t2R9PEgac92mENNm7xaEe1hn71IIMsXMK+6encA6WRCWWxIGQbipr3q998tlQ==
   dependencies:
-    chalk "^2.3.0"
+    chalk "^3.0.0"
     highlight.js "^9.6.0"
     mz "^2.4.0"
-    parse5 "^4.0.0"
-    yargs "^13.0.0"
+    parse5 "^5.1.1"
+    parse5-htmlparser2-tree-adapter "^5.1.1"
+    yargs "^15.0.0"
 
 cli-spinners@^2.0.0:
   version "2.2.0"
@@ -3210,6 +3258,15 @@ cliui@^5.0.0:
     strip-ansi "^5.2.0"
     wrap-ansi "^5.1.0"
 
+cliui@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
+  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^6.2.0"
+
 clone-buffer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
@@ -3286,12 +3343,19 @@ color-convert@^1.9.0, color-convert@^1.9.1:
   dependencies:
     color-name "1.1.3"
 
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
 color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -3340,7 +3404,12 @@ commander@2.17.x:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
 
-commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@~2.20.0:
+commander@^2.18.0, commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
+commander@^2.19.0, commander@~2.20.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
   integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
@@ -3427,11 +3496,9 @@ connect-history-api-fallback@^1.6.0:
   integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
 
 console-browserify@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
-  integrity sha1-8CQcRXMKn8YyOyBtvzjtx0HQuxA=
-  dependencies:
-    date-now "^0.1.4"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
+  integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
 
 console-control-strings@^1.0.0, console-control-strings@~1.1.0:
   version "1.1.0"
@@ -3606,7 +3673,7 @@ cross-spawn@^5.0.1, cross-spawn@^5.1.0:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^6.0.0, cross-spawn@^6.0.5:
+cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
   integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
@@ -3617,6 +3684,15 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+cross-spawn@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
+  integrity sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 crypto-browserify@^3.11.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
@@ -3681,12 +3757,12 @@ css-select@^1.1.0:
     nth-check "~1.0.1"
 
 css-select@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.0.2.tgz#ab4386cec9e1f668855564b17c3733b43b2a5ede"
-  integrity sha512-dSpYaDVoWaELjvZ3mS6IKZM/y2PMPa/XYoEfYNZePL4U/XgyxZNroHEHReDx/d+VgXh9VbCTtFqLkFbmeqeaRQ==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
+  integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
   dependencies:
     boolbase "^1.0.0"
-    css-what "^2.1.2"
+    css-what "^3.2.1"
     domutils "^1.7.0"
     nth-check "^1.0.2"
 
@@ -3699,32 +3775,29 @@ css-selector-tokenizer@^0.7.0:
     fastparse "^1.1.1"
     regexpu-core "^1.0.0"
 
-css-tree@1.0.0-alpha.29:
-  version "1.0.0-alpha.29"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.29.tgz#3fa9d4ef3142cbd1c301e7664c1f352bd82f5a39"
-  integrity sha512-sRNb1XydwkW9IOci6iB2xmy8IGCj6r/fr+JWitvJ2JxQRPzN3T4AGGVWCMlVmVwM1gtgALJRmGIlWv5ppnGGkg==
-  dependencies:
-    mdn-data "~1.1.0"
-    source-map "^0.5.3"
-
-css-tree@1.0.0-alpha.33:
-  version "1.0.0-alpha.33"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.33.tgz#970e20e5a91f7a378ddd0fc58d0b6c8d4f3be93e"
-  integrity sha512-SPt57bh5nQnpsTBsx/IXbO14sRc9xXu5MtMAVuo0BaQQmyf0NupNPPSoMaqiAF5tDFafYsTkfeH4Q/HCKXkg4w==
+css-tree@1.0.0-alpha.37:
+  version "1.0.0-alpha.37"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
+  integrity sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
   dependencies:
     mdn-data "2.0.4"
-    source-map "^0.5.3"
+    source-map "^0.6.1"
 
 css-unit-converter@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
   integrity sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=
 
-css-what@2.1, css-what@^2.1.2:
+css-what@2.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
   integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
 
+css-what@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.2.1.tgz#f4a8f12421064621b456755e34a03a2c22df5da1"
+  integrity sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==
+
 css@^2.1.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
@@ -3813,12 +3886,12 @@ cssnano@^4.0.0, cssnano@^4.1.10:
     is-resolvable "^1.0.0"
     postcss "^7.0.0"
 
-csso@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-3.5.1.tgz#7b9eb8be61628973c1b261e169d2f024008e758b"
-  integrity sha512-vrqULLffYU1Q2tLdJvaCYbONStnfkfimRxXNaGjxMldI0C7JPBC4rB1RyjhfdZ4m1frm8pM9uRPKH3d2knZ8gg==
+csso@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.0.2.tgz#e5f81ab3a56b8eefb7f0092ce7279329f454de3d"
+  integrity sha512-kS7/oeNVXkHWxby5tHVxlhjizRCSv8QdU7hB2FpdAibDU8FjTAolhNjKNTiLzXtUrKT6HwClE81yXwEk1309wg==
   dependencies:
-    css-tree "1.0.0-alpha.29"
+    css-tree "1.0.0-alpha.37"
 
 cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
   version "0.3.8"
@@ -4092,11 +4165,6 @@ data-urls@^1.0.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
-date-now@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
-  integrity sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=
-
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -4109,7 +4177,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@^3.0.0, debug@^3.1.0, debug@^3.2.5, debug@^3.2.6:
+debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -4134,9 +4202,9 @@ decode-uri-component@^0.2.0:
   integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
 deep-equal@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.0.tgz#3103cdf8ab6d32cf4a8df7865458f2b8d33f3745"
-  integrity sha512-ZbfWJq/wN1Z273o7mUSjILYqehAktR2NVoSrOukDkU9kg2v/Uv89yU4Cvz8seJeAmtN5oqiefKq8FPuXOboqLw==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
+  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
   dependencies:
     is-arguments "^1.0.4"
     is-date-object "^1.0.1"
@@ -4169,11 +4237,11 @@ default-gateway@^4.2.0:
     ip-regex "^2.1.0"
 
 default-gateway@^5.0.2:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-5.0.3.tgz#18434c9430a18035a2861f7839bf7669b3436e6f"
-  integrity sha512-zW+ld9xtN0+q48wIwhitUzhfERJN7BPgvijPhuCKG6bfWqnoqtSNSnrXfvAME2ZJLpgYpz6UorpBddGfLzrJBw==
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-5.0.5.tgz#4fd6bd5d2855d39b34cc5a59505486e9aafc9b10"
+  integrity sha512-z2RnruVmj8hVMmAnEJMTIJNijhKCDiGjbLP+BHJFOT7ld3Bo5qcIBpVYDniqhbMIIf+jZDlkP2MkPXiQy/DBLA==
   dependencies:
-    execa "^2.0.3"
+    execa "^3.3.0"
 
 default-require-extensions@^1.0.0:
   version "1.0.0"
@@ -4256,9 +4324,9 @@ depd@~1.1.2:
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
 des.js@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
-  integrity sha1-wHTS4qpqipoH29YfmhXCzYPsjsw=
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
+  integrity sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==
   dependencies:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
@@ -4451,9 +4519,9 @@ dom-converter@^0.2:
     utila "~0.4"
 
 dom-serializer@0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.1.tgz#13650c850daffea35d8b626a4cfc4d3a17643fdb"
-  integrity sha512-sK3ujri04WyjwQXVoK4PU3y8ula1stq10GJZpqHIUgoGZdsGzAGu65BnU3d08aTVSvO7mGPZUc0wTEDL+qGE0Q==
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
+  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
   dependencies:
     domelementtype "^2.0.1"
     entities "^2.0.0"
@@ -4575,19 +4643,24 @@ ee-first@1.1.1:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 ejs@^2.6.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.1.tgz#5b5ab57f718b79d4aca9254457afecd36fa80228"
-  integrity sha512-kS/gEPzZs3Y1rRsbGX4UOSjtP/CeJP0CxSNZHYxGfVM/VgLcv0ZqM7C45YyTj2DI2g7+P9Dd24C+IMIg6D0nYQ==
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
+  integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
-electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.47:
+electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.322:
+  version "1.3.322"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.322.tgz#a6f7e1c79025c2b05838e8e344f6e89eb83213a8"
+  integrity sha512-Tc8JQEfGQ1MzfSzI/bTlSr7btJv/FFO7Yh6tanqVmIWOuNCu6/D1MilIEgLtmWqIrsv+o4IjpLAhgMBr/ncNAA==
+
+electron-to-chromium@^1.3.47:
   version "1.3.263"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.263.tgz#089957556c0a3e2a3726217449796914e5fe9609"
   integrity sha512-VfPi+sE/1nEKOV7DWDqWSUGP7ztJG5FeqHbMEj6dBb/arKnxpOCnRXOSC6HBV6qTfK5v8CX7xWCqzN36UqG1oA==
 
 elliptic@^6.0.0:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.1.tgz#c380f5f909bf1b9b4428d028cd18d3b0efd6b52b"
-  integrity sha512-xvJINNLbTeWQjrl6X+7eQCrIy/YPv5XCpKW6kB5mKvtnGILoLDcySuwomfdzt0BMdLNVnuRNTuzKNHj0bva1Cg==
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.2.tgz#05c5678d7173c049d8ca433552224a495d0e3762"
+  integrity sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==
   dependencies:
     bn.js "^4.4.0"
     brorand "^1.0.1"
@@ -4607,6 +4680,11 @@ emoji-regex@^7.0.1:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
   integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
 
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -4618,19 +4696,19 @@ encodeurl@~1.0.2:
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
-  integrity sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
   dependencies:
     once "^1.4.0"
 
 enhanced-resolve@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f"
-  integrity sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz#2937e2b8066cd0fe7ce0990a98f0d71a35189f66"
+  integrity sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==
   dependencies:
     graceful-fs "^4.1.2"
-    memory-fs "^0.4.0"
+    memory-fs "^0.5.0"
     tapable "^1.0.0"
 
 entities@^1.1.1:
@@ -4671,26 +4749,27 @@ error@^7.0.0:
   dependencies:
     string-template "~0.2.1"
 
-es-abstract@^1.12.0, es-abstract@^1.4.3, es-abstract@^1.5.1:
-  version "1.14.2"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.14.2.tgz#7ce108fad83068c8783c3cdf62e504e084d8c497"
-  integrity sha512-DgoQmbpFNOofkjJtKwr87Ma5EW4Dc8fWhD0R+ndq7Oc456ivUfGOOP6oAZTTKl5/CcNMP+EN+e3/iUzgE0veZg==
+es-abstract@^1.17.0-next.1:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.0.tgz#f42a517d0036a5591dbb2c463591dc8bb50309b1"
+  integrity sha512-yYkE07YF+6SIBmg1MsJ9dlub5L48Ek7X0qz+c/CPCHS9EBXfESorzng4cJQjJW5/pB6vDF41u7F8vUhLVDqIug==
   dependencies:
-    es-to-primitive "^1.2.0"
+    es-to-primitive "^1.2.1"
     function-bind "^1.1.1"
     has "^1.0.3"
-    has-symbols "^1.0.0"
-    is-callable "^1.1.4"
-    is-regex "^1.0.4"
-    object-inspect "^1.6.0"
+    has-symbols "^1.0.1"
+    is-callable "^1.1.5"
+    is-regex "^1.0.5"
+    object-inspect "^1.7.0"
     object-keys "^1.1.1"
-    string.prototype.trimleft "^2.0.0"
-    string.prototype.trimright "^2.0.0"
+    object.assign "^4.1.0"
+    string.prototype.trimleft "^2.1.1"
+    string.prototype.trimright "^2.1.1"
 
-es-to-primitive@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.0.tgz#edf72478033456e8dda8ef09e00ad9650707f377"
-  integrity sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
   dependencies:
     is-callable "^1.1.4"
     is-date-object "^1.0.1"
@@ -4924,16 +5003,17 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-execa@^2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-2.0.4.tgz#2f5cc589c81db316628627004ea4e37b93391d8e"
-  integrity sha512-VcQfhuGD51vQUQtKIq2fjGDLDbL6N1DTQVpYzxZ7LPIXw3HqTuIz6uxRmpV1qf8i31LHf2kjiaGI+GdHwRgbnQ==
+execa@^3.3.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-3.4.0.tgz#c08ed4550ef65d858fac269ffc8572446f37eb89"
+  integrity sha512-r9vdGQk4bmCuK1yKQu1KTwcT2zwfWdbdaXfCtAh+5nU/4fSX+JAb7vZGvI5naJrQlvONrEB20jeruESI69530g==
   dependencies:
-    cross-spawn "^6.0.5"
+    cross-spawn "^7.0.0"
     get-stream "^5.0.0"
+    human-signals "^1.1.1"
     is-stream "^2.0.0"
     merge-stream "^2.0.0"
-    npm-run-path "^3.0.0"
+    npm-run-path "^4.0.0"
     onetime "^5.1.0"
     p-finally "^2.0.0"
     signal-exit "^3.0.2"
@@ -5109,9 +5189,9 @@ fast-glob@^2.2.6:
     micromatch "^3.1.10"
 
 fast-json-stable-stringify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
-  integrity sha1-1RQsDK7msRifh9OnYREGT4bIu/I=
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
 fast-levenshtein@~2.0.4:
   version "2.0.6"
@@ -5171,6 +5251,11 @@ file-loader@^3.0.1:
     loader-utils "^1.0.2"
     schema-utils "^1.0.0"
 
+file-uri-to-path@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
+  integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@@ -5280,6 +5365,14 @@ find-up@^3.0.0:
   dependencies:
     locate-path "^3.0.0"
 
+find-up@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
 flat-cache@^1.2.1:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.3.4.tgz#2c2ef77525cc2929007dfffa1dd314aa9c9dee6f"
@@ -5405,7 +5498,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@^1.2.3, fsevents@^1.2.7:
+fsevents@^1.2.3:
   version "1.2.9"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.9.tgz#3f5ed66583ccd6f400b5a00db6f7e861363e388f"
   integrity sha512-oeyj2H3EjjonWcFjD5NvZNE9Rqe4UW+nQBU2HNeKw0koVLEFIhtyETyAakeAM3de7Z/SW5kcA+fZUait9EApnw==
@@ -5413,6 +5506,14 @@ fsevents@^1.2.3, fsevents@^1.2.7:
     nan "^2.12.1"
     node-pre-gyp "^0.12.0"
 
+fsevents@^1.2.7:
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.11.tgz#67bf57f4758f02ede88fb2a1712fef4d15358be3"
+  integrity sha512-+ux3lx6peh0BpvY0JebGyZoiR4D+oYzdPZMKJwkZ+sFkNJzpL7tXc/wehS49gUAxg3tmMHPHZkA8JU2rhhgDHw==
+  dependencies:
+    bindings "^1.5.0"
+    nan "^2.12.1"
+
 fstream@^1.0.0, fstream@^1.0.12:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.12.tgz#4e8ba8ee2d48be4f7d0de505455548eae5932045"
@@ -5423,7 +5524,7 @@ fstream@^1.0.0, fstream@^1.0.12:
     mkdirp ">=0.5 0"
     rimraf "2"
 
-function-bind@^1.0.2, function-bind@^1.1.1:
+function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
@@ -5578,7 +5679,7 @@ glob-to-regexp@^0.3.0:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
   integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@~7.1.1:
+glob@^7.0.0, glob@^7.1.1, glob@~7.1.1:
   version "7.1.4"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
   integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==
@@ -5590,6 +5691,18 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, gl
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 globals-docs@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/globals-docs/-/globals-docs-2.4.1.tgz#d16887709f4a15eb22d97e96343591f87a2ee3db"
@@ -5651,11 +5764,16 @@ globule@^1.0.0:
     lodash "~4.17.10"
     minimatch "~3.0.2"
 
-graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+graceful-fs@^4.0.0:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
   integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==
 
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
+  integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
+
 "growl@~> 1.10.0":
   version "1.10.5"
   resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
@@ -5690,6 +5808,17 @@ handlebars@^4.0.3:
   optionalDependencies:
     uglify-js "^3.1.4"
 
+handlebars@^4.5.3:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
+  integrity sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==
+  dependencies:
+    neo-async "^2.6.0"
+    optimist "^0.6.1"
+    source-map "^0.6.1"
+  optionalDependencies:
+    uglify-js "^3.1.4"
+
 har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
@@ -5720,10 +5849,15 @@ has-flag@^3.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
   integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
 
-has-symbols@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
-  integrity sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-symbols@^1.0.0, has-symbols@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
+  integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
 
 has-unicode@^2.0.0:
   version "2.0.1"
@@ -5761,7 +5895,7 @@ has-values@^1.0.0:
     is-number "^3.0.0"
     kind-of "^4.0.0"
 
-has@^1.0.0, has@^1.0.1, has@^1.0.3:
+has@^1.0.0, has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
@@ -5832,11 +5966,18 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-highlight.js@^9.12.0, highlight.js@^9.6.0:
+highlight.js@^9.12.0:
   version "9.15.10"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.10.tgz#7b18ed75c90348c045eef9ed08ca1319a2219ad2"
   integrity sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw==
 
+highlight.js@^9.6.0:
+  version "9.17.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.17.1.tgz#14a4eded23fd314b05886758bb906e39dd627f9a"
+  integrity sha512-TA2/doAur5Ol8+iM3Ov7qy3jYcr/QiJ2eDTdRF4dfbjG7AaaB99J5G+zSl11ljbl6cIcahgPY6SKb3sC3EJ0fw==
+  dependencies:
+    handlebars "^4.5.3"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -5860,9 +6001,9 @@ hoopy@^0.1.4:
   integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
 
 hosted-git-info@^2.1.4:
-  version "2.8.4"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.4.tgz#44119abaf4bc64692a16ace34700fed9c03e2546"
-  integrity sha512-pzXIvANXEFrc5oFFXRMkbLPQ2rXRoDERwDLyrcUxGhaZhgP54BBSl9Oheh7Vv0T090cszWBxPjkQQ5Sq1PbBRQ==
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"
+  integrity sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg==
 
 hpack.js@^2.1.6:
   version "2.1.6"
@@ -5986,7 +6127,7 @@ http-errors@~1.7.2:
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.10.tgz#92c9c1374c35085f75db359ec56cc257cbb93fa4"
   integrity sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=
 
-http-proxy-middleware@^0.19.1:
+http-proxy-middleware@0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz#183c7dc4aa1479150306498c210cdaf96080a43a"
   integrity sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==
@@ -6019,6 +6160,11 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
+human-signals@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
+  integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
+
 iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -6048,9 +6194,9 @@ iferr@^0.1.5:
   integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
 
 ignore-walk@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.2.tgz#99d83a246c196ea5c93ef9315ad7b0819c35069b"
-  integrity sha512-EXyErtpHbn75ZTsOADsfx6J/FPo6/5cjev46PXrcTpd8z3BoRkXgYu9/JVqrI7tusjmwCZutGeRJeU0Wo1e4Cw==
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
+  integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
   dependencies:
     minimatch "^3.0.4"
 
@@ -6149,6 +6295,7 @@ inherits@2.0.1:
 inherits@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
 ini@^1.3.3, ini@^1.3.4, ini@~1.3.0:
   version "1.3.5"
@@ -6224,10 +6371,10 @@ is-absolute-url@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
   integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=
 
-is-absolute-url@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.2.tgz#554f2933e7385cc46e94351977ca2081170a206e"
-  integrity sha512-+5g/wLlcm1AcxSP7014m6GvbPHswDx980vD/3bZaap8aGV9Yfs7Q6y6tfaupgZ5O74Byzc8dGrSCJ+bFXx0KdA==
+is-absolute-url@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.3.tgz#96c6a22b6a23929b11ea0afb1836c36ad4a5d698"
+  integrity sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==
 
 is-absolute@^1.0.0:
   version "1.0.0"
@@ -6301,10 +6448,10 @@ is-buffer@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
   integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==
 
-is-callable@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
-  integrity sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==
+is-callable@^1.1.4, is-callable@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
+  integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
 
 is-ci@^1.0.10:
   version "1.2.1"
@@ -6340,9 +6487,9 @@ is-data-descriptor@^1.0.0:
     kind-of "^6.0.0"
 
 is-date-object@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
-  integrity sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
+  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
 
 is-decimal@^1.0.0:
   version "1.0.3"
@@ -6425,6 +6572,11 @@ is-fullwidth-code-point@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
   integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
 
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
 is-generator-fn@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-1.0.0.tgz#969d49e1bb3329f6bb7f09089be26578b2ddd46a"
@@ -6531,12 +6683,12 @@ is-promise@^2.1.0:
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
   integrity sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=
 
-is-regex@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
-  integrity sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=
+is-regex@^1.0.4, is-regex@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
+  integrity sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==
   dependencies:
-    has "^1.0.1"
+    has "^1.0.3"
 
 is-relative@^1.0.0:
   version "1.0.0"
@@ -6575,11 +6727,11 @@ is-svg@^3.0.0:
     html-comment-regex "^1.1.0"
 
 is-symbol@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.2.tgz#a055f6ae57192caee329e7a860118b497a950f38"
-  integrity sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
+  integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
   dependencies:
-    has-symbols "^1.0.0"
+    has-symbols "^1.0.1"
 
 is-typedarray@~1.0.0:
   version "1.0.0"
@@ -7446,6 +7598,13 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
 lodash.defaultsdeep@^4.6.1:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
@@ -7497,10 +7656,10 @@ log-symbols@^2.2.0:
   dependencies:
     chalk "^2.0.1"
 
-loglevel@^1.6.4:
-  version "1.6.4"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.4.tgz#f408f4f006db8354d0577dcf6d33485b3cb90d56"
-  integrity sha512-p0b6mOGKcGa+7nnmKbpzR6qloPbrgLcnio++E+14Vo/XffOGwZtRpUhr8dTH/x2oCMmEoIU0Zwm3ZauhvYD17g==
+loglevel@^1.6.6:
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.6.tgz#0ee6300cc058db6b3551fa1c4bf73b83bb771312"
+  integrity sha512-Sgr5lbboAUBo3eXCSPL4/KoVz3ROKquOjcctxmHIt+vol2DrqTQe3SwkKKuYhEiWB5kYa13YyopJ69deJ1irzQ==
 
 longest-streak@^2.0.1:
   version "2.0.3"
@@ -7675,11 +7834,6 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-mdn-data@~1.1.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-1.1.4.tgz#50b5d4ffc4575276573c4eedb8780812a8419f01"
-  integrity sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==
-
 mdurl@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -7706,7 +7860,7 @@ mem@^4.0.0:
     mimic-fn "^2.0.0"
     p-is-promise "^2.0.0"
 
-memory-fs@^0.4.0, memory-fs@^0.4.1:
+memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
   integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
@@ -7714,6 +7868,14 @@ memory-fs@^0.4.0, memory-fs@^0.4.1:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
+memory-fs@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
+  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
 meow@^3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
@@ -7815,22 +7977,17 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-mime-db@1.40.0:
-  version "1.40.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.40.0.tgz#a65057e998db090f732a68f6c276d387d4126c32"
-  integrity sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==
-
-"mime-db@>= 1.40.0 < 2":
-  version "1.41.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.41.0.tgz#9110408e1f6aa1b34aef51f2c9df3caddf46b6a0"
-  integrity sha512-B5gxBI+2K431XW8C2rcc/lhppbuji67nf9v39eH8pkWoZDxnAL0PxdpH32KYRScniF8qDHBDlI+ipgg5WrCUYw==
+mime-db@1.42.0, "mime-db@>= 1.40.0 < 2":
+  version "1.42.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.42.0.tgz#3e252907b4c7adb906597b4b65636272cf9e7bac"
+  integrity sha512-UbfJCR4UAVRNgMpfImz05smAXK7+c+ZntjaA26ANtkXLlOe947Aag5zdIcKQULAiF9Cq4WxBi9jUs5zkA84bYQ==
 
 mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
-  version "2.1.24"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.24.tgz#b6f8d0b3e951efb77dedeca194cff6d16f676f81"
-  integrity sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==
+  version "2.1.25"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.25.tgz#39772d46621f93e2a80a856c53b86a62156a6437"
+  integrity sha512-5KhStqB5xpTAeGqKBAMgwaYMnQik7teQN4IAzC7npDv6kzeU6prfkR67bc87J1kWMPGkoaZSq1npmexMgkmEVg==
   dependencies:
-    mime-db "1.40.0"
+    mime-db "1.42.0"
 
 mime@1.6.0:
   version "1.6.0"
@@ -7852,13 +8009,13 @@ mimic-fn@^2.0.0, mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
-mini-css-extract-plugin@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.6.0.tgz#a3f13372d6fcde912f3ee4cd039665704801e3b9"
-  integrity sha512-79q5P7YGI6rdnVyIAV4NXpBQJFWdkzJxCim3Kog4078fM0piAaFlwocqbejdWtLW1cEzCexPrh6EdyFsPgVdAw==
+mini-css-extract-plugin@^0.8.0:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.2.tgz#a875e169beb27c88af77dd962771c9eedc3da161"
+  integrity sha512-a3Y4of27Wz+mqK3qrcd3VhYz6cU0iW5x3Sgvqzbj+XmlrSizmvu8QQMl5oMYJjgHOC4iyt+w7l4umP+dQeW3bw==
   dependencies:
     loader-utils "^1.1.0"
-    normalize-url "^2.0.1"
+    normalize-url "1.9.1"
     schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
@@ -7893,20 +8050,20 @@ minimist@~0.0.1:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
   integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
 
-minipass@^2.2.1, minipass@^2.6.0, minipass@^2.6.4:
-  version "2.6.5"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.6.5.tgz#1c245f9f2897f70fd4a219066261ce6c29f80b18"
-  integrity sha512-ewSKOPFH9blOLXx0YSE+mbrNMBFPS+11a2b03QZ+P4LVrUHW/GAlqeYC7DBknDyMWkHzrzTpDhUvy7MUxqyrPA==
+minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
+  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
   dependencies:
     safe-buffer "^5.1.2"
     yallist "^3.0.0"
 
 minizlib@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.2.2.tgz#6f0ccc82fa53e1bf2ff145f220d2da9fa6e3a166"
-  integrity sha512-hR3At21uSrsjjDTWrbu0IMLTpnkpv8IIMFDFaoz43Tmu4LkmAXfH44vNNzpTnf+OAQQCHrb91y/wc2J4x5XgSQ==
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
+  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
   dependencies:
-    minipass "^2.2.1"
+    minipass "^2.9.0"
 
 mississippi@^2.0.0:
   version "2.0.0"
@@ -7955,7 +8112,7 @@ mixin-object@^2.0.1:
     for-in "^0.1.3"
     is-extendable "^0.1.1"
 
-mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
+mkdirp@0.5.1, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
@@ -8102,10 +8259,10 @@ node-cache@^4.1.1:
     clone "2.x"
     lodash "^4.17.15"
 
-node-forge@0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.8.2.tgz#b4bcc59fb12ce77a8825fc6a783dfe3182499c5a"
-  integrity sha512-mXQ9GBq1N3uDCyV1pdSzgIguwgtVpM7f5/5J4ipz12PKWElmPpVWLDuWl8iXmhysr21+WmX/OJ5UKx82wjomgg==
+node-forge@0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
+  integrity sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==
 
 node-gyp@^3.8.0:
   version "3.8.0"
@@ -8179,6 +8336,22 @@ node-notifier@^5.2.1:
     shellwords "^0.1.1"
     which "^1.3.0"
 
+node-pre-gyp@*:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
+  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
+  dependencies:
+    detect-libc "^1.0.2"
+    mkdirp "^0.5.1"
+    needle "^2.2.1"
+    nopt "^4.0.1"
+    npm-packlist "^1.1.6"
+    npmlog "^4.0.2"
+    rc "^1.2.7"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^4.4.2"
+
 node-pre-gyp@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz#39ba4bb1439da030295f899e3b520b7785766149"
@@ -8195,12 +8368,12 @@ node-pre-gyp@^0.12.0:
     semver "^5.3.0"
     tar "^4"
 
-node-releases@^1.1.29:
-  version "1.1.32"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.32.tgz#485b35c1bf9b4d8baa105d782f8ca731e518276e"
-  integrity sha512-VhVknkitq8dqtWoluagsGPn3dxTvN9fwgR59fV3D7sLBHe0JfDramsMI8n8mY//ccq/Kkrf8ZRHRpsyVZ3qw1A==
+node-releases@^1.1.29, node-releases@^1.1.42:
+  version "1.1.44"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.44.tgz#cd66438a6eb875e3eb012b6a12e48d9f4326ffd7"
+  integrity sha512-NwbdvJyR7nrcGrXvKAvzc5raj/NkoJudkarh2yIpJ4t0NH4aqjUDz/486P+ynIW5eokKOfzGNRdYoLfBlomruw==
   dependencies:
-    semver "^5.3.0"
+    semver "^6.3.0"
 
 node-sass@^4.9.4:
   version "4.12.0"
@@ -8272,7 +8445,7 @@ normalize-range@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
 
-normalize-url@^1.9.1:
+normalize-url@1.9.1, normalize-url@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
   integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=
@@ -8282,15 +8455,6 @@ normalize-url@^1.9.1:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
-normalize-url@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-2.0.1.tgz#835a9da1551fa26f70e92329069a23aa6574d7e6"
-  integrity sha512-D6MUW4K/VzoJ4rJ01JFKxDrtY1v9wrgzCX5f2qj/lzH1m/lW6MhUZFKerVsnyjOhOsYzI9Kqqak+10l4LvLpMw==
-  dependencies:
-    prepend-http "^2.0.0"
-    query-string "^5.0.1"
-    sort-keys "^2.0.0"
-
 normalize-url@^3.0.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
@@ -8304,14 +8468,21 @@ now-and-later@^2.0.0:
     once "^1.3.2"
 
 npm-bundled@^1.0.1:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd"
-  integrity sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
+  integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==
+  dependencies:
+    npm-normalize-package-bin "^1.0.1"
+
+npm-normalize-package-bin@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
+  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
 
 npm-packlist@^1.1.6:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.4.tgz#866224233850ac534b63d1a6e76050092b5d2f44"
-  integrity sha512-zTLo8UcVYtDU3gdeaFu2Xu0n0EvelfHDGuqtNIn5RO7yQj4H1TqNdBc/yZjxnWA0PVB8D3Woyp0i5B43JwQ6Vw==
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.7.tgz#9e954365a06b80b18111ea900945af4f88ed4848"
+  integrity sha512-vAj7dIkp5NhieaGZxBJB8fF4R0078rqsmhJcAfXZ6O7JJhjhPK96n5Ry1oZcfLXgfun0GWTZPOxaEyqv8GBykQ==
   dependencies:
     ignore-walk "^3.0.1"
     npm-bundled "^1.0.1"
@@ -8323,10 +8494,10 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-npm-run-path@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-3.1.0.tgz#7f91be317f6a466efed3c9f2980ad8a4ee8b0fa5"
-  integrity sha512-Dbl4A/VfiVGLgQv29URL9xshU8XDY1GeLy+fsaZ1AA8JDSfjvr5P5+pzRbWqRSBxk6/DW7MIh8lTM/PaGnP2kg==
+npm-run-path@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
   dependencies:
     path-key "^3.0.0"
 
@@ -8386,15 +8557,15 @@ object-hash@^1.1.4:
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
   integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
 
-object-inspect@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.6.0.tgz#c70b6cbf72f274aab4c34c0c82f5167bf82cf15b"
-  integrity sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ==
+object-inspect@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
+  integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
 
 object-is@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
-  integrity sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.2.tgz#6b80eb84fe451498f65007982f035a5b445edec4"
+  integrity sha512-Epah+btZd5wrrfjkJZq1AOB9O6OxUQto45hzFd7lXGrpHPGE0W1k+426yrZV+k6NJOzLNNW/nVsmZdIWsAqoOQ==
 
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
@@ -8418,12 +8589,12 @@ object.assign@^4.0.4, object.assign@^4.1.0:
     object-keys "^1.0.11"
 
 object.getownpropertydescriptors@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
-  integrity sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"
+  integrity sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.5.1"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
 
 object.omit@^2.0.0:
   version "2.0.1"
@@ -8441,12 +8612,12 @@ object.pick@^1.3.0:
     isobject "^3.0.1"
 
 object.values@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.0.tgz#bf6810ef5da3e5325790eaaa2be213ea84624da9"
-  integrity sha512-8mf0nKLAoFX6VlNVdhGj31SVYpaNFtUnuoOXWyFEstsWRgU837AK+JYM0iAxwkSzGRbwn8cbFmgbyxj1j4VbXg==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.1.tgz#68a99ecde356b7e9295a3c5e0ce31dc8c953de5e"
+  integrity sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==
   dependencies:
     define-properties "^1.1.3"
-    es-abstract "^1.12.0"
+    es-abstract "^1.17.0-next.1"
     function-bind "^1.1.1"
     has "^1.0.3"
 
@@ -8630,7 +8801,7 @@ p-limit@^1.0.0, p-limit@^1.1.0:
   dependencies:
     p-try "^1.0.0"
 
-p-limit@^2.0.0:
+p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.1.tgz#aa07a788cc3151c939b5131f63570f0dd2009537"
   integrity sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==
@@ -8651,6 +8822,13 @@ p-locate@^3.0.0:
   dependencies:
     p-limit "^2.0.0"
 
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
 p-map@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
@@ -8787,11 +8965,23 @@ parse-url@^3.0.2:
     parse-path "^3.0.1"
     protocols "^1.4.0"
 
-parse5@4.0.0, parse5@^4.0.0:
+parse5-htmlparser2-tree-adapter@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-5.1.1.tgz#e8c743d4e92194d5293ecde2b08be31e67461cbc"
+  integrity sha512-CF+TKjXqoqyDwHqBhFQ+3l5t83xYi6fVT1tQNg+Ye0JRLnTxWvIroCjEp1A0k4lneHNBGnICUf0cfYVYGEazqw==
+  dependencies:
+    parse5 "^5.1.1"
+
+parse5@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
   integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==
 
+parse5@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
+  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
+
 parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -8824,6 +9014,11 @@ path-exists@^3.0.0:
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
   integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
 
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
 path-is-absolute@^1.0.0, path-is-absolute@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@@ -8839,10 +9034,10 @@ path-key@^2.0.0, path-key@^2.0.1:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
   integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
 
-path-key@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.0.tgz#99a10d870a803bdd5ee6f0470e58dfcd2f9a54d3"
-  integrity sha512-8cChqz0RP6SHJkMt48FW0A7+qUOn+OsnOsVtzI59tZ8m+5bCSk7hzwET0pulwOM2YMn9J1efb07KB9l9f30SGg==
+path-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
 path-parse@^1.0.5, path-parse@^1.0.6:
   version "1.0.6"
@@ -8963,14 +9158,14 @@ pn@^1.1.0:
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
 
-portfinder@^1.0.20, portfinder@^1.0.24:
-  version "1.0.24"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.24.tgz#11efbc6865f12f37624b6531ead1d809ed965cfa"
-  integrity sha512-ekRl7zD2qxYndYflwiryJwMioBI7LI7rVXg3EnLK3sjkouT5eOuhS3gS255XxBksa30VG8UPZYZCdgfGOfkSUg==
+portfinder@^1.0.20, portfinder@^1.0.25:
+  version "1.0.25"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca"
+  integrity sha512-6ElJnHBbxVA1XSLgBp7G1FiCkQdlqGzuF7DswL5tcea+E8UpuvPU7beVAjjRwCioTS9ZluNbu+ZyRvgTsmqEBg==
   dependencies:
-    async "^1.5.2"
-    debug "^2.2.0"
-    mkdirp "0.5.x"
+    async "^2.6.2"
+    debug "^3.1.1"
+    mkdirp "^0.5.1"
 
 posix-character-classes@^0.1.0:
   version "0.1.1"
@@ -9297,7 +9492,7 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss-value-parser@^4.0.0:
+postcss-value-parser@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9"
   integrity sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==
@@ -9311,10 +9506,10 @@ postcss@^6.0.1, postcss@^6.0.23:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.5:
-  version "7.0.18"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.18.tgz#4b9cda95ae6c069c67a4d933029eddd4838ac233"
-  integrity sha512-/7g1QXXgegpF+9GJj4iN7ChGF40sYuGYJ8WZu8DZWnmhQ/G36hfdk3q9LBJmoK+lZ+yzZ5KYpOoxq7LF1BxE8g==
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.23, postcss@^7.0.5:
+  version "7.0.25"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.25.tgz#dd2a2a753d50b13bed7a2009b4a18ac14d9db21e"
+  integrity sha512-NXXVvWq9icrm/TgQC0O6YVFi4StfJz46M1iNd/h6B26Nvh/HKI+q4YZtFN/EjcInZliEscO/WL10BXnc1E5nwg==
   dependencies:
     chalk "^2.4.2"
     source-map "^0.6.1"
@@ -9330,20 +9525,15 @@ prepend-http@^1.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
-prepend-http@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
-  integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
-
 preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
   integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
 
-prettier@1.16.3:
-  version "1.16.3"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.3.tgz#8c62168453badef702f34b45b6ee899574a6a65d"
-  integrity sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==
+prettier@^1.18.2:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
+  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
 pretty-error@^2.0.2:
   version "2.1.1"
@@ -9444,9 +9634,9 @@ pseudomap@^1.0.2:
   integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
 
 psl@^1.1.24, psl@^1.1.28:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.4.0.tgz#5dd26156cdb69fa1fdb8ab1991667d3f80ced7c2"
-  integrity sha512-HZzqCGPecFLyoRj5HLfuDSKYTJkAfB5thKBIkRHtGjWwY7p1dAyveIbXIq4tO0KYfDF2tHqPUgY9SDnGm00uFw==
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.6.0.tgz#60557582ee23b6c43719d9890fb4170ecd91e110"
+  integrity sha512-SYKKmVel98NCOYXpkwUqZqh0ahZeeKfmisiLIcEZdsb+WbLv02g/dI5BUmZnIyOe7RzZtLax81nnb2HbvC2tzA==
 
 public-encrypt@^4.0.0:
   version "4.0.3"
@@ -9479,6 +9669,7 @@ pump@^3.0.0:
 pumpify@^1.3.3, pumpify@^1.3.5:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
+  integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
   dependencies:
     duplexify "^3.6.0"
     inherits "^2.0.3"
@@ -9527,15 +9718,6 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
-query-string@^5.0.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.1.1.tgz#a78c012b71c17e05f2e3fa2319dd330682efb3cb"
-  integrity sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==
-  dependencies:
-    decode-uri-component "^0.2.0"
-    object-assign "^4.1.0"
-    strict-uri-encode "^1.0.0"
-
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -9797,11 +9979,12 @@ regexp-tree@^0.1.13:
   integrity sha512-hwdV/GQY5F8ReLZWO+W1SRoN5YfpOKY6852+tBFcma72DKBIcHjPRIlIvQN35bCOljuAfP2G2iB0FC/w236mUw==
 
 regexp.prototype.flags@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.2.0.tgz#6b30724e306a27833eeb171b66ac8890ba37e41c"
-  integrity sha512-ztaw4M1VqgMwl9HlPpOuiYgItcHlunW0He2fE6eNfT6E/CF2FtYi9ofOYe4mKntstYk0Fyh/rDRBdS3AnxjlrA==
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
   dependencies:
-    define-properties "^1.1.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
 
 regexpp@^1.0.1:
   version "1.1.0"
@@ -10034,7 +10217,14 @@ request-promise-core@1.1.2:
   dependencies:
     lodash "^4.17.11"
 
-request-promise-native@^1.0.5, request-promise-native@^1.0.7:
+request-promise-core@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.3.tgz#e9a3c081b51380dfea677336061fea879a829ee9"
+  integrity sha512-QIs2+ArIGQVp5ZYbWD5ZLCY29D5CfWizP8eWnm8FoGD1TX61veauETVQbrV60662V0oFBkrDOuaBI8XgtuyYAQ==
+  dependencies:
+    lodash "^4.17.15"
+
+request-promise-native@^1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.7.tgz#a49868a624bdea5069f1251d0a836e0d89aa2c59"
   integrity sha512-rIMnbBdgNViL37nZ1b3L/VfPOpSi0TqVDQPAvO6U14lMzOLrt5nilxCQqtDKhZeDiW0/hkCXGoQjhgJd/tCh6w==
@@ -10043,6 +10233,15 @@ request-promise-native@^1.0.5, request-promise-native@^1.0.7:
     stealthy-require "^1.1.1"
     tough-cookie "^2.3.3"
 
+request-promise-native@^1.0.7:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.8.tgz#a455b960b826e44e2bf8999af64dff2bfe58cb36"
+  integrity sha512-dapwLGqkHtwL5AEbfenuzjTYg35Jd6KPytsC2/TLkVMz8rm+tNt72MGUWT1RP/aYawMpN6HqbNGBQaRcBtjQMQ==
+  dependencies:
+    request-promise-core "1.1.3"
+    stealthy-require "^1.1.1"
+    tough-cookie "^2.3.3"
+
 request@^2.86.0, request@^2.87.0, request@^2.88.0:
   version "2.88.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
@@ -10131,13 +10330,20 @@ resolve@1.1.7:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@^1.1.3, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.3.2:
+resolve@^1.1.3, resolve@^1.12.0, resolve@^1.3.2:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
   integrity sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==
   dependencies:
     path-parse "^1.0.6"
 
+resolve@^1.10.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.14.1.tgz#9e018c540fcf0c427d678b9931cbf45e984bcaff"
+  integrity sha512-fn5Wobh4cxbLzuHaE+nphztHy43/b++4M6SsGFC2gB8uYwf0C8LcarfCz1un7UTW8OFQg9iNjZ4xpcFVGebDPg==
+  dependencies:
+    path-parse "^1.0.6"
+
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
@@ -10318,12 +10524,12 @@ select-hose@^2.0.0:
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
-selfsigned@^1.10.6:
-  version "1.10.6"
-  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.6.tgz#7b3cd37ed9c2034261a173af1a1aae27d8169b67"
-  integrity sha512-i3+CeqxL7DpAazgVpAGdKMwHuL63B5nhJMh9NQ7xmChGkA3jNFflq6Jyo1LLJYcr3idWiNOPWHCrm4zMayLG4w==
+selfsigned@^1.10.7:
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.7.tgz#da5819fd049d5574f28e88a9bcc6dbc6e6f3906b"
+  integrity sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==
   dependencies:
-    node-forge "0.8.2"
+    node-forge "0.9.0"
 
 "semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
   version "5.7.1"
@@ -10359,11 +10565,16 @@ send@0.17.1:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
-serialize-javascript@^1.4.0, serialize-javascript@^1.7.0:
+serialize-javascript@^1.4.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb"
   integrity sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A==
 
+serialize-javascript@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
+  integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
+
 serve-index@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
@@ -10440,11 +10651,23 @@ shebang-command@^1.2.0:
   dependencies:
     shebang-regex "^1.0.0"
 
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
 shebang-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
   integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
 
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
 shell-quote@^1.6.1:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
@@ -10555,13 +10778,6 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
-sort-keys@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128"
-  integrity sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=
-  dependencies:
-    is-plain-obj "^1.0.0"
-
 source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
@@ -10585,7 +10801,7 @@ source-map-support@^0.4.15:
   dependencies:
     source-map "^0.5.6"
 
-source-map-support@^0.5.6, source-map-support@~0.5.12:
+source-map-support@^0.5.6:
   version "0.5.13"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
   integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
@@ -10593,6 +10809,14 @@ source-map-support@^0.5.6, source-map-support@~0.5.12:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
+source-map-support@~0.5.12:
+  version "0.5.16"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"
+  integrity sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
 source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
@@ -10798,9 +11022,9 @@ stream-http@^2.7.2:
     xtend "^4.0.0"
 
 stream-shift@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
-  integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
+  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
 
 strict-uri-encode@^1.0.0:
   version "1.1.0"
@@ -10845,36 +11069,43 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
+string-width@^4.1.0, string-width@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
+  integrity sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.0"
+
 string.prototype.padend@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.0.0.tgz#f3aaef7c1719f170c5eab1c32bf780d96e21f2f0"
-  integrity sha1-86rvfBcZ8XDF6rHDK/eA2W4h8vA=
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.1.0.tgz#dc08f57a8010dc5c153550318f67e13adbb72ac3"
+  integrity sha512-3aIv8Ffdp8EZj8iLwREGpQaUZiPyrWrpzMBHvkiSW/bK/EGve9np07Vwy7IJ5waydpGXzQZu/F8Oze2/IWkBaA==
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.4.3"
-    function-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
 
 string.prototype.padstart@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.padstart/-/string.prototype.padstart-3.0.0.tgz#5bcfad39f4649bb2d031292e19bcf0b510d4b242"
-  integrity sha1-W8+tOfRkm7LQMSkuGbzwtRDUskI=
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.padstart/-/string.prototype.padstart-3.1.0.tgz#b47c087540d0710be5a49375751a0a627bd4ff90"
+  integrity sha512-envqZvUp2JItI+OeQ5UAh1ihbAV5G/2bixTojvlIa090GGqF+NQRxbWb2nv9fTGrZABv6+pE6jXoAZhhS2k4Hw==
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.4.3"
-    function-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
 
-string.prototype.trimleft@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634"
-  integrity sha512-FJ6b7EgdKxxbDxc79cOlok6Afd++TTs5szo+zJTUyow3ycrRfJVE2pq3vcN53XexvKZu/DJMDfeI/qMiZTrjTw==
+string.prototype.trimleft@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz#9bdb8ac6abd6d602b17a4ed321870d2f8dcefc74"
+  integrity sha512-iu2AGd3PuP5Rp7x2kEZCrB2Nf41ehzh+goo8TV7z8/XDBbsvc6HQIlUl9RjkZ4oyrW1XM5UwlGl1oVEaDjg6Ag==
   dependencies:
     define-properties "^1.1.3"
     function-bind "^1.1.1"
 
-string.prototype.trimright@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.0.tgz#669d164be9df9b6f7559fa8e89945b168a5a6c58"
-  integrity sha512-fXZTSV55dNBwv16uw+hh5jkghxSnc5oHq+5K/gXgizHwAvMetdAJlHqqoFC1FSDVPYWLkAKl2cxpUT41sV7nSg==
+string.prototype.trimright@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.1.tgz#440314b15996c866ce8a0341894d45186200c5d9"
+  integrity sha512-qFvWL3/+QIgZXVmJBfpHmxLB7xsUXz6HsUmP8+5dRaC3Q7oKUv9Vo6aMCRZC1smrtyECFsIT30PqBJ1gTjAs+g==
   dependencies:
     define-properties "^1.1.3"
     function-bind "^1.1.1"
@@ -10929,6 +11160,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
+  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
+  dependencies:
+    ansi-regex "^5.0.0"
+
 strip-bom@3.0.0, strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -11017,17 +11255,24 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+  dependencies:
+    has-flag "^4.0.0"
+
 svgo@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.0.tgz#bae51ba95ded9a33a36b7c46ce9c359ae9154313"
-  integrity sha512-MLfUA6O+qauLDbym+mMZgtXCGRfIxyQoeH6IKVcFslyODEe/ElJNwr0FohQ3xG4C6HK6bk3KYPPXwHVJk3V5NQ==
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
+  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
   dependencies:
     chalk "^2.4.1"
     coa "^2.0.2"
     css-select "^2.0.0"
     css-select-base-adapter "^0.1.1"
-    css-tree "1.0.0-alpha.33"
-    csso "^3.5.1"
+    css-tree "1.0.0-alpha.37"
+    csso "^4.0.2"
     js-yaml "^3.13.1"
     mkdirp "~0.5.1"
     object.values "^1.1.0"
@@ -11067,38 +11312,38 @@ tar@^2.0.0:
     fstream "^1.0.12"
     inherits "2"
 
-tar@^4:
-  version "4.4.11"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.11.tgz#7ac09801445a3cf74445ed27499136b5240ffb73"
-  integrity sha512-iI4zh3ktLJKaDNZKZc+fUONiQrSn9HkCFzamtb7k8FFmVilHVob7QsLX/VySAW8lAviMzMbFw4QtFb4errwgYA==
+tar@^4, tar@^4.4.2:
+  version "4.4.13"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
+  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
   dependencies:
     chownr "^1.1.1"
     fs-minipass "^1.2.5"
-    minipass "^2.6.4"
+    minipass "^2.8.6"
     minizlib "^1.2.1"
     mkdirp "^0.5.0"
     safe-buffer "^5.1.2"
     yallist "^3.0.3"
 
-terser-webpack-plugin@^1.2.3, terser-webpack-plugin@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
-  integrity sha512-ZXmmfiwtCLfz8WKZyYUuuHf3dMYEjg8NrjHMb0JqHVHVOSkzp3cW2/XG1fP3tRhqEqSzMwzzRQGtAPbs4Cncxg==
+terser-webpack-plugin@^1.2.3, terser-webpack-plugin@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c"
+  integrity sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==
   dependencies:
     cacache "^12.0.2"
     find-cache-dir "^2.1.0"
     is-wsl "^1.1.0"
     schema-utils "^1.0.0"
-    serialize-javascript "^1.7.0"
+    serialize-javascript "^2.1.2"
     source-map "^0.6.1"
     terser "^4.1.2"
     webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
 terser@^4.1.2:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.3.1.tgz#09820bcb3398299c4b48d9a86aefc65127d0ed65"
-  integrity sha512-pnzH6dnFEsR2aa2SJaKb1uSCl3QmIsJ8dEkj0Fky+2AwMMcC9doMqLOQIH6wVTEKaVfKVvLSk5qxPBEZT9mywg==
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.4.3.tgz#401abc52b88869cf904412503b1eb7da093ae2f0"
+  integrity sha512-0ikKraVtRDKGzHrzkCv5rUNDzqlhmhowOBqC0XqUHFpW+vJ45+20/IFBcebwKfiS2Z9fJin6Eo+F1zLZsxi8RA==
   dependencies:
     commander "^2.20.0"
     source-map "~0.6.1"
@@ -11169,9 +11414,9 @@ through2@^2.0.0, through2@^2.0.3, through2@~2.0.0:
   resolved "http://registry.npmjs.org/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
 
 thunky@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.0.3.tgz#f5df732453407b09191dae73e2a8cc73f381a826"
-  integrity sha512-YwT8pjmNcAXBZqrubu22P4FYsh2D4dxRmnWBOL8Jk8bUcRUtc5326kx32tuTmFDAZtLOGEVNl8POAR8j896Iow==
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
+  integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
 timers-browserify@^2.0.4:
   version "2.0.11"
@@ -11819,9 +12064,9 @@ vinyl@^2.0.0, vinyl@^2.1.0:
     replace-ext "^1.0.0"
 
 vm-browserify@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
-  integrity sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
+  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
@@ -11857,11 +12102,11 @@ vue-jest@^3.0.4:
     vue-template-es2015-compiler "^1.6.0"
 
 vue-loader@^15.7.0:
-  version "15.7.1"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.7.1.tgz#6ccacd4122aa80f69baaac08ff295a62e3aefcfd"
-  integrity sha512-fwIKtA23Pl/rqfYP5TSGK7gkEuLhoTvRYW+TU7ER3q9GpNLt/PjG5NLv3XHRDiTg7OPM1JcckBgds+VnAc+HbA==
+  version "15.8.3"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.8.3.tgz#857cb9e30eb5fc25e66db48dce7e4f768602a23c"
+  integrity sha512-yFksTFbhp+lxlm92DrKdpVIWMpranXnTEuGSc0oW+Gk43M9LWaAmBTnfj5+FCdve715mTHvo78IdaXf5TbiTJg==
   dependencies:
-    "@vue/component-compiler-utils" "^3.0.0"
+    "@vue/component-compiler-utils" "^3.1.0"
     hash-sum "^1.0.2"
     loader-utils "^1.1.0"
     vue-hot-reload-api "^2.3.0"
@@ -11944,9 +12189,9 @@ webidl-conversions@^4.0.2:
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
 webpack-bundle-analyzer@^3.3.0:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.5.1.tgz#84aabb1547178d842ebb4ccc7324084b6c3b0ea9"
-  integrity sha512-CDdaT3TTu4F9X3tcDq6PNJOiNGgREOM0WdN2vVAoUUn+M6NLB5kJ543HImCWbrDwOpbpGARSwU8r+u0Pl367kA==
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.6.0.tgz#39b3a8f829ca044682bc6f9e011c95deb554aefd"
+  integrity sha512-orUfvVYEfBMDXgEKAKVvab5iQ2wXneIEorGNsyuOyVYpjYrI7CUOhhXNDd3huMwQ3vNNWWlGP+hzflMFYNzi2g==
   dependencies:
     acorn "^6.0.7"
     acorn-walk "^6.1.1"
@@ -11970,10 +12215,10 @@ webpack-chain@^4.11.0:
     deepmerge "^1.5.2"
     javascript-stringify "^1.6.0"
 
-webpack-dev-middleware@^3.7.1:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.1.tgz#1167aea02afa034489869b8368fe9fed1aea7d09"
-  integrity sha512-5MWu9SH1z3hY7oHOV6Kbkz5x7hXbxK56mGHNqHTe6d+ewxOwKUxoUJBs7QIaJb33lPjl9bJZ3X0vCoooUzC36A==
+webpack-dev-middleware@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
+  integrity sha512-1xC42LxbYoqLNAhV6YzTYacicgMZQTqRd27Sim9wn5hJrX3I5nxYy1SxSd4+gjUFsz1dQFj+yEe6zEVmSkeJjw==
   dependencies:
     memory-fs "^0.4.1"
     mime "^2.4.4"
@@ -11982,9 +12227,9 @@ webpack-dev-middleware@^3.7.1:
     webpack-log "^2.0.0"
 
 webpack-dev-server@^3.4.1:
-  version "3.8.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.8.1.tgz#485b64c4aadc23f601e72114b40c1b1fea31d9f1"
-  integrity sha512-9F5DnfFA9bsrhpUCAfQic/AXBVHvq+3gQS+x6Zj0yc1fVVE0erKh2MV4IV12TBewuTrYeeTIRwCH9qLMvdNvTw==
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.10.1.tgz#1ff3e5cccf8e0897aa3f5909c654e623f69b1c0e"
+  integrity sha512-AGG4+XrrXn4rbZUueyNrQgO4KGnol+0wm3MPdqGLmmA+NofZl3blZQKxZ9BND6RDNuvAK9OMYClhjOSnxpWRoA==
   dependencies:
     ansi-html "0.0.7"
     bonjour "^3.5.0"
@@ -11995,18 +12240,18 @@ webpack-dev-server@^3.4.1:
     del "^4.1.1"
     express "^4.17.1"
     html-entities "^1.2.1"
-    http-proxy-middleware "^0.19.1"
+    http-proxy-middleware "0.19.1"
     import-local "^2.0.0"
     internal-ip "^4.3.0"
     ip "^1.1.5"
-    is-absolute-url "^3.0.2"
+    is-absolute-url "^3.0.3"
     killable "^1.0.1"
-    loglevel "^1.6.4"
+    loglevel "^1.6.6"
     opn "^5.5.0"
     p-retry "^3.0.1"
-    portfinder "^1.0.24"
+    portfinder "^1.0.25"
     schema-utils "^1.0.0"
-    selfsigned "^1.10.6"
+    selfsigned "^1.10.7"
     semver "^6.3.0"
     serve-index "^1.9.1"
     sockjs "0.3.19"
@@ -12015,7 +12260,7 @@ webpack-dev-server@^3.4.1:
     strip-ansi "^3.0.1"
     supports-color "^6.1.0"
     url "^0.11.0"
-    webpack-dev-middleware "^3.7.1"
+    webpack-dev-middleware "^3.7.2"
     webpack-log "^2.0.0"
     ws "^6.2.1"
     yargs "12.0.5"
@@ -12044,9 +12289,9 @@ webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1:
     source-map "~0.6.1"
 
 webpack@^4.0.0:
-  version "4.40.2"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.40.2.tgz#d21433d250f900bf0facbabe8f50d585b2dc30a7"
-  integrity sha512-5nIvteTDCUws2DVvP9Qe+JPla7kWPPIDFZv55To7IycHWZ+Z5qBdaBYPyuXWdhggTufZkQwfIK+5rKQTVovm2A==
+  version "4.41.4"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.4.tgz#4bec4125224bdf50efa8be6226c19047599cd034"
+  integrity sha512-Lc+2uB6NjpCWsHI3trkoISOI64h9QYIXenbEWj3bn3oyjfB1lEBXjWAfAyY2sM0rZn41oD5V91OLwKRwS6Wp8Q==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     "@webassemblyjs/helper-module-context" "1.8.5"
@@ -12068,7 +12313,7 @@ webpack@^4.0.0:
     node-libs-browser "^2.2.1"
     schema-utils "^1.0.0"
     tapable "^1.1.3"
-    terser-webpack-plugin "^1.4.1"
+    terser-webpack-plugin "^1.4.3"
     watchpack "^1.6.0"
     webpack-sources "^1.4.1"
 
@@ -12133,6 +12378,13 @@ which@1, which@^1.2.12, which@^1.2.9, which@^1.3.0:
   dependencies:
     isexe "^2.0.0"
 
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
 wide-align@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
@@ -12174,6 +12426,15 @@ wrap-ansi@^5.1.0:
     string-width "^3.0.0"
     strip-ansi "^5.0.0"
 
+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
+  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -12240,9 +12501,9 @@ yallist@^2.1.2:
   integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
 yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.3.tgz#b4b049e314be545e3ce802236d6cd22cd91c3de9"
-  integrity sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
 yargs-parser@^11.1.1:
   version "11.1.1"
@@ -12252,10 +12513,10 @@ yargs-parser@^11.1.1:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^13.1.1:
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0"
-  integrity sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==
+yargs-parser@^16.1.0:
+  version "16.1.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-16.1.0.tgz#73747d53ae187e7b8dbe333f95714c76ea00ecf1"
+  integrity sha512-H/V41UNZQPkUMIT5h5hiwg4QKIY1RPvoBV4XcjUbRM8Bk2oKqqyZ0DIEbTFZB0XjbtSPG8SAa/0DxCQmiRgzKg==
   dependencies:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
@@ -12317,21 +12578,22 @@ yargs@^11.0.0:
     y18n "^3.2.1"
     yargs-parser "^9.0.2"
 
-yargs@^13.0.0:
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"
-  integrity sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==
+yargs@^15.0.0:
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.0.2.tgz#4248bf218ef050385c4f7e14ebdf425653d13bd3"
+  integrity sha512-GH/X/hYt+x5hOat4LMnCqMd8r5Cv78heOMIJn1hr7QPPBqfeC6p89Y78+WB9yGDvfpCvgasfmWLzNzEioOUD9Q==
   dependencies:
-    cliui "^5.0.0"
-    find-up "^3.0.0"
+    cliui "^6.0.0"
+    decamelize "^1.2.0"
+    find-up "^4.1.0"
     get-caller-file "^2.0.1"
     require-directory "^2.1.1"
     require-main-filename "^2.0.0"
     set-blocking "^2.0.0"
-    string-width "^3.0.0"
+    string-width "^4.2.0"
     which-module "^2.0.0"
     y18n "^4.0.0"
-    yargs-parser "^13.1.1"
+    yargs-parser "^16.1.0"
 
 yargs@^7.0.0:
   version "7.1.0"

From 4d6dd4553c3656c059349b8bedf9b41a4dffa1ff Mon Sep 17 00:00:00 2001
From: Mark Keller <7525285+keller-mark@users.noreply.github.com>
Date: Fri, 27 Dec 2019 17:42:50 -0500
Subject: [PATCH 3/5] More two adoption. > half plot components, all axis
 components

---
 examples-src/App.vue                          |  13 ++
 src/components/axes/Axis.vue                  |   2 +-
 src/components/axes/DendrogramAxis.vue        | 213 +++++++++++-------
 src/components/axes/GenomeAxis.vue            |  46 ++--
 src/components/plots/BarPlot.vue              |  44 ++--
 src/components/plots/BoxPlot.vue              | 101 +++++----
 src/components/plots/CountBarPlot.vue         |  48 ++--
 .../plots/DoubleStratifiedBoxPlot.vue         |  98 ++++----
 .../plots/DoubleStratifiedScatterPlot.vue     |  60 ++---
 .../plots/DoubleStratifiedSinaPlot.vue        |  59 ++---
 src/components/plots/GenomeMultiTrackPlot.vue |  62 ++---
 src/components/plots/GenomeScatterPlot.vue    |  42 ++--
 src/components/plots/GenomeStackedBarPlot.vue |  41 ++--
 src/components/plots/GenomeTrackPlot.vue      |  60 ++---
 .../plots/HierarchicalMultiTrackPlot.vue      |  40 ++--
 src/components/plots/ScatterPlot.vue          |  20 +-
 src/components/plots/StackedBarPlot.vue       |  23 +-
 src/components/plots/StratifiedSinaPlot.vue   |  20 +-
 18 files changed, 581 insertions(+), 411 deletions(-)

diff --git a/examples-src/App.vue b/examples-src/App.vue
index fe0ee87..b288470 100755
--- a/examples-src/App.vue
+++ b/examples-src/App.vue
@@ -135,6 +135,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="100"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -171,6 +172,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="100"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -209,6 +211,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="100"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -248,6 +251,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="100"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -284,6 +288,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="50"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -380,6 +385,7 @@
       :pMarginLeft="150"
       :pMarginRight="20"
       :pMarginBottom="80"
+      :showDownloadButton="true"
     > 
       <Axis
         slot="axisLeft"
@@ -419,6 +425,7 @@
       :pMarginLeft="150"
       :pMarginRight="20"
       :pMarginBottom="80"
+      :showDownloadButton="true"
     > 
       <Axis
         slot="axisLeft"
@@ -485,6 +492,7 @@
       :pMarginLeft="180"
       :pMarginRight="20"
       :pMarginBottom="200"
+      :showDownloadButton="true"
     >
       <DendrogramAxis
         slot="axisTop"
@@ -535,6 +543,7 @@
       :pMarginLeft="20"
       :pMarginRight="20"
       :pMarginBottom="80"
+      :showDownloadButton="true"
     > 
       <GenomeTrackPlot
         slot="plot"
@@ -565,6 +574,7 @@
       :pMarginLeft="150"
       :pMarginRight="20"
       :pMarginBottom="80"
+      :showDownloadButton="true"
     > 
       <Axis
         slot="axisLeft"
@@ -664,6 +674,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="180"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -748,6 +759,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="180"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -831,6 +843,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="180"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
diff --git a/src/components/axes/Axis.vue b/src/components/axes/Axis.vue
index ba188c4..edeedc2 100644
--- a/src/components/axes/Axis.vue
+++ b/src/components/axes/Axis.vue
@@ -316,7 +316,7 @@ export default {
              * Create the SVG elements
              */
             
-            var container;
+            let container;
             if(d3Node) {
                 container = d3Node;
             } else {
diff --git a/src/components/axes/DendrogramAxis.vue b/src/components/axes/DendrogramAxis.vue
index b9b3035..20e73b8 100644
--- a/src/components/axes/DendrogramAxis.vue
+++ b/src/components/axes/DendrogramAxis.vue
@@ -1,26 +1,46 @@
 <template>
-    <div 
-        :id="this.axisElemID" 
-        class="vdp-axis" 
-        :style="{
-            'height': this.computedHeight + 'px', 
-            'width': this.computedWidth + 'px',
-            'top': this.computedTop + 'px',
-            'left': this.computedLeft + 'px'
-        }"></div>
+    <div>
+        <canvas 
+            :id="this.axisElemID" 
+            class="vdp-axis" 
+            :style="{
+                'height': this.computedHeight + 'px', 
+                'width': this.computedWidth + 'px',
+                'top': this.computedTop + 'px',
+                'left': this.computedLeft + 'px'
+            }"
+        ></canvas>
+        <div v-show="this.highlightX !== null && this.highlightY != null" 
+            :style="{
+                'position': 'absolute',
+                'pointer-events': 'none',
+                'height': '14px', 
+                'width': '14px',
+                'border-radius': '50%',
+                'opacity': 0.6,
+                'background-color': '#555',
+                'top': (this.computedTop + this.highlightY - 7) + 'px',
+                'left': (this.computedLeft + this.highlightX - 7) + 'px'
+            }"
+            class="vdp-axis-highlight"
+        ></div>
+    </div>
 </template>
 
 <script>
+import Two from 'two.js';
 import { select as d3_select } from 'd3-selection';
 import { cluster as d3_cluster, hierarchy as d3_hierarchy } from 'd3-hierarchy';
-
-import { svgAsPngUri } from 'save-svg-as-png';
+import { mouse as d3_mouse } from 'd3';
+import debounce from 'lodash/debounce';
+import { TOOLTIP_DEBOUNCE } from './../../constants.js';
 
 import AbstractScale from './../../scales/AbstractScale.js';
 import DataContainer from './../../data/DataContainer.js';
 import HistoryEvent from './../../history/HistoryEvent.js';
 import HistoryStack, { computedParam } from './../../history/HistoryStack.js';
-import { filterHierarchy } from '../../helpers.js';
+import { filterHierarchy, getDelaunay } from '../../helpers.js';
+
 
 import { EVENT_TYPES, EVENT_SUBTYPES } from './../../history/base-events.js';
 
@@ -100,7 +120,8 @@ export default {
     },
     data() {
         return {
-            
+            highlightX: null,
+            highlightY: null,
         }
     },
     computed: {
@@ -202,7 +223,15 @@ export default {
         removeAxis() {
             d3_select(this.axisSelector).select("svg").remove();
         },
-        drawAxis() {
+        tooltip(x, y) {
+            this.highlightX = x;
+            this.highlightY = y;
+        },
+        tooltipDestroy() {
+            this.highlightX = null;
+            this.highlightY = null;
+        },
+        drawAxis(d3Node) {
             const vm = this;
             vm.removeAxis();
 
@@ -239,85 +268,115 @@ export default {
             const root = d3_hierarchy(hierarchyData);
             tree(root);
 
+            const descendants = root.descendants();
+
 
             /*
                 Draw the dendrogram
             */
-           const container = d3_select(vm.axisSelector)
-                .append("svg")
-                    .attr("width", vm.computedWidth)
-                    .attr("height", vm.computedHeight);
-            
-            const gTree = container.append("g")
-                .attr("transform", "translate(" + vm.computedTranslateX + "," + vm.computedTranslateY + ")");
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.axisSelector);
+            }
 
+            const canvasNode = canvas.node();
+
+            const two = new Two({ 
+                width: vm.computedWidth, 
+                height: vm.computedHeight, 
+                domElement: canvasNode
+            });
 
             let pathFunction;
             if(this._side === SIDES.TOP) {
                 pathFunction = (d) => {
-                    return "M" + d.parent.x + "," + d.parent.y
-                        + "H" + d.x
-                        + "M" + d.x + "," + d.y
-                        + "V" + d.parent.y;
+                    return two.makePath(
+                        d.parent.x + vm.computedTranslateX, d.parent.y + vm.computedTranslateY, // M
+                        d.x + vm.computedTranslateX, d.parent.y + vm.computedTranslateY, // H d.x
+                        d.x + vm.computedTranslateX, d.y + vm.computedTranslateY, // M
+                        d.x + vm.computedTranslateX, d.parent.y + vm.computedTranslateY // V d.parent.y
+                    );
                 }
             } else if(this._side === SIDES.BOTTOM) {
                 pathFunction = (d) => {
-                    return "M" + d.parent.x + "," + (vm.pMarginBottom - d.parent.y)
-                        + "H" + d.x
-                        + "M" + d.x + "," + (vm.pMarginBottom - d.y)
-                        + "V" + (vm.pMarginBottom - d.parent.y);
+                    return two.makePath(
+                        d.parent.x + vm.computedTranslateX, (vm.pMarginBottom - d.parent.y) + vm.computedTranslateY, // M
+                        d.x + vm.computedTranslateX, (vm.pMarginBottom - d.parent.y) + vm.computedTranslateY, // H d.x
+                        d.x + vm.computedTranslateX, (vm.pMarginBottom - d.y) + vm.computedTranslateY, // M
+                        d.x + vm.computedTranslateX, (vm.pMarginBottom - d.parent.y) + vm.computedTranslateY // V (vm.pMarginBottom - d.parent.y)
+                    );
                 }
             }
 
-            gTree.selectAll(".link")
-                .data(root.descendants().slice(1))
-                .enter().append("path")
-                .attr("class", "link")
-                .attr("d", pathFunction)
-                .attr("fill", "none")
-                .attr("stroke", "#555")
-                .attr("stroke-opacity", 0.6)
-                .attr("stroke-width", "1.5px");
-            
             let nodeTransformFunction;
             if(this._side === SIDES.TOP) {
                 nodeTransformFunction = (d) => { 
-                    return "translate(" + d.x + "," + d.y + ")"; 
+                    return [d.x + vm.computedTranslateX, d.y + vm.computedTranslateY]; 
                 }
             } else if(this._side === SIDES.BOTTOM) {
                 nodeTransformFunction = (d) => { 
-                    return "translate(" + d.x + "," + (vm.pMarginBottom - d.y) + ")"; 
+                    return [d.x + vm.computedTranslateX, (vm.pMarginBottom - d.y) + vm.computedTranslateY];
                 }
             }
 
-            const nodes = gTree.selectAll(".node")
-                .data(root.descendants())
-                .enter().append("g")
-                .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
-                .attr("transform", nodeTransformFunction);
-
-            /* nodes.append("text")
-                .style("display", (d) => { return d.children ? 'none' : 'normal'; })
-                .text((d) => { return d.data.name; })
-                .style("font", "10px sans-serif")
-                .style("text-anchor", "end")
-                .attr("dx", "-.6em")
-                .attr("dy", ".6em")
-                .attr("transform", "rotate(-65)"); */
-    
-            // filtering buttons
-            nodes.append("circle")
-                .attr("r", 7)
-                .attr("fill", "#555")
-                .attr("fill-opacity", 0)
-                .style("cursor", "pointer")
-                .on("mouseover", function() {
-                    d3_select(this).attr("fill-opacity", 0.6);
-                })
-                .on("mouseleave", function() {
-                    d3_select(this).attr("fill-opacity", 0);
-                })
-                .on("click", (d) => {
+            const nodePoints = [];
+
+            descendants.forEach((d, i) => {
+                if(i > 0) {
+                    const path = pathFunction(d);
+                    path.noFill();
+                    path.stroke = "#555";
+                    path.opacity = 0.6;
+                    path.linewidth = 1.5;
+                }
+                nodePoints.push(nodeTransformFunction(d));
+            });
+            
+
+            two.update();
+
+            if(d3Node) {
+                return;
+            }
+
+            const delaunay = getDelaunay(nodePoints, true);
+
+            /*
+             * Listen for mouse events
+             */
+            const getDataFromMouse = (mouseX, mouseY) => {
+                const i = delaunay.find(mouseX, mouseY);
+                return descendants[i];
+            };
+
+            const debouncedTooltipDestroy = debounce(vm.tooltipDestroy, TOOLTIP_DEBOUNCE);
+            canvas.on("mousemove", () => {
+                const mouse = d3_mouse(canvasNode);
+                const mouseX = mouse[0];
+                const mouseY = mouse[1];
+
+                const node = getDataFromMouse(mouseX, mouseY);
+
+                if(node) {
+                    const nodePoint = nodeTransformFunction(node);
+                    vm.tooltip(nodePoint[0], nodePoint[1]); 
+                } else {
+                    debouncedTooltipDestroy(node);
+                }
+            })
+            .on("mouseleave", vm.tooltipDestroy);
+
+            canvas.on("click", () => {
+                const mouse = d3_mouse(canvasNode);
+                const mouseX = mouse[0];
+                const mouseY = mouse[1];
+
+                const node = getDataFromMouse(mouseX, mouseY);
+
+                if(node) {
+                    /* 
                     varScale.sortByHierarchy(vm._hierarchyContainer);
                     stack.push(new HistoryEvent(
                         EVENT_TYPES.SCALE,
@@ -326,24 +385,18 @@ export default {
                         "sortByHierarchy",
                         [computedParam(EVENT_TYPES.DATA, [vm.h])]
                     ));
-                    varScale.filterByHierarchy(vm._hierarchyContainer, d.data.name);
+                    */
+                    varScale.filterByHierarchy(vm._hierarchyContainer, node.data.name);
                     stack.push(new HistoryEvent(
                         EVENT_TYPES.SCALE,
                         EVENT_SUBTYPES.SCALE_DOMAIN_FILTER,
                         vm.variable,
                         "filterByHierarchy",
-                        [computedParam(EVENT_TYPES.DATA, [vm.h]), d.data.name]
+                        [computedParam(EVENT_TYPES.DATA, [vm.h]), node.data.name]
                     ));
-                });
-            
-        },
-        downloadAxis() {
-            const node = d3_select(this.axisSelector).select("svg").node();
-            return new Promise((resolve, reject) => {
-                svgAsPngUri(node, {}, (uri) => {
-                    resolve(uri);
-                });
+                }
             });
+            
         }
     }
 }
diff --git a/src/components/axes/GenomeAxis.vue b/src/components/axes/GenomeAxis.vue
index cec428e..584e91c 100644
--- a/src/components/axes/GenomeAxis.vue
+++ b/src/components/axes/GenomeAxis.vue
@@ -9,7 +9,7 @@
             'left': this.computedLeft + 'px'
         }"
     >
-        <svg :width="this.computedWidth" :height="this.computedHeight"></svg>
+        <svg :width="this.computedWidth" :height="this.computedHeight" xmlns="http://www.w3.org/2000/svg"></svg>
         <div class="vdp-genome-input" :style="{ 'left': this.computedTranslateX + 'px' }">
             <label>Chromosome</label>&nbsp;
             <select @change="onChromosomeChange">
@@ -343,7 +343,7 @@ export default {
         removeAxis() {
             d3_select(this.axisSelector).select("svg").selectAll("g").remove();
         },
-        drawAxis() {
+        drawAxis(d3Node) {
             const vm = this;
             vm.removeAxis();
             
@@ -407,9 +407,13 @@ export default {
             /*
              * Create the SVG elements
              */
-
-            const container = d3_select(vm.axisSelector).select("svg");
-            
+            let container;
+            if(d3Node) {
+                container = d3Node;
+            } else {
+                container = d3_select(vm.axisSelector).select("svg");
+            }
+                        
             const containerZoomedIn = container.append("g")
                     .attr("class", "axis-zoomed-in")
                     .attr("transform", "translate(" + vm.computedTranslateX + "," + vm.computedTranslateY + ")");
@@ -423,13 +427,23 @@ export default {
                     .tickFormat((d) => chromosomeRatioMapFiltered[d])
             );
 
-            
-
             ticksZoomedIn.selectAll("text")	
                     .style("text-anchor", "middle");
             
             // Get the width/height of the zoomed-in axis, before removing the text
-            const axisBboxZoomedIn = container.select(".axis-zoomed-in").node().getBBox();
+            
+            let axisBboxZoomedIn;
+            try {
+                axisBboxZoomedIn = container.select(".axis-zoomed-in").node().getBBox();
+                if(d3Node) {
+                    throw new Error("no bbox, use catch block");
+                }
+            } catch(e) {
+                axisBboxZoomedIn = {
+                    width: 0,
+                    height: vm.computedHeight/2,
+                };
+            }
 
             if(vm.isSingleChromosome) {
                 let selectedChromosome = vm._varScale.chromosomesFiltered[0];
@@ -450,12 +464,10 @@ export default {
                     .style("display", "none")
             }
             
-            
 
             /*
              * The zoomed-out axis
              */
-
             const betweenAxisMargin = 8;
 
             let zoomedOutTranslateX = vm.computedTranslateX;
@@ -471,11 +483,19 @@ export default {
                     .attr("transform", "translate(" + zoomedOutTranslateX + "," + zoomedOutTranslateY + ")");
             
             const labelText = containerLabel.append("text")
+                .style("font-family", "Avenir")
                 .style("text-anchor", "middle")
                 .text(varScale.name);
 
-            const labelTextBbox = labelText.node().getBBox();
-
+            let labelTextBbox;
+            try {
+                labelTextBbox = labelText.node().getBBox();
+            } catch(e) {
+                labelTextBbox = {
+                    width: 0,
+                    height: 0,
+                };
+            }
 
 
             let labelX, labelY, labelRotate;
@@ -505,7 +525,7 @@ export default {
         },
         downloadAxis() {
             const node = d3_select(this.axisSelector).select("svg").node();
-            return new Promise((resolve, reject) => {
+            return new Promise((resolve) => {
                 svgAsPngUri(node, {}, (uri) => {
                     resolve(uri);
                 });
diff --git a/src/components/plots/BarPlot.vue b/src/components/plots/BarPlot.vue
index 18a226b..a5d6ca8 100644
--- a/src/components/plots/BarPlot.vue
+++ b/src/components/plots/BarPlot.vue
@@ -54,6 +54,7 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleBand as d3_scaleBand, scaleLinear as d3_scaleLinear, scaleLog as d3_scaleLog } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
@@ -207,7 +208,7 @@ export default {
             this.highlightX1 = null;
             this.highlightX2 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._xScale.isLoading || vm._yScale.isLoading) {
@@ -241,21 +242,28 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
+
+            const canvasNode = canvas.node();
+
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             const canvasHidden = d3_select(this.hiddenPlotSelector);
             const contextHidden = canvasHidden.node().getContext('2d');
 
-            const ratio = getRetinaRatio(context);
+            const ratio = getRetinaRatio(contextHidden);
             const scaledWidth = vm.pWidth * ratio;
             const scaledHeight = vm.pHeight * ratio;
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
-
             canvasHidden
                 .attr("width", scaledWidth)
                 .attr("height", scaledHeight);
@@ -303,22 +311,28 @@ export default {
                 colToNode[col] = { "x": d[vm.x], "y": d[vm.y] };
                 contextHidden.fillStyle = col;
                 
+                let height = vm.pHeight - y(d[vm.y]) - heightMinusYOfZero;
+                const rect = two.makeRectangle(x(d[vm.x]) + (barMarginX/2) + (barWidth - barMarginX)/2, y(d[vm.y]) + height/2, barWidth - barMarginX, height);
                 if(vm.barColor !== undefined) {
-                    context.fillStyle = vm.barColor;
+                    rect.fill = vm.barColor;
                 } else {
-                    context.fillStyle = xScale.color(d[vm.x]);
+                    rect.fill = xScale.color(d[vm.x]);
                 }
-
-                let height = vm.pHeight - y(d[vm.y]) - heightMinusYOfZero;
-                context.fillRect(x(d[vm.x]) + (barMarginX/2), y(d[vm.y]), barWidth - barMarginX, height);
+                rect.noStroke();
                 
                 contextHidden.fillRect(x(d[vm.x]), 0, barWidth, vm.pHeight);
             });
+
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
             
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
 
             const getDataFromMouse = (mouseX, mouseY) => {
                 // Get the corresponding pixel color on the hidden canvas
diff --git a/src/components/plots/BoxPlot.vue b/src/components/plots/BoxPlot.vue
index d258ab6..f6470b0 100644
--- a/src/components/plots/BoxPlot.vue
+++ b/src/components/plots/BoxPlot.vue
@@ -52,6 +52,7 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleLinear as d3_scaleLinear, scaleQuantile as d3_scaleQuantile } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
@@ -196,7 +197,7 @@ export default {
 
             // Destroy all highlights here
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._yScale.isLoading || (vm.hasO && vm._oScale.isLoading)) {
@@ -221,21 +222,28 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
+
+            const canvasNode = canvas.node();
+
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             const canvasHidden = d3_select(this.hiddenPlotSelector);
             const contextHidden = canvasHidden.node().getContext('2d');
 
-            const ratio = getRetinaRatio(context);
+            const ratio = getRetinaRatio(contextHidden);
             const scaledWidth = vm.pWidth * ratio;
             const scaledHeight = vm.pHeight * ratio;
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
-
             canvasHidden
                 .attr("width", scaledWidth)
                 .attr("height", scaledHeight);
@@ -272,11 +280,8 @@ export default {
             const boxWidth = (barWidth / 2);
             const boxMargin = barWidth / 4;
 
-            context.fillStyle = "#B8CDE3";
-
             const diamondSize = vm.pointSize + 2;
 
-            
             let boxData = data.map((el) => el[vm.variable] || 0);
             let quantile = d3_scaleQuantile()
                 .domain(boxData)
@@ -298,49 +303,46 @@ export default {
             let boxX2 = boxX1 + boxWidth;
             let boxX = boxX1 + (boxWidth / 2)
 
-            context.strokeStyle = "black";
-            context.beginPath();
-            // Upper Fence
-            context.moveTo(boxX1,y(upperFence));
-            context.lineTo(boxX2,y(upperFence));
-            // Vertical Line
-            context.moveTo(boxX1 + (boxWidth / 2),y(upperFence));
-            context.lineTo(boxX1 + (boxWidth / 2),y(lowerFence));
-            // Lower Fence
-            context.moveTo(boxX1,y(lowerFence));
-            context.lineTo(boxX2,y(lowerFence));
-
-            context.stroke();
-
-            // Draw the box rect
-            context.strokeRect(boxX1, y(q3), boxWidth, y(q1) - y(q3));
-            context.fillRect(boxX1, y(q3), boxWidth, y(q1) - y(q3));
-
-            // Draw the median line
-            context.beginPath();
-            context.moveTo(boxX1, y(median));
-            context.lineTo(boxX2, y(median));
-            context.stroke();
-
-            // Draw the mean diamond
-            context.beginPath();
-            context.moveTo(boxX - (diamondSize/2), y(mean));
-            context.lineTo(boxX, y(mean) - (diamondSize/2));
-            context.lineTo(boxX + (diamondSize/2), y(mean));
-            context.lineTo(boxX, y(mean) + (diamondSize/2));
-            context.lineTo(boxX - (diamondSize/2), y(mean));
-            context.stroke();
-
-            // Draw the outliers
+            const verticalLine = two.makeLine(boxX1 + (boxWidth / 2),y(upperFence), boxX1 + (boxWidth / 2),y(lowerFence));
+            verticalLine.stroke = "black";
+
+            const boxRect = two.makeRectangle(boxX1 + boxWidth/2, y(q3) + (y(q1) - y(q3))/2, boxWidth, y(q1) - y(q3));
+            boxRect.linewidth = 1;
+            boxRect.fill = "#B8CDE3";
+            boxRect.stroke = "black";
+
+            const upperFenceLine = two.makeLine(boxX1,y(upperFence), boxX2,y(upperFence));
+            upperFenceLine.stroke = "black";
+
+            const lowerFenceLine = two.makeLine(boxX1,y(lowerFence), boxX2,y(lowerFence));
+            lowerFenceLine.stroke = "black";
+
+            const medianLine = two.makeLine(boxX1,y(median), boxX2,y(median));
+            medianLine.stroke = "black";
+
+            const meanDiamond = two.makeRectangle(boxX,y(mean), diamondSize-2, diamondSize-2);
+            meanDiamond.stroke = "black";
+            meanDiamond.noFill();
+            meanDiamond.rotation = Math.PI/4;
+
             if(vm.drawOutliers) {
                 let outliers = boxData.filter((el) => (el > upperFence) || (el < lowerFence));
                 outliers.forEach((outlier) => {
-                    context.beginPath();
-                    context.arc(boxX, y(outlier), (vm.pointSize / 2), 0, 2*Math.PI);
-                    context.stroke();
+                    const circle = two.makeCircle(boxX, y(outlier), (vm.pointSize / 2));
+                    circle.linewidth = 1;
+                    circle.stroke = "black";
+                    circle.noFill();
                 });
             }
 
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
+            
+
             // Map data to colors
             const col = genColor();
             colToNode[col] = {
@@ -357,7 +359,6 @@ export default {
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
 
             const getDataFromMouse = (mouseX, mouseY) => {
                 // Get the corresponding pixel color on the hidden canvas
diff --git a/src/components/plots/CountBarPlot.vue b/src/components/plots/CountBarPlot.vue
index e06d7d4..ef56f88 100644
--- a/src/components/plots/CountBarPlot.vue
+++ b/src/components/plots/CountBarPlot.vue
@@ -54,6 +54,7 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleBand as d3_scaleBand, scaleLinear as d3_scaleLinear, scaleLog as d3_scaleLog } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
@@ -221,7 +222,7 @@ export default {
             this.highlightX1 = null;
             this.highlightX2 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._xScale.isLoading || vm._yScale.isLoading || vm._oScale.isLoading) {
@@ -256,21 +257,28 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
+
+            const canvasNode = canvas.node();
+
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             const canvasHidden = d3_select(this.hiddenPlotSelector);
             const contextHidden = canvasHidden.node().getContext('2d');
 
-            const ratio = getRetinaRatio(context);
+            const ratio = getRetinaRatio(contextHidden);
             const scaledWidth = vm.pWidth * ratio;
             const scaledHeight = vm.pHeight * ratio;
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
-
             canvasHidden
                 .attr("width", scaledWidth)
                 .attr("height", scaledHeight);
@@ -314,23 +322,29 @@ export default {
                 const col = genColor();
                 colToNode[col] = { "x": xVal, "y": yVal };
                 contextHidden.fillStyle = col;
-                
+
+                let height = vm.pHeight - y(yVal);
+                const rect = two.makeRectangle(x(xVal) + (barMarginX/2) + (barWidth - barMarginX)/2, y(yVal) + height/2, barWidth - barMarginX, height);
+                rect.noStroke();
                 if(vm.barColor !== undefined) {
-                    context.fillStyle = vm.barColor;
+                    rect.fill = vm.barColor;
                 } else {
-                    context.fillStyle = xScale.color(xVal);
+                    rect.fill = xScale.color(xVal);
                 }
-
-                let height = vm.pHeight - y(yVal);
-                context.fillRect(x(xVal) + (barMarginX/2), y(yVal), barWidth - barMarginX, height);
+                
                 contextHidden.fillRect(x(xVal), 0, barWidth, vm.pHeight);
             });
+
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
             
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 // Get the corresponding pixel color on the hidden canvas
                 const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
diff --git a/src/components/plots/DoubleStratifiedBoxPlot.vue b/src/components/plots/DoubleStratifiedBoxPlot.vue
index 5d8cc7d..fbbb6d8 100644
--- a/src/components/plots/DoubleStratifiedBoxPlot.vue
+++ b/src/components/plots/DoubleStratifiedBoxPlot.vue
@@ -102,6 +102,7 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleLinear as d3_scaleLinear, scaleQuantile as d3_scaleQuantile, scaleBand as d3_scaleBand } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
@@ -340,7 +341,7 @@ export default {
             this.highlightX1Secondary = null;
             this.highlightX2Secondary = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || 
@@ -390,21 +391,28 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
+
+            const canvasNode = canvas.node();
+
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             const canvasHidden = d3_select(this.hiddenPlotSelector);
             const contextHidden = canvasHidden.node().getContext('2d');
 
-            const ratio = getRetinaRatio(context);
+            const ratio = getRetinaRatio(contextHidden);
             const scaledWidth = vm.pWidth * ratio;
             const scaledHeight = vm.pHeight * ratio;
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
-
             canvasHidden
                 .attr("width", scaledWidth)
                 .attr("height", scaledHeight);
@@ -447,7 +455,6 @@ export default {
             xScale.domainFiltered.forEach((boxVar, xi) => {
                 x2Scale.domainFiltered.forEach((boxVarSecondary) => {
                     const x = x2[xi];
-                    context.fillStyle = x2Scale.color(boxVarSecondary);
 
                     let boxData = data.filter((dEl) => {
                         const sEl = stratificationData.find((sEl) => sEl[vm.o] === dEl[vm.o]);
@@ -475,46 +482,38 @@ export default {
                     let boxX2 = boxX1 + boxWidth;
                     let boxX = boxX1 + (boxWidth / 2);
 
-                    context.strokeStyle = "black";
-                    context.beginPath();
-                    // Upper Fence
-                    context.moveTo(boxX1, y(upperFence));
-                    context.lineTo(boxX2, y(upperFence));
-                    // Vertical Line
-                    context.moveTo(boxX1 + (boxWidth / 2), y(upperFence));
-                    context.lineTo(boxX1 + (boxWidth / 2), y(lowerFence));
-                    // Lower Fence
-                    context.moveTo(boxX1, y(lowerFence));
-                    context.lineTo(boxX2, y(lowerFence));
-
-                    context.stroke();
-
-                    // Draw the box rect
-                    context.strokeRect(boxX1, y(q3), boxWidth, y(q1) - y(q3));
-                    context.fillRect(boxX1, y(q3), boxWidth, y(q1) - y(q3));
-
-                    // Draw the median line
-                    context.beginPath();
-                    context.moveTo(boxX1, y(median));
-                    context.lineTo(boxX2, y(median));
-                    context.stroke();
-
-                    // Draw the mean diamond
-                    context.beginPath();
-                    context.moveTo(boxX - (diamondSize/2), y(mean));
-                    context.lineTo(boxX, y(mean) - (diamondSize/2));
-                    context.lineTo(boxX + (diamondSize/2), y(mean));
-                    context.lineTo(boxX, y(mean) + (diamondSize/2));
-                    context.lineTo(boxX - (diamondSize/2), y(mean));
-                    context.stroke();
+                    if(boxData.length > 0) {
+                        const verticalLine = two.makeLine(boxX1 + (boxWidth / 2),y(upperFence), boxX1 + (boxWidth / 2),y(lowerFence));
+                        verticalLine.stroke = "black";
+
+                        const boxRect = two.makeRectangle(boxX1 + boxWidth/2, y(q3) + (y(q1) - y(q3))/2, boxWidth, y(q1) - y(q3));
+                        boxRect.linewidth = 1;
+                        boxRect.fill = x2Scale.color(boxVarSecondary);
+                        boxRect.stroke = "black";
+
+                        const upperFenceLine = two.makeLine(boxX1,y(upperFence), boxX2,y(upperFence));
+                        upperFenceLine.stroke = "black";
+
+                        const lowerFenceLine = two.makeLine(boxX1,y(lowerFence), boxX2,y(lowerFence));
+                        lowerFenceLine.stroke = "black";
+
+                        const medianLine = two.makeLine(boxX1,y(median), boxX2,y(median));
+                        medianLine.stroke = "black";
+
+                        const meanDiamond = two.makeRectangle(boxX,y(mean), diamondSize-2, diamondSize-2);
+                        meanDiamond.stroke = "black";
+                        meanDiamond.noFill();
+                        meanDiamond.rotation = Math.PI/4;
+                    }
 
                     // Draw the outliers
                     if(vm.drawOutliers) {
                         let outliers = boxData.filter((el) => (el > upperFence) || (el < lowerFence));
                         outliers.forEach((outlier) => {
-                            context.beginPath();
-                            context.arc(boxX, y(outlier), (vm.pointSize / 2), 0, 2*Math.PI);
-                            context.stroke();
+                            const circle = two.makeCircle(boxX, y(outlier), (vm.pointSize / 2));
+                            circle.linewidth = 1;
+                            circle.stroke = "black";
+                            circle.noFill();
                         });
                     }
 
@@ -536,12 +535,17 @@ export default {
                     contextHidden.fillRect(x(boxVarSecondary), 0, barWidth, vm.pHeight);
                 });
             });
+
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
             
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 // Get the corresponding pixel color on the hidden canvas
                 const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
diff --git a/src/components/plots/DoubleStratifiedScatterPlot.vue b/src/components/plots/DoubleStratifiedScatterPlot.vue
index 5d595e4..fa50161 100644
--- a/src/components/plots/DoubleStratifiedScatterPlot.vue
+++ b/src/components/plots/DoubleStratifiedScatterPlot.vue
@@ -63,12 +63,13 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleLinear as d3_scaleLinear } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
 import debounce from 'lodash/debounce';
 import { TOOLTIP_DEBOUNCE } from './../../constants.js';
-import { getRetinaRatio, getDelaunay } from './../../helpers.js';
+import { getDelaunay } from './../../helpers.js';
 
 import AbstractScale from './../../scales/AbstractScale.js';
 import ContinuousScale from './../../scales/ContinuousScale.js';
@@ -301,7 +302,7 @@ export default {
             this.highlightX1Secondary = null;
             this.highlightY1 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || 
@@ -341,17 +342,21 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
+
+            const canvasNode = canvas.node();
 
-            const ratio = getRetinaRatio(context);
-            const scaledWidth = vm.pWidth * ratio;
-            const scaledHeight = vm.pHeight * ratio;
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
 
              /*
              * Prepare for interactivity
@@ -362,21 +367,11 @@ export default {
             /*
              * Draw the points
              */
-            if(vm.strokeColor !== undefined) {
-                context.strokeStyle = vm.strokeColor;
-            }
             data.forEach((d) => {
                 let sEl = stratificationData.find((sEl) => sEl[vm.o] === d[vm.o]);
                 let sEl2 = stratificationData2.find((sEl) => sEl[vm.o] === d[vm.o]);
                 if(sEl !== undefined && sEl2 !== undefined && !AbstractScale.isUnknown(sEl[vm.x]) && !AbstractScale.isUnknown(sEl2[vm.x2])) {
                     
-                    context.fillStyle = x2Scale.color(sEl2[vm.x2]);
-                    if(vm.strokeColor === undefined) {
-                        context.strokeStyle = x2Scale.color(sEl2[vm.x2]);
-                    }
-                    
-                    context.beginPath();
-                    context.arc(x(sEl[vm.x]), y(d[vm.variable]), vm.pointSize, 0, 2*Math.PI);
                     points.push([x(sEl[vm.x]), y(d[vm.variable])]);
                     pointsData.push({
                         "y": d[vm.variable],
@@ -384,12 +379,27 @@ export default {
                         "x": sEl[vm.x],
                         "x2": sEl2[vm.x2]
                     });
-                    context.stroke();
-                    if(vm.fillPoints) {
-                        context.fill();
+
+                    const circle = two.makeCircle(x(sEl[vm.x]), y(d[vm.variable]), vm.pointSize);
+                    circle.fill = x2Scale.color(sEl2[vm.x2]);
+                    circle.linewidth = 0.5;
+                    if(vm.strokeColor !== undefined) {
+                        circle.stroke = vm.strokeColor;
+                    } else {
+                        circle.stroke = x2Scale.color(sEl2[vm.x2]);
+                    }
+                    if(!vm.fillPoints) {
+                        circle.noFill();
                     }
                 }
             });
+
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
             
             /*
              * More prepare for interactivity
@@ -399,8 +409,6 @@ export default {
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 const i = delaunay.find(mouseX, mouseY);
                 return pointsData[i];
diff --git a/src/components/plots/DoubleStratifiedSinaPlot.vue b/src/components/plots/DoubleStratifiedSinaPlot.vue
index 490dd55..7fe8362 100644
--- a/src/components/plots/DoubleStratifiedSinaPlot.vue
+++ b/src/components/plots/DoubleStratifiedSinaPlot.vue
@@ -112,6 +112,7 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleLinear as d3_scaleLinear, scaleQuantile as d3_scaleQuantile, scaleBand as d3_scaleBand } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
@@ -119,7 +120,7 @@ import debounce from 'lodash/debounce';
 import { min as d3_min, max as d3_max, mean as d3_mean, histogram as d3_histogram } from 'd3-array';
 
 import { TOOLTIP_DEBOUNCE } from './../../constants.js';
-import { getRetinaRatio, seededRandom, getDelaunay } from './../../helpers.js';
+import { seededRandom, getDelaunay } from './../../helpers.js';
 
 
 import AbstractScale from './../../scales/AbstractScale.js';
@@ -385,7 +386,7 @@ export default {
             this.highlightX2Secondary = null;
             this.highlightY1 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._stratificationDataContainer.isLoading || vm._stratificationDataContainer2.isLoading || vm._xScale.isLoading || vm._x2Scale.isLoading || vm._yScale.isLoading || vm._oScale.isLoading) {
@@ -433,17 +434,20 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
 
-            const ratio = getRetinaRatio(context);
-            const scaledWidth = vm.pWidth * ratio;
-            const scaledHeight = vm.pHeight * ratio;
+            const canvasNode = canvas.node();
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             /*
              * Get the random number generator.
@@ -463,18 +467,10 @@ export default {
             const boxWidth = (barWidthSecondary / 2);
             const boxMargin = barWidthSecondary / 4;
 
-            if(vm.strokeColor !== undefined) {
-                context.strokeStyle = vm.strokeColor;
-            }
             xScale.domainFiltered.forEach((boxVar, xi) => {
                 x2Scale.domainFiltered.forEach((boxVarSecondary) => {
                     const x = x2[xi];
 
-                    if(vm.strokeColor === undefined) {
-                        context.strokeStyle = x2Scale.color(boxVarSecondary);
-                    }
-                    context.fillStyle = x2Scale.color(boxVarSecondary);
-
                     let boxData = data.filter((dEl) => {
                         let sEl = stratificationData.find((sEl) => sEl[vm.o] === dEl[vm.o]);
                         let sEl2 = stratificationData2.find((sEl) => sEl[vm.o] === dEl[vm.o]);
@@ -520,13 +516,18 @@ export default {
 
                     bins.forEach((binData) => {
                         binData.forEach((d) => {
-                            context.beginPath();
                             let xVal = innerX(-binData.length)+random()*2*(innerX(binData.length)-innerXZero);
                             let yVal = y(d[vm.variable]);
-                            context.arc(xVal, yVal, vm.pointSize, 0, 2*Math.PI);
-                            context.stroke();
-                            if(vm.fillPoints) {
-                                context.fill(); 
+                            const circle = two.makeCircle(xVal, yVal, vm.pointSize);
+                            circle.linewidth = 0.5;
+                            if(vm.strokeColor !== undefined) {
+                                circle.stroke = vm.strokeColor;
+                            } else {
+                                circle.stroke = x2Scale.color(boxVarSecondary);
+                            }
+                            circle.fill = x2Scale.color(boxVarSecondary);
+                            if(!vm.fillPoints) {
+                                circle.noFill(); 
                             }
 
                             points.push([xVal, yVal]); // For Delaunay
@@ -539,14 +540,20 @@ export default {
                     });
                 });
             });
+
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
             
+
             const delaunay = getDelaunay(points, false);
 
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 const i = delaunay.find(mouseX, mouseY);
                 return pointsData[i];
diff --git a/src/components/plots/GenomeMultiTrackPlot.vue b/src/components/plots/GenomeMultiTrackPlot.vue
index bdc7efd..39fd602 100644
--- a/src/components/plots/GenomeMultiTrackPlot.vue
+++ b/src/components/plots/GenomeMultiTrackPlot.vue
@@ -61,12 +61,13 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleLinear as d3_scaleLinear, scaleBand as d3_scaleBand } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
 import debounce from 'lodash/debounce';
 import { TOOLTIP_DEBOUNCE, BAR_HEIGHT_MIN, BAR_MARGIN_Y_DEFAULT } from './../../constants.js';
-import { getRetinaRatio, getDelaunay } from './../../helpers.js';
+import { getDelaunay } from './../../helpers.js';
 
 import AbstractScale from './../../scales/AbstractScale.js';
 import GenomeScale from './../../scales/GenomeScale.js';
@@ -287,7 +288,7 @@ export default {
             this.highlightY1 = null;
             this.highlightY2 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._yScale.isLoading || (vm.hasC && vm._cScale.isLoading)) {
@@ -339,21 +340,21 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
 
-          
-            const ratio = getRetinaRatio(context);
-            const scaledWidth = vm.pWidth * ratio;
-            const scaledHeight = vm.pHeight * ratio;
+            const canvasNode = canvas.node();
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
-   
-           
             /*
              * Draw the track
              */
@@ -364,27 +365,38 @@ export default {
             // Draw track backgrounds
             yScale.domainFiltered.forEach((yVal) => {
                 if(vm.backgroundColor !== undefined) {
-                    context.fillStyle = vm.backgroundColor;
-                    context.fillRect(0, y(yVal) + (barMarginY/2), vm.pWidth, barHeight - barMarginY);
+                    const trackBackgroundRect = two.makeRectangle(0 + vm.pWidth/2, y(yVal) + (barMarginY/2) + (barHeight - barMarginY)/2, vm.pWidth, barHeight - barMarginY);
+                    trackBackgroundRect.fill = vm.backgroundColor;
+                    trackBackgroundRect.noStroke();
                 }
+
                 if(vm.lineColor !== undefined) {
-                    context.fillStyle = vm.lineColor;
-                    context.fillRect(0, y(yVal) + (barHeight/2) - 0.5, vm.pWidth, 1);
+                    const trackBackgroundLine = two.makeRectangle(0 + vm.pWidth/2, y(yVal) + (barHeight/2), vm.pWidth, 1);
+                    trackBackgroundLine.fill = vm.lineColor;
+                    trackBackgroundLine.noStroke();
                 }
             });
             // Draw events
             data.forEach((d) => {
+                const xVal = g[d[vm.chromosomeVariable]](d[vm.positionVariable]) - (vm.eventWidth/2);
+                const yVal = y(d[vm.y]);
+                
+                const eventRect = two.makeRectangle(xVal + vm.eventWidth/2, yVal + (barMarginY/2) + (barHeight - barMarginY)/2, vm.eventWidth, barHeight - barMarginY);
+                eventRect.noStroke();
                 if(this.hasC) {
-                    context.fillStyle = cScale.color(d[vm.c]);
+                    eventRect.fill = cScale.color(d[vm.c]);
                 } else {
-                    context.fillStyle = vm.eventColor;
+                    eventRect.fill = vm.eventColor;
                 }
-
-                const xVal = g[d[vm.chromosomeVariable]](d[vm.positionVariable]) - (vm.eventWidth/2);
-                const yVal = y(d[vm.y]);
-                context.fillRect(xVal, yVal + (barMarginY/2), vm.eventWidth, barHeight - barMarginY);
             });
 
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
+
             /*
              * Prepare for interactivity
              */
@@ -395,8 +407,6 @@ export default {
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 const i = delaunay.find(mouseX, mouseY);
                 return data[i];
diff --git a/src/components/plots/GenomeScatterPlot.vue b/src/components/plots/GenomeScatterPlot.vue
index 62e4e6c..fe98ded 100644
--- a/src/components/plots/GenomeScatterPlot.vue
+++ b/src/components/plots/GenomeScatterPlot.vue
@@ -52,12 +52,13 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleLinear as d3_scaleLinear, scaleLog as d3_scaleLog } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
 import debounce from 'lodash/debounce';
 import { TOOLTIP_DEBOUNCE } from './../../constants.js';
-import { getRetinaRatio, getDelaunay } from './../../helpers.js';
+import { getDelaunay } from './../../helpers.js';
 
 import AbstractScale from './../../scales/AbstractScale.js';
 import GenomeScale from './../../scales/GenomeScale.js';
@@ -228,7 +229,7 @@ export default {
             this.highlightX1 = null;
             this.highlightY1 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._cScale.isLoading || vm._yScale.isLoading) {
@@ -281,19 +282,22 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
 
-            const ratio = getRetinaRatio(context);
-            const scaledWidth = vm.pWidth * ratio;
-            const scaledHeight = vm.pHeight * ratio;
+            const canvasNode = canvas.node();
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
-            if(data.length === 0) {
+            if(!d3Node && data.length === 0) {
                 canvas.on("mousemove", () => {});
                 canvas.on("mouseleave", () => {});
                 return;
@@ -304,13 +308,17 @@ export default {
              * Draw the points
              */
             data.forEach((d) => {
-                context.fillStyle = cScale.color(d[vm.c]);
-                context.beginPath();
-                context.arc(g[d[vm.chromosomeVariable]](d[vm.positionVariable]), y(d[vm.y]), 3, 0, 2*Math.PI);
-                context.fill();
+                const circle = two.makeCircle(g[d[vm.chromosomeVariable]](d[vm.positionVariable]), y(d[vm.y]), 3);
+                circle.fill = cScale.color(d[vm.c]);
+                circle.noStroke();
             });
 
+            two.update();
 
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
 
             /*
              * Prepare for interactivity
@@ -321,8 +329,6 @@ export default {
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 const i = delaunay.find(mouseX, mouseY);
                 return data[i];
diff --git a/src/components/plots/GenomeStackedBarPlot.vue b/src/components/plots/GenomeStackedBarPlot.vue
index 9ffa423..05f9e5e 100644
--- a/src/components/plots/GenomeStackedBarPlot.vue
+++ b/src/components/plots/GenomeStackedBarPlot.vue
@@ -53,6 +53,7 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleLinear as d3_scaleLinear } from 'd3-scale';
 import { stack as d3_stack, stackOrderNone as d3_stackOrderNone, stackOffsetNone as d3_stackOffsetNone } from 'd3-shape';
 import { select as d3_select } from 'd3-selection';
@@ -205,7 +206,7 @@ export default {
         highlightDestroy() {
             this.highlightX1 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._cScale.isLoading || vm._yScale.isLoading) {
@@ -260,21 +261,28 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
+
+            const canvasNode = canvas.node();
+
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             const canvasHidden = d3_select(this.hiddenPlotSelector);
             const contextHidden = canvasHidden.node().getContext('2d');
 
-            const ratio = getRetinaRatio(context);
+            const ratio = getRetinaRatio(contextHidden);
             const scaledWidth = vm.pWidth * ratio;
             const scaledHeight = vm.pHeight * ratio;
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
-
             canvasHidden
                 .attr("width", scaledWidth)
                 .attr("height", scaledHeight);
@@ -308,7 +316,6 @@ export default {
              * Draw the bars
              */
             series.forEach((layer) => {
-                context.fillStyle = cScale.color(layer["key"]); 
                 layer.forEach((d, i) => {
                     const col = genColor();
                     colToNode[col] = { 
@@ -338,16 +345,24 @@ export default {
                         // Bar width has not yet been found, set to max of current chromosome scale
                         barWidth = g[d.data[vm.chromosomeVariable]].range()[1] - xVal;
                     }
-                    context.fillRect(xVal, y(d[1]), barWidth, height);
+                    const rect = two.makeRectangle(xVal + barWidth/2, y(d[1]) + height/2, barWidth, height);
+                    rect.fill = cScale.color(layer["key"]);
+                    rect.noStroke();
+
                     contextHidden.fillRect(xVal, y(d[1]), barWidth, height);
                 });
             });
 
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
+
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 // Get the corresponding pixel color on the hidden canvas
                 const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
diff --git a/src/components/plots/GenomeTrackPlot.vue b/src/components/plots/GenomeTrackPlot.vue
index d250e0a..fc8a74e 100644
--- a/src/components/plots/GenomeTrackPlot.vue
+++ b/src/components/plots/GenomeTrackPlot.vue
@@ -39,12 +39,13 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleLinear as d3_scaleLinear } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
 import debounce from 'lodash/debounce';
 import { TOOLTIP_DEBOUNCE, GENOME_EVENT_COLOR_DEFAULT } from './../../constants.js';
-import { getRetinaRatio, getDelaunay } from './../../helpers.js';
+import { getDelaunay } from './../../helpers.js';
 
 import AbstractScale from './../../scales/AbstractScale.js';
 import GenomeScale from './../../scales/GenomeScale.js';
@@ -230,7 +231,7 @@ export default {
         highlightDestroy() {
             this.highlightX1 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || (vm.hasC && vm._cScale.isLoading)) {
@@ -272,46 +273,55 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
+
+            const canvasNode = canvas.node();
 
-          
-            const ratio = getRetinaRatio(context);
-            const scaledWidth = vm.pWidth * ratio;
-            const scaledHeight = vm.pHeight * ratio;
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
 
-   
-           
             /*
              * Draw the track
              */
             if(vm.backgroundColor !== undefined) {
-                context.fillStyle = vm.backgroundColor;
-                context.fillRect(0, 0, vm.pWidth, vm.pHeight);
+                const trackRect = two.makeRectangle(0 + vm.pWidth/2, 0 + vm.pHeight/2, vm.pWidth, vm.pHeight);
+                trackRect.fill = vm.backgroundColor;
+                trackRect.noStroke();
             }
 
             if(vm.lineColor !== undefined) {
-                context.fillStyle = vm.lineColor;
-                context.fillRect(0, (vm.pHeight/2)-0.5, vm.pWidth, 1);
+                const trackLineRect = two.makeRectangle(0 + vm.pWidth/2, vm.pHeight/2, vm.pWidth, 1);
+                trackLineRect.fill = vm.lineColor;
+                trackLineRect.noStroke();
             }
 
             data.forEach((d) => {
-
+                const xVal = g[d[vm.chromosomeVariable]](d[vm.positionVariable]) - (vm.eventWidth/2);
+                const eventRect = two.makeRectangle(xVal + vm.eventWidth/2, 0 + vm.pHeight/2, vm.eventWidth, vm.pHeight);
                 if(this.hasC) {
-                    context.fillStyle = cScale.color(d[vm.c]);
+                    eventRect.fill = cScale.color(d[vm.c]);
                 } else {
-                    context.fillStyle = vm.eventColor;
+                    eventRect.fill = vm.eventColor;
                 }
-
-                const xVal = g[d[vm.chromosomeVariable]](d[vm.positionVariable]) - (vm.eventWidth/2);
-                context.fillRect(xVal, 0, vm.eventWidth, vm.pHeight);
+                eventRect.noStroke();
             });
 
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
+
             /*
              * Prepare for interactivity
              */
@@ -322,8 +332,6 @@ export default {
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 const i = delaunay.find(mouseX, mouseY);
                 return data[i];
diff --git a/src/components/plots/HierarchicalMultiTrackPlot.vue b/src/components/plots/HierarchicalMultiTrackPlot.vue
index 1d7e03a..072c7d6 100644
--- a/src/components/plots/HierarchicalMultiTrackPlot.vue
+++ b/src/components/plots/HierarchicalMultiTrackPlot.vue
@@ -76,6 +76,7 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { hierarchy as d3_hierarchy } from 'd3-hierarchy';
 import { scaleBand as d3_scaleBand } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
@@ -265,7 +266,7 @@ export default {
             this.highlightY1 = null;
             this.highlightY2 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._hierarchyContainer.isLoading || vm._xScale.isLoading || vm._yScale.isLoading || vm._cScale.isLoading) {
@@ -312,21 +313,28 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
+
+            const canvasNode = canvas.node();
+
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             const canvasHidden = d3_select(this.hiddenPlotSelector);
             const contextHidden = canvasHidden.node().getContext('2d');
 
-            const ratio = getRetinaRatio(context);
+            const ratio = getRetinaRatio(contextHidden);
             const scaledWidth = vm.pWidth * ratio;
             const scaledHeight = vm.pHeight * ratio;
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
-
             canvasHidden
                 .attr("width", scaledWidth)
                 .attr("height", scaledHeight);
@@ -373,17 +381,23 @@ export default {
                     colToNode[col] = { "x": d[vm.x], "y": yVar, "c": d[yVar] };
                     contextHidden.fillStyle = col;
 
-                    context.fillStyle = cScale.color(d[yVar]);
-                    context.fillRect(x(d[vm.x]) + (barMarginX/2), y(yVar) + (barMarginY/2), barWidth - barMarginX, barHeight - barMarginY);
+                    const rect = two.makeRectangle(x(d[vm.x]) + (barMarginX/2) + (barWidth - barMarginX)/2, y(yVar) + (barMarginY/2) + (barHeight - barMarginY)/2, barWidth - barMarginX, barHeight - barMarginY);
+                    rect.fill = cScale.color(d[yVar]);
+                    rect.noStroke();
                     contextHidden.fillRect(x(d[vm.x]), y(yVar), barWidth, barHeight);
                 });
             });
+
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
             
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 // Get the corresponding pixel color on the hidden canvas
                 const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
diff --git a/src/components/plots/ScatterPlot.vue b/src/components/plots/ScatterPlot.vue
index 1b09a13..37ead3a 100644
--- a/src/components/plots/ScatterPlot.vue
+++ b/src/components/plots/ScatterPlot.vue
@@ -319,7 +319,6 @@ export default {
             /*
              * Draw the points
              */
-            const twoCircleArray = [];
             data.forEach((d) => {
                 const circle = two.makeCircle(x(d[vm.x]), y(d[vm.y]), vm.pointSize);
 
@@ -331,21 +330,18 @@ export default {
                     circle.stroke = vm.pointColor;
                 }
 
-                twoCircleArray.push(circle);
-            });
-
-            const twoCircleGroup = two.makeGroup(twoCircleArray);
-            twoCircleGroup.linewidth = 1;
-            twoCircleGroup.opacity = 1;
+                circle.linewidth = 1;
 
-            if(!vm.fillPoints) {
-                twoCircleGroup.noFill();
-            }
+                if(!vm.fillPoints) {
+                    circle.noFill();
+                }
 
+            });
+            
             two.update();
 
-            if(!canvas) {
-                /* Ignore interactivity if no canvas. In this case an SVG was probably passed in */
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
                 return;
             }
 
diff --git a/src/components/plots/StackedBarPlot.vue b/src/components/plots/StackedBarPlot.vue
index 110c792..0221ae9 100644
--- a/src/components/plots/StackedBarPlot.vue
+++ b/src/components/plots/StackedBarPlot.vue
@@ -338,36 +338,29 @@ export default {
                 barMarginX = 0;
             }
 
-            const twoRectArray = [];
-
             series.forEach((layer) => {
+                const col = cScale.color(layer["key"]);
                 layer.forEach((d) => {
-                    const col = genColor();
-                    colToNode[col] = { "x": d.data[vm.x], "y": d.data[layer["key"]], "c": layer["key"] };
-                    contextHidden.fillStyle = col;
+                    const hiddenCol = genColor();
+                    colToNode[hiddenCol] = { "x": d.data[vm.x], "y": d.data[layer["key"]], "c": layer["key"] };
+                    contextHidden.fillStyle = hiddenCol;
                     let height = y(d[0]) - y(d[1]);
                     if(height + y(d[1]) > vm.pHeight) {
                         height = vm.pHeight - y(d[1]);
                     }
 
                     const rect = two.makeRectangle(x(d.data[vm.x]) + (barMarginX/2) + ((barWidth - barMarginX)/2), y(d[1]) + (height/2), barWidth - barMarginX, height);
-                    //console.log(x(d.data[vm.x]) + (barMarginX/2), y(d[1]), barWidth - barMarginX, height);
-                    rect.fill = cScale.color(layer["key"]);
-                    twoRectArray.push(rect);
+                    rect.fill = col;
+                    rect.noStroke();
 
                     contextHidden.fillRect(x(d.data[vm.x]), y(d[1]), barWidth, height);
                 })
             });
 
-            const twoRectGroup = two.makeGroup(twoRectArray);
-            twoRectGroup.linewidth = 0;
-            twoRectGroup.opacity = 1;
-            twoRectGroup.noStroke();
-
             two.update();
 
-            if(!canvas) {
-                /* Ignore interactivity if no canvas. In this case an SVG was probably passed in */
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
                 return;
             }
             
diff --git a/src/components/plots/StratifiedSinaPlot.vue b/src/components/plots/StratifiedSinaPlot.vue
index 13bf2cf..0d30ad8 100644
--- a/src/components/plots/StratifiedSinaPlot.vue
+++ b/src/components/plots/StratifiedSinaPlot.vue
@@ -383,8 +383,6 @@ export default {
              * Draw the boxes
              */
 
-            const twoCircleArray = [];
-
             const boxWidth = (barWidth / 2);
             const boxMargin = barWidth / 4;
 
@@ -437,8 +435,12 @@ export default {
                         const circle = two.makeCircle(xVal, yVal, vm.pointSize);
                         circle.stroke = (vm.strokeColor ? vm.strokeColor : xScale.color(boxVar));
                         circle.fill = xScale.color(boxVar);
+                        circle.linewidth = 0.5;
+
+                        if(!vm.fillPoints) {
+                            circle.noFill();
+                        }
 
-                        twoCircleArray.push(circle);
 
                         points.push([xVal, yVal]); // For Delaunay
                         pointsData.push({
@@ -450,18 +452,10 @@ export default {
                 });
             });
 
-            const twoCircleGroup = two.makeGroup(twoCircleArray);
-            twoCircleGroup.linewidth = 1;
-            twoCircleGroup.opacity = 1;
-
-            if(!vm.fillPoints) {
-                twoCircleGroup.noFill();
-            }
-
             two.update();
 
-            if(!canvas) {
-                /* Ignore interactivity if no canvas. In this case an SVG was probably passed in */
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
                 return;
             }
             

From 9e12e879c6167f745c1dc844a9f67e72e6acbfe9 Mon Sep 17 00:00:00 2001
From: Mark Keller <7525285+keller-mark@users.noreply.github.com>
Date: Fri, 27 Dec 2019 21:57:10 -0500
Subject: [PATCH 4/5] Two.js rendering redirection for all plots

---
 examples-src/App.vue                          |  12 +-
 src/components/PlotContainer.vue              |  17 ++-
 src/components/plots/MultiBoxPlot.vue         | 103 ++++++++---------
 src/components/plots/MultiDataTrackPlot.vue   |  41 ++++---
 src/components/plots/MultiTrackPlot.vue       |  41 ++++---
 src/components/plots/RectPlot.vue             |  44 ++++----
 src/components/plots/StackedBarPlot.vue       |   1 -
 src/components/plots/StratifiedBoxPlot.vue    | 105 +++++++++---------
 .../plots/StratifiedKaplanMeierPlot.vue       |  66 ++++++-----
 .../plots/StratifiedScatterPlot.vue           |  62 ++++++-----
 src/components/plots/TrackPlot.vue            |  41 ++++---
 11 files changed, 305 insertions(+), 228 deletions(-)

diff --git a/examples-src/App.vue b/examples-src/App.vue
index b288470..ed274c1 100755
--- a/examples-src/App.vue
+++ b/examples-src/App.vue
@@ -319,6 +319,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="180"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -354,9 +355,10 @@
       :pWidth="700"
       :pHeight="40"
       :pMarginTop="10"
-      :pMarginLeft="10"
+      :pMarginLeft="40"
       :pMarginRight="10"
       :pMarginBottom="180"
+      :showDownloadButton="true"
     >
       <TrackPlot
         slot="plot"
@@ -463,6 +465,7 @@
       :pMarginLeft="180"
       :pMarginRight="20"
       :pMarginBottom="20"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -803,6 +806,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="180"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -883,9 +887,10 @@
       :pWidth="50"
       :pHeight="30"
       :pMarginTop="5"
-      :pMarginLeft="20"
-      :pMarginRight="20"
+      :pMarginLeft="40"
+      :pMarginRight="40"
       :pMarginBottom="50"
+      :showDownloadButton="true"
     >
       <RectPlot
         slot="plot"
@@ -907,6 +912,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="180"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
diff --git a/src/components/PlotContainer.vue b/src/components/PlotContainer.vue
index a16de51..4402508 100644
--- a/src/components/PlotContainer.vue
+++ b/src/components/PlotContainer.vue
@@ -1,5 +1,4 @@
 <script>
-import { getRetinaRatio } from './../helpers.js';
 import { DOWNLOAD_PATH } from './../icons.js';
 import { create as d3_create } from 'd3';
 
@@ -51,7 +50,8 @@ const svgToUri = function(svg) {
     source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
 
     // Convert svg source to URI.
-    return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
+    //return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
+    return source;
 };
 
 
@@ -218,9 +218,10 @@ export default {
     },
     methods: {
         downloadViaButton() {
-            const uri = this.download()
+            const blob = this.download();
+            const url = URL.createObjectURL(blob);
             const downloadAnchorNode = document.createElement('a');
-            downloadAnchorNode.setAttribute("href", uri);
+            downloadAnchorNode.setAttribute("href", url);
             downloadAnchorNode.setAttribute("download", this.downloadName + ".svg");
             document.body.appendChild(downloadAnchorNode); // required for firefox
             downloadAnchorNode.click();
@@ -288,6 +289,8 @@ export default {
                     this.$slots.plot[0].componentInstance.drawPlot(plotSvg);
                     this.$slots.plot[0].componentInstance.drawPlot();
 
+                    console.log(plotSvg.node().innerHTML.length)
+
                     const plotG = svg
                         .append("g")
                             .attr("class", `download-g-plot`)
@@ -305,7 +308,11 @@ export default {
             renderAxisToContext("axisRight");
             renderAxisToContext("axisBottom");
 
-            return svgToUri(svg.node());
+            const svgContent = svgToUri(svg.node());
+
+            const blob = new Blob([svgContent], {'type': 'image/svg+xml'});
+
+            return blob;
         }
     }
 }
diff --git a/src/components/plots/MultiBoxPlot.vue b/src/components/plots/MultiBoxPlot.vue
index 1c1ade3..89d7040 100644
--- a/src/components/plots/MultiBoxPlot.vue
+++ b/src/components/plots/MultiBoxPlot.vue
@@ -75,6 +75,7 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleBand as d3_scaleBand, scaleLinear as d3_scaleLinear, scaleQuantile as d3_scaleQuantile } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
@@ -249,7 +250,7 @@ export default {
             this.highlightX1 = null;
             this.highlightX2 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._xScale.isLoading || vm._yScale.isLoading || (vm.hasO && vm._oScale.isLoading)) {
@@ -280,26 +281,31 @@ export default {
             vm.barWidth = barWidth;
               
             
-
-            
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
+
+            const canvasNode = canvas.node();
+
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             const canvasHidden = d3_select(this.hiddenPlotSelector);
             const contextHidden = canvasHidden.node().getContext('2d');
 
-            const ratio = getRetinaRatio(context);
+            const ratio = getRetinaRatio(contextHidden);
             const scaledWidth = vm.pWidth * ratio;
             const scaledHeight = vm.pHeight * ratio;
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
-
             canvasHidden
                 .attr("width", scaledWidth)
                 .attr("height", scaledHeight);
@@ -340,7 +346,6 @@ export default {
             const diamondSize = vm.pointSize + 2;
 
             xScale.domainFiltered.forEach((boxVar) => {
-                context.fillStyle = xScale.color(boxVar);
 
                 let boxData = data.map((el) => el[boxVar] || 0);
                 let quantile = d3_scaleQuantile()
@@ -361,48 +366,39 @@ export default {
 
                 let boxX1 = x(boxVar) + boxMargin;
                 let boxX2 = boxX1 + boxWidth;
-                let boxX = boxX1 + (boxWidth / 2)
-
-                context.strokeStyle = "black";
-                context.beginPath();
-                // Upper Fence
-                context.moveTo(boxX1,y(upperFence));
-                context.lineTo(boxX2,y(upperFence));
-                // Vertical Line
-                context.moveTo(boxX1 + (boxWidth / 2),y(upperFence));
-                context.lineTo(boxX1 + (boxWidth / 2),y(lowerFence));
-                // Lower Fence
-                context.moveTo(boxX1,y(lowerFence));
-                context.lineTo(boxX2,y(lowerFence));
-
-                context.stroke();
-
-                // Draw the box rect
-                context.strokeRect(boxX1, y(q3), boxWidth, y(q1) - y(q3));
-                context.fillRect(boxX1, y(q3), boxWidth, y(q1) - y(q3));
-
-                // Draw the median line
-                context.beginPath();
-                context.moveTo(boxX1, y(median));
-                context.lineTo(boxX2, y(median));
-                context.stroke();
-
-                // Draw the mean diamond
-                context.beginPath();
-                context.moveTo(boxX - (diamondSize/2), y(mean));
-                context.lineTo(boxX, y(mean) - (diamondSize/2));
-                context.lineTo(boxX + (diamondSize/2), y(mean));
-                context.lineTo(boxX, y(mean) + (diamondSize/2));
-                context.lineTo(boxX - (diamondSize/2), y(mean));
-                context.stroke();
+                let boxX = boxX1 + (boxWidth / 2);
+
+
+                const verticalLine = two.makeLine(boxX1 + (boxWidth / 2),y(upperFence), boxX1 + (boxWidth / 2),y(lowerFence));
+                verticalLine.stroke = "black";
+
+                const boxRect = two.makeRectangle(boxX1 + boxWidth/2, y(q3) + (y(q1) - y(q3))/2, boxWidth, y(q1) - y(q3));
+                boxRect.linewidth = 1;
+                boxRect.fill = xScale.color(boxVar);
+                boxRect.stroke = "black";
+
+                const upperFenceLine = two.makeLine(boxX1,y(upperFence), boxX2,y(upperFence));
+                upperFenceLine.stroke = "black";
+
+                const lowerFenceLine = two.makeLine(boxX1,y(lowerFence), boxX2,y(lowerFence));
+                lowerFenceLine.stroke = "black";
+
+                const medianLine = two.makeLine(boxX1,y(median), boxX2,y(median));
+                medianLine.stroke = "black";
+
+                const meanDiamond = two.makeRectangle(boxX,y(mean), diamondSize-2, diamondSize-2);
+                meanDiamond.stroke = "black";
+                meanDiamond.noFill();
+                meanDiamond.rotation = Math.PI/4;
 
                 // Draw the outliers
                 if(vm.drawOutliers) {
                     let outliers = boxData.filter((el) => (el > upperFence) || (el < lowerFence));
                     outliers.forEach((outlier) => {
-                        context.beginPath();
-                        context.arc(boxX, y(outlier), (vm.pointSize / 2), 0, 2*Math.PI);
-                        context.stroke();
+                        const circle = two.makeCircle(boxX, y(outlier), (vm.pointSize / 2));
+                        circle.linewidth = 1;
+                        circle.stroke = "black";
+                        circle.noFill();
                     });
                 }
 
@@ -420,12 +416,17 @@ export default {
                 contextHidden.fillStyle = col;
                 contextHidden.fillRect(x(boxVar), 0, barWidth, vm.pHeight);
             });
+
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
             
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 // Get the corresponding pixel color on the hidden canvas
                 const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
diff --git a/src/components/plots/MultiDataTrackPlot.vue b/src/components/plots/MultiDataTrackPlot.vue
index 78e3e3a..ffc7cd7 100644
--- a/src/components/plots/MultiDataTrackPlot.vue
+++ b/src/components/plots/MultiDataTrackPlot.vue
@@ -76,6 +76,7 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleBand as d3_scaleBand } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
@@ -257,7 +258,7 @@ export default {
             this.highlightY1 = null;
             this.highlightY2 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._xScale.isLoading || vm._yScale.isLoading || vm._cScale.isLoading) {
@@ -305,21 +306,28 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
+
+            const canvasNode = canvas.node();
+
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             const canvasHidden = d3_select(this.hiddenPlotSelector);
             const contextHidden = canvasHidden.node().getContext('2d');
 
-            const ratio = getRetinaRatio(context);
+            const ratio = getRetinaRatio(contextHidden);
             const scaledWidth = vm.pWidth * ratio;
             const scaledHeight = vm.pHeight * ratio;
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
-
             canvasHidden
                 .attr("width", scaledWidth)
                 .attr("height", scaledHeight);
@@ -367,17 +375,24 @@ export default {
                     colToNode[col] = { "x": d[vm.x], "y": yVar, "c": d[vm.c] };
                     contextHidden.fillStyle = col;
 
-                    context.fillStyle = cScale.color(d[vm.c]);
-                    context.fillRect(x(d[vm.x]) + (barMarginX/2), y(yVar) + (barMarginY/2), barWidth - barMarginX, barHeight - barMarginY);
+                    const rect = two.makeRectangle(x(d[vm.x]) + (barMarginX/2) + (barWidth - barMarginX)/2, y(yVar) + (barMarginY/2) + (barHeight - barMarginY)/2, barWidth - barMarginX, barHeight - barMarginY);
+                    rect.fill = cScale.color(d[vm.c]);
+                    rect.noStroke();
+
                     contextHidden.fillRect(x(d[vm.x]), y(yVar), barWidth, barHeight);
                 });
             });
+
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
             
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 // Get the corresponding pixel color on the hidden canvas
                 const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
diff --git a/src/components/plots/MultiTrackPlot.vue b/src/components/plots/MultiTrackPlot.vue
index b223b7f..e8f0b75 100644
--- a/src/components/plots/MultiTrackPlot.vue
+++ b/src/components/plots/MultiTrackPlot.vue
@@ -76,6 +76,7 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleBand as d3_scaleBand } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
@@ -254,7 +255,7 @@ export default {
             this.highlightY1 = null;
             this.highlightY2 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._xScale.isLoading || vm._yScale.isLoading || vm._cScale.isLoading) {
@@ -291,21 +292,28 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
+
+            const canvasNode = canvas.node();
+
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             const canvasHidden = d3_select(this.hiddenPlotSelector);
             const contextHidden = canvasHidden.node().getContext('2d');
 
-            const ratio = getRetinaRatio(context);
+            const ratio = getRetinaRatio(contextHidden);
             const scaledWidth = vm.pWidth * ratio;
             const scaledHeight = vm.pHeight * ratio;
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
-
             canvasHidden
                 .attr("width", scaledWidth)
                 .attr("height", scaledHeight);
@@ -352,17 +360,24 @@ export default {
                     colToNode[col] = { "x": d[vm.x], "y": yVar, "c": d[yVar] };
                     contextHidden.fillStyle = col;
 
-                    context.fillStyle = cScale.color(d[yVar]);
-                    context.fillRect(x(d[vm.x]) + (barMarginX/2), y(yVar) + (barMarginY/2), barWidth - barMarginX, barHeight - barMarginY);
+                    const rect = two.makeRectangle(x(d[vm.x]) + (barMarginX/2) + (barWidth - barMarginX)/2, y(yVar) + (barMarginY/2) + (barHeight - barMarginY)/2, barWidth - barMarginX, barHeight - barMarginY);
+                    rect.fill = cScale.color(d[yVar]);
+                    rect.noStroke();
+                    
                     contextHidden.fillRect(x(d[vm.x]), y(yVar), barWidth, barHeight);
                 });
             });
+
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
             
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 // Get the corresponding pixel color on the hidden canvas
                 const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
diff --git a/src/components/plots/RectPlot.vue b/src/components/plots/RectPlot.vue
index 0ae5ee2..43a6c86 100644
--- a/src/components/plots/RectPlot.vue
+++ b/src/components/plots/RectPlot.vue
@@ -35,18 +35,14 @@
 </template>
 
 <script>
-import { scaleBand as d3_scaleBand } from 'd3-scale';
+import Two from 'two.js';
 import { select as d3_select } from 'd3-selection';
-import { mouse as d3_mouse, event as d3_event } from 'd3';
-import debounce from 'lodash/debounce';
-import { TOOLTIP_DEBOUNCE, BAR_MARGIN_X_DEFAULT, BAR_WIDTH_MIN } from './../../constants.js';
-import { getRetinaRatio } from './../../helpers.js';
+import { event as d3_event } from 'd3';
 
 import AbstractScale from './../../scales/AbstractScale.js';
 import DataContainer from './../../data/DataContainer.js';
 
 import mixin from './mixin.js';
-import ContinuousScale from './../../scales/ContinuousScale.js';
 import CategoricalScale from './../../scales/CategoricalScale.js';
 
 
@@ -176,7 +172,7 @@ export default {
         highlightDestroy() {
             this.highlightXY = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._zScale.isLoading || vm._cScale.isLoading) {
@@ -185,7 +181,6 @@ export default {
             
             const data = vm._dataContainer.dataCopy;
             
-            const zScale = vm._zScale;
             const cScale = vm._cScale;
 
             const point = data.find((el) => el[vm.z] === vm.o); // the single data point
@@ -197,23 +192,34 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
 
-            const ratio = getRetinaRatio(context);
-            const scaledWidth = vm.pWidth * ratio;
-            const scaledHeight = vm.pHeight * ratio;
+            const canvasNode = canvas.node();
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             /*
              * Draw the rect
              */
-            context.fillStyle = cScale.color(point[vm.c]);
-            context.fillRect(0, 0, vm.pWidth, vm.pHeight);
+            const rect = two.makeRectangle(0 + vm.pWidth/2, 0 + vm.pHeight/2, vm.pWidth, vm.pHeight);
+            rect.fill = cScale.color(point[vm.c]);
+            rect.noStroke();
+
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
 
             /*
              * Listen for mouse events
diff --git a/src/components/plots/StackedBarPlot.vue b/src/components/plots/StackedBarPlot.vue
index 0221ae9..e57cc8b 100644
--- a/src/components/plots/StackedBarPlot.vue
+++ b/src/components/plots/StackedBarPlot.vue
@@ -278,7 +278,6 @@ export default {
             /*
              * Scale up the canvas
              */
-
             let canvas;
             if(d3Node) {
                 canvas = d3Node;
diff --git a/src/components/plots/StratifiedBoxPlot.vue b/src/components/plots/StratifiedBoxPlot.vue
index 8e92dd9..e446c16 100644
--- a/src/components/plots/StratifiedBoxPlot.vue
+++ b/src/components/plots/StratifiedBoxPlot.vue
@@ -79,6 +79,7 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleLinear as d3_scaleLinear, scaleQuantile as d3_scaleQuantile, scaleBand as d3_scaleBand } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
@@ -272,7 +273,7 @@ export default {
             this.highlightX1 = null;
             this.highlightX2 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._stratificationDataContainer.isLoading || vm._xScale.isLoading || vm._yScale.isLoading || vm._oScale.isLoading) {
@@ -303,26 +304,31 @@ export default {
             vm.barWidth = barWidth;
               
             
-
-            
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
+
+            const canvasNode = canvas.node();
+
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             const canvasHidden = d3_select(this.hiddenPlotSelector);
             const contextHidden = canvasHidden.node().getContext('2d');
 
-            const ratio = getRetinaRatio(context);
+            const ratio = getRetinaRatio(contextHidden);
             const scaledWidth = vm.pWidth * ratio;
             const scaledHeight = vm.pHeight * ratio;
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
-
             canvasHidden
                 .attr("width", scaledWidth)
                 .attr("height", scaledHeight);
@@ -363,8 +369,6 @@ export default {
             const diamondSize = vm.pointSize + 2;
 
             xScale.domainFiltered.forEach((boxVar) => {
-                context.fillStyle = xScale.color(boxVar);
-
                 let boxData = data.filter((dEl) => {
                     let sEl = stratificationData.find((sEl) => sEl[vm.o] === dEl[vm.o]);
                     return (sEl !== undefined && sEl[vm.x] === boxVar);
@@ -388,48 +392,40 @@ export default {
 
                 let boxX1 = x(boxVar) + boxMargin;
                 let boxX2 = boxX1 + boxWidth;
-                let boxX = boxX1 + (boxWidth / 2)
-
-                context.strokeStyle = "black";
-                context.beginPath();
-                // Upper Fence
-                context.moveTo(boxX1,y(upperFence));
-                context.lineTo(boxX2,y(upperFence));
-                // Vertical Line
-                context.moveTo(boxX1 + (boxWidth / 2),y(upperFence));
-                context.lineTo(boxX1 + (boxWidth / 2),y(lowerFence));
-                // Lower Fence
-                context.moveTo(boxX1,y(lowerFence));
-                context.lineTo(boxX2,y(lowerFence));
-
-                context.stroke();
-
-                // Draw the box rect
-                context.strokeRect(boxX1, y(q3), boxWidth, y(q1) - y(q3));
-                context.fillRect(boxX1, y(q3), boxWidth, y(q1) - y(q3));
-
-                // Draw the median line
-                context.beginPath();
-                context.moveTo(boxX1, y(median));
-                context.lineTo(boxX2, y(median));
-                context.stroke();
-
-                // Draw the mean diamond
-                context.beginPath();
-                context.moveTo(boxX - (diamondSize/2), y(mean));
-                context.lineTo(boxX, y(mean) - (diamondSize/2));
-                context.lineTo(boxX + (diamondSize/2), y(mean));
-                context.lineTo(boxX, y(mean) + (diamondSize/2));
-                context.lineTo(boxX - (diamondSize/2), y(mean));
-                context.stroke();
+                let boxX = boxX1 + (boxWidth / 2);
+
+
+                const verticalLine = two.makeLine(boxX1 + (boxWidth / 2),y(upperFence), boxX1 + (boxWidth / 2),y(lowerFence));
+                verticalLine.stroke = "black";
+
+                const boxRect = two.makeRectangle(boxX1 + boxWidth/2, y(q3) + (y(q1) - y(q3))/2, boxWidth, y(q1) - y(q3));
+                boxRect.linewidth = 1;
+                boxRect.fill = xScale.color(boxVar);
+                boxRect.stroke = "black";
+
+                const upperFenceLine = two.makeLine(boxX1,y(upperFence), boxX2,y(upperFence));
+                upperFenceLine.stroke = "black";
+
+                const lowerFenceLine = two.makeLine(boxX1,y(lowerFence), boxX2,y(lowerFence));
+                lowerFenceLine.stroke = "black";
+
+                const medianLine = two.makeLine(boxX1,y(median), boxX2,y(median));
+                medianLine.stroke = "black";
+
+                const meanDiamond = two.makeRectangle(boxX,y(mean), diamondSize-2, diamondSize-2);
+                meanDiamond.stroke = "black";
+                meanDiamond.noFill();
+                meanDiamond.rotation = Math.PI/4;
+
 
                 // Draw the outliers
                 if(vm.drawOutliers) {
                     let outliers = boxData.filter((el) => (el > upperFence) || (el < lowerFence));
                     outliers.forEach((outlier) => {
-                        context.beginPath();
-                        context.arc(boxX, y(outlier), (vm.pointSize / 2), 0, 2*Math.PI);
-                        context.stroke();
+                        const circle = two.makeCircle(boxX, y(outlier), (vm.pointSize / 2));
+                        circle.linewidth = 1;
+                        circle.stroke = "black";
+                        circle.noFill();
                     });
                 }
 
@@ -448,12 +444,17 @@ export default {
                 contextHidden.fillStyle = col;
                 contextHidden.fillRect(x(boxVar), 0, barWidth, vm.pHeight);
             });
+
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
             
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 // Get the corresponding pixel color on the hidden canvas
                 const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
diff --git a/src/components/plots/StratifiedKaplanMeierPlot.vue b/src/components/plots/StratifiedKaplanMeierPlot.vue
index 72217de..dc2f2c8 100644
--- a/src/components/plots/StratifiedKaplanMeierPlot.vue
+++ b/src/components/plots/StratifiedKaplanMeierPlot.vue
@@ -53,12 +53,13 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleLinear as d3_scaleLinear } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
 import debounce from 'lodash/debounce';
 import { TOOLTIP_DEBOUNCE } from './../../constants.js';
-import { getRetinaRatio, getDelaunay } from './../../helpers.js';
+import { getDelaunay } from './../../helpers.js';
 
 import AbstractScale from './../../scales/AbstractScale.js';
 import ContinuousScale from './../../scales/ContinuousScale.js';
@@ -269,7 +270,7 @@ export default {
             this.highlightX1 = null;
             this.highlightY1 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._stratificationDataContainer.isLoading || vm._xScale.isLoading || vm._yScale.isLoading || vm._oScale.isLoading || vm._cScale.isLoading) {
@@ -305,17 +306,20 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
 
-            const ratio = getRetinaRatio(context);
-            const scaledWidth = vm.pWidth * ratio;
-            const scaledHeight = vm.pHeight * ratio;
+            const canvasNode = canvas.node();
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
              /*
              * Prepare for interactivity
@@ -341,7 +345,6 @@ export default {
             /*
              * Draw the points
              */
-            context.lineWidth = vm.lineWidth;
             cScale.domainFiltered.forEach((cEl) => {
                 const cData = matchedData
                     .filter(el => el["sEl"][vm.variable] === cEl)
@@ -359,12 +362,7 @@ export default {
                 const step = 100 / cData.length;
 
                 let currSurvivalPct = 100;
-                
-                context.fillStyle = cScale.color(cEl);
-                context.strokeStyle = cScale.color(cEl);
-
-                context.beginPath();
-                context.moveTo(x(0), y(100));
+                let prevXVal = 0;
 
                 cData.forEach((match, i) => {
                     let sEl = match["sEl"];
@@ -385,23 +383,27 @@ export default {
                     }
 
                     // Draw a horizontal line to the current time, using the previous percent
-                    context.lineTo(x(xVal), y(currSurvivalPct));
-                    context.stroke();
+                    const horizontalLine = two.makeLine(x(prevXVal) - 1, y(currSurvivalPct), x(xVal) + 1, y(currSurvivalPct));
+                    horizontalLine.linewidth = vm.lineWidth;
+                    horizontalLine.stroke = cScale.color(cEl);
 
                     // Add a tick line if using data from followup rather than death
                     if(drop) {
-                        context.moveTo(x(xVal), y(currSurvivalPct) - vm.tickHeight / 2);
-                        context.lineTo(x(xVal), y(currSurvivalPct) + vm.tickHeight / 2);
-                        context.stroke();
-                        // Move back
-                        context.moveTo(x(xVal), y(currSurvivalPct));
+                        const tickLine = two.makeLine(x(xVal), y(currSurvivalPct) - vm.tickHeight / 2, x(xVal), y(currSurvivalPct) + vm.tickHeight / 2);
+                        tickLine.linewidth = vm.lineWidth;
+                        tickLine.stroke = cScale.color(cEl);
                     }
 
+                    let prevSurvivalPct = currSurvivalPct;
+                    prevXVal = xVal;
+
                     // Draw a vertical line to the current time, using the current percent
                     if(i < cData.length - 1 && !drop) {
                         // Decrease percent
                         currSurvivalPct -= step;
-                        context.lineTo(x(xVal), y(currSurvivalPct));
+                        const verticalLine = two.makeLine(x(xVal), y(prevSurvivalPct), x(xVal), y(currSurvivalPct));
+                        verticalLine.linewidth = vm.lineWidth;
+                        verticalLine.stroke = cScale.color(cEl);
                     }
                     points.push([x(xVal), y(currSurvivalPct)]);
                     pointsData.push({
@@ -410,9 +412,17 @@ export default {
                         "x": xVal,
                         "c": sEl[vm.variable]
                     });
-                    context.stroke();
+
+                    
                 });
             });
+
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
             
             /*
              * More prepare for interactivity
@@ -422,8 +432,6 @@ export default {
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 const i = delaunay.find(mouseX, mouseY);
                 return pointsData[i];
diff --git a/src/components/plots/StratifiedScatterPlot.vue b/src/components/plots/StratifiedScatterPlot.vue
index 65b1e9b..ba42180 100644
--- a/src/components/plots/StratifiedScatterPlot.vue
+++ b/src/components/plots/StratifiedScatterPlot.vue
@@ -50,12 +50,13 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleLinear as d3_scaleLinear } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
 import debounce from 'lodash/debounce';
 import { TOOLTIP_DEBOUNCE } from './../../constants.js';
-import { getRetinaRatio, getDelaunay } from './../../helpers.js';
+import { getDelaunay } from './../../helpers.js';
 
 import AbstractScale from './../../scales/AbstractScale.js';
 import ContinuousScale from './../../scales/ContinuousScale.js';
@@ -249,7 +250,7 @@ export default {
             this.highlightX1 = null;
             this.highlightY1 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._stratificationDataContainer.isLoading || vm._xScale.isLoading || vm._yScale.isLoading || vm._oScale.isLoading) {
@@ -278,23 +279,24 @@ export default {
                 .range([vm.pHeight, 0]);
             
             vm.highlightYScale = y;
-              
-
             
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
 
-            const ratio = getRetinaRatio(context);
-            const scaledWidth = vm.pWidth * ratio;
-            const scaledHeight = vm.pHeight * ratio;
+            const canvasNode = canvas.node();
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
              /*
              * Prepare for interactivity
@@ -305,32 +307,36 @@ export default {
             /*
              * Draw the points
              */
-            if(vm.strokeColor !== undefined) {
-                context.strokeStyle = vm.strokeColor;
-            }
             data.forEach((d) => {
                 let sEl = stratificationData.find((sEl) => sEl[vm.o] === d[vm.o]);
                 if(sEl !== undefined && !AbstractScale.isUnknown(sEl[vm.x])) {
-                    
-                    context.fillStyle = xScale.color(sEl[vm.x]);
-                    if(vm.strokeColor === undefined) {
-                        context.strokeStyle = xScale.color(sEl[vm.x]);
+                    const circle = two.makeCircle(x(sEl[vm.x]), y(d[vm.variable]), vm.pointSize);
+                    circle.linewidth = 0.5;
+                    if(vm.strokeColor !== undefined) {
+                        circle.stroke = vm.strokeColor;
+                    } else {
+                        circle.stroke = xScale.color(sEl[vm.x]);
+                    }
+                    circle.fill = xScale.color(sEl[vm.x]);
+                    if(!vm.fillPoints) {
+                        circle.noFill();
                     }
-                    
-                    context.beginPath();
-                    context.arc(x(sEl[vm.x]), y(d[vm.variable]), vm.pointSize, 0, 2*Math.PI);
+
                     points.push([x(sEl[vm.x]), y(d[vm.variable])]);
                     pointsData.push({
                         "y": d[vm.variable],
                         "o": d[vm.o],
                         "x": sEl[vm.x]
                     });
-                    context.stroke();
-                    if(vm.fillPoints) {
-                        context.fill();
-                    }
                 }
             });
+
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
             
             /*
              * More prepare for interactivity
@@ -340,8 +346,6 @@ export default {
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 const i = delaunay.find(mouseX, mouseY);
                 return pointsData[i];
diff --git a/src/components/plots/TrackPlot.vue b/src/components/plots/TrackPlot.vue
index 7370f08..e958fae 100644
--- a/src/components/plots/TrackPlot.vue
+++ b/src/components/plots/TrackPlot.vue
@@ -54,6 +54,7 @@
 </template>
 
 <script>
+import Two from 'two.js';
 import { scaleBand as d3_scaleBand } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
@@ -195,7 +196,7 @@ export default {
             this.highlightX1 = null;
             this.highlightX2 = null;
         },
-        drawPlot() {
+        drawPlot(d3Node) {
             const vm = this;
 
             if(vm._dataContainer.isLoading || vm._xScale.isLoading || vm._cScale.isLoading) {
@@ -222,21 +223,28 @@ export default {
             /*
              * Scale up the canvas
              */
-            const canvas = d3_select(this.plotSelector);
-            const context = canvas.node().getContext('2d');
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.plotSelector);
+            }
+
+            const canvasNode = canvas.node();
+
+            const two = new Two({ 
+                width: vm.pWidth, 
+                height: vm.pHeight, 
+                domElement: canvasNode
+            });
 
             const canvasHidden = d3_select(this.hiddenPlotSelector);
             const contextHidden = canvasHidden.node().getContext('2d');
 
-            const ratio = getRetinaRatio(context);
+            const ratio = getRetinaRatio(contextHidden);
             const scaledWidth = vm.pWidth * ratio;
             const scaledHeight = vm.pHeight * ratio;
 
-            canvas
-                .attr("width", scaledWidth)
-                .attr("height", scaledHeight);
-            context.scale(ratio, ratio);
-
             canvasHidden
                 .attr("width", scaledWidth)
                 .attr("height", scaledHeight);
@@ -287,17 +295,24 @@ export default {
                     colToNode[col] = { "x": d[vm.x], "c": d[vm.c] };
                     contextHidden.fillStyle = col;
 
-                    context.fillStyle = cScale.color(d[vm.c]);
-                    context.fillRect(x(d[vm.x]) + (barMarginX/2), 0, barWidth - barMarginX, vm.pHeight);
+                    const rect = two.makeRectangle(x(d[vm.x]) + (barMarginX/2) + (barWidth - barMarginX)/2, 0 + vm.pHeight/2, barWidth - barMarginX, vm.pHeight);
+                    rect.fill = cScale.color(d[vm.c]);
+                    rect.noStroke();
+
                     contextHidden.fillRect(x(d[vm.x]), 0, barWidth, vm.pHeight);
                 }
             });
+
+            two.update();
+
+            if(d3Node) {
+                /* Ignore interactivity if SVG was passed in (for download). */
+                return;
+            }
             
             /*
              * Listen for mouse events
              */
-            const canvasNode = canvas.node();
-
             const getDataFromMouse = (mouseX, mouseY) => {
                 // Get the corresponding pixel color on the hidden canvas
                 const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;

From 29b7dd6bae6966647639aec120fa0870e6a6fe89 Mon Sep 17 00:00:00 2001
From: Mark Keller <7525285+keller-mark@users.noreply.github.com>
Date: Fri, 27 Dec 2019 21:57:38 -0500
Subject: [PATCH 5/5] Bump version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5c41509..00bbab0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueplotlib",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve --open ./examples-src/index.js",