Galaxy.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;

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);
		}
	}

	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) => {
		let 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) => {
		let x = d3.event.pageX + 20,
			y = d3.event.pageY - 20,
			title = "",
			visible = !this.state.isTooltipVisible,
			{tooltipUrl} = this.state;
        	if(e.title.length > 0) title = e.title[0];

		let 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;
	}

	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:[email protected]">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"} />
				<Network  
					data={this.props.data} 
					openTooltip={this.openTooltip}
					isPageSideBarOpen={this.props.isPageSideBarOpen} 
					handleTooltipPosition={this.handleTooltipPosition}
					handleTooltipClick={this.handleTooltipClick}
					handleTooltipHide={this.handleTooltipHide}
					/>
			</div>
		);
	}
}