Chore: Misc bug bix travis node upgrade (#305)

* Add logError utility

* Improve development logging for isNodeVisible in collapse.helper

* Update node versions in .travis.yml

* Update CHANGELOG.md with some ecosystem update

* Update missing docs on renderLabel

* Delete yarn.lock

* Update misc dependencies patch, minors. Fix security vulnerability

* Set link.highlightColor default as 'SAME'

* Generate anchor links for each react-d3-graph documented configuration property

* Move analytics to separate JS file to toggle off in development mode

Author: danielcaldas

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
         Reflect: true,
         window: true,
         __dirname: true,
+        process: true,
     },
     parser: "babel-eslint",
     parserOptions: {

.gitignore

@@ -71,3 +71,4 @@ gen-docs
 .DS_Store
 cypress/videos/
 cypress/screenshots/
+yarn.lock # prevent yarn.lock to be pushed, please use npm instead

.travis.yml

@@ -4,8 +4,8 @@ addons:
         packages:
             - libgconf-2-4
 node_js:
-    - "8.9.0"
     - "10.14.0"
+    - "12.13.0"
 install:
     - npm install
 before_script:

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## Next up
+
+-   https://github.com/DefinitelyTyped/DefinitelyTyped/pull/42240
+    thanks to @\hrngoode `react-d3-graph` is not on [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)
+
 ## [2.3.0](https://github.com/danielcaldas/react-d3-graph/tree/2.3.0)
 
 [Full Changelog](https://github.com/danielcaldas/react-d3-graph/compare/2.2.0...2.3.0)

package-lock.json

@@ -50,7 +50,7 @@
     "babel-loader": "8.0.6",
     "cross-env": "5.2.1",
     "css-loader": "2.0.2",
-    "cypress": "3.4.1",
+    "cypress": "3.8.3",
     "d3": "^5.5.0",
     "documentation": "12.1.2",
     "eslint": "6.3.0",
@@ -63,24 +63,24 @@
     "eslint-plugin-react": "7.14.3",
     "eslint-plugin-standard": "4.0.1",
     "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",
     "react": "^16.4.1",
     "react-addons-test-utils": "15.6.2",
     "react-dom": "^16.4.2",
     "react-editable-json-tree": "2.2.1",
     "react-jsonschema-form": "1.0.4",
     "react-test-renderer": "16.9.0",
-    "react-toastify": "5.4.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",
     "webpack-cli": "3.3.8",
     "webpack-dev-server": "^3.1.14",

package.json

@@ -4,6 +4,7 @@ import { JsonTree } from "react-editable-json-tree";
 import Form from "react-jsonschema-form";
 import ReactTooltip from "react-tooltip";
 import { toast } from "react-toastify";
+import "./analytics";
 import defaultConfig from "../src/components/graph/graph.config";
 import { Graph } from "../src";
 import { generateFormSchema, loadDataset, setValue, tooltipReducer } from "./utils";

sandbox/Sandbox.jsx

@@ -0,0 +1,25 @@
+if (process.env.NODE_ENV !== "development") {
+    (function(i, s, o, g, r, a, m) {
+        i["GoogleAnalyticsObject"] = r;
+        (i[r] =
+            i[r] ||
+            function() {
+                (i[r].q = i[r].q || []).push(arguments);
+            }),
+            (i[r].l = 1 * new Date());
+        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+        a.async = 1;
+        a.src = g;
+        m.parentNode.insertBefore(a, m);
+    })(window, document, "script", "https://www.google-analytics.com/analytics.js", "ga");
+    try {
+        // eslint-disable-next-line no-undef
+        ga("create", "UA-121685077-2", "auto");
+        // eslint-disable-next-line no-undef
+        ga("send", "pageview");
+    } catch (error) {
+        if (process.env.NODE_ENV === "development") {
+            console.error("react-d3-graph :: ", error);
+        }
+    }
+}

sandbox/analytics.js

@@ -5,16 +5,6 @@
     <title>react-d3-graph</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <link rel="shortcut icon" href="https://danielcaldas.github.io/react-d3-graph/sandbox/favicon.ico">
-    <script>
-        (function (i, s, o, g, r, a, m) {
-            i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
-                (i[r].q = i[r].q || []).push(arguments)
-            }, i[r].l = 1 * new Date(); a = s.createElement(o),
-                m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
-        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
-        ga('create', 'UA-121685077-2', 'auto');
-        ga('send', 'pageview');
-    </script>
 </head>
 <body>
     <div id="app"></div>

sandbox/index.html

@@ -6,6 +6,7 @@
  * the links matrix.
  */
 import { getId } from "./graph.helper";
+import { logError } from "../../utils";
 
 /**
  * For directed graphs.
@@ -125,6 +126,18 @@ function getTargetLeafConnections(rootNodeId, linksMatrix = {}, { directed }) {
  * @memberof Graph/collapse-helper
  */
 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) {
         return true;
     }