Merge pull request #7407 from markellekelly/celltags

Celltags in core

dev_mode/imports.css

@@ -2,6 +2,7 @@
 /* It was generated by @jupyterlab/buildutils in Build.ensureAssets() */
 @import url('~@jupyterlab/application-extension/style/index.css');
 @import url('~@jupyterlab/apputils-extension/style/index.css');
+@import url('~@jupyterlab/celltags-extension/style/index.css');
 @import url('~@jupyterlab/codemirror-extension/style/index.css');
 @import url('~@jupyterlab/completer-extension/style/index.css');
 @import url('~@jupyterlab/console-extension/style/index.css');

dev_mode/package.json

@@ -19,6 +19,7 @@
     "@jupyterlab/application": "~2.0.0-alpha.4",
     "@jupyterlab/application-extension": "~2.0.0-alpha.4",
     "@jupyterlab/apputils-extension": "~2.0.0-alpha.4",
+    "@jupyterlab/celltags-extension": "~0.1.0",
     "@jupyterlab/codemirror-extension": "~2.0.0-alpha.4",
     "@jupyterlab/completer-extension": "~2.0.0-alpha.4",
     "@jupyterlab/console-extension": "~2.0.0-alpha.4",
@@ -93,6 +94,7 @@
     "@jupyterlab/apputils-extension": "~2.0.0-alpha.4",
     "@jupyterlab/attachments": "~2.0.0-alpha.4",
     "@jupyterlab/cells": "~2.0.0-alpha.4",
+    "@jupyterlab/celltags": "~0.1.0",
     "@jupyterlab/codeeditor": "~2.0.0-alpha.4",
     "@jupyterlab/codemirror": "~2.0.0-alpha.4",
     "@jupyterlab/codemirror-extension": "~2.0.0-alpha.4",
@@ -189,6 +191,7 @@
     "extensions": {
       "@jupyterlab/application-extension": "",
       "@jupyterlab/apputils-extension": "",
+      "@jupyterlab/celltags-extension": "",
       "@jupyterlab/codemirror-extension": "",
       "@jupyterlab/completer-extension": "",
       "@jupyterlab/console-extension": "",
@@ -277,6 +280,8 @@
       "@jupyterlab/apputils-extension": "../packages/apputils-extension",
       "@jupyterlab/attachments": "../packages/attachments",
       "@jupyterlab/cells": "../packages/cells",
+      "@jupyterlab/celltags": "../packages/celltags",
+      "@jupyterlab/celltags-extension": "../packages/celltags-extension",
       "@jupyterlab/codeeditor": "../packages/codeeditor",
       "@jupyterlab/codemirror": "../packages/codemirror",
       "@jupyterlab/codemirror-extension": "../packages/codemirror-extension",

packages/celltags-extension/README.md

@@ -0,0 +1,4 @@
+# @jupyterlab/celltags-extension
+
+A JupyterLab extension which provides an entry point for
+[@jupyterlab/celltags](../celltags).

packages/celltags-extension/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@jupyterlab/celltags-extension",
+  "version": "0.1.0",
+  "description": "An extension for manipulating tags in cell metadata",
+  "keywords": [
+    "jupyter",
+    "jupyterlab",
+    "jupyterlab-extension"
+  ],
+  "homepage": "https://github.com/jupyterlab/jupyterlab",
+  "bugs": {
+    "url": "https://github.com/jupyterlab/jupyterlab/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jupyterlab/jupyterlab.git"
+  },
+  "license": "BSD-3-Clause",
+  "author": "Project Jupyter",
+  "files": [
+    "lib/*.{d.ts,js}",
+    "style/*.css"
+  ],
+  "sideEffects": [
+    "style/*.css"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "style": "style/index.css",
+  "directories": {
+    "lib": "lib/"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rimraf lib && rimraf tsconfig.tsbuildinfo",
+    "prepare": "npm run clean && npm run build",
+    "prepublishOnly": "npm run build",
+    "watch": "tsc -b --watch"
+  },
+  "dependencies": {
+    "@jupyterlab/application": "^2.0.0-alpha.3",
+    "@jupyterlab/celltags": "^0.1.0",
+    "@jupyterlab/notebook": "^2.0.0-alpha.3",
+    "@types/node": "^12.0.2"
+  },
+  "devDependencies": {
+    "rimraf": "~2.6.2",
+    "typescript": "~3.7.2"
+  },
+  "jupyterlab": {
+    "extension": true
+  }
+}

packages/celltags-extension/src/index.ts

@@ -0,0 +1,27 @@
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+
+import { INotebookTools, INotebookTracker } from '@jupyterlab/notebook';
+
+import { TagTool } from '@jupyterlab/celltags';
+
+/**
+ * Initialization data for the celltags extension.
+ */
+const celltags: JupyterFrontEndPlugin<void> = {
+  id: 'celltags',
+  autoStart: true,
+  requires: [INotebookTools, INotebookTracker],
+  activate: (
+    app: JupyterFrontEnd,
+    tools: INotebookTools,
+    tracker: INotebookTracker
+  ) => {
+    const tool = new TagTool(tracker, app);
+    tools.addItem({ tool: tool, rank: 1.6 });
+  }
+};
+
+export default celltags;

packages/celltags-extension/style/index.css

@@ -0,0 +1 @@
+@import url('~@jupyterlab/celltags/style/index.css');

packages/celltags-extension/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "composite": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "incremental": true,
+    "jsx": "react",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": true,
+    "preserveWatchOutput": true,
+    "resolveJsonModule": true,
+    "outDir": "lib",
+    "rootDir": "src",
+    "strict": true,
+    "strictNullChecks": false,
+    "target": "es2017",
+    "types": ["node"]
+  },
+  "include": ["src/*"],
+  "references": [
+    {
+      "path": "../application"
+    },
+    {
+      "path": "../celltags"
+    },
+    {
+      "path": "../notebook"
+    }
+  ]
+}

