Jlab3

.gitignore

@@ -32,3 +32,7 @@ qgrid/static/
 
 # OS X
 .DS_Store
+
+# Compiled javascript
+qgrid/nbextension/
+qgrid/labextension/

install.json

@@ -0,0 +1,5 @@
+{
+  "packageManager": "python",
+  "packageName": "qgrid",
+  "uninstallInstructions": "Use your Python package manager (pip, conda, etc.) to uninstall the package qgrid"
+}

js/.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+coverage
+**/*.d.ts
+tests

js/.eslintrc.js

@@ -0,0 +1,39 @@
+module.exports = {
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended'
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    sourceType: 'module'
+  },
+  plugins: ['@typescript-eslint'],
+  rules: {
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        'selector': 'interface',
+        'format': ['PascalCase'],
+        'custom': {
+          'regex': '^I[A-Z]',
+          'match': true
+        }
+      }
+    ],
+    '@typescript-eslint/no-unused-vars': ['warn', { args: 'none' }],
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/quotes': [
+      'error',
+      'single',
+      { avoidEscape: true, allowTemplateLiterals: false }
+    ],
+    curly: ['error', 'all'],
+    eqeqeq: 'error',
+    'prefer-arrow-callback': 'error'
+  }
+};

js/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2020, Quantopian Inc. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

js/src/embed.js → js/lib/embed.js

@@ -6,4 +6,4 @@
 
 // Export widget models and views, and the npm package version number.
 module.exports = require('./qgrid.widget.js');
-module.exports.version = require('../package.json').version;
+module.exports['version'] = require('../package.json').version;

js/lib/example.js

@@ -0,0 +1,55 @@
+var widgets = require('@jupyter-widgets/base');
+var _ = require('lodash');
+
+// See example.py for the kernel counterpart to this file.
+
+
+// Custom Model. Custom widgets models must at least provide default values
+// for model attributes, including
+//
+//  - `_view_name`
+//  - `_view_module`
+//  - `_view_module_version`
+//
+//  - `_model_name`
+//  - `_model_module`
+//  - `_model_module_version`
+//
+//  when different from the base class.
+
+// When serialiazing the entire widget state for embedding, only values that
+// differ from the defaults will be specified.
+var HelloModel = widgets.DOMWidgetModel.extend({
+    defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {
+        _model_name : 'HelloModel',
+        _view_name : 'HelloView',
+        _model_module : 'qgrid2',
+        _view_module : 'qgrid2',
+        _model_module_version : '2.0.0',
+        _view_module_version : '2.0.0',
+        value : 'Hello World!'
+    })
+});
+
+
+// Custom View. Renders the widget model.
+var HelloView = widgets.DOMWidgetView.extend({
+    // Defines how the widget gets rendered into the DOM
+    render: function() {
+        this.value_changed();
+
+        // Observe changes in the value traitlet in Python, and define
+        // a custom callback.
+        this.model.on('change:value', this.value_changed, this);
+    },
+
+    value_changed: function() {
+        this.el.textContent = this.model.get('value');
+    }
+});
+
+
+module.exports = {
+    HelloModel: HelloModel,
+    HelloView: HelloView
+};

js/src/extension.js → js/lib/extension.js

@@ -1,13 +1,19 @@
 // This file contains the javascript that is run when the notebook is loaded.
 // It contains some requirejs configuration and the `load_ipython_extension`
 // which is required for any notebook extension.
+//
+// Some static assets may be required by the custom widget javascript. The base
+// url for the notebook is not known at build time and is therefore computed
+// dynamically.
+__webpack_public_path__ = document.querySelector('body').getAttribute('data-base-url') + 'nbextensions/qgrid2';
+
 
 // Configure requirejs
 if (window.require) {
     window.require.config({
         map: {
             "*" : {
-                "qgrid": "nbextensions/qgrid/index"
+                "qgrid2": "nbextensions/qgrid2/index",
             }
         }
     });

js/lib/index.js

@@ -0,0 +1,3 @@
+// Export widget models and views, and the npm package version number.
+module.exports = require('./qgrid.widget.js');
+module.exports['version'] = require('../package.json').version;

js/src/jupyterlab-plugin.js → js/lib/labplugin.js

@@ -1,19 +1,16 @@
-var qgrid = require('./index');
-
+var plugin = require('./index');
 var base = require('@jupyter-widgets/base');
 
-/**
- * The widget manager provider.
- */
 module.exports = {
-  id: 'qgrid',
+  id: 'qgrid2:plugin',
   requires: [base.IJupyterWidgetRegistry],
   activate: function(app, widgets) {
       widgets.registerWidget({
-          name: 'qgrid',
-          version: qgrid.version,
-          exports: qgrid
+          name: 'qgrid2',
+          version: plugin.version,
+          exports: plugin
       });
-    },
+  },
   autoStart: true
 };
+

js/src/qgrid.widget.js → js/lib/qgrid.widget.js

@@ -7,13 +7,6 @@ var slider_filter = require('./qgrid.sliderfilter.js');
 var text_filter = require('./qgrid.textfilter.js');
 var boolean_filter = require('./qgrid.booleanfilter.js');
 var editors = require('./qgrid.editors.js');
