#7338 fix widget resizing with fixed width columns

twosigma · Jul 9, 2018 · 5fbda08 · 5fbda08
1 parent 7cfeb5e
commit 5fbda08
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/js/notebook/src/tableDisplay/dataGrid/DataGridResize.ts b/js/notebook/src/tableDisplay/dataGrid/DataGridResize.ts
@@ -28,9 +28,11 @@ import {DataGridHelpers} from "./dataGridHelpers";
 import {selectColumnWidth} from "./column/selectors";
 import getStringSize = DataGridHelpers.getStringSize;
 import {ALL_TYPES} from "./dataTypes";
+import throttle = DataGridHelpers.throttle;
 
 const DEFAULT_RESIZE_SECTION_SIZE_IN_PX = 6;
 const DEFAULT_ROW_PADDING = 4;
+const SCROLLBAR_WIDTH = 16;
 
 export class DataGridResize {
   dataGrid: BeakerXDataGrid;
@@ -49,6 +51,7 @@ export class DataGridResize {
     this.handleMouseMove = this.handleMouseMove.bind(this);
     this.handleMouseUp = this.handleMouseUp.bind(this);
     this.fillEmptySpaceResizeFn = this.fillEmptySpaceResizeFn.bind(this);
+    this.fitVieport = throttle<void, void>(this.fitVieport, 150, this);
 
     this.installMessageHook();
   }
@@ -76,24 +79,25 @@ export class DataGridResize {
 
   updateWidgetHeight(): void {
     this.dataGrid.node.style.minHeight = `${this.getWidgetHeight()}px`;
+    this.fitVieport();
   }
 
   updateWidgetWidth(): void {
     const spacing = 2 * (DEFAULT_GRID_PADDING + DEFAULT_GRID_BORDER_WIDTH) + 1;
     const hasVScroll = (
       this.dataGrid.rowManager.rowsToShow !== -1 && this.dataGrid.rowManager.rowsToShow <= this.dataGrid.model.rowCount('body')
     );
-    const vScrollWidth = hasVScroll ? this.dataGrid['_vScrollBarMinWidth'] + 1 : 0;
+    const vScrollWidth = hasVScroll ? SCROLLBAR_WIDTH : 0;
     const width = this.dataGrid.totalWidth + spacing + vScrollWidth;
 
     if (this.resizedHorizontally && width >= this.dataGrid.node.clientWidth) {
-      this.dataGrid.fit();
+      this.fitVieport();
 
       return;
     }
 
-    this.dataGrid.node.style.width = `${width}px`;
-    this.dataGrid.fit();
+    this.dataGrid.node.style.width = `${width + 1}px`;
+    this.fitVieport();
   }
 
   setInitialSectionWidths(): void {
@@ -201,6 +205,10 @@ export class DataGridResize {
     column.setWidth(value);
   }
 
+  fitVieport() {
+    this.dataGrid && this.dataGrid.fit();
+  }
+
   private fillEmptySpaceResizeFn(region: ColumnRegion, value: number) {
     return (section) => {
       let column = this.dataGrid.columnManager.getColumnByPosition({

diff --git a/js/notebook/src/tableDisplay/dataGrid/cell/ImageCellRenderer.ts b/js/notebook/src/tableDisplay/dataGrid/cell/ImageCellRenderer.ts
@@ -94,9 +94,10 @@ export default class ImageCellRenderer extends CellRenderer {
 
       if (selectColumnWidth(this.dataGrid.store.state, column) < width) {
         column.dataGrid.dataGridResize.setSectionWidth("column", column, width);
-        column.dataGrid.dataGridResize.updateWidgetHeight();
         column.dataGrid.dataGridResize.updateWidgetWidth();
       }
+
+      column.dataGrid.dataGridResize.updateWidgetHeight();
     });
   }
 }
diff --git a/js/notebook/src/tableDisplay/dataGrid/dataGridHelpers.ts b/js/notebook/src/tableDisplay/dataGrid/dataGridHelpers.ts
@@ -121,7 +121,7 @@ export namespace DataGridHelpers {
     limit: number,
     context = this,
     controllObject?: { timerId: any }
-  ): (T) => U|undefined {
+  ): (T?) => U|undefined {
     let controll = controllObject || { timerId: undefined };
     let lastRan;