diff --git a/README.md b/README.md
index e24abec..4ae4b76 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,18 @@ package is available through [npm](https://www.npmjs.com/package/epiviz.heatmap.
 ### Usage
 
 - [app/index.html](./app/index.html) provides an easier example and code on how to use the library
+- Include the css in your application
+
+```html
+<link
+  rel="stylesheet"
+  href="https://epiviz.github.io/epiviz.heatmap.gl/dist/ehgl.css"
+/>
+```
+
+```scss
+@import url("https://epiviz.github.io/epiviz.heatmap.gl/dist/ehgl.css");
+```
 
 #### Intensity Legend
 
@@ -418,3 +430,28 @@ These attributes either take a fixed value or an array of values for each data p
     columnGroupingData: <COLUMN_GROUPING_DATA>,
   });
 ```
+
+### Tooltip Functionality
+
+The `Tooltip` class in `epiviz.heatmap.gl` provides dynamic tooltips for enhanced data point interaction. This feature allows users to see detailed information about specific data points on hover.
+
+#### Implementation
+
+- A singleton `Tooltip` instance is created for consistent behavior across the application.
+- Tooltips are triggered on mouse movement over data points, displaying context-sensitive information.
+- Positioning and content of the tooltip are dynamically updated based on the data point under the cursor.
+
+#### Usage Example
+
+```javascript
+const tooltip = new Tooltip();
+svgElement.addEventListener("mousemove", (event) => {
+  const content = `Detailed info`;
+  tooltip.updateTooltip(content, event.clientX, event.clientY);
+});
+svgElement.addEventListener("mouseout", () => {
+  tooltip.hideTooltip();
+});
+```
+
+This feature enhances the interactive experience by providing immediate, in-context data insights to users.
diff --git a/app/data-processor-worker-a4482939-6147ac31.js b/app/data-processor-worker-a4482939-b12f104a.js
similarity index 99%
rename from app/data-processor-worker-a4482939-6147ac31.js
rename to app/data-processor-worker-a4482939-b12f104a.js
index f728b00..5b49e7b 100644
--- a/app/data-processor-worker-a4482939-6147ac31.js
+++ b/app/data-processor-worker-a4482939-b12f104a.js
@@ -1,5 +1,5 @@
-import { b as getViewportForSpecification } from './rgb-b646728b-0756143b.js';
-import { S as SpecificationProcessor, a as SIZE_UNITS, t as transformGenomicRangeArcToStandard, b as transformGenomicRangeToStandard } from './specification-processor-f5ff7c7a-f223adaf.js';
+import { b as getViewportForSpecification } from './rgb-b646728b-2f709b61.js';
+import { S as SpecificationProcessor, a as SIZE_UNITS, t as transformGenomicRangeArcToStandard, b as transformGenomicRangeToStandard } from './specification-processor-f5ff7c7a-2d0faaee.js';
 
 class FlatQueue {
 
diff --git a/app/ehgl.css b/app/ehgl.css
new file mode 100644
index 0000000..802209e
--- /dev/null
+++ b/app/ehgl.css
@@ -0,0 +1 @@
+.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}.tippy-iOS{-webkit-tap-highlight-color:transparent;cursor:pointer!important}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{background-color:#333;border-radius:4px;color:#fff;font-size:14px;line-height:1.4;outline:0;position:relative;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{border-top-color:#333;border-width:8px 8px 0;bottom:-7px;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#333;border-width:0 8px 8px;top:-7px;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-left-color:#333;border-width:8px 0 8px 8px;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{border-right-color:#333;border-width:8px 8px 8px 0;left:-7px;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{height:16px;width:16px}.tippy-arrow:before{border-color:transparent;border-style:solid;content:"";position:absolute}.tippy-content{padding:5px 9px;position:relative;z-index:1}
\ No newline at end of file
diff --git a/app/ehgl.js b/app/ehgl.js
index 7299c25..6a29a21 100644
--- a/app/ehgl.js
+++ b/app/ehgl.js
@@ -4,11 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var d3Selection = require('d3-selection');
 var d3Array = require('d3-array');
-var WebGLVis = _interopDefault(require('epiviz.gl'));
 var d3Scale = require('d3-scale');
+var d3Selection = require('d3-selection');
+var WebGLVis = _interopDefault(require('epiviz.gl'));
 var d3Axis = require('d3-axis');
+var tippy = _interopDefault(require('tippy.js'));
+require('tippy.js/dist/tippy.css');
 
 const DEFAULT_ROW_MAX_LABEL_LENGTH_ALLOWED = 15;
 const DEFAULT_COLUMN_MAX_LABEL_LENGTH_ALLOWED = 30;
@@ -16,7 +18,6 @@ const DEFAULT_ROW_LABEL_SLINT_ANGLE = 0;
 const DEFAULT_COLUMN_LABEL_SLINT_ANGLE = 0;
 const DEFAULT_ROW_LABEL_FONT_SIZE = "7px";
 const DEFAULT_COLUMN_LABEL_FONT_SIZE = "7px";
-const DEFAULT_VISIBLE_RANGE = [-1, 1];
 
 const LABELS_MARGIN_BUFFER_IN_PX = 20;
 const INTENSITY_LEGEND_LABEL_SIZE_IN_PX = 25;
@@ -24,30 +25,54 @@ const INTENSITY_LEGEND_GRADIENT_SIZE_IN_PX = 20;
 const INTENSITY_LEGEND_SIZE_IN_PX =
   INTENSITY_LEGEND_GRADIENT_SIZE_IN_PX + INTENSITY_LEGEND_LABEL_SIZE_IN_PX;
 const GROUPING_LEGEND_SIZE_IN_PX = 20;
-const TOOLTIP_IDENTIFIER = "ehgl-tooltip";
+const INTENSITY_LEGEND_IDENTIFIER = "ehgl-intensity-legend";
 
 const DEFAULT_SIZE_LEGEND_SVG_PADDING = 10;
 const DEFAULT_SIZE_LEGEND_CIRCLE_GAP = 10;
 const DEFAULT_SIZE_LEGEND_CIRCLE_TEXT_GAP = 10;
 
+const DEFAULT_MIN_RADIUS_FOR_DOTPLOT = 3;
+const DEFAULT_MARGIN_BETWEEN_DOTS = 2;
+
+const DEFAULT_MARGINS = {
+  top: "25px",
+  bottom: "50px",
+  left: "50px",
+  right: "10px",
+};
+
+/**
+ * Check if a given variable is an object and not an array.
+ *
+ * @param {any} object - The variable to check.
+ * @returns {boolean} - Returns true if the variable is an object, and not an array.
+ */
 function isObject(object) {
   return typeof object === "object" && Array.isArray(object) === false;
 }
 
+/**
+ * Get the minimum and maximum values from an array.
+ *
+ * @param {Array<number>} arr - An array of numbers.
+ * @returns {Array<number>} - An array containing the minimum and maximum values, in that order.
+ */
 const getMinMax = (arr) => {
   var max = -Number.MAX_VALUE,
     min = Number.MAX_VALUE;
   arr.forEach(function (x) {
-    if (max < x) {
-      max = x;
-    }
-    if (min > x) {
-      min = x;
-    }
+    if (max < x) max = x;
+    if (min > x) min = x;
   });
   return [min, max];
 };
 
+/**
+ * Parses an object of margins and returns an object with top, bottom, left, and right margins as integers.
+ *
+ * @param {Object} margins - An object with potential margin properties.
+ * @returns {Object} - An object with top, bottom, left, and right margins as integers.
+ */
 const parseMargins = (margins) => {
   const parsedMargins = {
     top: 0,
@@ -70,6 +95,13 @@ const parseMargins = (margins) => {
   return parsedMargins;
 };
 
+/**
+ * Measure the width of a text string for a given font size using SVG.
+ *
+ * @param {string} text - The text to measure.
+ * @param {string} fontSize - The font size to use for the measurement, e.g., '16px'.
+ * @returns {number} - The width of the text in pixels.
+ */
 const getTextWidth = (text, fontSize = "16px") => {
   // Create a temporary SVG to measure the text width
   const svg = d3Selection.select("body").append("svg");
@@ -79,50 +111,117 @@ const getTextWidth = (text, fontSize = "16px") => {
   return width;
 };
 
-const createTooltip = (container, text, posX, posY) => {
-  let tooltip = d3Selection.select(container)
-    .append("div")
-    .attr("id", TOOLTIP_IDENTIFIER)
-    .style("position", "absolute")
-    .style("background", "#f9f9f9")
-    .style("padding", "8px")
-    .style("border", "1px solid #ccc")
-    .style("border-radius", "6px")
-    .style("z-index", "1000")
-    .style("visibility", "hidden");
-
-  tooltip
-    .style("visibility", "visible")
-    .text(text)
-    .style("left", posX + 10 + "px")
-    .style("top", posY - 10 + "px");
-};
-
-const removeTooltip = (container) => {
-  const tooltip = d3Selection.select(container).select(`#${TOOLTIP_IDENTIFIER}`);
-
-  if (tooltip) {
-    tooltip.remove();
-  }
-};
-
-const getMaxRadiusForDotplot = (xlen, ylen) => {
-  return getMinMax([198 / (xlen + 1), 198 / (ylen + 1)])[1] - 5;
+const getMaxRadiusForDotplot = (xlen, ylen, padding) => {
+  return Math.max(
+    Math.min(198 / (xlen + 1), 198 / (ylen + 1)) - padding,
+    DEFAULT_MIN_RADIUS_FOR_DOTPLOT
+  );
 };
 
 const getScaledRadiusForDotplot = (
   radius,
   maxRadiusScaled,
   minRadiusOriginal,
-  maxRadiusOriginal
+  maxRadiusOriginal,
+  defaultMinRadius = DEFAULT_MIN_RADIUS_FOR_DOTPLOT
 ) => {
   return (
-    (maxRadiusScaled - 5) *
-      ((radius - minRadiusOriginal) / (maxRadiusOriginal - minRadiusOriginal)) +
-    5
+    defaultMinRadius +
+    (maxRadiusScaled - defaultMinRadius) *
+      ((radius - minRadiusOriginal) / (maxRadiusOriginal - minRadiusOriginal))
   );
 };
 
+/**
+ * A function to map over both regular JavaScript arrays and typed arrays.
+ *
+ * @param {Array|TypedArray} array - The input array or typed array.
+ * @param {Function} callback - A function that produces an element of the new array,
+ *      taking three arguments:
+ *      currentValue - The current element being processed in the array.
+ *      index - The index of the current element being processed in the array.
+ *      array - The array map was called upon.
+ * @returns {Array|TypedArray} - A new array or typed array with each element being the result
+ *      of the callback function.
+ * @throws {Error} - Throws an error if the input is neither a regular array nor a typed array.
+ */
+const mapArrayOrTypedArray = (array, callback) => {
+  // Check if the input is a regular JavaScript array.
+  if (Array.isArray(array)) {
+    return array.map(callback);
+  }
+  // Check if the input is a typed array.
+  else if (
+    array instanceof Int8Array ||
+    array instanceof Uint8Array ||
+    array instanceof Uint8ClampedArray ||
+    array instanceof Int16Array ||
+    array instanceof Uint16Array ||
+    array instanceof Int32Array ||
+    array instanceof Uint32Array ||
+    array instanceof Float32Array ||
+    array instanceof Float64Array
+  ) {
+    // Create a new typed array of the same type and size as the input.
+    let result = new array.constructor(array.length);
+
+    // Use forEach to emulate the map functionality for typed arrays.
+    array.forEach((value, index) => {
+      result[index] = callback(value, index);
+    });
+
+    return result;
+  }
+  // Handle the case where the input is neither a regular array nor a typed array.
+  else {
+    throw new Error("Input is neither a normal array nor a typed array.");
+  }
+};
+
+class Tooltip {
+  constructor() {
+    if (!Tooltip.instance) {
+      Tooltip.instance = this;
+      this.createSingletonTooltip();
+    }
+    return Tooltip.instance;
+  }
+
+  createSingletonTooltip() {
+    // Create an invisible, persistent tooltip
+    this.currentTooltip = tippy(document.body, {
+      content: "",
+      trigger: "manual",
+      arrow: true,
+      placement: "right",
+    });
+  }
+
+  updateTooltip(content, x, y, options = {}) {
+    this.currentTooltip.setContent(content);
+    this.currentTooltip.setProps({
+      getReferenceClientRect: () => ({
+        width: 0,
+        height: 0,
+        top: y,
+        left: x,
+        right: x,
+        bottom: y,
+      }),
+      ...options,
+    });
+    if (!this.currentTooltip.state.isVisible) {
+      this.currentTooltip.show();
+    }
+  }
+
+  hideTooltip() {
+    if (this.currentTooltip) {
+      this.currentTooltip.hide();
+    }
+  }
+}
+
 /**
  * Base class for all matrix like layout plots.
  * This class is not to be used directly.
@@ -164,6 +263,10 @@ class BaseGL {
       ylabels: null,
     };
 
+    // Plot domain
+    this.xAxisRange = null;
+    this.yAxisRange = null;
+
     // state
     this.state = {
       size: 20,
@@ -173,8 +276,14 @@ class BaseGL {
       ygap: 0.3,
     };
 
+    this.margins = DEFAULT_MARGINS;
+
     //Default Data for labelOptions
     this.labelOptions = {
+      rowLabelsSvgXOffset: -1.05,
+      rowLabelsSvgYOffset: -1.02,
+      columnLabelsSvgXOffset: -1.02,
+      columnLabelsSvgYOffset: 1.05,
       rowLabelMaxCharacters: DEFAULT_ROW_MAX_LABEL_LENGTH_ALLOWED,
       columnLabelMaxCharacters: DEFAULT_COLUMN_MAX_LABEL_LENGTH_ALLOWED,
       rowLabelSlintAngle: DEFAULT_ROW_LABEL_SLINT_ANGLE,
@@ -234,6 +343,8 @@ class BaseGL {
 
     this.highlightedIndices = [];
     this.indexStates = {};
+
+    this.tooltipInstance = new Tooltip();
   }
 
   /**
@@ -281,6 +392,10 @@ class BaseGL {
 
   _generateSpecForLabels(spec) {
     const {
+      rowLabelsSvgXOffset,
+      rowLabelsSvgYOffset,
+      columnLabelsSvgXOffset,
+      columnLabelsSvgYOffset,
       rowLabelMaxCharacters,
       columnLabelMaxCharacters,
       rowLabelSlintAngle,
@@ -310,8 +425,8 @@ class BaseGL {
 
         maxWidth = Math.max(maxWidth, truncatedLabelWidth);
         labels.push({
-          x: -1.02 + (2 * ilx + 1) / xlabels_len,
-          y: 1.05,
+          x: columnLabelsSvgXOffset + (2 * ilx + 1) / xlabels_len,
+          y: columnLabelsSvgYOffset,
           type: "row",
           index: ilx,
           text: truncatedLabel,
@@ -344,8 +459,8 @@ class BaseGL {
         );
         maxWidth = Math.max(maxWidth, truncatedLabelWidth);
         labels.push({
-          x: -1.05,
-          y: -1.02 + (2 * ily + 1) / ylabels_len,
+          x: rowLabelsSvgXOffset,
+          y: rowLabelsSvgYOffset + (2 * ily + 1) / ylabels_len,
           type: "column",
           index: ily,
           text: truncatedLabel,
@@ -367,7 +482,7 @@ class BaseGL {
       ...spec["margins"],
       top: `${topMarginToAccountForLabels}px`,
       left: `${leftMarginToAccountForLabels}px`,
-      right: "20px",
+      right: `${GROUPING_LEGEND_SIZE_IN_PX}px`,
     };
   }
 
@@ -596,6 +711,10 @@ class BaseGL {
    * @memberof BaseGL
    * @example
    * this.labelOptions = {
+   * rowLabelsSvgXOffset: 0,
+   * rowLabelsSvgYOffset: 0,
+   * columnLabelsSvgXOffset: 0,
+   * columnLabelsSvgYOffset: 0,
    * rowLabelMaxCharacters: 10,
    * columnLabelMaxCharacters: 10,
    * rowLabelSlintAngle: 0,
@@ -605,8 +724,12 @@ class BaseGL {
    * }
    * @example
    * this.setLabelOptions({
+   * rowLabelsSvgXOffset: 0,
+   * rowLabelsSvgYOffset: 0,
+   * columnLabelsSvgXOffset: 0,
+   * columnLabelsSvgYOffset: 0,
    * rowLabelMaxCharacters: 10,
-   *  columnLabelMaxCharacters: 10,
+   * columnLabelMaxCharacters: 10,
    * rowLabelSlintAngle: 0,
    * columnLabelSlintAngle: 0,
    * rowLabelFontSize: "7px",
@@ -620,6 +743,30 @@ class BaseGL {
     };
   }
 
+  /**
+   * Set the margins for the visualization.
+   * all properties are optional, if not provided, the default values will be used.
+   * @param {object} margins, an object containing the margins
+   * @param {number} margins.top, top margin
+   * @param {number} margins.bottom, bottom margin
+   * @param {number} margins.left, left margin
+   * @param {number} margins.right, right margin
+   * @memberof BaseGL
+   * @example
+   * this.setMargins({
+   * top: '10px',
+   * bottom: '10px',
+   * left: '10px',
+   * right: '10px',
+   * })
+   **/
+  setMargins(margins) {
+    this.margins = {
+      ...this.margins,
+      ...margins,
+    };
+  }
+
   /**
    * resize the plot, without having to send the data to the GPU.
    *
@@ -774,20 +921,20 @@ class BaseGL {
       const labelType = e.detail.labelObject.type;
       e.preventDefault();
 
-      createTooltip(
-        document.body,
+      this.tooltipInstance.updateTooltip(
         labelType === "row"
           ? this.input.xlabels[hoveredIndex]
           : this.input.ylabels[hoveredIndex],
-        e.detail.event.pageX,
-        e.detail.event.pageY
+        e.detail.event.clientX,
+        e.detail.event.clientY
       );
+
       this.labelHoveredCallback(e.detail);
     });
 
     this.plot.addEventListener("labelUnhovered", (e) => {
       e.preventDefault();
-      removeTooltip(document.body);
+      this.tooltipInstance.hideTooltip();
       this.labelUnhoveredCallback(e.detail);
     });
   }
@@ -801,6 +948,11 @@ class BaseGL {
     // Only render the legend if we have the legend data and the legend dom element
     if (!this.legendDomElement || !this.intensityLegendData) return;
 
+    //Clear the legend dom element
+    d3Selection.select(this.legendDomElement)
+      .select(`#${INTENSITY_LEGEND_IDENTIFIER}`)
+      .remove();
+
     const parsedMargins = parseMargins(this._spec.margins);
     const containerWidth =
       this.legendWidth ||
@@ -809,7 +961,7 @@ class BaseGL {
       this.legendHeight ||
       this.elem.clientHeight - parsedMargins.top - parsedMargins.bottom;
 
-    const averageCharWidth = 6; // rough estimation of the width of a single character
+    const averageCharWidth = 8; // rough estimation of the width of a single character
     const legendWidth = containerWidth - 2 * averageCharWidth;
     const legendHeight = containerHeight - 2 * averageCharWidth;
 
@@ -825,12 +977,12 @@ class BaseGL {
       transformX = averageCharWidth;
     }
 
-    const svgContainer = d3
-      .select(this.legendDomElement)
+    const svgContainer = d3Selection.select(this.legendDomElement)
       .append("svg")
+      .attr("id", INTENSITY_LEGEND_IDENTIFIER)
       .attr("width", svgWidth)
       .attr("height", svgHeight)
-      .attr("overflow", "visible");
+      .style("overflow", "visible");
 
     const defs = svgContainer.append("defs");
 
@@ -949,7 +1101,7 @@ class BaseGL {
    **/
   renderRowGroupingLegend() {
     const position = this.rowGroupingLegendPosition;
-    const visibleRange = this.viewport?.yRange || DEFAULT_VISIBLE_RANGE;
+    const visibleRange = this.viewport?.yRange || this.yAxisRange;
 
     if (
       !this.rowGroupingLegendDomElement ||
@@ -983,10 +1135,13 @@ class BaseGL {
     const yScale = d3Scale.scaleLinear()
       .domain(visibleRange) // Input range is currently visible range
       .range([svgHeight, 0]); // Output range is SVG height
+    const maxYRange = this.yAxisRange[1] - this.yAxisRange[0];
+    const minY = this.yAxisRange[0];
 
     this.groupingRowData.forEach((group, idx) => {
-      const normalizedStart = (group.startIndex * 2) / totalData - 1;
-      const normalizedEnd = ((group.endIndex + 1) * 2) / totalData - 1;
+      const normalizedStart = (group.startIndex / totalData) * maxYRange + minY;
+      const normalizedEnd =
+        ((group.endIndex + 1) / totalData) * maxYRange + minY;
 
       if (
         normalizedEnd >= visibleRange[0] &&
@@ -999,7 +1154,6 @@ class BaseGL {
         const rectHeight = Math.abs(
           yScale(rectEndInView) - yScale(rectStartInView)
         );
-
         svgContainer
           .append("rect")
           .attr("x", 0)
@@ -1007,12 +1161,12 @@ class BaseGL {
           .attr("width", legendWidth)
           .attr("height", rectHeight)
           .style("fill", group.color)
-          .on("mouseover", (e) => {
+          .on("mousemove", (e) => {
             const text = group.label;
-            createTooltip(document.body, text, e.pageX, e.pageY);
+            this.tooltipInstance.updateTooltip(text, e.clientX, e.clientY);
           })
           .on("mouseout", (e) => {
-            removeTooltip(document.body);
+            this.tooltipInstance.hideTooltip();
           });
       }
     });
@@ -1029,7 +1183,7 @@ class BaseGL {
    * */
   renderColumnGroupingLegend() {
     const position = this.columnGroupingLegendPosition; // should be 'top' or 'bottom'
-    const visibleRange = this.viewport?.xRange || DEFAULT_VISIBLE_RANGE;
+    const visibleRange = this.viewport?.xRange || this.xAxisRange;
 
     // Only render the legend if we have the legend data, the dom element,
     // the position is either 'top' or 'bottom' and visibleRange exists
@@ -1069,9 +1223,13 @@ class BaseGL {
       .domain(visibleRange) // Input range is currently visible range
       .range([0, svgWidth]); // Output range is SVG width
 
+    const maxXRange = this.xAxisRange[1] - this.xAxisRange[0];
+    const minX = this.xAxisRange[0];
+
     this.groupingColumnData.forEach((group, idx) => {
-      const normalizedStart = (group.startIndex * 2) / totalData - 1;
-      const normalizedEnd = ((group.endIndex + 1) * 2) / totalData - 1;
+      const normalizedStart = (group.startIndex / totalData) * maxXRange + minX;
+      const normalizedEnd =
+        ((group.endIndex + 1) / totalData) * maxXRange + minX;
 
       if (
         normalizedEnd >= visibleRange[0] &&
@@ -1092,12 +1250,13 @@ class BaseGL {
           .attr("width", rectWidth)
           .attr("height", legendHeight)
           .style("fill", group.color)
-          .on("mouseover", (e) => {
+          .on("mousemove", (e) => {
             const text = group.label;
-            createTooltip(document.body, text, e.pageX, e.pageY);
+
+            this.tooltipInstance.updateTooltip(text, e.clientX, e.clientY);
           })
           .on("mouseout", (e) => {
-            removeTooltip(document.body);
+            this.tooltipInstance.hideTooltip();
           });
       }
     });
@@ -1122,7 +1281,19 @@ class BaseGL {
    * @param {string} orientation - The orientation of the grouping labels
    * @returns {void}
    **/
-  renderGroupingLabels(parentElement, groupingRowData, orientation) {
+  renderGroupingLabels(parentElement, groupingData, orientation) {
+    // Filter out duplicate labels in the grouping data
+    groupingData = groupingData.reduce(
+      (acc, obj) => {
+        if (!acc.seen[obj.label]) {
+          acc.seen[obj.label] = true;
+          acc.result.push(obj);
+        }
+        return acc;
+      },
+      { seen: {}, result: [] }
+    ).result;
+
     const parent = d3Selection.select(parentElement);
     const svg = parent.append("svg");
 
@@ -1130,14 +1301,14 @@ class BaseGL {
     if (orientation === "horizontal") {
       svg.attr("height", 25);
     } else {
-      svg.attr("height", groupingRowData.length * 25);
+      svg.attr("height", groupingData.length * 25);
     }
 
     const labelHeight = 25;
     let xOffset = 0;
     let yOffset = 0;
 
-    groupingRowData.forEach((data) => {
+    groupingData.forEach((data) => {
       const group = svg.append("g");
 
       group
@@ -1430,7 +1601,7 @@ class DotplotGL extends BaseGL {
    * @param {Array|number} encoding.xgap, same as size, but sets the gap along x-axis.
    * @param {Array|number} encoding.ygap, same as size, but sets the gap along y-axis.
    * @param {Array} encoding.intensityLegendData - an array of objects containing the color, intensity and label for the legend.
-   * @param {Array} encoding.sizeLegendData - an object containing minSize, maxSize and steps for the legend.
+   * @param {Array} encoding.sizeLegendData - an object containing minSize, maxSize, steps and maxSizeInPx for the legend.
    * @param {Array} encoding.rowGroupingData - an array of objects containing the startIndex, endIndex, color and label for the row grouping.
    * @param {Array} encoding.columnGroupingData - an array of objects containing the startIndex, endIndex, color and label for the column grouping.
    * @memberof BaseGL
@@ -1457,16 +1628,22 @@ class DotplotGL extends BaseGL {
     const [, maxY] = getMinMax(this.input.y);
     let xlen = maxX + 1,
       ylen = maxY + 1;
-    spec_inputs.x = this.input.x.map((e, i) => -1 + (2 * e + 1) / xlen);
-    spec_inputs.y = this.input.y.map((e, i) => -1 + (2 * e + 1) / ylen);
+
+    spec_inputs.x = mapArrayOrTypedArray(
+      this.input.x,
+      (e, i) => -1 + (2 * e + 1) / xlen
+    );
+    spec_inputs.y = mapArrayOrTypedArray(
+      this.input.y,
+      (e, i) => -1 + (2 * e + 1) / ylen
+    );
+
+    // Setting X and Y Axis Domains
+    this.xAxisRange = [-1, 1];
+    this.yAxisRange = [-1, 1];
 
     let spec = {
-      margins: {
-        top: "25px",
-        bottom: "50px",
-        left: "50px",
-        right: "10px",
-      },
+      margins: this.margins,
       defaultData: {
         x: spec_inputs.x,
         y: spec_inputs.y,
@@ -1479,12 +1656,12 @@ class DotplotGL extends BaseGL {
           x: {
             attribute: "x",
             type: "quantitative",
-            domain: [-1, 1],
+            domain: this.xAxisRange,
           },
           y: {
             attribute: "y",
             type: "quantitative",
-            domain: [-1, 1],
+            domain: this.yAxisRange,
           },
           opacity: { value: this.state.opacity },
         },
@@ -1492,7 +1669,12 @@ class DotplotGL extends BaseGL {
     };
 
     // scale size of dots
-    const maxRadiusScaled = getMaxRadiusForDotplot(xlen, ylen);
+    const maxRadiusScaled = getMaxRadiusForDotplot(
+      xlen,
+      ylen,
+      DEFAULT_MARGIN_BETWEEN_DOTS
+    );
+
     let tsize = this.state["size"];
     if (Array.isArray(this.state["size"])) {
       let [minRadiusOriginal, maxRadiusOriginal] = getMinMax(
@@ -1506,8 +1688,6 @@ class DotplotGL extends BaseGL {
           maxRadiusOriginal
         )
       );
-
-      console.log(getMinMax(tsize), "tize", tsize);
     }
 
     this._generateSpecForLabels(spec);
@@ -1587,7 +1767,8 @@ class DotplotGL extends BaseGL {
    */
   renderSizeLegend() {
     if (!this.sizeLegendData) return;
-    let { minSize, maxSize, steps } = this.sizeLegendData;
+    let { minSize, maxSize, steps, maxSizeInPx, minSizeInPx } =
+      this.sizeLegendData;
     const [, maxX] = getMinMax(this.input.x);
     const [, maxY] = getMinMax(this.input.y);
     let xlen = maxX + 1,
@@ -1596,19 +1777,37 @@ class DotplotGL extends BaseGL {
     const [minRadiusOriginal, maxRadiusOriginal] = getMinMax(
       this.state["size"]
     );
-    const maxRadiusScaled = getMaxRadiusForDotplot(xlen, ylen);
+    const maxRadiusAsPerPlot = getMaxRadiusForDotplot(
+      xlen,
+      ylen,
+      DEFAULT_MARGIN_BETWEEN_DOTS
+    );
     minSize = getScaledRadiusForDotplot(
-      minSize,
-      maxRadiusScaled,
+      minSize || minRadiusOriginal, // if minSize is not provided, use minRadiusOriginal
+      maxRadiusAsPerPlot,
       minRadiusOriginal,
       maxRadiusOriginal
     );
     maxSize = getScaledRadiusForDotplot(
-      maxSize,
-      maxRadiusScaled,
+      maxSize || maxRadiusOriginal, // if maxSize is not provided, use maxRadiusOriginal
+      maxRadiusAsPerPlot,
       minRadiusOriginal,
       maxRadiusOriginal
     );
+
+    // Desired max size in pixels
+    const maxPx = maxSizeInPx || maxSize;
+
+    // Desired min size in pixels
+    const minPx = minSizeInPx || minSize;
+
+    // Create a linear scale
+    const sizeScale = d3Scale.scaleLinear()
+      .domain([minSize, maxSize])
+      .range([minPx, maxPx]);
+
+    minSize = sizeScale(minSize);
+    maxSize = sizeScale(maxSize);
     const orientation = this.sizeLegendOptions.orientation;
 
     // Calculate step size
@@ -1720,7 +1919,6 @@ class DotplotGL extends BaseGL {
             .style("right", "0px");
           break;
       }
-      console.log("before", this._spec.margins);
 
       this.updateMarginsToAccountForSizeLegend();
       this.plot.setSpecification(this._spec);
@@ -1942,22 +2140,28 @@ class RectplotGL extends BaseGL {
     };
 
     let spec_inputs = {};
-    spec_inputs.x = this.input.x.map((e, i) => String(e));
-    spec_inputs.y = this.input.y.map((e, i) => String(e));
+
+    // Setting X and Y Axis Domains to [-1, 1]
+    this.xAxisRange = [-1, 1];
+    this.yAxisRange = [-1, 1];
+
+    spec_inputs.x = mapArrayOrTypedArray(this.input.x, (e, i) => String(e));
+    spec_inputs.y = mapArrayOrTypedArray(this.input.y, (e, i) => String(e));
 
     let default_width = 198 / (getMinMax(this.input.x)[1] + 1);
     let default_height = 198 / (getMinMax(this.input.y)[1] + 1);
 
-    spec_inputs.width = this.input.x.map((e, i) => default_width - xGaps(i));
-    spec_inputs.height = this.input.y.map((e, i) => default_height - yGaps(i));
+    spec_inputs.width = mapArrayOrTypedArray(
+      this.input.x,
+      (e, i) => default_width - xGaps(i)
+    );
+    spec_inputs.height = mapArrayOrTypedArray(
+      this.input.y,
+      (e, i) => default_height - yGaps(i)
+    );
 
     let spec = {
-      margins: {
-        top: "25px",
-        bottom: "50px",
-        left: "50px",
-        right: "10px",
-      },
+      margins: this.margins,
       defaultData: {
         x: spec_inputs.x,
         y: spec_inputs.y,
@@ -2072,13 +2276,12 @@ class TickplotGL extends BaseGL {
       }
     }
 
+    // Setting X and Y Axis Domains
+    this.xAxisRange = getMinMax(this.input.x);
+    this.yAxisRange = getMinMax(this.input.y);
+
     let spec = {
-      margins: {
-        top: "25px",
-        bottom: "50px",
-        left: "50px",
-        right: "10px",
-      },
+      margins: this.margins,
       defaultData: {
         x: this.input.x,
         y: this.input.y,
@@ -2091,12 +2294,12 @@ class TickplotGL extends BaseGL {
           x: {
             attribute: "x",
             type: "quantitative",
-            domain: getMinMax(this.input.x),
+            domain: this.xAxisRange,
           },
           y: {
             attribute: "y",
             type: "quantitative",
-            domain: getMinMax(this.input.y),
+            domain: this.yAxisRange,
           },
           opacity: { value: this.state.opacity },
           width: { value: default_width },
diff --git a/app/index.html b/app/index.html
index 68ddf36..2c87ed3 100644
--- a/app/index.html
+++ b/app/index.html
@@ -11,6 +11,7 @@
   <script src="https://d3js.org/d3-color.v1.min.js"></script>
   <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
   <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
+  <link   href="./../dist/ehgl.css" rel="stylesheet">
   <style>
     body {
       font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
diff --git a/app/index.js b/app/index.js
index 19509c1..4b16b3e 100644
--- a/app/index.js
+++ b/app/index.js
@@ -1,8035 +1,9199 @@
-import { g as getDimAndMarginStyleForSpecification, D as DEFAULT_WIDTH, a as DEFAULT_HEIGHT, t as throttleWithRAF, b as getViewportForSpecification, c as cloneMouseEvent, d as getPointsBySelectMode, e as calculateZoomLevel, s as scale, f as getScaleForSpecification, h as formatSpecifier$1, i as exponent$1, p as precisionRound$1, j as formatPrefix$1, k as format$1, l as constant$3, m as color$1, r as rgb$2 } from './rgb-b646728b-0756143b.js';
+import { g as getDimAndMarginStyleForSpecification, D as DEFAULT_WIDTH, a as DEFAULT_HEIGHT, t as throttleWithRAF, b as getViewportForSpecification, c as cloneMouseEvent, d as getPointsBySelectMode, e as calculateZoomLevel, s as scale, f as getScaleForSpecification, h as formatSpecifier$1, i as exponent$1, p as precisionRound$1, j as formatPrefix$1, k as format$1, l as constant$3, m as color$1, r as rgb$2 } from './rgb-b646728b-2f709b61.js';
 
-var xhtml = "http://www.w3.org/1999/xhtml";
-
-var namespaces = {
-  svg: "http://www.w3.org/2000/svg",
-  xhtml: xhtml,
-  xlink: "http://www.w3.org/1999/xlink",
-  xml: "http://www.w3.org/XML/1998/namespace",
-  xmlns: "http://www.w3.org/2000/xmlns/"
-};
-
-function namespace(name) {
-  var prefix = name += "", i = prefix.indexOf(":");
-  if (i >= 0 && (prefix = name.slice(0, i)) !== "xmlns") name = name.slice(i + 1);
-  return namespaces.hasOwnProperty(prefix) ? {space: namespaces[prefix], local: name} : name; // eslint-disable-line no-prototype-builtins
-}
-
-function creatorInherit(name) {
-  return function() {
-    var document = this.ownerDocument,
-        uri = this.namespaceURI;
-    return uri === xhtml && document.documentElement.namespaceURI === xhtml
-        ? document.createElement(name)
-        : document.createElementNS(uri, name);
-  };
-}
-
-function creatorFixed(fullname) {
-  return function() {
-    return this.ownerDocument.createElementNS(fullname.space, fullname.local);
-  };
+function ascending(a, b) {
+  return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
 }
 
-function creator(name) {
-  var fullname = namespace(name);
-  return (fullname.local
-      ? creatorFixed
-      : creatorInherit)(fullname);
+function descending(a, b) {
+  return a == null || b == null ? NaN
+    : b < a ? -1
+    : b > a ? 1
+    : b >= a ? 0
+    : NaN;
 }
 
-function none() {}
+function bisector(f) {
+  let compare1, compare2, delta;
 
-function selector(selector) {
-  return selector == null ? none : function() {
-    return this.querySelector(selector);
-  };
-}
+  // If an accessor is specified, promote it to a comparator. In this case we
+  // can test whether the search value is (self-) comparable. We can’t do this
+  // for a comparator (except for specific, known comparators) because we can’t
+  // tell if the comparator is symmetric, and an asymmetric comparator can’t be
+  // used to test whether a single value is comparable.
+  if (f.length !== 2) {
+    compare1 = ascending;
+    compare2 = (d, x) => ascending(f(d), x);
+    delta = (d, x) => f(d) - x;
+  } else {
+    compare1 = f === ascending || f === descending ? f : zero;
+    compare2 = f;
+    delta = f;
+  }
 
-function selection_select(select) {
-  if (typeof select !== "function") select = selector(select);
+  function left(a, x, lo = 0, hi = a.length) {
+    if (lo < hi) {
+      if (compare1(x, x) !== 0) return hi;
+      do {
+        const mid = (lo + hi) >>> 1;
+        if (compare2(a[mid], x) < 0) lo = mid + 1;
+        else hi = mid;
+      } while (lo < hi);
+    }
+    return lo;
+  }
 
-  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) {
-      if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {
-        if ("__data__" in node) subnode.__data__ = node.__data__;
-        subgroup[i] = subnode;
-      }
+  function right(a, x, lo = 0, hi = a.length) {
+    if (lo < hi) {
+      if (compare1(x, x) !== 0) return hi;
+      do {
+        const mid = (lo + hi) >>> 1;
+        if (compare2(a[mid], x) <= 0) lo = mid + 1;
+        else hi = mid;
+      } while (lo < hi);
     }
+    return lo;
   }
 
-  return new Selection(subgroups, this._parents);
-}
+  function center(a, x, lo = 0, hi = a.length) {
+    const i = left(a, x, lo, hi - 1);
+    return i > lo && delta(a[i - 1], x) > -delta(a[i], x) ? i - 1 : i;
+  }
 
-// Given something array like (or null), returns something that is strictly an
-// array. This is used to ensure that array-like objects passed to d3.selectAll
-// or selection.selectAll are converted into proper arrays when creating a
-// selection; we don’t ever want to create a selection backed by a live
-// HTMLCollection or NodeList. However, note that selection.selectAll will use a
-// static NodeList as a group, since it safely derived from querySelectorAll.
-function array(x) {
-  return x == null ? [] : Array.isArray(x) ? x : Array.from(x);
+  return {left, center, right};
 }
 
-function empty() {
-  return [];
+function zero() {
+  return 0;
 }
 
-function selectorAll(selector) {
-  return selector == null ? empty : function() {
-    return this.querySelectorAll(selector);
-  };
+function number(x) {
+  return x === null ? NaN : +x;
 }
 
-function arrayAll(select) {
-  return function() {
-    return array(select.apply(this, arguments));
-  };
-}
+const ascendingBisect = bisector(ascending);
+const bisectRight = ascendingBisect.right;
+const bisectCenter = bisector(number).center;
 
-function selection_selectAll(select) {
-  if (typeof select === "function") select = arrayAll(select);
-  else select = selectorAll(select);
+const e10 = Math.sqrt(50),
+    e5 = Math.sqrt(10),
+    e2 = Math.sqrt(2);
 
-  for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
-      if (node = group[i]) {
-        subgroups.push(select.call(node, node.__data__, i, group));
-        parents.push(node);
-      }
-    }
+function tickSpec(start, stop, count) {
+  const step = (stop - start) / Math.max(0, count),
+      power = Math.floor(Math.log10(step)),
+      error = step / Math.pow(10, power),
+      factor = error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1;
+  let i1, i2, inc;
+  if (power < 0) {
+    inc = Math.pow(10, -power) / factor;
+    i1 = Math.round(start * inc);
+    i2 = Math.round(stop * inc);
+    if (i1 / inc < start) ++i1;
+    if (i2 / inc > stop) --i2;
+    inc = -inc;
+  } else {
+    inc = Math.pow(10, power) * factor;
+    i1 = Math.round(start / inc);
+    i2 = Math.round(stop / inc);
+    if (i1 * inc < start) ++i1;
+    if (i2 * inc > stop) --i2;
   }
-
-  return new Selection(subgroups, parents);
+  if (i2 < i1 && 0.5 <= count && count < 2) return tickSpec(start, stop, count * 2);
+  return [i1, i2, inc];
 }
 
-function matcher(selector) {
-  return function() {
-    return this.matches(selector);
-  };
+function ticks(start, stop, count) {
+  stop = +stop, start = +start, count = +count;
+  if (!(count > 0)) return [];
+  if (start === stop) return [start];
+  const reverse = stop < start, [i1, i2, inc] = reverse ? tickSpec(stop, start, count) : tickSpec(start, stop, count);
+  if (!(i2 >= i1)) return [];
+  const n = i2 - i1 + 1, ticks = new Array(n);
+  if (reverse) {
+    if (inc < 0) for (let i = 0; i < n; ++i) ticks[i] = (i2 - i) / -inc;
+    else for (let i = 0; i < n; ++i) ticks[i] = (i2 - i) * inc;
+  } else {
+    if (inc < 0) for (let i = 0; i < n; ++i) ticks[i] = (i1 + i) / -inc;
+    else for (let i = 0; i < n; ++i) ticks[i] = (i1 + i) * inc;
+  }
+  return ticks;
 }
 
-function childMatcher(selector) {
-  return function(node) {
-    return node.matches(selector);
-  };
+function tickIncrement(start, stop, count) {
+  stop = +stop, start = +start, count = +count;
+  return tickSpec(start, stop, count)[2];
 }
 
-var find = Array.prototype.find;
-
-function childFind(match) {
-  return function() {
-    return find.call(this.children, match);
-  };
+function tickStep(start, stop, count) {
+  stop = +stop, start = +start, count = +count;
+  const reverse = stop < start, inc = reverse ? tickIncrement(stop, start, count) : tickIncrement(start, stop, count);
+  return (reverse ? -1 : 1) * (inc < 0 ? 1 / -inc : inc);
 }
 
-function childFirst() {
-  return this.firstElementChild;
-}
+function range(start, stop, step) {
+  start = +start, stop = +stop, step = (n = arguments.length) < 2 ? (stop = start, start = 0, 1) : n < 3 ? 1 : +step;
 
-function selection_selectChild(match) {
-  return this.select(match == null ? childFirst
-      : childFind(typeof match === "function" ? match : childMatcher(match)));
-}
+  var i = -1,
+      n = Math.max(0, Math.ceil((stop - start) / step)) | 0,
+      range = new Array(n);
 
-var filter = Array.prototype.filter;
+  while (++i < n) {
+    range[i] = start + i * step;
+  }
 
-function children() {
-  return Array.from(this.children);
+  return range;
 }
 
-function childrenFilter(match) {
-  return function() {
-    return filter.call(this.children, match);
-  };
+function initRange(domain, range) {
+  switch (arguments.length) {
+    case 0: break;
+    case 1: this.range(domain); break;
+    default: this.range(range).domain(domain); break;
+  }
+  return this;
 }
 
-function selection_selectChildren(match) {
-  return this.selectAll(match == null ? children
-      : childrenFilter(typeof match === "function" ? match : childMatcher(match)));
+function define(constructor, factory, prototype) {
+  constructor.prototype = factory.prototype = prototype;
+  prototype.constructor = constructor;
 }
 
-function selection_filter(match) {
-  if (typeof match !== "function") match = matcher(match);
-
-  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) {
-      if ((node = group[i]) && match.call(node, node.__data__, i, group)) {
-        subgroup.push(node);
-      }
-    }
-  }
-
-  return new Selection(subgroups, this._parents);
+function extend(parent, definition) {
+  var prototype = Object.create(parent.prototype);
+  for (var key in definition) prototype[key] = definition[key];
+  return prototype;
 }
 
-function sparse(update) {
-  return new Array(update.length);
-}
+function Color() {}
 
-function selection_enter() {
-  return new Selection(this._enter || this._groups.map(sparse), this._parents);
-}
+var darker = 0.7;
+var brighter = 1 / darker;
 
-function EnterNode(parent, datum) {
-  this.ownerDocument = parent.ownerDocument;
-  this.namespaceURI = parent.namespaceURI;
-  this._next = null;
-  this._parent = parent;
-  this.__data__ = datum;
-}
+var reI = "\\s*([+-]?\\d+)\\s*",
+    reN = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*",
+    reP = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
+    reHex = /^#([0-9a-f]{3,8})$/,
+    reRgbInteger = new RegExp(`^rgb\\(${reI},${reI},${reI}\\)$`),
+    reRgbPercent = new RegExp(`^rgb\\(${reP},${reP},${reP}\\)$`),
+    reRgbaInteger = new RegExp(`^rgba\\(${reI},${reI},${reI},${reN}\\)$`),
+    reRgbaPercent = new RegExp(`^rgba\\(${reP},${reP},${reP},${reN}\\)$`),
+    reHslPercent = new RegExp(`^hsl\\(${reN},${reP},${reP}\\)$`),
+    reHslaPercent = new RegExp(`^hsla\\(${reN},${reP},${reP},${reN}\\)$`);
 
-EnterNode.prototype = {
-  constructor: EnterNode,
-  appendChild: function(child) { return this._parent.insertBefore(child, this._next); },
-  insertBefore: function(child, next) { return this._parent.insertBefore(child, next); },
-  querySelector: function(selector) { return this._parent.querySelector(selector); },
-  querySelectorAll: function(selector) { return this._parent.querySelectorAll(selector); }
+var named = {
+  aliceblue: 0xf0f8ff,
+  antiquewhite: 0xfaebd7,
+  aqua: 0x00ffff,
+  aquamarine: 0x7fffd4,
+  azure: 0xf0ffff,
+  beige: 0xf5f5dc,
+  bisque: 0xffe4c4,
+  black: 0x000000,
+  blanchedalmond: 0xffebcd,
+  blue: 0x0000ff,
+  blueviolet: 0x8a2be2,
+  brown: 0xa52a2a,
+  burlywood: 0xdeb887,
+  cadetblue: 0x5f9ea0,
+  chartreuse: 0x7fff00,
+  chocolate: 0xd2691e,
+  coral: 0xff7f50,
+  cornflowerblue: 0x6495ed,
+  cornsilk: 0xfff8dc,
+  crimson: 0xdc143c,
+  cyan: 0x00ffff,
+  darkblue: 0x00008b,
+  darkcyan: 0x008b8b,
+  darkgoldenrod: 0xb8860b,
+  darkgray: 0xa9a9a9,
+  darkgreen: 0x006400,
+  darkgrey: 0xa9a9a9,
+  darkkhaki: 0xbdb76b,
+  darkmagenta: 0x8b008b,
+  darkolivegreen: 0x556b2f,
+  darkorange: 0xff8c00,
+  darkorchid: 0x9932cc,
+  darkred: 0x8b0000,
+  darksalmon: 0xe9967a,
+  darkseagreen: 0x8fbc8f,
+  darkslateblue: 0x483d8b,
+  darkslategray: 0x2f4f4f,
+  darkslategrey: 0x2f4f4f,
+  darkturquoise: 0x00ced1,
+  darkviolet: 0x9400d3,
+  deeppink: 0xff1493,
+  deepskyblue: 0x00bfff,
+  dimgray: 0x696969,
+  dimgrey: 0x696969,
+  dodgerblue: 0x1e90ff,
+  firebrick: 0xb22222,
+  floralwhite: 0xfffaf0,
+  forestgreen: 0x228b22,
+  fuchsia: 0xff00ff,
+  gainsboro: 0xdcdcdc,
+  ghostwhite: 0xf8f8ff,
+  gold: 0xffd700,
+  goldenrod: 0xdaa520,
+  gray: 0x808080,
+  green: 0x008000,
+  greenyellow: 0xadff2f,
+  grey: 0x808080,
+  honeydew: 0xf0fff0,
+  hotpink: 0xff69b4,
+  indianred: 0xcd5c5c,
+  indigo: 0x4b0082,
+  ivory: 0xfffff0,
+  khaki: 0xf0e68c,
+  lavender: 0xe6e6fa,
+  lavenderblush: 0xfff0f5,
+  lawngreen: 0x7cfc00,
+  lemonchiffon: 0xfffacd,
+  lightblue: 0xadd8e6,
+  lightcoral: 0xf08080,
+  lightcyan: 0xe0ffff,
+  lightgoldenrodyellow: 0xfafad2,
+  lightgray: 0xd3d3d3,
+  lightgreen: 0x90ee90,
+  lightgrey: 0xd3d3d3,
+  lightpink: 0xffb6c1,
+  lightsalmon: 0xffa07a,
+  lightseagreen: 0x20b2aa,
+  lightskyblue: 0x87cefa,
+  lightslategray: 0x778899,
+  lightslategrey: 0x778899,
+  lightsteelblue: 0xb0c4de,
+  lightyellow: 0xffffe0,
+  lime: 0x00ff00,
+  limegreen: 0x32cd32,
+  linen: 0xfaf0e6,
+  magenta: 0xff00ff,
+  maroon: 0x800000,
+  mediumaquamarine: 0x66cdaa,
+  mediumblue: 0x0000cd,
+  mediumorchid: 0xba55d3,
+  mediumpurple: 0x9370db,
+  mediumseagreen: 0x3cb371,
+  mediumslateblue: 0x7b68ee,
+  mediumspringgreen: 0x00fa9a,
+  mediumturquoise: 0x48d1cc,
+  mediumvioletred: 0xc71585,
+  midnightblue: 0x191970,
+  mintcream: 0xf5fffa,
+  mistyrose: 0xffe4e1,
+  moccasin: 0xffe4b5,
+  navajowhite: 0xffdead,
+  navy: 0x000080,
+  oldlace: 0xfdf5e6,
+  olive: 0x808000,
+  olivedrab: 0x6b8e23,
+  orange: 0xffa500,
+  orangered: 0xff4500,
+  orchid: 0xda70d6,
+  palegoldenrod: 0xeee8aa,
+  palegreen: 0x98fb98,
+  paleturquoise: 0xafeeee,
+  palevioletred: 0xdb7093,
+  papayawhip: 0xffefd5,
+  peachpuff: 0xffdab9,
+  peru: 0xcd853f,
+  pink: 0xffc0cb,
+  plum: 0xdda0dd,
+  powderblue: 0xb0e0e6,
+  purple: 0x800080,
+  rebeccapurple: 0x663399,
+  red: 0xff0000,
+  rosybrown: 0xbc8f8f,
+  royalblue: 0x4169e1,
+  saddlebrown: 0x8b4513,
+  salmon: 0xfa8072,
+  sandybrown: 0xf4a460,
+  seagreen: 0x2e8b57,
+  seashell: 0xfff5ee,
+  sienna: 0xa0522d,
+  silver: 0xc0c0c0,
+  skyblue: 0x87ceeb,
+  slateblue: 0x6a5acd,
+  slategray: 0x708090,
+  slategrey: 0x708090,
+  snow: 0xfffafa,
+  springgreen: 0x00ff7f,
+  steelblue: 0x4682b4,
+  tan: 0xd2b48c,
+  teal: 0x008080,
+  thistle: 0xd8bfd8,
+  tomato: 0xff6347,
+  turquoise: 0x40e0d0,
+  violet: 0xee82ee,
+  wheat: 0xf5deb3,
+  white: 0xffffff,
+  whitesmoke: 0xf5f5f5,
+  yellow: 0xffff00,
+  yellowgreen: 0x9acd32
 };
 
-function constant(x) {
-  return function() {
-    return x;
-  };
+define(Color, color, {
+  copy(channels) {
+    return Object.assign(new this.constructor, this, channels);
+  },
+  displayable() {
+    return this.rgb().displayable();
+  },
+  hex: color_formatHex, // Deprecated! Use color.formatHex.
+  formatHex: color_formatHex,
+  formatHex8: color_formatHex8,
+  formatHsl: color_formatHsl,
+  formatRgb: color_formatRgb,
+  toString: color_formatRgb
+});
+
+function color_formatHex() {
+  return this.rgb().formatHex();
 }
 
-function bindIndex(parent, group, enter, update, exit, data) {
-  var i = 0,
-      node,
-      groupLength = group.length,
-      dataLength = data.length;
+function color_formatHex8() {
+  return this.rgb().formatHex8();
+}
 
-  // Put any non-null nodes that fit into update.
-  // Put any null nodes into enter.
-  // Put any remaining data into enter.
-  for (; i < dataLength; ++i) {
-    if (node = group[i]) {
-      node.__data__ = data[i];
-      update[i] = node;
-    } else {
-      enter[i] = new EnterNode(parent, data[i]);
-    }
-  }
+function color_formatHsl() {
+  return hslConvert(this).formatHsl();
+}
 
-  // Put any non-null nodes that don’t fit into exit.
-  for (; i < groupLength; ++i) {
-    if (node = group[i]) {
-      exit[i] = node;
-    }
-  }
+function color_formatRgb() {
+  return this.rgb().formatRgb();
 }
 
-function bindKey(parent, group, enter, update, exit, data, key) {
-  var i,
-      node,
-      nodeByKeyValue = new Map,
-      groupLength = group.length,
-      dataLength = data.length,
-      keyValues = new Array(groupLength),
-      keyValue;
+function color(format) {
+  var m, l;
+  format = (format + "").trim().toLowerCase();
+  return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) // #ff0000
+      : l === 3 ? new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1) // #f00
+      : l === 8 ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
+      : l === 4 ? rgba((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000
+      : null) // invalid hex
+      : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
+      : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
+      : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
+      : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)
+      : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)
+      : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)
+      : named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins
+      : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0)
+      : null;
+}
 
-  // Compute the key for each node.
-  // If multiple nodes have the same key, the duplicates are added to exit.
-  for (i = 0; i < groupLength; ++i) {
-    if (node = group[i]) {
-      keyValues[i] = keyValue = key.call(node, node.__data__, i, group) + "";
-      if (nodeByKeyValue.has(keyValue)) {
-        exit[i] = node;
-      } else {
-        nodeByKeyValue.set(keyValue, node);
-      }
-    }
-  }
+function rgbn(n) {
+  return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
+}
 
-  // Compute the key for each datum.
-  // If there a node associated with this key, join and add it to update.
-  // If there is not (or the key is a duplicate), add it to enter.
-  for (i = 0; i < dataLength; ++i) {
-    keyValue = key.call(parent, data[i], i, data) + "";
-    if (node = nodeByKeyValue.get(keyValue)) {
-      update[i] = node;
-      node.__data__ = data[i];
-      nodeByKeyValue.delete(keyValue);
-    } else {
-      enter[i] = new EnterNode(parent, data[i]);
-    }
-  }
+function rgba(r, g, b, a) {
+  if (a <= 0) r = g = b = NaN;
+  return new Rgb(r, g, b, a);
+}
 
-  // Add any remaining nodes that were not bound to data to exit.
-  for (i = 0; i < groupLength; ++i) {
-    if ((node = group[i]) && (nodeByKeyValue.get(keyValues[i]) === node)) {
-      exit[i] = node;
-    }
-  }
+function rgbConvert(o) {
+  if (!(o instanceof Color)) o = color(o);
+  if (!o) return new Rgb;
+  o = o.rgb();
+  return new Rgb(o.r, o.g, o.b, o.opacity);
 }
 
-function datum(node) {
-  return node.__data__;
+function rgb(r, g, b, opacity) {
+  return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
 }
 
-function selection_data(value, key) {
-  if (!arguments.length) return Array.from(this, datum);
+function Rgb(r, g, b, opacity) {
+  this.r = +r;
+  this.g = +g;
+  this.b = +b;
+  this.opacity = +opacity;
+}
 
-  var bind = key ? bindKey : bindIndex,
-      parents = this._parents,
-      groups = this._groups;
+define(Rgb, rgb, extend(Color, {
+  brighter(k) {
+    k = k == null ? brighter : Math.pow(brighter, k);
+    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
+  },
+  darker(k) {
+    k = k == null ? darker : Math.pow(darker, k);
+    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
+  },
+  rgb() {
+    return this;
+  },
+  clamp() {
+    return new Rgb(clampi(this.r), clampi(this.g), clampi(this.b), clampa(this.opacity));
+  },
+  displayable() {
+    return (-0.5 <= this.r && this.r < 255.5)
+        && (-0.5 <= this.g && this.g < 255.5)
+        && (-0.5 <= this.b && this.b < 255.5)
+        && (0 <= this.opacity && this.opacity <= 1);
+  },
+  hex: rgb_formatHex, // Deprecated! Use color.formatHex.
+  formatHex: rgb_formatHex,
+  formatHex8: rgb_formatHex8,
+  formatRgb: rgb_formatRgb,
+  toString: rgb_formatRgb
+}));
 
-  if (typeof value !== "function") value = constant(value);
+function rgb_formatHex() {
+  return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}`;
+}
 
-  for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
-    var parent = parents[j],
-        group = groups[j],
-        groupLength = group.length,
-        data = arraylike(value.call(parent, parent && parent.__data__, j, parents)),
-        dataLength = data.length,
-        enterGroup = enter[j] = new Array(dataLength),
-        updateGroup = update[j] = new Array(dataLength),
-        exitGroup = exit[j] = new Array(groupLength);
+function rgb_formatHex8() {
+  return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}${hex((isNaN(this.opacity) ? 1 : this.opacity) * 255)}`;
+}
 
-    bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
+function rgb_formatRgb() {
+  const a = clampa(this.opacity);
+  return `${a === 1 ? "rgb(" : "rgba("}${clampi(this.r)}, ${clampi(this.g)}, ${clampi(this.b)}${a === 1 ? ")" : `, ${a})`}`;
+}
 
-    // Now connect the enter nodes to their following update node, such that
-    // appendChild can insert the materialized enter node before this node,
-    // rather than at the end of the parent node.
-    for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
-      if (previous = enterGroup[i0]) {
-        if (i0 >= i1) i1 = i0 + 1;
-        while (!(next = updateGroup[i1]) && ++i1 < dataLength);
-        previous._next = next || null;
-      }
-    }
-  }
+function clampa(opacity) {
+  return isNaN(opacity) ? 1 : Math.max(0, Math.min(1, opacity));
+}
 
-  update = new Selection(update, parents);
-  update._enter = enter;
-  update._exit = exit;
-  return update;
+function clampi(value) {
+  return Math.max(0, Math.min(255, Math.round(value) || 0));
 }
 
-// Given some data, this returns an array-like view of it: an object that
-// exposes a length property and allows numeric indexing. Note that unlike
-// selectAll, this isn’t worried about “live” collections because the resulting
-// array will only be used briefly while data is being bound. (It is possible to
-// cause the data to change while iterating by using a key function, but please
-// don’t; we’d rather avoid a gratuitous copy.)
-function arraylike(data) {
-  return typeof data === "object" && "length" in data
-    ? data // Array, TypedArray, NodeList, array-like
-    : Array.from(data); // Map, Set, iterable, string, or anything else
+function hex(value) {
+  value = clampi(value);
+  return (value < 16 ? "0" : "") + value.toString(16);
 }
 
-function selection_exit() {
-  return new Selection(this._exit || this._groups.map(sparse), this._parents);
+function hsla(h, s, l, a) {
+  if (a <= 0) h = s = l = NaN;
+  else if (l <= 0 || l >= 1) h = s = NaN;
+  else if (s <= 0) h = NaN;
+  return new Hsl(h, s, l, a);
 }
 
-function selection_join(onenter, onupdate, onexit) {
-  var enter = this.enter(), update = this, exit = this.exit();
-  if (typeof onenter === "function") {
-    enter = onenter(enter);
-    if (enter) enter = enter.selection();
+function hslConvert(o) {
+  if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
+  if (!(o instanceof Color)) o = color(o);
+  if (!o) return new Hsl;
+  if (o instanceof Hsl) return o;
+  o = o.rgb();
+  var r = o.r / 255,
+      g = o.g / 255,
+      b = o.b / 255,
+      min = Math.min(r, g, b),
+      max = Math.max(r, g, b),
+      h = NaN,
+      s = max - min,
+      l = (max + min) / 2;
+  if (s) {
+    if (r === max) h = (g - b) / s + (g < b) * 6;
+    else if (g === max) h = (b - r) / s + 2;
+    else h = (r - g) / s + 4;
+    s /= l < 0.5 ? max + min : 2 - max - min;
+    h *= 60;
   } else {
-    enter = enter.append(onenter + "");
-  }
-  if (onupdate != null) {
-    update = onupdate(update);
-    if (update) update = update.selection();
+    s = l > 0 && l < 1 ? 0 : h;
   }
-  if (onexit == null) exit.remove(); else onexit(exit);
-  return enter && update ? enter.merge(update).order() : update;
+  return new Hsl(h, s, l, o.opacity);
 }
 
-function selection_merge(context) {
-  var selection = context.selection ? context.selection() : context;
+function hsl(h, s, l, opacity) {
+  return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
+}
 
-  for (var groups0 = this._groups, groups1 = selection._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {
-    for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) {
-      if (node = group0[i] || group1[i]) {
-        merge[i] = node;
-      }
-    }
-  }
+function Hsl(h, s, l, opacity) {
+  this.h = +h;
+  this.s = +s;
+  this.l = +l;
+  this.opacity = +opacity;
+}
 
-  for (; j < m0; ++j) {
-    merges[j] = groups0[j];
+define(Hsl, hsl, extend(Color, {
+  brighter(k) {
+    k = k == null ? brighter : Math.pow(brighter, k);
+    return new Hsl(this.h, this.s, this.l * k, this.opacity);
+  },
+  darker(k) {
+    k = k == null ? darker : Math.pow(darker, k);
+    return new Hsl(this.h, this.s, this.l * k, this.opacity);
+  },
+  rgb() {
+    var h = this.h % 360 + (this.h < 0) * 360,
+        s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
+        l = this.l,
+        m2 = l + (l < 0.5 ? l : 1 - l) * s,
+        m1 = 2 * l - m2;
+    return new Rgb(
+      hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
+      hsl2rgb(h, m1, m2),
+      hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
+      this.opacity
+    );
+  },
+  clamp() {
+    return new Hsl(clamph(this.h), clampt(this.s), clampt(this.l), clampa(this.opacity));
+  },
+  displayable() {
+    return (0 <= this.s && this.s <= 1 || isNaN(this.s))
+        && (0 <= this.l && this.l <= 1)
+        && (0 <= this.opacity && this.opacity <= 1);
+  },
+  formatHsl() {
+    const a = clampa(this.opacity);
+    return `${a === 1 ? "hsl(" : "hsla("}${clamph(this.h)}, ${clampt(this.s) * 100}%, ${clampt(this.l) * 100}%${a === 1 ? ")" : `, ${a})`}`;
   }
+}));
 
-  return new Selection(merges, this._parents);
+function clamph(value) {
+  value = (value || 0) % 360;
+  return value < 0 ? value + 360 : value;
 }
 
-function selection_order() {
-
-  for (var groups = this._groups, j = -1, m = groups.length; ++j < m;) {
-    for (var group = groups[j], i = group.length - 1, next = group[i], node; --i >= 0;) {
-      if (node = group[i]) {
-        if (next && node.compareDocumentPosition(next) ^ 4) next.parentNode.insertBefore(node, next);
-        next = node;
-      }
-    }
-  }
+function clampt(value) {
+  return Math.max(0, Math.min(1, value || 0));
+}
 
-  return this;
+/* From FvD 13.37, CSS Color Module Level 3 */
+function hsl2rgb(h, m1, m2) {
+  return (h < 60 ? m1 + (m2 - m1) * h / 60
+      : h < 180 ? m2
+      : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60
+      : m1) * 255;
 }
 
-function selection_sort(compare) {
-  if (!compare) compare = ascending;
+var constant = x => () => x;
 
-  function compareNode(a, b) {
-    return a && b ? compare(a.__data__, b.__data__) : !a - !b;
-  }
+function linear(a, d) {
+  return function(t) {
+    return a + t * d;
+  };
+}
 
-  for (var groups = this._groups, m = groups.length, sortgroups = new Array(m), j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, sortgroup = sortgroups[j] = new Array(n), node, i = 0; i < n; ++i) {
-      if (node = group[i]) {
-        sortgroup[i] = node;
-      }
-    }
-    sortgroup.sort(compareNode);
-  }
-
-  return new Selection(sortgroups, this._parents).order();
-}
-
-function ascending(a, b) {
-  return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+function exponential(a, b, y) {
+  return a = Math.pow(a, y), b = Math.pow(b, y) - a, y = 1 / y, function(t) {
+    return Math.pow(a + t * b, y);
+  };
 }
 
-function selection_call() {
-  var callback = arguments[0];
-  arguments[0] = this;
-  callback.apply(null, arguments);
-  return this;
+function gamma(y) {
+  return (y = +y) === 1 ? nogamma : function(a, b) {
+    return b - a ? exponential(a, b, y) : constant(isNaN(a) ? b : a);
+  };
 }
 
-function selection_nodes() {
-  return Array.from(this);
+function nogamma(a, b) {
+  var d = b - a;
+  return d ? linear(a, d) : constant(isNaN(a) ? b : a);
 }
 
-function selection_node() {
+var rgb$1 = (function rgbGamma(y) {
+  var color = gamma(y);
 
-  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
-    for (var group = groups[j], i = 0, n = group.length; i < n; ++i) {
-      var node = group[i];
-      if (node) return node;
-    }
+  function rgb$1(start, end) {
+    var r = color((start = rgb(start)).r, (end = rgb(end)).r),
+        g = color(start.g, end.g),
+        b = color(start.b, end.b),
+        opacity = nogamma(start.opacity, end.opacity);
+    return function(t) {
+      start.r = r(t);
+      start.g = g(t);
+      start.b = b(t);
+      start.opacity = opacity(t);
+      return start + "";
+    };
   }
 
-  return null;
-}
+  rgb$1.gamma = rgbGamma;
 
-function selection_size() {
-  let size = 0;
-  for (const node of this) ++size; // eslint-disable-line no-unused-vars
-  return size;
-}
+  return rgb$1;
+})(1);
 
-function selection_empty() {
-  return !this.node();
+function numberArray(a, b) {
+  if (!b) b = [];
+  var n = a ? Math.min(b.length, a.length) : 0,
+      c = b.slice(),
+      i;
+  return function(t) {
+    for (i = 0; i < n; ++i) c[i] = a[i] * (1 - t) + b[i] * t;
+    return c;
+  };
 }
 
-function selection_each(callback) {
+function isNumberArray(x) {
+  return ArrayBuffer.isView(x) && !(x instanceof DataView);
+}
 
-  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
-    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
-      if (node = group[i]) callback.call(node, node.__data__, i, group);
-    }
-  }
+function genericArray(a, b) {
+  var nb = b ? b.length : 0,
+      na = a ? Math.min(nb, a.length) : 0,
+      x = new Array(na),
+      c = new Array(nb),
+      i;
 
-  return this;
-}
+  for (i = 0; i < na; ++i) x[i] = interpolate(a[i], b[i]);
+  for (; i < nb; ++i) c[i] = b[i];
 
-function attrRemove(name) {
-  return function() {
-    this.removeAttribute(name);
+  return function(t) {
+    for (i = 0; i < na; ++i) c[i] = x[i](t);
+    return c;
   };
 }
 
-function attrRemoveNS(fullname) {
-  return function() {
-    this.removeAttributeNS(fullname.space, fullname.local);
+function date(a, b) {
+  var d = new Date;
+  return a = +a, b = +b, function(t) {
+    return d.setTime(a * (1 - t) + b * t), d;
   };
 }
 
-function attrConstant(name, value) {
-  return function() {
-    this.setAttribute(name, value);
+function interpolateNumber(a, b) {
+  return a = +a, b = +b, function(t) {
+    return a * (1 - t) + b * t;
   };
 }
 
-function attrConstantNS(fullname, value) {
-  return function() {
-    this.setAttributeNS(fullname.space, fullname.local, value);
+function object(a, b) {
+  var i = {},
+      c = {},
+      k;
+
+  if (a === null || typeof a !== "object") a = {};
+  if (b === null || typeof b !== "object") b = {};
+
+  for (k in b) {
+    if (k in a) {
+      i[k] = interpolate(a[k], b[k]);
+    } else {
+      c[k] = b[k];
+    }
+  }
+
+  return function(t) {
+    for (k in i) c[k] = i[k](t);
+    return c;
   };
 }
 
-function attrFunction(name, value) {
+var reA = /[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g,
+    reB = new RegExp(reA.source, "g");
+
+function zero$1(b) {
   return function() {
-    var v = value.apply(this, arguments);
-    if (v == null) this.removeAttribute(name);
-    else this.setAttribute(name, v);
+    return b;
   };
 }
 
-function attrFunctionNS(fullname, value) {
-  return function() {
-    var v = value.apply(this, arguments);
-    if (v == null) this.removeAttributeNS(fullname.space, fullname.local);
-    else this.setAttributeNS(fullname.space, fullname.local, v);
+function one(b) {
+  return function(t) {
+    return b(t) + "";
   };
 }
 
-function selection_attr(name, value) {
-  var fullname = namespace(name);
+function string(a, b) {
+  var bi = reA.lastIndex = reB.lastIndex = 0, // scan index for next number in b
+      am, // current match in a
+      bm, // current match in b
+      bs, // string preceding current number in b, if any
+      i = -1, // index in s
+      s = [], // string constants and placeholders
+      q = []; // number interpolators
 
-  if (arguments.length < 2) {
-    var node = this.node();
-    return fullname.local
-        ? node.getAttributeNS(fullname.space, fullname.local)
-        : node.getAttribute(fullname);
+  // Coerce inputs to strings.
+  a = a + "", b = b + "";
+
+  // Interpolate pairs of numbers in a & b.
+  while ((am = reA.exec(a))
+      && (bm = reB.exec(b))) {
+    if ((bs = bm.index) > bi) { // a string precedes the next number in b
+      bs = b.slice(bi, bs);
+      if (s[i]) s[i] += bs; // coalesce with previous string
+      else s[++i] = bs;
+    }
+    if ((am = am[0]) === (bm = bm[0])) { // numbers in a & b match
+      if (s[i]) s[i] += bm; // coalesce with previous string
+      else s[++i] = bm;
+    } else { // interpolate non-matching numbers
+      s[++i] = null;
+      q.push({i: i, x: interpolateNumber(am, bm)});
+    }
+    bi = reB.lastIndex;
   }
 
-  return this.each((value == null
-      ? (fullname.local ? attrRemoveNS : attrRemove) : (typeof value === "function"
-      ? (fullname.local ? attrFunctionNS : attrFunction)
-      : (fullname.local ? attrConstantNS : attrConstant)))(fullname, value));
-}
+  // Add remains of b.
+  if (bi < b.length) {
+    bs = b.slice(bi);
+    if (s[i]) s[i] += bs; // coalesce with previous string
+    else s[++i] = bs;
+  }
 
-function defaultView(node) {
-  return (node.ownerDocument && node.ownerDocument.defaultView) // node is a Node
-      || (node.document && node) // node is a Window
-      || node.defaultView; // node is a Document
+  // Special optimization for only a single match.
+  // Otherwise, interpolate each of the numbers and rejoin the string.
+  return s.length < 2 ? (q[0]
+      ? one(q[0].x)
+      : zero$1(b))
+      : (b = q.length, function(t) {
+          for (var i = 0, o; i < b; ++i) s[(o = q[i]).i] = o.x(t);
+          return s.join("");
+        });
 }
 
-function styleRemove(name) {
-  return function() {
-    this.style.removeProperty(name);
-  };
+function interpolate(a, b) {
+  var t = typeof b, c;
+  return b == null || t === "boolean" ? constant(b)
+      : (t === "number" ? interpolateNumber
+      : t === "string" ? ((c = color(b)) ? (b = c, rgb$1) : string)
+      : b instanceof color ? rgb$1
+      : b instanceof Date ? date
+      : isNumberArray(b) ? numberArray
+      : Array.isArray(b) ? genericArray
+      : typeof b.valueOf !== "function" && typeof b.toString !== "function" || isNaN(b) ? object
+      : interpolateNumber)(a, b);
 }
 
-function styleConstant(name, value, priority) {
-  return function() {
-    this.style.setProperty(name, value, priority);
+function interpolateRound(a, b) {
+  return a = +a, b = +b, function(t) {
+    return Math.round(a * (1 - t) + b * t);
   };
 }
 
-function styleFunction(name, value, priority) {
+function constants(x) {
   return function() {
-    var v = value.apply(this, arguments);
-    if (v == null) this.style.removeProperty(name);
-    else this.style.setProperty(name, v, priority);
+    return x;
   };
 }
 
-function selection_style(name, value, priority) {
-  return arguments.length > 1
-      ? this.each((value == null
-            ? styleRemove : typeof value === "function"
-            ? styleFunction
-            : styleConstant)(name, value, priority == null ? "" : priority))
-      : styleValue(this.node(), name);
+function number$1(x) {
+  return +x;
 }
 
-function styleValue(node, name) {
-  return node.style.getPropertyValue(name)
-      || defaultView(node).getComputedStyle(node, null).getPropertyValue(name);
+var unit = [0, 1];
+
+function identity(x) {
+  return x;
 }
 
-function propertyRemove(name) {
-  return function() {
-    delete this[name];
-  };
+function normalize(a, b) {
+  return (b -= (a = +a))
+      ? function(x) { return (x - a) / b; }
+      : constants(isNaN(b) ? NaN : 0.5);
 }
 
-function propertyConstant(name, value) {
-  return function() {
-    this[name] = value;
-  };
-}
-
-function propertyFunction(name, value) {
-  return function() {
-    var v = value.apply(this, arguments);
-    if (v == null) delete this[name];
-    else this[name] = v;
-  };
-}
-
-function selection_property(name, value) {
-  return arguments.length > 1
-      ? this.each((value == null
-          ? propertyRemove : typeof value === "function"
-          ? propertyFunction
-          : propertyConstant)(name, value))
-      : this.node()[name];
-}
-
-function classArray(string) {
-  return string.trim().split(/^|\s+/);
+function clamper(a, b) {
+  var t;
+  if (a > b) t = a, a = b, b = t;
+  return function(x) { return Math.max(a, Math.min(b, x)); };
 }
 
-function classList(node) {
-  return node.classList || new ClassList(node);
+// normalize(a, b)(x) takes a domain value x in [a,b] and returns the corresponding parameter t in [0,1].
+// interpolate(a, b)(t) takes a parameter t in [0,1] and returns the corresponding range value x in [a,b].
+function bimap(domain, range, interpolate) {
+  var d0 = domain[0], d1 = domain[1], r0 = range[0], r1 = range[1];
+  if (d1 < d0) d0 = normalize(d1, d0), r0 = interpolate(r1, r0);
+  else d0 = normalize(d0, d1), r0 = interpolate(r0, r1);
+  return function(x) { return r0(d0(x)); };
 }
 
-function ClassList(node) {
-  this._node = node;
-  this._names = classArray(node.getAttribute("class") || "");
-}
+function polymap(domain, range, interpolate) {
+  var j = Math.min(domain.length, range.length) - 1,
+      d = new Array(j),
+      r = new Array(j),
+      i = -1;
 
-ClassList.prototype = {
-  add: function(name) {
-    var i = this._names.indexOf(name);
-    if (i < 0) {
-      this._names.push(name);
-      this._node.setAttribute("class", this._names.join(" "));
-    }
-  },
-  remove: function(name) {
-    var i = this._names.indexOf(name);
-    if (i >= 0) {
-      this._names.splice(i, 1);
-      this._node.setAttribute("class", this._names.join(" "));
-    }
-  },
-  contains: function(name) {
-    return this._names.indexOf(name) >= 0;
+  // Reverse descending domains.
+  if (domain[j] < domain[0]) {
+    domain = domain.slice().reverse();
+    range = range.slice().reverse();
   }
-};
-
-function classedAdd(node, names) {
-  var list = classList(node), i = -1, n = names.length;
-  while (++i < n) list.add(names[i]);
-}
-
-function classedRemove(node, names) {
-  var list = classList(node), i = -1, n = names.length;
-  while (++i < n) list.remove(names[i]);
-}
 
-function classedTrue(names) {
-  return function() {
-    classedAdd(this, names);
-  };
-}
+  while (++i < j) {
+    d[i] = normalize(domain[i], domain[i + 1]);
+    r[i] = interpolate(range[i], range[i + 1]);
+  }
 
-function classedFalse(names) {
-  return function() {
-    classedRemove(this, names);
+  return function(x) {
+    var i = bisectRight(domain, x, 1, j) - 1;
+    return r[i](d[i](x));
   };
 }
 
-function classedFunction(names, value) {
-  return function() {
-    (value.apply(this, arguments) ? classedAdd : classedRemove)(this, names);
-  };
+function copy(source, target) {
+  return target
+      .domain(source.domain())
+      .range(source.range())
+      .interpolate(source.interpolate())
+      .clamp(source.clamp())
+      .unknown(source.unknown());
 }
 
-function selection_classed(name, value) {
-  var names = classArray(name + "");
+function transformer() {
+  var domain = unit,
+      range = unit,
+      interpolate$1 = interpolate,
+      transform,
+      untransform,
+      unknown,
+      clamp = identity,
+      piecewise,
+      output,
+      input;
 
-  if (arguments.length < 2) {
-    var list = classList(this.node()), i = -1, n = names.length;
-    while (++i < n) if (!list.contains(names[i])) return false;
-    return true;
+  function rescale() {
+    var n = Math.min(domain.length, range.length);
+    if (clamp !== identity) clamp = clamper(domain[0], domain[n - 1]);
+    piecewise = n > 2 ? polymap : bimap;
+    output = input = null;
+    return scale;
   }
 
-  return this.each((typeof value === "function"
-      ? classedFunction : value
-      ? classedTrue
-      : classedFalse)(names, value));
-}
+  function scale(x) {
+    return x == null || isNaN(x = +x) ? unknown : (output || (output = piecewise(domain.map(transform), range, interpolate$1)))(transform(clamp(x)));
+  }
 
-function textRemove() {
-  this.textContent = "";
-}
+  scale.invert = function(y) {
+    return clamp(untransform((input || (input = piecewise(range, domain.map(transform), interpolateNumber)))(y)));
+  };
 
-function textConstant(value) {
-  return function() {
-    this.textContent = value;
+  scale.domain = function(_) {
+    return arguments.length ? (domain = Array.from(_, number$1), rescale()) : domain.slice();
   };
-}
 
-function textFunction(value) {
-  return function() {
-    var v = value.apply(this, arguments);
-    this.textContent = v == null ? "" : v;
+  scale.range = function(_) {
+    return arguments.length ? (range = Array.from(_), rescale()) : range.slice();
   };
-}
 
-function selection_text(value) {
-  return arguments.length
-      ? this.each(value == null
-          ? textRemove : (typeof value === "function"
-          ? textFunction
-          : textConstant)(value))
-      : this.node().textContent;
-}
+  scale.rangeRound = function(_) {
+    return range = Array.from(_), interpolate$1 = interpolateRound, rescale();
+  };
 
-function htmlRemove() {
-  this.innerHTML = "";
-}
+  scale.clamp = function(_) {
+    return arguments.length ? (clamp = _ ? true : identity, rescale()) : clamp !== identity;
+  };
 
-function htmlConstant(value) {
-  return function() {
-    this.innerHTML = value;
+  scale.interpolate = function(_) {
+    return arguments.length ? (interpolate$1 = _, rescale()) : interpolate$1;
   };
-}
 
-function htmlFunction(value) {
-  return function() {
-    var v = value.apply(this, arguments);
-    this.innerHTML = v == null ? "" : v;
+  scale.unknown = function(_) {
+    return arguments.length ? (unknown = _, scale) : unknown;
   };
-}
 
-function selection_html(value) {
-  return arguments.length
-      ? this.each(value == null
-          ? htmlRemove : (typeof value === "function"
-          ? htmlFunction
-          : htmlConstant)(value))
-      : this.node().innerHTML;
+  return function(t, u) {
+    transform = t, untransform = u;
+    return rescale();
+  };
 }
 
-function raise() {
-  if (this.nextSibling) this.parentNode.appendChild(this);
+function continuous() {
+  return transformer()(identity, identity);
 }
 
-function selection_raise() {
-  return this.each(raise);
+function formatDecimal(x) {
+  return Math.abs(x = Math.round(x)) >= 1e21
+      ? x.toLocaleString("en").replace(/,/g, "")
+      : x.toString(10);
 }
 
-function lower() {
-  if (this.previousSibling) this.parentNode.insertBefore(this, this.parentNode.firstChild);
-}
+// Computes the decimal coefficient and exponent of the specified number x with
+// significant digits p, where x is positive and p is in [1, 21] or undefined.
+// For example, formatDecimalParts(1.23) returns ["123", 0].
+function formatDecimalParts(x, p) {
+  if ((i = (x = p ? x.toExponential(p - 1) : x.toExponential()).indexOf("e")) < 0) return null; // NaN, ±Infinity
+  var i, coefficient = x.slice(0, i);
 
-function selection_lower() {
-  return this.each(lower);
+  // The string returned by toExponential either has the form \d\.\d+e[-+]\d+
+  // (e.g., 1.2e+3) or the form \de[-+]\d+ (e.g., 1e+3).
+  return [
+    coefficient.length > 1 ? coefficient[0] + coefficient.slice(2) : coefficient,
+    +x.slice(i + 1)
+  ];
 }
 
-function selection_append(name) {
-  var create = typeof name === "function" ? name : creator(name);
-  return this.select(function() {
-    return this.appendChild(create.apply(this, arguments));
-  });
+function exponent(x) {
+  return x = formatDecimalParts(Math.abs(x)), x ? x[1] : NaN;
 }
 
-function constantNull() {
-  return null;
-}
+function formatGroup(grouping, thousands) {
+  return function(value, width) {
+    var i = value.length,
+        t = [],
+        j = 0,
+        g = grouping[0],
+        length = 0;
 
-function selection_insert(name, before) {
-  var create = typeof name === "function" ? name : creator(name),
-      select = before == null ? constantNull : typeof before === "function" ? before : selector(before);
-  return this.select(function() {
-    return this.insertBefore(create.apply(this, arguments), select.apply(this, arguments) || null);
-  });
-}
+    while (i > 0 && g > 0) {
+      if (length + g + 1 > width) g = Math.max(1, width - length);
+      t.push(value.substring(i -= g, i + g));
+      if ((length += g + 1) > width) break;
+      g = grouping[j = (j + 1) % grouping.length];
+    }
 
-function remove() {
-  var parent = this.parentNode;
-  if (parent) parent.removeChild(this);
+    return t.reverse().join(thousands);
+  };
 }
 
-function selection_remove() {
-  return this.each(remove);
-}
-
-function selection_cloneShallow() {
-  var clone = this.cloneNode(false), parent = this.parentNode;
-  return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
+function formatNumerals(numerals) {
+  return function(value) {
+    return value.replace(/[0-9]/g, function(i) {
+      return numerals[+i];
+    });
+  };
 }
 
-function selection_cloneDeep() {
-  var clone = this.cloneNode(true), parent = this.parentNode;
-  return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
-}
+// [[fill]align][sign][symbol][0][width][,][.precision][~][type]
+var re = /^(?:(.)?([<>=^]))?([+\-( ])?([$#])?(0)?(\d+)?(,)?(\.\d+)?(~)?([a-z%])?$/i;
 
-function selection_clone(deep) {
-  return this.select(deep ? selection_cloneDeep : selection_cloneShallow);
+function formatSpecifier(specifier) {
+  if (!(match = re.exec(specifier))) throw new Error("invalid format: " + specifier);
+  var match;
+  return new FormatSpecifier({
+    fill: match[1],
+    align: match[2],
+    sign: match[3],
+    symbol: match[4],
+    zero: match[5],
+    width: match[6],
+    comma: match[7],
+    precision: match[8] && match[8].slice(1),
+    trim: match[9],
+    type: match[10]
+  });
 }
 
-function selection_datum(value) {
-  return arguments.length
-      ? this.property("__data__", value)
-      : this.node().__data__;
-}
+formatSpecifier.prototype = FormatSpecifier.prototype; // instanceof
 
-function contextListener(listener) {
-  return function(event) {
-    listener.call(this, event, this.__data__);
-  };
+function FormatSpecifier(specifier) {
+  this.fill = specifier.fill === undefined ? " " : specifier.fill + "";
+  this.align = specifier.align === undefined ? ">" : specifier.align + "";
+  this.sign = specifier.sign === undefined ? "-" : specifier.sign + "";
+  this.symbol = specifier.symbol === undefined ? "" : specifier.symbol + "";
+  this.zero = !!specifier.zero;
+  this.width = specifier.width === undefined ? undefined : +specifier.width;
+  this.comma = !!specifier.comma;
+  this.precision = specifier.precision === undefined ? undefined : +specifier.precision;
+  this.trim = !!specifier.trim;
+  this.type = specifier.type === undefined ? "" : specifier.type + "";
 }
 
-function parseTypenames(typenames) {
-  return typenames.trim().split(/^|\s+/).map(function(t) {
-    var name = "", i = t.indexOf(".");
-    if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
-    return {type: t, name: name};
-  });
-}
+FormatSpecifier.prototype.toString = function() {
+  return this.fill
+      + this.align
+      + this.sign
+      + this.symbol
+      + (this.zero ? "0" : "")
+      + (this.width === undefined ? "" : Math.max(1, this.width | 0))
+      + (this.comma ? "," : "")
+      + (this.precision === undefined ? "" : "." + Math.max(0, this.precision | 0))
+      + (this.trim ? "~" : "")
+      + this.type;
+};
 
-function onRemove(typename) {
-  return function() {
-    var on = this.__on;
-    if (!on) return;
-    for (var j = 0, i = -1, m = on.length, o; j < m; ++j) {
-      if (o = on[j], (!typename.type || o.type === typename.type) && o.name === typename.name) {
-        this.removeEventListener(o.type, o.listener, o.options);
-      } else {
-        on[++i] = o;
-      }
+// Trims insignificant zeros, e.g., replaces 1.2000k with 1.2k.
+function formatTrim(s) {
+  out: for (var n = s.length, i = 1, i0 = -1, i1; i < n; ++i) {
+    switch (s[i]) {
+      case ".": i0 = i1 = i; break;
+      case "0": if (i0 === 0) i0 = i; i1 = i; break;
+      default: if (!+s[i]) break out; if (i0 > 0) i0 = 0; break;
     }
-    if (++i) on.length = i;
-    else delete this.__on;
-  };
+  }
+  return i0 > 0 ? s.slice(0, i0) + s.slice(i1 + 1) : s;
 }
 
-function onAdd(typename, value, options) {
-  return function() {
-    var on = this.__on, o, listener = contextListener(value);
-    if (on) for (var j = 0, m = on.length; j < m; ++j) {
-      if ((o = on[j]).type === typename.type && o.name === typename.name) {
-        this.removeEventListener(o.type, o.listener, o.options);
-        this.addEventListener(o.type, o.listener = listener, o.options = options);
-        o.value = value;
-        return;
-      }
-    }
-    this.addEventListener(typename.type, listener, options);
-    o = {type: typename.type, name: typename.name, value: value, listener: listener, options: options};
-    if (!on) this.__on = [o];
-    else on.push(o);
-  };
+var prefixExponent;
+
+function formatPrefixAuto(x, p) {
+  var d = formatDecimalParts(x, p);
+  if (!d) return x + "";
+  var coefficient = d[0],
+      exponent = d[1],
+      i = exponent - (prefixExponent = Math.max(-8, Math.min(8, Math.floor(exponent / 3))) * 3) + 1,
+      n = coefficient.length;
+  return i === n ? coefficient
+      : i > n ? coefficient + new Array(i - n + 1).join("0")
+      : i > 0 ? coefficient.slice(0, i) + "." + coefficient.slice(i)
+      : "0." + new Array(1 - i).join("0") + formatDecimalParts(x, Math.max(0, p + i - 1))[0]; // less than 1y!
 }
 
-function selection_on(typename, value, options) {
-  var typenames = parseTypenames(typename + ""), i, n = typenames.length, t;
+function formatRounded(x, p) {
+  var d = formatDecimalParts(x, p);
+  if (!d) return x + "";
+  var coefficient = d[0],
+      exponent = d[1];
+  return exponent < 0 ? "0." + new Array(-exponent).join("0") + coefficient
+      : coefficient.length > exponent + 1 ? coefficient.slice(0, exponent + 1) + "." + coefficient.slice(exponent + 1)
+      : coefficient + new Array(exponent - coefficient.length + 2).join("0");
+}
 
-  if (arguments.length < 2) {
-    var on = this.node().__on;
-    if (on) for (var j = 0, m = on.length, o; j < m; ++j) {
-      for (i = 0, o = on[j]; i < n; ++i) {
-        if ((t = typenames[i]).type === o.type && t.name === o.name) {
-          return o.value;
-        }
-      }
-    }
-    return;
-  }
+var formatTypes = {
+  "%": (x, p) => (x * 100).toFixed(p),
+  "b": (x) => Math.round(x).toString(2),
+  "c": (x) => x + "",
+  "d": formatDecimal,
+  "e": (x, p) => x.toExponential(p),
+  "f": (x, p) => x.toFixed(p),
+  "g": (x, p) => x.toPrecision(p),
+  "o": (x) => Math.round(x).toString(8),
+  "p": (x, p) => formatRounded(x * 100, p),
+  "r": formatRounded,
+  "s": formatPrefixAuto,
+  "X": (x) => Math.round(x).toString(16).toUpperCase(),
+  "x": (x) => Math.round(x).toString(16)
+};
 
-  on = value ? onAdd : onRemove;
-  for (i = 0; i < n; ++i) this.each(on(typenames[i], value, options));
-  return this;
+function identity$1(x) {
+  return x;
 }
 
-function dispatchEvent(node, type, params) {
-  var window = defaultView(node),
-      event = window.CustomEvent;
+var map = Array.prototype.map,
+    prefixes = ["y","z","a","f","p","n","µ","m","","k","M","G","T","P","E","Z","Y"];
 
-  if (typeof event === "function") {
-    event = new event(type, params);
-  } else {
-    event = window.document.createEvent("Event");
-    if (params) event.initEvent(type, params.bubbles, params.cancelable), event.detail = params.detail;
-    else event.initEvent(type, false, false);
-  }
+function formatLocale(locale) {
+  var group = locale.grouping === undefined || locale.thousands === undefined ? identity$1 : formatGroup(map.call(locale.grouping, Number), locale.thousands + ""),
+      currencyPrefix = locale.currency === undefined ? "" : locale.currency[0] + "",
+      currencySuffix = locale.currency === undefined ? "" : locale.currency[1] + "",
+      decimal = locale.decimal === undefined ? "." : locale.decimal + "",
+      numerals = locale.numerals === undefined ? identity$1 : formatNumerals(map.call(locale.numerals, String)),
+      percent = locale.percent === undefined ? "%" : locale.percent + "",
+      minus = locale.minus === undefined ? "−" : locale.minus + "",
+      nan = locale.nan === undefined ? "NaN" : locale.nan + "";
 
-  node.dispatchEvent(event);
-}
+  function newFormat(specifier) {
+    specifier = formatSpecifier(specifier);
 
-function dispatchConstant(type, params) {
-  return function() {
-    return dispatchEvent(this, type, params);
-  };
-}
+    var fill = specifier.fill,
+        align = specifier.align,
+        sign = specifier.sign,
+        symbol = specifier.symbol,
+        zero = specifier.zero,
+        width = specifier.width,
+        comma = specifier.comma,
+        precision = specifier.precision,
+        trim = specifier.trim,
+        type = specifier.type;
 
-function dispatchFunction(type, params) {
-  return function() {
-    return dispatchEvent(this, type, params.apply(this, arguments));
-  };
-}
+    // The "n" type is an alias for ",g".
+    if (type === "n") comma = true, type = "g";
 
-function selection_dispatch(type, params) {
-  return this.each((typeof params === "function"
-      ? dispatchFunction
-      : dispatchConstant)(type, params));
-}
+    // The "" type, and any invalid type, is an alias for ".12~g".
+    else if (!formatTypes[type]) precision === undefined && (precision = 12), trim = true, type = "g";
 
-function* selection_iterator() {
-  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
-    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
-      if (node = group[i]) yield node;
-    }
-  }
-}
+    // If zero fill is specified, padding goes after sign and before digits.
+    if (zero || (fill === "0" && align === "=")) zero = true, fill = "0", align = "=";
 
-var root = [null];
+    // Compute the prefix and suffix.
+    // For SI-prefix, the suffix is lazily computed.
+    var prefix = symbol === "$" ? currencyPrefix : symbol === "#" && /[boxX]/.test(type) ? "0" + type.toLowerCase() : "",
+        suffix = symbol === "$" ? currencySuffix : /[%p]/.test(type) ? percent : "";
 
-function Selection(groups, parents) {
-  this._groups = groups;
-  this._parents = parents;
-}
+    // What format function should we use?
+    // Is this an integer type?
+    // Can this type generate exponential notation?
+    var formatType = formatTypes[type],
+        maybeSuffix = /[defgprs%]/.test(type);
 
-function selection() {
-  return new Selection([[document.documentElement]], root);
-}
+    // Set the default precision if not specified,
+    // or clamp the specified precision to the supported range.
+    // For significant precision, it must be in [1, 21].
+    // For fixed precision, it must be in [0, 20].
+    precision = precision === undefined ? 6
+        : /[gprs]/.test(type) ? Math.max(1, Math.min(21, precision))
+        : Math.max(0, Math.min(20, precision));
 
-function selection_selection() {
-  return this;
-}
-
-Selection.prototype = selection.prototype = {
-  constructor: Selection,
-  select: selection_select,
-  selectAll: selection_selectAll,
-  selectChild: selection_selectChild,
-  selectChildren: selection_selectChildren,
-  filter: selection_filter,
-  data: selection_data,
-  enter: selection_enter,
-  exit: selection_exit,
-  join: selection_join,
-  merge: selection_merge,
-  selection: selection_selection,
-  order: selection_order,
-  sort: selection_sort,
-  call: selection_call,
-  nodes: selection_nodes,
-  node: selection_node,
-  size: selection_size,
-  empty: selection_empty,
-  each: selection_each,
-  attr: selection_attr,
-  style: selection_style,
-  property: selection_property,
-  classed: selection_classed,
-  text: selection_text,
-  html: selection_html,
-  raise: selection_raise,
-  lower: selection_lower,
-  append: selection_append,
-  insert: selection_insert,
-  remove: selection_remove,
-  clone: selection_clone,
-  datum: selection_datum,
-  on: selection_on,
-  dispatch: selection_dispatch,
-  [Symbol.iterator]: selection_iterator
-};
+    function format(value) {
+      var valuePrefix = prefix,
+          valueSuffix = suffix,
+          i, n, c;
 
-function select(selector) {
-  return typeof selector === "string"
-      ? new Selection([[document.querySelector(selector)]], [document.documentElement])
-      : new Selection([[selector]], root);
-}
+      if (type === "c") {
+        valueSuffix = formatType(value) + valueSuffix;
+        value = "";
+      } else {
+        value = +value;
 
-function ascending$1(a, b) {
-  return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
-}
+        // Determine the sign. -0 is not less than 0, but 1 / -0 is!
+        var valueNegative = value < 0 || 1 / value < 0;
 
-function descending(a, b) {
-  return a == null || b == null ? NaN
-    : b < a ? -1
-    : b > a ? 1
-    : b >= a ? 0
-    : NaN;
-}
+        // Perform the initial formatting.
+        value = isNaN(value) ? nan : formatType(Math.abs(value), precision);
 
-function bisector(f) {
-  let compare1, compare2, delta;
+        // Trim insignificant zeros.
+        if (trim) value = formatTrim(value);
 
-  // If an accessor is specified, promote it to a comparator. In this case we
-  // can test whether the search value is (self-) comparable. We can’t do this
-  // for a comparator (except for specific, known comparators) because we can’t
-  // tell if the comparator is symmetric, and an asymmetric comparator can’t be
-  // used to test whether a single value is comparable.
-  if (f.length !== 2) {
-    compare1 = ascending$1;
-    compare2 = (d, x) => ascending$1(f(d), x);
-    delta = (d, x) => f(d) - x;
-  } else {
-    compare1 = f === ascending$1 || f === descending ? f : zero;
-    compare2 = f;
-    delta = f;
-  }
+        // If a negative value rounds to zero after formatting, and no explicit positive sign is requested, hide the sign.
+        if (valueNegative && +value === 0 && sign !== "+") valueNegative = false;
 
-  function left(a, x, lo = 0, hi = a.length) {
-    if (lo < hi) {
-      if (compare1(x, x) !== 0) return hi;
-      do {
-        const mid = (lo + hi) >>> 1;
-        if (compare2(a[mid], x) < 0) lo = mid + 1;
-        else hi = mid;
-      } while (lo < hi);
-    }
-    return lo;
-  }
+        // Compute the prefix and suffix.
+        valuePrefix = (valueNegative ? (sign === "(" ? sign : minus) : sign === "-" || sign === "(" ? "" : sign) + valuePrefix;
+        valueSuffix = (type === "s" ? prefixes[8 + prefixExponent / 3] : "") + valueSuffix + (valueNegative && sign === "(" ? ")" : "");
 
-  function right(a, x, lo = 0, hi = a.length) {
-    if (lo < hi) {
-      if (compare1(x, x) !== 0) return hi;
-      do {
-        const mid = (lo + hi) >>> 1;
-        if (compare2(a[mid], x) <= 0) lo = mid + 1;
-        else hi = mid;
-      } while (lo < hi);
-    }
-    return lo;
-  }
+        // Break the formatted value into the integer “value” part that can be
+        // grouped, and fractional or exponential “suffix” part that is not.
+        if (maybeSuffix) {
+          i = -1, n = value.length;
+          while (++i < n) {
+            if (c = value.charCodeAt(i), 48 > c || c > 57) {
+              valueSuffix = (c === 46 ? decimal + value.slice(i + 1) : value.slice(i)) + valueSuffix;
+              value = value.slice(0, i);
+              break;
+            }
+          }
+        }
+      }
 
-  function center(a, x, lo = 0, hi = a.length) {
-    const i = left(a, x, lo, hi - 1);
-    return i > lo && delta(a[i - 1], x) > -delta(a[i], x) ? i - 1 : i;
-  }
+      // If the fill character is not "0", grouping is applied before padding.
+      if (comma && !zero) value = group(value, Infinity);
 
-  return {left, center, right};
-}
+      // Compute the padding.
+      var length = valuePrefix.length + value.length + valueSuffix.length,
+          padding = length < width ? new Array(width - length + 1).join(fill) : "";
 
-function zero() {
-  return 0;
-}
+      // If the fill character is "0", grouping is applied after padding.
+      if (comma && zero) value = group(padding + value, padding.length ? width - valueSuffix.length : Infinity), padding = "";
 
-function number(x) {
-  return x === null ? NaN : +x;
-}
+      // Reconstruct the final output based on the desired alignment.
+      switch (align) {
+        case "<": value = valuePrefix + value + valueSuffix + padding; break;
+        case "=": value = valuePrefix + padding + value + valueSuffix; break;
+        case "^": value = padding.slice(0, length = padding.length >> 1) + valuePrefix + value + valueSuffix + padding.slice(length); break;
+        default: value = padding + valuePrefix + value + valueSuffix; break;
+      }
 
-const ascendingBisect = bisector(ascending$1);
-const bisectRight = ascendingBisect.right;
-const bisectCenter = bisector(number).center;
+      return numerals(value);
+    }
 
-const e10 = Math.sqrt(50),
-    e5 = Math.sqrt(10),
-    e2 = Math.sqrt(2);
+    format.toString = function() {
+      return specifier + "";
+    };
 
-function tickSpec(start, stop, count) {
-  const step = (stop - start) / Math.max(0, count),
-      power = Math.floor(Math.log10(step)),
-      error = step / Math.pow(10, power),
-      factor = error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1;
-  let i1, i2, inc;
-  if (power < 0) {
-    inc = Math.pow(10, -power) / factor;
-    i1 = Math.round(start * inc);
-    i2 = Math.round(stop * inc);
-    if (i1 / inc < start) ++i1;
-    if (i2 / inc > stop) --i2;
-    inc = -inc;
-  } else {
-    inc = Math.pow(10, power) * factor;
-    i1 = Math.round(start / inc);
-    i2 = Math.round(stop / inc);
-    if (i1 * inc < start) ++i1;
-    if (i2 * inc > stop) --i2;
+    return format;
   }
-  if (i2 < i1 && 0.5 <= count && count < 2) return tickSpec(start, stop, count * 2);
-  return [i1, i2, inc];
-}
 
-function ticks(start, stop, count) {
-  stop = +stop, start = +start, count = +count;
-  if (!(count > 0)) return [];
-  if (start === stop) return [start];
-  const reverse = stop < start, [i1, i2, inc] = reverse ? tickSpec(stop, start, count) : tickSpec(start, stop, count);
-  if (!(i2 >= i1)) return [];
-  const n = i2 - i1 + 1, ticks = new Array(n);
-  if (reverse) {
-    if (inc < 0) for (let i = 0; i < n; ++i) ticks[i] = (i2 - i) / -inc;
-    else for (let i = 0; i < n; ++i) ticks[i] = (i2 - i) * inc;
-  } else {
-    if (inc < 0) for (let i = 0; i < n; ++i) ticks[i] = (i1 + i) / -inc;
-    else for (let i = 0; i < n; ++i) ticks[i] = (i1 + i) * inc;
+  function formatPrefix(specifier, value) {
+    var f = newFormat((specifier = formatSpecifier(specifier), specifier.type = "f", specifier)),
+        e = Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3,
+        k = Math.pow(10, -e),
+        prefix = prefixes[8 + e / 3];
+    return function(value) {
+      return f(k * value) + prefix;
+    };
   }
-  return ticks;
-}
-
-function tickIncrement(start, stop, count) {
-  stop = +stop, start = +start, count = +count;
-  return tickSpec(start, stop, count)[2];
-}
 
-function tickStep(start, stop, count) {
-  stop = +stop, start = +start, count = +count;
-  const reverse = stop < start, inc = reverse ? tickIncrement(stop, start, count) : tickIncrement(start, stop, count);
-  return (reverse ? -1 : 1) * (inc < 0 ? 1 / -inc : inc);
+  return {
+    format: newFormat,
+    formatPrefix: formatPrefix
+  };
 }
 
-function range(start, stop, step) {
-  start = +start, stop = +stop, step = (n = arguments.length) < 2 ? (stop = start, start = 0, 1) : n < 3 ? 1 : +step;
+var locale;
+var format;
+var formatPrefix;
 
-  var i = -1,
-      n = Math.max(0, Math.ceil((stop - start) / step)) | 0,
-      range = new Array(n);
+defaultLocale({
+  thousands: ",",
+  grouping: [3],
+  currency: ["$", ""]
+});
 
-  while (++i < n) {
-    range[i] = start + i * step;
-  }
+function defaultLocale(definition) {
+  locale = formatLocale(definition);
+  format = locale.format;
+  formatPrefix = locale.formatPrefix;
+  return locale;
+}
 
-  return range;
+function precisionFixed(step) {
+  return Math.max(0, -exponent(Math.abs(step)));
 }
 
-/*!
- * FPSMeter 0.3.1 - 9th May 2013
- * https://github.com/Darsain/fpsmeter
- *
- * Licensed under the MIT license.
- * http://opensource.org/licenses/MIT
- */
-(function (w, undefined$1) {
+function precisionPrefix(step, value) {
+  return Math.max(0, Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3 - exponent(Math.abs(step)));
+}
 
-	/**
-	 * Create a new element.
-	 *
-	 * @param  {String} name Element type name.
-	 *
-	 * @return {Element}
-	 */
-	function newEl(name) {
-		return document.createElement(name);
-	}
+function precisionRound(step, max) {
+  step = Math.abs(step), max = Math.abs(max) - step;
+  return Math.max(0, exponent(max) - exponent(step)) + 1;
+}
 
-	/**
-	 * Apply theme CSS properties to element.
-	 *
-	 * @param  {Element} element DOM element.
-	 * @param  {Object}  theme   Theme object.
-	 *
-	 * @return {Element}
-	 */
-	function applyTheme(element, theme) {
-		for (var name in theme) {
-			try {
-				element.style[name] = theme[name];
-			} catch (e) {}
-		}
-		return element;
-	}
+function tickFormat(start, stop, count, specifier) {
+  var step = tickStep(start, stop, count),
+      precision;
+  specifier = formatSpecifier(specifier == null ? ",f" : specifier);
+  switch (specifier.type) {
+    case "s": {
+      var value = Math.max(Math.abs(start), Math.abs(stop));
+      if (specifier.precision == null && !isNaN(precision = precisionPrefix(step, value))) specifier.precision = precision;
+      return formatPrefix(specifier, value);
+    }
+    case "":
+    case "e":
+    case "g":
+    case "p":
+    case "r": {
+      if (specifier.precision == null && !isNaN(precision = precisionRound(step, Math.max(Math.abs(start), Math.abs(stop))))) specifier.precision = precision - (specifier.type === "e");
+      break;
+    }
+    case "f":
+    case "%": {
+      if (specifier.precision == null && !isNaN(precision = precisionFixed(step))) specifier.precision = precision - (specifier.type === "%") * 2;
+      break;
+    }
+  }
+  return format(specifier);
+}
 
-	/**
-	 * Return type of the value.
-	 *
-	 * @param  {Mixed} value
-	 *
-	 * @return {String}
-	 */
-	function type(value) {
-		if (value == null) {
-			return String(value);
-		}
+function linearish(scale) {
+  var domain = scale.domain;
 
-		if (typeof value === 'object' || typeof value === 'function') {
-			return Object.prototype.toString.call(value).match(/\s([a-z]+)/i)[1].toLowerCase() || 'object';
-		}
+  scale.ticks = function(count) {
+    var d = domain();
+    return ticks(d[0], d[d.length - 1], count == null ? 10 : count);
+  };
 
-		return typeof value;
-	}
+  scale.tickFormat = function(count, specifier) {
+    var d = domain();
+    return tickFormat(d[0], d[d.length - 1], count == null ? 10 : count, specifier);
+  };
 
-	/**
-	 * Check whether the value is in an array.
-	 *
-	 * @param  {Mixed} value
-	 * @param  {Array} array
-	 *
-	 * @return {Integer} Array index or -1 when not found.
-	 */
-	function inArray(value, array) {
-		if (type(array) !== 'array') {
-			return -1;
-		}
-		if (array.indexOf) {
-			return array.indexOf(value);
-		}
-		for (var i = 0, l = array.length; i < l; i++) {
-			if (array[i] === value) {
-				return i;
-			}
-		}
-		return -1;
-	}
+  scale.nice = function(count) {
+    if (count == null) count = 10;
 
-	/**
-	 * Poor man's deep object extend.
-	 *
-	 * Example:
-	 *   extend({}, defaults, options);
-	 *
-	 * @return {Void}
-	 */
-	function extend() {
-		var args = arguments;
-		for (var key in args[1]) {
-			if (args[1].hasOwnProperty(key)) {
-				switch (type(args[1][key])) {
-					case 'object':
-						args[0][key] = extend({}, args[0][key], args[1][key]);
-						break;
+    var d = domain();
+    var i0 = 0;
+    var i1 = d.length - 1;
+    var start = d[i0];
+    var stop = d[i1];
+    var prestep;
+    var step;
+    var maxIter = 10;
 
-					case 'array':
-						args[0][key] = args[1][key].slice(0);
-						break;
+    if (stop < start) {
+      step = start, start = stop, stop = step;
+      step = i0, i0 = i1, i1 = step;
+    }
+    
+    while (maxIter-- > 0) {
+      step = tickIncrement(start, stop, count);
+      if (step === prestep) {
+        d[i0] = start;
+        d[i1] = stop;
+        return domain(d);
+      } else if (step > 0) {
+        start = Math.floor(start / step) * step;
+        stop = Math.ceil(stop / step) * step;
+      } else if (step < 0) {
+        start = Math.ceil(start * step) / step;
+        stop = Math.floor(stop * step) / step;
+      } else {
+        break;
+      }
+      prestep = step;
+    }
 
-					default:
-						args[0][key] = args[1][key];
-				}
-			}
-		}
-		return args.length > 2 ?
-			extend.apply(null, [args[0]].concat(Array.prototype.slice.call(args, 2))) :
-			args[0];
-	}
+    return scale;
+  };
 
-	/**
-	 * Convert HSL color to HEX string.
-	 *
-	 * @param  {Array} hsl Array with [hue, saturation, lightness].
-	 *
-	 * @return {Array} Array with [red, green, blue].
-	 */
-	function hslToHex(h, s, l) {
-		var r, g, b;
-		var v, min, sv, sextant, fract, vsf;
+  return scale;
+}
 
-		if (l <= 0.5) {
-			v = l * (1 + s);
-		} else {
-			v = l + s - l * s;
-		}
+function linear$1() {
+  var scale = continuous();
 
-		if (v === 0) {
-			return '#000';
-		} else {
-			min = 2 * l - v;
-			sv = (v - min) / v;
-			h = 6 * h;
-			sextant = Math.floor(h);
-			fract = h - sextant;
-			vsf = v * sv * fract;
-			if (sextant === 0 || sextant === 6) {
-				r = v;
-				g = min + vsf;
-				b = min;
-			} else if (sextant === 1) {
-				r = v - vsf;
-				g = v;
-				b = min;
-			} else if (sextant === 2) {
-				r = min;
-				g = v;
-				b = min + vsf;
-			} else if (sextant === 3) {
-				r = min;
-				g = v - vsf;
-				b = v;
-			} else if (sextant === 4) {
-				r = min + vsf;
-				g = min;
-				b = v;
-			} else {
-				r = v;
-				g = min;
-				b = v - vsf;
-			}
-			return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
-		}
-	}
+  scale.copy = function() {
+    return copy(scale, linear$1());
+  };
 
-	/**
-	 * Helper function for hslToHex.
-	 */
-	function componentToHex(c) {
-		c = Math.round(c * 255).toString(16);
-		return c.length === 1 ? '0' + c : c;
-	}
+  initRange.apply(scale, arguments);
 
-	/**
-	 * Manage element event listeners.
-	 *
-	 * @param  {Node}     element
-	 * @param  {Event}    eventName
-	 * @param  {Function} handler
-	 * @param  {Bool}     remove
-	 *
-	 * @return {Void}
-	 */
-	function listener(element, eventName, handler, remove) {
-		if (element.addEventListener) {
-			element[remove ? 'removeEventListener' : 'addEventListener'](eventName, handler, false);
-		} else if (element.attachEvent) {
-			element[remove ? 'detachEvent' : 'attachEvent']('on' + eventName, handler);
-		}
-	}
+  return linearish(scale);
+}
 
-	// Preferred timing funtion
-	var getTime;
-	(function () {
-		var perf = w.performance;
-		if (perf && (perf.now || perf.webkitNow)) {
-			var perfNow = perf.now ? 'now' : 'webkitNow';
-			getTime = perf[perfNow].bind(perf);
-		} else {
-			getTime = function () {
-				return +new Date();
-			};
-		}
-	}());
+var xhtml = "http://www.w3.org/1999/xhtml";
 
-	// Local WindowAnimationTiming interface polyfill
-	var cAF = w.cancelAnimationFrame || w.cancelRequestAnimationFrame;
-	var rAF = w.requestAnimationFrame;
-	(function () {
-		var vendors = ['moz', 'webkit', 'o'];
-		var lastTime = 0;
+var namespaces = {
+  svg: "http://www.w3.org/2000/svg",
+  xhtml: xhtml,
+  xlink: "http://www.w3.org/1999/xlink",
+  xml: "http://www.w3.org/XML/1998/namespace",
+  xmlns: "http://www.w3.org/2000/xmlns/"
+};
 
-		// For a more accurate WindowAnimationTiming interface implementation, ditch the native
-		// requestAnimationFrame when cancelAnimationFrame is not present (older versions of Firefox)
-		for (var i = 0, l = vendors.length; i < l && !cAF; ++i) {
-			cAF = w[vendors[i]+'CancelAnimationFrame'] || w[vendors[i]+'CancelRequestAnimationFrame'];
-			rAF = cAF && w[vendors[i]+'RequestAnimationFrame'];
-		}
+function namespace(name) {
+  var prefix = name += "", i = prefix.indexOf(":");
+  if (i >= 0 && (prefix = name.slice(0, i)) !== "xmlns") name = name.slice(i + 1);
+  return namespaces.hasOwnProperty(prefix) ? {space: namespaces[prefix], local: name} : name; // eslint-disable-line no-prototype-builtins
+}
 
-		if (!cAF) {
-			rAF = function (callback) {
-				var currTime = getTime();
-				var timeToCall = Math.max(0, 16 - (currTime - lastTime));
-				lastTime = currTime + timeToCall;
-				return w.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);
-			};
+function creatorInherit(name) {
+  return function() {
+    var document = this.ownerDocument,
+        uri = this.namespaceURI;
+    return uri === xhtml && document.documentElement.namespaceURI === xhtml
+        ? document.createElement(name)
+        : document.createElementNS(uri, name);
+  };
+}
 
-			cAF = function (id) {
-				clearTimeout(id);
-			};
-		}
-	}());
+function creatorFixed(fullname) {
+  return function() {
+    return this.ownerDocument.createElementNS(fullname.space, fullname.local);
+  };
+}
 
-	// Property name for assigning element text content
-	var textProp = type(document.createElement('div').textContent) === 'string' ? 'textContent' : 'innerText';
+function creator(name) {
+  var fullname = namespace(name);
+  return (fullname.local
+      ? creatorFixed
+      : creatorInherit)(fullname);
+}
 
-	/**
-	 * FPSMeter class.
-	 *
-	 * @param {Element} anchor  Element to append the meter to. Default is document.body.
-	 * @param {Object}  options Object with options.
-	 */
-	function FPSMeter(anchor, options) {
-		// Optional arguments
-		if (type(anchor) === 'object' && anchor.nodeType === undefined$1) {
-			options = anchor;
-			anchor = document.body;
-		}
-		if (!anchor) {
-			anchor = document.body;
-		}
+function none() {}
 
-		// Private properties
-		var self = this;
-		var o = extend({}, FPSMeter.defaults, options || {});
+function selector(selector) {
+  return selector == null ? none : function() {
+    return this.querySelector(selector);
+  };
+}
 
-		var el = {};
-		var cols = [];
-		var theme, heatmaps;
-		var heatDepth = 100;
-		var heating = [];
+function selection_select(select) {
+  if (typeof select !== "function") select = selector(select);
 
-		var thisFrameTime = 0;
-		var frameTime = o.threshold;
-		var frameStart = 0;
-		var lastLoop = getTime() - frameTime;
-		var time;
+  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) {
+      if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {
+        if ("__data__" in node) subnode.__data__ = node.__data__;
+        subgroup[i] = subnode;
+      }
+    }
+  }
 
-		var fpsHistory = [];
-		var durationHistory = [];
+  return new Selection(subgroups, this._parents);
+}
 
-		var frameID, renderID;
-		var showFps = o.show === 'fps';
-		var graphHeight, count, i, j;
+// Given something array like (or null), returns something that is strictly an
+// array. This is used to ensure that array-like objects passed to d3.selectAll
+// or selection.selectAll are converted into proper arrays when creating a
+// selection; we don’t ever want to create a selection backed by a live
+// HTMLCollection or NodeList. However, note that selection.selectAll will use a
+// static NodeList as a group, since it safely derived from querySelectorAll.
+function array(x) {
+  return x == null ? [] : Array.isArray(x) ? x : Array.from(x);
+}
 
-		// Exposed properties
-		self.options = o;
-		self.fps = 0;
-		self.duration = 0;
-		self.isPaused = 0;
+function empty() {
+  return [];
+}
 
-		/**
-		 * Tick start for measuring the actual rendering duration.
-		 *
-		 * @return {Void}
-		 */
-		self.tickStart = function () {
-			frameStart = getTime();
-		};
+function selectorAll(selector) {
+  return selector == null ? empty : function() {
+    return this.querySelectorAll(selector);
+  };
+}
 
-		/**
-		 * FPS tick.
-		 *
-		 * @return {Void}
-		 */
-		self.tick = function () {
-			time = getTime();
-			thisFrameTime = time - lastLoop;
-			frameTime += (thisFrameTime - frameTime) / o.smoothing;
-			self.fps = 1000 / frameTime;
-			self.duration = frameStart < lastLoop ? frameTime : time - frameStart;
-			lastLoop = time;
-		};
+function arrayAll(select) {
+  return function() {
+    return array(select.apply(this, arguments));
+  };
+}
 
-		/**
-		 * Pause display rendering.
-		 *
-		 * @return {Object} FPSMeter instance.
-		 */
-		self.pause = function () {
-			if (frameID) {
-				self.isPaused = 1;
-				clearTimeout(frameID);
-				cAF(frameID);
-				cAF(renderID);
-				frameID = renderID = 0;
-			}
-			return self;
-		};
+function selection_selectAll(select) {
+  if (typeof select === "function") select = arrayAll(select);
+  else select = selectorAll(select);
 
-		/**
-		 * Resume display rendering.
-		 *
-		 * @return {Object} FPSMeter instance.
-		 */
-		self.resume = function () {
-			if (!frameID) {
-				self.isPaused = 0;
-				requestRender();
-			}
-			return self;
-		};
+  for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
+      if (node = group[i]) {
+        subgroups.push(select.call(node, node.__data__, i, group));
+        parents.push(node);
+      }
+    }
+  }
 
-		/**
-		 * Update options.
-		 *
-		 * @param {String} name  Option name.
-		 * @param {Mixed}  value New value.
-		 *
-		 * @return {Object} FPSMeter instance.
-		 */
-		self.set = function (name, value) {
-			o[name] = value;
-			showFps = o.show === 'fps';
+  return new Selection(subgroups, parents);
+}
 
-			// Rebuild or reposition elements when specific option has been updated
-			if (inArray(name, rebuilders) !== -1) {
-				createMeter();
-			}
-			if (inArray(name, repositioners) !== -1) {
-				positionMeter();
-			}
-			return self;
-		};
+function matcher(selector) {
+  return function() {
+    return this.matches(selector);
+  };
+}
 
-		/**
-		 * Change meter into rendering duration mode.
-		 *
-		 * @return {Object} FPSMeter instance.
-		 */
-		self.showDuration = function () {
-			self.set('show', 'ms');
-			return self;
-		};
+function childMatcher(selector) {
+  return function(node) {
+    return node.matches(selector);
+  };
+}
 
-		/**
-		 * Change meter into FPS mode.
-		 *
-		 * @return {Object} FPSMeter instance.
-		 */
-		self.showFps = function () {
-			self.set('show', 'fps');
-			return self;
-		};
+var find = Array.prototype.find;
 
-		/**
-		 * Toggles between show: 'fps' and show: 'duration'.
-		 *
-		 * @return {Object} FPSMeter instance.
-		 */
-		self.toggle = function () {
-			self.set('show', showFps ? 'ms' : 'fps');
-			return self;
-		};
+function childFind(match) {
+  return function() {
+    return find.call(this.children, match);
+  };
+}
 
-		/**
-		 * Hide the FPSMeter. Also pauses the rendering.
-		 *
-		 * @return {Object} FPSMeter instance.
-		 */
-		self.hide = function () {
-			self.pause();
-			el.container.style.display = 'none';
-			return self;
-		};
+function childFirst() {
+  return this.firstElementChild;
+}
 
-		/**
-		 * Show the FPSMeter. Also resumes the rendering.
-		 *
-		 * @return {Object} FPSMeter instance.
-		 */
-		self.show = function () {
-			self.resume();
-			el.container.style.display = 'block';
-			return self;
-		};
+function selection_selectChild(match) {
+  return this.select(match == null ? childFirst
+      : childFind(typeof match === "function" ? match : childMatcher(match)));
+}
 
-		/**
-		 * Check the current FPS and save it in history.
-		 *
-		 * @return {Void}
-		 */
-		function historyTick() {
-			for (i = o.history; i--;) {
-				fpsHistory[i] = i === 0 ? self.fps : fpsHistory[i-1];
-				durationHistory[i] = i === 0 ? self.duration : durationHistory[i-1];
-			}
-		}
+var filter = Array.prototype.filter;
 
-		/**
-		 * Returns heat hex color based on values passed.
-		 *
-		 * @param  {Integer} heatmap
-		 * @param  {Integer} value
-		 * @param  {Integer} min
-		 * @param  {Integer} max
-		 *
-		 * @return {Integer}
-		 */
-		function getHeat(heatmap, value, min, max) {
-			return heatmaps[0|heatmap][Math.round(Math.min((value - min) / (max - min) * heatDepth, heatDepth))];
-		}
+function children() {
+  return Array.from(this.children);
+}
 
-		/**
-		 * Update counter number and legend.
-		 *
-		 * @return {Void}
-		 */
-		function updateCounter() {
-			// Update legend only when changed
-			if (el.legend.fps !== showFps) {
-				el.legend.fps = showFps;
-				el.legend[textProp] = showFps ? 'FPS' : 'ms';
-			}
-			// Update counter with a nicely formated & readable number
-			count = showFps ? self.fps : self.duration;
-			el.count[textProp] = count > 999 ? '999+' : count.toFixed(count > 99 ? 0 : o.decimals);
-		}
+function childrenFilter(match) {
+  return function() {
+    return filter.call(this.children, match);
+  };
+}
 
-		/**
-		 * Render current FPS state.
-		 *
-		 * @return {Void}
-		 */
-		function render() {
-			time = getTime();
-			// If renderer stopped reporting, do a simulated drop to 0 fps
-			if (lastLoop < time - o.threshold) {
-				self.fps -= self.fps / Math.max(1, o.smoothing * 60 / o.interval);
-				self.duration = 1000 / self.fps;
-			}
+function selection_selectChildren(match) {
+  return this.selectAll(match == null ? children
+      : childrenFilter(typeof match === "function" ? match : childMatcher(match)));
+}
 
-			historyTick();
-			updateCounter();
+function selection_filter(match) {
+  if (typeof match !== "function") match = matcher(match);
 
-			// Apply heat to elements
-			if (o.heat) {
-				if (heating.length) {
-					for (i = heating.length; i--;) {
-						heating[i].el.style[theme[heating[i].name].heatOn] = showFps ?
-							getHeat(theme[heating[i].name].heatmap, self.fps, 0, o.maxFps) :
-							getHeat(theme[heating[i].name].heatmap, self.duration, o.threshold, 0);
-					}
-				}
+  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) {
+      if ((node = group[i]) && match.call(node, node.__data__, i, group)) {
+        subgroup.push(node);
+      }
+    }
+  }
 
-				if (el.graph && theme.column.heatOn) {
-					for (i = cols.length; i--;) {
-						cols[i].style[theme.column.heatOn] = showFps ?
-							getHeat(theme.column.heatmap, fpsHistory[i], 0, o.maxFps) :
-							getHeat(theme.column.heatmap, durationHistory[i], o.threshold, 0);
-					}
-				}
-			}
+  return new Selection(subgroups, this._parents);
+}
 
-			// Update graph columns height
-			if (el.graph) {
-				for (j = 0; j < o.history; j++) {
-					cols[j].style.height = (showFps ?
-						(fpsHistory[j] ? Math.round(graphHeight / o.maxFps * Math.min(fpsHistory[j], o.maxFps)) : 0) :
-						(durationHistory[j] ? Math.round(graphHeight / o.threshold * Math.min(durationHistory[j], o.threshold)) : 0)
-					) + 'px';
-				}
-			}
-		}
+function sparse(update) {
+  return new Array(update.length);
+}
 
-		/**
-		 * Request rendering loop.
-		 *
-		 * @return {Int} Animation frame index.
-		 */
-		function requestRender() {
-			if (o.interval < 20) {
-				frameID = rAF(requestRender);
-				render();
-			} else {
-				frameID = setTimeout(requestRender, o.interval);
-				renderID = rAF(render);
-			}
-		}
+function selection_enter() {
+  return new Selection(this._enter || this._groups.map(sparse), this._parents);
+}
 
-		/**
-		 * Meter events handler.
-		 *
-		 * @return {Void}
-		 */
-		function eventHandler(event) {
-			event = event || window.event;
-			if (event.preventDefault) {
-				event.preventDefault();
-				event.stopPropagation();
-			} else {
-				event.returnValue = false;
-				event.cancelBubble = true;
-			}
-			self.toggle();
-		}
+function EnterNode(parent, datum) {
+  this.ownerDocument = parent.ownerDocument;
+  this.namespaceURI = parent.namespaceURI;
+  this._next = null;
+  this._parent = parent;
+  this.__data__ = datum;
+}
 
-		/**
-		 * Destroys the current FPSMeter instance.
-		 *
-		 * @return {Void}
-		 */
-		self.destroy = function () {
-			// Stop rendering
-			self.pause();
-			// Remove elements
-			removeMeter();
-			// Stop listening
-			self.tick = self.tickStart = function () {};
-		};
+EnterNode.prototype = {
+  constructor: EnterNode,
+  appendChild: function(child) { return this._parent.insertBefore(child, this._next); },
+  insertBefore: function(child, next) { return this._parent.insertBefore(child, next); },
+  querySelector: function(selector) { return this._parent.querySelector(selector); },
+  querySelectorAll: function(selector) { return this._parent.querySelectorAll(selector); }
+};
 
-		/**
-		 * Remove meter element.
-		 *
-		 * @return {Void}
-		 */
-		function removeMeter() {
-			// Unbind listeners
-			if (o.toggleOn) {
-				listener(el.container, o.toggleOn, eventHandler, 1);
-			}
-			// Detach element
-			anchor.removeChild(el.container);
-		}
+function constant$1(x) {
+  return function() {
+    return x;
+  };
+}
 
-		/**
-		 * Sets the theme, and generates heatmaps when needed.
-		 */
-		function setTheme() {
-			theme = FPSMeter.theme[o.theme];
+function bindIndex(parent, group, enter, update, exit, data) {
+  var i = 0,
+      node,
+      groupLength = group.length,
+      dataLength = data.length;
 
-			// Generate heatmaps
-			heatmaps = theme.compiledHeatmaps || [];
-			if (!heatmaps.length && theme.heatmaps.length) {
-				for (j = 0; j < theme.heatmaps.length; j++) {
-					heatmaps[j] = [];
-					for (i = 0; i <= heatDepth; i++) {
-						heatmaps[j][i] = hslToHex(0.33 / heatDepth * i, theme.heatmaps[j].saturation, theme.heatmaps[j].lightness);
-					}
-				}
-				theme.compiledHeatmaps = heatmaps;
-			}
-		}
+  // Put any non-null nodes that fit into update.
+  // Put any null nodes into enter.
+  // Put any remaining data into enter.
+  for (; i < dataLength; ++i) {
+    if (node = group[i]) {
+      node.__data__ = data[i];
+      update[i] = node;
+    } else {
+      enter[i] = new EnterNode(parent, data[i]);
+    }
+  }
 
-		/**
-		 * Creates and attaches the meter element.
-		 *
-		 * @return {Void}
-		 */
-		function createMeter() {
-			// Remove old meter if present
-			if (el.container) {
-				removeMeter();
-			}
+  // Put any non-null nodes that don’t fit into exit.
+  for (; i < groupLength; ++i) {
+    if (node = group[i]) {
+      exit[i] = node;
+    }
+  }
+}
 
-			// Set theme
-			setTheme();
+function bindKey(parent, group, enter, update, exit, data, key) {
+  var i,
+      node,
+      nodeByKeyValue = new Map,
+      groupLength = group.length,
+      dataLength = data.length,
+      keyValues = new Array(groupLength),
+      keyValue;
 
-			// Create elements
-			el.container = applyTheme(newEl('div'), theme.container);
-			el.count = el.container.appendChild(applyTheme(newEl('div'), theme.count));
-			el.legend = el.container.appendChild(applyTheme(newEl('div'), theme.legend));
-			el.graph = o.graph ? el.container.appendChild(applyTheme(newEl('div'), theme.graph)) : 0;
+  // Compute the key for each node.
+  // If multiple nodes have the same key, the duplicates are added to exit.
+  for (i = 0; i < groupLength; ++i) {
+    if (node = group[i]) {
+      keyValues[i] = keyValue = key.call(node, node.__data__, i, group) + "";
+      if (nodeByKeyValue.has(keyValue)) {
+        exit[i] = node;
+      } else {
+        nodeByKeyValue.set(keyValue, node);
+      }
+    }
+  }
 
-			// Add elements to heating array
-			heating.length = 0;
-			for (var key in el) {
-				if (el[key] && theme[key].heatOn) {
-					heating.push({
-						name: key,
-						el: el[key]
-					});
-				}
-			}
+  // Compute the key for each datum.
+  // If there a node associated with this key, join and add it to update.
+  // If there is not (or the key is a duplicate), add it to enter.
+  for (i = 0; i < dataLength; ++i) {
+    keyValue = key.call(parent, data[i], i, data) + "";
+    if (node = nodeByKeyValue.get(keyValue)) {
+      update[i] = node;
+      node.__data__ = data[i];
+      nodeByKeyValue.delete(keyValue);
+    } else {
+      enter[i] = new EnterNode(parent, data[i]);
+    }
+  }
 
-			// Graph
-			cols.length = 0;
-			if (el.graph) {
-				// Create graph
-				el.graph.style.width = (o.history * theme.column.width + (o.history - 1) * theme.column.spacing) + 'px';
+  // Add any remaining nodes that were not bound to data to exit.
+  for (i = 0; i < groupLength; ++i) {
+    if ((node = group[i]) && (nodeByKeyValue.get(keyValues[i]) === node)) {
+      exit[i] = node;
+    }
+  }
+}
 
-				// Add columns
-				for (i = 0; i < o.history; i++) {
-					cols[i] = el.graph.appendChild(applyTheme(newEl('div'), theme.column));
-					cols[i].style.position = 'absolute';
-					cols[i].style.bottom = 0;
-					cols[i].style.right = (i * theme.column.width + i * theme.column.spacing) + 'px';
-					cols[i].style.width = theme.column.width + 'px';
-					cols[i].style.height = '0px';
-				}
-			}
+function datum(node) {
+  return node.__data__;
+}
 
-			// Set the initial state
-			positionMeter();
-			updateCounter();
+function selection_data(value, key) {
+  if (!arguments.length) return Array.from(this, datum);
 
-			// Append container to anchor
-			anchor.appendChild(el.container);
+  var bind = key ? bindKey : bindIndex,
+      parents = this._parents,
+      groups = this._groups;
 
-			// Retrieve graph height after it was appended to DOM
-			if (el.graph) {
-				graphHeight = el.graph.clientHeight;
-			}
+  if (typeof value !== "function") value = constant$1(value);
 
-			// Add event listeners
-			if (o.toggleOn) {
-				if (o.toggleOn === 'click') {
-					el.container.style.cursor = 'pointer';
-				}
-				listener(el.container, o.toggleOn, eventHandler);
-			}
-		}
+  for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
+    var parent = parents[j],
+        group = groups[j],
+        groupLength = group.length,
+        data = arraylike(value.call(parent, parent && parent.__data__, j, parents)),
+        dataLength = data.length,
+        enterGroup = enter[j] = new Array(dataLength),
+        updateGroup = update[j] = new Array(dataLength),
+        exitGroup = exit[j] = new Array(groupLength);
 
-		/**
-		 * Positions the meter based on options.
-		 *
-		 * @return {Void}
-		 */
-		function positionMeter() {
-			applyTheme(el.container, o);
-		}
+    bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
 
-		/**
-		 * Construct.
-		 */
-		(function () {
-			// Create meter element
-			createMeter();
-			// Start rendering
-			requestRender();
-		}());
-	}
+    // Now connect the enter nodes to their following update node, such that
+    // appendChild can insert the materialized enter node before this node,
+    // rather than at the end of the parent node.
+    for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
+      if (previous = enterGroup[i0]) {
+        if (i0 >= i1) i1 = i0 + 1;
+        while (!(next = updateGroup[i1]) && ++i1 < dataLength);
+        previous._next = next || null;
+      }
+    }
+  }
 
-	// Expose the extend function
-	FPSMeter.extend = extend;
+  update = new Selection(update, parents);
+  update._enter = enter;
+  update._exit = exit;
+  return update;
+}
 
-	// Expose the FPSMeter class
-	window.FPSMeter = FPSMeter;
+// Given some data, this returns an array-like view of it: an object that
+// exposes a length property and allows numeric indexing. Note that unlike
+// selectAll, this isn’t worried about “live” collections because the resulting
+// array will only be used briefly while data is being bound. (It is possible to
+// cause the data to change while iterating by using a key function, but please
+// don’t; we’d rather avoid a gratuitous copy.)
+function arraylike(data) {
+  return typeof data === "object" && "length" in data
+    ? data // Array, TypedArray, NodeList, array-like
+    : Array.from(data); // Map, Set, iterable, string, or anything else
+}
 
-	// Default options
-	FPSMeter.defaults = {
-		interval:  100,     // Update interval in milliseconds.
-		smoothing: 10,      // Spike smoothing strength. 1 means no smoothing.
-		show:      'fps',   // Whether to show 'fps', or 'ms' = frame duration in milliseconds.
-		toggleOn:  'click', // Toggle between show 'fps' and 'ms' on this event.
-		decimals:  1,       // Number of decimals in FPS number. 1 = 59.9, 2 = 59.94, ...
-		maxFps:    60,      // Max expected FPS value.
-		threshold: 100,     // Minimal tick reporting interval in milliseconds.
+function selection_exit() {
+  return new Selection(this._exit || this._groups.map(sparse), this._parents);
+}
 
-		// Meter position
-		position: 'absolute', // Meter position.
-		zIndex:   10,         // Meter Z index.
-		left:     '5px',      // Meter left offset.
-		top:      '5px',      // Meter top offset.
-		right:    'auto',     // Meter right offset.
-		bottom:   'auto',     // Meter bottom offset.
-		margin:   '0 0 0 0',  // Meter margin. Helps with centering the counter when left: 50%;
+function selection_join(onenter, onupdate, onexit) {
+  var enter = this.enter(), update = this, exit = this.exit();
+  if (typeof onenter === "function") {
+    enter = onenter(enter);
+    if (enter) enter = enter.selection();
+  } else {
+    enter = enter.append(onenter + "");
+  }
+  if (onupdate != null) {
+    update = onupdate(update);
+    if (update) update = update.selection();
+  }
+  if (onexit == null) exit.remove(); else onexit(exit);
+  return enter && update ? enter.merge(update).order() : update;
+}
 
-		// Theme
-		theme: 'dark', // Meter theme. Build in: 'dark', 'light', 'transparent', 'colorful'.
-		heat:  0,      // Allow themes to use coloring by FPS heat. 0 FPS = red, maxFps = green.
+function selection_merge(context) {
+  var selection = context.selection ? context.selection() : context;
 
-		// Graph
-		graph:   0, // Whether to show history graph.
-		history: 20 // How many history states to show in a graph.
-	};
+  for (var groups0 = this._groups, groups1 = selection._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {
+    for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) {
+      if (node = group0[i] || group1[i]) {
+        merge[i] = node;
+      }
+    }
+  }
 
-	// Option names that trigger FPSMeter rebuild or reposition when modified
-	var rebuilders = [
-		'toggleOn',
-		'theme',
-		'heat',
-		'graph',
-		'history'
-	];
-	var repositioners = [
-		'position',
-		'zIndex',
-		'left',
-		'top',
-		'right',
-		'bottom',
-		'margin'
-	];
-}(window));
-(function (w, FPSMeter, undefined$1) {
+  for (; j < m0; ++j) {
+    merges[j] = groups0[j];
+  }
 
-	// Themes object
-	FPSMeter.theme = {};
+  return new Selection(merges, this._parents);
+}
 
-	// Base theme with layout, no colors
-	var base = FPSMeter.theme.base = {
-		heatmaps: [],
-		container: {
-			// Settings
-			heatOn: null,
-			heatmap: null,
+function selection_order() {
 
-			// Styles
-			padding: '5px',
-			minWidth: '95px',
-			height: '30px',
-			lineHeight: '30px',
-			textAlign: 'right',
-			textShadow: 'none'
-		},
-		count: {
-			// Settings
-			heatOn: null,
-			heatmap: null,
+  for (var groups = this._groups, j = -1, m = groups.length; ++j < m;) {
+    for (var group = groups[j], i = group.length - 1, next = group[i], node; --i >= 0;) {
+      if (node = group[i]) {
+        if (next && node.compareDocumentPosition(next) ^ 4) next.parentNode.insertBefore(node, next);
+        next = node;
+      }
+    }
+  }
 
-			// Styles
-			position: 'absolute',
-			top: 0,
-			right: 0,
-			padding: '5px 10px',
-			height: '30px',
-			fontSize: '24px',
-			fontFamily: 'Consolas, Andale Mono, monospace',
-			zIndex: 2
-		},
-		legend: {
-			// Settings
-			heatOn: null,
-			heatmap: null,
+  return this;
+}
 
-			// Styles
-			position: 'absolute',
-			top: 0,
-			left: 0,
-			padding: '5px 10px',
-			height: '30px',
-			fontSize: '12px',
-			lineHeight: '32px',
-			fontFamily: 'sans-serif',
-			textAlign: 'left',
-			zIndex: 2
-		},
-		graph: {
-			// Settings
-			heatOn: null,
-			heatmap: null,
+function selection_sort(compare) {
+  if (!compare) compare = ascending$1;
 
-			// Styles
-			position: 'relative',
-			boxSizing: 'padding-box',
-			MozBoxSizing: 'padding-box',
-			height: '100%',
-			zIndex: 1
-		},
-		column: {
-			// Settings
-			width: 4,
-			spacing: 1,
-			heatOn: null,
-			heatmap: null
-		}
-	};
+  function compareNode(a, b) {
+    return a && b ? compare(a.__data__, b.__data__) : !a - !b;
+  }
 
-	// Dark theme
-	FPSMeter.theme.dark = FPSMeter.extend({}, base, {
-		heatmaps: [{
-			saturation: 0.8,
-			lightness: 0.8
-		}],
-		container: {
-			background: '#222',
-			color: '#fff',
-			border: '1px solid #1a1a1a',
-			textShadow: '1px 1px 0 #222'
-		},
-		count: {
-			heatOn: 'color'
-		},
-		column: {
-			background: '#3f3f3f'
-		}
-	});
+  for (var groups = this._groups, m = groups.length, sortgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, sortgroup = sortgroups[j] = new Array(n), node, i = 0; i < n; ++i) {
+      if (node = group[i]) {
+        sortgroup[i] = node;
+      }
+    }
+    sortgroup.sort(compareNode);
+  }
 
-	// Light theme
-	FPSMeter.theme.light = FPSMeter.extend({}, base, {
-		heatmaps: [{
-			saturation: 0.5,
-			lightness: 0.5
-		}],
-		container: {
-			color: '#666',
-			background: '#fff',
-			textShadow: '1px 1px 0 rgba(255,255,255,.5), -1px -1px 0 rgba(255,255,255,.5)',
-			boxShadow: '0 0 0 1px rgba(0,0,0,.1)'
-		},
-		count: {
-			heatOn: 'color'
-		},
-		column: {
-			background: '#eaeaea'
-		}
-	});
+  return new Selection(sortgroups, this._parents).order();
+}
 
-	// Colorful theme
-	FPSMeter.theme.colorful = FPSMeter.extend({}, base, {
-		heatmaps: [{
-			saturation: 0.5,
-			lightness: 0.6
-		}],
-		container: {
-			heatOn: 'backgroundColor',
-			background: '#888',
-			color: '#fff',
-			textShadow: '1px 1px 0 rgba(0,0,0,.2)',
-			boxShadow: '0 0 0 1px rgba(0,0,0,.1)'
-		},
-		column: {
-			background: '#777',
-			backgroundColor: 'rgba(0,0,0,.2)'
-		}
-	});
+function ascending$1(a, b) {
+  return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+}
 
-	// Transparent theme
-	FPSMeter.theme.transparent = FPSMeter.extend({}, base, {
-		heatmaps: [{
-			saturation: 0.8,
-			lightness: 0.5
-		}],
-		container: {
-			padding: 0,
-			color: '#fff',
-			textShadow: '1px 1px 0 rgba(0,0,0,.5)'
-		},
-		count: {
-			padding: '0 5px',
-			height: '40px',
-			lineHeight: '40px'
-		},
-		legend: {
-			padding: '0 5px',
-			height: '40px',
-			lineHeight: '42px'
-		},
-		graph: {
-			height: '40px'
-		},
-		column: {
-			width: 5,
-			background: '#999',
-			heatOn: 'backgroundColor',
-			opacity: 0.5
-		}
-	});
-}(window, FPSMeter));
+function selection_call() {
+  var callback = arguments[0];
+  arguments[0] = this;
+  callback.apply(null, arguments);
+  return this;
+}
 
-function precisionFixed(step) {
-  return Math.max(0, -exponent$1(Math.abs(step)));
+function selection_nodes() {
+  return Array.from(this);
 }
 
-function precisionPrefix(step, value) {
-  return Math.max(0, Math.max(-8, Math.min(8, Math.floor(exponent$1(value) / 3))) * 3 - exponent$1(Math.abs(step)));
+function selection_node() {
+
+  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+    for (var group = groups[j], i = 0, n = group.length; i < n; ++i) {
+      var node = group[i];
+      if (node) return node;
+    }
+  }
+
+  return null;
 }
 
-function identity$1(x) {
-  return x;
+function selection_size() {
+  let size = 0;
+  for (const node of this) ++size; // eslint-disable-line no-unused-vars
+  return size;
 }
 
-var top = 1,
-    right = 2,
-    bottom = 3,
-    left = 4,
-    epsilon = 1e-6;
+function selection_empty() {
+  return !this.node();
+}
 
-function translateX(x) {
-  return "translate(" + x + ",0)";
+function selection_each(callback) {
+
+  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
+      if (node = group[i]) callback.call(node, node.__data__, i, group);
+    }
+  }
+
+  return this;
 }
 
-function translateY(y) {
-  return "translate(0," + y + ")";
+function attrRemove(name) {
+  return function() {
+    this.removeAttribute(name);
+  };
 }
 
-function number$2(scale) {
-  return d => +scale(d);
+function attrRemoveNS(fullname) {
+  return function() {
+    this.removeAttributeNS(fullname.space, fullname.local);
+  };
 }
 
-function center(scale, offset) {
-  offset = Math.max(0, scale.bandwidth() - offset * 2) / 2;
-  if (scale.round()) offset = Math.round(offset);
-  return d => +scale(d) + offset;
+function attrConstant(name, value) {
+  return function() {
+    this.setAttribute(name, value);
+  };
 }
 
-function entering() {
-  return !this.__axis;
+function attrConstantNS(fullname, value) {
+  return function() {
+    this.setAttributeNS(fullname.space, fullname.local, value);
+  };
 }
 
-function axis(orient, scale) {
-  var tickArguments = [],
-      tickValues = null,
-      tickFormat = null,
-      tickSizeInner = 6,
-      tickSizeOuter = 6,
-      tickPadding = 3,
-      offset = typeof window !== "undefined" && window.devicePixelRatio > 1 ? 0 : 0.5,
-      k = orient === top || orient === left ? -1 : 1,
-      x = orient === left || orient === right ? "x" : "y",
-      transform = orient === top || orient === bottom ? translateX : translateY;
-
-  function axis(context) {
-    var values = tickValues == null ? (scale.ticks ? scale.ticks.apply(scale, tickArguments) : scale.domain()) : tickValues,
-        format = tickFormat == null ? (scale.tickFormat ? scale.tickFormat.apply(scale, tickArguments) : identity$1) : tickFormat,
-        spacing = Math.max(tickSizeInner, 0) + tickPadding,
-        range = scale.range(),
-        range0 = +range[0] + offset,
-        range1 = +range[range.length - 1] + offset,
-        position = (scale.bandwidth ? center : number$2)(scale.copy(), offset),
-        selection = context.selection ? context.selection() : context,
-        path = selection.selectAll(".domain").data([null]),
-        tick = selection.selectAll(".tick").data(values, scale).order(),
-        tickExit = tick.exit(),
-        tickEnter = tick.enter().append("g").attr("class", "tick"),
-        line = tick.select("line"),
-        text = tick.select("text");
-
-    path = path.merge(path.enter().insert("path", ".tick")
-        .attr("class", "domain")
-        .attr("stroke", "currentColor"));
-
-    tick = tick.merge(tickEnter);
-
-    line = line.merge(tickEnter.append("line")
-        .attr("stroke", "currentColor")
-        .attr(x + "2", k * tickSizeInner));
-
-    text = text.merge(tickEnter.append("text")
-        .attr("fill", "currentColor")
-        .attr(x, k * spacing)
-        .attr("dy", orient === top ? "0em" : orient === bottom ? "0.71em" : "0.32em"));
-
-    if (context !== selection) {
-      path = path.transition(context);
-      tick = tick.transition(context);
-      line = line.transition(context);
-      text = text.transition(context);
-
-      tickExit = tickExit.transition(context)
-          .attr("opacity", epsilon)
-          .attr("transform", function(d) { return isFinite(d = position(d)) ? transform(d + offset) : this.getAttribute("transform"); });
-
-      tickEnter
-          .attr("opacity", epsilon)
-          .attr("transform", function(d) { var p = this.parentNode.__axis; return transform((p && isFinite(p = p(d)) ? p : position(d)) + offset); });
-    }
-
-    tickExit.remove();
-
-    path
-        .attr("d", orient === left || orient === right
-            ? (tickSizeOuter ? "M" + k * tickSizeOuter + "," + range0 + "H" + offset + "V" + range1 + "H" + k * tickSizeOuter : "M" + offset + "," + range0 + "V" + range1)
-            : (tickSizeOuter ? "M" + range0 + "," + k * tickSizeOuter + "V" + offset + "H" + range1 + "V" + k * tickSizeOuter : "M" + range0 + "," + offset + "H" + range1));
-
-    tick
-        .attr("opacity", 1)
-        .attr("transform", function(d) { return transform(position(d) + offset); });
-
-    line
-        .attr(x + "2", k * tickSizeInner);
+function attrFunction(name, value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) this.removeAttribute(name);
+    else this.setAttribute(name, v);
+  };
+}
 
-    text
-        .attr(x, k * spacing)
-        .text(format);
+function attrFunctionNS(fullname, value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) this.removeAttributeNS(fullname.space, fullname.local);
+    else this.setAttributeNS(fullname.space, fullname.local, v);
+  };
+}
 
-    selection.filter(entering)
-        .attr("fill", "none")
-        .attr("font-size", 10)
-        .attr("font-family", "sans-serif")
-        .attr("text-anchor", orient === right ? "start" : orient === left ? "end" : "middle");
+function selection_attr(name, value) {
+  var fullname = namespace(name);
 
-    selection
-        .each(function() { this.__axis = position; });
+  if (arguments.length < 2) {
+    var node = this.node();
+    return fullname.local
+        ? node.getAttributeNS(fullname.space, fullname.local)
+        : node.getAttribute(fullname);
   }
 
-  axis.scale = function(_) {
-    return arguments.length ? (scale = _, axis) : scale;
-  };
-
-  axis.ticks = function() {
-    return tickArguments = Array.from(arguments), axis;
-  };
+  return this.each((value == null
+      ? (fullname.local ? attrRemoveNS : attrRemove) : (typeof value === "function"
+      ? (fullname.local ? attrFunctionNS : attrFunction)
+      : (fullname.local ? attrConstantNS : attrConstant)))(fullname, value));
+}
 
-  axis.tickArguments = function(_) {
-    return arguments.length ? (tickArguments = _ == null ? [] : Array.from(_), axis) : tickArguments.slice();
-  };
+function defaultView(node) {
+  return (node.ownerDocument && node.ownerDocument.defaultView) // node is a Node
+      || (node.document && node) // node is a Window
+      || node.defaultView; // node is a Document
+}
 
-  axis.tickValues = function(_) {
-    return arguments.length ? (tickValues = _ == null ? null : Array.from(_), axis) : tickValues && tickValues.slice();
+function styleRemove(name) {
+  return function() {
+    this.style.removeProperty(name);
   };
+}
 
-  axis.tickFormat = function(_) {
-    return arguments.length ? (tickFormat = _, axis) : tickFormat;
+function styleConstant(name, value, priority) {
+  return function() {
+    this.style.setProperty(name, value, priority);
   };
+}
 
-  axis.tickSize = function(_) {
-    return arguments.length ? (tickSizeInner = tickSizeOuter = +_, axis) : tickSizeInner;
+function styleFunction(name, value, priority) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) this.style.removeProperty(name);
+    else this.style.setProperty(name, v, priority);
   };
+}
 
-  axis.tickSizeInner = function(_) {
-    return arguments.length ? (tickSizeInner = +_, axis) : tickSizeInner;
-  };
+function selection_style(name, value, priority) {
+  return arguments.length > 1
+      ? this.each((value == null
+            ? styleRemove : typeof value === "function"
+            ? styleFunction
+            : styleConstant)(name, value, priority == null ? "" : priority))
+      : styleValue(this.node(), name);
+}
 
-  axis.tickSizeOuter = function(_) {
-    return arguments.length ? (tickSizeOuter = +_, axis) : tickSizeOuter;
-  };
+function styleValue(node, name) {
+  return node.style.getPropertyValue(name)
+      || defaultView(node).getComputedStyle(node, null).getPropertyValue(name);
+}
 
-  axis.tickPadding = function(_) {
-    return arguments.length ? (tickPadding = +_, axis) : tickPadding;
+function propertyRemove(name) {
+  return function() {
+    delete this[name];
   };
+}
 
-  axis.offset = function(_) {
-    return arguments.length ? (offset = +_, axis) : offset;
+function propertyConstant(name, value) {
+  return function() {
+    this[name] = value;
   };
-
-  return axis;
 }
 
-function axisTop(scale) {
-  return axis(top, scale);
+function propertyFunction(name, value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) delete this[name];
+    else this[name] = v;
+  };
 }
 
-function axisRight(scale) {
-  return axis(right, scale);
+function selection_property(name, value) {
+  return arguments.length > 1
+      ? this.each((value == null
+          ? propertyRemove : typeof value === "function"
+          ? propertyFunction
+          : propertyConstant)(name, value))
+      : this.node()[name];
 }
 
-function axisBottom(scale) {
-  return axis(bottom, scale);
+function classArray(string) {
+  return string.trim().split(/^|\s+/);
 }
 
-function axisLeft(scale) {
-  return axis(left, scale);
+function classList(node) {
+  return node.classList || new ClassList(node);
 }
 
-function ascending$1$1(a, b) {
-  return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+function ClassList(node) {
+  this._node = node;
+  this._names = classArray(node.getAttribute("class") || "");
 }
 
-function bisector$1(f) {
-  let delta = f;
-  let compare1 = f;
-  let compare2 = f;
-
-  if (f.length !== 2) {
-    delta = (d, x) => f(d) - x;
-    compare1 = ascending$1$1;
-    compare2 = (d, x) => ascending$1$1(f(d), x);
-  }
-
-  function left(a, x, lo = 0, hi = a.length) {
-    if (lo < hi) {
-      if (compare1(x, x) !== 0) return hi;
-      do {
-        const mid = (lo + hi) >>> 1;
-        if (compare2(a[mid], x) < 0) lo = mid + 1;
-        else hi = mid;
-      } while (lo < hi);
+ClassList.prototype = {
+  add: function(name) {
+    var i = this._names.indexOf(name);
+    if (i < 0) {
+      this._names.push(name);
+      this._node.setAttribute("class", this._names.join(" "));
     }
-    return lo;
-  }
-
-  function right(a, x, lo = 0, hi = a.length) {
-    if (lo < hi) {
-      if (compare1(x, x) !== 0) return hi;
-      do {
-        const mid = (lo + hi) >>> 1;
-        if (compare2(a[mid], x) <= 0) lo = mid + 1;
-        else hi = mid;
-      } while (lo < hi);
+  },
+  remove: function(name) {
+    var i = this._names.indexOf(name);
+    if (i >= 0) {
+      this._names.splice(i, 1);
+      this._node.setAttribute("class", this._names.join(" "));
     }
-    return lo;
-  }
-
-  function center(a, x, lo = 0, hi = a.length) {
-    const i = left(a, x, lo, hi - 1);
-    return i > lo && delta(a[i - 1], x) > -delta(a[i], x) ? i - 1 : i;
+  },
+  contains: function(name) {
+    return this._names.indexOf(name) >= 0;
   }
+};
 
-  return {left, center, right};
+function classedAdd(node, names) {
+  var list = classList(node), i = -1, n = names.length;
+  while (++i < n) list.add(names[i]);
 }
 
-function number$1(x) {
-  return x === null ? NaN : +x;
+function classedRemove(node, names) {
+  var list = classList(node), i = -1, n = names.length;
+  while (++i < n) list.remove(names[i]);
 }
 
-const ascendingBisect$1 = bisector$1(ascending$1$1);
-const bisectRight$1 = ascendingBisect$1.right;
-bisector$1(number$1).center;
-var bisect = bisectRight$1;
+function classedTrue(names) {
+  return function() {
+    classedAdd(this, names);
+  };
+}
 
-var e10$1 = Math.sqrt(50),
-    e5$1 = Math.sqrt(10),
-    e2$1 = Math.sqrt(2);
+function classedFalse(names) {
+  return function() {
+    classedRemove(this, names);
+  };
+}
 
-function ticks$1(start, stop, count) {
-  var reverse,
-      i = -1,
-      n,
-      ticks,
-      step;
+function classedFunction(names, value) {
+  return function() {
+    (value.apply(this, arguments) ? classedAdd : classedRemove)(this, names);
+  };
+}
 
-  stop = +stop, start = +start, count = +count;
-  if (start === stop && count > 0) return [start];
-  if (reverse = stop < start) n = start, start = stop, stop = n;
-  if ((step = tickIncrement$1(start, stop, count)) === 0 || !isFinite(step)) return [];
+function selection_classed(name, value) {
+  var names = classArray(name + "");
 
-  if (step > 0) {
-    let r0 = Math.round(start / step), r1 = Math.round(stop / step);
-    if (r0 * step < start) ++r0;
-    if (r1 * step > stop) --r1;
-    ticks = new Array(n = r1 - r0 + 1);
-    while (++i < n) ticks[i] = (r0 + i) * step;
-  } else {
-    step = -step;
-    let r0 = Math.round(start * step), r1 = Math.round(stop * step);
-    if (r0 / step < start) ++r0;
-    if (r1 / step > stop) --r1;
-    ticks = new Array(n = r1 - r0 + 1);
-    while (++i < n) ticks[i] = (r0 + i) / step;
+  if (arguments.length < 2) {
+    var list = classList(this.node()), i = -1, n = names.length;
+    while (++i < n) if (!list.contains(names[i])) return false;
+    return true;
   }
 
-  if (reverse) ticks.reverse();
-
-  return ticks;
-}
-
-function tickIncrement$1(start, stop, count) {
-  var step = (stop - start) / Math.max(0, count),
-      power = Math.floor(Math.log(step) / Math.LN10),
-      error = step / Math.pow(10, power);
-  return power >= 0
-      ? (error >= e10$1 ? 10 : error >= e5$1 ? 5 : error >= e2$1 ? 2 : 1) * Math.pow(10, power)
-      : -Math.pow(10, -power) / (error >= e10$1 ? 10 : error >= e5$1 ? 5 : error >= e2$1 ? 2 : 1);
+  return this.each((typeof value === "function"
+      ? classedFunction : value
+      ? classedTrue
+      : classedFalse)(names, value));
 }
 
-function tickStep$1(start, stop, count) {
-  var step0 = Math.abs(stop - start) / Math.max(0, count),
-      step1 = Math.pow(10, Math.floor(Math.log(step0) / Math.LN10)),
-      error = step0 / step1;
-  if (error >= e10$1) step1 *= 10;
-  else if (error >= e5$1) step1 *= 5;
-  else if (error >= e2$1) step1 *= 2;
-  return stop < start ? -step1 : step1;
+function textRemove() {
+  this.textContent = "";
 }
 
-function initRange(domain, range) {
-  switch (arguments.length) {
-    case 0: break;
-    case 1: this.range(domain); break;
-    default: this.range(range).domain(domain); break;
-  }
-  return this;
+function textConstant(value) {
+  return function() {
+    this.textContent = value;
+  };
 }
 
-function numberArray(a, b) {
-  if (!b) b = [];
-  var n = a ? Math.min(b.length, a.length) : 0,
-      c = b.slice(),
-      i;
-  return function(t) {
-    for (i = 0; i < n; ++i) c[i] = a[i] * (1 - t) + b[i] * t;
-    return c;
+function textFunction(value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    this.textContent = v == null ? "" : v;
   };
 }
 
-function isNumberArray(x) {
-  return ArrayBuffer.isView(x) && !(x instanceof DataView);
+function selection_text(value) {
+  return arguments.length
+      ? this.each(value == null
+          ? textRemove : (typeof value === "function"
+          ? textFunction
+          : textConstant)(value))
+      : this.node().textContent;
 }
 
-function genericArray(a, b) {
-  var nb = b ? b.length : 0,
-      na = a ? Math.min(nb, a.length) : 0,
-      x = new Array(na),
-      c = new Array(nb),
-      i;
-
-  for (i = 0; i < na; ++i) x[i] = interpolate(a[i], b[i]);
-  for (; i < nb; ++i) c[i] = b[i];
+function htmlRemove() {
+  this.innerHTML = "";
+}
 
-  return function(t) {
-    for (i = 0; i < na; ++i) c[i] = x[i](t);
-    return c;
+function htmlConstant(value) {
+  return function() {
+    this.innerHTML = value;
   };
 }
 
-function date(a, b) {
-  var d = new Date;
-  return a = +a, b = +b, function(t) {
-    return d.setTime(a * (1 - t) + b * t), d;
+function htmlFunction(value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    this.innerHTML = v == null ? "" : v;
   };
 }
 
-function interpolateNumber(a, b) {
-  return a = +a, b = +b, function(t) {
-    return a * (1 - t) + b * t;
-  };
+function selection_html(value) {
+  return arguments.length
+      ? this.each(value == null
+          ? htmlRemove : (typeof value === "function"
+          ? htmlFunction
+          : htmlConstant)(value))
+      : this.node().innerHTML;
 }
 
-function object(a, b) {
-  var i = {},
-      c = {},
-      k;
+function raise() {
+  if (this.nextSibling) this.parentNode.appendChild(this);
+}
 
-  if (a === null || typeof a !== "object") a = {};
-  if (b === null || typeof b !== "object") b = {};
+function selection_raise() {
+  return this.each(raise);
+}
 
-  for (k in b) {
-    if (k in a) {
-      i[k] = interpolate(a[k], b[k]);
-    } else {
-      c[k] = b[k];
-    }
-  }
+function lower() {
+  if (this.previousSibling) this.parentNode.insertBefore(this, this.parentNode.firstChild);
+}
 
-  return function(t) {
-    for (k in i) c[k] = i[k](t);
-    return c;
-  };
+function selection_lower() {
+  return this.each(lower);
 }
 
-var reA = /[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g,
-    reB = new RegExp(reA.source, "g");
+function selection_append(name) {
+  var create = typeof name === "function" ? name : creator(name);
+  return this.select(function() {
+    return this.appendChild(create.apply(this, arguments));
+  });
+}
 
-function zero$1(b) {
-  return function() {
-    return b;
-  };
+function constantNull() {
+  return null;
 }
 
-function one(b) {
-  return function(t) {
-    return b(t) + "";
-  };
+function selection_insert(name, before) {
+  var create = typeof name === "function" ? name : creator(name),
+      select = before == null ? constantNull : typeof before === "function" ? before : selector(before);
+  return this.select(function() {
+    return this.insertBefore(create.apply(this, arguments), select.apply(this, arguments) || null);
+  });
 }
 
-function string(a, b) {
-  var bi = reA.lastIndex = reB.lastIndex = 0, // scan index for next number in b
-      am, // current match in a
-      bm, // current match in b
-      bs, // string preceding current number in b, if any
-      i = -1, // index in s
-      s = [], // string constants and placeholders
-      q = []; // number interpolators
+function remove() {
+  var parent = this.parentNode;
+  if (parent) parent.removeChild(this);
+}
 
-  // Coerce inputs to strings.
-  a = a + "", b = b + "";
+function selection_remove() {
+  return this.each(remove);
+}
 
-  // Interpolate pairs of numbers in a & b.
-  while ((am = reA.exec(a))
-      && (bm = reB.exec(b))) {
-    if ((bs = bm.index) > bi) { // a string precedes the next number in b
-      bs = b.slice(bi, bs);
-      if (s[i]) s[i] += bs; // coalesce with previous string
-      else s[++i] = bs;
-    }
-    if ((am = am[0]) === (bm = bm[0])) { // numbers in a & b match
-      if (s[i]) s[i] += bm; // coalesce with previous string
-      else s[++i] = bm;
-    } else { // interpolate non-matching numbers
-      s[++i] = null;
-      q.push({i: i, x: interpolateNumber(am, bm)});
-    }
-    bi = reB.lastIndex;
-  }
+function selection_cloneShallow() {
+  var clone = this.cloneNode(false), parent = this.parentNode;
+  return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
+}
 
-  // Add remains of b.
-  if (bi < b.length) {
-    bs = b.slice(bi);
-    if (s[i]) s[i] += bs; // coalesce with previous string
-    else s[++i] = bs;
-  }
+function selection_cloneDeep() {
+  var clone = this.cloneNode(true), parent = this.parentNode;
+  return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
+}
 
-  // Special optimization for only a single match.
-  // Otherwise, interpolate each of the numbers and rejoin the string.
-  return s.length < 2 ? (q[0]
-      ? one(q[0].x)
-      : zero$1(b))
-      : (b = q.length, function(t) {
-          for (var i = 0, o; i < b; ++i) s[(o = q[i]).i] = o.x(t);
-          return s.join("");
-        });
+function selection_clone(deep) {
+  return this.select(deep ? selection_cloneDeep : selection_cloneShallow);
 }
 
-function interpolate(a, b) {
-  var t = typeof b, c;
-  return b == null || t === "boolean" ? constant$3(b)
-      : (t === "number" ? interpolateNumber
-      : t === "string" ? ((c = color$1(b)) ? (b = c, rgb$2) : string)
-      : b instanceof color$1 ? rgb$2
-      : b instanceof Date ? date
-      : isNumberArray(b) ? numberArray
-      : Array.isArray(b) ? genericArray
-      : typeof b.valueOf !== "function" && typeof b.toString !== "function" || isNaN(b) ? object
-      : interpolateNumber)(a, b);
-}
-
-function interpolateRound(a, b) {
-  return a = +a, b = +b, function(t) {
-    return Math.round(a * (1 - t) + b * t);
-  };
+function selection_datum(value) {
+  return arguments.length
+      ? this.property("__data__", value)
+      : this.node().__data__;
 }
 
-function constants(x) {
-  return function() {
-    return x;
+function contextListener(listener) {
+  return function(event) {
+    listener.call(this, event, this.__data__);
   };
 }
 
-function number$3(x) {
-  return +x;
-}
-
-var unit = [0, 1];
-
-function identity(x) {
-  return x;
-}
-
-function normalize(a, b) {
-  return (b -= (a = +a))
-      ? function(x) { return (x - a) / b; }
-      : constants(isNaN(b) ? NaN : 0.5);
+function parseTypenames(typenames) {
+  return typenames.trim().split(/^|\s+/).map(function(t) {
+    var name = "", i = t.indexOf(".");
+    if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
+    return {type: t, name: name};
+  });
 }
 
-function clamper(a, b) {
-  var t;
-  if (a > b) t = a, a = b, b = t;
-  return function(x) { return Math.max(a, Math.min(b, x)); };
+function onRemove(typename) {
+  return function() {
+    var on = this.__on;
+    if (!on) return;
+    for (var j = 0, i = -1, m = on.length, o; j < m; ++j) {
+      if (o = on[j], (!typename.type || o.type === typename.type) && o.name === typename.name) {
+        this.removeEventListener(o.type, o.listener, o.options);
+      } else {
+        on[++i] = o;
+      }
+    }
+    if (++i) on.length = i;
+    else delete this.__on;
+  };
 }
 
-// normalize(a, b)(x) takes a domain value x in [a,b] and returns the corresponding parameter t in [0,1].
-// interpolate(a, b)(t) takes a parameter t in [0,1] and returns the corresponding range value x in [a,b].
-function bimap(domain, range, interpolate) {
-  var d0 = domain[0], d1 = domain[1], r0 = range[0], r1 = range[1];
-  if (d1 < d0) d0 = normalize(d1, d0), r0 = interpolate(r1, r0);
-  else d0 = normalize(d0, d1), r0 = interpolate(r0, r1);
-  return function(x) { return r0(d0(x)); };
+function onAdd(typename, value, options) {
+  return function() {
+    var on = this.__on, o, listener = contextListener(value);
+    if (on) for (var j = 0, m = on.length; j < m; ++j) {
+      if ((o = on[j]).type === typename.type && o.name === typename.name) {
+        this.removeEventListener(o.type, o.listener, o.options);
+        this.addEventListener(o.type, o.listener = listener, o.options = options);
+        o.value = value;
+        return;
+      }
+    }
+    this.addEventListener(typename.type, listener, options);
+    o = {type: typename.type, name: typename.name, value: value, listener: listener, options: options};
+    if (!on) this.__on = [o];
+    else on.push(o);
+  };
 }
 
-function polymap(domain, range, interpolate) {
-  var j = Math.min(domain.length, range.length) - 1,
-      d = new Array(j),
-      r = new Array(j),
-      i = -1;
-
-  // Reverse descending domains.
-  if (domain[j] < domain[0]) {
-    domain = domain.slice().reverse();
-    range = range.slice().reverse();
-  }
+function selection_on(typename, value, options) {
+  var typenames = parseTypenames(typename + ""), i, n = typenames.length, t;
 
-  while (++i < j) {
-    d[i] = normalize(domain[i], domain[i + 1]);
-    r[i] = interpolate(range[i], range[i + 1]);
+  if (arguments.length < 2) {
+    var on = this.node().__on;
+    if (on) for (var j = 0, m = on.length, o; j < m; ++j) {
+      for (i = 0, o = on[j]; i < n; ++i) {
+        if ((t = typenames[i]).type === o.type && t.name === o.name) {
+          return o.value;
+        }
+      }
+    }
+    return;
   }
 
-  return function(x) {
-    var i = bisect(domain, x, 1, j) - 1;
-    return r[i](d[i](x));
-  };
-}
-
-function copy(source, target) {
-  return target
-      .domain(source.domain())
-      .range(source.range())
-      .interpolate(source.interpolate())
-      .clamp(source.clamp())
-      .unknown(source.unknown());
+  on = value ? onAdd : onRemove;
+  for (i = 0; i < n; ++i) this.each(on(typenames[i], value, options));
+  return this;
 }
 
-function transformer() {
-  var domain = unit,
-      range = unit,
-      interpolate$1 = interpolate,
-      transform,
-      untransform,
-      unknown,
-      clamp = identity,
-      piecewise,
-      output,
-      input;
-
-  function rescale() {
-    var n = Math.min(domain.length, range.length);
-    if (clamp !== identity) clamp = clamper(domain[0], domain[n - 1]);
-    piecewise = n > 2 ? polymap : bimap;
-    output = input = null;
-    return scale;
-  }
+function dispatchEvent(node, type, params) {
+  var window = defaultView(node),
+      event = window.CustomEvent;
 
-  function scale(x) {
-    return x == null || isNaN(x = +x) ? unknown : (output || (output = piecewise(domain.map(transform), range, interpolate$1)))(transform(clamp(x)));
+  if (typeof event === "function") {
+    event = new event(type, params);
+  } else {
+    event = window.document.createEvent("Event");
+    if (params) event.initEvent(type, params.bubbles, params.cancelable), event.detail = params.detail;
+    else event.initEvent(type, false, false);
   }
 
-  scale.invert = function(y) {
-    return clamp(untransform((input || (input = piecewise(range, domain.map(transform), interpolateNumber)))(y)));
-  };
-
-  scale.domain = function(_) {
-    return arguments.length ? (domain = Array.from(_, number$3), rescale()) : domain.slice();
-  };
-
-  scale.range = function(_) {
-    return arguments.length ? (range = Array.from(_), rescale()) : range.slice();
-  };
-
-  scale.rangeRound = function(_) {
-    return range = Array.from(_), interpolate$1 = interpolateRound, rescale();
-  };
-
-  scale.clamp = function(_) {
-    return arguments.length ? (clamp = _ ? true : identity, rescale()) : clamp !== identity;
-  };
-
-  scale.interpolate = function(_) {
-    return arguments.length ? (interpolate$1 = _, rescale()) : interpolate$1;
-  };
+  node.dispatchEvent(event);
+}
 
-  scale.unknown = function(_) {
-    return arguments.length ? (unknown = _, scale) : unknown;
+function dispatchConstant(type, params) {
+  return function() {
+    return dispatchEvent(this, type, params);
   };
+}
 
-  return function(t, u) {
-    transform = t, untransform = u;
-    return rescale();
+function dispatchFunction(type, params) {
+  return function() {
+    return dispatchEvent(this, type, params.apply(this, arguments));
   };
 }
 
-function continuous() {
-  return transformer()(identity, identity);
+function selection_dispatch(type, params) {
+  return this.each((typeof params === "function"
+      ? dispatchFunction
+      : dispatchConstant)(type, params));
 }
 
-function tickFormat(start, stop, count, specifier) {
-  var step = tickStep$1(start, stop, count),
-      precision;
-  specifier = formatSpecifier$1(specifier == null ? ",f" : specifier);
-  switch (specifier.type) {
-    case "s": {
-      var value = Math.max(Math.abs(start), Math.abs(stop));
-      if (specifier.precision == null && !isNaN(precision = precisionPrefix(step, value))) specifier.precision = precision;
-      return formatPrefix$1(specifier, value);
-    }
-    case "":
-    case "e":
-    case "g":
-    case "p":
-    case "r": {
-      if (specifier.precision == null && !isNaN(precision = precisionRound$1(step, Math.max(Math.abs(start), Math.abs(stop))))) specifier.precision = precision - (specifier.type === "e");
-      break;
-    }
-    case "f":
-    case "%": {
-      if (specifier.precision == null && !isNaN(precision = precisionFixed(step))) specifier.precision = precision - (specifier.type === "%") * 2;
-      break;
+function* selection_iterator() {
+  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
+      if (node = group[i]) yield node;
     }
   }
-  return format$1(specifier);
 }
 
-function linearish(scale) {
-  var domain = scale.domain;
+var root = [null];
 
-  scale.ticks = function(count) {
-    var d = domain();
-    return ticks$1(d[0], d[d.length - 1], count == null ? 10 : count);
-  };
+function Selection(groups, parents) {
+  this._groups = groups;
+  this._parents = parents;
+}
 
-  scale.tickFormat = function(count, specifier) {
-    var d = domain();
-    return tickFormat(d[0], d[d.length - 1], count == null ? 10 : count, specifier);
-  };
+function selection() {
+  return new Selection([[document.documentElement]], root);
+}
 
-  scale.nice = function(count) {
-    if (count == null) count = 10;
+function selection_selection() {
+  return this;
+}
 
-    var d = domain();
-    var i0 = 0;
-    var i1 = d.length - 1;
-    var start = d[i0];
-    var stop = d[i1];
-    var prestep;
-    var step;
-    var maxIter = 10;
-
-    if (stop < start) {
-      step = start, start = stop, stop = step;
-      step = i0, i0 = i1, i1 = step;
-    }
-    
-    while (maxIter-- > 0) {
-      step = tickIncrement$1(start, stop, count);
-      if (step === prestep) {
-        d[i0] = start;
-        d[i1] = stop;
-        return domain(d);
-      } else if (step > 0) {
-        start = Math.floor(start / step) * step;
-        stop = Math.ceil(stop / step) * step;
-      } else if (step < 0) {
-        start = Math.ceil(start * step) / step;
-        stop = Math.floor(stop * step) / step;
-      } else {
-        break;
-      }
-      prestep = step;
-    }
-
-    return scale;
-  };
-
-  return scale;
-}
-
-function linear() {
-  var scale = continuous();
-
-  scale.copy = function() {
-    return copy(scale, linear());
-  };
-
-  initRange.apply(scale, arguments);
+Selection.prototype = selection.prototype = {
+  constructor: Selection,
+  select: selection_select,
+  selectAll: selection_selectAll,
+  selectChild: selection_selectChild,
+  selectChildren: selection_selectChildren,
+  filter: selection_filter,
+  data: selection_data,
+  enter: selection_enter,
+  exit: selection_exit,
+  join: selection_join,
+  merge: selection_merge,
+  selection: selection_selection,
+  order: selection_order,
+  sort: selection_sort,
+  call: selection_call,
+  nodes: selection_nodes,
+  node: selection_node,
+  size: selection_size,
+  empty: selection_empty,
+  each: selection_each,
+  attr: selection_attr,
+  style: selection_style,
+  property: selection_property,
+  classed: selection_classed,
+  text: selection_text,
+  html: selection_html,
+  raise: selection_raise,
+  lower: selection_lower,
+  append: selection_append,
+  insert: selection_insert,
+  remove: selection_remove,
+  clone: selection_clone,
+  datum: selection_datum,
+  on: selection_on,
+  dispatch: selection_dispatch,
+  [Symbol.iterator]: selection_iterator
+};
 
-  return linearish(scale);
+function select(selector) {
+  return typeof selector === "string"
+      ? new Selection([[document.querySelector(selector)]], [document.documentElement])
+      : new Selection([[selector]], root);
 }
 
-var xhtml$1 = "http://www.w3.org/1999/xhtml";
+/*!
+ * FPSMeter 0.3.1 - 9th May 2013
+ * https://github.com/Darsain/fpsmeter
+ *
+ * Licensed under the MIT license.
+ * http://opensource.org/licenses/MIT
+ */
+(function (w, undefined$1) {
 
-var namespaces$1 = {
-  svg: "http://www.w3.org/2000/svg",
-  xhtml: xhtml$1,
-  xlink: "http://www.w3.org/1999/xlink",
-  xml: "http://www.w3.org/XML/1998/namespace",
-  xmlns: "http://www.w3.org/2000/xmlns/"
-};
+	/**
+	 * Create a new element.
+	 *
+	 * @param  {String} name Element type name.
+	 *
+	 * @return {Element}
+	 */
+	function newEl(name) {
+		return document.createElement(name);
+	}
 
-function namespace$1(name) {
-  var prefix = name += "", i = prefix.indexOf(":");
-  if (i >= 0 && (prefix = name.slice(0, i)) !== "xmlns") name = name.slice(i + 1);
-  return namespaces$1.hasOwnProperty(prefix) ? {space: namespaces$1[prefix], local: name} : name; // eslint-disable-line no-prototype-builtins
-}
+	/**
+	 * Apply theme CSS properties to element.
+	 *
+	 * @param  {Element} element DOM element.
+	 * @param  {Object}  theme   Theme object.
+	 *
+	 * @return {Element}
+	 */
+	function applyTheme(element, theme) {
+		for (var name in theme) {
+			try {
+				element.style[name] = theme[name];
+			} catch (e) {}
+		}
+		return element;
+	}
 
-function creatorInherit$1(name) {
-  return function() {
-    var document = this.ownerDocument,
-        uri = this.namespaceURI;
-    return uri === xhtml$1 && document.documentElement.namespaceURI === xhtml$1
-        ? document.createElement(name)
-        : document.createElementNS(uri, name);
-  };
-}
+	/**
+	 * Return type of the value.
+	 *
+	 * @param  {Mixed} value
+	 *
+	 * @return {String}
+	 */
+	function type(value) {
+		if (value == null) {
+			return String(value);
+		}
 
-function creatorFixed$1(fullname) {
-  return function() {
-    return this.ownerDocument.createElementNS(fullname.space, fullname.local);
-  };
-}
+		if (typeof value === 'object' || typeof value === 'function') {
+			return Object.prototype.toString.call(value).match(/\s([a-z]+)/i)[1].toLowerCase() || 'object';
+		}
 
-function creator$1(name) {
-  var fullname = namespace$1(name);
-  return (fullname.local
-      ? creatorFixed$1
-      : creatorInherit$1)(fullname);
-}
+		return typeof value;
+	}
 
-function none$1() {}
+	/**
+	 * Check whether the value is in an array.
+	 *
+	 * @param  {Mixed} value
+	 * @param  {Array} array
+	 *
+	 * @return {Integer} Array index or -1 when not found.
+	 */
+	function inArray(value, array) {
+		if (type(array) !== 'array') {
+			return -1;
+		}
+		if (array.indexOf) {
+			return array.indexOf(value);
+		}
+		for (var i = 0, l = array.length; i < l; i++) {
+			if (array[i] === value) {
+				return i;
+			}
+		}
+		return -1;
+	}
 
-function selector$1(selector) {
-  return selector == null ? none$1 : function() {
-    return this.querySelector(selector);
-  };
-}
+	/**
+	 * Poor man's deep object extend.
+	 *
+	 * Example:
+	 *   extend({}, defaults, options);
+	 *
+	 * @return {Void}
+	 */
+	function extend() {
+		var args = arguments;
+		for (var key in args[1]) {
+			if (args[1].hasOwnProperty(key)) {
+				switch (type(args[1][key])) {
+					case 'object':
+						args[0][key] = extend({}, args[0][key], args[1][key]);
+						break;
 
-function selection_select$1(select) {
-  if (typeof select !== "function") select = selector$1(select);
+					case 'array':
+						args[0][key] = args[1][key].slice(0);
+						break;
 
-  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) {
-      if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {
-        if ("__data__" in node) subnode.__data__ = node.__data__;
-        subgroup[i] = subnode;
-      }
-    }
-  }
+					default:
+						args[0][key] = args[1][key];
+				}
+			}
+		}
+		return args.length > 2 ?
+			extend.apply(null, [args[0]].concat(Array.prototype.slice.call(args, 2))) :
+			args[0];
+	}
 
-  return new Selection$1(subgroups, this._parents);
-}
+	/**
+	 * Convert HSL color to HEX string.
+	 *
+	 * @param  {Array} hsl Array with [hue, saturation, lightness].
+	 *
+	 * @return {Array} Array with [red, green, blue].
+	 */
+	function hslToHex(h, s, l) {
+		var r, g, b;
+		var v, min, sv, sextant, fract, vsf;
 
-// Given something array like (or null), returns something that is strictly an
-// array. This is used to ensure that array-like objects passed to d3.selectAll
-// or selection.selectAll are converted into proper arrays when creating a
-// selection; we don’t ever want to create a selection backed by a live
-// HTMLCollection or NodeList. However, note that selection.selectAll will use a
-// static NodeList as a group, since it safely derived from querySelectorAll.
-function array$1(x) {
-  return x == null ? [] : Array.isArray(x) ? x : Array.from(x);
-}
+		if (l <= 0.5) {
+			v = l * (1 + s);
+		} else {
+			v = l + s - l * s;
+		}
 
-function empty$1() {
-  return [];
-}
-
-function selectorAll$1(selector) {
-  return selector == null ? empty$1 : function() {
-    return this.querySelectorAll(selector);
-  };
-}
-
-function arrayAll$1(select) {
-  return function() {
-    return array$1(select.apply(this, arguments));
-  };
-}
+		if (v === 0) {
+			return '#000';
+		} else {
+			min = 2 * l - v;
+			sv = (v - min) / v;
+			h = 6 * h;
+			sextant = Math.floor(h);
+			fract = h - sextant;
+			vsf = v * sv * fract;
+			if (sextant === 0 || sextant === 6) {
+				r = v;
+				g = min + vsf;
+				b = min;
+			} else if (sextant === 1) {
+				r = v - vsf;
+				g = v;
+				b = min;
+			} else if (sextant === 2) {
+				r = min;
+				g = v;
+				b = min + vsf;
+			} else if (sextant === 3) {
+				r = min;
+				g = v - vsf;
+				b = v;
+			} else if (sextant === 4) {
+				r = min + vsf;
+				g = min;
+				b = v;
+			} else {
+				r = v;
+				g = min;
+				b = v - vsf;
+			}
+			return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
+		}
+	}
 
-function selection_selectAll$1(select) {
-  if (typeof select === "function") select = arrayAll$1(select);
-  else select = selectorAll$1(select);
+	/**
+	 * Helper function for hslToHex.
+	 */
+	function componentToHex(c) {
+		c = Math.round(c * 255).toString(16);
+		return c.length === 1 ? '0' + c : c;
+	}
 
-  for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
-      if (node = group[i]) {
-        subgroups.push(select.call(node, node.__data__, i, group));
-        parents.push(node);
-      }
-    }
-  }
+	/**
+	 * Manage element event listeners.
+	 *
+	 * @param  {Node}     element
+	 * @param  {Event}    eventName
+	 * @param  {Function} handler
+	 * @param  {Bool}     remove
+	 *
+	 * @return {Void}
+	 */
+	function listener(element, eventName, handler, remove) {
+		if (element.addEventListener) {
+			element[remove ? 'removeEventListener' : 'addEventListener'](eventName, handler, false);
+		} else if (element.attachEvent) {
+			element[remove ? 'detachEvent' : 'attachEvent']('on' + eventName, handler);
+		}
+	}
 
-  return new Selection$1(subgroups, parents);
-}
+	// Preferred timing funtion
+	var getTime;
+	(function () {
+		var perf = w.performance;
+		if (perf && (perf.now || perf.webkitNow)) {
+			var perfNow = perf.now ? 'now' : 'webkitNow';
+			getTime = perf[perfNow].bind(perf);
+		} else {
+			getTime = function () {
+				return +new Date();
+			};
+		}
+	}());
 
-function matcher$1(selector) {
-  return function() {
-    return this.matches(selector);
-  };
-}
+	// Local WindowAnimationTiming interface polyfill
+	var cAF = w.cancelAnimationFrame || w.cancelRequestAnimationFrame;
+	var rAF = w.requestAnimationFrame;
+	(function () {
+		var vendors = ['moz', 'webkit', 'o'];
+		var lastTime = 0;
 
-function childMatcher$1(selector) {
-  return function(node) {
-    return node.matches(selector);
-  };
-}
+		// For a more accurate WindowAnimationTiming interface implementation, ditch the native
+		// requestAnimationFrame when cancelAnimationFrame is not present (older versions of Firefox)
+		for (var i = 0, l = vendors.length; i < l && !cAF; ++i) {
+			cAF = w[vendors[i]+'CancelAnimationFrame'] || w[vendors[i]+'CancelRequestAnimationFrame'];
+			rAF = cAF && w[vendors[i]+'RequestAnimationFrame'];
+		}
 
-var find$1 = Array.prototype.find;
+		if (!cAF) {
+			rAF = function (callback) {
+				var currTime = getTime();
+				var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+				lastTime = currTime + timeToCall;
+				return w.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);
+			};
 
-function childFind$1(match) {
-  return function() {
-    return find$1.call(this.children, match);
-  };
-}
+			cAF = function (id) {
+				clearTimeout(id);
+			};
+		}
+	}());
 
-function childFirst$1() {
-  return this.firstElementChild;
-}
+	// Property name for assigning element text content
+	var textProp = type(document.createElement('div').textContent) === 'string' ? 'textContent' : 'innerText';
 
-function selection_selectChild$1(match) {
-  return this.select(match == null ? childFirst$1
-      : childFind$1(typeof match === "function" ? match : childMatcher$1(match)));
-}
+	/**
+	 * FPSMeter class.
+	 *
+	 * @param {Element} anchor  Element to append the meter to. Default is document.body.
+	 * @param {Object}  options Object with options.
+	 */
+	function FPSMeter(anchor, options) {
+		// Optional arguments
+		if (type(anchor) === 'object' && anchor.nodeType === undefined$1) {
+			options = anchor;
+			anchor = document.body;
+		}
+		if (!anchor) {
+			anchor = document.body;
+		}
 
-var filter$1 = Array.prototype.filter;
+		// Private properties
+		var self = this;
+		var o = extend({}, FPSMeter.defaults, options || {});
 
-function children$1() {
-  return Array.from(this.children);
-}
+		var el = {};
+		var cols = [];
+		var theme, heatmaps;
+		var heatDepth = 100;
+		var heating = [];
 
-function childrenFilter$1(match) {
-  return function() {
-    return filter$1.call(this.children, match);
-  };
-}
+		var thisFrameTime = 0;
+		var frameTime = o.threshold;
+		var frameStart = 0;
+		var lastLoop = getTime() - frameTime;
+		var time;
 
-function selection_selectChildren$1(match) {
-  return this.selectAll(match == null ? children$1
-      : childrenFilter$1(typeof match === "function" ? match : childMatcher$1(match)));
-}
+		var fpsHistory = [];
+		var durationHistory = [];
 
-function selection_filter$1(match) {
-  if (typeof match !== "function") match = matcher$1(match);
+		var frameID, renderID;
+		var showFps = o.show === 'fps';
+		var graphHeight, count, i, j;
 
-  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) {
-      if ((node = group[i]) && match.call(node, node.__data__, i, group)) {
-        subgroup.push(node);
-      }
-    }
-  }
+		// Exposed properties
+		self.options = o;
+		self.fps = 0;
+		self.duration = 0;
+		self.isPaused = 0;
 
-  return new Selection$1(subgroups, this._parents);
-}
+		/**
+		 * Tick start for measuring the actual rendering duration.
+		 *
+		 * @return {Void}
+		 */
+		self.tickStart = function () {
+			frameStart = getTime();
+		};
 
-function sparse$1(update) {
-  return new Array(update.length);
-}
+		/**
+		 * FPS tick.
+		 *
+		 * @return {Void}
+		 */
+		self.tick = function () {
+			time = getTime();
+			thisFrameTime = time - lastLoop;
+			frameTime += (thisFrameTime - frameTime) / o.smoothing;
+			self.fps = 1000 / frameTime;
+			self.duration = frameStart < lastLoop ? frameTime : time - frameStart;
+			lastLoop = time;
+		};
 
-function selection_enter$1() {
-  return new Selection$1(this._enter || this._groups.map(sparse$1), this._parents);
-}
+		/**
+		 * Pause display rendering.
+		 *
+		 * @return {Object} FPSMeter instance.
+		 */
+		self.pause = function () {
+			if (frameID) {
+				self.isPaused = 1;
+				clearTimeout(frameID);
+				cAF(frameID);
+				cAF(renderID);
+				frameID = renderID = 0;
+			}
+			return self;
+		};
 
-function EnterNode$1(parent, datum) {
-  this.ownerDocument = parent.ownerDocument;
-  this.namespaceURI = parent.namespaceURI;
-  this._next = null;
-  this._parent = parent;
-  this.__data__ = datum;
-}
-
-EnterNode$1.prototype = {
-  constructor: EnterNode$1,
-  appendChild: function(child) { return this._parent.insertBefore(child, this._next); },
-  insertBefore: function(child, next) { return this._parent.insertBefore(child, next); },
-  querySelector: function(selector) { return this._parent.querySelector(selector); },
-  querySelectorAll: function(selector) { return this._parent.querySelectorAll(selector); }
-};
+		/**
+		 * Resume display rendering.
+		 *
+		 * @return {Object} FPSMeter instance.
+		 */
+		self.resume = function () {
+			if (!frameID) {
+				self.isPaused = 0;
+				requestRender();
+			}
+			return self;
+		};
 
-function constant$1(x) {
-  return function() {
-    return x;
-  };
-}
+		/**
+		 * Update options.
+		 *
+		 * @param {String} name  Option name.
+		 * @param {Mixed}  value New value.
+		 *
+		 * @return {Object} FPSMeter instance.
+		 */
+		self.set = function (name, value) {
+			o[name] = value;
+			showFps = o.show === 'fps';
 
-function bindIndex$1(parent, group, enter, update, exit, data) {
-  var i = 0,
-      node,
-      groupLength = group.length,
-      dataLength = data.length;
+			// Rebuild or reposition elements when specific option has been updated
+			if (inArray(name, rebuilders) !== -1) {
+				createMeter();
+			}
+			if (inArray(name, repositioners) !== -1) {
+				positionMeter();
+			}
+			return self;
+		};
 
-  // Put any non-null nodes that fit into update.
-  // Put any null nodes into enter.
-  // Put any remaining data into enter.
-  for (; i < dataLength; ++i) {
-    if (node = group[i]) {
-      node.__data__ = data[i];
-      update[i] = node;
-    } else {
-      enter[i] = new EnterNode$1(parent, data[i]);
-    }
-  }
+		/**
+		 * Change meter into rendering duration mode.
+		 *
+		 * @return {Object} FPSMeter instance.
+		 */
+		self.showDuration = function () {
+			self.set('show', 'ms');
+			return self;
+		};
 
-  // Put any non-null nodes that don’t fit into exit.
-  for (; i < groupLength; ++i) {
-    if (node = group[i]) {
-      exit[i] = node;
-    }
-  }
-}
+		/**
+		 * Change meter into FPS mode.
+		 *
+		 * @return {Object} FPSMeter instance.
+		 */
+		self.showFps = function () {
+			self.set('show', 'fps');
+			return self;
+		};
 
-function bindKey$1(parent, group, enter, update, exit, data, key) {
-  var i,
-      node,
-      nodeByKeyValue = new Map,
-      groupLength = group.length,
-      dataLength = data.length,
-      keyValues = new Array(groupLength),
-      keyValue;
+		/**
+		 * Toggles between show: 'fps' and show: 'duration'.
+		 *
+		 * @return {Object} FPSMeter instance.
+		 */
+		self.toggle = function () {
+			self.set('show', showFps ? 'ms' : 'fps');
+			return self;
+		};
 
-  // Compute the key for each node.
-  // If multiple nodes have the same key, the duplicates are added to exit.
-  for (i = 0; i < groupLength; ++i) {
-    if (node = group[i]) {
-      keyValues[i] = keyValue = key.call(node, node.__data__, i, group) + "";
-      if (nodeByKeyValue.has(keyValue)) {
-        exit[i] = node;
-      } else {
-        nodeByKeyValue.set(keyValue, node);
-      }
-    }
-  }
+		/**
+		 * Hide the FPSMeter. Also pauses the rendering.
+		 *
+		 * @return {Object} FPSMeter instance.
+		 */
+		self.hide = function () {
+			self.pause();
+			el.container.style.display = 'none';
+			return self;
+		};
 
-  // Compute the key for each datum.
-  // If there a node associated with this key, join and add it to update.
-  // If there is not (or the key is a duplicate), add it to enter.
-  for (i = 0; i < dataLength; ++i) {
-    keyValue = key.call(parent, data[i], i, data) + "";
-    if (node = nodeByKeyValue.get(keyValue)) {
-      update[i] = node;
-      node.__data__ = data[i];
-      nodeByKeyValue.delete(keyValue);
-    } else {
-      enter[i] = new EnterNode$1(parent, data[i]);
-    }
-  }
+		/**
+		 * Show the FPSMeter. Also resumes the rendering.
+		 *
+		 * @return {Object} FPSMeter instance.
+		 */
+		self.show = function () {
+			self.resume();
+			el.container.style.display = 'block';
+			return self;
+		};
 
-  // Add any remaining nodes that were not bound to data to exit.
-  for (i = 0; i < groupLength; ++i) {
-    if ((node = group[i]) && (nodeByKeyValue.get(keyValues[i]) === node)) {
-      exit[i] = node;
-    }
-  }
-}
+		/**
+		 * Check the current FPS and save it in history.
+		 *
+		 * @return {Void}
+		 */
+		function historyTick() {
+			for (i = o.history; i--;) {
+				fpsHistory[i] = i === 0 ? self.fps : fpsHistory[i-1];
+				durationHistory[i] = i === 0 ? self.duration : durationHistory[i-1];
+			}
+		}
 
-function datum$1(node) {
-  return node.__data__;
-}
+		/**
+		 * Returns heat hex color based on values passed.
+		 *
+		 * @param  {Integer} heatmap
+		 * @param  {Integer} value
+		 * @param  {Integer} min
+		 * @param  {Integer} max
+		 *
+		 * @return {Integer}
+		 */
+		function getHeat(heatmap, value, min, max) {
+			return heatmaps[0|heatmap][Math.round(Math.min((value - min) / (max - min) * heatDepth, heatDepth))];
+		}
 
-function selection_data$1(value, key) {
-  if (!arguments.length) return Array.from(this, datum$1);
+		/**
+		 * Update counter number and legend.
+		 *
+		 * @return {Void}
+		 */
+		function updateCounter() {
+			// Update legend only when changed
+			if (el.legend.fps !== showFps) {
+				el.legend.fps = showFps;
+				el.legend[textProp] = showFps ? 'FPS' : 'ms';
+			}
+			// Update counter with a nicely formated & readable number
+			count = showFps ? self.fps : self.duration;
+			el.count[textProp] = count > 999 ? '999+' : count.toFixed(count > 99 ? 0 : o.decimals);
+		}
 
-  var bind = key ? bindKey$1 : bindIndex$1,
-      parents = this._parents,
-      groups = this._groups;
+		/**
+		 * Render current FPS state.
+		 *
+		 * @return {Void}
+		 */
+		function render() {
+			time = getTime();
+			// If renderer stopped reporting, do a simulated drop to 0 fps
+			if (lastLoop < time - o.threshold) {
+				self.fps -= self.fps / Math.max(1, o.smoothing * 60 / o.interval);
+				self.duration = 1000 / self.fps;
+			}
 
-  if (typeof value !== "function") value = constant$1(value);
+			historyTick();
+			updateCounter();
 
-  for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
-    var parent = parents[j],
-        group = groups[j],
-        groupLength = group.length,
-        data = arraylike$1(value.call(parent, parent && parent.__data__, j, parents)),
-        dataLength = data.length,
-        enterGroup = enter[j] = new Array(dataLength),
-        updateGroup = update[j] = new Array(dataLength),
-        exitGroup = exit[j] = new Array(groupLength);
+			// Apply heat to elements
+			if (o.heat) {
+				if (heating.length) {
+					for (i = heating.length; i--;) {
+						heating[i].el.style[theme[heating[i].name].heatOn] = showFps ?
+							getHeat(theme[heating[i].name].heatmap, self.fps, 0, o.maxFps) :
+							getHeat(theme[heating[i].name].heatmap, self.duration, o.threshold, 0);
+					}
+				}
 
-    bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
+				if (el.graph && theme.column.heatOn) {
+					for (i = cols.length; i--;) {
+						cols[i].style[theme.column.heatOn] = showFps ?
+							getHeat(theme.column.heatmap, fpsHistory[i], 0, o.maxFps) :
+							getHeat(theme.column.heatmap, durationHistory[i], o.threshold, 0);
+					}
+				}
+			}
 
-    // Now connect the enter nodes to their following update node, such that
-    // appendChild can insert the materialized enter node before this node,
-    // rather than at the end of the parent node.
-    for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
-      if (previous = enterGroup[i0]) {
-        if (i0 >= i1) i1 = i0 + 1;
-        while (!(next = updateGroup[i1]) && ++i1 < dataLength);
-        previous._next = next || null;
-      }
-    }
-  }
+			// Update graph columns height
+			if (el.graph) {
+				for (j = 0; j < o.history; j++) {
+					cols[j].style.height = (showFps ?
+						(fpsHistory[j] ? Math.round(graphHeight / o.maxFps * Math.min(fpsHistory[j], o.maxFps)) : 0) :
+						(durationHistory[j] ? Math.round(graphHeight / o.threshold * Math.min(durationHistory[j], o.threshold)) : 0)
+					) + 'px';
+				}
+			}
+		}
 
-  update = new Selection$1(update, parents);
-  update._enter = enter;
-  update._exit = exit;
-  return update;
-}
+		/**
+		 * Request rendering loop.
+		 *
+		 * @return {Int} Animation frame index.
+		 */
+		function requestRender() {
+			if (o.interval < 20) {
+				frameID = rAF(requestRender);
+				render();
+			} else {
+				frameID = setTimeout(requestRender, o.interval);
+				renderID = rAF(render);
+			}
+		}
 
-// Given some data, this returns an array-like view of it: an object that
-// exposes a length property and allows numeric indexing. Note that unlike
-// selectAll, this isn’t worried about “live” collections because the resulting
-// array will only be used briefly while data is being bound. (It is possible to
-// cause the data to change while iterating by using a key function, but please
-// don’t; we’d rather avoid a gratuitous copy.)
-function arraylike$1(data) {
-  return typeof data === "object" && "length" in data
-    ? data // Array, TypedArray, NodeList, array-like
-    : Array.from(data); // Map, Set, iterable, string, or anything else
-}
+		/**
+		 * Meter events handler.
+		 *
+		 * @return {Void}
+		 */
+		function eventHandler(event) {
+			event = event || window.event;
+			if (event.preventDefault) {
+				event.preventDefault();
+				event.stopPropagation();
+			} else {
+				event.returnValue = false;
+				event.cancelBubble = true;
+			}
+			self.toggle();
+		}
 
-function selection_exit$1() {
-  return new Selection$1(this._exit || this._groups.map(sparse$1), this._parents);
-}
+		/**
+		 * Destroys the current FPSMeter instance.
+		 *
+		 * @return {Void}
+		 */
+		self.destroy = function () {
+			// Stop rendering
+			self.pause();
+			// Remove elements
+			removeMeter();
+			// Stop listening
+			self.tick = self.tickStart = function () {};
+		};
 
-function selection_join$1(onenter, onupdate, onexit) {
-  var enter = this.enter(), update = this, exit = this.exit();
-  if (typeof onenter === "function") {
-    enter = onenter(enter);
-    if (enter) enter = enter.selection();
-  } else {
-    enter = enter.append(onenter + "");
-  }
-  if (onupdate != null) {
-    update = onupdate(update);
-    if (update) update = update.selection();
-  }
-  if (onexit == null) exit.remove(); else onexit(exit);
-  return enter && update ? enter.merge(update).order() : update;
-}
+		/**
+		 * Remove meter element.
+		 *
+		 * @return {Void}
+		 */
+		function removeMeter() {
+			// Unbind listeners
+			if (o.toggleOn) {
+				listener(el.container, o.toggleOn, eventHandler, 1);
+			}
+			// Detach element
+			anchor.removeChild(el.container);
+		}
 
-function selection_merge$1(context) {
-  var selection = context.selection ? context.selection() : context;
+		/**
+		 * Sets the theme, and generates heatmaps when needed.
+		 */
+		function setTheme() {
+			theme = FPSMeter.theme[o.theme];
 
-  for (var groups0 = this._groups, groups1 = selection._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {
-    for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) {
-      if (node = group0[i] || group1[i]) {
-        merge[i] = node;
-      }
-    }
-  }
+			// Generate heatmaps
+			heatmaps = theme.compiledHeatmaps || [];
+			if (!heatmaps.length && theme.heatmaps.length) {
+				for (j = 0; j < theme.heatmaps.length; j++) {
+					heatmaps[j] = [];
+					for (i = 0; i <= heatDepth; i++) {
+						heatmaps[j][i] = hslToHex(0.33 / heatDepth * i, theme.heatmaps[j].saturation, theme.heatmaps[j].lightness);
+					}
+				}
+				theme.compiledHeatmaps = heatmaps;
+			}
+		}
 
-  for (; j < m0; ++j) {
-    merges[j] = groups0[j];
-  }
+		/**
+		 * Creates and attaches the meter element.
+		 *
+		 * @return {Void}
+		 */
+		function createMeter() {
+			// Remove old meter if present
+			if (el.container) {
+				removeMeter();
+			}
 
-  return new Selection$1(merges, this._parents);
-}
+			// Set theme
+			setTheme();
 
-function selection_order$1() {
+			// Create elements
+			el.container = applyTheme(newEl('div'), theme.container);
+			el.count = el.container.appendChild(applyTheme(newEl('div'), theme.count));
+			el.legend = el.container.appendChild(applyTheme(newEl('div'), theme.legend));
+			el.graph = o.graph ? el.container.appendChild(applyTheme(newEl('div'), theme.graph)) : 0;
 
-  for (var groups = this._groups, j = -1, m = groups.length; ++j < m;) {
-    for (var group = groups[j], i = group.length - 1, next = group[i], node; --i >= 0;) {
-      if (node = group[i]) {
-        if (next && node.compareDocumentPosition(next) ^ 4) next.parentNode.insertBefore(node, next);
-        next = node;
-      }
-    }
-  }
+			// Add elements to heating array
+			heating.length = 0;
+			for (var key in el) {
+				if (el[key] && theme[key].heatOn) {
+					heating.push({
+						name: key,
+						el: el[key]
+					});
+				}
+			}
 
-  return this;
-}
+			// Graph
+			cols.length = 0;
+			if (el.graph) {
+				// Create graph
+				el.graph.style.width = (o.history * theme.column.width + (o.history - 1) * theme.column.spacing) + 'px';
 
-function selection_sort$1(compare) {
-  if (!compare) compare = ascending$2;
+				// Add columns
+				for (i = 0; i < o.history; i++) {
+					cols[i] = el.graph.appendChild(applyTheme(newEl('div'), theme.column));
+					cols[i].style.position = 'absolute';
+					cols[i].style.bottom = 0;
+					cols[i].style.right = (i * theme.column.width + i * theme.column.spacing) + 'px';
+					cols[i].style.width = theme.column.width + 'px';
+					cols[i].style.height = '0px';
+				}
+			}
 
-  function compareNode(a, b) {
-    return a && b ? compare(a.__data__, b.__data__) : !a - !b;
-  }
+			// Set the initial state
+			positionMeter();
+			updateCounter();
 
-  for (var groups = this._groups, m = groups.length, sortgroups = new Array(m), j = 0; j < m; ++j) {
-    for (var group = groups[j], n = group.length, sortgroup = sortgroups[j] = new Array(n), node, i = 0; i < n; ++i) {
-      if (node = group[i]) {
-        sortgroup[i] = node;
-      }
-    }
-    sortgroup.sort(compareNode);
-  }
+			// Append container to anchor
+			anchor.appendChild(el.container);
 
-  return new Selection$1(sortgroups, this._parents).order();
-}
+			// Retrieve graph height after it was appended to DOM
+			if (el.graph) {
+				graphHeight = el.graph.clientHeight;
+			}
 
-function ascending$2(a, b) {
-  return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
-}
+			// Add event listeners
+			if (o.toggleOn) {
+				if (o.toggleOn === 'click') {
+					el.container.style.cursor = 'pointer';
+				}
+				listener(el.container, o.toggleOn, eventHandler);
+			}
+		}
 
-function selection_call$1() {
-  var callback = arguments[0];
-  arguments[0] = this;
-  callback.apply(null, arguments);
-  return this;
-}
+		/**
+		 * Positions the meter based on options.
+		 *
+		 * @return {Void}
+		 */
+		function positionMeter() {
+			applyTheme(el.container, o);
+		}
 
-function selection_nodes$1() {
-  return Array.from(this);
-}
+		/**
+		 * Construct.
+		 */
+		(function () {
+			// Create meter element
+			createMeter();
+			// Start rendering
+			requestRender();
+		}());
+	}
 
-function selection_node$1() {
+	// Expose the extend function
+	FPSMeter.extend = extend;
 
-  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
-    for (var group = groups[j], i = 0, n = group.length; i < n; ++i) {
-      var node = group[i];
-      if (node) return node;
-    }
-  }
-
-  return null;
-}
-
-function selection_size$1() {
-  let size = 0;
-  for (const node of this) ++size; // eslint-disable-line no-unused-vars
-  return size;
-}
-
-function selection_empty$1() {
-  return !this.node();
-}
-
-function selection_each$1(callback) {
+	// Expose the FPSMeter class
+	window.FPSMeter = FPSMeter;
 
-  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
-    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
-      if (node = group[i]) callback.call(node, node.__data__, i, group);
-    }
-  }
+	// Default options
+	FPSMeter.defaults = {
+		interval:  100,     // Update interval in milliseconds.
+		smoothing: 10,      // Spike smoothing strength. 1 means no smoothing.
+		show:      'fps',   // Whether to show 'fps', or 'ms' = frame duration in milliseconds.
+		toggleOn:  'click', // Toggle between show 'fps' and 'ms' on this event.
+		decimals:  1,       // Number of decimals in FPS number. 1 = 59.9, 2 = 59.94, ...
+		maxFps:    60,      // Max expected FPS value.
+		threshold: 100,     // Minimal tick reporting interval in milliseconds.
 
-  return this;
-}
+		// Meter position
+		position: 'absolute', // Meter position.
+		zIndex:   10,         // Meter Z index.
+		left:     '5px',      // Meter left offset.
+		top:      '5px',      // Meter top offset.
+		right:    'auto',     // Meter right offset.
+		bottom:   'auto',     // Meter bottom offset.
+		margin:   '0 0 0 0',  // Meter margin. Helps with centering the counter when left: 50%;
 
-function attrRemove$1(name) {
-  return function() {
-    this.removeAttribute(name);
-  };
-}
+		// Theme
+		theme: 'dark', // Meter theme. Build in: 'dark', 'light', 'transparent', 'colorful'.
+		heat:  0,      // Allow themes to use coloring by FPS heat. 0 FPS = red, maxFps = green.
 
-function attrRemoveNS$1(fullname) {
-  return function() {
-    this.removeAttributeNS(fullname.space, fullname.local);
-  };
-}
+		// Graph
+		graph:   0, // Whether to show history graph.
+		history: 20 // How many history states to show in a graph.
+	};
 
-function attrConstant$1(name, value) {
-  return function() {
-    this.setAttribute(name, value);
-  };
-}
+	// Option names that trigger FPSMeter rebuild or reposition when modified
+	var rebuilders = [
+		'toggleOn',
+		'theme',
+		'heat',
+		'graph',
+		'history'
+	];
+	var repositioners = [
+		'position',
+		'zIndex',
+		'left',
+		'top',
+		'right',
+		'bottom',
+		'margin'
+	];
+}(window));
+(function (w, FPSMeter, undefined$1) {
 
-function attrConstantNS$1(fullname, value) {
-  return function() {
-    this.setAttributeNS(fullname.space, fullname.local, value);
-  };
-}
+	// Themes object
+	FPSMeter.theme = {};
 
-function attrFunction$1(name, value) {
-  return function() {
-    var v = value.apply(this, arguments);
-    if (v == null) this.removeAttribute(name);
-    else this.setAttribute(name, v);
-  };
-}
+	// Base theme with layout, no colors
+	var base = FPSMeter.theme.base = {
+		heatmaps: [],
+		container: {
+			// Settings
+			heatOn: null,
+			heatmap: null,
 
-function attrFunctionNS$1(fullname, value) {
-  return function() {
-    var v = value.apply(this, arguments);
-    if (v == null) this.removeAttributeNS(fullname.space, fullname.local);
-    else this.setAttributeNS(fullname.space, fullname.local, v);
-  };
-}
+			// Styles
+			padding: '5px',
+			minWidth: '95px',
+			height: '30px',
+			lineHeight: '30px',
+			textAlign: 'right',
+			textShadow: 'none'
+		},
+		count: {
+			// Settings
+			heatOn: null,
+			heatmap: null,
 
-function selection_attr$1(name, value) {
-  var fullname = namespace$1(name);
+			// Styles
+			position: 'absolute',
+			top: 0,
+			right: 0,
+			padding: '5px 10px',
+			height: '30px',
+			fontSize: '24px',
+			fontFamily: 'Consolas, Andale Mono, monospace',
+			zIndex: 2
+		},
+		legend: {
+			// Settings
+			heatOn: null,
+			heatmap: null,
 
-  if (arguments.length < 2) {
-    var node = this.node();
-    return fullname.local
-        ? node.getAttributeNS(fullname.space, fullname.local)
-        : node.getAttribute(fullname);
-  }
+			// Styles
+			position: 'absolute',
+			top: 0,
+			left: 0,
+			padding: '5px 10px',
+			height: '30px',
+			fontSize: '12px',
+			lineHeight: '32px',
+			fontFamily: 'sans-serif',
+			textAlign: 'left',
+			zIndex: 2
+		},
+		graph: {
+			// Settings
+			heatOn: null,
+			heatmap: null,
 
-  return this.each((value == null
-      ? (fullname.local ? attrRemoveNS$1 : attrRemove$1) : (typeof value === "function"
-      ? (fullname.local ? attrFunctionNS$1 : attrFunction$1)
-      : (fullname.local ? attrConstantNS$1 : attrConstant$1)))(fullname, value));
-}
+			// Styles
+			position: 'relative',
+			boxSizing: 'padding-box',
+			MozBoxSizing: 'padding-box',
+			height: '100%',
+			zIndex: 1
+		},
+		column: {
+			// Settings
+			width: 4,
+			spacing: 1,
+			heatOn: null,
+			heatmap: null
+		}
+	};
 
-function defaultView$1(node) {
-  return (node.ownerDocument && node.ownerDocument.defaultView) // node is a Node
-      || (node.document && node) // node is a Window
-      || node.defaultView; // node is a Document
-}
+	// Dark theme
+	FPSMeter.theme.dark = FPSMeter.extend({}, base, {
+		heatmaps: [{
+			saturation: 0.8,
+			lightness: 0.8
+		}],
+		container: {
+			background: '#222',
+			color: '#fff',
+			border: '1px solid #1a1a1a',
+			textShadow: '1px 1px 0 #222'
+		},
+		count: {
+			heatOn: 'color'
+		},
+		column: {
+			background: '#3f3f3f'
+		}
+	});
 
-function styleRemove$1(name) {
-  return function() {
-    this.style.removeProperty(name);
-  };
-}
+	// Light theme
+	FPSMeter.theme.light = FPSMeter.extend({}, base, {
+		heatmaps: [{
+			saturation: 0.5,
+			lightness: 0.5
+		}],
+		container: {
+			color: '#666',
+			background: '#fff',
+			textShadow: '1px 1px 0 rgba(255,255,255,.5), -1px -1px 0 rgba(255,255,255,.5)',
+			boxShadow: '0 0 0 1px rgba(0,0,0,.1)'
+		},
+		count: {
+			heatOn: 'color'
+		},
+		column: {
+			background: '#eaeaea'
+		}
+	});
 
-function styleConstant$1(name, value, priority) {
-  return function() {
-    this.style.setProperty(name, value, priority);
-  };
-}
+	// Colorful theme
+	FPSMeter.theme.colorful = FPSMeter.extend({}, base, {
+		heatmaps: [{
+			saturation: 0.5,
+			lightness: 0.6
+		}],
+		container: {
+			heatOn: 'backgroundColor',
+			background: '#888',
+			color: '#fff',
+			textShadow: '1px 1px 0 rgba(0,0,0,.2)',
+			boxShadow: '0 0 0 1px rgba(0,0,0,.1)'
+		},
+		column: {
+			background: '#777',
+			backgroundColor: 'rgba(0,0,0,.2)'
+		}
+	});
 
-function styleFunction$1(name, value, priority) {
-  return function() {
-    var v = value.apply(this, arguments);
-    if (v == null) this.style.removeProperty(name);
-    else this.style.setProperty(name, v, priority);
-  };
-}
+	// Transparent theme
+	FPSMeter.theme.transparent = FPSMeter.extend({}, base, {
+		heatmaps: [{
+			saturation: 0.8,
+			lightness: 0.5
+		}],
+		container: {
+			padding: 0,
+			color: '#fff',
+			textShadow: '1px 1px 0 rgba(0,0,0,.5)'
+		},
+		count: {
+			padding: '0 5px',
+			height: '40px',
+			lineHeight: '40px'
+		},
+		legend: {
+			padding: '0 5px',
+			height: '40px',
+			lineHeight: '42px'
+		},
+		graph: {
+			height: '40px'
+		},
+		column: {
+			width: 5,
+			background: '#999',
+			heatOn: 'backgroundColor',
+			opacity: 0.5
+		}
+	});
+}(window, FPSMeter));
 
-function selection_style$1(name, value, priority) {
-  return arguments.length > 1
-      ? this.each((value == null
-            ? styleRemove$1 : typeof value === "function"
-            ? styleFunction$1
-            : styleConstant$1)(name, value, priority == null ? "" : priority))
-      : styleValue$1(this.node(), name);
+function precisionFixed$1(step) {
+  return Math.max(0, -exponent$1(Math.abs(step)));
 }
 
-function styleValue$1(node, name) {
-  return node.style.getPropertyValue(name)
-      || defaultView$1(node).getComputedStyle(node, null).getPropertyValue(name);
+function precisionPrefix$1(step, value) {
+  return Math.max(0, Math.max(-8, Math.min(8, Math.floor(exponent$1(value) / 3))) * 3 - exponent$1(Math.abs(step)));
 }
 
-function propertyRemove$1(name) {
-  return function() {
-    delete this[name];
-  };
+function identity$1$1(x) {
+  return x;
 }
 
-function propertyConstant$1(name, value) {
-  return function() {
-    this[name] = value;
-  };
-}
+var top = 1,
+    right = 2,
+    bottom = 3,
+    left = 4,
+    epsilon = 1e-6;
 
-function propertyFunction$1(name, value) {
-  return function() {
-    var v = value.apply(this, arguments);
-    if (v == null) delete this[name];
-    else this[name] = v;
-  };
+function translateX(x) {
+  return "translate(" + x + ",0)";
 }
 
-function selection_property$1(name, value) {
-  return arguments.length > 1
-      ? this.each((value == null
-          ? propertyRemove$1 : typeof value === "function"
-          ? propertyFunction$1
-          : propertyConstant$1)(name, value))
-      : this.node()[name];
+function translateY(y) {
+  return "translate(0," + y + ")";
 }
 
-function classArray$1(string) {
-  return string.trim().split(/^|\s+/);
+function number$2(scale) {
+  return d => +scale(d);
 }
 
-function classList$1(node) {
-  return node.classList || new ClassList$1(node);
+function center(scale, offset) {
+  offset = Math.max(0, scale.bandwidth() - offset * 2) / 2;
+  if (scale.round()) offset = Math.round(offset);
+  return d => +scale(d) + offset;
 }
 
-function ClassList$1(node) {
-  this._node = node;
-  this._names = classArray$1(node.getAttribute("class") || "");
+function entering() {
+  return !this.__axis;
 }
 
-ClassList$1.prototype = {
-  add: function(name) {
-    var i = this._names.indexOf(name);
-    if (i < 0) {
-      this._names.push(name);
-      this._node.setAttribute("class", this._names.join(" "));
-    }
-  },
-  remove: function(name) {
-    var i = this._names.indexOf(name);
-    if (i >= 0) {
-      this._names.splice(i, 1);
-      this._node.setAttribute("class", this._names.join(" "));
-    }
-  },
-  contains: function(name) {
-    return this._names.indexOf(name) >= 0;
-  }
-};
+function axis(orient, scale) {
+  var tickArguments = [],
+      tickValues = null,
+      tickFormat = null,
+      tickSizeInner = 6,
+      tickSizeOuter = 6,
+      tickPadding = 3,
+      offset = typeof window !== "undefined" && window.devicePixelRatio > 1 ? 0 : 0.5,
+      k = orient === top || orient === left ? -1 : 1,
+      x = orient === left || orient === right ? "x" : "y",
+      transform = orient === top || orient === bottom ? translateX : translateY;
 
-function classedAdd$1(node, names) {
-  var list = classList$1(node), i = -1, n = names.length;
-  while (++i < n) list.add(names[i]);
-}
+  function axis(context) {
+    var values = tickValues == null ? (scale.ticks ? scale.ticks.apply(scale, tickArguments) : scale.domain()) : tickValues,
+        format = tickFormat == null ? (scale.tickFormat ? scale.tickFormat.apply(scale, tickArguments) : identity$1$1) : tickFormat,
+        spacing = Math.max(tickSizeInner, 0) + tickPadding,
+        range = scale.range(),
+        range0 = +range[0] + offset,
+        range1 = +range[range.length - 1] + offset,
+        position = (scale.bandwidth ? center : number$2)(scale.copy(), offset),
+        selection = context.selection ? context.selection() : context,
+        path = selection.selectAll(".domain").data([null]),
+        tick = selection.selectAll(".tick").data(values, scale).order(),
+        tickExit = tick.exit(),
+        tickEnter = tick.enter().append("g").attr("class", "tick"),
+        line = tick.select("line"),
+        text = tick.select("text");
 
-function classedRemove$1(node, names) {
-  var list = classList$1(node), i = -1, n = names.length;
-  while (++i < n) list.remove(names[i]);
-}
+    path = path.merge(path.enter().insert("path", ".tick")
+        .attr("class", "domain")
+        .attr("stroke", "currentColor"));
 
-function classedTrue$1(names) {
-  return function() {
-    classedAdd$1(this, names);
-  };
-}
+    tick = tick.merge(tickEnter);
 
-function classedFalse$1(names) {
-  return function() {
-    classedRemove$1(this, names);
-  };
-}
+    line = line.merge(tickEnter.append("line")
+        .attr("stroke", "currentColor")
+        .attr(x + "2", k * tickSizeInner));
 
-function classedFunction$1(names, value) {
-  return function() {
-    (value.apply(this, arguments) ? classedAdd$1 : classedRemove$1)(this, names);
-  };
-}
+    text = text.merge(tickEnter.append("text")
+        .attr("fill", "currentColor")
+        .attr(x, k * spacing)
+        .attr("dy", orient === top ? "0em" : orient === bottom ? "0.71em" : "0.32em"));
 
-function selection_classed$1(name, value) {
-  var names = classArray$1(name + "");
+    if (context !== selection) {
+      path = path.transition(context);
+      tick = tick.transition(context);
+      line = line.transition(context);
+      text = text.transition(context);
 
-  if (arguments.length < 2) {
-    var list = classList$1(this.node()), i = -1, n = names.length;
-    while (++i < n) if (!list.contains(names[i])) return false;
-    return true;
-  }
+      tickExit = tickExit.transition(context)
+          .attr("opacity", epsilon)
+          .attr("transform", function(d) { return isFinite(d = position(d)) ? transform(d + offset) : this.getAttribute("transform"); });
 
-  return this.each((typeof value === "function"
-      ? classedFunction$1 : value
-      ? classedTrue$1
-      : classedFalse$1)(names, value));
-}
+      tickEnter
+          .attr("opacity", epsilon)
+          .attr("transform", function(d) { var p = this.parentNode.__axis; return transform((p && isFinite(p = p(d)) ? p : position(d)) + offset); });
+    }
 
-function textRemove$1() {
-  this.textContent = "";
-}
+    tickExit.remove();
 
-function textConstant$1(value) {
-  return function() {
-    this.textContent = value;
-  };
-}
+    path
+        .attr("d", orient === left || orient === right
+            ? (tickSizeOuter ? "M" + k * tickSizeOuter + "," + range0 + "H" + offset + "V" + range1 + "H" + k * tickSizeOuter : "M" + offset + "," + range0 + "V" + range1)
+            : (tickSizeOuter ? "M" + range0 + "," + k * tickSizeOuter + "V" + offset + "H" + range1 + "V" + k * tickSizeOuter : "M" + range0 + "," + offset + "H" + range1));
 
-function textFunction$1(value) {
-  return function() {
-    var v = value.apply(this, arguments);
-    this.textContent = v == null ? "" : v;
-  };
-}
+    tick
+        .attr("opacity", 1)
+        .attr("transform", function(d) { return transform(position(d) + offset); });
 
-function selection_text$1(value) {
-  return arguments.length
-      ? this.each(value == null
-          ? textRemove$1 : (typeof value === "function"
-          ? textFunction$1
-          : textConstant$1)(value))
-      : this.node().textContent;
-}
+    line
+        .attr(x + "2", k * tickSizeInner);
 
-function htmlRemove$1() {
-  this.innerHTML = "";
-}
+    text
+        .attr(x, k * spacing)
+        .text(format);
 
-function htmlConstant$1(value) {
-  return function() {
-    this.innerHTML = value;
+    selection.filter(entering)
+        .attr("fill", "none")
+        .attr("font-size", 10)
+        .attr("font-family", "sans-serif")
+        .attr("text-anchor", orient === right ? "start" : orient === left ? "end" : "middle");
+
+    selection
+        .each(function() { this.__axis = position; });
+  }
+
+  axis.scale = function(_) {
+    return arguments.length ? (scale = _, axis) : scale;
   };
-}
 
-function htmlFunction$1(value) {
-  return function() {
-    var v = value.apply(this, arguments);
-    this.innerHTML = v == null ? "" : v;
+  axis.ticks = function() {
+    return tickArguments = Array.from(arguments), axis;
   };
-}
-
-function selection_html$1(value) {
-  return arguments.length
-      ? this.each(value == null
-          ? htmlRemove$1 : (typeof value === "function"
-          ? htmlFunction$1
-          : htmlConstant$1)(value))
-      : this.node().innerHTML;
-}
 
-function raise$1() {
-  if (this.nextSibling) this.parentNode.appendChild(this);
-}
+  axis.tickArguments = function(_) {
+    return arguments.length ? (tickArguments = _ == null ? [] : Array.from(_), axis) : tickArguments.slice();
+  };
 
-function selection_raise$1() {
-  return this.each(raise$1);
-}
+  axis.tickValues = function(_) {
+    return arguments.length ? (tickValues = _ == null ? null : Array.from(_), axis) : tickValues && tickValues.slice();
+  };
 
-function lower$1() {
-  if (this.previousSibling) this.parentNode.insertBefore(this, this.parentNode.firstChild);
-}
+  axis.tickFormat = function(_) {
+    return arguments.length ? (tickFormat = _, axis) : tickFormat;
+  };
 
-function selection_lower$1() {
-  return this.each(lower$1);
-}
+  axis.tickSize = function(_) {
+    return arguments.length ? (tickSizeInner = tickSizeOuter = +_, axis) : tickSizeInner;
+  };
 
-function selection_append$1(name) {
-  var create = typeof name === "function" ? name : creator$1(name);
-  return this.select(function() {
-    return this.appendChild(create.apply(this, arguments));
-  });
-}
+  axis.tickSizeInner = function(_) {
+    return arguments.length ? (tickSizeInner = +_, axis) : tickSizeInner;
+  };
 
-function constantNull$1() {
-  return null;
-}
+  axis.tickSizeOuter = function(_) {
+    return arguments.length ? (tickSizeOuter = +_, axis) : tickSizeOuter;
+  };
 
-function selection_insert$1(name, before) {
-  var create = typeof name === "function" ? name : creator$1(name),
-      select = before == null ? constantNull$1 : typeof before === "function" ? before : selector$1(before);
-  return this.select(function() {
-    return this.insertBefore(create.apply(this, arguments), select.apply(this, arguments) || null);
-  });
-}
+  axis.tickPadding = function(_) {
+    return arguments.length ? (tickPadding = +_, axis) : tickPadding;
+  };
 
-function remove$1() {
-  var parent = this.parentNode;
-  if (parent) parent.removeChild(this);
-}
+  axis.offset = function(_) {
+    return arguments.length ? (offset = +_, axis) : offset;
+  };
 
-function selection_remove$1() {
-  return this.each(remove$1);
+  return axis;
 }
 
-function selection_cloneShallow$1() {
-  var clone = this.cloneNode(false), parent = this.parentNode;
-  return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
+function axisTop(scale) {
+  return axis(top, scale);
 }
 
-function selection_cloneDeep$1() {
-  var clone = this.cloneNode(true), parent = this.parentNode;
-  return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
+function axisRight(scale) {
+  return axis(right, scale);
 }
 
-function selection_clone$1(deep) {
-  return this.select(deep ? selection_cloneDeep$1 : selection_cloneShallow$1);
+function axisBottom(scale) {
+  return axis(bottom, scale);
 }
 
-function selection_datum$1(value) {
-  return arguments.length
-      ? this.property("__data__", value)
-      : this.node().__data__;
+function axisLeft(scale) {
+  return axis(left, scale);
 }
 
-function contextListener$1(listener) {
-  return function(event) {
-    listener.call(this, event, this.__data__);
-  };
+function ascending$1$1(a, b) {
+  return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
 }
 
-function parseTypenames$1(typenames) {
-  return typenames.trim().split(/^|\s+/).map(function(t) {
-    var name = "", i = t.indexOf(".");
-    if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
-    return {type: t, name: name};
-  });
-}
+function bisector$1(f) {
+  let delta = f;
+  let compare1 = f;
+  let compare2 = f;
 
-function onRemove$1(typename) {
-  return function() {
-    var on = this.__on;
-    if (!on) return;
-    for (var j = 0, i = -1, m = on.length, o; j < m; ++j) {
-      if (o = on[j], (!typename.type || o.type === typename.type) && o.name === typename.name) {
-        this.removeEventListener(o.type, o.listener, o.options);
-      } else {
-        on[++i] = o;
-      }
-    }
-    if (++i) on.length = i;
-    else delete this.__on;
-  };
-}
+  if (f.length !== 2) {
+    delta = (d, x) => f(d) - x;
+    compare1 = ascending$1$1;
+    compare2 = (d, x) => ascending$1$1(f(d), x);
+  }
 
-function onAdd$1(typename, value, options) {
-  return function() {
-    var on = this.__on, o, listener = contextListener$1(value);
-    if (on) for (var j = 0, m = on.length; j < m; ++j) {
-      if ((o = on[j]).type === typename.type && o.name === typename.name) {
-        this.removeEventListener(o.type, o.listener, o.options);
-        this.addEventListener(o.type, o.listener = listener, o.options = options);
-        o.value = value;
-        return;
-      }
+  function left(a, x, lo = 0, hi = a.length) {
+    if (lo < hi) {
+      if (compare1(x, x) !== 0) return hi;
+      do {
+        const mid = (lo + hi) >>> 1;
+        if (compare2(a[mid], x) < 0) lo = mid + 1;
+        else hi = mid;
+      } while (lo < hi);
     }
-    this.addEventListener(typename.type, listener, options);
-    o = {type: typename.type, name: typename.name, value: value, listener: listener, options: options};
-    if (!on) this.__on = [o];
-    else on.push(o);
-  };
-}
-
-function selection_on$1(typename, value, options) {
-  var typenames = parseTypenames$1(typename + ""), i, n = typenames.length, t;
+    return lo;
+  }
 
-  if (arguments.length < 2) {
-    var on = this.node().__on;
-    if (on) for (var j = 0, m = on.length, o; j < m; ++j) {
-      for (i = 0, o = on[j]; i < n; ++i) {
-        if ((t = typenames[i]).type === o.type && t.name === o.name) {
-          return o.value;
-        }
-      }
+  function right(a, x, lo = 0, hi = a.length) {
+    if (lo < hi) {
+      if (compare1(x, x) !== 0) return hi;
+      do {
+        const mid = (lo + hi) >>> 1;
+        if (compare2(a[mid], x) <= 0) lo = mid + 1;
+        else hi = mid;
+      } while (lo < hi);
     }
-    return;
+    return lo;
   }
 
-  on = value ? onAdd$1 : onRemove$1;
-  for (i = 0; i < n; ++i) this.each(on(typenames[i], value, options));
-  return this;
-}
-
-function dispatchEvent$1(node, type, params) {
-  var window = defaultView$1(node),
-      event = window.CustomEvent;
-
-  if (typeof event === "function") {
-    event = new event(type, params);
-  } else {
-    event = window.document.createEvent("Event");
-    if (params) event.initEvent(type, params.bubbles, params.cancelable), event.detail = params.detail;
-    else event.initEvent(type, false, false);
+  function center(a, x, lo = 0, hi = a.length) {
+    const i = left(a, x, lo, hi - 1);
+    return i > lo && delta(a[i - 1], x) > -delta(a[i], x) ? i - 1 : i;
   }
 
-  node.dispatchEvent(event);
+  return {left, center, right};
 }
 
-function dispatchConstant$1(type, params) {
-  return function() {
-    return dispatchEvent$1(this, type, params);
-  };
+function number$1$1(x) {
+  return x === null ? NaN : +x;
 }
 
-function dispatchFunction$1(type, params) {
-  return function() {
-    return dispatchEvent$1(this, type, params.apply(this, arguments));
-  };
-}
+const ascendingBisect$1 = bisector$1(ascending$1$1);
+const bisectRight$1 = ascendingBisect$1.right;
+bisector$1(number$1$1).center;
+var bisect = bisectRight$1;
 
-function selection_dispatch$1(type, params) {
-  return this.each((typeof params === "function"
-      ? dispatchFunction$1
-      : dispatchConstant$1)(type, params));
-}
+var e10$1 = Math.sqrt(50),
+    e5$1 = Math.sqrt(10),
+    e2$1 = Math.sqrt(2);
 
-function* selection_iterator$1() {
-  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
-    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
-      if (node = group[i]) yield node;
-    }
+function ticks$1(start, stop, count) {
+  var reverse,
+      i = -1,
+      n,
+      ticks,
+      step;
+
+  stop = +stop, start = +start, count = +count;
+  if (start === stop && count > 0) return [start];
+  if (reverse = stop < start) n = start, start = stop, stop = n;
+  if ((step = tickIncrement$1(start, stop, count)) === 0 || !isFinite(step)) return [];
+
+  if (step > 0) {
+    let r0 = Math.round(start / step), r1 = Math.round(stop / step);
+    if (r0 * step < start) ++r0;
+    if (r1 * step > stop) --r1;
+    ticks = new Array(n = r1 - r0 + 1);
+    while (++i < n) ticks[i] = (r0 + i) * step;
+  } else {
+    step = -step;
+    let r0 = Math.round(start * step), r1 = Math.round(stop * step);
+    if (r0 / step < start) ++r0;
+    if (r1 / step > stop) --r1;
+    ticks = new Array(n = r1 - r0 + 1);
+    while (++i < n) ticks[i] = (r0 + i) / step;
   }
-}
 
-var root$1 = [null];
+  if (reverse) ticks.reverse();
 
-function Selection$1(groups, parents) {
-  this._groups = groups;
-  this._parents = parents;
+  return ticks;
 }
 
-function selection_selection$1() {
+function tickIncrement$1(start, stop, count) {
+  var step = (stop - start) / Math.max(0, count),
+      power = Math.floor(Math.log(step) / Math.LN10),
+      error = step / Math.pow(10, power);
+  return power >= 0
+      ? (error >= e10$1 ? 10 : error >= e5$1 ? 5 : error >= e2$1 ? 2 : 1) * Math.pow(10, power)
+      : -Math.pow(10, -power) / (error >= e10$1 ? 10 : error >= e5$1 ? 5 : error >= e2$1 ? 2 : 1);
+}
+
+function tickStep$1(start, stop, count) {
+  var step0 = Math.abs(stop - start) / Math.max(0, count),
+      step1 = Math.pow(10, Math.floor(Math.log(step0) / Math.LN10)),
+      error = step0 / step1;
+  if (error >= e10$1) step1 *= 10;
+  else if (error >= e5$1) step1 *= 5;
+  else if (error >= e2$1) step1 *= 2;
+  return stop < start ? -step1 : step1;
+}
+
+function initRange$1(domain, range) {
+  switch (arguments.length) {
+    case 0: break;
+    case 1: this.range(domain); break;
+    default: this.range(range).domain(domain); break;
+  }
   return this;
 }
 
-Selection$1.prototype = {
-  constructor: Selection$1,
-  select: selection_select$1,
-  selectAll: selection_selectAll$1,
-  selectChild: selection_selectChild$1,
-  selectChildren: selection_selectChildren$1,
-  filter: selection_filter$1,
-  data: selection_data$1,
-  enter: selection_enter$1,
-  exit: selection_exit$1,
-  join: selection_join$1,
-  merge: selection_merge$1,
-  selection: selection_selection$1,
-  order: selection_order$1,
-  sort: selection_sort$1,
-  call: selection_call$1,
-  nodes: selection_nodes$1,
-  node: selection_node$1,
-  size: selection_size$1,
-  empty: selection_empty$1,
-  each: selection_each$1,
-  attr: selection_attr$1,
-  style: selection_style$1,
-  property: selection_property$1,
-  classed: selection_classed$1,
-  text: selection_text$1,
-  html: selection_html$1,
-  raise: selection_raise$1,
-  lower: selection_lower$1,
-  append: selection_append$1,
-  insert: selection_insert$1,
-  remove: selection_remove$1,
-  clone: selection_clone$1,
-  datum: selection_datum$1,
-  on: selection_on$1,
-  dispatch: selection_dispatch$1,
-  [Symbol.iterator]: selection_iterator$1
-};
+function numberArray$1(a, b) {
+  if (!b) b = [];
+  var n = a ? Math.min(b.length, a.length) : 0,
+      c = b.slice(),
+      i;
+  return function(t) {
+    for (i = 0; i < n; ++i) c[i] = a[i] * (1 - t) + b[i] * t;
+    return c;
+  };
+}
 
-function select$1(selector) {
-  return typeof selector === "string"
-      ? new Selection$1([[document.querySelector(selector)]], [document.documentElement])
-      : new Selection$1([[selector]], root$1);
+function isNumberArray$1(x) {
+  return ArrayBuffer.isView(x) && !(x instanceof DataView);
 }
 
-class SVGInteractor {
-  /**
-   * A class used to illustrate state of the visualization on the main thread such as
-   * selection or axis.
-   *
-   * @param {SVGElement} svg container for all svg elements
-   */
-  constructor(
-    svg,
-    labelClickHandler,
-    labelMouseOverHandler,
-    labelMouseOutHandler
-  ) {
-    this.labelClickHandler = labelClickHandler;
-    this.labelMouseOverHandler = labelMouseOverHandler;
-    this.labelMouseOutHandler = labelMouseOutHandler;
-    this.svg = svg;
-    this.d3SVG = select$1(this.svg);
-    this.svg.style.width = "100%";
-    this.svg.style.height = "100%";
-    this.svg.style.position = "absolute";
-    this.svg.style.pointerEvents = "none";
-    this.svg.style.overflow = "visible";
+function genericArray$1(a, b) {
+  var nb = b ? b.length : 0,
+      na = a ? Math.min(nb, a.length) : 0,
+      x = new Array(na),
+      c = new Array(nb),
+      i;
 
-    this._selectMarker = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "polygon"
-    );
-    this._selectMarker.setAttribute("fill", "rgba(124, 124, 247, 0.3)");
-    this._selectMarker.setAttribute("stroke", "rgb(136, 128, 247)");
-    this._selectMarker.setAttribute("stroke-width", 1);
-    this._selectMarker.setAttribute("stroke-dasharray", "5,5");
+  for (i = 0; i < na; ++i) x[i] = interpolate$1(a[i], b[i]);
+  for (; i < nb; ++i) c[i] = b[i];
 
-    this._labelMarker = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "g"
-    );
-  }
+  return function(t) {
+    for (i = 0; i < na; ++i) c[i] = x[i](t);
+    return c;
+  };
+}
 
-  /**
-   * Set the specification for this class to refer to.
-   *
-   * @param {Object} specification
-   */
-  setSpecification(specification) {
-    this.specification = specification;
+function date$1(a, b) {
+  var d = new Date;
+  return a = +a, b = +b, function(t) {
+    return d.setTime(a * (1 - t) + b * t), d;
+  };
+}
 
-    const styles = getDimAndMarginStyleForSpecification(specification);
-    this.svg.style.width = styles.width;
-    this.svg.style.height = styles.height;
-    this.svg.style.margin = styles.margin;
-    this.svg.style.cursor = "default"; // or "none"
+function interpolateNumber$1(a, b) {
+  return a = +a, b = +b, function(t) {
+    return a * (1 - t) + b * t;
+  };
+}
 
-    this.initialX = undefined; // used for updating labels
-    this.initialY = undefined;
-    select$1(this._labelMarker).selectAll("*").remove();
-    for (const _ of this.specification.labels || []) {
-      select$1(this._labelMarker).append("text");
+function object$1(a, b) {
+  var i = {},
+      c = {},
+      k;
+
+  if (a === null || typeof a !== "object") a = {};
+  if (b === null || typeof b !== "object") b = {};
+
+  for (k in b) {
+    if (k in a) {
+      i[k] = interpolate$1(a[k], b[k]);
+    } else {
+      c[k] = b[k];
     }
   }
 
-  /**
-   * Add svg elements to the DOM
-   */
-  init() {
-    this.svg.appendChild(this._selectMarker);
-    this.svg.appendChild(this._labelMarker);
-    this.xAxisAnchor = this.d3SVG.append("g");
-    this.yAxisAnchor = this.d3SVG.append("g");
-  }
+  return function(t) {
+    for (k in i) c[k] = i[k](t);
+    return c;
+  };
+}
 
-  /**
-   * Update the svg using the new viewport information
-   * @param {Array} currentXRange of mousereader
-   * @param {Array} currentYRange of mousereader
-   * @param {Number} width of mousereader
-   * @param {Number} height of mousereader
-   */
-  updateView(currentXRange, currentYRange, width, height) {
-    this.currentXRange = currentXRange;
-    this.currentYRange = currentYRange;
-    this.width = width;
-    this.height = height;
+var reA$1 = /[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g,
+    reB$1 = new RegExp(reA$1.source, "g");
 
-    if (this.currentXRange) {
-      this.xAxis = this._calculateAxis(
-        "x",
-        this.specification.xAxis,
-        this.specification,
-        getScaleForSpecification("x", this.specification),
-        this.xAxisAnchor
-      );
+function zero$2(b) {
+  return function() {
+    return b;
+  };
+}
 
-      if (this.specification.labels) {
-        this.updateLabels();
-      }
-    }
+function one$1(b) {
+  return function(t) {
+    return b(t) + "";
+  };
+}
 
-    if (this.xAxis) {
-      this.xAxisAnchor.call(this.xAxis);
-    }
+function string$1(a, b) {
+  var bi = reA$1.lastIndex = reB$1.lastIndex = 0, // scan index for next number in b
+      am, // current match in a
+      bm, // current match in b
+      bs, // string preceding current number in b, if any
+      i = -1, // index in s
+      s = [], // string constants and placeholders
+      q = []; // number interpolators
 
-    if (this.currentYRange) {
-      this.yAxis = this._calculateAxis(
-        "y",
-        this.specification.yAxis,
-        this.specification,
-        getScaleForSpecification("y", this.specification),
-        this.yAxisAnchor
-      );
-    }
+  // Coerce inputs to strings.
+  a = a + "", b = b + "";
 
-    if (this.yAxis) {
-      this.yAxisAnchor.call(this.yAxis);
+  // Interpolate pairs of numbers in a & b.
+  while ((am = reA$1.exec(a))
+      && (bm = reB$1.exec(b))) {
+    if ((bs = bm.index) > bi) { // a string precedes the next number in b
+      bs = b.slice(bi, bs);
+      if (s[i]) s[i] += bs; // coalesce with previous string
+      else s[++i] = bs;
     }
-  }
-
-  updateLabels() {
-    if (!this.initialX && this.specification.labels) {
-      this.initialX = this.specification.labels.map(
-        (label) => this._calculateViewportSpotInverse(label.x, label.y)[0]
-      );
-    }
-    if (!this.initialY && this.specification.labels) {
-      this.initialY = this.specification.labels.map(
-        (label) => this._calculateViewportSpotInverse(label.x, label.y)[1]
-      );
+    if ((am = am[0]) === (bm = bm[0])) { // numbers in a & b match
+      if (s[i]) s[i] += bm; // coalesce with previous string
+      else s[++i] = bm;
+    } else { // interpolate non-matching numbers
+      s[++i] = null;
+      q.push({i: i, x: interpolateNumber$1(am, bm)});
     }
+    bi = reB$1.lastIndex;
+  }
 
-    const svgNode = this.d3SVG.node();
-    const svgRect = svgNode.getBoundingClientRect();
-    const svgWidth = svgRect.width;
-    const svgHeight = svgRect.height;
-
-    const labels = select$1(this._labelMarker)
-      .selectAll("text")
-      .data(this.specification.labels);
-    labels
-      .enter()
-      .append("text")
-      .merge(labels) // Updates both existing and new nodes
-      .text((d) => d.text)
-      .attr("style", "pointer-events: bounding-box") // Add this line to make the labels respond to pointer events
-      .style("user-select", "none") // add this line
-      .on("click", (event, d) => {
-        const clickedIndex = select$1(this._labelMarker)
-          .selectAll("text")
-          .nodes()
-          .indexOf(event.currentTarget);
+  // Add remains of b.
+  if (bi < b.length) {
+    bs = b.slice(bi);
+    if (s[i]) s[i] += bs; // coalesce with previous string
+    else s[++i] = bs;
+  }
 
-        this.labelClickHandler({
-          label: d.text,
-          index: clickedIndex,
-          labelObject: d,
-          event,
+  // Special optimization for only a single match.
+  // Otherwise, interpolate each of the numbers and rejoin the string.
+  return s.length < 2 ? (q[0]
+      ? one$1(q[0].x)
+      : zero$2(b))
+      : (b = q.length, function(t) {
+          for (var i = 0, o; i < b; ++i) s[(o = q[i]).i] = o.x(t);
+          return s.join("");
         });
-      })
-      .on("mouseover", (event, d) => {
-        const hoveredIndex = select$1(this._labelMarker)
-          .selectAll("text")
-          .nodes()
-          .indexOf(event.currentTarget);
+}
 
-        this.labelMouseOverHandler({
-          label: d.text,
-          index: hoveredIndex,
-          labelObject: d,
-          groupNode: this._labelMarker,
-          event,
-        });
-      })
-      .on("mouseout", (event, d) => {
-        const hoveredIndex = select$1(this._labelMarker)
-          .selectAll("text")
-          .nodes()
-          .indexOf(event.currentTarget);
+function interpolate$1(a, b) {
+  var t = typeof b, c;
+  return b == null || t === "boolean" ? constant$3(b)
+      : (t === "number" ? interpolateNumber$1
+      : t === "string" ? ((c = color$1(b)) ? (b = c, rgb$2) : string$1)
+      : b instanceof color$1 ? rgb$2
+      : b instanceof Date ? date$1
+      : isNumberArray$1(b) ? numberArray$1
+      : Array.isArray(b) ? genericArray$1
+      : typeof b.valueOf !== "function" && typeof b.toString !== "function" || isNaN(b) ? object$1
+      : interpolateNumber$1)(a, b);
+}
 
-        this.labelMouseOutHandler({
-          label: d.text,
-          index: hoveredIndex,
-          labelObject: d,
-          groupNode: this._labelMarker,
-          event,
-        });
-      })
-      .attr("x", (d, i, nodes) => {
-        if (d.fixedX) {
-          return this.initialX[i];
-        }
+function interpolateRound$1(a, b) {
+  return a = +a, b = +b, function(t) {
+    return Math.round(a * (1 - t) + b * t);
+  };
+}
 
-        const xPos = this._calculateViewportSpotInverse(d.x, d.y)[0];
+function constants$1(x) {
+  return function() {
+    return x;
+  };
+}
 
-        if (xPos < 0 || xPos > svgWidth) {
-          select$1(nodes[i]).remove();
-        } else {
-          return xPos;
-        }
-      })
-      .attr("y", (d, i, nodes) => {
-        if (d.fixedY) {
-          return this.initialY[i];
-        }
+function number$3(x) {
+  return +x;
+}
 
-        const yPos = this._calculateViewportSpotInverse(d.x, d.y)[1];
+var unit$1 = [0, 1];
 
-        if (yPos < 0 || yPos > svgHeight) {
-          select$1(nodes[i]).remove();
-        } else {
-          return yPos;
-        }
-      })
-      .each((d, i, nodes) => {
-        const xPos = d.fixedX
-          ? this.initialX[i]
-          : this._calculateViewportSpotInverse(d.x, d.y)[0];
-        const yPos = d.fixedY
-          ? this.initialY[i]
-          : this._calculateViewportSpotInverse(d.x, d.y)[1];
+function identity$2(x) {
+  return x;
+}
 
-        // Check if the 'transformRotate' property exists
-        if (d.transformRotate) {
-          select$1(nodes[i]).attr(
-            "transform",
-            `rotate(${d.transformRotate}, ${xPos}, ${yPos})`
-          );
-        }
-      })
-      .each(function (d) {
-        // Set any possible svg properties specified in label
-        for (const property in d) {
-          if (
-            ["x", "y", "text", "transformRotate", "type", "index"].includes(
-              property
-            )
-          ) {
-            continue;
-          }
-          select$1(this).attr(property, d[property]);
-        }
-      });
+function normalize$1(a, b) {
+  return (b -= (a = +a))
+      ? function(x) { return (x - a) / b; }
+      : constants$1(isNaN(b) ? NaN : 0.5);
+}
 
-    // Remove any old labels
-    labels.exit().remove();
-  }
+function clamper$1(a, b) {
+  var t;
+  if (a > b) t = a, a = b, b = t;
+  return function(x) { return Math.max(a, Math.min(b, x)); };
+}
 
-  _calculateAxis(dimension, orientation, specification, genomeScale, anchor) {
-    let axis, domain, range;
-    if (dimension === "x") {
-      domain = this.currentXRange;
-      range = [0, this.width];
-      switch (orientation) {
-        case "none":
-          anchor.attr("transform", `translate(-1000000, -1000000)`);
-          return null;
-        case "top":
-          axis = axisTop();
-          anchor.attr("transform", `translate(0, 0)`);
-          break;
-        case "center":
-          axis = axisBottom();
-          anchor.attr("transform", `translate(0, ${this.height / 2})`);
-          break;
-        case "zero":
-          const yScale = linear()
-            .domain(this.currentYRange)
-            .range([this.height, 0]);
+// normalize(a, b)(x) takes a domain value x in [a,b] and returns the corresponding parameter t in [0,1].
+// interpolate(a, b)(t) takes a parameter t in [0,1] and returns the corresponding range value x in [a,b].
+function bimap$1(domain, range, interpolate) {
+  var d0 = domain[0], d1 = domain[1], r0 = range[0], r1 = range[1];
+  if (d1 < d0) d0 = normalize$1(d1, d0), r0 = interpolate(r1, r0);
+  else d0 = normalize$1(d0, d1), r0 = interpolate(r0, r1);
+  return function(x) { return r0(d0(x)); };
+}
 
-          axis = axisBottom();
-          anchor.attr("transform", `translate(0, ${yScale(0)})`);
-          break;
-        case "bottom":
-        default:
-          axis = axisBottom();
-          anchor.attr("transform", `translate(0, ${this.height})`);
-          break;
-      }
-    }
+function polymap$1(domain, range, interpolate) {
+  var j = Math.min(domain.length, range.length) - 1,
+      d = new Array(j),
+      r = new Array(j),
+      i = -1;
 
-    if (dimension === "y") {
-      domain = this.currentYRange;
-      range = [this.height, 0];
-      switch (orientation) {
-        case "none":
-          anchor.attr("transform", `translate(-1000000, -1000000)`);
-          return null;
-        case "center":
-          axis = axisRight();
-          anchor.attr("transform", `translate(${this.width / 2}, 0)`);
-          break;
-        case "right":
-          axis = axisRight();
-          anchor.attr("transform", `translate(${this.width}, 0)`);
-          break;
-        case "zero":
-          const xScale = linear()
-            .domain(this.currentXRange)
-            .range([0, this.width]);
+  // Reverse descending domains.
+  if (domain[j] < domain[0]) {
+    domain = domain.slice().reverse();
+    range = range.slice().reverse();
+  }
 
-          axis = axisLeft();
-          anchor.attr("transform", `translate(${xScale(0)}, 0)`);
-          break;
-        case "left": // left is default behavior
-        default:
-          axis = axisLeft();
-          anchor.attr("transform", `translate(0, 0)`);
-          break;
-      }
-    }
+  while (++i < j) {
+    d[i] = normalize$1(domain[i], domain[i + 1]);
+    r[i] = interpolate(range[i], range[i + 1]);
+  }
 
-    let genomic = false;
-    for (const track of specification.tracks) {
-      if (track[dimension].type && track[dimension].type.includes("genomic")) {
-        genomic = true;
-      }
-    }
+  return function(x) {
+    var i = bisect(domain, x, 1, j) - 1;
+    return r[i](d[i](x));
+  };
+}
 
-    if (!genomic) {
-      return axis.scale(linear().domain(domain).range(range));
-    }
+function copy$1(source, target) {
+  return target
+      .domain(source.domain())
+      .range(source.range())
+      .interpolate(source.interpolate())
+      .clamp(source.clamp())
+      .unknown(source.unknown());
+}
 
-    let tickInfo;
-    if (dimension === "x") {
-      tickInfo = genomeScale.getTickCoordsAndLabels(domain[0], domain[1]);
-    } else {
-      tickInfo = genomeScale.getTickCoordsAndLabels(range[0], range[1]);
-    }
+function transformer$1() {
+  var domain = unit$1,
+      range = unit$1,
+      interpolate$1$1 = interpolate$1,
+      transform,
+      untransform,
+      unknown,
+      clamp = identity$2,
+      piecewise,
+      output,
+      input;
 
-    return axis
-      .scale(linear().domain(domain).range(range))
-      .tickValues(tickInfo.tickCoords)
-      .tickFormat((_, index) => tickInfo.tickLabels[index]);
+  function rescale() {
+    var n = Math.min(domain.length, range.length);
+    if (clamp !== identity$2) clamp = clamper$1(domain[0], domain[n - 1]);
+    piecewise = n > 2 ? polymap$1 : bimap$1;
+    output = input = null;
+    return scale;
   }
 
-  /**
-   * Updates user selection view if they have selected a box
-   */
-  _updateBoxSelectView(points) {
-    if (points.length !== 4) {
-      return;
-    }
+  function scale(x) {
+    return x == null || isNaN(x = +x) ? unknown : (output || (output = piecewise(domain.map(transform), range, interpolate$1$1)))(transform(clamp(x)));
+  }
 
-    const topLeftCorner = this._calculateViewportSpotInverse(
-      points[0],
-      points[1]
-    );
+  scale.invert = function(y) {
+    return clamp(untransform((input || (input = piecewise(range, domain.map(transform), interpolateNumber$1)))(y)));
+  };
 
-    const bottomRightCorner = this._calculateViewportSpotInverse(
-      points[2],
-      points[3]
-    );
+  scale.domain = function(_) {
+    return arguments.length ? (domain = Array.from(_, number$3), rescale()) : domain.slice();
+  };
 
-    let pointAttr = `${topLeftCorner[0]},${topLeftCorner[1]} 
-                     ${topLeftCorner[0]},${bottomRightCorner[1]}, 
-                     ${bottomRightCorner[0]},${bottomRightCorner[1]}
-                     ${bottomRightCorner[0]},${topLeftCorner[1]}
-                     `;
+  scale.range = function(_) {
+    return arguments.length ? (range = Array.from(_), rescale()) : range.slice();
+  };
 
-    this._selectMarker.setAttribute("points", pointAttr);
-  }
+  scale.rangeRound = function(_) {
+    return range = Array.from(_), interpolate$1$1 = interpolateRound$1, rescale();
+  };
 
-  /**
-   * Update the selection box/lasso with the points as bounds
-   *
-   * @param {Array} points 1D array of coordinates that are used for selection ex. [x1,y1,x2,y2,...]
-   */
-  updateSelectView(points) {
-    if (points.length === 4) {
-      this._updateBoxSelectView(points);
-      return;
-    }
-    if (points.length < 6) {
-      this._selectMarker.setAttribute("points", "");
-      return;
-    }
+  scale.clamp = function(_) {
+    return arguments.length ? (clamp = _ ? true : identity$2, rescale()) : clamp !== identity$2;
+  };
 
-    let pointAttr = "";
-    for (let i = 0; i < points.length; i += 2) {
-      const asCanvasPoint = this._calculateViewportSpotInverse(
-        points[i],
-        points[i + 1]
-      );
-      pointAttr += `${asCanvasPoint[0]}, ${asCanvasPoint[1]} `;
-    }
+  scale.interpolate = function(_) {
+    return arguments.length ? (interpolate$1$1 = _, rescale()) : interpolate$1$1;
+  };
 
-    this._selectMarker.setAttribute("points", pointAttr);
-  }
+  scale.unknown = function(_) {
+    return arguments.length ? (unknown = _, scale) : unknown;
+  };
 
-  /**
-   * Calculate the location on the canvas a real coordniate corresponds to.
-   *
-   * @param {Float} viewportX x coordinate of data space
-   * @param {Float} viewportY y coordniate of data space
-   * @returns canvas coordindate as array
-   */
-  _calculateViewportSpotInverse(viewportX, viewportY) {
-    const inverseScaleX = scale(this.currentXRange, [0, this.width]);
-    // Flipped for Y since canvas using typical graphics coordinates but GPU clipspace is typical cartesian coordinates
-    const inverseScaleY = scale(this.currentYRange, [this.height, 0]);
+  return function(t, u) {
+    transform = t, untransform = u;
+    return rescale();
+  };
+}
 
-    return [inverseScaleX(viewportX), inverseScaleY(viewportY)];
-  }
+function continuous$1() {
+  return transformer$1()(identity$2, identity$2);
+}
 
-  /**
-   * Clears the polygon selection on the visualization
-   */
-  clear() {
-    this._selectMarker.setAttribute("points", "");
+function tickFormat$1(start, stop, count, specifier) {
+  var step = tickStep$1(start, stop, count),
+      precision;
+  specifier = formatSpecifier$1(specifier == null ? ",f" : specifier);
+  switch (specifier.type) {
+    case "s": {
+      var value = Math.max(Math.abs(start), Math.abs(stop));
+      if (specifier.precision == null && !isNaN(precision = precisionPrefix$1(step, value))) specifier.precision = precision;
+      return formatPrefix$1(specifier, value);
+    }
+    case "":
+    case "e":
+    case "g":
+    case "p":
+    case "r": {
+      if (specifier.precision == null && !isNaN(precision = precisionRound$1(step, Math.max(Math.abs(start), Math.abs(stop))))) specifier.precision = precision - (specifier.type === "e");
+      break;
+    }
+    case "f":
+    case "%": {
+      if (specifier.precision == null && !isNaN(precision = precisionFixed$1(step))) specifier.precision = precision - (specifier.type === "%") * 2;
+      break;
+    }
   }
+  return format$1(specifier);
 }
 
-const SELECT_THRESHOLD = 30;
+function linearish$1(scale) {
+  var domain = scale.domain;
 
-/**
- * event.layerX and event.layerY are deprecated. We will use them if they are on the event, but
- * if not we will use a manual calculation.
- *
- * @param {Event} event
- * @returns layerX and layerY, coordinates of event with origin at top right corner of bounding box
- */
-const getLayerXandYFromEvent = (event) => {
-  if (event.layerX !== undefined && event.layerY !== undefined) {
-    return [event.layerX, event.layerY];
-  }
-  const bbox = event.target.getBoundingClientRect();
-  const x = event.clientX - bbox.left;
-  const y = event.clientY - bbox.top;
-  return [x, y];
-};
+  scale.ticks = function(count) {
+    var d = domain();
+    return ticks$1(d[0], d[d.length - 1], count == null ? 10 : count);
+  };
 
-class MouseReader {
-  /**
-   *
-   * @param {HTMLElement} element meant to read mouse events, necessary since OffscreenCanvas cannot read DOM events
-   * @param {WebGLVis} handler WebGLVis that is using this mousereader
-   */
-  constructor(element, handler) {
-    this.element = element;
-    this.element.style.position = "absolute";
-    this.element.style.width = "100%";
-    this.element.style.height = "100%";
+  scale.tickFormat = function(count, specifier) {
+    var d = domain();
+    return tickFormat$1(d[0], d[d.length - 1], count == null ? 10 : count, specifier);
+  };
 
-    this.handler = handler;
+  scale.nice = function(count) {
+    if (count == null) count = 10;
 
-    this._currentSelectionPoints = [];
+    var d = domain();
+    var i0 = 0;
+    var i1 = d.length - 1;
+    var start = d[i0];
+    var stop = d[i1];
+    var prestep;
+    var step;
+    var maxIter = 10;
 
-    this.tool = "pan";
-    this.selectStartPoint = null;
-    this.selectEndPoint = null;
+    if (stop < start) {
+      step = start, start = stop, stop = step;
+      step = i0, i0 = i1, i1 = step;
+    }
+    
+    while (maxIter-- > 0) {
+      step = tickIncrement$1(start, stop, count);
+      if (step === prestep) {
+        d[i0] = start;
+        d[i1] = stop;
+        return domain(d);
+      } else if (step > 0) {
+        start = Math.floor(start / step) * step;
+        stop = Math.ceil(stop / step) * step;
+      } else if (step < 0) {
+        start = Math.ceil(start * step) / step;
+        stop = Math.floor(stop * step) / step;
+      } else {
+        break;
+      }
+      prestep = step;
+    }
 
-    // Initializing elements to show user their current selection
-    this.SVGInteractor = new SVGInteractor(
-      document.createElementNS("http://www.w3.org/2000/svg", "svg"),
-      handler.dispatchEvent.bind(handler, "labelClicked"),
-      handler.dispatchEvent.bind(handler, "labelHovered"),
-      handler.dispatchEvent.bind(handler, "labelUnhovered")
-    );
-    this.throttledUpdateSVG = throttleWithRAF(this._updateSVG.bind(this));
-    this.uniDirectionalSelectionEnabled = true;
-  }
+    return scale;
+  };
 
-  /**
-   * Set the specification of the mouse reader and the svg interaction
-   * @param {Object} specification
-   */
-  setSpecification(specification) {
-    const styles = getDimAndMarginStyleForSpecification(specification);
-    this.element.style.width = styles.width;
-    this.element.style.height = styles.height;
-    this.element.style.margin = styles.margin;
+  return scale;
+}
 
-    this.viewport = getViewportForSpecification(specification);
-    this.SVGInteractor.setSpecification(specification);
-    this._updateSVG();
-  }
+function linear$2() {
+  var scale = continuous$1();
 
-  /**
-   * Set the viewport in the format mouseReader.viewport = [minX, maxX, minY, maxY].
-   * Mostly used to make WebGLVis.setViewOptions simpler.
-   */
-  set viewport(toSet) {
-    this.minX = toSet[0];
-    this.maxX = toSet[1];
-    this.minY = toSet[2];
-    this.maxY = toSet[3];
+  scale.copy = function() {
+    return copy$1(scale, linear$2());
+  };
 
-    this.currentXRange = [this.minX, this.maxX];
-    this.currentYRange = [this.minY, this.maxY];
-  }
+  initRange$1.apply(scale, arguments);
 
-  /**
-   * Init the mouse reader by adding its elements to DOM and adding event handlers
-   */
-  init() {
-    this.width = this.element.clientWidth;
-    this.height = this.element.clientHeight;
+  return linearish$1(scale);
+}
 
-    this.element.parentElement.appendChild(this.SVGInteractor.svg);
-    this.SVGInteractor.init();
-    this._updateSVG();
+var xhtml$1 = "http://www.w3.org/1999/xhtml";
 
-    this.element.addEventListener("wheel", this._onWheel.bind(this), false);
+var namespaces$1 = {
+  svg: "http://www.w3.org/2000/svg",
+  xhtml: xhtml$1,
+  xlink: "http://www.w3.org/1999/xlink",
+  xml: "http://www.w3.org/XML/1998/namespace",
+  xmlns: "http://www.w3.org/2000/xmlns/"
+};
 
-    let mouseDown = false;
-    this.element.addEventListener(
-      "mousedown",
-      (event) => {
-        mouseDown = true;
-        switch (this.tool) {
-          case "pan":
-            break;
-          case "box":
-          case "boxh":
-          case "boxv":
-          case "lasso":
-            {
-              this._currentSelectionPoints = [
-                ...this._calculateViewportSpot(
-                  ...getLayerXandYFromEvent(event)
-                ),
-              ];
-              this.selectStartPoint = {
-                x: event.clientX,
-                y: event.clientY,
-              };
-              this.selectEndPoint = null;
-            }
+function namespace$1(name) {
+  var prefix = name += "", i = prefix.indexOf(":");
+  if (i >= 0 && (prefix = name.slice(0, i)) !== "xmlns") name = name.slice(i + 1);
+  return namespaces$1.hasOwnProperty(prefix) ? {space: namespaces$1[prefix], local: name} : name; // eslint-disable-line no-prototype-builtins
+}
 
-            break;
-        }
-      },
-      false
-    );
+function creatorInherit$1(name) {
+  return function() {
+    var document = this.ownerDocument,
+        uri = this.namespaceURI;
+    return uri === xhtml$1 && document.documentElement.namespaceURI === xhtml$1
+        ? document.createElement(name)
+        : document.createElementNS(uri, name);
+  };
+}
 
-    this.element.addEventListener(
-      "mousemove",
-      (event) => {
-        this.handler.getClosestPoint(
-          this._calculateViewportSpot(...getLayerXandYFromEvent(event))
-        );
-        if (!mouseDown) {
-          return;
-        }
-        switch (this.tool) {
-          case "pan":
-            this._onPan(event);
-            break;
-          case "box":
-          case "boxh":
-          case "boxv":
-            this._currentSelectionPoints = this._currentSelectionPoints
-              .slice(0, 2)
-              .concat(
-                this._calculateViewportSpot(...getLayerXandYFromEvent(event))
-              );
+function creatorFixed$1(fullname) {
+  return function() {
+    return this.ownerDocument.createElementNS(fullname.space, fullname.local);
+  };
+}
 
-            if (!this.selectStartPoint) {
-              return;
-            }
-            this.selectEndPoint = { x: event.clientX, y: event.clientY };
+function creator$1(name) {
+  var fullname = namespace$1(name);
+  return (fullname.local
+      ? creatorFixed$1
+      : creatorInherit$1)(fullname);
+}
 
-            const diffX = Math.abs(
-              this.selectStartPoint.x - this.selectEndPoint.x
-            );
-            const diffY = Math.abs(
-              this.selectStartPoint.y - this.selectEndPoint.y
-            );
+function none$1() {}
 
-            if (this.lockedX) {
-              this.tool = "boxv";
-            } else if (this.lockedY) {
-              this.tool = "boxh";
-            } else if (diffX <= SELECT_THRESHOLD && diffY > SELECT_THRESHOLD) {
-              this.tool = "boxv";
-            } else if (diffY <= SELECT_THRESHOLD && diffX > SELECT_THRESHOLD) {
-              this.tool = "boxh";
-            } else {
-              this.tool = "box";
-            }
-            if (this.isUniDirectionalSelectionAllowed) {
-              this.handler.dispatchEvent("onSelection", {
-                bounds: getPointsBySelectMode(
-                  this.tool,
-                  this._currentSelectionPoints,
-                  this.currentXRange,
-                  this.currentYRange
-                ),
-                type: this.tool,
-                event: cloneMouseEvent(event),
-              });
-            } else {
-              this.handler.dispatchEvent("onSelection", {
-                bounds: this._currentSelectionPoints,
-                type: this.tool,
-                event: cloneMouseEvent(event),
-              });
-            }
-            break;
-          case "lasso":
-            this._currentSelectionPoints.push(
-              ...this._calculateViewportSpot(...getLayerXandYFromEvent(event))
-            );
-            this.handler.dispatchEvent("onSelection", {
-              bounds: this._currentSelectionPoints,
-              type: this.tool,
-              event: cloneMouseEvent(event),
-            });
-            break;
-        }
-        this._updateSVG();
-      },
-      false
-    );
+function selector$1(selector) {
+  return selector == null ? none$1 : function() {
+    return this.querySelector(selector);
+  };
+}
 
-    this.element.addEventListener("mouseup", (event) => {
-      mouseDown = false;
-      this.selectStartPoint = null;
-      this.selectEndPoint = null;
-      switch (this.tool) {
-        case "pan":
-          break;
-        case "box":
-        case "boxh":
-        case "boxv":
-          if (this._currentSelectionPoints.length !== 4) {
-            this._currentSelectionPoints = [];
-            return;
-          }
-          this._updateSVG();
-          this._onSelect(cloneMouseEvent(event));
-          break;
-        case "lasso":
-          if (this._currentSelectionPoints.length < 6) {
-            this._currentSelectionPoints = [];
-            this._updateSVG();
-            return;
-          }
-          this._onSelect(cloneMouseEvent(event));
-          break;
-      }
-    });
+function selection_select$1(select) {
+  if (typeof select !== "function") select = selector$1(select);
 
-    this.element.addEventListener("mouseleave", () => {
-      switch (this.tool) {
-        case "pan": // Ensures panning does not continue if user leaves canvas
-          mouseDown = false;
-          break;
+  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) {
+      if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {
+        if ("__data__" in node) subnode.__data__ = node.__data__;
+        subgroup[i] = subnode;
       }
-    });
-
-    this.element.addEventListener(
-      "dblclick",
-      (event) => {
-        this.handler.getClickPoint(
-          this._calculateViewportSpot(...getLayerXandYFromEvent(event))
-        );
-      },
-      false
-    );
-  }
-
-  /**
-   * Get current viewport info such as min/max bounds and current ranges
-   *
-   * @returns Current viewport information the mouse reader has calculated
-   */
-  getViewport() {
-    return {
-      minX: this.minX,
-      maxX: this.maxX,
-      minY: this.minY,
-      maxY: this.maxY,
-      xRange: this.currentXRange,
-      yRange: this.currentYRange,
-    };
+    }
   }
 
-  /**
-   * Method to handle wheel events for zooming in and out of canvas
-   *
-   * @param {WheelEvent} event
-   */
-  _onWheel(event) {
-    event.preventDefault();
+  return new Selection$1(subgroups, this._parents);
+}
 
-    let previousX = null;
-    let previousY = null;
-    if (!this.lockedX) {
-      previousX = [...this.currentXRange]; // ... to avoid aliasing
-      const t = -event.wheelDelta / 1000;
-      const inDataSpace = this._calculateViewportSpot(
-        ...getLayerXandYFromEvent(event)
-      );
-      this.currentXRange[0] =
-        t * inDataSpace[0] + (1 - t) * this.currentXRange[0];
-
-      this.currentXRange[1] =
-        t * inDataSpace[0] + (1 - t) * this.currentXRange[1];
+// Given something array like (or null), returns something that is strictly an
+// array. This is used to ensure that array-like objects passed to d3.selectAll
+// or selection.selectAll are converted into proper arrays when creating a
+// selection; we don’t ever want to create a selection backed by a live
+// HTMLCollection or NodeList. However, note that selection.selectAll will use a
+// static NodeList as a group, since it safely derived from querySelectorAll.
+function array$1(x) {
+  return x == null ? [] : Array.isArray(x) ? x : Array.from(x);
+}
 
-      this.currentXRange[0] = Math.max(this.currentXRange[0], this.minX);
-      this.currentXRange[1] = Math.min(this.currentXRange[1], this.maxX);
-    }
+function empty$1() {
+  return [];
+}
 
-    if (!this.lockedY) {
-      previousY = [...this.currentYRange];
-      const t = -event.wheelDelta / 1000;
-      const inDataSpace = this._calculateViewportSpot(
-        ...getLayerXandYFromEvent(event)
-      );
+function selectorAll$1(selector) {
+  return selector == null ? empty$1 : function() {
+    return this.querySelectorAll(selector);
+  };
+}
 
-      this.currentYRange[0] =
-        t * inDataSpace[1] + (1 - t) * this.currentYRange[0];
-      this.currentYRange[1] =
-        t * inDataSpace[1] + (1 - t) * this.currentYRange[1];
-      this.currentYRange[0] = Math.max(this.currentYRange[0], this.minY);
-      this.currentYRange[1] = Math.min(this.currentYRange[1], this.maxY);
-    }
+function arrayAll$1(select) {
+  return function() {
+    return array$1(select.apply(this, arguments));
+  };
+}
 
-    if (!this.lockedX || !this.lockedY) {
-      const { xZoomLevel, yZoomLevel } = calculateZoomLevel(this.getViewport());
-      if (
-        !this.lockedX &&
-        (!this._validateXRange() ||
-          (this.maxZoomLevel && this.maxZoomLevel < xZoomLevel))
-      ) {
-        // Zoom in limit
-        this.currentXRange = previousX;
-      }
+function selection_selectAll$1(select) {
+  if (typeof select === "function") select = arrayAll$1(select);
+  else select = selectorAll$1(select);
 
-      if (
-        !this.lockedY &&
-        (!this._validateYRange() ||
-          (this.maxZoomLevel && this.maxZoomLevel < yZoomLevel))
-      ) {
-        // Zoom in limit
-        this.currentYRange = previousY;
+  for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
+      if (node = group[i]) {
+        subgroups.push(select.call(node, node.__data__, i, group));
+        parents.push(node);
       }
     }
-
-    this.handler.dispatchEvent(event.wheelDelta < 0 ? "zoomIn" : "zoomOut", {
-      viewport: this.getViewport(),
-      zoomLevel: calculateZoomLevel(this.getViewport()),
-      type: this.tool,
-      event: cloneMouseEvent(event),
-    });
-
-    this.handler.sendDrawerState(this.getViewport());
-    this.throttledUpdateSVG();
   }
 
-  /**
-   * Method to handle a clicked mouse moving around canvas to pan around canvas.
-   *
-   * @param {MouseEvent} event from "mousemove" event
-   */
-  _onPan(event) {
-    if (!this.lockedX) {
-      const previousX = [...this.currentXRange]; // ... to avoid aliasing
-      const xDampen = (this.currentXRange[1] - this.currentXRange[0]) / 1000;
-      this.currentXRange[0] -= event.movementX * xDampen;
-      this.currentXRange[1] -= event.movementX * xDampen;
-      // this.currentXRange[0] = Math.max(this.currentXRange[0], this.minX);
-      // this.currentXRange[1] = Math.min(this.currentXRange[1], this.maxX);
-
-      if (!this._validateXRange()) {
-        this.currentXRange = previousX;
-      }
-    }
+  return new Selection$1(subgroups, parents);
+}
 
-    if (!this.lockedY) {
-      const previousY = [...this.currentYRange];
-      const yDampen = (this.currentYRange[1] - this.currentYRange[0]) / 1000;
-      this.currentYRange[0] += event.movementY * yDampen;
-      this.currentYRange[1] += event.movementY * yDampen;
-      // this.currentYRange[0] = Math.max(this.currentYRange[0], this.minY);
-      // this.currentYRange[1] = Math.min(this.currentYRange[1], this.maxY);
+function matcher$1(selector) {
+  return function() {
+    return this.matches(selector);
+  };
+}
 
-      if (!this._validateYRange()) {
-        this.currentYRange = previousY;
-      }
-    }
+function childMatcher$1(selector) {
+  return function(node) {
+    return node.matches(selector);
+  };
+}
 
-    this.handler.dispatchEvent("pan", {
-      viewport: this.getViewport(),
-      type: this.tool,
-      event: cloneMouseEvent(event),
-    });
+var find$1 = Array.prototype.find;
 
-    this.handler.sendDrawerState(this.getViewport());
-    this._updateSVG();
-  }
+function childFind$1(match) {
+  return function() {
+    return find$1.call(this.children, match);
+  };
+}
 
-  /**
-   * Checks if this.currentXRange is valid with first element less than second
-   * and if viewport zoom is not above webgl max zoom.
-   *
-   * @return true if range is valid, false otherwise
-   */
-  _validateXRange() {
-    return this.currentXRange[1] >= this.currentXRange[0];
-  }
+function childFirst$1() {
+  return this.firstElementChild;
+}
 
-  /**
-   * Checks if this.currentYRange is valid with first element less than second
-   * and if viewport zoom is not above webgl max zoom.
-   *
-   * @return true if range is valid, false otherwise
-   */
-  _validateYRange() {
-    return this.currentYRange[1] >= this.currentYRange[0];
-  }
+function selection_selectChild$1(match) {
+  return this.select(match == null ? childFirst$1
+      : childFind$1(typeof match === "function" ? match : childMatcher$1(match)));
+}
 
-  /**
-   * Updates the DOM component used to show user selection or axis.
-   * Calls methods from SVGInteractor.
-   */
-  _updateSVG() {
-    this.SVGInteractor.updateView(
-      this.currentXRange,
-      this.currentYRange,
-      this.width,
-      this.height
-    );
+var filter$1 = Array.prototype.filter;
 
-    let selectionPoints = this._currentSelectionPoints;
+function children$1() {
+  return Array.from(this.children);
+}
 
-    if (
-      this.isUniDirectionalSelectionAllowed &&
-      (this.tool === "box" || this.tool === "boxh" || this.tool === "boxv")
-    ) {
-      selectionPoints = getPointsBySelectMode(
-        this.tool,
-        this._currentSelectionPoints,
-        this.currentXRange,
-        this.currentYRange
-      );
-    }
+function childrenFilter$1(match) {
+  return function() {
+    return filter$1.call(this.children, match);
+  };
+}
 
-    this.SVGInteractor.updateSelectView(selectionPoints);
-  }
+function selection_selectChildren$1(match) {
+  return this.selectAll(match == null ? children$1
+      : childrenFilter$1(typeof match === "function" ? match : childMatcher$1(match)));
+}
 
-  /**
-   * Executes when user has confirmed selection points (typically by releasing mouse)
-   * and calls handler.selectPoints with the points.
-   * @param {MouseEvent} event from the event it is called from
-   */
-  _onSelect(event) {
-    if (this.tool === "box" && this.isUniDirectionalSelectionAllowed) {
-      this.handler.selectPoints(
-        getPointsBySelectMode(
-          this.tool,
-          this._currentSelectionPoints,
-          this.currentXRange,
-          this.currentYRange
-        ),
-        event
-      );
-    } else this.handler.selectPoints(this._currentSelectionPoints, event);
-  }
+function selection_filter$1(match) {
+  if (typeof match !== "function") match = matcher$1(match);
 
-  /**
-   * Calculate the location on the real coordinate space a point on the canvas corresponds to.
-   *
-   * @param {Float} canvasX likely from event.layerX or getLayerXandYFromEvent
-   * @param {Float} canvasY likely from event.layerY or getLayerXandYFromEvent
-   * @returns viewport coordinate as array
-   */
-  _calculateViewportSpot(canvasX, canvasY) {
-    const scaleX = scale([0, this.width], this.currentXRange);
-    // Flipped for Y since canvas using typical graphics coordinates but GPU clipspace is typical cartesian coordinates
-    const scaleY = scale([this.height, 0], this.currentYRange);
-    return [scaleX(canvasX), scaleY(canvasY)];
+  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) {
+      if ((node = group[i]) && match.call(node, node.__data__, i, group)) {
+        subgroup.push(node);
+      }
+    }
   }
 
-  /**
-   * Clears the polygon selection on the visualization
-   */
-  clear() {
-    this._currentSelectionPoints = [];
-    this.SVGInteractor.clear();
-  }
+  return new Selection$1(subgroups, this._parents);
+}
 
-  get isUniDirectionalSelectionAllowed() {
-    return this.uniDirectionalSelectionEnabled || this.lockedX || this.lockedY;
-  }
+function sparse$1(update) {
+  return new Array(update.length);
 }
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+function selection_enter$1() {
+  return new Selection$1(this._enter || this._groups.map(sparse$1), this._parents);
+}
 
-var url = {};
+function EnterNode$1(parent, datum) {
+  this.ownerDocument = parent.ownerDocument;
+  this.namespaceURI = parent.namespaceURI;
+  this._next = null;
+  this._parent = parent;
+  this.__data__ = datum;
+}
 
-var punycode$1 = {exports: {}};
+EnterNode$1.prototype = {
+  constructor: EnterNode$1,
+  appendChild: function(child) { return this._parent.insertBefore(child, this._next); },
+  insertBefore: function(child, next) { return this._parent.insertBefore(child, next); },
+  querySelector: function(selector) { return this._parent.querySelector(selector); },
+  querySelectorAll: function(selector) { return this._parent.querySelectorAll(selector); }
+};
 
-/*! https://mths.be/punycode v1.3.2 by @mathias */
+function constant$2(x) {
+  return function() {
+    return x;
+  };
+}
 
-(function (module, exports) {
-(function(root) {
+function bindIndex$1(parent, group, enter, update, exit, data) {
+  var i = 0,
+      node,
+      groupLength = group.length,
+      dataLength = data.length;
 
-	/** Detect free variables */
-	var freeExports = exports &&
-		!exports.nodeType && exports;
-	var freeModule = module &&
-		!module.nodeType && module;
-	var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal;
-	if (
-		freeGlobal.global === freeGlobal ||
-		freeGlobal.window === freeGlobal ||
-		freeGlobal.self === freeGlobal
-	) {
-		root = freeGlobal;
-	}
+  // Put any non-null nodes that fit into update.
+  // Put any null nodes into enter.
+  // Put any remaining data into enter.
+  for (; i < dataLength; ++i) {
+    if (node = group[i]) {
+      node.__data__ = data[i];
+      update[i] = node;
+    } else {
+      enter[i] = new EnterNode$1(parent, data[i]);
+    }
+  }
 
-	/**
-	 * The `punycode` object.
-	 * @name punycode
-	 * @type Object
-	 */
-	var punycode,
+  // Put any non-null nodes that don’t fit into exit.
+  for (; i < groupLength; ++i) {
+    if (node = group[i]) {
+      exit[i] = node;
+    }
+  }
+}
 
-	/** Highest positive signed 32-bit float value */
-	maxInt = 2147483647, // aka. 0x7FFFFFFF or 2^31-1
+function bindKey$1(parent, group, enter, update, exit, data, key) {
+  var i,
+      node,
+      nodeByKeyValue = new Map,
+      groupLength = group.length,
+      dataLength = data.length,
+      keyValues = new Array(groupLength),
+      keyValue;
 
-	/** Bootstring parameters */
-	base = 36,
-	tMin = 1,
-	tMax = 26,
-	skew = 38,
-	damp = 700,
-	initialBias = 72,
-	initialN = 128, // 0x80
-	delimiter = '-', // '\x2D'
+  // Compute the key for each node.
+  // If multiple nodes have the same key, the duplicates are added to exit.
+  for (i = 0; i < groupLength; ++i) {
+    if (node = group[i]) {
+      keyValues[i] = keyValue = key.call(node, node.__data__, i, group) + "";
+      if (nodeByKeyValue.has(keyValue)) {
+        exit[i] = node;
+      } else {
+        nodeByKeyValue.set(keyValue, node);
+      }
+    }
+  }
 
-	/** Regular expressions */
-	regexPunycode = /^xn--/,
-	regexNonASCII = /[^\x20-\x7E]/, // unprintable ASCII chars + non-ASCII chars
-	regexSeparators = /[\x2E\u3002\uFF0E\uFF61]/g, // RFC 3490 separators
+  // Compute the key for each datum.
+  // If there a node associated with this key, join and add it to update.
+  // If there is not (or the key is a duplicate), add it to enter.
+  for (i = 0; i < dataLength; ++i) {
+    keyValue = key.call(parent, data[i], i, data) + "";
+    if (node = nodeByKeyValue.get(keyValue)) {
+      update[i] = node;
+      node.__data__ = data[i];
+      nodeByKeyValue.delete(keyValue);
+    } else {
+      enter[i] = new EnterNode$1(parent, data[i]);
+    }
+  }
 
-	/** Error messages */
-	errors = {
-		'overflow': 'Overflow: input needs wider integers to process',
-		'not-basic': 'Illegal input >= 0x80 (not a basic code point)',
-		'invalid-input': 'Invalid input'
-	},
+  // Add any remaining nodes that were not bound to data to exit.
+  for (i = 0; i < groupLength; ++i) {
+    if ((node = group[i]) && (nodeByKeyValue.get(keyValues[i]) === node)) {
+      exit[i] = node;
+    }
+  }
+}
 
-	/** Convenience shortcuts */
-	baseMinusTMin = base - tMin,
-	floor = Math.floor,
-	stringFromCharCode = String.fromCharCode,
+function datum$1(node) {
+  return node.__data__;
+}
 
-	/** Temporary variable */
-	key;
+function selection_data$1(value, key) {
+  if (!arguments.length) return Array.from(this, datum$1);
 
-	/*--------------------------------------------------------------------------*/
+  var bind = key ? bindKey$1 : bindIndex$1,
+      parents = this._parents,
+      groups = this._groups;
 
-	/**
-	 * A generic error utility function.
-	 * @private
-	 * @param {String} type The error type.
-	 * @returns {Error} Throws a `RangeError` with the applicable error message.
-	 */
-	function error(type) {
-		throw RangeError(errors[type]);
-	}
+  if (typeof value !== "function") value = constant$2(value);
 
-	/**
-	 * A generic `Array#map` utility function.
-	 * @private
-	 * @param {Array} array The array to iterate over.
-	 * @param {Function} callback The function that gets called for every array
-	 * item.
-	 * @returns {Array} A new array of values returned by the callback function.
-	 */
-	function map(array, fn) {
-		var length = array.length;
-		var result = [];
-		while (length--) {
-			result[length] = fn(array[length]);
-		}
-		return result;
-	}
+  for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
+    var parent = parents[j],
+        group = groups[j],
+        groupLength = group.length,
+        data = arraylike$1(value.call(parent, parent && parent.__data__, j, parents)),
+        dataLength = data.length,
+        enterGroup = enter[j] = new Array(dataLength),
+        updateGroup = update[j] = new Array(dataLength),
+        exitGroup = exit[j] = new Array(groupLength);
 
-	/**
-	 * A simple `Array#map`-like wrapper to work with domain name strings or email
-	 * addresses.
-	 * @private
-	 * @param {String} domain The domain name or email address.
-	 * @param {Function} callback The function that gets called for every
-	 * character.
-	 * @returns {Array} A new string of characters returned by the callback
-	 * function.
-	 */
-	function mapDomain(string, fn) {
-		var parts = string.split('@');
-		var result = '';
-		if (parts.length > 1) {
-			// In email addresses, only the domain name should be punycoded. Leave
-			// the local part (i.e. everything up to `@`) intact.
-			result = parts[0] + '@';
-			string = parts[1];
-		}
-		// Avoid `split(regex)` for IE8 compatibility. See #17.
-		string = string.replace(regexSeparators, '\x2E');
-		var labels = string.split('.');
-		var encoded = map(labels, fn).join('.');
-		return result + encoded;
-	}
+    bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
 
-	/**
-	 * Creates an array containing the numeric code points of each Unicode
-	 * character in the string. While JavaScript uses UCS-2 internally,
-	 * this function will convert a pair of surrogate halves (each of which
-	 * UCS-2 exposes as separate characters) into a single code point,
-	 * matching UTF-16.
-	 * @see `punycode.ucs2.encode`
-	 * @see <https://mathiasbynens.be/notes/javascript-encoding>
-	 * @memberOf punycode.ucs2
-	 * @name decode
-	 * @param {String} string The Unicode input string (UCS-2).
-	 * @returns {Array} The new array of code points.
-	 */
-	function ucs2decode(string) {
-		var output = [],
-		    counter = 0,
-		    length = string.length,
-		    value,
-		    extra;
-		while (counter < length) {
-			value = string.charCodeAt(counter++);
-			if (value >= 0xD800 && value <= 0xDBFF && counter < length) {
-				// high surrogate, and there is a next character
-				extra = string.charCodeAt(counter++);
-				if ((extra & 0xFC00) == 0xDC00) { // low surrogate
-					output.push(((value & 0x3FF) << 10) + (extra & 0x3FF) + 0x10000);
-				} else {
-					// unmatched surrogate; only append this code unit, in case the next
-					// code unit is the high surrogate of a surrogate pair
-					output.push(value);
-					counter--;
-				}
-			} else {
-				output.push(value);
-			}
-		}
-		return output;
-	}
+    // Now connect the enter nodes to their following update node, such that
+    // appendChild can insert the materialized enter node before this node,
+    // rather than at the end of the parent node.
+    for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
+      if (previous = enterGroup[i0]) {
+        if (i0 >= i1) i1 = i0 + 1;
+        while (!(next = updateGroup[i1]) && ++i1 < dataLength);
+        previous._next = next || null;
+      }
+    }
+  }
 
-	/**
-	 * Creates a string based on an array of numeric code points.
-	 * @see `punycode.ucs2.decode`
-	 * @memberOf punycode.ucs2
-	 * @name encode
-	 * @param {Array} codePoints The array of numeric code points.
-	 * @returns {String} The new Unicode string (UCS-2).
-	 */
-	function ucs2encode(array) {
-		return map(array, function(value) {
-			var output = '';
-			if (value > 0xFFFF) {
-				value -= 0x10000;
-				output += stringFromCharCode(value >>> 10 & 0x3FF | 0xD800);
-				value = 0xDC00 | value & 0x3FF;
-			}
-			output += stringFromCharCode(value);
-			return output;
-		}).join('');
-	}
-
-	/**
-	 * Converts a basic code point into a digit/integer.
-	 * @see `digitToBasic()`
-	 * @private
-	 * @param {Number} codePoint The basic numeric code point value.
-	 * @returns {Number} The numeric value of a basic code point (for use in
-	 * representing integers) in the range `0` to `base - 1`, or `base` if
-	 * the code point does not represent a value.
-	 */
-	function basicToDigit(codePoint) {
-		if (codePoint - 48 < 10) {
-			return codePoint - 22;
-		}
-		if (codePoint - 65 < 26) {
-			return codePoint - 65;
-		}
-		if (codePoint - 97 < 26) {
-			return codePoint - 97;
-		}
-		return base;
-	}
+  update = new Selection$1(update, parents);
+  update._enter = enter;
+  update._exit = exit;
+  return update;
+}
 
-	/**
-	 * Converts a digit/integer into a basic code point.
-	 * @see `basicToDigit()`
-	 * @private
-	 * @param {Number} digit The numeric value of a basic code point.
-	 * @returns {Number} The basic code point whose value (when used for
-	 * representing integers) is `digit`, which needs to be in the range
-	 * `0` to `base - 1`. If `flag` is non-zero, the uppercase form is
-	 * used; else, the lowercase form is used. The behavior is undefined
-	 * if `flag` is non-zero and `digit` has no uppercase form.
-	 */
-	function digitToBasic(digit, flag) {
-		//  0..25 map to ASCII a..z or A..Z
-		// 26..35 map to ASCII 0..9
-		return digit + 22 + 75 * (digit < 26) - ((flag != 0) << 5);
-	}
+// Given some data, this returns an array-like view of it: an object that
+// exposes a length property and allows numeric indexing. Note that unlike
+// selectAll, this isn’t worried about “live” collections because the resulting
+// array will only be used briefly while data is being bound. (It is possible to
+// cause the data to change while iterating by using a key function, but please
+// don’t; we’d rather avoid a gratuitous copy.)
+function arraylike$1(data) {
+  return typeof data === "object" && "length" in data
+    ? data // Array, TypedArray, NodeList, array-like
+    : Array.from(data); // Map, Set, iterable, string, or anything else
+}
 
-	/**
-	 * Bias adaptation function as per section 3.4 of RFC 3492.
-	 * http://tools.ietf.org/html/rfc3492#section-3.4
-	 * @private
-	 */
-	function adapt(delta, numPoints, firstTime) {
-		var k = 0;
-		delta = firstTime ? floor(delta / damp) : delta >> 1;
-		delta += floor(delta / numPoints);
-		for (/* no initialization */; delta > baseMinusTMin * tMax >> 1; k += base) {
-			delta = floor(delta / baseMinusTMin);
-		}
-		return floor(k + (baseMinusTMin + 1) * delta / (delta + skew));
-	}
+function selection_exit$1() {
+  return new Selection$1(this._exit || this._groups.map(sparse$1), this._parents);
+}
 
-	/**
-	 * Converts a Punycode string of ASCII-only symbols to a string of Unicode
-	 * symbols.
-	 * @memberOf punycode
-	 * @param {String} input The Punycode string of ASCII-only symbols.
-	 * @returns {String} The resulting string of Unicode symbols.
-	 */
-	function decode(input) {
-		// Don't use UCS-2
-		var output = [],
-		    inputLength = input.length,
-		    out,
-		    i = 0,
-		    n = initialN,
-		    bias = initialBias,
-		    basic,
-		    j,
-		    index,
-		    oldi,
-		    w,
-		    k,
-		    digit,
-		    t,
-		    /** Cached calculation results */
-		    baseMinusT;
+function selection_join$1(onenter, onupdate, onexit) {
+  var enter = this.enter(), update = this, exit = this.exit();
+  if (typeof onenter === "function") {
+    enter = onenter(enter);
+    if (enter) enter = enter.selection();
+  } else {
+    enter = enter.append(onenter + "");
+  }
+  if (onupdate != null) {
+    update = onupdate(update);
+    if (update) update = update.selection();
+  }
+  if (onexit == null) exit.remove(); else onexit(exit);
+  return enter && update ? enter.merge(update).order() : update;
+}
 
-		// Handle the basic code points: let `basic` be the number of input code
-		// points before the last delimiter, or `0` if there is none, then copy
-		// the first basic code points to the output.
+function selection_merge$1(context) {
+  var selection = context.selection ? context.selection() : context;
 
-		basic = input.lastIndexOf(delimiter);
-		if (basic < 0) {
-			basic = 0;
-		}
+  for (var groups0 = this._groups, groups1 = selection._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {
+    for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) {
+      if (node = group0[i] || group1[i]) {
+        merge[i] = node;
+      }
+    }
+  }
 
-		for (j = 0; j < basic; ++j) {
-			// if it's not a basic code point
-			if (input.charCodeAt(j) >= 0x80) {
-				error('not-basic');
-			}
-			output.push(input.charCodeAt(j));
-		}
+  for (; j < m0; ++j) {
+    merges[j] = groups0[j];
+  }
 
-		// Main decoding loop: start just after the last delimiter if any basic code
-		// points were copied; start at the beginning otherwise.
+  return new Selection$1(merges, this._parents);
+}
 
-		for (index = basic > 0 ? basic + 1 : 0; index < inputLength; /* no final expression */) {
+function selection_order$1() {
 
-			// `index` is the index of the next character to be consumed.
-			// Decode a generalized variable-length integer into `delta`,
-			// which gets added to `i`. The overflow checking is easier
-			// if we increase `i` as we go, then subtract off its starting
-			// value at the end to obtain `delta`.
-			for (oldi = i, w = 1, k = base; /* no condition */; k += base) {
+  for (var groups = this._groups, j = -1, m = groups.length; ++j < m;) {
+    for (var group = groups[j], i = group.length - 1, next = group[i], node; --i >= 0;) {
+      if (node = group[i]) {
+        if (next && node.compareDocumentPosition(next) ^ 4) next.parentNode.insertBefore(node, next);
+        next = node;
+      }
+    }
+  }
 
-				if (index >= inputLength) {
-					error('invalid-input');
-				}
+  return this;
+}
 
-				digit = basicToDigit(input.charCodeAt(index++));
+function selection_sort$1(compare) {
+  if (!compare) compare = ascending$2;
 
-				if (digit >= base || digit > floor((maxInt - i) / w)) {
-					error('overflow');
-				}
+  function compareNode(a, b) {
+    return a && b ? compare(a.__data__, b.__data__) : !a - !b;
+  }
 
-				i += digit * w;
-				t = k <= bias ? tMin : (k >= bias + tMax ? tMax : k - bias);
+  for (var groups = this._groups, m = groups.length, sortgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, sortgroup = sortgroups[j] = new Array(n), node, i = 0; i < n; ++i) {
+      if (node = group[i]) {
+        sortgroup[i] = node;
+      }
+    }
+    sortgroup.sort(compareNode);
+  }
 
-				if (digit < t) {
-					break;
-				}
+  return new Selection$1(sortgroups, this._parents).order();
+}
 
-				baseMinusT = base - t;
-				if (w > floor(maxInt / baseMinusT)) {
-					error('overflow');
-				}
+function ascending$2(a, b) {
+  return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+}
 
-				w *= baseMinusT;
+function selection_call$1() {
+  var callback = arguments[0];
+  arguments[0] = this;
+  callback.apply(null, arguments);
+  return this;
+}
 
-			}
+function selection_nodes$1() {
+  return Array.from(this);
+}
 
-			out = output.length + 1;
-			bias = adapt(i - oldi, out, oldi == 0);
+function selection_node$1() {
 
-			// `i` was supposed to wrap around from `out` to `0`,
-			// incrementing `n` each time, so we'll fix that now:
-			if (floor(i / out) > maxInt - n) {
-				error('overflow');
-			}
+  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+    for (var group = groups[j], i = 0, n = group.length; i < n; ++i) {
+      var node = group[i];
+      if (node) return node;
+    }
+  }
 
-			n += floor(i / out);
-			i %= out;
+  return null;
+}
 
-			// Insert `n` at position `i` of the output
-			output.splice(i++, 0, n);
+function selection_size$1() {
+  let size = 0;
+  for (const node of this) ++size; // eslint-disable-line no-unused-vars
+  return size;
+}
 
-		}
+function selection_empty$1() {
+  return !this.node();
+}
 
-		return ucs2encode(output);
-	}
+function selection_each$1(callback) {
 
-	/**
-	 * Converts a string of Unicode symbols (e.g. a domain name label) to a
-	 * Punycode string of ASCII-only symbols.
-	 * @memberOf punycode
-	 * @param {String} input The string of Unicode symbols.
-	 * @returns {String} The resulting Punycode string of ASCII-only symbols.
-	 */
-	function encode(input) {
-		var n,
-		    delta,
-		    handledCPCount,
-		    basicLength,
-		    bias,
-		    j,
-		    m,
-		    q,
-		    k,
-		    t,
-		    currentValue,
-		    output = [],
-		    /** `inputLength` will hold the number of code points in `input`. */
-		    inputLength,
-		    /** Cached calculation results */
-		    handledCPCountPlusOne,
-		    baseMinusT,
-		    qMinusT;
+  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
+      if (node = group[i]) callback.call(node, node.__data__, i, group);
+    }
+  }
 
-		// Convert the input in UCS-2 to Unicode
-		input = ucs2decode(input);
+  return this;
+}
 
-		// Cache the length
-		inputLength = input.length;
+function attrRemove$1(name) {
+  return function() {
+    this.removeAttribute(name);
+  };
+}
 
-		// Initialize the state
-		n = initialN;
-		delta = 0;
-		bias = initialBias;
+function attrRemoveNS$1(fullname) {
+  return function() {
+    this.removeAttributeNS(fullname.space, fullname.local);
+  };
+}
 
-		// Handle the basic code points
-		for (j = 0; j < inputLength; ++j) {
-			currentValue = input[j];
-			if (currentValue < 0x80) {
-				output.push(stringFromCharCode(currentValue));
-			}
-		}
+function attrConstant$1(name, value) {
+  return function() {
+    this.setAttribute(name, value);
+  };
+}
 
-		handledCPCount = basicLength = output.length;
+function attrConstantNS$1(fullname, value) {
+  return function() {
+    this.setAttributeNS(fullname.space, fullname.local, value);
+  };
+}
 
-		// `handledCPCount` is the number of code points that have been handled;
-		// `basicLength` is the number of basic code points.
+function attrFunction$1(name, value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) this.removeAttribute(name);
+    else this.setAttribute(name, v);
+  };
+}
 
-		// Finish the basic string - if it is not empty - with a delimiter
-		if (basicLength) {
-			output.push(delimiter);
-		}
+function attrFunctionNS$1(fullname, value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) this.removeAttributeNS(fullname.space, fullname.local);
+    else this.setAttributeNS(fullname.space, fullname.local, v);
+  };
+}
 
-		// Main encoding loop:
-		while (handledCPCount < inputLength) {
+function selection_attr$1(name, value) {
+  var fullname = namespace$1(name);
 
-			// All non-basic code points < n have been handled already. Find the next
-			// larger one:
-			for (m = maxInt, j = 0; j < inputLength; ++j) {
-				currentValue = input[j];
-				if (currentValue >= n && currentValue < m) {
-					m = currentValue;
-				}
-			}
+  if (arguments.length < 2) {
+    var node = this.node();
+    return fullname.local
+        ? node.getAttributeNS(fullname.space, fullname.local)
+        : node.getAttribute(fullname);
+  }
 
-			// Increase `delta` enough to advance the decoder's <n,i> state to <m,0>,
-			// but guard against overflow
-			handledCPCountPlusOne = handledCPCount + 1;
-			if (m - n > floor((maxInt - delta) / handledCPCountPlusOne)) {
-				error('overflow');
-			}
+  return this.each((value == null
+      ? (fullname.local ? attrRemoveNS$1 : attrRemove$1) : (typeof value === "function"
+      ? (fullname.local ? attrFunctionNS$1 : attrFunction$1)
+      : (fullname.local ? attrConstantNS$1 : attrConstant$1)))(fullname, value));
+}
 
-			delta += (m - n) * handledCPCountPlusOne;
-			n = m;
+function defaultView$1(node) {
+  return (node.ownerDocument && node.ownerDocument.defaultView) // node is a Node
+      || (node.document && node) // node is a Window
+      || node.defaultView; // node is a Document
+}
 
-			for (j = 0; j < inputLength; ++j) {
-				currentValue = input[j];
+function styleRemove$1(name) {
+  return function() {
+    this.style.removeProperty(name);
+  };
+}
 
-				if (currentValue < n && ++delta > maxInt) {
-					error('overflow');
-				}
+function styleConstant$1(name, value, priority) {
+  return function() {
+    this.style.setProperty(name, value, priority);
+  };
+}
 
-				if (currentValue == n) {
-					// Represent delta as a generalized variable-length integer
-					for (q = delta, k = base; /* no condition */; k += base) {
-						t = k <= bias ? tMin : (k >= bias + tMax ? tMax : k - bias);
-						if (q < t) {
-							break;
-						}
-						qMinusT = q - t;
-						baseMinusT = base - t;
-						output.push(
-							stringFromCharCode(digitToBasic(t + qMinusT % baseMinusT, 0))
-						);
-						q = floor(qMinusT / baseMinusT);
-					}
+function styleFunction$1(name, value, priority) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) this.style.removeProperty(name);
+    else this.style.setProperty(name, v, priority);
+  };
+}
 
-					output.push(stringFromCharCode(digitToBasic(q, 0)));
-					bias = adapt(delta, handledCPCountPlusOne, handledCPCount == basicLength);
-					delta = 0;
-					++handledCPCount;
-				}
-			}
+function selection_style$1(name, value, priority) {
+  return arguments.length > 1
+      ? this.each((value == null
+            ? styleRemove$1 : typeof value === "function"
+            ? styleFunction$1
+            : styleConstant$1)(name, value, priority == null ? "" : priority))
+      : styleValue$1(this.node(), name);
+}
 
-			++delta;
-			++n;
+function styleValue$1(node, name) {
+  return node.style.getPropertyValue(name)
+      || defaultView$1(node).getComputedStyle(node, null).getPropertyValue(name);
+}
 
-		}
-		return output.join('');
-	}
+function propertyRemove$1(name) {
+  return function() {
+    delete this[name];
+  };
+}
 
-	/**
-	 * Converts a Punycode string representing a domain name or an email address
-	 * to Unicode. Only the Punycoded parts of the input will be converted, i.e.
-	 * it doesn't matter if you call it on a string that has already been
-	 * converted to Unicode.
-	 * @memberOf punycode
-	 * @param {String} input The Punycoded domain name or email address to
-	 * convert to Unicode.
-	 * @returns {String} The Unicode representation of the given Punycode
-	 * string.
-	 */
-	function toUnicode(input) {
-		return mapDomain(input, function(string) {
-			return regexPunycode.test(string)
-				? decode(string.slice(4).toLowerCase())
-				: string;
-		});
-	}
+function propertyConstant$1(name, value) {
+  return function() {
+    this[name] = value;
+  };
+}
 
-	/**
-	 * Converts a Unicode string representing a domain name or an email address to
-	 * Punycode. Only the non-ASCII parts of the domain name will be converted,
-	 * i.e. it doesn't matter if you call it with a domain that's already in
-	 * ASCII.
-	 * @memberOf punycode
-	 * @param {String} input The domain name or email address to convert, as a
-	 * Unicode string.
-	 * @returns {String} The Punycode representation of the given domain name or
-	 * email address.
-	 */
-	function toASCII(input) {
-		return mapDomain(input, function(string) {
-			return regexNonASCII.test(string)
-				? 'xn--' + encode(string)
-				: string;
-		});
-	}
+function propertyFunction$1(name, value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) delete this[name];
+    else this[name] = v;
+  };
+}
 
-	/*--------------------------------------------------------------------------*/
+function selection_property$1(name, value) {
+  return arguments.length > 1
+      ? this.each((value == null
+          ? propertyRemove$1 : typeof value === "function"
+          ? propertyFunction$1
+          : propertyConstant$1)(name, value))
+      : this.node()[name];
+}
 
-	/** Define the public API */
-	punycode = {
-		/**
-		 * A string representing the current Punycode.js version number.
-		 * @memberOf punycode
-		 * @type String
-		 */
-		'version': '1.3.2',
-		/**
-		 * An object of methods to convert from JavaScript's internal character
-		 * representation (UCS-2) to Unicode code points, and back.
-		 * @see <https://mathiasbynens.be/notes/javascript-encoding>
-		 * @memberOf punycode
-		 * @type Object
-		 */
-		'ucs2': {
-			'decode': ucs2decode,
-			'encode': ucs2encode
-		},
-		'decode': decode,
-		'encode': encode,
-		'toASCII': toASCII,
-		'toUnicode': toUnicode
-	};
+function classArray$1(string) {
+  return string.trim().split(/^|\s+/);
+}
 
-	/** Expose `punycode` */
-	// Some AMD build optimizers, like r.js, check for specific condition patterns
-	// like the following:
-	if (freeExports && freeModule) {
-		if (module.exports == freeExports) { // in Node.js or RingoJS v0.8.0+
-			freeModule.exports = punycode;
-		} else { // in Narwhal or RingoJS v0.7.0-
-			for (key in punycode) {
-				punycode.hasOwnProperty(key) && (freeExports[key] = punycode[key]);
-			}
-		}
-	} else { // in Rhino or a web browser
-		root.punycode = punycode;
-	}
+function classList$1(node) {
+  return node.classList || new ClassList$1(node);
+}
 
-}(commonjsGlobal));
-}(punycode$1, punycode$1.exports));
+function ClassList$1(node) {
+  this._node = node;
+  this._names = classArray$1(node.getAttribute("class") || "");
+}
 
-var util$1 = {
-  isString: function(arg) {
-    return typeof(arg) === 'string';
-  },
-  isObject: function(arg) {
-    return typeof(arg) === 'object' && arg !== null;
+ClassList$1.prototype = {
+  add: function(name) {
+    var i = this._names.indexOf(name);
+    if (i < 0) {
+      this._names.push(name);
+      this._node.setAttribute("class", this._names.join(" "));
+    }
   },
-  isNull: function(arg) {
-    return arg === null;
+  remove: function(name) {
+    var i = this._names.indexOf(name);
+    if (i >= 0) {
+      this._names.splice(i, 1);
+      this._node.setAttribute("class", this._names.join(" "));
+    }
   },
-  isNullOrUndefined: function(arg) {
-    return arg == null;
+  contains: function(name) {
+    return this._names.indexOf(name) >= 0;
   }
 };
 
-var querystring$1 = {};
+function classedAdd$1(node, names) {
+  var list = classList$1(node), i = -1, n = names.length;
+  while (++i < n) list.add(names[i]);
+}
 
-// If obj.hasOwnProperty has been overridden, then calling
-// obj.hasOwnProperty(prop) will break.
-// See: https://github.com/joyent/node/issues/1707
-function hasOwnProperty(obj, prop) {
-  return Object.prototype.hasOwnProperty.call(obj, prop);
+function classedRemove$1(node, names) {
+  var list = classList$1(node), i = -1, n = names.length;
+  while (++i < n) list.remove(names[i]);
 }
 
-var decode = function(qs, sep, eq, options) {
-  sep = sep || '&';
-  eq = eq || '=';
-  var obj = {};
+function classedTrue$1(names) {
+  return function() {
+    classedAdd$1(this, names);
+  };
+}
 
-  if (typeof qs !== 'string' || qs.length === 0) {
-    return obj;
-  }
+function classedFalse$1(names) {
+  return function() {
+    classedRemove$1(this, names);
+  };
+}
 
-  var regexp = /\+/g;
-  qs = qs.split(sep);
+function classedFunction$1(names, value) {
+  return function() {
+    (value.apply(this, arguments) ? classedAdd$1 : classedRemove$1)(this, names);
+  };
+}
 
-  var maxKeys = 1000;
-  if (options && typeof options.maxKeys === 'number') {
-    maxKeys = options.maxKeys;
-  }
+function selection_classed$1(name, value) {
+  var names = classArray$1(name + "");
 
-  var len = qs.length;
-  // maxKeys <= 0 means that we should not limit keys count
-  if (maxKeys > 0 && len > maxKeys) {
-    len = maxKeys;
+  if (arguments.length < 2) {
+    var list = classList$1(this.node()), i = -1, n = names.length;
+    while (++i < n) if (!list.contains(names[i])) return false;
+    return true;
   }
 
-  for (var i = 0; i < len; ++i) {
-    var x = qs[i].replace(regexp, '%20'),
-        idx = x.indexOf(eq),
-        kstr, vstr, k, v;
+  return this.each((typeof value === "function"
+      ? classedFunction$1 : value
+      ? classedTrue$1
+      : classedFalse$1)(names, value));
+}
 
-    if (idx >= 0) {
-      kstr = x.substr(0, idx);
-      vstr = x.substr(idx + 1);
-    } else {
-      kstr = x;
-      vstr = '';
-    }
+function textRemove$1() {
+  this.textContent = "";
+}
 
-    k = decodeURIComponent(kstr);
-    v = decodeURIComponent(vstr);
+function textConstant$1(value) {
+  return function() {
+    this.textContent = value;
+  };
+}
 
-    if (!hasOwnProperty(obj, k)) {
-      obj[k] = v;
-    } else if (Array.isArray(obj[k])) {
-      obj[k].push(v);
-    } else {
-      obj[k] = [obj[k], v];
-    }
-  }
+function textFunction$1(value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    this.textContent = v == null ? "" : v;
+  };
+}
 
-  return obj;
-};
+function selection_text$1(value) {
+  return arguments.length
+      ? this.each(value == null
+          ? textRemove$1 : (typeof value === "function"
+          ? textFunction$1
+          : textConstant$1)(value))
+      : this.node().textContent;
+}
 
-var stringifyPrimitive = function(v) {
-  switch (typeof v) {
-    case 'string':
-      return v;
+function htmlRemove$1() {
+  this.innerHTML = "";
+}
 
-    case 'boolean':
-      return v ? 'true' : 'false';
+function htmlConstant$1(value) {
+  return function() {
+    this.innerHTML = value;
+  };
+}
 
-    case 'number':
-      return isFinite(v) ? v : '';
+function htmlFunction$1(value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    this.innerHTML = v == null ? "" : v;
+  };
+}
 
-    default:
-      return '';
-  }
-};
+function selection_html$1(value) {
+  return arguments.length
+      ? this.each(value == null
+          ? htmlRemove$1 : (typeof value === "function"
+          ? htmlFunction$1
+          : htmlConstant$1)(value))
+      : this.node().innerHTML;
+}
 
-var encode = function(obj, sep, eq, name) {
-  sep = sep || '&';
-  eq = eq || '=';
-  if (obj === null) {
-    obj = undefined;
-  }
+function raise$1() {
+  if (this.nextSibling) this.parentNode.appendChild(this);
+}
 
-  if (typeof obj === 'object') {
-    return Object.keys(obj).map(function(k) {
-      var ks = encodeURIComponent(stringifyPrimitive(k)) + eq;
-      if (Array.isArray(obj[k])) {
-        return obj[k].map(function(v) {
-          return ks + encodeURIComponent(stringifyPrimitive(v));
-        }).join(sep);
-      } else {
-        return ks + encodeURIComponent(stringifyPrimitive(obj[k]));
-      }
-    }).join(sep);
+function selection_raise$1() {
+  return this.each(raise$1);
+}
 
-  }
+function lower$1() {
+  if (this.previousSibling) this.parentNode.insertBefore(this, this.parentNode.firstChild);
+}
 
-  if (!name) return '';
-  return encodeURIComponent(stringifyPrimitive(name)) + eq +
-         encodeURIComponent(stringifyPrimitive(obj));
-};
+function selection_lower$1() {
+  return this.each(lower$1);
+}
 
-querystring$1.decode = querystring$1.parse = decode;
-querystring$1.encode = querystring$1.stringify = encode;
+function selection_append$1(name) {
+  var create = typeof name === "function" ? name : creator$1(name);
+  return this.select(function() {
+    return this.appendChild(create.apply(this, arguments));
+  });
+}
 
-var punycode = punycode$1.exports;
-var util = util$1;
+function constantNull$1() {
+  return null;
+}
 
-url.parse = urlParse;
-url.resolve = urlResolve;
-url.resolveObject = urlResolveObject;
-url.format = urlFormat;
+function selection_insert$1(name, before) {
+  var create = typeof name === "function" ? name : creator$1(name),
+      select = before == null ? constantNull$1 : typeof before === "function" ? before : selector$1(before);
+  return this.select(function() {
+    return this.insertBefore(create.apply(this, arguments), select.apply(this, arguments) || null);
+  });
+}
 
-url.Url = Url;
-
-function Url() {
-  this.protocol = null;
-  this.slashes = null;
-  this.auth = null;
-  this.host = null;
-  this.port = null;
-  this.hostname = null;
-  this.hash = null;
-  this.search = null;
-  this.query = null;
-  this.pathname = null;
-  this.path = null;
-  this.href = null;
+function remove$1() {
+  var parent = this.parentNode;
+  if (parent) parent.removeChild(this);
 }
 
-// Reference: RFC 3986, RFC 1808, RFC 2396
-
-// define these here so at least they only have to be
-// compiled once on the first module load.
-var protocolPattern = /^([a-z0-9.+-]+:)/i,
-    portPattern = /:[0-9]*$/,
-
-    // Special case for a simple path URL
-    simplePathPattern = /^(\/\/?(?!\/)[^\?\s]*)(\?[^\s]*)?$/,
+function selection_remove$1() {
+  return this.each(remove$1);
+}
 
-    // RFC 2396: characters reserved for delimiting URLs.
-    // We actually just auto-escape these.
-    delims = ['<', '>', '"', '`', ' ', '\r', '\n', '\t'],
+function selection_cloneShallow$1() {
+  var clone = this.cloneNode(false), parent = this.parentNode;
+  return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
+}
 
-    // RFC 2396: characters not allowed for various reasons.
-    unwise = ['{', '}', '|', '\\', '^', '`'].concat(delims),
+function selection_cloneDeep$1() {
+  var clone = this.cloneNode(true), parent = this.parentNode;
+  return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
+}
 
-    // Allowed by RFCs, but cause of XSS attacks.  Always escape these.
-    autoEscape = ['\''].concat(unwise),
-    // Characters that are never ever allowed in a hostname.
-    // Note that any invalid chars are also handled, but these
-    // are the ones that are *expected* to be seen, so we fast-path
-    // them.
-    nonHostChars = ['%', '/', '?', ';', '#'].concat(autoEscape),
-    hostEndingChars = ['/', '?', '#'],
-    hostnameMaxLen = 255,
-    hostnamePartPattern = /^[+a-z0-9A-Z_-]{0,63}$/,
-    hostnamePartStart = /^([+a-z0-9A-Z_-]{0,63})(.*)$/,
-    // protocols that can allow "unsafe" and "unwise" chars.
-    unsafeProtocol = {
-      'javascript': true,
-      'javascript:': true
-    },
-    // protocols that never have a hostname.
-    hostlessProtocol = {
-      'javascript': true,
-      'javascript:': true
-    },
-    // protocols that always contain a // bit.
-    slashedProtocol = {
-      'http': true,
-      'https': true,
-      'ftp': true,
-      'gopher': true,
-      'file': true,
-      'http:': true,
-      'https:': true,
-      'ftp:': true,
-      'gopher:': true,
-      'file:': true
-    },
-    querystring = querystring$1;
+function selection_clone$1(deep) {
+  return this.select(deep ? selection_cloneDeep$1 : selection_cloneShallow$1);
+}
 
-function urlParse(url, parseQueryString, slashesDenoteHost) {
-  if (url && util.isObject(url) && url instanceof Url) return url;
+function selection_datum$1(value) {
+  return arguments.length
+      ? this.property("__data__", value)
+      : this.node().__data__;
+}
 
-  var u = new Url;
-  u.parse(url, parseQueryString, slashesDenoteHost);
-  return u;
+function contextListener$1(listener) {
+  return function(event) {
+    listener.call(this, event, this.__data__);
+  };
 }
 
-Url.prototype.parse = function(url, parseQueryString, slashesDenoteHost) {
-  if (!util.isString(url)) {
-    throw new TypeError("Parameter 'url' must be a string, not " + typeof url);
-  }
+function parseTypenames$1(typenames) {
+  return typenames.trim().split(/^|\s+/).map(function(t) {
+    var name = "", i = t.indexOf(".");
+    if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
+    return {type: t, name: name};
+  });
+}
 
-  // Copy chrome, IE, opera backslash-handling behavior.
-  // Back slashes before the query string get converted to forward slashes
-  // See: https://code.google.com/p/chromium/issues/detail?id=25916
-  var queryIndex = url.indexOf('?'),
-      splitter =
-          (queryIndex !== -1 && queryIndex < url.indexOf('#')) ? '?' : '#',
-      uSplit = url.split(splitter),
-      slashRegex = /\\/g;
-  uSplit[0] = uSplit[0].replace(slashRegex, '/');
-  url = uSplit.join(splitter);
+function onRemove$1(typename) {
+  return function() {
+    var on = this.__on;
+    if (!on) return;
+    for (var j = 0, i = -1, m = on.length, o; j < m; ++j) {
+      if (o = on[j], (!typename.type || o.type === typename.type) && o.name === typename.name) {
+        this.removeEventListener(o.type, o.listener, o.options);
+      } else {
+        on[++i] = o;
+      }
+    }
+    if (++i) on.length = i;
+    else delete this.__on;
+  };
+}
 
-  var rest = url;
+function onAdd$1(typename, value, options) {
+  return function() {
+    var on = this.__on, o, listener = contextListener$1(value);
+    if (on) for (var j = 0, m = on.length; j < m; ++j) {
+      if ((o = on[j]).type === typename.type && o.name === typename.name) {
+        this.removeEventListener(o.type, o.listener, o.options);
+        this.addEventListener(o.type, o.listener = listener, o.options = options);
+        o.value = value;
+        return;
+      }
+    }
+    this.addEventListener(typename.type, listener, options);
+    o = {type: typename.type, name: typename.name, value: value, listener: listener, options: options};
+    if (!on) this.__on = [o];
+    else on.push(o);
+  };
+}
 
-  // trim before proceeding.
-  // This is to support parse stuff like "  http://foo.com  \n"
-  rest = rest.trim();
+function selection_on$1(typename, value, options) {
+  var typenames = parseTypenames$1(typename + ""), i, n = typenames.length, t;
 
-  if (!slashesDenoteHost && url.split('#').length === 1) {
-    // Try fast path regexp
-    var simplePath = simplePathPattern.exec(rest);
-    if (simplePath) {
-      this.path = rest;
-      this.href = rest;
-      this.pathname = simplePath[1];
-      if (simplePath[2]) {
-        this.search = simplePath[2];
-        if (parseQueryString) {
-          this.query = querystring.parse(this.search.substr(1));
-        } else {
-          this.query = this.search.substr(1);
+  if (arguments.length < 2) {
+    var on = this.node().__on;
+    if (on) for (var j = 0, m = on.length, o; j < m; ++j) {
+      for (i = 0, o = on[j]; i < n; ++i) {
+        if ((t = typenames[i]).type === o.type && t.name === o.name) {
+          return o.value;
         }
-      } else if (parseQueryString) {
-        this.search = '';
-        this.query = {};
       }
-      return this;
     }
+    return;
   }
 
-  var proto = protocolPattern.exec(rest);
-  if (proto) {
-    proto = proto[0];
-    var lowerProto = proto.toLowerCase();
-    this.protocol = lowerProto;
-    rest = rest.substr(proto.length);
-  }
+  on = value ? onAdd$1 : onRemove$1;
+  for (i = 0; i < n; ++i) this.each(on(typenames[i], value, options));
+  return this;
+}
 
-  // figure out if it's got a host
-  // user@server is *always* interpreted as a hostname, and url
-  // resolution will treat //foo/bar as host=foo,path=bar because that's
-  // how the browser resolves relative URLs.
-  if (slashesDenoteHost || proto || rest.match(/^\/\/[^@\/]+@[^@\/]+/)) {
-    var slashes = rest.substr(0, 2) === '//';
-    if (slashes && !(proto && hostlessProtocol[proto])) {
-      rest = rest.substr(2);
-      this.slashes = true;
-    }
+function dispatchEvent$1(node, type, params) {
+  var window = defaultView$1(node),
+      event = window.CustomEvent;
+
+  if (typeof event === "function") {
+    event = new event(type, params);
+  } else {
+    event = window.document.createEvent("Event");
+    if (params) event.initEvent(type, params.bubbles, params.cancelable), event.detail = params.detail;
+    else event.initEvent(type, false, false);
   }
 
-  if (!hostlessProtocol[proto] &&
-      (slashes || (proto && !slashedProtocol[proto]))) {
+  node.dispatchEvent(event);
+}
 
-    // there's a hostname.
-    // the first instance of /, ?, ;, or # ends the host.
-    //
-    // If there is an @ in the hostname, then non-host chars *are* allowed
-    // to the left of the last @ sign, unless some host-ending character
-    // comes *before* the @-sign.
-    // URLs are obnoxious.
-    //
-    // ex:
-    // http://a@b@c/ => user:a@b host:c
-    // http://a@b?@c => user:a host:c path:/?@c
+function dispatchConstant$1(type, params) {
+  return function() {
+    return dispatchEvent$1(this, type, params);
+  };
+}
 
-    // v0.12 TODO(isaacs): This is not quite how Chrome does things.
-    // Review our test case against browsers more comprehensively.
+function dispatchFunction$1(type, params) {
+  return function() {
+    return dispatchEvent$1(this, type, params.apply(this, arguments));
+  };
+}
 
-    // find the first instance of any hostEndingChars
-    var hostEnd = -1;
-    for (var i = 0; i < hostEndingChars.length; i++) {
-      var hec = rest.indexOf(hostEndingChars[i]);
-      if (hec !== -1 && (hostEnd === -1 || hec < hostEnd))
-        hostEnd = hec;
+function selection_dispatch$1(type, params) {
+  return this.each((typeof params === "function"
+      ? dispatchFunction$1
+      : dispatchConstant$1)(type, params));
+}
+
+function* selection_iterator$1() {
+  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
+      if (node = group[i]) yield node;
     }
+  }
+}
 
-    // at this point, either we have an explicit point where the
-    // auth portion cannot go past, or the last @ char is the decider.
-    var auth, atSign;
-    if (hostEnd === -1) {
-      // atSign can be anywhere.
-      atSign = rest.lastIndexOf('@');
-    } else {
-      // atSign must be in auth portion.
-      // http://a@b/c@d => host:b auth:a path:/c@d
-      atSign = rest.lastIndexOf('@', hostEnd);
-    }
-
-    // Now we have a portion which is definitely the auth.
-    // Pull that off.
-    if (atSign !== -1) {
-      auth = rest.slice(0, atSign);
-      rest = rest.slice(atSign + 1);
-      this.auth = decodeURIComponent(auth);
-    }
+var root$1 = [null];
 
-    // the host is the remaining to the left of the first non-host char
-    hostEnd = -1;
-    for (var i = 0; i < nonHostChars.length; i++) {
-      var hec = rest.indexOf(nonHostChars[i]);
-      if (hec !== -1 && (hostEnd === -1 || hec < hostEnd))
-        hostEnd = hec;
-    }
-    // if we still have not hit it, then the entire thing is a host.
-    if (hostEnd === -1)
-      hostEnd = rest.length;
+function Selection$1(groups, parents) {
+  this._groups = groups;
+  this._parents = parents;
+}
 
-    this.host = rest.slice(0, hostEnd);
-    rest = rest.slice(hostEnd);
+function selection_selection$1() {
+  return this;
+}
 
-    // pull out port.
-    this.parseHost();
+Selection$1.prototype = {
+  constructor: Selection$1,
+  select: selection_select$1,
+  selectAll: selection_selectAll$1,
+  selectChild: selection_selectChild$1,
+  selectChildren: selection_selectChildren$1,
+  filter: selection_filter$1,
+  data: selection_data$1,
+  enter: selection_enter$1,
+  exit: selection_exit$1,
+  join: selection_join$1,
+  merge: selection_merge$1,
+  selection: selection_selection$1,
+  order: selection_order$1,
+  sort: selection_sort$1,
+  call: selection_call$1,
+  nodes: selection_nodes$1,
+  node: selection_node$1,
+  size: selection_size$1,
+  empty: selection_empty$1,
+  each: selection_each$1,
+  attr: selection_attr$1,
+  style: selection_style$1,
+  property: selection_property$1,
+  classed: selection_classed$1,
+  text: selection_text$1,
+  html: selection_html$1,
+  raise: selection_raise$1,
+  lower: selection_lower$1,
+  append: selection_append$1,
+  insert: selection_insert$1,
+  remove: selection_remove$1,
+  clone: selection_clone$1,
+  datum: selection_datum$1,
+  on: selection_on$1,
+  dispatch: selection_dispatch$1,
+  [Symbol.iterator]: selection_iterator$1
+};
 
-    // we've indicated that there is a hostname,
-    // so even if it's empty, it has to be present.
-    this.hostname = this.hostname || '';
+function select$1(selector) {
+  return typeof selector === "string"
+      ? new Selection$1([[document.querySelector(selector)]], [document.documentElement])
+      : new Selection$1([[selector]], root$1);
+}
 
-    // if hostname begins with [ and ends with ]
-    // assume that it's an IPv6 address.
-    var ipv6Hostname = this.hostname[0] === '[' &&
-        this.hostname[this.hostname.length - 1] === ']';
+class SVGInteractor {
+  /**
+   * A class used to illustrate state of the visualization on the main thread such as
+   * selection or axis.
+   *
+   * @param {SVGElement} svg container for all svg elements
+   */
+  constructor(
+    svg,
+    labelClickHandler,
+    labelMouseOverHandler,
+    labelMouseOutHandler
+  ) {
+    this.labelClickHandler = labelClickHandler;
+    this.labelMouseOverHandler = labelMouseOverHandler;
+    this.labelMouseOutHandler = labelMouseOutHandler;
+    this.svg = svg;
+    this.d3SVG = select$1(this.svg);
+    this.svg.style.width = "100%";
+    this.svg.style.height = "100%";
+    this.svg.style.position = "absolute";
+    this.svg.style.pointerEvents = "none";
+    this.svg.style.overflow = "visible";
 
-    // validate a little.
-    if (!ipv6Hostname) {
-      var hostparts = this.hostname.split(/\./);
-      for (var i = 0, l = hostparts.length; i < l; i++) {
-        var part = hostparts[i];
-        if (!part) continue;
-        if (!part.match(hostnamePartPattern)) {
-          var newpart = '';
-          for (var j = 0, k = part.length; j < k; j++) {
-            if (part.charCodeAt(j) > 127) {
-              // we replace non-ASCII char with a temporary placeholder
-              // we need this to make sure size of hostname is not
-              // broken by replacing non-ASCII by nothing
-              newpart += 'x';
-            } else {
-              newpart += part[j];
-            }
-          }
-          // we test again with ASCII char only
-          if (!newpart.match(hostnamePartPattern)) {
-            var validParts = hostparts.slice(0, i);
-            var notHost = hostparts.slice(i + 1);
-            var bit = part.match(hostnamePartStart);
-            if (bit) {
-              validParts.push(bit[1]);
-              notHost.unshift(bit[2]);
-            }
-            if (notHost.length) {
-              rest = '/' + notHost.join('.') + rest;
-            }
-            this.hostname = validParts.join('.');
-            break;
-          }
-        }
-      }
-    }
+    this._selectMarker = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "polygon"
+    );
+    this._selectMarker.setAttribute("fill", "rgba(124, 124, 247, 0.3)");
+    this._selectMarker.setAttribute("stroke", "rgb(136, 128, 247)");
+    this._selectMarker.setAttribute("stroke-width", 1);
+    this._selectMarker.setAttribute("stroke-dasharray", "5,5");
 
-    if (this.hostname.length > hostnameMaxLen) {
-      this.hostname = '';
-    } else {
-      // hostnames are always lower case.
-      this.hostname = this.hostname.toLowerCase();
-    }
+    this._labelMarker = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "g"
+    );
+  }
 
-    if (!ipv6Hostname) {
-      // IDNA Support: Returns a punycoded representation of "domain".
-      // It only converts parts of the domain name that
-      // have non-ASCII characters, i.e. it doesn't matter if
-      // you call it with a domain that already is ASCII-only.
-      this.hostname = punycode.toASCII(this.hostname);
-    }
+  /**
+   * Set the specification for this class to refer to.
+   *
+   * @param {Object} specification
+   */
+  setSpecification(specification) {
+    this.specification = specification;
 
-    var p = this.port ? ':' + this.port : '';
-    var h = this.hostname || '';
-    this.host = h + p;
-    this.href += this.host;
+    const styles = getDimAndMarginStyleForSpecification(specification);
+    this.svg.style.width = styles.width;
+    this.svg.style.height = styles.height;
+    this.svg.style.margin = styles.margin;
+    this.svg.style.cursor = "default"; // or "none"
 
-    // strip [ and ] from the hostname
-    // the host field still retains them, though
-    if (ipv6Hostname) {
-      this.hostname = this.hostname.substr(1, this.hostname.length - 2);
-      if (rest[0] !== '/') {
-        rest = '/' + rest;
-      }
+    this.initialX = undefined; // used for updating labels
+    this.initialY = undefined;
+    select$1(this._labelMarker).selectAll("*").remove();
+    for (const _ of this.specification.labels || []) {
+      select$1(this._labelMarker).append("text");
     }
   }
 
-  // now rest is set to the post-host stuff.
-  // chop off any delim chars.
-  if (!unsafeProtocol[lowerProto]) {
+  /**
+   * Add svg elements to the DOM
+   */
+  init() {
+    this.svg.appendChild(this._selectMarker);
+    this.svg.appendChild(this._labelMarker);
+    this.xAxisAnchor = this.d3SVG.append("g");
+    this.yAxisAnchor = this.d3SVG.append("g");
+  }
 
-    // First, make 100% sure that any "autoEscape" chars get
-    // escaped, even if encodeURIComponent doesn't think they
-    // need to be.
-    for (var i = 0, l = autoEscape.length; i < l; i++) {
-      var ae = autoEscape[i];
-      if (rest.indexOf(ae) === -1)
-        continue;
-      var esc = encodeURIComponent(ae);
-      if (esc === ae) {
-        esc = escape(ae);
+  /**
+   * Update the svg using the new viewport information
+   * @param {Array} currentXRange of mousereader
+   * @param {Array} currentYRange of mousereader
+   * @param {Number} width of mousereader
+   * @param {Number} height of mousereader
+   */
+  updateView(currentXRange, currentYRange, width, height) {
+    this.currentXRange = currentXRange;
+    this.currentYRange = currentYRange;
+    this.width = width;
+    this.height = height;
+
+    if (this.currentXRange) {
+      this.xAxis = this._calculateAxis(
+        "x",
+        this.specification.xAxis,
+        this.specification,
+        getScaleForSpecification("x", this.specification),
+        this.xAxisAnchor
+      );
+
+      if (this.specification.labels) {
+        this.updateLabels();
       }
-      rest = rest.split(ae).join(esc);
     }
-  }
 
+    if (this.xAxis) {
+      this.xAxisAnchor.call(this.xAxis);
+    }
 
-  // chop off from the tail first.
-  var hash = rest.indexOf('#');
-  if (hash !== -1) {
-    // got a fragment string.
-    this.hash = rest.substr(hash);
-    rest = rest.slice(0, hash);
-  }
-  var qm = rest.indexOf('?');
-  if (qm !== -1) {
-    this.search = rest.substr(qm);
-    this.query = rest.substr(qm + 1);
-    if (parseQueryString) {
-      this.query = querystring.parse(this.query);
+    if (this.currentYRange) {
+      this.yAxis = this._calculateAxis(
+        "y",
+        this.specification.yAxis,
+        this.specification,
+        getScaleForSpecification("y", this.specification),
+        this.yAxisAnchor
+      );
     }
-    rest = rest.slice(0, qm);
-  } else if (parseQueryString) {
-    // no query string, but parseQueryString still requested
-    this.search = '';
-    this.query = {};
-  }
-  if (rest) this.pathname = rest;
-  if (slashedProtocol[lowerProto] &&
-      this.hostname && !this.pathname) {
-    this.pathname = '/';
-  }
-
-  //to support http.request
-  if (this.pathname || this.search) {
-    var p = this.pathname || '';
-    var s = this.search || '';
-    this.path = p + s;
-  }
-
-  // finally, reconstruct the href based on what has been validated.
-  this.href = this.format();
-  return this;
-};
-
-// format a parsed object into a url string
-function urlFormat(obj) {
-  // ensure it's an object, and not a string url.
-  // If it's an obj, this is a no-op.
-  // this way, you can call url_format() on strings
-  // to clean up potentially wonky urls.
-  if (util.isString(obj)) obj = urlParse(obj);
-  if (!(obj instanceof Url)) return Url.prototype.format.call(obj);
-  return obj.format();
-}
 
-Url.prototype.format = function() {
-  var auth = this.auth || '';
-  if (auth) {
-    auth = encodeURIComponent(auth);
-    auth = auth.replace(/%3A/i, ':');
-    auth += '@';
+    if (this.yAxis) {
+      this.yAxisAnchor.call(this.yAxis);
+    }
   }
 
-  var protocol = this.protocol || '',
-      pathname = this.pathname || '',
-      hash = this.hash || '',
-      host = false,
-      query = '';
-
-  if (this.host) {
-    host = auth + this.host;
-  } else if (this.hostname) {
-    host = auth + (this.hostname.indexOf(':') === -1 ?
-        this.hostname :
-        '[' + this.hostname + ']');
-    if (this.port) {
-      host += ':' + this.port;
+  updateLabels() {
+    if (!this.initialX && this.specification.labels) {
+      this.initialX = this.specification.labels.map(
+        (label) => this._calculateViewportSpotInverse(label.x, label.y)[0]
+      );
+    }
+    if (!this.initialY && this.specification.labels) {
+      this.initialY = this.specification.labels.map(
+        (label) => this._calculateViewportSpotInverse(label.x, label.y)[1]
+      );
     }
-  }
 
-  if (this.query &&
-      util.isObject(this.query) &&
-      Object.keys(this.query).length) {
-    query = querystring.stringify(this.query);
-  }
+    const svgNode = this.d3SVG.node();
+    const svgRect = svgNode.getBoundingClientRect();
+    const svgWidth = svgRect.width;
+    const svgHeight = svgRect.height;
 
-  var search = this.search || (query && ('?' + query)) || '';
+    const labels = select$1(this._labelMarker)
+      .selectAll("text")
+      .data(this.specification.labels);
+    labels
+      .enter()
+      .append("text")
+      .merge(labels) // Updates both existing and new nodes
+      .text((d) => d.text)
+      .attr("style", "pointer-events: bounding-box") // Add this line to make the labels respond to pointer events
+      .style("user-select", "none") // add this line
+      .on("click", (event, d) => {
+        const clickedIndex = select$1(this._labelMarker)
+          .selectAll("text")
+          .nodes()
+          .indexOf(event.currentTarget);
 
-  if (protocol && protocol.substr(-1) !== ':') protocol += ':';
+        this.labelClickHandler({
+          label: d.text,
+          index: clickedIndex,
+          labelObject: d,
+          event,
+        });
+      })
+      .on("mouseover", (event, d) => {
+        const hoveredIndex = select$1(this._labelMarker)
+          .selectAll("text")
+          .nodes()
+          .indexOf(event.currentTarget);
 
-  // only the slashedProtocols get the //.  Not mailto:, xmpp:, etc.
-  // unless they had them to begin with.
-  if (this.slashes ||
-      (!protocol || slashedProtocol[protocol]) && host !== false) {
-    host = '//' + (host || '');
-    if (pathname && pathname.charAt(0) !== '/') pathname = '/' + pathname;
-  } else if (!host) {
-    host = '';
-  }
+        this.labelMouseOverHandler({
+          label: d.text,
+          index: hoveredIndex,
+          labelObject: d,
+          groupNode: this._labelMarker,
+          event,
+        });
+      })
+      .on("mouseout", (event, d) => {
+        const hoveredIndex = select$1(this._labelMarker)
+          .selectAll("text")
+          .nodes()
+          .indexOf(event.currentTarget);
 
-  if (hash && hash.charAt(0) !== '#') hash = '#' + hash;
-  if (search && search.charAt(0) !== '?') search = '?' + search;
+        this.labelMouseOutHandler({
+          label: d.text,
+          index: hoveredIndex,
+          labelObject: d,
+          groupNode: this._labelMarker,
+          event,
+        });
+      })
+      .attr("x", (d, i, nodes) => {
+        if (d.fixedX) {
+          return this.initialX[i];
+        }
 
-  pathname = pathname.replace(/[?#]/g, function(match) {
-    return encodeURIComponent(match);
-  });
-  search = search.replace('#', '%23');
+        const xPos = this._calculateViewportSpotInverse(d.x, d.y)[0];
 
-  return protocol + host + pathname + search + hash;
-};
+        if (xPos < 0 || xPos > svgWidth) {
+          select$1(nodes[i]).remove();
+        } else {
+          return xPos;
+        }
+      })
+      .attr("y", (d, i, nodes) => {
+        if (d.fixedY) {
+          return this.initialY[i];
+        }
 
-function urlResolve(source, relative) {
-  return urlParse(source, false, true).resolve(relative);
-}
+        const yPos = this._calculateViewportSpotInverse(d.x, d.y)[1];
 
-Url.prototype.resolve = function(relative) {
-  return this.resolveObject(urlParse(relative, false, true)).format();
-};
+        if (yPos < 0 || yPos > svgHeight) {
+          select$1(nodes[i]).remove();
+        } else {
+          return yPos;
+        }
+      })
+      .each((d, i, nodes) => {
+        const xPos = d.fixedX
+          ? this.initialX[i]
+          : this._calculateViewportSpotInverse(d.x, d.y)[0];
+        const yPos = d.fixedY
+          ? this.initialY[i]
+          : this._calculateViewportSpotInverse(d.x, d.y)[1];
 
-function urlResolveObject(source, relative) {
-  if (!source) return relative;
-  return urlParse(source, false, true).resolveObject(relative);
-}
+        // Check if the 'transformRotate' property exists
+        if (d.transformRotate) {
+          select$1(nodes[i]).attr(
+            "transform",
+            `rotate(${d.transformRotate}, ${xPos}, ${yPos})`
+          );
+        }
+      })
+      .each(function (d) {
+        // Set any possible svg properties specified in label
+        for (const property in d) {
+          if (
+            ["x", "y", "text", "transformRotate", "type", "index"].includes(
+              property
+            )
+          ) {
+            continue;
+          }
+          select$1(this).attr(property, d[property]);
+        }
+      });
 
-Url.prototype.resolveObject = function(relative) {
-  if (util.isString(relative)) {
-    var rel = new Url();
-    rel.parse(relative, false, true);
-    relative = rel;
+    // Remove any old labels
+    labels.exit().remove();
   }
 
-  var result = new Url();
-  var tkeys = Object.keys(this);
-  for (var tk = 0; tk < tkeys.length; tk++) {
-    var tkey = tkeys[tk];
-    result[tkey] = this[tkey];
-  }
+  _calculateAxis(dimension, orientation, specification, genomeScale, anchor) {
+    let axis, domain, range;
+    if (dimension === "x") {
+      domain = this.currentXRange;
+      range = [0, this.width];
+      switch (orientation) {
+        case "none":
+          anchor.attr("transform", `translate(-1000000, -1000000)`);
+          return null;
+        case "top":
+          axis = axisTop();
+          anchor.attr("transform", `translate(0, 0)`);
+          break;
+        case "center":
+          axis = axisBottom();
+          anchor.attr("transform", `translate(0, ${this.height / 2})`);
+          break;
+        case "zero":
+          const yScale = linear$2()
+            .domain(this.currentYRange)
+            .range([this.height, 0]);
 
-  // hash is always overridden, no matter what.
-  // even href="" will remove it.
-  result.hash = relative.hash;
+          axis = axisBottom();
+          anchor.attr("transform", `translate(0, ${yScale(0)})`);
+          break;
+        case "bottom":
+        default:
+          axis = axisBottom();
+          anchor.attr("transform", `translate(0, ${this.height})`);
+          break;
+      }
+    }
 
-  // if the relative url is empty, then there's nothing left to do here.
-  if (relative.href === '') {
-    result.href = result.format();
-    return result;
-  }
+    if (dimension === "y") {
+      domain = this.currentYRange;
+      range = [this.height, 0];
+      switch (orientation) {
+        case "none":
+          anchor.attr("transform", `translate(-1000000, -1000000)`);
+          return null;
+        case "center":
+          axis = axisRight();
+          anchor.attr("transform", `translate(${this.width / 2}, 0)`);
+          break;
+        case "right":
+          axis = axisRight();
+          anchor.attr("transform", `translate(${this.width}, 0)`);
+          break;
+        case "zero":
+          const xScale = linear$2()
+            .domain(this.currentXRange)
+            .range([0, this.width]);
 
-  // hrefs like //foo/bar always cut to the protocol.
-  if (relative.slashes && !relative.protocol) {
-    // take everything except the protocol from relative
-    var rkeys = Object.keys(relative);
-    for (var rk = 0; rk < rkeys.length; rk++) {
-      var rkey = rkeys[rk];
-      if (rkey !== 'protocol')
-        result[rkey] = relative[rkey];
+          axis = axisLeft();
+          anchor.attr("transform", `translate(${xScale(0)}, 0)`);
+          break;
+        case "left": // left is default behavior
+        default:
+          axis = axisLeft();
+          anchor.attr("transform", `translate(0, 0)`);
+          break;
+      }
     }
 
-    //urlParse appends trailing / to urls like http://www.example.com
-    if (slashedProtocol[result.protocol] &&
-        result.hostname && !result.pathname) {
-      result.path = result.pathname = '/';
+    let genomic = false;
+    for (const track of specification.tracks) {
+      if (track[dimension].type && track[dimension].type.includes("genomic")) {
+        genomic = true;
+      }
     }
 
-    result.href = result.format();
-    return result;
-  }
-
-  if (relative.protocol && relative.protocol !== result.protocol) {
-    // if it's a known url protocol, then changing
-    // the protocol does weird things
-    // first, if it's not file:, then we MUST have a host,
-    // and if there was a path
-    // to begin with, then we MUST have a path.
-    // if it is file:, then the host is dropped,
-    // because that's known to be hostless.
-    // anything else is assumed to be absolute.
-    if (!slashedProtocol[relative.protocol]) {
-      var keys = Object.keys(relative);
-      for (var v = 0; v < keys.length; v++) {
-        var k = keys[v];
-        result[k] = relative[k];
-      }
-      result.href = result.format();
-      return result;
+    if (!genomic) {
+      return axis.scale(linear$2().domain(domain).range(range));
     }
 
-    result.protocol = relative.protocol;
-    if (!relative.host && !hostlessProtocol[relative.protocol]) {
-      var relPath = (relative.pathname || '').split('/');
-      while (relPath.length && !(relative.host = relPath.shift()));
-      if (!relative.host) relative.host = '';
-      if (!relative.hostname) relative.hostname = '';
-      if (relPath[0] !== '') relPath.unshift('');
-      if (relPath.length < 2) relPath.unshift('');
-      result.pathname = relPath.join('/');
+    let tickInfo;
+    if (dimension === "x") {
+      tickInfo = genomeScale.getTickCoordsAndLabels(domain[0], domain[1]);
     } else {
-      result.pathname = relative.pathname;
-    }
-    result.search = relative.search;
-    result.query = relative.query;
-    result.host = relative.host || '';
-    result.auth = relative.auth;
-    result.hostname = relative.hostname || relative.host;
-    result.port = relative.port;
-    // to support http.request
-    if (result.pathname || result.search) {
-      var p = result.pathname || '';
-      var s = result.search || '';
-      result.path = p + s;
+      tickInfo = genomeScale.getTickCoordsAndLabels(range[0], range[1]);
     }
-    result.slashes = result.slashes || relative.slashes;
-    result.href = result.format();
-    return result;
-  }
 
-  var isSourceAbs = (result.pathname && result.pathname.charAt(0) === '/'),
-      isRelAbs = (
-          relative.host ||
-          relative.pathname && relative.pathname.charAt(0) === '/'
-      ),
-      mustEndAbs = (isRelAbs || isSourceAbs ||
-                    (result.host && relative.pathname)),
-      removeAllDots = mustEndAbs,
-      srcPath = result.pathname && result.pathname.split('/') || [],
-      relPath = relative.pathname && relative.pathname.split('/') || [],
-      psychotic = result.protocol && !slashedProtocol[result.protocol];
+    return axis
+      .scale(linear$2().domain(domain).range(range))
+      .tickValues(tickInfo.tickCoords)
+      .tickFormat((_, index) => tickInfo.tickLabels[index]);
+  }
 
-  // if the url is a non-slashed url, then relative
-  // links like ../.. should be able
-  // to crawl up to the hostname, as well.  This is strange.
-  // result.protocol has already been set by now.
-  // Later on, put the first path part into the host field.
-  if (psychotic) {
-    result.hostname = '';
-    result.port = null;
-    if (result.host) {
-      if (srcPath[0] === '') srcPath[0] = result.host;
-      else srcPath.unshift(result.host);
-    }
-    result.host = '';
-    if (relative.protocol) {
-      relative.hostname = null;
-      relative.port = null;
-      if (relative.host) {
-        if (relPath[0] === '') relPath[0] = relative.host;
-        else relPath.unshift(relative.host);
-      }
-      relative.host = null;
+  /**
+   * Updates user selection view if they have selected a box
+   */
+  _updateBoxSelectView(points) {
+    if (points.length !== 4) {
+      return;
     }
-    mustEndAbs = mustEndAbs && (relPath[0] === '' || srcPath[0] === '');
+
+    const topLeftCorner = this._calculateViewportSpotInverse(
+      points[0],
+      points[1]
+    );
+
+    const bottomRightCorner = this._calculateViewportSpotInverse(
+      points[2],
+      points[3]
+    );
+
+    let pointAttr = `${topLeftCorner[0]},${topLeftCorner[1]} 
+                     ${topLeftCorner[0]},${bottomRightCorner[1]}, 
+                     ${bottomRightCorner[0]},${bottomRightCorner[1]}
+                     ${bottomRightCorner[0]},${topLeftCorner[1]}
+                     `;
+
+    this._selectMarker.setAttribute("points", pointAttr);
   }
 
-  if (isRelAbs) {
-    // it's absolute.
-    result.host = (relative.host || relative.host === '') ?
-                  relative.host : result.host;
-    result.hostname = (relative.hostname || relative.hostname === '') ?
-                      relative.hostname : result.hostname;
-    result.search = relative.search;
-    result.query = relative.query;
-    srcPath = relPath;
-    // fall through to the dot-handling below.
-  } else if (relPath.length) {
-    // it's relative
-    // throw away the existing file, and take the new path instead.
-    if (!srcPath) srcPath = [];
-    srcPath.pop();
-    srcPath = srcPath.concat(relPath);
-    result.search = relative.search;
-    result.query = relative.query;
-  } else if (!util.isNullOrUndefined(relative.search)) {
-    // just pull out the search.
-    // like href='?foo'.
-    // Put this after the other two cases because it simplifies the booleans
-    if (psychotic) {
-      result.hostname = result.host = srcPath.shift();
-      //occationaly the auth can get stuck only in host
-      //this especially happens in cases like
-      //url.resolveObject('mailto:local1@domain1', 'local2@domain2')
-      var authInHost = result.host && result.host.indexOf('@') > 0 ?
-                       result.host.split('@') : false;
-      if (authInHost) {
-        result.auth = authInHost.shift();
-        result.host = result.hostname = authInHost.shift();
-      }
+  /**
+   * Update the selection box/lasso with the points as bounds
+   *
+   * @param {Array} points 1D array of coordinates that are used for selection ex. [x1,y1,x2,y2,...]
+   */
+  updateSelectView(points) {
+    if (points.length === 4) {
+      this._updateBoxSelectView(points);
+      return;
     }
-    result.search = relative.search;
-    result.query = relative.query;
-    //to support http.request
-    if (!util.isNull(result.pathname) || !util.isNull(result.search)) {
-      result.path = (result.pathname ? result.pathname : '') +
-                    (result.search ? result.search : '');
+    if (points.length < 6) {
+      this._selectMarker.setAttribute("points", "");
+      return;
     }
-    result.href = result.format();
-    return result;
-  }
 
-  if (!srcPath.length) {
-    // no path at all.  easy.
-    // we've already handled the other stuff above.
-    result.pathname = null;
-    //to support http.request
-    if (result.search) {
-      result.path = '/' + result.search;
-    } else {
-      result.path = null;
+    let pointAttr = "";
+    for (let i = 0; i < points.length; i += 2) {
+      const asCanvasPoint = this._calculateViewportSpotInverse(
+        points[i],
+        points[i + 1]
+      );
+      pointAttr += `${asCanvasPoint[0]}, ${asCanvasPoint[1]} `;
     }
-    result.href = result.format();
-    return result;
-  }
 
-  // if a url ENDs in . or .., then it must get a trailing slash.
-  // however, if it ends in anything else non-slashy,
-  // then it must NOT get a trailing slash.
-  var last = srcPath.slice(-1)[0];
-  var hasTrailingSlash = (
-      (result.host || relative.host || srcPath.length > 1) &&
-      (last === '.' || last === '..') || last === '');
+    this._selectMarker.setAttribute("points", pointAttr);
+  }
 
-  // strip single dots, resolve double dots to parent dir
-  // if the path tries to go above the root, `up` ends up > 0
-  var up = 0;
-  for (var i = srcPath.length; i >= 0; i--) {
-    last = srcPath[i];
-    if (last === '.') {
-      srcPath.splice(i, 1);
-    } else if (last === '..') {
-      srcPath.splice(i, 1);
-      up++;
-    } else if (up) {
-      srcPath.splice(i, 1);
-      up--;
-    }
-  }
-
-  // if the path is allowed to go above the root, restore leading ..s
-  if (!mustEndAbs && !removeAllDots) {
-    for (; up--; up) {
-      srcPath.unshift('..');
-    }
-  }
-
-  if (mustEndAbs && srcPath[0] !== '' &&
-      (!srcPath[0] || srcPath[0].charAt(0) !== '/')) {
-    srcPath.unshift('');
-  }
-
-  if (hasTrailingSlash && (srcPath.join('/').substr(-1) !== '/')) {
-    srcPath.push('');
-  }
-
-  var isAbsolute = srcPath[0] === '' ||
-      (srcPath[0] && srcPath[0].charAt(0) === '/');
+  /**
+   * Calculate the location on the canvas a real coordniate corresponds to.
+   *
+   * @param {Float} viewportX x coordinate of data space
+   * @param {Float} viewportY y coordniate of data space
+   * @returns canvas coordindate as array
+   */
+  _calculateViewportSpotInverse(viewportX, viewportY) {
+    const inverseScaleX = scale(this.currentXRange, [0, this.width]);
+    // Flipped for Y since canvas using typical graphics coordinates but GPU clipspace is typical cartesian coordinates
+    const inverseScaleY = scale(this.currentYRange, [this.height, 0]);
 
-  // put the host back
-  if (psychotic) {
-    result.hostname = result.host = isAbsolute ? '' :
-                                    srcPath.length ? srcPath.shift() : '';
-    //occationaly the auth can get stuck only in host
-    //this especially happens in cases like
-    //url.resolveObject('mailto:local1@domain1', 'local2@domain2')
-    var authInHost = result.host && result.host.indexOf('@') > 0 ?
-                     result.host.split('@') : false;
-    if (authInHost) {
-      result.auth = authInHost.shift();
-      result.host = result.hostname = authInHost.shift();
-    }
+    return [inverseScaleX(viewportX), inverseScaleY(viewportY)];
   }
 
-  mustEndAbs = mustEndAbs || (result.host && srcPath.length);
-
-  if (mustEndAbs && !isAbsolute) {
-    srcPath.unshift('');
+  /**
+   * Clears the polygon selection on the visualization
+   */
+  clear() {
+    this._selectMarker.setAttribute("points", "");
   }
+}
 
-  if (!srcPath.length) {
-    result.pathname = null;
-    result.path = null;
-  } else {
-    result.pathname = srcPath.join('/');
-  }
+const SELECT_THRESHOLD = 30;
 
-  //to support request.http
-  if (!util.isNull(result.pathname) || !util.isNull(result.search)) {
-    result.path = (result.pathname ? result.pathname : '') +
-                  (result.search ? result.search : '');
+/**
+ * event.layerX and event.layerY are deprecated. We will use them if they are on the event, but
+ * if not we will use a manual calculation.
+ *
+ * @param {Event} event
+ * @returns layerX and layerY, coordinates of event with origin at top right corner of bounding box
+ */
+const getLayerXandYFromEvent = (event) => {
+  if (event.layerX !== undefined && event.layerY !== undefined) {
+    return [event.layerX, event.layerY];
   }
-  result.auth = relative.auth || result.auth;
-  result.slashes = result.slashes || relative.slashes;
-  result.href = result.format();
-  return result;
+  const bbox = event.target.getBoundingClientRect();
+  const x = event.clientX - bbox.left;
+  const y = event.clientY - bbox.top;
+  return [x, y];
 };
 
-Url.prototype.parseHost = function() {
-  var host = this.host;
-  var port = portPattern.exec(host);
-  if (port) {
-    port = port[0];
-    if (port !== ':') {
-      this.port = port.substr(1);
-    }
-    host = host.substr(0, host.length - port.length);
-  }
-  if (host) this.hostname = host;
-};
+class MouseReader {
+  /**
+   *
+   * @param {HTMLElement} element meant to read mouse events, necessary since OffscreenCanvas cannot read DOM events
+   * @param {WebGLVis} handler WebGLVis that is using this mousereader
+   */
+  constructor(element, handler) {
+    this.element = element;
+    this.element.style.position = "absolute";
+    this.element.style.width = "100%";
+    this.element.style.height = "100%";
 
-var helpers$3 = {};
+    this.handler = handler;
 
-var uri = url;
+    this._currentSelectionPoints = [];
 
-var ValidationError = helpers$3.ValidationError = function ValidationError (message, instance, schema, path, name, argument) {
-  if(Array.isArray(path)){
-    this.path = path;
-    this.property = path.reduce(function(sum, item){
-      return sum + makeSuffix(item);
-    }, 'instance');
-  }else if(path !== undefined){
-    this.property = path;
-  }
-  if (message) {
-    this.message = message;
-  }
-  if (schema) {
-    var id = schema.$id || schema.id;
-    this.schema = id || schema;
-  }
-  if (instance !== undefined) {
-    this.instance = instance;
-  }
-  this.name = name;
-  this.argument = argument;
-  this.stack = this.toString();
-};
+    this.tool = "pan";
+    this.selectStartPoint = null;
+    this.selectEndPoint = null;
 
-ValidationError.prototype.toString = function toString() {
-  return this.property + ' ' + this.message;
-};
+    // Initializing elements to show user their current selection
+    this.SVGInteractor = new SVGInteractor(
+      document.createElementNS("http://www.w3.org/2000/svg", "svg"),
+      handler.dispatchEvent.bind(handler, "labelClicked"),
+      handler.dispatchEvent.bind(handler, "labelHovered"),
+      handler.dispatchEvent.bind(handler, "labelUnhovered")
+    );
+    this.throttledUpdateSVG = throttleWithRAF(this._updateSVG.bind(this));
+    this.uniDirectionalSelectionEnabled = true;
+  }
 
-var ValidatorResult$2 = helpers$3.ValidatorResult = function ValidatorResult(instance, schema, options, ctx) {
-  this.instance = instance;
-  this.schema = schema;
-  this.options = options;
-  this.path = ctx.path;
-  this.propertyPath = ctx.propertyPath;
-  this.errors = [];
-  this.throwError = options && options.throwError;
-  this.throwFirst = options && options.throwFirst;
-  this.throwAll = options && options.throwAll;
-  this.disableFormat = options && options.disableFormat === true;
-};
+  /**
+   * Set the specification of the mouse reader and the svg interaction
+   * @param {Object} specification
+   */
+  setSpecification(specification) {
+    const styles = getDimAndMarginStyleForSpecification(specification);
+    this.element.style.width = styles.width;
+    this.element.style.height = styles.height;
+    this.element.style.margin = styles.margin;
 
-ValidatorResult$2.prototype.addError = function addError(detail) {
-  var err;
-  if (typeof detail == 'string') {
-    err = new ValidationError(detail, this.instance, this.schema, this.path);
-  } else {
-    if (!detail) throw new Error('Missing error detail');
-    if (!detail.message) throw new Error('Missing error message');
-    if (!detail.name) throw new Error('Missing validator type');
-    err = new ValidationError(detail.message, this.instance, this.schema, this.path, detail.name, detail.argument);
+    this.viewport = getViewportForSpecification(specification);
+    this.SVGInteractor.setSpecification(specification);
+    this._updateSVG();
   }
 
-  this.errors.push(err);
-  if (this.throwFirst) {
-    throw new ValidatorResultError$1(this);
-  }else if(this.throwError){
-    throw err;
-  }
-  return err;
-};
+  /**
+   * Set the viewport in the format mouseReader.viewport = [minX, maxX, minY, maxY].
+   * Mostly used to make WebGLVis.setViewOptions simpler.
+   */
+  set viewport(toSet) {
+    this.minX = toSet[0];
+    this.maxX = toSet[1];
+    this.minY = toSet[2];
+    this.maxY = toSet[3];
 
-ValidatorResult$2.prototype.importErrors = function importErrors(res) {
-  if (typeof res == 'string' || (res && res.validatorType)) {
-    this.addError(res);
-  } else if (res && res.errors) {
-    Array.prototype.push.apply(this.errors, res.errors);
+    this.currentXRange = [this.minX, this.maxX];
+    this.currentYRange = [this.minY, this.maxY];
   }
-};
 
-function stringizer (v,i){
-  return i+': '+v.toString()+'\n';
-}
-ValidatorResult$2.prototype.toString = function toString(res) {
-  return this.errors.map(stringizer).join('');
-};
+  /**
+   * Init the mouse reader by adding its elements to DOM and adding event handlers
+   */
+  init() {
+    this.width = this.element.clientWidth;
+    this.height = this.element.clientHeight;
 
-Object.defineProperty(ValidatorResult$2.prototype, "valid", { get: function() {
-  return !this.errors.length;
-} });
+    this.element.parentElement.appendChild(this.SVGInteractor.svg);
+    this.SVGInteractor.init();
+    this._updateSVG();
 
-helpers$3.ValidatorResultError = ValidatorResultError$1;
-function ValidatorResultError$1(result) {
-  if(Error.captureStackTrace){
-    Error.captureStackTrace(this, ValidatorResultError$1);
-  }
-  this.instance = result.instance;
-  this.schema = result.schema;
-  this.options = result.options;
-  this.errors = result.errors;
-}
-ValidatorResultError$1.prototype = new Error();
-ValidatorResultError$1.prototype.constructor = ValidatorResultError$1;
-ValidatorResultError$1.prototype.name = "Validation Error";
+    this.element.addEventListener("wheel", this._onWheel.bind(this), false);
 
-/**
- * Describes a problem with a Schema which prevents validation of an instance
- * @name SchemaError
- * @constructor
- */
-var SchemaError$2 = helpers$3.SchemaError = function SchemaError (msg, schema) {
-  this.message = msg;
-  this.schema = schema;
-  Error.call(this, msg);
-  Error.captureStackTrace(this, SchemaError);
-};
-SchemaError$2.prototype = Object.create(Error.prototype,
-  {
-    constructor: {value: SchemaError$2, enumerable: false},
-    name: {value: 'SchemaError', enumerable: false},
-  });
-
-var SchemaContext$1 = helpers$3.SchemaContext = function SchemaContext (schema, options, path, base, schemas) {
-  this.schema = schema;
-  this.options = options;
-  if(Array.isArray(path)){
-    this.path = path;
-    this.propertyPath = path.reduce(function(sum, item){
-      return sum + makeSuffix(item);
-    }, 'instance');
-  }else {
-    this.propertyPath = path;
-  }
-  this.base = base;
-  this.schemas = schemas;
-};
-
-SchemaContext$1.prototype.resolve = function resolve (target) {
-  return uri.resolve(this.base, target);
-};
+    let mouseDown = false;
+    this.element.addEventListener(
+      "mousedown",
+      (event) => {
+        mouseDown = true;
+        switch (this.tool) {
+          case "pan":
+            break;
+          case "box":
+          case "boxh":
+          case "boxv":
+          case "lasso":
+            {
+              this._currentSelectionPoints = [
+                ...this._calculateViewportSpot(
+                  ...getLayerXandYFromEvent(event)
+                ),
+              ];
+              this.selectStartPoint = {
+                x: event.clientX,
+                y: event.clientY,
+              };
+              this.selectEndPoint = null;
+            }
 
-SchemaContext$1.prototype.makeChild = function makeChild(schema, propertyName){
-  var path = (propertyName===undefined) ? this.path : this.path.concat([propertyName]);
-  var id = schema.$id || schema.id;
-  var base = uri.resolve(this.base, id||'');
-  var ctx = new SchemaContext$1(schema, this.options, path, base, Object.create(this.schemas));
-  if(id && !ctx.schemas[base]){
-    ctx.schemas[base] = schema;
-  }
-  return ctx;
-};
+            break;
+        }
+      },
+      false
+    );
 
-var FORMAT_REGEXPS = helpers$3.FORMAT_REGEXPS = {
-  'date-time': /^\d{4}-(?:0[0-9]{1}|1[0-2]{1})-(3[01]|0[1-9]|[12][0-9])[tT ](2[0-4]|[01][0-9]):([0-5][0-9]):(60|[0-5][0-9])(\.\d+)?([zZ]|[+-]([0-5][0-9]):(60|[0-5][0-9]))$/,
-  'date': /^\d{4}-(?:0[0-9]{1}|1[0-2]{1})-(3[01]|0[1-9]|[12][0-9])$/,
-  'time': /^(2[0-4]|[01][0-9]):([0-5][0-9]):(60|[0-5][0-9])$/,
+    this.element.addEventListener(
+      "mousemove",
+      (event) => {
+        this.handler.getClosestPoint(
+          this._calculateViewportSpot(...getLayerXandYFromEvent(event))
+        );
+        if (!mouseDown) {
+          return;
+        }
+        switch (this.tool) {
+          case "pan":
+            this._onPan(event);
+            break;
+          case "box":
+          case "boxh":
+          case "boxv":
+            this._currentSelectionPoints = this._currentSelectionPoints
+              .slice(0, 2)
+              .concat(
+                this._calculateViewportSpot(...getLayerXandYFromEvent(event))
+              );
 
-  'email': /^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+@(?:(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!\.)){0,61}[a-zA-Z0-9]?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!$)){0,61}[a-zA-Z0-9]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$/,
-  'ip-address': /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
-  'ipv6': /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/,
+            if (!this.selectStartPoint) {
+              return;
+            }
+            this.selectEndPoint = { x: event.clientX, y: event.clientY };
 
-  // TODO: A more accurate regular expression for "uri" goes:
-  // [A-Za-z][+\-.0-9A-Za-z]*:((/(/((%[0-9A-Fa-f]{2}|[!$&-.0-9;=A-Z_a-z~])+|(\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?)(:\d*)?)?)?#(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*|(/(/((%[0-9A-Fa-f]{2}|[!$&-.0-9;=A-Z_a-z~])+|(\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?)(:\d*)?[/?]|[!$&-.0-;=?-Z_a-z~])|/?%[0-9A-Fa-f]{2}|[!$&-.0-;=?-Z_a-z~])(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*(#(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*)?|/(/((%[0-9A-Fa-f]{2}|[!$&-.0-9;=A-Z_a-z~])+(:\d*)?|(\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?:\d*|\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?)?)?
-  'uri': /^[a-zA-Z][a-zA-Z0-9+-.]*:[^\s]*$/,
-  'uri-reference': /^(((([A-Za-z][+\-.0-9A-Za-z]*(:%[0-9A-Fa-f]{2}|:[!$&-.0-;=?-Z_a-z~]|[/?])|\?)(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*|([A-Za-z][+\-.0-9A-Za-z]*:?)?)|([A-Za-z][+\-.0-9A-Za-z]*:)?\/((%[0-9A-Fa-f]{2}|\/((%[0-9A-Fa-f]{2}|[!$&-.0-9;=A-Z_a-z~])+|(\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?)(:\d*)?[/?]|[!$&-.0-;=?-Z_a-z~])(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*|(\/((%[0-9A-Fa-f]{2}|[!$&-.0-9;=A-Z_a-z~])+|(\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?)(:\d*)?)?))#(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*|(([A-Za-z][+\-.0-9A-Za-z]*)?%[0-9A-Fa-f]{2}|[!$&-.0-9;=@_~]|[A-Za-z][+\-.0-9A-Za-z]*[!$&-*,;=@_~])(%[0-9A-Fa-f]{2}|[!$&-.0-9;=@-Z_a-z~])*((([/?](%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*)?#|[/?])(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*)?|([A-Za-z][+\-.0-9A-Za-z]*(:%[0-9A-Fa-f]{2}|:[!$&-.0-;=?-Z_a-z~]|[/?])|\?)(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*|([A-Za-z][+\-.0-9A-Za-z]*:)?\/((%[0-9A-Fa-f]{2}|\/((%[0-9A-Fa-f]{2}|[!$&-.0-9;=A-Z_a-z~])+|(\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?)(:\d*)?[/?]|[!$&-.0-;=?-Z_a-z~])(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*|\/((%[0-9A-Fa-f]{2}|[!$&-.0-9;=A-Z_a-z~])+(:\d*)?|(\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?:\d*|\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?)?|[A-Za-z][+\-.0-9A-Za-z]*:?)?$/,
+            const diffX = Math.abs(
+              this.selectStartPoint.x - this.selectEndPoint.x
+            );
+            const diffY = Math.abs(
+              this.selectStartPoint.y - this.selectEndPoint.y
+            );
 
-  'color': /^(#?([0-9A-Fa-f]{3}){1,2}\b|aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow|(rgb\(\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*,\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*,\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*\))|(rgb\(\s*(\d?\d%|100%)+\s*,\s*(\d?\d%|100%)+\s*,\s*(\d?\d%|100%)+\s*\)))$/,
+            if (this.lockedX) {
+              this.tool = "boxv";
+            } else if (this.lockedY) {
+              this.tool = "boxh";
+            } else if (diffX <= SELECT_THRESHOLD && diffY > SELECT_THRESHOLD) {
+              this.tool = "boxv";
+            } else if (diffY <= SELECT_THRESHOLD && diffX > SELECT_THRESHOLD) {
+              this.tool = "boxh";
+            } else {
+              this.tool = "box";
+            }
+            if (this.isUniDirectionalSelectionAllowed) {
+              this.handler.dispatchEvent("onSelection", {
+                bounds: getPointsBySelectMode(
+                  this.tool,
+                  this._currentSelectionPoints,
+                  this.currentXRange,
+                  this.currentYRange
+                ),
+                type: this.tool,
+                event: cloneMouseEvent(event),
+              });
+            } else {
+              this.handler.dispatchEvent("onSelection", {
+                bounds: this._currentSelectionPoints,
+                type: this.tool,
+                event: cloneMouseEvent(event),
+              });
+            }
+            break;
+          case "lasso":
+            this._currentSelectionPoints.push(
+              ...this._calculateViewportSpot(...getLayerXandYFromEvent(event))
+            );
+            this.handler.dispatchEvent("onSelection", {
+              bounds: this._currentSelectionPoints,
+              type: this.tool,
+              event: cloneMouseEvent(event),
+            });
+            break;
+        }
+        this._updateSVG();
+      },
+      false
+    );
 
-  // hostname regex from: http://stackoverflow.com/a/1420225/5628
-  'hostname': /^(?=.{1,255}$)[0-9A-Za-z](?:(?:[0-9A-Za-z]|-){0,61}[0-9A-Za-z])?(?:\.[0-9A-Za-z](?:(?:[0-9A-Za-z]|-){0,61}[0-9A-Za-z])?)*\.?$/,
-  'host-name': /^(?=.{1,255}$)[0-9A-Za-z](?:(?:[0-9A-Za-z]|-){0,61}[0-9A-Za-z])?(?:\.[0-9A-Za-z](?:(?:[0-9A-Za-z]|-){0,61}[0-9A-Za-z])?)*\.?$/,
+    this.element.addEventListener("mouseup", (event) => {
+      mouseDown = false;
+      this.selectStartPoint = null;
+      this.selectEndPoint = null;
+      switch (this.tool) {
+        case "pan":
+          break;
+        case "box":
+        case "boxh":
+        case "boxv":
+          if (this._currentSelectionPoints.length !== 4) {
+            this._currentSelectionPoints = [];
+            return;
+          }
+          this._updateSVG();
+          this._onSelect(cloneMouseEvent(event));
+          break;
+        case "lasso":
+          if (this._currentSelectionPoints.length < 6) {
+            this._currentSelectionPoints = [];
+            this._updateSVG();
+            return;
+          }
+          this._onSelect(cloneMouseEvent(event));
+          break;
+      }
+    });
 
-  'alpha': /^[a-zA-Z]+$/,
-  'alphanumeric': /^[a-zA-Z0-9]+$/,
-  'utc-millisec': function (input) {
-    return (typeof input === 'string') && parseFloat(input) === parseInt(input, 10) && !isNaN(input);
-  },
-  'regex': function (input) {
-    var result = true;
-    try {
-      new RegExp(input);
-    } catch (e) {
-      result = false;
-    }
-    return result;
-  },
-  'style': /\s*(.+?):\s*([^;]+);?/,
-  'phone': /^\+(?:[0-9] ?){6,14}[0-9]$/,
-};
+    this.element.addEventListener("mouseleave", () => {
+      switch (this.tool) {
+        case "pan": // Ensures panning does not continue if user leaves canvas
+          mouseDown = false;
+          break;
+      }
+    });
 
-FORMAT_REGEXPS.regexp = FORMAT_REGEXPS.regex;
-FORMAT_REGEXPS.pattern = FORMAT_REGEXPS.regex;
-FORMAT_REGEXPS.ipv4 = FORMAT_REGEXPS['ip-address'];
+    this.element.addEventListener(
+      "dblclick",
+      (event) => {
+        this.handler.getClickPoint(
+          this._calculateViewportSpot(...getLayerXandYFromEvent(event))
+        );
+      },
+      false
+    );
+  }
 
-helpers$3.isFormat = function isFormat (input, format, validator) {
-  if (typeof input === 'string' && FORMAT_REGEXPS[format] !== undefined) {
-    if (FORMAT_REGEXPS[format] instanceof RegExp) {
-      return FORMAT_REGEXPS[format].test(input);
-    }
-    if (typeof FORMAT_REGEXPS[format] === 'function') {
-      return FORMAT_REGEXPS[format](input);
-    }
-  } else if (validator && validator.customFormats &&
-      typeof validator.customFormats[format] === 'function') {
-    return validator.customFormats[format](input);
+  /**
+   * Get current viewport info such as min/max bounds and current ranges
+   *
+   * @returns Current viewport information the mouse reader has calculated
+   */
+  getViewport() {
+    return {
+      minX: this.minX,
+      maxX: this.maxX,
+      minY: this.minY,
+      maxY: this.maxY,
+      xRange: this.currentXRange,
+      yRange: this.currentYRange,
+    };
   }
-  return true;
-};
 
-var makeSuffix = helpers$3.makeSuffix = function makeSuffix (key) {
-  key = key.toString();
-  // This function could be capable of outputting valid a ECMAScript string, but the
-  // resulting code for testing which form to use would be tens of thousands of characters long
-  // That means this will use the name form for some illegal forms
-  if (!key.match(/[.\s\[\]]/) && !key.match(/^[\d]/)) {
-    return '.' + key;
-  }
-  if (key.match(/^\d+$/)) {
-    return '[' + key + ']';
-  }
-  return '[' + JSON.stringify(key) + ']';
-};
+  /**
+   * Method to handle wheel events for zooming in and out of canvas
+   *
+   * @param {WheelEvent} event
+   */
+  _onWheel(event) {
+    event.preventDefault();
 
-helpers$3.deepCompareStrict = function deepCompareStrict (a, b) {
-  if (typeof a !== typeof b) {
-    return false;
-  }
-  if (Array.isArray(a)) {
-    if (!Array.isArray(b)) {
-      return false;
-    }
-    if (a.length !== b.length) {
-      return false;
-    }
-    return a.every(function (v, i) {
-      return deepCompareStrict(a[i], b[i]);
-    });
-  }
-  if (typeof a === 'object') {
-    if (!a || !b) {
-      return a === b;
-    }
-    var aKeys = Object.keys(a);
-    var bKeys = Object.keys(b);
-    if (aKeys.length !== bKeys.length) {
-      return false;
-    }
-    return aKeys.every(function (v) {
-      return deepCompareStrict(a[v], b[v]);
-    });
-  }
-  return a === b;
-};
+    let previousX = null;
+    let previousY = null;
+    if (!this.lockedX) {
+      previousX = [...this.currentXRange]; // ... to avoid aliasing
+      const t = -event.wheelDelta / 1000;
+      const inDataSpace = this._calculateViewportSpot(
+        ...getLayerXandYFromEvent(event)
+      );
+      this.currentXRange[0] =
+        t * inDataSpace[0] + (1 - t) * this.currentXRange[0];
 
-function deepMerger (target, dst, e, i) {
-  if (typeof e === 'object') {
-    dst[i] = deepMerge(target[i], e);
-  } else {
-    if (target.indexOf(e) === -1) {
-      dst.push(e);
+      this.currentXRange[1] =
+        t * inDataSpace[0] + (1 - t) * this.currentXRange[1];
+
+      this.currentXRange[0] = Math.max(this.currentXRange[0], this.minX);
+      this.currentXRange[1] = Math.min(this.currentXRange[1], this.maxX);
     }
-  }
-}
 
-function copyist (src, dst, key) {
-  dst[key] = src[key];
-}
+    if (!this.lockedY) {
+      previousY = [...this.currentYRange];
+      const t = -event.wheelDelta / 1000;
+      const inDataSpace = this._calculateViewportSpot(
+        ...getLayerXandYFromEvent(event)
+      );
 
-function copyistWithDeepMerge (target, src, dst, key) {
-  if (typeof src[key] !== 'object' || !src[key]) {
-    dst[key] = src[key];
-  }
-  else {
-    if (!target[key]) {
-      dst[key] = src[key];
-    } else {
-      dst[key] = deepMerge(target[key], src[key]);
+      this.currentYRange[0] =
+        t * inDataSpace[1] + (1 - t) * this.currentYRange[0];
+      this.currentYRange[1] =
+        t * inDataSpace[1] + (1 - t) * this.currentYRange[1];
+      this.currentYRange[0] = Math.max(this.currentYRange[0], this.minY);
+      this.currentYRange[1] = Math.min(this.currentYRange[1], this.maxY);
     }
-  }
-}
 
-function deepMerge (target, src) {
-  var array = Array.isArray(src);
-  var dst = array && [] || {};
+    if (!this.lockedX || !this.lockedY) {
+      const { xZoomLevel, yZoomLevel } = calculateZoomLevel(this.getViewport());
+      if (
+        !this.lockedX &&
+        (!this._validateXRange() ||
+          (this.maxZoomLevel && this.maxZoomLevel < xZoomLevel))
+      ) {
+        // Zoom in limit
+        this.currentXRange = previousX;
+      }
 
-  if (array) {
-    target = target || [];
-    dst = dst.concat(target);
-    src.forEach(deepMerger.bind(null, target, dst));
-  } else {
-    if (target && typeof target === 'object') {
-      Object.keys(target).forEach(copyist.bind(null, target, dst));
+      if (
+        !this.lockedY &&
+        (!this._validateYRange() ||
+          (this.maxZoomLevel && this.maxZoomLevel < yZoomLevel))
+      ) {
+        // Zoom in limit
+        this.currentYRange = previousY;
+      }
     }
-    Object.keys(src).forEach(copyistWithDeepMerge.bind(null, target, src, dst));
-  }
-
-  return dst;
-}
 
-helpers$3.deepMerge = deepMerge;
+    this.handler.dispatchEvent(event.wheelDelta < 0 ? "zoomIn" : "zoomOut", {
+      viewport: this.getViewport(),
+      zoomLevel: calculateZoomLevel(this.getViewport()),
+      type: this.tool,
+      event: cloneMouseEvent(event),
+    });
 
-/**
- * Validates instance against the provided schema
- * Implements URI+JSON Pointer encoding, e.g. "%7e"="~0"=>"~", "~1"="%2f"=>"/"
- * @param o
- * @param s The path to walk o along
- * @return any
- */
-helpers$3.objectGetPath = function objectGetPath(o, s) {
-  var parts = s.split('/').slice(1);
-  var k;
-  while (typeof (k=parts.shift()) == 'string') {
-    var n = decodeURIComponent(k.replace(/~0/,'~').replace(/~1/g,'/'));
-    if (!(n in o)) return;
-    o = o[n];
+    this.handler.sendDrawerState(this.getViewport());
+    this.throttledUpdateSVG();
   }
-  return o;
-};
 
-function pathEncoder (v) {
-  return '/'+encodeURIComponent(v).replace(/~/g,'%7E');
-}
-/**
- * Accept an Array of property names and return a JSON Pointer URI fragment
- * @param Array a
- * @return {String}
- */
-helpers$3.encodePath = function encodePointer(a){
-  // ~ must be encoded explicitly because hacks
-  // the slash is encoded by encodeURIComponent
-  return a.map(pathEncoder).join('');
-};
+  /**
+   * Method to handle a clicked mouse moving around canvas to pan around canvas.
+   *
+   * @param {MouseEvent} event from "mousemove" event
+   */
+  _onPan(event) {
+    if (!this.lockedX) {
+      const previousX = [...this.currentXRange]; // ... to avoid aliasing
+      const xDampen = (this.currentXRange[1] - this.currentXRange[0]) / 1000;
+      this.currentXRange[0] -= event.movementX * xDampen;
+      this.currentXRange[1] -= event.movementX * xDampen;
+      // this.currentXRange[0] = Math.max(this.currentXRange[0], this.minX);
+      // this.currentXRange[1] = Math.min(this.currentXRange[1], this.maxX);
 
+      if (!this._validateXRange()) {
+        this.currentXRange = previousX;
+      }
+    }
 
-/**
- * Calculate the number of decimal places a number uses
- * We need this to get correct results out of multipleOf and divisibleBy
- * when either figure is has decimal places, due to IEEE-754 float issues.
- * @param number
- * @returns {number}
- */
-helpers$3.getDecimalPlaces = function getDecimalPlaces(number) {
+    if (!this.lockedY) {
+      const previousY = [...this.currentYRange];
+      const yDampen = (this.currentYRange[1] - this.currentYRange[0]) / 1000;
+      this.currentYRange[0] += event.movementY * yDampen;
+      this.currentYRange[1] += event.movementY * yDampen;
+      // this.currentYRange[0] = Math.max(this.currentYRange[0], this.minY);
+      // this.currentYRange[1] = Math.min(this.currentYRange[1], this.maxY);
 
-  var decimalPlaces = 0;
-  if (isNaN(number)) return decimalPlaces;
+      if (!this._validateYRange()) {
+        this.currentYRange = previousY;
+      }
+    }
 
-  if (typeof number !== 'number') {
-    number = Number(number);
+    this.handler.dispatchEvent("pan", {
+      viewport: this.getViewport(),
+      type: this.tool,
+      event: cloneMouseEvent(event),
+    });
+
+    this.handler.sendDrawerState(this.getViewport());
+    this._updateSVG();
   }
 
-  var parts = number.toString().split('e');
-  if (parts.length === 2) {
-    if (parts[1][0] !== '-') {
-      return decimalPlaces;
-    } else {
-      decimalPlaces = Number(parts[1].slice(1));
-    }
+  /**
+   * Checks if this.currentXRange is valid with first element less than second
+   * and if viewport zoom is not above webgl max zoom.
+   *
+   * @return true if range is valid, false otherwise
+   */
+  _validateXRange() {
+    return this.currentXRange[1] >= this.currentXRange[0];
   }
 
-  var decimalParts = parts[0].split('.');
-  if (decimalParts.length === 2) {
-    decimalPlaces += decimalParts[1].length;
+  /**
+   * Checks if this.currentYRange is valid with first element less than second
+   * and if viewport zoom is not above webgl max zoom.
+   *
+   * @return true if range is valid, false otherwise
+   */
+  _validateYRange() {
+    return this.currentYRange[1] >= this.currentYRange[0];
   }
 
-  return decimalPlaces;
-};
+  /**
+   * Updates the DOM component used to show user selection or axis.
+   * Calls methods from SVGInteractor.
+   */
+  _updateSVG() {
+    this.SVGInteractor.updateView(
+      this.currentXRange,
+      this.currentYRange,
+      this.width,
+      this.height
+    );
 
-helpers$3.isSchema = function isSchema(val){
-  return (typeof val === 'object' && val) || (typeof val === 'boolean');
-};
-
-var helpers$2 = helpers$3;
-
-/** @type ValidatorResult */
-var ValidatorResult$1 = helpers$2.ValidatorResult;
-/** @type SchemaError */
-var SchemaError$1 = helpers$2.SchemaError;
-
-var attribute$1 = {};
+    let selectionPoints = this._currentSelectionPoints;
 
-attribute$1.ignoreProperties = {
-  // informative properties
-  'id': true,
-  'default': true,
-  'description': true,
-  'title': true,
-  // arguments to other properties
-  'additionalItems': true,
-  'then': true,
-  'else': true,
-  // special-handled properties
-  '$schema': true,
-  '$ref': true,
-  'extends': true,
-};
+    if (
+      this.isUniDirectionalSelectionAllowed &&
+      (this.tool === "box" || this.tool === "boxh" || this.tool === "boxv")
+    ) {
+      selectionPoints = getPointsBySelectMode(
+        this.tool,
+        this._currentSelectionPoints,
+        this.currentXRange,
+        this.currentYRange
+      );
+    }
 
-/**
- * @name validators
- */
-var validators = attribute$1.validators = {};
+    this.SVGInteractor.updateSelectView(selectionPoints);
+  }
 
-/**
- * Validates whether the instance if of a certain type
- * @param instance
- * @param schema
- * @param options
- * @param ctx
- * @return {ValidatorResult|null}
- */
-validators.type = function validateType (instance, schema, options, ctx) {
-  // Ignore undefined instances
-  if (instance === undefined) {
-    return null;
+  /**
+   * Executes when user has confirmed selection points (typically by releasing mouse)
+   * and calls handler.selectPoints with the points.
+   * @param {MouseEvent} event from the event it is called from
+   */
+  _onSelect(event) {
+    if (
+      (this.tool === "box" || this.tool === "boxh" || this.tool === "boxv") &&
+      this.isUniDirectionalSelectionAllowed
+    ) {
+      this.handler.selectPoints(
+        getPointsBySelectMode(
+          this.tool,
+          this._currentSelectionPoints,
+          this.currentXRange,
+          this.currentYRange
+        ),
+        event
+      );
+    } else this.handler.selectPoints(this._currentSelectionPoints, event);
   }
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  var types = Array.isArray(schema.type) ? schema.type : [schema.type];
-  if (!types.some(this.testType.bind(this, instance, schema, options, ctx))) {
-    var list = types.map(function (v) {
-      if(!v) return;
-      var id = v.$id || v.id;
-      return id ? ('<' + id + '>') : (v+'');
-    });
-    result.addError({
-      name: 'type',
-      argument: list,
-      message: "is not of a type(s) " + list,
-    });
+
+  /**
+   * Calculate the location on the real coordinate space a point on the canvas corresponds to.
+   *
+   * @param {Float} canvasX likely from event.layerX or getLayerXandYFromEvent
+   * @param {Float} canvasY likely from event.layerY or getLayerXandYFromEvent
+   * @returns viewport coordinate as array
+   */
+  _calculateViewportSpot(canvasX, canvasY) {
+    const scaleX = scale([0, this.width], this.currentXRange);
+    // Flipped for Y since canvas using typical graphics coordinates but GPU clipspace is typical cartesian coordinates
+    const scaleY = scale([this.height, 0], this.currentYRange);
+    return [scaleX(canvasX), scaleY(canvasY)];
   }
-  return result;
-};
 
-function testSchemaNoThrow(instance, options, ctx, callback, schema){
-  var throwError = options.throwError;
-  var throwAll = options.throwAll;
-  options.throwError = false;
-  options.throwAll = false;
-  var res = this.validateSchema(instance, schema, options, ctx);
-  options.throwError = throwError;
-  options.throwAll = throwAll;
+  /**
+   * Clears the polygon selection on the visualization
+   */
+  clear() {
+    this._currentSelectionPoints = [];
+    this.SVGInteractor.clear();
+  }
 
-  if (!res.valid && callback instanceof Function) {
-    callback(res);
+  get isUniDirectionalSelectionAllowed() {
+    return this.uniDirectionalSelectionEnabled || this.lockedX || this.lockedY;
   }
-  return res.valid;
 }
 
-/**
- * Validates whether the instance matches some of the given schemas
- * @param instance
- * @param schema
- * @param options
- * @param ctx
- * @return {ValidatorResult|null}
- */
-validators.anyOf = function validateAnyOf (instance, schema, options, ctx) {
-  // Ignore undefined instances
-  if (instance === undefined) {
-    return null;
-  }
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  var inner = new ValidatorResult$1(instance, schema, options, ctx);
-  if (!Array.isArray(schema.anyOf)){
-    throw new SchemaError$1("anyOf must be an array");
-  }
-  if (!schema.anyOf.some(
-    testSchemaNoThrow.bind(
-      this, instance, options, ctx, function(res){inner.importErrors(res);}
-    ))) {
-    var list = schema.anyOf.map(function (v, i) {
-      var id = v.$id || v.id;
-      if(id) return '<' + id + '>';
-      return (v.title && JSON.stringify(v.title)) || (v['$ref'] && ('<' + v['$ref'] + '>')) || '[subschema '+i+']';
-    });
-    if (options.nestedErrors) {
-      result.importErrors(inner);
-    }
-    result.addError({
-      name: 'anyOf',
-      argument: list,
-      message: "is not any of " + list.join(','),
-    });
-  }
-  return result;
-};
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-/**
- * Validates whether the instance matches every given schema
- * @param instance
- * @param schema
- * @param options
- * @param ctx
- * @return {String|null}
- */
-validators.allOf = function validateAllOf (instance, schema, options, ctx) {
-  // Ignore undefined instances
-  if (instance === undefined) {
-    return null;
-  }
-  if (!Array.isArray(schema.allOf)){
-    throw new SchemaError$1("allOf must be an array");
-  }
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  var self = this;
-  schema.allOf.forEach(function(v, i){
-    var valid = self.validateSchema(instance, v, options, ctx);
-    if(!valid.valid){
-      var id = v.$id || v.id;
-      var msg = id || (v.title && JSON.stringify(v.title)) || (v['$ref'] && ('<' + v['$ref'] + '>')) || '[subschema '+i+']';
-      result.addError({
-        name: 'allOf',
-        argument: { id: msg, length: valid.errors.length, valid: valid },
-        message: 'does not match allOf schema ' + msg + ' with ' + valid.errors.length + ' error[s]:',
-      });
-      result.importErrors(valid);
-    }
-  });
-  return result;
-};
+var url = {};
 
-/**
- * Validates whether the instance matches exactly one of the given schemas
- * @param instance
- * @param schema
- * @param options
- * @param ctx
- * @return {String|null}
- */
-validators.oneOf = function validateOneOf (instance, schema, options, ctx) {
-  // Ignore undefined instances
-  if (instance === undefined) {
-    return null;
-  }
-  if (!Array.isArray(schema.oneOf)){
-    throw new SchemaError$1("oneOf must be an array");
-  }
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  var inner = new ValidatorResult$1(instance, schema, options, ctx);
-  var count = schema.oneOf.filter(
-    testSchemaNoThrow.bind(
-      this, instance, options, ctx, function(res) {inner.importErrors(res);}
-    ) ).length;
-  var list = schema.oneOf.map(function (v, i) {
-    var id = v.$id || v.id;
-    return id || (v.title && JSON.stringify(v.title)) || (v['$ref'] && ('<' + v['$ref'] + '>')) || '[subschema '+i+']';
-  });
-  if (count!==1) {
-    if (options.nestedErrors) {
-      result.importErrors(inner);
-    }
-    result.addError({
-      name: 'oneOf',
-      argument: list,
-      message: "is not exactly one from " + list.join(','),
-    });
-  }
-  return result;
-};
+var punycode$1 = {exports: {}};
 
-/**
- * Validates "then" or "else" depending on the result of validating "if"
- * @param instance
- * @param schema
- * @param options
- * @param ctx
- * @return {String|null}
- */
-validators.if = function validateIf (instance, schema, options, ctx) {
-  // Ignore undefined instances
-  if (instance === undefined) return null;
-  if (!helpers$2.isSchema(schema.if)) throw new Error('Expected "if" keyword to be a schema');
-  var ifValid = testSchemaNoThrow.call(this, instance, options, ctx, null, schema.if);
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  var res;
-  if(ifValid){
-    if (schema.then === undefined) return;
-    if (!helpers$2.isSchema(schema.then)) throw new Error('Expected "then" keyword to be a schema');
-    res = this.validateSchema(instance, schema.then, options, ctx.makeChild(schema.then));
-    result.importErrors(res);
-  }else {
-    if (schema.else === undefined) return;
-    if (!helpers$2.isSchema(schema.else)) throw new Error('Expected "else" keyword to be a schema');
-    res = this.validateSchema(instance, schema.else, options, ctx.makeChild(schema.else));
-    result.importErrors(res);
-  }
-  return result;
-};
+/*! https://mths.be/punycode v1.3.2 by @mathias */
 
-function getEnumerableProperty(object, key){
-  // Determine if `key` shows up in `for(var key in object)`
-  // First test Object.hasOwnProperty.call as an optimization: that guarantees it does
-  if(Object.hasOwnProperty.call(object, key)) return object[key];
-  // Test `key in object` as an optimization; false means it won't
-  if(!(key in object)) return;
-  while( (object = Object.getPrototypeOf(object)) ){
-    if(Object.propertyIsEnumerable.call(object, key)) return object[key];
-  }
-}
+(function (module, exports) {
+(function(root) {
 
-/**
- * Validates propertyNames
- * @param instance
- * @param schema
- * @param options
- * @param ctx
- * @return {String|null|ValidatorResult}
- */
-validators.propertyNames = function validatePropertyNames (instance, schema, options, ctx) {
-  if(!this.types.object(instance)) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  var subschema = schema.propertyNames!==undefined ? schema.propertyNames : {};
-  if(!helpers$2.isSchema(subschema)) throw new SchemaError$1('Expected "propertyNames" to be a schema (object or boolean)');
+	/** Detect free variables */
+	var freeExports = exports &&
+		!exports.nodeType && exports;
+	var freeModule = module &&
+		!module.nodeType && module;
+	var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal;
+	if (
+		freeGlobal.global === freeGlobal ||
+		freeGlobal.window === freeGlobal ||
+		freeGlobal.self === freeGlobal
+	) {
+		root = freeGlobal;
+	}
 
-  for (var property in instance) {
-    if(getEnumerableProperty(instance, property) !== undefined){
-      var res = this.validateSchema(property, subschema, options, ctx.makeChild(subschema));
-      result.importErrors(res);
-    }
-  }
+	/**
+	 * The `punycode` object.
+	 * @name punycode
+	 * @type Object
+	 */
+	var punycode,
 
-  return result;
-};
+	/** Highest positive signed 32-bit float value */
+	maxInt = 2147483647, // aka. 0x7FFFFFFF or 2^31-1
 
-/**
- * Validates properties
- * @param instance
- * @param schema
- * @param options
- * @param ctx
- * @return {String|null|ValidatorResult}
- */
-validators.properties = function validateProperties (instance, schema, options, ctx) {
-  if(!this.types.object(instance)) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  var properties = schema.properties || {};
-  for (var property in properties) {
-    var subschema = properties[property];
-    if(subschema===undefined){
-      continue;
-    }else if(subschema===null){
-      throw new SchemaError$1('Unexpected null, expected schema in "properties"');
-    }
-    if (typeof options.preValidateProperty == 'function') {
-      options.preValidateProperty(instance, property, subschema, options, ctx);
-    }
-    var prop = getEnumerableProperty(instance, property);
-    var res = this.validateSchema(prop, subschema, options, ctx.makeChild(subschema, property));
-    if(res.instance !== result.instance[property]) result.instance[property] = res.instance;
-    result.importErrors(res);
-  }
-  return result;
-};
+	/** Bootstring parameters */
+	base = 36,
+	tMin = 1,
+	tMax = 26,
+	skew = 38,
+	damp = 700,
+	initialBias = 72,
+	initialN = 128, // 0x80
+	delimiter = '-', // '\x2D'
 
-/**
- * Test a specific property within in instance against the additionalProperties schema attribute
- * This ignores properties with definitions in the properties schema attribute, but no other attributes.
- * If too many more types of property-existence tests pop up they may need their own class of tests (like `type` has)
- * @private
- * @return {boolean}
- */
-function testAdditionalProperty (instance, schema, options, ctx, property, result) {
-  if(!this.types.object(instance)) return;
-  if (schema.properties && schema.properties[property] !== undefined) {
-    return;
-  }
-  if (schema.additionalProperties === false) {
-    result.addError({
-      name: 'additionalProperties',
-      argument: property,
-      message: "is not allowed to have the additional property " + JSON.stringify(property),
-    });
-  } else {
-    var additionalProperties = schema.additionalProperties || {};
+	/** Regular expressions */
+	regexPunycode = /^xn--/,
+	regexNonASCII = /[^\x20-\x7E]/, // unprintable ASCII chars + non-ASCII chars
+	regexSeparators = /[\x2E\u3002\uFF0E\uFF61]/g, // RFC 3490 separators
 
-    if (typeof options.preValidateProperty == 'function') {
-      options.preValidateProperty(instance, property, additionalProperties, options, ctx);
-    }
+	/** Error messages */
+	errors = {
+		'overflow': 'Overflow: input needs wider integers to process',
+		'not-basic': 'Illegal input >= 0x80 (not a basic code point)',
+		'invalid-input': 'Invalid input'
+	},
 
-    var res = this.validateSchema(instance[property], additionalProperties, options, ctx.makeChild(additionalProperties, property));
-    if(res.instance !== result.instance[property]) result.instance[property] = res.instance;
-    result.importErrors(res);
-  }
-}
+	/** Convenience shortcuts */
+	baseMinusTMin = base - tMin,
+	floor = Math.floor,
+	stringFromCharCode = String.fromCharCode,
 
-/**
- * Validates patternProperties
- * @param instance
- * @param schema
- * @param options
- * @param ctx
- * @return {String|null|ValidatorResult}
- */
-validators.patternProperties = function validatePatternProperties (instance, schema, options, ctx) {
-  if(!this.types.object(instance)) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  var patternProperties = schema.patternProperties || {};
+	/** Temporary variable */
+	key;
 
-  for (var property in instance) {
-    var test = true;
-    for (var pattern in patternProperties) {
-      var subschema = patternProperties[pattern];
-      if(subschema===undefined){
-        continue;
-      }else if(subschema===null){
-        throw new SchemaError$1('Unexpected null, expected schema in "patternProperties"');
-      }
-      try {
-        var regexp = new RegExp(pattern, 'u');
-      } catch(_e) {
-        // In the event the stricter handling causes an error, fall back on the forgiving handling
-        // DEPRECATED
-        regexp = new RegExp(pattern);
-      }
-      if (!regexp.test(property)) {
-        continue;
-      }
-      test = false;
+	/*--------------------------------------------------------------------------*/
 
-      if (typeof options.preValidateProperty == 'function') {
-        options.preValidateProperty(instance, property, subschema, options, ctx);
-      }
+	/**
+	 * A generic error utility function.
+	 * @private
+	 * @param {String} type The error type.
+	 * @returns {Error} Throws a `RangeError` with the applicable error message.
+	 */
+	function error(type) {
+		throw RangeError(errors[type]);
+	}
 
-      var res = this.validateSchema(instance[property], subschema, options, ctx.makeChild(subschema, property));
-      if(res.instance !== result.instance[property]) result.instance[property] = res.instance;
-      result.importErrors(res);
-    }
-    if (test) {
-      testAdditionalProperty.call(this, instance, schema, options, ctx, property, result);
-    }
-  }
+	/**
+	 * A generic `Array#map` utility function.
+	 * @private
+	 * @param {Array} array The array to iterate over.
+	 * @param {Function} callback The function that gets called for every array
+	 * item.
+	 * @returns {Array} A new array of values returned by the callback function.
+	 */
+	function map(array, fn) {
+		var length = array.length;
+		var result = [];
+		while (length--) {
+			result[length] = fn(array[length]);
+		}
+		return result;
+	}
 
-  return result;
-};
+	/**
+	 * A simple `Array#map`-like wrapper to work with domain name strings or email
+	 * addresses.
+	 * @private
+	 * @param {String} domain The domain name or email address.
+	 * @param {Function} callback The function that gets called for every
+	 * character.
+	 * @returns {Array} A new string of characters returned by the callback
+	 * function.
+	 */
+	function mapDomain(string, fn) {
+		var parts = string.split('@');
+		var result = '';
+		if (parts.length > 1) {
+			// In email addresses, only the domain name should be punycoded. Leave
+			// the local part (i.e. everything up to `@`) intact.
+			result = parts[0] + '@';
+			string = parts[1];
+		}
+		// Avoid `split(regex)` for IE8 compatibility. See #17.
+		string = string.replace(regexSeparators, '\x2E');
+		var labels = string.split('.');
+		var encoded = map(labels, fn).join('.');
+		return result + encoded;
+	}
 
-/**
- * Validates additionalProperties
- * @param instance
- * @param schema
- * @param options
- * @param ctx
- * @return {String|null|ValidatorResult}
- */
-validators.additionalProperties = function validateAdditionalProperties (instance, schema, options, ctx) {
-  if(!this.types.object(instance)) return;
-  // if patternProperties is defined then we'll test when that one is called instead
-  if (schema.patternProperties) {
-    return null;
-  }
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  for (var property in instance) {
-    testAdditionalProperty.call(this, instance, schema, options, ctx, property, result);
-  }
-  return result;
-};
-
-/**
- * Validates whether the instance value is at least of a certain length, when the instance value is a string.
- * @param instance
- * @param schema
- * @return {String|null}
- */
-validators.minProperties = function validateMinProperties (instance, schema, options, ctx) {
-  if (!this.types.object(instance)) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  var keys = Object.keys(instance);
-  if (!(keys.length >= schema.minProperties)) {
-    result.addError({
-      name: 'minProperties',
-      argument: schema.minProperties,
-      message: "does not meet minimum property length of " + schema.minProperties,
-    });
-  }
-  return result;
-};
+	/**
+	 * Creates an array containing the numeric code points of each Unicode
+	 * character in the string. While JavaScript uses UCS-2 internally,
+	 * this function will convert a pair of surrogate halves (each of which
+	 * UCS-2 exposes as separate characters) into a single code point,
+	 * matching UTF-16.
+	 * @see `punycode.ucs2.encode`
+	 * @see <https://mathiasbynens.be/notes/javascript-encoding>
+	 * @memberOf punycode.ucs2
+	 * @name decode
+	 * @param {String} string The Unicode input string (UCS-2).
+	 * @returns {Array} The new array of code points.
+	 */
+	function ucs2decode(string) {
+		var output = [],
+		    counter = 0,
+		    length = string.length,
+		    value,
+		    extra;
+		while (counter < length) {
+			value = string.charCodeAt(counter++);
+			if (value >= 0xD800 && value <= 0xDBFF && counter < length) {
+				// high surrogate, and there is a next character
+				extra = string.charCodeAt(counter++);
+				if ((extra & 0xFC00) == 0xDC00) { // low surrogate
+					output.push(((value & 0x3FF) << 10) + (extra & 0x3FF) + 0x10000);
+				} else {
+					// unmatched surrogate; only append this code unit, in case the next
+					// code unit is the high surrogate of a surrogate pair
+					output.push(value);
+					counter--;
+				}
+			} else {
+				output.push(value);
+			}
+		}
+		return output;
+	}
 
-/**
- * Validates whether the instance value is at most of a certain length, when the instance value is a string.
- * @param instance
- * @param schema
- * @return {String|null}
- */
-validators.maxProperties = function validateMaxProperties (instance, schema, options, ctx) {
-  if (!this.types.object(instance)) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  var keys = Object.keys(instance);
-  if (!(keys.length <= schema.maxProperties)) {
-    result.addError({
-      name: 'maxProperties',
-      argument: schema.maxProperties,
-      message: "does not meet maximum property length of " + schema.maxProperties,
-    });
-  }
-  return result;
-};
+	/**
+	 * Creates a string based on an array of numeric code points.
+	 * @see `punycode.ucs2.decode`
+	 * @memberOf punycode.ucs2
+	 * @name encode
+	 * @param {Array} codePoints The array of numeric code points.
+	 * @returns {String} The new Unicode string (UCS-2).
+	 */
+	function ucs2encode(array) {
+		return map(array, function(value) {
+			var output = '';
+			if (value > 0xFFFF) {
+				value -= 0x10000;
+				output += stringFromCharCode(value >>> 10 & 0x3FF | 0xD800);
+				value = 0xDC00 | value & 0x3FF;
+			}
+			output += stringFromCharCode(value);
+			return output;
+		}).join('');
+	}
 
-/**
- * Validates items when instance is an array
- * @param instance
- * @param schema
- * @param options
- * @param ctx
- * @return {String|null|ValidatorResult}
- */
-validators.items = function validateItems (instance, schema, options, ctx) {
-  var self = this;
-  if (!this.types.array(instance)) return;
-  if (!schema.items) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  instance.every(function (value, i) {
-    var items = Array.isArray(schema.items) ? (schema.items[i] || schema.additionalItems) : schema.items;
-    if (items === undefined) {
-      return true;
-    }
-    if (items === false) {
-      result.addError({
-        name: 'items',
-        message: "additionalItems not permitted",
-      });
-      return false;
-    }
-    var res = self.validateSchema(value, items, options, ctx.makeChild(items, i));
-    if(res.instance !== result.instance[i]) result.instance[i] = res.instance;
-    result.importErrors(res);
-    return true;
-  });
-  return result;
-};
+	/**
+	 * Converts a basic code point into a digit/integer.
+	 * @see `digitToBasic()`
+	 * @private
+	 * @param {Number} codePoint The basic numeric code point value.
+	 * @returns {Number} The numeric value of a basic code point (for use in
+	 * representing integers) in the range `0` to `base - 1`, or `base` if
+	 * the code point does not represent a value.
+	 */
+	function basicToDigit(codePoint) {
+		if (codePoint - 48 < 10) {
+			return codePoint - 22;
+		}
+		if (codePoint - 65 < 26) {
+			return codePoint - 65;
+		}
+		if (codePoint - 97 < 26) {
+			return codePoint - 97;
+		}
+		return base;
+	}
 
-/**
- * Validates minimum and exclusiveMinimum when the type of the instance value is a number.
- * @param instance
- * @param schema
- * @return {String|null}
- */
-validators.minimum = function validateMinimum (instance, schema, options, ctx) {
-  if (!this.types.number(instance)) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  if (schema.exclusiveMinimum && schema.exclusiveMinimum === true) {
-    if(!(instance > schema.minimum)){
-      result.addError({
-        name: 'minimum',
-        argument: schema.minimum,
-        message: "must be greater than " + schema.minimum,
-      });
-    }
-  } else {
-    if(!(instance >= schema.minimum)){
-      result.addError({
-        name: 'minimum',
-        argument: schema.minimum,
-        message: "must be greater than or equal to " + schema.minimum,
-      });
-    }
-  }
-  return result;
-};
+	/**
+	 * Converts a digit/integer into a basic code point.
+	 * @see `basicToDigit()`
+	 * @private
+	 * @param {Number} digit The numeric value of a basic code point.
+	 * @returns {Number} The basic code point whose value (when used for
+	 * representing integers) is `digit`, which needs to be in the range
+	 * `0` to `base - 1`. If `flag` is non-zero, the uppercase form is
+	 * used; else, the lowercase form is used. The behavior is undefined
+	 * if `flag` is non-zero and `digit` has no uppercase form.
+	 */
+	function digitToBasic(digit, flag) {
+		//  0..25 map to ASCII a..z or A..Z
+		// 26..35 map to ASCII 0..9
+		return digit + 22 + 75 * (digit < 26) - ((flag != 0) << 5);
+	}
 
-/**
- * Validates maximum and exclusiveMaximum when the type of the instance value is a number.
- * @param instance
- * @param schema
- * @return {String|null}
- */
-validators.maximum = function validateMaximum (instance, schema, options, ctx) {
-  if (!this.types.number(instance)) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  if (schema.exclusiveMaximum && schema.exclusiveMaximum === true) {
-    if(!(instance < schema.maximum)){
-      result.addError({
-        name: 'maximum',
-        argument: schema.maximum,
-        message: "must be less than " + schema.maximum,
-      });
-    }
-  } else {
-    if(!(instance <= schema.maximum)){
-      result.addError({
-        name: 'maximum',
-        argument: schema.maximum,
-        message: "must be less than or equal to " + schema.maximum,
-      });
-    }
-  }
-  return result;
-};
+	/**
+	 * Bias adaptation function as per section 3.4 of RFC 3492.
+	 * http://tools.ietf.org/html/rfc3492#section-3.4
+	 * @private
+	 */
+	function adapt(delta, numPoints, firstTime) {
+		var k = 0;
+		delta = firstTime ? floor(delta / damp) : delta >> 1;
+		delta += floor(delta / numPoints);
+		for (/* no initialization */; delta > baseMinusTMin * tMax >> 1; k += base) {
+			delta = floor(delta / baseMinusTMin);
+		}
+		return floor(k + (baseMinusTMin + 1) * delta / (delta + skew));
+	}
 
-/**
- * Validates the number form of exclusiveMinimum when the type of the instance value is a number.
- * @param instance
- * @param schema
- * @return {String|null}
- */
-validators.exclusiveMinimum = function validateExclusiveMinimum (instance, schema, options, ctx) {
-  // Support the boolean form of exclusiveMinimum, which is handled by the "minimum" keyword.
-  if(typeof schema.exclusiveMaximum === 'boolean') return;
-  if (!this.types.number(instance)) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  var valid = instance > schema.exclusiveMinimum;
-  if (!valid) {
-    result.addError({
-      name: 'exclusiveMinimum',
-      argument: schema.exclusiveMinimum,
-      message: "must be strictly greater than " + schema.exclusiveMinimum,
-    });
-  }
-  return result;
-};
+	/**
+	 * Converts a Punycode string of ASCII-only symbols to a string of Unicode
+	 * symbols.
+	 * @memberOf punycode
+	 * @param {String} input The Punycode string of ASCII-only symbols.
+	 * @returns {String} The resulting string of Unicode symbols.
+	 */
+	function decode(input) {
+		// Don't use UCS-2
+		var output = [],
+		    inputLength = input.length,
+		    out,
+		    i = 0,
+		    n = initialN,
+		    bias = initialBias,
+		    basic,
+		    j,
+		    index,
+		    oldi,
+		    w,
+		    k,
+		    digit,
+		    t,
+		    /** Cached calculation results */
+		    baseMinusT;
 
-/**
- * Validates the number form of exclusiveMaximum when the type of the instance value is a number.
- * @param instance
- * @param schema
- * @return {String|null}
- */
-validators.exclusiveMaximum = function validateExclusiveMaximum (instance, schema, options, ctx) {
-  // Support the boolean form of exclusiveMaximum, which is handled by the "maximum" keyword.
-  if(typeof schema.exclusiveMaximum === 'boolean') return;
-  if (!this.types.number(instance)) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  var valid = instance < schema.exclusiveMaximum;
-  if (!valid) {
-    result.addError({
-      name: 'exclusiveMaximum',
-      argument: schema.exclusiveMaximum,
-      message: "must be strictly less than " + schema.exclusiveMaximum,
-    });
-  }
-  return result;
-};
+		// Handle the basic code points: let `basic` be the number of input code
+		// points before the last delimiter, or `0` if there is none, then copy
+		// the first basic code points to the output.
 
-/**
- * Perform validation for multipleOf and divisibleBy, which are essentially the same.
- * @param instance
- * @param schema
- * @param validationType
- * @param errorMessage
- * @returns {String|null}
- */
-var validateMultipleOfOrDivisbleBy = function validateMultipleOfOrDivisbleBy (instance, schema, options, ctx, validationType, errorMessage) {
-  if (!this.types.number(instance)) return;
+		basic = input.lastIndexOf(delimiter);
+		if (basic < 0) {
+			basic = 0;
+		}
 
-  var validationArgument = schema[validationType];
-  if (validationArgument == 0) {
-    throw new SchemaError$1(validationType + " cannot be zero");
-  }
+		for (j = 0; j < basic; ++j) {
+			// if it's not a basic code point
+			if (input.charCodeAt(j) >= 0x80) {
+				error('not-basic');
+			}
+			output.push(input.charCodeAt(j));
+		}
 
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
+		// Main decoding loop: start just after the last delimiter if any basic code
+		// points were copied; start at the beginning otherwise.
 
-  var instanceDecimals = helpers$2.getDecimalPlaces(instance);
-  var divisorDecimals = helpers$2.getDecimalPlaces(validationArgument);
+		for (index = basic > 0 ? basic + 1 : 0; index < inputLength; /* no final expression */) {
 
-  var maxDecimals = Math.max(instanceDecimals , divisorDecimals);
-  var multiplier = Math.pow(10, maxDecimals);
+			// `index` is the index of the next character to be consumed.
+			// Decode a generalized variable-length integer into `delta`,
+			// which gets added to `i`. The overflow checking is easier
+			// if we increase `i` as we go, then subtract off its starting
+			// value at the end to obtain `delta`.
+			for (oldi = i, w = 1, k = base; /* no condition */; k += base) {
 
-  if (Math.round(instance * multiplier) % Math.round(validationArgument * multiplier) !== 0) {
-    result.addError({
-      name: validationType,
-      argument:  validationArgument,
-      message: errorMessage + JSON.stringify(validationArgument),
-    });
-  }
+				if (index >= inputLength) {
+					error('invalid-input');
+				}
 
-  return result;
-};
+				digit = basicToDigit(input.charCodeAt(index++));
 
-/**
- * Validates divisibleBy when the type of the instance value is a number.
- * @param instance
- * @param schema
- * @return {String|null}
- */
-validators.multipleOf = function validateMultipleOf (instance, schema, options, ctx) {
-  return validateMultipleOfOrDivisbleBy.call(this, instance, schema, options, ctx, "multipleOf", "is not a multiple of (divisible by) ");
-};
+				if (digit >= base || digit > floor((maxInt - i) / w)) {
+					error('overflow');
+				}
 
-/**
- * Validates multipleOf when the type of the instance value is a number.
- * @param instance
- * @param schema
- * @return {String|null}
- */
-validators.divisibleBy = function validateDivisibleBy (instance, schema, options, ctx) {
-  return validateMultipleOfOrDivisbleBy.call(this, instance, schema, options, ctx, "divisibleBy", "is not divisible by (multiple of) ");
-};
+				i += digit * w;
+				t = k <= bias ? tMin : (k >= bias + tMax ? tMax : k - bias);
 
-/**
- * Validates whether the instance value is present.
- * @param instance
- * @param schema
- * @return {String|null}
- */
-validators.required = function validateRequired (instance, schema, options, ctx) {
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  if (instance === undefined && schema.required === true) {
-    // A boolean form is implemented for reverse-compatibility with schemas written against older drafts
-    result.addError({
-      name: 'required',
-      message: "is required",
-    });
-  } else if (this.types.object(instance) && Array.isArray(schema.required)) {
-    schema.required.forEach(function(n){
-      if(getEnumerableProperty(instance, n)===undefined){
-        result.addError({
-          name: 'required',
-          argument: n,
-          message: "requires property " + JSON.stringify(n),
-        });
-      }
-    });
-  }
-  return result;
-};
+				if (digit < t) {
+					break;
+				}
 
-/**
- * Validates whether the instance value matches the regular expression, when the instance value is a string.
- * @param instance
- * @param schema
- * @return {String|null}
- */
-validators.pattern = function validatePattern (instance, schema, options, ctx) {
-  if (!this.types.string(instance)) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  var pattern = schema.pattern;
-  try {
-    var regexp = new RegExp(pattern, 'u');
-  } catch(_e) {
-    // In the event the stricter handling causes an error, fall back on the forgiving handling
-    // DEPRECATED
-    regexp = new RegExp(pattern);
-  }
-  if (!instance.match(regexp)) {
-    result.addError({
-      name: 'pattern',
-      argument: schema.pattern,
-      message: "does not match pattern " + JSON.stringify(schema.pattern.toString()),
-    });
-  }
-  return result;
-};
+				baseMinusT = base - t;
+				if (w > floor(maxInt / baseMinusT)) {
+					error('overflow');
+				}
 
-/**
- * Validates whether the instance value is of a certain defined format or a custom
- * format.
- * The following formats are supported for string types:
- *   - date-time
- *   - date
- *   - time
- *   - ip-address
- *   - ipv6
- *   - uri
- *   - color
- *   - host-name
- *   - alpha
- *   - alpha-numeric
- *   - utc-millisec
- * @param instance
- * @param schema
- * @param [options]
- * @param [ctx]
- * @return {String|null}
- */
-validators.format = function validateFormat (instance, schema, options, ctx) {
-  if (instance===undefined) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  if (!result.disableFormat && !helpers$2.isFormat(instance, schema.format, this)) {
-    result.addError({
-      name: 'format',
-      argument: schema.format,
-      message: "does not conform to the " + JSON.stringify(schema.format) + " format",
-    });
-  }
-  return result;
-};
+				w *= baseMinusT;
 
-/**
- * Validates whether the instance value is at least of a certain length, when the instance value is a string.
- * @param instance
- * @param schema
- * @return {String|null}
- */
-validators.minLength = function validateMinLength (instance, schema, options, ctx) {
-  if (!this.types.string(instance)) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  var hsp = instance.match(/[\uDC00-\uDFFF]/g);
-  var length = instance.length - (hsp ? hsp.length : 0);
-  if (!(length >= schema.minLength)) {
-    result.addError({
-      name: 'minLength',
-      argument: schema.minLength,
-      message: "does not meet minimum length of " + schema.minLength,
-    });
-  }
-  return result;
-};
+			}
 
-/**
- * Validates whether the instance value is at most of a certain length, when the instance value is a string.
- * @param instance
- * @param schema
- * @return {String|null}
- */
-validators.maxLength = function validateMaxLength (instance, schema, options, ctx) {
-  if (!this.types.string(instance)) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  // TODO if this was already computed in "minLength", use that value instead of re-computing
-  var hsp = instance.match(/[\uDC00-\uDFFF]/g);
-  var length = instance.length - (hsp ? hsp.length : 0);
-  if (!(length <= schema.maxLength)) {
-    result.addError({
-      name: 'maxLength',
-      argument: schema.maxLength,
-      message: "does not meet maximum length of " + schema.maxLength,
-    });
-  }
-  return result;
-};
+			out = output.length + 1;
+			bias = adapt(i - oldi, out, oldi == 0);
 
-/**
- * Validates whether instance contains at least a minimum number of items, when the instance is an Array.
- * @param instance
- * @param schema
- * @return {String|null}
- */
-validators.minItems = function validateMinItems (instance, schema, options, ctx) {
-  if (!this.types.array(instance)) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  if (!(instance.length >= schema.minItems)) {
-    result.addError({
-      name: 'minItems',
-      argument: schema.minItems,
-      message: "does not meet minimum length of " + schema.minItems,
-    });
-  }
-  return result;
-};
+			// `i` was supposed to wrap around from `out` to `0`,
+			// incrementing `n` each time, so we'll fix that now:
+			if (floor(i / out) > maxInt - n) {
+				error('overflow');
+			}
 
-/**
- * Validates whether instance contains no more than a maximum number of items, when the instance is an Array.
- * @param instance
- * @param schema
- * @return {String|null}
- */
-validators.maxItems = function validateMaxItems (instance, schema, options, ctx) {
-  if (!this.types.array(instance)) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  if (!(instance.length <= schema.maxItems)) {
-    result.addError({
-      name: 'maxItems',
-      argument: schema.maxItems,
-      message: "does not meet maximum length of " + schema.maxItems,
-    });
-  }
-  return result;
-};
+			n += floor(i / out);
+			i %= out;
 
-/**
- * Deep compares arrays for duplicates
- * @param v
- * @param i
- * @param a
- * @private
- * @return {boolean}
- */
-function testArrays (v, i, a) {
-  var j, len = a.length;
-  for (j = i + 1, len; j < len; j++) {
-    if (helpers$2.deepCompareStrict(v, a[j])) {
-      return false;
-    }
-  }
-  return true;
-}
+			// Insert `n` at position `i` of the output
+			output.splice(i++, 0, n);
 
-/**
- * Validates whether there are no duplicates, when the instance is an Array.
- * @param instance
- * @return {String|null}
- */
-validators.uniqueItems = function validateUniqueItems (instance, schema, options, ctx) {
-  if (schema.uniqueItems!==true) return;
-  if (!this.types.array(instance)) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  if (!instance.every(testArrays)) {
-    result.addError({
-      name: 'uniqueItems',
-      message: "contains duplicate item",
-    });
-  }
-  return result;
-};
+		}
 
-/**
- * Validate for the presence of dependency properties, if the instance is an object.
- * @param instance
- * @param schema
- * @param options
- * @param ctx
- * @return {null|ValidatorResult}
- */
-validators.dependencies = function validateDependencies (instance, schema, options, ctx) {
-  if (!this.types.object(instance)) return;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  for (var property in schema.dependencies) {
-    if (instance[property] === undefined) {
-      continue;
-    }
-    var dep = schema.dependencies[property];
-    var childContext = ctx.makeChild(dep, property);
-    if (typeof dep == 'string') {
-      dep = [dep];
-    }
-    if (Array.isArray(dep)) {
-      dep.forEach(function (prop) {
-        if (instance[prop] === undefined) {
-          result.addError({
-            // FIXME there's two different "dependencies" errors here with slightly different outputs
-            // Can we make these the same? Or should we create different error types?
-            name: 'dependencies',
-            argument: childContext.propertyPath,
-            message: "property " + prop + " not found, required by " + childContext.propertyPath,
-          });
-        }
-      });
-    } else {
-      var res = this.validateSchema(instance, dep, options, childContext);
-      if(result.instance !== res.instance) result.instance = res.instance;
-      if (res && res.errors.length) {
-        result.addError({
-          name: 'dependencies',
-          argument: childContext.propertyPath,
-          message: "does not meet dependency required by " + childContext.propertyPath,
-        });
-        result.importErrors(res);
-      }
-    }
-  }
-  return result;
-};
+		return ucs2encode(output);
+	}
 
-/**
- * Validates whether the instance value is one of the enumerated values.
- *
- * @param instance
- * @param schema
- * @return {ValidatorResult|null}
- */
-validators['enum'] = function validateEnum (instance, schema, options, ctx) {
-  if (instance === undefined) {
-    return null;
-  }
-  if (!Array.isArray(schema['enum'])) {
-    throw new SchemaError$1("enum expects an array", schema);
-  }
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  if (!schema['enum'].some(helpers$2.deepCompareStrict.bind(null, instance))) {
-    result.addError({
-      name: 'enum',
-      argument: schema['enum'],
-      message: "is not one of enum values: " + schema['enum'].map(String).join(','),
-    });
-  }
-  return result;
-};
+	/**
+	 * Converts a string of Unicode symbols (e.g. a domain name label) to a
+	 * Punycode string of ASCII-only symbols.
+	 * @memberOf punycode
+	 * @param {String} input The string of Unicode symbols.
+	 * @returns {String} The resulting Punycode string of ASCII-only symbols.
+	 */
+	function encode(input) {
+		var n,
+		    delta,
+		    handledCPCount,
+		    basicLength,
+		    bias,
+		    j,
+		    m,
+		    q,
+		    k,
+		    t,
+		    currentValue,
+		    output = [],
+		    /** `inputLength` will hold the number of code points in `input`. */
+		    inputLength,
+		    /** Cached calculation results */
+		    handledCPCountPlusOne,
+		    baseMinusT,
+		    qMinusT;
 
-/**
- * Validates whether the instance exactly matches a given value
- *
- * @param instance
- * @param schema
- * @return {ValidatorResult|null}
- */
-validators['const'] = function validateEnum (instance, schema, options, ctx) {
-  if (instance === undefined) {
-    return null;
-  }
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  if (!helpers$2.deepCompareStrict(schema['const'], instance)) {
-    result.addError({
-      name: 'const',
-      argument: schema['const'],
-      message: "does not exactly match expected constant: " + schema['const'],
-    });
-  }
-  return result;
-};
+		// Convert the input in UCS-2 to Unicode
+		input = ucs2decode(input);
 
-/**
- * Validates whether the instance if of a prohibited type.
- * @param instance
- * @param schema
- * @param options
- * @param ctx
- * @return {null|ValidatorResult}
- */
-validators.not = validators.disallow = function validateNot (instance, schema, options, ctx) {
-  var self = this;
-  if(instance===undefined) return null;
-  var result = new ValidatorResult$1(instance, schema, options, ctx);
-  var notTypes = schema.not || schema.disallow;
-  if(!notTypes) return null;
-  if(!Array.isArray(notTypes)) notTypes=[notTypes];
-  notTypes.forEach(function (type) {
-    if (self.testType(instance, schema, options, ctx, type)) {
-      var id = type && (type.$id || type.id);
-      var schemaId = id || type;
-      result.addError({
-        name: 'not',
-        argument: schemaId,
-        message: "is of prohibited type " + schemaId,
-      });
-    }
-  });
-  return result;
-};
+		// Cache the length
+		inputLength = input.length;
 
-var attribute_1 = attribute$1;
+		// Initialize the state
+		n = initialN;
+		delta = 0;
+		bias = initialBias;
 
-var scan = {};
+		// Handle the basic code points
+		for (j = 0; j < inputLength; ++j) {
+			currentValue = input[j];
+			if (currentValue < 0x80) {
+				output.push(stringFromCharCode(currentValue));
+			}
+		}
 
-var urilib$1 = url;
-var helpers$1 = helpers$3;
-
-scan.SchemaScanResult = SchemaScanResult;
-function SchemaScanResult(found, ref){
-  this.id = found;
-  this.ref = ref;
-}
+		handledCPCount = basicLength = output.length;
 
-/**
- * Adds a schema with a certain urn to the Validator instance.
- * @param string uri
- * @param object schema
- * @return {Object}
- */
-scan.scan = function scan(base, schema){
-  function scanSchema(baseuri, schema){
-    if(!schema || typeof schema!='object') return;
-    // Mark all referenced schemas so we can tell later which schemas are referred to, but never defined
-    if(schema.$ref){
-      var resolvedUri = urilib$1.resolve(baseuri, schema.$ref);
-      ref[resolvedUri] = ref[resolvedUri] ? ref[resolvedUri]+1 : 0;
-      return;
-    }
-    var id = schema.$id || schema.id;
-    var ourBase = id ? urilib$1.resolve(baseuri, id) : baseuri;
-    if (ourBase) {
-      // If there's no fragment, append an empty one
-      if(ourBase.indexOf('#')<0) ourBase += '#';
-      if(found[ourBase]){
-        if(!helpers$1.deepCompareStrict(found[ourBase], schema)){
-          throw new Error('Schema <'+ourBase+'> already exists with different definition');
-        }
-        return found[ourBase];
-      }
-      found[ourBase] = schema;
-      // strip trailing fragment
-      if(ourBase[ourBase.length-1]=='#'){
-        found[ourBase.substring(0, ourBase.length-1)] = schema;
-      }
-    }
-    scanArray(ourBase+'/items', (Array.isArray(schema.items)?schema.items:[schema.items]));
-    scanArray(ourBase+'/extends', (Array.isArray(schema.extends)?schema.extends:[schema.extends]));
-    scanSchema(ourBase+'/additionalItems', schema.additionalItems);
-    scanObject(ourBase+'/properties', schema.properties);
-    scanSchema(ourBase+'/additionalProperties', schema.additionalProperties);
-    scanObject(ourBase+'/definitions', schema.definitions);
-    scanObject(ourBase+'/patternProperties', schema.patternProperties);
-    scanObject(ourBase+'/dependencies', schema.dependencies);
-    scanArray(ourBase+'/disallow', schema.disallow);
-    scanArray(ourBase+'/allOf', schema.allOf);
-    scanArray(ourBase+'/anyOf', schema.anyOf);
-    scanArray(ourBase+'/oneOf', schema.oneOf);
-    scanSchema(ourBase+'/not', schema.not);
-  }
-  function scanArray(baseuri, schemas){
-    if(!Array.isArray(schemas)) return;
-    for(var i=0; i<schemas.length; i++){
-      scanSchema(baseuri+'/'+i, schemas[i]);
-    }
-  }
-  function scanObject(baseuri, schemas){
-    if(!schemas || typeof schemas!='object') return;
-    for(var p in schemas){
-      scanSchema(baseuri+'/'+p, schemas[p]);
-    }
-  }
+		// `handledCPCount` is the number of code points that have been handled;
+		// `basicLength` is the number of basic code points.
 
-  var found = {};
-  var ref = {};
-  scanSchema(base, schema);
-  return new SchemaScanResult(found, ref);
-};
+		// Finish the basic string - if it is not empty - with a delimiter
+		if (basicLength) {
+			output.push(delimiter);
+		}
 
-var urilib = url;
+		// Main encoding loop:
+		while (handledCPCount < inputLength) {
 
-var attribute = attribute_1;
-var helpers = helpers$3;
-var scanSchema = scan.scan;
-var ValidatorResult = helpers.ValidatorResult;
-var ValidatorResultError = helpers.ValidatorResultError;
-var SchemaError = helpers.SchemaError;
-var SchemaContext = helpers.SchemaContext;
-//var anonymousBase = 'vnd.jsonschema:///';
-var anonymousBase = '/';
+			// All non-basic code points < n have been handled already. Find the next
+			// larger one:
+			for (m = maxInt, j = 0; j < inputLength; ++j) {
+				currentValue = input[j];
+				if (currentValue >= n && currentValue < m) {
+					m = currentValue;
+				}
+			}
 
-/**
- * Creates a new Validator object
- * @name Validator
- * @constructor
- */
-var Validator = function Validator () {
-  // Allow a validator instance to override global custom formats or to have their
-  // own custom formats.
-  this.customFormats = Object.create(Validator.prototype.customFormats);
-  this.schemas = {};
-  this.unresolvedRefs = [];
+			// Increase `delta` enough to advance the decoder's <n,i> state to <m,0>,
+			// but guard against overflow
+			handledCPCountPlusOne = handledCPCount + 1;
+			if (m - n > floor((maxInt - delta) / handledCPCountPlusOne)) {
+				error('overflow');
+			}
 
-  // Use Object.create to make this extensible without Validator instances stepping on each other's toes.
-  this.types = Object.create(types);
-  this.attributes = Object.create(attribute.validators);
-};
+			delta += (m - n) * handledCPCountPlusOne;
+			n = m;
 
-// Allow formats to be registered globally.
-Validator.prototype.customFormats = {};
+			for (j = 0; j < inputLength; ++j) {
+				currentValue = input[j];
 
-// Hint at the presence of a property
-Validator.prototype.schemas = null;
-Validator.prototype.types = null;
-Validator.prototype.attributes = null;
-Validator.prototype.unresolvedRefs = null;
+				if (currentValue < n && ++delta > maxInt) {
+					error('overflow');
+				}
 
-/**
- * Adds a schema with a certain urn to the Validator instance.
- * @param schema
- * @param urn
- * @return {Object}
- */
-Validator.prototype.addSchema = function addSchema (schema, base) {
-  var self = this;
-  if (!schema) {
-    return null;
-  }
-  var scan = scanSchema(base||anonymousBase, schema);
-  var ourUri = base || schema.$id || schema.id;
-  for(var uri in scan.id){
-    this.schemas[uri] = scan.id[uri];
-  }
-  for(var uri in scan.ref){
-    // If this schema is already defined, it will be filtered out by the next step
-    this.unresolvedRefs.push(uri);
-  }
-  // Remove newly defined schemas from unresolvedRefs
-  this.unresolvedRefs = this.unresolvedRefs.filter(function(uri){
-    return typeof self.schemas[uri]==='undefined';
-  });
-  return this.schemas[ourUri];
-};
+				if (currentValue == n) {
+					// Represent delta as a generalized variable-length integer
+					for (q = delta, k = base; /* no condition */; k += base) {
+						t = k <= bias ? tMin : (k >= bias + tMax ? tMax : k - bias);
+						if (q < t) {
+							break;
+						}
+						qMinusT = q - t;
+						baseMinusT = base - t;
+						output.push(
+							stringFromCharCode(digitToBasic(t + qMinusT % baseMinusT, 0))
+						);
+						q = floor(qMinusT / baseMinusT);
+					}
 
-Validator.prototype.addSubSchemaArray = function addSubSchemaArray(baseuri, schemas) {
-  if(!Array.isArray(schemas)) return;
-  for(var i=0; i<schemas.length; i++){
-    this.addSubSchema(baseuri, schemas[i]);
-  }
-};
+					output.push(stringFromCharCode(digitToBasic(q, 0)));
+					bias = adapt(delta, handledCPCountPlusOne, handledCPCount == basicLength);
+					delta = 0;
+					++handledCPCount;
+				}
+			}
 
-Validator.prototype.addSubSchemaObject = function addSubSchemaArray(baseuri, schemas) {
-  if(!schemas || typeof schemas!='object') return;
-  for(var p in schemas){
-    this.addSubSchema(baseuri, schemas[p]);
-  }
-};
+			++delta;
+			++n;
 
+		}
+		return output.join('');
+	}
 
+	/**
+	 * Converts a Punycode string representing a domain name or an email address
+	 * to Unicode. Only the Punycoded parts of the input will be converted, i.e.
+	 * it doesn't matter if you call it on a string that has already been
+	 * converted to Unicode.
+	 * @memberOf punycode
+	 * @param {String} input The Punycoded domain name or email address to
+	 * convert to Unicode.
+	 * @returns {String} The Unicode representation of the given Punycode
+	 * string.
+	 */
+	function toUnicode(input) {
+		return mapDomain(input, function(string) {
+			return regexPunycode.test(string)
+				? decode(string.slice(4).toLowerCase())
+				: string;
+		});
+	}
 
-/**
- * Sets all the schemas of the Validator instance.
- * @param schemas
- */
-Validator.prototype.setSchemas = function setSchemas (schemas) {
-  this.schemas = schemas;
-};
+	/**
+	 * Converts a Unicode string representing a domain name or an email address to
+	 * Punycode. Only the non-ASCII parts of the domain name will be converted,
+	 * i.e. it doesn't matter if you call it with a domain that's already in
+	 * ASCII.
+	 * @memberOf punycode
+	 * @param {String} input The domain name or email address to convert, as a
+	 * Unicode string.
+	 * @returns {String} The Punycode representation of the given domain name or
+	 * email address.
+	 */
+	function toASCII(input) {
+		return mapDomain(input, function(string) {
+			return regexNonASCII.test(string)
+				? 'xn--' + encode(string)
+				: string;
+		});
+	}
 
-/**
- * Returns the schema of a certain urn
- * @param urn
- */
-Validator.prototype.getSchema = function getSchema (urn) {
-  return this.schemas[urn];
-};
+	/*--------------------------------------------------------------------------*/
 
-/**
- * Validates instance against the provided schema
- * @param instance
- * @param schema
- * @param [options]
- * @param [ctx]
- * @return {Array}
- */
-Validator.prototype.validate = function validate (instance, schema, options, ctx) {
-  if((typeof schema !== 'boolean' && typeof schema !== 'object') || schema === null){
-    throw new SchemaError('Expected `schema` to be an object or boolean');
-  }
-  if (!options) {
-    options = {};
-  }
-  // This section indexes subschemas in the provided schema, so they don't need to be added with Validator#addSchema
-  // This will work so long as the function at uri.resolve() will resolve a relative URI to a relative URI
-  var id = schema.$id || schema.id;
-  var base = urilib.resolve(options.base||anonymousBase, id||'');
-  if(!ctx){
-    ctx = new SchemaContext(schema, options, [], base, Object.create(this.schemas));
-    if (!ctx.schemas[base]) {
-      ctx.schemas[base] = schema;
-    }
-    var found = scanSchema(base, schema);
-    for(var n in found.id){
-      var sch = found.id[n];
-      ctx.schemas[n] = sch;
-    }
-  }
-  if(options.required && instance===undefined){
-    var result = new ValidatorResult(instance, schema, options, ctx);
-    result.addError('is required, but is undefined');
-    return result;
-  }
-  var result = this.validateSchema(instance, schema, options, ctx);
-  if (!result) {
-    throw new Error('Result undefined');
-  }else if(options.throwAll && result.errors.length){
-    throw new ValidatorResultError(result);
+	/** Define the public API */
+	punycode = {
+		/**
+		 * A string representing the current Punycode.js version number.
+		 * @memberOf punycode
+		 * @type String
+		 */
+		'version': '1.3.2',
+		/**
+		 * An object of methods to convert from JavaScript's internal character
+		 * representation (UCS-2) to Unicode code points, and back.
+		 * @see <https://mathiasbynens.be/notes/javascript-encoding>
+		 * @memberOf punycode
+		 * @type Object
+		 */
+		'ucs2': {
+			'decode': ucs2decode,
+			'encode': ucs2encode
+		},
+		'decode': decode,
+		'encode': encode,
+		'toASCII': toASCII,
+		'toUnicode': toUnicode
+	};
+
+	/** Expose `punycode` */
+	// Some AMD build optimizers, like r.js, check for specific condition patterns
+	// like the following:
+	if (freeExports && freeModule) {
+		if (module.exports == freeExports) { // in Node.js or RingoJS v0.8.0+
+			freeModule.exports = punycode;
+		} else { // in Narwhal or RingoJS v0.7.0-
+			for (key in punycode) {
+				punycode.hasOwnProperty(key) && (freeExports[key] = punycode[key]);
+			}
+		}
+	} else { // in Rhino or a web browser
+		root.punycode = punycode;
+	}
+
+}(commonjsGlobal));
+}(punycode$1, punycode$1.exports));
+
+var util$1 = {
+  isString: function(arg) {
+    return typeof(arg) === 'string';
+  },
+  isObject: function(arg) {
+    return typeof(arg) === 'object' && arg !== null;
+  },
+  isNull: function(arg) {
+    return arg === null;
+  },
+  isNullOrUndefined: function(arg) {
+    return arg == null;
   }
-  return result;
 };
 
-/**
-* @param Object schema
-* @return mixed schema uri or false
-*/
-function shouldResolve(schema) {
-  var ref = (typeof schema === 'string') ? schema : schema.$ref;
-  if (typeof ref=='string') return ref;
-  return false;
+var querystring$1 = {};
+
+// If obj.hasOwnProperty has been overridden, then calling
+// obj.hasOwnProperty(prop) will break.
+// See: https://github.com/joyent/node/issues/1707
+function hasOwnProperty(obj, prop) {
+  return Object.prototype.hasOwnProperty.call(obj, prop);
 }
 
-/**
- * Validates an instance against the schema (the actual work horse)
- * @param instance
- * @param schema
- * @param options
- * @param ctx
- * @private
- * @return {ValidatorResult}
- */
-Validator.prototype.validateSchema = function validateSchema (instance, schema, options, ctx) {
-  var result = new ValidatorResult(instance, schema, options, ctx);
+var decode = function(qs, sep, eq, options) {
+  sep = sep || '&';
+  eq = eq || '=';
+  var obj = {};
 
-  // Support for the true/false schemas
-  if(typeof schema==='boolean') {
-    if(schema===true){
-      // `true` is always valid
-      schema = {};
-    }else if(schema===false){
-      // `false` is always invalid
-      schema = {type: []};
-    }
-  }else if(!schema){
-    // This might be a string
-    throw new Error("schema is undefined");
+  if (typeof qs !== 'string' || qs.length === 0) {
+    return obj;
   }
 
-  if (schema['extends']) {
-    if (Array.isArray(schema['extends'])) {
-      var schemaobj = {schema: schema, ctx: ctx};
-      schema['extends'].forEach(this.schemaTraverser.bind(this, schemaobj));
-      schema = schemaobj.schema;
-      schemaobj.schema = null;
-      schemaobj.ctx = null;
-      schemaobj = null;
-    } else {
-      schema = helpers.deepMerge(schema, this.superResolve(schema['extends'], ctx));
-    }
+  var regexp = /\+/g;
+  qs = qs.split(sep);
+
+  var maxKeys = 1000;
+  if (options && typeof options.maxKeys === 'number') {
+    maxKeys = options.maxKeys;
   }
 
-  // If passed a string argument, load that schema URI
-  var switchSchema = shouldResolve(schema);
-  if (switchSchema) {
-    var resolved = this.resolve(schema, switchSchema, ctx);
-    var subctx = new SchemaContext(resolved.subschema, options, ctx.path, resolved.switchSchema, ctx.schemas);
-    return this.validateSchema(instance, resolved.subschema, options, subctx);
+  var len = qs.length;
+  // maxKeys <= 0 means that we should not limit keys count
+  if (maxKeys > 0 && len > maxKeys) {
+    len = maxKeys;
   }
 
-  var skipAttributes = options && options.skipAttributes || [];
-  // Validate each schema attribute against the instance
-  for (var key in schema) {
-    if (!attribute.ignoreProperties[key] && skipAttributes.indexOf(key) < 0) {
-      var validatorErr = null;
-      var validator = this.attributes[key];
-      if (validator) {
-        validatorErr = validator.call(this, instance, schema, options, ctx);
-      } else if (options.allowUnknownAttributes === false) {
-        // This represents an error with the schema itself, not an invalid instance
-        throw new SchemaError("Unsupported attribute: " + key, schema);
-      }
-      if (validatorErr) {
-        result.importErrors(validatorErr);
-      }
+  for (var i = 0; i < len; ++i) {
+    var x = qs[i].replace(regexp, '%20'),
+        idx = x.indexOf(eq),
+        kstr, vstr, k, v;
+
+    if (idx >= 0) {
+      kstr = x.substr(0, idx);
+      vstr = x.substr(idx + 1);
+    } else {
+      kstr = x;
+      vstr = '';
     }
-  }
 
-  if (typeof options.rewrite == 'function') {
-    var value = options.rewrite.call(this, instance, schema, options, ctx);
-    result.instance = value;
+    k = decodeURIComponent(kstr);
+    v = decodeURIComponent(vstr);
+
+    if (!hasOwnProperty(obj, k)) {
+      obj[k] = v;
+    } else if (Array.isArray(obj[k])) {
+      obj[k].push(v);
+    } else {
+      obj[k] = [obj[k], v];
+    }
   }
-  return result;
-};
 
-/**
-* @private
-* @param Object schema
-* @param SchemaContext ctx
-* @returns Object schema or resolved schema
-*/
-Validator.prototype.schemaTraverser = function schemaTraverser (schemaobj, s) {
-  schemaobj.schema = helpers.deepMerge(schemaobj.schema, this.superResolve(s, schemaobj.ctx));
+  return obj;
 };
 
-/**
-* @private
-* @param Object schema
-* @param SchemaContext ctx
-* @returns Object schema or resolved schema
-*/
-Validator.prototype.superResolve = function superResolve (schema, ctx) {
-  var ref = shouldResolve(schema);
-  if(ref) {
-    return this.resolve(schema, ref, ctx).subschema;
+var stringifyPrimitive = function(v) {
+  switch (typeof v) {
+    case 'string':
+      return v;
+
+    case 'boolean':
+      return v ? 'true' : 'false';
+
+    case 'number':
+      return isFinite(v) ? v : '';
+
+    default:
+      return '';
   }
-  return schema;
 };
 
-/**
-* @private
-* @param Object schema
-* @param Object switchSchema
-* @param SchemaContext ctx
-* @return Object resolved schemas {subschema:String, switchSchema: String}
-* @throws SchemaError
-*/
-Validator.prototype.resolve = function resolve (schema, switchSchema, ctx) {
-  switchSchema = ctx.resolve(switchSchema);
-  // First see if the schema exists under the provided URI
-  if (ctx.schemas[switchSchema]) {
-    return {subschema: ctx.schemas[switchSchema], switchSchema: switchSchema};
-  }
-  // Else try walking the property pointer
-  var parsed = urilib.parse(switchSchema);
-  var fragment = parsed && parsed.hash;
-  var document = fragment && fragment.length && switchSchema.substr(0, switchSchema.length - fragment.length);
-  if (!document || !ctx.schemas[document]) {
-    throw new SchemaError("no such schema <" + switchSchema + ">", schema);
+var encode = function(obj, sep, eq, name) {
+  sep = sep || '&';
+  eq = eq || '=';
+  if (obj === null) {
+    obj = undefined;
   }
-  var subschema = helpers.objectGetPath(ctx.schemas[document], fragment.substr(1));
-  if(subschema===undefined){
-    throw new SchemaError("no such schema " + fragment + " located in <" + document + ">", schema);
+
+  if (typeof obj === 'object') {
+    return Object.keys(obj).map(function(k) {
+      var ks = encodeURIComponent(stringifyPrimitive(k)) + eq;
+      if (Array.isArray(obj[k])) {
+        return obj[k].map(function(v) {
+          return ks + encodeURIComponent(stringifyPrimitive(v));
+        }).join(sep);
+      } else {
+        return ks + encodeURIComponent(stringifyPrimitive(obj[k]));
+      }
+    }).join(sep);
+
   }
-  return {subschema: subschema, switchSchema: switchSchema};
+
+  if (!name) return '';
+  return encodeURIComponent(stringifyPrimitive(name)) + eq +
+         encodeURIComponent(stringifyPrimitive(obj));
 };
 
-/**
- * Tests whether the instance if of a certain type.
- * @private
- * @param instance
- * @param schema
- * @param options
- * @param ctx
- * @param type
- * @return {boolean}
- */
-Validator.prototype.testType = function validateType (instance, schema, options, ctx, type) {
-  if(type===undefined){
-    return;
-  }else if(type===null){
-    throw new SchemaError('Unexpected null in "type" keyword');
+querystring$1.decode = querystring$1.parse = decode;
+querystring$1.encode = querystring$1.stringify = encode;
+
+var punycode = punycode$1.exports;
+var util = util$1;
+
+url.parse = urlParse;
+url.resolve = urlResolve;
+url.resolveObject = urlResolveObject;
+url.format = urlFormat;
+
+url.Url = Url;
+
+function Url() {
+  this.protocol = null;
+  this.slashes = null;
+  this.auth = null;
+  this.host = null;
+  this.port = null;
+  this.hostname = null;
+  this.hash = null;
+  this.search = null;
+  this.query = null;
+  this.pathname = null;
+  this.path = null;
+  this.href = null;
+}
+
+// Reference: RFC 3986, RFC 1808, RFC 2396
+
+// define these here so at least they only have to be
+// compiled once on the first module load.
+var protocolPattern = /^([a-z0-9.+-]+:)/i,
+    portPattern = /:[0-9]*$/,
+
+    // Special case for a simple path URL
+    simplePathPattern = /^(\/\/?(?!\/)[^\?\s]*)(\?[^\s]*)?$/,
+
+    // RFC 2396: characters reserved for delimiting URLs.
+    // We actually just auto-escape these.
+    delims = ['<', '>', '"', '`', ' ', '\r', '\n', '\t'],
+
+    // RFC 2396: characters not allowed for various reasons.
+    unwise = ['{', '}', '|', '\\', '^', '`'].concat(delims),
+
+    // Allowed by RFCs, but cause of XSS attacks.  Always escape these.
+    autoEscape = ['\''].concat(unwise),
+    // Characters that are never ever allowed in a hostname.
+    // Note that any invalid chars are also handled, but these
+    // are the ones that are *expected* to be seen, so we fast-path
+    // them.
+    nonHostChars = ['%', '/', '?', ';', '#'].concat(autoEscape),
+    hostEndingChars = ['/', '?', '#'],
+    hostnameMaxLen = 255,
+    hostnamePartPattern = /^[+a-z0-9A-Z_-]{0,63}$/,
+    hostnamePartStart = /^([+a-z0-9A-Z_-]{0,63})(.*)$/,
+    // protocols that can allow "unsafe" and "unwise" chars.
+    unsafeProtocol = {
+      'javascript': true,
+      'javascript:': true
+    },
+    // protocols that never have a hostname.
+    hostlessProtocol = {
+      'javascript': true,
+      'javascript:': true
+    },
+    // protocols that always contain a // bit.
+    slashedProtocol = {
+      'http': true,
+      'https': true,
+      'ftp': true,
+      'gopher': true,
+      'file': true,
+      'http:': true,
+      'https:': true,
+      'ftp:': true,
+      'gopher:': true,
+      'file:': true
+    },
+    querystring = querystring$1;
+
+function urlParse(url, parseQueryString, slashesDenoteHost) {
+  if (url && util.isObject(url) && url instanceof Url) return url;
+
+  var u = new Url;
+  u.parse(url, parseQueryString, slashesDenoteHost);
+  return u;
+}
+
+Url.prototype.parse = function(url, parseQueryString, slashesDenoteHost) {
+  if (!util.isString(url)) {
+    throw new TypeError("Parameter 'url' must be a string, not " + typeof url);
   }
-  if (typeof this.types[type] == 'function') {
-    return this.types[type].call(this, instance);
+
+  // Copy chrome, IE, opera backslash-handling behavior.
+  // Back slashes before the query string get converted to forward slashes
+  // See: https://code.google.com/p/chromium/issues/detail?id=25916
+  var queryIndex = url.indexOf('?'),
+      splitter =
+          (queryIndex !== -1 && queryIndex < url.indexOf('#')) ? '?' : '#',
+      uSplit = url.split(splitter),
+      slashRegex = /\\/g;
+  uSplit[0] = uSplit[0].replace(slashRegex, '/');
+  url = uSplit.join(splitter);
+
+  var rest = url;
+
+  // trim before proceeding.
+  // This is to support parse stuff like "  http://foo.com  \n"
+  rest = rest.trim();
+
+  if (!slashesDenoteHost && url.split('#').length === 1) {
+    // Try fast path regexp
+    var simplePath = simplePathPattern.exec(rest);
+    if (simplePath) {
+      this.path = rest;
+      this.href = rest;
+      this.pathname = simplePath[1];
+      if (simplePath[2]) {
+        this.search = simplePath[2];
+        if (parseQueryString) {
+          this.query = querystring.parse(this.search.substr(1));
+        } else {
+          this.query = this.search.substr(1);
+        }
+      } else if (parseQueryString) {
+        this.search = '';
+        this.query = {};
+      }
+      return this;
+    }
   }
-  if (type && typeof type == 'object') {
-    var res = this.validateSchema(instance, type, options, ctx);
-    return res === undefined || !(res && res.errors.length);
+
+  var proto = protocolPattern.exec(rest);
+  if (proto) {
+    proto = proto[0];
+    var lowerProto = proto.toLowerCase();
+    this.protocol = lowerProto;
+    rest = rest.substr(proto.length);
   }
-  // Undefined or properties not on the list are acceptable, same as not being defined
-  return true;
-};
 
-var types = Validator.prototype.types = {};
-types.string = function testString (instance) {
-  return typeof instance == 'string';
-};
-types.number = function testNumber (instance) {
-  // isFinite returns false for NaN, Infinity, and -Infinity
-  return typeof instance == 'number' && isFinite(instance);
-};
-types.integer = function testInteger (instance) {
-  return (typeof instance == 'number') && instance % 1 === 0;
-};
-types.boolean = function testBoolean (instance) {
-  return typeof instance == 'boolean';
-};
-types.array = function testArray (instance) {
-  return Array.isArray(instance);
-};
-types['null'] = function testNull (instance) {
-  return instance === null;
-};
-types.date = function testDate (instance) {
-  return instance instanceof Date;
-};
-types.any = function testAny (instance) {
-  return true;
-};
-types.object = function testObject (instance) {
-  // TODO: fix this - see #15
-  return instance && (typeof instance === 'object') && !(Array.isArray(instance)) && !(instance instanceof Date);
-};
+  // figure out if it's got a host
+  // user@server is *always* interpreted as a hostname, and url
+  // resolution will treat //foo/bar as host=foo,path=bar because that's
+  // how the browser resolves relative URLs.
+  if (slashesDenoteHost || proto || rest.match(/^\/\/[^@\/]+@[^@\/]+/)) {
+    var slashes = rest.substr(0, 2) === '//';
+    if (slashes && !(proto && hostlessProtocol[proto])) {
+      rest = rest.substr(2);
+      this.slashes = true;
+    }
+  }
 
-var validator = Validator;
+  if (!hostlessProtocol[proto] &&
+      (slashes || (proto && !slashedProtocol[proto]))) {
 
-var Validator_1;
+    // there's a hostname.
+    // the first instance of /, ?, ;, or # ends the host.
+    //
+    // If there is an @ in the hostname, then non-host chars *are* allowed
+    // to the left of the last @ sign, unless some host-ending character
+    // comes *before* the @-sign.
+    // URLs are obnoxious.
+    //
+    // ex:
+    // http://a@b@c/ => user:a@b host:c
+    // http://a@b?@c => user:a host:c path:/?@c
 
-Validator_1 = validator;
+    // v0.12 TODO(isaacs): This is not quite how Chrome does things.
+    // Review our test case against browsers more comprehensively.
 
-var schema$2 = "https://json-schema.org/draft/2020-12/schema";
-var id$2 = "/visualization";
-var title$2 = "Visualization";
-var description$2 = "A webgl visualization made of a sequence of tracks";
-var type$2 = "object";
-var required$1 = [
-	"tracks"
-];
-var properties$2 = {
-	labels: {
-		description: "set of labels to display on visualization, properties of labels can be any valid attribute for an svg text element",
-		examples: [
-			{
-				x: 100,
-				y: 200,
-				text: "my favorite data point",
-				rotate: -90
-			},
-			{
-				x: -1.1,
-				y: 0,
-				text: "Track 1",
-				color: "red",
-				fixedX: true
-			}
-		],
-		type: "array",
-		items: {
-			properties: {
-				x: {
-					description: "x coordinate of label with respect to data coordinates, should be on scale with [-1, 1] if x dimension is categorical or genomic",
-					type: "number"
-				},
-				y: {
-					description: "y coordinate of label with respect to data coordinates, should be on scale with [-1, 1] if y dimension is categorical or genomic",
-					type: "number"
-				},
-				fixedX: {
-					description: "fix the x coordinate of the label, so it does not move when panning/zooming left or right",
-					type: "boolean"
-				},
-				fixedY: {
-					description: "fix the y coordinate of the label, so it does not move when panning/zooming up or down",
-					type: "boolean"
-				},
-				required: [
-					"x",
-					"y"
-				]
-			}
-		}
-	},
-	xAxis: {
-		description: "location of x-axis",
-		"enum": [
-			"bottom",
-			"top",
-			"center",
-			"none",
-			"zero"
-		]
-	},
-	yAxis: {
-		description: "location of y-axis",
-		"enum": [
-			"left",
-			"right",
-			"center",
-			"none",
-			"zero"
-		]
-	},
-	tracks: {
-		description: "A track is a map from the data to a sequence of marks",
-		type: "array",
-		items: {
-			$ref: "/track"
-		}
-	},
-	defaultData: {
-		description: "A string of a csv href containing data or an object of inline data where each key is a column of values",
-		examples: [
-			"http://example.com/data.csv",
-			{
-				day: [
-					1,
-					2
-				],
-				price: [
-					10,
-					20
-				]
-			}
-		],
-		type: [
-			"string",
-			"object"
-		],
-		minProperties: 1,
-		patternProperties: {
-			"^.*$": {
-				type: "array",
-				items: {
-				}
-			}
-		}
-	},
-	width: {
-		description: "Width of the visualization in css units",
-		examples: [
-			"400px",
-			"100%",
-			"10em",
-			"600"
-		],
-		type: "string"
-	},
-	height: {
-		description: "Height of the visualization in css units",
-		examples: [
-			"400px",
-			"100%",
-			"10em",
-			"600"
-		],
-		type: "string"
-	},
-	margins: {
-		description: "Margins for the visualization; gives more space for labels and axis to render",
-		properties: {
-			top: {
-				description: "Top margin of the visualization in css units",
-				type: "string",
-				examples: [
-					"100px",
-					"5%",
-					"5em"
-				]
-			},
-			bottom: {
-				description: "Bottom margin of the visualization in css units",
-				type: "string",
-				examples: [
-					"100px",
-					"5%",
-					"5em"
-				]
-			},
-			left: {
-				description: "Left margin of the visualization in css units",
-				type: "string",
-				examples: [
-					"100px",
-					"5%",
-					"5em"
-				]
-			},
-			right: {
-				description: "Right margin of the visualization in css units",
-				type: "string",
-				examples: [
-					"100px",
-					"5%",
-					"5em"
-				]
-			}
-		}
-	}
-};
-var allOf$1 = [
-	{
-		description: "if there is no default data for the visualization require each track to have data property",
-		"if": {
-			not: {
-				required: [
-					"defaultData"
-				]
-			}
-		},
-		then: {
-			properties: {
-				tracks: {
-					items: {
-						required: [
-							"data"
-						]
-					}
-				}
-			}
-		},
-		"else": {
-		}
-	}
-];
-var visualization = {
-	schema: schema$2,
-	id: id$2,
-	title: title$2,
-	description: description$2,
-	type: type$2,
-	required: required$1,
-	properties: properties$2,
-	allOf: allOf$1
-};
+    // find the first instance of any hostEndingChars
+    var hostEnd = -1;
+    for (var i = 0; i < hostEndingChars.length; i++) {
+      var hec = rest.indexOf(hostEndingChars[i]);
+      if (hec !== -1 && (hostEnd === -1 || hec < hostEnd))
+        hostEnd = hec;
+    }
 
-var schema$1 = "https://json-schema.org/draft/2020-12/schema";
-var id$1 = "/track";
-var title$1 = "Track";
-var description$1 = "A track to visualize";
-var type$1 = "object";
-var required = [
-	"mark",
-	"x",
-	"y"
-];
-var properties$1 = {
-	data: {
-		description: "A string of a csv href containing data or an object of inline data where each key is an array of a data column",
-		type: [
-			"string",
-			"object"
-		],
-		additionalProperties: {
-			type: "array"
-		},
-		minProperties: 1
-	},
-	mark: {
-		description: "type of mark to visualize",
-		"enum": [
-			"point",
-			"line",
-			"area",
-			"rect",
-			"tick",
-			"arc"
-		]
-	},
-	tooltips: {
-		description: "a number between 0 and 1 where 0 is no tooltips, 1 is always show, and, for example, 0.1 would be show tooltips when zoomed in to 10% of the domain",
-		type: "number",
-		minimum: 0,
-		maximum: 1
-	},
-	x: {
-		description: "define the x coordinates of the marks",
-		type: "object",
-		allOf: [
-			{
-				$ref: "/channel"
-			}
-		],
-		examples: [
-			{
-				type: "genomic",
-				chrAttribute: "chr",
-				geneAttribute: "gene",
-				domain: [
-					"chr2:100",
-					"chr2:300"
-				]
-			}
-		]
-	},
-	y: {
-		description: "define the y coordinates of the marks",
-		type: "object",
-		allOf: [
-			{
-				$ref: "/channel"
-			}
-		],
-		examples: [
-			{
-				type: "quantitative",
-				attribute: "time",
-				domain: [
-					0,
-					10
-				]
-			},
-			{
-				attribute: "sample",
-				type: "categorical",
-				cardinality: 10
-			}
-		]
-	},
-	color: {
-		description: "define the color of the marks, for fixed values can be any css3 color descriptor or a number that translates to a color in hex",
-		type: "object",
-		properties: {
-			colorScheme: {
-				description: "d3 continuous color scheme to use, see d3-scale-chromatic for options",
-				examples: [
-					"interpolateBlues",
-					"interpolateReds",
-					"interpolateRainbow"
-				],
-				type: "string"
-			}
-		},
-		examples: [
-			{
-				value: "red"
-			},
-			{
-				value: 16581375
-			},
-			{
-				attribute: "sample",
-				type: "categorical",
-				cardinality: 10,
-				colorScheme: "interpolateBuGn"
-			}
-		],
-		allOf: [
-			{
-				$ref: "/channel"
-			}
-		]
-	},
-	size: {
-		description: "size of the mark, used only when mark type is point, use width or height for other mark types. The units of this channel correspond to 1/200th of the canvas e.g. a size of 100 is half the canvas.",
-		type: "object",
-		properties: {
-			maxSize: {
-				type: "number"
-			},
-			minSize: {
-				type: "number"
-			},
-			value: {
-				type: "number"
-			}
-		},
-		examples: [
-			{
-				attribute: "population",
-				type: "quantitative",
-				domain: [
-					0,
-					1000
-				],
-				maxSize: 10,
-				minSize: 1
-			}
-		],
-		allOf: [
-			{
-				$ref: "/channel"
-			}
-		]
-	},
-	width: {
-		description: "width of the mark, used for rect, arc, and tick marks only. The units of this channel correspond to 1/200th of the width of the canvas. This channel may be a genomic range type for arc tracks. If both height and width are specified for a tick mark, only width is used.",
-		type: "object",
-		properties: {
-			maxWidth: {
-				type: "number"
-			},
-			minWidth: {
-				type: "number"
-			},
-			value: {
-				type: "number"
-			}
-		},
-		allOf: [
-			{
-				$ref: "/channel"
-			}
-		]
-	},
-	height: {
-		description: "height of the mark, used for rect, arc, and tick marks only. The units of this channel correspond to 1/200th of the height of the canvas. This channel may be a genomic range type for arc tracks.",
-		type: "object",
-		properties: {
-			maxHeight: {
-				type: "number"
-			},
-			minHeight: {
-				type: "number"
-			},
-			value: {
-				type: "number"
-			}
-		},
-		allOf: [
-			{
-				$ref: "/channel"
-			}
-		]
-	},
-	opacity: {
-		description: "opacity of the mark, compatible with all mark types",
-		type: "object",
-		properties: {
-			minOpacity: {
-				type: "number",
-				minimum: 0,
-				exclusiveMaximum: 1
-			},
-			value: {
-				type: "number"
-			}
-		},
-		allOf: [
-			{
-				$ref: "/channel"
-			}
-		]
-	},
-	shape: {
-		description: "shape of the mark, used only for point marks",
-		type: "object",
-		properties: {
-			value: {
-				"enum": [
-					"dot",
-					"circle",
-					"diamond",
-					"triangle"
-				]
-			}
-		},
-		allOf: [
-			{
-				$ref: "/channel"
-			}
-		]
-	}
-};
-var track = {
-	schema: schema$1,
-	id: id$1,
-	title: title$1,
-	description: description$1,
-	type: type$1,
-	required: required,
-	properties: properties$1
-};
+    // at this point, either we have an explicit point where the
+    // auth portion cannot go past, or the last @ char is the decider.
+    var auth, atSign;
+    if (hostEnd === -1) {
+      // atSign can be anywhere.
+      atSign = rest.lastIndexOf('@');
+    } else {
+      // atSign must be in auth portion.
+      // http://a@b/c@d => host:b auth:a path:/c@d
+      atSign = rest.lastIndexOf('@', hostEnd);
+    }
 
-var schema = "https://json-schema.org/draft/2020-12/schema";
-var id = "/channel";
-var title = "Channel";
-var description = "A channel of a visualization";
-var type = "object";
-var properties = {
-	type: {
-		description: "type of attribute, genomic range only compatible with x, y, width and height",
-		"enum": [
-			"quantitative",
-			"categorical",
-			"genomic",
-			"genomicRange",
-			"inline"
-		]
-	},
-	attribute: {
-		description: "column of data frame to use for mapping channel",
-		type: "string"
-	},
-	value: {
-		description: "if fixing a channel, specify with value",
-		type: [
-			"string",
-			"number",
-			"boolean"
-		]
-	},
-	domain: {
-		description: "domain of attribute to use for mapping, required if type is quantitative",
-		type: "array"
-	},
-	cardinality: {
-		description: "number of attribute values to use for mapping, required if type is categorical",
-		type: "integer"
-	},
-	chrAttribute: {
-		description: "if type is genomic or genomicRange, the attribute that contains the chromosome id",
-		type: "string"
-	},
-	startAttribute: {
-		description: "if type is genomicRange, the attribute that contains the start of the range",
-		type: "string"
-	},
-	endAttribute: {
-		description: "if type is genomicRange, the attribute that contains the end of the range",
-		type: "string"
-	},
-	genome: {
-		description: "genome being mapped",
-		"enum": [
-			"hg38",
-			"hg19",
-			"mm39"
-		]
-	}
-};
-var allOf = [
-	{
-		description: "If type is genomic, require genomic attributes and forbid regular attributes",
-		anyOf: [
-			{
-				not: {
-					properties: {
-						type: {
-							"const": "genomic"
-						}
-					},
-					required: [
+    // Now we have a portion which is definitely the auth.
+    // Pull that off.
+    if (atSign !== -1) {
+      auth = rest.slice(0, atSign);
+      rest = rest.slice(atSign + 1);
+      this.auth = decodeURIComponent(auth);
+    }
+
+    // the host is the remaining to the left of the first non-host char
+    hostEnd = -1;
+    for (var i = 0; i < nonHostChars.length; i++) {
+      var hec = rest.indexOf(nonHostChars[i]);
+      if (hec !== -1 && (hostEnd === -1 || hec < hostEnd))
+        hostEnd = hec;
+    }
+    // if we still have not hit it, then the entire thing is a host.
+    if (hostEnd === -1)
+      hostEnd = rest.length;
+
+    this.host = rest.slice(0, hostEnd);
+    rest = rest.slice(hostEnd);
+
+    // pull out port.
+    this.parseHost();
+
+    // we've indicated that there is a hostname,
+    // so even if it's empty, it has to be present.
+    this.hostname = this.hostname || '';
+
+    // if hostname begins with [ and ends with ]
+    // assume that it's an IPv6 address.
+    var ipv6Hostname = this.hostname[0] === '[' &&
+        this.hostname[this.hostname.length - 1] === ']';
+
+    // validate a little.
+    if (!ipv6Hostname) {
+      var hostparts = this.hostname.split(/\./);
+      for (var i = 0, l = hostparts.length; i < l; i++) {
+        var part = hostparts[i];
+        if (!part) continue;
+        if (!part.match(hostnamePartPattern)) {
+          var newpart = '';
+          for (var j = 0, k = part.length; j < k; j++) {
+            if (part.charCodeAt(j) > 127) {
+              // we replace non-ASCII char with a temporary placeholder
+              // we need this to make sure size of hostname is not
+              // broken by replacing non-ASCII by nothing
+              newpart += 'x';
+            } else {
+              newpart += part[j];
+            }
+          }
+          // we test again with ASCII char only
+          if (!newpart.match(hostnamePartPattern)) {
+            var validParts = hostparts.slice(0, i);
+            var notHost = hostparts.slice(i + 1);
+            var bit = part.match(hostnamePartStart);
+            if (bit) {
+              validParts.push(bit[1]);
+              notHost.unshift(bit[2]);
+            }
+            if (notHost.length) {
+              rest = '/' + notHost.join('.') + rest;
+            }
+            this.hostname = validParts.join('.');
+            break;
+          }
+        }
+      }
+    }
+
+    if (this.hostname.length > hostnameMaxLen) {
+      this.hostname = '';
+    } else {
+      // hostnames are always lower case.
+      this.hostname = this.hostname.toLowerCase();
+    }
+
+    if (!ipv6Hostname) {
+      // IDNA Support: Returns a punycoded representation of "domain".
+      // It only converts parts of the domain name that
+      // have non-ASCII characters, i.e. it doesn't matter if
+      // you call it with a domain that already is ASCII-only.
+      this.hostname = punycode.toASCII(this.hostname);
+    }
+
+    var p = this.port ? ':' + this.port : '';
+    var h = this.hostname || '';
+    this.host = h + p;
+    this.href += this.host;
+
+    // strip [ and ] from the hostname
+    // the host field still retains them, though
+    if (ipv6Hostname) {
+      this.hostname = this.hostname.substr(1, this.hostname.length - 2);
+      if (rest[0] !== '/') {
+        rest = '/' + rest;
+      }
+    }
+  }
+
+  // now rest is set to the post-host stuff.
+  // chop off any delim chars.
+  if (!unsafeProtocol[lowerProto]) {
+
+    // First, make 100% sure that any "autoEscape" chars get
+    // escaped, even if encodeURIComponent doesn't think they
+    // need to be.
+    for (var i = 0, l = autoEscape.length; i < l; i++) {
+      var ae = autoEscape[i];
+      if (rest.indexOf(ae) === -1)
+        continue;
+      var esc = encodeURIComponent(ae);
+      if (esc === ae) {
+        esc = escape(ae);
+      }
+      rest = rest.split(ae).join(esc);
+    }
+  }
+
+
+  // chop off from the tail first.
+  var hash = rest.indexOf('#');
+  if (hash !== -1) {
+    // got a fragment string.
+    this.hash = rest.substr(hash);
+    rest = rest.slice(0, hash);
+  }
+  var qm = rest.indexOf('?');
+  if (qm !== -1) {
+    this.search = rest.substr(qm);
+    this.query = rest.substr(qm + 1);
+    if (parseQueryString) {
+      this.query = querystring.parse(this.query);
+    }
+    rest = rest.slice(0, qm);
+  } else if (parseQueryString) {
+    // no query string, but parseQueryString still requested
+    this.search = '';
+    this.query = {};
+  }
+  if (rest) this.pathname = rest;
+  if (slashedProtocol[lowerProto] &&
+      this.hostname && !this.pathname) {
+    this.pathname = '/';
+  }
+
+  //to support http.request
+  if (this.pathname || this.search) {
+    var p = this.pathname || '';
+    var s = this.search || '';
+    this.path = p + s;
+  }
+
+  // finally, reconstruct the href based on what has been validated.
+  this.href = this.format();
+  return this;
+};
+
+// format a parsed object into a url string
+function urlFormat(obj) {
+  // ensure it's an object, and not a string url.
+  // If it's an obj, this is a no-op.
+  // this way, you can call url_format() on strings
+  // to clean up potentially wonky urls.
+  if (util.isString(obj)) obj = urlParse(obj);
+  if (!(obj instanceof Url)) return Url.prototype.format.call(obj);
+  return obj.format();
+}
+
+Url.prototype.format = function() {
+  var auth = this.auth || '';
+  if (auth) {
+    auth = encodeURIComponent(auth);
+    auth = auth.replace(/%3A/i, ':');
+    auth += '@';
+  }
+
+  var protocol = this.protocol || '',
+      pathname = this.pathname || '',
+      hash = this.hash || '',
+      host = false,
+      query = '';
+
+  if (this.host) {
+    host = auth + this.host;
+  } else if (this.hostname) {
+    host = auth + (this.hostname.indexOf(':') === -1 ?
+        this.hostname :
+        '[' + this.hostname + ']');
+    if (this.port) {
+      host += ':' + this.port;
+    }
+  }
+
+  if (this.query &&
+      util.isObject(this.query) &&
+      Object.keys(this.query).length) {
+    query = querystring.stringify(this.query);
+  }
+
+  var search = this.search || (query && ('?' + query)) || '';
+
+  if (protocol && protocol.substr(-1) !== ':') protocol += ':';
+
+  // only the slashedProtocols get the //.  Not mailto:, xmpp:, etc.
+  // unless they had them to begin with.
+  if (this.slashes ||
+      (!protocol || slashedProtocol[protocol]) && host !== false) {
+    host = '//' + (host || '');
+    if (pathname && pathname.charAt(0) !== '/') pathname = '/' + pathname;
+  } else if (!host) {
+    host = '';
+  }
+
+  if (hash && hash.charAt(0) !== '#') hash = '#' + hash;
+  if (search && search.charAt(0) !== '?') search = '?' + search;
+
+  pathname = pathname.replace(/[?#]/g, function(match) {
+    return encodeURIComponent(match);
+  });
+  search = search.replace('#', '%23');
+
+  return protocol + host + pathname + search + hash;
+};
+
+function urlResolve(source, relative) {
+  return urlParse(source, false, true).resolve(relative);
+}
+
+Url.prototype.resolve = function(relative) {
+  return this.resolveObject(urlParse(relative, false, true)).format();
+};
+
+function urlResolveObject(source, relative) {
+  if (!source) return relative;
+  return urlParse(source, false, true).resolveObject(relative);
+}
+
+Url.prototype.resolveObject = function(relative) {
+  if (util.isString(relative)) {
+    var rel = new Url();
+    rel.parse(relative, false, true);
+    relative = rel;
+  }
+
+  var result = new Url();
+  var tkeys = Object.keys(this);
+  for (var tk = 0; tk < tkeys.length; tk++) {
+    var tkey = tkeys[tk];
+    result[tkey] = this[tkey];
+  }
+
+  // hash is always overridden, no matter what.
+  // even href="" will remove it.
+  result.hash = relative.hash;
+
+  // if the relative url is empty, then there's nothing left to do here.
+  if (relative.href === '') {
+    result.href = result.format();
+    return result;
+  }
+
+  // hrefs like //foo/bar always cut to the protocol.
+  if (relative.slashes && !relative.protocol) {
+    // take everything except the protocol from relative
+    var rkeys = Object.keys(relative);
+    for (var rk = 0; rk < rkeys.length; rk++) {
+      var rkey = rkeys[rk];
+      if (rkey !== 'protocol')
+        result[rkey] = relative[rkey];
+    }
+
+    //urlParse appends trailing / to urls like http://www.example.com
+    if (slashedProtocol[result.protocol] &&
+        result.hostname && !result.pathname) {
+      result.path = result.pathname = '/';
+    }
+
+    result.href = result.format();
+    return result;
+  }
+
+  if (relative.protocol && relative.protocol !== result.protocol) {
+    // if it's a known url protocol, then changing
+    // the protocol does weird things
+    // first, if it's not file:, then we MUST have a host,
+    // and if there was a path
+    // to begin with, then we MUST have a path.
+    // if it is file:, then the host is dropped,
+    // because that's known to be hostless.
+    // anything else is assumed to be absolute.
+    if (!slashedProtocol[relative.protocol]) {
+      var keys = Object.keys(relative);
+      for (var v = 0; v < keys.length; v++) {
+        var k = keys[v];
+        result[k] = relative[k];
+      }
+      result.href = result.format();
+      return result;
+    }
+
+    result.protocol = relative.protocol;
+    if (!relative.host && !hostlessProtocol[relative.protocol]) {
+      var relPath = (relative.pathname || '').split('/');
+      while (relPath.length && !(relative.host = relPath.shift()));
+      if (!relative.host) relative.host = '';
+      if (!relative.hostname) relative.hostname = '';
+      if (relPath[0] !== '') relPath.unshift('');
+      if (relPath.length < 2) relPath.unshift('');
+      result.pathname = relPath.join('/');
+    } else {
+      result.pathname = relative.pathname;
+    }
+    result.search = relative.search;
+    result.query = relative.query;
+    result.host = relative.host || '';
+    result.auth = relative.auth;
+    result.hostname = relative.hostname || relative.host;
+    result.port = relative.port;
+    // to support http.request
+    if (result.pathname || result.search) {
+      var p = result.pathname || '';
+      var s = result.search || '';
+      result.path = p + s;
+    }
+    result.slashes = result.slashes || relative.slashes;
+    result.href = result.format();
+    return result;
+  }
+
+  var isSourceAbs = (result.pathname && result.pathname.charAt(0) === '/'),
+      isRelAbs = (
+          relative.host ||
+          relative.pathname && relative.pathname.charAt(0) === '/'
+      ),
+      mustEndAbs = (isRelAbs || isSourceAbs ||
+                    (result.host && relative.pathname)),
+      removeAllDots = mustEndAbs,
+      srcPath = result.pathname && result.pathname.split('/') || [],
+      relPath = relative.pathname && relative.pathname.split('/') || [],
+      psychotic = result.protocol && !slashedProtocol[result.protocol];
+
+  // if the url is a non-slashed url, then relative
+  // links like ../.. should be able
+  // to crawl up to the hostname, as well.  This is strange.
+  // result.protocol has already been set by now.
+  // Later on, put the first path part into the host field.
+  if (psychotic) {
+    result.hostname = '';
+    result.port = null;
+    if (result.host) {
+      if (srcPath[0] === '') srcPath[0] = result.host;
+      else srcPath.unshift(result.host);
+    }
+    result.host = '';
+    if (relative.protocol) {
+      relative.hostname = null;
+      relative.port = null;
+      if (relative.host) {
+        if (relPath[0] === '') relPath[0] = relative.host;
+        else relPath.unshift(relative.host);
+      }
+      relative.host = null;
+    }
+    mustEndAbs = mustEndAbs && (relPath[0] === '' || srcPath[0] === '');
+  }
+
+  if (isRelAbs) {
+    // it's absolute.
+    result.host = (relative.host || relative.host === '') ?
+                  relative.host : result.host;
+    result.hostname = (relative.hostname || relative.hostname === '') ?
+                      relative.hostname : result.hostname;
+    result.search = relative.search;
+    result.query = relative.query;
+    srcPath = relPath;
+    // fall through to the dot-handling below.
+  } else if (relPath.length) {
+    // it's relative
+    // throw away the existing file, and take the new path instead.
+    if (!srcPath) srcPath = [];
+    srcPath.pop();
+    srcPath = srcPath.concat(relPath);
+    result.search = relative.search;
+    result.query = relative.query;
+  } else if (!util.isNullOrUndefined(relative.search)) {
+    // just pull out the search.
+    // like href='?foo'.
+    // Put this after the other two cases because it simplifies the booleans
+    if (psychotic) {
+      result.hostname = result.host = srcPath.shift();
+      //occationaly the auth can get stuck only in host
+      //this especially happens in cases like
+      //url.resolveObject('mailto:local1@domain1', 'local2@domain2')
+      var authInHost = result.host && result.host.indexOf('@') > 0 ?
+                       result.host.split('@') : false;
+      if (authInHost) {
+        result.auth = authInHost.shift();
+        result.host = result.hostname = authInHost.shift();
+      }
+    }
+    result.search = relative.search;
+    result.query = relative.query;
+    //to support http.request
+    if (!util.isNull(result.pathname) || !util.isNull(result.search)) {
+      result.path = (result.pathname ? result.pathname : '') +
+                    (result.search ? result.search : '');
+    }
+    result.href = result.format();
+    return result;
+  }
+
+  if (!srcPath.length) {
+    // no path at all.  easy.
+    // we've already handled the other stuff above.
+    result.pathname = null;
+    //to support http.request
+    if (result.search) {
+      result.path = '/' + result.search;
+    } else {
+      result.path = null;
+    }
+    result.href = result.format();
+    return result;
+  }
+
+  // if a url ENDs in . or .., then it must get a trailing slash.
+  // however, if it ends in anything else non-slashy,
+  // then it must NOT get a trailing slash.
+  var last = srcPath.slice(-1)[0];
+  var hasTrailingSlash = (
+      (result.host || relative.host || srcPath.length > 1) &&
+      (last === '.' || last === '..') || last === '');
+
+  // strip single dots, resolve double dots to parent dir
+  // if the path tries to go above the root, `up` ends up > 0
+  var up = 0;
+  for (var i = srcPath.length; i >= 0; i--) {
+    last = srcPath[i];
+    if (last === '.') {
+      srcPath.splice(i, 1);
+    } else if (last === '..') {
+      srcPath.splice(i, 1);
+      up++;
+    } else if (up) {
+      srcPath.splice(i, 1);
+      up--;
+    }
+  }
+
+  // if the path is allowed to go above the root, restore leading ..s
+  if (!mustEndAbs && !removeAllDots) {
+    for (; up--; up) {
+      srcPath.unshift('..');
+    }
+  }
+
+  if (mustEndAbs && srcPath[0] !== '' &&
+      (!srcPath[0] || srcPath[0].charAt(0) !== '/')) {
+    srcPath.unshift('');
+  }
+
+  if (hasTrailingSlash && (srcPath.join('/').substr(-1) !== '/')) {
+    srcPath.push('');
+  }
+
+  var isAbsolute = srcPath[0] === '' ||
+      (srcPath[0] && srcPath[0].charAt(0) === '/');
+
+  // put the host back
+  if (psychotic) {
+    result.hostname = result.host = isAbsolute ? '' :
+                                    srcPath.length ? srcPath.shift() : '';
+    //occationaly the auth can get stuck only in host
+    //this especially happens in cases like
+    //url.resolveObject('mailto:local1@domain1', 'local2@domain2')
+    var authInHost = result.host && result.host.indexOf('@') > 0 ?
+                     result.host.split('@') : false;
+    if (authInHost) {
+      result.auth = authInHost.shift();
+      result.host = result.hostname = authInHost.shift();
+    }
+  }
+
+  mustEndAbs = mustEndAbs || (result.host && srcPath.length);
+
+  if (mustEndAbs && !isAbsolute) {
+    srcPath.unshift('');
+  }
+
+  if (!srcPath.length) {
+    result.pathname = null;
+    result.path = null;
+  } else {
+    result.pathname = srcPath.join('/');
+  }
+
+  //to support request.http
+  if (!util.isNull(result.pathname) || !util.isNull(result.search)) {
+    result.path = (result.pathname ? result.pathname : '') +
+                  (result.search ? result.search : '');
+  }
+  result.auth = relative.auth || result.auth;
+  result.slashes = result.slashes || relative.slashes;
+  result.href = result.format();
+  return result;
+};
+
+Url.prototype.parseHost = function() {
+  var host = this.host;
+  var port = portPattern.exec(host);
+  if (port) {
+    port = port[0];
+    if (port !== ':') {
+      this.port = port.substr(1);
+    }
+    host = host.substr(0, host.length - port.length);
+  }
+  if (host) this.hostname = host;
+};
+
+var helpers$3 = {};
+
+var uri = url;
+
+var ValidationError = helpers$3.ValidationError = function ValidationError (message, instance, schema, path, name, argument) {
+  if(Array.isArray(path)){
+    this.path = path;
+    this.property = path.reduce(function(sum, item){
+      return sum + makeSuffix(item);
+    }, 'instance');
+  }else if(path !== undefined){
+    this.property = path;
+  }
+  if (message) {
+    this.message = message;
+  }
+  if (schema) {
+    var id = schema.$id || schema.id;
+    this.schema = id || schema;
+  }
+  if (instance !== undefined) {
+    this.instance = instance;
+  }
+  this.name = name;
+  this.argument = argument;
+  this.stack = this.toString();
+};
+
+ValidationError.prototype.toString = function toString() {
+  return this.property + ' ' + this.message;
+};
+
+var ValidatorResult$2 = helpers$3.ValidatorResult = function ValidatorResult(instance, schema, options, ctx) {
+  this.instance = instance;
+  this.schema = schema;
+  this.options = options;
+  this.path = ctx.path;
+  this.propertyPath = ctx.propertyPath;
+  this.errors = [];
+  this.throwError = options && options.throwError;
+  this.throwFirst = options && options.throwFirst;
+  this.throwAll = options && options.throwAll;
+  this.disableFormat = options && options.disableFormat === true;
+};
+
+ValidatorResult$2.prototype.addError = function addError(detail) {
+  var err;
+  if (typeof detail == 'string') {
+    err = new ValidationError(detail, this.instance, this.schema, this.path);
+  } else {
+    if (!detail) throw new Error('Missing error detail');
+    if (!detail.message) throw new Error('Missing error message');
+    if (!detail.name) throw new Error('Missing validator type');
+    err = new ValidationError(detail.message, this.instance, this.schema, this.path, detail.name, detail.argument);
+  }
+
+  this.errors.push(err);
+  if (this.throwFirst) {
+    throw new ValidatorResultError$1(this);
+  }else if(this.throwError){
+    throw err;
+  }
+  return err;
+};
+
+ValidatorResult$2.prototype.importErrors = function importErrors(res) {
+  if (typeof res == 'string' || (res && res.validatorType)) {
+    this.addError(res);
+  } else if (res && res.errors) {
+    Array.prototype.push.apply(this.errors, res.errors);
+  }
+};
+
+function stringizer (v,i){
+  return i+': '+v.toString()+'\n';
+}
+ValidatorResult$2.prototype.toString = function toString(res) {
+  return this.errors.map(stringizer).join('');
+};
+
+Object.defineProperty(ValidatorResult$2.prototype, "valid", { get: function() {
+  return !this.errors.length;
+} });
+
+helpers$3.ValidatorResultError = ValidatorResultError$1;
+function ValidatorResultError$1(result) {
+  if(Error.captureStackTrace){
+    Error.captureStackTrace(this, ValidatorResultError$1);
+  }
+  this.instance = result.instance;
+  this.schema = result.schema;
+  this.options = result.options;
+  this.errors = result.errors;
+}
+ValidatorResultError$1.prototype = new Error();
+ValidatorResultError$1.prototype.constructor = ValidatorResultError$1;
+ValidatorResultError$1.prototype.name = "Validation Error";
+
+/**
+ * Describes a problem with a Schema which prevents validation of an instance
+ * @name SchemaError
+ * @constructor
+ */
+var SchemaError$2 = helpers$3.SchemaError = function SchemaError (msg, schema) {
+  this.message = msg;
+  this.schema = schema;
+  Error.call(this, msg);
+  Error.captureStackTrace(this, SchemaError);
+};
+SchemaError$2.prototype = Object.create(Error.prototype,
+  {
+    constructor: {value: SchemaError$2, enumerable: false},
+    name: {value: 'SchemaError', enumerable: false},
+  });
+
+var SchemaContext$1 = helpers$3.SchemaContext = function SchemaContext (schema, options, path, base, schemas) {
+  this.schema = schema;
+  this.options = options;
+  if(Array.isArray(path)){
+    this.path = path;
+    this.propertyPath = path.reduce(function(sum, item){
+      return sum + makeSuffix(item);
+    }, 'instance');
+  }else {
+    this.propertyPath = path;
+  }
+  this.base = base;
+  this.schemas = schemas;
+};
+
+SchemaContext$1.prototype.resolve = function resolve (target) {
+  return uri.resolve(this.base, target);
+};
+
+SchemaContext$1.prototype.makeChild = function makeChild(schema, propertyName){
+  var path = (propertyName===undefined) ? this.path : this.path.concat([propertyName]);
+  var id = schema.$id || schema.id;
+  var base = uri.resolve(this.base, id||'');
+  var ctx = new SchemaContext$1(schema, this.options, path, base, Object.create(this.schemas));
+  if(id && !ctx.schemas[base]){
+    ctx.schemas[base] = schema;
+  }
+  return ctx;
+};
+
+var FORMAT_REGEXPS = helpers$3.FORMAT_REGEXPS = {
+  'date-time': /^\d{4}-(?:0[0-9]{1}|1[0-2]{1})-(3[01]|0[1-9]|[12][0-9])[tT ](2[0-4]|[01][0-9]):([0-5][0-9]):(60|[0-5][0-9])(\.\d+)?([zZ]|[+-]([0-5][0-9]):(60|[0-5][0-9]))$/,
+  'date': /^\d{4}-(?:0[0-9]{1}|1[0-2]{1})-(3[01]|0[1-9]|[12][0-9])$/,
+  'time': /^(2[0-4]|[01][0-9]):([0-5][0-9]):(60|[0-5][0-9])$/,
+
+  'email': /^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+@(?:(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!\.)){0,61}[a-zA-Z0-9]?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!$)){0,61}[a-zA-Z0-9]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$/,
+  'ip-address': /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
+  'ipv6': /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/,
+
+  // TODO: A more accurate regular expression for "uri" goes:
+  // [A-Za-z][+\-.0-9A-Za-z]*:((/(/((%[0-9A-Fa-f]{2}|[!$&-.0-9;=A-Z_a-z~])+|(\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?)(:\d*)?)?)?#(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*|(/(/((%[0-9A-Fa-f]{2}|[!$&-.0-9;=A-Z_a-z~])+|(\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?)(:\d*)?[/?]|[!$&-.0-;=?-Z_a-z~])|/?%[0-9A-Fa-f]{2}|[!$&-.0-;=?-Z_a-z~])(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*(#(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*)?|/(/((%[0-9A-Fa-f]{2}|[!$&-.0-9;=A-Z_a-z~])+(:\d*)?|(\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?:\d*|\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?)?)?
+  'uri': /^[a-zA-Z][a-zA-Z0-9+-.]*:[^\s]*$/,
+  'uri-reference': /^(((([A-Za-z][+\-.0-9A-Za-z]*(:%[0-9A-Fa-f]{2}|:[!$&-.0-;=?-Z_a-z~]|[/?])|\?)(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*|([A-Za-z][+\-.0-9A-Za-z]*:?)?)|([A-Za-z][+\-.0-9A-Za-z]*:)?\/((%[0-9A-Fa-f]{2}|\/((%[0-9A-Fa-f]{2}|[!$&-.0-9;=A-Z_a-z~])+|(\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?)(:\d*)?[/?]|[!$&-.0-;=?-Z_a-z~])(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*|(\/((%[0-9A-Fa-f]{2}|[!$&-.0-9;=A-Z_a-z~])+|(\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?)(:\d*)?)?))#(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*|(([A-Za-z][+\-.0-9A-Za-z]*)?%[0-9A-Fa-f]{2}|[!$&-.0-9;=@_~]|[A-Za-z][+\-.0-9A-Za-z]*[!$&-*,;=@_~])(%[0-9A-Fa-f]{2}|[!$&-.0-9;=@-Z_a-z~])*((([/?](%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*)?#|[/?])(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*)?|([A-Za-z][+\-.0-9A-Za-z]*(:%[0-9A-Fa-f]{2}|:[!$&-.0-;=?-Z_a-z~]|[/?])|\?)(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*|([A-Za-z][+\-.0-9A-Za-z]*:)?\/((%[0-9A-Fa-f]{2}|\/((%[0-9A-Fa-f]{2}|[!$&-.0-9;=A-Z_a-z~])+|(\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?)(:\d*)?[/?]|[!$&-.0-;=?-Z_a-z~])(%[0-9A-Fa-f]{2}|[!$&-;=?-Z_a-z~])*|\/((%[0-9A-Fa-f]{2}|[!$&-.0-9;=A-Z_a-z~])+(:\d*)?|(\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?:\d*|\[(([Vv][0-9A-Fa-f]+\.[!$&-.0-;=A-Z_a-z~]+)?|[.0-:A-Fa-f]+)\])?)?|[A-Za-z][+\-.0-9A-Za-z]*:?)?$/,
+
+  'color': /^(#?([0-9A-Fa-f]{3}){1,2}\b|aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow|(rgb\(\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*,\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*,\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*\))|(rgb\(\s*(\d?\d%|100%)+\s*,\s*(\d?\d%|100%)+\s*,\s*(\d?\d%|100%)+\s*\)))$/,
+
+  // hostname regex from: http://stackoverflow.com/a/1420225/5628
+  'hostname': /^(?=.{1,255}$)[0-9A-Za-z](?:(?:[0-9A-Za-z]|-){0,61}[0-9A-Za-z])?(?:\.[0-9A-Za-z](?:(?:[0-9A-Za-z]|-){0,61}[0-9A-Za-z])?)*\.?$/,
+  'host-name': /^(?=.{1,255}$)[0-9A-Za-z](?:(?:[0-9A-Za-z]|-){0,61}[0-9A-Za-z])?(?:\.[0-9A-Za-z](?:(?:[0-9A-Za-z]|-){0,61}[0-9A-Za-z])?)*\.?$/,
+
+  'alpha': /^[a-zA-Z]+$/,
+  'alphanumeric': /^[a-zA-Z0-9]+$/,
+  'utc-millisec': function (input) {
+    return (typeof input === 'string') && parseFloat(input) === parseInt(input, 10) && !isNaN(input);
+  },
+  'regex': function (input) {
+    var result = true;
+    try {
+      new RegExp(input);
+    } catch (e) {
+      result = false;
+    }
+    return result;
+  },
+  'style': /\s*(.+?):\s*([^;]+);?/,
+  'phone': /^\+(?:[0-9] ?){6,14}[0-9]$/,
+};
+
+FORMAT_REGEXPS.regexp = FORMAT_REGEXPS.regex;
+FORMAT_REGEXPS.pattern = FORMAT_REGEXPS.regex;
+FORMAT_REGEXPS.ipv4 = FORMAT_REGEXPS['ip-address'];
+
+helpers$3.isFormat = function isFormat (input, format, validator) {
+  if (typeof input === 'string' && FORMAT_REGEXPS[format] !== undefined) {
+    if (FORMAT_REGEXPS[format] instanceof RegExp) {
+      return FORMAT_REGEXPS[format].test(input);
+    }
+    if (typeof FORMAT_REGEXPS[format] === 'function') {
+      return FORMAT_REGEXPS[format](input);
+    }
+  } else if (validator && validator.customFormats &&
+      typeof validator.customFormats[format] === 'function') {
+    return validator.customFormats[format](input);
+  }
+  return true;
+};
+
+var makeSuffix = helpers$3.makeSuffix = function makeSuffix (key) {
+  key = key.toString();
+  // This function could be capable of outputting valid a ECMAScript string, but the
+  // resulting code for testing which form to use would be tens of thousands of characters long
+  // That means this will use the name form for some illegal forms
+  if (!key.match(/[.\s\[\]]/) && !key.match(/^[\d]/)) {
+    return '.' + key;
+  }
+  if (key.match(/^\d+$/)) {
+    return '[' + key + ']';
+  }
+  return '[' + JSON.stringify(key) + ']';
+};
+
+helpers$3.deepCompareStrict = function deepCompareStrict (a, b) {
+  if (typeof a !== typeof b) {
+    return false;
+  }
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b)) {
+      return false;
+    }
+    if (a.length !== b.length) {
+      return false;
+    }
+    return a.every(function (v, i) {
+      return deepCompareStrict(a[i], b[i]);
+    });
+  }
+  if (typeof a === 'object') {
+    if (!a || !b) {
+      return a === b;
+    }
+    var aKeys = Object.keys(a);
+    var bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) {
+      return false;
+    }
+    return aKeys.every(function (v) {
+      return deepCompareStrict(a[v], b[v]);
+    });
+  }
+  return a === b;
+};
+
+function deepMerger (target, dst, e, i) {
+  if (typeof e === 'object') {
+    dst[i] = deepMerge(target[i], e);
+  } else {
+    if (target.indexOf(e) === -1) {
+      dst.push(e);
+    }
+  }
+}
+
+function copyist (src, dst, key) {
+  dst[key] = src[key];
+}
+
+function copyistWithDeepMerge (target, src, dst, key) {
+  if (typeof src[key] !== 'object' || !src[key]) {
+    dst[key] = src[key];
+  }
+  else {
+    if (!target[key]) {
+      dst[key] = src[key];
+    } else {
+      dst[key] = deepMerge(target[key], src[key]);
+    }
+  }
+}
+
+function deepMerge (target, src) {
+  var array = Array.isArray(src);
+  var dst = array && [] || {};
+
+  if (array) {
+    target = target || [];
+    dst = dst.concat(target);
+    src.forEach(deepMerger.bind(null, target, dst));
+  } else {
+    if (target && typeof target === 'object') {
+      Object.keys(target).forEach(copyist.bind(null, target, dst));
+    }
+    Object.keys(src).forEach(copyistWithDeepMerge.bind(null, target, src, dst));
+  }
+
+  return dst;
+}
+
+helpers$3.deepMerge = deepMerge;
+
+/**
+ * Validates instance against the provided schema
+ * Implements URI+JSON Pointer encoding, e.g. "%7e"="~0"=>"~", "~1"="%2f"=>"/"
+ * @param o
+ * @param s The path to walk o along
+ * @return any
+ */
+helpers$3.objectGetPath = function objectGetPath(o, s) {
+  var parts = s.split('/').slice(1);
+  var k;
+  while (typeof (k=parts.shift()) == 'string') {
+    var n = decodeURIComponent(k.replace(/~0/,'~').replace(/~1/g,'/'));
+    if (!(n in o)) return;
+    o = o[n];
+  }
+  return o;
+};
+
+function pathEncoder (v) {
+  return '/'+encodeURIComponent(v).replace(/~/g,'%7E');
+}
+/**
+ * Accept an Array of property names and return a JSON Pointer URI fragment
+ * @param Array a
+ * @return {String}
+ */
+helpers$3.encodePath = function encodePointer(a){
+  // ~ must be encoded explicitly because hacks
+  // the slash is encoded by encodeURIComponent
+  return a.map(pathEncoder).join('');
+};
+
+
+/**
+ * Calculate the number of decimal places a number uses
+ * We need this to get correct results out of multipleOf and divisibleBy
+ * when either figure is has decimal places, due to IEEE-754 float issues.
+ * @param number
+ * @returns {number}
+ */
+helpers$3.getDecimalPlaces = function getDecimalPlaces(number) {
+
+  var decimalPlaces = 0;
+  if (isNaN(number)) return decimalPlaces;
+
+  if (typeof number !== 'number') {
+    number = Number(number);
+  }
+
+  var parts = number.toString().split('e');
+  if (parts.length === 2) {
+    if (parts[1][0] !== '-') {
+      return decimalPlaces;
+    } else {
+      decimalPlaces = Number(parts[1].slice(1));
+    }
+  }
+
+  var decimalParts = parts[0].split('.');
+  if (decimalParts.length === 2) {
+    decimalPlaces += decimalParts[1].length;
+  }
+
+  return decimalPlaces;
+};
+
+helpers$3.isSchema = function isSchema(val){
+  return (typeof val === 'object' && val) || (typeof val === 'boolean');
+};
+
+var helpers$2 = helpers$3;
+
+/** @type ValidatorResult */
+var ValidatorResult$1 = helpers$2.ValidatorResult;
+/** @type SchemaError */
+var SchemaError$1 = helpers$2.SchemaError;
+
+var attribute$1 = {};
+
+attribute$1.ignoreProperties = {
+  // informative properties
+  'id': true,
+  'default': true,
+  'description': true,
+  'title': true,
+  // arguments to other properties
+  'additionalItems': true,
+  'then': true,
+  'else': true,
+  // special-handled properties
+  '$schema': true,
+  '$ref': true,
+  'extends': true,
+};
+
+/**
+ * @name validators
+ */
+var validators = attribute$1.validators = {};
+
+/**
+ * Validates whether the instance if of a certain type
+ * @param instance
+ * @param schema
+ * @param options
+ * @param ctx
+ * @return {ValidatorResult|null}
+ */
+validators.type = function validateType (instance, schema, options, ctx) {
+  // Ignore undefined instances
+  if (instance === undefined) {
+    return null;
+  }
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  var types = Array.isArray(schema.type) ? schema.type : [schema.type];
+  if (!types.some(this.testType.bind(this, instance, schema, options, ctx))) {
+    var list = types.map(function (v) {
+      if(!v) return;
+      var id = v.$id || v.id;
+      return id ? ('<' + id + '>') : (v+'');
+    });
+    result.addError({
+      name: 'type',
+      argument: list,
+      message: "is not of a type(s) " + list,
+    });
+  }
+  return result;
+};
+
+function testSchemaNoThrow(instance, options, ctx, callback, schema){
+  var throwError = options.throwError;
+  var throwAll = options.throwAll;
+  options.throwError = false;
+  options.throwAll = false;
+  var res = this.validateSchema(instance, schema, options, ctx);
+  options.throwError = throwError;
+  options.throwAll = throwAll;
+
+  if (!res.valid && callback instanceof Function) {
+    callback(res);
+  }
+  return res.valid;
+}
+
+/**
+ * Validates whether the instance matches some of the given schemas
+ * @param instance
+ * @param schema
+ * @param options
+ * @param ctx
+ * @return {ValidatorResult|null}
+ */
+validators.anyOf = function validateAnyOf (instance, schema, options, ctx) {
+  // Ignore undefined instances
+  if (instance === undefined) {
+    return null;
+  }
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  var inner = new ValidatorResult$1(instance, schema, options, ctx);
+  if (!Array.isArray(schema.anyOf)){
+    throw new SchemaError$1("anyOf must be an array");
+  }
+  if (!schema.anyOf.some(
+    testSchemaNoThrow.bind(
+      this, instance, options, ctx, function(res){inner.importErrors(res);}
+    ))) {
+    var list = schema.anyOf.map(function (v, i) {
+      var id = v.$id || v.id;
+      if(id) return '<' + id + '>';
+      return (v.title && JSON.stringify(v.title)) || (v['$ref'] && ('<' + v['$ref'] + '>')) || '[subschema '+i+']';
+    });
+    if (options.nestedErrors) {
+      result.importErrors(inner);
+    }
+    result.addError({
+      name: 'anyOf',
+      argument: list,
+      message: "is not any of " + list.join(','),
+    });
+  }
+  return result;
+};
+
+/**
+ * Validates whether the instance matches every given schema
+ * @param instance
+ * @param schema
+ * @param options
+ * @param ctx
+ * @return {String|null}
+ */
+validators.allOf = function validateAllOf (instance, schema, options, ctx) {
+  // Ignore undefined instances
+  if (instance === undefined) {
+    return null;
+  }
+  if (!Array.isArray(schema.allOf)){
+    throw new SchemaError$1("allOf must be an array");
+  }
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  var self = this;
+  schema.allOf.forEach(function(v, i){
+    var valid = self.validateSchema(instance, v, options, ctx);
+    if(!valid.valid){
+      var id = v.$id || v.id;
+      var msg = id || (v.title && JSON.stringify(v.title)) || (v['$ref'] && ('<' + v['$ref'] + '>')) || '[subschema '+i+']';
+      result.addError({
+        name: 'allOf',
+        argument: { id: msg, length: valid.errors.length, valid: valid },
+        message: 'does not match allOf schema ' + msg + ' with ' + valid.errors.length + ' error[s]:',
+      });
+      result.importErrors(valid);
+    }
+  });
+  return result;
+};
+
+/**
+ * Validates whether the instance matches exactly one of the given schemas
+ * @param instance
+ * @param schema
+ * @param options
+ * @param ctx
+ * @return {String|null}
+ */
+validators.oneOf = function validateOneOf (instance, schema, options, ctx) {
+  // Ignore undefined instances
+  if (instance === undefined) {
+    return null;
+  }
+  if (!Array.isArray(schema.oneOf)){
+    throw new SchemaError$1("oneOf must be an array");
+  }
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  var inner = new ValidatorResult$1(instance, schema, options, ctx);
+  var count = schema.oneOf.filter(
+    testSchemaNoThrow.bind(
+      this, instance, options, ctx, function(res) {inner.importErrors(res);}
+    ) ).length;
+  var list = schema.oneOf.map(function (v, i) {
+    var id = v.$id || v.id;
+    return id || (v.title && JSON.stringify(v.title)) || (v['$ref'] && ('<' + v['$ref'] + '>')) || '[subschema '+i+']';
+  });
+  if (count!==1) {
+    if (options.nestedErrors) {
+      result.importErrors(inner);
+    }
+    result.addError({
+      name: 'oneOf',
+      argument: list,
+      message: "is not exactly one from " + list.join(','),
+    });
+  }
+  return result;
+};
+
+/**
+ * Validates "then" or "else" depending on the result of validating "if"
+ * @param instance
+ * @param schema
+ * @param options
+ * @param ctx
+ * @return {String|null}
+ */
+validators.if = function validateIf (instance, schema, options, ctx) {
+  // Ignore undefined instances
+  if (instance === undefined) return null;
+  if (!helpers$2.isSchema(schema.if)) throw new Error('Expected "if" keyword to be a schema');
+  var ifValid = testSchemaNoThrow.call(this, instance, options, ctx, null, schema.if);
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  var res;
+  if(ifValid){
+    if (schema.then === undefined) return;
+    if (!helpers$2.isSchema(schema.then)) throw new Error('Expected "then" keyword to be a schema');
+    res = this.validateSchema(instance, schema.then, options, ctx.makeChild(schema.then));
+    result.importErrors(res);
+  }else {
+    if (schema.else === undefined) return;
+    if (!helpers$2.isSchema(schema.else)) throw new Error('Expected "else" keyword to be a schema');
+    res = this.validateSchema(instance, schema.else, options, ctx.makeChild(schema.else));
+    result.importErrors(res);
+  }
+  return result;
+};
+
+function getEnumerableProperty(object, key){
+  // Determine if `key` shows up in `for(var key in object)`
+  // First test Object.hasOwnProperty.call as an optimization: that guarantees it does
+  if(Object.hasOwnProperty.call(object, key)) return object[key];
+  // Test `key in object` as an optimization; false means it won't
+  if(!(key in object)) return;
+  while( (object = Object.getPrototypeOf(object)) ){
+    if(Object.propertyIsEnumerable.call(object, key)) return object[key];
+  }
+}
+
+/**
+ * Validates propertyNames
+ * @param instance
+ * @param schema
+ * @param options
+ * @param ctx
+ * @return {String|null|ValidatorResult}
+ */
+validators.propertyNames = function validatePropertyNames (instance, schema, options, ctx) {
+  if(!this.types.object(instance)) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  var subschema = schema.propertyNames!==undefined ? schema.propertyNames : {};
+  if(!helpers$2.isSchema(subschema)) throw new SchemaError$1('Expected "propertyNames" to be a schema (object or boolean)');
+
+  for (var property in instance) {
+    if(getEnumerableProperty(instance, property) !== undefined){
+      var res = this.validateSchema(property, subschema, options, ctx.makeChild(subschema));
+      result.importErrors(res);
+    }
+  }
+
+  return result;
+};
+
+/**
+ * Validates properties
+ * @param instance
+ * @param schema
+ * @param options
+ * @param ctx
+ * @return {String|null|ValidatorResult}
+ */
+validators.properties = function validateProperties (instance, schema, options, ctx) {
+  if(!this.types.object(instance)) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  var properties = schema.properties || {};
+  for (var property in properties) {
+    var subschema = properties[property];
+    if(subschema===undefined){
+      continue;
+    }else if(subschema===null){
+      throw new SchemaError$1('Unexpected null, expected schema in "properties"');
+    }
+    if (typeof options.preValidateProperty == 'function') {
+      options.preValidateProperty(instance, property, subschema, options, ctx);
+    }
+    var prop = getEnumerableProperty(instance, property);
+    var res = this.validateSchema(prop, subschema, options, ctx.makeChild(subschema, property));
+    if(res.instance !== result.instance[property]) result.instance[property] = res.instance;
+    result.importErrors(res);
+  }
+  return result;
+};
+
+/**
+ * Test a specific property within in instance against the additionalProperties schema attribute
+ * This ignores properties with definitions in the properties schema attribute, but no other attributes.
+ * If too many more types of property-existence tests pop up they may need their own class of tests (like `type` has)
+ * @private
+ * @return {boolean}
+ */
+function testAdditionalProperty (instance, schema, options, ctx, property, result) {
+  if(!this.types.object(instance)) return;
+  if (schema.properties && schema.properties[property] !== undefined) {
+    return;
+  }
+  if (schema.additionalProperties === false) {
+    result.addError({
+      name: 'additionalProperties',
+      argument: property,
+      message: "is not allowed to have the additional property " + JSON.stringify(property),
+    });
+  } else {
+    var additionalProperties = schema.additionalProperties || {};
+
+    if (typeof options.preValidateProperty == 'function') {
+      options.preValidateProperty(instance, property, additionalProperties, options, ctx);
+    }
+
+    var res = this.validateSchema(instance[property], additionalProperties, options, ctx.makeChild(additionalProperties, property));
+    if(res.instance !== result.instance[property]) result.instance[property] = res.instance;
+    result.importErrors(res);
+  }
+}
+
+/**
+ * Validates patternProperties
+ * @param instance
+ * @param schema
+ * @param options
+ * @param ctx
+ * @return {String|null|ValidatorResult}
+ */
+validators.patternProperties = function validatePatternProperties (instance, schema, options, ctx) {
+  if(!this.types.object(instance)) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  var patternProperties = schema.patternProperties || {};
+
+  for (var property in instance) {
+    var test = true;
+    for (var pattern in patternProperties) {
+      var subschema = patternProperties[pattern];
+      if(subschema===undefined){
+        continue;
+      }else if(subschema===null){
+        throw new SchemaError$1('Unexpected null, expected schema in "patternProperties"');
+      }
+      try {
+        var regexp = new RegExp(pattern, 'u');
+      } catch(_e) {
+        // In the event the stricter handling causes an error, fall back on the forgiving handling
+        // DEPRECATED
+        regexp = new RegExp(pattern);
+      }
+      if (!regexp.test(property)) {
+        continue;
+      }
+      test = false;
+
+      if (typeof options.preValidateProperty == 'function') {
+        options.preValidateProperty(instance, property, subschema, options, ctx);
+      }
+
+      var res = this.validateSchema(instance[property], subschema, options, ctx.makeChild(subschema, property));
+      if(res.instance !== result.instance[property]) result.instance[property] = res.instance;
+      result.importErrors(res);
+    }
+    if (test) {
+      testAdditionalProperty.call(this, instance, schema, options, ctx, property, result);
+    }
+  }
+
+  return result;
+};
+
+/**
+ * Validates additionalProperties
+ * @param instance
+ * @param schema
+ * @param options
+ * @param ctx
+ * @return {String|null|ValidatorResult}
+ */
+validators.additionalProperties = function validateAdditionalProperties (instance, schema, options, ctx) {
+  if(!this.types.object(instance)) return;
+  // if patternProperties is defined then we'll test when that one is called instead
+  if (schema.patternProperties) {
+    return null;
+  }
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  for (var property in instance) {
+    testAdditionalProperty.call(this, instance, schema, options, ctx, property, result);
+  }
+  return result;
+};
+
+/**
+ * Validates whether the instance value is at least of a certain length, when the instance value is a string.
+ * @param instance
+ * @param schema
+ * @return {String|null}
+ */
+validators.minProperties = function validateMinProperties (instance, schema, options, ctx) {
+  if (!this.types.object(instance)) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  var keys = Object.keys(instance);
+  if (!(keys.length >= schema.minProperties)) {
+    result.addError({
+      name: 'minProperties',
+      argument: schema.minProperties,
+      message: "does not meet minimum property length of " + schema.minProperties,
+    });
+  }
+  return result;
+};
+
+/**
+ * Validates whether the instance value is at most of a certain length, when the instance value is a string.
+ * @param instance
+ * @param schema
+ * @return {String|null}
+ */
+validators.maxProperties = function validateMaxProperties (instance, schema, options, ctx) {
+  if (!this.types.object(instance)) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  var keys = Object.keys(instance);
+  if (!(keys.length <= schema.maxProperties)) {
+    result.addError({
+      name: 'maxProperties',
+      argument: schema.maxProperties,
+      message: "does not meet maximum property length of " + schema.maxProperties,
+    });
+  }
+  return result;
+};
+
+/**
+ * Validates items when instance is an array
+ * @param instance
+ * @param schema
+ * @param options
+ * @param ctx
+ * @return {String|null|ValidatorResult}
+ */
+validators.items = function validateItems (instance, schema, options, ctx) {
+  var self = this;
+  if (!this.types.array(instance)) return;
+  if (!schema.items) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  instance.every(function (value, i) {
+    var items = Array.isArray(schema.items) ? (schema.items[i] || schema.additionalItems) : schema.items;
+    if (items === undefined) {
+      return true;
+    }
+    if (items === false) {
+      result.addError({
+        name: 'items',
+        message: "additionalItems not permitted",
+      });
+      return false;
+    }
+    var res = self.validateSchema(value, items, options, ctx.makeChild(items, i));
+    if(res.instance !== result.instance[i]) result.instance[i] = res.instance;
+    result.importErrors(res);
+    return true;
+  });
+  return result;
+};
+
+/**
+ * Validates minimum and exclusiveMinimum when the type of the instance value is a number.
+ * @param instance
+ * @param schema
+ * @return {String|null}
+ */
+validators.minimum = function validateMinimum (instance, schema, options, ctx) {
+  if (!this.types.number(instance)) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  if (schema.exclusiveMinimum && schema.exclusiveMinimum === true) {
+    if(!(instance > schema.minimum)){
+      result.addError({
+        name: 'minimum',
+        argument: schema.minimum,
+        message: "must be greater than " + schema.minimum,
+      });
+    }
+  } else {
+    if(!(instance >= schema.minimum)){
+      result.addError({
+        name: 'minimum',
+        argument: schema.minimum,
+        message: "must be greater than or equal to " + schema.minimum,
+      });
+    }
+  }
+  return result;
+};
+
+/**
+ * Validates maximum and exclusiveMaximum when the type of the instance value is a number.
+ * @param instance
+ * @param schema
+ * @return {String|null}
+ */
+validators.maximum = function validateMaximum (instance, schema, options, ctx) {
+  if (!this.types.number(instance)) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  if (schema.exclusiveMaximum && schema.exclusiveMaximum === true) {
+    if(!(instance < schema.maximum)){
+      result.addError({
+        name: 'maximum',
+        argument: schema.maximum,
+        message: "must be less than " + schema.maximum,
+      });
+    }
+  } else {
+    if(!(instance <= schema.maximum)){
+      result.addError({
+        name: 'maximum',
+        argument: schema.maximum,
+        message: "must be less than or equal to " + schema.maximum,
+      });
+    }
+  }
+  return result;
+};
+
+/**
+ * Validates the number form of exclusiveMinimum when the type of the instance value is a number.
+ * @param instance
+ * @param schema
+ * @return {String|null}
+ */
+validators.exclusiveMinimum = function validateExclusiveMinimum (instance, schema, options, ctx) {
+  // Support the boolean form of exclusiveMinimum, which is handled by the "minimum" keyword.
+  if(typeof schema.exclusiveMaximum === 'boolean') return;
+  if (!this.types.number(instance)) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  var valid = instance > schema.exclusiveMinimum;
+  if (!valid) {
+    result.addError({
+      name: 'exclusiveMinimum',
+      argument: schema.exclusiveMinimum,
+      message: "must be strictly greater than " + schema.exclusiveMinimum,
+    });
+  }
+  return result;
+};
+
+/**
+ * Validates the number form of exclusiveMaximum when the type of the instance value is a number.
+ * @param instance
+ * @param schema
+ * @return {String|null}
+ */
+validators.exclusiveMaximum = function validateExclusiveMaximum (instance, schema, options, ctx) {
+  // Support the boolean form of exclusiveMaximum, which is handled by the "maximum" keyword.
+  if(typeof schema.exclusiveMaximum === 'boolean') return;
+  if (!this.types.number(instance)) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  var valid = instance < schema.exclusiveMaximum;
+  if (!valid) {
+    result.addError({
+      name: 'exclusiveMaximum',
+      argument: schema.exclusiveMaximum,
+      message: "must be strictly less than " + schema.exclusiveMaximum,
+    });
+  }
+  return result;
+};
+
+/**
+ * Perform validation for multipleOf and divisibleBy, which are essentially the same.
+ * @param instance
+ * @param schema
+ * @param validationType
+ * @param errorMessage
+ * @returns {String|null}
+ */
+var validateMultipleOfOrDivisbleBy = function validateMultipleOfOrDivisbleBy (instance, schema, options, ctx, validationType, errorMessage) {
+  if (!this.types.number(instance)) return;
+
+  var validationArgument = schema[validationType];
+  if (validationArgument == 0) {
+    throw new SchemaError$1(validationType + " cannot be zero");
+  }
+
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+
+  var instanceDecimals = helpers$2.getDecimalPlaces(instance);
+  var divisorDecimals = helpers$2.getDecimalPlaces(validationArgument);
+
+  var maxDecimals = Math.max(instanceDecimals , divisorDecimals);
+  var multiplier = Math.pow(10, maxDecimals);
+
+  if (Math.round(instance * multiplier) % Math.round(validationArgument * multiplier) !== 0) {
+    result.addError({
+      name: validationType,
+      argument:  validationArgument,
+      message: errorMessage + JSON.stringify(validationArgument),
+    });
+  }
+
+  return result;
+};
+
+/**
+ * Validates divisibleBy when the type of the instance value is a number.
+ * @param instance
+ * @param schema
+ * @return {String|null}
+ */
+validators.multipleOf = function validateMultipleOf (instance, schema, options, ctx) {
+  return validateMultipleOfOrDivisbleBy.call(this, instance, schema, options, ctx, "multipleOf", "is not a multiple of (divisible by) ");
+};
+
+/**
+ * Validates multipleOf when the type of the instance value is a number.
+ * @param instance
+ * @param schema
+ * @return {String|null}
+ */
+validators.divisibleBy = function validateDivisibleBy (instance, schema, options, ctx) {
+  return validateMultipleOfOrDivisbleBy.call(this, instance, schema, options, ctx, "divisibleBy", "is not divisible by (multiple of) ");
+};
+
+/**
+ * Validates whether the instance value is present.
+ * @param instance
+ * @param schema
+ * @return {String|null}
+ */
+validators.required = function validateRequired (instance, schema, options, ctx) {
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  if (instance === undefined && schema.required === true) {
+    // A boolean form is implemented for reverse-compatibility with schemas written against older drafts
+    result.addError({
+      name: 'required',
+      message: "is required",
+    });
+  } else if (this.types.object(instance) && Array.isArray(schema.required)) {
+    schema.required.forEach(function(n){
+      if(getEnumerableProperty(instance, n)===undefined){
+        result.addError({
+          name: 'required',
+          argument: n,
+          message: "requires property " + JSON.stringify(n),
+        });
+      }
+    });
+  }
+  return result;
+};
+
+/**
+ * Validates whether the instance value matches the regular expression, when the instance value is a string.
+ * @param instance
+ * @param schema
+ * @return {String|null}
+ */
+validators.pattern = function validatePattern (instance, schema, options, ctx) {
+  if (!this.types.string(instance)) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  var pattern = schema.pattern;
+  try {
+    var regexp = new RegExp(pattern, 'u');
+  } catch(_e) {
+    // In the event the stricter handling causes an error, fall back on the forgiving handling
+    // DEPRECATED
+    regexp = new RegExp(pattern);
+  }
+  if (!instance.match(regexp)) {
+    result.addError({
+      name: 'pattern',
+      argument: schema.pattern,
+      message: "does not match pattern " + JSON.stringify(schema.pattern.toString()),
+    });
+  }
+  return result;
+};
+
+/**
+ * Validates whether the instance value is of a certain defined format or a custom
+ * format.
+ * The following formats are supported for string types:
+ *   - date-time
+ *   - date
+ *   - time
+ *   - ip-address
+ *   - ipv6
+ *   - uri
+ *   - color
+ *   - host-name
+ *   - alpha
+ *   - alpha-numeric
+ *   - utc-millisec
+ * @param instance
+ * @param schema
+ * @param [options]
+ * @param [ctx]
+ * @return {String|null}
+ */
+validators.format = function validateFormat (instance, schema, options, ctx) {
+  if (instance===undefined) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  if (!result.disableFormat && !helpers$2.isFormat(instance, schema.format, this)) {
+    result.addError({
+      name: 'format',
+      argument: schema.format,
+      message: "does not conform to the " + JSON.stringify(schema.format) + " format",
+    });
+  }
+  return result;
+};
+
+/**
+ * Validates whether the instance value is at least of a certain length, when the instance value is a string.
+ * @param instance
+ * @param schema
+ * @return {String|null}
+ */
+validators.minLength = function validateMinLength (instance, schema, options, ctx) {
+  if (!this.types.string(instance)) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  var hsp = instance.match(/[\uDC00-\uDFFF]/g);
+  var length = instance.length - (hsp ? hsp.length : 0);
+  if (!(length >= schema.minLength)) {
+    result.addError({
+      name: 'minLength',
+      argument: schema.minLength,
+      message: "does not meet minimum length of " + schema.minLength,
+    });
+  }
+  return result;
+};
+
+/**
+ * Validates whether the instance value is at most of a certain length, when the instance value is a string.
+ * @param instance
+ * @param schema
+ * @return {String|null}
+ */
+validators.maxLength = function validateMaxLength (instance, schema, options, ctx) {
+  if (!this.types.string(instance)) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  // TODO if this was already computed in "minLength", use that value instead of re-computing
+  var hsp = instance.match(/[\uDC00-\uDFFF]/g);
+  var length = instance.length - (hsp ? hsp.length : 0);
+  if (!(length <= schema.maxLength)) {
+    result.addError({
+      name: 'maxLength',
+      argument: schema.maxLength,
+      message: "does not meet maximum length of " + schema.maxLength,
+    });
+  }
+  return result;
+};
+
+/**
+ * Validates whether instance contains at least a minimum number of items, when the instance is an Array.
+ * @param instance
+ * @param schema
+ * @return {String|null}
+ */
+validators.minItems = function validateMinItems (instance, schema, options, ctx) {
+  if (!this.types.array(instance)) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  if (!(instance.length >= schema.minItems)) {
+    result.addError({
+      name: 'minItems',
+      argument: schema.minItems,
+      message: "does not meet minimum length of " + schema.minItems,
+    });
+  }
+  return result;
+};
+
+/**
+ * Validates whether instance contains no more than a maximum number of items, when the instance is an Array.
+ * @param instance
+ * @param schema
+ * @return {String|null}
+ */
+validators.maxItems = function validateMaxItems (instance, schema, options, ctx) {
+  if (!this.types.array(instance)) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  if (!(instance.length <= schema.maxItems)) {
+    result.addError({
+      name: 'maxItems',
+      argument: schema.maxItems,
+      message: "does not meet maximum length of " + schema.maxItems,
+    });
+  }
+  return result;
+};
+
+/**
+ * Deep compares arrays for duplicates
+ * @param v
+ * @param i
+ * @param a
+ * @private
+ * @return {boolean}
+ */
+function testArrays (v, i, a) {
+  var j, len = a.length;
+  for (j = i + 1, len; j < len; j++) {
+    if (helpers$2.deepCompareStrict(v, a[j])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Validates whether there are no duplicates, when the instance is an Array.
+ * @param instance
+ * @return {String|null}
+ */
+validators.uniqueItems = function validateUniqueItems (instance, schema, options, ctx) {
+  if (schema.uniqueItems!==true) return;
+  if (!this.types.array(instance)) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  if (!instance.every(testArrays)) {
+    result.addError({
+      name: 'uniqueItems',
+      message: "contains duplicate item",
+    });
+  }
+  return result;
+};
+
+/**
+ * Validate for the presence of dependency properties, if the instance is an object.
+ * @param instance
+ * @param schema
+ * @param options
+ * @param ctx
+ * @return {null|ValidatorResult}
+ */
+validators.dependencies = function validateDependencies (instance, schema, options, ctx) {
+  if (!this.types.object(instance)) return;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  for (var property in schema.dependencies) {
+    if (instance[property] === undefined) {
+      continue;
+    }
+    var dep = schema.dependencies[property];
+    var childContext = ctx.makeChild(dep, property);
+    if (typeof dep == 'string') {
+      dep = [dep];
+    }
+    if (Array.isArray(dep)) {
+      dep.forEach(function (prop) {
+        if (instance[prop] === undefined) {
+          result.addError({
+            // FIXME there's two different "dependencies" errors here with slightly different outputs
+            // Can we make these the same? Or should we create different error types?
+            name: 'dependencies',
+            argument: childContext.propertyPath,
+            message: "property " + prop + " not found, required by " + childContext.propertyPath,
+          });
+        }
+      });
+    } else {
+      var res = this.validateSchema(instance, dep, options, childContext);
+      if(result.instance !== res.instance) result.instance = res.instance;
+      if (res && res.errors.length) {
+        result.addError({
+          name: 'dependencies',
+          argument: childContext.propertyPath,
+          message: "does not meet dependency required by " + childContext.propertyPath,
+        });
+        result.importErrors(res);
+      }
+    }
+  }
+  return result;
+};
+
+/**
+ * Validates whether the instance value is one of the enumerated values.
+ *
+ * @param instance
+ * @param schema
+ * @return {ValidatorResult|null}
+ */
+validators['enum'] = function validateEnum (instance, schema, options, ctx) {
+  if (instance === undefined) {
+    return null;
+  }
+  if (!Array.isArray(schema['enum'])) {
+    throw new SchemaError$1("enum expects an array", schema);
+  }
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  if (!schema['enum'].some(helpers$2.deepCompareStrict.bind(null, instance))) {
+    result.addError({
+      name: 'enum',
+      argument: schema['enum'],
+      message: "is not one of enum values: " + schema['enum'].map(String).join(','),
+    });
+  }
+  return result;
+};
+
+/**
+ * Validates whether the instance exactly matches a given value
+ *
+ * @param instance
+ * @param schema
+ * @return {ValidatorResult|null}
+ */
+validators['const'] = function validateEnum (instance, schema, options, ctx) {
+  if (instance === undefined) {
+    return null;
+  }
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  if (!helpers$2.deepCompareStrict(schema['const'], instance)) {
+    result.addError({
+      name: 'const',
+      argument: schema['const'],
+      message: "does not exactly match expected constant: " + schema['const'],
+    });
+  }
+  return result;
+};
+
+/**
+ * Validates whether the instance if of a prohibited type.
+ * @param instance
+ * @param schema
+ * @param options
+ * @param ctx
+ * @return {null|ValidatorResult}
+ */
+validators.not = validators.disallow = function validateNot (instance, schema, options, ctx) {
+  var self = this;
+  if(instance===undefined) return null;
+  var result = new ValidatorResult$1(instance, schema, options, ctx);
+  var notTypes = schema.not || schema.disallow;
+  if(!notTypes) return null;
+  if(!Array.isArray(notTypes)) notTypes=[notTypes];
+  notTypes.forEach(function (type) {
+    if (self.testType(instance, schema, options, ctx, type)) {
+      var id = type && (type.$id || type.id);
+      var schemaId = id || type;
+      result.addError({
+        name: 'not',
+        argument: schemaId,
+        message: "is of prohibited type " + schemaId,
+      });
+    }
+  });
+  return result;
+};
+
+var attribute_1 = attribute$1;
+
+var scan = {};
+
+var urilib$1 = url;
+var helpers$1 = helpers$3;
+
+scan.SchemaScanResult = SchemaScanResult;
+function SchemaScanResult(found, ref){
+  this.id = found;
+  this.ref = ref;
+}
+
+/**
+ * Adds a schema with a certain urn to the Validator instance.
+ * @param string uri
+ * @param object schema
+ * @return {Object}
+ */
+scan.scan = function scan(base, schema){
+  function scanSchema(baseuri, schema){
+    if(!schema || typeof schema!='object') return;
+    // Mark all referenced schemas so we can tell later which schemas are referred to, but never defined
+    if(schema.$ref){
+      var resolvedUri = urilib$1.resolve(baseuri, schema.$ref);
+      ref[resolvedUri] = ref[resolvedUri] ? ref[resolvedUri]+1 : 0;
+      return;
+    }
+    var id = schema.$id || schema.id;
+    var ourBase = id ? urilib$1.resolve(baseuri, id) : baseuri;
+    if (ourBase) {
+      // If there's no fragment, append an empty one
+      if(ourBase.indexOf('#')<0) ourBase += '#';
+      if(found[ourBase]){
+        if(!helpers$1.deepCompareStrict(found[ourBase], schema)){
+          throw new Error('Schema <'+ourBase+'> already exists with different definition');
+        }
+        return found[ourBase];
+      }
+      found[ourBase] = schema;
+      // strip trailing fragment
+      if(ourBase[ourBase.length-1]=='#'){
+        found[ourBase.substring(0, ourBase.length-1)] = schema;
+      }
+    }
+    scanArray(ourBase+'/items', (Array.isArray(schema.items)?schema.items:[schema.items]));
+    scanArray(ourBase+'/extends', (Array.isArray(schema.extends)?schema.extends:[schema.extends]));
+    scanSchema(ourBase+'/additionalItems', schema.additionalItems);
+    scanObject(ourBase+'/properties', schema.properties);
+    scanSchema(ourBase+'/additionalProperties', schema.additionalProperties);
+    scanObject(ourBase+'/definitions', schema.definitions);
+    scanObject(ourBase+'/patternProperties', schema.patternProperties);
+    scanObject(ourBase+'/dependencies', schema.dependencies);
+    scanArray(ourBase+'/disallow', schema.disallow);
+    scanArray(ourBase+'/allOf', schema.allOf);
+    scanArray(ourBase+'/anyOf', schema.anyOf);
+    scanArray(ourBase+'/oneOf', schema.oneOf);
+    scanSchema(ourBase+'/not', schema.not);
+  }
+  function scanArray(baseuri, schemas){
+    if(!Array.isArray(schemas)) return;
+    for(var i=0; i<schemas.length; i++){
+      scanSchema(baseuri+'/'+i, schemas[i]);
+    }
+  }
+  function scanObject(baseuri, schemas){
+    if(!schemas || typeof schemas!='object') return;
+    for(var p in schemas){
+      scanSchema(baseuri+'/'+p, schemas[p]);
+    }
+  }
+
+  var found = {};
+  var ref = {};
+  scanSchema(base, schema);
+  return new SchemaScanResult(found, ref);
+};
+
+var urilib = url;
+
+var attribute = attribute_1;
+var helpers = helpers$3;
+var scanSchema = scan.scan;
+var ValidatorResult = helpers.ValidatorResult;
+var ValidatorResultError = helpers.ValidatorResultError;
+var SchemaError = helpers.SchemaError;
+var SchemaContext = helpers.SchemaContext;
+//var anonymousBase = 'vnd.jsonschema:///';
+var anonymousBase = '/';
+
+/**
+ * Creates a new Validator object
+ * @name Validator
+ * @constructor
+ */
+var Validator = function Validator () {
+  // Allow a validator instance to override global custom formats or to have their
+  // own custom formats.
+  this.customFormats = Object.create(Validator.prototype.customFormats);
+  this.schemas = {};
+  this.unresolvedRefs = [];
+
+  // Use Object.create to make this extensible without Validator instances stepping on each other's toes.
+  this.types = Object.create(types);
+  this.attributes = Object.create(attribute.validators);
+};
+
+// Allow formats to be registered globally.
+Validator.prototype.customFormats = {};
+
+// Hint at the presence of a property
+Validator.prototype.schemas = null;
+Validator.prototype.types = null;
+Validator.prototype.attributes = null;
+Validator.prototype.unresolvedRefs = null;
+
+/**
+ * Adds a schema with a certain urn to the Validator instance.
+ * @param schema
+ * @param urn
+ * @return {Object}
+ */
+Validator.prototype.addSchema = function addSchema (schema, base) {
+  var self = this;
+  if (!schema) {
+    return null;
+  }
+  var scan = scanSchema(base||anonymousBase, schema);
+  var ourUri = base || schema.$id || schema.id;
+  for(var uri in scan.id){
+    this.schemas[uri] = scan.id[uri];
+  }
+  for(var uri in scan.ref){
+    // If this schema is already defined, it will be filtered out by the next step
+    this.unresolvedRefs.push(uri);
+  }
+  // Remove newly defined schemas from unresolvedRefs
+  this.unresolvedRefs = this.unresolvedRefs.filter(function(uri){
+    return typeof self.schemas[uri]==='undefined';
+  });
+  return this.schemas[ourUri];
+};
+
+Validator.prototype.addSubSchemaArray = function addSubSchemaArray(baseuri, schemas) {
+  if(!Array.isArray(schemas)) return;
+  for(var i=0; i<schemas.length; i++){
+    this.addSubSchema(baseuri, schemas[i]);
+  }
+};
+
+Validator.prototype.addSubSchemaObject = function addSubSchemaArray(baseuri, schemas) {
+  if(!schemas || typeof schemas!='object') return;
+  for(var p in schemas){
+    this.addSubSchema(baseuri, schemas[p]);
+  }
+};
+
+
+
+/**
+ * Sets all the schemas of the Validator instance.
+ * @param schemas
+ */
+Validator.prototype.setSchemas = function setSchemas (schemas) {
+  this.schemas = schemas;
+};
+
+/**
+ * Returns the schema of a certain urn
+ * @param urn
+ */
+Validator.prototype.getSchema = function getSchema (urn) {
+  return this.schemas[urn];
+};
+
+/**
+ * Validates instance against the provided schema
+ * @param instance
+ * @param schema
+ * @param [options]
+ * @param [ctx]
+ * @return {Array}
+ */
+Validator.prototype.validate = function validate (instance, schema, options, ctx) {
+  if((typeof schema !== 'boolean' && typeof schema !== 'object') || schema === null){
+    throw new SchemaError('Expected `schema` to be an object or boolean');
+  }
+  if (!options) {
+    options = {};
+  }
+  // This section indexes subschemas in the provided schema, so they don't need to be added with Validator#addSchema
+  // This will work so long as the function at uri.resolve() will resolve a relative URI to a relative URI
+  var id = schema.$id || schema.id;
+  var base = urilib.resolve(options.base||anonymousBase, id||'');
+  if(!ctx){
+    ctx = new SchemaContext(schema, options, [], base, Object.create(this.schemas));
+    if (!ctx.schemas[base]) {
+      ctx.schemas[base] = schema;
+    }
+    var found = scanSchema(base, schema);
+    for(var n in found.id){
+      var sch = found.id[n];
+      ctx.schemas[n] = sch;
+    }
+  }
+  if(options.required && instance===undefined){
+    var result = new ValidatorResult(instance, schema, options, ctx);
+    result.addError('is required, but is undefined');
+    return result;
+  }
+  var result = this.validateSchema(instance, schema, options, ctx);
+  if (!result) {
+    throw new Error('Result undefined');
+  }else if(options.throwAll && result.errors.length){
+    throw new ValidatorResultError(result);
+  }
+  return result;
+};
+
+/**
+* @param Object schema
+* @return mixed schema uri or false
+*/
+function shouldResolve(schema) {
+  var ref = (typeof schema === 'string') ? schema : schema.$ref;
+  if (typeof ref=='string') return ref;
+  return false;
+}
+
+/**
+ * Validates an instance against the schema (the actual work horse)
+ * @param instance
+ * @param schema
+ * @param options
+ * @param ctx
+ * @private
+ * @return {ValidatorResult}
+ */
+Validator.prototype.validateSchema = function validateSchema (instance, schema, options, ctx) {
+  var result = new ValidatorResult(instance, schema, options, ctx);
+
+  // Support for the true/false schemas
+  if(typeof schema==='boolean') {
+    if(schema===true){
+      // `true` is always valid
+      schema = {};
+    }else if(schema===false){
+      // `false` is always invalid
+      schema = {type: []};
+    }
+  }else if(!schema){
+    // This might be a string
+    throw new Error("schema is undefined");
+  }
+
+  if (schema['extends']) {
+    if (Array.isArray(schema['extends'])) {
+      var schemaobj = {schema: schema, ctx: ctx};
+      schema['extends'].forEach(this.schemaTraverser.bind(this, schemaobj));
+      schema = schemaobj.schema;
+      schemaobj.schema = null;
+      schemaobj.ctx = null;
+      schemaobj = null;
+    } else {
+      schema = helpers.deepMerge(schema, this.superResolve(schema['extends'], ctx));
+    }
+  }
+
+  // If passed a string argument, load that schema URI
+  var switchSchema = shouldResolve(schema);
+  if (switchSchema) {
+    var resolved = this.resolve(schema, switchSchema, ctx);
+    var subctx = new SchemaContext(resolved.subschema, options, ctx.path, resolved.switchSchema, ctx.schemas);
+    return this.validateSchema(instance, resolved.subschema, options, subctx);
+  }
+
+  var skipAttributes = options && options.skipAttributes || [];
+  // Validate each schema attribute against the instance
+  for (var key in schema) {
+    if (!attribute.ignoreProperties[key] && skipAttributes.indexOf(key) < 0) {
+      var validatorErr = null;
+      var validator = this.attributes[key];
+      if (validator) {
+        validatorErr = validator.call(this, instance, schema, options, ctx);
+      } else if (options.allowUnknownAttributes === false) {
+        // This represents an error with the schema itself, not an invalid instance
+        throw new SchemaError("Unsupported attribute: " + key, schema);
+      }
+      if (validatorErr) {
+        result.importErrors(validatorErr);
+      }
+    }
+  }
+
+  if (typeof options.rewrite == 'function') {
+    var value = options.rewrite.call(this, instance, schema, options, ctx);
+    result.instance = value;
+  }
+  return result;
+};
+
+/**
+* @private
+* @param Object schema
+* @param SchemaContext ctx
+* @returns Object schema or resolved schema
+*/
+Validator.prototype.schemaTraverser = function schemaTraverser (schemaobj, s) {
+  schemaobj.schema = helpers.deepMerge(schemaobj.schema, this.superResolve(s, schemaobj.ctx));
+};
+
+/**
+* @private
+* @param Object schema
+* @param SchemaContext ctx
+* @returns Object schema or resolved schema
+*/
+Validator.prototype.superResolve = function superResolve (schema, ctx) {
+  var ref = shouldResolve(schema);
+  if(ref) {
+    return this.resolve(schema, ref, ctx).subschema;
+  }
+  return schema;
+};
+
+/**
+* @private
+* @param Object schema
+* @param Object switchSchema
+* @param SchemaContext ctx
+* @return Object resolved schemas {subschema:String, switchSchema: String}
+* @throws SchemaError
+*/
+Validator.prototype.resolve = function resolve (schema, switchSchema, ctx) {
+  switchSchema = ctx.resolve(switchSchema);
+  // First see if the schema exists under the provided URI
+  if (ctx.schemas[switchSchema]) {
+    return {subschema: ctx.schemas[switchSchema], switchSchema: switchSchema};
+  }
+  // Else try walking the property pointer
+  var parsed = urilib.parse(switchSchema);
+  var fragment = parsed && parsed.hash;
+  var document = fragment && fragment.length && switchSchema.substr(0, switchSchema.length - fragment.length);
+  if (!document || !ctx.schemas[document]) {
+    throw new SchemaError("no such schema <" + switchSchema + ">", schema);
+  }
+  var subschema = helpers.objectGetPath(ctx.schemas[document], fragment.substr(1));
+  if(subschema===undefined){
+    throw new SchemaError("no such schema " + fragment + " located in <" + document + ">", schema);
+  }
+  return {subschema: subschema, switchSchema: switchSchema};
+};
+
+/**
+ * Tests whether the instance if of a certain type.
+ * @private
+ * @param instance
+ * @param schema
+ * @param options
+ * @param ctx
+ * @param type
+ * @return {boolean}
+ */
+Validator.prototype.testType = function validateType (instance, schema, options, ctx, type) {
+  if(type===undefined){
+    return;
+  }else if(type===null){
+    throw new SchemaError('Unexpected null in "type" keyword');
+  }
+  if (typeof this.types[type] == 'function') {
+    return this.types[type].call(this, instance);
+  }
+  if (type && typeof type == 'object') {
+    var res = this.validateSchema(instance, type, options, ctx);
+    return res === undefined || !(res && res.errors.length);
+  }
+  // Undefined or properties not on the list are acceptable, same as not being defined
+  return true;
+};
+
+var types = Validator.prototype.types = {};
+types.string = function testString (instance) {
+  return typeof instance == 'string';
+};
+types.number = function testNumber (instance) {
+  // isFinite returns false for NaN, Infinity, and -Infinity
+  return typeof instance == 'number' && isFinite(instance);
+};
+types.integer = function testInteger (instance) {
+  return (typeof instance == 'number') && instance % 1 === 0;
+};
+types.boolean = function testBoolean (instance) {
+  return typeof instance == 'boolean';
+};
+types.array = function testArray (instance) {
+  return Array.isArray(instance);
+};
+types['null'] = function testNull (instance) {
+  return instance === null;
+};
+types.date = function testDate (instance) {
+  return instance instanceof Date;
+};
+types.any = function testAny (instance) {
+  return true;
+};
+types.object = function testObject (instance) {
+  // TODO: fix this - see #15
+  return instance && (typeof instance === 'object') && !(Array.isArray(instance)) && !(instance instanceof Date);
+};
+
+var validator = Validator;
+
+var Validator_1;
+
+Validator_1 = validator;
+
+var schema$2 = "https://json-schema.org/draft/2020-12/schema";
+var id$2 = "/visualization";
+var title$2 = "Visualization";
+var description$2 = "A webgl visualization made of a sequence of tracks";
+var type$2 = "object";
+var required$1 = [
+	"tracks"
+];
+var properties$2 = {
+	labels: {
+		description: "set of labels to display on visualization, properties of labels can be any valid attribute for an svg text element",
+		examples: [
+			{
+				x: 100,
+				y: 200,
+				text: "my favorite data point",
+				rotate: -90
+			},
+			{
+				x: -1.1,
+				y: 0,
+				text: "Track 1",
+				color: "red",
+				fixedX: true
+			}
+		],
+		type: "array",
+		items: {
+			properties: {
+				x: {
+					description: "x coordinate of label with respect to data coordinates, should be on scale with [-1, 1] if x dimension is categorical or genomic",
+					type: "number"
+				},
+				y: {
+					description: "y coordinate of label with respect to data coordinates, should be on scale with [-1, 1] if y dimension is categorical or genomic",
+					type: "number"
+				},
+				fixedX: {
+					description: "fix the x coordinate of the label, so it does not move when panning/zooming left or right",
+					type: "boolean"
+				},
+				fixedY: {
+					description: "fix the y coordinate of the label, so it does not move when panning/zooming up or down",
+					type: "boolean"
+				},
+				required: [
+					"x",
+					"y"
+				]
+			}
+		}
+	},
+	xAxis: {
+		description: "location of x-axis",
+		"enum": [
+			"bottom",
+			"top",
+			"center",
+			"none",
+			"zero"
+		]
+	},
+	yAxis: {
+		description: "location of y-axis",
+		"enum": [
+			"left",
+			"right",
+			"center",
+			"none",
+			"zero"
+		]
+	},
+	tracks: {
+		description: "A track is a map from the data to a sequence of marks",
+		type: "array",
+		items: {
+			$ref: "/track"
+		}
+	},
+	defaultData: {
+		description: "A string of a csv href containing data or an object of inline data where each key is a column of values",
+		examples: [
+			"http://example.com/data.csv",
+			{
+				day: [
+					1,
+					2
+				],
+				price: [
+					10,
+					20
+				]
+			}
+		],
+		type: [
+			"string",
+			"object"
+		],
+		minProperties: 1,
+		patternProperties: {
+			"^.*$": {
+				type: "array",
+				items: {
+				}
+			}
+		}
+	},
+	width: {
+		description: "Width of the visualization in css units",
+		examples: [
+			"400px",
+			"100%",
+			"10em",
+			"600"
+		],
+		type: "string"
+	},
+	height: {
+		description: "Height of the visualization in css units",
+		examples: [
+			"400px",
+			"100%",
+			"10em",
+			"600"
+		],
+		type: "string"
+	},
+	margins: {
+		description: "Margins for the visualization; gives more space for labels and axis to render",
+		properties: {
+			top: {
+				description: "Top margin of the visualization in css units",
+				type: "string",
+				examples: [
+					"100px",
+					"5%",
+					"5em"
+				]
+			},
+			bottom: {
+				description: "Bottom margin of the visualization in css units",
+				type: "string",
+				examples: [
+					"100px",
+					"5%",
+					"5em"
+				]
+			},
+			left: {
+				description: "Left margin of the visualization in css units",
+				type: "string",
+				examples: [
+					"100px",
+					"5%",
+					"5em"
+				]
+			},
+			right: {
+				description: "Right margin of the visualization in css units",
+				type: "string",
+				examples: [
+					"100px",
+					"5%",
+					"5em"
+				]
+			}
+		}
+	}
+};
+var allOf$1 = [
+	{
+		description: "if there is no default data for the visualization require each track to have data property",
+		"if": {
+			not: {
+				required: [
+					"defaultData"
+				]
+			}
+		},
+		then: {
+			properties: {
+				tracks: {
+					items: {
+						required: [
+							"data"
+						]
+					}
+				}
+			}
+		},
+		"else": {
+		}
+	}
+];
+var visualization = {
+	schema: schema$2,
+	id: id$2,
+	title: title$2,
+	description: description$2,
+	type: type$2,
+	required: required$1,
+	properties: properties$2,
+	allOf: allOf$1
+};
+
+var schema$1 = "https://json-schema.org/draft/2020-12/schema";
+var id$1 = "/track";
+var title$1 = "Track";
+var description$1 = "A track to visualize";
+var type$1 = "object";
+var required = [
+	"mark",
+	"x",
+	"y"
+];
+var properties$1 = {
+	data: {
+		description: "A string of a csv href containing data or an object of inline data where each key is an array of a data column",
+		type: [
+			"string",
+			"object"
+		],
+		additionalProperties: {
+			type: "array"
+		},
+		minProperties: 1
+	},
+	mark: {
+		description: "type of mark to visualize",
+		"enum": [
+			"point",
+			"line",
+			"area",
+			"rect",
+			"tick",
+			"arc"
+		]
+	},
+	tooltips: {
+		description: "a number between 0 and 1 where 0 is no tooltips, 1 is always show, and, for example, 0.1 would be show tooltips when zoomed in to 10% of the domain",
+		type: "number",
+		minimum: 0,
+		maximum: 1
+	},
+	x: {
+		description: "define the x coordinates of the marks",
+		type: "object",
+		allOf: [
+			{
+				$ref: "/channel"
+			}
+		],
+		examples: [
+			{
+				type: "genomic",
+				chrAttribute: "chr",
+				geneAttribute: "gene",
+				domain: [
+					"chr2:100",
+					"chr2:300"
+				]
+			}
+		]
+	},
+	y: {
+		description: "define the y coordinates of the marks",
+		type: "object",
+		allOf: [
+			{
+				$ref: "/channel"
+			}
+		],
+		examples: [
+			{
+				type: "quantitative",
+				attribute: "time",
+				domain: [
+					0,
+					10
+				]
+			},
+			{
+				attribute: "sample",
+				type: "categorical",
+				cardinality: 10
+			}
+		]
+	},
+	color: {
+		description: "define the color of the marks, for fixed values can be any css3 color descriptor or a number that translates to a color in hex",
+		type: "object",
+		properties: {
+			colorScheme: {
+				description: "d3 continuous color scheme to use, see d3-scale-chromatic for options",
+				examples: [
+					"interpolateBlues",
+					"interpolateReds",
+					"interpolateRainbow"
+				],
+				type: "string"
+			}
+		},
+		examples: [
+			{
+				value: "red"
+			},
+			{
+				value: 16581375
+			},
+			{
+				attribute: "sample",
+				type: "categorical",
+				cardinality: 10,
+				colorScheme: "interpolateBuGn"
+			}
+		],
+		allOf: [
+			{
+				$ref: "/channel"
+			}
+		]
+	},
+	size: {
+		description: "size of the mark, used only when mark type is point, use width or height for other mark types. The units of this channel correspond to 1/200th of the canvas e.g. a size of 100 is half the canvas.",
+		type: "object",
+		properties: {
+			maxSize: {
+				type: "number"
+			},
+			minSize: {
+				type: "number"
+			},
+			value: {
+				type: "number"
+			}
+		},
+		examples: [
+			{
+				attribute: "population",
+				type: "quantitative",
+				domain: [
+					0,
+					1000
+				],
+				maxSize: 10,
+				minSize: 1
+			}
+		],
+		allOf: [
+			{
+				$ref: "/channel"
+			}
+		]
+	},
+	width: {
+		description: "width of the mark, used for rect, arc, and tick marks only. The units of this channel correspond to 1/200th of the width of the canvas. This channel may be a genomic range type for arc tracks. If both height and width are specified for a tick mark, only width is used.",
+		type: "object",
+		properties: {
+			maxWidth: {
+				type: "number"
+			},
+			minWidth: {
+				type: "number"
+			},
+			value: {
+				type: "number"
+			}
+		},
+		allOf: [
+			{
+				$ref: "/channel"
+			}
+		]
+	},
+	height: {
+		description: "height of the mark, used for rect, arc, and tick marks only. The units of this channel correspond to 1/200th of the height of the canvas. This channel may be a genomic range type for arc tracks.",
+		type: "object",
+		properties: {
+			maxHeight: {
+				type: "number"
+			},
+			minHeight: {
+				type: "number"
+			},
+			value: {
+				type: "number"
+			}
+		},
+		allOf: [
+			{
+				$ref: "/channel"
+			}
+		]
+	},
+	opacity: {
+		description: "opacity of the mark, compatible with all mark types",
+		type: "object",
+		properties: {
+			minOpacity: {
+				type: "number",
+				minimum: 0,
+				exclusiveMaximum: 1
+			},
+			value: {
+				type: "number"
+			}
+		},
+		allOf: [
+			{
+				$ref: "/channel"
+			}
+		]
+	},
+	shape: {
+		description: "shape of the mark, used only for point marks",
+		type: "object",
+		properties: {
+			value: {
+				"enum": [
+					"dot",
+					"circle",
+					"diamond",
+					"triangle"
+				]
+			}
+		},
+		allOf: [
+			{
+				$ref: "/channel"
+			}
+		]
+	}
+};
+var track = {
+	schema: schema$1,
+	id: id$1,
+	title: title$1,
+	description: description$1,
+	type: type$1,
+	required: required,
+	properties: properties$1
+};
+
+var schema = "https://json-schema.org/draft/2020-12/schema";
+var id = "/channel";
+var title = "Channel";
+var description = "A channel of a visualization";
+var type = "object";
+var properties = {
+	type: {
+		description: "type of attribute, genomic range only compatible with x, y, width and height",
+		"enum": [
+			"quantitative",
+			"categorical",
+			"genomic",
+			"genomicRange",
+			"inline"
+		]
+	},
+	attribute: {
+		description: "column of data frame to use for mapping channel",
+		type: "string"
+	},
+	value: {
+		description: "if fixing a channel, specify with value",
+		type: [
+			"string",
+			"number",
+			"boolean"
+		]
+	},
+	domain: {
+		description: "domain of attribute to use for mapping, required if type is quantitative",
+		type: "array"
+	},
+	cardinality: {
+		description: "number of attribute values to use for mapping, required if type is categorical",
+		type: "integer"
+	},
+	chrAttribute: {
+		description: "if type is genomic or genomicRange, the attribute that contains the chromosome id",
+		type: "string"
+	},
+	startAttribute: {
+		description: "if type is genomicRange, the attribute that contains the start of the range",
+		type: "string"
+	},
+	endAttribute: {
+		description: "if type is genomicRange, the attribute that contains the end of the range",
+		type: "string"
+	},
+	genome: {
+		description: "genome being mapped",
+		"enum": [
+			"hg38",
+			"hg19",
+			"mm39"
+		]
+	}
+};
+var allOf = [
+	{
+		description: "If type is genomic, require genomic attributes and forbid regular attributes",
+		anyOf: [
+			{
+				not: {
+					properties: {
+						type: {
+							"const": "genomic"
+						}
+					},
+					required: [
 						"type"
 					]
 				}
@@ -8266,1827 +9430,3923 @@ var channel = {
 	allOf: allOf
 };
 
-const v = new Validator_1();
-v.addSchema(channel, "/channel");
-v.addSchema(track, "/track");
+const v = new Validator_1();
+v.addSchema(channel, "/channel");
+v.addSchema(track, "/track");
+
+/**
+ * Utility method that returns a boolean on whether the json is a valid specification.
+ * console.errors the reason if it is not.
+ * @param {Object} json specification
+ * @returns boolean
+ */
+const isJSONValid = (json) => {
+  let jsonToValidate = json;
+
+  // Check if any typed arrays are in 'defaultData'
+  const typedArrayTypes = [
+    Int8Array,
+    Uint8Array,
+    Uint8ClampedArray,
+    Int16Array,
+    Uint16Array,
+    Int32Array,
+    Uint32Array,
+    Float32Array,
+    Float64Array,
+    BigInt64Array,
+    BigUint64Array,
+  ];
+
+  if (
+    json.defaultData &&
+    Object.values(json.defaultData).some((value) =>
+      typedArrayTypes.some((T) => value instanceof T)
+    )
+  ) {
+    // Create a deep copy of the json if a typed array needs to be converted
+    jsonToValidate = JSON.parse(JSON.stringify(json));
+
+    // Convert typed arrays to standard arrays
+    Object.keys(jsonToValidate.defaultData).forEach((key) => {
+      if (typedArrayTypes.some((T) => json.defaultData[key] instanceof T)) {
+        jsonToValidate.defaultData[key] = Array.from(json.defaultData[key]);
+      }
+    });
+  }
+
+  const validation = v.validate(jsonToValidate, visualization);
+
+  if (!validation.valid) {
+    console.error(validation.errors);
+  }
+
+  return validation.valid;
+};
+
+class WebGLVis {
+  /**
+   * A class meant to display a visualization based off a given specification using webgl.
+   *
+   * @param {HTMLElement} container <div> or other container element meant to contain the visualization and its mousereader
+   */
+  constructor(container) {
+    this.container = container;
+    this.mouseReader = new MouseReader(document.createElement("div"), this);
+
+    this.parent = document.createElement("div");
+    this.parent.style.position = "relative";
+    this.parent.style.overflow = "hidden";
+
+    this.canvas = document.createElement("canvas");
+    this.canvas.style.position = "absolute";
+
+    this.POSSIBLE_MOUSE_READER_OPTIONS = Object.freeze([
+      "lockedX",
+      "lockedY",
+      "tool",
+      "viewport",
+      "currentXRange",
+      "currentYRange",
+      "uniDirectionalSelectionEnabled",
+      "maxZoomLevel",
+    ]);
+  }
+
+  /**
+   * Resize the canvas to a particular size and rerender the data
+   *
+   * @param {Number} width in pixels to resize the canvas to
+   * @param {Number} height in pixels to resize the canvas to
+   */
+  setCanvasSize(width, height) {
+    this.webglWorker.postMessage({
+      type: "resize",
+      width,
+      height,
+    });
+
+    this.canvas.style.width = width;
+    this.canvas.style.height = height;
+    this.mouseReader.width = width;
+    this.mouseReader.height = height;
+    this.sendDrawerState(this.mouseReader.getViewport());
+  }
+
+  /**
+   * This method does three things, and should only be called once. If changing the specification
+   * use setSpecification.
+   *  1. Add the canvas and mousereader to the DOM for use.
+   *  2. Creates the WebWorkers that render and process the data.
+   *  3. Exposes the messages the webworkers send back to the main thread under this.dataWorkerStream
+   *
+   * @param {Boolean} displayFPSMeter whether or not to display an fps meter
+   */
+  addToDom(displayFPSMeter) {
+    this.container.appendChild(this.parent);
+    this.parent.appendChild(this.canvas);
+    this.parent.appendChild(this.mouseReader.element);
+
+    if (displayFPSMeter) {
+      this.initFpsmeter();
+    }
+
+    const offscreenCanvas = this.canvas.transferControlToOffscreen();
+
+    this.webglWorker = new Worker(new URL("offscreen-webgl-worker-368f04c5-f6300088.js", import.meta.url),
+      { type: "module" }
+    );
+    this.webglWorker.postMessage(
+      {
+        type: "init",
+        canvas: offscreenCanvas,
+        displayFPSMeter,
+      },
+      [offscreenCanvas]
+    );
+
+    // Allow OffScreenWebGLDrawer to tick FPS meter
+    this.webglWorker.onmessage = (e) => {
+      if (e.data.type === "tick") {
+        this.meter.tick();
+      }
+    };
+
+    this.webglWorker.onerror = (e) => {
+      throw e;
+    };
+
+    this.dataWorkerStream = [];
+    this.dataWorker = new Worker(new URL("data-processor-worker-a4482939-b12f104a.js", import.meta.url),
+      { type: "module" }
+    );
+    this.dataWorker.onmessage = (message) => {
+      if (message.data.type === "getClosestPoint") {
+        if (message.data.closestPoint === undefined) {
+          return;
+        }
+        this.dispatchEvent("pointHovered", message);
+      } else if (message.data.type === "getClickPoint") {
+        if (message.data.closestPoint === undefined) {
+          return;
+        }
+        this.dispatchEvent("pointClicked", message);
+      } else if (
+        message.data.type === "selectBox" ||
+        message.data.type === "selectLasso"
+      ) {
+        this.dispatchEvent("onSelectionEnd", message);
+        this.dataWorkerStream.push(message);
+      }
+    };
+    this.dataWorker.onerror = (e) => {
+      throw e;
+    };
+
+    // Needs to be called at the end of addToDOM so mouseReader has correct dimensions to work with
+    this.mouseReader.init();
+  }
+
+  /**
+   * The main method for changing the state of the visualization, such as active tool,
+   * viewport, locking axis, or changing the zoom.
+   *
+   * The format of the options:
+   *   lockedX: boolean
+   *   lockedY: boolean
+   *   viewport: [minX, maxX, minY, maxY] (all Numbers)
+   *   currentXRange: [x1, x2] (Numbers that should be within the viewport minX and maxX)
+   *   currentYRange: [y1, y2] (Numbers that should be within the viewport minY and maxY)
+   *   uniDirectionalSelectionEnabled: boolean
+   *   tool: one of ["pan", "box", "lasso"]
+   *   maxZoomLevel: Number
+   *
+   * @param {Object} options with keys under WebGLVis.POSSIBLE_MOUSE_READER_OPTIONS
+   */
+  setViewOptions(options) {
+    for (const option of this.POSSIBLE_MOUSE_READER_OPTIONS) {
+      if (option in options) {
+        this.mouseReader[option] = options[option];
+      }
+    }
+    this.sendDrawerState(this.mouseReader.getViewport());
+  }
+
+  _setMargins(specification) {
+    const styles = getDimAndMarginStyleForSpecification(specification);
+    this.parent.style.width = specification.width || DEFAULT_WIDTH;
+    this.parent.style.height = specification.height || DEFAULT_HEIGHT;
+    this.canvas.style.width = styles.width;
+    this.canvas.style.height = styles.height;
+    this.canvas.style.margin = styles.margin;
+
+    if (isNaN(styles.width) || isNaN(styles.height)) {
+      // Using css calc
+      const canvasBox = this.canvas.getBoundingClientRect();
+      this.setCanvasSize(canvasBox.width, canvasBox.height);
+    } else {
+      this.setCanvasSize(styles.width, styles.height);
+    }
+  }
+
+  /**
+   * Set the specification of the visualization, and then render it.
+   *
+   * @param {Object} specification describing visualization
+   * @returns boolean on whether the specification was accepted
+   */
+  setSpecification(specification) {
+    if (!isJSONValid(specification)) {
+      return false;
+    }
+
+    this._setMargins(specification);
+    this.mouseReader.setSpecification(specification);
+    this.sendDrawerState(this.mouseReader.getViewport());
+    this.webglWorker.postMessage({ type: "specification", specification });
+    this.dataWorker.postMessage({ type: "init", specification });
+    return true;
+  }
+
+  updateSpecification(specification) {
+    if (!isJSONValid(specification)) {
+      return false;
+    }
+
+    this.webglWorker.postMessage({ type: "specification", specification });
+    return true;
+  }
+
+  /**
+   * Send the viewport to the drawer. Use setViewOptions to change the viewport.
+   *
+   * @param {Object} viewport likely from this.mouseReader.getViewport()
+   */
+  sendDrawerState(viewport) {
+    this.webglWorker.postMessage({ type: "viewport", ...viewport });
+  }
+
+  /**
+   * Calls render in the drawer.
+   */
+  forceDrawerRender() {
+    this.webglWorker.postMessage({
+      type: "render",
+      ...this.mouseReader.getViewport(),
+    });
+  }
+
+  /**
+   * Utility method to have data worker call {@link DataProcessor#selectBox} or
+   * {@link DataProcessor#selectLasso}.
+   *
+   * Does not return, posts result to this.dataWorkerStream.
+   * @param {Array} points array in format [x1,y1,x2,y2,x3,y3,...]
+   * @param {Event} event that triggered the selection
+   *  if points.length == 4, does a box select, if points.length >= 6 does a lasso select
+   *    using points as a polygon
+   */
+  selectPoints(points, event) {
+    if (points.length === 4) {
+      this.dataWorker.postMessage({ type: "selectBox", points, event });
+    } else if (points.length >= 6) {
+      this.dataWorker.postMessage({ type: "selectLasso", points, event });
+    }
+  }
+
+  /**
+   * Utility method to have data worker call {@link DataProcessor#getClosestPoint}.
+   * Does not return, posts result to this.dataWorkerStream.
+   *
+   * @param {Array} point to get closest point to
+   */
+  getClosestPoint(point) {
+    this.dataWorker.postMessage({
+      type: "getClosestPoint",
+      point,
+    });
+  }
+
+  /**
+   * Utility method to have data worker call {@link DataProcessor#getClosestPoint}.
+   * Does not return, posts result to this.dataWorkerStream.
+   *
+   * @param {Array} point to get closest point to
+   */
+  getClickPoint(point) {
+    this.dataWorker.postMessage({
+      type: "getClickPoint",
+      point,
+    });
+  }
+
+  /**
+   * Initializes the FPS meter.
+   */
+  initFpsmeter() {
+    this.meter = new window.FPSMeter(document.querySelector("footer"), {
+      graph: 1,
+      heat: 1,
+      theme: "light",
+      history: 25,
+      top: "-20px",
+      left: `100px`,
+      transform: "translateX(-100%)",
+    });
+  }
+
+  /**
+   * Adds an event listener to visualization on the appropriate component.
+   * Current event types that are supported are
+   * "zoomIn": fires when user zooms in
+   * "zoomOut": fires when user zooms out
+   * "pan": fires when user pans
+   * "onSelection": fires while user is changing the selection box/lasso
+   * "onSelectionEnd": fires when a selection has been completed and the results are in the dataWorkerStream
+   * "pointHovered": fires when pointer hovers over a datapoint
+   * "pointClicked": fires when pointer clicks on a datapoint
+   * "labelClicked": fires when pointer clicks on a label
+   *
+   * For information on the parameters and functionality see:
+   *   https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+   *
+   * @param {String} type
+   * @param {Function} listener
+   * @param {Object} options
+   */
+  addEventListener(type, listener, options) {
+    this.parent.addEventListener(type, listener, options);
+  }
+
+  /**
+   * Dispatches an event on the visualization on the appropriate component.
+   * @param {String} eventName
+   * event name can be one of the following:
+   * "pointHovered" - fires when pointer hovers over a datapoint
+   * "pointClicked" - fires when pointer clicks on a datapoint
+   * "labelClicked" - fires when pointer clicks on a label
+   * "onSelectionEnd" - fires when a selection has been completed and the results are in the dataWorkerStream
+   * @param {Object} message
+   **/
+  dispatchEvent(eventName, message) {
+    const event = new CustomEvent(eventName, { detail: message });
+    this.parent.dispatchEvent(event);
+  }
+
+  /**
+   * Clears the polygon selection on the visualization
+   */
+  clearSelection() {
+    this.mouseReader.clear();
+  }
+}
+
+function identity$3(x) {
+  return x;
+}
+
+var top$1 = 1,
+    right$1 = 2,
+    bottom$1 = 3,
+    left$1 = 4,
+    epsilon$1 = 1e-6;
+
+function translateX$1(x) {
+  return "translate(" + x + ",0)";
+}
+
+function translateY$1(y) {
+  return "translate(0," + y + ")";
+}
+
+function number$4(scale) {
+  return d => +scale(d);
+}
+
+function center$1(scale, offset) {
+  offset = Math.max(0, scale.bandwidth() - offset * 2) / 2;
+  if (scale.round()) offset = Math.round(offset);
+  return d => +scale(d) + offset;
+}
+
+function entering$1() {
+  return !this.__axis;
+}
+
+function axis$1(orient, scale) {
+  var tickArguments = [],
+      tickValues = null,
+      tickFormat = null,
+      tickSizeInner = 6,
+      tickSizeOuter = 6,
+      tickPadding = 3,
+      offset = typeof window !== "undefined" && window.devicePixelRatio > 1 ? 0 : 0.5,
+      k = orient === top$1 || orient === left$1 ? -1 : 1,
+      x = orient === left$1 || orient === right$1 ? "x" : "y",
+      transform = orient === top$1 || orient === bottom$1 ? translateX$1 : translateY$1;
+
+  function axis(context) {
+    var values = tickValues == null ? (scale.ticks ? scale.ticks.apply(scale, tickArguments) : scale.domain()) : tickValues,
+        format = tickFormat == null ? (scale.tickFormat ? scale.tickFormat.apply(scale, tickArguments) : identity$3) : tickFormat,
+        spacing = Math.max(tickSizeInner, 0) + tickPadding,
+        range = scale.range(),
+        range0 = +range[0] + offset,
+        range1 = +range[range.length - 1] + offset,
+        position = (scale.bandwidth ? center$1 : number$4)(scale.copy(), offset),
+        selection = context.selection ? context.selection() : context,
+        path = selection.selectAll(".domain").data([null]),
+        tick = selection.selectAll(".tick").data(values, scale).order(),
+        tickExit = tick.exit(),
+        tickEnter = tick.enter().append("g").attr("class", "tick"),
+        line = tick.select("line"),
+        text = tick.select("text");
+
+    path = path.merge(path.enter().insert("path", ".tick")
+        .attr("class", "domain")
+        .attr("stroke", "currentColor"));
+
+    tick = tick.merge(tickEnter);
+
+    line = line.merge(tickEnter.append("line")
+        .attr("stroke", "currentColor")
+        .attr(x + "2", k * tickSizeInner));
+
+    text = text.merge(tickEnter.append("text")
+        .attr("fill", "currentColor")
+        .attr(x, k * spacing)
+        .attr("dy", orient === top$1 ? "0em" : orient === bottom$1 ? "0.71em" : "0.32em"));
+
+    if (context !== selection) {
+      path = path.transition(context);
+      tick = tick.transition(context);
+      line = line.transition(context);
+      text = text.transition(context);
+
+      tickExit = tickExit.transition(context)
+          .attr("opacity", epsilon$1)
+          .attr("transform", function(d) { return isFinite(d = position(d)) ? transform(d + offset) : this.getAttribute("transform"); });
+
+      tickEnter
+          .attr("opacity", epsilon$1)
+          .attr("transform", function(d) { var p = this.parentNode.__axis; return transform((p && isFinite(p = p(d)) ? p : position(d)) + offset); });
+    }
+
+    tickExit.remove();
+
+    path
+        .attr("d", orient === left$1 || orient === right$1
+            ? (tickSizeOuter ? "M" + k * tickSizeOuter + "," + range0 + "H" + offset + "V" + range1 + "H" + k * tickSizeOuter : "M" + offset + "," + range0 + "V" + range1)
+            : (tickSizeOuter ? "M" + range0 + "," + k * tickSizeOuter + "V" + offset + "H" + range1 + "V" + k * tickSizeOuter : "M" + range0 + "," + offset + "H" + range1));
+
+    tick
+        .attr("opacity", 1)
+        .attr("transform", function(d) { return transform(position(d) + offset); });
+
+    line
+        .attr(x + "2", k * tickSizeInner);
+
+    text
+        .attr(x, k * spacing)
+        .text(format);
+
+    selection.filter(entering$1)
+        .attr("fill", "none")
+        .attr("font-size", 10)
+        .attr("font-family", "sans-serif")
+        .attr("text-anchor", orient === right$1 ? "start" : orient === left$1 ? "end" : "middle");
+
+    selection
+        .each(function() { this.__axis = position; });
+  }
+
+  axis.scale = function(_) {
+    return arguments.length ? (scale = _, axis) : scale;
+  };
+
+  axis.ticks = function() {
+    return tickArguments = Array.from(arguments), axis;
+  };
+
+  axis.tickArguments = function(_) {
+    return arguments.length ? (tickArguments = _ == null ? [] : Array.from(_), axis) : tickArguments.slice();
+  };
+
+  axis.tickValues = function(_) {
+    return arguments.length ? (tickValues = _ == null ? null : Array.from(_), axis) : tickValues && tickValues.slice();
+  };
+
+  axis.tickFormat = function(_) {
+    return arguments.length ? (tickFormat = _, axis) : tickFormat;
+  };
+
+  axis.tickSize = function(_) {
+    return arguments.length ? (tickSizeInner = tickSizeOuter = +_, axis) : tickSizeInner;
+  };
+
+  axis.tickSizeInner = function(_) {
+    return arguments.length ? (tickSizeInner = +_, axis) : tickSizeInner;
+  };
+
+  axis.tickSizeOuter = function(_) {
+    return arguments.length ? (tickSizeOuter = +_, axis) : tickSizeOuter;
+  };
+
+  axis.tickPadding = function(_) {
+    return arguments.length ? (tickPadding = +_, axis) : tickPadding;
+  };
+
+  axis.offset = function(_) {
+    return arguments.length ? (offset = +_, axis) : offset;
+  };
+
+  return axis;
+}
+
+function axisTop$1(scale) {
+  return axis$1(top$1, scale);
+}
+
+function axisRight$1(scale) {
+  return axis$1(right$1, scale);
+}
+
+function axisBottom$1(scale) {
+  return axis$1(bottom$1, scale);
+}
+
+function axisLeft$1(scale) {
+  return axis$1(left$1, scale);
+}
+
+const DEFAULT_ROW_MAX_LABEL_LENGTH_ALLOWED = 15;
+const DEFAULT_COLUMN_MAX_LABEL_LENGTH_ALLOWED = 30;
+const DEFAULT_ROW_LABEL_SLINT_ANGLE = 0;
+const DEFAULT_COLUMN_LABEL_SLINT_ANGLE = 0;
+const DEFAULT_ROW_LABEL_FONT_SIZE = "7px";
+const DEFAULT_COLUMN_LABEL_FONT_SIZE = "7px";
+
+const LABELS_MARGIN_BUFFER_IN_PX = 20;
+const INTENSITY_LEGEND_LABEL_SIZE_IN_PX = 25;
+const INTENSITY_LEGEND_GRADIENT_SIZE_IN_PX = 20;
+const INTENSITY_LEGEND_SIZE_IN_PX =
+  INTENSITY_LEGEND_GRADIENT_SIZE_IN_PX + INTENSITY_LEGEND_LABEL_SIZE_IN_PX;
+const GROUPING_LEGEND_SIZE_IN_PX = 20;
+const INTENSITY_LEGEND_IDENTIFIER = "ehgl-intensity-legend";
+
+const DEFAULT_SIZE_LEGEND_SVG_PADDING = 10;
+const DEFAULT_SIZE_LEGEND_CIRCLE_GAP = 10;
+const DEFAULT_SIZE_LEGEND_CIRCLE_TEXT_GAP = 10;
+
+const DEFAULT_MIN_RADIUS_FOR_DOTPLOT = 3;
+const DEFAULT_MARGIN_BETWEEN_DOTS = 2;
+
+const DEFAULT_MARGINS = {
+  top: "25px",
+  bottom: "50px",
+  left: "50px",
+  right: "10px",
+};
+
+/**
+ * Check if a given variable is an object and not an array.
+ *
+ * @param {any} object - The variable to check.
+ * @returns {boolean} - Returns true if the variable is an object, and not an array.
+ */
+function isObject(object) {
+  return typeof object === "object" && Array.isArray(object) === false;
+}
 
 /**
- * Utility method that returns a boolean on whether the json is a valid specification.
- * console.errors the reason if it is not.
- * @param {Object} json specification
- * @returns boolean
+ * Get the minimum and maximum values from an array.
+ *
+ * @param {Array<number>} arr - An array of numbers.
+ * @returns {Array<number>} - An array containing the minimum and maximum values, in that order.
  */
-const isJSONValid = (json) => {
-  let jsonToValidate = json;
+const getMinMax = (arr) => {
+  var max = -Number.MAX_VALUE,
+    min = Number.MAX_VALUE;
+  arr.forEach(function (x) {
+    if (max < x) max = x;
+    if (min > x) min = x;
+  });
+  return [min, max];
+};
 
-  // Check if any typed arrays are in 'defaultData'
-  const typedArrayTypes = [
-    Int8Array,
-    Uint8Array,
-    Uint8ClampedArray,
-    Int16Array,
-    Uint16Array,
-    Int32Array,
-    Uint32Array,
-    Float32Array,
-    Float64Array,
-    BigInt64Array,
-    BigUint64Array,
-  ];
+/**
+ * Parses an object of margins and returns an object with top, bottom, left, and right margins as integers.
+ *
+ * @param {Object} margins - An object with potential margin properties.
+ * @returns {Object} - An object with top, bottom, left, and right margins as integers.
+ */
+const parseMargins = (margins) => {
+  const parsedMargins = {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  };
 
-  if (
-    json.defaultData &&
-    Object.values(json.defaultData).some((value) =>
-      typedArrayTypes.some((T) => value instanceof T)
-    )
-  ) {
-    // Create a deep copy of the json if a typed array needs to be converted
-    jsonToValidate = JSON.parse(JSON.stringify(json));
+  for (let key in margins) {
+    if (margins.hasOwnProperty(key)) {
+      const value = margins[key];
+      const parsedValue = parseInt(value, 10);
 
-    // Convert typed arrays to standard arrays
-    Object.keys(jsonToValidate.defaultData).forEach((key) => {
-      if (typedArrayTypes.some((T) => json.defaultData[key] instanceof T)) {
-        jsonToValidate.defaultData[key] = Array.from(json.defaultData[key]);
+      if (!isNaN(parsedValue)) {
+        parsedMargins[key] = parsedValue;
       }
-    });
+    }
   }
 
-  const validation = v.validate(jsonToValidate, visualization);
+  return parsedMargins;
+};
 
-  if (!validation.valid) {
-    console.error(validation.errors);
-  }
+/**
+ * Measure the width of a text string for a given font size using SVG.
+ *
+ * @param {string} text - The text to measure.
+ * @param {string} fontSize - The font size to use for the measurement, e.g., '16px'.
+ * @returns {number} - The width of the text in pixels.
+ */
+const getTextWidth = (text, fontSize = "16px") => {
+  // Create a temporary SVG to measure the text width
+  const svg = select("body").append("svg");
+  const textNode = svg.append("text").style("font-size", fontSize).text(text);
+  const width = textNode.node().getBBox().width;
+  svg.remove();
+  return width;
+};
 
-  return validation.valid;
+const getMaxRadiusForDotplot = (xlen, ylen, padding) => {
+  return Math.max(
+    Math.min(198 / (xlen + 1), 198 / (ylen + 1)) - padding,
+    DEFAULT_MIN_RADIUS_FOR_DOTPLOT
+  );
 };
 
-class WebGLVis {
-  /**
-   * A class meant to display a visualization based off a given specification using webgl.
-   *
-   * @param {HTMLElement} container <div> or other container element meant to contain the visualization and its mousereader
-   */
-  constructor(container) {
-    this.container = container;
-    this.mouseReader = new MouseReader(document.createElement("div"), this);
+const getScaledRadiusForDotplot = (
+  radius,
+  maxRadiusScaled,
+  minRadiusOriginal,
+  maxRadiusOriginal,
+  defaultMinRadius = DEFAULT_MIN_RADIUS_FOR_DOTPLOT
+) => {
+  return (
+    defaultMinRadius +
+    (maxRadiusScaled - defaultMinRadius) *
+      ((radius - minRadiusOriginal) / (maxRadiusOriginal - minRadiusOriginal))
+  );
+};
 
-    this.parent = document.createElement("div");
-    this.parent.style.position = "relative";
-    this.parent.style.overflow = "hidden";
+/**
+ * A function to map over both regular JavaScript arrays and typed arrays.
+ *
+ * @param {Array|TypedArray} array - The input array or typed array.
+ * @param {Function} callback - A function that produces an element of the new array,
+ *      taking three arguments:
+ *      currentValue - The current element being processed in the array.
+ *      index - The index of the current element being processed in the array.
+ *      array - The array map was called upon.
+ * @returns {Array|TypedArray} - A new array or typed array with each element being the result
+ *      of the callback function.
+ * @throws {Error} - Throws an error if the input is neither a regular array nor a typed array.
+ */
+const mapArrayOrTypedArray = (array, callback) => {
+  // Check if the input is a regular JavaScript array.
+  if (Array.isArray(array)) {
+    return array.map(callback);
+  }
+  // Check if the input is a typed array.
+  else if (
+    array instanceof Int8Array ||
+    array instanceof Uint8Array ||
+    array instanceof Uint8ClampedArray ||
+    array instanceof Int16Array ||
+    array instanceof Uint16Array ||
+    array instanceof Int32Array ||
+    array instanceof Uint32Array ||
+    array instanceof Float32Array ||
+    array instanceof Float64Array
+  ) {
+    // Create a new typed array of the same type and size as the input.
+    let result = new array.constructor(array.length);
 
-    this.canvas = document.createElement("canvas");
-    this.canvas.style.position = "absolute";
+    // Use forEach to emulate the map functionality for typed arrays.
+    array.forEach((value, index) => {
+      result[index] = callback(value, index);
+    });
 
-    this.POSSIBLE_MOUSE_READER_OPTIONS = Object.freeze([
-      "lockedX",
-      "lockedY",
-      "tool",
-      "viewport",
-      "currentXRange",
-      "currentYRange",
-      "uniDirectionalSelectionEnabled",
-      "maxZoomLevel",
-    ]);
+    return result;
   }
+  // Handle the case where the input is neither a regular array nor a typed array.
+  else {
+    throw new Error("Input is neither a normal array nor a typed array.");
+  }
+};
 
-  /**
-   * Resize the canvas to a particular size and rerender the data
-   *
-   * @param {Number} width in pixels to resize the canvas to
-   * @param {Number} height in pixels to resize the canvas to
-   */
-  setCanvasSize(width, height) {
-    this.webglWorker.postMessage({
-      type: "resize",
-      width,
-      height,
-    });
+var top$2 = 'top';
+var bottom$2 = 'bottom';
+var right$2 = 'right';
+var left$2 = 'left';
+var auto = 'auto';
+var basePlacements = [top$2, bottom$2, right$2, left$2];
+var start = 'start';
+var end = 'end';
+var clippingParents = 'clippingParents';
+var viewport = 'viewport';
+var popper = 'popper';
+var reference = 'reference';
+var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
+  return acc.concat([placement + "-" + start, placement + "-" + end]);
+}, []);
+var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
+  return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
+}, []); // modifiers that need to read the DOM
 
-    this.canvas.style.width = width;
-    this.canvas.style.height = height;
-    this.mouseReader.width = width;
-    this.mouseReader.height = height;
-    this.sendDrawerState(this.mouseReader.getViewport());
+var beforeRead = 'beforeRead';
+var read = 'read';
+var afterRead = 'afterRead'; // pure-logic modifiers
+
+var beforeMain = 'beforeMain';
+var main = 'main';
+var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
+
+var beforeWrite = 'beforeWrite';
+var write = 'write';
+var afterWrite = 'afterWrite';
+var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
+
+function getNodeName(element) {
+  return element ? (element.nodeName || '').toLowerCase() : null;
+}
+
+function getWindow(node) {
+  if (node == null) {
+    return window;
   }
 
-  /**
-   * This method does three things, and should only be called once. If changing the specification
-   * use setSpecification.
-   *  1. Add the canvas and mousereader to the DOM for use.
-   *  2. Creates the WebWorkers that render and process the data.
-   *  3. Exposes the messages the webworkers send back to the main thread under this.dataWorkerStream
-   *
-   * @param {Boolean} displayFPSMeter whether or not to display an fps meter
-   */
-  addToDom(displayFPSMeter) {
-    this.container.appendChild(this.parent);
-    this.parent.appendChild(this.canvas);
-    this.parent.appendChild(this.mouseReader.element);
+  if (node.toString() !== '[object Window]') {
+    var ownerDocument = node.ownerDocument;
+    return ownerDocument ? ownerDocument.defaultView || window : window;
+  }
+
+  return node;
+}
+
+function isElement(node) {
+  var OwnElement = getWindow(node).Element;
+  return node instanceof OwnElement || node instanceof Element;
+}
+
+function isHTMLElement(node) {
+  var OwnElement = getWindow(node).HTMLElement;
+  return node instanceof OwnElement || node instanceof HTMLElement;
+}
+
+function isShadowRoot(node) {
+  // IE 11 has no ShadowRoot
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+
+  var OwnElement = getWindow(node).ShadowRoot;
+  return node instanceof OwnElement || node instanceof ShadowRoot;
+}
+
+// and applies them to the HTMLElements such as popper and arrow
+
+function applyStyles(_ref) {
+  var state = _ref.state;
+  Object.keys(state.elements).forEach(function (name) {
+    var style = state.styles[name] || {};
+    var attributes = state.attributes[name] || {};
+    var element = state.elements[name]; // arrow is optional + virtual elements
+
+    if (!isHTMLElement(element) || !getNodeName(element)) {
+      return;
+    } // Flow doesn't support to extend this property, but it's the most
+    // effective way to apply styles to an HTMLElement
+    // $FlowFixMe[cannot-write]
+
+
+    Object.assign(element.style, style);
+    Object.keys(attributes).forEach(function (name) {
+      var value = attributes[name];
+
+      if (value === false) {
+        element.removeAttribute(name);
+      } else {
+        element.setAttribute(name, value === true ? '' : value);
+      }
+    });
+  });
+}
+
+function effect(_ref2) {
+  var state = _ref2.state;
+  var initialStyles = {
+    popper: {
+      position: state.options.strategy,
+      left: '0',
+      top: '0',
+      margin: '0'
+    },
+    arrow: {
+      position: 'absolute'
+    },
+    reference: {}
+  };
+  Object.assign(state.elements.popper.style, initialStyles.popper);
+  state.styles = initialStyles;
 
-    if (displayFPSMeter) {
-      this.initFpsmeter();
-    }
+  if (state.elements.arrow) {
+    Object.assign(state.elements.arrow.style, initialStyles.arrow);
+  }
 
-    const offscreenCanvas = this.canvas.transferControlToOffscreen();
+  return function () {
+    Object.keys(state.elements).forEach(function (name) {
+      var element = state.elements[name];
+      var attributes = state.attributes[name] || {};
+      var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them
 
-    this.webglWorker = new Worker(new URL("offscreen-webgl-worker-368f04c5-12a46a85.js", import.meta.url),
-      { type: "module" }
-    );
-    this.webglWorker.postMessage(
-      {
-        type: "init",
-        canvas: offscreenCanvas,
-        displayFPSMeter,
-      },
-      [offscreenCanvas]
-    );
+      var style = styleProperties.reduce(function (style, property) {
+        style[property] = '';
+        return style;
+      }, {}); // arrow is optional + virtual elements
 
-    // Allow OffScreenWebGLDrawer to tick FPS meter
-    this.webglWorker.onmessage = (e) => {
-      if (e.data.type === "tick") {
-        this.meter.tick();
+      if (!isHTMLElement(element) || !getNodeName(element)) {
+        return;
       }
-    };
 
-    this.webglWorker.onerror = (e) => {
-      throw e;
-    };
+      Object.assign(element.style, style);
+      Object.keys(attributes).forEach(function (attribute) {
+        element.removeAttribute(attribute);
+      });
+    });
+  };
+} // eslint-disable-next-line import/no-unused-modules
 
-    this.dataWorkerStream = [];
-    this.dataWorker = new Worker(new URL("data-processor-worker-a4482939-6147ac31.js", import.meta.url),
-      { type: "module" }
-    );
-    this.dataWorker.onmessage = (message) => {
-      if (message.data.type === "getClosestPoint") {
-        if (message.data.closestPoint === undefined) {
-          return;
-        }
-        this.dispatchEvent("pointHovered", message);
-      } else if (message.data.type === "getClickPoint") {
-        if (message.data.closestPoint === undefined) {
-          return;
-        }
-        this.dispatchEvent("pointClicked", message);
-      } else if (
-        message.data.type === "selectBox" ||
-        message.data.type === "selectLasso"
-      ) {
-        this.dispatchEvent("onSelectionEnd", message);
-        this.dataWorkerStream.push(message);
-      }
-    };
-    this.dataWorker.onerror = (e) => {
-      throw e;
-    };
 
-    // Needs to be called at the end of addToDOM so mouseReader has correct dimensions to work with
-    this.mouseReader.init();
+var applyStyles$1 = {
+  name: 'applyStyles',
+  enabled: true,
+  phase: 'write',
+  fn: applyStyles,
+  effect: effect,
+  requires: ['computeStyles']
+};
+
+function getBasePlacement(placement) {
+  return placement.split('-')[0];
+}
+
+var max = Math.max;
+var min = Math.min;
+var round = Math.round;
+
+function getUAString() {
+  var uaData = navigator.userAgentData;
+
+  if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
+    return uaData.brands.map(function (item) {
+      return item.brand + "/" + item.version;
+    }).join(' ');
   }
 
-  /**
-   * The main method for changing the state of the visualization, such as active tool,
-   * viewport, locking axis, or changing the zoom.
-   *
-   * The format of the options:
-   *   lockedX: boolean
-   *   lockedY: boolean
-   *   viewport: [minX, maxX, minY, maxY] (all Numbers)
-   *   currentXRange: [x1, x2] (Numbers that should be within the viewport minX and maxX)
-   *   currentYRange: [y1, y2] (Numbers that should be within the viewport minY and maxY)
-   *   uniDirectionalSelectionEnabled: boolean
-   *   tool: one of ["pan", "box", "lasso"]
-   *   maxZoomLevel: Number
-   *
-   * @param {Object} options with keys under WebGLVis.POSSIBLE_MOUSE_READER_OPTIONS
-   */
-  setViewOptions(options) {
-    for (const option of this.POSSIBLE_MOUSE_READER_OPTIONS) {
-      if (option in options) {
-        this.mouseReader[option] = options[option];
-      }
-    }
-    this.sendDrawerState(this.mouseReader.getViewport());
+  return navigator.userAgent;
+}
+
+function isLayoutViewport() {
+  return !/^((?!chrome|android).)*safari/i.test(getUAString());
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
+  if (includeScale === void 0) {
+    includeScale = false;
   }
 
-  _setMargins(specification) {
-    const styles = getDimAndMarginStyleForSpecification(specification);
-    this.parent.style.width = specification.width || DEFAULT_WIDTH;
-    this.parent.style.height = specification.height || DEFAULT_HEIGHT;
-    this.canvas.style.width = styles.width;
-    this.canvas.style.height = styles.height;
-    this.canvas.style.margin = styles.margin;
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
 
-    if (isNaN(styles.width) || isNaN(styles.height)) {
-      // Using css calc
-      const canvasBox = this.canvas.getBoundingClientRect();
-      this.setCanvasSize(canvasBox.width, canvasBox.height);
-    } else {
-      this.setCanvasSize(styles.width, styles.height);
-    }
+  var clientRect = element.getBoundingClientRect();
+  var scaleX = 1;
+  var scaleY = 1;
+
+  if (includeScale && isHTMLElement(element)) {
+    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
+    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
   }
 
-  /**
-   * Set the specification of the visualization, and then render it.
-   *
-   * @param {Object} specification describing visualization
-   * @returns boolean on whether the specification was accepted
-   */
-  setSpecification(specification) {
-    if (!isJSONValid(specification)) {
-      return false;
-    }
+  var _ref = isElement(element) ? getWindow(element) : window,
+      visualViewport = _ref.visualViewport;
 
-    this._setMargins(specification);
-    this.mouseReader.setSpecification(specification);
-    this.sendDrawerState(this.mouseReader.getViewport());
-    this.webglWorker.postMessage({ type: "specification", specification });
-    this.dataWorker.postMessage({ type: "init", specification });
-    return true;
+  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+  var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
+  var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
+  var width = clientRect.width / scaleX;
+  var height = clientRect.height / scaleY;
+  return {
+    width: width,
+    height: height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x: x,
+    y: y
+  };
+}
+
+// means it doesn't take into account transforms.
+
+function getLayoutRect(element) {
+  var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
+  // Fixes https://github.com/popperjs/popper-core/issues/1223
+
+  var width = element.offsetWidth;
+  var height = element.offsetHeight;
+
+  if (Math.abs(clientRect.width - width) <= 1) {
+    width = clientRect.width;
   }
 
-  updateSpecification(specification) {
-    if (!isJSONValid(specification)) {
-      return false;
-    }
+  if (Math.abs(clientRect.height - height) <= 1) {
+    height = clientRect.height;
+  }
 
-    this.webglWorker.postMessage({ type: "specification", specification });
+  return {
+    x: element.offsetLeft,
+    y: element.offsetTop,
+    width: width,
+    height: height
+  };
+}
+
+function contains(parent, child) {
+  var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method
+
+  if (parent.contains(child)) {
     return true;
-  }
+  } // then fallback to custom implementation with Shadow DOM support
+  else if (rootNode && isShadowRoot(rootNode)) {
+      var next = child;
 
-  /**
-   * Send the viewport to the drawer. Use setViewOptions to change the viewport.
-   *
-   * @param {Object} viewport likely from this.mouseReader.getViewport()
-   */
-  sendDrawerState(viewport) {
-    this.webglWorker.postMessage({ type: "viewport", ...viewport });
+      do {
+        if (next && parent.isSameNode(next)) {
+          return true;
+        } // $FlowFixMe[prop-missing]: need a better way to handle this...
+
+
+        next = next.parentNode || next.host;
+      } while (next);
+    } // Give up, the result is false
+
+
+  return false;
+}
+
+function getComputedStyle(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+
+function isTableElement(element) {
+  return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0;
+}
+
+function getDocumentElement(element) {
+  // $FlowFixMe[incompatible-return]: assume body is always available
+  return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing]
+  element.document) || window.document).documentElement;
+}
+
+function getParentNode(element) {
+  if (getNodeName(element) === 'html') {
+    return element;
   }
 
-  /**
-   * Calls render in the drawer.
-   */
-  forceDrawerRender() {
-    this.webglWorker.postMessage({
-      type: "render",
-      ...this.mouseReader.getViewport(),
-    });
+  return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle
+    // $FlowFixMe[incompatible-return]
+    // $FlowFixMe[prop-missing]
+    element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
+    element.parentNode || ( // DOM Element detected
+    isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
+    // $FlowFixMe[incompatible-call]: HTMLElement is a Node
+    getDocumentElement(element) // fallback
+
+  );
+}
+
+function getTrueOffsetParent(element) {
+  if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
+  getComputedStyle(element).position === 'fixed') {
+    return null;
   }
 
-  /**
-   * Utility method to have data worker call {@link DataProcessor#selectBox} or
-   * {@link DataProcessor#selectLasso}.
-   *
-   * Does not return, posts result to this.dataWorkerStream.
-   * @param {Array} points array in format [x1,y1,x2,y2,x3,y3,...]
-   * @param {Event} event that triggered the selection
-   *  if points.length == 4, does a box select, if points.length >= 6 does a lasso select
-   *    using points as a polygon
-   */
-  selectPoints(points, event) {
-    if (points.length === 4) {
-      this.dataWorker.postMessage({ type: "selectBox", points, event });
-    } else if (points.length >= 6) {
-      this.dataWorker.postMessage({ type: "selectLasso", points, event });
+  return element.offsetParent;
+} // `.offsetParent` reports `null` for fixed elements, while absolute elements
+// return the containing block
+
+
+function getContainingBlock(element) {
+  var isFirefox = /firefox/i.test(getUAString());
+  var isIE = /Trident/i.test(getUAString());
+
+  if (isIE && isHTMLElement(element)) {
+    // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
+    var elementCss = getComputedStyle(element);
+
+    if (elementCss.position === 'fixed') {
+      return null;
     }
   }
 
-  /**
-   * Utility method to have data worker call {@link DataProcessor#getClosestPoint}.
-   * Does not return, posts result to this.dataWorkerStream.
-   *
-   * @param {Array} point to get closest point to
-   */
-  getClosestPoint(point) {
-    this.dataWorker.postMessage({
-      type: "getClosestPoint",
-      point,
-    });
-  }
+  var currentNode = getParentNode(element);
 
-  /**
-   * Utility method to have data worker call {@link DataProcessor#getClosestPoint}.
-   * Does not return, posts result to this.dataWorkerStream.
-   *
-   * @param {Array} point to get closest point to
-   */
-  getClickPoint(point) {
-    this.dataWorker.postMessage({
-      type: "getClickPoint",
-      point,
-    });
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
   }
 
-  /**
-   * Initializes the FPS meter.
-   */
-  initFpsmeter() {
-    this.meter = new window.FPSMeter(document.querySelector("footer"), {
-      graph: 1,
-      heat: 1,
-      theme: "light",
-      history: 25,
-      top: "-20px",
-      left: `100px`,
-      transform: "translateX(-100%)",
-    });
-  }
+  while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
+    var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
+    // create a containing block.
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
 
-  /**
-   * Adds an event listener to visualization on the appropriate component.
-   * Current event types that are supported are
-   * "zoomIn": fires when user zooms in
-   * "zoomOut": fires when user zooms out
-   * "pan": fires when user pans
-   * "onSelection": fires while user is changing the selection box/lasso
-   * "onSelectionEnd": fires when a selection has been completed and the results are in the dataWorkerStream
-   * "pointHovered": fires when pointer hovers over a datapoint
-   * "pointClicked": fires when pointer clicks on a datapoint
-   * "labelClicked": fires when pointer clicks on a label
-   *
-   * For information on the parameters and functionality see:
-   *   https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
-   *
-   * @param {String} type
-   * @param {Function} listener
-   * @param {Object} options
-   */
-  addEventListener(type, listener, options) {
-    this.parent.addEventListener(type, listener, options);
+    if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') {
+      return currentNode;
+    } else {
+      currentNode = currentNode.parentNode;
+    }
   }
 
-  /**
-   * Dispatches an event on the visualization on the appropriate component.
-   * @param {String} eventName
-   * event name can be one of the following:
-   * "pointHovered" - fires when pointer hovers over a datapoint
-   * "pointClicked" - fires when pointer clicks on a datapoint
-   * "labelClicked" - fires when pointer clicks on a label
-   * "onSelectionEnd" - fires when a selection has been completed and the results are in the dataWorkerStream
-   * @param {Object} message
-   **/
-  dispatchEvent(eventName, message) {
-    const event = new CustomEvent(eventName, { detail: message });
-    this.parent.dispatchEvent(event);
+  return null;
+} // Gets the closest ancestor positioned element. Handles some edge cases,
+// such as table ancestors and cross browser bugs.
+
+
+function getOffsetParent(element) {
+  var window = getWindow(element);
+  var offsetParent = getTrueOffsetParent(element);
+
+  while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
+    offsetParent = getTrueOffsetParent(offsetParent);
   }
 
-  /**
-   * Clears the polygon selection on the visualization
-   */
-  clearSelection() {
-    this.mouseReader.clear();
+  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) {
+    return window;
   }
+
+  return offsetParent || getContainingBlock(element) || window;
 }
 
-function initRange$1(domain, range) {
-  switch (arguments.length) {
-    case 0: break;
-    case 1: this.range(domain); break;
-    default: this.range(range).domain(domain); break;
-  }
-  return this;
+function getMainAxisFromPlacement(placement) {
+  return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
 }
 
-function define(constructor, factory, prototype) {
-  constructor.prototype = factory.prototype = prototype;
-  prototype.constructor = constructor;
+function within(min$1, value, max$1) {
+  return max(min$1, min(value, max$1));
+}
+function withinMaxClamp(min, value, max) {
+  var v = within(min, value, max);
+  return v > max ? max : v;
 }
 
-function extend(parent, definition) {
-  var prototype = Object.create(parent.prototype);
-  for (var key in definition) prototype[key] = definition[key];
-  return prototype;
+function getFreshSideObject() {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  };
 }
 
-function Color() {}
+function mergePaddingObject(paddingObject) {
+  return Object.assign({}, getFreshSideObject(), paddingObject);
+}
 
-var darker = 0.7;
-var brighter = 1 / darker;
+function expandToHashMap(value, keys) {
+  return keys.reduce(function (hashMap, key) {
+    hashMap[key] = value;
+    return hashMap;
+  }, {});
+}
 
-var reI = "\\s*([+-]?\\d+)\\s*",
-    reN = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*",
-    reP = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
-    reHex = /^#([0-9a-f]{3,8})$/,
-    reRgbInteger = new RegExp(`^rgb\\(${reI},${reI},${reI}\\)$`),
-    reRgbPercent = new RegExp(`^rgb\\(${reP},${reP},${reP}\\)$`),
-    reRgbaInteger = new RegExp(`^rgba\\(${reI},${reI},${reI},${reN}\\)$`),
-    reRgbaPercent = new RegExp(`^rgba\\(${reP},${reP},${reP},${reN}\\)$`),
-    reHslPercent = new RegExp(`^hsl\\(${reN},${reP},${reP}\\)$`),
-    reHslaPercent = new RegExp(`^hsla\\(${reN},${reP},${reP},${reN}\\)$`);
+var toPaddingObject = function toPaddingObject(padding, state) {
+  padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, {
+    placement: state.placement
+  })) : padding;
+  return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
+};
 
-var named = {
-  aliceblue: 0xf0f8ff,
-  antiquewhite: 0xfaebd7,
-  aqua: 0x00ffff,
-  aquamarine: 0x7fffd4,
-  azure: 0xf0ffff,
-  beige: 0xf5f5dc,
-  bisque: 0xffe4c4,
-  black: 0x000000,
-  blanchedalmond: 0xffebcd,
-  blue: 0x0000ff,
-  blueviolet: 0x8a2be2,
-  brown: 0xa52a2a,
-  burlywood: 0xdeb887,
-  cadetblue: 0x5f9ea0,
-  chartreuse: 0x7fff00,
-  chocolate: 0xd2691e,
-  coral: 0xff7f50,
-  cornflowerblue: 0x6495ed,
-  cornsilk: 0xfff8dc,
-  crimson: 0xdc143c,
-  cyan: 0x00ffff,
-  darkblue: 0x00008b,
-  darkcyan: 0x008b8b,
-  darkgoldenrod: 0xb8860b,
-  darkgray: 0xa9a9a9,
-  darkgreen: 0x006400,
-  darkgrey: 0xa9a9a9,
-  darkkhaki: 0xbdb76b,
-  darkmagenta: 0x8b008b,
-  darkolivegreen: 0x556b2f,
-  darkorange: 0xff8c00,
-  darkorchid: 0x9932cc,
-  darkred: 0x8b0000,
-  darksalmon: 0xe9967a,
-  darkseagreen: 0x8fbc8f,
-  darkslateblue: 0x483d8b,
-  darkslategray: 0x2f4f4f,
-  darkslategrey: 0x2f4f4f,
-  darkturquoise: 0x00ced1,
-  darkviolet: 0x9400d3,
-  deeppink: 0xff1493,
-  deepskyblue: 0x00bfff,
-  dimgray: 0x696969,
-  dimgrey: 0x696969,
-  dodgerblue: 0x1e90ff,
-  firebrick: 0xb22222,
-  floralwhite: 0xfffaf0,
-  forestgreen: 0x228b22,
-  fuchsia: 0xff00ff,
-  gainsboro: 0xdcdcdc,
-  ghostwhite: 0xf8f8ff,
-  gold: 0xffd700,
-  goldenrod: 0xdaa520,
-  gray: 0x808080,
-  green: 0x008000,
-  greenyellow: 0xadff2f,
-  grey: 0x808080,
-  honeydew: 0xf0fff0,
-  hotpink: 0xff69b4,
-  indianred: 0xcd5c5c,
-  indigo: 0x4b0082,
-  ivory: 0xfffff0,
-  khaki: 0xf0e68c,
-  lavender: 0xe6e6fa,
-  lavenderblush: 0xfff0f5,
-  lawngreen: 0x7cfc00,
-  lemonchiffon: 0xfffacd,
-  lightblue: 0xadd8e6,
-  lightcoral: 0xf08080,
-  lightcyan: 0xe0ffff,
-  lightgoldenrodyellow: 0xfafad2,
-  lightgray: 0xd3d3d3,
-  lightgreen: 0x90ee90,
-  lightgrey: 0xd3d3d3,
-  lightpink: 0xffb6c1,
-  lightsalmon: 0xffa07a,
-  lightseagreen: 0x20b2aa,
-  lightskyblue: 0x87cefa,
-  lightslategray: 0x778899,
-  lightslategrey: 0x778899,
-  lightsteelblue: 0xb0c4de,
-  lightyellow: 0xffffe0,
-  lime: 0x00ff00,
-  limegreen: 0x32cd32,
-  linen: 0xfaf0e6,
-  magenta: 0xff00ff,
-  maroon: 0x800000,
-  mediumaquamarine: 0x66cdaa,
-  mediumblue: 0x0000cd,
-  mediumorchid: 0xba55d3,
-  mediumpurple: 0x9370db,
-  mediumseagreen: 0x3cb371,
-  mediumslateblue: 0x7b68ee,
-  mediumspringgreen: 0x00fa9a,
-  mediumturquoise: 0x48d1cc,
-  mediumvioletred: 0xc71585,
-  midnightblue: 0x191970,
-  mintcream: 0xf5fffa,
-  mistyrose: 0xffe4e1,
-  moccasin: 0xffe4b5,
-  navajowhite: 0xffdead,
-  navy: 0x000080,
-  oldlace: 0xfdf5e6,
-  olive: 0x808000,
-  olivedrab: 0x6b8e23,
-  orange: 0xffa500,
-  orangered: 0xff4500,
-  orchid: 0xda70d6,
-  palegoldenrod: 0xeee8aa,
-  palegreen: 0x98fb98,
-  paleturquoise: 0xafeeee,
-  palevioletred: 0xdb7093,
-  papayawhip: 0xffefd5,
-  peachpuff: 0xffdab9,
-  peru: 0xcd853f,
-  pink: 0xffc0cb,
-  plum: 0xdda0dd,
-  powderblue: 0xb0e0e6,
-  purple: 0x800080,
-  rebeccapurple: 0x663399,
-  red: 0xff0000,
-  rosybrown: 0xbc8f8f,
-  royalblue: 0x4169e1,
-  saddlebrown: 0x8b4513,
-  salmon: 0xfa8072,
-  sandybrown: 0xf4a460,
-  seagreen: 0x2e8b57,
-  seashell: 0xfff5ee,
-  sienna: 0xa0522d,
-  silver: 0xc0c0c0,
-  skyblue: 0x87ceeb,
-  slateblue: 0x6a5acd,
-  slategray: 0x708090,
-  slategrey: 0x708090,
-  snow: 0xfffafa,
-  springgreen: 0x00ff7f,
-  steelblue: 0x4682b4,
-  tan: 0xd2b48c,
-  teal: 0x008080,
-  thistle: 0xd8bfd8,
-  tomato: 0xff6347,
-  turquoise: 0x40e0d0,
-  violet: 0xee82ee,
-  wheat: 0xf5deb3,
-  white: 0xffffff,
-  whitesmoke: 0xf5f5f5,
-  yellow: 0xffff00,
-  yellowgreen: 0x9acd32
+function arrow(_ref) {
+  var _state$modifiersData$;
+
+  var state = _ref.state,
+      name = _ref.name,
+      options = _ref.options;
+  var arrowElement = state.elements.arrow;
+  var popperOffsets = state.modifiersData.popperOffsets;
+  var basePlacement = getBasePlacement(state.placement);
+  var axis = getMainAxisFromPlacement(basePlacement);
+  var isVertical = [left$2, right$2].indexOf(basePlacement) >= 0;
+  var len = isVertical ? 'height' : 'width';
+
+  if (!arrowElement || !popperOffsets) {
+    return;
+  }
+
+  var paddingObject = toPaddingObject(options.padding, state);
+  var arrowRect = getLayoutRect(arrowElement);
+  var minProp = axis === 'y' ? top$2 : left$2;
+  var maxProp = axis === 'y' ? bottom$2 : right$2;
+  var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len];
+  var startDiff = popperOffsets[axis] - state.rects.reference[axis];
+  var arrowOffsetParent = getOffsetParent(arrowElement);
+  var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
+  var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is
+  // outside of the popper bounds
+
+  var min = paddingObject[minProp];
+  var max = clientSize - arrowRect[len] - paddingObject[maxProp];
+  var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference;
+  var offset = within(min, center, max); // Prevents breaking syntax highlighting...
+
+  var axisProp = axis;
+  state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$);
+}
+
+function effect$1(_ref2) {
+  var state = _ref2.state,
+      options = _ref2.options;
+  var _options$element = options.element,
+      arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element;
+
+  if (arrowElement == null) {
+    return;
+  } // CSS selector
+
+
+  if (typeof arrowElement === 'string') {
+    arrowElement = state.elements.popper.querySelector(arrowElement);
+
+    if (!arrowElement) {
+      return;
+    }
+  }
+
+  if (!contains(state.elements.popper, arrowElement)) {
+    return;
+  }
+
+  state.elements.arrow = arrowElement;
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var arrow$1 = {
+  name: 'arrow',
+  enabled: true,
+  phase: 'main',
+  fn: arrow,
+  effect: effect$1,
+  requires: ['popperOffsets'],
+  requiresIfExists: ['preventOverflow']
+};
+
+function getVariation(placement) {
+  return placement.split('-')[1];
+}
+
+var unsetSides = {
+  top: 'auto',
+  right: 'auto',
+  bottom: 'auto',
+  left: 'auto'
+}; // Round the offsets to the nearest suitable subpixel based on the DPR.
+// Zooming can change the DPR, but it seems to report a value that will
+// cleanly divide the values into the appropriate subpixels.
+
+function roundOffsetsByDPR(_ref, win) {
+  var x = _ref.x,
+      y = _ref.y;
+  var dpr = win.devicePixelRatio || 1;
+  return {
+    x: round(x * dpr) / dpr || 0,
+    y: round(y * dpr) / dpr || 0
+  };
+}
+
+function mapToStyles(_ref2) {
+  var _Object$assign2;
+
+  var popper = _ref2.popper,
+      popperRect = _ref2.popperRect,
+      placement = _ref2.placement,
+      variation = _ref2.variation,
+      offsets = _ref2.offsets,
+      position = _ref2.position,
+      gpuAcceleration = _ref2.gpuAcceleration,
+      adaptive = _ref2.adaptive,
+      roundOffsets = _ref2.roundOffsets,
+      isFixed = _ref2.isFixed;
+  var _offsets$x = offsets.x,
+      x = _offsets$x === void 0 ? 0 : _offsets$x,
+      _offsets$y = offsets.y,
+      y = _offsets$y === void 0 ? 0 : _offsets$y;
+
+  var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
+
+  x = _ref3.x;
+  y = _ref3.y;
+  var hasX = offsets.hasOwnProperty('x');
+  var hasY = offsets.hasOwnProperty('y');
+  var sideX = left$2;
+  var sideY = top$2;
+  var win = window;
+
+  if (adaptive) {
+    var offsetParent = getOffsetParent(popper);
+    var heightProp = 'clientHeight';
+    var widthProp = 'clientWidth';
+
+    if (offsetParent === getWindow(popper)) {
+      offsetParent = getDocumentElement(popper);
+
+      if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
+        heightProp = 'scrollHeight';
+        widthProp = 'scrollWidth';
+      }
+    } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
+
+
+    offsetParent = offsetParent;
+
+    if (placement === top$2 || (placement === left$2 || placement === right$2) && variation === end) {
+      sideY = bottom$2;
+      var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      offsetParent[heightProp];
+      y -= offsetY - popperRect.height;
+      y *= gpuAcceleration ? 1 : -1;
+    }
+
+    if (placement === left$2 || (placement === top$2 || placement === bottom$2) && variation === end) {
+      sideX = right$2;
+      var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      offsetParent[widthProp];
+      x -= offsetX - popperRect.width;
+      x *= gpuAcceleration ? 1 : -1;
+    }
+  }
+
+  var commonStyles = Object.assign({
+    position: position
+  }, adaptive && unsetSides);
+
+  var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
+    x: x,
+    y: y
+  }, getWindow(popper)) : {
+    x: x,
+    y: y
+  };
+
+  x = _ref4.x;
+  y = _ref4.y;
+
+  if (gpuAcceleration) {
+    var _Object$assign;
+
+    return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
+  }
+
+  return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
+}
+
+function computeStyles(_ref5) {
+  var state = _ref5.state,
+      options = _ref5.options;
+  var _options$gpuAccelerat = options.gpuAcceleration,
+      gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
+      _options$adaptive = options.adaptive,
+      adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
+      _options$roundOffsets = options.roundOffsets,
+      roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
+  var commonStyles = {
+    placement: getBasePlacement(state.placement),
+    variation: getVariation(state.placement),
+    popper: state.elements.popper,
+    popperRect: state.rects.popper,
+    gpuAcceleration: gpuAcceleration,
+    isFixed: state.options.strategy === 'fixed'
+  };
+
+  if (state.modifiersData.popperOffsets != null) {
+    state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, {
+      offsets: state.modifiersData.popperOffsets,
+      position: state.options.strategy,
+      adaptive: adaptive,
+      roundOffsets: roundOffsets
+    })));
+  }
+
+  if (state.modifiersData.arrow != null) {
+    state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, {
+      offsets: state.modifiersData.arrow,
+      position: 'absolute',
+      adaptive: false,
+      roundOffsets: roundOffsets
+    })));
+  }
+
+  state.attributes.popper = Object.assign({}, state.attributes.popper, {
+    'data-popper-placement': state.placement
+  });
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var computeStyles$1 = {
+  name: 'computeStyles',
+  enabled: true,
+  phase: 'beforeWrite',
+  fn: computeStyles,
+  data: {}
 };
 
-define(Color, color, {
-  copy(channels) {
-    return Object.assign(new this.constructor, this, channels);
-  },
-  displayable() {
-    return this.rgb().displayable();
-  },
-  hex: color_formatHex, // Deprecated! Use color.formatHex.
-  formatHex: color_formatHex,
-  formatHex8: color_formatHex8,
-  formatHsl: color_formatHsl,
-  formatRgb: color_formatRgb,
-  toString: color_formatRgb
-});
+var passive = {
+  passive: true
+};
 
-function color_formatHex() {
-  return this.rgb().formatHex();
+function effect$2(_ref) {
+  var state = _ref.state,
+      instance = _ref.instance,
+      options = _ref.options;
+  var _options$scroll = options.scroll,
+      scroll = _options$scroll === void 0 ? true : _options$scroll,
+      _options$resize = options.resize,
+      resize = _options$resize === void 0 ? true : _options$resize;
+  var window = getWindow(state.elements.popper);
+  var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper);
+
+  if (scroll) {
+    scrollParents.forEach(function (scrollParent) {
+      scrollParent.addEventListener('scroll', instance.update, passive);
+    });
+  }
+
+  if (resize) {
+    window.addEventListener('resize', instance.update, passive);
+  }
+
+  return function () {
+    if (scroll) {
+      scrollParents.forEach(function (scrollParent) {
+        scrollParent.removeEventListener('scroll', instance.update, passive);
+      });
+    }
+
+    if (resize) {
+      window.removeEventListener('resize', instance.update, passive);
+    }
+  };
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var eventListeners = {
+  name: 'eventListeners',
+  enabled: true,
+  phase: 'write',
+  fn: function fn() {},
+  effect: effect$2,
+  data: {}
+};
+
+var hash = {
+  left: 'right',
+  right: 'left',
+  bottom: 'top',
+  top: 'bottom'
+};
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, function (matched) {
+    return hash[matched];
+  });
 }
 
-function color_formatHex8() {
-  return this.rgb().formatHex8();
+var hash$1 = {
+  start: 'end',
+  end: 'start'
+};
+function getOppositeVariationPlacement(placement) {
+  return placement.replace(/start|end/g, function (matched) {
+    return hash$1[matched];
+  });
 }
 
-function color_formatHsl() {
-  return hslConvert(this).formatHsl();
+function getWindowScroll(node) {
+  var win = getWindow(node);
+  var scrollLeft = win.pageXOffset;
+  var scrollTop = win.pageYOffset;
+  return {
+    scrollLeft: scrollLeft,
+    scrollTop: scrollTop
+  };
 }
 
-function color_formatRgb() {
-  return this.rgb().formatRgb();
+function getWindowScrollBarX(element) {
+  // If <html> has a CSS width greater than the viewport, then this will be
+  // incorrect for RTL.
+  // Popper 1 is broken in this case and never had a bug report so let's assume
+  // it's not an issue. I don't think anyone ever specifies width on <html>
+  // anyway.
+  // Browsers where the left scrollbar doesn't cause an issue report `0` for
+  // this (e.g. Edge 2019, IE11, Safari)
+  return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
 }
 
-function color(format) {
-  var m, l;
-  format = (format + "").trim().toLowerCase();
-  return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) // #ff0000
-      : l === 3 ? new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1) // #f00
-      : l === 8 ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
-      : l === 4 ? rgba((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000
-      : null) // invalid hex
-      : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
-      : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
-      : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
-      : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)
-      : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)
-      : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)
-      : named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins
-      : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0)
-      : null;
+function getViewportRect(element, strategy) {
+  var win = getWindow(element);
+  var html = getDocumentElement(element);
+  var visualViewport = win.visualViewport;
+  var width = html.clientWidth;
+  var height = html.clientHeight;
+  var x = 0;
+  var y = 0;
+
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    var layoutViewport = isLayoutViewport();
+
+    if (layoutViewport || !layoutViewport && strategy === 'fixed') {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
+    }
+  }
+
+  return {
+    width: width,
+    height: height,
+    x: x + getWindowScrollBarX(element),
+    y: y
+  };
 }
 
-function rgbn(n) {
-  return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
+// of the `<html>` and `<body>` rect bounds if horizontally scrollable
+
+function getDocumentRect(element) {
+  var _element$ownerDocumen;
+
+  var html = getDocumentElement(element);
+  var winScroll = getWindowScroll(element);
+  var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;
+  var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
+  var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
+  var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
+  var y = -winScroll.scrollTop;
+
+  if (getComputedStyle(body || html).direction === 'rtl') {
+    x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
+  }
+
+  return {
+    width: width,
+    height: height,
+    x: x,
+    y: y
+  };
 }
 
-function rgba(r, g, b, a) {
-  if (a <= 0) r = g = b = NaN;
-  return new Rgb(r, g, b, a);
+function isScrollParent(element) {
+  // Firefox wants us to check `-x` and `-y` variations as well
+  var _getComputedStyle = getComputedStyle(element),
+      overflow = _getComputedStyle.overflow,
+      overflowX = _getComputedStyle.overflowX,
+      overflowY = _getComputedStyle.overflowY;
+
+  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
 }
 
-function rgbConvert(o) {
-  if (!(o instanceof Color)) o = color(o);
-  if (!o) return new Rgb;
-  o = o.rgb();
-  return new Rgb(o.r, o.g, o.b, o.opacity);
+function getScrollParent(node) {
+  if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) {
+    // $FlowFixMe[incompatible-return]: assume body is always available
+    return node.ownerDocument.body;
+  }
+
+  if (isHTMLElement(node) && isScrollParent(node)) {
+    return node;
+  }
+
+  return getScrollParent(getParentNode(node));
 }
 
-function rgb(r, g, b, opacity) {
-  return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
+/*
+given a DOM element, return the list of all scroll parents, up the list of ancesors
+until we get to the top window object. This list is what we attach scroll listeners
+to, because if any of these parent elements scroll, we'll need to re-calculate the
+reference element's position.
+*/
+
+function listScrollParents(element, list) {
+  var _element$ownerDocumen;
+
+  if (list === void 0) {
+    list = [];
+  }
+
+  var scrollParent = getScrollParent(element);
+  var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body);
+  var win = getWindow(scrollParent);
+  var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
+  var updatedList = list.concat(target);
+  return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here
+  updatedList.concat(listScrollParents(getParentNode(target)));
 }
 
-function Rgb(r, g, b, opacity) {
-  this.r = +r;
-  this.g = +g;
-  this.b = +b;
-  this.opacity = +opacity;
+function rectToClientRect(rect) {
+  return Object.assign({}, rect, {
+    left: rect.x,
+    top: rect.y,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height
+  });
 }
 
-define(Rgb, rgb, extend(Color, {
-  brighter(k) {
-    k = k == null ? brighter : Math.pow(brighter, k);
-    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
-  },
-  darker(k) {
-    k = k == null ? darker : Math.pow(darker, k);
-    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
-  },
-  rgb() {
-    return this;
-  },
-  clamp() {
-    return new Rgb(clampi(this.r), clampi(this.g), clampi(this.b), clampa(this.opacity));
-  },
-  displayable() {
-    return (-0.5 <= this.r && this.r < 255.5)
-        && (-0.5 <= this.g && this.g < 255.5)
-        && (-0.5 <= this.b && this.b < 255.5)
-        && (0 <= this.opacity && this.opacity <= 1);
-  },
-  hex: rgb_formatHex, // Deprecated! Use color.formatHex.
-  formatHex: rgb_formatHex,
-  formatHex8: rgb_formatHex8,
-  formatRgb: rgb_formatRgb,
-  toString: rgb_formatRgb
-}));
+function getInnerBoundingClientRect(element, strategy) {
+  var rect = getBoundingClientRect(element, false, strategy === 'fixed');
+  rect.top = rect.top + element.clientTop;
+  rect.left = rect.left + element.clientLeft;
+  rect.bottom = rect.top + element.clientHeight;
+  rect.right = rect.left + element.clientWidth;
+  rect.width = element.clientWidth;
+  rect.height = element.clientHeight;
+  rect.x = rect.left;
+  rect.y = rect.top;
+  return rect;
+}
+
+function getClientRectFromMixedType(element, clippingParent, strategy) {
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+} // A "clipping parent" is an overflowable container with the characteristic of
+// clipping (or hiding) overflowing elements with a position different from
+// `initial`
+
+
+function getClippingParents(element) {
+  var clippingParents = listScrollParents(getParentNode(element));
+  var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0;
+  var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
+
+  if (!isElement(clipperElement)) {
+    return [];
+  } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414
+
+
+  return clippingParents.filter(function (clippingParent) {
+    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
+  });
+} // Gets the maximum area that the element is visible in due to any number of
+// clipping parents
+
+
+function getClippingRect(element, boundary, rootBoundary, strategy) {
+  var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
+  var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
+  var firstClippingParent = clippingParents[0];
+  var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
+    var rect = getClientRectFromMixedType(element, clippingParent, strategy);
+    accRect.top = max(rect.top, accRect.top);
+    accRect.right = min(rect.right, accRect.right);
+    accRect.bottom = min(rect.bottom, accRect.bottom);
+    accRect.left = max(rect.left, accRect.left);
+    return accRect;
+  }, getClientRectFromMixedType(element, firstClippingParent, strategy));
+  clippingRect.width = clippingRect.right - clippingRect.left;
+  clippingRect.height = clippingRect.bottom - clippingRect.top;
+  clippingRect.x = clippingRect.left;
+  clippingRect.y = clippingRect.top;
+  return clippingRect;
+}
+
+function computeOffsets(_ref) {
+  var reference = _ref.reference,
+      element = _ref.element,
+      placement = _ref.placement;
+  var basePlacement = placement ? getBasePlacement(placement) : null;
+  var variation = placement ? getVariation(placement) : null;
+  var commonX = reference.x + reference.width / 2 - element.width / 2;
+  var commonY = reference.y + reference.height / 2 - element.height / 2;
+  var offsets;
+
+  switch (basePlacement) {
+    case top$2:
+      offsets = {
+        x: commonX,
+        y: reference.y - element.height
+      };
+      break;
+
+    case bottom$2:
+      offsets = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+
+    case right$2:
+      offsets = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+
+    case left$2:
+      offsets = {
+        x: reference.x - element.width,
+        y: commonY
+      };
+      break;
+
+    default:
+      offsets = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+
+  var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null;
+
+  if (mainAxis != null) {
+    var len = mainAxis === 'y' ? 'height' : 'width';
+
+    switch (variation) {
+      case start:
+        offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2);
+        break;
+
+      case end:
+        offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2);
+        break;
+    }
+  }
+
+  return offsets;
+}
+
+function detectOverflow(state, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var _options = options,
+      _options$placement = _options.placement,
+      placement = _options$placement === void 0 ? state.placement : _options$placement,
+      _options$strategy = _options.strategy,
+      strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
+      _options$boundary = _options.boundary,
+      boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
+      _options$rootBoundary = _options.rootBoundary,
+      rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary,
+      _options$elementConte = _options.elementContext,
+      elementContext = _options$elementConte === void 0 ? popper : _options$elementConte,
+      _options$altBoundary = _options.altBoundary,
+      altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary,
+      _options$padding = _options.padding,
+      padding = _options$padding === void 0 ? 0 : _options$padding;
+  var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
+  var altContext = elementContext === popper ? reference : popper;
+  var popperRect = state.rects.popper;
+  var element = state.elements[altBoundary ? altContext : elementContext];
+  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
+  var referenceClientRect = getBoundingClientRect(state.elements.reference);
+  var popperOffsets = computeOffsets({
+    reference: referenceClientRect,
+    element: popperRect,
+    strategy: 'absolute',
+    placement: placement
+  });
+  var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
+  var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect
+  // 0 or negative = within the clipping rect
+
+  var overflowOffsets = {
+    top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
+    bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
+    left: clippingClientRect.left - elementClientRect.left + paddingObject.left,
+    right: elementClientRect.right - clippingClientRect.right + paddingObject.right
+  };
+  var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element
+
+  if (elementContext === popper && offsetData) {
+    var offset = offsetData[placement];
+    Object.keys(overflowOffsets).forEach(function (key) {
+      var multiply = [right$2, bottom$2].indexOf(key) >= 0 ? 1 : -1;
+      var axis = [top$2, bottom$2].indexOf(key) >= 0 ? 'y' : 'x';
+      overflowOffsets[key] += offset[axis] * multiply;
+    });
+  }
+
+  return overflowOffsets;
+}
+
+function computeAutoPlacement(state, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var _options = options,
+      placement = _options.placement,
+      boundary = _options.boundary,
+      rootBoundary = _options.rootBoundary,
+      padding = _options.padding,
+      flipVariations = _options.flipVariations,
+      _options$allowedAutoP = _options.allowedAutoPlacements,
+      allowedAutoPlacements = _options$allowedAutoP === void 0 ? placements : _options$allowedAutoP;
+  var variation = getVariation(placement);
+  var placements$1 = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) {
+    return getVariation(placement) === variation;
+  }) : basePlacements;
+  var allowedPlacements = placements$1.filter(function (placement) {
+    return allowedAutoPlacements.indexOf(placement) >= 0;
+  });
+
+  if (allowedPlacements.length === 0) {
+    allowedPlacements = placements$1;
+  } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
+
+
+  var overflows = allowedPlacements.reduce(function (acc, placement) {
+    acc[placement] = detectOverflow(state, {
+      placement: placement,
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      padding: padding
+    })[getBasePlacement(placement)];
+    return acc;
+  }, {});
+  return Object.keys(overflows).sort(function (a, b) {
+    return overflows[a] - overflows[b];
+  });
+}
+
+function getExpandedFallbackPlacements(placement) {
+  if (getBasePlacement(placement) === auto) {
+    return [];
+  }
+
+  var oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)];
+}
+
+function flip(_ref) {
+  var state = _ref.state,
+      options = _ref.options,
+      name = _ref.name;
+
+  if (state.modifiersData[name]._skip) {
+    return;
+  }
+
+  var _options$mainAxis = options.mainAxis,
+      checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,
+      _options$altAxis = options.altAxis,
+      checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis,
+      specifiedFallbackPlacements = options.fallbackPlacements,
+      padding = options.padding,
+      boundary = options.boundary,
+      rootBoundary = options.rootBoundary,
+      altBoundary = options.altBoundary,
+      _options$flipVariatio = options.flipVariations,
+      flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio,
+      allowedAutoPlacements = options.allowedAutoPlacements;
+  var preferredPlacement = state.options.placement;
+  var basePlacement = getBasePlacement(preferredPlacement);
+  var isBasePlacement = basePlacement === preferredPlacement;
+  var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement));
+  var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) {
+    return acc.concat(getBasePlacement(placement) === auto ? computeAutoPlacement(state, {
+      placement: placement,
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      padding: padding,
+      flipVariations: flipVariations,
+      allowedAutoPlacements: allowedAutoPlacements
+    }) : placement);
+  }, []);
+  var referenceRect = state.rects.reference;
+  var popperRect = state.rects.popper;
+  var checksMap = new Map();
+  var makeFallbackChecks = true;
+  var firstFittingPlacement = placements[0];
+
+  for (var i = 0; i < placements.length; i++) {
+    var placement = placements[i];
+
+    var _basePlacement = getBasePlacement(placement);
+
+    var isStartVariation = getVariation(placement) === start;
+    var isVertical = [top$2, bottom$2].indexOf(_basePlacement) >= 0;
+    var len = isVertical ? 'width' : 'height';
+    var overflow = detectOverflow(state, {
+      placement: placement,
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      altBoundary: altBoundary,
+      padding: padding
+    });
+    var mainVariationSide = isVertical ? isStartVariation ? right$2 : left$2 : isStartVariation ? bottom$2 : top$2;
+
+    if (referenceRect[len] > popperRect[len]) {
+      mainVariationSide = getOppositePlacement(mainVariationSide);
+    }
+
+    var altVariationSide = getOppositePlacement(mainVariationSide);
+    var checks = [];
+
+    if (checkMainAxis) {
+      checks.push(overflow[_basePlacement] <= 0);
+    }
+
+    if (checkAltAxis) {
+      checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0);
+    }
+
+    if (checks.every(function (check) {
+      return check;
+    })) {
+      firstFittingPlacement = placement;
+      makeFallbackChecks = false;
+      break;
+    }
+
+    checksMap.set(placement, checks);
+  }
+
+  if (makeFallbackChecks) {
+    // `2` may be desired in some cases – research later
+    var numberOfChecks = flipVariations ? 3 : 1;
+
+    var _loop = function _loop(_i) {
+      var fittingPlacement = placements.find(function (placement) {
+        var checks = checksMap.get(placement);
+
+        if (checks) {
+          return checks.slice(0, _i).every(function (check) {
+            return check;
+          });
+        }
+      });
+
+      if (fittingPlacement) {
+        firstFittingPlacement = fittingPlacement;
+        return "break";
+      }
+    };
+
+    for (var _i = numberOfChecks; _i > 0; _i--) {
+      var _ret = _loop(_i);
+
+      if (_ret === "break") break;
+    }
+  }
+
+  if (state.placement !== firstFittingPlacement) {
+    state.modifiersData[name]._skip = true;
+    state.placement = firstFittingPlacement;
+    state.reset = true;
+  }
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var flip$1 = {
+  name: 'flip',
+  enabled: true,
+  phase: 'main',
+  fn: flip,
+  requiresIfExists: ['offset'],
+  data: {
+    _skip: false
+  }
+};
+
+function getSideOffsets(overflow, rect, preventedOffsets) {
+  if (preventedOffsets === void 0) {
+    preventedOffsets = {
+      x: 0,
+      y: 0
+    };
+  }
+
+  return {
+    top: overflow.top - rect.height - preventedOffsets.y,
+    right: overflow.right - rect.width + preventedOffsets.x,
+    bottom: overflow.bottom - rect.height + preventedOffsets.y,
+    left: overflow.left - rect.width - preventedOffsets.x
+  };
+}
+
+function isAnySideFullyClipped(overflow) {
+  return [top$2, right$2, bottom$2, left$2].some(function (side) {
+    return overflow[side] >= 0;
+  });
+}
+
+function hide(_ref) {
+  var state = _ref.state,
+      name = _ref.name;
+  var referenceRect = state.rects.reference;
+  var popperRect = state.rects.popper;
+  var preventedOffsets = state.modifiersData.preventOverflow;
+  var referenceOverflow = detectOverflow(state, {
+    elementContext: 'reference'
+  });
+  var popperAltOverflow = detectOverflow(state, {
+    altBoundary: true
+  });
+  var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect);
+  var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets);
+  var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets);
+  var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets);
+  state.modifiersData[name] = {
+    referenceClippingOffsets: referenceClippingOffsets,
+    popperEscapeOffsets: popperEscapeOffsets,
+    isReferenceHidden: isReferenceHidden,
+    hasPopperEscaped: hasPopperEscaped
+  };
+  state.attributes.popper = Object.assign({}, state.attributes.popper, {
+    'data-popper-reference-hidden': isReferenceHidden,
+    'data-popper-escaped': hasPopperEscaped
+  });
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var hide$1 = {
+  name: 'hide',
+  enabled: true,
+  phase: 'main',
+  requiresIfExists: ['preventOverflow'],
+  fn: hide
+};
+
+function distanceAndSkiddingToXY(placement, rects, offset) {
+  var basePlacement = getBasePlacement(placement);
+  var invertDistance = [left$2, top$2].indexOf(basePlacement) >= 0 ? -1 : 1;
+
+  var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, {
+    placement: placement
+  })) : offset,
+      skidding = _ref[0],
+      distance = _ref[1];
+
+  skidding = skidding || 0;
+  distance = (distance || 0) * invertDistance;
+  return [left$2, right$2].indexOf(basePlacement) >= 0 ? {
+    x: distance,
+    y: skidding
+  } : {
+    x: skidding,
+    y: distance
+  };
+}
+
+function offset(_ref2) {
+  var state = _ref2.state,
+      options = _ref2.options,
+      name = _ref2.name;
+  var _options$offset = options.offset,
+      offset = _options$offset === void 0 ? [0, 0] : _options$offset;
+  var data = placements.reduce(function (acc, placement) {
+    acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset);
+    return acc;
+  }, {});
+  var _data$state$placement = data[state.placement],
+      x = _data$state$placement.x,
+      y = _data$state$placement.y;
+
+  if (state.modifiersData.popperOffsets != null) {
+    state.modifiersData.popperOffsets.x += x;
+    state.modifiersData.popperOffsets.y += y;
+  }
+
+  state.modifiersData[name] = data;
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var offset$1 = {
+  name: 'offset',
+  enabled: true,
+  phase: 'main',
+  requires: ['popperOffsets'],
+  fn: offset
+};
+
+function popperOffsets(_ref) {
+  var state = _ref.state,
+      name = _ref.name;
+  // Offsets are the actual position the popper needs to have to be
+  // properly positioned near its reference element
+  // This is the most basic placement, and will be adjusted by
+  // the modifiers in the next step
+  state.modifiersData[name] = computeOffsets({
+    reference: state.rects.reference,
+    element: state.rects.popper,
+    strategy: 'absolute',
+    placement: state.placement
+  });
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var popperOffsets$1 = {
+  name: 'popperOffsets',
+  enabled: true,
+  phase: 'read',
+  fn: popperOffsets,
+  data: {}
+};
+
+function getAltAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+
+function preventOverflow(_ref) {
+  var state = _ref.state,
+      options = _ref.options,
+      name = _ref.name;
+  var _options$mainAxis = options.mainAxis,
+      checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,
+      _options$altAxis = options.altAxis,
+      checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis,
+      boundary = options.boundary,
+      rootBoundary = options.rootBoundary,
+      altBoundary = options.altBoundary,
+      padding = options.padding,
+      _options$tether = options.tether,
+      tether = _options$tether === void 0 ? true : _options$tether,
+      _options$tetherOffset = options.tetherOffset,
+      tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset;
+  var overflow = detectOverflow(state, {
+    boundary: boundary,
+    rootBoundary: rootBoundary,
+    padding: padding,
+    altBoundary: altBoundary
+  });
+  var basePlacement = getBasePlacement(state.placement);
+  var variation = getVariation(state.placement);
+  var isBasePlacement = !variation;
+  var mainAxis = getMainAxisFromPlacement(basePlacement);
+  var altAxis = getAltAxis(mainAxis);
+  var popperOffsets = state.modifiersData.popperOffsets;
+  var referenceRect = state.rects.reference;
+  var popperRect = state.rects.popper;
+  var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
+    placement: state.placement
+  })) : tetherOffset;
+  var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
+    mainAxis: tetherOffsetValue,
+    altAxis: tetherOffsetValue
+  } : Object.assign({
+    mainAxis: 0,
+    altAxis: 0
+  }, tetherOffsetValue);
+  var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
+  var data = {
+    x: 0,
+    y: 0
+  };
+
+  if (!popperOffsets) {
+    return;
+  }
+
+  if (checkMainAxis) {
+    var _offsetModifierState$;
+
+    var mainSide = mainAxis === 'y' ? top$2 : left$2;
+    var altSide = mainAxis === 'y' ? bottom$2 : right$2;
+    var len = mainAxis === 'y' ? 'height' : 'width';
+    var offset = popperOffsets[mainAxis];
+    var min$1 = offset + overflow[mainSide];
+    var max$1 = offset - overflow[altSide];
+    var additive = tether ? -popperRect[len] / 2 : 0;
+    var minLen = variation === start ? referenceRect[len] : popperRect[len];
+    var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
+    // outside the reference bounds
+
+    var arrowElement = state.elements.arrow;
+    var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : {
+      width: 0,
+      height: 0
+    };
+    var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject();
+    var arrowPaddingMin = arrowPaddingObject[mainSide];
+    var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want
+    // to include its full size in the calculation. If the reference is small
+    // and near the edge of a boundary, the popper can overflow even if the
+    // reference is not overflowing as well (e.g. virtual elements with no
+    // width or height)
+
+    var arrowLen = within(0, referenceRect[len], arrowRect[len]);
+    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
+    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
+    var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
+    var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
+    var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
+    var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
+    var tetherMax = offset + maxOffset - offsetModifierValue;
+    var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
+    popperOffsets[mainAxis] = preventedOffset;
+    data[mainAxis] = preventedOffset - offset;
+  }
 
-function rgb_formatHex() {
-  return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}`;
-}
+  if (checkAltAxis) {
+    var _offsetModifierState$2;
 
-function rgb_formatHex8() {
-  return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}${hex((isNaN(this.opacity) ? 1 : this.opacity) * 255)}`;
-}
+    var _mainSide = mainAxis === 'x' ? top$2 : left$2;
 
-function rgb_formatRgb() {
-  const a = clampa(this.opacity);
-  return `${a === 1 ? "rgb(" : "rgba("}${clampi(this.r)}, ${clampi(this.g)}, ${clampi(this.b)}${a === 1 ? ")" : `, ${a})`}`;
-}
+    var _altSide = mainAxis === 'x' ? bottom$2 : right$2;
 
-function clampa(opacity) {
-  return isNaN(opacity) ? 1 : Math.max(0, Math.min(1, opacity));
-}
+    var _offset = popperOffsets[altAxis];
 
-function clampi(value) {
-  return Math.max(0, Math.min(255, Math.round(value) || 0));
-}
+    var _len = altAxis === 'y' ? 'height' : 'width';
 
-function hex(value) {
-  value = clampi(value);
-  return (value < 16 ? "0" : "") + value.toString(16);
-}
+    var _min = _offset + overflow[_mainSide];
 
-function hsla(h, s, l, a) {
-  if (a <= 0) h = s = l = NaN;
-  else if (l <= 0 || l >= 1) h = s = NaN;
-  else if (s <= 0) h = NaN;
-  return new Hsl(h, s, l, a);
-}
+    var _max = _offset - overflow[_altSide];
 
-function hslConvert(o) {
-  if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
-  if (!(o instanceof Color)) o = color(o);
-  if (!o) return new Hsl;
-  if (o instanceof Hsl) return o;
-  o = o.rgb();
-  var r = o.r / 255,
-      g = o.g / 255,
-      b = o.b / 255,
-      min = Math.min(r, g, b),
-      max = Math.max(r, g, b),
-      h = NaN,
-      s = max - min,
-      l = (max + min) / 2;
-  if (s) {
-    if (r === max) h = (g - b) / s + (g < b) * 6;
-    else if (g === max) h = (b - r) / s + 2;
-    else h = (r - g) / s + 4;
-    s /= l < 0.5 ? max + min : 2 - max - min;
-    h *= 60;
-  } else {
-    s = l > 0 && l < 1 ? 0 : h;
-  }
-  return new Hsl(h, s, l, o.opacity);
-}
+    var isOriginSide = [top$2, left$2].indexOf(basePlacement) !== -1;
 
-function hsl(h, s, l, opacity) {
-  return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
-}
+    var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
 
-function Hsl(h, s, l, opacity) {
-  this.h = +h;
-  this.s = +s;
-  this.l = +l;
-  this.opacity = +opacity;
-}
+    var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
 
-define(Hsl, hsl, extend(Color, {
-  brighter(k) {
-    k = k == null ? brighter : Math.pow(brighter, k);
-    return new Hsl(this.h, this.s, this.l * k, this.opacity);
-  },
-  darker(k) {
-    k = k == null ? darker : Math.pow(darker, k);
-    return new Hsl(this.h, this.s, this.l * k, this.opacity);
-  },
-  rgb() {
-    var h = this.h % 360 + (this.h < 0) * 360,
-        s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
-        l = this.l,
-        m2 = l + (l < 0.5 ? l : 1 - l) * s,
-        m1 = 2 * l - m2;
-    return new Rgb(
-      hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
-      hsl2rgb(h, m1, m2),
-      hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
-      this.opacity
-    );
-  },
-  clamp() {
-    return new Hsl(clamph(this.h), clampt(this.s), clampt(this.l), clampa(this.opacity));
-  },
-  displayable() {
-    return (0 <= this.s && this.s <= 1 || isNaN(this.s))
-        && (0 <= this.l && this.l <= 1)
-        && (0 <= this.opacity && this.opacity <= 1);
-  },
-  formatHsl() {
-    const a = clampa(this.opacity);
-    return `${a === 1 ? "hsl(" : "hsla("}${clamph(this.h)}, ${clampt(this.s) * 100}%, ${clampt(this.l) * 100}%${a === 1 ? ")" : `, ${a})`}`;
-  }
-}));
+    var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
 
-function clamph(value) {
-  value = (value || 0) % 360;
-  return value < 0 ? value + 360 : value;
-}
+    var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
 
-function clampt(value) {
-  return Math.max(0, Math.min(1, value || 0));
-}
+    popperOffsets[altAxis] = _preventedOffset;
+    data[altAxis] = _preventedOffset - _offset;
+  }
 
-/* From FvD 13.37, CSS Color Module Level 3 */
-function hsl2rgb(h, m1, m2) {
-  return (h < 60 ? m1 + (m2 - m1) * h / 60
-      : h < 180 ? m2
-      : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60
-      : m1) * 255;
-}
+  state.modifiersData[name] = data;
+} // eslint-disable-next-line import/no-unused-modules
 
-var constant$2 = x => () => x;
 
-function linear$1(a, d) {
-  return function(t) {
-    return a + t * d;
-  };
-}
+var preventOverflow$1 = {
+  name: 'preventOverflow',
+  enabled: true,
+  phase: 'main',
+  fn: preventOverflow,
+  requiresIfExists: ['offset']
+};
 
-function exponential(a, b, y) {
-  return a = Math.pow(a, y), b = Math.pow(b, y) - a, y = 1 / y, function(t) {
-    return Math.pow(a + t * b, y);
+function getHTMLElementScroll(element) {
+  return {
+    scrollLeft: element.scrollLeft,
+    scrollTop: element.scrollTop
   };
 }
 
-function gamma(y) {
-  return (y = +y) === 1 ? nogamma : function(a, b) {
-    return b - a ? exponential(a, b, y) : constant$2(isNaN(a) ? b : a);
-  };
+function getNodeScroll(node) {
+  if (node === getWindow(node) || !isHTMLElement(node)) {
+    return getWindowScroll(node);
+  } else {
+    return getHTMLElementScroll(node);
+  }
 }
 
-function nogamma(a, b) {
-  var d = b - a;
-  return d ? linear$1(a, d) : constant$2(isNaN(a) ? b : a);
-}
+function isElementScaled(element) {
+  var rect = element.getBoundingClientRect();
+  var scaleX = round(rect.width) / element.offsetWidth || 1;
+  var scaleY = round(rect.height) / element.offsetHeight || 1;
+  return scaleX !== 1 || scaleY !== 1;
+} // Returns the composite rect of an element relative to its offsetParent.
+// Composite means it takes into account transforms as well as layout.
 
-var rgb$1 = (function rgbGamma(y) {
-  var color = gamma(y);
 
-  function rgb$1(start, end) {
-    var r = color((start = rgb(start)).r, (end = rgb(end)).r),
-        g = color(start.g, end.g),
-        b = color(start.b, end.b),
-        opacity = nogamma(start.opacity, end.opacity);
-    return function(t) {
-      start.r = r(t);
-      start.g = g(t);
-      start.b = b(t);
-      start.opacity = opacity(t);
-      return start + "";
-    };
+function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
+  if (isFixed === void 0) {
+    isFixed = false;
   }
 
-  rgb$1.gamma = rgbGamma;
+  var isOffsetParentAnElement = isHTMLElement(offsetParent);
+  var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
+  var documentElement = getDocumentElement(offsetParent);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
+  var scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  var offsets = {
+    x: 0,
+    y: 0
+  };
 
-  return rgb$1;
-})(1);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078
+    isScrollParent(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
 
-function numberArray$1(a, b) {
-  if (!b) b = [];
-  var n = a ? Math.min(b.length, a.length) : 0,
-      c = b.slice(),
-      i;
-  return function(t) {
-    for (i = 0; i < n; ++i) c[i] = a[i] * (1 - t) + b[i] * t;
-    return c;
-  };
-}
+    if (isHTMLElement(offsetParent)) {
+      offsets = getBoundingClientRect(offsetParent, true);
+      offsets.x += offsetParent.clientLeft;
+      offsets.y += offsetParent.clientTop;
+    } else if (documentElement) {
+      offsets.x = getWindowScrollBarX(documentElement);
+    }
+  }
 
-function isNumberArray$1(x) {
-  return ArrayBuffer.isView(x) && !(x instanceof DataView);
+  return {
+    x: rect.left + scroll.scrollLeft - offsets.x,
+    y: rect.top + scroll.scrollTop - offsets.y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+
+function order(modifiers) {
+  var map = new Map();
+  var visited = new Set();
+  var result = [];
+  modifiers.forEach(function (modifier) {
+    map.set(modifier.name, modifier);
+  }); // On visiting object, check for its dependencies and visit them recursively
+
+  function sort(modifier) {
+    visited.add(modifier.name);
+    var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []);
+    requires.forEach(function (dep) {
+      if (!visited.has(dep)) {
+        var depModifier = map.get(dep);
+
+        if (depModifier) {
+          sort(depModifier);
+        }
+      }
+    });
+    result.push(modifier);
+  }
+
+  modifiers.forEach(function (modifier) {
+    if (!visited.has(modifier.name)) {
+      // check for visited object
+      sort(modifier);
+    }
+  });
+  return result;
 }
 
-function genericArray$1(a, b) {
-  var nb = b ? b.length : 0,
-      na = a ? Math.min(nb, a.length) : 0,
-      x = new Array(na),
-      c = new Array(nb),
-      i;
+function orderModifiers(modifiers) {
+  // order based on dependencies
+  var orderedModifiers = order(modifiers); // order based on phase
 
-  for (i = 0; i < na; ++i) x[i] = interpolate$1(a[i], b[i]);
-  for (; i < nb; ++i) c[i] = b[i];
+  return modifierPhases.reduce(function (acc, phase) {
+    return acc.concat(orderedModifiers.filter(function (modifier) {
+      return modifier.phase === phase;
+    }));
+  }, []);
+}
 
-  return function(t) {
-    for (i = 0; i < na; ++i) c[i] = x[i](t);
-    return c;
+function debounce(fn) {
+  var pending;
+  return function () {
+    if (!pending) {
+      pending = new Promise(function (resolve) {
+        Promise.resolve().then(function () {
+          pending = undefined;
+          resolve(fn());
+        });
+      });
+    }
+
+    return pending;
   };
 }
 
-function date$1(a, b) {
-  var d = new Date;
-  return a = +a, b = +b, function(t) {
-    return d.setTime(a * (1 - t) + b * t), d;
-  };
+function mergeByName(modifiers) {
+  var merged = modifiers.reduce(function (merged, current) {
+    var existing = merged[current.name];
+    merged[current.name] = existing ? Object.assign({}, existing, current, {
+      options: Object.assign({}, existing.options, current.options),
+      data: Object.assign({}, existing.data, current.data)
+    }) : current;
+    return merged;
+  }, {}); // IE11 does not support Object.values
+
+  return Object.keys(merged).map(function (key) {
+    return merged[key];
+  });
 }
 
-function interpolateNumber$1(a, b) {
-  return a = +a, b = +b, function(t) {
-    return a * (1 - t) + b * t;
-  };
+var DEFAULT_OPTIONS = {
+  placement: 'bottom',
+  modifiers: [],
+  strategy: 'absolute'
+};
+
+function areValidElements() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return !args.some(function (element) {
+    return !(element && typeof element.getBoundingClientRect === 'function');
+  });
 }
 
-function object$1(a, b) {
-  var i = {},
-      c = {},
-      k;
+function popperGenerator(generatorOptions) {
+  if (generatorOptions === void 0) {
+    generatorOptions = {};
+  }
 
-  if (a === null || typeof a !== "object") a = {};
-  if (b === null || typeof b !== "object") b = {};
+  var _generatorOptions = generatorOptions,
+      _generatorOptions$def = _generatorOptions.defaultModifiers,
+      defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def,
+      _generatorOptions$def2 = _generatorOptions.defaultOptions,
+      defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2;
+  return function createPopper(reference, popper, options) {
+    if (options === void 0) {
+      options = defaultOptions;
+    }
 
-  for (k in b) {
-    if (k in a) {
-      i[k] = interpolate$1(a[k], b[k]);
-    } else {
-      c[k] = b[k];
+    var state = {
+      placement: 'bottom',
+      orderedModifiers: [],
+      options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
+      modifiersData: {},
+      elements: {
+        reference: reference,
+        popper: popper
+      },
+      attributes: {},
+      styles: {}
+    };
+    var effectCleanupFns = [];
+    var isDestroyed = false;
+    var instance = {
+      state: state,
+      setOptions: function setOptions(setOptionsAction) {
+        var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
+        cleanupModifierEffects();
+        state.options = Object.assign({}, defaultOptions, state.options, options);
+        state.scrollParents = {
+          reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
+          popper: listScrollParents(popper)
+        }; // Orders the modifiers based on their dependencies and `phase`
+        // properties
+
+        var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers
+
+        state.orderedModifiers = orderedModifiers.filter(function (m) {
+          return m.enabled;
+        });
+        runModifierEffects();
+        return instance.update();
+      },
+      // Sync update – it will always be executed, even if not necessary. This
+      // is useful for low frequency updates where sync behavior simplifies the
+      // logic.
+      // For high frequency updates (e.g. `resize` and `scroll` events), always
+      // prefer the async Popper#update method
+      forceUpdate: function forceUpdate() {
+        if (isDestroyed) {
+          return;
+        }
+
+        var _state$elements = state.elements,
+            reference = _state$elements.reference,
+            popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements
+        // anymore
+
+        if (!areValidElements(reference, popper)) {
+          return;
+        } // Store the reference and popper rects to be read by modifiers
+
+
+        state.rects = {
+          reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'),
+          popper: getLayoutRect(popper)
+        }; // Modifiers have the ability to reset the current update cycle. The
+        // most common use case for this is the `flip` modifier changing the
+        // placement, which then needs to re-run all the modifiers, because the
+        // logic was previously ran for the previous placement and is therefore
+        // stale/incorrect
+
+        state.reset = false;
+        state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier
+        // is filled with the initial data specified by the modifier. This means
+        // it doesn't persist and is fresh on each update.
+        // To ensure persistent data, use `${name}#persistent`
+
+        state.orderedModifiers.forEach(function (modifier) {
+          return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
+        });
+
+        for (var index = 0; index < state.orderedModifiers.length; index++) {
+          if (state.reset === true) {
+            state.reset = false;
+            index = -1;
+            continue;
+          }
+
+          var _state$orderedModifie = state.orderedModifiers[index],
+              fn = _state$orderedModifie.fn,
+              _state$orderedModifie2 = _state$orderedModifie.options,
+              _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2,
+              name = _state$orderedModifie.name;
+
+          if (typeof fn === 'function') {
+            state = fn({
+              state: state,
+              options: _options,
+              name: name,
+              instance: instance
+            }) || state;
+          }
+        }
+      },
+      // Async and optimistically optimized update – it will not be executed if
+      // not necessary (debounced to run at most once-per-tick)
+      update: debounce(function () {
+        return new Promise(function (resolve) {
+          instance.forceUpdate();
+          resolve(state);
+        });
+      }),
+      destroy: function destroy() {
+        cleanupModifierEffects();
+        isDestroyed = true;
+      }
+    };
+
+    if (!areValidElements(reference, popper)) {
+      return instance;
     }
-  }
 
-  return function(t) {
-    for (k in i) c[k] = i[k](t);
-    return c;
-  };
-}
+    instance.setOptions(options).then(function (state) {
+      if (!isDestroyed && options.onFirstUpdate) {
+        options.onFirstUpdate(state);
+      }
+    }); // Modifiers have the ability to execute arbitrary code before the first
+    // update cycle runs. They will be executed in the same order as the update
+    // cycle. This is useful when a modifier adds some persistent data that
+    // other modifiers need to use, but the modifier is run after the dependent
+    // one.
+
+    function runModifierEffects() {
+      state.orderedModifiers.forEach(function (_ref) {
+        var name = _ref.name,
+            _ref$options = _ref.options,
+            options = _ref$options === void 0 ? {} : _ref$options,
+            effect = _ref.effect;
+
+        if (typeof effect === 'function') {
+          var cleanupFn = effect({
+            state: state,
+            name: name,
+            instance: instance,
+            options: options
+          });
 
-var reA$1 = /[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g,
-    reB$1 = new RegExp(reA$1.source, "g");
+          var noopFn = function noopFn() {};
 
-function zero$2(b) {
-  return function() {
-    return b;
-  };
-}
+          effectCleanupFns.push(cleanupFn || noopFn);
+        }
+      });
+    }
+
+    function cleanupModifierEffects() {
+      effectCleanupFns.forEach(function (fn) {
+        return fn();
+      });
+      effectCleanupFns = [];
+    }
 
-function one$1(b) {
-  return function(t) {
-    return b(t) + "";
+    return instance;
   };
 }
 
-function string$1(a, b) {
-  var bi = reA$1.lastIndex = reB$1.lastIndex = 0, // scan index for next number in b
-      am, // current match in a
-      bm, // current match in b
-      bs, // string preceding current number in b, if any
-      i = -1, // index in s
-      s = [], // string constants and placeholders
-      q = []; // number interpolators
-
-  // Coerce inputs to strings.
-  a = a + "", b = b + "";
+var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1];
+var createPopper = /*#__PURE__*/popperGenerator({
+  defaultModifiers: defaultModifiers
+}); // eslint-disable-next-line import/no-unused-modules
 
-  // Interpolate pairs of numbers in a & b.
-  while ((am = reA$1.exec(a))
-      && (bm = reB$1.exec(b))) {
-    if ((bs = bm.index) > bi) { // a string precedes the next number in b
-      bs = b.slice(bi, bs);
-      if (s[i]) s[i] += bs; // coalesce with previous string
-      else s[++i] = bs;
-    }
-    if ((am = am[0]) === (bm = bm[0])) { // numbers in a & b match
-      if (s[i]) s[i] += bm; // coalesce with previous string
-      else s[++i] = bm;
-    } else { // interpolate non-matching numbers
-      s[++i] = null;
-      q.push({i: i, x: interpolateNumber$1(am, bm)});
-    }
-    bi = reB$1.lastIndex;
-  }
+/**!
+* tippy.js v6.0.0
+* (c) 2017-2020 atomiks
+* MIT License
+*/
 
-  // Add remains of b.
-  if (bi < b.length) {
-    bs = b.slice(bi);
-    if (s[i]) s[i] += bs; // coalesce with previous string
-    else s[++i] = bs;
+var PASSIVE = {
+  passive: true
+};
+var IOS_CLASS = "tippy-iOS";
+var BOX_CLASS = "tippy-box";
+var CONTENT_CLASS = "tippy-content";
+var BACKDROP_CLASS = "tippy-backdrop";
+var ARROW_CLASS = "tippy-arrow";
+var SVG_ARROW_CLASS = "tippy-svg-arrow";
+function getValueAtIndexOrReturn(value, index, defaultValue) {
+  if (Array.isArray(value)) {
+    var v = value[index];
+    return v == null ? Array.isArray(defaultValue) ? defaultValue[index] : defaultValue : v;
   }
 
-  // Special optimization for only a single match.
-  // Otherwise, interpolate each of the numbers and rejoin the string.
-  return s.length < 2 ? (q[0]
-      ? one$1(q[0].x)
-      : zero$2(b))
-      : (b = q.length, function(t) {
-          for (var i = 0, o; i < b; ++i) s[(o = q[i]).i] = o.x(t);
-          return s.join("");
-        });
+  return value;
 }
-
-function interpolate$1(a, b) {
-  var t = typeof b, c;
-  return b == null || t === "boolean" ? constant$2(b)
-      : (t === "number" ? interpolateNumber$1
-      : t === "string" ? ((c = color(b)) ? (b = c, rgb$1) : string$1)
-      : b instanceof color ? rgb$1
-      : b instanceof Date ? date$1
-      : isNumberArray$1(b) ? numberArray$1
-      : Array.isArray(b) ? genericArray$1
-      : typeof b.valueOf !== "function" && typeof b.toString !== "function" || isNaN(b) ? object$1
-      : interpolateNumber$1)(a, b);
+function isType(value, type) {
+  var str = {}.toString.call(value);
+  return str.indexOf('[object') === 0 && str.indexOf(type + "]") > -1;
 }
-
-function interpolateRound$1(a, b) {
-  return a = +a, b = +b, function(t) {
-    return Math.round(a * (1 - t) + b * t);
-  };
+function invokeWithArgsOrReturn(value, args) {
+  return typeof value === 'function' ? value.apply(void 0, args) : value;
 }
+function debounce$1(fn, ms) {
+  // Avoid wrapping in `setTimeout` if ms is 0 anyway
+  if (ms === 0) {
+    return fn;
+  }
 
-function constants$1(x) {
-  return function() {
-    return x;
+  var timeout;
+  return function (arg) {
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+      fn(arg);
+    }, ms);
   };
 }
+function splitBySpaces(value) {
+  return value.split(/\s+/).filter(Boolean);
+}
+function normalizeToArray(value) {
+  return [].concat(value);
+}
+function pushIfUnique(arr, value) {
+  if (arr.indexOf(value) === -1) {
+    arr.push(value);
+  }
+}
+function unique(arr) {
+  return arr.filter(function (item, index) {
+    return arr.indexOf(item) === index;
+  });
+}
+function getBasePlacement$1(placement) {
+  return placement.split('-')[0];
+}
+function arrayFrom(value) {
+  return [].slice.call(value);
+}
 
-function number$4(x) {
-  return +x;
+function div() {
+  return document.createElement('div');
+}
+function isElement$1(value) {
+  return isType(value, 'Element');
+}
+function isNodeList(value) {
+  return isType(value, 'NodeList');
+}
+function isMouseEvent(value) {
+  return isType(value, 'MouseEvent');
 }
+function isReferenceElement(value) {
+  return !!(value && value._tippy && value._tippy.reference === value);
+}
+function getArrayOfElements(value) {
+  if (isElement$1(value)) {
+    return [value];
+  }
 
-var unit$1 = [0, 1];
+  if (isNodeList(value)) {
+    return arrayFrom(value);
+  }
 
-function identity$2(x) {
-  return x;
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  return arrayFrom(document.querySelectorAll(value));
 }
+function setTransitionDuration(els, value) {
+  els.forEach(function (el) {
+    if (el) {
+      el.style.transitionDuration = value + "ms";
+    }
+  });
+}
+function setVisibilityState(els, state) {
+  els.forEach(function (el) {
+    if (el) {
+      el.setAttribute('data-state', state);
+    }
+  });
+}
+function getOwnerDocument(elementOrElements) {
+  var _normalizeToArray = normalizeToArray(elementOrElements),
+      element = _normalizeToArray[0];
 
-function normalize$1(a, b) {
-  return (b -= (a = +a))
-      ? function(x) { return (x - a) / b; }
-      : constants$1(isNaN(b) ? NaN : 0.5);
+  return element ? element.ownerDocument || document : document;
 }
+function isCursorOutsideInteractiveBorder(popperTreeData, event) {
+  var clientX = event.clientX,
+      clientY = event.clientY;
+  return popperTreeData.every(function (_ref) {
+    var popperRect = _ref.popperRect,
+        popperState = _ref.popperState,
+        props = _ref.props;
+    var interactiveBorder = props.interactiveBorder;
+    var basePlacement = getBasePlacement$1(popperState.placement);
+    var offsetData = popperState.modifiersData.offset;
 
-function clamper$1(a, b) {
-  var t;
-  if (a > b) t = a, a = b, b = t;
-  return function(x) { return Math.max(a, Math.min(b, x)); };
+    if (!offsetData) {
+      return true;
+    }
+
+    var topDistance = basePlacement === 'bottom' ? offsetData.top.y : 0;
+    var bottomDistance = basePlacement === 'top' ? offsetData.bottom.y : 0;
+    var leftDistance = basePlacement === 'right' ? offsetData.left.x : 0;
+    var rightDistance = basePlacement === 'left' ? offsetData.right.x : 0;
+    var exceedsTop = popperRect.top - clientY + topDistance > interactiveBorder;
+    var exceedsBottom = clientY - popperRect.bottom - bottomDistance > interactiveBorder;
+    var exceedsLeft = popperRect.left - clientX + leftDistance > interactiveBorder;
+    var exceedsRight = clientX - popperRect.right - rightDistance > interactiveBorder;
+    return exceedsTop || exceedsBottom || exceedsLeft || exceedsRight;
+  });
 }
+function updateTransitionEndListener(box, action, listener) {
+  var method = action + "EventListener"; // some browsers apparently support `transition` (unprefixed) but only fire
+  // `webkitTransitionEnd`...
 
-// normalize(a, b)(x) takes a domain value x in [a,b] and returns the corresponding parameter t in [0,1].
-// interpolate(a, b)(t) takes a parameter t in [0,1] and returns the corresponding range value x in [a,b].
-function bimap$1(domain, range, interpolate) {
-  var d0 = domain[0], d1 = domain[1], r0 = range[0], r1 = range[1];
-  if (d1 < d0) d0 = normalize$1(d1, d0), r0 = interpolate(r1, r0);
-  else d0 = normalize$1(d0, d1), r0 = interpolate(r0, r1);
-  return function(x) { return r0(d0(x)); };
+  ['transitionend', 'webkitTransitionEnd'].forEach(function (event) {
+    box[method](event, listener);
+  });
 }
 
-function polymap$1(domain, range, interpolate) {
-  var j = Math.min(domain.length, range.length) - 1,
-      d = new Array(j),
-      r = new Array(j),
-      i = -1;
+var currentInput = {
+  isTouch: false
+};
+var lastMouseMoveTime = 0;
+/**
+ * When a `touchstart` event is fired, it's assumed the user is using touch
+ * input. We'll bind a `mousemove` event listener to listen for mouse input in
+ * the future. This way, the `isTouch` property is fully dynamic and will handle
+ * hybrid devices that use a mix of touch + mouse input.
+ */
 
-  // Reverse descending domains.
-  if (domain[j] < domain[0]) {
-    domain = domain.slice().reverse();
-    range = range.slice().reverse();
+function onDocumentTouchStart() {
+  if (currentInput.isTouch) {
+    return;
   }
 
-  while (++i < j) {
-    d[i] = normalize$1(domain[i], domain[i + 1]);
-    r[i] = interpolate(range[i], range[i + 1]);
-  }
+  currentInput.isTouch = true;
 
-  return function(x) {
-    var i = bisectRight(domain, x, 1, j) - 1;
-    return r[i](d[i](x));
-  };
+  if (window.performance) {
+    document.addEventListener('mousemove', onDocumentMouseMove);
+  }
 }
+/**
+ * When two `mousemove` event are fired consecutively within 20ms, it's assumed
+ * the user is using mouse input again. `mousemove` can fire on touch devices as
+ * well, but very rarely that quickly.
+ */
 
-function copy$1(source, target) {
-  return target
-      .domain(source.domain())
-      .range(source.range())
-      .interpolate(source.interpolate())
-      .clamp(source.clamp())
-      .unknown(source.unknown());
+function onDocumentMouseMove() {
+  var now = performance.now();
+
+  if (now - lastMouseMoveTime < 20) {
+    currentInput.isTouch = false;
+    document.removeEventListener('mousemove', onDocumentMouseMove);
+  }
+
+  lastMouseMoveTime = now;
 }
+/**
+ * When an element is in focus and has a tippy, leaving the tab/window and
+ * returning causes it to show again. For mouse users this is unexpected, but
+ * for keyboard use it makes sense.
+ * TODO: find a better technique to solve this problem
+ */
 
-function transformer$1() {
-  var domain = unit$1,
-      range = unit$1,
-      interpolate = interpolate$1,
-      transform,
-      untransform,
-      unknown,
-      clamp = identity$2,
-      piecewise,
-      output,
-      input;
+function onWindowBlur() {
+  var activeElement = document.activeElement;
 
-  function rescale() {
-    var n = Math.min(domain.length, range.length);
-    if (clamp !== identity$2) clamp = clamper$1(domain[0], domain[n - 1]);
-    piecewise = n > 2 ? polymap$1 : bimap$1;
-    output = input = null;
-    return scale;
-  }
+  if (isReferenceElement(activeElement)) {
+    var instance = activeElement._tippy;
 
-  function scale(x) {
-    return x == null || isNaN(x = +x) ? unknown : (output || (output = piecewise(domain.map(transform), range, interpolate)))(transform(clamp(x)));
+    if (activeElement.blur && !instance.state.isVisible) {
+      activeElement.blur();
+    }
   }
+}
+function bindGlobalEventListeners() {
+  document.addEventListener('touchstart', onDocumentTouchStart, Object.assign({}, PASSIVE, {
+    capture: true
+  }));
+  window.addEventListener('blur', onWindowBlur);
+}
 
-  scale.invert = function(y) {
-    return clamp(untransform((input || (input = piecewise(range, domain.map(transform), interpolateNumber$1)))(y)));
-  };
-
-  scale.domain = function(_) {
-    return arguments.length ? (domain = Array.from(_, number$4), rescale()) : domain.slice();
-  };
+var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+var ua = isBrowser ? navigator.userAgent : '';
+var isIE = /MSIE |Trident\//.test(ua);
+var isIOS = isBrowser && /iPhone|iPad|iPod/.test(navigator.platform);
 
-  scale.range = function(_) {
-    return arguments.length ? (range = Array.from(_), rescale()) : range.slice();
-  };
+var pluginProps = {
+  animateFill: false,
+  followCursor: false,
+  inlinePositioning: false,
+  sticky: false
+};
+var renderProps = {
+  allowHTML: false,
+  animation: 'fade',
+  arrow: true,
+  content: '',
+  inertia: false,
+  maxWidth: 350,
+  role: 'tooltip',
+  theme: '',
+  zIndex: 9999
+};
+var defaultProps = Object.assign({
+  appendTo: function appendTo() {
+    return document.body;
+  },
+  aria: {
+    content: 'auto',
+    expanded: 'auto'
+  },
+  content: '',
+  delay: 0,
+  duration: [300, 250],
+  getReferenceClientRect: null,
+  hideOnClick: true,
+  ignoreAttributes: false,
+  interactive: false,
+  interactiveBorder: 2,
+  interactiveDebounce: 0,
+  moveTransition: '',
+  offset: [0, 10],
+  onAfterUpdate: function onAfterUpdate() {},
+  onBeforeUpdate: function onBeforeUpdate() {},
+  onCreate: function onCreate() {},
+  onDestroy: function onDestroy() {},
+  onHidden: function onHidden() {},
+  onHide: function onHide() {},
+  onMount: function onMount() {},
+  onShow: function onShow() {},
+  onShown: function onShown() {},
+  onTrigger: function onTrigger() {},
+  onUntrigger: function onUntrigger() {},
+  placement: 'top',
+  plugins: [],
+  popperOptions: {},
+  render: null,
+  showOnCreate: false,
+  touch: true,
+  trigger: 'mouseenter focus',
+  triggerTarget: null
+}, pluginProps, {}, renderProps);
+var defaultKeys = Object.keys(defaultProps);
+var setDefaultProps = function setDefaultProps(partialProps) {
+
+  var keys = Object.keys(partialProps);
+  keys.forEach(function (key) {
+    defaultProps[key] = partialProps[key];
+  });
+};
+function getExtendedPassedProps(passedProps) {
+  var plugins = passedProps.plugins || [];
+  var pluginProps = plugins.reduce(function (acc, plugin) {
+    var name = plugin.name,
+        defaultValue = plugin.defaultValue;
 
-  scale.rangeRound = function(_) {
-    return range = Array.from(_), interpolate = interpolateRound$1, rescale();
-  };
+    if (name) {
+      acc[name] = passedProps[name] !== undefined ? passedProps[name] : defaultValue;
+    }
 
-  scale.clamp = function(_) {
-    return arguments.length ? (clamp = _ ? true : identity$2, rescale()) : clamp !== identity$2;
-  };
+    return acc;
+  }, {});
+  return Object.assign({}, passedProps, {}, pluginProps);
+}
+function getDataAttributeProps(reference, plugins) {
+  var propKeys = plugins ? Object.keys(getExtendedPassedProps(Object.assign({}, defaultProps, {
+    plugins: plugins
+  }))) : defaultKeys;
+  var props = propKeys.reduce(function (acc, key) {
+    var valueAsString = (reference.getAttribute("data-tippy-" + key) || '').trim();
 
-  scale.interpolate = function(_) {
-    return arguments.length ? (interpolate = _, rescale()) : interpolate;
-  };
+    if (!valueAsString) {
+      return acc;
+    }
 
-  scale.unknown = function(_) {
-    return arguments.length ? (unknown = _, scale) : unknown;
-  };
+    if (key === 'content') {
+      acc[key] = valueAsString;
+    } else {
+      try {
+        acc[key] = JSON.parse(valueAsString);
+      } catch (e) {
+        acc[key] = valueAsString;
+      }
+    }
 
-  return function(t, u) {
-    transform = t, untransform = u;
-    return rescale();
+    return acc;
+  }, {});
+  return props;
+}
+function evaluateProps(reference, props) {
+  var out = Object.assign({}, props, {}, props.ignoreAttributes ? {} : getDataAttributeProps(reference, props.plugins));
+  out.aria = Object.assign({}, defaultProps.aria, {}, out.aria);
+  out.aria = {
+    expanded: out.aria.expanded === 'auto' ? props.interactive : out.aria.expanded,
+    content: out.aria.content === 'auto' ? props.interactive ? null : 'describedby' : out.aria.content
   };
+  return out;
 }
 
-function continuous$1() {
-  return transformer$1()(identity$2, identity$2);
+var innerHTML = function innerHTML() {
+  return 'innerHTML';
+};
+
+function dangerouslySetInnerHTML(element, html) {
+  element[innerHTML()] = html;
 }
 
-function formatDecimal(x) {
-  return Math.abs(x = Math.round(x)) >= 1e21
-      ? x.toLocaleString("en").replace(/,/g, "")
-      : x.toString(10);
+function createArrowElement(value) {
+  var arrow = div();
+
+  if (value === true) {
+    arrow.className = ARROW_CLASS;
+  } else {
+    arrow.className = SVG_ARROW_CLASS;
+
+    if (isElement$1(value)) {
+      arrow.appendChild(value);
+    } else {
+      dangerouslySetInnerHTML(arrow, value);
+    }
+  }
+
+  return arrow;
 }
 
-// Computes the decimal coefficient and exponent of the specified number x with
-// significant digits p, where x is positive and p is in [1, 21] or undefined.
-// For example, formatDecimalParts(1.23) returns ["123", 0].
-function formatDecimalParts(x, p) {
-  if ((i = (x = p ? x.toExponential(p - 1) : x.toExponential()).indexOf("e")) < 0) return null; // NaN, ±Infinity
-  var i, coefficient = x.slice(0, i);
+function setContent(content, _ref) {
+  var props = _ref.props,
+      reference = _ref.reference;
+  var computedContent = typeof props.content === 'function' ? props.content(reference) : props.content;
 
-  // The string returned by toExponential either has the form \d\.\d+e[-+]\d+
-  // (e.g., 1.2e+3) or the form \de[-+]\d+ (e.g., 1e+3).
-  return [
-    coefficient.length > 1 ? coefficient[0] + coefficient.slice(2) : coefficient,
-    +x.slice(i + 1)
-  ];
+  if (isElement$1(computedContent)) {
+    dangerouslySetInnerHTML(content, '');
+    content.appendChild(computedContent);
+  } else {
+    if (props.allowHTML) {
+      dangerouslySetInnerHTML(content, computedContent);
+    } else {
+      content.textContent = computedContent;
+    }
+  }
 }
+function getChildren(popper) {
+  var box = popper.firstElementChild;
+  var boxChildren = arrayFrom(box.children);
+  return {
+    box: box,
+    content: boxChildren.find(function (node) {
+      return node.classList.contains(CONTENT_CLASS);
+    }),
+    arrow: boxChildren.find(function (node) {
+      return node.classList.contains(ARROW_CLASS) || node.classList.contains(SVG_ARROW_CLASS);
+    }),
+    backdrop: boxChildren.find(function (node) {
+      return node.classList.contains(BACKDROP_CLASS);
+    })
+  };
+}
+function render(instance) {
+  var popper = div();
+  var box = div();
+  box.className = BOX_CLASS;
+  box.setAttribute('data-state', 'hidden');
+  box.setAttribute('tabindex', '-1');
+  var content = div();
+  content.className = CONTENT_CLASS;
+  content.setAttribute('data-state', 'hidden');
+  setContent(content, instance);
+  popper.appendChild(box);
+  box.appendChild(content);
+  onUpdate(instance.props, instance.props);
+
+  function onUpdate(prevProps, nextProps) {
+    var _getChildren = getChildren(popper),
+        box = _getChildren.box,
+        content = _getChildren.content,
+        arrow = _getChildren.arrow;
+
+    popper.style.zIndex = "" + nextProps.zIndex;
+
+    if (nextProps.theme) {
+      box.setAttribute('data-theme', nextProps.theme);
+    } else {
+      box.removeAttribute('data-theme');
+    }
+
+    if (typeof nextProps.animation === 'string') {
+      box.setAttribute('data-animation', nextProps.animation);
+    } else {
+      box.removeAttribute('data-animation');
+    }
+
+    if (nextProps.inertia) {
+      box.setAttribute('data-inertia', '');
+    } else {
+      box.removeAttribute('data-inertia');
+    }
+
+    box.style.maxWidth = typeof nextProps.maxWidth === 'number' ? nextProps.maxWidth + "px" : nextProps.maxWidth;
+
+    if (nextProps.role) {
+      box.setAttribute('role', nextProps.role);
+    } else {
+      box.removeAttribute('role');
+    }
+
+    if (prevProps.content !== nextProps.content) {
+      setContent(content, instance);
+    }
+
+    if (nextProps.arrow) {
+      if (!arrow) {
+        box.appendChild(createArrowElement(nextProps.arrow));
+      } else if (prevProps.arrow !== nextProps.arrow) {
+        box.removeChild(arrow);
+        box.appendChild(createArrowElement(nextProps.arrow));
+      }
+    } else if (arrow) {
+      box.removeChild(arrow);
+    }
+  }
 
-function exponent(x) {
-  return x = formatDecimalParts(Math.abs(x)), x ? x[1] : NaN;
-}
+  return {
+    popper: popper,
+    onUpdate: onUpdate
+  };
+} // Runtime check to identify if the render function is the default one; this
+// way we can apply default CSS transitions logic and it can be tree-shaken away
+
+render.$$tippy = true;
+function isDefaultRenderFn(render) {
+  return render.$$tippy;
+}
+
+var idCounter = 1;
+var mouseMoveListeners = []; // Used by `hideAll()`
+
+var mountedInstances = [];
+function createTippy(reference, passedProps) {
+  var props = evaluateProps(reference, Object.assign({}, defaultProps, {}, getExtendedPassedProps(passedProps))); // ===========================================================================
+  // 🔒 Private members
+  // ===========================================================================
+
+  var showTimeout;
+  var hideTimeout;
+  var scheduleHideAnimationFrame;
+  var isVisibleFromClick = false;
+  var didHideDueToDocumentMouseDown = false;
+  var ignoreOnFirstUpdate = false;
+  var lastTriggerEvent;
+  var currentTransitionEndListener;
+  var onFirstUpdate;
+  var listeners = [];
+  var debouncedOnMouseMove = debounce$1(onMouseMove, props.interactiveDebounce);
+  var currentTarget;
+  var doc = getOwnerDocument(props.triggerTarget || reference); // ===========================================================================
+  // 🔑 Public members
+  // ===========================================================================
+
+  var id = idCounter++;
+  var popperInstance = null;
+  var plugins = unique(props.plugins);
+  var state = {
+    // Is the instance currently enabled?
+    isEnabled: true,
+    // Is the tippy currently showing and not transitioning out?
+    isVisible: false,
+    // Has the instance been destroyed?
+    isDestroyed: false,
+    // Is the tippy currently mounted to the DOM?
+    isMounted: false,
+    // Has the tippy finished transitioning in?
+    isShown: false
+  };
+  var instance = {
+    // properties
+    id: id,
+    reference: reference,
+    popper: div(),
+    popperInstance: popperInstance,
+    props: props,
+    state: state,
+    plugins: plugins,
+    // methods
+    clearDelayTimeouts: clearDelayTimeouts,
+    setProps: setProps,
+    setContent: setContent,
+    show: show,
+    hide: hide,
+    enable: enable,
+    disable: disable,
+    unmount: unmount,
+    destroy: destroy
+  }; // TODO: Investigate why this early return causes a TDZ error in the tests —
+  // it doesn't seem to happen in the browser
+
+  /* istanbul ignore if */
+
+  if (!props.render) {
+
+    return instance;
+  } // ===========================================================================
+  // Initial mutations
+  // ===========================================================================
+
+
+  var _props$render = props.render(instance),
+      popper = _props$render.popper,
+      onUpdate = _props$render.onUpdate;
+
+  popper.setAttribute('data-tippy-root', '');
+  popper.id = "tippy-" + instance.id;
+  instance.popper = popper;
+  reference._tippy = instance;
+  popper._tippy = instance;
+  var pluginsHooks = plugins.map(function (plugin) {
+    return plugin.fn(instance);
+  });
+  var hasAriaExpanded = reference.hasAttribute('aria-expanded');
+  addListeners();
+  handleAriaExpandedAttribute();
+  invokeHook('onCreate', [instance]);
 
-function formatGroup(grouping, thousands) {
-  return function(value, width) {
-    var i = value.length,
-        t = [],
-        j = 0,
-        g = grouping[0],
-        length = 0;
+  if (props.showOnCreate) {
+    scheduleShow();
+  } // Prevent a tippy with a delay from hiding if the cursor left then returned
+  // before it started hiding
 
-    while (i > 0 && g > 0) {
-      if (length + g + 1 > width) g = Math.max(1, width - length);
-      t.push(value.substring(i -= g, i + g));
-      if ((length += g + 1) > width) break;
-      g = grouping[j = (j + 1) % grouping.length];
+
+  popper.addEventListener('mouseenter', function () {
+    if (instance.props.interactive && instance.state.isVisible) {
+      instance.clearDelayTimeouts();
+    }
+  });
+  popper.addEventListener('mouseleave', function (event) {
+    if (instance.props.interactive && instance.props.trigger.indexOf('mouseenter') >= 0) {
+      doc.addEventListener('mousemove', debouncedOnMouseMove);
+      debouncedOnMouseMove(event);
     }
+  });
+  return instance; // ===========================================================================
+  // 🔒 Private methods
+  // ===========================================================================
 
-    return t.reverse().join(thousands);
-  };
-}
+  function getNormalizedTouchSettings() {
+    var touch = instance.props.touch;
+    return Array.isArray(touch) ? touch : [touch, 0];
+  }
 
-function formatNumerals(numerals) {
-  return function(value) {
-    return value.replace(/[0-9]/g, function(i) {
-      return numerals[+i];
-    });
-  };
-}
+  function getIsCustomTouchBehavior() {
+    return getNormalizedTouchSettings()[0] === 'hold';
+  }
 
-// [[fill]align][sign][symbol][0][width][,][.precision][~][type]
-var re = /^(?:(.)?([<>=^]))?([+\-( ])?([$#])?(0)?(\d+)?(,)?(\.\d+)?(~)?([a-z%])?$/i;
+  function getCurrentTarget() {
+    return currentTarget || reference;
+  }
 
-function formatSpecifier(specifier) {
-  if (!(match = re.exec(specifier))) throw new Error("invalid format: " + specifier);
-  var match;
-  return new FormatSpecifier({
-    fill: match[1],
-    align: match[2],
-    sign: match[3],
-    symbol: match[4],
-    zero: match[5],
-    width: match[6],
-    comma: match[7],
-    precision: match[8] && match[8].slice(1),
-    trim: match[9],
-    type: match[10]
-  });
-}
+  function getDefaultTemplateChildren() {
+    return getChildren(popper);
+  }
 
-formatSpecifier.prototype = FormatSpecifier.prototype; // instanceof
+  function getDelay(isShow) {
+    // For touch or keyboard input, force `0` delay for UX reasons
+    // Also if the instance is mounted but not visible (transitioning out),
+    // ignore delay
+    if (instance.state.isMounted && !instance.state.isVisible || currentInput.isTouch || lastTriggerEvent && lastTriggerEvent.type === 'focus') {
+      return 0;
+    }
 
-function FormatSpecifier(specifier) {
-  this.fill = specifier.fill === undefined ? " " : specifier.fill + "";
-  this.align = specifier.align === undefined ? ">" : specifier.align + "";
-  this.sign = specifier.sign === undefined ? "-" : specifier.sign + "";
-  this.symbol = specifier.symbol === undefined ? "" : specifier.symbol + "";
-  this.zero = !!specifier.zero;
-  this.width = specifier.width === undefined ? undefined : +specifier.width;
-  this.comma = !!specifier.comma;
-  this.precision = specifier.precision === undefined ? undefined : +specifier.precision;
-  this.trim = !!specifier.trim;
-  this.type = specifier.type === undefined ? "" : specifier.type + "";
-}
+    return getValueAtIndexOrReturn(instance.props.delay, isShow ? 0 : 1, defaultProps.delay);
+  }
 
-FormatSpecifier.prototype.toString = function() {
-  return this.fill
-      + this.align
-      + this.sign
-      + this.symbol
-      + (this.zero ? "0" : "")
-      + (this.width === undefined ? "" : Math.max(1, this.width | 0))
-      + (this.comma ? "," : "")
-      + (this.precision === undefined ? "" : "." + Math.max(0, this.precision | 0))
-      + (this.trim ? "~" : "")
-      + this.type;
-};
+  function handleInteractiveStyles() {
+    popper.style.pointerEvents = instance.props.interactive && instance.state.isVisible ? '' : 'none';
+  }
 
-// Trims insignificant zeros, e.g., replaces 1.2000k with 1.2k.
-function formatTrim(s) {
-  out: for (var n = s.length, i = 1, i0 = -1, i1; i < n; ++i) {
-    switch (s[i]) {
-      case ".": i0 = i1 = i; break;
-      case "0": if (i0 === 0) i0 = i; i1 = i; break;
-      default: if (!+s[i]) break out; if (i0 > 0) i0 = 0; break;
+  function updateIOSClass(isAdd) {
+    var shouldAdd = isAdd && isIOS && currentInput.isTouch;
+    doc.body.classList[shouldAdd ? 'add' : 'remove'](IOS_CLASS);
+  }
+
+  function invokeHook(hook, args, shouldInvokePropsHook) {
+    if (shouldInvokePropsHook === void 0) {
+      shouldInvokePropsHook = true;
+    }
+
+    pluginsHooks.forEach(function (pluginHooks) {
+      if (pluginHooks[hook]) {
+        pluginHooks[hook].apply(void 0, args);
+      }
+    });
+
+    if (shouldInvokePropsHook) {
+      var _instance$props;
+
+      (_instance$props = instance.props)[hook].apply(_instance$props, args);
     }
   }
-  return i0 > 0 ? s.slice(0, i0) + s.slice(i1 + 1) : s;
-}
 
-var prefixExponent;
+  function handleAriaContentAttribute() {
+    var aria = instance.props.aria;
 
-function formatPrefixAuto(x, p) {
-  var d = formatDecimalParts(x, p);
-  if (!d) return x + "";
-  var coefficient = d[0],
-      exponent = d[1],
-      i = exponent - (prefixExponent = Math.max(-8, Math.min(8, Math.floor(exponent / 3))) * 3) + 1,
-      n = coefficient.length;
-  return i === n ? coefficient
-      : i > n ? coefficient + new Array(i - n + 1).join("0")
-      : i > 0 ? coefficient.slice(0, i) + "." + coefficient.slice(i)
-      : "0." + new Array(1 - i).join("0") + formatDecimalParts(x, Math.max(0, p + i - 1))[0]; // less than 1y!
-}
+    if (!aria.content) {
+      return;
+    }
 
-function formatRounded(x, p) {
-  var d = formatDecimalParts(x, p);
-  if (!d) return x + "";
-  var coefficient = d[0],
-      exponent = d[1];
-  return exponent < 0 ? "0." + new Array(-exponent).join("0") + coefficient
-      : coefficient.length > exponent + 1 ? coefficient.slice(0, exponent + 1) + "." + coefficient.slice(exponent + 1)
-      : coefficient + new Array(exponent - coefficient.length + 2).join("0");
-}
+    var attr = "aria-" + aria.content;
+    var id = popper.id;
+    var nodes = normalizeToArray(instance.props.triggerTarget || reference);
+    nodes.forEach(function (node) {
+      var currentValue = node.getAttribute(attr);
 
-var formatTypes = {
-  "%": (x, p) => (x * 100).toFixed(p),
-  "b": (x) => Math.round(x).toString(2),
-  "c": (x) => x + "",
-  "d": formatDecimal,
-  "e": (x, p) => x.toExponential(p),
-  "f": (x, p) => x.toFixed(p),
-  "g": (x, p) => x.toPrecision(p),
-  "o": (x) => Math.round(x).toString(8),
-  "p": (x, p) => formatRounded(x * 100, p),
-  "r": formatRounded,
-  "s": formatPrefixAuto,
-  "X": (x) => Math.round(x).toString(16).toUpperCase(),
-  "x": (x) => Math.round(x).toString(16)
-};
+      if (instance.state.isVisible) {
+        node.setAttribute(attr, currentValue ? currentValue + " " + id : id);
+      } else {
+        var nextValue = currentValue && currentValue.replace(id, '').trim();
 
-function identity$3(x) {
-  return x;
-}
+        if (nextValue) {
+          node.setAttribute(attr, nextValue);
+        } else {
+          node.removeAttribute(attr);
+        }
+      }
+    });
+  }
 
-var map = Array.prototype.map,
-    prefixes = ["y","z","a","f","p","n","µ","m","","k","M","G","T","P","E","Z","Y"];
+  function handleAriaExpandedAttribute() {
+    if (hasAriaExpanded || !instance.props.aria.expanded) {
+      return;
+    }
 
-function formatLocale(locale) {
-  var group = locale.grouping === undefined || locale.thousands === undefined ? identity$3 : formatGroup(map.call(locale.grouping, Number), locale.thousands + ""),
-      currencyPrefix = locale.currency === undefined ? "" : locale.currency[0] + "",
-      currencySuffix = locale.currency === undefined ? "" : locale.currency[1] + "",
-      decimal = locale.decimal === undefined ? "." : locale.decimal + "",
-      numerals = locale.numerals === undefined ? identity$3 : formatNumerals(map.call(locale.numerals, String)),
-      percent = locale.percent === undefined ? "%" : locale.percent + "",
-      minus = locale.minus === undefined ? "−" : locale.minus + "",
-      nan = locale.nan === undefined ? "NaN" : locale.nan + "";
+    var nodes = normalizeToArray(instance.props.triggerTarget || reference);
+    nodes.forEach(function (node) {
+      if (instance.props.interactive) {
+        node.setAttribute('aria-expanded', instance.state.isVisible && node === getCurrentTarget() ? 'true' : 'false');
+      } else {
+        node.removeAttribute('aria-expanded');
+      }
+    });
+  }
 
-  function newFormat(specifier) {
-    specifier = formatSpecifier(specifier);
+  function cleanupInteractiveMouseListeners() {
+    doc.body.removeEventListener('mouseleave', scheduleHide);
+    doc.removeEventListener('mousemove', debouncedOnMouseMove);
+    mouseMoveListeners = mouseMoveListeners.filter(function (listener) {
+      return listener !== debouncedOnMouseMove;
+    });
+  }
 
-    var fill = specifier.fill,
-        align = specifier.align,
-        sign = specifier.sign,
-        symbol = specifier.symbol,
-        zero = specifier.zero,
-        width = specifier.width,
-        comma = specifier.comma,
-        precision = specifier.precision,
-        trim = specifier.trim,
-        type = specifier.type;
+  function onDocumentMouseDown(event) {
+    // Clicked on interactive popper
+    if (instance.props.interactive && popper.contains(event.target)) {
+      return;
+    } // Clicked on the event listeners target
 
-    // The "n" type is an alias for ",g".
-    if (type === "n") comma = true, type = "g";
 
-    // The "" type, and any invalid type, is an alias for ".12~g".
-    else if (!formatTypes[type]) precision === undefined && (precision = 12), trim = true, type = "g";
+    if (getCurrentTarget().contains(event.target)) {
+      if (currentInput.isTouch) {
+        return;
+      }
 
-    // If zero fill is specified, padding goes after sign and before digits.
-    if (zero || (fill === "0" && align === "=")) zero = true, fill = "0", align = "=";
+      if (instance.state.isVisible && instance.props.trigger.indexOf('click') >= 0) {
+        return;
+      }
+    }
 
-    // Compute the prefix and suffix.
-    // For SI-prefix, the suffix is lazily computed.
-    var prefix = symbol === "$" ? currencyPrefix : symbol === "#" && /[boxX]/.test(type) ? "0" + type.toLowerCase() : "",
-        suffix = symbol === "$" ? currencySuffix : /[%p]/.test(type) ? percent : "";
+    if (instance.props.hideOnClick === true) {
+      isVisibleFromClick = false;
+      instance.clearDelayTimeouts();
+      instance.hide(); // `mousedown` event is fired right before `focus` if pressing the
+      // currentTarget. This lets a tippy with `focus` trigger know that it
+      // should not show
 
-    // What format function should we use?
-    // Is this an integer type?
-    // Can this type generate exponential notation?
-    var formatType = formatTypes[type],
-        maybeSuffix = /[defgprs%]/.test(type);
+      didHideDueToDocumentMouseDown = true;
+      setTimeout(function () {
+        didHideDueToDocumentMouseDown = false;
+      }); // The listener gets added in `scheduleShow()`, but this may be hiding it
+      // before it shows, and hide()'s early bail-out behavior can prevent it
+      // from being cleaned up
 
-    // Set the default precision if not specified,
-    // or clamp the specified precision to the supported range.
-    // For significant precision, it must be in [1, 21].
-    // For fixed precision, it must be in [0, 20].
-    precision = precision === undefined ? 6
-        : /[gprs]/.test(type) ? Math.max(1, Math.min(21, precision))
-        : Math.max(0, Math.min(20, precision));
+      if (!instance.state.isMounted) {
+        removeDocumentMouseDownListener();
+      }
+    }
+  }
 
-    function format(value) {
-      var valuePrefix = prefix,
-          valueSuffix = suffix,
-          i, n, c;
+  function addDocumentMouseDownListener() {
+    doc.addEventListener('mousedown', onDocumentMouseDown, true);
+  }
 
-      if (type === "c") {
-        valueSuffix = formatType(value) + valueSuffix;
-        value = "";
-      } else {
-        value = +value;
+  function removeDocumentMouseDownListener() {
+    doc.removeEventListener('mousedown', onDocumentMouseDown, true);
+  }
 
-        // Determine the sign. -0 is not less than 0, but 1 / -0 is!
-        var valueNegative = value < 0 || 1 / value < 0;
+  function onTransitionedOut(duration, callback) {
+    onTransitionEnd(duration, function () {
+      if (!instance.state.isVisible && popper.parentNode && popper.parentNode.contains(popper)) {
+        callback();
+      }
+    });
+  }
 
-        // Perform the initial formatting.
-        value = isNaN(value) ? nan : formatType(Math.abs(value), precision);
+  function onTransitionedIn(duration, callback) {
+    onTransitionEnd(duration, callback);
+  }
 
-        // Trim insignificant zeros.
-        if (trim) value = formatTrim(value);
+  function onTransitionEnd(duration, callback) {
+    var box = getDefaultTemplateChildren().box;
 
-        // If a negative value rounds to zero after formatting, and no explicit positive sign is requested, hide the sign.
-        if (valueNegative && +value === 0 && sign !== "+") valueNegative = false;
+    function listener(event) {
+      if (event.target === box) {
+        updateTransitionEndListener(box, 'remove', listener);
+        callback();
+      }
+    } // Make callback synchronous if duration is 0
+    // `transitionend` won't fire otherwise
 
-        // Compute the prefix and suffix.
-        valuePrefix = (valueNegative ? (sign === "(" ? sign : minus) : sign === "-" || sign === "(" ? "" : sign) + valuePrefix;
-        valueSuffix = (type === "s" ? prefixes[8 + prefixExponent / 3] : "") + valueSuffix + (valueNegative && sign === "(" ? ")" : "");
 
-        // Break the formatted value into the integer “value” part that can be
-        // grouped, and fractional or exponential “suffix” part that is not.
-        if (maybeSuffix) {
-          i = -1, n = value.length;
-          while (++i < n) {
-            if (c = value.charCodeAt(i), 48 > c || c > 57) {
-              valueSuffix = (c === 46 ? decimal + value.slice(i + 1) : value.slice(i)) + valueSuffix;
-              value = value.slice(0, i);
-              break;
-            }
-          }
-        }
+    if (duration === 0) {
+      return callback();
+    }
+
+    updateTransitionEndListener(box, 'remove', currentTransitionEndListener);
+    updateTransitionEndListener(box, 'add', listener);
+    currentTransitionEndListener = listener;
+  }
+
+  function on(eventType, handler, options) {
+    if (options === void 0) {
+      options = false;
+    }
+
+    var nodes = normalizeToArray(instance.props.triggerTarget || reference);
+    nodes.forEach(function (node) {
+      node.addEventListener(eventType, handler, options);
+      listeners.push({
+        node: node,
+        eventType: eventType,
+        handler: handler,
+        options: options
+      });
+    });
+  }
+
+  function addListeners() {
+    if (getIsCustomTouchBehavior()) {
+      on('touchstart', onTrigger, PASSIVE);
+      on('touchend', onMouseLeave, PASSIVE);
+    }
+
+    splitBySpaces(instance.props.trigger).forEach(function (eventType) {
+      if (eventType === 'manual') {
+        return;
       }
 
-      // If the fill character is not "0", grouping is applied before padding.
-      if (comma && !zero) value = group(value, Infinity);
+      on(eventType, onTrigger);
 
-      // Compute the padding.
-      var length = valuePrefix.length + value.length + valueSuffix.length,
-          padding = length < width ? new Array(width - length + 1).join(fill) : "";
+      switch (eventType) {
+        case 'mouseenter':
+          on('mouseleave', onMouseLeave);
+          break;
 
-      // If the fill character is "0", grouping is applied after padding.
-      if (comma && zero) value = group(padding + value, padding.length ? width - valueSuffix.length : Infinity), padding = "";
+        case 'focus':
+          on(isIE ? 'focusout' : 'blur', onBlurOrFocusOut);
+          break;
 
-      // Reconstruct the final output based on the desired alignment.
-      switch (align) {
-        case "<": value = valuePrefix + value + valueSuffix + padding; break;
-        case "=": value = valuePrefix + padding + value + valueSuffix; break;
-        case "^": value = padding.slice(0, length = padding.length >> 1) + valuePrefix + value + valueSuffix + padding.slice(length); break;
-        default: value = padding + valuePrefix + value + valueSuffix; break;
+        case 'focusin':
+          on('focusout', onBlurOrFocusOut);
+          break;
       }
+    });
+  }
 
-      return numerals(value);
+  function removeListeners() {
+    listeners.forEach(function (_ref) {
+      var node = _ref.node,
+          eventType = _ref.eventType,
+          handler = _ref.handler,
+          options = _ref.options;
+      node.removeEventListener(eventType, handler, options);
+    });
+    listeners = [];
+  }
+
+  function onTrigger(event) {
+    var shouldScheduleClickHide = false;
+
+    if (!instance.state.isEnabled || isEventListenerStopped(event) || didHideDueToDocumentMouseDown) {
+      return;
     }
 
-    format.toString = function() {
-      return specifier + "";
-    };
+    lastTriggerEvent = event;
+    currentTarget = event.currentTarget;
+    handleAriaExpandedAttribute();
 
-    return format;
-  }
+    if (!instance.state.isVisible && isMouseEvent(event)) {
+      // If scrolling, `mouseenter` events can be fired if the cursor lands
+      // over a new target, but `mousemove` events don't get fired. This
+      // causes interactive tooltips to get stuck open until the cursor is
+      // moved
+      mouseMoveListeners.forEach(function (listener) {
+        return listener(event);
+      });
+    } // Toggle show/hide when clicking click-triggered tooltips
 
-  function formatPrefix(specifier, value) {
-    var f = newFormat((specifier = formatSpecifier(specifier), specifier.type = "f", specifier)),
-        e = Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3,
-        k = Math.pow(10, -e),
-        prefix = prefixes[8 + e / 3];
-    return function(value) {
-      return f(k * value) + prefix;
-    };
+
+    if (event.type === 'click' && (instance.props.trigger.indexOf('mouseenter') < 0 || isVisibleFromClick) && instance.props.hideOnClick !== false && instance.state.isVisible) {
+      shouldScheduleClickHide = true;
+    } else {
+      var _getNormalizedTouchSe = getNormalizedTouchSettings(),
+          value = _getNormalizedTouchSe[0],
+          duration = _getNormalizedTouchSe[1];
+
+      if (currentInput.isTouch && value === 'hold' && duration) {
+        // We can hijack the show timeout here, it will be cleared by
+        // `scheduleHide()` when necessary
+        showTimeout = setTimeout(function () {
+          scheduleShow(event);
+        }, duration);
+      } else {
+        scheduleShow(event);
+      }
+    }
+
+    if (event.type === 'click') {
+      isVisibleFromClick = !shouldScheduleClickHide;
+    }
+
+    if (shouldScheduleClickHide) {
+      scheduleHide(event);
+    }
   }
 
-  return {
-    format: newFormat,
-    formatPrefix: formatPrefix
-  };
-}
+  function onMouseMove(event) {
+    var target = event.target;
+    var isCursorOverReferenceOrPopper = reference.contains(target) || popper.contains(target);
 
-var locale;
-var format;
-var formatPrefix;
+    if (event.type === 'mousemove' && isCursorOverReferenceOrPopper) {
+      return;
+    }
 
-defaultLocale({
-  thousands: ",",
-  grouping: [3],
-  currency: ["$", ""]
-});
+    var popperTreeData = getNestedPopperTree().concat(popper).map(function (popper) {
+      var _instance$popperInsta;
 
-function defaultLocale(definition) {
-  locale = formatLocale(definition);
-  format = locale.format;
-  formatPrefix = locale.formatPrefix;
-  return locale;
-}
+      var instance = popper._tippy;
+      var state = (_instance$popperInsta = instance.popperInstance) == null ? void 0 : _instance$popperInsta.state;
 
-function precisionFixed$1(step) {
-  return Math.max(0, -exponent(Math.abs(step)));
-}
+      if (state) {
+        return {
+          popperRect: popper.getBoundingClientRect(),
+          popperState: state,
+          props: props
+        };
+      }
 
-function precisionPrefix$1(step, value) {
-  return Math.max(0, Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3 - exponent(Math.abs(step)));
-}
+      return null;
+    }).filter(Boolean);
 
-function precisionRound(step, max) {
-  step = Math.abs(step), max = Math.abs(max) - step;
-  return Math.max(0, exponent(max) - exponent(step)) + 1;
-}
+    if (isCursorOutsideInteractiveBorder(popperTreeData, event)) {
+      cleanupInteractiveMouseListeners();
+      scheduleHide(event);
+    }
+  }
 
-function tickFormat$1(start, stop, count, specifier) {
-  var step = tickStep(start, stop, count),
-      precision;
-  specifier = formatSpecifier(specifier == null ? ",f" : specifier);
-  switch (specifier.type) {
-    case "s": {
-      var value = Math.max(Math.abs(start), Math.abs(stop));
-      if (specifier.precision == null && !isNaN(precision = precisionPrefix$1(step, value))) specifier.precision = precision;
-      return formatPrefix(specifier, value);
+  function onMouseLeave(event) {
+    var shouldBail = isEventListenerStopped(event) || instance.props.trigger.indexOf('click') >= 0 && isVisibleFromClick;
+
+    if (shouldBail) {
+      return;
     }
-    case "":
-    case "e":
-    case "g":
-    case "p":
-    case "r": {
-      if (specifier.precision == null && !isNaN(precision = precisionRound(step, Math.max(Math.abs(start), Math.abs(stop))))) specifier.precision = precision - (specifier.type === "e");
-      break;
+
+    if (instance.props.interactive) {
+      doc.body.addEventListener('mouseleave', scheduleHide);
+      doc.addEventListener('mousemove', debouncedOnMouseMove);
+      pushIfUnique(mouseMoveListeners, debouncedOnMouseMove);
+      debouncedOnMouseMove(event);
+      return;
     }
-    case "f":
-    case "%": {
-      if (specifier.precision == null && !isNaN(precision = precisionFixed$1(step))) specifier.precision = precision - (specifier.type === "%") * 2;
-      break;
+
+    scheduleHide(event);
+  }
+
+  function onBlurOrFocusOut(event) {
+    if (instance.props.trigger.indexOf('focusin') < 0 && event.target !== getCurrentTarget()) {
+      return;
+    } // If focus was moved to within the popper
+
+
+    if (instance.props.interactive && event.relatedTarget && popper.contains(event.relatedTarget)) {
+      return;
     }
+
+    scheduleHide(event);
+  }
+
+  function isEventListenerStopped(event) {
+    return currentInput.isTouch ? getIsCustomTouchBehavior() !== event.type.indexOf('touch') >= 0 : false;
+  }
+
+  function createPopperInstance() {
+    destroyPopperInstance();
+    var _instance$props2 = instance.props,
+        popperOptions = _instance$props2.popperOptions,
+        placement = _instance$props2.placement,
+        offset = _instance$props2.offset,
+        getReferenceClientRect = _instance$props2.getReferenceClientRect,
+        moveTransition = _instance$props2.moveTransition;
+    var arrow = isDefaultRenderFn(instance.props.render) ? getChildren(popper).arrow : null;
+    var computedReference = getReferenceClientRect ? {
+      getBoundingClientRect: getReferenceClientRect
+    } : reference;
+    var tippyModifier = {
+      name: '$$tippy',
+      enabled: true,
+      phase: 'beforeWrite',
+      requires: ['computeStyles'],
+      fn: function fn(_ref2) {
+        var state = _ref2.state;
+
+        if (isDefaultRenderFn(instance.props.render)) {
+          var _getDefaultTemplateCh = getDefaultTemplateChildren(),
+              box = _getDefaultTemplateCh.box;
+
+          ['placement', 'reference-hidden', 'escaped'].forEach(function (attr) {
+            if (attr === 'placement') {
+              box.setAttribute('data-placement', state.placement);
+            } else {
+              if (state.attributes.popper["data-popper-" + attr]) {
+                box.setAttribute("data-" + attr, '');
+              } else {
+                box.removeAttribute("data-" + attr);
+              }
+            }
+          });
+          state.attributes.popper = {};
+        }
+      }
+    };
+    var arrowModifier = {
+      name: 'arrow',
+      enabled: !!arrow,
+      options: {
+        element: arrow,
+        padding: 3
+      }
+    };
+    var modifiers = [{
+      name: 'offset',
+      options: {
+        offset: offset
+      }
+    }, {
+      name: 'preventOverflow',
+      options: {
+        padding: {
+          top: 2,
+          bottom: 2,
+          left: 5,
+          right: 5
+        }
+      }
+    }, {
+      name: 'flip',
+      options: {
+        padding: 5
+      }
+    }, {
+      name: 'computeStyles',
+      options: {
+        adaptive: !moveTransition
+      }
+    }].concat(isDefaultRenderFn(instance.props.render) ? [arrowModifier] : [], (popperOptions == null ? void 0 : popperOptions.modifiers) || [], [tippyModifier]);
+    instance.popperInstance = createPopper(computedReference, popper, Object.assign({}, popperOptions, {
+      placement: placement,
+      onFirstUpdate: onFirstUpdate,
+      modifiers: modifiers
+    }));
   }
-  return format(specifier);
-}
 
-function linearish$1(scale) {
-  var domain = scale.domain;
+  function destroyPopperInstance() {
+    if (instance.popperInstance) {
+      instance.popperInstance.destroy();
+      instance.popperInstance = null;
+    }
+  }
 
-  scale.ticks = function(count) {
-    var d = domain();
-    return ticks(d[0], d[d.length - 1], count == null ? 10 : count);
-  };
+  function mount() {
+    var appendTo = instance.props.appendTo;
+    var parentNode; // By default, we'll append the popper to the triggerTargets's parentNode so
+    // it's directly after the reference element so the elements inside the
+    // tippy can be tabbed to
+    // If there are clipping issues, the user can specify a different appendTo
+    // and ensure focus management is handled correctly manually
 
-  scale.tickFormat = function(count, specifier) {
-    var d = domain();
-    return tickFormat$1(d[0], d[d.length - 1], count == null ? 10 : count, specifier);
-  };
+    var node = getCurrentTarget();
 
-  scale.nice = function(count) {
-    if (count == null) count = 10;
+    if (instance.props.interactive && appendTo === defaultProps.appendTo || appendTo === 'parent') {
+      parentNode = node.parentNode;
+    } else {
+      parentNode = invokeWithArgsOrReturn(appendTo, [node]);
+    } // The popper element needs to exist on the DOM before its position can be
+    // updated as Popper needs to read its dimensions
 
-    var d = domain();
-    var i0 = 0;
-    var i1 = d.length - 1;
-    var start = d[i0];
-    var stop = d[i1];
-    var prestep;
-    var step;
-    var maxIter = 10;
 
-    if (stop < start) {
-      step = start, start = stop, stop = step;
-      step = i0, i0 = i1, i1 = step;
-    }
-    
-    while (maxIter-- > 0) {
-      step = tickIncrement(start, stop, count);
-      if (step === prestep) {
-        d[i0] = start;
-        d[i1] = stop;
-        return domain(d);
-      } else if (step > 0) {
-        start = Math.floor(start / step) * step;
-        stop = Math.ceil(stop / step) * step;
-      } else if (step < 0) {
-        start = Math.ceil(start * step) / step;
-        stop = Math.floor(stop * step) / step;
-      } else {
-        break;
-      }
-      prestep = step;
+    if (!parentNode.contains(popper)) {
+      parentNode.appendChild(popper);
     }
 
-    return scale;
-  };
+    createPopperInstance();
+  }
 
-  return scale;
-}
+  function getNestedPopperTree() {
+    return arrayFrom(popper.querySelectorAll('[data-tippy-root]'));
+  }
 
-function linear$2() {
-  var scale = continuous$1();
+  function scheduleShow(event) {
+    instance.clearDelayTimeouts();
 
-  scale.copy = function() {
-    return copy$1(scale, linear$2());
-  };
+    if (event) {
+      invokeHook('onTrigger', [instance, event]);
+    }
 
-  initRange$1.apply(scale, arguments);
+    addDocumentMouseDownListener();
+    var delay = getDelay(true);
 
-  return linearish$1(scale);
-}
+    if (delay) {
+      showTimeout = setTimeout(function () {
+        instance.show();
+      }, delay);
+    } else {
+      instance.show();
+    }
+  }
 
-function identity$4(x) {
-  return x;
-}
+  function scheduleHide(event) {
+    instance.clearDelayTimeouts();
+    invokeHook('onUntrigger', [instance, event]);
 
-var top$1 = 1,
-    right$1 = 2,
-    bottom$1 = 3,
-    left$1 = 4,
-    epsilon$1 = 1e-6;
+    if (!instance.state.isVisible) {
+      removeDocumentMouseDownListener();
+      return;
+    } // For interactive tippies, scheduleHide is added to a document.body handler
+    // from onMouseLeave so must intercept scheduled hides from mousemove/leave
+    // events when trigger contains mouseenter and click, and the tip is
+    // currently shown as a result of a click.
 
-function translateX$1(x) {
-  return "translate(" + x + ",0)";
-}
 
-function translateY$1(y) {
-  return "translate(0," + y + ")";
-}
+    if (instance.props.trigger.indexOf('mouseenter') >= 0 && instance.props.trigger.indexOf('click') >= 0 && ['mouseleave', 'mousemove'].indexOf(event.type) >= 0 && isVisibleFromClick) {
+      return;
+    }
 
-function number$5(scale) {
-  return d => +scale(d);
-}
+    var delay = getDelay(false);
 
-function center$1(scale, offset) {
-  offset = Math.max(0, scale.bandwidth() - offset * 2) / 2;
-  if (scale.round()) offset = Math.round(offset);
-  return d => +scale(d) + offset;
-}
+    if (delay) {
+      hideTimeout = setTimeout(function () {
+        if (instance.state.isVisible) {
+          instance.hide();
+        }
+      }, delay);
+    } else {
+      // Fixes a `transitionend` problem when it fires 1 frame too
+      // late sometimes, we don't want hide() to be called.
+      scheduleHideAnimationFrame = requestAnimationFrame(function () {
+        instance.hide();
+      });
+    }
+  } // ===========================================================================
+  // 🔑 Public methods
+  // ===========================================================================
 
-function entering$1() {
-  return !this.__axis;
-}
 
-function axis$1(orient, scale) {
-  var tickArguments = [],
-      tickValues = null,
-      tickFormat = null,
-      tickSizeInner = 6,
-      tickSizeOuter = 6,
-      tickPadding = 3,
-      offset = typeof window !== "undefined" && window.devicePixelRatio > 1 ? 0 : 0.5,
-      k = orient === top$1 || orient === left$1 ? -1 : 1,
-      x = orient === left$1 || orient === right$1 ? "x" : "y",
-      transform = orient === top$1 || orient === bottom$1 ? translateX$1 : translateY$1;
+  function enable() {
+    instance.state.isEnabled = true;
+  }
 
-  function axis(context) {
-    var values = tickValues == null ? (scale.ticks ? scale.ticks.apply(scale, tickArguments) : scale.domain()) : tickValues,
-        format = tickFormat == null ? (scale.tickFormat ? scale.tickFormat.apply(scale, tickArguments) : identity$4) : tickFormat,
-        spacing = Math.max(tickSizeInner, 0) + tickPadding,
-        range = scale.range(),
-        range0 = +range[0] + offset,
-        range1 = +range[range.length - 1] + offset,
-        position = (scale.bandwidth ? center$1 : number$5)(scale.copy(), offset),
-        selection = context.selection ? context.selection() : context,
-        path = selection.selectAll(".domain").data([null]),
-        tick = selection.selectAll(".tick").data(values, scale).order(),
-        tickExit = tick.exit(),
-        tickEnter = tick.enter().append("g").attr("class", "tick"),
-        line = tick.select("line"),
-        text = tick.select("text");
+  function disable() {
+    // Disabling the instance should also hide it
+    // https://github.com/atomiks/tippy.js-react/issues/106
+    instance.hide();
+    instance.state.isEnabled = false;
+  }
+
+  function clearDelayTimeouts() {
+    clearTimeout(showTimeout);
+    clearTimeout(hideTimeout);
+    cancelAnimationFrame(scheduleHideAnimationFrame);
+  }
+
+  function setProps(partialProps) {
+
+    if (instance.state.isDestroyed) {
+      return;
+    }
 
-    path = path.merge(path.enter().insert("path", ".tick")
-        .attr("class", "domain")
-        .attr("stroke", "currentColor"));
+    invokeHook('onBeforeUpdate', [instance, partialProps]);
+    removeListeners();
+    var prevProps = instance.props;
+    var nextProps = evaluateProps(reference, Object.assign({}, instance.props, {}, partialProps, {
+      ignoreAttributes: true
+    }));
+    instance.props = nextProps;
+    addListeners();
 
-    tick = tick.merge(tickEnter);
+    if (prevProps.interactiveDebounce !== nextProps.interactiveDebounce) {
+      cleanupInteractiveMouseListeners();
+      debouncedOnMouseMove = debounce$1(onMouseMove, nextProps.interactiveDebounce);
+    } // Ensure stale aria-expanded attributes are removed
 
-    line = line.merge(tickEnter.append("line")
-        .attr("stroke", "currentColor")
-        .attr(x + "2", k * tickSizeInner));
 
-    text = text.merge(tickEnter.append("text")
-        .attr("fill", "currentColor")
-        .attr(x, k * spacing)
-        .attr("dy", orient === top$1 ? "0em" : orient === bottom$1 ? "0.71em" : "0.32em"));
+    if (prevProps.triggerTarget && !nextProps.triggerTarget) {
+      normalizeToArray(prevProps.triggerTarget).forEach(function (node) {
+        node.removeAttribute('aria-expanded');
+      });
+    } else if (nextProps.triggerTarget) {
+      reference.removeAttribute('aria-expanded');
+    }
 
-    if (context !== selection) {
-      path = path.transition(context);
-      tick = tick.transition(context);
-      line = line.transition(context);
-      text = text.transition(context);
+    handleAriaExpandedAttribute();
+    handleInteractiveStyles();
 
-      tickExit = tickExit.transition(context)
-          .attr("opacity", epsilon$1)
-          .attr("transform", function(d) { return isFinite(d = position(d)) ? transform(d + offset) : this.getAttribute("transform"); });
+    if (onUpdate) {
+      onUpdate(prevProps, nextProps);
+    }
 
-      tickEnter
-          .attr("opacity", epsilon$1)
-          .attr("transform", function(d) { var p = this.parentNode.__axis; return transform((p && isFinite(p = p(d)) ? p : position(d)) + offset); });
+    if (instance.popperInstance) {
+      createPopperInstance();
     }
 
-    tickExit.remove();
+    invokeHook('onAfterUpdate', [instance, partialProps]);
+  }
 
-    path
-        .attr("d", orient === left$1 || orient === right$1
-            ? (tickSizeOuter ? "M" + k * tickSizeOuter + "," + range0 + "H" + offset + "V" + range1 + "H" + k * tickSizeOuter : "M" + offset + "," + range0 + "V" + range1)
-            : (tickSizeOuter ? "M" + range0 + "," + k * tickSizeOuter + "V" + offset + "H" + range1 + "V" + k * tickSizeOuter : "M" + range0 + "," + offset + "H" + range1));
+  function setContent(content) {
+    instance.setProps({
+      content: content
+    });
+  }
 
-    tick
-        .attr("opacity", 1)
-        .attr("transform", function(d) { return transform(position(d) + offset); });
+  function show() {
 
-    line
-        .attr(x + "2", k * tickSizeInner);
 
-    text
-        .attr(x, k * spacing)
-        .text(format);
+    var isAlreadyVisible = instance.state.isVisible;
+    var isDestroyed = instance.state.isDestroyed;
+    var isDisabled = !instance.state.isEnabled;
+    var isTouchAndTouchDisabled = currentInput.isTouch && !instance.props.touch;
+    var duration = getValueAtIndexOrReturn(instance.props.duration, 0, defaultProps.duration);
 
-    selection.filter(entering$1)
-        .attr("fill", "none")
-        .attr("font-size", 10)
-        .attr("font-family", "sans-serif")
-        .attr("text-anchor", orient === right$1 ? "start" : orient === left$1 ? "end" : "middle");
+    if (isAlreadyVisible || isDestroyed || isDisabled || isTouchAndTouchDisabled) {
+      return;
+    } // Normalize `disabled` behavior across browsers.
+    // Firefox allows events on disabled elements, but Chrome doesn't.
+    // Using a wrapper element (i.e. <span>) is recommended.
 
-    selection
-        .each(function() { this.__axis = position; });
-  }
 
-  axis.scale = function(_) {
-    return arguments.length ? (scale = _, axis) : scale;
-  };
+    if (getCurrentTarget().hasAttribute('disabled')) {
+      return;
+    }
 
-  axis.ticks = function() {
-    return tickArguments = Array.from(arguments), axis;
-  };
+    invokeHook('onShow', [instance], false);
 
-  axis.tickArguments = function(_) {
-    return arguments.length ? (tickArguments = _ == null ? [] : Array.from(_), axis) : tickArguments.slice();
-  };
+    if (instance.props.onShow(instance) === false) {
+      return;
+    }
 
-  axis.tickValues = function(_) {
-    return arguments.length ? (tickValues = _ == null ? null : Array.from(_), axis) : tickValues && tickValues.slice();
-  };
+    instance.state.isVisible = true;
+    popper.style.visibility = 'visible';
+    handleInteractiveStyles();
+    addDocumentMouseDownListener();
 
-  axis.tickFormat = function(_) {
-    return arguments.length ? (tickFormat = _, axis) : tickFormat;
-  };
+    if (!instance.state.isMounted) {
+      popper.style.transition = 'none';
+    }
 
-  axis.tickSize = function(_) {
-    return arguments.length ? (tickSizeInner = tickSizeOuter = +_, axis) : tickSizeInner;
-  };
+    onFirstUpdate = function onFirstUpdate() {
+      if (!instance.state.isVisible || ignoreOnFirstUpdate) {
+        return;
+      }
 
-  axis.tickSizeInner = function(_) {
-    return arguments.length ? (tickSizeInner = +_, axis) : tickSizeInner;
-  };
+      ignoreOnFirstUpdate = true; // reflow
 
-  axis.tickSizeOuter = function(_) {
-    return arguments.length ? (tickSizeOuter = +_, axis) : tickSizeOuter;
-  };
+      void popper.offsetHeight;
+      popper.style.transition = instance.props.moveTransition;
 
-  axis.tickPadding = function(_) {
-    return arguments.length ? (tickPadding = +_, axis) : tickPadding;
-  };
+      if (isDefaultRenderFn(instance.props.render)) {
+        var _getDefaultTemplateCh2 = getDefaultTemplateChildren(),
+            box = _getDefaultTemplateCh2.box,
+            content = _getDefaultTemplateCh2.content;
 
-  axis.offset = function(_) {
-    return arguments.length ? (offset = +_, axis) : offset;
-  };
+        if (instance.props.animation) {
+          setTransitionDuration([box, content], duration);
+          setVisibilityState([box, content], 'visible');
+        }
+      }
 
-  return axis;
-}
+      handleAriaContentAttribute();
+      handleAriaExpandedAttribute();
+      pushIfUnique(mountedInstances, instance);
+      updateIOSClass(true);
+      instance.state.isMounted = true;
+      invokeHook('onMount', [instance]);
+
+      if (instance.props.animation && isDefaultRenderFn(instance.props.render)) {
+        onTransitionedIn(duration, function () {
+          instance.state.isShown = true;
+          invokeHook('onShown', [instance]);
+        });
+      }
+    };
 
-function axisTop$1(scale) {
-  return axis$1(top$1, scale);
-}
+    mount();
+  }
 
-function axisRight$1(scale) {
-  return axis$1(right$1, scale);
-}
+  function hide() {
 
-function axisBottom$1(scale) {
-  return axis$1(bottom$1, scale);
-}
 
-function axisLeft$1(scale) {
-  return axis$1(left$1, scale);
-}
+    var isAlreadyHidden = !instance.state.isVisible;
+    var isDestroyed = instance.state.isDestroyed;
+    var isDisabled = !instance.state.isEnabled;
+    var duration = getValueAtIndexOrReturn(instance.props.duration, 1, defaultProps.duration);
 
-const DEFAULT_ROW_MAX_LABEL_LENGTH_ALLOWED = 15;
-const DEFAULT_COLUMN_MAX_LABEL_LENGTH_ALLOWED = 30;
-const DEFAULT_ROW_LABEL_SLINT_ANGLE = 0;
-const DEFAULT_COLUMN_LABEL_SLINT_ANGLE = 0;
-const DEFAULT_ROW_LABEL_FONT_SIZE = "7px";
-const DEFAULT_COLUMN_LABEL_FONT_SIZE = "7px";
-const DEFAULT_VISIBLE_RANGE = [-1, 1];
+    if (isAlreadyHidden || isDestroyed || isDisabled) {
+      return;
+    }
 
-const LABELS_MARGIN_BUFFER_IN_PX = 20;
-const INTENSITY_LEGEND_LABEL_SIZE_IN_PX = 25;
-const INTENSITY_LEGEND_GRADIENT_SIZE_IN_PX = 20;
-const INTENSITY_LEGEND_SIZE_IN_PX =
-  INTENSITY_LEGEND_GRADIENT_SIZE_IN_PX + INTENSITY_LEGEND_LABEL_SIZE_IN_PX;
-const GROUPING_LEGEND_SIZE_IN_PX = 20;
-const TOOLTIP_IDENTIFIER = "ehgl-tooltip";
+    invokeHook('onHide', [instance], false);
 
-const DEFAULT_SIZE_LEGEND_SVG_PADDING = 10;
-const DEFAULT_SIZE_LEGEND_CIRCLE_GAP = 10;
-const DEFAULT_SIZE_LEGEND_CIRCLE_TEXT_GAP = 10;
+    if (instance.props.onHide(instance) === false) {
+      return;
+    }
 
-function isObject(object) {
-  return typeof object === "object" && Array.isArray(object) === false;
-}
+    instance.state.isVisible = false;
+    instance.state.isShown = false;
+    popper.style.visibility = 'hidden';
+    ignoreOnFirstUpdate = false;
+    cleanupInteractiveMouseListeners();
+    removeDocumentMouseDownListener();
+    handleInteractiveStyles();
 
-const getMinMax = (arr) => {
-  var max = -Number.MAX_VALUE,
-    min = Number.MAX_VALUE;
-  arr.forEach(function (x) {
-    if (max < x) {
-      max = x;
+    if (isDefaultRenderFn(instance.props.render)) {
+      var _getDefaultTemplateCh3 = getDefaultTemplateChildren(),
+          box = _getDefaultTemplateCh3.box,
+          content = _getDefaultTemplateCh3.content;
+
+      if (instance.props.animation) {
+        setTransitionDuration([box, content], duration);
+        setVisibilityState([box, content], 'hidden');
+      }
     }
-    if (min > x) {
-      min = x;
+
+    handleAriaContentAttribute();
+    handleAriaExpandedAttribute();
+
+    if (instance.props.animation) {
+      if (isDefaultRenderFn(instance.props.render)) {
+        onTransitionedOut(duration, instance.unmount);
+      }
+    } else {
+      instance.unmount();
     }
-  });
-  return [min, max];
-};
+  }
 
-const parseMargins = (margins) => {
-  const parsedMargins = {
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-  };
+  function unmount() {
+    destroyPopperInstance(); // If a popper is not interactive, it will be appended outside the popper
+    // tree by default. This seems mainly for interactive tippies, but we should
+    // find a workaround if possible
 
-  for (let key in margins) {
-    if (margins.hasOwnProperty(key)) {
-      const value = margins[key];
-      const parsedValue = parseInt(value, 10);
+    getNestedPopperTree().forEach(function (nestedPopper) {
+      var instance = nestedPopper._tippy;
+      instance.hide();
+      instance.unmount();
+    });
 
-      if (!isNaN(parsedValue)) {
-        parsedMargins[key] = parsedValue;
-      }
+    if (popper.parentNode) {
+      popper.parentNode.removeChild(popper);
+    }
+
+    mountedInstances = mountedInstances.filter(function (i) {
+      return i !== instance;
+    });
+
+    if (mountedInstances.length === 0) {
+      updateIOSClass(false);
     }
+
+    instance.state.isMounted = false;
+    invokeHook('onHidden', [instance]);
   }
 
-  return parsedMargins;
-};
+  function destroy() {
 
-const getTextWidth = (text, fontSize = "16px") => {
-  // Create a temporary SVG to measure the text width
-  const svg = select("body").append("svg");
-  const textNode = svg.append("text").style("font-size", fontSize).text(text);
-  const width = textNode.node().getBBox().width;
-  svg.remove();
-  return width;
-};
+    if (instance.state.isDestroyed) {
+      return;
+    }
 
-const createTooltip = (container, text, posX, posY) => {
-  let tooltip = select(container)
-    .append("div")
-    .attr("id", TOOLTIP_IDENTIFIER)
-    .style("position", "absolute")
-    .style("background", "#f9f9f9")
-    .style("padding", "8px")
-    .style("border", "1px solid #ccc")
-    .style("border-radius", "6px")
-    .style("z-index", "1000")
-    .style("visibility", "hidden");
-
-  tooltip
-    .style("visibility", "visible")
-    .text(text)
-    .style("left", posX + 10 + "px")
-    .style("top", posY - 10 + "px");
-};
+    instance.clearDelayTimeouts();
+    instance.hide();
+    instance.unmount();
+    removeListeners();
+    delete reference._tippy;
+    instance.state.isDestroyed = true;
+    invokeHook('onDestroy', [instance]);
+  }
+}
+
+function tippy(targets, optionalProps) {
+  if (optionalProps === void 0) {
+    optionalProps = {};
+  }
+
+  var plugins = defaultProps.plugins.concat(optionalProps.plugins || []);
+
+  bindGlobalEventListeners();
+  var passedProps = Object.assign({}, optionalProps, {
+    plugins: plugins
+  });
+  var elements = getArrayOfElements(targets);
+
+  var instances = elements.reduce(function (acc, reference) {
+    var instance = reference && createTippy(reference, passedProps);
+
+    if (instance) {
+      acc.push(instance);
+    }
+
+    return acc;
+  }, []);
+  return isElement$1(targets) ? instances[0] : instances;
+}
+
+tippy.defaultProps = defaultProps;
+tippy.setDefaultProps = setDefaultProps;
+tippy.currentInput = currentInput;
+
+tippy.setDefaultProps({
+  render: render
+});
 
-const removeTooltip = (container) => {
-  const tooltip = select(container).select(`#${TOOLTIP_IDENTIFIER}`);
+class Tooltip {
+  constructor() {
+    if (!Tooltip.instance) {
+      Tooltip.instance = this;
+      this.createSingletonTooltip();
+    }
+    return Tooltip.instance;
+  }
 
-  if (tooltip) {
-    tooltip.remove();
+  createSingletonTooltip() {
+    // Create an invisible, persistent tooltip
+    this.currentTooltip = tippy(document.body, {
+      content: "",
+      trigger: "manual",
+      arrow: true,
+      placement: "right",
+    });
   }
-};
 
-const getMaxRadiusForDotplot = (xlen, ylen) => {
-  return getMinMax([198 / (xlen + 1), 198 / (ylen + 1)])[1] - 5;
-};
+  updateTooltip(content, x, y, options = {}) {
+    this.currentTooltip.setContent(content);
+    this.currentTooltip.setProps({
+      getReferenceClientRect: () => ({
+        width: 0,
+        height: 0,
+        top: y,
+        left: x,
+        right: x,
+        bottom: y,
+      }),
+      ...options,
+    });
+    if (!this.currentTooltip.state.isVisible) {
+      this.currentTooltip.show();
+    }
+  }
 
-const getScaledRadiusForDotplot = (
-  radius,
-  maxRadiusScaled,
-  minRadiusOriginal,
-  maxRadiusOriginal
-) => {
-  return (
-    (maxRadiusScaled - 5) *
-      ((radius - minRadiusOriginal) / (maxRadiusOriginal - minRadiusOriginal)) +
-    5
-  );
-};
+  hideTooltip() {
+    if (this.currentTooltip) {
+      this.currentTooltip.hide();
+    }
+  }
+}
 
 /**
  * Base class for all matrix like layout plots.
@@ -10129,6 +13389,10 @@ class BaseGL {
       ylabels: null,
     };
 
+    // Plot domain
+    this.xAxisRange = null;
+    this.yAxisRange = null;
+
     // state
     this.state = {
       size: 20,
@@ -10138,8 +13402,14 @@ class BaseGL {
       ygap: 0.3,
     };
 
+    this.margins = DEFAULT_MARGINS;
+
     //Default Data for labelOptions
     this.labelOptions = {
+      rowLabelsSvgXOffset: -1.05,
+      rowLabelsSvgYOffset: -1.02,
+      columnLabelsSvgXOffset: -1.02,
+      columnLabelsSvgYOffset: 1.05,
       rowLabelMaxCharacters: DEFAULT_ROW_MAX_LABEL_LENGTH_ALLOWED,
       columnLabelMaxCharacters: DEFAULT_COLUMN_MAX_LABEL_LENGTH_ALLOWED,
       rowLabelSlintAngle: DEFAULT_ROW_LABEL_SLINT_ANGLE,
@@ -10199,6 +13469,8 @@ class BaseGL {
 
     this.highlightedIndices = [];
     this.indexStates = {};
+
+    this.tooltipInstance = new Tooltip();
   }
 
   /**
@@ -10246,6 +13518,10 @@ class BaseGL {
 
   _generateSpecForLabels(spec) {
     const {
+      rowLabelsSvgXOffset,
+      rowLabelsSvgYOffset,
+      columnLabelsSvgXOffset,
+      columnLabelsSvgYOffset,
       rowLabelMaxCharacters,
       columnLabelMaxCharacters,
       rowLabelSlintAngle,
@@ -10275,8 +13551,8 @@ class BaseGL {
 
         maxWidth = Math.max(maxWidth, truncatedLabelWidth);
         labels.push({
-          x: -1.02 + (2 * ilx + 1) / xlabels_len,
-          y: 1.05,
+          x: columnLabelsSvgXOffset + (2 * ilx + 1) / xlabels_len,
+          y: columnLabelsSvgYOffset,
           type: "row",
           index: ilx,
           text: truncatedLabel,
@@ -10309,8 +13585,8 @@ class BaseGL {
         );
         maxWidth = Math.max(maxWidth, truncatedLabelWidth);
         labels.push({
-          x: -1.05,
-          y: -1.02 + (2 * ily + 1) / ylabels_len,
+          x: rowLabelsSvgXOffset,
+          y: rowLabelsSvgYOffset + (2 * ily + 1) / ylabels_len,
           type: "column",
           index: ily,
           text: truncatedLabel,
@@ -10332,7 +13608,7 @@ class BaseGL {
       ...spec["margins"],
       top: `${topMarginToAccountForLabels}px`,
       left: `${leftMarginToAccountForLabels}px`,
-      right: "20px",
+      right: `${GROUPING_LEGEND_SIZE_IN_PX}px`,
     };
   }
 
@@ -10561,6 +13837,10 @@ class BaseGL {
    * @memberof BaseGL
    * @example
    * this.labelOptions = {
+   * rowLabelsSvgXOffset: 0,
+   * rowLabelsSvgYOffset: 0,
+   * columnLabelsSvgXOffset: 0,
+   * columnLabelsSvgYOffset: 0,
    * rowLabelMaxCharacters: 10,
    * columnLabelMaxCharacters: 10,
    * rowLabelSlintAngle: 0,
@@ -10570,8 +13850,12 @@ class BaseGL {
    * }
    * @example
    * this.setLabelOptions({
+   * rowLabelsSvgXOffset: 0,
+   * rowLabelsSvgYOffset: 0,
+   * columnLabelsSvgXOffset: 0,
+   * columnLabelsSvgYOffset: 0,
    * rowLabelMaxCharacters: 10,
-   *  columnLabelMaxCharacters: 10,
+   * columnLabelMaxCharacters: 10,
    * rowLabelSlintAngle: 0,
    * columnLabelSlintAngle: 0,
    * rowLabelFontSize: "7px",
@@ -10585,6 +13869,30 @@ class BaseGL {
     };
   }
 
+  /**
+   * Set the margins for the visualization.
+   * all properties are optional, if not provided, the default values will be used.
+   * @param {object} margins, an object containing the margins
+   * @param {number} margins.top, top margin
+   * @param {number} margins.bottom, bottom margin
+   * @param {number} margins.left, left margin
+   * @param {number} margins.right, right margin
+   * @memberof BaseGL
+   * @example
+   * this.setMargins({
+   * top: '10px',
+   * bottom: '10px',
+   * left: '10px',
+   * right: '10px',
+   * })
+   **/
+  setMargins(margins) {
+    this.margins = {
+      ...this.margins,
+      ...margins,
+    };
+  }
+
   /**
    * resize the plot, without having to send the data to the GPU.
    *
@@ -10739,20 +14047,20 @@ class BaseGL {
       const labelType = e.detail.labelObject.type;
       e.preventDefault();
 
-      createTooltip(
-        document.body,
+      this.tooltipInstance.updateTooltip(
         labelType === "row"
           ? this.input.xlabels[hoveredIndex]
           : this.input.ylabels[hoveredIndex],
-        e.detail.event.pageX,
-        e.detail.event.pageY
+        e.detail.event.clientX,
+        e.detail.event.clientY
       );
+
       this.labelHoveredCallback(e.detail);
     });
 
     this.plot.addEventListener("labelUnhovered", (e) => {
       e.preventDefault();
-      removeTooltip(document.body);
+      this.tooltipInstance.hideTooltip();
       this.labelUnhoveredCallback(e.detail);
     });
   }
@@ -10766,6 +14074,11 @@ class BaseGL {
     // Only render the legend if we have the legend data and the legend dom element
     if (!this.legendDomElement || !this.intensityLegendData) return;
 
+    //Clear the legend dom element
+    select(this.legendDomElement)
+      .select(`#${INTENSITY_LEGEND_IDENTIFIER}`)
+      .remove();
+
     const parsedMargins = parseMargins(this._spec.margins);
     const containerWidth =
       this.legendWidth ||
@@ -10774,7 +14087,7 @@ class BaseGL {
       this.legendHeight ||
       this.elem.clientHeight - parsedMargins.top - parsedMargins.bottom;
 
-    const averageCharWidth = 6; // rough estimation of the width of a single character
+    const averageCharWidth = 8; // rough estimation of the width of a single character
     const legendWidth = containerWidth - 2 * averageCharWidth;
     const legendHeight = containerHeight - 2 * averageCharWidth;
 
@@ -10790,12 +14103,12 @@ class BaseGL {
       transformX = averageCharWidth;
     }
 
-    const svgContainer = d3
-      .select(this.legendDomElement)
+    const svgContainer = select(this.legendDomElement)
       .append("svg")
+      .attr("id", INTENSITY_LEGEND_IDENTIFIER)
       .attr("width", svgWidth)
       .attr("height", svgHeight)
-      .attr("overflow", "visible");
+      .style("overflow", "visible");
 
     const defs = svgContainer.append("defs");
 
@@ -10825,7 +14138,7 @@ class BaseGL {
       }
     });
 
-    const intensityScale = linear$2()
+    const intensityScale = linear$1()
       .range([
         0,
         position === "left" || position === "right"
@@ -10914,7 +14227,7 @@ class BaseGL {
    **/
   renderRowGroupingLegend() {
     const position = this.rowGroupingLegendPosition;
-    const visibleRange = this.viewport?.yRange || DEFAULT_VISIBLE_RANGE;
+    const visibleRange = this.viewport?.yRange || this.yAxisRange;
 
     if (
       !this.rowGroupingLegendDomElement ||
@@ -10945,13 +14258,16 @@ class BaseGL {
       .attr("height", svgHeight)
       .attr("overflow", "visible");
 
-    const yScale = linear$2()
+    const yScale = linear$1()
       .domain(visibleRange) // Input range is currently visible range
       .range([svgHeight, 0]); // Output range is SVG height
+    const maxYRange = this.yAxisRange[1] - this.yAxisRange[0];
+    const minY = this.yAxisRange[0];
 
     this.groupingRowData.forEach((group, idx) => {
-      const normalizedStart = (group.startIndex * 2) / totalData - 1;
-      const normalizedEnd = ((group.endIndex + 1) * 2) / totalData - 1;
+      const normalizedStart = (group.startIndex / totalData) * maxYRange + minY;
+      const normalizedEnd =
+        ((group.endIndex + 1) / totalData) * maxYRange + minY;
 
       if (
         normalizedEnd >= visibleRange[0] &&
@@ -10964,7 +14280,6 @@ class BaseGL {
         const rectHeight = Math.abs(
           yScale(rectEndInView) - yScale(rectStartInView)
         );
-
         svgContainer
           .append("rect")
           .attr("x", 0)
@@ -10972,12 +14287,12 @@ class BaseGL {
           .attr("width", legendWidth)
           .attr("height", rectHeight)
           .style("fill", group.color)
-          .on("mouseover", (e) => {
+          .on("mousemove", (e) => {
             const text = group.label;
-            createTooltip(document.body, text, e.pageX, e.pageY);
+            this.tooltipInstance.updateTooltip(text, e.clientX, e.clientY);
           })
           .on("mouseout", (e) => {
-            removeTooltip(document.body);
+            this.tooltipInstance.hideTooltip();
           });
       }
     });
@@ -10994,7 +14309,7 @@ class BaseGL {
    * */
   renderColumnGroupingLegend() {
     const position = this.columnGroupingLegendPosition; // should be 'top' or 'bottom'
-    const visibleRange = this.viewport?.xRange || DEFAULT_VISIBLE_RANGE;
+    const visibleRange = this.viewport?.xRange || this.xAxisRange;
 
     // Only render the legend if we have the legend data, the dom element,
     // the position is either 'top' or 'bottom' and visibleRange exists
@@ -11030,13 +14345,17 @@ class BaseGL {
       .attr("height", svgHeight)
       .attr("overflow", "visible");
 
-    const xScale = linear$2()
+    const xScale = linear$1()
       .domain(visibleRange) // Input range is currently visible range
       .range([0, svgWidth]); // Output range is SVG width
 
+    const maxXRange = this.xAxisRange[1] - this.xAxisRange[0];
+    const minX = this.xAxisRange[0];
+
     this.groupingColumnData.forEach((group, idx) => {
-      const normalizedStart = (group.startIndex * 2) / totalData - 1;
-      const normalizedEnd = ((group.endIndex + 1) * 2) / totalData - 1;
+      const normalizedStart = (group.startIndex / totalData) * maxXRange + minX;
+      const normalizedEnd =
+        ((group.endIndex + 1) / totalData) * maxXRange + minX;
 
       if (
         normalizedEnd >= visibleRange[0] &&
@@ -11057,12 +14376,13 @@ class BaseGL {
           .attr("width", rectWidth)
           .attr("height", legendHeight)
           .style("fill", group.color)
-          .on("mouseover", (e) => {
+          .on("mousemove", (e) => {
             const text = group.label;
-            createTooltip(document.body, text, e.pageX, e.pageY);
+
+            this.tooltipInstance.updateTooltip(text, e.clientX, e.clientY);
           })
           .on("mouseout", (e) => {
-            removeTooltip(document.body);
+            this.tooltipInstance.hideTooltip();
           });
       }
     });
@@ -11087,7 +14407,19 @@ class BaseGL {
    * @param {string} orientation - The orientation of the grouping labels
    * @returns {void}
    **/
-  renderGroupingLabels(parentElement, groupingRowData, orientation) {
+  renderGroupingLabels(parentElement, groupingData, orientation) {
+    // Filter out duplicate labels in the grouping data
+    groupingData = groupingData.reduce(
+      (acc, obj) => {
+        if (!acc.seen[obj.label]) {
+          acc.seen[obj.label] = true;
+          acc.result.push(obj);
+        }
+        return acc;
+      },
+      { seen: {}, result: [] }
+    ).result;
+
     const parent = select(parentElement);
     const svg = parent.append("svg");
 
@@ -11095,14 +14427,14 @@ class BaseGL {
     if (orientation === "horizontal") {
       svg.attr("height", 25);
     } else {
-      svg.attr("height", groupingRowData.length * 25);
+      svg.attr("height", groupingData.length * 25);
     }
 
     const labelHeight = 25;
     let xOffset = 0;
     let yOffset = 0;
 
-    groupingRowData.forEach((data) => {
+    groupingData.forEach((data) => {
       const group = svg.append("g");
 
       group
@@ -11395,7 +14727,7 @@ class DotplotGL extends BaseGL {
    * @param {Array|number} encoding.xgap, same as size, but sets the gap along x-axis.
    * @param {Array|number} encoding.ygap, same as size, but sets the gap along y-axis.
    * @param {Array} encoding.intensityLegendData - an array of objects containing the color, intensity and label for the legend.
-   * @param {Array} encoding.sizeLegendData - an object containing minSize, maxSize and steps for the legend.
+   * @param {Array} encoding.sizeLegendData - an object containing minSize, maxSize, steps and maxSizeInPx for the legend.
    * @param {Array} encoding.rowGroupingData - an array of objects containing the startIndex, endIndex, color and label for the row grouping.
    * @param {Array} encoding.columnGroupingData - an array of objects containing the startIndex, endIndex, color and label for the column grouping.
    * @memberof BaseGL
@@ -11422,16 +14754,22 @@ class DotplotGL extends BaseGL {
     const [, maxY] = getMinMax(this.input.y);
     let xlen = maxX + 1,
       ylen = maxY + 1;
-    spec_inputs.x = this.input.x.map((e, i) => -1 + (2 * e + 1) / xlen);
-    spec_inputs.y = this.input.y.map((e, i) => -1 + (2 * e + 1) / ylen);
+
+    spec_inputs.x = mapArrayOrTypedArray(
+      this.input.x,
+      (e, i) => -1 + (2 * e + 1) / xlen
+    );
+    spec_inputs.y = mapArrayOrTypedArray(
+      this.input.y,
+      (e, i) => -1 + (2 * e + 1) / ylen
+    );
+
+    // Setting X and Y Axis Domains
+    this.xAxisRange = [-1, 1];
+    this.yAxisRange = [-1, 1];
 
     let spec = {
-      margins: {
-        top: "25px",
-        bottom: "50px",
-        left: "50px",
-        right: "10px",
-      },
+      margins: this.margins,
       defaultData: {
         x: spec_inputs.x,
         y: spec_inputs.y,
@@ -11444,12 +14782,12 @@ class DotplotGL extends BaseGL {
           x: {
             attribute: "x",
             type: "quantitative",
-            domain: [-1, 1],
+            domain: this.xAxisRange,
           },
           y: {
             attribute: "y",
             type: "quantitative",
-            domain: [-1, 1],
+            domain: this.yAxisRange,
           },
           opacity: { value: this.state.opacity },
         },
@@ -11457,7 +14795,12 @@ class DotplotGL extends BaseGL {
     };
 
     // scale size of dots
-    const maxRadiusScaled = getMaxRadiusForDotplot(xlen, ylen);
+    const maxRadiusScaled = getMaxRadiusForDotplot(
+      xlen,
+      ylen,
+      DEFAULT_MARGIN_BETWEEN_DOTS
+    );
+
     let tsize = this.state["size"];
     if (Array.isArray(this.state["size"])) {
       let [minRadiusOriginal, maxRadiusOriginal] = getMinMax(
@@ -11471,8 +14814,6 @@ class DotplotGL extends BaseGL {
           maxRadiusOriginal
         )
       );
-
-      console.log(getMinMax(tsize), "tize", tsize);
     }
 
     this._generateSpecForLabels(spec);
@@ -11552,7 +14893,8 @@ class DotplotGL extends BaseGL {
    */
   renderSizeLegend() {
     if (!this.sizeLegendData) return;
-    let { minSize, maxSize, steps } = this.sizeLegendData;
+    let { minSize, maxSize, steps, maxSizeInPx, minSizeInPx } =
+      this.sizeLegendData;
     const [, maxX] = getMinMax(this.input.x);
     const [, maxY] = getMinMax(this.input.y);
     let xlen = maxX + 1,
@@ -11561,19 +14903,37 @@ class DotplotGL extends BaseGL {
     const [minRadiusOriginal, maxRadiusOriginal] = getMinMax(
       this.state["size"]
     );
-    const maxRadiusScaled = getMaxRadiusForDotplot(xlen, ylen);
+    const maxRadiusAsPerPlot = getMaxRadiusForDotplot(
+      xlen,
+      ylen,
+      DEFAULT_MARGIN_BETWEEN_DOTS
+    );
     minSize = getScaledRadiusForDotplot(
-      minSize,
-      maxRadiusScaled,
+      minSize || minRadiusOriginal, // if minSize is not provided, use minRadiusOriginal
+      maxRadiusAsPerPlot,
       minRadiusOriginal,
       maxRadiusOriginal
     );
     maxSize = getScaledRadiusForDotplot(
-      maxSize,
-      maxRadiusScaled,
+      maxSize || maxRadiusOriginal, // if maxSize is not provided, use maxRadiusOriginal
+      maxRadiusAsPerPlot,
       minRadiusOriginal,
       maxRadiusOriginal
     );
+
+    // Desired max size in pixels
+    const maxPx = maxSizeInPx || maxSize;
+
+    // Desired min size in pixels
+    const minPx = minSizeInPx || minSize;
+
+    // Create a linear scale
+    const sizeScale = linear$1()
+      .domain([minSize, maxSize])
+      .range([minPx, maxPx]);
+
+    minSize = sizeScale(minSize);
+    maxSize = sizeScale(maxSize);
     const orientation = this.sizeLegendOptions.orientation;
 
     // Calculate step size
@@ -11685,7 +15045,6 @@ class DotplotGL extends BaseGL {
             .style("right", "0px");
           break;
       }
-      console.log("before", this._spec.margins);
 
       this.updateMarginsToAccountForSizeLegend();
       this.plot.setSpecification(this._spec);
@@ -11907,22 +15266,28 @@ class RectplotGL extends BaseGL {
     };
 
     let spec_inputs = {};
-    spec_inputs.x = this.input.x.map((e, i) => String(e));
-    spec_inputs.y = this.input.y.map((e, i) => String(e));
+
+    // Setting X and Y Axis Domains to [-1, 1]
+    this.xAxisRange = [-1, 1];
+    this.yAxisRange = [-1, 1];
+
+    spec_inputs.x = mapArrayOrTypedArray(this.input.x, (e, i) => String(e));
+    spec_inputs.y = mapArrayOrTypedArray(this.input.y, (e, i) => String(e));
 
     let default_width = 198 / (getMinMax(this.input.x)[1] + 1);
     let default_height = 198 / (getMinMax(this.input.y)[1] + 1);
 
-    spec_inputs.width = this.input.x.map((e, i) => default_width - xGaps(i));
-    spec_inputs.height = this.input.y.map((e, i) => default_height - yGaps(i));
+    spec_inputs.width = mapArrayOrTypedArray(
+      this.input.x,
+      (e, i) => default_width - xGaps(i)
+    );
+    spec_inputs.height = mapArrayOrTypedArray(
+      this.input.y,
+      (e, i) => default_height - yGaps(i)
+    );
 
     let spec = {
-      margins: {
-        top: "25px",
-        bottom: "50px",
-        left: "50px",
-        right: "10px",
-      },
+      margins: this.margins,
       defaultData: {
         x: spec_inputs.x,
         y: spec_inputs.y,
@@ -12037,13 +15402,12 @@ class TickplotGL extends BaseGL {
       }
     }
 
+    // Setting X and Y Axis Domains
+    this.xAxisRange = getMinMax(this.input.x);
+    this.yAxisRange = getMinMax(this.input.y);
+
     let spec = {
-      margins: {
-        top: "25px",
-        bottom: "50px",
-        left: "50px",
-        right: "10px",
-      },
+      margins: this.margins,
       defaultData: {
         x: this.input.x,
         y: this.input.y,
@@ -12056,12 +15420,12 @@ class TickplotGL extends BaseGL {
           x: {
             attribute: "x",
             type: "quantitative",
-            domain: getMinMax(this.input.x),
+            domain: this.xAxisRange,
           },
           y: {
             attribute: "y",
             type: "quantitative",
-            domain: getMinMax(this.input.y),
+            domain: this.yAxisRange,
           },
           opacity: { value: this.state.opacity },
           width: { value: default_width },
diff --git a/app/offscreen-webgl-worker-368f04c5-12a46a85.js b/app/offscreen-webgl-worker-368f04c5-f6300088.js
similarity index 99%
rename from app/offscreen-webgl-worker-368f04c5-12a46a85.js
rename to app/offscreen-webgl-worker-368f04c5-f6300088.js
index a0d8ad1..73d1d3a 100644
--- a/app/offscreen-webgl-worker-368f04c5-12a46a85.js
+++ b/app/offscreen-webgl-worker-368f04c5-f6300088.js
@@ -1,5 +1,5 @@
-import { s as scale, A as colorSpecifierToHex } from './rgb-b646728b-0756143b.js';
-import { S as SpecificationProcessor, V as VertexCalculator, g as getDrawModeForTrack, D as DEFAULT_CHANNELS } from './specification-processor-f5ff7c7a-f223adaf.js';
+import { s as scale, A as colorSpecifierToHex } from './rgb-b646728b-2f709b61.js';
+import { S as SpecificationProcessor, V as VertexCalculator, g as getDrawModeForTrack, D as DEFAULT_CHANNELS } from './specification-processor-f5ff7c7a-2d0faaee.js';
 
 class Drawer {
   /**
diff --git a/app/rgb-b646728b-0756143b.js b/app/rgb-b646728b-2f709b61.js
similarity index 100%
rename from app/rgb-b646728b-0756143b.js
rename to app/rgb-b646728b-2f709b61.js
diff --git a/app/specification-processor-f5ff7c7a-f223adaf.js b/app/specification-processor-f5ff7c7a-2d0faaee.js
similarity index 99%
rename from app/specification-processor-f5ff7c7a-f223adaf.js
rename to app/specification-processor-f5ff7c7a-2d0faaee.js
index c5c2c40..468f180 100644
--- a/app/specification-processor-f5ff7c7a-f223adaf.js
+++ b/app/specification-processor-f5ff7c7a-2d0faaee.js
@@ -1,4 +1,4 @@
-import { n as define, o as extend, q as rgbBasis, u as rgb$1, R as Rgb, v as rgbConvert, C as Color, w as nogamma, x as hue, y as brighter, z as darker, f as getScaleForSpecification, A as colorSpecifierToHex, s as scale, B as rgbStringToHex, E as getQuadraticBezierCurveForPoints } from './rgb-b646728b-0756143b.js';
+import { n as define, o as extend, q as rgbBasis, u as rgb$1, R as Rgb, v as rgbConvert, C as Color, w as nogamma, x as hue, y as brighter, z as darker, f as getScaleForSpecification, A as colorSpecifierToHex, s as scale, B as rgbStringToHex, E as getQuadraticBezierCurveForPoints } from './rgb-b646728b-2f709b61.js';
 
 const radians = Math.PI / 180;
 const degrees = 180 / Math.PI;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..0f7e875
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,2346 @@
+{
+  "name": "epiviz.heatmap.gl",
+  "version": "0.0.24",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@babel/helper-module-imports": {
+      "version": "7.22.15",
+      "resolved": "https://npm.vida.science.roche.com/@babel%2fhelper-module-imports/-/helper-module-imports-7.22.15.tgz",
+      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.22.15"
+      }
+    },
+    "@babel/helper-string-parser": {
+      "version": "7.23.4",
+      "resolved": "https://npm.vida.science.roche.com/@babel%2fhelper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
+      "dev": true
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.22.20",
+      "resolved": "https://npm.vida.science.roche.com/@babel%2fhelper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "dev": true
+    },
+    "@babel/runtime": {
+      "version": "7.23.5",
+      "resolved": "https://npm.vida.science.roche.com/@babel%2fruntime/-/runtime-7.23.5.tgz",
+      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
+      "requires": {
+        "regenerator-runtime": "^0.14.0"
+      }
+    },
+    "@babel/types": {
+      "version": "7.23.9",
+      "resolved": "https://npm.vida.science.roche.com/@babel%2ftypes/-/types-7.23.9.tgz",
+      "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-string-parser": "^7.23.4",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://npm.vida.science.roche.com/@jridgewell%2fsourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "dev": true
+    },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://npm.vida.science.roche.com/@popperjs%2fcore/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+    },
+    "@reduxjs/toolkit": {
+      "version": "1.9.7",
+      "resolved": "https://npm.vida.science.roche.com/@reduxjs%2ftoolkit/-/toolkit-1.9.7.tgz",
+      "integrity": "sha512-t7v8ZPxhhKgOKtU+uyJT13lu4vL7az5aFi4IdoDs/eS548edn2M8Ik9h8fxgvMjGoAUVFSt6ZC1P5cWmQ014QQ==",
+      "requires": {
+        "immer": "^9.0.21",
+        "redux": "^4.2.1",
+        "redux-thunk": "^2.4.2",
+        "reselect": "^4.1.8"
+      }
+    },
+    "@rollup/plugin-babel": {
+      "version": "5.3.1",
+      "resolved": "https://npm.vida.science.roche.com/@rollup%2fplugin-babel/-/plugin-babel-5.3.1.tgz",
+      "integrity": "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.10.4",
+        "@rollup/pluginutils": "^3.1.0"
+      }
+    },
+    "@rollup/plugin-commonjs": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.1.0.tgz",
+      "integrity": "sha512-Ycr12N3ZPN96Fw2STurD21jMqzKwL9QuFhms3SD7KKRK7oaXUsBU9Zt0jL/rOPHiPYisI21/rXGO3jr9BnLHUA==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.8",
+        "commondir": "^1.0.1",
+        "estree-walker": "^1.0.1",
+        "glob": "^7.1.2",
+        "is-reference": "^1.1.2",
+        "magic-string": "^0.25.2",
+        "resolve": "^1.11.0"
+      }
+    },
+    "@rollup/plugin-json": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
+      "integrity": "sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.8"
+      }
+    },
+    "@rollup/plugin-node-resolve": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
+      "integrity": "sha512-RxtSL3XmdTAE2byxekYLnx+98kEUOrPHF/KRVjLH+DEIHy6kjIw7YINQzn+NXiH/NTrQLAwYs0GWB+csWygA9Q==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.8",
+        "@types/resolve": "0.0.8",
+        "builtin-modules": "^3.1.0",
+        "is-module": "^1.0.0",
+        "resolve": "^1.14.2"
+      }
+    },
+    "@rollup/plugin-replace": {
+      "version": "5.0.5",
+      "resolved": "https://npm.vida.science.roche.com/@rollup%2fplugin-replace/-/plugin-replace-5.0.5.tgz",
+      "integrity": "sha512-rYO4fOi8lMaTg/z5Jb+hKnrHHVn8j2lwkqwyS4kTRhKyWOLf2wST2sWXr4WzWiTcoHTp2sTjqUbqIj2E39slKQ==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^5.0.1",
+        "magic-string": "^0.30.3"
+      },
+      "dependencies": {
+        "@rollup/pluginutils": {
+          "version": "5.1.0",
+          "resolved": "https://npm.vida.science.roche.com/@rollup%2fpluginutils/-/pluginutils-5.1.0.tgz",
+          "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+          "dev": true,
+          "requires": {
+            "@types/estree": "^1.0.0",
+            "estree-walker": "^2.0.2",
+            "picomatch": "^2.3.1"
+          }
+        },
+        "@types/estree": {
+          "version": "1.0.5",
+          "resolved": "https://npm.vida.science.roche.com/@types%2festree/-/estree-1.0.5.tgz",
+          "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+          "dev": true
+        },
+        "estree-walker": {
+          "version": "2.0.2",
+          "resolved": "https://npm.vida.science.roche.com/estree-walker/-/estree-walker-2.0.2.tgz",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+          "dev": true
+        },
+        "magic-string": {
+          "version": "0.30.5",
+          "resolved": "https://npm.vida.science.roche.com/magic-string/-/magic-string-0.30.5.tgz",
+          "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
+          "dev": true,
+          "requires": {
+            "@jridgewell/sourcemap-codec": "^1.4.15"
+          }
+        }
+      }
+    },
+    "@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      }
+    },
+    "@surma/rollup-plugin-off-main-thread": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
+      "integrity": "sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==",
+      "dev": true,
+      "requires": {
+        "ejs": "^3.1.6",
+        "json5": "^2.2.0",
+        "magic-string": "^0.25.0",
+        "string.prototype.matchall": "^4.0.6"
+      }
+    },
+    "@swc/helpers": {
+      "version": "0.3.17",
+      "resolved": "https://npm.vida.science.roche.com/@swc%2fhelpers/-/helpers-0.3.17.tgz",
+      "integrity": "sha512-tb7Iu+oZ+zWJZ3HJqwx8oNwSDIU440hmVMDPhpACWQWnrZHK99Bxs70gT1L2dnr5Hg50ZRWEFkQCAnOVVV0z1Q==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://npm.vida.science.roche.com/@trysound%2fsax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true
+    },
+    "@turf/boolean-point-in-polygon": {
+      "version": "6.5.0",
+      "resolved": "https://npm.vida.science.roche.com/@turf%2fboolean-point-in-polygon/-/boolean-point-in-polygon-6.5.0.tgz",
+      "integrity": "sha512-DtSuVFB26SI+hj0SjrvXowGTUCHlgevPAIsukssW6BG5MlNSBQAo70wpICBNJL6RjukXg8d2eXaAWuD/CqL00A==",
+      "requires": {
+        "@turf/helpers": "^6.5.0",
+        "@turf/invariant": "^6.5.0"
+      }
+    },
+    "@turf/clean-coords": {
+      "version": "6.5.0",
+      "resolved": "https://npm.vida.science.roche.com/@turf%2fclean-coords/-/clean-coords-6.5.0.tgz",
+      "integrity": "sha512-EMX7gyZz0WTH/ET7xV8MyrExywfm9qUi0/MY89yNffzGIEHuFfqwhcCqZ8O00rZIPZHUTxpmsxQSTfzJJA1CPw==",
+      "requires": {
+        "@turf/helpers": "^6.5.0",
+        "@turf/invariant": "^6.5.0"
+      }
+    },
+    "@turf/clone": {
+      "version": "6.5.0",
+      "resolved": "https://npm.vida.science.roche.com/@turf%2fclone/-/clone-6.5.0.tgz",
+      "integrity": "sha512-mzVtTFj/QycXOn6ig+annKrM6ZlimreKYz6f/GSERytOpgzodbQyOgkfwru100O1KQhhjSudKK4DsQ0oyi9cTw==",
+      "requires": {
+        "@turf/helpers": "^6.5.0"
+      }
+    },
+    "@turf/helpers": {
+      "version": "6.5.0",
+      "resolved": "https://npm.vida.science.roche.com/@turf%2fhelpers/-/helpers-6.5.0.tgz",
+      "integrity": "sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw=="
+    },
+    "@turf/invariant": {
+      "version": "6.5.0",
+      "resolved": "https://npm.vida.science.roche.com/@turf%2finvariant/-/invariant-6.5.0.tgz",
+      "integrity": "sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==",
+      "requires": {
+        "@turf/helpers": "^6.5.0"
+      }
+    },
+    "@turf/meta": {
+      "version": "6.5.0",
+      "resolved": "https://npm.vida.science.roche.com/@turf%2fmeta/-/meta-6.5.0.tgz",
+      "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
+      "requires": {
+        "@turf/helpers": "^6.5.0"
+      }
+    },
+    "@turf/simplify": {
+      "version": "6.5.0",
+      "resolved": "https://npm.vida.science.roche.com/@turf%2fsimplify/-/simplify-6.5.0.tgz",
+      "integrity": "sha512-USas3QqffPHUY184dwQdP8qsvcVH/PWBYdXY5am7YTBACaQOMAlf6AKJs9FT8jiO6fQpxfgxuEtwmox+pBtlOg==",
+      "requires": {
+        "@turf/clean-coords": "^6.5.0",
+        "@turf/clone": "^6.5.0",
+        "@turf/helpers": "^6.5.0",
+        "@turf/meta": "^6.5.0"
+      }
+    },
+    "@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+      "dev": true
+    },
+    "@types/node": {
+      "version": "20.2.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.5.tgz",
+      "integrity": "sha512-JJulVEQXmiY9Px5axXHeYGLSjhkZEnD+MDPDGbCbIAbMslkKwmygtZFy1X6s/075Yo94sf8GuSlFfPzysQrWZQ==",
+      "dev": true
+    },
+    "@types/resolve": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
+      "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
+    "array-buffer-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
+      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "is-array-buffer": "^3.0.1"
+      }
+    },
+    "array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+      "dev": true,
+      "requires": {
+        "array-uniq": "^1.0.1"
+      }
+    },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "dev": true
+    },
+    "async": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
+      "dev": true
+    },
+    "available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://npm.vida.science.roche.com/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "dev": true
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "browserslist": {
+      "version": "4.22.2",
+      "resolved": "https://npm.vida.science.roche.com/browserslist/-/browserslist-4.22.2.tgz",
+      "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==",
+      "dev": true,
+      "requires": {
+        "caniuse-lite": "^1.0.30001565",
+        "electron-to-chromium": "^1.4.601",
+        "node-releases": "^2.0.14",
+        "update-browserslist-db": "^1.0.13"
+      }
+    },
+    "builtin-modules": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
+      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
+      "dev": true
+    },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
+    "caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://npm.vida.science.roche.com/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001580",
+      "resolved": "https://npm.vida.science.roche.com/caniuse-lite/-/caniuse-lite-1.0.30001580.tgz",
+      "integrity": "sha512-mtj5ur2FFPZcCEpXFy8ADXbDACuNFXg6mxVDqp7tqooX6l3zwm+d8EPoeOSIFRDvHs8qu7/SLFOGniULkcH2iA==",
+      "dev": true
+    },
+    "chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      }
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "colord": {
+      "version": "2.9.3",
+      "resolved": "https://npm.vida.science.roche.com/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "dev": true
+    },
+    "commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "concat-with-sourcemaps": {
+      "version": "1.1.0",
+      "resolved": "https://npm.vida.science.roche.com/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz",
+      "integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==",
+      "dev": true,
+      "requires": {
+        "source-map": "^0.6.1"
+      }
+    },
+    "css-declaration-sorter": {
+      "version": "6.4.1",
+      "resolved": "https://npm.vida.science.roche.com/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
+      "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
+      "dev": true
+    },
+    "css-select": {
+      "version": "4.3.0",
+      "resolved": "https://npm.vida.science.roche.com/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "dev": true,
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      }
+    },
+    "css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://npm.vida.science.roche.com/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dev": true,
+      "requires": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      }
+    },
+    "css-what": {
+      "version": "6.1.0",
+      "resolved": "https://npm.vida.science.roche.com/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "dev": true
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://npm.vida.science.roche.com/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
+    "cssnano": {
+      "version": "5.1.15",
+      "resolved": "https://npm.vida.science.roche.com/cssnano/-/cssnano-5.1.15.tgz",
+      "integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
+      "dev": true,
+      "requires": {
+        "cssnano-preset-default": "^5.2.14",
+        "lilconfig": "^2.0.3",
+        "yaml": "^1.10.2"
+      }
+    },
+    "cssnano-preset-default": {
+      "version": "5.2.14",
+      "resolved": "https://npm.vida.science.roche.com/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
+      "integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
+      "dev": true,
+      "requires": {
+        "css-declaration-sorter": "^6.3.1",
+        "cssnano-utils": "^3.1.0",
+        "postcss-calc": "^8.2.3",
+        "postcss-colormin": "^5.3.1",
+        "postcss-convert-values": "^5.1.3",
+        "postcss-discard-comments": "^5.1.2",
+        "postcss-discard-duplicates": "^5.1.0",
+        "postcss-discard-empty": "^5.1.1",
+        "postcss-discard-overridden": "^5.1.0",
+        "postcss-merge-longhand": "^5.1.7",
+        "postcss-merge-rules": "^5.1.4",
+        "postcss-minify-font-values": "^5.1.0",
+        "postcss-minify-gradients": "^5.1.1",
+        "postcss-minify-params": "^5.1.4",
+        "postcss-minify-selectors": "^5.2.1",
+        "postcss-normalize-charset": "^5.1.0",
+        "postcss-normalize-display-values": "^5.1.0",
+        "postcss-normalize-positions": "^5.1.1",
+        "postcss-normalize-repeat-style": "^5.1.1",
+        "postcss-normalize-string": "^5.1.0",
+        "postcss-normalize-timing-functions": "^5.1.0",
+        "postcss-normalize-unicode": "^5.1.1",
+        "postcss-normalize-url": "^5.1.0",
+        "postcss-normalize-whitespace": "^5.1.1",
+        "postcss-ordered-values": "^5.1.3",
+        "postcss-reduce-initial": "^5.1.2",
+        "postcss-reduce-transforms": "^5.1.0",
+        "postcss-svgo": "^5.1.0",
+        "postcss-unique-selectors": "^5.1.1"
+      }
+    },
+    "cssnano-utils": {
+      "version": "3.1.0",
+      "resolved": "https://npm.vida.science.roche.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
+      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
+      "dev": true
+    },
+    "csso": {
+      "version": "4.2.0",
+      "resolved": "https://npm.vida.science.roche.com/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dev": true,
+      "requires": {
+        "css-tree": "^1.1.2"
+      }
+    },
+    "d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://npm.vida.science.roche.com/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "requires": {
+        "internmap": "1 - 2"
+      }
+    },
+    "d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="
+    },
+    "d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
+    },
+    "d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="
+    },
+    "d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "requires": {
+        "d3-color": "1 - 3"
+      }
+    },
+    "d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "requires": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      }
+    },
+    "d3-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://npm.vida.science.roche.com/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      }
+    },
+    "d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
+    },
+    "d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "requires": {
+        "d3-array": "2 - 3"
+      }
+    },
+    "d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "requires": {
+        "d3-time": "1 - 3"
+      }
+    },
+    "define-properties": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
+      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
+      "dev": true,
+      "requires": {
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://npm.vida.science.roche.com/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      }
+    },
+    "domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://npm.vida.science.roche.com/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true
+    },
+    "domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://npm.vida.science.roche.com/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.2.0"
+      }
+    },
+    "domutils": {
+      "version": "2.8.0",
+      "resolved": "https://npm.vida.science.roche.com/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dev": true,
+      "requires": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      }
+    },
+    "ejs": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz",
+      "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==",
+      "dev": true,
+      "requires": {
+        "jake": "^10.8.5"
+      }
+    },
+    "electron-to-chromium": {
+      "version": "1.4.647",
+      "resolved": "https://npm.vida.science.roche.com/electron-to-chromium/-/electron-to-chromium-1.4.647.tgz",
+      "integrity": "sha512-Z/fTNGwc45WrYQhPaEcz5tAJuZZ8G7S/DBnhS6Kgp4BxnS40Z/HqlJ0hHg3Z79IGVzuVartIlTcjw/cQbPLgOw==",
+      "dev": true
+    },
+    "email-addresses": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
+      "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==",
+      "dev": true
+    },
+    "entities": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+      "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
+      "dev": true
+    },
+    "epiviz.gl": {
+      "version": "1.0.17",
+      "resolved": "https://npm.vida.science.roche.com/epiviz.gl/-/epiviz.gl-1.0.17.tgz",
+      "integrity": "sha512-uuDummEr8CCicBpG07Hn7E7eVHTSnW94JaRV5AbanKLwczpvSzoqapkzTdZHAabaSel5DkMf5x83jcFt9jJ+cg==",
+      "requires": {
+        "@reduxjs/toolkit": "^1.6.2",
+        "@swc/helpers": "^0.3.3",
+        "@turf/boolean-point-in-polygon": "^6.5.0",
+        "@turf/helpers": "^6.5.0",
+        "@turf/simplify": "^6.5.0",
+        "d3-axis": "^3.0.0",
+        "d3-color": "^3.0.1",
+        "d3-format": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "flatbush": "^3.3.0",
+        "fpsmeter": "^0.3.1",
+        "jsonschema": "^1.4.0",
+        "twgl.js": "^4.21.2"
+      }
+    },
+    "es-abstract": {
+      "version": "1.21.2",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.2.tgz",
+      "integrity": "sha512-y/B5POM2iBnIxCiernH1G7rC9qQoM77lLIMQLuob0zhp8C56Po81+2Nj0WFKnd0pNReDTnkYryc+zhOzpEIROg==",
+      "dev": true,
+      "requires": {
+        "array-buffer-byte-length": "^1.0.0",
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "es-set-tostringtag": "^2.0.1",
+        "es-to-primitive": "^1.2.1",
+        "function.prototype.name": "^1.1.5",
+        "get-intrinsic": "^1.2.0",
+        "get-symbol-description": "^1.0.0",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
+        "has": "^1.0.3",
+        "has-property-descriptors": "^1.0.0",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.5",
+        "is-array-buffer": "^3.0.2",
+        "is-callable": "^1.2.7",
+        "is-negative-zero": "^2.0.2",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.10",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.12.3",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.4",
+        "regexp.prototype.flags": "^1.4.3",
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trim": "^1.2.7",
+        "string.prototype.trimend": "^1.0.6",
+        "string.prototype.trimstart": "^1.0.6",
+        "typed-array-length": "^1.0.4",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.9"
+      }
+    },
+    "es-set-tostringtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
+      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.3",
+        "has": "^1.0.3",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      }
+    },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://npm.vida.science.roche.com/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true
+    },
+    "estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+      "dev": true
+    },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://npm.vida.science.roche.com/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true
+    },
+    "filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "dev": true,
+      "requires": {
+        "minimatch": "^5.0.1"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.6",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+          "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
+      }
+    },
+    "filename-reserved-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+      "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==",
+      "dev": true
+    },
+    "filenamify": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
+      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
+      "dev": true,
+      "requires": {
+        "filename-reserved-regex": "^2.0.0",
+        "strip-outer": "^1.0.1",
+        "trim-repeated": "^1.0.0"
+      }
+    },
+    "find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "dev": true,
+      "requires": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      }
+    },
+    "find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "requires": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
+    "flatbush": {
+      "version": "3.3.1",
+      "resolved": "https://npm.vida.science.roche.com/flatbush/-/flatbush-3.3.1.tgz",
+      "integrity": "sha512-oKuPbtT+DS2CxH+9Vhbsq8HifmSCuOw+3Cy5zt/vCIrZl5KyengoTHDBLmtpZoBhcwa7/biNjgL1DwdLMJYm1A==",
+      "requires": {
+        "flatqueue": "^1.2.1"
+      }
+    },
+    "flatqueue": {
+      "version": "1.2.1",
+      "resolved": "https://npm.vida.science.roche.com/flatqueue/-/flatqueue-1.2.1.tgz",
+      "integrity": "sha512-X86TpWS1rGuY7m382HuA9vngLeDuWA9lJvhEG+GfgKMV5onSvx5a71cl7GMbXzhWtlN9dGfqOBrpfqeOtUfGYQ=="
+    },
+    "for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.3"
+      }
+    },
+    "fpsmeter": {
+      "version": "0.3.1",
+      "resolved": "https://npm.vida.science.roche.com/fpsmeter/-/fpsmeter-0.3.1.tgz",
+      "integrity": "sha1-8TTUGhrwanF7NVI+5phVLX8PPOU="
+    },
+    "fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "function.prototype.name": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
+      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.0",
+        "functions-have-names": "^1.2.2"
+      }
+    },
+    "functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true
+    },
+    "generic-names": {
+      "version": "4.0.0",
+      "resolved": "https://npm.vida.science.roche.com/generic-names/-/generic-names-4.0.0.tgz",
+      "integrity": "sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^3.2.0"
+      }
+    },
+    "get-intrinsic": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
+      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3"
+      }
+    },
+    "get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      }
+    },
+    "gh-pages": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz",
+      "integrity": "sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==",
+      "dev": true,
+      "requires": {
+        "async": "^2.6.1",
+        "commander": "^2.18.0",
+        "email-addresses": "^3.0.1",
+        "filenamify": "^4.3.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^8.1.0",
+        "globby": "^6.1.0"
+      },
+      "dependencies": {
+        "async": {
+          "version": "2.6.4",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+          "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+          "dev": true,
+          "requires": {
+            "lodash": "^4.17.14"
+          }
+        }
+      }
+    },
+    "glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "globalthis": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3"
+      }
+    },
+    "globby": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+      "dev": true,
+      "requires": {
+        "array-union": "^1.0.1",
+        "glob": "^7.0.3",
+        "object-assign": "^4.0.1",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      }
+    },
+    "gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.3"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true
+    },
+    "has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true
+    },
+    "has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.1"
+      }
+    },
+    "has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "dev": true
+    },
+    "has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true
+    },
+    "has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
+    "icss-replace-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://npm.vida.science.roche.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
+      "dev": true
+    },
+    "icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://npm.vida.science.roche.com/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true
+    },
+    "immer": {
+      "version": "9.0.21",
+      "resolved": "https://npm.vida.science.roche.com/immer/-/immer-9.0.21.tgz",
+      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA=="
+    },
+    "import-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://npm.vida.science.roche.com/import-cwd/-/import-cwd-3.0.0.tgz",
+      "integrity": "sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==",
+      "dev": true,
+      "requires": {
+        "import-from": "^3.0.0"
+      }
+    },
+    "import-from": {
+      "version": "3.0.0",
+      "resolved": "https://npm.vida.science.roche.com/import-from/-/import-from-3.0.0.tgz",
+      "integrity": "sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==",
+      "dev": true,
+      "requires": {
+        "resolve-from": "^5.0.0"
+      }
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "internal-slot": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
+      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.2.0",
+        "has": "^1.0.3",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="
+    },
+    "is-array-buffer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
+      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.0",
+        "is-typed-array": "^1.1.10"
+      }
+    },
+    "is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "requires": {
+        "has-bigints": "^1.0.1"
+      }
+    },
+    "is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true
+    },
+    "is-core-module": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
+      "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+      "dev": true
+    },
+    "is-negative-zero": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true
+    },
+    "is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-reference": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+      "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "*"
+      }
+    },
+    "is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-shared-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
+    "is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
+    "is-typed-array": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
+      "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
+    "jake": {
+      "version": "10.8.7",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz",
+      "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==",
+      "dev": true,
+      "requires": {
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
+        "filelist": "^1.0.4",
+        "minimatch": "^3.1.2"
+      }
+    },
+    "json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true
+    },
+    "jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "jsonschema": {
+      "version": "1.4.1",
+      "resolved": "https://npm.vida.science.roche.com/jsonschema/-/jsonschema-1.4.1.tgz",
+      "integrity": "sha512-S6cATIPVv1z0IlxdN+zUk5EPjkGCdnhN4wVSBlvoUO1tOLJootbo9CquNJmbIh4yikWHiUedhRYrNPn1arpEmQ=="
+    },
+    "lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://npm.vida.science.roche.com/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true
+    },
+    "loader-utils": {
+      "version": "3.2.1",
+      "resolved": "https://npm.vida.science.roche.com/loader-utils/-/loader-utils-3.2.1.tgz",
+      "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==",
+      "dev": true
+    },
+    "locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "requires": {
+        "p-locate": "^4.1.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://npm.vida.science.roche.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
+      "dev": true
+    },
+    "lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://npm.vida.science.roche.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
+      "dev": true
+    },
+    "lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://npm.vida.science.roche.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
+      "dev": true
+    },
+    "magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "requires": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
+      "requires": {
+        "semver": "^6.0.0"
+      }
+    },
+    "mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://npm.vida.science.roche.com/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "dev": true
+    },
+    "minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://npm.vida.science.roche.com/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "dev": true
+    },
+    "node-releases": {
+      "version": "2.0.14",
+      "resolved": "https://npm.vida.science.roche.com/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
+      "dev": true
+    },
+    "normalize-url": {
+      "version": "6.1.0",
+      "resolved": "https://npm.vida.science.roche.com/normalize-url/-/normalize-url-6.1.0.tgz",
+      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
+      "dev": true
+    },
+    "nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://npm.vida.science.roche.com/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "requires": {
+        "boolbase": "^1.0.0"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true
+    },
+    "object-inspect": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "dev": true
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true
+    },
+    "object.assign": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://npm.vida.science.roche.com/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
+      "dev": true
+    },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^2.2.0"
+      }
+    },
+    "p-queue": {
+      "version": "6.6.2",
+      "resolved": "https://npm.vida.science.roche.com/p-queue/-/p-queue-6.6.2.tgz",
+      "integrity": "sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==",
+      "dev": true,
+      "requires": {
+        "eventemitter3": "^4.0.4",
+        "p-timeout": "^3.2.0"
+      }
+    },
+    "p-timeout": {
+      "version": "3.2.0",
+      "resolved": "https://npm.vida.science.roche.com/p-timeout/-/p-timeout-3.2.0.tgz",
+      "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
+      "dev": true,
+      "requires": {
+        "p-finally": "^1.0.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
+    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://npm.vida.science.roche.com/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
+    "picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true
+    },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true
+    },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
+      "dev": true
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+      "dev": true,
+      "requires": {
+        "pinkie": "^2.0.0"
+      }
+    },
+    "pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "requires": {
+        "find-up": "^4.0.0"
+      }
+    },
+    "postcss": {
+      "version": "8.4.33",
+      "resolved": "https://npm.vida.science.roche.com/postcss/-/postcss-8.4.33.tgz",
+      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
+      "dev": true,
+      "requires": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "postcss-calc": {
+      "version": "8.2.4",
+      "resolved": "https://npm.vida.science.roche.com/postcss-calc/-/postcss-calc-8.2.4.tgz",
+      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.9",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-colormin": {
+      "version": "5.3.1",
+      "resolved": "https://npm.vida.science.roche.com/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
+      "integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "colord": "^2.9.1",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-convert-values": {
+      "version": "5.1.3",
+      "resolved": "https://npm.vida.science.roche.com/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
+      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-discard-comments": {
+      "version": "5.1.2",
+      "resolved": "https://npm.vida.science.roche.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
+      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
+      "dev": true
+    },
+    "postcss-discard-duplicates": {
+      "version": "5.1.0",
+      "resolved": "https://npm.vida.science.roche.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
+      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
+      "dev": true
+    },
+    "postcss-discard-empty": {
+      "version": "5.1.1",
+      "resolved": "https://npm.vida.science.roche.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
+      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
+      "dev": true
+    },
+    "postcss-discard-overridden": {
+      "version": "5.1.0",
+      "resolved": "https://npm.vida.science.roche.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
+      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
+      "dev": true
+    },
+    "postcss-load-config": {
+      "version": "3.1.4",
+      "resolved": "https://npm.vida.science.roche.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "dev": true,
+      "requires": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^1.10.2"
+      }
+    },
+    "postcss-merge-longhand": {
+      "version": "5.1.7",
+      "resolved": "https://npm.vida.science.roche.com/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
+      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0",
+        "stylehacks": "^5.1.1"
+      }
+    },
+    "postcss-merge-rules": {
+      "version": "5.1.4",
+      "resolved": "https://npm.vida.science.roche.com/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
+      "integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^3.1.0",
+        "postcss-selector-parser": "^6.0.5"
+      }
+    },
+    "postcss-minify-font-values": {
+      "version": "5.1.0",
+      "resolved": "https://npm.vida.science.roche.com/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
+      "integrity": "sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-minify-gradients": {
+      "version": "5.1.1",
+      "resolved": "https://npm.vida.science.roche.com/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz",
+      "integrity": "sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==",
+      "dev": true,
+      "requires": {
+        "colord": "^2.9.1",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-minify-params": {
+      "version": "5.1.4",
+      "resolved": "https://npm.vida.science.roche.com/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
+      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-minify-selectors": {
+      "version": "5.2.1",
+      "resolved": "https://npm.vida.science.roche.com/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz",
+      "integrity": "sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.5"
+      }
+    },
+    "postcss-modules": {
+      "version": "4.3.1",
+      "resolved": "https://npm.vida.science.roche.com/postcss-modules/-/postcss-modules-4.3.1.tgz",
+      "integrity": "sha512-ItUhSUxBBdNamkT3KzIZwYNNRFKmkJrofvC2nWab3CPKhYBQ1f27XXh1PAPE27Psx58jeelPsxWB/+og+KEH0Q==",
+      "dev": true,
+      "requires": {
+        "generic-names": "^4.0.0",
+        "icss-replace-symbols": "^1.1.0",
+        "lodash.camelcase": "^4.3.0",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "string-hash": "^1.1.1"
+      }
+    },
+    "postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://npm.vida.science.roche.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "dev": true
+    },
+    "postcss-modules-local-by-default": {
+      "version": "4.0.4",
+      "resolved": "https://npm.vida.science.roche.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz",
+      "integrity": "sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "3.1.1",
+      "resolved": "https://npm.vida.science.roche.com/postcss-modules-scope/-/postcss-modules-scope-3.1.1.tgz",
+      "integrity": "sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://npm.vida.science.roche.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.0.0"
+      }
+    },
+    "postcss-normalize-charset": {
+      "version": "5.1.0",
+      "resolved": "https://npm.vida.science.roche.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
+      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
+      "dev": true
+    },
+    "postcss-normalize-display-values": {
+      "version": "5.1.0",
+      "resolved": "https://npm.vida.science.roche.com/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz",
+      "integrity": "sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-positions": {
+      "version": "5.1.1",
+      "resolved": "https://npm.vida.science.roche.com/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz",
+      "integrity": "sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-repeat-style": {
+      "version": "5.1.1",
+      "resolved": "https://npm.vida.science.roche.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz",
+      "integrity": "sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-string": {
+      "version": "5.1.0",
+      "resolved": "https://npm.vida.science.roche.com/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz",
+      "integrity": "sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-timing-functions": {
+      "version": "5.1.0",
+      "resolved": "https://npm.vida.science.roche.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz",
+      "integrity": "sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-unicode": {
+      "version": "5.1.1",
+      "resolved": "https://npm.vida.science.roche.com/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
+      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-url": {
+      "version": "5.1.0",
+      "resolved": "https://npm.vida.science.roche.com/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz",
+      "integrity": "sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==",
+      "dev": true,
+      "requires": {
+        "normalize-url": "^6.0.1",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-whitespace": {
+      "version": "5.1.1",
+      "resolved": "https://npm.vida.science.roche.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz",
+      "integrity": "sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-ordered-values": {
+      "version": "5.1.3",
+      "resolved": "https://npm.vida.science.roche.com/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz",
+      "integrity": "sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==",
+      "dev": true,
+      "requires": {
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-reduce-initial": {
+      "version": "5.1.2",
+      "resolved": "https://npm.vida.science.roche.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
+      "integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0"
+      }
+    },
+    "postcss-reduce-transforms": {
+      "version": "5.1.0",
+      "resolved": "https://npm.vida.science.roche.com/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz",
+      "integrity": "sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.15",
+      "resolved": "https://npm.vida.science.roche.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
+      "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "postcss-svgo": {
+      "version": "5.1.0",
+      "resolved": "https://npm.vida.science.roche.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
+      "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0",
+        "svgo": "^2.7.0"
+      }
+    },
+    "postcss-unique-selectors": {
+      "version": "5.1.1",
+      "resolved": "https://npm.vida.science.roche.com/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz",
+      "integrity": "sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.5"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://npm.vida.science.roche.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
+    "promise.series": {
+      "version": "0.2.0",
+      "resolved": "https://npm.vida.science.roche.com/promise.series/-/promise.series-0.2.0.tgz",
+      "integrity": "sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=",
+      "dev": true
+    },
+    "redux": {
+      "version": "4.2.1",
+      "resolved": "https://npm.vida.science.roche.com/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "redux-thunk": {
+      "version": "2.4.2",
+      "resolved": "https://npm.vida.science.roche.com/redux-thunk/-/redux-thunk-2.4.2.tgz",
+      "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q=="
+    },
+    "regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://npm.vida.science.roche.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
+    "regexp.prototype.flags": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
+      "integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "functions-have-names": "^1.2.3"
+      }
+    },
+    "reselect": {
+      "version": "4.1.8",
+      "resolved": "https://npm.vida.science.roche.com/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
+    },
+    "resolve": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
+      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
+      "dev": true,
+      "requires": {
+        "is-core-module": "^2.11.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      }
+    },
+    "resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://npm.vida.science.roche.com/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true
+    },
+    "rollup": {
+      "version": "1.32.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.32.1.tgz",
+      "integrity": "sha512-/2HA0Ec70TvQnXdzynFffkjA6XN+1e2pEv/uKS5Ulca40g2L7KuOE3riasHoNVHOsFD5KKZgDsMk1CP3Tw9s+A==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "*",
+        "@types/node": "*",
+        "acorn": "^7.1.0"
+      }
+    },
+    "rollup-plugin-postcss": {
+      "version": "4.0.2",
+      "resolved": "https://npm.vida.science.roche.com/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.2.tgz",
+      "integrity": "sha512-05EaY6zvZdmvPUDi3uCcAQoESDcYnv8ogJJQRp6V5kZ6J6P7uAVJlrTZcaaA20wTH527YTnKfkAoPxWI/jPp4w==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "concat-with-sourcemaps": "^1.1.0",
+        "cssnano": "^5.0.1",
+        "import-cwd": "^3.0.0",
+        "p-queue": "^6.6.2",
+        "pify": "^5.0.0",
+        "postcss-load-config": "^3.0.0",
+        "postcss-modules": "^4.0.0",
+        "promise.series": "^0.2.0",
+        "resolve": "^1.19.0",
+        "rollup-pluginutils": "^2.8.2",
+        "safe-identifier": "^0.4.2",
+        "style-inject": "^0.3.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "5.0.0",
+          "resolved": "https://npm.vida.science.roche.com/pify/-/pify-5.0.0.tgz",
+          "integrity": "sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==",
+          "dev": true
+        }
+      }
+    },
+    "rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://npm.vida.science.roche.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dev": true,
+      "requires": {
+        "estree-walker": "^0.6.1"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "0.6.1",
+          "resolved": "https://npm.vida.science.roche.com/estree-walker/-/estree-walker-0.6.1.tgz",
+          "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+          "dev": true
+        }
+      }
+    },
+    "safe-identifier": {
+      "version": "0.4.2",
+      "resolved": "https://npm.vida.science.roche.com/safe-identifier/-/safe-identifier-0.4.2.tgz",
+      "integrity": "sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w==",
+      "dev": true
+    },
+    "safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      }
+    },
+    "semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true
+    },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://npm.vida.science.roche.com/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true
+    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://npm.vida.science.roche.com/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true
+    },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
+    },
+    "stable": {
+      "version": "0.1.8",
+      "resolved": "https://npm.vida.science.roche.com/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "dev": true
+    },
+    "string-hash": {
+      "version": "1.1.3",
+      "resolved": "https://npm.vida.science.roche.com/string-hash/-/string-hash-1.1.3.tgz",
+      "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=",
+      "dev": true
+    },
+    "string.prototype.matchall": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",
+      "integrity": "sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
+        "get-intrinsic": "^1.1.3",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "regexp.prototype.flags": "^1.4.3",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "string.prototype.trim": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz",
+      "integrity": "sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
+      }
+    },
+    "string.prototype.trimend": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
+      "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
+      }
+    },
+    "string.prototype.trimstart": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
+      "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
+      }
+    },
+    "strip-outer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
+    "style-inject": {
+      "version": "0.3.0",
+      "resolved": "https://npm.vida.science.roche.com/style-inject/-/style-inject-0.3.0.tgz",
+      "integrity": "sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==",
+      "dev": true
+    },
+    "stylehacks": {
+      "version": "5.1.1",
+      "resolved": "https://npm.vida.science.roche.com/stylehacks/-/stylehacks-5.1.1.tgz",
+      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
+    "supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^4.0.0"
+      }
+    },
+    "supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true
+    },
+    "svgo": {
+      "version": "2.8.0",
+      "resolved": "https://npm.vida.science.roche.com/svgo/-/svgo-2.8.0.tgz",
+      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
+      "dev": true,
+      "requires": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^4.1.3",
+        "css-tree": "^1.1.3",
+        "csso": "^4.2.0",
+        "picocolors": "^1.0.0",
+        "stable": "^0.1.8"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://npm.vida.science.roche.com/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+          "dev": true
+        }
+      }
+    },
+    "tippy.js": {
+      "version": "6.0.0",
+      "resolved": "https://npm.vida.science.roche.com/tippy.js/-/tippy.js-6.0.0.tgz",
+      "integrity": "sha512-2NVc5A8cnO9N/Fk+tTU6KEm6m8ZXT1u3pOY756zZ5BE38rWDl/hVyoWhTfM79HW1nEJSpn/VujqAMMZGHsE9qQ==",
+      "requires": {
+        "@popperjs/core": "^2.0.6"
+      }
+    },
+    "to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://npm.vida.science.roche.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+      "dev": true
+    },
+    "trim-repeated": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.2"
+      }
+    },
+    "tslib": {
+      "version": "2.6.2",
+      "resolved": "https://npm.vida.science.roche.com/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
+    "twgl.js": {
+      "version": "4.24.0",
+      "resolved": "https://npm.vida.science.roche.com/twgl.js/-/twgl.js-4.24.0.tgz",
+      "integrity": "sha512-JGVTxuV9dqaBmajXyvuZIlhCHrTbIaoNjQvtdoLHyK74OtbmNwZUj6rfdp+pz9htitI/tVxiVQ2nuw+KmD29vg=="
+    },
+    "typed-array-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
+      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "is-typed-array": "^1.1.9"
+      }
+    },
+    "unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      }
+    },
+    "universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true
+    },
+    "update-browserslist-db": {
+      "version": "1.0.13",
+      "resolved": "https://npm.vida.science.roche.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+      "dev": true,
+      "requires": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://npm.vida.science.roche.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "requires": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      }
+    },
+    "which-typed-array": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
+      "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0",
+        "is-typed-array": "^1.1.10"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
+    },
+    "yaml": {
+      "version": "1.10.2",
+      "resolved": "https://npm.vida.science.roche.com/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true
+    }
+  }
+}
diff --git a/package.json b/package.json
index 6b53717..697cbd7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "epiviz.heatmap.gl",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "repository": "https://github.com/jkanche/epiviz.heatmap.gl",
   "homepage": "https://github.com/jkanche/epiviz.heatmap.gl",
   "author": {
@@ -20,10 +20,11 @@
   "main": "dist/ehgl.js",
   "module": "dist/index.js",
   "dependencies": {
-    "epiviz.gl": "^1.0.16",
     "d3-axis": "^3.0.0",
     "d3-scale": "^4.0.2",
-    "d3-selection": "^3.0.0"
+    "d3-selection": "^3.0.0",
+    "epiviz.gl": "^1.0.17",
+    "tippy.js": "6.0.0"
   },
   "peerDependencies": {
     "react": "^18.2.0"
@@ -33,11 +34,12 @@
     "@rollup/plugin-commonjs": "^11.0.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^7.0.0",
+    "@rollup/plugin-replace": "^5.0.5",
     "@surma/rollup-plugin-off-main-thread": "^2.2.3",
     "gh-pages": "^3.2.3",
+    "postcss": "^8.4.33",
     "rollup": "^1.29.0",
-    "docdash": "^1.2.0",
-    "jsdoc": "^3.6.10"
+    "rollup-plugin-postcss": "^4.0.2"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/rollup.config.js b/rollup.config.js
index 14c63bd..47cb650 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -3,6 +3,8 @@ import commonjs from "@rollup/plugin-commonjs";
 import pkg from "./package.json";
 import OMT from "@surma/rollup-plugin-off-main-thread";
 import json from "@rollup/plugin-json";
+import replace from "@rollup/plugin-replace";
+import postcss from "rollup-plugin-postcss";
 
 // import { babel } from "@rollup/plugin-babel";
 
@@ -16,7 +18,20 @@ export default [
       dir: "dist",
       format: "esm",
     },
-    plugins: [resolve(), commonjs(), OMT(), json()],
+    plugins: [
+      resolve(),
+      commonjs(),
+      OMT(),
+      json(),
+      replace({
+        "process.env.NODE_ENV": JSON.stringify("production"),
+        preventAssignment: true,
+      }),
+      postcss({
+        extract: "ehgl.css",
+        minimize: true,
+      }),
+    ],
   },
 
   // CommonJS (for Node) and ES module (for bundlers) build.
@@ -32,5 +47,15 @@ export default [
       { file: pkg.main, format: "cjs" },
       //   { file: pkg.module, format: "es" },
     ],
+    plugins: [
+      replace({
+        "process.env.NODE_ENV": JSON.stringify("production"),
+        preventAssignment: true,
+      }),
+      postcss({
+        extract: "ehgl.css",
+        minimize: true,
+      }),
+    ],
   },
 ];
diff --git a/src/BaseGL.js b/src/BaseGL.js
index 27a4efa..d745006 100644
--- a/src/BaseGL.js
+++ b/src/BaseGL.js
@@ -2,14 +2,7 @@ import WebGLVis from "epiviz.gl";
 import { select } from "d3-selection";
 import { scaleLinear } from "d3-scale";
 import { axisBottom, axisLeft, axisRight, axisTop } from "d3-axis";
-import {
-  isObject,
-  getMinMax,
-  parseMargins,
-  getTextWidth,
-  createTooltip,
-  removeTooltip,
-} from "./utils";
+import { isObject, getMinMax, parseMargins, getTextWidth } from "./utils";
 import {
   DEFAULT_COLUMN_LABEL_FONT_SIZE,
   DEFAULT_COLUMN_LABEL_SLINT_ANGLE,
@@ -23,7 +16,9 @@ import {
   INTENSITY_LEGEND_SIZE_IN_PX,
   GROUPING_LEGEND_SIZE_IN_PX,
   DEFAULT_MARGINS,
+  INTENSITY_LEGEND_IDENTIFIER,
 } from "./constants";
+import Tooltip from "./Tooltip";
 
 /**
  * Base class for all matrix like layout plots.
@@ -146,6 +141,8 @@ class BaseGL {
 
     this.highlightedIndices = [];
     this.indexStates = {};
+
+    this.tooltipInstance = new Tooltip();
   }
 
   /**
@@ -722,20 +719,20 @@ class BaseGL {
       const labelType = e.detail.labelObject.type;
       e.preventDefault();
 
-      createTooltip(
-        document.body,
+      this.tooltipInstance.updateTooltip(
         labelType === "row"
           ? this.input.xlabels[hoveredIndex]
           : this.input.ylabels[hoveredIndex],
-        e.detail.event.pageX,
-        e.detail.event.pageY
+        e.detail.event.clientX,
+        e.detail.event.clientY
       );
+
       this.labelHoveredCallback(e.detail);
     });
 
     this.plot.addEventListener("labelUnhovered", (e) => {
       e.preventDefault();
-      removeTooltip(document.body);
+      this.tooltipInstance.hideTooltip();
       this.labelUnhoveredCallback(e.detail);
     });
   }
@@ -750,7 +747,9 @@ class BaseGL {
     if (!this.legendDomElement || !this.intensityLegendData) return;
 
     //Clear the legend dom element
-    select(this.legendDomElement).select("svg").remove();
+    select(this.legendDomElement)
+      .select(`#${INTENSITY_LEGEND_IDENTIFIER}`)
+      .remove();
 
     const parsedMargins = parseMargins(this._spec.margins);
     const containerWidth =
@@ -760,7 +759,7 @@ class BaseGL {
       this.legendHeight ||
       this.elem.clientHeight - parsedMargins.top - parsedMargins.bottom;
 
-    const averageCharWidth = 6; // rough estimation of the width of a single character
+    const averageCharWidth = 8; // rough estimation of the width of a single character
     const legendWidth = containerWidth - 2 * averageCharWidth;
     const legendHeight = containerHeight - 2 * averageCharWidth;
 
@@ -778,9 +777,10 @@ class BaseGL {
 
     const svgContainer = select(this.legendDomElement)
       .append("svg")
+      .attr("id", INTENSITY_LEGEND_IDENTIFIER)
       .attr("width", svgWidth)
       .attr("height", svgHeight)
-      .attr("overflow", "visible");
+      .style("overflow", "visible");
 
     const defs = svgContainer.append("defs");
 
@@ -952,7 +952,6 @@ class BaseGL {
         const rectHeight = Math.abs(
           yScale(rectEndInView) - yScale(rectStartInView)
         );
-
         svgContainer
           .append("rect")
           .attr("x", 0)
@@ -960,12 +959,12 @@ class BaseGL {
           .attr("width", legendWidth)
           .attr("height", rectHeight)
           .style("fill", group.color)
-          .on("mouseover", (e) => {
+          .on("mousemove", (e) => {
             const text = group.label;
-            createTooltip(document.body, text, e.pageX, e.pageY);
+            this.tooltipInstance.updateTooltip(text, e.clientX, e.clientY);
           })
           .on("mouseout", (e) => {
-            removeTooltip(document.body);
+            this.tooltipInstance.hideTooltip();
           });
       }
     });
@@ -1049,12 +1048,13 @@ class BaseGL {
           .attr("width", rectWidth)
           .attr("height", legendHeight)
           .style("fill", group.color)
-          .on("mouseover", (e) => {
+          .on("mousemove", (e) => {
             const text = group.label;
-            createTooltip(document.body, text, e.pageX, e.pageY);
+
+            this.tooltipInstance.updateTooltip(text, e.clientX, e.clientY);
           })
           .on("mouseout", (e) => {
-            removeTooltip(document.body);
+            this.tooltipInstance.hideTooltip();
           });
       }
     });
diff --git a/src/Tooltip.js b/src/Tooltip.js
new file mode 100644
index 0000000..833d72c
--- /dev/null
+++ b/src/Tooltip.js
@@ -0,0 +1,48 @@
+import tippy from "tippy.js";
+import "tippy.js/dist/tippy.css";
+
+class Tooltip {
+  constructor() {
+    if (!Tooltip.instance) {
+      Tooltip.instance = this;
+      this.createSingletonTooltip();
+    }
+    return Tooltip.instance;
+  }
+
+  createSingletonTooltip() {
+    // Create an invisible, persistent tooltip
+    this.currentTooltip = tippy(document.body, {
+      content: "",
+      trigger: "manual",
+      arrow: true,
+      placement: "right",
+    });
+  }
+
+  updateTooltip(content, x, y, options = {}) {
+    this.currentTooltip.setContent(content);
+    this.currentTooltip.setProps({
+      getReferenceClientRect: () => ({
+        width: 0,
+        height: 0,
+        top: y,
+        left: x,
+        right: x,
+        bottom: y,
+      }),
+      ...options,
+    });
+    if (!this.currentTooltip.state.isVisible) {
+      this.currentTooltip.show();
+    }
+  }
+
+  hideTooltip() {
+    if (this.currentTooltip) {
+      this.currentTooltip.hide();
+    }
+  }
+}
+
+export default Tooltip;
diff --git a/src/constants.js b/src/constants.js
index 1750595..3e5f1c9 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -11,7 +11,7 @@ export const INTENSITY_LEGEND_GRADIENT_SIZE_IN_PX = 20;
 export const INTENSITY_LEGEND_SIZE_IN_PX =
   INTENSITY_LEGEND_GRADIENT_SIZE_IN_PX + INTENSITY_LEGEND_LABEL_SIZE_IN_PX;
 export const GROUPING_LEGEND_SIZE_IN_PX = 20;
-export const TOOLTIP_IDENTIFIER = "ehgl-tooltip";
+export const INTENSITY_LEGEND_IDENTIFIER = "ehgl-intensity-legend";
 
 export const DEFAULT_SIZE_LEGEND_SVG_PADDING = 10;
 export const DEFAULT_SIZE_LEGEND_CIRCLE_GAP = 10;
diff --git a/src/index.js b/src/index.js
index ba179f8..07166ca 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
 import DotplotGL from "./DotplotGL";
 import RectplotGL from "./RectplotGL";
 import TickplotGL from "./TickplotGL";
+import Tooltip from "./Tooltip";
 
-export { DotplotGL, RectplotGL, TickplotGL };
+export { DotplotGL, RectplotGL, TickplotGL, Tooltip };
diff --git a/src/utils.js b/src/utils.js
index 4ecb71e..df7af3a 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,8 +1,5 @@
 import { select } from "d3-selection";
-import {
-  DEFAULT_MIN_RADIUS_FOR_DOTPLOT,
-  TOOLTIP_IDENTIFIER,
-} from "./constants";
+import { DEFAULT_MIN_RADIUS_FOR_DOTPLOT } from "./constants";
 
 /**
  * Check if a given variable is an object and not an array.
@@ -74,46 +71,6 @@ export const getTextWidth = (text, fontSize = "16px") => {
   return width;
 };
 
-/**
- * Create a tooltip on a specified container at the given position.
- *
- * @param {HTMLElement} container - The container element.
- * @param {string} text - The text for the tooltip.
- * @param {number} posX - The x-coordinate for the tooltip.
- * @param {number} posY - The y-coordinate for the tooltip.
- */
-export const createTooltip = (container, text, posX, posY) => {
-  let tooltip = select(container)
-    .append("div")
-    .attr("id", TOOLTIP_IDENTIFIER)
-    .style("position", "absolute")
-    .style("background", "#f9f9f9")
-    .style("padding", "8px")
-    .style("border", "1px solid #ccc")
-    .style("border-radius", "6px")
-    .style("z-index", "1000")
-    .style("visibility", "hidden");
-
-  tooltip
-    .style("visibility", "visible")
-    .text(text)
-    .style("left", posX + 10 + "px")
-    .style("top", posY - 10 + "px");
-};
-
-/**
- * Remove a tooltip from the specified container.
- *
- * @param {HTMLElement} container - The container from which to remove the tooltip.
- */
-export const removeTooltip = (container) => {
-  const tooltip = select(container).select(`#${TOOLTIP_IDENTIFIER}`);
-
-  if (tooltip) {
-    tooltip.remove();
-  }
-};
-
 export const getMaxRadiusForDotplot = (xlen, ylen, padding) => {
   return Math.max(
     Math.min(198 / (xlen + 1), 198 / (ylen + 1)) - padding,