react-d3-graph - npm Package Compare versions

Comparing version 2.3.0 to 2.4.0

CHANGELOG.md

 # Change Log
 
+## [2.4.0](https://github.com/danielcaldas/react-d3-graph/tree/2.4.0)
+
+[Full Changelog](https://github.com/danielcaldas/react-d3-graph/compare/2.3.0...2.4.0)
+
+**Special announcement:**
+
+-   After https://github.com/DefinitelyTyped/DefinitelyTyped/pull/42240 being merged thanks to @hrngoode `react-d3-graph` is not available on [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) in case you use TypeScript. 🎉 🎉 🎉
+
+**Implemented enhancements:**
+
+-   Make link end marker's width and height configurable [\#238](https://github.com/danielcaldas/react-d3-graph/issues/238)
+-   Avoid flashing graph when drag&drop node [\#237](https://github.com/danielcaldas/react-d3-graph/issues/237)
+-   Make `node.renderLabel` available at node level [\#192](https://github.com/danielcaldas/react-d3-graph/issues/192)
+
+**Sandbox & Documentation**
+
+-   Anchored links **per each configuration property** starting on version 2.4.0
+-   Deleting node is sandbox breaks the demo if the number of nodes reaches 0 [\#287](https://github.com/danielcaldas/react-d3-graph/issues/287)
+
+**Fixed bugs:**
+
+-   Collapsible node with no links errors out on click [\#292](https://github.com/danielcaldas/react-d3-graph/issues/292)
+-   Deleting node is sandbox breaks the demo if the number of nodes reaches 0 [\#287](https://github.com/danielcaldas/react-d3-graph/issues/287)
+-   onNodePositionChange doesn't always trigger [\#264](https://github.com/danielcaldas/react-d3-graph/issues/264)
+-   Custom node example is not loading on the sandbox [\#252](https://github.com/danielcaldas/react-d3-graph/issues/252)
+-   Not passing data.links breaks the library while it should throw a custom error [\#211](https://github.com/danielcaldas/react-d3-graph/issues/211)
+
+**Closed issues:**
+
+-   automaticRearrangeAfterDropNode - play button from live demo [\#261](https://github.com/danielcaldas/react-d3-graph/issues/261)
+-   Improve live example by replacing all window.alerts by toasts or other non blocking alerts [\#241](https://github.com/danielcaldas/react-d3-graph/issues/241)
+-   Add tooltips to sandbox playground configs [\#239](https://github.com/danielcaldas/react-d3-graph/issues/239)
+-   Make use of jest `.toMatchSnapshot` in library unit tests [\#236](https://github.com/danielcaldas/react-d3-graph/issues/236)
+-   link.type only can make effect in global [\#234](https://github.com/danielcaldas/react-d3-graph/issues/234)
+-   Node drag and drop methods [\#204](https://github.com/danielcaldas/react-d3-graph/issues/204)
+
+**Merged pull requests:**
+
+-   Chore: Misc bug bix travis node upgrade [\#305](https://github.com/danielcaldas/react-d3-graph/pull/305) ([danielcaldas](https://github.com/danielcaldas))
+-   Fix error on collapse for node with no links [\#293](https://github.com/danielcaldas/react-d3-graph/pull/293) ([vsramanujan](https://github.com/vsramanujan))
+-   Stop node removal when node count reaches 1 [\#288](https://github.com/danielcaldas/react-d3-graph/pull/288) ([pushpinder107](https://github.com/pushpinder107))
+-   Docs: Added missing event to \<Graph /\> [\#286](https://github.com/danielcaldas/react-d3-graph/pull/286) ([mknepprath](https://github.com/mknepprath))
+-   Fix typos [\#279](https://github.com/danielcaldas/react-d3-graph/pull/279) ([pushpinder107](https://github.com/pushpinder107))
+-   Adding a parameter in config to be able to disable link force [\#278](https://github.com/danielcaldas/react-d3-graph/pull/278) ([antoninklopp](https://github.com/antoninklopp))
+-   node_label changes enabled local param for renderLabel [\#267](https://github.com/danielcaldas/react-d3-graph/pull/267) ([gopherine](https://github.com/gopherine))
+-   fix/remove delta validation for onNodePositionChange [\#266](https://github.com/danielcaldas/react-d3-graph/pull/266) ([Kav91](https://github.com/Kav91))
+-   Update docs for automaticRearrangeAfterDropNode prop [\#262](https://github.com/danielcaldas/react-d3-graph/pull/262) ([danielcaldas](https://github.com/danielcaldas))
+-   Bug/custom nodes sandbox additions [\#256](https://github.com/danielcaldas/react-d3-graph/pull/256) ([danielcaldas](https://github.com/danielcaldas))
+-   Pass the event of onClickGraph to the prop [\#254](https://github.com/danielcaldas/react-d3-graph/pull/254) ([jameskfry](https://github.com/jameskfry))
+-   local link type added [\#247](https://github.com/danielcaldas/react-d3-graph/pull/247) ([gopherine](https://github.com/gopherine))
+-   Fix: data links error [\#246](https://github.com/danielcaldas/react-d3-graph/pull/246) ([mecm1993](https://github.com/mecm1993))
+-   Making Marker height and width configurable [\#245](https://github.com/danielcaldas/react-d3-graph/pull/245) ([SachinVarghese](https://github.com/SachinVarghese))
+-   Feature/better sandbox alerts [\#244](https://github.com/danielcaldas/react-d3-graph/pull/244) ([danielcaldas](https://github.com/danielcaldas))
+-   Fix: Update test with .toMatchSnapshot to test UI [\#243](https://github.com/danielcaldas/react-d3-graph/pull/243) ([nguyenami](https://github.com/nguyenami))
+-   Prevent graph flashing when dragging and dropping nodes [\#242](https://github.com/danielcaldas/react-d3-graph/pull/242) ([danielcaldas](https://github.com/danielcaldas))
+-   Feature/sandbox generate tooltips from jsdoc [\#240](https://github.com/danielcaldas/react-d3-graph/pull/240) ([danielcaldas](https://github.com/danielcaldas))
+
 ## [2.3.0](https://github.com/danielcaldas/react-d3-graph/tree/2.3.0)
@@ -4,0 +61,0 @@

notes.txt

 github changelog generator token
-export CHANGELOG_GITHUB_TOKEN="1f70ca9b67db005c5bf4d47504af2f89e4b52261"
+export CHANGELOG_GITHUB_TOKEN="65cee49070ecdb8672b4d5b9db08b09038172f52"
 
 

package.json

 {
   "name": "react-d3-graph",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "React component to build interactive and configurable graphs with d3 effortlessly",
@@ -12,3 +12,3 @@ "author": "Daniel Caldas",
     "dist:rd3g": "rm -rf dist/ && webpack --config webpack.config.dist.js -p --display-modules --optimize-minimize",
-    "dist:sandbox": "webpack --config webpack.config.js -p",
+    "dist:sandbox": "npm run generate:tooltips && webpack --config webpack.config.js -p",
     "dist:transpile": "./node_modules/@babel/cli/bin/babel.js -d lib src",
@@ -22,2 +22,3 @@ "dist": "npm run check && npm-run-all --parallel dist:*",
     "functional": "export CYPRESS_SANDBOX_URL=http://127.0.0.1:8888 && cypress run",
+    "generate:tooltips": "./node_modules/.bin/jsdoc -X ./src/components/graph/graph.config.js > ./tools/graph-config-jsdoc.json && cd tools && node tooltips-docs-generator.js > ../sandbox/graph-config-tooltips.js",
     "lint:fix": "node_modules/eslint/bin/eslint.js --config=.eslintrc.js --fix \"src/**/*.js*\" \"sandbox/**/*.js*\"",
@@ -54,3 +55,3 @@ "lint:src": "node_modules/eslint/bin/eslint.js --config=.eslintrc.js \"src/**/*.js*\" \"sandbox/**/*.js*\"",
     "css-loader": "2.0.2",
-    "cypress": "3.4.1",
+    "cypress": "3.8.3",
     "d3": "^5.5.0",
@@ -68,8 +69,9 @@ "documentation": "12.1.2",
     "html-webpack-plugin": "2.30.1",
-    "http-server": "0.11.1",
+    "http-server": "^0.12.1",
     "husky": "3.0.5",
     "jest": "24.9.0",
+    "jsdoc": "^3.6.3",
     "lint-staged": "9.2.5",
     "npm-run-all": "4.1.5",
-    "prettier": "1.18.2",
+    "prettier": "1.19.1",
     "query-string": "6.8.3",
@@ -82,5 +84,6 @@ "react": "^16.4.1",
     "react-test-renderer": "16.9.0",
+    "react-toastify": "5.5.0",
     "style-loader": "0.18.2",
-    "typescript": "3.6.2",
-    "webpack": "4.28.1",
+    "typescript": "3.8.3",
+    "webpack": "4.41.6",
     "webpack-bundle-analyzer": "^3.0.3",
@@ -114,3 +117,6 @@ "webpack-cli": "3.3.8",
     }
+  },
+  "dependencies": {
+    "react-tooltip": "^3.11.1"
   }
 }

README.md

 # react-d3-graph · [![Build Status](https://travis-ci.org/danielcaldas/react-d3-graph.svg?branch=master&style=flat-square)](https://travis-ci.org/danielcaldas/react-d3-graph)
 
-[![npm version](https://img.shields.io/npm/v/react-d3-graph.svg?style=flat-square)](https://www.npmjs.com/package/react-d3-graph) [![probot enabled](https://img.shields.io/badge/probot:stale-enabled-yellow.svg?longCache=true&style=flat-square)](https://probot.github.io/) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![npm version](https://img.shields.io/npm/v/react-d3-graph.svg?style=flat-square)](https://www.npmjs.com/package/react-d3-graph) [![npm](https://img.shields.io/npm/dw/react-d3-graph.svg?style=flat-square)](https://www.npmjs.com/package/react-d3-graph)
+[![npm](https://img.shields.io/npm/dt/react-d3-graph.svg?style=flat-square)](https://www.npmjs.com/package/react-d3-graph) [![probot enabled](https://img.shields.io/badge/probot:stale-enabled-yellow.svg?longCache=true&style=flat-square)](https://probot.github.io/) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 
-[![npm](https://img.shields.io/npm/dw/react-d3-graph.svg?style=flat-square)](https://www.npmjs.com/package/react-d3-graph)
-[![npm](https://img.shields.io/npm/dt/react-d3-graph.svg?style=flat-square)](https://www.npmjs.com/package/react-d3-graph)
-
 [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://paypal.me/DanielCaldas321)
@@ -30,4 +28,4 @@
 -   [custom node dataset](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=custom-node) - sample config with custom views.
--   [marvel dataset!](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=marvel) - sample config with directed collapsible graph and custom svg nodes.
--   [static dataset!](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=static) - small sample config statically positioned nodes.
+-   [marvel dataset](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=marvel) - sample config with directed collapsible graph and custom svg nodes.
+-   [static dataset](https://goodguydaniel.com/react-d3-graph/sandbox/index.html?data=static) - small sample config statically positioned nodes.
 
@@ -53,3 +51,3 @@ Do you want to visualize your own data set on the live sandbox? Just submit a PR! You're welcome 😁
 
-**Note** that `react` and `d3` are [peer-dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/), this means that the responsability to install them is delegated to the client. This will give you a bigger flexibility on what versions of `d3` and `react` you want to consume, you just need to make sure that you are compliant with the range of versions that `react-d3-graph` is compatible with. If you install `react-d3-graph` without first installing `d3` and `react` you might be propmt the following warnings:
+**Note** that `react` and `d3` are [peer-dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/), this means that the responsibility to install them is delegated to the client. This will give you more flexibility on what versions of `d3` and `react` you want to consume, you just need to make sure that you are compliant with the range of versions that `react-d3-graph` is compatible with. If you install `react-d3-graph` without first installing `d3` and `react` you might see the following warnings:
 
@@ -137,2 +135,3 @@ > npm WARN react-d3-graph@2.0.1 requires a peer of d3@^5.5.0 but none is installed. You must install peer dependencies yourself.
     onClickNode={onClickNode}
+    onDoubleClickNode={onDoubleClickNode}
     onRightClickNode={onRightClickNode}
@@ -152,13 +151,13 @@ onClickGraph={onClickGraph}
 
-Contributions are welcome fell free to submit new ideas/features, just open an issue or send me an email or something. If you are more a _hands on_ person, just submit a pull request. Before jumping into coding, please take at the contribution guidelines [CONTRIBUTING.md](https://github.com/danielcaldas/react-d3-graph/blob/master/CONTRIBUTING.md).
+Contributions are welcome, feel free to submit new ideas/features, just open an issue or send me an email or something. If you are more a _hands on_ person, just submit a pull request. Before jumping into coding, please take a look at the contribution guidelines [CONTRIBUTING.md](https://github.com/danielcaldas/react-d3-graph/blob/master/CONTRIBUTING.md).
 
 To run react-d3-graph in development mode you just need to run `npm run dev` and the interactive sandbox will reload with the changes to the library code, that way you can test your changes not only through unit test but also through a real life example. It's that simple. The development workflow usually should follow the steps:
 
--   Create a branch prefixed with `fix/` for bug fixes, `feature/` for new features, `chore/` or `refactor/` for refactoring or tolling and CI/CD related tasks.
+-   Create a branch prefixed with `fix/` for bug fixes, `feature/` for new features, `chore/` or `refactor/` for refactoring or tooling and CI/CD related tasks.
 -   Make sure you are up to date running `npm install`.
 -   Run `npm run dev`.
--   Do you changes inside the folder `src` and the interactive sandbox consumes your changes in real time
+-   Make you changes inside the folder `src` and the interactive sandbox consumes your changes in real time
     with webpack-dev-server.
 -   You can run tests locally with `npm run test` (for unit tests) or `npm run functional:local` for e2e tests.
--   After you're done open the Pull Request and describe the changes you've made.
+-   After you're done, open the Pull Request and describe the changes you've made.
 
@@ -165,0 +164,0 @@ ## Alternatives (Not what you where looking for?)

src/components/graph/collapse.helper.js

@@ -9,2 +9,3 @@ /**
 import { getId } from "./graph.helper";
+import { logError } from "../../utils";
 
@@ -101,3 +102,3 @@ /**
 function getTargetLeafConnections(rootNodeId, linksMatrix = {}, { directed }) {
-    const rootConnectionsNodesIds = Object.keys(linksMatrix[rootNodeId]);
+    const rootConnectionsNodesIds = linksMatrix[rootNodeId] ? Object.keys(linksMatrix[rootNodeId]) : [];
 
@@ -130,2 +131,14 @@ return rootConnectionsNodesIds.reduce((leafConnections, target) => {
 function isNodeVisible(nodeId, nodes, linksMatrix) {
+    const node = nodes[nodeId];
+
+    if (!node) {
+        if (process.env.NODE_ENV === "development") {
+            logError(
+                "graph/collapse.helper",
+                `Trying to check if node ${nodeId} is visible but its not present in nodes: `,
+                nodes
+            );
+        }
+        return false;
+    }
     if (nodes[nodeId]._orphan) {
@@ -132,0 +145,0 @@ return true;

src/components/graph/graph.builder.js

@@ -60,5 +60,5 @@ /**
     const y2 = nodes?.[target]?.y || 0;
+    const type = link.type || config.link.type;
+    const d = buildLinkPathDefinition({ source: { x: x1, y: y1 }, target: { x: x2, y: y2 } }, type);
 
-    const d = buildLinkPathDefinition({ source: { x: x1, y: y1 }, target: { x: x2, y: y2 } }, config.link.type);
-
     let mainNodeParticipates = false;
@@ -210,3 +210,3 @@
         overrideGlobalViewGenerator: !node.viewGenerator && node.svg,
-        renderLabel: config.node.renderLabel,
+        renderLabel: node.renderLabel || config.node.renderLabel,
         size: nodeSize * t,
@@ -213,0 +213,0 @@ stroke,

src/components/graph/graph.config.js

 /**
  * <div style="text-align: right;"><i>This is certainly the only extra piece of documentation that you will ever need</i></div>
- * <br/><br/>
+ * </br></br>
  * Here you can consult a detailed description of each graph configurable property as well as the default values
  * of those properties.
  *
- * **Note about performance**<br/>
+ * <b>Note about performance</b></br>
  * Some of the properties have a major performance impact when toggled while rendering graphs of medium or large dimensions (hundreds or thousand of elements).
- * These properties are marked with 🚅🚅🚅.<br/>
- * ⭐ **tip** *to achieve smoother interactions you may want to provide a toggle to set **staticGraph** or (better) **staticGraphWithDragAndDrop** to **true** *<br/>
- * <br/>
- * **Note about granularity**<br/>
- * Some of the properties listed in the {@link #config-node|Node section} are marked with 🔍🔍🔍. This means that this properties
+ * These properties are marked with 🚅🚅🚅.</br>
+ * ⭐ <b>tip</b> <i>to achieve smoother interactions you may want to provide a toggle to set <b>staticGraph</b> or (better) <b>staticGraphWithDragAndDrop</b> to <b>true</b></i></br>
+ * </br>
+ * <b>Note about granularity</b></br>
+ * Some of the properties listed in the <a href="#config-node">Node section</a> are marked with 🔍🔍🔍. This means that this properties
  * have a higher level of granularity. These properties can be defined in the graph payload at a node level. (sample payload below)
@@ -29,3 +29,3 @@ * ```javascript
  *
- * <br/>
+ * </br>
  *
@@ -37,20 +37,24 @@ * - <a href="#config-global">Graph global configurations</a>
  *
- * <br/>
+ * </br>
  *
  * <h2 id="config-global"><a href="#config-global">#</a>  Graph global configurations</h2>
- * @param {boolean} [automaticRearrangeAfterDropNode=false] - 🚅🚅🚅 when true performing a node drag and drop should automatically
- * rearrange all nodes positions based on new position of dragged node (note: **staticGraph** should be false).
- * @param {boolean} [collapsible=false] - 🚅🚅🚅 Allow leaf neighbors nodes to be collapsed (folded), this will allow users to clear the way out and focus on the parts of the graph that really matter.
- * To see an example of this behavior you can access this sandbox link that has a specific set up to experiment this feature. **NOTE**: At this moment
- * nodes without connections (orphan nodes) are not rendered when this property is activated (see [react-d3-graph/issues/#129](https://github.com/danielcaldas/react-d3-graph/issues/129)).
- * <br/>
+ * @param {boolean} [automaticRearrangeAfterDropNode=false] - <a id="automatic-rearrange-after-drop-node" href="#automatic-rearrange-after-drop-node">🔗</a> 🚅🚅🚅 when true performing a node drag and drop should automatically
+ * rearrange all nodes positions based on new position of dragged node (note: <b>staticGraph</b> should be false). A few notes on this property:
+ * <ul>
+ * <li><b>automaticRearrangeAfterDropNode</b> needs to be set before the first graph render. Only the first set value will take effect.</li>
+ * <li><b>automaticRearrangeAfterDropNode</b> won't work together with <b>nodeHighlightBehavior</b> (currently a known limitation, to be address in the future <a href="https://github.com/danielcaldas/react-d3-graph/issues/261" target="_blank">GitHub issue #261</a>).</li>
+ * </ul>
+ * @param {boolean} [collapsible=false] - <a id="collapsible" href="#collapsible">🔗</a> 🚅🚅🚅 Allow leaf neighbors nodes to be collapsed (folded), this will allow users to clear the way out and focus on the parts of the graph that really matter.
+ * To see an example of this behavior you can access this sandbox link that has a specific set up to experiment this feature. <b>NOTE</b>: At this moment
+ * nodes without connections (orphan nodes) are not rendered when this property is activated (see <a target="_blank" href="https://github.com/danielcaldas/react-d3-graph/issues/129">GitHub issue #129</a>).
+ * </br>
  * <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-collapsible.gif?raw=true" width="820" height="480"/>
- * @param {boolean} [directed=false] - This property makes react-d3-graph handle your graph as a directed graph. It will
+ * @param {boolean} [directed=false] - <a id="directed" href="#directed">🔗</a> This property makes react-d3-graph handle your graph as a directed graph. It will
  * out of the box provide the look and feel of a directed graph and add directional semantic to links. You can see a sample in the image below.
- * <br/>
+ * </br>
  * <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-directed.gif?raw=true" width="820" height="480"/>
- * @param {number} [focusZoom=1] - zoom that will be applied when the graph view is focused in a node. Its value must be between
- * *minZoom* and *maxZoom*. If the specified *focusZoom* is out of this range, *minZoom* or *maxZoom* will be applied instead.
- * **NOTE:** This animation is not trigger by default. In order to trigger it you need to pass down to `react-d3-graph` the
- * node that you want to focus via prop `focusedNodeId` along side with nodes and links:
+ * @param {number} [focusZoom=1] - <a id="focus-zoom" href="#focus-zoom">🔗</a> zoom that will be applied when the graph view is focused in a node. Its value must be between
+ * <i>minZoom</i> and <i>maxZoom</i>. If the specified <i>focusZoom</i> is out of this range, <i>minZoom</i> or <i>maxZoom</i> will be applied instead.</br>
+ * <b>NOTE</b>: This animation is not trigger by default. In order to trigger it you need to pass down to <code>react-d3-graph</code> the
+ * node that you want to focus via prop <code>focusedNodeId</code> along side with nodes and links:
  *
@@ -67,56 +71,58 @@ * ```javascript
  *
- * @param {number} [focusAnimationDuration=0.75] - duration (in seconds) for the animation that takes place when focusing the graph on a node.
- * @param {number} [height=400] - the height of the (svg) area where the graph will be rendered.
- * @param {boolean} [nodeHighlightBehavior=false] - 🚅🚅🚅 when user mouse hovers a node that node and adjacent common
- * connections will be highlighted (depending on the *highlightDegree* value). All the remaining nodes and links assume opacity value equal to **highlightOpacity**.
- * @param {boolean} [linkHighlightBehavior=false] - 🚅🚅🚅 when the user mouse hovers some link that link and the correspondent nodes will be highlighted, this is a similar behavior
- * to *nodeHighlightBehavior* but for links <small>(just for historical reference this property was introduced in **v1.0.0**)</small>.
- * @param {number} [highlightDegree=1] - **Possible values: 0, 1 or 2**. This value represents the range of the
- * highlight behavior when some node is highlighted. If the value is set to **0** only the selected node will be
- * highlighted. If the value is set to **1** the selected node and his 1st degree connections will be highlighted. If
- * the value is set to **2** the selected node will be highlighted as well as the 1st and 2nd common degree connections.
- * @param {number} [highlightOpacity=1] - this value is used to highlight nodes in the network. The lower
- * the value the more the less highlighted nodes will be visible (related to *nodeHighlightBehavior*).
- * @param {number} [maxZoom=8] - max zoom that can be performed against the graph.
- * @param {number} [minZoom=0.1] - min zoom that can be performed against the graph.
- * @param {boolean} [panAndZoom=false] - 🚅🚅🚅 pan and zoom effect when performing zoom in the graph,
- * a similar functionality may be consulted {@link https://bl.ocks.org/mbostock/2a39a768b1d4bc00a09650edef75ad39|here}.
- * @param {boolean} [staticGraph=false] - when setting this value to true the graph will be completely static, thus
+ * @param {number} [focusAnimationDuration=0.75] - <a id="focus-animation-duration" href="#focus-animation-duration">🔗</a> duration (in seconds) for the animation that takes place when focusing the graph on a node.
+ * @param {number} [height=400] - <a id="height" href="#height">🔗</a> the height of the (svg) area where the graph will be rendered.
+ * @param {boolean} [nodeHighlightBehavior=false] - <a id="node-highlight-behavior" href="#node-highlight-behavior">🔗</a> 🚅🚅🚅 when user mouse hovers a node that node and adjacent common
+ * connections will be highlighted (depending on the <i>highlightDegree</i> value). All the remaining nodes and links assume opacity value equal to <b>highlightOpacity</b>.
+ * @param {boolean} [linkHighlightBehavior=false] - <a id="link-highlight-behavior" href="#link-highlight-behavior">🔗</a> 🚅🚅🚅 when the user mouse hovers some link that link and the correspondent nodes will be highlighted, this is a similar behavior
+ * to <i>nodeHighlightBehavior</i> but for links <small>(just for historical reference this property was introduced in <a target="_blank" href="https://github.com/danielcaldas/react-d3-graph/releases/tag/1.0.0">v1.0.0</a>)</small>.
+ * @param {number} [highlightDegree=1] - <a id="highlight-degree" href="#highlight-degree">🔗</a> <b>Possible values: 0, 1 or 2</b>. This value represents the range of the
+ * highlight behavior when some node is highlighted. If the value is set to <b>0</b> only the selected node will be
+ * highlighted. If the value is set to <b>1</b> the selected node and his 1st degree connections will be highlighted. If
+ * the value is set to <b>2</b> the selected node will be highlighted as well as the 1st and 2nd common degree connections.
+ * @param {number} [highlightOpacity=1] - <a id="highlight-opacity" href="#highlight-opacity">🔗</a> this value is used to highlight nodes in the network. The lower
+ * the value the more the less highlighted nodes will be visible (related to <i>nodeHighlightBehavior</i>).
+ * @param {number} [maxZoom=8] - <a id="max-zoom" href="#max-zoom">🔗</a> max zoom that can be performed against the graph.
+ * @param {number} [minZoom=0.1] - <a id="min-zoom" href="#min-zoom">🔗</a> min zoom that can be performed against the graph.
+ * @param {boolean} [panAndZoom=false] - <a id="pan-and-zoom" href="#pan-and-zoom">🔗</a> 🚅🚅🚅 pan and zoom effect when performing zoom in the graph,
+ * a similar functionality may be consulted <a target="_blank" href="https://bl.ocks.org/mbostock/2a39a768b1d4bc00a09650edef75ad39">here</a>.
+ * @param {boolean} [staticGraph=false] - <a id="static-graph" href="#static-graph">🔗</a> when setting this value to true the graph will be completely static, thus
  * all forces and drag events upon nodes will produce not effect. Note that, if this value is true the nodes will be
- * rendered with the initial provided **x and y coordinates** (links positions will be automatically set
+ * rendered with the initial provided <b>x and y coordinates</b> (links positions will be automatically set
  * from the given nodes positions by rd3g), no coordinates will be calculated by rd3g or subjacent d3 modules.
- * @param {boolean} [staticGraphWithDragAndDrop] - exactly the same as above `staticGraph`, but it will allow users to drag&drop nodes.
- * **Note**: If `staticGraph` is set to `true`, then `staticGraphWithDragAndDrop` will not produce the desired behaviour, make sure
- * to set only one of them to `true`.
- * @param {number} [width=800] - the width of the (svg) area where the graph will be rendered.
- * <br/>
+ * @param {boolean} [staticGraphWithDragAndDrop] - <a id="static-graph-with-drag-and-drop" href="#static-graph-with-drag-and-drop">🔗</a> exactly the same as above <code>staticGraph</code>, but it will allow users to drag&drop nodes.
+ * <b>Note</b>: If <code>staticGraph</code> is set to <code>true</code>, then <code>staticGraphWithDragAndDrop</code> will not produce the desired behaviour, make sure
+ * to set only one of them to <code>true</code>.
+ * @param {number} [width=800] - <a id="width" href="#width">🔗</a> the width of the (svg) area where the graph will be rendered.
+ * </br>
  * @param {Object} d3 d3 object is explained in next section. ⬇️
  * <h2 id="config-d3"><a href="#config-d3">#</a> d3 level configurations</h2>
- * @param {number} [d3.alphaTarget=0.05] - [see d3-force simulation.alphaTarget](https://github.com/d3/d3-force#simulation_alphaTarget)
- * @param {number} [d3.gravity=-100] - this will define how close nodes are to each other ([see d3 reference for forces](https://github.com/d3/d3-force#forces)).
+ * @param {number} [d3.alphaTarget=0.05] - <a id="d3-alpha-target" href="#d3-alpha-target">🔗</a> <a target="_blank" href="https://github.com/d3/d3-force#simulation_alphaTarget">see d3-force simulation.alphaTarget</a>
+ * @param {number} [d3.gravity=-100] - <a id="d3-gravity" href="#d3-gravity">🔗</a> this will define how close nodes are to each other <a target="_blank" href="https://github.com/d3/d3-force#forces">see d3 reference for forces</a>.
  *  - If value is positive, nodes will attract each other.
  *  - If value is negative, nodes will repel each other. Most of the times this is what we want, so nodes don"t overlap.
- * @param {number} [d3.linkLength=100] - the length of each link from the center of the nodes it joins.
- * @param {number} [d3.linkStrength=1] - [see d3-force link.strength](https://github.com/d3/d3-force#link_strength)
- * <br/>
+ * @param {number} [d3.linkLength=100] - <a id="d3-link-length" href="#d3-link-length">🔗</a> the length of each link from the center of the nodes it joins.
+ * @param {number} [d3.linkStrength=1] - <a id="d3-link-strength" href="#d3-link-strength">🔗</a> <a target="_blank" href="https://github.com/d3/d3-force#link_strength">see d3-force link.strength</a>
+ * @param {number} [d3.disableLinkForce=false] - <a id="d3-disable-link-force" href="#d3-disable-link-force">🔗</a> ⚠️🧪EXPERIMENTAL🧪⚠️ it completely disables d3 force link and simulation to re-trigger so that one can obtain
+ * precise render of node positions as described by the author <a target="_blank" href="https://github.com/antoninklopp">@antoninklopp</a> in <a target="_blank" href="https://github.com/danielcaldas/react-d3-graph/pull/278">the Pull Request description</a>.
+ * </br>
  * @param {Object} node node object is explained in next section. ⬇️
  * <h2 id="config-node"><a href="#config-node">#</a> Node level configurations</h2>
- * @param {string} [node.color="#d3d3d3"] - 🔍🔍🔍 this is the color that will be applied to the node if no **color property**
- * is found inside the node itself (yes **you can pass a property "color" inside the node and that color will override the
- * this default one**).
- * @param {string} [node.fontColor="black"] - 🔍🔍🔍 fill color for node"s <text> svg label.
- * @param {number} [node.fontSize=8] - {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control|font-size}
+ * @param {string} [node.color="#d3d3d3"] - <a id="node-color" href="#node-color">🔗</a> 🔍🔍🔍 this is the color that will be applied to the node if no <b>color property</b></br>
+ * is found inside the node itself (yes <b>you can pass a property "color" inside</b></br>
+ * <b>the node and that color will override the this default one</b>).
+ * @param {string} [node.fontColor="black"] - <a id="node-font-color" href="#node-font-color">🔗</a> 🔍🔍🔍 fill color for node"s <text> svg label.
+ * @param {number} [node.fontSize=8] - <a id="node-font-size" href="#node-font-size">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control">font-size</a>
  * property for all nodes" labels.
- * @param {string} [node.fontWeight="normal"] - {@link https://developer.mozilla.org/en/docs/Web/CSS/font-weight?v=control|font-weight}
+ * @param {string} [node.fontWeight="normal"] - <a id="node-font-weight" href="#node-font-weight">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/font-weight?v=control">font-weight</a>
  * property for all nodes" labels.
- * @param {string} [node.highlightColor="SAME"] - color for all highlighted nodes (use string "SAME" if you
+ * @param {string} [node.highlightColor="SAME"] - <a id="node-highlight-color" href="#node-highlight-color">🔗</a> color for all highlighted nodes (use string "SAME" if you
  * want the node to keep its color in highlighted state).
- * @param {number} [node.highlightFontSize=8] - fontSize in highlighted state.
- * @param {string} [node.highlightFontWeight="normal"] - fontWeight in highlighted state.
- * @param {string} [node.highlightStrokeColor="SAME"] - strokeColor in highlighted state.
- * @param {number} [node.highlightStrokeWidth="SAME"] - strokeWidth in highlighted state.
- * @param {string|Function} [node.labelProperty="id"] - this is the node property that will be used in runtime to
- * fetch the label content. You just need to add some property (e.g. firstName) to the node payload and then set
- * node.labelProperty to be **"firstName"**. **This can also be a function!**, if you pass a function here it will be called
- * to obtain the `label` value on the fly, as a client you will receive all the node information that you passed down into react-d3-graph,
+ * @param {number} [node.highlightFontSize=8] - <a id="node-highlight-font-size" href="#node-highlight-font-size">🔗</a> fontSize in highlighted state.
+ * @param {string} [node.highlightFontWeight="normal"] - <a id="node-highlight-font-weight" href="#node-highlight-font-weight">🔗</a> fontWeight in highlighted state.
+ * @param {string} [node.highlightStrokeColor="SAME"] - <a id="node-stroke-color" href="#node-stroke-color">🔗</a> strokeColor in highlighted state.
+ * @param {number} [node.highlightStrokeWidth="SAME"] - <a id="node-stroke-width" href="#node-stroke-width">🔗</a> strokeWidth in highlighted state.
+ * @param {string|Function} [node.labelProperty="id"] - <a id="node-label-property" href="#node-label-property">🔗</a> this is the node property that will be used in runtime to</br>
+ * fetch the label content. You just need to add some property (e.g. firstName) to the node payload and then set</br>
+ * node.labelProperty to be <b>"firstName"</b>. <b>This can also be a function!</b>, if you pass a function here it will be called</br>
+ * to obtain the <code>label</code> value on the fly, as a client you will receive all the node information that you passed down into react-d3-graph,</br>
  * so the signature of the function would be:
@@ -129,18 +135,18 @@ * ```javascript
  * ```
- * Then you just need to make sure that you pass this function in the config in `config.node.labelProperty`.
- * <br/>
- * @param {string} [node.mouseCursor="pointer"] - {@link https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control|cursor}
+ * Then you just need to make sure that you pass this function in the config in <code>config.node.labelProperty</code>.
+ * </br>
+ * @param {string} [node.mouseCursor="pointer"] - <a id="node-pointer" href="#node-pointer">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control">cursor</a>
  * property for when some node is mouse hovered.
- * @param {number} [node.opacity=1] 🔍🔍🔍 - by default all nodes will have this opacity value.
- * @param {boolean} [node.renderLabel=true] - when set to false no labels will appear along side nodes in the
+ * @param {number} [node.opacity=1] - <a id="node-opacity" href="#node-opacity">🔗</a> 🔍🔍🔍 by default all nodes will have this opacity value.
+ * @param {boolean} [node.renderLabel=true] - <a id="node-render-label" href="#node-render-label">🔗</a> 🔍🔍🔍 when set to false no labels will appear along side nodes in the
  * graph.
- * @param {number} [node.size=200] - 🔍🔍🔍 defines the size of all nodes.
- * @param {string} [node.strokeColor="none"] - 🔍🔍🔍  this is the stroke color that will be applied to the node if no **strokeColor property** is found inside the node itself (yes **you can pass a property "strokeColor" inside the node and that stroke color will override this default one** ).
- * @param {number} [node.strokeWidth=1.5] 🔍🔍🔍 - the width of the all node strokes.
- * @param {string} [node.svg=""] - 🔍🔍🔍 render custom svg for nodes in alternative to **node.symbolType**. This svg can
+ * @param {number} [node.size=200] - <a id="node-size" href="#node-size">🔗</a> 🔍🔍🔍 defines the size of all nodes.
+ * @param {string} [node.strokeColor="none"] - <a id="node-stroke-color" href="#node-stroke-color">🔗</a> 🔍🔍🔍  this is the stroke color that will be applied to the node if no <b>strokeColor property</b> is found inside the node itself (yes <b>you can pass a property "strokeColor" inside the node and that stroke color will override this default one</b>).
+ * @param {number} [node.strokeWidth=1.5] - <a id="node-stroke-width" href="#node-stroke-width">🔗</a> 🔍🔍🔍 the width of the all node strokes.
+ * @param {string} [node.svg=""] - <a id="node-svg" href="#node-svg">🔗</a> 🔍🔍🔍 render custom svg for nodes in alternative to <b>node.symbolType</b>. This svg can
  * be provided as a string to either a remote svg resource or for a local one.
- * <br/>
+ * </br>
  * <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-custom-svg.gif?raw=true" width="820" height="480"/>
- * @param {string} [node.symbolType="circle"] - 🔍🔍🔍 the <span id="node-symbol-type">shape</span> of the node.
- * Use the following values under a property **type** inside each node (nodes may have different types, same as colors):
+ * @param {string} [node.symbolType="circle"] - <a id="node-symbol-type" href="#node-symbol-type">🔗</a> 🔍🔍🔍 the <a id="node-symbol-type">shape</span> of the node.
+ * Use the following values under a property <b>type</b> inside each node (nodes may have different types, same as colors):
  *   - "circle"
@@ -154,30 +160,30 @@ *   - "cross"
  *
- * **[note]** react-d3-graph will map this values to [d3 symbols](https://github.com/d3/d3-shape#symbols)
- * @param {Function} [node.viewGenerator=null] - 🔍🔍🔍 function that receives a node and returns a JSX view.
- * <br/>
+ * <b>[note]</b> react-d3-graph will map this values to <a target="_blank" href="https://github.com/d3/d3-shape#symbols">d3 symbols</a>
+ * @param {Function} [node.viewGenerator=null] - <a id="node-view-generator" href="#node-view-generator">🔗</a> 🔍🔍🔍 function that receives a node and returns a JSX view.
+ * </br>
  * @param {Object} link link object is explained in the next section. ⬇️
  * <h2 id="config-link"><a href="#config-link">#</a> Link level configurations</h2>
- * @param {string} [link.color="#d3d3d3"] - 🔍🔍🔍 the color for links
+ * @param {string} [link.color="#d3d3d3"] - <a id="link-color" href="#link-color">🔗</a> 🔍🔍🔍 the color for links
  * (from version 1.3.0 this property can be configured at link level).
- * @param {string} [link.fontColor="black"] - 🔍🔍🔍 fill color for link's <text> svg label.
- * @param {number} [link.fontSize=8] - {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control|font-size}
+ * @param {string} [link.fontColor="black"] - <a id="link-font-color" href="#link-font-color">🔗</a> 🔍🔍🔍 fill color for link's <text> svg label.
+ * @param {number} [link.fontSize=8] - <a id="link-font-size" href="#link-font-size">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control">font-size</a>
  * property for all links' labels.
- * @param {string} [link.fontWeight="normal"] - {@link https://developer.mozilla.org/en/docs/Web/CSS/font-weight?v=control|font-weight}
+ * @param {string} [link.fontWeight="normal"] - <a id="link-font-weight" href="#link-font-weight">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/font-weight?v=control">font-weight</a>
  * property for all links' labels.
- * @param {string} [link.highlightColor="#d3d3d3"] - links' color in highlight state.
+ * @param {string} [link.highlightColor="SAME"] - <a id="link-highlight-color" href="#link-highlight-color">🔗</a> links' color in highlight state, default being the same color as `link.color`.
  * <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-bend.gif?raw=true" width="820" height="480"/>
- * @param {number} [link.highlightFontSize=8] - fontSize in highlighted state.
- * @param {string} [link.highlightFontWeight="normal"] - fontWeight in highlighted state.
- * @param {string|Function} [link.labelProperty="label"] - the property that will be rendered as label within some link. Note that
- * this property needs to be passed along the link payload (along side with source and target). This property can also be a function
- * that receives the link itself as argument and returns a custom string, similarly to what happens with `node.labelProperty`.
- * @param {string} [link.mouseCursor="pointer"] - {@link https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control|cursor}
+ * @param {number} [link.highlightFontSize=8] - <a id="link-highlight-font-size" href="#link-highlight-font-size">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control">font-size</a> in highlighted state.
+ * @param {string} [link.highlightFontWeight="normal"] - <a id="link-highlight-font-weight" href="#link-highlight-font-weight">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/font-weight?v=control">font-weight</a> in highlighted state.
+ * @param {string|Function} [link.labelProperty="label"] - <a id="link-label-property" href="#link-label-property">🔗</a> the property that will be rendered as label within some link. Note that</br>
+ * this property needs to be passed along the link payload (along side with source and target). This property can also be a function</br>
+ * that receives the link itself as argument and returns a custom string, similarly to what happens with <code>node.labelProperty</code>.</br>
+ * @param {string} [link.mouseCursor="pointer"] - <a id="link-mouse-cursor" href="#link-mouse-cursor">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control">cursor</a>
  * property for when link is mouse hovered.
- * @param {number} [link.opacity=1] 🔍🔍🔍 - the default opacity value for links.
- * @param {boolean} [link.renderLabel=false] - when set to true labels will appear along side links in the
- * graph. **Note**: this will only happen of course if proper label is passed within the link, check also `link.labelProperty`.
- * <br/>
+ * @param {number} [link.opacity=1] 🔍🔍🔍 - <a href="#link-opacity" href="">🔗</a> the default opacity value for links.
+ * @param {boolean} [link.renderLabel=false] - <a id="link-render-label" href="#link-render-label">🔗</a> when set to true labels will appear along side links in the
+ * graph. <b>Note</b>: this will only happen of course if proper label is passed within the link, check also <code>link.labelProperty</code>.
+ * </br>
  * <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-link-render-label.png?raw=true" width="820" height="480"/>
- * @param {boolean} [link.semanticStrokeWidth=false] - when set to true all links will have
- * *"semantic width"*, this means that the width of the connections will be proportional to the value of each link.
+ * @param {boolean} [link.semanticStrokeWidth=false] - <a id="link-semantic-stroke-width" href="#link-semantic-stroke-width">🔗</a> when set to true all links will have
+ * <i>"semantic width"</i>, this means that the width of the connections will be proportional to the value of each link.
  * This is how link strokeWidth will be calculated:
@@ -187,3 +193,3 @@ * ```javascript
  * ```
- * @param {number} [link.strokeWidth=1.5] 🔍🔍🔍 - strokeWidth for all links. By default the actual value is obtain by the
+ * @param {number} [link.strokeWidth=1.5] - <a id="link-stroke-width" href="#link-stroke-width">🔗</a> 🔍🔍🔍 strokeWidth for all links. By default the actual value is obtain by the
  * following expression:
@@ -193,7 +199,11 @@ * ```javascript
  * ```
- * @param {string} [link.type="STRAIGHT"] - the type of line to draw, available types at this point are:
+ * @param {number} [link.markerHeight=6] - <a id="link-marker-height" href="#link-marker-height">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/SVG/Attribute/markerHeight">markerHeight</a>
+ * property for the link arrowhead height. *Note: this property can only be set in the first mount, it does not update dynamically.*
+ * @param {number} [link.markerWidth=6] - <a id="link-marker-width" href="#link-marker-width">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/SVG/Attribute/markerWidth">markerWidth</a>
+ * property for the link arrowhead width. *Note: this property can only be set in the first mount, it does not update dynamically.*
+ * @param {string} [link.type="STRAIGHT"] - <a id="link-type" href="#link-type">🔗</a> 🔍🔍🔍 the type of line to draw, available types at this point are:
  * - "STRAIGHT" <small>(default)</small> - a straight line.
  * - "CURVE_SMOOTH" - a slight curve between two nodes
  * - "CURVE_FULL" - a semicircumference trajectory unites source and target nodes.
- * <br/>
+ * </br>
  * <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-bend.gif?raw=true" width="820" height="480"/>
@@ -239,2 +249,3 @@ *
         linkStrength: 1,
+        disableLinkForce: false,
     },
@@ -267,4 +278,3 @@ node: {
         fontWeight: "normal",
-        // FIXME: highlightColor default should be "SAME", breaking change
-        highlightColor: "#d3d3d3",
+        highlightColor: "SAME",
         highlightFontSize: 8,
@@ -278,4 +288,6 @@ highlightFontWeight: "normal",
         strokeWidth: 1.5,
+        markerHeight: 6,
+        markerWidth: 6,
         type: "STRAIGHT",
     },
 };

src/components/graph/graph.helper.js

@@ -33,3 +33,3 @@ /**
 
-import { isDeepEqual, isEmptyObject, merge, pick, antiPick, throwErr } from "../../utils";
+import { isDeepEqual, isEmptyObject, merge, pick, antiPick, throwErr, logWarning } from "../../utils";
 import { computeNodeDegree } from "./collapse.helper";
@@ -209,5 +209,6 @@
  * @param  {Object} data - Same as {@link #initializeGraphState|data in initializeGraphState}.
- * @throws can throw the following error msg:
+ * @throws can throw the following error or warning msg:
  * INSUFFICIENT_DATA - msg if no nodes are provided
  * INVALID_LINKS - if links point to nonexistent nodes
+ * INSUFFICIENT_LINKS - if no links are provided
  * @returns {undefined}
@@ -221,2 +222,7 @@ * @memberof Graph/helper
 
+    if (!data.links || !data.links.length) {
+        logWarning("Graph", ERRORS.INSUFFICIENT_LINKS);
+        data.links = [];
+    }
+
     const n = data.links.length;
@@ -223,0 +229,0 @@

src/components/graph/Graph.jsx

@@ -58,4 +58,5 @@ import React from "react";
  *
- * // graph event callbacks
- * const onClickGraph = function() {
+ * // Callback to handle click on the graph.
+ * // @param {Object} event click dom event
+ * const onClickGraph = function(event) {
  *      window.alert('Clicked the graph background');
@@ -186,4 +187,6 @@ * };
     _graphBindD3ToReactComponent() {
-        this.state.simulation.nodes(this.state.d3Nodes).on("tick", this._tick);
-        this._graphLinkForceConfig();
+        if (!this.state.config.d3.disableLinkForce) {
+            this.state.simulation.nodes(this.state.d3Nodes).on("tick", this._tick);
+            this._graphLinkForceConfig();
+        }
         this._graphNodeDragConfig();
@@ -197,2 +200,4 @@ }
     _onDragEnd = () => {
+        this.isDraggingNode = false;
+
         if (this.state.draggedNode) {
@@ -243,3 +248,5 @@ this.onNodePositionChange(this.state.draggedNode);
     _onDragStart = () => {
+        this.isDraggingNode = true;
         this.pauseSimulation();
+
         if (this.state.enableFocusAnimation) {
@@ -316,3 +323,3 @@ this.setState({ enableFocusAnimation: false });
         if (tagName.toUpperCase() === "SVG" && name === svgContainerName) {
-            this.props.onClickGraph && this.props.onClickGraph();
+            this.props.onClickGraph && this.props.onClickGraph(e);
         }
@@ -373,2 +380,6 @@ };
     onMouseOverNode = id => {
+        if (this.isDraggingNode) {
+            return;
+        }
+
         this.props.onMouseOverNode && this.props.onMouseOverNode(id);
@@ -385,2 +396,6 @@
     onMouseOutNode = id => {
+        if (this.isDraggingNode) {
+            return;
+        }
+
         this.props.onMouseOutNode && this.props.onMouseOutNode(id);
@@ -433,9 +448,5 @@
 
-        const { id, oldX, oldY, x, y } = node;
-        const deltaX = x - oldX;
-        const deltaY = y - oldY;
+        const { id, x, y } = node;
 
-        if (deltaX !== 0 || deltaY !== 0) {
-            this.props.onNodePositionChange(id, x, y);
-        }
+        this.props.onNodePositionChange(id, x, y);
     };
@@ -489,2 +500,3 @@
         this.nodeClickTimer = null;
+        this.isDraggingNode = false;
         this.state = initializeGraphState(this.props, this.state);
@@ -491,0 +503,0 @@ }

src/components/graph/graph.renderer.jsx

@@ -112,10 +112,15 @@ /**
 
+        const markerProps = {
+            markerWidth: config.link.markerWidth,
+            markerHeight: config.link.markerHeight,
+        };
+
         cachedDefs = (
             <defs>
-                <Marker id={MARKERS.MARKER_S} refX={small} fill={config.link.color} />
-                <Marker id={MARKERS.MARKER_SH} refX={small} fill={config.link.highlightColor} />
-                <Marker id={MARKERS.MARKER_M} refX={medium} fill={config.link.color} />
-                <Marker id={MARKERS.MARKER_MH} refX={medium} fill={config.link.highlightColor} />
-                <Marker id={MARKERS.MARKER_L} refX={large} fill={config.link.color} />
-                <Marker id={MARKERS.MARKER_LH} refX={large} fill={config.link.highlightColor} />
+                <Marker id={MARKERS.MARKER_S} refX={small} fill={config.link.color} {...markerProps} />
+                <Marker id={MARKERS.MARKER_SH} refX={small} fill={config.link.highlightColor} {...markerProps} />
+                <Marker id={MARKERS.MARKER_M} refX={medium} fill={config.link.color} {...markerProps} />
+                <Marker id={MARKERS.MARKER_MH} refX={medium} fill={config.link.highlightColor} {...markerProps} />
+                <Marker id={MARKERS.MARKER_L} refX={large} fill={config.link.color} {...markerProps} />
+                <Marker id={MARKERS.MARKER_LH} refX={large} fill={config.link.highlightColor} {...markerProps} />
             </defs>
@@ -122,0 +127,0 @@ );

src/components/marker/Marker.jsx

@@ -10,3 +10,2 @@ import React from "react";
 export default class Marker extends React.Component {
-    // TODO: make Marker configurable in the future (markerWidth, markerHeight)
     render() {
@@ -20,4 +19,4 @@ return (
                 refY="0"
-                markerWidth="6"
-                markerHeight="6"
+                markerWidth={this.props.markerWidth}
+                markerHeight={this.props.markerHeight}
                 orient="auto"
@@ -24,0 +23,0 @@ fill={this.props.fill}

src/components/node/Node.jsx

@@ -11,17 +11,21 @@ import React from "react";
  * const onClickNode = function(nodeId) {
- *      window.alert('Clicked node', nodeId);
+ *     window.alert('Clicked node', nodeId);
  * };
  *
  * const onRightClickNode = function(nodeId) {
- *      window.alert('Right clicked node', nodeId);
+ *     window.alert('Right clicked node', nodeId);
  * }
  *
  * const onMouseOverNode = function(nodeId) {
- *      window.alert('Mouse over node', nodeId);
+ *     window.alert('Mouse over node', nodeId);
  * };
  *
  * const onMouseOutNode = function(nodeId) {
- *      window.alert('Mouse out node', nodeId);
+ *     window.alert('Mouse out node', nodeId);
  * };
  *
+ * const generateCustomNode(node) {
+ *     return <CustomComponent node={node} />;
+ * }
+ *
  * <Node
@@ -44,3 +48,3 @@ *     id='nodeId'
  *     type='square'
- *     viewGenerator=(node) => <CustomComponent node={node} />
+ *     viewGenerator={generateCustomNode}
  *     className='node'
@@ -47,0 +51,0 @@ *     onClickNode={onClickNode}

src/err.js

 /*eslint max-len: ["error", 200]*/
 export default {
     GRAPH_NO_ID_PROP: "id prop not defined! id property is mandatory and it should be unique.",
+    INSUFFICIENT_LINKS:
+        "you are passing invalid data to react-d3-graph. You must include a links array in the data object you're passing down to the <Graph> component.",
     INVALID_LINKS:
@@ -5,0 +7,0 @@ "you provided a invalid links data structure. Links source and target attributes must point to an existent node",

src/utils.js

@@ -176,2 +176,13 @@ /**
 /**
+ * Formats an error message with fallbacks for the given parameters.
+ * @param {string} component component name.
+ * @param {string} msg message to log.
+ * @returns {string} the error message.
+ * @memberof utils
+ */
+function buildFormattedErrorMessage(component = "N/A", msg = "N/A") {
+    return `react-d3-graph :: ${component} :: ${msg}`;
+}
+
+/**
  * Helper function for customized error logging.
@@ -184,7 +195,29 @@ * @param  {string} component - the name of the component where the error is to be thrown.
 function throwErr(component, msg) {
-    const error = `react-d3-graph :: ${component} :: ${msg}`;
+    throw Error(buildFormattedErrorMessage(component, msg));
+}
 
-    throw Error(error);
+/**
+ * Logs formatted `react-d3-graph` error with `console.error`.
+ * @param {string} component component name.
+ * @param {string} msg message to log.
+ * @returns {undefined}
+ * @memberof utils
+ */
+function logError(component, msg) {
+    console.error(buildFormattedErrorMessage(component, msg));
 }
 
-export { isDeepEqual, isEmptyObject, deepClone, merge, pick, antiPick, throwErr };
+/**
+ * Helper function for customized warning logging.
+ * @param  {string} component - the name of the component where the warning is to be thrown.
+ * @param  {string} msg - the message contain a more detailed explanation about the error.
+ * @returns {Warning} the thrown warning.
+ * @memberof utils
+ */
+function logWarning(component, msg) {
+    const warning = `react-d3-graph :: ${component} :: ${msg}`;
+
+    console.warn(warning);
+}
+
+export { isDeepEqual, isEmptyObject, deepClone, merge, pick, antiPick, throwErr, logError, logWarning };

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

527543

increased by27.5%

Number of package files

57

increased by5.56%

Lines of code

7363

increased by40.89%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

45

increased by4.65%

Number of lines in readme file

163

decreased by-0.61%

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-tooltip@^3.11.1

• + Addedreact-tooltip@3.11.6(transitive)