3d-force-graph 1.74.7 → 1.76.0

package/README.md

@@ -107,7 +107,7 @@ new ForceGraph3d(<domElement>, { configOptions })
 | --- | --- | :--: |
 | <b>nodeRelSize</b>([<i>num</i>]) | Getter/setter for the ratio of node sphere volume (cubic px) per value unit. | 4 |
 | <b>nodeVal</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Node object accessor function, attribute or a numeric constant for the node numeric value (affects sphere volume). | `val` |
-| <b>nodeLabel</b>([<i>str</i> or <i>fn</i>]) | Node object accessor function or attribute for name (shown in label). Supports plain text or HTML content. Note that this method uses `innerHTML` internally, so make sure to pre-sanitize any user-input content to prevent XSS vulnerabilities. | `name` |
+| <b>nodeLabel</b>([<i>str</i> or <i>fn</i>]) | Node object accessor function or attribute for name (shown in label). Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | `name` |
 | <b>nodeVisibility</b>([<i>boolean</i>, <i>str</i> or <i>fn</i>]) | Node object accessor function, attribute or a boolean constant for whether to display the node. | `true` |
 | <b>nodeColor</b>([<i>str</i> or <i>fn</i>]) | Node object accessor function or attribute for node color (affects sphere color). | `color` |
 | <b>nodeAutoColorBy</b>([<i>str</i> or <i>fn</i>]) | Node object accessor function (`fn(node)`) or attribute (e.g. `'type'`) to automatically group colors by. Only affects nodes without a color attribute. | |
@@ -120,7 +120,7 @@ new ForceGraph3d(<domElement>, { configOptions })
 
 | Method | Description | Default |
 | --- | --- | :--: |
