BAD EXAMPLE DONT USE THIS

BadComponent.js

import React from "react";
import * as d3 from "d3";
import Tooltip from "./Tooltip"
import Icon from "./Icon"
import Spinner from "./Spinner2"
import Network from "./galaxy/Network"
var simulation;
var svg;

export default class Galaxy extends React.Component {

	state = {
		tooltipX: 0,
		tooltipY: 0,
		isTooltipVisible: false,
		tooltipImg: "",
		tooltipUrl: "",
		tooltipTitle: "",
		clicked: false
	}

	componentWillMount() {
		if(this.props.data.nodes.length <= 0){
			this.props.getGalaxy(this.props.company_id, this.props.token);
		}
	}

	componentDidMount() {
		window.addEventListener('resize', this.handleResize);
		if(this.props.data.nodes.length > 0){
			var data = Object.assign({}, this.props.data);
			this.renderGraph(data)
		}
	}

	componentWillUnmount() {
		window.removeEventListener('resize', this.handleResize);
	}

	handleTooltipPosition = (e) => { 
		var x = d3.event.pageX + 20,
        	y = d3.event.pageY - 20,
        	title = "",
        	clicked = this.state.clicked;
        if(e.title.length > 0) title = e.title[0]
        if(!clicked){
	        this.setState({
	        	tooltipY: y, 
	        	tooltipX: x, 
	        	isTooltipVisible: true, 
	        	tooltipImg: e.image, 
	        	tooltipUrl: e.id,
	        	tooltipTitle: title
	        })
    	}
	}

	openTooltip = (e) => {
		var title = e.title.length > 0 ? e.title[0] : "";
		this.setState({
        	tooltipY: e.y, 
        	tooltipX: e.x, 
        	isTooltipVisible: true, 
        	tooltipImg: e.image, 
        	tooltipUrl: e.id,
        	tooltipTitle: title
        })
	}

	handleTooltipClick = (e) => {
		var x = d3.event.pageX + 20,
        	y = d3.event.pageY - 20,
        	title = "",
        	visible = !this.state.isTooltipVisible,
        	// visible = false,
        	// clicked = !this.state.clicked,
        	{tooltipUrl} = this.state;
        if(e.title.length > 0) title = e.title[0]

		var title = e.title.length > 0 ? e.title[0] : "";
		this.props.handleOnClickPage(e.id, e.image, title); 
        this.setState({
        	tooltipY: y, 
        	tooltipX: x, 
        	isTooltipVisible: false,
        	// clicked: clicked, 
        	tooltipImg: e.image, 
        	tooltipUrl: e.id,
        	tooltipTitle: title
        })
	}

	handleTooltipHide = (e) =>{
		const clicked = this.state.clicked;
		if(!clicked) this.setState({isTooltipVisible: false})
	}

