diff --git a/kbase-extension/static/kbase/config/feature-config.json b/kbase-extension/static/kbase/config/feature-config.json
index dd0b13f836..8de4a0ea0a 100644
--- a/kbase-extension/static/kbase/config/feature-config.json
+++ b/kbase-extension/static/kbase/config/feature-config.json
@@ -2,5 +2,6 @@
     "stagingDataViewer": true,
     "jgiPublicStaging": true,
     "advanced": false,
-    "developer": false
+    "developer": false,
+    "lazyWidgetRender": true
 }
diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index 35018675eb..991a65f093 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -1430,14 +1430,6 @@ div#notebook_panel {
     cursor: pointer;
 }
 
-.kb-cell-toolbar {
-    xborder-bottom: 1px silver solid;
-}
-
-.kb-cell-toolbar.collapsed {
-    xborder-bottom: none;
-}
-
 .kb-cell-toolbar .buttons {
     font-weight: bold;
     color: #CECECE !important;
@@ -1452,7 +1444,7 @@ div#notebook_panel {
     height: 56px;
     width: 56px;
     padding: 0;
-    margin: 0 4px 0 4px;
+    margin-right: 4px;
     vertical-align: top;
     border: 0px red solid;
     line-height: 56px;
@@ -1652,12 +1644,6 @@ div#notebook_panel {
   border-bottom-color: #bce8f1;
 }
 