-var dialog = null;
-try {
-  dialog = require('base/js/dialog');
-} catch (e) {
-  console.warn("Qgrid was unable to load base/js/dialog. " +
-               "Full screen button won't be available");
-}
 var jquery_ui = require('jquery-ui-dist/jquery-ui.min.js');
 
 require('slickgrid-qgrid/slick.core.js');
@@ -36,8 +29,8 @@ class QgridModel extends widgets.DOMWidgetModel {
       _view_name : 'QgridView',
       _model_module : 'qgrid',
       _view_module : 'qgrid',
-      _model_module_version : '^1.1.3',
-      _view_module_version : '^1.1.3',
+      _model_module_version : '^1.0.0',
+      _view_module_version : '^1.0.0',
       _df_json: '',
       _columns: {}
     });
@@ -116,30 +109,6 @@ class QgridView extends widgets.DOMWidgetView {
     this.buttons.tooltip('disable');
 
     this.full_screen_btn = null;
-    if (dialog) {
-      this.full_screen_modal = $('body').find('.qgrid-modal');
-      if (this.full_screen_modal.length == 0) {
-        this.full_screen_modal = $(`
-          <div class="modal qgrid-modal">
-            <div class="modal-dialog">
-              <div class="modal-content">
-                <div class="modal-body"></div>
-              </div>
-            </div>
-          </div>
-        `).appendTo($('body'));
-      }
-      this.full_screen_btn = $(`
-        <button
-          class='btn btn-default fa fa-arrows-alt full-screen-btn'/>
-      `).appendTo(this.toolbar);
-      this.close_modal_btn = $(`
-        <button
-          class='btn btn-default fa fa-times close-modal-btn'
-          data-dismiss="modal"/>
-      `).appendTo(this.toolbar);
-
-    }
     this.bind_toolbar_events();
   }
 
@@ -176,7 +145,6 @@ class QgridView extends widgets.DOMWidgetView {
       if (IPython && IPython.keyboard_manager) {
         modal_options.keyboard_manager = IPython.keyboard_manager;
       }
-      var qgrid_modal = dialog.modal(modal_options);
 
       qgrid_modal.removeClass('fade');
       qgrid_modal.addClass('qgrid-modal');

js/package.json

@@ -1,52 +1,74 @@
 {
   "name": "qgrid2",
-  "version": "1.1.3",
-  "description": "An Interactive Grid for Sorting and Filtering DataFrames in Jupyter Notebook",
+  "version": "2.0.0",
+  "description": "An Interactive Grid for Sorting and Filtering DataFrames in Jupyter Notebook/Lab",
   "author": "Quantopian Inc.",
-  "main": "src/index.js",
+  "main": "lib/index.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Quantopian/qgrid.git"
+    "url": "https://github.com/quantopian/qgrid"
   },
   "keywords": [
     "jupyter",
     "widgets",
     "ipython",
-    "ipywidgets"
+    "ipywidgets",
+    "jupyterlab-extension"
+  ],
+  "files": [
+    "lib/**/*.js",
+    "dist/*.js",
+    "style/index.js"
   ],
   "scripts": {
-    "clean": "rimraf dist/",
-    "prepare": "webpack",
+    "clean": "rimraf dist/ && rimraf ../qgrid/labextension/ && rimraf ../qgrid/nbextension",
+    "prepublish": "yarn run clean && yarn run build:prod",
+    "build": "webpack --mode=development && yarn run build:labextension:dev",
+    "build:prod": "webpack --mode=production && yarn run build:labextension",
+    "build:labextension": "jupyter labextension build .",
+    "build:labextension:dev": "jupyter labextension build --development True .",
+    "watch": "webpack --watch --mode=development",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
+    "@jupyterlab/builder": "^3.0.0",
+    "webpack": "^4.42.0",
     "css-loader": "^3.4.2",
+    "eslint": "^7.14.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.1.4",
     "expose-loader": "^0.7.5",
     "file-loader": "^6.0.0",
     "jshint": "^2.11.0",
     "json-loader": "^0.5.7",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.1.1",
     "rimraf": "^3.0.2",
     "style-loader": "^1.1.3",
-    "webpack": "^4.42.0",
+    "typescript": "~4.1.3",
     "webpack-cli": "^3.3.11"
   },
   "dependencies": {
-    "@jupyter-widgets/base": "^1.1 || ^2 || ^3",
-    "@jupyter-widgets/controls": "^1 || ^2",
+    "@jupyter-widgets/base": "^1.1 || ^2 || ^3 || ^4",
+    "lodash": "^4.17.4",
     "jquery": "^3.2.1",
     "jquery-ui-dist": "^1.12.1",
     "moment": "^2.24.0",
     "slickgrid-qgrid": "0.0.5",
     "underscore": "^1.9.2"
   },
+  "jupyterlab": {
+    "extension": "lib/labplugin",
+    "outputDir": "../qgrid/labextension",
+    "sharedPackages": {
+      "@jupyter-widgets/base": {
+        "bundled": false,
+        "singleton": true
+      }
+    }
+  },
   "jshintConfig": {
     "esversion": 6
   },
-  "files": [
-    "dist/",
-    "src/"
-  ],
-  "jupyterlab": {
-    "extension": "src/jupyterlab-plugin"
-  }
+  "styleModule": "style/index.js"
 }

js/style/index.css

@@ -0,0 +1 @@
+@import url('base.css');

js/style/index.js

@@ -0,0 +1 @@
+import './base.css';