Step by step code snippets differ from Github repo (Building a Graph Vis)

[Tom Hemmes]

On many places the step by step code snippers differ from Github repo. Example:

In tutorial

  onHoverNode = pickedObj => {
    // 1. check if is hovering on a node
    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);
      graph.edges.forEach(e => e.isHighlighted = connectedEdgeIDs.includes(e.id));
    } else {
      // 3. unset all nodes and edges
      graph.nodes.forEach(n => n.isHighlighted = false);
      graph.edges.forEach(e => e.isHighlighted = false);      
    }
    // 4. update component state
    this.setState({graph, hoveredNodeID});
  }

On Github:

  onHoverNode = pickedObj => {
    // 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
      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 {
      // unset all nodes and edges
      graph.nodes.forEach(n => n.isHighlighted = false);
      graph.edges.forEach(e => e.isHighlighted = false);      
    }
    // update component state
    this.setState({graph, hoveredNodeID});
  }

[Javid]

Thanks for reporting the inconsistency. I've fixed the issue.