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

}
      }

      var backgroundColor =
        store.anyValue(
          subject,
          ns.solid('profileBackgroundColor'),
          null,
          subject.doc()
        ) || '#ffffff'
      // Todo: check format of color matches regexp and not too dark
      container.style.backgroundColor = backgroundColor // @@ Limit to pale?
      var highlightColor =
        store.anyValue(
          subject,
          ns.solid('profileHighlightColor', null, subject.doc())
        ) || '#090' // @@ beware injection attack
      container.style.border = `0.3em solid ${highlightColor}`
      container.style.borderRadius = '0.5em'
      container.style.padding = '0.7em'
      container.style.marginTop = '0.7em'
      var table = container.appendChild(dom.createElement('table'))
      // var top = table.appendChild(dom.createElement('tr'))
      var main = table.appendChild(dom.createElement('tr'))
      var bottom = table.appendChild(dom.createElement('tr'))
      var statusArea = bottom.appendChild(dom.createElement('div'))
      statusArea.setAttribute('style', 'padding: 0.7em;')

      function heading (str: string) {
        var h = main.appendChild(dom.createElement('h3'))
        h.setAttribute(
          'style',

**
 **  This outline pane contains the properties which are
 ** internal to the user's interaction with the web, and are not normally displayed
 */
/* global alert confirm */

import { icons, ns, widgets } from 'solid-ui'
import { IndexedFormula, literal, NamedNode, st, sym } from 'rdflib'
import { PaneDefinition } from 'pane-registry'

const pane: PaneDefinition = {
  icon: icons.originalIconBase + 'tango/22-emblem-system.png',

  name: 'internal',

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

  label: function () {
    return 'under the hood' // There is often a URI even of no statements
  },

  render: function (subject, context) {
    const dom = context.dom
    const store = context.session.store
    const canonizedSubject = store.canon(subject)
    const types = store.findTypeURIs(canonizedSubject)

    function filter (pred: NamedNode) {
      if (types['http://www.w3.org/2007/ont/link#ProtocolEvent']) return true // display everything for them
      const view = context.session.paneRegistry.byName('internal')
      return (
        view &&

(loggedInContext: { me: NamedNode }) => {
        var me = loggedInContext.me
        subject = me

        heading('Edit your public profile')

        var profile = me.doc()
        if (store.any(subject, ns.solid('editableProfile'))) {
          // @@ TODO Remove the casting on next line
          editableProfile = store.any(
            subject,
            ns.solid('editableProfile')
          ) as NamedNode
          // @@ TODO Remove casting of store.updater
        } else if ((store.updater as any).editable(profile.uri, store)) {
          editableProfile = profile
        } else {
          statusArea.appendChild(
            widgets.errorMessageBlock(
              dom,
              `⚠️ Your profile ${profile} is not editable, so we cannot do much here.`,
              'straw'
            )
          )

(loggedInContext: { me: NamedNode }) => {
        var me = loggedInContext.me
        subject = me

        heading('Edit your public profile')

        var profile = me.doc()
        if (store.any(subject, ns.solid('editableProfile'))) {
          // @@ TODO Remove the casting on next line
          editableProfile = store.any(
            subject,
            ns.solid('editableProfile')
          ) as NamedNode
          // @@ TODO Remove casting of store.updater
        } else if ((store.updater as any).editable(profile.uri, store)) {
          editableProfile = profile
        } else {
          statusArea.appendChild(
            widgets.errorMessageBlock(
              dom,
              `⚠️ Your profile ${profile} is not editable, so we cannot do much here.`,
              'straw'
            )
          )

**
 **  This outline pane contains the properties which are
 ** internal to the user's interaction with the web, and are not normally displayed
 */
/* global alert confirm */

import { icons, ns, widgets } from 'solid-ui'
import { IndexedFormula, literal, NamedNode, st, sym } from 'rdflib'
import { PaneDefinition } from 'pane-registry'

const pane: PaneDefinition = {
  icon: icons.originalIconBase + 'tango/22-emblem-system.png',

  name: 'internal',

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

  label: function () {
    return 'under the hood' // There is often a URI even of no statements
  },

  render: function (subject, context) {
    const dom = context.dom
    const store = context.session.store
    const canonizedSubject = store.canon(subject)
    const types = store.findTypeURIs(canonizedSubject)

    function filter (pred: NamedNode) {
      if (types['http://www.w3.org/2007/ont/link#ProtocolEvent']) return true // display everything for them
      const view = context.session.paneRegistry.byName('internal')
      return (
        view &&

/*   Tabbed view of anything
 **
 ** data-driven
 **
 */
import { DataBrowserContext, PaneDefinition } from 'pane-registry'
import { NamedNode } from 'rdflib'
import { icons, ns, tabs, widgets } from 'solid-ui'

const TabbedPane: PaneDefinition = {
  icon: icons.iconBase + 'noun_688606.svg',

  name: 'tabbed',

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

  // Does the subject deserve this pane?
  label: (subject, context) => {
    const kb = context.session.store
    const typeURIs = kb.findTypeURIs(subject)
    if (ns.meeting('Cluster').uri in typeURIs) {
      return 'Tabbed'
    }
    return null
  },

  render: (subject, context) => {
    const dom = context.dom
    const store = context.session.store
    const div = dom.createElement('div')

// @@ TODO: serialize is not part rdflib type definitions
// Might be fixed in https://github.com/linkeddata/rdflib.js/issues/341
// @ts-ignore
import { graph, log, NamedNode, Namespace, sym, serialize, UpdateManager, Fetcher } from 'rdflib'
import { PaneDefinition } from 'pane-registry'
/*   pad Pane
 **
 */

const paneDef: PaneDefinition = {
  // icon:  (module.__dirname || __dirname) + 'images/ColourOn.png',
  icon: icons.iconBase + 'noun_79217.svg',

  name: 'pad',

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

  // Does the subject deserve an pad pane?
  label: function (subject, context) {
    var t = context.session.store.findTypeURIs(subject)
    if (t['http://www.w3.org/ns/pim/pad#Notepad']) {
      return 'pad'
    }
    return null // No under other circumstances
  },

  mintClass: ns.pad('Notepad'),

  mintNew: function (context, newPaneOptions: any) {
    const store = context.session.store
    const updater = store.updater as UpdateManager
    if (newPaneOptions.me && !newPaneOptions.me.uri) {

// @@ TODO: serialize is not part rdflib type definitions
// Might be fixed in https://github.com/linkeddata/rdflib.js/issues/341
// @ts-ignore
import { graph, log, NamedNode, Namespace, sym, serialize, UpdateManager, Fetcher } from 'rdflib'
import { PaneDefinition } from 'pane-registry'
/*   pad Pane
 **
 */

const paneDef: PaneDefinition = {
  // icon:  (module.__dirname || __dirname) + 'images/ColourOn.png',
  icon: icons.iconBase + 'noun_79217.svg',

  name: 'pad',

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

  // Does the subject deserve an pad pane?
  label: function (subject, context) {
    var t = context.session.store.findTypeURIs(subject)
    if (t['http://www.w3.org/ns/pim/pad#Notepad']) {
      return 'pad'
    }
    return null // No under other circumstances
  },

  mintClass: ns.pad('Notepad'),

  mintNew: function (context, newPaneOptions: any) {
    const store = context.session.store
    const updater = store.updater as UpdateManager
    if (newPaneOptions.me && !newPaneOptions.me.uri) {

if (!subject) throw new Error('subject missing')
      const profile = subject.doc()
      const otherProfiles = store.each(subject, ns.rdfs('seeAlso'), null, profile)
      if (otherProfiles.length > 0) {
        try {
          // @@ TODO Remove casting of store and store.fetcher.load
          await ((store as any).fetcher.load as any)(otherProfiles)
        } catch (err) {
          container.appendChild(widgets.errorMessageBlock(err))
        }
      }

      var backgroundColor =
        store.anyValue(
          subject,
          ns.solid('profileBackgroundColor'),
          null,
          subject.doc()
        ) || '#ffffff'
      // Todo: check format of color matches regexp and not too dark
      container.style.backgroundColor = backgroundColor // @@ Limit to pale?
      var highlightColor =
        store.anyValue(
          subject,
          ns.solid('profileHighlightColor', null, subject.doc())
        ) || '#090' // @@ beware injection attack
      container.style.border = `0.3em solid ${highlightColor}`
      container.style.borderRadius = '0.5em'
      container.style.padding = '0.7em'
      container.style.marginTop = '0.7em'
      var table = container.appendChild(dom.createElement('table'))
      // var top = table.appendChild(dom.createElement('tr'))

if (!subject) throw new Error('subject missing')
      const profile = subject.doc()
      const otherProfiles = store.each(subject, ns.rdfs('seeAlso'), null, profile)
      if (otherProfiles.length > 0) {
        try {
          // @@ TODO Remove casting of store and store.fetcher.load
          await ((store as any).fetcher.load as any)(otherProfiles)
        } catch (err) {
          container.appendChild(widgets.errorMessageBlock(err))
        }
      }

      var backgroundColor =
        store.anyValue(
          subject,
          ns.solid('profileBackgroundColor'),
          null,
          subject.doc()
        ) || '#ffffff'
      // Todo: check format of color matches regexp and not too dark
      container.style.backgroundColor = backgroundColor // @@ Limit to pale?
      var highlightColor =
        store.anyValue(
          subject,
          ns.solid('profileHighlightColor', null, subject.doc())
        ) || '#090' // @@ beware injection attack
      container.style.border = `0.3em solid ${highlightColor}`
      container.style.borderRadius = '0.5em'
      container.style.padding = '0.7em'
      container.style.marginTop = '0.7em'
      var table = container.appendChild(dom.createElement('table'))
      // var top = table.appendChild(dom.createElement('tr'))