feat(packages/core): MultiModalResponse should support modeless responses

Fixes #3082

Author: starpit

packages/core/src/api/table-models.ts

@@ -19,4 +19,4 @@
  *
  */
 
-export { Table, isTable, Row } from '../webapp/models/table'
+export { Table, MultiTable, Row, isTable, isMultiTable } from '../webapp/models/table'

packages/core/src/core/job.ts

@@ -41,7 +41,7 @@ export class WatchableJob {
    */
   public start() {
     this.startWatching(this.handler, this.timeout)
-    this.tab['state'].captureJob(this)
+    this.tab.state.captureJob(this)
     debug(`start job ${this._id} with timeout ${this.timeout}`)
   }
 
@@ -57,7 +57,7 @@ export class WatchableJob {
    */
   public abort() {
     this.stopWatching(this._id)
-    this.tab['state'].removeJob(this)
+    this.tab.state.removeJob(this)
     debug(`stop job ${this._id}`)
   }
 }

packages/core/src/models/execOptions.ts

@@ -62,7 +62,7 @@ export interface ExecOptions {
   preserveBackButton?: boolean
   type?: ExecType
 
-  exec?: 'pexec' | 'qexec'
+  exec?: 'pexec' | 'qexec' | 'rexec'
 
   container?: Element
   raw?: boolean

packages/core/src/models/mmr/content-types.ts

@@ -16,7 +16,7 @@
 
 import { Tab } from '../../webapp/tab'
 import { Table, MultiTable } from '../../webapp/models/table'
-import { MetadataBearing } from '../entity'
+import { Entity, MetadataBearing } from '../entity'
 import { CustomSpec } from '../../webapp/views/sidecar-core'
 
 /**
@@ -35,10 +35,15 @@ export interface ScalarContent<T = ScalarResource> {
  * optionally provide a `contentType`.
  *
  */
-interface StringContent<ContentType = 'text/markdown' | 'text/html'> extends ScalarContent<string> {
+export interface StringContent<ContentType = 'text/markdown' | 'text/html'> extends ScalarContent<string> {
   contentType?: ContentType
 }
 
+export function isStringWithContentType(entity: Entity): entity is StringContent {
+  const string = entity as StringContent
+  return string && string.content !== undefined && string.contentType !== undefined
+}
+
 /**
  * `Content` as `FunctionThatProducesContent<T>` is a function that
  * takes a `T` and produces either a resource or some { content,

packages/core/src/models/mmr/is.ts

@@ -19,11 +19,5 @@ import { MultiModalResponse } from './types'
 
 export function isMultiModalResponse(entity: Entity): entity is MultiModalResponse {
   const mmr = entity as MultiModalResponse
-  return (
-    isMetadataBearing(mmr) &&
-    mmr.modes &&
-    Array.isArray(mmr.modes) &&
-    mmr.modes[0] &&
-    mmr.modes[0].content !== undefined
-  )
+  return isMetadataBearing(mmr) && mmr.modes && Array.isArray(mmr.modes)
 }

packages/core/src/models/mmr/show.ts

@@ -16,9 +16,9 @@
 
 import { Tab } from '../../webapp/tab'
 import { MetadataBearing } from '../entity'
-import { CustomSpec, isCustomSpec, showCustom, insertView } from '../../webapp/views/sidecar'
-import { DirectViewControllerFunction, SidecarMode } from '../../webapp/bottom-stripe'
-import { isTable, isMultiTable } from '../../webapp/models/table'
+import { CustomSpec, isCustomSpec, showCustom } from '../../webapp/views/sidecar'
+import { SidecarMode, addModeButtons } from '../../webapp/bottom-stripe'
+import { isTable, isMultiTable, Table, MultiTable } from '../../webapp/models/table'
 import { formatTable } from '../../webapp/views/table'
 
 import { MultiModalResponse, Button } from './types'
@@ -28,14 +28,11 @@ import {
   ScalarResource,
   ScalarContent,
   isCommandStringContent,
+  isStringWithContentType,
   isFunctionContent
 } from './content-types'
 
-type Viewable = CustomSpec | DirectViewControllerFunction<void | CustomSpec, HTMLElement | void>
-
-function isCustom(spec: Viewable): spec is CustomSpec {
-  return isCustomSpec(spec as CustomSpec)
-}
+type Viewable = CustomSpec | HTMLElement | Table | MultiTable
 
 /**
  * Turn a Resource into a Viewable
@@ -59,26 +56,23 @@ async function format<T extends MetadataBearing>(
   } else if (isCustomSpec(resource.content)) {
     return resource.content
   } else if (isTable(resource.content) || isMultiTable(resource.content)) {
-    const content = resource.content
-    return (tab, entity) => {
-      const dom1 = document.createElement('div')
-      const dom2 = document.createElement('div')
-      dom1.classList.add('scrollable', 'scrollable-auto')
-      dom2.classList.add('result-as-table', 'repl-result')
-      dom1.appendChild(dom2)
-      formatTable(tab, content, dom2)
-      if (entity) {
-        insertView(tab)(dom1)
-      } else {
-        return dom1
-      }
-    }
+    return resource.content
   } else {
     // otherwise, we have string or HTMLElement content
     return Object.assign({ kind: mmr.kind, metadata: mmr.metadata, version: mmr.version, type: 'custom' }, resource)
   }
 }
 
+function wrapTable(tab: Tab, table: Table | MultiTable): HTMLElement {
+  const dom1 = document.createElement('div')
+  const dom2 = document.createElement('div')
+  dom1.classList.add('scrollable', 'scrollable-auto')
+  dom2.classList.add('result-as-table', 'repl-result')
+  dom1.appendChild(dom2)
+  formatTable(tab, table, dom2)
+  return dom1
+}
+
 function formatButtons(buttons: Button[]): SidecarMode[] {
   return buttons.map(({ mode, label, command, confirm }) => ({
     mode,
@@ -88,53 +82,75 @@ function formatButtons(buttons: Button[]): SidecarMode[] {
   }))
 }
 
+function renderContent<T extends MetadataBearing>(tab: Tab, content: string | object) {
+  if (isStringWithContentType(content)) {
+    return content
+  } else if (isTable(content) || isMultiTable(content)) {
+    return {
+      content: wrapTable(tab, content)
+    }
+  } else {
+    return {
+      content
+    }
+  }
+}
+
 /**
  * Render a MultiModalResponse to the sidecar
  *
  */
 export async function show(tab: Tab, mmr: MultiModalResponse) {
-  const modes: SidecarMode<Viewable>[] = await Promise.all(
+  const modes: SidecarMode[] = await Promise.all(
     mmr.modes.map(async _ => ({
       mode: _.mode,
       label: _.label || _.mode,
-      direct: isCustomSpec(_) ? _ : await format(tab, mmr, _),
+      direct: (tab: Tab) => {
+        if (isCustomSpec(_)) {
+          return _
+        } else {
+          return format(tab, mmr, _)
+        }
+      },
       defaultMode: _.defaultMode,
       leaveBottomStripeAlone: true
     }))
   )
 
+  addModeButtons(tab, modes, mmr)
+
   const modesWithButtons: SidecarMode[] = mmr.buttons
     ? (modes as SidecarMode[]).concat(formatButtons(mmr.buttons))
     : (modes as SidecarMode[])
 
-  modes.forEach(_ => {
-    if (isCustom(_.direct)) {
-      _.direct.modes = modesWithButtons
-    }
-  })
-
   if (!modes.find(_ => _.defaultMode)) {
     modes[0].defaultMode = true
   }
 
   const defaultMode = modes.find(_ => _.defaultMode) || modes[0]
 
-  if (isCustom(defaultMode.direct)) {
-    return showCustom(tab, defaultMode.direct)
-  } else {
-    const content = await defaultMode.direct(tab)
-    if (content) {
-      return showCustom(tab, {
-        type: 'custom',
-        kind: mmr.kind,
-        metadata: mmr.metadata,
-        toolbarText: mmr.toolbarText,
-        version: mmr.version,
-        modes: modesWithButtons,
-        content
-      })
+  const content = typeof defaultMode.direct === 'function' ? await defaultMode.direct(tab, mmr) : defaultMode.direct
+
+  if (content) {
+    if (isCustomSpec(content)) {
+      return showCustom(tab, Object.assign({ modes: modesWithButtons }, content))
     } else {
-      console.error('empty content')
+      return showCustom(
+        tab,
+        Object.assign(
+          {
+            type: 'custom',
+            kind: mmr.kind,
+            metadata: mmr.metadata,
+            toolbarText: mmr.toolbarText,
+            version: mmr.version,
+            modes: modesWithButtons
+          },
+          renderContent(tab, content)
+        )
+      )
     }
+  } else {
+    console.error('empty content')
   }
 }

packages/core/src/plugins/plugins.ts

@@ -107,7 +107,7 @@ export const init = async (): Promise<boolean> => {
         prescan = unify(prescan, userInstalledPrescan)
         // debug('prescan', prescan)
       }
-      debug('user-installed prescan loaded')
+      debug('user-installed prescan loaded', prescan)
     } catch (err) {
       console.error('error loading user-installed prescan', err)
     }

packages/core/src/webapp/bottom-stripe.ts

@@ -21,13 +21,14 @@ import { removeAllDomChildren } from './util/dom'
 import { isTable, isMultiTable, Table, MultiTable } from './models/table'
 import { Capturable } from './models/capturable'
 import { formatTable } from './views/table'
-import { getSidecar, showCustom, isCustomSpec, CustomSpec, insertView } from './views/sidecar'
+import { getSidecar, showCustom, isCustomSpec, CustomSpec, insertCustomContent } from './views/sidecar'
 import sidecarSelector from './views/sidecar-selector'
 import { ExecOptions } from '../models/execOptions'
 import { apply as addRelevantModes } from './views/registrar/modes'
-import { pexec, qexec } from '../repl/exec'
+import { pexec, qexec, rexec } from '../repl/exec'
 import { isHTML } from '../util/types'
-import { Entity, EntitySpec, isMetadataBearingByReference } from '../models/entity'
+import { Entity, EntitySpec, isMetadataBearing, isMetadataBearingByReference } from '../models/entity'
+import { isStringWithContentType } from '../models/mmr/content-types'
 
 const debug = Debug('webapp/picture-in-picture')
 
@@ -88,6 +89,8 @@ const callDirect = async (
     debug('makeView as string')
     if (execOptions && execOptions.exec === 'pexec') {
       return pexec(makeView, execOptions)
+    } else if (execOptions && execOptions.exec === 'rexec') {
+      return rexec(makeView, execOptions)
     } else {
       return qexec(makeView, undefined, undefined, Object.assign({}, execOptions, { rethrowErrors: true }))
     }
@@ -451,20 +454,30 @@ const _addModeButton = (
 
             changeActiveButton()
           } else if (view && !actAsButton && !isToggle(view)) {
-            if (isTable(view)) {
+            if (isTable(view) || isStringWithContentType(view)) {
               changeActiveButton()
             }
 
             if (typeof view === 'string') {
               const dom = document.createElement('div')
               dom.classList.add('padding-content', 'scrollable', 'scrollable-auto')
               dom.innerText = view
-              insertView(tab)(dom)
+              insertCustomContent(tab, dom)
+            } else if (isStringWithContentType(view)) {
+              showCustom(
+                tab,
+                Object.assign({}, entity, {
+                  type: 'custom',
+                  content: view.content,
+                  contentType: view.contentType
+                }),
+                { leaveBottomStripeAlone: true }
+              )
             } else if (isHTML(view)) {
               const dom = document.createElement('div')
               dom.classList.add('padding-content', 'scrollable', 'scrollable-auto')
               dom.appendChild(view)
-              insertView(tab)(dom)
+              insertCustomContent(tab, dom)
             } else if (isCustomSpec(view)) {
               showCustom(tab, view, { leaveBottomStripeAlone })
             } else if (isTable(view) || isMultiTable(view)) {
@@ -474,7 +487,7 @@ const _addModeButton = (
               dom2.classList.add('result-as-table', 'repl-result')
               dom1.appendChild(dom2)
               formatTable(tab, view, dom2, { usePip: true })
-              insertView(tab)(dom1)
+              insertCustomContent(tab, dom1)
             }
           } else if (!isToggle(view) && isCustomSpec(view)) {
             showCustom(tab, view, { leaveBottomStripeAlone })
@@ -512,7 +525,7 @@ export const addModeButton = (
   return _addModeButton(tab, modeStripe, bottomStripe, mode, entity, undefined)
 }
 
-export const addModeButtons = (
+export const addModeButtons = <Direct = DirectViewController>(
   tab: Tab,
   modesUnsorted: SidecarMode[] = [],
   entity: EntitySpec | CustomSpec,
@@ -521,7 +534,9 @@ export const addModeButtons = (
   // consult the view registrar for registered view modes
   // relevant to this resource
   const command = ''
-  if (isMetadataBearingByReference(entity)) {
+  if (isMetadataBearing(entity)) {
+    addRelevantModes(modesUnsorted, command, { resource: entity })
+  } else if (isMetadataBearingByReference(entity)) {
     addRelevantModes(modesUnsorted, command, entity)
   }
 

packages/core/src/webapp/views/sidecar.ts

@@ -419,10 +419,10 @@ export const showCustom = async (tab: Tab, custom: CustomSpec, options?: ExecOpt
   if (!options || !options.leaveBottomStripeAlone) {
     addModeButtons(tab, modes, custom, options)
     sidecar.setAttribute('class', `${sidecar.getAttribute('data-base-class')} custom-content`)
-    setVisibleClass(sidecar)
   } else {
     sidecar.classList.add('custom-content')
   }
+  setVisibleClass(sidecar)
 
   if (custom.sidecarHeader === false) {
     // view doesn't want a sidecar header
@@ -756,3 +756,20 @@ export const insertView = (tab: Tab) => (view: HTMLElement) => {
 
   presentAs(tab, Presentation.Default)
 }
+
+/**
+ * Update the current view into the sidecar; this is helpful for tab
+ * mode switching.
+ *
+ */
+export const insertCustomContent = (tab: Tab, view: HTMLElement) => {
+  debug('insertCustomContent', view)
+
+  const container = getSidecar(tab).querySelector('.custom-content')
+  debug('insertCustomContent.container', container)
+
+  removeAllDomChildren(container)
+  container.appendChild(view)
+
+  presentAs(tab, Presentation.Default)
+}