@nivo/network - npm Package Compare versions

Comparing version 0.62.0 to 0.63.0

dist/nivo-network.cjs.js

@@ -11,2 +11,3 @@ 'use strict';
 var colors = require('@nivo/colors');
+var tooltip = require('@nivo/tooltip');
 var PropTypes = _interopDefault(require('prop-types'));
@@ -19,4 +20,98 @@ var get = _interopDefault(require('lodash/get'));
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(source)); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+  return target;
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+  return _arr;
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
 var commonPropTypes = {
@@ -43,4 +138,6 @@ nodes: PropTypes.arrayOf(PropTypes.shape({
 };
-var NetworkPropTypes = _objectSpread({}, commonPropTypes, core.motionPropTypes);
-var NetworkCanvasPropTypes = _objectSpread({
+var NetworkPropTypes = _objectSpread2(_objectSpread2({}, commonPropTypes), {}, {
+  role: PropTypes.string.isRequired
+}, core.motionPropTypes);
+var NetworkCanvasPropTypes = _objectSpread2({
   pixelRatio: PropTypes.number.isRequired
@@ -65,17 +162,12 @@ }, commonPropTypes);
 };
-var NetworkDefaultProps = _objectSpread({}, commonDefaultProps, {
+var NetworkDefaultProps = _objectSpread2(_objectSpread2({}, commonDefaultProps), {}, {
   animate: true,
   motionStiffness: 90,
-  motionDamping: 15
+  motionDamping: 15,
+  role: 'img'
 });
-var NetworkCanvasDefaultProps = _objectSpread({}, commonDefaultProps, {
+var NetworkCanvasDefaultProps = _objectSpread2(_objectSpread2({}, commonDefaultProps), {}, {
   pixelRatio: global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1
 });
 
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(source)); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } return target; }
-function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var computeForces = function computeForces(_ref) {
@@ -134,6 +226,6 @@ var linkDistance = _ref.linkDistance,
     var nodesCopy = nodes.map(function (node) {
-      return _objectSpread$1({}, node);
+      return _objectSpread2({}, node);
     });
     var linksCopy = links.map(function (link) {
-      return _objectSpread$1({
+      return _objectSpread2({
         id: "".concat(link.source, ".").concat(link.target)
@@ -178,3 +270,4 @@ }, link);
 var Node = function Node(_ref) {
-  var x = _ref.x,
+  var node = _ref.node,
+      x = _ref.x,
       y = _ref.y,
@@ -186,3 +279,5 @@ radius = _ref.radius,
       _ref$scale = _ref.scale,
-      scale = _ref$scale === void 0 ? 1 : _ref$scale;
+      scale = _ref$scale === void 0 ? 1 : _ref$scale,
+      handleNodeHover = _ref.handleNodeHover,
+      handleNodeLeave = _ref.handleNodeLeave;
   return React__default.createElement("circle", {
@@ -193,15 +288,12 @@ transform: "translate(".concat(x, ",").concat(y, ") scale(").concat(scale, ")"),
     strokeWidth: borderWidth,
-    stroke: borderColor
+    stroke: borderColor,
+    onMouseEnter: function onMouseEnter(event) {
+      return handleNodeHover(node, event);
+    },
+    onMouseMove: function onMouseMove(event) {
+      return handleNodeHover(node, event);
+    },
+    onMouseLeave: handleNodeLeave
   });
 };
-Node.propTypes = {
-  node: PropTypes.object.isRequired,
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired,
-  radius: PropTypes.number.isRequired,
-  color: PropTypes.string.isRequired,
-  borderWidth: PropTypes.number.isRequired,
-  borderColor: PropTypes.string.isRequired,
-  scale: PropTypes.number
-};
 var Node$1 = React.memo(Node);
@@ -233,3 +325,5 @@
       borderWidth = _ref3.borderWidth,
-      borderColor = _ref3.borderColor;
+      borderColor = _ref3.borderColor,
+      handleNodeHover = _ref3.handleNodeHover,
+      handleNodeLeave = _ref3.handleNodeLeave;
   var _useMotionConfig = core.useMotionConfig(),
@@ -266,3 +360,5 @@ springConfig = _useMotionConfig.springConfig;
         borderColor: borderColor(node),
-        scale: Math.max(style.scale, 0)
+        scale: Math.max(style.scale, 0),
+        handleNodeHover: handleNodeHover,
+        handleNodeLeave: handleNodeLeave
       });
@@ -272,8 +368,2 @@ }));
 };
-AnimatedNodes.propTypes = {
-  nodes: PropTypes.array.isRequired,
-  color: PropTypes.func.isRequired,
-  borderWidth: PropTypes.number.isRequired,
-  borderColor: PropTypes.func.isRequired
-};
 var AnimatedNodes$1 = React.memo(AnimatedNodes);
@@ -285,3 +375,5 @@
       borderWidth = _ref.borderWidth,
-      borderColor = _ref.borderColor;
+      borderColor = _ref.borderColor,
+      handleNodeHover = _ref.handleNodeHover,
+      handleNodeLeave = _ref.handleNodeLeave;
   return nodes.map(function (node) {
@@ -296,12 +388,8 @@ return React__default.createElement(Node$1, {
       borderWidth: borderWidth,
-      borderColor: borderColor(node)
+      borderColor: borderColor(node),
+      handleNodeHover: handleNodeHover,
+      handleNodeLeave: handleNodeLeave
     });
   });
 };
-StaticNodes.propTypes = {
-  nodes: PropTypes.array.isRequired,
-  color: PropTypes.func.isRequired,
-  borderWidth: PropTypes.number.isRequired,
-  borderColor: PropTypes.func.isRequired
-};
 var StaticNodes$1 = React.memo(StaticNodes);
@@ -326,11 +414,2 @@
 };
-Link.propTypes = {
-  link: PropTypes.object.isRequired,
-  sourceX: PropTypes.number.isRequired,
-  sourceY: PropTypes.number.isRequired,
-  targetX: PropTypes.number.isRequired,
-  targetY: PropTypes.number.isRequired,
-  thickness: PropTypes.number.isRequired,
-  color: PropTypes.string.isRequired
-};
 var Link$1 = React.memo(Link);
@@ -388,7 +467,2 @@
 };
-AnimatedLinks.propTypes = {
-  links: PropTypes.array.isRequired,
-  linkThickness: PropTypes.func.isRequired,
-  linkColor: PropTypes.func.isRequired
-};
 var AnimatedLinks$1 = React.memo(AnimatedLinks);
@@ -413,15 +487,18 @@
 };
-StaticLinks.propTypes = {
-  links: PropTypes.array.isRequired,
-  linkThickness: PropTypes.func.isRequired,
-  linkColor: PropTypes.func.isRequired
-};
 var StaticLinks$1 = React.memo(StaticLinks);
 
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(source)); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } return target; }
-function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1(); }
-function _nonIterableRest$1() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-function _iterableToArrayLimit$1(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }
+var NetworkNodeTooltip = function NetworkNodeTooltip(_ref) {
+  var node = _ref.node,
+      format = _ref.format,
+      tooltip$1 = _ref.tooltip;
+  return React__default.createElement(tooltip.BasicTooltip, {
+    id: node.id,
+    enableChip: true,
+    color: node.color,
+    format: format,
+    renderContent: typeof tooltip$1 === 'function' ? tooltip$1.bind(null, _objectSpread2({}, node)) : null
+  });
+};
+var NetworkNodeTooltip$1 = React.memo(NetworkNodeTooltip);
+
 var Network = function Network(props) {
@@ -443,3 +520,6 @@ var width = props.width,
       linkThickness = props.linkThickness,
-      linkColor = props.linkColor;
+      linkColor = props.linkColor,
+      tooltip$1 = props.tooltip,
+      isInteractive = props.isInteractive,
+      role = props.role;
   var _useDimensions = core.useDimensions(width, height, partialMargin),
@@ -468,5 +548,17 @@ margin = _useDimensions.margin,
   }),