-| <b>linkLabel</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function or attribute for name (shown in label). Supports plain text or HTML content. Note that this method uses `innerHTML` internally, so make sure to pre-sanitize any user-input content to prevent XSS vulnerabilities. | `name` |
+| <b>linkLabel</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function or attribute for name (shown in label). Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | `name` |
 | <b>linkVisibility</b>([<i>boolean</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function, attribute or a boolean constant for whether to display the link line. A value of `false` maintains the link force without rendering it. | `true` |
 | <b>linkColor</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function or attribute for line color. | `color` |
 | <b>linkAutoColorBy</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function (`fn(link)`) or attribute (e.g. `'type'`) to automatically group colors by. Only affects links without a color attribute. | |

package/dist/3d-force-graph.d.ts

@@ -11,6 +11,8 @@ interface ConfigOptions {
 type Accessor<In, Out> = Out | string | ((obj: In) => Out);
 type ObjAccessor<T, InT = object> = Accessor<InT, T>;
 
+type Label = string | HTMLElement;
+
 type Coords = { x: number; y: number; z: number; };
 
 // don't surface these internal props from inner ThreeForceGraph
@@ -32,10 +34,10 @@ interface ForceGraph3DGenericInstance<ChainableInstance, N extends NodeObject =
   showNavInfo(enabled: boolean): ChainableInstance;
 
   // Labels
-  nodeLabel(): ObjAccessor<string, N>;
-  nodeLabel(textAccessor: ObjAccessor<string, N>): ChainableInstance;
-  linkLabel(): ObjAccessor<string, L>;
-  linkLabel(textAccessor: ObjAccessor<string, L>): ChainableInstance;
+  nodeLabel(): ObjAccessor<Label, N>;
+  nodeLabel(textAccessor: ObjAccessor<Label, N>): ChainableInstance;
+  linkLabel(): ObjAccessor<Label, L>;
+  linkLabel(textAccessor: ObjAccessor<Label, L>): ChainableInstance;
 
   // Interaction
   onNodeClick(callback: (node: N, event: MouseEvent) => void): ChainableInstance;

package/dist/3d-force-graph.js

@@ -1,4 +1,4 @@
-// Version 1.74.7 3d-force-graph - https://github.com/vasturiano/3d-force-graph
+// Version 1.76.0 3d-force-graph - https://github.com/vasturiano/3d-force-graph
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -43,8 +43,8 @@
   function _arrayWithoutHoles$3(r) {
     if (Array.isArray(r)) return _arrayLikeToArray$5(r);
   }
-  function _defineProperty$2(e, r, t) {
-    return (r = _toPropertyKey$3(r)) in e ? Object.defineProperty(e, r, {
+  function _defineProperty$3(e, r, t) {
+    return (r = _toPropertyKey$4(r)) in e ? Object.defineProperty(e, r, {
       value: t,
       enumerable: true,
       configurable: true,
@@ -57,7 +57,7 @@
   function _nonIterableSpread$3() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
-  function ownKeys$1(e, r) {
+  function ownKeys$2(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
       var o = Object.getOwnPropertySymbols(e);
@@ -67,12 +67,12 @@
     }
     return t;
   }
-  function _objectSpread2$1(e) {
+  function _objectSpread2$2(e) {
     for (var r = 1; r < arguments.length; r++) {
       var t = null != arguments[r] ? arguments[r] : {};
-      r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) {
-        _defineProperty$2(e, r, t[r]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) {
+      r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) {
+        _defineProperty$3(e, r, t[r]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) {
         Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
       });
     }
@@ -81,7 +81,7 @@
   function _toConsumableArray$3(r) {
     return _arrayWithoutHoles$3(r) || _iterableToArray$3(r) || _unsupportedIterableToArray$5(r) || _nonIterableSpread$3();
   }
-  function _toPrimitive$3(t, r) {
+  function _toPrimitive$4(t, r) {
     if ("object" != typeof t || !t) return t;
     var e = t[Symbol.toPrimitive];
     if (undefined !== e) {
@@ -91,8 +91,8 @@
     }
     return ("string" === r ? String : Number)(t);
   }
-  function _toPropertyKey$3(t) {
-    var i = _toPrimitive$3(t, "string");
+  function _toPropertyKey$4(t) {
+    var i = _toPrimitive$4(t, "string");
     return "symbol" == typeof i ? i : i + "";
   }
   function _unsupportedIterableToArray$5(r, a) {
@@ -39418,26 +39418,26 @@ void main() {
   }
 
   // https://en.wikipedia.org/wiki/Linear_congruential_generator#Parameters_in_common_use
-  const a = 1664525;
-  const c = 1013904223;
-  const m = 4294967296; // 2^32
+  const a$1 = 1664525;
+  const c$1 = 1013904223;
+  const m$1 = 4294967296; // 2^32
 
   function lcg() {
     let s = 1;
-    return () => (s = (a * s + c) % m) / m;
+    return () => (s = (a$1 * s + c$1) % m$1) / m$1;
   }
 
   var MAX_DIMENSIONS = 3;
 
-  function x(d) {
+  function x$1(d) {
     return d.x;
   }
 
-  function y(d) {
+  function y$1(d) {
     return d.y;
   }
 
-  function z(d) {
+  function z$1(d) {
     return d.z;
   }
 
@@ -39639,9 +39639,9 @@ void main() {
       var i,
           n = nodes.length,
           tree =
-              (nDim === 1 ? binarytree(nodes, x)
-              :(nDim === 2 ? quadtree(nodes, x, y)
-              :(nDim === 3 ? octree(nodes, x, y, z)
+              (nDim === 1 ? binarytree(nodes, x$1)
+              :(nDim === 2 ? quadtree(nodes, x$1, y$1)
+              :(nDim === 3 ? octree(nodes, x$1, y$1, z$1)
               :null
           ))).visitAfter(accumulate);
 
@@ -43186,7 +43186,7 @@ function InsertStackElement(node, body) {
   function _defineProperties$1(e, r) {
     for (var t = 0; t < r.length; t++) {
       var o = r[t];
-      o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey$2(o.key), o);
+      o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey$3(o.key), o);
     }
   }
   function _createClass$1(e, r, t) {
@@ -43233,7 +43233,7 @@ function InsertStackElement(node, body) {
   function _toConsumableArray$2(r) {
     return _arrayWithoutHoles$2(r) || _iterableToArray$2(r) || _unsupportedIterableToArray$3(r) || _nonIterableSpread$2();
   }
-  function _toPrimitive$2(t, r) {
+  function _toPrimitive$3(t, r) {
     if ("object" != typeof t || !t) return t;
     var e = t[Symbol.toPrimitive];
     if (undefined !== e) {
@@ -43243,8 +43243,8 @@ function InsertStackElement(node, body) {
     }
     return (String )(t);
   }
-  function _toPropertyKey$2(t) {
-    var i = _toPrimitive$2(t, "string");
+  function _toPropertyKey$3(t) {
+    var i = _toPrimitive$3(t, "string");
     return "symbol" == typeof i ? i : i + "";
   }
   function _unsupportedIterableToArray$3(r, a) {
@@ -44640,7 +44640,7 @@ function InsertStackElement(node, body) {
   function _defineProperties(e, r) {
     for (var t = 0; t < r.length; t++) {
       var o = r[t];
-      o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey$1(o.key), o);
+      o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey$2(o.key), o);
     }
   }
   function _createClass(e, r, t) {
@@ -44648,8 +44648,8 @@ function InsertStackElement(node, body) {
       writable: false
     }), e;
   }
-  function _defineProperty$1(e, r, t) {
-    return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, {
+  function _defineProperty$2(e, r, t) {
+    return (r = _toPropertyKey$2(r)) in e ? Object.defineProperty(e, r, {
       value: t,
       enumerable: true,
       configurable: true,
@@ -44723,7 +44723,7 @@ function InsertStackElement(node, body) {
   function _nonIterableSpread$1() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
-  function ownKeys(e, r) {
+  function ownKeys$1(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
       var o = Object.getOwnPropertySymbols(e);
@@ -44733,12 +44733,12 @@ function InsertStackElement(node, body) {
     }
     return t;
   }
-  function _objectSpread2(e) {
+  function _objectSpread2$1(e) {
     for (var r = 1; r < arguments.length; r++) {
       var t = null != arguments[r] ? arguments[r] : {};
-      r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
-        _defineProperty$1(e, r, t[r]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) {
+        _defineProperty$2(e, r, t[r]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) {
         Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
       });
     }
@@ -44770,7 +44770,7 @@ function InsertStackElement(node, body) {
   function _toConsumableArray$1(r) {
     return _arrayWithoutHoles$1(r) || _iterableToArray$1(r) || _unsupportedIterableToArray$2(r) || _nonIterableSpread$1();
   }
-  function _toPrimitive$1(t, r) {
+  function _toPrimitive$2(t, r) {
     if ("object" != typeof t || !t) return t;
     var e = t[Symbol.toPrimitive];
     if (undefined !== e) {
@@ -44780,8 +44780,8 @@ function InsertStackElement(node, body) {
     }
     return ("string" === r ? String : Number)(t);
   }
-  function _toPropertyKey$1(t) {
-    var i = _toPrimitive$1(t, "string");
+  function _toPropertyKey$2(t) {
+    var i = _toPrimitive$2(t, "string");
     return "symbol" == typeof i ? i : i + "";
   }
   function _typeof$1(o) {
@@ -44845,7 +44845,7 @@ function InsertStackElement(node, body) {
         objBindAttr = _ref$objBindAttr === undefined ? '__threeObj' : _ref$objBindAttr;
       _classCallCheck(this, ThreeDigest);
       _this = _callSuper(this, ThreeDigest);
-      _defineProperty$1(_this, "scene", undefined);
+      _defineProperty$2(_this, "scene", undefined);
       _classPrivateFieldInitSpec(_this, _dataBindAttr, undefined);
       _classPrivateFieldInitSpec(_this, _objBindAttr, undefined);
       _this.scene = scene;
@@ -44950,7 +44950,7 @@ function InsertStackElement(node, body) {
       var _ref7 = _slicedToArray$2(_ref6, 2),
         id = _ref7[0],
         node = _ref7[1];
-      return _defineProperty$1({}, id, node.depth);
+      return _defineProperty$2({}, id, node.depth);
     }))));
     return nodeDepths;
     function traverse(nodes) {
@@ -45632,7 +45632,7 @@ function InsertStackElement(node, body) {
 
         // extract global x,y,z min/max
         return Object.assign.apply(Object, _toConsumableArray$1(['x', 'y', 'z'].map(function (c) {
-          return _defineProperty$1({}, c, [min(bboxes, function (bb) {
+          return _defineProperty$2({}, c, [min(bboxes, function (bb) {
             return bb.min[c];
           }), max(bboxes, function (bb) {
             return bb.max[c];
@@ -46022,7 +46022,7 @@ function InsertStackElement(node, body) {
           state.graphData.links.forEach(function (link) {
             _graph.addLink(link.source, link.target);
           });
-          layout = ngraph.forcelayout(_graph, _objectSpread2({
+          layout = ngraph.forcelayout(_graph, _objectSpread2$1({
             dimensions: state.numDimensions
           }, state.ngraphPhysics));
           layout.graph = _graph; // Attach graph reference to layout
@@ -106442,6 +106442,8 @@ var<${access}> ${name} : ${structName};`;
     return [event.pageX, event.pageY];
   }
 
+  var n,l,u,t,i,r,o,e,f,c,s,a,p={},v=[],y=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,d=Array.isArray;function w(n,l){for(var u in l)n[u]=l[u];return n}function _(n){n&&n.parentNode&&n.parentNode.removeChild(n);}function g(l,u,t){var i,r,o,e={};for(o in u)"key"==o?i=u[o]:"ref"==o?r=u[o]:e[o]=u[o];if(arguments.length>2&&(e.children=arguments.length>3?n.call(arguments,2):t),"function"==typeof l&&null!=l.defaultProps)for(o in l.defaultProps) undefined===e[o]&&(e[o]=l.defaultProps[o]);return m(l,e,i,r,null)}function m(n,t,i,r,o){var e={type:n,props:t,key:i,ref:r,__k:null,__:null,__b:0,__e:null,__c:null,constructor:undefined,__v:null==o?++u:o,__i:-1,__u:0};return null==o&&null!=l.vnode&&l.vnode(e),e}function k(n){return n.children}function x(n,l){this.props=n,this.context=l;}function C(n,l){if(null==l)return n.__?C(n.__,n.__i+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?C(n):null}function S(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 S(n)}}function M(n){(!n.__d&&(n.__d=true)&&i.push(n)&&!P.__r++||r!==l.debounceRendering)&&((r=l.debounceRendering)||o)(P);}function P(){var n,u,t,r,o,f,c,s;for(i.sort(e);n=i.shift();)n.__d&&(u=i.length,r=undefined,f=(o=(t=n).__v).__e,c=[],s=[],t.__P&&((r=w({},o)).__v=o.__v+1,l.vnode&&l.vnode(r),j(t.__P,r,o,t.__n,t.__P.namespaceURI,32&o.__u?[f]:null,c,null==f?C(o):f,!!(32&o.__u),s),r.__v=o.__v,r.__.__k[r.__i]=r,z(c,r,s),r.__e!=f&&S(r)),i.length>u&&i.sort(e));P.__r=0;}function $(n,l,u,t,i,r,o,e,f,c,s){var a,h,y,d,w,_,g=t&&t.__k||v,m=l.length;for(f=I(u,l,g,f,m),a=0;a<m;a++)null!=(y=u.__k[a])&&(h=-1===y.__i?p:g[y.__i]||p,y.__i=a,_=j(n,y,h,i,r,o,e,f,c,s),d=y.__e,y.ref&&h.ref!=y.ref&&(h.ref&&V(h.ref,null,y),s.push(y.ref,y.__c||d,y)),null==w&&null!=d&&(w=d),4&y.__u||h.__k===y.__k?f=A(y,f,n):"function"==typeof y.type&&undefined!==_?f=_:d&&(f=d.nextSibling),y.__u&=-7);return u.__e=w,f}function I(n,l,u,t,i){var r,o,e,f,c,s=u.length,a=s,h=0;for(n.__k=new Array(i),r=0;r<i;r++)null!=(o=l[r])&&"boolean"!=typeof o&&"function"!=typeof o?(f=r+h,(o=n.__k[r]="string"==typeof o||"number"==typeof o||"bigint"==typeof o||o.constructor==String?m(null,o,null,null,null):d(o)?m(k,{children:o},null,null,null):undefined===o.constructor&&o.__b>0?m(o.type,o.props,o.key,o.ref?o.ref:null,o.__v):o).__=n,o.__b=n.__b+1,e=null,-1!==(c=o.__i=L(o,u,f,a))&&(a--,(e=u[c])&&(e.__u|=2)),null==e||null===e.__v?(-1==c&&h--,"function"!=typeof o.type&&(o.__u|=4)):c!=f&&(c==f-1?h--:c==f+1?h++:(c>f?h--:h++,o.__u|=4))):n.__k[r]=null;if(a)for(r=0;r<s;r++)null!=(e=u[r])&&0==(2&e.__u)&&(e.__e==t&&(t=C(e)),q(e,e));return t}function A(n,l,u){var t,i;if("function"==typeof n.type){for(t=n.__k,i=0;t&&i<t.length;i++)t[i]&&(t[i].__=n,l=A(t[i],l,u));return l}n.__e!=l&&(l&&n.type&&!u.contains(l)&&(l=C(n)),u.insertBefore(n.__e,l||null),l=n.__e);do{l=l&&l.nextSibling;}while(null!=l&&8==l.nodeType);return l}function L(n,l,u,t){var i,r,o=n.key,e=n.type,f=l[u];if(null===f||f&&o==f.key&&e===f.type&&0==(2&f.__u))return u;if(t>(null!=f&&0==(2&f.__u)?1:0))for(i=u-1,r=u+1;i>=0||r<l.length;){if(i>=0){if((f=l[i])&&0==(2&f.__u)&&o==f.key&&e===f.type)return i;i--;}if(r<l.length){if((f=l[r])&&0==(2&f.__u)&&o==f.key&&e===f.type)return r;r++;}}return  -1}function T(n,l,u){"-"==l[0]?n.setProperty(l,null==u?"":u):n[l]=null==u?"":"number"!=typeof u||y.test(l)?u:u+"px";}function F(n,l,u,t,i){var r;n:if("style"==l)if("string"==typeof u)n.style.cssText=u;else {if("string"==typeof t&&(n.style.cssText=t=""),t)for(l in t)u&&l in u||T(n.style,l,"");if(u)for(l in u)t&&u[l]===t[l]||T(n.style,l,u[l]);}else if("o"==l[0]&&"n"==l[1])r=l!=(l=l.replace(f,"$1")),l=l.toLowerCase()in n||"onFocusOut"==l||"onFocusIn"==l?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+r]=u,u?t?u.u=t.u:(u.u=c,n.addEventListener(l,r?a:s,r)):n.removeEventListener(l,r?a:s,r);else {if("http://www.w3.org/2000/svg"==i)l=l.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!=l&&"height"!=l&&"href"!=l&&"list"!=l&&"form"!=l&&"tabIndex"!=l&&"download"!=l&&"rowSpan"!=l&&"colSpan"!=l&&"role"!=l&&"popover"!=l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null==u||false===u&&"-"!=l[4]?n.removeAttribute(l):n.setAttribute(l,"popover"==l&&1==u?"":u));}}function O(n){return function(u){if(this.l){var t=this.l[u.type+n];if(null==u.t)u.t=c++;else if(u.t<t.u)return;return t(l.event?l.event(u):u)}}}function j(n,u,t,i,r,o,e,f,c,s){var a,h,p,v,y,g,m,b,C,S,M,P,I,A,H,L,T,F=u.type;if(undefined!==u.constructor)return null;128&t.__u&&(c=!!(32&t.__u),o=[f=u.__e=t.__e]),(a=l.__b)&&a(u);n:if("function"==typeof F)try{if(b=u.props,C="prototype"in F&&F.prototype.render,S=(a=F.contextType)&&i[a.__c],M=a?S?S.props.value:a.__:i,t.__c?m=(h=u.__c=t.__c).__=h.__E:(C?u.__c=h=new F(b,M):(u.__c=h=new x(b,M),h.constructor=F,h.render=B),S&&S.sub(h),h.props=b,h.state||(h.state={}),h.context=M,h.__n=i,p=h.__d=!0,h.__h=[],h._sb=[]),C&&null==h.__s&&(h.__s=h.state),C&&null!=F.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=w({},h.__s)),w(h.__s,F.getDerivedStateFromProps(b,h.__s))),v=h.props,y=h.state,h.__v=u,p)C&&null==F.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),C&&null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else {if(C&&null==F.getDerivedStateFromProps&&b!==v&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(b,M),!h.__e&&(null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(b,h.__s,M)||u.__v==t.__v)){for(u.__v!=t.__v&&(h.props=b,h.state=h.__s,h.__d=!1),u.__e=t.__e,u.__k=t.__k,u.__k.some(function(n){n&&(n.__=u);}),P=0;P<h._sb.length;P++)h.__h.push(h._sb[P]);h._sb=[],h.__h.length&&e.push(h);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(b,h.__s,M),C&&null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(v,y,g);});}if(h.context=M,h.props=b,h.__P=n,h.__e=!1,I=l.__r,A=0,C){for(h.state=h.__s,h.__d=!1,I&&I(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,I&&I(u),a=h.render(h.props,h.state,h.context),h.state=h.__s;}while(h.__d&&++A<25);h.state=h.__s,null!=h.getChildContext&&(i=w(w({},i),h.getChildContext())),C&&!p&&null!=h.getSnapshotBeforeUpdate&&(g=h.getSnapshotBeforeUpdate(v,y)),f=$(n,d(L=null!=a&&a.type===k&&null==a.key?a.props.children:a)?L:[L],u,t,i,r,o,e,f,c,s),h.base=u.__e,u.__u&=-161,h.__h.length&&e.push(h),m&&(h.__E=h.__=null);}catch(n){if(u.__v=null,c||null!=o)if(n.then){for(u.__u|=c?160:128;f&&8==f.nodeType&&f.nextSibling;)f=f.nextSibling;o[o.indexOf(f)]=null,u.__e=f;}else for(T=o.length;T--;)_(o[T]);else u.__e=t.__e,u.__k=t.__k;l.__e(n,u,t);}else null==o&&u.__v==t.__v?(u.__k=t.__k,u.__e=t.__e):f=u.__e=N(t.__e,u,t,i,r,o,e,c,s);return (a=l.diffed)&&a(u),128&u.__u?undefined:f}function z(n,u,t){for(var i=0;i<t.length;i++)V(t[i],t[++i],t[++i]);l.__c&&l.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u);});}catch(n){l.__e(n,u.__v);}});}function N(u,t,i,r,o,e,f,c,s){var a,h,v,y,w,g,m,b=i.props,k=t.props,x=t.type;if("svg"==x?o="http://www.w3.org/2000/svg":"math"==x?o="http://www.w3.org/1998/Math/MathML":o||(o="http://www.w3.org/1999/xhtml"),null!=e)for(a=0;a<e.length;a++)if((w=e[a])&&"setAttribute"in w==!!x&&(x?w.localName==x:3==w.nodeType)){u=w,e[a]=null;break}if(null==u){if(null==x)return document.createTextNode(k);u=document.createElementNS(o,x,k.is&&k),c&&(l.__m&&l.__m(t,e),c=false),e=null;}if(null===x)b===k||c&&u.data===k||(u.data=k);else {if(e=e&&n.call(u.childNodes),b=i.props||p,!c&&null!=e)for(b={},a=0;a<u.attributes.length;a++)b[(w=u.attributes[a]).name]=w.value;for(a in b)if(w=b[a],"children"==a);else if("dangerouslySetInnerHTML"==a)v=w;else if(!(a in k)){if("value"==a&&"defaultValue"in k||"checked"==a&&"defaultChecked"in k)continue;F(u,a,null,w,o);}for(a in k)w=k[a],"children"==a?y=w:"dangerouslySetInnerHTML"==a?h=w:"value"==a?g=w:"checked"==a?m=w:c&&"function"!=typeof w||b[a]===w||F(u,a,w,b[a],o);if(h)c||v&&(h.__html===v.__html||h.__html===u.innerHTML)||(u.innerHTML=h.__html),t.__k=[];else if(v&&(u.innerHTML=""),$(u,d(y)?y:[y],t,i,r,"foreignObject"==x?"http://www.w3.org/1999/xhtml":o,e,f,e?e[0]:i.__k&&C(i,0),c,s),null!=e)for(a=e.length;a--;)_(e[a]);c||(a="value","progress"==x&&null==g?u.removeAttribute("value"):undefined!==g&&(g!==u[a]||"progress"==x&&!g||"option"==x&&g!==b[a])&&F(u,a,g,b[a],o),a="checked",undefined!==m&&m!==u[a]&&F(u,a,m,b[a],o));}return u}function V(n,u,t){try{if("function"==typeof n){var i="function"==typeof n.__u;i&&n.__u(),i&&null==u||(n.__u=n(u));}else n.current=u;}catch(n){l.__e(n,t);}}function q(n,u,t){var i,r;if(l.unmount&&l.unmount(n),(i=n.ref)&&(i.current&&i.current!==n.__e||V(i,null,u)),null!=(i=n.__c)){if(i.componentWillUnmount)try{i.componentWillUnmount();}catch(n){l.__e(n,u);}i.base=i.__P=null;}if(i=n.__k)for(r=0;r<i.length;r++)i[r]&&q(i[r],u,t||"function"!=typeof n.type);t||_(n.__e),n.__c=n.__=n.__e=undefined;}function B(n,l,u){return this.constructor(n,u)}function D(u,t,i){var r,o,e,f;t==document&&(t=document.documentElement),l.__&&l.__(u,t),o=(r="function"=="undefined")?null:t.__k,e=[],f=[],j(t,u=(t).__k=g(k,null,[u]),o||p,p,t.namespaceURI,o?null:t.firstChild?n.call(t.childNodes):null,e,o?o.__e:t.firstChild,r,f),z(e,u,f);}function G(l,u,t){var i,r,o,e,f=w({},l.props);for(o in l.type&&l.type.defaultProps&&(e=l.type.defaultProps),u)"key"==o?i=u[o]:"ref"==o?r=u[o]:f[o]=undefined===u[o]&&undefined!==e?e[o]:u[o];return arguments.length>2&&(f.children=arguments.length>3?n.call(arguments,2):t),m(l.type,f,i||l.key,r||l.ref,null)}n=v.slice,l={__e:function(n,l,u,t){for(var i,r,o;l=l.__;)if((i=l.__c)&&!i.__)try{if((r=i.constructor)&&null!=r.getDerivedStateFromError&&(i.setState(r.getDerivedStateFromError(n)),o=i.__d),null!=i.componentDidCatch&&(i.componentDidCatch(n,t||{}),o=i.__d),o)return i.__E=i}catch(l){n=l;}throw n}},u=0,t=function(n){return null!=n&&null==n.constructor},x.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=w({},this.state),"function"==typeof n&&(n=n(w({},u),this.props)),n&&w(u,n),null!=n&&this.__v&&(l&&this._sb.push(l),M(this));},x.prototype.forceUpdate=function(n){this.__v&&(this.__e=true,n&&this.__h.push(n),M(this));},x.prototype.render=k,i=[],o="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,e=function(n,l){return n.__v.__b-l.__v.__b},P.__r=0,f=/(PointerCapture)$|Capture$/i,c=0,s=O(false),a=O(true);
+
   function _arrayLikeToArray$1(r, a) {
     (null == a || a > r.length) && (a = r.length);
     for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
@@ -106450,6 +106452,14 @@ var<${access}> ${name} : ${structName};`;
   function _arrayWithHoles$1(r) {
     if (Array.isArray(r)) return r;
   }
+  function _defineProperty$1(e, r, t) {
+    return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, {
+      value: t,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    }) : e[r] = t, e;
+  }
   function _iterableToArrayLimit$1(r, l) {
     var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
     if (null != t) {
@@ -106477,9 +106487,44 @@ var<${access}> ${name} : ${structName};`;
   function _nonIterableRest$1() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
+  function ownKeys(e, r) {
+    var t = Object.keys(e);
+    if (Object.getOwnPropertySymbols) {
+      var o = Object.getOwnPropertySymbols(e);
+      r && (o = o.filter(function (r) {
+        return Object.getOwnPropertyDescriptor(e, r).enumerable;
+      })), t.push.apply(t, o);
+    }
+    return t;
+  }
+  function _objectSpread2(e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = null != arguments[r] ? arguments[r] : {};
+      r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+        _defineProperty$1(e, r, t[r]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+        Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+      });
+    }
+    return e;
+  }
   function _slicedToArray$1(r, e) {
     return _arrayWithHoles$1(r) || _iterableToArrayLimit$1(r, e) || _unsupportedIterableToArray$1(r, e) || _nonIterableRest$1();
   }
+  function _toPrimitive$1(t, r) {
+    if ("object" != typeof t || !t) return t;
+    var e = t[Symbol.toPrimitive];
+    if (undefined !== e) {
+      var i = e.call(t, r || "default");
+      if ("object" != typeof i) return i;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return ("string" === r ? String : Number)(t);
+  }
+  function _toPropertyKey$1(t) {
+    var i = _toPrimitive$1(t, "string");
+    return "symbol" == typeof i ? i : i + "";
+  }
   function _typeof(o) {
     "@babel/helpers - typeof";
 
@@ -106497,6 +106542,26 @@ var<${access}> ${name} : ${structName};`;
     }
   }
 
+  var _reactElement2VNode = function reactElement2VNode(el) {
+    // Among other things, react VNodes (and all its children) need to have constructor: undefined attributes in order to be recognised, cloneElement (applied recursively) does the necessary conversion
+    if (!(_typeof(el) === 'object')) return el;
+    var res = G(el);
+    if (res.props) {
+      var _res$props;
+      res.props = _objectSpread2({}, res.props);
+      if (res !== null && res !== undefined && (_res$props = res.props) !== null && _res$props !== undefined && _res$props.children) {
+        res.props.children = Array.isArray(res.props.children) ? res.props.children.map(_reactElement2VNode) : _reactElement2VNode(res.props.children);
+      }
+    }
+    return res;
+  };
+  var isReactRenderable = function isReactRenderable(o) {
+    return t(G(o));
+  };
+  var render = function render(jsx, domEl) {
+    return D(_reactElement2VNode(jsx), domEl);
+  };
+
   function styleInject$1(css, ref) {
     if (ref === undefined) ref = {};
     var insertAt = ref.insertAt;
@@ -106522,7 +106587,7 @@ var<${access}> ${name} : ${structName};`;
     }
   }
 
-  var css_248z$1 = ".float-tooltip-kap {\n  position: absolute;\n  width: max-content; /* prevent shrinking near right edge */\n  padding: 3px 5px;\n  border-radius: 3px;\n  font: 12px sans-serif;\n  color: #eee;\n  background: rgba(0,0,0,0.6);\n  pointer-events: none;\n}\n";
+  var css_248z$1 = ".float-tooltip-kap {\n  position: absolute;\n  width: max-content; /* prevent shrinking near right edge */\n  max-width: max(50%, 150px);\n  padding: 3px 5px;\n  border-radius: 3px;\n  font: 12px sans-serif;\n  color: #eee;\n  background: rgba(0,0,0,0.6);\n  pointer-events: none;\n}\n";
   styleInject$1(css_248z$1);
 
   var index = index$2({
@@ -106537,6 +106602,9 @@ var<${access}> ${name} : ${structName};`;
         style = _ref$style === undefined ? {} : _ref$style;
       var isD3Selection = !!domNode && _typeof(domNode) === 'object' && !!domNode.node && typeof domNode.node === 'function';
       var el = select(isD3Selection ? domNode.node() : domNode);
+
+      // make sure container is positioned, to provide anchor for tooltip
+      el.style('position') === 'static' && el.style('position', 'relative');
       state.tooltipEl = el.append('div').attr('class', 'float-tooltip-kap');
       Object.entries(style).forEach(function (_ref2) {
         var _ref3 = _slicedToArray$1(_ref2, 2),
@@ -106570,7 +106638,22 @@ var<${access}> ${name} : ${structName};`;
     },
     update: function update(state) {
       state.tooltipEl.style('display', !!state.content && state.mouseInside ? 'inline' : 'none');
-      state.tooltipEl.html(state.content || '');
+      if (!state.content) {
+        state.tooltipEl.text('');
+      } else if (state.content instanceof HTMLElement) {
+        state.tooltipEl.text(''); // empty it
+        state.tooltipEl.append(function () {
+          return state.content;
+        });
+      } else if (typeof state.content === 'string') {
+        state.tooltipEl.html(state.content);
+      } else if (isReactRenderable(state.content)) {
+        state.tooltipEl.text(''); // empty it
+        render(state.content, state.tooltipEl.node());
+      } else {
+        state.tooltipEl.style('display', 'none');
+        console.warn('Tooltip content is invalid, skipping.', state.content, state.content.toString());
+      }
     }
   });
 
@@ -107254,19 +107337,19 @@ var<${access}> ${name} : ${structName};`;
   // Expose config from forceGraph
   var bindFG = linkKapsule('forceGraph', threeForcegraph);
   var linkedFGProps = Object.assign.apply(Object, _toConsumableArray$3(['jsonUrl', 'graphData', 'numDimensions', 'dagMode', 'dagLevelDistance', 'dagNodeFilter', 'onDagError', 'nodeRelSize', 'nodeId', 'nodeVal', 'nodeResolution', 'nodeColor', 'nodeAutoColorBy', 'nodeOpacity', 'nodeVisibility', 'nodeThreeObject', 'nodeThreeObjectExtend', 'linkSource', 'linkTarget', 'linkVisibility', 'linkColor', 'linkAutoColorBy', 'linkOpacity', 'linkWidth', 'linkResolution', 'linkCurvature', 'linkCurveRotation', 'linkMaterial', 'linkThreeObject', 'linkThreeObjectExtend', 'linkPositionUpdate', 'linkDirectionalArrowLength', 'linkDirectionalArrowColor', 'linkDirectionalArrowRelPos', 'linkDirectionalArrowResolution', 'linkDirectionalParticles', 'linkDirectionalParticleSpeed', 'linkDirectionalParticleWidth', 'linkDirectionalParticleColor', 'linkDirectionalParticleResolution', 'forceEngine', 'd3AlphaDecay', 'd3VelocityDecay', 'd3AlphaMin', 'ngraphPhysics', 'warmupTicks', 'cooldownTicks', 'cooldownTime', 'onEngineTick', 'onEngineStop'].map(function (p) {
-    return _defineProperty$2({}, p, bindFG.linkProp(p));
+    return _defineProperty$3({}, p, bindFG.linkProp(p));
   })));
   var linkedFGMethods = Object.assign.apply(Object, _toConsumableArray$3(['refresh', 'getGraphBbox', 'd3Force', 'd3ReheatSimulation', 'emitParticle'].map(function (p) {
-    return _defineProperty$2({}, p, bindFG.linkMethod(p));
+    return _defineProperty$3({}, p, bindFG.linkMethod(p));
   })));
 
   // Expose config from renderObjs
   var bindRenderObjs = linkKapsule('renderObjs', threeRenderObjects);
   var linkedRenderObjsProps = Object.assign.apply(Object, _toConsumableArray$3(['width', 'height', 'backgroundColor', 'showNavInfo', 'enablePointerInteraction'].map(function (p) {
-    return _defineProperty$2({}, p, bindRenderObjs.linkProp(p));
+    return _defineProperty$3({}, p, bindRenderObjs.linkProp(p));
   })));
   var linkedRenderObjsMethods = Object.assign.apply(Object, _toConsumableArray$3(['lights', 'cameraPosition', 'postProcessingComposer'].map(function (p) {
-    return _defineProperty$2({}, p, bindRenderObjs.linkMethod(p));
+    return _defineProperty$3({}, p, bindRenderObjs.linkMethod(p));
   })).concat([{
     graph2ScreenCoords: bindRenderObjs.linkMethod('getScreenCoords'),
     screen2GraphCoords: bindRenderObjs.linkMethod('getSceneCoords')
@@ -107275,7 +107358,7 @@ var<${access}> ${name} : ${structName};`;
   //
 
   var _3dForceGraph = index$2({
-    props: _objectSpread2$1(_objectSpread2$1({
+    props: _objectSpread2$2(_objectSpread2$2({
       nodeLabel: {
         "default": 'name',
         triggerUpdate: false
@@ -107340,7 +107423,7 @@ var<${access}> ${name} : ${structName};`;
         triggerUpdate: false
       }
     }, linkedFGProps), linkedRenderObjsProps),
-    methods: _objectSpread2$1(_objectSpread2$1({
+    methods: _objectSpread2$2(_objectSpread2$2({
       zoomToFit: function zoomToFit(state, transitionDuration, padding) {
         var _state$forceGraph;
         for (var _len = arguments.length, bboxArgs = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {