#6674 use phosphor datagrid to display TableDisplay data

js/notebook/package.json

@@ -43,6 +43,7 @@
     "webpack-merge": "^4.1.0"
   },
   "dependencies": {
+    "@phosphor/datagrid": "^0.1.5",
     "@phosphor/widgets": "^1.5.0",
     "big.js": "^3.1.3",
     "bootstrap-sass": "^3.3.7",

js/notebook/src/TableDisplay.js

@@ -19,6 +19,7 @@ var _ = require('underscore');
 var $ = require('jquery');
 
 var TableScope = require('./tableDisplay/tableScope');
+var DataGridScope = require('./tableDisplay/dataGrid').DataGridScope;
 
 require('datatables.net-dt/css/jquery.dataTables.css');
 require('datatables.net-colreorder-dt/css/colReorder.dataTables.css');
@@ -100,6 +101,16 @@ var TableDisplayView = widgets.DOMWidgetView.extend({
     this._currentScope.run();
     this._currentScope.initColumLimitModal();
     this._currentScope.setWidgetView(this);
+
+    // For testing keep all tables rendered
+    var grid = new DataGridScope({
+      element: this.el,
+      data: data,
+      widgetModel: this.model,
+      widgetView: this
+    });
+
+    grid.render();
   },
 
   showWarning: function(data) {

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

@@ -0,0 +1,207 @@
+/*
+ *  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 * as moment from 'moment-timezone/builds/moment-timezone-with-data';
+import * as _ from 'underscore';
+import { isDoubleWithPrecision, getDoublePrecisionByType } from './dataTypes';
+import { DataGridHelpers } from './dataGridHelpers';
+
+const bkUtils = require('../../shared/bkUtils');
+const tableConsts = require('../consts');
+
+interface IFormatterOptions {
+  stringFormatForColumn?: any,
+  stringFormatForType?: any,
+  formatForTimes?: any,
+  timeStrings?: any,
+  timeZone?: any,
+  columnNames?: string[]
+}
+
+export class DataFormatter {
+  stringFormatForColumn: any;
+  stringFormatForType: any;
+  formatForTimes: any;
+  timeStrings: any;
+  timeZone: any;
+  columnNames: string[];
+
+  constructor(options: IFormatterOptions) {
+    this.stringFormatForColumn = options.stringFormatForColumn || {};
+    this.stringFormatForType = options.stringFormatForType || {};
+    this.formatForTimes = options.formatForTimes || {};
+    this.timeStrings = options.formatForTimes;
+    this.timeZone = options.timeZone;
+    this.columnNames = options.columnNames || [];
+
+    this.handleNull = this.handleNull.bind(this);
+    this.value = this.value.bind(this);
+    this.string = this.string.bind(this);
+    this.integer = this.integer.bind(this);
+    this.formattedInteger = this.formattedInteger.bind(this);
+    this.double = this.double.bind(this);
+    this.doubleWithPrecission = this.doubleWithPrecission.bind(this);
+    this.exponential_5 = this.exponential_5.bind(this);
+    this.exponential_15 = this.exponential_15.bind(this);
+    this.datetime = this.datetime.bind(this);
+    this.boolean = this.boolean.bind(this);
+    this.html = this.html.bind(this);
+  }
+
+  getFormatFnByType(displayType: string|number) {
+    if (isDoubleWithPrecision(displayType)) {
+      return this.doubleWithPrecission(getDoublePrecisionByType(displayType));
+    }
+
+    switch (displayType) {
+      case 1:
+        return this.handleNull(this.integer);
+      case 2:
+        return this.handleNull(this.formattedInteger);
+      case 3:
+        return this.handleNull(this.double);
+      case 6:
+        return this.handleNull(this.exponential_5);
+      case 7:
+        return this.handleNull(this.exponential_15);
+      case 8:
+        return this.datetime;
+      case 9:
+        return this.boolean;
+      case 10:
+        return this.html;
+
+      default:
+        return this.string;
+    }
+  }
+
+  private isNull(value: any) {
+    return value === undefined || value === '' || value === 'null' || value === null;
+  }
+
+  private handleNull(formatFn: Function) {
+    return (value: any, row: number, column: number) => {
+      if (this.isNull(value)) {
+        return value;
+      }
+
+      return formatFn(value, row, column);
+    }
+  }
+
+  private value(value: any, row: number, column: number) {
+    let columnName = this.columnNames[column];
+
+    return this.stringFormatForColumn[columnName].values[columnName][row];
+  };
+
+  private string(value: any, row: number, column: number) {
+    const objectValue = _.isObject(value);
+    const stringFormatForColumn = this.stringFormatForColumn[this.columnNames[column]];
+    let formattedValue = value;
+
+    if (!objectValue && stringFormatForColumn && stringFormatForColumn.type === 'value') {
+      return this.value;
+    }
+
+    if (objectValue) {
+      formattedValue = value.type === 'Date' ?
+        moment(value.timestamp).format('YYYYMMDD HH:mm:ss.SSS ZZ') :
+        JSON.stringify(value);
+    } else if (_.isString(value)) {
+      const escapedText = DataGridHelpers.escapeHTML(value);
+      const limitedText = DataGridHelpers.truncateString(escapedText);
+
+      formattedValue = limitedText;
+    }
+
+    return formattedValue;
+  }
+
+  private integer(value: any) {
+    return parseInt(value);
+  }
+
+  private formattedInteger(value: any) {
+    let x = parseInt(value);
+
+    if (!isNaN(x)) {
+      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    }
+
+    return x;
+  }
+
+  private double(value: any, row: number, column: number) {
+    let doubleValue = parseFloat(value);
+    let colFormat = this.stringFormatForColumn[this.columnNames[column]];
+    let typeFormat = this.stringFormatForType.double;
+    let format = colFormat && colFormat.type === 'decimal' ? colFormat : typeFormat;
+
+    if (!format || format.type !== 'decimal') {
+      return doubleValue;
+    }
+
+    let precision = doubleValue.toString().split('.')[1];
+
+    if (precision && precision.length >= format.maxDecimals) {
+      return doubleValue.toFixed(format.maxDecimals);
+    }
+
+    return doubleValue.toFixed(format.minDecimals);
+  }
+
+  private doubleWithPrecission(precision: any) {
+    return this.handleNull((value) => {
+      return parseFloat(value).toFixed(precision);
+    });
+  }
+
+  private exponential_5(value: any) {
+    return parseFloat(value).toExponential(5);
+  }
+
+  private exponential_15(value: any) {
+    return parseFloat(value).toExponential(15);
+  }
+
+  private datetime(value: any, row: number) {
+    if (this.timeStrings) {
+      return this.timeStrings[row];
+    }
+
+    let format = _.isEmpty(this.formatForTimes) ?
+      tableConsts.TIME_UNIT_FORMATS.DATETIME.format :
+      tableConsts.TIME_UNIT_FORMATS[this.formatForTimes].format;
+
+    if (_.isObject(value) && value.type === 'Date') {
+      return bkUtils.formatTimestamp(value.timestamp, this.timeZone, format);
+    }
+
+    let milli = value * 1000;
+
+    return bkUtils.formatTimestamp(milli, this.timeZone, format);
+  }
+
+  private boolean(value: any) {
+    return this.isNull(value) ? 'false' : 'true';
+  }
+
+  private html(value: any) {
+    return value;
+  }
+}

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

@@ -0,0 +1,65 @@
+/*
+ *  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 { StackedPanel, Widget } from '@phosphor/widgets';
+import { DataGrid } from '@phosphor/datagrid';
+import IDataGridScopeOptions from "./IDataGridScopeOptions";
+import { TableDataModel } from './TableDataModel';
+
+import './dataGrid.css';
+
+export class DataGridScope {
+  dataGrid: DataGrid;
+
+  element: HTMLElement;
+
+  data: any;
+
+  greenStripeStyle: DataGrid.IStyle = {
+    ...DataGrid.defaultStyle,
+    voidColor: '#ffffff',
+    headerBackgroundColor: '#E6E6E6',
+    rowBackgroundColor: i => i % 2 === 0 ? '#f9f9f9' : ''
+  };
+
+  constructor(options: IDataGridScopeOptions) {
+    this.element = options.element;
+    this.data = options.data;
+    this.dataGrid = new DataGrid({
+      style: this.greenStripeStyle
+    });
+
+    this.dataGrid.model = new TableDataModel(this.data);
+  }
+
+  render(): void {
+    let wrapper = this.createWrapper(this.dataGrid, 'example');
+    Widget.attach(wrapper, this.element);
+  }
+
+  createWrapper(content: Widget, title: string): Widget {
+    let wrapper = new StackedPanel();
+    wrapper.addClass('content-wrapper');
+    wrapper.addWidget(content);
+    wrapper.title.label = title;
+
+    return wrapper;
+  }
+
+  doDestroy() {
+    this.dataGrid.dispose();
+  }
+}

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

@@ -0,0 +1,22 @@
+/*
+ *  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 {DataGrid} from "@phosphor/datagrid";
+
+export default interface IDataGridScopeOptions extends DataGrid.IOptions {
+  element: HTMLElement
+  data: any
+}

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

@@ -0,0 +1,50 @@
+/*
+ *  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.
+ */
+
+export default interface IDataModelOptions {
+  formatForTimes: any;
+  timeStrings: any;
+
+  alignmentForColumn: {},
+  alignmentForType: {},
+  cellHighlighters: Function[],
+  columnNames: string[],
+  columnOrder: number[],
+  columnsFrozen: {},
+  columnsFrozenRight: {},
+  columnsVisible: {},
+  contextMenuItems: object[],
+  contextMenuTags: {},
+  dataFontSize: number|null,
+  doubleClickTag: string|null,
+  fontColor: string[],
+  hasDoubleClickAction: boolean,
+  hasIndex: boolean,
+  headerFontSize: number|null,
+  headersVertical: boolean,
+  rendererForColumn: {},
+  rendererForType: {},
+  stringFormatForColumn: {},
+  stringFormatForTimes: string|null,
+  stringFormatForType: {},
+  subtype?: string,
+  timeZone?: string,
+  tooManyRows: boolean,
+  tooltips: string[],
+  type: string,
+  types: string[],
+  values: any,
+}