#5268 beakerx jupyterlab extension (#6219)

* 6152 upgrade dependencies to use the v7 named modules * #6103 python API for output containers (#6150) * #6103 python API for output containers * #6103 python API for output containers * #6103 fix NaN in plots * polish doc * #6154 python TableDisplay constructor should handle array of dicts (#6165) * #6154 python TableDisplay constructor should handle array of dicts * add examples to doc * #6155 table in python output container displayed as text (#6167) * #6155 table in python output container displayed as text * add link to python output containers, polish that tutorial * #5980 #5982 #5995 #5996 #5997 Added support for INDEX. (#6161) * #5980 Added support for INDEX. * #5980 Fixed test. * Simplify if statemant. * #5980 Added backward compatibility for customizing styles. * #5980 Setting up default value. * #5980 Rollback backward compatibility. Fixed tests. * update doc to match code * #runAll: prevent receiving new messages before code execution ends (#6169) * #5268 beakerx jupyterlab extension * #5268 move lab extension out of beakerx npm module * #5268 fix TableDisplay widget for Lab * #5268 reimplement contextMenu for plots * add test for jupyter console (#6337) * #5268 tableDisplay context menu * #5268 add table cell context menu * #5268 add unique id for table header menu commands * #5268 update jslab README file
twosigma · Nov 27, 2017 · 87b03e7 · 87b03e7
1 parent d96f7b6
commit 87b03e7
Show file tree

Hide file tree

Showing 35 changed files with 706 additions and 176 deletions.
diff --git a/beakerx/js/package.json b/beakerx/js/package.json
@@ -56,7 +56,6 @@
     "datatables.net-keytable-dt": "^2.3.2",
     "datatables.net-select": "^1.2.2",
     "flatpickr": "^2.6.3",
-    "jquery-contextmenu": "^2.4.5",
     "jquery-ui": "^1.12.1",
     "moment": "^2.17.1",
     "moment-timezone": "^0.5.13",

diff --git a/beakerx/js/src/Plot.js b/beakerx/js/src/Plot.js
@@ -73,10 +73,9 @@ var PlotView = widgets.DOMWidgetView.extend({
         if (that._currentScope instanceof CombinedPlotScope) {
           that._currentScope.scopes.forEach(function(scope) {
             scope.destroy();
-          })
-        } else {
-          that._currentScope.destroy();
+          });
         }
+        that._currentScope.destroy();
 
         setTimeout(function() { that._currentScope = null; });
       });

diff --git a/beakerx/js/src/TableDisplay.js b/beakerx/js/src/TableDisplay.js
@@ -24,7 +24,6 @@ require('datatables.net-dt/css/jquery.dataTables.css');
 require('datatables.net-colreorder-dt/css/colReorder.dataTables.css');
 require('datatables.net-fixedcolumns-dt/css/fixedColumns.dataTables.css');
 require('datatables.net-keytable-dt/css/keyTable.dataTables.css');
