freeze columns via context menu

packages/dashboard-core-plugins/src/panels/IrisGridPanel.jsx

@@ -122,6 +122,7 @@ export class IrisGridPanel extends PureComponent {
       pluginFetchColumns: [],
       modelQueue: [],
       pendingDataMap: new Map(),
+      frozenColumns: null,
 
       // eslint-disable-next-line react/no-unused-state
       panelState, // Dehydrated panel state that can load this panel
@@ -243,7 +244,8 @@ export class IrisGridPanel extends PureComponent {
       userRowHeights,
       aggregationSettings,
       advancedSettings,
-      pendingDataMap
+      pendingDataMap,
+      frozenColumns
     ) =>
       IrisGridUtils.dehydrateIrisGridState(model, {
         advancedFilters,
@@ -266,6 +268,7 @@ export class IrisGridPanel extends PureComponent {
         sorts,
         invertSearchColumns,
         pendingDataMap,
+        frozenColumns,
       })
   );
 
@@ -695,6 +698,7 @@ export class IrisGridPanel extends PureComponent {
         selectedSearchColumns,
         invertSearchColumns,
         pendingDataMap,
+        frozenColumns,
       } = IrisGridUtils.hydrateIrisGridState(model, irisGridState);
       const { movedColumns, movedRows } = IrisGridUtils.hydrateGridState(
         model,
@@ -725,6 +729,7 @@ export class IrisGridPanel extends PureComponent {
         selectedSearchColumns,
         invertSearchColumns,
         pendingDataMap,
+        frozenColumns,
       });
     } catch (error) {
       log.error('loadPanelState failed to load panelState', panelState, error);
@@ -759,6 +764,7 @@ export class IrisGridPanel extends PureComponent {
       invertSearchColumns,
       metrics,
       pendingDataMap,
+      frozenColumns,
     } = irisGridState;
     const { userColumnWidths, userRowHeights } = metrics;
     const { movedColumns, movedRows } = gridState;
@@ -789,7 +795,8 @@ export class IrisGridPanel extends PureComponent {
         userRowHeights,
         aggregationSettings,
         advancedSettings,
-        pendingDataMap
+        pendingDataMap,
+        frozenColumns
       ),
       this.getDehydratedGridState(model, movedColumns, movedRows),
       pluginState
@@ -860,6 +867,7 @@ export class IrisGridPanel extends PureComponent {
       pluginFilters,
       pluginFetchColumns,
       pendingDataMap,
+      frozenColumns,
     } = this.state;
     const errorMessage = error ? `Unable to open table. ${error}` : null;
     const { table: name, querySerial } = metadata;
@@ -942,6 +950,7 @@ export class IrisGridPanel extends PureComponent {
             canDownloadCsv={canDownloadCsv}
             ref={this.irisGrid}
             getDownloadWorker={getDownloadWorker}
+            frozenColumns={frozenColumns}
           >
             {childrenContent}
           </IrisGrid>
@@ -972,6 +981,7 @@ IrisGridPanel.propTypes = {
         columns: PropTypes.arrayOf(PropTypes.string).isRequired,
       }),
       pendingDataMap: PropTypes.arrayOf(PropTypes.array),
+      frozenColumns: PropTypes.arrayOf(PropTypes.string),
     }),
     irisGridPanelState: PropTypes.shape({}),
     pluginState: PropTypes.shape({}),

packages/iris-grid/src/IrisGrid.jsx

@@ -282,6 +282,7 @@ export class IrisGrid extends Component {
       selectDistinctColumns,
       pendingDataMap,
       canCopy,
+      frozenColumns,
     } = props;
 
     const keyHandlers = [
@@ -388,6 +389,7 @@ export class IrisGrid extends Component {
       pendingSaveError: null,
 
       toastMessage: null,
+      frozenColumns,
     };
   }
 
@@ -1388,6 +1390,46 @@ export class IrisGrid extends Component {
     this.grid.forceUpdate();
   }
 
