npm - @nebula.js/sn-org-chart - Versions diffs - 0.13.0 → 0.16.0 - Mend

@nebula.js/sn-org-chart 0.13.0 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/assets/sn-org-chart.qext +1 -1
package/dist/sn-org-chart.esm.js +1040 -1434
package/dist/sn-org-chart.js +3 -3
package/dist/sn-org-chart.qext +1 -1
package/package.json +28 -25

package/dist/sn-org-chart.esm.js CHANGED Viewed

@@ -1,185 +1,36 @@
 /*
-* @nebula.js/sn-org-chart v0.13.0
-* Copyright (c) 2020 QlikTech International AB
+* @nebula.js/sn-org-chart v0.16.0
+* Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
 import { useElement, onTakeSnapshot, useImperativeHandle, useState, useSelections, useLayout, useEffect, useAction, useStaleLayout, useModel, useTheme, useOptions, useRect, useConstraints, useTranslator, usePromise } from '@nebula.js/stardust';
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-  return _typeof(obj);
-}
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-        args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-      _next(undefined);
-    });
-  };
-}
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-  return target;
-}
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-}
-function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-  return _arr;
-}
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
+var DEFAULTS = {
+  FONT_COLOR_TYPE: 'auto',
+  FONT_COLOR_DARK: {
+    index: -1,
+    color: '#484848'
+  },
+  FONT_COLOR_LIGHT: {
+    index: -1,
+    color: '#e6e6e6'
+  },
+  BACKGROUND_COLOR_TYPE: 'colorPicker',
+  BACKGROUND_COLOR: {
+    index: -1,
+    color: '#ffffff'
+  },
+  BORDER_COLOR_TYPE: 'auto',
+  BORDER_COLOR: {
+    index: -1,
+    color: '#737373'
+  },
+  BORDER_FULL: true,
+  BORDER_TOP: true
+};
-var properties = {
+const properties = {
   qHyperCubeDef: {
     qDimensions: [],
     qMeasures: [],
@@ -225,82 +76,21 @@ var properties = {
    * @type {object}
    */
   style: {
-    /**
-     * @type {object}
-     */
     fontColor: {
-      /**
-       * @type {'auto'|'colorPicker'|'byExpression'}
-       */
-      colorType: 'auto',
-      /**
-       * @type {object}
-       */
-      color: {
-        index: -1,
-        color: '#484848'
-      },
-      /**
-       * @type {string}
-       */
+      colorType: DEFAULTS.FONT_COLOR_TYPE,
+      color: DEFAULTS.FONT_COLOR_DARK,
       colorExpression: ''
     },
-    /**
-     * @type {object}
-     */
     backgroundColor: {
-      /**
-       * @type {'auto'|'colorPicker'|'byExpression'}
-       */
-      colorType: 'colorPicker',
-      /**
-       * @type {object}
-       */
-      color: {
-        index: -1,
-        color: '#ffffff'
-      },
-      /**
-       * @type {string}
-       */
+      colorType: DEFAULTS.BACKGROUND_COLOR_TYPE,
+      color: DEFAULTS.BACKGROUND_COLOR,
       colorExpression: ''
     },
-    /**
-     * @type {object}
-     */
     border: {
-      /**
-       * @type {boolean}
-       */
-      top: true,
-      /**
-       * @type {boolean}
-       */
-      fullBorder: true,
-      /**
-       * @type {string}
-       */
-      colorType: 'auto',
-      /**
-       * @type {object}
-       */
-      color: {
-        index: -1,
-        color: '#737373'
-      },
-      /**
-       * @type {string}
-       */
+      top: DEFAULTS.BORDER_TOP,
+      fullBorder: DEFAULTS.BORDER_FULL,
+      colorType: DEFAULTS.BORDER_COLOR_TYPE,
+      color: DEFAULTS.BORDER_COLOR,
       colorExpression: ''
     }
   }
