<commit_before>(function() {

  /*
  * Filter's model
  *
  **/

  cdb.admin.mod.Filter = cdb.core.View.extend({

    tagName: 'li',
    className: 'filter histogram',

    events: {
      'click a.remove': '_remove'
    },

    initialize: function() {

      _.bindAll(this, "_barChart");

      this.model.bind('change:hist',  this._renderHist, this);
      this.model.bind('change:lower', this._renderRange, this);
      this.model.bind('change:upper', this._renderRange, this);
      this.model.bind('error', this._checkEmpty, this);

    },

    _renderHist: function() {

      var self = this;

      var histData = this.model.get('hist');

      var M = histData.length;

      if (histData.length == 1) {

        this.$(".loading").hide();
        this.$(".empty").hide();
        this.$(".range").hide();
        this.$(".only").fadeIn(150);

        return;
      }

      this._checkEmpty();

      var data = histData.map(function(x, i) {
        return { value: x };
      });

      var filter = crossfilter(data);

      var dim = function(k) {
        return filter.dimension(function (d) {
          return d[k];
        });
      }

      var def = function(k) {

        var dimK  = dim(k);

        var width = 325;

        var lower = self.model.get("lower");
        var upper = self.model.get("upper");

        // Inverse interpolation
        var span = self.model.get("upper_limit") - self.model.get("lower_limit")
        var bar_size = span/data.length;
        var l = (lower - self.model.get("lower_limit")) * data.length / span;
        var u = (upper - self.model.get("lower_limit")) * data.length / span;

        return self._barChart()
        .dimension(dimK)
        .group(data.map(function(d) { return parseFloat(d.value, 10); }))
        .round(function(v) {
          return Math.ceil(v);
        })
        .x(
          d3.scale.linear()
          .domain([0, data.length])
          .range([0, width])
        )
        .filter([l, u])
      }

      var chartDefs = [def('value')];

      var chartDivs = d3.select(".hist." + this.cid)
      .data(chartDefs)
      .each(function(chartDiv) {
        chartDiv.on("brush", renderAll).on("brushend", renderAll);
      });

      function renderAll() {
        chartDivs.each(function(method) {
          d3.select(this).call(method);
        });
      }

      renderAll();

    },

    render: function() {

      var self = this;

      this.$el.html(this.getTemplate('table/menu_modules/filters/templates/histogram')({
        legend: this.model.escape('column'),
        cid: self.cid
      }));

      return this;
    },

    _cleanString: function(s, n) {

      if (s) {
        s = s.replace(/<(?:.|\n)*?>/gm, ''); // strip HTML tags
        s = s.substr(0, n-1) + (s.length > n ? '&hellip;' : ''); // truncate string
      }

      return s;

    },

    _checkEmpty: function() {

      var self = this;

      setTimeout(function() {

        var hist = self.model.get("hist");

        if (hist) {

          if (hist.length > 1) {
            self.$(".empty").hide();
            self.$(".loading").hide();
            self.$(".range").fadeIn(250);
          } else {
            self.$(".loading").hide();
            self.$(".range").hide();
            self.$(".empty").hide();
            self.$(".only").fadeIn(150);
          }
        } else {
          self.$(".range").hide();
          self.$(".loading").hide();
          self.$(".empty").fadeIn(150);
        }}
      , 250);

      },

      _renderRange: function() {

        var lower = this.model.get('lower');
        var upper = this.model.get('upper');

        this.$('.range').html(lower + " - " + upper);

      },

      _remove: function(e) {
        e.preventDefault();
        e.stopPropagation();

        this.model.destroy();
      },

      _updateBounds:function(bounds, update) {

        if (bounds) {

          var n = this.model.get("hist").length;

          var lower_ = this.model.interpolate(bounds[0]/n);<commit_msg>Fixes loading state for histograms<commit_after>(function() {

  /*
  * Filter's model
  *
  **/

  cdb.admin.mod.Filter = cdb.core.View.extend({

    tagName: 'li',
    className: 'filter histogram',

    events: {
      'click a.remove': '_remove'
    },

    initialize: function() {

      _.bindAll(this, "_barChart");

      this.model.bind('change:hist',  this._renderHist, this);
      this.model.bind('change:lower', this._renderRange, this);
      this.model.bind('change:upper', this._renderRange, this);
      this.model.bind('error', this._checkEmpty, this);

    },

    _renderHist: function() {

      var self = this;

      var histData = this.model.get('hist');

      var M = histData.length;

      if (histData.length == 1) {

        this.$el.find(".legend").html(this._cleanString(this.model.escape('column'), 15) + ":");

        this.$(".loading").hide();
        this.$(".empty").hide();
        this.$(".range").hide();
        this.$(".only").fadeIn(150);

        return;
      }

      this._checkEmpty();

      var data = histData.map(function(x, i) {
        return { value: x };
      });

      var filter = crossfilter(data);

      var dim = function(k) {
        return filter.dimension(function (d) {
          return d[k];
        });
      }

      var def = function(k) {

        var dimK  = dim(k);

        var width = 325;

        var lower = self.model.get("lower");
        var upper = self.model.get("upper");

        // Inverse interpolation
        var span = self.model.get("upper_limit") - self.model.get("lower_limit")
        var bar_size = span/data.length;
        var l = (lower - self.model.get("lower_limit")) * data.length / span;
        var u = (upper - self.model.get("lower_limit")) * data.length / span;

        return self._barChart()
        .dimension(dimK)
        .group(data.map(function(d) { return parseFloat(d.value, 10); }))
        .round(function(v) {
          return Math.ceil(v);
        })
        .x(
          d3.scale.linear()
          .domain([0, data.length])
          .range([0, width])
        )
        .filter([l, u])
      }

      var chartDefs = [def('value')];

      var chartDivs = d3.select(".hist." + this.cid)
      .data(chartDefs)
      .each(function(chartDiv) {
        chartDiv.on("brush", renderAll).on("brushend", renderAll);
      });

      function renderAll() {
        chartDivs.each(function(method) {
          d3.select(this).call(method);
        });
      }

      renderAll();

    },

    render: function() {

      var self = this;

      this.$el.html(this.getTemplate('table/menu_modules/filters/templates/histogram')({
        legend: this.model.escape('column'),
        cid: self.cid
      }));

      return this;
    },

    _cleanString: function(s, n) {

      if (s) {
        s = s.replace(/<(?:.|\n)*?>/gm, ''); // strip HTML tags
        s = s.substr(0, n-1) + (s.length > n ? '&hellip;' : ''); // truncate string
      }

      return s;

    },

    _checkEmpty: function() {

      var self = this;

      setTimeout(function() {

        var hist = self.model.get("hist");

        if (hist) {

          if (hist.length > 1) {

            self.$(".empty").hide();
            self.$(".loading").hide();
            self.$(".range").fadeIn(250);
          } else {

            self.$el.find(".legend").html(self.model.escape('column'));

            self.$(".loading").hide();
            self.$(".range").hide();
            self.$(".empty").hide();
            self.$(".only").fadeIn(150);
          }
        } else {

          self.$el.find(".legend").html(self._cleanString(self.model.escape('column'), 25) + ":");

          self.$(".range").hide();
          self.$(".loading").hide();
          self.$(".empty").fadeIn(150);
        }}
      , 250);

      },

      _renderRange: function() {

        var lower = this.model.get('lower');
        var upper = this.model.get('upper');

        this.$('.range').html(lower + " - " + upper);

      },

      _remove: function(e) {
        e.preventDefault();
        e.stopPropagation();

        this.model.destroy();
      },

      _updateBounds:function(bounds, update) {

        if (bounds) {

          var n = this.model.get("hist").length;

          var lower_ = this.model.interpolate(bounds[0]/n);
{'fraction_non_alphanumeric': 0.1836514223982715, 'fraction_numerical': 0.007682151002280638, 'mean_word_length': 1.8263229308005426, 'pattern_counts': {'":': 2, '<': 5, '<?xml version=': 0, '>': 9, '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': '2277828', 'n_tokens_mistral': 2721, 'n_tokens_neox': 2551, 'n_words': 454}