#7338 support fixed width for image and HTML columns

twosigma · Jul 9, 2018 · 7cfeb5e · 7cfeb5e
1 parent 33c8973
commit 7cfeb5e
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 7 deletions.
diff --git a/js/notebook/src/tableDisplay/dataGrid/DataGridResize.ts b/js/notebook/src/tableDisplay/dataGrid/DataGridResize.ts
@@ -337,10 +337,21 @@ export class DataGridResize {
   }
 
   private getSectionWidth(column): number {
-    if(column.getDisplayType() === ALL_TYPES.image) {
-      return selectColumnWidth(this.dataGrid.store.state, column);
+    const fixedWidth = selectColumnWidth(this.dataGrid.store.state, column);
+    const displayType = column.getDisplayType();
+
+    if (displayType === ALL_TYPES.image) {
+      return fixedWidth || 1;
+    }
+
+    if (displayType === ALL_TYPES.html && fixedWidth) {
+      return fixedWidth;
     }
 
+    return this.calculateSectionWidth(column);
+  }
+
+  private calculateSectionWidth(column: DataGridColumn) {
     const position = column.getPosition();
     const value = String(column.formatFn(this.dataGrid.cellManager.createCellConfig({
       region: position.region,

diff --git a/js/notebook/src/tableDisplay/dataGrid/model/selectors/column.ts b/js/notebook/src/tableDisplay/dataGrid/model/selectors/column.ts
@@ -18,10 +18,19 @@ import {createSelector} from "reselect";
 import {DataModel} from "@phosphor/datagrid";
 import {
   selectAlignmentByType,
-  selectAlignmentForColumn, selectAlignmentForType, selectCellHighlighters,
+  selectAlignmentForColumn,
+  selectAlignmentForType,
+  selectCellHighlighters,
   selectColumnOrder,
-  selectColumnsFrozen, selectColumnsVisible, selectColumnTypes, selectHasIndex,
-  selectRawColumnNames, selectRendererForColumn, selectRendererForType
+  selectColumnsFrozen,
+  selectColumnsVisible,
+  selectColumnTypes,
+  selectHasIndex,
+  selectRawColumnNames,
+  selectRendererForColumn,
+  selectRendererForType,
+  selectStringFormatForColumn,
+  selectStringFormatForType
 } from "./model";
 import {getAlignmentByChar} from "../../column/columnAlignment";
 import {IColumnPosition} from "../../interface/IColumn";
@@ -191,3 +200,22 @@ export const selectColumnHighlighters = createSelector(
     highlighter => highlighter.colName === columnName && highlighter.type === highlighterType
   )
 );
+
+export const selectColumnFixedWidth: (state, columnName, typeName) => number|null = createSelector([
+    selectStringFormatForColumn,
+    selectStringFormatForType,
+    (state, columnName) => columnName,
+    (state, columnName, typeName) => typeName,
+  ],
+  (formatForColumns, formatForTypes, columnName, typeName) => {
+    if (formatForColumns[columnName] && formatForColumns[columnName].width) {
+      return formatForColumns[columnName].width;
+    }
+
+    if (formatForTypes[typeName] && formatForTypes[typeName].width) {
+      return formatForTypes[typeName].width;
+    }
+
+    return null;
+  }
+);
diff --git a/js/notebook/src/tableDisplay/dataGrid/store/BeakerXDataStore.ts b/js/notebook/src/tableDisplay/dataGrid/store/BeakerXDataStore.ts
@@ -25,7 +25,10 @@ import {
   selectHasIndex,
   selectInitialColumnPositions,
   selectStringFormatForColumn,
-  selectStringFormatForType, selectFormatForTimes, DEFAULT_INDEX_COLUMN_NAME,
+  selectStringFormatForType,
+  selectFormatForTimes,
+  DEFAULT_INDEX_COLUMN_NAME,
+  selectColumnFixedWidth,
 } from "../model/selectors";
 import {BeakerXDataGridModel} from "../model/BeakerXDataGridModel";
 import {getDisplayType, getTypeByName} from "../dataTypes";
@@ -69,7 +72,7 @@ export function createInitialColumnsState(initialState: IDataModelState): IColum
       keepTrigger: columnType === COLUMN_TYPES.index,
       position: positions[columnType][index],
       dataTypeName: types[columnType][index],
-      width: 20,
+      width: selectColumnFixedWidth(state, name, types[columnType][index]),
       displayType: getDisplayType(
         dataType,
         selectStringFormatForType(state),