manager.js

/* istanbul ignore file */
/* -*- coding: utf-8-dos -*-
   Outline Mode Manager
*/
import * as paneRegistry from 'pane-registry'
import * as $rdf from 'rdflib'
import * as UI from 'solid-ui'
import { authn, authSession, store } from 'solid-logic'
import { propertyViews } from './propertyViews'
import { outlineIcons } from './outlineIcons.js' // @@ chec
import { UserInput } from './userInput.js'
import * as queryByExample from './queryByExample.js'

/* global alert XPathResult sourceWidget */
// XPathResult?

// const iconHeight = '24px'

export default function (context) {
  const dom = context.dom

  this.document = context.dom
  this.outlineIcons = outlineIcons
  this.labeller = this.labeller || {}
  this.labeller.LanguagePreference = '' // for now
  const outline = this // Kenny: do we need this?
  const thisOutline = this
  let selection = []
  this.selection = selection
  this.ancestor = UI.utils.ancestor // make available as outline.ancestor in callbacks
  this.sparql = $rdf.UpdateManager
  this.kb = store
  const kb = store
  const sf = store.fetcher
  dom.outline = this
  this.qs = new queryByExample.QuerySource() // Track queries in queryByExample

  // var selection = []  // Array of statements which have been selected
  // this.focusTd // the <td> that is being observed
  this.UserInput = new UserInput(this)
  this.clipboardAddress = 'tabulator:clipboard' // Weird
  this.UserInput.clipboardInit(this.clipboardAddress)
  const outlineElement = this.outlineElement

  this.init = function () {
    const table = getOutlineContainer()
    table.outline = this
  }

  /** benchmark a function **/
  benchmark.lastkbsize = 0

  function benchmark (f) {
    const args = []
    for (let i = arguments.length - 1; i > 0; i--) args[i - 1] = arguments[i]
    // UI.log.debug('BENCHMARK: args=' + args.join());
    const begin = new Date().getTime()
    const returnValue = f.apply(f, args)
    const end = new Date().getTime()
    UI.log.info(
      'BENCHMARK: kb delta: ' +
        (kb.statements.length - benchmark.lastkbsize) +
        ', time elapsed for ' +
        f +
        ' was ' +
        (end - begin) +
        'ms'
    )
    benchmark.lastkbsize = kb.statements.length
    return returnValue
  } // benchmark

  // / ////////////////////// Representing data

  //  Represent an object in summary form as a table cell

  function appendRemoveIcon (node, subject, removeNode) {
    const image = UI.utils.AJARImage(
      outlineIcons.src.icon_remove_node,
      'remove',
      undefined,
      dom
    )
    image.addEventListener('click', removeNodeIconMouseDownListener)
    // image.setAttribute('align', 'right')  Causes icon to be moved down
    image.node = removeNode
    image.setAttribute('about', subject.toNT())
    image.style.marginLeft = '5px'
    image.style.marginRight = '10px'
    // image.style.border='solid #777 1px';
    node.appendChild(image)
    return image
  }

  this.appendAccessIcons = function (kb, node, obj) {
    if (obj.termType !== 'NamedNode') return
    const uris = kb.uris(obj)
    uris.sort()
    let last = null
    for (let i = 0; i < uris.length; i++) {
      if (uris[i] === last) continue
      last = uris[i]
      thisOutline.appendAccessIcon(node, last)
    }
  }

  this.appendAccessIcon = function (node, uri) {
    if (!uri) return ''
    const docuri = $rdf.uri.docpart(uri)
    if (docuri.slice(0, 5) !== 'http:') return ''
    const state = sf.getState(docuri)
    let icon, alt, listener
    switch (state) {
      case 'unrequested':
        icon = outlineIcons.src.icon_unrequested
        alt = 'fetch'
        listener = unrequestedIconMouseDownListener
        break
      case 'requested':
        icon = outlineIcons.src.icon_requested
        alt = 'fetching'
        listener = failedIconMouseDownListener // new: can retry yello blob
        break
      case 'fetched':
        icon = outlineIcons.src.icon_fetched
        listener = fetchedIconMouseDownListener
        alt = 'loaded'
        break
      case 'failed':
        icon = outlineIcons.src.icon_failed
        alt = 'failed'
        listener = failedIconMouseDownListener
        break
      case 'unpermitted':
        icon = outlineIcons.src.icon_failed
        listener = failedIconMouseDownListener
        alt = 'no perm'
        break
      case 'unfetchable':
        icon = outlineIcons.src.icon_failed
        listener = failedIconMouseDownListener
        alt = 'cannot fetch'
        break
      default:
        UI.log.error('?? state = ' + state)
        break
    } // switch
    const img = UI.utils.AJARImage(
      icon,
      alt,
      outlineIcons.tooltips[icon].replace(/[Tt]his resource/, docuri),
      dom
    )
    img.setAttribute('uri', uri)
    img.addEventListener('click', listener) // @@ seemed to be missing 2017-08
    addButtonCallbacks(img, docuri)
    node.appendChild(img)
    return img
  } // appendAccessIcon

  /** make the td for an object (grammatical object)
   *  @param obj - an RDF term
   *  @param view - a VIEW function (rather than a bool asImage)
   **/

  this.outlineObjectTD = function outlineObjectTD (
    obj,
    view,
    deleteNode,
    statement
  ) {
    const td = dom.createElement('td')
    td.setAttribute(
      'style',
      'margin: 0.2em; border: none; padding: 0; vertical-align: top;'
    )
    td.setAttribute('notSelectable', 'false')
    const theClass = 'obj'

    // set about and put 'expand' icon
    if (
      obj.termType === 'NamedNode' ||
      obj.termType === 'BlankNode' ||
      (obj.termType === 'Literal' &&
        obj.value.slice &&
        (obj.value.slice(0, 6) === 'ftp://' ||
          obj.value.slice(0, 8) === 'https://' ||
          obj.value.slice(0, 7) === 'http://'))
    ) {
      td.setAttribute('about', obj.toNT())
      td.appendChild(
        UI.utils.AJARImage(
          UI.icons.originalIconBase + 'tbl-expand-trans.png',
          'expand',
          undefined,
          dom
        )
      ).addEventListener('click', expandMouseDownListener)
    }
    td.setAttribute('class', theClass) // this is how you find an object
    // @@ TAKE CSS OUT OF STYLE SHEET
    if (kb.whether(obj, UI.ns.rdf('type'), UI.ns.link('Request'))) {
      td.className = 'undetermined'
    } // @@? why-timbl

    if (!view) {
      // view should be a function pointer
      view = viewAsBoringDefault
    }
    td.appendChild(view(obj))
    if (deleteNode) {
      appendRemoveIcon(td, obj, deleteNode)
    }

    // set DOM methods
    td.tabulatorSelect = function () {
      setSelected(this, true)
    }
    td.tabulatorDeselect = function () {
      setSelected(this, false)
    }

    td.addEventListener('click', selectableTDClickListener)
    return td
  } // outlineObjectTD

  this.outlinePredicateTD = function outlinePredicateTD (
    predicate,
    newTr,
    inverse,
    internal
  ) {
    const predicateTD = dom.createElement('TD')
    predicateTD.setAttribute('about', predicate.toNT())
    predicateTD.setAttribute('class', internal ? 'pred internal' : 'pred')

    let lab
    switch (predicate.termType) {
      case 'BlankNode': // TBD
        predicateTD.className = 'undetermined'
        break
      case 'NamedNode':
        lab = UI.utils.predicateLabelForXML(predicate, inverse)
        break
      case 'Collection': // some choices of predicate
        lab = UI.utils.predicateLabelForXML(predicate.elements[0], inverse)
    }
    lab = lab ? lab.slice(0, 1).toUpperCase() + lab.slice(1) : '...'
    // if (kb.statementsMatching(predicate,rdf('type'), UI.ns.link('Request')).length) predicateTD.className='undetermined';

    const labelTD = dom.createElement('TD')
    labelTD.setAttribute(
      'style',
      'margin: 0.2em; border: none; padding: 0; vertical-align: top;'
    )
    labelTD.setAttribute('notSelectable', 'true')
    labelTD.appendChild(dom.createTextNode(lab))
    predicateTD.appendChild(labelTD)
    labelTD.style.width = '100%'
    predicateTD.appendChild(termWidget.construct(dom)) // termWidget is global???
    for (const w in outlineIcons.termWidgets) {
      if (!newTr || !newTr.AJAR_statement) break // case for TBD as predicate
      // alert(Icon.termWidgets[w]+'   '+Icon.termWidgets[w].filter)
      if (
        outlineIcons.termWidgets[w].filter &&
        outlineIcons.termWidgets[w].filter(
          newTr.AJAR_statement,
          'pred',
          inverse
        )
      ) {
        termWidget.addIcon(predicateTD, outlineIcons.termWidgets[w])
      }
    }

    // set DOM methods
    predicateTD.tabulatorSelect = function () {
      setSelected(this, true)
    }
    predicateTD.tabulatorDeselect = function () {
      setSelected(this, false)
    }
    predicateTD.addEventListener('click', selectableTDClickListener)
    return predicateTD
  } // outlinePredicateTD

  /**
   * Render Tabbed set of home app panes
   *
   * @param {Object} [options] A set of options you can provide
   * @param {string} [options.selectedTab] To open a specific dashboard pane
   * @param {Function} [options.onClose] If given, will present an X for the dashboard, and call this method when clicked
   * @returns Promise<{Element}> - the div that holds the dashboard
   */
  async function globalAppTabs (options = {}) {
    console.log('globalAppTabs @@')
    const div = dom.createElement('div')
    const me = authn.currentUser()
    if (!me) {
      alert('Must be logged in for this')
      throw new Error('Not logged in')
    }
    const items = await getDashboardItems()

    function renderTab (div, item) {
      div.dataset.globalPaneName = item.tabName || item.paneName
      div.textContent = item.label
    }

    function renderMain (containerDiv, item) {
      // Items are pane names
      const pane = paneRegistry.byName(item.paneName) // 20190701
      containerDiv.innerHTML = ''
      const table = containerDiv.appendChild(dom.createElement('table'))
      const me = authn.currentUser()
      thisOutline.GotoSubject(
        item.subject || me,
        true,
        pane,
        false,
        undefined,
        table
      )
    }

    div.appendChild(
      UI.tabs.tabWidget({
        dom,
        subject: me,
        items,
        renderMain,
        renderTab,
        ordered: true,
        orientation: 0,
        backgroundColor: '#eeeeee', // black?
        selectedTab: options.selectedTab,
        onClose: options.onClose
      })
    )
    return div
  }
  this.getDashboard = globalAppTabs

  async function getDashboardItems () {
    const me = authn.currentUser()
    if (!me) return []
    const div = dom.createElement('div')
    const [books, pods] = await Promise.all([getAddressBooks(), getPods()])
    return [
      {
        paneName: 'home',
        label: 'Your stuff',
        icon: UI.icons.iconBase + 'noun_547570.svg'
      },
      {
        paneName: 'basicPreferences',
        label: 'Preferences',
        icon: UI.icons.iconBase + 'noun_Sliders_341315_00000.svg'
      },
      {
        paneName: 'profile',
        label: 'Your Profile',
        icon: UI.icons.iconBase + 'noun_15059.svg'
      },
      {
        paneName: 'editProfile',
        label: 'Edit your Profile',
        icon: UI.icons.iconBase + 'noun_492246.svg'
      }
    ]
      .concat(books)
      .concat(pods)

    async function getPods () {
      async function addPodStorage (pod) { // namedNode
        await loadContainerRepresentation(pod)
        if (kb.holds(pod, ns.rdf('type'), ns.space('Storage'), pod.doc())) {
          pods.push(pod)
          return true
        }
        return false
      }
      async function addPodStorageFromUrl (url) {
        const podStorage = new URL(url)
        // check for predicate pim:Storage in containers up the path tree
        let pathStorage = podStorage.pathname
        while (pathStorage.length) {
          pathStorage = pathStorage.substring(0, pathStorage.lastIndexOf('/'))
          if (await addPodStorage(kb.sym(`${podStorage.origin}${pathStorage}/`))) return
        }
        // TODO should url.origin be added to pods list when there are no pim:Storage ???
      }

      try {
        // need to make sure that profile is loaded
        await kb.fetcher.load(me.doc())
      } catch (err) {
        console.error('Unable to load profile', err)
        return []
      }
      // load pod's storages from profile
      let pods = kb.each(me, ns.space('storage'), null, me.doc())
      pods.map(async (pod) => {
        // TODO use addPodStorageFromUrl(pod.uri) to check for pim:Storage ???
        await loadContainerRepresentation(pod)
      })

      try {
        // if uri then SolidOS is a browse.html web app
        const uri = (new URL(window.location.href)).searchParams.get('uri')
        const podUrl = uri || window.location.href
        await addPodStorageFromUrl(podUrl)
      } catch (err) {
        console.error('cannot load container', err)
      }
      // remove namedNodes duplicates
      function uniques (nodes) {
        const uniqueNodes = []
        nodes.forEach(node => {
          if (!uniqueNodes.find(uniqueNode => uniqueNode.equals(node))) uniqueNodes.push(node)
        })
        return uniqueNodes
      }
      pods = uniques(pods)
      if (!pods.length) return []
      return pods.map((pod, index) => {
        function split (item) { return item.uri.split('//')[1].slice(0, -1) }
        const label = split(me).startsWith(split(pod)) ? 'Your storage' : split(pod)
        return {
          paneName: 'folder',
          tabName: `folder-${index}`,
          label,
          subject: pod,
          icon: UI.icons.iconBase + 'noun_Cabinet_251723.svg'
        }
      })
    }

    async function getAddressBooks () {
      try {
        const context = await UI.login.findAppInstances(
          { me, div, dom },
          ns.vcard('AddressBook')
        )
        return (context.instances || []).map((book, index) => ({
          paneName: 'contact',
          tabName: `contact-${index}`,
          label: 'Contacts',
          subject: book,
          icon: UI.icons.iconBase + 'noun_15695.svg'
        }))
      } catch (err) {
        console.error('oops in globalAppTabs AddressBook')
      }
      return []
    }
  }
  this.getDashboardItems = getDashboardItems

  /**
   * Call this method to show the global dashboard.
   *
   * @param {Object} [options] A set of options that can be passed
   * @param {string} [options.pane] To open a specific dashboard pane
   * @returns {Promise<void>}
   */
  async function showDashboard (options = {}) {
    const dashboardContainer = getDashboardContainer()
    const outlineContainer = getOutlineContainer()
    // reuse dashboard if already children already is inserted
    if (dashboardContainer.childNodes.length > 0 && options.pane) {
      outlineContainer.style.display = 'none'
      dashboardContainer.style.display = 'inherit'
      const tab = dashboardContainer.querySelector(
        `[data-global-pane-name="${options.pane}"]`
      )
      if (tab) {
        tab.click()
        return
      }
      console.warn(
        'Did not find the referred tab in global dashboard, will open first one'
      )
    }

    // create a new dashboard if not already present
    const dashboard = await globalAppTabs({
      selectedTab: options.pane,
      onClose: closeDashboard
    })

    // close the dashboard if user log out
    authSession.events.on('logout', closeDashboard)

    // finally - switch to showing dashboard
    outlineContainer.style.display = 'none'
    dashboardContainer.appendChild(dashboard)
    const tab = dashboardContainer.querySelector(
      `[data-global-pane-name="${options.pane}"]`
    )
    if (tab) {
      tab.click()
    }

    function closeDashboard () {
      dashboardContainer.style.display = 'none'
      outlineContainer.style.display = 'inherit'
    }
  }
  this.showDashboard = showDashboard

  function getDashboardContainer () {
    return getOrCreateContainer('GlobalDashboard')
  }

  function getOutlineContainer () {
    return getOrCreateContainer('outline')
  }

  /**
   * Get element with id or create a new on the fly with that id
   *
   * @param {string} id The ID of the element you want to get or create
   * @returns {HTMLElement}
   */
  function getOrCreateContainer (id) {
    return (
      document.getElementById(id) ||
      (() => {
        const dashboardContainer = document.createElement('div')
        dashboardContainer.id = id
        const mainContainer =
          document.querySelector('[role="main"]') || document.body
        return mainContainer.appendChild(dashboardContainer)
      })()
    )
  }

  async function loadContainerRepresentation (subject) {
    // force reload for index.html with RDFa
    if (!kb.any(subject, ns.ldp('contains'), undefined, subject.doc())) {
      const response = await kb.fetcher.webOperation('GET', subject.uri, kb.fetcher.initFetchOptions(subject.uri, { headers: { accept: 'text/turtle' } }))
      const containerTurtle = response.responseText
      $rdf.parse(containerTurtle, kb, subject.uri, 'text/turtle')
    }
  }

  async function getRelevantPanes (subject, context) {
    // make sure container representation is loaded (when server returns index.html)
    if (subject.uri.endsWith('/')) { await loadContainerRepresentation(subject) }
    const panes = context.session.paneRegistry
    const relevantPanes = panes.list.filter(
      pane => pane.label(subject, context) && !pane.global
    )
    if (relevantPanes.length === 0) {
      // there are no relevant panes, simply return default pane (which ironically is internalPane)
      return [panes.byName('internal')]
    }
    const filteredPanes = await UI.login.filterAvailablePanes(relevantPanes)
    if (filteredPanes.length === 0) {
      // if no relevant panes are available panes because of user role, we still allow for the most relevant pane to be viewed
      return [relevantPanes[0]]
    }
    const firstRelevantPaneIndex = panes.list.indexOf(relevantPanes[0])
    const firstFilteredPaneIndex = panes.list.indexOf(filteredPanes[0])
    // if the first relevant pane is loaded before the panes available wrt role, we still want to offer the most relevant pane
    return firstRelevantPaneIndex < firstFilteredPaneIndex
      ? [relevantPanes[0]].concat(filteredPanes)
      : filteredPanes
  }

  function getPane (relevantPanes, subject) {
    return (
      relevantPanes.find(
        pane => pane.shouldGetFocus && pane.shouldGetFocus(subject)
      ) || relevantPanes[0]
    )
  }

  async function expandedHeaderTR (subject, requiredPane, options) {
    async function renderPaneIconTray (td, options = {}) {
      const paneShownStyle =
        'width: 24px; border-radius: 0.5em; border-top: solid #222 1px; border-left: solid #222 0.1em; border-bottom: solid #eee 0.1em; border-right: solid #eee 0.1em; margin-left: 1em; padding: 3px; background-color:   #ffd;'
      const paneHiddenStyle =
        'width: 24px; border-radius: 0.5em; margin-left: 1em; padding: 3px'
      const paneIconTray = td.appendChild(dom.createElement('nav'))
      paneIconTray.style =
        'display:flex; justify-content: flex-start; align-items: center;'

      const relevantPanes = options.hideList
        ? []
        : await getRelevantPanes(subject, context)
      tr.firstPane = requiredPane || getPane(relevantPanes, subject)
      const paneNumber = relevantPanes.indexOf(tr.firstPane)

      if (relevantPanes.length !== 1) {
        // if only one, simplify interface
        relevantPanes.forEach((pane, index) => {
          const label = pane.label(subject, context)

          const iconSrc = typeof pane.icon === 'function' ? pane.icon(subject, context) : pane.icon
          const ico = UI.utils.AJARImage(iconSrc, label, label, dom)

          // Handle async icon functions
          if (iconSrc instanceof Promise) {
            iconSrc.then(resolvedIconSrc => {
              ico.setAttribute('src', resolvedIconSrc)
            }).catch(err => {
              console.error('Error resolving async icon:', err)
            })
          }

          ico.style = pane === tr.firstPane ? paneShownStyle : paneHiddenStyle // init to something at least
          // ico.setAttribute('align','right');   @@ Should be better, but ffox bug pushes them down
          // ico.style.width = iconHeight
          // ico.style.height = iconHeight
          const listen = function (ico, pane) {
            // Freeze scope for event time
            ico.addEventListener(
              'click',
              function (event) {
                let containingTable
                // Find the containing table for this subject
                for (containingTable = td; containingTable.parentNode; containingTable = containingTable.parentNode) {
                  if (containingTable.nodeName === 'TABLE') break
                }
                if (containingTable.nodeName !== 'TABLE') {
                  throw new Error('outline: internal error.')
                }
                const removePanes = function (specific) {
                  for (let d = containingTable.firstChild; d; d = d.nextSibling) {
                    if (typeof d.pane !== 'undefined') {
                      if (!specific || d.pane === specific) {
                        if (d.paneButton) {
                          d.paneButton.setAttribute('class', 'paneHidden')
                          d.paneButton.style = paneHiddenStyle
                        }
                        removeAndRefresh(d)
                        // If we just delete the node d, ffox doesn't refresh the display properly.
                        // state = 'paneHidden';
                        if (
                          d.pane.requireQueryButton &&
                          containingTable.parentNode.className /* outer table */ &&
                          numberOfPanesRequiringQueryButton === 1 &&
                          dom.getElementById('queryButton')
                        ) {
                          dom
                            .getElementById('queryButton')
                            .setAttribute('style', 'display:none;')
                        }
                      }
                    }
                  }
                }
                const renderPane = function (pane) {
                  let paneDiv
                  UI.log.info('outline: Rendering pane (2): ' + pane.name)

                  try {
                    paneDiv = pane.render(subject, context, options)
                  } catch (e) {
                    // Easier debugging for pane developers
                    paneDiv = dom.createElement('div')
                    paneDiv.setAttribute('class', 'exceptionPane')
                    const pre = dom.createElement('pre')
                    paneDiv.appendChild(pre)
                    pre.appendChild(
                      dom.createTextNode(UI.utils.stackString(e))
                    )
                  }

                  if (
                    pane.requireQueryButton &&
                    dom.getElementById('queryButton')
                  ) {
                    dom.getElementById('queryButton').removeAttribute('style')
                  }
                  const second = containingTable.firstChild.nextSibling
                  const row = dom.createElement('tr')
                  const cell = row.appendChild(dom.createElement('td'))
                  cell.appendChild(paneDiv)
                  if (second) containingTable.insertBefore(row, second)
                  else containingTable.appendChild(row)
                  row.pane = pane
                  row.paneButton = ico
                }
                const state = ico.getAttribute('class')
                if (state === 'paneHidden') {
                  if (!event.shiftKey) {
                    // shift means multiple select
                    removePanes()
                  }
                  renderPane(pane)
                  ico.setAttribute('class', 'paneShown')
                  ico.style = paneShownStyle
                } else {
                  removePanes(pane)
                  ico.setAttribute('class', 'paneHidden')
                  ico.style = paneHiddenStyle
                }

                let numberOfPanesRequiringQueryButton = 0
                for (let d = containingTable.firstChild; d; d = d.nextSibling) {
                  if (d.pane && d.pane.requireQueryButton) {
                    numberOfPanesRequiringQueryButton++
                  }
                }
              },
              false
            )
          } // listen

          listen(ico, pane)
          ico.setAttribute(
            'class',
            index !== paneNumber ? 'paneHidden' : 'paneShown'
          )
          if (index === paneNumber) tr.paneButton = ico
          paneIconTray.appendChild(ico)
        })
      }
      return paneIconTray
    } // renderPaneIconTray

    // Body of expandedHeaderTR
    const tr = dom.createElement('tr')
    if (options.hover) {
      // By default no hide till hover as community deems it confusing
      tr.setAttribute('class', 'hoverControl')
    }
    const td = tr.appendChild(dom.createElement('td'))
    td.setAttribute(
      'style',
      'margin: 0.2em; border: none; padding: 0; vertical-align: top;' +
        'display:flex; justify-content: space-between; flex-direction: row;'
    )
    td.setAttribute('notSelectable', 'true')
    td.setAttribute('about', subject.toNT())
    td.setAttribute('colspan', '2')

    // Stuff at the right about the subject
    const header = td.appendChild(dom.createElement('div'))
    header.style =
      'display:flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;'

    const showHeader = !!requiredPane

    if (!options.solo && !showHeader) {
      const icon = header.appendChild(
        UI.utils.AJARImage(
          UI.icons.originalIconBase + 'tbl-collapse.png',
          'collapse',
          undefined,
          dom
        )
      )
      icon.addEventListener('click', collapseMouseDownListener)

      const strong = header.appendChild(dom.createElement('h1'))
      strong.appendChild(dom.createTextNode(UI.utils.label(subject)))
      strong.style =
        'font-size: 150%; margin: 0 0.6em 0 0; padding: 0.1em 0.4em;'
      UI.widgets.makeDraggable(strong, subject)
    }

    header.appendChild(
      await renderPaneIconTray(td, {
        hideList: showHeader
      })
    )

    // set DOM methods
    tr.firstChild.tabulatorSelect = function () {
      setSelected(this, true)
    }
    tr.firstChild.tabulatorDeselect = function () {
      setSelected(this, false)
    }
    return tr
  } // expandedHeaderTR

  // / //////////////////////////////////////////////////////////////////////////

  /*  PANES
   **
   **     Panes are regions of the outline view in which a particular subject is
   ** displayed in a particular way.  They are like views but views are for query results.
   ** subject panes are currently stacked vertically.
   */

  // / ////////////////////  Specific panes are in panes/*.js
  //
  // The defaultPane is the first one registered for which the label method exists
  // Those registered first take priority as a default pane.
  // That is, those earlier in this file

  /**
   * Pane registration
   */

  // the second argument indicates whether the query button is required

  // / ///////////////////////////////////////////////////////////////////////////

  // Remove a node from the DOM so that Firefox refreshes the screen OK
  // Just deleting it cause whitespace to accumulate.
  function removeAndRefresh (d) {
    const table = d.parentNode
    const par = table.parentNode
    const placeholder = dom.createElement('table')
    placeholder.setAttribute('style', 'width: 100%;')
    par.replaceChild(placeholder, table)
    table.removeChild(d)
    par.replaceChild(table, placeholder) // Attempt to
  }

  const propertyTable = (this.propertyTable = function propertyTable (
    subject,
    table,
    pane,
    options
  ) {
    UI.log.debug('Property table for: ' + subject)
    subject = kb.canon(subject)
    // if (!pane) pane = panes.defaultPane;

    if (!table) {
      // Create a new property table
      table = dom.createElement('table')
      table.setAttribute('style', 'width: 100%;')
      expandedHeaderTR(subject, pane, options).then(tr1 => {
        table.appendChild(tr1)

        if (tr1.firstPane) {
          let paneDiv
          try {
            UI.log.info('outline: Rendering pane (1): ' + tr1.firstPane.name)
            paneDiv = tr1.firstPane.render(subject, context, options)
          } catch (e) {
            // Easier debugging for pane developers
            paneDiv = dom.createElement('div')
            paneDiv.setAttribute('class', 'exceptionPane')
            const pre = dom.createElement('pre')
            paneDiv.appendChild(pre)
            pre.appendChild(dom.createTextNode(UI.utils.stackString(e)))
          }

          const row = dom.createElement('tr')
          const cell = row.appendChild(dom.createElement('td'))
          cell.appendChild(paneDiv)
          if (
            tr1.firstPane.requireQueryButton &&
            dom.getElementById('queryButton')
          ) {
            dom.getElementById('queryButton').removeAttribute('style')
          }
          table.appendChild(row)
          row.pane = tr1.firstPane
          row.paneButton = tr1.paneButton
        }
      })

      return table
    } else {
      // New display of existing table, keeping expanded bits
      UI.log.info('Re-expand: ' + table)
      // do some other stuff here
      return table
    }
  }) /* propertyTable */

  function propertyTR (doc, st, inverse) {
    const tr = doc.createElement('TR')
    tr.AJAR_statement = st
    tr.AJAR_inverse = inverse
    // tr.AJAR_variable = null; // @@ ??  was just 'tr.AJAR_variable'
    tr.setAttribute('predTR', 'true')
    const predicateTD = thisOutline.outlinePredicateTD(st.predicate, tr, inverse)
    tr.appendChild(predicateTD) // @@ add 'internal' to predicateTD's class for style? mno
    return tr
  }
  this.propertyTR = propertyTR

  // / ////////// Property list
  function appendPropertyTRs (parent, plist, inverse, predicateFilter) {
    // UI.log.info('@appendPropertyTRs, 'this' is %s, dom is %s, '+ // Gives 'can't access dead object'
    //                   'thisOutline.document is %s', this, dom.location, thisOutline.document.location);
    // UI.log.info('@appendPropertyTRs, dom is now ' + this.document.location);
    // UI.log.info('@appendPropertyTRs, dom is now ' + thisOutline.document.location);
    UI.log.debug('Property list length = ' + plist.length)
    if (plist.length === 0) return ''
    let sel, j, k
    if (inverse) {
      sel = function (x) {
        return x.subject
      }
      plist = plist.sort(UI.utils.RDFComparePredicateSubject)
    } else {
      sel = function (x) {
        return x.object
      }
      plist = plist.sort(UI.utils.RDFComparePredicateObject)
    }

    const max = plist.length
    for (j = 0; j < max; j++) {
      // squishing together equivalent properties I think
      let s = plist[j]
      //      if (s.object == parentSubject) continue; // that we knew

      // Avoid predicates from other panes
      if (predicateFilter && !predicateFilter(s.predicate, inverse)) continue

      const tr = propertyTR(dom, s, inverse)
      parent.appendChild(tr)
      const predicateTD = tr.firstChild // we need to kludge the rowspan later

      let defaultpropview = views.defaults[s.predicate.uri]

      //   LANGUAGE PREFERENCES WAS AVAILABLE WITH FF EXTENSION - get from elsewhere?

      let dups = 0 // How many rows have the same predicate, -1?
      let langTagged = 0 // how many objects have language tags?
      let myLang = 0 // Is there one I like?

      for (
        k = 0;
        k + j < max && plist[j + k].predicate.sameTerm(s.predicate);
        k++
      ) {
        if (k > 0 && sel(plist[j + k]).sameTerm(sel(plist[j + k - 1]))) dups++
        if (sel(plist[j + k]).lang && outline.labeller.LanguagePreference) {
          langTagged += 1
          if (
            sel(plist[j + k]).lang.indexOf(
              outline.labeller.LanguagePreference
            ) >= 0
          ) {
            myLang++
          }
        }
      }

      /* Display only the one in the preferred language
          ONLY in the case (currently) when all the values are tagged.
          Then we treat them as alternatives. */

      if (myLang > 0 && langTagged === dups + 1) {
        for (let k = j; k <= j + dups; k++) {
          if (
            outline.labeller.LanguagePreference &&
            sel(plist[k]).lang.indexOf(outline.labeller.LanguagePreference) >= 0
          ) {
            tr.appendChild(
              thisOutline.outlineObjectTD(
                sel(plist[k]),
                defaultpropview,
                undefined,
                s
              )
            )
            break
          }
        }
        j += dups // extra push
        continue
      }

      tr.appendChild(
        thisOutline.outlineObjectTD(sel(s), defaultpropview, undefined, s)
      )

      /* Note: showNobj shows between n to 2n objects.
       * This is to prevent the case where you have a long list of objects
       * shown, and dangling at the end is '1 more' (which is easily ignored)
       * Therefore more objects are shown than hidden.
       */

      tr.showNobj = function (n) {
        const predDups = k - dups
        const show = 2 * n < predDups ? n : predDups
        const showLaterArray = []
        if (predDups !== 1) {
          predicateTD.setAttribute(
            'rowspan',
            show === predDups ? predDups : n + 1
          )
          let l
          if (show < predDups && show === 1) {
            // what case is this...
            predicateTD.setAttribute('rowspan', 2)
          }
          let displayed = 0 // The number of cells generated-1,
          // all duplicate thing removed
          for (l = 1; l < k; l++) {
            // This detects the same things
            if (
              !kb
                .canon(sel(plist[j + l]))
                .sameTerm(kb.canon(sel(plist[j + l - 1])))
            ) {
              displayed++
              s = plist[j + l]
              defaultpropview = views.defaults[s.predicate.uri]
              const trObj = dom.createElement('tr')
              trObj.style.colspan = '1'
              trObj.appendChild(
                thisOutline.outlineObjectTD(
                  sel(plist[j + l]),
                  defaultpropview,
                  undefined,
                  s
                )
              )
              trObj.AJAR_statement = s
              trObj.AJAR_inverse = inverse
              parent.appendChild(trObj)
              if (displayed >= show) {
                trObj.style.display = 'none'
                showLaterArray.push(trObj)
              }
            } else {
              // ToDo: show all the data sources of this statement
              UI.log.info('there are duplicates here: %s', plist[j + l - 1])
            }
          }
          // @@a quick fix on the messing problem.
          if (show === predDups) {
            predicateTD.setAttribute('rowspan', displayed + 1)
          }
        } // end of if (predDups!==1)

        if (show < predDups) {
          // Add the x more <TR> here
          const moreTR = dom.createElement('tr')
          const moreTD = moreTR.appendChild(dom.createElement('td'))
          moreTD.setAttribute(
            'style',
            'margin: 0.2em; border: none; padding: 0; vertical-align: top;'
          )
          moreTD.setAttribute('notSelectable', 'false')
          if (predDups > n) {
            // what is this for??
            const small = dom.createElement('a')
            moreTD.appendChild(small)

            const predToggle = (function (f) {
              return f(predicateTD, k, dups, n)
            })(function (predicateTD, k, dups, n) {
              return function (display) {
                small.innerHTML = ''
                if (display === 'none') {
                  small.appendChild(
                    UI.utils.AJARImage(
                      UI.icons.originalIconBase + 'tbl-more-trans.png',
                      'more',
                      'See all',
                      dom
                    )
                  )
                  small.appendChild(
                    dom.createTextNode(predDups - n + ' more...')
                  )
                  predicateTD.setAttribute('rowspan', n + 1)
                } else {
                  small.appendChild(
                    UI.utils.AJARImage(
                      UI.icons.originalIconBase + 'tbl-shrink.png',
                      '(less)',
                      undefined,
                      dom
                    )
                  )
                  predicateTD.setAttribute('rowspan', predDups + 1)
                }
                for (let i = 0; i < showLaterArray.length; i++) {
                  const trObj = showLaterArray[i]
                  trObj.style.display = display
                }
              }
            }) // ???
            let current = 'none'
            const toggleObj = function (event) {
              predToggle(current)
              current = current === 'none' ? '' : 'none'
              if (event) event.stopPropagation()
              return false // what is this for?
            }
            toggleObj()
            small.addEventListener('click', toggleObj, false)
          } // if(predDups>n)
          parent.appendChild(moreTR)
        } // if
      } // tr.showNobj

      tr.showAllobj = function () {
        tr.showNobj(k - dups)
      }

      tr.showNobj(10)

      j += k - 1 // extra push
    }
  } //  appendPropertyTRs

  this.appendPropertyTRs = appendPropertyTRs

  /*   termWidget
   **
   */
  const termWidget = {} // @@@@@@ global
  global.termWidget = termWidget
  termWidget.construct = function (dom) {
    dom = dom || document
    const td = dom.createElement('TD')
    td.setAttribute(
      'style',
      'margin: 0.2em; border: none; padding: 0; vertical-align: top;'
    )
    td.setAttribute('class', 'iconTD')
    td.setAttribute('notSelectable', 'true')
    td.style.width = '0px'
    return td
  }
  termWidget.addIcon = function (td, icon, listener) {
    const iconTD = td.childNodes[1]
    if (!iconTD) return
    let width = iconTD.style.width
    const img = UI.utils.AJARImage(icon.src, icon.alt, icon.tooltip, dom)
    width = parseInt(width)
    width = width + icon.width
    iconTD.style.width = width + 'px'
    iconTD.appendChild(img)
    if (listener) {
      img.addEventListener('click', listener)
    }
  }
  termWidget.removeIcon = function (td, icon) {
    const iconTD = td.childNodes[1]
    let baseURI
    if (!iconTD) return
    let width = iconTD.style.width
    width = parseInt(width)
    width = width - icon.width
    iconTD.style.width = width + 'px'
    for (let x = 0; x < iconTD.childNodes.length; x++) {
      const elt = iconTD.childNodes[x]
      const eltSrc = elt.src

      // ignore first '?' and everything after it //Kenny doesn't know what this is for
      try {
        baseURI = dom.location.href.split('?')[0]
      } catch (e) {
        console.log(e)
        baseURI = ''
      }
      const relativeIconSrc = $rdf.uri.join(icon.src, baseURI)
      if (eltSrc === relativeIconSrc) {
        iconTD.removeChild(elt)
      }
    }
  }
  termWidget.replaceIcon = function (td, oldIcon, newIcon, listener) {
    termWidget.removeIcon(td, oldIcon)
    termWidget.addIcon(td, newIcon, listener)
  }

  // / /////////////////////////////////////////////////// VALUE BROWSER VIEW

  // / /////////////////////////////////////////////////////// TABLE VIEW

  //  Summarize a thing as a table cell

  /**********************

    query global vars

  ***********************/

  // const doesn't work in Opera
  // const BLANK_QUERY = { pat: kb.formula(), vars: [], orderBy: [] };
  // @ pat: the query pattern in an RDFIndexedFormula. Statements are in pat.statements
  // @ vars: the free variables in the query
  // @ orderBy: the variables to order the table

  function QueryObj () {
    this.pat = kb.formula()
    this.vars = []
    // this.orderBy = []
  }

  const queries = []
  queries[0] = new QueryObj()
  /*
  function querySave () {
    queries.push(queries[0])
    var choices = dom.getElementById('queryChoices')
    var next = dom.createElement('option')
    var box = dom.createElement('input')
    var index = queries.length - 1
    box.setAttribute('type', 'checkBox')
    box.setAttribute('value', index)
    choices.appendChild(box)
    choices.appendChild(dom.createTextNode('Saved query #' + index))
    choices.appendChild(dom.createElement('br'))
    next.setAttribute('value', index)
    next.appendChild(dom.createTextNode('Saved query #' + index))
    dom.getElementById('queryJump').appendChild(next)
  }
*/
  /*
  function resetQuery () {
    function resetOutliner (pat) {
      var n = pat.statements.length
      var pattern, tr
      for (let i = 0; i < n; i++) {
        pattern = pat.statements[i]
        tr = pattern.tr
        // UI.log.debug('tr: ' + tr.AJAR_statement);
        if (typeof tr !== 'undefined') {
          delete tr.AJAR_pattern
          delete tr.AJAR_variable
        }
      }
      for (let x in pat.optional) { resetOutliner(pat.optional[x]) }
    }
    resetOutliner(myQuery.pat)
    UI.utils.clearVariableNames()
    queries[0] = myQuery = new QueryObj()
  }
*/
  function addButtonCallbacks (target, fireOn) {
    UI.log.debug('Button callbacks for ' + fireOn + ' added')
    const makeIconCallback = function (icon) {
      return function IconCallback (req) {
        if (req.indexOf('#') >= 0) {
          console.log(
            '@@ makeIconCallback: Not expecting # in URI whose state changed: ' +
              req
          )
          // alert('Should have no hash in '+req)
        }
        if (!target) {
          return false
        }
        if (!outline.ancestor(target, 'DIV')) return false
        // if (term.termType != 'symbol') { return true } // should always ve
        if (req === fireOn) {
          target.src = icon
          target.title = outlineIcons.tooltips[icon]
        }
        return true
      }
    }
    sf.addCallback('request', makeIconCallback(outlineIcons.src.icon_requested))
    sf.addCallback('done', makeIconCallback(outlineIcons.src.icon_fetched))
    sf.addCallback('fail', makeIconCallback(outlineIcons.src.icon_failed))
  }

  //   Selection support

  function selected (node) {
    const a = node.getAttribute('class')
    if (a && a.indexOf('selected') >= 0) return true
    return false
  }

  // These woulkd be simpler using closer variables below
  function optOnIconMouseDownListener (e) {
    // outlineIcons.src.icon_opton  needed?
    const target = thisOutline.targetOf(e)
    const p = target.parentNode
    termWidget.replaceIcon(
      p.parentNode,
      outlineIcons.termWidgets.optOn,
      outlineIcons.termWidgets.optOff,
      optOffIconMouseDownListener
    )
    p.parentNode.parentNode.removeAttribute('optional')
  }

  function optOffIconMouseDownListener (e) {
    // outlineIcons.src.icon_optoff needed?
    const target = thisOutline.targetOf(e)
    const p = target.parentNode
    termWidget.replaceIcon(
      p.parentNode,
      outlineIcons.termWidgets.optOff,
      outlineIcons.termWidgets.optOn,
      optOnIconMouseDownListener
    )
    p.parentNode.parentNode.setAttribute('optional', 'true')
  }

  function setSelectedParent (node, inc) {
    const onIcon = outlineIcons.termWidgets.optOn
    const offIcon = outlineIcons.termWidgets.optOff
    for (let n = node; n.parentNode; n = n.parentNode) {
      while (true) {
        if (n.getAttribute('predTR')) {
          let num = n.getAttribute('parentOfSelected')
          if (!num) num = 0
          else num = parseInt(num)
          if (num === 0 && inc > 0) {
            termWidget.addIcon(
              n.childNodes[0],
              n.getAttribute('optional') ? onIcon : offIcon,
              n.getAttribute('optional')
                ? optOnIconMouseDownListener
                : optOffIconMouseDownListener
            )
          }
          num = num + inc
          n.setAttribute('parentOfSelected', num)
          if (num === 0) {
            n.removeAttribute('parentOfSelected')
            termWidget.removeIcon(
              n.childNodes[0],
              n.getAttribute('optional') ? onIcon : offIcon
            )
          }
          break
        } else if (n.previousSibling && n.previousSibling.nodeName === 'TR') {
          n = n.previousSibling
        } else break
      }
    }
  }

  this.statusBarClick = function (event) {
    const target = UI.utils.getTarget(event)
    if (target.label) {
      window.content.location = target.label
      // The following alternative does not work in the extension.
      // var s = store.sym(target.label);
      // outline.GotoSubject(s, true);
    }
  }

  this.showURI = function showURI (about) {
    if (about && dom.getElementById('UserURI')) {
      dom.getElementById('UserURI').value =
        about.termType === 'NamedNode' ? about.uri : '' // blank if no URI
    }
  }

  this.showSource = function showSource () {
    if (typeof sourceWidget === 'undefined') return
    // deselect all before going on, this is necessary because you would switch tab,
    // close tab or so on...
    for (const uri in sourceWidget.sources) {
      sourceWidget.sources[uri].setAttribute('class', '')
    } // .class doesn't work. Be careful!
    for (let i = 0; i < selection.length; i++) {
      if (!selection[i].parentNode) {
        console.log('showSource: EH? no parentNode? ' + selection[i] + '\n')
        continue
      }
      const st = selection[i].parentNode.AJAR_statement
      if (!st) continue // for root TD
      const source = st.why
      if (source && source.uri) {
        sourceWidget.highlight(source, true)
      }
    }
  }

  this.getSelection = function getSelection () {
    return selection
  }

  function setSelected (node, newValue) {
    // UI.log.info('selection has ' +selection.map(function(item){return item.textContent;}).join(', '));
    // UI.log.debug('@outline setSelected, intended to '+(newValue?'select ':'deselect ')+node+node.textContent);
    // if (newValue === selected(node)) return; //we might not need this anymore...
    if (node.nodeName !== 'TD') {
      UI.log.debug('down' + node.nodeName)
      throw new Error(
        'Expected TD in setSelected: ' +
          node.nodeName +
          ' : ' +
          node.textContent
      )
    }
    UI.log.debug('pass')
    let cla = node.getAttribute('class')
    if (!cla) cla = ''
    if (newValue) {
      cla += ' selected'
      if (cla.indexOf('pred') >= 0 || cla.indexOf('obj') >= 0) {
        setSelectedParent(node, 1)
      }
      selection.push(node)
      // UI.log.info('Selecting '+node.textContent)

      const about = UI.utils.getTerm(node) // show uri for a newly selectedTd
      thisOutline.showURI(about)

      let st = node.AJAR_statement // show blue cross when the why of that triple is editable
      if (typeof st === 'undefined' && node.parentNode) st = node.parentNode.AJAR_statement
      // if (typeof st === 'undefined') return; // @@ Kludge?  Click in the middle of nowhere
      if (st) {
        // don't do these for headers or base nodes
        const source = st.why
        // var target = st.why
        const editable = store.updater.editable(source.uri, kb)
        if (!editable) {
          // let target = node.parentNode.AJAR_inverse ? st.object : st.subject
        } // left hand side
        // think about this later. Because we update to the why for now.
        // alert('Target='+target+', editable='+editable+'\nselected statement:' + st)
        if (editable && cla.indexOf('pred') >= 0) {
          termWidget.addIcon(node, outlineIcons.termWidgets.addTri)
        } // Add blue plus
      }
    } else {
      UI.log.debug('cla=$' + cla + '$')
      if (cla === 'selected') cla = '' // for header <TD>
      cla = cla.replace(' selected', '')
      if (cla.indexOf('pred') >= 0 || cla.indexOf('obj') >= 0) {
        setSelectedParent(node, -1)
      }
      if (cla.indexOf('pred') >= 0) {
        termWidget.removeIcon(node, outlineIcons.termWidgets.addTri)
      }

      selection = selection.filter(function (x) {
        return x === node
      })

      UI.log.info('Deselecting ' + node.textContent)
    }
    if (typeof sourceWidget !== 'undefined') thisOutline.showSource() // Update the data sources display
    // UI.log.info('selection becomes [' +selection.map(function(item){return item.textContent;}).join(', ')+']');
    // UI.log.info('Setting className ' + cla);
    node.setAttribute('class', cla)
  }

  function deselectAll () {
    const n = selection.length
    for (let i = n - 1; i >= 0; i--) setSelected(selection[i], false)
    selection = []
  }

  /** Get the target of an event **/
  this.targetOf = function (e) {
    let target
    if (!e) e = window.event
    if (e.target) {
      target = e.target
    } else if (e.srcElement) {
      target = e.srcElement
    } else {
      UI.log.error('can\'t get target for event ' + e)
      return false
    } // fail
    if (target.nodeType === 3) {
      // defeat Safari bug [sic]
      target = target.parentNode
    }
    return target
  } // targetOf

  this.walk = function walk (directionCode, inputTd) {
    const selectedTd = inputTd || selection[0]
    let newSelTd
    switch (directionCode) {
      case 'down':
        try {
          newSelTd = selectedTd.parentNode.nextSibling.lastChild
        } catch (e) {
          this.walk('up')
          return
        } // end
        deselectAll()
        setSelected(newSelTd, true)
        break
      case 'up':
        try {
          newSelTd = selectedTd.parentNode.previousSibling.lastChild
        } catch (e) {
          return
        } // top
        deselectAll()
        setSelected(newSelTd, true)
        break
      case 'right':
        deselectAll()
        if (
          selectedTd.nextSibling ||
          selectedTd.lastChild.tagName === 'strong'
        ) {
          setSelected(selectedTd.nextSibling, true)
        } else {
          const newSelected = dom.evaluate(
            'table/div/tr/td[2]',
            selectedTd,
            null,
            XPathResult.FIRST_ORDERED_NODE_TYPE,
            null
          ).singleNodeValue
          setSelected(newSelected, true)
        }
        break
      case 'left':
        deselectAll()
        if (
          selectedTd.previousSibling &&
          selectedTd.previousSibling.className === 'undetermined'
        ) {
          setSelected(selectedTd.previousSibling, true)
          return true // do not shrink signal
        } else {
          setSelected(UI.utils.ancestor(selectedTd.parentNode, 'TD'), true)
        } // supplied by thieOutline.focusTd
        break
      case 'moveTo':
        // UI.log.info(selection[0].textContent+'->'+inputTd.textContent);
        deselectAll()
        setSelected(inputTd, true)
        break
    }
    if (directionCode === 'down' || directionCode === 'up') {
      if (!newSelTd.tabulatorSelect) this.walk(directionCode)
    }
    // return newSelTd;
  }

  // Keyboard Input: we can consider this as...
  // 1. a fast way to modify data - enter will go to next predicate
  // 2. an alternative way to input - enter at the end of a predicate will create a new statement
  this.OutlinerKeypressPanel = function OutlinerKeypressPanel (e) {
    UI.log.info('Key ' + e.keyCode + ' pressed')

    function showURI (about) {
      if (about && dom.getElementById('UserURI')) {
        dom.getElementById('UserURI').value =
          about.termType === 'NamedNode' ? about.uri : '' // blank if no URI
      }
    }

    function setSelectedAfterward (_uri) {
      if (arguments[3]) return true
      walk('right', selectedTd)
      showURI(UI.utils.getAbout(kb, selection[0]))
      return true
    }
    let target, editable

    if (UI.utils.getTarget(e).tagName === 'TEXTAREA') return
    if (UI.utils.getTarget(e).id === 'UserURI') return
    if (selection.length > 1) return
    if (selection.length === 0) {
      if (
        e.keyCode === 13 ||
        e.keyCode === 38 ||
        e.keyCode === 40 ||
        e.keyCode === 37 ||
        e.keyCode === 39
      ) {
        this.walk('right', thisOutline.focusTd)
        showURI(UI.utils.getAbout(kb, selection[0]))
      }
      return
    }
    const selectedTd = selection[0]
    // if not done, Have to deal with redraw...
    sf.removeCallback('done', 'setSelectedAfterward')
    sf.removeCallback('fail', 'setSelectedAfterward')

    switch (e.keyCode) {
      case 13: // enter
        if (UI.utils.getTarget(e).tagName === 'HTML') {
          // I don't know why 'HTML'
          const object = UI.utils.getAbout(kb, selectedTd)
          target = selectedTd.parentNode.AJAR_statement.why
          editable = store.updater.editable(target.uri, kb)
          if (object) {
            // <Feature about='enterToExpand'>
            outline.GotoSubject(object, true)
            /* //deal with this later
            deselectAll();
            var newTr=dom.getElementById('outline').lastChild;
            setSelected(newTr.firstChild.firstChild.childNodes[1].lastChild,true);
            function setSelectedAfterward(uri){
                deselectAll();
                setSelected(newTr.firstChild.firstChild.childNodes[1].lastChild,true);
                showURI(getAbout(kb,selection[0]));
                return true;
            }
            sf.insertCallback('done',setSelectedAfterward);
            sf.insertCallback('fail',setSelectedAfterward);
            */
            // </Feature>
          } else if (editable) {
            // this is a text node and editable
            thisOutline.UserInput.Enter(selectedTd)
          }
        } else {
          // var newSelTd=thisOutline.UserInput.lastModified.parentNode.parentNode.nextSibling.lastChild;
          this.UserInput.Keypress(e)
          this.walk('down') // bug with input at the end
          // dom.getElementById('docHTML').focus(); //have to set this or focus blurs
          e.stopPropagation()
        }
        return
      case 38: // up
        // thisOutline.UserInput.clearInputAndSave();
        // ^^^ does not work because up and down not captured...
        this.walk('up')
        e.stopPropagation()
        e.preventDefault()
        break
      case 40: // down
        // thisOutline.UserInput.clearInputAndSave();
        this.walk('down')
        e.stopPropagation()
        e.preventDefault()
    } // switch

    if (UI.utils.getTarget(e).tagName === 'INPUT') return

    let walk
    switch (e.keyCode) {
      case 46: // delete
      case 8: // backspace
        target = selectedTd.parentNode.AJAR_statement.why
        editable = store.updater.editable(target.uri, kb)
        if (editable) {
          e.preventDefault() // prevent from going back
          this.UserInput.Delete(selectedTd)
        }
        break
      case 37: { // left
        if (this.walk('left')) return
        const titleTd = UI.utils.ancestor(selectedTd.parentNode, 'TD')
        outlineCollapse(selectedTd, UI.utils.getAbout(kb, titleTd))
        break
      }
      case 39: // right
        // @@ TODO: Write away the need for exception on next line
        {
          const obj = UI.utils.getAbout(kb, selectedTd)
          if (obj) {
            walk = this.walk
            if (selectedTd.nextSibling) {
              // when selectedTd is a predicate
              this.walk('right')
              return
            }
            if (selectedTd.firstChild.tagName !== 'TABLE') {
              // not expanded
              sf.addCallback('done', setSelectedAfterward)
              sf.addCallback('fail', setSelectedAfterward)
              outlineExpand(selectedTd, obj, {
                pane: paneRegistry.byName('defaultPane')
              })
            }
            setSelectedAfterward()
          }
        }
        break
      case 38: // up
      case 40: // down
        break
      default:
        switch (e.charCode) {
          case 99: // c for Copy
            if (e.ctrlKey) {
              thisOutline.UserInput.copyToClipboard(
                thisOutline.clipboardAddress,
                selectedTd
              )
              break
            }
            break
          case 118: // v
          case 112: // p for Paste
            if (e.ctrlKey) {
              thisOutline.UserInput.pasteFromClipboard(
                thisOutline.clipboardAddress,
                selectedTd
              )
              // dom.getElementById('docHTML').focus(); //have to set this or focus blurs
              // window.focus();
              // e.stopPropagation();
              break
            }
            break
          default:
            if (UI.utils.getTarget(e).tagName === 'HTML') {
              /*
              //<Feature about='typeOnSelectedToInput'>
              thisOutline.UserInput.Click(e,selectedTd);
              thisOutline.UserInput.lastModified.value=String.fromCharCode(e.charCode);
              if (selectedTd.className==='undetermined selected') thisOutline.UserInput.AutoComplete(e.charCode)
              //</Feature>
              */
              // Events are not reliable...
              // var e2=document.createEvent('KeyboardEvent');
              // e2.initKeyEvent('keypress',true,true,null,false,false,false,false,e.keyCode,0);
              // UserInput.lastModified.dispatchEvent(e2);
            }
        }
    } // end of switch

    showURI(UI.utils.getAbout(kb, selection[0]))
    // alert(window);alert(doc);
    /*
    var wm = Components.classes['@mozilla.org/appshell/window-mediator;1']
               .getService(Components.interfaces.nsIWindowMediator);
    var gBrowser = wm.getMostRecentWindow('navigator:browser') */
    // gBrowser.addTab('http://www.w3.org/');
    // alert(gBrowser.addTab);alert(gBrowser.scroll);alert(gBrowser.scrollBy)
    // gBrowser.scrollBy(0,100);

    // var thisHtml=selection[0].owner
    if (selection[0]) {
      const PosY = UI.utils.findPos(selection[0])[1]
      if (
        PosY + selection[0].clientHeight >
        window.scrollY + window.innerHeight
      ) {
        UI.utils.getEyeFocus(selection[0], true, true, window)
      }
      if (PosY < window.scrollY + 54) {
        UI.utils.getEyeFocus(selection[0], true, undefined, window)
      }
    }
  }
  this.OutlinerMouseclickPanel = function (e) {
    switch (thisOutline.UserInput._tabulatorMode) {
      case 0:
        TabulatorMousedown(e)
        break
      case 1:
        thisOutline.UserInput.Click(e)
        break
      default:
    }
  }

  /** things to do onmousedown in outline view **/
  /*
   **   To Do:  This big event handler needs to be replaced by lots
   ** of little ones individually connected to each icon.  This horrible
   ** switch below isn't modular. (Sorry!) - Tim
   */
  // expand
  // collapse
  // refocus
  // select
  // visit/open a page

  function expandMouseDownListener (e) {
    // For icon (UI.icons.originalIconBase + 'tbl-expand-trans.png')
    const target = thisOutline.targetOf(e)
    const p = target.parentNode
    const subject = UI.utils.getAbout(kb, target)
    const pane = e.altKey ? paneRegistry.byName('internal') : undefined // set later: was panes.defaultPane

    if (e.shiftKey) {
      // Shift forces a refocus - bring this to the top
      outlineRefocus(p, subject, pane)
    } else {
      if (e.altKey) {
        // To investigate screw ups, dont wait show internals
        outlineExpand(p, subject, {
          pane: paneRegistry.byName('internal'),
          immediate: true
        })
      } else {
        outlineExpand(p, subject)
      }
    }
  }

  function collapseMouseDownListener (e) {
    // for icon UI.icons.originalIconBase + 'tbl-collapse.png'
    const target = thisOutline.targetOf(e)
    const subject = UI.utils.getAbout(kb, target)
    const pane = e.altKey ? paneRegistry.byName('internal') : undefined
    const p = target.parentNode.parentNode
    outlineCollapse(p, subject, pane)
  }

  function failedIconMouseDownListener (e) {
    // outlineIcons.src.icon_failed
    const target = thisOutline.targetOf(e)
    const uri = target.getAttribute('uri') // Put on access buttons
    if (e.altKey) {
      sf.fetch($rdf.uri.docpart(uri), {
        force: true
      }) // Add 'force' bit?
    } else {
      sf.refresh(kb.sym($rdf.uri.docpart(uri))) // just one
    }
  }

  function fetchedIconMouseDownListener (e) {
    // outlineIcons.src.icon_fetched
    const target = thisOutline.targetOf(e)
    const uri = target.getAttribute('uri') // Put on access buttons
    if (e.altKey) {
      sf.fetch($rdf.uri.docpart(uri), {
        force: true
      })
    } else {
      sf.refresh(kb.sym($rdf.uri.docpart(uri))) // just one
    }
  }

  function unrequestedIconMouseDownListener (e) {
    const target = thisOutline.targetOf(e)
    const uri = target.getAttribute('uri') // Put on access buttons
    sf.fetch($rdf.uri.docpart(uri))
  }

  function removeNodeIconMouseDownListener (e) {
    // icon_remove_node
    const target = thisOutline.targetOf(e)
    let node = target.node
    if (node.childNodes.length > 1) node = target.parentNode // parallel outline view @@ Hack
    removeAndRefresh(node) // @@ update icons for pane?
  }

  function selectableTDClickListener (e) {
    // Is we are in editing mode already
    if (thisOutline.UserInput._tabulatorMode) {
      return thisOutline.UserInput.Click(e)
    }

    const target = thisOutline.targetOf(e)
    // Originally this was set on the whole tree and could happen anywhere
    // var p = target.parentNode
    let node
    for (
      node = UI.utils.ancestor(target, 'TD');
      node && !(node.getAttribute('notSelectable') === 'false'); // Default now is not selectable
      node = UI.utils.ancestor(node.parentNode, 'TD')
    ) {
      // ...
    }
    if (!node) return

    // var node = target;

    const sel = selected(node)
    // var cla = node.getAttribute('class')
    UI.log.debug('Was node selected before: ' + sel)
    if (e.altKey) {
      setSelected(node, !selected(node))
    } else if (e.shiftKey) {
      setSelected(node, true)
    } else {
      // setSelected(node, !selected(node))
      deselectAll()
      thisOutline.UserInput.clearInputAndSave(e)
      setSelected(node, true)

      if (e.detail === 2) {
        // double click -> quit TabulatorMousedown()
        e.stopPropagation()
        return
      }
      // if the node is already selected and the corresponding statement is editable,
      // go to UserInput
      let st
      if (node.parentNode) st = node.parentNode.AJAR_statement
      if (!st) return // For example in the title TD of an expanded pane
      const target = st.why
      const editable = store.updater.editable(target.uri, kb)
      if (sel && editable) thisOutline.UserInput.Click(e, selection[0]) // was next 2 lines
      // var text='TabulatorMouseDown@Outline()';
      // HCIoptions['able to edit in Discovery Mode by mouse'].setupHere([sel,e,thisOutline,selection[0]],text);
    }
    UI.log.debug(
      'Was node selected after: ' +
        selected(node) +
        ', count=' +
        selection.length
    )
    // var tr = node.parentNode
    /*
    if (tr.AJAR_statement) {
      // var why = tr.AJAR_statement.why
        // UI.log.info('Information from '+why);
    }
    */
    e.stopPropagation()
    // this is important or conflict between deselect and user input happens
  }

  function TabulatorMousedown (e) {
    UI.log.info('@TabulatorMousedown, dom.location is now ' + dom.location)
    const target = thisOutline.targetOf(e)
    if (!target) return
    const tname = target.tagName
    // UI.log.debug('TabulatorMousedown: ' + tname + ' shift='+e.shiftKey+' alt='+e.altKey+' ctrl='+e.ctrlKey);
    // var p = target.parentNode
    // var about = UI.utils.getAbout(kb, target)
    // var source = null
    if (tname === 'INPUT' || tname === 'TEXTAREA') {
      return
    }

    // not input then clear
    thisOutline.UserInput.clearMenu()

    // ToDo:remove this and recover X
    if (
      thisOutline.UserInput.lastModified &&
      thisOutline.UserInput.lastModified.parentNode.nextSibling
    ) {
      thisOutline.UserInput.backOut()
    }

    // if (typeof rav=='undefined') //uncomment this for javascript2rdf
    // have to put this here or this conflicts with deselectAll()

    if (
      !target.src ||
      (target.src.slice(target.src.indexOf('/icons/') + 1) !==
        outlineIcons.src.icon_show_choices &&
        target.src.slice(target.src.indexOf('/icons/') + 1) !==
          outlineIcons.src.icon_add_triple)
    ) {
      thisOutline.UserInput.clearInputAndSave(e)
    }

    if (
      !target.src ||
      target.src.slice(target.src.indexOf('/icons/') + 1) !==
        outlineIcons.src.icon_show_choices
    ) {
      thisOutline.UserInput.clearMenu()
    }

    if (e) e.stopPropagation()
  } // function TabulatorMousedown

  function setUrlBarAndTitle (subject) {
    dom.title = UI.utils.label(subject)
    if (dom.location.href.startsWith(subject.site().uri)) {
      // dom.location = subject.uri  // No causes reload
    }
  }

  /** Expand an outline view
   * @param p {Element} - container
   */
  function outlineExpand (p, subject1, options) {
    options = options || {}
    const pane = options.pane
    let already = !!options.already
    const immediate = options.immediate

    UI.log.info('@outlineExpand, dom is now ' + dom.location)
    // remove callback to prevent unexpected repaint
    sf.removeCallback('done', 'expand')
    sf.removeCallback('fail', 'expand')

    let subject = kb.canon(subject1)
    // var requTerm = subject.uri ? kb.sym($rdf.uri.docpart(subject.uri)) : subject

    function render () {
      subject = kb.canon(subject)
      if (!p || !p.parentNode || !p.parentNode.parentNode) return false

      let newTable
      UI.log.info('@@ REPAINTING ')
      if (!already) {
        // first expand
        newTable = propertyTable(subject, undefined, pane, options)
      } else {
        UI.log.info(' ... p is  ' + p)
        for (
          newTable = p.firstChild;
          newTable.nextSibling;
          newTable = newTable.nextSibling
        ) {
          UI.log.info(' ... checking node ' + newTable)
          if (newTable.nodeName === 'table') break
        }
        newTable = propertyTable(subject, newTable, pane, options)
      }
      already = true
      if (
        UI.utils.ancestor(p, 'TABLE') &&
        UI.utils.ancestor(p, 'TABLE').style.backgroundColor === 'white'
      ) {
        newTable.style.backgroundColor = '#eee'
      } else {
        newTable.style.backgroundColor = 'white'
      }
      UI.utils.emptyNode(p).appendChild(newTable)
      thisOutline.focusTd = p // I don't know why I couldn't use 'this'...because not defined in callbacks
      UI.log.debug('expand: Node for ' + subject + ' expanded')
      // fetch seeAlso when render()
      // var seeAlsoStats = sf.store.statementsMatching(subject, UI.ns.rdfs('seeAlso'))
      // seeAlsoStats.map(function (x) {sf.lookUpThing(x.object, subject,false);})
      const seeAlsoWhat = kb.each(subject, UI.ns.rdfs('seeAlso'))
      for (let i = 0; i < seeAlsoWhat.length; i++) {
        if (i === 25) {
          UI.log.warn(
            'expand: Warning: many (' +
              seeAlsoWhat.length +
              ') seeAlso links for ' +
              subject
          )
          // break; Not sure what limits the AJAX system has here
        }
        sf.lookUpThing(seeAlsoWhat[i], subject)
      }
    }

    function expand (uri) {
      if (arguments[3]) return true // already fetched indicator
      const cursubj = kb.canon(subject) // canonical identifier may have changed
      UI.log.info(
        '@@ expand: relevant subject=' +
          cursubj +
          ', uri=' +
          uri +
          ', already=' +
          already
      )
      // var term = kb.sym(uri)
      const docTerm = kb.sym($rdf.uri.docpart(uri))
      if (uri.indexOf('#') >= 0) {
        throw new Error('Internal error: hash in ' + uri)
      }

      const relevant = function () {
        // Is the loading of this URI relevam to the display of subject?
        if (!cursubj.uri) return true // bnode should expand()
        const as = kb.uris(cursubj)
        if (!as) return false
        for (let i = 0; i < as.length; i++) {
          // canon'l uri or any alias
          for (
            let rd = $rdf.uri.docpart(as[i]);
            rd;
            rd = kb.HTTPRedirects[rd]
          ) {
            if (uri === rd) return true
          }
        }
        if (kb.anyStatementMatching(cursubj, undefined, undefined, docTerm)) {
          return true
        } // Kenny: inverse?
        return false
      }
      if (relevant()) {
        UI.log.success(
          '@@ expand OK: relevant subject=' +
            cursubj +
            ', uri=' +
            uri +
            ', source=' +
            already
        )

        render()
        return false //  @@@@@@@@@@@ Will this allow just the first
      }
      return true
    }
    // Body of outlineExpand

    if (options.solo) {
      setUrlBarAndTitle(subject)
    }
    UI.log.debug('outlineExpand: dereferencing ' + subject)
    const status = dom.createElement('span')
    p.appendChild(status)
    sf.addCallback('done', expand) // @@@@@@@ This can really mess up existing work
    sf.addCallback('fail', expand) // Need to do if there s one a gentle resync of page with store

    const returnConditions = [] // this is quite a general way to do cut and paste programming
    // I might make a class for this
    if (subject.uri && subject.uri.split(':')[0] === 'rdf') {
      // what is this? -tim
      render()
      return
    }

    for (let i = 0; i < returnConditions.length; i++) {
      let returnCode
      if (returnCode === returnConditions[i](subject)) {
        render()
        UI.log.debug('outline 1815')
        if (returnCode[1]) outlineElement.removeChild(outlineElement.lastChild)
        return
      }
    }
    if (
      subject.uri &&
      !immediate &&
      !UI.widgets.isAudio(subject) &&
      !UI.widgets.isVideo(subject)
    ) {
      const docUri = (subject.doc() && subject.doc().uri) ? subject.doc().uri : '' + subject.doc()
      const appendOutlineError = function (detail, errObj) {
        if (p.querySelector && docUri) {
          const existing = p.querySelector('[data-outline-error-for="' + docUri + '"]')
          if (existing) return
        }
        const detailStr = typeof detail === 'string' ? detail : (detail && detail.message) || ''
        const errorStatus = (errObj && errObj.status) || (detailStr.match(/status:\s*(\d+)/) || [])[1]
        const statusCode = Number(errorStatus)
        const isAuthError =
          (Number.isFinite(statusCode) && [401, 403].includes(statusCode)) ||
          /Unauthorized|Forbidden/.test(detailStr)
        const message = UI.widgets.errorMessageBlock(
          dom,
          isAuthError ? 'You need to log in to see this resource.' : detail,
          isAuthError ? '#d8d8d8' : '#fee',
          !isAuthError && errObj instanceof Error ? errObj : undefined
        )
        if (docUri) message.setAttribute('data-outline-error-for', docUri)
        p.appendChild(message)
      }
      // Wait till at least the main URI is loaded before expanding:
      let errorReported = false
      const fetchPromise = sf.nowOrWhenFetched(subject.doc(), undefined, function (ok, body) {
        if (ok) {
          sf.lookUpThing(subject)
          render() // inital open, or else full if re-open
          if (options.solo) {
            // Update window title with new information
            // dom.title = UI.utils.label(subject)
            setUrlBarAndTitle(subject)
          }
        } else {
          errorReported = true
          appendOutlineError(body, undefined)
        }
      })
      if (fetchPromise && typeof fetchPromise.catch === 'function') {
        fetchPromise.catch(function (err) {
          if (errorReported) return
          errorReported = true
          appendOutlineError(err, err)
        })
      }
    } else {
      render()
    }
  } // outlineExpand

  function outlineCollapse (p, subject) {
    let row = UI.utils.ancestor(p, 'TR')
    row = UI.utils.ancestor(row.parentNode, 'TR') // two levels up
    let statement
    if (row) statement = row.AJAR_statement
    let level // find level (the enclosing TD)
    for (
      level = p.parentNode;
      level.tagName !== 'TD';
      level = level.parentNode
    ) {
      if (typeof level === 'undefined') {
        alert('Not enclosed in TD!')
        return
      }
    }

    UI.log.debug('Collapsing subject ' + subject)
    let myview
    if (statement) {
      UI.log.debug('looking up pred ' + statement.predicate.uri + 'in defaults')
      myview = views.defaults[statement.predicate.uri]
    }
    UI.log.debug('view= ' + myview)
    let deleteNode
    if (level.parentNode.parentNode.id === 'outline') {
      deleteNode = level.parentNode
    }
    thisOutline.replaceTD(
      thisOutline.outlineObjectTD(subject, myview, deleteNode, statement),
      level
    )
  } // outlineCollapse

  this.replaceTD = function replaceTD (newTd, replacedTd) {
    let reselect
    if (selected(replacedTd)) reselect = true

    // deselects everything being collapsed. This goes backwards because
    // deselecting an element decreases selection.length
    for (let x = selection.length - 1; x > -1; x--) {
      for (let elt = selection[x]; elt.parentNode; elt = elt.parentNode) {
        if (elt === replacedTd) {
          setSelected(selection[x], false)
        }
      }
    }

    replacedTd.parentNode.replaceChild(newTd, replacedTd)
    if (reselect) setSelected(newTd, true)
  }

  function outlineRefocus (p, subject) {
    // Shift-expand or shift-collapse: Maximize
    let outer = null
    for (let level = p.parentNode; level; level = level.parentNode) {
      UI.log.debug('level ' + level.tagName)
      if (level.tagName === 'TD') outer = level
    } // find outermost td
    UI.utils.emptyNode(outer).appendChild(propertyTable(subject))
    setUrlBarAndTitle(subject)
    // dom.title = UI.utils.label(subject)
    outer.setAttribute('about', subject.toNT())
  } // outlineRefocus

  outline.outlineRefocus = outlineRefocus

  // Inversion is turning the outline view inside-out
  // It may be called eversion
  /*
  function outlineInversion (p, subject) { // re-root at subject
    function move_root (rootTR, childTR) { // swap root with child
      // @@
    }
  }
*/
  this.GotoFormURI_enterKey = function (e) {
    if (e.keyCode === 13) outline.GotoFormURI(e)
  }
  this.GotoFormURI = function (_e) {
    GotoURI(dom.getElementById('UserURI').value)
  }

  function GotoURI (uri) {
    const subject = kb.sym(uri)
    this.GotoSubject(subject, true)
  }
  this.GotoURIinit = function (uri) {
    const subject = kb.sym(uri)
    this.GotoSubject(subject)
  }

  /** Display the subject in an outline view

  @param subject -- RDF term for teh thing to be presented
  @param expand  -- flag -- open the subject rather than keep folded closed
  @param pane    -- optional -- pane to be used for expanded display
  @param solo    -- optional -- the window will be cleared out and only the subject displayed
  @param referer -- optional -- where did we hear about this from anyway?
  @param table   -- option  -- a table element in which to put the outline.
*/
  this.GotoSubject = function (subject, expand, pane, solo, referrer, table) {
    table = table || dom.getElementById('outline') // if does not exist just add one? nowhere to out it
    if (solo) {
      UI.utils.emptyNode(table)
      table.style.width = '100%'
    }

    function GotoSubjectDefault () {
      const tr = dom.createElement('TR')
      tr.style.verticalAlign = 'top'
      table.appendChild(tr)
      const td = thisOutline.outlineObjectTD(subject, undefined, tr)
      tr.appendChild(td)
      return td
    }

    const td = GotoSubjectDefault()

    if (solo) setUrlBarAndTitle(subject) // dom.title = UI.utils.label(subject) // 'Tabulator: '+  No need to advertize

    if (expand) {
      outlineExpand(td, subject, {
        pane,
        solo
      })
      const tr = td.parentNode
      UI.utils.getEyeFocus(tr, false, undefined, window) // instantly: false
    }

    if (
      solo &&
      dom &&
      dom.defaultView &&
      dom.defaultView.history &&
      // Don't add the new location to the history if we arrived here through a direct link
      // (i.e. when static/databrowser.html in node-solid-server called this method):
      document.location.href !== subject.uri
    ) {
      const stateObj = pane ? { paneName: pane.name } : {}
      try {
        // can fail if different origin
        dom.defaultView.history.pushState(stateObj, subject.uri, subject.uri)
      } catch (e) {
        console.log(e)
      }
    }

    return subject
  }

  // / /////////////////////////////////////////////////////
  //
  //
  //                    VIEWS
  //
  //
  // / /////////////////////////////////////////////////////

  const ns = UI.ns

  const views = propertyViews(dom)

  // var thisOutline = this   dup
  /** some builtin simple views **/

  function viewAsBoringDefault (obj) {
    // UI.log.debug('entered viewAsBoringDefault...');
    let rep // representation in html

    if (obj.termType === 'Literal') {
      const styles = {
        integer: 'text-align: right;',
        decimal: 'text-align: \'.\';',
        double: 'text-align: \'.\';'
      }
      rep = dom.createElement('span')
      rep.textContent = obj.value
      // Newlines have effect and overlong lines wrapped automatically
      let style = ''
      if (obj.datatype && obj.datatype.uri) {
        const xsd = UI.ns.xsd('').uri
        if (obj.datatype.uri.slice(0, xsd.length) === xsd) {
          style = styles[obj.datatype.uri.slice(xsd.length)]
        }
      }
      rep.setAttribute('style', style || 'white-space: pre-wrap;')
    } else if (obj.termType === 'NamedNode' || obj.termType === 'BlankNode') {
      rep = dom.createElement('span')
      rep.setAttribute('about', obj.toNT())
      thisOutline.appendAccessIcons(kb, rep, obj)

      if (obj.termType === 'NamedNode') {
        if (obj.uri.slice(0, 4) === 'tel:') {
          const num = obj.uri.slice(4)
          const anchor = dom.createElement('a')
          rep.appendChild(dom.createTextNode(num))
          anchor.setAttribute('href', obj.uri)
          anchor.appendChild(
            UI.utils.AJARImage(
              outlineIcons.src.icon_telephone,
              'phone',
              'phone ' + num,
              dom
            )
          )
          rep.appendChild(anchor)
          anchor.firstChild.setAttribute('class', 'phoneIcon')
        } else {
          // not tel:
          rep.appendChild(dom.createTextNode(UI.utils.label(obj)))
          const anchor = UI.widgets.linkIcon(dom, obj)
          rep.appendChild(anchor)
          UI.widgets.makeDraggable(rep, obj) // 2017
        }
      } else {
        // bnode
        rep.appendChild(dom.createTextNode(UI.utils.label(obj)))
      }
    } else if (obj.termType === 'Collection') {
      // obj.elements is an array of the elements in the collection
      rep = dom.createElement('table')
      rep.setAttribute('style', 'width: 100%;')
      rep.setAttribute('about', obj.toNT())
      /* Not sure which looks best -- with or without. I think without

                var tr = rep.appendChild(document.createElement('tr'));
                tr.appendChild(document.createTextNode(
                        obj.elements.length ? '(' + obj.elements.length+')' : '(none)'));
        */
      for (let i = 0; i < obj.elements.length; i++) {
        const elt = obj.elements[i]
        const row = rep.appendChild(dom.createElement('tr'))
        const numcell = row.appendChild(dom.createElement('td'))
        numcell.setAttribute(
          'style',
          'margin: 0.2em; border: none; padding: 0; vertical-align: top;'
        )
        numcell.setAttribute('notSelectable', 'false')
        numcell.setAttribute('about', obj.toNT())
        numcell.innerHTML = i + 1 + ')'
        row.appendChild(thisOutline.outlineObjectTD(elt))
      }
    } else if (obj.termType === 'Graph') {
      rep = paneRegistry
        .byName('dataContentPane')
        .statementsAsTables(obj.statements, context)
      rep.setAttribute('class', 'nestedFormula')
    } else {
      UI.log.error('Object ' + obj + ' has unknown term type: ' + obj.termType)
      rep = dom.createTextNode('[unknownTermType:' + obj.termType + ']')
    } // boring defaults.
    UI.log.debug('contents: ' + rep.innerHTML)
    return rep
  } // boring_default

  this.createTabURI = function () {
    dom.getElementById('UserURI').value =
      dom.URL + '?uri=' + dom.getElementById('UserURI').value
  }

  // a way to expose variables to UserInput without making them propeties/methods
  this.UserInput.setSelected = setSelected
  this.UserInput.deselectAll = deselectAll
  this.UserInput.views = views
  this.outlineExpand = outlineExpand

  // this.panes = panes; // Allow external panes to register

  return this
} // END OF OUTLINE