@hpcc-js/react 2.53.1 → 2.53.3

package/dist/index.js

@@ -1,860 +1,566 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@hpcc-js/common')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@hpcc-js/common'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@hpcc-js/react"] = {}, global["@hpcc-js/common"]));
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@hpcc-js/common')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@hpcc-js/common'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@hpcc-js/react"] = {}, global["@hpcc-js/common"]));
 })(this, (function (exports, common) { 'use strict';
 
-  var PKG_NAME$1 = "@hpcc-js/react";
-  var PKG_VERSION$1 = "2.53.1";
-  var BUILD_VERSION$1 = "2.104.11";
-
-  var PKG_NAME = "@hpcc-js/preact-shim";
-  var PKG_VERSION = "2.16.2";
-  var BUILD_VERSION = "2.104.11";
-
-  var n,l$1,u$1,t$1,o$1,f$1={},e$1=[],c$1=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function s(n,l){for(var u in l)n[u]=l[u];return n}function a$1(n){var l=n.parentNode;l&&l.removeChild(n);}function h$1(l,u,i){var t,o,r,f={};for(r in u)"key"==r?t=u[r]:"ref"==r?o=u[r]:f[r]=u[r];if(arguments.length>2&&(f.children=arguments.length>3?n.call(arguments,2):i),"function"==typeof l&&null!=l.defaultProps)for(r in l.defaultProps)void 0===f[r]&&(f[r]=l.defaultProps[r]);return v$1(l,f,t,o,null)}function v$1(n,i,t,o,r){var f={type:n,props:i,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++u$1:r};return null==r&&null!=l$1.vnode&&l$1.vnode(f),f}function p$1(n){return n.children}function d$1(n,l){this.props=n,this.context=l;}function _(n,l){if(null==l)return n.__?_(n.__,n.__.__k.indexOf(n)+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return "function"==typeof n.type?_(n):null}function k$1(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return k$1(n)}}function b$1(n){(!n.__d&&(n.__d=!0)&&t$1.push(n)&&!g$1.__r++||o$1!==l$1.debounceRendering)&&((o$1=l$1.debounceRendering)||setTimeout)(g$1);}function g$1(){for(var n;g$1.__r=t$1.length;)n=t$1.sort(function(n,l){return n.__v.__b-l.__v.__b}),t$1=[],n.some(function(n){var l,u,i,t,o,r;n.__d&&(o=(t=(l=n).__v).__e,(r=l.__P)&&(u=[],(i=s({},t)).__v=t.__v+1,j$1(r,t,i,l.__n,void 0!==r.ownerSVGElement,null!=t.__h?[o]:null,u,null==o?_(t):o,t.__h),z$1(u,t),t.__e!=o&&k$1(t)));});}function w$1(n,l,u,i,t,o,r,c,s,a){var h,y,d,k,b,g,w,x=i&&i.__k||e$1,C=x.length;for(u.__k=[],h=0;h<l.length;h++)if(null!=(k=u.__k[h]=null==(k=l[h])||"boolean"==typeof k?null:"string"==typeof k||"number"==typeof k||"bigint"==typeof k?v$1(null,k,null,null,k):Array.isArray(k)?v$1(p$1,{children:k},null,null,null):k.__b>0?v$1(k.type,k.props,k.key,null,k.__v):k)){if(k.__=u,k.__b=u.__b+1,null===(d=x[h])||d&&k.key==d.key&&k.type===d.type)x[h]=void 0;else for(y=0;y<C;y++){if((d=x[y])&&k.key==d.key&&k.type===d.type){x[y]=void 0;break}d=null;}j$1(n,k,d=d||f$1,t,o,r,c,s,a),b=k.__e,(y=k.ref)&&d.ref!=y&&(w||(w=[]),d.ref&&w.push(d.ref,null,k),w.push(y,k.__c||b,k)),null!=b?(null==g&&(g=b),"function"==typeof k.type&&k.__k===d.__k?k.__d=s=m$1(k,s,n):s=A(n,k,d,x,b,s),"function"==typeof u.type&&(u.__d=s)):s&&d.__e==s&&s.parentNode!=n&&(s=_(d));}for(u.__e=g,h=C;h--;)null!=x[h]&&("function"==typeof u.type&&null!=x[h].__e&&x[h].__e==u.__d&&(u.__d=_(i,h+1)),N(x[h],x[h]));if(w)for(h=0;h<w.length;h++)M(w[h],w[++h],w[++h]);}function m$1(n,l,u){for(var i,t=n.__k,o=0;t&&o<t.length;o++)(i=t[o])&&(i.__=n,l="function"==typeof i.type?m$1(i,l,u):A(u,i,i,t,i.__e,l));return l}function A(n,l,u,i,t,o){var r,f,e;if(void 0!==l.__d)r=l.__d,l.__d=void 0;else if(null==u||t!=o||null==t.parentNode)n:if(null==o||o.parentNode!==n)n.appendChild(t),r=null;else {for(f=o,e=0;(f=f.nextSibling)&&e<i.length;e+=2)if(f==t)break n;n.insertBefore(t,o),r=o;}return void 0!==r?r:t.nextSibling}function C(n,l,u,i,t){var o;for(o in u)"children"===o||"key"===o||o in l||H(n,o,null,u[o],i);for(o in l)t&&"function"!=typeof l[o]||"children"===o||"key"===o||"value"===o||"checked"===o||u[o]===l[o]||H(n,o,l[o],u[o],i);}function $(n,l,u){"-"===l[0]?n.setProperty(l,u):n[l]=null==u?"":"number"!=typeof u||c$1.test(l)?u:u+"px";}function H(n,l,u,i,t){var o;n:if("style"===l)if("string"==typeof u)n.style.cssText=u;else {if("string"==typeof i&&(n.style.cssText=i=""),i)for(l in i)u&&l in u||$(n.style,l,"");if(u)for(l in u)i&&u[l]===i[l]||$(n.style,l,u[l]);}else if("o"===l[0]&&"n"===l[1])o=l!==(l=l.replace(/Capture$/,"")),l=l.toLowerCase()in n?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+o]=u,u?i||n.addEventListener(l,o?T$1:I,o):n.removeEventListener(l,o?T$1:I,o);else if("dangerouslySetInnerHTML"!==l){if(t)l=l.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("href"!==l&&"list"!==l&&"form"!==l&&"tabIndex"!==l&&"download"!==l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null!=u&&(!1!==u||"a"===l[0]&&"r"===l[1])?n.setAttribute(l,u):n.removeAttribute(l));}}function I(n){this.l[n.type+!1](l$1.event?l$1.event(n):n);}function T$1(n){this.l[n.type+!0](l$1.event?l$1.event(n):n);}function j$1(n,u,i,t,o,r,f,e,c){var a,h,v,y,_,k,b,g,m,x,A,C,$,H=u.type;if(void 0!==u.constructor)return null;null!=i.__h&&(c=i.__h,e=u.__e=i.__e,u.__h=null,r=[e]),(a=l$1.__b)&&a(u);try{n:if("function"==typeof H){if(g=u.props,m=(a=H.contextType)&&t[a.__c],x=a?m?m.props.value:a.__:t,i.__c?b=(h=u.__c=i.__c).__=h.__E:("prototype"in H&&H.prototype.render?u.__c=h=new H(g,x):(u.__c=h=new d$1(g,x),h.constructor=H,h.render=O),m&&m.sub(h),h.props=g,h.state||(h.state={}),h.context=x,h.__n=t,v=h.__d=!0,h.__h=[]),null==h.__s&&(h.__s=h.state),null!=H.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=s({},h.__s)),s(h.__s,H.getDerivedStateFromProps(g,h.__s))),y=h.props,_=h.state,v)null==H.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else {if(null==H.getDerivedStateFromProps&&g!==y&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(g,x),!h.__e&&null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(g,h.__s,x)||u.__v===i.__v){h.props=g,h.state=h.__s,u.__v!==i.__v&&(h.__d=!1),h.__v=u,u.__e=i.__e,u.__k=i.__k,u.__k.forEach(function(n){n&&(n.__=u);}),h.__h.length&&f.push(h);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(g,h.__s,x),null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(y,_,k);});}if(h.context=x,h.props=g,h.__v=u,h.__P=n,A=l$1.__r,C=0,"prototype"in H&&H.prototype.render)h.state=h.__s,h.__d=!1,A&&A(u),a=h.render(h.props,h.state,h.context);else do{h.__d=!1,A&&A(u),a=h.render(h.props,h.state,h.context),h.state=h.__s;}while(h.__d&&++C<25);h.state=h.__s,null!=h.getChildContext&&(t=s(s({},t),h.getChildContext())),v||null==h.getSnapshotBeforeUpdate||(k=h.getSnapshotBeforeUpdate(y,_)),$=null!=a&&a.type===p$1&&null==a.key?a.props.children:a,w$1(n,Array.isArray($)?$:[$],u,i,t,o,r,f,e,c),h.base=u.__e,u.__h=null,h.__h.length&&f.push(h),b&&(h.__E=h.__=null),h.__e=!1;}else null==r&&u.__v===i.__v?(u.__k=i.__k,u.__e=i.__e):u.__e=L(i.__e,u,i,t,o,r,f,c);(a=l$1.diffed)&&a(u);}catch(n){u.__v=null,(c||null!=r)&&(u.__e=e,u.__h=!!c,r[r.indexOf(e)]=null),l$1.__e(n,u,i);}}function z$1(n,u){l$1.__c&&l$1.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u);});}catch(n){l$1.__e(n,u.__v);}});}function L(l,u,i,t,o,r,e,c){var s,h,v,y=i.props,p=u.props,d=u.type,k=0;if("svg"===d&&(o=!0),null!=r)for(;k<r.length;k++)if((s=r[k])&&"setAttribute"in s==!!d&&(d?s.localName===d:3===s.nodeType)){l=s,r[k]=null;break}if(null==l){if(null===d)return document.createTextNode(p);l=o?document.createElementNS("http://www.w3.org/2000/svg",d):document.createElement(d,p.is&&p),r=null,c=!1;}if(null===d)y===p||c&&l.data===p||(l.data=p);else {if(r=r&&n.call(l.childNodes),h=(y=i.props||f$1).dangerouslySetInnerHTML,v=p.dangerouslySetInnerHTML,!c){if(null!=r)for(y={},k=0;k<l.attributes.length;k++)y[l.attributes[k].name]=l.attributes[k].value;(v||h)&&(v&&(h&&v.__html==h.__html||v.__html===l.innerHTML)||(l.innerHTML=v&&v.__html||""));}if(C(l,p,y,o,c),v)u.__k=[];else if(k=u.props.children,w$1(l,Array.isArray(k)?k:[k],u,i,t,o&&"foreignObject"!==d,r,e,r?r[0]:i.__k&&_(i,0),c),null!=r)for(k=r.length;k--;)null!=r[k]&&a$1(r[k]);c||("value"in p&&void 0!==(k=p.value)&&(k!==l.value||"progress"===d&&!k||"option"===d&&k!==y.value)&&H(l,"value",k,y.value,!1),"checked"in p&&void 0!==(k=p.checked)&&k!==l.checked&&H(l,"checked",k,y.checked,!1));}return l}function M(n,u,i){try{"function"==typeof n?n(u):n.current=u;}catch(n){l$1.__e(n,i);}}function N(n,u,i){var t,o;if(l$1.unmount&&l$1.unmount(n),(t=n.ref)&&(t.current&&t.current!==n.__e||M(t,null,u)),null!=(t=n.__c)){if(t.componentWillUnmount)try{t.componentWillUnmount();}catch(n){l$1.__e(n,u);}t.base=t.__P=null;}if(t=n.__k)for(o=0;o<t.length;o++)t[o]&&N(t[o],u,"function"!=typeof n.type);i||null==n.__e||a$1(n.__e),n.__e=n.__d=void 0;}function O(n,l,u){return this.constructor(n,u)}function P(u,i,t){var o,r,e;l$1.__&&l$1.__(u,i),r=(o="function"==typeof t)?null:t&&t.__k||i.__k,e=[],j$1(i,u=(!o&&t||i).__k=h$1(p$1,null,[u]),r||f$1,f$1,void 0!==i.ownerSVGElement,!o&&t?[t]:r?null:i.firstChild?n.call(i.childNodes):null,e,!o&&t?t:r?r.__e:i.firstChild,o),z$1(e,u);}n=e$1.slice,l$1={__e:function(n,l,u,i){for(var t,o,r;l=l.__;)if((t=l.__c)&&!t.__)try{if((o=t.constructor)&&null!=o.getDerivedStateFromError&&(t.setState(o.getDerivedStateFromError(n)),r=t.__d),null!=t.componentDidCatch&&(t.componentDidCatch(n,i||{}),r=t.__d),r)return t.__E=t}catch(l){n=l;}throw n}},u$1=0,d$1.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=s({},this.state),"function"==typeof n&&(n=n(s({},u),this.props)),n&&s(u,n),null!=n&&this.__v&&(l&&this.__h.push(l),b$1(this));},d$1.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),b$1(this));},d$1.prototype.render=p$1,t$1=[],g$1.__r=0;
-
-  var t,r,u,i,o=0,c=[],f=[],e=l$1.__b,a=l$1.__r,v=l$1.diffed,l=l$1.__c,m=l$1.unmount;function d(t,u){l$1.__h&&l$1.__h(r,t,o||u),o=0;var i=r.__H||(r.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({__V:f}),i.__[t]}function p(n){return o=1,y$1(z,n)}function y$1(n,u,i){var o=d(t++,2);if(o.t=n,!o.__c&&(o.__=[i?i(u):z(void 0,u),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}));}],o.__c=r,!r.u)){r.u=!0;var c=r.shouldComponentUpdate;r.shouldComponentUpdate=function(n,t,r){if(!o.__c.__H)return !0;var u=o.__c.__H.__.filter(function(n){return n.__c});if(u.every(function(n){return !n.__N}))return !c||c.call(this,n,t,r);var i=!1;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0);}}),!!i&&(!c||c.call(this,n,t,r))};}return o.__N||o.__}function h(u,i){var o=d(t++,3);!l$1.__s&&w(o.__H,i)&&(o.__=u,o.i=i,r.__H.__h.push(o));}function F(n,r){var u=d(t++,7);return w(u.__H,r)?(u.__V=n(),u.i=r,u.__h=n,u.__V):u.__}function T(n,t){return o=8,F(function(){return n},t)}function b(){for(var t;t=c.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(j),t.__H.__h.forEach(k),t.__H.__h=[];}catch(r){t.__H.__h=[],l$1.__e(r,t.__v);}}l$1.__b=function(n){r=null,e&&e(n);},l$1.__r=function(n){a&&a(n),t=0;var i=(r=n.__c).__H;i&&(u===r?(i.__h=[],r.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=f,n.__N=n.i=void 0;})):(i.__h.forEach(j),i.__h.forEach(k),i.__h=[])),u=r;},l$1.diffed=function(t){v&&v(t);var o=t.__c;o&&o.__H&&(o.__H.__h.length&&(1!==c.push(o)&&i===l$1.requestAnimationFrame||((i=l$1.requestAnimationFrame)||function(n){var t,r=function(){clearTimeout(u),g&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);g&&(t=requestAnimationFrame(r));})(b)),o.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.__V!==f&&(n.__=n.__V),n.i=void 0,n.__V=f;})),u=r=null;},l$1.__c=function(t,r){r.some(function(t){try{t.__h.forEach(j),t.__h=t.__h.filter(function(n){return !n.__||k(n)});}catch(u){r.some(function(n){n.__h&&(n.__h=[]);}),r=[],l$1.__e(u,t.__v);}}),l&&l(t,r);},l$1.unmount=function(t){m&&m(t);var r,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{j(n);}catch(n){r=n;}}),r&&l$1.__e(r,u.__v));};var g="function"==typeof requestAnimationFrame;function j(n){var t=r,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r=t;}function k(n){var t=r;n.__c=n.__(),r=t;}function w(n,t){return !n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function z(n,t){return "function"==typeof t?t(n):t}
-
-  var index_es6 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    BUILD_VERSION: BUILD_VERSION,
-    Component: d$1,
-    Fragment: p$1,
-    PKG_NAME: PKG_NAME,
-    PKG_VERSION: PKG_VERSION,
-    createElement: h$1,
-    h: h$1,
-    render: P,
-    useCallback: T,
-    useEffect: h,
-    useMemo: F,
-    useReducer: y$1,
-    useState: p
-  });
-
-  var pi = Math.PI,
-      tau = 2 * pi,
-      epsilon = 1e-6,
-      tauEpsilon = tau - epsilon;
-
-  function Path() {
-    this._x0 = this._y0 = // start of current subpath
-    this._x1 = this._y1 = null; // end of current subpath
-    this._ = "";
-  }
-
-  function path() {
-    return new Path;
-  }
-
-  Path.prototype = path.prototype = {
-    constructor: Path,
-    moveTo: function(x, y) {
-      this._ += "M" + (this._x0 = this._x1 = +x) + "," + (this._y0 = this._y1 = +y);
-    },
-    closePath: function() {
-      if (this._x1 !== null) {
-        this._x1 = this._x0, this._y1 = this._y0;
-        this._ += "Z";
-      }
-    },
-    lineTo: function(x, y) {
-      this._ += "L" + (this._x1 = +x) + "," + (this._y1 = +y);
-    },
-    quadraticCurveTo: function(x1, y1, x, y) {
-      this._ += "Q" + (+x1) + "," + (+y1) + "," + (this._x1 = +x) + "," + (this._y1 = +y);
-    },
-    bezierCurveTo: function(x1, y1, x2, y2, x, y) {
-      this._ += "C" + (+x1) + "," + (+y1) + "," + (+x2) + "," + (+y2) + "," + (this._x1 = +x) + "," + (this._y1 = +y);
-    },
-    arcTo: function(x1, y1, x2, y2, r) {
-      x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r;
-      var x0 = this._x1,
-          y0 = this._y1,
-          x21 = x2 - x1,
-          y21 = y2 - y1,
-          x01 = x0 - x1,
-          y01 = y0 - y1,
-          l01_2 = x01 * x01 + y01 * y01;
-
-      // Is the radius negative? Error.
-      if (r < 0) throw new Error("negative radius: " + r);
-
-      // Is this path empty? Move to (x1,y1).
-      if (this._x1 === null) {
-        this._ += "M" + (this._x1 = x1) + "," + (this._y1 = y1);
-      }
-
-      // Or, is (x1,y1) coincident with (x0,y0)? Do nothing.
-      else if (!(l01_2 > epsilon));
-
-      // Or, are (x0,y0), (x1,y1) and (x2,y2) collinear?
-      // Equivalently, is (x1,y1) coincident with (x2,y2)?
-      // Or, is the radius zero? Line to (x1,y1).
-      else if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r) {
-        this._ += "L" + (this._x1 = x1) + "," + (this._y1 = y1);
-      }
-
-      // Otherwise, draw an arc!
-      else {
-        var x20 = x2 - x0,
-            y20 = y2 - y0,
-            l21_2 = x21 * x21 + y21 * y21,
-            l20_2 = x20 * x20 + y20 * y20,
-            l21 = Math.sqrt(l21_2),
-            l01 = Math.sqrt(l01_2),
-            l = r * Math.tan((pi - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2),
-            t01 = l / l01,
-            t21 = l / l21;
-
-        // If the start tangent is not coincident with (x0,y0), line to.
-        if (Math.abs(t01 - 1) > epsilon) {
-          this._ += "L" + (x1 + t01 * x01) + "," + (y1 + t01 * y01);
-        }
-
-        this._ += "A" + r + "," + r + ",0,0," + (+(y01 * x20 > x01 * y20)) + "," + (this._x1 = x1 + t21 * x21) + "," + (this._y1 = y1 + t21 * y21);
-      }
-    },
-    arc: function(x, y, r, a0, a1, ccw) {
-      x = +x, y = +y, r = +r, ccw = !!ccw;
-      var dx = r * Math.cos(a0),
-          dy = r * Math.sin(a0),
-          x0 = x + dx,
-          y0 = y + dy,
-          cw = 1 ^ ccw,
-          da = ccw ? a0 - a1 : a1 - a0;
-
-      // Is the radius negative? Error.
-      if (r < 0) throw new Error("negative radius: " + r);
-
-      // Is this path empty? Move to (x0,y0).
-      if (this._x1 === null) {
-        this._ += "M" + x0 + "," + y0;
-      }
-
-      // Or, is (x0,y0) not coincident with the previous point? Line to (x0,y0).
-      else if (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) {
-        this._ += "L" + x0 + "," + y0;
-      }
-
-      // Is this arc empty? We’re done.
-      if (!r) return;
-
-      // Does the angle go the wrong way? Flip the direction.
-      if (da < 0) da = da % tau + tau;
-
-      // Is this a complete circle? Draw two arcs to complete the circle.
-      if (da > tauEpsilon) {
-        this._ += "A" + r + "," + r + ",0,1," + cw + "," + (x - dx) + "," + (y - dy) + "A" + r + "," + r + ",0,1," + cw + "," + (this._x1 = x0) + "," + (this._y1 = y0);
-      }
-
-      // Is this arc non-empty? Draw an arc!
-      else if (da > epsilon) {
-        this._ += "A" + r + "," + r + ",0," + (+(da >= pi)) + "," + cw + "," + (this._x1 = x + r * Math.cos(a1)) + "," + (this._y1 = y + r * Math.sin(a1));
-      }
-    },
-    rect: function(x, y, w, h) {
-      this._ += "M" + (this._x0 = this._x1 = +x) + "," + (this._y0 = this._y1 = +y) + "h" + (+w) + "v" + (+h) + "h" + (-w) + "Z";
-    },
-    toString: function() {
-      return this._;
+    var PKG_NAME$1 = "@hpcc-js/react";
+    var PKG_VERSION$1 = "2.53.3";
+    var BUILD_VERSION$1 = "2.104.14";
+
+    var PKG_NAME = "@hpcc-js/preact-shim";
+    var PKG_VERSION = "2.16.3";
+    var BUILD_VERSION = "2.104.14";
+
+    var n,l$1,u$1,t$1,o$1,f$1={},e$1=[],c$1=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function s(n,l){for(var u in l)n[u]=l[u];return n}function a$1(n){var l=n.parentNode;l&&l.removeChild(n);}function h$1(l,u,i){var t,o,r,f={};for(r in u)"key"==r?t=u[r]:"ref"==r?o=u[r]:f[r]=u[r];if(arguments.length>2&&(f.children=arguments.length>3?n.call(arguments,2):i),"function"==typeof l&&null!=l.defaultProps)for(r in l.defaultProps)void 0===f[r]&&(f[r]=l.defaultProps[r]);return v$1(l,f,t,o,null)}function v$1(n,i,t,o,r){var f={type:n,props:i,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++u$1:r};return null==r&&null!=l$1.vnode&&l$1.vnode(f),f}function p$1(n){return n.children}function d$1(n,l){this.props=n,this.context=l;}function _(n,l){if(null==l)return n.__?_(n.__,n.__.__k.indexOf(n)+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return "function"==typeof n.type?_(n):null}function k$1(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return k$1(n)}}function b$1(n){(!n.__d&&(n.__d=!0)&&t$1.push(n)&&!g$1.__r++||o$1!==l$1.debounceRendering)&&((o$1=l$1.debounceRendering)||setTimeout)(g$1);}function g$1(){for(var n;g$1.__r=t$1.length;)n=t$1.sort(function(n,l){return n.__v.__b-l.__v.__b}),t$1=[],n.some(function(n){var l,u,i,t,o,r;n.__d&&(o=(t=(l=n).__v).__e,(r=l.__P)&&(u=[],(i=s({},t)).__v=t.__v+1,j$1(r,t,i,l.__n,void 0!==r.ownerSVGElement,null!=t.__h?[o]:null,u,null==o?_(t):o,t.__h),z$1(u,t),t.__e!=o&&k$1(t)));});}function w$1(n,l,u,i,t,o,r,c,s,a){var h,y,d,k,b,g,w,x=i&&i.__k||e$1,C=x.length;for(u.__k=[],h=0;h<l.length;h++)if(null!=(k=u.__k[h]=null==(k=l[h])||"boolean"==typeof k?null:"string"==typeof k||"number"==typeof k||"bigint"==typeof k?v$1(null,k,null,null,k):Array.isArray(k)?v$1(p$1,{children:k},null,null,null):k.__b>0?v$1(k.type,k.props,k.key,k.ref?k.ref:null,k.__v):k)){if(k.__=u,k.__b=u.__b+1,null===(d=x[h])||d&&k.key==d.key&&k.type===d.type)x[h]=void 0;else for(y=0;y<C;y++){if((d=x[y])&&k.key==d.key&&k.type===d.type){x[y]=void 0;break}d=null;}j$1(n,k,d=d||f$1,t,o,r,c,s,a),b=k.__e,(y=k.ref)&&d.ref!=y&&(w||(w=[]),d.ref&&w.push(d.ref,null,k),w.push(y,k.__c||b,k)),null!=b?(null==g&&(g=b),"function"==typeof k.type&&k.__k===d.__k?k.__d=s=m$1(k,s,n):s=A(n,k,d,x,b,s),"function"==typeof u.type&&(u.__d=s)):s&&d.__e==s&&s.parentNode!=n&&(s=_(d));}for(u.__e=g,h=C;h--;)null!=x[h]&&N(x[h],x[h]);if(w)for(h=0;h<w.length;h++)M(w[h],w[++h],w[++h]);}function m$1(n,l,u){for(var i,t=n.__k,o=0;t&&o<t.length;o++)(i=t[o])&&(i.__=n,l="function"==typeof i.type?m$1(i,l,u):A(u,i,i,t,i.__e,l));return l}function A(n,l,u,i,t,o){var r,f,e;if(void 0!==l.__d)r=l.__d,l.__d=void 0;else if(null==u||t!=o||null==t.parentNode)n:if(null==o||o.parentNode!==n)n.appendChild(t),r=null;else {for(f=o,e=0;(f=f.nextSibling)&&e<i.length;e+=2)if(f==t)break n;n.insertBefore(t,o),r=o;}return void 0!==r?r:t.nextSibling}function C(n,l,u,i,t){var o;for(o in u)"children"===o||"key"===o||o in l||H(n,o,null,u[o],i);for(o in l)t&&"function"!=typeof l[o]||"children"===o||"key"===o||"value"===o||"checked"===o||u[o]===l[o]||H(n,o,l[o],u[o],i);}function $(n,l,u){"-"===l[0]?n.setProperty(l,u):n[l]=null==u?"":"number"!=typeof u||c$1.test(l)?u:u+"px";}function H(n,l,u,i,t){var o;n:if("style"===l)if("string"==typeof u)n.style.cssText=u;else {if("string"==typeof i&&(n.style.cssText=i=""),i)for(l in i)u&&l in u||$(n.style,l,"");if(u)for(l in u)i&&u[l]===i[l]||$(n.style,l,u[l]);}else if("o"===l[0]&&"n"===l[1])o=l!==(l=l.replace(/Capture$/,"")),l=l.toLowerCase()in n?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+o]=u,u?i||n.addEventListener(l,o?T$1:I,o):n.removeEventListener(l,o?T$1:I,o);else if("dangerouslySetInnerHTML"!==l){if(t)l=l.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("href"!==l&&"list"!==l&&"form"!==l&&"tabIndex"!==l&&"download"!==l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null==u||!1===u&&-1==l.indexOf("-")?n.removeAttribute(l):n.setAttribute(l,u));}}function I(n){this.l[n.type+!1](l$1.event?l$1.event(n):n);}function T$1(n){this.l[n.type+!0](l$1.event?l$1.event(n):n);}function j$1(n,u,i,t,o,r,f,e,c){var a,h,v,y,_,k,b,g,m,x,A,C,$,H,I,T=u.type;if(void 0!==u.constructor)return null;null!=i.__h&&(c=i.__h,e=u.__e=i.__e,u.__h=null,r=[e]),(a=l$1.__b)&&a(u);try{n:if("function"==typeof T){if(g=u.props,m=(a=T.contextType)&&t[a.__c],x=a?m?m.props.value:a.__:t,i.__c?b=(h=u.__c=i.__c).__=h.__E:("prototype"in T&&T.prototype.render?u.__c=h=new T(g,x):(u.__c=h=new d$1(g,x),h.constructor=T,h.render=O),m&&m.sub(h),h.props=g,h.state||(h.state={}),h.context=x,h.__n=t,v=h.__d=!0,h.__h=[],h._sb=[]),null==h.__s&&(h.__s=h.state),null!=T.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=s({},h.__s)),s(h.__s,T.getDerivedStateFromProps(g,h.__s))),y=h.props,_=h.state,v)null==T.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else {if(null==T.getDerivedStateFromProps&&g!==y&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(g,x),!h.__e&&null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(g,h.__s,x)||u.__v===i.__v){for(h.props=g,h.state=h.__s,u.__v!==i.__v&&(h.__d=!1),h.__v=u,u.__e=i.__e,u.__k=i.__k,u.__k.forEach(function(n){n&&(n.__=u);}),A=0;A<h._sb.length;A++)h.__h.push(h._sb[A]);h._sb=[],h.__h.length&&f.push(h);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(g,h.__s,x),null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(y,_,k);});}if(h.context=x,h.props=g,h.__v=u,h.__P=n,C=l$1.__r,$=0,"prototype"in T&&T.prototype.render){for(h.state=h.__s,h.__d=!1,C&&C(u),a=h.render(h.props,h.state,h.context),H=0;H<h._sb.length;H++)h.__h.push(h._sb[H]);h._sb=[];}else do{h.__d=!1,C&&C(u),a=h.render(h.props,h.state,h.context),h.state=h.__s;}while(h.__d&&++$<25);h.state=h.__s,null!=h.getChildContext&&(t=s(s({},t),h.getChildContext())),v||null==h.getSnapshotBeforeUpdate||(k=h.getSnapshotBeforeUpdate(y,_)),I=null!=a&&a.type===p$1&&null==a.key?a.props.children:a,w$1(n,Array.isArray(I)?I:[I],u,i,t,o,r,f,e,c),h.base=u.__e,u.__h=null,h.__h.length&&f.push(h),b&&(h.__E=h.__=null),h.__e=!1;}else null==r&&u.__v===i.__v?(u.__k=i.__k,u.__e=i.__e):u.__e=L(i.__e,u,i,t,o,r,f,c);(a=l$1.diffed)&&a(u);}catch(n){u.__v=null,(c||null!=r)&&(u.__e=e,u.__h=!!c,r[r.indexOf(e)]=null),l$1.__e(n,u,i);}}function z$1(n,u){l$1.__c&&l$1.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u);});}catch(n){l$1.__e(n,u.__v);}});}function L(l,u,i,t,o,r,e,c){var s,h,v,y=i.props,p=u.props,d=u.type,k=0;if("svg"===d&&(o=!0),null!=r)for(;k<r.length;k++)if((s=r[k])&&"setAttribute"in s==!!d&&(d?s.localName===d:3===s.nodeType)){l=s,r[k]=null;break}if(null==l){if(null===d)return document.createTextNode(p);l=o?document.createElementNS("http://www.w3.org/2000/svg",d):document.createElement(d,p.is&&p),r=null,c=!1;}if(null===d)y===p||c&&l.data===p||(l.data=p);else {if(r=r&&n.call(l.childNodes),h=(y=i.props||f$1).dangerouslySetInnerHTML,v=p.dangerouslySetInnerHTML,!c){if(null!=r)for(y={},k=0;k<l.attributes.length;k++)y[l.attributes[k].name]=l.attributes[k].value;(v||h)&&(v&&(h&&v.__html==h.__html||v.__html===l.innerHTML)||(l.innerHTML=v&&v.__html||""));}if(C(l,p,y,o,c),v)u.__k=[];else if(k=u.props.children,w$1(l,Array.isArray(k)?k:[k],u,i,t,o&&"foreignObject"!==d,r,e,r?r[0]:i.__k&&_(i,0),c),null!=r)for(k=r.length;k--;)null!=r[k]&&a$1(r[k]);c||("value"in p&&void 0!==(k=p.value)&&(k!==l.value||"progress"===d&&!k||"option"===d&&k!==y.value)&&H(l,"value",k,y.value,!1),"checked"in p&&void 0!==(k=p.checked)&&k!==l.checked&&H(l,"checked",k,y.checked,!1));}return l}function M(n,u,i){try{"function"==typeof n?n(u):n.current=u;}catch(n){l$1.__e(n,i);}}function N(n,u,i){var t,o;if(l$1.unmount&&l$1.unmount(n),(t=n.ref)&&(t.current&&t.current!==n.__e||M(t,null,u)),null!=(t=n.__c)){if(t.componentWillUnmount)try{t.componentWillUnmount();}catch(n){l$1.__e(n,u);}t.base=t.__P=null,n.__c=void 0;}if(t=n.__k)for(o=0;o<t.length;o++)t[o]&&N(t[o],u,i||"function"!=typeof n.type);i||null==n.__e||a$1(n.__e),n.__=n.__e=n.__d=void 0;}function O(n,l,u){return this.constructor(n,u)}function P(u,i,t){var o,r,e;l$1.__&&l$1.__(u,i),r=(o="function"==typeof t)?null:t&&t.__k||i.__k,e=[],j$1(i,u=(!o&&t||i).__k=h$1(p$1,null,[u]),r||f$1,f$1,void 0!==i.ownerSVGElement,!o&&t?[t]:r?null:i.firstChild?n.call(i.childNodes):null,e,!o&&t?t:r?r.__e:i.firstChild,o),z$1(e,u);}n=e$1.slice,l$1={__e:function(n,l,u,i){for(var t,o,r;l=l.__;)if((t=l.__c)&&!t.__)try{if((o=t.constructor)&&null!=o.getDerivedStateFromError&&(t.setState(o.getDerivedStateFromError(n)),r=t.__d),null!=t.componentDidCatch&&(t.componentDidCatch(n,i||{}),r=t.__d),r)return t.__E=t}catch(l){n=l;}throw n}},u$1=0,d$1.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=s({},this.state),"function"==typeof n&&(n=n(s({},u),this.props)),n&&s(u,n),null!=n&&this.__v&&(l&&this._sb.push(l),b$1(this));},d$1.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),b$1(this));},d$1.prototype.render=p$1,t$1=[],g$1.__r=0;
+
+    var t,r,u,i,o=0,f=[],c=[],e=l$1.__b,a=l$1.__r,v=l$1.diffed,l=l$1.__c,m=l$1.unmount;function d(t,u){l$1.__h&&l$1.__h(r,t,o||u),o=0;var i=r.__H||(r.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({__V:c}),i.__[t]}function p(n){return o=1,y(B,n)}function y(n,u,i){var o=d(t++,2);if(o.t=n,!o.__c&&(o.__=[i?i(u):B(void 0,u),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}));}],o.__c=r,!r.u)){r.u=!0;var f=r.shouldComponentUpdate;r.shouldComponentUpdate=function(n,t,r){if(!o.__c.__H)return !0;var u=o.__c.__H.__.filter(function(n){return n.__c});if(u.every(function(n){return !n.__N}))return !f||f.call(this,n,t,r);var i=!1;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0);}}),!(!i&&o.__c.props===n)&&(!f||f.call(this,n,t,r))};}return o.__N||o.__}function h(u,i){var o=d(t++,3);!l$1.__s&&z(o.__H,i)&&(o.__=u,o.i=i,r.__H.__h.push(o));}function F(n,r){var u=d(t++,7);return z(u.__H,r)?(u.__V=n(),u.i=r,u.__h=n,u.__V):u.__}function T(n,t){return o=8,F(function(){return n},t)}function b(){for(var t;t=f.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(k),t.__H.__h.forEach(w),t.__H.__h=[];}catch(r){t.__H.__h=[],l$1.__e(r,t.__v);}}l$1.__b=function(n){"function"!=typeof n.type||n.__m||null===n.__?n.__m||(n.__m=n.__&&n.__.__m?n.__.__m:""):n.__m=(n.__&&n.__.__m?n.__.__m:"")+(n.__&&n.__.__k?n.__.__k.indexOf(n):0),r=null,e&&e(n);},l$1.__r=function(n){a&&a(n),t=0;var i=(r=n.__c).__H;i&&(u===r?(i.__h=[],r.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=c,n.__N=n.i=void 0;})):(i.__h.forEach(k),i.__h.forEach(w),i.__h=[])),u=r;},l$1.diffed=function(t){v&&v(t);var o=t.__c;o&&o.__H&&(o.__H.__h.length&&(1!==f.push(o)&&i===l$1.requestAnimationFrame||((i=l$1.requestAnimationFrame)||j)(b)),o.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.__V!==c&&(n.__=n.__V),n.i=void 0,n.__V=c;})),u=r=null;},l$1.__c=function(t,r){r.some(function(t){try{t.__h.forEach(k),t.__h=t.__h.filter(function(n){return !n.__||w(n)});}catch(u){r.some(function(n){n.__h&&(n.__h=[]);}),r=[],l$1.__e(u,t.__v);}}),l&&l(t,r);},l$1.unmount=function(t){m&&m(t);var r,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{k(n);}catch(n){r=n;}}),u.__H=void 0,r&&l$1.__e(r,u.__v));};var g="function"==typeof requestAnimationFrame;function j(n){var t,r=function(){clearTimeout(u),g&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);g&&(t=requestAnimationFrame(r));}function k(n){var t=r,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r=t;}function w(n){var t=r;n.__c=n.__(),r=t;}function z(n,t){return !n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function B(n,t){return "function"==typeof t?t(n):t}
+
+    var index_es6 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        BUILD_VERSION: BUILD_VERSION,
+        Component: d$1,
+        Fragment: p$1,
+        PKG_NAME: PKG_NAME,
+        PKG_VERSION: PKG_VERSION,
+        createElement: h$1,
+        h: h$1,
+        render: P,
+        useCallback: T,
+        useEffect: h,
+        useMemo: F,
+        useReducer: y,
+        useState: p
+    });
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
     }
