code: function updateDOM(newFilterTree) {
          var newTableFilter = newFilterTree.children[0],
              newColumnFilters = newFilterTree.children[1];
  
          if (!filterTree) {
              tabz.folder('#tabTableFilterQuery').appendChild(newTableFilter.el);
              tabz.folder('#tabColumnFilterQuery').appendChild(newColumnFilters.el);
          } else {
              tabz.folder('#tabTableFilterQuery').replaceChild(newTableFilter.el, tableFilter.el);
              tabz.folder('#tabColumnFilterQuery').replaceChild(newColumnFilters.el, columnFilters.el);
          }
  
          filterTree = newFilterTree;
          tableFilter = newTableFilter;
          columnFilters = newColumnFilters;
      }
docs: Normally FilterNode.setState() updates the DOM on its own by updating the root element in `filterTree.el`. However, in this particular UI, the root element is not in the DOM. Instead we are showing two subtrees in two different places in the DOM. These are updated here.
  @param {FilterTree} newFilterTree - May be an entirely new tree; or may be `filterTree` itself when `filterTree.setState` was called which triggered an internal replaceChild on `filterTree.el`.