	shouldComponentUpdate(nextProps, nextState) {
		if(
			this.props.data !== nextProps.data ||
			this.props.isPageSideBarOpen !== nextProps.isPageSideBarOpen ||
			this.state.isTooltipVisible !== nextState.isTooltipVisible ||
			this.state.tooltipUrl !== nextState.tooltipUrl
		){
			return true;
		}
		return false;
	}
	renderGraph(data){
		var width = parseInt(d3.select(".network").style("width")),
		    height = parseInt(d3.select(".network").style("height")) + 40,
		    biggestValue = 0,
		    biggestLink = null;

		svg = d3.select(".network")
			.append("svg")
			.attr("viewBox", "0 0 " + width + " " + height )
            .attr("preserveAspectRatio", "xMidYMid meet");
		   
		var nodesVisits = {},
			largestNode = 0;
		data.links.forEach(function(link) {
			if(nodesVisits[link.source] != null){
				nodesVisits[link.source] += link.value;
			}else{
				nodesVisits[link.source] = link.value;
			}
			
			if(biggestValue < link.value){
				biggestValue = link.value
				biggestLink = link;
			}
		});

		for(var key in nodesVisits) {
			if(nodesVisits[key] >= largestNode) largestNode = nodesVisits[key];
		}

		
		svg.attr("width", width)
           .attr("height", height);
		
		var color = d3.scaleOrdinal(d3.schemeCategory20);

		simulation = d3.forceSimulation()
		    .force("link", d3.forceLink().distance(400).id(function(d) { return d.id; }))
		    .force("charge", d3.forceManyBody().strength(-100))
		    .force("center", d3.forceCenter(width / 2, height / 2));

		var link = svg.append("g")
		  	.attr("class", "links")
			.selectAll("line")
			.data(data.links)
			.enter().append("line")
			.style("stroke-opacity", function(d) { 
		  		const value = d.value/biggestValue
			  	if(value < .1){
			  		return .1
			  	}

			  	if(value > .7){
			  		return .7
			  	}

			  	return value; 
			});

		var node = svg.append("g")
		  	.attr("class", "nodes")
			.selectAll("circle")
			.data(data.nodes)
			.enter().append("circle")
		  	.attr("r", function(d){
		  		if(nodesVisits[d.id] == null) return 2;
		  		const value = (nodesVisits[d.id]/largestNode)*8
			  	if(value < 2){
			  		return 2
			  	}
			  	return value; 
		  	})
		  	.attr("class", function(d){
			  	if(nodesVisits[d.id] !== largestNode){
			  		return "nodes"
			  	}
			  	return "nodes largest"; 
		  	})
		  	.attr("fill", function(d) { return color(d.group); })
		  	.on("mouseover",this.props.handleTooltipPosition )
		  	.on("mouseout",this.props.handleTooltipHide )
		  	.on("click",this.props.handleTooltipClick)
		  	.style("cursor", "pointer")

		  // .call(d3.drag()
		  //     .on("start", this.dragstarted)
		  //     .on("drag", this.dragged)
		  //     .on("end", this.dragended));

		node.append("title")
		  	.text(function(d) { return d.id; });

		simulation
		  	.nodes(data.nodes)
		  	.on("tick", ticked);

		simulation.force("link")
		  	.links(data.links);

		// this.props.openTooltip(biggestLink.target);

		function ticked() {
			link
			    .attr("x1", function(d) { return d.source.x; })
			    .attr("y1", function(d) { return d.source.y; })
			    .attr("x2", function(d) { return d.target.x; })
			    .attr("y2", function(d) { return d.target.y; });

			node
			    .attr("cx", function(d) { return d.x; })
			    .attr("cy", function(d) { return d.y; });
		}

	}

	dragstarted(d) {
		if (!d3.event.active) simulation.alphaTarget(0.3).restart();
		d.fx = d.x;
		d.fy = d.y;
	}

	dragged(d) {
		d.fx = d3.event.x;
		d.fy = d3.event.y;
	}

	dragended(d) {
		if (!d3.event.active) simulation.alphaTarget(0);
		d.fx = null;
		d.fy = null
	}

	handleResize = () => {
     	var width = parseInt(d3.select(".network").style("width")),
      		height = parseInt(d3.select(".network").style("height")) - 10,
      		instance = this;

      	// Update the range of the scale with new width/height
      	if(svg != null){
	      	svg.attr("width", width)
	           .attr("height", height);

	        simulation = d3.forceSimulation()
			    .force("link", d3.forceLink().distance(250).id(function(d) { return d.id; }))
			    .force("charge", d3.forceManyBody().strength(-100))
			    .force("center", d3.forceCenter(width / 2, height / 2));
		}
    }

	render(){
		
		if(this.props.data.receiving){
			return(
				<Spinner />
			);
		}

		if(this.props.data.nodes.length === 0){
			return(
				<div className="nodata row">
		        	<div className="col-lg-6 col-md-6 col-sm-6 col-xs-6 tree">
		        		<img src="../../images/img_galaxy-failure.png" />
		        	</div>
		        	<div className="col-lg-6 col-md-6 col-sm-6 col-xs-6 text tree">
		        		<h2>Hmm...</h2>
		        		<p>
		        			weird. It seems like our script isnt collecting any data. Need some help?
		        		</p>
		        		<a className="a btn white" href="mailto:info@sperse.io">support  <Icon className="ion-chevron-right " /></a>
		        	</div>
		        </div>
			);
		}

		const {tooltipX, tooltipY, isTooltipVisible, tooltipImg, tooltipUrl, tooltipTitle} = this.state;
		return (
			<div className="galaxy">
				<Tooltip 
					url={tooltipUrl} 
					title={tooltipTitle} 
					img={tooltipImg} 
					visible={isTooltipVisible} 
					top={tooltipY + "px"} 
					left={tooltipX + "px"} />
				<div className="network" />
			</div>
		);
	}
}