Make the code snippet consistent with the example (uber-archive#52)

* Make the code snippet consistent with the example

* Improve text

* Fix the inconsistency between code snippets and exaample code

src/demos/graph/3-final-version/src/app.js

@@ -61,12 +61,13 @@ export default class App extends Component {
 
   getNodeSize = node => 10
 
+
   onHoverNode = pickedObj => {
-    // check if is hovering on a node
+    // 1. check if is hovering on a node
     const hoveredNodeID = pickedObj.object && pickedObj.object.id;
     const graph = new Graph(this.state.graph);
     if (hoveredNodeID) {
-      // highlight the selected node, connected edges, and neighbor nodes
+      // 2. highlight the selected node, neighbor nodes, and connected edges
       const connectedEdges = this.state.graph.findConnectedEdges(hoveredNodeID);
       const connectedEdgeIDs = connectedEdges.map(e => e.id);
       const hightlightNodes = connectedEdges.reduce((res, e) => {
@@ -77,15 +78,15 @@ export default class App extends Component {
           res.push(e.target);
         }
         return res;
-      }, [])
+      }, []);
       graph.nodes.forEach(n => n.isHighlighted = hightlightNodes.includes(n.id));
       graph.edges.forEach(e => e.isHighlighted = connectedEdgeIDs.includes(e.id));
     } else {
-      // unset all nodes and edges
+      // 3. unset all nodes and edges
       graph.nodes.forEach(n => n.isHighlighted = false);
       graph.edges.forEach(e => e.isHighlighted = false);      
     }
-    // update component state
+    // 4. update component state
     this.setState({graph, hoveredNodeID});
   }
 

src/docs/graph/3-layout-engine.md

@@ -144,17 +144,17 @@ To here, you may still see a still graph without animaiton like this:
   <img src="images/graph-vis/no-position-update-trigger.png" alt="extruded" width="600px"/>
 </p>
 
-In the previous step, we connected `getNodePosition` and `getEdgePosition` with the accessors in the layout engine. However, `deck.gl` doesn't recalculate positions unlesss the data prop changes by shallow comparison. To inform deck.gl to re-evaluate `getPosition` outcome, we need to explicitly define `updateTriggers`. 
-`updateTriggers` expect an object whose keys are names of accessor props of this layer, and values are one or more variables that affect the output of the accessors. 
+In the previous step, we connected `getNodePosition` and `getEdgePosition` with the accessors in the layout engine. However, `deck.gl` doesn't recalculate positions unless the data prop changes by shallow comparison. To inform deck.gl to re-evaluate `getPosition` outcome, we need to explicitly define `updateTriggers`. 
+`updateTriggers` expects an object whose keys are names of accessor props of this layer, and values are one or more variables that affect the output of the accessors. For more information about `updateTriggers`, please check [here](http://uber.github.io/deck.gl/#/documentation/advanced-topics/updates?section=update-triggers)
 
-The layout engine has an attribute `alpha` represents the momemtum of the current force layout simulation. Since the value of `alpha` changes on every simulation, we can use it as the update trigger for `getPosition`. That means, `deck.gl` will re-evalute the position of nodes and edges when the alpha changes.
+The layout engine has an attribute `alpha` represents the momentum of the current force layout simulation. Since the value of `alpha` changes on every simulation, we can use it as the update trigger for `getPosition`. That means, `deck.gl` will re-evalute the position of nodes and edges when the `alpha` value changes.
 
 ```js
-// layout-engine.js
+// graph-render.js
 export default class GraphRender extends PureComponent {
   // ...
 
-  renderNodeLayer() {
+  createNodeLayer() {
     return new ScatterplotLayer({
       // ...
       // 0. add positionUpdateTrigger to node layer
@@ -164,7 +164,7 @@ export default class GraphRender extends PureComponent {
     });
   }
 
-  renderEdgeLayer() {
+  createEdgeLayer() {
     return new LineLayer({
       // ...
       // 1. add positionUpdateTrigger to edge layer

src/docs/graph/4-interaction.md

@@ -105,10 +105,19 @@ export default class App extends Component {
     const hoveredNodeID = pickedObj.object && pickedObj.object.id;
     const graph = new Graph(this.state.graph);
     if (hoveredNodeID) {
-      // 2. highlight the selected node and connected edges
-      const connectedEdgeIDs =
-        this.state.graph.findConnectedEdges(hoveredNodeID).map(e => e.id);
-      graph.nodes.forEach(n => n.isHighlighted = n.id === hoveredNodeID);
+      // 2. highlight the selected node, neighbor nodes, and connected edges
+      const connectedEdges = this.state.graph.findConnectedEdges(hoveredNodeID);
+      const connectedEdgeIDs = connectedEdges.map(e => e.id);
+      const hightlightNodes = connectedEdges.reduce((res, e) => {
+        if (!res.includes(e.source)) {
+          res.push(e.source);
+        }
+        if (!res.includes(e.target)) {
+          res.push(e.target);
+        }
+        return res;
+      }, []);
+      graph.nodes.forEach(n => n.isHighlighted = hightlightNodes.includes(n.id));
       graph.edges.forEach(e => e.isHighlighted = connectedEdgeIDs.includes(e.id));
     } else {
       // 3. unset all nodes and edges