Merge pull request #7278 from jtpio/rank-top

Add support for rank to the top area

packages/application/src/shell.ts

@@ -175,26 +175,26 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
     this.addClass(APPLICATION_SHELL_CLASS);
     this.id = 'main';
 
+    let headerPanel = (this._headerPanel = new Panel());
+    let topHandler = (this._topHandler = new Private.PanelHandler());
     let bottomPanel = (this._bottomPanel = new BoxPanel());
-    let topPanel = (this._topPanel = new Panel());
     let hboxPanel = new BoxPanel();
     let dockPanel = (this._dockPanel = new DockPanelSvg({
       kind: 'dockPanelBar'
     }));
-    let headerPanel = (this._headerPanel = new Panel());
     MessageLoop.installMessageHook(dockPanel, this._dockChildHook);
 
     let hsplitPanel = new SplitPanel();
     let leftHandler = (this._leftHandler = new Private.SideBarHandler());
     let rightHandler = (this._rightHandler = new Private.SideBarHandler());
     let rootLayout = new BoxLayout();
 
+    headerPanel.id = 'jp-header-panel';
+    topHandler.panel.id = 'jp-top-panel';
     bottomPanel.id = 'jp-bottom-panel';
-    topPanel.id = 'jp-top-panel';
     hboxPanel.id = 'jp-main-content-panel';
     dockPanel.id = 'jp-main-dock-panel';
     hsplitPanel.id = 'jp-main-split-panel';
-    headerPanel.id = 'jp-header-panel';
 
     leftHandler.sideBar.addClass(SIDEBAR_CLASS);
     leftHandler.sideBar.addClass('jp-mod-left');
@@ -204,13 +204,13 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
     rightHandler.sideBar.addClass('jp-mod-right');
     rightHandler.stackedPanel.id = 'jp-right-stack';
 
-    bottomPanel.direction = 'bottom-to-top';
     hboxPanel.spacing = 0;
     dockPanel.spacing = 5;
     hsplitPanel.spacing = 1;
 
     hboxPanel.direction = 'left-to-right';
     hsplitPanel.orientation = 'horizontal';
+    bottomPanel.direction = 'bottom-to-top';
 
     SplitPanel.setStretch(leftHandler.stackedPanel, 0);
     SplitPanel.setStretch(dockPanel, 1);
@@ -236,12 +236,12 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
     hsplitPanel.setRelativeSizes([1, 2.5, 1]);
 
     BoxLayout.setStretch(headerPanel, 0);
-    BoxLayout.setStretch(topPanel, 0);
+    BoxLayout.setStretch(topHandler.panel, 0);
     BoxLayout.setStretch(hboxPanel, 1);
     BoxLayout.setStretch(bottomPanel, 0);
 
     rootLayout.addWidget(headerPanel);
-    rootLayout.addWidget(topPanel);
+    rootLayout.addWidget(topHandler.panel);
     rootLayout.addWidget(hboxPanel);
     rootLayout.addWidget(bottomPanel);
 
@@ -595,7 +595,7 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
       case 'header':
         return this._headerPanel.widgets.length === 0;
       case 'top':
-        return this._topPanel.widgets.length === 0;
+        return this._topHandler.panel.widgets.length === 0;
       case 'bottom':
         return this._bottomPanel.widgets.length === 0;
       case 'right':
@@ -679,7 +679,7 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
       case 'header':
         return this._headerPanel.children();
       case 'top':
-        return this._topPanel.children();
+        return this._topHandler.panel.children();
       case 'bottom':
         return this._bottomPanel.children();
       default:
@@ -801,9 +801,13 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
       console.error('Widgets added to app shell must have unique id property.');
       return;
     }
-    // Temporary: widgets are added to the panel in order of insertion.
-    this._topPanel.addWidget(widget);
+    options = options || {};
+    const rank = 'rank' in options ? options.rank : DEFAULT_RANK;
+    this._topHandler.addWidget(widget, rank);
     this._onLayoutModified();
+    if (this._topHandler.panel.isHidden) {
+      this._topHandler.panel.show();
+    }
   }
 
   /**
@@ -972,7 +976,7 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
   private _rightHandler: Private.SideBarHandler;
   private _tracker = new FocusTracker<Widget>();
   private _headerPanel: Panel;
-  private _topPanel: Panel;
+  private _topHandler: Private.PanelHandler;
   private _bottomPanel: Panel;
   private _mainOptionsCache = new Map<Widget, DocumentRegistry.IOpenOptions>();
   private _sideOptionsCache = new Map<Widget, DocumentRegistry.IOpenOptions>();
@@ -1022,6 +1026,34 @@ namespace Private {
     });
   }
 
+  /**
+   * A class which manages a panel and sorts its widgets by rank.
+   */
+  export class PanelHandler {
+    /**
+     * Get the panel managed by the handler.
+     */
+    get panel() {
+      return this._panel;
+    }
+
+    /**
+     * Add a widget to the panel.
+     *
+     * If the widget is already added, it will be moved.
+     */
+    addWidget(widget: Widget, rank: number): void {
+      widget.parent = null;
+      const item = { widget, rank };
+      const index = ArrayExt.upperBound(this._items, item, Private.itemCmp);
+      ArrayExt.insert(this._items, index, item);
+      this._panel.insertWidget(index, widget);
+    }
+
+    private _items = new Array<Private.IRankItem>();
+    private _panel = new Panel();
+  }
+
   /**
    * A class which manages a side bar and related stacked panel.
    */

tests/test-application/package.json

@@ -16,6 +16,7 @@
     "@jupyterlab/apputils": "^2.0.0-alpha.0",
     "@jupyterlab/coreutils": "^4.0.0-alpha.0",
     "@jupyterlab/testutils": "^2.0.0-alpha.0",
+    "@phosphor/algorithm": "^1.2.0",
     "@phosphor/commands": "^1.7.0",
     "@phosphor/coreutils": "^1.3.1",
     "@phosphor/messaging": "^1.3.0",

tests/test-application/src/shell.spec.ts

@@ -5,6 +5,8 @@ import { expect } from 'chai';
 
 import { framePromise } from '@jupyterlab/testutils';
 
+import { toArray } from '@phosphor/algorithm';
+
 import { Message } from '@phosphor/messaging';
 
 import { Widget } from '@phosphor/widgets';
@@ -166,6 +168,16 @@ describe('LabShell', () => {
       shell.add(widget, 'top', { rank: 10 });
       expect(shell.isEmpty('top')).to.equal(false);
     });
+
+    it('should add widgets according to their ranks', () => {
+      const foo = new Widget();
+      const bar = new Widget();
+      foo.id = 'foo';
+      bar.id = 'bar';
+      shell.add(foo, 'top', { rank: 20 });
+      shell.add(bar, 'top', { rank: 10 });
+      expect(toArray(shell.widgets('top'))).to.deep.equal([bar, foo]);
+    });
   });
 
   describe('#add(widget, "left")', () => {