-      _useNetwork2 = _slicedToArray$1(_useNetwork, 2),
+      _useNetwork2 = _slicedToArray(_useNetwork, 2),
       nodes = _useNetwork2[0],
       links = _useNetwork2[1];
+  var _useTooltip = tooltip.useTooltip(),
+      showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
+      hideTooltip = _useTooltip.hideTooltip;
+  var handleNodeHover = React.useCallback(function (node, event) {
+    showTooltipFromEvent( React__default.createElement(NetworkNodeTooltip$1, {
+      node: node,
+      tooltip: tooltip$1
+    }), event);
+  }, [showTooltipFromEvent, tooltip$1]);
+  var handleNodeLeave = React.useCallback(function () {
+    hideTooltip();
+  }, [hideTooltip]);
   var layerById = {
@@ -484,3 +576,5 @@ links: React__default.createElement(animate === true ? AnimatedLinks$1 : StaticLinks$1, {
       borderWidth: nodeBorderWidth,
-      borderColor: getBorderColor
+      borderColor: getBorderColor,
+      handleNodeHover: isInteractive ? handleNodeHover : undefined,
+      handleNodeLeave: isInteractive ? handleNodeLeave : undefined
     })
@@ -491,3 +585,4 @@ };
     height: outerHeight,
-    margin: margin
+    margin: margin,
+    role: role
   }, layers.map(function (layer, i) {
@@ -497,3 +592,3 @@ if (typeof layer === 'function') {
         key: i
-      }, layer(_objectSpread$2({}, props, {
+      }, layer(_objectSpread2(_objectSpread2({}, props), {}, {
         innerWidth: innerWidth,
@@ -508,7 +603,5 @@ innerHeight: innerHeight,
 };
-Network.propTypes = NetworkPropTypes;
 Network.defaultProps = NetworkDefaultProps;
 var Network$1 = core.withContainer(Network);
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var ResponsiveNetwork = function ResponsiveNetwork(props) {
@@ -518,3 +611,3 @@ return React__default.createElement(core.ResponsiveWrapper, null, function (_ref) {
         height = _ref.height;
-    return React__default.createElement(Network$1, _extends({
+    return React__default.createElement(Network$1, Object.assign({
       width: width,
@@ -526,8 +619,2 @@ height: height
 
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(source)); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$3(target, key, source[key]); }); } return target; }
-function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _slicedToArray$2(arr, i) { return _arrayWithHoles$2(arr) || _iterableToArrayLimit$2(arr, i) || _nonIterableRest$2(); }
-function _nonIterableRest$2() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-function _iterableToArrayLimit$2(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-function _arrayWithHoles$2(arr) { if (Array.isArray(arr)) return arr; }
 var NetworkCanvas = function NetworkCanvas(props) {
@@ -569,3 +656,3 @@ var width = props.width,
   }),
-      _useNetwork2 = _slicedToArray$2(_useNetwork, 2),
+      _useNetwork2 = _slicedToArray(_useNetwork, 2),
       nodes = _useNetwork2[0],
@@ -609,3 +696,3 @@ links = _useNetwork2[1];
       } else if (typeof layer === 'function') {
-        layer(ctx, _objectSpread$3({}, props, {
+        layer(ctx, _objectSpread2(_objectSpread2({}, props), {}, {
           nodes: nodes,
@@ -628,7 +715,5 @@ links: links
 };
-NetworkCanvas.propTypes = NetworkCanvasPropTypes;
 NetworkCanvas.defaultProps = NetworkCanvasDefaultProps;
 var NetworkCanvas$1 = core.withContainer(NetworkCanvas);
 
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 var ResponsiveNetworkCanvas = function ResponsiveNetworkCanvas(props) {
@@ -638,3 +723,3 @@ return React__default.createElement(core.ResponsiveWrapper, null, function (_ref) {
         height = _ref.height;
-    return React__default.createElement(NetworkCanvas$1, _extends$1({
+    return React__default.createElement(NetworkCanvas$1, Object.assign({
       width: width,
@@ -657,1 +742,2 @@ height: height
 exports.useNodeColor = useNodeColor;
+//# sourceMappingURL=nivo-network.cjs.js.map

dist/nivo-network.umd.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@nivo/core'), require('@nivo/colors'), require('prop-types'), require('lodash/get'), require('lodash/isString'), require('lodash/isNumber'), require('d3-force'), require('react-motion')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@nivo/core', '@nivo/colors', 'prop-types', 'lodash/get', 'lodash/isString', 'lodash/isNumber', 'd3-force', 'react-motion'], factory) :
-    (global = global || self, factory(global.nivo = global.nivo || {}, global.React, global.nivo, global.nivo, global.PropTypes, global['lodash/get'], global['lodash/isString'], global['lodash/isNumber'], global.d3, global.ReactMotion));
-}(this, (function (exports, React, core, colors, PropTypes, get, isString, isNumber, d3Force, reactMotion) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@nivo/core'), require('@nivo/colors'), require('@nivo/tooltip'), require('prop-types'), require('lodash/get'), require('lodash/isString'), require('lodash/isNumber'), require('d3-force'), require('react-motion')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@nivo/core', '@nivo/colors', '@nivo/tooltip', 'prop-types', 'lodash/get', 'lodash/isString', 'lodash/isNumber', 'd3-force', 'react-motion'], factory) :
+  (global = global || self, factory(global.nivo = global.nivo || {}, global.React, global.nivo, global.nivo, global.nivo, global.PropTypes, global['lodash/get'], global['lodash/isString'], global['lodash/isNumber'], global.d3, global.ReactMotion));
+}(this, (function (exports, React, core, colors, tooltip, PropTypes, get, isString, isNumber, d3Force, reactMotion) { 'use strict';
 
-    var React__default = 'default' in React ? React['default'] : React;
-    PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
-    get = get && get.hasOwnProperty('default') ? get['default'] : get;
-    isString = isString && isString.hasOwnProperty('default') ? isString['default'] : isString;
-    isNumber = isNumber && isNumber.hasOwnProperty('default') ? isNumber['default'] : isNumber;
+  var React__default = 'default' in React ? React['default'] : React;
+  PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
+  get = get && Object.prototype.hasOwnProperty.call(get, 'default') ? get['default'] : get;
+  isString = isString && Object.prototype.hasOwnProperty.call(isString, 'default') ? isString['default'] : isString;
+  isNumber = isNumber && Object.prototype.hasOwnProperty.call(isNumber, 'default') ? isNumber['default'] : isNumber;
 
-    function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(source)); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
-    function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-    var commonPropTypes = {
-      nodes: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.string.isRequired
-      })).isRequired,
-      links: PropTypes.arrayOf(PropTypes.shape({
-        source: PropTypes.string.isRequired,
-        target: PropTypes.string.isRequired
-      })).isRequired,
-      layers: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['links', 'nodes']), PropTypes.func])).isRequired,
-      linkDistance: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.number]).isRequired,
-      repulsivity: PropTypes.number.isRequired,
-      distanceMin: PropTypes.number.isRequired,
-      distanceMax: PropTypes.number.isRequired,
-      iterations: PropTypes.number.isRequired,
-      nodeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
-      nodeBorderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
-      nodeBorderColor: colors.inheritedColorPropType.isRequired,
-      linkThickness: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
-      linkColor: colors.inheritedColorPropType.isRequired,
-      isInteractive: PropTypes.bool.isRequired
-    };
-    var NetworkPropTypes = _objectSpread({}, commonPropTypes, core.motionPropTypes);
-    var NetworkCanvasPropTypes = _objectSpread({
-      pixelRatio: PropTypes.number.isRequired
-    }, commonPropTypes);
-    var commonDefaultProps = {
-      layers: ['links', 'nodes'],
-      linkDistance: 30,
-      repulsivity: 10,
-      distanceMin: 1,
-      distanceMax: Infinity,
-      iterations: 90,
-      nodeBorderWidth: 0,
-      nodeBorderColor: {
-        from: 'color'
-      },
-      linkThickness: 1,
-      linkColor: {
-        from: 'source.color'
-      },
-      isInteractive: true
-    };
-    var NetworkDefaultProps = _objectSpread({}, commonDefaultProps, {
-      animate: true,
-      motionStiffness: 90,
-      motionDamping: 15
-    });
-    var NetworkCanvasDefaultProps = _objectSpread({}, commonDefaultProps, {
-      pixelRatio: global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1
-    });
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+    return obj;
+  }
 
-    function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(source)); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } return target; }
-    function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-    function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
-    function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-    function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-    function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-    var computeForces = function computeForces(_ref) {
-      var linkDistance = _ref.linkDistance,
-          repulsivity = _ref.repulsivity,
-          distanceMin = _ref.distanceMin,
-          distanceMax = _ref.distanceMax,
-          center = _ref.center;
-      var computedLinkDistance;
-      if (typeof linkDistance === 'function') {
-        computedLinkDistance = linkDistance;
-      } else if (isNumber(linkDistance)) {
-        computedLinkDistance = linkDistance;
-      } else if (isString(linkDistance)) {
-        computedLinkDistance = function computedLinkDistance(link) {
-          return get(link, linkDistance);
-        };
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+      keys.push.apply(keys, symbols);
+    }
+    return keys;
+  }
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          _defineProperty(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
       }
-      var linkForce = d3Force.forceLink().id(function (d) {
-        return d.id;
-      }).distance(computedLinkDistance);
-      var chargeForce = d3Force.forceManyBody().strength(-repulsivity).distanceMin(distanceMin).distanceMax(distanceMax);
-      var centerForce = d3Force.forceCenter(center[0], center[1]);
-      return {
-        link: linkForce,
-        charge: chargeForce,
-        center: centerForce
+    }
+    return target;
+  }
+
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+  }
+
+  function _iterableToArrayLimit(arr, i) {
+    if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _e = undefined;
+    try {
+      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
+        if (i && _arr.length === i) break;
+      }
+    } catch (err) {
+      _d = true;
+      _e = err;
+    } finally {
+      try {
+        if (!_n && _i["return"] != null) _i["return"]();
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for (var i = 0, arr2 = new Array(len); i < len; i++) {
+      arr2[i] = arr[i];
+    }
+    return arr2;
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+  }
+
+  var commonPropTypes = {
+    nodes: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.string.isRequired
+    })).isRequired,
+    links: PropTypes.arrayOf(PropTypes.shape({
+      source: PropTypes.string.isRequired,
+      target: PropTypes.string.isRequired
+    })).isRequired,
+    layers: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['links', 'nodes']), PropTypes.func])).isRequired,
+    linkDistance: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.number]).isRequired,
+    repulsivity: PropTypes.number.isRequired,
+    distanceMin: PropTypes.number.isRequired,
+    distanceMax: PropTypes.number.isRequired,
+    iterations: PropTypes.number.isRequired,
+    nodeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    nodeBorderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
+    nodeBorderColor: colors.inheritedColorPropType.isRequired,
+    linkThickness: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
+    linkColor: colors.inheritedColorPropType.isRequired,
+    isInteractive: PropTypes.bool.isRequired
+  };
+  var NetworkPropTypes = _objectSpread2(_objectSpread2({}, commonPropTypes), {}, {
+    role: PropTypes.string.isRequired
+  }, core.motionPropTypes);
+  var NetworkCanvasPropTypes = _objectSpread2({
+    pixelRatio: PropTypes.number.isRequired
+  }, commonPropTypes);
+  var commonDefaultProps = {
+    layers: ['links', 'nodes'],
+    linkDistance: 30,
+    repulsivity: 10,
+    distanceMin: 1,
+    distanceMax: Infinity,
+    iterations: 90,
+    nodeBorderWidth: 0,
+    nodeBorderColor: {
+      from: 'color'
+    },
+    linkThickness: 1,
+    linkColor: {
+      from: 'source.color'
+    },
+    isInteractive: true
+  };
+  var NetworkDefaultProps = _objectSpread2(_objectSpread2({}, commonDefaultProps), {}, {
+    animate: true,
+    motionStiffness: 90,
+    motionDamping: 15,
+    role: 'img'
+  });
+  var NetworkCanvasDefaultProps = _objectSpread2(_objectSpread2({}, commonDefaultProps), {}, {
+    pixelRatio: global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1
+  });
+
+  var computeForces = function computeForces(_ref) {
+    var linkDistance = _ref.linkDistance,
+        repulsivity = _ref.repulsivity,
+        distanceMin = _ref.distanceMin,
+        distanceMax = _ref.distanceMax,
+        center = _ref.center;
+    var computedLinkDistance;
+    if (typeof linkDistance === 'function') {
+      computedLinkDistance = linkDistance;
+    } else if (isNumber(linkDistance)) {
+      computedLinkDistance = linkDistance;
+    } else if (isString(linkDistance)) {
+      computedLinkDistance = function computedLinkDistance(link) {
+        return get(link, linkDistance);
       };
+    }
+    var linkForce = d3Force.forceLink().id(function (d) {
+      return d.id;
+    }).distance(computedLinkDistance);
+    var chargeForce = d3Force.forceManyBody().strength(-repulsivity).distanceMin(distanceMin).distanceMax(distanceMax);
+    var centerForce = d3Force.forceCenter(center[0], center[1]);
+    return {
+      link: linkForce,
+      charge: chargeForce,
+      center: centerForce
     };
-    var useNetwork = function useNetwork(_ref2) {
-      var nodes = _ref2.nodes,
-          links = _ref2.links,
-          linkDistance = _ref2.linkDistance,
-          repulsivity = _ref2.repulsivity,
-          distanceMin = _ref2.distanceMin,
-          distanceMax = _ref2.distanceMax,
-          center = _ref2.center,
-          iterations = _ref2.iterations;
-      var _useState = React.useState([]),
-          _useState2 = _slicedToArray(_useState, 2),
-          currentNodes = _useState2[0],
-          setCurrentNodes = _useState2[1];
-      var _useState3 = React.useState([]),
-          _useState4 = _slicedToArray(_useState3, 2),
-          currentLinks = _useState4[0],
-          setCurrentLinks = _useState4[1];
-      React.useEffect(function () {
-        var forces = computeForces({
-          linkDistance: linkDistance,
-          repulsivity: repulsivity,
-          distanceMin: distanceMin,
-          distanceMax: distanceMax,
-          center: center
+  };
+  var useNetwork = function useNetwork(_ref2) {
+    var nodes = _ref2.nodes,
+        links = _ref2.links,
+        linkDistance = _ref2.linkDistance,
+        repulsivity = _ref2.repulsivity,
+        distanceMin = _ref2.distanceMin,
+        distanceMax = _ref2.distanceMax,
+        center = _ref2.center,
+        iterations = _ref2.iterations;
+    var _useState = React.useState([]),
+        _useState2 = _slicedToArray(_useState, 2),
+        currentNodes = _useState2[0],
+        setCurrentNodes = _useState2[1];
+    var _useState3 = React.useState([]),
+        _useState4 = _slicedToArray(_useState3, 2),
+        currentLinks = _useState4[0],
+        setCurrentLinks = _useState4[1];
+    React.useEffect(function () {
+      var forces = computeForces({
+        linkDistance: linkDistance,
+        repulsivity: repulsivity,
+        distanceMin: distanceMin,
+        distanceMax: distanceMax,
+        center: center
+      });
+      var nodesCopy = nodes.map(function (node) {
+        return _objectSpread2({}, node);
+      });
+      var linksCopy = links.map(function (link) {
+        return _objectSpread2({
+          id: "".concat(link.source, ".").concat(link.target)
+        }, link);
+      });
+      var simulation = d3Force.forceSimulation(nodesCopy).force('link', forces.link.links(linksCopy)).force('charge', forces.charge).force('center', forces.center).stop();
+      simulation.tick(iterations);
+      setCurrentNodes(nodesCopy);
+      setCurrentLinks(linksCopy.map(function (link) {
+        link.previousSource = currentNodes.find(function (n) {
+          return n.id === link.source.id;
         });
-        var nodesCopy = nodes.map(function (node) {
-          return _objectSpread$1({}, node);
+        link.previousTarget = currentNodes.find(function (n) {
+          return n.id === link.target.id;
         });
-        var linksCopy = links.map(function (link) {
-          return _objectSpread$1({
-            id: "".concat(link.source, ".").concat(link.target)
-          }, link);
-        });
-        var simulation = d3Force.forceSimulation(nodesCopy).force('link', forces.link.links(linksCopy)).force('charge', forces.charge).force('center', forces.center).stop();
-        simulation.tick(iterations);
-        setCurrentNodes(nodesCopy);
-        setCurrentLinks(linksCopy.map(function (link) {
-          link.previousSource = currentNodes.find(function (n) {
-            return n.id === link.source.id;
-          });
-          link.previousTarget = currentNodes.find(function (n) {
-            return n.id === link.target.id;
-          });
-          return link;
-        }));
-        return function () {
-          simulation.stop();
-        };
-      }, [nodes, links, linkDistance, repulsivity, distanceMin, distanceMax, iterations, center[0], center[1]]);
-      return [currentNodes, currentLinks];
-    };
-    var useNodeColor = function useNodeColor(color) {
-      return React.useMemo(function () {
-        if (typeof color === 'function') return color;
-        return function () {
-          return color;
-        };
-      }, [color]);
-    };
-    var useLinkThickness = function useLinkThickness(thickness) {
-      return React.useMemo(function () {
-        if (typeof thickness === 'function') return thickness;
-        return function () {
-          return thickness;
-        };
-      }, [thickness]);
-    };
+        return link;
+      }));
+      return function () {
+        simulation.stop();
+      };
+    }, [nodes, links, linkDistance, repulsivity, distanceMin, distanceMax, iterations, center[0], center[1]]);
+    return [currentNodes, currentLinks];
+  };
+  var useNodeColor = function useNodeColor(color) {
+    return React.useMemo(function () {
+      if (typeof color === 'function') return color;
+      return function () {
+        return color;
+      };
+    }, [color]);
+  };
+  var useLinkThickness = function useLinkThickness(thickness) {
+    return React.useMemo(function () {
+      if (typeof thickness === 'function') return thickness;
+      return function () {
+        return thickness;
+      };
+    }, [thickness]);
+  };
 
-    var Node = function Node(_ref) {
-      var x = _ref.x,
-          y = _ref.y,
-          radius = _ref.radius,
-          color = _ref.color,
-          borderWidth = _ref.borderWidth,
-          borderColor = _ref.borderColor,
-          _ref$scale = _ref.scale,
-          scale = _ref$scale === void 0 ? 1 : _ref$scale;
-      return React__default.createElement("circle", {
-        transform: "translate(".concat(x, ",").concat(y, ") scale(").concat(scale, ")"),
-        r: radius,
-        fill: color,
-        strokeWidth: borderWidth,
-        stroke: borderColor
-      });
+  var Node = function Node(_ref) {
+    var node = _ref.node,
+        x = _ref.x,
+        y = _ref.y,
+        radius = _ref.radius,
+        color = _ref.color,
+        borderWidth = _ref.borderWidth,
+        borderColor = _ref.borderColor,
+        _ref$scale = _ref.scale,
+        scale = _ref$scale === void 0 ? 1 : _ref$scale,
+        handleNodeHover = _ref.handleNodeHover,
+        handleNodeLeave = _ref.handleNodeLeave;
+    return React__default.createElement("circle", {
+      transform: "translate(".concat(x, ",").concat(y, ") scale(").concat(scale, ")"),
+      r: radius,
+      fill: color,
+      strokeWidth: borderWidth,
+      stroke: borderColor,
+      onMouseEnter: function onMouseEnter(event) {
+        return handleNodeHover(node, event);
+      },
+      onMouseMove: function onMouseMove(event) {
+        return handleNodeHover(node, event);
+      },
+      onMouseLeave: handleNodeLeave
+    });
+  };
+  var Node$1 = React.memo(Node);
+
+  var willEnter = function willEnter(_ref) {
+    var style = _ref.style;
+    return {
+      x: style.x.val,
+      y: style.y.val,
+      radius: style.radius.val,
+      scale: 0
     };
-    Node.propTypes = {
-      node: PropTypes.object.isRequired,
-      x: PropTypes.number.isRequired,
-      y: PropTypes.number.isRequired,
-      radius: PropTypes.number.isRequired,
-      color: PropTypes.string.isRequired,
-      borderWidth: PropTypes.number.isRequired,
-      borderColor: PropTypes.string.isRequired,
-      scale: PropTypes.number
-    };
-    var Node$1 = React.memo(Node);
-
-    var willEnter = function willEnter(_ref) {
-      var style = _ref.style;
+  };
+  var willLeave = function willLeave(springConfig) {
+    return function (_ref2) {
+      var style = _ref2.style;
       return {
-        x: style.x.val,
-        y: style.y.val,
-        radius: style.radius.val,
-        scale: 0
+        x: style.x,
+        y: style.y,
+        radius: style.radius,
+        scale: reactMotion.spring(0, springConfig)
       };
     };
-    var willLeave = function willLeave(springConfig) {
-      return function (_ref2) {
-        var style = _ref2.style;
+  };
+  var AnimatedNodes = function AnimatedNodes(_ref3) {
+    var nodes = _ref3.nodes,
+        color = _ref3.color,
+        borderWidth = _ref3.borderWidth,
+        borderColor = _ref3.borderColor,
+        handleNodeHover = _ref3.handleNodeHover,
+        handleNodeLeave = _ref3.handleNodeLeave;
+    var _useMotionConfig = core.useMotionConfig(),
+        springConfig = _useMotionConfig.springConfig;
+    return React__default.createElement(reactMotion.TransitionMotion, {
+      willEnter: willEnter,
+      willLeave: willLeave(springConfig),
+      styles: nodes.map(function (node) {
         return {
-          x: style.x,
-          y: style.y,
-          radius: style.radius,
-          scale: reactMotion.spring(0, springConfig)
+          key: node.id,
+          data: node,
+          style: {
+            x: reactMotion.spring(node.x, springConfig),
+            y: reactMotion.spring(node.y, springConfig),
+            radius: reactMotion.spring(node.radius, springConfig),
+            scale: reactMotion.spring(1, springConfig)
+          }
         };
-      };
-    };
-    var AnimatedNodes = function AnimatedNodes(_ref3) {
-      var nodes = _ref3.nodes,
-          color = _ref3.color,
-          borderWidth = _ref3.borderWidth,
-          borderColor = _ref3.borderColor;
-      var _useMotionConfig = core.useMotionConfig(),
-          springConfig = _useMotionConfig.springConfig;
-      return React__default.createElement(reactMotion.TransitionMotion, {
-        willEnter: willEnter,
-        willLeave: willLeave(springConfig),
-        styles: nodes.map(function (node) {
-          return {
-            key: node.id,
-            data: node,
-            style: {
-              x: reactMotion.spring(node.x, springConfig),
-              y: reactMotion.spring(node.y, springConfig),
-              radius: reactMotion.spring(node.radius, springConfig),
-              scale: reactMotion.spring(1, springConfig)
-            }
-          };
-        })
-      }, function (interpolatedStyles) {
-        return React__default.createElement(React__default.Fragment, null, interpolatedStyles.map(function (_ref4) {
-          var key = _ref4.key,
-              style = _ref4.style,
-              node = _ref4.data;
-          return React__default.createElement(Node$1, {
-            key: key,
-            node: node,
-            x: style.x,
-            y: style.y,
-            radius: Math.max(style.radius, 0),
-            color: color(node),
-            borderWidth: borderWidth,
-            borderColor: borderColor(node),
-            scale: Math.max(style.scale, 0)
-          });
-        }));
-      });
-    };
-    AnimatedNodes.propTypes = {
-      nodes: PropTypes.array.isRequired,
-      color: PropTypes.func.isRequired,
-      borderWidth: PropTypes.number.isRequired,
-      borderColor: PropTypes.func.isRequired
-    };
-    var AnimatedNodes$1 = React.memo(AnimatedNodes);
-
-    var StaticNodes = function StaticNodes(_ref) {
-      var nodes = _ref.nodes,
-          color = _ref.color,
-          borderWidth = _ref.borderWidth,
-          borderColor = _ref.borderColor;
-      return nodes.map(function (node) {
+      })
+    }, function (interpolatedStyles) {
+      return React__default.createElement(React__default.Fragment, null, interpolatedStyles.map(function (_ref4) {
+        var key = _ref4.key,
+            style = _ref4.style,
+            node = _ref4.data;
         return React__default.createElement(Node$1, {
-          key: node.id,
+          key: key,
           node: node,
-          x: node.x,
-          y: node.y,
-          radius: node.radius,
+          x: style.x,
+          y: style.y,
+          radius: Math.max(style.radius, 0),
           color: color(node),
           borderWidth: borderWidth,
-          borderColor: borderColor(node)
+          borderColor: borderColor(node),
+          scale: Math.max(style.scale, 0),
+          handleNodeHover: handleNodeHover,
+          handleNodeLeave: handleNodeLeave
         });
-      });
-    };
-    StaticNodes.propTypes = {
-      nodes: PropTypes.array.isRequired,
-      color: PropTypes.func.isRequired,
-      borderWidth: PropTypes.number.isRequired,
-      borderColor: PropTypes.func.isRequired
-    };
-    var StaticNodes$1 = React.memo(StaticNodes);
+      }));
+    });
+  };
+  var AnimatedNodes$1 = React.memo(AnimatedNodes);
 
-    var Link = function Link(_ref) {
-      var sourceX = _ref.sourceX,
-          sourceY = _ref.sourceY,
-          targetX = _ref.targetX,
-          targetY = _ref.targetY,
-          thickness = _ref.thickness,
-          color = _ref.color;
-      return React__default.createElement("line", {
-        stroke: color,
-        strokeWidth: thickness,
-        strokeLinecap: "round",
-        x1: sourceX,
-        y1: sourceY,
-        x2: targetX,
-        y2: targetY
+  var StaticNodes = function StaticNodes(_ref) {
+    var nodes = _ref.nodes,
+        color = _ref.color,
+        borderWidth = _ref.borderWidth,
+        borderColor = _ref.borderColor,
+        handleNodeHover = _ref.handleNodeHover,
+        handleNodeLeave = _ref.handleNodeLeave;
+    return nodes.map(function (node) {
+      return React__default.createElement(Node$1, {
+        key: node.id,
+        node: node,
+        x: node.x,
+        y: node.y,
+        radius: node.radius,
+        color: color(node),
+        borderWidth: borderWidth,
+        borderColor: borderColor(node),
+        handleNodeHover: handleNodeHover,
+        handleNodeLeave: handleNodeLeave
       });
-    };
-    Link.propTypes = {
-      link: PropTypes.object.isRequired,
-      sourceX: PropTypes.number.isRequired,
-      sourceY: PropTypes.number.isRequired,
-      targetX: PropTypes.number.isRequired,
-      targetY: PropTypes.number.isRequired,
-      thickness: PropTypes.number.isRequired,
-      color: PropTypes.string.isRequired
-    };
-    var Link$1 = React.memo(Link);
+    });
+  };
+  var StaticNodes$1 = React.memo(StaticNodes);
 
-    var willEnter$1 = function willEnter(_ref) {
-      var style = _ref.style,
-          data = _ref.data;
-      var sourceX = data.previousSource ? data.previousSource.x : style.sourceX.val;
-      var sourceY = data.previousSource ? data.previousSource.y : style.sourceY.val;
-      return {
-        sourceX: sourceX,
-        sourceY: sourceY,
-        targetX: sourceX,
-        targetY: sourceY
-      };
+  var Link = function Link(_ref) {
+    var sourceX = _ref.sourceX,
+        sourceY = _ref.sourceY,
+        targetX = _ref.targetX,
+        targetY = _ref.targetY,
+        thickness = _ref.thickness,
+        color = _ref.color;
+    return React__default.createElement("line", {
+      stroke: color,
+      strokeWidth: thickness,
+      strokeLinecap: "round",
+      x1: sourceX,
+      y1: sourceY,
+      x2: targetX,
+      y2: targetY
+    });
+  };
+  var Link$1 = React.memo(Link);
+
+  var willEnter$1 = function willEnter(_ref) {
+    var style = _ref.style,
+        data = _ref.data;
+    var sourceX = data.previousSource ? data.previousSource.x : style.sourceX.val;
+    var sourceY = data.previousSource ? data.previousSource.y : style.sourceY.val;
+    return {
+      sourceX: sourceX,
+      sourceY: sourceY,
+      targetX: sourceX,
+      targetY: sourceY
     };
-    var AnimatedLinks = function AnimatedLinks(_ref2) {
-      var links = _ref2.links,
-          linkThickness = _ref2.linkThickness,
-          linkColor = _ref2.linkColor;
-      var _useMotionConfig = core.useMotionConfig(),
-          springConfig = _useMotionConfig.springConfig;
-      return React__default.createElement(reactMotion.TransitionMotion, {
-        willEnter: willEnter$1,
-        styles: links.map(function (link) {
-          return {
-            key: link.id,
-            data: link,
-            style: {
-              sourceX: reactMotion.spring(link.source.x, springConfig),
-              sourceY: reactMotion.spring(link.source.y, springConfig),
-              targetX: reactMotion.spring(link.target.x, springConfig),
-              targetY: reactMotion.spring(link.target.y, springConfig)
-            }
-          };
-        })
-      }, function (interpolatedStyles) {
-        return React__default.createElement(React__default.Fragment, null, interpolatedStyles.map(function (_ref3) {
-          var key = _ref3.key,
-              style = _ref3.style,
-              link = _ref3.data;
-          return React__default.createElement(Link$1, {
-            key: key,
-            link: link,
-            color: linkColor(link),
-            thickness: linkThickness(link),
-            sourceX: style.sourceX,
-            sourceY: style.sourceY,
-            targetX: style.targetX,
-            targetY: style.targetY
-          });
-        }));
-      });
-    };
-    AnimatedLinks.propTypes = {
-      links: PropTypes.array.isRequired,
-      linkThickness: PropTypes.func.isRequired,
-      linkColor: PropTypes.func.isRequired
-    };
-    var AnimatedLinks$1 = React.memo(AnimatedLinks);
-
-    var StaticLinks = function StaticLinks(_ref) {
-      var links = _ref.links,
-          linkThickness = _ref.linkThickness,
-          linkColor = _ref.linkColor;
-      return links.map(function (link) {
+  };
+  var AnimatedLinks = function AnimatedLinks(_ref2) {
+    var links = _ref2.links,
+        linkThickness = _ref2.linkThickness,
+        linkColor = _ref2.linkColor;
+    var _useMotionConfig = core.useMotionConfig(),
+        springConfig = _useMotionConfig.springConfig;
+    return React__default.createElement(reactMotion.TransitionMotion, {
+      willEnter: willEnter$1,
+      styles: links.map(function (link) {
+        return {
+          key: link.id,
+          data: link,
+          style: {
+            sourceX: reactMotion.spring(link.source.x, springConfig),
+            sourceY: reactMotion.spring(link.source.y, springConfig),
+            targetX: reactMotion.spring(link.target.x, springConfig),
+            targetY: reactMotion.spring(link.target.y, springConfig)
+          }
+        };
+      })
+    }, function (interpolatedStyles) {
+      return React__default.createElement(React__default.Fragment, null, interpolatedStyles.map(function (_ref3) {
+        var key = _ref3.key,
+            style = _ref3.style,
+            link = _ref3.data;
         return React__default.createElement(Link$1, {
-          key: link.id,
+          key: key,
           link: link,
           color: linkColor(link),
           thickness: linkThickness(link),
-          sourceX: link.source.x,
-          sourceY: link.source.y,
-          targetX: link.target.x,
-          targetY: link.target.y
+          sourceX: style.sourceX,
+          sourceY: style.sourceY,
+          targetX: style.targetX,
+          targetY: style.targetY
         });
+      }));
+    });
+  };
+  var AnimatedLinks$1 = React.memo(AnimatedLinks);
+
+  var StaticLinks = function StaticLinks(_ref) {
+    var links = _ref.links,
+        linkThickness = _ref.linkThickness,
+        linkColor = _ref.linkColor;
+    return links.map(function (link) {
+      return React__default.createElement(Link$1, {
+        key: link.id,
+        link: link,
+        color: linkColor(link),
+        thickness: linkThickness(link),
+        sourceX: link.source.x,
+        sourceY: link.source.y,
+        targetX: link.target.x,
+        targetY: link.target.y
       });
-    };
-    StaticLinks.propTypes = {
-      links: PropTypes.array.isRequired,
-      linkThickness: PropTypes.func.isRequired,
-      linkColor: PropTypes.func.isRequired
-    };
-    var StaticLinks$1 = React.memo(StaticLinks);
+    });
+  };
+  var StaticLinks$1 = React.memo(StaticLinks);
 
-    function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(source)); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } return target; }
-    function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-    function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1(); }
-    function _nonIterableRest$1() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-    function _iterableToArrayLimit$1(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-    function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }
-    var Network = function Network(props) {
-      var width = props.width,
-          height = props.height,
-          partialMargin = props.margin,
-          rawNodes = props.nodes,
-          rawLinks = props.links,
-          linkDistance = props.linkDistance,
-          repulsivity = props.repulsivity,
-          distanceMin = props.distanceMin,
-          distanceMax = props.distanceMax,
-          iterations = props.iterations,
-          layers = props.layers,
-          nodeColor = props.nodeColor,
-          nodeBorderWidth = props.nodeBorderWidth,
-          nodeBorderColor = props.nodeBorderColor,
-          linkThickness = props.linkThickness,
-          linkColor = props.linkColor;
-      var _useDimensions = core.useDimensions(width, height, partialMargin),
-          margin = _useDimensions.margin,
-          innerWidth = _useDimensions.innerWidth,
-          innerHeight = _useDimensions.innerHeight,
-          outerWidth = _useDimensions.outerWidth,
-          outerHeight = _useDimensions.outerHeight;
-      var _useMotionConfig = core.useMotionConfig(),
-          animate = _useMotionConfig.animate;
-      var theme = core.useTheme();
-      var getColor = useNodeColor(nodeColor);
-      var getBorderColor = colors.useInheritedColor(nodeBorderColor, theme);
-      var getLinkThickness = useLinkThickness(linkThickness);
-      var getLinkColor = colors.useInheritedColor(linkColor, theme);
-      var _useNetwork = useNetwork({
-        nodes: rawNodes,
-        links: rawLinks,
-        linkDistance: linkDistance,
-        repulsivity: repulsivity,
-        distanceMin: distanceMin,
-        distanceMax: distanceMax,
-        iterations: iterations,
-        center: [innerWidth / 2, innerHeight / 2]
+  var NetworkNodeTooltip = function NetworkNodeTooltip(_ref) {
+    var node = _ref.node,
+        format = _ref.format,
+        tooltip$1 = _ref.tooltip;
+    return React__default.createElement(tooltip.BasicTooltip, {
+      id: node.id,
+      enableChip: true,
+      color: node.color,
+      format: format,
+      renderContent: typeof tooltip$1 === 'function' ? tooltip$1.bind(null, _objectSpread2({}, node)) : null
+    });
+  };
+  var NetworkNodeTooltip$1 = React.memo(NetworkNodeTooltip);
+
+  var Network = function Network(props) {
+    var width = props.width,
+        height = props.height,
+        partialMargin = props.margin,
+        rawNodes = props.nodes,
+        rawLinks = props.links,
+        linkDistance = props.linkDistance,
+        repulsivity = props.repulsivity,
+        distanceMin = props.distanceMin,
+        distanceMax = props.distanceMax,
+        iterations = props.iterations,
+        layers = props.layers,
+        nodeColor = props.nodeColor,
+        nodeBorderWidth = props.nodeBorderWidth,
+        nodeBorderColor = props.nodeBorderColor,
+        linkThickness = props.linkThickness,
+        linkColor = props.linkColor,
+        tooltip$1 = props.tooltip,
+        isInteractive = props.isInteractive,
+        role = props.role;
+    var _useDimensions = core.useDimensions(width, height, partialMargin),
+        margin = _useDimensions.margin,
+        innerWidth = _useDimensions.innerWidth,
+        innerHeight = _useDimensions.innerHeight,
+        outerWidth = _useDimensions.outerWidth,
+        outerHeight = _useDimensions.outerHeight;
+    var _useMotionConfig = core.useMotionConfig(),
+        animate = _useMotionConfig.animate;
+    var theme = core.useTheme();
+    var getColor = useNodeColor(nodeColor);
+    var getBorderColor = colors.useInheritedColor(nodeBorderColor, theme);
+    var getLinkThickness = useLinkThickness(linkThickness);
+    var getLinkColor = colors.useInheritedColor(linkColor, theme);
+    var _useNetwork = useNetwork({
+      nodes: rawNodes,
+      links: rawLinks,
+      linkDistance: linkDistance,
+      repulsivity: repulsivity,
+      distanceMin: distanceMin,
+      distanceMax: distanceMax,
+      iterations: iterations,
+      center: [innerWidth / 2, innerHeight / 2]
+    }),
+        _useNetwork2 = _slicedToArray(_useNetwork, 2),
+        nodes = _useNetwork2[0],
+        links = _useNetwork2[1];
+    var _useTooltip = tooltip.useTooltip(),
+        showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
+        hideTooltip = _useTooltip.hideTooltip;
+    var handleNodeHover = React.useCallback(function (node, event) {
+      showTooltipFromEvent( React__default.createElement(NetworkNodeTooltip$1, {
+        node: node,
+        tooltip: tooltip$1
+      }), event);
+    }, [showTooltipFromEvent, tooltip$1]);
+    var handleNodeLeave = React.useCallback(function () {
+      hideTooltip();
+    }, [hideTooltip]);
+    var layerById = {
+      links: React__default.createElement(animate === true ? AnimatedLinks$1 : StaticLinks$1, {
+        key: 'links',
+        links: links,
+        linkThickness: getLinkThickness,
+        linkColor: getLinkColor
       }),
-          _useNetwork2 = _slicedToArray$1(_useNetwork, 2),
-          nodes = _useNetwork2[0],
-          links = _useNetwork2[1];
-      var layerById = {
-        links: React__default.createElement(animate === true ? AnimatedLinks$1 : StaticLinks$1, {
-          key: 'links',
-          links: links,
-          linkThickness: getLinkThickness,
-          linkColor: getLinkColor
-        }),
-        nodes: React__default.createElement(animate === true ? AnimatedNodes$1 : StaticNodes$1, {
-          key: 'nodes',
+      nodes: React__default.createElement(animate === true ? AnimatedNodes$1 : StaticNodes$1, {
+        key: 'nodes',
+        nodes: nodes,
+        color: getColor,
+        borderWidth: nodeBorderWidth,
+        borderColor: getBorderColor,
+        handleNodeHover: isInteractive ? handleNodeHover : undefined,
+        handleNodeLeave: isInteractive ? handleNodeLeave : undefined
+      })
+    };
+    return React__default.createElement(core.SvgWrapper, {
+      width: outerWidth,
+      height: outerHeight,
+      margin: margin,
+      role: role
+    }, layers.map(function (layer, i) {
+      if (typeof layer === 'function') {
+        return React__default.createElement(React.Fragment, {
+          key: i
+        }, layer(_objectSpread2(_objectSpread2({}, props), {}, {
+          innerWidth: innerWidth,
+          innerHeight: innerHeight,
           nodes: nodes,
-          color: getColor,
-          borderWidth: nodeBorderWidth,
-          borderColor: getBorderColor
-        })
-      };
-      return React__default.createElement(core.SvgWrapper, {
-        width: outerWidth,
-        height: outerHeight,
-        margin: margin
-      }, layers.map(function (layer, i) {
-        if (typeof layer === 'function') {
-          return React__default.createElement(React.Fragment, {
-            key: i
-          }, layer(_objectSpread$2({}, props, {
-            innerWidth: innerWidth,
-            innerHeight: innerHeight,
-            nodes: nodes,
-            links: links
-          })));
-        }
-        return layerById[layer];
-      }));
-    };
-    Network.propTypes = NetworkPropTypes;
-    Network.defaultProps = NetworkDefaultProps;
-    var Network$1 = core.withContainer(Network);
+          links: links
+        })));
+      }
+      return layerById[layer];
+    }));
+  };
+  Network.defaultProps = NetworkDefaultProps;
+  var Network$1 = core.withContainer(Network);
 
-    function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-    var ResponsiveNetwork = function ResponsiveNetwork(props) {
-      return React__default.createElement(core.ResponsiveWrapper, null, function (_ref) {
-        var width = _ref.width,
-            height = _ref.height;
-        return React__default.createElement(Network$1, _extends({
-          width: width,
-          height: height
-        }, props));
-      });
-    };
+  var ResponsiveNetwork = function ResponsiveNetwork(props) {
+    return React__default.createElement(core.ResponsiveWrapper, null, function (_ref) {
+      var width = _ref.width,
+          height = _ref.height;
+      return React__default.createElement(Network$1, Object.assign({
+        width: width,
+        height: height
+      }, props));
+    });
+  };
 
-    function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(source)); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$3(target, key, source[key]); }); } return target; }
-    function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-    function _slicedToArray$2(arr, i) { return _arrayWithHoles$2(arr) || _iterableToArrayLimit$2(arr, i) || _nonIterableRest$2(); }
-    function _nonIterableRest$2() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-    function _iterableToArrayLimit$2(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-    function _arrayWithHoles$2(arr) { if (Array.isArray(arr)) return arr; }
-    var NetworkCanvas = function NetworkCanvas(props) {
-      var width = props.width,
-          height = props.height,
-          partialMargin = props.margin,
-          pixelRatio = props.pixelRatio,
-          rawNodes = props.nodes,
-          rawLinks = props.links,
-          linkDistance = props.linkDistance,
-          repulsivity = props.repulsivity,
-          distanceMin = props.distanceMin,
-          distanceMax = props.distanceMax,
-          iterations = props.iterations,
-          layers = props.layers,
-          nodeColor = props.nodeColor,
-          nodeBorderWidth = props.nodeBorderWidth,
-          nodeBorderColor = props.nodeBorderColor,
-          linkThickness = props.linkThickness,
-          linkColor = props.linkColor,
-          isInteractive = props.isInteractive;
-      var canvasEl = React.useRef(null);
-      var _useDimensions = core.useDimensions(width, height, partialMargin),
-          margin = _useDimensions.margin,
-          innerWidth = _useDimensions.innerWidth,
-          innerHeight = _useDimensions.innerHeight,
-          outerWidth = _useDimensions.outerWidth,
-          outerHeight = _useDimensions.outerHeight;
-      var _useNetwork = useNetwork({
-        nodes: rawNodes,
-        links: rawLinks,
-        linkDistance: linkDistance,
-        repulsivity: repulsivity,
-        distanceMin: distanceMin,
-        distanceMax: distanceMax,
-        iterations: iterations,
-        center: [innerWidth / 2, innerHeight / 2]
-      }),
-          _useNetwork2 = _slicedToArray$2(_useNetwork, 2),
-          nodes = _useNetwork2[0],
-          links = _useNetwork2[1];
-      var theme = core.useTheme();
-      var getNodeColor = useNodeColor(nodeColor);
-      var getBorderColor = colors.useInheritedColor(nodeBorderColor, theme);
-      var getLinkThickness = useLinkThickness(linkThickness);
-      var getLinkColor = colors.useInheritedColor(linkColor, theme);
-      React.useEffect(function () {
-        canvasEl.current.width = outerWidth * pixelRatio;
-        canvasEl.current.height = outerHeight * pixelRatio;
-        var ctx = canvasEl.current.getContext('2d');
-        ctx.scale(pixelRatio, pixelRatio);
-        ctx.fillStyle = theme.background;
-        ctx.fillRect(0, 0, outerWidth, outerHeight);
-        ctx.translate(margin.left, margin.top);
-        layers.forEach(function (layer) {
-          if (layer === 'links') {
-            links.forEach(function (link) {
-              ctx.strokeStyle = getLinkColor(link);
-              ctx.lineWidth = getLinkThickness(link);
-              ctx.beginPath();
-              ctx.moveTo(link.source.x, link.source.y);
-              ctx.lineTo(link.target.x, link.target.y);
+  var NetworkCanvas = function NetworkCanvas(props) {
+    var width = props.width,
+        height = props.height,
+        partialMargin = props.margin,
+        pixelRatio = props.pixelRatio,
+        rawNodes = props.nodes,
+        rawLinks = props.links,
+        linkDistance = props.linkDistance,
+        repulsivity = props.repulsivity,
+        distanceMin = props.distanceMin,
+        distanceMax = props.distanceMax,
+        iterations = props.iterations,
+        layers = props.layers,
+        nodeColor = props.nodeColor,
+        nodeBorderWidth = props.nodeBorderWidth,
+        nodeBorderColor = props.nodeBorderColor,
+        linkThickness = props.linkThickness,
+        linkColor = props.linkColor,
+        isInteractive = props.isInteractive;
+    var canvasEl = React.useRef(null);
+    var _useDimensions = core.useDimensions(width, height, partialMargin),
+        margin = _useDimensions.margin,
+        innerWidth = _useDimensions.innerWidth,
+        innerHeight = _useDimensions.innerHeight,
+        outerWidth = _useDimensions.outerWidth,
+        outerHeight = _useDimensions.outerHeight;
+    var _useNetwork = useNetwork({
+      nodes: rawNodes,
+      links: rawLinks,
+      linkDistance: linkDistance,
+      repulsivity: repulsivity,
+      distanceMin: distanceMin,
+      distanceMax: distanceMax,
+      iterations: iterations,
+      center: [innerWidth / 2, innerHeight / 2]
+    }),
+        _useNetwork2 = _slicedToArray(_useNetwork, 2),
+        nodes = _useNetwork2[0],
+        links = _useNetwork2[1];
+    var theme = core.useTheme();
+    var getNodeColor = useNodeColor(nodeColor);
+    var getBorderColor = colors.useInheritedColor(nodeBorderColor, theme);
+    var getLinkThickness = useLinkThickness(linkThickness);
+    var getLinkColor = colors.useInheritedColor(linkColor, theme);
+    React.useEffect(function () {
+      canvasEl.current.width = outerWidth * pixelRatio;
+      canvasEl.current.height = outerHeight * pixelRatio;
+      var ctx = canvasEl.current.getContext('2d');
+      ctx.scale(pixelRatio, pixelRatio);
+      ctx.fillStyle = theme.background;
+      ctx.fillRect(0, 0, outerWidth, outerHeight);
+      ctx.translate(margin.left, margin.top);
+      layers.forEach(function (layer) {
+        if (layer === 'links') {
+          links.forEach(function (link) {
+            ctx.strokeStyle = getLinkColor(link);
+            ctx.lineWidth = getLinkThickness(link);
+            ctx.beginPath();
+            ctx.moveTo(link.source.x, link.source.y);
+            ctx.lineTo(link.target.x, link.target.y);
+            ctx.stroke();
+          });
+        } else if (layer === 'nodes') {
+          nodes.forEach(function (node) {
+            ctx.fillStyle = getNodeColor(node);
+            ctx.beginPath();
+            ctx.arc(node.x, node.y, node.radius, 0, 2 * Math.PI);
+            ctx.fill();
+            if (nodeBorderWidth > 0) {
+              ctx.strokeStyle = getBorderColor(node);
+              ctx.lineWidth = nodeBorderWidth;
               ctx.stroke();
-            });
-          } else if (layer === 'nodes') {
-            nodes.forEach(function (node) {
-              ctx.fillStyle = getNodeColor(node);
-              ctx.beginPath();
-              ctx.arc(node.x, node.y, node.radius, 0, 2 * Math.PI);
-              ctx.fill();
-              if (nodeBorderWidth > 0) {
-                ctx.strokeStyle = getBorderColor(node);
-                ctx.lineWidth = nodeBorderWidth;
-                ctx.stroke();
-              }
-            });
-          } else if (typeof layer === 'function') {
-            layer(ctx, _objectSpread$3({}, props, {
-              nodes: nodes,
-              links: links
-            }));
-          }
-        });
-      }, [canvasEl, outerWidth, outerHeight, layers, theme, nodes, links, getNodeColor, nodeBorderWidth, getBorderColor, getLinkThickness, getLinkColor]);
-      return React__default.createElement("canvas", {
-        ref: canvasEl,
-        width: outerWidth * pixelRatio,
-        height: outerHeight * pixelRatio,
-        style: {
-          width: outerWidth,
-          height: outerHeight,
-          cursor: isInteractive ? 'auto' : 'normal'
+            }
+          });
+        } else if (typeof layer === 'function') {
+          layer(ctx, _objectSpread2(_objectSpread2({}, props), {}, {
+            nodes: nodes,
+            links: links
+          }));
         }
       });
-    };
-    NetworkCanvas.propTypes = NetworkCanvasPropTypes;
-    NetworkCanvas.defaultProps = NetworkCanvasDefaultProps;
-    var NetworkCanvas$1 = core.withContainer(NetworkCanvas);
+    }, [canvasEl, outerWidth, outerHeight, layers, theme, nodes, links, getNodeColor, nodeBorderWidth, getBorderColor, getLinkThickness, getLinkColor]);
+    return React__default.createElement("canvas", {
+      ref: canvasEl,
+      width: outerWidth * pixelRatio,
+      height: outerHeight * pixelRatio,
+      style: {
+        width: outerWidth,
+        height: outerHeight,
+        cursor: isInteractive ? 'auto' : 'normal'
+      }
+    });
+  };
+  NetworkCanvas.defaultProps = NetworkCanvasDefaultProps;
+  var NetworkCanvas$1 = core.withContainer(NetworkCanvas);
 
-    function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-    var ResponsiveNetworkCanvas = function ResponsiveNetworkCanvas(props) {
-      return React__default.createElement(core.ResponsiveWrapper, null, function (_ref) {
-        var width = _ref.width,
-            height = _ref.height;
-        return React__default.createElement(NetworkCanvas$1, _extends$1({
-          width: width,
-          height: height
-        }, props));
-      });
-    };
+  var ResponsiveNetworkCanvas = function ResponsiveNetworkCanvas(props) {
+    return React__default.createElement(core.ResponsiveWrapper, null, function (_ref) {
+      var width = _ref.width,
+          height = _ref.height;
+      return React__default.createElement(NetworkCanvas$1, Object.assign({
+        width: width,
+        height: height
+      }, props));
+    });
+  };
 
-    exports.Network = Network$1;
-    exports.NetworkCanvas = NetworkCanvas$1;
-    exports.NetworkCanvasDefaultProps = NetworkCanvasDefaultProps;
-    exports.NetworkCanvasPropTypes = NetworkCanvasPropTypes;
-    exports.NetworkDefaultProps = NetworkDefaultProps;
-    exports.NetworkPropTypes = NetworkPropTypes;
-    exports.ResponsiveNetwork = ResponsiveNetwork;
-    exports.ResponsiveNetworkCanvas = ResponsiveNetworkCanvas;
-    exports.useLinkThickness = useLinkThickness;
-    exports.useNetwork = useNetwork;
-    exports.useNodeColor = useNodeColor;
+  exports.Network = Network$1;
+  exports.NetworkCanvas = NetworkCanvas$1;
+  exports.NetworkCanvasDefaultProps = NetworkCanvasDefaultProps;
+  exports.NetworkCanvasPropTypes = NetworkCanvasPropTypes;
+  exports.NetworkDefaultProps = NetworkDefaultProps;
+  exports.NetworkPropTypes = NetworkPropTypes;
+  exports.ResponsiveNetwork = ResponsiveNetwork;
+  exports.ResponsiveNetworkCanvas = ResponsiveNetworkCanvas;
+  exports.useLinkThickness = useLinkThickness;
+  exports.useNetwork = useNetwork;
+  exports.useNodeColor = useNodeColor;
 
-    Object.defineProperty(exports, '__esModule', { value: true });
+  Object.defineProperty(exports, '__esModule', { value: true });
 
 })));
+//# sourceMappingURL=nivo-network.umd.js.map

index.d.ts

@@ -80,3 +80,5 @@ /*
 
-    export interface NetworkSvgProps extends NetworkProps, MotionProps {}
+    export interface NetworkSvgProps extends NetworkProps, MotionProps {
+        role?: string
+    }
 
@@ -83,0 +85,0 @@ export class Network extends React.Component<NetworkSvgProps & Dimensions> {}

package.json

 {
   "name": "@nivo/network",
-  "version": "0.62.0",
+  "version": "0.63.0",
   "license": "MIT",
@@ -20,3 +20,3 @@ "author": {
   "main": "./dist/nivo-network.cjs.js",
-  "module": "./dist/nivo-network.esm.js",
+  "module": "./dist/nivo-network.es.js",
   "files": [
@@ -29,5 +29,5 @@ "README.md",
   "dependencies": {
-    "@nivo/colors": "0.62.0",
-    "@nivo/core": "0.62.0",
-    "@nivo/tooltip": "0.62.0",
+    "@nivo/colors": "0.63.0",
+    "@nivo/core": "0.63.0",
+    "@nivo/tooltip": "0.63.0",
     "d3-force": "^2.0.1",
@@ -44,3 +44,3 @@ "lodash": "^4.17.11",
   },
-  "gitHead": "a98a072c4fe5339457d26f396d032dfc302187bc"
+  "gitHead": "defc453433d8e6767ba3d612cce0d05c119ec5ed"
 }

No alert changes

Improved metrics

Total package byte prevSize

249454

increased by189.95%

Number of package files

10

increased by42.86%

Lines of code

2126

increased by10.67%

Worsened metrics

Number of downloads

3131

decreased by-57.06%

Dependency changes

• + Added@nivo/colors@0.63.0(transitive)

• + Added@nivo/core@0.63.0(transitive)

• + Added@nivo/tooltip@0.63.0(transitive)

• + Addedreact-spring@8.0.27(transitive)

• - Removed@nivo/colors@0.62.0(transitive)

• Updated@nivo/colors@0.63.0

• Updated@nivo/core@0.63.0

• Updated@nivo/tooltip@0.63.0