-require('jquery-contextmenu/dist/jquery.contextMenu.css');
 require('./tableDisplay/css/datatables.scss');
 
 var TableDisplayModel = widgets.DOMWidgetModel.extend({

diff --git a/beakerx/js/src/contextMenu/BkoContextMenu.ts b/beakerx/js/src/contextMenu/BkoContextMenu.ts
@@ -0,0 +1,186 @@
+/*
+ *  Copyright 2017 TWO SIGMA OPEN SOURCE, LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+declare var lab: { contextMenu: ContextMenu };
+
+import { ContextMenu, Menu } from '@phosphor/widgets';
+import { CommandRegistry } from '@phosphor/commands';
+import { IDisposable } from '@phosphor/disposable';
+import MenuItem from "shared/interfaces/contextMenuItemInterface";
+import _ from 'underscore';
+import MenuInterface from '../shared/interfaces/menuInterface'
+
+interface addItem {
+  addItem: Function
+}
+
+export default abstract class BkoContextMenu implements MenuInterface {
+  protected scope: any;
+  protected commands: CommandRegistry;
+  protected menuItems: Menu.IItem[] = [];
+  protected inLab: boolean;
+  protected disposables: IDisposable[] = [];
+  protected event: MouseEvent;
+
+  public contextMenu: ContextMenu;
+
+  constructor(scope: any) {
+    this.inLab = this.isInLab();
+    this.scope = scope;
+
+    this.handleContextMenu = this.handleContextMenu.bind(this);
+    this.buildMenu();
+  }
+
+  protected abstract buildMenu(): void;
+
+  protected isInLab(): boolean {
+    let inLab = false;
+
+    try {
+      inLab = lab && lab.contextMenu instanceof ContextMenu;
+    } catch (e) {}
+
+    return inLab;
+  }
+
+  protected handleContextMenu(event: MouseEvent): void {
+    this.event = event;
+
+    if (this.inLab) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.open(event);
+  }
+
+  open(e: MouseEvent): void {
+    this.contextMenu.open(e);
+  }
+
+  protected buildLabMenu(): void {
+    this.commands = lab.contextMenu.menu.commands;
+    this.contextMenu = lab.contextMenu;
+  }
+
+  protected buildBkoMenu(): void {
+    this.commands = new CommandRegistry();
+    this.contextMenu = new ContextMenu({ commands: this.commands });
+    this.contextMenu.menu.addClass('bko-table-menu');
+  }
+
+  protected createItems(items: MenuItem[], menu: addItem): void {
+    for (let i = 0, ien = items.length; i < ien; i++) {
+      this.createMenuItem(items[i], menu);
+    }
+  }
+
+  protected createMenuItem(menuItem: MenuItem, menu: addItem): void {
+    const subitems = (typeof menuItem.items == 'function') ? menuItem.items() : menuItem.items;
+    const hasSubitems = _.isArray(subitems) && subitems.length;
+
+    menuItem.separator && this.addSeparatorItem(menuItem, menu);
+    !hasSubitems && this.menuItems.push(this.addMenuItem(menuItem, menu));
+    hasSubitems && this.menuItems.push(this.addSubmenuItem(menuItem, menu, subitems));
+  }
+
+  protected addMenuItem(menuItem: MenuItem, menu: addItem): Menu.IItem {
+    this.addCommand(menuItem);
+    this.addKeyBinding(menuItem);
+
+    return menu.addItem({ command: menuItem.id, selector: menuItem.selector });
+  }
+
+  protected addSeparatorItem(menuItem: MenuItem, menu: addItem): Menu.IItem {
+    return menu.addItem({ type: 'separator', selector: menuItem.selector });
+  }
+
+  protected addSubmenuItem(menuItem: MenuItem, menu: addItem, subitems: MenuItem[]): Menu.IItem {
+    return menu.addItem({
+      type: 'submenu',
+      submenu: this.createSubmenu(menuItem, subitems),
+      selector: menuItem.selector
+    });
+  }
+
+  protected addCommand(menuItem: MenuItem): void {
+    if (this.commands.hasCommand(menuItem.id)) {
+      return;
+    }
+
+    const self = this;
+    this.disposables.push(this.commands.addCommand(menuItem.id, {
+      label: menuItem.title,
+      usage: menuItem.tooltip || '',
+      iconClass: () => menuItem.icon ? menuItem.icon : '',
+      isVisible: menuItem.isVisible,
+      execute: (): void => {
+        if (menuItem.action && typeof menuItem.action == 'function') {
+          menuItem.action(self.event);
+        }
+      }
+    }));
+  }
+
+  protected addKeyBinding(menuItem: MenuItem): void {
+    if (!menuItem.shortcut) {
+      return;
+    }
+
+    this.disposables.push(this.commands.addKeyBinding({
+      keys: [menuItem.shortcut],
+      selector: menuItem.selector,
+      command: menuItem.id
+    }));
+  }
+
+  protected createSubmenu(menuItem: MenuItem, subitems: MenuItem[]): Menu {
+    const submenu = new Menu({ commands: this.commands });
+
+    !this.inLab && submenu.addClass('bko-table-menu');
+    submenu.title.label = menuItem.title;
+    submenu.setHidden(false);
+
+    this.createItems(subitems, submenu);
+
+    return submenu;
+  }
+
+  protected bindEvents(): void {
+    this.scope.element[0].addEventListener('contextmenu', this.handleContextMenu);
+  }
+
+  destroy(): void {
+    this.unbind();
+    this.removeMenuItems();
+    this.dispose();
+  }
+
+  removeMenuItems(): void {
+    this.menuItems.forEach(item => this.contextMenu.menu.removeItem(item));
+  }
+
+  dispose(): void {
+    this.disposables.forEach(disposable => disposable.dispose());
+  }
+
+  unbind(): void {
+    this.scope.element[0].removeEventListener('contextmenu', this.handleContextMenu);
+  }
+}
diff --git a/beakerx/js/src/embed.js b/beakerx/js/src/embed.js
@@ -10,15 +10,15 @@ module.exports = {};
 require('./../src/shared/style/beakerx.scss');
 require('./../src/plot/bko-combinedplot.css');
 require('./../src/plot/bko-plot.css');
-require('jquery-contextmenu/dist/jquery.contextMenu.min.css');
 
 var loadedModules = [
   require("./Plot"),
   require("./TableDisplay"),
   require("./EasyForm"),
   require("./TabView"),
   require("./GridView"),
-  require("./CyclingDisplayBox")
+  require("./CyclingDisplayBox"),
+  require("./HTMLPre").default
 ];
 
 for (var i in loadedModules) {

diff --git a/beakerx/js/src/extension.js b/beakerx/js/src/extension.js
@@ -36,7 +36,6 @@ __webpack_public_path__ = document.querySelector('body').getAttribute('data-base
 require('./../src/shared/style/beakerx.scss');
 require('./../src/plot/bko-combinedplot.css');
 require('./../src/plot/bko-plot.css');
-require('jquery-contextmenu/dist/jquery.contextMenu.min.css');
 
 define([
   'services/config',

diff --git a/beakerx/js/src/plot/bko-plot.css b/beakerx/js/src/plot/bko-plot.css
@@ -14,6 +14,8 @@
  *  limitations under the License.
  */
 
+@import "~@phosphor/widgets/style/menu.css";
+
 .plot-plotcontainer {
   background-color: #FEFEFE;
   position: relative;

diff --git a/beakerx/js/src/plot/combinedPlotScope.js b/beakerx/js/src/plot/combinedPlotScope.js
@@ -23,7 +23,6 @@ define([
   './combinedPlotFormatter',
   './../shared/bkUtils',
   './chartExtender',
-  'jquery-contextmenu',
   './plotScope'
 ], function(
   _,
@@ -34,7 +33,6 @@ define([
   combinedPlotFormatter,
   bkUtils,
   bkoChartExtender,
-  contextMenu,
   PlotScope
 ) {
 
@@ -256,6 +254,10 @@ define([
     );
   };
 
+  CombinedPlotScope.prototype.doDestroy = function() {
+    this.contextMenu && this.contextMenu.destroy();
+  };
+
   CombinedPlotScope.prototype.init = function() {
     var self = this;
     self.canvas = self.element.find("canvas")[0];
@@ -264,12 +266,8 @@ define([
     self.id = 'bko-plot-' + bkUtils.generateId(6);
     self.element.find('.combplot-plotcontainer').attr('id', self.id);
     self.saveAsMenuContainer = $('#' + self.id);
-    $.contextMenu({
-      selector: '#' + self.id,
-      zIndex: 3,
-      items: plotUtils.getSavePlotAsContextMenuItems(self),
-      trigger: 'none'
-    });
+    var ContextMenu = require('./contextMenu/plotContextMenu').default;
+    self.contextMenu = new ContextMenu(self);
 
     self.standardizeData();
     self.preparePlotModels();

diff --git a/beakerx/js/src/plot/contextMenu/createSaveAsMenuItems.ts b/beakerx/js/src/plot/contextMenu/createSaveAsMenuItems.ts
@@ -0,0 +1,46 @@
+/*
+ *  Copyright 2017 TWO SIGMA OPEN SOURCE, LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import MenuItem from '../../shared/interfaces/contextMenuItemInterface';
+
+export default function createSaveAsMenuItems(scope: any): MenuItem[] {
+  const selector = `#${scope.id}`;
+
+  return [
+    {
+      id: `beakerx:saveAsSvg:${scope.id}`,
+      title: 'Save as SVG',
+      action: () => scope.saveAsSvg(),
+      selector
+    },
+    {
+      id: `beakerx:saveAsPng:${scope.id}`,
+      title: 'Save as PNG',
+      action: () => scope.saveAsPng(),
+      selector
+    },
+    {
+      id: `beakerx:saveAsHighDpiPng:${scope.id}`,
+      title: 'Save as PNG at high DPI...',
+      items: [2,3,4,5].map((scale) => ({
+        id: `beakerx:saveAsHighDpiPng:${scope.id}:${scale}`,
+        title: scale + 'x',
+        action: () => scope.saveAsPng(scale)
+      })),
+      selector
+    }
+  ];
+}
diff --git a/beakerx/js/src/plot/contextMenu/plotContextMenu.ts b/beakerx/js/src/plot/contextMenu/plotContextMenu.ts
@@ -0,0 +1,32 @@
+/*
+ *  Copyright 2017 TWO SIGMA OPEN SOURCE, LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import createSaveAsMenuItems from './createSaveAsMenuItems';
+import BkoContextMenu from '../../contextMenu/BkoContextMenu';
+
+export default class PlotContextMenu extends BkoContextMenu {
+  constructor(scope: any) {
+    super(scope);
+  }
+
+  protected buildMenu(): void {
+    this.inLab ? this.buildLabMenu() : this.buildBkoMenu();
+
+    const menuItems = createSaveAsMenuItems(this.scope);
+    this.createItems(menuItems, this.contextMenu);
+    this.bindEvents();
+  }
+}