// render [javascript]
  render() {

    const {
      isFetching,
      isLoggedIn,
      profile,
      superEdges,
      entityCount,
      messagesConnect,
      heartValue,
      heartCount,
      links,
      title,
      queryLink,
      isParsed,
    } = this.props;

    const {
      connectionDisplayIndex,
      isAddConnectionToggledOn,
      heartClickAttempted,
      rotateConnectionBox,
      isLoginRedirectToggledOn,
    } = this.state;


    const profileBox = (<a
        type="button"
        href={`${rootURL}/@${profile.username}`}
        rel="noreferrer noopener"
        onClick={() => { analytics('profileImgClick'); }}
      >
        <img src={profile.profile_image} style={{ marginTop: 8, height: '32px', borderRadius: '3px' }} />
      </a>)

    const pageTitleSection = (
      <div className={'pageTitleSection'}>
        <div className={'titleImgBox'}>
          <img src={'img/document.ico'} />
        </div>
        <div className={'content'}>
          <div className={'pageTitle noOverflow'}>{title}</div>
          <div className={'queryLink noOverflow'}>{queryLink}</div>
        </div>
    </div>)

    const gridHeaders = (
      <div className={'row rowHeader'}>
        <div className={'typeCol'}>
          <span>Type</span>
        </div>
        <div className={'titleCol'}>
          <span className={'title'}>Title</span>
          <span className={'noOverflow favicon'} title={'link to page'}>
            <img src={'/img/hyperlink.png'} style={{ height: 20, width: 20 }}/>
          </span>
        </div>
        <div className={'domainCol'}>
          <span>Domain</span>
        </div>
        <div className={'sourceCol'}>
          <span>Source</span>
        </div>
      </div>)

    const filteredLink = links.filter(link => link.pageTo && link.pageTo !== null);

    const noConnectionsRow = superEdges.length === 0 ? (
      <div style={{ paddingTop: 20, paddingBottom: 20, paddingLeft: 20, borderTop: '1px solid #e7e7e7', backgroundColor: 'rgba(102, 51, 153, 0.3)' }}>
        <span style={{ fontWeigth: 700, fontSize: 14 }}>There are no user recommendations for this page - be the first to add one.</span>
      </div>) : null;

    const superEdgeRows = superEdges && superEdges.length > 0 ? superEdges.map((edge, i) =>
      <div key={i} className={'row'} style={{ borderTop: '1px solid #e7e7e7' }}>
        <div className={'typeCol'}>
          <span className={'userContributed'}>
            <i className={'fa fa-user'} title={`Connected by: @${edge.edges[0].user.username}`}/>
          </span>
        </div>
        <div className={'titleCol'}>
          <span className={'noOverflow title'} title={edge.entity.title}>
            <a target="_blank" href={edge.entity.canonicalLink} rel="noreferrer noopener">
              {edge.entity.title ? edge.entity.title : edge.entity.canonicalLink}
            </a>
          </span>
          <span className={'noOverflow favicon'} title={edge.entity.title}>
            <a target="_blank" href={edge.entity.canonicalLink} rel="noreferrer noopener">
              <img style={{ marginTop: 3 }} src={edge.entity.faviconCDN ? edge.entity.faviconCDN : '/img/default-favicon.png'} />
            </a>
          </span>
        </div>
        <div className={'domainCol'}>
          <span className={'noOverflow'} title={edge.entity.domain}>{edge.entity.domain}</span>
        </div>
        <div className={'sourceCol'}>
          <span className={'noOverflow'}>
            <a
              target="_blank"
              rel="noreferrer noopener"
              onClick={() => { analytics('reccommenderClicked'); }}
              href={`${rootURL}/@${edge.edges[0].user.username}`}
            >
              @{edge.edges[0].user.username}
            </a>
          </span>
        </div>
      </div>) : null;

    const pageLinksJSX = filteredLink.length > 0 ?
      filteredLink.map((link, i) => {
        const pageTo = link.pageTo;
        if (!pageTo ) return <div key={i} />;
        const { title, faviconCDN, canonicalLink, domain } = pageTo;
        return <div key={i} className={'row'} style={{ borderTop: '1px solid #e7e7e7' }}>
          <div className={'typeCol'}>
            <span className={'pageLink'}>
              <i className={'fa fa-code'} title={`Example promoted link`}/>
            </span>
          </div>
          <div className={'titleCol'}>
            <a target="_blank" href={canonicalLink} className={'noOverflow title'} rel="noreferrer noopener">
              {title.length > 0 ? title : canonicalLink}
            </a>
            <span className={'noOverflow favicon'} title={'link to page'}>
              <a target="_blank" href={canonicalLink} rel="noreferrer noopener">
                <img src={ faviconCDN && faviconCDN.length ? faviconCDN : 'img/document.ico' } />
              </a>
            </span>
          </div>
          <div className={'domainCol'}>
            <span>{domain}</span>
          </div>
          <div className={'sourceCol'}>
            <span>Page</span>
          </div>
        </div>
      }
    ) : null

    const resultsGrid = (
      <div className={'resultsGrid'}>
        {gridHeaders}
        {superEdgeRows}
        {pageLinksJSX}
        {noConnectionsRow}
      </div>)
    return (
      <div id='fullPage'>
        <div className={'pageContents'}>
          {isFetching || isParsed === false ?
            ( <div>
                <ReactSpinner color="black"/>
                <div className={'parsingPage'}>