-.kb-func-panel .panel-footer {
-    /*background-color: #fff;
-    border-top: none; */
-    /*padding: 2px 15px;*/
-}
-
 /** output cell styling */
 .kb-cell-output .panel {
     border-radius: 0px;
diff --git a/kbase-extension/static/kbase/js/api/upa.js b/kbase-extension/static/kbase/js/api/upa.js
index 45c4a039e4..bfe3768075 100644
--- a/kbase-extension/static/kbase/js/api/upa.js
+++ b/kbase-extension/static/kbase/js/api/upa.js
@@ -108,13 +108,64 @@ define([
             return deserial;
         };
 
+        var changeUpaVersion = function(upa, newVersion) {
+            if (!isUpa(upa)) {
+                throw {
+                    error: upa + ' is not a valid upa, so its version cannot be changed!'
+                };
+            }
+            if ((!(/^\d+$/.test(newVersion)) || newVersion <= 0)) {
+                throw {
+                    error: newVersion + ' is not a valid version number!'
+                };
+            }
+            var newUpa = upa.replace(/^(.+\/)(\d+)$/, '$1' + newVersion);
+            return newUpa;
+        };
+
+        var serializeAll = function(upas) {
+            if (typeof upas === 'string') {
+                return serialize(upas);
+            }
+            else if (Array.isArray(upas)) {
+                return upas.map(function(upa) {
+                    return serialize(upa);
+                });
+            }
+            else {
+                return Object.keys(upas).reduce(function(acc, key) {
+                    acc[key] = serializeAll(upas[key]);
+                    return acc;
+                }, {});
+            }
+        };
+
+        var deserializeAll = function(upas) {
+            if (typeof upas === 'string') {
+                return deserialize(upas);
+            }
+            else if (Array.isArray(upas)) {
+                return upas.map(function(upa) {
+                    return deserialize(upa);
+                });
+            }
+            else {
+                return Object.keys(upas).reduce(function(acc, key) {
+                    acc[key] = deserializeAll(upas[key]);
+                    return acc;
+                }, {});
+            }
+        };
 
         return {
             serialize: serialize,
             deserialize: deserialize,
             serializeExternal: serializeExternal,
             externalTag: externalTag,
-            isUpa: isUpa
+            isUpa: isUpa,
+            changeUpaVersion: changeUpaVersion,
+            serializeAll: serializeAll,
+            deserializeAll: deserializeAll
         };
     };
 
diff --git a/kbase-extension/static/kbase/js/kbaseNarrative.js b/kbase-extension/static/kbase/js/kbaseNarrative.js
index 43fb5fd894..f219342618 100644
--- a/kbase-extension/static/kbase/js/kbaseNarrative.js
+++ b/kbase-extension/static/kbase/js/kbaseNarrative.js
@@ -30,7 +30,6 @@ define([
     'notebook/js/notebook',
     'util/display',
     'util/bootstrapDialog',
-    'util/bootstrapAlert',
     'util/timeFormat',
     'text!kbase/templates/update_dialog_body.html',
     'text!kbase/templates/document_version_change.html',
@@ -65,7 +64,6 @@ define([
     Notebook,
     DisplayUtil,
     BootstrapDialog,
-    BootstrapAlert,
     TimeFormat,
     UpdateDialogBodyTemplate,
     DocumentVersionDialogBodyTemplate,
@@ -379,7 +377,7 @@ define([
     Narrative.prototype.showDocumentVersionDialog = function (newVerInfo) {
         var bodyTemplate = Handlebars.compile(DocumentVersionDialogBodyTemplate);
 
-        var versionDialog = new BootstrapAlert({
+        var versionDialog = new BootstrapDialog({
             title: 'Showing an older Narrative document',
             body: bodyTemplate({
                 currentVer: this.documentVersionInfo,
@@ -388,7 +386,8 @@ define([
                 newDate: TimeFormat.readableTimestamp(newVerInfo[3]),
                 sameUser: this.documentVersionInfo[5] === newVerInfo[5],
                 readOnly: this.readonly
-            })
+            }),
+            alertOnly: true
         });
 
         versionDialog.show();
@@ -833,10 +832,11 @@ define([
      */
     Narrative.prototype.addViewerCell = function(obj) {
         if (Jupyter.narrative.readonly) {
-            new BootstrapAlert({
+            new BootstrapDialog({
                 type: 'warning',
                 title: 'Warning',
-                body: 'Read-only Narrative -- may not add a data viewer to this Narrative'
+                body: 'Read-only Narrative -- may not add a data viewer to this Narrative',
+                alertOnly: true
             });
             return;
         }
@@ -938,6 +938,9 @@ define([
      * get_cell_elements, which does this searching).
      */
     Narrative.prototype.getCellIndexByKbaseId = function (id) {
+        if (!Jupyter.notebook) {
+            return null;
+        }
         var cells = Jupyter.notebook.get_cells();
         for (var i = 0; i < cells.length; i++) {
             var c = cells[i];
diff --git a/kbase-extension/static/kbase/js/util/bootstrapAlert.js b/kbase-extension/static/kbase/js/util/bootstrapAlert.js
deleted file mode 100644
index 797d8a2c0d..0000000000
--- a/kbase-extension/static/kbase/js/util/bootstrapAlert.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/*global define*/
-/*jslint white: true*/
-define([
-    'bootstrap',
-    'jquery'
-], function(
-    bootstrap,
-    $
-) {
-    'use strict';
-
-    /**
-     * options:
-     * {
-     *     title: string,
-     *     body: jquery node
-     * }
-     */
-    var BootstrapAlert = function(options) {
-        this.$modal = $('<div class="modal kb-modal-alert fade" role="dialog">');
-        this.$dialog = $('<div class="modal-dialog">');
-        this.$dialogContent = $('<div class="modal-content">');
-        this.$header = $('<div class="modal-header">');
-
-        this.$title = $('<span>');
-
-        this.$headerTitle = $('<span class="modal-title">').append(this.$title);
-
-        this.$dialogBody = $('<div class="modal-body">');
-        this.$footer = $('<div class="modal-footer">');
-
-        this.$buttonList = $('<div>');
-
-        this.enterToTrigger = false;
-        if (options.enterToTrigger) {
-            this.enterToTrigger = options.enterToTrigger;
-        }
-
-        this.$modal.append(
-            this.$dialog.append(
-                this.$dialogContent.append(this.$header.append(this.$headerTitle))
-                .append(this.$dialogBody)
-                .append(this.$footer)));
-
-        this.initialize(options);
-    };
-
-    BootstrapAlert.prototype.initialize = function(options) {
-        if (!options) {
-            console.warn('BootstrapALert created with no arguments.');
-            return;
-        }
-        var $closeButton = $('<button type="button" class="close" data-dismiss="modal" aria-label="Close">')
-            .append($('<span aria-hidden="true">')
-                .append('&times;'));
-        this.$header.append($closeButton);
-        if (options.title) {
-            this.$title.html(options.title);
-        }
-        if (options.type) {
-            this.$title.addClass('text-' + options.type);
-        }
-        if (options.body) {
-            this.$dialogBody.html(options.body);
-        }
-        var $closeButton2 = $('<button type="button" class="btn btn-primary" data-dismiss="modal">')
-            .text('Close');
-        this.$footer.append($closeButton2);
-
-        this.$modal.modal('show');
-    };
-
-    BootstrapAlert.prototype.setBody = function($body) {
-        this.$dialogBody.empty().append($body);
-    };
-
-    BootstrapAlert.prototype.setTitle = function(title) {
-        this.$headerTitle.empty().append(title);
-    };
-
-    /**
-     * Removes this modal from the DOM and removes any associated content.
-     */
-    BootstrapAlert.prototype.destroy = function() {
-        this.$modal.remove();
-        this.$modal = null;
-        return null;
-    };
-
-    return BootstrapAlert;
-});
\ No newline at end of file
diff --git a/kbase-extension/static/kbase/js/util/bootstrapDialog.js b/kbase-extension/static/kbase/js/util/bootstrapDialog.js
index 988f81284f..11314cb5d7 100644
--- a/kbase-extension/static/kbase/js/util/bootstrapDialog.js
+++ b/kbase-extension/static/kbase/js/util/bootstrapDialog.js
@@ -1,13 +1,12 @@
 /*global define*/
 /*jslint white: true*/
-define (
-    [
-        'bootstrap',
-        'jquery'
-    ], function (
-        bootstrap,
-        $
-    ) {
+define ([
+    'bootstrap',
+    'jquery'
+], function (
+    bootstrap,
+    $
+) {
     'use strict';
 
     /**
@@ -17,7 +16,9 @@ define (
      *     body: jquery node
      *     buttons: array of jquery nodes
      *     closeButton: boolean, default false
-     *     enterToTrigger: boolean, default false
+     *     enterToTrigger: boolean, default false,
+     *     type: string, type of alert (from bootstrap text types: warning, error, etc.),
+     *     alertOnly: create as an "alert" with a single "Close" button in the footer
      * }
      */
     var BootstrapDialog = function (options) {
@@ -36,6 +37,14 @@ define (
         if (options.enterToTrigger) {
             this.enterToTrigger = options.enterToTrigger;
         }
+        if (options.alertOnly) {
+            options.closeButton = true;
+            options.buttons = [
+                $('<button type="button" class="btn btn-primary" data-dismiss="modal">')
+                    .text('Close')
+            ];
+            options.enterToTrigger = true;
+        }
 
         this.initialize(options);
     };
@@ -53,6 +62,9 @@ define (
         if (options.title) {
             this.setTitle(options.title);
         }
+        if (options.type) {
+            this.$headerTitle.addClass('text-' + options.type);
+        }
         if (options.body) {
             this.setBody(options.body);
         }
@@ -87,15 +99,14 @@ define (
         }
         if (this.enterToTrigger) {
             this.$modal
-            .off('keypress')
-            .on('keypress', (function(e) {
-                if (e.keyCode === 13) {
-                    e.stopPropagation();
-                    e.preventDefault();
-
-                    this.$footer.find('.btn:last').trigger('click');
-                }
-            }.bind(this)));
+                .off('keypress')
+                .on('keypress', (function(e) {
+                    if (e.keyCode === 13) {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        this.$footer.find('button:last').trigger('click');
+                    }
+                }.bind(this)));
         }
     };
 
diff --git a/kbase-extension/static/kbase/js/widgets/function_output/kbaseNarrativeError.js b/kbase-extension/static/kbase/js/widgets/function_output/kbaseNarrativeError.js
index 638f20c487..5bbc5c3463 100644
--- a/kbase-extension/static/kbase/js/widgets/function_output/kbaseNarrativeError.js
+++ b/kbase-extension/static/kbase/js/widgets/function_output/kbaseNarrativeError.js
@@ -2,7 +2,7 @@
  * A simple widget intended to format and display errors that come from
  * the narrative kernel (these are typically back-end errors that
  * occur while running the function). The cause of these errors will
- * probably be either errors with user inputs, or errors while 
+ * probably be either errors with user inputs, or errors while
  * communicating with the KBase API.
  *
  * @author Bill Riehl <wjriehl@lbl.gov>
@@ -18,32 +18,12 @@ define([
     bootstrap,
     $,
     kbaseAccordion
-    ) {
+) {
+    'use strict';
+
     return KBWidget({
-        /* 
-         * (required) Your widget should be named in CamelCase.
-         */
         name: 'kbaseNarrativeError',
-        /*
-         * Extending kbaseAuthenticatedWidget lets you use auth tokens
-         * semi-automatically, assuming the page this is used in fires
-         * the loggedIn.kbase, loggedOut.kbase, and loggedInQuery events.
-         * These are usually fired by the kbaseLogin widget.
-         *
-         * this.user_id() = the logged in user id
-         * this.authToken() = the current authentication token
-         */
-
-
-        /*
-         * (optional) Widgets should be semantically versioned.
-         * See http://semver.org
-         */
         version: '1.0.0',
-        /*
-         * (optional) Widgets are implied to include an options structure.
-         * It's useful to put default values here.
-         */
         options: {
             error: {
                 'msg': 'An error occurred',
@@ -54,13 +34,13 @@ define([
         },
         /**
          * (required) This is the only required function for a KBase Widget.
-         * @param {object} options - a structure containing the set of 
+         * @param {object} options - a structure containing the set of
          * options to be passed to this widget.
          * @private
          */
+
         init: function (options) {
             this._super(options);
-
             return this.render();
         },
         render: function () {
@@ -128,19 +108,16 @@ define([
                 .append($stackTraceAccordion);
 
             new kbaseAccordion($stackTraceAccordion, {
-                elements: [
-                    {
-                        title: 'Detailed Error Message',
-                        body: $('<pre>')
-                            .addClass('kb-err-msg')
-                            .append(esc(this.options.error.msg))
-                            .append(format_tb(this.options.error)),
-                    }
-                ]
+                elements: [{
+                    title: 'Detailed Error Message',
+                    body: $('<pre>')
+                        .addClass('kb-err-msg')
+                        .append(esc(this.options.error.msg))
+                        .append(format_tb(this.options.error)),
+                }]
             }
             );
-
             return this;
         },
     });
-});
\ No newline at end of file
+});
diff --git a/kbase-extension/static/kbase/js/widgets/function_output/kbaseReportView.js b/kbase-extension/static/kbase/js/widgets/function_output/kbaseReportView.js
index 197db52a95..f246ac1a97 100644
--- a/kbase-extension/static/kbase/js/widgets/function_output/kbaseReportView.js
+++ b/kbase-extension/static/kbase/js/widgets/function_output/kbaseReportView.js
@@ -19,7 +19,6 @@ define([
     'common/ui',
     'common/iframe/hostMessages',
     'common/events',
-    'util/bootstrapAlert',
 
     'jquery-dataTables',
     'jquery-dataTables-bootstrap'
@@ -38,8 +37,7 @@ define([
     ServiceUtils,
     UI,
     HostMessages,
-    Events,
-    Alert
+    Events
 ) {
     'use strict';
     return KBWidget({
diff --git a/kbase-extension/static/kbase/js/widgets/function_output/rna-seq/kbaseRNASeqPieNew.js b/kbase-extension/static/kbase/js/widgets/function_output/rna-seq/kbaseRNASeqPieNew.js
index 8d8e4cbd43..1105534c32 100644
--- a/kbase-extension/static/kbase/js/widgets/function_output/rna-seq/kbaseRNASeqPieNew.js
+++ b/kbase-extension/static/kbase/js/widgets/function_output/rna-seq/kbaseRNASeqPieNew.js
@@ -74,6 +74,7 @@ define (
             ],
             magicPieSize : 425,
             methodName : 'KBaseRNASeq/view_alignment_statistics',
+            upa: null,
         },
 
         value_for_wedge : function(val) {
@@ -328,6 +329,10 @@ define (
                   ws_params = { ref : this.options.ws_sample_id };
                 }
 
+                if (this.options.upas.output) {
+                    ws_params = { ref: this.options.upas.output };
+                }
+
                 ws.get_objects2({objects : [ws_params]}).then(function (d) {
                   $pie.options.output = d.data[0].data;
 
@@ -372,8 +377,8 @@ define (
 
         loadAlignment : function(ref) {
 
-          this.data('container').removeTab('Overview');
-          //this.data('container').removeTab('Pie chart');
+            this.data('container').removeTab('Overview');
+            //this.data('container').removeTab('Pie chart');
                 this.data('container').addTab(
                     {
                         tab : 'Overview',
@@ -381,7 +386,7 @@ define (
                     }
                 );
 
-          var $pie = this;
+            var $pie = this;
                 var ws = new Workspace(window.kbconfig.urls.workspace, {token : $pie.authToken()});
 
                 var ws_params = {
@@ -489,7 +494,7 @@ define (
                         }*/
                     ]
                 }
-            )
+            );
 
             this._rewireIds($containerElem, this);
             this.data('container', $container);
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js
index 41c38a00d4..eafc517296 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js
@@ -85,14 +85,14 @@ define([
 
             if (url) {
                 return a({
-                        href: url,
-                        target: '_blank',
-                        id: events.addEvent({
-                            type: 'click',
-                            handler: doShowInfoModal
-                        })
-                    },
-                    label || 'ref');
+                    href: url,
+                    target: '_blank',
+                    id: events.addEvent({
+                        type: 'click',
+                        handler: doShowInfoModal
+                    })
+                },
+                label || 'ref');
             }
             return '';
         }
@@ -372,19 +372,6 @@ define([
                             span({ class: 'fa fa-arrow-down fa-lg', style: 'xfont-size: 18px' })
                         ])),
                         renderOptions(cell, events),
-                        //                    button({
-                        //                        type: 'button',
-                        //                        class: 'btn btn-default btn-xs',
-                        //                        dataToggle: 'tooltip',
-                        //                        dataPlacement: 'left',
-                        //                        title: true,
-                        //                        dataOriginalTitle: 'Delete Cell',
-                        //                        id: events.addEvent({type: 'click', handler: doDeleteCell})
-                        //                    }, [
-                        //                        span({class: 'fa fa-times-circle', style: {fontSize: '14pt', color: 'red'}})
-                        //                    ]),
-                        // enable the following
-                        // function to add the min / max button
                         (function() {
                             var toggleMinMax = utils.getCellMeta(cell, 'kbase.cellState.toggleMinMax', 'maximized'),
                                 toggleIcon = (toggleMinMax === 'maximized' ? 'minus' : 'plus'),
@@ -426,10 +413,6 @@ define([
                                     dataElement: 'icon',
                                     class: 'icon',
                                     style: {
-                                        xposition: 'relative',
-                                        xtop: '0',
-                                        xleft: '0',
-                                        xdisplay: 'inline-block',
                                         flexShrink: '0',
                                         width: '56px',
                                         height: '56px',
@@ -441,7 +424,6 @@ define([
                                 div({ style: { flexGrow: '1' } }, [
                                     div({ dataElement: 'title', class: 'title', style: { lineHeight: '20px', height: '20px', marginTop: '8px', overflow: 'hidden' } }, [getCellTitle(cell)]),
                                     div({ dataElement: 'subtitle', class: 'subtitle', style: { lineHeight: '20px', height: '20px', overflow: 'hidden' } }, [getCellSubtitle(cell)])
-                                    // div({dataElement: 'info-link', class: 'info-link'}, [getCellInfoLink(cell, events)])
                                 ])
                             ])
                         ]),
@@ -451,10 +433,6 @@ define([
                         ])
                     ])
                 ]);
-            // if (Jupyter.narrative.readonly) {
-            //     $(content).find('.buttons-container').hide();
-            // }
-
             return {
                 events: events,
                 content: content
@@ -489,4 +467,4 @@ define([
             return factory(config);
         }
     };
-});
\ No newline at end of file
+});
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeAppPanel.js b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeAppPanel.js
index b3e5cabae6..fabca9ed99 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeAppPanel.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeAppPanel.js
@@ -28,7 +28,6 @@ define([
     'uuid',
     'narrative_core/catalog/kbaseCatalogBrowser',
     'kbase/js/widgets/narrative_core/kbaseAppCard',
-    'util/bootstrapAlert',
     'common/runtime',
     'kbaseNarrative',
     'catalog-client-api',
@@ -52,7 +51,6 @@ define([
     Uuid,
     KBaseCatalogBrowser,
     kbaseAppCard,
-    BootstrapAlert,
     Runtime
 ) {
     'use strict';
@@ -585,10 +583,11 @@ define([
          */
         triggerApp: function(app, tag, parameters) {
             if (Jupyter.narrative.narrController.uiModeIs('view')) {
-                new BootstrapAlert({
+                new BootstrapDialog({
                     type: 'warning',
                     title: 'Warning',
-                    body: 'Read-only Narrative -- you may not add apps to this Narrative'
+                    body: 'Read-only Narrative -- you may not add apps to this Narrative',
+                    alertOnly: true
                 });
                 // alert('Read-only Narrative -- may not add apps to this Narrative');
                 return;
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataCell.js b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataCell.js
index a303bdf8e3..90f5d85736 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataCell.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataCell.js
@@ -9,26 +9,25 @@
  */
 /*global define*/
 /*jslint white:true,browser:true*/
-define (
-	[
-		'kbwidget',
-		'bootstrap',
-		'jquery',
-		'underscore',
-		'narrativeConfig',
-		'narrativeViewers',
-		'kbaseNarrativeCell',
-        'kb_service/utils'
-	], function(
-		KBWidget,
-		bootstrap,
-		$,
-		_,
-		Config,
-		Viewers,
-		kbaseNarrativeCell,
-        ServiceUtils
-	) {
+define ([
+    'kbwidget',
+    'bootstrap',
+    'jquery',
+    'underscore',
+    'narrativeConfig',
+    'narrativeViewers',
+    'kbaseNarrativeCell',
+    'kb_service/utils'
+], function(
+    KBWidget,
+    bootstrap,
+    $,
+    _,
+    Config,
+    Viewers,
+    kbaseNarrativeCell,
+    ServiceUtils
+) {
     'use strict';
 
     /**
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataList.js b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataList.js
index b896b1e30c..7a65a73fde 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataList.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataList.js
@@ -25,7 +25,7 @@ define([
     'handlebars',
     'text!kbase/templates/data_list/object_row.html',
     'kb_service/utils',
-    'util/bootstrapAlert',
+    'util/bootstrapDialog',
     'kbase/js/widgets/narrative_core/kbaseDataCard',
     'bootstrap',
     'jquery-nearest'
@@ -48,7 +48,7 @@ define([
     Handlebars,
     ObjectRowHtml,
     ServiceUtils,
-    BootstrapAlert,
+    BootstrapDialog,
     kbaseDataCard
 ) {
     'use strict';
@@ -1212,10 +1212,11 @@ define([
             });
             targetDiv.addEventListener('drop', function (e) {
                 if (Jupyter.narrative.readonly) {
-                    new BootstrapAlert({
+                    new BootstrapDialog({
                         type: 'warning',
                         title: 'Warning',
-                        body: 'Read-only Narrative -- may not insert a data viewer into this Narrative'
+                        body: 'Read-only Narrative -- may not insert a data viewer into this Narrative',
+                        alertOnly: true
                     });
                     return;
                 }
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeJobStatus.js b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeJobStatus.js
index 501205e46f..55a0c6756e 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeJobStatus.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeJobStatus.js
@@ -25,7 +25,6 @@ define([
     'text!kbase/templates/job_status/log_panel.html',
     'text!kbase/templates/job_status/log_line.html',
     'text!kbase/templates/job_status/new_objects.html',
-    'util/bootstrapAlert',
 
     'css!kbase/css/kbaseJobLog.css',
     'bootstrap'
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeOutputCell.js b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeOutputCell.js
index 6835fb7acf..038cebdeec 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeOutputCell.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeOutputCell.js
@@ -1,17 +1,25 @@
-/*global define,require */
+/*global define,require, KBError */
 /*jslint white:true,browser:true*/
 define([
     'jquery',
     'bluebird',
     'kbwidget',
-    'base/js/namespace'
+    'base/js/namespace',
+    'util/timeFormat',
+    'narrativeConfig',
+    'kbase/js/widgets/narrative_core/objectCellHeader',
+    'api/upa'
 ], function (
     $,
     Promise,
     KBWidget,
-    Jupyter
-    ) {
-    "use strict";
+    Jupyter,
+    TimeFormat,
+    Config,
+    ObjectCellHeader,
+    UpaApi
+) {
+    'use strict';
     return KBWidget({
         name: 'kbaseNarrativeOutputCell',
         version: '1.0.0',
@@ -25,12 +33,43 @@ define([
             showMenu: true,
             lazyRender: true // used in init()
         },
+        isRendered: false,
         OUTPUT_ERROR_WIDGET: 'kbaseNarrativeError',
+        headerShown: false,
+
+        initMetadata: function () {
+            var baseMeta = {
+                kbase: {
+                    dataCell: {}
+                }
+            };
+            if (!this.cell) {
+                return baseMeta;
+            }
+            else {
+                var metadata = this.cell.metadata;
+                if (!metadata || !metadata.kbase) {
+                    metadata = baseMeta;
+                    this.cell.metadata = metadata;
+                }
+                if (!metadata.kbase.dataCell) {
+                    metadata.kbase.dataCell = {};
+                }
+                return metadata;
+            }
+        },
+
         init: function (options) {
+            // handle where options.widget == null.
+            options.widget = options.widget || this.options.widget;
+            // handle where options.widget == 'null' string. I know. It happens.
+            options.widget = options.widget === 'null' ? this.options.widget : options.widget;
             this._super(options);
+            this.upaApi = new UpaApi();
 
             this.data = this.options.data;
             this.options.type = this.options.type.toLowerCase();
+
             if (this.options.cellId) {
                 this.cell = Jupyter.narrative.getCellByKbaseId(this.options.cellId);
                 if (!this.cell) {
@@ -43,8 +82,11 @@ define([
                     this.cell.element.trigger('hideCodeArea.cell');
                 }
             }
-            if (this.options.widget.toLowerCase() === "null") {
-                this.options.widget = 'kbaseDefaultNarrativeOutput';
+
+            this.metadata = this.initMetadata();
+
+            if (this.cell) {
+                this.handleUpas();
             }
 
             /*
@@ -56,16 +98,17 @@ define([
              * XXX: Not sure whether "on every scroll event" is going to be
              * too heavy-weight a check once there are 100+ elements to worry about.
              */
-            if (this.options.lazyRender) {
-                this.is_rendered = false;
-                var nb_container = $('#notebook-container');
-                this.visible_settings = {
-                    container: nb_container,
-                    threshold: 100};
+            if (Config.get('features').lazyWidgetRender) {
+                var $nbContainer = $('#notebook-container');
+                this.visibleSettings = {
+                    container: $nbContainer,
+                    threshold: 100
+                };
                 this.lazyRender({data: this}); // try to render at first view
-                if (!this.is_rendered) {
+                if (!this.isRendered) {
                     // Not initially rendered, so add handler to re-check after scroll events
-                    nb_container.scroll(this, this.lazyRender);
+                    // $nbContainer.scroll(this, this.lazyRender);
+                    this.visibleSettings.container.scroll(this, this.lazyRender);
                 }
             }
             /* For testing/comparison, do eager-rendering instead */
@@ -75,94 +118,77 @@ define([
 
             return this;
         },
-        // Log debug message with cell id
-        cellDebug: function (msg) {
-            console.debug('cell ' + this.options.cellId + ': ' + msg);
-        },
-        // Return true if cell is visible on page, false otherwise
-        lazyVisible: function () {
-            return this.inviewport(this.$elem, this.visible_settings);
+
+        /**
+         * handle upas here! Needs to do the following:
+         * - check cell metadata. if no field present for upas, drop them in. if present, use
+         *   them instead.
+         *     - might need to double check key names. maybe a silly user repurposed/re-ran the
+         *       cell? Should try to get the Python stack to reset the metadata in that case.
+         *       Not sure if that's possible.
+         * - have cell header widget control which version of objects are seen.
+         *   - should auto-serialize on change
+         *   - should re-render widget as appropriate
+         * - Finally, all widgets should take upas as inputs. Enforce that here.
+         * - All widgets should have an 'upas' input that handles the mapping. Part of spec?
+         * - Need to start writing widget spec / standard. Share with Jim & Erik & Steve/Shane
+         *
+         * useLocal - forces the serialization to use only the locally defined upas
+         *            in this.upas, NOT the ones in the cell metadata.
+         */
+        handleUpas: function(useLocal) {
+            // if useLocal, then drop the current values in this.upas into the metadata.
+            // otherwise, if there's existing upas in metadata, supplant this.upas with those.
+            if (!this.metadata.kbase.dataCell.upas) {
+                // bail out silently if we don't have any upas, AND there's non in the cell meta.
+                // This likely means that we're dealing with a non-updated Narrative.
+                if (!this.options.upas) {
+                    return;
+                }
+                this.metadata.kbase.dataCell.upas = this.upaApi.serializeAll(this.options.upas);
+            }
+            else if (!useLocal && this.metadata.kbase.dataCell.upas) {
+                this.options.upas = this.upaApi.deserializeAll(this.metadata.kbase.dataCell.upas);
+            }
+            else {
+                this.metadata.kbase.dataCell.upas = this.upaApi.serializeAll(this.options.upas);
+            }
         },
+
         // Possibly render lazily not-yet-rendered cell
         lazyRender: function (event) {
             var self = event.data;
-            if (self.is_rendered) {
-                //self.cellDebug('already rendered');
+            if (self.isRendered) {
                 // Note: We could also see if a cell that is rendered, is now
                 // no longer visible, and somehow free its resources.
                 return;
             }
             // see if it is visible before trying to render
-            if (!self.lazyVisible()) {
-                //self.cellDebug('do not render cell. not visible');
+            if (!self.inViewport(self.$elem, self.visibleSettings)) {
                 return;
             }
             return self.render();
         },
-        // Render cell (unconditionally)
-        render: function () {
-            // render the cell
-            var icon;
-            switch (this.options.type) {
-                case 'method':
-                    this.renderMethodOutputCell();
-                    break;
-                case 'app':
-                    this.renderAppOutputCell();
-                    break;
-                case 'error':
-                    this.renderErrorOutputCell();
-                    break;
-                case 'viewer':
-                    this.renderViewerCell();
-                    break;
-                default:
-                    this.renderErrorOutputCell();
-                    break;
-            }
-            // remember; don't render again
-            this.is_rendered = true;
-        },
-        renderViewerCell: function () {
-            require(['kbaseNarrativeDataCell'], $.proxy(function () {
-                var $label = $('<span>').addClass('label label-info').append('Viewer');
-                this.renderCell('kb-cell-output', 'panel-default', 'kb-out-desc', $label, 'data viewer');
-                var $cell = this.$elem.closest('.cell');
-                $cell.trigger('set-icon.cell', ['<i class="fa fa-2x fa-table data-viewer-icon"></i>']);
-            }, this));
-        },
-        renderMethodOutputCell: function () {
-            var $label = $('<span>').addClass('label label-info').append('Output');
-            this.renderCell('kb-cell-output', 'panel-default', 'kb-out-desc', $label, 'app output');
-            var $cell = this.$elem.closest('.cell');
-            $cell.trigger('set-icon.cell', ['<i class="fa fa-2x fa-file-o method-output-icon"></i>']);
-        },
-        // same as method for now
-        renderAppOutputCell: function () {
-            var $label = $('<span>').addClass('label label-info').append('Output');
-            this.renderCell('kb-cell-output', 'panel-default', 'kb-out-desc', $label, 'app output');
-            var $cell = this.$elem.closest('.cell');
-            $cell.trigger('set-icon.cell', ['<i class="fa fa-2x fa-file-o app-output-icon"></i>']);
-        },
-        renderErrorOutputCell: function () {
-            require(['kbaseNarrativeError'], function () {
-                if (!this.options.title) {
-                    this.options.title = 'Narrative Error';
-                }
-                var $label = $('<span>').addClass('label label-danger').append('Error');
-                this.renderCell('kb-cell-error', 'panel-danger', 'kb-err-desc', $label);
-                var $cell = this.$elem.closest('.cell');
-                $cell.trigger('set-icon.cell', ['<i class="fa fa-2x fa-exclamation-triangle error-icon"></i>']);
-                $cell.addClass('kb-error');
-            }.bind(this));
+
+        /**
+         * Tests the current UPAs by testing to see if the user has permission to see them all.
+         * If they don't, then we shouldn't even bother to try showing the viewer, and instead
+         * show a permissions error instead.
+         */
+        testUpas: function() {
+            return {};
         },
-        renderCell: function (baseClass, panelClass, headerClass, $label, titleSuffix) {
+
+        render: function () {
             // set up the widget line
-            var widget = this.options.widget;
+            // todo find cell and trigger icon setting.
+
             var methodName = this.options.title ? this.options.title : 'Unknown App';
             var title = methodName;
-            if (titleSuffix) {
-                title += ' (' + titleSuffix + ')';
+
+            var upaTest = this.testUpas();
+            if (upaTest.error) {
+                this.renderError(upaTest.error);
             }
 
             if (this.cell) {
@@ -187,95 +213,107 @@ define([
                 this.cell.metadata = meta;
             }
 
-
-            var widgetData = this.options.data;
-            if (widget === 'kbaseDefaultNarrativeOutput')
-                widgetData = {data: this.options.data};
-
             this.$timestamp = $('<span>')
                 .addClass('pull-right kb-func-timestamp');
 
             if (this.options.time) {
                 this.$timestamp.append($('<span>')
-                    .append(this.readableTimestamp(this.options.time)));
+                    .append(TimeFormat.readableTimestamp(this.options.time)));
                 this.$elem.closest('.cell').find('.button_container').trigger('set-timestamp.toolbar', this.options.time);
             }
 
-            var $headerLabel = $('<span>')
-                .addClass('label label-info')
-                .append('Output');
-
-            var $headerInfo = $('<span>')
-                .addClass(headerClass)
-                .append($('<b>').append(methodName))
-                .append(this.$timestamp);
+            if (this.isRendered) {
+                // update the header
+                this.headerWidget.updateUpas(this.options.upas);
+            }
+            else {
+                if (this.$body) {
+                    this.$body.remove();
+                }
+                var $headController = $('<div>').hide();
+                this.headerWidget = new ObjectCellHeader($headController, {
+                    upas: this.options.upas,
+                    versionCallback: this.displayVersionChange.bind(this),
+                });
+                var $headerBtn = $('<button>')
+                    .addClass('btn btn-default kb-data-obj')
+                    .attr('type', 'button')
+                    .text('Details...')
+                    .click(function() {
+                        if (this.headerShown) {
+                            $headController.hide();
+                            this.headerShown = false;
+                        } else {
+                            $headController.show();
+                            this.headerShown = true;
+                        }
+                    }.bind(this));
+                this.$body = $('<div class="kb-cell-output-content">')
+                    .append($headController)
+                    .append($headerBtn);
+                this.$elem.append(this.$body);
+            }
 
-            var $body = $('<div class="kb-cell-output-content">');
+            return this.renderBody()
+                .then(function() {
+                    this.isRendered = true;
+                }.bind(this));
+        },
 
-            try {
-                new Promise(function (resolve, reject) {
-                    try {
-                        require([widget], resolve, reject);
-                    } catch (ex) {
-                        reject(ex);
-                    }
-                })
-                    .then(function (W) {
-                        // If we successfully Require the widget code, render it:
-                        this.$outWidget = new W($body, widgetData);
-                        // this.$outWidget = $body.find('.panel-body > div')[widget](widgetData);
-                        this.$elem.append($body);
-                    }.bind(this))
-                    .catch(function (err) {
-                        // If we fail, render the error widget and log the error.
-                        KBError("Output::" + this.options.title, "failed to render output widget: '" + widget);
-                        this.options.title = 'App Error';
-                        this.options.data = {
-                            error: {
-                                msg: 'An error occurred while showing your output:',
-                                method_name: 'kbaseNarrativeOutputCell.renderCell',
-                                type: 'Output',
-                                severity: '',
-                                traceback: err.stack
-                                //traceback: 'Failed while trying to show a "' + widget + '"\n' +
-                                //    'With inputs ' + JSON.stringify(widgetData) + '\n\n' +
-                                //    err.message
-                            }
-                        };
-                        this.options.widget = this.OUTPUT_ERROR_WIDGET;
-                        this.renderErrorOutputCell();
-                    }.bind(this));
+        renderBody: function() {
+            var self = this;
+            return new Promise(function(resolve) {
+                var widget = self.options.widget,
+                    widgetData = self.options.data;
+                if (widget === 'kbaseDefaultNarrativeOutput') {
+                    widgetData = { data: self.options.data };
+                }
+                widgetData.upas = self.options.upas;
 
-            } catch (err) {
-                KBError("Output::" + this.options.title, "failed to render output widget: '" + widget);
-                this.options.title = 'App Error';
-                this.options.data = {
-                    error: {
-                        msg: 'An error occurred while showing your output:',
-                        method_name: 'kbaseNarrativeOutputCell.renderCell',
-                        type: 'Output',
-                        severity: '',
-                        trace: err.trace
-                        //traceback: 'Failed while trying to show a "' + widget + '"\n' +
-                        //    'With inputs ' + JSON.stringify(widgetData) + '\n\n' +
-                        //    err.message
+                require([widget],
+                    function (W) {
+                        if (self.$widgetBody) {
+                            self.$widgetBody.remove();
+                        }
+                        self.$widgetBody = $('<div>');
+                        self.$body.append(self.$widgetBody);
+                        self.$outWidget = new W(self.$widgetBody, widgetData);
+                        resolve();
+                    },
+                    function (err) {
+                        return self.renderError(err);
                     }
-                };
-                this.options.widget = this.OUTPUT_ERROR_WIDGET;
-                this.renderErrorOutputCell();
+                );
+            });
+        },
 
-                // this.$outWidget = $body.find('.panel-body > div')[this.OUTPUT_ERROR_WIDGET]({'error': {
-                //     'msg': 'An error occurred while showing your output:',
-                //     'method_name': 'kbaseNarrativeOutputCell.renderCell',
-                //     'type': 'Output',
-                //     'severity': '',
-                //     'traceback': 'Failed while trying to show a "' + widget + '"\n' +
-                //                  'With inputs ' + JSON.stringify(widgetData) + '\n\n' +
-                //                  err.message
-                // }});
-            }
+        displayVersionChange: function(upaId, newVersion) {
+            /* Modify upa.
+             * Serialize.
+             * re-render all the things.
+             */
+            var newUpa = this.upaApi.changeUpaVersion(this.options.upas[upaId], newVersion);
+            this.options.upas[upaId] = newUpa;
+            this.handleUpas(true);
+            this.render();
+        },
 
+        renderError: function(err) {
+            // KBError('Output::' + this.options.title, 'failed to render output widget: "' + this.options.widget + '"');
+            this.options.title = 'App Error';
+            this.options.data = {
+                error: {
+                    msg: 'An error occurred while showing your output:',
+                    method_name: 'kbaseNarrativeOutputCell.renderCell',
+                    type: 'Output',
+                    severity: '',
+                    traceback: err.stack
+                }
+            };
+            this.options.widget = this.OUTPUT_ERROR_WIDGET;
+            return this.render();
         },
+
         getState: function () {
             var state = null;
             if (this.$outWidget && this.$outWidget.getState) {
@@ -283,49 +321,18 @@ define([
             }
             return state;
         },
+
         loadState: function (state) {
             if (state) {
                 if (state.time) {
-                    this.$timestamp.html(readableTimestamp(state.time));
+                    this.$timestamp.html(TimeFormat.readableTimestamp(state.time));
                 }
                 if (this.$outWidget && this.$outWidget.loadState) {
                     this.$outWidget.loadState(state);
                 }
             }
         },
-        /**
-         * Returns a timestamp in milliseconds since the epoch.
-         * (This is a one-liner, but kept as a separate function in case our needs change.
-         * Maybe we'll want to use UTC or whatever...)
-         * @public
-         */
-        getTimestamp: function () {
-            return new Date().getTime();
-        },
-        /**
-         * Converts a timestamp to a simple string.
-         * Do this American style - HH:MM:SS MM/DD/YYYY
-         *
-         * @param {string} timestamp - a timestamp in number of milliseconds since the epoch.
-         * @return {string} a human readable timestamp
-         */
-        readableTimestamp: function (timestamp) {
-            var format = function (x) {
-                if (x < 10)
-                    x = '0' + x;
-                return x;
-            };
-
-            var d = new Date(timestamp);
-            var hours = format(d.getHours());
-            var minutes = format(d.getMinutes());
-            var seconds = format(d.getSeconds());
-            var month = d.getMonth() + 1;
-            var day = format(d.getDate());
-            var year = d.getFullYear();
 
-            return hours + ":" + minutes + ":" + seconds + ", " + month + "/" + day + "/" + year;
-        },
         /* -------------------------------------------------------
          * Code modified from:
          * Lazy Load - jQuery plugin for lazy loading images
@@ -333,10 +340,13 @@ define([
          * Licensed under the MIT license
          * Project home: http://www.appelsiini.net/projects/lazyload
          */
-        inviewport: function (element, settings) {
+        inViewport: function (element, settings) {
+            if (!element || !settings) {
+                return true;
+            }
             var fold = settings.container.offset().top + settings.container.height(),
-                element_top = $(element).offset().top - settings.threshold;
-            return element_top <= fold; // test if it is "above the fold"
+                elementTop = $(element).offset().top - settings.threshold;
+            return elementTop <= fold; // test if it is "above the fold"
         }
         /* End of Lazy Load code.
          * ------------------------------------------------------- */
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/objectCellHeader.js b/kbase-extension/static/kbase/js/widgets/narrative_core/objectCellHeader.js
new file mode 100644
index 0000000000..9445e29ea2
--- /dev/null
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/objectCellHeader.js
@@ -0,0 +1,203 @@
+/**
+ * A widget for displaying some toggleable object info in a single div. This should communicate
+ * with a parent widget to optionally trigger changes. E.g., selecting a different version of
+ * an object to view should trigger that update in the controlling parent.
+ */
+define([
+    'jquery',
+    'bluebird',
+    'kbwidget',
+    'kb_service/client/workspace',
+    'common/runtime',
+    'util/timeFormat'
+], function(
+    $,
+    Promise,
+    KBWidget,
+    Workspace,
+    Runtime,
+    TimeFormat
+) {
+    'use strict';
+
+    return KBWidget({
+        name: 'objectCellHeader',
+        options: {
+            upas: {},   // key = some id string, value = either string (single upa) or array (many)
+            versionCallback: null,
+            primaryUpaId: null // main key in the upas object
+        },
+        objectInfo: {},
+
+        init: function(options) {
+            options.upas = options.upas || {};
+            this._super(options);
+            var runtime = Runtime.make();
+            this.workspace = new Workspace(runtime.config('services.workspace.url'), {
+                token: runtime.authToken()
+            });
+            this.fetchObjectInfo();
+        },
+
+        updateUpas: function(upas) {
+            this.options.upas = upas;
+            this.fetchObjectInfo();
+        },
+
+        /**
+         * Fetches general info about all UPAs in options.upas.
+         * Stores this info in a map from upa->info (this.objectInfo)
+         */
+        fetchObjectInfo: function() {
+            // parse upas dict into a list.
+            var self = this;
+            self.objectInfo = {};
+            Object.keys(self.options.upas).forEach(function(key) {
+                var upa = self.options.upas[key];
+                if (typeof upa === 'string') {
+                    self.objectInfo[upa] = {};
+                }
+                else if (Array.isArray(upa)) {
+                    upa.forEach(function(subUpa) {
+                        self.options.upas[subUpa] = {};
+                    });
+                }
+            });
+
+            // prep workspace call.
+            var wsInfoCall = [];
+            Object.keys(self.objectInfo).forEach(function(upa) {
+                wsInfoCall.push({'ref': upa});
+            });
+
+            var allPromises = [];
+            // do ws call.
+            var objInfoProm = self.workspace.get_object_info_new({'objects': wsInfoCall})
+                .then(function(infos) {
+                    wsInfoCall.forEach(function(upaRef, idx) {
+                        self.objectInfo[upaRef.ref].info = infos[idx];
+                    });
+                });
+            allPromises.push(objInfoProm);
+
+            wsInfoCall.forEach(function(upaRef) {
+                if (upaRef.ref.indexOf(';') === -1) {
+                    var histPromise = self.workspace.get_object_history(upaRef)
+                        .then(function(history) {
+                            self.objectInfo[upaRef.ref].history = history;
+                        });
+                    allPromises.push(histPromise);
+                }
+            });
+            Promise.all(allPromises)
+                .then(function() {
+                    self.render();
+                })
+                .catch(function(error) {
+                    // console.error(error);
+                });
+        },
+
+        buildObjectInfo: function(upa) {
+            var $info = $('<div>');
+            if (!this.objectInfo[upa]) {
+                return $info;
+            }
+            var objInfo = this.objectInfo[upa].info;
+
+            var addField = function(key, value) {
+                $info.append($('<div><span>' + key + '</span>: <span>' + value + '</span></div>'));
+            };
+
+            // var keys = ['id', 'name', 'type', 'saved', 'version', 'owner', 'wsid', 'wsname', 'checksum', 'size', 'metadata'];
+            // var keyIds = [1, 2, 3, ]
+            // permanent id <link to LP>
+            // name
+            // type
+            // version
+            // saved <date> by <user>
+            // size?
+
+            addField('Permanent id', upa);
+            addField('Name', objInfo[1]);
+            addField('Type', objInfo[2]);
+            addField('Version', objInfo[4]);
+            addField('Saved', TimeFormat.readableTimestamp(objInfo[3]) + ' by ' + objInfo[5]);
+            // addField('Size', StringUtil.readableBytes(objInfo[9]));
+
+            return $info;
+        },
+
+        buildVersionToggle: function(upaId) {
+            var upa = this.options.upas[upaId];
+            if (!upa || !this.objectInfo[upa] || !this.objectInfo[upa].history) {
+                return $('<div>Other object versions unavailable!</div>');
+            }
+            var $versions = $('<div>');
+            var curVersion = this.objectInfo[upa].info[4];
+            var totalVersions = this.objectInfo[upa].history.length;
+            $versions.append('<div>version ' + curVersion + ' of ' + totalVersions + '</div>');
+
+            var $backBtn = $('<button>')
+                .addClass('btn btn-default kb-data-obj disabled')
+                .append($('<span>').addClass('fa fa-arrow-left'))
+                .click(function() {
+                    // move back version
+                    if (curVersion > 1) {
+                        this.options.versionCallback(upaId, curVersion-1);
+                    }
+                }.bind(this));
+            if (curVersion > 1) {
+                $backBtn.removeClass('disabled');
+            }
+
+            var $fwdBtn = $('<button>')
+                .addClass('btn btn-default kb-data-obj disabled')
+                .append($('<span>').addClass('fa fa-arrow-right'))
+                .click(function() {
+                    if (curVersion < totalVersions) {
+                        this.options.versionCallback(upaId, curVersion+1);
+                    }
+                }.bind(this));
+            if (curVersion < totalVersions) {
+                $fwdBtn.removeClass('disabled');
+            }
+
+            $versions.append(
+                $('<div>').append($fwdBtn).append($backBtn)
+            );
+            return $versions;
+        },
+
+        detach: function() {
+            // remove events from buttons.
+            this.$elem.find('button').off('click');
+        },
+
+        render: function() {
+            var mainUpa = null,
+                mainUpaId = null,
+                numUpas = Object.keys(this.objectInfo).length;
+            if (this.options.primaryUpaId) {
+                mainUpaId = this.options.primaryUpaId;
+            } else if (numUpas === 1) {
+                mainUpaId = Object.keys(this.options.upas)[0];
+            }
+            mainUpa = this.options.upas[mainUpaId];
+            var $body = $('<div style="display:flex; flex-direction:row; justify-content: space-between">'),
+                $info;
+            if (mainUpa) {
+                $info = this.buildObjectInfo(mainUpa);
+            }
+            else {
+                $info = $('<div>Lots of info available for ' + numUpas + ' object on display!</div>');
+            }
+
+            var $versionToggle = this.buildVersionToggle(mainUpaId);
+
+            $body.append($info)
+                .append($versionToggle);
+            this.$elem.empty().append($body);
+        }
+    });
+});
diff --git a/scripts/narrative_backend_tests.sh b/scripts/narrative_backend_tests.sh
index 6026fae527..8468ef144d 100755
--- a/scripts/narrative_backend_tests.sh
+++ b/scripts/narrative_backend_tests.sh
@@ -1,3 +1,3 @@
 #!/bin/sh
 export NARRATIVE_DIR=$(pwd)
-python -m nose $@ --with-coverage --cover-html --cover-package=biokbase.narrative src/biokbase/narrative/tests/
+python -m nose $@ --with-coverage --cover-html --cover-package=biokbase.narrative src/biokbase/narrative/tests
diff --git a/src/biokbase/narrative/app_util.py b/src/biokbase/narrative/app_util.py
index 06633af2f4..affe69fe27 100644
--- a/src/biokbase/narrative/app_util.py
+++ b/src/biokbase/narrative/app_util.py
@@ -2,6 +2,7 @@
 import re
 import json
 import biokbase.narrative.clients as clients
+import biokbase.auth
 
 """
 Some utility functions for running KBase Apps or Methods or whatever they are this week.
@@ -51,16 +52,20 @@ def system_variable(var):
         except:
             return None
     elif var == 'token':
-        return os.environ.get('KB_AUTH_TOKEN', None)
+        token = biokbase.auth.get_auth_token()
+        if token == 'none':
+            return None
+        return token
     elif var == 'user_id':
-        token = os.environ.get('KB_AUTH_TOKEN', None)
+        token = biokbase.auth.get_auth_token()
         if token is None:
             return None
-        m = re.match("un=(\w+)|", token)
-        if m is not None and len(m.groups()) == 1:
-            return m.group(1)
-        else:
+        try:
+            user_info = biokbase.auth.get_user_info(token)
+            return user_info.get('user', None)
+        except:
             return None
+        # TODO: make this better with more exception handling.
     else:
         return None
 
@@ -667,6 +672,7 @@ def resolve_single_ref(workspace, value):
         ret = "{}/{}/{}".format(info[6], info[0], info[4])
     return ret
 
+
 def resolve_ref(workspace, value):
     if isinstance(value, list):
         return [resolve_single_ref(workspace, v) for v in value]
@@ -674,7 +680,6 @@ def resolve_ref(workspace, value):
         return resolve_single_ref(workspace, value)
 
 
-
 def resolve_ref_if_typed(value, spec_param):
     """
     For a given value and associated spec, if this is not an output param,
diff --git a/src/biokbase/narrative/tests/narrative_mock/mockclients.py b/src/biokbase/narrative/tests/narrative_mock/mockclients.py
index e7424dd726..882363abdb 100644
--- a/src/biokbase/narrative/tests/narrative_mock/mockclients.py
+++ b/src/biokbase/narrative/tests/narrative_mock/mockclients.py
@@ -47,6 +47,17 @@ def get_object_info_new(self, params):
         ret_val = infos * len(params.get('objects', [0]))
         return ret_val
 
+    def get_object_info3(self, params):
+        infos = [[5, u'Sbicolor2', u'KBaseGenomes.Genome-12.3', u'2017-03-31T23:42:59+0000', 1,
+                  u'wjriehl', 18836, u'wjriehl:1490995018528', u'278abf8f0dbf8ab5ce349598a8674a6e',
+                  109180038, None]]
+        paths = [['18836/5/1']]
+        num_objects = len(params.get('objects', [0]))
+        return {
+            'infos': infos * num_objects,
+            'paths': paths * num_objects
+        }
+
     # ----- Narrative Job Service functions -----
 
     def run_job(self, params):
diff --git a/src/biokbase/narrative/tests/test_app_util.py b/src/biokbase/narrative/tests/test_app_util.py
index b7559a0114..9998a74acf 100644
--- a/src/biokbase/narrative/tests/test_app_util.py
+++ b/src/biokbase/narrative/tests/test_app_util.py
@@ -2,6 +2,7 @@
 Tests for the app_util module
 """
 import unittest
+import biokbase.auth
 from biokbase.narrative.app_util import (
     check_tag,
     system_variable,
@@ -12,6 +13,7 @@
 from narrative_mock.mockclients import get_mock_client
 import os
 import mock
+import util
 
 __author__ = 'Bill Riehl <wjriehl@lbl.gov>'
 
@@ -24,12 +26,15 @@ def get_workspace_info(*args, **kwargs):
 class AppUtilTestCase(unittest.TestCase):
     @classmethod
     def setUpClass(self):
+        config = util.TestConfig()
+        self.user_id = config.get('users', 'test_user')
+        self.user_token = util.read_token_file(config.get_path('token_files', 'test_user', from_root=True))
+
         self.good_tag = "release"
         self.bad_tag = "notATag"
-
         # inject phony variables into the environment
-        self.user_id = "KBaseTest"
-        self.good_fake_token = "un={}|tokenid=12345|expiry=1592895594|client_id={}|token_type=bearer|SigningSubject=whaaaaaaaaaaat".format(self.user_id, self.user_id)
+        # self.user_id = "KBaseTest"
+        # self.good_fake_token = "A1B2C3D4E5F6G7H8I9J0K1L2M3N4O5P6"
         self.bad_fake_token = "NotAGoodTokenLOL"
         self.workspace = "valid_workspace"
 
@@ -44,8 +49,9 @@ def test_check_tag_bad_except(self):
             check_tag(self.bad_tag, raise_exception=True)
 
     def test_sys_var_user(self):
-        os.environ['KB_AUTH_TOKEN'] = self.good_fake_token
-        self.assertEquals(system_variable('user_id'), self.user_id)
+        if (self.user_token):
+            biokbase.auth.set_environ_token(self.user_token)
+            self.assertEquals(system_variable('user_id'), self.user_id)
 
     def test_sys_var_no_ws(self):
         if 'KB_WORKSPACE_ID' in os.environ:
@@ -57,8 +63,9 @@ def test_sys_var_workspace(self):
         self.assertEquals(system_variable('workspace'), self.workspace)
 
     def test_sys_var_token(self):
-        os.environ['KB_AUTH_TOKEN'] = self.good_fake_token
-        self.assertEquals(system_variable('token'), self.good_fake_token)
+        if (self.user_token):
+            biokbase.auth.set_environ_token(self.user_token)
+        self.assertEquals(system_variable('token'), self.user_token)
 
     def test_sys_var_no_ws_id(self):
         if 'KB_WORKSPACE_ID' in os.environ:
@@ -81,7 +88,7 @@ def test_sys_var_bad_token(self):
         self.assertIsNone(system_variable('token'))
 
     def test_sys_var_user_bad(self):
-        os.environ['KB_AUTH_TOKEN'] = self.bad_fake_token
+        biokbase.auth.set_environ_token(self.bad_fake_token)
         self.assertIsNone(system_variable('user_id'))
 
     def test_sys_var_user_none(self):
diff --git a/src/biokbase/narrative/tests/test_widgetmanager.py b/src/biokbase/narrative/tests/test_widgetmanager.py
index 53e5b6e7fd..fbb0ecca0f 100644
--- a/src/biokbase/narrative/tests/test_widgetmanager.py
+++ b/src/biokbase/narrative/tests/test_widgetmanager.py
@@ -5,6 +5,7 @@
 import mock
 import os
 from util import TestConfig
+from narrative_mock.mockclients import get_mock_client
 
 """
 Tests for the WidgetManager class
@@ -14,19 +15,13 @@
 
 class WidgetManagerTestCase(unittest.TestCase):
     @classmethod
-    @mock.patch('biokbase.narrative.widgetmanager.SpecManager')
-    def setUpClass(self, mock_sm):
+    def setUpClass(self):
         config = TestConfig()
         os.environ['KB_WORKSPACE_ID'] = '12345'  # That's the same workspace as my luggage!
-        specs_list = config.load_json_file(config.get('specs', 'app_specs_file'))
-        specs_dict = dict()
-        for s in specs_list:
-            specs_dict[s['info']['id']] = s
-        mock_sm.return_value.app_specs = {
-            'release': specs_dict,
-            'beta': specs_dict,
-            'dev': specs_dict
-        }
+        app_specs_list = config.load_json_file(config.get('specs', 'app_specs_file'))
+        app_specs_dict = dict()
+        for s in app_specs_list:
+            app_specs_dict[s['info']['id']] = s
         self.wm = WidgetManager()
         self.good_widget = "kbaseTabTable"
         self.bad_widget = "notAWidget"
@@ -58,14 +53,20 @@ def test_show_output_widget(self):
         self.assertIsInstance(
             self.wm.show_output_widget(
                 self.good_widget,
-                {'obj': 'TestObject'}
+                {'obj': 'TestObject'},
+                upas={'obj': '1/2/3'}
             ),
             IPython.core.display.Javascript
         )
 
     def test_show_output_widget_bad(self):
         with self.assertRaises(ValueError):
-            self.wm.show_output_widget(self.bad_widget, {'bad': 'inputs'}, check_widget=True)
+            self.wm.show_output_widget(
+                self.bad_widget,
+                {'bad': 'inputs'},
+                upas={'bad': '1/2/3'},
+                check_widget=True
+            )
 
     def test_show_external_widget(self):
         widget = self.wm.show_external_widget(
@@ -81,5 +82,57 @@ def test_show_external_widget_list(self):
                                               auth_required=True)
         self.assertIsInstance(widget, IPython.core.display.Javascript)
 
+    @mock.patch('biokbase.narrative.widgetmanager.clients.get', get_mock_client)
+    def test_show_data_cell(self):
+        """
+        Tests - should do the following:
+            def show_data_widget(self, upa, title=None, cell_id=None, tag="release"):
+        fail message with no upa
+        fail message with malformed upa
+        shouldn't care what title or cell_id are, but should test to make sure they wind up in
+            output code properly
+        fail if type spec'd app isn't present for some tag
+        otherwise, succeed and produce JS code.
+
+        test mocks.
+        """
+        js_obj = self.wm.show_data_widget("18836/5/1", "some title", "no_id")
+        print(js_obj.data)
+        self.assertIsValidCellCode(js_obj, {}, "viewer", "kbaseGenomeView", "no_id", "some title")
+
+    @mock.patch('biokbase.narrative.widgetmanager.clients.get', get_mock_client)
+    def test_infer_upas(self):
+        test_result_upa = "18836/5/1"
+        upas = self.wm.infer_upas("testCrazyExample", {
+            "obj_id1": 1,
+            "obj_id2": 2,
+            "obj_name1": "foo",
+            "obj_name2": "bar",
+            "obj_names": ["a", "b", "c"],
+            "obj_ref1": "1/2/3",
+            "obj_ref2": "4/5/6",
+            "obj_refs": ["7/8/9", "0/1/2"],
+            "ws_name": "some_ws",
+            "extra_param": "extra_value",
+            "other_extra_param": 0
+        })
+        self.assertEquals(upas['obj_id1'], test_result_upa)
+        self.assertEquals(upas['obj_id2'], test_result_upa)
+        self.assertEquals(upas['obj_name1'], test_result_upa)
+        self.assertEquals(upas['obj_name2'], test_result_upa)
+        self.assertEquals(upas['obj_names'], [test_result_upa]*3)
+        self.assertEquals(upas['obj_ref1'], "1/2/3")
+        self.assertEquals(upas['obj_ref2'], "4/5/6")
+        self.assertEquals(upas['obj_refs'], [test_result_upa]*2)
+        self.assertEquals(len(upas.keys()), 8)
+
+    def assertIsValidCellCode(self, js_obj, data, type, widget, cellId, title):
+        code_lines = js_obj.data.strip().split('\n')
+        self.assertTrue(code_lines[0].strip().startswith('element.html("<div id=\'kb-vis'))
+        self.assertEquals(code_lines[1].strip(), "require(['kbaseNarrativeOutputCell'], function(KBaseNarrativeOutputCell) {")
+        self.assertTrue(code_lines[2].strip().startswith(r"var w = new KBaseNarrativeOutputCell($('#kb-vis"))
+
+
+
 if __name__ == '__main__':
     unittest.main()
diff --git a/src/biokbase/narrative/upa.py b/src/biokbase/narrative/upa.py
index 94923b43e3..70bd49b0f2 100644
--- a/src/biokbase/narrative/upa.py
+++ b/src/biokbase/narrative/upa.py
@@ -17,8 +17,31 @@ def is_upa(upa):
     return re.match("^\d+(\/\d+){2}(;\d+(\/\d+){2})*$", upa) is not None
 
 
+def is_ref(ref):
+    """
+    Returns True if the given string is a reference or upa, False otherwise.
+    That is, if it has this structure:
+    blahblah/blahblah
+    or
+    1/2
+    or
+    1/2/3
+    or
+    blahblah/blahblah/1
+    """
+    if is_upa(ref):
+        return True
+    else:
+        split_path = ref.split(";")
+        for sub_ref in split_path:
+            c = sub_ref.count("/")
+            if c < 2 or c > 3:
+                return False
+        return True
+
+
 def _prepare_upa_serialization(upa):
-    if type(upa) is list:
+    if isinstance(upa, list):
         upa = ";".join(upa)
     if not is_upa(upa):
         raise ValueError('"{}" is not a valid UPA. It may have already been serialized.'
@@ -71,7 +94,7 @@ def deserialize(serial_upa):
     In the [ws] case, the current workspace id replaces that whole token. In the &ws case,
     the & tag is removed.
     """
-    if type(serial_upa) is not str:
+    if not isinstance(serial_upa, basestring):
         raise ValueError("Can only deserialize UPAs from strings.")
     if serial_upa.startswith(external_tag):
         deserial = serial_upa[len(external_tag):]
diff --git a/src/biokbase/narrative/widgetmanager.py b/src/biokbase/narrative/widgetmanager.py
index ce27f40001..c48696424d 100644
--- a/src/biokbase/narrative/widgetmanager.py
+++ b/src/biokbase/narrative/widgetmanager.py
@@ -1,21 +1,23 @@
 from __future__ import print_function
-from biokbase.narrative.app_util import (
-    check_tag,
-    system_variable
-)
-from IPython.core.magic import register_line_magic
 import os
-import re
 import json
-from IPython.display import Javascript
-from jinja2 import Template
 import uuid
 import time
-from pprint import pprint
+from IPython.display import Javascript
+from jinja2 import Template
 from biokbase.narrative.jobs.specmanager import SpecManager
 import biokbase.narrative.clients as clients
-from biokbase.narrative.app_util import map_outputs_from_state
-from biokbase.narrative.app_util import validate_parameters
+from biokbase.narrative.app_util import (
+    map_outputs_from_state,
+    validate_parameters,
+    check_tag,
+    system_variable
+)
+from upa import (
+    is_upa,
+    is_ref
+)
+
 """
 widgetmanager.py
 
@@ -25,7 +27,6 @@
 __author__ = 'Bill Riehl <wjriehl@lbl.gov>'
 
 
-
 class WidgetManager(object):
     """
     Manages data (and other) visualization widgets for use in the KBase Narrative.
@@ -59,6 +60,12 @@ class WidgetManager(object):
 
     def __init__(self):
         self._sm = SpecManager()
+        try:
+            nar_path = os.environ["NARRATIVE_DIR"]
+            widget_param_file = open(os.path.join(nar_path, "src", "widget_param_mapping.json"))
+            self.widget_param_map = json.loads(widget_param_file.read())
+        except:
+            self.widget_param_map = dict()
         self.reload_info()
 
     def reload_info(self):
@@ -277,7 +284,7 @@ def get_widget_constants(self, widget_name, tag="release"):
                     constants[p] = params[p]["allowed_values"][0]
         return constants
 
-    def show_output_widget(self, widget_name, params, tag="release", title="", type="method", cell_id=None, check_widget=False, **kwargs):
+    def show_output_widget(self, widget_name, params, upas=None, tag="release", title="", type="method", cell_id=None, check_widget=False, **kwargs):
         """
         Renders a widget using the generic kbaseNarrativeOutputWidget container.
 
@@ -295,6 +302,8 @@ def show_output_widget(self, widget_name, params, tag="release", title="", type=
             If True, checks for the presense of the widget_name and get its known constants from
             the various app specs that invoke it. Raises a ValueError if the widget isn't found.
             If False, skip that step.
+        upas : dict -- REQUIRED! but left as a kwarg for backwards compatibility
+            The set of UPAs to be displayed in the output widget
         **kwargs:
             These vary, based on the widget. Look up required variable names
             with WidgetManager.print_widget_inputs()
@@ -314,16 +323,24 @@ def show_output_widget(self, widget_name, params, tag="release", title="", type=
         if cell_id is not None:
             cell_id = "\"{}\"".format(cell_id)
 
+        if upas is None:
+            # infer what it is based on mapping and inputs
+            try:
+                upas = self.infer_upas(widget_name, input_data)
+            except:
+                raise
+
         input_template = """
         element.html("<div id='{{input_id}}' class='kb-vis-area'></div>");
         require(['kbaseNarrativeOutputCell'], function(KBaseNarrativeOutputCell) {
             var w = new KBaseNarrativeOutputCell($('#{{input_id}}'), {
+                "upas": {{upas}},
                 "data": {{input_data}},
-                "type":"{{output_type}}",
-                "widget":"{{widget_name}}",
-                "cellId":{{cell_id}},
-                "title":"{{cell_title}}",
-                "time":{{timestamp}}
+                "type": "{{output_type}}",
+                "widget": "{{widget_name}}",
+                "cellId": {{cell_id}},
+                "title": "{{cell_title}}",
+                "time": {{timestamp}}
             });
         });
         """
@@ -331,13 +348,139 @@ def show_output_widget(self, widget_name, params, tag="release", title="", type=
         js = Template(input_template).render(input_id=self._cell_id_prefix + str(uuid.uuid4()),
                                              output_type=type,
                                              widget_name=widget_name,
+                                             upas=json.dumps(upas),
                                              input_data=json.dumps(input_data),
                                              cell_title=title,
                                              cell_id=cell_id,
                                              timestamp=int(round(time.time()*1000)))
         return Javascript(data=js, lib=None, css=None)
 
-    def show_advanced_viewer_widget(self, widget_name, params, output_state, tag="release", title="", type="method", cell_id=None, check_widget=False, **kwargs):
+    def infer_upas(self, widget_name, params):
+        """
+        Use the given widget_name and parameters (to be passed to the widget) to infer any upas.
+        This will generally mean using the workspace object name and workspace name to do a
+        lookup in the Workspace and constructing the upa or upa path from there.
+
+        widget_name - string - Name of the widget to be used, this gets looked up in the widget
+                    param map. This maps all widget input parameters onto some sensible language.
+        params - dict - keys = id of parameter, values = value of parameter.
+
+        So the general flow is something like this. We go through all parameters, see what context
+        those map on to, and infer, from that, what are the workspace objects. We can then look up
+        those objects by the workspace and object name, and use the info to construct UPAs.
+
+        Example: wm.infer_upas("kbasePanGenome", { "ws": "my_workspace", "name": "my_pangenome" })
+        The widget parameter map has this entry:
+        "kbasePanGenome": {
+            "ws": "ws_name",
+            "name": "obj_name"
+        }
+        So we know, by inference, that "my_workspace" is a workspace name, and "my_pangenome" is an
+        object name.
+
+        We can use this info to look up the object info from the Workspace, let's say it's 3/4/5.
+        This then gets returned as another dict:
+        {
+            "name": "3/4/5"
+        }
+
+        This applies for lists, too. If, above, the value for the "name" parameter was a list of
+        strings, this would treat all of those as objects, and try to return a list of UPAs instead.
+        """
+        param_to_context = self.widget_param_map.get(widget_name, {})
+        obj_names = list()  # list of tuples - first = param id, second = object name
+        obj_refs = list()   # list of tuples - first = param id, second = UPA
+        obj_name_list = list()  # list of tuples, but the second is a list of names
+        obj_ref_list = list()   # list of tuples, but second is a list of upas
+        ws = None
+        for param in params.keys():
+            if param in param_to_context:
+                context = param_to_context[param]
+                if context == "ws_id" or context == "ws_name":
+                    ws = params[param]
+                elif context == "obj_name" or context == "obj_id":
+                    obj_names.append((param, params[param]))
+                elif context == "obj_name_list":
+                    obj_name_list.append((param, params[param]))
+                elif context == "obj_ref":
+                    obj_refs.append((param, params[param]))
+                elif context == "obj_ref_list":
+                    obj_ref_list.append((param, params[param]))
+
+        # return value will look like this:
+        # {
+        #   param1: upa,
+        #   param2: upa
+        #   param3: [upa1, upa2],
+        #   ... etc
+        # }
+        upas = dict()
+
+        # First, test obj_refs, and obj_refs_list
+        # These might be references of the form ws_name/obj_name, which are not proper UPAs and
+        # need to be resolved. Gotta test 'em all.
+        lookup_params = list()
+        info_params = list()
+
+        for (param, ref) in obj_refs:
+            if is_upa(str(ref)):
+                upas[param] = ref
+            elif is_ref(str(ref)):
+                info_params.append({"ref": ref})
+                lookup_params.append(param)
+            else:
+                raise ValueError('Parameter {} has value {} which was expected to refer to an object'.format(param, ref))
+
+        # params for get_object_info3
+        for (param, name) in obj_names:
+            # it's possible that these are misnamed and are actually upas already. test and add to
+            # the upas dictionary if so.
+            if is_upa(str(name)):
+                upas[param] = name
+            elif is_ref(str(name)):
+                info_params.append({"ref": name})
+                lookup_params.append(param)
+            else:
+                info_params.append({"ref": "{}/{}".format(ws, name)})
+                lookup_params.append(param)
+
+        ws_client = clients.get('workspace')
+        ws_info = ws_client.get_object_info3({'objects': info_params})
+        for (idx, path) in enumerate(ws_info['paths']):
+            upas[lookup_params[idx]] = ';'.join(path)
+
+        # obj_refs and obj_names are done. Do the list versions now.
+        lookup_params = list()
+        info_params = list()
+        for (param, ref_list) in obj_ref_list:
+            # error fast if any member of a list isn't actually a ref.
+            # this might be me being lazy, but I suspect there's a problem if the inputs aren't
+            # actually uniform.
+            for ref in ref_list:
+                if not is_ref(str(ref)):
+                    raise ValueError('Parameter {} has value {} which contains an item that is not a valid object reference'.format(param, ref_list))
+            lookup_params.append(param)
+            info_params.append([{'ref': ref} for ref in ref_list])
+
+        for (param, name_list) in obj_name_list:
+            info_param = list()
+            for name in name_list:
+                if is_ref(str(name)):
+                    info_param.append({'ref': name})
+                else:
+                    info_param.append({'ref': "{}/{}".format(ws, name)})
+            info_params.append(info_param)
+            lookup_params.append(param)
+
+        # This time we have a one->many mapping from params to each list. Run ws lookup in a loop
+        for (idx, param) in enumerate(lookup_params):
+            ws_info = ws_client.get_object_info3({'objects': info_params[idx]})
+            upas[param] = [';'.join(path) for path in ws_info['paths']]
+        return upas
+
+    def show_advanced_viewer_widget(self, widget_name, params, output_state, tag="release",
+                                    title="", type="method", cell_id=None, check_widget=False,
+                                    **kwargs):
         """
         Renders a widget using the generic kbaseNarrativeOutputWidget container.
 
@@ -398,80 +541,95 @@ def show_advanced_viewer_widget(self, widget_name, params, output_state, tag="re
                                              timestamp=int(round(time.time()*1000)))
         return Javascript(data=js, lib=None, css=None)
 
-
-    def show_data_widget(self, ref, title="", cell_id=None, tag="release"):
+    def show_data_widget(self, upa, title=None, cell_id=None, tag="release"):
         """
-        Renders a widget using the generic kbaseNarrativeOutputWidget container.
+        Renders a widget using the generic kbaseNarrativeOutputCell container.
+        First, it looks up the UPA to get its object type. It then uses that type to look up
+        what the viewer app should be. This contains the widget and the parameter mapping to view
+        that widget. It then maps all of these together to run show_output_widget against a widget
+        with a set of parameters for it.
+
+        If there's an error here at any step, it still renders a widget, but it makes a
+        kbaseNarrativeError widget instead, that'll hopefully be informative.
 
         Parameters
         ----------
-        ref : string
-            Reference to object turning into parameters that get fed into the widget.
-            This reference may include ref-path.
+        upa : string
+            UPA defining a workspace object. Used to translate that object into parameters
+            for the mapping to the data object used in the output cell.
+            This may also be a Workspace reference path.
+        title=None : string
+            A title for the cell. If None, this just gets replaced with an empty string.
+        cell_id=None : string
+            if not None, this should be the id of the cell where the widget will live. Generated by
+            the Narrative frontend.
+        tag="release" : string
+            All objects are related to their viewers by an app. This is the tag for that app's
+            release state (should be one of release, beta, or dev)
         """
-
-        widget_name = "kbaseNarrativeDataCell"
-        input_data = dict()
-        info_tuple = clients.get('workspace').get_object_info_new({'objects': [{'ref': ref}],
+        widget_name = 'kbaseNarrativeError'  # default, expecting things to bomb.
+        widget_data = dict()
+        upas = dict()
+        info_tuple = clients.get('workspace').get_object_info_new({'objects': [{'ref': upa}],
                                                                    'includeMetadata': 1})[0]
-        input_data['info_tuple'] = info_tuple
-
         bare_type = info_tuple[2].split('-')[0]
 
         type_spec = self._sm.get_type_spec(bare_type, raise_exception=False)
+
         if type_spec is None:
-            input_data['error_message'] = "Type-spec wasn't found for '" + bare_type + "'"
-        elif 'view_method_ids' not in type_spec or len(type_spec['view_method_ids']) != 1:
-            input_data['error_message'] = ("Type-spec for '" + bare_type + "' should " +
-                                           "have exactly one ID in 'view_method_ids' field")
+            widget_data = {
+                "error": {
+                    "msg": "Unable to find viewer specification for objects of type {}.".format(bare_type),
+                    "method_name": "WidgetManager.show_data_widget",
+                    "traceback": "Can't find type spec info for type {}".format(bare_type)
+                }
+            }
         else:
-            input_data['type_spec'] = type_spec
-            method_id = type_spec['view_method_ids'][0]
-            spec = self._sm.get_spec(method_id, tag=tag)
-            input_data['app_spec'] = spec
-
-            # Let's build output according to mappings in method-spec
-            spec_params = self._sm.app_params(spec)
-            input_params = {}
-            is_ref_path = ';' in ref
-            is_external = info_tuple[7] != os.environ['KB_WORKSPACE_ID']
-            # it's not safe to use reference yet (until we switch to them all over the Apps)
-            # But in case we deal with ref-path we have to do it anyway:
-            obj_param_value = ref if (is_ref_path or is_external) else info_tuple[1]
-            for param in spec_params:
-                if any(t == bare_type for t in param['allowed_types']):
-                    input_params[param['id']] = obj_param_value
-
-            (input_params, ws_refs) = validate_parameters(method_id, tag,
-                                                          spec_params, input_params)
-            (output_widget, output) = map_outputs_from_state([], input_params, spec)
-            input_data['output'] = output
-
-        if cell_id is not None:
-            cell_id = "\"{}\"".format(cell_id)
-
-        input_template = """
-        element.html("<div id='{{input_id}}' class='kb-vis-area'></div>");
-
-        require(['kbaseNarrativeOutputCell'], function(KBaseNarrativeOutputCell) {
-            var w = new KBaseNarrativeOutputCell($('#{{input_id}}'), {
-                "data": {{input_data}},
-                "type":"viewer",
-                "widget":"{{widget_name}}",
-                "cellId":{{cell_id}},
-                "title":"{{cell_title}}",
-                "time":{{timestamp}}
-            });
-        });
-        """
-
-        js = Template(input_template).render(input_id=self._cell_id_prefix + str(uuid.uuid4()),
-                                             widget_name=widget_name,
-                                             input_data=json.dumps(input_data),
-                                             cell_title=title,
-                                             cell_id=cell_id,
-                                             timestamp=int(round(time.time()*1000)))
-        return Javascript(data=js, lib=None, css=None)
+            app_id = type_spec['view_method_ids'][0]
+            app_spec = None
+            try:
+                app_spec = self._sm.get_spec(app_id, tag=tag)
+            except Exception as e:
+                widget_data = {
+                    "error": {
+                        "msg": "Unable to find specification for viewer app {}".format(app_id),
+                        "method_name": "WidgetManager.show_data_widget",
+                        "traceback": e.message
+                    }
+                }
+            if app_spec is not None:
+                spec_params = self._sm.app_params(app_spec)
+                input_params = {}
+                is_ref_path = ';' in upa
+                is_external = info_tuple[7] != os.environ['KB_WORKSPACE_ID']
+                # it's not safe to use reference yet (until we switch to them all over the Apps)
+                # But in case we deal with ref-path we have to do it anyway:
+                obj_param_value = upa if (is_ref_path or is_external) else info_tuple[1]
+                upa_params = list()
+                for param in spec_params:
+                    if any(t == bare_type for t in param['allowed_types']):
+                        input_params[param['id']] = obj_param_value
+                        upa_params.append(param['id'])
+
+                (input_params, ws_refs) = validate_parameters(app_id, tag,
+                                                              spec_params, input_params)
+                (output_widget, output) = map_outputs_from_state([], input_params, app_spec)
+                widget_name = app_spec['widgets']['output']
+                widget_data = output
+
+                # Figure out params for upas.
+                for mapping in app_spec.get('behavior', {}).get('output_mapping', []):
+                    if mapping.get('input_parameter', '') in upa_params and 'target_property' in mapping:
+                        upas[mapping['target_property']] = upa
+
+        return self.show_output_widget(
+            widget_name,
+            widget_data,
+            upas=upas,
+            title=title,
+            type="viewer",
+            cell_id=cell_id
+        )
 
     def show_external_widget(self, widget, widget_title, objects, options, auth_required=True):
         """
diff --git a/src/widget_param_mapping.json b/src/widget_param_mapping.json
new file mode 100644
index 0000000000..ca1ad1144c
--- /dev/null
+++ b/src/widget_param_mapping.json
@@ -0,0 +1,265 @@
+{
+    "kbaseTabTable": {
+        "ws": "ws_name",
+        "obj": "obj_name",
+        "name": "obj_name"
+    },
+    "AnnotationSetTable": {
+        "ws": "ws_name",
+        "id": "obj_name"
+    },
+    "kbaseExpressionSparkline": {
+        "featureset": "obj_name",
+        "workspaceID": "ws_name",
+        "expressionMatrixID": "obj_name"
+    },
+    "kbaseFeatureSet": {
+        "featureset_name": "obj_name",
+        "workspaceName": "ws_name"
+    },
+    "kbaseChromatographyMatrix": {
+        "workspaceID": "ws_name",
+        "matrixID": "obj_name"
+    },
+    "AbundanceDataBoxplot": {
+        "ws": "ws_name",
+        "id": "obj_name"
+    },
+    "MetagenomeView": {
+        "ws": "ws_name",
+        "id": "obj_name"
+    },
+    "kbaseGenomeSetBuilder": {
+        "genomeSetName": "obj_name",
+        "wsName": "ws_name"
+    },
+    "kbaseRNASeqSample": {
+        "output": "obj_name",
+        "workspace": "ws_name"
+    },
+    "kbaseFigureObjectHeatmap": {
+        "workspace": "ws_name",
+        "expression_object": "obj_name"
+    },
+    "kbaseOntologyTranslation": {
+        "objNameOrId": "obj_name",
+        "wsNameOrId": "ws_name"
+    },
+    "kbaseSamplePropertyMatrix": {
+        "workspaceID": "ws_name",
+        "matrixID": "obj_name"
+    },
+    "kbaseBlastOutput": {
+        "blast_output_name": "obj_name",
+        "workspaceName": "ws_name"
+    },
+    "kbaseCummerbundPlot": {
+        "generate_cummerbund_plots": "obj_name",
+        "ws_cummerbund_output": "obj_name",
+        "workspaceName": "ws_name"
+    },
+    "kbaseChromatograms": {
+        "workspaceID": "ws_name",
+        "matrixID": "obj_name"
+    },
+    "kbaseAssemblyView": {
+        "ws": "ws_name",
+        "id": "obj_name"
+    },
+    "RankAbundancePlot": {
+        "ws": "ws_name",
+        "id": "obj_name"
+    },
+    "kbaseOntologyDictionary": {
+        "objNameOrId": "obj_name",
+        "wsNameOrId": "ws_name"
+    },
+    "CollectionView": {
+        "ws": "ws_name",
+        "id": "obj_name"
+    },
+    "kbaseExpressionSampleTableNew": {
+        "output": "obj_name",
+        "workspace": "ws_name"
+    },
+    "kbaseTree": {
+        "treeID": "obj_name",
+        "workspaceID": "ws_name"
+    },
+    "kbaseExpressionVolcanoPlot": {
+        "volcano_plot_object": "obj_name",
+        "workspace": "ws_name"
+    },
+    "kbaseExpressionPairwiseCorrelation": {
+        "featureset": "obj_name",
+        "workspaceID": "ws_name",
+        "expressionMatrixID": "obj_name"
+    },
+    "AbundanceDataView": {
+        "ws": "ws_name",
+        "id": "obj_name"
+    },
+    "kbaseRNASeqAnalysisNew": {
+        "output": "obj_name",
+        "workspace": "ws_name"
+    },
+    "kbaseReportView": {
+        "workspace_name": "ws_name",
+        "report_ref": "obj_ref",
+        "report_name": "obj_name"
+    },
+    "kbaseGrowthMatrix": {
+        "workspaceID": "ws_name",
+        "matrixID": "obj_name"
+    },
+    "GenomeComparisonWidget": {
+        "ws_id": "obj_name",
+        "ws_name": "ws_name"
+    },
+    "kbaseSampleProperty2DPlot": {
+        "workspaceID": "ws_name",
+        "matrixID": "obj_name"
+    },
+    "kbaseExpressionFeatureTableHeatmap": {
+        "workspaceID": "ws_name",
+        "expressionMatrixID": "obj_name"
+    },
+    "kbaseExpressionMatrixHeatmap": {
+        "expression_object": "obj_name",
+        "workspace": "ws_name"
+    },
+    "kbaseGrowthParameters": {
+        "workspaceID": "ws_name",
+        "growthParametersID": "obj_name"
+    },
+    "AbundanceDataTable": {
+        "ws": "ws_name",
+        "id": "obj_name"
+    },
+    "kbaseGrowthCurves": {
+        "workspaceID": "ws_name",
+        "matrixID": "obj_name"
+    },
+    "kbaseContigSetView": {
+        "ws": "ws_name",
+        "id": "obj_name"
+    },
+    "kbaseDomainAnnotation": {
+        "workspaceID": "ws_name",
+        "domainAnnotationID": "obj_name"
+    },
+    "FbaModelComparisonWidget": {
+        "fba_model2_id": "obj_name",
+        "proteome_cmp": "obj_name",
+        "ws_name": "ws_name",
+        "fba_model1_id": "obj_name"
+    },
+    "kbasePanGenome": {
+        "ws": "ws_name",
+        "name": "obj_name"
+    },
+    "kbaseBinnedContigs": {
+        "objRef": "obj_ref",
+        "ws": "ws_name"
+    },
+    "kbaseSamplePropertyHistogram": {
+        "workspaceID": "",
+        "matrixID": ""
+    },
+    "kbaseNarrativeDefaultOutput": {},
+    "kbaseExpressionEstimateK": {
+        "estimateKResultID": "obj_name",
+        "workspaceID": "ws_name",
+        "expressionMatrix": "obj_name"
+    },
+    "kbaseGenomeView": {
+        "ws": "ws_name",
+        "id": "obj_name"
+    },
+    "kbaseGrowthParamsPlot": {
+        "workspaceID": "ws_name",
+        "growthParametersID": "obj_name"
+    },
+    "kbaseExpressionMatrix": {
+        "workspaceID": "ws_name",
+        "expressionMatrixID": "obj_name"
+    },
+    "kbaseExpressionAnalysis": {
+        "ws": "ws_name",
+        "obj": "obj_name"
+    },
+    "kbaseGenomeComparisonViewer": {
+        "ws": "ws_name",
+        "id": "obj_name"
+    },
+    "kbaseExpressionHeatmap": {
+        "featureset": "obj_name",
+        "workspaceID": "ws_name",
+        "expressionMatrixID": "obj_name"
+    },
+    "kbaseGenomeAnnotationAssembly": {
+        "objNameOrId": "obj_name",
+        "wsNameOrId": "ws_name"
+    },
+    "kbaseDifferentialExpressionMatrixSetViewer": {
+        "obj_ref": "obj_name",
+        "wsName": "ws_name"
+    },
+    "kbaseFbaModelComparisonNew": {
+        "mc_id": "obj_name",
+        "ws_name": "ws_name",
+        "workspace_name": "ws_name",
+        "mc_name": "obj_name"
+    },
+    "kbaseGenomeAnnotationViewer": {
+        "objNameOrId": "obj_name",
+        "wsNameOrId": "ws_name"
+    },
+    "AbundanceDataPcoa": {
+        "ws": "ws_name",
+        "id": "obj_name"
+    },
+    "kbaseReadsViewer": {
+        "obj_ref": "obj_ref",
+        "wsName": "ws_name"
+    },
+    "kbaseGenericSetViewer": {
+        "obj_ref": "obj_name",
+        "wsName": "ws_name"
+    },
+    "AbundanceDataHeatmap": {
+        "ws": "ws_name",
+        "id": "obj_name"
+    },
+    "kbaseRNASeqPieNew": {
+        "output": "obj_name",
+        "workspace": "ws_name"
+    },
+    "kbasePValueHistogram": {
+        "workspace": "ws_name",
+        "figure_object": "obj_name"
+    },
+    "kbaseRNASeqAnalysis": {
+        "output": "obj_name",
+        "workspace": "ws_name"
+    },
+    "kbaseReadsSetView": {
+        "wsId": "ws_name",
+        "objId": "obj_name"
+    },
+    "kbaseExpressionFeatureClusters": {
+        "clusterSetID": "obj_name",
+        "workspaceID": "ws_name"
+    },
+    "testCrazyExample": {
+        "obj_name1": "obj_name",
+        "obj_name2": "obj_name",
+        "obj_id1": "obj_id",
+        "obj_id2": "obj_id",
+        "ws_name": "ws_name",
+        "obj_ref1": "obj_ref",
+        "obj_ref2": "obj_ref",
+        "obj_names": "obj_name_list",
+        "obj_refs": "obj_ref_list"
+    }
+}
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index d10cee314b..30692dfe9d 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -18,7 +18,7 @@ module.exports = function (config) {
         },
         files: [
             {pattern: 'test/unit/spec/**/*.js', included: false},
-            // {pattern: 'test/unit/spec/narrative_core/upload/stagingAreaViewer-spec.js', included: false},
+            // {pattern: 'test/unit/spec/narrative_core/kbaseNarrativeOutputCell-spec.js', included: false},
             {pattern: 'node_modules/string.prototype.startswith/startswith.js', included: true},
             {pattern: 'node_modules/string.prototype.endswith/endswith.js', included: true},
             {pattern: 'kbase-extension/static/ext_components/kbase-ui-plugin-catalog/src/plugin/modules/data/categories.yml', included: false, served: true},
diff --git a/test/unit/spec/Util/BootstrapDialogSpec.js b/test/unit/spec/Util/BootstrapDialogSpec.js
index cd8f2b2d41..ea7280f818 100644
--- a/test/unit/spec/Util/BootstrapDialogSpec.js
+++ b/test/unit/spec/Util/BootstrapDialogSpec.js
@@ -4,25 +4,19 @@
 /*global beforeEach, afterEach*/
 /*jslint white: true*/
 
-define (
-    [
-        'jquery',
-        'util/bootstrapDialog'
-    ], function(
-        $,
-        Dialog
-    ) {
+define ([
+    'jquery',
+    'util/bootstrapDialog'
+], function(
+    $,
+    Dialog
+) {
+    'use strict';
     var $simpleBody = $('<div>').append('This is a body text'),
         simpleTitle = 'Title',
         simpleButtons = [
-            $('<button>').append('b1')
-                         .click(function() {
-
-                         }),
-            $('<button>').append('b2')
-                         .click(function() {
-
-                         })
+            $('<button>').append('b1').click(function() { }),
+            $('<button>').append('b2').click(function() { })
         ],
         simpleDialog;
 
@@ -61,6 +55,18 @@ define (
             expect(body.html()).toBe($simpleBody.html());
         });
 
+        it('Should give the buttons back', function() {
+            var buttons = simpleDialog.getButtons();
+            expect(buttons.length).toBe(2);
+            expect(buttons[0].innerHTML).toBe('b1');
+            expect(buttons[1].innerHTML).toBe('b2');
+        });
+
+        it('Should get the whole modal object back', function() {
+            var $modal = simpleDialog.getElement();
+            expect($modal[0].tagName).toBe('DIV');
+        });
+
         it('Should write over the title', function() {
             var newTitle = 'A new title!';
             simpleDialog.setTitle(newTitle);
@@ -72,5 +78,54 @@ define (
             simpleDialog.setBody($newBody);
             expect(simpleDialog.getBody().html()).toBe($newBody.html());
         });
+
+        it('Should trigger a command on enter key', function() {
+            var wasTriggered = false;
+            var btnFn = function() {
+                wasTriggered = true;
+            };
+            var dialog = new Dialog({
+                title: 'test',
+                body: $('<div>'),
+                buttons: [$('<button>').append('foo').click(btnFn)],
+                enterToTrigger: true
+            });
+            dialog.show();
+            expect(wasTriggered).toBe(false);
+            var e = $.Event('keypress');
+            e.which = 13;
+            e.keyCode = 13;
+            dialog.getElement().trigger(e);
+            expect(wasTriggered).toBe(true);
+            dialog.hide();
+            dialog.destroy();
+        });
+
+        it('Should create a simple alert', function() {
+            var alert = new Dialog({
+                title: 'Alert',
+                body: $('<div>').append('an alert'),
+                alertOnly: true
+            });
+
+            var btns = alert.getButtons();
+            expect(btns.length).toBe(1);
+            expect(btns[0].innerHTML).toBe('Close');
+        });
+
+        it('Should set the title based on type', function() {
+            var d = new Dialog({
+                title: 'Foo',
+                type: 'warning'
+            });
+            expect(d.$headerTitle.hasClass('text-warning')).toBe(true);
+        });
+
+        it('Should destroy the modal on command', function() {
+            var ret = simpleDialog.destroy();
+            expect(ret).toBe(null);
+            expect(simpleDialog.getElement()).toBe(null);
+        });
+
     });
 });
diff --git a/test/unit/spec/Util/StringSpec.js b/test/unit/spec/Util/StringSpec.js
index 20cce2f976..3990763e63 100644
--- a/test/unit/spec/Util/StringSpec.js
+++ b/test/unit/spec/Util/StringSpec.js
@@ -58,5 +58,31 @@ define ([
             expect(StringUtil.readableBytes(9999999999999999999999999)).toBe('8.27 YB');
             expect(StringUtil.readableBytes(99999999999999999999999999999)).toBe('82718.06 YB');
         });
+
+        it('pretty print JSON should do exactly that', function() {
+            var obj = {
+                a: 1,
+                b: true,
+                c: [1, 2, 3],
+                d: {
+                    e: "foo",
+                    f: null
+                }
+            };
+            var result = '{\n' +
+                         '  <span class="key">"a":</span> <span class="number">1</span>,\n' +
+                         '  <span class="key">"b":</span> <span class="boolean">true</span>,\n' +
+                         '  <span class="key">"c":</span> [\n' +
+                         '    <span class="number">1</span>,\n' +
+                         '    <span class="number">2</span>,\n' +
+                         '    <span class="number">3</span>\n' +
+                         '  ],\n' +
+                         '  <span class="key">"d":</span> {\n' +
+                         '    <span class="key">"e":</span> <span class="string">"foo"</span>,\n' +
+                         '    <span class="key">"f":</span> <span class="null">null</span>\n' +
+                         '  }\n' +
+                         '}';
+            expect(StringUtil.prettyPrintJSON(obj)).toBe(result);
+        });
     });
 });
diff --git a/test/unit/spec/api/upaApiSpec.js b/test/unit/spec/api/upaApiSpec.js
index cfdca5b768..ddc1d4d149 100644
--- a/test/unit/spec/api/upaApiSpec.js
+++ b/test/unit/spec/api/upaApiSpec.js
@@ -69,7 +69,23 @@ define ([
                 '[myws]/myobj/myver',
                 '[1]2/23/4',
                 '[1]2/3/4;5/6/7'
-            ];
+            ],
+            upaStruct = {
+                foo: '1/2/3',
+                bar: ['4/5/6', '7/8/9'],
+                baz: {
+                    a: '1/2/3',
+                    b: '1/2/3'
+                }
+            },
+            upaStructSerial = {
+                foo: '[1]/2/3',
+                bar: ['[4]/5/6', '[7]/8/9'],
+                baz: {
+                    a: '[1]/2/3',
+                    b: '[1]/2/3'
+                }
+            };
 
         beforeEach(function () {
             history.pushState(null, null, '/narrative/ws.31.obj.1');
@@ -162,5 +178,42 @@ define ([
                 expect(error.error).toEqual('Can only serialize UPA strings or Arrays of UPA paths');
             }
         });
+
+        it('Should serialize all elements of a structure', function () {
+            var serialized = upaApi.serializeAll(upaStruct);
+            Object.keys(serialized).forEach(function(key) {
+                if (typeof upaStructSerial[key] === 'string') {
+                    expect(serialized[key]).toEqual(upaStructSerial[key]);
+                }
+                else if (Array.isArray(upaStructSerial[key])) {
+                    upaStructSerial[key].forEach(function(serialUpa) {
+                        expect(serialized[key].indexOf(serialUpa)).toBeGreaterThan(-1);
+                    });
+                }
+            });
+        });
+
+        it('Should throw an error when changing the version of an UPA that isn\t an UPA', function () {
+            try {
+                upaApi.changeUpaVersion('not an upa', 'no new version');
+                fail('Should have failed here!');
+            } catch (error) {
+                expect(error).not.toBeNull();
+                expect(error.error).toContain('is not a valid upa, so its version cannot be changed!');
+            }
+        });
+
+        it('Should throw an error when changing the version of an UPA to a bad value', function () {
+            var badVersionValues = [0, -1, '-1', '0', 'abc', '12V', 'V12', '1v3'];
+            badVersionValues.forEach(function(badVal) {
+                try {
+                    var newUpa = upaApi.changeUpaVersion('1/2/3', badVal);
+                    fail(newUpa + ' -- Should have failed here!');
+                } catch (error) {
+                    expect(error).not.toBeNull();
+                    expect(error.error).toContain(badVal + ' is not a valid version number!');
+                }
+            });
+        });
     });
 });
diff --git a/test/unit/spec/narrative_core/kbaseNarrativeOutputCell-spec.js b/test/unit/spec/narrative_core/kbaseNarrativeOutputCell-spec.js
index b70b311179..82224e2b6d 100644
--- a/test/unit/spec/narrative_core/kbaseNarrativeOutputCell-spec.js
+++ b/test/unit/spec/narrative_core/kbaseNarrativeOutputCell-spec.js
@@ -4,11 +4,162 @@
 /*global beforeEach, afterEach*/
 /*jslint white: true*/
 define([
-    'kbaseNarrativeOutputCell'
-], function(Widget) {
+    'jquery',
+    'kbaseNarrativeOutputCell',
+    'base/js/namespace',
+    'kbaseNarrative',
+    'common/runtime'
+], function(
+    $,
+    Widget,
+    Jupyter,
+    Narrative,
+    Runtime
+) {
+    'use strict';
     describe('Test the kbaseNarrativeOutputCell widget', function() {
-        it('Should do things', function() {
+        var currentWsId = 10,
+            testWidget = 'kbaseDefaultNarrativeOutput',
+            testUpas = {
+                'test': '3/4/5',
+                'testList': ['1/2/3', '6/7/8']
+            },
+            serialUpas = {
+                'test': '[3]/4/5',
+                'testList': ['[1]/2/3', '[6]/7/8']
+            },
+            deserialUpas = {
+                'test': '10/4/5',
+                'testList': ['10/2/3', '10/7/8']
+            },
+            testData = { 'foo': 'bar', 'baz': [1, 2, 3] },
+            $target = $('<div>'),
+            cellId = 'a-cell-id',
+            myWidget = null;
 
+        var validateUpas = function(source, comparison) {
+            Object.keys(comparison).forEach(function(upaKey) {
+                if (typeof comparison[upaKey] === 'string') {
+                    expect(source[upaKey]).toEqual(comparison[upaKey]);
+                }
+                else { // it better be a list
+                    comparison[upaKey].forEach(function(upa) {
+                        expect(source[upaKey].indexOf(upa)).toBeGreaterThan(-1);
+                    });
+                }
+            });
+        };
+
+        beforeEach(function() {
+            beforeEach(function () {
+                history.pushState(null, null, '/narrative/ws.10.obj.1');
+            });
+            Jupyter.narrative = new Narrative();
+            $('body').append($('<div id="notebook-container">').append($target));
+            myWidget = new Widget($target, {
+                widget: testWidget,
+                data: testData,
+                type: 'viewer',
+                upas: testUpas
+            });
+            myWidget.cell = {};
+            myWidget.metadata = myWidget.initMetadata();
+        });
+
+        afterEach(function() {
+            $('body').empty();
+            $target = $('<div>');
+        });
+
+        it('Should load properly with a dummy UPA', function() {
+            expect(myWidget).not.toBeNull();
+        });
+
+        it('Should serialize UPA info properly', function() {
+            myWidget.handleUpas();
+            var serialized = myWidget.cell.metadata.kbase.dataCell.upas;
+            validateUpas(serialUpas, serialized);
+        });
+
+        // skip until we get better notebook support.
+        xit('Should attach a widget using a pre-existing cell id', function() {
+            var $newDiv = $('<div id="' + cellId  + '">');
+            $('#notebook-container').append($newDiv);
+            var newWidget = new Widget($newDiv, {
+                widget: testWidget,
+                data: testData,
+                type: 'viewer',
+                upas: testUpas,
+                cellId: cellId
+            });
+            expect(newWidget.cell).toBeTruthy();
+        });
+
+        it('Should deserialize a pre-existing UPA properly', function() {
+            myWidget.cell.metadata = {
+                kbase: {
+                    dataCell: {
+                        upas: serialUpas
+                    }
+                }
+            };
+            myWidget.metadata = myWidget.initMetadata();
+            myWidget.handleUpas();
+            validateUpas(deserialUpas, myWidget.options.upas);
+        });
+
+        it('Should do lazy rendering if the option is enabled', function() {
+
+        });
+
+        it('inViewport should return true by default, if it\'s missing parameters', function() {
+            expect(myWidget.inViewport()).toBe(true);
+        });
+
+        it('Should render properly', function(done) {
+            myWidget.render()
+                .then(function() {
+                    // exercise the header button a bit
+                    expect($target.find('.btn.kb-data-obj')).not.toBeNull();
+                    $target.find('.btn.kb-data-obj').click();
+                    expect(myWidget.headerShown).toBeTruthy();
+                    $target.find('.btn.kb-data-obj').click();
+                    expect(myWidget.headerShown).toBeFalsy();
+                    done();
+                });
+        });
+
+        it('Should render an error properly when its viewer doesn\'t exist', function() {
+            var $nuTarget = $('<div>');
+            $('#notebook-container').append($nuTarget);
+            var w = new Widget($nuTarget, {
+                widget: 'NotAWidget',
+                data: testData,
+                type: 'viewer',
+                upas: testUpas
+            });
+            w.render()
+                .then(function() {
+                    expect(w.options.title).toEqual('App Error');
+                });
+        });
+
+        it('Should update its UPAs properly with a version change request', function(done) {
+            myWidget.render()
+                .then(function() {
+                    myWidget.displayVersionChange('test', 4);
+                    expect(myWidget.cell.metadata.kbase.dataCell.upas.test).toEqual('[3]/4/4');
+                    done();
+                });
+        });
+
+        it('Should handle UPAs correctly when forcing to overwrite existing metadata', function() {
+            myWidget.metadata = myWidget.initMetadata();
+            myWidget.handleUpas();
+            myWidget.options.upas = deserialUpas;
+            myWidget.handleUpas(true);
+            expect(myWidget.cell.metadata.kbase.dataCell.upas.test).toEqual('[10]/4/5');
+            expect(myWidget.cell.metadata.kbase.dataCell.upas.testList).toEqual(['[10]/2/3', '[10]/7/8']);
         });
     });
 });