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

reqs.forEach(req => {
          let rrr = kb.any(req, kb.sym('http://www.w3.org/2007/ont/link#response'))
          if (rrr) {
            contentType = kb.anyValue(rrr, UI.ns.httph('content-type'))
            allowed = kb.anyValue(rrr, UI.ns.httph('allow'))
            eTag = kb.anyValue(rrr, UI.ns.httph('etag'))
            if (!eTag) console.log('sourcePane: No eTag on GET')
          }
        })
        // contentType = response.headers['content-type'] // Not available ?!

}
        complain('Totals of ' + trans.length + ' transactions: ' + str, '') // @@@@@  yucky -- need 2 col table
        if (types > 1) {
          complain('Overall net: ' + grandTotal, 'text-treatment: bold;')
        }
      }
      var tableDiv = UI.table(myDocument, {
        query: query,
        onDone: calculations
      })
      thisDiv.appendChild(tableDiv)
    }

    //          Render the set of trips which have transactions in this class

    if (UI.ns.qu('Transaction') in kb.findSuperClassesNT(subject)) {
      const ts = kb.each(undefined, ns.rdf('type'), subject)
      const triples = []
      var index = []
      for (var i = 0; i < ts.length; i++) {
        var trans = ts[i]
        var trip = kb.any(trans, TRIP('trip'))
        if (!trip) {
          triples.push(trans)
        } else {
          if (!(trans in index)) index[trip] = { total: 0, transactions: [] }
          var usd = kb.any(trans, UI.ns.qu('in_USD'))
          if (usd) index[trip].total += usd
          var date = kb.any(trans, UI.ns.qu('date'))
          index[trip.toNT()].transactions.push([date, trans])
        }
      }

/*      Data content Pane
 **
 **  This pane shows the content of a particular RDF resource
 ** or at least the RDF semantics we attribute to that resource.
 */

// To do:  - Only take data from one graph
//         - Only do forwards not backward?
//         - Expand automatically all the way down
//         - original source view?  Use ffox view source

const UI = require('solid-ui')
const $rdf = require('rdflib')
const ns = UI.ns

module.exports = {
  icon: UI.icons.originalIconBase + 'rdf_flyer.24.gif',

  name: 'dataContents',

  audience: [ns.solid('Developer')],

  label: function (subject, context) {
    if (
      'http://www.w3.org/2007/ont/link#ProtocolEvent' in
      context.session.store.findTypeURIs(subject)
    ) {
      return null
    }
    var n = context.session.store.statementsMatching(

//          Render the set of trips which have transactions in this class

    if (UI.ns.qu('Transaction') in kb.findSuperClassesNT(subject)) {
      const ts = kb.each(undefined, ns.rdf('type'), subject)
      const triples = []
      var index = []
      for (var i = 0; i < ts.length; i++) {
        var trans = ts[i]
        var trip = kb.any(trans, TRIP('trip'))
        if (!trip) {
          triples.push(trans)
        } else {
          if (!(trans in index)) index[trip] = { total: 0, transactions: [] }
          var usd = kb.any(trans, UI.ns.qu('in_USD'))
          if (usd) index[trip].total += usd
          var date = kb.any(trans, UI.ns.qu('date'))
          index[trip.toNT()].transactions.push([date, trans])
        }
      }
      /*            var byDate = function(a,b) {
                      return new Date(kb.any(a, CAL('dtstart'))) -
                              new Date(kb.any(b, CAL('dtstart')));
                  }
      */
      var list = []
      for (var h1 in index) {
        var t1 = kb.fromNT(h1)
        list.push([kb.any(t1, CAL('dtstart')), t1])
      }
      list.sort()
      for (var j = 0; j < list.length; j++) {
        var t2 = list[j][1]

/*      RDF/XML content Pane
 **
 **  This pane shows the content of a particular RDF resource
 ** or at least the RDF semantics we attribute to that resource,
 ** in generated N3 syntax.
 */

const UI = require('solid-ui')
const ns = UI.ns

module.exports = {
  icon: UI.icons.originalIconBase + '22-text-xml4.png',

  name: 'RDFXML',

  audience: [ns.solid('Developer')],

  label: function (subject, context) {
    const store = context.session.store
    if (
      'http://www.w3.org/2007/ont/link#ProtocolEvent' in
      store.findTypeURIs(subject)
    ) {
      return null
    }

label: function (subject, context) {
    var kb = context.session.store
    var ns = UI.ns
    var allowed = [
      // 'text/plain',
      'text/html',
      'application/xhtml+xml'
      // 'image/png', 'image/jpeg', 'application/pdf',
      // 'video/mp4'
    ]

    var hasContentTypeIn = function (kb, x, displayables) {
      var cts = kb.fetcher.getHeader(x, 'content-type')
      if (cts) {
        for (var j = 0; j < cts.length; j++) {
          for (var k = 0; k < displayables.length; k++) {
            if (cts[j].indexOf(displayables[k]) >= 0) {
              return true
            }

/*   Chat Pane
**
**  Plan is to support a finte number of chat graph shapes
** and investigate the interop between them.
*/

const UI = require('solid-ui')
const ns = UI.ns
const kb = UI.store

module.exports = {
  icon: UI.icons.iconBase + 'noun_346319.svg',

  name: 'chat',

  /*   AN RRSAgent IRC log:

  
      a    foaf:ChatChannel
      foaf:chatEventList
              [ rdf:_100
                 <#T19-10-58>
              rdf:_101
                 <#T19-10-58-1>

function singleIssueUI (subject, div) {
      var ns = UI.ns
      var predicateURIsDone = {}
      var donePredicate = function (pred) { predicateURIsDone[pred.uri] = true }
      donePredicate(ns.rdf('type'))
      donePredicate(ns.dc('title'))

      var setPaneStyle = function () {
        var types = kb.findTypeURIs(subject)
        var mystyle = 'padding: 0.5em 1.5em 1em 1.5em; '
        var backgroundColor = null
        for (var uri in types) {
          backgroundColor = kb.any(kb.sym(uri), kb.sym('http://www.w3.org/ns/ui#backgroundColor'))
          if (backgroundColor) break
        }
        backgroundColor = backgroundColor ? backgroundColor.value : '#eee' // default grey
        mystyle += 'background-color: ' + backgroundColor + '; '
        div.setAttribute('style', mystyle)

label: function (subject, context) {
    const store = context.session.store
    // if (!store.holds(subject, UI.ns.rdf('type'),UI.ns.rdfs('Class'))) return null
    if (!store.any(undefined, UI.ns.rdf('type'), subject)) {
      return null
    }
    var n = store.statementsMatching(undefined, UI.ns.rdf('type'), subject)
      .length
    if (n === 0) {
      // None, suppress pane
      return null
    }
    if (n > 15) {
      // @@ At the moment this pane can be slow with too many @@ fixme by using limits
      return null
    }
    return UI.utils.label(subject) + ' table'
  },

label: function (subject) {
    if (UI.store.whether(subject, UI.ns.rdf('type'), UI.ns.foaf('Person'))) {
      return 'Microblog'
    } else {
      return null
    }
  },
  render: function (s, doc) {