Add statusbar

dev_mode/package.json

@@ -66,6 +66,7 @@
     "@jupyterlab/settingeditor": "^0.8.1",
     "@jupyterlab/settingeditor-extension": "^0.14.1",
     "@jupyterlab/shortcuts-extension": "^0.19.3",
+    "@jupyterlab/statusbar-extension": "^0.5.0",
     "@jupyterlab/tabmanager-extension": "^0.19.1",
     "@jupyterlab/terminal": "^0.19.1",
     "@jupyterlab/terminal-extension": "^0.19.1",
@@ -152,6 +153,7 @@
       "@jupyterlab/running-extension": "",
       "@jupyterlab/settingeditor-extension": "",
       "@jupyterlab/shortcuts-extension": "",
+      "@jupyterlab/statusbar-extension": "",
       "@jupyterlab/tabmanager-extension": "",
       "@jupyterlab/terminal-extension": "",
       "@jupyterlab/theme-dark-extension": "",
@@ -275,6 +277,7 @@
       "@jupyterlab/settingeditor": "../packages/settingeditor",
       "@jupyterlab/settingeditor-extension": "../packages/settingeditor-extension",
       "@jupyterlab/shortcuts-extension": "../packages/shortcuts-extension",
+      "@jupyterlab/statusbar-extension": "../packages/statusbar-extension",
       "@jupyterlab/tabmanager-extension": "../packages/tabmanager-extension",
       "@jupyterlab/terminal": "../packages/terminal",
       "@jupyterlab/terminal-extension": "../packages/terminal-extension",

packages/metapackage/package.json

@@ -84,6 +84,7 @@
     "@jupyterlab/settingeditor": "^0.8.1",
     "@jupyterlab/settingeditor-extension": "^0.14.1",
     "@jupyterlab/shortcuts-extension": "^0.19.3",
+    "@jupyterlab/statusbar-extension": "^0.5.0",
     "@jupyterlab/tabmanager-extension": "^0.19.1",
     "@jupyterlab/terminal": "^0.19.1",
     "@jupyterlab/terminal-extension": "^0.19.1",

packages/metapackage/src/index.ts

@@ -55,6 +55,7 @@ import '@jupyterlab/services';
 import '@jupyterlab/settingeditor';
 import '@jupyterlab/settingeditor-extension';
 import '@jupyterlab/shortcuts-extension';
+import '@jupyterlab/statusbar-extension';
 import '@jupyterlab/tabmanager-extension';
 import '@jupyterlab/terminal';
 import '@jupyterlab/terminal-extension';

packages/metapackage/tsconfig.json

@@ -168,6 +168,9 @@
     {
       "path": "../shortcuts-extension"
     },
+    {
+      "path": "../statusbar-extension"
+    },
     {
       "path": "../tabmanager-extension"
     },

packages/statusbar-extension/README.md

