From 572556ccd6f355157e626fa426ad4a73a67c0f95 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Thu, 1 Oct 2020 16:14:37 -0800
Subject: [PATCH 01/61] Changes plus test skeleton

---
 .../static/kbase/css/kbaseNarrative.css       |  8 ++--
 .../narrative_core/kbaseNarrativeDataList.js  |  3 +-
 test/unit/karma.conf.js                       |  3 +-
 .../kbaseNarrativeDataList-spec.js            | 39 +++++++++++++++++--
 4 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index 7ed67eab8a..aa9a959f6f 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -2437,7 +2437,7 @@ button.kb-data-obj {
 .kb-data-list-add-data-button {
 
     cursor:pointer;
-    background-color: #F44336;
+    background-color: #4379B1;
     color: #fff;
     border: none;
     box-shadow: 1px 1px 3px #aaa;
@@ -2463,11 +2463,11 @@ button.kb-data-obj {
 
 .kb-data-list-add-data-button:hover {
     cursor:pointer;
-    background-color: #DC3C31;
+    background-color: #4379B1;
 }
 
 .kb-data-list-add-data-text-button {
-    background-color: #F44336;
+    background-color: #4379B1;
     border-radius: 1px;
     color: #fff;
     border: none;
@@ -2481,7 +2481,7 @@ button.kb-data-obj {
     moz-box-shadow: 1px 1px 3px #aaa;
 }
 .kb-data-list-add-data-text-button:hover {
-    background-color: #DC3C31;
+    background-color: #4379B1;
 }
 
 
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 f1e277f6d6..02367d5995 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataList.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataList.js
@@ -282,7 +282,8 @@ define([
                     }
                 });
 
-            this.$addDataButton = $('<span>').addClass('kb-data-list-add-data-button fa fa-plus fa-2x')
+            this.$addDataButton = $('<button>').addClass('kb-data-list-add-data-button fa fa-plus fa-2x')
+                .attr('aria-label', 'add data button')
                 .css({ 'position': 'absolute', bottom: '15px', right: '25px', 'z-index': '5' })
                 .click(function () {
                     _this.trigger('hideGalleryPanelOverlay.Narrative');
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index ddadcb0628..9389d4309e 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -32,7 +32,8 @@ module.exports = function (config) {
         },
         files: [
             'kbase-extension/static/narrative_paths.js',
-            {pattern: 'test/unit/spec/**/*.js', included: false},
+            //{pattern: 'test/unit/spec/**/*.js', included: false},
+            {pattern: 'test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js', included: false},
             {pattern: 'node_modules/jasmine-ajax/lib/mock-ajax.js', included: true},
             {pattern: 'kbase-extension/static/ext_components/kbase-ui-plugin-catalog/src/plugin/modules/data/categories.yml', included: false, served: true},
             {pattern: 'kbase-extension/static/**/*.css', included: false, served: true},
diff --git a/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js b/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js
index 5f82242306..a15b43532c 100644
--- a/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js
+++ b/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js
@@ -4,11 +4,44 @@
 /*global beforeEach, afterEach*/
 /*jslint white: true*/
 define([
-    'kbaseNarrativeDataList'
-], function(Widget) {
+    'jquery',
+    'kbaseNarrativeDataList',
+    'base/js/namespace',
+    'kbaseNarrative',
+    'bootstrap'
+], function($, DataList, Jupyter, Narrative) {
     describe('Test the kbaseNarrativeDataList widget', function() {
-        it('Should do things', function() {
+        let $div = null;
+        beforeEach(() => {
+            jasmine.Ajax.install();
+            $div = $('<div>');
+            Jupyter.narrative = new Narrative();
+            Jupyter.narrative.getAuthToken = () => { return 'NotARealToken!' };
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+            $div.remove();
+        });
+
+        it('Should initialize an empty data list properly', function() {
+            expect(dataList).toEqual(jasmine.any(Object));
+        });
+
+        it('Should have an add data button with Add Data text when there are no list items', function(){
+            var addDataButton = $list.find('.kb-data-list-add-data-text-button')
+            expect(addDataButton.length).toBe(1);
+            expect(addDataButton.text()).toEqual('Add Data');
+        });
+
+        it('Should have an add data button with no text when there are list items', function(){
+            var addDataButton = $list.find('.kb-data-list-add-data-button')
+            expect(addDataButton.length).toBe(1);
+        });
 
+        it('Should fire a trigger when the add data button is clicked', function(){
+            // Not sure how to do this in Jasmine yet
+            // this.trigger('hideGalleryPanelOverlay.Narrative'); is this adding a class or is this a function?
         });
     });
 });

From 6ad4d8786cd93384e1dd1e2de9e5f25e65fe0b82 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Fri, 2 Oct 2020 17:21:58 -0800
Subject: [PATCH 02/61] Fix and add tests

---
 .../narrative_core/kbaseNarrativeDataList.js  |   2 +-
 .../kbaseNarrativeDataList-spec.js            | 185 +++++++++++++++---
 2 files changed, 160 insertions(+), 27 deletions(-)

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 02367d5995..5f8c561c8d 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataList.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataList.js
@@ -384,7 +384,7 @@ define([
                 console.error('ws: ' + this.ws);
                 return;
             }
-            Promise.resolve(this.ws.get_workspace_info({
+            return Promise.resolve(this.ws.get_workspace_info({
                 workspace: this.ws_name
             }))
                 .then(function (wsInfo) {
diff --git a/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js b/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js
index a15b43532c..f1e4d2ef32 100644
--- a/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js
+++ b/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js
@@ -4,44 +4,177 @@
 /*global beforeEach, afterEach*/
 /*jslint white: true*/
 define([
-    'jquery',
     'kbaseNarrativeDataList',
-    'base/js/namespace',
-    'kbaseNarrative',
-    'bootstrap'
-], function($, DataList, Jupyter, Narrative) {
-    describe('Test the kbaseNarrativeDataList widget', function() {
-        let $div = null;
+    'jquery',
+    'narrativeConfig',
+    'kb_service/client/workspace',
+    'base/js/namespace'
+], function (DataList, $, Config, Workspace, Jupyter) {
+    'use strict';
+    var $dataList = $('<div>');
+    var dataListObj = null;
+
+    const fakeNSUrl = 'https://ci.kbase.us/services/fake_url';
+    const narrativeServiceInfo = {
+        version: '1.1',
+        id: '12345',
+        result: [{
+            git_commit_hash: 'foo',
+            hash: 'bar',
+            health: 'healthy',
+            module_name: 'SampleService',
+            url: fakeNSUrl
+        }]
+    };
+
+    function mockServiceWizard() {
+        jasmine.Ajax.stubRequest(Config.url('service_wizard')).andReturn({
+            status: 200,
+            statusText: 'HTTP/1/1 200 OK',
+            contentType: 'application/json',
+            responseText: JSON.stringify(narrativeServiceInfo)
+        });
+    };
+
+    function mockNarrativeServiceListObjects(objData) {
+        jasmine.Ajax.stubRequest(fakeNSUrl).andReturn({
+            status: 200,
+            statusText: 'HTTP/1 200 OK',
+            contentType: 'application/json',
+            responseText: JSON.stringify({
+                version: '1.1',
+                id: '12345',
+                result: [{
+                    // The data object is where objects will be return
+                    data: objData,
+                    data_palette_refs: {}
+                }]
+            })
+        });
+    };
+
+    function mockWorkSpaceService() {
+        jasmine.Ajax.stubRequest('https://ci.kbase.us/services/ws').andReturn({
+            status: 200,
+            statusText: 'success',
+            contentType: 'application/json',
+            responseHeaders: '',
+            responseText: JSON.stringify({
+                version: '1.1',
+                result: [[
+                    35855,
+                    'testUser:narrative_1534979778065',
+                    'testUser',
+                    '2020-09-30T23:22:25+0000',
+                    2,
+                    'a',
+                    'n',
+                    'unlocked',
+                    {
+                        'narrative_nice_name': 'CI Scratch',
+                        'searchtags': 'narrative',
+                        'is_temporary': 'false',
+                        'narrative': '1'
+                    }
+                ]]
+            })
+        });
+    };
+
+    describe('Test the kbaseNarrativeDataList', () => {
+
         beforeEach(() => {
             jasmine.Ajax.install();
-            $div = $('<div>');
-            Jupyter.narrative = new Narrative();
-            Jupyter.narrative.getAuthToken = () => { return 'NotARealToken!' };
+            Jupyter.narrative = {
+                getAuthToken: () => 'someToken',
+                getWorkspaceName: () => 'someWorkspace'
+            };
         });
 
         afterEach(() => {
             jasmine.Ajax.uninstall();
-            $div.remove();
+            $dataList = $('<div>');
+            dataListObj = null;
         });
 
-        it('Should initialize an empty data list properly', function() {
-            expect(dataList).toEqual(jasmine.any(Object));
-        });
+        describe('Without data', () => {
+            beforeEach( async () => {
+                var objData = [];
 
-        it('Should have an add data button with Add Data text when there are no list items', function(){
-            var addDataButton = $list.find('.kb-data-list-add-data-text-button')
-            expect(addDataButton.length).toBe(1);
-            expect(addDataButton.text()).toEqual('Add Data');
-        });
+                // mock service calls
+                mockServiceWizard();
+                mockNarrativeServiceListObjects(objData);
+                mockWorkSpaceService();
+
+                // Create datalist object
+                dataListObj = new DataList($dataList, {});
+                expect(dataListObj).toBeDefined();
+
+                // Populate datalist object via the refresh function
+                dataListObj.ws_name = 'some_workspace';
+                dataListObj.ws = new Workspace(Config.url('workspace'), null);
+                await dataListObj.refresh();
+            });
 
-        it('Should have an add data button with no text when there are list items', function(){
-            var addDataButton = $list.find('.kb-data-list-add-data-button')
-            expect(addDataButton.length).toBe(1);
+            it('Should instantiate itself', () => {
+                expect(dataListObj).toBeDefined();
+                expect($dataList.html()).toContain('This Narrative has no data yet.');
+            });
+
+
+            it('Should render the add data text button ', async () => {
+                var $addDataButton = $dataList.find('.kb-data-list-add-data-text-button');
+                expect($addDataButton).toBeDefined();
+                expect($addDataButton.html()).toContain('Add Data');
+            });
         });
 
-        it('Should fire a trigger when the add data button is clicked', function(){
-            // Not sure how to do this in Jasmine yet
-            // this.trigger('hideGalleryPanelOverlay.Narrative'); is this adding a class or is this a function?
+        describe('With data', () => {
+            beforeEach( async () => {
+                var objData = [
+                    {
+                        "object_info": [
+                            5,
+                            "Rhodobacter_CACIA_14H1",
+                            "KBaseGenomes.Genome-7.0",
+                            "2020-10-03T01:15:14+0000",
+                            1,
+                            "emahanna",
+                            54640,
+                            "emahanna:narrative_1601675739009",
+                            "53af8071b814a1db43f81eb490a35491",
+                            3110399,
+                            {}
+                        ]
+                    }
+                ];
+
+                // mock service calls
+                mockServiceWizard();
+                mockNarrativeServiceListObjects(objData);
+                mockWorkSpaceService();
+
+                // Create datalist object
+                const dataListObj = new DataList($dataList, {});
+
+                // Populate datalist object via the refresh function
+                dataListObj.ws_name = 'some_workspace';
+                dataListObj.ws = new Workspace(Config.url('workspace'), null);
+                await dataListObj.refresh();
+            });
+
+            it('Should instantiate itself', () => {
+                expect(dataListObj).toBeDefined();
+            });
+
+            it('Should render a data object row', () => {
+                expect($dataList.find('.narrative-card-row')).toBeDefined();
+            });
+
+            it('Should generate the add data button ', async () => {
+                var $addDataButton = $dataList.find('.kb-data-list-add-data-button');
+                expect($addDataButton).toBeDefined();
+            });
         });
     });
-});
+});
\ No newline at end of file

From dec2b26fc2c0b4b0a41f77afa8b9462ded275d15 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Fri, 2 Oct 2020 17:30:38 -0800
Subject: [PATCH 03/61] Fix label

---
 .../kbase/js/widgets/narrative_core/kbaseNarrativeDataList.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 5f8c561c8d..08bd29e97a 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataList.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataList.js
@@ -283,7 +283,7 @@ define([
                 });
 
             this.$addDataButton = $('<button>').addClass('kb-data-list-add-data-button fa fa-plus fa-2x')
-                .attr('aria-label', 'add data button')
+                .attr('aria-label', 'add data')
                 .css({ 'position': 'absolute', bottom: '15px', right: '25px', 'z-index': '5' })
                 .click(function () {
                     _this.trigger('hideGalleryPanelOverlay.Narrative');

From f21d75b3cefdfcb3ae67bcafb44c41abcdb51b05 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Fri, 2 Oct 2020 17:31:57 -0800
Subject: [PATCH 04/61] Fix karma conf

---
 test/unit/karma.conf.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index 9389d4309e..ddadcb0628 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -32,8 +32,7 @@ module.exports = function (config) {
         },
         files: [
             'kbase-extension/static/narrative_paths.js',
-            //{pattern: 'test/unit/spec/**/*.js', included: false},
-            {pattern: 'test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js', included: false},
+            {pattern: 'test/unit/spec/**/*.js', included: false},
             {pattern: 'node_modules/jasmine-ajax/lib/mock-ajax.js', included: true},
             {pattern: 'kbase-extension/static/ext_components/kbase-ui-plugin-catalog/src/plugin/modules/data/categories.yml', included: false, served: true},
             {pattern: 'kbase-extension/static/**/*.css', included: false, served: true},

From abfba8935fa875df5012b96caad8bfca203f61d9 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Fri, 2 Oct 2020 17:47:20 -0800
Subject: [PATCH 05/61] Fix codacy issues

---
 .../kbaseNarrativeDataList-spec.js             | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js b/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js
index f1e4d2ef32..f0e1d7b395 100644
--- a/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js
+++ b/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js
@@ -122,7 +122,7 @@ define([
             });
 
 
-            it('Should render the add data text button ', async () => {
+            it('Should render the add data text button ', () => {
                 var $addDataButton = $dataList.find('.kb-data-list-add-data-text-button');
                 expect($addDataButton).toBeDefined();
                 expect($addDataButton.html()).toContain('Add Data');
@@ -133,16 +133,16 @@ define([
             beforeEach( async () => {
                 var objData = [
                     {
-                        "object_info": [
+                        'object_info': [
                             5,
-                            "Rhodobacter_CACIA_14H1",
-                            "KBaseGenomes.Genome-7.0",
-                            "2020-10-03T01:15:14+0000",
+                            'Rhodobacter_CACIA_14H1',
+                            'KBaseGenomes.Genome-7.0',
+                            '2020-10-03T01:15:14+0000',
                             1,
-                            "emahanna",
+                            'testuser',
                             54640,
-                            "emahanna:narrative_1601675739009",
-                            "53af8071b814a1db43f81eb490a35491",
+                            'testuser:narrative_1601675739009',
+                            '53af8071b814a1db43f81eb490a35491',
                             3110399,
                             {}
                         ]
@@ -171,7 +171,7 @@ define([
                 expect($dataList.find('.narrative-card-row')).toBeDefined();
             });
 
-            it('Should generate the add data button ', async () => {
+            it('Should generate the add data button ', () => {
                 var $addDataButton = $dataList.find('.kb-data-list-add-data-button');
                 expect($addDataButton).toBeDefined();
             });

From d352c96b6db95186670a814c37b0ea5cddc21134 Mon Sep 17 00:00:00 2001
From: Steve Chan <sychan168@gmail.com>
Date: Mon, 5 Oct 2020 08:52:15 -0700
Subject: [PATCH 06/61] Minor change to trigger build.

---
 src/config.json.templ | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config.json.templ b/src/config.json.templ
index d59aedfb8b..eb17aad328 100644
--- a/src/config.json.templ
+++ b/src/config.json.templ
@@ -272,7 +272,6 @@
         "google_ad_conversion": "kR9OCLas4JgBEOy2pucC"
     },
     "narrative-dev": {
-        "KBaseSearchEngine": "https://narrative-dev.kbase.us/services/searchapi2/legacy",
         "auth": "https://narrative-dev.kbase.us/services/auth",
         "awe": "https://narrative-dev.kbase.us/services/awe-api",
         "catalog": "https://narrative-dev.kbase.us/services/catalog",
@@ -288,6 +287,7 @@
         "genomeCmp": "https://narrative-dev.kbase.us/services/genome_comparison/jsonrpc",
         "groups": "https://narrative-dev.kbase.us/services/groups",
         "job_service": "https://narrative-dev.kbase.us/services/njs_wrapper",
+        "KBaseSearchEngine": "https://narrative-dev.kbase.us/services/searchapi2/legacy",
         "landing_pages": "/#dataview/",
         "log_host": "https://elasticsearch2.chicago.kbase.us",
         "log_port": 9000,

From d00df381acd624f115f5cd8dcb27b7fbfad0fdc3 Mon Sep 17 00:00:00 2001
From: Steve Chan <sychan168@gmail.com>
Date: Mon, 5 Oct 2020 08:53:28 -0700
Subject: [PATCH 07/61] Test for PR action

---
 src/config.json.templ | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config.json.templ b/src/config.json.templ
index eb17aad328..e49312d287 100644
--- a/src/config.json.templ
+++ b/src/config.json.templ
@@ -322,8 +322,8 @@
         "google_analytics_id": "UA-131054609-1"
     },
     "narrative-refactor": {
-        "KBaseSearchEngine": "https://narrative-refactor.kbase.us/services/searchapi2/legacy",
         "auth": "https://narrative-refactor.kbase.us/services/auth",
+        "KBaseSearchEngine": "https://narrative-refactor.kbase.us/services/searchapi2/legacy",
         "awe": "https://narrative-refactor.kbase.us/services/awe-api",
         "catalog": "https://narrative-refactor.kbase.us/services/catalog",
         "cdn": "https://narrative-refactor.kbase.us/cdn/files",

From 6b45b69227fad41736f39cd6afb873fb47bb6547 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Mon, 5 Oct 2020 10:27:41 -0800
Subject: [PATCH 08/61] beef up tests

---
 .../kbaseNarrativeDataList-spec.js             | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js b/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js
index f0e1d7b395..6f2afad665 100644
--- a/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js
+++ b/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js
@@ -122,11 +122,18 @@ define([
             });
 
 
-            it('Should render the add data text button ', () => {
-                var $addDataButton = $dataList.find('.kb-data-list-add-data-text-button');
-                expect($addDataButton).toBeDefined();
-                expect($addDataButton.html()).toContain('Add Data');
+            it('Should render the add data text button and hide the other add data button', () => {
+                var $addDataTxtButton = $dataList.find('.kb-data-list-add-data-text-button');
+                expect($addDataTxtButton).toBeDefined();
+                expect($addDataTxtButton.length).toEqual(1);
+                expect($addDataTxtButton.is('button')).toBeTruthy();
+                expect($addDataTxtButton.html()).toContain('Add Data');
+
+                var $addDataButton = $dataList.find('.kb-data-list-add-data-button');
+                // When .hide() is called on a jquery element, the display attribute is set to none.
+                expect($addDataButton.css('display')).toEqual('none');
             });
+
         });
 
         describe('With data', () => {
@@ -174,6 +181,9 @@ define([
             it('Should generate the add data button ', () => {
                 var $addDataButton = $dataList.find('.kb-data-list-add-data-button');
                 expect($addDataButton).toBeDefined();
+                expect($addDataButton.length).toEqual(1);
+                expect($addDataButton.is('button')).toBeTruthy();
+                expect($addDataButton.css('display')).toEqual('inline-block');
             });
         });
     });

From dcce8b97940cf558a797b1304029b2a7d6ed6b7e Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Mon, 5 Oct 2020 13:07:08 -0800
Subject: [PATCH 09/61] Update button colors

---
 kbase-extension/static/kbase/css/kbaseNarrative.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index aa9a959f6f..589b2ac2c5 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -2463,7 +2463,7 @@ button.kb-data-obj {
 
 .kb-data-list-add-data-button:hover {
     cursor:pointer;
-    background-color: #4379B1;
+    background-color: #36618E;
 }
 
 .kb-data-list-add-data-text-button {
@@ -2481,7 +2481,7 @@ button.kb-data-obj {
     moz-box-shadow: 1px 1px 3px #aaa;
 }
 .kb-data-list-add-data-text-button:hover {
-    background-color: #4379B1;
+    background-color: #36618E;
 }
 
 

From c3b158a9ba87f75a4154ccd2651d939dd5d9b81b Mon Sep 17 00:00:00 2001
From: bio-boris <bioboris@github.com>
Date: Tue, 6 Oct 2020 16:41:12 -0500
Subject: [PATCH 10/61] Adds staging area text, refresh button, fixes trashcan
 moving around

---
 .../static/kbase/css/kbaseNarrative.css       | 31 +++++++++++++++++++
 .../templates/data_staging/file_path.html     | 12 +++++--
 .../data_staging/ftp_file_table.html          |  2 +-
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index 7ed67eab8a..d99f22e175 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -38,6 +38,37 @@
  max-height : 200px;
 }
 
+/* https://www.figma.com/file/T30UN3QhWhhV5SpXiqY1ij/KBase-component-library?node-id=1%3A4 */
+.kb-data-staging-button{
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-family: Oxygen, serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 18px;
+    text-align: center;
+    text-transform: uppercase;
+    color: #4379B1;
+    height:25px;
+    margin:5px;
+    position: relative;
+    top: -3px;
+}
+
+.kb-data-stagingarea{
+    font-family: Oxygen, serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 24px;
+    line-height: 30px;
+}
+
+.kb-data-staging-spacer{
+    margin-top: 10px;
+}
+
 .kb-dropzone {
     border: 2px dashed #2196F3 !important;
     margin-bottom:5px;
diff --git a/kbase-extension/static/kbase/templates/data_staging/file_path.html b/kbase-extension/static/kbase/templates/data_staging/file_path.html
index f3926ca5a6..162e4cd58f 100644
--- a/kbase-extension/static/kbase/templates/data_staging/file_path.html
+++ b/kbase-extension/static/kbase/templates/data_staging/file_path.html
@@ -1,4 +1,12 @@
-<button id="refresh" class="btn btn-xs btn-default">
+<span class="kb-data-stagingarea">Staging Area </span>
+
+<button id="refresh" class="kb-data-staging-button">
     <span><i class="fa fa-refresh fa-lg"></i></span>
+    REFRESH
 </button>
-{{#each path}}/ {{#if @last}}{{term}}{{else}}<a style="cursor:pointer" data-element="{{subpath}}">{{term}}</a>{{/if}} {{/each}}
+
+<div class="kb-data-breadcrumb">
+{{#each path}}/ {{#if @last}}{{ term }}{{ else }}<a style="cursor:pointer" data-element="{{ subpath }}">{{ term }}</a>{{/if}} {{/each}}
+</div>
+
+<div class="kb-data-staging-spacer"></div>
\ No newline at end of file
diff --git a/kbase-extension/static/kbase/templates/data_staging/ftp_file_table.html b/kbase-extension/static/kbase/templates/data_staging/ftp_file_table.html
index c86e3c70b5..0cf3aef86a 100644
--- a/kbase-extension/static/kbase/templates/data_staging/ftp_file_table.html
+++ b/kbase-extension/static/kbase/templates/data_staging/ftp_file_table.html
@@ -17,7 +17,7 @@
             <td>{{mtime}}</td>
             <td>
                 {{#if imported }}
-                <div class="pull-right">
+                <div class="pull-right" style="margin-left: -5px"> <!-- otherwise trashcan goes on new line on resize-->
                     <select id="import-type" style="width: 118px;">
                         <option></option>
                         {{#each ../uploaders}}

From 259680c1818d936f70e83b7ea086d0f00a2f6cf0 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Tue, 6 Oct 2020 13:53:33 -0800
Subject: [PATCH 11/61] Start tests

---
 .../appCell2/widgets/appCellWidget-fsm.js     |  2 +-
 .../appCell2/widgets/appCellWidget.js         |  2 -
 src/config.json                               |  2 +-
 test/unit/karma.conf.js                       |  2 +-
 .../kbaseNarrativeAppCell-spec.js             | 14 ----
 .../appCell2/widgets/appCellWidget-spec.js    | 74 +++++++++++++++++++
 6 files changed, 77 insertions(+), 19 deletions(-)
 delete mode 100644 test/unit/spec/narrative_core/kbaseNarrativeAppCell-spec.js
 create mode 100644 test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js

diff --git a/nbextensions/appCell2/widgets/appCellWidget-fsm.js b/nbextensions/appCell2/widgets/appCellWidget-fsm.js
index bd58bf4aaa..beb432e066 100644
--- a/nbextensions/appCell2/widgets/appCellWidget-fsm.js
+++ b/nbextensions/appCell2/widgets/appCellWidget-fsm.js
@@ -557,7 +557,7 @@ define([], function() {
                 },
                 actionButton: {
                     name: 'cancel',
-                    disabled: true
+                    disabled: false
                 },
                 elements: {
                     show: ['parameters-display-group', 'exec-group', 'output-group'],
diff --git a/nbextensions/appCell2/widgets/appCellWidget.js b/nbextensions/appCell2/widgets/appCellWidget.js
index 4b1b087745..424f8e298c 100644
--- a/nbextensions/appCell2/widgets/appCellWidget.js
+++ b/nbextensions/appCell2/widgets/appCellWidget.js
@@ -1593,8 +1593,6 @@ define([
             // the fact that the user may have opened and closed the tab...
             userSelectedTab = false;
 
-
-
             cell.execute();
         }
 
diff --git a/src/config.json b/src/config.json
index f9268f2ab8..4edff1a286 100644
--- a/src/config.json
+++ b/src/config.json
@@ -103,7 +103,7 @@
         "google_ad_conversion": "kR9OCLas4JgBEOy2pucC"
     },
     "comm_wait_timeout": 600000,
-    "config": "narrative-refactor",
+    "config": "dev",
     "data_panel": {
         "initial_sort_limit": 10000,
         "max_name_length": 33,
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index ddadcb0628..949f09ccca 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -11,7 +11,7 @@ module.exports = function (config) {
                 failFast: false,
                 DEFAULT_TIMEOUT_INTERVAL: 20000
             },
-            requireJsShowNoTimestampsError: '^(?!.*(^/narrative/static/))',
+            requireJsShowNoTimestampsError: '^(?!.*(^/narrative/))',
             clearContext: false
         },
         plugins: [
diff --git a/test/unit/spec/narrative_core/kbaseNarrativeAppCell-spec.js b/test/unit/spec/narrative_core/kbaseNarrativeAppCell-spec.js
deleted file mode 100644
index 1d1bdcbe5d..0000000000
--- a/test/unit/spec/narrative_core/kbaseNarrativeAppCell-spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/*global define*/
-/*global describe, it, expect*/
-/*global jasmine*/
-/*global beforeEach, afterEach*/
-/*jslint white: true*/
-define([
-    'kbaseNarrativeAppCell'
-], function(Widget) {
-    describe('Test the kbaseNarrativeAppCell widget', function() {
-        it('Should do things', function() {
-
-        });
-    });
-});
diff --git a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
new file mode 100644
index 0000000000..f7cd5a192b
--- /dev/null
+++ b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
@@ -0,0 +1,74 @@
+/*global define*/
+/*global describe, it, expect*/
+/*global jasmine*/
+/*global beforeEach, afterEach*/
+/*jslint white: true*/
+define([
+    'jquery',
+    '../../../../../../../narrative/nbextensions/appCell2/widgets/appCellWidget',
+    'kbase/js/common/monoBus'
+], function(
+    $,
+    AppCell,
+    MonoBus
+) {
+    'use strict';
+    describe('The appCell widget module', function() {
+        var myAppCell = null;
+        it('Should load', function() {
+            expect(AppCell).not.toBe(null);
+        });
+
+        it('Should return a make function', function() {
+            expect(AppCell.make).toBeDefined();
+        });
+
+    });
+
+    describe('The appCell widget instance', () => {
+        var $node = null;
+        var appCell = null;
+        var mockAppCell = null;
+
+        var workspaceInfo = {
+            globalread: "n",
+            id: 54745,
+            lockstat: "unlocked",
+            metadata: {
+                cell_count: "1",
+                narrative_nice_name: "Test Narrative",
+                searchtags: "narrative",
+                is_temporary: "false",
+                narrative: "1"
+            },
+            moddate: "2020-10-06T03:30:52+0000",
+            name: "testUser:narrative_1601948894239",
+            object_count: 1,
+            owner: "testUser",
+            user_permission: "a"
+        };
+
+        var bus = MonoBus.make();
+
+        beforeEach( () => {
+            $node = $("<div>");
+            mockAppCell = AppCell.make({
+                workspaceInfo: workspaceInfo,
+                bus: bus,
+                cell: {},
+
+            });
+            appCell = mockAppCell.start({$node});
+        });
+
+        afterEach(() => {
+            $node = null;
+            appCell = null;
+            mockAppCell = null;
+        });
+
+        it('Should return a make function', function() {
+            expect(true).toEqual(true);
+        });
+    });
+});

From 38592c47ff577c1936066b6b00c3f020cf88fdf7 Mon Sep 17 00:00:00 2001
From: Steve Chan <sychan168@gmail.com>
Date: Tue, 6 Oct 2020 14:57:23 -0700
Subject: [PATCH 12/61] Fix perms on script

---
 .github/workflows/scripts/tag_truss_latest.sh | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 mode change 100644 => 100755 .github/workflows/scripts/tag_truss_latest.sh

diff --git a/.github/workflows/scripts/tag_truss_latest.sh b/.github/workflows/scripts/tag_truss_latest.sh
old mode 100644
new mode 100755

From f094fda7ab6cee748d3e83f25fad7e87d3e19ad2 Mon Sep 17 00:00:00 2001
From: bio-boris <bioboris@github.com>
Date: Tue, 6 Oct 2020 16:59:27 -0500
Subject: [PATCH 13/61] Move style into css for breadcrumb

---
 kbase-extension/static/kbase/css/kbaseNarrative.css           | 4 ++++
 .../static/kbase/templates/data_staging/file_path.html        | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index d99f22e175..caf4f705ef 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -11,6 +11,10 @@
     text-overflow: ellipsis;
 }
 
+.kb-data-breadcrumb a {
+  cursor: pointer;
+}
+
 .kb-data-staging-footer {
     font-family : Oxygen, Arial, sans-serif;
     font-weight: bold;
diff --git a/kbase-extension/static/kbase/templates/data_staging/file_path.html b/kbase-extension/static/kbase/templates/data_staging/file_path.html
index 162e4cd58f..cd06edff7a 100644
--- a/kbase-extension/static/kbase/templates/data_staging/file_path.html
+++ b/kbase-extension/static/kbase/templates/data_staging/file_path.html
@@ -6,7 +6,7 @@
 </button>
 
 <div class="kb-data-breadcrumb">
-{{#each path}}/ {{#if @last}}{{ term }}{{ else }}<a style="cursor:pointer" data-element="{{ subpath }}">{{ term }}</a>{{/if}} {{/each}}
+{{#each path}}/ {{#if @last}}{{ term }}{{ else }}<a data-element="{{ subpath }}">{{ term }}</a>{{/if}} {{/each}}
 </div>
 
 <div class="kb-data-staging-spacer"></div>
\ No newline at end of file

From f7266be160685a2023c16087ac03982d037569cb Mon Sep 17 00:00:00 2001
From: bio-boris <bioboris@github.com>
Date: Tue, 6 Oct 2020 17:01:14 -0500
Subject: [PATCH 14/61] remove comment

---
 .../static/kbase/templates/data_staging/ftp_file_table.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kbase-extension/static/kbase/templates/data_staging/ftp_file_table.html b/kbase-extension/static/kbase/templates/data_staging/ftp_file_table.html
index 0cf3aef86a..4038ed0819 100644
--- a/kbase-extension/static/kbase/templates/data_staging/ftp_file_table.html
+++ b/kbase-extension/static/kbase/templates/data_staging/ftp_file_table.html
@@ -17,7 +17,7 @@
             <td>{{mtime}}</td>
             <td>
                 {{#if imported }}
-                <div class="pull-right" style="margin-left: -5px"> <!-- otherwise trashcan goes on new line on resize-->
+                <div class="pull-right" style="margin-left: -5px">
                     <select id="import-type" style="width: 118px;">
                         <option></option>
                         {{#each ../uploaders}}

From a248bf84d099e426760e2ba38800d3ef9d3b70ad Mon Sep 17 00:00:00 2001
From: bio-boris <bioboris@github.com>
Date: Tue, 6 Oct 2020 17:06:19 -0500
Subject: [PATCH 15/61] Matching font family generic default

---
 kbase-extension/static/kbase/css/kbaseNarrative.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index caf4f705ef..e6c9f1b670 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -26,7 +26,7 @@
 }
 
 .kb-data-staging-metadata-list {
-  font-family : Oxygen;
+  font-family : Oxygen, Arial, sans-serif;
   font-weight: bold;
   width : 115px;
   display : inline-block;
@@ -47,7 +47,7 @@
     background: none;
     border: none;
     cursor: pointer;
-    font-family: Oxygen, serif;
+    font-family: Oxygen, Arial, sans-serif;
     font-style: normal;
     font-weight: bold;
     font-size: 14px;
@@ -62,7 +62,7 @@
 }
 
 .kb-data-stagingarea{
-    font-family: Oxygen, serif;
+    font-family: Oxygen, Arial, sans-serif;
     font-style: normal;
     font-weight: bold;
     font-size: 24px;

From 9063e03b571eaab07f857ac49d85f078da3981f1 Mon Sep 17 00:00:00 2001
From: bio-boris <bioboris@github.com>
Date: Tue, 6 Oct 2020 17:06:31 -0500
Subject: [PATCH 16/61] Matching font family generic default

---
 kbase-extension/static/kbase/css/kbaseNarrative.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index e6c9f1b670..e0cad182e4 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -62,7 +62,7 @@
 }
 
 .kb-data-stagingarea{
-    font-family: Oxygen, Arial, sans-serif;
+    font-family: Oxygen;
     font-style: normal;
     font-weight: bold;
     font-size: 24px;

From c7c6fb99ff08807f042f22ea08214eafd662fa14 Mon Sep 17 00:00:00 2001
From: bio-boris <bioboris@github.com>
Date: Tue, 6 Oct 2020 17:07:11 -0500
Subject: [PATCH 17/61] Matching font family generic default

---
 kbase-extension/static/kbase/css/kbaseNarrative.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index e0cad182e4..e6c9f1b670 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -62,7 +62,7 @@
 }
 
 .kb-data-stagingarea{
-    font-family: Oxygen;
+    font-family: Oxygen, Arial, sans-serif;
     font-style: normal;
     font-weight: bold;
     font-size: 24px;

From b50aa0f463fe4113dd1e831cd47bcd78f00c479f Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Tue, 6 Oct 2020 15:56:31 -0800
Subject: [PATCH 18/61] get a test appCell working

---
 test/unit/karma.conf.js                       |  3 +-
 .../appCell2/widgets/appCellWidget-spec.js    | 91 +++++++++++++++++--
 2 files changed, 83 insertions(+), 11 deletions(-)

diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index 949f09ccca..02fd0f5219 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -32,7 +32,8 @@ module.exports = function (config) {
         },
         files: [
             'kbase-extension/static/narrative_paths.js',
-            {pattern: 'test/unit/spec/**/*.js', included: false},
+            // {pattern: 'test/unit/spec/**/*.js', included: false},
+            {pattern: 'test/unit/spec/nbextensions/appCell2/widgets/*.js', included: false},
             {pattern: 'node_modules/jasmine-ajax/lib/mock-ajax.js', included: true},
             {pattern: 'kbase-extension/static/ext_components/kbase-ui-plugin-catalog/src/plugin/modules/data/categories.yml', included: false, served: true},
             {pattern: 'kbase-extension/static/**/*.css', included: false, served: true},
diff --git a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
index f7cd5a192b..859a3f517c 100644
--- a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
+++ b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
@@ -6,11 +6,11 @@
 define([
     'jquery',
     '../../../../../../../narrative/nbextensions/appCell2/widgets/appCellWidget',
-    'kbase/js/common/monoBus'
+    'common/runtime',
 ], function(
     $,
     AppCell,
-    MonoBus
+    Runtime
 ) {
     'use strict';
     describe('The appCell widget module', function() {
@@ -48,27 +48,98 @@ define([
             user_permission: "a"
         };
 
-        var bus = MonoBus.make();
+        var cell = {
+            metadata: {
+                kbase: {
+                    attributes:{
+                        created: "Fri, 27 Mar 2020 17:39:10 GMT",
+                        id: "71e12dca-3a12-4dd7-862b-125f4337e723",
+                        info: {
+                            label: "more...",
+                            url: "/#appcatalog/app/simpleapp/example_method/beta"
+                        },
+                        lastLoaded: "Tue, 06 Oct 2020 23:28:26 GMT",
+                        status: "new",
+                        subtitle: "Perform some kind of method",
+                        title: "SimpleApp Simple Add"
+                    },
+                    appCell: {
+                        app: {
+                            spec: {
+                                parameters: [{
+                                    advanced: 0,
+                                    allow_multiple: 0,
+                                    default_values: ["0"],
+                                    description: "The first parameter that needs to be entered to drive the method. This might be the first of many.",
+                                    disabled: 0,
+                                    field_type: "text",
+                                    id: "base_number",
+                                    optional: 1,
+                                    short_hint: "The first parameter",
+                                    text_options:{
+                                        is_output_name: 0,
+                                        placeholder: "",
+                                        regex_constraint: [],
+                                        valid_ws_types: [],
+                                        validate_as: "int",
+                                        ui_class: "parameter",
+                                        ui_name: "base_number",
+                                    }
+                                }]
+                            }
+                        }
+                    }
+                }
+            }
+        };
 
-        beforeEach( () => {
+        // Can't create a cell each time. I don't know how to kill the cellBus...
+        // beforeEach( () => {
+            var bus = Runtime.make().bus()
             $node = $("<div>");
             mockAppCell = AppCell.make({
                 workspaceInfo: workspaceInfo,
                 bus: bus,
-                cell: {},
+                cell: cell,
 
             });
             appCell = mockAppCell.start({$node});
+        // });
+
+        // afterEach(() => {
+        //     $node = null;
+        //     appCell = null;
+        //     mockAppCell = null;
+        //     bus.stop();
+        // });
+
+        it('Should render an app cell', function() {
+            expect(true).toEqual(true);
         });
 
-        afterEach(() => {
-            $node = null;
-            appCell = null;
-            mockAppCell = null;
+        it('Should render the runtime control panel', function() {
+            expect(true).toEqual(true);
         });
 
-        it('Should return a make function', function() {
+        it('Should an action button in the control panel', function() {
+            expect(true).toEqual(true);
+        });
+
+        it('When the mode: execution-requsted, the cancel button should be enabled', function() {
             expect(true).toEqual(true);
         });
+
+        it('When the mode: execution-requsted, the cancel button should be enabled', function() {
+            expect(true).toEqual(true);
+        });
+
+        it('When the cancel button is clicked a confimation modal should appear', function() {
+            expect(true).toEqual(true);
+        });
+
+        it('When the cancel button is clicked a confimation modal should appear', function() {
+            expect(true).toEqual(true);
+        });
+
     });
 });

From e6914e8031c05047716bee47dff1f3bd8395793e Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Tue, 6 Oct 2020 15:58:49 -0800
Subject: [PATCH 19/61] get a test appCell working

---
 .../spec/nbextensions/appCell2/widgets/appCellWidget-spec.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
index 859a3f517c..b805826e12 100644
--- a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
+++ b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
@@ -27,7 +27,7 @@ define([
 
     describe('The appCell widget instance', () => {
         var $node = null;
-        var appCell = null;
+        var $appCell = null;
         var mockAppCell = null;
 
         var workspaceInfo = {
@@ -103,7 +103,7 @@ define([
                 cell: cell,
 
             });
-            appCell = mockAppCell.start({$node});
+            $appCell = mockAppCell.start({$node});
         // });
 
         // afterEach(() => {
@@ -114,6 +114,7 @@ define([
         // });
 
         it('Should render an app cell', function() {
+            console.log($appCell)
             expect(true).toEqual(true);
         });
 

From 2e5efa0d4a8cc9cd29f32c886a01fb25151a4ebc Mon Sep 17 00:00:00 2001
From: bio-boris <bioboris@github.com>
Date: Tue, 6 Oct 2020 19:14:00 -0500
Subject: [PATCH 20/61] ran pycharm linter

---
 .../static/kbase/css/kbaseNarrative.css       | 1012 ++++++++++-------
 .../templates/data_staging/file_path.html     |    4 +-
 2 files changed, 621 insertions(+), 395 deletions(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index e6c9f1b670..3da76befa7 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -12,38 +12,38 @@
 }
 
 .kb-data-breadcrumb a {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .kb-data-staging-footer {
-    font-family : Oxygen, Arial, sans-serif;
+    font-family: Oxygen, Arial, sans-serif;
     font-weight: bold;
-    font-size : 105%;
-    text-align : center;
-    background-color : #EEEEEE;
-    height : 32px;
-    padding : 8px;
+    font-size: 105%;
+    text-align: center;
+    background-color: #EEEEEE;
+    height: 32px;
+    padding: 8px;
 }
 
 .kb-data-staging-metadata-list {
-  font-family : Oxygen, Arial, sans-serif;
-  font-weight: bold;
-  width : 115px;
-  display : inline-block;
-  font-size : 90%;
+    font-family: Oxygen, Arial, sans-serif;
+    font-weight: bold;
+    width: 115px;
+    display: inline-block;
+    font-size: 90%;
 }
 
 .kb-data-staging-metadata-file-lines {
-  white-space : pre;
- overflow : scroll;
- font-family : monospace;
- font-size : 90%;
- background-color : #DDDDDD;
- max-height : 200px;
+    white-space: pre;
+    overflow: scroll;
+    font-family: monospace;
+    font-size: 90%;
+    background-color: #DDDDDD;
+    max-height: 200px;
 }
 
 /* https://www.figma.com/file/T30UN3QhWhhV5SpXiqY1ij/KBase-component-library?node-id=1%3A4 */
-.kb-data-staging-button{
+.kb-data-staging-button {
     background: none;
     border: none;
     cursor: pointer;
@@ -55,13 +55,13 @@
     text-align: center;
     text-transform: uppercase;
     color: #4379B1;
-    height:25px;
-    margin:5px;
+    height: 25px;
+    margin: 5px;
     position: relative;
     top: -3px;
 }
 
-.kb-data-stagingarea{
+.kb-data-stagingarea {
     font-family: Oxygen, Arial, sans-serif;
     font-style: normal;
     font-weight: bold;
@@ -69,13 +69,13 @@
     line-height: 30px;
 }
 
-.kb-data-staging-spacer{
+.kb-data-staging-spacer {
     margin-top: 10px;
 }
 
 .kb-dropzone {
     border: 2px dashed #2196F3 !important;
-    margin-bottom:5px;
+    margin-bottom: 5px;
     max-height: 150px;
     overflow-y: auto;
 }
@@ -151,6 +151,7 @@
     border-radius: 4px;
     z-index: 1000;
 }
+
 .ui-draggable.kb-data-inflight.-over {
     border-color: green;
     background-color: #EFFCEB !important;
@@ -169,6 +170,7 @@
     border-color: green;
 
 }
+
 .kb-data-list-drag-target.-drag-hover {
     height: 90px;
     transition: all 0.25s ease;
@@ -235,10 +237,10 @@ nav[role="navigation"] ul li a {
     border: 1px solid #5c9531;
 }
 
-li#searchlabel a{
- }
+li#searchlabel a {
+}
 
-input#search_terms{
+input#search_terms {
     padding: .4em 1em;
     display: inline;
     border-color: #5c9531;
@@ -248,28 +250,41 @@ input#search_terms{
     margin-top: -3px;
     background-image: url("../images/search.png");
     background-size: 22px;
-    background-repeat:no-repeat;
-    background-position:right center;
+    background-repeat: no-repeat;
+    background-position: right center;
     border-top-left-radius: 0px;
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 0px;
 }
-span#searchspan{
+
+span#searchspan {
     display: inline-block;
     width: 50%;
 }
-@media screen and (max-width: 1170px){
-    span#searchspan{width: 50%;}
+
+@media screen and (max-width: 1170px) {
+    span#searchspan {
+        width: 50%;
+    }
 }
-@media screen and (max-width: 980px){
-    span#searchspan{width: 40%;}
+
+@media screen and (max-width: 980px) {
+    span#searchspan {
+        width: 40%;
+    }
 }
-@media screen and (max-width: 768px){
-    span#searchspan{width: 30%;}
+
+@media screen and (max-width: 768px) {
+    span#searchspan {
+        width: 30%;
+    }
 }
-@media screen and (max-width: 590px){
-    span#searchspan{width: 60%;}
+
+@media screen and (max-width: 590px) {
+    span#searchspan {
+        width: 60%;
+    }
 }
 
 
@@ -296,6 +311,7 @@ span#searchspan{
     margin-right: 5px;
     min-width: 50px;
 }
+
 .navbar-right .fa::before { /* color nav icons */
     color: #2196F3;
 }
@@ -308,35 +324,45 @@ span#searchspan{
 #kb-nav-menu { /* don't add shadows here */
     box-shadow: none;
 }
+
 .kb-nav-btn > div {
     color: #666 !important;
 }
+
 .kb-nav-btn .kb-nav-btn-txt {
     font-size: 10pt;
     margin-top: -5px;
 }
+
 .navbar-right .kb-nav-btn:hover {
     background-color: #F5F5F5;
 }
+
 .kb-nav-btn-upgrade {
     background-color: #4BB856 !important;
     display: none;
 }
+
 .kb-nav-btn-upgrade .fa::before {
     color: #FFF !important;
 }
+
 .kb-nav-btn-upgrade > div {
     color: #FFF !important;
 }
+
 .kb-nav-btn-upgrade:hover {
     background-color: #43A047 !important;
 }
+
 .kb-nav-btn-upgrade.warning {
     background-color: #F44336 !important;
 }
+
 .kb-nav-btn-upgrade.warning:hover {
     background-color: #DC3C31 !important;
 }
+
 .kb-nav-menu-icon {
     display: inline-block;
     width: 20px;
@@ -344,20 +370,21 @@ span#searchspan{
     vertical-align: middle;
     margin-right: 5px;
 }
+
 .kb-nav-menu-icon .fa {
     font-size: 150%;
 }
 
 #kb-ipy-menu { /* restore rounded corners */
-  border-radius: 4px !important;
-  margin-right: 0;
+    border-radius: 4px !important;
+    margin-right: 0;
 }
 
 .btn { /* don't use drop-shadow on profile menu */
-  box-shadow: none;
-  -webkit-box-shadow: none;
-  moz-box-shadow: none;
-  xfont-size: 18px;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    moz-box-shadow: none;
+    xfont-size: 18px;
 }
 
 #signin-button .btn {
@@ -365,8 +392,9 @@ span#searchspan{
 }
 
 .btn-xs .glyphicon-user { /* also resize user btn */
-  padding: 14px 5px 14px 5px;
+    padding: 14px 5px 14px 5px;
 }
+
 /* -------------------------- */
 
 
@@ -382,7 +410,7 @@ span#searchspan{
     margin-left: auto
 }
 
-p.clear{
+p.clear {
     height: 0px;
     clear: both;
 }
@@ -441,9 +469,6 @@ p#site-title {
 }
 
 
-
-
-
 #search-input {
     margin: -11px 0;
 }
@@ -494,10 +519,10 @@ p#site-title {
 
 
 /* footer */
-#bottom-tabs{
+#bottom-tabs {
     clear: left;
-    position : fixed;
-    bottom : 0;
+    position: fixed;
+    bottom: 0;
     width: 1170px;
     margin: 0 auto;
     background-color: #fff;
@@ -523,12 +548,12 @@ p#site-title {
 
 .kb-side-overlay-container {
     width: 730px;
-    border : 1px solid #CECECE;
-    z-index : 1030;
-    background : white;
-    position : fixed;
+    border: 1px solid #CECECE;
+    z-index: 1030;
+    background: white;
+    position: fixed;
     max-height: calc(100% - 73px);
-    overflow-y:auto;
+    overflow-y: auto;
 }
 
 .kb-side-overlay-header {
@@ -636,19 +661,21 @@ p#site-title {
 }
 
 
-
 .kb-side-tab.active {
     display: inherit;
 }
+
 .kb-side-tab {
     display: none;
-    height:100%;
+    height: 100%;
 }
-.kb-narr-side-panel-set{
-    height:100%;
+
+.kb-narr-side-panel-set {
+    height: 100%;
 }
-.kb-narr-side-panel-set:last-child{
-    height:50%;
+
+.kb-narr-side-panel-set:last-child {
+    height: 50%;
 }
 
 .kb-overlay-dimmer {
@@ -679,7 +706,7 @@ p#site-title {
 }
 
 #data-add-btn:hover {
-    color:#000;
+    color: #000;
 }
 
 #data-tab-nav {
@@ -728,10 +755,12 @@ p#site-title {
     border-bottom: 1px solid #AAA;
     overflow: auto;
 }
-#data-pane p{
+
+#data-pane p {
     margin: 0px 0;
 }
-#data-pane p span{
+
+#data-pane p span {
     display: block;
     padding: 2px 10px;
     color: #fff;
@@ -740,16 +769,19 @@ p#site-title {
     margin: 0;
     text-align: center;
 }
-#data-pane p span.tab1{
+
+#data-pane p span.tab1 {
     float: right;
     background: -moz-linear-gradient(top, #666, #bbb);
     background: -webkit-linear-gradient(top, #666, #bbb);
     color: #fff;
 }
-#data-pane p span.tab2{
+
+#data-pane p span.tab2 {
     background: -moz-linear-gradient(top, #ccc, #999);
     background: -webkit-linear-gradient(top, #ccc, #999);
 }
+
 #function-pane {
     height: 30%;
     margin-top: 1px;
@@ -762,14 +794,14 @@ p#site-title {
 }
 
 #kb-function-panel .kb-function-body {
-    height: 100% ;
-    max-height: 100% ;
+    height: 100%;
+    max-height: 100%;
 }
 
 h3.pane-title {
     margin: 0;
     position: relative;
-    background-color: rgb(224,224,224);
+    background-color: rgb(224, 224, 224);
     padding: 3px 5px;
     border: 1px solid #C2C2C2;
     font-size: 16px;
@@ -784,7 +816,7 @@ h3.pane-title {
 
 ul.pane-list {
     margin: 0;
-    padding : 2px
+    padding: 2px
 }
 
 ul.pane-list li {
@@ -796,13 +828,13 @@ ul.pane-list li {
 /* --- KBase method list styles --*/
 
 .kb-method-list-logo {
-    width:  30pt;
+    width: 30pt;
     height: 30pt;
-    color:  #fff;
+    color: #fff;
     background-color: #607D8B;
-    border-style:  solid;
-    border-width:  0px;
-    border-color:  #555;
+    border-style: solid;
+    border-width: 0px;
+    border-color: #555;
     text-align: center;
     display: inline-block;
     padding-top: 6pt;
@@ -813,19 +845,19 @@ ul.pane-list li {
 }
 
 .kb-method-list-logo:hover {
-	border-width: 5px;
-	padding-top: 2.5pt;
+    border-width: 5px;
+    padding-top: 2.5pt;
 }
 
 .kb-method-list-more-div {
-    color:#777;
+    color: #777;
     font-size: 10pt;
     margin: 2px;
     text-align: justify;
 }
 
 .kb-method-list-more-div > div:last-child {
-	text-align: right;
+    text-align: right;
 }
 
 .kb-method-search-clear {
@@ -837,20 +869,23 @@ ul.pane-list li {
 /* A function in the function pane */
 li.function a {
     text-decoration: none;
-    color: rgb(80,130,50);
+    color: rgb(80, 130, 50);
 }
+
 li.function a:visited {
     /* don't recolor */
-    color: rgb(80,130,50);
+    color: rgb(80, 130, 50);
 }
+
 /* dataset in data pane */
 li.dataset a {
     text-decoration: none;
-    color: rgb(130,80,50);
+    color: rgb(130, 80, 50);
 }
+
 li.dataset a:visited {
     /* don't recolor */
-    color: rgb(130,80,50);
+    color: rgb(130, 80, 50);
 }
 
 
@@ -880,8 +915,9 @@ fieldset {
 }
 
 fieldset label {
-/*  display: block;
-*/  margin: 0 0 3px 0;
+    /*  display: block;
+    */
+    margin: 0 0 3px 0;
     font-weight: bold;
     font-size: 1em;
 
@@ -890,6 +926,7 @@ fieldset label {
 fieldset input[type="text"], fieldset select {
     width: 200px;
 }
+
 fieldset input[type="password"], fieldset select {
     width: 200px;
 }
@@ -902,24 +939,29 @@ div.dataset-cell, div.function-cell {
     padding: 7px 17px;
     border: 1px solid #ccc;
 }
-img.dataset-cell{
+
+img.dataset-cell {
     margin: 3px auto;
     padding: 0;
 }
-.function-cell{
+
+.function-cell {
     background-image: url("../images/gears.png");
     background-position: right;
     background-repeat: no-repeat;
     #background-color: #f2f2f2;
 }
+
 .dataset-cell p, .function-cell p {
     font-size: .875em;
 }
-.dataset-cell h2, .function-cell h2{
+
+.dataset-cell h2, .function-cell h2 {
     margin-bottom: 0;
     font-size: 1.1em;
 }
-.textcell{
+
+.textcell {
     width: 90%;
     margin: 3px auto;
     padding: 5px 17px;
@@ -929,11 +971,11 @@ img.dataset-cell{
     color: #111;
 }
 
-.textcell:hover{
+.textcell:hover {
     border: 2px dotted #ccc;
 }
 
-p.textcuepara{
+p.textcuepara {
     color: #ccc;
     padding: 0;
     margin: 0;
@@ -941,10 +983,11 @@ p.textcuepara{
     display: none;
 }
 
-div.tools p, div.texttools p{
+div.tools p, div.texttools p {
     margin: 0;
 }
-div.textarea{
+
+div.textarea {
     width: 650px;
     border: none;
     padding: 0;
@@ -952,51 +995,60 @@ div.textarea{
     min-height: 1.2em;
     display: none;
 }
-.tools, .texttools{
+
+.tools, .texttools {
     display: none;
 }
-.tools{
+
+.tools {
     height: 1em;
     margin-top: .5em;
     margin-left: 10px;
 }
-.tools a{
+
+.tools a {
     border: 1px solid #018841;
     padding: 2px 4px;
     font-size: 13px;
 }
 
-#narrative-header .tools{
+#narrative-header .tools {
     display: block;
     width: 30em;
     position: relative;
     top: -2.0em;
     left: 350px;
 }
-.texttools img{
+
+.texttools img {
     vertical-align: middle;
 }
-img.remove{
+
+img.remove {
     float: right;
 }
-.ui-state-highlight{
+
+.ui-state-highlight {
     background-color: fbfaed;
 }
-div.metadata{
+
+div.metadata {
     display: block;
     width: 200px;
     padding: 0 10px;
     height: 100px;
     float: left;
 }
-div.social{
+
+div.social {
     float: right;
     display: block;
     width: 80px;
     padding: 0 10px;
     display: none;
 }
-p span.notification{
+
+p span.notification {
     background-color: #ff3333;
     color: #fff;
     padding: 4px 8px;
@@ -1009,12 +1061,53 @@ p span.notification{
  * http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing
  */
 
-.dropdown-submenu{position:relative;}
-.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
-.dropdown-submenu:hover>.dropdown-menu{display:block;}
-.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
-.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
-.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
+.dropdown-submenu {
+    position: relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+    top: 0;
+    left: 100%;
+    margin-top: -6px;
+    margin-left: -1px;
+    -webkit-border-radius: 0 6px 6px 6px;
+    -moz-border-radius: 0 6px 6px 6px;
+    border-radius: 0 6px 6px 6px;
+}
+
+.dropdown-submenu:hover > .dropdown-menu {
+    display: block;
+}
+
+.dropdown-submenu > a:after {
+    display: block;
+    content: " ";
+    float: right;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 5px 0 5px 5px;
+    border-left-color: #cccccc;
+    margin-top: 5px;
+    margin-right: -10px;
+}
+
+.dropdown-submenu:hover > a:after {
+    border-left-color: #ffffff;
+}
+
+.dropdown-submenu.pull-left {
+    float: none;
+}
+
+.dropdown-submenu.pull-left > .dropdown-menu {
+    left: -100%;
+    margin-left: 10px;
+    -webkit-border-radius: 6px 0 6px 6px;
+    -moz-border-radius: 6px 0 6px 6px;
+    border-radius: 6px 0 6px 6px;
+}
 
 /** End Bootstrap 3 submenu fix **/
 
@@ -1060,7 +1153,7 @@ p span.notification{
     background-color: #f8f8f8;
 }
 
-#menubar .navbar-nav>li>a {
+#menubar .navbar-nav > li > a {
     padding-top: 10px;
     padding-bottom: 7px;
 }
@@ -1069,7 +1162,7 @@ p span.notification{
     background-image: none;
 }
 
-.panel-default>.panel-heading {
+.panel-default > .panel-heading {
     background-image: none;
 }
 
@@ -1083,7 +1176,7 @@ p span.notification{
     padding-left: 0px;
 }
 
-#menubar .navbar  {
+#menubar .navbar {
     width: 100%;
 }
 
@@ -1124,7 +1217,7 @@ div#notebook_panel {
 
 .kb-narr-side-panel {
     margin-bottom: 5px;
-    height:100%;
+    height: 100%;
 }
 
 .kb-narr-side-panel .kb-title {
@@ -1188,11 +1281,11 @@ div#notebook_panel {
 }
 
 .kbujs-error-traceback {
-    white-space : nowrap;
-    float : left;
-    max-width : 516px;
+    white-space: nowrap;
+    float: left;
+    max-width: 516px;
     max-height: 250px;
-    overflow-x : scroll;
+    overflow-x: scroll;
     overflow-y: scroll;
 }
 
@@ -1203,13 +1296,13 @@ div#notebook_panel {
 }
 
 
-
 /* tab.js */
 
 .nav-tabs .glyphicon-remove {
     margin: 0 0 0 3px;
     color: #aaa;
 }
+
 .nav-tabs .glyphicon-remove:hover {
     color: #666;
     cursor: hand;
@@ -1234,9 +1327,11 @@ div#notebook_panel {
     height: 22px;
     line-height: 22px;
 }
+
 .paging_full_numbers a:active {
     outline: none
 }
+
 .paging_full_numbers a:hover {
     text-decoration: none;
 }
@@ -1275,8 +1370,8 @@ div#notebook_panel {
 /*
  * Styles for KBase Narrative notebook page, function panel
  */
- /* Header for panel */
- .kb-function-header {
+/* Header for panel */
+.kb-function-header {
     padding: 10px 0;
     color: #0064b6;
     font-weight: bold;
@@ -1289,14 +1384,17 @@ div#notebook_panel {
     height: calc(100%);
     padding: 3px;
 }
-.kb-narr-panel-body > div{
+
+.kb-narr-panel-body > div {
     height: 100%;
 }
+
 .kb-narr-panel-body-wrapper {
     overflow-y: auto;
     height: 100%;
 }
-.kb-narr-panel-body-wrapper > div{
+
+.kb-narr-panel-body-wrapper > div {
     height: 100%;
 }
 
@@ -1306,8 +1404,8 @@ div#notebook_panel {
     cursor: pointer;
     color: #888;
     -webkit-user-select: none; /* Chrome/Safari */
-       -moz-user-select: none; /* Firefox */
-        -ms-user-select: none; /* IE10+ */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE10+ */
 }
 
 /* Container for func list */
@@ -1329,6 +1427,7 @@ div#notebook_panel {
     padding: 0;
     width: 100%;
 }
+
 .kb-function-body li {
     padding: 5px 5px;
     width: 100%;
@@ -1340,6 +1439,7 @@ div#notebook_panel {
     background-color: #eee;
     border-bottom: 1px solid #ddd;
 }
+
 .kb-function-body li:nth-child(even) {
     background-color: #fff;
     border-bottom: 1px solid #ddd;
@@ -1356,6 +1456,7 @@ div#notebook_panel {
 .kb-function-body a {
     text-decoration: none;
 }
+
 .kb-function-body a:hover {
     text-decoration: none;
 }
@@ -1458,10 +1559,10 @@ div#notebook_panel {
 }
 
 #kb-function-error-traceback {
-    white-space : nowrap;
-    float : left;
-    max-width : 250px;
-    overflow-x : scroll;
+    white-space: nowrap;
+    float: left;
+    max-width: 250px;
+    overflow-x: scroll;
 }
 
 .kb-function-dim {
@@ -1554,6 +1655,7 @@ div#notebook_panel {
     z-index: auto;
     opacity: 1;
 }
+
 .kb-cell-run h1 {
     font-family: 'Roboto';
     font-weight: normal;
@@ -1564,6 +1666,7 @@ div#notebook_panel {
     opacity: inherit;
     display: inline;
 }
+
 .kb-cell-run div.kb-func-desc {
     opacity: inherit;
     display: block;
@@ -1578,15 +1681,18 @@ div#notebook_panel {
     margin: 3px;
     opacity: inherit;
 }
+
 .kb-cell-run form input[type="submit"] {
     float: right;
     opacity: inherit;
     margin-top: 5px;
 }
+
 .kb-cell-run form .buttons {
     float: right;
     margin-top: 5px;
 }
+
 .kb-cell-params table {
     border: none;
     margin-bottom: 10px;
@@ -1594,32 +1700,35 @@ div#notebook_panel {
     margin-left: auto;
     margin-right: auto;
 }
-.kb-cell-params table > tr,td {
+
+.kb-cell-params table > tr, td {
     border: none;
     vertical-align: middle;
 }
 
-.kb-cell-params thead>tr>th,
-.kb-cell-params tbody>tr>th,
-.kb-cell-params tfoot>tr>th,
-.kb-cell-params thead>tr>td,
-.kb-cell-params tbody>tr>td,
-.kb-cell-params tfoot>tr>td {
+.kb-cell-params thead > tr > th,
+.kb-cell-params tbody > tr > th,
+.kb-cell-params tfoot > tr > th,
+.kb-cell-params thead > tr > td,
+.kb-cell-params tbody > tr > td,
+.kb-cell-params tfoot > tr > td {
     padding: 2px 4px;
 }
 
 .kb-cell-params tr:hover td, .kb-cell-params tr:hover th {
-    background:#eee;
+    background: #eee;
 }
 
 /* grey out the form while running */
 .kb-cell-run.running form {
     opacity: 0.6;
 }
+
 /* progress "meter" */
 .kb-cell-progress {
     display: none;
 }
+
 .kb-cell-progress.running {
     display: block;
 }
@@ -1673,31 +1782,30 @@ div#notebook_panel {
 }
 
 .kb-func-panel {
-  border-color: #bce8f1;
-  border-radius: 1px;
+    border-color: #bce8f1;
+    border-radius: 1px;
 }
 
 .kb-func-panel > .panel-heading {
-  color: #31708f;
-  border-radius: 1px;
-  background-color: #d9edf7;
-  border-color: #bce8f1;
-  padding: 5px 10px;
+    color: #31708f;
+    border-radius: 1px;
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+    padding: 5px 10px;
 }
 
 
-
 .kb-func-panel .panel-body {
     padding: 0px 10px;
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .kb-func-panel > .panel-heading + .panel-collapse .panel-body {
-  border-top-color: #bce8f1;
+    border-top-color: #bce8f1;
 }
 
 .kb-func-panel > .panel-footer + .panel-collapse .panel-body {
-  border-bottom-color: #bce8f1;
+    border-bottom-color: #bce8f1;
 }
 
 /** output cell styling */
@@ -1720,10 +1828,10 @@ div#notebook_panel {
 
 /* override from some jupyter style? */
 .rendered_html :link {
-  text-decoration: none;
+    text-decoration: none;
 }
 
-.kb-cell-output .nav>li>a {
+.kb-cell-output .nav > li > a {
     padding: 5px 10px;
 }
 
@@ -1731,6 +1839,7 @@ div#notebook_panel {
     background-image: none;
     padding: 5px 10px;
 }
+
 /*** styling for the jobs manager */
 .kb-jobs-title {
     font-family: Oxygen, Arial, sans-serif;
@@ -1752,7 +1861,7 @@ div#notebook_panel {
     font-family: Oxygen, Arial, sans-serif;
     font-weight: bold;
     color: #777;
-    vertical-align:top;
+    vertical-align: top;
     padding-right: 5px;
     width: 30%;
     max-width: 30%;
@@ -1769,9 +1878,11 @@ div#notebook_panel {
 .kb-jobs-error {
     background-color: #f2dede;
 }
+
 .kb-jobs-error-btn {
     font-size: 10pt;
 }
+
 .kb-jobs-item:last-child {
     border-bottom: none;
 }
@@ -1786,53 +1897,59 @@ div#notebook_panel {
 
 /** new method parameter styling **/
 .kb-method-parameter-panel {
-   border-left: 3px solid #fff;
+    border-left: 3px solid #fff;
 }
+
 .kb-method-parameter-panel-hover {
-   border-left: 3px solid #428bca;
+    border-left: 3px solid #428bca;
 }
+
 .kb-method-parameter-row {
-   margin:0px;
-   padding:5px;
-   border-radius:5px;
+    margin: 0px;
+    padding: 5px;
+    border-radius: 5px;
 }
+
 /* for some reason, the css :hover doesn't work right on this div, so we use jquery to toggle this class */
 .kb-method-parameter-row-hover {
-   background:#F9F9F9;
+    background: #F9F9F9;
 }
 
 .kb-method-parameter-row-error {
-   background: #f2dede;
+    background: #f2dede;
 }
+
 .kb-method-parameter-error-mssg {
-   padding:5px;
-   text-align:center;
-   font-family: Oxygen, sans-serif;
-   font-weight: bold;
-   font-size: 9pt;
-   color:#F44336;
+    padding: 5px;
+    text-align: center;
+    font-family: Oxygen, sans-serif;
+    font-weight: bold;
+    font-size: 9pt;
+    color: #F44336;
 }
 
 
 /* not sure how to get text in these divs to valign middle... */
 .kb-method-parameter-name {
-   font-family: Oxygen, sans-serif;
-   font-weight: bold;
-   color:#777;
-   text-align:right;
-   vertical-align:middle;
-   margin-top:3px;
-   padding-right:0px;
-   padding-left:0px;
-   white-space: normal;
+    font-family: Oxygen, sans-serif;
+    font-weight: bold;
+    color: #777;
+    text-align: right;
+    vertical-align: middle;
+    margin-top: 3px;
+    padding-right: 0px;
+    padding-left: 0px;
+    white-space: normal;
 }
+
 .kb-method-parameter-input {
-   vertical-align:middle;
-   white-space: nowrap;
-   padding-left:10px;
+    vertical-align: middle;
+    white-space: nowrap;
+    padding-left: 10px;
 }
+
 .kb-method-parameter-input input {
-   font-weight: bold;
+    font-weight: bold;
 }
 
 /*
@@ -1850,67 +1967,73 @@ control with padding, and then scooting the icon back into its column.
     /* allow space for the required (red arrow), satisfied (green checkbox) icon */
     padding-right: 20px;
 }
+
 .kb-method-parameter-input .kb-method-parameter-accepted-glyph,
 .kb-method-parameter-input .kb-method-parameter-required-glyph {
     /* This scoots the icon inside */
     margin-left: -15px;
     font-size: 15px;
 }
+
 .kb-method-parameter-hint {
     padding-left: 7px;
 }
 
 .kb-parameter-data-selection {
-   font-weight: bold;
+    font-weight: bold;
 }
 
 .kb-method-parameter-hint {
-   color: #777;
-   text-align:left;
-   margin-top:3px;
+    color: #777;
+    text-align: left;
+    margin-top: 3px;
 }
 
 .kb-method-parameter-required-glyph {
-   color: #F44336;
-   margin-left:7px;
+    color: #F44336;
+    margin-left: 7px;
 }
+
 .kb-method-parameter-accepted-glyph {
-   color: #4BB856;
-   margin-left:7px;
+    color: #4BB856;
+    margin-left: 7px;
 }
 
 .kb-method-parameter-info {
-   color: #777;
-   margin-left:7px;
+    color: #777;
+    margin-left: 7px;
 }
 
 .kb-parameter-data-row-remove {
-   color: #777;
+    color: #777;
 }
+
 .kb-parameter-data-row-add {
-   color: #777;
+    color: #777;
 }
 
 
 .kb-method-advanced-options-controller-inactive {
-   font-family: Oxygen, sans-serif;
-   font-weight: bold;
-   font-style: italic;
-   font-size: 10pt;
-   line-height: 14px;
-   color: #777;
-   text-align: center;
+    font-family: Oxygen, sans-serif;
+    font-weight: bold;
+    font-style: italic;
+    font-size: 10pt;
+    line-height: 14px;
+    color: #777;
+    text-align: center;
 }
+
 .kb-method-advanced-options-controller {
-   font-family: Oxygen, sans-serif;
-   font-weight: bold;
-   font-style: italic;
-   cursor:pointer;
-   font-size: 10pt;
-   line-height: 14px;
-   color: #0088cc;
-   text-align: center;
+    font-family: Oxygen, sans-serif;
+    font-weight: bold;
+    font-style: italic;
+    cursor: pointer;
+    font-size: 10pt;
+    line-height: 14px;
+    color: #0088cc;
+    text-align: center;
 }
+
 .kb-method-advanced-options-controller:hover {
     color: #2a6496;
 }
@@ -1940,6 +2063,7 @@ control with padding, and then scooting the icon back into its column.
 .kb-app-step-container {
     margin-top: 6px;
 }
+
 .kb-app-panel > .panel-footer {
     border: 0;
     border-radius: 0px;
@@ -1955,35 +2079,38 @@ control with padding, and then scooting the icon back into its column.
     line-height: 15px;
     color: #2E618D;
 }
+
 .kb-app-step-error-mssg {
-   font-family: sans-serif;
-   font-size: 11pt;
-   line-height: 14px;
-   color: #A63232;
-   text-align: left;
-   /* pading-left:30px; */
-   margin:10px;
+    font-family: sans-serif;
+    font-size: 11pt;
+    line-height: 14px;
+    color: #A63232;
+    text-align: left;
+    /* pading-left:30px; */
+    margin: 10px;
 }
+
 .kb-app-step-error-heading {
-   font-family: Oxygen, sans-serif;
-   font-weight: bold;
-   font-size: 13pt;
-   line-height: 14px;
-   color: #555;
-   text-align: left;
-   padding-left:5px;
-   margin-top:20px;
+    font-family: Oxygen, sans-serif;
+    font-weight: bold;
+    font-size: 13pt;
+    line-height: 14px;
+    color: #555;
+    text-align: left;
+    padding-left: 5px;
+    margin-top: 20px;
 }
+
 .kb-app-step-error-main-heading {
-   font-family: Oxygen, sans-serif;
-   cursor:pointer;
-   font-size: 16pt;
-   line-height: 18px;
-   color:#555;
-   /*background:#f2dede;*/
-   text-align: left;
-   padding-left:20px;
-   margin-top:20px;
+    font-family: Oxygen, sans-serif;
+    cursor: pointer;
+    font-size: 16pt;
+    line-height: 18px;
+    color: #555;
+    /*background:#f2dede;*/
+    text-align: left;
+    padding-left: 20px;
+    margin-top: 20px;
 }
 
 .kb-app-step-error {
@@ -2001,49 +2128,65 @@ control with padding, and then scooting the icon back into its column.
 
 /* -- "next steps" text and links -- */
 .kb-app-next {
-  border-top: 2px solid #CECECE;
+    border-top: 2px solid #CECECE;
 }
+
 .kb-app-next h3 {
-  font-family: Roboto, Helvetica, Arial, sans-serif;
-  font-size: 0.9em;
-  font-style: italic;
-  color: #888;
-  float: left;
-  padding: 0.5em 0 0.25em 0;
-  margin: 0;
-  -webkit-margin-before: 0;
-  -webkit-margin-after: 0.25em;
+    font-family: Roboto, Helvetica, Arial, sans-serif;
+    font-size: 0.9em;
+    font-style: italic;
+    color: #888;
+    float: left;
+    padding: 0.5em 0 0.25em 0;
+    margin: 0;
+    -webkit-margin-before: 0;
+    -webkit-margin-after: 0.25em;
 }
+
 .kb-app-next-hide {
-  float: right;
-  color: #2196F3;
-  font-family: Roboto, Helvetica, Arial, sans-serif;
-  font-size: 0.9em;
-  margin-top: 0.25em;
-  margin-right: 0.5em;
+    float: right;
+    color: #2196F3;
+    font-family: Roboto, Helvetica, Arial, sans-serif;
+    font-size: 0.9em;
+    margin-top: 0.25em;
+    margin-right: 0.5em;
 }
+
 .kb-app-next-unhide {
-  color: #2196F3;
-  font-family: Roboto, Helvetica, Arial, sans-serif;
-  font-size: 0.9em;
-  margin-top: 0.25em;
+    color: #2196F3;
+    font-family: Roboto, Helvetica, Arial, sans-serif;
+    font-size: 0.9em;
+    margin-top: 0.25em;
 }
+
 .kb-app-next div { /* container for links */
-  clear: both;
+    clear: both;
 }
 
 /* -- END method/app styling --*/
 
 @-webkit-keyframes pulse {
-  0% { opacity: 1.0; }
-  50% { opacity: 0.7; }
-  100% { opacity: 1.0; }
+    0% {
+        opacity: 1.0;
+    }
+    50% {
+        opacity: 0.7;
+    }
+    100% {
+        opacity: 1.0;
+    }
 }
 
 @keyframes pulse {
-  0% { opacity: 1.0; }
-  50% { opacity: 0.7; }
-  100% { opacity: 1.0; }
+    0% {
+        opacity: 1.0;
+    }
+    50% {
+        opacity: 0.7;
+    }
+    100% {
+        opacity: 1.0;
+    }
 }
 
 button.kb-app-run {
@@ -2057,12 +2200,15 @@ button.kb-app-run {
     -webkit-box-shadow: 1px 1px 1px #ccc;
     moz-box-shadow: 1px 1px 1px #ccc;
 }
+
 button.kb-app-run:hover {
     background-color: #1E88E5;
 }
+
 button.kb-app-run.kb-app-cancel {
     background-color: #F44336;
 }
+
 button.kb-app-run.kb-app-cancel:hover {
     background-color: #E53935;
 }
@@ -2079,6 +2225,7 @@ button.kb-method-run {
     -webkit-box-shadow: 1px 1px 1px #ccc;
     moz-box-shadow: 1px 1px 1px #ccc;
 }
+
 button.kb-method-run:hover {
     background-color: #1E88E5;
 }
@@ -2106,35 +2253,45 @@ div[class="tooltip-inner"] {
     white-space: pre-wrap;
     text-align: left;
 }
+
 .notebook_app .tooltip {
     z-index: 2000 !important;
 }
+
 .notebook_app .tooltip-inner {
     background-color: #1B69B6;
 }
+
 .notebook_app .tooltip.top .tooltip-arrow {
-  border-top-color: #1B69B6;
+    border-top-color: #1B69B6;
 }
+
 .notebook_app .tooltip.top-left .tooltip-arrow {
-  border-top-color: #1B69B6;
+    border-top-color: #1B69B6;
 }
+
 .notebook_app .tooltip.top-right .tooltip-arrow {
-  border-top-color: #1B69B6;
+    border-top-color: #1B69B6;
 }
+
 .notebook_app .tooltip.right .tooltip-arrow {
-  border-right-color: #1B69B6;
+    border-right-color: #1B69B6;
 }
+
 .notebook_app .tooltip.left .tooltip-arrow {
-  border-left-color: #1B69B6;
+    border-left-color: #1B69B6;
 }
+
 .notebook_app .tooltip.bottom .tooltip-arrow {
-  border-bottom-color: #1B69B6;
+    border-bottom-color: #1B69B6;
 }
+
 .notebook_app .tooltip.bottom-left .tooltip-arrow {
-  border-bottom-color: #1B69B6;
+    border-bottom-color: #1B69B6;
 }
+
 .notebook_app .tooltip.bottom-right .tooltip-arrow {
-  border-bottom-color: #1B69B6;
+    border-bottom-color: #1B69B6;
 }
 
 .kb-data-main-panel {
@@ -2144,11 +2301,12 @@ div[class="tooltip-inner"] {
 }
 
 #kb-ws {
-/*    background-color: #fff;
-    width: 100%;
-    padding-bottom: 5px;
-    height: 425px !important;
-*/}
+    /*    background-color: #fff;
+        width: 100%;
+        padding-bottom: 5px;
+        height: 425px !important;
+    */
+}
 
 #data-tabs {
     height: 375px !important;
@@ -2170,14 +2328,16 @@ div[class="tooltip-inner"] {
 }
 
 /* Data table */
-.kb-data-table thead{
+.kb-data-table thead {
     max-width: 100%;
     width: 281px;
 }
+
 .kb-data-table {
     max-height: 265px;
     width: 100% !important;
 }
+
 .kb-data-table tbody tr {
     border-bottom: 1px solid gainsboro;
 }
@@ -2196,7 +2356,7 @@ div[class="tooltip-inner"] {
 
 .kb-data-obj-name {
     text-overflow: ellipsis;
-    overflow:hidden;
+    overflow: hidden;
     white-space: nowrap;
     display: inline-block;
     max-width: 88%;
@@ -2212,7 +2372,9 @@ div[class="tooltip-inner"] {
     vertical-align: middle;
 }
 
-#kb-ws .dataTables_filter { display: none; }
+#kb-ws .dataTables_filter {
+    display: none;
+}
 
 /*------------------------------------------
  * View details on KBase objects
@@ -2224,29 +2386,35 @@ div[class="tooltip-inner"] {
 button.kb-data-obj {
     float: right;
 }
+
 /* Panel */
 .kb-data-obj-panel {
     background: linear-gradient(to bottom, #00d2ff, #B2ADCB);
     padding: 0;
     margin: 10px;
 }
+
 .kb-data-obj-panel button.close {
     margin: 5px;
     font-size: 125%;
 }
+
 .kb-data-obj-panel-info {
-    background: rgba(255,255,255,0.5);
+    background: rgba(255, 255, 255, 0.5);
     height: 100%;
     padding: 10px;
 }
+
 .kb-data-obj-panel-graph {
     background: transparent;
     height: 100%;
     padding: 10px;
 }
+
 .kb-data-obj-panel-info dl {
     margin: 0;
 }
+
 .kb-data-obj-panel-info dl dt {
     float: left;
     clear: left;
@@ -2255,36 +2423,43 @@ button.kb-data-obj {
     color: rgba(0, 0, 0, 0.5);
     /*padding: 0 0 5px 0;*/
 }
+
 .kb-data-obj-panel-info dl dt:after {
     content: ":";
 }
+
 .kb-data-obj-panel-info dl dd {
     margin: 0 0 0 100px;
     /*padding: 0 0 5px 0;*/
 }
+
 .kb-data-obj-panel-verlist span {
     padding: 0px 5px;
     margin-left: 3px;
     border-radius: 2px;
-    background-color: rgba(255,255,255,0.5);
-    color: rgba(0,0,0,0.5);
+    background-color: rgba(255, 255, 255, 0.5);
+    color: rgba(0, 0, 0, 0.5);
     cursor: pointer;
 }
+
 .kb-data-obj-panel-verlist span.selected {
     background-color: #2196F3;
     color: white;
     cursor: default;
 }
+
 .kb-data-obj-panel-graph table {
     background-color: rgba(255, 255, 255, 0.9);
     width: 100%;
     border: none;
     color: rgba(0, 0, 0, 0.8);
 }
+
 .kb-data-obj-panel-graph thead tr {
     background-color: rgb(230, 230, 230);
     color: rgba(0, 0, 0, 1);
 }
+
 .kb-data-obj-graph-ref-to {
     margin-top: 8px;
 }
@@ -2303,18 +2478,21 @@ button.kb-data-obj {
     padding: 10px 20px;
     margin: 3px;
     font-size: 14px;
-    font-family: "Roboto",Helvetica,Arial,sans-serif;
+    font-family: "Roboto", Helvetica, Arial, sans-serif;
     font-weight: 400;
     box-shadow: 1px 1px 3px #aaa;
 }
+
 .kb-primary-btn:hover {
     background-color: #1E88E5;
 }
+
 .kb-primary-btn[disabled] {
     box-shadow: none;
     background-color: #BBDEFB;
     color: #fff;
 }
+
 /* gray button in the new style */
 .kb-default-btn {
     background-color: #F5F5F5;
@@ -2324,13 +2502,15 @@ button.kb-data-obj {
     padding: 10px 20px;
     margin: 3px;
     font-size: 14px;
-    font-family: "Roboto",Helvetica,Arial,sans-serif;
+    font-family: "Roboto", Helvetica, Arial, sans-serif;
     font-weight: 400;
     box-shadow: 1px 1px 3px #aaa;
 }
+
 .kb-default-btn:hover {
     background-color: #CECECE;
 }
+
 .kb-default-btn[disabled] {
     box-shadow: none;
     color: #aaa;
@@ -2343,33 +2523,33 @@ button.kb-data-obj {
 
 /* card layout */
 
-.narrative-card-logo{
+.narrative-card-logo {
     display: flex;
     width: 50px;
     margin-right: 2px;
 }
 
-.narrative-card-row-main{
+.narrative-card-row-main {
     display: flex;
     align-items: center;
-    width:98%;
-    margin:0px 2px;
-    padding:0px 4px;
+    width: 98%;
+    margin: 0px 2px;
+    padding: 0px 4px;
 }
 
-.narrative-data-list-subcontent{
-    padding-left :10px;
+.narrative-data-list-subcontent {
+    padding-left: 10px;
 }
 
-.narrative-card-ellipsis{
-    display:flex;
+.narrative-card-ellipsis {
+    display: flex;
     align-items: center;
     justify-content: center;
-    width:20px;
+    width: 20px;
 }
 
 
-.narrative-card-palette-icon{
+.narrative-card-palette-icon {
     position: relative;
     color: '#888';
     left: 15px;
@@ -2377,14 +2557,14 @@ button.kb-data-obj {
 }
 
 
-.narrative-card-action-button-wrapper{
+.narrative-card-action-button-wrapper {
     width: 80px;
     height: 50px;
     margin: 0px 10px;
 }
 
 
-.narrative-card-action-button{
+.narrative-card-action-button {
     width: calc(100% - 6px);
     height: 80%;
     display: flex;
@@ -2392,28 +2572,31 @@ button.kb-data-obj {
     justify-content: center;
 }
 
-.narrative-card-action-button > span{
+.narrative-card-action-button > span {
     margin-right: 5px;
 }
-.narrative-card-action-button-name{
+
+.narrative-card-action-button-name {
     display: inline-block;
 }
-.narrative-data-panel-btnToolbar > span{
+
+.narrative-data-panel-btnToolbar > span {
     color: #888;
 }
-.narrative-data-panel-btnToolbar{
+
+.narrative-data-panel-btnToolbar {
     display: flex;
     justify-content: center;
 }
 
 /* data list */
-.kb-data-list-obj-row, .narrative-card-row{
+.kb-data-list-obj-row, .narrative-card-row {
     transition: all 0.1s ease;
 
     border-left-style: solid;
     border-left-width: 5px;
     border-left-color: #fff;
-    color:#333;
+    color: #333;
 
     box-shadow: 1px 1px 1px 1px #fff;
     --webkit-box-shadow: 1px 1px 1px 1px #fff;
@@ -2452,9 +2635,9 @@ button.kb-data-obj {
 
 
 .kb-data-list-obj-row-main {
-    width:100%;
-    margin:0px;
-    padding:0px;
+    width: 100%;
+    margin: 0px;
+    padding: 0px;
 }
 
 /* again the css hover over div inherits strangly, so we use js */
@@ -2471,7 +2654,7 @@ button.kb-data-obj {
 
 .kb-data-list-add-data-button {
 
-    cursor:pointer;
+    cursor: pointer;
     background-color: #F44336;
     color: #fff;
     border: none;
@@ -2480,11 +2663,12 @@ button.kb-data-obj {
     moz-box-shadow: 1px 1px 3px #aaa;
     text-align: center;
 
-    width:  30pt;
+    width: 30pt;
     height: 30pt;
     border-radius: 50%;
     padding-top: 5pt;
 }
+
 /* specialize buttons that hover over narrative */
 #kb-add-code-cell, #kb-add-md-cell {
     box-shadow: #CECECE 2px 2px 1px;
@@ -2493,11 +2677,17 @@ button.kb-data-obj {
     background-color: #2196F3;
     opacity: 0.5;
 }
-#kb-add-code-cell { right: 100px; }
-#kb-add-md-cell { margin-right: 20px; }
+
+#kb-add-code-cell {
+    right: 100px;
+}
+
+#kb-add-md-cell {
+    margin-right: 20px;
+}
 
 .kb-data-list-add-data-button:hover {
-    cursor:pointer;
+    cursor: pointer;
     background-color: #DC3C31;
 }
 
@@ -2509,12 +2699,13 @@ button.kb-data-obj {
     padding: 10px 20px;
     margin: 3px;
     font-size: 14px;
-    font-family: "Roboto",Helvetica,Arial,sans-serif;
+    font-family: "Roboto", Helvetica, Arial, sans-serif;
     font-weight: 400;
     box-shadow: 1px 1px 3px #aaa;
     -webkit-box-shadow: 1px 1px 3px #aaa;
     moz-box-shadow: 1px 1px 3px #aaa;
 }
+
 .kb-data-list-add-data-text-button:hover {
     background-color: #DC3C31;
 }
@@ -2533,9 +2724,11 @@ button.kb-data-obj {
     moz-box-shadow: 1px 1px 3px #aaa;
     margin: 5px;
 }
+
 .kb-data-list-btn:hover {
     background-color: #1E88E5;
 }
+
 .kb-data-list-btn[disabled] {
     box-shadow: none;
     background-color: #BBDEFB;
@@ -2554,29 +2747,27 @@ button.kb-data-obj {
     moz-box-shadow: 1px 1px 3px #aaa;
     margin: 5px;
 }
+
 .kb-data-list-cancel-btn:hover {
     background-color: #CECECE;
 }
 
 .kb-data-list-row-hr {
-    width:70%;
+    width: 70%;
     margin: 2px auto;
 
 }
 
 
-
-
-
 .kb-data-list-logo {
-    width:  30pt;
+    width: 30pt;
     height: 30pt;
-    color:  #fff;
+    color: #fff;
     background-color: #607D8B;
     border-radius: 50%;
-    border-style:  solid;
-    border-width:  0px;
-    border-color:  #555;
+    border-style: solid;
+    border-width: 0px;
+    border-color: #555;
     text-align: center;
     display: inline-block;
     padding-top: 6pt;
@@ -2584,20 +2775,24 @@ button.kb-data-obj {
     font-weight: bold;
     text-shadow: -1px 0 #777, 0 1px #777, 1px 0 #777, 0 -1px #777;
 }
+
 /* For shifting over logos that are stacked on
  * top of eachother */
 .kb-data-list-logo-shifted1 {
     margin-left: 1px;
     margin-top: 1px;
 }
+
 .kb-data-list-logo-shiftedx1 {
     margin-left: 8px;
     margin-top: 6px;
 }
+
 .kb-data-list-logo-shifted2 {
     margin-left: 9px;
     margin-top: 7px;
 }
+
 .kb-data-list-logo-shiftedx2 {
     margin-left: 16px;
     margin-top: 12px;
@@ -2615,6 +2810,7 @@ button.kb-data-obj {
 .kb-data-list-level1 {
     margin-left: 25px;
 }
+
 .kb-data-list-level2 {
     margin-left: 50px;
 }
@@ -2628,86 +2824,95 @@ button.kb-data-obj {
 
 
 .kb-data-list-name {
-    color:#2e618d;
+    color: #2e618d;
     font-size: 11pt;
     font-family: 'Oyxgen', Arial, sans-serif;
     font-weight: bold;
     margin: 2px;
     cursor: pointer;
 }
+
 .kb-data-list-name:hover {
     text-decoration: underline;
 }
+
 .kb-data-list-version {
-    color:#777;
+    color: #777;
     font-size: 9pt;
     font-style: italic;
     white-space: nowrap;
-    cursor:default;
+    cursor: default;
 }
+
 .kb-data-list-type {
-    color:#777;
+    color: #777;
     font-size: 10pt;
     margin: 2px;
-    cursor:default;
+    cursor: default;
 }
+
 .kb-data-list-date {
-    color:#777;
+    color: #777;
     font-size: 10pt;
     margin: 2px;
     white-space: nowrap;
-    cursor:default;
+    cursor: default;
 }
+
 .kb-data-list-edit-by {
-    color:#777;
+    color: #777;
     font-size: 10pt;
     margin: 2px;
     margin-left: 0px;
     white-space: nowrap;
     cursor: pointer;
 }
+
 .kb-data-list-edit-by:hover {
-    color:#444;
+    color: #444;
 }
 
 .kb-data-list-narinfo {
-    color:#777;
+    color: #777;
     font-size: 10pt;
     margin: 2px;
     margin-left: 10px;
     /* Not a link anymore, so we disable for now
     cursor: pointer;*/
 }
+
 .kb-data-list-narinfo:hover {
     /*color:#444;*/
 }
 
 .kb-data-list-narrative-error {
-    color:#F44336;
+    color: #F44336;
     font-size: 10pt;
     margin: 2px;
 }
 
 .kb-data-list-narrative {
-    color:#777;
+    color: #777;
     font-size: 10pt;
     margin: 2px;
     margin-left: 10px;
     /* cursor:pointer; */
 }
+
 .kb-data-list-narrative:hover {
     /* narrative btn isn't a link yet, so don't highlight
      *color:#444;*/
 }
 
 .kb-data-list-more {
-    color:#777;
+    color: #777;
     font-size: 8pt;
     margin: 0px;
     padding: 0px;
     margin-left: 15px;
     white-space: nowrap;
 }
+
 .kb-data-list-more-btn {
     padding: 2px 4px;
     font-size: 12px;
@@ -2718,43 +2923,51 @@ button.kb-data-obj {
     moz-box-shadow: none;
     margin: 0;
 }
+
 .kb-data-list-more-div {
-    color:#777;
+    color: #777;
     font-size: 10pt;
     margin: 2px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
+
 .kb-data-list-more-div tr {
-    color:#777;
+    color: #777;
     font-size: 10pt;
     margin: 2px;
 }
+
 .kb-data-list-more-div tr:hover {
     background-color: #eee;
 }
+
 .kb-data-list-more-div tr:nth-child(odd) {
     background-color: #F5F5F5;
 }
+
 .kb-data-list-more-div tr:hover:nth-child(odd) {
     background-color: #eee;
 }
+
 .kb-data-list-more-div th {
-    color:#777;
+    color: #777;
     font-size: 10pt;
     font-weight: bold;
     text-align: right;
     margin: 2px;
 }
+
 .kb-data-list-more-div td {
-    color:#777;
+    color: #777;
     font-size: 10pt;
     text-align: left;
     margin: 2px;
     padding-left: 8px;
     word-break: break-all;
 }
+
 .kb-data-list-job-name:hover {
     text-decoration: none;
 }
@@ -2772,6 +2985,7 @@ button.kb-data-obj {
     background-color: #FFF;
     text-shadow: none;
 }
+
 .kb-data-list-ctl[enabled] {
     background-color: lightgrey;
 }
@@ -2779,7 +2993,6 @@ button.kb-data-obj {
 /* end data list*/
 
 
-
 /* APP CATALOG SLIDEOUT BROWSER STYLES */
 .kbcb-browser-container {
     margin: 0 auto;
@@ -2802,14 +3015,15 @@ button.kb-data-obj {
 
 .kbcb-loading-panel-div {
     margin: 0.1em;
-    text-align:center;
-    vertical-align:middle;
+    text-align: center;
+    vertical-align: middle;
 }
 
 
 .unselected .prompt .method-icon {
     color: silver;
 }
+
 .method-icon {
     color: rgb(103, 58, 183);
 }
@@ -2817,6 +3031,7 @@ button.kb-data-obj {
 .unselected .prompt .app-icon {
     color: silver;
 }
+
 .app-icon {
     color: rgb(0, 150, 136);
 }
@@ -2834,7 +3049,7 @@ button.kb-data-obj {
 .kbcb-app-card-container {
     margin: 0.4em;
     width: 300px;
-    height:110px;
+    height: 110px;
     display: block;
     position: relative;
     float: left;
@@ -2844,48 +3059,52 @@ button.kb-data-obj {
     background: #f1f1f5;
     border-radius: 2px;
     width: 100%;
-    height:100%;
-    overflow:hidden;
-    text-align:center;
-    vertical-align:middle;
-    color:#666;
+    height: 100%;
+    overflow: hidden;
+    text-align: center;
+    vertical-align: middle;
+    color: #666;
 }
+
 .kbcb-app-card-header {
-    max-height:90px;
-    overflow:hidden;
+    max-height: 90px;
+    overflow: hidden;
     text-align: left;
 }
+
 .kbcb-app-card-title-panel {
     padding: 10px 5px 5px 5px;
 }
 
 
 .kbcb-app-card-title {
-    font-size:1.1em;
+    font-size: 1.1em;
     /*max-height: 2.6em;
     overflow:hidden;*/
 }
 
 .kbcb-app-card-module {
-    font-size:0.8em;
+    font-size: 0.8em;
 }
+
 .kbcb-app-card-authors {
-    font-size:0.8em;
+    font-size: 0.8em;
 }
+
 .kbcb-app-card-subtitle {
     padding: 10px 10px 10px 10px;
-    font-size:0.9em;
-    overflow:hidden;
+    font-size: 0.9em;
+    overflow: hidden;
 }
 
 .kbcb-app-card-footer {
-    font-size:0.9em;
-    position:absolute;
-    bottom:0;
-    left:0;
-    margin:0px 5px 5px 5px;
-    width:100%;
-    color:#888;
+    font-size: 0.9em;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    margin: 0px 5px 5px 5px;
+    width: 100%;
+    color: #888;
 }
 
 .kbcb-app-card-logo {
@@ -2895,28 +3114,31 @@ button.kb-data-obj {
 }
 
 
-.kbcb-star-default{
-    color:#888;
+.kbcb-star-default {
+    color: #888;
 }
 
 .kbcb-star-favorite {
-    color:orange;
+    color: orange;
 }
-.kbcb-star-nonfavorite, .kbcb-star-favorite, .kbcb-star-default{
-    cursor:pointer;
+
+.kbcb-star-nonfavorite, .kbcb-star-favorite, .kbcb-star-default {
+    cursor: pointer;
 }
+
 .kbcb-star-nonfavorite:hover, .kbcb-star-default:hover {
-    color:red;
+    color: red;
 }
 
 .kbcb-star-favorite:hover {
-    color:orange;
+    color: orange;
 }
 
 .kbcb-star-count {
     margin-left: 0.3em;
     display: inline-block;
 }
+
 .kbcb-run-count {
     margin-left: 0.3em;
     display: inline-block;
@@ -2924,18 +3146,19 @@ button.kb-data-obj {
 
 .kbcb-info {
 }
+
 .kbcb-info:hover {
-    color:orange;
+    color: orange;
 }
 
 .kbcb-hover {
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-  transition: all 0.2s ease-in-out;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: all 0.2s ease-in-out;
 }
 
 .kbcb-hover:hover {
-  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-  cursor:pointer;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+    cursor: pointer;
 }
 
 
@@ -2943,38 +3166,42 @@ button.kb-data-obj {
 .kbcb-app-page {
     background: #f1f1f5;
     border-radius: 2px;
-    text-align:center;
-    color:#666;
+    text-align: center;
+    color: #666;
 }
+
 .kbcb-app-page-header {
     text-align: left;
 }
+
 .kbcb-app-page-title-panel {
     padding: 10px 5px 5px 0px;
 }
 
 .kbcb-app-page-title {
-    font-size:2em;
+    font-size: 2em;
     /*max-height: 2.6em;
     overflow:hidden;*/
 }
 
 .kbcb-app-page-module {
-    font-size:1.2em;
+    font-size: 1.2em;
 }
+
 .kbcb-app-page-authors {
-    font-size:1em;
-    margin:0.3em 0 0 0;
+    font-size: 1em;
+    margin: 0.3em 0 0 0;
 }
+
 .kbcb-app-page-subtitle {
     padding: 1.5em 2em 0em 2em;
-    font-size:1.2em;
+    font-size: 1.2em;
 }
 
 .kbcb-app-page-stats-bar {
-    font-size:1.2em;
-    padding:0em 2em 0.8em 3em;
-    width:100%;
+    font-size: 1.2em;
+    padding: 0em 2em 0.8em 3em;
+    width: 100%;
 }
 
 .kbcb-app-page-logo {
@@ -2987,24 +3214,16 @@ button.kb-data-obj {
 /* END CATALOG SLIDEOUT BROWSER STYLES */
 
 
-
-
-
-
-
-
-
-
 /* share panel styles */
 .kb-share-user-permissions-dropdown {
-    border-style:none;
+    border-style: none;
     text-shadow: none !important;
     box-shadow: none;
     -webkit-box-shadow: none;
     moz-box-shadow: none;
-    padding:2px;
-    width:auto;
-    height:auto;
+    padding: 2px;
+    width: auto;
+    height: auto;
 }
 
 .kb-share-select {
@@ -3021,7 +3240,7 @@ button.kb-data-obj {
 .kb-nar-manager-titles {
     font-family: 'Oxygen';
     font-weight: bold;
-    color:  #777;
+    color: #777;
     margin: 10px;
     margin-top: 20px;
     font-size: 14pt;
@@ -3032,11 +3251,10 @@ button.kb-data-obj {
 /* End kbaseData.css */
 
 
-
 /* styling for data import overlay  */
 
 .kb-import-content {
-    position:relative;
+    position: relative;
     margin: 0 0 0 0px;
     /*overflow-x: hidden;
     overflow-y: auto;*/
@@ -3088,6 +3306,7 @@ button.kb-data-obj {
     margin-top: 15px; /*override*/
     margin-bottom: 0;
 }
+
 /*
 .kb-import-item input[type="checkbox"] {
     margin: 15px 30px 15px 0px;
@@ -3127,10 +3346,12 @@ button.kb-data-obj {
 .kb-error-dialog strong {
     color: darkgreen; /*  Douglas Adams forever */
 }
+
 .kb-err-text {
     color: black;
     font-family: Consolas, "Courier New", monospace;
 }
+
 .kb-err-warn {
     color: firebrick;
     font-style: italic;
@@ -3141,6 +3362,7 @@ button.kb-data-obj {
 #kb-ro-btn {
     margin-right: 20px;
 }
+
 #kb-view-mode {
     display: inline-block;
     font-size: 13pt;
@@ -3148,6 +3370,7 @@ button.kb-data-obj {
     padding: 0;
     cursor: pointer;
 }
+
 #kb-view-mode-narr div {
     display: inline-block;
     /*background-color: #2196F3;
@@ -3176,10 +3399,12 @@ button.kb-data-obj {
     background-color: #2196F3;
     padding-left: 5px;
 }
+
 /* move icon down a bit */
 #kb-view-mode-narr-hide span {
     margin-top: 10px;
 }
+
 /* this is the banner for readonly mode */
 .navbar-right div.label-warning {
     font-family: 'Oxygen', Arial, sans-serif;
@@ -3223,13 +3448,13 @@ button.kb-data-obj {
 }
 
 .loading-warning {
-    position:absolute;
+    position: absolute;
     display: none;
 }
 
 /* Override the default max-width of the narrative box */
 /*.container {*/
-    /*max-width: 2000px !important;*/
+/*max-width: 2000px !important;*/
 /*}*/
 
 /* Styles for KNHX trees to remove its document.write nonsense that breaks asynchronous loading */
@@ -3241,6 +3466,7 @@ button.kb-data-obj {
     visibility: hidden;
     font-size: 12px;
 }
+
 #popdiv a.alt {
     padding-left: 9px;
     font: 12px monospace;
diff --git a/kbase-extension/static/kbase/templates/data_staging/file_path.html b/kbase-extension/static/kbase/templates/data_staging/file_path.html
index cd06edff7a..dc1cc485ae 100644
--- a/kbase-extension/static/kbase/templates/data_staging/file_path.html
+++ b/kbase-extension/static/kbase/templates/data_staging/file_path.html
@@ -1,4 +1,4 @@
-<span class="kb-data-stagingarea">Staging Area </span>
+<span class="kb-data-stagingarea">Staging Area</span>
 
 <button id="refresh" class="kb-data-staging-button">
     <span><i class="fa fa-refresh fa-lg"></i></span>
@@ -6,7 +6,7 @@
 </button>
 
 <div class="kb-data-breadcrumb">
-{{#each path}}/ {{#if @last}}{{ term }}{{ else }}<a data-element="{{ subpath }}">{{ term }}</a>{{/if}} {{/each}}
+    {{#each path}}/ {{#if @last}}{{ term }}{{ else }}<a data-element="{{ subpath }}">{{ term }}</a>{{/if}} {{/each}}
 </div>
 
 <div class="kb-data-staging-spacer"></div>
\ No newline at end of file

From 0541cbfd2504c87247db9d2004c815838d5cace1 Mon Sep 17 00:00:00 2001
From: Steve Chan <sychan168@gmail.com>
Date: Wed, 7 Oct 2020 11:43:39 -0700
Subject: [PATCH 21/61] Update to see if we can get a PR image now that the
 latest image builds

---
 docs/deploy_narrative.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/deploy_narrative.md b/docs/deploy_narrative.md
index 872f82db90..018411766e 100644
--- a/docs/deploy_narrative.md
+++ b/docs/deploy_narrative.md
@@ -75,7 +75,7 @@ The [next](https://next.kbase.us), [appdev](https://appdev.kbase.us), and [prod]
 
 ### Deploying Narrative-Refactor
 
-The [narrative-refactor](https://narrative-refactor.kbase.us) image is built against the "truss" branch of the repo and is called narrative-truss:pr### when still in a PR state or narrative-truss:latest after merge
+The [narrative-refactor](https://narrative-refactor.kbase.us) image is automatically built against the "truss" branch of the repo and is called narrative-truss:pr### when still in a PR state or narrative-truss:latest after merge. The images can be found here: https://github.com/orgs/kbase/packages
 
 #### Create Release Image
 

From 649bd80a45cbc88032d553fb2733763056badd55 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Wed, 7 Oct 2020 13:35:52 -0800
Subject: [PATCH 22/61] make codacy happy

---
 test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js b/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js
index 6f2afad665..27510d8276 100644
--- a/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js
+++ b/test/unit/spec/narrative_core/kbaseNarrativeDataList-spec.js
@@ -34,7 +34,7 @@ define([
             contentType: 'application/json',
             responseText: JSON.stringify(narrativeServiceInfo)
         });
-    };
+    }
 
     function mockNarrativeServiceListObjects(objData) {
         jasmine.Ajax.stubRequest(fakeNSUrl).andReturn({

From 46059f3ad3d2ebbd0b82f6015d86b9caf6cbf5fa Mon Sep 17 00:00:00 2001
From: bio-boris <bioboris@github.com>
Date: Wed, 7 Oct 2020 16:42:07 -0500
Subject: [PATCH 23/61] Moves button. Comments out old section, not sure what
 that space was for

---
 .../narrative_core/kbaseCellToolbarMenu.js    | 50 ++++++++++---------
 1 file changed, 27 insertions(+), 23 deletions(-)

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 7523f6391c..c604e8469c 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js
@@ -368,7 +368,32 @@ define([
             var events = Events.make({ node: container }),
                 buttons = [
                     div({ class: 'buttons pull-right' }, [
-                        span({ class: 'kb-func-timestamp' }),
+                        renderOptions(cell, events),
+                        (function() {
+                            var toggleMinMax = utils.getCellMeta(cell, 'kbase.cellState.toggleMinMax', 'maximized'),
+                                toggleIcon = (toggleMinMax === 'maximized' ? 'minus' : 'plus'),
+                                color = (toggleMinMax === 'maximized' ? '#000' : 'rgba(255,137,0,1)');
+                            return button({
+                                type: 'button',
+                                class: 'btn btn-default btn-xs',
+                                dataToggle: 'tooltip',
+                                dataPlacement: 'left',
+                                title: true,
+                                dataOriginalTitle: toggleMinMax === 'maximized' ? 'Collapse Cell' : 'Expand Cell',
+                                id: events.addEvent({ type: 'click', handler: doToggleMinMaxCell })
+                            }, [
+                                span({
+                                    class: 'fa fa-' + toggleIcon + '-square-o fa-lg',
+                                    style: {
+                                        color: color
+                                    }
+                                })
+                            ]);
+                        }()),
+
+
+
+                        // span({ class: 'kb-func-timestamp' }),
                         span({ class: 'fa fa-circle-o-notch fa-spin', style: { color: 'rgb(42, 121, 191)', display: 'none' } }),
                         span({ class: 'fa fa-exclamation-triangle', style: { color: 'rgb(255, 0, 0)', display: 'none' } }),
                         (readOnly ? null : button({
@@ -393,28 +418,7 @@ define([
                         }, [
                             span({ class: 'fa fa-arrow-down fa-lg' })
                         ])),
-                        renderOptions(cell, events),
-                        (function() {
-                            var toggleMinMax = utils.getCellMeta(cell, 'kbase.cellState.toggleMinMax', 'maximized'),
-                                toggleIcon = (toggleMinMax === 'maximized' ? 'minus' : 'plus'),
-                                color = (toggleMinMax === 'maximized' ? '#000' : 'rgba(255,137,0,1)');
-                            return button({
-                                type: 'button',
-                                class: 'btn btn-default btn-xs',
-                                dataToggle: 'tooltip',
-                                dataPlacement: 'left',
-                                title: true,
-                                dataOriginalTitle: toggleMinMax === 'maximized' ? 'Collapse Cell' : 'Expand Cell',
-                                id: events.addEvent({ type: 'click', handler: doToggleMinMaxCell })
-                            }, [
-                                span({
-                                    class: 'fa fa-' + toggleIcon + '-square-o fa-lg',
-                                    style: {
-                                        color: color
-                                    }
-                                })
-                            ]);
-                        }())
+
                     ])
                 ],
                 message = div({

From fca5adbe812293194994a2d33f2f14f3e8e66841 Mon Sep 17 00:00:00 2001
From: bio-boris <bioboris@github.com>
Date: Wed, 7 Oct 2020 17:14:07 -0500
Subject: [PATCH 24/61] Fixes order of buttons

---
 .../narrative_core/kbaseCellToolbarMenu.js    | 46 +++++++++----------
 1 file changed, 21 insertions(+), 25 deletions(-)

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 c604e8469c..3272fe006c 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js
@@ -369,31 +369,6 @@ define([
                 buttons = [
                     div({ class: 'buttons pull-right' }, [
                         renderOptions(cell, events),
-                        (function() {
-                            var toggleMinMax = utils.getCellMeta(cell, 'kbase.cellState.toggleMinMax', 'maximized'),
-                                toggleIcon = (toggleMinMax === 'maximized' ? 'minus' : 'plus'),
-                                color = (toggleMinMax === 'maximized' ? '#000' : 'rgba(255,137,0,1)');
-                            return button({
-                                type: 'button',
-                                class: 'btn btn-default btn-xs',
-                                dataToggle: 'tooltip',
-                                dataPlacement: 'left',
-                                title: true,
-                                dataOriginalTitle: toggleMinMax === 'maximized' ? 'Collapse Cell' : 'Expand Cell',
-                                id: events.addEvent({ type: 'click', handler: doToggleMinMaxCell })
-                            }, [
-                                span({
-                                    class: 'fa fa-' + toggleIcon + '-square-o fa-lg',
-                                    style: {
-                                        color: color
-                                    }
-                                })
-                            ]);
-                        }()),
-
-
-
-                        // span({ class: 'kb-func-timestamp' }),
                         span({ class: 'fa fa-circle-o-notch fa-spin', style: { color: 'rgb(42, 121, 191)', display: 'none' } }),
                         span({ class: 'fa fa-exclamation-triangle', style: { color: 'rgb(255, 0, 0)', display: 'none' } }),
                         (readOnly ? null : button({
@@ -419,6 +394,27 @@ define([
                             span({ class: 'fa fa-arrow-down fa-lg' })
                         ])),
 
+                        (function() {
+                            var toggleMinMax = utils.getCellMeta(cell, 'kbase.cellState.toggleMinMax', 'maximized'),
+                                toggleIcon = (toggleMinMax === 'maximized' ? 'minus' : 'plus'),
+                                color = (toggleMinMax === 'maximized' ? '#000' : 'rgba(255,137,0,1)');
+                            return button({
+                                type: 'button',
+                                class: 'btn btn-default btn-xs',
+                                dataToggle: 'tooltip',
+                                dataPlacement: 'left',
+                                title: true,
+                                dataOriginalTitle: toggleMinMax === 'maximized' ? 'Collapse Cell' : 'Expand Cell',
+                                id: events.addEvent({ type: 'click', handler: doToggleMinMaxCell })
+                            }, [
+                                span({
+                                    class: 'fa fa-' + toggleIcon + '-square-o fa-lg',
+                                    style: {
+                                        color: color
+                                    }
+                                })
+                            ]);
+                        }())
                     ])
                 ],
                 message = div({

From 5ddbbf91921a631097c573a9501f37dec48e0c61 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Wed, 7 Oct 2020 20:11:26 -0800
Subject: [PATCH 25/61] Add working tests

---
 .../appCell2/widgets/appCellWidget-spec.js    | 232 ++++++++++--------
 1 file changed, 127 insertions(+), 105 deletions(-)

diff --git a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
index b805826e12..d7b671d1ce 100644
--- a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
+++ b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
@@ -7,140 +7,162 @@ define([
     'jquery',
     '../../../../../../../narrative/nbextensions/appCell2/widgets/appCellWidget',
     'common/runtime',
+    'base/js/namespace',
+    'bluebird'
 ], function(
     $,
     AppCell,
-    Runtime
+    Runtime,
+    Jupyter,
+    Promise
 ) {
     'use strict';
-    describe('The appCell widget module', function() {
-        var myAppCell = null;
-        it('Should load', function() {
-            expect(AppCell).not.toBe(null);
-        });
-
-        it('Should return a make function', function() {
-            expect(AppCell.make).toBeDefined();
-        });
-
-    });
-
-    describe('The appCell widget instance', () => {
-        var $node = null;
-        var $appCell = null;
-        var mockAppCell = null;
-
-        var workspaceInfo = {
-            globalread: "n",
-            id: 54745,
-            lockstat: "unlocked",
-            metadata: {
-                cell_count: "1",
-                narrative_nice_name: "Test Narrative",
-                searchtags: "narrative",
-                is_temporary: "false",
-                narrative: "1"
-            },
-            moddate: "2020-10-06T03:30:52+0000",
-            name: "testUser:narrative_1601948894239",
-            object_count: 1,
-            owner: "testUser",
-            user_permission: "a"
-        };
-
-        var cell = {
-            metadata: {
-                kbase: {
-                    attributes:{
-                        created: "Fri, 27 Mar 2020 17:39:10 GMT",
-                        id: "71e12dca-3a12-4dd7-862b-125f4337e723",
-                        info: {
-                            label: "more...",
-                            url: "/#appcatalog/app/simpleapp/example_method/beta"
-                        },
-                        lastLoaded: "Tue, 06 Oct 2020 23:28:26 GMT",
-                        status: "new",
-                        subtitle: "Perform some kind of method",
-                        title: "SimpleApp Simple Add"
+    let mockAppCell, $node, appCellPromise, $appCell;
+
+    var workspaceInfo = {
+        globalread: "n",
+        id: 54745,
+        lockstat: "unlocked",
+        metadata: {
+            cell_count: "1",
+            narrative_nice_name: "Test Narrative",
+            searchtags: "narrative",
+            is_temporary: "false",
+            narrative: "1"
+        },
+        moddate: "2020-10-06T03:30:52+0000",
+        name: "testUser:narrative_1601948894239",
+        object_count: 1,
+        owner: "testUser",
+        user_permission: "a"
+    };
+
+    var cell = {
+        cell_type: 'code',
+        metadata: {
+            kbase: {
+                type: 'app',
+                attributes:{
+                    created: "Fri, 27 Mar 2020 17:39:10 GMT",
+                    id: "71e12dca-3a12-4dd7-862b-125f4337e723",
+                    info: {
+                        label: "more...",
+                        url: "/#appcatalog/app/simpleapp/example_method/beta"
                     },
-                    appCell: {
-                        app: {
-                            spec: {
-                                parameters: [{
-                                    advanced: 0,
-                                    allow_multiple: 0,
-                                    default_values: ["0"],
-                                    description: "The first parameter that needs to be entered to drive the method. This might be the first of many.",
-                                    disabled: 0,
-                                    field_type: "text",
-                                    id: "base_number",
-                                    optional: 1,
-                                    short_hint: "The first parameter",
-                                    text_options:{
-                                        is_output_name: 0,
-                                        placeholder: "",
-                                        regex_constraint: [],
-                                        valid_ws_types: [],
-                                        validate_as: "int",
-                                        ui_class: "parameter",
-                                        ui_name: "base_number",
-                                    }
-                                }]
-                            }
+                    lastLoaded: "Tue, 06 Oct 2020 23:28:26 GMT",
+                    status: "new",
+                    subtitle: "Perform some kind of method",
+                    title: "SimpleApp Simple Add"
+                },
+                appCell: {
+                    app: {
+                        spec: {
+                            parameters: [{
+                                advanced: 0,
+                                allow_multiple: 0,
+                                default_values: ["0"],
+                                description: "The first parameter that needs to be entered to drive the method. This might be the first of many.",
+                                disabled: 0,
+                                field_type: "text",
+                                id: "base_number",
+                                optional: 1,
+                                short_hint: "The first parameter",
+                                text_options:{
+                                    is_output_name: 0,
+                                    placeholder: "",
+                                    regex_constraint: [],
+                                    valid_ws_types: [],
+                                    validate_as: "int",
+                                    ui_class: "parameter",
+                                    ui_name: "base_number",
+                                }
+                            }]
                         }
                     }
-                }
-            }
-        };
+                },
+                input: {
 
-        // Can't create a cell each time. I don't know how to kill the cellBus...
-        // beforeEach( () => {
-            var bus = Runtime.make().bus()
-            $node = $("<div>");
+                },
+            }
+        }
+    };
+
+    Jupyter.notebook = {
+        writable: true
+    };
+    Jupyter.narrative = {
+        readonly: false
+    };
+
+    // Can only test the public functions...
+    describe('The appCell widget', () => {
+
+        beforeEach( async () => {
+            $node = $('<div>');
+            var bus = Runtime.make().bus();
             mockAppCell = AppCell.make({
                 workspaceInfo: workspaceInfo,
                 bus: bus,
                 cell: cell,
-
             });
-            $appCell = mockAppCell.start({$node});
-        // });
+        });
 
-        // afterEach(() => {
-        //     $node = null;
-        //     appCell = null;
-        //     mockAppCell = null;
-        //     bus.stop();
-        // });
+        afterEach(() => {
+            mockAppCell = null;
+            window.kbaseRuntime = null;
+        });
 
-        it('Should render an app cell', function() {
-            console.log($appCell)
-            expect(true).toEqual(true);
+        it('Should load', () => {
+            expect(AppCell).not.toBe(null);
         });
 
-        it('Should render the runtime control panel', function() {
-            expect(true).toEqual(true);
+        it('Should return a make function', () => {
+            expect(AppCell.make).toBeDefined();
         });
 
-        it('Should an action button in the control panel', function() {
-            expect(true).toEqual(true);
+        it('Can be instantiated', () => {
+            expect(mockAppCell).not.toBe(null);
         });
 
-        it('When the mode: execution-requsted, the cancel button should be enabled', function() {
-            expect(true).toEqual(true);
+        it('Has expected functions when instantiated', () => {
+            expect(mockAppCell.init).toBeDefined();
+            expect(mockAppCell.attach).toBeDefined();
+            expect(mockAppCell.start).toBeDefined();
+            expect(mockAppCell.stop).toBeDefined();
+            expect(mockAppCell.detach).toBeDefined();
         });
 
-        it('When the mode: execution-requsted, the cancel button should be enabled', function() {
-            expect(true).toEqual(true);
+        it('has a method "init" which returns a promise then null', async () => {
+            var initPromise = mockAppCell.init();
+            expect(initPromise instanceof Promise).toBeTrue();
+
+            var result = await initPromise;
+            expect(result).toBeNull();
         });
 
-        it('When the cancel button is clicked a confimation modal should appear', function() {
-            expect(true).toEqual(true);
+        // it('has a method "attach" which returns a promise then null', async () => {
+        //     var attatchPromise = mockAppCell.attach($node);
+        //     expect(attatchPromise instanceof Promise).toBeTrue();
+
+        //     var result = await attatchPromise;
+        //     expect(result).toBeNull();
+        // });
+
+        // it('has a method "start" which returns a Promise', () => {
+        //         expect(appCellPromise instanceof Promise).toBeTrue();
+        //     }
+        // );
+
+        it('has a method "stop" which returns a Promise', () => {
+            var stopPromise = mockAppCell.stop();
+            expect(stopPromise instanceof Promise).toBeTrue();
         });
 
-        it('When the cancel button is clicked a confimation modal should appear', function() {
-            expect(true).toEqual(true);
+        it('has a method "detach" which returns a Promise', () => {
+            var detachPromise = mockAppCell.stop();
+            expect(detachPromise instanceof Promise).toBeTrue();
         });
 
     });
+
 });

From 5186db733818c09640e73538ace9fb508ebf74d5 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Wed, 7 Oct 2020 20:14:31 -0800
Subject: [PATCH 26/61] Add working tests

---
 .../appCell2/widgets/appCellWidget-spec.js            | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
index d7b671d1ce..906056305e 100644
--- a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
+++ b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
@@ -148,10 +148,13 @@ define([
         //     expect(result).toBeNull();
         // });
 
-        // it('has a method "start" which returns a Promise', () => {
-        //         expect(appCellPromise instanceof Promise).toBeTrue();
-        //     }
-        // );
+        it('has a method "start" which returns a Promise', () => {
+            var startPromise = mockAppCell.start();
+            expect(initPromise instanceof Promise).toBeTrue();
+
+            var result = await startPromise;
+            expect(result).toBeNull();
+        });
 
         it('has a method "stop" which returns a Promise', () => {
             var stopPromise = mockAppCell.stop();

From 94e5089995298ec17de491d79fddd5396f8ee33f Mon Sep 17 00:00:00 2001
From: Bill Riehl <wjriehl@lbl.gov>
Date: Thu, 8 Oct 2020 08:33:20 -0700
Subject: [PATCH 27/61] make folder names clickable

---
 .../static/kbase/css/kbaseNarrative.css           |  5 +++++
 .../narrative_core/upload/stagingAreaViewer.js    | 15 +++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index 7ed67eab8a..2043d6a4a3 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -11,6 +11,11 @@
     text-overflow: ellipsis;
 }
 
+.kb-data-staging-table-name > .kb-data-staging-folder:hover {
+    cursor: pointer;
+    text-decoration: underline;
+}
+
 .kb-data-staging-footer {
     font-family : Oxygen, Arial, sans-serif;
     font-weight: bold;
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
index 3ef919b067..119234c13d 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
@@ -272,7 +272,7 @@ define([
                             if (isFolder) {
                                 disp = '<button data-name="' + full[1] + '" class="btn btn-xs btn-default">' + disp + '</button>';
                             } else {
-                                disp = "<i class='fa fa-caret-right' data-caret='" + full[1] + "' style='cursor : pointer'></i> " + disp;
+                                disp = '<i class="fa fa-caret-right" data-caret="' + full[1] + '" style="cursor : pointer"></i> ' + disp;
                             }
                             return disp;
                         } else {
@@ -283,12 +283,18 @@ define([
                     aTargets: [1],
                     sClass: 'staging-name',
                     mRender: function (data, type, full) {
+                        console.log(data);
+                        console.log(full[0]);
                         if (type === 'display') {
 
                             var decompressButton = '';
 
                             if (data.match(/\.(zip|tar\.gz|tgz|tar\.bz|tar\.bz2|tar|gz|bz2)$/)) {
-                                decompressButton = "<button class='btn btn-default btn-xs' style='border : 1px solid #cccccc; border-radius : 1px' data-decompress='" + data + "'><i class='fa fa-expand'></i></button> ";
+                                decompressButton = '<button class="btn btn-default btn-xs" style="border : 1px solid #cccccc; border-radius : 1px" data-decompress="' + data + '><i class="fa fa-expand"></i></button> ';
+                            }
+
+                            if (full[0] === 'true') {
+                                data = '<span class="kb-data-staging-folder" data-name="' + data + '">' + data + '</span>';
                             }
 
                             return '<div class="kb-data-staging-table-name">' + decompressButton +
@@ -333,6 +339,10 @@ define([
                             hide: Config.get('tooltip').hideDelay
                         }
                     });
+                    $('td:eq(1)', nRow).find('span.kb-data-staging-folder').off('click').on('click', e => {
+                        $(e.currentTarget).off('click');
+                        this.updatePathFn(this.path += '/' + $(e.currentTarget).data().name);
+                    });
                     $('td:eq(4)', nRow).find('select').select2({
                         placeholder: 'Select format'
                     });
@@ -367,6 +377,7 @@ define([
 
 
                     $('td:eq(0)', nRow).find('button[data-name]').off('click').on('click', e => {
+                        $(e.currentTarget).off('click');
                         this.updatePathFn(this.path += '/' + $(e.currentTarget).data().name);
                     });
 

From c05d31de2bbd8220744b6cb0e42d0152d7fee9cd Mon Sep 17 00:00:00 2001
From: Bill Riehl <wjriehl@lbl.gov>
Date: Thu, 8 Oct 2020 09:00:37 -0700
Subject: [PATCH 28/61] convert some inline styles to classes

---
 kbase-extension/static/kbase/css/kbaseNarrative.css   | 11 ++++++++++-
 .../narrative_core/upload/stagingAreaViewer.js        |  9 +++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index 2043d6a4a3..3418d53fa3 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -5,17 +5,26 @@
     font-weight: bold;
 }
 
+.kb-data-staging-decompress {
+    border: 1px solid #cccccc;
+    border-radius : 1px;
+}
+
 .kb-data-staging-table-name {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.kb-data-staging-table-name > .kb-data-staging-folder:hover {
+.kb-data-staging-folder:hover {
     cursor: pointer;
     text-decoration: underline;
 }
 
+.kb-pointer {
+    cursor: pointer;
+}
+
 .kb-data-staging-footer {
     font-family : Oxygen, Arial, sans-serif;
     font-weight: bold;
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
index 119234c13d..c53d6c29e6 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
@@ -272,7 +272,7 @@ define([
                             if (isFolder) {
                                 disp = '<button data-name="' + full[1] + '" class="btn btn-xs btn-default">' + disp + '</button>';
                             } else {
-                                disp = '<i class="fa fa-caret-right" data-caret="' + full[1] + '" style="cursor : pointer"></i> ' + disp;
+                                disp = '<i class="fa fa-caret-right kb-pointer" data-caret="' + full[1] + '"></i> ' + disp;
                             }
                             return disp;
                         } else {
@@ -283,14 +283,11 @@ define([
                     aTargets: [1],
                     sClass: 'staging-name',
                     mRender: function (data, type, full) {
-                        console.log(data);
-                        console.log(full[0]);
                         if (type === 'display') {
-
-                            var decompressButton = '';
+                            let decompressButton = '';
 
                             if (data.match(/\.(zip|tar\.gz|tgz|tar\.bz|tar\.bz2|tar|gz|bz2)$/)) {
-                                decompressButton = '<button class="btn btn-default btn-xs" style="border : 1px solid #cccccc; border-radius : 1px" data-decompress="' + data + '><i class="fa fa-expand"></i></button> ';
+                                decompressButton = '<button class="btn btn-default btn-xs kb-data-staging-decompress" data-decompress="' + data + '><i class="fa fa-expand"></i></button> ';
                             }
 
                             if (full[0] === 'true') {

From bc8cb73b908e95e13a515d9e9a3aeed3650de829 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Thu, 8 Oct 2020 14:03:02 -0800
Subject: [PATCH 29/61] Update tests

---
 .../appCell2/widgets/appCellWidget-spec.js    | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
index 906056305e..7fd5a86324 100644
--- a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
+++ b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
@@ -37,6 +37,8 @@ define([
         user_permission: "a"
     };
 
+    $inputElement = $('<div>');
+
     var cell = {
         cell_type: 'code',
         metadata: {
@@ -80,9 +82,7 @@ define([
                         }
                     }
                 },
-                input: {
-
-                },
+                input: [inputElement],
             }
         }
     };
@@ -132,13 +132,13 @@ define([
             expect(mockAppCell.detach).toBeDefined();
         });
 
-        it('has a method "init" which returns a promise then null', async () => {
-            var initPromise = mockAppCell.init();
-            expect(initPromise instanceof Promise).toBeTrue();
+        // it('has a method "init" which returns a promise then null', async () => {
+        //     var initPromise = mockAppCell.init();
+        //     expect(initPromise instanceof Promise).toBeTrue();
 
-            var result = await initPromise;
-            expect(result).toBeNull();
-        });
+        //     var result = await initPromise;
+        //     expect(result).toBeNull();
+        // });
 
         // it('has a method "attach" which returns a promise then null', async () => {
         //     var attatchPromise = mockAppCell.attach($node);
@@ -148,9 +148,9 @@ define([
         //     expect(result).toBeNull();
         // });
 
-        it('has a method "start" which returns a Promise', () => {
+        it('has a method "start" which returns a Promise', async () => {
             var startPromise = mockAppCell.start();
-            expect(initPromise instanceof Promise).toBeTrue();
+            expect(startPromise instanceof Promise).toBeTrue();
 
             var result = await startPromise;
             expect(result).toBeNull();

From 7a607f2a7db30da74095bbd9f0899b07112f48da Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Thu, 8 Oct 2020 14:13:04 -0800
Subject: [PATCH 30/61] Cleanup comments

---
 .../appCell2/widgets/appCellWidget-spec.js     | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
index 7fd5a86324..736439a637 100644
--- a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
+++ b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
@@ -17,7 +17,7 @@ define([
     Promise
 ) {
     'use strict';
-    let mockAppCell, $node, appCellPromise, $appCell;
+    let mockAppCell, $node;
 
     var workspaceInfo = {
         globalread: "n",
@@ -132,22 +132,6 @@ define([
             expect(mockAppCell.detach).toBeDefined();
         });
 
-        // it('has a method "init" which returns a promise then null', async () => {
-        //     var initPromise = mockAppCell.init();
-        //     expect(initPromise instanceof Promise).toBeTrue();
-
-        //     var result = await initPromise;
-        //     expect(result).toBeNull();
-        // });
-
-        // it('has a method "attach" which returns a promise then null', async () => {
-        //     var attatchPromise = mockAppCell.attach($node);
-        //     expect(attatchPromise instanceof Promise).toBeTrue();
-
-        //     var result = await attatchPromise;
-        //     expect(result).toBeNull();
-        // });
-
         it('has a method "start" which returns a Promise', async () => {
             var startPromise = mockAppCell.start();
             expect(startPromise instanceof Promise).toBeTrue();

From 6050bb287179bef7a6d0bc3c1664f30f8dc557e3 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Thu, 8 Oct 2020 14:14:36 -0800
Subject: [PATCH 31/61] revert config.json

---
 src/config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config.json b/src/config.json
index 4edff1a286..f9268f2ab8 100644
--- a/src/config.json
+++ b/src/config.json
@@ -103,7 +103,7 @@
         "google_ad_conversion": "kR9OCLas4JgBEOy2pucC"
     },
     "comm_wait_timeout": 600000,
-    "config": "dev",
+    "config": "narrative-refactor",
     "data_panel": {
         "initial_sort_limit": 10000,
         "max_name_length": 33,

From 1173b531b668eb36b80e44bca1376ccfd8d2e158 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Thu, 8 Oct 2020 14:16:43 -0800
Subject: [PATCH 32/61] revert karma conf

---
 test/unit/karma.conf.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index 02fd0f5219..949f09ccca 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -32,8 +32,7 @@ module.exports = function (config) {
         },
         files: [
             'kbase-extension/static/narrative_paths.js',
-            // {pattern: 'test/unit/spec/**/*.js', included: false},
-            {pattern: 'test/unit/spec/nbextensions/appCell2/widgets/*.js', included: false},
+            {pattern: 'test/unit/spec/**/*.js', included: false},
             {pattern: 'node_modules/jasmine-ajax/lib/mock-ajax.js', included: true},
             {pattern: 'kbase-extension/static/ext_components/kbase-ui-plugin-catalog/src/plugin/modules/data/categories.yml', included: false, served: true},
             {pattern: 'kbase-extension/static/**/*.css', included: false, served: true},

From 05baf100aa6268d606bc63004554ef92211361f0 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Thu, 8 Oct 2020 14:41:17 -0800
Subject: [PATCH 33/61] center icon

---
 kbase-extension/static/kbase/css/kbaseNarrative.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index 589b2ac2c5..3a214c49b9 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -2448,7 +2448,6 @@ button.kb-data-obj {
     width:  30pt;
     height: 30pt;
     border-radius: 50%;
-    padding-top: 5pt;
 }
 /* specialize buttons that hover over narrative */
 #kb-add-code-cell, #kb-add-md-cell {

From f32c3025b654cb96795091af9bd27367cc202593 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Thu, 8 Oct 2020 14:51:06 -0800
Subject: [PATCH 34/61] make codacy happy

---
 .../appCell2/widgets/appCellWidget-spec.js    | 69 +++++++++----------
 1 file changed, 32 insertions(+), 37 deletions(-)

diff --git a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
index 736439a637..fb79e0aca8 100644
--- a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
+++ b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
@@ -1,6 +1,4 @@
-/*global define*/
 /*global describe, it, expect*/
-/*global jasmine*/
 /*global beforeEach, afterEach*/
 /*jslint white: true*/
 define([
@@ -20,41 +18,39 @@ define([
     let mockAppCell, $node;
 
     var workspaceInfo = {
-        globalread: "n",
+        globalread: 'n',
         id: 54745,
-        lockstat: "unlocked",
+        lockstat: 'unlocked',
         metadata: {
-            cell_count: "1",
-            narrative_nice_name: "Test Narrative",
-            searchtags: "narrative",
-            is_temporary: "false",
-            narrative: "1"
+            cell_count: '1',
+            narrative_nice_name: 'Test Narrative',
+            searchtags: 'narrative',
+            is_temporary: 'false',
+            narrative: '1'
         },
-        moddate: "2020-10-06T03:30:52+0000",
-        name: "testUser:narrative_1601948894239",
+        moddate: '2020-10-06T03:30:52+0000',
+        name: 'testUser:narrative_1601948894239',
         object_count: 1,
-        owner: "testUser",
-        user_permission: "a"
+        owner: 'testUser',
+        user_permission: 'a'
     };
 
-    $inputElement = $('<div>');
-
     var cell = {
         cell_type: 'code',
         metadata: {
             kbase: {
                 type: 'app',
                 attributes:{
-                    created: "Fri, 27 Mar 2020 17:39:10 GMT",
-                    id: "71e12dca-3a12-4dd7-862b-125f4337e723",
+                    created: 'Fri, 27 Mar 2020 17:39:10 GMT',
+                    id: '71e12dca-3a12-4dd7-862b-125f4337e723',
                     info: {
-                        label: "more...",
-                        url: "/#appcatalog/app/simpleapp/example_method/beta"
+                        label: 'more...',
+                        url: '/#appcatalog/app/simpleapp/example_method/beta'
                     },
-                    lastLoaded: "Tue, 06 Oct 2020 23:28:26 GMT",
-                    status: "new",
-                    subtitle: "Perform some kind of method",
-                    title: "SimpleApp Simple Add"
+                    lastLoaded: 'Tue, 06 Oct 2020 23:28:26 GMT',
+                    status: 'new',
+                    subtitle: 'Perform some kind of method',
+                    title: 'SimpleApp Simple Add'
                 },
                 appCell: {
                     app: {
@@ -62,27 +58,26 @@ define([
                             parameters: [{
                                 advanced: 0,
                                 allow_multiple: 0,
-                                default_values: ["0"],
-                                description: "The first parameter that needs to be entered to drive the method. This might be the first of many.",
+                                default_values: ['0'],
+                                description: 'The first parameter that needs to be entered to drive the method. This might be the first of many.',
                                 disabled: 0,
-                                field_type: "text",
-                                id: "base_number",
+                                field_type: 'text',
+                                id: 'base_number',
                                 optional: 1,
-                                short_hint: "The first parameter",
+                                short_hint: 'The first parameter',
                                 text_options:{
                                     is_output_name: 0,
-                                    placeholder: "",
+                                    placeholder: '',
                                     regex_constraint: [],
                                     valid_ws_types: [],
-                                    validate_as: "int",
-                                    ui_class: "parameter",
-                                    ui_name: "base_number",
+                                    validate_as: 'int',
+                                    ui_class: 'parameter',
+                                    ui_name: 'base_number',
                                 }
                             }]
                         }
                     }
                 },
-                input: [inputElement],
             }
         }
     };
@@ -97,7 +92,7 @@ define([
     // Can only test the public functions...
     describe('The appCell widget', () => {
 
-        beforeEach( async () => {
+        beforeEach( () => {
             $node = $('<div>');
             var bus = Runtime.make().bus();
             mockAppCell = AppCell.make({
@@ -132,7 +127,7 @@ define([
             expect(mockAppCell.detach).toBeDefined();
         });
 
-        it('has a method "start" which returns a Promise', async () => {
+        it('has a method start which returns a Promise', async () => {
             var startPromise = mockAppCell.start();
             expect(startPromise instanceof Promise).toBeTrue();
 
@@ -140,12 +135,12 @@ define([
             expect(result).toBeNull();
         });
 
-        it('has a method "stop" which returns a Promise', () => {
+        it('has a method stop which returns a Promise', () => {
             var stopPromise = mockAppCell.stop();
             expect(stopPromise instanceof Promise).toBeTrue();
         });
 
-        it('has a method "detach" which returns a Promise', () => {
+        it('has a method detach which returns a Promise', () => {
             var detachPromise = mockAppCell.stop();
             expect(detachPromise instanceof Promise).toBeTrue();
         });

From 7a9953692f388a91993d8b96f289335c6d0bb70e Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Thu, 8 Oct 2020 14:59:20 -0800
Subject: [PATCH 35/61] make codacy happy

---
 .../spec/nbextensions/appCell2/widgets/appCellWidget-spec.js   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
index fb79e0aca8..dad49e1f64 100644
--- a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
+++ b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
@@ -15,7 +15,7 @@ define([
     Promise
 ) {
     'use strict';
-    let mockAppCell, $node;
+    let mockAppCell;
 
     var workspaceInfo = {
         globalread: 'n',
@@ -93,7 +93,6 @@ define([
     describe('The appCell widget', () => {
 
         beforeEach( () => {
-            $node = $('<div>');
             var bus = Runtime.make().bus();
             mockAppCell = AppCell.make({
                 workspaceInfo: workspaceInfo,

From 83e57f7522a9e60ccf9cab9611f68c5b4e437f92 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Thu, 8 Oct 2020 15:09:26 -0800
Subject: [PATCH 36/61] oops

---
 test/unit/karma.conf.js                                   | 2 +-
 .../nbextensions/appCell2/widgets/appCellWidget-spec.js   | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index 949f09ccca..ccd97f52fe 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -32,7 +32,7 @@ module.exports = function (config) {
         },
         files: [
             'kbase-extension/static/narrative_paths.js',
-            {pattern: 'test/unit/spec/**/*.js', included: false},
+            {pattern: 'test/unit/spec/nbextensions/appCell2/widgets/*.js', included: false},
             {pattern: 'node_modules/jasmine-ajax/lib/mock-ajax.js', included: true},
             {pattern: 'kbase-extension/static/ext_components/kbase-ui-plugin-catalog/src/plugin/modules/data/categories.yml', included: false, served: true},
             {pattern: 'kbase-extension/static/**/*.css', included: false, served: true},
diff --git a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
index dad49e1f64..19edd66c3e 100644
--- a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
+++ b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
@@ -126,11 +126,11 @@ define([
             expect(mockAppCell.detach).toBeDefined();
         });
 
-        it('has a method start which returns a Promise', async () => {
-            var startPromise = mockAppCell.start();
-            expect(startPromise instanceof Promise).toBeTrue();
+        it('has a method "init" which returns a promise then null', async () => {
+            var initPromise = mockAppCell.init();
+            expect(initPromise instanceof Promise).toBeTrue();
 
-            var result = await startPromise;
+            var result = await initPromise;
             expect(result).toBeNull();
         });
 

From 47be99011278c6128d34650ab52a188a4dddc48e Mon Sep 17 00:00:00 2001
From: Bill Riehl <wjriehl@lbl.gov>
Date: Thu, 8 Oct 2020 16:28:16 -0700
Subject: [PATCH 37/61] add tests for clicking folders and names

---
 .../upload/stagingAreaViewer.js               |   1 +
 .../upload/stagingAreaViewer-spec.js          | 103 ++++++++++--------
 2 files changed, 57 insertions(+), 47 deletions(-)

diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
index c53d6c29e6..bd96ad5a62 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
@@ -43,6 +43,7 @@ define([
 
         options: {
             refreshIntervalDuration: 30000,
+            path: '/'
         },
 
         init: function (options) {
diff --git a/test/unit/spec/narrative_core/upload/stagingAreaViewer-spec.js b/test/unit/spec/narrative_core/upload/stagingAreaViewer-spec.js
index 0b51deb5f9..7a16f4ae72 100644
--- a/test/unit/spec/narrative_core/upload/stagingAreaViewer-spec.js
+++ b/test/unit/spec/narrative_core/upload/stagingAreaViewer-spec.js
@@ -10,21 +10,21 @@ define ([
     'base/js/namespace',
     'kbaseNarrative',
     'testUtil'
-], function(
+], (
     $,
     StagingAreaViewer,
     Jupyter
-) {
+) => {
     'use strict';
 
-    describe('Test the staging area viewer widget', function() {
+    describe('Test the staging area viewer widget', () => {
         let stagingViewer,
-            $targetNode = $('<div>'),
+            $targetNode,
             startingPath = '/',
-            updatePathFn = function(newPath) { },
+            updatePathFn = () => {},
             fakeUser = 'notAUser';
 
-        beforeEach(function() {
+        beforeEach(() => {
             jasmine.Ajax.install();
             jasmine.Ajax.stubRequest(/.*\/staging_service\/list\/?/).andReturn({
                 status: 200,
@@ -33,14 +33,14 @@ define ([
                 responseHeaders: '',
                 responseText: JSON.stringify([
                     {
-                        name: "test_folder",
-                        path: fakeUser + "/test_folder",
+                        name: 'test_folder',
+                        path: fakeUser + '/test_folder',
                         mtime: 1532738637499,
                         size: 34,
                         isFolder: true
                     }, {
-                        name: "file_list.txt",
-                        path: fakeUser + "/test_folder/file_list.txt",
+                        name: 'file_list.txt',
+                        path: fakeUser + '/test_folder/file_list.txt',
                         mtime: 1532738637555,
                         size: 49233,
                         source: 'KBase upload'
@@ -49,7 +49,7 @@ define ([
             });
             Jupyter.narrative = {
                 userId: fakeUser,
-                getAuthToken: () => { return 'fakeToken'; },
+                getAuthToken: () => 'fakeToken',
                 sidePanel: {
                     '$dataWidget': {
                         '$overlayPanel': {}
@@ -59,9 +59,10 @@ define ([
                     }
                 },
                 showDataOverlay: () => {},
-                addAndPopulateApp: (id, tag, inputs) => {},
+                addAndPopulateApp: () => {},
                 hideOverlay: () => {},
             };
+            $targetNode = $('<div>');
             stagingViewer = new StagingAreaViewer($targetNode, {
                 path: startingPath,
                 updatePathFn: updatePathFn,
@@ -78,16 +79,16 @@ define ([
             stagingViewer = null;
         });
 
-        it('Should initialize properly', function() {
+        it('Should initialize properly', () => {
             expect(stagingViewer).not.toBeNull();
         });
 
-        it('Should render properly', function() {
+        it('Should render properly', () => {
             stagingViewer.render();
             expect(stagingViewer).not.toBeNull();
         });
 
-        it('Should render properly with a Globus linked account', (done) => {
+        it('Should render properly with a Globus linked account', async () => {
             let $node = $('<div>'),
                 linkedStagingViewer = new StagingAreaViewer($node, {
                     path: startingPath,
@@ -97,36 +98,26 @@ define ([
                         globusLinked: true
                     }
                 });
-            linkedStagingViewer.render()
-                .then(() => {
-                    expect($node.html()).toContain('Or upload to this staging area by using');
-                    expect($node.html()).toContain('https://app.globus.org/file-manager?destination_id=c3c0a65f-5827-4834-b6c9-388b0b19953a&amp;destination_path=' + fakeUser);
-                    done();
-                });
+            await linkedStagingViewer.render();
+            expect($node.html()).toContain('Or upload to this staging area by using');
+            expect($node.html()).toContain('https://app.globus.org/file-manager?destination_id=c3c0a65f-5827-4834-b6c9-388b0b19953a&amp;destination_path=' + fakeUser);
         });
 
         it('Should render properly without a Globus linked account', () => {
             expect($targetNode.html()).not.toContain('Or upload to this staging area by using');
         });
 
-        it('Should start a help tour', function() {
+        it('Should start a help tour', () => {
             stagingViewer.render();
             stagingViewer.startTour();
             expect(stagingViewer.tour).not.toBeNull();
         });
 
-        it('Should update its view with a proper subpath', function(done) {
-            stagingViewer.updateView()
-                .then(function() {
-                    done();
-                })
-                .catch(err => {
-                    console.log(err);
-                    fail();
-                });
+        it('Should update its view with a proper subpath', async () => {
+            await stagingViewer.updateView();
         });
 
-        it('Should show an error when a path does not exist', (done, fail) => {
+        it('Should show an error when a path does not exist', async () => {
             const errorText = 'An error occurred while fetching your files';
             jasmine.Ajax.stubRequest(/.*\/staging_service\/list\/foo?/).andReturn({
                 status: 404,
@@ -136,16 +127,11 @@ define ([
                 responseText: errorText
             });
 
-            stagingViewer.setPath('//foo')
-                .then(() => {
-                    expect($targetNode.find('.alert.alert-danger').html()).toContain(errorText);
-                    // reset path. something gets cached with how async tests run.
-                    stagingViewer.setPath('/');
-                    done();
-                });
+            await stagingViewer.setPath('//foo');
+            expect($targetNode.find('.alert.alert-danger').html()).toContain(errorText);
         });
 
-        it('Should show a "no files" next when a path has no files', (done) => {
+        it('Should show a "no files" next when a path has no files', async () => {
             jasmine.Ajax.stubRequest(/.*\/staging_service\/list\/empty?/).andReturn({
                 status: 200,
                 statusText: 'success',
@@ -154,13 +140,8 @@ define ([
                 responseText: JSON.stringify([])
             });
 
-            stagingViewer.setPath('//empty')
-                .then(() => {
-                    expect($targetNode.find('#kb-data-staging-table').html()).toContain('No files found.');
-                    // reset path. something gets cached with how async tests run.
-                    stagingViewer.setPath('/');
-                    done();
-                });
+            await stagingViewer.setPath('//empty');
+            expect($targetNode.find('#kb-data-staging-table').html()).toContain('No files found.');
         });
 
         it('Should respond to activate and deactivate commands', () => {
@@ -171,6 +152,34 @@ define ([
             expect(stagingViewer.refreshInterval).toBeUndefined();
         });
 
+        it('Should have clickable folder icons', async () => {
+            spyOn(stagingViewer, 'updatePathFn');
+            await stagingViewer.render();
+            stagingViewer.$elem.find('button[data-name="test_folder"]').click();
+            expect(stagingViewer.updatePathFn).toHaveBeenCalledWith('//test_folder');
+        });
+
+        it('Should have clickable folder names', async () => {
+            spyOn(stagingViewer, 'updatePathFn');
+            await stagingViewer.render();
+            stagingViewer.$elem.find('span.kb-data-staging-folder').click();
+            expect(stagingViewer.updatePathFn).toHaveBeenCalledWith('//test_folder');
+        });
+
+        it('Should have multi-clicked folder buttons only fire once', async () => {
+            spyOn(stagingViewer, 'updatePathFn');
+            await stagingViewer.render();
+            stagingViewer.$elem.find('button[data-name]').click().click().click();
+            expect(stagingViewer.updatePathFn).toHaveBeenCalledTimes(1);
+        });
+
+        it('Should have multi-clicked folder names only fire once', async () => {
+            spyOn(stagingViewer, 'updatePathFn');
+            await stagingViewer.render();
+            stagingViewer.$elem.find('span.kb-data-staging-folder').click().click().click();
+            expect(stagingViewer.updatePathFn).toHaveBeenCalledTimes(1);
+        });
+
         it('Should initialize an import app with the expected inputs', () => {
             const fileType = 'fastq_reads',
                 fileName = 'foobar.txt',

From 836b6ad1c1c94cab12086d74a1f8857a458c4306 Mon Sep 17 00:00:00 2001
From: Steve Chan <sychan168@gmail.com>
Date: Fri, 9 Oct 2020 11:37:41 -0700
Subject: [PATCH 38/61] NOP change to trigger rebuild

---
 docs/deploy_narrative.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/deploy_narrative.md b/docs/deploy_narrative.md
index 018411766e..6be73dd7fb 100644
--- a/docs/deploy_narrative.md
+++ b/docs/deploy_narrative.md
@@ -77,6 +77,7 @@ The [next](https://next.kbase.us), [appdev](https://appdev.kbase.us), and [prod]
 
 The [narrative-refactor](https://narrative-refactor.kbase.us) image is automatically built against the "truss" branch of the repo and is called narrative-truss:pr### when still in a PR state or narrative-truss:latest after merge. The images can be found here: https://github.com/orgs/kbase/packages
 
+
 #### Create Release Image
 
 1.  Create a new [pull request](https://github.com/kbase/narrative/compare) to merge the `develop` branch into `master`.

From 306e1d666f626953985ffda4fd031cd2038e5b0d Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Tue, 13 Oct 2020 18:23:04 -0800
Subject: [PATCH 39/61] fix test path

---
 test/unit/karma.conf.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index ccd97f52fe..949f09ccca 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -32,7 +32,7 @@ module.exports = function (config) {
         },
         files: [
             'kbase-extension/static/narrative_paths.js',
-            {pattern: 'test/unit/spec/nbextensions/appCell2/widgets/*.js', included: false},
+            {pattern: 'test/unit/spec/**/*.js', included: false},
             {pattern: 'node_modules/jasmine-ajax/lib/mock-ajax.js', included: true},
             {pattern: 'kbase-extension/static/ext_components/kbase-ui-plugin-catalog/src/plugin/modules/data/categories.yml', included: false, served: true},
             {pattern: 'kbase-extension/static/**/*.css', included: false, served: true},

From 77d4d102bc87b76f11e96220d65c77b871b2f02a Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Tue, 13 Oct 2020 18:48:56 -0800
Subject: [PATCH 40/61] have travis build on truss branch

---
 .travis.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.travis.yml b/.travis.yml
index f53af98a04..3c11e75eae 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -25,6 +25,7 @@ branches:
     - develop
     - master
     - py3-update
+    - truss
 
 before_install:
   - gem install coveralls-lcov

From 1ded4e55f0a7ef6ff7710efea95c12ada488a832 Mon Sep 17 00:00:00 2001
From: bio-boris <bioboris@github.com>
Date: Tue, 13 Oct 2020 23:24:31 -0500
Subject: [PATCH 41/61] Added margin, letter spacing, and button states

---
 .../static/kbase/css/kbaseNarrative.css       | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index ba0e5b7845..e511dbb6de 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -5,6 +5,10 @@
     font-weight: bold;
 }
 
+#kb-data-staging-table_wrapper{
+    margin-top: 15px;
+}
+
 .kb-data-staging-table-name {
     white-space: nowrap;
     overflow: hidden;
@@ -59,7 +63,28 @@
     margin: 5px;
     position: relative;
     top: -3px;
+    letter-spacing: .5pt;
+}
+
+.kb-data-staging-button:hover{
+    background: rgba(67, 121, 177, 0.1);
+    border-radius: 4px;
+}
+.kb-data-staging-button:focus{
+    background: rgba(67, 121, 177, 0.15);
+    border-radius: 4px;
 }
+.kb-data-staging-button:active{
+    background: rgba(67, 121, 177, 0.2);
+    border-radius: 4px;
+}
+.kb-data-staging-button:disabled{
+    background: rgba(0, 0, 0, 0.02);
+    border-radius: 4px;
+    color: #929292;
+}
+
+
 
 .kb-data-stagingarea {
     font-family: Oxygen, Arial, sans-serif;

From 9d03053b0485c189a9013de10ad7f7812e3c37df Mon Sep 17 00:00:00 2001
From: bio-boris <bioboris@github.com>
Date: Tue, 13 Oct 2020 23:32:09 -0500
Subject: [PATCH 42/61] remove whitespace

---
 .../static/kbase/templates/data_staging/file_path.html           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/kbase-extension/static/kbase/templates/data_staging/file_path.html b/kbase-extension/static/kbase/templates/data_staging/file_path.html
index dc1cc485ae..0cb3344561 100644
--- a/kbase-extension/static/kbase/templates/data_staging/file_path.html
+++ b/kbase-extension/static/kbase/templates/data_staging/file_path.html
@@ -1,5 +1,4 @@
 <span class="kb-data-stagingarea">Staging Area</span>
-
 <button id="refresh" class="kb-data-staging-button">
     <span><i class="fa fa-refresh fa-lg"></i></span>
     REFRESH

From 0bd8a45886e3b5ab00cf151a723aead776a456f7 Mon Sep 17 00:00:00 2001
From: bio-boris <bioboris@github.com>
Date: Wed, 14 Oct 2020 10:34:15 -0500
Subject: [PATCH 43/61] move border radius to class base

---
 kbase-extension/static/kbase/css/kbaseNarrative.css | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index 7aa55a0698..c2f3d51190 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -74,23 +74,20 @@
     position: relative;
     top: -3px;
     letter-spacing: .5pt;
+    border-radius: 4px;
 }
 
 .kb-data-staging-button:hover{
     background: rgba(67, 121, 177, 0.1);
-    border-radius: 4px;
 }
 .kb-data-staging-button:focus{
     background: rgba(67, 121, 177, 0.15);
-    border-radius: 4px;
 }
 .kb-data-staging-button:active{
     background: rgba(67, 121, 177, 0.2);
-    border-radius: 4px;
 }
 .kb-data-staging-button:disabled{
     background: rgba(0, 0, 0, 0.02);
-    border-radius: 4px;
     color: #929292;
 }
 

From ceb1c0bfda54633eeb323b9d5a635fbb9b4265ec Mon Sep 17 00:00:00 2001
From: Emily Mahanna <56279459+eamahanna@users.noreply.github.com>
Date: Wed, 14 Oct 2020 12:59:12 -0800
Subject: [PATCH 44/61] Dataup 187 move globus upload below drag and drop
 (#1855)

* initial commit, updated text in dropzone, updated button behavior, still needs work

* removing globus tests from file upload widget

* making select a link

* changing class name so its slightly more clear, adding case where globus is not linked

* update tests

* fix indentation

* minor tweaks

* oops

* Address sonarcloud error

* Address codacy

* Updates from pr review

* Add other button styles

* quick updates

* fix tests

Co-authored-by: leia-sefkin <leia.sefkin@gmail.com>
---
 .../static/kbase/css/kbaseNarrative.css       | 48 ++++++++++++++++
 .../narrative_core/upload/fileUploadWidget.js |  5 +-
 .../upload/stagingAreaViewer.js               |  4 +-
 .../templates/data_staging/dropzone_area.html | 21 +------
 .../data_staging/ftp_file_header.html         | 25 ++++----
 .../upload/fileUploadWidget-spec.js           | 57 -------------------
 .../upload/stagingAreaViewer-spec.js          | 31 +++++++---
 7 files changed, 90 insertions(+), 101 deletions(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index c2f3d51190..8ca6f507f0 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -5,6 +5,18 @@
     font-weight: bold;
 }
 
+.kb-dropzone .dz-message {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 24px;
+    line-height: 28px;
+    text-align: center;
+    color: #000000;
+    mix-blend-mode: normal;
+    margin: 2em 4.5em;
+}
+
 #kb-data-staging-table_wrapper{
     margin-top: 15px;
 }
@@ -3079,6 +3091,42 @@ button.kb-data-obj {
     border: none;
 }
 
+.kb-import-content .upload-options button {
+    background: #FFFFFF;
+    border: 1px solid #C4C4C4;
+    box-sizing: border-box;
+    border-radius: 6px;
+    font-family: Oxygen;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 18px;
+    /* identical to box height */
+    text-align: center;
+    color: #000000;
+    width: 140px;
+    height: 42px;
+    margin: 0 6px;
+}
+
+.kb-import-content .upload-options button:hover {
+    border: 1px solid #CFCFCF;
+    background-color: #FAFAFA;
+}
+
+.kb-import-content .upload-options button:focus {
+    background-color: #F2F2F2;
+}
+
+.kb-import-content .upload-options button:active {
+    background-color: #E6E6E6;
+}
+
+.kb-import-content .upload-options button:disabled {
+    background-color: #FAFAFA;
+    color: #929292;
+}
+
 .kb-overlay-footer {
     position: absolute;
     width: 100%;
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
index 4f73fc4a91..faf693048f 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
@@ -41,12 +41,13 @@ define([
                 globusUrl: uploadConfig.globus_upload_url + '&destination_path=' + this.userInfo.user
             }));
 
-            // there are two anchor elements with same class name .globus_link.
+            // there are two anchor elements with same class name .globus_linked.
             // One link takes the user to globus site,
             // and the other link takes user to how to link globus account.
-            $dropzoneElem.find('a.globus_link').click(e => {
+            $dropzoneElem.find('globus_linked').click(e => {
                 e.stopPropagation();
                 e.preventDefault();
+
                 if(e.target.href === uploadConfig.globus_upload_url + '&destination_path=' + this.userInfo.user) {
                     let stagingServiceClient = new StagingServiceClient({
                         root: this.stagingUrl,
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
index bd96ad5a62..cd49c9c020 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
@@ -167,7 +167,7 @@ define([
 
             // Add ACL before going to the staging area
             // If it fails, it'll just do so silently.
-            var $globusLink = this.$elem.find('.globus_link');
+            var $globusLink = this.$elem.find('a.globus_linked');
             $globusLink.click((e) => {
                 var globusWindow = window.open('', 'globus');
                 globusWindow.document.write('<html><body><h2 style="text-align:center; font-family:\'Oxygen\', arial, sans-serif;">Loading Globus...</h2></body></html>');
@@ -414,14 +414,12 @@ define([
 
                         if ($(e.currentTarget).hasClass('fa-caret-down')) {
                             $('.kb-dropzone').css('min-height', '75px');
-                            $('.dz-message').css('margin', '0em 0');
                             this.openFileInfo[fileName] = myFile;
                             $tr.after(
                                 this.renderMoreFileInfo(myFile)
                             );
                         } else {
                             $('.kb-dropzone').css('min-height', '200px');
-                            $('.dz-message').css('margin', '3em 0');
                             $tr.next().detach();
                             delete this.openFileInfo[fileName];
                         }
diff --git a/kbase-extension/static/kbase/templates/data_staging/dropzone_area.html b/kbase-extension/static/kbase/templates/data_staging/dropzone_area.html
index 9c7778411e..7136539f72 100644
--- a/kbase-extension/static/kbase/templates/data_staging/dropzone_area.html
+++ b/kbase-extension/static/kbase/templates/data_staging/dropzone_area.html
@@ -10,24 +10,5 @@
             </div>
         </div>
     </div>
-    <div class="dz-message" style="text-align:left; margin-left: 15%">
-        <p>Three ways to add data to the staging area:</p>
-        <ul>
-            <li>Click in this box.</li>
-            <li>Drag and drop data files.</li>
-            <li>{{#if userInfo.globusLinked}}For large files (over 20GB) or a large number of files use
-                <a href="{{globusUrl}}" class="globus_link">
-                    <i class="fa fa-cloud-upload"></i> Globus.
-                </a>
-                {{else}}
-                For large files (over 20GB), use Globus. Click
-                <a href="https://docs.kbase.us/data/globus" class="globus_link">
-                    here <i class="fa fa-external-link"></i>
-                </a>
-                for directions.
-                {{/if}}
-            </li>
-        </ul>
-        <p>Click the <i class="fa fa-question-circle"></i> below for help.
-    </div>
+    <div class="dz-message">Drag and drop files and folders in this box, or <a>select</a> from your computer.</div>
 </form>
diff --git a/kbase-extension/static/kbase/templates/data_staging/ftp_file_header.html b/kbase-extension/static/kbase/templates/data_staging/ftp_file_header.html
index 6c44d60c60..f167504e7d 100644
--- a/kbase-extension/static/kbase/templates/data_staging/ftp_file_header.html
+++ b/kbase-extension/static/kbase/templates/data_staging/ftp_file_header.html
@@ -1,16 +1,17 @@
 <div class="row" style="margin-bottom: 5px">
     <div class="pull-left">
-        {{#if userInfo.globusLinked}}
-        <div class="globus_div">
-            Or upload to this staging area by using
-            <a href="{{globusUrl}}"
-               target="_blank" class="globus_link">
-                <i class="fa fa-cloud-upload"></i> Globus Online
-            </a>
-        </div>
-        {{/if}}
-        <div class="web_upload_div">
-            Or click <a id="web-upload" style="cursor:pointer">here</a> to use an App to upload from a public URL.
+        <div class="upload-options">
+            Other ways to upload:
+            {{#if userInfo.globusLinked}}
+            <button class="globus_linked">
+                <a href="{{globusUrl}}" target="_blank" aria-label="opens new window to upload via globus">Upload with Globus</a>
+            </button>
+            {{else}}
+            <button class="globus_not_linked">
+                <a href="https://docs.kbase.us/data/globus" rel="noopener noreferrer" target="_blank"  aria-label="opens new window to kbase globus upload docs">Upload with Globus</a>
+            </button>
+            {{/if}}
+            <button class="web_upload_div">Upload with URL</button>
         </div>
     </div>
     <div class="pull-right">
@@ -18,4 +19,4 @@
             <span><i class="fa fa-question-circle fa-lg"></i></span>
         </button>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/test/unit/spec/narrative_core/upload/fileUploadWidget-spec.js b/test/unit/spec/narrative_core/upload/fileUploadWidget-spec.js
index 0bc75af341..0450fc2a80 100644
--- a/test/unit/spec/narrative_core/upload/fileUploadWidget-spec.js
+++ b/test/unit/spec/narrative_core/upload/fileUploadWidget-spec.js
@@ -62,45 +62,6 @@ define([
             jasmine.Ajax.uninstall();
         });
 
-        it('Should render properly when linked to globus', () => {
-            const $node = $('<div>'),
-                fuw = new FileUploadWidget($node, {
-                    path: '/',
-                    userInfo: {
-                        user: fakeUser,
-                        globusLinked: true
-                    }
-                }),
-                renderedMsg = $node.find('.dz-message').html();
-            expect(renderedMsg).toContain('<p>Three ways to add data to the staging area:</p>');
-            expect(renderedMsg).toContain('<li>Click in this box.</li>');
-            expect(renderedMsg).toContain('<li>Drag and drop data files.</li>');
-            expect(renderedMsg).toContain('For large files (over 20GB) or a large number of files use');
-            expect(renderedMsg).toContain(Config.get('upload').globus_upload_url);
-            expect(renderedMsg).toContain(fakeUser);
-            expect(renderedMsg).not.toContain('For large files (over 20GB), use Globus. Click');
-            expect(renderedMsg).not.toContain('https://docs.kbase.us/data/globus');
-        });
-
-        it('Should render properly when not linked to globus', () => {
-            const $node = $('<div>'),
-                fuw = new FileUploadWidget($node, {
-                    path: '/',
-                    userInfo: {
-                        user: fakeUser,
-                        globusLinked: false
-                    }
-                }),
-                renderedMsg = $node.find('.dz-message').html();
-            expect(renderedMsg).toContain('<p>Three ways to add data to the staging area:</p>');
-            expect(renderedMsg).toContain('<li>Click in this box.</li>');
-            expect(renderedMsg).toContain('<li>Drag and drop data files.</li>');
-            expect(renderedMsg).toContain('For large files (over 20GB), use Globus. Click');
-            expect(renderedMsg).toContain('https://docs.kbase.us/data/globus');
-            expect(renderedMsg).not.toContain('For large files (over 20GB) or a large number of files use');
-            expect(renderedMsg).not.toContain(Config.get('upload').globus_upload_url);
-        });
-
         it('Should be able to set and retrieve the path', () => {
             const $node = $('<div>'),
                 fuw = new FileUploadWidget($node, {
@@ -157,23 +118,5 @@ define([
             fuWidget.dropzone.addFile(mockFile);
         });
 
-        it('Should open a Globus window on click', () => {
-            // first pass = no globus link.
-            const unlinkedLink = 'https://docs.kbase.us/data/globus';
-            spyOn(window, 'open').and.callThrough();
-            fuWidget.$elem.find('a.globus_link').click();
-            expect(window.open).toHaveBeenCalledWith(unlinkedLink, '_blank');
-            const $node = $('<div>'),
-                fuw = new FileUploadWidget($node, {
-                    path: '/',
-                    userInfo: {
-                        user: fakeUser,
-                        globusLinked: true
-                    }
-                });
-            fuw.$elem.find('a.globus_link').click();
-            expect(window.open).toHaveBeenCalledWith('', 'dz-globus');
-        });
-
     });
 });
diff --git a/test/unit/spec/narrative_core/upload/stagingAreaViewer-spec.js b/test/unit/spec/narrative_core/upload/stagingAreaViewer-spec.js
index 7a16f4ae72..125181d09a 100644
--- a/test/unit/spec/narrative_core/upload/stagingAreaViewer-spec.js
+++ b/test/unit/spec/narrative_core/upload/stagingAreaViewer-spec.js
@@ -88,7 +88,7 @@ define ([
             expect(stagingViewer).not.toBeNull();
         });
 
-        it('Should render properly with a Globus linked account', async () => {
+        it('Should render properly with a Globus linked account', async (done) => {
             let $node = $('<div>'),
                 linkedStagingViewer = new StagingAreaViewer($node, {
                     path: startingPath,
@@ -98,16 +98,33 @@ define ([
                         globusLinked: true
                     }
                 });
-            await linkedStagingViewer.render();
-            expect($node.html()).toContain('Or upload to this staging area by using');
-            expect($node.html()).toContain('https://app.globus.org/file-manager?destination_id=c3c0a65f-5827-4834-b6c9-388b0b19953a&amp;destination_path=' + fakeUser);
+            await linkedStagingViewer.render()
+                .then(() => {
+                    var $globusButton = $node.find('.globus_linked');
+                    expect($globusButton).toBeDefined();
+                    expect($globusButton.html()).toContain('Upload with Globus');
+                    expect($globusButton.html()).toContain('https://app.globus.org/file-manager?destination_id=c3c0a65f-5827-4834-b6c9-388b0b19953a&amp;destination_path=' + fakeUser);
+                    done();
+                });
+        });
+
+        it('Should render properly without a Globus linked account', async () => {
+            await stagingViewer.render();
+            var $globusButton = $targetNode.find('.globus_not_linked');
+            expect($globusButton).toBeDefined();
+            expect($globusButton.html()).toContain('Upload with Globus');
+            expect($globusButton.html()).toContain('https://docs.kbase.us/data/globus');
         });
 
-        it('Should render properly without a Globus linked account', () => {
-            expect($targetNode.html()).not.toContain('Or upload to this staging area by using');
+        it('Should render a url button', async () => {
+            await stagingViewer.render();
+            var $urlButton = $targetNode.find('.web_upload_div');
+            expect($urlButton).toBeDefined();
+            expect($urlButton.html()).toContain('Upload with URL');
         });
 
-        it('Should start a help tour', () => {
+
+        it('Should start a help tour', function() {
             stagingViewer.render();
             stagingViewer.startTour();
             expect(stagingViewer.tour).not.toBeNull();

From 35ea95139ca3929d2bfe824dec5c1b98e9fade2b Mon Sep 17 00:00:00 2001
From: bio-boris <bioboris@github.com>
Date: Thu, 15 Oct 2020 00:21:42 -0500
Subject: [PATCH 45/61] Add data-test attribute to test order of cell buttons

---
 .../narrative_core/kbaseCellToolbarMenu.js    |  6 ++-
 .../kbaseCellToolbarMenu-spec.js              | 51 +++++++++++++++----
 2 files changed, 46 insertions(+), 11 deletions(-)

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 3272fe006c..0864f76d7d 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js
@@ -279,7 +279,8 @@ define([
                     id: dropdownId,
                     dataToggle: 'dropdown',
                     ariaHaspopup: 'true',
-                    ariaExpanded: 'true'
+                    ariaExpanded: 'true',
+                    'data-test' : 'cell-dropdown'
                 }, [span({ class: 'fa fa-ellipsis-h fa-lg' })]),
                 ul({
                     class: 'dropdown-menu dropdown-menu-right',
@@ -378,6 +379,7 @@ define([
                             dataPlacement: 'left',
                             title: true,
                             dataOriginalTitle: 'Move Cell Up',
+                            'data-test' : 'cell-move-up',
                             id: events.addEvent({ type: 'click', handler: doMoveCellUp })
                         }, [
                             span({ class: 'fa fa-arrow-up fa-lg' })
@@ -389,6 +391,7 @@ define([
                             dataPlacement: 'left',
                             title: true,
                             dataOriginalTitle: 'Move Cell Down',
+                             'data-test' : 'cell-move-down',
                             id: events.addEvent({ type: 'click', handler: doMoveCellDown })
                         }, [
                             span({ class: 'fa fa-arrow-down fa-lg' })
@@ -404,6 +407,7 @@ define([
                                 dataToggle: 'tooltip',
                                 dataPlacement: 'left',
                                 title: true,
+                                 'data-test' : 'cell-toggle-expansion',
                                 dataOriginalTitle: toggleMinMax === 'maximized' ? 'Collapse Cell' : 'Expand Cell',
                                 id: events.addEvent({ type: 'click', handler: doToggleMinMaxCell })
                             }, [
diff --git a/test/unit/spec/narrative_core/kbaseCellToolbarMenu-spec.js b/test/unit/spec/narrative_core/kbaseCellToolbarMenu-spec.js
index db5e9568c8..05ed11f49b 100644
--- a/test/unit/spec/narrative_core/kbaseCellToolbarMenu-spec.js
+++ b/test/unit/spec/narrative_core/kbaseCellToolbarMenu-spec.js
@@ -1,14 +1,16 @@
 /*global describe, it, expect, beforeAll */
 /*jslint white: true*/
 define([
+    'jquery',
     'kbaseCellToolbarMenu',
     'base/js/namespace'
-], function(
+], function (
+    $,
     Widget,
     Jupyter
 ) {
     'use strict';
-    describe('Test the kbaseCellToolbarMenu widget', function() {
+    describe('Test the kbaseCellToolbarMenu widget', function () {
         beforeAll(() => {
             Jupyter.narrative = {
                 readonly: false
@@ -40,6 +42,7 @@ define([
                 }
             };
         };
+
         const mockToolbar = (mode, stage, collapsedState) => {
             const instance = Widget.make();
             const parentCell = mockParentCell(mode, stage, collapsedState);
@@ -50,49 +53,77 @@ define([
             )[0].innerText;
         };
 
-        it('Should say Error when minimized and mode is error', function() {
+
+        const mockToolbarDataTestNodes = (mode, stage, collapsedState) => {
+            const instance = Widget.make();
+            const parentCell = mockParentCell(mode, stage, collapsedState);
+            const toolbarDiv = document.createElement('div');
+            instance.register_callback([toolbarDiv], parentCell);
+            return toolbarDiv.querySelectorAll(
+                '[data-test]'
+            );
+        };
+
+        // This test might better be served through Snapshot Testing
+        // This test might want to check to see if each buttton has the correct fa-* class
+        it('Should render the correct app cell buttons in the correct order', function () {
+            var testToolBar = mockToolbarDataTestNodes('success', '', 'maximized');
+            var expectedButtonOrder = ['cell-dropdown', 'cell-move-up', 'cell-move-down', 'cell-toggle-expansion'];
+            var extractedButtons = [];
+            testToolBar.forEach(function (element) {
+                var attribute = element.getAttribute('data-test');
+                if (expectedButtonOrder.includes(attribute)) {
+                    extractedButtons.push(attribute);
+                }
+            });
+            expect(extractedButtons.length).toEqual(expectedButtonOrder.length);
+            expect(extractedButtons).toEqual(expectedButtonOrder);
+        });
+
+
+        it('Should say Error when minimized and mode is error', function () {
             expect(
                 mockToolbar('error', '', 'minimized')
             ).toBe('Error');
         });
 
-        it('Should say Error when minimized and mode is internal-error', function() {
+        it('Should say Error when minimized and mode is internal-error', function () {
             expect(
                 mockToolbar('internal-error', '', 'minimized')
             ).toBe('Error');
         });
 
-        it('Should say Canceled when minimized and canceling', function() {
+        it('Should say Canceled when minimized and canceling', function () {
             expect(
                 mockToolbar('canceling', '', 'minimized')
             ).toBe('Canceled');
         });
 
-        it('Should say Canceled when minimized and canceled', function() {
+        it('Should say Canceled when minimized and canceled', function () {
             expect(
                 mockToolbar('canceled', '', 'minimized')
             ).toBe('Canceled');
         });
 
-        it('Should say Running when minimized and running', function() {
+        it('Should say Running when minimized and running', function () {
             expect(
                 mockToolbar('processing', 'running', 'minimized')
             ).toBe('Running');
         });
 
-        it('Should say Running when minimized and queued', function() {
+        it('Should say Running when minimized and queued', function () {
             expect(
                 mockToolbar('processing', 'queued', 'minimized')
             ).toBe('Queued');
         });
 
-        it('Should say Success when minimized and mode is success', function() {
+        it('Should say Success when minimized and mode is success', function () {
             expect(
                 mockToolbar('success', '', 'minimized')
             ).toBe('Success');
         });
 
-        it('Should suppress the status message if maximized', function() {
+        it('Should suppress the status message if maximized', function () {
             expect(
                 mockToolbar('processing', 'running', 'maximized')
             ).toBe('');

From cc0c0ddee8f2137df8f86228926077a19926cde6 Mon Sep 17 00:00:00 2001
From: bio-boris <bioboris@github.com>
Date: Thu, 15 Oct 2020 00:37:21 -0500
Subject: [PATCH 46/61] Added voiceover labels

---
 .../narrative_core/kbaseCellToolbarMenu.js    | 144 ++++++++++--------
 1 file changed, 78 insertions(+), 66 deletions(-)

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 0864f76d7d..97d559805c 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js
@@ -10,7 +10,7 @@ define([
     'kbase/js/widgets/appInfoPanel',
     'narrativeConfig',
     'custom/custom'
-], function(
+], function (
     $,
     html,
     Events,
@@ -88,14 +88,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 '';
         }
@@ -134,7 +134,7 @@ define([
                 body: $('<div class="container"></div>'),
                 buttons: [
                     $('<a href="' + appStoreUrl + '" target="_blank" type="button" class="btn btn-default">View on App Store</a>'),
-                    $('<button type="button" class="btn btn-primary">Close</button>').click(function() {
+                    $('<button type="button" class="btn btn-primary">Close</button>').click(function () {
                         dialog.hide();
                     })
                 ],
@@ -149,9 +149,9 @@ define([
                 appModule: module,
                 tag: tag
             });
-            infoPanel.start({ node: dialog.getBody() });
+            infoPanel.start({node: dialog.getBody()});
 
-            dialog.getElement().on('hidden.bs.modal', function() {
+            dialog.getElement().on('hidden.bs.modal', function () {
                 dialog.destroy();
             });
             dialog.show();
@@ -174,16 +174,16 @@ define([
                 dataPlacement: 'left',
                 title: true,
                 dataOriginalTitle: 'Cell Settings',
-                id: events.addEvent({ type: 'click', handler: doToggleCellSettings })
+                id: events.addEvent({type: 'click', handler: doToggleCellSettings})
             }, [
-                span({ class: 'fa fa-cog', style: 'font-size: 14pt' })
+                span({class: 'fa fa-cog', style: 'font-size: 14pt'})
             ]);
         }
 
         function renderIcon(icon) {
             return span({
                 class: 'fa fa-' + icon.type + ' fa-sm',
-                style: { color: icon.color || '#000' }
+                style: {color: icon.color || '#000'}
             });
         }
 
@@ -202,8 +202,7 @@ define([
             var toggleMinMax = utils.getCellMeta(cell, 'kbase.cellState.toggleMinMax', 'maximized'),
                 toggleIcon = (toggleMinMax === 'maximized' ? 'minus' : 'plus'),
                 dropdownId = html.genId(),
-                menuItems = [
-                ];
+                menuItems = [];
 
             if (cell.cell_type === 'code') {
                 menuItems.push({
@@ -213,7 +212,7 @@ define([
                         type: 'terminal',
                         color: 'black'
                     },
-                    id: events.addEvent({ type: 'click', handler: doToggleCodeView })
+                    id: events.addEvent({type: 'click', handler: doToggleCodeView})
                 });
             }
 
@@ -227,7 +226,7 @@ define([
                     },
                     id: events.addEvent({
                         type: 'click',
-                        handler: function() {
+                        handler: function () {
                             cell.showInfo();
                         }
                     })
@@ -264,7 +263,7 @@ define([
                         type: 'times',
                         color: 'red'
                     },
-                    id: events.addEvent({ type: 'click', handler: doDeleteCell })
+                    id: events.addEvent({type: 'click', handler: doDeleteCell})
                 });
             }
 
@@ -272,7 +271,7 @@ define([
                 return '';
             }
 
-            return span({ class: 'dropdown' }, [
+            return span({class: 'dropdown'}, [
                 button({
                     class: 'btn btn-xs btn-default dropdown-toggle',
                     type: 'button',
@@ -280,13 +279,14 @@ define([
                     dataToggle: 'dropdown',
                     ariaHaspopup: 'true',
                     ariaExpanded: 'true',
-                    'data-test' : 'cell-dropdown'
-                }, [span({ class: 'fa fa-ellipsis-h fa-lg' })]),
+                    'aria-label': 'cell options',
+                    'data-test': 'cell-dropdown'
+                }, [span({class: 'fa fa-ellipsis-h fa-lg'})]),
                 ul({
                     class: 'dropdown-menu dropdown-menu-right',
                     ariaLabelledby: dropdownId
                 }, [
-                    menuItems.map(function(item) {
+                    menuItems.map(function (item) {
                         switch (item.type) {
                             case 'separator':
                                 return li({
@@ -331,19 +331,19 @@ define([
         }
 
         function minimizedStatus(mode, stage) {
-            if(mode === 'error' || mode === 'internal-error') {
+            if (mode === 'error' || mode === 'internal-error') {
                 return '<span style="color: red">Error</span>';
             }
-            if(mode === 'canceled' || mode === 'canceling') {
+            if (mode === 'canceled' || mode === 'canceling') {
                 return '<span style="color: orange">Canceled</span>';
             }
-            if(mode ==='processing' && stage === 'running') {
+            if (mode === 'processing' && stage === 'running') {
                 return 'Running';
             }
-            if(mode ==='processing' && stage === 'queued') {
+            if (mode === 'processing' && stage === 'queued') {
                 return 'Queued';
             }
-            if(mode === 'success') {
+            if (mode === 'success') {
                 return '<span style="color: green">Success</span>';
             }
             return '';
@@ -366,12 +366,15 @@ define([
             const appStatePretty = minimizedStatus(fsmMode, fsmStage);
             const collapsedCellStatus = cellCollapsed ? appStatePretty : '';
 
-            var events = Events.make({ node: container }),
+            var events = Events.make({node: container}),
                 buttons = [
-                    div({ class: 'buttons pull-right' }, [
+                    div({class: 'buttons pull-right'}, [
                         renderOptions(cell, events),
-                        span({ class: 'fa fa-circle-o-notch fa-spin', style: { color: 'rgb(42, 121, 191)', display: 'none' } }),
-                        span({ class: 'fa fa-exclamation-triangle', style: { color: 'rgb(255, 0, 0)', display: 'none' } }),
+                        span({
+                            class: 'fa fa-circle-o-notch fa-spin',
+                            style: {color: 'rgb(42, 121, 191)', display: 'none'}
+                        }),
+                        span({class: 'fa fa-exclamation-triangle', style: {color: 'rgb(255, 0, 0)', display: 'none'}}),
                         (readOnly ? null : button({
                             type: 'button',
                             class: 'btn btn-default btn-xs',
@@ -379,10 +382,11 @@ define([
                             dataPlacement: 'left',
                             title: true,
                             dataOriginalTitle: 'Move Cell Up',
-                            'data-test' : 'cell-move-up',
-                            id: events.addEvent({ type: 'click', handler: doMoveCellUp })
+                            'data-test': 'cell-move-up',
+                            'aria-label': 'Move cell up',
+                            id: events.addEvent({type: 'click', handler: doMoveCellUp})
                         }, [
-                            span({ class: 'fa fa-arrow-up fa-lg' })
+                            span({class: 'fa fa-arrow-up fa-lg'})
                         ])),
                         (readOnly ? null : button({
                             type: 'button',
@@ -391,13 +395,14 @@ define([
                             dataPlacement: 'left',
                             title: true,
                             dataOriginalTitle: 'Move Cell Down',
-                             'data-test' : 'cell-move-down',
-                            id: events.addEvent({ type: 'click', handler: doMoveCellDown })
+                            'data-test': 'cell-move-down',
+                            'aria-label': 'Move cell down',
+                            id: events.addEvent({type: 'click', handler: doMoveCellDown})
                         }, [
-                            span({ class: 'fa fa-arrow-down fa-lg' })
+                            span({class: 'fa fa-arrow-down fa-lg'})
                         ])),
 
-                        (function() {
+                        (function () {
                             var toggleMinMax = utils.getCellMeta(cell, 'kbase.cellState.toggleMinMax', 'maximized'),
                                 toggleIcon = (toggleMinMax === 'maximized' ? 'minus' : 'plus'),
                                 color = (toggleMinMax === 'maximized' ? '#000' : 'rgba(255,137,0,1)');
@@ -407,9 +412,10 @@ define([
                                 dataToggle: 'tooltip',
                                 dataPlacement: 'left',
                                 title: true,
-                                 'data-test' : 'cell-toggle-expansion',
+                                'data-test': 'cell-toggle-expansion',
+                                'aria-label': 'Expand or Collapse Cell',
                                 dataOriginalTitle: toggleMinMax === 'maximized' ? 'Collapse Cell' : 'Expand Cell',
-                                id: events.addEvent({ type: 'click', handler: doToggleMinMaxCell })
+                                id: events.addEvent({type: 'click', handler: doToggleMinMaxCell})
                             }, [
                                 span({
                                     class: 'fa fa-' + toggleIcon + '-square-o fa-lg',
@@ -431,20 +437,24 @@ define([
                         utils.getCellMeta(cell, 'kbase.cellState.message')
                     ])
                 ]),
-                content = div({ class: 'kb-cell-toolbar' }, [
-                    div({ class: '', style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        height: '56px',
-                        justifyContent: 'space-between',
-                    } }, [
+                content = div({class: 'kb-cell-toolbar'}, [
+                    div({
+                        class: '', style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            height: '56px',
+                            justifyContent: 'space-between',
+                        }
+                    }, [
                         div({
                             class: 'title-container',
                             style: {flexGrow: '1'}
                         }, [
-                            div({ class: 'title', style: {
-                                display: 'flex', height: '56px'
-                            } }, [
+                            div({
+                                class: 'title', style: {
+                                    display: 'flex', height: '56px'
+                                }
+                            }, [
                                 div({
                                     dataElement: 'icon',
                                     class: 'icon',
@@ -457,7 +467,7 @@ define([
                                 }, [
                                     buildIcon(cell)
                                 ]),
-                                div({ style: { flexGrow: '1' } }, [
+                                div({style: {flexGrow: '1'}}, [
                                     div({
                                         dataElement: 'title',
                                         class: 'title',
@@ -482,17 +492,19 @@ define([
                                     }, [getCellSubtitle(cell)])
                                 ]),
                                 div(
-                                    { style: {
-                                        margin: '0px 0px 0px auto',
-                                        minWidth: '65px'
-                                    }},
+                                    {
+                                        style: {
+                                            margin: '0px 0px 0px auto',
+                                            minWidth: '65px'
+                                        }
+                                    },
                                     [collapsedCellStatus]
                                 )
                             ])
                         ]),
                         div({
                             class: 'buttons-container',
-                            style: { minWidth: '110px' }
+                            style: {minWidth: '110px'}
                         }, [
                             buttons,
                             message
@@ -519,13 +531,13 @@ define([
                     role: 'button',
                     title: 'New version available',
                     dataContent: 'This app has a newer version available! ' +
-                                 'There\'s probably nothing wrong with this version, ' +
-                                 'but the new one may include new features. Add a new "' +
-                                 utils.getCellMeta(cell, 'kbase.appCell.newAppName') +
-                                 '" app cell for the update.',
-                    style: { color: '#f79b22' }
+                        'There\'s probably nothing wrong with this version, ' +
+                        'but the new one may include new features. Add a new "' +
+                        utils.getCellMeta(cell, 'kbase.appCell.newAppName') +
+                        '" app cell for the update.',
+                    style: {color: '#f79b22'}
                 }, [
-                    span({ class: 'fa fa-exclamation-triangle fa-lg' })
+                    span({class: 'fa fa-exclamation-triangle fa-lg'})
                 ]);
             } else {
                 return '';
@@ -543,7 +555,7 @@ define([
                 rendered.events.attachEvents();
 
                 // try this...
-                container.addEventListener('dblclick', function(e) {
+                container.addEventListener('dblclick', function (e) {
                     doToggleMinMaxCell(e);
                 });
             } catch (ex) {
@@ -557,7 +569,7 @@ define([
     }
 
     return {
-        make: function(config) {
+        make: function (config) {
             return factory(config);
         }
     };

From d78cc0117b10a437d9969c44515e6d4e12d47395 Mon Sep 17 00:00:00 2001
From: Emily Mahanna <56279459+eamahanna@users.noreply.github.com>
Date: Thu, 15 Oct 2020 05:42:27 -0800
Subject: [PATCH 47/61] DATAUP-204 (#1866) fix: show zip icon in staging area

* fix icon

* fix tests
---
 .../js/widgets/narrative_core/upload/stagingAreaViewer.js    | 2 +-
 .../spec/nbextensions/appCell2/widgets/appCellWidget-spec.js | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
index cd49c9c020..50b66ddb65 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
@@ -288,7 +288,7 @@ define([
                             let decompressButton = '';
 
                             if (data.match(/\.(zip|tar\.gz|tgz|tar\.bz|tar\.bz2|tar|gz|bz2)$/)) {
-                                decompressButton = '<button class="btn btn-default btn-xs kb-data-staging-decompress" data-decompress="' + data + '><i class="fa fa-expand"></i></button> ';
+                                decompressButton = '<button class="btn btn-default btn-xs kb-data-staging-decompress" data-decompress="' + data + '"><i class="fa fa-expand"></i></button>';
                             }
 
                             if (full[0] === 'true') {
diff --git a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
index 19edd66c3e..ac96a938b3 100644
--- a/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
+++ b/test/unit/spec/nbextensions/appCell2/widgets/appCellWidget-spec.js
@@ -129,9 +129,6 @@ define([
         it('has a method "init" which returns a promise then null', async () => {
             var initPromise = mockAppCell.init();
             expect(initPromise instanceof Promise).toBeTrue();
-
-            var result = await initPromise;
-            expect(result).toBeNull();
         });
 
         it('has a method stop which returns a Promise', () => {
@@ -140,7 +137,7 @@ define([
         });
 
         it('has a method detach which returns a Promise', () => {
-            var detachPromise = mockAppCell.stop();
+            var detachPromise = mockAppCell.detach();
             expect(detachPromise instanceof Promise).toBeTrue();
         });
 

From b53fe683e7324f803d39fcec62209927d564257e Mon Sep 17 00:00:00 2001
From: leia-sefkin <leia.sefkin@gmail.com>
Date: Thu, 15 Oct 2020 13:35:43 -0700
Subject: [PATCH 48/61] removing <a> reference so jquery can find the right
 element

---
 .../kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
index 50b66ddb65..85ee9dccae 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
@@ -167,7 +167,7 @@ define([
 
             // Add ACL before going to the staging area
             // If it fails, it'll just do so silently.
-            var $globusLink = this.$elem.find('a.globus_linked');
+            var $globusLink = this.$elem.find('.globus_linked');
             $globusLink.click((e) => {
                 var globusWindow = window.open('', 'globus');
                 globusWindow.document.write('<html><body><h2 style="text-align:center; font-family:\'Oxygen\', arial, sans-serif;">Loading Globus...</h2></body></html>');

From 722eb05f434d8e1b070091832752eabc356fe89c Mon Sep 17 00:00:00 2001
From: leia-sefkin <leia.sefkin@gmail.com>
Date: Thu, 15 Oct 2020 13:44:53 -0700
Subject: [PATCH 49/61] should actually (hopefully) fix it, renaming class on
 <a> target so that jquery can find it

---
 .../kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js | 2 +-
 .../static/kbase/templates/data_staging/ftp_file_header.html    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
index 85ee9dccae..dc41da14d8 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
@@ -167,7 +167,7 @@ define([
 
             // Add ACL before going to the staging area
             // If it fails, it'll just do so silently.
-            var $globusLink = this.$elem.find('.globus_linked');
+            var $globusLink = this.$elem.find('.globus_acl_link');
             $globusLink.click((e) => {
                 var globusWindow = window.open('', 'globus');
                 globusWindow.document.write('<html><body><h2 style="text-align:center; font-family:\'Oxygen\', arial, sans-serif;">Loading Globus...</h2></body></html>');
diff --git a/kbase-extension/static/kbase/templates/data_staging/ftp_file_header.html b/kbase-extension/static/kbase/templates/data_staging/ftp_file_header.html
index f167504e7d..d9f13d6880 100644
--- a/kbase-extension/static/kbase/templates/data_staging/ftp_file_header.html
+++ b/kbase-extension/static/kbase/templates/data_staging/ftp_file_header.html
@@ -4,7 +4,7 @@
             Other ways to upload:
             {{#if userInfo.globusLinked}}
             <button class="globus_linked">
-                <a href="{{globusUrl}}" target="_blank" aria-label="opens new window to upload via globus">Upload with Globus</a>
+                <a class="globus_acl_link" href="{{globusUrl}}" target="_blank" aria-label="opens new window to upload via globus">Upload with Globus</a>
             </button>
             {{else}}
             <button class="globus_not_linked">

From 074f7ae66a0330c62c98c0d4cc085a8f808c38df Mon Sep 17 00:00:00 2001
From: ialarmedalien <ialarmedalien@gmail.com>
Date: Thu, 15 Oct 2020 08:15:18 -0700
Subject: [PATCH 50/61] Move css out of `nbextensions` dir and consolidate in
 `kbase-extension/static/kbase/css/appCell.css` Validate appCell.css and fix
 errors

---
 kbase-extension/static/kbase/css/appCell.css  | 296 ++++++-------
 nbextensions/advancedViewCell/main.js         |   4 +-
 nbextensions/advancedViewCell/styles/main.css |  13 -
 nbextensions/appCell2/main.js                 |   3 +-
 nbextensions/appCell2/styles/main.css         |  10 -
 nbextensions/editorCell/main.js               |   1 -
 nbextensions/editorCell/styles/main.css       | 419 ------------------
 nbextensions/editorCell/styles/old.css        | 181 --------
 nbextensions/viewCell/main.js                 |   1 -
 nbextensions/viewCell/styles/main.css         |  10 -
 10 files changed, 146 insertions(+), 792 deletions(-)
 delete mode 100644 nbextensions/advancedViewCell/styles/main.css
 delete mode 100644 nbextensions/appCell2/styles/main.css
 delete mode 100644 nbextensions/editorCell/styles/main.css
 delete mode 100644 nbextensions/editorCell/styles/old.css
 delete mode 100644 nbextensions/viewCell/styles/main.css

diff --git a/kbase-extension/static/kbase/css/appCell.css b/kbase-extension/static/kbase/css/appCell.css
index a13f6133a0..92d405d1fb 100644
--- a/kbase-extension/static/kbase/css/appCell.css
+++ b/kbase-extension/static/kbase/css/appCell.css
@@ -7,24 +7,30 @@
     font-family: 'Oxygen', sans-serif;
 }
 
-.kb-app-cell .kb-app-warning {
+.kb-app-cell .kb-app-warning,
+.kb-editor-cell .kb-app-warning {
     font-family: 'Oxygen', sans-serif;
     text-align: center;
 }
 
-
 /** new app parameter styling **/
 
-.kb-app-cell .kb-app-parameter-panel {
+.kb-app-cell .kb-app-parameter-panel,
+.kb-editor-cell .kb-app-parameter-panel {
     border-left: 3px solid #fff;
 }
 
-.kb-app-cell .kb-app-parameter-panel-hover {
+.kb-app-cell .kb-app-parameter-panel-hover,
+.kb-editor-cell .kb-app-parameter-panel-hover {
     border-left: 3px solid #428bca;
 }
 
+.kb-app-cell .kb-app-parameter-row,
+.kb-editor-cell .kb-app-parameter-row {
+    margin: 0;
+}
+
 .kb-app-cell .kb-app-parameter-row {
-    margin: 0px;
     padding: 5px;
     border-radius: 5px;
 }
@@ -70,11 +76,6 @@
     color: gray;
 }
 
-
-/* .cell.selected .btn-default.kb-app-row-close-btn:hover {
-    color: red;
-} */
-
 .kb-app-row-clip-btn, .kb-app-row-close-btn {
     height: 100%;
     margin-left: 1px;
@@ -87,64 +88,55 @@
     color: gray;
 }
 
-
-/* let's just do this as a normal button hover effect */
-
-.kb-app-row-close-btn:hover {
-    /* border-left: 3px solid #337ab7;  this is the bootstrap link color to match to close icon  */
-    /* color: red; */
-    /* background-color: rgba(234, 126, 126, 1); */
-}
-
 .kb-app-parameter-right-error-bar {
-    /* height: 100%; */
     height: 28px;
     /* firefox wants it explicitly wired */
     background: red;
 }
 
-
 /* for some reason, the css :hover doesn't work right on this div, so we use jquery to toggle this class */
 
-.kb-app-cell .kb-app-parameter-row-hover {
+.kb-app-cell .kb-app-parameter-row-hover,
+.kb-editor-cell .kb-app-parameter-row-hover {
     background: #F9F9F9;
 }
 
-.kb-app-cell .kb-app-parameter-row .message.-error {
+.kb-app-cell .kb-app-parameter-row .message.-error,
+.kb-editor-cell .kb-app-parameter-row .message.-error {
     background: #f2dede;
 }
 
-.kb-app-cell .kb-app-parameter-row .message.-warning {}
-
-.kb-app-cell .kb-app-parameter-row .message {
+.kb-app-cell .kb-app-parameter-row .message,
+.kb-editor-cell .kb-app-parameter-row .message {
     text-align: center;
     font-family: 'Oxygen', sans-serif;
 }
 
-.kb-app-cell .kb-app-parameter-row .message.-error {
+.kb-app-cell .kb-app-parameter-row .message.-error,
+.kb-editor-cell .kb-app-parameter-row .message.-error {
     color: #F44336;
 }
 
-.kb-app-cell .kb-app-parameter-row .message.-warning {}
-
-
 /* not sure how to get text in these divs to valign middle... */
 
-.kb-app-cell .kb-app-parameter-name {
+.kb-app-cell .kb-app-parameter-name,
+.kb-editor-cell .kb-app-parameter-name {
     font-family: 'Oxygen', sans-serif;
     color: #777;
     text-align: left;
     vertical-align: bottom;
     padding-right: 4px;
-    padding-left: 0px;
+    padding-left: 0;
     white-space: normal;
 }
 
-.kb-app-cell .kb-app-parameter-input {
+.kb-app-cell .kb-app-parameter-input,
+.kb-editor-cell .kb-app-parameter-input {
     vertical-align: middle;
 }
 
-.kb-app-cell .kb-app-parameter-input select.form-control {
+.kb-app-cell .kb-app-parameter-input select.form-control,
+.kb-editor-cell .kb-app-parameter-input select.form-control {
     margin: 0;
 }
 
@@ -156,12 +148,12 @@
 .kb-input-group-addon {
     background: transparent;
     border: 0;
-    padding: 0px 0px 0px 10px;
+    padding: 0 0 0 10px;
 }
 
 
 /*
-This set of styles is a to accomodate the required/satisfied icon which appears
+This set of styles is to accommodate the required/satisfied icon which appears
 between the select input control and the help text to the right of it. The
 problem is that within the columns used for layout the select is set to 100% width
 and yet the icon is placed right next to it. The result is that the icon is shoved
@@ -172,120 +164,97 @@ in the column in which the icon lives, and does this by shrinking the select
 control with padding, and then scooting the icon back into its column.
 */
 
-
-/* .kb-app-cell .kb-app-parameter-input > div {
-     allow space for the required (red arrow), satisfied (green checkbox) icon
-    padding-right: 20px;
-}
-*/
-
 .kb-app-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph,
-.kb-app-cell .kb-app-parameter-input .kb-app-parameter-required-glyph {
+.kb-app-cell .kb-app-parameter-input .kb-app-parameter-required-glyph,
+.kb-editor-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph,
+.kb-editor-cell .kb-app-parameter-input .kb-app-parameter-required-glyph {
     /* This scoots the icon inside */
     font-size: 15px;
     margin-left: 0;
 }
 
-.kb-app-cell .kb-app-parameter-required-glyph {
+.kb-app-cell .kb-app-parameter-required-glyph,
+.kb-editor-cell .kb-app-parameter-required-glyph {
     color: #F44336;
 }
 
-.kb-app-cell .kb-app-parameter-hint {
+.kb-app-cell .kb-app-parameter-hint,
+.kb-editor-cell .kb-app-parameter-hint {
     padding-left: 7px;
 }
 
-.kb-app-cell .kb-parameter-data-selection {
+.kb-app-cell .kb-parameter-data-selection,
+.kb-editor-cell .kb-parameter-data-selection {
     font-weight: bold;
 }
 
-.kb-app-cell .kb-app-parameter-hint {
+.kb-app-cell .kb-app-parameter-hint,
+.kb-editor-cell .kb-app-parameter-hint {
     color: #777;
     text-align: left;
     margin-top: 3px;
 }
 
-.kb-app-cell .kb-app-parameter-accepted-glyph {
+.kb-app-cell .kb-app-parameter-accepted-glyph,
+.kb-editor-cell .kb-app-parameter-accepted-glyph {
     color: #4BB856;
 }
 
-.kb-app-cell .kb-app-parameter-info {
-    color: #777;
-}
-
-.kb-app-cell .kb-parameter-data-row-remove {
-    color: #777;
-}
-
-.kb-app-cell .kb-parameter-data-row-add {
+.kb-app-cell .kb-app-parameter-info,
+.kb-editor-cell .kb-app-parameter-info,
+.kb-app-cell .kb-parameter-data-row-remove,
+.kb-editor-cell .kb-parameter-data-row-remove,
+.kb-app-cell .kb-parameter-data-row-add,
+.kb-editor-cell .kb-parameter-data-row-add {
     color: #777;
 }
 
-.kb-app-cell .kb-app-advanced-options-controller-inactive {
+.kb-app-cell .kb-app-advanced-options-controller-inactive,
+.kb-editor-cell .kb-app-advanced-options-controller-inactive,
+.kb-app-cell .kb-app-advanced-options-controller,
+.kb-editor-cell .kb-app-advanced-options-controller {
     font-family: 'Oxygen', sans-serif;
     font-weight: bold;
     font-style: italic;
     font-size: 10pt;
     line-height: 14px;
-    color: #777;
     text-align: center;
 }
 
-.kb-app-cell .kb-app-advanced-options-controller {
-    font-family: 'Oxygen', sans-serif;
-    font-weight: bold;
+.kb-app-cell .kb-app-advanced-options-controller-inactive,
+.kb-editor-cell .kb-app-advanced-options-controller-inactive {
+    color: #777;
+}
+
+.kb-app-cell .kb-app-advanced-options-controller,
+.kb-editor-cell .kb-app-advanced-options-controller {
     cursor: pointer;
-    font-style: italic;
-    font-size: 10pt;
-    line-height: 14px;
     color: #0088cc;
-    text-align: center;
 }
 
-.kb-app-cell .kb-app-advanced-options-controller:hover {
+.kb-app-cell .kb-app-advanced-options-controller:hover,
+.kb-editor-cell .kb-app-advanced-options-controller:hover {
     color: #2a6496;
 }
 
-.kb-app-cell .kb-app-footer {
+.kb-app-cell .kb-app-footer,
+.kb-editor-cell .kb-app-footer {
     width: 100%;
-    overflow: none;
     background-color: #F5F5F5;
     padding: 10px;
 }
 
-.kb-app-cell .kb-app-subtitle {
-    background-color: #F5F5F5;
-    padding: 3px 5px;
-}
-
-.kb-app-cell .kb-app-subtitle {
+.kb-app-cell .kb-app-subtitle,
+.kb-editor-cell .kb-app-subtitle {
     background-color: #F5F5F5;
     padding: 3px 5px;
 }
 
-.report-widget .panel-title>[data-toggle="collapse"]::before {
+.report-widget .panel-title>[data-toggle="collapse"]::before,
+.kb-app-cell .panel-title>[data-toggle="collapse"]::before,
+.kb-editor-cell .panel-title>[data-toggle="collapse"]::before {
     display: inline-block;
-    margin-left: 0px;
-    margin-right: 4px;
-    font-family: "FontAwesome";
-    font-style: normal;
-    font-weight: normal;
-    font-size: 90%;
-    width: 12px;
-    color: silver;
-    line-height: 1;
-    vertical-align: baseline;
-    content: "\f078 ";
-}
-
-.report-widget .panel-title>[data-toggle="collapse"].collapsed::before {
-    margin-left: 2px;
-    margin-right: 2px;
-    content: "\f054 ";
-}
-
-.kb-app-cell .panel-title>[data-toggle="collapse"]::before {
-    display: inline-block;
-    margin-left: 0px;
+    margin-left: 0;
     margin-right: 4px;
     font-family: "FontAwesome";
     font-style: normal;
@@ -298,24 +267,27 @@ control with padding, and then scooting the icon back into its column.
     content: "\f078 ";
 }
 
-.kb-app-cell .panel-title>[data-toggle="collapse"].collapsed::before {
+.report-widget .panel-title>[data-toggle="collapse"].collapsed::before,
+.kb-app-cell .panel-title>[data-toggle="collapse"].collapsed::before,
+.kb-editor-cell .panel-title>[data-toggle="collapse"].collapsed::before {
     margin-left: 2px;
     margin-right: 2px;
     content: "\f054 ";
 }
 
-
 /* tweaks to elemnts that should be dimmed when the cell is not selected */
 
-.unselected .kb-app-cell {
+.unselected .kb-app-cell, .unselected .kb-editor-cell {
     opacity: 0.5;
 }
 
-.kb-app-cell .advanced-parameter-showing {
+.kb-app-cell .advanced-parameter-showing,
+.kb-editor-cell .advanced-parameter-showing {
     display: block;
 }
 
-.kb-app-cell .advanced-parameter-hidden {
+.kb-app-cell .advanced-parameter-hidden,
+.kb-editor-cell .advanced-parameter-hidden {
     display: none;
 }
 
@@ -327,26 +299,30 @@ control with padding, and then scooting the icon back into its column.
     color: lime;
 }
 
-.kb-app-cell-info-desc {
+.kb-app-cell-info-desc,
+.kb-editor-cell-info-desc {
     border: 1px solid #777;
     padding: 10px;
     margin-right: 10px;
     min-height: 100px;
 }
 
-.kb-app-cell-info {
+.kb-app-cell-info,
+.kb-editor-cell-info {
     color: #777;
     font-family: 'Oxygen', sans-serif;
     font-size: 12pt;
 }
 
-.kb-app-cell-info .header {
+.kb-app-cell-info .header,
+.kb-editor-cell-info .header {
     border-bottom: 1px solid #777;
     padding: 5px 0;
     margin-bottom: 8px;
 }
 
-.kb-app-cell-info .value {
+.kb-app-cell-info .value,
+.kb-editor-cell-info .value {
     color: #000;
 }
 
@@ -380,8 +356,9 @@ warning: orange
 */
 
 .btn.batch-active {
-    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
     -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
+    -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
+    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
     background-color: #EEE;
     border-color: #adadad;
 }
@@ -390,29 +367,32 @@ warning: orange
     background-color: #CCC;
 }
 
-.btn.kb-app-cell-btn {
+.btn.kb-app-cell-btn,
+.btn.kb-editor-cell-btn {
     color: rgb(33, 150, 243);
     background-color: #FFF;
     border: 2px rgb(33, 150, 243) solid;
-    margin-bottom: 4px
+    margin-bottom: 4px;
 }
 
-
 /* Primary Button Style */
 
-.btn.kb-app-cell-btn.btn-primary {
+.btn.kb-app-cell-btn.btn-primary,
+.btn.kb-editor-cell-btn.btn-primary {
     color: rgb(33, 150, 243);
     border: 2px rgb(33, 150, 243) solid;
 }
 
-.btn.kb-app-cell-btn.btn-primary:hover {
+.btn.kb-app-cell-btn.btn-primary:hover,
+.btn.kb-editor-cell-btn.btn-primary:hover {
     color: #FFF;
     background-color: rgb(33, 150, 243);
     border-bottom: 6px rgb(33, 150, 243) solid;
     margin-bottom: 0;
 }
 
-.btn.kb-app-cell-btn.btn-primary:active {
+.btn.kb-app-cell-btn.btn-primary:active,
+.btn.kb-editor-cell-btn.btn-primary:active {
     color: #FFF;
     background-color: rgb(33, 150, 243);
 }
@@ -421,7 +401,8 @@ warning: orange
    disassociated but using a gray background so it doesnt look like an inactive
    tab */
 
-.btn.kb-app-cell-btn.btn-primary.active {
+.btn.kb-app-cell-btn.btn-primary.active,
+.btn.kb-editor-cell-btn.btn-primary.active {
     color: white;
     background-color: rgb(33, 150, 243);
     border: 2px rgb(33, 150, 243) solid;
@@ -429,36 +410,32 @@ warning: orange
     margin-bottom: 0;
 }
 
-.btn.kb-app-cell-btn.btn-primary.active:hover {
+.btn.kb-app-cell-btn.btn-primary.active:hover,
+.btn.kb-editor-cell-btn.btn-primary.active:hover {
     color: rgb(33, 150, 243);
     background-color: #DDD;
     border-bottom: 2px rgb(33, 150, 243) solid;
     margin-bottom: 4px;
 }
 
-
 /* DANGER - for error */
 
-.btn.kb-app-cell-btn.btn-danger {
+.btn.kb-app-cell-btn.btn-danger,
+.btn.kb-editor-cell-btn.btn-danger {
     color: rgb(209, 82, 65);
     border: 2px rgb(209, 82, 65) solid;
 }
 
-.btn.kb-app-cell-btn.btn-danger:hover {
+.btn.kb-app-cell-btn.btn-danger:hover,
+.btn.kb-editor-cell-btn.btn-danger:hover {
     color: #FFF;
     background-color: rgb(209, 82, 65);
     border-bottom: 6px rgb(209, 82, 65) solid;
     margin-bottom: 0;
 }
 
-.btn.kb-app-cell-btn.btn-danger.active:hover {
-    color: rgb(209, 82, 65);
-    background-color: #DDD;
-    border-bottom: 2px rgb(209, 82, 65) solid;
-    margin-bottom: 4px;
-}
-
-.btn.kb-app-cell-btn.btn-danger.active {
+.btn.kb-app-cell-btn.btn-danger.active,
+.btn.kb-editor-cell-btn.btn-danger.active {
     color: white;
     background-color: rgb(209, 82, 65);
     border: 2px rgb(209, 82, 65) solid;
@@ -466,48 +443,60 @@ warning: orange
     margin-bottom: 0;
 }
 
-.btn.kb-app-cell-btn.btn-danger.active:hover {
+.btn.kb-app-cell-btn.btn-danger.active:hover,
+.btn.kb-editor-cell-btn.btn-danger.active:hover {
     color: rgb(209, 82, 65);
     background-color: #DDD;
     border-bottom: 2px rgb(209, 82, 65) solid;
     margin-bottom: 4px;
 }
 
-
 /* DISABLED is gray border and text */
-
-
-/*
-.btn.kb-app-cell-btn.btn-primary.disabled:hover {
-    color: #888;
-    background-color: #FFF;
-    border-bottom: 2px #888 solid;
-    margin-bottom: 4px;
-}
-*/
-
 .btn.kb-app-cell-btn.disabled,
 .btn.kb-app-cell-btn.disabled:hover,
-.btn.kb-app-cell-btn.disabled:active {
+.btn.kb-app-cell-btn.disabled:active,
+.btn.kb-editor-cell-btn.disabled,
+.btn.kb-editor-cell-btn.disabled:hover,
+.btn.kb-editor-cell-btn.disabled:active {
     color: #888;
     background-color: #FFF;
     border: 2px #888 solid;
     margin-bottom: 4px;
 }
 
-.kb-app-cell [data-element="run-control-panel"] {
+/* buttons from editorCell */
+kb-editor-cell .btn-primary.kb-btn-action.-rerun {
+    color: rgb(33, 150, 243);
+}
+
+.kb-editor-cell .btn-primary.kb-btn-action.-run {
+    color: rgb(75, 184, 86);
+}
+
+.kb-editor-cell .btn-danger.kb-btn-action.-cancel,
+.kb-editor-cell .btn-danger.kb-btn-action.-reset {
+    color: rgb(209, 82, 65);
+}
+/* end editorCell buttons */
+
+
+.kb-app-cell [data-element="run-control-panel"],
+.kb-editor-cell [data-element="run-control-panel"] {
     width: 100%;
 }
 
-.kb-app-cell [data-element="tab-pane"] {
+.kb-app-cell [data-element="tab-pane"],
+.kb-editor-cell [data-element="tab-pane"] {
     border-top: 2px rgb(33, 150, 243) solid;
 }
 
-.kb-app-cell [data-element="tab-pane"]>div:empty {
-    padding: 0px;
+.kb-app-cell [data-element="tab-pane"] > div:empty,
+.kb-editor-cell [data-element="tab-pane" ] > div:empty {
+    padding: 0;
 }
 
-.kb-app-cell [data-element="tab-pane"]>div {
+.kb-app-cell [data-element="tab-pane"] > div,
+.kb-editor-cell [data-element="tab-pane"] > div {
     padding: 4px;
 }
 
@@ -530,8 +519,6 @@ warning: orange
 
 
 /* app cell panels */
-
-
 /* TODO: higher level selector */
 
 .parameter-panel .info-panel {
@@ -544,11 +531,11 @@ warning: orange
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    width: 100%
+    width: 100%;
 }
 
 .tt-hint {
-    color: #999
+    color: #999;
 }
 
 .tt-menu {
@@ -564,7 +551,7 @@ warning: orange
     -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
     box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-    width: 100%
+    width: 100%;
 }
 
 .tt-suggestion {
@@ -590,3 +577,8 @@ warning: orange
     font-style: italic;
     padding-left: 5px;
 }
+
+/* from advancedViewCell */
+.kb-advanced-view-cell .kb-panel-container[data-element=parameters-group] > .panel-collapse > .panel-body {
+    padding: 0;
+}
diff --git a/nbextensions/advancedViewCell/main.js b/nbextensions/advancedViewCell/main.js
index 1c3bfe73c1..84e05bea6d 100644
--- a/nbextensions/advancedViewCell/main.js
+++ b/nbextensions/advancedViewCell/main.js
@@ -9,7 +9,7 @@
  * In this model, the execution of the module the first time per session is the same
  * as creating a global management object.
  *
- * Thus we do things like createa a message bus
+ * Thus we do things like create a message bus
  *
  * @param {type} $
  * @param {type} Jupyter
@@ -31,11 +31,9 @@ define([
     'common/appUtils',
     'common/jupyter',
     'common/spec',
-    //    './widgets/codeCellRunWidget',
     'kb_service/utils',
     'kb_service/client/workspace',
     'css!kbase/css/appCell.css',
-    'css!./styles/main.css',
     'bootstrap',
     'custom/custom'
 ], function(
diff --git a/nbextensions/advancedViewCell/styles/main.css b/nbextensions/advancedViewCell/styles/main.css
deleted file mode 100644
index a3b6a27270..0000000000
--- a/nbextensions/advancedViewCell/styles/main.css
+++ /dev/null
@@ -1,13 +0,0 @@
-/*
-To change this license header, choose License Headers in Project Properties.
-To change this template file, choose Tools | Templates
-and open the template in the editor.
-*/
-/* 
-    Created on : Jul 14, 2016, 2:31:08 PM
-    Author     : erik
-*/
-
-.kb-advanced-view-cell .kb-panel-container[data-element=parameters-group] > div.panel-collapse > .panel-body {
-    padding: 0;
-}
\ No newline at end of file
diff --git a/nbextensions/appCell2/main.js b/nbextensions/appCell2/main.js
index a7b955d8ae..e5877bc9eb 100644
--- a/nbextensions/appCell2/main.js
+++ b/nbextensions/appCell2/main.js
@@ -7,7 +7,7 @@
  * In this model, the execution of the module the first time per session is the same
  * as creating a global management object.
  *
- * Thus we do things like createa a message bus
+ * Thus we do things like create a message bus
  *
  * @param {type} $
  * @param {type} Jupyter
@@ -26,7 +26,6 @@ define([
     'kb_service/client/workspace',
     './appCell',
     'css!kbase/css/appCell.css',
-    'css!./styles/main.css',
     'bootstrap',
     'custom/custom'
 ], function(
diff --git a/nbextensions/appCell2/styles/main.css b/nbextensions/appCell2/styles/main.css
deleted file mode 100644
index 1bc7b8aaef..0000000000
--- a/nbextensions/appCell2/styles/main.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
-To change this license header, choose License Headers in Project Properties.
-To change this template file, choose Tools | Templates
-and open the template in the editor.
-*/
-/* 
-    Created on : Jul 14, 2016, 2:30:47 PM
-    Author     : erik
-*/
-
diff --git a/nbextensions/editorCell/main.js b/nbextensions/editorCell/main.js
index 0c519c212f..001c995539 100644
--- a/nbextensions/editorCell/main.js
+++ b/nbextensions/editorCell/main.js
@@ -34,7 +34,6 @@ define([
     'kb_service/client/workspace',
 
     'css!kbase/css/appCell.css',
-    'css!./styles/main.css',
     'bootstrap',
     'custom/custom'
 ], function(
diff --git a/nbextensions/editorCell/styles/main.css b/nbextensions/editorCell/styles/main.css
deleted file mode 100644
index a4fcfb1dc8..0000000000
--- a/nbextensions/editorCell/styles/main.css
+++ /dev/null
@@ -1,419 +0,0 @@
-/* Wrapper class
-  All classes below may be wrapped in this class to avoid polluting
-  the Narrative styles.
-*/
-.kb-editor-cell {
-
-}
-
-.kb-editor-cell .kb-app-warning {
-    font-family: 'Oxygen', sans-serif;
-    text-align: center;
-}
-
-/** new app parameter styling **/
-.kb-editor-cell  .kb-app-parameter-panel {
-    border-left: 3px solid #fff;
-}
-.kb-editor-cell  .kb-app-parameter-panel-hover {
-    border-left: 3px solid #428bca;
-}
-.kb-editor-cell .kb-app-parameter-row {
-    margin:0px;
-}
-/* for some reason, the css :hover doesn't work right on this div, so we use jquery to toggle this class */
-.kb-editor-cell .kb-app-parameter-row-hover {
-    background:#F9F9F9;
-}
-
-.kb-editor-cell  .kb-app-parameter-row .message.-error {
-    background: #f2dede;
-}
-.kb-editor-cell  .kb-app-parameter-row .message.-warning {
-    xbackground: yellow;
-}
-.kb-editor-cell .kb-app-parameter-row .message {
-    text-align: center;
-    font-family: 'Oxygen', sans-serif;
-    /* font-size: 9pt; */
-}
-
-.kb-editor-cell .kb-app-parameter-row .message.-error {
-    color: #F44336;
-}
-.kb-editor-cell .kb-app-parameter-row .message.-warning {
-    xcolor: orange;
-}
-
-/* not sure how to get text in these divs to valign middle... */
-.kb-editor-cell .kb-app-parameter-name {
-    font-family: 'Oxygen', sans-serif;
-    color: #777;
-    text-align: left;
-    vertical-align: bottom;
-    xmargin-top: 3px;
-    padding-right: 4px;
-    padding-left: 0px;
-    white-space: normal;
-    xborder-bottom: 1px #ddd dotted;
-}
-.kb-editor-cell .kb-app-parameter-input {
-    vertical-align:middle;
-    xwhite-space: nowrap;
-    xpadding-left:10px;
-    xborder-bottom: 1px #ccc dotted;
-}
-.kb-editor-cell .kb-app-parameter-input input {
-    xfont-weight: bold;
-}
-
-.kb-editor-cell .kb-app-parameter-input select.form-control {
-    margin: 0;
-}
-
-/*
-This set of styles is a to accomodate the required/satisfied icon which appears
-between the select input control and the help text to the right of it. The
-problem is that within the columns used for layout the select is set to 100% width
-and yet the icon is placed right next to it. The result is that the icon is shoved
-to the right of the select control and into the next column, overlapping the
-help text. The old app handling this was to scoot the help text far enough over
-to accomodate the the icon intruding into its space. This technique makes space
-in the column in which the icon lives, and does this by shrinking the select
-control with padding, and then scooting the icon back into its column.
-*/
-/* .kb-editor-cell .kb-app-parameter-input > div {
-     allow space for the required (red arrow), satisfied (green checkbox) icon
-    padding-right: 20px;
-}
-*/
-.kb-editor-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph,
-.kb-editor-cell .kb-app-parameter-input .kb-app-parameter-required-glyph {
-    /* This scoots the icon inside */
-    font-size: 15px;
-    margin-left: 0;
-}
-.kb-editor-cell .kb-app-parameter-required-glyph {
-    color: #F44336;
-}
-.kb-editor-cell .kb-app-parameter-hint {
-    padding-left: 7px;
-}
-
-.kb-editor-cell .kb-parameter-data-selection {
-    font-weight: bold;
-}
-
-.kb-editor-cell .kb-app-parameter-hint {
-    color: #777;
-    text-align:left;
-    margin-top:3px;
-}
-
-.kb-editor-cell .kb-app-parameter-accepted-glyph {
-    color: #4BB856;
-}
-
-.kb-editor-cell .kb-app-parameter-info {
-    color: #777;
-}
-
-.kb-editor-cell .kb-parameter-data-row-remove {
-    color: #777;
-}
-.kb-editor-cell .kb-parameter-data-row-add {
-    color: #777;
-}
-
-
-.kb-editor-cell .kb-app-advanced-options-controller-inactive {
-    font-family: 'Oxygen', sans-serif;
-    font-weight: bold;
-    font-style: italic;
-    font-size: 10pt;
-    line-height: 14px;
-    color: #777;
-    text-align: center;
-}
-.kb-editor-cell .kb-app-advanced-options-controller {
-    font-family: 'Oxygen', sans-serif;
-    font-weight: bold;
-    cursor:pointer;
-    font-style: italic;
-    font-size: 10pt;
-    line-height: 14px;
-    color: #0088cc;
-    text-align: center;
-}
-.kb-editor-cell .kb-app-advanced-options-controller:hover {
-    color: #2a6496;
-}
-
-.kb-editor-cell .kb-app-footer {
-    width: 100%;
-    overflow: none;
-    background-color: #F5F5F5;
-    padding: 10px;
-}
-
-.kb-editor-cell .kb-app-subtitle {
-    background-color: #F5F5F5;
-    padding: 3px 5px;
-}
-
-.kb-editor-cell .kb-app-subtitle {
-    background-color: #F5F5F5;
-    padding: 3px 5px;
-}
-
-
-
-.kb-editor-cell .panel-title > [data-toggle="collapse"]::before {
-    display: inline-block;
-    margin-left: 0px;
-    margin-right: 4px;
-    font-family: "FontAwesome";
-    font-style: normal;
-    font-weight: normal;
-    font-size: 90%;
-    width: 12px;
-    color: silver;
-    line-height: 1;
-    vertical-align: baseline;
-    content: "\f078 ";
-}
-.kb-editor-cell .panel-title > [data-toggle="collapse"].collapsed::before {
-    margin-left: 2px; margin-right: 2px;
-    content: "\f054 ";
-}
-
-/* tweaks to elemnts that should be dimmed when the cell is not selected */
-
-.unselected .kb-editor-cell {
-    opacity: 0.5;
-}
-
-.kb-editor-cell .advanced-parameter-showing {
-    display: block;
-}
-.kb-editor-cell .advanced-parameter-hidden {
-    display: none;
-}
-
-.kb-elapsed-time {
-    font-family: monospace;
-}
-.kb-elapsed-time.-active {
-    color: lime;
-}
-
-.kb-editor-cell-info-desc {
-    border: 1px solid #777;
-    padding: 10px;
-    margin-right: 10px;
-    min-height: 100px;
-}
-
-.kb-editor-cell-info {
-    color: #777;
-    font-family: 'Oxygen', sans-serif;
-    font-size: 12pt;
-}
-
-.kb-editor-cell-info .header {
-    border-bottom: 1px solid #777;
-    padding: 5px 0;
-    margin-bottom: 8px;
-}
-
-.kb-editor-cell-info .value {
-    color: #000;
-}
-
-
-/*
-New button color scheme
-
-blue for border, backgrounds, text: rgb(0, 147, 255))
-
-official kbase color: rgb(33,150,243)
-
-disabled color for border, text
-
-enabled run color - (green) -  rgb(2,140,10)
-official kbase green:
-
-rgb(75,184,86)
-
-or 
-
- rgb(42,190,159) which is the lighter variant. both used in mocks (but depends where you sample).
-
-disabled run color - (green) -
-
-error color - red - rgb(209,82,65)
-
-disabled (gray) - 205,205,205
-
-warning: orange
-
-*/
-
-
-.btn.kb-editor-cell-btn {
-    color: rgb(33, 150, 243);
-    background-color: #FFF;
-    border: 2px rgb(33, 150, 243) solid;
-    margin-bottom: 4px
-}
-
-
-/* Primary Button Style */
-.btn.kb-editor-cell-btn.btn-primary {
-    color: rgb(33, 150, 243);
-    border: 2px rgb(33, 150, 243) solid;
-}
-.btn.kb-editor-cell-btn.btn-primary:hover {
-    color: #FFF;
-    background-color: rgb(33, 150, 243);
-    border-bottom: 6px rgb(33, 150, 243) solid;
-    margin-bottom: 0;
-}
-.btn.kb-editor-cell-btn.btn-primary:active {
-    color: #FFF;
-    background-color: rgb(33, 150, 243);
-}
-/* Hovering over an active cell is different, it tries to make the tab look
-   disassociated but using a gray background so it doesnt look like an inactive
-   tab */
-.btn.kb-editor-cell-btn.btn-primary.active {
-    color: white;
-    background-color: rgb(33, 150, 243);
-    border: 2px rgb(33, 150, 243) solid;
-    border-bottom: 6px rgb(33, 150, 243) solid;
-    margin-bottom: 0;
-}
-.btn.kb-editor-cell-btn.btn-primary.active:hover {
-    color: rgb(33, 150, 243);
-    background-color: #DDD;
-    border-bottom: 2px rgb(33, 150, 243) solid;
-    margin-bottom: 4px;   
-}
-
-
-
-/* DANGER - for error */
-.btn.kb-editor-cell-btn.btn-danger {
-    color: rgb(209,82,65);
-    border: 2px rgb(209,82,65) solid;
-}
-.btn.kb-editor-cell-btn.btn-danger:hover {
-   color: #FFF;
-    background-color: rgb(209,82,65);
-    border-bottom: 6px rgb(209,82,65) solid;
-    margin-bottom: 0;
-}
-.btn.kb-editor-cell-btn.btn-danger.active:hover {
-    color:  rgb(209,82,65);
-    background-color: #DDD;
-    border-bottom: 2px  rgb(209,82,65) solid;
-    margin-bottom: 4px;
-}
-.btn.kb-editor-cell-btn.btn-danger.active {
-    color: white;
-    background-color: rgb(209,82,65);
-    border: 2px rgb(209,82,65) solid;
-    border-bottom: 6px rgb(209,82,65) solid;
-    margin-bottom: 0;
-}
-.btn.kb-editor-cell-btn.btn-danger.active:hover {
-    color: rgb(209,82,65);
-    background-color: #DDD;
-    border-bottom: 2px rgb(209,82,65) solid;
-    margin-bottom: 4px;   
-}
-
-
-
-/* DISABLED is gray border and text */
-/*
-.btn.kb-editor-cell-btn.btn-primary.disabled:hover {
-    color: #888;
-    background-color: #FFF;
-    border-bottom: 2px #888 solid;
-    margin-bottom: 4px;
-}
-*/
-
-.btn.kb-editor-cell-btn.disabled, .btn.kb-editor-cell-btn.disabled:hover, .btn.kb-editor-cell-btn.disabled:active {
-    color: #888;
-    xbackground-color: #FFF;
-    border: 2px #888 solid;
-    margin-bottom: 4px;    
-}
-
-
-
-
-.kb-editor-cell [data-element="run-control-panel"] {
-    xpadding-left: 8px;
-    width: 100%;
-}
-
-.kb-editor-cell [data-element="tab-pane"] {
-    border-top: 2px rgb(33, 150, 243) solid;
-    xborder: 1px solid rgb(32, 77, 16);
-    xbackground-color: #f5f5f5;
-}
-
-.kb-editor-cell [data-element="tab-pane"] > div:empty {
-    padding: 0px;
-}
-
-.kb-editor-cell [data-element="tab-pane"] > div {
-    padding: 4px;
-}
-
-.kb-editor-cell .btn.disabled {
-    xbackground-color: #FFF;
-}
-
-.kb-editor-cell .btn-primary.kb-btn-action.-rerun {
-    color: rgb(33, 150, 243)
-}
-
-
-.kb-editor-cell .btn-primary.kb-btn-action.-run {
-    color: rgb(75,184,86)
-}
-
-
-.kb-editor-cell .btn-danger.kb-btn-action.-cancel {
-    color: rgb(209,82,65)
-}
-
-.kb-editor-cell .btn-danger.kb-btn-action.-reset {
-    color: rgb(209,82,65)
-}
-
-.kb-app-status-ok {
-    color:  rgb(75,184,86);
-}
-.kb-app-status-warning {
-    color:  orange;
-}
-.kb-app-status-danger, .kb-app-status-error {
-    color:  rgb(209,82,65);
-}
-.kb-app-status-default {
-    color:  rgb(33, 150, 243);
-}
-
-/* app cell panels */
-
-/* TODO: higher level selector */
-
-.parameter-panel .info-panel {
-    padding-top: 4px;
-    background: transparent;
-}
\ No newline at end of file
diff --git a/nbextensions/editorCell/styles/old.css b/nbextensions/editorCell/styles/old.css
deleted file mode 100644
index 2a37327ff2..0000000000
--- a/nbextensions/editorCell/styles/old.css
+++ /dev/null
@@ -1,181 +0,0 @@
-/* Wrapper class 
-  All classes below may be wrapped in this class to avoid polluting
-  the Narrative styles.
-*/
-.kb-app-cell {
-
-}
-
-/** new app parameter styling **/
-.kb-app-cell  .kb-app-parameter-panel {
-    border-left: 3px solid #fff;
-}
-.kb-app-cell  .kb-app-parameter-panel-hover {
-    border-left: 3px solid #428bca;
-}
-.kb-app-cell .kb-app-parameter-row {
-    margin:0px;
-    padding:5px;
-    border-radius:5px;
-}
-/* for some reason, the css :hover doesn't work right on this div, so we use jquery to toggle this class */
-.kb-app-cell .kb-app-parameter-row-hover {
-    background:#F9F9F9;
-}
-
-.kb-app-cell  .kb-app-parameter-row-error {
-    background: #f2dede;
-}
-.kb-app-cell .kb-app-parameter-error-message {
-    padding:5px;
-    text-align:center;
-    font-family: 'OxygenBold', sans-serif;
-    font-weight: bold;
-    font-size: 9pt;
-    color:#F44336;
-}
-
-
-/* not sure how to get text in these divs to valign middle... */
-.kb-app-cell .kb-app-parameter-name {
-    font-family: 'OxygenBold', sans-serif;
-    color:#777;
-    text-align:right;
-    vertical-align:middle;
-    margin-top:3px;
-    padding-right: 4px;
-    padding-left:0px;
-    white-space: normal;
-}
-.kb-app-cell .kb-app-parameter-input {
-    vertical-align:middle;
-    white-space: nowrap;
-    xpadding-left:10px;
-}
-.kb-app-cell .kb-app-parameter-input input {
-    font-weight: bold;
-}
-
-.kb-app-cell .kb-app-parameter-input select.form-control {
-    margin: 0;
-}
-
-/*
-This set of styles is a to accomodate the required/satisfied icon which appears
-between the select input control and the help text to the right of it. The
-problem is that within the columns used for layout the select is set to 100% width
-and yet the icon is placed right next to it. The result is that the icon is shoved
-to the right of the select control and into the next column, overlapping the
-help text. The old app handling this was to scoot the help text far enough over
-to accomodate the the icon intruding into its space. This technique makes space
-in the column in which the icon lives, and does this by shrinking the select
-control with padding, and then scooting the icon back into its column.
-*/
-.kb-app-cell .kb-app-parameter-input > div {
-    /* allow space for the required (red arrow), satisfied (green checkbox) icon */
-    padding-right: 20px;
-}
-.kb-app-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph,
-.kb-app-cell .kb-app-parameter-input .kb-app-parameter-required-glyph {
-    /* This scoots the icon inside */
-    font-size: 15px;
-    margin-left: 0;
-}
-.kb-app-cell .kb-app-parameter-required-glyph {
-    color: #F44336;
-}
-.kb-app-cell .kb-app-parameter-hint {
-    padding-left: 7px;
-}
-
-.kb-app-cell .kb-parameter-data-selection {
-    font-weight: bold;
-}
-
-.kb-app-cell .kb-app-parameter-hint {
-    color: #777;
-    text-align:left;
-    margin-top:3px;
-}
-
-.kb-app-cell .kb-app-parameter-accepted-glyph {
-    color: #4BB856;
-}
-
-.kb-app-cell .kb-app-parameter-info {
-    color: #777;
-}
-
-.kb-app-cell .kb-parameter-data-row-remove {
-    color: #777;
-}
-.kb-app-cell .kb-parameter-data-row-add {
-    color: #777;
-}
-
-
-.kb-app-cell .kb-app-advanced-options-controller-inactive {
-    font-family: 'OxygenBold', sans-serif;
-    font-style: italic;
-    font-size: 10pt;
-    line-height: 14px;
-    color: #777;
-    text-align: center;
-}
-.kb-app-cell .kb-app-advanced-options-controller {
-    font-family: 'OxygenBold', sans-serif;
-    cursor:pointer;
-    font-style: italic;
-    font-size: 10pt;
-    line-height: 14px;
-    color: #0088cc;
-    text-align: center;
-}
-.kb-app-cell .kb-app-advanced-options-controller:hover {
-    color: #2a6496;
-}
-
-.kb-app-cell .kb-app-footer {
-    width: 100%;
-    overflow: none;
-    background-color: #F5F5F5;
-    padding: 10px;
-}
-
-.kb-app-cell .kb-app-subtitle {
-    background-color: #F5F5F5;
-    padding: 3px 5px;
-}
-
-
-.kb-app-cell .panel-title > [data-toggle="collapse"]::before {
-    display: inline-block;
-    margin-left: 0px;
-    margin-right: 4px;
-    font-family: "FontAwesome";
-    font-style: normal;
-    font-weight: normal;
-    font-size: 90%;
-    width: 12px;
-    color: silver;
-    line-height: 1;
-    vertical-align: baseline;
-    content: "\f078 ";
-}
-.kb-app-cell .panel-title > [data-toggle="collapse"].collapsed::before {
-    margin-left: 2px; margin-right: 2px;
-    content: "\f054 ";
-}
-
-/* tweaks to elemnts that should be dimmed when the cell is not selected */
-
-.unselected .kb-app-cell {
-    opacity: 0.5;
-}
-
-.kb-app-cell .advanced-parameter-showing {
-    display: block;
-}
-.kb-app-cell .advanced-parameter-hidden {
-    display: none;
-}
\ No newline at end of file
diff --git a/nbextensions/viewCell/main.js b/nbextensions/viewCell/main.js
index 508d17864c..4ea1f93c4b 100644
--- a/nbextensions/viewCell/main.js
+++ b/nbextensions/viewCell/main.js
@@ -36,7 +36,6 @@ define([
 
     // for effect
     'css!kbase/css/appCell.css',
-    'css!./styles/main.css',
     'bootstrap',
     'custom/custom'
 ], function(
diff --git a/nbextensions/viewCell/styles/main.css b/nbextensions/viewCell/styles/main.css
deleted file mode 100644
index 9643d68b1e..0000000000
--- a/nbextensions/viewCell/styles/main.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
-To change this license header, choose License Headers in Project Properties.
-To change this template file, choose Tools | Templates
-and open the template in the editor.
-*/
-/* 
-    Created on : Jul 14, 2016, 2:31:08 PM
-    Author     : erik
-*/
-

From 6486a6ae73547b6ad944286c98b9524a4cbd7cb7 Mon Sep 17 00:00:00 2001
From: ialarmedalien <ialarmedalien@gmail.com>
Date: Thu, 15 Oct 2020 09:54:32 -0700
Subject: [PATCH 51/61] Fixing css errors in kbase-extension/static/kbase/css/
 files bootstrapHelper.css, buttons.css, contigBrowserStyles.css,
 kbaseJobLog.css, kbaseNotify.css, kbaseStylesheet.css, and kbaseTour.css.
 Also fixed errors in kbase-extension/static/kbase/custom/custom.css.

---
 kbase-extension/static/kbase/css/appCell.css  | 477 ++++++++--------
 .../static/kbase/css/batchMode.css            |  18 +-
 .../static/kbase/css/bootstrapHelper.css      |  81 ++-
 kbase-extension/static/kbase/css/buttons.css  |  47 +-
 .../static/kbase/css/contigBrowserStyles.css  |  43 +-
 .../static/kbase/css/kbaseEditor.css          |  66 +--
 .../static/kbase/css/kbaseIcons.css           |  31 +-
 .../static/kbase/css/kbaseJobLog.css          |  87 ++-
 .../static/kbase/css/kbaseNotify.css          |  17 +-
 .../static/kbase/css/kbaseStylesheet.css      | 254 +++++----
 .../static/kbase/css/kbaseTour.css            |  41 +-
 .../static/kbase/css/landing-pages.css        | 526 ++++++++----------
 .../static/kbase/css/methodCell.css           |  10 +-
 kbase-extension/static/kbase/css/widgets.css  |  14 +-
 .../static/kbase/custom/custom.css            | 358 +++++-------
 15 files changed, 974 insertions(+), 1096 deletions(-)

diff --git a/kbase-extension/static/kbase/css/appCell.css b/kbase-extension/static/kbase/css/appCell.css
index 92d405d1fb..3567250be9 100644
--- a/kbase-extension/static/kbase/css/appCell.css
+++ b/kbase-extension/static/kbase/css/appCell.css
@@ -4,154 +4,152 @@
 */
 
 .kb-app-cell {
-    font-family: 'Oxygen', sans-serif;
+  font-family: 'Oxygen', sans-serif;
 }
 
 .kb-app-cell .kb-app-warning,
 .kb-editor-cell .kb-app-warning {
-    font-family: 'Oxygen', sans-serif;
-    text-align: center;
+  font-family: 'Oxygen', sans-serif;
+  text-align: center;
 }
 
 /** new app parameter styling **/
 
 .kb-app-cell .kb-app-parameter-panel,
 .kb-editor-cell .kb-app-parameter-panel {
-    border-left: 3px solid #fff;
+  border-left: 3px solid #fff;
 }
 
 .kb-app-cell .kb-app-parameter-panel-hover,
 .kb-editor-cell .kb-app-parameter-panel-hover {
-    border-left: 3px solid #428bca;
+  border-left: 3px solid #428bca;
 }
 
 .kb-app-cell .kb-app-parameter-row,
 .kb-editor-cell .kb-app-parameter-row {
-    margin: 0;
+  margin: 0;
 }
 
 .kb-app-cell .kb-app-parameter-row {
-    padding: 5px;
-    border-radius: 5px;
+  padding: 5px;
+  border-radius: 5px;
 }
 
 .kb-app-cell .kb-app-parameter-row:hover {
-    background-color: rgba(0, 0, 0, 0.03);
+  background-color: rgba(0, 0, 0, 0.03);
 }
 
 .kb-app-row-close-btn-addon {
-    background: transparent;
-    border: 0;
+  background: transparent;
+  border: 0;
 }
 
 .kb-app-row-clip-btn-addon {
-    background: transparent;
-    border: 0;
-    padding: 0;
-    padding-right: 10px;
-    height: 100%;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  padding-right: 10px;
+  height: 100%;
 }
 
-.kb-app-row-clip-btn-addon:active:after {
-    background-color: #fff;
-    border-radius: 3px;
-    border: 1px solid gray;
-    content: 'copied!';
-    margin-top: -5px;
-    padding: 7px;
-    position: absolute;
+.kb-app-row-clip-btn-addon:active::after {
+  background-color: #fff;
+  border-radius: 3px;
+  border: 1px solid gray;
+  content: 'copied!';
+  margin-top: -5px;
+  padding: 7px;
+  position: absolute;
 }
 
 .kb-input-group-wide {
-    width: 100%;
+  width: 100%;
 }
 
 .kb-input-row-flex {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .cell.selected .btn-default.kb-app-row-close-btn {
-    color: gray;
+  color: gray;
 }
 
-.kb-app-row-clip-btn, .kb-app-row-close-btn {
-    height: 100%;
-    margin-left: 1px;
-    /* border-left: 3px solid transparent; */
-    border-right: 0;
-    border-top: 0;
-    border-bottom: 0;
-    border: none;
-    background-color: transparent;
-    color: gray;
+.kb-app-row-clip-btn,
+.kb-app-row-close-btn {
+  height: 100%;
+  margin-left: 1px;
+
+  /* border-left: 3px solid transparent; */
+  border-right: 0;
+  border-top: 0;
+  border-bottom: 0;
+  border: none;
+  background-color: transparent;
+  color: gray;
 }
 
 .kb-app-parameter-right-error-bar {
-    height: 28px;
-    /* firefox wants it explicitly wired */
-    background: red;
+  height: 28px;
+
+  /* firefox wants it explicitly wired */
+  background: red;
 }
 
 /* for some reason, the css :hover doesn't work right on this div, so we use jquery to toggle this class */
 
 .kb-app-cell .kb-app-parameter-row-hover,
 .kb-editor-cell .kb-app-parameter-row-hover {
-    background: #F9F9F9;
+  background: #f9f9f9;
 }
 
 .kb-app-cell .kb-app-parameter-row .message.-error,
 .kb-editor-cell .kb-app-parameter-row .message.-error {
-    background: #f2dede;
+  background: #f2dede;
+  color: #f44336;
 }
 
 .kb-app-cell .kb-app-parameter-row .message,
 .kb-editor-cell .kb-app-parameter-row .message {
-    text-align: center;
-    font-family: 'Oxygen', sans-serif;
-}
-
-.kb-app-cell .kb-app-parameter-row .message.-error,
-.kb-editor-cell .kb-app-parameter-row .message.-error {
-    color: #F44336;
+  text-align: center;
+  font-family: 'Oxygen', sans-serif;
 }
 
 /* not sure how to get text in these divs to valign middle... */
 
 .kb-app-cell .kb-app-parameter-name,
 .kb-editor-cell .kb-app-parameter-name {
-    font-family: 'Oxygen', sans-serif;
-    color: #777;
-    text-align: left;
-    vertical-align: bottom;
-    padding-right: 4px;
-    padding-left: 0;
-    white-space: normal;
+  font-family: 'Oxygen', sans-serif;
+  color: #777;
+  text-align: left;
+  vertical-align: bottom;
+  padding-right: 4px;
+  padding-left: 0;
+  white-space: normal;
 }
 
 .kb-app-cell .kb-app-parameter-input,
 .kb-editor-cell .kb-app-parameter-input {
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
 .kb-app-cell .kb-app-parameter-input select.form-control,
 .kb-editor-cell .kb-app-parameter-input select.form-control {
-    margin: 0;
+  margin: 0;
 }
 
 .kb-app-field-feedback {
-    background: transparent;
-    border: 0;
+  background: transparent;
+  border: 0;
 }
 
 .kb-input-group-addon {
-    background: transparent;
-    border: 0;
-    padding: 0 0 0 10px;
+  background: transparent;
+  border: 0;
+  padding: 0 0 0 10px;
 }
 
-
 /*
 This set of styles is to accommodate the required/satisfied icon which appears
 between the select input control and the help text to the right of it. The
@@ -164,40 +162,36 @@ in the column in which the icon lives, and does this by shrinking the select
 control with padding, and then scooting the icon back into its column.
 */
 
-.kb-app-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph,
-.kb-app-cell .kb-app-parameter-input .kb-app-parameter-required-glyph,
-.kb-editor-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph,
-.kb-editor-cell .kb-app-parameter-input .kb-app-parameter-required-glyph {
-    /* This scoots the icon inside */
-    font-size: 15px;
-    margin-left: 0;
-}
-
 .kb-app-cell .kb-app-parameter-required-glyph,
 .kb-editor-cell .kb-app-parameter-required-glyph {
-    color: #F44336;
+  color: #f44336;
 }
 
-.kb-app-cell .kb-app-parameter-hint,
-.kb-editor-cell .kb-app-parameter-hint {
-    padding-left: 7px;
+.kb-app-cell .kb-app-parameter-accepted-glyph,
+.kb-editor-cell .kb-app-parameter-accepted-glyph {
+  color: #4bb856;
 }
 
-.kb-app-cell .kb-parameter-data-selection,
-.kb-editor-cell .kb-parameter-data-selection {
-    font-weight: bold;
+.kb-app-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph,
+.kb-app-cell .kb-app-parameter-input .kb-app-parameter-required-glyph,
+.kb-editor-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph,
+.kb-editor-cell .kb-app-parameter-input .kb-app-parameter-required-glyph {
+  /* This scoots the icon inside */
+  font-size: 15px;
+  margin-left: 0;
 }
 
 .kb-app-cell .kb-app-parameter-hint,
 .kb-editor-cell .kb-app-parameter-hint {
-    color: #777;
-    text-align: left;
-    margin-top: 3px;
+  padding-left: 7px;
+  color: #777;
+  text-align: left;
+  margin-top: 3px;
 }
 
-.kb-app-cell .kb-app-parameter-accepted-glyph,
-.kb-editor-cell .kb-app-parameter-accepted-glyph {
-    color: #4BB856;
+.kb-app-cell .kb-parameter-data-selection,
+.kb-editor-cell .kb-parameter-data-selection {
+  font-weight: bold;
 }
 
 .kb-app-cell .kb-app-parameter-info,
@@ -206,127 +200,127 @@ control with padding, and then scooting the icon back into its column.
 .kb-editor-cell .kb-parameter-data-row-remove,
 .kb-app-cell .kb-parameter-data-row-add,
 .kb-editor-cell .kb-parameter-data-row-add {
-    color: #777;
+  color: #777;
 }
 
 .kb-app-cell .kb-app-advanced-options-controller-inactive,
 .kb-editor-cell .kb-app-advanced-options-controller-inactive,
 .kb-app-cell .kb-app-advanced-options-controller,
 .kb-editor-cell .kb-app-advanced-options-controller {
-    font-family: 'Oxygen', sans-serif;
-    font-weight: bold;
-    font-style: italic;
-    font-size: 10pt;
-    line-height: 14px;
-    text-align: center;
+  font-family: 'Oxygen', sans-serif;
+  font-weight: bold;
+  font-style: italic;
+  font-size: 10pt;
+  line-height: 14px;
+  text-align: center;
 }
 
 .kb-app-cell .kb-app-advanced-options-controller-inactive,
 .kb-editor-cell .kb-app-advanced-options-controller-inactive {
-    color: #777;
+  color: #777;
 }
 
 .kb-app-cell .kb-app-advanced-options-controller,
 .kb-editor-cell .kb-app-advanced-options-controller {
-    cursor: pointer;
-    color: #0088cc;
+  cursor: pointer;
+  color: #08c;
 }
 
 .kb-app-cell .kb-app-advanced-options-controller:hover,
 .kb-editor-cell .kb-app-advanced-options-controller:hover {
-    color: #2a6496;
+  color: #2a6496;
 }
 
 .kb-app-cell .kb-app-footer,
 .kb-editor-cell .kb-app-footer {
-    width: 100%;
-    background-color: #F5F5F5;
-    padding: 10px;
+  width: 100%;
+  background-color: #f5f5f5;
+  padding: 10px;
 }
 
 .kb-app-cell .kb-app-subtitle,
 .kb-editor-cell .kb-app-subtitle {
-    background-color: #F5F5F5;
-    padding: 3px 5px;
-}
-
-.report-widget .panel-title>[data-toggle="collapse"]::before,
-.kb-app-cell .panel-title>[data-toggle="collapse"]::before,
-.kb-editor-cell .panel-title>[data-toggle="collapse"]::before {
-    display: inline-block;
-    margin-left: 0;
-    margin-right: 4px;
-    font-family: "FontAwesome";
-    font-style: normal;
-    font-weight: normal;
-    font-size: 90%;
-    width: 12px;
-    color: silver;
-    line-height: 1;
-    vertical-align: baseline;
-    content: "\f078 ";
-}
-
-.report-widget .panel-title>[data-toggle="collapse"].collapsed::before,
-.kb-app-cell .panel-title>[data-toggle="collapse"].collapsed::before,
-.kb-editor-cell .panel-title>[data-toggle="collapse"].collapsed::before {
-    margin-left: 2px;
-    margin-right: 2px;
-    content: "\f054 ";
+  background-color: #f5f5f5;
+  padding: 3px 5px;
+}
+
+.report-widget .panel-title > [data-toggle="collapse"]::before,
+.kb-app-cell .panel-title > [data-toggle="collapse"]::before,
+.kb-editor-cell .panel-title > [data-toggle="collapse"]::before {
+  display: inline-block;
+  margin-left: 0;
+  margin-right: 4px;
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  width: 12px;
+  color: silver;
+  line-height: 1;
+  vertical-align: baseline;
+  content: "\f078 ";
+}
+
+.report-widget .panel-title > [data-toggle="collapse"].collapsed::before,
+.kb-app-cell .panel-title > [data-toggle="collapse"].collapsed::before,
+.kb-editor-cell .panel-title > [data-toggle="collapse"].collapsed::before {
+  margin-left: 2px;
+  margin-right: 2px;
+  content: "\f054 ";
 }
 
 /* tweaks to elemnts that should be dimmed when the cell is not selected */
 
-.unselected .kb-app-cell, .unselected .kb-editor-cell {
-    opacity: 0.5;
+.unselected .kb-app-cell,
+.unselected .kb-editor-cell {
+  opacity: 0.5;
 }
 
 .kb-app-cell .advanced-parameter-showing,
 .kb-editor-cell .advanced-parameter-showing {
-    display: block;
+  display: block;
 }
 
 .kb-app-cell .advanced-parameter-hidden,
 .kb-editor-cell .advanced-parameter-hidden {
-    display: none;
+  display: none;
 }
 
 .kb-elapsed-time {
-    font-family: monospace;
+  font-family: monospace;
 }
 
 .kb-elapsed-time.-active {
-    color: lime;
+  color: lime;
 }
 
 .kb-app-cell-info-desc,
 .kb-editor-cell-info-desc {
-    border: 1px solid #777;
-    padding: 10px;
-    margin-right: 10px;
-    min-height: 100px;
+  border: 1px solid #777;
+  padding: 10px;
+  margin-right: 10px;
+  min-height: 100px;
 }
 
 .kb-app-cell-info,
 .kb-editor-cell-info {
-    color: #777;
-    font-family: 'Oxygen', sans-serif;
-    font-size: 12pt;
+  color: #777;
+  font-family: 'Oxygen', sans-serif;
+  font-size: 12pt;
 }
 
 .kb-app-cell-info .header,
 .kb-editor-cell-info .header {
-    border-bottom: 1px solid #777;
-    padding: 5px 0;
-    margin-bottom: 8px;
+  border-bottom: 1px solid #777;
+  padding: 5px 0;
+  margin-bottom: 8px;
 }
 
 .kb-app-cell-info .value,
 .kb-editor-cell-info .value {
-    color: #000;
+  color: #000;
 }
 
-
 /*
 New button color scheme
 
@@ -356,45 +350,45 @@ warning: orange
 */
 
 .btn.batch-active {
-    -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
-    -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
-    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
-    background-color: #EEE;
-    border-color: #adadad;
+  -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
+  -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
+  background-color: #eee;
+  border-color: #adadad;
 }
 
 .btn.batch-active:hover {
-    background-color: #CCC;
+  background-color: #ccc;
 }
 
 .btn.kb-app-cell-btn,
 .btn.kb-editor-cell-btn {
-    color: rgb(33, 150, 243);
-    background-color: #FFF;
-    border: 2px rgb(33, 150, 243) solid;
-    margin-bottom: 4px;
+  color: rgb(33, 150, 243);
+  background-color: #fff;
+  border: 2px rgb(33, 150, 243) solid;
+  margin-bottom: 4px;
 }
 
 /* Primary Button Style */
 
 .btn.kb-app-cell-btn.btn-primary,
 .btn.kb-editor-cell-btn.btn-primary {
-    color: rgb(33, 150, 243);
-    border: 2px rgb(33, 150, 243) solid;
+  color: rgb(33, 150, 243);
+  border: 2px rgb(33, 150, 243) solid;
 }
 
 .btn.kb-app-cell-btn.btn-primary:hover,
 .btn.kb-editor-cell-btn.btn-primary:hover {
-    color: #FFF;
-    background-color: rgb(33, 150, 243);
-    border-bottom: 6px rgb(33, 150, 243) solid;
-    margin-bottom: 0;
+  color: #fff;
+  background-color: rgb(33, 150, 243);
+  border-bottom: 6px rgb(33, 150, 243) solid;
+  margin-bottom: 0;
 }
 
 .btn.kb-app-cell-btn.btn-primary:active,
 .btn.kb-editor-cell-btn.btn-primary:active {
-    color: #FFF;
-    background-color: rgb(33, 150, 243);
+  color: #fff;
+  background-color: rgb(33, 150, 243);
 }
 
 /* Hovering over an active cell is different, it tries to make the tab look
@@ -403,52 +397,52 @@ warning: orange
 
 .btn.kb-app-cell-btn.btn-primary.active,
 .btn.kb-editor-cell-btn.btn-primary.active {
-    color: white;
-    background-color: rgb(33, 150, 243);
-    border: 2px rgb(33, 150, 243) solid;
-    border-bottom: 6px rgb(33, 150, 243) solid;
-    margin-bottom: 0;
+  color: white;
+  background-color: rgb(33, 150, 243);
+  border: 2px rgb(33, 150, 243) solid;
+  border-bottom: 6px rgb(33, 150, 243) solid;
+  margin-bottom: 0;
 }
 
 .btn.kb-app-cell-btn.btn-primary.active:hover,
 .btn.kb-editor-cell-btn.btn-primary.active:hover {
-    color: rgb(33, 150, 243);
-    background-color: #DDD;
-    border-bottom: 2px rgb(33, 150, 243) solid;
-    margin-bottom: 4px;
+  color: rgb(33, 150, 243);
+  background-color: #ddd;
+  border-bottom: 2px rgb(33, 150, 243) solid;
+  margin-bottom: 4px;
 }
 
 /* DANGER - for error */
 
 .btn.kb-app-cell-btn.btn-danger,
 .btn.kb-editor-cell-btn.btn-danger {
-    color: rgb(209, 82, 65);
-    border: 2px rgb(209, 82, 65) solid;
+  color: rgb(209, 82, 65);
+  border: 2px rgb(209, 82, 65) solid;
 }
 
 .btn.kb-app-cell-btn.btn-danger:hover,
 .btn.kb-editor-cell-btn.btn-danger:hover {
-    color: #FFF;
-    background-color: rgb(209, 82, 65);
-    border-bottom: 6px rgb(209, 82, 65) solid;
-    margin-bottom: 0;
+  color: #fff;
+  background-color: rgb(209, 82, 65);
+  border-bottom: 6px rgb(209, 82, 65) solid;
+  margin-bottom: 0;
 }
 
 .btn.kb-app-cell-btn.btn-danger.active,
 .btn.kb-editor-cell-btn.btn-danger.active {
-    color: white;
-    background-color: rgb(209, 82, 65);
-    border: 2px rgb(209, 82, 65) solid;
-    border-bottom: 6px rgb(209, 82, 65) solid;
-    margin-bottom: 0;
+  color: white;
+  background-color: rgb(209, 82, 65);
+  border: 2px rgb(209, 82, 65) solid;
+  border-bottom: 6px rgb(209, 82, 65) solid;
+  margin-bottom: 0;
 }
 
 .btn.kb-app-cell-btn.btn-danger.active:hover,
 .btn.kb-editor-cell-btn.btn-danger.active:hover {
-    color: rgb(209, 82, 65);
-    background-color: #DDD;
-    border-bottom: 2px rgb(209, 82, 65) solid;
-    margin-bottom: 4px;
+  color: rgb(209, 82, 65);
+  background-color: #ddd;
+  border-bottom: 2px rgb(209, 82, 65) solid;
+  margin-bottom: 4px;
 }
 
 /* DISABLED is gray border and text */
@@ -458,127 +452,128 @@ warning: orange
 .btn.kb-editor-cell-btn.disabled,
 .btn.kb-editor-cell-btn.disabled:hover,
 .btn.kb-editor-cell-btn.disabled:active {
-    color: #888;
-    background-color: #FFF;
-    border: 2px #888 solid;
-    margin-bottom: 4px;
+  color: #888;
+  background-color: #fff;
+  border: 2px #888 solid;
+  margin-bottom: 4px;
 }
 
 /* buttons from editorCell */
-kb-editor-cell .btn-primary.kb-btn-action.-rerun {
-    color: rgb(33, 150, 243);
+.kb-editor-cell .btn-primary.kb-btn-action.-rerun {
+  color: rgb(33, 150, 243);
 }
 
 .kb-editor-cell .btn-primary.kb-btn-action.-run {
-    color: rgb(75, 184, 86);
+  color: rgb(75, 184, 86);
 }
 
 .kb-editor-cell .btn-danger.kb-btn-action.-cancel,
 .kb-editor-cell .btn-danger.kb-btn-action.-reset {
-    color: rgb(209, 82, 65);
+  color: rgb(209, 82, 65);
 }
-/* end editorCell buttons */
 
+/* end editorCell buttons */
 
 .kb-app-cell [data-element="run-control-panel"],
 .kb-editor-cell [data-element="run-control-panel"] {
-    width: 100%;
+  width: 100%;
 }
 
 .kb-app-cell [data-element="tab-pane"],
 .kb-editor-cell [data-element="tab-pane"] {
-    border-top: 2px rgb(33, 150, 243) solid;
-}
-
-.kb-app-cell [data-element="tab-pane"] > div:empty,
-.kb-editor-cell [data-element="tab-pane" ] > div:empty {
-    padding: 0;
+  border-top: 2px rgb(33, 150, 243) solid;
 }
 
 .kb-app-cell [data-element="tab-pane"] > div,
 .kb-editor-cell [data-element="tab-pane"] > div {
-    padding: 4px;
+  padding: 4px;
+}
+
+.kb-app-cell [data-element="tab-pane"] > div:empty,
+.kb-editor-cell [data-element="tab-pane"] > div:empty {
+  padding: 0;
 }
 
 .kb-app-status-ok {
-    color: rgb(75, 184, 86);
+  color: rgb(75, 184, 86);
 }
 
 .kb-app-status-warning {
-    color: orange;
+  color: orange;
 }
 
 .kb-app-status-danger,
 .kb-app-status-error {
-    color: rgb(209, 82, 65);
+  color: rgb(209, 82, 65);
 }
 
 .kb-app-status-default {
-    color: rgb(33, 150, 243);
+  color: rgb(33, 150, 243);
 }
 
-
 /* app cell panels */
+
 /* TODO: higher level selector */
 
 .parameter-panel .info-panel {
-    padding-top: 4px;
-    background: transparent;
+  padding-top: 4px;
+  background: transparent;
 }
 
 .tt-input,
 .tt-query {
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    width: 100%;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  width: 100%;
 }
 
 .tt-hint {
-    color: #999;
+  color: #999;
 }
 
 .tt-menu {
-    /* used to be tt-dropdown-menu in older versions */
-    margin-top: 4px;
-    padding: 4px 0;
-    background-color: #fff;
-    border: 1px solid #ccc;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-    width: 100%;
+  /* used to be tt-dropdown-menu in older versions */
+  margin-top: 4px;
+  padding: 4px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  width: 100%;
 }
 
 .tt-suggestion {
-    padding: 3px 20px;
-    line-height: 24px;
+  padding: 3px 20px;
+  line-height: 24px;
 }
 
 .tt-suggestion.tt-cursor,
 .tt-suggestion:hover {
-    color: #fff;
-    background-color: #0097cf;
+  color: #fff;
+  background-color: #0097cf;
 }
 
 .tt-suggestion p {
-    margin: 0;
+  margin: 0;
 }
 
 .tt-header {
-    font-size: 75%;
-    /* this doesn't work, don't want to just turn it on, though:
+  font-size: 75%;
+
+  /* this doesn't work, don't want to just turn it on, though:
   font-color : gray;
   */
-    font-style: italic;
-    padding-left: 5px;
+  font-style: italic;
+  padding-left: 5px;
 }
 
 /* from advancedViewCell */
 .kb-advanced-view-cell .kb-panel-container[data-element=parameters-group] > .panel-collapse > .panel-body {
-    padding: 0;
+  padding: 0;
 }
diff --git a/kbase-extension/static/kbase/css/batchMode.css b/kbase-extension/static/kbase/css/batchMode.css
index fa85032208..dddf077eb3 100644
--- a/kbase-extension/static/kbase/css/batchMode.css
+++ b/kbase-extension/static/kbase/css/batchMode.css
@@ -1,22 +1,22 @@
 .batch-mode-col {
-    padding: 5px 10px;
-    overflow: auto;
+  padding: 5px 10px;
+  overflow: auto;
 }
 
 .job-info {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .job-info.job-selected {
-    background-color: #eee;
+  background-color: #eee;
 }
 
 .batch-mode-list {
-    max-height: 860px;
-    overflow: auto;
+  max-height: 860px;
+  overflow: auto;
 }
 
 .batch-input-panel {
-    max-height: 300px;
-    overflow: auto;
-}
\ No newline at end of file
+  max-height: 300px;
+  overflow: auto;
+}
diff --git a/kbase-extension/static/kbase/css/bootstrapHelper.css b/kbase-extension/static/kbase/css/bootstrapHelper.css
index 0a437296e9..847d370611 100644
--- a/kbase-extension/static/kbase/css/bootstrapHelper.css
+++ b/kbase-extension/static/kbase/css/bootstrapHelper.css
@@ -5,35 +5,32 @@
     Customize bootstrap styles
 */
 
-
 /*
-  Bs recommends h4 for the modal title, but this is overridden by the general 
+  Bs recommends h4 for the modal title, but this is overridden by the general
   purpose kbase h4 style. Generally, I (Erik) do not like using semantic tags
   in bootstrap anyway, especially header tags which inherently imply a specific
   document structure which modal dialogs in no way can represent!)
 */
 
 .modal .modal-title {
-    font-family: "Oxygen", Arial, sans-serif;
-    font-size: 130%;
-    font-weight: bold;
-    color: #2e618d;
+  font-family: "Oxygen", Arial, sans-serif;
+  font-size: 130%;
+  font-weight: bold;
+  color: #2e618d;
 }
 
-
 /*
-    Unset the global modal title color set above for alert modals, which 
+    Unset the global modal title color set above for alert modals, which
     may set the color style based on the alert type.
 */
 
 .modal.kb-modal-alert .modal-title {
-    color: unset;
+  color: unset;
 }
 
-
 /*
     The BS checkbox appears too low, due to the top margin, when used with a label
-    in the recommended manner. 
+    in the recommended manner.
     Note: I don't understand why BS handles checkbox styling as they do, turning
     the checkbox into relatively posiioned and then pushing the label to checkbox
     to the left and down (at the same time given the container extra margin to
@@ -42,77 +39,73 @@
 */
 
 .modal input[type="checkbox"] {
-    margin-top: 1px;
+  margin-top: 1px;
 }
 
 .panel.kb-panel-light {
-    border: none;
-    margin-bottom: 10px;
+  border: none;
+  margin-bottom: 10px;
 }
 
-
 /* colors copied shamelessly from peeking at bootstrap
    http://getbootstrap.com/css/
 */
 
 .panel-danger.kb-panel-light .panel-title {
-    color: #a94442;
+  color: #a94442;
 }
 
 .panel-success.kb-panel-light .panel-title {
-    color: #3c763d;
+  color: #3c763d;
 }
 
 .panel-warning.kb-panel-light .panel-title {
-    color: #8a6d3b;
+  color: #8a6d3b;
 }
 
 .panel-info.kb-panel-light .panel-title {
-    color: blue;
+  color: blue;
 }
 
-.panel.kb-panel-light>.panel-heading {
-    background-color: transparent;
-    font-weight: bold;
-    color: #666;
-    padding-left: 0;
-    padding-bottom: 2px;
-    border-bottom: 1px #CCC solid;
+.panel.kb-panel-light > .panel-heading {
+  background-color: transparent;
+  font-weight: bold;
+  color: #666;
+  padding-left: 0;
+  padding-bottom: 2px;
+  border-bottom: 1px #ccc solid;
 }
 
 .panel.kb-panel-light .panel-body {
-    padding-top: 0;
-    padding: 0;
+  padding: 0;
 }
 
 .panel.kb-panel-container {
-    border: none;
+  border: none;
 }
 
-.panel.kb-panel-container>.panel-heading {
-    background-color: transparent;
-    font-weight: bold;
-    xcolor: #2e618d;
-    padding-left: 0;
-    padding-bottom: 2px;
-    border-bottom: 2px #CCC solid;
-    margin-bottom: 10px;
+.panel.kb-panel-container > .panel-heading {
+  background-color: transparent;
+  font-weight: bold;
+  padding-left: 0;
+  padding-bottom: 2px;
+  border-bottom: 2px #ccc solid;
+  margin-bottom: 10px;
 }
 
 .panel.kb-panel-container .panel-body {
-    padding-top: 0;
+  padding-top: 0;
 }
 
-
 /*
-  The button bar in a cell widgetis located at the bottom of the inputs, but 
+  The button bar in a cell widgetis located at the bottom of the inputs, but
   above any outputs.
   These styles attempt to help the button toolbar, which represents the actions
   the user can take, be visually distinct from the other bits surrounding it.
 */
 
 .btn-toolbar.kb-btn-toolbar-cell-widget {
-    margin-bottom: 20px;
-    background-color: #EEE;
-    padding: 6px;
-}
\ No newline at end of file
+  margin-bottom: 20px;
+  background-color: #eee;
+  padding: 6px;
+}
diff --git a/kbase-extension/static/kbase/css/buttons.css b/kbase-extension/static/kbase/css/buttons.css
index 7e6db5bd51..6472560e7e 100644
--- a/kbase-extension/static/kbase/css/buttons.css
+++ b/kbase-extension/static/kbase/css/buttons.css
@@ -2,49 +2,24 @@
 /* A flat button, with no unselected background color, but with hover and click
    styles */
 .btn.kb-flat-btn {
-    background-color: #FFF;
-    xpadding: 1px 7px;
-    xfont-size: 24px;
-    border: none;
-    text-shadow: none !important;
-    margin: 0;
-    /* box-shadow: 0 0 3px #CECECE; */
-    xmargin-right: 5px;
+  background-color: #fff;
+  border: none;
+  text-shadow: none !important;
+  margin: 0;
+  color: #666;
 }
+
 .kb-flat-btn-wrapper { /* don't add shadows here */
   box-shadow: none;
 }
 
-/* Set a plain default color -- should be overridden when building the button. */
-.btn.kb-flat-btn  {
-    color: #666;
-}
-
 /* Text spacing */
 .btn.kb-flat-btn .kb-nav-btn-txt {
-    font-size: 10pt;
-    margin-top: -5px;
-}
-
-/* ?? 
- color nav icons
-.navbar-buttons .fa::before {  
-  color: #2196F3;
-}
-*/
-
-.btn.kb-flat-btn:hover {
-  background-color: #F5F5F5;
+  font-size: 10pt;
+  margin-top: -5px;
 }
 
-/* ?? 
- restore rounded corners 
-#kb-ipy-menu { 
-  border-radius: 4px !important;
-  margin-right: 0;
+.btn.kb-flat-btn:hover,
+.btn.kb-flat-btn:active {
+  background-color: #ccc;
 }
-*/
-
-.btn.kb-flat-btn:hover, .btn.kb-flat-btn:active  {
-    background-color: #CCC;
-}
\ No newline at end of file
diff --git a/kbase-extension/static/kbase/css/contigBrowserStyles.css b/kbase-extension/static/kbase/css/contigBrowserStyles.css
index 367565e50b..196caa3bac 100644
--- a/kbase-extension/static/kbase/css/contigBrowserStyles.css
+++ b/kbase-extension/static/kbase/css/contigBrowserStyles.css
@@ -1,15 +1,16 @@
-/*------------ Contig browser rules --------------*/
+/* ------------ Contig browser rules -------------- */
+
 /*
  * Styling for the tooltip that pops up when a feature is highlighted.
  */
 .kbcb-tooltip {
-	position: absolute;
-	z-index: 9999999;
-	visibility: hidden;
-	opacity: 0.8;
-	background-color: #222;
-	color: #fff;
-	padding: 0.5em;
+  position: absolute;
+  z-index: 9999999;
+  visibility: hidden;
+  opacity: 0.8;
+  background-color: #222;
+  color: #fff;
+  padding: 0.5em;
 }
 
 /**
@@ -17,14 +18,14 @@
  */
 .kbcb-widget .kbcb-axis path,
 .kbcb-widget .kbcb-axis line {
-    fill: none;
-    stroke: black;
-    shape-rendering: crispEdges;
+  fill: none;
+  stroke: black;
+  shape-rendering: crispEdges;
 }
 
 .kbcb-widget .kbcb-axis text {
-    font-family: sans-serif;
-    font-size: 11px;
+  font-family: sans-serif;
+  font-size: 11px;
 }
 
 /**
@@ -37,27 +38,27 @@
  * And highlighted features should be colored last (not currently used).
  */
 .kbcb-feature {
-	stroke: #000;
-	fill: #f00;
+  stroke: #000;
+  fill: #f00;
 }
 
 .kbcb-operon {
-	fill: #0f0;
+  fill: #0f0;
 }
 
 .kbcb-center {
-	fill: #00f;
+  fill: #00f;
 }
 
 .kbcb-highlight {
-	fill: #fff;
+  fill: #fff;
 }
 
 /**
  * The below controls styling for the (optional) button panel
  */
 .kbcb-buttons {
-	margin-left: auto;
-	margin-right: auto;
-	width: 70%;
+  margin-left: auto;
+  margin-right: auto;
+  width: 70%;
 }
diff --git a/kbase-extension/static/kbase/css/kbaseEditor.css b/kbase-extension/static/kbase/css/kbaseEditor.css
index 77b05b3a0b..42fb775e47 100644
--- a/kbase-extension/static/kbase/css/kbaseEditor.css
+++ b/kbase-extension/static/kbase/css/kbaseEditor.css
@@ -3,26 +3,26 @@
  */
 
 .modal-body .dataTables_processing {
-    border: 1px solid #aaa;
-    background: #E8F9FF;
-    opacity: 0.8;
+  border: 1px solid #aaa;
+  background: #e8f9ff;
+  opacity: 0.8;
 }
 
 .kb-editor {
-    margin: 0 10px;
+  margin: 0 10px;
 }
 
 .kb-editor .tab-content {
-    margin: 5px 0 0 0;
+  margin: 5px 0 0 0;
 }
 
 .kb-editor .controls {
-    margin: 5px 0px;
-}
-.kb-editor .controls .btn{
-    margin: 0 10px;
+  margin: 5px 0;
 }
 
+.kb-editor .controls .btn {
+  margin: 0 10px;
+}
 
 /**
  * Override KBase stylings that override jupyter styling.
@@ -31,63 +31,63 @@
 
 /* override button staylings that were removed */
 .kb-editor .btn-primary {
-    background-color: #337ab7 !important;
-    border-color: #2e6da4 !important;
+  background-color: #337ab7 !important;
+  border-color: #2e6da4 !important;
 }
+
 .kb-editor .btn-danger {
-    background-color: #d9534f !important;
-    border-color: #d43f3a !important;
+  background-color: #d9534f !important;
+  border-color: #d43f3a !important;
 }
 
 /* override icon stylings in button that were removed */
 .kb-editor .btn i {
-    color: #fff;
+  color: #fff;
 }
 
 /* override table border styling */
 .kb-editor table {
-    border: 1px solid #bbb;
+  border: 1px solid #bbb;
 }
 
-
 /**
  * General editor styling
  */
 .kb-editor-table {
-    width: 100% !important; /* override datatables hackory */
+  width: 100% !important; /* override datatables hackory */
 }
 
 .kb-editor-table > tbody > tr > td:first-child {
-    width: 1%; /* checkboxes are expected on editable tables */
+  width: 1%; /* checkboxes are expected on editable tables */
 }
 
 .kb-editor-table > tbody > tr > td:first-child .fa-square-o {
-    font-size: 1.4em;
-    color: #666;
+  font-size: 1.4em;
+  color: #666;
 }
 
 .kb-editor-table > tbody > tr > td:first-child:hover {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .kb-editor-table > tbody > tr > td:first-child:hover .fa-square-o {
-    color: #000;
+  color: #000;
 }
 
-.kb-editor-table > tbody > tr.row-select .fa-square-o:before {
-    content: "\f046";
-    color: #444;
+.kb-editor-table > tbody > tr.row-select .fa-square-o::before {
+  content: "\f046";
+  color: #444;
 }
 
 .kb-editor-table > tbody > tr > td.editable {
-    position: relative;
+  position: relative;
 }
 
-.kb-editor-table > tbody > tr > td.editable:hover:after{
-    content: "\f044";
-    font-family: FontAwesome;
-    position: absolute;
-    bottom: 0;
-    right: 2px;
-    color: #888;
+.kb-editor-table > tbody > tr > td.editable:hover::after {
+  content: "\f044";
+  font-family: FontAwesome;
+  position: absolute;
+  bottom: 0;
+  right: 2px;
+  color: #888;
 }
diff --git a/kbase-extension/static/kbase/css/kbaseIcons.css b/kbase-extension/static/kbase/css/kbaseIcons.css
index ac888c5181..0eb698e127 100644
--- a/kbase-extension/static/kbase/css/kbaseIcons.css
+++ b/kbase-extension/static/kbase/css/kbaseIcons.css
@@ -2,55 +2,58 @@
 
 @font-face {
   font-family: "kbase-icons";
-  src:url("../fonts/kbase-icons.eot");
-  src:url("../fonts/kbase-icons.eot?#iefix") format("embedded-opentype"),
+  src: url("../fonts/kbase-icons.eot");
+  src:
+    url("../fonts/kbase-icons.eot?#iefix") format("embedded-opentype"),
     url("../fonts/kbase-icons.woff") format("woff"),
     url("../fonts/kbase-icons.ttf") format("truetype"),
     url("../fonts/kbase-icons.svg#kbase-icons") format("svg");
   font-weight: normal;
   font-style: normal;
-
 }
 
-[data-icon]:before {
+[data-icon]::before {
   font-family: "kbase-icons" !important;
   content: attr(data-icon);
   font-style: normal !important;
   font-weight: normal !important;
   font-variant: normal !important;
   text-transform: none !important;
-  speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-[class^="icon-"]:before,
-[class*=" icon-"]:before {
+[class^="icon-"]::before,
+[class*=" icon-"]::before {
   font-family: "kbase-icons" !important;
   font-style: normal !important;
   font-weight: normal !important;
   font-variant: normal !important;
   text-transform: none !important;
-  speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-compare:before {
+.icon-compare::before {
   content: "a";
 }
-.icon-genome:before {
+
+.icon-genome::before {
   content: "b";
 }
-.icon-metabolism:before {
+
+.icon-metabolism::before {
   content: "c";
 }
-.icon-metagenome:before {
+
+.icon-metagenome::before {
   content: "d";
 }
-.icon-reads:before {
+
+.icon-reads::before {
   content: "e";
 }
-.icon-tree:before {
+
+.icon-tree::before {
   content: "f";
 }
diff --git a/kbase-extension/static/kbase/css/kbaseJobLog.css b/kbase-extension/static/kbase/css/kbaseJobLog.css
index e217362f96..add087e3a9 100644
--- a/kbase-extension/static/kbase/css/kbaseJobLog.css
+++ b/kbase-extension/static/kbase/css/kbaseJobLog.css
@@ -1,75 +1,70 @@
 #kblog-header {
-    margin: 5px 0 5px 0;
+  margin: 5px 0 5px 0;
 }
 
 #kblog-panel {
-    background-color: #F5F5F5;
-    border: 1px solid #CECECE;
-    height: 350px;
-    padding: 5px;
-    resize: vertical;
-    overflow: auto;
-    color: #000;
-    vertical-align: top;
+  background-color: #f5f5f5;
+  border: 1px solid #cecece;
+  height: 350px;
+  padding: 5px;
+  resize: vertical;
+  overflow: auto;
+  color: #000;
+  vertical-align: top;
 }
 
 .kblog-header {
-    display: flex;
-    font-family: monospace;
+  display: flex;
+  font-family: monospace;
 }
 
 .kblog-line {
-    font-family: monospace;
+  font-family: monospace;
 }
 
 .kblog-line:hover {
-    background-color: #DDD;
+  background-color: #ddd;
 }
 
 .kblog-num-wrapper {
-    font-size: 85%;
-    display: flex;
-    flex-direction: row;
+  font-size: 85%;
+  display: flex;
+  flex-direction: row;
 }
 
 .kblog-line-num {
-    flex-shrink: 0;
-    width: 3rem;
-    text-align: right;
-    color: #999;
-    white-space: nowrap;
+  flex-shrink: 0;
+  width: 3rem;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
 
-    /* makes text unselectabe */
-    -moz-user-select: -moz-none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -o-user-select: none;
-    user-select: none;
+  /* makes text unselectabe */
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+  user-select: none;
 }
 
 .kblog-text {
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    flex: 1;
-    margin-left: 6px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  flex: 1;
+  margin-left: 6px;
 }
 
-.kb-error, .kb-error .kblog-line-num  {
-    color: darkred;
-    text-decoration: underline;
-    text-decoration-style: solid;
-    text-decoration-color: red;
-    font-weight: bold;
-    font-size: 12px;
-    background-color: rgb(255, 245, 245);
-
-}
-
-#kblog-msg {
-    margin-top: 5px;
+.kb-error,
+.kb-error .kblog-line-num {
+  color: darkred;
+  text-decoration: underline;
+  font-weight: bold;
+  font-size: 12px;
+  background-color: rgb(255, 245, 245);
 }
 
+#kblog-msg,
 #kblog-err {
-    margin-top: 5px;
-    /* color: #660000; */
+  margin-top: 5px;
 }
diff --git a/kbase-extension/static/kbase/css/kbaseNotify.css b/kbase-extension/static/kbase/css/kbaseNotify.css
index b798fb341c..4c01e03f91 100644
--- a/kbase-extension/static/kbase/css/kbaseNotify.css
+++ b/kbase-extension/static/kbase/css/kbaseNotify.css
@@ -1,14 +1,13 @@
-
 .kb-notify {
-    position: relative;
-    bottom: 10px;
-    width: 300px;
-    padding: 15px;
-    color: #fff;
-    background-color: #000;
-    opacity: 0.8;
+  position: relative;
+  bottom: 10px;
+  width: 300px;
+  padding: 15px;
+  color: #fff;
+  background-color: #000;
+  opacity: 0.8;
 }
 
 .kb-notify.kb-notify-success {
-    color: #00CC09;
+  color: #00cc09;
 }
diff --git a/kbase-extension/static/kbase/css/kbaseStylesheet.css b/kbase-extension/static/kbase/css/kbaseStylesheet.css
index a17f0a7210..2809bb2036 100644
--- a/kbase-extension/static/kbase/css/kbaseStylesheet.css
+++ b/kbase-extension/static/kbase/css/kbaseStylesheet.css
@@ -1,146 +1,168 @@
 @font-face {
-    font-family: 'Oxygen';
-    src: url('../fonts/Oxygen-webfont.eot');
-    src: url('../fonts/Oxygen-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/Oxygen-webfont.woff') format('woff'),
-         url('../fonts/Oxygen-webfont.ttf') format('truetype'),
-         url('../fonts/Oxygen-webfont.svg#OxygenRegular') format('svg');
-    font-weight: normal;
-    font-style: normal;
+  font-family: 'Oxygen';
+  src: url('../fonts/Oxygen-webfont.eot');
+  src:
+    url('../fonts/Oxygen-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Oxygen-webfont.woff') format('woff'),
+    url('../fonts/Oxygen-webfont.ttf') format('truetype'),
+    url('../fonts/Oxygen-webfont.svg#OxygenRegular') format('svg');
+  font-weight: normal;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Oxygen';
-    src: url('../fonts/Oxygen-Bold-webfont.eot');
-    src: url('../fonts/Oxygen-Bold-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/Oxygen-Bold-webfont.woff') format('woff'),
-         url('../fonts/Oxygen-Bold-webfont.ttf') format('truetype'),
-         url('../fonts/Oxygen-Bold-webfont.svg#OxygenBold') format('svg');
-    font-weight: bold;
-    font-style: normal;
+  font-family: 'Oxygen';
+  src: url('../fonts/Oxygen-Bold-webfont.eot');
+  src:
+    url('../fonts/Oxygen-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Oxygen-Bold-webfont.woff') format('woff'),
+    url('../fonts/Oxygen-Bold-webfont.ttf') format('truetype'),
+    url('../fonts/Oxygen-Bold-webfont.svg#OxygenBold') format('svg');
+  font-weight: bold;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Oxygen';
-    src: url('../fonts/Oxygen-Italic-webfont.eot');
-    src: url('../fonts/Oxygen-Italic-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/Oxygen-Italic-webfont.woff') format('woff'),
-         url('../fonts/Oxygen-Italic-webfont.ttf') format('truetype'),
-         url('../fonts/Oxygen-Italic-webfont.svg#OxygenItalic') format('svg');
-    font-weight: normal;
-    font-style: italic;
+  font-family: 'Oxygen';
+  src: url('../fonts/Oxygen-Italic-webfont.eot');
+  src:
+    url('../fonts/Oxygen-Italic-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Oxygen-Italic-webfont.woff') format('woff'),
+    url('../fonts/Oxygen-Italic-webfont.ttf') format('truetype'),
+    url('../fonts/Oxygen-Italic-webfont.svg#OxygenItalic') format('svg');
+  font-weight: normal;
+  font-style: italic;
 }
 
 @font-face {
-    font-family: 'Oxygen';
-    src: url('../fonts/Oxygen-BoldItalic-webfont.eot');
-    src: url('../fonts/Oxygen-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/Oxygen-BoldItalic-webfont.woff') format('woff'),
-         url('../fonts/Oxygen-BoldItalic-webfont.ttf') format('truetype'),
-         url('../fonts/Oxygen-BoldItalic-webfont.svg#OxygenBoldItalic') format('svg');
-    font-weight: bold;
-    font-style: italic;
+  font-family: 'Oxygen';
+  src: url('../fonts/Oxygen-BoldItalic-webfont.eot');
+  src:
+    url('../fonts/Oxygen-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Oxygen-BoldItalic-webfont.woff') format('woff'),
+    url('../fonts/Oxygen-BoldItalic-webfont.ttf') format('truetype'),
+    url('../fonts/Oxygen-BoldItalic-webfont.svg#OxygenBoldItalic') format('svg');
+  font-weight: bold;
+  font-style: italic;
 }
 
 @font-face {
-    font-family: 'OxygenMono';
-    src: url('../fonts/OxygenMono-Regular-webfont.eot');
-    src: url('../fonts/OxygenMono-Regular-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/OxygenMono-Regular-webfont.woff') format('woff'),
-         url('../fonts/OxygenMono-Regular-webfont.ttf') format('truetype'),
-         url('../fonts/OxygenMono-Regular-webfont.svg#OxygenMonoRegular') format('svg');
-    font-weight: normal;
-    font-style: normal;
+  font-family: 'OxygenMono';
+  src: url('../fonts/OxygenMono-Regular-webfont.eot');
+  src:
+    url('../fonts/OxygenMono-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/OxygenMono-Regular-webfont.woff') format('woff'),
+    url('../fonts/OxygenMono-Regular-webfont.ttf') format('truetype'),
+    url('../fonts/OxygenMono-Regular-webfont.svg#OxygenMonoRegular') format('svg');
+  font-weight: normal;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'OxygenRegular';
-    src: url('../fonts/Oxygen-webfont.eot');
-    src: url('../fonts/Oxygen-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/Oxygen-webfont.woff') format('woff'),
-         url('../fonts/Oxygen-webfont.ttf') format('truetype'),
-         url('../fonts/Oxygen-webfont.svg#OxygenRegular') format('svg');
-    font-weight: normal;
-    font-style: normal;
-
-} 
+  font-family: 'OxygenRegular';
+  src: url('../fonts/Oxygen-webfont.eot');
+  src:
+    url('../fonts/Oxygen-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Oxygen-webfont.woff') format('woff'),
+    url('../fonts/Oxygen-webfont.ttf') format('truetype'),
+    url('../fonts/Oxygen-webfont.svg#OxygenRegular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
 
 @font-face {
-    font-family: 'OxygenBold';
-    src: url('../fonts/Oxygen-Bold-webfont.eot');
-    src: url('../fonts/Oxygen-Bold-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/Oxygen-Bold-webfont.woff') format('woff'),
-         url('../fonts/Oxygen-Bold-webfont.ttf') format('truetype'),
-         url('../fonts/Oxygen-Bold-webfont.svg#OxygenBold') format('svg');
-    font-weight: normal;
-    font-style: normal;
-
+  font-family: 'OxygenBold';
+  src: url('../fonts/Oxygen-Bold-webfont.eot');
+  src:
+    url('../fonts/Oxygen-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Oxygen-Bold-webfont.woff') format('woff'),
+    url('../fonts/Oxygen-Bold-webfont.ttf') format('truetype'),
+    url('../fonts/Oxygen-Bold-webfont.svg#OxygenBold') format('svg');
+  font-weight: normal;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'RobotoBlack';
-    src: url('../fonts/Roboto-Black-webfont.eot');
-    src: url('../fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/Roboto-Black-webfont.woff') format('woff'),
-         url('../fonts/Roboto-Black-webfont.ttf') format('truetype'),
-         url('../fonts/Roboto-Black-webfont.svg#RobotoBlack') format('svg');
-    font-weight: normal;
-    font-style: normal;
-
+  font-family: 'RobotoBlack';
+  src: url('../fonts/Roboto-Black-webfont.eot');
+  src:
+    url('../fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Roboto-Black-webfont.woff') format('woff'),
+    url('../fonts/Roboto-Black-webfont.ttf') format('truetype'),
+    url('../fonts/Roboto-Black-webfont.svg#RobotoBlack') format('svg');
+  font-weight: normal;
+  font-style: normal;
 }
 
 h1 {
-	font: 1.75em/2em 'RobotoBlack', Arial, sans-serif;
-	letter-spacing: 0;
-	color: #232323;
-	font-weight: normal;
-	}
+  font: 1.75em/2em 'RobotoBlack', Arial, sans-serif;
+  letter-spacing: 0;
+  color: #232323;
+  font-weight: normal;
+}
+
 h2 {
-	font: 1.5em/1.75em 'RobotoBlack', Arial, sans-serif;
-	font-weight: normal;
-	color: #898989;
-	letter-spacing: 0;
-	}
+  font: 1.5em/1.75em 'RobotoBlack', Arial, sans-serif;
+  font-weight: normal;
+  color: #898989;
+  letter-spacing: 0;
+}
+
 h3 {
-	font: 1.15em/1.25em 'RobotoBlack', Arial, sans-serif;
-	letter-spacing: 0;
-	font-weight: normal;
-	}
+  font: 1.15em/1.25em 'RobotoBlack', Arial, sans-serif;
+  letter-spacing: 0;
+  font-weight: normal;
+}
+
 h4 {
-    font: 1.15em/1.25em 'Oxygen', Arial, sans-serif;
-    font-style: italic;
-	letter-spacing: .07em;
-	}
+  font: 1.15em/1.25em 'Oxygen', Arial, sans-serif;
+  font-style: italic;
+  letter-spacing: 0.07em;
+}
+
 body {
-	font: 1.375em 'Oxygen', Arial, sans-serif;
-	color: #333333;
-	background-color: #fff;
-	}
-strong, b {
-	font-family: 'Oxygen';
-	font-weight: bold;
-	}
-em, i {
-	font-family: 'Oxygen';
-	font-style: italic;
-	}
-strong em, em strong, b i, i b{
-	font-family: 'Oxygen';
-	font-style: italic;
-	font-weight: bold;
-	}
+  font: 1.375em 'Oxygen', Arial, sans-serif;
+  color: #333;
+  background-color: #fff;
+}
+
+strong,
+b {
+  font-family: 'Oxygen', Arial, sans-serif;
+  font-weight: bold;
+}
+
+em,
+i {
+  font-family: 'Oxygen', Arial, sans-serif;
+  font-style: italic;
+}
+
+strong em,
+em strong,
+b i,
+i b {
+  font-family: 'Oxygen', Arial, sans-serif;
+  font-style: italic;
+  font-weight: bold;
+}
+
 a {
-	color: #0088cc;
-	text-decoration: none;
-	}
+  color: #08c;
+  text-decoration: none;
+}
+
 a:visited {
-	color: #2a6496;
-	}
-a:hover    {
-	text-decoration: underline;
-	color: #2a6496;
-	}
-pre, code {
-	font-family: 'OxygenMono', "Lucida Console", "Lucida Sans Typewriter", monospace;
-	font-style: normal;
-	}
+  color: #2a6496;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: #2a6496;
+}
+
+pre,
+code {
+  font-family: 'OxygenMono', "Lucida Console", "Lucida Sans Typewriter", monospace;
+  font-style: normal;
+}
diff --git a/kbase-extension/static/kbase/css/kbaseTour.css b/kbase-extension/static/kbase/css/kbaseTour.css
index 33005d48c7..655440faef 100644
--- a/kbase-extension/static/kbase/css/kbaseTour.css
+++ b/kbase-extension/static/kbase/css/kbaseTour.css
@@ -1,41 +1,40 @@
 .kb-tour {
-    background-color: #2196f3;
+  background-color: #2196f3;
 }
 
-.kb-tour.popover.top > .arrow:after {
-    border-top-color: #2196f3;
+.kb-tour.popover.top > .arrow::after {
+  border-top-color: #2196f3;
 }
 
-.kb-tour.popover.bottom > .arrow:after {
-    border-bottom-color: #2196f3;
+.kb-tour.popover.bottom > .arrow::after {
+  border-bottom-color: #2196f3;
 }
 
-.kb-tour.popover.right > .arrow:after {
-    border-right-color: #2196f3;
+.kb-tour.popover.right > .arrow::after {
+  border-right-color: #2196f3;
 }
 
-.kb-tour.popover.left > .arrow:after {
-    border-left-color: #2196f3;
+.kb-tour.popover.left > .arrow::after {
+  border-left-color: #2196f3;
 }
 
-
-.kb-tour > h3.popover-title {
-    background-color: #2196f3;
-    color: #fff;
-    font-family: Oxygen, Arial, sans-serif;
-    font-size: 12pt;
+.kb-tour > .popover-title {
+  background-color: #2196f3;
+  color: #fff;
+  font-family: Oxygen, Arial, sans-serif;
+  font-size: 12pt;
 }
 
 .kb-tour > .popover-content {
-    background-color: #eee;
+  background-color: #eee;
 }
 
 .kb-tour > .popover-navigation {
-    background-color: #eee;
+  background-color: #eee;
 }
 
 .kb-tour > .close-btn {
-    position: absolute;
-    top: 7px;
-    right: 7px
-}
\ No newline at end of file
+  position: absolute;
+  top: 7px;
+  right: 7px;
+}
diff --git a/kbase-extension/static/kbase/css/landing-pages.css b/kbase-extension/static/kbase/css/landing-pages.css
index 778a5c0007..b2793fcf28 100644
--- a/kbase-extension/static/kbase/css/landing-pages.css
+++ b/kbase-extension/static/kbase/css/landing-pages.css
@@ -1,519 +1,469 @@
 
-
-
-
-/* KBase navigation bar */
-.navbar-kbase {
-    background-color: #fff;
-    border-bottom: 1px solid #E0E0E0;
-    -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1);
-    -moz-box-shadow: 0 1px 10px rgba(0,0,0,.1);
-    box-shadow: 0 1px 10px rgba(0,0,0,.1);
-}
-.nav > li > a:hover, .nav > li > a:focus {
-    text-decoration: none;
-    /*background-color: #fff !important;*/
-}
-
-/* END KBase navigation bar */
-
-
 .app-icon:hover {
-    opacity: 0.9;
-    text-decoration: none;
+  opacity: 0.9;
+  text-decoration: none;
 }
 
-
 #kbase-search-box {
-    width: 300px;
+  width: 300px;
 }
 
-
 #signin-button {
-    /*margin: 15px 7px 0 0;*/
-    display: inline-block;
-    padding: 0 15px 0 0;
+  display: inline-block;
+  padding: 0 15px 0 0;
 }
 
-#signin-button a {
-
+/* bootstrap overrides */
+.wrapper {
+  width: 95%;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-
-/* bootstrap overrides */
-.wrapper { width: 95%; margin-left: auto; margin-right: auto; }
 /* end bootstrap overrides */
 
-
-#core-model { 
-    overflow-x: auto; 
+#core-model {
+  overflow-x: auto;
 }
 
 #logo {
-    margin: 2px 10px 0 10px;
+  margin: 2px 10px 0 10px;
 }
 
-
-table {  
-    font-size: 14px !important;
+table {
+  font-size: 14px !important;
 }
 
 .media-info-modal {
-    width: 800px;
+  width: 800px;
 }
 
 #selected-workspace {
-    margin: 17px 14px 15px 0px;
+  margin: 17px 14px 15px 0;
 }
 
 .tab-view {
-    margin: 10px 0 0 0;
+  margin: 10px 0 0 0;
 }
 
-
-
 /* mv */
 .search-query {
-    width: 100%;
-    margin: 0 0 5px 0;
+  width: 100%;
+  margin: 0 0 5px 0;
 }
 
 .caret-up {
-    display: inline-block;
-    width: 0px;
-    height: 0px;
-    margin-left: 2px;
-    vertical-align: middle;
-    border-top: none;
-    border-bottom: 4px solid #FFFFFF;
-    border-right: 4px solid transparent;
-    border-left: 4px solid transparent;
-    border-top-width: 0px;
-    border-top-style: dotted;
-    content: "";
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 2px;
+  vertical-align: middle;
+  border-top: none;
+  border-bottom: 4px solid #fff;
+  border-right: 4px solid transparent;
+  border-left: 4px solid transparent;
+  border-top-width: 0;
+  border-top-style: dotted;
+  content: "";
 }
 
 .scroll-pane {
-    height: 200px;
-    overflow-y: scroll; 
-    overflow-x: hi;
+  height: 200px;
+  overflow-y: scroll;
+  overflow-x: hi;
 }
 
-
-#select-box tr td{
-    padding: 6px;
+#select-box tr td {
+  padding: 6px;
 }
 
-/*#select-box tr :hover {
-    background-color: #eee;
-}*/
-
 .selected-ws {
-    background-color: #428bca;
-    color: #fff;
+  background-color: #428bca;
+  color: #fff;
 }
 
 .selected-ws:hover { /* fixme */
-    background-color: #428bca !important;
+  background-color: #428bca !important;
 }
 
-
 .side-bar-switch {
-    margin: 0 0 10px 0;
+  margin: 0 0 10px 0;
 }
+
 .side-bar-switch li {
-    font-size: 12px;
+  font-size: 12px;
 }
+
 .side-bar-switch li a {
-    padding: 5px 10px;
+  padding: 5px 10px;
 }
 
 .selected-obj-alert {
-    margin-bottom: 5px; /* override */
-    padding-top: 10px;
-    padding-bottom: 10px;    
+  margin-bottom: 5px; /* override */
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 .heatmap-view {
-    overflow-x: scroll;
+  overflow-x: scroll;
 }
 
-/*div::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-
-div::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-    border-radius: 10px;
-    background: #ddd;
-}
-
-div::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: #666;
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
-}*/
-
-
 /* ws browser */
 
-.ws-selector{
-    margin: 10px 0 0 0;
+.ws-selector {
+  margin: 10px 0 0 0;
 }
 
 .ws-selector.btn-ws-settings {
-    position: absolute;
-    right: 30px;
+  position: absolute;
+  right: 30px;
 }
 
 .object-view {
-    margin: 10px 0 0 0;
+  margin: 10px 0 0 0;
 }
 
 .select-ws .badge {
-    margin: 0 4px 0 0 ;
+  margin: 0 4px 0 0;
 }
+
 .select-ws .btn-ws-settings {
-    padding: 0px 5px;
+  padding: 0 5px;
 }
 
 .modal-alert {
-    margin: 10px 15px 0px 15px;
-    padding: 8px 15px;
-
+  margin: 10px 15px 0 15px;
+  padding: 8px 15px;
 }
 
 .modal-cover {
-    position: absolute;
-    z-index: 10;
+  position: absolute;
+  z-index: 10;
 }
 
 .modal-cover-table {
-    display: table;
-    position: static;
-    width: 100%;
-    height: 100%;
+  display: table;
+  position: static;
+  width: 100%;
+  height: 100%;
 }
 
 .modal-cover-cell {
-    display: table-cell;
-    vertical-align: middle;
-    position: static;
+  display: table-cell;
+  vertical-align: middle;
+  position: static;
 }
 
-
 .modal-cover-box {
-    display: inline-block;
-    padding: 5px 15px;
-    margin: 10px;
-    -moz-box-shadow: 7px 7px 5px #888;
-    -webkit-box-shadow: 7px 7px 5px #888;
-    box-shadow: 7px 7px 5px #888;
-    /*background: #95C07C;    */
+  display: inline-block;
+  padding: 5px 15px;
+  margin: 10px;
+  -moz-box-shadow: 7px 7px 5px #888;
+  -webkit-box-shadow: 7px 7px 5px #888;
+  box-shadow: 7px 7px 5px #888;
 }
 
 .modal-cover-content {
-    padding: 5px;
-    background: white;
-    border: 1px solid #666;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
+  padding: 5px;
+  background: white;
+  border: 1px solid #666;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
 }
 
-
 .obj-table .dataTables_length label {
-    margin: 7px 0 0 0;
+  margin: 7px 0 0 0;
 }
 
 .dataTables_info {
-    margin: 0 10px 0 0;
+  margin: 0 10px 0 0;
 }
-.dataTables_length, .dataTables_info {
-    float: left;
+
+.dataTables_length,
+.dataTables_info {
+  float: left;
 }
+
 .ellipsis {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: 170px;
-    display: inline-block;
-    overflow: hidden
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 170px;
+  display: inline-block;
+  overflow: hidden;
 }
 
 .ws-descript {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: 400px;
-    overflow: hidden;
-    display: inline-block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 400px;
+  overflow: hidden;
+  display: inline-block;
 }
 
-
-
 /* custom checkboxes (prototyped) */
 .ncheck {
-    width: 15px;
-    height: 15px;
-    border: 1px solid #ccc ;
-    margin-left: auto;
-    margin-right: auto;
+  width: 15px;
+  height: 15px;
+  border: 1px solid #ccc;
+  margin-left: auto;
+  margin-right: auto;
 }
+
 .ncheck:hover {
-    border: 1px solid #444 ;    
+  border: 1px solid #444;
 }
+
 .ncheck-btn {
-    width: 15px;
-    height: 15px;
-    border: 1px solid #888 ;
-    margin: 4px 0px 4px -1px;
+  width: 15px;
+  height: 15px;
+  border: 1px solid #888;
+  margin: 4px 0 4px -1px;
 }
+
 .ncheck-btn:hover {
-    border: 1px solid #444 ;    
+  border: 1px solid #444;
 }
+
 .ncheck-checked {
-    background: url(../img/checkmark.png) no-repeat -5px -4px;
-    background-image: -webkit-image-set(url(../img/checkmark.png) 1x,url(../img/checkmark_2x.png) 2x);
+  background: url(../img/checkmark.png) no-repeat -5px -4px;
+  background-image: -webkit-image-set(url(../img/checkmark.png) 1x, url(../img/checkmark_2x.png) 2x);
 }
+
 .ncheck-minus {
-    background: url(../img/checkmark-partial.png) no-repeat -5px -5px;
-    background-image: -webkit-image-set(url(../img/checkmark-partial.png) 1x,url(../img/checkmark-partial_2x.png) 2x);
+  background: url(../img/checkmark-partial.png) no-repeat -5px -5px;
+  background-image: -webkit-image-set(url(../img/checkmark-partial.png) 1x, url(../img/checkmark-partial_2x.png) 2x);
 }
 
 .btn-select-all {
-    height: 34px;
-    margin: 0 20px 0 0;
+  height: 34px;
+  margin: 0 20px 0 0;
 }
 
 .type-filter {
-    margin: 0 20px 0 0;
+  margin: 0 20px 0 0;
 }
 
-.btn-trash { 
-    margin: 3px 20px 0 0;
+.btn-trash {
+  margin: 3px 20px 0 0;
 }
 
-
-.btn-show-info .glyphicon{
-    padding: 0px 0px 4px 0px;
+.btn-show-info .glyphicon {
+  padding: 0 0 4px 0;
 }
 
-
 .open-obj {
-    margin: 7px 0 0 20px;
+  margin: 7px 0 0 20px;
 }
 
-
-
 /******************     narrative     ***************/
-
 #login-form {
-    margin: 70px 0 0 0;
+  margin: 70px 0 0 0;
 }
 
 #narrative-nav,
 .recent-narratives,
 .recent-projects {
-    padding: 0;
-    margin: 0;
+  padding: 0;
+  margin: 0;
 }
 
 .group-item-expander {
-    background: #f2f2f2; /*#d6eaff;*/
+  background: #f2f2f2; /* #d6eaff; */
 }
 
 .group-item-expander:hover {
-    cursor: hand;
-    cursor: pointer;
+  cursor: hand;
+  cursor: pointer;
 }
 
-
 .btn-new-narrative {
-    margin: 0 20px 0 0;
+  margin: 0 20px 0 0;
 }
+
 .btn-delete-narrative {
-    cursor: hand;
-    cursor: pointer;
+  cursor: hand;
+  cursor: pointer;
 }
+
 .btn-delete-narrative:hover {
-    opacity: 0.7;    
+  opacity: 0.7;
 }
+
 /* changing z index for datatable fixed header */
 .navbar-fixed-top {
-    z-index: 500;
+  z-index: 500;
 }
-.FixedHeader_Header {
-    background: #fff;
-    margin: -6px 0 0px 0;
-    height: 44px;
 
+.FixedHeader_Header {
+  background: #fff;
+  margin: -6px 0 0 0;
+  height: 44px;
 }
 
 .narrative-sidebar li {
-    list-style: none;
+  list-style: none;
 }
 
 @media (min-width: 960px) {
-    .narrative-sidebar {
-        position:fixed;
-        width: 20%;
-        /*float:left;*/
-    }
-}
+  .narrative-sidebar {
+    position: fixed;
+    width: 20%;
 
+    /* float:left; */
+  }
+}
 
 .sidebar-header {
-    font-size: 14px;
-    color: #898989;
-    font-family: 'RobotoBlack', Arial, sans-serif;
-    letter-spacing: 0;
-    font-weight: normal;
+  font-size: 14px;
+  color: #898989;
+  font-family: 'RobotoBlack', Arial, sans-serif;
+  letter-spacing: 0;
+  font-weight: normal;
 }
 
-
 .view-header {
-    font:  1.5em/1.75em  'RobotoBlack', Arial, sans-serif; 
-    font-weight: normal; 
-    color: #898989; 
-    letter-spacing: 0;
+  font: 1.5em/1.75em  'RobotoBlack', Arial, sans-serif;
+  font-weight: normal;
+  color: #898989;
+  letter-spacing: 0;
 }
 
-.view-header {
-    font:  1.5em/1.75em  'RobotoBlack', Arial, sans-serif; 
-    font-weight: normal; 
-    color: #898989; 
-    letter-spacing: 0;
+.btn-narr {
+  background-color: #f2f2f2;
+  text-align: left;
+  padding-left: 20px;
+  padding-right: 20px;
+  border: 1px solid #dbdbdb;
+  color: #6da8cf;
+  font-family: 'RobotoBlack', Arial, sans-serif;
+  font-size: 14px;
 }
 
-
 .active .btn-narr {
-    background-color: #BBE8F9;
-    text-align: left;
-    padding-left: 20px;
-    padding-right: 20px;
-    /*border: 1px solid #A5D4E1;*/
-    border: 1px solid #428bca;
-    font-family: OxygenBold;
-    font-size: 14px;
-}
+  background-color: #bbe8f9;
+  border: 1px solid #428bca;
 
-.btn-narr {
-    background-color: #f2f2f2;
-    text-align: left;
-    padding-left: 20px;
-    padding-right: 20px;
-    border: 1px solid #DBDBDB;
-    color: #6DA8CF;
-    font-family: 'RobotoBlack', Arial, sans-serif;
-    font-size: 14px;
+  /* FIXME: why does the font change here?! */
+  font-family: OxygenBold;
 }
 
 .nav-sidebar {
-    top: 70px;
+  top: 70px;
 }
 
 .nav-sidebar li {
-    list-style: none;
-    margin-bottom: 10px;
-    text-align: left;
-    font-family: 'RobotoBlack', Arial, sans-serif;
+  list-style: none;
+  margin-bottom: 10px;
+  text-align: left;
+  font-family: 'RobotoBlack', Arial, sans-serif;
 }
 
 .nav-sidebar > li > a {
-    padding: 7px 15px;
+  padding: 7px 15px;
 }
 
-
 .navbar-nav {
-    color: #6DA8CF;
-    font-family: 'RobotoBlack', Arial, sans-serif;
+  color: #6da8cf;
+  font-family: 'RobotoBlack', Arial, sans-serif;
 }
 
 .navbar-nav > li > a:hover {
-    background-color: #fff;
+  background-color: #fff;
 }
 
-.navbar-nav > li.active > a , 
+.navbar-nav > li.active > a,
 .navbar-nav > li.active:hover {
-    color: #2a6496 !important;
-    box-sizing:border-box;
-    -moz-box-sizing:border-box;
-    -webkit-box-sizing:border-box;
-    height: 50px;
-    border-bottom: 4px solid #428bca ;
+  color: #2a6496 !important;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  height: 50px;
+  border-bottom: 4px solid #428bca;
 }
+
 .navbar-nav > .active:hover {
-    color: #2a6496;
+  color: #2a6496;
+}
+
+/* KBase navigation bar */
+.navbar-kbase {
+  background-color: #fff;
+  border-bottom: 1px solid #e0e0e0;
+  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+}
+
+.nav > li > a:hover,
+.nav > li > a:focus {
+  text-decoration: none;
 }
 
+/* END KBase navigation bar */
+
 #wrap {
   min-height: 100%;
   height: auto;
+
   /* Negative indent footer by its height */
   margin: 0 auto -58px;
+
   /* Pad bottom by footer height */
   padding: 0 0 80px;
 }
+
 /* for the footer */
 #footer {
-   /* margin-top: 60px;
-    position: relative;
-    bottom: 0px; */
-    height: 58px;
+  height: 58px;
 }
 
 #footer ul {
-    text-align: center;
+  text-align: center;
 }
 
 #footer ul li {
-    display: inline;
-    padding: 7px 5px 5px 1px;
-    
+  display: inline;
+  padding: 7px 5px 5px 1px;
 }
 
-#footer ul li:after {
-    content: "\2022";
-    padding-left: 10px;
-    color: #bbb;
-    font-size: 10px;
+#footer ul li::after {
+  content: "\2022";
+  padding-left: 10px;
+  color: #bbb;
+  font-size: 10px;
 }
 
-#footer ul li:last-child:after, #footer ul li:nth-last-child(2):after {
-    content: "";
+#footer ul li:last-child::after,
+#footer ul li:nth-last-child(2)::after {
+  content: "";
 }
 
 #footer img {
-    position: relative;
-    top: -3px;
+  position: relative;
+  top: -3px;
 }
 
 #footer .disclaimer {
-    /*background-color: #f2dede;
-    border-top: 1px solid #ebccd1;
-    color: #a94442;*/
-    background-color: #a94442;
-    color: #fff;
-    display: block;
-    text-align: center;
-    font-weight: bold;
-    position: fixed;
-    bottom: 0;
-    width: 100%;
+  background-color: #a94442;
+  color: #fff;
+  display: block;
+  text-align: center;
+  font-weight: bold;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
 }
 
 .KBSnode rect {
-    cursor: pointer;
-    fill: #fff;
-    fill-opacity: .5;
-    stroke: #3182bd;
-    stroke-width: 1.5px;
+  cursor: pointer;
+  fill: #fff;
+  fill-opacity: 0.5;
+  stroke: #3182bd;
+  stroke-width: 1.5px;
 }
 
 .KBSnode text {
-    font: 80% sans-serif;
-    pointer-events: none;
+  font: 80% sans-serif;
+  pointer-events: none;
 }
-
-
-
diff --git a/kbase-extension/static/kbase/css/methodCell.css b/kbase-extension/static/kbase/css/methodCell.css
index 4744a5ed6b..f5bddbd8a8 100644
--- a/kbase-extension/static/kbase/css/methodCell.css
+++ b/kbase-extension/static/kbase/css/methodCell.css
@@ -1,15 +1,15 @@
 .kb-method-cell select.form-control {
-    margin: 0;
+  margin: 0;
 }
 
 .twitter-typeahead {
-    width: 100%;
+  width: 100%;
 }
 
 .code_cell div.input_area {
-    display: none;
+  display: none;
 }
 
 .code_cell div.input_area.-show {
-    display: block;
-}
\ No newline at end of file
+  display: block;
+}
diff --git a/kbase-extension/static/kbase/css/widgets.css b/kbase-extension/static/kbase/css/widgets.css
index 0294412173..2682c29364 100644
--- a/kbase-extension/static/kbase/css/widgets.css
+++ b/kbase-extension/static/kbase/css/widgets.css
@@ -1,16 +1,16 @@
 /* tab.js */
 
 .nav-tabs .glyphicon-remove {
-    margin: 0 0 0 3px;
-    color: #aaa;
+  margin: 0 0 0 3px;
+  color: #aaa;
 }
 
 .nav-tabs .glyphicon-remove:hover {
-    color: #666;
-    cursor: hand;
-    cursor: pointer;
+  color: #666;
+  cursor: hand;
+  cursor: pointer;
 }
 
 .twitter-typeahead {
-    width: 100%;
-}
\ No newline at end of file
+  width: 100%;
+}
diff --git a/kbase-extension/static/kbase/custom/custom.css b/kbase-extension/static/kbase/custom/custom.css
index 6e1d1362cd..332509350d 100644
--- a/kbase-extension/static/kbase/custom/custom.css
+++ b/kbase-extension/static/kbase/custom/custom.css
@@ -6,352 +6,297 @@ CSS should go in /kbase-extension/static/kbase/css/kbaseNarrative.css
 */
 @font-face {
   font-family: 'Glyphicons Halflings';
-
   src: url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot');
   src: url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
 }
 
 .select2-container--default .select2-results__option--highlighted[aria-selected] {
-    background-color: #337ab7;
-    color: #FFF;
+  background-color: #337ab7;
+  color: #fff;
 }
 
 .select2-container--default .select2-results__option--highlighted[aria-selected] span {
-    color: #FFF !important;
+  color: #fff !important;
 }
 
 #site {
-    overflow: visible;
+  overflow: visible;
 }
 
-
 /* disable the standard notebook, bottom spacer */
 
-#notebook>.end_space {
-    min-height: 0;
-    height: 0;
+#notebook > .end_space {
+  min-height: 0;
+  height: 0;
 }
 
 @media (min-width: 1200px) {
-    #notebook-container {
-        width: auto;
-    }
+  #notebook-container {
+    width: auto;
+  }
 }
 
 @media (min-width: 992px) {
-    #notebook-container {
-        width: auto;
-    }
+  #notebook-container {
+    width: auto;
+  }
 }
 
 @media (min-width: 768px) {
-    #notebook-container {
-        width: auto;
-    }
+  #notebook-container {
+    width: auto;
+  }
 }
 
 .notebook_app {
-    overflow-y: hidden;
-    background-color: #FFFFFF;
+  overflow-y: hidden;
+  background-color: #fff;
 }
 
-
-/* .btn * { color: black; } */
-
 .celltoolbar {
-    height: auto;
-    background: none;
-    border: none;
-    border-left: 1px solid transparent;
-    padding-top: 0;
-    padding-bottom: 2px;
+  height: auto;
+  background: none;
+  border: none;
+  border-left: 1px solid transparent;
+  padding-top: 0;
+  padding-bottom: 2px;
 }
 
-div.input_area {
-    border: 1px solid #CECECE;
-    border-radius: 0px;
-    /* a little padding to match the prompt */
-    padding-top: 4px;
+.input_area {
+  border: 1px solid #cecece;
+  border-radius: 0;
+
+  /* a little padding to match the prompt */
+  padding-top: 4px;
 }
 
-div.output_subarea {
-    max-width: inherit;
+.output_subarea {
+  max-width: inherit;
 }
 
-div.text_cell_input {
-    border: 1px solid #CECECE;
-    border-radius: 0px;
+.text_cell_input {
+  border: 1px solid #cecece;
+  border-radius: 0;
 }
 
 div.cell {
-    margin: 8px 0 8px 0px;
-    padding: 0;
-    border: 1px solid #CCC;
-    border-left: 5px solid #CCC;
-    border-radius: 0;
+  margin: 8px 0 8px 0;
+  padding: 0;
+  border: 1px solid #ccc;
+  border-left: 5px solid #ccc;
+  border-radius: 0;
 }
 
 div.cell.selected {
-    margin-left: 0;
-    border: 1px solid #4BB856;
-    border-left: 5px solid #4BB856;
-    padding-left: 0px;
-    background-color: #E8EFFF;
-    background: none;
-    transition: box-shadow 0.2s ease-in-out;
-    -moz-transition: box-shadow 0.2s ease-in-out;
-    -webkit-transition: box-shadow 0.2s ease-in-out;
-    box-shadow: 0px 1px 2px #aaa, 0 5px 5px #aaa;
-    -moz-box-shadow: 0px 1px 2px #aaa, 0 5px 5px #aaa;
-    -webkit-box-shadow: 0px 1px 2px #aaa, 0 5px 5px #aaa;
+  margin-left: 0;
+  border: 1px solid #4bb856;
+  border-left: 5px solid #4bb856;
+  padding-left: 0;
+  background: none;
+  -webkit-transition: box-shadow 0.2s ease-in-out;
+  -moz-transition: box-shadow 0.2s ease-in-out;
+  -o-transition: box-shadow 0.2s ease-in-out;
+  transition: box-shadow 0.2s ease-in-out;
+  -webkit-box-shadow: 0 1px 2px #aaa, 0 5px 5px #aaa;
+  -moz-box-shadow: 0 1px 2px #aaa, 0 5px 5px #aaa;
+  box-shadow: 0 1px 2px #aaa, 0 5px 5px #aaa;
 }
 
-div.cell.selected:before {
-    background: none;
+div.cell.selected::before {
+  background: none;
 }
 
 div.cell.opened {
-    padding-top: 0px;
+  padding-top: 0;
 }
 
 .edit_mode div.cell.selected {
-    border-left: 5px solid #66BB6A;
-    background: none;
-    padding-left: 0px;
+  border-left: 5px solid #66bb6a;
+  background: none;
+  padding-left: 0;
 }
 
 div.cell.selected.kb-error {
-    border: 1px solid #d9534f;
-    border-left: 5px solid #d9534f;
+  border: 1px solid #d9534f;
+  border-left: 5px solid #d9534f;
 }
 
-div#notebook {
-    padding: 0;
+#notebook {
+  padding: 0;
 }
 
-span#notebook_name {
-    color: #006698;
+#notebook_name {
+  color: #006698;
 }
 
-span#notebook_name:hover {
-    cursor: pointer;
-    background-color: #e0e0e0;
-}
-
-.prompt {
-    min-width: 10ex;
-    padding-top: 10px;
+#notebook_name:hover {
+  cursor: pointer;
+  background-color: #e0e0e0;
 }
 
 #notebook-container {
-    box-shadow: none;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
-    width: auto;
-    min-width: 460px;
-    position: fixed;
-    left: 380px;
-    top: 70px;
-    right: 0;
-    bottom: 0;
-    overflow: auto;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  width: auto;
+  min-width: 460px;
+  position: fixed;
+  left: 380px;
+  top: 70px;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
 }
-#notebook-container:after{
-    content: "";
-    height: 100px;
-    display:block;
+
+#notebook-container::after {
+  content: "";
+  height: 100px;
+  display: block;
 }
 
+.prompt {
+  display: none !important;
+}
 
 /* margin left doesn't really seeem to play well */
 
 .btn-toolbar {
-    margin-left: 0;
-    padding-left: -5px;
+  margin-left: 0;
+  padding-left: 0;
 }
 
 .kb-narr-side-panel .btn-group .btn {
-    padding: 3px 4px 3px 4px;
-    font-size: 16px;
+  padding: 3px 4px 3px 4px;
+  font-size: 16px;
 }
 
 .btn-subtle {
-    color: #888;
-    margin: 0px
+  color: #888;
+  margin: 0;
 }
 
 .btn-subtle .fa {
-    color: #888;
+  color: #888;
 }
 
 .btn-subtle .fa::before {
-    color: #888;
+  color: #888;
 }
 
 .notebook_app .btn.active {
-    box-shadow: none;
-}
-
-
-/* Fooling around with the narrative cells */
-
-.notebook_app .inner_cell {
-    overflow: visible;
-}
-
-.notebook_app .celltoolbar>.button_container {
-    flex: 0 auto;
-}
-
-.notebook_app .celltoolbar>.button_container:nth-child(1) {
-    flex: auto;
+  box-shadow: none;
 }
 
-.notebook_app .celltoolbar_container {
-    border-bottom: 1px silver solid;
+.kb-btn-icon {
+  display: inline-block;
+  padding: 4px;
 }
 
-.notebook_app .prompt {
-    padding-top: 0px;
-    color: silver;
-    width: 75px;
+.kb-btn-icon .fa {
+  opacity: 0.5;
 }
 
-.notebook_app .cell.unselected div.text_cell_render {
-    border: 1px solid transparent;
+.kb-btn-icon:hover .fa {
+  opacity: 1;
 }
 
-.notebook_app .cell.selected div.text_cell_render {
-    border: 1px solid transparent;
-}
+/* Fooling around with the narrative cells */
 
-.notebook_app .buttons .dropdown-menu {
-    height: auto !important;
-    overflow: visible !important;
+.notebook_app .inner_cell {
+  overflow: visible;
 }
 
-.notebook_app .btn.disabled .fa {
-    color: silver;
+.notebook_app .celltoolbar > .button_container {
+  flex: 0 auto;
 }
 
-.text_cell.kb-cell .rendered_html table {
-    border: 1px solid #ddd;
+.notebook_app .celltoolbar > .button_container:nth-child(1) {
+  flex: auto;
 }
 
-.text_cell.kb-cell .rendered_html ul {
-    margin: 0;
+.notebook_app .celltoolbar_container {
+  border-bottom: 1px silver solid;
 }
 
-.text_cell.opened.rendered.kb-cell .rendered_html {
-    padding: 0;
-    border: 0;
+.notebook_app .cell.unselected .text_cell_render {
+  border: 1px solid transparent;
 }
 
-.text_cell.opened.rendered.selected.kb-cell .rendered_html {
-    border-left: 1px solid #4BB856;
+.notebook_app .cell.selected .text_cell_render {
+  border: 1px solid transparent;
 }
 
-.text_cell.opened.rendered.selected.kb-cell.kb-error .rendered_html {
-    border-left: 1px solid #d9534f;
+.notebook_app .buttons .dropdown-menu {
+  height: auto !important;
+  overflow: visible !important;
 }
 
-.text_cell.opened.rendered.kb-cell {
-    padding-bottom: 0;
+.notebook_app .btn.disabled .fa {
+  color: silver;
 }
 
 .rendered_html tr,
 .rendered_html th,
 .rendered_html td {
-    text-align: inherit;
+  text-align: inherit;
 }
 
 .rendered_html table {
-    table-layout: inherit;
-}
-
-/* narrative cell icons */
-
-.cell.selected .prompt .method-icon {
-    color: rgb(103, 58, 183);
-}
-
-.cell.selected .prompt .app-icon {
-    color: rgb(0, 150, 136);
+  table-layout: inherit;
 }
 
-.cell.selected .prompt .markdown-icon {
-    color: #000;
-}
-
-.cell.selected .prompt .app-output-icon {
-    color: #000;
+.text_cell.kb-cell .rendered_html table {
+  border: 1px solid #ddd;
 }
 
-.cell.selected .prompt .method-output-icon {
-    color: #000;
+.text_cell.kb-cell .rendered_html ul {
+  margin: 0;
 }
 
-.cell.selected .prompt .data-viewer-icon {
-    color: #000;
+.text_cell.kb-cell.opened.rendered .rendered_html {
+  padding: 0;
+  border: 0;
 }
 
-.cell.selected .prompt .error-icon {
-    color: red;
+.text_cell.kb-cell.opened.rendered.selected .rendered_html {
+  border-left: 1px solid #4bb856;
 }
 
-.cell.selected .prompt.input_prompt {
-    color: #303F9F;
+.text_cell.kb-cell.opened.rendered.selected.kb-error .rendered_html {
+  border-left: 1px solid #d9534f;
 }
 
-.cell.selected .prompt.output_prompt {
-    color: #D84315;
+.text_cell.kb-cell.opened.rendered {
+  padding-bottom: 0;
 }
 
-.cell>.inner_cell>.ctb_hideshow {
-    display: block;
+.cell > .inner_cell > .ctb_hideshow {
+  display: block;
 }
 
 .cell.selected .btn-default {
-    color: #000;
+  color: #000;
 }
 
 .cell.unselected .btn-default {
-    color: #CCC;
+  color: #ccc;
 }
 
 .cell.unselected .kb-cell-toolbar .title-container {
-    opacity: 0.5;
+  opacity: 0.5;
 }
 
 .cell.unselected .kb-cell-toolbar .buttons-container {
-    opacity: 0.2;
+  opacity: 0.2;
 }
 
-.kb-btn-icon {
-    display: inline-block;
-    padding: 4px;
-}
-
-.kb-btn-icon .fa {
-    opacity: 0.5
-}
-
-.kb-btn-icon:hover .fa {
-    opacity: 1.0
-}
-
-
 /*
   For some reason Jupyter removes the bottom margin. This causes problems with
    bootstrap, since bootstrap removes the top margin!
 */
 
 p {
-    margin-bottom: 9px;
-}
-
-.prompt {
-    display: none !important;
+  margin-bottom: 9px;
 }
 
 /*
@@ -359,19 +304,20 @@ p {
  * Cool though this is, it's a problem on app cells.
  * This hunk of CSS should remove it until we can better work it in to our design.
  */
-div.code_cell:hover .run_this_cell {
-    visibility: hidden !important;
+
+.run_this_cell {
+  padding: 0 !important;
+  width: 0 !important;
 }
 
-div.code_cell:hover div.input_prompt.run_this_cell {
-    visibility: hidden !important;
+.code_cell:hover .run_this_cell {
+  visibility: hidden !important;
 }
 
-div.code_cell div.input_prompt {
-    min-width: 0;
+.code_cell:hover .input_prompt.run_this_cell {
+  visibility: hidden !important;
 }
 
-.run_this_cell {
-    padding: 0 !important;
-    width: 0 !important;
+.code_cell .input_prompt {
+  min-width: 0;
 }

From 64af9cf89da5b500454b98b64bd0022b2dec168c Mon Sep 17 00:00:00 2001
From: i alarmed alien <ialarmedalien@users.noreply.github.com>
Date: Fri, 16 Oct 2020 11:15:20 -0700
Subject: [PATCH 52/61] Revert "DATAUP-246: css to sass: css cleanup, part 1"

---
 kbase-extension/static/kbase/css/appCell.css  | 673 +++++++++---------
 .../static/kbase/css/batchMode.css            |  18 +-
 .../static/kbase/css/bootstrapHelper.css      |  81 ++-
 kbase-extension/static/kbase/css/buttons.css  |  47 +-
 .../static/kbase/css/contigBrowserStyles.css  |  43 +-
 .../static/kbase/css/kbaseEditor.css          |  66 +-
 .../static/kbase/css/kbaseIcons.css           |  31 +-
 .../static/kbase/css/kbaseJobLog.css          |  87 +--
 .../static/kbase/css/kbaseNotify.css          |  17 +-
 .../static/kbase/css/kbaseStylesheet.css      | 254 +++----
 .../static/kbase/css/kbaseTour.css            |  41 +-
 .../static/kbase/css/landing-pages.css        | 526 +++++++-------
 .../static/kbase/css/methodCell.css           |  10 +-
 kbase-extension/static/kbase/css/widgets.css  |  14 +-
 .../static/kbase/custom/custom.css            | 358 ++++++----
 nbextensions/advancedViewCell/main.js         |   4 +-
 nbextensions/advancedViewCell/styles/main.css |  13 +
 nbextensions/appCell2/main.js                 |   3 +-
 nbextensions/appCell2/styles/main.css         |  10 +
 nbextensions/editorCell/main.js               |   1 +
 nbextensions/editorCell/styles/main.css       | 419 +++++++++++
 nbextensions/editorCell/styles/old.css        | 181 +++++
 nbextensions/viewCell/main.js                 |   1 +
 nbextensions/viewCell/styles/main.css         |  10 +
 24 files changed, 1838 insertions(+), 1070 deletions(-)
 create mode 100644 nbextensions/advancedViewCell/styles/main.css
 create mode 100644 nbextensions/appCell2/styles/main.css
 create mode 100644 nbextensions/editorCell/styles/main.css
 create mode 100644 nbextensions/editorCell/styles/old.css
 create mode 100644 nbextensions/viewCell/styles/main.css

diff --git a/kbase-extension/static/kbase/css/appCell.css b/kbase-extension/static/kbase/css/appCell.css
index 3567250be9..a13f6133a0 100644
--- a/kbase-extension/static/kbase/css/appCell.css
+++ b/kbase-extension/static/kbase/css/appCell.css
@@ -4,154 +4,164 @@
 */
 
 .kb-app-cell {
-  font-family: 'Oxygen', sans-serif;
+    font-family: 'Oxygen', sans-serif;
 }
 
-.kb-app-cell .kb-app-warning,
-.kb-editor-cell .kb-app-warning {
-  font-family: 'Oxygen', sans-serif;
-  text-align: center;
+.kb-app-cell .kb-app-warning {
+    font-family: 'Oxygen', sans-serif;
+    text-align: center;
 }
 
-/** new app parameter styling **/
 
-.kb-app-cell .kb-app-parameter-panel,
-.kb-editor-cell .kb-app-parameter-panel {
-  border-left: 3px solid #fff;
-}
+/** new app parameter styling **/
 
-.kb-app-cell .kb-app-parameter-panel-hover,
-.kb-editor-cell .kb-app-parameter-panel-hover {
-  border-left: 3px solid #428bca;
+.kb-app-cell .kb-app-parameter-panel {
+    border-left: 3px solid #fff;
 }
 
-.kb-app-cell .kb-app-parameter-row,
-.kb-editor-cell .kb-app-parameter-row {
-  margin: 0;
+.kb-app-cell .kb-app-parameter-panel-hover {
+    border-left: 3px solid #428bca;
 }
 
 .kb-app-cell .kb-app-parameter-row {
-  padding: 5px;
-  border-radius: 5px;
+    margin: 0px;
+    padding: 5px;
+    border-radius: 5px;
 }
 
 .kb-app-cell .kb-app-parameter-row:hover {
-  background-color: rgba(0, 0, 0, 0.03);
+    background-color: rgba(0, 0, 0, 0.03);
 }
 
 .kb-app-row-close-btn-addon {
-  background: transparent;
-  border: 0;
+    background: transparent;
+    border: 0;
 }
 
 .kb-app-row-clip-btn-addon {
-  background: transparent;
-  border: 0;
-  padding: 0;
-  padding-right: 10px;
-  height: 100%;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    padding-right: 10px;
+    height: 100%;
 }
 
-.kb-app-row-clip-btn-addon:active::after {
-  background-color: #fff;
-  border-radius: 3px;
-  border: 1px solid gray;
-  content: 'copied!';
-  margin-top: -5px;
-  padding: 7px;
-  position: absolute;
+.kb-app-row-clip-btn-addon:active:after {
+    background-color: #fff;
+    border-radius: 3px;
+    border: 1px solid gray;
+    content: 'copied!';
+    margin-top: -5px;
+    padding: 7px;
+    position: absolute;
 }
 
 .kb-input-group-wide {
-  width: 100%;
+    width: 100%;
 }
 
 .kb-input-row-flex {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }
 
 .cell.selected .btn-default.kb-app-row-close-btn {
-  color: gray;
+    color: gray;
 }
 
-.kb-app-row-clip-btn,
-.kb-app-row-close-btn {
-  height: 100%;
-  margin-left: 1px;
 
-  /* border-left: 3px solid transparent; */
-  border-right: 0;
-  border-top: 0;
-  border-bottom: 0;
-  border: none;
-  background-color: transparent;
-  color: gray;
+/* .cell.selected .btn-default.kb-app-row-close-btn:hover {
+    color: red;
+} */
+
+.kb-app-row-clip-btn, .kb-app-row-close-btn {
+    height: 100%;
+    margin-left: 1px;
+    /* border-left: 3px solid transparent; */
+    border-right: 0;
+    border-top: 0;
+    border-bottom: 0;
+    border: none;
+    background-color: transparent;
+    color: gray;
 }
 
-.kb-app-parameter-right-error-bar {
-  height: 28px;
 
-  /* firefox wants it explicitly wired */
-  background: red;
+/* let's just do this as a normal button hover effect */
+
+.kb-app-row-close-btn:hover {
+    /* border-left: 3px solid #337ab7;  this is the bootstrap link color to match to close icon  */
+    /* color: red; */
+    /* background-color: rgba(234, 126, 126, 1); */
+}
+
+.kb-app-parameter-right-error-bar {
+    /* height: 100%; */
+    height: 28px;
+    /* firefox wants it explicitly wired */
+    background: red;
 }
 
+
 /* for some reason, the css :hover doesn't work right on this div, so we use jquery to toggle this class */
 
-.kb-app-cell .kb-app-parameter-row-hover,
-.kb-editor-cell .kb-app-parameter-row-hover {
-  background: #f9f9f9;
+.kb-app-cell .kb-app-parameter-row-hover {
+    background: #F9F9F9;
 }
 
-.kb-app-cell .kb-app-parameter-row .message.-error,
-.kb-editor-cell .kb-app-parameter-row .message.-error {
-  background: #f2dede;
-  color: #f44336;
+.kb-app-cell .kb-app-parameter-row .message.-error {
+    background: #f2dede;
 }
 
-.kb-app-cell .kb-app-parameter-row .message,
-.kb-editor-cell .kb-app-parameter-row .message {
-  text-align: center;
-  font-family: 'Oxygen', sans-serif;
+.kb-app-cell .kb-app-parameter-row .message.-warning {}
+
+.kb-app-cell .kb-app-parameter-row .message {
+    text-align: center;
+    font-family: 'Oxygen', sans-serif;
 }
 
+.kb-app-cell .kb-app-parameter-row .message.-error {
+    color: #F44336;
+}
+
+.kb-app-cell .kb-app-parameter-row .message.-warning {}
+
+
 /* not sure how to get text in these divs to valign middle... */
 
-.kb-app-cell .kb-app-parameter-name,
-.kb-editor-cell .kb-app-parameter-name {
-  font-family: 'Oxygen', sans-serif;
-  color: #777;
-  text-align: left;
-  vertical-align: bottom;
-  padding-right: 4px;
-  padding-left: 0;
-  white-space: normal;
+.kb-app-cell .kb-app-parameter-name {
+    font-family: 'Oxygen', sans-serif;
+    color: #777;
+    text-align: left;
+    vertical-align: bottom;
+    padding-right: 4px;
+    padding-left: 0px;
+    white-space: normal;
 }
 
-.kb-app-cell .kb-app-parameter-input,
-.kb-editor-cell .kb-app-parameter-input {
-  vertical-align: middle;
+.kb-app-cell .kb-app-parameter-input {
+    vertical-align: middle;
 }
 
-.kb-app-cell .kb-app-parameter-input select.form-control,
-.kb-editor-cell .kb-app-parameter-input select.form-control {
-  margin: 0;
+.kb-app-cell .kb-app-parameter-input select.form-control {
+    margin: 0;
 }
 
 .kb-app-field-feedback {
-  background: transparent;
-  border: 0;
+    background: transparent;
+    border: 0;
 }
 
 .kb-input-group-addon {
-  background: transparent;
-  border: 0;
-  padding: 0 0 0 10px;
+    background: transparent;
+    border: 0;
+    padding: 0px 0px 0px 10px;
 }
 
+
 /*
-This set of styles is to accommodate the required/satisfied icon which appears
+This set of styles is a to accomodate the required/satisfied icon which appears
 between the select input control and the help text to the right of it. The
 problem is that within the columns used for layout the select is set to 100% width
 and yet the icon is placed right next to it. The result is that the icon is shoved
@@ -162,165 +172,185 @@ in the column in which the icon lives, and does this by shrinking the select
 control with padding, and then scooting the icon back into its column.
 */
 
-.kb-app-cell .kb-app-parameter-required-glyph,
-.kb-editor-cell .kb-app-parameter-required-glyph {
-  color: #f44336;
-}
 
-.kb-app-cell .kb-app-parameter-accepted-glyph,
-.kb-editor-cell .kb-app-parameter-accepted-glyph {
-  color: #4bb856;
+/* .kb-app-cell .kb-app-parameter-input > div {
+     allow space for the required (red arrow), satisfied (green checkbox) icon
+    padding-right: 20px;
 }
+*/
 
 .kb-app-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph,
-.kb-app-cell .kb-app-parameter-input .kb-app-parameter-required-glyph,
-.kb-editor-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph,
-.kb-editor-cell .kb-app-parameter-input .kb-app-parameter-required-glyph {
-  /* This scoots the icon inside */
-  font-size: 15px;
-  margin-left: 0;
+.kb-app-cell .kb-app-parameter-input .kb-app-parameter-required-glyph {
+    /* This scoots the icon inside */
+    font-size: 15px;
+    margin-left: 0;
 }
 
-.kb-app-cell .kb-app-parameter-hint,
-.kb-editor-cell .kb-app-parameter-hint {
-  padding-left: 7px;
-  color: #777;
-  text-align: left;
-  margin-top: 3px;
+.kb-app-cell .kb-app-parameter-required-glyph {
+    color: #F44336;
 }
 
-.kb-app-cell .kb-parameter-data-selection,
-.kb-editor-cell .kb-parameter-data-selection {
-  font-weight: bold;
+.kb-app-cell .kb-app-parameter-hint {
+    padding-left: 7px;
 }
 
-.kb-app-cell .kb-app-parameter-info,
-.kb-editor-cell .kb-app-parameter-info,
-.kb-app-cell .kb-parameter-data-row-remove,
-.kb-editor-cell .kb-parameter-data-row-remove,
-.kb-app-cell .kb-parameter-data-row-add,
-.kb-editor-cell .kb-parameter-data-row-add {
-  color: #777;
+.kb-app-cell .kb-parameter-data-selection {
+    font-weight: bold;
 }
 
-.kb-app-cell .kb-app-advanced-options-controller-inactive,
-.kb-editor-cell .kb-app-advanced-options-controller-inactive,
-.kb-app-cell .kb-app-advanced-options-controller,
-.kb-editor-cell .kb-app-advanced-options-controller {
-  font-family: 'Oxygen', sans-serif;
-  font-weight: bold;
-  font-style: italic;
-  font-size: 10pt;
-  line-height: 14px;
-  text-align: center;
+.kb-app-cell .kb-app-parameter-hint {
+    color: #777;
+    text-align: left;
+    margin-top: 3px;
 }
 
-.kb-app-cell .kb-app-advanced-options-controller-inactive,
-.kb-editor-cell .kb-app-advanced-options-controller-inactive {
-  color: #777;
+.kb-app-cell .kb-app-parameter-accepted-glyph {
+    color: #4BB856;
 }
 
-.kb-app-cell .kb-app-advanced-options-controller,
-.kb-editor-cell .kb-app-advanced-options-controller {
-  cursor: pointer;
-  color: #08c;
+.kb-app-cell .kb-app-parameter-info {
+    color: #777;
 }
 
-.kb-app-cell .kb-app-advanced-options-controller:hover,
-.kb-editor-cell .kb-app-advanced-options-controller:hover {
-  color: #2a6496;
+.kb-app-cell .kb-parameter-data-row-remove {
+    color: #777;
 }
 
-.kb-app-cell .kb-app-footer,
-.kb-editor-cell .kb-app-footer {
-  width: 100%;
-  background-color: #f5f5f5;
-  padding: 10px;
+.kb-app-cell .kb-parameter-data-row-add {
+    color: #777;
 }
 
-.kb-app-cell .kb-app-subtitle,
-.kb-editor-cell .kb-app-subtitle {
-  background-color: #f5f5f5;
-  padding: 3px 5px;
+.kb-app-cell .kb-app-advanced-options-controller-inactive {
+    font-family: 'Oxygen', sans-serif;
+    font-weight: bold;
+    font-style: italic;
+    font-size: 10pt;
+    line-height: 14px;
+    color: #777;
+    text-align: center;
 }
 
-.report-widget .panel-title > [data-toggle="collapse"]::before,
-.kb-app-cell .panel-title > [data-toggle="collapse"]::before,
-.kb-editor-cell .panel-title > [data-toggle="collapse"]::before {
-  display: inline-block;
-  margin-left: 0;
-  margin-right: 4px;
-  font-family: "FontAwesome";
-  font-style: normal;
-  font-weight: normal;
-  font-size: 90%;
-  width: 12px;
-  color: silver;
-  line-height: 1;
-  vertical-align: baseline;
-  content: "\f078 ";
+.kb-app-cell .kb-app-advanced-options-controller {
+    font-family: 'Oxygen', sans-serif;
+    font-weight: bold;
+    cursor: pointer;
+    font-style: italic;
+    font-size: 10pt;
+    line-height: 14px;
+    color: #0088cc;
+    text-align: center;
 }
 
-.report-widget .panel-title > [data-toggle="collapse"].collapsed::before,
-.kb-app-cell .panel-title > [data-toggle="collapse"].collapsed::before,
-.kb-editor-cell .panel-title > [data-toggle="collapse"].collapsed::before {
-  margin-left: 2px;
-  margin-right: 2px;
-  content: "\f054 ";
+.kb-app-cell .kb-app-advanced-options-controller:hover {
+    color: #2a6496;
 }
 
+.kb-app-cell .kb-app-footer {
+    width: 100%;
+    overflow: none;
+    background-color: #F5F5F5;
+    padding: 10px;
+}
+
+.kb-app-cell .kb-app-subtitle {
+    background-color: #F5F5F5;
+    padding: 3px 5px;
+}
+
+.kb-app-cell .kb-app-subtitle {
+    background-color: #F5F5F5;
+    padding: 3px 5px;
+}
+
+.report-widget .panel-title>[data-toggle="collapse"]::before {
+    display: inline-block;
+    margin-left: 0px;
+    margin-right: 4px;
+    font-family: "FontAwesome";
+    font-style: normal;
+    font-weight: normal;
+    font-size: 90%;
+    width: 12px;
+    color: silver;
+    line-height: 1;
+    vertical-align: baseline;
+    content: "\f078 ";
+}
+
+.report-widget .panel-title>[data-toggle="collapse"].collapsed::before {
+    margin-left: 2px;
+    margin-right: 2px;
+    content: "\f054 ";
+}
+
+.kb-app-cell .panel-title>[data-toggle="collapse"]::before {
+    display: inline-block;
+    margin-left: 0px;
+    margin-right: 4px;
+    font-family: "FontAwesome";
+    font-style: normal;
+    font-weight: normal;
+    font-size: 90%;
+    width: 12px;
+    color: silver;
+    line-height: 1;
+    vertical-align: baseline;
+    content: "\f078 ";
+}
+
+.kb-app-cell .panel-title>[data-toggle="collapse"].collapsed::before {
+    margin-left: 2px;
+    margin-right: 2px;
+    content: "\f054 ";
+}
+
+
 /* tweaks to elemnts that should be dimmed when the cell is not selected */
 
-.unselected .kb-app-cell,
-.unselected .kb-editor-cell {
-  opacity: 0.5;
+.unselected .kb-app-cell {
+    opacity: 0.5;
 }
 
-.kb-app-cell .advanced-parameter-showing,
-.kb-editor-cell .advanced-parameter-showing {
-  display: block;
+.kb-app-cell .advanced-parameter-showing {
+    display: block;
 }
 
-.kb-app-cell .advanced-parameter-hidden,
-.kb-editor-cell .advanced-parameter-hidden {
-  display: none;
+.kb-app-cell .advanced-parameter-hidden {
+    display: none;
 }
 
 .kb-elapsed-time {
-  font-family: monospace;
+    font-family: monospace;
 }
 
 .kb-elapsed-time.-active {
-  color: lime;
+    color: lime;
 }
 
-.kb-app-cell-info-desc,
-.kb-editor-cell-info-desc {
-  border: 1px solid #777;
-  padding: 10px;
-  margin-right: 10px;
-  min-height: 100px;
+.kb-app-cell-info-desc {
+    border: 1px solid #777;
+    padding: 10px;
+    margin-right: 10px;
+    min-height: 100px;
 }
 
-.kb-app-cell-info,
-.kb-editor-cell-info {
-  color: #777;
-  font-family: 'Oxygen', sans-serif;
-  font-size: 12pt;
+.kb-app-cell-info {
+    color: #777;
+    font-family: 'Oxygen', sans-serif;
+    font-size: 12pt;
 }
 
-.kb-app-cell-info .header,
-.kb-editor-cell-info .header {
-  border-bottom: 1px solid #777;
-  padding: 5px 0;
-  margin-bottom: 8px;
+.kb-app-cell-info .header {
+    border-bottom: 1px solid #777;
+    padding: 5px 0;
+    margin-bottom: 8px;
 }
 
-.kb-app-cell-info .value,
-.kb-editor-cell-info .value {
-  color: #000;
+.kb-app-cell-info .value {
+    color: #000;
 }
 
+
 /*
 New button color scheme
 
@@ -350,230 +380,213 @@ warning: orange
 */
 
 .btn.batch-active {
-  -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
-  -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
-  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
-  background-color: #eee;
-  border-color: #adadad;
+    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
+    -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
+    background-color: #EEE;
+    border-color: #adadad;
 }
 
 .btn.batch-active:hover {
-  background-color: #ccc;
+    background-color: #CCC;
 }
 
-.btn.kb-app-cell-btn,
-.btn.kb-editor-cell-btn {
-  color: rgb(33, 150, 243);
-  background-color: #fff;
-  border: 2px rgb(33, 150, 243) solid;
-  margin-bottom: 4px;
+.btn.kb-app-cell-btn {
+    color: rgb(33, 150, 243);
+    background-color: #FFF;
+    border: 2px rgb(33, 150, 243) solid;
+    margin-bottom: 4px
 }
 
+
 /* Primary Button Style */
 
-.btn.kb-app-cell-btn.btn-primary,
-.btn.kb-editor-cell-btn.btn-primary {
-  color: rgb(33, 150, 243);
-  border: 2px rgb(33, 150, 243) solid;
+.btn.kb-app-cell-btn.btn-primary {
+    color: rgb(33, 150, 243);
+    border: 2px rgb(33, 150, 243) solid;
 }
 
-.btn.kb-app-cell-btn.btn-primary:hover,
-.btn.kb-editor-cell-btn.btn-primary:hover {
-  color: #fff;
-  background-color: rgb(33, 150, 243);
-  border-bottom: 6px rgb(33, 150, 243) solid;
-  margin-bottom: 0;
+.btn.kb-app-cell-btn.btn-primary:hover {
+    color: #FFF;
+    background-color: rgb(33, 150, 243);
+    border-bottom: 6px rgb(33, 150, 243) solid;
+    margin-bottom: 0;
 }
 
-.btn.kb-app-cell-btn.btn-primary:active,
-.btn.kb-editor-cell-btn.btn-primary:active {
-  color: #fff;
-  background-color: rgb(33, 150, 243);
+.btn.kb-app-cell-btn.btn-primary:active {
+    color: #FFF;
+    background-color: rgb(33, 150, 243);
 }
 
 /* Hovering over an active cell is different, it tries to make the tab look
    disassociated but using a gray background so it doesnt look like an inactive
    tab */
 
-.btn.kb-app-cell-btn.btn-primary.active,
-.btn.kb-editor-cell-btn.btn-primary.active {
-  color: white;
-  background-color: rgb(33, 150, 243);
-  border: 2px rgb(33, 150, 243) solid;
-  border-bottom: 6px rgb(33, 150, 243) solid;
-  margin-bottom: 0;
+.btn.kb-app-cell-btn.btn-primary.active {
+    color: white;
+    background-color: rgb(33, 150, 243);
+    border: 2px rgb(33, 150, 243) solid;
+    border-bottom: 6px rgb(33, 150, 243) solid;
+    margin-bottom: 0;
 }
 
-.btn.kb-app-cell-btn.btn-primary.active:hover,
-.btn.kb-editor-cell-btn.btn-primary.active:hover {
-  color: rgb(33, 150, 243);
-  background-color: #ddd;
-  border-bottom: 2px rgb(33, 150, 243) solid;
-  margin-bottom: 4px;
+.btn.kb-app-cell-btn.btn-primary.active:hover {
+    color: rgb(33, 150, 243);
+    background-color: #DDD;
+    border-bottom: 2px rgb(33, 150, 243) solid;
+    margin-bottom: 4px;
 }
 
+
 /* DANGER - for error */
 
-.btn.kb-app-cell-btn.btn-danger,
-.btn.kb-editor-cell-btn.btn-danger {
-  color: rgb(209, 82, 65);
-  border: 2px rgb(209, 82, 65) solid;
+.btn.kb-app-cell-btn.btn-danger {
+    color: rgb(209, 82, 65);
+    border: 2px rgb(209, 82, 65) solid;
 }
 
-.btn.kb-app-cell-btn.btn-danger:hover,
-.btn.kb-editor-cell-btn.btn-danger:hover {
-  color: #fff;
-  background-color: rgb(209, 82, 65);
-  border-bottom: 6px rgb(209, 82, 65) solid;
-  margin-bottom: 0;
+.btn.kb-app-cell-btn.btn-danger:hover {
+    color: #FFF;
+    background-color: rgb(209, 82, 65);
+    border-bottom: 6px rgb(209, 82, 65) solid;
+    margin-bottom: 0;
 }
 
-.btn.kb-app-cell-btn.btn-danger.active,
-.btn.kb-editor-cell-btn.btn-danger.active {
-  color: white;
-  background-color: rgb(209, 82, 65);
-  border: 2px rgb(209, 82, 65) solid;
-  border-bottom: 6px rgb(209, 82, 65) solid;
-  margin-bottom: 0;
+.btn.kb-app-cell-btn.btn-danger.active:hover {
+    color: rgb(209, 82, 65);
+    background-color: #DDD;
+    border-bottom: 2px rgb(209, 82, 65) solid;
+    margin-bottom: 4px;
 }
 
-.btn.kb-app-cell-btn.btn-danger.active:hover,
-.btn.kb-editor-cell-btn.btn-danger.active:hover {
-  color: rgb(209, 82, 65);
-  background-color: #ddd;
-  border-bottom: 2px rgb(209, 82, 65) solid;
-  margin-bottom: 4px;
+.btn.kb-app-cell-btn.btn-danger.active {
+    color: white;
+    background-color: rgb(209, 82, 65);
+    border: 2px rgb(209, 82, 65) solid;
+    border-bottom: 6px rgb(209, 82, 65) solid;
+    margin-bottom: 0;
 }
 
-/* DISABLED is gray border and text */
-.btn.kb-app-cell-btn.disabled,
-.btn.kb-app-cell-btn.disabled:hover,
-.btn.kb-app-cell-btn.disabled:active,
-.btn.kb-editor-cell-btn.disabled,
-.btn.kb-editor-cell-btn.disabled:hover,
-.btn.kb-editor-cell-btn.disabled:active {
-  color: #888;
-  background-color: #fff;
-  border: 2px #888 solid;
-  margin-bottom: 4px;
+.btn.kb-app-cell-btn.btn-danger.active:hover {
+    color: rgb(209, 82, 65);
+    background-color: #DDD;
+    border-bottom: 2px rgb(209, 82, 65) solid;
+    margin-bottom: 4px;
 }
 
-/* buttons from editorCell */
-.kb-editor-cell .btn-primary.kb-btn-action.-rerun {
-  color: rgb(33, 150, 243);
-}
 
-.kb-editor-cell .btn-primary.kb-btn-action.-run {
-  color: rgb(75, 184, 86);
-}
+/* DISABLED is gray border and text */
 
-.kb-editor-cell .btn-danger.kb-btn-action.-cancel,
-.kb-editor-cell .btn-danger.kb-btn-action.-reset {
-  color: rgb(209, 82, 65);
+
+/*
+.btn.kb-app-cell-btn.btn-primary.disabled:hover {
+    color: #888;
+    background-color: #FFF;
+    border-bottom: 2px #888 solid;
+    margin-bottom: 4px;
 }
+*/
 
-/* end editorCell buttons */
+.btn.kb-app-cell-btn.disabled,
+.btn.kb-app-cell-btn.disabled:hover,
+.btn.kb-app-cell-btn.disabled:active {
+    color: #888;
+    background-color: #FFF;
+    border: 2px #888 solid;
+    margin-bottom: 4px;
+}
 
-.kb-app-cell [data-element="run-control-panel"],
-.kb-editor-cell [data-element="run-control-panel"] {
-  width: 100%;
+.kb-app-cell [data-element="run-control-panel"] {
+    width: 100%;
 }
 
-.kb-app-cell [data-element="tab-pane"],
-.kb-editor-cell [data-element="tab-pane"] {
-  border-top: 2px rgb(33, 150, 243) solid;
+.kb-app-cell [data-element="tab-pane"] {
+    border-top: 2px rgb(33, 150, 243) solid;
 }
 
-.kb-app-cell [data-element="tab-pane"] > div,
-.kb-editor-cell [data-element="tab-pane"] > div {
-  padding: 4px;
+.kb-app-cell [data-element="tab-pane"]>div:empty {
+    padding: 0px;
 }
 
-.kb-app-cell [data-element="tab-pane"] > div:empty,
-.kb-editor-cell [data-element="tab-pane"] > div:empty {
-  padding: 0;
+.kb-app-cell [data-element="tab-pane"]>div {
+    padding: 4px;
 }
 
 .kb-app-status-ok {
-  color: rgb(75, 184, 86);
+    color: rgb(75, 184, 86);
 }
 
 .kb-app-status-warning {
-  color: orange;
+    color: orange;
 }
 
 .kb-app-status-danger,
 .kb-app-status-error {
-  color: rgb(209, 82, 65);
+    color: rgb(209, 82, 65);
 }
 
 .kb-app-status-default {
-  color: rgb(33, 150, 243);
+    color: rgb(33, 150, 243);
 }
 
+
 /* app cell panels */
 
+
 /* TODO: higher level selector */
 
 .parameter-panel .info-panel {
-  padding-top: 4px;
-  background: transparent;
+    padding-top: 4px;
+    background: transparent;
 }
 
 .tt-input,
 .tt-query {
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  width: 100%;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    width: 100%
 }
 
 .tt-hint {
-  color: #999;
+    color: #999
 }
 
 .tt-menu {
-  /* used to be tt-dropdown-menu in older versions */
-  margin-top: 4px;
-  padding: 4px 0;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  width: 100%;
+    /* used to be tt-dropdown-menu in older versions */
+    margin-top: 4px;
+    padding: 4px 0;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+    width: 100%
 }
 
 .tt-suggestion {
-  padding: 3px 20px;
-  line-height: 24px;
+    padding: 3px 20px;
+    line-height: 24px;
 }
 
 .tt-suggestion.tt-cursor,
 .tt-suggestion:hover {
-  color: #fff;
-  background-color: #0097cf;
+    color: #fff;
+    background-color: #0097cf;
 }
 
 .tt-suggestion p {
-  margin: 0;
+    margin: 0;
 }
 
 .tt-header {
-  font-size: 75%;
-
-  /* this doesn't work, don't want to just turn it on, though:
+    font-size: 75%;
+    /* this doesn't work, don't want to just turn it on, though:
   font-color : gray;
   */
-  font-style: italic;
-  padding-left: 5px;
-}
-
-/* from advancedViewCell */
-.kb-advanced-view-cell .kb-panel-container[data-element=parameters-group] > .panel-collapse > .panel-body {
-  padding: 0;
+    font-style: italic;
+    padding-left: 5px;
 }
diff --git a/kbase-extension/static/kbase/css/batchMode.css b/kbase-extension/static/kbase/css/batchMode.css
index dddf077eb3..fa85032208 100644
--- a/kbase-extension/static/kbase/css/batchMode.css
+++ b/kbase-extension/static/kbase/css/batchMode.css
@@ -1,22 +1,22 @@
 .batch-mode-col {
-  padding: 5px 10px;
-  overflow: auto;
+    padding: 5px 10px;
+    overflow: auto;
 }
 
 .job-info {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .job-info.job-selected {
-  background-color: #eee;
+    background-color: #eee;
 }
 
 .batch-mode-list {
-  max-height: 860px;
-  overflow: auto;
+    max-height: 860px;
+    overflow: auto;
 }
 
 .batch-input-panel {
-  max-height: 300px;
-  overflow: auto;
-}
+    max-height: 300px;
+    overflow: auto;
+}
\ No newline at end of file
diff --git a/kbase-extension/static/kbase/css/bootstrapHelper.css b/kbase-extension/static/kbase/css/bootstrapHelper.css
index 847d370611..0a437296e9 100644
--- a/kbase-extension/static/kbase/css/bootstrapHelper.css
+++ b/kbase-extension/static/kbase/css/bootstrapHelper.css
@@ -5,32 +5,35 @@
     Customize bootstrap styles
 */
 
+
 /*
-  Bs recommends h4 for the modal title, but this is overridden by the general
+  Bs recommends h4 for the modal title, but this is overridden by the general 
   purpose kbase h4 style. Generally, I (Erik) do not like using semantic tags
   in bootstrap anyway, especially header tags which inherently imply a specific
   document structure which modal dialogs in no way can represent!)
 */
 
 .modal .modal-title {
-  font-family: "Oxygen", Arial, sans-serif;
-  font-size: 130%;
-  font-weight: bold;
-  color: #2e618d;
+    font-family: "Oxygen", Arial, sans-serif;
+    font-size: 130%;
+    font-weight: bold;
+    color: #2e618d;
 }
 
+
 /*
-    Unset the global modal title color set above for alert modals, which
+    Unset the global modal title color set above for alert modals, which 
     may set the color style based on the alert type.
 */
 
 .modal.kb-modal-alert .modal-title {
-  color: unset;
+    color: unset;
 }
 
+
 /*
     The BS checkbox appears too low, due to the top margin, when used with a label
-    in the recommended manner.
+    in the recommended manner. 
     Note: I don't understand why BS handles checkbox styling as they do, turning
     the checkbox into relatively posiioned and then pushing the label to checkbox
     to the left and down (at the same time given the container extra margin to
@@ -39,73 +42,77 @@
 */
 
 .modal input[type="checkbox"] {
-  margin-top: 1px;
+    margin-top: 1px;
 }
 
 .panel.kb-panel-light {
-  border: none;
-  margin-bottom: 10px;
+    border: none;
+    margin-bottom: 10px;
 }
 
+
 /* colors copied shamelessly from peeking at bootstrap
    http://getbootstrap.com/css/
 */
 
 .panel-danger.kb-panel-light .panel-title {
-  color: #a94442;
+    color: #a94442;
 }
 
 .panel-success.kb-panel-light .panel-title {
-  color: #3c763d;
+    color: #3c763d;
 }
 
 .panel-warning.kb-panel-light .panel-title {
-  color: #8a6d3b;
+    color: #8a6d3b;
 }
 
 .panel-info.kb-panel-light .panel-title {
-  color: blue;
+    color: blue;
 }
 
-.panel.kb-panel-light > .panel-heading {
-  background-color: transparent;
-  font-weight: bold;
-  color: #666;
-  padding-left: 0;
-  padding-bottom: 2px;
-  border-bottom: 1px #ccc solid;
+.panel.kb-panel-light>.panel-heading {
+    background-color: transparent;
+    font-weight: bold;
+    color: #666;
+    padding-left: 0;
+    padding-bottom: 2px;
+    border-bottom: 1px #CCC solid;
 }
 
 .panel.kb-panel-light .panel-body {
-  padding: 0;
+    padding-top: 0;
+    padding: 0;
 }
 
 .panel.kb-panel-container {
-  border: none;
+    border: none;
 }
 
-.panel.kb-panel-container > .panel-heading {
-  background-color: transparent;
-  font-weight: bold;
-  padding-left: 0;
-  padding-bottom: 2px;
-  border-bottom: 2px #ccc solid;
-  margin-bottom: 10px;
+.panel.kb-panel-container>.panel-heading {
+    background-color: transparent;
+    font-weight: bold;
+    xcolor: #2e618d;
+    padding-left: 0;
+    padding-bottom: 2px;
+    border-bottom: 2px #CCC solid;
+    margin-bottom: 10px;
 }
 
 .panel.kb-panel-container .panel-body {
-  padding-top: 0;
+    padding-top: 0;
 }
 
+
 /*
-  The button bar in a cell widgetis located at the bottom of the inputs, but
+  The button bar in a cell widgetis located at the bottom of the inputs, but 
   above any outputs.
   These styles attempt to help the button toolbar, which represents the actions
   the user can take, be visually distinct from the other bits surrounding it.
 */
 
 .btn-toolbar.kb-btn-toolbar-cell-widget {
-  margin-bottom: 20px;
-  background-color: #eee;
-  padding: 6px;
-}
+    margin-bottom: 20px;
+    background-color: #EEE;
+    padding: 6px;
+}
\ No newline at end of file
diff --git a/kbase-extension/static/kbase/css/buttons.css b/kbase-extension/static/kbase/css/buttons.css
index 6472560e7e..7e6db5bd51 100644
--- a/kbase-extension/static/kbase/css/buttons.css
+++ b/kbase-extension/static/kbase/css/buttons.css
@@ -2,24 +2,49 @@
 /* A flat button, with no unselected background color, but with hover and click
    styles */
 .btn.kb-flat-btn {
-  background-color: #fff;
-  border: none;
-  text-shadow: none !important;
-  margin: 0;
-  color: #666;
+    background-color: #FFF;
+    xpadding: 1px 7px;
+    xfont-size: 24px;
+    border: none;
+    text-shadow: none !important;
+    margin: 0;
+    /* box-shadow: 0 0 3px #CECECE; */
+    xmargin-right: 5px;
 }
-
 .kb-flat-btn-wrapper { /* don't add shadows here */
   box-shadow: none;
 }
 
+/* Set a plain default color -- should be overridden when building the button. */
+.btn.kb-flat-btn  {
+    color: #666;
+}
+
 /* Text spacing */
 .btn.kb-flat-btn .kb-nav-btn-txt {
-  font-size: 10pt;
-  margin-top: -5px;
+    font-size: 10pt;
+    margin-top: -5px;
+}
+
+/* ?? 
+ color nav icons
+.navbar-buttons .fa::before {  
+  color: #2196F3;
+}
+*/
+
+.btn.kb-flat-btn:hover {
+  background-color: #F5F5F5;
 }
 
-.btn.kb-flat-btn:hover,
-.btn.kb-flat-btn:active {
-  background-color: #ccc;
+/* ?? 
+ restore rounded corners 
+#kb-ipy-menu { 
+  border-radius: 4px !important;
+  margin-right: 0;
 }
+*/
+
+.btn.kb-flat-btn:hover, .btn.kb-flat-btn:active  {
+    background-color: #CCC;
+}
\ No newline at end of file
diff --git a/kbase-extension/static/kbase/css/contigBrowserStyles.css b/kbase-extension/static/kbase/css/contigBrowserStyles.css
index 196caa3bac..367565e50b 100644
--- a/kbase-extension/static/kbase/css/contigBrowserStyles.css
+++ b/kbase-extension/static/kbase/css/contigBrowserStyles.css
@@ -1,16 +1,15 @@
-/* ------------ Contig browser rules -------------- */
-
+/*------------ Contig browser rules --------------*/
 /*
  * Styling for the tooltip that pops up when a feature is highlighted.
  */
 .kbcb-tooltip {
-  position: absolute;
-  z-index: 9999999;
-  visibility: hidden;
-  opacity: 0.8;
-  background-color: #222;
-  color: #fff;
-  padding: 0.5em;
+	position: absolute;
+	z-index: 9999999;
+	visibility: hidden;
+	opacity: 0.8;
+	background-color: #222;
+	color: #fff;
+	padding: 0.5em;
 }
 
 /**
@@ -18,14 +17,14 @@
  */
 .kbcb-widget .kbcb-axis path,
 .kbcb-widget .kbcb-axis line {
-  fill: none;
-  stroke: black;
-  shape-rendering: crispEdges;
+    fill: none;
+    stroke: black;
+    shape-rendering: crispEdges;
 }
 
 .kbcb-widget .kbcb-axis text {
-  font-family: sans-serif;
-  font-size: 11px;
+    font-family: sans-serif;
+    font-size: 11px;
 }
 
 /**
@@ -38,27 +37,27 @@
  * And highlighted features should be colored last (not currently used).
  */
 .kbcb-feature {
-  stroke: #000;
-  fill: #f00;
+	stroke: #000;
+	fill: #f00;
 }
 
 .kbcb-operon {
-  fill: #0f0;
+	fill: #0f0;
 }
 
 .kbcb-center {
-  fill: #00f;
+	fill: #00f;
 }
 
 .kbcb-highlight {
-  fill: #fff;
+	fill: #fff;
 }
 
 /**
  * The below controls styling for the (optional) button panel
  */
 .kbcb-buttons {
-  margin-left: auto;
-  margin-right: auto;
-  width: 70%;
+	margin-left: auto;
+	margin-right: auto;
+	width: 70%;
 }
diff --git a/kbase-extension/static/kbase/css/kbaseEditor.css b/kbase-extension/static/kbase/css/kbaseEditor.css
index 42fb775e47..77b05b3a0b 100644
--- a/kbase-extension/static/kbase/css/kbaseEditor.css
+++ b/kbase-extension/static/kbase/css/kbaseEditor.css
@@ -3,27 +3,27 @@
  */
 
 .modal-body .dataTables_processing {
-  border: 1px solid #aaa;
-  background: #e8f9ff;
-  opacity: 0.8;
+    border: 1px solid #aaa;
+    background: #E8F9FF;
+    opacity: 0.8;
 }
 
 .kb-editor {
-  margin: 0 10px;
+    margin: 0 10px;
 }
 
 .kb-editor .tab-content {
-  margin: 5px 0 0 0;
+    margin: 5px 0 0 0;
 }
 
 .kb-editor .controls {
-  margin: 5px 0;
+    margin: 5px 0px;
 }
-
-.kb-editor .controls .btn {
-  margin: 0 10px;
+.kb-editor .controls .btn{
+    margin: 0 10px;
 }
 
+
 /**
  * Override KBase stylings that override jupyter styling.
  * Should be removed after Bill's refactoring.
@@ -31,63 +31,63 @@
 
 /* override button staylings that were removed */
 .kb-editor .btn-primary {
-  background-color: #337ab7 !important;
-  border-color: #2e6da4 !important;
+    background-color: #337ab7 !important;
+    border-color: #2e6da4 !important;
 }
-
 .kb-editor .btn-danger {
-  background-color: #d9534f !important;
-  border-color: #d43f3a !important;
+    background-color: #d9534f !important;
+    border-color: #d43f3a !important;
 }
 
 /* override icon stylings in button that were removed */
 .kb-editor .btn i {
-  color: #fff;
+    color: #fff;
 }
 
 /* override table border styling */
 .kb-editor table {
-  border: 1px solid #bbb;
+    border: 1px solid #bbb;
 }
 
+
 /**
  * General editor styling
  */
 .kb-editor-table {
-  width: 100% !important; /* override datatables hackory */
+    width: 100% !important; /* override datatables hackory */
 }
 
 .kb-editor-table > tbody > tr > td:first-child {
-  width: 1%; /* checkboxes are expected on editable tables */
+    width: 1%; /* checkboxes are expected on editable tables */
 }
 
 .kb-editor-table > tbody > tr > td:first-child .fa-square-o {
-  font-size: 1.4em;
-  color: #666;
+    font-size: 1.4em;
+    color: #666;
 }
 
 .kb-editor-table > tbody > tr > td:first-child:hover {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .kb-editor-table > tbody > tr > td:first-child:hover .fa-square-o {
-  color: #000;
+    color: #000;
 }
 
-.kb-editor-table > tbody > tr.row-select .fa-square-o::before {
-  content: "\f046";
-  color: #444;
+.kb-editor-table > tbody > tr.row-select .fa-square-o:before {
+    content: "\f046";
+    color: #444;
 }
 
 .kb-editor-table > tbody > tr > td.editable {
-  position: relative;
+    position: relative;
 }
 
-.kb-editor-table > tbody > tr > td.editable:hover::after {
-  content: "\f044";
-  font-family: FontAwesome;
-  position: absolute;
-  bottom: 0;
-  right: 2px;
-  color: #888;
+.kb-editor-table > tbody > tr > td.editable:hover:after{
+    content: "\f044";
+    font-family: FontAwesome;
+    position: absolute;
+    bottom: 0;
+    right: 2px;
+    color: #888;
 }
diff --git a/kbase-extension/static/kbase/css/kbaseIcons.css b/kbase-extension/static/kbase/css/kbaseIcons.css
index 0eb698e127..ac888c5181 100644
--- a/kbase-extension/static/kbase/css/kbaseIcons.css
+++ b/kbase-extension/static/kbase/css/kbaseIcons.css
@@ -2,58 +2,55 @@
 
 @font-face {
   font-family: "kbase-icons";
-  src: url("../fonts/kbase-icons.eot");
-  src:
-    url("../fonts/kbase-icons.eot?#iefix") format("embedded-opentype"),
+  src:url("../fonts/kbase-icons.eot");
+  src:url("../fonts/kbase-icons.eot?#iefix") format("embedded-opentype"),
     url("../fonts/kbase-icons.woff") format("woff"),
     url("../fonts/kbase-icons.ttf") format("truetype"),
     url("../fonts/kbase-icons.svg#kbase-icons") format("svg");
   font-weight: normal;
   font-style: normal;
+
 }
 
-[data-icon]::before {
+[data-icon]:before {
   font-family: "kbase-icons" !important;
   content: attr(data-icon);
   font-style: normal !important;
   font-weight: normal !important;
   font-variant: normal !important;
   text-transform: none !important;
+  speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-[class^="icon-"]::before,
-[class*=" icon-"]::before {
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
   font-family: "kbase-icons" !important;
   font-style: normal !important;
   font-weight: normal !important;
   font-variant: normal !important;
   text-transform: none !important;
+  speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-compare::before {
+.icon-compare:before {
   content: "a";
 }
-
-.icon-genome::before {
+.icon-genome:before {
   content: "b";
 }
-
-.icon-metabolism::before {
+.icon-metabolism:before {
   content: "c";
 }
-
-.icon-metagenome::before {
+.icon-metagenome:before {
   content: "d";
 }
-
-.icon-reads::before {
+.icon-reads:before {
   content: "e";
 }
-
-.icon-tree::before {
+.icon-tree:before {
   content: "f";
 }
diff --git a/kbase-extension/static/kbase/css/kbaseJobLog.css b/kbase-extension/static/kbase/css/kbaseJobLog.css
index add087e3a9..e217362f96 100644
--- a/kbase-extension/static/kbase/css/kbaseJobLog.css
+++ b/kbase-extension/static/kbase/css/kbaseJobLog.css
@@ -1,70 +1,75 @@
 #kblog-header {
-  margin: 5px 0 5px 0;
+    margin: 5px 0 5px 0;
 }
 
 #kblog-panel {
-  background-color: #f5f5f5;
-  border: 1px solid #cecece;
-  height: 350px;
-  padding: 5px;
-  resize: vertical;
-  overflow: auto;
-  color: #000;
-  vertical-align: top;
+    background-color: #F5F5F5;
+    border: 1px solid #CECECE;
+    height: 350px;
+    padding: 5px;
+    resize: vertical;
+    overflow: auto;
+    color: #000;
+    vertical-align: top;
 }
 
 .kblog-header {
-  display: flex;
-  font-family: monospace;
+    display: flex;
+    font-family: monospace;
 }
 
 .kblog-line {
-  font-family: monospace;
+    font-family: monospace;
 }
 
 .kblog-line:hover {
-  background-color: #ddd;
+    background-color: #DDD;
 }
 
 .kblog-num-wrapper {
-  font-size: 85%;
-  display: flex;
-  flex-direction: row;
+    font-size: 85%;
+    display: flex;
+    flex-direction: row;
 }
 
 .kblog-line-num {
-  flex-shrink: 0;
-  width: 3rem;
-  text-align: right;
-  color: #999;
-  white-space: nowrap;
+    flex-shrink: 0;
+    width: 3rem;
+    text-align: right;
+    color: #999;
+    white-space: nowrap;
 
-  /* makes text unselectabe */
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -o-user-select: none;
-  user-select: none;
+    /* makes text unselectabe */
+    -moz-user-select: -moz-none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -o-user-select: none;
+    user-select: none;
 }
 
 .kblog-text {
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  flex: 1;
-  margin-left: 6px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    flex: 1;
+    margin-left: 6px;
 }
 
-.kb-error,
-.kb-error .kblog-line-num {
-  color: darkred;
-  text-decoration: underline;
-  font-weight: bold;
-  font-size: 12px;
-  background-color: rgb(255, 245, 245);
+.kb-error, .kb-error .kblog-line-num  {
+    color: darkred;
+    text-decoration: underline;
+    text-decoration-style: solid;
+    text-decoration-color: red;
+    font-weight: bold;
+    font-size: 12px;
+    background-color: rgb(255, 245, 245);
+
+}
+
+#kblog-msg {
+    margin-top: 5px;
 }
 
-#kblog-msg,
 #kblog-err {
-  margin-top: 5px;
+    margin-top: 5px;
+    /* color: #660000; */
 }
diff --git a/kbase-extension/static/kbase/css/kbaseNotify.css b/kbase-extension/static/kbase/css/kbaseNotify.css
index 4c01e03f91..b798fb341c 100644
--- a/kbase-extension/static/kbase/css/kbaseNotify.css
+++ b/kbase-extension/static/kbase/css/kbaseNotify.css
@@ -1,13 +1,14 @@
+
 .kb-notify {
-  position: relative;
-  bottom: 10px;
-  width: 300px;
-  padding: 15px;
-  color: #fff;
-  background-color: #000;
-  opacity: 0.8;
+    position: relative;
+    bottom: 10px;
+    width: 300px;
+    padding: 15px;
+    color: #fff;
+    background-color: #000;
+    opacity: 0.8;
 }
 
 .kb-notify.kb-notify-success {
-  color: #00cc09;
+    color: #00CC09;
 }
diff --git a/kbase-extension/static/kbase/css/kbaseStylesheet.css b/kbase-extension/static/kbase/css/kbaseStylesheet.css
index 2809bb2036..a17f0a7210 100644
--- a/kbase-extension/static/kbase/css/kbaseStylesheet.css
+++ b/kbase-extension/static/kbase/css/kbaseStylesheet.css
@@ -1,168 +1,146 @@
 @font-face {
-  font-family: 'Oxygen';
-  src: url('../fonts/Oxygen-webfont.eot');
-  src:
-    url('../fonts/Oxygen-webfont.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/Oxygen-webfont.woff') format('woff'),
-    url('../fonts/Oxygen-webfont.ttf') format('truetype'),
-    url('../fonts/Oxygen-webfont.svg#OxygenRegular') format('svg');
-  font-weight: normal;
-  font-style: normal;
+    font-family: 'Oxygen';
+    src: url('../fonts/Oxygen-webfont.eot');
+    src: url('../fonts/Oxygen-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/Oxygen-webfont.woff') format('woff'),
+         url('../fonts/Oxygen-webfont.ttf') format('truetype'),
+         url('../fonts/Oxygen-webfont.svg#OxygenRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
 }
 
 @font-face {
-  font-family: 'Oxygen';
-  src: url('../fonts/Oxygen-Bold-webfont.eot');
-  src:
-    url('../fonts/Oxygen-Bold-webfont.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/Oxygen-Bold-webfont.woff') format('woff'),
-    url('../fonts/Oxygen-Bold-webfont.ttf') format('truetype'),
-    url('../fonts/Oxygen-Bold-webfont.svg#OxygenBold') format('svg');
-  font-weight: bold;
-  font-style: normal;
+    font-family: 'Oxygen';
+    src: url('../fonts/Oxygen-Bold-webfont.eot');
+    src: url('../fonts/Oxygen-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/Oxygen-Bold-webfont.woff') format('woff'),
+         url('../fonts/Oxygen-Bold-webfont.ttf') format('truetype'),
+         url('../fonts/Oxygen-Bold-webfont.svg#OxygenBold') format('svg');
+    font-weight: bold;
+    font-style: normal;
 }
 
 @font-face {
-  font-family: 'Oxygen';
-  src: url('../fonts/Oxygen-Italic-webfont.eot');
-  src:
-    url('../fonts/Oxygen-Italic-webfont.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/Oxygen-Italic-webfont.woff') format('woff'),
-    url('../fonts/Oxygen-Italic-webfont.ttf') format('truetype'),
-    url('../fonts/Oxygen-Italic-webfont.svg#OxygenItalic') format('svg');
-  font-weight: normal;
-  font-style: italic;
+    font-family: 'Oxygen';
+    src: url('../fonts/Oxygen-Italic-webfont.eot');
+    src: url('../fonts/Oxygen-Italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/Oxygen-Italic-webfont.woff') format('woff'),
+         url('../fonts/Oxygen-Italic-webfont.ttf') format('truetype'),
+         url('../fonts/Oxygen-Italic-webfont.svg#OxygenItalic') format('svg');
+    font-weight: normal;
+    font-style: italic;
 }
 
 @font-face {
-  font-family: 'Oxygen';
-  src: url('../fonts/Oxygen-BoldItalic-webfont.eot');
-  src:
-    url('../fonts/Oxygen-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/Oxygen-BoldItalic-webfont.woff') format('woff'),
-    url('../fonts/Oxygen-BoldItalic-webfont.ttf') format('truetype'),
-    url('../fonts/Oxygen-BoldItalic-webfont.svg#OxygenBoldItalic') format('svg');
-  font-weight: bold;
-  font-style: italic;
+    font-family: 'Oxygen';
+    src: url('../fonts/Oxygen-BoldItalic-webfont.eot');
+    src: url('../fonts/Oxygen-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/Oxygen-BoldItalic-webfont.woff') format('woff'),
+         url('../fonts/Oxygen-BoldItalic-webfont.ttf') format('truetype'),
+         url('../fonts/Oxygen-BoldItalic-webfont.svg#OxygenBoldItalic') format('svg');
+    font-weight: bold;
+    font-style: italic;
 }
 
 @font-face {
-  font-family: 'OxygenMono';
-  src: url('../fonts/OxygenMono-Regular-webfont.eot');
-  src:
-    url('../fonts/OxygenMono-Regular-webfont.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/OxygenMono-Regular-webfont.woff') format('woff'),
-    url('../fonts/OxygenMono-Regular-webfont.ttf') format('truetype'),
-    url('../fonts/OxygenMono-Regular-webfont.svg#OxygenMonoRegular') format('svg');
-  font-weight: normal;
-  font-style: normal;
+    font-family: 'OxygenMono';
+    src: url('../fonts/OxygenMono-Regular-webfont.eot');
+    src: url('../fonts/OxygenMono-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OxygenMono-Regular-webfont.woff') format('woff'),
+         url('../fonts/OxygenMono-Regular-webfont.ttf') format('truetype'),
+         url('../fonts/OxygenMono-Regular-webfont.svg#OxygenMonoRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
 }
 
 @font-face {
-  font-family: 'OxygenRegular';
-  src: url('../fonts/Oxygen-webfont.eot');
-  src:
-    url('../fonts/Oxygen-webfont.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/Oxygen-webfont.woff') format('woff'),
-    url('../fonts/Oxygen-webfont.ttf') format('truetype'),
-    url('../fonts/Oxygen-webfont.svg#OxygenRegular') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
+    font-family: 'OxygenRegular';
+    src: url('../fonts/Oxygen-webfont.eot');
+    src: url('../fonts/Oxygen-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/Oxygen-webfont.woff') format('woff'),
+         url('../fonts/Oxygen-webfont.ttf') format('truetype'),
+         url('../fonts/Oxygen-webfont.svg#OxygenRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+} 
 
 @font-face {
-  font-family: 'OxygenBold';
-  src: url('../fonts/Oxygen-Bold-webfont.eot');
-  src:
-    url('../fonts/Oxygen-Bold-webfont.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/Oxygen-Bold-webfont.woff') format('woff'),
-    url('../fonts/Oxygen-Bold-webfont.ttf') format('truetype'),
-    url('../fonts/Oxygen-Bold-webfont.svg#OxygenBold') format('svg');
-  font-weight: normal;
-  font-style: normal;
+    font-family: 'OxygenBold';
+    src: url('../fonts/Oxygen-Bold-webfont.eot');
+    src: url('../fonts/Oxygen-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/Oxygen-Bold-webfont.woff') format('woff'),
+         url('../fonts/Oxygen-Bold-webfont.ttf') format('truetype'),
+         url('../fonts/Oxygen-Bold-webfont.svg#OxygenBold') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
 }
 
 @font-face {
-  font-family: 'RobotoBlack';
-  src: url('../fonts/Roboto-Black-webfont.eot');
-  src:
-    url('../fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
-    url('../fonts/Roboto-Black-webfont.woff') format('woff'),
-    url('../fonts/Roboto-Black-webfont.ttf') format('truetype'),
-    url('../fonts/Roboto-Black-webfont.svg#RobotoBlack') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
+    font-family: 'RobotoBlack';
+    src: url('../fonts/Roboto-Black-webfont.eot');
+    src: url('../fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/Roboto-Black-webfont.woff') format('woff'),
+         url('../fonts/Roboto-Black-webfont.ttf') format('truetype'),
+         url('../fonts/Roboto-Black-webfont.svg#RobotoBlack') format('svg');
+    font-weight: normal;
+    font-style: normal;
 
-h1 {
-  font: 1.75em/2em 'RobotoBlack', Arial, sans-serif;
-  letter-spacing: 0;
-  color: #232323;
-  font-weight: normal;
 }
 
+h1 {
+	font: 1.75em/2em 'RobotoBlack', Arial, sans-serif;
+	letter-spacing: 0;
+	color: #232323;
+	font-weight: normal;
+	}
 h2 {
-  font: 1.5em/1.75em 'RobotoBlack', Arial, sans-serif;
-  font-weight: normal;
-  color: #898989;
-  letter-spacing: 0;
-}
-
+	font: 1.5em/1.75em 'RobotoBlack', Arial, sans-serif;
+	font-weight: normal;
+	color: #898989;
+	letter-spacing: 0;
+	}
 h3 {
-  font: 1.15em/1.25em 'RobotoBlack', Arial, sans-serif;
-  letter-spacing: 0;
-  font-weight: normal;
-}
-
+	font: 1.15em/1.25em 'RobotoBlack', Arial, sans-serif;
+	letter-spacing: 0;
+	font-weight: normal;
+	}
 h4 {
-  font: 1.15em/1.25em 'Oxygen', Arial, sans-serif;
-  font-style: italic;
-  letter-spacing: 0.07em;
-}
-
+    font: 1.15em/1.25em 'Oxygen', Arial, sans-serif;
+    font-style: italic;
+	letter-spacing: .07em;
+	}
 body {
-  font: 1.375em 'Oxygen', Arial, sans-serif;
-  color: #333;
-  background-color: #fff;
-}
-
-strong,
-b {
-  font-family: 'Oxygen', Arial, sans-serif;
-  font-weight: bold;
-}
-
-em,
-i {
-  font-family: 'Oxygen', Arial, sans-serif;
-  font-style: italic;
-}
-
-strong em,
-em strong,
-b i,
-i b {
-  font-family: 'Oxygen', Arial, sans-serif;
-  font-style: italic;
-  font-weight: bold;
-}
-
+	font: 1.375em 'Oxygen', Arial, sans-serif;
+	color: #333333;
+	background-color: #fff;
+	}
+strong, b {
+	font-family: 'Oxygen';
+	font-weight: bold;
+	}
+em, i {
+	font-family: 'Oxygen';
+	font-style: italic;
+	}
+strong em, em strong, b i, i b{
+	font-family: 'Oxygen';
+	font-style: italic;
+	font-weight: bold;
+	}
 a {
-  color: #08c;
-  text-decoration: none;
-}
-
+	color: #0088cc;
+	text-decoration: none;
+	}
 a:visited {
-  color: #2a6496;
-}
-
-a:hover {
-  text-decoration: underline;
-  color: #2a6496;
-}
-
-pre,
-code {
-  font-family: 'OxygenMono', "Lucida Console", "Lucida Sans Typewriter", monospace;
-  font-style: normal;
-}
+	color: #2a6496;
+	}
+a:hover    {
+	text-decoration: underline;
+	color: #2a6496;
+	}
+pre, code {
+	font-family: 'OxygenMono', "Lucida Console", "Lucida Sans Typewriter", monospace;
+	font-style: normal;
+	}
diff --git a/kbase-extension/static/kbase/css/kbaseTour.css b/kbase-extension/static/kbase/css/kbaseTour.css
index 655440faef..33005d48c7 100644
--- a/kbase-extension/static/kbase/css/kbaseTour.css
+++ b/kbase-extension/static/kbase/css/kbaseTour.css
@@ -1,40 +1,41 @@
 .kb-tour {
-  background-color: #2196f3;
+    background-color: #2196f3;
 }
 
-.kb-tour.popover.top > .arrow::after {
-  border-top-color: #2196f3;
+.kb-tour.popover.top > .arrow:after {
+    border-top-color: #2196f3;
 }
 
-.kb-tour.popover.bottom > .arrow::after {
-  border-bottom-color: #2196f3;
+.kb-tour.popover.bottom > .arrow:after {
+    border-bottom-color: #2196f3;
 }
 
-.kb-tour.popover.right > .arrow::after {
-  border-right-color: #2196f3;
+.kb-tour.popover.right > .arrow:after {
+    border-right-color: #2196f3;
 }
 
-.kb-tour.popover.left > .arrow::after {
-  border-left-color: #2196f3;
+.kb-tour.popover.left > .arrow:after {
+    border-left-color: #2196f3;
 }
 
-.kb-tour > .popover-title {
-  background-color: #2196f3;
-  color: #fff;
-  font-family: Oxygen, Arial, sans-serif;
-  font-size: 12pt;
+
+.kb-tour > h3.popover-title {
+    background-color: #2196f3;
+    color: #fff;
+    font-family: Oxygen, Arial, sans-serif;
+    font-size: 12pt;
 }
 
 .kb-tour > .popover-content {
-  background-color: #eee;
+    background-color: #eee;
 }
 
 .kb-tour > .popover-navigation {
-  background-color: #eee;
+    background-color: #eee;
 }
 
 .kb-tour > .close-btn {
-  position: absolute;
-  top: 7px;
-  right: 7px;
-}
+    position: absolute;
+    top: 7px;
+    right: 7px
+}
\ No newline at end of file
diff --git a/kbase-extension/static/kbase/css/landing-pages.css b/kbase-extension/static/kbase/css/landing-pages.css
index b2793fcf28..778a5c0007 100644
--- a/kbase-extension/static/kbase/css/landing-pages.css
+++ b/kbase-extension/static/kbase/css/landing-pages.css
@@ -1,469 +1,519 @@
 
+
+
+
+/* KBase navigation bar */
+.navbar-kbase {
+    background-color: #fff;
+    border-bottom: 1px solid #E0E0E0;
+    -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1);
+    -moz-box-shadow: 0 1px 10px rgba(0,0,0,.1);
+    box-shadow: 0 1px 10px rgba(0,0,0,.1);
+}
+.nav > li > a:hover, .nav > li > a:focus {
+    text-decoration: none;
+    /*background-color: #fff !important;*/
+}
+
+/* END KBase navigation bar */
+
+
 .app-icon:hover {
-  opacity: 0.9;
-  text-decoration: none;
+    opacity: 0.9;
+    text-decoration: none;
 }
 
+
 #kbase-search-box {
-  width: 300px;
+    width: 300px;
 }
 
+
 #signin-button {
-  display: inline-block;
-  padding: 0 15px 0 0;
+    /*margin: 15px 7px 0 0;*/
+    display: inline-block;
+    padding: 0 15px 0 0;
 }
 
-/* bootstrap overrides */
-.wrapper {
-  width: 95%;
-  margin-left: auto;
-  margin-right: auto;
+#signin-button a {
+
 }
 
+
+/* bootstrap overrides */
+.wrapper { width: 95%; margin-left: auto; margin-right: auto; }
 /* end bootstrap overrides */
 
-#core-model {
-  overflow-x: auto;
+
+#core-model { 
+    overflow-x: auto; 
 }
 
 #logo {
-  margin: 2px 10px 0 10px;
+    margin: 2px 10px 0 10px;
 }
 
-table {
-  font-size: 14px !important;
+
+table {  
+    font-size: 14px !important;
 }
 
 .media-info-modal {
-  width: 800px;
+    width: 800px;
 }
 
 #selected-workspace {
-  margin: 17px 14px 15px 0;
+    margin: 17px 14px 15px 0px;
 }
 
 .tab-view {
-  margin: 10px 0 0 0;
+    margin: 10px 0 0 0;
 }
 
+
+
 /* mv */
 .search-query {
-  width: 100%;
-  margin: 0 0 5px 0;
+    width: 100%;
+    margin: 0 0 5px 0;
 }
 
 .caret-up {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  margin-left: 2px;
-  vertical-align: middle;
-  border-top: none;
-  border-bottom: 4px solid #fff;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  border-top-width: 0;
-  border-top-style: dotted;
-  content: "";
+    display: inline-block;
+    width: 0px;
+    height: 0px;
+    margin-left: 2px;
+    vertical-align: middle;
+    border-top: none;
+    border-bottom: 4px solid #FFFFFF;
+    border-right: 4px solid transparent;
+    border-left: 4px solid transparent;
+    border-top-width: 0px;
+    border-top-style: dotted;
+    content: "";
 }
 
 .scroll-pane {
-  height: 200px;
-  overflow-y: scroll;
-  overflow-x: hi;
+    height: 200px;
+    overflow-y: scroll; 
+    overflow-x: hi;
 }
 
-#select-box tr td {
-  padding: 6px;
+
+#select-box tr td{
+    padding: 6px;
 }
 
+/*#select-box tr :hover {
+    background-color: #eee;
+}*/
+
 .selected-ws {
-  background-color: #428bca;
-  color: #fff;
+    background-color: #428bca;
+    color: #fff;
 }
 
 .selected-ws:hover { /* fixme */
-  background-color: #428bca !important;
+    background-color: #428bca !important;
 }
 
+
 .side-bar-switch {
-  margin: 0 0 10px 0;
+    margin: 0 0 10px 0;
 }
-
 .side-bar-switch li {
-  font-size: 12px;
+    font-size: 12px;
 }
-
 .side-bar-switch li a {
-  padding: 5px 10px;
+    padding: 5px 10px;
 }
 
 .selected-obj-alert {
-  margin-bottom: 5px; /* override */
-  padding-top: 10px;
-  padding-bottom: 10px;
+    margin-bottom: 5px; /* override */
+    padding-top: 10px;
+    padding-bottom: 10px;    
 }
 
 .heatmap-view {
-  overflow-x: scroll;
+    overflow-x: scroll;
 }
 
+/*div::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+div::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    border-radius: 10px;
+    background: #ddd;
+}
+
+div::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: #666;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
+}*/
+
+
 /* ws browser */
 
-.ws-selector {
-  margin: 10px 0 0 0;
+.ws-selector{
+    margin: 10px 0 0 0;
 }
 
 .ws-selector.btn-ws-settings {
-  position: absolute;
-  right: 30px;
+    position: absolute;
+    right: 30px;
 }
 
 .object-view {
-  margin: 10px 0 0 0;
+    margin: 10px 0 0 0;
 }
 
 .select-ws .badge {
-  margin: 0 4px 0 0;
+    margin: 0 4px 0 0 ;
 }
-
 .select-ws .btn-ws-settings {
-  padding: 0 5px;
+    padding: 0px 5px;
 }
 
 .modal-alert {
-  margin: 10px 15px 0 15px;
-  padding: 8px 15px;
+    margin: 10px 15px 0px 15px;
+    padding: 8px 15px;
+
 }
 
 .modal-cover {
-  position: absolute;
-  z-index: 10;
+    position: absolute;
+    z-index: 10;
 }
 
 .modal-cover-table {
-  display: table;
-  position: static;
-  width: 100%;
-  height: 100%;
+    display: table;
+    position: static;
+    width: 100%;
+    height: 100%;
 }
 
 .modal-cover-cell {
-  display: table-cell;
-  vertical-align: middle;
-  position: static;
+    display: table-cell;
+    vertical-align: middle;
+    position: static;
 }
 
+
 .modal-cover-box {
-  display: inline-block;
-  padding: 5px 15px;
-  margin: 10px;
-  -moz-box-shadow: 7px 7px 5px #888;
-  -webkit-box-shadow: 7px 7px 5px #888;
-  box-shadow: 7px 7px 5px #888;
+    display: inline-block;
+    padding: 5px 15px;
+    margin: 10px;
+    -moz-box-shadow: 7px 7px 5px #888;
+    -webkit-box-shadow: 7px 7px 5px #888;
+    box-shadow: 7px 7px 5px #888;
+    /*background: #95C07C;    */
 }
 
 .modal-cover-content {
-  padding: 5px;
-  background: white;
-  border: 1px solid #666;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+    padding: 5px;
+    background: white;
+    border: 1px solid #666;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
 }
 
+
 .obj-table .dataTables_length label {
-  margin: 7px 0 0 0;
+    margin: 7px 0 0 0;
 }
 
 .dataTables_info {
-  margin: 0 10px 0 0;
+    margin: 0 10px 0 0;
 }
-
-.dataTables_length,
-.dataTables_info {
-  float: left;
+.dataTables_length, .dataTables_info {
+    float: left;
 }
-
 .ellipsis {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  max-width: 170px;
-  display: inline-block;
-  overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 170px;
+    display: inline-block;
+    overflow: hidden
 }
 
 .ws-descript {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  max-width: 400px;
-  overflow: hidden;
-  display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 400px;
+    overflow: hidden;
+    display: inline-block;
 }
 
+
+
 /* custom checkboxes (prototyped) */
 .ncheck {
-  width: 15px;
-  height: 15px;
-  border: 1px solid #ccc;
-  margin-left: auto;
-  margin-right: auto;
+    width: 15px;
+    height: 15px;
+    border: 1px solid #ccc ;
+    margin-left: auto;
+    margin-right: auto;
 }
-
 .ncheck:hover {
-  border: 1px solid #444;
+    border: 1px solid #444 ;    
 }
-
 .ncheck-btn {
-  width: 15px;
-  height: 15px;
-  border: 1px solid #888;
-  margin: 4px 0 4px -1px;
+    width: 15px;
+    height: 15px;
+    border: 1px solid #888 ;
+    margin: 4px 0px 4px -1px;
 }
-
 .ncheck-btn:hover {
-  border: 1px solid #444;
+    border: 1px solid #444 ;    
 }
-
 .ncheck-checked {
-  background: url(../img/checkmark.png) no-repeat -5px -4px;
-  background-image: -webkit-image-set(url(../img/checkmark.png) 1x, url(../img/checkmark_2x.png) 2x);
+    background: url(../img/checkmark.png) no-repeat -5px -4px;
+    background-image: -webkit-image-set(url(../img/checkmark.png) 1x,url(../img/checkmark_2x.png) 2x);
 }
-
 .ncheck-minus {
-  background: url(../img/checkmark-partial.png) no-repeat -5px -5px;
-  background-image: -webkit-image-set(url(../img/checkmark-partial.png) 1x, url(../img/checkmark-partial_2x.png) 2x);
+    background: url(../img/checkmark-partial.png) no-repeat -5px -5px;
+    background-image: -webkit-image-set(url(../img/checkmark-partial.png) 1x,url(../img/checkmark-partial_2x.png) 2x);
 }
 
 .btn-select-all {
-  height: 34px;
-  margin: 0 20px 0 0;
+    height: 34px;
+    margin: 0 20px 0 0;
 }
 
 .type-filter {
-  margin: 0 20px 0 0;
+    margin: 0 20px 0 0;
 }
 
-.btn-trash {
-  margin: 3px 20px 0 0;
+.btn-trash { 
+    margin: 3px 20px 0 0;
 }
 
-.btn-show-info .glyphicon {
-  padding: 0 0 4px 0;
+
+.btn-show-info .glyphicon{
+    padding: 0px 0px 4px 0px;
 }
 
+
 .open-obj {
-  margin: 7px 0 0 20px;
+    margin: 7px 0 0 20px;
 }
 
+
+
 /******************     narrative     ***************/
+
 #login-form {
-  margin: 70px 0 0 0;
+    margin: 70px 0 0 0;
 }
 
 #narrative-nav,
 .recent-narratives,
 .recent-projects {
-  padding: 0;
-  margin: 0;
+    padding: 0;
+    margin: 0;
 }
 
 .group-item-expander {
-  background: #f2f2f2; /* #d6eaff; */
+    background: #f2f2f2; /*#d6eaff;*/
 }
 
 .group-item-expander:hover {
-  cursor: hand;
-  cursor: pointer;
+    cursor: hand;
+    cursor: pointer;
 }
 
+
 .btn-new-narrative {
-  margin: 0 20px 0 0;
+    margin: 0 20px 0 0;
 }
-
 .btn-delete-narrative {
-  cursor: hand;
-  cursor: pointer;
+    cursor: hand;
+    cursor: pointer;
 }
-
 .btn-delete-narrative:hover {
-  opacity: 0.7;
+    opacity: 0.7;    
 }
-
 /* changing z index for datatable fixed header */
 .navbar-fixed-top {
-  z-index: 500;
+    z-index: 500;
 }
-
 .FixedHeader_Header {
-  background: #fff;
-  margin: -6px 0 0 0;
-  height: 44px;
+    background: #fff;
+    margin: -6px 0 0px 0;
+    height: 44px;
+
 }
 
 .narrative-sidebar li {
-  list-style: none;
+    list-style: none;
 }
 
 @media (min-width: 960px) {
-  .narrative-sidebar {
-    position: fixed;
-    width: 20%;
-
-    /* float:left; */
-  }
+    .narrative-sidebar {
+        position:fixed;
+        width: 20%;
+        /*float:left;*/
+    }
 }
 
+
 .sidebar-header {
-  font-size: 14px;
-  color: #898989;
-  font-family: 'RobotoBlack', Arial, sans-serif;
-  letter-spacing: 0;
-  font-weight: normal;
+    font-size: 14px;
+    color: #898989;
+    font-family: 'RobotoBlack', Arial, sans-serif;
+    letter-spacing: 0;
+    font-weight: normal;
 }
 
+
 .view-header {
-  font: 1.5em/1.75em  'RobotoBlack', Arial, sans-serif;
-  font-weight: normal;
-  color: #898989;
-  letter-spacing: 0;
+    font:  1.5em/1.75em  'RobotoBlack', Arial, sans-serif; 
+    font-weight: normal; 
+    color: #898989; 
+    letter-spacing: 0;
 }
 
-.btn-narr {
-  background-color: #f2f2f2;
-  text-align: left;
-  padding-left: 20px;
-  padding-right: 20px;
-  border: 1px solid #dbdbdb;
-  color: #6da8cf;
-  font-family: 'RobotoBlack', Arial, sans-serif;
-  font-size: 14px;
+.view-header {
+    font:  1.5em/1.75em  'RobotoBlack', Arial, sans-serif; 
+    font-weight: normal; 
+    color: #898989; 
+    letter-spacing: 0;
 }
 
+
 .active .btn-narr {
-  background-color: #bbe8f9;
-  border: 1px solid #428bca;
+    background-color: #BBE8F9;
+    text-align: left;
+    padding-left: 20px;
+    padding-right: 20px;
+    /*border: 1px solid #A5D4E1;*/
+    border: 1px solid #428bca;
+    font-family: OxygenBold;
+    font-size: 14px;
+}
 
-  /* FIXME: why does the font change here?! */
-  font-family: OxygenBold;
+.btn-narr {
+    background-color: #f2f2f2;
+    text-align: left;
+    padding-left: 20px;
+    padding-right: 20px;
+    border: 1px solid #DBDBDB;
+    color: #6DA8CF;
+    font-family: 'RobotoBlack', Arial, sans-serif;
+    font-size: 14px;
 }
 
 .nav-sidebar {
-  top: 70px;
+    top: 70px;
 }
 
 .nav-sidebar li {
-  list-style: none;
-  margin-bottom: 10px;
-  text-align: left;
-  font-family: 'RobotoBlack', Arial, sans-serif;
+    list-style: none;
+    margin-bottom: 10px;
+    text-align: left;
+    font-family: 'RobotoBlack', Arial, sans-serif;
 }
 
 .nav-sidebar > li > a {
-  padding: 7px 15px;
+    padding: 7px 15px;
 }
 
+
 .navbar-nav {
-  color: #6da8cf;
-  font-family: 'RobotoBlack', Arial, sans-serif;
+    color: #6DA8CF;
+    font-family: 'RobotoBlack', Arial, sans-serif;
 }
 
 .navbar-nav > li > a:hover {
-  background-color: #fff;
+    background-color: #fff;
 }
 
-.navbar-nav > li.active > a,
+.navbar-nav > li.active > a , 
 .navbar-nav > li.active:hover {
-  color: #2a6496 !important;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  height: 50px;
-  border-bottom: 4px solid #428bca;
+    color: #2a6496 !important;
+    box-sizing:border-box;
+    -moz-box-sizing:border-box;
+    -webkit-box-sizing:border-box;
+    height: 50px;
+    border-bottom: 4px solid #428bca ;
 }
-
 .navbar-nav > .active:hover {
-  color: #2a6496;
-}
-
-/* KBase navigation bar */
-.navbar-kbase {
-  background-color: #fff;
-  border-bottom: 1px solid #e0e0e0;
-  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
-  -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
-  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
-}
-
-.nav > li > a:hover,
-.nav > li > a:focus {
-  text-decoration: none;
+    color: #2a6496;
 }
 
-/* END KBase navigation bar */
-
 #wrap {
   min-height: 100%;
   height: auto;
-
   /* Negative indent footer by its height */
   margin: 0 auto -58px;
-
   /* Pad bottom by footer height */
   padding: 0 0 80px;
 }
-
 /* for the footer */
 #footer {
-  height: 58px;
+   /* margin-top: 60px;
+    position: relative;
+    bottom: 0px; */
+    height: 58px;
 }
 
 #footer ul {
-  text-align: center;
+    text-align: center;
 }
 
 #footer ul li {
-  display: inline;
-  padding: 7px 5px 5px 1px;
+    display: inline;
+    padding: 7px 5px 5px 1px;
+    
 }
 
-#footer ul li::after {
-  content: "\2022";
-  padding-left: 10px;
-  color: #bbb;
-  font-size: 10px;
+#footer ul li:after {
+    content: "\2022";
+    padding-left: 10px;
+    color: #bbb;
+    font-size: 10px;
 }
 
-#footer ul li:last-child::after,
-#footer ul li:nth-last-child(2)::after {
-  content: "";
+#footer ul li:last-child:after, #footer ul li:nth-last-child(2):after {
+    content: "";
 }
 
 #footer img {
-  position: relative;
-  top: -3px;
+    position: relative;
+    top: -3px;
 }
 
 #footer .disclaimer {
-  background-color: #a94442;
-  color: #fff;
-  display: block;
-  text-align: center;
-  font-weight: bold;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
+    /*background-color: #f2dede;
+    border-top: 1px solid #ebccd1;
+    color: #a94442;*/
+    background-color: #a94442;
+    color: #fff;
+    display: block;
+    text-align: center;
+    font-weight: bold;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
 }
 
 .KBSnode rect {
-  cursor: pointer;
-  fill: #fff;
-  fill-opacity: 0.5;
-  stroke: #3182bd;
-  stroke-width: 1.5px;
+    cursor: pointer;
+    fill: #fff;
+    fill-opacity: .5;
+    stroke: #3182bd;
+    stroke-width: 1.5px;
 }
 
 .KBSnode text {
-  font: 80% sans-serif;
-  pointer-events: none;
+    font: 80% sans-serif;
+    pointer-events: none;
 }
+
+
+
diff --git a/kbase-extension/static/kbase/css/methodCell.css b/kbase-extension/static/kbase/css/methodCell.css
index f5bddbd8a8..4744a5ed6b 100644
--- a/kbase-extension/static/kbase/css/methodCell.css
+++ b/kbase-extension/static/kbase/css/methodCell.css
@@ -1,15 +1,15 @@
 .kb-method-cell select.form-control {
-  margin: 0;
+    margin: 0;
 }
 
 .twitter-typeahead {
-  width: 100%;
+    width: 100%;
 }
 
 .code_cell div.input_area {
-  display: none;
+    display: none;
 }
 
 .code_cell div.input_area.-show {
-  display: block;
-}
+    display: block;
+}
\ No newline at end of file
diff --git a/kbase-extension/static/kbase/css/widgets.css b/kbase-extension/static/kbase/css/widgets.css
index 2682c29364..0294412173 100644
--- a/kbase-extension/static/kbase/css/widgets.css
+++ b/kbase-extension/static/kbase/css/widgets.css
@@ -1,16 +1,16 @@
 /* tab.js */
 
 .nav-tabs .glyphicon-remove {
-  margin: 0 0 0 3px;
-  color: #aaa;
+    margin: 0 0 0 3px;
+    color: #aaa;
 }
 
 .nav-tabs .glyphicon-remove:hover {
-  color: #666;
-  cursor: hand;
-  cursor: pointer;
+    color: #666;
+    cursor: hand;
+    cursor: pointer;
 }
 
 .twitter-typeahead {
-  width: 100%;
-}
+    width: 100%;
+}
\ No newline at end of file
diff --git a/kbase-extension/static/kbase/custom/custom.css b/kbase-extension/static/kbase/custom/custom.css
index 332509350d..6e1d1362cd 100644
--- a/kbase-extension/static/kbase/custom/custom.css
+++ b/kbase-extension/static/kbase/custom/custom.css
@@ -6,297 +6,352 @@ CSS should go in /kbase-extension/static/kbase/css/kbaseNarrative.css
 */
 @font-face {
   font-family: 'Glyphicons Halflings';
+
   src: url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot');
   src: url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
 }
 
 .select2-container--default .select2-results__option--highlighted[aria-selected] {
-  background-color: #337ab7;
-  color: #fff;
+    background-color: #337ab7;
+    color: #FFF;
 }
 
 .select2-container--default .select2-results__option--highlighted[aria-selected] span {
-  color: #fff !important;
+    color: #FFF !important;
 }
 
 #site {
-  overflow: visible;
+    overflow: visible;
 }
 
+
 /* disable the standard notebook, bottom spacer */
 
-#notebook > .end_space {
-  min-height: 0;
-  height: 0;
+#notebook>.end_space {
+    min-height: 0;
+    height: 0;
 }
 
 @media (min-width: 1200px) {
-  #notebook-container {
-    width: auto;
-  }
+    #notebook-container {
+        width: auto;
+    }
 }
 
 @media (min-width: 992px) {
-  #notebook-container {
-    width: auto;
-  }
+    #notebook-container {
+        width: auto;
+    }
 }
 
 @media (min-width: 768px) {
-  #notebook-container {
-    width: auto;
-  }
+    #notebook-container {
+        width: auto;
+    }
 }
 
 .notebook_app {
-  overflow-y: hidden;
-  background-color: #fff;
+    overflow-y: hidden;
+    background-color: #FFFFFF;
 }
 
+
+/* .btn * { color: black; } */
+
 .celltoolbar {
-  height: auto;
-  background: none;
-  border: none;
-  border-left: 1px solid transparent;
-  padding-top: 0;
-  padding-bottom: 2px;
+    height: auto;
+    background: none;
+    border: none;
+    border-left: 1px solid transparent;
+    padding-top: 0;
+    padding-bottom: 2px;
 }
 
-.input_area {
-  border: 1px solid #cecece;
-  border-radius: 0;
-
-  /* a little padding to match the prompt */
-  padding-top: 4px;
+div.input_area {
+    border: 1px solid #CECECE;
+    border-radius: 0px;
+    /* a little padding to match the prompt */
+    padding-top: 4px;
 }
 
-.output_subarea {
-  max-width: inherit;
+div.output_subarea {
+    max-width: inherit;
 }
 
-.text_cell_input {
-  border: 1px solid #cecece;
-  border-radius: 0;
+div.text_cell_input {
+    border: 1px solid #CECECE;
+    border-radius: 0px;
 }
 
 div.cell {
-  margin: 8px 0 8px 0;
-  padding: 0;
-  border: 1px solid #ccc;
-  border-left: 5px solid #ccc;
-  border-radius: 0;
+    margin: 8px 0 8px 0px;
+    padding: 0;
+    border: 1px solid #CCC;
+    border-left: 5px solid #CCC;
+    border-radius: 0;
 }
 
 div.cell.selected {
-  margin-left: 0;
-  border: 1px solid #4bb856;
-  border-left: 5px solid #4bb856;
-  padding-left: 0;
-  background: none;
-  -webkit-transition: box-shadow 0.2s ease-in-out;
-  -moz-transition: box-shadow 0.2s ease-in-out;
-  -o-transition: box-shadow 0.2s ease-in-out;
-  transition: box-shadow 0.2s ease-in-out;
-  -webkit-box-shadow: 0 1px 2px #aaa, 0 5px 5px #aaa;
-  -moz-box-shadow: 0 1px 2px #aaa, 0 5px 5px #aaa;
-  box-shadow: 0 1px 2px #aaa, 0 5px 5px #aaa;
+    margin-left: 0;
+    border: 1px solid #4BB856;
+    border-left: 5px solid #4BB856;
+    padding-left: 0px;
+    background-color: #E8EFFF;
+    background: none;
+    transition: box-shadow 0.2s ease-in-out;
+    -moz-transition: box-shadow 0.2s ease-in-out;
+    -webkit-transition: box-shadow 0.2s ease-in-out;
+    box-shadow: 0px 1px 2px #aaa, 0 5px 5px #aaa;
+    -moz-box-shadow: 0px 1px 2px #aaa, 0 5px 5px #aaa;
+    -webkit-box-shadow: 0px 1px 2px #aaa, 0 5px 5px #aaa;
 }
 
-div.cell.selected::before {
-  background: none;
+div.cell.selected:before {
+    background: none;
 }
 
 div.cell.opened {
-  padding-top: 0;
+    padding-top: 0px;
 }
 
 .edit_mode div.cell.selected {
-  border-left: 5px solid #66bb6a;
-  background: none;
-  padding-left: 0;
+    border-left: 5px solid #66BB6A;
+    background: none;
+    padding-left: 0px;
 }
 
 div.cell.selected.kb-error {
-  border: 1px solid #d9534f;
-  border-left: 5px solid #d9534f;
+    border: 1px solid #d9534f;
+    border-left: 5px solid #d9534f;
 }
 
-#notebook {
-  padding: 0;
+div#notebook {
+    padding: 0;
 }
 
-#notebook_name {
-  color: #006698;
+span#notebook_name {
+    color: #006698;
 }
 
-#notebook_name:hover {
-  cursor: pointer;
-  background-color: #e0e0e0;
+span#notebook_name:hover {
+    cursor: pointer;
+    background-color: #e0e0e0;
 }
 
-#notebook-container {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  width: auto;
-  min-width: 460px;
-  position: fixed;
-  left: 380px;
-  top: 70px;
-  right: 0;
-  bottom: 0;
-  overflow: auto;
+.prompt {
+    min-width: 10ex;
+    padding-top: 10px;
 }
 
-#notebook-container::after {
-  content: "";
-  height: 100px;
-  display: block;
+#notebook-container {
+    box-shadow: none;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    width: auto;
+    min-width: 460px;
+    position: fixed;
+    left: 380px;
+    top: 70px;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
 }
-
-.prompt {
-  display: none !important;
+#notebook-container:after{
+    content: "";
+    height: 100px;
+    display:block;
 }
 
+
 /* margin left doesn't really seeem to play well */
 
 .btn-toolbar {
-  margin-left: 0;
-  padding-left: 0;
+    margin-left: 0;
+    padding-left: -5px;
 }
 
 .kb-narr-side-panel .btn-group .btn {
-  padding: 3px 4px 3px 4px;
-  font-size: 16px;
+    padding: 3px 4px 3px 4px;
+    font-size: 16px;
 }
 
 .btn-subtle {
-  color: #888;
-  margin: 0;
+    color: #888;
+    margin: 0px
 }
 
 .btn-subtle .fa {
-  color: #888;
+    color: #888;
 }
 
 .btn-subtle .fa::before {
-  color: #888;
+    color: #888;
 }
 
 .notebook_app .btn.active {
-  box-shadow: none;
-}
-
-.kb-btn-icon {
-  display: inline-block;
-  padding: 4px;
-}
-
-.kb-btn-icon .fa {
-  opacity: 0.5;
+    box-shadow: none;
 }
 
-.kb-btn-icon:hover .fa {
-  opacity: 1;
-}
 
 /* Fooling around with the narrative cells */
 
 .notebook_app .inner_cell {
-  overflow: visible;
+    overflow: visible;
 }
 
-.notebook_app .celltoolbar > .button_container {
-  flex: 0 auto;
+.notebook_app .celltoolbar>.button_container {
+    flex: 0 auto;
 }
 
-.notebook_app .celltoolbar > .button_container:nth-child(1) {
-  flex: auto;
+.notebook_app .celltoolbar>.button_container:nth-child(1) {
+    flex: auto;
 }
 
 .notebook_app .celltoolbar_container {
-  border-bottom: 1px silver solid;
+    border-bottom: 1px silver solid;
+}
+
+.notebook_app .prompt {
+    padding-top: 0px;
+    color: silver;
+    width: 75px;
 }
 
-.notebook_app .cell.unselected .text_cell_render {
-  border: 1px solid transparent;
+.notebook_app .cell.unselected div.text_cell_render {
+    border: 1px solid transparent;
 }
 
-.notebook_app .cell.selected .text_cell_render {
-  border: 1px solid transparent;
+.notebook_app .cell.selected div.text_cell_render {
+    border: 1px solid transparent;
 }
 
 .notebook_app .buttons .dropdown-menu {
-  height: auto !important;
-  overflow: visible !important;
+    height: auto !important;
+    overflow: visible !important;
 }
 
 .notebook_app .btn.disabled .fa {
-  color: silver;
+    color: silver;
+}
+
+.text_cell.kb-cell .rendered_html table {
+    border: 1px solid #ddd;
+}
+
+.text_cell.kb-cell .rendered_html ul {
+    margin: 0;
+}
+
+.text_cell.opened.rendered.kb-cell .rendered_html {
+    padding: 0;
+    border: 0;
+}
+
+.text_cell.opened.rendered.selected.kb-cell .rendered_html {
+    border-left: 1px solid #4BB856;
+}
+
+.text_cell.opened.rendered.selected.kb-cell.kb-error .rendered_html {
+    border-left: 1px solid #d9534f;
+}
+
+.text_cell.opened.rendered.kb-cell {
+    padding-bottom: 0;
 }
 
 .rendered_html tr,
 .rendered_html th,
 .rendered_html td {
-  text-align: inherit;
+    text-align: inherit;
 }
 
 .rendered_html table {
-  table-layout: inherit;
+    table-layout: inherit;
 }
 
-.text_cell.kb-cell .rendered_html table {
-  border: 1px solid #ddd;
+/* narrative cell icons */
+
+.cell.selected .prompt .method-icon {
+    color: rgb(103, 58, 183);
 }
 
-.text_cell.kb-cell .rendered_html ul {
-  margin: 0;
+.cell.selected .prompt .app-icon {
+    color: rgb(0, 150, 136);
+}
+
+.cell.selected .prompt .markdown-icon {
+    color: #000;
+}
+
+.cell.selected .prompt .app-output-icon {
+    color: #000;
+}
+
+.cell.selected .prompt .method-output-icon {
+    color: #000;
 }
 
-.text_cell.kb-cell.opened.rendered .rendered_html {
-  padding: 0;
-  border: 0;
+.cell.selected .prompt .data-viewer-icon {
+    color: #000;
 }
 
-.text_cell.kb-cell.opened.rendered.selected .rendered_html {
-  border-left: 1px solid #4bb856;
+.cell.selected .prompt .error-icon {
+    color: red;
 }
 
-.text_cell.kb-cell.opened.rendered.selected.kb-error .rendered_html {
-  border-left: 1px solid #d9534f;
+.cell.selected .prompt.input_prompt {
+    color: #303F9F;
 }
 
-.text_cell.kb-cell.opened.rendered {
-  padding-bottom: 0;
+.cell.selected .prompt.output_prompt {
+    color: #D84315;
 }
 
-.cell > .inner_cell > .ctb_hideshow {
-  display: block;
+.cell>.inner_cell>.ctb_hideshow {
+    display: block;
 }
 
 .cell.selected .btn-default {
-  color: #000;
+    color: #000;
 }
 
 .cell.unselected .btn-default {
-  color: #ccc;
+    color: #CCC;
 }
 
 .cell.unselected .kb-cell-toolbar .title-container {
-  opacity: 0.5;
+    opacity: 0.5;
 }
 
 .cell.unselected .kb-cell-toolbar .buttons-container {
-  opacity: 0.2;
+    opacity: 0.2;
 }
 
+.kb-btn-icon {
+    display: inline-block;
+    padding: 4px;
+}
+
+.kb-btn-icon .fa {
+    opacity: 0.5
+}
+
+.kb-btn-icon:hover .fa {
+    opacity: 1.0
+}
+
+
 /*
   For some reason Jupyter removes the bottom margin. This causes problems with
    bootstrap, since bootstrap removes the top margin!
 */
 
 p {
-  margin-bottom: 9px;
+    margin-bottom: 9px;
+}
+
+.prompt {
+    display: none !important;
 }
 
 /*
@@ -304,20 +359,19 @@ p {
  * Cool though this is, it's a problem on app cells.
  * This hunk of CSS should remove it until we can better work it in to our design.
  */
-
-.run_this_cell {
-  padding: 0 !important;
-  width: 0 !important;
+div.code_cell:hover .run_this_cell {
+    visibility: hidden !important;
 }
 
-.code_cell:hover .run_this_cell {
-  visibility: hidden !important;
+div.code_cell:hover div.input_prompt.run_this_cell {
+    visibility: hidden !important;
 }
 
-.code_cell:hover .input_prompt.run_this_cell {
-  visibility: hidden !important;
+div.code_cell div.input_prompt {
+    min-width: 0;
 }
 
-.code_cell .input_prompt {
-  min-width: 0;
+.run_this_cell {
+    padding: 0 !important;
+    width: 0 !important;
 }
diff --git a/nbextensions/advancedViewCell/main.js b/nbextensions/advancedViewCell/main.js
index 84e05bea6d..1c3bfe73c1 100644
--- a/nbextensions/advancedViewCell/main.js
+++ b/nbextensions/advancedViewCell/main.js
@@ -9,7 +9,7 @@
  * In this model, the execution of the module the first time per session is the same
  * as creating a global management object.
  *
- * Thus we do things like create a message bus
+ * Thus we do things like createa a message bus
  *
  * @param {type} $
  * @param {type} Jupyter
@@ -31,9 +31,11 @@ define([
     'common/appUtils',
     'common/jupyter',
     'common/spec',
+    //    './widgets/codeCellRunWidget',
     'kb_service/utils',
     'kb_service/client/workspace',
     'css!kbase/css/appCell.css',
+    'css!./styles/main.css',
     'bootstrap',
     'custom/custom'
 ], function(
diff --git a/nbextensions/advancedViewCell/styles/main.css b/nbextensions/advancedViewCell/styles/main.css
new file mode 100644
index 0000000000..a3b6a27270
--- /dev/null
+++ b/nbextensions/advancedViewCell/styles/main.css
@@ -0,0 +1,13 @@
+/*
+To change this license header, choose License Headers in Project Properties.
+To change this template file, choose Tools | Templates
+and open the template in the editor.
+*/
+/* 
+    Created on : Jul 14, 2016, 2:31:08 PM
+    Author     : erik
+*/
+
+.kb-advanced-view-cell .kb-panel-container[data-element=parameters-group] > div.panel-collapse > .panel-body {
+    padding: 0;
+}
\ No newline at end of file
diff --git a/nbextensions/appCell2/main.js b/nbextensions/appCell2/main.js
index e5877bc9eb..a7b955d8ae 100644
--- a/nbextensions/appCell2/main.js
+++ b/nbextensions/appCell2/main.js
@@ -7,7 +7,7 @@
  * In this model, the execution of the module the first time per session is the same
  * as creating a global management object.
  *
- * Thus we do things like create a message bus
+ * Thus we do things like createa a message bus
  *
  * @param {type} $
  * @param {type} Jupyter
@@ -26,6 +26,7 @@ define([
     'kb_service/client/workspace',
     './appCell',
     'css!kbase/css/appCell.css',
+    'css!./styles/main.css',
     'bootstrap',
     'custom/custom'
 ], function(
diff --git a/nbextensions/appCell2/styles/main.css b/nbextensions/appCell2/styles/main.css
new file mode 100644
index 0000000000..1bc7b8aaef
--- /dev/null
+++ b/nbextensions/appCell2/styles/main.css
@@ -0,0 +1,10 @@
+/*
+To change this license header, choose License Headers in Project Properties.
+To change this template file, choose Tools | Templates
+and open the template in the editor.
+*/
+/* 
+    Created on : Jul 14, 2016, 2:30:47 PM
+    Author     : erik
+*/
+
diff --git a/nbextensions/editorCell/main.js b/nbextensions/editorCell/main.js
index 001c995539..0c519c212f 100644
--- a/nbextensions/editorCell/main.js
+++ b/nbextensions/editorCell/main.js
@@ -34,6 +34,7 @@ define([
     'kb_service/client/workspace',
 
     'css!kbase/css/appCell.css',
+    'css!./styles/main.css',
     'bootstrap',
     'custom/custom'
 ], function(
diff --git a/nbextensions/editorCell/styles/main.css b/nbextensions/editorCell/styles/main.css
new file mode 100644
index 0000000000..a4fcfb1dc8
--- /dev/null
+++ b/nbextensions/editorCell/styles/main.css
@@ -0,0 +1,419 @@
+/* Wrapper class
+  All classes below may be wrapped in this class to avoid polluting
+  the Narrative styles.
+*/
+.kb-editor-cell {
+
+}
+
+.kb-editor-cell .kb-app-warning {
+    font-family: 'Oxygen', sans-serif;
+    text-align: center;
+}
+
+/** new app parameter styling **/
+.kb-editor-cell  .kb-app-parameter-panel {
+    border-left: 3px solid #fff;
+}
+.kb-editor-cell  .kb-app-parameter-panel-hover {
+    border-left: 3px solid #428bca;
+}
+.kb-editor-cell .kb-app-parameter-row {
+    margin:0px;
+}
+/* for some reason, the css :hover doesn't work right on this div, so we use jquery to toggle this class */
+.kb-editor-cell .kb-app-parameter-row-hover {
+    background:#F9F9F9;
+}
+
+.kb-editor-cell  .kb-app-parameter-row .message.-error {
+    background: #f2dede;
+}
+.kb-editor-cell  .kb-app-parameter-row .message.-warning {
+    xbackground: yellow;
+}
+.kb-editor-cell .kb-app-parameter-row .message {
+    text-align: center;
+    font-family: 'Oxygen', sans-serif;
+    /* font-size: 9pt; */
+}
+
+.kb-editor-cell .kb-app-parameter-row .message.-error {
+    color: #F44336;
+}
+.kb-editor-cell .kb-app-parameter-row .message.-warning {
+    xcolor: orange;
+}
+
+/* not sure how to get text in these divs to valign middle... */
+.kb-editor-cell .kb-app-parameter-name {
+    font-family: 'Oxygen', sans-serif;
+    color: #777;
+    text-align: left;
+    vertical-align: bottom;
+    xmargin-top: 3px;
+    padding-right: 4px;
+    padding-left: 0px;
+    white-space: normal;
+    xborder-bottom: 1px #ddd dotted;
+}
+.kb-editor-cell .kb-app-parameter-input {
+    vertical-align:middle;
+    xwhite-space: nowrap;
+    xpadding-left:10px;
+    xborder-bottom: 1px #ccc dotted;
+}
+.kb-editor-cell .kb-app-parameter-input input {
+    xfont-weight: bold;
+}
+
+.kb-editor-cell .kb-app-parameter-input select.form-control {
+    margin: 0;
+}
+
+/*
+This set of styles is a to accomodate the required/satisfied icon which appears
+between the select input control and the help text to the right of it. The
+problem is that within the columns used for layout the select is set to 100% width
+and yet the icon is placed right next to it. The result is that the icon is shoved
+to the right of the select control and into the next column, overlapping the
+help text. The old app handling this was to scoot the help text far enough over
+to accomodate the the icon intruding into its space. This technique makes space
+in the column in which the icon lives, and does this by shrinking the select
+control with padding, and then scooting the icon back into its column.
+*/
+/* .kb-editor-cell .kb-app-parameter-input > div {
+     allow space for the required (red arrow), satisfied (green checkbox) icon
+    padding-right: 20px;
+}
+*/
+.kb-editor-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph,
+.kb-editor-cell .kb-app-parameter-input .kb-app-parameter-required-glyph {
+    /* This scoots the icon inside */
+    font-size: 15px;
+    margin-left: 0;
+}
+.kb-editor-cell .kb-app-parameter-required-glyph {
+    color: #F44336;
+}
+.kb-editor-cell .kb-app-parameter-hint {
+    padding-left: 7px;
+}
+
+.kb-editor-cell .kb-parameter-data-selection {
+    font-weight: bold;
+}
+
+.kb-editor-cell .kb-app-parameter-hint {
+    color: #777;
+    text-align:left;
+    margin-top:3px;
+}
+
+.kb-editor-cell .kb-app-parameter-accepted-glyph {
+    color: #4BB856;
+}
+
+.kb-editor-cell .kb-app-parameter-info {
+    color: #777;
+}
+
+.kb-editor-cell .kb-parameter-data-row-remove {
+    color: #777;
+}
+.kb-editor-cell .kb-parameter-data-row-add {
+    color: #777;
+}
+
+
+.kb-editor-cell .kb-app-advanced-options-controller-inactive {
+    font-family: 'Oxygen', sans-serif;
+    font-weight: bold;
+    font-style: italic;
+    font-size: 10pt;
+    line-height: 14px;
+    color: #777;
+    text-align: center;
+}
+.kb-editor-cell .kb-app-advanced-options-controller {
+    font-family: 'Oxygen', sans-serif;
+    font-weight: bold;
+    cursor:pointer;
+    font-style: italic;
+    font-size: 10pt;
+    line-height: 14px;
+    color: #0088cc;
+    text-align: center;
+}
+.kb-editor-cell .kb-app-advanced-options-controller:hover {
+    color: #2a6496;
+}
+
+.kb-editor-cell .kb-app-footer {
+    width: 100%;
+    overflow: none;
+    background-color: #F5F5F5;
+    padding: 10px;
+}
+
+.kb-editor-cell .kb-app-subtitle {
+    background-color: #F5F5F5;
+    padding: 3px 5px;
+}
+
+.kb-editor-cell .kb-app-subtitle {
+    background-color: #F5F5F5;
+    padding: 3px 5px;
+}
+
+
+
+.kb-editor-cell .panel-title > [data-toggle="collapse"]::before {
+    display: inline-block;
+    margin-left: 0px;
+    margin-right: 4px;
+    font-family: "FontAwesome";
+    font-style: normal;
+    font-weight: normal;
+    font-size: 90%;
+    width: 12px;
+    color: silver;
+    line-height: 1;
+    vertical-align: baseline;
+    content: "\f078 ";
+}
+.kb-editor-cell .panel-title > [data-toggle="collapse"].collapsed::before {
+    margin-left: 2px; margin-right: 2px;
+    content: "\f054 ";
+}
+
+/* tweaks to elemnts that should be dimmed when the cell is not selected */
+
+.unselected .kb-editor-cell {
+    opacity: 0.5;
+}
+
+.kb-editor-cell .advanced-parameter-showing {
+    display: block;
+}
+.kb-editor-cell .advanced-parameter-hidden {
+    display: none;
+}
+
+.kb-elapsed-time {
+    font-family: monospace;
+}
+.kb-elapsed-time.-active {
+    color: lime;
+}
+
+.kb-editor-cell-info-desc {
+    border: 1px solid #777;
+    padding: 10px;
+    margin-right: 10px;
+    min-height: 100px;
+}
+
+.kb-editor-cell-info {
+    color: #777;
+    font-family: 'Oxygen', sans-serif;
+    font-size: 12pt;
+}
+
+.kb-editor-cell-info .header {
+    border-bottom: 1px solid #777;
+    padding: 5px 0;
+    margin-bottom: 8px;
+}
+
+.kb-editor-cell-info .value {
+    color: #000;
+}
+
+
+/*
+New button color scheme
+
+blue for border, backgrounds, text: rgb(0, 147, 255))
+
+official kbase color: rgb(33,150,243)
+
+disabled color for border, text
+
+enabled run color - (green) -  rgb(2,140,10)
+official kbase green:
+
+rgb(75,184,86)
+
+or 
+
+ rgb(42,190,159) which is the lighter variant. both used in mocks (but depends where you sample).
+
+disabled run color - (green) -
+
+error color - red - rgb(209,82,65)
+
+disabled (gray) - 205,205,205
+
+warning: orange
+
+*/
+
+
+.btn.kb-editor-cell-btn {
+    color: rgb(33, 150, 243);
+    background-color: #FFF;
+    border: 2px rgb(33, 150, 243) solid;
+    margin-bottom: 4px
+}
+
+
+/* Primary Button Style */
+.btn.kb-editor-cell-btn.btn-primary {
+    color: rgb(33, 150, 243);
+    border: 2px rgb(33, 150, 243) solid;
+}
+.btn.kb-editor-cell-btn.btn-primary:hover {
+    color: #FFF;
+    background-color: rgb(33, 150, 243);
+    border-bottom: 6px rgb(33, 150, 243) solid;
+    margin-bottom: 0;
+}
+.btn.kb-editor-cell-btn.btn-primary:active {
+    color: #FFF;
+    background-color: rgb(33, 150, 243);
+}
+/* Hovering over an active cell is different, it tries to make the tab look
+   disassociated but using a gray background so it doesnt look like an inactive
+   tab */
+.btn.kb-editor-cell-btn.btn-primary.active {
+    color: white;
+    background-color: rgb(33, 150, 243);
+    border: 2px rgb(33, 150, 243) solid;
+    border-bottom: 6px rgb(33, 150, 243) solid;
+    margin-bottom: 0;
+}
+.btn.kb-editor-cell-btn.btn-primary.active:hover {
+    color: rgb(33, 150, 243);
+    background-color: #DDD;
+    border-bottom: 2px rgb(33, 150, 243) solid;
+    margin-bottom: 4px;   
+}
+
+
+
+/* DANGER - for error */
+.btn.kb-editor-cell-btn.btn-danger {
+    color: rgb(209,82,65);
+    border: 2px rgb(209,82,65) solid;
+}
+.btn.kb-editor-cell-btn.btn-danger:hover {
+   color: #FFF;
+    background-color: rgb(209,82,65);
+    border-bottom: 6px rgb(209,82,65) solid;
+    margin-bottom: 0;
+}
+.btn.kb-editor-cell-btn.btn-danger.active:hover {
+    color:  rgb(209,82,65);
+    background-color: #DDD;
+    border-bottom: 2px  rgb(209,82,65) solid;
+    margin-bottom: 4px;
+}
+.btn.kb-editor-cell-btn.btn-danger.active {
+    color: white;
+    background-color: rgb(209,82,65);
+    border: 2px rgb(209,82,65) solid;
+    border-bottom: 6px rgb(209,82,65) solid;
+    margin-bottom: 0;
+}
+.btn.kb-editor-cell-btn.btn-danger.active:hover {
+    color: rgb(209,82,65);
+    background-color: #DDD;
+    border-bottom: 2px rgb(209,82,65) solid;
+    margin-bottom: 4px;   
+}
+
+
+
+/* DISABLED is gray border and text */
+/*
+.btn.kb-editor-cell-btn.btn-primary.disabled:hover {
+    color: #888;
+    background-color: #FFF;
+    border-bottom: 2px #888 solid;
+    margin-bottom: 4px;
+}
+*/
+
+.btn.kb-editor-cell-btn.disabled, .btn.kb-editor-cell-btn.disabled:hover, .btn.kb-editor-cell-btn.disabled:active {
+    color: #888;
+    xbackground-color: #FFF;
+    border: 2px #888 solid;
+    margin-bottom: 4px;    
+}
+
+
+
+
+.kb-editor-cell [data-element="run-control-panel"] {
+    xpadding-left: 8px;
+    width: 100%;
+}
+
+.kb-editor-cell [data-element="tab-pane"] {
+    border-top: 2px rgb(33, 150, 243) solid;
+    xborder: 1px solid rgb(32, 77, 16);
+    xbackground-color: #f5f5f5;
+}
+
+.kb-editor-cell [data-element="tab-pane"] > div:empty {
+    padding: 0px;
+}
+
+.kb-editor-cell [data-element="tab-pane"] > div {
+    padding: 4px;
+}
+
+.kb-editor-cell .btn.disabled {
+    xbackground-color: #FFF;
+}
+
+.kb-editor-cell .btn-primary.kb-btn-action.-rerun {
+    color: rgb(33, 150, 243)
+}
+
+
+.kb-editor-cell .btn-primary.kb-btn-action.-run {
+    color: rgb(75,184,86)
+}
+
+
+.kb-editor-cell .btn-danger.kb-btn-action.-cancel {
+    color: rgb(209,82,65)
+}
+
+.kb-editor-cell .btn-danger.kb-btn-action.-reset {
+    color: rgb(209,82,65)
+}
+
+.kb-app-status-ok {
+    color:  rgb(75,184,86);
+}
+.kb-app-status-warning {
+    color:  orange;
+}
+.kb-app-status-danger, .kb-app-status-error {
+    color:  rgb(209,82,65);
+}
+.kb-app-status-default {
+    color:  rgb(33, 150, 243);
+}
+
+/* app cell panels */
+
+/* TODO: higher level selector */
+
+.parameter-panel .info-panel {
+    padding-top: 4px;
+    background: transparent;
+}
\ No newline at end of file
diff --git a/nbextensions/editorCell/styles/old.css b/nbextensions/editorCell/styles/old.css
new file mode 100644
index 0000000000..2a37327ff2
--- /dev/null
+++ b/nbextensions/editorCell/styles/old.css
@@ -0,0 +1,181 @@
+/* Wrapper class 
+  All classes below may be wrapped in this class to avoid polluting
+  the Narrative styles.
+*/
+.kb-app-cell {
+
+}
+
+/** new app parameter styling **/
+.kb-app-cell  .kb-app-parameter-panel {
+    border-left: 3px solid #fff;
+}
+.kb-app-cell  .kb-app-parameter-panel-hover {
+    border-left: 3px solid #428bca;
+}
+.kb-app-cell .kb-app-parameter-row {
+    margin:0px;
+    padding:5px;
+    border-radius:5px;
+}
+/* for some reason, the css :hover doesn't work right on this div, so we use jquery to toggle this class */
+.kb-app-cell .kb-app-parameter-row-hover {
+    background:#F9F9F9;
+}
+
+.kb-app-cell  .kb-app-parameter-row-error {
+    background: #f2dede;
+}
+.kb-app-cell .kb-app-parameter-error-message {
+    padding:5px;
+    text-align:center;
+    font-family: 'OxygenBold', sans-serif;
+    font-weight: bold;
+    font-size: 9pt;
+    color:#F44336;
+}
+
+
+/* not sure how to get text in these divs to valign middle... */
+.kb-app-cell .kb-app-parameter-name {
+    font-family: 'OxygenBold', sans-serif;
+    color:#777;
+    text-align:right;
+    vertical-align:middle;
+    margin-top:3px;
+    padding-right: 4px;
+    padding-left:0px;
+    white-space: normal;
+}
+.kb-app-cell .kb-app-parameter-input {
+    vertical-align:middle;
+    white-space: nowrap;
+    xpadding-left:10px;
+}
+.kb-app-cell .kb-app-parameter-input input {
+    font-weight: bold;
+}
+
+.kb-app-cell .kb-app-parameter-input select.form-control {
+    margin: 0;
+}
+
+/*
+This set of styles is a to accomodate the required/satisfied icon which appears
+between the select input control and the help text to the right of it. The
+problem is that within the columns used for layout the select is set to 100% width
+and yet the icon is placed right next to it. The result is that the icon is shoved
+to the right of the select control and into the next column, overlapping the
+help text. The old app handling this was to scoot the help text far enough over
+to accomodate the the icon intruding into its space. This technique makes space
+in the column in which the icon lives, and does this by shrinking the select
+control with padding, and then scooting the icon back into its column.
+*/
+.kb-app-cell .kb-app-parameter-input > div {
+    /* allow space for the required (red arrow), satisfied (green checkbox) icon */
+    padding-right: 20px;
+}
+.kb-app-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph,
+.kb-app-cell .kb-app-parameter-input .kb-app-parameter-required-glyph {
+    /* This scoots the icon inside */
+    font-size: 15px;
+    margin-left: 0;
+}
+.kb-app-cell .kb-app-parameter-required-glyph {
+    color: #F44336;
+}
+.kb-app-cell .kb-app-parameter-hint {
+    padding-left: 7px;
+}
+
+.kb-app-cell .kb-parameter-data-selection {
+    font-weight: bold;
+}
+
+.kb-app-cell .kb-app-parameter-hint {
+    color: #777;
+    text-align:left;
+    margin-top:3px;
+}
+
+.kb-app-cell .kb-app-parameter-accepted-glyph {
+    color: #4BB856;
+}
+
+.kb-app-cell .kb-app-parameter-info {
+    color: #777;
+}
+
+.kb-app-cell .kb-parameter-data-row-remove {
+    color: #777;
+}
+.kb-app-cell .kb-parameter-data-row-add {
+    color: #777;
+}
+
+
+.kb-app-cell .kb-app-advanced-options-controller-inactive {
+    font-family: 'OxygenBold', sans-serif;
+    font-style: italic;
+    font-size: 10pt;
+    line-height: 14px;
+    color: #777;
+    text-align: center;
+}
+.kb-app-cell .kb-app-advanced-options-controller {
+    font-family: 'OxygenBold', sans-serif;
+    cursor:pointer;
+    font-style: italic;
+    font-size: 10pt;
+    line-height: 14px;
+    color: #0088cc;
+    text-align: center;
+}
+.kb-app-cell .kb-app-advanced-options-controller:hover {
+    color: #2a6496;
+}
+
+.kb-app-cell .kb-app-footer {
+    width: 100%;
+    overflow: none;
+    background-color: #F5F5F5;
+    padding: 10px;
+}
+
+.kb-app-cell .kb-app-subtitle {
+    background-color: #F5F5F5;
+    padding: 3px 5px;
+}
+
+
+.kb-app-cell .panel-title > [data-toggle="collapse"]::before {
+    display: inline-block;
+    margin-left: 0px;
+    margin-right: 4px;
+    font-family: "FontAwesome";
+    font-style: normal;
+    font-weight: normal;
+    font-size: 90%;
+    width: 12px;
+    color: silver;
+    line-height: 1;
+    vertical-align: baseline;
+    content: "\f078 ";
+}
+.kb-app-cell .panel-title > [data-toggle="collapse"].collapsed::before {
+    margin-left: 2px; margin-right: 2px;
+    content: "\f054 ";
+}
+
+/* tweaks to elemnts that should be dimmed when the cell is not selected */
+
+.unselected .kb-app-cell {
+    opacity: 0.5;
+}
+
+.kb-app-cell .advanced-parameter-showing {
+    display: block;
+}
+.kb-app-cell .advanced-parameter-hidden {
+    display: none;
+}
\ No newline at end of file
diff --git a/nbextensions/viewCell/main.js b/nbextensions/viewCell/main.js
index 4ea1f93c4b..508d17864c 100644
--- a/nbextensions/viewCell/main.js
+++ b/nbextensions/viewCell/main.js
@@ -36,6 +36,7 @@ define([
 
     // for effect
     'css!kbase/css/appCell.css',
+    'css!./styles/main.css',
     'bootstrap',
     'custom/custom'
 ], function(
diff --git a/nbextensions/viewCell/styles/main.css b/nbextensions/viewCell/styles/main.css
new file mode 100644
index 0000000000..9643d68b1e
--- /dev/null
+++ b/nbextensions/viewCell/styles/main.css
@@ -0,0 +1,10 @@
+/*
+To change this license header, choose License Headers in Project Properties.
+To change this template file, choose Tools | Templates
+and open the template in the editor.
+*/
+/* 
+    Created on : Jul 14, 2016, 2:31:08 PM
+    Author     : erik
+*/
+

From 125e272dbcb7326c33c08386d0f7b75863b3d18a Mon Sep 17 00:00:00 2001
From: bio-boris <bioboris@github.com>
Date: Fri, 16 Oct 2020 13:37:39 -0500
Subject: [PATCH 53/61] Resize refresh button

---
 kbase-extension/static/kbase/css/kbaseNarrative.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index c2f3d51190..0d84c7eb24 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -69,8 +69,9 @@
     text-align: center;
     text-transform: uppercase;
     color: #4379B1;
-    height: 25px;
-    margin: 5px;
+    height: 35px;
+    margin: 8px;
+    padding: 8px;
     position: relative;
     top: -3px;
     letter-spacing: .5pt;

From e9ee57c97d2e4ebb779ed1c24410b4634937302e Mon Sep 17 00:00:00 2001
From: ialarmedalien <ialarmedalien@gmail.com>
Date: Fri, 16 Oct 2020 11:48:30 -0700
Subject: [PATCH 54/61] DATAUP-246: whitespace changes and reformatting of css
 files

---
 kbase-extension/static/kbase/css/appCell.css  |  519 ++-
 .../static/kbase/css/batchMode.css            |   18 +-
 .../static/kbase/css/bootstrapHelper.css      |   83 +-
 kbase-extension/static/kbase/css/buttons.css  |   45 +-
 .../static/kbase/css/contigBrowserStyles.css  |   43 +-
 .../static/kbase/css/kbaseEditor.css          |   66 +-
 .../static/kbase/css/kbaseIcons.css           |   29 +-
 .../static/kbase/css/kbaseJobLog.css          |   87 +-
 .../static/kbase/css/kbaseNarrative.css       | 3828 +++++++++--------
 .../static/kbase/css/kbaseNotify.css          |   16 +-
 .../static/kbase/css/kbaseStylesheet.css      |  254 +-
 .../static/kbase/css/kbaseTour.css            |   39 +-
 .../static/kbase/css/landing-pages.css        |  504 ++-
 .../static/kbase/css/methodCell.css           |   10 +-
 .../static/kbase/css/narrative.css            | 1073 ++---
 kbase-extension/static/kbase/css/widgets.css  |   14 +-
 .../static/kbase/custom/custom.css            |  278 +-
 nbextensions/advancedViewCell/styles/main.css |    7 +-
 nbextensions/appCell2/styles/main.css         |    4 +-
 nbextensions/editorCell/styles/main.css       |  383 +-
 nbextensions/editorCell/styles/old.css        |  187 +-
 nbextensions/viewCell/styles/main.css         |    4 +-
 22 files changed, 3892 insertions(+), 3599 deletions(-)

diff --git a/kbase-extension/static/kbase/css/appCell.css b/kbase-extension/static/kbase/css/appCell.css
index a13f6133a0..77b3e436ed 100644
--- a/kbase-extension/static/kbase/css/appCell.css
+++ b/kbase-extension/static/kbase/css/appCell.css
@@ -4,162 +4,149 @@
 */
 
 .kb-app-cell {
-    font-family: 'Oxygen', sans-serif;
+  font-family: 'Oxygen', sans-serif;
 }
 
 .kb-app-cell .kb-app-warning {
-    font-family: 'Oxygen', sans-serif;
-    text-align: center;
+  font-family: 'Oxygen', sans-serif;
+  text-align: center;
 }
 
-
 /** new app parameter styling **/
 
 .kb-app-cell .kb-app-parameter-panel {
-    border-left: 3px solid #fff;
+  border-left: 3px solid #fff;
 }
 
 .kb-app-cell .kb-app-parameter-panel-hover {
-    border-left: 3px solid #428bca;
+  border-left: 3px solid #428bca;
 }
 
 .kb-app-cell .kb-app-parameter-row {
-    margin: 0px;
-    padding: 5px;
-    border-radius: 5px;
+  margin: 0;
+  padding: 5px;
+  border-radius: 5px;
 }
 
 .kb-app-cell .kb-app-parameter-row:hover {
-    background-color: rgba(0, 0, 0, 0.03);
+  background-color: rgba(0, 0, 0, 0.03);
 }
 
 .kb-app-row-close-btn-addon {
-    background: transparent;
-    border: 0;
+  background: transparent;
+  border: 0;
 }
 
 .kb-app-row-clip-btn-addon {
-    background: transparent;
-    border: 0;
-    padding: 0;
-    padding-right: 10px;
-    height: 100%;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  padding-right: 10px;
+  height: 100%;
 }
 
-.kb-app-row-clip-btn-addon:active:after {
-    background-color: #fff;
-    border-radius: 3px;
-    border: 1px solid gray;
-    content: 'copied!';
-    margin-top: -5px;
-    padding: 7px;
-    position: absolute;
+.kb-app-row-clip-btn-addon:active::after {
+  background-color: #fff;
+  border-radius: 3px;
+  border: 1px solid gray;
+  content: 'copied!';
+  margin-top: -5px;
+  padding: 7px;
+  position: absolute;
 }
 
 .kb-input-group-wide {
-    width: 100%;
+  width: 100%;
 }
 
 .kb-input-row-flex {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .cell.selected .btn-default.kb-app-row-close-btn {
-    color: gray;
+  color: gray;
 }
 
-
 /* .cell.selected .btn-default.kb-app-row-close-btn:hover {
     color: red;
 } */
 
-.kb-app-row-clip-btn, .kb-app-row-close-btn {
-    height: 100%;
-    margin-left: 1px;
-    /* border-left: 3px solid transparent; */
-    border-right: 0;
-    border-top: 0;
-    border-bottom: 0;
-    border: none;
-    background-color: transparent;
-    color: gray;
-}
+.kb-app-row-clip-btn,
+.kb-app-row-close-btn {
+  height: 100%;
+  margin-left: 1px;
 
+  /* border-left: 3px solid transparent; */
+  border-right: 0;
+  border-top: 0;
+  border-bottom: 0;
+  border: none;
+  background-color: transparent;
+  color: gray;
+}
 
 /* let's just do this as a normal button hover effect */
 
-.kb-app-row-close-btn:hover {
-    /* border-left: 3px solid #337ab7;  this is the bootstrap link color to match to close icon  */
-    /* color: red; */
-    /* background-color: rgba(234, 126, 126, 1); */
-}
-
 .kb-app-parameter-right-error-bar {
-    /* height: 100%; */
-    height: 28px;
-    /* firefox wants it explicitly wired */
-    background: red;
-}
+  /* height: 100%; */
+  height: 28px;
 
+  /* firefox wants it explicitly wired */
+  background: red;
+}
 
 /* for some reason, the css :hover doesn't work right on this div, so we use jquery to toggle this class */
 
 .kb-app-cell .kb-app-parameter-row-hover {
-    background: #F9F9F9;
+  background: #f9f9f9;
 }
 
 .kb-app-cell .kb-app-parameter-row .message.-error {
-    background: #f2dede;
+  background: #f2dede;
 }
 
-.kb-app-cell .kb-app-parameter-row .message.-warning {}
-
 .kb-app-cell .kb-app-parameter-row .message {
-    text-align: center;
-    font-family: 'Oxygen', sans-serif;
+  text-align: center;
+  font-family: 'Oxygen', sans-serif;
 }
 
 .kb-app-cell .kb-app-parameter-row .message.-error {
-    color: #F44336;
+  color: #f44336;
 }
 
-.kb-app-cell .kb-app-parameter-row .message.-warning {}
-
-
 /* not sure how to get text in these divs to valign middle... */
 
 .kb-app-cell .kb-app-parameter-name {
-    font-family: 'Oxygen', sans-serif;
-    color: #777;
-    text-align: left;
-    vertical-align: bottom;
-    padding-right: 4px;
-    padding-left: 0px;
-    white-space: normal;
+  font-family: 'Oxygen', sans-serif;
+  color: #777;
+  text-align: left;
+  vertical-align: bottom;
+  padding-right: 4px;
+  padding-left: 0;
+  white-space: normal;
 }
 
 .kb-app-cell .kb-app-parameter-input {
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
 .kb-app-cell .kb-app-parameter-input select.form-control {
-    margin: 0;
+  margin: 0;
 }
 
 .kb-app-field-feedback {
-    background: transparent;
-    border: 0;
+  background: transparent;
+  border: 0;
 }
 
 .kb-input-group-addon {
-    background: transparent;
-    border: 0;
-    padding: 0px 0px 0px 10px;
+  background: transparent;
+  border: 0;
+  padding: 0 0 0 10px;
 }
 
-
 /*
 This set of styles is a to accomodate the required/satisfied icon which appears
 between the select input control and the help text to the right of it. The
@@ -172,7 +159,6 @@ in the column in which the icon lives, and does this by shrinking the select
 control with padding, and then scooting the icon back into its column.
 */
 
-
 /* .kb-app-cell .kb-app-parameter-input > div {
      allow space for the required (red arrow), satisfied (green checkbox) icon
     padding-right: 20px;
@@ -181,176 +167,174 @@ control with padding, and then scooting the icon back into its column.
 
 .kb-app-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph,
 .kb-app-cell .kb-app-parameter-input .kb-app-parameter-required-glyph {
-    /* This scoots the icon inside */
-    font-size: 15px;
-    margin-left: 0;
+  /* This scoots the icon inside */
+  font-size: 15px;
+  margin-left: 0;
 }
 
 .kb-app-cell .kb-app-parameter-required-glyph {
-    color: #F44336;
+  color: #f44336;
 }
 
 .kb-app-cell .kb-app-parameter-hint {
-    padding-left: 7px;
+  padding-left: 7px;
 }
 
 .kb-app-cell .kb-parameter-data-selection {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .kb-app-cell .kb-app-parameter-hint {
-    color: #777;
-    text-align: left;
-    margin-top: 3px;
+  color: #777;
+  text-align: left;
+  margin-top: 3px;
 }
 
 .kb-app-cell .kb-app-parameter-accepted-glyph {
-    color: #4BB856;
+  color: #4bb856;
 }
 
 .kb-app-cell .kb-app-parameter-info {
-    color: #777;
+  color: #777;
 }
 
 .kb-app-cell .kb-parameter-data-row-remove {
-    color: #777;
+  color: #777;
 }
 
 .kb-app-cell .kb-parameter-data-row-add {
-    color: #777;
+  color: #777;
 }
 
 .kb-app-cell .kb-app-advanced-options-controller-inactive {
-    font-family: 'Oxygen', sans-serif;
-    font-weight: bold;
-    font-style: italic;
-    font-size: 10pt;
-    line-height: 14px;
-    color: #777;
-    text-align: center;
+  font-family: 'Oxygen', sans-serif;
+  font-weight: bold;
+  font-style: italic;
+  font-size: 10pt;
+  line-height: 14px;
+  color: #777;
+  text-align: center;
 }
 
 .kb-app-cell .kb-app-advanced-options-controller {
-    font-family: 'Oxygen', sans-serif;
-    font-weight: bold;
-    cursor: pointer;
-    font-style: italic;
-    font-size: 10pt;
-    line-height: 14px;
-    color: #0088cc;
-    text-align: center;
+  font-family: 'Oxygen', sans-serif;
+  font-weight: bold;
+  cursor: pointer;
+  font-style: italic;
+  font-size: 10pt;
+  line-height: 14px;
+  color: #08c;
+  text-align: center;
 }
 
 .kb-app-cell .kb-app-advanced-options-controller:hover {
-    color: #2a6496;
+  color: #2a6496;
 }
 
 .kb-app-cell .kb-app-footer {
-    width: 100%;
-    overflow: none;
-    background-color: #F5F5F5;
-    padding: 10px;
+  width: 100%;
+  overflow: none;
+  background-color: #f5f5f5;
+  padding: 10px;
 }
 
 .kb-app-cell .kb-app-subtitle {
-    background-color: #F5F5F5;
-    padding: 3px 5px;
+  background-color: #f5f5f5;
+  padding: 3px 5px;
 }
 
 .kb-app-cell .kb-app-subtitle {
-    background-color: #F5F5F5;
-    padding: 3px 5px;
-}
-
-.report-widget .panel-title>[data-toggle="collapse"]::before {
-    display: inline-block;
-    margin-left: 0px;
-    margin-right: 4px;
-    font-family: "FontAwesome";
-    font-style: normal;
-    font-weight: normal;
-    font-size: 90%;
-    width: 12px;
-    color: silver;
-    line-height: 1;
-    vertical-align: baseline;
-    content: "\f078 ";
-}
-
-.report-widget .panel-title>[data-toggle="collapse"].collapsed::before {
-    margin-left: 2px;
-    margin-right: 2px;
-    content: "\f054 ";
-}
-
-.kb-app-cell .panel-title>[data-toggle="collapse"]::before {
-    display: inline-block;
-    margin-left: 0px;
-    margin-right: 4px;
-    font-family: "FontAwesome";
-    font-style: normal;
-    font-weight: normal;
-    font-size: 90%;
-    width: 12px;
-    color: silver;
-    line-height: 1;
-    vertical-align: baseline;
-    content: "\f078 ";
+  background-color: #f5f5f5;
+  padding: 3px 5px;
+}
+
+.report-widget .panel-title > [data-toggle="collapse"]::before {
+  display: inline-block;
+  margin-left: 0;
+  margin-right: 4px;
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  width: 12px;
+  color: silver;
+  line-height: 1;
+  vertical-align: baseline;
+  content: "\f078 ";
+}
+
+.report-widget .panel-title > [data-toggle="collapse"].collapsed::before {
+  margin-left: 2px;
+  margin-right: 2px;
+  content: "\f054 ";
+}
+
+.kb-app-cell .panel-title > [data-toggle="collapse"]::before {
+  display: inline-block;
+  margin-left: 0;
+  margin-right: 4px;
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  width: 12px;
+  color: silver;
+  line-height: 1;
+  vertical-align: baseline;
+  content: "\f078 ";
+}
+
+.kb-app-cell .panel-title > [data-toggle="collapse"].collapsed::before {
+  margin-left: 2px;
+  margin-right: 2px;
+  content: "\f054 ";
 }
 
-.kb-app-cell .panel-title>[data-toggle="collapse"].collapsed::before {
-    margin-left: 2px;
-    margin-right: 2px;
-    content: "\f054 ";
-}
-
-
 /* tweaks to elemnts that should be dimmed when the cell is not selected */
 
 .unselected .kb-app-cell {
-    opacity: 0.5;
+  opacity: 0.5;
 }
 
 .kb-app-cell .advanced-parameter-showing {
-    display: block;
+  display: block;
 }
 
 .kb-app-cell .advanced-parameter-hidden {
-    display: none;
+  display: none;
 }
 
 .kb-elapsed-time {
-    font-family: monospace;
+  font-family: monospace;
 }
 
 .kb-elapsed-time.-active {
-    color: lime;
+  color: lime;
 }
 
 .kb-app-cell-info-desc {
-    border: 1px solid #777;
-    padding: 10px;
-    margin-right: 10px;
-    min-height: 100px;
+  border: 1px solid #777;
+  padding: 10px;
+  margin-right: 10px;
+  min-height: 100px;
 }
 
 .kb-app-cell-info {
-    color: #777;
-    font-family: 'Oxygen', sans-serif;
-    font-size: 12pt;
+  color: #777;
+  font-family: 'Oxygen', sans-serif;
+  font-size: 12pt;
 }
 
 .kb-app-cell-info .header {
-    border-bottom: 1px solid #777;
-    padding: 5px 0;
-    margin-bottom: 8px;
+  border-bottom: 1px solid #777;
+  padding: 5px 0;
+  margin-bottom: 8px;
 }
 
 .kb-app-cell-info .value {
-    color: #000;
+  color: #000;
 }
 
-
 /*
 New button color scheme
 
@@ -380,41 +364,40 @@ warning: orange
 */
 
 .btn.batch-active {
-    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
-    -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
-    background-color: #EEE;
-    border-color: #adadad;
+  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
+  -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125);
+  background-color: #eee;
+  border-color: #adadad;
 }
 
 .btn.batch-active:hover {
-    background-color: #CCC;
+  background-color: #ccc;
 }
 
 .btn.kb-app-cell-btn {
-    color: rgb(33, 150, 243);
-    background-color: #FFF;
-    border: 2px rgb(33, 150, 243) solid;
-    margin-bottom: 4px
+  color: rgb(33, 150, 243);
+  background-color: #fff;
+  border: 2px rgb(33, 150, 243) solid;
+  margin-bottom: 4px;
 }
 
-
 /* Primary Button Style */
 
 .btn.kb-app-cell-btn.btn-primary {
-    color: rgb(33, 150, 243);
-    border: 2px rgb(33, 150, 243) solid;
+  color: rgb(33, 150, 243);
+  border: 2px rgb(33, 150, 243) solid;
 }
 
 .btn.kb-app-cell-btn.btn-primary:hover {
-    color: #FFF;
-    background-color: rgb(33, 150, 243);
-    border-bottom: 6px rgb(33, 150, 243) solid;
-    margin-bottom: 0;
+  color: #fff;
+  background-color: rgb(33, 150, 243);
+  border-bottom: 6px rgb(33, 150, 243) solid;
+  margin-bottom: 0;
 }
 
 .btn.kb-app-cell-btn.btn-primary:active {
-    color: #FFF;
-    background-color: rgb(33, 150, 243);
+  color: #fff;
+  background-color: rgb(33, 150, 243);
 }
 
 /* Hovering over an active cell is different, it tries to make the tab look
@@ -422,61 +405,58 @@ warning: orange
    tab */
 
 .btn.kb-app-cell-btn.btn-primary.active {
-    color: white;
-    background-color: rgb(33, 150, 243);
-    border: 2px rgb(33, 150, 243) solid;
-    border-bottom: 6px rgb(33, 150, 243) solid;
-    margin-bottom: 0;
+  color: white;
+  background-color: rgb(33, 150, 243);
+  border: 2px rgb(33, 150, 243) solid;
+  border-bottom: 6px rgb(33, 150, 243) solid;
+  margin-bottom: 0;
 }
 
 .btn.kb-app-cell-btn.btn-primary.active:hover {
-    color: rgb(33, 150, 243);
-    background-color: #DDD;
-    border-bottom: 2px rgb(33, 150, 243) solid;
-    margin-bottom: 4px;
+  color: rgb(33, 150, 243);
+  background-color: #ddd;
+  border-bottom: 2px rgb(33, 150, 243) solid;
+  margin-bottom: 4px;
 }
 
-
 /* DANGER - for error */
 
 .btn.kb-app-cell-btn.btn-danger {
-    color: rgb(209, 82, 65);
-    border: 2px rgb(209, 82, 65) solid;
+  color: rgb(209, 82, 65);
+  border: 2px rgb(209, 82, 65) solid;
 }
 
 .btn.kb-app-cell-btn.btn-danger:hover {
-    color: #FFF;
-    background-color: rgb(209, 82, 65);
-    border-bottom: 6px rgb(209, 82, 65) solid;
-    margin-bottom: 0;
+  color: #fff;
+  background-color: rgb(209, 82, 65);
+  border-bottom: 6px rgb(209, 82, 65) solid;
+  margin-bottom: 0;
 }
 
 .btn.kb-app-cell-btn.btn-danger.active:hover {
-    color: rgb(209, 82, 65);
-    background-color: #DDD;
-    border-bottom: 2px rgb(209, 82, 65) solid;
-    margin-bottom: 4px;
+  color: rgb(209, 82, 65);
+  background-color: #ddd;
+  border-bottom: 2px rgb(209, 82, 65) solid;
+  margin-bottom: 4px;
 }
 
 .btn.kb-app-cell-btn.btn-danger.active {
-    color: white;
-    background-color: rgb(209, 82, 65);
-    border: 2px rgb(209, 82, 65) solid;
-    border-bottom: 6px rgb(209, 82, 65) solid;
-    margin-bottom: 0;
+  color: white;
+  background-color: rgb(209, 82, 65);
+  border: 2px rgb(209, 82, 65) solid;
+  border-bottom: 6px rgb(209, 82, 65) solid;
+  margin-bottom: 0;
 }
 
 .btn.kb-app-cell-btn.btn-danger.active:hover {
-    color: rgb(209, 82, 65);
-    background-color: #DDD;
-    border-bottom: 2px rgb(209, 82, 65) solid;
-    margin-bottom: 4px;
+  color: rgb(209, 82, 65);
+  background-color: #ddd;
+  border-bottom: 2px rgb(209, 82, 65) solid;
+  margin-bottom: 4px;
 }
 
-
 /* DISABLED is gray border and text */
 
-
 /*
 .btn.kb-app-cell-btn.btn-primary.disabled:hover {
     color: #888;
@@ -489,104 +469,103 @@ warning: orange
 .btn.kb-app-cell-btn.disabled,
 .btn.kb-app-cell-btn.disabled:hover,
 .btn.kb-app-cell-btn.disabled:active {
-    color: #888;
-    background-color: #FFF;
-    border: 2px #888 solid;
-    margin-bottom: 4px;
+  color: #888;
+  background-color: #fff;
+  border: 2px #888 solid;
+  margin-bottom: 4px;
 }
 
 .kb-app-cell [data-element="run-control-panel"] {
-    width: 100%;
+  width: 100%;
 }
 
 .kb-app-cell [data-element="tab-pane"] {
-    border-top: 2px rgb(33, 150, 243) solid;
+  border-top: 2px rgb(33, 150, 243) solid;
 }
 
-.kb-app-cell [data-element="tab-pane"]>div:empty {
-    padding: 0px;
+.kb-app-cell [data-element="tab-pane"] > div:empty {
+  padding: 0;
 }
 
-.kb-app-cell [data-element="tab-pane"]>div {
-    padding: 4px;
+.kb-app-cell [data-element="tab-pane"] > div {
+  padding: 4px;
 }
 
 .kb-app-status-ok {
-    color: rgb(75, 184, 86);
+  color: rgb(75, 184, 86);
 }
 
 .kb-app-status-warning {
-    color: orange;
+  color: orange;
 }
 
 .kb-app-status-danger,
 .kb-app-status-error {
-    color: rgb(209, 82, 65);
+  color: rgb(209, 82, 65);
 }
 
 .kb-app-status-default {
-    color: rgb(33, 150, 243);
+  color: rgb(33, 150, 243);
 }
 
-
 /* app cell panels */
 
-
 /* TODO: higher level selector */
 
 .parameter-panel .info-panel {
-    padding-top: 4px;
-    background: transparent;
+  padding-top: 4px;
+  background: transparent;
 }
 
 .tt-input,
 .tt-query {
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    width: 100%
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  width: 100%;
 }
 
 .tt-hint {
-    color: #999
+  color: #999;
 }
 
 .tt-menu {
-    /* used to be tt-dropdown-menu in older versions */
-    margin-top: 4px;
-    padding: 4px 0;
-    background-color: #fff;
-    border: 1px solid #ccc;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-    width: 100%
+  /* used to be tt-dropdown-menu in older versions */
+  margin-top: 4px;
+  padding: 4px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  width: 100%;
 }
 
 .tt-suggestion {
-    padding: 3px 20px;
-    line-height: 24px;
+  padding: 3px 20px;
+  line-height: 24px;
 }
 
 .tt-suggestion.tt-cursor,
 .tt-suggestion:hover {
-    color: #fff;
-    background-color: #0097cf;
+  color: #fff;
+  background-color: #0097cf;
 }
 
 .tt-suggestion p {
-    margin: 0;
+  margin: 0;
 }
 
 .tt-header {
-    font-size: 75%;
-    /* this doesn't work, don't want to just turn it on, though:
+  font-size: 75%;
+
+  /* this doesn't work, don't want to just turn it on, though:
   font-color : gray;
   */
-    font-style: italic;
-    padding-left: 5px;
+  font-style: italic;
+  padding-left: 5px;
 }
diff --git a/kbase-extension/static/kbase/css/batchMode.css b/kbase-extension/static/kbase/css/batchMode.css
index fa85032208..dddf077eb3 100644
--- a/kbase-extension/static/kbase/css/batchMode.css
+++ b/kbase-extension/static/kbase/css/batchMode.css
@@ -1,22 +1,22 @@
 .batch-mode-col {
-    padding: 5px 10px;
-    overflow: auto;
+  padding: 5px 10px;
+  overflow: auto;
 }
 
 .job-info {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .job-info.job-selected {
-    background-color: #eee;
+  background-color: #eee;
 }
 
 .batch-mode-list {
-    max-height: 860px;
-    overflow: auto;
+  max-height: 860px;
+  overflow: auto;
 }
 
 .batch-input-panel {
-    max-height: 300px;
-    overflow: auto;
-}
\ No newline at end of file
+  max-height: 300px;
+  overflow: auto;
+}
diff --git a/kbase-extension/static/kbase/css/bootstrapHelper.css b/kbase-extension/static/kbase/css/bootstrapHelper.css
index 0a437296e9..cb7c20c76a 100644
--- a/kbase-extension/static/kbase/css/bootstrapHelper.css
+++ b/kbase-extension/static/kbase/css/bootstrapHelper.css
@@ -5,35 +5,32 @@
     Customize bootstrap styles
 */
 
-
 /*
-  Bs recommends h4 for the modal title, but this is overridden by the general 
+  Bs recommends h4 for the modal title, but this is overridden by the general
   purpose kbase h4 style. Generally, I (Erik) do not like using semantic tags
   in bootstrap anyway, especially header tags which inherently imply a specific
   document structure which modal dialogs in no way can represent!)
 */
 
 .modal .modal-title {
-    font-family: "Oxygen", Arial, sans-serif;
-    font-size: 130%;
-    font-weight: bold;
-    color: #2e618d;
+  font-family: "Oxygen", Arial, sans-serif;
+  font-size: 130%;
+  font-weight: bold;
+  color: #2e618d;
 }
 
-
 /*
-    Unset the global modal title color set above for alert modals, which 
+    Unset the global modal title color set above for alert modals, which
     may set the color style based on the alert type.
 */
 
 .modal.kb-modal-alert .modal-title {
-    color: unset;
+  color: unset;
 }
 
-
 /*
     The BS checkbox appears too low, due to the top margin, when used with a label
-    in the recommended manner. 
+    in the recommended manner.
     Note: I don't understand why BS handles checkbox styling as they do, turning
     the checkbox into relatively posiioned and then pushing the label to checkbox
     to the left and down (at the same time given the container extra margin to
@@ -42,77 +39,75 @@
 */
 
 .modal input[type="checkbox"] {
-    margin-top: 1px;
+  margin-top: 1px;
 }
 
 .panel.kb-panel-light {
-    border: none;
-    margin-bottom: 10px;
+  border: none;
+  margin-bottom: 10px;
 }
 
-
 /* colors copied shamelessly from peeking at bootstrap
    http://getbootstrap.com/css/
 */
 
 .panel-danger.kb-panel-light .panel-title {
-    color: #a94442;
+  color: #a94442;
 }
 
 .panel-success.kb-panel-light .panel-title {
-    color: #3c763d;
+  color: #3c763d;
 }
 
 .panel-warning.kb-panel-light .panel-title {
-    color: #8a6d3b;
+  color: #8a6d3b;
 }
 
 .panel-info.kb-panel-light .panel-title {
-    color: blue;
+  color: blue;
 }
 
-.panel.kb-panel-light>.panel-heading {
-    background-color: transparent;
-    font-weight: bold;
-    color: #666;
-    padding-left: 0;
-    padding-bottom: 2px;
-    border-bottom: 1px #CCC solid;
+.panel.kb-panel-light > .panel-heading {
+  background-color: transparent;
+  font-weight: bold;
+  color: #666;
+  padding-left: 0;
+  padding-bottom: 2px;
+  border-bottom: 1px #ccc solid;
 }
 
 .panel.kb-panel-light .panel-body {
-    padding-top: 0;
-    padding: 0;
+  padding-top: 0;
+  padding: 0;
 }
 
 .panel.kb-panel-container {
-    border: none;
+  border: none;
 }
 
-.panel.kb-panel-container>.panel-heading {
-    background-color: transparent;
-    font-weight: bold;
-    xcolor: #2e618d;
-    padding-left: 0;
-    padding-bottom: 2px;
-    border-bottom: 2px #CCC solid;
-    margin-bottom: 10px;
+.panel.kb-panel-container > .panel-heading {
+  background-color: transparent;
+  font-weight: bold;
+  xcolor: #2e618d;
+  padding-left: 0;
+  padding-bottom: 2px;
+  border-bottom: 2px #ccc solid;
+  margin-bottom: 10px;
 }
 
 .panel.kb-panel-container .panel-body {
-    padding-top: 0;
+  padding-top: 0;
 }
 
-
 /*
-  The button bar in a cell widgetis located at the bottom of the inputs, but 
+  The button bar in a cell widgetis located at the bottom of the inputs, but
   above any outputs.
   These styles attempt to help the button toolbar, which represents the actions
   the user can take, be visually distinct from the other bits surrounding it.
 */
 
 .btn-toolbar.kb-btn-toolbar-cell-widget {
-    margin-bottom: 20px;
-    background-color: #EEE;
-    padding: 6px;
-}
\ No newline at end of file
+  margin-bottom: 20px;
+  background-color: #eee;
+  padding: 6px;
+}
diff --git a/kbase-extension/static/kbase/css/buttons.css b/kbase-extension/static/kbase/css/buttons.css
index 7e6db5bd51..f99898a9b4 100644
--- a/kbase-extension/static/kbase/css/buttons.css
+++ b/kbase-extension/static/kbase/css/buttons.css
@@ -2,49 +2,52 @@
 /* A flat button, with no unselected background color, but with hover and click
    styles */
 .btn.kb-flat-btn {
-    background-color: #FFF;
-    xpadding: 1px 7px;
-    xfont-size: 24px;
-    border: none;
-    text-shadow: none !important;
-    margin: 0;
-    /* box-shadow: 0 0 3px #CECECE; */
-    xmargin-right: 5px;
+  background-color: #fff;
+  xpadding: 1px 7px;
+  xfont-size: 24px;
+  border: none;
+  text-shadow: none !important;
+  margin: 0;
+
+  /* box-shadow: 0 0 3px #CECECE; */
+  xmargin-right: 5px;
 }
+
 .kb-flat-btn-wrapper { /* don't add shadows here */
   box-shadow: none;
 }
 
 /* Set a plain default color -- should be overridden when building the button. */
-.btn.kb-flat-btn  {
-    color: #666;
+.btn.kb-flat-btn {
+  color: #666;
 }
 
 /* Text spacing */
 .btn.kb-flat-btn .kb-nav-btn-txt {
-    font-size: 10pt;
-    margin-top: -5px;
+  font-size: 10pt;
+  margin-top: -5px;
 }
 
-/* ?? 
+/* ??
  color nav icons
-.navbar-buttons .fa::before {  
+.navbar-buttons .fa::before {
   color: #2196F3;
 }
 */
 
 .btn.kb-flat-btn:hover {
-  background-color: #F5F5F5;
+  background-color: #f5f5f5;
 }
 
-/* ?? 
- restore rounded corners 
-#kb-ipy-menu { 
+/* ??
+ restore rounded corners
+#kb-ipy-menu {
   border-radius: 4px !important;
   margin-right: 0;
 }
 */
 
-.btn.kb-flat-btn:hover, .btn.kb-flat-btn:active  {
-    background-color: #CCC;
-}
\ No newline at end of file
+.btn.kb-flat-btn:hover,
+.btn.kb-flat-btn:active {
+  background-color: #ccc;
+}
diff --git a/kbase-extension/static/kbase/css/contigBrowserStyles.css b/kbase-extension/static/kbase/css/contigBrowserStyles.css
index 367565e50b..196caa3bac 100644
--- a/kbase-extension/static/kbase/css/contigBrowserStyles.css
+++ b/kbase-extension/static/kbase/css/contigBrowserStyles.css
@@ -1,15 +1,16 @@
-/*------------ Contig browser rules --------------*/
+/* ------------ Contig browser rules -------------- */
+
 /*
  * Styling for the tooltip that pops up when a feature is highlighted.
  */
 .kbcb-tooltip {
-	position: absolute;
-	z-index: 9999999;
-	visibility: hidden;
-	opacity: 0.8;
-	background-color: #222;
-	color: #fff;
-	padding: 0.5em;
+  position: absolute;
+  z-index: 9999999;
+  visibility: hidden;
+  opacity: 0.8;
+  background-color: #222;
+  color: #fff;
+  padding: 0.5em;
 }
 
 /**
@@ -17,14 +18,14 @@
  */
 .kbcb-widget .kbcb-axis path,
 .kbcb-widget .kbcb-axis line {
-    fill: none;
-    stroke: black;
-    shape-rendering: crispEdges;
+  fill: none;
+  stroke: black;
+  shape-rendering: crispEdges;
 }
 
 .kbcb-widget .kbcb-axis text {
-    font-family: sans-serif;
-    font-size: 11px;
+  font-family: sans-serif;
+  font-size: 11px;
 }
 
 /**
@@ -37,27 +38,27 @@
  * And highlighted features should be colored last (not currently used).
  */
 .kbcb-feature {
-	stroke: #000;
-	fill: #f00;
+  stroke: #000;
+  fill: #f00;
 }
 
 .kbcb-operon {
-	fill: #0f0;
+  fill: #0f0;
 }
 
 .kbcb-center {
-	fill: #00f;
+  fill: #00f;
 }
 
 .kbcb-highlight {
-	fill: #fff;
+  fill: #fff;
 }
 
 /**
  * The below controls styling for the (optional) button panel
  */
 .kbcb-buttons {
-	margin-left: auto;
-	margin-right: auto;
-	width: 70%;
+  margin-left: auto;
+  margin-right: auto;
+  width: 70%;
 }
diff --git a/kbase-extension/static/kbase/css/kbaseEditor.css b/kbase-extension/static/kbase/css/kbaseEditor.css
index 77b05b3a0b..42fb775e47 100644
--- a/kbase-extension/static/kbase/css/kbaseEditor.css
+++ b/kbase-extension/static/kbase/css/kbaseEditor.css
@@ -3,26 +3,26 @@
  */
 
 .modal-body .dataTables_processing {
-    border: 1px solid #aaa;
-    background: #E8F9FF;
-    opacity: 0.8;
+  border: 1px solid #aaa;
+  background: #e8f9ff;
+  opacity: 0.8;
 }
 
 .kb-editor {
-    margin: 0 10px;
+  margin: 0 10px;
 }
 
 .kb-editor .tab-content {
-    margin: 5px 0 0 0;
+  margin: 5px 0 0 0;
 }
 
 .kb-editor .controls {
-    margin: 5px 0px;
-}
-.kb-editor .controls .btn{
-    margin: 0 10px;
+  margin: 5px 0;
 }
 
+.kb-editor .controls .btn {
+  margin: 0 10px;
+}
 
 /**
  * Override KBase stylings that override jupyter styling.
@@ -31,63 +31,63 @@
 
 /* override button staylings that were removed */
 .kb-editor .btn-primary {
-    background-color: #337ab7 !important;
-    border-color: #2e6da4 !important;
+  background-color: #337ab7 !important;
+  border-color: #2e6da4 !important;
 }
+
 .kb-editor .btn-danger {
-    background-color: #d9534f !important;
-    border-color: #d43f3a !important;
+  background-color: #d9534f !important;
+  border-color: #d43f3a !important;
 }
 
 /* override icon stylings in button that were removed */
 .kb-editor .btn i {
-    color: #fff;
+  color: #fff;
 }
 
 /* override table border styling */
 .kb-editor table {
-    border: 1px solid #bbb;
+  border: 1px solid #bbb;
 }
 
-
 /**
  * General editor styling
  */
 .kb-editor-table {
-    width: 100% !important; /* override datatables hackory */
+  width: 100% !important; /* override datatables hackory */
 }
 
 .kb-editor-table > tbody > tr > td:first-child {
-    width: 1%; /* checkboxes are expected on editable tables */
+  width: 1%; /* checkboxes are expected on editable tables */
 }
 
 .kb-editor-table > tbody > tr > td:first-child .fa-square-o {
-    font-size: 1.4em;
-    color: #666;
+  font-size: 1.4em;
+  color: #666;
 }
 
 .kb-editor-table > tbody > tr > td:first-child:hover {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .kb-editor-table > tbody > tr > td:first-child:hover .fa-square-o {
-    color: #000;
+  color: #000;
 }
 
-.kb-editor-table > tbody > tr.row-select .fa-square-o:before {
-    content: "\f046";
-    color: #444;
+.kb-editor-table > tbody > tr.row-select .fa-square-o::before {
+  content: "\f046";
+  color: #444;
 }
 
 .kb-editor-table > tbody > tr > td.editable {
-    position: relative;
+  position: relative;
 }
 
-.kb-editor-table > tbody > tr > td.editable:hover:after{
-    content: "\f044";
-    font-family: FontAwesome;
-    position: absolute;
-    bottom: 0;
-    right: 2px;
-    color: #888;
+.kb-editor-table > tbody > tr > td.editable:hover::after {
+  content: "\f044";
+  font-family: FontAwesome;
+  position: absolute;
+  bottom: 0;
+  right: 2px;
+  color: #888;
 }
diff --git a/kbase-extension/static/kbase/css/kbaseIcons.css b/kbase-extension/static/kbase/css/kbaseIcons.css
index ac888c5181..0adf7e13e1 100644
--- a/kbase-extension/static/kbase/css/kbaseIcons.css
+++ b/kbase-extension/static/kbase/css/kbaseIcons.css
@@ -2,17 +2,17 @@
 
 @font-face {
   font-family: "kbase-icons";
-  src:url("../fonts/kbase-icons.eot");
-  src:url("../fonts/kbase-icons.eot?#iefix") format("embedded-opentype"),
+  src: url("../fonts/kbase-icons.eot");
+  src:
+    url("../fonts/kbase-icons.eot?#iefix") format("embedded-opentype"),
     url("../fonts/kbase-icons.woff") format("woff"),
     url("../fonts/kbase-icons.ttf") format("truetype"),
     url("../fonts/kbase-icons.svg#kbase-icons") format("svg");
   font-weight: normal;
   font-style: normal;
-
 }
 
-[data-icon]:before {
+[data-icon]::before {
   font-family: "kbase-icons" !important;
   content: attr(data-icon);
   font-style: normal !important;
@@ -24,8 +24,8 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-[class^="icon-"]:before,
-[class*=" icon-"]:before {
+[class^="icon-"]::before,
+[class*=" icon-"]::before {
   font-family: "kbase-icons" !important;
   font-style: normal !important;
   font-weight: normal !important;
@@ -36,21 +36,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-compare:before {
+.icon-compare::before {
   content: "a";
 }
-.icon-genome:before {
+
+.icon-genome::before {
   content: "b";
 }
-.icon-metabolism:before {
+
+.icon-metabolism::before {
   content: "c";
 }
-.icon-metagenome:before {
+
+.icon-metagenome::before {
   content: "d";
 }
-.icon-reads:before {
+
+.icon-reads::before {
   content: "e";
 }
-.icon-tree:before {
+
+.icon-tree::before {
   content: "f";
 }
diff --git a/kbase-extension/static/kbase/css/kbaseJobLog.css b/kbase-extension/static/kbase/css/kbaseJobLog.css
index e217362f96..6534beb422 100644
--- a/kbase-extension/static/kbase/css/kbaseJobLog.css
+++ b/kbase-extension/static/kbase/css/kbaseJobLog.css
@@ -1,75 +1,76 @@
 #kblog-header {
-    margin: 5px 0 5px 0;
+  margin: 5px 0 5px 0;
 }
 
 #kblog-panel {
-    background-color: #F5F5F5;
-    border: 1px solid #CECECE;
-    height: 350px;
-    padding: 5px;
-    resize: vertical;
-    overflow: auto;
-    color: #000;
-    vertical-align: top;
+  background-color: #f5f5f5;
+  border: 1px solid #cecece;
+  height: 350px;
+  padding: 5px;
+  resize: vertical;
+  overflow: auto;
+  color: #000;
+  vertical-align: top;
 }
 
 .kblog-header {
-    display: flex;
-    font-family: monospace;
+  display: flex;
+  font-family: monospace;
 }
 
 .kblog-line {
-    font-family: monospace;
+  font-family: monospace;
 }
 
 .kblog-line:hover {
-    background-color: #DDD;
+  background-color: #ddd;
 }
 
 .kblog-num-wrapper {
-    font-size: 85%;
-    display: flex;
-    flex-direction: row;
+  font-size: 85%;
+  display: flex;
+  flex-direction: row;
 }
 
 .kblog-line-num {
-    flex-shrink: 0;
-    width: 3rem;
-    text-align: right;
-    color: #999;
-    white-space: nowrap;
+  flex-shrink: 0;
+  width: 3rem;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
 
-    /* makes text unselectabe */
-    -moz-user-select: -moz-none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -o-user-select: none;
-    user-select: none;
+  /* makes text unselectabe */
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+  user-select: none;
 }
 
 .kblog-text {
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    flex: 1;
-    margin-left: 6px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  flex: 1;
+  margin-left: 6px;
 }
 
-.kb-error, .kb-error .kblog-line-num  {
-    color: darkred;
-    text-decoration: underline;
-    text-decoration-style: solid;
-    text-decoration-color: red;
-    font-weight: bold;
-    font-size: 12px;
-    background-color: rgb(255, 245, 245);
-
+.kb-error,
+.kb-error .kblog-line-num {
+  color: darkred;
+  text-decoration: underline;
+  text-decoration-style: solid;
+  text-decoration-color: red;
+  font-weight: bold;
+  font-size: 12px;
+  background-color: rgb(255, 245, 245);
 }
 
 #kblog-msg {
-    margin-top: 5px;
+  margin-top: 5px;
 }
 
 #kblog-err {
-    margin-top: 5px;
-    /* color: #660000; */
+  margin-top: 5px;
+
+  /* color: #660000; */
 }
diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index 250bca848b..5d89a1f7f4 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -1,404 +1,431 @@
 @import url("//fonts.googleapis.com/css?family=Roboto");
 
 .kb-dropzone div#upload-message {
-    font-family: Oxygen, Arial, sans-serif;
-    font-weight: bold;
+  font-family: Oxygen, Arial, sans-serif;
+  font-weight: bold;
 }
 
 .kb-dropzone .dz-message {
-    font-family: Roboto;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 24px;
-    line-height: 28px;
-    text-align: center;
-    color: #000000;
-    mix-blend-mode: normal;
-    margin: 2em 4.5em;
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 24px;
+  line-height: 28px;
+  text-align: center;
+  color: #000;
+  mix-blend-mode: normal;
+  margin: 2em 4.5em;
 }
 
-#kb-data-staging-table_wrapper{
-    margin-top: 15px;
+#kb-data-staging-table_wrapper {
+  margin-top: 15px;
 }
 
 .kb-data-staging-decompress {
-    border: 1px solid #cccccc;
-    border-radius : 1px;
+  border: 1px solid #ccc;
+  border-radius: 1px;
 }
 
 .kb-data-staging-table-name {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .kb-data-staging-folder:hover {
-    cursor: pointer;
-    text-decoration: underline;
+  cursor: pointer;
+  text-decoration: underline;
 }
 
 .kb-data-breadcrumb .kb-pointer a {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .kb-data-staging-footer {
-    font-family: Oxygen, Arial, sans-serif;
-    font-weight: bold;
-    font-size: 105%;
-    text-align: center;
-    background-color: #EEEEEE;
-    height: 32px;
-    padding: 8px;
+  font-family: Oxygen, Arial, sans-serif;
+  font-weight: bold;
+  font-size: 105%;
+  text-align: center;
+  background-color: #eee;
+  height: 32px;
+  padding: 8px;
 }
 
 .kb-data-staging-metadata-list {
-    font-family: Oxygen, Arial, sans-serif;
-    font-weight: bold;
-    width: 115px;
-    display: inline-block;
-    font-size: 90%;
+  font-family: Oxygen, Arial, sans-serif;
+  font-weight: bold;
+  width: 115px;
+  display: inline-block;
+  font-size: 90%;
 }
 
 .kb-data-staging-metadata-file-lines {
-    white-space: pre;
-    overflow: scroll;
-    font-family: monospace;
-    font-size: 90%;
-    background-color: #DDDDDD;
-    max-height: 200px;
+  white-space: pre;
+  overflow: scroll;
+  font-family: monospace;
+  font-size: 90%;
+  background-color: #ddd;
+  max-height: 200px;
 }
 
 /* https://www.figma.com/file/T30UN3QhWhhV5SpXiqY1ij/KBase-component-library?node-id=1%3A4 */
 .kb-data-staging-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-family: Oxygen, Arial, sans-serif;
-    font-style: normal;
-    font-weight: bold;
-    font-size: 14px;
-    line-height: 18px;
-    text-align: center;
-    text-transform: uppercase;
-    color: #4379B1;
-    height: 35px;
-    margin: 8px;
-    padding: 8px;
-    position: relative;
-    top: -3px;
-    letter-spacing: .5pt;
-    border-radius: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: Oxygen, Arial, sans-serif;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 18px;
+  text-align: center;
+  text-transform: uppercase;
+  color: #4379B1;
+  height: 35px;
+  margin: 8px;
+  padding: 8px;
+  position: relative;
+  top: -3px;
+  letter-spacing: .5pt;
+  border-radius: 4px;
 }
 
-.kb-data-staging-button:hover{
-    background: rgba(67, 121, 177, 0.1);
-}
-.kb-data-staging-button:focus{
-    background: rgba(67, 121, 177, 0.15);
+.kb-data-staging-button:hover {
+  background: rgba(67, 121, 177, 0.1);
 }
-.kb-data-staging-button:active{
-    background: rgba(67, 121, 177, 0.2);
-}
-.kb-data-staging-button:disabled{
-    background: rgba(0, 0, 0, 0.02);
-    color: #929292;
+
+.kb-data-staging-button:focus {
+  background: rgba(67, 121, 177, 0.15);
 }
 
+.kb-data-staging-button:active {
+  background: rgba(67, 121, 177, 0.2);
+}
 
+.kb-data-staging-button:disabled {
+  background: rgba(0, 0, 0, 0.02);
+  color: #929292;
+}
 
 .kb-data-stagingarea {
-    font-family: Oxygen, Arial, sans-serif;
-    font-style: normal;
-    font-weight: bold;
-    font-size: 24px;
-    line-height: 30px;
+  font-family: Oxygen, Arial, sans-serif;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 30px;
 }
 
 .kb-data-staging-spacer {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
 .kb-dropzone {
-    border: 2px dashed #2196F3 !important;
-    margin-bottom:5px;
-    max-height: 150px;
-    overflow-y: auto;
+  border: 2px dashed #2196f3 !important;
+  margin-bottom: 5px;
+  max-height: 150px;
+  overflow-y: auto;
 }
 
 .kb-ga-seq {
-    word-wrap: break-word;
-    font-family: monospace;
-    max-width: 300px;
-    max-height: 100px;
-    overflow-y: auto;
+  word-wrap: break-word;
+  font-family: monospace;
+  max-width: 300px;
+  max-height: 100px;
+  overflow-y: auto;
 }
 
 /**
  * Shim to make sure jQuery-ui dialogs are always on front of other DOM elements.
  */
 .ui-front {
-    z-index: 1000;
+  z-index: 1000;
 }
 
 .whiteout-pane {
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: #fff;
-    text-align: center;
-    z-index: 1001;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  text-align: center;
+  z-index: 1001;
 }
 
 #kb-narr-name {
-    font-family: Oxygen;
-    font-weight: bold;
-    font-size: 130%;
-    padding-bottom: 7px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  font-family: Oxygen;
+  font-weight: bold;
+  font-size: 130%;
+  padding-bottom: 7px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 #kb-narr-name:hover {
-    text-overflow: inherit;
-    white-space: normal;
+  text-overflow: inherit;
+  white-space: normal;
 }
 
 #kb-narr-name > #save_widget {
-    font-family: Oxygen;
-    font-weight: bold;
-    padding: 0;
+  font-family: Oxygen;
+  font-weight: bold;
+  padding: 0;
 }
 
 #kb-narr-creator {
-    font-family: Oxygen;
-    font-weight: bold;
+  font-family: Oxygen;
+  font-weight: bold;
 }
 
 .kb-narr-namestamp {
-    margin-bottom: 0px;
-    margin-top: 5px;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 20px;
-    border-left: 2px solid #CECECE;
-    display: block;
-    flex: 2;
-    min-width: 0;
+  margin-bottom: 0;
+  margin-top: 5px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 20px;
+  border-left: 2px solid #cecece;
+  display: block;
+  flex: 2;
+  min-width: 0;
 }
 
 .ui-draggable.kb-data-inflight {
-    display: block;
-    border: 2px gray solid;
-    background-color: #FEFFD6 !important;
-    border-radius: 4px;
-    z-index: 1000;
+  display: block;
+  border: 2px gray solid;
+  background-color: #feffd6 !important;
+  border-radius: 4px;
+  z-index: 1000;
 }
+
 .ui-draggable.kb-data-inflight.-over {
-    border-color: green;
-    background-color: #EFFCEB !important;
+  border-color: green;
+  background-color: #effceb !important;
 }
 
 .kb-data-list-drag-target {
-    transition: all 0.25s ease;
+  transition: all 0.25s ease;
 }
 
 .kb-data-list-drag-target.-drag-active {
-    background-color: #FEFFD6;
+  background-color: #feffd6;
 }
 
 .kb-data-list-drag-target.-drag-hover {
-    background-color: #EFFCEB;
-    border-color: green;
-
+  background-color: #effceb;
+  border-color: green;
 }
+
 .kb-data-list-drag-target.-drag-hover {
-    height: 90px;
-    transition: all 0.25s ease;
+  height: 90px;
+  transition: all 0.25s ease;
 }
 
 .kb-data-list-drag-target {
-    display: block;
-    border: 2px orange dashed;
-    height: 40px;
-    text-align: center;
-    padding: 6px;
-    border-radius: 4px;
+  display: block;
+  border: 2px orange dashed;
+  height: 40px;
+  text-align: center;
+  padding: 6px;
+  border-radius: 4px;
 }
 
 #kb-notify-area {
-    display: inline-block;
-    float: left;
-    position: relative;
+  display: inline-block;
+  float: left;
+  position: relative;
 }
 
 .kb-navbar-buttons {
-    display: inline-block;
-    padding-right: 15px;
-    margin-right: 15px;
-    border-right: 2px solid #CECECE;
+  display: inline-block;
+  padding-right: 15px;
+  margin-right: 15px;
+  border-right: 2px solid #cecece;
 }
 
 header[role="banner"] {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    background-color: #fff;
-    border-bottom: 1px solid #CECECE;
-    z-index: 999;
-
+  position: absolute;
+  top: 0;
+  width: 100%;
+  background-color: #fff;
+  border-bottom: 1px solid #cecece;
+  z-index: 999;
 }
 
 nav[role="navigation"] ul {
-    margin: 1.2em 0 .5em 0;
-    /*text-align: center;*/
-    padding-left: 0;
+  margin: 1.2em 0 0.5em 0;
+
+  /* text-align: center; */
+  padding-left: 0;
 }
 
 nav[role="navigation"] ul li {
-    display: inline;
-    margin: 0 .5em;
-    vertical-align: middle;
+  display: inline;
+  margin: 0 0.5em;
+  vertical-align: middle;
 }
 
 nav[role="navigation"] ul li a {
-    text-decoration: none;
-    font-size: 1.2em;
-    font-family: Oxygen;
-    font-weight: bold;
-    padding: 7px 1em;
-    background-color: #5c9531;
-    color: #fff;
-    border-radius: 8px;
-    -moz-border-radius: 8px;
-    -webkit-border-radius: 8px;
-    -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-    -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-    border: 1px solid #5c9531;
-}
-
-li#searchlabel a{
- }
-
-input#search_terms{
-    padding: .4em 1em;
-    display: inline;
-    border-color: #5c9531;
-    position: relative;
-    left: -.5em;
-    font-size: 1em;
-    margin-top: -3px;
-    background-image: url("../images/search.png");
-    background-size: 22px;
-    background-repeat:no-repeat;
-    background-position:right center;
-    border-top-left-radius: 0px;
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-    border-bottom-left-radius: 0px;
-}
-span#searchspan{
-    display: inline-block;
+  text-decoration: none;
+  font-size: 1.2em;
+  font-family: Oxygen;
+  font-weight: bold;
+  padding: 7px 1em;
+  background-color: #5c9531;
+  color: #fff;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
+  -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
+  border: 1px solid #5c9531;
+}
+
+input#search_terms {
+  padding: 0.4em 1em;
+  display: inline;
+  border-color: #5c9531;
+  position: relative;
+  left: -0.5em;
+  font-size: 1em;
+  margin-top: -3px;
+  background-image: url("../images/search.png");
+  background-size: 22px;
+  background-repeat: no-repeat;
+  background-position: right center;
+  border-top-left-radius: 0;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 0;
+}
+
+span#searchspan {
+  display: inline-block;
+  width: 50%;
+}
+
+@media screen and (max-width: 1170px) {
+  span#searchspan {
     width: 50%;
+  }
 }
-@media screen and (max-width: 1170px){
-    span#searchspan{width: 50%;}
-}
-@media screen and (max-width: 980px){
-    span#searchspan{width: 40%;}
-}
-@media screen and (max-width: 768px){
-    span#searchspan{width: 30%;}
+
+@media screen and (max-width: 980px) {
+  span#searchspan {
+    width: 40%;
+  }
 }
-@media screen and (max-width: 590px){
-    span#searchspan{width: 60%;}
+
+@media screen and (max-width: 768px) {
+  span#searchspan {
+    width: 30%;
+  }
 }
 
+@media screen and (max-width: 590px) {
+  span#searchspan {
+    width: 60%;
+  }
+}
 
 .navbar-kbase {
-    border-bottom: 5px solid #CECECE !important;
-    padding: 8px;
+  border-bottom: 5px solid #cecece !important;
+  padding: 8px;
 }
 
 .navbar-kbase a:hover {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 /* Top bar nav buttons
    --------------------------
 */
 .kb-nav-btn {
-    background-color: #FFF;
-    padding: 1px 7px;
-    font-size: 24px;
-    border: none;
-    text-shadow: none !important;
-    margin: 0;
-    box-shadow: 0 0 3px #CECECE;
-    margin-right: 5px;
-    min-width: 50px;
+  background-color: #fff;
+  padding: 1px 7px;
+  font-size: 24px;
+  border: none;
+  text-shadow: none !important;
+  margin: 0;
+  box-shadow: 0 0 3px #cecece;
+  margin-right: 5px;
+  min-width: 50px;
 }
-.navbar-right .fa::before { /* color nav icons */
-    color: #2196F3;
+
+.navbar-right .fa::before {
+  /* color nav icons */
+  color: #2196f3;
 }
 
 .kb-navbar-container {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
 
-#kb-nav-menu { /* don't add shadows here */
-    box-shadow: none;
+#kb-nav-menu {
+  /* don't add shadows here */
+  box-shadow: none;
 }
+
 .kb-nav-btn > div {
-    color: #666 !important;
+  color: #666 !important;
 }
+
 .kb-nav-btn .kb-nav-btn-txt {
-    font-size: 10pt;
-    margin-top: -5px;
+  font-size: 10pt;
+  margin-top: -5px;
 }
+
 .navbar-right .kb-nav-btn:hover {
-    background-color: #F5F5F5;
+  background-color: #f5f5f5;
 }
+
 .kb-nav-btn-upgrade {
-    background-color: #4BB856 !important;
-    display: none;
+  background-color: #4bb856 !important;
+  display: none;
 }
+
 .kb-nav-btn-upgrade .fa::before {
-    color: #FFF !important;
+  color: #fff !important;
 }
+
 .kb-nav-btn-upgrade > div {
-    color: #FFF !important;
+  color: #fff !important;
 }
+
 .kb-nav-btn-upgrade:hover {
-    background-color: #43A047 !important;
+  background-color: #43a047 !important;
 }
+
 .kb-nav-btn-upgrade.warning {
-    background-color: #F44336 !important;
+  background-color: #f44336 !important;
 }
+
 .kb-nav-btn-upgrade.warning:hover {
-    background-color: #DC3C31 !important;
+  background-color: #dc3c31 !important;
 }
+
 .kb-nav-menu-icon {
-    display: inline-block;
-    width: 20px;
-    text-align: center;
-    vertical-align: middle;
-    margin-right: 5px;
+  display: inline-block;
+  width: 20px;
+  text-align: center;
+  vertical-align: middle;
+  margin-right: 5px;
 }
+
 .kb-nav-menu-icon .fa {
-    font-size: 150%;
+  font-size: 150%;
 }
 
-#kb-ipy-menu { /* restore rounded corners */
+#kb-ipy-menu {
+  /* restore rounded corners */
   border-radius: 4px !important;
   margin-right: 0;
 }
 
-.btn { /* don't use drop-shadow on profile menu */
+.btn {
+  /* don't use drop-shadow on profile menu */
   box-shadow: none;
   -webkit-box-shadow: none;
   moz-box-shadow: none;
@@ -406,859 +433,910 @@ span#searchspan{
 }
 
 #signin-button .btn {
-    border: none;
+  border: none;
 }
 
-.btn-xs .glyphicon-user { /* also resize user btn */
+.btn-xs .glyphicon-user {
+  /* also resize user btn */
   padding: 14px 5px 14px 5px;
 }
-/* -------------------------- */
 
+/* -------------------------- */
 
 .narrative-menu-container {
-    position: fixed;
-    z-index: 499;
-    background-color: #ffffff;
-    width: 100%;
-    border-bottom: 1px solid #ababab;
-    padding-bottom: 30px;
-    padding-top: 10px;
-    margin-top: -10px;
-    margin-left: auto
-}
-
-p.clear{
-    height: 0px;
-    clear: both;
+  position: fixed;
+  z-index: 499;
+  background-color: #fff;
+  width: 100%;
+  border-bottom: 1px solid #ababab;
+  padding-bottom: 30px;
+  padding-top: 10px;
+  margin-top: -10px;
+  margin-left: auto;
+}
+
+p.clear {
+  height: 0;
+  clear: both;
 }
 
 body > #header {
-    display: block;
-    box-sizing: border-box;
+  display: block;
+  box-sizing: border-box;
 }
 
 p#site-title {
-    height: 46px;
-    width: 46px;
-    background: url("../images/kbase_logo.png") no-repeat;
-    background-size: 46px;
-    margin: 5px;
-    float: left;
-    text-indent: -9999px;
+  height: 46px;
+  width: 46px;
+  background: url("../images/kbase_logo.png") no-repeat;
+  background-size: 46px;
+  margin: 5px;
+  float: left;
+  text-indent: -9999px;
 }
 
 #login-info {
-    position: absolute;
-    right: 0px;
-    top: 7px;
-    margin: 5px;
-    font-size: 1.2em;
+  position: absolute;
+  right: 0;
+  top: 7px;
+  margin: 5px;
+  font-size: 1.2em;
 }
 
 #login-widget button {
-    margin-left: 5px;
+  margin-left: 5px;
 }
 
 .search-box {
-    position: relative;
-    display: inline;
-    border-collapse: separate;
-    margin: -11px 0;
-    padding: 10px 1px;
-    width: 200px;
+  position: relative;
+  display: inline;
+  border-collapse: separate;
+  margin: -11px 0;
+  padding: 10px 1px;
+  width: 200px;
 }
 
 #search-box-name {
-    padding: 6px 0px;
-    border: 0;
-    border-radius: 4px;
+  padding: 6px 0;
+  border: 0;
+  border-radius: 4px;
 }
 
 #search-box-name:first-child {
-    border-right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 #search-box-name:last-child {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
-
-
-
-
 #search-input {
-    margin: -11px 0;
+  margin: -11px 0;
 }
 
 #search-select {
-    margin: -11px 0;
-    width: 150px;
+  margin: -11px 0;
+  width: 150px;
 }
 
 #search-area {
-    position: relative;
-    font: 18px 'RobotoBlack', Arial, sans-serif;
-    font-weight: normal;
-    color: #686868;
-    padding: 11px 11px;
-    margin: 0 5px;
+  position: relative;
+  font: 18px "RobotoBlack", Arial, sans-serif;
+  font-weight: normal;
+  color: #686868;
+  padding: 11px 11px;
+  margin: 0 5px;
 }
 
 #search-area input {
-    padding: 11px 11px;
+  padding: 11px 11px;
 }
 
-
 /* center pane */
 
-
-#content-column {
-    /* height: 100%;
-    margin-left: 380px;
-    */
-    /*
-    position: fixed;
-    left: 380px;
-    top: 70px;
-    right: 0;
-    bottom: 0;
-    overflow: auto;
-    */
-}
-
 #workspace {
-    position: fixed;
-    width: 878px;
-    top: 173px;
-    bottom: 42px;
-    overflow: auto;
+  position: fixed;
+  width: 878px;
+  top: 173px;
+  bottom: 42px;
+  overflow: auto;
 }
 
-
 /* footer */
-#bottom-tabs{
-    clear: left;
-    position : fixed;
-    bottom : 0;
-    width: 1170px;
-    margin: 0 auto;
-    background-color: #fff;
-    border-top: 1px solid #aaa;
+#bottom-tabs {
+  clear: left;
+  position: fixed;
+  bottom: 0;
+  width: 1170px;
+  margin: 0 auto;
+  background-color: #fff;
+  border-top: 1px solid #aaa;
 }
 
 #bottom-tabs p a {
-    border: 1px solid #018841;
-    background-color: #fff;
-    padding: 14px 20px;
-    font-size: 14px;
+  border: 1px solid #018841;
+  background-color: #fff;
+  padding: 14px 20px;
+  font-size: 14px;
 }
 
 /* left pane styling */
 #left-column {
-    width: 380px;
-    position: fixed;
-    border-right: 5px solid #CECECE;
-    top: 70px;
-    bottom: 0;
-    /* overflow-y: auto; */
+  width: 380px;
+  position: fixed;
+  border-right: 5px solid #cecece;
+  top: 70px;
+  bottom: 0;
+
+  /* overflow-y: auto; */
 }
 
 .kb-side-overlay-container {
-    width: 730px;
-    border : 1px solid #CECECE;
-    z-index : 1030;
-    background : white;
-    position : fixed;
-    max-height: calc(100% - 73px);
-    overflow-y:auto;
+  width: 730px;
+  border: 1px solid #cecece;
+  z-index: 1030;
+  background: white;
+  position: fixed;
+  max-height: calc(100% - 73px);
+  overflow-y: auto;
 }
 
 .kb-side-overlay-header {
-    width: 100%;
-    background-color: #2196F3;
-    color: #fff;
-    padding: 6px;
-    font-size: 12pt;
+  width: 100%;
+  background-color: #2196f3;
+  color: #fff;
+  padding: 6px;
+  font-size: 12pt;
 }
 
 .kb-side-overlay-close {
-    cursor: pointer;
-    color: #fff;
-    font-weight: bold;
-    font-size: 10pt;
+  cursor: pointer;
+  color: #fff;
+  font-weight: bold;
+  font-size: 10pt;
 }
 
 .kb-side-overlay-close:hover {
-    color: orange;
+  color: orange;
 }
 
 .kb-side-panel {
-    overflow-y: hidden;
-    height: 100%;
+  overflow-y: hidden;
+  height: 100%;
 }
 
 #kb-side-toggle-in {
-    display: none;
-    top: 70px;
-    width: 22px;
-    border-bottom: 6px solid #CECECE;
-    border-right: 6px solid #CECECE;
-    font-size: 12pt;
-    text-align: center;
-    background-color: #2196F3;
-    padding: 12px 6px;
-    color: #BBDEFB;
-    font-weight: bold;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    cursor: pointer;
-    z-index: 1;
-    position: fixed;
+  display: none;
+  top: 70px;
+  width: 22px;
+  border-bottom: 6px solid #cecece;
+  border-right: 6px solid #cecece;
+  font-size: 12pt;
+  text-align: center;
+  background-color: #2196f3;
+  padding: 12px 6px;
+  color: #bbdefb;
+  font-weight: bold;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  cursor: pointer;
+  z-index: 1;
+  position: fixed;
 }
 
 #kb-side-toggle-in:hover {
-    color: #fff;
+  color: #fff;
 }
 
 .kb-side-toggle {
-    display: inline-block;
-    font-size: 12pt;
-    text-align: center;
-    border-bottom: 6px solid #2196F3;
-    border-top: 6px solid #2196F3;
-    background-color: #2196F3;
-    padding: 6px;
-    color: #BBDEFB;
-    font-weight: bold;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    cursor: pointer;
+  display: inline-block;
+  font-size: 12pt;
+  text-align: center;
+  border-bottom: 6px solid #2196f3;
+  border-top: 6px solid #2196f3;
+  background-color: #2196f3;
+  padding: 6px;
+  color: #bbdefb;
+  font-weight: bold;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  cursor: pointer;
 }
 
 .kb-side-toggle:hover {
-    color: #fff;
+  color: #fff;
 }
 
 .kb-side-header {
-    display: inline-block;
-    font-size: 12pt;
-    text-align: center;
-    border-bottom: 6px solid #2196F3;
-    border-top: 6px solid #2196F3;
-    background-color: #2196F3;
-    padding: 6px;
-    color: #BBDEFB;
-    font-weight: bold;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    cursor: pointer;
+  display: inline-block;
+  font-size: 12pt;
+  text-align: center;
+  border-bottom: 6px solid #2196f3;
+  border-top: 6px solid #2196f3;
+  background-color: #2196f3;
+  padding: 6px;
+  color: #bbdefb;
+  font-weight: bold;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  cursor: pointer;
 }
 
 .kb-overlay-active {
-    background-color: gray;
-    border-bottom: 6px solid gray;
-    border-top: 6px solid gray;
+  background-color: gray;
+  border-bottom: 6px solid gray;
+  border-top: 6px solid gray;
 }
 
 .kb-side-header:hover {
-    border-bottom: 6px solid #10CE34;
+  border-bottom: 6px solid #10ce34;
 }
 
 .kb-side-header.active {
-    border-bottom: 6px solid #10CE34;
-    color: #fff;
-    cursor: auto;
+  border-bottom: 6px solid #10ce34;
+  color: #fff;
+  cursor: auto;
 }
 
 .kb-side-separator {
-    border-bottom: 5px solid #CECECE;
+  border-bottom: 5px solid #cecece;
 }
 
-
-
 .kb-side-tab.active {
-    display: inherit;
+  display: inherit;
 }
+
 .kb-side-tab {
-    display: none;
-    height:100%;
+  display: none;
+  height: 100%;
 }
-.kb-narr-side-panel-set{
-    height:100%;
+
+.kb-narr-side-panel-set {
+  height: 100%;
 }
-.kb-narr-side-panel-set:last-child{
-    height:50%;
+
+.kb-narr-side-panel-set:last-child {
+  height: 50%;
 }
 
 .kb-overlay-dimmer {
-    position: fixed;
-    z-index: 10;
-    right: 0;
-    bottom: 0;
-    opacity: 0.5;
-    background-color: #000;
+  position: fixed;
+  z-index: 10;
+  right: 0;
+  bottom: 0;
+  opacity: 0.5;
+  background-color: #000;
 }
 
 #data-header {
-    padding: 10px 0;
-    color: #fff;
-    font-weight: bold;
-    background-color: #099;
+  padding: 10px 0;
+  color: #fff;
+  font-weight: bold;
+  background-color: #099;
 }
 
 #data-title {
-    text-align: center;
+  text-align: center;
 }
 
 #data-add-btn {
-    padding: 0 0 -10px 0;
-    position: absolute;
-    right: 7px;
-    font-size: 0.8em;
+  padding: 0 0 -10px 0;
+  position: absolute;
+  right: 7px;
+  font-size: 0.8em;
 }
 
 #data-add-btn:hover {
-    color:#000;
+  color: #000;
 }
 
 #data-tab-nav {
-    border-bottom: 1px solid #aaa;
-    padding-top: 10px;
-    background-color: #0bb;
-    width: 100%;
+  border-bottom: 1px solid #aaa;
+  padding-top: 10px;
+  background-color: #0bb;
+  width: 100%;
 }
 
 #data-tab-nav ul {
-    padding-bottom: 0;
-    bottom: 0px;
-    top: 50px;
+  padding-bottom: 0;
+  bottom: 0;
+  top: 50px;
 }
 
 #data-tab-nav ul li {
-    display: inline;
-    border: 1px solid black;
-    padding: 4px 10px;
-    background-color: #ddd;
+  display: inline;
+  border: 1px solid black;
+  padding: 4px 10px;
+  background-color: #ddd;
 }
 
 #data-tab-nav ul li a:hover {
-    text-decoration: none;
-    color: #a00;
+  text-decoration: none;
+  color: #a00;
 }
 
 #data-tab-nav ul li a {
-    color: #000;
+  color: #000;
 }
 
 #data-tab-nav ul li.selected {
-    background-color: #fff;
+  background-color: #fff;
 }
 
 #data-view-panel {
-    height: 150px;
-    border: 1px solid #aaa;
-    padding: 10px;
-    overflow-y: auto;
+  height: 150px;
+  border: 1px solid #aaa;
+  padding: 10px;
+  overflow-y: auto;
 }
 
 #data-pane {
-    height: 69%;
-    margin-top: 1px;
-    border-bottom: 1px solid #AAA;
-    overflow: auto;
-}
-#data-pane p{
-    margin: 0px 0;
-}
-#data-pane p span{
-    display: block;
-    padding: 2px 10px;
-    color: #fff;
-    border: 1px solid #fff;
-    width: 123px;
-    margin: 0;
-    text-align: center;
-}
-#data-pane p span.tab1{
-    float: right;
-    background: -moz-linear-gradient(top, #666, #bbb);
-    background: -webkit-linear-gradient(top, #666, #bbb);
-    color: #fff;
-}
-#data-pane p span.tab2{
-    background: -moz-linear-gradient(top, #ccc, #999);
-    background: -webkit-linear-gradient(top, #ccc, #999);
+  height: 69%;
+  margin-top: 1px;
+  border-bottom: 1px solid #aaa;
+  overflow: auto;
+}
+
+#data-pane p {
+  margin: 0 0;
+}
+
+#data-pane p span {
+  display: block;
+  padding: 2px 10px;
+  color: #fff;
+  border: 1px solid #fff;
+  width: 123px;
+  margin: 0;
+  text-align: center;
+}
+
+#data-pane p span.tab1 {
+  float: right;
+  background: -moz-linear-gradient(top, #666, #bbb);
+  background: -webkit-linear-gradient(top, #666, #bbb);
+  color: #fff;
+}
+
+#data-pane p span.tab2 {
+  background: -moz-linear-gradient(top, #ccc, #999);
+  background: -webkit-linear-gradient(top, #ccc, #999);
 }
+
 #function-pane {
-    height: 30%;
-    margin-top: 1px;
-    overflow: auto;
+  height: 30%;
+  margin-top: 1px;
+  overflow: auto;
 }
 
 .left-pane {
-    font-size: 14px;
-    position: relative;
+  font-size: 14px;
+  position: relative;
 }
 
 #kb-function-panel .kb-function-body {
-    height: 100% ;
-    max-height: 100% ;
+  height: 100%;
+  max-height: 100%;
 }
 
 h3.pane-title {
-    margin: 0;
-    position: relative;
-    background-color: rgb(224,224,224);
-    padding: 3px 5px;
-    border: 1px solid #C2C2C2;
-    font-size: 16px;
+  margin: 0;
+  position: relative;
+  background-color: rgb(224, 224, 224);
+  padding: 3px 5px;
+  border: 1px solid #c2c2c2;
+  font-size: 16px;
 }
 
 #add-link {
-    position: absolute;
-    top: 4px;
-    right: 7px;
-    font-size: 0.8em;
+  position: absolute;
+  top: 4px;
+  right: 7px;
+  font-size: 0.8em;
 }
 
 ul.pane-list {
-    margin: 0;
-    padding : 2px
+  margin: 0;
+  padding: 2px;
 }
 
 ul.pane-list li {
-    list-style: none;
-    padding: 1px;
-    margin-left: 5px;
+  list-style: none;
+  padding: 1px;
+  margin-left: 5px;
 }
 
-/* --- KBase method list styles --*/
+/* --- KBase method list styles -- */
 
 .kb-method-list-logo {
-    width:  30pt;
-    height: 30pt;
-    color:  #fff;
-    background-color: #607D8B;
-    border-style:  solid;
-    border-width:  0px;
-    border-color:  #555;
-    text-align: center;
-    display: inline-block;
-    padding-top: 6pt;
-    font-size: 18pt;
-    font-weight: bold;
-    text-shadow: -1px 0 #777, 0 1px #777, 1px 0 #777, 0 -1px #777;
-    cursor: pointer;
+  width: 30pt;
+  height: 30pt;
+  color: #fff;
+  background-color: #607d8b;
+  border-style: solid;
+  border-width: 0;
+  border-color: #555;
+  text-align: center;
+  display: inline-block;
+  padding-top: 6pt;
+  font-size: 18pt;
+  font-weight: bold;
+  text-shadow: -1px 0 #777, 0 1px #777, 1px 0 #777, 0 -1px #777;
+  cursor: pointer;
 }
 
 .kb-method-list-logo:hover {
-	border-width: 5px;
-	padding-top: 2.5pt;
+  border-width: 5px;
+  padding-top: 2.5pt;
 }
 
 .kb-method-list-more-div {
-    color:#777;
-    font-size: 10pt;
-    margin: 2px;
-    text-align: justify;
+  color: #777;
+  font-size: 10pt;
+  margin: 2px;
+  text-align: justify;
 }
 
 .kb-method-list-more-div > div:last-child {
-	text-align: right;
+  text-align: right;
 }
 
 .kb-method-search-clear {
-    cursor: pointer;
-    border: 1px solid #CECECE;
-    border-left: none;
+  cursor: pointer;
+  border: 1px solid #cecece;
+  border-left: none;
 }
 
 /* A function in the function pane */
 li.function a {
-    text-decoration: none;
-    color: rgb(80,130,50);
+  text-decoration: none;
+  color: rgb(80, 130, 50);
 }
+
 li.function a:visited {
-    /* don't recolor */
-    color: rgb(80,130,50);
+  /* don't recolor */
+  color: rgb(80, 130, 50);
 }
+
 /* dataset in data pane */
 li.dataset a {
-    text-decoration: none;
-    color: rgb(130,80,50);
+  text-decoration: none;
+  color: rgb(130, 80, 50);
 }
+
 li.dataset a:visited {
-    /* don't recolor */
-    color: rgb(130,80,50);
+  /* don't recolor */
+  color: rgb(130, 80, 50);
 }
 
-
 /* dialog box + forms styling */
 
 .dialog-box {
-    padding: 20px;
+  padding: 20px;
 }
 
 .dialog-box ul li {
-    padding: 50px 5px;
-    border-bottom: 1px solid #AAA;
-    font-size: 1.2em;
+  padding: 50px 5px;
+  border-bottom: 1px solid #aaa;
+  font-size: 1.2em;
 }
 
 .dialog-box ul li:first-child {
-    padding-top: 20px;
+  padding-top: 20px;
 }
 
 .dialog-box ul li:last-child {
-    border-bottom: none;
+  border-bottom: none;
 }
 
 fieldset {
-    margin: 0 0 15px 0;
-    border: none;
+  margin: 0 0 15px 0;
+  border: none;
 }
 
 fieldset label {
-/*  display: block;
-*/  margin: 0 0 3px 0;
-    font-weight: bold;
-    font-size: 1em;
+  /*  display: block;
+*/
 
+  margin: 0 0 3px 0;
+  font-weight: bold;
+  font-size: 1em;
 }
 
-fieldset input[type="text"], fieldset select {
-    width: 200px;
+fieldset input[type="text"],
+fieldset select {
+  width: 200px;
 }
-fieldset input[type="password"], fieldset select {
-    width: 200px;
+
+fieldset input[type="password"],
+fieldset select {
+  width: 200px;
 }
 
 /* styling of cells */
 
-div.dataset-cell, div.function-cell {
-    width: 90%;
-    margin: 3px auto;
-    padding: 7px 17px;
-    border: 1px solid #ccc;
-}
-img.dataset-cell{
-    margin: 3px auto;
-    padding: 0;
+div.dataset-cell,
+div.function-cell {
+  width: 90%;
+  margin: 3px auto;
+  padding: 7px 17px;
+  border: 1px solid #ccc;
 }
-.function-cell{
-    background-image: url("../images/gears.png");
-    background-position: right;
-    background-repeat: no-repeat;
-    #background-color: #f2f2f2;
+
+img.dataset-cell {
+  margin: 3px auto;
+  padding: 0;
 }
-.dataset-cell p, .function-cell p {
-    font-size: .875em;
+
+.function-cell {
+  background-image: url("../images/gears.png");
+  background-position: right;
+  background-repeat: no-repeat;
+  #background-color: #f2f2f2;
 }
-.dataset-cell h2, .function-cell h2{
-    margin-bottom: 0;
-    font-size: 1.1em;
+
+.dataset-cell p,
+.function-cell p {
+  font-size: 0.875em;
 }
-.textcell{
-    width: 90%;
-    margin: 3px auto;
-    padding: 5px 17px;
-    font-size: 1em;
-    height: 1em;
-    border: 2px solid #fff;
-    color: #111;
+
+.dataset-cell h2,
+.function-cell h2 {
+  margin-bottom: 0;
+  font-size: 1.1em;
 }
 
-.textcell:hover{
-    border: 2px dotted #ccc;
+.textcell {
+  width: 90%;
+  margin: 3px auto;
+  padding: 5px 17px;
+  font-size: 1em;
+  height: 1em;
+  border: 2px solid #fff;
+  color: #111;
 }
 
-p.textcuepara{
-    color: #ccc;
-    padding: 0;
-    margin: 0;
-    height: 1em;
-    display: none;
+.textcell:hover {
+  border: 2px dotted #ccc;
 }
 
-div.tools p, div.texttools p{
-    margin: 0;
+p.textcuepara {
+  color: #ccc;
+  padding: 0;
+  margin: 0;
+  height: 1em;
+  display: none;
 }
-div.textarea{
-    width: 650px;
-    border: none;
-    padding: 0;
-    height: auto;
-    min-height: 1.2em;
-    display: none;
+
+div.tools p,
+div.texttools p {
+  margin: 0;
 }
-.tools, .texttools{
-    display: none;
+
+div.textarea {
+  width: 650px;
+  border: none;
+  padding: 0;
+  height: auto;
+  min-height: 1.2em;
+  display: none;
 }
-.tools{
-    height: 1em;
-    margin-top: .5em;
-    margin-left: 10px;
+
+.tools,
+.texttools {
+  display: none;
 }
-.tools a{
-    border: 1px solid #018841;
-    padding: 2px 4px;
-    font-size: 13px;
+
+.tools {
+  height: 1em;
+  margin-top: 0.5em;
+  margin-left: 10px;
 }
 
-#narrative-header .tools{
-    display: block;
-    width: 30em;
-    position: relative;
-    top: -2.0em;
-    left: 350px;
+.tools a {
+  border: 1px solid #018841;
+  padding: 2px 4px;
+  font-size: 13px;
 }
-.texttools img{
-    vertical-align: middle;
+
+#narrative-header .tools {
+  display: block;
+  width: 30em;
+  position: relative;
+  top: -2em;
+  left: 350px;
 }
-img.remove{
-    float: right;
+
+.texttools img {
+  vertical-align: middle;
 }
-.ui-state-highlight{
-    background-color: fbfaed;
+
+img.remove {
+  float: right;
 }
-div.metadata{
-    display: block;
-    width: 200px;
-    padding: 0 10px;
-    height: 100px;
-    float: left;
+
+.ui-state-highlight {
+  background-color: fbfaed;
 }
-div.social{
-    float: right;
-    display: block;
-    width: 80px;
-    padding: 0 10px;
-    display: none;
+
+div.metadata {
+  display: block;
+  width: 200px;
+  padding: 0 10px;
+  height: 100px;
+  float: left;
 }
-p span.notification{
-    background-color: #ff3333;
-    color: #fff;
-    padding: 4px 8px;
-    border-radius: 1em;
+
+div.social {
+  float: right;
+  display: block;
+  width: 80px;
+  padding: 0 10px;
+  display: none;
 }
 
+p span.notification {
+  background-color: #f33;
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 1em;
+}
 
 /**
  * Bootstrap 3 submenu hack^H^H^H^H fix
  * http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing
  */
 
-.dropdown-submenu{position:relative;}
-.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
-.dropdown-submenu:hover>.dropdown-menu{display:block;}
-.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
-.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
-.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
+.dropdown-submenu {
+  position: relative;
+}
 
-/** End Bootstrap 3 submenu fix **/
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+  -webkit-border-radius: 0 6px 6px 6px;
+  -moz-border-radius: 0 6px 6px 6px;
+  border-radius: 0 6px 6px 6px;
+}
+
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
 
+.dropdown-submenu > a::after {
+  display: block;
+  content: " ";
+  float: right;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #ccc;
+  margin-top: 5px;
+  margin-right: -10px;
+}
+
+.dropdown-submenu:hover > a::after {
+  border-left-color: #fff;
+}
+
+.dropdown-submenu.pull-left {
+  float: none;
+}
+
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+  -webkit-border-radius: 6px 0 6px 6px;
+  -moz-border-radius: 6px 0 6px 6px;
+  border-radius: 6px 0 6px 6px;
+}
+
+/** End Bootstrap 3 submenu fix **/
 
 /* Fixes to bring toolbars up to Bootstrap 3 */
 #maintoolbar {
-    position: relative;
-    top: 5px;
-    min-height: 0;
-    border: none !important;
-    background-image: none !important;
-    background-color: #f9f9f9 !important;
-    -webkit-box-shadow: none;
-    box-shadow: none;
+  position: relative;
+  top: 5px;
+  min-height: 0;
+  border: none !important;
+  background-image: none !important;
+  background-color: #f9f9f9 !important;
+  -webkit-box-shadow: none;
+  box-shadow: none;
 }
 
 #maintoolbar-container {
-    margin-left: 10px;
+  margin-left: 10px;
 }
 
 #menubar {
-    position: absolute;
-    width: 100%;
-    top: 3px;
-    background-color: #f9f9f9;
-    border-bottom: 2px solid #ddd;
-    padding-bottom: 5px;
+  position: absolute;
+  width: 100%;
+  top: 3px;
+  background-color: #f9f9f9;
+  border-bottom: 2px solid #ddd;
+  padding-bottom: 5px;
 }
 
 #menubar .navbar {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 
 #menubar .navbar .container {
-    padding-left: 0;
-    padding-right: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 /* some more bootstrap hacks */
 .navbar {
-    min-height: 0;
-    background-image: none;
-    background-color: #f8f8f8;
+  min-height: 0;
+  background-image: none;
+  background-color: #f8f8f8;
 }
 
-#menubar .navbar-nav>li>a {
-    padding-top: 10px;
-    padding-bottom: 7px;
+#menubar .navbar-nav > li > a {
+  padding-top: 10px;
+  padding-bottom: 7px;
 }
 
-.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger {
-    background-image: none;
+.btn-default,
+.btn-primary,
+.btn-success,
+.btn-info,
+.btn-warning,
+.btn-danger {
+  background-image: none;
 }
 
-.panel-default>.panel-heading {
-    background-image: none;
-}
-
-.btn-default {
-    /** not sure why this is here, but it makes buttons look fuzzy.
-        commenting out until answers come around. - WJR **/
-    /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);*/
+.panel-default > .panel-heading {
+  background-image: none;
 }
 
 #menus {
-    padding-left: 0px;
+  padding-left: 0;
 }
 
-#menubar .navbar  {
-    width: 100%;
+#menubar .navbar {
+  width: 100%;
 }
 
 div#notebook_panel {
-    -webkit-box-shadow: none; /*0 -1px 0px rgba(0, 0, 0, 0.1);*/
-    -moz-box-shadow: none; /*0 -1px 0px rgba(0, 0, 0, 0.1); */
-    box-shadow: none; /* 0 -1px 0px rgba(0, 0, 0, 0.1); */
+  -webkit-box-shadow: none; /* 0 -1px 0px rgba(0, 0, 0, 0.1); */
+  -moz-box-shadow: none; /* 0 -1px 0px rgba(0, 0, 0, 0.1); */
+  box-shadow: none; /* 0 -1px 0px rgba(0, 0, 0, 0.1); */
 }
 
-/*#notebook {
+/* #notebook {
     padding-top: 1em;
 }
 */
 .version-stamp a {
-    padding-right: 320px;
-    text-align: right;
-    color: #0088CC !important;
+  padding-right: 320px;
+  text-align: right;
+  color: #08c !important;
 }
 
 .creator-stamp {
-    padding-right: 320px;
-    height: 1em;
-    text-align: right;
-    color: #006698;
-    font-size: 120%;
-    line-height: 1em;
-    font-family: Oxygen, Arial, sans-serif;
-    font-weight: bold;
+  padding-right: 320px;
+  height: 1em;
+  text-align: right;
+  color: #006698;
+  font-size: 120%;
+  line-height: 1em;
+  font-family: Oxygen, Arial, sans-serif;
+  font-weight: bold;
 }
 
 .panel {
-    margin-bottom: 0px;
+  margin-bottom: 0;
 }
 
 #kb-jobs-panel {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 
 .kb-narr-side-panel {
-    margin-bottom: 5px;
-    height:100%;
+  margin-bottom: 5px;
+  height: 100%;
 }
 
 .kb-narr-side-panel .kb-title {
-    padding: 10px 5px;
-    font-size: 14pt;
-    font-family: Oxygen, Arial, sans-serif;
-    font-weight: bold;
-    text-transform: uppercase;
-    color: #2e618d;
-    /*border-bottom: 1px solid #CECECE;*/
+  padding: 10px 5px;
+  font-size: 14pt;
+  font-family: Oxygen, Arial, sans-serif;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #2e618d;
+
+  /* border-bottom: 1px solid #CECECE; */
 }
 
 .kb-narr-side-panel .btn {
-    border: none;
+  border: none;
 }
 
 /* From user and job state service */
 
 .kbujs-table-container {
-    height: auto;
+  height: auto;
 }
 
 .kbujs-timestamp {
-    color: #0066b9;
-    cursor: pointer;
+  color: #0066b9;
+  cursor: pointer;
 }
 
 .kbujs-error-cell {
-    color: #c7254e;
-    font-weight: bold;
+  color: #c7254e;
+  font-weight: bold;
 }
 
 .kbujs-error:hover {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .kbujs-loading-modal {
-    text-align: center;
-    font-size: 16px;
-    font-weight: bold;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
 }
 
 .kbujs-refresh-btn {
-    position: absolute;
-    right: 5px;
+  position: absolute;
+  right: 5px;
 }
 
 .kbujs-jobs-table {
-    margin-left: auto !important;
-    margin-right: auto !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
 }
 
 .kbujs-loading {
-    height: 100%
-    vertical-align: middle;
-    text-align: center
+  height: 100%;
+  vertical-align: middle;
+  text-align: center;
 }
 
 .kbujs-delete-job {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .kbujs-error-traceback {
-    white-space : nowrap;
-    float : left;
-    max-width : 516px;
-    max-height: 250px;
-    overflow-x : scroll;
-    overflow-y: scroll;
+  white-space: nowrap;
+  float: left;
+  max-width: 516px;
+  max-height: 250px;
+  overflow-x: scroll;
+  overflow-y: scroll;
 }
 
 /* For connecting lines */
 .kb-line {
-    background-color: lightgrey;
-    position: absolute;
+  background-color: lightgrey;
+  position: absolute;
 }
 
-
-
 /* tab.js */
 
 .nav-tabs .glyphicon-remove {
-    margin: 0 0 0 3px;
-    color: #aaa;
+  margin: 0 0 0 3px;
+  color: #aaa;
 }
+
 .nav-tabs .glyphicon-remove:hover {
-    color: #666;
-    cursor: hand;
-    cursor: pointer;
+  color: #666;
+  cursor: hand;
+  cursor: pointer;
 }
 
 /**
@@ -1276,40 +1354,42 @@ div#notebook_panel {
  * the rest of dataTables might...
  */
 .paging_full_numbers {
-    height: 22px;
-    line-height: 22px;
+  height: 22px;
+  line-height: 22px;
 }
+
 .paging_full_numbers a:active {
-    outline: none
+  outline: none;
 }
+
 .paging_full_numbers a:hover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .paging_full_numbers a.paginate_button,
 .paging_full_numbers a.paginate_active {
-    border: 1px solid #aaa;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    padding: 2px 5px;
-    margin: 0 3px;
-    cursor: pointer;
-    *cursor: hand;
-    color: #333 !important;
+  border: 1px solid #aaa;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  padding: 2px 5px;
+  margin: 0 3px;
+  cursor: pointer;
+  *cursor: hand;
+  color: #333 !important;
 }
 
 .paging_full_numbers a.paginate_button {
-    background-color: #ddd;
+  background-color: #ddd;
 }
 
 .paging_full_numbers a.paginate_button:hover {
-    background-color: #ccc;
-    text-decoration: none !important;
+  background-color: #ccc;
+  text-decoration: none !important;
 }
 
 .paging_full_numbers a.paginate_active {
-    background-color: #99B3FF;
+  background-color: #99b3ff;
 }
 
 /** End kbaseNarrFuncResults.css **/
@@ -1317,404 +1397,424 @@ div#notebook_panel {
 /*****************************************************************************
  ** Formerly in kbaseNarrFunc.css
  *****************************************************************************/
+
 /*
  * Styles for KBase Narrative notebook page, function panel
  */
- /* Header for panel */
- .kb-function-header {
-    padding: 10px 0;
-    color: #0064b6;
-    font-weight: bold;
-    background-color: #b6e9f8;
-    text-align: center;
-    margin-bottom: 3px;
+
+/* Header for panel */
+.kb-function-header {
+  padding: 10px 0;
+  color: #0064b6;
+  font-weight: bold;
+  background-color: #b6e9f8;
+  text-align: center;
+  margin-bottom: 3px;
 }
 
 .kb-narr-panel-body {
-    height: calc(100%);
-    padding: 3px;
+  height: calc(100%);
+  padding: 3px;
 }
-.kb-narr-panel-body > div{
-    height: 100%;
+
+.kb-narr-panel-body > div {
+  height: 100%;
 }
+
 .kb-narr-panel-body-wrapper {
-    overflow-y: auto;
-    height: 100%;
+  overflow-y: auto;
+  height: 100%;
 }
-.kb-narr-panel-body-wrapper > div{
-    height: 100%;
+
+.kb-narr-panel-body-wrapper > div {
+  height: 100%;
 }
 
 .kb-narr-panel-toggle {
-    margin-right: 4px;
-    margin-top: -4px;
-    cursor: pointer;
-    color: #888;
-    -webkit-user-select: none; /* Chrome/Safari */
-       -moz-user-select: none; /* Firefox */
-        -ms-user-select: none; /* IE10+ */
+  margin-right: 4px;
+  margin-top: -4px;
+  cursor: pointer;
+  color: #888;
+  -webkit-user-select: none; /* Chrome/Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+ */
 }
 
 /* Container for func list */
 .kb-function-body {
-    height: 100%;
-    /* overflow-y: auto; */
-    width: 100%;
+  height: 100%;
+
+  /* overflow-y: auto; */
+  width: 100%;
 }
 
 .kb-function-body .accordion .panel .panel-body {
-    padding: 0px;
-    padding-left: 5px;
+  padding: 0;
+  padding-left: 5px;
 }
 
 .kb-function-body ul {
-    border: 1px solid #dddddd;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    width: 100%;
+  border: 1px solid #ddd;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
 }
+
 .kb-function-body li {
-    padding: 5px 5px;
-    width: 100%;
-    text-align: left;
+  padding: 5px 5px;
+  width: 100%;
+  text-align: left;
 }
 
 /* alt. rows */
 .kb-function-body li:nth-child(odd) {
-    background-color: #eee;
-    border-bottom: 1px solid #ddd;
+  background-color: #eee;
+  border-bottom: 1px solid #ddd;
 }
+
 .kb-function-body li:nth-child(even) {
-    background-color: #fff;
-    border-bottom: 1px solid #ddd;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
 }
 
 .kb-function-body li:hover {
-    text-decoration: underline;
-    cursor: pointer;
-    background-color: #F4F5D6;
+  text-decoration: underline;
+  cursor: pointer;
+  background-color: #f4f5d6;
 }
 
-
 /* Link to a function */
 .kb-function-body a {
-    text-decoration: none;
+  text-decoration: none;
 }
+
 .kb-function-body a:hover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .kb-function-error {
-    background-color: #f2dede !important;
-    color: #b94a48;
-    border-color: #eed3d7 !important;
+  background-color: #f2dede !important;
+  color: #b94a48;
+  border-color: #eed3d7 !important;
 }
 
 /* Help on a function */
 .kb-function-help {
-    padding: 0 3px;
-    float: right;
-    cursor: pointer;
-    color: #56559e;
-    font-size: 14pt;
+  padding: 0 3px;
+  float: right;
+  cursor: pointer;
+  color: #56559e;
+  font-size: 14pt;
 }
 
 .kb-function-help:hover {
-    color: black;
+  color: black;
 }
 
 .kb-function-help-popup {
-    position: absolute;
-    top: 0px;
-    left: 300px;
-    z-index: 99;
-    cursor: pointer;
-    max-width: 300px;
+  position: absolute;
+  top: 0;
+  left: 300px;
+  z-index: 99;
+  cursor: pointer;
+  max-width: 300px;
 }
 
 .kb-function-help-popup h1 {
-    margin: 0;
-    margin-top: -10px;
-    padding: 0;
-    font-size: 110%;
-    color: #3076A2;
+  margin: 0;
+  margin-top: -10px;
+  padding: 0;
+  font-size: 110%;
+  color: #3076a2;
 }
 
 .kb-function-help-popup h2 {
-    margin: 10px 0 -10px 0;
-    padding-top: 5px;
-    font-size: 80%;
-    color: #999;
-    font-style: italic;
-    text-align: right;
-    font-weight: 100;
+  margin: 10px 0 -10px 0;
+  padding-top: 5px;
+  font-size: 80%;
+  color: #999;
+  font-style: italic;
+  text-align: right;
+  font-weight: 100;
 }
 
 .kb-function-help-popup .header {
-    background-color: #fff;
-    color: #3076A2;
-    font-weight: bold;
-    font-size: 120%;
-    margin: 0;
-    padding: 0;
+  background-color: #fff;
+  color: #3076a2;
+  font-weight: bold;
+  font-size: 120%;
+  margin: 0;
+  padding: 0;
 }
 
 .kb-function-help-popup a {
-    font-weight: bold;
-    text-decoration: underline;
+  font-weight: bold;
+  text-decoration: underline;
 }
 
 .kb-function-help-popup .version {
-    font-size: 80%;
-    color: #666;
+  font-size: 80%;
+  color: #666;
 }
 
 .kb-function-help-popup .body {
-    margin-top: 10px;
-    margin-bottom: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
 }
 
 #kb-function-help {
-    position: absolute;
-    top: 400px;
-    left: 300px;
-    z-index: 99;
-    cursor: pointer;
-    width: 250px;
+  position: absolute;
+  top: 400px;
+  left: 300px;
+  z-index: 99;
+  cursor: pointer;
+  width: 250px;
 }
 
 #kb-function-help h1 {
-    margin: 0;
-    margin-top: -10px;
-    padding: 0;
-    font-size: 110%;
-    color: #3076A2;
+  margin: 0;
+  margin-top: -10px;
+  padding: 0;
+  font-size: 110%;
+  color: #3076a2;
 }
 
 #kb-function-help h2 {
-    margin: 10px 0 -10px 0;
-    padding-top: 5px;
-    font-size: 80%;
-    color: #999;
-    font-style: italic;
-    text-align: right;
-    font-weight: 100;
+  margin: 10px 0 -10px 0;
+  padding-top: 5px;
+  font-size: 80%;
+  color: #999;
+  font-style: italic;
+  text-align: right;
+  font-weight: 100;
 }
 
 #kb-function-error-traceback {
-    white-space : nowrap;
-    float : left;
-    max-width : 250px;
-    overflow-x : scroll;
+  white-space: nowrap;
+  float: left;
+  max-width: 250px;
+  overflow-x: scroll;
 }
 
 .kb-function-dim {
-    background-color: #eee !important;
-    /* border-color: #ddd !important; */
+  background-color: #eee !important;
+
+  /* border-color: #ddd !important; */
 }
 
 .kb-function-dim .panel-heading {
-    background-color: #eee !important;
-    /*border-color: #000 !important; */
+  background-color: #eee !important;
+
+  /* border-color: #000 !important; */
 }
 
 .kb-function-cat-dim {
-    background-color: #ddd !important;
-    border-color: #ddd !important;
+  background-color: #ddd !important;
+  border-color: #ddd !important;
 }
 
 .kb-function-cat-dim .panel-heading {
-    background-color: #ddd !important;
-    border-color: #ddd !important;
+  background-color: #ddd !important;
+  border-color: #ddd !important;
 }
 
 .kb-function-toggle {
-    color: #0088cc;
-    font-style: italic;
-    cursor: pointer;
+  color: #08c;
+  font-style: italic;
+  cursor: pointer;
 }
 
 .kb-cell-toolbar .buttons {
-    font-weight: bold;
-    color: #CECECE !important;
+  font-weight: bold;
+  color: #cecece !important;
 }
 
 .kb-cell-toolbar .btn {
-    border: none;
+  border: none;
 }
 
 .kb-cell-toolbar .icon {
-    display: inline-block;
-    padding: 0;
-    margin-right: 4px;
-    vertical-align: top;
-    overflow: hidden;
+  display: inline-block;
+  padding: 0;
+  margin-right: 4px;
+  vertical-align: top;
+  overflow: hidden;
 }
 
 .kb-cell-toolbar .title {
-    font-size: 120%;
-    font-family: Oxygen, Arial, sans-serif;
-    font-weight: bold;
-    color: #2e618d;
+  font-size: 120%;
+  font-family: Oxygen, Arial, sans-serif;
+  font-weight: bold;
+  color: #2e618d;
 }
 
 .kb-cell-toolbar .subtitle {
-    font-family: "Roboto", Arial, sans-serif;
-    font-size: 90%;
-    color: #666;
+  font-family: "Roboto", Arial, sans-serif;
+  font-size: 90%;
+  color: #666;
 }
 
 .kb-cell-toolbar .info-link {
-    font-family: "Roboto", Arial, sans-serif;
-    font-size: 90%;
-    color: #666;
+  font-family: "Roboto", Arial, sans-serif;
+  font-size: 90%;
+  color: #666;
 }
 
-
 .kb-toolbar-open {
-    border-bottom: 1px solid #CCC;
-    border-radius: 0;
+  border-bottom: 1px solid #ccc;
+  border-radius: 0;
 }
 
 .selected .kb-toolbar-open {
-    border-left: 1px solid #4BB856;
-    border-bottom: 1px solid #4BB856;
-    background-color: #dff0d8;
+  border-left: 1px solid #4bb856;
+  border-bottom: 1px solid #4bb856;
+  background-color: #dff0d8;
 }
 
 .unselected .kb-toolbar-open {
-    background-color: none;
+  background-color: none;
 }
 
 .selected.kb-error .kb-toolbar-open {
-    border-color: #D9534F;
-    background-color: #F2DEDE;
+  border-color: #d9534f;
+  background-color: #f2dede;
 }
 
 /* ------------------------------------------------- */
+
 /* IPython cells */
 
 .kb-cell-run {
-    z-index: auto;
-    opacity: 1;
+  z-index: auto;
+  opacity: 1;
 }
+
 .kb-cell-run h1 {
-    font-family: 'Roboto';
-    font-weight: normal;
-    font-size: 12pt;
-    line-height: 15px;
-    color: #2E618D;
-    margin: 3px 13px 3px 3px;
-    opacity: inherit;
-    display: inline;
+  font-family: "Roboto";
+  font-weight: normal;
+  font-size: 12pt;
+  line-height: 15px;
+  color: #2e618d;
+  margin: 3px 13px 3px 3px;
+  opacity: inherit;
+  display: inline;
 }
+
 .kb-cell-run div.kb-func-desc {
-    opacity: inherit;
-    display: block;
+  opacity: inherit;
+  display: block;
 }
 
 .kb-cell-run h2 {
-    font-family: 'Roboto';
-    font-weight: normal;
-    font-size: 11pt;
-    line-height: 150%;
-    color: #666666;
-    margin: 3px;
-    opacity: inherit;
+  font-family: "Roboto";
+  font-weight: normal;
+  font-size: 11pt;
+  line-height: 150%;
+  color: #666;
+  margin: 3px;
+  opacity: inherit;
 }
+
 .kb-cell-run form input[type="submit"] {
-    float: right;
-    opacity: inherit;
-    margin-top: 5px;
+  float: right;
+  opacity: inherit;
+  margin-top: 5px;
 }
+
 .kb-cell-run form .buttons {
-    float: right;
-    margin-top: 5px;
+  float: right;
+  margin-top: 5px;
 }
+
 .kb-cell-params table {
-    border: none;
-    margin-bottom: 10px;
-    opacity: inherit;
-    margin-left: auto;
-    margin-right: auto;
+  border: none;
+  margin-bottom: 10px;
+  opacity: inherit;
+  margin-left: auto;
+  margin-right: auto;
 }
-.kb-cell-params table > tr,td {
-    border: none;
-    vertical-align: middle;
+
+.kb-cell-params table > tr,
+td {
+  border: none;
+  vertical-align: middle;
 }
 
-.kb-cell-params thead>tr>th,
-.kb-cell-params tbody>tr>th,
-.kb-cell-params tfoot>tr>th,
-.kb-cell-params thead>tr>td,
-.kb-cell-params tbody>tr>td,
-.kb-cell-params tfoot>tr>td {
-    padding: 2px 4px;
+.kb-cell-params thead > tr > th,
+.kb-cell-params tbody > tr > th,
+.kb-cell-params tfoot > tr > th,
+.kb-cell-params thead > tr > td,
+.kb-cell-params tbody > tr > td,
+.kb-cell-params tfoot > tr > td {
+  padding: 2px 4px;
 }
 
-.kb-cell-params tr:hover td, .kb-cell-params tr:hover th {
-    background:#eee;
+.kb-cell-params tr:hover td,
+.kb-cell-params tr:hover th {
+  background: #eee;
 }
 
 /* grey out the form while running */
 .kb-cell-run.running form {
-    opacity: 0.6;
+  opacity: 0.6;
 }
+
 /* progress "meter" */
 .kb-cell-progress {
-    display: none;
+  display: none;
 }
+
 .kb-cell-progress.running {
-    display: block;
+  display: block;
 }
 
 .kb-cell-progressbar {
-    width: 400px;
-    height: 20px;
+  width: 400px;
+  height: 20px;
 }
 
 .kb-out-desc {
-    font-family: 'Roboto';
-    font-weight: normal;
-    font-size: 12pt;
-    line-height: 15px;
-    color: #2E618D;
-    margin: 3px;
-    opacity: inherit;
-    display: inline;
+  font-family: "Roboto";
+  font-weight: normal;
+  font-size: 12pt;
+  line-height: 15px;
+  color: #2e618d;
+  margin: 3px;
+  opacity: inherit;
+  display: inline;
 }
 
 .kb-err-desc {
-    font-family: 'Roboto';
-    font-weight: normal;
-    font-size: 12pt;
-    line-height: 15px;
-    color: #A94442;
-    margin: 3px;
-    opacity: inherit;
-    display: inline;
+  font-family: "Roboto";
+  font-weight: normal;
+  font-size: 12pt;
+  line-height: 15px;
+  color: #a94442;
+  margin: 3px;
+  opacity: inherit;
+  display: inline;
 }
 
 .kb-err-msg {
-    font-size: 80% !important;
+  font-size: 80% !important;
 }
 
 .kb-out-header {
-    background-color: #ddd;
-    padding: 10px;
+  background-color: #ddd;
+  padding: 10px;
 }
 
 .kb-func-timestamp {
-    color: #555;
-    font-size: 10pt;
-    font-family: 'Roboto';
-    margin-top: -3px;
-    padding-right: 1em;
+  color: #555;
+  font-size: 10pt;
+  font-family: "Roboto";
+  margin-top: -3px;
+  padding-right: 1em;
 }
 
 .unselected .kb-func-timestamp {
-    color: silver;
+  color: silver;
 }
 
 .kb-func-panel {
@@ -1730,11 +1830,9 @@ div#notebook_panel {
   padding: 5px 10px;
 }
 
-
-
 .kb-func-panel .panel-body {
-    padding: 0px 10px;
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+  padding: 0 10px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .kb-func-panel > .panel-heading + .panel-collapse .panel-body {
@@ -1747,20 +1845,20 @@ div#notebook_panel {
 
 /** output cell styling */
 .kb-cell-output .panel {
-    border-radius: 0px;
+  border-radius: 0;
 }
 
 .kb-cell-output-content {
-    overflow-x: auto;
-    padding: 5px;
+  overflow-x: auto;
+  padding: 5px;
 }
 
 .kb-cell-output .panel .panel-heading {
-    padding: 5px 10px;
+  padding: 5px 10px;
 }
 
 .rendered_html .kb-cell-output ul {
-    margin: 0 0 10px 0;
+  margin: 0 0 10px 0;
 }
 
 /* override from some jupyter style? */
@@ -1768,116 +1866,123 @@ div#notebook_panel {
   text-decoration: none;
 }
 
-.kb-cell-output .nav>li>a {
-    padding: 5px 10px;
+.kb-cell-output .nav > li > a {
+  padding: 5px 10px;
 }
 
 .kb-cell-error .panel-heading {
-    background-image: none;
-    padding: 5px 10px;
+  background-image: none;
+  padding: 5px 10px;
 }
+
 /*** styling for the jobs manager */
 .kb-jobs-title {
-    font-family: Oxygen, Arial, sans-serif;
-    font-weight: bold;
-    color: #185A85;
-    font-size: 1.2em;
+  font-family: Oxygen, Arial, sans-serif;
+  font-weight: bold;
+  color: #185a85;
+  font-size: 1.2em;
 }
 
 .kb-jobs-title .glyphicon-info-sign {
-    font-size: 0.9em;
+  font-size: 0.9em;
 }
 
 .kb-jobs-info-table {
-    margin: 0 2px;
-    width: 95%;
+  margin: 0 2px;
+  width: 95%;
 }
 
 .kb-jobs-info-table th {
-    font-family: Oxygen, Arial, sans-serif;
-    font-weight: bold;
-    color: #777;
-    vertical-align:top;
-    padding-right: 5px;
-    width: 30%;
-    max-width: 30%;
-    min-width: 30%;
-
+  font-family: Oxygen, Arial, sans-serif;
+  font-weight: bold;
+  color: #777;
+  vertical-align: top;
+  padding-right: 5px;
+  width: 30%;
+  max-width: 30%;
+  min-width: 30%;
 }
 
 .kb-jobs-item {
-    border-bottom: 2px solid #dddddd;
-    margin-bottom: 5px;
-    padding-bottom: 3px;
+  border-bottom: 2px solid #ddd;
+  margin-bottom: 5px;
+  padding-bottom: 3px;
 }
 
 .kb-jobs-error {
-    background-color: #f2dede;
+  background-color: #f2dede;
 }
+
 .kb-jobs-error-btn {
-    font-size: 10pt;
+  font-size: 10pt;
 }
+
 .kb-jobs-item:last-child {
-    border-bottom: none;
+  border-bottom: none;
 }
 
 .kb-jobs-error-modal {
-    width: 485px;
-    word-wrap: break-word;
-    max-height: 220px;
-    overflow-y: auto;
-    overflow-x: hidden;
+  width: 485px;
+  word-wrap: break-word;
+  max-height: 220px;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 /** new method parameter styling **/
 .kb-method-parameter-panel {
-   border-left: 3px solid #fff;
+  border-left: 3px solid #fff;
 }
+
 .kb-method-parameter-panel-hover {
-   border-left: 3px solid #428bca;
+  border-left: 3px solid #428bca;
 }
+
 .kb-method-parameter-row {
-   margin:0px;
-   padding:5px;
-   border-radius:5px;
+  margin: 0;
+  padding: 5px;
+  border-radius: 5px;
 }
+
 /* for some reason, the css :hover doesn't work right on this div, so we use jquery to toggle this class */
 .kb-method-parameter-row-hover {
-   background:#F9F9F9;
+  background: #f9f9f9;
 }
 
 .kb-method-parameter-row-error {
-   background: #f2dede;
+  background: #f2dede;
 }
+
 .kb-method-parameter-error-mssg {
-   padding:5px;
-   text-align:center;
-   font-family: Oxygen, sans-serif;
-   font-weight: bold;
-   font-size: 9pt;
-   color:#F44336;
+  padding: 5px;
+  text-align: center;
+  font-family: Oxygen, sans-serif;
+  font-weight: bold;
+  font-size: 9pt;
+  color: #f44336;
 }
 
-
 /* not sure how to get text in these divs to valign middle... */
 .kb-method-parameter-name {
-   font-family: Oxygen, sans-serif;
-   font-weight: bold;
-   color:#777;
-   text-align:right;
-   vertical-align:middle;
-   margin-top:3px;
-   padding-right:0px;
-   padding-left:0px;
-   white-space: normal;
+  font-family: Oxygen, sans-serif;
+  font-weight: bold;
+  color: #777;
+  text-align: right;
+  vertical-align: middle;
+  margin-top: 3px;
+  padding-right: 0;
+  padding-left: 0;
+  white-space: normal;
 }
+
 .kb-method-parameter-input {
-   vertical-align:middle;
-   white-space: nowrap;
-   padding-left:10px;
+  vertical-align: middle;
+  white-space: nowrap;
+  padding-left: 10px;
 }
+
 .kb-method-parameter-input input {
-   font-weight: bold;
+  font-weight: bold;
 }
 
 /*
@@ -1892,162 +1997,173 @@ in the column in which the icon lives, and does this by shrinking the select
 control with padding, and then scooting the icon back into its column.
 */
 .kb-method-parameter-input > div {
-    /* allow space for the required (red arrow), satisfied (green checkbox) icon */
-    padding-right: 20px;
+  /* allow space for the required (red arrow), satisfied (green checkbox) icon */
+  padding-right: 20px;
 }
+
 .kb-method-parameter-input .kb-method-parameter-accepted-glyph,
 .kb-method-parameter-input .kb-method-parameter-required-glyph {
-    /* This scoots the icon inside */
-    margin-left: -15px;
-    font-size: 15px;
+  /* This scoots the icon inside */
+  margin-left: -15px;
+  font-size: 15px;
 }
+
 .kb-method-parameter-hint {
-    padding-left: 7px;
+  padding-left: 7px;
 }
 
 .kb-parameter-data-selection {
-   font-weight: bold;
+  font-weight: bold;
 }
 
 .kb-method-parameter-hint {
-   color: #777;
-   text-align:left;
-   margin-top:3px;
+  color: #777;
+  text-align: left;
+  margin-top: 3px;
 }
 
 .kb-method-parameter-required-glyph {
-   color: #F44336;
-   margin-left:7px;
+  color: #f44336;
+  margin-left: 7px;
 }
+
 .kb-method-parameter-accepted-glyph {
-   color: #4BB856;
-   margin-left:7px;
+  color: #4bb856;
+  margin-left: 7px;
 }
 
 .kb-method-parameter-info {
-   color: #777;
-   margin-left:7px;
+  color: #777;
+  margin-left: 7px;
 }
 
 .kb-parameter-data-row-remove {
-   color: #777;
+  color: #777;
 }
+
 .kb-parameter-data-row-add {
-   color: #777;
+  color: #777;
 }
 
-
 .kb-method-advanced-options-controller-inactive {
-   font-family: Oxygen, sans-serif;
-   font-weight: bold;
-   font-style: italic;
-   font-size: 10pt;
-   line-height: 14px;
-   color: #777;
-   text-align: center;
+  font-family: Oxygen, sans-serif;
+  font-weight: bold;
+  font-style: italic;
+  font-size: 10pt;
+  line-height: 14px;
+  color: #777;
+  text-align: center;
 }
+
 .kb-method-advanced-options-controller {
-   font-family: Oxygen, sans-serif;
-   font-weight: bold;
-   font-style: italic;
-   cursor:pointer;
-   font-size: 10pt;
-   line-height: 14px;
-   color: #0088cc;
-   text-align: center;
+  font-family: Oxygen, sans-serif;
+  font-weight: bold;
+  font-style: italic;
+  cursor: pointer;
+  font-size: 10pt;
+  line-height: 14px;
+  color: #08c;
+  text-align: center;
 }
+
 .kb-method-advanced-options-controller:hover {
-    color: #2a6496;
+  color: #2a6496;
 }
 
 .kb-method-footer {
-    width: 100%;
-    overflow: none;
-    background-color: #F5F5F5;
-    padding: 10px;
+  width: 100%;
+  overflow: none;
+  background-color: #f5f5f5;
+  padding: 10px;
 }
 
 .kb-method-subtitle {
-    background-color: #F5F5F5;
-    padding: 3px 5px;
+  background-color: #f5f5f5;
+  padding: 3px 5px;
 }
 
-/* -- App/method panel styling --*/
+/* -- App/method panel styling -- */
 
 .kb-app-panel {
-    border-radius: 0px;
+  border-radius: 0;
 }
 
 .kb-app-error {
-    background-color: #F2DEDE;
+  background-color: #f2dede;
 }
 
 .kb-app-step-container {
-    margin-top: 6px;
-}
-.kb-app-panel > .panel-footer {
-    border: 0;
-    border-radius: 0px;
+  margin-top: 6px;
 }
 
-.kb-app-func-panel {
+.kb-app-panel > .panel-footer {
+  border: 0;
+  border-radius: 0;
 }
 
 .kb-app-panel-description {
-    font-family: 'Roboto';
-    font-weight: normal;
-    font-size: 12pt;
-    line-height: 15px;
-    color: #2E618D;
+  font-family: "Roboto";
+  font-weight: normal;
+  font-size: 12pt;
+  line-height: 15px;
+  color: #2e618d;
 }
+
 .kb-app-step-error-mssg {
-   font-family: sans-serif;
-   font-size: 11pt;
-   line-height: 14px;
-   color: #A63232;
-   text-align: left;
-   /* pading-left:30px; */
-   margin:10px;
+  font-family: sans-serif;
+  font-size: 11pt;
+  line-height: 14px;
+  color: #a63232;
+  text-align: left;
+
+  /* pading-left:30px; */
+  margin: 10px;
 }
+
 .kb-app-step-error-heading {
-   font-family: Oxygen, sans-serif;
-   font-weight: bold;
-   font-size: 13pt;
-   line-height: 14px;
-   color: #555;
-   text-align: left;
-   padding-left:5px;
-   margin-top:20px;
+  font-family: Oxygen, sans-serif;
+  font-weight: bold;
+  font-size: 13pt;
+  line-height: 14px;
+  color: #555;
+  text-align: left;
+  padding-left: 5px;
+  margin-top: 20px;
 }
+
 .kb-app-step-error-main-heading {
-   font-family: Oxygen, sans-serif;
-   cursor:pointer;
-   font-size: 16pt;
-   line-height: 18px;
-   color:#555;
-   /*background:#f2dede;*/
-   text-align: left;
-   padding-left:20px;
-   margin-top:20px;
+  font-family: Oxygen, sans-serif;
+  cursor: pointer;
+  font-size: 16pt;
+  line-height: 18px;
+  color: #555;
+
+  /* background:#f2dede; */
+  text-align: left;
+  padding-left: 20px;
+  margin-top: 20px;
 }
 
 .kb-app-step-error {
-    border: 3px solid #D14836;
-    z-index: auto;
+  border: 3px solid #d14836;
+  z-index: auto;
 }
 
 .kb-app-step-running {
-    border: 3px solid #2196F3;
-    z-index: auto;
-    /*animation: pulse 1s ease infinite;
+  border: 3px solid #2196f3;
+  z-index: auto;
+
+  /* animation: pulse 1s ease infinite;
     -webkit-animation: pulse 1s ease infinite; */
-    /*opacity: 0.7;*/
+
+  /* opacity: 0.7; */
 }
 
 /* -- "next steps" text and links -- */
 .kb-app-next {
-  border-top: 2px solid #CECECE;
+  border-top: 2px solid #cecece;
 }
+
 .kb-app-next h3 {
   font-family: Roboto, Helvetica, Arial, sans-serif;
   font-size: 0.9em;
@@ -2059,207 +2175,237 @@ control with padding, and then scooting the icon back into its column.
   -webkit-margin-before: 0;
   -webkit-margin-after: 0.25em;
 }
+
 .kb-app-next-hide {
   float: right;
-  color: #2196F3;
+  color: #2196f3;
   font-family: Roboto, Helvetica, Arial, sans-serif;
   font-size: 0.9em;
   margin-top: 0.25em;
   margin-right: 0.5em;
 }
+
 .kb-app-next-unhide {
-  color: #2196F3;
+  color: #2196f3;
   font-family: Roboto, Helvetica, Arial, sans-serif;
   font-size: 0.9em;
   margin-top: 0.25em;
 }
-.kb-app-next div { /* container for links */
+
+.kb-app-next div {
+  /* container for links */
   clear: both;
 }
 
-/* -- END method/app styling --*/
+/* -- END method/app styling -- */
 
 @-webkit-keyframes pulse {
-  0% { opacity: 1.0; }
-  50% { opacity: 0.7; }
-  100% { opacity: 1.0; }
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes pulse {
-  0% { opacity: 1.0; }
-  50% { opacity: 0.7; }
-  100% { opacity: 1.0; }
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+  }
 }
 
 button.kb-app-run {
-    background-color: #2196F3;
-    border-radius: 1px;
-    color: #fff;
-    border: none;
-    padding: 10px 20px;
-    font-size: 13px;
-    box-shadow: 1px 1px 1px #ccc;
-    -webkit-box-shadow: 1px 1px 1px #ccc;
-    moz-box-shadow: 1px 1px 1px #ccc;
+  background-color: #2196f3;
+  border-radius: 1px;
+  color: #fff;
+  border: none;
+  padding: 10px 20px;
+  font-size: 13px;
+  box-shadow: 1px 1px 1px #ccc;
+  -webkit-box-shadow: 1px 1px 1px #ccc;
+  moz-box-shadow: 1px 1px 1px #ccc;
 }
+
 button.kb-app-run:hover {
-    background-color: #1E88E5;
+  background-color: #1e88e5;
 }
+
 button.kb-app-run.kb-app-cancel {
-    background-color: #F44336;
+  background-color: #f44336;
 }
+
 button.kb-app-run.kb-app-cancel:hover {
-    background-color: #E53935;
+  background-color: #e53935;
 }
 
-
 button.kb-method-run {
-    background-color: #2196F3;
-    border-radius: 1px;
-    color: #fff;
-    border: none;
-    padding: 10px 20px;
-    font-size: 13px;
-    box-shadow: 1px 1px 1px #ccc;
-    -webkit-box-shadow: 1px 1px 1px #ccc;
-    moz-box-shadow: 1px 1px 1px #ccc;
+  background-color: #2196f3;
+  border-radius: 1px;
+  color: #fff;
+  border: none;
+  padding: 10px 20px;
+  font-size: 13px;
+  box-shadow: 1px 1px 1px #ccc;
+  -webkit-box-shadow: 1px 1px 1px #ccc;
+  moz-box-shadow: 1px 1px 1px #ccc;
 }
+
 button.kb-method-run:hover {
-    background-color: #1E88E5;
+  background-color: #1e88e5;
 }
 
-
 /***********
  * END of kbaseNarrFunc.css
  ***********/
 
-
 /*********
  * From kbaseData.css
  *********/
+
 /*
 For data in KBase workspace
 */
 .modal-body {
-    max-height: 100%;
+  max-height: 100%;
 }
 
 /* === Tooltips  === */
+
 /* see bootstrap styles, e.g. bootstrap.css, for the original definitions */
 div[class="tooltip-inner"] {
-    max-width: 400px;
-    white-space: pre-wrap;
-    text-align: left;
+  max-width: 400px;
+  white-space: pre-wrap;
+  text-align: left;
 }
+
 .notebook_app .tooltip {
-    z-index: 2000 !important;
+  z-index: 2000 !important;
 }
+
 .notebook_app .tooltip-inner {
-    background-color: #1B69B6;
+  background-color: #1b69b6;
 }
+
 .notebook_app .tooltip.top .tooltip-arrow {
-  border-top-color: #1B69B6;
+  border-top-color: #1b69b6;
 }
+
 .notebook_app .tooltip.top-left .tooltip-arrow {
-  border-top-color: #1B69B6;
+  border-top-color: #1b69b6;
 }
+
 .notebook_app .tooltip.top-right .tooltip-arrow {
-  border-top-color: #1B69B6;
+  border-top-color: #1b69b6;
 }
+
 .notebook_app .tooltip.right .tooltip-arrow {
-  border-right-color: #1B69B6;
+  border-right-color: #1b69b6;
 }
+
 .notebook_app .tooltip.left .tooltip-arrow {
-  border-left-color: #1B69B6;
+  border-left-color: #1b69b6;
 }
+
 .notebook_app .tooltip.bottom .tooltip-arrow {
-  border-bottom-color: #1B69B6;
+  border-bottom-color: #1b69b6;
 }
+
 .notebook_app .tooltip.bottom-left .tooltip-arrow {
-  border-bottom-color: #1B69B6;
+  border-bottom-color: #1b69b6;
 }
+
 .notebook_app .tooltip.bottom-right .tooltip-arrow {
-  border-bottom-color: #1B69B6;
+  border-bottom-color: #1b69b6;
 }
 
 .kb-data-main-panel {
-    height: 100%;
-    margin-bottom: 5px;
-    max-height: 425px;
+  height: 100%;
+  margin-bottom: 5px;
+  max-height: 425px;
 }
 
-#kb-ws {
-/*    background-color: #fff;
-    width: 100%;
-    padding-bottom: 5px;
-    height: 425px !important;
-*/}
-
 #data-tabs {
-    height: 375px !important;
+  height: 375px !important;
 }
 
 .kb-ws-refresh-btn {
-    position: absolute;
-    right: 5px;
-
+  position: absolute;
+  right: 5px;
 }
 
 #kb-ws .form-control {
-    width: 85%;
-    margin: 3px;
+  width: 85%;
+  margin: 3px;
 }
 
 .kb-data-control {
-    width: 95%;
+  width: 95%;
 }
 
 /* Data table */
-.kb-data-table thead{
-    max-width: 100%;
-    width: 281px;
+.kb-data-table thead {
+  max-width: 100%;
+  width: 281px;
 }
+
 .kb-data-table {
-    max-height: 265px;
-    width: 100% !important;
+  max-height: 265px;
+  width: 100% !important;
 }
+
 .kb-data-table tbody tr {
-    border-bottom: 1px solid gainsboro;
+  border-bottom: 1px solid gainsboro;
 }
 
 .kb-data-table tbody tr td {
-    max-height: 16px;
-    padding: 5px;
-    font-size: 1em;
-    max-width: 100px;
+  max-height: 16px;
+  padding: 5px;
+  font-size: 1em;
+  max-width: 100px;
 }
 
-.kb-data-table tbody tr:hover, .kb-data-table tbody tr td.highlighted {
-    background-color: #F4F5D6;
-    cursor: pointer;
+.kb-data-table tbody tr:hover,
+.kb-data-table tbody tr td.highlighted {
+  background-color: #f4f5d6;
+  cursor: pointer;
 }
 
 .kb-data-obj-name {
-    text-overflow: ellipsis;
-    overflow:hidden;
-    white-space: nowrap;
-    display: inline-block;
-    max-width: 88%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  max-width: 88%;
 }
 
 .kb-data-loading {
-    height: 100%;
-    vertical-align: middle;
-    text-align: center
+  height: 100%;
+  vertical-align: middle;
+  text-align: center;
 }
 
 .kb-data-loading img {
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
-#kb-ws .dataTables_filter { display: none; }
+#kb-ws .dataTables_filter {
+  display: none;
+}
 
-/*------------------------------------------
+/* ------------------------------------------
  * View details on KBase objects
  *
  * Namespace: kb-data-obj
@@ -2267,71 +2413,86 @@ div[class="tooltip-inner"] {
 
 /*  Button to activate the object pane */
 button.kb-data-obj {
-    float: right;
+  float: right;
 }
+
 /* Panel */
 .kb-data-obj-panel {
-    background: linear-gradient(to bottom, #00d2ff, #B2ADCB);
-    padding: 0;
-    margin: 10px;
+  background: linear-gradient(to bottom, #00d2ff, #b2adcb);
+  padding: 0;
+  margin: 10px;
 }
+
 .kb-data-obj-panel button.close {
-    margin: 5px;
-    font-size: 125%;
+  margin: 5px;
+  font-size: 125%;
 }
+
 .kb-data-obj-panel-info {
-    background: rgba(255,255,255,0.5);
-    height: 100%;
-    padding: 10px;
+  background: rgba(255, 255, 255, 0.5);
+  height: 100%;
+  padding: 10px;
 }
+
 .kb-data-obj-panel-graph {
-    background: transparent;
-    height: 100%;
-    padding: 10px;
+  background: transparent;
+  height: 100%;
+  padding: 10px;
 }
+
 .kb-data-obj-panel-info dl {
-    margin: 0;
+  margin: 0;
 }
+
 .kb-data-obj-panel-info dl dt {
-    float: left;
-    clear: left;
-    width: 90px;
-    text-align: right;
-    color: rgba(0, 0, 0, 0.5);
-    /*padding: 0 0 5px 0;*/
+  float: left;
+  clear: left;
+  width: 90px;
+  text-align: right;
+  color: rgba(0, 0, 0, 0.5);
+
+  /* padding: 0 0 5px 0; */
 }
-.kb-data-obj-panel-info dl dt:after {
-    content: ":";
+
+.kb-data-obj-panel-info dl dt::after {
+  content: ":";
 }
+
 .kb-data-obj-panel-info dl dd {
-    margin: 0 0 0 100px;
-    /*padding: 0 0 5px 0;*/
+  margin: 0 0 0 100px;
+
+  /* padding: 0 0 5px 0; */
 }
+
 .kb-data-obj-panel-verlist span {
-    padding: 0px 5px;
-    margin-left: 3px;
-    border-radius: 2px;
-    background-color: rgba(255,255,255,0.5);
-    color: rgba(0,0,0,0.5);
-    cursor: pointer;
+  padding: 0 5px;
+  margin-left: 3px;
+  border-radius: 2px;
+  background-color: rgba(255, 255, 255, 0.5);
+  color: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
 }
+
 .kb-data-obj-panel-verlist span.selected {
-    background-color: #2196F3;
-    color: white;
-    cursor: default;
+  background-color: #2196f3;
+  color: white;
+  cursor: default;
 }
+
 .kb-data-obj-panel-graph table {
-    background-color: rgba(255, 255, 255, 0.9);
-    width: 100%;
-    border: none;
-    color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(255, 255, 255, 0.9);
+  width: 100%;
+  border: none;
+  color: rgba(0, 0, 0, 0.8);
 }
+
 .kb-data-obj-panel-graph thead tr {
-    background-color: rgb(230, 230, 230);
-    color: rgba(0, 0, 0, 1);
+  background-color: rgb(230, 230, 230);
+  color: rgba(0, 0, 0, 1);
 }
+
 .kb-data-obj-graph-ref-to {
-    margin-top: 8px;
+  margin-top: 8px;
 }
 
 /*
@@ -2341,930 +2502,953 @@ button.kb-data-obj {
 
 /* default blue button in the new style */
 .kb-primary-btn {
-    background-color: #2196F3;
-    border-radius: 1px;
-    color: #fff;
-    border: none;
-    padding: 10px 20px;
-    margin: 3px;
-    font-size: 14px;
-    font-family: "Roboto",Helvetica,Arial,sans-serif;
-    font-weight: 400;
-    box-shadow: 1px 1px 3px #aaa;
+  background-color: #2196f3;
+  border-radius: 1px;
+  color: #fff;
+  border: none;
+  padding: 10px 20px;
+  margin: 3px;
+  font-size: 14px;
+  font-family: "Roboto", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  box-shadow: 1px 1px 3px #aaa;
 }
+
 .kb-primary-btn:hover {
-    background-color: #1E88E5;
+  background-color: #1e88e5;
 }
+
 .kb-primary-btn[disabled] {
-    box-shadow: none;
-    background-color: #BBDEFB;
-    color: #fff;
+  box-shadow: none;
+  background-color: #bbdefb;
+  color: #fff;
 }
+
 /* gray button in the new style */
 .kb-default-btn {
-    background-color: #F5F5F5;
-    border-radius: 1px;
-    color: #555;
-    border: none;
-    padding: 10px 20px;
-    margin: 3px;
-    font-size: 14px;
-    font-family: "Roboto",Helvetica,Arial,sans-serif;
-    font-weight: 400;
-    box-shadow: 1px 1px 3px #aaa;
+  background-color: #f5f5f5;
+  border-radius: 1px;
+  color: #555;
+  border: none;
+  padding: 10px 20px;
+  margin: 3px;
+  font-size: 14px;
+  font-family: "Roboto", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  box-shadow: 1px 1px 3px #aaa;
 }
+
 .kb-default-btn:hover {
-    background-color: #CECECE;
+  background-color: #cecece;
 }
+
 .kb-default-btn[disabled] {
-    box-shadow: none;
-    color: #aaa;
+  box-shadow: none;
+  color: #aaa;
 }
 
 .kb-btn-sm {
-    padding: 5px 10px;
-    font-size: 13px;
+  padding: 5px 10px;
+  font-size: 13px;
 }
 
 /* card layout */
 
-.narrative-card-logo{
-    display: flex;
-    width: 50px;
-    margin-right: 2px;
+.narrative-card-logo {
+  display: flex;
+  width: 50px;
+  margin-right: 2px;
 }
 
-.narrative-card-row-main{
-    display: flex;
-    align-items: center;
-    width:98%;
-    margin:0px 2px;
-    padding:0px 4px;
+.narrative-card-row-main {
+  display: flex;
+  align-items: center;
+  width: 98%;
+  margin: 0 2px;
+  padding: 0 4px;
 }
 
-.narrative-data-list-subcontent{
-    padding-left :10px;
+.narrative-data-list-subcontent {
+  padding-left: 10px;
 }
 
-.narrative-card-ellipsis{
-    display:flex;
-    align-items: center;
-    justify-content: center;
-    width:20px;
+.narrative-card-ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
 }
 
-
-.narrative-card-palette-icon{
-    position: relative;
-    color: '#888';
-    left: 15px;
-    top: -50px;
+.narrative-card-palette-icon {
+  position: relative;
+  color: "#888";
+  left: 15px;
+  top: -50px;
 }
 
-
-.narrative-card-action-button-wrapper{
-    width: 80px;
-    height: 50px;
-    margin: 0px 10px;
+.narrative-card-action-button-wrapper {
+  width: 80px;
+  height: 50px;
+  margin: 0 10px;
 }
 
-
-.narrative-card-action-button{
-    width: calc(100% - 6px);
-    height: 80%;
-    display: flex;
-    padding: 0px;
-    justify-content: center;
+.narrative-card-action-button {
+  width: calc(100% - 6px);
+  height: 80%;
+  display: flex;
+  padding: 0;
+  justify-content: center;
 }
 
-.narrative-card-action-button > span{
-    margin-right: 5px;
+.narrative-card-action-button > span {
+  margin-right: 5px;
 }
-.narrative-card-action-button-name{
-    display: inline-block;
+
+.narrative-card-action-button-name {
+  display: inline-block;
 }
-.narrative-data-panel-btnToolbar > span{
-    color: #888;
+
+.narrative-data-panel-btnToolbar > span {
+  color: #888;
 }
-.narrative-data-panel-btnToolbar{
-    display: flex;
-    justify-content: center;
+
+.narrative-data-panel-btnToolbar {
+  display: flex;
+  justify-content: center;
 }
 
 /* data list */
-.kb-data-list-obj-row, .narrative-card-row{
-    transition: all 0.1s ease;
-
-    border-left-style: solid;
-    border-left-width: 5px;
-    border-left-color: #fff;
-    color:#333;
-
-    box-shadow: 1px 1px 1px 1px #fff;
-    --webkit-box-shadow: 1px 1px 1px 1px #fff;
-    --moz-box-shadow: 1px 1px 1px 1px #fff;
+.kb-data-list-obj-row,
+.narrative-card-row {
+  transition: all 0.1s ease;
+  border-left-style: solid;
+  border-left-width: 5px;
+  border-left-color: #fff;
+  color: #333;
+  box-shadow: 1px 1px 1px 1px #fff;
 
+  --webkit-box-shadow: 1px 1px 1px 1px #fff;
+  --moz-box-shadow: 1px 1px 1px 1px #fff;
 }
 
-
 .kb-function-dim .kb-data-list-obj-row {
-    border-left-color: #eee;
-
+  border-left-color: #eee;
 }
 
-.kb-data-list-obj-row:hover, .narrative-card-row:hover {
-    border-left-style: solid;
-    border-left-width: 5px;
-    border-left-color: #4BB856;
-
-    box-shadow: 1px 1px 1px 1px #aaa;
-    -webkit-box-shadow: 1px 1px 1px 1px #aaa;
-    moz-box-shadow: 1px 1px 1px 1px #aaa;
+.kb-data-list-obj-row:hover,
+.narrative-card-row:hover {
+  border-left-style: solid;
+  border-left-width: 5px;
+  border-left-color: #4bb856;
+  box-shadow: 1px 1px 1px 1px #aaa;
+  -webkit-box-shadow: 1px 1px 1px 1px #aaa;
+  moz-box-shadow: 1px 1px 1px 1px #aaa;
 }
 
 .palette {
-    background: #F5F5F5 !important;
+  background: #f5f5f5 !important;
 }
 
 .kb-data-list-obj-row-selected {
-    border-left-style: solid;
-    border-left-width: 5px;
-    border-left-color: #4BB856;
-    box-shadow: 1px 1px 1px 1px #aaa;
-    -webkit-box-shadow: 1px 1px 1px 1px #aaa;
-    moz-box-shadow: 1px 1px 1px 1px #aaa;
+  border-left-style: solid;
+  border-left-width: 5px;
+  border-left-color: #4bb856;
+  box-shadow: 1px 1px 1px 1px #aaa;
+  -webkit-box-shadow: 1px 1px 1px 1px #aaa;
+  moz-box-shadow: 1px 1px 1px 1px #aaa;
 }
 
-
 .kb-data-list-obj-row-main {
-    width:100%;
-    margin:0px;
-    padding:0px;
+  width: 100%;
+  margin: 0;
+  padding: 0;
 }
 
 /* again the css hover over div inherits strangly, so we use js */
 .kb-data-list-nav-buttons {
-    padding: 5px 8px;
-    font-size: 18px;
-    border: none;
-    text-shadow: none !important;
-    box-shadow: none;
-    -webkit-box-shadow: none;
-    moz-box-shadow: none;
-    margin: 0;
+  padding: 5px 8px;
+  font-size: 18px;
+  border: none;
+  text-shadow: none !important;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  moz-box-shadow: none;
+  margin: 0;
 }
 
 .kb-data-list-add-data-button {
+  cursor: pointer;
+  background-color: #4379b1;
+  color: #fff;
+  border: none;
+  box-shadow: 1px 1px 3px #aaa;
+  -webkit-box-shadow: 1px 1px 3px #aaa;
+  moz-box-shadow: 1px 1px 3px #aaa;
+  text-align: center;
+  width: 30pt;
+  height: 30pt;
+  border-radius: 50%;
+}
 
-    cursor:pointer;
-    background-color: #4379B1;
-    color: #fff;
-    border: none;
-    box-shadow: 1px 1px 3px #aaa;
-    -webkit-box-shadow: 1px 1px 3px #aaa;
-    moz-box-shadow: 1px 1px 3px #aaa;
-    text-align: center;
+/* specialize buttons that hover over narrative */
+#kb-add-code-cell,
+#kb-add-md-cell {
+  box-shadow: #cecece 2px 2px 1px;
+  height: 40px;
+  width: 40px;
+  background-color: #2196f3;
+  opacity: 0.5;
+}
 
-    width:  30pt;
-    height: 30pt;
-    border-radius: 50%;
+#kb-add-code-cell {
+  right: 100px;
 }
-/* specialize buttons that hover over narrative */
-#kb-add-code-cell, #kb-add-md-cell {
-    box-shadow: #CECECE 2px 2px 1px;
-    height: 40px;
-    width: 40px;
-    background-color: #2196F3;
-    opacity: 0.5;
+
+#kb-add-md-cell {
+  margin-right: 20px;
 }
-#kb-add-code-cell { right: 100px; }
-#kb-add-md-cell { margin-right: 20px; }
 
 .kb-data-list-add-data-button:hover {
-    cursor:pointer;
-    background-color: #36618E;
+  cursor: pointer;
+  background-color: #36618e;
 }
 
 .kb-data-list-add-data-text-button {
-    background-color: #4379B1;
-    border-radius: 1px;
-    color: #fff;
-    border: none;
-    padding: 10px 20px;
-    margin: 3px;
-    font-size: 14px;
-    font-family: "Roboto",Helvetica,Arial,sans-serif;
-    font-weight: 400;
-    box-shadow: 1px 1px 3px #aaa;
-    -webkit-box-shadow: 1px 1px 3px #aaa;
-    moz-box-shadow: 1px 1px 3px #aaa;
+  background-color: #4379b1;
+  border-radius: 1px;
+  color: #fff;
+  border: none;
+  padding: 10px 20px;
+  margin: 3px;
+  font-size: 14px;
+  font-family: "Roboto", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  box-shadow: 1px 1px 3px #aaa;
+  -webkit-box-shadow: 1px 1px 3px #aaa;
+  moz-box-shadow: 1px 1px 3px #aaa;
 }
+
 .kb-data-list-add-data-text-button:hover {
-    background-color: #36618E;
+  background-color: #36618e;
 }
 
-
 /* buttons */
 .kb-data-list-btn {
-    background-color: #2196F3;
-    border-radius: 1px;
-    color: #fff;
-    border: none;
-    padding: 5px 10px;
-    font-size: 13px;
-    box-shadow: 1px 1px 3px #aaa;
-    -webkit-box-shadow: 1px 1px 3px #aaa;
-    moz-box-shadow: 1px 1px 3px #aaa;
-    margin: 5px;
+  background-color: #2196f3;
+  border-radius: 1px;
+  color: #fff;
+  border: none;
+  padding: 5px 10px;
+  font-size: 13px;
+  box-shadow: 1px 1px 3px #aaa;
+  -webkit-box-shadow: 1px 1px 3px #aaa;
+  moz-box-shadow: 1px 1px 3px #aaa;
+  margin: 5px;
 }
+
 .kb-data-list-btn:hover {
-    background-color: #1E88E5;
+  background-color: #1e88e5;
 }
+
 .kb-data-list-btn[disabled] {
-    box-shadow: none;
-    background-color: #BBDEFB;
-    color: #fff;
+  box-shadow: none;
+  background-color: #bbdefb;
+  color: #fff;
 }
 
 .kb-data-list-cancel-btn {
-    background-color: #F5F5F5;
-    border-radius: 1px;
-    color: #888;
-    border: none;
-    padding: 5px 10px;
-    font-size: 13px;
-    box-shadow: 1px 1px 3px #aaa;
-    -webkit-box-shadow: 1px 1px 3px #aaa;
-    moz-box-shadow: 1px 1px 3px #aaa;
-    margin: 5px;
+  background-color: #f5f5f5;
+  border-radius: 1px;
+  color: #888;
+  border: none;
+  padding: 5px 10px;
+  font-size: 13px;
+  box-shadow: 1px 1px 3px #aaa;
+  -webkit-box-shadow: 1px 1px 3px #aaa;
+  moz-box-shadow: 1px 1px 3px #aaa;
+  margin: 5px;
 }
+
 .kb-data-list-cancel-btn:hover {
-    background-color: #CECECE;
+  background-color: #cecece;
 }
 
 .kb-data-list-row-hr {
-    width:70%;
-    margin: 2px auto;
-
+  width: 70%;
+  margin: 2px auto;
 }
 
-
-
-
-
 .kb-data-list-logo {
-    width:  30pt;
-    height: 30pt;
-    color:  #fff;
-    background-color: #607D8B;
-    border-radius: 50%;
-    border-style:  solid;
-    border-width:  0px;
-    border-color:  #555;
-    text-align: center;
-    display: inline-block;
-    padding-top: 6pt;
-    font-size: 18pt;
-    font-weight: bold;
-    text-shadow: -1px 0 #777, 0 1px #777, 1px 0 #777, 0 -1px #777;
+  width: 30pt;
+  height: 30pt;
+  color: #fff;
+  background-color: #607d8b;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 0;
+  border-color: #555;
+  text-align: center;
+  display: inline-block;
+  padding-top: 6pt;
+  font-size: 18pt;
+  font-weight: bold;
+  text-shadow: -1px 0 #777, 0 1px #777, 1px 0 #777, 0 -1px #777;
 }
+
 /* For shifting over logos that are stacked on
  * top of eachother */
 .kb-data-list-logo-shifted1 {
-    margin-left: 1px;
-    margin-top: 1px;
+  margin-left: 1px;
+  margin-top: 1px;
 }
+
 .kb-data-list-logo-shiftedx1 {
-    margin-left: 8px;
-    margin-top: 6px;
+  margin-left: 8px;
+  margin-top: 6px;
 }
+
 .kb-data-list-logo-shifted2 {
-    margin-left: 9px;
-    margin-top: 7px;
+  margin-left: 9px;
+  margin-top: 7px;
 }
+
 .kb-data-list-logo-shiftedx2 {
-    margin-left: 16px;
-    margin-top: 12px;
+  margin-left: 16px;
+  margin-top: 12px;
 }
 
 .kb-data-list-logo-font1 {
-    font-size: 1.7em !important;
+  font-size: 1.7em !important;
 }
 
 .kb-data-list-logo-font2 {
-    font-size: 1.5em !important;
+  font-size: 1.5em !important;
 }
 
 /*  Nested item indent (crude!!) */
 .kb-data-list-level1 {
-    margin-left: 25px;
+  margin-left: 25px;
 }
+
 .kb-data-list-level2 {
-    margin-left: 50px;
+  margin-left: 50px;
 }
 
 .kb-data-list-info {
-    width: 80%;
-    padding: 6px 0px;
-    min-height: 60px;
-    border-bottom: 1px solid #E0E0E0;
+  width: 80%;
+  padding: 6px 0;
+  min-height: 60px;
+  border-bottom: 1px solid #e0e0e0;
 }
 
-
 .kb-data-list-name {
-    color:#2e618d;
-    font-size: 11pt;
-    font-family: 'Oyxgen', Arial, sans-serif;
-    font-weight: bold;
-    margin: 2px;
-    cursor: pointer;
+  color: #2e618d;
+  font-size: 11pt;
+  font-family: "Oyxgen", Arial, sans-serif;
+  font-weight: bold;
+  margin: 2px;
+  cursor: pointer;
 }
+
 .kb-data-list-name:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
+
 .kb-data-list-version {
-    color:#777;
-    font-size: 9pt;
-    font-style: italic;
-    white-space: nowrap;
-    cursor:default;
+  color: #777;
+  font-size: 9pt;
+  font-style: italic;
+  white-space: nowrap;
+  cursor: default;
 }
+
 .kb-data-list-type {
-    color:#777;
-    font-size: 10pt;
-    margin: 2px;
-    cursor:default;
+  color: #777;
+  font-size: 10pt;
+  margin: 2px;
+  cursor: default;
 }
+
 .kb-data-list-date {
-    color:#777;
-    font-size: 10pt;
-    margin: 2px;
-    white-space: nowrap;
-    cursor:default;
+  color: #777;
+  font-size: 10pt;
+  margin: 2px;
+  white-space: nowrap;
+  cursor: default;
 }
+
 .kb-data-list-edit-by {
-    color:#777;
-    font-size: 10pt;
-    margin: 2px;
-    margin-left: 0px;
-    white-space: nowrap;
-    cursor: pointer;
+  color: #777;
+  font-size: 10pt;
+  margin: 2px;
+  margin-left: 0;
+  white-space: nowrap;
+  cursor: pointer;
 }
+
 .kb-data-list-edit-by:hover {
-    color:#444;
+  color: #444;
 }
 
 .kb-data-list-narinfo {
-    color:#777;
-    font-size: 10pt;
-    margin: 2px;
-    margin-left: 10px;
-    /* Not a link anymore, so we disable for now
-    cursor: pointer;*/
-}
-.kb-data-list-narinfo:hover {
-    /*color:#444;*/
+  color: #777;
+  font-size: 10pt;
+  margin: 2px;
+  margin-left: 10px;
+
+  /* Not a link anymore, so we disable for now
+    cursor: pointer; */
 }
 
 .kb-data-list-narrative-error {
-    color:#F44336;
-    font-size: 10pt;
-    margin: 2px;
+  color: #f44336;
+  font-size: 10pt;
+  margin: 2px;
 }
 
 .kb-data-list-narrative {
-    color:#777;
-    font-size: 10pt;
-    margin: 2px;
-    margin-left: 10px;
-    /* cursor:pointer; */
-}
-.kb-data-list-narrative:hover {
-    /* narrative btn isn't a link yet, so don't highlight
-     *color:#444;*/
+  color: #777;
+  font-size: 10pt;
+  margin: 2px;
+  margin-left: 10px;
+
+  /* cursor:pointer; */
 }
 
 .kb-data-list-more {
-    color:#777;
-    font-size: 8pt;
-    margin: 0px;
-    padding: 0px;
-    margin-left: 15px;
-    white-space: nowrap;
+  color: #777;
+  font-size: 8pt;
+  margin: 0;
+  padding: 0;
+  margin-left: 15px;
+  white-space: nowrap;
 }
+
 .kb-data-list-more-btn {
-    padding: 2px 4px;
-    font-size: 12px;
-    border: none;
-    text-shadow: none !important;
-    box-shadow: none;
-    -webkit-box-shadow: none;
-    moz-box-shadow: none;
-    margin: 0;
+  padding: 2px 4px;
+  font-size: 12px;
+  border: none;
+  text-shadow: none !important;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  moz-box-shadow: none;
+  margin: 0;
 }
+
 .kb-data-list-more-div {
-    color:#777;
-    font-size: 10pt;
-    margin: 2px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  color: #777;
+  font-size: 10pt;
+  margin: 2px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
+
 .kb-data-list-more-div tr {
-    color:#777;
-    font-size: 10pt;
-    margin: 2px;
+  color: #777;
+  font-size: 10pt;
+  margin: 2px;
 }
+
 .kb-data-list-more-div tr:hover {
-    background-color: #eee;
+  background-color: #eee;
 }
+
 .kb-data-list-more-div tr:nth-child(odd) {
-    background-color: #F5F5F5;
+  background-color: #f5f5f5;
 }
+
 .kb-data-list-more-div tr:hover:nth-child(odd) {
-    background-color: #eee;
+  background-color: #eee;
 }
+
 .kb-data-list-more-div th {
-    color:#777;
-    font-size: 10pt;
-    font-weight: bold;
-    text-align: right;
-    margin: 2px;
+  color: #777;
+  font-size: 10pt;
+  font-weight: bold;
+  text-align: right;
+  margin: 2px;
 }
+
 .kb-data-list-more-div td {
-    color:#777;
-    font-size: 10pt;
-    text-align: left;
-    margin: 2px;
-    padding-left: 8px;
-    word-break: break-all;
+  color: #777;
+  font-size: 10pt;
+  text-align: left;
+  margin: 2px;
+  padding-left: 8px;
+  word-break: break-all;
 }
+
 .kb-data-list-job-name:hover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
-
 /* Indent nested box */
 .kb-data-list-box > .kb-data-list-box {
-    margin-left: 40px;
+  margin-left: 40px;
 }
 
 /* Control buttons */
 .kb-data-list-ctl span.inviso {
-    /* like mayo on wonderbread */
-    color: #FFF;
-    background-color: #FFF;
-    text-shadow: none;
+  /* like mayo on wonderbread */
+  color: #fff;
+  background-color: #fff;
+  text-shadow: none;
 }
+
 .kb-data-list-ctl[enabled] {
-    background-color: lightgrey;
+  background-color: lightgrey;
 }
 
-/* end data list*/
-
-
+/* end data list */
 
 /* APP CATALOG SLIDEOUT BROWSER STYLES */
 .kbcb-browser-container {
-    margin: 0 auto;
-    /*background: #eeeded;*/
+  margin: 0 auto;
+
+  /* background: #eeeded; */
 }
 
 .kbcb-back-link {
-    padding: 0.4em;
+  padding: 0.4em;
 }
 
-
 .kbcb-ctr-toolbar {
-    margin: 0.4em;
+  margin: 0.4em;
 }
 
 .kbcb-main-panel-div {
-    margin: 0em;
+  margin: 0;
 }
 
-
 .kbcb-loading-panel-div {
-    margin: 0.1em;
-    text-align:center;
-    vertical-align:middle;
+  margin: 0.1em;
+  text-align: center;
+  vertical-align: middle;
 }
 
-
 .unselected .prompt .method-icon {
-    color: silver;
+  color: silver;
 }
+
 .method-icon {
-    color: rgb(103, 58, 183);
+  color: rgb(103, 58, 183);
 }
 
 .unselected .prompt .app-icon {
-    color: silver;
+  color: silver;
 }
+
 .app-icon {
-    color: rgb(0, 150, 136);
+  color: rgb(0, 150, 136);
 }
 
 /* when the entire app card is a link, use this style */
 .kbcb-app-card-link {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .kbcb-app-card-list-container {
-    overflow: auto;
-    padding: 0em 0.2em 1em 0.2em;
+  overflow: auto;
+  padding: 0 0.2em 1em 0.2em;
 }
 
 .kbcb-app-card-container {
-    margin: 0.4em;
-    width: 300px;
-    height:110px;
-    display: block;
-    position: relative;
-    float: left;
+  margin: 0.4em;
+  width: 300px;
+  height: 110px;
+  display: block;
+  position: relative;
+  float: left;
 }
 
 .kbcb-app-card {
-    background: #f1f1f5;
-    border-radius: 2px;
-    width: 100%;
-    height:100%;
-    overflow:hidden;
-    text-align:center;
-    vertical-align:middle;
-    color:#666;
+  background: #f1f1f5;
+  border-radius: 2px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  text-align: center;
+  vertical-align: middle;
+  color: #666;
 }
+
 .kbcb-app-card-header {
-    max-height:90px;
-    overflow:hidden;
-    text-align: left;
+  max-height: 90px;
+  overflow: hidden;
+  text-align: left;
 }
+
 .kbcb-app-card-title-panel {
-    padding: 10px 5px 5px 5px;
+  padding: 10px 5px 5px 5px;
 }
 
-
 .kbcb-app-card-title {
-    font-size:1.1em;
-    /*max-height: 2.6em;
-    overflow:hidden;*/
+  font-size: 1.1em;
+
+  /* max-height: 2.6em;
+    overflow:hidden; */
 }
 
 .kbcb-app-card-module {
-    font-size:0.8em;
+  font-size: 0.8em;
 }
+
 .kbcb-app-card-authors {
-    font-size:0.8em;
+  font-size: 0.8em;
 }
+
 .kbcb-app-card-subtitle {
-    padding: 10px 10px 10px 10px;
-    font-size:0.9em;
-    overflow:hidden;
+  padding: 10px 10px 10px 10px;
+  font-size: 0.9em;
+  overflow: hidden;
 }
 
 .kbcb-app-card-footer {
-    font-size:0.9em;
-    position:absolute;
-    bottom:0;
-    left:0;
-    margin:0px 5px 5px 5px;
-    width:100%;
-    color:#888;
+  font-size: 0.9em;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin: 0 5px 5px 5px;
+  width: 100%;
+  color: #888;
 }
 
 .kbcb-app-card-logo {
-    padding: 0px;
-    margin: 0px;
-    font-size: 0.9em;
+  padding: 0;
+  margin: 0;
+  font-size: 0.9em;
 }
 
-
-.kbcb-star-default{
-    color:#888;
+.kbcb-star-default {
+  color: #888;
 }
 
 .kbcb-star-favorite {
-    color:orange;
+  color: orange;
 }
-.kbcb-star-nonfavorite, .kbcb-star-favorite, .kbcb-star-default{
-    cursor:pointer;
+
+.kbcb-star-nonfavorite,
+.kbcb-star-favorite,
+.kbcb-star-default {
+  cursor: pointer;
 }
-.kbcb-star-nonfavorite:hover, .kbcb-star-default:hover {
-    color:red;
+
+.kbcb-star-nonfavorite:hover,
+.kbcb-star-default:hover {
+  color: red;
 }
 
 .kbcb-star-favorite:hover {
-    color:orange;
+  color: orange;
 }
 
 .kbcb-star-count {
-    margin-left: 0.3em;
-    display: inline-block;
+  margin-left: 0.3em;
+  display: inline-block;
 }
+
 .kbcb-run-count {
-    margin-left: 0.3em;
-    display: inline-block;
+  margin-left: 0.3em;
+  display: inline-block;
 }
 
-.kbcb-info {
-}
 .kbcb-info:hover {
-    color:orange;
+  color: orange;
 }
 
 .kbcb-hover {
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   transition: all 0.2s ease-in-out;
 }
 
 .kbcb-hover:hover {
-  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-  cursor:pointer;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+  cursor: pointer;
 }
 
-
 /* styles for App page */
 .kbcb-app-page {
-    background: #f1f1f5;
-    border-radius: 2px;
-    text-align:center;
-    color:#666;
+  background: #f1f1f5;
+  border-radius: 2px;
+  text-align: center;
+  color: #666;
 }
+
 .kbcb-app-page-header {
-    text-align: left;
+  text-align: left;
 }
+
 .kbcb-app-page-title-panel {
-    padding: 10px 5px 5px 0px;
+  padding: 10px 5px 5px 0;
 }
 
 .kbcb-app-page-title {
-    font-size:2em;
-    /*max-height: 2.6em;
-    overflow:hidden;*/
+  font-size: 2em;
+
+  /* max-height: 2.6em;
+    overflow:hidden; */
 }
 
 .kbcb-app-page-module {
-    font-size:1.2em;
+  font-size: 1.2em;
 }
+
 .kbcb-app-page-authors {
-    font-size:1em;
-    margin:0.3em 0 0 0;
+  font-size: 1em;
+  margin: 0.3em 0 0 0;
 }
+
 .kbcb-app-page-subtitle {
-    padding: 1.5em 2em 0em 2em;
-    font-size:1.2em;
+  padding: 1.5em 2em 0 2em;
+  font-size: 1.2em;
 }
 
 .kbcb-app-page-stats-bar {
-    font-size:1.2em;
-    padding:0em 2em 0.8em 3em;
-    width:100%;
+  font-size: 1.2em;
+  padding: 0 2em 0.8em 3em;
+  width: 100%;
 }
 
 .kbcb-app-page-logo {
-    padding: 0em;
-    margin: 1em;
-    text-align: center;
+  padding: 0;
+  margin: 1em;
+  text-align: center;
 }
 
-
 /* END CATALOG SLIDEOUT BROWSER STYLES */
 
-
-
-
-
-
-
-
-
-
 /* share panel styles */
 .kb-share-user-permissions-dropdown {
-    border-style:none;
-    text-shadow: none !important;
-    box-shadow: none;
-    -webkit-box-shadow: none;
-    moz-box-shadow: none;
-    padding:2px;
-    width:auto;
-    height:auto;
+  border-style: none;
+  text-shadow: none !important;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  moz-box-shadow: none;
+  padding: 2px;
+  width: auto;
+  height: auto;
 }
 
 .kb-share-select {
-    width: 200px;
+  width: 200px;
 }
 
 /* hack to make the selection fill the width */
 .kb-share-select .select2-selection__choice {
-    width: 100% !important;
-    background-color: #F5F5F5 !important;
+  width: 100% !important;
+  background-color: #f5f5f5 !important;
 }
 
-
 .kb-nar-manager-titles {
-    font-family: 'Oxygen';
-    font-weight: bold;
-    color:  #777;
-    margin: 10px;
-    margin-top: 20px;
-    font-size: 14pt;
-    font-weight: bold;
+  font-family: "Oxygen";
+  font-weight: bold;
+  color: #777;
+  margin: 10px;
+  margin-top: 20px;
+  font-size: 14pt;
+  font-weight: bold;
 }
 
-
 /* End kbaseData.css */
 
-
-
 /* styling for data import overlay  */
 
 .kb-import-content {
-    position:relative;
-    margin: 0 0 0 0px;
-    /*overflow-x: hidden;
-    overflow-y: auto;*/
-    /*height: 830px;*/
-    display: block;
+  position: relative;
+  margin: 0 0 0 0;
+
+  /* overflow-x: hidden;
+    overflow-y: auto; */
+
+  /* height: 830px; */
+  display: block;
 }
 
 .kb-import-content .btn-xs {
-    border: none;
+  border: none;
 }
 
 .kb-import-content .upload-options button {
-    background: #FFFFFF;
-    border: 1px solid #C4C4C4;
-    box-sizing: border-box;
-    border-radius: 6px;
-    font-family: Oxygen;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 14px;
-    line-height: 18px;
-    /* identical to box height */
-    text-align: center;
-    color: #000000;
-    width: 140px;
-    height: 42px;
-    margin: 0 6px;
+  background: #fff;
+  border: 1px solid #c4c4c4;
+  box-sizing: border-box;
+  border-radius: 6px;
+  font-family: Oxygen;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 18px;
+
+  /* identical to box height */
+  text-align: center;
+  color: #000;
+  width: 140px;
+  height: 42px;
+  margin: 0 6px;
 }
 
 .kb-import-content .upload-options button:hover {
-    border: 1px solid #CFCFCF;
-    background-color: #FAFAFA;
+  border: 1px solid #cfcfcf;
+  background-color: #fafafa;
 }
 
 .kb-import-content .upload-options button:focus {
-    background-color: #F2F2F2;
+  background-color: #f2f2f2;
 }
 
 .kb-import-content .upload-options button:active {
-    background-color: #E6E6E6;
+  background-color: #e6e6e6;
 }
 
 .kb-import-content .upload-options button:disabled {
-    background-color: #FAFAFA;
-    color: #929292;
+  background-color: #fafafa;
+  color: #929292;
 }
 
 .kb-overlay-footer {
-    position: absolute;
-    width: 100%;
-    bottom: 0px;
-    height: 50px;
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  height: 50px;
 }
 
 .kb-overlay-footer .btn-primary,
 .kb-overlay-footer .btn-default {
-    margin: 15px 15px 0 0;
+  margin: 15px 15px 0 0;
 }
 
-
 .kb-import-search {
-    margin: 10px 40px 10px 10px;
+  margin: 10px 40px 10px 10px;
 }
 
 .kb-import-filter {
-    margin: 10px 40px 10px 10px;
+  margin: 10px 40px 10px 10px;
 }
 
-
 .kb-import-item {
-    margin: 0 20px 0px 5px;
-    padding: 20px 0 0 0;
+  margin: 0 20px 0 5px;
+  padding: 20px 0 0 0;
 }
 
 .kb-import-item:hover {
-    background-color: #f8f8f8;
-    -moz-box-shadow: 0 0 2px #aaa;
-    -webkit-box-shadow: 0 0 2px #aaa;
-    box-shadow: 0 0 2px #aaa;
+  background-color: #f8f8f8;
+  -moz-box-shadow: 0 0 2px #aaa;
+  -webkit-box-shadow: 0 0 2px #aaa;
+  box-shadow: 0 0 2px #aaa;
 }
 
 .kb-import-item hr {
-    width: 85%;
-    border: 2px solid #eaeaea;
-    margin-top: 15px; /*override*/
-    margin-bottom: 0;
+  width: 85%;
+  border: 2px solid #eaeaea;
+  margin-top: 15px; /* override */
+  margin-bottom: 0;
 }
+
 /*
 .kb-import-item input[type="checkbox"] {
     margin: 15px 30px 15px 0px;
-}*/
+} */
 
 .kb-import-item .kb-import-checkbox {
-    font-size: 1.5em;
-    padding: 15px 20px 15px 20px;
-    opacity: .4;
+  font-size: 1.5em;
+  padding: 15px 20px 15px 20px;
+  opacity: 0.4;
 }
 
 .kb-import-item .fa-check-square-o {
-    opacity: 1.0 !important;
+  opacity: 1 !important;
 }
 
-
 .kb-import-info {
-    display: inline-block;
-    margin: 10px 20px 0 0;
+  display: inline-block;
+  margin: 10px 20px 0 0;
 }
 
 .kb-import-info span {
-    font-size: .9em;
-    font-weight: 700;
-    color: #999;
+  font-size: 0.9em;
+  font-weight: 700;
+  color: #999;
 }
 
 .kb-import-info {
-    font-weight: normal;
+  font-weight: normal;
 }
 
 .kb-import-status {
-    margin: 20px;
+  margin: 20px;
 }
 
 /* Error dialog */
 .kb-error-dialog strong {
-    color: darkgreen; /*  Douglas Adams forever */
+  color: darkgreen; /*  Douglas Adams forever */
 }
+
 .kb-err-text {
-    color: black;
-    font-family: Consolas, "Courier New", monospace;
+  color: black;
+  font-family: Consolas, "Courier New", monospace;
 }
+
 .kb-err-warn {
-    color: firebrick;
-    font-style: italic;
-    margin-top: 0.5em;
+  color: firebrick;
+  font-style: italic;
+  margin-top: 0.5em;
 }
 
 /* View-only (read-only) */
 #kb-ro-btn {
-    margin-right: 20px;
+  margin-right: 20px;
 }
+
 #kb-view-mode {
-    display: inline-block;
-    font-size: 13pt;
-    margin: -15px 0 0 1em;
-    padding: 0;
-    cursor: pointer;
+  display: inline-block;
+  font-size: 13pt;
+  margin: -15px 0 0 1em;
+  padding: 0;
+  cursor: pointer;
 }
+
 #kb-view-mode-narr div {
-    display: inline-block;
-    /*background-color: #2196F3;
-    color: #BBDEFB;*/
-    color: #2196F3;
-    font-family: 'Oxygen', Arial, sans-serif;
-    font-weight: bold;
-    font-size: 16px;
-    /* font-weight: bold; */
-    padding: 3px;
-    margin-top: -3px;
-    width: 147px;
-    text-align: left;
-    position: fixed;
+  display: inline-block;
+
+  /* background-color: #2196F3;
+    color: #BBDEFB; */
+  color: #2196f3;
+  font-family: "Oxygen", Arial, sans-serif;
+  font-weight: bold;
+  font-size: 16px;
+
+  /* font-weight: bold; */
+  padding: 3px;
+  margin-top: -3px;
+  width: 147px;
+  text-align: left;
+  position: fixed;
 }
 
 /* little space for control-close icon */
 #kb-view-mode-narr-hide {
-    display: block;
-    height: 41px;
-    width: 15px;
-    float: left;
-    font-size: 16px;
-    cursor: pointer;
-    color: #BBDEFB;
-    background-color: #2196F3;
-    padding-left: 5px;
+  display: block;
+  height: 41px;
+  width: 15px;
+  float: left;
+  font-size: 16px;
+  cursor: pointer;
+  color: #bbdefb;
+  background-color: #2196f3;
+  padding-left: 5px;
 }
+
 /* move icon down a bit */
 #kb-view-mode-narr-hide span {
-    margin-top: 10px;
+  margin-top: 10px;
 }
+
 /* this is the banner for readonly mode */
 .navbar-right div.label-warning {
-    font-family: 'Oxygen', Arial, sans-serif;
-    font-size: 16px;
-    font-weight: bold;
+  font-family: "Oxygen", Arial, sans-serif;
+  font-size: 16px;
+  font-weight: bold;
 }
 
 /* Show this over the whole narrative UI until the
@@ -3279,53 +3463,57 @@ button.kb-data-obj {
    -Dan Gunter, Feb 10, 2015
 */
 #kb-loading-blocker {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: white;
-    width: 100%;
-    height: 100%;
-    z-index: 9999;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: white;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
 }
 
 #kb-loading-blocker p {
-    text-align: center;
-    font-size: 24px;
-    font-weight: bold;
+  text-align: center;
+  font-size: 24px;
+  font-weight: bold;
 }
 
 #kb-loading-blocker .kb-loading-text {
-    width: 40%;
-    margin-left: 30%;
-    font-size: 16px;
-    text-align: left;
-    line-height: 1.5em;
+  width: 40%;
+  margin-left: 30%;
+  font-size: 16px;
+  text-align: left;
+  line-height: 1.5em;
 }
 
 .loading-warning {
-    position:absolute;
-    display: none;
+  position: absolute;
+  display: none;
 }
 
 /* Override the default max-width of the narrative box */
-/*.container {*/
-    /*max-width: 2000px !important;*/
-/*}*/
+
+/* .container { */
+
+/* max-width: 2000px !important; */
+
+/* } */
 
 /* Styles for KNHX trees to remove its document.write nonsense that breaks asynchronous loading */
 #popdiv {
-    position: absolute;
-    background-color: #fcfcfc;
-    border: 1px solid #CCC;
-    z-index: 10000;
-    visibility: hidden;
-    font-size: 12px;
+  position: absolute;
+  background-color: #fcfcfc;
+  border: 1px solid #ccc;
+  z-index: 10000;
+  visibility: hidden;
+  font-size: 12px;
 }
+
 #popdiv a.alt {
-    padding-left: 9px;
-    font: 12px monospace;
-    border: none;
-    display: inline;
+  padding-left: 9px;
+  font: 12px monospace;
+  border: none;
+  display: inline;
 }
 
 /* bootstrap sillines */
diff --git a/kbase-extension/static/kbase/css/kbaseNotify.css b/kbase-extension/static/kbase/css/kbaseNotify.css
index b798fb341c..bcebbfaead 100644
--- a/kbase-extension/static/kbase/css/kbaseNotify.css
+++ b/kbase-extension/static/kbase/css/kbaseNotify.css
@@ -1,14 +1,14 @@
 
 .kb-notify {
-    position: relative;
-    bottom: 10px;
-    width: 300px;
-    padding: 15px;
-    color: #fff;
-    background-color: #000;
-    opacity: 0.8;
+  position: relative;
+  bottom: 10px;
+  width: 300px;
+  padding: 15px;
+  color: #fff;
+  background-color: #000;
+  opacity: 0.8;
 }
 
 .kb-notify.kb-notify-success {
-    color: #00CC09;
+  color: #00cc09;
 }
diff --git a/kbase-extension/static/kbase/css/kbaseStylesheet.css b/kbase-extension/static/kbase/css/kbaseStylesheet.css
index a17f0a7210..887f790d98 100644
--- a/kbase-extension/static/kbase/css/kbaseStylesheet.css
+++ b/kbase-extension/static/kbase/css/kbaseStylesheet.css
@@ -1,146 +1,168 @@
 @font-face {
-    font-family: 'Oxygen';
-    src: url('../fonts/Oxygen-webfont.eot');
-    src: url('../fonts/Oxygen-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/Oxygen-webfont.woff') format('woff'),
-         url('../fonts/Oxygen-webfont.ttf') format('truetype'),
-         url('../fonts/Oxygen-webfont.svg#OxygenRegular') format('svg');
-    font-weight: normal;
-    font-style: normal;
+  font-family: 'Oxygen';
+  src: url('../fonts/Oxygen-webfont.eot');
+  src:
+    url('../fonts/Oxygen-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Oxygen-webfont.woff') format('woff'),
+    url('../fonts/Oxygen-webfont.ttf') format('truetype'),
+    url('../fonts/Oxygen-webfont.svg#OxygenRegular') format('svg');
+  font-weight: normal;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Oxygen';
-    src: url('../fonts/Oxygen-Bold-webfont.eot');
-    src: url('../fonts/Oxygen-Bold-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/Oxygen-Bold-webfont.woff') format('woff'),
-         url('../fonts/Oxygen-Bold-webfont.ttf') format('truetype'),
-         url('../fonts/Oxygen-Bold-webfont.svg#OxygenBold') format('svg');
-    font-weight: bold;
-    font-style: normal;
+  font-family: 'Oxygen';
+  src: url('../fonts/Oxygen-Bold-webfont.eot');
+  src:
+    url('../fonts/Oxygen-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Oxygen-Bold-webfont.woff') format('woff'),
+    url('../fonts/Oxygen-Bold-webfont.ttf') format('truetype'),
+    url('../fonts/Oxygen-Bold-webfont.svg#OxygenBold') format('svg');
+  font-weight: bold;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Oxygen';
-    src: url('../fonts/Oxygen-Italic-webfont.eot');
-    src: url('../fonts/Oxygen-Italic-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/Oxygen-Italic-webfont.woff') format('woff'),
-         url('../fonts/Oxygen-Italic-webfont.ttf') format('truetype'),
-         url('../fonts/Oxygen-Italic-webfont.svg#OxygenItalic') format('svg');
-    font-weight: normal;
-    font-style: italic;
+  font-family: 'Oxygen';
+  src: url('../fonts/Oxygen-Italic-webfont.eot');
+  src:
+    url('../fonts/Oxygen-Italic-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Oxygen-Italic-webfont.woff') format('woff'),
+    url('../fonts/Oxygen-Italic-webfont.ttf') format('truetype'),
+    url('../fonts/Oxygen-Italic-webfont.svg#OxygenItalic') format('svg');
+  font-weight: normal;
+  font-style: italic;
 }
 
 @font-face {
-    font-family: 'Oxygen';
-    src: url('../fonts/Oxygen-BoldItalic-webfont.eot');
-    src: url('../fonts/Oxygen-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/Oxygen-BoldItalic-webfont.woff') format('woff'),
-         url('../fonts/Oxygen-BoldItalic-webfont.ttf') format('truetype'),
-         url('../fonts/Oxygen-BoldItalic-webfont.svg#OxygenBoldItalic') format('svg');
-    font-weight: bold;
-    font-style: italic;
+  font-family: 'Oxygen';
+  src: url('../fonts/Oxygen-BoldItalic-webfont.eot');
+  src:
+    url('../fonts/Oxygen-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Oxygen-BoldItalic-webfont.woff') format('woff'),
+    url('../fonts/Oxygen-BoldItalic-webfont.ttf') format('truetype'),
+    url('../fonts/Oxygen-BoldItalic-webfont.svg#OxygenBoldItalic') format('svg');
+  font-weight: bold;
+  font-style: italic;
 }
 
 @font-face {
-    font-family: 'OxygenMono';
-    src: url('../fonts/OxygenMono-Regular-webfont.eot');
-    src: url('../fonts/OxygenMono-Regular-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/OxygenMono-Regular-webfont.woff') format('woff'),
-         url('../fonts/OxygenMono-Regular-webfont.ttf') format('truetype'),
-         url('../fonts/OxygenMono-Regular-webfont.svg#OxygenMonoRegular') format('svg');
-    font-weight: normal;
-    font-style: normal;
+  font-family: 'OxygenMono';
+  src: url('../fonts/OxygenMono-Regular-webfont.eot');
+  src:
+    url('../fonts/OxygenMono-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/OxygenMono-Regular-webfont.woff') format('woff'),
+    url('../fonts/OxygenMono-Regular-webfont.ttf') format('truetype'),
+    url('../fonts/OxygenMono-Regular-webfont.svg#OxygenMonoRegular') format('svg');
+  font-weight: normal;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'OxygenRegular';
-    src: url('../fonts/Oxygen-webfont.eot');
-    src: url('../fonts/Oxygen-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/Oxygen-webfont.woff') format('woff'),
-         url('../fonts/Oxygen-webfont.ttf') format('truetype'),
-         url('../fonts/Oxygen-webfont.svg#OxygenRegular') format('svg');
-    font-weight: normal;
-    font-style: normal;
-
-} 
+  font-family: 'OxygenRegular';
+  src: url('../fonts/Oxygen-webfont.eot');
+  src:
+    url('../fonts/Oxygen-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Oxygen-webfont.woff') format('woff'),
+    url('../fonts/Oxygen-webfont.ttf') format('truetype'),
+    url('../fonts/Oxygen-webfont.svg#OxygenRegular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
 
 @font-face {
-    font-family: 'OxygenBold';
-    src: url('../fonts/Oxygen-Bold-webfont.eot');
-    src: url('../fonts/Oxygen-Bold-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/Oxygen-Bold-webfont.woff') format('woff'),
-         url('../fonts/Oxygen-Bold-webfont.ttf') format('truetype'),
-         url('../fonts/Oxygen-Bold-webfont.svg#OxygenBold') format('svg');
-    font-weight: normal;
-    font-style: normal;
-
+  font-family: 'OxygenBold';
+  src: url('../fonts/Oxygen-Bold-webfont.eot');
+  src:
+    url('../fonts/Oxygen-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Oxygen-Bold-webfont.woff') format('woff'),
+    url('../fonts/Oxygen-Bold-webfont.ttf') format('truetype'),
+    url('../fonts/Oxygen-Bold-webfont.svg#OxygenBold') format('svg');
+  font-weight: normal;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'RobotoBlack';
-    src: url('../fonts/Roboto-Black-webfont.eot');
-    src: url('../fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/Roboto-Black-webfont.woff') format('woff'),
-         url('../fonts/Roboto-Black-webfont.ttf') format('truetype'),
-         url('../fonts/Roboto-Black-webfont.svg#RobotoBlack') format('svg');
-    font-weight: normal;
-    font-style: normal;
-
+  font-family: 'RobotoBlack';
+  src: url('../fonts/Roboto-Black-webfont.eot');
+  src:
+    url('../fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/Roboto-Black-webfont.woff') format('woff'),
+    url('../fonts/Roboto-Black-webfont.ttf') format('truetype'),
+    url('../fonts/Roboto-Black-webfont.svg#RobotoBlack') format('svg');
+  font-weight: normal;
+  font-style: normal;
 }
 
 h1 {
-	font: 1.75em/2em 'RobotoBlack', Arial, sans-serif;
-	letter-spacing: 0;
-	color: #232323;
-	font-weight: normal;
-	}
+  font: 1.75em/2em 'RobotoBlack', Arial, sans-serif;
+  letter-spacing: 0;
+  color: #232323;
+  font-weight: normal;
+}
+
 h2 {
-	font: 1.5em/1.75em 'RobotoBlack', Arial, sans-serif;
-	font-weight: normal;
-	color: #898989;
-	letter-spacing: 0;
-	}
+  font: 1.5em/1.75em 'RobotoBlack', Arial, sans-serif;
+  font-weight: normal;
+  color: #898989;
+  letter-spacing: 0;
+}
+
 h3 {
-	font: 1.15em/1.25em 'RobotoBlack', Arial, sans-serif;
-	letter-spacing: 0;
-	font-weight: normal;
-	}
+  font: 1.15em/1.25em 'RobotoBlack', Arial, sans-serif;
+  letter-spacing: 0;
+  font-weight: normal;
+}
+
 h4 {
-    font: 1.15em/1.25em 'Oxygen', Arial, sans-serif;
-    font-style: italic;
-	letter-spacing: .07em;
-	}
+  font: 1.15em/1.25em 'Oxygen', Arial, sans-serif;
+  font-style: italic;
+  letter-spacing: 0.07em;
+}
+
 body {
-	font: 1.375em 'Oxygen', Arial, sans-serif;
-	color: #333333;
-	background-color: #fff;
-	}
-strong, b {
-	font-family: 'Oxygen';
-	font-weight: bold;
-	}
-em, i {
-	font-family: 'Oxygen';
-	font-style: italic;
-	}
-strong em, em strong, b i, i b{
-	font-family: 'Oxygen';
-	font-style: italic;
-	font-weight: bold;
-	}
+  font: 1.375em 'Oxygen', Arial, sans-serif;
+  color: #333;
+  background-color: #fff;
+}
+
+strong,
+b {
+  font-family: 'Oxygen';
+  font-weight: bold;
+}
+
+em,
+i {
+  font-family: 'Oxygen';
+  font-style: italic;
+}
+
+strong em,
+em strong,
+b i,
+i b {
+  font-family: 'Oxygen';
+  font-style: italic;
+  font-weight: bold;
+}
+
 a {
-	color: #0088cc;
-	text-decoration: none;
-	}
+  color: #08c;
+  text-decoration: none;
+}
+
 a:visited {
-	color: #2a6496;
-	}
-a:hover    {
-	text-decoration: underline;
-	color: #2a6496;
-	}
-pre, code {
-	font-family: 'OxygenMono', "Lucida Console", "Lucida Sans Typewriter", monospace;
-	font-style: normal;
-	}
+  color: #2a6496;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: #2a6496;
+}
+
+pre,
+code {
+  font-family: 'OxygenMono', "Lucida Console", "Lucida Sans Typewriter", monospace;
+  font-style: normal;
+}
diff --git a/kbase-extension/static/kbase/css/kbaseTour.css b/kbase-extension/static/kbase/css/kbaseTour.css
index 33005d48c7..69e41033ea 100644
--- a/kbase-extension/static/kbase/css/kbaseTour.css
+++ b/kbase-extension/static/kbase/css/kbaseTour.css
@@ -1,41 +1,40 @@
 .kb-tour {
-    background-color: #2196f3;
+  background-color: #2196f3;
 }
 
-.kb-tour.popover.top > .arrow:after {
-    border-top-color: #2196f3;
+.kb-tour.popover.top > .arrow::after {
+  border-top-color: #2196f3;
 }
 
-.kb-tour.popover.bottom > .arrow:after {
-    border-bottom-color: #2196f3;
+.kb-tour.popover.bottom > .arrow::after {
+  border-bottom-color: #2196f3;
 }
 
-.kb-tour.popover.right > .arrow:after {
-    border-right-color: #2196f3;
+.kb-tour.popover.right > .arrow::after {
+  border-right-color: #2196f3;
 }
 
-.kb-tour.popover.left > .arrow:after {
-    border-left-color: #2196f3;
+.kb-tour.popover.left > .arrow::after {
+  border-left-color: #2196f3;
 }
 
-
 .kb-tour > h3.popover-title {
-    background-color: #2196f3;
-    color: #fff;
-    font-family: Oxygen, Arial, sans-serif;
-    font-size: 12pt;
+  background-color: #2196f3;
+  color: #fff;
+  font-family: Oxygen, Arial, sans-serif;
+  font-size: 12pt;
 }
 
 .kb-tour > .popover-content {
-    background-color: #eee;
+  background-color: #eee;
 }
 
 .kb-tour > .popover-navigation {
-    background-color: #eee;
+  background-color: #eee;
 }
 
 .kb-tour > .close-btn {
-    position: absolute;
-    top: 7px;
-    right: 7px
-}
\ No newline at end of file
+  position: absolute;
+  top: 7px;
+  right: 7px;
+}
diff --git a/kbase-extension/static/kbase/css/landing-pages.css b/kbase-extension/static/kbase/css/landing-pages.css
index 778a5c0007..8cd9252a15 100644
--- a/kbase-extension/static/kbase/css/landing-pages.css
+++ b/kbase-extension/static/kbase/css/landing-pages.css
@@ -1,144 +1,133 @@
 
-
-
-
 /* KBase navigation bar */
 .navbar-kbase {
-    background-color: #fff;
-    border-bottom: 1px solid #E0E0E0;
-    -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1);
-    -moz-box-shadow: 0 1px 10px rgba(0,0,0,.1);
-    box-shadow: 0 1px 10px rgba(0,0,0,.1);
+  background-color: #fff;
+  border-bottom: 1px solid #e0e0e0;
+  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
 }
-.nav > li > a:hover, .nav > li > a:focus {
-    text-decoration: none;
-    /*background-color: #fff !important;*/
+
+.nav > li > a:hover,
+.nav > li > a:focus {
+  text-decoration: none;
+
+  /* background-color: #fff !important; */
 }
 
 /* END KBase navigation bar */
 
-
 .app-icon:hover {
-    opacity: 0.9;
-    text-decoration: none;
+  opacity: 0.9;
+  text-decoration: none;
 }
 
-
 #kbase-search-box {
-    width: 300px;
+  width: 300px;
 }
 
-
 #signin-button {
-    /*margin: 15px 7px 0 0;*/
-    display: inline-block;
-    padding: 0 15px 0 0;
+  /* margin: 15px 7px 0 0; */
+  display: inline-block;
+  padding: 0 15px 0 0;
 }
 
-#signin-button a {
-
-}
-
-
 /* bootstrap overrides */
 .wrapper { width: 95%; margin-left: auto; margin-right: auto; }
-/* end bootstrap overrides */
 
+/* end bootstrap overrides */
 
-#core-model { 
-    overflow-x: auto; 
+#core-model {
+  overflow-x: auto;
 }
 
 #logo {
-    margin: 2px 10px 0 10px;
+  margin: 2px 10px 0 10px;
 }
 
-
-table {  
-    font-size: 14px !important;
+table {
+  font-size: 14px !important;
 }
 
 .media-info-modal {
-    width: 800px;
+  width: 800px;
 }
 
 #selected-workspace {
-    margin: 17px 14px 15px 0px;
+  margin: 17px 14px 15px 0;
 }
 
 .tab-view {
-    margin: 10px 0 0 0;
+  margin: 10px 0 0 0;
 }
 
-
-
 /* mv */
 .search-query {
-    width: 100%;
-    margin: 0 0 5px 0;
+  width: 100%;
+  margin: 0 0 5px 0;
 }
 
 .caret-up {
-    display: inline-block;
-    width: 0px;
-    height: 0px;
-    margin-left: 2px;
-    vertical-align: middle;
-    border-top: none;
-    border-bottom: 4px solid #FFFFFF;
-    border-right: 4px solid transparent;
-    border-left: 4px solid transparent;
-    border-top-width: 0px;
-    border-top-style: dotted;
-    content: "";
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 2px;
+  vertical-align: middle;
+  border-top: none;
+  border-bottom: 4px solid #fff;
+  border-right: 4px solid transparent;
+  border-left: 4px solid transparent;
+  border-top-width: 0;
+  border-top-style: dotted;
+  content: "";
 }
 
 .scroll-pane {
-    height: 200px;
-    overflow-y: scroll; 
-    overflow-x: hi;
+  height: 200px;
+  overflow-y: scroll;
+  overflow-x: hi;
 }
 
-
-#select-box tr td{
-    padding: 6px;
+#select-box tr td {
+  padding: 6px;
 }
 
-/*#select-box tr :hover {
+/* #select-box tr :hover {
     background-color: #eee;
-}*/
+} */
 
 .selected-ws {
-    background-color: #428bca;
-    color: #fff;
+  background-color: #428bca;
+  color: #fff;
 }
 
 .selected-ws:hover { /* fixme */
-    background-color: #428bca !important;
+  background-color: #428bca !important;
 }
 
-
 .side-bar-switch {
-    margin: 0 0 10px 0;
+  margin: 0 0 10px 0;
 }
+
 .side-bar-switch li {
-    font-size: 12px;
+  font-size: 12px;
 }
+
 .side-bar-switch li a {
-    padding: 5px 10px;
+  padding: 5px 10px;
 }
 
 .selected-obj-alert {
-    margin-bottom: 5px; /* override */
-    padding-top: 10px;
-    padding-bottom: 10px;    
+  margin-bottom: 5px; /* override */
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 .heatmap-view {
-    overflow-x: scroll;
+  overflow-x: scroll;
 }
 
-/*div::-webkit-scrollbar {
+/* div::-webkit-scrollbar {
     width: 10px;
     height: 10px;
 }
@@ -153,367 +142,368 @@ div::-webkit-scrollbar-thumb {
     border-radius: 10px;
     background: #666;
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
-}*/
-
+} */
 
 /* ws browser */
 
-.ws-selector{
-    margin: 10px 0 0 0;
+.ws-selector {
+  margin: 10px 0 0 0;
 }
 
 .ws-selector.btn-ws-settings {
-    position: absolute;
-    right: 30px;
+  position: absolute;
+  right: 30px;
 }
 
 .object-view {
-    margin: 10px 0 0 0;
+  margin: 10px 0 0 0;
 }
 
 .select-ws .badge {
-    margin: 0 4px 0 0 ;
+  margin: 0 4px 0 0;
 }
+
 .select-ws .btn-ws-settings {
-    padding: 0px 5px;
+  padding: 0 5px;
 }
 
 .modal-alert {
-    margin: 10px 15px 0px 15px;
-    padding: 8px 15px;
-
+  margin: 10px 15px 0 15px;
+  padding: 8px 15px;
 }
 
 .modal-cover {
-    position: absolute;
-    z-index: 10;
+  position: absolute;
+  z-index: 10;
 }
 
 .modal-cover-table {
-    display: table;
-    position: static;
-    width: 100%;
-    height: 100%;
+  display: table;
+  position: static;
+  width: 100%;
+  height: 100%;
 }
 
 .modal-cover-cell {
-    display: table-cell;
-    vertical-align: middle;
-    position: static;
+  display: table-cell;
+  vertical-align: middle;
+  position: static;
 }
 
-
 .modal-cover-box {
-    display: inline-block;
-    padding: 5px 15px;
-    margin: 10px;
-    -moz-box-shadow: 7px 7px 5px #888;
-    -webkit-box-shadow: 7px 7px 5px #888;
-    box-shadow: 7px 7px 5px #888;
-    /*background: #95C07C;    */
+  display: inline-block;
+  padding: 5px 15px;
+  margin: 10px;
+  -moz-box-shadow: 7px 7px 5px #888;
+  -webkit-box-shadow: 7px 7px 5px #888;
+  box-shadow: 7px 7px 5px #888;
+
+  /* background: #95C07C;    */
 }
 
 .modal-cover-content {
-    padding: 5px;
-    background: white;
-    border: 1px solid #666;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
+  padding: 5px;
+  background: white;
+  border: 1px solid #666;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
 }
 
-
 .obj-table .dataTables_length label {
-    margin: 7px 0 0 0;
+  margin: 7px 0 0 0;
 }
 
 .dataTables_info {
-    margin: 0 10px 0 0;
+  margin: 0 10px 0 0;
 }
-.dataTables_length, .dataTables_info {
-    float: left;
+
+.dataTables_length,
+.dataTables_info {
+  float: left;
 }
+
 .ellipsis {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: 170px;
-    display: inline-block;
-    overflow: hidden
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 170px;
+  display: inline-block;
+  overflow: hidden;
 }
 
 .ws-descript {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: 400px;
-    overflow: hidden;
-    display: inline-block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 400px;
+  overflow: hidden;
+  display: inline-block;
 }
 
-
-
 /* custom checkboxes (prototyped) */
 .ncheck {
-    width: 15px;
-    height: 15px;
-    border: 1px solid #ccc ;
-    margin-left: auto;
-    margin-right: auto;
+  width: 15px;
+  height: 15px;
+  border: 1px solid #ccc;
+  margin-left: auto;
+  margin-right: auto;
 }
+
 .ncheck:hover {
-    border: 1px solid #444 ;    
+  border: 1px solid #444;
 }
+
 .ncheck-btn {
-    width: 15px;
-    height: 15px;
-    border: 1px solid #888 ;
-    margin: 4px 0px 4px -1px;
+  width: 15px;
+  height: 15px;
+  border: 1px solid #888;
+  margin: 4px 0 4px -1px;
 }
+
 .ncheck-btn:hover {
-    border: 1px solid #444 ;    
+  border: 1px solid #444;
 }
+
 .ncheck-checked {
-    background: url(../img/checkmark.png) no-repeat -5px -4px;
-    background-image: -webkit-image-set(url(../img/checkmark.png) 1x,url(../img/checkmark_2x.png) 2x);
+  background: url(../img/checkmark.png) no-repeat -5px -4px;
+  background-image: -webkit-image-set(url(../img/checkmark.png) 1x, url(../img/checkmark_2x.png) 2x);
 }
+
 .ncheck-minus {
-    background: url(../img/checkmark-partial.png) no-repeat -5px -5px;
-    background-image: -webkit-image-set(url(../img/checkmark-partial.png) 1x,url(../img/checkmark-partial_2x.png) 2x);
+  background: url(../img/checkmark-partial.png) no-repeat -5px -5px;
+  background-image: -webkit-image-set(url(../img/checkmark-partial.png) 1x, url(../img/checkmark-partial_2x.png) 2x);
 }
 
 .btn-select-all {
-    height: 34px;
-    margin: 0 20px 0 0;
+  height: 34px;
+  margin: 0 20px 0 0;
 }
 
 .type-filter {
-    margin: 0 20px 0 0;
+  margin: 0 20px 0 0;
 }
 
-.btn-trash { 
-    margin: 3px 20px 0 0;
+.btn-trash {
+  margin: 3px 20px 0 0;
 }
 
-
-.btn-show-info .glyphicon{
-    padding: 0px 0px 4px 0px;
+.btn-show-info .glyphicon {
+  padding: 0 0 4px 0;
 }
 
-
 .open-obj {
-    margin: 7px 0 0 20px;
+  margin: 7px 0 0 20px;
 }
 
-
-
 /******************     narrative     ***************/
 
 #login-form {
-    margin: 70px 0 0 0;
+  margin: 70px 0 0 0;
 }
 
 #narrative-nav,
 .recent-narratives,
 .recent-projects {
-    padding: 0;
-    margin: 0;
+  padding: 0;
+  margin: 0;
 }
 
 .group-item-expander {
-    background: #f2f2f2; /*#d6eaff;*/
+  background: #f2f2f2; /* #d6eaff; */
 }
 
 .group-item-expander:hover {
-    cursor: hand;
-    cursor: pointer;
+  cursor: hand;
+  cursor: pointer;
 }
 
-
 .btn-new-narrative {
-    margin: 0 20px 0 0;
+  margin: 0 20px 0 0;
 }
+
 .btn-delete-narrative {
-    cursor: hand;
-    cursor: pointer;
+  cursor: hand;
+  cursor: pointer;
 }
+
 .btn-delete-narrative:hover {
-    opacity: 0.7;    
+  opacity: 0.7;
 }
+
 /* changing z index for datatable fixed header */
 .navbar-fixed-top {
-    z-index: 500;
+  z-index: 500;
 }
-.FixedHeader_Header {
-    background: #fff;
-    margin: -6px 0 0px 0;
-    height: 44px;
 
+.FixedHeader_Header {
+  background: #fff;
+  margin: -6px 0 0 0;
+  height: 44px;
 }
 
 .narrative-sidebar li {
-    list-style: none;
+  list-style: none;
 }
 
 @media (min-width: 960px) {
-    .narrative-sidebar {
-        position:fixed;
-        width: 20%;
-        /*float:left;*/
-    }
-}
+  .narrative-sidebar {
+    position: fixed;
+    width: 20%;
 
+    /* float:left; */
+  }
+}
 
 .sidebar-header {
-    font-size: 14px;
-    color: #898989;
-    font-family: 'RobotoBlack', Arial, sans-serif;
-    letter-spacing: 0;
-    font-weight: normal;
+  font-size: 14px;
+  color: #898989;
+  font-family: 'RobotoBlack', Arial, sans-serif;
+  letter-spacing: 0;
+  font-weight: normal;
 }
 
-
 .view-header {
-    font:  1.5em/1.75em  'RobotoBlack', Arial, sans-serif; 
-    font-weight: normal; 
-    color: #898989; 
-    letter-spacing: 0;
+  font: 1.5em/1.75em  'RobotoBlack', Arial, sans-serif;
+  font-weight: normal;
+  color: #898989;
+  letter-spacing: 0;
 }
 
 .view-header {
-    font:  1.5em/1.75em  'RobotoBlack', Arial, sans-serif; 
-    font-weight: normal; 
-    color: #898989; 
-    letter-spacing: 0;
+  font: 1.5em/1.75em  'RobotoBlack', Arial, sans-serif;
+  font-weight: normal;
+  color: #898989;
+  letter-spacing: 0;
 }
 
-
 .active .btn-narr {
-    background-color: #BBE8F9;
-    text-align: left;
-    padding-left: 20px;
-    padding-right: 20px;
-    /*border: 1px solid #A5D4E1;*/
-    border: 1px solid #428bca;
-    font-family: OxygenBold;
-    font-size: 14px;
+  background-color: #bbe8f9;
+  text-align: left;
+  padding-left: 20px;
+  padding-right: 20px;
+
+  /* border: 1px solid #A5D4E1; */
+  border: 1px solid #428bca;
+  font-family: OxygenBold;
+  font-size: 14px;
 }
 
 .btn-narr {
-    background-color: #f2f2f2;
-    text-align: left;
-    padding-left: 20px;
-    padding-right: 20px;
-    border: 1px solid #DBDBDB;
-    color: #6DA8CF;
-    font-family: 'RobotoBlack', Arial, sans-serif;
-    font-size: 14px;
+  background-color: #f2f2f2;
+  text-align: left;
+  padding-left: 20px;
+  padding-right: 20px;
+  border: 1px solid #dbdbdb;
+  color: #6da8cf;
+  font-family: 'RobotoBlack', Arial, sans-serif;
+  font-size: 14px;
 }
 
 .nav-sidebar {
-    top: 70px;
+  top: 70px;
 }
 
 .nav-sidebar li {
-    list-style: none;
-    margin-bottom: 10px;
-    text-align: left;
-    font-family: 'RobotoBlack', Arial, sans-serif;
+  list-style: none;
+  margin-bottom: 10px;
+  text-align: left;
+  font-family: 'RobotoBlack', Arial, sans-serif;
 }
 
 .nav-sidebar > li > a {
-    padding: 7px 15px;
+  padding: 7px 15px;
 }
 
-
 .navbar-nav {
-    color: #6DA8CF;
-    font-family: 'RobotoBlack', Arial, sans-serif;
+  color: #6da8cf;
+  font-family: 'RobotoBlack', Arial, sans-serif;
 }
 
 .navbar-nav > li > a:hover {
-    background-color: #fff;
+  background-color: #fff;
 }
 
-.navbar-nav > li.active > a , 
+.navbar-nav > li.active > a,
 .navbar-nav > li.active:hover {
-    color: #2a6496 !important;
-    box-sizing:border-box;
-    -moz-box-sizing:border-box;
-    -webkit-box-sizing:border-box;
-    height: 50px;
-    border-bottom: 4px solid #428bca ;
+  color: #2a6496 !important;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  height: 50px;
+  border-bottom: 4px solid #428bca;
 }
+
 .navbar-nav > .active:hover {
-    color: #2a6496;
+  color: #2a6496;
 }
 
 #wrap {
   min-height: 100%;
   height: auto;
+
   /* Negative indent footer by its height */
   margin: 0 auto -58px;
+
   /* Pad bottom by footer height */
   padding: 0 0 80px;
 }
+
 /* for the footer */
 #footer {
-   /* margin-top: 60px;
+  /* margin-top: 60px;
     position: relative;
     bottom: 0px; */
-    height: 58px;
+  height: 58px;
 }
 
 #footer ul {
-    text-align: center;
+  text-align: center;
 }
 
 #footer ul li {
-    display: inline;
-    padding: 7px 5px 5px 1px;
-    
+  display: inline;
+  padding: 7px 5px 5px 1px;
 }
 
-#footer ul li:after {
-    content: "\2022";
-    padding-left: 10px;
-    color: #bbb;
-    font-size: 10px;
+#footer ul li::after {
+  content: "\2022";
+  padding-left: 10px;
+  color: #bbb;
+  font-size: 10px;
 }
 
-#footer ul li:last-child:after, #footer ul li:nth-last-child(2):after {
-    content: "";
+#footer ul li:last-child::after,
+#footer ul li:nth-last-child(2)::after {
+  content: "";
 }
 
 #footer img {
-    position: relative;
-    top: -3px;
+  position: relative;
+  top: -3px;
 }
 
 #footer .disclaimer {
-    /*background-color: #f2dede;
+  /* background-color: #f2dede;
     border-top: 1px solid #ebccd1;
-    color: #a94442;*/
-    background-color: #a94442;
-    color: #fff;
-    display: block;
-    text-align: center;
-    font-weight: bold;
-    position: fixed;
-    bottom: 0;
-    width: 100%;
+    color: #a94442; */
+  background-color: #a94442;
+  color: #fff;
+  display: block;
+  text-align: center;
+  font-weight: bold;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
 }
 
 .KBSnode rect {
-    cursor: pointer;
-    fill: #fff;
-    fill-opacity: .5;
-    stroke: #3182bd;
-    stroke-width: 1.5px;
+  cursor: pointer;
+  fill: #fff;
+  fill-opacity: 0.5;
+  stroke: #3182bd;
+  stroke-width: 1.5px;
 }
 
 .KBSnode text {
-    font: 80% sans-serif;
-    pointer-events: none;
+  font: 80% sans-serif;
+  pointer-events: none;
 }
-
-
-
diff --git a/kbase-extension/static/kbase/css/methodCell.css b/kbase-extension/static/kbase/css/methodCell.css
index 4744a5ed6b..f5bddbd8a8 100644
--- a/kbase-extension/static/kbase/css/methodCell.css
+++ b/kbase-extension/static/kbase/css/methodCell.css
@@ -1,15 +1,15 @@
 .kb-method-cell select.form-control {
-    margin: 0;
+  margin: 0;
 }
 
 .twitter-typeahead {
-    width: 100%;
+  width: 100%;
 }
 
 .code_cell div.input_area {
-    display: none;
+  display: none;
 }
 
 .code_cell div.input_area.-show {
-    display: block;
-}
\ No newline at end of file
+  display: block;
+}
diff --git a/kbase-extension/static/kbase/css/narrative.css b/kbase-extension/static/kbase/css/narrative.css
index dac3da9222..c701ecf914 100644
--- a/kbase-extension/static/kbase/css/narrative.css
+++ b/kbase-extension/static/kbase/css/narrative.css
@@ -4,203 +4,219 @@
  * Shim to make sure jQuery-ui dialogs are always on front of other DOM elements.
  */
 .ui-front {
-	z-index: 1000;
+  z-index: 1000;
 }
 
 body {
-	overflow: hidden;
+  overflow: hidden;
 }
 
 .whiteout-pane {
-	height: 100%;
-	width: 100%;
-	position: absolute;
-	top: 0;
-	left: 0;
-	background-color: #fff;
-	text-align: center;
-	z-index: 1001;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  text-align: center;
+  z-index: 1001;
 }
 
 html {
-	background-color: #a2a2a2;
-	/*border: 1px solid #000;*/
-	padding: 0;
-	margin: 0;
-    background-color: white;
-}
-body{
-	margin: 0 auto;
-	padding:0;
-	line-height: 1.5em;
-	font: 1.375em 'OxygenRegular', Arial, sans-serif;
-	color: #333333;
-	background-color: #fff;
-	/*width: 1170px;*/
+  background-color: #a2a2a2;
+
+  /* border: 1px solid #000; */
+  padding: 0;
+  margin: 0;
+  background-color: white;
+}
+
+body {
+  margin: 0 auto;
+  padding: 0;
+  line-height: 1.5em;
+  font: 1.375em "OxygenRegular", Arial, sans-serif;
+  color: #333;
+  background-color: #fff;
+
+  /* width: 1170px; */
 }
 
 /* header styling */
 
 .notebook_app .navbar-kbase {
-	webkit-box-shadow: none;
-	box-shadow: none;
-	moz-box-shadow: none;
+  webkit-box-shadow: none;
+  box-shadow: none;
+  moz-box-shadow: none;
 }
 
 header[role="banner"] {
-/*	overflow: auto;
+  /*	overflow: auto;
 	padding: 7px 0 2px 0;
 	border-bottom: 1px solid #C0C0C0;
 	-moz-box-shadow: inset 0 0 2px #c2c2c2;
 	-webkit-box-shadow: inset 0 0 2px #c2c2c2;
 	box-shadow: inset 0 0 2px #c2c2c2; */
-    position: absolute;
-    top: 0;
-    width: 100%;
-    background-color: #fff;
-    border-bottom: 1px solid #E0E0E0;
-    /*-webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1);
-    -moz-box-shadow: 0 1px 10px rgba(0,0,0,.1);
-    box-shadow: 0 1px 10px rgba(0,0,0,.1);*/
-    z-index: 999;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  background-color: #fff;
+  border-bottom: 1px solid #e0e0e0;
 
+  /* -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1);
+    -moz-box-shadow: 0 1px 10px rgba(0,0,0,.1);
+    box-shadow: 0 1px 10px rgba(0,0,0,.1); */
+  z-index: 999;
 }
 
-nav[role="navigation"] ul{
-    margin: 1.2em 0 .5em 0;
-    /*text-align: center;*/
-    padding-left: 0;
+nav[role="navigation"] ul {
+  margin: 1.2em 0 0.5em 0;
+
+  /* text-align: center; */
+  padding-left: 0;
 }
 
 nav[role="navigation"] ul li {
-    display: inline;
-    margin: 0 .5em;
-    vertical-align: middle;
+  display: inline;
+  margin: 0 0.5em;
+  vertical-align: middle;
 }
 
 nav[role="navigation"] ul li a {
-    text-decoration: none;
-    font-size: 1.2em;
-    font-family: 'OxygenBold';
-    padding: 7px 1em;
-    background-color: #5c9531;
-    color: #fff;
-    border-radius: 8px;
-    -moz-border-radius: 8px;
-    -webkit-border-radius: 8px;
-    -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-    -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-    border: 1px solid #5c9531;
-}
-
-li#searchlabel a{
- }
-
-input#search_terms{
-    padding: .4em 1em;
-    display: inline;
-    border-color: #5c9531;
-    position: relative;
-    left: -.5em;
-    font-size: 1em;
-    margin-top: -3px;
-    background-image: url("../images/search.png");
-    background-size: 22px;
-    background-repeat:no-repeat;
-    background-position:right center;
-    border-top-left-radius: 0px;
-	border-top-right-radius: 4px;
-	border-bottom-right-radius: 4px;
-	border-bottom-left-radius: 0px;
-}
-span#searchspan{
-    display: inline-block;
+  text-decoration: none;
+  font-size: 1.2em;
+  font-family: "OxygenBold";
+  padding: 7px 1em;
+  background-color: #5c9531;
+  color: #fff;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
+  -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
+  border: 1px solid #5c9531;
+}
+
+input#search_terms {
+  padding: 0.4em 1em;
+  display: inline;
+  border-color: #5c9531;
+  position: relative;
+  left: -0.5em;
+  font-size: 1em;
+  margin-top: -3px;
+  background-image: url("../images/search.png");
+  background-size: 22px;
+  background-repeat: no-repeat;
+  background-position: right center;
+  border-top-left-radius: 0;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 0;
+}
+
+span#searchspan {
+  display: inline-block;
+  width: 50%;
+}
+
+@media screen and (max-width: 1170px) {
+  span#searchspan {
     width: 50%;
+  }
 }
-@media screen and (max-width: 1170px){
-    span#searchspan{width: 50%;}
-}
-@media screen and (max-width: 980px){
-    span#searchspan{width: 40%;}
+
+@media screen and (max-width: 980px) {
+  span#searchspan {
+    width: 40%;
+  }
 }
-@media screen and (max-width: 768px){
-    span#searchspan{width: 30%;}
+
+@media screen and (max-width: 768px) {
+  span#searchspan {
+    width: 30%;
+  }
 }
-@media screen and (max-width: 590px){
-    span#searchspan{width: 60%;}
+
+@media screen and (max-width: 590px) {
+  span#searchspan {
+    width: 60%;
+  }
 }
 
 div#notebook {
-	border-top: none;
+  border-top: none;
 }
 
 #narrative-name {
-	font-weight: bold;
-	font-size: 1.4em;
-	line-height: 1.2em;
-	margin-bottom: 0;
+  font-weight: bold;
+  font-size: 1.4em;
+  line-height: 1.2em;
+  margin-bottom: 0;
 }
-#narrative-creator{
-	font-size: 1.2em;
-	line-height: 1.2em;
-	padding-top: 0;
-	padding-bottom: 0;
-	margin-bottom: 0;
+
+#narrative-creator {
+  font-size: 1.2em;
+  line-height: 1.2em;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-bottom: 0;
 }
 
 #narrative-title {
-	position: relative;
-	padding-left: 3px;
-	padding-bottom: 10px;
-	margin: 0 0 10px 0;
+  position: relative;
+  padding-left: 3px;
+  padding-bottom: 10px;
+  margin: 0 0 10px 0;
 }
 
 .narrative-menu-container {
-	position: fixed;
-	z-index: 499;
-	background-color: #ffffff;
-	width: 100%;
-	border-bottom: 1px solid #ababab;
-	padding-bottom: 30px;
-	padding-top: 10px;
-	margin-top: -10px;
-	margin-left: auto
+  position: fixed;
+  z-index: 499;
+  background-color: #fff;
+  width: 100%;
+  border-bottom: 1px solid #ababab;
+  padding-bottom: 30px;
+  padding-top: 10px;
+  margin-top: -10px;
+  margin-left: auto;
 }
 
-p.clear{
-	height: 0px;
-	clear: both;
+p.clear {
+  height: 0;
+  clear: both;
 }
 
 div#header {
-	border-bottom: 1px solid #AAA;
-	position: relative;
-	padding: 0 0 0 20px;
-	height: 56px;
+  border-bottom: 1px solid #aaa;
+  position: relative;
+  padding: 0 0 0 20px;
+  height: 56px;
 }
 
 p#site-title {
-	height: 46px;
-	width: 46px;
-	background: url("../images/kbase_logo.png") no-repeat;
-	background-size: 46px;
-	margin: 5px;
-	float: left;
-	text-indent: -9999px;
+  height: 46px;
+  width: 46px;
+  background: url("../images/kbase_logo.png") no-repeat;
+  background-size: 46px;
+  margin: 5px;
+  float: left;
+  text-indent: -9999px;
 }
 
 #login-info {
-	position: absolute;
-	right: 0px;
-	top: 7px;
-	margin: 5px;
-	font-size: 1.2em;
+  position: absolute;
+  right: 0;
+  top: 7px;
+  margin: 5px;
+  font-size: 1.2em;
 }
 
 #login-widget button {
-	margin-left: 5px;
+  margin-left: 5px;
 }
+
 /*
 nav {
 	padding: 26px 0 0 0;
@@ -225,112 +241,108 @@ nav ul li.selected {
 }
 */
 
-
 .search-box {
-	position: relative;
-	display: inline;
-	border-collapse: separate;
-	margin: -11px 0;
-	padding: 10px 1px;
-	width: 200px;
+  position: relative;
+  display: inline;
+  border-collapse: separate;
+  margin: -11px 0;
+  padding: 10px 1px;
+  width: 200px;
 }
 
 #search-box-name {
-	padding: 6px 0px;
-	border: 0;
-	border-radius: 4px;
+  padding: 6px 0;
+  border: 0;
+  border-radius: 4px;
 }
 
 #search-box-name:first-child {
-	border-right: 0;
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 #search-box-name:last-child {
-	border-top-left-radius: 0;
-	border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
-
-
-
-
 #search-input {
-	margin: -11px 0;
+  margin: -11px 0;
 }
 
 #search-select {
-	margin: -11px 0;
-	width: 150px;
+  margin: -11px 0;
+  width: 150px;
 }
 
 #search-area {
-	position: relative;
-	font: 18px 'RobotoBlack', Arial, sans-serif;
-	font-weight: normal;
-	color: #686868;
-	padding: 11px 11px;
-	margin: 0 5px;
+  position: relative;
+  font: 18px "RobotoBlack", Arial, sans-serif;
+  font-weight: normal;
+  color: #686868;
+  padding: 11px 11px;
+  margin: 0 5px;
 }
 
 #search-area input {
-	padding: 11px 11px;
+  padding: 11px 11px;
 }
 
 /* container for the left and center panes */
 #main-container {
-	/*width: 1170px; */
-	width: 100%;
-	position: absolute;
-	top: 55px;
-	bottom: 5;
+  /* width: 1170px; */
+  width: 100%;
+  position: absolute;
+  top: 55px;
+  bottom: 5;
 }
 
-
 /* center pane */
 
-
 #notebook_name {
-	color: #006698;
-	font-family: "OxygenBold", Arial, sans-serif;
+  color: #006698;
+  font-family: "OxygenBold", Arial, sans-serif;
 }
 
 #content-column {
-	/*float: left; */
-/*	max-width: 1170px;
-*/	height: 100%;
-	margin-left: 300px;
+  /* float: left; */
+
+  /*	max-width: 1170px;
+*/
+
+  height: 100%;
+  margin-left: 300px;
 }
 
 #workspace {
-	position: fixed;
-	width: 878px;
-	top: 173px;
-	bottom: 42px;
-	overflow: auto;
+  position: fixed;
+  width: 878px;
+  top: 173px;
+  bottom: 42px;
+  overflow: auto;
 }
 
-
 /* footer */
-#bottom-tabs{
-    clear: left;
-    position : fixed;
-    bottom : 0;
-	width: 1170px;
-	margin: 0 auto;
-	background-color: #fff;
-	border-top: 1px solid #aaa;
+#bottom-tabs {
+  clear: left;
+  position: fixed;
+  bottom: 0;
+  width: 1170px;
+  margin: 0 auto;
+  background-color: #fff;
+  border-top: 1px solid #aaa;
 }
 
-#bottom-tabs p a{
-	border: 1px solid #018841;
-	background-color: #fff;
-	padding: 14px 20px;
-	font-size: 14px;
+#bottom-tabs p a {
+  border: 1px solid #018841;
+  background-color: #fff;
+  padding: 14px 20px;
+  font-size: 14px;
 }
 
 /* left pane styling */
+
 /* #left-column {
 	width: 289px;
 	position: fixed;
@@ -340,501 +352,578 @@ nav ul li.selected {
 } */
 
 #data-header {
-	padding: 10px 0;
-	color: #fff;
-	font-weight: bold;
-	background-color: #099;
+  padding: 10px 0;
+  color: #fff;
+  font-weight: bold;
+  background-color: #099;
 }
 
 #data-title {
-	text-align: center;
+  text-align: center;
 }
 
 #data-add-btn {
-	padding: 0 0 -10px 0;
-	position: absolute;
-	right: 7px;
-	font-size: 0.8em;
+  padding: 0 0 -10px 0;
+  position: absolute;
+  right: 7px;
+  font-size: 0.8em;
 }
 
 #data-add-btn:hover {
-	color:#000;
+  color: #000;
 }
 
 #data-tab-nav {
-	border-bottom: 1px solid #aaa;
-	padding-top: 10px;
-	background-color: #0bb;
-	width: 100%;
+  border-bottom: 1px solid #aaa;
+  padding-top: 10px;
+  background-color: #0bb;
+  width: 100%;
 }
 
 #data-tab-nav ul {
-	padding-bottom: 0;
-	bottom: 0px;
-	top: 50px;
+  padding-bottom: 0;
+  bottom: 0;
+  top: 50px;
 }
 
 #data-tab-nav ul li {
-	display: inline;
-	border: 1px solid black;
-	padding: 4px 10px;
-	background-color: #ddd;
+  display: inline;
+  border: 1px solid black;
+  padding: 4px 10px;
+  background-color: #ddd;
 }
 
 #data-tab-nav ul li a:hover {
-	text-decoration: none;
-	color: #a00;
+  text-decoration: none;
+  color: #a00;
 }
 
 #data-tab-nav ul li a {
-	color: #000;
+  color: #000;
 }
 
 #data-tab-nav ul li.selected {
-	background-color: #fff;
+  background-color: #fff;
 }
 
 #data-view-panel {
-	height: 150px;
-	border: 1px solid #aaa;
-	padding: 10px;
-	overflow-y: auto;
+  height: 150px;
+  border: 1px solid #aaa;
+  padding: 10px;
+  overflow-y: auto;
 }
 
 #data-pane {
-	height: 69%;
-	margin-top: 1px;
-	border-bottom: 1px solid #AAA;
-	overflow: auto;
+  height: 69%;
+  margin-top: 1px;
+  border-bottom: 1px solid #aaa;
+  overflow: auto;
 }
-#data-pane p{
-	margin: 0px 0;
+
+#data-pane p {
+  margin: 0 0;
 }
-#data-pane p span{
-	display: block;
-	padding: 2px 10px;
-	color: #fff;
-	border: 1px solid #fff;
-	width: 123px;
-	margin: 0;
-	text-align: center;
-}
-#data-pane p span.tab1{
-	float: right;
-	background: -moz-linear-gradient(top, #666, #bbb);
-	background: -webkit-linear-gradient(top, #666, #bbb);
-	color: #fff;
+
+#data-pane p span {
+  display: block;
+  padding: 2px 10px;
+  color: #fff;
+  border: 1px solid #fff;
+  width: 123px;
+  margin: 0;
+  text-align: center;
+}
+
+#data-pane p span.tab1 {
+  float: right;
+  background: -moz-linear-gradient(top, #666, #bbb);
+  background: -webkit-linear-gradient(top, #666, #bbb);
+  color: #fff;
 }
-#data-pane p span.tab2{
-	background: -moz-linear-gradient(top, #ccc, #999);
-	background: -webkit-linear-gradient(top, #ccc, #999);
+
+#data-pane p span.tab2 {
+  background: -moz-linear-gradient(top, #ccc, #999);
+  background: -webkit-linear-gradient(top, #ccc, #999);
 }
+
 #function-pane {
-	height: 30%;
-	margin-top: 1px;
-	overflow: auto;
+  height: 30%;
+  margin-top: 1px;
+  overflow: auto;
 }
 
-/*.left-pane {
+/* .left-pane {
     font-size: 14px;
     position: relative;
 }
 */
 .left-pane {
-	font-size: 14px;
-	position: relative;
-/*	width: 289px;
+  font-size: 14px;
+  position: relative;
+
+  /*	width: 289px;
 	top: 428px;
 	bottom: 20px;
 	overflow: auto;
-*/}
-
+*/
+}
 
 #kb-function-panel .kb-function-body {
-	height: 100% ;
-	max-height: 100% ;
+  height: 100%;
+  max-height: 100%;
 }
 
 h3.pane-title {
-    margin: 0;
-	position: relative;
-	background-color: rgb(224,224,224);
-	padding: 3px 5px;
-	border: 1px solid #C2C2C2;
-	font-size: 16px;
+  margin: 0;
+  position: relative;
+  background-color: rgb(224, 224, 224);
+  padding: 3px 5px;
+  border: 1px solid #c2c2c2;
+  font-size: 16px;
 }
 
 #add-link {
-	position: absolute;
-	top: 4px;
-	right: 7px;
-	font-size: 0.8em;
+  position: absolute;
+  top: 4px;
+  right: 7px;
+  font-size: 0.8em;
 }
 
 ul.pane-list {
-	margin: 0;
-	padding : 2px
+  margin: 0;
+  padding: 2px;
 }
 
 ul.pane-list li {
-	list-style: none;
-	padding: 1px;
-	margin-left: 5px;
+  list-style: none;
+  padding: 1px;
+  margin-left: 5px;
 }
 
 /* A function in the function pane */
 li.function a {
-    text-decoration: none;
-    color: rgb(80,130,50);
+  text-decoration: none;
+  color: rgb(80, 130, 50);
 }
+
 li.function a:visited {
-    /* don't recolor */
-    color: rgb(80,130,50);
+  /* don't recolor */
+  color: rgb(80, 130, 50);
 }
+
 /* dataset in data pane */
 li.dataset a {
-    text-decoration: none;
-    color: rgb(130,80,50);
+  text-decoration: none;
+  color: rgb(130, 80, 50);
 }
+
 li.dataset a:visited {
-    /* don't recolor */
-    color: rgb(130,80,50);
+  /* don't recolor */
+  color: rgb(130, 80, 50);
 }
 
-
 /* dialog box + forms styling */
 
 .dialog-box {
-	padding: 20px;
+  padding: 20px;
 }
 
 .dialog-box ul li {
-	padding: 50px 5px;
-	border-bottom: 1px solid #AAA;
-	font-size: 1.2em;
+  padding: 50px 5px;
+  border-bottom: 1px solid #aaa;
+  font-size: 1.2em;
 }
 
 .dialog-box ul li:first-child {
-	padding-top: 20px;
+  padding-top: 20px;
 }
 
 .dialog-box ul li:last-child {
-	border-bottom: none;
+  border-bottom: none;
 }
 
 fieldset {
-	margin: 0 0 15px 0;
-	border: none;
+  margin: 0 0 15px 0;
+  border: none;
 }
 
 fieldset label {
-/*	display: block;
-*/	margin: 0 0 3px 0;
-	font-weight: bold;
-	font-size: 1em;
+  /*	display: block;
+*/
 
+  margin: 0 0 3px 0;
+  font-weight: bold;
+  font-size: 1em;
 }
 
-fieldset input[type="text"], fieldset select {
-	width: 200px;
+fieldset input[type="text"],
+fieldset select {
+  width: 200px;
 }
-fieldset input[type="password"], fieldset select {
-	width: 200px;
+
+fieldset input[type="password"],
+fieldset select {
+  width: 200px;
 }
 
 /* styling of cells */
 
-div.dataset-cell, div.function-cell {
-	width: 90%;
-	margin: 3px auto;
-	padding: 7px 17px;
-	border: 1px solid #ccc;
-}
-img.dataset-cell{
-	margin: 3px auto;
-	padding: 0;
-}
-.function-cell{
-	background-image: url("../images/gears.png");
-	background-position: right;
-	background-repeat: no-repeat;
-	#background-color: #f2f2f2;
-}
-.dataset-cell p, .function-cell p {
-	font-size: .875em;
-}
-.dataset-cell h2, .function-cell h2{
-	margin-bottom: 0;
-	font-size: 1.1em;
-}
-.textcell{
-	width: 90%;
-	margin: 3px auto;
-	padding: 5px 17px;
-	font-size: 1em;
-	height: 1em;
-	border: 2px solid #fff;
-	color: #111;
-}
-
-.textcell:hover{
-	border: 2px dotted #ccc;
-}
-
-p.textcuepara{
-	color: #ccc;
-	padding: 0;
-	margin: 0;
-	height: 1em;
-	display: none;
-}
-
-div.tools p, div.texttools p{
-	margin: 0;
-}
-div.textarea{
-	width: 650px;
-	border: none;
-	padding: 0;
-	height: auto;
-	min-height: 1.2em;
-	display: none;
-}
-.tools, .texttools{
-	display: none;
-}
-.tools{
-	height: 1em;
-	margin-top: .5em;
-	margin-left: 10px;
-}
-.tools a{
-	border: 1px solid #018841;
-	padding: 2px 4px;
-	font-size: 13px;
-}
-
-#narrative-header .tools{
-	display: block;
-	width: 30em;
-	position: relative;
-	top: -2.0em;
-	left: 350px;
-}
-.texttools img{
-	vertical-align: middle;
-}
-img.remove{
-	float: right;
-}
-.ui-state-highlight{
-	background-color: fbfaed;
-}
-div.metadata{
-	display: block;
-	width: 200px;
-	padding: 0 10px;
-	height: 100px;
-	float: left;
-}
-div.social{
-	float: right;
-	display: block;
-	width: 80px;
-	padding: 0 10px;
-	display: none;
-}
-p span.notification{
-	background-color: #ff3333;
-	color: #fff;
-	padding: 4px 8px;
-	border-radius: 1em;
+div.dataset-cell,
+div.function-cell {
+  width: 90%;
+  margin: 3px auto;
+  padding: 7px 17px;
+  border: 1px solid #ccc;
+}
+
+img.dataset-cell {
+  margin: 3px auto;
+  padding: 0;
+}
+
+.function-cell {
+  background-image: url("../images/gears.png");
+  background-position: right;
+  background-repeat: no-repeat;
+  #background-color: #f2f2f2;
+}
+
+.dataset-cell p,
+.function-cell p {
+  font-size: 0.875em;
+}
+
+.dataset-cell h2,
+.function-cell h2 {
+  margin-bottom: 0;
+  font-size: 1.1em;
+}
+
+.textcell {
+  width: 90%;
+  margin: 3px auto;
+  padding: 5px 17px;
+  font-size: 1em;
+  height: 1em;
+  border: 2px solid #fff;
+  color: #111;
+}
+
+.textcell:hover {
+  border: 2px dotted #ccc;
+}
+
+p.textcuepara {
+  color: #ccc;
+  padding: 0;
+  margin: 0;
+  height: 1em;
+  display: none;
+}
+
+div.tools p,
+div.texttools p {
+  margin: 0;
+}
+
+div.textarea {
+  width: 650px;
+  border: none;
+  padding: 0;
+  height: auto;
+  min-height: 1.2em;
+  display: none;
+}
+
+.tools,
+.texttools {
+  display: none;
 }
 
+.tools {
+  height: 1em;
+  margin-top: 0.5em;
+  margin-left: 10px;
+}
+
+.tools a {
+  border: 1px solid #018841;
+  padding: 2px 4px;
+  font-size: 13px;
+}
+
+#narrative-header .tools {
+  display: block;
+  width: 30em;
+  position: relative;
+  top: -2em;
+  left: 350px;
+}
+
+.texttools img {
+  vertical-align: middle;
+}
+
+img.remove {
+  float: right;
+}
+
+.ui-state-highlight {
+  background-color: fbfaed;
+}
+
+div.metadata {
+  display: block;
+  width: 200px;
+  padding: 0 10px;
+  height: 100px;
+  float: left;
+}
+
+div.social {
+  float: right;
+  display: block;
+  width: 80px;
+  padding: 0 10px;
+  display: none;
+}
+
+p span.notification {
+  background-color: #f33;
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 1em;
+}
 
 /**
  * Bootstrap 3 submenu hack^H^H^H^H fix
  * http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing
  */
 
-.dropdown-submenu{position:relative;}
-.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
-.dropdown-submenu:hover>.dropdown-menu{display:block;}
-.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
-.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
-.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
+.dropdown-submenu {
+  position: relative;
+}
 
-/** End Bootstrap 3 submenu fix **/
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+  -webkit-border-radius: 0 6px 6px 6px;
+  -moz-border-radius: 0 6px 6px 6px;
+  border-radius: 0 6px 6px 6px;
+}
 
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+
+.dropdown-submenu > a::after {
+  display: block;
+  content: " ";
+  float: right;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #ccc;
+  margin-top: 5px;
+  margin-right: -10px;
+}
+
+.dropdown-submenu:hover > a::after {
+  border-left-color: #fff;
+}
+
+.dropdown-submenu.pull-left {
+  float: none;
+}
+
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+  -webkit-border-radius: 6px 0 6px 6px;
+  -moz-border-radius: 6px 0 6px 6px;
+  border-radius: 6px 0 6px 6px;
+}
+
+/** End Bootstrap 3 submenu fix **/
 
 /* Fixes to bring toolbars up to Bootstrap 3 */
 #maintoolbar {
-	position: relative;
-	top: 5px;
-	min-height: 0;
-	border: none !important;
-	background-image: none !important;
-	background-color: #f9f9f9 !important;
-	-webkit-box-shadow: none;
-	box-shadow: none;
+  position: relative;
+  top: 5px;
+  min-height: 0;
+  border: none !important;
+  background-image: none !important;
+  background-color: #f9f9f9 !important;
+  -webkit-box-shadow: none;
+  box-shadow: none;
 }
 
 #maintoolbar-container {
-	margin-left: 10px;
+  margin-left: 10px;
 }
 
 #menubar {
-	position: absolute;
-	width: 100%;
-	top: 3px;
-	background-color: #f9f9f9;
-	border-bottom: 2px solid #ddd;
-	padding-bottom: 5px;
+  position: absolute;
+  width: 100%;
+  top: 3px;
+  background-color: #f9f9f9;
+  border-bottom: 2px solid #ddd;
+  padding-bottom: 5px;
 }
 
 #menubar .navbar {
-	margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 
 #menubar .navbar .container {
-	padding-left: 0;
-	padding-right: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 /* some more bootstrap hacks */
 .navbar {
-	min-height: 0;
-	background-image: none;
-	background-color: #f8f8f8;
+  min-height: 0;
+  background-image: none;
+  background-color: #f8f8f8;
 }
 
-#menubar .navbar-nav>li>a {
-	padding-top: 10px;
-	padding-bottom: 7px;
+#menubar .navbar-nav > li > a {
+  padding-top: 10px;
+  padding-bottom: 7px;
 }
 
-.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger {
-	background-image: none;
+.btn-default,
+.btn-primary,
+.btn-success,
+.btn-info,
+.btn-warning,
+.btn-danger {
+  background-image: none;
 }
 
-.panel-default>.panel-heading {
-	background-image: none;
+.panel-default > .panel-heading {
+  background-image: none;
 }
 
 .btn-default {
-	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
 }
 
 .btn-group {
-	margin-right: 5px;
+  margin-right: 5px;
 }
 
 #menus {
-	padding-left: 0px;
+  padding-left: 0;
 }
 
 #ipython-main-app {
-	position: absolute;
-	bottom: 5;
-	top: 90px;
-	right: 10px;
-	left: 310px;
-	overflow: auto;
+  position: absolute;
+  bottom: 5;
+  top: 90px;
+  right: 10px;
+  left: 310px;
+  overflow: auto;
 }
 
-#menubar .navbar  {
-	width: 100%;
+#menubar .navbar {
+  width: 100%;
 }
 
 div#notebook_panel {
--webkit-box-shadow: 0 -1px 0px rgba(0, 0, 0, 0.1);
--moz-box-shadow: 0 -1px 0px rgba(0, 0, 0, 0.1);
-box-shadow: 0 -1px 0px rgba(0, 0, 0, 0.1);
-border-left: 1px solid #f2f2f2;
+  -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+  border-left: 1px solid #f2f2f2;
 }
 
-.version-stamp a{
-	padding-right: 320px;
-	text-align: right;
-	color: #0088CC !important;
+.version-stamp a {
+  padding-right: 320px;
+  text-align: right;
+  color: #08c !important;
 }
 
 .creator-stamp {
-	padding-right: 320px;
-	height: 1em;
-	text-align: right;
-	color: #006698;
-	font-size: 120%;
-	line-height: 1em;
-	font-family: "OxygenBold", Arial, sans-serif;
+  padding-right: 320px;
+  height: 1em;
+  text-align: right;
+  color: #006698;
+  font-size: 120%;
+  line-height: 1em;
+  font-family: "OxygenBold", Arial, sans-serif;
 }
 
 .panel {
-	margin-bottom: 0px;
+  margin-bottom: 0;
 }
 
 #kb-jobs-panel {
-	margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 
 .kb-narr-side-panel {
-	margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 
 .kbujs-table-container {
-    height: auto;
+  height: auto;
 }
 
 .kbujs-timestamp {
-	color: #0066b9;
-	cursor: pointer;
+  color: #0066b9;
+  cursor: pointer;
 }
 
 .kbujs-error-cell {
-	color: #c7254e;
-	font-weight: bold;
+  color: #c7254e;
+  font-weight: bold;
 }
 
 .kbujs-error:hover {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 .kbujs-loading-modal {
-	text-align: center;
-	font-size: 16px;
-	font-weight: bold;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
 }
 
 .kbujs-refresh-btn {
-    position: absolute;
-    right: 5px;
+  position: absolute;
+  right: 5px;
 }
 
 .kbujs-jobs-table {
-	margin-left: auto !important;
-	margin-right: auto !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
 }
 
 .kbujs-loading {
-    height: 100%
-    vertical-align: middle;
-    text-align: center
+  height: 100%;
+  vertical-align: middle;
+  text-align: center;
 }
 
 .kbujs-delete-job {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 .kbujs-error-traceback {
-    white-space : nowrap;
-    float : left;
-    max-width : 516px;
-    max-height: 250px;
-    overflow-x : scroll;
-    overflow-y: scroll;
+  white-space: nowrap;
+  float: left;
+  max-width: 516px;
+  max-height: 250px;
+  overflow-x: scroll;
+  overflow-y: scroll;
 }
+
 /* For connecting lines */
 .kb-line {
-    background-color: lightgrey;
-    position: absolute;
+  background-color: lightgrey;
+  position: absolute;
 }
diff --git a/kbase-extension/static/kbase/css/widgets.css b/kbase-extension/static/kbase/css/widgets.css
index 0294412173..2682c29364 100644
--- a/kbase-extension/static/kbase/css/widgets.css
+++ b/kbase-extension/static/kbase/css/widgets.css
@@ -1,16 +1,16 @@
 /* tab.js */
 
 .nav-tabs .glyphicon-remove {
-    margin: 0 0 0 3px;
-    color: #aaa;
+  margin: 0 0 0 3px;
+  color: #aaa;
 }
 
 .nav-tabs .glyphicon-remove:hover {
-    color: #666;
-    cursor: hand;
-    cursor: pointer;
+  color: #666;
+  cursor: hand;
+  cursor: pointer;
 }
 
 .twitter-typeahead {
-    width: 100%;
-}
\ No newline at end of file
+  width: 100%;
+}
diff --git a/kbase-extension/static/kbase/custom/custom.css b/kbase-extension/static/kbase/custom/custom.css
index 6e1d1362cd..dfd55e4204 100644
--- a/kbase-extension/static/kbase/custom/custom.css
+++ b/kbase-extension/static/kbase/custom/custom.css
@@ -6,352 +6,348 @@ CSS should go in /kbase-extension/static/kbase/css/kbaseNarrative.css
 */
 @font-face {
   font-family: 'Glyphicons Halflings';
-
   src: url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot');
   src: url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
 }
 
 .select2-container--default .select2-results__option--highlighted[aria-selected] {
-    background-color: #337ab7;
-    color: #FFF;
+  background-color: #337ab7;
+  color: #fff;
 }
 
 .select2-container--default .select2-results__option--highlighted[aria-selected] span {
-    color: #FFF !important;
+  color: #fff !important;
 }
 
 #site {
-    overflow: visible;
+  overflow: visible;
 }
 
-
 /* disable the standard notebook, bottom spacer */
 
-#notebook>.end_space {
-    min-height: 0;
-    height: 0;
+#notebook > .end_space {
+  min-height: 0;
+  height: 0;
 }
 
 @media (min-width: 1200px) {
-    #notebook-container {
-        width: auto;
-    }
+  #notebook-container {
+    width: auto;
+  }
 }
 
 @media (min-width: 992px) {
-    #notebook-container {
-        width: auto;
-    }
+  #notebook-container {
+    width: auto;
+  }
 }
 
 @media (min-width: 768px) {
-    #notebook-container {
-        width: auto;
-    }
+  #notebook-container {
+    width: auto;
+  }
 }
 
 .notebook_app {
-    overflow-y: hidden;
-    background-color: #FFFFFF;
+  overflow-y: hidden;
+  background-color: #fff;
 }
 
-
 /* .btn * { color: black; } */
 
 .celltoolbar {
-    height: auto;
-    background: none;
-    border: none;
-    border-left: 1px solid transparent;
-    padding-top: 0;
-    padding-bottom: 2px;
+  height: auto;
+  background: none;
+  border: none;
+  border-left: 1px solid transparent;
+  padding-top: 0;
+  padding-bottom: 2px;
 }
 
 div.input_area {
-    border: 1px solid #CECECE;
-    border-radius: 0px;
-    /* a little padding to match the prompt */
-    padding-top: 4px;
+  border: 1px solid #cecece;
+  border-radius: 0;
+
+  /* a little padding to match the prompt */
+  padding-top: 4px;
 }
 
 div.output_subarea {
-    max-width: inherit;
+  max-width: inherit;
 }
 
 div.text_cell_input {
-    border: 1px solid #CECECE;
-    border-radius: 0px;
+  border: 1px solid #cecece;
+  border-radius: 0;
 }
 
 div.cell {
-    margin: 8px 0 8px 0px;
-    padding: 0;
-    border: 1px solid #CCC;
-    border-left: 5px solid #CCC;
-    border-radius: 0;
+  margin: 8px 0 8px 0;
+  padding: 0;
+  border: 1px solid #ccc;
+  border-left: 5px solid #ccc;
+  border-radius: 0;
 }
 
 div.cell.selected {
-    margin-left: 0;
-    border: 1px solid #4BB856;
-    border-left: 5px solid #4BB856;
-    padding-left: 0px;
-    background-color: #E8EFFF;
-    background: none;
-    transition: box-shadow 0.2s ease-in-out;
-    -moz-transition: box-shadow 0.2s ease-in-out;
-    -webkit-transition: box-shadow 0.2s ease-in-out;
-    box-shadow: 0px 1px 2px #aaa, 0 5px 5px #aaa;
-    -moz-box-shadow: 0px 1px 2px #aaa, 0 5px 5px #aaa;
-    -webkit-box-shadow: 0px 1px 2px #aaa, 0 5px 5px #aaa;
+  margin-left: 0;
+  border: 1px solid #4bb856;
+  border-left: 5px solid #4bb856;
+  padding-left: 0;
+  background-color: #e8efff;
+  background: none;
+  transition: box-shadow 0.2s ease-in-out;
+  -moz-transition: box-shadow 0.2s ease-in-out;
+  -webkit-transition: box-shadow 0.2s ease-in-out;
+  box-shadow: 0 1px 2px #aaa, 0 5px 5px #aaa;
+  -moz-box-shadow: 0 1px 2px #aaa, 0 5px 5px #aaa;
+  -webkit-box-shadow: 0 1px 2px #aaa, 0 5px 5px #aaa;
 }
 
-div.cell.selected:before {
-    background: none;
+div.cell.selected::before {
+  background: none;
 }
 
 div.cell.opened {
-    padding-top: 0px;
+  padding-top: 0;
 }
 
 .edit_mode div.cell.selected {
-    border-left: 5px solid #66BB6A;
-    background: none;
-    padding-left: 0px;
+  border-left: 5px solid #66bb6a;
+  background: none;
+  padding-left: 0;
 }
 
 div.cell.selected.kb-error {
-    border: 1px solid #d9534f;
-    border-left: 5px solid #d9534f;
+  border: 1px solid #d9534f;
+  border-left: 5px solid #d9534f;
 }
 
 div#notebook {
-    padding: 0;
+  padding: 0;
 }
 
 span#notebook_name {
-    color: #006698;
+  color: #006698;
 }
 
 span#notebook_name:hover {
-    cursor: pointer;
-    background-color: #e0e0e0;
+  cursor: pointer;
+  background-color: #e0e0e0;
 }
 
 .prompt {
-    min-width: 10ex;
-    padding-top: 10px;
+  min-width: 10ex;
+  padding-top: 10px;
 }
 
 #notebook-container {
-    box-shadow: none;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
-    width: auto;
-    min-width: 460px;
-    position: fixed;
-    left: 380px;
-    top: 70px;
-    right: 0;
-    bottom: 0;
-    overflow: auto;
-}
-#notebook-container:after{
-    content: "";
-    height: 100px;
-    display:block;
+  box-shadow: none;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  width: auto;
+  min-width: 460px;
+  position: fixed;
+  left: 380px;
+  top: 70px;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
 }
 
+#notebook-container::after {
+  content: "";
+  height: 100px;
+  display: block;
+}
 
 /* margin left doesn't really seeem to play well */
 
 .btn-toolbar {
-    margin-left: 0;
-    padding-left: -5px;
+  margin-left: 0;
+  padding-left: -5px;
 }
 
 .kb-narr-side-panel .btn-group .btn {
-    padding: 3px 4px 3px 4px;
-    font-size: 16px;
+  padding: 3px 4px 3px 4px;
+  font-size: 16px;
 }
 
 .btn-subtle {
-    color: #888;
-    margin: 0px
+  color: #888;
+  margin: 0;
 }
 
 .btn-subtle .fa {
-    color: #888;
+  color: #888;
 }
 
 .btn-subtle .fa::before {
-    color: #888;
+  color: #888;
 }
 
 .notebook_app .btn.active {
-    box-shadow: none;
+  box-shadow: none;
 }
 
-
 /* Fooling around with the narrative cells */
 
 .notebook_app .inner_cell {
-    overflow: visible;
+  overflow: visible;
 }
 
-.notebook_app .celltoolbar>.button_container {
-    flex: 0 auto;
+.notebook_app .celltoolbar > .button_container {
+  flex: 0 auto;
 }
 
-.notebook_app .celltoolbar>.button_container:nth-child(1) {
-    flex: auto;
+.notebook_app .celltoolbar > .button_container:nth-child(1) {
+  flex: auto;
 }
 
 .notebook_app .celltoolbar_container {
-    border-bottom: 1px silver solid;
+  border-bottom: 1px silver solid;
 }
 
 .notebook_app .prompt {
-    padding-top: 0px;
-    color: silver;
-    width: 75px;
+  padding-top: 0;
+  color: silver;
+  width: 75px;
 }
 
 .notebook_app .cell.unselected div.text_cell_render {
-    border: 1px solid transparent;
+  border: 1px solid transparent;
 }
 
 .notebook_app .cell.selected div.text_cell_render {
-    border: 1px solid transparent;
+  border: 1px solid transparent;
 }
 
 .notebook_app .buttons .dropdown-menu {
-    height: auto !important;
-    overflow: visible !important;
+  height: auto !important;
+  overflow: visible !important;
 }
 
 .notebook_app .btn.disabled .fa {
-    color: silver;
+  color: silver;
 }
 
 .text_cell.kb-cell .rendered_html table {
-    border: 1px solid #ddd;
+  border: 1px solid #ddd;
 }
 
 .text_cell.kb-cell .rendered_html ul {
-    margin: 0;
+  margin: 0;
 }
 
 .text_cell.opened.rendered.kb-cell .rendered_html {
-    padding: 0;
-    border: 0;
+  padding: 0;
+  border: 0;
 }
 
 .text_cell.opened.rendered.selected.kb-cell .rendered_html {
-    border-left: 1px solid #4BB856;
+  border-left: 1px solid #4bb856;
 }
 
 .text_cell.opened.rendered.selected.kb-cell.kb-error .rendered_html {
-    border-left: 1px solid #d9534f;
+  border-left: 1px solid #d9534f;
 }
 
 .text_cell.opened.rendered.kb-cell {
-    padding-bottom: 0;
+  padding-bottom: 0;
 }
 
 .rendered_html tr,
 .rendered_html th,
 .rendered_html td {
-    text-align: inherit;
+  text-align: inherit;
 }
 
 .rendered_html table {
-    table-layout: inherit;
+  table-layout: inherit;
 }
 
 /* narrative cell icons */
 
 .cell.selected .prompt .method-icon {
-    color: rgb(103, 58, 183);
+  color: rgb(103, 58, 183);
 }
 
 .cell.selected .prompt .app-icon {
-    color: rgb(0, 150, 136);
+  color: rgb(0, 150, 136);
 }
 
 .cell.selected .prompt .markdown-icon {
-    color: #000;
+  color: #000;
 }
 
 .cell.selected .prompt .app-output-icon {
-    color: #000;
+  color: #000;
 }
 
 .cell.selected .prompt .method-output-icon {
-    color: #000;
+  color: #000;
 }
 
 .cell.selected .prompt .data-viewer-icon {
-    color: #000;
+  color: #000;
 }
 
 .cell.selected .prompt .error-icon {
-    color: red;
+  color: red;
 }
 
 .cell.selected .prompt.input_prompt {
-    color: #303F9F;
+  color: #303f9f;
 }
 
 .cell.selected .prompt.output_prompt {
-    color: #D84315;
+  color: #d84315;
 }
 
-.cell>.inner_cell>.ctb_hideshow {
-    display: block;
+.cell > .inner_cell > .ctb_hideshow {
+  display: block;
 }
 
 .cell.selected .btn-default {
-    color: #000;
+  color: #000;
 }
 
 .cell.unselected .btn-default {
-    color: #CCC;
+  color: #ccc;
 }
 
 .cell.unselected .kb-cell-toolbar .title-container {
-    opacity: 0.5;
+  opacity: 0.5;
 }
 
 .cell.unselected .kb-cell-toolbar .buttons-container {
-    opacity: 0.2;
+  opacity: 0.2;
 }
 
 .kb-btn-icon {
-    display: inline-block;
-    padding: 4px;
+  display: inline-block;
+  padding: 4px;
 }
 
 .kb-btn-icon .fa {
-    opacity: 0.5
+  opacity: 0.5;
 }
 
 .kb-btn-icon:hover .fa {
-    opacity: 1.0
+  opacity: 1;
 }
 
-
 /*
   For some reason Jupyter removes the bottom margin. This causes problems with
    bootstrap, since bootstrap removes the top margin!
 */
 
 p {
-    margin-bottom: 9px;
+  margin-bottom: 9px;
 }
 
 .prompt {
-    display: none !important;
+  display: none !important;
 }
 
 /*
@@ -360,18 +356,18 @@ p {
  * This hunk of CSS should remove it until we can better work it in to our design.
  */
 div.code_cell:hover .run_this_cell {
-    visibility: hidden !important;
+  visibility: hidden !important;
 }
 
 div.code_cell:hover div.input_prompt.run_this_cell {
-    visibility: hidden !important;
+  visibility: hidden !important;
 }
 
 div.code_cell div.input_prompt {
-    min-width: 0;
+  min-width: 0;
 }
 
 .run_this_cell {
-    padding: 0 !important;
-    width: 0 !important;
+  padding: 0 !important;
+  width: 0 !important;
 }
diff --git a/nbextensions/advancedViewCell/styles/main.css b/nbextensions/advancedViewCell/styles/main.css
index a3b6a27270..6f5595ca02 100644
--- a/nbextensions/advancedViewCell/styles/main.css
+++ b/nbextensions/advancedViewCell/styles/main.css
@@ -3,11 +3,12 @@ To change this license header, choose License Headers in Project Properties.
 To change this template file, choose Tools | Templates
 and open the template in the editor.
 */
-/* 
+
+/*
     Created on : Jul 14, 2016, 2:31:08 PM
     Author     : erik
 */
 
 .kb-advanced-view-cell .kb-panel-container[data-element=parameters-group] > div.panel-collapse > .panel-body {
-    padding: 0;
-}
\ No newline at end of file
+  padding: 0;
+}
diff --git a/nbextensions/appCell2/styles/main.css b/nbextensions/appCell2/styles/main.css
index 1bc7b8aaef..d770faa574 100644
--- a/nbextensions/appCell2/styles/main.css
+++ b/nbextensions/appCell2/styles/main.css
@@ -3,8 +3,8 @@ To change this license header, choose License Headers in Project Properties.
 To change this template file, choose Tools | Templates
 and open the template in the editor.
 */
-/* 
+
+/*
     Created on : Jul 14, 2016, 2:30:47 PM
     Author     : erik
 */
-
diff --git a/nbextensions/editorCell/styles/main.css b/nbextensions/editorCell/styles/main.css
index a4fcfb1dc8..002061220b 100644
--- a/nbextensions/editorCell/styles/main.css
+++ b/nbextensions/editorCell/styles/main.css
@@ -2,73 +2,78 @@
   All classes below may be wrapped in this class to avoid polluting
   the Narrative styles.
 */
-.kb-editor-cell {
-
-}
-
 .kb-editor-cell .kb-app-warning {
-    font-family: 'Oxygen', sans-serif;
-    text-align: center;
+  font-family: 'Oxygen', sans-serif;
+  text-align: center;
 }
 
 /** new app parameter styling **/
-.kb-editor-cell  .kb-app-parameter-panel {
-    border-left: 3px solid #fff;
+.kb-editor-cell .kb-app-parameter-panel {
+  border-left: 3px solid #fff;
 }
-.kb-editor-cell  .kb-app-parameter-panel-hover {
-    border-left: 3px solid #428bca;
+
+.kb-editor-cell .kb-app-parameter-panel-hover {
+  border-left: 3px solid #428bca;
 }
+
 .kb-editor-cell .kb-app-parameter-row {
-    margin:0px;
+  margin: 0;
 }
+
 /* for some reason, the css :hover doesn't work right on this div, so we use jquery to toggle this class */
 .kb-editor-cell .kb-app-parameter-row-hover {
-    background:#F9F9F9;
+  background: #f9f9f9;
 }
 
-.kb-editor-cell  .kb-app-parameter-row .message.-error {
-    background: #f2dede;
+.kb-editor-cell .kb-app-parameter-row .message.-error {
+  background: #f2dede;
 }
-.kb-editor-cell  .kb-app-parameter-row .message.-warning {
-    xbackground: yellow;
+
+.kb-editor-cell .kb-app-parameter-row .message.-warning {
+  xbackground: yellow;
 }
+
 .kb-editor-cell .kb-app-parameter-row .message {
-    text-align: center;
-    font-family: 'Oxygen', sans-serif;
-    /* font-size: 9pt; */
+  text-align: center;
+  font-family: 'Oxygen', sans-serif;
+
+  /* font-size: 9pt; */
 }
 
 .kb-editor-cell .kb-app-parameter-row .message.-error {
-    color: #F44336;
+  color: #f44336;
 }
+
 .kb-editor-cell .kb-app-parameter-row .message.-warning {
-    xcolor: orange;
+  xcolor: orange;
 }
 
 /* not sure how to get text in these divs to valign middle... */
 .kb-editor-cell .kb-app-parameter-name {
-    font-family: 'Oxygen', sans-serif;
-    color: #777;
-    text-align: left;
-    vertical-align: bottom;
-    xmargin-top: 3px;
-    padding-right: 4px;
-    padding-left: 0px;
-    white-space: normal;
-    xborder-bottom: 1px #ddd dotted;
+  font-family: 'Oxygen', sans-serif;
+  color: #777;
+  text-align: left;
+  vertical-align: bottom;
+  xmargin-top: 3px;
+  padding-right: 4px;
+  padding-left: 0;
+  white-space: normal;
+  xborder-bottom: 1px #ddd dotted;
 }
+
 .kb-editor-cell .kb-app-parameter-input {
-    vertical-align:middle;
-    xwhite-space: nowrap;
-    xpadding-left:10px;
-    xborder-bottom: 1px #ccc dotted;
+  vertical-align: middle;
+  xwhite-space: nowrap;
+  xpadding-left: 10px;
+  xborder-bottom: 1px #ccc dotted;
 }
+
 .kb-editor-cell .kb-app-parameter-input input {
-    xfont-weight: bold;
+  xfont-weight: bold;
 }
 
 .kb-editor-cell .kb-app-parameter-input select.form-control {
-    margin: 0;
+  margin: 0;
 }
 
 /*
@@ -82,6 +87,7 @@ to accomodate the the icon intruding into its space. This technique makes space
 in the column in which the icon lives, and does this by shrinking the select
 control with padding, and then scooting the icon back into its column.
 */
+
 /* .kb-editor-cell .kb-app-parameter-input > div {
      allow space for the required (red arrow), satisfied (green checkbox) icon
     padding-right: 20px;
@@ -89,148 +95,153 @@ control with padding, and then scooting the icon back into its column.
 */
 .kb-editor-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph,
 .kb-editor-cell .kb-app-parameter-input .kb-app-parameter-required-glyph {
-    /* This scoots the icon inside */
-    font-size: 15px;
-    margin-left: 0;
+  /* This scoots the icon inside */
+  font-size: 15px;
+  margin-left: 0;
 }
+
 .kb-editor-cell .kb-app-parameter-required-glyph {
-    color: #F44336;
+  color: #f44336;
 }
+
 .kb-editor-cell .kb-app-parameter-hint {
-    padding-left: 7px;
+  padding-left: 7px;
 }
 
 .kb-editor-cell .kb-parameter-data-selection {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .kb-editor-cell .kb-app-parameter-hint {
-    color: #777;
-    text-align:left;
-    margin-top:3px;
+  color: #777;
+  text-align: left;
+  margin-top: 3px;
 }
 
 .kb-editor-cell .kb-app-parameter-accepted-glyph {
-    color: #4BB856;
+  color: #4bb856;
 }
 
 .kb-editor-cell .kb-app-parameter-info {
-    color: #777;
+  color: #777;
 }
 
 .kb-editor-cell .kb-parameter-data-row-remove {
-    color: #777;
+  color: #777;
 }
+
 .kb-editor-cell .kb-parameter-data-row-add {
-    color: #777;
+  color: #777;
 }
 
-
 .kb-editor-cell .kb-app-advanced-options-controller-inactive {
-    font-family: 'Oxygen', sans-serif;
-    font-weight: bold;
-    font-style: italic;
-    font-size: 10pt;
-    line-height: 14px;
-    color: #777;
-    text-align: center;
+  font-family: 'Oxygen', sans-serif;
+  font-weight: bold;
+  font-style: italic;
+  font-size: 10pt;
+  line-height: 14px;
+  color: #777;
+  text-align: center;
 }
+
 .kb-editor-cell .kb-app-advanced-options-controller {
-    font-family: 'Oxygen', sans-serif;
-    font-weight: bold;
-    cursor:pointer;
-    font-style: italic;
-    font-size: 10pt;
-    line-height: 14px;
-    color: #0088cc;
-    text-align: center;
+  font-family: 'Oxygen', sans-serif;
+  font-weight: bold;
+  cursor: pointer;
+  font-style: italic;
+  font-size: 10pt;
+  line-height: 14px;
+  color: #08c;
+  text-align: center;
 }
+
 .kb-editor-cell .kb-app-advanced-options-controller:hover {
-    color: #2a6496;
+  color: #2a6496;
 }
 
 .kb-editor-cell .kb-app-footer {
-    width: 100%;
-    overflow: none;
-    background-color: #F5F5F5;
-    padding: 10px;
+  width: 100%;
+  overflow: none;
+  background-color: #f5f5f5;
+  padding: 10px;
 }
 
 .kb-editor-cell .kb-app-subtitle {
-    background-color: #F5F5F5;
-    padding: 3px 5px;
+  background-color: #f5f5f5;
+  padding: 3px 5px;
 }
 
 .kb-editor-cell .kb-app-subtitle {
-    background-color: #F5F5F5;
-    padding: 3px 5px;
+  background-color: #f5f5f5;
+  padding: 3px 5px;
 }
 
-
-
 .kb-editor-cell .panel-title > [data-toggle="collapse"]::before {
-    display: inline-block;
-    margin-left: 0px;
-    margin-right: 4px;
-    font-family: "FontAwesome";
-    font-style: normal;
-    font-weight: normal;
-    font-size: 90%;
-    width: 12px;
-    color: silver;
-    line-height: 1;
-    vertical-align: baseline;
-    content: "\f078 ";
+  display: inline-block;
+  margin-left: 0;
+  margin-right: 4px;
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  width: 12px;
+  color: silver;
+  line-height: 1;
+  vertical-align: baseline;
+  content: "\f078 ";
 }
+
 .kb-editor-cell .panel-title > [data-toggle="collapse"].collapsed::before {
-    margin-left: 2px; margin-right: 2px;
-    content: "\f054 ";
+  margin-left: 2px;
+  margin-right: 2px;
+  content: "\f054 ";
 }
 
 /* tweaks to elemnts that should be dimmed when the cell is not selected */
 
 .unselected .kb-editor-cell {
-    opacity: 0.5;
+  opacity: 0.5;
 }
 
 .kb-editor-cell .advanced-parameter-showing {
-    display: block;
+  display: block;
 }
+
 .kb-editor-cell .advanced-parameter-hidden {
-    display: none;
+  display: none;
 }
 
 .kb-elapsed-time {
-    font-family: monospace;
+  font-family: monospace;
 }
+
 .kb-elapsed-time.-active {
-    color: lime;
+  color: lime;
 }
 
 .kb-editor-cell-info-desc {
-    border: 1px solid #777;
-    padding: 10px;
-    margin-right: 10px;
-    min-height: 100px;
+  border: 1px solid #777;
+  padding: 10px;
+  margin-right: 10px;
+  min-height: 100px;
 }
 
 .kb-editor-cell-info {
-    color: #777;
-    font-family: 'Oxygen', sans-serif;
-    font-size: 12pt;
+  color: #777;
+  font-family: 'Oxygen', sans-serif;
+  font-size: 12pt;
 }
 
 .kb-editor-cell-info .header {
-    border-bottom: 1px solid #777;
-    padding: 5px 0;
-    margin-bottom: 8px;
+  border-bottom: 1px solid #777;
+  padding: 5px 0;
+  margin-bottom: 8px;
 }
 
 .kb-editor-cell-info .value {
-    color: #000;
+  color: #000;
 }
 
-
 /*
 New button color scheme
 
@@ -245,7 +256,7 @@ official kbase green:
 
 rgb(75,184,86)
 
-or 
+or
 
  rgb(42,190,159) which is the lighter variant. both used in mocks (but depends where you sample).
 
@@ -259,83 +270,86 @@ warning: orange
 
 */
 
-
 .btn.kb-editor-cell-btn {
-    color: rgb(33, 150, 243);
-    background-color: #FFF;
-    border: 2px rgb(33, 150, 243) solid;
-    margin-bottom: 4px
+  color: rgb(33, 150, 243);
+  background-color: #fff;
+  border: 2px rgb(33, 150, 243) solid;
+  margin-bottom: 4px;
 }
 
-
 /* Primary Button Style */
 .btn.kb-editor-cell-btn.btn-primary {
-    color: rgb(33, 150, 243);
-    border: 2px rgb(33, 150, 243) solid;
+  color: rgb(33, 150, 243);
+  border: 2px rgb(33, 150, 243) solid;
 }
+
 .btn.kb-editor-cell-btn.btn-primary:hover {
-    color: #FFF;
-    background-color: rgb(33, 150, 243);
-    border-bottom: 6px rgb(33, 150, 243) solid;
-    margin-bottom: 0;
+  color: #fff;
+  background-color: rgb(33, 150, 243);
+  border-bottom: 6px rgb(33, 150, 243) solid;
+  margin-bottom: 0;
 }
+
 .btn.kb-editor-cell-btn.btn-primary:active {
-    color: #FFF;
-    background-color: rgb(33, 150, 243);
+  color: #fff;
+  background-color: rgb(33, 150, 243);
 }
+
 /* Hovering over an active cell is different, it tries to make the tab look
    disassociated but using a gray background so it doesnt look like an inactive
    tab */
 .btn.kb-editor-cell-btn.btn-primary.active {
-    color: white;
-    background-color: rgb(33, 150, 243);
-    border: 2px rgb(33, 150, 243) solid;
-    border-bottom: 6px rgb(33, 150, 243) solid;
-    margin-bottom: 0;
+  color: white;
+  background-color: rgb(33, 150, 243);
+  border: 2px rgb(33, 150, 243) solid;
+  border-bottom: 6px rgb(33, 150, 243) solid;
+  margin-bottom: 0;
 }
+
 .btn.kb-editor-cell-btn.btn-primary.active:hover {
-    color: rgb(33, 150, 243);
-    background-color: #DDD;
-    border-bottom: 2px rgb(33, 150, 243) solid;
-    margin-bottom: 4px;   
+  color: rgb(33, 150, 243);
+  background-color: #ddd;
+  border-bottom: 2px rgb(33, 150, 243) solid;
+  margin-bottom: 4px;
 }
 
-
-
 /* DANGER - for error */
 .btn.kb-editor-cell-btn.btn-danger {
-    color: rgb(209,82,65);
-    border: 2px rgb(209,82,65) solid;
+  color: rgb(209, 82, 65);
+  border: 2px rgb(209, 82, 65) solid;
 }
+
 .btn.kb-editor-cell-btn.btn-danger:hover {
-   color: #FFF;
-    background-color: rgb(209,82,65);
-    border-bottom: 6px rgb(209,82,65) solid;
-    margin-bottom: 0;
+  color: #fff;
+  background-color: rgb(209, 82, 65);
+  border-bottom: 6px rgb(209, 82, 65) solid;
+  margin-bottom: 0;
 }
+
 .btn.kb-editor-cell-btn.btn-danger.active:hover {
-    color:  rgb(209,82,65);
-    background-color: #DDD;
-    border-bottom: 2px  rgb(209,82,65) solid;
-    margin-bottom: 4px;
+  color: rgb(209, 82, 65);
+  background-color: #ddd;
+  border-bottom: 2px  rgb(209, 82, 65) solid;
+  margin-bottom: 4px;
 }
+
 .btn.kb-editor-cell-btn.btn-danger.active {
-    color: white;
-    background-color: rgb(209,82,65);
-    border: 2px rgb(209,82,65) solid;
-    border-bottom: 6px rgb(209,82,65) solid;
-    margin-bottom: 0;
+  color: white;
+  background-color: rgb(209, 82, 65);
+  border: 2px rgb(209, 82, 65) solid;
+  border-bottom: 6px rgb(209, 82, 65) solid;
+  margin-bottom: 0;
 }
+
 .btn.kb-editor-cell-btn.btn-danger.active:hover {
-    color: rgb(209,82,65);
-    background-color: #DDD;
-    border-bottom: 2px rgb(209,82,65) solid;
-    margin-bottom: 4px;   
+  color: rgb(209, 82, 65);
+  background-color: #ddd;
+  border-bottom: 2px rgb(209, 82, 65) solid;
+  margin-bottom: 4px;
 }
 
-
-
 /* DISABLED is gray border and text */
+
 /*
 .btn.kb-editor-cell-btn.btn-primary.disabled:hover {
     color: #888;
@@ -345,68 +359,69 @@ warning: orange
 }
 */
 
-.btn.kb-editor-cell-btn.disabled, .btn.kb-editor-cell-btn.disabled:hover, .btn.kb-editor-cell-btn.disabled:active {
-    color: #888;
-    xbackground-color: #FFF;
-    border: 2px #888 solid;
-    margin-bottom: 4px;    
+.btn.kb-editor-cell-btn.disabled,
+.btn.kb-editor-cell-btn.disabled:hover,
+.btn.kb-editor-cell-btn.disabled:active {
+  color: #888;
+  xbackground-color: #fff;
+  border: 2px #888 solid;
+  margin-bottom: 4px;
 }
 
-
-
-
 .kb-editor-cell [data-element="run-control-panel"] {
-    xpadding-left: 8px;
-    width: 100%;
+  xpadding-left: 8px;
+  width: 100%;
 }
 
 .kb-editor-cell [data-element="tab-pane"] {
-    border-top: 2px rgb(33, 150, 243) solid;
-    xborder: 1px solid rgb(32, 77, 16);
-    xbackground-color: #f5f5f5;
+  border-top: 2px rgb(33, 150, 243) solid;
+  xborder: 1px solid rgb(32, 77, 16);
+  xbackground-color: #f5f5f5;
 }
 
 .kb-editor-cell [data-element="tab-pane"] > div:empty {
-    padding: 0px;
+  padding: 0;
 }
 
 .kb-editor-cell [data-element="tab-pane"] > div {
-    padding: 4px;
+  padding: 4px;
 }
 
 .kb-editor-cell .btn.disabled {
-    xbackground-color: #FFF;
+  xbackground-color: #fff;
 }
 
 .kb-editor-cell .btn-primary.kb-btn-action.-rerun {
-    color: rgb(33, 150, 243)
+  color: rgb(33, 150, 243);
 }
 
-
 .kb-editor-cell .btn-primary.kb-btn-action.-run {
-    color: rgb(75,184,86)
+  color: rgb(75, 184, 86);
 }
 
-
 .kb-editor-cell .btn-danger.kb-btn-action.-cancel {
-    color: rgb(209,82,65)
+  color: rgb(209, 82, 65);
 }
 
 .kb-editor-cell .btn-danger.kb-btn-action.-reset {
-    color: rgb(209,82,65)
+  color: rgb(209, 82, 65);
 }
 
 .kb-app-status-ok {
-    color:  rgb(75,184,86);
+  color: rgb(75, 184, 86);
 }
+
 .kb-app-status-warning {
-    color:  orange;
+  color: orange;
 }
-.kb-app-status-danger, .kb-app-status-error {
-    color:  rgb(209,82,65);
+
+.kb-app-status-danger,
+.kb-app-status-error {
+  color: rgb(209, 82, 65);
 }
+
 .kb-app-status-default {
-    color:  rgb(33, 150, 243);
+  color: rgb(33, 150, 243);
 }
 
 /* app cell panels */
@@ -414,6 +429,6 @@ warning: orange
 /* TODO: higher level selector */
 
 .parameter-panel .info-panel {
-    padding-top: 4px;
-    background: transparent;
-}
\ No newline at end of file
+  padding-top: 4px;
+  background: transparent;
+}
diff --git a/nbextensions/editorCell/styles/old.css b/nbextensions/editorCell/styles/old.css
index 2a37327ff2..b2ff54f068 100644
--- a/nbextensions/editorCell/styles/old.css
+++ b/nbextensions/editorCell/styles/old.css
@@ -1,63 +1,65 @@
-/* Wrapper class 
+/* Wrapper class
   All classes below may be wrapped in this class to avoid polluting
   the Narrative styles.
 */
-.kb-app-cell {
-
-}
 
 /** new app parameter styling **/
-.kb-app-cell  .kb-app-parameter-panel {
-    border-left: 3px solid #fff;
+.kb-app-cell .kb-app-parameter-panel {
+  border-left: 3px solid #fff;
 }
-.kb-app-cell  .kb-app-parameter-panel-hover {
-    border-left: 3px solid #428bca;
+
+.kb-app-cell .kb-app-parameter-panel-hover {
+  border-left: 3px solid #428bca;
 }
+
 .kb-app-cell .kb-app-parameter-row {
-    margin:0px;
-    padding:5px;
-    border-radius:5px;
+  margin: 0;
+  padding: 5px;
+  border-radius: 5px;
 }
+
 /* for some reason, the css :hover doesn't work right on this div, so we use jquery to toggle this class */
 .kb-app-cell .kb-app-parameter-row-hover {
-    background:#F9F9F9;
+  background: #f9f9f9;
 }
 
-.kb-app-cell  .kb-app-parameter-row-error {
-    background: #f2dede;
+.kb-app-cell .kb-app-parameter-row-error {
+  background: #f2dede;
 }
+
 .kb-app-cell .kb-app-parameter-error-message {
-    padding:5px;
-    text-align:center;
-    font-family: 'OxygenBold', sans-serif;
-    font-weight: bold;
-    font-size: 9pt;
-    color:#F44336;
+  padding: 5px;
+  text-align: center;
+  font-family: 'OxygenBold', sans-serif;
+  font-weight: bold;
+  font-size: 9pt;
+  color: #f44336;
 }
 
-
 /* not sure how to get text in these divs to valign middle... */
 .kb-app-cell .kb-app-parameter-name {
-    font-family: 'OxygenBold', sans-serif;
-    color:#777;
-    text-align:right;
-    vertical-align:middle;
-    margin-top:3px;
-    padding-right: 4px;
-    padding-left:0px;
-    white-space: normal;
+  font-family: 'OxygenBold', sans-serif;
+  color: #777;
+  text-align: right;
+  vertical-align: middle;
+  margin-top: 3px;
+  padding-right: 4px;
+  padding-left: 0;
+  white-space: normal;
 }
+
 .kb-app-cell .kb-app-parameter-input {
-    vertical-align:middle;
-    white-space: nowrap;
-    xpadding-left:10px;
+  vertical-align: middle;
+  white-space: nowrap;
+  xpadding-left: 10px;
 }
+
 .kb-app-cell .kb-app-parameter-input input {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .kb-app-cell .kb-app-parameter-input select.form-control {
-    margin: 0;
+  margin: 0;
 }
 
 /*
@@ -72,110 +74,117 @@ in the column in which the icon lives, and does this by shrinking the select
 control with padding, and then scooting the icon back into its column.
 */
 .kb-app-cell .kb-app-parameter-input > div {
-    /* allow space for the required (red arrow), satisfied (green checkbox) icon */
-    padding-right: 20px;
+  /* allow space for the required (red arrow), satisfied (green checkbox) icon */
+  padding-right: 20px;
 }
+
 .kb-app-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph,
 .kb-app-cell .kb-app-parameter-input .kb-app-parameter-required-glyph {
-    /* This scoots the icon inside */
-    font-size: 15px;
-    margin-left: 0;
+  /* This scoots the icon inside */
+  font-size: 15px;
+  margin-left: 0;
 }
+
 .kb-app-cell .kb-app-parameter-required-glyph {
-    color: #F44336;
+  color: #f44336;
 }
+
 .kb-app-cell .kb-app-parameter-hint {
-    padding-left: 7px;
+  padding-left: 7px;
 }
 
 .kb-app-cell .kb-parameter-data-selection {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .kb-app-cell .kb-app-parameter-hint {
-    color: #777;
-    text-align:left;
-    margin-top:3px;
+  color: #777;
+  text-align: left;
+  margin-top: 3px;
 }
 
 .kb-app-cell .kb-app-parameter-accepted-glyph {
-    color: #4BB856;
+  color: #4bb856;
 }
 
 .kb-app-cell .kb-app-parameter-info {
-    color: #777;
+  color: #777;
 }
 
 .kb-app-cell .kb-parameter-data-row-remove {
-    color: #777;
+  color: #777;
 }
+
 .kb-app-cell .kb-parameter-data-row-add {
-    color: #777;
+  color: #777;
 }
 
-
 .kb-app-cell .kb-app-advanced-options-controller-inactive {
-    font-family: 'OxygenBold', sans-serif;
-    font-style: italic;
-    font-size: 10pt;
-    line-height: 14px;
-    color: #777;
-    text-align: center;
+  font-family: 'OxygenBold', sans-serif;
+  font-style: italic;
+  font-size: 10pt;
+  line-height: 14px;
+  color: #777;
+  text-align: center;
 }
+
 .kb-app-cell .kb-app-advanced-options-controller {
-    font-family: 'OxygenBold', sans-serif;
-    cursor:pointer;
-    font-style: italic;
-    font-size: 10pt;
-    line-height: 14px;
-    color: #0088cc;
-    text-align: center;
+  font-family: 'OxygenBold', sans-serif;
+  cursor: pointer;
+  font-style: italic;
+  font-size: 10pt;
+  line-height: 14px;
+  color: #08c;
+  text-align: center;
 }
+
 .kb-app-cell .kb-app-advanced-options-controller:hover {
-    color: #2a6496;
+  color: #2a6496;
 }
 
 .kb-app-cell .kb-app-footer {
-    width: 100%;
-    overflow: none;
-    background-color: #F5F5F5;
-    padding: 10px;
+  width: 100%;
+  overflow: none;
+  background-color: #f5f5f5;
+  padding: 10px;
 }
 
 .kb-app-cell .kb-app-subtitle {
-    background-color: #F5F5F5;
-    padding: 3px 5px;
+  background-color: #f5f5f5;
+  padding: 3px 5px;
 }
 
-
 .kb-app-cell .panel-title > [data-toggle="collapse"]::before {
-    display: inline-block;
-    margin-left: 0px;
-    margin-right: 4px;
-    font-family: "FontAwesome";
-    font-style: normal;
-    font-weight: normal;
-    font-size: 90%;
-    width: 12px;
-    color: silver;
-    line-height: 1;
-    vertical-align: baseline;
-    content: "\f078 ";
+  display: inline-block;
+  margin-left: 0;
+  margin-right: 4px;
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  width: 12px;
+  color: silver;
+  line-height: 1;
+  vertical-align: baseline;
+  content: "\f078 ";
 }
+
 .kb-app-cell .panel-title > [data-toggle="collapse"].collapsed::before {
-    margin-left: 2px; margin-right: 2px;
-    content: "\f054 ";
+  margin-left: 2px;
+  margin-right: 2px;
+  content: "\f054 ";
 }
 
 /* tweaks to elemnts that should be dimmed when the cell is not selected */
 
 .unselected .kb-app-cell {
-    opacity: 0.5;
+  opacity: 0.5;
 }
 
 .kb-app-cell .advanced-parameter-showing {
-    display: block;
+  display: block;
 }
+
 .kb-app-cell .advanced-parameter-hidden {
-    display: none;
-}
\ No newline at end of file
+  display: none;
+}
diff --git a/nbextensions/viewCell/styles/main.css b/nbextensions/viewCell/styles/main.css
index 9643d68b1e..69d199f329 100644
--- a/nbextensions/viewCell/styles/main.css
+++ b/nbextensions/viewCell/styles/main.css
@@ -3,8 +3,8 @@ To change this license header, choose License Headers in Project Properties.
 To change this template file, choose Tools | Templates
 and open the template in the editor.
 */
-/* 
+
+/*
     Created on : Jul 14, 2016, 2:31:08 PM
     Author     : erik
 */
-

From f7a3fdcbd336b7bb23eaf959cb4572ca000cdb3b Mon Sep 17 00:00:00 2001
From: bio-boris <bio-boris@users.noreply.github.com>
Date: Fri, 16 Oct 2020 23:57:20 -0500
Subject: [PATCH 55/61] Update kbaseNarrative.css

---
 kbase-extension/static/kbase/css/kbaseNarrative.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index 0d84c7eb24..117e33b106 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -6,7 +6,7 @@
 }
 
 #kb-data-staging-table_wrapper{
-    margin-top: 15px;
+    margin-top: 44px;
 }
 
 .kb-data-staging-decompress {

From e4125e12550e8c5fb9e6886a40c71f062b8d2af6 Mon Sep 17 00:00:00 2001
From: Emily Mahanna <56279459+eamahanna@users.noreply.github.com>
Date: Tue, 20 Oct 2020 17:02:07 -0800
Subject: [PATCH 56/61] Dataup 213 clear errors from staging (#1870)

* First go at the button

* update

* final edits

* add tests

* Fix codacy errors

* fix sonar cloud error

* edge cases

* typos

* add delete button function

* final tweak

* fix sonar
---
 .../static/kbase/css/kbaseNarrative.css       | 45 ++++++++++++++++
 .../narrative_core/upload/fileUploadWidget.js | 38 ++++++++++++++
 .../templates/data_staging/dropped_file.html  |  4 +-
 .../templates/data_staging/dropzone_area.html |  2 +-
 .../upload/fileUploadWidget-spec.js           | 52 +++++++++++++++++++
 5 files changed, 138 insertions(+), 3 deletions(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index b9143e2f13..253339b2a7 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -17,6 +17,51 @@
   margin: 2em 4.5em;
 }
 
+.text-button {
+    background: #FFFFFF;
+    box-sizing: border-box;
+    border-radius: 4px;
+    border: 1px solid #FFFFFF;
+    font-family: Oxygen, Arial, sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 18px;
+    outline: none;
+
+    text-transform: uppercase;
+    text-align: center;
+    color: #4379B1;
+    height: 34px;
+}
+
+.text-button:hover {
+    color: #36618E;
+    border: 1px solid #ECF2F7;
+    background-color: #ECF2F7;
+}
+
+.text-button:focus {
+    color: #36618E;
+    border: 1px solid #E3EBF3;
+    background-color: #E3EBF3;
+}
+
+.text-button:active {
+    color: #36618E;
+    border: 1px solid #D9E4EF;
+    background-color: #D9E4EF;
+}
+
+.text-button:disabled {
+    color: #929292;
+    border: 1px solid #FAFAFA;
+    background-color: #FAFAFA;
+}
+
+.clear-all-dropzone {
+    margin: 6px;
+}
 
 #kb-data-staging-table_wrapper {
     margin-top: 44px;
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
index faf693048f..6e7d591961 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
@@ -84,6 +84,7 @@ define([
                 .on('addedfile', (file) => {
                     $dropzoneElem.find('#global-info').css({'display': 'inline'});
                     $dropzoneElem.find('#upload-message').text(this.makeUploadMessage());
+
                 })
                 .on('success', (file, serverResponse) => {
                     $dropzoneElem.find('#upload-message').text(this.makeUploadMessage());
@@ -118,6 +119,8 @@ define([
                     $dropzoneElem.find('#upload-message').text(this.makeUploadMessage());
                 })
                 .on('reset', function() {
+                    $('#clear-all-btn-container').remove();
+                    $('#clear-all-btn').remove();
                     $dropzoneElem.find('#global-info').css({'display': 'none'});
                     $($dropzoneElem.find('#total-progress .progress-bar')).css({'width': '0%'});
                 })
@@ -127,9 +130,44 @@ define([
                         errorText = err.xhr.responseText;
                     }
                     $dropzoneElem.find('.error.text-danger').text('Error: ' + errorText);
+
+                    // Check to see if there already a button in the dropzone area
+                    if (!$dropzoneElem.find('#clear-all-btn').length){
+                        $dropzoneElem.append(this.makeClearAllButton());
+
+                    } else {
+                        // If there is a button already in the area, it has to be removed,
+                        // and appened to the new document when additional errored files are added.
+                        this.deleteClearAllButton();
+                        $dropzoneElem.append(this.makeClearAllButton());
+                    }
                 });
         },
 
+        makeClearAllButton: function() {
+            var $clearAllBtn = $('<button>')
+                .text('Clear All')
+                .addClass('text-button clear-all-dropzone')
+                .attr('aria-label', 'clear all errored files from the dropzone')
+                .attr('id', 'clear-all-btn')
+                .click(function(){
+                    this.dropzone.removeAllFiles();
+                    this.deleteClearAllButton();
+                }.bind(this));
+
+            var $buttonContainer = $('<div>')
+                .attr('id', 'clear-all-btn-container')
+                .addClass('text-center')
+                .append($clearAllBtn);
+
+            return $buttonContainer;
+        },
+
+        deleteClearAllButton: function() {
+            $('#clear-all-btn-container').remove();
+            $('#clear-all-btn').remove();
+        },
+
         makeUploadMessage: function() {
             if (!this.dropzone) {
                 return 'No files uploading.';
diff --git a/kbase-extension/static/kbase/templates/data_staging/dropped_file.html b/kbase-extension/static/kbase/templates/data_staging/dropped_file.html
index e5d14958a0..57bb6fb302 100644
--- a/kbase-extension/static/kbase/templates/data_staging/dropped_file.html
+++ b/kbase-extension/static/kbase/templates/data_staging/dropped_file.html
@@ -3,7 +3,7 @@
         <span class="name" data-dz-name></span>
         <strong class="error text-danger" data-dz-errormessage></strong>
     </div>
-    <div class="col-md-1" style="">
+    <div class="col-md-1">
         <span class="size pull-right" data-dz-size></span>
     </div>
     <div class="col-md-3 text-center">
@@ -19,4 +19,4 @@
             </button>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/kbase-extension/static/kbase/templates/data_staging/dropzone_area.html b/kbase-extension/static/kbase/templates/data_staging/dropzone_area.html
index 7136539f72..057bca6298 100644
--- a/kbase-extension/static/kbase/templates/data_staging/dropzone_area.html
+++ b/kbase-extension/static/kbase/templates/data_staging/dropzone_area.html
@@ -11,4 +11,4 @@
         </div>
     </div>
     <div class="dz-message">Drag and drop files and folders in this box, or <a>select</a> from your computer.</div>
-</form>
+</form>
\ No newline at end of file
diff --git a/test/unit/spec/narrative_core/upload/fileUploadWidget-spec.js b/test/unit/spec/narrative_core/upload/fileUploadWidget-spec.js
index 0450fc2a80..f29473edf4 100644
--- a/test/unit/spec/narrative_core/upload/fileUploadWidget-spec.js
+++ b/test/unit/spec/narrative_core/upload/fileUploadWidget-spec.js
@@ -118,5 +118,57 @@ define([
             fuWidget.dropzone.addFile(mockFile);
         });
 
+        it('Should error when too large of a file is uploaded', (done) => {
+            // Set the file max size to 0
+            fuWidget.dropzone.options.maxFilesize = 1;
+
+            // Create file
+            const filename='foo.txt';
+            mockUploadEndpoint(filename, fakeUser, false);
+            var mockFile = createMockFile(filename);
+            Object.defineProperty(mockFile, 'size', {value: Math.pow(1024, 4), writable: false});
+
+            // Create mock calls
+            const adderMock = jasmine.createSpy('adderMock');
+            const errorMock = jasmine.createSpy('errorMock');
+            fuWidget.dropzone.on('addedfile', () => {
+                adderMock();
+            });
+            fuWidget.dropzone.on('error', () => {
+                errorMock();
+            });
+            fuWidget.dropzone.addFile(mockFile);
+            setTimeout(() => {
+                expect(adderMock).toHaveBeenCalled();
+                expect(errorMock).toHaveBeenCalled();
+                done();
+            });
+        });
+
+        it('Should create a clear all button when a file upload error occurs', (done) => {
+            // Set the file max size to 0
+            fuWidget.dropzone.options.maxFilesize = 1;
+
+            // Create file
+            const filename='foo.txt';
+            mockUploadEndpoint(filename, fakeUser, false);
+            var mockFile = createMockFile(filename);
+            Object.defineProperty(mockFile, 'size', {value: Math.pow(1024, 4), writable: false});
+
+            // Create mock calls
+            const adderMock = jasmine.createSpy('adderMock');
+            fuWidget.dropzone.on('addedfile', () => {
+                adderMock();
+            });
+
+            fuWidget.dropzone.addFile(mockFile);
+            setTimeout(() => {
+                expect(adderMock).toHaveBeenCalled();
+                var clearAllButton = document.getElementById('clear-all-btn');
+                expect(clearAllButton).toBeDefined();
+                done();
+            });
+        });
+
     });
 });

From caae2e1f2590462f262fc21b3c9f841c5d7c1cb4 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Wed, 21 Oct 2020 10:26:51 -0800
Subject: [PATCH 57/61] add hover pointer

---
 kbase-extension/static/kbase/css/kbaseNarrative.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index 253339b2a7..939e3674dd 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -39,6 +39,7 @@
     color: #36618E;
     border: 1px solid #ECF2F7;
     background-color: #ECF2F7;
+    cursor: pointer;
 }
 
 .text-button:focus {

From f15c77b869ba62baf6f7619ecbc41567ea33b1ce Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Wed, 21 Oct 2020 15:55:51 -0800
Subject: [PATCH 58/61] Add functionality

---
 .../narrative_core/upload/fileUploadWidget.js | 38 +++++++++++--------
 .../templates/data_staging/dropped_file.html  | 31 +++++++++------
 2 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
index 6e7d591961..c567a01b55 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
@@ -85,6 +85,13 @@ define([
                     $dropzoneElem.find('#global-info').css({'display': 'inline'});
                     $dropzoneElem.find('#upload-message').text(this.makeUploadMessage());
 
+                    // If there is a button already in the area, it has to be removed,
+                    // and appened to the new document when additional errored files are added.
+                    if ($dropzoneElem.find('#clear-all-btn').length){
+                        this.deleteClearAllButton();
+                        $dropzoneElem.append(this.makeClearAllButton());
+                    }
+
                 })
                 .on('success', (file, serverResponse) => {
                     $dropzoneElem.find('#upload-message').text(this.makeUploadMessage());
@@ -93,12 +100,8 @@ define([
                     file.previewElement.querySelector('#status-message').style.display = 'inline';
                     $(file.previewElement.querySelector('.fa-ban')).removeClass('fa-ban').addClass('fa-check');
                     $(file.previewElement.querySelector('.btn-danger')).removeClass('btn-danger').addClass('btn-success');
-                    if (this.dropzone.getQueuedFiles().length === 0 &&
-                        this.dropzone.getUploadingFiles().length === 0) {
-                        $($dropzoneElem.find('#total-progress')).fadeOut(1000, function() {
-                            $($dropzoneElem.find('#total-progress .progress-bar')).css({'width': '0%'});
-                        });
-                    }
+
+                    this.removeProgressBar($dropzoneElem);
                     $(file.previewElement).fadeOut(1000, function() {
                         $(file.previewElement.querySelector('.btn')).trigger('click');
                     });
@@ -124,22 +127,18 @@ define([
                     $dropzoneElem.find('#global-info').css({'display': 'none'});
                     $($dropzoneElem.find('#total-progress .progress-bar')).css({'width': '0%'});
                 })
-                .on('error', (err) => {
+                .on('error', (erroredFile) => {
+                    this.removeProgressBar($dropzoneElem);
                     let errorText = 'unable to upload file!';
-                    if (err && err.xhr && err.xhr.responseText) {
-                        errorText = err.xhr.responseText;
+                    if (erroredFile && erroredFile.xhr && erroredFile.xhr.responseText) {
+                        errorText = erroredFile.xhr.responseText;
                     }
                     $dropzoneElem.find('.error.text-danger').text('Error: ' + errorText);
+                    $dropzoneElem.find('#upload_progress_and_cancel').remove();
 
                     // Check to see if there already a button in the dropzone area
                     if (!$dropzoneElem.find('#clear-all-btn').length){
                         $dropzoneElem.append(this.makeClearAllButton());
-
-                    } else {
-                        // If there is a button already in the area, it has to be removed,
-                        // and appened to the new document when additional errored files are added.
-                        this.deleteClearAllButton();
-                        $dropzoneElem.append(this.makeClearAllButton());
                     }
                 });
         },
@@ -168,6 +167,15 @@ define([
             $('#clear-all-btn').remove();
         },
 
+        removeProgressBar: function($dropzoneElem) {
+            if (this.dropzone.getQueuedFiles().length === 0 &&
+            this.dropzone.getUploadingFiles().length === 0) {
+                $($dropzoneElem.find('#total-progress')).fadeOut(1000, function() {
+                    $($dropzoneElem.find('#total-progress .progress-bar')).css({'width': '0%'});
+                });
+            }
+        },
+
         makeUploadMessage: function() {
             if (!this.dropzone) {
                 return 'No files uploading.';
diff --git a/kbase-extension/static/kbase/templates/data_staging/dropped_file.html b/kbase-extension/static/kbase/templates/data_staging/dropped_file.html
index 57bb6fb302..da1add58f3 100644
--- a/kbase-extension/static/kbase/templates/data_staging/dropped_file.html
+++ b/kbase-extension/static/kbase/templates/data_staging/dropped_file.html
@@ -1,22 +1,29 @@
 <div class="row file-row" style="width:100%; border: 1px solid #EEE; margin: 2px 0; padding: 5px 0">
     <div class="col-md-7" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-        <span class="name" data-dz-name></span>
-        <strong class="error text-danger" data-dz-errormessage></strong>
+        <div class="name" data-dz-name></div>
+        <strong class="error text-danger" style="white-space: normal;" data-dz-errormessage></strong>
     </div>
     <div class="col-md-1">
         <span class="size pull-right" data-dz-size></span>
     </div>
-    <div class="col-md-3 text-center">
-        <div id="status-message" style="display:none"></div>
-        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="margin-bottom: inherit; margin-left: 5px">
-            <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
+
+    <div id="upload_progress_and_cancel">
+        <div class="col-md-3 text-center">
+            <div id="status-message" style="display:none"></div>
+            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="margin-bottom: inherit; margin-left: 5px">
+                <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
+            </div>
         </div>
-    </div>
-    <div class="col-md-1">
-        <div class="pull-right">
-            <button data-dz-remove class="btn btn-xs btn-danger cancel">
-                <i class="fa fa-lg fa-fw fa-ban"></i>
-            </button>
+        <div class="col-md-1">
+            <div class="pull-right">
+                <button data-dz-remove class="btn btn-xs btn-danger cancel">
+                    <i class="fa fa-lg fa-fw fa-ban"></i>
+                </button>
+            </div>
         </div>
     </div>
+    <div id="error_icon" class="pull-right" style="margin: 5px;">
+        <span style="font-size: 16px;">Error</span>
+        <i class="fa fa-1.5x fa-exclamation-triangle"></i>
+    </div>
 </div>
\ No newline at end of file

From 7d77fc18cc69ffcbb6452740c90f29210c3e1086 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Thu, 22 Oct 2020 15:35:06 -0800
Subject: [PATCH 59/61] styling changes

---
 .../static/kbase/css/kbaseNarrative.css       | 54 +++++++++++++++++--
 .../narrative_core/upload/fileUploadWidget.js | 19 ++++---
 .../templates/data_staging/dropped_file.html  | 22 ++++----
 src/config.json                               |  4 +-
 4 files changed, 75 insertions(+), 24 deletions(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index 939e3674dd..477a91f36e 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -17,7 +17,7 @@
   margin: 2em 4.5em;
 }
 
-.text-button {
+.btn__text {
     background: #FFFFFF;
     box-sizing: border-box;
     border-radius: 4px;
@@ -35,26 +35,26 @@
     height: 34px;
 }
 
-.text-button:hover {
+.btn__text:hover {
     color: #36618E;
     border: 1px solid #ECF2F7;
     background-color: #ECF2F7;
     cursor: pointer;
 }
 
-.text-button:focus {
+.btn__text:focus {
     color: #36618E;
     border: 1px solid #E3EBF3;
     background-color: #E3EBF3;
 }
 
-.text-button:active {
+.btn__text:active {
     color: #36618E;
     border: 1px solid #D9E4EF;
     background-color: #D9E4EF;
 }
 
-.text-button:disabled {
+.btn__text:disabled {
     color: #929292;
     border: 1px solid #FAFAFA;
     background-color: #FAFAFA;
@@ -64,6 +64,50 @@
     margin: 6px;
 }
 
+.dz-file {
+  width:100%;
+  border: 1px solid #EEEEEE;
+  margin: 2px 0px;
+  padding: 5px 0px;
+  font-family: Oxygen, Arial, sans-serif;
+  font-style: normal;
+  font-size: 16px;
+}
+
+
+.dz-file__name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 20px;
+}
+
+.dz-file__msg {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+}
+
+.dz-file__msg__success {
+  display:none;
+  color: #4BAF4F;
+}
+
+.dz-file__progress__bar {
+  margin-bottom: inherit;
+  margin-left: 5px;
+}
+
+.dz-file__icon {
+  margin: 5px;
+  display: none;
+  font-weight: bold;
+}
+
+.dz-file__icon__success {
+  color: #4BAF4F;
+}
+
 #kb-data-staging-table_wrapper {
     margin-top: 44px;
 }
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
index c567a01b55..ce2b8af027 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
@@ -95,11 +95,10 @@ define([
                 })
                 .on('success', (file, serverResponse) => {
                     $dropzoneElem.find('#upload-message').text(this.makeUploadMessage());
-                    file.previewElement.querySelector('#status-message').textContent = 'Completed';
-                    file.previewElement.querySelector('.progress').style.display = 'none';
-                    file.previewElement.querySelector('#status-message').style.display = 'inline';
-                    $(file.previewElement.querySelector('.fa-ban')).removeClass('fa-ban').addClass('fa-check');
-                    $(file.previewElement.querySelector('.btn-danger')).removeClass('btn-danger').addClass('btn-success');
+                    var $successElem = $(file.previewElement);
+                    $successElem.find('#upload_progress_and_cancel').remove();
+                    $successElem.find('#success_icon').css('display', 'inline');
+                    $successElem.find('#success_message').css('display', 'inline');
 
                     this.removeProgressBar($dropzoneElem);
                     $(file.previewElement).fadeOut(1000, function() {
@@ -128,13 +127,17 @@ define([
                     $($dropzoneElem.find('#total-progress .progress-bar')).css({'width': '0%'});
                 })
                 .on('error', (erroredFile) => {
+                    var $errorElem = $(erroredFile.previewElement);
+                    $errorElem.css('color', '#DF0002');
+                    $errorElem.find('#upload_progress_and_cancel').remove();
+                    $errorElem.find('#error_icon').css('display', 'inline');
+
                     this.removeProgressBar($dropzoneElem);
                     let errorText = 'unable to upload file!';
                     if (erroredFile && erroredFile.xhr && erroredFile.xhr.responseText) {
                         errorText = erroredFile.xhr.responseText;
                     }
-                    $dropzoneElem.find('.error.text-danger').text('Error: ' + errorText);
-                    $dropzoneElem.find('#upload_progress_and_cancel').remove();
+                    $dropzoneElem.find('#error_message').text('Error: ' + errorText);
 
                     // Check to see if there already a button in the dropzone area
                     if (!$dropzoneElem.find('#clear-all-btn').length){
@@ -146,7 +149,7 @@ define([
         makeClearAllButton: function() {
             var $clearAllBtn = $('<button>')
                 .text('Clear All')
-                .addClass('text-button clear-all-dropzone')
+                .addClass('btn__text clear-all-dropzone')
                 .attr('aria-label', 'clear all errored files from the dropzone')
                 .attr('id', 'clear-all-btn')
                 .click(function(){
diff --git a/kbase-extension/static/kbase/templates/data_staging/dropped_file.html b/kbase-extension/static/kbase/templates/data_staging/dropped_file.html
index da1add58f3..12d4178f6d 100644
--- a/kbase-extension/static/kbase/templates/data_staging/dropped_file.html
+++ b/kbase-extension/static/kbase/templates/data_staging/dropped_file.html
@@ -1,7 +1,8 @@
-<div class="row file-row" style="width:100%; border: 1px solid #EEE; margin: 2px 0; padding: 5px 0">
-    <div class="col-md-7" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-        <div class="name" data-dz-name></div>
-        <strong class="error text-danger" style="white-space: normal;" data-dz-errormessage></strong>
+<div class="row file-row dz-file">
+    <div class="col-md-7">
+        <div class="dz-file__name" data-dz-name></div>
+        <div id="error_message" class="dz-file__msg" data-dz-errormessage></div>
+        <div id="success_message" class="dz-file__msg dz-file__msg__success">Successfully moved to stagin area!</div>
     </div>
     <div class="col-md-1">
         <span class="size pull-right" data-dz-size></span>
@@ -9,8 +10,7 @@
 
     <div id="upload_progress_and_cancel">
         <div class="col-md-3 text-center">
-            <div id="status-message" style="display:none"></div>
-            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="margin-bottom: inherit; margin-left: 5px">
+            <div class="progress progress-striped active dz-file__progress__bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
             </div>
         </div>
@@ -22,8 +22,12 @@
             </div>
         </div>
     </div>
-    <div id="error_icon" class="pull-right" style="margin: 5px;">
-        <span style="font-size: 16px;">Error</span>
-        <i class="fa fa-1.5x fa-exclamation-triangle"></i>
+    <div id="error_icon" class="pull-right dz-file__icon">
+        <span>Error</span>
+        <i class="fa fa-2x fa-exclamation-triangle"></i>
+    </div>
+    <div id="success_icon" class="pull-right dz-file__icon dz-file__icon__success">
+        <span>Completed</span>
+        <i class="fa fa-2x fa-check-circle"></i>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/config.json b/src/config.json
index f9268f2ab8..57119633c1 100644
--- a/src/config.json
+++ b/src/config.json
@@ -103,7 +103,7 @@
         "google_ad_conversion": "kR9OCLas4JgBEOy2pucC"
     },
     "comm_wait_timeout": 600000,
-    "config": "narrative-refactor",
+    "config": "dev",
     "data_panel": {
         "initial_sort_limit": 10000,
         "max_name_length": 33,
@@ -379,7 +379,7 @@
     "upload": {
         "timeout": 0,
         "parallel_uploads": 10,
-        "max_file_size": 20480,
+        "max_file_size": 1,
         "globus_upload_url": "https://app.globus.org/file-manager?destination_id=c3c0a65f-5827-4834-b6c9-388b0b19953a"
     },
     "use_local_widgets": true,

From 741fa5380adc83ced06e15f2e1570960deaa5a2c Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Thu, 22 Oct 2020 18:24:40 -0800
Subject: [PATCH 60/61] fix alignment

---
 .../static/kbase/css/kbaseNarrative.css       |  7 ++-
 .../narrative_core/upload/fileUploadWidget.js | 10 ++--
 .../templates/data_staging/dropped_file.html  | 57 +++++++++++--------
 src/config.json                               |  2 +-
 4 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index 477a91f36e..cf419fdd8c 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -74,6 +74,10 @@
   font-size: 16px;
 }
 
+.dz-file__row {
+  display: flex;
+  align-items: center;
+}
 
 .dz-file__name {
   white-space: nowrap;
@@ -99,9 +103,10 @@
 }
 
 .dz-file__icon {
-  margin: 5px;
+  margin: 0 2px 0 2px;
   display: none;
   font-weight: bold;
+  align-items: center;
 }
 
 .dz-file__icon__success {
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
index ce2b8af027..54a08c5fb5 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
@@ -94,11 +94,12 @@ define([
 
                 })
                 .on('success', (file, serverResponse) => {
-                    $dropzoneElem.find('#upload-message').text(this.makeUploadMessage());
                     var $successElem = $(file.previewElement);
                     $successElem.find('#upload_progress_and_cancel').remove();
-                    $successElem.find('#success_icon').css('display', 'inline');
+                    $successElem.find('#dz_file_row_1'.css({"display": "flex", "align-items": "center"}));
+                    $successElem.find('#success_icon').css('display', 'flex');
                     $successElem.find('#success_message').css('display', 'inline');
+                    $dropzoneElem.find('#upload-message').text(this.makeUploadMessage());
 
                     this.removeProgressBar($dropzoneElem);
                     $(file.previewElement).fadeOut(1000, function() {
@@ -128,9 +129,10 @@ define([
                 })
                 .on('error', (erroredFile) => {
                     var $errorElem = $(erroredFile.previewElement);
-                    $errorElem.css('color', '#DF0002');
                     $errorElem.find('#upload_progress_and_cancel').remove();
-                    $errorElem.find('#error_icon').css('display', 'inline');
+                    $errorElem.find('#dz_file_row_1'.css({"display": "flex", "align-items": "center"}));
+                    $errorElem.css('color', '#DF0002');
+                    $errorElem.find('#error_icon').css('display', 'flex');
 
                     this.removeProgressBar($dropzoneElem);
                     let errorText = 'unable to upload file!';
diff --git a/kbase-extension/static/kbase/templates/data_staging/dropped_file.html b/kbase-extension/static/kbase/templates/data_staging/dropped_file.html
index 12d4178f6d..01fcaa3b01 100644
--- a/kbase-extension/static/kbase/templates/data_staging/dropped_file.html
+++ b/kbase-extension/static/kbase/templates/data_staging/dropped_file.html
@@ -1,33 +1,40 @@
 <div class="row file-row dz-file">
-    <div class="col-md-7">
-        <div class="dz-file__name" data-dz-name></div>
-        <div id="error_message" class="dz-file__msg" data-dz-errormessage></div>
-        <div id="success_message" class="dz-file__msg dz-file__msg__success">Successfully moved to stagin area!</div>
-    </div>
-    <div class="col-md-1">
-        <span class="size pull-right" data-dz-size></span>
-    </div>
-
-    <div id="upload_progress_and_cancel">
-        <div class="col-md-3 text-center">
-            <div class="progress progress-striped active dz-file__progress__bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
-                <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
+    <div id="dz_file_row_1" class="row">
+        <div class="col-md-7">
+            <div class="dz-file__name" data-dz-name></div>
+        </div>
+        <div class="col-md-1 ">
+            <span class="size pull-right" data-dz-size></span>
+        </div>
+        <div id="upload_progress_and_cancel" style="display: inline;">
+            <div class="col-md-3 text-center">
+                <div class="progress progress-striped active dz-file__progress__bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
+                    <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
+                </div>
+            </div>
+            <div class="col-md-1">
+                <div class="pull-right">
+                    <button data-dz-remove class="btn btn-xs btn-danger cancel">
+                        <i class="fa fa-lg fa-fw fa-ban"></i>
+                    </button>
+                </div>
             </div>
         </div>
-        <div class="col-md-1">
-            <div class="pull-right">
-                <button data-dz-remove class="btn btn-xs btn-danger cancel">
-                    <i class="fa fa-lg fa-fw fa-ban"></i>
-                </button>
+        <div class="col-md-4">
+            <div id="error_icon" class="pull-right dz-file__icon">
+                <span>Error</span>
+                <i class="fa fa-2x fa-exclamation-triangle"></i>
+            </div>
+            <div id="success_icon" class="pull-right dz-file__icon dz-file__icon__success">
+                <span>Completed</span>
+                <i class="fa fa-2x fa-check-circle"></i>
             </div>
         </div>
     </div>
-    <div id="error_icon" class="pull-right dz-file__icon">
-        <span>Error</span>
-        <i class="fa fa-2x fa-exclamation-triangle"></i>
-    </div>
-    <div id="success_icon" class="pull-right dz-file__icon dz-file__icon__success">
-        <span>Completed</span>
-        <i class="fa fa-2x fa-check-circle"></i>
+    <div class="row">
+        <div class="col-md-7">
+            <div id="error_message" class="dz-file__msg" data-dz-errormessage></div>
+            <div id="success_message" class="dz-file__msg dz-file__msg__success">Successfully moved to stagin area!</div>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/config.json b/src/config.json
index 57119633c1..4edff1a286 100644
--- a/src/config.json
+++ b/src/config.json
@@ -379,7 +379,7 @@
     "upload": {
         "timeout": 0,
         "parallel_uploads": 10,
-        "max_file_size": 1,
+        "max_file_size": 20480,
         "globus_upload_url": "https://app.globus.org/file-manager?destination_id=c3c0a65f-5827-4834-b6c9-388b0b19953a"
     },
     "use_local_widgets": true,

From e1baef8b22698dc9833888a5e5858d3302de5320 Mon Sep 17 00:00:00 2001
From: eamahanna <emahanna@truss.works>
Date: Thu, 22 Oct 2020 20:04:38 -0800
Subject: [PATCH 61/61] fix typo

---
 .../js/widgets/narrative_core/upload/fileUploadWidget.js      | 4 ++--
 src/config.json                                               | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
index 54a08c5fb5..cad747780e 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
@@ -96,7 +96,7 @@ define([
                 .on('success', (file, serverResponse) => {
                     var $successElem = $(file.previewElement);
                     $successElem.find('#upload_progress_and_cancel').remove();
-                    $successElem.find('#dz_file_row_1'.css({"display": "flex", "align-items": "center"}));
+                    $successElem.find('#dz_file_row_1').css({"display": "flex", "align-items": "center"});
                     $successElem.find('#success_icon').css('display', 'flex');
                     $successElem.find('#success_message').css('display', 'inline');
                     $dropzoneElem.find('#upload-message').text(this.makeUploadMessage());
@@ -130,7 +130,7 @@ define([
                 .on('error', (erroredFile) => {
                     var $errorElem = $(erroredFile.previewElement);
                     $errorElem.find('#upload_progress_and_cancel').remove();
-                    $errorElem.find('#dz_file_row_1'.css({"display": "flex", "align-items": "center"}));
+                    $errorElem.find('#dz_file_row_1').css({"display": "flex", "align-items": "center"});
                     $errorElem.css('color', '#DF0002');
                     $errorElem.find('#error_icon').css('display', 'flex');
 
diff --git a/src/config.json b/src/config.json
index 4edff1a286..57119633c1 100644
--- a/src/config.json
+++ b/src/config.json
@@ -379,7 +379,7 @@
     "upload": {
         "timeout": 0,
         "parallel_uploads": 10,
-        "max_file_size": 20480,
+        "max_file_size": 1,
         "globus_upload_url": "https://app.globus.org/file-manager?destination_id=c3c0a65f-5827-4834-b6c9-388b0b19953a"
     },
     "use_local_widgets": true,