<commit_before>import styled from "styled-components"
import React from "react"
import { createFragmentContainer, graphql } from "react-relay"
import { garamond } from "Assets/Fonts"
import { FollowButton } from "../../FollowButton/Button"
import { ToolTipDescription } from "./Components/Description"
import { NewFeature, NewFeatureContainer } from "./Components/NewFeature"
import { GeneToolTip_gene } from "../../../__generated__/GeneToolTip_gene.graphql"

export interface GeneProps {
  gene: GeneToolTip_gene
}

export const GeneToolTip: React.SFC<GeneProps> = props => {
  const { description, href, image, name } = props.gene
  const {
    cropped: { url },
  } = image

  return (
    <Wrapper>
      <GeneContainer href={href}>
        {url && <Image src={url} />}
        <Title>{name}</Title>

        {description && <ToolTipDescription text={description} />}
      </GeneContainer>

      <ToolTipFooter>
        <FollowButton /> {/* TODO: Replace with relay follow */}
        <NewFeature />
      </ToolTipFooter>
    </Wrapper>
  )
}

const Wrapper = styled.div`
  width: 240px;
`

export const GeneContainer = styled.a`
  position: relative;
  text-decoration: none;
  color: black;
`

const Title = styled.div`
  ${garamond("s18")};
  font-weight: 600;
`

const Image = styled.img`
  width: 100%;
  margin-bottom: 10px;
`

export const ToolTipFooter = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  ${NewFeatureContainer} {
    display: flex;
    flex-direction: column;
  }
`

export const GeneToolTipContainer = createFragmentContainer(
  GeneToolTip,
  graphql`
    fragment GeneToolTip_gene on Gene {
      description
      href
      image {
        cropped(width: 240, height: 160) {
          url
        }
      }
      name
    }
  `
)
<commit_msg>[PATCH publishing] use FollowGeneButton for tooltip<commit_after>import styled from "styled-components"
import React from "react"
import { createFragmentContainer, graphql } from "react-relay"
import { garamond } from "Assets/Fonts"
import { FollowGeneButton } from "../../FollowButton/FollowGeneButton"
import { ToolTipDescription } from "./Components/Description"
import { NewFeature, NewFeatureContainer } from "./Components/NewFeature"
import { GeneToolTip_gene } from "../../../__generated__/GeneToolTip_gene.graphql"

export interface GeneProps {
  gene: GeneToolTip_gene
}

export const GeneToolTip: React.SFC<GeneProps> = props => {
  const { description, href, image, name } = props.gene
  const {
    cropped: { url },
  } = image

  return (
    <Wrapper>
      <GeneContainer href={href}>
        {url && <Image src={url} />}
        <Title>{name}</Title>

        {description && <ToolTipDescription text={description} />}
      </GeneContainer>

      <ToolTipFooter>
        <FollowGeneButton />
        <NewFeature />
      </ToolTipFooter>
    </Wrapper>
  )
}

const Wrapper = styled.div`
  width: 240px;
`

export const GeneContainer = styled.a`
  position: relative;
  text-decoration: none;
  color: black;
`

const Title = styled.div`
  ${garamond("s18")};
  font-weight: 600;
`

const Image = styled.img`
  width: 100%;
  margin-bottom: 10px;
`

export const ToolTipFooter = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  ${NewFeatureContainer} {
    display: flex;
    flex-direction: column;
  }
`

export const GeneToolTipContainer = createFragmentContainer(
  GeneToolTip,
  graphql`
    fragment GeneToolTip_gene on Gene {
      description
      href
      image {
        cropped(width: 240, height: 160) {
          url
        }
      }
      name
    }
  `
)

{'fraction_non_alphanumeric': 0.12356164383561644, 'fraction_numerical': 0.010410958904109589, 'mean_word_length': 3.0793296089385476, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3101139', 'n_tokens_mistral': 1185, 'n_tokens_neox': 1118, 'n_words': 276}