#6674 refactor names and dependencies

js/notebook/src/tableDisplay/dataGrid/BeakerxDataGrid.ts

@@ -16,21 +16,21 @@
 
 import { DataGrid } from "@phosphor/datagrid";
 import { ITriggerOptions } from "./headerMenu/HeaderMenu";
-import { TableDataModel } from "./TableDataModel";
+import { BeakerxDataGridModel } from "./BeakerxDataGridModel";
 import { Widget } from "@phosphor/widgets";
 import { Signal } from '@phosphor/signaling';
 import { ICellData } from "./interface/ICell";
 import { CellRendererFactory } from "./cell/CellRendererFactory";
 import DataGridColumn, { COLUMN_TYPES } from "./column/DataGridColumn";
-import IDataModelOptions from "./interface/IDataModelOptions";
+import IDataModelState from "./interface/IDataModelState";
 
 interface IColumns {
   index: DataGridColumn[],
   body: DataGridColumn[]
 }
 
 export class BeakerxDataGrid extends DataGrid {
-  model: TableDataModel;
+  model: BeakerxDataGridModel;
   columnHeaderSections: any;
   rowHeaderSections: any;
   columnSections: any;
@@ -40,7 +40,7 @@ export class BeakerxDataGrid extends DataGrid {
   columns: IColumns = { index: [], body: [] };
   headerCellHovered = new Signal<this, ICellData|null>(this);
 
-  constructor(options, modelOptions: IDataModelOptions) {
+  constructor(options: DataGrid.IOptions, modelOptions: IDataModelState) {
     super(options);
 
     //@todo this is hack to use private properties
@@ -85,8 +85,8 @@ export class BeakerxDataGrid extends DataGrid {
     return null;
   }
 
-  private addModel(modelOptions: IDataModelOptions) {
-    this.model = new TableDataModel(modelOptions);
+  private addModel(modelState: IDataModelState) {
+    this.model = new BeakerxDataGridModel(modelState);
   }
 
   private addColumns() {
@@ -95,7 +95,7 @@ export class BeakerxDataGrid extends DataGrid {
   }
 
   private addBodyColumns() {
-    this.model.columnNames.forEach((columnName, index) => {
+    this.model.columnNames.forEach((name, index) => {
       let menuOptions: ITriggerOptions = {
         x: this.getColumnOffset(index),
         y: 0,
@@ -105,6 +105,7 @@ export class BeakerxDataGrid extends DataGrid {
 
       let column = new DataGridColumn({
         index,
+        name,
         menuOptions,
         type: COLUMN_TYPES.body
       }, this);
@@ -120,6 +121,7 @@ export class BeakerxDataGrid extends DataGrid {
 
     let column = new DataGridColumn({
       index: 0,
+      name: 'index',
       menuOptions: { x: 0, y: 0, width: this.headerHeight, height: this.headerHeight },
       type: COLUMN_TYPES.index
     }, this);

js/notebook/src/tableDisplay/dataGrid/TableDataModel.ts → js/notebook/src/tableDisplay/dataGrid/BeakerxDataGridModel.ts

@@ -19,27 +19,27 @@ import { getDisplayType, ALL_TYPES } from './dataTypes';
 import { DataFormatter } from './DataFormatter';
 import { COLUMN_TYPES } from "./column/DataGridColumn";
 import { IColumn } from "./interface/IColumn";
-import IDataModelOptions from './interface/IDataModelOptions';
+import IDataModelState from './interface/IDataModelState';
 
-export class TableDataModel extends DataModel {
+export class BeakerxDataGridModel extends DataModel {
   columnNames: string[];
   dataFormatter: DataFormatter;
 
   static DEFAULT_INDEX_COLUMN_TYPE = ALL_TYPES[1]; // integer
 
   private _data: any;
-  private _options: IDataModelOptions;
+  private _state: IDataModelState;
   private _columnCount: number;
   private _rowCount: number;
 
-  constructor(options: IDataModelOptions) {
+  constructor(state: IDataModelState) {
     super();
 
-    this.columnNames = options.columnNames;
-    this.dataFormatter = new DataFormatter(options);
+    this.columnNames = state.columnNames;
+    this.dataFormatter = new DataFormatter(state);
 
-    this._options = options;
-    this._data = options.values;
+    this._state = state;
+    this._data = state.values;
     this._columnCount = this.columnNames.length || 0;
     this._rowCount = this._data.length;
   }
@@ -67,7 +67,7 @@ export class TableDataModel extends DataModel {
 
     return this.formatData(
       this._data[row][column],
-      this._options.types[column] || 'string',
+      this._state.types[column] || 'string',
       row,
       column
     );
@@ -77,18 +77,25 @@ export class TableDataModel extends DataModel {
     //@todo check if raw type no is required, keep only display type
     const displayType = getDisplayType(
       typeName,
-      this._options.stringFormatForType,
-      this._options.stringFormatForColumn[this.columnNames[column]]
+      this._state.stringFormatForType,
+      this._state.stringFormatForColumn[this.columnNames[column]]
     );
 
     return this.dataFormatter.getFormatFnByType(displayType)(data, row, column);
   }
 
   getColumnDataType(column: IColumn) {
     if (column.type === COLUMN_TYPES.index) {
-      return TableDataModel.DEFAULT_INDEX_COLUMN_TYPE;
+      return BeakerxDataGridModel.DEFAULT_INDEX_COLUMN_TYPE;
     }
 
-    return this._options.types[column.index];
+    return this._state.types[column.index];
+  }
+
+  getAlignmentConfig(): { alignmentForColumn: {}, alignmentForType: {} } {
+    return {
+      alignmentForColumn: this._state.alignmentForColumn || {},
+      alignmentForType: this._state.alignmentForType || {},
+    }
   }
 }

js/notebook/src/tableDisplay/dataGrid/DataGridScope.ts

@@ -22,13 +22,16 @@ import IDataGridScopeOptions from "./interface/IDataGridScopeOptions";
 export class DataGridScope {
   private dataGrid: BeakerxDataGrid;
   private element: HTMLElement;
+  private tableDisplayModel: any;
+  private tableDisplayView: any;
 
   constructor(options: IDataGridScopeOptions) {
     this.element = options.element;
+    this.tableDisplayModel = options.widgetModel;
+    this.tableDisplayView = options.widgetView;
     this.dataGrid = new BeakerxDataGrid(
       {
-        style: silverStripeStyle,
-        height: 600
+        style: silverStripeStyle
       },
       options.data
     );

js/notebook/src/tableDisplay/dataGrid/cell/CellRendererFactory.ts

@@ -29,10 +29,10 @@ export class CellRendererFactory {
     let self = this;
 
     return new TextRenderer({
-      horizontalAlignment(config: CellRenderer.ICellConfig) {
+      horizontalAlignment: (config: CellRenderer.ICellConfig) => {
         let column = self.dataGrid.getColumn(config.column, config.region);
 
-        return column ? column.state.horizontalAlignment : DEFAULT_ALIGNMENT;
+        return column ? column.getAlignment() : DEFAULT_ALIGNMENT;
       }
     });
   }

js/notebook/src/tableDisplay/dataGrid/column/DataGridColumn.ts

@@ -19,7 +19,7 @@ import IndexMenu from "../headerMenu/IndexMenu";
 import { BeakerxDataGrid } from "../BeakerxDataGrid";
 import { IColumnOptions} from "../interface/IColumn";
 import { ICellData } from "../interface/ICell";
-import { getAlignmentByType } from "./columnAlignment";
+import {ALIGNMENTS_BY_CHAR, getAlignmentByChar, getAlignmentByType} from "./columnAlignment";
 import { TextRenderer} from "@phosphor/datagrid";
 import { ALL_TYPES, getTypeByName } from "../dataTypes";
 
@@ -35,35 +35,47 @@ interface IColumnState {
 
 export default class DataGridColumn {
   index: number;
+  name: string;
   type: COLUMN_TYPES;
   dataType: ALL_TYPES;
   menu: ColumnMenu|IndexMenu;
   dataGrid: BeakerxDataGrid;
-  state: IColumnState;
+
+  private state: IColumnState;
 
   constructor(options: IColumnOptions, dataGrid: BeakerxDataGrid) {
     this.index = options.index;
+    this.name = options.name;
     this.type = options.type;
     this.dataGrid = dataGrid;
     this.dataType = this.getDataType();
     this.state = {
       triggerShown: false,
-      horizontalAlignment: getAlignmentByType(this.dataType)
+      horizontalAlignment: this.getInitialAlignment()
     };
 
     this.handleHeaderCellHovered = this.handleHeaderCellHovered.bind(this);
     this.createMenu(options.menuOptions);
     this.connectToHeaderCellHovered();
   }
 
+  setState(state) {
+    this.state = {
+      ...this.state,
+      ...state,
+    };
+
+    this.dataGrid.repaint();
+  }
+
   createMenu(menuOptions): void {
     if (this.type === COLUMN_TYPES.index) {
-      this.menu = new IndexMenu(this.index, this.dataGrid, menuOptions);
+      this.menu = new IndexMenu(this, menuOptions);
 
       return;
     }
 
-    this.menu = new ColumnMenu(this.index, this.dataGrid, menuOptions);
+    this.menu = new ColumnMenu(this, menuOptions);
   }
 
   destroy() {
@@ -96,4 +108,28 @@ export default class DataGridColumn {
     }));
   }
 
+  getInitialAlignment() {
+    let config = this.dataGrid.model.getAlignmentConfig();
+    let alignmentForType = config.alignmentForType[ALL_TYPES[this.dataType]];
+    let alignmentForColumn = config.alignmentForColumn[this.name];
+
+    if (alignmentForType) {
+      return getAlignmentByChar(alignmentForType);
+    }
+
+    if (alignmentForColumn) {
+      return getAlignmentByChar(alignmentForColumn);
+    }
+
+    return getAlignmentByType(this.dataType);
+  }
+
+  getAlignment() {
+    return this.state.horizontalAlignment;
+  }
+
+  setAlignment(horizontalAlignment: TextRenderer.HorizontalAlignment) {
+    this.setState({ horizontalAlignment });
+  }
+
 }

js/notebook/src/tableDisplay/dataGrid/column/columnAlignment.ts

@@ -17,9 +17,9 @@
 import { ALL_TYPES } from "../dataTypes";
 import { TextRenderer } from "@phosphor/datagrid";
 
-const LEFT: TextRenderer.HorizontalAlignment = 'left';
-const RIGHT: TextRenderer.HorizontalAlignment = 'right';
-const CENTER: TextRenderer.HorizontalAlignment = 'center';
+export const LEFT: TextRenderer.HorizontalAlignment = 'left';
+export const RIGHT: TextRenderer.HorizontalAlignment = 'right';
+export const CENTER: TextRenderer.HorizontalAlignment = 'center';
 
 export const DEFAULT_ALIGNMENT = LEFT;
 
@@ -29,8 +29,16 @@ export const ALIGNMENTS_BY_TYPE = {
   'double': RIGHT
 };
 
-export const getAlignmentByType = (type: number): TextRenderer.HorizontalAlignment => {
-  let alignment = ALIGNMENTS_BY_TYPE[ALL_TYPES[type]];
-
-  return alignment || DEFAULT_ALIGNMENT;
+export const ALIGNMENTS_BY_CHAR = {
+  'C': CENTER,
+  'R': RIGHT,
+  'L': LEFT
 };
+
+export const getAlignmentByType =
+  (type: number): TextRenderer.HorizontalAlignment =>
+    ALIGNMENTS_BY_TYPE[ALL_TYPES[type]] || DEFAULT_ALIGNMENT;
+
+export const getAlignmentByChar =
+  (char: string): TextRenderer.HorizontalAlignment =>
+    ALIGNMENTS_BY_CHAR[char] || DEFAULT_ALIGNMENT;

js/notebook/src/tableDisplay/dataGrid/headerMenu/BkoMenu.ts

@@ -0,0 +1,81 @@
+/*
+ *  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 { Menu } from '@phosphor/widgets'
+import { Message } from '@phosphor/messaging'
+import $ from 'jquery';
+
+export default class BkoMenu extends Menu {
+  keepOpen: boolean|undefined;
+  trigger: HTMLElement;
+
+  triggerActiveItem(): void {
+    if (!this.keepOpen) {
+      super.triggerActiveItem();
+      return;
+    }
+
+    if (!this.isAttached) {
+      return;
+    }
+
+    const item = this.activeItem;
+    if (!item) {
+      return;
+    }
+
+    const command = item.command, args = item.args;
+    if (this.commands.isEnabled(command, args)) {
+      this.commands.execute(command, args);
+    }
+  }
+
+  protected onBeforeAttach(msg: Message): void {
+    super.onBeforeAttach(msg);
+
+    if (this.parentMenu && this.parentMenu.activeItem && this.parentMenu.activeItem.type === 'submenu') {
+      this.hide();
+    }
+  }
+
+  protected onActivateRequest(msg: Message) {
+    super.onActivateRequest(msg);
+
+    if (!this.parentMenu || !this.parentMenu.activeItem || this.parentMenu.activeItem.type !== 'submenu') {
+      return;
+    }
+
+    const itemNode = this.parentMenu.contentNode.children[this.parentMenu.activeIndex];
+    const itemOffset = $(itemNode).offset().top;
+    this.node.style.top = `${itemOffset}px`;
+
+    this.show();
+    const rect = this.node.getBoundingClientRect();
+    const clientHeight = window.innerHeight || document.documentElement.clientHeight;
+
+    if (rect.bottom > clientHeight) {
+      this.node.style.top = `${itemOffset - (rect.bottom - clientHeight)}px`;
+    }
+  }
+
+  close() {
+    super.close.call(this);
+
+    setTimeout(() => {
+      this.trigger && this.trigger.classList.remove('opened');
+    });
+  }
+}