<commit_before>import { Components, registerComponent, } from '../../lib/vulcan-lib';
import NoSSR from 'react-no-ssr';
import React from 'react';
import Typography from '@material-ui/core/Typography';
import { legacyBreakpoints } from '../../lib/utils/theme';
import classNames from 'classnames';

const styles = theme => ({
  root: {
    ...theme.typography.postStyle,

    width: "calc(33% - 5px)",
    boxShadow: theme.boxShadow,
    paddingBottom: 0,
    marginBottom: 10,
    display: "flex",
    flexDirection: "column",

    "&:hover": {
      boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
      color: "rgba(0,0,0,0.87)",
    },

    [legacyBreakpoints.maxSmall]: {
      width: "335px !important",
    },
    [legacyBreakpoints.maxTiny]: {
      width: "100% !important",
    },
  },

  title: {
    fontSize: 16,
    lineHeight: 1.0,
    maxHeight: 32,
    display: "-webkit-box",
    "-webkit-line-clamp": 2,
    "-webkit-box-orient": "vertical",
    textOverflow: "ellipsis",
    overflow: "hidden",
    fontVariant: "small-caps",
    marginBottom: 0,
    "&:hover": {
      color: "inherit",
      textDecoration: "none",
    }
  },

  draft: {
    textTransform: "uppercase",
    color: "rgba(100, 169, 105, 0.9)",
  },

  author: {
    color: "rgba(0,0,0,0.5)",
  },

  meta: {
    paddingLeft: 12,
    paddingTop: 12,
    paddingRight: 8,
    paddingBottom: 5,
    flexGrow: 1,
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    background: "white",
  },
  bookItemStyle: {
    paddingLeft: 0,
    paddingRight: 0
  },
  hiddenAuthor: {
    paddingBottom: 8
  },
  image: {
    backgroundColor: "#eee",
    display: 'block',
    height: 95,
    [legacyBreakpoints.maxSmall]: {
      height: "124px !important",
    },
    "& img": {
      width: "100%",
      height: 95,
      [legacyBreakpoints.maxSmall]: {
        width: "335px !important",
        height: "124px !important",
      },
      [legacyBreakpoints.maxTiny]: {
        width: "100% !important",
      },
    }
  }
})

const SequencesGridItem = ({ sequence, showAuthor=false, classes, bookItemStyle }: {
  sequence: SequencesPageFragment,
  showAuthor?: boolean,
  classes: ClassesType,
  bookItemStyle?: boolean
}) => {
  const getSequenceUrl = () => {
    return '/s/' + sequence._id
  }
  const { LinkCard } = Components;
  const url = getSequenceUrl()

  return <LinkCard className={classes.root} to={url} tooltip={sequence.contents.plaintextDescription.slice(0, 750)}>
    <div className={classes.image}>
      <NoSSR>
        <Components.CloudinaryImage
          publicId={sequence.gridImageId || "sequences/vnyzzznenju0hzdv6pqb.jpg"}
          height={124}<commit_msg>Add null-check, just in case<commit_after>import { Components, registerComponent, } from '../../lib/vulcan-lib';
import NoSSR from 'react-no-ssr';
import React from 'react';
import Typography from '@material-ui/core/Typography';
import { legacyBreakpoints } from '../../lib/utils/theme';
import classNames from 'classnames';

const styles = theme => ({
  root: {
    ...theme.typography.postStyle,

    width: "calc(33% - 5px)",
    boxShadow: theme.boxShadow,
    paddingBottom: 0,
    marginBottom: 10,
    display: "flex",
    flexDirection: "column",

    "&:hover": {
      boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
      color: "rgba(0,0,0,0.87)",
    },

    [legacyBreakpoints.maxSmall]: {
      width: "335px !important",
    },
    [legacyBreakpoints.maxTiny]: {
      width: "100% !important",
    },
  },

  title: {
    fontSize: 16,
    lineHeight: 1.0,
    maxHeight: 32,
    display: "-webkit-box",
    "-webkit-line-clamp": 2,
    "-webkit-box-orient": "vertical",
    textOverflow: "ellipsis",
    overflow: "hidden",
    fontVariant: "small-caps",
    marginBottom: 0,
    "&:hover": {
      color: "inherit",
      textDecoration: "none",
    }
  },

  draft: {
    textTransform: "uppercase",
    color: "rgba(100, 169, 105, 0.9)",
  },

  author: {
    color: "rgba(0,0,0,0.5)",
  },

  meta: {
    paddingLeft: 12,
    paddingTop: 12,
    paddingRight: 8,
    paddingBottom: 5,
    flexGrow: 1,
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    background: "white",
  },
  bookItemStyle: {
    paddingLeft: 0,
    paddingRight: 0
  },
  hiddenAuthor: {
    paddingBottom: 8
  },
  image: {
    backgroundColor: "#eee",
    display: 'block',
    height: 95,
    [legacyBreakpoints.maxSmall]: {
      height: "124px !important",
    },
    "& img": {
      width: "100%",
      height: 95,
      [legacyBreakpoints.maxSmall]: {
        width: "335px !important",
        height: "124px !important",
      },
      [legacyBreakpoints.maxTiny]: {
        width: "100% !important",
      },
    }
  }
})

const SequencesGridItem = ({ sequence, showAuthor=false, classes, bookItemStyle }: {
  sequence: SequencesPageFragment,
  showAuthor?: boolean,
  classes: ClassesType,
  bookItemStyle?: boolean
}) => {
  const getSequenceUrl = () => {
    return '/s/' + sequence._id
  }
  const { LinkCard } = Components;
  const url = getSequenceUrl()

  return <LinkCard className={classes.root} to={url} tooltip={sequence.contents.plaintextDescription?.slice(0, 750)}>
    <div className={classes.image}>
      <NoSSR>
        <Components.CloudinaryImage
          publicId={sequence.gridImageId || "sequences/vnyzzznenju0hzdv6pqb.jpg"}
          height={124}
{'fraction_non_alphanumeric': 0.1611646884272997, 'fraction_numerical': 0.032640949554896145, 'mean_word_length': 2.8302556818181817, 'pattern_counts': {'":': 10, '<': 11, '<?xml version=': 0, '>': 15, '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': '7058067', 'n_tokens_mistral': 1970, 'n_tokens_neox': 1822, 'n_words': 385}