-  };
 
-  function constant(x) {
-    return function constant() {
-      return x;
+    var ImageChar = function (_a) {
+        var x = _a.x, _b = _a.y, y = _b === void 0 ? 0 : _b, _c = _a.height, height = _c === void 0 ? 12 : _c, fill = _a.fill, stroke = _a.stroke, _d = _a.fontFamily, fontFamily = _d === void 0 ? "FontAwesome" : _d, _e = _a.char, char = _e === void 0 ? "" : _e;
+        var renderChar = F(function () {
+            return fontFamily === "FontAwesome" ? common.Utility.faChar(char) : char;
+        }, [char, fontFamily]);
+        return h$1("text", { x: x, y: y, fill: fill, stroke: stroke, "font-family": fontFamily, "font-size": "".concat(height, "px"), "dominant-baseline": "middle", style: "text-anchor: middle;alignment-baseline:middle;" }, renderChar);
     };
-  }
-
-  function Linear(context) {
-    this._context = context;
-  }
-
-  Linear.prototype = {
-    areaStart: function() {
-      this._line = 0;
-    },
-    areaEnd: function() {
-      this._line = NaN;
-    },
-    lineStart: function() {
-      this._point = 0;
-    },
-    lineEnd: function() {
-      if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();
-      this._line = 1 - this._line;
-    },
-    point: function(x, y) {
-      x = +x, y = +y;
-      switch (this._point) {
-        case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;
-        case 1: this._point = 2; // proceed
-        default: this._context.lineTo(x, y); break;
-      }
-    }
-  };
 
-  function curveLinear(context) {
-    return new Linear(context);
-  }
-
-  function x(p) {
-    return p[0];
-  }
-
-  function y(p) {
-    return p[1];
-  }
-
-  function d3Line() {
-    var x$1 = x,
-        y$1 = y,
-        defined = constant(true),
-        context = null,
-        curve = curveLinear,
-        output = null;
-
-    function line(data) {
-      var i,
-          n = data.length,
-          d,
-          defined0 = false,
-          buffer;
-
-      if (context == null) output = curve(buffer = path());
-
-      for (i = 0; i <= n; ++i) {
-        if (!(i < n && defined(d = data[i], i, data)) === defined0) {
-          if (defined0 = !defined0) output.lineStart();
-          else output.lineEnd();
+    var Circle = function (_a) {
+        var _b = _a.radius, radius = _b === void 0 ? 32 : _b, _c = _a.fill, fill = _c === void 0 ? "navy" : _c, _d = _a.stroke, stroke = _d === void 0 ? fill : _d, _e = _a.strokeWidth, strokeWidth = _e === void 0 ? 1 : _e, shapeRendering = _a.shapeRendering;
+        return h$1("circle", { r: radius, fill: fill, stroke: stroke, "stroke-width": strokeWidth, "shape-rendering": shapeRendering });
+    };
+    var Square = function (_a) {
+        var _b = _a.radius, radius = _b === void 0 ? 30 : _b, _c = _a.cornerRadius, cornerRadius = _c === void 0 ? 0 : _c, _d = _a.fill, fill = _d === void 0 ? "white" : _d, stroke = _a.stroke, _e = _a.strokeWidth, strokeWidth = _e === void 0 ? 1 : _e, shapeRendering = _a.shapeRendering;
+        return h$1("rect", { x: -radius, y: -radius, rx: cornerRadius, ry: cornerRadius, width: radius * 2, height: radius * 2, fill: fill, stroke: stroke || fill, "stroke-width": strokeWidth, "shape-rendering": shapeRendering });
+    };
+    var Rectangle = function (_a) {
+        var _b = _a.width, width = _b === void 0 ? 30 : _b, _c = _a.height, height = _c === void 0 ? 30 : _c, _d = _a.cornerRadius, cornerRadius = _d === void 0 ? 0 : _d, _e = _a.fill, fill = _e === void 0 ? "white" : _e, _f = _a.stroke, stroke = _f === void 0 ? "black" : _f, _g = _a.strokeWidth, strokeWidth = _g === void 0 ? 1 : _g, shapeRendering = _a.shapeRendering;
+        return h$1("rect", { x: -width / 2, y: -height / 2, rx: cornerRadius, ry: cornerRadius, width: width, height: height, fill: fill, stroke: stroke || fill, "stroke-width": strokeWidth, "shape-rendering": shapeRendering });
+    };
+    var Shape = function (_a) {
+        var _b = _a.shape, shape = _b === void 0 ? "circle" : _b, _c = _a.height, height = _c === void 0 ? 128 : _c, width = _a.width, fill = _a.fill, stroke = _a.stroke, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 1 : _d, shapeRendering = _a.shapeRendering, cornerRadius = _a.cornerRadius;
+        switch (shape) {
+            case "square":
+                return h$1(Square, { radius: height / 2, fill: fill, stroke: stroke, strokeWidth: strokeWidth, shapeRendering: shapeRendering, cornerRadius: cornerRadius });
+            case "rectangle":
+                return h$1(Rectangle, { width: width !== null && width !== void 0 ? width : height, height: height, fill: fill, stroke: stroke, strokeWidth: strokeWidth, shapeRendering: shapeRendering, cornerRadius: cornerRadius });
+            case "circle":
+            default:
+                return h$1(Circle, { radius: height / 2, fill: fill, stroke: stroke, strokeWidth: strokeWidth, shapeRendering: shapeRendering });
         }
-        if (defined0) output.point(+x$1(d, i, data), +y$1(d, i, data));
-      }
-
-      if (buffer) return output = null, buffer + "" || null;
-    }
-
-    line.x = function(_) {
-      return arguments.length ? (x$1 = typeof _ === "function" ? _ : constant(+_), line) : x$1;
     };
 
-    line.y = function(_) {
-      return arguments.length ? (y$1 = typeof _ === "function" ? _ : constant(+_), line) : y$1;
+    var Icon = function (_a) {
+        var _b = _a.shape, shape = _b === void 0 ? "circle" : _b, width = _a.width, _c = _a.height, height = _c === void 0 ? 32 : _c, fill = _a.fill, stroke = _a.stroke, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 0 : _d, _e = _a.imageFontFamily, imageFontFamily = _e === void 0 ? "FontAwesome" : _e, _f = _a.imageChar, imageChar = _f === void 0 ? "" : _f, _g = _a.imageCharFill, imageCharFill = _g === void 0 ? common.Palette.textColor(fill) : _g, _h = _a.padding, padding = _h === void 0 ? height / 5 : _h, _j = _a.xOffset, xOffset = _j === void 0 ? 0 : _j, _k = _a.yOffset, yOffset = _k === void 0 ? 0 : _k, cornerRadius = _a.cornerRadius, shapeRendering = _a.shapeRendering;
+        return h$1(p$1, null,
+            h$1(Shape, { shape: shape, width: width, height: height, fill: fill, stroke: stroke, strokeWidth: strokeWidth, shapeRendering: shapeRendering, cornerRadius: cornerRadius }),
+            h$1(ImageChar, { x: xOffset, y: yOffset, height: height - padding, fontFamily: imageFontFamily, char: imageChar, fill: imageCharFill, "font-weight": 400 }));
     };
-
-    line.defined = function(_) {
-      return arguments.length ? (defined = typeof _ === "function" ? _ : constant(!!_), line) : defined;
+    var Icons = function (_a) {
+        var _b = _a.icons, icons = _b === void 0 ? [] : _b;
+        var IconComponents = icons.map(function (cat) {
+            return h$1("g", { key: cat.id, id: cat.id },
+                h$1(Icon, __assign({}, cat)));
+        });
+        return h$1(p$1, null, IconComponents);
     };
 
-    line.curve = function(_) {
-      return arguments.length ? (curve = _, context != null && (output = curve(context)), line) : curve;
+    var TextLine = function (_a) {
+        var text = _a.text, _b = _a.height, height = _b === void 0 ? 12 : _b, _c = _a.anchor, anchor = _c === void 0 ? "middle" : _c, _d = _a.baseline, baseline = _d === void 0 ? "middle" : _d, _e = _a.fontFamily, fontFamily = _e === void 0 ? "Verdana" : _e, _f = _a.fill, fill = _f === void 0 ? "black" : _f;
+        return h$1("text", { "font-family": fontFamily, "font-size": "".concat(height, "px"), "text-anchor": anchor, "dominant-baseline": baseline, fill: fill }, text);
     };
-
-    line.context = function(_) {
-      return arguments.length ? (_ == null ? context = output = null : output = curve(context = _), line) : context;
+    var Text = function (_a) {
+        var text = _a.text, _b = _a.height, height = _b === void 0 ? 12 : _b, _c = _a.fontFamily, fontFamily = _c === void 0 ? "Verdana" : _c, _d = _a.fill, fill = _d === void 0 ? "black" : _d, onSizeUpdate = _a.onSizeUpdate;
+        var _e = p(0), totalWidth = _e[0], setTotalWidthUpdate = _e[1];
+        var _f = p(0), totalHeight = _f[0], setTotalHeightUpdate = _f[1];
+        h(function () {
+            onSizeUpdate && onSizeUpdate({ width: totalWidth, height: totalHeight });
+        }, [totalWidth, totalHeight, onSizeUpdate]);
+        var parts = F(function () {
+            return text.split("\n");
+        }, [text]);
+        var ts = F(function () {
+            return common.Utility.textSize(parts, fontFamily, height);
+        }, [fontFamily, height, parts]);
+        setTotalWidthUpdate(ts.width);
+        setTotalHeightUpdate(parts.length * (height + 2) - 2);
+        var yOffset = -(totalHeight / 2) + (height / 2);
+        var TextLines = F(function () {
+            return parts.map(function (p, i) {
+                return h$1("g", { key: i, transform: "translate(0 ".concat(yOffset + i * (height + 2), ")") },
+                    h$1(TextLine, { text: p, height: height, fontFamily: fontFamily, fill: fill }));
+            });
+        }, [fill, fontFamily, height, parts, yOffset]);
+        return h$1(p$1, null, TextLines);
+    };
+    var TextBox = function (_a) {
+        var text = _a.text, _b = _a.height, height = _b === void 0 ? 12 : _b, _c = _a.fontFamily, fontFamily = _c === void 0 ? "Verdana" : _c, _d = _a.padding, padding = _d === void 0 ? 4 : _d, _e = _a.fill, fill = _e === void 0 ? "whitesmoke" : _e, _f = _a.stroke, stroke = _f === void 0 ? "lightgray" : _f, _g = _a.textFill, textFill = _g === void 0 ? "black" : _g, _h = _a.strokeWidth, strokeWidth = _h === void 0 ? 1 : _h, _j = _a.cornerRadius, cornerRadius = _j === void 0 ? 0 : _j, onSizeUpdate = _a.onSizeUpdate;
+        var _k = p(0), textWidth = _k[0], setTextWidthUpdate = _k[1];
+        var _l = p(0), textHeight = _l[0], setTextHeightUpdate = _l[1];
+        h(function () {
+            onSizeUpdate && onSizeUpdate({ width: textWidth, height: textHeight });
+        }, [textWidth, textHeight, onSizeUpdate]);
+        var onTextSizeUpdate = T(function (size) {
+            setTextWidthUpdate(size.width);
+            setTextHeightUpdate(size.height);
+        }, []);
+        var w = textWidth + padding * 2 + strokeWidth;
+        var h$2 = textHeight + padding * 2 + strokeWidth;
+        var textOffsetY = Math.floor(height / 10);
+        return h$1(p$1, null,
+            h$1(Rectangle, { width: w, height: h$2, fill: fill, stroke: stroke, strokeWidth: strokeWidth, cornerRadius: cornerRadius }),
+            h$1("g", { transform: "translate(0 ".concat(textOffsetY, ")") },
+                h$1(Text, { text: text, fontFamily: fontFamily, height: height, fill: textFill, onSizeUpdate: onTextSizeUpdate })));
+    };
+    var LabelledRect = function (_a) {
+        var text = _a.text, _b = _a.height, height = _b === void 0 ? 12 : _b, _c = _a.width, width = _c === void 0 ? 12 : _c, _d = _a.fontFamily, fontFamily = _d === void 0 ? "Verdana" : _d, _e = _a.fontSize, fontSize = _e === void 0 ? 10 : _e, _f = _a.padding, padding = _f === void 0 ? 3 : _f, _g = _a.fill, fill = _g === void 0 ? "whitesmoke" : _g, _h = _a.stroke, stroke = _h === void 0 ? "lightgray" : _h, _j = _a.textFill, textFill = _j === void 0 ? "black" : _j, _k = _a.strokeWidth, strokeWidth = _k === void 0 ? 1 : _k, _l = _a.cornerRadius, cornerRadius = _l === void 0 ? 0 : _l; _a.onSizeUpdate;
+        return h$1(p$1, null,
+            h$1(Rectangle, { width: width, height: height, fill: fill, stroke: stroke, strokeWidth: strokeWidth, cornerRadius: cornerRadius }),
+            h$1("g", { transform: "translate(".concat(-(width / 2) + padding, " ").concat(-(height / 2) + padding, ")") },
+                h$1(TextLine, { text: text, fontFamily: fontFamily, height: fontSize, fill: textFill, anchor: "start", baseline: "hanging" })));
+    };
+    var IconLabelledRect = function (_a) {
+        var icon = _a.icon, iconFontFamily = _a.iconFontFamily, text = _a.text, _b = _a.height, height = _b === void 0 ? 12 : _b, _c = _a.width, width = _c === void 0 ? 12 : _c, _d = _a.fontFamily, fontFamily = _d === void 0 ? "Verdana" : _d, _e = _a.fontSize, fontSize = _e === void 0 ? 10 : _e, _f = _a.padding, padding = _f === void 0 ? 3 : _f, _g = _a.fill, fill = _g === void 0 ? "whitesmoke" : _g, _h = _a.stroke, stroke = _h === void 0 ? "lightgray" : _h, _j = _a.textFill, textFill = _j === void 0 ? "black" : _j, _k = _a.strokeWidth, strokeWidth = _k === void 0 ? 1 : _k, _l = _a.cornerRadius, cornerRadius = _l === void 0 ? 0 : _l; _a.onSizeUpdate;
+        return h$1(p$1, null,
+            h$1(Rectangle, { width: width, height: height, fill: fill, stroke: stroke, strokeWidth: strokeWidth, cornerRadius: cornerRadius }),
+            h$1("g", { transform: "translate(".concat(-(width / 2) + padding, " ").concat(-(height / 2) + padding, ")") },
+                h$1(Icon, { shape: "square", imageFontFamily: iconFontFamily, imageChar: icon, height: height, fill: fill, imageCharFill: textFill })),
+            h$1("g", { transform: "translate(".concat(-(width / 2) + (padding * 2) + height, " ").concat(-(height / 2) + padding, ")") },
+                h$1(TextLine, { text: text, fontFamily: fontFamily, height: fontSize, fill: textFill, anchor: "start", baseline: "hanging" })));
     };
 
-    return line;
-  }
-
-  function point(that, x, y) {
-    that._context.bezierCurveTo(
-      (2 * that._x0 + that._x1) / 3,
-      (2 * that._y0 + that._y1) / 3,
-      (that._x0 + 2 * that._x1) / 3,
-      (that._y0 + 2 * that._y1) / 3,
-      (that._x0 + 4 * that._x1 + x) / 6,
-      (that._y0 + 4 * that._y1 + y) / 6
-    );
-  }
-
-  function Basis(context) {
-    this._context = context;
-  }
+    var Edge = function (_a) {
+        var label = _a.label, labelPos = _a.labelPos, _b = _a.labelFill, labelFill = _b === void 0 ? "black" : _b, _c = _a.labelHeight, labelHeight = _c === void 0 ? 12 : _c, path = _a.path, stroke = _a.stroke, strokeWidth = _a.strokeWidth, strokeDasharray = _a.strokeDasharray;
+        return h$1(p$1, null,
+            h$1("path", { d: path, stroke: stroke, style: { strokeWidth: strokeWidth, strokeDasharray: strokeDasharray } }),
+            label && labelPos && labelPos.length === 2 ?
+                h$1("g", { transform: "translate(".concat(labelPos[0], " ").concat(labelPos[1], ")") },
+                    h$1(Text, { text: label, fill: labelFill, height: labelHeight })) : undefined);
+    };
 
-  Basis.prototype = {
-    areaStart: function() {
-      this._line = 0;
-    },
-    areaEnd: function() {
-      this._line = NaN;
-    },
-    lineStart: function() {
-      this._x0 = this._x1 =
-      this._y0 = this._y1 = NaN;
-      this._point = 0;
-    },
-    lineEnd: function() {
-      switch (this._point) {
-        case 3: point(this, this._x1, this._y1); // proceed
-        case 2: this._context.lineTo(this._x1, this._y1); break;
-      }
-      if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();
-      this._line = 1 - this._line;
-    },
-    point: function(x, y) {
-      x = +x, y = +y;
-      switch (this._point) {
-        case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;
-        case 1: this._point = 2; break;
-        case 2: this._point = 3; this._context.lineTo((5 * this._x0 + this._x1) / 6, (5 * this._y0 + this._y1) / 6); // proceed
-        default: point(this, x, y); break;
-      }
-      this._x0 = this._x1, this._x1 = x;
-      this._y0 = this._y1, this._y1 = y;
+    function render(C, props, parent, replaceNode) {
+        P(h$1(C, props), parent, replaceNode);
     }
-  };
-
-  function d3CurveBasis(context) {
-    return new Basis(context);
-  }
-
-  var line = d3Line()
-      .x(function (d) { return d[0]; })
-      .y(function (d) { return d[1]; })
-      .curve(d3CurveBasis);
-  function calcArc(points, curveDepth) {
-      if (points.length === 2 && curveDepth) {
-          var dx = points[0][0] - points[1][0];
-          var dy = points[0][1] - points[1][1];
-          var dist = Math.sqrt(dx * dx + dy * dy);
-          if (dist) {
-              var midX = (points[0][0] + points[1][0]) / 2 - dy * curveDepth / 100;
-              var midY = (points[0][1] + points[1][1]) / 2 + dx * curveDepth / 100;
-              return [points[0], [midX, midY], points[1]];
-          }
-      }
-      return points;
-  }
-  var Edge = function (_a) {
-      var _b = _a.points, points = _b === void 0 ? [] : _b, _c = _a.curveDepth, curveDepth = _c === void 0 ? 16 : _c, _d = _a.stroke, stroke = _d === void 0 ? "black" : _d, strokeDasharray = _a.strokeDasharray;
-      var d = F(function () {
-          return line(calcArc(points, curveDepth));
-      }, [curveDepth, points]);
-      return h$1("path", { stroke: stroke, "stroke-dasharray": strokeDasharray, d: d });
-  };
-
-  var ImageChar = function (_a) {
-      var x = _a.x, _b = _a.y, y = _b === void 0 ? 0 : _b, _c = _a.height, height = _c === void 0 ? 12 : _c, fill = _a.fill, stroke = _a.stroke, _d = _a.fontFamily, fontFamily = _d === void 0 ? "FontAwesome" : _d, _e = _a.char, char = _e === void 0 ? "" : _e;
-      var renderChar = F(function () {
-          return fontFamily === "FontAwesome" ? common.Utility.faChar(char) : char;
-      }, [char, fontFamily]);
-      return h$1("text", { x: x, y: y, fill: fill, stroke: stroke, "font-family": fontFamily, "font-size": "".concat(height, "px"), "dominant-baseline": "middle", style: "text-anchor: middle;alignment-baseline:middle;" }, renderChar);
-  };
-
-  /******************************************************************************
-  Copyright (c) Microsoft Corporation.
-
-  Permission to use, copy, modify, and/or distribute this software for any
-  purpose with or without fee is hereby granted.
-
-  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-  PERFORMANCE OF THIS SOFTWARE.
-  ***************************************************************************** */
-  /* global Reflect, Promise */
-
-  var extendStatics = function(d, b) {
-      extendStatics = Object.setPrototypeOf ||
-          ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-          function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-      return extendStatics(d, b);
-  };
-
-  function __extends(d, b) {
-      if (typeof b !== "function" && b !== null)
-          throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-      extendStatics(d, b);
-      function __() { this.constructor = d; }
-      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-  }
-
-  var __assign = function() {
-      __assign = Object.assign || function __assign(t) {
-          for (var s, i = 1, n = arguments.length; i < n; i++) {
-              s = arguments[i];
-              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-          }
-          return t;
-      };
-      return __assign.apply(this, arguments);
-  };
-
-  function __decorate(decorators, target, key, desc) {
-      var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-      return c > 3 && r && Object.defineProperty(target, key, r), r;
-  }
-
-  function __metadata(metadataKey, metadataValue) {
-      if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
-  }
-
-  var Circle = function (_a) {
-      var _b = _a.radius, radius = _b === void 0 ? 32 : _b, _c = _a.fill, fill = _c === void 0 ? "navy" : _c, _d = _a.stroke, stroke = _d === void 0 ? fill : _d, _e = _a.strokeWidth, strokeWidth = _e === void 0 ? 1 : _e, shapeRendering = _a.shapeRendering;
-      return h$1("circle", { r: radius, fill: fill, stroke: stroke, "stroke-width": strokeWidth, "shape-rendering": shapeRendering });
-  };
-  var Square = function (_a) {
-      var _b = _a.radius, radius = _b === void 0 ? 30 : _b, _c = _a.cornerRadius, cornerRadius = _c === void 0 ? 0 : _c, _d = _a.fill, fill = _d === void 0 ? "white" : _d, stroke = _a.stroke, _e = _a.strokeWidth, strokeWidth = _e === void 0 ? 1 : _e, shapeRendering = _a.shapeRendering;
-      return h$1("rect", { x: -radius, y: -radius, rx: cornerRadius, ry: cornerRadius, width: radius * 2, height: radius * 2, fill: fill, stroke: stroke || fill, "stroke-width": strokeWidth, "shape-rendering": shapeRendering });
-  };
-  var Rectangle = function (_a) {
-      var _b = _a.width, width = _b === void 0 ? 30 : _b, _c = _a.height, height = _c === void 0 ? 30 : _c, _d = _a.cornerRadius, cornerRadius = _d === void 0 ? 0 : _d, _e = _a.fill, fill = _e === void 0 ? "white" : _e, _f = _a.stroke, stroke = _f === void 0 ? "black" : _f, _g = _a.strokeWidth, strokeWidth = _g === void 0 ? 1 : _g, shapeRendering = _a.shapeRendering;
-      return h$1("rect", { x: -width / 2, y: -height / 2, rx: cornerRadius, ry: cornerRadius, width: width, height: height, fill: fill, stroke: stroke || fill, "stroke-width": strokeWidth, "shape-rendering": shapeRendering });
-  };
-  var Shape = function (_a) {
-      var _b = _a.shape, shape = _b === void 0 ? "circle" : _b, _c = _a.height, height = _c === void 0 ? 128 : _c, width = _a.width, fill = _a.fill, stroke = _a.stroke, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 1 : _d, shapeRendering = _a.shapeRendering, cornerRadius = _a.cornerRadius;
-      switch (shape) {
-          case "square":
-              return h$1(Square, { radius: height / 2, fill: fill, stroke: stroke, strokeWidth: strokeWidth, shapeRendering: shapeRendering, cornerRadius: cornerRadius });
-          case "rectangle":
-              return h$1(Rectangle, { width: width !== null && width !== void 0 ? width : height, height: height, fill: fill, stroke: stroke, strokeWidth: strokeWidth, shapeRendering: shapeRendering, cornerRadius: cornerRadius });
-          case "circle":
-          default:
-              return h$1(Circle, { radius: height / 2, fill: fill, stroke: stroke, strokeWidth: strokeWidth, shapeRendering: shapeRendering });
-      }
-  };
-
-  var Icon = function (_a) {
-      var _b = _a.shape, shape = _b === void 0 ? "circle" : _b, width = _a.width, _c = _a.height, height = _c === void 0 ? 32 : _c, fill = _a.fill, stroke = _a.stroke, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 0 : _d, _e = _a.imageFontFamily, imageFontFamily = _e === void 0 ? "FontAwesome" : _e, _f = _a.imageChar, imageChar = _f === void 0 ? "" : _f, _g = _a.imageCharFill, imageCharFill = _g === void 0 ? common.Palette.textColor(fill) : _g, _h = _a.padding, padding = _h === void 0 ? height / 5 : _h, _j = _a.xOffset, xOffset = _j === void 0 ? 0 : _j, _k = _a.yOffset, yOffset = _k === void 0 ? 0 : _k, cornerRadius = _a.cornerRadius, shapeRendering = _a.shapeRendering;
-      return h$1(p$1, null,
-          h$1(Shape, { shape: shape, width: width, height: height, fill: fill, stroke: stroke, strokeWidth: strokeWidth, shapeRendering: shapeRendering, cornerRadius: cornerRadius }),
-          h$1(ImageChar, { x: xOffset, y: yOffset, height: height - padding, fontFamily: imageFontFamily, char: imageChar, fill: imageCharFill, "font-weight": 400 }));
-  };
-  var Icons = function (_a) {
-      var _b = _a.icons, icons = _b === void 0 ? [] : _b;
-      var IconComponents = icons.map(function (cat) {
-          return h$1("g", { key: cat.id, id: cat.id },
-              h$1(Icon, __assign({}, cat)));
-      });
-      return h$1(p$1, null, IconComponents);
-  };
-
-  function render(C, props, parent, replaceNode) {
-      P(h$1(C, props), parent, replaceNode);
-  }
-  function svgRender(C, props, parent, replaceNode) {
-      P(h$1("svg", null, h$1(C, props)), parent, replaceNode);
-  }
-  var HTMLAdapter = /** @class */ (function (_super) {
-      __extends(HTMLAdapter, _super);
-      function HTMLAdapter(_component) {
-          var _this = _super.call(this) || this;
-          _this._component = _component;
-          _this._props = {};
-          return _this;
-      }
-      HTMLAdapter.prototype.props = function (_) {
-          if (!arguments.length)
-              return this._props;
-          this._props = __assign(__assign({}, this._props), _);
-          return this;
-      };
-      HTMLAdapter.prototype.prop = function (_, value) {
-          if (arguments.length === 1)
-              return this._props[_];
-          this._props[_] = value;
-          return this;
-      };
-      HTMLAdapter.prototype.update = function (domNode, element) {
-          _super.prototype.update.call(this, domNode, element);
-          render(this._component, this._props, domNode);
-      };
-      __decorate([
-          common.publish({}, "object", "Properties"),
-          __metadata("design:type", Object)
-      ], HTMLAdapter.prototype, "_props", void 0);
-      return HTMLAdapter;
-  }(common.HTMLWidget));
-  var SVGAdapter = /** @class */ (function (_super) {
-      __extends(SVGAdapter, _super);
-      function SVGAdapter(_component) {
-          var _this = _super.call(this) || this;
-          _this._component = _component;
-          _this._props = {};
-          return _this;
-      }
-      SVGAdapter.prototype.props = function (_) {
-          if (!arguments.length)
-              return this._props;
-          this._props = __assign(__assign({}, this._props), _);
-          return this;
-      };
-      SVGAdapter.prototype.prop = function (_, value) {
-          if (arguments.length === 1)
-              return this._props[_];
-          this._props[_] = value;
-          return this;
-      };
-      SVGAdapter.prototype.update = function (domNode, element) {
-          _super.prototype.update.call(this, domNode, element);
-          render(this._component, this._props, domNode);
-      };
-      __decorate([
-          common.publish({}, "object", "Properties"),
-          __metadata("design:type", Object)
-      ], SVGAdapter.prototype, "_props", void 0);
-      return SVGAdapter;
-  }(common.SVGWidget));
-
-  var TextLine = function (_a) {
-      var text = _a.text, _b = _a.height, height = _b === void 0 ? 12 : _b, _c = _a.anchor, anchor = _c === void 0 ? "middle" : _c, _d = _a.baseline, baseline = _d === void 0 ? "middle" : _d, _e = _a.fontFamily, fontFamily = _e === void 0 ? "Verdana" : _e, _f = _a.fill, fill = _f === void 0 ? "black" : _f;
-      return h$1("text", { "font-family": fontFamily, "font-size": "".concat(height, "px"), "text-anchor": anchor, "dominant-baseline": baseline, fill: fill }, text);
-  };
-  var Text = function (_a) {
-      var text = _a.text, _b = _a.height, height = _b === void 0 ? 12 : _b, _c = _a.fontFamily, fontFamily = _c === void 0 ? "Verdana" : _c, _d = _a.fill, fill = _d === void 0 ? "black" : _d, onSizeUpdate = _a.onSizeUpdate;
-      var _e = p(0), totalWidth = _e[0], setTotalWidthUpdate = _e[1];
-      var _f = p(0), totalHeight = _f[0], setTotalHeightUpdate = _f[1];
-      h(function () {
-          onSizeUpdate && onSizeUpdate({ width: totalWidth, height: totalHeight });
-      }, [totalWidth, totalHeight, onSizeUpdate]);
-      var parts = F(function () {
-          return text.split("\n");
-      }, [text]);
-      var ts = F(function () {
-          return common.Utility.textSize(parts, fontFamily, height);
-      }, [fontFamily, height, parts]);
-      setTotalWidthUpdate(ts.width);
-      setTotalHeightUpdate(parts.length * (height + 2) - 2);
-      var yOffset = -(totalHeight / 2) + (height / 2);
-      var TextLines = F(function () {
-          return parts.map(function (p, i) {
-              return h$1("g", { key: i, transform: "translate(0 ".concat(yOffset + i * (height + 2), ")") },
-                  h$1(TextLine, { text: p, height: height, fontFamily: fontFamily, fill: fill }));
-          });
-      }, [fill, fontFamily, height, parts, yOffset]);
-      return h$1(p$1, null, TextLines);
-  };
-  var TextBox = function (_a) {
-      var text = _a.text, _b = _a.height, height = _b === void 0 ? 12 : _b, _c = _a.fontFamily, fontFamily = _c === void 0 ? "Verdana" : _c, _d = _a.padding, padding = _d === void 0 ? 4 : _d, _e = _a.fill, fill = _e === void 0 ? "whitesmoke" : _e, _f = _a.stroke, stroke = _f === void 0 ? "lightgray" : _f, _g = _a.textFill, textFill = _g === void 0 ? "black" : _g, _h = _a.strokeWidth, strokeWidth = _h === void 0 ? 1 : _h, _j = _a.cornerRadius, cornerRadius = _j === void 0 ? 0 : _j, onSizeUpdate = _a.onSizeUpdate;
-      var _k = p(0), textWidth = _k[0], setTextWidthUpdate = _k[1];
-      var _l = p(0), textHeight = _l[0], setTextHeightUpdate = _l[1];
-      h(function () {
-          onSizeUpdate && onSizeUpdate({ width: textWidth, height: textHeight });
-      }, [textWidth, textHeight, onSizeUpdate]);
-      var onTextSizeUpdate = T(function (size) {
-          setTextWidthUpdate(size.width);
-          setTextHeightUpdate(size.height);
-      }, []);
-      var w = textWidth + padding * 2 + strokeWidth;
-      var h$2 = textHeight + padding * 2 + strokeWidth;
-      var textOffsetY = Math.floor(height / 10);
-      return h$1(p$1, null,
-          h$1(Rectangle, { width: w, height: h$2, fill: fill, stroke: stroke, strokeWidth: strokeWidth, cornerRadius: cornerRadius }),
-          h$1("g", { transform: "translate(0 ".concat(textOffsetY, ")") },
-              h$1(Text, { text: text, fontFamily: fontFamily, height: height, fill: textFill, onSizeUpdate: onTextSizeUpdate })));
-  };
-  var LabelledRect = function (_a) {
-      var text = _a.text, _b = _a.height, height = _b === void 0 ? 12 : _b, _c = _a.width, width = _c === void 0 ? 12 : _c, _d = _a.fontFamily, fontFamily = _d === void 0 ? "Verdana" : _d, _e = _a.fontSize, fontSize = _e === void 0 ? 10 : _e, _f = _a.padding, padding = _f === void 0 ? 3 : _f, _g = _a.fill, fill = _g === void 0 ? "whitesmoke" : _g, _h = _a.stroke, stroke = _h === void 0 ? "lightgray" : _h, _j = _a.textFill, textFill = _j === void 0 ? "black" : _j, _k = _a.strokeWidth, strokeWidth = _k === void 0 ? 1 : _k, _l = _a.cornerRadius, cornerRadius = _l === void 0 ? 0 : _l; _a.onSizeUpdate;
-      return h$1(p$1, null,
-          h$1(Rectangle, { width: width, height: height, fill: fill, stroke: stroke, strokeWidth: strokeWidth, cornerRadius: cornerRadius }),
-          h$1("g", { transform: "translate(".concat(-(width / 2) + padding, " ").concat(-(height / 2) + padding, ")") },
-              h$1(TextLine, { text: text, fontFamily: fontFamily, height: fontSize, fill: textFill, anchor: "start", baseline: "hanging" })));
-  };
-  var IconLabelledRect = function (_a) {
-      var icon = _a.icon, iconFontFamily = _a.iconFontFamily, text = _a.text, _b = _a.height, height = _b === void 0 ? 12 : _b, _c = _a.width, width = _c === void 0 ? 12 : _c, _d = _a.fontFamily, fontFamily = _d === void 0 ? "Verdana" : _d, _e = _a.fontSize, fontSize = _e === void 0 ? 10 : _e, _f = _a.padding, padding = _f === void 0 ? 3 : _f, _g = _a.fill, fill = _g === void 0 ? "whitesmoke" : _g, _h = _a.stroke, stroke = _h === void 0 ? "lightgray" : _h, _j = _a.textFill, textFill = _j === void 0 ? "black" : _j, _k = _a.strokeWidth, strokeWidth = _k === void 0 ? 1 : _k, _l = _a.cornerRadius, cornerRadius = _l === void 0 ? 0 : _l; _a.onSizeUpdate;
-      return h$1(p$1, null,
-          h$1(Rectangle, { width: width, height: height, fill: fill, stroke: stroke, strokeWidth: strokeWidth, cornerRadius: cornerRadius }),
-          h$1("g", { transform: "translate(".concat(-(width / 2) + padding, " ").concat(-(height / 2) + padding, ")") },
-              h$1(Icon, { shape: "square", imageFontFamily: iconFontFamily, imageChar: icon, height: height, fill: fill, imageCharFill: textFill })),
-          h$1("g", { transform: "translate(".concat(-(width / 2) + (padding * 2) + height, " ").concat(-(height / 2) + padding, ")") },
-              h$1(TextLine, { text: text, fontFamily: fontFamily, height: fontSize, fill: textFill, anchor: "start", baseline: "hanging" })));
-  };
-
-  var Annotations = function (_a) {
-      var x = _a.x, y = _a.y, _b = _a.annotationIDs, annotationIDs = _b === void 0 ? [] : _b, _c = _a.stepSize, stepSize = _c === void 0 ? -16 : _c;
-      var IconComponents = annotationIDs.map(function (id, i) { return h$1("g", { key: id, transform: "translate(".concat(x + i * stepSize, " ").concat(y, ")") },
-          h$1("use", { href: "#" + id })); });
-      return h$1(p$1, null, IconComponents);
-  };
-  var Vertex = function (_a) {
-      var _b = _a.categoryID, categoryID = _b === void 0 ? "" : _b, _c = _a.text, text = _c === void 0 ? "" : _c, _d = _a.textHeight, textHeight = _d === void 0 ? 12 : _d, _e = _a.textPadding, textPadding = _e === void 0 ? 4 : _e, _f = _a.icon, icon = _f === void 0 ? {} : _f, _g = _a.annotationsHeight, annotationsHeight = _g === void 0 ? 12 : _g, _h = _a.annotationIDs, annotationIDs = _h === void 0 ? [] : _h, textFill = _a.textFill, textboxFill = _a.textboxFill, textboxStroke = _a.textboxStroke, textFontFamily = _a.textFontFamily, onSizeUpdate = _a.onSizeUpdate, _j = _a.showLabel, showLabel = _j === void 0 ? true : _j, _k = _a.scale, scale = _k === void 0 ? 1 : _k;
-      var _l = p(0), textBoxWidth = _l[0], setTextBoxWidthUpdate = _l[1];
-      var _m = p(0), textBoxHeight = _m[0], setTextBoxHeightUpdate = _m[1];
-      h(function () {
-          onSizeUpdate && onSizeUpdate({ width: 0, height: 0 });
-      }, [textBoxWidth, textBoxHeight, onSizeUpdate]);
-      icon = __assign({ imageChar: "fa-question", height: 32, fill: "transparent" }, icon);
-      var width = textBoxWidth;
-      width += 4;
-      var offsetY = -(icon.height * 2 / 6 + textHeight + 8) / 2;
-      var textboxOffsetY = icon.height / 3 + textBoxHeight / 2 + textPadding;
-      var annotationOffsetY = icon.height / 3 + textBoxHeight + textPadding + annotationsHeight / 3;
-      if (!showLabel) {
-          offsetY += (textHeight + 8) / 2;
-          annotationOffsetY -= textBoxHeight + textPadding;
-      }
-      var onTextBoxSizeUpdate = T(function (size) {
-          setTextBoxWidthUpdate(size.width);
-          setTextBoxHeightUpdate(size.height);
-      }, []);
-      var label = showLabel ? h$1("g", { transform: "translate(0 ".concat(textboxOffsetY, ")") },
-          h$1(TextBox, { text: text, height: textHeight, padding: textPadding, onSizeUpdate: onTextBoxSizeUpdate, textFill: textFill, fill: textboxFill, stroke: textboxStroke, fontFamily: textFontFamily })) : undefined;
-      return categoryID ?
-          h$1("g", { transform: "translate(0 ".concat(offsetY, ") scale(").concat(scale, ")") },
-              h$1("use", { href: "#" + categoryID }),
-              label,
-              h$1(Annotations, { x: width / 2, y: annotationOffsetY, annotationIDs: annotationIDs })) :
-          h$1("g", { transform: "translate(0 ".concat(offsetY, ") scale(").concat(scale, ")") },
-              h$1(Icon, __assign({}, icon)),
-              label);
-  };
-
-  var Vertex2 = function (_a) {
-      var _b = _a.categoryID, categoryID = _b === void 0 ? "" : _b, _c = _a.text, text = _c === void 0 ? "" : _c, _d = _a.textHeight, textHeight = _d === void 0 ? 12 : _d, _e = _a.textPadding, textPadding = _e === void 0 ? 4 : _e, _f = _a.icon, icon = _f === void 0 ? {} : _f, _g = _a.textFill, textFill = _g === void 0 ? "black" : _g, _h = _a.textboxFill, textboxFill = _h === void 0 ? "white" : _h, _j = _a.textboxStroke, textboxStroke = _j === void 0 ? "black" : _j, textFontFamily = _a.textFontFamily, _k = _a.annotationsHeight, annotationsHeight = _k === void 0 ? 12 : _k, _l = _a.annotationIDs, annotationIDs = _l === void 0 ? [] : _l;
-      icon = __assign({ imageChar: "fa-question", imageCharFill: "white", height: 32, fill: "black", shape: "square" }, icon);
-      var textBoxHeight = textHeight + textPadding * 2;
-      var width = F(function () {
-          return common.Utility.textSize(text, textFontFamily, textHeight, false);
-      }, [text, textFontFamily, textHeight]).width;
-      var stepSize = annotationsHeight;
-      var textboxStrokeWidth = 1;
-      var halfTextboxHeight = textBoxHeight / 2;
-      var offsetX = 0;
-      var offsetY = -(icon.height * 2 / 6 + textHeight + 8) / 2;
-      var iconOffsetX = -icon.height / 2;
-      var iconOffsetY = 0;
-      var textboxOffsetX = Math.ceil((width / 2) + textPadding);
-      var textboxOffsetY = halfTextboxHeight - (icon.height / 2);
-      var annotationOffsetX = stepSize / 2;
-      var annotationOffsetY = halfTextboxHeight;
-      return categoryID ?
-          h$1("g", { transform: "translate(".concat(offsetX, " ").concat(offsetY, ")") },
-              h$1("g", { transform: "translate(".concat(iconOffsetX, " ").concat(iconOffsetY, ")") },
-                  h$1("use", { href: "#" + categoryID })),
-              h$1("g", { transform: "translate(".concat(textboxOffsetX, " ").concat(textboxOffsetY, ")") },
-                  h$1(TextBox, { text: text, height: textHeight, padding: textPadding, strokeWidth: textboxStrokeWidth, stroke: textboxStroke, fill: textboxFill, textFill: textFill, fontFamily: textFontFamily })),
-              h$1(Annotations, { x: annotationOffsetX, y: annotationOffsetY, annotationIDs: annotationIDs, stepSize: stepSize }))
-          :
-              h$1(p$1, null,
-                  h$1("g", { transform: "translate(".concat(iconOffsetX, " ").concat(iconOffsetY, ")scale(1.0002)") },
-                      h$1(Icon, __assign({}, icon, { shape: "square" }))),
-                  h$1("g", { transform: "translate(".concat(textboxOffsetX, " ").concat(textboxOffsetY, ")scale(1.0002)") },
-                      h$1(TextBox, { text: text, height: textHeight, padding: textPadding, stroke: textboxStroke, fill: textboxFill })));
-  };
+    function svgRender(C, props, parent, replaceNode) {
+        P(h$1("svg", null, h$1(C, props)), parent, replaceNode);
+    }
+    var HTMLAdapter = /** @class */ (function (_super) {
+        __extends(HTMLAdapter, _super);
+        function HTMLAdapter(_component) {
+            var _this = _super.call(this) || this;
+            _this._component = _component;
+            _this._props = {};
+            return _this;
+        }
+        HTMLAdapter.prototype.props = function (_) {
+            if (!arguments.length)
+                return this._props;
+            this._props = __assign(__assign({}, this._props), _);
+            return this;
+        };
+        HTMLAdapter.prototype.prop = function (_, value) {
+            if (arguments.length === 1)
+                return this._props[_];
+            this._props[_] = value;
+            return this;
+        };
+        HTMLAdapter.prototype.update = function (domNode, element) {
+            _super.prototype.update.call(this, domNode, element);
+            render(this._component, this._props, domNode);
+        };
+        __decorate([
+            common.publish({}, "object", "Properties"),
+            __metadata("design:type", Object)
+        ], HTMLAdapter.prototype, "_props", void 0);
+        return HTMLAdapter;
+    }(common.HTMLWidget));
+    var SVGAdapter = /** @class */ (function (_super) {
+        __extends(SVGAdapter, _super);
+        function SVGAdapter(_component) {
+            var _this = _super.call(this) || this;
+            _this._component = _component;
+            _this._props = {};
+            return _this;
+        }
+        SVGAdapter.prototype.props = function (_) {
+            if (!arguments.length)
+                return this._props;
+            this._props = __assign(__assign({}, this._props), _);
+            return this;
+        };
+        SVGAdapter.prototype.prop = function (_, value) {
+            if (arguments.length === 1)
+                return this._props[_];
+            this._props[_] = value;
+            return this;
+        };
+        SVGAdapter.prototype.update = function (domNode, element) {
+            _super.prototype.update.call(this, domNode, element);
+            render(this._component, this._props, domNode);
+        };
+        __decorate([
+            common.publish({}, "object", "Properties"),
+            __metadata("design:type", Object)
+        ], SVGAdapter.prototype, "_props", void 0);
+        return SVGAdapter;
+    }(common.SVGWidget));
+
+    var Annotations = function (_a) {
+        var x = _a.x, y = _a.y, _b = _a.annotationIDs, annotationIDs = _b === void 0 ? [] : _b, _c = _a.stepSize, stepSize = _c === void 0 ? -16 : _c;
+        var IconComponents = annotationIDs.map(function (id, i) { return h$1("g", { key: id, transform: "translate(".concat(x + i * stepSize, " ").concat(y, ")") },
+            h$1("use", { href: "#" + id })); });
+        return h$1(p$1, null, IconComponents);
+    };
+    var Vertex = function (_a) {
+        var _b = _a.categoryID, categoryID = _b === void 0 ? "" : _b, _c = _a.text, text = _c === void 0 ? "" : _c, _d = _a.textHeight, textHeight = _d === void 0 ? 12 : _d, _e = _a.textPadding, textPadding = _e === void 0 ? 4 : _e, _f = _a.icon, icon = _f === void 0 ? {} : _f, _g = _a.annotationsHeight, annotationsHeight = _g === void 0 ? 12 : _g, _h = _a.annotationIDs, annotationIDs = _h === void 0 ? [] : _h, textFill = _a.textFill, textboxFill = _a.textboxFill, textboxStroke = _a.textboxStroke, textFontFamily = _a.textFontFamily, onSizeUpdate = _a.onSizeUpdate, _j = _a.showLabel, showLabel = _j === void 0 ? true : _j, _k = _a.scale, scale = _k === void 0 ? 1 : _k;
+        var _l = p(0), textBoxWidth = _l[0], setTextBoxWidthUpdate = _l[1];
+        var _m = p(0), textBoxHeight = _m[0], setTextBoxHeightUpdate = _m[1];
+        h(function () {
+            onSizeUpdate && onSizeUpdate({ width: 0, height: 0 });
+        }, [textBoxWidth, textBoxHeight, onSizeUpdate]);
+        icon = __assign({ imageChar: "fa-question", height: 32, fill: "transparent" }, icon);
+        var width = textBoxWidth;
+        width += 4;
+        var offsetY = -(icon.height * 2 / 6 + textHeight + 8) / 2;
+        var textboxOffsetY = icon.height / 3 + textBoxHeight / 2 + textPadding;
+        var annotationOffsetY = icon.height / 3 + textBoxHeight + textPadding + annotationsHeight / 3;
+        if (!showLabel) {
+            offsetY += (textHeight + 8) / 2;
+            annotationOffsetY -= textBoxHeight + textPadding;
+        }
+        var onTextBoxSizeUpdate = T(function (size) {
+            setTextBoxWidthUpdate(size.width);
+            setTextBoxHeightUpdate(size.height);
+        }, []);
+        var label = showLabel ? h$1("g", { transform: "translate(0 ".concat(textboxOffsetY, ")") },
+            h$1(TextBox, { text: text, height: textHeight, padding: textPadding, onSizeUpdate: onTextBoxSizeUpdate, textFill: textFill, fill: textboxFill, stroke: textboxStroke, fontFamily: textFontFamily })) : undefined;
+        return categoryID ?
+            h$1("g", { transform: "translate(0 ".concat(offsetY, ") scale(").concat(scale, ")") },
+                h$1("use", { href: "#" + categoryID }),
+                label,
+                h$1(Annotations, { x: width / 2, y: annotationOffsetY, annotationIDs: annotationIDs })) :
+            h$1("g", { transform: "translate(0 ".concat(offsetY, ") scale(").concat(scale, ")") },
+                h$1(Icon, __assign({}, icon)),
+                label);
+    };
 
-  var Vertex3 = function (_a) {
-      var _b = _a.text, text = _b === void 0 ? "" : _b, _c = _a.textHeight, textHeight = _c === void 0 ? 10 : _c, _d = _a.textPadding, textPadding = _d === void 0 ? 4 : _d, _e = _a.textFill, textFill = _e === void 0 ? "#287EC4" : _e, _f = _a.textboxFill, textboxFill = _f === void 0 ? "white" : _f, _g = _a.textboxStroke, textboxStroke = _g === void 0 ? "#CCCCCC" : _g, _h = _a.textboxStrokeWidth, textboxStrokeWidth = _h === void 0 ? 1 : _h, _j = _a.textFontFamily, textFontFamily = _j === void 0 ? "Verdana" : _j, _k = _a.annotationGutter, annotationGutter = _k === void 0 ? 2 : _k, _l = _a.annotations, annotations = _l === void 0 ? [] : _l, _m = _a.cornerRadius, cornerRadius = _m === void 0 ? 3 : _m, _o = _a.icon, icon = _o === void 0 ? {} : _o, _p = _a.subText, subText = _p === void 0 ? {} : _p, _q = _a.showLabel, showLabel = _q === void 0 ? true : _q, _r = _a.noLabelRadius, noLabelRadius = _r === void 0 ? 5 : _r, expansionIcon = _a.expansionIcon, _s = _a.scale, scale = _s === void 0 ? 1 : _s;
-      icon = __assign({ height: 50, imageChar: "?", imageFontFamily: "FontAwesome", imageCharFill: "#555555", fill: "transparent", strokeWidth: 0 }, icon);
-      subText = __assign({ text: "", fill: "white", textFill: "#555555" }, subText);
-      expansionIcon = expansionIcon ? __assign({ height: 16, shape: "circle", padding: 6, imageChar: "?", imageFontFamily: "FontAwesome", imageCharFill: "black", fill: "whitesmoke", stroke: "whitesmoke", strokeWidth: 0 }, expansionIcon) : undefined;
-      var fullAnnotationWidth = 0;
-      var annoOffsetY = 0;
-      var labelWidth = F(function () {
-          return common.Utility.textSize(text, textFontFamily, textHeight, false).width;
-      }, [text, textFontFamily, textHeight]);
-      var labelShapeWidth = 0;
-      if (text !== "") {
-          labelShapeWidth = labelWidth + (textPadding * 2) + (textboxStrokeWidth * 2);
-      }
-      fullAnnotationWidth += labelShapeWidth + annotationGutter;
-      var textOffsetX = fullAnnotationWidth - (labelShapeWidth / 2);
-      var textShapeHeight = textHeight + (textPadding * 2) + (textboxStrokeWidth * 2);
-      var annotationArr = [];
-      annotations.forEach(function (anno, idx) {
-          var annoText = anno.imageChar;
-          var annoShapeWidth = textShapeHeight;
-          fullAnnotationWidth += annoShapeWidth + annotationGutter;
-          var annoOffsetX = fullAnnotationWidth - (annoShapeWidth / 2);
-          annotationArr.push(h$1("g", { key: idx, class: "vertex3-anno", "data-click": "annotation", "data-click-data": JSON.stringify(anno), transform: "translate(".concat(annoOffsetX, " ").concat(annoOffsetY, ")") },
-              h$1(Icon, __assign({}, anno, { shape: "square", height: textShapeHeight, imageChar: annoText, imageFontFamily: anno.imageFontFamily, cornerRadius: cornerRadius, strokeWidth: 0 }))));
-      });
-      if (annotations.length > 0) {
-          fullAnnotationWidth += annotationGutter * (annotations.length - 1);
-      }
-      var textElement = h$1("g", { "data-click": "text", transform: "translate(".concat(textOffsetX, " ").concat(annoOffsetY, ")") }, !showLabel || text === "" ? h$1("circle", { r: noLabelRadius, stroke: textboxStroke, fill: textFill }) : h$1(TextBox, { text: text, height: textHeight, padding: textPadding, strokeWidth: textboxStrokeWidth, stroke: textboxStroke, fill: textboxFill, textFill: textFill, fontFamily: textFontFamily, cornerRadius: cornerRadius }));
-      var iconHeight = icon.height || 20;
-      var iconStrokeWidth = icon.strokeWidth || 0;
-      var iconOffsetX = 0;
-      var iconOffsetY = 0;
-      var subTextOffsetX = 0;
-      var subTextOffsetY = textShapeHeight + (annotationGutter * 2);
-      if (text !== "" || annotationArr.length > 0) {
-          iconOffsetY = -(iconHeight / 2) - (iconStrokeWidth) - (textShapeHeight / 2) - (annotationGutter * 2);
-      }
-      else if (subText.text !== "") {
-          subTextOffsetY = (iconHeight / 2) + iconStrokeWidth + (annotationGutter * 2);
-      }
-      var subtextElement = subText.text === "" ? null : h$1("g", { "data-click": "subtext", transform: "translate(".concat(subTextOffsetX, " ").concat(subTextOffsetY, ")") },
-          h$1(TextBox, __assign({ fill: subText.fill || "#FFFFFF", textFill: subText.textFill || textFill }, subText, { height: textHeight, padding: textPadding, strokeWidth: 0, stroke: textboxStroke, fontFamily: textFontFamily, cornerRadius: cornerRadius })));
-      return h$1("g", { transform: "scale(".concat(scale, ")") },
-          h$1("g", { "data-click": "icon", transform: "translate(".concat(iconOffsetX, " ").concat(iconOffsetY, ")") },
-              h$1(Icon, __assign({}, icon)),
-              expansionIcon &&
-                  h$1("g", { "data-click": "expanded-icon", "data-click-data": JSON.stringify(expansionIcon), transform: "translate(".concat((icon.height + iconStrokeWidth) / 2 - expansionIcon.height / 2, " ").concat(-(icon.height + iconStrokeWidth) / 2 + expansionIcon.height / 2, ")") },
-                      h$1(Icon, __assign({}, expansionIcon)))),
-          h$1("g", { transform: "translate(".concat(-fullAnnotationWidth / 2, " ").concat(annoOffsetY, ")") },
-              textElement,
-              annotationArr),
-          subtextElement);
-  };
-  var CentroidVertex3 = function (_a) {
-      var id = _a.id, _b = _a.categoryID, categoryID = _b === void 0 ? "" : _b, _c = _a.text, text = _c === void 0 ? "" : _c, _d = _a.textHeight, textHeight = _d === void 0 ? 12 : _d, _e = _a.textPadding, textPadding = _e === void 0 ? 10 : _e, _f = _a.textFill, textFill = _f === void 0 ? "#287EC4" : _f, _g = _a.textboxFill, textboxFill = _g === void 0 ? "white" : _g, _h = _a.textboxStroke, textboxStroke = _h === void 0 ? "#CCCCCC" : _h, _j = _a.textboxStrokeWidth, textboxStrokeWidth = _j === void 0 ? 1 : _j, _k = _a.textFontFamily, textFontFamily = _k === void 0 ? "Verdana" : _k, _l = _a.annotationGutter, annotationGutter = _l === void 0 ? 2 : _l, _m = _a.annotations, annotations = _m === void 0 ? [] : _m, cornerRadius = _a.cornerRadius, _o = _a.icon, icon = _o === void 0 ? {} : _o, _p = _a.subText, subText = _p === void 0 ? {} : _p, expansionIcon = _a.expansionIcon, _q = _a.scale, scale = _q === void 0 ? 1 : _q;
-      icon = __assign({ height: 91, padding: 40, imageCharFill: "#555555", imageFontFamily: "FontAwesome", fill: "#FFCC33", stroke: "#DFDFDF", imageChar: "?", strokeWidth: 4, yOffset: -15 }, icon);
-      subText = __assign({ text: "", fill: "transparent", textFill: "#555555" }, subText);
-      var props = {
-          id: id,
-          categoryID: categoryID,
-          text: text,
-          textHeight: textHeight,
-          textPadding: textPadding,
-          textFill: textFill,
-          textboxFill: textboxFill,
-          textboxStroke: textboxStroke,
-          textboxStrokeWidth: textboxStrokeWidth,
-          textFontFamily: textFontFamily,
-          annotationGutter: annotationGutter,
-          annotations: annotations,
-          cornerRadius: cornerRadius,
-          icon: icon,
-          subText: subText,
-          expansionIcon: expansionIcon,
-          scale: scale
-      };
-      return h$1(Vertex3, __assign({}, props, { icon: icon, subText: subText }));
-  };
+    var Vertex2 = function (_a) {
+        var _b = _a.categoryID, categoryID = _b === void 0 ? "" : _b, _c = _a.text, text = _c === void 0 ? "" : _c, _d = _a.textHeight, textHeight = _d === void 0 ? 12 : _d, _e = _a.textPadding, textPadding = _e === void 0 ? 4 : _e, _f = _a.icon, icon = _f === void 0 ? {} : _f, _g = _a.textFill, textFill = _g === void 0 ? "black" : _g, _h = _a.textboxFill, textboxFill = _h === void 0 ? "white" : _h, _j = _a.textboxStroke, textboxStroke = _j === void 0 ? "black" : _j, textFontFamily = _a.textFontFamily, _k = _a.annotationsHeight, annotationsHeight = _k === void 0 ? 12 : _k, _l = _a.annotationIDs, annotationIDs = _l === void 0 ? [] : _l;
+        icon = __assign({ imageChar: "fa-question", imageCharFill: "white", height: 32, fill: "black", shape: "square" }, icon);
+        var textBoxHeight = textHeight + textPadding * 2;
+        var width = F(function () {
+            return common.Utility.textSize(text, textFontFamily, textHeight, false);
+        }, [text, textFontFamily, textHeight]).width;
+        var stepSize = annotationsHeight;
+        var textboxStrokeWidth = 1;
+        var halfTextboxHeight = textBoxHeight / 2;
+        var offsetX = 0;
+        var offsetY = -(icon.height * 2 / 6 + textHeight + 8) / 2;
+        var iconOffsetX = -icon.height / 2;
+        var iconOffsetY = 0;
+        var textboxOffsetX = Math.ceil((width / 2) + textPadding);
+        var textboxOffsetY = halfTextboxHeight - (icon.height / 2);
+        var annotationOffsetX = stepSize / 2;
+        var annotationOffsetY = halfTextboxHeight;
+        return categoryID ?
+            h$1("g", { transform: "translate(".concat(offsetX, " ").concat(offsetY, ")") },
+                h$1("g", { transform: "translate(".concat(iconOffsetX, " ").concat(iconOffsetY, ")") },
+                    h$1("use", { href: "#" + categoryID })),
+                h$1("g", { transform: "translate(".concat(textboxOffsetX, " ").concat(textboxOffsetY, ")") },
+                    h$1(TextBox, { text: text, height: textHeight, padding: textPadding, strokeWidth: textboxStrokeWidth, stroke: textboxStroke, fill: textboxFill, textFill: textFill, fontFamily: textFontFamily })),
+                h$1(Annotations, { x: annotationOffsetX, y: annotationOffsetY, annotationIDs: annotationIDs, stepSize: stepSize }))
+            :
+                h$1(p$1, null,
+                    h$1("g", { transform: "translate(".concat(iconOffsetX, " ").concat(iconOffsetY, ")scale(1.0002)") },
+                        h$1(Icon, __assign({}, icon, { shape: "square" }))),
+                    h$1("g", { transform: "translate(".concat(textboxOffsetX, " ").concat(textboxOffsetY, ")scale(1.0002)") },
+                        h$1(TextBox, { text: text, height: textHeight, padding: textPadding, stroke: textboxStroke, fill: textboxFill })));
+    };
 
-  var Vertex4 = function (_a) {
-      _a.categoryID; var _c = _a.text, text = _c === void 0 ? "" : _c, _d = _a.textHeight, textHeight = _d === void 0 ? 10 : _d, _e = _a.textPadding, textPadding = _e === void 0 ? 4 : _e, _f = _a.textFill, textFill = _f === void 0 ? "#287EC4" : _f, _g = _a.textboxFill, textboxFill = _g === void 0 ? "white" : _g, _h = _a.textboxStroke, textboxStroke = _h === void 0 ? "#CCCCCC" : _h, _j = _a.textboxStrokeWidth, textboxStrokeWidth = _j === void 0 ? 1 : _j, _k = _a.textFontFamily, textFontFamily = _k === void 0 ? "Verdana" : _k, _l = _a.annotationGutter, annotationGutter = _l === void 0 ? 2 : _l, _m = _a.annotations, annotations = _m === void 0 ? [] : _m, _o = _a.iconAnnotations, iconAnnotations = _o === void 0 ? [] : _o, _p = _a.cornerRadius, cornerRadius = _p === void 0 ? 3 : _p, _q = _a.icon, icon = _q === void 0 ? {} : _q, _r = _a.subText, subText = _r === void 0 ? {} : _r, _s = _a.showLabel, showLabel = _s === void 0 ? true : _s, _t = _a.noLabelRadius, noLabelRadius = _t === void 0 ? 5 : _t, _u = _a.iconBorderWidth, iconBorderWidth = _u === void 0 ? 1 : _u, _v = _a.iconBorderColor, iconBorderColor = _v === void 0 ? "#333" : _v, _w = _a.iconBackgroundColor, iconBackgroundColor = _w === void 0 ? "#fff" : _w, _x = _a.iconFontColor, iconFontColor = _x === void 0 ? "#000" : _x, _y = _a.iconFontSize, iconFontSize = _y === void 0 ? 20 : _y, _z = _a.iconFontFamily, iconFontFamily = _z === void 0 ? "FontAwesome" : _z, _0 = _a.shapeOffsetX, shapeOffsetX = _0 === void 0 ? 0 : _0, _1 = _a.shapeOffsetY, shapeOffsetY = _1 === void 0 ? 0 : _1, _2 = _a.iconOffsetX, iconOffsetX = _2 === void 0 ? 0 : _2, _3 = _a.iconOffsetY, iconOffsetY = _3 === void 0 ? 0 : _3, _4 = _a.iconPadding, iconPadding = _4 === void 0 ? 4 : _4, _5 = _a.iconText, iconText = _5 === void 0 ? "?" : _5, _6 = _a.shapeRendering, shapeRendering = _6 === void 0 ? "auto" : _6;
-      icon = __assign({ height: 50, imageChar: "?", imageFontFamily: "FontAwesome", imageCharFill: "#555555", fill: "transparent", strokeWidth: 0 }, icon);
-      subText = __assign({ text: "", fill: "white", textFill: "#555555" }, subText);
-      var annoOffsetY = 0;
-      var labelWidth = F(function () {
-          return common.Utility.textSize(text, textFontFamily, textHeight, false).width;
-      }, [text, textFontFamily, textHeight]);
-      var labelShapeWidth = 0;
-      if (text !== "") {
-          labelShapeWidth = labelWidth + (textPadding * 2) + (textboxStrokeWidth * 2);
-      }
-      var fullAnnotationWidth = labelShapeWidth + annotationGutter;
-      var textOffsetX = fullAnnotationWidth - (labelShapeWidth / 2);
-      var textShapeHeight = textHeight + (annotationGutter * 2) + (textboxStrokeWidth * 2);
-      var annoWidthArr = annotations.map(function (anno, i) {
-          return common.Utility.textSize(anno.imageChar, anno.imageFontFamily, anno.height, false).width;
-      });
-      var annotationArr = [];
-      var _labelAnnoOffsetX = fullAnnotationWidth;
-      annotations.forEach(function (anno, i) {
-          var _a;
-          var annoText = anno.imageChar;
-          var annoTextHeight = (_a = anno.height) !== null && _a !== void 0 ? _a : textShapeHeight;
-          _labelAnnoOffsetX += annoWidthArr[i] + annotationGutter;
-          var annoOffsetX = _labelAnnoOffsetX - (annoWidthArr[i] / 2);
-          annotationArr.push(h$1("g", { key: i, class: "vertex3-anno", "data-click": "annotation", "data-click-data": JSON.stringify(anno), transform: "translate(".concat(annoOffsetX, " ").concat(annoOffsetY, ")") },
-              h$1(Icon, __assign({}, anno, { shape: "rectangle", width: annoWidthArr[i], height: annoTextHeight, imageChar: annoText, imageFontFamily: anno.imageFontFamily, cornerRadius: cornerRadius, strokeWidth: 0 }))));
-      });
-      if (annotations.length > 0) {
-          fullAnnotationWidth += annotationGutter * (annotations.length - 1);
-      }
-      var iconAnnotationArr = [];
-      iconAnnotations.forEach(function (anno, i) {
-          var _a;
-          var x = anno.shapeOffsetX;
-          var y = anno.shapeOffsetY;
-          iconAnnotationArr.push(h$1("g", { key: i, class: "vertex3-iconAnno", "data-click": "icon-annotation", "data-click-data": JSON.stringify(anno), transform: "translate(".concat(x, " ").concat(y, ")") },
-              h$1(Icon, __assign({}, anno, { shape: (_a = anno.shape) !== null && _a !== void 0 ? _a : "square", imageChar: anno.imageChar, imageFontFamily: anno.imageFontFamily, cornerRadius: cornerRadius, stroke: anno.stroke, strokeWidth: anno.strokeWidth }))));
-      });
-      var textElement = h$1("g", { "data-click": "text", transform: "translate(".concat(textOffsetX, " ").concat(annoOffsetY, ")") }, !showLabel || text === "" ? h$1("circle", { r: noLabelRadius, stroke: textboxStroke, fill: textFill }) : h$1(TextBox, { text: text, height: textHeight, padding: textPadding, strokeWidth: textboxStrokeWidth, stroke: textboxStroke, fill: textboxFill, textFill: textFill, fontFamily: textFontFamily, cornerRadius: cornerRadius }));
-      var subTextOffsetX = 0;
-      var subTextOffsetY = textShapeHeight + (annotationGutter * 2);
-      var subtextElement = subText.text === "" ? null : h$1("g", { "data-click": "subtext", transform: "translate(".concat(subTextOffsetX, " ").concat(subTextOffsetY, ")") },
-          h$1(TextBox, __assign({ fill: subText.fill || "#FFFFFF", textFill: subText.textFill || textFill }, subText, { height: textHeight, padding: textPadding, strokeWidth: 0, stroke: textboxStroke, fontFamily: textFontFamily, cornerRadius: cornerRadius })));
-      return h$1("g", null,
-          h$1("g", { "data-click": "icon", transform: "translate(".concat(shapeOffsetX, " ").concat(shapeOffsetY, ")") },
-              h$1(Icon, __assign({}, icon, { strokeWidth: iconBorderWidth, shape: "circle", height: iconFontSize, fill: iconBackgroundColor, stroke: iconBorderColor, imageFontFamily: iconFontFamily, imageChar: iconText, imageCharFill: iconFontColor, padding: iconPadding, xOffset: iconOffsetX, yOffset: iconOffsetY, cornerRadius: cornerRadius, shapeRendering: shapeRendering })),
-              iconAnnotationArr),
-          h$1("g", { transform: "translate(".concat(-fullAnnotationWidth / 2, " ").concat(annoOffsetY, ")") },
-              textElement,
-              annotationArr),
-          subtextElement);
-  };
-  var CentroidVertex4 = function (_a) {
-      var id = _a.id, _b = _a.categoryID, categoryID = _b === void 0 ? "" : _b, _c = _a.text, text = _c === void 0 ? "" : _c, _d = _a.textHeight, textHeight = _d === void 0 ? 12 : _d, _e = _a.textPadding, textPadding = _e === void 0 ? 10 : _e, _f = _a.textFill, textFill = _f === void 0 ? "#287EC4" : _f, _g = _a.textboxFill, textboxFill = _g === void 0 ? "white" : _g, _h = _a.textboxStroke, textboxStroke = _h === void 0 ? "#CCCCCC" : _h, _j = _a.textboxStrokeWidth, textboxStrokeWidth = _j === void 0 ? 1 : _j, _k = _a.textFontFamily, textFontFamily = _k === void 0 ? "Verdana" : _k, _l = _a.annotationGutter, annotationGutter = _l === void 0 ? 2 : _l, _m = _a.annotations, annotations = _m === void 0 ? [] : _m, _o = _a.iconAnnotations, iconAnnotations = _o === void 0 ? [] : _o, cornerRadius = _a.cornerRadius, _p = _a.icon, icon = _p === void 0 ? {} : _p, _q = _a.subText, subText = _q === void 0 ? {} : _q, _r = _a.showLabel, showLabel = _r === void 0 ? true : _r, _s = _a.noLabelRadius, noLabelRadius = _s === void 0 ? 5 : _s, _t = _a.iconBorderWidth, iconBorderWidth = _t === void 0 ? 1 : _t, _u = _a.iconBorderColor, iconBorderColor = _u === void 0 ? "#333" : _u, _v = _a.iconBackgroundColor, iconBackgroundColor = _v === void 0 ? "#fff" : _v, _w = _a.iconFontColor, iconFontColor = _w === void 0 ? "#000" : _w, _x = _a.iconFontSize, iconFontSize = _x === void 0 ? 20 : _x, _y = _a.iconFontFamily, iconFontFamily = _y === void 0 ? "FontAwesome" : _y, _z = _a.shapeOffsetX, shapeOffsetX = _z === void 0 ? 0 : _z, _0 = _a.shapeOffsetY, shapeOffsetY = _0 === void 0 ? 0 : _0, _1 = _a.iconOffsetX, iconOffsetX = _1 === void 0 ? 0 : _1, _2 = _a.iconOffsetY, iconOffsetY = _2 === void 0 ? 0 : _2, _3 = _a.iconPadding, iconPadding = _3 === void 0 ? 4 : _3, _4 = _a.iconText, iconText = _4 === void 0 ? "?" : _4, _5 = _a.shapeRendering, shapeRendering = _5 === void 0 ? "auto" : _5;
-      icon = __assign({ height: 91, padding: 40, imageCharFill: "#555555", imageFontFamily: "FontAwesome", fill: "#FFCC33", stroke: "#DFDFDF", imageChar: "?", strokeWidth: 4, yOffset: -15 }, icon);
-      subText = __assign({ text: "", fill: "transparent", textFill: "#555555" }, subText);
-      var props = {
-          id: id,
-          categoryID: categoryID,
-          text: text,
-          textHeight: textHeight,
-          textPadding: textPadding,
-          textFill: textFill,
-          textboxFill: textboxFill,
-          textboxStroke: textboxStroke,
-          textboxStrokeWidth: textboxStrokeWidth,
-          textFontFamily: textFontFamily,
-          annotationGutter: annotationGutter,
-          annotations: annotations,
-          iconAnnotations: iconAnnotations,
-          cornerRadius: cornerRadius,
-          icon: icon,
-          subText: subText,
-          showLabel: showLabel,
-          noLabelRadius: noLabelRadius,
-          iconBorderWidth: iconBorderWidth,
-          iconBorderColor: iconBorderColor,
-          iconBackgroundColor: iconBackgroundColor,
-          iconFontColor: iconFontColor,
-          iconFontSize: iconFontSize,
-          iconFontFamily: iconFontFamily,
-          shapeOffsetX: shapeOffsetX,
-          shapeOffsetY: shapeOffsetY,
-          iconOffsetX: iconOffsetX,
-          iconOffsetY: iconOffsetY,
-          iconPadding: iconPadding,
-          iconText: iconText,
-          shapeRendering: shapeRendering
-      };
-      return h$1(Vertex4, __assign({}, props, { icon: icon, subText: subText }));
-  };
+    var Vertex3 = function (_a) {
+        var _b = _a.text, text = _b === void 0 ? "" : _b, _c = _a.textHeight, textHeight = _c === void 0 ? 10 : _c, _d = _a.textPadding, textPadding = _d === void 0 ? 4 : _d, _e = _a.textFill, textFill = _e === void 0 ? "#287EC4" : _e, _f = _a.textboxFill, textboxFill = _f === void 0 ? "white" : _f, _g = _a.textboxStroke, textboxStroke = _g === void 0 ? "#CCCCCC" : _g, _h = _a.textboxStrokeWidth, textboxStrokeWidth = _h === void 0 ? 1 : _h, _j = _a.textFontFamily, textFontFamily = _j === void 0 ? "Verdana" : _j, _k = _a.annotationGutter, annotationGutter = _k === void 0 ? 2 : _k, _l = _a.annotations, annotations = _l === void 0 ? [] : _l, _m = _a.cornerRadius, cornerRadius = _m === void 0 ? 3 : _m, _o = _a.icon, icon = _o === void 0 ? {} : _o, _p = _a.subText, subText = _p === void 0 ? {} : _p, _q = _a.showLabel, showLabel = _q === void 0 ? true : _q, _r = _a.noLabelRadius, noLabelRadius = _r === void 0 ? 5 : _r, expansionIcon = _a.expansionIcon, _s = _a.scale, scale = _s === void 0 ? 1 : _s;
+        icon = __assign({ height: 50, imageChar: "?", imageFontFamily: "FontAwesome", imageCharFill: "#555555", fill: "transparent", strokeWidth: 0 }, icon);
+        subText = __assign({ text: "", fill: "white", textFill: "#555555" }, subText);
+        expansionIcon = expansionIcon ? __assign({ height: 16, shape: "circle", padding: 6, imageChar: "?", imageFontFamily: "FontAwesome", imageCharFill: "black", fill: "whitesmoke", stroke: "whitesmoke", strokeWidth: 0 }, expansionIcon) : undefined;
+        var fullAnnotationWidth = 0;
+        var annoOffsetY = 0;
+        var labelWidth = F(function () {
+            return common.Utility.textSize(text, textFontFamily, textHeight, false).width;
+        }, [text, textFontFamily, textHeight]);
+        var labelShapeWidth = 0;
+        if (text !== "") {
+            labelShapeWidth = labelWidth + (textPadding * 2) + (textboxStrokeWidth * 2);
+        }
+        fullAnnotationWidth += labelShapeWidth + annotationGutter;
+        var textOffsetX = fullAnnotationWidth - (labelShapeWidth / 2);
+        var textShapeHeight = textHeight + (textPadding * 2) + (textboxStrokeWidth * 2);
+        var annotationArr = [];
+        annotations.forEach(function (anno, idx) {
+            var annoText = anno.imageChar;
+            var annoShapeWidth = textShapeHeight;
+            fullAnnotationWidth += annoShapeWidth + annotationGutter;
+            var annoOffsetX = fullAnnotationWidth - (annoShapeWidth / 2);
+            annotationArr.push(h$1("g", { key: idx, class: "vertex3-anno", "data-click": "annotation", "data-click-data": JSON.stringify(anno), transform: "translate(".concat(annoOffsetX, " ").concat(annoOffsetY, ")") },
+                h$1(Icon, __assign({}, anno, { shape: "square", height: textShapeHeight, imageChar: annoText, imageFontFamily: anno.imageFontFamily, cornerRadius: cornerRadius, strokeWidth: 0 }))));
+        });
+        if (annotations.length > 0) {
+            fullAnnotationWidth += annotationGutter * (annotations.length - 1);
+        }
+        var textElement = h$1("g", { "data-click": "text", transform: "translate(".concat(textOffsetX, " ").concat(annoOffsetY, ")") }, !showLabel || text === "" ? h$1("circle", { r: noLabelRadius, stroke: textboxStroke, fill: textFill }) : h$1(TextBox, { text: text, height: textHeight, padding: textPadding, strokeWidth: textboxStrokeWidth, stroke: textboxStroke, fill: textboxFill, textFill: textFill, fontFamily: textFontFamily, cornerRadius: cornerRadius }));
+        var iconHeight = icon.height || 20;
+        var iconStrokeWidth = icon.strokeWidth || 0;
+        var iconOffsetX = 0;
+        var iconOffsetY = 0;
+        var subTextOffsetX = 0;
+        var subTextOffsetY = textShapeHeight + (annotationGutter * 2);
+        if (text !== "" || annotationArr.length > 0) {
+            iconOffsetY = -(iconHeight / 2) - (iconStrokeWidth) - (textShapeHeight / 2) - (annotationGutter * 2);
+        }
+        else if (subText.text !== "") {
+            subTextOffsetY = (iconHeight / 2) + iconStrokeWidth + (annotationGutter * 2);
+        }
+        var subtextElement = subText.text === "" ? null : h$1("g", { "data-click": "subtext", transform: "translate(".concat(subTextOffsetX, " ").concat(subTextOffsetY, ")") },
+            h$1(TextBox, __assign({ fill: subText.fill || "#FFFFFF", textFill: subText.textFill || textFill }, subText, { height: textHeight, padding: textPadding, strokeWidth: 0, stroke: textboxStroke, fontFamily: textFontFamily, cornerRadius: cornerRadius })));
+        return h$1("g", { transform: "scale(".concat(scale, ")") },
+            h$1("g", { "data-click": "icon", transform: "translate(".concat(iconOffsetX, " ").concat(iconOffsetY, ")") },
+                h$1(Icon, __assign({}, icon)),
+                expansionIcon &&
+                    h$1("g", { "data-click": "expanded-icon", "data-click-data": JSON.stringify(expansionIcon), transform: "translate(".concat((icon.height + iconStrokeWidth) / 2 - expansionIcon.height / 2, " ").concat(-(icon.height + iconStrokeWidth) / 2 + expansionIcon.height / 2, ")") },
+                        h$1(Icon, __assign({}, expansionIcon)))),
+            h$1("g", { transform: "translate(".concat(-fullAnnotationWidth / 2, " ").concat(annoOffsetY, ")") },
+                textElement,
+                annotationArr),
+            subtextElement);
+    };
+    var CentroidVertex3 = function (_a) {
+        var id = _a.id, _b = _a.categoryID, categoryID = _b === void 0 ? "" : _b, _c = _a.text, text = _c === void 0 ? "" : _c, _d = _a.textHeight, textHeight = _d === void 0 ? 12 : _d, _e = _a.textPadding, textPadding = _e === void 0 ? 10 : _e, _f = _a.textFill, textFill = _f === void 0 ? "#287EC4" : _f, _g = _a.textboxFill, textboxFill = _g === void 0 ? "white" : _g, _h = _a.textboxStroke, textboxStroke = _h === void 0 ? "#CCCCCC" : _h, _j = _a.textboxStrokeWidth, textboxStrokeWidth = _j === void 0 ? 1 : _j, _k = _a.textFontFamily, textFontFamily = _k === void 0 ? "Verdana" : _k, _l = _a.annotationGutter, annotationGutter = _l === void 0 ? 2 : _l, _m = _a.annotations, annotations = _m === void 0 ? [] : _m, cornerRadius = _a.cornerRadius, _o = _a.icon, icon = _o === void 0 ? {} : _o, _p = _a.subText, subText = _p === void 0 ? {} : _p, expansionIcon = _a.expansionIcon, _q = _a.scale, scale = _q === void 0 ? 1 : _q;
+        icon = __assign({ height: 91, padding: 40, imageCharFill: "#555555", imageFontFamily: "FontAwesome", fill: "#FFCC33", stroke: "#DFDFDF", imageChar: "?", strokeWidth: 4, yOffset: -15 }, icon);
+        subText = __assign({ text: "", fill: "transparent", textFill: "#555555" }, subText);
+        var props = {
+            id: id,
+            categoryID: categoryID,
+            text: text,
+            textHeight: textHeight,
+            textPadding: textPadding,
+            textFill: textFill,
+            textboxFill: textboxFill,
+            textboxStroke: textboxStroke,
+            textboxStrokeWidth: textboxStrokeWidth,
+            textFontFamily: textFontFamily,
+            annotationGutter: annotationGutter,
+            annotations: annotations,
+            cornerRadius: cornerRadius,
+            icon: icon,
+            subText: subText,
+            expansionIcon: expansionIcon,
+            scale: scale
+        };
+        return h$1(Vertex3, __assign({}, props, { icon: icon, subText: subText }));
+    };
 
-  var Subgraph = function (_a) {
-      var text = _a.text, _b = _a.width, width = _b === void 0 ? 100 : _b, _c = _a.height, height = _c === void 0 ? 100 : _c, _d = _a.fill, fill = _d === void 0 ? "transparent" : _d, _e = _a.stroke, stroke = _e === void 0 ? "black" : _e, _f = _a.fontHeight, fontHeight = _f === void 0 ? 12 : _f, fontFamily = _a.fontFamily;
-      var tSize = common.Utility.textSize(text, fontFamily, fontHeight, false);
-      return h$1(p$1, null,
-          h$1(Rectangle, { width: width, height: height, fill: fill, stroke: stroke }),
-          h$1("g", { transform: "translate(".concat((-width + tSize.width) / 2 + 4, " ").concat((-height + tSize.height) / 2 + 4, ")") },
-              h$1(Text, { height: fontHeight, text: text, fontFamily: fontFamily })));
-  };
+    var Vertex4 = function (_a) {
+        _a.categoryID; var _c = _a.text, text = _c === void 0 ? "" : _c, _d = _a.textHeight, textHeight = _d === void 0 ? 10 : _d, _e = _a.textPadding, textPadding = _e === void 0 ? 4 : _e, _f = _a.textFill, textFill = _f === void 0 ? "#287EC4" : _f, _g = _a.textboxFill, textboxFill = _g === void 0 ? "white" : _g, _h = _a.textboxStroke, textboxStroke = _h === void 0 ? "#CCCCCC" : _h, _j = _a.textboxStrokeWidth, textboxStrokeWidth = _j === void 0 ? 1 : _j, _k = _a.textFontFamily, textFontFamily = _k === void 0 ? "Verdana" : _k, _l = _a.annotationGutter, annotationGutter = _l === void 0 ? 2 : _l, _m = _a.annotations, annotations = _m === void 0 ? [] : _m, _o = _a.iconAnnotations, iconAnnotations = _o === void 0 ? [] : _o, _p = _a.cornerRadius, cornerRadius = _p === void 0 ? 3 : _p, _q = _a.icon, icon = _q === void 0 ? {} : _q, _r = _a.subText, subText = _r === void 0 ? {} : _r, _s = _a.showLabel, showLabel = _s === void 0 ? true : _s, _t = _a.noLabelRadius, noLabelRadius = _t === void 0 ? 5 : _t, _u = _a.iconBorderWidth, iconBorderWidth = _u === void 0 ? 1 : _u, _v = _a.iconBorderColor, iconBorderColor = _v === void 0 ? "#333" : _v, _w = _a.iconBackgroundColor, iconBackgroundColor = _w === void 0 ? "#fff" : _w, _x = _a.iconFontColor, iconFontColor = _x === void 0 ? "#000" : _x, _y = _a.iconFontSize, iconFontSize = _y === void 0 ? 20 : _y, _z = _a.iconFontFamily, iconFontFamily = _z === void 0 ? "FontAwesome" : _z, _0 = _a.shapeOffsetX, shapeOffsetX = _0 === void 0 ? 0 : _0, _1 = _a.shapeOffsetY, shapeOffsetY = _1 === void 0 ? 0 : _1, _2 = _a.iconOffsetX, iconOffsetX = _2 === void 0 ? 0 : _2, _3 = _a.iconOffsetY, iconOffsetY = _3 === void 0 ? 0 : _3, _4 = _a.iconPadding, iconPadding = _4 === void 0 ? 4 : _4, _5 = _a.iconText, iconText = _5 === void 0 ? "?" : _5, _6 = _a.shapeRendering, shapeRendering = _6 === void 0 ? "auto" : _6;
+        icon = __assign({ height: 50, imageChar: "?", imageFontFamily: "FontAwesome", imageCharFill: "#555555", fill: "transparent", strokeWidth: 0 }, icon);
+        subText = __assign({ text: "", fill: "white", textFill: "#555555" }, subText);
+        var annoOffsetY = 0;
+        var labelWidth = F(function () {
+            return common.Utility.textSize(text, textFontFamily, textHeight, false).width;
+        }, [text, textFontFamily, textHeight]);
+        var labelShapeWidth = 0;
+        if (text !== "") {
+            labelShapeWidth = labelWidth + (textPadding * 2) + (textboxStrokeWidth * 2);
+        }
+        var fullAnnotationWidth = labelShapeWidth + annotationGutter;
+        var textOffsetX = fullAnnotationWidth - (labelShapeWidth / 2);
+        var textShapeHeight = textHeight + (annotationGutter * 2) + (textboxStrokeWidth * 2);
+        var annoWidthArr = annotations.map(function (anno, i) {
+            return common.Utility.textSize(anno.imageChar, anno.imageFontFamily, anno.height, false).width;
+        });
+        var annotationArr = [];
+        var _labelAnnoOffsetX = fullAnnotationWidth;
+        annotations.forEach(function (anno, i) {
+            var _a;
+            var annoText = anno.imageChar;
+            var annoTextHeight = (_a = anno.height) !== null && _a !== void 0 ? _a : textShapeHeight;
+            _labelAnnoOffsetX += annoWidthArr[i] + annotationGutter;
+            var annoOffsetX = _labelAnnoOffsetX - (annoWidthArr[i] / 2);
+            annotationArr.push(h$1("g", { key: i, class: "vertex3-anno", "data-click": "annotation", "data-click-data": JSON.stringify(anno), transform: "translate(".concat(annoOffsetX, " ").concat(annoOffsetY, ")") },
+                h$1(Icon, __assign({}, anno, { shape: "rectangle", width: annoWidthArr[i], height: annoTextHeight, imageChar: annoText, imageFontFamily: anno.imageFontFamily, cornerRadius: cornerRadius, strokeWidth: 0 }))));
+        });
+        if (annotations.length > 0) {
+            fullAnnotationWidth += annotationGutter * (annotations.length - 1);
+        }
+        var iconAnnotationArr = [];
+        iconAnnotations.forEach(function (anno, i) {
+            var _a;
+            var x = anno.shapeOffsetX;
+            var y = anno.shapeOffsetY;
+            iconAnnotationArr.push(h$1("g", { key: i, class: "vertex3-iconAnno", "data-click": "icon-annotation", "data-click-data": JSON.stringify(anno), transform: "translate(".concat(x, " ").concat(y, ")") },
+                h$1(Icon, __assign({}, anno, { shape: (_a = anno.shape) !== null && _a !== void 0 ? _a : "square", imageChar: anno.imageChar, imageFontFamily: anno.imageFontFamily, cornerRadius: cornerRadius, stroke: anno.stroke, strokeWidth: anno.strokeWidth }))));
+        });
+        var textElement = h$1("g", { "data-click": "text", transform: "translate(".concat(textOffsetX, " ").concat(annoOffsetY, ")") }, !showLabel || text === "" ? h$1("circle", { r: noLabelRadius, stroke: textboxStroke, fill: textFill }) : h$1(TextBox, { text: text, height: textHeight, padding: textPadding, strokeWidth: textboxStrokeWidth, stroke: textboxStroke, fill: textboxFill, textFill: textFill, fontFamily: textFontFamily, cornerRadius: cornerRadius }));
+        var subTextOffsetX = 0;
+        var subTextOffsetY = textShapeHeight + (annotationGutter * 2);
+        var subtextElement = subText.text === "" ? null : h$1("g", { "data-click": "subtext", transform: "translate(".concat(subTextOffsetX, " ").concat(subTextOffsetY, ")") },
+            h$1(TextBox, __assign({ fill: subText.fill || "#FFFFFF", textFill: subText.textFill || textFill }, subText, { height: textHeight, padding: textPadding, strokeWidth: 0, stroke: textboxStroke, fontFamily: textFontFamily, cornerRadius: cornerRadius })));
+        return h$1("g", null,
+            h$1("g", { "data-click": "icon", transform: "translate(".concat(shapeOffsetX, " ").concat(shapeOffsetY, ")") },
+                h$1(Icon, __assign({}, icon, { strokeWidth: iconBorderWidth, shape: "circle", height: iconFontSize, fill: iconBackgroundColor, stroke: iconBorderColor, imageFontFamily: iconFontFamily, imageChar: iconText, imageCharFill: iconFontColor, padding: iconPadding, xOffset: iconOffsetX, yOffset: iconOffsetY, cornerRadius: cornerRadius, shapeRendering: shapeRendering })),
+                iconAnnotationArr),
+            h$1("g", { transform: "translate(".concat(-fullAnnotationWidth / 2, " ").concat(annoOffsetY, ")") },
+                textElement,
+                annotationArr),
+            subtextElement);
+    };
+    var CentroidVertex4 = function (_a) {
+        var id = _a.id, _b = _a.categoryID, categoryID = _b === void 0 ? "" : _b, _c = _a.text, text = _c === void 0 ? "" : _c, _d = _a.textHeight, textHeight = _d === void 0 ? 12 : _d, _e = _a.textPadding, textPadding = _e === void 0 ? 10 : _e, _f = _a.textFill, textFill = _f === void 0 ? "#287EC4" : _f, _g = _a.textboxFill, textboxFill = _g === void 0 ? "white" : _g, _h = _a.textboxStroke, textboxStroke = _h === void 0 ? "#CCCCCC" : _h, _j = _a.textboxStrokeWidth, textboxStrokeWidth = _j === void 0 ? 1 : _j, _k = _a.textFontFamily, textFontFamily = _k === void 0 ? "Verdana" : _k, _l = _a.annotationGutter, annotationGutter = _l === void 0 ? 2 : _l, _m = _a.annotations, annotations = _m === void 0 ? [] : _m, _o = _a.iconAnnotations, iconAnnotations = _o === void 0 ? [] : _o, cornerRadius = _a.cornerRadius, _p = _a.icon, icon = _p === void 0 ? {} : _p, _q = _a.subText, subText = _q === void 0 ? {} : _q, _r = _a.showLabel, showLabel = _r === void 0 ? true : _r, _s = _a.noLabelRadius, noLabelRadius = _s === void 0 ? 5 : _s, _t = _a.iconBorderWidth, iconBorderWidth = _t === void 0 ? 1 : _t, _u = _a.iconBorderColor, iconBorderColor = _u === void 0 ? "#333" : _u, _v = _a.iconBackgroundColor, iconBackgroundColor = _v === void 0 ? "#fff" : _v, _w = _a.iconFontColor, iconFontColor = _w === void 0 ? "#000" : _w, _x = _a.iconFontSize, iconFontSize = _x === void 0 ? 20 : _x, _y = _a.iconFontFamily, iconFontFamily = _y === void 0 ? "FontAwesome" : _y, _z = _a.shapeOffsetX, shapeOffsetX = _z === void 0 ? 0 : _z, _0 = _a.shapeOffsetY, shapeOffsetY = _0 === void 0 ? 0 : _0, _1 = _a.iconOffsetX, iconOffsetX = _1 === void 0 ? 0 : _1, _2 = _a.iconOffsetY, iconOffsetY = _2 === void 0 ? 0 : _2, _3 = _a.iconPadding, iconPadding = _3 === void 0 ? 4 : _3, _4 = _a.iconText, iconText = _4 === void 0 ? "?" : _4, _5 = _a.shapeRendering, shapeRendering = _5 === void 0 ? "auto" : _5;
+        icon = __assign({ height: 91, padding: 40, imageCharFill: "#555555", imageFontFamily: "FontAwesome", fill: "#FFCC33", stroke: "#DFDFDF", imageChar: "?", strokeWidth: 4, yOffset: -15 }, icon);
+        subText = __assign({ text: "", fill: "transparent", textFill: "#555555" }, subText);
+        var props = {
+            id: id,
+            categoryID: categoryID,
+            text: text,
+            textHeight: textHeight,
+            textPadding: textPadding,
+            textFill: textFill,
+            textboxFill: textboxFill,
+            textboxStroke: textboxStroke,
+            textboxStrokeWidth: textboxStrokeWidth,
+            textFontFamily: textFontFamily,
+            annotationGutter: annotationGutter,
+            annotations: annotations,
+            iconAnnotations: iconAnnotations,
+            cornerRadius: cornerRadius,
+            icon: icon,
+            subText: subText,
+            showLabel: showLabel,
+            noLabelRadius: noLabelRadius,
+            iconBorderWidth: iconBorderWidth,
+            iconBorderColor: iconBorderColor,
+            iconBackgroundColor: iconBackgroundColor,
+            iconFontColor: iconFontColor,
+            iconFontSize: iconFontSize,
+            iconFontFamily: iconFontFamily,
+            shapeOffsetX: shapeOffsetX,
+            shapeOffsetY: shapeOffsetY,
+            iconOffsetX: iconOffsetX,
+            iconOffsetY: iconOffsetY,
+            iconPadding: iconPadding,
+            iconText: iconText,
+            shapeRendering: shapeRendering
+        };
+        return h$1(Vertex4, __assign({}, props, { icon: icon, subText: subText }));
+    };
 
-  exports.Annotations = Annotations;
-  exports.BUILD_VERSION = BUILD_VERSION$1;
-  exports.CentroidVertex3 = CentroidVertex3;
-  exports.CentroidVertex4 = CentroidVertex4;
-  exports.Circle = Circle;
-  exports.Edge = Edge;
-  exports.HTMLAdapter = HTMLAdapter;
-  exports.Icon = Icon;
-  exports.IconLabelledRect = IconLabelledRect;
-  exports.Icons = Icons;
-  exports.ImageChar = ImageChar;
-  exports.LabelledRect = LabelledRect;
-  exports.PKG_NAME = PKG_NAME$1;
-  exports.PKG_VERSION = PKG_VERSION$1;
-  exports.React = index_es6;
-  exports.Rectangle = Rectangle;
-  exports.SVGAdapter = SVGAdapter;
-  exports.Shape = Shape;
-  exports.Square = Square;
-  exports.Subgraph = Subgraph;
-  exports.Text = Text;
-  exports.TextBox = TextBox;
-  exports.TextLine = TextLine;
-  exports.Vertex = Vertex;
-  exports.Vertex2 = Vertex2;
-  exports.Vertex3 = Vertex3;
-  exports.Vertex4 = Vertex4;
-  exports.render = render;
-  exports.svgRender = svgRender;
+    var Subgraph = function (_a) {
+        var text = _a.text, _b = _a.width, width = _b === void 0 ? 100 : _b, _c = _a.height, height = _c === void 0 ? 100 : _c, _d = _a.fill, fill = _d === void 0 ? "transparent" : _d, _e = _a.stroke, stroke = _e === void 0 ? "black" : _e, _f = _a.fontHeight, fontHeight = _f === void 0 ? 12 : _f, fontFamily = _a.fontFamily;
+        var tSize = common.Utility.textSize(text, fontFamily, fontHeight, false);
+        return h$1(p$1, null,
+            h$1(Rectangle, { width: width, height: height, fill: fill, stroke: stroke }),
+            h$1("g", { transform: "translate(".concat((-width + tSize.width) / 2 + 4, " ").concat((-height + tSize.height) / 2 + 4, ")") },
+                h$1(Text, { height: fontHeight, text: text, fontFamily: fontFamily })));
+    };
 
-  Object.defineProperty(exports, '__esModule', { value: true });
+    exports.Annotations = Annotations;
+    exports.BUILD_VERSION = BUILD_VERSION$1;
+    exports.CentroidVertex3 = CentroidVertex3;
+    exports.CentroidVertex4 = CentroidVertex4;
+    exports.Circle = Circle;
+    exports.Edge = Edge;
+    exports.HTMLAdapter = HTMLAdapter;
+    exports.Icon = Icon;
+    exports.IconLabelledRect = IconLabelledRect;
+    exports.Icons = Icons;
+    exports.ImageChar = ImageChar;
+    exports.LabelledRect = LabelledRect;
+    exports.PKG_NAME = PKG_NAME$1;
+    exports.PKG_VERSION = PKG_VERSION$1;
+    exports.React = index_es6;
+    exports.Rectangle = Rectangle;
+    exports.SVGAdapter = SVGAdapter;
+    exports.Shape = Shape;
+    exports.Square = Square;
+    exports.Subgraph = Subgraph;
+    exports.Text = Text;
+    exports.TextBox = TextBox;
+    exports.TextLine = TextLine;
+    exports.Vertex = Vertex;
+    exports.Vertex2 = Vertex2;
+    exports.Vertex3 = Vertex3;
+    exports.Vertex4 = Vertex4;
+    exports.render = render;
+    exports.svgRender = svgRender;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
 
 }));
 //# sourceMappingURL=index.js.map