#7443 remove DataGrid memory leaks (#7476)

js/notebook/src/TableDisplay.ts

@@ -0,0 +1,115 @@
+/*
+ *  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 widgets from './widgets';
+import { DataGridScope } from './tableDisplay/dataGrid';
+
+import './tableDisplay/css/datatables.scss';
+
+class TableDisplayModel extends widgets.DOMWidgetModel {
+  defaults() {
+    return {
+      ...super.defaults(),
+      _model_name: 'TableDisplayModel',
+      _view_name: 'TableDisplayView',
+      _model_module: 'beakerx',
+      _view_module: 'beakerx',
+      _model_module_version: BEAKERX_MODULE_VERSION,
+      _view_module_version: BEAKERX_MODULE_VERSION
+    };
+  }
+}
+
+// Custom View. Renders the widget model.
+class TableDisplayView extends widgets.DOMWidgetView {
+  private _currentScope: DataGridScope;
+
+  render() {
+    this._currentScope = null;
+    this.$el.addClass('beaker-table-display');
+
+    this.displayed.then(() => {
+      const tableModel = this.model.get('model');
+
+      if (tableModel.tooManyRows) {
+        this.showWarning(tableModel);
+      }
+
+      this.initDataGridTable(tableModel);
+
+      this.listenTo(this.model, 'beakerx-tabSelected', () => {
+        this._currentScope && this._currentScope.setInitialSize();
+      });
+
+      this.listenTo(this.model, 'change:updateData', this.handleUpdateData);
+      this.listenTo(this.model, 'change:model', this.handleModellUpdate);
+    });
+  }
+
+  handleModellUpdate() {
+    this._currentScope.updateModelData(this.model.get('model'));
+    this._currentScope.doResetAll();
+  }
+
+  handleUpdateData() {
+    const change = this.model.get('updateData');
+    const currentModel = this.model.get('model');
+
+    this.model.set('model', { ...currentModel, ...change }, { updated_view: this });
+    this.handleModellUpdate();
+  }
+
+  showWarning(data) {
+    const rowLength = data.rowLength;
+    const rowLimit = data.rowLimit;
+    const modal = document.createElement('div');
+
+    modal.setAttribute('id', this.wrapperId);
+    modal.innerHTML = `<p class="ansired">Note: table is too big to display.
+      The limit is ${rowLimit} rows, but this table has ${rowLength} rows. 
+      The first 10000 rows are displayed as a preview.</p>`;
+
+    this.el.appendChild(modal);
+  }
+
+  initDataGridTable(data) {
+    this._currentScope = new DataGridScope({
+      element: this.el,
+      data: data,
+      widgetModel: this.model,
+      widgetView: this
+    });
+
+    this._currentScope.render();
+  }
+
+  remove() {
+    this._currentScope && this._currentScope.doDestroy();
+
+    if (this.pWidget) {
+      this.pWidget.dispose();
+    }
+
+    setTimeout(() => { this._currentScope = null; });
+
+    return super.remove.call(this);
+  }
+}
+
+export default {
+  TableDisplayModel: TableDisplayModel,
+  TableDisplayView: TableDisplayView
+};

js/notebook/src/contextMenu/BkoContextMenu.ts

@@ -182,5 +182,9 @@ export default abstract class BkoContextMenu implements MenuInterface {
 
   unbind(): void {
     this.scope.element[0].removeEventListener('contextmenu', this.handleContextMenu);
+
+    setTimeout(() => {
+      this.scope = null;
+    });
   }
 }

js/notebook/src/index.js

@@ -28,11 +28,11 @@ module.exports = {};
 
 var loadedModules = [
   require("./Plot"),
-  require("./TableDisplay"),
   require("./EasyForm"),
   require("./TabView"),
   require("./GridView"),
   require("./CyclingDisplayBox"),
+  require("./TableDisplay").default,
   require("./SparkUI").default,
   require("./SparkStateProgress").default,
   require("./SparkConfiguration").default,

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

@@ -156,7 +156,7 @@ export class BeakerXDataGrid extends DataGrid {
   }
 
   resize(args?: any): void {
-    this.dataGridResize.resize();
+    this.dataGridResize && this.dataGridResize.resize();
   }
 
   setFocus(focus: boolean) {
@@ -186,10 +186,34 @@ export class BeakerXDataGrid extends DataGrid {
   }
 
   destroy() {
+    this.model && this.model.destroy();
     this.eventManager.destroy();
     this.columnManager.destroy();
+    this.columnPosition.destroy();
+    this.cellFocusManager.destroy();
+    this.cellManager.destroy();
+    this.cellSelectionManager.destroy();
+    this.cellTooltipManager.destroy();
+    this.highlighterManager.destroy();
+    this.dataGridResize.destroy();
+    this.rowManager.destroy();
+    this.dispose();
 
     Signal.disconnectAll(this);
+
+    setTimeout(() => {
+      this.cellSelectionManager = null;
+      this.cellTooltipManager = null;
+      this.highlighterManager = null;
+      this.cellFocusManager = null;
+      this.dataGridResize = null;
+      this.columnPosition = null;
+      this.columnManager = null;
+      this.eventManager = null;
+      this.cellManager = null;
+      this.rowManager = null;
+      this.store = null;
+    });
   }
 
   onAfterAttach(msg) {
@@ -243,14 +267,13 @@ export class BeakerXDataGrid extends DataGrid {
   }
 
   private addCellRenderers() {
-    let cellRendererFactory = new CellRendererFactory(this);
-    let defaultRenderer = cellRendererFactory.getRenderer();
-    let headerCellRenderer = cellRendererFactory.getHeaderRenderer();
+    let defaultRenderer = CellRendererFactory.getRenderer(this);
+    let headerCellRenderer = CellRendererFactory.getHeaderRenderer(this);
 
     this.cellRenderers.set(
       'body',
       { dataType: ALL_TYPES[ALL_TYPES.html] },
-      cellRendererFactory.getRenderer(ALL_TYPES.html)
+      CellRendererFactory.getRenderer(this, ALL_TYPES.html)
     );
     this.cellRenderers.set('body', {}, defaultRenderer);
     this.cellRenderers.set('column-header', {}, headerCellRenderer);
@@ -259,6 +282,6 @@ export class BeakerXDataGrid extends DataGrid {
   }
 
   private handleStateChanged() {
-    this.model.reset();
+    this.model && this.model.reset();
   }
 }

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

@@ -56,6 +56,10 @@ export class DataFormatter {
     this.html = this.html.bind(this);
   }
 
+  destroy(): void {
+    this.store = null;
+  }
+
   get stringFormatForColumn() {
     return selectStringFormatForColumn(this.store.state);
   }

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

@@ -52,6 +52,10 @@ export class DataGridResize {
     this.installMessageHook();
   }
 
+  destroy(): void {
+    this.dataGrid = null;
+  }
+
   setInitialSize(): void {
     this.setBaseRowSize();
     this.resizeHeader();
@@ -354,13 +358,13 @@ export class DataGridResize {
   }
 
   private viewportResizeMessageHook(handler, msg) {
-    if (handler !== this.dataGrid.viewport) {
+    if (!this.dataGrid || handler !== this.dataGrid.viewport) {
       return true;
     }
 
     if (msg.type === 'resize') {
       setTimeout(() => {
-        this.dataGrid['_syncViewport']();
+        this.dataGrid && this.dataGrid['_syncViewport']();
       });
     }
 

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

@@ -27,9 +27,9 @@ import BeakerXThemeHelper from "../../BeakerXThemeHelper";
 export class DataGridScope {
   contextMenu: DataGridContextMenu;
 
-  readonly dataGrid: BeakerXDataGrid;
-  readonly element: HTMLElement;
-  readonly store: BeakerXDataStore;
+  private element: HTMLElement;
+  private store: BeakerXDataStore;
+  private dataGrid: BeakerXDataGrid;
   private tableDisplayModel: any;
   private tableDisplayView: any;
 
@@ -61,9 +61,14 @@ export class DataGridScope {
     Widget.attach(this.dataGrid, this.element);
   }
 
-  doDestroy() {
+  doDestroy(): void {
     this.dataGrid.destroy();
     this.contextMenu.destroy();
+
+    setTimeout(() => {
+      this.dataGrid = null;
+      this.store = null;
+    });
   }
 
   updateModelData(newData) {
@@ -93,4 +98,8 @@ export class DataGridScope {
   initColumnLimitModal() {
     return new ColumnLimitModal(this.dataGrid, this.element);
   }
+
+  setInitialSize() {
+    this.dataGrid.setInitialSize();
+  }
 }