@@ -321,14 +111,14 @@ var data = {
 };
 function getValue(dataContainer, reference, defaultValue) {
-  var steps = reference.split('.');
-  var i;
+  const steps = reference.split('.');
+  let i;
   if (dataContainer === undefined) {
     return defaultValue;
   }
-  var currentValue = dataContainer;
+  let currentValue = dataContainer;
   for (i = 0; i < steps.length; ++i) {
     if (typeof currentValue[steps[i]] === 'undefined') {
@@ -342,10 +132,10 @@ function getValue(dataContainer, reference, defaultValue) {
 }
 var propertyResolver = {
-  getValue: getValue
+  getValue
 };
-var colorOptions = [{
+const colorOptions = [{
   value: 'auto',
   translation: 'Common.Auto'
 }, {
@@ -355,7 +145,7 @@ var colorOptions = [{
   value: 'byExpression',
   translation: 'properties.colorMode.byExpression'
 }];
-var navigationOptions = [{
+const navigationOptions = [{
   value: 'free',
   translation: 'Object.OrgChart.FreeMode'
 }, {
@@ -363,9 +153,7 @@ var navigationOptions = [{
   translation: 'Object.OrgChart.ExpandAll'
 }];
-var bordersActive = function bordersActive(data) {
-  return propertyResolver.getValue(data, 'style.border.top') || propertyResolver.getValue(data, 'style.border.fullBorder');
-};
+const bordersActive = data => propertyResolver.getValue(data, 'style.border.top') || propertyResolver.getValue(data, 'style.border.fullBorder');
 var extDef = {
   definition: {
@@ -387,8 +175,8 @@ var extDef = {
               attributes: {
                 component: 'attribute-expression-reference',
                 defaultValue: [],
-                show: function show(dim, handler) {
-                  var dims = handler.getDimensions();
+                show: (dim, handler) => {
+                  const dims = handler.getDimensions();
                   return dims[0] === dim;
                 },
                 ref: 'qAttributeExpressions',
@@ -423,8 +211,8 @@ var extDef = {
                 }]
               },
               desc: {
-                show: function show(dim, handler) {
-                  var dims = handler.getDimensions();
+                show: (dim, handler) => {
+                  const dims = handler.getDimensions();
                   return dims[0] === dim;
                 },
                 component: 'text',
@@ -478,15 +266,15 @@ var extDef = {
                     type: 'string',
                     translation: 'Object.OrgChart.NavigationMode',
                     component: 'dropdown',
+                    defaultValue: 'free',
                     options: navigationOptions
                   },
                   resizeOnExpand: {
                     ref: 'resizeOnExpand',
                     type: 'boolean',
+                    defaultValue: false,
                     translation: 'Object.OrgChart.resizeOnExpand',
-                    show: function show(data) {
-                      return propertyResolver.getValue(data, 'navigationMode') !== 'expandAll';
-                    }
+                    show: data => propertyResolver.getValue(data, 'navigationMode') !== 'expandAll'
                   }
                 }
               },
@@ -498,6 +286,7 @@ var extDef = {
                     type: 'string',
                     translation: 'Object.OrgChart.BackgroundColor',
                     component: 'dropdown',
+                    defaultValue: DEFAULTS.BACKGROUND_COLOR_TYPE,
                     options: colorOptions
                   },
                   colorPicker: {
@@ -506,9 +295,8 @@ var extDef = {
                     ref: 'style.backgroundColor.color',
                     translation: 'properties.color',
                     dualOutput: true,
-                    show: function show(data) {
-                      return propertyResolver.getValue(data, 'style.backgroundColor.colorType') === 'colorPicker';
-                    }
+                    defaultValue: DEFAULTS.BACKGROUND_COLOR,
+                    show: data => propertyResolver.getValue(data, 'style.backgroundColor.colorType') === 'colorPicker'
                   },
                   colorExpression: {
                     component: 'string',
@@ -516,9 +304,8 @@ var extDef = {
                     ref: 'style.backgroundColor.colorExpression',
                     translation: 'Common.Expression',
                     expression: 'optional',
-                    show: function show(data) {
-                      return propertyResolver.getValue(data, 'style.backgroundColor.colorType') === 'byExpression';
-                    }
+                    defaultValue: '',
+                    show: data => propertyResolver.getValue(data, 'style.backgroundColor.colorType') === 'byExpression'
                   }
                 }
               },
@@ -530,6 +317,7 @@ var extDef = {
                     type: 'string',
                     translation: 'Object.OrgChart.FontColor',
                     component: 'dropdown',
+                    defaultValue: DEFAULTS.FONT_COLOR_TYPE,
                     options: colorOptions
                   },
                   colorPicker: {
@@ -538,9 +326,8 @@ var extDef = {
                     ref: 'style.fontColor.color',
                     translation: 'properties.color',
                     dualOutput: true,
-                    show: function show(data) {
-                      return propertyResolver.getValue(data, 'style.fontColor.colorType') === 'colorPicker';
-                    }
+                    defaultValue: DEFAULTS.FONT_COLOR_DARK,
+                    show: data => propertyResolver.getValue(data, 'style.fontColor.colorType') === 'colorPicker'
                   },
                   colorExpression: {
                     component: 'string',
@@ -548,9 +335,8 @@ var extDef = {
                     ref: 'style.fontColor.colorExpression',
                     translation: 'Common.Expression',
                     expression: 'optional',
-                    show: function show(data) {
-                      return propertyResolver.getValue(data, 'style.fontColor.colorType') === 'byExpression';
-                    }
+                    defaultValue: '',
+                    show: data => propertyResolver.getValue(data, 'style.fontColor.colorType') === 'byExpression'
                   }
                 }
               },
@@ -566,24 +352,22 @@ var extDef = {
                     type: 'boolean',
                     ref: 'style.border.top',
                     translation: 'Object.OrgChart.TopBar',
-                    defaultValue: true
+                    defaultValue: DEFAULTS.BORDER_TOP
                   },
                   fullBorder: {
                     type: 'boolean',
                     ref: 'style.border.fullBorder',
                     translation: 'properties.border',
-                    defaultValue: false
+                    defaultValue: DEFAULTS.BORDER_FULL
                   },
                   colorType: {
                     component: 'dropdown',
                     type: 'string',
                     ref: 'style.border.colorType',
                     translation: 'properties.border.color',
-                    defaultValue: 'auto',
+                    defaultValue: DEFAULTS.BORDER_COLOR_TYPE,
                     options: colorOptions,
-                    show: function show(data) {
-                      return bordersActive(data);
-                    }
+                    show: data => bordersActive(data)
                   },
                   colorPicker: {
                     component: 'color-picker',
@@ -591,9 +375,8 @@ var extDef = {
                     ref: 'style.border.color',
                     translation: 'properties.color',
                     dualOutput: true,
-                    show: function show(data) {
-                      return bordersActive(data) && propertyResolver.getValue(data, 'style.border.colorType') === 'colorPicker';
-                    }
+                    defaultValue: DEFAULTS.BORDER_COLOR,
+                    show: data => bordersActive(data) && propertyResolver.getValue(data, 'style.border.colorType') === 'colorPicker'
                   },
                   colorExpression: {
                     component: 'string',
@@ -601,9 +384,8 @@ var extDef = {
                     ref: 'style.border.colorExpression',
                     translation: 'Common.Expression',
                     expression: 'optional',
-                    show: function show(data) {
-                      return bordersActive(data) && propertyResolver.getValue(data, 'style.border.colorType') === 'byExpression';
-                    }
+                    defaultValue: '',
+                    show: data => bordersActive(data) && propertyResolver.getValue(data, 'style.border.colorType') === 'byExpression'
                   }
                 }
               }
@@ -621,20 +403,20 @@ var extDef = {
   }
 };
-function ext()
-/* env */
-{
+function
+  /* env */
+ext() {
   return extDef;
 }
-function ascending (a, b) {
+function ascending$1 (a, b) {
   return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
 }
 function bisector (compare) {
   if (compare.length === 1) compare = ascendingComparator(compare);
   return {
-    left: function left(a, x, lo, hi) {
+    left: function (a, x, lo, hi) {
       if (lo == null) lo = 0;
       if (hi == null) hi = a.length;
@@ -645,7 +427,7 @@ function bisector (compare) {
       return lo;
     },
-    right: function right(a, x, lo, hi) {
+    right: function (a, x, lo, hi) {
       if (lo == null) lo = 0;
       if (hi == null) hi = a.length;
@@ -661,14 +443,14 @@ function bisector (compare) {
 function ascendingComparator(f) {
   return function (d, x) {
-    return ascending(f(d), x);
+    return ascending$1(f(d), x);
   };
 }
-var ascendingBisect = bisector(ascending);
+bisector(ascending$1);
 var noop = {
-  value: function value() {}
+  value: function () {}
 };
 function dispatch() {
@@ -684,7 +466,7 @@ function Dispatch(_) {
   this._ = _;
 }
-function parseTypenames(typenames, types) {
+function parseTypenames$1(typenames, types) {
   return typenames.trim().split(/^|\s+/).map(function (t) {
     var name = "",
         i = t.indexOf(".");
@@ -699,17 +481,15 @@ function parseTypenames(typenames, types) {
 Dispatch.prototype = dispatch.prototype = {
   constructor: Dispatch,
-  on: function on(typename, callback) {
+  on: function (typename, callback) {
     var _ = this._,
-        T = parseTypenames(typename + "", _),
+        T = parseTypenames$1(typename + "", _),
         t,
         i = -1,
         n = T.length; // If no callback was specified, return the callback of the given type and name.
     if (arguments.length < 2) {
-      while (++i < n) {
-        if ((t = (typename = T[i]).type) && (t = get(_[t], typename.name))) return t;
-      }
+      while (++i < n) if ((t = (typename = T[i]).type) && (t = get$1(_[t], typename.name))) return t;
       return;
     } // If a type was specified, set the callback for the given type and name.
@@ -719,43 +499,33 @@ Dispatch.prototype = dispatch.prototype = {
     if (callback != null && typeof callback !== "function") throw new Error("invalid callback: " + callback);
     while (++i < n) {
-      if (t = (typename = T[i]).type) _[t] = set(_[t], typename.name, callback);else if (callback == null) for (t in _) {
-        _[t] = set(_[t], typename.name, null);
-      }
+      if (t = (typename = T[i]).type) _[t] = set$1(_[t], typename.name, callback);else if (callback == null) for (t in _) _[t] = set$1(_[t], typename.name, null);
     }
     return this;
   },
-  copy: function copy() {
+  copy: function () {
     var copy = {},
         _ = this._;
-    for (var t in _) {
-      copy[t] = _[t].slice();
-    }
+    for (var t in _) copy[t] = _[t].slice();
     return new Dispatch(copy);
   },
-  call: function call(type, that) {
-    if ((n = arguments.length - 2) > 0) for (var args = new Array(n), i = 0, n, t; i < n; ++i) {
-      args[i] = arguments[i + 2];
-    }
+  call: function (type, that) {
+    if ((n = arguments.length - 2) > 0) for (var args = new Array(n), i = 0, n, t; i < n; ++i) args[i] = arguments[i + 2];
     if (!this._.hasOwnProperty(type)) throw new Error("unknown type: " + type);
-    for (t = this._[type], i = 0, n = t.length; i < n; ++i) {
-      t[i].value.apply(that, args);
-    }
+    for (t = this._[type], i = 0, n = t.length; i < n; ++i) t[i].value.apply(that, args);
   },
-  apply: function apply(type, that, args) {
+  apply: function (type, that, args) {
     if (!this._.hasOwnProperty(type)) throw new Error("unknown type: " + type);
-    for (var t = this._[type], i = 0, n = t.length; i < n; ++i) {
-      t[i].value.apply(that, args);
-    }
+    for (var t = this._[type], i = 0, n = t.length; i < n; ++i) t[i].value.apply(that, args);
   }
 };
-function get(type, name) {
+function get$1(type, name) {
   for (var i = 0, n = type.length, c; i < n; ++i) {
     if ((c = type[i]).name === name) {
       return c.value;
@@ -763,7 +533,7 @@ function get(type, name) {
   }
 }
-function set(type, name, callback) {
+function set$1(type, name, callback) {
   for (var i = 0, n = type.length; i < n; ++i) {
     if (type[i].name === name) {
       type[i] = noop, type = type.slice(0, i).concat(type.slice(i + 1));
@@ -836,7 +606,7 @@ function selection_select (select) {
     }
   }
-  return new Selection(subgroups, this._parents);
+  return new Selection$1(subgroups, this._parents);
 }
 function empty() {
@@ -861,7 +631,7 @@ function selection_selectAll (select) {
     }
   }
-  return new Selection(subgroups, parents);
+  return new Selection$1(subgroups, parents);
 }
 function matcher (selector) {
@@ -881,7 +651,7 @@ function selection_filter (match) {
     }
   }
-  return new Selection(subgroups, this._parents);
+  return new Selection$1(subgroups, this._parents);
 }
 function sparse (update) {
@@ -889,7 +659,7 @@ function sparse (update) {
 }
 function selection_enter () {
-  return new Selection(this._enter || this._groups.map(sparse), this._parents);
+  return new Selection$1(this._enter || this._groups.map(sparse), this._parents);
 }
 function EnterNode(parent, datum) {
   this.ownerDocument = parent.ownerDocument;
@@ -900,21 +670,21 @@ function EnterNode(parent, datum) {
 }
 EnterNode.prototype = {
   constructor: EnterNode,
-  appendChild: function appendChild(child) {
+  appendChild: function (child) {
     return this._parent.insertBefore(child, this._next);
   },
-  insertBefore: function insertBefore(child, next) {
+  insertBefore: function (child, next) {
     return this._parent.insertBefore(child, next);
   },
-  querySelector: function querySelector(selector) {
+  querySelector: function (selector) {
     return this._parent.querySelector(selector);
   },
-  querySelectorAll: function querySelectorAll(selector) {
+  querySelectorAll: function (selector) {
     return this._parent.querySelectorAll(selector);
   }
 };
-function constant (x) {
+function constant$2 (x) {
   return function () {
     return x;
   };
@@ -1004,7 +774,7 @@ function selection_data (value, key) {
   var bind = key ? bindKey : bindIndex,
       parents = this._parents,
       groups = this._groups;
-  if (typeof value !== "function") value = constant(value);
+  if (typeof value !== "function") value = constant$2(value);
   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],
@@ -1023,22 +793,21 @@ function selection_data (value, key) {
       if (previous = enterGroup[i0]) {
         if (i0 >= i1) i1 = i0 + 1;
-        while (!(next = updateGroup[i1]) && ++i1 < dataLength) {
-        }
+        while (!(next = updateGroup[i1]) && ++i1 < dataLength);
         previous._next = next || null;
       }
     }
   }
-  update = new Selection(update, parents);
+  update = new Selection$1(update, parents);
   update._enter = enter;
   update._exit = exit;
   return update;
 }
 function selection_exit () {
-  return new Selection(this._exit || this._groups.map(sparse), this._parents);
+  return new Selection$1(this._exit || this._groups.map(sparse), this._parents);
 }
 function selection_join (onenter, onupdate, onexit) {
@@ -1064,7 +833,7 @@ function selection_merge (selection) {
     merges[j] = groups0[j];
   }
-  return new Selection(merges, this._parents);
+  return new Selection$1(merges, this._parents);
 }
 function selection_order () {
@@ -1081,7 +850,7 @@ function selection_order () {
 }
 function selection_sort (compare) {
-  if (!compare) compare = ascending$1;
+  if (!compare) compare = ascending;
   function compareNode(a, b) {
     return a && b ? compare(a.__data__, b.__data__) : !a - !b;
@@ -1097,10 +866,10 @@ function selection_sort (compare) {
     sortgroup.sort(compareNode);
   }
-  return new Selection(sortgroups, this._parents).order();
+  return new Selection$1(sortgroups, this._parents).order();
 }
-function ascending$1(a, b) {
+function ascending(a, b) {
   return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
 }
@@ -1153,38 +922,38 @@ function selection_each (callback) {
   return this;
 }
-function attrRemove(name) {
+function attrRemove$1(name) {
   return function () {
     this.removeAttribute(name);
   };
 }
-function attrRemoveNS(fullname) {
+function attrRemoveNS$1(fullname) {
   return function () {
     this.removeAttributeNS(fullname.space, fullname.local);
   };
 }
-function attrConstant(name, value) {
+function attrConstant$1(name, value) {
   return function () {
     this.setAttribute(name, value);
   };
 }
-function attrConstantNS(fullname, value) {
+function attrConstantNS$1(fullname, value) {
   return function () {
     this.setAttributeNS(fullname.space, fullname.local, value);
   };
 }
-function attrFunction(name, value) {
+function attrFunction$1(name, value) {
   return function () {
     var v = value.apply(this, arguments);
     if (v == null) this.removeAttribute(name);else this.setAttribute(name, v);
   };
 }
-function attrFunctionNS(fullname, value) {
+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);
@@ -1199,28 +968,28 @@ function selection_attr (name, value) {
     return fullname.local ? node.getAttributeNS(fullname.space, fullname.local) : node.getAttribute(fullname);
   }
-  return this.each((value == null ? fullname.local ? attrRemoveNS : attrRemove : typeof value === "function" ? fullname.local ? attrFunctionNS : attrFunction : fullname.local ? attrConstantNS : attrConstant)(fullname, value));
+  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));
 }
 function defaultView (node) {
-  return node.ownerDocument && node.ownerDocument.defaultView || // node is a Node
-  node.document && node // node is a Window
+  return node.ownerDocument && node.ownerDocument.defaultView // node is a Node
+  || node.document && node // node is a Window
   || node.defaultView; // node is a Document
 }
-function styleRemove(name) {
+function styleRemove$1(name) {
   return function () {
     this.style.removeProperty(name);
   };
 }
-function styleConstant(name, value, priority) {
+function styleConstant$1(name, value, priority) {
   return function () {
     this.style.setProperty(name, value, priority);
   };
 }
-function styleFunction(name, value, priority) {
+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);
@@ -1228,7 +997,7 @@ function styleFunction(name, value, priority) {
 }
 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);
+  return arguments.length > 1 ? this.each((value == null ? styleRemove$1 : typeof value === "function" ? styleFunction$1 : styleConstant$1)(name, value, priority == null ? "" : priority)) : styleValue(this.node(), name);
 }
 function styleValue(node, name) {
   return node.style.getPropertyValue(name) || defaultView(node).getComputedStyle(node, null).getPropertyValue(name);
@@ -1271,7 +1040,7 @@ function ClassList(node) {
 }
 ClassList.prototype = {
-  add: function add(name) {
+  add: function (name) {
     var i = this._names.indexOf(name);
     if (i < 0) {
@@ -1280,7 +1049,7 @@ ClassList.prototype = {
       this._node.setAttribute("class", this._names.join(" "));
     }
   },
-  remove: function remove(name) {
+  remove: function (name) {
     var i = this._names.indexOf(name);
     if (i >= 0) {
@@ -1289,7 +1058,7 @@ ClassList.prototype = {
       this._node.setAttribute("class", this._names.join(" "));
     }
   },
-  contains: function contains(name) {
+  contains: function (name) {
     return this._names.indexOf(name) >= 0;
   }
 };
@@ -1299,9 +1068,7 @@ function classedAdd(node, names) {
       i = -1,
       n = names.length;
-  while (++i < n) {
-    list.add(names[i]);
-  }
+  while (++i < n) list.add(names[i]);
 }
 function classedRemove(node, names) {
@@ -1309,9 +1076,7 @@ function classedRemove(node, names) {
       i = -1,
       n = names.length;
-  while (++i < n) {
-    list.remove(names[i]);
-  }
+  while (++i < n) list.remove(names[i]);
 }
 function classedTrue(names) {
@@ -1340,9 +1105,7 @@ function selection_classed (name, value) {
         i = -1,
         n = names.length;
-    while (++i < n) {
-      if (!list.contains(names[i])) return false;
-    }
+    while (++i < n) if (!list.contains(names[i])) return false;
     return true;
   }
@@ -1354,13 +1117,13 @@ function textRemove() {
   this.textContent = "";
 }
-function textConstant(value) {
+function textConstant$1(value) {
   return function () {
     this.textContent = value;
   };
 }
-function textFunction(value) {
+function textFunction$1(value) {
   return function () {
     var v = value.apply(this, arguments);
     this.textContent = v == null ? "" : v;
@@ -1368,7 +1131,7 @@ function textFunction(value) {
 }
 function selection_text (value) {
-  return arguments.length ? this.each(value == null ? textRemove : (typeof value === "function" ? textFunction : textConstant)(value)) : this.node().textContent;
+  return arguments.length ? this.each(value == null ? textRemove : (typeof value === "function" ? textFunction$1 : textConstant$1)(value)) : this.node().textContent;
 }
 function htmlRemove() {
@@ -1495,7 +1258,7 @@ function contextListener(listener, index, group) {
   };
 }
-function parseTypenames$1(typenames) {
+function parseTypenames(typenames) {
   return typenames.trim().split(/^|\s+/).map(function (t) {
     var name = "",
         i = t.indexOf(".");
@@ -1551,7 +1314,7 @@ function onAdd(typename, value, capture) {
 }
 function selection_on (typename, value, capture) {
-  var typenames = parseTypenames$1(typename + ""),
+  var typenames = parseTypenames(typename + ""),
       i,
       n = typenames.length,
       t;
@@ -1572,9 +1335,7 @@ function selection_on (typename, value, capture) {
   on = value ? onAdd : onRemove;
   if (capture == null) capture = false;
-  for (i = 0; i < n; ++i) {
-    this.each(on(typenames[i], value, capture));
-  }
+  for (i = 0; i < n; ++i) this.each(on(typenames[i], value, capture));
   return this;
 }
@@ -1621,17 +1382,17 @@ function selection_dispatch (type, params) {
 }
 var root = [null];
-function Selection(groups, parents) {
+function Selection$1(groups, parents) {
   this._groups = groups;
   this._parents = parents;
 }
 function selection() {
-  return new Selection([[document.documentElement]], root);
+  return new Selection$1([[document.documentElement]], root);
 }
-Selection.prototype = selection.prototype = {
-  constructor: Selection,
+Selection$1.prototype = selection.prototype = {
+  constructor: Selection$1,
   select: selection_select,
   selectAll: selection_selectAll,
   filter: selection_filter,
@@ -1666,16 +1427,14 @@ Selection.prototype = selection.prototype = {
 };
 function select (selector) {
-  return typeof selector === "string" ? new Selection([[document.querySelector(selector)]], [document.documentElement]) : new Selection([[selector]], root);
+  return typeof selector === "string" ? new Selection$1([[document.querySelector(selector)]], [document.documentElement]) : new Selection$1([[selector]], root);
 }
 function sourceEvent () {
   var current = event$1,
       source;
-  while (source = current.sourceEvent) {
-    current = source;
-  }
+  while (source = current.sourceEvent) current = source;
   return current;
 }
@@ -1712,17 +1471,17 @@ function touch (node, touches, identifier) {
   return null;
 }
-function noevent () {
+function noevent$1 () {
   event$1.preventDefault();
   event$1.stopImmediatePropagation();
 }
 function dragDisable (view) {
   var root = view.document.documentElement,
-      selection = select(view).on("dragstart.drag", noevent, true);
+      selection = select(view).on("dragstart.drag", noevent$1, true);
   if ("onselectstart" in root) {
-    selection.on("selectstart.drag", noevent, true);
+    selection.on("selectstart.drag", noevent$1, true);
   } else {
     root.__noselect = root.style.MozUserSelect;
     root.style.MozUserSelect = "none";
@@ -1733,7 +1492,7 @@ function yesdrag(view, noclick) {
       selection = select(view).on("dragstart.drag", null);
   if (noclick) {
-    selection.on("click.drag", noevent, true);
+    selection.on("click.drag", noevent$1, true);
     setTimeout(function () {
       selection.on("click.drag", null);
     }, 0);
@@ -1754,17 +1513,14 @@ function define (constructor, factory, prototype) {
 function extend(parent, definition) {
   var prototype = Object.create(parent.prototype);
-  for (var key in definition) {
-    prototype[key] = definition[key];
-  }
+  for (var key in definition) prototype[key] = definition[key];
   return prototype;
 }
 function Color() {}
-var _darker = 0.7;
-var _brighter = 1 / _darker;
+var darker = 0.7;
+var brighter = 1 / darker;
 var reI = "\\s*([+-]?\\d+)\\s*",
     reN = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",
     reP = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
@@ -1926,10 +1682,10 @@ var named = {
   yellowgreen: 0x9acd32
 };
 define(Color, color, {
-  copy: function copy(channels) {
+  copy: function (channels) {
     return Object.assign(new this.constructor(), this, channels);
   },
-  displayable: function displayable() {
+  displayable: function () {
     return this.rgb().displayable();
   },
   hex: color_formatHex,
@@ -1995,18 +1751,18 @@ function Rgb(r, g, b, opacity) {
   this.opacity = +opacity;
 }
 define(Rgb, rgb, extend(Color, {
-  brighter: function brighter(k) {
-    k = k == null ? _brighter : Math.pow(_brighter, k);
+  brighter: function (k) {
+    k = k == null ? brighter : Math.pow(brighter, k);
     return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
   },
-  darker: function darker(k) {
-    k = k == null ? _darker : Math.pow(_darker, k);
+  darker: function (k) {
+    k = k == null ? darker : Math.pow(darker, k);
     return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
   },
-  rgb: function rgb() {
+  rgb: function () {
     return this;
   },
-  displayable: function displayable() {
+  displayable: function () {
     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,
@@ -2073,15 +1829,15 @@ function Hsl(h, s, l, opacity) {
 }
 define(Hsl, hsl, extend(Color, {
-  brighter: function brighter(k) {
-    k = k == null ? _brighter : Math.pow(_brighter, k);
+  brighter: function (k) {
+    k = k == null ? brighter : Math.pow(brighter, k);
     return new Hsl(this.h, this.s, this.l * k, this.opacity);
   },
-  darker: function darker(k) {
-    k = k == null ? _darker : Math.pow(_darker, k);
+  darker: function (k) {
+    k = k == null ? darker : Math.pow(darker, k);
     return new Hsl(this.h, this.s, this.l * k, this.opacity);
   },
-  rgb: function rgb() {
+  rgb: function () {
     var h = this.h % 360 + (this.h < 0) * 360,
         s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
         l = this.l,
@@ -2089,10 +1845,10 @@ define(Hsl, hsl, extend(Color, {
         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);
   },
-  displayable: function displayable() {
+  displayable: function () {
     return (0 <= this.s && this.s <= 1 || isNaN(this.s)) && 0 <= this.l && this.l <= 1 && 0 <= this.opacity && this.opacity <= 1;
   },
-  formatHsl: function formatHsl() {
+  formatHsl: function () {
     var a = this.opacity;
     a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
     return (a === 1 ? "hsl(" : "hsla(") + (this.h || 0) + ", " + (this.s || 0) * 100 + "%, " + (this.l || 0) * 100 + "%" + (a === 1 ? ")" : ", " + a + ")");
@@ -2225,16 +1981,14 @@ function interpolateString (a, b) {
   return s.length < 2 ? q[0] ? one(q[0].x) : zero(b) : (b = q.length, function (t) {
-    for (var i = 0, o; i < b; ++i) {
-      s[(o = q[i]).i] = o.x(t);
-    }
+    for (var i = 0, o; i < b; ++i) s[(o = q[i]).i] = o.x(t);
     return s.join("");
   });
 }
 var degrees = 180 / Math.PI;
-var identity = {
+var identity$1 = {
   translateX: 0,
   translateY: 0,
   rotate: 0,
@@ -2260,7 +2014,7 @@ function decompose (a, b, c, d, e, f) {
 var cssNode, cssRoot, cssView, svgNode;
 function parseCss(value) {
-  if (value === "none") return identity;
+  if (value === "none") return identity$1;
   if (!cssNode) cssNode = document.createElement("DIV"), cssRoot = document.documentElement, cssView = document.defaultView;
   cssNode.style.transform = value;
   value = cssView.getComputedStyle(cssRoot.appendChild(cssNode), null).getPropertyValue("transform");
@@ -2269,10 +2023,10 @@ function parseCss(value) {
   return decompose(+value[0], +value[1], +value[2], +value[3], +value[4], +value[5]);
 }
 function parseSvg(value) {
-  if (value == null) return identity;
+  if (value == null) return identity$1;
   if (!svgNode) svgNode = document.createElementNS("http://www.w3.org/2000/svg", "g");
   svgNode.setAttribute("transform", value);
-  if (!(value = svgNode.transform.baseVal.consolidate())) return identity;
+  if (!(value = svgNode.transform.baseVal.consolidate())) return identity$1;
   value = value.matrix;
   return decompose(value.a, value.b, value.c, value.d, value.e, value.f);
 }
@@ -2353,9 +2107,7 @@ function interpolateTransform(parse, pxComma, pxParen, degParen) {
           n = q.length,
           o;
-      while (++i < n) {
-        s[(o = q[i]).i] = o.x(t);
-      }
+      while (++i < n) s[(o = q[i]).i] = o.x(t);
       return s.join("");
     };
@@ -2400,25 +2152,25 @@ function interpolateZoom (p0, p1) {
   if (d2 < epsilon2) {
     S = Math.log(w1 / w0) / rho;
-    i = function i(t) {
+    i = function (t) {
       return [ux0 + t * dx, uy0 + t * dy, w0 * Math.exp(rho * t * S)];
     };
   } // General case.
   else {
-      var d1 = Math.sqrt(d2),
-          b0 = (w1 * w1 - w0 * w0 + rho4 * d2) / (2 * w0 * rho2 * d1),
-          b1 = (w1 * w1 - w0 * w0 - rho4 * d2) / (2 * w1 * rho2 * d1),
-          r0 = Math.log(Math.sqrt(b0 * b0 + 1) - b0),
-          r1 = Math.log(Math.sqrt(b1 * b1 + 1) - b1);
-      S = (r1 - r0) / rho;
-      i = function i(t) {
-        var s = t * S,
-            coshr0 = cosh(r0),
-            u = w0 / (rho2 * d1) * (coshr0 * tanh(rho * s + r0) - sinh(r0));
-        return [ux0 + u * dx, uy0 + u * dy, w0 * coshr0 / cosh(rho * s + r0)];
-      };
-    }
+    var d1 = Math.sqrt(d2),
+        b0 = (w1 * w1 - w0 * w0 + rho4 * d2) / (2 * w0 * rho2 * d1),
+        b1 = (w1 * w1 - w0 * w0 - rho4 * d2) / (2 * w1 * rho2 * d1),
+        r0 = Math.log(Math.sqrt(b0 * b0 + 1) - b0),
+        r1 = Math.log(Math.sqrt(b1 * b1 + 1) - b1);
+    S = (r1 - r0) / rho;
+    i = function (t) {
+      var s = t * S,
+          coshr0 = cosh(r0),
+          u = w0 / (rho2 * d1) * (coshr0 * tanh(rho * s + r0) - sinh(r0));
+      return [ux0 + u * dx, uy0 + u * dy, w0 * coshr0 / cosh(rho * s + r0)];
+    };
+  }
   i.duration = S * 1000;
   return i;
@@ -2426,7 +2178,7 @@ function interpolateZoom (p0, p1) {
 var frame = 0,
     // is an animation frame pending?
-timeout = 0,
+timeout$1 = 0,
     // is a timeout pending?
 interval = 0,
     // are any timers active?
@@ -2437,8 +2189,8 @@ taskHead,
     clockLast = 0,
     clockNow = 0,
     clockSkew = 0,
-    clock = (typeof performance === "undefined" ? "undefined" : _typeof(performance)) === "object" && performance.now ? performance : Date,
-    setFrame = (typeof window === "undefined" ? "undefined" : _typeof(window)) === "object" && window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : function (f) {
+    clock = typeof performance === "object" && performance.now ? performance : Date,
+    setFrame = typeof window === "object" && window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : function (f) {
   setTimeout(f, 17);
 };
 function now() {
@@ -2454,7 +2206,7 @@ function Timer() {
 }
 Timer.prototype = timer.prototype = {
   constructor: Timer,
-  restart: function restart(callback, delay, time) {
+  restart: function (callback, delay, time) {
     if (typeof callback !== "function") throw new TypeError("callback is not a function");
     time = (time == null ? now() : +time) + (delay == null ? 0 : +delay);
@@ -2467,7 +2219,7 @@ Timer.prototype = timer.prototype = {
     this._time = time;
     sleep();
   },
-  stop: function stop() {
+  stop: function () {
     if (this._call) {
       this._call = null;
       this._time = Infinity;
@@ -2498,7 +2250,7 @@ function timerFlush() {
 function wake() {
   clockNow = (clockLast = clock.now()) + clockSkew;
-  frame = timeout = 0;
+  frame = timeout$1 = 0;
   try {
     timerFlush();
@@ -2538,11 +2290,11 @@ function nap() {
 function sleep(time) {
   if (frame) return; // Soonest alarm already set, or will be.
-  if (timeout) timeout = clearTimeout(timeout);
+  if (timeout$1) timeout$1 = clearTimeout(timeout$1);
   var delay = time - clockNow; // Strictly less than if we recomputed clockNow.
   if (delay > 24) {
-    if (time < Infinity) timeout = setTimeout(wake, time - clock.now() - clockSkew);
+    if (time < Infinity) timeout$1 = setTimeout(wake, time - clock.now() - clockSkew);
     if (interval) interval = clearInterval(interval);
   } else {
     if (!interval) clockLast = clock.now(), interval = setInterval(poke, pokeDelay);
@@ -2550,7 +2302,7 @@ function sleep(time) {
   }
 }
-function timeout$1 (callback, delay, time) {
+function timeout (callback, delay, time) {
   var t = new Timer();
   delay = delay == null ? 0 : +delay;
   t.restart(function (elapsed) {
@@ -2589,16 +2341,16 @@ function schedule (node, name, id, index, group, timing) {
   });
 }
 function init(node, id) {
-  var schedule = get$1(node, id);
+  var schedule = get(node, id);
   if (schedule.state > CREATED) throw new Error("too late; already scheduled");
   return schedule;
 }
-function set$1(node, id) {
-  var schedule = get$1(node, id);
+function set(node, id) {
+  var schedule = get(node, id);
   if (schedule.state > STARTED) throw new Error("too late; already running");
   return schedule;
 }
-function get$1(node, id) {
+function get(node, id) {
   var schedule = node.__transition;
   if (!schedule || !(schedule = schedule[id])) throw new Error("transition not found");
   return schedule;
@@ -2630,7 +2382,7 @@ function create(node, id, self) {
       // defer starting an interrupting transition until that transition has a
       // chance to tick (and possibly end); see d3/d3-transition#54!
-      if (o.state === STARTED) return timeout$1(start); // Interrupt the active transition, if any.
+      if (o.state === STARTED) return timeout(start); // Interrupt the active transition, if any.
       if (o.state === RUNNING) {
         o.state = ENDED;
@@ -2639,18 +2391,18 @@ function create(node, id, self) {
         delete schedules[i];
       } // Cancel any pre-empted transitions.
       else if (+i < id) {
-          o.state = ENDED;
-          o.timer.stop();
-          o.on.call("cancel", node, node.__data__, o.index, o.group);
-          delete schedules[i];
-        }
+        o.state = ENDED;
+        o.timer.stop();
+        o.on.call("cancel", node, node.__data__, o.index, o.group);
+        delete schedules[i];
+      }
     } // Defer the first tick to end of the current frame; see d3/d3#1576.
     // Note the transition may be canceled after start and before the first tick!
     // Note this must be scheduled before the start event; see d3/d3-transition#16!
     // Assuming this is successful, subsequent callbacks go straight to tick.
-    timeout$1(function () {
+    timeout(function () {
       if (self.state === STARTED) {
         self.state = RUNNING;
         self.timer.restart(tick, self.delay, self.time);
@@ -2697,9 +2449,7 @@ function create(node, id, self) {
     self.timer.stop();
     delete schedules[id];
-    for (var i in schedules) {
-      return;
-    } // eslint-disable-line no-unused-vars
+    for (var i in schedules) return; // eslint-disable-line no-unused-vars
     delete node.__transition;
@@ -2740,7 +2490,7 @@ function selection_interrupt (name) {
 function tweenRemove(id, name) {
   var tween0, tween1;
   return function () {
-    var schedule = set$1(this, id),
+    var schedule = set(this, id),
         tween = schedule.tween; // If this node shared tween with the previous node,
     // just assign the updated shared tween and we’re done!
     // Otherwise, copy-on-write.
@@ -2765,7 +2515,7 @@ function tweenFunction(id, name, value) {
   var tween0, tween1;
   if (typeof value !== "function") throw new Error();
   return function () {
-    var schedule = set$1(this, id),
+    var schedule = set(this, id),
         tween = schedule.tween; // If this node shared tween with the previous node,
     // just assign the updated shared tween and we’re done!
     // Otherwise, copy-on-write.
@@ -2795,7 +2545,7 @@ function transition_tween (name, value) {
   name += "";
   if (arguments.length < 2) {
-    var tween = get$1(this.node(), id).tween;
+    var tween = get(this.node(), id).tween;
     for (var i = 0, n = tween.length, t; i < n; ++i) {
       if ((t = tween[i]).name === name) {
@@ -2811,11 +2561,11 @@ function transition_tween (name, value) {
 function tweenValue(transition, name, value) {
   var id = transition._id;
   transition.each(function () {
-    var schedule = set$1(this, id);
+    var schedule = set(this, id);
     (schedule.value || (schedule.value = {}))[name] = value.apply(this, arguments);
   });
   return function (node) {
-    return get$1(node, id).value[name];
+    return get(node, id).value[name];
   };
 }
@@ -2824,19 +2574,19 @@ function interpolate (a, b) {
   return (typeof b === "number" ? interpolateNumber : b instanceof color ? interpolateRgb : (c = color(b)) ? (b = c, interpolateRgb) : interpolateString)(a, b);
 }
-function attrRemove$1(name) {
+function attrRemove(name) {
   return function () {
     this.removeAttribute(name);
   };
 }
-function attrRemoveNS$1(fullname) {
+function attrRemoveNS(fullname) {
   return function () {
     this.removeAttributeNS(fullname.space, fullname.local);
   };
 }
-function attrConstant$1(name, interpolate, value1) {
+function attrConstant(name, interpolate, value1) {
   var string00,
       string1 = value1 + "",
       interpolate0;
@@ -2846,7 +2596,7 @@ function attrConstant$1(name, interpolate, value1) {
   };
 }
-function attrConstantNS$1(fullname, interpolate, value1) {
+function attrConstantNS(fullname, interpolate, value1) {
   var string00,
       string1 = value1 + "",
       interpolate0;
@@ -2856,7 +2606,7 @@ function attrConstantNS$1(fullname, interpolate, value1) {
   };
 }
-function attrFunction$1(name, interpolate, value) {
+function attrFunction(name, interpolate, value) {
   var string00, string10, interpolate0;
   return function () {
     var string0,
@@ -2869,7 +2619,7 @@ function attrFunction$1(name, interpolate, value) {
   };
 }
-function attrFunctionNS$1(fullname, interpolate, value) {
+function attrFunctionNS(fullname, interpolate, value) {
   var string00, string10, interpolate0;
   return function () {
     var string0,
@@ -2885,7 +2635,7 @@ function attrFunctionNS$1(fullname, interpolate, value) {
 function transition_attr (name, value) {
   var fullname = namespace(name),
       i = fullname === "transform" ? interpolateTransformSvg : interpolate;
-  return this.attrTween(name, typeof value === "function" ? (fullname.local ? attrFunctionNS$1 : attrFunction$1)(fullname, i, tweenValue(this, "attr." + name, value)) : value == null ? (fullname.local ? attrRemoveNS$1 : attrRemove$1)(fullname) : (fullname.local ? attrConstantNS$1 : attrConstant$1)(fullname, i, value));
+  return this.attrTween(name, typeof value === "function" ? (fullname.local ? attrFunctionNS : attrFunction)(fullname, i, tweenValue(this, "attr." + name, value)) : value == null ? (fullname.local ? attrRemoveNS : attrRemove)(fullname) : (fullname.local ? attrConstantNS : attrConstant)(fullname, i, value));
 }
 function attrInterpolate(name, i) {
@@ -2949,36 +2699,36 @@ function delayConstant(id, value) {
 function transition_delay (value) {
   var id = this._id;
-  return arguments.length ? this.each((typeof value === "function" ? delayFunction : delayConstant)(id, value)) : get$1(this.node(), id).delay;
+  return arguments.length ? this.each((typeof value === "function" ? delayFunction : delayConstant)(id, value)) : get(this.node(), id).delay;
 }
 function durationFunction(id, value) {
   return function () {
-    set$1(this, id).duration = +value.apply(this, arguments);
+    set(this, id).duration = +value.apply(this, arguments);
   };
 }
 function durationConstant(id, value) {
   return value = +value, function () {
-    set$1(this, id).duration = value;
+    set(this, id).duration = value;
   };
 }
 function transition_duration (value) {
   var id = this._id;
-  return arguments.length ? this.each((typeof value === "function" ? durationFunction : durationConstant)(id, value)) : get$1(this.node(), id).duration;
+  return arguments.length ? this.each((typeof value === "function" ? durationFunction : durationConstant)(id, value)) : get(this.node(), id).duration;
 }
 function easeConstant(id, value) {
   if (typeof value !== "function") throw new Error();
   return function () {
-    set$1(this, id).ease = value;
+    set(this, id).ease = value;
   };
 }
 function transition_ease (value) {
   var id = this._id;
-  return arguments.length ? this.each(easeConstant(id, value)) : get$1(this.node(), id).ease;
+  return arguments.length ? this.each(easeConstant(id, value)) : get(this.node(), id).ease;
 }
 function transition_filter (match) {
@@ -3024,7 +2774,7 @@ function start(name) {
 function onFunction(id, name, listener) {
   var on0,
       on1,
-      sit = start(name) ? init : set$1;
+      sit = start(name) ? init : set;
   return function () {
     var schedule = sit(this, id),
         on = schedule.on; // If this node shared a dispatch with the previous node,
@@ -3038,16 +2788,14 @@ function onFunction(id, name, listener) {
 function transition_on (name, listener) {
   var id = this._id;
-  return arguments.length < 2 ? get$1(this.node(), id).on.on(name) : this.each(onFunction(id, name, listener));
+  return arguments.length < 2 ? get(this.node(), id).on.on(name) : this.each(onFunction(id, name, listener));
 }
 function removeFunction(id) {
   return function () {
     var parent = this.parentNode;
-    for (var i in this.__transition) {
-      if (+i !== id) return;
-    }
+    for (var i in this.__transition) if (+i !== id) return;
     if (parent) parent.removeChild(this);
   };
@@ -3067,7 +2815,7 @@ function transition_select (select) {
       if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {
         if ("__data__" in node) subnode.__data__ = node.__data__;
         subgroup[i] = subnode;
-        schedule(subgroup[i], name, id, i, subgroup, get$1(node, id));
+        schedule(subgroup[i], name, id, i, subgroup, get(node, id));
       }
     }
   }
@@ -3083,7 +2831,7 @@ function transition_selectAll (select) {
   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]) {
-        for (var children = select.call(node, node.__data__, i, group), child, inherit = get$1(node, id), k = 0, l = children.length; k < l; ++k) {
+        for (var children = select.call(node, node.__data__, i, group), child, inherit = get(node, id), k = 0, l = children.length; k < l; ++k) {
           if (child = children[k]) {
             schedule(child, name, id, k, children, inherit);
           }
@@ -3098,9 +2846,9 @@ function transition_selectAll (select) {
   return new Transition(subgroups, parents, name, id);
 }
-var Selection$1 = selection.prototype.constructor;
+var Selection = selection.prototype.constructor;
 function transition_selection () {
-  return new Selection$1(this._groups, this._parents);
+  return new Selection(this._groups, this._parents);
 }
 function styleNull(name, interpolate) {
@@ -3112,13 +2860,13 @@ function styleNull(name, interpolate) {
   };
 }
-function styleRemove$1(name) {
+function styleRemove(name) {
   return function () {
     this.style.removeProperty(name);
   };
 }
-function styleConstant$1(name, interpolate, value1) {
+function styleConstant(name, interpolate, value1) {
   var string00,
       string1 = value1 + "",
       interpolate0;
@@ -3128,7 +2876,7 @@ function styleConstant$1(name, interpolate, value1) {
   };
 }
-function styleFunction$1(name, interpolate, value) {
+function styleFunction(name, interpolate, value) {
   var string00, string10, interpolate0;
   return function () {
     var string0 = styleValue(this, name),
@@ -3147,9 +2895,9 @@ function styleMaybeRemove(id, name) {
       event = "end." + key,
       remove;
   return function () {
-    var schedule = set$1(this, id),
+    var schedule = set(this, id),
         on = schedule.on,
-        listener = schedule.value[key] == null ? remove || (remove = styleRemove$1(name)) : undefined; // If this node shared a dispatch with the previous node,
+        listener = schedule.value[key] == null ? remove || (remove = styleRemove(name)) : undefined; // If this node shared a dispatch with the previous node,
     // just assign the updated shared dispatch and we’re done!
     // Otherwise, copy-on-write.
@@ -3160,7 +2908,7 @@ function styleMaybeRemove(id, name) {
 function transition_style (name, value, priority) {
   var i = (name += "") === "transform" ? interpolateTransformCss : interpolate;
-  return value == null ? this.styleTween(name, styleNull(name, i)).on("end.style." + name, styleRemove$1(name)) : typeof value === "function" ? this.styleTween(name, styleFunction$1(name, i, tweenValue(this, "style." + name, value))).each(styleMaybeRemove(this._id, name)) : this.styleTween(name, styleConstant$1(name, i, value), priority).on("end.style." + name, null);
+  return value == null ? this.styleTween(name, styleNull(name, i)).on("end.style." + name, styleRemove(name)) : typeof value === "function" ? this.styleTween(name, styleFunction(name, i, tweenValue(this, "style." + name, value))).each(styleMaybeRemove(this._id, name)) : this.styleTween(name, styleConstant(name, i, value), priority).on("end.style." + name, null);
 }
 function styleInterpolate(name, i, priority) {
@@ -3190,13 +2938,13 @@ function transition_styleTween (name, value, priority) {
   return this.tween(key, styleTween(name, value, priority == null ? "" : priority));
 }
-function textConstant$1(value) {
+function textConstant(value) {
   return function () {
     this.textContent = value;
   };
 }
-function textFunction$1(value) {
+function textFunction(value) {
   return function () {
     var value1 = value(this);
     this.textContent = value1 == null ? "" : value1;
@@ -3204,7 +2952,7 @@ function textFunction$1(value) {
 }
 function transition_text (value) {
-  return this.tween("text", typeof value === "function" ? textFunction$1(tweenValue(this, "text", value)) : textConstant$1(value == null ? "" : value + ""));
+  return this.tween("text", typeof value === "function" ? textFunction(tweenValue(this, "text", value)) : textConstant(value == null ? "" : value + ""));
 }
 function textInterpolate(i) {
@@ -3242,7 +2990,7 @@ function transition_transition () {
   for (var groups = this._groups, m = groups.length, j = 0; j < m; ++j) {
     for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
       if (node = group[i]) {
-        var inherit = get$1(node, id0);
+        var inherit = get(node, id0);
         schedule(node, name, id1, i, group, {
           time: inherit.time + inherit.delay + inherit.duration,
           delay: 0,
@@ -3267,12 +3015,12 @@ function transition_end () {
       value: reject
     },
         end = {
-      value: function value() {
+      value: function () {
         if (--size === 0) resolve();
       }
     };
     that.each(function () {
-      var schedule = set$1(this, id),
+      var schedule = set(this, id),
           on = schedule.on; // If this node shared a dispatch with the previous node,
       // just assign the updated shared dispatch and we’re done!
       // Otherwise, copy-on-write.
@@ -3299,14 +3047,11 @@ function Transition(groups, parents, name, id) {
   this._name = name;
   this._id = id;
 }
-function transition(name) {
-  return selection().transition(name);
-}
 function newId() {
   return ++id;
 }
 var selection_prototype = selection.prototype;
-Transition.prototype = transition.prototype = {
+Transition.prototype = {
   constructor: Transition,
   select: transition_select,
   selectAll: transition_selectAll,
@@ -3388,75 +3133,61 @@ function Map() {}
 Map.prototype = map.prototype = {
   constructor: Map,
-  has: function has(key) {
+  has: function (key) {
     return prefix + key in this;
   },
-  get: function get(key) {
+  get: function (key) {
     return this[prefix + key];
   },
-  set: function set(key, value) {
+  set: function (key, value) {
     this[prefix + key] = value;
     return this;
   },
-  remove: function remove(key) {
+  remove: function (key) {
     var property = prefix + key;
     return property in this && delete this[property];
   },
-  clear: function clear() {
-    for (var property in this) {
-      if (property[0] === prefix) delete this[property];
-    }
+  clear: function () {
+    for (var property in this) if (property[0] === prefix) delete this[property];
   },
-  keys: function keys() {
+  keys: function () {
     var keys = [];
-    for (var property in this) {
-      if (property[0] === prefix) keys.push(property.slice(1));
-    }
+    for (var property in this) if (property[0] === prefix) keys.push(property.slice(1));
     return keys;
   },
-  values: function values() {
+  values: function () {
     var values = [];
-    for (var property in this) {
-      if (property[0] === prefix) values.push(this[property]);
-    }
+    for (var property in this) if (property[0] === prefix) values.push(this[property]);
     return values;
   },
-  entries: function entries() {
+  entries: function () {
     var entries = [];
-    for (var property in this) {
-      if (property[0] === prefix) entries.push({
-        key: property.slice(1),
-        value: this[property]
-      });
-    }
+    for (var property in this) if (property[0] === prefix) entries.push({
+      key: property.slice(1),
+      value: this[property]
+    });
     return entries;
   },
-  size: function size() {
+  size: function () {
     var size = 0;
-    for (var property in this) {
-      if (property[0] === prefix) ++size;
-    }
+    for (var property in this) if (property[0] === prefix) ++size;
     return size;
   },
-  empty: function empty() {
-    for (var property in this) {
-      if (property[0] === prefix) return false;
-    }
+  empty: function () {
+    for (var property in this) if (property[0] === prefix) return false;
     return true;
   },
-  each: function each(f) {
-    for (var property in this) {
-      if (property[0] === prefix) f(this[property], property.slice(1), this);
-    }
+  each: function (f) {
+    for (var property in this) if (property[0] === prefix) f(this[property], property.slice(1), this);
   }
 };
@@ -3467,28 +3198,22 @@ function map(object, f) {
     map.set(key, value);
   }); // Index array by numeric index or specified key function.
   else if (Array.isArray(object)) {
-      var i = -1,
-          n = object.length,
-          o;
-      if (f == null) while (++i < n) {
-        map.set(i, object[i]);
-      } else while (++i < n) {
-        map.set(f(o = object[i], i, object), o);
-      }
-    } // Convert object to map.
-    else if (object) for (var key in object) {
-        map.set(key, object[key]);
-      }
+    var i = -1,
+        n = object.length,
+        o;
+    if (f == null) while (++i < n) map.set(i, object[i]);else while (++i < n) map.set(f(o = object[i], i, object), o);
+  } // Convert object to map.
+  else if (object) for (var key in object) map.set(key, object[key]);
   return map;
 }
 function Set() {}
 var proto = map.prototype;
-Set.prototype = set$2.prototype = {
+Set.prototype = {
   constructor: Set,
   has: proto.has,
-  add: function add(value) {
+  add: function (value) {
     value += "";
     this[prefix + value] = value;
     return this;
@@ -3501,31 +3226,11 @@ Set.prototype = set$2.prototype = {
   each: proto.each
 };
-function set$2(object, f) {
-  var set = new Set(); // Copy constructor.
-  if (object instanceof Set) object.each(function (value) {
-    set.add(value);
-  }); // Otherwise, assume it’s an array.
-  else if (object) {
-      var i = -1,
-          n = object.length;
-      if (f == null) while (++i < n) {
-        set.add(object[i]);
-      } else while (++i < n) {
-        set.add(f(object[i], i, object));
-      }
-    }
-  return set;
-}
 function count(node) {
   var sum = 0,
       children = node.children,
       i = children && children.length;
-  if (!i) sum = 1;else while (--i >= 0) {
-    sum += children[i].value;
-  }
+  if (!i) sum = 1;else while (--i >= 0) sum += children[i].value;
   node.value = sum;
 }
@@ -3599,9 +3304,7 @@ function node_sum (value) {
         children = node.children,
         i = children && children.length;
-    while (--i >= 0) {
-      sum += children[i].value;
-    }
+    while (--i >= 0) sum += children[i].value;
     node.value = sum;
   });
@@ -3739,9 +3442,7 @@ function copyData(node) {
 function computeHeight(node) {
   var height = 0;
-  do {
-    node.height = height;
-  } while ((node = node.parent) && node.height < ++height);
+  do node.height = height; while ((node = node.parent) && node.height < ++height);
 }
 function Node(data) {
   this.data = data;
@@ -3884,23 +3585,23 @@ function tree () {
     if (nodeSize) root.eachBefore(sizeNode); // If a fixed tree size is specified, scale x and y based on the extent.
     // Compute the left-most, right-most, and depth-most nodes for extents.
     else {
-        var left = root,
-            right = root,
-            bottom = root;
-        root.eachBefore(function (node) {
-          if (node.x < left.x) left = node;
-          if (node.x > right.x) right = node;
-          if (node.depth > bottom.depth) bottom = node;
-        });
-        var s = left === right ? 1 : separation(left, right) / 2,
-            tx = s - left.x,
-            kx = dx / (right.x + s + tx),
-            ky = dy / (bottom.depth || 1);
-        root.eachBefore(function (node) {
-          node.x = (node.x + tx) * kx;
-          node.y = node.depth * ky;
-        });
-      }
+      var left = root,
+          right = root,
+          bottom = root;
+      root.eachBefore(function (node) {
+        if (node.x < left.x) left = node;
+        if (node.x > right.x) right = node;
+        if (node.depth > bottom.depth) bottom = node;
+      });
+      var s = left === right ? 1 : separation(left, right) / 2,
+          tx = s - left.x,
+          kx = dx / (right.x + s + tx),
+          ky = dy / (bottom.depth || 1);
+      root.eachBefore(function (node) {
+        node.x = (node.x + tx) * kx;
+        node.y = node.depth * ky;
+      });
+    }
     return root;
   } // Computes a preliminary x-coordinate for v. Before that, FIRST WALK is
   // applied recursively to the children of v, as well as the function
@@ -4012,7 +3713,7 @@ function tree () {
   return tree;
 }
-function constant$2 (x) {
+function constant (x) {
   return function () {
     return x;
   };
@@ -4031,46 +3732,46 @@ function Transform(k, x, y) {
 }
 Transform.prototype = {
   constructor: Transform,
-  scale: function scale(k) {
+  scale: function (k) {
     return k === 1 ? this : new Transform(this.k * k, this.x, this.y);
   },
-  translate: function translate(x, y) {
+  translate: function (x, y) {
     return x === 0 & y === 0 ? this : new Transform(this.k, this.x + this.k * x, this.y + this.k * y);
   },
-  apply: function apply(point) {
+  apply: function (point) {
     return [point[0] * this.k + this.x, point[1] * this.k + this.y];
   },
-  applyX: function applyX(x) {
+  applyX: function (x) {
     return x * this.k + this.x;
   },
-  applyY: function applyY(y) {
+  applyY: function (y) {
     return y * this.k + this.y;
   },
-  invert: function invert(location) {
+  invert: function (location) {
     return [(location[0] - this.x) / this.k, (location[1] - this.y) / this.k];
   },
-  invertX: function invertX(x) {
+  invertX: function (x) {
     return (x - this.x) / this.k;
   },
-  invertY: function invertY(y) {
+  invertY: function (y) {
     return (y - this.y) / this.k;
   },
-  rescaleX: function rescaleX(x) {
+  rescaleX: function (x) {
     return x.copy().domain(x.range().map(this.invertX, this).map(x.invert, x));
   },
-  rescaleY: function rescaleY(y) {
+  rescaleY: function (y) {
     return y.copy().domain(y.range().map(this.invertY, this).map(y.invert, y));
   },
-  toString: function toString() {
+  toString: function () {
     return "translate(" + this.x + "," + this.y + ") scale(" + this.k + ")";
   }
 };
-var identity$1 = new Transform(1, 0, 0);
+var identity = new Transform(1, 0, 0);
 function nopropagation() {
   event$1.stopImmediatePropagation();
 }
-function noevent$1 () {
+function noevent () {
   event$1.preventDefault();
   event$1.stopImmediatePropagation();
 }
@@ -4097,7 +3798,7 @@ function defaultExtent() {
 }
 function defaultTransform() {
-  return this.__zoom || identity$1;
+  return this.__zoom || identity;
 }
 function defaultWheelDelta() {
@@ -4180,7 +3881,7 @@ function zoom () {
       var e = extent.apply(this, arguments),
           t = this.__zoom,
           p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p;
-      return constrain(identity$1.translate(p0[0], p0[1]).scale(t.k).translate(typeof x === "function" ? -x.apply(this, arguments) : -x, typeof y === "function" ? -y.apply(this, arguments) : -y), e, translateExtent);
+      return constrain(identity.translate(p0[0], p0[1]).scale(t.k).translate(typeof x === "function" ? -x.apply(this, arguments) : -x, typeof y === "function" ? -y.apply(this, arguments) : -y), e, translateExtent);
     }, p);
   };
@@ -4217,10 +3918,10 @@ function zoom () {
       return function (t) {
         if (t === 1) t = b; // Avoid rounding error on end.
         else {
-            var l = i(t),
-                k = w / l[2];
-            t = new Transform(k, p[0] - l[0] * k, p[1] - l[1] * k);
-          }
+          var l = i(t),
+              k = w / l[2];
+          t = new Transform(k, p[0] - l[0] * k, p[1] - l[1] * k);
+        }
         g.zoom(null, t);
       };
     });
@@ -4239,7 +3940,7 @@ function zoom () {
   }
   Gesture.prototype = {
-    start: function start() {
+    start: function () {
       if (++this.active === 1) {
         this.that.__zooming = this;
         this.emit("start");
@@ -4247,7 +3948,7 @@ function zoom () {
       return this;
     },
-    zoom: function zoom(key, transform) {
+    zoom: function (key, transform) {
       if (this.mouse && key !== "mouse") this.mouse[1] = transform.invert(this.mouse[0]);
       if (this.touch0 && key !== "touch") this.touch0[1] = transform.invert(this.touch0[0]);
       if (this.touch1 && key !== "touch") this.touch1[1] = transform.invert(this.touch1[0]);
@@ -4255,7 +3956,7 @@ function zoom () {
       this.emit("zoom");
       return this;
     },
-    end: function end() {
+    end: function () {
       if (--this.active === 0) {
         delete this.that.__zooming;
         this.emit("end");
@@ -4263,7 +3964,7 @@ function zoom () {
       return this;
     },
-    emit: function emit(type) {
+    emit: function (type) {
       customEvent(new ZoomEvent(zoom, type, this.that.__zoom), listeners.apply, listeners, [type, this.that, this.args]);
     }
   };
@@ -4284,13 +3985,13 @@ function zoom () {
       clearTimeout(g.wheel);
     } // If this wheel event won’t trigger a transform change, ignore it.
     else if (t.k === k) return; // Otherwise, capture the mouse point and location at the start.
-      else {
-          g.mouse = [p, t.invert(p)];
-          interrupt(this);
-          g.start();
-        }
+    else {
+      g.mouse = [p, t.invert(p)];
+      interrupt(this);
+      g.start();
+    }
-    noevent$1();
+    noevent();
     g.wheel = setTimeout(wheelidled, wheelDelay);
     g.zoom("mouse", constrain(translate(scale(t, k), g.mouse[0], g.mouse[1]), g.extent, translateExtent));
@@ -4314,7 +4015,7 @@ function zoom () {
     g.start();
     function mousemoved() {
-      noevent$1();
+      noevent();
       if (!g.moved) {
         var dx = event$1.clientX - x0,
@@ -4328,7 +4029,7 @@ function zoom () {
     function mouseupped() {
       v.on("mousemove.zoom mouseup.zoom", null);
       yesdrag(event$1.view, g.moved);
-      noevent$1();
+      noevent();
       g.end();
     }
   }
@@ -4340,7 +4041,7 @@ function zoom () {
         p1 = t0.invert(p0),
         k1 = t0.k * (event$1.shiftKey ? 0.5 : 2),
         t1 = constrain(translate(scale(t0, k1), p0, p1), extent.apply(this, arguments), translateExtent);
-    noevent$1();
+    noevent();
     if (duration > 0) select(this).transition().duration(duration).call(schedule, t1, p0);else select(this).call(zoom.transform, t1);
   }
@@ -4381,7 +4082,7 @@ function zoom () {
         t,
         p,
         l;
-    noevent$1();
+    noevent();
     if (touchstarting) touchstarting = clearTimeout(touchstarting);
     g.taps = 0;
@@ -4437,19 +4138,19 @@ function zoom () {
   }
   zoom.wheelDelta = function (_) {
-    return arguments.length ? (wheelDelta = typeof _ === "function" ? _ : constant$2(+_), zoom) : wheelDelta;
+    return arguments.length ? (wheelDelta = typeof _ === "function" ? _ : constant(+_), zoom) : wheelDelta;
   };
   zoom.filter = function (_) {
-    return arguments.length ? (filter = typeof _ === "function" ? _ : constant$2(!!_), zoom) : filter;
+    return arguments.length ? (filter = typeof _ === "function" ? _ : constant(!!_), zoom) : filter;
   };
   zoom.touchable = function (_) {
-    return arguments.length ? (touchable = typeof _ === "function" ? _ : constant$2(!!_), zoom) : touchable;
+    return arguments.length ? (touchable = typeof _ === "function" ? _ : constant(!!_), zoom) : touchable;
   };
   zoom.extent = function (_) {
-    return arguments.length ? (extent = typeof _ === "function" ? _ : constant$2([[+_[0][0], +_[0][1]], [+_[1][0], +_[1][1]]]), zoom) : extent;
+    return arguments.length ? (extent = typeof _ === "function" ? _ : constant([[+_[0][0], +_[0][1]], [+_[1][0], +_[1][1]]]), zoom) : extent;
   };
   zoom.scaleExtent = function (_) {
@@ -4484,7 +4185,7 @@ function zoom () {
   return zoom;
 }
-var colorStruct = {
+const colorStruct = {
   aliceblue: {
     r: 240,
     g: 248,
@@ -5234,28 +4935,28 @@ var colorStruct = {
 };
 /* eslint-disable no-cond-assign */
-var colorUtils = {
-  resolveExpression: function resolveExpression(input) {
+const colorUtils = {
+  resolveExpression: input => {
     // rgb
-    var matches = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(input);
+    let matches = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(input);
     if (matches) {
-      return "rgb(".concat(matches[1], ",").concat(matches[2], ",").concat(matches[3], ")");
+      return `rgb(${matches[1]},${matches[2]},${matches[3]})`;
     } // rgba
     matches = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d(\.\d+)?)\s*\)$/i.exec(input);
     if (matches) {
-      return "rgba(".concat(matches[1], ",").concat(matches[2], ",").concat(matches[3], ",").concat(matches[4], ")");
+      return `rgba(${matches[1]},${matches[2]},${matches[3]},${matches[4]})`;
     } // argb
     matches = /^argb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(input);
     if (matches) {
-      var a = Math.round(matches[1] / 2.55) / 100;
-      return "rgba(".concat(matches[2], ",").concat(matches[3], ",").concat(matches[4], ",").concat(a, ")");
+      const a = Math.round(matches[1] / 2.55) / 100;
+      return `rgba(${matches[2]},${matches[3]},${matches[4]},${a})`;
     } // hex
@@ -5266,44 +4967,45 @@ var colorUtils = {
     } // css color
-    var color = input && colorStruct[input.toLowerCase()];
+    const color = input && colorStruct[input.toLowerCase()];
     if (color) {
-      var _a = color.a !== undefined ? color.a : 1;
-      return "rgba(".concat(color.r, ",").concat(color.g, ",").concat(color.b, ",").concat(_a, ")");
+      const a = color.a !== undefined ? color.a : 1;
+      return `rgba(${color.r},${color.g},${color.b},${a})`;
     } // invalid
     return 'none';
   },
-  getDarkColor: function getDarkColor(color) {
-    var percent = 0.5;
-    var f;
-    var R;
-    var B;
-    var G;
+  getDarkColor(color) {
+    const percent = 0.5;
+    let f;
+    let R;
+    let B;
+    let G;
     if (color.length > 7) {
       f = color.split(',');
-      var rgba = f[0].indexOf('a') !== -1;
+      const rgba = f[0].indexOf('a') !== -1;
       R = rgba ? parseInt(f[0].slice(5), 10) : parseInt(f[0].slice(4), 10);
       G = parseInt(f[1], 10);
       B = parseInt(f[2], 10);
-      return "".concat((rgba ? 'rgba(' : 'rgb(') + (Math.round((0 - R) * percent) + R), ",").concat(Math.round((0 - G) * percent) + G, ",").concat(Math.round((0 - B) * percent) + B).concat(rgba ? ",".concat(f[3]) : ')');
+      return `${(rgba ? 'rgba(' : 'rgb(') + (Math.round((0 - R) * percent) + R)},${Math.round((0 - G) * percent) + G},${Math.round((0 - B) * percent) + B}${rgba ? `,${f[3]}` : ')'}`;
     }
     f = parseInt(color.slice(1), 16);
     R = f >> 16;
     G = f >> 8 & 0x00ff;
     B = f & 0x0000ff;
-    return "#".concat((0x1000000 + (Math.round((0 - R) * percent) + R) * 0x10000 + (Math.round((0 - G) * percent) + G) * 0x100 + (Math.round((0 - B) * percent) + B)).toString(16).slice(1));
+    return `#${(0x1000000 + (Math.round((0 - R) * percent) + R) * 0x10000 + (Math.round((0 - G) * percent) + G) * 0x100 + (Math.round((0 - B) * percent) + B)).toString(16).slice(1)}`;
   },
-  isDarkColor: function isDarkColor(color) {
-    var r;
-    var g;
-    var b;
-    var matches;
+  isDarkColor(color) {
+    let r;
+    let g;
+    let b;
+    let matches;
     if (matches = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(color)) {
       r = parseInt(matches[1], 10);
@@ -5323,17 +5025,18 @@ var colorUtils = {
     return 0.299 * r + 0.587 * g + 0.114 * b < 125;
   }
 };
-var pageSize = 3300;
-var attributeIDs = {
+const pageSize = 3300;
+const attributeIDs = {
   colorByExpression: 'color',
   labelExpression: 'label',
   subLabelExpression: 'subLabel',
   extraLabelExpression: 'extraLabel'
 };
-var MAX_DATA = 'max-data-limit';
-var NO_ROOT = 'no_root';
+const MAX_DATA = 'max-data-limit';
+const NO_ROOT = 'no_root';
 function getId(row) {
   return row[0].qText;
@@ -5344,14 +5047,14 @@ function getParentId(row) {
 }
 function anyCycle(nodes) {
-  var visited = {};
-  var marked = {};
+  const visited = {};
+  const marked = {};
   function isCycleUtil(node) {
     visited[node.id] = true;
     marked[node.id] = true;
-    for (var i = 0; i < node.children.length; ++i) {
+    for (let i = 0; i < node.children.length; ++i) {
       if (!visited[node.children[i].id] && isCycleUtil(node.children[i])) {
         return true;
       }
@@ -5365,8 +5068,8 @@ function anyCycle(nodes) {
     return false;
   }
-  for (var i = 0; i < nodes.length; ++i) {
-    var node = nodes[i];
+  for (let i = 0; i < nodes.length; ++i) {
+    const node = nodes[i];
     if (!visited[node.id] && isCycleUtil(node)) {
       return true;
@@ -5375,122 +5078,61 @@ function anyCycle(nodes) {
   return false;
 }
-function fetchPage(_x, _x2, _x3, _x4, _x5, _x6, _x7) {
-  return _fetchPage.apply(this, arguments);
-}
-function _fetchPage() {
-  _fetchPage = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(dataPages, dataMatrix, model, fullHeight, currentRow, callNum, maxCalls) {
-    return regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.next = 2;
-            return model.getHyperCubeData('/qHyperCubeDef', [{
-              qTop: currentRow,
-              qLeft: 0,
-              qWidth: 3,
-              qHeight: pageSize
-            }]).then(function (data) {
-              dataPages.push(data[0]);
-              dataMatrix.push.apply(dataMatrix, _toConsumableArray(data[0].qMatrix)); // eslint-disable-next-line no-param-reassign
-              currentRow += data[0].qArea.qHeight;
-            });
-          case 2:
-            if (!(callNum >= maxCalls)) {
-              _context2.next = 4;
-              break;
-            }
-            return _context2.abrupt("return", MAX_DATA);
-          case 4:
-            if (!(fullHeight > currentRow)) {
-              _context2.next = 6;
-              break;
-            }
-            return _context2.abrupt("return", fetchPage(dataPages, dataMatrix, model, fullHeight, currentRow, callNum + 1, maxCalls));
-          case 6:
-            return _context2.abrupt("return", '');
-          case 7:
-          case "end":
-            return _context2.stop();
-        }
-      }
-    }, _callee2);
-  }));
-  return _fetchPage.apply(this, arguments);
-}
-var getDataMatrix = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(layout, model) {
-    var dataPages, fullHeight, loadedHeight, dataMatrix, status;
-    return regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            if (!layout.snapshotData) {
-              _context.next = 2;
-              break;
-            }
-            return _context.abrupt("return", {
-              status: '',
-              dataMatrix: layout.snapshotData.dataMatrix
-            });
-          case 2:
-            dataPages = layout.qHyperCube && layout.qHyperCube.qDataPages;
-            fullHeight = layout.qHyperCube.qSize.qcy;
-            loadedHeight = dataPages[0].qArea.qHeight;
-            dataMatrix = _toConsumableArray(dataPages[0].qMatrix);
-            status = ''; // If there seems to be more data, check if it is already loadad or load it
-            if (!(fullHeight > loadedHeight && dataPages.length === 1 && model)) {
-              _context.next = 13;
-              break;
-            }
+async function fetchPage(dataPages, dataMatrix, model, fullHeight, currentRow, callNum, maxCalls) {
+  await model.getHyperCubeData('/qHyperCubeDef', [{
+    qTop: currentRow,
+    qLeft: 0,
+    qWidth: 3,
+    qHeight: pageSize
+  }]).then(data => {
+    dataPages.push(data[0]);
+    dataMatrix.push(...data[0].qMatrix); // eslint-disable-next-line no-param-reassign
+    currentRow += data[0].qArea.qHeight;
+  });
-            _context.next = 10;
-            return fetchPage(layout.qHyperCube.qDataPages, dataMatrix, model, fullHeight, loadedHeight, 0, layout.rowLimit / pageSize || 10);
+  if (callNum >= maxCalls) {
+    return MAX_DATA;
+  }
-          case 10:
-            status = _context.sent;
-            _context.next = 14;
-            break;
+  if (fullHeight > currentRow) {
+    // eslint-disable-next-line no-param-reassign
+    return fetchPage(dataPages, dataMatrix, model, fullHeight, currentRow, callNum + 1, maxCalls);
+  }
-          case 13:
-            dataPages.forEach(function (page, i) {
-              i > 0 ? dataMatrix.push.apply(dataMatrix, _toConsumableArray(page.qMatrix)) : '';
-            });
+  return '';
+}
+const getDataMatrix = async (layout, model) => {
+  if (layout.snapshotData) {
+    return {
+      status: '',
+      dataMatrix: layout.snapshotData.dataMatrix
+    };
+  }
-          case 14:
-            return _context.abrupt("return", {
-              status: status,
-              dataMatrix: dataMatrix
-            });
+  const dataPages = layout.qHyperCube && layout.qHyperCube.qDataPages;
+  const fullHeight = layout.qHyperCube.qSize.qcy;
+  const loadedHeight = dataPages[0].qArea.qHeight;
+  const dataMatrix = [...dataPages[0].qMatrix];
+  let status = ''; // If there seems to be more data, check if it is already loadad or load it
-          case 15:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  }));
+  if (fullHeight > loadedHeight && dataPages.length === 1 && model) {
+    status = await fetchPage(layout.qHyperCube.qDataPages, dataMatrix, model, fullHeight, loadedHeight, 0, layout.rowLimit / pageSize || 10);
+  } else {
+    dataPages.forEach((page, i) => {
+      i > 0 ? dataMatrix.push(...page.qMatrix) : '';
+    });
+  }
-  return function getDataMatrix(_x8, _x9) {
-    return _ref.apply(this, arguments);
+  return {
+    status,
+    dataMatrix
   };
-}();
+};
 function getAttributeIndecies(attrsInfo) {
   if (attrsInfo && attrsInfo.length) {
-    var indecies = [];
-    attrsInfo.forEach(function (attr, i) {
+    const indecies = [];
+    attrsInfo.forEach((attr, i) => {
       if (attributeIDs[attr.id]) {
         indecies.push({
           prop: attributeIDs[attr.id],
@@ -5504,8 +5146,8 @@ function getAttributeIndecies(attrsInfo) {
   return [];
 }
 function getAttributes(indecies, qAttrExps) {
-  var attributes = {};
-  indecies.forEach(function (attr) {
+  const attributes = {};
+  indecies.forEach(attr => {
     if (attr.prop === 'color') {
       attributes[attr.prop] = colorUtils.resolveExpression(qAttrExps.qValues[attr.index].qText);
     } else {
@@ -5515,10 +5157,10 @@ function getAttributes(indecies, qAttrExps) {
   return attributes;
 }
 function getAllTreeElemNo(node, activate) {
-  var idList = [];
+  const idList = [];
-  var pushChildrenIds = function pushChildrenIds(currentNode) {
-    currentNode.children.forEach(function (child) {
+  const pushChildrenIds = currentNode => {
+    currentNode.children.forEach(child => {
       child.data.selected = activate;
       idList.push(child.data.elemNo);
@@ -5536,7 +5178,7 @@ function haveNoChildren(nodes) {
     return true;
   }
-  for (var i = 0; i < nodes.length; ++i) {
+  for (let i = 0; i < nodes.length; ++i) {
     if (nodes[i].children !== undefined) {
       return false;
     }
@@ -5545,16 +5187,16 @@ function haveNoChildren(nodes) {
   return true;
 }
 function createNodes(matrix, attributeIndecies, status, navigationMode, translator) {
-  var nodeMap = {};
-  var allNodes = [];
-  for (var i = 0; i < matrix.length; ++i) {
-    var row = matrix[i];
-    var id = getId(row);
-    var parentId = getParentId(row);
-    var node = {
-      id: id,
-      parentId: parentId,
+  const nodeMap = {};
+  const allNodes = [];
+  for (let i = 0; i < matrix.length; ++i) {
+    const row = matrix[i];
+    const id = getId(row);
+    const parentId = getParentId(row);
+    const node = {
+      id,
+      parentId,
       children: [],
       elemNo: row[0].qElemNumber,
       attributes: getAttributes(attributeIndecies, row[0].qAttrExps),
@@ -5565,20 +5207,21 @@ function createNodes(matrix, attributeIndecies, status, navigationMode, translat
     allNodes.push(node);
   }
-  var rootNodes = [];
-  var maxNodeWarning = false;
+  const rootNodes = [];
+  let maxNodeWarning = false;
-  for (var _i = 0; _i < allNodes.length; ++_i) {
-    var _node = allNodes[_i];
-    var parentNode = nodeMap[_node.parentId];
-    _node.parent = parentNode;
+  for (let i = 0; i < allNodes.length; ++i) {
+    const node = allNodes[i];
+    const parentNode = nodeMap[node.parentId];
+    node.parent = parentNode;
     if (parentNode) {
-      parentNode.children.length > 98 ? maxNodeWarning = true : parentNode.children.push(_objectSpread2({
-        childNumber: parentNode.children.length
-      }, _node));
+      parentNode.children.length > 98 ? maxNodeWarning = true : parentNode.children.push({
+        childNumber: parentNode.children.length,
+        ...node
+      });
     } else {
-      rootNodes.length > 98 ? maxNodeWarning = true : rootNodes.push(_node);
+      rootNodes.length > 98 ? maxNodeWarning = true : rootNodes.push(node);
     }
   } // We might be able to use the rootnodes lenght as well
@@ -5591,7 +5234,7 @@ function createNodes(matrix, attributeIndecies, status, navigationMode, translat
     };
   }
-  var warn = [];
+  const warn = [];
   if (status === MAX_DATA) {
     warn.push(translator.get('Object.OrgChart.MaxData'));
@@ -5615,16 +5258,16 @@ function createNodes(matrix, attributeIndecies, status, navigationMode, translat
   warn.push(translator.get('Object.OrgChart.DummyWarn'));
-  var rootNode = {
+  const rootNode = {
     id: 'Root',
     name: translator.get('Object.OrgChart.DummyRoot'),
     isDummy: true,
     // Should be rendered in a specific way?
-    warn: warn,
+    warn,
     children: rootNodes,
-    navigationMode: navigationMode
+    navigationMode
   };
-  rootNodes.forEach(function (node, i) {
+  rootNodes.forEach((node, i) => {
     // eslint-disable-next-line no-param-reassign
     node.parentId = 'Root'; // eslint-disable-next-line no-param-reassign
@@ -5634,87 +5277,50 @@ function createNodes(matrix, attributeIndecies, status, navigationMode, translat
   });
   return rootNode;
 }
-function transform(_x10) {
-  return _transform.apply(this, arguments);
-}
-function _transform() {
-  _transform = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(_ref2) {
-    var layout, model, translator, _yield$getDataMatrix, status, dataMatrix, attributeIndecies;
-    return regeneratorRuntime.wrap(function _callee3$(_context3) {
-      while (1) {
-        switch (_context3.prev = _context3.next) {
-          case 0:
-            layout = _ref2.layout, model = _ref2.model, translator = _ref2.translator;
-            if (layout.qHyperCube) {
-              _context3.next = 3;
-              break;
-            }
-            throw new Error('Require a hypercube');
-          case 3:
-            if (!(layout.qHyperCube.qDimensionInfo.length < 2)) {
-              _context3.next = 5;
-              break;
-            }
-            return _context3.abrupt("return", false);
-          case 5:
-            _context3.next = 7;
-            return getDataMatrix(layout, model);
-          case 7:
-            _yield$getDataMatrix = _context3.sent;
-            status = _yield$getDataMatrix.status;
-            dataMatrix = _yield$getDataMatrix.dataMatrix;
-            attributeIndecies = getAttributeIndecies(layout.qHyperCube.qDimensionInfo[0].qAttrExprInfo);
-            if (dataMatrix) {
-              _context3.next = 13;
-              break;
-            }
+async function transform({
+  layout,
+  model,
+  translator
+}) {
+  if (!layout.qHyperCube) {
+    throw new Error('Require a hypercube');
+  }
-            return _context3.abrupt("return", null);
+  if (layout.qHyperCube.qDimensionInfo.length < 2) {
+    return false; // throw new Error('Require at least two dimensions');
+  }
-          case 13:
-            if (!(dataMatrix.length < 1)) {
-              _context3.next = 15;
-              break;
-            }
+  const {
+    status,
+    dataMatrix
+  } = await getDataMatrix(layout, model);
+  const attributeIndecies = getAttributeIndecies(layout.qHyperCube.qDimensionInfo[0].qAttrExprInfo);
-            return _context3.abrupt("return", null);
+  if (!dataMatrix) {
+    return null;
+  }
-          case 15:
-            return _context3.abrupt("return", createNodes(dataMatrix, attributeIndecies, status, layout.navigationMode, translator));
+  if (dataMatrix.length < 1) {
+    return null;
+  }
-          case 16:
-          case "end":
-            return _context3.stop();
-        }
-      }
-    }, _callee3);
-  }));
-  return _transform.apply(this, arguments);
+  return createNodes(dataMatrix, attributeIndecies, status, layout.navigationMode, translator);
 }
-var cardPadding = 8;
-var buttonMargin = 16;
-var buttonHeight = 24;
-var constants = {
+const cardPadding = 8;
+const buttonMargin = 16;
+const buttonHeight = 24;
+const constants = {
   cardWidth: 152,
   cardHeight: 64,
   widthMargin: 32,
   heightMargin: buttonHeight + cardPadding * 2 + buttonMargin,
-  buttonMargin: buttonMargin,
+  buttonMargin,
   leafMargin: 16,
-  cardPadding: cardPadding,
+  cardPadding,
   buttonWidth: 48,
   // TODO: might need to be dynamic
-  buttonHeight: buttonHeight,
+  buttonHeight,
   rootDiameter: 20,
   r: 4,
   tooltipWidth: 240,
@@ -5723,9 +5329,11 @@ var constants = {
   minZoom: 0.2
 };
-var widthTranslation = function widthTranslation(d, widthSpacing, element, axis, initialZoomState, navigationMode) {
-  var buttonMargin = constants.buttonMargin;
-  var initialX = initialZoomState && initialZoomState.initialX || 0;
+const widthTranslation = (d, widthSpacing, element, axis, initialZoomState, navigationMode) => {
+  const {
+    buttonMargin
+  } = constants;
+  const initialX = initialZoomState && initialZoomState.initialX || 0;
   if (navigationMode === 'expandAll') {
     d[axis] = d.x + initialX;
@@ -5749,10 +5357,12 @@ var widthTranslation = function widthTranslation(d, widthSpacing, element, axis,
   return d[axis];
 };
-var depthTranslation = function depthTranslation(d, depthSpacing, axis, initialZoomState, navigationMode) {
-  var cardHeight = constants.cardHeight,
-      leafMargin = constants.leafMargin;
-  var initialY = initialZoomState && initialZoomState.initialY || 0;
+const depthTranslation = (d, depthSpacing, axis, initialZoomState, navigationMode) => {
+  const {
+    cardHeight,
+    leafMargin
+  } = constants;
+  const initialY = initialZoomState && initialZoomState.initialY || 0;
   if (d.parent && d.parent.data.id !== 'Root' && navigationMode !== 'expandAll' && haveNoChildren(d.parent.children)) {
     d[axis] = d.parent.y + depthSpacing + d.data.childNumber * (cardHeight + leafMargin) + initialY;
@@ -5763,28 +5373,26 @@ var depthTranslation = function depthTranslation(d, depthSpacing, axis, initialZ
   return d[axis];
 };
 function position(orientation, element, initialZoomState, navigationMode) {
-  var widthMargin = constants.widthMargin,
-      heightMargin = constants.heightMargin,
-      cardWidth = constants.cardWidth,
-      cardHeight = constants.cardHeight,
-      cardPadding = constants.cardPadding;
-  var widthSpacing;
-  var depthSpacing;
-  var orientations;
+  const {
+    widthMargin,
+    heightMargin,
+    cardWidth,
+    cardHeight,
+    cardPadding
+  } = constants;
+  let widthSpacing;
+  let depthSpacing;
+  let orientations;
   switch (orientation) {
     case 'ttb':
       widthSpacing = cardWidth + widthMargin;
       depthSpacing = navigationMode === 'expandAll' ? cardHeight + 2 * cardPadding : cardHeight + heightMargin;
       orientations = {
-        depthSpacing: depthSpacing,
+        depthSpacing,
         isVertical: true,
-        x: function x(d) {
-          return widthTranslation(d, widthSpacing, element, 'xActual', initialZoomState, navigationMode);
-        },
-        y: function y(d) {
-          return depthTranslation(d, depthSpacing, 'yActual', initialZoomState, navigationMode);
-        }
+        x: d => widthTranslation(d, widthSpacing, element, 'xActual', initialZoomState, navigationMode),
+        y: d => depthTranslation(d, depthSpacing, 'yActual', initialZoomState, navigationMode)
       };
       break;
   }
@@ -5792,63 +5400,88 @@ function position(orientation, element, initialZoomState, navigationMode) {
   return orientations;
 }
-var encodeUtils = {
-  encodeTitle: function encodeTitle(input) {
-    var encodingDiv = document.createElement('div');
-    var textNode = document.createTextNode(input);
+const encodeUtils = {
+  encodeTitle: input => {
+    const encodingDiv = document.createElement('div');
+    const textNode = document.createTextNode(input);
     encodingDiv.appendChild(textNode);
     return encodingDiv.innerHTML;
+  },
+  encodeCssColor: input => {
+    const immune = ['#', ' ', '(', ')'];
+    let encoded = '';
+    for (let i = 0; i < input.length; i++) {
+      const ch = input.charAt(i);
+      const cc = input.charCodeAt(i);
+      if (!ch.match(/[a-zA-Z0-9]/) && immune.indexOf(ch) < 0) {
+        const hex = cc.toString(16);
+        const pad = '000000'.substr(hex.length);
+        encoded += `\\${pad}${hex}`;
+      } else {
+        encoded += ch;
+      }
+    }
+    return encoded;
   }
 };
+function resolveColor(color) {
+  const resolvedColor = colorUtils.resolveExpression(color);
+  return resolvedColor !== 'none' ? resolvedColor : encodeUtils.encodeCssColor(color);
+}
 function getBackgroundColor(data, cardStyling) {
-  var color = cardStyling.backgroundColor;
   if (data.attributes && data.attributes.color) {
-    var resolvedColor = colorUtils.resolveExpression(data.attributes.color);
-    color = resolvedColor !== 'none' ? resolvedColor : color;
+    const resolvedColor = colorUtils.resolveExpression(data.attributes.color);
+    if (resolvedColor !== 'none') {
+      return resolvedColor;
+    }
   }
-  return color;
+  return resolveColor(cardStyling.backgroundColor);
 }
 function getFontColor(cardStyling, backgroundColor) {
   if (cardStyling.fontColor === 'default') {
-    return colorUtils.isDarkColor(backgroundColor) ? '#e6e6e6' : '#484848';
+    return colorUtils.isDarkColor(backgroundColor) ? DEFAULTS.FONT_COLOR_LIGHT.color : DEFAULTS.FONT_COLOR_DARK.color;
   }
   return cardStyling.fontColor;
 }
-var card = (function (data, cardStyling, selectionObj) {
-  var api = selectionObj.api,
-      state = selectionObj.state;
-  var isSelected = api && api.isActive() && state.indexOf(data.elemNo) !== -1;
-  var backgroundColor = getBackgroundColor(data, cardStyling);
-  var fontColor = getFontColor(cardStyling, backgroundColor);
-  var attributes = data.attributes || {};
-  var html = "<div class=\"sn-org-card-title\">".concat(encodeUtils.encodeTitle(attributes.label || data.id), "</div>");
+var card = ((data, cardStyling, selectionObj) => {
+  const {
+    api,
+    state
+  } = selectionObj;
+  const isSelected = api && api.isActive() && state.indexOf(data.elemNo) !== -1;
+  const backgroundColor = getBackgroundColor(data, cardStyling);
+  const fontColor = resolveColor(getFontColor(cardStyling, backgroundColor));
+  const attributes = data.attributes || {};
+  let html = `<div class="sn-org-card-title">${encodeUtils.encodeTitle(attributes.label || data.id)}</div>`;
   if (attributes.subLabel) {
-    html += "<div class=\"sn-org-card-label\">".concat(encodeUtils.encodeTitle(attributes.subLabel), "</div>");
+    html += `<div class="sn-org-card-label">${encodeUtils.encodeTitle(attributes.subLabel)}</div>`;
   }
   if (data.measure) {
-    var measureLabel = cardStyling.measureLabel ? "".concat(cardStyling.measureLabel, ": ") : '';
-    html += "<div class=\"sn-org-card-label\">".concat(encodeUtils.encodeTitle(measureLabel + data.measure), "</div>");
+    const measureLabel = cardStyling.measureLabel ? `${cardStyling.measureLabel}: ` : '';
+    html += `<div class="sn-org-card-label">${encodeUtils.encodeTitle(measureLabel + data.measure)}</div>`;
   } else if (attributes.extraLabel) {
-    html += "<div class=\"sn-org-card-label\">".concat(encodeUtils.encodeTitle(attributes.extraLabel), "</div>");
+    html += `<div class="sn-org-card-label">${encodeUtils.encodeTitle(attributes.extraLabel)}</div>`;
   }
-  var selectedClass = api && api.isActive() ? isSelected ? ' selected' : ' not-selected' : '';
-  var _cardStyling$border = cardStyling.border,
-      _cardStyling$border$t = _cardStyling$border.top,
-      top = _cardStyling$border$t === void 0 ? true : _cardStyling$border$t,
-      fullBorder = _cardStyling$border.fullBorder,
-      _cardStyling$border$c = _cardStyling$border.colorType,
-      colorType = _cardStyling$border$c === void 0 ? 'auto' : _cardStyling$border$c;
-  var borderColor = colorType === 'auto' ? colorUtils.getDarkColor(backgroundColor) : cardStyling.borderColor;
-  var topBorder = top && !isSelected ? "3px solid ".concat(borderColor) : '';
-  var borderStyle = fullBorder && !isSelected ? "1px solid ".concat(borderColor) : '';
-  var newCardHeight = constants.cardHeight;
+  const selectedClass = api && api.isActive() ? isSelected ? ' selected' : ' not-selected' : '';
+  const {
+    top = DEFAULTS.BORDER_TOP,
+    fullBorder = DEFAULTS.BORDER_FULL,
+    colorType = DEFAULTS.BORDER_COLOR_TYPE
+  } = cardStyling.border;
+  const borderColor = colorType === 'auto' ? colorUtils.getDarkColor(backgroundColor) : resolveColor(cardStyling.borderColor);
+  const topBorder = top && !isSelected ? `3px solid ${borderColor}` : '';
+  const borderStyle = fullBorder && !isSelected ? `1px solid ${borderColor}` : '';
+  let newCardHeight = constants.cardHeight;
   if (isSelected) {
     newCardHeight -= 8;
@@ -5858,18 +5491,20 @@ var card = (function (data, cardStyling, selectionObj) {
     newCardHeight -= 3;
   }
-  return "<div class=\"sn-org-card-text".concat(selectedClass, "\" style=\"background-color:").concat(backgroundColor, ";color:").concat(fontColor, "; border:").concat(borderStyle, "; border-top:").concat(topBorder, "; height:").concat(newCardHeight, "px;\">").concat(html, "</div>");
+  return `<div class="sn-org-card-text${selectedClass}" style="background-color:${backgroundColor};color:${fontColor}; border:${borderStyle}; border-top:${topBorder}; height:${newCardHeight}px;">${html}</div>`;
 });
 var selections = {
-  select: function select(node, selectionObj) {
-    var api = selectionObj.api,
-        state = selectionObj.state,
-        singleSelect = selectionObj.singleSelect,
-        setState = selectionObj.setState;
+  select: (node, selectionObj) => {
+    const {
+      api,
+      state,
+      singleSelect,
+      setState
+    } = selectionObj;
     if (node && api) {
-      var newState;
+      let newState;
       if (node.data.elemNo < 0 && node.data.elemNo !== -3) {
         return;
@@ -5886,9 +5521,9 @@ var selections = {
         newState = state.concat();
       }
-      var ind = newState.indexOf(node.data.elemNo);
-      var activate = ind === -1;
-      var linkedIds = [];
+      const ind = newState.indexOf(node.data.elemNo);
+      const activate = ind === -1;
+      let linkedIds = [];
       if (!singleSelect) {
         linkedIds = getAllTreeElemNo(node, activate);
@@ -5896,13 +5531,13 @@ var selections = {
       if (!activate) {
         newState.splice(ind, 1);
-        linkedIds.forEach(function (id) {
-          var idInd = newState.indexOf(id);
+        linkedIds.forEach(id => {
+          const idInd = newState.indexOf(id);
           idInd !== -1 && newState.splice(idInd, 1);
         });
       } else {
         newState.push(node.data.elemNo);
-        linkedIds.forEach(function (id) {
+        linkedIds.forEach(id => {
           if (newState.indexOf(id) === -1) {
             newState.push(id);
           }
@@ -5924,34 +5559,33 @@ var selections = {
 };
 function createTooltip(element) {
-  var tooltip = select(element).append('div').attr('class', 'sn-org-tooltip').on('mousedown', function () {
+  const tooltip = select(element).append('div').attr('class', 'sn-org-tooltip').on('mousedown', () => {
     tooltip.classed('sn-org-tooltip-visible', false);
   });
   return tooltip;
 }
 function getTooltipStyle(d, containerHeight, x, y, transform) {
-  var cardWidth = constants.cardWidth,
-      tooltipPadding = constants.tooltipPadding;
-  var halfCardWidth = cardWidth / 2;
-  var yLocation = containerHeight - (y(d) * transform.zoom + transform.y - tooltipPadding);
-  var xLocation = x(d) * transform.zoom + transform.x + halfCardWidth * transform.zoom;
-  return "bottom:".concat(yLocation, "px;left:").concat(xLocation, "px;");
+  const {
+    cardWidth,
+    tooltipPadding
+  } = constants;
+  const halfCardWidth = cardWidth / 2;
+  const yLocation = containerHeight - (y(d) * transform.zoom + transform.y - tooltipPadding);
+  const xLocation = x(d) * transform.zoom + transform.x + halfCardWidth * transform.zoom;
+  return `bottom:${yLocation}px;left:${xLocation}px;`;
 }
 function getTooltipContent(d, styling) {
-  var label = d.data.attributes.label || d.data.id;
-  var subLabel = d.data.attributes.subLabel ? "".concat(d.data.attributes.subLabel, "<br />") : '';
-  var extraLabel = d.data.attributes.extraLabel ? "".concat(d.data.attributes.extraLabel, "<br />") : '';
-  var measure = d.data.measure ? "".concat(styling.measureLabel ? "".concat(styling.measureLabel, ": ") : '').concat(d.data.measure) : '';
-  return "<div class=\"sn-org-tooltip-inner\"><div class=\"sn-org-tooltip-header\">".concat(label, "</div>").concat(subLabel).concat(extraLabel).concat(measure, "</div>");
-}
-function openTooltip(tooltip, d, containerHeight, styling, x, y, transform) {
-  var delay = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 250;
+  const label = encodeUtils.encodeTitle(d.data.attributes.label || d.data.id);
+  const subLabel = d.data.attributes.subLabel ? `${encodeUtils.encodeTitle(d.data.attributes.subLabel)}<br />` : '';
+  const extraLabel = d.data.attributes.extraLabel ? `${encodeUtils.encodeTitle(d.data.attributes.extraLabel)}<br />` : '';
+  const measure = encodeUtils.encodeTitle(d.data.measure ? `${styling.measureLabel ? `${styling.measureLabel}: ` : ''}${d.data.measure}` : '');
+  return `<div class="sn-org-tooltip-inner"><div class="sn-org-tooltip-header">${label}</div>${subLabel}${extraLabel}${measure}</div>`;
+}
+function openTooltip(tooltip, d, containerHeight, styling, x, y, transform, delay = 250) {
   tooltip.active = true;
-  tooltip.timeout = setTimeout(function () {
+  tooltip.timeout = setTimeout(() => {
     if (tooltip.active) {
-      tooltip.html(getTooltipContent(d, styling)).classed('sn-org-tooltip-visible', true).attr('style', function () {
-        return getTooltipStyle(d, containerHeight, x, y, transform);
-      });
+      tooltip.html(getTooltipContent(d, styling)).classed('sn-org-tooltip-visible', true).attr('style', () => getTooltipStyle(d, containerHeight, x, y, transform));
     }
   }, delay);
 }
@@ -5961,22 +5595,22 @@ function closeTooltip(tooltip) {
   tooltip.classed('sn-org-tooltip-visible', false);
 }
-var getSign = function getSign(d, _ref, ancestorIds) {
-  var topId = _ref.topId,
-      isExpanded = _ref.isExpanded,
-      expandedChildren = _ref.expandedChildren;
+const getSign = (d, {
+  topId,
+  isExpanded,
+  expandedChildren
+}, ancestorIds) => {
   if (d.data.id === topId && isExpanded || d.parent && d.parent.data.id === topId && expandedChildren.includes(d.data.id) || ancestorIds.includes(d.data.id)) {
     return '-';
   }
   return '+';
 };
-var getNewState = function getNewState(d, _ref2, ancestorIds) {
-  var topId = _ref2.topId,
-      isExpanded = _ref2.isExpanded,
-      expandedChildren = _ref2.expandedChildren;
+const getNewState = (d, {
+  topId,
+  isExpanded,
+  expandedChildren
+}, ancestorIds) => {
   if (d.data.id === topId) {
     // top
     isExpanded = !isExpanded;
@@ -5988,11 +5622,7 @@ var getNewState = function getNewState(d, _ref2, ancestorIds) {
     expandedChildren = [];
   } else if (d.parent.data.id === topId) {
     // children
-    var expandedHaveNoChildren = d.parent.children.filter(function (sibling) {
-      return expandedChildren.includes(sibling.data.id);
-    }).every(function (n) {
-      return haveNoChildren(n.children);
-    });
+    const expandedHaveNoChildren = d.parent.children.filter(sibling => expandedChildren.includes(sibling.data.id)).every(n => haveNoChildren(n.children));
     if (expandedChildren.includes(d.data.id)) {
       // Collapse if already exists in expandedChildren
@@ -6012,91 +5642,72 @@ var getNewState = function getNewState(d, _ref2, ancestorIds) {
   }
   return {
-    topId: topId,
-    isExpanded: isExpanded,
-    expandedChildren: expandedChildren
+    topId,
+    isExpanded,
+    expandedChildren
   };
 };
-function box(_ref3) {
-  var positioning = _ref3.positioning,
-      divBox = _ref3.divBox,
-      nodes = _ref3.nodes,
-      styling = _ref3.styling,
-      setExpandedCallback = _ref3.setExpandedCallback,
-      wrapperState = _ref3.wrapperState,
-      selectionObj = _ref3.selectionObj,
-      navigationMode = _ref3.navigationMode,
-      element = _ref3.element,
-      tooltip = _ref3.tooltip;
-  var x = positioning.x,
-      y = positioning.y;
-  var cardWidth = constants.cardWidth,
-      cardHeight = constants.cardHeight,
-      buttonWidth = constants.buttonWidth,
-      buttonHeight = constants.buttonHeight,
-      cardPadding = constants.cardPadding,
-      rootDiameter = constants.rootDiameter;
-  var topId = wrapperState.expandedState.topId;
-  var topNode = nodes.find(function (node) {
-    return node.data.id === topId;
-  });
-  var ancestorIds = topNode && topNode.parent ? topNode.parent.ancestors().map(function (anc) {
-    return anc.data.id;
-  }) : [];
-  var touchmode = document.getElementsByTagName('html')[0].classList.contains('touch-on'); // dummy root
-  divBox.selectAll('.sn-org-nodes').data(nodes.filter(function (node) {
-    return node.parent && node.parent.data.id === 'Root';
-  })).enter().append('div').attr('class', 'sn-org-root').attr('style', function (d) {
-    return "top:".concat(y(d) - rootDiameter - cardPadding, "px;left:").concat(x(d) + (cardWidth - rootDiameter) / 2, "px");
-  }).attr('id', function (d) {
-    return d.data.id;
-  }); // cards
-  divBox.selectAll('.sn-org-nodes').data(nodes.filter(function (node) {
-    return node.data.id !== 'Root';
-  })).enter().append('div').attr('class', 'sn-org-card').attr('style', function (d) {
-    return "width:".concat(cardWidth, "px;height:").concat(cardHeight, "px; top:").concat(y(d), "px;left:").concat(x(d), "px;");
-  }).attr('id', function (d) {
-    return d.data.id;
-  }).on('click', function (node) {
-    if (!wrapperState.constraints.select && node.data.id !== 'Root') {
+function box({
+  positioning,
+  divBox,
+  nodes,
+  styling,
+  setExpandedCallback,
+  wrapperState,
+  selectionObj,
+  navigationMode,
+  element,
+  tooltip
+}) {
+  const {
+    x,
+    y
+  } = positioning;
+  const {
+    cardWidth,
+    cardHeight,
+    buttonWidth,
+    buttonHeight,
+    cardPadding,
+    rootDiameter
+  } = constants;
+  const {
+    topId
+  } = wrapperState.expandedState;
+  const topNode = nodes.find(node => node.data.id === topId);
+  const ancestorIds = topNode && topNode.parent ? topNode.parent.ancestors().map(anc => anc.data.id) : [];
+  const touchmode = document.getElementsByTagName('html')[0].classList.contains('touch-on'); // dummy root
+  divBox.selectAll('.sn-org-nodes').data(nodes.filter(node => node.parent && node.parent.data.id === 'Root')).enter().append('div').attr('class', 'sn-org-root').attr('style', d => `top:${y(d) - rootDiameter - cardPadding}px;left:${x(d) + (cardWidth - rootDiameter) / 2}px`).attr('id', d => d.data.id); // cards
+  divBox.selectAll('.sn-org-nodes').data(nodes.filter(node => node.data.id !== 'Root')).enter().append('div').attr('class', 'sn-org-card').attr('style', d => `width:${cardWidth}px;height:${cardHeight}px; top:${y(d)}px;left:${x(d)}px;`).attr('id', d => d.data.id).on('click', node => {
+    if (!wrapperState.constraints.active && node.data.id !== 'Root') {
       touchmode && openTooltip(tooltip, node, element.clientHeight, styling, x, y, wrapperState.transform, 0);
       selections.select(node, selectionObj);
     }
-  }).html(function (d) {
-    return card(d.data, styling, selectionObj);
-  }).on('mouseenter', function (d) {
+  }).html(d => card(d.data, styling, selectionObj)).on('mouseenter', d => {
     if (!touchmode && !wrapperState.constraints.active && event.buttons === 0) {
       openTooltip(tooltip, d, element.clientHeight, styling, x, y, wrapperState.transform);
     }
-  }).on('mouseleave', function () {
+  }).on('mouseleave', () => {
     !touchmode && closeTooltip(tooltip);
-  }).on('mousedown', function () {
+  }).on('mousedown', () => {
     closeTooltip(tooltip);
-  }).on('touchmove', function () {
+  }).on('touchmove', () => {
     closeTooltip(tooltip);
-  }).on('wheel', function () {
+  }).on('wheel', () => {
     closeTooltip(tooltip);
   }); // expand/collapse
   if (navigationMode !== 'expandAll') {
-    divBox.selectAll('.sn-org-nodes').data(nodes.filter(function (node) {
-      return !!node.children && node.data.id !== 'Root';
-    })).enter().append('div').attr('class', 'sn-org-traverse').attr('style', function (d) {
-      return "width:".concat(buttonWidth, "px;height:").concat(buttonHeight, "px;top:").concat(y(d) + cardHeight + cardPadding, "px;left:").concat(x(d) + (cardWidth - buttonWidth) / 2, "px;");
-    }).attr('id', function (d) {
-      return "".concat(d.data.id, "-expand");
-    }).on('mouseenter', function () {
+    divBox.selectAll('.sn-org-nodes').data(nodes.filter(node => !!node.children && node.data.id !== 'Root')).enter().append('div').attr('class', 'sn-org-traverse').attr('style', d => `width:${buttonWidth}px;height:${buttonHeight}px;top:${y(d) + cardHeight + cardPadding}px;left:${x(d) + (cardWidth - buttonWidth) / 2}px;`).attr('id', d => `${d.data.id}-expand`).on('mouseenter', () => {
       if (!wrapperState.constraints.active) event.target.style.cursor = 'pointer';
-    }).on('click', function (d) {
+    }).on('click', d => {
       if (!wrapperState.constraints.active) {
         setExpandedCallback(getNewState(d, wrapperState.expandedState, ancestorIds));
         event.stopPropagation();
       }
-    }).html(function (d) {
-      return "".concat(getSign(d, wrapperState.expandedState, ancestorIds), " ").concat(d.data.children.length);
-    });
+    }).html(d => `${getSign(d, wrapperState.expandedState, ancestorIds)} ${d.data.children.length}`);
   } // go up only necessary in page navigation mode
   // if (navigationMode !== 'free') {
   //   divBox
@@ -6122,31 +5733,34 @@ function box(_ref3) {
 }
-function getPoints(d, topId, _ref, navigationMode) {
-  var depthSpacing = _ref.depthSpacing,
-      isVertical = _ref.isVertical,
-      x = _ref.x,
-      y = _ref.y;
+function getPoints(d, topId, {
+  depthSpacing,
+  isVertical,
+  x,
+  y
+}, navigationMode) {
   // TODO: Generalize to make all directions work, currently on only ttb working
-  var cardWidth = constants.cardWidth,
-      cardHeight = constants.cardHeight,
-      buttonHeight = constants.buttonHeight,
-      cardPadding = constants.cardPadding,
-      buttonMargin = constants.buttonMargin;
-  var points = [];
-  var halfCard = {
+  const {
+    cardWidth,
+    cardHeight,
+    buttonHeight,
+    cardPadding,
+    buttonMargin
+  } = constants;
+  const points = [];
+  const halfCard = {
     x: cardWidth / 2,
     y: cardHeight / 2
   };
-  var start = {
+  const start = {
     x: d.xActual,
     y: d.yActual
   }; // TODO: fix so auto mode does not get a path to parent not showing
   if (d.parent && d.parent.data.id !== 'Root') {
-    var halfDepth = depthSpacing / 2;
-    var yOffset = navigationMode === 'expandAll' ? cardHeight : cardHeight + cardPadding + buttonHeight;
-    var end = {
+    const halfDepth = depthSpacing / 2;
+    const yOffset = navigationMode === 'expandAll' ? cardHeight : cardHeight + cardPadding + buttonHeight;
+    const end = {
       x: x(d.parent) + halfCard.x,
       y: y(d.parent) + yOffset
     };
@@ -6247,12 +5861,14 @@ function getPoints(d, topId, _ref, navigationMode) {
 }
 function getPath(points) {
   // gets the path from first to last points, making turns with radius r at intermediate points
-  var r = constants.r;
-  var pathString = "M ".concat(points[0].x, " ").concat(points[0].y, " ");
-  var dir;
-  var setDir = function setDir(i) {
-    var delta = {
+  const {
+    r
+  } = constants;
+  let pathString = `M ${points[0].x} ${points[0].y} `;
+  let dir;
+  const setDir = i => {
+    const delta = {
       x: points[i].x - points[i - 1].x,
       y: points[i].y - points[i - 1].y
     };
@@ -6264,46 +5880,46 @@ function getPath(points) {
   setDir(1);
-  for (var i = 1; i < points.length; ++i) {
-    var point = points[i];
+  for (let i = 1; i < points.length; ++i) {
+    const point = points[i];
     if (i < points.length - 1) {
-      pathString += "L ".concat(point.x - dir.x * r, " ").concat(point.y - dir.y * r, " ");
+      pathString += `L ${point.x - dir.x * r} ${point.y - dir.y * r} `;
       setDir(i + 1);
-      pathString += "Q ".concat(point.x, " ").concat(point.y, " ").concat(point.x + dir.x * r, " ").concat(point.y + dir.y * r, " ");
+      pathString += `Q ${point.x} ${point.y} ${point.x + dir.x * r} ${point.y + dir.y * r} `;
     } else {
       // Don't add curve for last point
-      pathString += "L ".concat(point.x, " ").concat(point.y, " ");
+      pathString += `L ${point.x} ${point.y} `;
     }
   }
   return pathString;
 }
 function createPaths(node, positioning, topId, navigationMode) {
-  node.append('path').attr('class', 'sn-org-path').attr('id', function (d) {
-    return d.data.id;
-  }).attr('d', function (d) {
-    var path = '';
-    var pointSets = getPoints(d, topId, positioning, navigationMode);
-    pointSets.forEach(function (points) {
+  node.append('path').attr('class', 'sn-org-path').attr('id', d => d.data.id).attr('d', d => {
+    let path = '';
+    const pointSets = getPoints(d, topId, positioning, navigationMode);
+    pointSets.forEach(points => {
       path += getPath(points).slice(0, -1);
     });
     return path;
   });
 }
-var getBBoxOfNodes = function getBBoxOfNodes(nodes) {
-  var cardWidth = constants.cardWidth,
-      cardHeight = constants.cardHeight,
-      buttonHeight = constants.buttonHeight,
-      buttonMargin = constants.buttonMargin;
-  var bbox = {
+const getBBoxOfNodes = nodes => {
+  const {
+    cardWidth,
+    cardHeight,
+    buttonHeight,
+    buttonMargin
+  } = constants;
+  const bbox = {
     left: Infinity,
     top: Infinity,
     right: -Infinity,
     bottom: -Infinity
   };
-  nodes.forEach(function (node) {
+  nodes.forEach(node => {
     bbox.left = Math.min(node.xActual, bbox.left);
     bbox.top = Math.min(node.yActual, bbox.top);
     bbox.right = Math.max(node.xActual, bbox.right);
@@ -6316,19 +5932,25 @@ var getBBoxOfNodes = function getBBoxOfNodes(nodes) {
     height: bbox.bottom - bbox.top + cardHeight + (buttonHeight + buttonMargin) * 2
   };
 };
-var getInitialZoomState = function getInitialZoomState(bBox, element, navigationMode) {
-  var widthMargin = constants.widthMargin,
-      cardHeight = constants.cardHeight,
-      minZoom = constants.minZoom;
-  var maxZoom = navigationMode === 'expandAll' ? Infinity : constants.maxZoom;
-  var width = bBox.width,
-      height = bBox.height;
-  var clientHeight = element.clientHeight,
-      clientWidth = element.clientWidth;
-  var calcWidth = width + 2 * widthMargin;
-  var calcHeight = height + cardHeight;
-  var xZoom = Math.max(Math.min(calcWidth / clientWidth, maxZoom), minZoom);
-  var yZoom = Math.max(Math.min(calcHeight / clientHeight, maxZoom), minZoom);
+const getInitialZoomState = (bBox, element, navigationMode) => {
+  const {
+    widthMargin,
+    cardHeight,
+    minZoom
+  } = constants;
+  const maxZoom = navigationMode === 'expandAll' ? Infinity : constants.maxZoom;
+  const {
+    width,
+    height
+  } = bBox;
+  const {
+    clientHeight,
+    clientWidth
+  } = element;
+  const calcWidth = width + 2 * widthMargin;
+  const calcHeight = height + cardHeight;
+  const xZoom = Math.max(Math.min(calcWidth / clientWidth, maxZoom), minZoom);
+  const yZoom = Math.max(Math.min(calcHeight / clientHeight, maxZoom), minZoom);
   if (xZoom > yZoom) {
     // Zooming for x direction
@@ -6346,45 +5968,50 @@ var getInitialZoomState = function getInitialZoomState(bBox, element, navigation
     initialZoom: yZoom
   };
 };
-var applyTransform = function applyTransform(eventTransform, svg, divBox, width, height) {
-  var scaleFactor = eventTransform.k;
-  var translation = "".concat(eventTransform.x, "px, ").concat(eventTransform.y, "px");
+const applyTransform = (eventTransform, svg, divBox, width, height) => {
+  const scaleFactor = eventTransform.k;
+  const translation = `${eventTransform.x}px, ${eventTransform.y}px`;
   svg.attr('transform', eventTransform);
   divBox.classed('org-disable-transition', true);
   svg.classed('org-disable-transition', true);
-  divBox.attr('style', "width:".concat(width, "px;height:").concat(height, "px; transform: translate(").concat(translation, ") scale(").concat(scaleFactor, ")"));
+  divBox.attr('style', `width:${width}px;height:${height}px; transform: translate(${translation}) scale(${scaleFactor})`);
 };
-function setZooming(_ref) {
-  var containerData = _ref.containerData,
-      setTransform = _ref.setTransform,
-      transformState = _ref.transformState,
-      wrapperState = _ref.wrapperState,
-      initialZoomState = _ref.initialZoomState,
-      navigationMode = _ref.navigationMode;
-  var svg = containerData.svg,
-      divBox = containerData.divBox,
-      width = containerData.width,
-      height = containerData.height,
-      zoomWrapper = containerData.zoomWrapper,
-      element = containerData.element,
-      tooltip = containerData.tooltip,
-      homeButton = containerData.homeButton;
-  var _transformState$x = transformState.x,
-      x = _transformState$x === void 0 ? 0 : _transformState$x,
-      _transformState$y = transformState.y,
-      y = _transformState$y === void 0 ? 0 : _transformState$y;
-  var minZoom = constants.minZoom,
-      maxZoom = constants.maxZoom;
-  var zoomFactor = transformState && 1 / transformState.zoom || initialZoomState.initialZoom;
-  var scaleFactor = navigationMode === 'expandAll' ? zoomFactor : Math.max(Math.min(maxZoom, zoomFactor), minZoom); // sends otherwise captured mouse event to handle context menu correctly in sense
-  var bubbleEvent = function bubbleEvent() {
-    var newEvent = document.createEvent('MouseEvents');
+function setZooming({
+  containerData,
+  setTransform,
+  transformState,
+  wrapperState,
+  initialZoomState,
+  navigationMode
+}) {
+  const {
+    svg,
+    divBox,
+    width,
+    height,
+    zoomWrapper,
+    element,
+    tooltip,
+    homeButton
+  } = containerData;
+  const {
+    x = 0,
+    y = 0
+  } = transformState;
+  const {
+    minZoom,
+    maxZoom
+  } = constants;
+  const zoomFactor = transformState && 1 / transformState.zoom || initialZoomState.initialZoom;
+  const scaleFactor = navigationMode === 'expandAll' ? zoomFactor : Math.max(Math.min(maxZoom, zoomFactor), minZoom); // sends otherwise captured mouse event to handle context menu correctly in sense
+  const bubbleEvent = () => {
+    const newEvent = document.createEvent('MouseEvents');
     newEvent.initEvent('mousedown', true, false);
     element.dispatchEvent(newEvent);
   };
-  var zoomed = function zoomed() {
+  const zoomed = () => {
     select(homeButton).attr('class', 'sn-org-homebutton lui-fade-button lui-fade-button--large');
     setTransform({
       zoom: event$1.transform.k / scaleFactor,
@@ -6393,61 +6020,66 @@ function setZooming(_ref) {
     });
     bubbleEvent();
     closeTooltip(tooltip);
-    applyTransform(identity$1.translate(event$1.transform.x, event$1.transform.y).scale(event$1.transform.k / scaleFactor), svg, divBox, width, height);
+    applyTransform(identity.translate(event$1.transform.x, event$1.transform.y).scale(event$1.transform.k / scaleFactor), svg, divBox, width, height);
   };
-  select(zoomWrapper).call(zoom().extent([[0, 0], [width, height]]).filter(function () {
-    return !wrapperState.constraints.active && event$1.type !== 'dblclick' && !(event$1.type === 'mousedown' && event$1.which === 3);
-  }).scaleExtent([navigationMode === 'expandAll' ? 0.8 : minZoom * scaleFactor, maxZoom * scaleFactor]).on('start', bubbleEvent).on('zoom', zoomed));
+  select(zoomWrapper).call(zoom().extent([[0, 0], [width, height]]).filter(() => !wrapperState.constraints.active && event$1.type !== 'dblclick' && !(event$1.type === 'mousedown' && event$1.which === 3)).scaleExtent([navigationMode === 'expandAll' ? 0.8 : minZoom * scaleFactor, maxZoom * scaleFactor]).on('start', bubbleEvent).on('zoom', zoomed));
   setTransform({
     zoom: 1 / scaleFactor,
-    x: x,
-    y: y
+    x,
+    y
   });
-  applyTransform(identity$1.translate(x, y).scale(1 / scaleFactor), svg, divBox, width, height);
+  applyTransform(identity.translate(x, y).scale(1 / scaleFactor), svg, divBox, width, height);
 }
-var getSnapshotZoom = function getSnapshotZoom(rect, viewState, initialTransform) {
+const getSnapshotZoom = (rect, viewState, initialTransform) => {
   if (!viewState) {
-    return identity$1.translate(initialTransform.x, initialTransform.y).scale(initialTransform.zoom);
+    return identity.translate(initialTransform.x, initialTransform.y).scale(initialTransform.zoom);
   }
-  var size = viewState.size;
-  var snapZoom = rect.width / size.w > rect.height / size.h ? rect.height / size.h : rect.width / size.w;
-  var newX = viewState.transform.x * snapZoom;
-  var newY = viewState.transform.y * snapZoom;
-  var newZoom = viewState.transform.zoom * snapZoom;
-  return identity$1.translate(newX, newY).scale(newZoom);
+  const {
+    size
+  } = viewState;
+  const snapZoom = rect.width / size.w > rect.height / size.h ? rect.height / size.h : rect.width / size.w;
+  const newX = viewState.transform.x * snapZoom;
+  const newY = viewState.transform.y * snapZoom;
+  const newZoom = viewState.transform.zoom * snapZoom;
+  return identity.translate(newX, newY).scale(newZoom);
 };
-var singleSelectionIcon = 'M9.5,15 C9.77614237,15 10,15.2238576 10,15.5 C10,15.7761424 9.77614237,16 9.5,16 L6.5,16 C6.22385763,16 6,15.7761424 6,15.5 C6,15.2238576 6.22385763,15 6.5,15 L9.5,15 Z M15.5,13 C15.7761424,13 16,13.2238576 16,13.5 L16,15 C16,15.5522847 15.5522847,16 15,16 L13.5,16 C13.2238576,16 13,15.7761424 13,15.5 C13,15.2238576 13.2238576,15 13.5,15 L14.4,15 C14.7313708,15 15,14.7313708 15,14.4 L15,13.5 C15,13.2238576 15.2238576,13 15.5,13 Z M0.5,13 C0.776142375,13 1,13.2238576 1,13.5 L1,14.4 C1,14.7313708 1.26862915,15 1.6,15 L2.5,15 C2.77614237,15 3,15.2238576 3,15.5 C3,15.7761424 2.77614237,16 2.5,16 L1,16 C0.44771525,16 0,15.5522847 0,15 L0,13.5 C0,13.2238576 0.223857625,13 0.5,13 Z M6.8,9 C6.91045695,9 7,9.08954305 7,9.2 L7,12.8 C7,12.9104569 6.91045695,13 6.8,13 L3.2,13 C3.08954305,13 3,12.9104569 3,12.8 L3,9.2 C3,9.08954305 3.08954305,9 3.2,9 L6.8,9 Z M12.8,9 C12.9104569,9 13,9.08954305 13,9.2 L13,12.8 C13,12.9104569 12.9104569,13 12.8,13 L9.2,13 C9.08954305,13 9,12.9104569 9,12.8 L9,9.2 C9,9.08954305 9.08954305,9 9.2,9 L12.8,9 Z M6,10 L4,10 L4,12 L6,12 L6,10 Z M12,10 L10,10 L10,12 L12,12 L12,10 Z M15.5,6 C15.7761424,6 16,6.22385763 16,6.5 L16,9.5 C16,9.77614237 15.7761424,10 15.5,10 C15.2238576,10 15,9.77614237 15,9.5 L15,6.5 C15,6.22385763 15.2238576,6 15.5,6 Z M0.5,6 C0.776142375,6 1,6.22385763 1,6.5 L1,9.5 C1,9.77614237 0.776142375,10 0.5,10 C0.223857625,10 0,9.77614237 0,9.5 L0,6.5 C0,6.22385763 0.223857625,6 0.5,6 Z M6.8,3 C6.91045695,3 7,3.08954305 7,3.2 L7,6.8 C7,6.91045695 6.91045695,7 6.8,7 L3.2,7 C3.08954305,7 3,6.91045695 3,6.8 L3,3.2 C3,3.08954305 3.08954305,3 3.2,3 L6.8,3 Z M12.8,3 C12.9104569,3 13,3.08954305 13,3.2 L13,6.8 C13,6.91045695 12.9104569,7 12.8,7 L9.2,7 C9.08954305,7 9,6.91045695 9,6.8 L9,3.2 C9,3.08954305 9.08954305,3 9.2,3 L12.8,3 Z M12,4 L10,4 L10,6 L12,6 L12,4 Z M2.5,5.70654635e-14 C2.77614237,5.70654635e-14 3,0.223857625 3,0.5 C3,0.776142375 2.77614237,1 2.5,1 L1.6,1 C1.26862915,1 1,1.26862915 1,1.6 L1,2.5 C1,2.77614237 0.776142375,3 0.5,3 C0.223857625,3 0,2.77614237 0,2.5 L0,1 C0,0.44771525 0.44771525,5.70654635e-14 1,5.70654635e-14 L2.5,5.70654635e-14 Z M15,0 C15.5522847,0 16,0.44771525 16,1 L16,2.5 C16,2.77614237 15.7761424,3 15.5,3 C15.2238576,3 15,2.77614237 15,2.5 L15,1.6 C15,1.26862915 14.7313708,1 14.4,1 L13.5,1 C13.2238576,1 13,0.776142375 13,0.5 C13,0.223857625 13.2238576,0 13.5,0 L15,0 Z M9.5,5.67323966e-14 C9.77614237,5.67323966e-14 10,0.223857625 10,0.5 C10,0.776142375 9.77614237,1 9.5,1 L6.5,1 C6.22385763,1 6,0.776142375 6,0.5 C6,0.223857625 6.22385763,5.67323966e-14 6.5,5.67323966e-14 L9.5,5.67323966e-14 Z';
-var homeIcon = "<span class=\"lui-fade-button__icon sn-org-home-icon\">\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"20\" height=\"20\" viewBox=\"0 0 16 16\">\n                            <defs>\n                              <path id=\"home-a\" d=\"M2,7.9 L8,3.4 L14,7.9 L14,16 L12,16 L12,11.2 C12,11.0895431 11.9104569,11 11.8,11 L9.2,11 C9.08954305,11 9,11.0895431 9,11.2 L9,16 L2,16 L2,7.9 Z M7,13.8 L7,11.2 C7,11.0895431 6.91045695,11 6.8,11 L4.2,11 C4.08954305,11 4,11.0895431 4,11.2 L4,13.8 C4,13.9104569 4.08954305,14 4.2,14 L6.8,14 C6.91045695,14 7,13.9104569 7,13.8 Z M13,4.1 L16,6.5 L15,7.5 L8,2 L1,7.5 L0,6.5 L8,0 L11,2.4 L11,1 L13,1 L13,4.1 Z\"/>\n                            </defs>\n                            <use xlink:href=\"#home-a\"/>\n                          </svg>\n                        </span>";
-var filterTree = function filterTree(_ref, nodeTree, extended, navigationMode) {
-  var topId = _ref.topId,
-      isExpanded = _ref.isExpanded,
-      expandedChildren = _ref.expandedChildren;
+const singleSelectionIcon = 'M9.5,15 C9.77614237,15 10,15.2238576 10,15.5 C10,15.7761424 9.77614237,16 9.5,16 L6.5,16 C6.22385763,16 6,15.7761424 6,15.5 C6,15.2238576 6.22385763,15 6.5,15 L9.5,15 Z M15.5,13 C15.7761424,13 16,13.2238576 16,13.5 L16,15 C16,15.5522847 15.5522847,16 15,16 L13.5,16 C13.2238576,16 13,15.7761424 13,15.5 C13,15.2238576 13.2238576,15 13.5,15 L14.4,15 C14.7313708,15 15,14.7313708 15,14.4 L15,13.5 C15,13.2238576 15.2238576,13 15.5,13 Z M0.5,13 C0.776142375,13 1,13.2238576 1,13.5 L1,14.4 C1,14.7313708 1.26862915,15 1.6,15 L2.5,15 C2.77614237,15 3,15.2238576 3,15.5 C3,15.7761424 2.77614237,16 2.5,16 L1,16 C0.44771525,16 0,15.5522847 0,15 L0,13.5 C0,13.2238576 0.223857625,13 0.5,13 Z M6.8,9 C6.91045695,9 7,9.08954305 7,9.2 L7,12.8 C7,12.9104569 6.91045695,13 6.8,13 L3.2,13 C3.08954305,13 3,12.9104569 3,12.8 L3,9.2 C3,9.08954305 3.08954305,9 3.2,9 L6.8,9 Z M12.8,9 C12.9104569,9 13,9.08954305 13,9.2 L13,12.8 C13,12.9104569 12.9104569,13 12.8,13 L9.2,13 C9.08954305,13 9,12.9104569 9,12.8 L9,9.2 C9,9.08954305 9.08954305,9 9.2,9 L12.8,9 Z M6,10 L4,10 L4,12 L6,12 L6,10 Z M12,10 L10,10 L10,12 L12,12 L12,10 Z M15.5,6 C15.7761424,6 16,6.22385763 16,6.5 L16,9.5 C16,9.77614237 15.7761424,10 15.5,10 C15.2238576,10 15,9.77614237 15,9.5 L15,6.5 C15,6.22385763 15.2238576,6 15.5,6 Z M0.5,6 C0.776142375,6 1,6.22385763 1,6.5 L1,9.5 C1,9.77614237 0.776142375,10 0.5,10 C0.223857625,10 0,9.77614237 0,9.5 L0,6.5 C0,6.22385763 0.223857625,6 0.5,6 Z M6.8,3 C6.91045695,3 7,3.08954305 7,3.2 L7,6.8 C7,6.91045695 6.91045695,7 6.8,7 L3.2,7 C3.08954305,7 3,6.91045695 3,6.8 L3,3.2 C3,3.08954305 3.08954305,3 3.2,3 L6.8,3 Z M12.8,3 C12.9104569,3 13,3.08954305 13,3.2 L13,6.8 C13,6.91045695 12.9104569,7 12.8,7 L9.2,7 C9.08954305,7 9,6.91045695 9,6.8 L9,3.2 C9,3.08954305 9.08954305,3 9.2,3 L12.8,3 Z M12,4 L10,4 L10,6 L12,6 L12,4 Z M2.5,5.70654635e-14 C2.77614237,5.70654635e-14 3,0.223857625 3,0.5 C3,0.776142375 2.77614237,1 2.5,1 L1.6,1 C1.26862915,1 1,1.26862915 1,1.6 L1,2.5 C1,2.77614237 0.776142375,3 0.5,3 C0.223857625,3 0,2.77614237 0,2.5 L0,1 C0,0.44771525 0.44771525,5.70654635e-14 1,5.70654635e-14 L2.5,5.70654635e-14 Z M15,0 C15.5522847,0 16,0.44771525 16,1 L16,2.5 C16,2.77614237 15.7761424,3 15.5,3 C15.2238576,3 15,2.77614237 15,2.5 L15,1.6 C15,1.26862915 14.7313708,1 14.4,1 L13.5,1 C13.2238576,1 13,0.776142375 13,0.5 C13,0.223857625 13.2238576,0 13.5,0 L15,0 Z M9.5,5.67323966e-14 C9.77614237,5.67323966e-14 10,0.223857625 10,0.5 C10,0.776142375 9.77614237,1 9.5,1 L6.5,1 C6.22385763,1 6,0.776142375 6,0.5 C6,0.223857625 6.22385763,5.67323966e-14 6.5,5.67323966e-14 L9.5,5.67323966e-14 Z';
+const homeIcon = `<span class="lui-fade-button__icon sn-org-home-icon">
+                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 16 16">
+                            <defs>
+                              <path id="home-a" d="M2,7.9 L8,3.4 L14,7.9 L14,16 L12,16 L12,11.2 C12,11.0895431 11.9104569,11 11.8,11 L9.2,11 C9.08954305,11 9,11.0895431 9,11.2 L9,16 L2,16 L2,7.9 Z M7,13.8 L7,11.2 C7,11.0895431 6.91045695,11 6.8,11 L4.2,11 C4.08954305,11 4,11.0895431 4,11.2 L4,13.8 C4,13.9104569 4.08954305,14 4.2,14 L6.8,14 C6.91045695,14 7,13.9104569 7,13.8 Z M13,4.1 L16,6.5 L15,7.5 L8,2 L1,7.5 L0,6.5 L8,0 L11,2.4 L11,1 L13,1 L13,4.1 Z"/>
+                            </defs>
+                            <use xlink:href="#home-a"/>
+                          </svg>
+                        </span>`;
+const filterTree = ({
+  topId,
+  isExpanded,
+  expandedChildren
+}, nodeTree, extended, navigationMode) => {
   if (navigationMode === 'expandAll') {
     return nodeTree.descendants();
   }
-  var topNode = nodeTree.descendants().find(function (node) {
-    return node.data.id === topId;
-  }) || nodeTree;
-  var subTree = [];
+  const topNode = nodeTree.descendants().find(node => node.data.id === topId) || nodeTree;
+  const subTree = [];
   if (isExpanded && topNode.children) {
     // children
-    topNode.children.forEach(function (child) {
+    topNode.children.forEach(child => {
       subTree.push(child);
       if (child.children) {
         if (expandedChildren.indexOf(child.data.id) !== -1 || extended) {
-          child.children.forEach(function (grandChild) {
+          child.children.forEach(grandChild => {
             subTree.push(grandChild);
             if (expandedChildren.indexOf(child.data.id) !== -1 && extended && grandChild.children) {
-              grandChild.children.forEach(function (extendedChild) {
+              grandChild.children.forEach(extendedChild => {
                 subTree.push(extendedChild);
               });
             }
@@ -6458,18 +6090,16 @@ var filterTree = function filterTree(_ref, nodeTree, extended, navigationMode) {
   }
   if (nodeTree.data.navigationMode === 'free' && topNode.parent) {
-    var ancestors = topNode.parent.ancestors();
-    var ancestorIds = ancestors.map(function (anc) {
-      return anc.data.id;
-    });
-    ancestors.forEach(function (ancestor) {
+    const ancestors = topNode.parent.ancestors();
+    const ancestorIds = ancestors.map(anc => anc.data.id);
+    ancestors.forEach(ancestor => {
       if (extended) {
-        ancestor.children.forEach(function (child) {
-          child.children && ancestorIds.indexOf(child.data.id) === -1 && child.data.id !== topNode.data.id && subTree.unshift.apply(subTree, _toConsumableArray(child.children));
+        ancestor.children.forEach(child => {
+          child.children && ancestorIds.indexOf(child.data.id) === -1 && child.data.id !== topNode.data.id && subTree.unshift(...child.children);
         });
       }
-      subTree.unshift.apply(subTree, _toConsumableArray(ancestor.children));
+      subTree.unshift(...ancestor.children);
       if (!ancestor.parent) {
         subTree.unshift(ancestor);
@@ -6481,86 +6111,93 @@ var filterTree = function filterTree(_ref, nodeTree, extended, navigationMode) {
   return subTree;
 };
-var paintTree = function paintTree(_ref2) {
-  var containerData = _ref2.containerData,
-      styling = _ref2.styling,
-      setExpandedCallback = _ref2.setExpandedCallback,
-      wrapperState = _ref2.wrapperState,
-      selectionObj = _ref2.selectionObj,
-      element = _ref2.element;
-  var svg = containerData.svg,
-      divBox = containerData.divBox,
-      allNodes = containerData.allNodes,
-      positioning = containerData.positioning,
-      tooltip = containerData.tooltip;
-  var navigationMode = allNodes.data.navigationMode;
+const paintTree = ({
+  containerData,
+  styling,
+  setExpandedCallback,
+  wrapperState,
+  selectionObj,
+  element
+}) => {
+  const {
+    svg,
+    divBox,
+    allNodes,
+    positioning,
+    tooltip
+  } = containerData;
+  const {
+    navigationMode
+  } = allNodes.data;
   divBox.selectAll('*').remove();
   svg.selectAll('*').remove(); // filter the nodes the nodes
-  var nodes = filterTree(wrapperState.expandedState, allNodes, false, navigationMode); // Create cards and naviagation buttons
+  const nodes = filterTree(wrapperState.expandedState, allNodes, false, navigationMode); // Create cards and naviagation buttons
   box({
-    positioning: positioning,
-    divBox: divBox,
-    nodes: nodes,
-    styling: styling,
-    setExpandedCallback: setExpandedCallback,
-    wrapperState: wrapperState,
-    selectionObj: selectionObj,
-    navigationMode: navigationMode,
-    element: element,
-    tooltip: tooltip
+    positioning,
+    divBox,
+    nodes,
+    styling,
+    setExpandedCallback,
+    wrapperState,
+    selectionObj,
+    navigationMode,
+    element,
+    tooltip
   }); // Create the lines (links) between the nodes
-  var node = svg.selectAll('.sn-org-paths').data(nodes).enter();
+  const node = svg.selectAll('.sn-org-paths').data(nodes).enter();
   createPaths(node, positioning, wrapperState.expandedState.topId, navigationMode); // Scale and translate only needed when user cannot zoom
   // if (navigationMode !== 'free') {
   //   transform(nodes, width, height, svg, divBox, useTransitions);
   // }
 };
-var createContainer = function createContainer(_ref3) {
-  var element = _ref3.element,
-      dataTree = _ref3.dataTree,
-      selectionObj = _ref3.selectionObj,
-      wrapperState = _ref3.wrapperState,
-      setInitialZoom = _ref3.setInitialZoom,
-      setTransform = _ref3.setTransform,
-      setExpandedState = _ref3.setExpandedState,
-      viewState = _ref3.viewState,
-      setContainerData = _ref3.setContainerData,
-      layout = _ref3.layout;
+const createContainer = ({
+  element,
+  dataTree,
+  selectionObj,
+  wrapperState,
+  setInitialZoom,
+  setTransform,
+  setExpandedState,
+  viewState,
+  setContainerData,
+  layout
+}) => {
   element.innerHTML = '';
   element.className = 'sn-org-chart';
-  var navigationMode = layout.navigationMode;
-  var positioning = position('ttb', element, {}, navigationMode);
-  var _element$getBoundingC = element.getBoundingClientRect(),
-      width = _element$getBoundingC.width,
-      height = _element$getBoundingC.height;
-  var zoomWrapper = select(element).append('span').attr('class', 'sn-org-zoomwrapper').on('click', function () {
-    if (!wrapperState.constraints.select && (!selectionObj.api.isActive() || !selectionObj.state)) {
+  const {
+    navigationMode
+  } = layout;
+  let positioning = position('ttb', element, {}, navigationMode);
+  const {
+    width,
+    height
+  } = element.getBoundingClientRect();
+  const zoomWrapper = select(element).append('span').attr('class', 'sn-org-zoomwrapper').on('click', () => {
+    if (!wrapperState.constraints.active && (!selectionObj.api.isActive() || !selectionObj.state)) {
       selectionObj.api.begin('/qHyperCubeDef');
       selectionObj.setState([]);
     }
   }).node();
-  var svgBox = select(zoomWrapper).selectAll('svg').data([{}]).enter().append('svg').attr('class', 'sn-org-svg').attr('width', '100%').attr('height', '100%');
-  var divBox = select(zoomWrapper).selectAll('div').data([{}]).enter().append('div').attr('class', 'sn-org-nodes');
-  var homeButton = select(element).append('button').attr('class', 'sn-org-homebutton disabled').on('click', function () {
+  const svgBox = select(zoomWrapper).selectAll('svg').data([{}]).enter().append('svg').attr('class', 'sn-org-svg').attr('width', '100%').attr('height', '100%');
+  const divBox = select(zoomWrapper).selectAll('div').data([{}]).enter().append('div').attr('class', 'sn-org-nodes');
+  const homeButton = select(element).append('button').attr('class', 'sn-org-homebutton disabled').on('click', () => {
     createContainer({
-      element: element,
-      dataTree: dataTree,
-      selectionObj: selectionObj,
-      wrapperState: wrapperState,
-      setInitialZoom: setInitialZoom,
-      setTransform: setTransform,
-      setExpandedState: setExpandedState,
-      viewState: viewState,
-      setContainerData: setContainerData,
-      layout: layout
+      element,
+      dataTree,
+      selectionObj,
+      wrapperState,
+      setInitialZoom,
+      setTransform,
+      setExpandedState,
+      viewState,
+      setContainerData,
+      layout
     });
   }).html(homeIcon).node();
-  var tooltip = createTooltip(element);
+  const tooltip = createTooltip(element);
   if (dataTree.error) {
     select(zoomWrapper).append('div').attr('class', 'sn-org-error').html(dataTree.message);
@@ -6568,49 +6205,47 @@ var createContainer = function createContainer(_ref3) {
   }
   if (dataTree.warn && dataTree.warn.length) {
-    select(zoomWrapper).append('span').attr('class', 'sn-org-warning').html("*".concat(dataTree.warn.join(' ')));
+    select(zoomWrapper).append('span').attr('class', 'sn-org-warning').html(`*${dataTree.warn.join(' ')}`);
   }
-  var svg = svgBox.append('g').attr('class', 'sn-org-paths'); // Here are the settings for the tree. For instance nodesize can be adjusted
+  const svg = svgBox.append('g').attr('class', 'sn-org-paths'); // Here are the settings for the tree. For instance nodesize can be adjusted
-  var treemap = tree().size([width, height]).nodeSize([constants.cardWidth + constants.cardPadding, positioning.depthSpacing]);
-  var allNodes = treemap(hierarchy(dataTree));
-  var resetExpandedState = !wrapperState.expandedState || !allNodes.descendants().find(function (node) {
-    return node.data.id === wrapperState.expandedState.topId;
-  });
-  var newExpandedState = resetExpandedState ? {
+  const treemap = tree().size([width, height]).nodeSize([constants.cardWidth + constants.cardPadding, positioning.depthSpacing]);
+  const allNodes = treemap(hierarchy(dataTree));
+  const resetExpandedState = !wrapperState.expandedState || !allNodes.descendants().find(node => node.data.id === wrapperState.expandedState.topId);
+  const newExpandedState = resetExpandedState ? {
     topId: allNodes.data.id,
     isExpanded: true,
     expandedChildren: [],
     useTransitions: false
   } : wrapperState.expandedState;
-  var renderNodes = filterTree(newExpandedState, allNodes, false, navigationMode);
-  renderNodes.forEach(function (node) {
+  const renderNodes = filterTree(newExpandedState, allNodes, false, navigationMode);
+  renderNodes.forEach(node => {
     if (!node.xActual || !node.yActual) {
       positioning.x(node);
       positioning.y(node);
     }
   });
-  var bBox = getBBoxOfNodes(renderNodes);
-  var initialZoomState = viewState && viewState.initialZoom ? viewState.initialZoom : getInitialZoomState(bBox, element, navigationMode);
+  const bBox = getBBoxOfNodes(renderNodes);
+  const initialZoomState = viewState && viewState.initialZoom ? viewState.initialZoom : getInitialZoomState(bBox, element, navigationMode);
   setInitialZoom(initialZoomState);
   positioning = position('ttb', element, initialZoomState, navigationMode);
   setZooming({
     containerData: {
-      svg: svg,
-      divBox: divBox,
-      width: width,
-      height: height,
-      zoomWrapper: zoomWrapper,
-      element: element,
-      tooltip: tooltip,
-      homeButton: homeButton
+      svg,
+      divBox,
+      width,
+      height,
+      zoomWrapper,
+      element,
+      tooltip,
+      homeButton
     },
-    setTransform: setTransform,
+    setTransform,
     transformState: viewState && viewState.transform || {},
-    wrapperState: wrapperState,
-    initialZoomState: initialZoomState,
-    navigationMode: navigationMode
+    wrapperState,
+    initialZoomState,
+    navigationMode
   });
   if (resetExpandedState) {
@@ -6618,58 +6253,62 @@ var createContainer = function createContainer(_ref3) {
   }
   return setContainerData({
-    svg: svg,
-    divBox: divBox,
-    allNodes: allNodes,
-    positioning: positioning,
-    width: width,
-    height: height,
-    element: element,
-    zoomWrapper: zoomWrapper,
-    tooltip: tooltip,
-    homeButton: homeButton
+    svg,
+    divBox,
+    allNodes,
+    positioning,
+    width,
+    height,
+    element,
+    zoomWrapper,
+    tooltip,
+    homeButton
   });
 };
-var createSnapshotData = function createSnapshotData(expandedState, allNodes, layout) {
+const createSnapshotData = (expandedState, allNodes, layout) => {
   if (layout.snapshotData && layout.snapshotData.dataMatrix) {
     // Need a check here becuase of free resize in storytelling
     return layout.snapshotData.dataMatrix;
   } // filter down to the visible nodes
-  var navigationMode = layout.navigationMode;
-  var nodes = filterTree(expandedState, allNodes, true, navigationMode);
-  var usedMatrix = [];
-  var qDataPages = layout.qHyperCube.qDataPages;
-  var dataMatrix = [];
-  qDataPages.forEach(function (page) {
-    dataMatrix.push.apply(dataMatrix, _toConsumableArray(page.qMatrix));
+  const {
+    navigationMode
+  } = layout;
+  const nodes = filterTree(expandedState, allNodes, true, navigationMode);
+  const usedMatrix = [];
+  const {
+    qDataPages
+  } = layout.qHyperCube;
+  const dataMatrix = [];
+  qDataPages.forEach(page => {
+    dataMatrix.push(...page.qMatrix);
   });
-  nodes.forEach(function (n) {
+  nodes.forEach(n => {
     if (n.data.rowNo !== undefined) {
       usedMatrix.push(dataMatrix[n.data.rowNo]);
     }
   });
   return usedMatrix;
 };
-var createViewState = function createViewState(expandedState, transform, initialZoom, element) {
-  var size = {
+const createViewState = (expandedState, transform, initialZoom, element) => {
+  const size = {
     w: element.clientWidth,
     h: element.clientHeight
   };
-  var vs = {
-    expandedState: expandedState,
-    transform: transform,
-    size: size,
-    initialZoom: initialZoom
+  const vs = {
+    expandedState,
+    transform,
+    size,
+    initialZoom
   };
   vs.expandedState.useTransitions = false;
   return vs;
 };
 function snapshot(expandedState, containerData, layout, transform, initialZoom) {
-  var element = useElement();
-  onTakeSnapshot(function (snapshotLayout) {
+  const element = useElement();
+  onTakeSnapshot(snapshotLayout => {
     if (!snapshotLayout.snapshotData) {
       snapshotLayout.snapshotData = {};
     }
@@ -6680,13 +6319,12 @@ function snapshot(expandedState, containerData, layout, transform, initialZoom)
     snapshotLayout.snapshotData.dataMatrix = createSnapshotData(expandedState, containerData.allNodes, layout);
   });
-  useImperativeHandle(function () {
-    return {
-      getViewState: function getViewState() {
-        return createViewState(expandedState, transform, initialZoom, element);
-      }
-    };
-  });
+  useImperativeHandle(() => ({
+    getViewState() {
+      return createViewState(expandedState, transform, initialZoom, element);
+    }
+  }));
 }
 // Local translations when used outside of sense
@@ -6712,15 +6350,15 @@ var en = {
 function autoRegister(translator) {
   if (translator && translator.get && translator.add) {
-    var t = 'Object.OrgChart.MaxData';
-    var g = translator.get(t); // if translated string is different from its id
+    const t = 'Object.OrgChart.MaxData';
+    const g = translator.get(t); // if translated string is different from its id
     // assume translations already exists for current locale
     if (g !== t) {
       return;
     }
-    Object.keys(en).forEach(function (key) {
+    Object.keys(en).forEach(key => {
       translator.add({
         id: key,
         locale: {
@@ -6732,41 +6370,33 @@ function autoRegister(translator) {
 }
 function selectionHandler(translator) {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      singleSelect = _useState2[0],
-      setSingleSelect = _useState2[1];
-  var selectionsAPI = useSelections();
-  var isInSelections = !!useLayout().qSelectionInfo.qInSelections;
-  var _useState3 = useState({
+  const [singleSelect, setSingleSelect] = useState(false);
+  const selectionsAPI = useSelections();
+  const isInSelections = !!useLayout().qSelectionInfo.qInSelections;
+  const [selectionObj] = useState({
     api: selectionsAPI,
-    setState: function setState(state) {
+    setState: state => {
       selectionObj.state = state;
     },
     state: [],
     singleSelect: false
-  }),
-      _useState4 = _slicedToArray(_useState3, 1),
-      selectionObj = _useState4[0];
-  useEffect(function () {
+  });
+  useEffect(() => {
     autoRegister(translator);
   }, [translator]);
-  var resetSelections = function resetSelections() {
+  const resetSelections = () => {
     selectionObj.state = [];
   };
-  var resetSelectionsAndSingleSelect = function resetSelectionsAndSingleSelect() {
+  const resetSelectionsAndSingleSelect = () => {
     selectionObj.state = [];
     setSingleSelect(false);
   };
-  useEffect(function () {
+  useEffect(() => {
     if (!selectionObj.api) {
-      return function () {};
+      return () => {};
     }
     selectionObj.api = selectionsAPI;
@@ -6775,42 +6405,41 @@ function selectionHandler(translator) {
     selectionObj.api.on('confirmed', resetSelectionsAndSingleSelect);
     selectionObj.api.on('cleared', resetSelections); // Return function called on unmount
-    return function () {
+    return () => {
       selectionObj.api.removeListener('deactivated', resetSelections);
       selectionObj.api.removeListener('canceled', resetSelectionsAndSingleSelect);
       selectionObj.api.removeListener('confirmed', resetSelectionsAndSingleSelect);
       selectionObj.api.removeListener('cleared', resetSelections);
     };
   }, [selectionsAPI]);
-  useEffect(function () {
+  useEffect(() => {
     selectionObj.singleSelect = singleSelect;
   }, [singleSelect]);
-  useAction(function () {
-    return {
-      action: function action() {
-        setSingleSelect(!singleSelect);
-      },
-      icon: {
-        shapes: [{
-          type: 'path',
-          attrs: {
-            d: singleSelectionIcon
-          }
-        }]
-      },
-      active: singleSelect,
-      hidden: !isInSelections,
-      label: translator.get('Object.OrgChart.SingleSelect')
-    };
-  }, [singleSelect, isInSelections]);
-  useEffect(function () {
-    var addKeyPress = function addKeyPress(event) {
+  useAction(() => ({
+    action() {
+      setSingleSelect(!singleSelect);
+    },
+    icon: {
+      shapes: [{
+        type: 'path',
+        attrs: {
+          d: singleSelectionIcon
+        }
+      }]
+    },
+    active: singleSelect,
+    hidden: !isInSelections,
+    label: translator.get('Object.OrgChart.SingleSelect')
+  }), [singleSelect, isInSelections]);
+  useEffect(() => {
+    const addKeyPress = event => {
       if (event.key === 'Shift') {
         setSingleSelect(true);
       }
     };
-    var removeKeyPress = function removeKeyPress(event) {
+    const removeKeyPress = event => {
       if (event.key === 'Shift') {
         setSingleSelect(false);
       }
@@ -6818,7 +6447,7 @@ function selectionHandler(translator) {
     document.addEventListener('keydown', addKeyPress);
     document.addEventListener('keyup', removeKeyPress);
-    return function () {
+    return () => {
       document.removeEventListener('keydown', addKeyPress);
       document.removeEventListener('keyup', removeKeyPress);
     };
@@ -6827,7 +6456,7 @@ function selectionHandler(translator) {
 }
 function getColor(reference, Theme, defaultColor) {
-  var color;
+  let color;
   switch (reference.colorType) {
     case 'byExpression':
@@ -6844,32 +6473,36 @@ function getColor(reference, Theme, defaultColor) {
   return color === 'none' ? defaultColor : color;
 }
-var stylingUtils = {
-  cardStyling: function cardStyling(_ref) {
-    var Theme = _ref.Theme,
-        layout = _ref.layout;
-    var backgroundColor = getColor(layout.style.backgroundColor, Theme, '#e6e6e6');
-    var fontColor = getColor(layout.style.fontColor, Theme, 'default');
-    var measureLabel = layout.qHyperCube.qMeasureInfo.length ? layout.qHyperCube.qMeasureInfo[0].qFallbackTitle : null;
-    var _layout$style$border = layout.style.border,
-        border = _layout$style$border === void 0 ? {
-      colorType: 'auto'
-    } : _layout$style$border;
-    var borderColor = border.colorType !== 'auto' ? getColor(border, Theme, colorUtils.getDarkColor(backgroundColor)) : colorUtils.getDarkColor(backgroundColor);
+const stylingUtils = {
+  cardStyling: ({
+    Theme,
+    layout
+  }) => {
+    const backgroundColor = getColor(layout.style.backgroundColor, Theme, DEFAULTS.BACKGROUND_COLOR.color);
+    const fontColor = getColor(layout.style.fontColor, Theme, 'default');
+    const measureLabel = layout.qHyperCube.qMeasureInfo.length ? layout.qHyperCube.qMeasureInfo[0].qFallbackTitle : null;
+    const {
+      border = {
+        colorType: DEFAULTS.BORDER_COLOR_TYPE
+      }
+    } = layout.style;
+    const borderColor = border.colorType !== 'auto' ? getColor(border, Theme, colorUtils.getDarkColor(backgroundColor)) : colorUtils.getDarkColor(backgroundColor);
     return {
-      backgroundColor: backgroundColor,
-      fontColor: fontColor,
-      measureLabel: measureLabel,
-      border: border,
-      borderColor: borderColor
+      backgroundColor,
+      fontColor,
+      measureLabel,
+      border,
+      borderColor
     };
   }
 };
-var viewStateUtil = {
-  getViewState: function getViewState(opts, layout) {
+const viewStateUtil = {
+  getViewState: (opts, layout) => {
     // Get from options passed to object (used in live printing)
-    var viewState = opts.viewState;
+    let {
+      viewState
+    } = opts;
     if (!viewState && layout.snapshotData && layout.snapshotData.viewState) {
       // Get from layout (used in snapshot mode)
@@ -6909,156 +6542,129 @@ function styleInject(css, ref) {
   }
 }
-var css_248z = ".sn-org-chart {\n  /* Tooltip arrow */\n}\n.sn-org-chart .sn-org-tooltip {\n  visibility: hidden;\n  opacity: 0;\n  /* Unsupported in IE, so there we set width explicitly */\n  width: 230px;\n  width: -moz-max-content;\n  width: fit-content;\n  /* Position the tooltip text */\n  position: absolute;\n  z-index: 1;\n}\n.sn-org-chart .sn-org-tooltip::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 0%;\n  margin-left: -10px;\n  border-width: 10px;\n  border-style: solid;\n  border-color: #404040 transparent transparent transparent;\n}\n.sn-org-chart .sn-org-tooltip-visible {\n  opacity: 0.9;\n  visibility: visible;\n}\n.sn-org-chart .sn-org-tooltip-inner {\n  max-width: 240px;\n  right: 50%;\n  font-family: 'QlikView Sans', sans-serif;\n  position: relative;\n  max-height: 150px;\n  background-color: #404040;\n  color: #e6e6e6;\n  text-align: left;\n  font-size: 13px;\n  line-height: 15px;\n  padding: 10px 10px 10px 10px;\n  border-radius: 6px;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  word-break: break-word;\n  overflow: hidden;\n}\n.sn-org-chart .sn-org-tooltip-inner .sn-org-tooltip-header {\n  font-weight: bold;\n  padding-bottom: 5px;\n}\n";
-styleInject(css_248z);
+var css_248z$4 = ".sn-org-chart {\n  /* Tooltip arrow */\n}\n.sn-org-chart .sn-org-tooltip {\n  visibility: hidden;\n  opacity: 0;\n  /* Unsupported in IE, so there we set width explicitly */\n  width: 230px;\n  width: -moz-max-content;\n  width: fit-content;\n  /* Position the tooltip text */\n  position: absolute;\n  z-index: 1;\n}\n.sn-org-chart .sn-org-tooltip::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 0%;\n  margin-left: -10px;\n  border-width: 10px;\n  border-style: solid;\n  border-color: #404040 transparent transparent transparent;\n}\n.sn-org-chart .sn-org-tooltip-visible {\n  opacity: 0.9;\n  visibility: visible;\n}\n.sn-org-chart .sn-org-tooltip-inner {\n  max-width: 240px;\n  right: 50%;\n  font-family: 'QlikView Sans', sans-serif;\n  position: relative;\n  max-height: 150px;\n  background-color: #404040;\n  color: #e6e6e6;\n  text-align: left;\n  font-size: 13px;\n  line-height: 15px;\n  padding: 10px 10px 10px 10px;\n  border-radius: 6px;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  word-break: break-word;\n  overflow: hidden;\n}\n.sn-org-chart .sn-org-tooltip-inner .sn-org-tooltip-header {\n  font-weight: bold;\n  padding-bottom: 5px;\n}\n";
+styleInject(css_248z$4);
-var css_248z$1 = ".sn-org-chart .sn-org-svg {\n  position: absolute;\n  /* For css only transitions, does not work in IE11 */\n}\n.sn-org-chart .sn-org-svg .sn-org-path {\n  fill: none;\n  stroke: #4c4c4c;\n  stroke-width: 1;\n}\n.sn-org-chart .sn-org-svg .sn-org-paths:not(.org-disable-transition) {\n  transform-origin: 0% 0%;\n  transition-property: all;\n  transition-duration: 0.5s;\n}\n";
-styleInject(css_248z$1);
+var css_248z$3 = ".sn-org-chart .sn-org-svg {\n  position: absolute;\n  /* For css only transitions, does not work in IE11 */\n}\n.sn-org-chart .sn-org-svg .sn-org-path {\n  fill: none;\n  stroke: #4c4c4c;\n  stroke-width: 1;\n}\n.sn-org-chart .sn-org-svg .sn-org-paths:not(.org-disable-transition) {\n  transform-origin: 0% 0%;\n  transition-property: all;\n  transition-duration: 0.5s;\n}\n";
+styleInject(css_248z$3);
 var css_248z$2 = ".sn-org-chart .sn-org-warning {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  font-style: italic;\n  font-size: 13px;\n  color: #7b7a78;\n}\n.sn-org-chart .sn-org-error {\n  margin: 0;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  font-size: 1.2em;\n  transform: translate(-50%, -50%);\n}\n";
 styleInject(css_248z$2);
-var css_248z$3 = ".sn-org-chart {\n  overflow: hidden;\n}\n.sn-org-chart .sn-org-nodes {\n  position: absolute;\n  transform-origin: 0% 0%;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -khtml-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  backface-visibility: hidden;\n}\n.sn-org-chart .sn-org-nodes:not(.org-disable-transition) {\n  transition-property: all;\n  transition-duration: 0.5s;\n}\n.sn-org-chart .sn-org-nodes .sn-org-traverse {\n  position: absolute;\n  background-color: white;\n  font-size: 20px;\n  font-weight: bold;\n  border-radius: 3px;\n  border: 1px solid #8c8c8c;\n  text-align: center;\n  line-height: 24px;\n}\n.sn-org-chart .sn-org-nodes .sn-org-root {\n  position: absolute;\n  background-color: #8c8c8c;\n  width: 20px;\n  height: 20px;\n  border-radius: 20px;\n}\n.sn-org-chart .sn-org-nodes .sn-org-card {\n  position: absolute;\n}\n.sn-org-chart .sn-org-nodes .sn-org-card .sn-org-card-text {\n  padding-left: 5px;\n  padding-right: 5px;\n  border-radius: 3px;\n}\n.sn-org-chart .sn-org-nodes .sn-org-card .sn-org-card-text.selected {\n  border: 4px solid black;\n  border-radius: 4px;\n}\n.sn-org-chart .sn-org-nodes .sn-org-card .sn-org-card-text.not-selected {\n  opacity: 0.5;\n}\n.sn-org-chart .sn-org-nodes .sn-org-card .sn-org-card-title {\n  font-size: 14px;\n  font-weight: bold;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.sn-org-chart .sn-org-nodes .sn-org-card .sn-org-card-label {\n  font-size: 11px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n";
-styleInject(css_248z$3);
+var css_248z$1 = ".sn-org-chart {\n  overflow: hidden;\n}\n.sn-org-chart .sn-org-nodes {\n  position: absolute;\n  transform-origin: 0% 0%;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -khtml-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  backface-visibility: hidden;\n}\n.sn-org-chart .sn-org-nodes:not(.org-disable-transition) {\n  transition-property: all;\n  transition-duration: 0.5s;\n}\n.sn-org-chart .sn-org-nodes .sn-org-traverse {\n  position: absolute;\n  background-color: white;\n  font-size: 20px;\n  font-weight: bold;\n  border-radius: 3px;\n  border: 1px solid #8c8c8c;\n  text-align: center;\n  line-height: 24px;\n}\n.sn-org-chart .sn-org-nodes .sn-org-root {\n  position: absolute;\n  background-color: #8c8c8c;\n  width: 20px;\n  height: 20px;\n  border-radius: 20px;\n}\n.sn-org-chart .sn-org-nodes .sn-org-card {\n  position: absolute;\n}\n.sn-org-chart .sn-org-nodes .sn-org-card .sn-org-card-text {\n  padding-left: 5px;\n  padding-right: 5px;\n  border-radius: 3px;\n}\n.sn-org-chart .sn-org-nodes .sn-org-card .sn-org-card-text.selected {\n  border: 4px solid black;\n  border-radius: 4px;\n}\n.sn-org-chart .sn-org-nodes .sn-org-card .sn-org-card-text.not-selected {\n  opacity: 0.5;\n}\n.sn-org-chart .sn-org-nodes .sn-org-card .sn-org-card-title {\n  font-size: 14px;\n  font-weight: bold;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.sn-org-chart .sn-org-nodes .sn-org-card .sn-org-card-label {\n  font-size: 11px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n";
+styleInject(css_248z$1);
-var css_248z$4 = ".sn-org-chart .sn-org-homebutton {\n  position: absolute;\n  top: 20px;\n  right: 20px;\n  height: 20px;\n  width: 20px;\n  border-color: transparent;\n  background-color: transparent;\n  fill: rgba(89, 89, 89, 0.8);\n  transition: fill 200ms ease-out;\n}\n.sn-org-chart .sn-org-homebutton:hover {\n  fill: #595959;\n}\n.sn-org-chart .sn-org-homebutton.disabled {\n  display: none;\n}\n";
-styleInject(css_248z$4);
+var css_248z = ".sn-org-chart .sn-org-homebutton {\n  position: absolute;\n  top: 20px;\n  right: 20px;\n  height: 20px;\n  width: 20px;\n  border-color: transparent;\n  background-color: transparent;\n  fill: rgba(89, 89, 89, 0.8);\n  transition: fill 200ms ease-out;\n}\n.sn-org-chart .sn-org-homebutton:hover {\n  fill: #595959;\n}\n.sn-org-chart .sn-org-homebutton.disabled {\n  display: none;\n}\n";
+styleInject(css_248z);
 function supernova(env) {
   return {
     qae: {
-      properties: properties,
-      data: data
+      properties,
+      data
     },
-    component: function component() {
-      var layout = useStaleLayout();
-      var model = useModel();
-      var element = useElement();
-      var Theme = useTheme();
-      var options = useOptions();
-      var rect = useRect();
-      var constraints = useConstraints();
-      var translator = useTranslator();
-      var _useState = useState(null),
-          _useState2 = _slicedToArray(_useState, 2),
-          containerData = _useState2[0],
-          setContainerData = _useState2[1];
-      var _useState3 = useState(null),
-          _useState4 = _slicedToArray(_useState3, 2),
-          styling = _useState4[0],
-          setStyling = _useState4[1];
-      var _useState5 = useState(null),
-          _useState6 = _slicedToArray(_useState5, 2),
-          expandedState = _useState6[0],
-          setExpandedState = _useState6[1];
-      var _useState7 = useState(null),
-          _useState8 = _slicedToArray(_useState7, 2),
-          transform$1 = _useState8[0],
-          setTransform = _useState8[1];
-      var _useState9 = useState(null),
-          _useState10 = _slicedToArray(_useState9, 2),
-          initialZoom = _useState10[0],
-          setInitialZoom = _useState10[1];
-      var _useState11 = useState({
+    component: () => {
+      const layout = useStaleLayout();
+      const model = useModel();
+      const element = useElement();
+      const Theme = useTheme();
+      const options = useOptions();
+      const rect = useRect();
+      const constraints = useConstraints();
+      const translator = useTranslator();
+      const [containerData, setContainerData] = useState(null);
+      const [styling, setStyling] = useState(null);
+      const [expandedState, setExpandedState] = useState(null);
+      const [transform$1, setTransform] = useState(null);
+      const [initialZoom, setInitialZoom] = useState(null);
+      const [wrapperState] = useState({
         transform: {},
-        constraints: constraints,
-        expandedState: expandedState
-      }),
-          _useState12 = _slicedToArray(_useState11, 1),
-          wrapperState = _useState12[0];
-      var selectionObj = selectionHandler(translator);
-      useEffect(function () {
+        constraints,
+        expandedState
+      });
+      const selectionObj = selectionHandler(translator);
+      useEffect(() => {
         autoRegister(translator);
       }, [translator.language()]);
-      useEffect(function () {
+      useEffect(() => {
         wrapperState.constraints = constraints;
       }, [constraints]);
-      useEffect(function () {
+      useEffect(() => {
         wrapperState.transform = transform$1;
       }, [transform$1]);
-      useEffect(function () {
+      useEffect(() => {
         wrapperState.expandedState = expandedState;
       }, [expandedState]);
-      var setExpandedCallback = function setExpandedCallback(newExpandedState) {
+      const setExpandedCallback = newExpandedState => {
         newExpandedState.useTransitions = true;
         setExpandedState(newExpandedState);
       }; // Get and transform the data into a tree structure, get styling, reset active selections
-      var _usePromise = usePromise(function () {
+      const [dataTree] = usePromise(() => {
         if (!layout) {
           return Promise.resolve();
         }
-        var viewState = viewStateUtil.getViewState(options, layout);
+        const viewState = viewStateUtil.getViewState(options, layout);
         viewState && viewState.expandedState && setExpandedState(viewState.expandedState);
         viewState && viewState.transform && setTransform(viewState.transform);
         return transform({
-          layout: layout,
-          model: model,
-          translator: translator
-        }).then(function (transformed) {
+          layout,
+          model,
+          translator
+        }).then(transformed => {
           setStyling(stylingUtils.cardStyling({
-            Theme: Theme,
-            layout: layout
+            Theme,
+            layout
           }));
           selectionObj.setState([]); // Resolving the promise to indicate readiness for printing
           return transformed;
         });
-      }, [layout, model, translator.language(), Theme.name()]),
-          _usePromise2 = _slicedToArray(_usePromise, 1),
-          dataTree = _usePromise2[0]; // Create d3 elements, calculate initial zoom and sets expandedState
+      }, [layout, model, translator.language(), Theme.name()]); // Create d3 elements, calculate initial zoom and sets expandedState
-      var fullReload = function fullReload() {
+      const fullReload = () => {
         if (element && dataTree) {
-          var viewState = viewStateUtil.getViewState(options, layout);
+          const viewState = viewStateUtil.getViewState(options, layout);
           createContainer({
-            element: element,
-            dataTree: dataTree,
-            viewState: viewState,
-            wrapperState: wrapperState,
-            selectionObj: selectionObj,
-            setInitialZoom: setInitialZoom,
-            setTransform: setTransform,
-            setExpandedState: setExpandedState,
-            setContainerData: setContainerData,
-            layout: layout
+            element,
+            dataTree,
+            viewState,
+            wrapperState,
+            selectionObj,
+            setInitialZoom,
+            setTransform,
+            setExpandedState,
+            setContainerData,
+            layout
           });
         }
       }; // Call paintTree, currenly repaints all current nodes
-      var rePaint = function rePaint() {
+      const rePaint = () => {
         if (containerData && expandedState && styling) {
           paintTree({
-            containerData: containerData,
-            styling: styling,
-            setExpandedCallback: setExpandedCallback,
-            wrapperState: wrapperState,
-            selectionObj: selectionObj,
+            containerData,
+            styling,
+            setExpandedCallback,
+            wrapperState,
+            selectionObj,
             useTransitions: expandedState.useTransitions,
-            element: element
+            element
           });
         }
       };
-      useEffect(function () {
+      useEffect(() => {
         rePaint();
       }, [containerData, selectionObj.state]);
-      useEffect(function () {
+      useEffect(() => {
         fullReload();
       }, [element, dataTree, constraints]);
-      useEffect(function () {
+      useEffect(() => {
         if (layout.resizeOnExpand) {
           fullReload();
         } else {
@@ -7066,9 +6672,9 @@ function supernova(env) {
         }
       }, [expandedState]); // Updates snapshot when resizing
-      useEffect(function () {
+      useEffect(() => {
         if (containerData && layout && layout.snapshotData) {
-          var snapshotZoom = getSnapshotZoom(rect, layout.snapshotData.viewState, transform$1);
+          const snapshotZoom = getSnapshotZoom(rect, layout.snapshotData.viewState, transform$1);
           applyTransform(snapshotZoom, containerData.svg, containerData.divBox, rect.width, rect.height);
         }
       }, [rect, containerData]);
@@ -7078,4 +6684,4 @@ function supernova(env) {
   };
 }
-export default supernova;
+export { supernova as default };