How to use the solid-ui.utils function in solid-ui

} else {
            form.parentNode.removeChild(form)
            rerender(div)
            outliner.GotoSubject(issue, true, undefined, true, undefined)
          }
        }
        updater.update([], sts, sendComplete)
      }
      // form.addEventListener('submit', function() {try {sendNewIssue} catch(e){console.log('sendNewIssue: '+e)}}, false)
      // form.setAttribute('onsubmit', "function xx(){return false;}")

      UI.store.fetcher.removeCallback('done', 'expand') // @@ experimental -- does this kill the re-paint? no
      UI.store.fetcher.removeCallback('fail', 'expand')

      var states = kb.any(tracker, WF('issueClass'))
      var classLabel = UI.utils.label(states)
      form.innerHTML = '<h2>Add new ' + (superIssue ? 'sub ' : '') +
        classLabel + '</h2><p>Title of new ' + classLabel + ':</p>'
      var titlefield = dom.createElement('input')
      titlefield.setAttribute('type', 'text')
      titlefield.setAttribute('style', 'margin: 0.5em; font-size: 100%; padding: 0.3em;')
      titlefield.setAttribute('size', '100')
      titlefield.setAttribute('maxLength', '2048') // No arbitrary limits
      titlefield.select() // focus next user input
      titlefield.addEventListener('keyup', function (e) {
        if (e.keyCode === 13) {
          sendNewIssue()
        }
      }, false)
      form.appendChild(titlefield)
      return form
    }