packages/celltags/README.md

@@ -0,0 +1,4 @@
+# @jupyterlab/celltags
+
+A JupyterLab package which provides an interface for viewing and manipulating
+descriptive tags in notebook cell metadata.

packages/celltags/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@jupyterlab/celltags",
+  "version": "0.1.0",
+  "description": "An extension for manipulating tags in cell metadata",
+  "keywords": [
+    "jupyter",
+    "jupyterlab",
+    "jupyterlab-extension"
+  ],
+  "homepage": "https://github.com/jupyterlab/jupyterlab",
+  "bugs": {
+    "url": "https://github.com/jupyterlab/jupyterlab/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jupyterlab/jupyterlab.git"
+  },
+  "license": "BSD-3-Clause",
+  "author": "Project Jupyter",
+  "files": [
+    "lib/*.{d.ts,js}",
+    "style/*.css",
+    "static/*.svg"
+  ],
+  "sideEffects": [
+    "style/*.css"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "style": "style/index.css",
+  "directories": {
+    "lib": "lib/"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "clean": "rimraf lib",
+    "prepare": "npm run clean && npm run build",
+    "prepublishOnly": "npm run build",
+    "watch": "tsc -b --watch"
+  },
+  "dependencies": {
+    "@jupyterlab/application": "^2.0.0-alpha.3",
+    "@jupyterlab/cells": "^2.0.0-alpha.3",
+    "@jupyterlab/notebook": "^2.0.0-alpha.3",
+    "@jupyterlab/ui-components": "^2.0.0-alpha.3",
+    "@lumino/widgets": "^1.9.0",
+    "@types/node": "^12.0.2"
+  },
+  "devDependencies": {
+    "rimraf": "~2.6.2",
+    "typescript": "~3.7.2"
+  }
+}

packages/celltags/src/addwidget.ts