@@ -0,0 +1,23 @@
+# JupyterLab Status Bar
+
+This extension creates a generic statusbar to showcase the various states of JupyterLab. Different components will render depending on the active context: notebook, console, file editor, and terminal. This extension can be used by other
+extensions to add custom elements into the statusbar.
+
+Changing Contexts
+![Context Changes](http://g.recordit.co/OndGalRjws.gif)
+
+Component Interactions
+![Component Previews](http://g.recordit.co/jT0NA6D9c9.gif)
+
+## Dependencies
+
+- JupyterLab
+
+## Optional Dependencies
+
+- [nbresuse](https://github.com/yuvipanda/nbresuse)
+
+```bash
+pip install nbresuse
+jupyter serverextension enable --py nbresuse
+```

packages/statusbar-extension/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@jupyterlab/statusbar-extension",
+  "version": "0.5.0",
+  "description": "JupyterLab - Statusbar Extension",
+  "homepage": "https://github.com/jupyterlab/jupyterlab",
+  "bugs": {
+    "url": "https://github.com/jupyterlab/jupyterlab/issues"
+  },
+  "license": "BSD-3-Clause",
+  "author": "Project Jupyter, Richa Gadgil, Takahiro Shimokobe, Declan Kelly",
+  "files": [
+    "lib/**/*.d.ts",
+    "lib/**/*.js.map",
+    "lib/**/*.js",
+    "style/*.css",
+    "style/images/*.svg",
+    "schema/*.json"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "directories": {
+    "lib": "lib/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jupyterlab/jupyterlab.git"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "clean": "rimraf lib",
+    "docs": "typedoc --options tdoptions.json --theme ../../typedoc-theme src",
+    "prepublishOnly": "npm run build",
+    "watch": "tsc -b --watch"
+  },
+  "dependencies": {
+    "@jupyterlab/application": "^0.19.1",
+    "@jupyterlab/apputils": "^0.19.1",
+    "@jupyterlab/cells": "^0.19.1",
+    "@jupyterlab/codeeditor": "^0.19.1",
+    "@jupyterlab/codemirror": "^0.19.1",
+    "@jupyterlab/console": "^0.19.1",
+    "@jupyterlab/coreutils": "^2.2.1",
+    "@jupyterlab/docmanager": "^0.19.1",
+    "@jupyterlab/docregistry": "^0.19.1",
+    "@jupyterlab/filebrowser": "^0.19.3",
+    "@jupyterlab/fileeditor": "^0.19.1",
+    "@jupyterlab/notebook": "^0.19.2",
+    "@jupyterlab/services": "^3.2.1",
+    "@phosphor/algorithm": "^1.1.2",
+    "@phosphor/commands": "^1.6.1",
+    "@phosphor/coreutils": "^1.3.0",
+    "@phosphor/disposable": "^1.1.2",
+    "@phosphor/messaging": "^1.2.2",
+    "@phosphor/signaling": "^1.2.2",
+    "@phosphor/widgets": "^1.6.0",
+    "react": "~16.4.2",
+    "typestyle": "^2.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "~16.4.13",
+    "@types/react-dom": "~16.0.7",
+    "prettier": "^1.14.2",
+    "rimraf": "~2.6.2",
+    "tslint": "~5.10.0",
+    "typedoc": "~0.12.0",
+    "typescript": "~3.1.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "jupyterlab": {
+    "extension": true,
+    "schemaDir": "schema"
+  }
+}

packages/statusbar-extension/schema/plugin.json

@@ -0,0 +1,28 @@
+{
+  "jupyter.lab.setting-icon-class": "status-bar-icon",
+  "jupyter.lab.setting-icon-label": "Status Bar",
+  "title": "Status Bar",
+  "description": "Status Bar settings.",
+  "properties": {
+    "enabledDefaultItems": {
+      "type": "array",
+      "title": "Default Status Items",
+      "description": "Which default items should appear in the status bar",
+      "default": [
+        "command-edit-item",
+        "editor-syntax-item",
+        "file-path-item",
+        "file-upload-item",
+        "kernel-status-item",
+        "line-col-item",
+        "notebook-trust-item",
+        "running-sessions-item",
+        "tab-space-item",
+        "memory-usage-item",
+        "saving-status-item"
+      ]
+    }
+  },
+  "additionalProperties": false,
+  "type": "object"
+}

packages/statusbar-extension/src/component/group.tsx

@@ -0,0 +1,37 @@
+/**
+ * @ignore
+ */
+import * as React from 'react';
+import { style, classes } from 'typestyle/lib';
+import { centeredFlex, leftToRight } from '../style/layout';
+
+const groupItemLayout = style(centeredFlex, leftToRight);
+
+// tslint:disable-next-line:variable-name
+export const GroupItem = (
+  props: GroupItem.IProps & React.HTMLAttributes<HTMLDivElement>
+): React.ReactElement<GroupItem.IProps> => {
+  const { spacing, children, className, ...rest } = props;
+  const numChildren = React.Children.count(children);
+
+  return (
+    <div className={classes(groupItemLayout, className)} {...rest}>
+      {React.Children.map(children, (child, i) => {
+        if (i === 0) {
+          return <div style={{ marginRight: spacing }}>{child}</div>;
+        } else if (i === numChildren - 1) {
+          return <div style={{ marginLeft: spacing }}>{child}</div>;
+        } else {
+          return <div style={{ margin: `0px ${spacing}` }}>{child}</div>;
+        }
+      })}
+    </div>
+  );
+};
+
+export namespace GroupItem {
+  export interface IProps {
+    spacing: string;
+    children: JSX.Element[];
+  }
+}

packages/statusbar-extension/src/component/hover.tsx

@@ -0,0 +1,138 @@
+import { Widget, PanelLayout } from '@phosphor/widgets';
+import { HoverBox } from '@jupyterlab/apputils';
+
+import { Message } from '@phosphor/messaging';
+import { hoverItem } from '../style/lineForm';
+import { clickedItem, interactiveItem } from '../style/statusBar';
+
+export function showPopup(options: Popup.IOptions): Popup | null {
+  let dialog = new Popup(options);
+  dialog.launch();
+  return dialog;
+}
+
+export class Popup extends Widget {
+  constructor(options: Popup.IOptions) {
+    super();
+    this._body = options.body;
+    this._body.addClass(hoverItem);
+    this._anchor = options.anchor;
+    this._align = options.align;
+    let layout = (this.layout = new PanelLayout());
+    layout.addWidget(options.body);
+    this._body.node.addEventListener('resize', () => {
+      this.update();
+    });
+  }
+
+  launch() {
+    this.setGeometry();
+    Widget.attach(this, document.body);
+    this.update();
+    this._anchor.addClass(clickedItem);
+    this._anchor.removeClass(interactiveItem);
+  }
+
+  setGeometry() {
+    let aligned = 0;
+    const anchorRect = this._anchor.node.getBoundingClientRect();
+    const bodyRect = this._body.node.getBoundingClientRect();
+    if (this._align === 'right') {
+      aligned = -(bodyRect.width - anchorRect.width);
+    }
+    const style = window.getComputedStyle(this._body.node);
+    HoverBox.setGeometry({
+      anchor: anchorRect,
+      host: document.body,
+      maxHeight: 500,
+      minHeight: 20,
+      node: this._body.node,
+      offset: {
+        horizontal: aligned
+      },
+      privilege: 'forceAbove',
+      style
+    });
+  }
+
+  protected onUpdateRequest(msg: Message): void {
+    this.setGeometry();
+    this.setGeometry();
+    super.onUpdateRequest(msg);
+  }
+
+  protected onAfterAttach(msg: Message): void {
+    document.addEventListener('click', this, false);
+    this.node.addEventListener('keypress', this, false);
+    window.addEventListener('resize', this, false);
+  }
+
+  protected onAfterDetach(msg: Message): void {
+    document.removeEventListener('click', this, false);
+    this.node.removeEventListener('keypress', this, false);
+    window.removeEventListener('resize', this, false);
+  }
+
+  protected _evtClick(event: MouseEvent): void {
+    if (
+      !!event.target &&
+      !(
+        this._body.node.contains(event.target as HTMLElement) ||
+        this._anchor.node.contains(event.target as HTMLElement)
+      )
+    ) {
+      this.dispose();
+    }
+  }
+
+  protected onResize(): void {
+    this.update();
+  }
+
+  dispose() {
+    super.dispose();
+    this._anchor.removeClass(clickedItem);
+    this._anchor.addClass(interactiveItem);
+  }
+
+  protected _evtKeydown(event: KeyboardEvent): void {
+    // Check for escape key
+    switch (event.keyCode) {
+      case 27: // Escape.
+        event.stopPropagation();
+        event.preventDefault();
+        this.dispose();
+        break;
+      default:
+        break;
+    }
+  }
+
+  handleEvent(event: Event): void {
+    switch (event.type) {
+      case 'keydown':
+        this._evtKeydown(event as KeyboardEvent);
+        break;
+      case 'click':
+        this._evtClick(event as MouseEvent);
+        break;
+      case 'resize':
+        this.onResize();
+        break;
+      default:
+        break;
+    }
+  }
+
+  private _body: Widget;
+  private _anchor: Widget;
+  private _align: 'left' | 'right' | undefined;
+}
+
+export namespace Popup {
+  export interface IOptions {
+    body: Widget;
+    anchor: Widget;
+    align?: 'left' | 'right';
+  }
+}

packages/statusbar-extension/src/component/icon.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import icon from '../style/icon';
+import { classes, style } from 'typestyle/lib';
+
+export namespace IconItem {
+  export interface IProps {
+    source: string;
+  }
+}
+
+// tslint:disable-next-line:variable-name
+export const IconItem = (
+  props: IconItem.IProps &
+    React.HTMLAttributes<HTMLDivElement> & {
+      offset: { x: number; y: number };
+    }
+): React.ReactElement<IconItem.IProps> => {
+  const { source, className, offset, ...rest } = props;
+  return (
+    <div
+      className={classes(className, source, style(icon(offset)))}
+      {...rest}
+    />
+  );
+};

packages/statusbar-extension/src/component/index.ts

@@ -0,0 +1,5 @@
+export * from './icon';
+export * from './progressBar';
+export * from './text';
+export * from './group';
+export * from './hover';