<commit_before>import React from 'react'
import { List, ListItem } from 'material-ui/List'
import Subheader from 'material-ui/Subheader'
import Checkbox from 'material-ui/Checkbox'

const styles = {
  playlist: {
    marginLeft: '8%',
  },
  subheaderContainer: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  subheader: {
    width: 'auto',
  },
}

export default class SaveList extends React.Component {

  shouldComponentUpdate(nextProps) {
    return nextProps.checkedArr !== this.props.checkedArr
  }

  render() {
    return (
      <List>
        <div style={styles.subheaderContainer}>
          <Subheader style={styles.subheader}>
            {this.props.numTracksCategorized}/{this.props.totalTracks} tracks have genre metadata
          </Subheader>
          <Subheader style={styles.subheader}>{this.props.playlistArr.length} Playlists</Subheader>
        </div>
        {this.props.checkedArr.map((curr, i) =>
          <ListItem
            key={`li${i}`}
            primaryText={this.props.playlistArr[i][0]}
            secondaryText={`${this.props.playlistArr[i][1]} tracks`}
            style={styles.playlist}
            leftCheckbox={<commit_msg>Combine subheaders<commit_after>import React from 'react'
import { List, ListItem } from 'material-ui/List'
import Subheader from 'material-ui/Subheader'
import Checkbox from 'material-ui/Checkbox'

const styles = {
  playlist: {
    marginLeft: '8%',
  },
}

export default class SaveList extends React.Component {

  shouldComponentUpdate(nextProps) {
    return nextProps.checkedArr !== this.props.checkedArr
  }

  render() {
    return (
      <List>
        <div>
          <Subheader>
            {this.props.numTracksCategorized}/{this.props.totalTracks} tracks have genre metadata and were categorized into {this.props.playlistArr.length} playlists
          </Subheader>
        </div>
        {this.props.checkedArr.map((curr, i) =>
          <ListItem
            key={`li${i}`}
            primaryText={this.props.playlistArr[i][0]}
            secondaryText={`${this.props.playlistArr[i][1]} tracks`}
            style={styles.playlist}
            leftCheckbox={
{'fraction_non_alphanumeric': 0.13019390581717452, 'fraction_numerical': 0.002770083102493075, 'mean_word_length': 2.8421985815602837, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, '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': '1056757', 'n_tokens_mistral': 653, 'n_tokens_neox': 652, 'n_words': 125}