fix SCT-2914 / PUBLIC-1493 - movement of unselected cells

.husky/pre-push

@@ -2,4 +2,4 @@
 . "$(dirname "$0")/_/husky.sh"
 
 #npm run husky_msg && npm run prettier_check
-npx lint-staged
+npx lint-staged

Makefile

@@ -16,11 +16,13 @@ build-narrative-container:
 
 docker_image: build-narrative-container
 
-# Per PR #1328, adding an option to skip minification
+dev-network:
+	docker network create kbase-dev || true
+
 dev-image:
 	SKIP_MINIFY=1 DOCKER_TAG=dev sh $(DOCKER_INSTALLER)
 
-run-dev-image:
+run-dev-image: dev-network
 	ENV=$(ENV) sh scripts/local-dev-run.sh
 
 install:

kbase-extension/static/kbase/custom/custom.css

@@ -5,9 +5,16 @@ CSS should go in /kbase-extension/static/kbase/css/kbaseNarrative.css
 (or the specific css file if available)
 */
 @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');
+  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] {
@@ -315,12 +322,24 @@ div#notebook {
   color: #ccc;
 }
 
+.cell.unselected .btn-default:hover {
+  color: #000;
+}
+
 .cell.unselected .kb-cell-toolbar .title-container {
   opacity: 0.5;
 }
 
-.cell.unselected .kb-cell-toolbar .buttons-container {
-  opacity: 0.2;
+.btn.btn-default.kb-btn-expander.-minimized {
+  color: rgba(255, 137, 0, 1);
+}
+
+.cell.unselected .kb-btn-expander.-minimized {
+  color: rgba(255, 137, 0, 0.5);
+}
+
+.cell.unselected .kb-btn-expander.-minimized:hover {
+  color: rgba(255, 137, 0, 1);
 }
 
 .kb-btn-icon {

kbase-extension/static/kbase/js/userMenu.js

@@ -57,7 +57,7 @@ define([
         }
 
         function render() {
-            const menu = div({ class: 'dropdown', style: 'display:inline-block' }, [
+            const menu = div({ class: 'dropdown', style: 'display:inline-block', dataTestid: 'userMenu' }, [
                 button(
                     {
                         type: 'button',
@@ -90,12 +90,11 @@ define([
                                 div(
                                     {
                                         style: 'display: inline-block',
-                                        'data-element': 'user-label',
                                     },
                                     [
-                                        span({ 'data-element': 'realname' }, displayName),
+                                        span({ dataTestid: 'realname' }, displayName),
                                         br(),
-                                        i({ 'data-element': 'username' }, userName),
+                                        i({ dataTestid: 'username' }, userName),
                                     ]
                                 ),
                             ]
@@ -110,10 +109,9 @@ define([
                                     style: 'font-size: 150%; margin-right: 10px;',
                                 }),
                             ]),
-                            'Sign Out',
                         ]),
                     ]),
-                ]),
+                ])
             ]);
             target.append(menu);
             target.find('#signout-button').click(logout);

kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js

