/* istanbul ignore file */
// Original author: kennyluck
//
// Kenny's Notes:
/* places to generate SPARQL update: clearInputAndSave() pasteFromClipboard()->insertTermTo();
                                  undetermined statement generated formUndetStat()
                                                                 ->fillInRequest()
   ontological issues
    temporarily using the tabont namespace
    clipboard: 'predicates' 'objects' 'all'(internal)
    request: 'from' 'to' 'message' 'Request'
*/

const UI = require('solid-ui')
const $rdf = UI.rdf
const panes = require('pane-registry')

let UserInputFormula // Formula to store references of user's work
let TempFormula // Formula to store incomplete triples (Requests),
// temporarily disjoint with kb to avoid bugs

module.exports = function UserInput (outline) {
  const kb = UI.store

  const myDocument = outline.document // is this ok?
  // UI.log.warn("myDocument when it's set is "+myDocument.location);
  this.menuId = 'predicateMenu1'

  /* //namespace information, as a subgraph of the knowledge base, is built in showMenu
    this.namespaces={};

    for (var name in UI.ns) {
        this.namespaces[name] = UI.ns[name]('').uri;
    }
    var NameSpaces=this.namespaces;
    */

  // hq, print and trim functions
  const qp = function qp (str) {
    console.log(str + '\n')
  }

  // var tabont = UI.ns.tabont;
  // var foaf = UI.ns.foaf
  const rdf = UI.ns.rdf
  // var RDFS = UI.ns.rdfs
  // var OWL = UI.ns.owl
  // var dc = UI.ns.dc
  // var rss = UI.ns.rss
  // var contact = UI.ns.contact
  // var mo = UI.ns.mo
  const bibo = UI.rdf.Namespace('http://purl.org/ontology/bibo/') // hql for pubsPane
  // var dcterms = UI.rdf.Namespace('http://purl.org/dc/terms/')
  const dcelems = UI.rdf.Namespace('http://purl.org/dc/elements/1.1/')

  let movedArrow = false // hq

  // var updateService=new updateCenter(kb);

  if (!UserInputFormula) {
    UserInputFormula = new UI.rdf.Formula()
    UserInputFormula.superFormula = kb
    // UserInputFormula.registerFormula("Your Work");
  }
  if (!TempFormula) TempFormula = new UI.rdf.IndexedFormula()
  // Use RDFIndexedFormula so add returns the statement
  TempFormula.name = 'TempFormula'
  if (!UI.store.updater) UI.store.updater = new UI.rdf.UpdateManager(kb)

  return {
    // updateService: updateService,

    sparqler: UI.store.updater,
    lastModified: null, // the last <input> being modified, .isNew indicates whether it's a new input
    lastModifiedStat: null, // the last statement being modified
    statIsInverse: false, // whether the statement is an inverse

    /**
     *  Triggering Events: event entry points, should be called only from outline.js but not anywhere else
     *                     in userinput.js, should be as short as possible, function names to be discussed
     */

    //  Called when the blue cross under the default pane is clicked.
    //  Add a new row to a property list ( P and O)
    addNewPredicateObject: function addNewPredicateObject (e) {
      if (UI.utils.getTarget(e).className !== 'bottom-border-active') return
      const This = outline.UserInput
      const target = UI.utils.getTarget(e)

      // UI.log.warn(ancestor(target,'TABLE').textContent);
      const insertTr = myDocument.createElement('tr')
      UI.utils
        .ancestor(target, 'DIV')
        .insertBefore(insertTr, UI.utils.ancestor(target, 'TR'))
      const tempTr = myDocument.createElement('tr')
      const reqTerm1 = This.generateRequest('(TBD)', tempTr, true)
      insertTr.appendChild(tempTr.firstChild)
      const reqTerm2 = This.generateRequest(
        '(Enter text or drag an object onto this field)',
        tempTr,
        false
      )
      insertTr.appendChild(tempTr.firstChild)
      // there should be an elegant way of doing this

      // Take the why of the last TR and write to it.
      if (
        UI.utils.ancestor(target, 'TR').previousSibling && // there is a previous predicate/object line
        UI.utils.ancestor(target, 'TR').previousSibling.AJAR_statement
      ) {
        const preStat = UI.utils.ancestor(target, 'TR').previousSibling
          .AJAR_statement
        // This should always(?) input a non-inverse statement
        This.formUndetStat(
          insertTr,
          preStat.subject,
          reqTerm1,
          reqTerm2,
          preStat.why,
          false
        )
      } else {
        // no previous row: write to the document defining the subject
        const subject = UI.utils.getAbout(
          kb,
          UI.utils.ancestor(target.parentNode.parentNode, 'TD')
        )
        const doc = kb.sym(UI.rdf.Util.uri.docpart(subject.uri))
        This.formUndetStat(insertTr, subject, reqTerm1, reqTerm2, doc, false)
      }

      outline.walk('moveTo', insertTr.firstChild)
      UI.log.info(
        'addNewPredicateObject: selection = ' +
          outline
            .getSelection()
            .map(function (item) {
              return item.textContent
            })
            .join(', ')
      )
      this.startFillInText(outline.getSelection()[0])
    },

    //  Called when a blue cross on a predicate is clicked
    //  tr.AJAR_inverse stores whether the clicked predicate is an inverse one
    //  tr.AJAR_statement (an incomplete statement in TempFormula) stores the destination(why), now
    //  determined by the preceding one (is this good?)
    addNewObject: function addNewObject (e) {
      const predicateTd = UI.utils.getTarget(e).parentNode.parentNode
      // var predicateTerm = UI.utils.getAbout(kb, predicateTd)
      const isInverse = predicateTd.parentNode.AJAR_inverse
      // var titleTerm=UI.utils.getAbout(kb,UI.utils.ancestor(predicateTd.parentNode,'TD'));
      // set pseudo lastModifiedStat here
      this.lastModifiedStat = predicateTd.parentNode.AJAR_statement

      const insertTr = this.appendToPredicate(predicateTd)
      const reqTerm = this.generateRequest(' (Error) ', insertTr, false)
      const preStat = insertTr.previousSibling.AJAR_statement
      if (!isInverse) {
        this.formUndetStat(
          insertTr,
          preStat.subject,
          preStat.predicate,
          reqTerm,
          preStat.why,
          false
        )
      } else {
        this.formUndetStat(
          insertTr,
          reqTerm,
          preStat.predicate,
          preStat.object,
          preStat.why,
          true
        )
      }

      outline.walk('moveTo', insertTr.lastChild)
      this.startFillInText(insertTr.lastChild)
      // this.statIsInverse=false;
    },

    //  Called when delete is pressed
    Delete: function Delete (selectedTd) {
      this.deleteTriple(selectedTd, false)
    },
    //  Called when enter is pressed
    Enter: function Enter (selectedTd) {
      this.literalModification(selectedTd)
    },
    //  Called when a selected cell is clicked again
    Click: function Click (e) {
      const target = UI.utils.getTarget(e)
      if (UI.utils.getTerm(target).termType !== 'Literal') return
      this.literalModification(target)
      // this prevents the generated inputbox to be clicked again
      e.preventDefault()
      e.stopPropagation()
    },
    //  Called when paste is called (Ctrl+v)
    pasteFromClipboard: function pasteFromClipboard (address, selectedTd) {
      function termFrom (fromCode) {
        const term = outline.clipboard[fromCode].shift()
        if (term === null) {
          UI.log.warn('no more element in clipboard!')
          return
        }
        switch (fromCode) {
          case 'predicates':
          case 'objects': {
            const allArray = outline.clipboard.all
            for (let i = 0; true; i++) {
              if (term.sameTerm(allArray[i])) {
                allArray.splice(i, 1)
                break
              }
            }
            break
          }
          case 'all':
            throw new Error(
              'hostorical code not understood - what is theCollection?'
            )
          /*
            var isObject = term.sameTerm(theCollection('objects').elements[0])
            isObject ? outline.clipboard.objecs.shift() : outline.clipboard.predicates.shift() // drop the corresponding term
            return [term, isObject]
            break
            */
        }
        return term
      }
      let term
      switch (selectedTd.className) {
        case 'undetermined selected':
          term = selectedTd.nextSibling
            ? termFrom('predicates')
            : termFrom('objects')
          if (!term) return
          break
        case 'pred selected': // paste objects into this predicate
          term = termFrom('objects')
          if (!term) return
          break
        case 'selected': { // header <TD>, undetermined generated
          const returnArray = termFrom('all')
          if (!returnArray) return
          term = returnArray[0]
          this.insertTermTo(selectedTd, term, returnArray[1])
          return
        }
      }
      this.insertTermTo(selectedTd, term)
    },

    /**
     *  Intermediate Processing:
     */

    // a general entry point for any event except Click&Enter(goes to literalModification)
    // do a little inference to pick the right input box
    startFillInText: function startFillInText (selectedTd) {
      switch (this.whatSortOfEditCell(selectedTd)) {
        case 'DatatypeProperty-like':
          // this.clearMenu();
          // selectedTd.className='';
          UI.utils.emptyNode(selectedTd)
          this.lastModified = this.createInputBoxIn(
            selectedTd,
            ' (Please Input) '
          )
          this.lastModified.isNew = false

          this.lastModified.select()
          break
        case 'predicate':
          // the goal is to bring back all the menus (with autocomplete functionality
          // this.performAutoCompleteEdit(selectedTd,['PredicateAutoComplete',
          //                        this.choiceQuery('SuggestPredicateByDomain')]);
          this.performAutoCompleteEdit(selectedTd, 'PredicateAutoComplete')
          break
        case 'ObjectProperty-like':
        case 'no-idea':
          // menu should be either function that
          this.performAutoCompleteEdit(selectedTd, 'GeneralAutoComplete')

        /*
                //<code time="original">
                emptyNode(selectedTd);
                this.lastModified=this.createInputBoxIn(selectedTd,"");
                this.lastModified.select();
                this.lastModified.addEventListener('keypress',this.AutoComplete,false);
                //this pops up the autocomplete menu
                this.AutoComplete(1);
                //</code>
                */
      }
    },

    literalModification: function literalModification (selectedTd) {
      UI.log.debug(
        'entering literal Modification with ' +
          selectedTd +
          selectedTd.textContent
      )
      // var This=outline.UserInput;
      if (selectedTd.className.indexOf(' pendingedit') !== -1) {
        UI.log.warn(
          'The node you attempted to edit has a request still pending.\n' +
            'Please wait for the request to finish (the text will turn black)\n' +
            'before editing this node again.'
        )
        return true
      }

      const target = selectedTd
      const about = this.getStatementAbout(target) // timbl - to avoid alert from random clicks
      if (!about) return
      let obj
      let trNode
      try {
        obj = UI.utils.getTerm(target)
        trNode = UI.utils.ancestor(target, 'TR')
      } catch (e) {
        UI.log.warn('userinput.js: ' + e + UI.utils.getAbout(kb, selectedTd))
        UI.log.error(target + ' getStatement Error:' + e)
      }

      let tdNode
      try {
        tdNode = trNode.lastChild
      } catch (e) {
        UI.log.error(e + '@' + target)
      }
      // seems to be a event handling problem of firefox3
      /*
        if (e.type!='keypress'&&(selectedTd.className=='undetermined selected'||selectedTd.className=='undetermined')){
            this.Refill(e,selectedTd);
            return;
        }
        */
      // ignore clicking trNode.firstChild (be careful for <div> or <span>)
      // if (e.type!='keypress'&&target!=tdNode && UI.utils.ancestor(target,'TD')!=tdNode) return;

      if (obj.termType === 'Literal') {
        tdNode.removeChild(tdNode.firstChild) // remove the text

        if (obj.value.match('\n')) {
          // match a line feed and require <TEXTAREA>
          const textBox = myDocument.createElement('textarea')
          textBox.appendChild(myDocument.createTextNode(obj.value))
          textBox.setAttribute(
            'rows',
            (obj.value.match(/\n/g).length + 1).toString()
          )
          // g is for global(??)
          textBox.setAttribute('cols', '100') // should be the size of <TD>
          textBox.setAttribute('class', 'textinput')
          tdNode.appendChild(textBox)
          this.lastModified = textBox
        } else {
          this.lastModified = this.createInputBoxIn(tdNode, obj.value)
        }
        this.lastModified.isNew = false
        // Kenny: What should be expected after you click a editable text element?
        // Choice 1
        this.lastModified.select()
        // Choice 2 - direct the key cursor to where you click (failed attempt)
        // --------------------------------------------------------------------------
        // duplicate the event so user can edit without clicking twice
        // var e2=myDocument.createEvent("MouseEvents");
        // e2.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
        // inputBox.dispatchEvent(e2);
        // ---------------------------------------------------------------------------
      }

      return true // this is not a valid modification
    },

    /**
     *  UIs: input event handlers, menu generation
     */
    performAutoCompleteEdit: function performAutoCompleteEdit (
      selectedTd,
      menu
    ) {
      UI.utils.emptyNode(selectedTd)
      qp('perform AutoCompleteEdit. THIS IS=' + this)
      this.lastModified = this.createInputBoxIn(selectedTd, '')
      this.lastModified.select()
      this.lastModified.addEventListener(
        'keypress',
        this.getAutoCompleteHandler(menu),
        false
      )
      /* keypress!?
           This is what I hate about UI programming.
           I shall write something about this but not now.
        */
      // this pops up the autocomplete menu
      // Pops up the menu even though no keypress has occurred
      // 1 is a dummy variable for the "enterEvent"
      this.getAutoCompleteHandler(menu)(1)
    },
    backOut: function backOut () {
      this.deleteTriple(this.lastModified.parentNode, true)
      this.lastModified = null
    },

    clearMenu: function clearMenu () {
      const menu = myDocument.getElementById(this.menuID)
      if (menu) {
        menu.parentNode.removeChild(menu)
        // emptyNode(menu);
      }
    },

    /* goes here when either this is a literal or escape from menu and then input text */
    clearInputAndSave: function clearInputAndSave (e) {
      let obj
      if (!this.lastModified) return
      if (!this.lastModified.isNew) {
        try {
          obj = this.getStatementAbout(this.lastModified).object
        } catch (e) {
          return
        }
      }
      let s = this.lastModifiedStat // when 'isNew' this is set at addNewObject()

      let defaultpropview
      let trNode
      let reqTerm
      let preStat
      if (this.lastModified.value !== this.lastModified.defaultValue) {
        let trCache
        if (this.lastModified.value === '') {
          // ToDo: remove this
          this.lastModified.value = this.lastModified.defaultValue
          this.clearInputAndSave()
          return
        } else if (this.lastModified.isNew) {
          s = new UI.rdf.Statement(
            s.subject,
            s.predicate,
            kb.literal(this.lastModified.value),
            s.why
          )
          // TODO: DEFINE ERROR CALLBACK
          defaultpropview = this.views.defaults[s.predicate.uri]
          trCache = UI.utils.ancestor(this.lastModified, 'TR')
          try {
            UI.store.updater.update([], [s], function (
              uri,
              success,
              errorBody
            ) {
              if (!success) {
                UI.log.error(
                  'Error occurs while inserting ' +
                    s +
                    '\n\n' +
                    errorBody +
                    '\n'
                )
                // UI.log.warn("Error occurs while inserting "+s+'\n\n'+errorBody);
                outline.UserInput.deleteTriple(trCache.lastChild, true)
              }
            })
          } catch (e) {
            UI.log.error('Error inserting fact ' + s + ':\n\t' + e + '\n')
            return
          }
          s = kb.add(
            s.subject,
            s.predicate,
            kb.literal(this.lastModified.value),
            s.why
          )
        } else {
          if (this.statIsInverse) {
            UI.log.error(
              "Invalid Input: a literal can't be a subject in RDF/XML"
            )
            this.backOut()
            return
          }
          let s1, s2, s3
          switch (obj.termType) {
            case 'Literal': {
              // generate path and nailing from current values

              // TODO: DEFINE ERROR CALLBACK
              const valueCache = this.lastModified.value
              trCache = UI.utils.ancestor(this.lastModified, 'TR')
              const oldValue = this.lastModified.defaultValue
              s2 = $rdf.st(
                s.subject,
                s.predicate,
                kb.literal(this.lastModified.value),
                s.why
              )
              try {
                UI.store.updater.update([s], [s2], function (
                  uri,
                  success,
                  errorBody
                ) {
                  if (success) {
                    obj.value = valueCache
                  } else {
                    UI.log.warn(
                      'Error occurs while editing ' + s + '\n\n' + errorBody
                    )
                    trCache.lastChild.textContent = oldValue
                  }
                  trCache.lastChild.className = trCache.lastChild.className.replace(
                    / pendingedit/g,
                    ''
                  )
                })
              } catch (e) {
                UI.log.warn('Error occurs while editing ' + s + ':\n\t' + e)
                return
              }
              // obj.value=this.lastModified.value;
              // UserInputFormula.statements.push(s);
              break
            }
            case 'BlankNode': { // a request refill with text
              // var newStat
              const textTerm = kb.literal(this.lastModified.value, '')
              // <Feature about="labelChoice">
              if (s.predicate.termType === 'Collection') {
                // case: add triple   ????????? Weird - tbl
                const selectedPredicate = s.predicate.elements[0] //    @@ TBL elements is a list on the predicate??
                if (kb.any(undefined, selectedPredicate, textTerm)) {
                  if (!e) {
                    // keyboard
                    const tdNode = this.lastModified.parentNode
                    e = {}
                    e.pageX = UI.utils.findPos(tdNode)[0]
                    e.pageY = UI.utils.findPos(tdNode)[1] + tdNode.clientHeight
                  }
                  this.showMenu(e, 'DidYouMeanDialog', undefined, {
                    dialogTerm: kb.any(undefined, selectedPredicate, textTerm),
                    bnodeTerm: s.subject
                  })
                } else {
                  s1 = UI.utils.ancestor(
                    UI.utils.ancestor(this.lastModified, 'TR').parentNode,
                    'TR'
                  ).AJAR_statement
                  s2 = $rdf.st(s.subject, selectedPredicate, textTerm, s.why)
                  const type = kb.the(s.subject, rdf('type'))
                  s3 = kb.anyStatementMatching(
                    s.subject,
                    rdf('type'),
                    type,
                    s.why
                  )
                  // TODO: DEFINE ERROR CALLBACK
                  // because the table is repainted, so...
                  trCache = UI.utils.ancestor(
                    UI.utils.ancestor(this.lastModified, 'TR'),
                    'TD'
                  ).parentNode
                  try {
                    UI.store.updater.update([], [s1, s2, s3], function (
                      uri,
                      success,
                      errorBody
                    ) {
                      if (!success) {
                        console.log(
                          'Error occurs while editing ' +
                            s1 +
                            '\n\n' +
                            errorBody
                        )
                        outline.UserInput.deleteTriple(trCache.lastChild, true) // @@@@ This
                      }
                    })
                  } catch (e) {
                    console.log(
                      'Error occurs while editing ' + s1 + ':\n\t' + e
                    )
                    return
                  }
                  kb.remove(s)
                  kb.add(s.subject, selectedPredicate, textTerm, s.why) // was: newStat =
                  // a subtle bug occurs here, if foaf:nick hasn't been dereferneced,
                  // this add will cause a repainting
                }
                const enclosingTd = UI.utils.ancestor(
                  this.lastModified.parentNode.parentNode,
                  'TD'
                )
                const defaultPane = panes.byName('default') // @@ check
                outline.outlineExpand(enclosingTd, s.subject, {
                  pane: defaultPane,
                  already: true
                })
                outline.walk('right', outline.focusTd)
                // </Feature>
              } else {
                this.fillInRequest(
                  'object',
                  this.lastModified.parentNode,
                  kb.literal(this.lastModified.value)
                )
                return // The new Td is already generated by fillInRequest, so it's done.
              }
              break
            }
          }
        }
      } else if (this.lastModified.isNew) {
        // generate 'Request', there is no way you can input ' (Please Input) '
        trNode = UI.utils.ancestor(this.lastModified, 'TR')
        reqTerm = this.generateRequest(
          '(To be determined. Re-type of drag an object onto this field)'
        )
        preStat = trNode.previousSibling.AJAR_statement // the statement of the same predicate
        this.formUndetStat(
          trNode,
          preStat.subject,
          preStat.predicate,
          reqTerm,
          preStat.why,
          false
        )
        // this why being the same as the previous statement
        this.lastModified = null

        // UI.log.warn("test .isNew)");
        return
      } else if (s.predicate.termType === 'Collection') {
        kb.removeMany(s.subject)
        const upperTr = UI.utils.ancestor(
          UI.utils.ancestor(this.lastModified, 'TR').parentNode,
          'TR'
        )
        preStat = upperTr.AJAR_statement
        reqTerm = this.generateRequest(
          '(To be determined. Re-type of drag an object onto this field)'
        )
        this.formUndetStat(
          upperTr,
          preStat.subject,
          preStat.predicate,
          reqTerm,
          preStat.why,
          false
        )
        outline.replaceTD(
          outline.outlineObjectTD(reqTerm, defaultpropview),
          upperTr.lastChild
        )
        this.lastModified = null
        return
      } else if (this.statIsInverse) {
        /*
      if ((s.object.termType === 'BlankNode' && !this.statIsInverse) ||
                  s.subject.termType === 'BlankNode' && this.statIsInverse) {
        this.backOut()
        return
      */
        if (s.subject.termType === 'BlankNode') {
          this.backOut()
          return
        }
      } else {
        if (s.object.termType === 'BlankNode') {
          this.backOut()
          return
        }
      }
      // case modified - literal modification only(for now).
      trNode = UI.utils.ancestor(this.lastModified, 'TR')
      // var defaultpropview = this.views.defaults[s.predicate.uri]

      if (!this.statIsInverse) {
        // this is for an old feature
        // outline.replaceTD(outline.outlineObjectTD(s.object, defaultpropview),trNode.lastChild);
        outline.replaceTD(
          outline.outlineObjectTD(
            kb.literal(this.lastModified.value),
            defaultpropview
          ),
          trNode.lastChild
        )
      } else {
        outline.replaceTD(
          outline.outlineObjectTD(s.subject, defaultpropview),
          trNode.lastChild
        )
      }
      if (this.lastModified.value !== this.lastModified.defaultValue) {
        trNode.lastChild.className += ' pendingedit'
      }
      // trNode.AJAR_statement=s;//you don't have to set AJAR_inverse because it's not changed
      // This is going to be painful when predicate-edit allowed
      this.lastModified = null
    },

    /* deletes the triple corresponding to selectedTd, remove that Td. */
    deleteTriple: function deleteTriple (selectedTd, isBackOut) {
      // ToDo: complete deletion of a node
      UI.log.debug('deleteTriple entered')

      // allow a pending node to be deleted if it's a backout sent by SPARQL update callback
      if (!isBackOut && selectedTd.className.indexOf(' pendingedit') !== -1) {
        console.log(
          'The node you attempted to edit has a request still pending.\n' +
            'Please wait for the request to finish (the text will turn black)\n' +
            'before editing this node again.'
        )
        outline.walk('up')
        return
      }
      let removedTr
      // var afterTr
      const s = this.getStatementAbout(selectedTd)
      if (
        !isBackOut &&
        !kb.whether(s.object, rdf('type'), UI.ns.link('Request')) &&
        // Better to check whether provenance is internal?
        !kb.whether(s.predicate, rdf('type'), UI.ns.link('Request')) &&
        !kb.whether(s.subject, rdf('type'), UI.ns.link('Request'))
      ) {
        UI.log.debug('about to send SPARQLUpdate')
        try {
          UI.store.updater.update([s], [], function (uri, success, errorBody) {
            if (success) {
              removefromview()
            } else {
              // removedTr.AJAR_statement=kb.add(s.subject,s.predicate,s.object,s.why);
              console.log(
                'Error occurs while deleting ' + s + '\n\n' + errorBody
              )
              selectedTd.className = selectedTd.className.replace(
                / pendingedit/g,
                ''
              )
            }
          })
          selectedTd.className += ' pendingedit'
        } catch (e) {
          UI.log.error(e)
          UI.log.warn('Error deleting statement ' + s + ':\n\t' + e)
          return
        }

        UI.log.debug('SPARQLUpdate sent')
      } else {
        // removal of an undetermined statement associated with pending TRs
        // TempFormula.remove(s);
      }
      UI.log.debug('about to remove ' + s)

      UI.log.debug('removed')
      outline.walk('up')
      // eslint-disable-next-line prefer-const
      removedTr = selectedTd.parentNode
      // afterTr = removedTr.nextSibling
      function removefromview () {
        let trIterator
        for (
          trIterator = removedTr;
          trIterator.childNodes.length === 1;
          trIterator = trIterator.previousSibling
        );
        let predicateTd
        if (trIterator === removedTr) {
          const theNext = trIterator.nextSibling
          if (theNext.nextSibling && theNext.childNodes.length === 1) {
            predicateTd = trIterator.firstChild
            predicateTd.setAttribute(
              'rowspan',
              parseInt(predicateTd.getAttribute('rowspan')) - 1
            )
            theNext.insertBefore(trIterator.firstChild, theNext.firstChild)
          }
          removedTr.parentNode.removeChild(removedTr)
        } else {
          // !DisplayOptions["display:block on"].enabled){
          predicateTd = trIterator.firstChild
          predicateTd.setAttribute(
            'rowspan',
            parseInt(predicateTd.getAttribute('rowspan')) - 1
          )
          removedTr.parentNode.removeChild(removedTr)
        }
      }
      if (isBackOut) removefromview()
    },

    /* clipboard principle: copy wildly, paste carefully
      ToDoS:
      1. register Subcollection?
      2. copy from more than one selectedTd: 1.sequece 2.collection
      3. make a clipboard class?
    */
    clipboardInit: function clipboardInit () {
      outline.clipboard = {}
      outline.clipboard.objects = []
      outline.clipboard.predicates = []
      outline.clipboard.all = []
    },

    copyToClipboard: function copyToClipboard (address, selectedTd) {
      /*
        var clip  = Components.classes["@mozilla.org/widget/clipboard;1"].getService(Components.interfaces.nsIClipboard);
        if (!clip) return false;
        var clipid = Components.interfaces.nsIClipboard;

        var trans = Components.classes["@mozilla.org/widget/transferable;1"].createInstance(Components.interfaces.nsITransferable);
        if (!trans) return false;

        var copytext = "Tabulator!!";

        var str   = Components.classes["@mozilla.org/supports-string;1"].
                           createInstance(Components.interfaces.nsISupportsString);
        if (!str) return false;

        str.data  = copytext;

        trans.addDataFlavor("text/x-moz-url");
        trans.setTransferData("text/x-mox-url", str, copytext.length * 2);

        clip.setData(trans, null, clipid.kGlobalClipboard);
        */

      const term = UI.utils.getTerm(selectedTd)
      switch (selectedTd.className) {
        case 'selected': // table header
        case 'obj selected':
          // var objects = outline.clipboard.objects
          outline.clipboard.objects.unshift(term)
          break
        case 'pred selected':
        case 'pred internal selected':
          outline.clipboard.predicates.unshift(term)
      }

      outline.clipboard.all.unshift(term)
    },

    insertTermTo: function insertTermTo (selectedTd, term, isObject) {
      let defaultpropview
      let preStat
      switch (selectedTd.className) {
        case 'undetermined selected':
          defaultpropview = this.views.defaults[
            selectedTd.parentNode.AJAR_statement.predicate.uri
          ]
          this.fillInRequest(
            selectedTd.nextSibling ? 'predicate' : 'object',
            selectedTd,
            term
          )
          break
        case 'pred selected': { // paste objects into this predicate
          const insertTr = this.appendToPredicate(selectedTd)
          preStat = selectedTd.parentNode.AJAR_statement
          defaultpropview = this.views.defaults[preStat.predicate.uri]
          insertTr.appendChild(outline.outlineObjectTD(term, defaultpropview))
          // modify store and update here
          const isInverse = selectedTd.parentNode.AJAR_inverse
          if (!isInverse) {
            insertTr.AJAR_statement = kb.add(
              preStat.subject,
              preStat.predicate,
              term,
              preStat.why
            )
          } else {
            insertTr.AJAR_statemnet = kb.add(
              term,
              preStat.predicate,
              preStat.object,
              preStat.why
            )
          }

          try {
            UI.store.updater.update([], [insertTr.AJAR_statement], function (
              uri,
              success,
              errorBody
            ) {
              if (!success) {
                UI.log.error(
                  'userinput.js (pred selected): Fail trying to insert statement ' +
                    insertTr.AJAR_statement +
                    ': ' +
                    errorBody
                )
              }
            })
          } catch (e) {
            UI.log.error(
              'Exception trying to insert statement ' +
                insertTr.AJAR_statement +
                ': ' +
                UI.utils.stackString(e)
            )
            return
          }
          insertTr.AJAR_inverse = isInverse
          UserInputFormula.statements.push(insertTr.AJAR_statement)
          break
        }
        case 'selected': { // header <TD>, undetermined generated
          const paneDiv = UI.utils.ancestor(selectedTd, 'TABLE').lastChild
          const newTr = paneDiv.insertBefore(
            myDocument.createElement('tr'),
            paneDiv.lastChild
          )
          // var titleTerm=UI.utils.getAbout(kb,UI.utils.ancestor(newTr,'TD'));
          preStat = newTr.previousSibling.AJAR_statement
          if (typeof isObject === 'undefined') isObject = true
          if (isObject) {
            // object inserted
            this.formUndetStat(
              newTr,
              preStat.subject,
              this.generateRequest('(TBD)', newTr, true),
              term,
              preStat.why,
              false
            )
            // defaultpropview temporaily not dealt with
            newTr.appendChild(outline.outlineObjectTD(term))
            outline.walk('moveTo', newTr.firstChild)
            this.startFillInText(newTr.firstChild)
          } else {
            // predicate inserted
            // existing predicate not expected
            const reqTerm = this.generateRequest(
              '(To be determined. Re-type of drag an object onto this field)',
              newTr
            )
            this.formUndetStat(
              newTr,
              preStat.subject,
              term,
              reqTerm,
              preStat.why,
              false
            )

            newTr.insertBefore(
              outline.outlinePredicateTD(term, newTr, false, false),
              newTr.firstChild
            )
            outline.walk('moveTo', newTr.lastChild)
            this.startFillInText(newTr.lastChild)
          }
          break
        }
      }
    },

    Refill: function Refill (e, selectedTd) {
      UI.log.info('Refill' + selectedTd.textContent)
      const isPredicate = selectedTd.nextSibling
      let predicateQuery
      if (isPredicate) {
        // predicateTd
        let subject
        let subjectClass
        let sparqlText
        if (selectedTd.nextSibling.className === 'undetermined') {
          /* Make set of proprties to propose for a predicate.
            The  naive approach is to take those which have a class
            of the subject as their domain.  But in fact we must offer anything which
            is not explicitly excluded, by having a domain disjointWith a
            class of the subject. */

          /* SELECT ?pred
               WHERE{
                   ?pred a rdf:Property.
                   ?pred rdfs:domain subjectClass.
               }
            */
          /*  SELECT ?pred ?class
                WHERE{
                   ?pred a rdf:Property.
                   subjectClass owl:subClassOf ?class.
                   ?pred rdfs:domain ?class.
               }
            */
          /*  SELECT ?pred
                WHERE{
                   subject a ?subjectClass.
                   ?pred rdfs:domain ?subjectClass.
                }
            */
          subject = UI.utils.getAbout(
            kb,
            UI.utils.ancestor(selectedTd, 'TABLE').parentNode
          )
          subjectClass = kb.any(subject, rdf('type'))
          sparqlText = []
          const endl = '.\n'
          sparqlText[0] =
            'SELECT ?pred WHERE{\n?pred ' +
            rdf('type') +
            rdf('Property') +
            '.\n' +
            '?pred ' +
            UI.ns.rdfs('domain') +
            subjectClass +
            '.}' // \n is required? SPARQL parser bug?
          sparqlText[1] =
            'SELECT ?pred ?class\nWHERE{\n' +
            '?pred ' +
            rdf('type') +
            rdf('Property') +
            '.\n' +
            subjectClass +
            UI.ns.rdfs('subClassOf') +
            ' ?class.\n' +
            '?pred ' +
            UI.ns.rdfs('domain') +
            ' ?class.\n}'
          sparqlText[2] =
            'SELECT ?pred WHERE{\n' +
            subject +
            rdf('type') +
            kb.variable('subjectClass') +
            endl +
            kb.variable('pred') +
            UI.ns.rdfs('domain') +
            kb.variable('subjectClass') +
            endl +
            '}'
          predicateQuery = sparqlText.map($rdf.SPARQLToQuery)
        } else {
          // ------selector
          /* SELECT ?pred
               WHERE{
                   ?pred a rdf:Property.
                   ?pred rdfs:domain subjectClass.
                   ?pred rdfs:range objectClass.
               }
            */
          // Candidate
          /* SELECT ?pred
               WHERE{
                   subject a ?subjectClass.
                   object a ?objectClass.
                   ?pred rdfs:domain ?subjectClass.
                   ?pred rdfs:range ?objectClass.
            */
          subject = UI.utils.getAbout(
            kb,
            UI.utils.ancestor(selectedTd, 'TABLE').parentNode
          )
          subjectClass = kb.any(subject, rdf('type'))
          const object = selectedTd.parentNode.AJAR_statement.object
          // var objectClass = (object.termType === 'Literal') ? UI.ns.rdfs('Literal') : kb.any(object, rdf('type'))
          // var sparqlText="SELECT ?pred WHERE{\n?pred "+rdf('type')+rdf('Property')+".\n"+
          //               "?pred "+UI.ns.rdfs('domain')+subjectClass+".\n"+
          //               "?pred "+UI.ns.rdfs('range')+objectClass+".\n}"; // \n is required? SPARQL parser bug?
          sparqlText =
            'SELECT ?pred WHERE{' +
            subject +
            rdf('type') +
            '?subjectClass' +
            '.\n' +
            object +
            rdf('type') +
            '?objectClass' +
            '.\n' +
            '?pred ' +
            UI.ns.rdfs('domain') +
            '?subjectClass' +
            '.\n' +
            '?pred ' +
            UI.ns.rdfs('range') +
            '?objectClass' +
            '.\n}' // \n is required? SPARQL parser bug?
          predicateQuery = $rdf.SPARQLToQuery(sparqlText)
        }

        // -------presenter
        // ToDo: how to sort selected predicates?
        this.showMenu(e, 'GeneralPredicateChoice', predicateQuery, {
          isPredicate: isPredicate,
          selectedTd: selectedTd
        })
      } else {
        // objectTd
        const predicateTerm = selectedTd.parentNode.AJAR_statement.predicate
        if (
          kb.whether(
            predicateTerm,
            rdf('type'),
            UI.ns.owl('DatatypeProperty')
          ) ||
          predicateTerm.termType === 'Collection' ||
          kb.whether(predicateTerm, UI.ns.rdfs('range'), UI.ns.rdfs('Literal'))
        ) {
          selectedTd.className = ''
          UI.utils.emptyNode(selectedTd)
          this.lastModified = this.createInputBoxIn(
            selectedTd,
            ' (Please Input) '
          )
          this.lastModified.isNew = false

          this.lastModified.select()
        }

        // show menu for rdf:type
        if (
          selectedTd.parentNode.AJAR_statement.predicate.sameTerm(rdf('type'))
        ) {
          const sparqlText =
            'SELECT ?class WHERE{?class ' +
            rdf('type') +
            UI.ns.rdfs('Class') +
            '.}'
          // I should just use kb.each
          const classQuery = $rdf.SPARQLToQuery(sparqlText)
          this.showMenu(e, 'TypeChoice', classQuery, {
            isPredicate: isPredicate,
            selectedTd: selectedTd
          })
        }
      }
    },

    // This is where pubsPane.js comes in, with: outline.UserInput.getAutoCompleteHandler("JournalTAC")(e);
    getAutoCompleteHandler: function getAutoCompleteHandler (mode) {
      qp('\n\n***** In getAutoCompleteHandler ****** mode = ' + mode)
      if (mode === 'PredicateAutoComplete') {
        mode = 'predicate'
      } else if (mode !== 'JournalTAC') {
        // hq  // why? -tim  - not 'predicate' below
        mode = 'all'
      }

      let InputBox
      if (mode === 'JournalTAC') {
        // hq  // Better to pass in InputBox as a param
        InputBox = myDocument.getElementById('inpid_journal_title')
      } else {
        InputBox = this.lastModified || outline.getSelection()[0].firstChild
      }
      qp('InputBox=' + InputBox) // hq
      qp('InputBox.value=' + InputBox.value) // hq

      return function (enterEvent) {
        qp('ENTER EVENT=' + enterEvent)
        // Firefox 2.0.0.6 makes this not working? 'this' becomes [object HTMLInputElement]
        //                                           but not [wrapped ...]
        // var InputBox=(typeof enterEvent=='object')?this:this.lastModified;//'this' is the <input> element
        qp('1. outside (if eneterEvent)')
        const e = {}
        const tdNode = InputBox.parentNode
        if (!mode) mode = tdNode.nextSibling ? 'predicate' : 'all'
        e.pageX = UI.utils.findPos(tdNode)[0]
        e.pageY = UI.utils.findPos(tdNode)[1] + tdNode.clientHeight
        qp('epX=' + e.pageX + ', epY=' + e.pageY + ', mode=' + mode)
        let menu = myDocument.getElementById(outline.UserInput.menuID)
        function setHighlightItem (item) {
          if (!item) return // do not make changes
          if (menu.lastHighlight) menu.lastHighlight.className = ''
          menu.lastHighlight = item
          menu.lastHighlight.className = 'activeItem'
          outline.showURI(UI.utils.getAbout(kb, menu.lastHighlight))
        }
        if (enterEvent) {
          // either the real event of the pseudo number passed by OutlineKeypressPanel
          qp('2. in (if enterEvent).  with type = ' + typeof enterEvent)
          let newText = InputBox.value

          if (typeof enterEvent === 'object') {
            qp(
              '3. in typeof enterEvent is object, will switch to keys, arrows, etc. keycode = ' +
                enterEvent.keyCode
            )
            enterEvent.stopPropagation()
            if (menu && !menu.lastHighlight) {
              // this ensures the following operation valid
              setHighlightItem(menu.firstChild.firstChild)
            }
            switch (enterEvent.keyCode) {
              case 13: // enter
              case 9: // tab
                qp('handler: Enter or Tab')
                if (!menu) {
                  outline.UserInput.clearInputAndSave()
                  return
                }
                if (!menu.lastHighlight) {
                  if (mode === 'JournalTAC') {
                    outline.UserInput.clearMenu()
                    qp('no lastH')
                    return 'no lastH'
                  }
                  return
                } // warning?

                if (menu.lastHighlight.tagName === 'INPUT') {
                  switch (menu.lastHighlight.value) {
                    case 'New...':
                      qp('subcase New')
                      outline.UserInput.createNew()
                      break
                    case 'GiveURI':
                      qp('subcase GiveURI')
                      outline.UserInput.inputURI()
                      break
                  }
                } else {
                  // pubsPane Stuff:
                  if (mode === 'JournalTAC') {
                    qp('movedArrow? ' + movedArrow)
                    // Enter only works if arrows have been moved
                    if (movedArrow && menu.lastHighlight) {
                      // Get the title from the DOM
                      // tr, th, div, innerHTML
                      const jtitle =
                        menu.lastHighlight.firstChild.firstChild.innerHTML
                      // tr, th, td, innerHTML
                      let juri =
                        menu.lastHighlight.firstChild.nextSibling.innerHTML
                      // clearing out the &lt; and &gt; from juri
                      juri = juri.slice(4, -4)
                      return ['gotdptitle', jtitle, juri]
                    }
                    // If doesn't qualify to be autocomplete, return this random string, since pubsPane checks for "gotdptitle"
                    return 'asGivenTxt'
                  }

                  const inputTerm = UI.utils.getAbout(kb, menu.lastHighlight)
                  const fillInType = mode === 'predicate' ? 'predicate' : 'object'
                  outline.UserInput.clearMenu()
                  outline.UserInput.fillInRequest(
                    fillInType,
                    InputBox.parentNode,
                    inputTerm
                  )
                  // if (outline.UserInput.fillInRequest(fillInType,InputBox.parentNode,inputTerm))
                  //    outline.UserInput.clearMenu();
                }
                qp('outside')
                return
              case 38: // up
                qp('handler: Arrow UP')
                movedArrow = true // hq
                if (
                  newText === '' &&
                  menu.lastHighlight.tagName === 'TR' &&
                  !menu.lastHighlight.previousSibling
                ) {
                  setHighlightItem(menu.firstChild.firstChild)
                } else {
                  setHighlightItem(menu.lastHighlight.previousSibling)
                }
                return "I'm a little Arrow Up"
              case 40: // down
                qp('handler: Arrow Down')
                movedArrow = true // hq
                if (menu.lastHighlight.tagName === 'INPUT') {
                  setHighlightItem(menu.childNodes[1].firstChild)
                } else {
                  setHighlightItem(menu.lastHighlight.nextSibling)
                }
                return "I'm a little Down Arrow"
              case 37: // left
              case 39: // right
                qp('handler: Arrow left, right')
                if (menu.lastHighlight.tagName === 'INPUT') {
                  if (enterEvent.keyCode === 37) {
                    setHighlightItem(menu.lastHighlight.previousSibling)
                  } else {
                    setHighlightItem(menu.lastHighlight.nextSibling)
                  }
                }
                return
              case 8: // backspace
                qp('handler: Backspace')
                newText = newText.slice(0, -1)
                break
              case 27: // esc to enter literal
                qp('handler: Esc')
                if (!menu) {
                  outline.UserInput.backOut()
                  return
                }
                outline.UserInput.clearMenu()
                // Not working? I don't know.
                // InputBox.removeEventListener('keypress',outline.UserInput.Autocomplete,false);
                return
              // break
              default:
                qp('handler: Default')
                movedArrow = false // hq
                // we need this because it is keypress, seeAlso performAutoCompleteEdit
                qp('oldtext=' + newText)
                newText += String.fromCharCode(enterEvent.charCode)
                qp('charcodent=' + enterEvent.charCode)
                qp('strcharcod=' + String.fromCharCode(enterEvent.charCode))
                console.log('DEFAULT txtstr=' + newText + '\n') // hq
            }
          } // endif typeof(event) === object

          // UI.log.warn(InputBox.choices.length);
          // for(i=0;InputBox.choices[i].label<newText;i++); //O(n) ToDo: O(log n)
          if (mode === 'all') {
            qp('generalAC after switch, newText=' + newText + 'mode is all')
            outline.UserInput.clearMenu()
            // outline.UserInput.showMenu(e,'GeneralAutoComplete',undefined,{'isPredicate':false,'selectedTd':tdNode,'choices':InputBox.choices, 'index':i});
            outline.UserInput.showMenu(e, 'GeneralAutoComplete', undefined, {
              inputText: newText,
              selectedTd: tdNode
            })
            if (newText.length === 0) outline.UserInput.WildCardButtons()
          } else if (mode === 'predicate') {
            qp(
              'predicateAC after switch, newText=' +
                newText +
                'mode is predicate'
            )
            outline.UserInput.clearMenu()
            outline.UserInput.showMenu(e, 'PredicateAutoComplete', undefined, {
              inputText: newText,
              isPredicate: true,
              selectedTd: tdNode
            })
          } else if (mode === 'JournalTAC') {
            // hq
            qp('JouralTAC after switch, newText=' + newText)
            outline.UserInput.clearMenu()
            // Goto showMenu
            outline.UserInput.showMenu(
              e,
              'JournalTitleAutoComplete',
              undefined,
              { inputText: newText },
              'orderisuseless'
            )
          }
          menu = myDocument.getElementById(outline.UserInput.menuID)
          if (!menu) {
            qp('No menu element.  Do not show menu.')
            return
          }
          qp('at end of handler\n^^^^^^^^^^^^^^^^^\n\n')
          setHighlightItem(menu.firstChild.firstChild)
          outline.showURI(UI.utils.getAbout(kb, menu.lastHighlight))
          return 'nothing to return'
        }
      } // end of return function
    },

    // Add the buttons which allow the suer to craete a new object
    // Or reference an exiting one with a URI.
    //
    WildCardButtons: function WildCardButtons () {
      const menuDiv = myDocument.getElementById(outline.UserInput.menuID)
      const div = menuDiv.insertBefore(
        myDocument.createElement('div'),
        menuDiv.firstChild
      )
      const input1 = div.appendChild(myDocument.createElement('input'))
      const input2 = div.appendChild(myDocument.createElement('input'))
      input1.type = 'button'
      input1.value = 'New...'
      input2.type = 'button'
      input2.value = 'Know its URI'

      function highlightInput (e) {
        // same as the one in newMenu()
        const menu = myDocument.getElementById(outline.UserInput.menuID)
        if (menu.lastHighlight) menu.lastHighlight.className = ''
        menu.lastHighlight = UI.utils.ancestor(UI.utils.getTarget(e), 'INPUT')
        if (!menu.lastHighlight) return // mouseover <TABLE>
        menu.lastHighlight.className = 'activeItem'
      }
      div.addEventListener('mouseover', highlightInput, false)
      input1.addEventListener('click', this.createNew, false)
      input2.addEventListener('click', this.inputURI, false)
    },
    // ToDo: shrink rows when \n+backspace
    Keypress: function (e) {
      if (e.keyCode === 13) {
        if (outline.targetOf(e).tagName !== 'TEXTAREA') {
          this.clearInputAndSave()
        } else {
          // <TEXTAREA>
          const preRows = parseInt(this.lastModified.getAttribute('rows'))
          this.lastModified.setAttribute('rows', (preRows + 1).toString())
          e.stopPropagation()
        }
      }
      // Remark by Kenny: If the user wants to input more lines into an one-line-only blank.
      //                 Direct him/her to a new blank (how?)
    },

    Mousedown: function (e) {
      qp('MOUSING DOWN')
      // temporary key ctrl+s or q for swiching mode
      // This was in HCIOptions "right click to switch mode":
      window.addEventListener(
        'keypress',
        function (e) {
          if (e.ctrlKey && (e.charCode === 115 || e.charCode === 113)) {
            UserInput.switchMode()
          }
        },
        false
      )
      window.addEventListener('mousedown', UserInput.Mousedown, false)
      document.getElementById('outline').oncontextmenu = function () {
        return false
      }

      if (e.button === 2) {
        // right click
        UserInput.switchMode()
        if (e) {
          e.preventDefault()
          e.stopPropagation()
        }
      }
    },

    Mouseover: function Mouseover (e) {
      this.className = 'bottom-border-active'
      if (this._tabulatorMode === 1) {
        switch (UI.utils.getTarget(e).tagName) {
          case 'TD': {
            const preTd = UI.utils.getTarget(e)
            if (preTd.className === 'pred') preTd.style.cursor = 'copy'
            break
          }
          // Uh...I think I might have to give up this
          case 'DIV': {
            const border = UI.utils.getTarget(e)
            if (UI.utils.getTarget(e).className === 'bottom-border') {
              border.style.borderColor = 'rgb(100%,65%,0%)'
              border.style.cursor = 'copy'
            }
            break
          }
          default:
        }
      }
    },

    Mouseout: function (e) {
      this.className = 'bottom-border'
      if (this._tabulatorMode === 1) {
        const border = UI.utils.getTarget(e)
        if (UI.utils.getTarget(e).className === 'bottom-border') {
          border.style.borderColor = 'transparent'
          border.style.cursor = 'auto'
        }
      }
    },

    /**
     * Utilities
     */

    whatSortOfEditCell: function whatSortOfEditCell (selectedTd) {
      if (selectedTd.nextSibling) return 'predicate'
      const predicateTerm = this.getStatementAbout(selectedTd).predicate
      // var predicateTerm=selectedTd.parentNode.AJAR_statement.predicate;
      if (
        kb.whether(
          predicateTerm,
          UI.ns.rdf('type'),
          UI.ns.owl('DatatypeProperty')
        ) ||
        kb.whether(predicateTerm, UI.ns.rdfs('range'), UI.ns.rdfs('Literal')) ||
        predicateTerm.termType === 'Collection'
      ) {
        return 'DatatypeProperty-like'
      } else if (
        kb.whether(predicateTerm, rdf('type'), UI.ns.owl('ObjectProperty'))
      ) {
        return 'ObjectProperty-like'
      } else {
        return 'no-idea'
      }
    },

    getStatementAbout: function getStatementAbout (something) {
      // var trNode=something.parentNode;
      const trNode = UI.utils.ancestor(something, 'TR')
      if (!trNode) {
        throw new Error('No ancestor TR for the TD we clicked on:' + something)
      }
      let statement
      try {
        statement = trNode.AJAR_statement
      } catch (e) {
        throw new Error(
          'No AJAR_statement!' +
            something +
            something.textContent +
            ' has ancestor ' +
            trNode
        ) // was commented out @@
        // throw 'TR not a statement TR' // was commented out @@
      }
      // Set last modified here, I am not sure this will be ok.
      this.lastModifiedStat = trNode.AJAR_statement
      this.statIsInverse = trNode.AJAR_inverse

      return statement
    },

    createInputBoxIn: function createInputBoxIn (tdNode, defaultText) {
      function UpAndDown (e) {
        if (e.keyCode === 38 || e.keyCode === 40) {
          outline.OutlinerKeypressPanel(e)
          outline.UserInput.clearInputAndSave()
        }
      }
      UI.log.info(
        'myDocument in createInputBoxIn is now ' + myDocument.location
      )
      UI.log.info('outline.document is now ' + outline.document.location)
      const inputBox = myDocument.createElement('input')
      inputBox.setAttribute('value', defaultText)
      inputBox.setAttribute('class', 'textinput')
      // inputBox.setAttribute('size','100');//should be the size of <TD>
      if (tdNode.className !== 'undetermined selected') {
        inputBox.setAttribute('size', '100') // should be the size of <TD>
        inputBox.addEventListener('keypress', UpAndDown, false)
      }
      tdNode.appendChild(inputBox)
      return inputBox
    },

    // called when 'New...' is clicked(eventlistener) or enter is pressed while 'New...' is highlighted
    createNew: function createNew (_e) {
      outline.UserInput.clearMenu()
      const selectedTd = outline.getSelection()[0]
      const targetdoc = selectedTd.parentNode.AJAR_statement.why
      const newTerm = kb.nextSymbol(targetdoc)
      outline.UserInput.fillInRequest('object', selectedTd, newTerm)
      // selection is changed
      outline.outlineExpand(outline.getSelection()[0], newTerm)
    },

    inputURI: function inputURI (_e) {
      const This = outline.UserInput
      This.clearMenu()
      const selectedTd = outline.getSelection()[0]
      UI.utils.emptyNode(selectedTd)
      const tiptext = ' (Type a URI) '
      This.lastModified = This.createInputBoxIn(selectedTd, tiptext)
      This.lastModified.select()
      function typeURIhandler (e) {
        e.stopPropagation()
        switch (e.keyCode) {
          case 13: // enter
          case 9: // tab
            // this is input box
            if (this.value !== tiptext) {
              const newuri = this.value // @@ Removed URI "fixup" code
              This.fillInRequest('object', selectedTd, kb.sym(newuri))
            }
        }
      }
      This.lastModified.addEventListener('keypress', typeURIhandler, false)
      /*
        if (false && UI.isExtension){
            var selectedTd = outline.getSelection()[0];
            emptyNode(selectedTd);
            var textbox = myDocument.createElementNS(kXULNS,'textbox');
            textbox.setAttribute('type','autocomplete');
            textbox.setAttribute('autocompletesearch','history');
            selectedTd.appendChild(textbox);

            urlbar = gURLBar.cloneNode(false);
            selectedTd.appendChild(urlbar);
            urlbar.mController = gURLBar.mController;

        }
        */
    },

    appendToPredicate: function appendToPredicate (predicateTd) {
      let isEnd = false
      let trIterator
      try {
        for (
          trIterator = predicateTd.parentNode.nextSibling;
          trIterator.childNodes.length === 1 && trIterator.AJAR_statement;
          // number of nodes as condition, also beware of toggle Trs that don't have AJAR_statement
          trIterator = trIterator.nextSibling
        ) {
          // ..
        }
      } catch (e) {
        isEnd = true
      }
      // if(!isEnd && HCIoptions["bottom insert highlights"].enabled) trIterator=trIterator.previousSibling;

      const insertTr = myDocument.createElement('tr')
      // style stuff, I'll have to investigate appendPropertyTRs() somehow
      insertTr.style.colspan = '1'
      insertTr.style.display = 'block'

      insertTr.style.display = ''
      if (predicateTd.hasAttribute('rowspan')) {
        predicateTd.setAttribute(
          'rowspan',
          parseInt(predicateTd.getAttribute('rowspan')) + 1
        )
      }

      if (!predicateTd.hasAttribute('rowspan')) {
        predicateTd.setAttribute('rowspan', '2')
      }

      if (!isEnd) {
        trIterator.parentNode.insertBefore(insertTr, trIterator)
      } else {
        const table = predicateTd.parentNode.parentNode
        if (table.className === 'defaultPane') {
          table.insertBefore(insertTr, table.lastChild)
        } else {
          table.appendChild(insertTr)
        }
      }

      return insertTr
    },

    bnode2symbol: function bnode2symbol (bnode, symbol) {
      kb.copyTo(bnode, symbol, ['two-direction', 'delete'])
    },

    generateRequest: function generateRequest (
      tipText,
      trNew,
      isPredicate,
      notShow
    ) {
      let trNode
      if (!notShow) {
        if (trNew) {
          trNode = trNew
        } else {
          trNode = UI.utils.ancestor(this.lastModified, 'TR')
        }
        UI.utils.emptyNode(trNode)
      }

      // create the undetermined term
      // Choice 1:
      // var reqTerm=kb.literal("TBD");
      // this is troblesome since RDFIndexedFormula does not allow me to add <x> <y> "TBD". twice
      // Choice 2: Use a variable.
      // Agreed. Kenny wonders whether there is RDF/XML representation of a variable.
      // labelPriority[UI.ns.link('message').uri] = 20;

      // We must get rid of this clutter in the store. "OK, will be stroed in a seperate formula to avoid bugs", Kenny says
      const tp = TempFormula
      const reqTerm = tp.bnode()
      tp.add(reqTerm, UI.ns.rdf('type'), UI.ns.link('Request'))
      if (tipText.length < 10) {
        tp.add(reqTerm, UI.ns.link('message'), tp.literal(tipText))
      } else {
        tp.add(reqTerm, UI.ns.link('message'), tp.literal(tipText))
      }
      tp.add(reqTerm, UI.ns.link('to'), tp.literal('The User'))
      tp.add(reqTerm, UI.ns.link('from'), tp.literal('The User'))

      // append the undetermined td
      if (!notShow) {
        let newNode
        if (isPredicate) {
          newNode = trNode.appendChild(
            outline.outlinePredicateTD(reqTerm, trNode, false, false)
          )
        } else {
          newNode = trNode.appendChild(outline.outlineObjectTD(reqTerm))
        }
        newNode.className = 'undetermined'
        newNode.textContent = tipText
      }

      return reqTerm
    },

    showMenu: function showMenu (
      e,
      menuType,
      inputQuery,
      extraInformation,
      _order
    ) {
      // ToDo:order, make a class?
      UI.log.info('myDocument is now ' + myDocument.location)
      UI.log.info('outline.doucment is now ' + outline.document.location)
      const This = this
      const menu = myDocument.createElement('div')
      qp('\n**** In showMenu, menuType = ' + menuType + '\n')
      if (extraInformation) {
        for (const x in extraInformation) {
          console.log('\t extra ' + x + ': ' + extraInformation[x] + '\n')
        }
      }
      console.log('CREATED MENU\n') // hq
      menu.id = this.menuID
      menu.className = 'outlineMenu'
      // menu.addEventListener('click',false);
      menu.style.top = e.pageY + 'px'
      menu.style.left = e.pageX + 'px'

      /// /For pubsPane
      // This is for setting the location of the dropdown menu, because
      // JournalTitleAutoComplete is called with a keypress, and not mouse actions
      // Get Offset of an HTML element
      const getOffset = function getOffset (el) {
        let _lf = 0
        let _tp = 0
        let oldlf = 0
        let oldtp = 0
        let newlf = 0
        let newtp = 0

        // repeatedly get ancestor's positions
        // TODO: STILL a small offset/bug
        while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
          newlf = el.offsetLeft
          newtp = el.offsetTop

          // only change if the new parent's offset is different
          if (newlf !== oldlf) {
            _lf += el.offsetLeft - el.scrollLeft
          }
          if (newtp !== oldtp) {
            _tp += el.offsetTop - el.scrollTop
          }

          oldlf = newlf
          oldtp = newtp

          el = el.parentNode
        }
        // there is a constant offset
        return { top: _tp + 54, left: _lf - 38 }
      }
      // Change the position of menu in pubsPane's journal Title AC
      if (menuType === 'JournalTitleAutoComplete') {
        // hql
        const loc = getOffset(myDocument.getElementById('inpid_journal_title'))
        loc.left -= myDocument.getElementById('inpid_journal_title').scrollTop
        menu.style.top = loc.top + 'px'
        menu.style.left = loc.left + 'px'
      }
      console.log(
        'menu at top=' + menu.style.top + ' left=' + menu.style.left + '\n'
      ) // hql
      // \\\\\\\hql

      myDocument.body.appendChild(menu)
      const table = menu.appendChild(myDocument.createElement('table'))

      menu.lastHighlight = null
      function highlightTr (e) {
        if (menu.lastHighlight) menu.lastHighlight.className = ''
        menu.lastHighlight = UI.utils.ancestor(UI.utils.getTarget(e), 'TR')
        if (!menu.lastHighlight) return // mouseover <TABLE>
        menu.lastHighlight.className = 'activeItem'
      }

      table.addEventListener('mouseover', highlightTr, false)

      // setting for action after selecting item
      let selectItem
      switch (menuType) {
        case 'DidYouMeanDialog':
          selectItem = function selectItem (e) {
            qp('DID YOU MEAN SELECT ITEM!!!!!')
            const target = UI.utils.ancestor(UI.utils.getTarget(e), 'TR')
            if (target.childNodes.length === 2 && target.nextSibling) {
              // Yes
              kb.add(bnodeTerm, IDpredicate, IDterm) // used to connect the two
              outline.UserInput.clearMenu()
            } else if (target.childNodes.length === 2) {
              outline.UserInput.clearMenu()
            }
          }
          break
        case 'LimitedPredicateChoice': {
          const clickedTd = extraInformation.clickedTd
          selectItem = function selectItem (e) {
            qp('LIMITED P SELECT ITEM!!!!')
            const selectedPredicate = UI.utils.getAbout(kb, UI.utils.getTarget(e))
            const predicateChoices =
              clickedTd.parentNode.AJAR_statement.predicate.elements
            for (let i = 0; i < predicateChoices.length; i++) {
              if (predicateChoices[i].sameTerm(selectedPredicate)) {
                predicateChoices.unshift(predicateChoices.splice(i, 1)[0])
              }
            }
            outline.UserInput.clearMenu()

            // refresh the choice
            const tr = clickedTd.parentNode
            const newTd = outline.outlinePredicateTD(
              tr.AJAR_statement.predicate,
              tr
            )
            tr.insertBefore(newTd, clickedTd)
            tr.removeChild(clickedTd)
            This.lastModified.select()
          }
          break
        }
        case 'PredicateAutoComplete':
        case 'GeneralAutoComplete':
        case 'GeneralPredicateChoice':
        case 'JournalTitleAutoComplete': // hql
        case 'TypeChoice': {
          // Clickable menu
          const isPredicate = extraInformation.isPredicate
          const selectedTd = extraInformation.selectedTd
          selectItem = function selectItem (e) {
            qp('WOOHOO')
            const inputTerm = UI.utils.getAbout(kb, UI.utils.getTarget(e))
            qp('GENERAL SELECT ITEM!!!!!!=' + inputTerm)
            qp('target=' + UI.utils.getTarget(e))
            if (isPredicate) {
              qp('1')
              if (
                outline.UserInput.fillInRequest(
                  'predicate',
                  selectedTd,
                  inputTerm
                )
              ) {
                qp('2')
                outline.UserInput.clearMenu()
              }
            } else {
              qp('3')
              // thisInput.fillInRequest('object',selectedTd,inputTerm); //why is this not working?
              if (
                outline.UserInput.fillInRequest('object', selectedTd, inputTerm)
              ) {
                qp('4')
                outline.UserInput.clearMenu()
              }
            }
          }
          break
        }
        default:
          throw new Error('userinput: unexpected mode')
      }
      // hq: this line makes the menu clickable
      table.addEventListener('click', selectItem, false)

      // Add Items to the list
      // build NameSpaces here from knowledge base
      const NameSpaces = {}
      // for each (ontology in ontologies)
      kb.each(undefined, UI.ns.rdf('type'), UI.ns.owl('Ontology')).forEach(
        function (ontology) {
          const label = UI.utils.label(ontology)
          if (!label) return
          // this is like extracting metadata from URI. Maybe it's better not to take the abbrevs.
          const match = label.value.match(/\((.+?)\)/)
          if (match) {
            NameSpaces[match[1]] = ontology.uri
          } else {
            NameSpaces[label.value] = ontology.uri
          }
        }
      )
      function addMenuItem (predicate) {
        if (table.firstChild && table.firstChild.className === 'no-suggest') {
          table.removeChild(table.firstChild)
        }
        const Label = UI.utils.predicateLabelForXML(predicate, false)
        // Label = Label.slice(0,1).toUpperCase() + Label.slice(1);

        if (!predicate.uri) return // bnode
        let theNamespace = '??'
        for (const name in NameSpaces) {
          UI.log.debug(NameSpaces[name])
          if (UI.rdf.Util.string_startswith(predicate.uri, NameSpaces[name])) {
            theNamespace = name
            break
          }
        }

        const tr = table.appendChild(myDocument.createElement('tr'))
        tr.setAttribute('about', predicate)
        const th = tr.appendChild(myDocument.createElement('th'))
        th.appendChild(myDocument.createElement('div')).appendChild(
          myDocument.createTextNode(Label)
        )
        tr.appendChild(myDocument.createElement('td')).appendChild(
          myDocument.createTextNode(theNamespace.toUpperCase())
        )
      }
      function addPredicateChoice (selectedQuery) {
        return function (bindings) {
          const predicate = bindings[selectedQuery.vars[0]]
          addMenuItem(predicate)
        }
      }
      function clearMenu (e) {
        This.clearMenu()
        e.stopPropagation()
      }
      let inputText
      let bnodeTerm
      let IDpredicate
      let IDterm
      let tr
      let th
      switch (menuType) {
        case 'DidYouMeanDialog': {
          const dialogTerm = extraInformation.dialogTerm
          bnodeTerm = extraInformation.bnodeTerm
          // have to do style instruction passing
          menu.style.width = 'auto'

          const h1 = table.appendChild(myDocument.createElement('tr'))
          const h1th = h1.appendChild(myDocument.createElement('th'))
          h1th.appendChild(myDocument.createTextNode('Did you mean...'))
          const plist = kb.statementsMatching(dialogTerm)
          let i
          for (i = 0; i < plist.length; i++) {
            if (
              kb.whether(
                plist[i].predicate,
                rdf('type'),
                UI.ns.owl('InverseFunctionalProperty')
              )
            ) {
              break
            }
          }
          const IDpredicate = plist[i].predicate
          const IDterm = kb.any(dialogTerm, plist[i].predicate)
          const text =
            UI.utils.label(dialogTerm) +
            ' who has ' +
            UI.utils.label(IDpredicate) +
            ' ' +
            IDterm +
            '?'
          const h2 = table.appendChild(myDocument.createElement('tr'))
          const h2th = h2.appendChild(myDocument.createElement('th'))
          h2th.appendChild(myDocument.createTextNode(text))
          h1th.setAttribute('colspan', '2')
          h2th.setAttribute('colspan', '2')
          const ans1 = table.appendChild(myDocument.createElement('tr'))
          ans1
            .appendChild(myDocument.createElement('th'))
            .appendChild(myDocument.createTextNode('Yes'))
          ans1
            .appendChild(myDocument.createElement('td'))
            .appendChild(myDocument.createTextNode('BOOLEAN'))
          const ans2 = table.appendChild(myDocument.createElement('tr'))
          ans2
            .appendChild(myDocument.createElement('th'))
            .appendChild(myDocument.createTextNode('No'))
          ans2
            .appendChild(myDocument.createElement('td'))
            .appendChild(myDocument.createTextNode('BOOLEAN'))
          break
        }
        case 'PredicateAutoComplete': // Prompt user  for possible relationships for new data
          inputText = extraInformation.inputText
          /*   The labeller functionality code ahs been lost or dropped -- reinstate this? */
          // @@ TODO: Write away the need for exception on next line
          // eslint-disable-next-line no-case-declarations
          const predicates = outline.labeller.searchAdv(
            inputText,
            undefined,
            'predicate'
          )
          // @@ TODO: Write away the need for exception on next line
          // eslint-disable-next-line no-case-declarations
          let results = [] // @@ fixme
          for (let i = 0; i < predicates.length; i++) {
            const tempQuery = {}
            tempQuery.vars = []
            tempQuery.vars.push('Kenny')
            const tempBinding = {}
            tempBinding.Kenny = kb.fromNT(predicates[i].NT)
            try {
              addPredicateChoice(tempQuery)(tempBinding)
            } catch (e) {
              throw new Error("I'll deal with bnodes later...[Kenny]" + e)
            } // I'll deal with bnodes later...
          }

          // @@ TODO: Write away the need for exception on next line
          // eslint-disable-next-line no-case-declarations
          let entries = results[0]
          if (entries.length === 0) {
            console.log('cm length 0\n') // hq
            this.clearMenu()
            return
          }
          for (let i = 0; i < entries.length && i < 10; i++) {
            // do not show more than 30 items
            addMenuItem(entries[i][1])
          }
          break
        case 'GeneralAutoComplete': {
          inputText = extraInformation.inputText
          try {
            results = outline.labeller.search(inputText)
          } catch (e) {
            console.log(
              'GeneralAutoComplete: debug me ' +
                extraInformation.selectedTd.textContent +
                '\n' +
                e +
                '\n'
            )
          }
          entries = results[0] // [label, subject,priority]
          const types = results[1]
          if (entries.length === 0) {
            console.log('cm length 0\n') // hq
            this.clearMenu()
            return
          }
          for (let i = 0; i < entries.length && i < 10; i++) {
            // do not show more than 30 items
            // console.log("\nGEN ENTRIES["+i+"] = "+entries[i]+"\n");//hq
            const thisNT = entries[i][1].toNT()
            // console.log("thisNT="+thisNT+"\n");
            tr = table.appendChild(myDocument.createElement('tr'))
            tr.setAttribute('about', thisNT)
            th = tr.appendChild(myDocument.createElement('th'))
            th.appendChild(myDocument.createElement('div')).appendChild(
              myDocument.createTextNode(entries[i][0])
            )
            // var theTerm = entries[i][1]
            // var type=theTerm?kb.any(kb.fromNT(thisNT),rdf('type')):undefined;
            const type = types[i]
            const typeLabel = type ? UI.utils.label(type) : ''
            tr.appendChild(myDocument.createElement('td')).appendChild(
              myDocument.createTextNode(typeLabel)
            )
          }
          /* var choices=extraInformation.choices;
                var index=extraInformation.index;
                for (var i=index-10;i<index+20;i++){ //show 30 items
                    if (i<0) i=0;
                    if (i==choices.length) break;
                    var thisNT=choices[i].NT;
                    var tr=table.appendChild(myDocument.createElement('tr'));
                    tr.setAttribute('about',thisNT);
                    var th=tr.appendChild(myDocument.createElement('th'))
                    th.appendChild(myDocument.createElement('div')).appendChild(myDocument.createTextNode(choices[i].label));
                    var theTerm=kb.fromNT(thisNT);
                    var type=theTerm?kb.any(kb.fromNT(thisNT),rdf('type')):undefined;
                    var typeLabel=type?label(type):"";
                    tr.appendChild(myDocument.createElement('td')).appendChild(myDocument.createTextNode(typeLabel));
                }
                */
          break
        }
        case 'JournalTitleAutoComplete': { // hql
          // HEART OF JOURNAL TITLE AUTOCOMPLETE

          // extraInformatin is from above getAutoCompleteHandler
          inputText = extraInformation.inputText
          console.log('testing searching text= ' + inputText + ' =====\n')
          console.log('\n===start JournalTitleAutoComplete\n')

          // Gets all the URI's with type Journal in the knowledge base
          const juris = kb.each(undefined, rdf('type'), bibo('Journal'))

          const matchedtitle = [] // debugging display before inserts into menu

          for (let i = 0; i < juris.length; i++) {
            const juri = juris[i]
            const jtitle = kb.each(juri, dcelems('title'), undefined)

            const jtstr = jtitle + ''

            const matchstr = inputText.toLowerCase()
            const jTitleLowerCase = jtstr.toLowerCase()

            // If the inputText as a whole is contained in a journal title
            if (jTitleLowerCase.search(matchstr) !== -1) {
              qp('FOUND A Journal Title Match!!!!!!')
              matchedtitle.push(jtitle)

              // Add it as a row to the menu:
              // === Title, URI ==
              const tr = table.appendChild(myDocument.createElement('tr'))
              tr.setAttribute('about', 'journalTitle')
              const th = tr.appendChild(myDocument.createElement('th'))
              th.appendChild(myDocument.createElement('div')).appendChild(
                myDocument.createTextNode(jtitle)
              )
              tr.appendChild(myDocument.createElement('td')).appendChild(
                myDocument.createTextNode(juri)
              )
            }
          }

          console.log('matched: ' + matchedtitle + '\n')

          console.log("\\\\done showMenu's JTAutocomplete\n")
          break
        }
        case 'LimitedPredicateChoice': {
          const choiceTerm = UI.utils.getAbout(kb, extraInformation.clickedTd)
          // because getAbout relies on kb.fromNT, which does not deal with
          // the 'Collection' termType. This termType is ambiguous anyway.
          choiceTerm.termType = 'Collection'
          const choices = kb.each(choiceTerm, UI.ns.link('element'))
          for (let i = 0; i < choices.length; i++) {
            addMenuItem(choices[i])
          }
          break
        }
        default: {
          tr = table.appendChild(myDocument.createElement('tr'))
          tr.className = 'no-suggest'
          th = tr.appendChild(myDocument.createElement('th'))
          th.appendChild(myDocument.createElement('div')).appendChild(
            myDocument.createTextNode(
              'No suggested choices. Try to type instead.'
            )
          )
          tr.appendChild(myDocument.createElement('td')).appendChild(
            myDocument.createTextNode('OK')
          )
          // var This = this
          tr.addEventListener('click', clearMenu, 'false')

          const nullFetcher = function () {}
          switch (inputQuery.constructor.name) {
            case 'Array':
              for (let i = 0; i < inputQuery.length; i++) {
                kb.query(
                  inputQuery[i],
                  addPredicateChoice(inputQuery[i]),
                  nullFetcher
                )
              }
              break
            case 'undefined':
              throw new Error('addPredicateChoice: query is not defined')
            // break
            default:
              kb.query(inputQuery, addPredicateChoice(inputQuery), nullFetcher)
          }
        }
      }
    }, // funciton showMenu

    /* When a blank is filled. This happens even for blue-cross editing. */
    fillInRequest: function fillInRequest (type, selectedTd, inputTerm) {
      const tr = selectedTd.parentNode
      let stat
      let isInverse
      // eslint-disable-next-line prefer-const
      stat = tr.AJAR_statement
      // eslint-disable-next-line prefer-const
      isInverse = tr.AJAR_inverse

      const reqTerm = type === 'object' ? stat.object : stat.predicate
      let newStat
      let doNext = false

      // RDF Event

      let eventhandler
      if (kb.any(reqTerm, UI.ns.link('onfillin'))) {
        /*    2017 -- Not sure what is supposed to happen here -- timbl @@@@
        eventhandler = function(subject) {
          return kb.any(reqTerm, UI.ns.link('onfillin')).value)
        }
        */
      }

      if (type === 'predicate') {
        // ToDo: How to link two things with an inverse relationship
        const newTd = outline.outlinePredicateTD(inputTerm, tr, false, false)
        if (selectedTd.nextSibling.className !== 'undetermined') {
          const s = new UI.rdf.Statement(
            stat.subject,
            inputTerm,
            stat.object,
            stat.why
          )

          try {
            UI.store.updater.update([], [s], function (
              uri,
              success,
              errorBody
            ) {
              if (success) {
                newStat = kb.anyStatementMatching(
                  stat.subject,
                  inputTerm,
                  stat.object,
                  stat.why
                )
                tr.AJAR_statement = newStat
                newTd.className = newTd.className.replace(/ pendingedit/g, '')
              } else {
                // outline.UserInput.deleteTriple(newTd,true);
                // Warn the user that the write has failed.
                UI.log.warn(
                  'Failure occurs (#2) while inserting ' +
                    tr.AJAR_statement +
                    '\n\n' +
                    errorBody
                )
              }
            })
          } catch (e) {
            UI.log.error(e)
            // Warn the user that the write has failed.
            UI.log.warn(
              'Error when insert (#2) of statement ' + s + ':\n\t' + e
            )
            return
          }

          newTd.className += ' pendingedit'
          this.lastModified = null
        } else {
          this.formUndetStat(
            tr,
            stat.subject,
            inputTerm,
            stat.object,
            stat.why,
            false
          )
          outline.walk('right')
          doNext = true
        }
        outline.replaceTD(newTd, selectedTd)
        TempFormula.remove(stat)
      } else if (type === 'object') {
        // Object value has been edited
        const newTd = outline.outlineObjectTD(inputTerm)
        outline.replaceTD(newTd, selectedTd)
        if (
          !selectedTd.previousSibling ||
          selectedTd.previousSibling.className !== 'undetermined'
        ) {
          let s
          if (!isInverse) {
            s = new UI.rdf.Statement(
              stat.subject,
              stat.predicate,
              inputTerm,
              stat.why
            )
          } else {
            s = new UI.rdf.Statement(
              inputTerm,
              stat.predicate,
              stat.object,
              stat.why
            )
          }

          try {
            UI.store.updater.update([], [s], function (
              uri,
              success,
              _errorBody
            ) {
              UI.log.info(
                '@@ usinput.js (object) callback ok=' +
                  success +
                  ' for statement:' +
                  s +
                  '\n '
              )
              let newStats
              if (success) {
                newTd.className = newTd.className.replace(/ pendingedit/g, '') // User feedback
                if (!isInverse) {
                  newStats = kb.statementsMatching(
                    stat.subject,
                    stat.predicate,
                    inputTerm,
                    stat.why
                  )
                } else {
                  newStats = kb.statementsMatching(
                    inputTerm,
                    stat.predicate,
                    stat.object,
                    stat.why
                  )
                }
                if (!newStats.length) {
                  UI.log.error("userinput.js 1711: Can't find statememt!")
                }
                tr.AJAR_statement = newStats[0]
              } else {
                UI.log.warn(
                  'userinput.js (object): Fail trying to insert statement ' + s
                )
                // outline.UserInput.deleteTriple(newTd,true);
              }
            })
          } catch (e) {
            // outline.UserInput.deleteTriple(newTd,true);
            UI.log.error(
              'userinput.js (object): exception trying to insert statement ' +
                s +
                ': ' +
                UI.utils.stackString(e)
            )
            UI.log.warn('Error trying to insert statement ' + s + ':\n' + e)
            return
          }

          this.lastModified = null
          newTd.className += ' pendingedit'
        } else {
          // ?this.formUndetStat(tr...)
          outline.walk('left')
          doNext = true
        }
        // removal of the undetermined statement
        TempFormula.remove(stat)
      }
      // do not throw away user's work even update fails
      UserInputFormula.statements.push(newStat)
      if (eventhandler) eventhandler(stat.subject)
      if (doNext) {
        this.startFillInText(outline.getSelection()[0])
      } else {
        return true
      } // can clearMenu
    },

    formUndetStat: function formUndetStat (
      trNode,
      subject,
      predicate,
      object,
      why,
      inverse
    ) {
      trNode.AJAR_inverse = inverse
      trNode.AJAR_statement = TempFormula.add(subject, predicate, object, why)
      return trNode.AJAR_statement
    }
  }
}