@@ -0,0 +1,164 @@
+import { Widget } from '@lumino/widgets';
+
+import { defaultIconRegistry } from '@jupyterlab/ui-components';
+
+import { TagTool } from './tool';
+
+/**
+ * A widget which hosts a cell tags area.
+ */
+export class AddWidget extends Widget {
+  /**
+   * Construct a new tag widget.
+   */
+  constructor() {
+    super();
+    this.addClass('tag');
+    this.editing = false;
+    this.buildTag();
+  }
+
+  /**
+   * Create input box with icon and attach to this.node.
+   */
+  buildTag() {
+    let text = document.createElement('input');
+    text.value = 'Add Tag';
+    text.contentEditable = 'true';
+    text.className = 'add-tag';
+    text.style.width = '49px';
+    this.input = text;
+    let tag = document.createElement('div');
+    tag.className = 'tag-holder';
+    tag.appendChild(text);
+    let img = document.createElement('span');
+    defaultIconRegistry.icon({
+      name: 'add',
+      container: img,
+      center: true,
+      height: '18px',
+      width: '18px',
+      marginLeft: '3px',
+      marginRight: '-5px'
+    });
+    this.addClass('unapplied-tag');
+    tag.appendChild(img);
+    this.node.appendChild(tag);
+  }
+
+  /**
+   * Handle `after-attach` messages for the widget.
+   */
+  onAfterAttach() {
+    this.node.addEventListener('mousedown', this);
+    this.input.addEventListener('keydown', this);
+    this.input.addEventListener('focus', this);
+    this.input.addEventListener('blur', this);
+  }
+
+  /**
+   * Handle `before-detach` messages for the widget.
+   */
+  onBeforeDetach() {
+    this.node.removeEventListener('mousedown', this);
+    this.input.removeEventListener('keydown', this);
+    this.input.removeEventListener('focus', this);
+    this.input.removeEventListener('blur', this);
+  }
+
+  /**
+   * Handle the DOM events for the widget.
+   *
+   * @param event - The DOM event sent to the widget.
+   *
+   * #### Notes
+   * This method implements the DOM `EventListener` interface and is
+   * called in response to events on the dock panel's node. It should
+   * not be called directly by user code.
+   */
+  handleEvent(event: Event): void {
+    switch (event.type) {
+      case 'mousedown':
+        this._evtMouseDown(event as MouseEvent);
+        break;
+      case 'keydown':
+        this._evtKeyDown(event as KeyboardEvent);
+        break;
+      case 'blur':
+        this._evtBlur();
+        break;
+      case 'focus':
+        this._evtFocus();
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+   * Handle the `'mousedown'` event for the input box.
+   *
+   * @param event - The DOM event sent to the widget
+   */
+  private _evtMouseDown(event: MouseEvent) {
+    if (!this.editing) {
+      this.editing = true;
+      this.input.value = '';
+      this.input.focus();
+    } else if (event.target !== this.input) {
+      if (this.input.value !== '') {
+        let value = this.input.value;
+        (this.parent as TagTool).addTag(value);
+        this.input.blur();
+        this._evtBlur();
+      }
+    }
+    event.preventDefault();
+  }
+
+  /**
+   * Handle the `'focus'` event for the input box.
+   */
+  private _evtFocus() {
+    if (!this.editing) {
+      this.input.blur();
+    }
+  }
+
+  /**
+   * Handle the `'keydown'` event for the input box.
+   *
+   * @param event - The DOM event sent to the widget
+   */
+  private _evtKeyDown(event: KeyboardEvent) {
+    let tmp = document.createElement('span');
+    tmp.className = 'add-tag';
+    tmp.innerHTML = this.input.value;
+    // set width to the pixel length of the text
+    document.body.appendChild(tmp);
+    this.input.style.width = tmp.getBoundingClientRect().width + 8 + 'px';
+    document.body.removeChild(tmp);
+    // if they hit Enter, add the tag and reset state
+    if (event.keyCode === 13) {
+      let value = this.input.value;
+      (this.parent as TagTool).addTag(value);
+      this.input.blur();
+      this._evtBlur();
+    }
+  }
+
+  /**
+   * Handle the `'focusout'` event for the input box.
+   */
+  private _evtBlur() {
+    if (this.editing) {
+      this.editing = false;
+      this.input.value = 'Add Tag';
+      this.input.style.width = '49px';
+    }
+  }
+
+  public parent: TagTool;
+  private editing: boolean;
+  private input: HTMLInputElement;
+}

packages/celltags/src/index.ts

@@ -0,0 +1,3 @@
+export * from './addwidget';
+export * from './tool';
+export * from './widget';