@@ -15,7 +15,6 @@ define([
         div = t('div'),
         a = t('a'),
         button = t('button'),
-        p = t('p'),
         span = t('span'),
         ul = t('ul'),
         li = t('li');
@@ -33,17 +32,18 @@ define([
         return cell.metadata.kbase[group][name];
     }
 
-    function factory(config) {
-        let container,
-            cell,
-            readOnly = Jupyter.narrative.readonly;
+    function factory() {
+        let container, cell;
+        const readOnly = Jupyter.narrative.readonly;
 
         function doMoveCellUp() {
-            Jupyter.notebook.move_cell_up();
+            const cellIndex = Jupyter.notebook.find_cell_index(cell);
+            Jupyter.notebook.move_cell_up(cellIndex);
         }
 
         function doMoveCellDown() {
-            Jupyter.notebook.move_cell_down();
+            const cellIndex = Jupyter.notebook.find_cell_index(cell);
+            Jupyter.notebook.move_cell_down(cellIndex);
         }
 
         function doDeleteCell() {
@@ -61,41 +61,20 @@ define([
         }
 
         function getCellSubtitle(cell) {
-            const subTitle = getMeta(cell, 'attributes', 'subtitle'),
-                showTitle = utils.getCellMeta(cell, 'kbase.cellState.showTitle', true),
-                showSubtitle = utils.getCellMeta(cell, 'kbase.cellState.showSubtitle', true);
+            const subTitle = getMeta(cell, 'attributes', 'subtitle');
+            const showTitle = utils.getCellMeta(cell, 'kbase.cellState.showTitle', true);
 
             if (showTitle) {
                 return subTitle;
             }
             return '';
         }
 
-        function getCellInfoLink(cell, events) {
-            const url = utils.getCellMeta(cell, 'kbase.attributes.info.url'),
-                label = utils.getCellMeta(cell, 'kbase.attributes.info.label');
-
-            if (url) {
-                return a(
-                    {
-                        href: url,
-                        target: '_blank',
-                        id: events.addEvent({
-                            type: 'click',
-                            handler: doShowInfoModal,
-                        }),
-                    },
-                    label || 'ref'
-                );
-            }
-            return '';
-        }
-
         function doToggleMinMaxCell(e) {
             if (e.getModifierState) {
                 const modifier = e.getModifierState('Alt');
                 if (modifier) {
-                    console.log('I want to toggle all cells!');
+                    console.warn('I want to toggle all cells!');
                 }
             }
             cell.toggleMinMax();
@@ -112,97 +91,16 @@ define([
             return null;
         }
 
-        function doShowInfoModal(e) {
-            e.preventDefault();
-            const version = utils.getCellMeta(cell, 'kbase.appCell.app.version'),
-                authors = utils.getCellMeta(cell, 'kbase.appCell.app.spec.info.authors'),
-                title = getMeta(cell, 'attributes', 'title') + ' v' + version,
-                appStoreUrl = utils.getCellMeta(cell, 'kbase.attributes.info.url'),
-                tag = utils.getCellMeta(cell, 'kbase.appCell.app.tag'),
-                module = utils.getCellMeta(cell, 'kbase.appCell.app.spec.info.module_name');
-            var dialog = new BootstrapDialog({
-                title: title,
-                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(() => {
-                        dialog.hide();
-                    }),
-                ],
-                enterToTrigger: true,
-                closeButton: true,
-            });
-
-            const infoPanel = AppInfoPanel.make({
-                appId: utils.getCellMeta(cell, 'kbase.appCell.app.id'),
-                appVersion: version,
-                appAuthors: authors,
-                appModule: module,
-                tag: tag,
-            });
-            infoPanel.start({ node: dialog.getBody() });
-
-            dialog.getElement().on('hidden.bs.modal', () => {
-                dialog.destroy();
-            });
-            dialog.show();
-        }
-
-        function doToggleCellSettings() {
-            cell.element.trigger('toggleCellSettings.cell');
-        }
-
-        function renderToggleCellSettings(events) {
-            // Only kbase cells have cell settings.
-            if (!cell.metadata || !cell.metadata.kbase || !cell.metadata.kbase.type) {
-                return;
-            }
-
-            return button(
-                {
-                    type: 'button',
-                    class: 'btn btn-default btn-xs',
-                    dataToggle: 'tooltip',
-                    dataPlacement: 'left',
-                    title: true,
-                    dataOriginalTitle: 'Cell Settings',
-                    id: events.addEvent({ type: 'click', handler: doToggleCellSettings }),
-                },
-                [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' },
             });
         }
 
-        function isKBaseCell(cell) {
-            if (!cell.metadata || !cell.metadata.kbase || !cell.metadata.kbase.type) {
-                return false;
-            }
-            return true;
-        }
-
-        function doHelp() {
-            alert('help here...');
-        }
-
         function renderOptions(cell, events) {
-            const toggleMinMax = utils.getCellMeta(
-                    cell,
-                    'kbase.cellState.toggleMinMax',
-                    'maximized'
-                ),
-                toggleIcon = toggleMinMax === 'maximized' ? 'minus' : 'plus',
-                dropdownId = html.genId(),
-                menuItems = [];
+            const dropdownId = html.genId();
+            const menuItems = [];
 
             if (cell.cell_type === 'code') {
                 menuItems.push({
@@ -427,16 +325,19 @@ define([
                               ),
                         (function () {
                             const toggleMinMax = utils.getCellMeta(
-                                    cell,
-                                    'kbase.cellState.toggleMinMax',
-                                    'maximized'
-                                ),
-                                toggleIcon = toggleMinMax === 'maximized' ? 'minus' : 'plus',
-                                color = toggleMinMax === 'maximized' ? '#000' : 'rgba(255,137,0,1)';
+                                cell,
+                                'kbase.cellState.toggleMinMax',
+                                'maximized'
+                            );
+                            const toggleIcon = toggleMinMax === 'maximized' ? 'minus' : 'plus';
+                            const color =
+                                toggleMinMax === 'maximized' ? '#000' : 'rgba(255,137,0,1)';
+                            const classModifier =
+                                toggleMinMax === 'maximized' ? '-maximized' : '-minimized';
                             return button(
                                 {
                                     type: 'button',
-                                    class: 'btn btn-default btn-xs',
+                                    class: `btn btn-default btn-xs kb-btn-expander ${classModifier}`,
                                     dataToggle: 'tooltip',
                                     dataPlacement: 'left',
                                     title: true,
@@ -622,8 +523,8 @@ define([
     }
 
     return {
-        make: function (config) {
-            return factory(config);
+        make: function () {
+            return factory();
         },
     };
 });

nbextensions/editorCell/widgets/editors/readsSet/editor.js

@@ -128,9 +128,9 @@ define(
                 env.appId = appId;
                 env.appTag = appTag;
                 const appRef = {
-                        ids: [appId],
-                        tag: appTag,
-                    },
+                    ids: [appId],
+                    tag: appTag,
+                },
                     nms = new NarrativeMethodStore(
                         runtime.config('services.narrative_method_store.url'),
                         {
@@ -625,8 +625,8 @@ define(
                     require(['./update'], (Widget) => {
                         // TODO: widget should make own bus.
                         const bus = runtime.bus().makeChannelBus({
-                                description: 'Parent comm bus for input widget',
-                            }),
+                            description: 'Parent comm bus for input widget',
+                        }),
                             widget = Widget.make({
                                 bus: bus,
                                 workspaceInfo: workspaceInfo,
@@ -740,8 +740,8 @@ define(
                         th('Last saved'),
                         td(
                             info.saveDate.toLocaleDateString() +
-                                ' at ' +
-                                info.saveDate.toLocaleTimeString()
+                            ' at ' +
+                            info.saveDate.toLocaleTimeString()
                         ),
                     ]),
                     tr([th('By'), td(info.saved_by)]),
@@ -759,11 +759,11 @@ define(
                 // TODO: check if the editor has unsaved changed, and
                 // show an error message if so, and refuse to switch.
                 const setApiClient = new GenericClient({
-                        url: runtime.config('services.service_wizard.url'),
-                        token: runtime.authToken(),
-                        module: 'SetAPI',
-                        version: 'dev',
-                    }),
+                    url: runtime.config('services.service_wizard.url'),
+                    token: runtime.authToken(),
+                    module: 'SetAPI',
+                    version: 'dev',
+                }),
                     params = {
                         ref: objectRef,
                         include_item_info: 1,
@@ -810,11 +810,11 @@ define(
 
             function doCreateNewSet(name) {
                 const setApiClient = new GenericClient({
-                        url: runtime.config('services.service_wizard.url'),
-                        token: runtime.authToken(),
-                        module: 'SetAPI',
-                        version: 'dev',
-                    }),
+                    url: runtime.config('services.service_wizard.url'),
+                    token: runtime.authToken(),
+                    module: 'SetAPI',
+                    version: 'dev',
+                }),
                     params = {
                         workspace: String(workspaceInfo.id),
                         output_object_name: name,