fix column width rendering race condition, initialize with column_widths, update column widths when base sizes change

Author: mbektas

src/core/datagrid.ts

@@ -1081,7 +1081,7 @@ class DataGrid extends Widget {
    *
    * @returns The column count for the specified region.
    */
-  columnCount(region: DataModel.RowRegion): number {
+  columnCount(region: DataModel.ColumnRegion): number {
     let count: number;
     if (region === 'body') {
       count = this._columnSections.count;

src/core/viewbasedjsonmodel.ts

@@ -237,7 +237,7 @@ export class ViewBasedJSONModel extends MutableDataModel {
     return index;
   }
 
-  public columnIndexToName(index: number, region: DataModel.CellRegion): string {
+  public columnIndexToName(index: number, region: DataModel.ColumnRegion): string {
     let schema = this.dataset.schema;
     if (region == 'row-header') {
       return schema.primaryKey[index];

src/datagrid.ts

@@ -265,7 +265,7 @@ function unpack_data(
 }
 
 export
-  class DataGridView extends DOMWidgetView {
+class DataGridView extends DOMWidgetView {
   _createElement(tagName: string) {
     this.pWidget = new JupyterPhosphorPanelWidget({ view: this });
     // initialize to light theme unless set earlier
@@ -284,18 +284,23 @@ export
   render() {
     this.el.classList.add('datagrid-container');
 
-    this.grid = new FeatherGrid();
-    this.grid.baseRowSize = this.model.get('base_row_size');
-    this.grid.baseColumnSize = this.model.get('base_column_size');
-    this.grid.baseRowHeaderSize = this.model.get('base_row_header_size');
-    this.grid.baseColumnHeaderSize = this.model.get('base_column_header_size');
-    this.grid.headerVisibility = this.model.get('header_visibility');
-    this.grid.dataModel = this.model.data_model;
-    this.grid.selectionModel = this.model.selectionModel;
+    this.grid = new FeatherGrid({
+      defaultSizes: {
+        rowHeight: this.model.get('base_row_size'),
+        columnWidth: this.model.get('base_column_size'),
+        rowHeaderWidth: this.model.get('base_row_header_size'),
+        columnHeaderHeight: this.model.get('base_column_header_size')
+      },
+      headerVisibility: this.model.get('header_visibility')
+    });
+
+    this.grid.columnWidths = this.model.get('column_widths');
     this.grid.editable = this.model.get('editable');
     // this.default_renderer must be created after setting grid.isLightTheme
     // for proper color variable initialization
     this.grid.isLightTheme = this._isLightTheme;
+    this.grid.dataModel = this.model.data_model;
+    this.grid.selectionModel = this.model.selectionModel;
 
     this.grid.cellClicked.connect((sender: FeatherGrid, event: FeatherGrid.ICellClickedEvent) => {
       if (this.model.comm) {

src/feathergrid.ts

@@ -151,11 +151,19 @@ class FeatherGridMouseHandler extends BasicMouseHandler {
 
 export
 class FeatherGrid extends Widget {
-    constructor() {
+    constructor(options: DataGrid.IOptions = {}) {
         super();
         this.addClass('ipydatagrid-widget');
 
-        this._createGrid();
+        if (options.defaultSizes) {
+          this._baseRowSize = options.defaultSizes.rowHeight || this._baseRowSize;
+          this._baseColumnSize = options.defaultSizes.columnWidth || this._baseColumnSize;
+          this._baseRowHeaderSize = options.defaultSizes.rowHeaderWidth || this._baseRowHeaderSize;
+          this._baseColumnHeaderSize = options.defaultSizes.columnHeaderHeight || this._baseColumnHeaderSize;
+        }
+        this._headerVisibility = options.headerVisibility || this._headerVisibility;
+
+        this._createGrid(options);
 
         this._defaultRenderer = new TextRenderer({
           font: '12px sans-serif',
@@ -235,6 +243,7 @@ class FeatherGrid extends Widget {
       }
 
       this.grid.defaultSizes = { ...this.grid.defaultSizes, columnWidth: size };
+      this._updateColumnWidths();
     }
 
     get baseColumnSize(): number {
@@ -263,6 +272,7 @@ class FeatherGrid extends Widget {
       }
 
       this.grid.defaultSizes = { ...this.grid.defaultSizes, rowHeaderWidth: size };
+      this._updateColumnWidths();
     }
 
     get baseRowHeaderSize(): number {
@@ -354,15 +364,17 @@ class FeatherGrid extends Widget {
       return this.grid.cellRenderers;
     }
 
-    private _createGrid() {
+    private _createGrid(options: DataGrid.IOptions = {}) {
       this.grid = new DataGrid({
-        defaultSizes: {
-          rowHeight: this._baseRowSize,
-          columnWidth: this._baseColumnSize,
-          rowHeaderWidth: this._baseRowHeaderSize,
-          columnHeaderHeight: this._baseColumnHeaderSize
-        },
-        headerVisibility: this._headerVisibility
+        ...options, ...{
+          defaultSizes: {
+            rowHeight: this._baseRowSize,
+            columnWidth: this._baseColumnSize,
+            rowHeaderWidth: this._baseRowHeaderSize,
+            columnHeaderHeight: this._baseColumnHeaderSize
+          },
+          headerVisibility: this._headerVisibility
+        }
       });
 
       MessageLoop.installMessageHook(this.grid.viewport, this);
@@ -688,44 +700,40 @@ class FeatherGrid extends Widget {
     private _updateGridRenderers() {
       this.grid.cellRenderers.update({ 'body': this._rendererResolver.bind(this) });
     }
-  
-    /**
-     * This function resets the column sizes to the base column size and functions
-     * identically to phosphor's resetColumns() but does not call _repaintOverlay
-     * or _repaintContent in the process.
-     */
-    private _resetAllColumnWidths() {
-      let column_base_size = this._baseColumnSize;
-  
-      // Resizing columns from body region
-      for (let i = 0; i < this.grid.columnCount('body'); i++) {
-        this.grid.resizeColumn('body', i, column_base_size)
-      }
-  
-      // Resizing columns from row header region
-      for (let i = 0; i < this.grid.columnCount('column-header'); i++) {
-        this.grid.resizeColumn('row-header', i, column_base_size)
-      }
-    }
-  
+
     private _updateColumnWidths() {
-      //@ts-ignore added so we don't have to add basicmousehandler.ts fork
+      const columnWidths = this._columnWidths;
+      // @ts-ignore added so we don't have to add basicmousehandler.ts fork
       let mouseHandler = this.grid.mouseHandler as FeatherGridMouseHandler;
-  
+
       // Do not want this callback to be executed when user resizes using the mouse
-      if (!mouseHandler.mouseIsDown) {
-        let column_widths_dict = this._columnWidths;
-  
-        this._resetAllColumnWidths();
-  
-        for (let key in column_widths_dict) {
-          let index = this.dataModel.columnNameToIndex(key);
-          let region = this.dataModel.columnNameToRegion(key);
-          this.grid.resizeColumn(region, index, column_widths_dict[key]);
+      if (mouseHandler.mouseIsDown) {
+        return;
+      }
+
+      // Resizing columns from row header region
+      if (this._headerVisibility === 'row' || this._headerVisibility === 'all') {
+        const baseRowHeaderSize = this._baseRowHeaderSize;
+        const rowHeaderColCount = this.grid.columnCount('row-header');
+        for (let i = 0; i < rowHeaderColCount; i++) {
+          const colName = this.dataModel.columnIndexToName(i, 'row-header');
+          const colSize = columnWidths.hasOwnProperty(colName) ? columnWidths[colName] : baseRowHeaderSize;
+          
+          this.grid.resizeColumn('row-header', i, colSize);
         }
       }
+
+      // Resizing columns from body region
+      const baseColumnSize = this._baseColumnSize;
+      const bodyColCount = this.grid.columnCount('body');
+      for (let i = 0; i < bodyColCount; i++) {
+        const colName = this.dataModel.columnIndexToName(i, 'body');
+        const colSize = columnWidths.hasOwnProperty(colName) ? columnWidths[colName] : baseColumnSize;
+        
+        this.grid.resizeColumn('body', i, colSize);
+      }
     }
-  
+
     private _updateHeaderRenderer() {
       const headerRenderer = new HeaderRenderer({
         textOptions: {