<commit_before>(function() {
  // TODO: allow treeview to be attached to any DOM element
  // TODO: make each element in the treeview into its own element
  var treeview = {
    require: [
      Draft.json || 'json'
    ],

    createTreeView: function() {
      var treeView = document.createElement('div');
      treeView.className = 'tree-view';

      // treeView.appendChild(document.createElement('span'));
      // treeView.firstChild.textContent = 'Document Model:';

      var pre = document.createElement('pre');
      treeView.appendChild(pre);

      // Make sure this.dom is initialized
      this.dom = this.dom || {};
      this.dom.treeView = treeView;

      treeView.addEventListener('update', function(e) {
        console.log('tree-view event:', e.detail.element);
        e.detail.element.updateTreeView();
      });

      return this.updateTreeView();
    },

    updateTreeView: function() {
      var replacer = function(key, value) {
        if (key == 'dom' || key == 'parent' || key == 'id' || key == 'type') {
          return undefined;
        } else if (key == 'children') {
          var obj = {};
          for (let element of value) {
            obj[Draft.domID(element)] = element;
          }
          return obj;
        } else {
          return value;
        }
      };

      var treeString = this.stringify(replacer).split('"').join('');
      this.dom.treeView.firstChild.textContent = Draft.domID(this) + ': ' + treeString;

      var longestLine = treeString.split('\n').reduce(function(a, b) {
        return a.length > b.length ? a : b;
      });
      // FIXME: change 84 to a non-hardcoded value
      this.dom.treeView.style.width = Math.min(longestLine.length + 4, 84) + 'ch';<commit_msg>Use proper event listener<commit_after>(function() {
  // TODO: allow treeview to be attached to any DOM element
  // TODO: make each element in the treeview into its own element
  var treeview = {
    require: [
      Draft.json || 'json'
    ],

    createTreeView: function() {
      var treeView = document.createElement('div');
      treeView.className = 'tree-view';

      // treeView.appendChild(document.createElement('span'));
      // treeView.firstChild.textContent = 'Document Model:';

      var pre = document.createElement('pre');
      treeView.appendChild(pre);

      // Make sure this.dom is initialized
      this.dom = this.dom || {};
      this.dom.treeView = treeView;

      this.node.addEventListener('update', function(e) {
        // e.stopPropagation();
        e.currentTarget.element.updateTreeView();
      }, false);

      return this.updateTreeView();
    },

    updateTreeView: function() {
      var replacer = function(key, value) {
        if (key == 'node' || key == 'dom' || key == 'doc' || key == 'parent' || key == 'id' || key == 'type') {
          return undefined;
        } else if (key == 'children') {
          var obj = {};
          for (let element of value) {
            obj[Draft.domID(element)] = element;
          }
          return obj;
        } else {
          return value;
        }
      };

      var treeString = this.stringify(replacer).split('"').join('');
      this.dom.treeView.firstChild.textContent = Draft.domID(this) + ': ' + treeString;

      var longestLine = treeString.split('\n').reduce(function(a, b) {
        return a.length > b.length ? a : b;
      });
      // FIXME: change 84 to a non-hardcoded value
      this.dom.treeView.style.width = Math.min(longestLine.length + 4, 84) + 'ch';
{'fraction_non_alphanumeric': 0.14870628376457207, 'fraction_numerical': 0.0028433323855558716, 'mean_word_length': 2.2940074906367043, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '3258578', 'n_tokens_mistral': 1045, 'n_tokens_neox': 1015, 'n_words': 247}