Merge pull request #1410 from pbugnion/output-area-embed-widget

[WIP] Export output widget in embed bundle

jupyter-widgets-controls/css/labvariables.css

@@ -22,26 +22,40 @@ be used with `--jp-layout-color1`. The numbers have the following meanings:
 * 3: tertiary, next most important under normal situations
 
 Throughout JupyterLab, we are mostly following principles from Google's
-Material Design when selecting colors. We are not, however, following 
+Material Design when selecting colors. We are not, however, following
 all of MD as it is not optimized for dense, information rich UIs.
 */
 
 
+/*
+ * Optional monospace font for input/output prompt.
+ */
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
+
+/*
+ * Added for compabitility with output area
+ */
+:root {
+  --jp-icon-search: none;
+  --jp-ui-select-caret: none;
+}
+
+
 :root {
 
   /* Borders
-  
+
   The following variables, specify the visual styling of borders in JupyterLab.
    */
 
   --jp-border-width: 1px;
-  --jp-border-color0: var(--md-grey-700);  
+  --jp-border-color0: var(--md-grey-700);
   --jp-border-color1: var(--md-grey-500);
   --jp-border-color2: var(--md-grey-300);
   --jp-border-color3: var(--md-grey-100);
 
   /* UI Fonts
-  
+
   The UI font CSS variables are used for the typography all of the JupyterLab
   user interface elements that are not directly user generated content.
   */
@@ -52,16 +66,17 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-ui-font-size2: calc(var(--jp-ui-font-size1)*var(--jp-ui-font-scale-factor));
   --jp-ui-font-size3: calc(var(--jp-ui-font-size2)*var(--jp-ui-font-scale-factor));
   --jp-ui-icon-font-size: 14px; /* Ensures px perfect FontAwesome icons */
+  --jp-ui-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
   /* Use these font colors against the corresponding main layout colors.
      In a light theme, these go from dark to light.
   */
 
   --jp-ui-font-color0: rgba(0,0,0,1.0);
-  --jp-ui-font-color1: rgba(0,0,0,0.87);
-  --jp-ui-font-color2: rgba(0,0,0,0.54);
-  --jp-ui-font-color3: rgba(0,0,0,0.38);
-  
+  --jp-ui-font-color1: rgba(0,0,0,0.8);
+  --jp-ui-font-color2: rgba(0,0,0,0.5);
+  --jp-ui-font-color3: rgba(0,0,0,0.3);
+
   /* Use these against the brand/accent/warn/error colors.
      These will typically go from light to darker, in both a dark and light theme
    */
@@ -72,10 +87,10 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-inverse-ui-font-color3: rgba(255,255,255,0.5);
 
   /* Content Fonts
-  
+
   Content font variables are used for typography of user generated content.
   */
-  
+
   --jp-content-font-size: 13px;
   --jp-content-line-height: 1.5;
   --jp-content-font-color0: black;
@@ -90,16 +105,18 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-ui-font-size3: calc(var(--jp-ui-font-size2)*var(--jp-ui-font-scale-factor));
 
   --jp-code-font-size: 13px;
-  --jp-code-line-height: 17px;
+  --jp-code-line-height: 1.307;
   --jp-code-padding: 5px;
+  --jp-code-font-family: monospace;
+
 
   /* Layout
-  
+
   The following are the main layout colors use in JupyterLab. In a light
   theme these would go from light to dark.
   */
 
-  --jp-layout-color0: white;  
+  --jp-layout-color0: white;
   --jp-layout-color1: white;
   --jp-layout-color2: var(--md-grey-200);
   --jp-layout-color3: var(--md-grey-400);
@@ -138,4 +155,41 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-info-color2: var(--md-cyan-300);
   --jp-info-color3: var(--md-cyan-100);
 
+  /* Cell specific styles */
+
+  --jp-cell-padding: 5px;
+  --jp-cell-editor-background: #f7f7f7;
+  --jp-cell-editor-border-color: #cfcfcf;
+  --jp-cell-editor-background-edit: var(--jp-ui-layout-color1);
+  --jp-cell-editor-border-color-edit: var(--jp-brand-color1);
+  --jp-cell-prompt-width: 100px;
+  --jp-cell-prompt-font-family: 'Roboto Mono', monospace;
+  --jp-cell-prompt-letter-spacing: 0px;
+  --jp-cell-prompt-opacity: 1.0;
+  --jp-cell-prompt-opacity-not-active: 0.4;
+  --jp-cell-prompt-font-color-not-active: var(--md-grey-700);
+  /* A custom blend of MD grey and blue 600
+   * See https://meyerweb.com/eric/tools/color-blend/#546E7A:1E88E5:5:hex */
+  --jp-cell-inprompt-font-color: #307FC1;
+  /* A custom blend of MD grey and orange 600
+   * https://meyerweb.com/eric/tools/color-blend/#546E7A:F4511E:5:hex */
+  --jp-cell-outprompt-font-color: #BF5B3D;
+
+  /* Notebook specific styles */
+
+  --jp-notebook-padding: 10px;
+  --jp-notebook-scroll-padding: 100px;
+
+  /* Console specific styles */
+
+  --jp-console-background: var(--md-grey-100);
+
+  /* Toolbar specific styles */
+
+  --jp-toolbar-border-color: var(--md-grey-400);
+  --jp-toolbar-micro-height: 8px;
+  --jp-toolbar-background: var(--jp-layout-color0);
+  --jp-toolbar-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.24);
+  --jp-toolbar-header-margin: 4px 4px 0px 4px;
+  --jp-toolbar-active-background: var(--md-grey-300);
 }

