<commit_before>( function(Dataflow) {

  var Edge = Dataflow.prototype.module("edge");

  var template = 
    '<div class="dataflow-plugin-inspector-title">'+
      '<h1>Edge</h1>'+
      '<h2 class="dataflow-edge-inspector-id"><%- id %></h2>'+
    '</div>'+
    '<div class="dataflow-edge-inspector-route-choose"></div>'+
    '<ul class="dataflow-edge-inspector-events"></ul>';

  var logTemplate = '<li class="<%- type %>"><%- group %><%- data %></li>';
  
  Edge.InspectView = Backbone.View.extend({
    tagName: "div",
    className: "dataflow-edge-inspector",
    positions: null,
    template: _.template(template),
    showLogs: 20,
    initialize: function() {
      this.$el.html( this.template(this.model) );

      var $choose = this.$el.children(".dataflow-edge-inspector-route-choose");
      this.$log = this.$el.children('.dataflow-edge-inspector-events');

      var changeRoute = function(event){
        var route = $(event.target).data("route");
        this.model.set("route", route);
      }.bind(this);
      
      // Make buttons
      for (var i=0; i<12; i++) {
        var button = $("<button>")
          .data("route", i)
          .addClass("route"+i)
          .click(changeRoute);
        if (i === this.model.get("route")){
          button.addClass("active");
        }
        $choose.append(button);
      }

      this.listenTo(this.model, "change:route", this.render);
      this.listenTo(this.model, "remove", this.remove);
      this.listenTo(this.model.get('log'), 'add', this.renderLog);
      this.renderLog();
    },
    render: function(){
      var route = this.model.get("route");
      var $choose = this.$el.children(".dataflow-edge-inspector-route-choose");
      $choose.children(".active").removeClass("active");
      $choose.children(".route"+route).addClass("active");
      return this;
    },
    renderLog: function () {
      var frag = document.createDocumentFragment();
      var logs = this.model.get('log');
      var logsToShow;
      if (logs.length > this.showLogs) {
        logsToShow = logs.rest(logs.length - this.showLogs);
      } else {
        logsToShow = logs.toArray();
      }
      _.each(logsToShow, function (item) {
        this.renderLogItem(item, frag);
      }, this);
      this.$log.html(frag);
      this.$log[0].scrollTop = this.$log[0].scrollHeight;
    },
    renderLogItem: function (item, fragment) {
      var html = $(_.template(logTemplate, item.toJSON()));
      if (fragment && fragment.appendChild) {
        fragment.appendChild(html[0]);
      } else {<commit_msg>Debounce renderLog for better performance<commit_after>( function(Dataflow) {

  var Edge = Dataflow.prototype.module("edge");

  var template = 
    '<div class="dataflow-plugin-inspector-title">'+
      '<h1>Edge</h1>'+
      '<h2 class="dataflow-edge-inspector-id"><%- id %></h2>'+
    '</div>'+
    '<div class="dataflow-edge-inspector-route-choose"></div>'+
    '<ul class="dataflow-edge-inspector-events"></ul>';

  var logTemplate = '<li class="<%- type %>"><%- group %><%- data %></li>';
  
  Edge.InspectView = Backbone.View.extend({
    tagName: "div",
    className: "dataflow-edge-inspector",
    positions: null,
    template: _.template(template),
    showLogs: 20,
    initialize: function() {
      this.$el.html( this.template(this.model) );

      var $choose = this.$el.children(".dataflow-edge-inspector-route-choose");
      this.$log = this.$el.children('.dataflow-edge-inspector-events');

      var changeRoute = function(event){
        var route = $(event.target).data("route");
        this.model.set("route", route);
      }.bind(this);
      
      // Make buttons
      for (var i=0; i<12; i++) {
        var button = $("<button>")
          .data("route", i)
          .addClass("route"+i)
          .click(changeRoute);
        if (i === this.model.get("route")){
          button.addClass("active");
        }
        $choose.append(button);
      }

      this.listenTo(this.model, "change:route", this.render);
      this.listenTo(this.model, "remove", this.remove);
      this.listenTo(this.model.get('log'), 'add', _.debounce(this.renderLog.bind(this), 200));
      this.renderLog();
    },
    render: function(){
      var route = this.model.get("route");
      var $choose = this.$el.children(".dataflow-edge-inspector-route-choose");
      $choose.children(".active").removeClass("active");
      $choose.children(".route"+route).addClass("active");
      return this;
    },
    renderLog: function () {
      var frag = document.createDocumentFragment();
      var logs = this.model.get('log');
      var logsToShow;
      if (logs.length > this.showLogs) {
        logsToShow = logs.rest(logs.length - this.showLogs);
      } else {
        logsToShow = logs.toArray();
      }
      _.each(logsToShow, function (item) {
        this.renderLogItem(item, frag);
      }, this);
      this.$log.html(frag);
      this.$log[0].scrollTop = this.$log[0].scrollHeight;
    },
    renderLogItem: function (item, fragment) {
      var html = $(_.template(logTemplate, item.toJSON()));
      if (fragment && fragment.appendChild) {
        fragment.appendChild(html[0]);
      } else {
{'fraction_non_alphanumeric': 0.1857638888888889, 'fraction_numerical': 0.005208333333333333, 'mean_word_length': 2.7088698140200287, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, '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': '2865333', 'n_tokens_mistral': 1666, 'n_tokens_neox': 1612, 'n_words': 283}