refactor: minor improvements for recently merged PRs

Author: danielcaldas

sandbox/data/custom-node/custom-node.config.js

@@ -2,48 +2,48 @@ import React from "react";
 import CustomNode from "./CustomNode";
 
 export default {
-    automaticRearrangeAfterDropNode: false,
-    collapsible: false,
-    height: 400,
-    highlightDegree: 1,
-    highlightOpacity: 0.2,
-    linkHighlightBehavior: true,
-    maxZoom: 8,
-    minZoom: 0.1,
-    nodeHighlightBehavior: true,
-    panAndZoom: false,
-    staticGraph: false,
-    width: 800,
-    node: {
-        color: "#d3d3d3",
-        fontColor: "black",
-        fontSize: 12,
-        fontWeight: "normal",
-        highlightColor: "red",
-        highlightFontSize: 12,
-        highlightFontWeight: "bold",
-        highlightStrokeColor: "SAME",
-        highlightStrokeWidth: 1.5,
-        labelProperty: "name",
-        labelClass: "person-node-label",
-        mouseCursor: "pointer",
-        opacity: 1,
-        renderLabel: false,
-        size: {
-            width: 700,
-            height: 900,
-        },
-        strokeColor: "none",
-        strokeWidth: 1.5,
-        svg: "",
-        symbolType: "circle",
-        viewGenerator: node => <CustomNode person={node} />,
-    },
-    link: {
-        color: "#d3d3d3",
-        opacity: 1,
-        semanticStrokeWidth: false,
-        strokeWidth: 4,
-        highlightColor: "blue",
+  automaticRearrangeAfterDropNode: false,
+  collapsible: false,
+  height: 400,
+  highlightDegree: 1,
+  highlightOpacity: 0.2,
+  linkHighlightBehavior: true,
+  maxZoom: 8,
+  minZoom: 0.1,
+  nodeHighlightBehavior: true,
+  panAndZoom: false,
+  staticGraph: false,
+  width: 800,
+  node: {
+    color: "#d3d3d3",
+    fontColor: "black",
+    fontSize: 12,
+    fontWeight: "normal",
+    highlightColor: "red",
+    highlightFontSize: 12,
+    highlightFontWeight: "bold",
+    highlightStrokeColor: "SAME",
+    highlightStrokeWidth: 1.5,
+    labelProperty: "name",
+    // labelClass: "person-node-label",
+    mouseCursor: "pointer",
+    opacity: 1,
+    renderLabel: true,
+    size: {
+      width: 700,
+      height: 900,
     },
+    strokeColor: "none",
+    strokeWidth: 1.5,
+    svg: "",
+    symbolType: "circle",
+    viewGenerator: node => <CustomNode person={node} />,
+  },
+  link: {
+    color: "#d3d3d3",
+    opacity: 1,
+    semanticStrokeWidth: false,
+    strokeWidth: 4,
+    highlightColor: "blue",
+  },
 };

sandbox/data/custom-node/res/styles/custom-node.css

@@ -1,76 +1,75 @@
 /* --- Generic styles --- */
 
 .flex-container {
-    flex-direction: column;
-    display: flex;
+  flex-direction: column;
+  display: flex;
 }
 
 .flex-container-column {
-    flex-direction: column;
+  flex-direction: column;
 }
 
 .flex-container-row {
-    flex-direction: row;
+  flex-direction: row;
 }
 
 .fill-space {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 
 .icon {
-    width: 100%;
-    height: 100%;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
 /* --- Shape for the nodes --- */
 
 .person-node {
-    width: 100%;
-    height: 100%;
-    border-radius: 35% 5% 35% 5%;
-    overflow: hidden;
-    box-sizing: border-box;
-    display: flex;
+  width: 100%;
+  height: 100%;
+  border-radius: 35% 5% 35% 5%;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
 }
 
 .person-node.male {
-    background-color: lightblue;
-    box-shadow: 25px 15px cadetblue;
+  background-color: lightblue;
+  box-shadow: 25px 15px cadetblue;
 }
 
 .person-node.female {
-    background-color: pink;
-    box-shadow: 25px 15px palevioletred;
+  background-color: pink;
+  box-shadow: 25px 15px palevioletred;
 }
 
 /* --- Other styles for node content --- */
 
 .person-node .name {
-    padding: 5%;
-    font-size: 0.8rem;
-    font-weight: bold;
-    text-align: center;
-    text-transform: uppercase;
+  padding: 5%;
+  font-size: 0.8rem;
+  font-weight: bold;
+  text-align: center;
+  text-transform: uppercase;
 }
 
 .person-node .icon-bar {
-    width: 20%;
-    margin-right: 5%;
+  width: 20%;
+  margin-right: 5%;
 }
 
 .person-node .icon-bar > .icon {
-    width: 80%;
-    height: 30%;
+  width: 80%;
+  height: 30%;
 }
 
-/* --- Node label style --- */
-
+/* you need to toggle `node.renderLabel` to see this class in action */
 .person-node-label {
-    fill: black;
-    text-shadow: rgb(255, 255, 255) 0px -2px 0px, rgb(255, 255, 255) 0px 2px 0px, rgb(255, 255, 255) 2px 0px 0px,
-        rgb(255, 255, 255) -2px 0px 0px;
-    transform: rotate(-25deg) translateX(40px) translateY(15px);
+  fill: black;
+  text-shadow: rgb(255, 255, 255) 0px -2px 0px, rgb(255, 255, 255) 0px 2px 0px, rgb(255, 255, 255) 2px 0px 0px,
+    rgb(255, 255, 255) -2px 0px 0px;
+  transform: rotate(-25deg) translateX(40px) translateY(15px);
 }

src/components/graph/graph.builder.js

@@ -4,6 +4,7 @@
  * Offers a series of methods that isolate the way graph elements are built (nodes and links mainly).
  */
 import CONST from "./graph.const";
+import { isNil } from "../../utils";
 
 import { buildLinkPathDefinition } from "../link/link.helper";
 import { getMarkerId } from "../marker/marker.helper";
@@ -232,12 +233,12 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
   const fontColor = node.fontColor || config.node.fontColor;
 
   let renderLabel = config.node.renderLabel;
-  if (node.renderLabel !== undefined && typeof node.renderLabel === "boolean") {
+  if (!isNil(node.renderLabel) && typeof node.renderLabel === "boolean") {
     renderLabel = node.renderLabel;
   }
 
   var labelClass = config.node.labelClass;
-  if (node.labelClass !== undefined && typeof node.labelClass === "string") {
+  if (!isNil(node.labelClass) && typeof node.labelClass === "string") {
     labelClass = node.labelClass;
   }
 

src/components/node/Node.jsx

@@ -94,7 +94,7 @@ export default class Node extends React.Component {
       fontSize: this.props.fontSize,
       fontWeight: this.props.fontWeight,
       opacity: this.props.opacity,
-      ...(this.props.labelClass !== "" && { className: this.props.labelClass }),
+      ...(this.props.labelClass && { className: this.props.labelClass }),
     };
 
     let size = this.props.size;

src/utils.js

@@ -84,6 +84,16 @@ function isEmptyObject(o) {
   return !!o && typeof o === "object" && !Object.keys(o).length;
 }
 
+/**
+ * Checks if given input is undefined or null
+ * @param {any} o variable target
+ * @returns {boolean} true if input is either undefined or null
+ * @memberof utils
+ */
+function isNil(o) {
+  return o === undefined || o === null;
+}
+
 /**
  * Function to deep clone plain javascript objects.
  * @param {Object} o - the object to clone.
@@ -238,4 +248,16 @@ function logWarning(component, msg) {
   console.warn(warning);
 }
 
-export { isDeepEqual, isEmptyObject, deepClone, merge, pick, antiPick, debounce, throwErr, logError, logWarning };
+export {
+  isDeepEqual,
+  isEmptyObject,
+  isNil,
+  deepClone,
+  merge,
+  pick,
+  antiPick,
+  debounce,
+  throwErr,
+  logError,
+  logWarning,
+};