Fix/mouse over link highlight (#75)

* Assure that node.id is passed as string to buildNodeProps

* Add test for mouse over link

Author: danielcaldas

cypress/integration/link.e2e.js

@@ -146,4 +146,43 @@ describe('[rd3g-graph] link tests', function() {
             this.link34PO.shouldHaveColor('blue');
         });
     });
+
+    describe('when mouse is over some link', function() {
+        beforeEach(function() {
+            // small hack to disable any previous highlight behavior
+            this.sandboxPO.fullScreenMode().click();
+        });
+
+        it('should highlight the link and the intervening nodes', function() {
+            // mouse over link between nodes 1 and 4
+            // should highlight nodes 1 and 4 as well as they're connection
+            this.link14PO
+                .getLine()
+                .click()
+                .trigger('mouseover');
+
+            this.node1PO.getColor().should('eq', 'red');
+            this.node1PO.getFontWeight().should('eq', 'bold');
+
+            this.node2PO.getColor().should('eq', '#d3d3d3');
+            this.node2PO.getOpacity().should('eq', '0.2');
+
+            this.node3PO.getColor().should('eq', '#d3d3d3');
+            this.node3PO.getOpacity().should('eq', '0.2');
+
+            this.node4PO.getColor().should('eq', 'red');
+            this.node4PO.getFontWeight().should('eq', 'bold');
+
+            this.link12PO.shouldHaveColor('rgb(211, 211, 211)');
+            this.link12PO.shouldHaveOpacity(0.2);
+
+            this.link13PO.shouldHaveColor('rgb(211, 211, 211)');
+            this.link13PO.shouldHaveOpacity(0.2);
+
+            this.link14PO.shouldHaveColor('blue');
+
+            this.link34PO.shouldHaveColor('rgb(211, 211, 211)');
+            this.link34PO.shouldHaveOpacity(0.2);
+        });
+    });
 });

cypress/page-objects/sandbox.po.js

@@ -9,6 +9,7 @@ function SandboxPO() {
     this.checkboxes = ['node.renderLabel', 'staticGraph'];
 
     // actions
+    this.fullScreenMode = () => cy.get('.container__graph > :nth-child(1) > :nth-child(1)');
     this.playGraph = () => cy.get('.container__graph > :nth-child(1) > :nth-child(2)').click();
     this.pauseGraph = () => cy.get('.container__graph > :nth-child(1) > :nth-child(3)').click();
     this.addNode = () => cy.get('.container__graph > :nth-child(1) > :nth-child(5)').click();

src/components/graph/graph.renderer.jsx

@@ -62,7 +62,14 @@ function _buildLinks(nodes, links, linksMatrix, config, linkCallbacks, highlight
  */
 function _buildNodes(nodes, nodeCallbacks, config, highlightedNode, highlightedLink, transform) {
     return Object.keys(nodes).map(nodeId => {
-        const props = buildNodeProps(nodes[nodeId], config, nodeCallbacks, highlightedNode, highlightedLink, transform);
+        const props = buildNodeProps(
+            Object.assign({}, nodes[nodeId], { id: `${nodeId}` }),
+            config,
+            nodeCallbacks,
+            highlightedNode,
+            highlightedLink,
+            transform
+        );
 
         return <Node key={nodeId} {...props} />;
     });