<commit_before>import { registerComponent, Components, getSetting } from 'meteor/vulcan:core';
import React from 'react';
import { withStyles } from '@material-ui/core/styles'
import { truncate } from '../../lib/editor/ellipsize';
import withUser from "../common/withUser";
import { postHighlightStyles, commentBodyStyles } from '../../themes/stylePiping'
import { Posts } from '../../lib/collections/posts';
import CommentIcon from '@material-ui/icons/ModeComment';
import Card from '@material-ui/core/Card';

const styles = theme => ({
  root: {
    width: 500,
    position: "relative",
    padding: theme.spacing.unit*1.5,
    paddingTop: theme.spacing.unit,
    paddingBottom: theme.spacing.unit,
    '& img': {
      maxHeight: "200px"
    },
    [theme.breakpoints.down('xs')]: {
      display: "none"
    },
  },
  title: {
    marginBottom: -6
  },
  tooltipInfo: {
    fontStyle: "italic",
    ...commentBodyStyles(theme),
    color: theme.palette.grey[600]
  },
  highlight: {
    ...postHighlightStyles(theme),
    marginTop: theme.spacing.unit*3,
    marginBottom: theme.spacing.unit*2.5,
    wordBreak: 'break-word',
    fontSize: "1.1rem",
    '& img': {
      display:"none"
    },
    '& h1': {
      fontSize: "1.2rem"
    },
    '& h2': {
      fontSize: "1.2rem"
    },
    '& h3': {
      fontSize: "1.1rem"
    },
    '& hr': {
      display: "none"
    }
  },
  commentIcon: {
    height: 15,
    width: 15,
    color: theme.palette.grey[400],
    position: "relative",
    top: 3,
    marginRight: 6,
    marginLeft: 12
  },
  comments: {
    [theme.breakpoints.up('sm')]: {
      float: "right"
    },
    [theme.breakpoints.down('xs')]: {
      display: "inline-block",
      marginRight: theme.spacing.unit*2,
    },
  },
  karma: {
    [theme.breakpoints.up('sm')]: {
      float: "right"
    },
    [theme.breakpoints.down('xs')]: {
      display: "inline-block",
      float: "left"
    },
  },
  comment: {
    marginTop: theme.spacing.unit*1.5
  },
  bookmarkButton: {
    float: "right"
  }
})

const metaName = getSetting('forumType') === 'EAForum' ? 'Community' : 'Meta'

const getPostCategory = (post) => {
  const categories = [];
  const postOrQuestion = post.question ? "Question" : "Post"

  if (post.isEvent) categories.push(`Event`)
  if (post.curatedDate) categories.push(`Curated ${postOrQuestion}`)
  if (post.af) categories.push(`AI Alignment Forum ${postOrQuestion}`);
  if (post.meta) categories.push(`${metaName} ${postOrQuestion}`)
  if (post.frontpageDate && !post.curatedDate && !post.af) categories.push(`Frontpage ${postOrQuestion}`)

  if (categories.length > 0)
    return categories.join(', ');
  else
    return post.question ? `Question` : `Personal Blogpost`
}

const PostsPreviewTooltip = ({ showAllInfo, post, classes, truncateLimit=600, comment }) => {
  const { PostsUserAndCoauthors, PostsTitle, ContentItemBody, CommentsNode, BookmarkButton } = Components

  if (!post) return null

  const { wordCount = 0, htmlHighlight = "" } = post.contents || {}

  const highlight = truncate(htmlHighlight, truncateLimit)
  const renderCommentCount = showAllInfo && (Posts.getCommentCount(post) > 0)
  const renderWordCount = !comment && (wordCount > 0)

  return <Card className={classes.root}>
      <div className={classes.title}>
        <PostsTitle post={post} tooltip={false} wrap/>
      </div>
      <div className={classes.tooltipInfo}>
        { getPostCategory(post)}
        { showAllInfo && post.user && <span> by <PostsUserAndCoauthors post={post} simple/></span>}
        { renderCommentCount && <span className={classes.comments}>
          <CommentIcon className={classes.commentIcon}/>
            {Posts.getCommentCountStr(post)}
        </span>}
        { showAllInfo && <span className={classes.karma}>{Posts.getKarma(post)} karma</span>}
      </div>
      {comment
        ? <div className={classes.comment}>
            <CommentsNode
            truncated
            comment={comment}
            post={post}
            hoverPreview
            forceNotSingleLine
          /></div>
        : <ContentItemBody
            className={classes.highlight}
            dangerouslySetInnerHTML={{__html:highlight}}
            description={`post ${post._id}`}
          />
      }
      {renderWordCount && <div className={classes.tooltipInfo}>
        <span>
          {wordCount} words (approx. {Math.ceil(wordCount/300)} min read)
        </span>
        { showAllInfo && <span className={classes.bookmarkButton}><BookmarkButton post={post} /></span>}
      </div>}
  </Card>

}

registerComponent('PostsPreviewTooltip', PostsPreviewTooltip, withUser,
  withStyles(styles, { name: "PostsPreviewTooltip" })
);<commit_msg>Add tracking to hover previews within posts<commit_after>import { registerComponent, Components, getSetting } from 'meteor/vulcan:core';
import React from 'react';
import { withStyles } from '@material-ui/core/styles'
import { truncate } from '../../lib/editor/ellipsize';
import withUser from "../common/withUser";
import { postHighlightStyles, commentBodyStyles } from '../../themes/stylePiping'
import { Posts } from '../../lib/collections/posts';
import CommentIcon from '@material-ui/icons/ModeComment';
import Card from '@material-ui/core/Card';
import { captureEvent } from '../../lib/analyticsEvents';

