solid-panes 4.4.2-1 → 4.4.2-3

package/dist/outline/manager.js

@@ -1,2115 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = _default;
-var paneRegistry = _interopRequireWildcard(require("pane-registry"));
-require("./manager.css");
-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"));
-var _ownerProfile = require("../profileUtils/ownerProfile");
-var _person = _interopRequireDefault(require("../icons/person.svg"));
-var _friends = _interopRequireDefault(require("../icons/friends.svg"));
-var _folder = _interopRequireDefault(require("../icons/folder.svg"));
-var _dashboard = _interopRequireDefault(require("../icons/dashboard.svg"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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
-
-const PERSON_ICON = _person.default;
-const FRIENDS_ICON = _friends.default;
-const FOLDER_ICON = _folder.default;
-const DASHBOARD_ICON = _dashboard.default;
-
-/* global alert XPathResult sourceWidget */
-// XPathResult?
-
-// const iconHeight = '24px'
-
-function _default(context) {
-  const dom = context.dom;
-  this.document = context.dom;
-  this.context = context;
-  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;
-  };
-  this.getLayoutMode = function () {
-    const envLayout = this.context?.environment?.layout;
-    if (envLayout === 'mobile' || envLayout === 'desktop') return envLayout;
-    if (typeof window !== 'undefined' && window.matchMedia) {
-      const viewportWidth = Math.round(Math.min(window.innerWidth, window.visualViewport?.width || window.innerWidth));
-      const isTouchInput = window.matchMedia('(pointer: coarse)').matches || navigator.maxTouchPoints > 0;
-      return viewportWidth <= 768 || isTouchInput && viewportWidth <= 1024 ? 'mobile' : 'desktop';
-    }
-    return 'desktop';
-  };
-
-  /** 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.classList.add('obj');
-    td.setAttribute('notSelectable', 'false');
-    td.style.margin = '0.2em';
-    if (!obj) {
-      td.textContent = 'No object available.';
-      return td;
-    }
-    td.style.border = 'none';
-    td.style.padding = '0';
-    td.style.verticalAlign = 'top';
-    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
-    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.classList.add('labelTD');
-    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();
-    const selectedItem = options.selectedTab ? items.find(item => item.paneName === options.selectedTab || item.tabName === options.selectedTab) : items[0];
-    if (!selectedItem) {
-      return div;
-    }
-    div.dataset.globalPaneName = selectedItem.tabName || selectedItem.paneName;
-    const content = div.appendChild(dom.createElement('div'));
-    const pane = paneRegistry.byName(selectedItem.paneName); // 20190701
-    const table = content.appendChild(dom.createElement('table'));
-    thisOutline.GotoSubject(selectedItem.subject || me, true, pane, false, undefined, table);
-    return div;
-  }
-  this.getDashboard = globalAppTabs;
-  async function getDashboardItems() {
-    const me = _solidLogic.authn.currentUser();
-    if (!me) return [];
-    const div = dom.createElement('div');
-    const panes = [{
-      paneName: 'profile',
-      subject: me,
-      label: 'Your profile',
-      icon: PERSON_ICON
-    }, {
-      paneName: 'social',
-      // loads socialPane
-      subject: me,
-      label: 'Your friends',
-      icon: FRIENDS_ICON
-    }];
-    const [pods] = await Promise.all([getPods()]);
-    panes.push(...pods);
-    panes.push(
-    /* not in use since redesign of profile-pane
-    {
-      paneName: 'editProfile',
-      label: 'Edit your Profile',
-      icon: UI.icons.iconBase + 'noun_492246.svg'
-    },
-    */
-    {
-      paneName: 'home',
-      label: 'Your dashboard',
-      icon: DASHBOARD_ICON
-    }, {
-      paneName: 'basicPreferences',
-      label: 'Your preferences',
-      icon: UI.icons.iconBase + 'noun_Sliders_341315_000000.svg'
-    });
-    return panes;
-    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());
-      await Promise.all(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 Promise.all(pods.map(async (pod, index) => {
-        function split(item) {
-          return item.uri.split('//')[1].slice(0, -1);
-        }
-        const ownerName = (await (0, _ownerProfile.getNameOfPodOwner)(pod, kb, sf)) || '';
-        const label = split(me).startsWith(split(pod)) ? 'Your storage' : ownerName.trim() !== '' ? ownerName + '\'s storage' : split(pod);
-        return {
-          paneName: 'folder',
-          tabName: `folder-${index}`,
-          label,
-          subject: pod,
-          icon: FOLDER_ICON
-        };
-      }));
-    }
-    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>}
-   */
-  function closeDashboard() {
-    const dashboardContainer = getDashboardContainer();
-    const outlineContainer = getOutlineContainer();
-    dashboardContainer.innerHTML = '';
-    hideGlobalContainer(dashboardContainer);
-    showGlobalContainer(outlineContainer);
-  }
-
-  // Register the closeDashboard listener only once
-  _solidLogic.authSession.events.on('logout', closeDashboard);
-  function showGlobalContainer(container) {
-    container.removeAttribute('hidden');
-    container.style.display = '';
-  }
-  function hideGlobalContainer(container) {
-    container.setAttribute('hidden', '');
-    container.style.display = 'none';
-  }
-  async function showDashboard(subject, options = {}) {
-    const dashboardContainer = getDashboardContainer();
-    const outlineContainer = getOutlineContainer();
-
-    // reuse existing dashboard if already rendered for the same pane and subject
-    if (dashboardContainer.childNodes.length > 0) {
-      const existingDashboard = dashboardContainer.firstElementChild;
-      if (existingDashboard && options.pane && existingDashboard.dataset.globalPaneName === options.pane && existingDashboard.dataset.subject === (subject && subject.value || '')) {
-        hideGlobalContainer(outlineContainer);
-        showGlobalContainer(dashboardContainer);
-        return;
-      }
-      dashboardContainer.innerHTML = '';
-    }
-
-    // create a new dashboard if not already present
-    const dashboard = await globalAppTabs({
-      selectedTab: options.pane
-      // onClose: closeDashboard
-    });
-
-    // finally - switch to showing dashboard
-    hideGlobalContainer(outlineContainer);
-    showGlobalContainer(dashboardContainer);
-    dashboardContainer.appendChild(dashboard);
-  }
-  this.showDashboard = showDashboard;
-  function getDashboardContainer() {
-    return getOrCreateContainer('GlobalDashboard', 'Dashboard');
-  }
-  function getOutlineContainer() {
-    return getOrCreateContainer('OutlineView', 'Resource browser');
-  }
-
-  /**
-   * 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
-   * @param {string} [ariaLabel] Optional aria-label for accessibility
-   * @returns {HTMLElement}
-   */
-  function getOrCreateContainer(id) {
-    const containerHost = document.getElementById('app-view') || document.getElementById('MainContent') || document.querySelector('[role="main"]') || document.body;
-
-    // OutlineView is a table
-    if (id === 'OutlineView') {
-      const existingOutline = document.getElementById('OutlineView');
-      if (existingOutline) {
-        return existingOutline;
-      }
-      if (containerHost) {
-        const OutlineView = document.createElement('table');
-        OutlineView.id = 'OutlineView';
-        OutlineView.classList.add('outline-view');
-        OutlineView.setAttribute('aria-label', 'Resource browser');
-        containerHost.appendChild(OutlineView);
-        return OutlineView;
-      }
-    }
-
-    // or we deal with the section GlobalDashboard
-    return document.getElementById(id) || (() => {
-      const GlobalDashboard = document.createElement('section');
-      GlobalDashboard.id = id;
-      GlobalDashboard.setAttribute('aria-label', 'Dashboard');
-      GlobalDashboard.classList.add('global-dashboard');
-      return containerHost.appendChild(GlobalDashboard);
-    })();
-  }
-  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);
-          let iconSrc = '';
-          if (pane.name === 'profile') {
-            iconSrc = PERSON_ICON;
-          } else if (pane.name === 'social') {
-            iconSrc = FRIENDS_ICON;
-          } else {
-            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.setAttribute('colspan', '2');
-                cell.style.textAlign = 'left';
-                cell.style.width = '100%';
-                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-top: 0; padding-bottom: 0; vertical-align: top;' + 'display:flex; justify-content: space-between; flex-direction: row;' + 'background-color: var(--color-background, #F8F9FB);');
-    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;' + 'background-color: var(--color-background, #F8F9FB);';
-      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.classList.add('placeholderTable');
-    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.classList.add('tableFullWidth');
-      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.setAttribute('colspan', '2');
-          cell.style.textAlign = 'left';
-          cell.style.width = '100%';
-          cell.style.backgroundColor = 'var(--color-background, #F8F9FB)';
-          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('OutlineView').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)) {
-      const docUri = subject.doc() && subject.doc().uri ? subject.doc().uri : '' + subject.doc();
-      /* handle auth errors more gracefully. For now just display a friendlier message
-         perhaps we can have a different page that gets shown in the future */
-      const outlineAuthMessage = function (statusCode) {
-        const isRootResource = !!(subject && subject.uri && subject.site && subject.site().uri === subject.uri);
-        if (statusCode === 403) {
-          return isRootResource ? 'This root resource is not accessible with your current permissions. Try logging in with an authorized account or opening a public profile document.' : 'This resource is not accessible with your current permissions.';
-        }
-        return isRootResource ? 'This root resource is not publicly readable. Try logging in or opening a profile document.' : 'This resource is not publicly readable. Try logging in or opening a different public resource.';
-      };
-      const authErrorStatus = function (detail, errObj) {
-        const detailText = typeof detail === 'string' ? detail : String(detail || '');
-        const statusCode = errObj?.status || errObj?.response?.status;
-        if (statusCode === 401 || statusCode === 403) return statusCode;
-        if (detailText.includes('status: 403') || detailText.includes('status 403')) return 403;
-        if (detailText.includes('status: 401') || detailText.includes('status 401')) return 401;
-        return null;
-      };
-      const appendOutlineError = function (detail, errObj) {
-        if (p.querySelector && docUri) {
-          const existing = p.querySelector('[data-outline-error-for="' + docUri + '"]');
-          if (existing) return;
-        }
-        const statusCode = authErrorStatus(detail, errObj);
-        const friendlyDetail = statusCode ? outlineAuthMessage(statusCode) : detail;
-        const message = UI.widgets.errorMessageBlock(dom, friendlyDetail, '#fee', 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  -- default is an HTML table element in which to put the outline.
-  */
-  this.GotoSubject = function (subject, expand, pane, solo, referrer, table) {
-    table = table || getOutlineContainer('OutlineView'); // if does not exist create a compatible host in the current shell
-    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 {
-        const currentUrl = new URL(document.location.href);
-        const targetUrl = new URL(subject.uri, document.location.href);
-        if (currentUrl.origin === targetUrl.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.classList.add('tableFullWidth');
-      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.classList.add('obj');
-        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