<commit_before>// takes node and edge data and out node and edge svgs
//
var React = require('react')
var Url = require('url')
var r = require('r-dom')
var map = require('lodash.map')
var debug = require('debug')('holodex:tag-group')
var keys = require('lodash.keys')
var reduce = require('lodash.reduce')
var clone = require('lodash.clone')

var Tag = require('./tag')
var TagSelect = require('./tag-select')
var config = require('config')

var vars = require('ui/vars')

var prefix = Url.format(config.api)

var style = {
  index: {
    marginTop: vars.gutterWidth/2,
    marginLeft: vars.gutterWidth,
    display: 'flex',
    flexDirection: 'column'
  },
  triple: {
    order: 0,
    display: 'flex',
    flexDirection: 'row'
  },
  tripleTag: {
  },
  filters: {
    marginLeft: vars.gutterWidth/2,
    order: 1,
    display: 'flex',
    flexDirection: 'column'
  },
  filterTag: {
    marginTop: vars.gutterWidth/3
  },
  tagInputContainer: {
    order: 2,
    marginTop: vars.gutterWidth/3,
    marginLeft: vars.gutterWidth/2
  },
  tagContainer: {
    marginRight: vars.gutterWidth/4,
    display: 'flex',
    flexDirection: 'row'
  },
  iconStyle: {
    lineHeight: '40px',
    marginRight: vars.gutterWidth/4
  }
}

module.exports = React.createClass({

  propTypes: {
    style: React.PropTypes.object,
    tagData: React.PropTypes.object.isRequired,
    updateTag: React.PropTypes.func.isRequired,
    model: React.PropTypes.object,
    cancelIcon: React.PropTypes.node,
    Icon: React.PropTypes.node
  },

  render: function () {
    debug('props', this.props)
    var tagData = this.props.tagData
    var cancelIcon = this.props.cancelIcon
    debug('tagData', tagData)
    var withPred = tagData.triple.predicate.active
    var pluralSubj = tagData.triple.subject.isPlural
    this.style = style

    var filters = tagData.filters.reduce(function (memo, filter, i) {
      if (filter.active) {
        var icon = filter.type === 'Role' ? 'circle-outline' : 'long-arrow-right'
        var iconStyle = clone(this.style.iconStyle)
        iconStyle.color = filter.color
        memo.push(r.div({ className: 'tag-container', style: this.style.tagContainer }, [
          r.div({ className: 'icon-container', style: iconStyle }, [r(this.props.Icon, { icon: icon })]),
          r(Tag, {
            color: filter.color,
            icon: cancelIcon,
            label: filter.label,
            onIconClick: this.props.updateTag('filters', filter.id, false),
            trailingCancel: true
          })
        ])
        )
      }
      return memo
    }.bind(this), [])

    return r.div({ className: 'tags', style: this.style.index }, [
      r.div({ className: 'triple', style: this.style.triple },
        reduce(tagData.triple, function (memo, expression, key, triple) {
            if (expression.active) {<commit_msg>tag-group component state holds options an tags<commit_after>// takes node and edge data and out node and edge svgs
//
var React = require('react')
var Url = require('url')
var r = require('r-dom')
var map = require('lodash.map')
var debug = require('debug')('holodex:tag-group')
var keys = require('lodash.keys')
var reduce = require('lodash.reduce')
var clone = require('lodash.clone')

var Tag = require('./tag')
var TagSelect = require('./tag-select')
var config = require('config')
var getHeaders = require('./get-headers')
var getContextTags = require('./get-context-tags')
var getOptions = require('./get-options')

var vars = require('ui/vars')

var prefix = Url.format(config.api)

var style = {
  index: {
    marginTop: vars.gutterWidth/2,
    marginLeft: vars.gutterWidth,
    display: 'flex',
    flexDirection: 'column'
  },
  triple: {
    order: 0,
    display: 'flex',
    flexDirection: 'row'
  },
  tripleTag: {
  },
  filters: {
    marginLeft: vars.gutterWidth/2,
    order: 1,
    display: 'flex',
    flexDirection: 'column'
  },
  filterTag: {
    marginTop: vars.gutterWidth/3
  },
  tagInputContainer: {
    order: 2,
    marginTop: vars.gutterWidth/3,
    marginLeft: vars.gutterWidth/2
  },
  tagContainer: {
    marginRight: vars.gutterWidth/4,
    display: 'flex',
    flexDirection: 'row'
  },
  iconStyle: {
    lineHeight: '40px',
    marginRight: vars.gutterWidth/4
  }
}

module.exports = React.createClass({

  propTypes: {
    style: React.PropTypes.object,
    tagData: React.PropTypes.object.isRequired,
    updateTag: React.PropTypes.func.isRequired,
    model: React.PropTypes.object,
    cancelIcon: React.PropTypes.node,
    Icon: React.PropTypes.node
  },

  getInitialState: function () {
    var headers
    var contextTags
    var options
    if (this.props.model.filtersByType) {
      headers = getHeaders(this.props.model.filtersByType.targetAgent)
      contextTags = getContextTags(this.props.model)
      options = getOptions(this.props.model)
    }

    return {
      headers: headers,
      contextTags: contextTags,
      options: options
    }
  },

  componentWillReceiveProps: function (nextProps) {
    if (nextProps.model) {
      var headers = getHeaders(this.props.model.filtersByType.targetAgent)
      var contextTags = this.props.model.filtersByType.context ? getContextTags(this.props.model) : []
      var options = getOptions(nextProps.model)
      this.setState({ header: headers, contextTags: contextTags, options: options })
    }
  },

  render: function () {
    debug('state', this.state)
    var tagData = this.props.tagData
    var cancelIcon = this.props.cancelIcon
    var withPred = tagData.triple.predicate.active
    var pluralSubj = tagData.triple.subject.isPlural
    this.style = style

    var filters = tagData.filters.reduce(function (memo, filter, i) {
      if (filter.active) {
        var icon = filter.type === 'Role' ? 'circle-outline' : 'long-arrow-right'
        var iconStyle = clone(this.style.iconStyle)
        iconStyle.color = filter.color
        memo.push(r.div({ className: 'tag-container', style: this.style.tagContainer }, [
          r.div({ className: 'icon-container', style: iconStyle }, [r(this.props.Icon, { icon: icon })]),
          r(Tag, {
            color: filter.color,
            icon: cancelIcon,
            label: filter.label,
            onIconClick: this.props.updateTag('filters', filter.id, false),
            trailingCancel: true
          })
        ])
        )
      }
      return memo
    }.bind(this), [])

    return r.div({ className: 'tags', style: this.style.index }, [
      r.div({ className: 'triple', style: this.style.triple },
        reduce(tagData.triple, function (memo, expression, key, triple) {
            if (expression.active) {
{'fraction_non_alphanumeric': 0.13783212560386474, 'fraction_numerical': 0.0036231884057971015, 'mean_word_length': 2.903948143783147, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '2753012', 'n_tokens_mistral': 2121, 'n_tokens_neox': 2097, 'n_words': 464}