How to use the @kui-shell/core.UI.empty function in @kui-shell/core

})

  // add the activation id to the header
  const activationDom = element('.sidecar-header-name .entity-name-hash', sidecar)
  activationDom.innerText = entity.activationId

  // view mode
  const show =
    (options && options.show) || // cli-specified mode
    (entity.modes && entity.modes.find(_ => _.defaultMode)) || // model-specified default mode
    'result' // fail-safe default mode

  if (show === 'result' || show.mode === 'result') {
    debug('showing result')
    const activationResult = element('.activation-result', sidecar)
    UI.empty(activationResult)

    try {
      activationResult['scrollIntoViewIfNeeded']()
    } catch (err) {
      // ok: might not be implemented in all browsers
    }

    if (entity.response.result) {
      const result = entity.response.result
      if (result.error && result.error.stack) {
        // special case for error stacks, we can do better than beautify, here
        result.error.rawStack = result.error.stack
        result.error.stack = result.error.rawStack
          .split(/\n/)
          .slice(1, -1) // slice off the first and last line; the first line is a repeat of result.error.message; the last is internal openwhisk
          .map(line =>

let value = entity[field]
  if (!value || value.length === 0) {
    container.innerText = `This entity has no ${field}`
  } else if (typeof value === 'string') {
    // render the value like a string
    if (field === 'source') {
      // hmm, let's not beautify the source code. maybe we will revisit this, later
      // const beautify = value => require('js-beautify')(value, { wrap_line_length: 80 })
      container.innerText = value
    } else {
      container.innerText = value
    }
  } else if (field === 'logs' && Array.isArray(value)) {
    const logTable = document.createElement('div')
    logTable.className = 'log-lines'
    UI.empty(container)
    container.appendChild(logTable)

    let previousTimestamp: Date
    value.forEach((logLine: string) => {
      const lineDom = document.createElement('div')
      lineDom.className = 'log-line'
      logTable.appendChild(lineDom)

      const match = logLine.match(logPatterns.logLine)

      if (match) {
        const date = document.createElement('div')
        // const type = document.createElement('div')
        const mesg = document.createElement('div')
        lineDom.appendChild(date)
        // lineDom.appendChild(type)

eventBus: EventEmitter,
  uuid: string,
  sorter = statDataSorter(defaultTop),
  sortDir = +1
): Commands.Response => {
  const { groups } = groupData
  const tableHeader = document.createElement('table')
  const tableScrollContainer = document.createElement('div')
  const table = document.createElement('table')

  // number of ticks on the x axis of the bar chart
  const { ticks = 4 } = options
  const numTicks = ticks

  // clean the container
  UI.empty(content)

  // x axis
  const headerRow = tableHeader.insertRow(-1)
  const xAxisLabels: HTMLElement[] = []
  const xAxisLeftPad = headerRow.insertCell(-1)
  tableHeader.classList.add('table-header')
  xAxisLeftPad.className = 'x-axis-left-pad cell-numeric'
  xAxisLeftPad.innerText = 'Action'
  if (numTicks === 0) {
    // we still need to insert a cell to fill in the bar column
    headerRow.insertCell(-1) // .classList.add('x-axis-label')
  } else {
    for (let idx = 0; idx < numTicks; idx++) {
      xAxisLabels[idx] = headerRow.insertCell(-1)
      xAxisLabels[idx].classList.add('x-axis-label')
    }

const https = entity.apiHost.startsWith('https://') || entity.apiHost.startsWith('http://') ? ''
       : entity.apiHost === 'localhost' ? 'http://' : 'https://',
       urlText = `${https}${entity.apiHost}/api/v1/web/${entity.namespace}/${!entity.packageName ? 'default/' : ''}${entity.name}.${contentType.value}`
       url.className = 'entity-web-export-url has-url'
       url.setAttribute('href', urlText)
       if (!options || options.show === 'code' || options.show === 'default') {
       responseToRepl = url.cloneNode(true)
       responseToRepl.innerText = urlText
       }
       } else {
       url.className = 'entity-web-export-url'
       url.removeAttribute('href')
       } */

    const sequence = sidecar.querySelector('.sequence-components')
    UI.empty(sequence)

    // remove any previous detail elements that might not be relevant to this entity
    element('.action-content .action-source', sidecar).innerText = ''

    if (entity.exec.kind === 'sequence') {
      //
      // visualize the sequence
      //
      maybeAddWebBadge(entity)
      if (options && options.show !== 'code' && options.show !== 'default') {
        //
        // show some other attribute of the action
        //
        const container = element('.action-content .action-source', sidecar)
        renderField(container, entity, options.show)
      } else if (renderThirdParty(entity)) {

}
    const rule = entity
    await wskflow(tab, ast, rule)
  } else if (entity.type === 'packages') {
    const actionCountDom = sidecar.querySelector('.package-action-count')
    const actionCount = (entity.actions && entity.actions.length) || 0
    actionCountDom.setAttribute('data-is-plural', (actionCount !== 1).toString())
    element('.package-content-count', actionCountDom).innerText = actionCount

    const feedCountDom = element('.package-feed-count', sidecar)
    const feedCount = (entity.feeds && entity.feeds.length) || 0
    feedCountDom.setAttribute('data-is-plural', (feedCount !== 1).toString())
    element('.package-content-count', feedCountDom).innerText = feedCount

    const packageContent = element('.sidecar-content .package-content', sidecar)
    UI.empty(packageContent)

    if (options && options.show !== 'content' && options.show !== 'default') {
      //
      // show some other attribute of the action
      //
      const source = document.createElement('pre')
      const sourceCode = document.createElement('code')
      source.className = 'package-source'
      source.appendChild(sourceCode)
      packageContent.appendChild(source)
      renderField(sourceCode, entity, options.show)
    } else {
      if (entity.actions) {
        const list = document.createElement('div')
        list.className = 'package-action-list'
        packageContent.appendChild(list)

// success indicator
  sidecar.classList.add(`activation-success-${entity.response.success}`)
  /* const statusDom = sidecar.querySelector('.activation-status')
     statusDom.setAttribute('data-extra-decoration', entity.response.status)
     statusDom.title = statusDom.getAttribute('data-title-base').replace(/{status}/, entity.response.status) */

  // limits
  const entityLimitsAnnotation = entity.annotations.find(kv => kv.key === 'limits')
  if (!entityLimitsAnnotation || entity.noCost) {
    // noCost means we should not display any cost info
    sidecar.classList.add('no-limits-data')
  }

  // start time
  const startDom = sidecar.querySelector('.activation-start')
  UI.empty(startDom)
  if (!entity.start) {
    sidecar.classList.add('no-activation-timing-data')
  } else {
    startDom.appendChild(UI.PrettyPrinters.time(entity.start))
  }

  // duration
  if (entity.end) {
    // the guard helps with: rule activations don't have an end time
    const duration = entity.end - entity.start
    element('.activation-content .activation-duration', sidecar).innerText = prettyPrintDuration(duration)
  }

  // estimated cost
  if (entity.duration && entityLimitsAnnotation) {
    // if we have BOTH a raw duration and limits data, then also show estimated cost

export default (tab: UI.Tab) => (view: HTMLElement) => {
  debug('insertView', view)

  const container = getActiveView(tab)
  debug('insertView.container', container)

  UI.empty(container)
  container.appendChild(view)

  presentAs(tab, UI.Presentation.Default)
}

const start = nextCell()
        const startInner = newLine ? document.createElement('span') : start.querySelector('span')
        const previous = activations[idx - 1]
        const previousStart = previous && previous.start - findItemInAnnotations('waitTime', previous)
        const time = UI.PrettyPrinters.time(
          activation.start - findItemInAnnotations('waitTime', activation),
          'short',
          previousStart
        )
        start.className =
          'somewhat-smaller-text lighter-text log-field log-field-right-align start-time-field timestamp-like'
        if (newLine) start.appendChild(startInner)
        if (typeof time === 'string') {
          startInner.innerText = time
        } else {
          UI.empty(startInner)
          startInner.appendChild(time)
        }
      }
    })

const wskflow = async (tab: UI.Tab, ast: ComponentArrayBearing, rule?) => {
  debug('wskflow', ast, rule)
  const sidecar = getSidecar(tab)
  const { visualize } = await import('@kui-shell/plugin-wskflow')

  sidecar.classList.add('custom-content')
  const container = sidecarSelector(tab, '.custom-content')
  UI.empty(container)

  const { view } = await visualize(tab, ast, undefined, undefined, undefined, undefined, undefined, rule)
  container.appendChild(view)
  sidecar.setAttribute('data-active-view', '.custom-content > div')
}