const styles = theme => ({
  root: {
    width: 500,
    position: "relative",
    padding: theme.spacing.unit*1.5,
    paddingTop: theme.spacing.unit,
    paddingBottom: theme.spacing.unit,
    '& img': {
      maxHeight: "200px"
    },
    [theme.breakpoints.down('xs')]: {
      display: "none"
    },
  },
  title: {
    marginBottom: -6
  },
  tooltipInfo: {
    fontStyle: "italic",
    ...commentBodyStyles(theme),
    color: theme.palette.grey[600]
  },
  highlight: {
    ...postHighlightStyles(theme),
    marginTop: theme.spacing.unit*3,
    marginBottom: theme.spacing.unit*2.5,
    wordBreak: 'break-word',
    fontSize: "1.1rem",
    '& img': {
      display:"none"
    },
    '& h1': {
      fontSize: "1.2rem"
    },
    '& h2': {
      fontSize: "1.2rem"
    },
    '& h3': {
      fontSize: "1.1rem"
    },
    '& hr': {
      display: "none"
    }
  },
  commentIcon: {
    height: 15,
    width: 15,
    color: theme.palette.grey[400],
    position: "relative",
    top: 3,
    marginRight: 6,
    marginLeft: 12
  },
  comments: {
    [theme.breakpoints.up('sm')]: {
      float: "right"
    },
    [theme.breakpoints.down('xs')]: {
      display: "inline-block",
      marginRight: theme.spacing.unit*2,
    },
  },
  karma: {
    [theme.breakpoints.up('sm')]: {
      float: "right"
    },
    [theme.breakpoints.down('xs')]: {
      display: "inline-block",
      float: "left"
    },
  },
  comment: {
    marginTop: theme.spacing.unit*1.5
  },
  bookmarkButton: {
    float: "right"
  }
})

const metaName = getSetting('forumType') === 'EAForum' ? 'Community' : 'Meta'

const getPostCategory = (post) => {
  const categories = [];
  const postOrQuestion = post.question ? "Question" : "Post"

  if (post.isEvent) categories.push(`Event`)
  if (post.curatedDate) categories.push(`Curated ${postOrQuestion}`)
  if (post.af) categories.push(`AI Alignment Forum ${postOrQuestion}`);
  if (post.meta) categories.push(`${metaName} ${postOrQuestion}`)
  if (post.frontpageDate && !post.curatedDate && !post.af) categories.push(`Frontpage ${postOrQuestion}`)

  if (categories.length > 0)
    return categories.join(', ');
  else
    return post.question ? `Question` : `Personal Blogpost`
}

const PostsPreviewTooltip = ({ showAllInfo, post, classes, truncateLimit=600, comment }) => {
  const { PostsUserAndCoauthors, PostsTitle, ContentItemBody, CommentsNode, BookmarkButton } = Components

  if (!post) return null

  const { wordCount = 0, htmlHighlight = "" } = post.contents || {}

  const highlight = truncate(htmlHighlight, truncateLimit)
  const renderCommentCount = showAllInfo && (Posts.getCommentCount(post) > 0)
  const renderWordCount = !comment && (wordCount > 0)

  return <Card className={classes.root}>
      <div onMouseEnter={captureEvent("linkPreviewTriggered", {"Context": "post-body"})}> 
        <div className={classes.title}>
          <PostsTitle post={post} tooltip={false} wrap/>
        </div>
        <div className={classes.tooltipInfo}>
          { getPostCategory(post)}
          { showAllInfo && post.user && <span> by <PostsUserAndCoauthors post={post} simple/></span>}
          { renderCommentCount && <span className={classes.comments}>
            <CommentIcon className={classes.commentIcon}/>
              {Posts.getCommentCountStr(post)}
          </span>}
          { showAllInfo && <span className={classes.karma}>{Posts.getKarma(post)} karma</span>}
        </div>
        {comment
          ? <div className={classes.comment}>
              <CommentsNode
              truncated
              comment={comment}
              post={post}
              hoverPreview
              forceNotSingleLine
            /></div>
          : <ContentItemBody
              className={classes.highlight}
              dangerouslySetInnerHTML={{__html:highlight}}
              description={`post ${post._id}`}
            />
        }
        {renderWordCount && <div className={classes.tooltipInfo}>
          <span>
            {wordCount} words (approx. {Math.ceil(wordCount/300)} min read)
          </span>
          { showAllInfo && <span className={classes.bookmarkButton}><BookmarkButton post={post} /></span>}
        </div>}
      </div>
  </Card>

}

registerComponent('PostsPreviewTooltip', PostsPreviewTooltip, withUser,
  withStyles(styles, { name: "PostsPreviewTooltip" })
);
{'fraction_non_alphanumeric': 0.1581727781230578, 'fraction_numerical': 0.010358400662937643, 'mean_word_length': 2.8900080580177274, 'pattern_counts': {'":': 1, '<': 57, '<?xml version=': 0, '>': 69, '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': '1691105', 'n_tokens_mistral': 3112, 'n_tokens_neox': 3006, 'n_words': 593}