jupyter-widgets-htmlmanager/css/output.css

@@ -0,0 +1,15 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+.jp-OutputArea-child {
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+.jp-RenderedText pre {
+    padding-left: 1em;
+    padding-top: 0.8em;
+    padding-bottom: 0.8em;
+}

jupyter-widgets-htmlmanager/examples/web/index.html

@@ -20,12 +20,12 @@
             "state": {
                 "79c5cde32c044e4d95cfa27a54982bde": {
                     "model_name": "LayoutModel",
-                    "model_module": "jupyter-js-widgets",
+                    "model_module": "@jupyter-widgets/base",
                     "state": {}
                 },
                 "7687c2dd3f344143ae1e87ee9704c774": {
                     "model_name": "IntSliderModel",
-                    "model_module": "jupyter-js-widgets",
+                    "model_module": "@jupyter-widgets/controls",
                     "state": {
                         "layout": "IPY_MODEL_79c5cde32c044e4d95cfa27a54982bde",
                         "max": 200,
@@ -34,33 +34,33 @@
                 },
                 "06ad7ea9cf7b4029b312e8fc012c3294": {
                     "model_name": "LayoutModel",
-                    "model_module": "jupyter-js-widgets",
+                    "model_module": "@jupyter-widgets/base",
                     "state": {}
                 },
                 "0c3957dbb4734762a84ad924f77197b3": {
                     "model_name": "IntSliderModel",
-                    "model_module": "jupyter-js-widgets",
+                    "model_module": "@jupyter-widgets/controls",
                     "state": {
                         "layout": "IPY_MODEL_06ad7ea9cf7b4029b312e8fc012c3294",
                         "value": 40
                     }
                 },
                 "f326c34c26034acdbab8ca4610d49bae": {
                     "model_name": "LayoutModel",
-                    "model_module": "jupyter-js-widgets",
+                    "model_module": "@jupyter-widgets/base",
                     "state": {}
                 },
                 "2e4ca159b05a4f3295c8b59695359428": {
                     "model_name": "ButtonModel",
-                    "model_module": "jupyter-js-widgets",
+                    "model_module": "@jupyter-widgets/controls",
                     "state": {
                         "layout": "IPY_MODEL_f326c34c26034acdbab8ca4610d49bae",
                         "icon": "legal"
                     }
                 },
                 "e7c5849fbfe7415ab5896fc749d71164": {
                     "model_name": "DirectionalLinkModel",
-                    "model_module": "jupyter-js-widgets",
+                    "model_module": "@jupyter-widgets/controls",
                     "state": {
                         "target": [
                             "IPY_MODEL_0c3957dbb4734762a84ad924f77197b3",
@@ -74,15 +74,15 @@
                 },
                 "4e6ee45ef7c64f0f953c79150d4ae0ca": {
                     "model_name": "LayoutModel",
-                    "model_module": "jupyter-js-widgets",
+                    "model_module": "@jupyter-widgets/base",
                     "state": {
                         "flex_flow": "column",
                         "display": "flex"
                     }
                 },
                 "4c5a49e52ae54ad5bdbe973353a58931": {
                     "model_name": "BoxModel",
-                    "model_module": "jupyter-js-widgets",
+                    "model_module": "@jupyter-widgets/controls",
                     "state": {
                         "children": [
                             "IPY_MODEL_7687c2dd3f344143ae1e87ee9704c774",

jupyter-widgets-htmlmanager/examples/web/index.js

@@ -1,2 +1,2 @@
 
-require('embed-jupyter-widgets/dist/index.js');
+require('@jupyter-widgets/htmlmanager/dist/index.js');

jupyter-widgets-htmlmanager/examples/web/package.json

@@ -4,17 +4,15 @@
   "description": "Project that tests the ability to npm install jupyter-js-widgets within an npm project.",
   "main": "index.js",
   "scripts": {
-      "//": "The cp in the pre-publish step is a hack until the current release of jupyter-js-widgets on NPM supports the separate embed bundle",
-    "prepublish": "cp ../../dist/embed.js ./jupyter-js-widgets.js && webpack",
+    "prepublish": "webpack",
     "test": "npm run test:default",
     "test:default": "echo \"No test specified\""
   },
   "author": "IPython",
   "license": "BSD-3-Clause",
   "dependencies": {
     "font-awesome": "^4.5.0",
-    "jupyter-js-widgets": "file:../..",
-    "embed-jupyter-widgets": "file:../../../embed-jupyter-widgets"
+    "@jupyter-widgets/htmlmanager": "file:../.."
   },
   "devDependencies": {
     "css-loader": "^0.23.1",

jupyter-widgets-htmlmanager/package.json

@@ -16,10 +16,15 @@
   "scripts": {
     "clean": "rimraf lib",
     "build:src": "tsc --project src",
+    "build:test": "tsc --project test/src && webpack --config test/webpack.conf.js",
     "build": "npm run build:src && webpack",
     "postinstall": "npm dedupe",
     "prepublish": "npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "npm run test:unit",
+    "test:unit": "npm run test:unit:firefox && npm run test:unit:chrome",
+    "test:unit:default": "npm run build:test && karma start test/karma.conf.js --log-level debug --browsers=Firefox",
+    "test:unit:firefox": "npm run test:unit:default -- --browsers=Firefox",
+    "test:unit:chrome": "npm run test:unit:default -- --browsers=Chrome"
   },
   "author": "Jupyter Project",
   "license": "BSD-3-Clause",
@@ -28,6 +33,8 @@
   },
   "homepage": "https://github.com/jupyter-widgets/ipywidgets#readme",
   "dependencies": {
+    "@jupyterlab/outputarea": "^0.7.0",
+    "@jupyterlab/rendermime": "^0.7.0",
     "@jupyter-widgets/base": "^0.3.0",
     "@jupyter-widgets/controls": "^0.3.0",
     "@phosphor/widgets": "^1.2.0",
@@ -36,12 +43,21 @@
     "scriptjs": "^2.5.8"
   },
   "devDependencies": {
+    "@types/mocha": "^2.2.41",
     "@types/requirejs": "^2.1.28",
+    "chai": "^4.0.0",
     "css-loader": "^0.28.4",
     "es6-promise": "^4.1.0",
     "file-loader": "^0.11.2",
     "json-loader": "^0.5.4",
-    "postcss": "^6.0.1",
+    "karma": "^1.6.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-firefox-launcher": "^1.0.1",
+    "karma-ie-launcher": "^1.0.0",
+    "karma-mocha": "^1.3.0",
+    "karma-mocha-reporter": "^2.2.3",
+    "mocha": "^3.3.0",
+    "postcss": "^6.0.2",
     "postcss-cssnext": "^2.11.0",
     "postcss-import": "^10.0.0",
     "postcss-loader": "^1.3.2",

jupyter-widgets-htmlmanager/src/htmlmanager.ts

@@ -6,6 +6,11 @@ import * as base from '@jupyter-widgets/base';
 
 import * as PhosphorWidget from '@phosphor/widgets';
 
+import { RenderMime } from '@jupyterlab/rendermime';
+
+import { OutputModel, OutputView } from './output'
+import { WidgetRenderer, WIDGET_MIMETYPE } from './output_renderers'
+
 export
 class HTMLManager extends widgets.ManagerBase<HTMLElement> {
 
@@ -50,7 +55,7 @@ class HTMLManager extends widgets.ManagerBase<HTMLElement> {
             // copies on the page. If we ever separate the widgets from the
             // base manager, we should get rid of this special case.
             if (moduleName === '@jupyter-widgets/controls') {
-                resolve(widgets);
+                resolve({ ...widgets, OutputModel, OutputView });
             } else if (moduleName === '@jupyter-widgets/base') {
                 resolve(base)
             } else {
@@ -73,4 +78,17 @@ class HTMLManager extends widgets.ManagerBase<HTMLElement> {
             }
         });
     }
+
+    /**
+     * Renderers for contents of the output widgets
+     *
+     * Defines how outputs in the output widget should be rendered.
+     */
+    renderMime: RenderMime =
+        new RenderMime({
+            items: [
+                { mimeType: WIDGET_MIMETYPE, renderer: new WidgetRenderer(this) },
+                ...RenderMime.getDefaultItems()
+            ]
+        });
 };