Misc improvements cleanup from previous PRs (#327)

* Misc improvements cleanup from previous PRs

-  Revert DOCUMENTATION.md to previous version
- Adjustments in documentation
- Add copy to clipboard button to sandbox for graph configuration field
- Remove eslint rule new-line-after-var
- Small refactor around graph.builder and graph.helper
- Small refactor marker.helper

* Small improvements in sandbox improve copy to clipboard

* Fix unit test

* Add sample for new size API @terahn #342

* Allow users to select the node.labelPosition in the form

* Fix #322

* Fix #323

Author: danielcaldas

.eslintrc.js

@@ -29,7 +29,6 @@ module.exports = {
         "keyword-spacing": "error",
         "max-len": ["error", 120, 4, { ignoreComments: true }],
         "max-lines": ["error", { max: 450, skipComments: true }],
-        "newline-after-var": ["error", "always"],
         "no-nested-ternary": "error",
         "no-useless-constructor": "error",
         semi: "error",

docs/DOCUMENTATION.md

@@ -394,28 +394,27 @@ const graph = {
     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>
     <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-directed.gif?raw=true" width="820" height="480"/> (optional, default `false`)
--   `focusZoom` **[number][96]** 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:`javascript const data = { nodes: this.state.data.nodes, links: this.state.data.links, focusedNodeId: "nodeIdToTriggerZoomAnimation" };`<img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-zoom-animation.gif?raw=true" width="820" height="480"/> (optional, default `1`)
--   `focusAnimationDuration` **[number][96]** duration (in seconds) for the animation that takes place when focusing the graph on a node. (optional, default `0.75`)
--   `height` **[number][96]** the height of the (svg) area where the graph will be rendered. (optional, default `400`)
--   `nodeHighlightBehavior` **[boolean][97]** 🚅🚅🚅 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**. (optional, default `false`)
--   `linkHighlightBehavior` **[boolean][97]** 🚅🚅🚅 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>. (optional, default `false`)
--   `highlightDegree` **[number][96]** **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. (optional, default `1`)
--   `highlightOpacity` **[number][96]** 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_). (optional, default `1`)
--   `maxZoom` **[number][96]** max zoom that can be performed against the graph. (optional, default `8`)
--   `minZoom` **[number][96]** min zoom that can be performed against the graph. (optional, default `0.1`)
--   `initialZoom` **[number][96]** initial zoom that can be set on the graph. (optional, default `null`)
--   `panAndZoom` **[boolean][97]** 🚅🚅🚅 pan and zoom effect when performing zoom in the graph,
-    a similar functionality may be consulted [here][104]. (optional, default `false`)
--   `staticGraph` **[boolean][97]** when setting this value to true the graph will be completely static, thus
+-   `focusZoom` **[number][173]** <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:`javascript const data = { nodes: this.state.data.nodes, links: this.state.data.links, focusedNodeId: "nodeIdToTriggerZoomAnimation" };`<img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-zoom-animation.gif?raw=true" width="820" height="480"/> (optional, default `1`)
+-   `focusAnimationDuration` **[number][173]** <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. (optional, default `0.75`)
+-   `height` **[number][173]** <a id="height" href="#height">🔗</a> the height of the (svg) area where the graph will be rendered. (optional, default `400`)
+-   `nodeHighlightBehavior` **[boolean][174]** <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>. (optional, default `false`)
+-   `linkHighlightBehavior` **[boolean][174]** <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>. (optional, default `false`)
+-   `highlightDegree` **[number][173]** <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. (optional, default `1`)
+-   `highlightOpacity` **[number][173]** <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>). (optional, default `1`)
+-   `maxZoom` **[number][173]** <a id="max-zoom" href="#max-zoom">🔗</a> max zoom that can be performed against the graph. (optional, default `8`)
+-   `minZoom` **[number][173]** <a id="min-zoom" href="#min-zoom">🔗</a> min zoom that can be performed against the graph. (optional, default `0.1`)
+-   `panAndZoom` **[boolean][174]** <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>. (optional, default `false`)
+-   `staticGraph` **[boolean][174]** <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 <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. (optional, default `false`)

sandbox/Sandbox.jsx

@@ -33,6 +33,11 @@ export default class Sandbox extends React.Component {
 
         const { config: configOverride, data, fullscreen } = sandboxData;
         const config = Object.assign(defaultConfig, configOverride);
+        // TODO: refactor this labelPosition assignment, move to somewhere
+        // in generateFormSchema
+        if (config.node.labelPosition === null) {
+            config.node.labelPosition = "";
+        }
         const schemaProps = generateFormSchema(config, "", {});
         const schema = {
             type: "object",
@@ -351,6 +356,23 @@ export default class Sandbox extends React.Component {
         );
     };
 
+    copyConfigToClipboard = () => {
+        if (!this.state.generatedConfig || !Object.keys(this.state.generatedConfig).length) {
+            return;
+        }
+
+        try {
+            navigator.clipboard
+                .writeText(JSON.stringify(this.state.generatedConfig, null, 2))
+                .then(() => {
+                    toast("✔️ Configuration copied to clipboard!");
+                })
+                .catch(console.error);
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
     componentDidMount() {
         toast.configure();
     }
@@ -444,7 +466,12 @@ export default class Sandbox extends React.Component {
                         </button>
                     </div>
                     <div className="container__graph-config">
-                        <h4>Your config</h4>
+                        <h4>
+                            Your config
+                            <small className="btn-clipboard" onClick={this.copyConfigToClipboard}>
+                                📋 copy to clipboard
+                            </small>
+                        </h4>
                         <JSONContainer data={this.state.generatedConfig} staticData={false} />
                     </div>
                     <div className="container__graph-data">

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

@@ -28,7 +28,10 @@ export default {
         mouseCursor: "pointer",
         opacity: 1,
         renderLabel: false,
-        size: 700,
+        size: {
+            width: 700,
+            height: 900,
+        },
         strokeColor: "none",
         strokeWidth: 1.5,
         svg: "",

sandbox/styles.css

@@ -13,7 +13,7 @@
 .container {
     display: grid;
     width: 100%;
-    grid-template-columns: 450px 1fr;
+    grid-template-columns: 380px 400px 1fr;
     grid-auto-rows: minmax(100px, auto);
 }
 
@@ -41,14 +41,14 @@
 }
 
 .container__graph-data {
-    grid-column: 1 / 2;
+    grid-column: 1 / 1;
     grid-row: 2 / 3;
     margin-bottom: 4px;
     z-index: 2;
 }
 
 .container__graph-config {
-    grid-column: 2 / 3;
+    grid-column: 2 / 5;
     grid-row: 2 / 3;
     margin-bottom: 4px;
     z-index: 2;
@@ -75,7 +75,8 @@
 }
 
 .json-data-container {
-    max-height: 250px;
+    height: 250px;
+    min-width: 360px;
     overflow: scroll;
 }
 
@@ -97,3 +98,15 @@
 .tooltip-help {
     cursor: help;
 }
+
+.btn-clipboard {
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    margin-left: 20px;
+    user-select: none;
+}
+
+.btn-clipboard:hover {
+    background-color: lightskyblue;
+}

sandbox/utils.js

@@ -6,6 +6,8 @@ import DEFAULT_CONFIG from "../src/components/graph/graph.config";
 import { merge } from "../src/utils";
 import { tooltips } from "./graph-config-tooltips";
 
+const LABEL_POSITION_OPTIONS = ["left", "right", "top", "bottom", "center"];
+
 /**
  * This two functions generate the react-jsonschema-form
  * schema from some passed graph configuration.
@@ -23,6 +25,16 @@ function formMap(k, v) {
                 uniqueItems: true,
             };
         }
+        case "node.labelPosition": {
+            return {
+                type: "array",
+                title: "node.labelPosition",
+                items: {
+                    enum: LABEL_POSITION_OPTIONS,
+                },
+                uniqueItems: true,
+            };
+        }
     }
 
     return {
@@ -83,6 +95,10 @@ function loadDataset() {
     };
 }
 
+function isArray(o) {
+    return o && typeof o === "object" && Object.prototype.hasOwnProperty.call(o, "length");
+}
+
 function setValue(obj, access, value) {
     if (typeof access == "string") {
         access = access.split(".");
@@ -93,7 +109,13 @@ function setValue(obj, access, value) {
         obj[access[0]] = {};
     }
 
-    access.length > 1 ? setValue(obj[access.shift()], access, value) : (obj[access[0]] = value);
+    const v = isArray(value) ? value[0] : value;
+
+    if (access.length > 1) {
+        setValue(obj[access.shift()], access, v);
+    } else {
+        obj[access[0]] = v;
+    }
 }
 
 function tooltipReducer(schemaProps, key) {

src/components/graph/Graph.jsx

@@ -283,11 +283,12 @@ export default class Graph extends React.Component {
             .scaleExtent([this.state.config.minZoom, this.state.config.maxZoom])
             .on("zoom", this._zoomed);
 
-        // set initial zoom
         if (this.state.config.initialZoom !== null) {
             zoomObject.scaleTo(selector, this.state.config.initialZoom);
         }
 
+        // avoid double click on graph to trigger zoom
+        // for more details consult: https://github.com/danielcaldas/react-d3-graph/pull/202
         selector.call(zoomObject).on("dblclick.zoom", null);
     };
 

src/components/graph/graph.builder.js

@@ -54,13 +54,9 @@ function _getNodeOpacity(node, highlightedNode, highlightedLink, config) {
  */
 function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNode, highlightedLink, transform) {
     const { source, target } = link;
-
     let x1 = nodes?.[source]?.x || 0;
-
     let y1 = nodes?.[source]?.y || 0;
-
     let x2 = nodes?.[target]?.x || 0;
-
     let y2 = nodes?.[target]?.y || 0;
 
     const type = link.type || config.link.type;
@@ -218,6 +214,11 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
     const svg = node.svg || config.node.svg;
     const fontColor = node.fontColor || config.node.fontColor;
 
+    let renderLabel = config.node.renderLabel;
+    if (node.renderLabel !== undefined && typeof node.renderLabel === "boolean") {
+        renderLabel = node.renderLabel;
+    }
+
     return {
         ...node,
         className: CONST.NODE_CLASS_NAME,
@@ -234,7 +235,7 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
         labelPosition,
         opacity,
         overrideGlobalViewGenerator: !node.viewGenerator && node.svg,
-        renderLabel: node.renderLabel || config.node.renderLabel,
+        renderLabel,
         size: isSizeNumericValue ? nodeSize * t : { height: nodeSize.height * t, width: nodeSize.width * t },
         stroke,
         strokeWidth: strokeWidth * t,

src/components/graph/graph.config.js

@@ -78,10 +78,10 @@
  * 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] - max zoom that can be performed against the graph.
- * @param {number} [minZoom=0.1] - min zoom that can be performed against the graph.
- * @param {number} [initialZoom=null] - initial zoom that can be set on the graph.
- * @param {boolean} [panAndZoom=false] - 🚅🚅🚅 pan and zoom effect when performing zoom in the graph,
+ * @param {number} [initialZoom=null] - <a id="max-zoom" href="#initial-zoom">🔗</a> initial zoom that can be set on the graph.
+ * @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