+  freezeColumnByColumnName(columnName) {
+    const { frozenColumns } = this.state;
+    const { model } = this.props;
+    log.debug2('freezing column', columnName);
+
+    let allFrozenColumns;
+
+    if (frozenColumns == null) {
+      allFrozenColumns = new Set(model.layoutHints?.frozenColumns ?? []);
+      allFrozenColumns.add(columnName);
+    } else {
+      allFrozenColumns = new Set([...frozenColumns, columnName]);
+    }
+
+    this.setState({
+      frozenColumns: [...allFrozenColumns],
+    });
+  }
+
+  unFreezeColumnByColumnName(columnName) {
+    const { frozenColumns } = this.state;
+    const { model } = this.props;
+    log.debug2('unfreezing column', columnName);
+
+    let allFrozenColumns;
+
+    if (frozenColumns == null) {
+      allFrozenColumns = new Set(model.layoutHints?.frozenColumns ?? []);
+      allFrozenColumns.delete(columnName);
+    } else {
+      allFrozenColumns = new Set(
+        frozenColumns.filter(col => col !== columnName)
+      );
+    }
+
+    this.setState({
+      frozenColumns: [...allFrozenColumns],
+    });
+  }
+
   handleColumnVisibilityChanged(modelIndexes, visibilityOption) {
     const { metricCalculator } = this.state;
     if (
@@ -2325,6 +2367,7 @@ export class IrisGrid extends Component {
       pendingDataErrors,
       pendingDataMap,
       toastMessage,
+      frozenColumns,
     } = this.state;
     if (!isReady) {
       return null;
@@ -2941,6 +2984,7 @@ export class IrisGrid extends Component {
                 selectDistinctColumns={selectDistinctColumns}
                 pendingRowCount={pendingRowCount}
                 pendingDataMap={pendingDataMap}
+                frozenColumns={frozenColumns}
               />
             )}
             <div
@@ -3134,6 +3178,7 @@ IrisGrid.propTypes = {
 
   canCopy: PropTypes.bool,
   canDownloadCsv: PropTypes.bool,
+  frozenColumns: PropTypes.arrayOf(PropTypes.string),
 };
 
 IrisGrid.defaultProps = {
@@ -3190,6 +3235,7 @@ IrisGrid.defaultProps = {
   },
   canCopy: true,
   canDownloadCsv: true,
+  frozenColumns: null,
 };
 
 export default IrisGrid;

packages/iris-grid/src/IrisGridModel.js

@@ -186,6 +186,13 @@ class IrisGridModel extends GridModel {
     throw new Error('set customColumns not implemented');
   }
 
+  /**
+   * @param {String[]} columns The columns to treat as frozen
+   */
+  updateFrozenColumns(columns) {
+    throw new Error('updateFrozenColumns not implemented');
+  }
+
   /**
    * @returns {dh.RollupTableConfig} The config to use for rolling up this table
    */

packages/iris-grid/src/IrisGridModelUpdater.jsx

@@ -33,6 +33,7 @@ const IrisGridModelUpdater = React.memo(
     selectDistinctColumns,
     pendingRowCount,
     pendingDataMap,
+    frozenColumns,
   }) => {
     const columns = useMemo(
       () =>
@@ -97,6 +98,9 @@ const IrisGridModelUpdater = React.memo(
     useEffect(() => {
       model.pendingDataMap = pendingDataMap;
     }, [model, pendingDataMap]);
+    useEffect(() => {
+      model.updateFrozenColumns(frozenColumns);
+    }, [model, frozenColumns]);
 
     return null;
   }
@@ -117,6 +121,7 @@ IrisGridModelUpdater.propTypes = {
   customColumns: PropTypes.arrayOf(PropTypes.string).isRequired,
   movedColumns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   hiddenColumns: PropTypes.arrayOf(PropTypes.number).isRequired,
+  frozenColumns: PropTypes.arrayOf(PropTypes.string),
   alwaysFetchColumns: PropTypes.arrayOf(PropTypes.string).isRequired,
   formatter: PropTypes.instanceOf(Formatter).isRequired,
   rollupConfig: APIPropTypes.RollupConfig,
@@ -135,6 +140,7 @@ IrisGridModelUpdater.defaultProps = {
   selectDistinctColumns: [],
   pendingRowCount: 0,
   pendingDataMap: new Map(),
+  frozenColumns: null,
 };
 
 export default IrisGridModelUpdater;

packages/iris-grid/src/IrisGridProxyModel.js

@@ -286,6 +286,10 @@ class IrisGridProxyModel extends IrisGridModel {
     return this.model.layoutHints;
   }
 
+  updateFrozenColumns(...args) {
+    this.model.updateFrozenColumns(...args);
+  }
+
   get originalColumns() {
     return this.originalModel.columns;
   }