solid-panes 3.7.3 → 4.0.0-cc645f25

package/dist/outline/manager.js

@@ -0,0 +1,1997 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+var paneRegistry = _interopRequireWildcard(require("pane-registry"));
+var $rdf = _interopRequireWildcard(require("rdflib"));
+var UI = _interopRequireWildcard(require("solid-ui"));
+var _solidLogic = require("solid-logic");
+var _propertyViews = require("./propertyViews");
+var _outlineIcons = require("./outlineIcons.js");
+var _userInput = require("./userInput.js");
+var queryByExample = _interopRequireWildcard(require("./queryByExample.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/* istanbul ignore file */
+/* -*- coding: utf-8-dos -*-
+   Outline Mode Manager
+*/
+
+// @@ chec
+
+/* global alert XPathResult sourceWidget */
+// XPathResult?
+
+// const iconHeight = '24px'
+
+function _default(context) {
+  const dom = context.dom;
+  this.document = context.dom;
+  this.outlineIcons = _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 = _solidLogic.store;
+  const kb = _solidLogic.store;
+  const sf = _solidLogic.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.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.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.outlineIcons.src.icon_unrequested;
+        alt = 'fetch';
+        listener = unrequestedIconMouseDownListener;
+        break;
+      case 'requested':
+        icon = _outlineIcons.outlineIcons.src.icon_requested;
+        alt = 'fetching';
+        listener = failedIconMouseDownListener; // new: can retry yello blob
+        break;
+      case 'fetched':
+        icon = _outlineIcons.outlineIcons.src.icon_fetched;
+        listener = fetchedIconMouseDownListener;
+        alt = 'loaded';
+        break;
+      case 'failed':
+        icon = _outlineIcons.outlineIcons.src.icon_failed;
+        alt = 'failed';
+        listener = failedIconMouseDownListener;
+        break;
+      case 'unpermitted':
+        icon = _outlineIcons.outlineIcons.src.icon_failed;
+        listener = failedIconMouseDownListener;
+        alt = 'no perm';
+        break;
+      case 'unfetchable':
+        icon = _outlineIcons.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.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.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.outlineIcons.termWidgets) {
+      if (!newTr || !newTr.AJAR_statement) break; // case for TBD as predicate
+      // alert(Icon.termWidgets[w]+'   '+Icon.termWidgets[w].filter)
+      if (_outlineIcons.outlineIcons.termWidgets[w].filter && _outlineIcons.outlineIcons.termWidgets[w].filter(newTr.AJAR_statement, 'pred', inverse)) {
+        termWidget.addIcon(predicateTD, _outlineIcons.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 = _solidLogic.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 = _solidLogic.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 = _solidLogic.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
+    _solidLogic.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 ico = UI.utils.AJARImage(pane.icon, label, label, dom);
+          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.outlineIcons.tooltips[icon];
+        }
+        return true;
+      };
+    };
+    sf.addCallback('request', makeIconCallback(_outlineIcons.outlineIcons.src.icon_requested));
+    sf.addCallback('done', makeIconCallback(_outlineIcons.outlineIcons.src.icon_fetched));
+    sf.addCallback('fail', makeIconCallback(_outlineIcons.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.outlineIcons.termWidgets.optOn, _outlineIcons.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.outlineIcons.termWidgets.optOff, _outlineIcons.outlineIcons.termWidgets.optOn, optOnIconMouseDownListener);
+    p.parentNode.parentNode.setAttribute('optional', 'true');
+  }
+  function setSelectedParent(node, inc) {
+    const onIcon = _outlineIcons.outlineIcons.termWidgets.optOn;
+    const offIcon = _outlineIcons.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 = _solidLogic.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.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.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 = _solidLogic.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 = _solidLogic.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 = _solidLogic.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.outlineIcons.src.icon_show_choices && target.src.slice(target.src.indexOf('/icons/') + 1) !== _outlineIcons.outlineIcons.src.icon_add_triple) {
+      thisOutline.UserInput.clearInputAndSave(e);
+    }
+    if (!target.src || target.src.slice(target.src.indexOf('/icons/') + 1) !== _outlineIcons.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)) {
+      // Wait till at least the main URI is loaded before expanding:
+      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 {
+          const message = dom.createElement('pre');
+          message.textContent = body;
+          message.setAttribute('style', 'background-color: #fee;');
+          message.textContent = 'Outline.expand: Unable to fetch ' + subject.doc() + ': ' + body;
+          p.appendChild(message);
+        }
+      });
+    } 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 = (0, _propertyViews.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.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
+//# sourceMappingURL=manager.js.map