var toolsPane = function (selectAllGroups, selectedGroups, groupsMainTable, book, dom, me) {
  var kb = UI.store, ns = UI.ns
  var updater = UI.store.updater
  var ACL = UI.ns.acl, VCARD = UI.ns.vcard
  var doc = $rdf.sym(book.uri.split('#')[0]) // The ACL is actually to the doc describing the thing

  var buttonStyle = 'font-size: 100%; margin: 0.8em; padding:0.5em;'

  var pane = dom.createElement('div')
  var table = pane.appendChild(dom.createElement('table'))
  table.setAttribute('style', 'font-size:120%; margin: 1em; border: 0.1em #ccc ;')
  var headerRow = table.appendChild(dom.createElement('tr'))
  headerRow.textContent = UI.utils.label(book) + ' - tools'
  headerRow.setAttribute('style', 'min-width: 20em; padding: 1em; font-size: 150%; border-bottom: 0.1em solid red; margin-bottom: 2em;')

  var statusRow = table.appendChild(dom.createElement('tr'))
  var statusBlock = statusRow.appendChild(dom.createElement('div'))
  statusBlock.setAttribute('style', 'padding: 2em;')
  var MainRow = table.appendChild(dom.createElement('tr'))
  var box = MainRow.appendChild(dom.createElement('table'))
  var bottomRow = table.appendChild(dom.createElement('tr'))

  context = { target: book, me: me, noun: 'address book',
  div: pane, dom: dom, statusRegion: statusBlock }

  box.appendChild(UI.aclControl.ACLControlBox5(book.dir(), dom, 'book', kb, function (ok, body) {
    if (!ok) box.innerHTML = 'ACL control box Failed: ' + body
  }))

sts.map(st => {
        already[st.subject.toNT()] = st
      })
      for (var nt in kb.findMembersNT(subject)) {
        if (!already[nt]) {
          more.push($rdf.st(kb.fromNT(nt), ns.rdf('type'), subject)) // @@ no provenance
        }
      }
      if (more.length) {
        complain(
          'There are ' +
            sts.length +
            ' explicit and ' +
            more.length +
            ' implicit members of ' +
            UI.utils.label(subject)
        )
      }
      if (subject.sameTerm(ns.rdf('Property'))) {
        // / Do not find all properties used as properties .. unless look at kb index
      } else if (subject.sameTerm(ns.rdfs('Class'))) {
        var uses = kb.statementsMatching(undefined, ns.rdf('type'), undefined)
        var usedTypes = {}
        uses.map(function (st) {
          usedTypes[st.object] = st
        }) // Get unique
        var used = []
        for (var i in usedTypes) {
          used.push($rdf.st($rdf.sym(i), ns.rdf('type'), ns.rdfs('Class')))
        }
        complain(
          'Total of ' +

addNewPredicateObject: function addNewPredicateObject (e) {
      if (UI.utils.getTarget(e).className !== 'bottom-border-active') return
      var This = outline.UserInput
      var target = UI.utils.getTarget(e)

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

case 'BlankNode':
          if (obj.toNT() in doneBnodes) {
            // Break infinite recursion
            referencedBnodes[obj.toNT()] = true
            const anchor = myDocument.createElement('a')
            anchor.setAttribute('href', '#' + obj.toNT().slice(2))
            anchor.setAttribute('class', 'bnodeRef')
            anchor.textContent = '*' + obj.toNT().slice(3)
            return anchor
          }
          doneBnodes[obj.toNT()] = true // Flag to prevent infinite recursion in propertyTree
          var newTable = propertyTree(obj)
          doneBnodes[obj.toNT()] = newTable // Track where we mentioned it first
          if (
            UI.utils.ancestor(newTable, 'TABLE') &&
            UI.utils.ancestor(newTable, 'TABLE').style.backgroundColor ===
              'white'
          ) {
            newTable.style.backgroundColor = '#eee'
          } else {
            newTable.style.backgroundColor = 'white'
          }
          return newTable

        case 'Collection':
          res = myDocument.createElement('table')
          res.setAttribute('class', 'collectionAsTables')
          for (var i = 0; i < obj.elements.length; i++) {
            var tr = myDocument.createElement('tr')
            res.appendChild(tr)
            tr.appendChild(objectTree(obj.elements[i]))

var createNewContact = function (book, name, selectedGroups, callbackFunction) {
        book = findBookFromGroups(book)
        var nameEmailIndex = kb.any(book, ns.vcard('nameEmailIndex'))

        var uuid = UI.utils.genUuid()
        var person = kb.sym(book.dir().uri + 'Person/' + uuid + '/index.ttl#this')
        var doc = person.doc()

        // Sets of statements to different files
        var agenda = [ // Patch the main index to add the person
          [ $rdf.st(person, ns.vcard('inAddressBook'), book, nameEmailIndex), // The people index
            $rdf.st(person, ns.vcard('fn'), name, nameEmailIndex) ]
        ]

        // @@ May be missing email - sync that differently

        // sts.push(new $rdf.Statement(person, DCT('created'), new Date(), doc));  ??? include this?
        for (var gu in selectedGroups) {
          var g = kb.sym(gu)
          var gd = g.doc()
          agenda.push([ $rdf.st(g, ns.vcard('hasMember'), person, gd),

var makeParticipantsGroup = function () {
      var toolObject = {
        icon: 'noun_339237.svg', // Group of people
        limit: 1, // Only one tab
        shareTab: true // but many things behind it
      }
      var options = {
        newInstance: kb.sym(meeting.dir().uri + 'Attendees/index.ttl#this'),
        pane: panes.contact,
        predicate: ns.meeting('attendeeGroup'),
        tabTitle: 'Attendees',
        instanceClass: ns.vcard('Group'),
        instanceName: UI.utils.label(subject) + ' attendees',
        noIndexHTML: true
      }

      return makeNewPaneTool(toolObject, options)
    }

var selectOptions = {}
            var predicate = ns.sched('availabilty')
            var cellSubject = dataPointForNT[x.toNT()]
            var selector = UI.widgets.makeSelectForOptions(
              dom,
              kb,
              cellSubject,
              predicate,
              possibleAvailabilities,
              selectOptions,
              resultsDoc,
              callbackFunction
            )
            cell.appendChild(selector)
          } else if (value !== null) {
            cell.textContent = UI.utils.label(value)
          }
        }

complain('Error: No category correspnding to ' + catTail)
          return null
        }
        var list = kb.each(undefined, ns.rdf('type'), cat)
        for (var i = 0; i < list.length; i++) {
          if (!kb.any(list[i], pred)) {
            guilty.push(list[i])
          }
        }
        if (guilty.length) {
          tab = transactionTable(dom, guilty)
          count = tab.children.length
          div.appendChild(dom.createElement('h3')).textContent =
            UI.utils.label(cat) +
            ' with no ' +
            UI.utils.label(pred) +
            (count < 4 ? '' : ' (' + count + ')')
          div.appendChild(tab)
        }
        return count
      }

//which has {some triples} tms:justification tms:premise)
		if (stsJust[j].subject.termType == 'Graph' && stsJust[j].object != ap_prem.toString()){
			var sts = stsJust[j].subject.statements;
			if (sts.length != 1) throw new Error("There should be only ONE statement indicating some event is (non-)compliant with some policy!")
			//Keep track of the subjects of the statements in the global variables above and return "Justify"
			//which will be the tool-tip text of the label icon
			if (sts[0].predicate.toString() == ap_compliant.toString()){
                var compliantString = UI.utils.label(sts[0].subject) + " is compliant with " + UI.utils.label(sts[0].object);
                var compliantArr = [];
                compliantArr.push(sts[0].object);
                compliantArr.push(ap_compliant.toString());
                compliantArr.push(compliantString);
				justificationsArr.push(compliantArr);
            }
			if (sts[0].predicate.toString() == ap_nonCompliant.toString()){
                var nonCompliantString = UI.utils.label(sts[0].subject) + " is non compliant with " + UI.utils.label(sts[0].object);
                var nonCompliantArr = [];
                nonCompliantArr.push(sts[0].object);
                nonCompliantArr.push(ap_nonCompliant.toString());
                nonCompliantArr.push(nonCompliantString);
				justificationsArr.push(nonCompliantArr);

            }
			stringToDisplay = "Justify" //Even with one relevant statement this method should return something
		}
	}
	//Make the subject list we will be exploring in the render function unique
	//compliantStrings = UI.widgets.unique(compliantStrings);
	//nonCompliantStrings = UI.widgets.unique(nonCompliantStrings);

   return stringToDisplay;
}