feat: Partitioned Table UI Enhancements

.vscode/settings.json

@@ -51,8 +51,5 @@
         "description": "Test pattern or filename"
       }
     ]
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

packages/iris-grid/src/IrisGrid.tsx

@@ -1783,12 +1783,17 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
    * Rebuilds all the current filters. Necessary if something like the time zone has changed.
    */
   rebuildFilters(): void {
-    log.debug('Rebuilding filters');
-
     const { model } = this.props;
-    const { advancedFilters, quickFilters, partitionConfig } = this.state;
+    const { advancedFilters, quickFilters } = this.state;
     const { columns, formatter } = model;
 
+    if (advancedFilters.size === 0 && quickFilters.size === 0) {
+      // No need to rebuild filters if no filters are set
+      return;
+    }
+
+    log.debug('Rebuilding filters');
+
     const newAdvancedFilters = new Map();
     const newQuickFilters = new Map();
 
@@ -1814,10 +1819,8 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
         filter: this.makeQuickFilter(column, text, formatter.timeZone),
       });
     });
-    // If partitionConfig is empty, no need to rebuild filters
-    if (partitionConfig?.mode !== 'empty' && newQuickFilters.size > 0) {
-      this.startLoading('Rebuilding filters...', { resetRanges: true });
-    }
+    this.startLoading('Rebuilding filters...', { resetRanges: true });
+
     this.setState({
       quickFilters: newQuickFilters,
       advancedFilters: newAdvancedFilters,
@@ -2028,11 +2031,15 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
 
   async loadPartitionsTable(model: PartitionedGridModel): Promise<void> {
     try {
-      const partitionConfig = await this.getInitialPartitionConfig(model);
-      this.setState(
-        { isSelectingPartition: true, partitionConfig },
-        this.loadTableState
-      );
+      const { partitionConfig } = this.state;
+      if (!partitionConfig) {
+        this.startLoading('Loading partitions...', {
+          loadingCancelShown: false,
+          resetRanges: true,
+        });
+        this.initializePartitionConfig(model);
+      }
+      this.setState({ isSelectingPartition: true }, this.loadTableState);
     } catch (error) {
       if (!PromiseUtils.isCanceled(error)) {
         this.handleTableLoadError(error);
@@ -2041,19 +2048,9 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
   }
 
   /**
-   * Gets the initial partition config for the currently set model.
-   * Sorts the key table and gets the first key.
-   * If the table is ticking, it will wait for the first tick.
+   * Initialize the partition config to the default partition.
    */
-  async getInitialPartitionConfig(
-    model: PartitionedGridModel
-  ): Promise<PartitionConfig> {
-    const { partitionConfig } = this.state;
-    if (partitionConfig !== undefined) {
-      // User already has a partition selected, just use that
-      return partitionConfig;
-    }
-
+  async initializePartitionConfig(model: PartitionedGridModel): Promise<void> {
     const keyTable = await this.pending.add(
       model.partitionKeysTable(),
       resolved => resolved.close()
@@ -2072,9 +2069,8 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
         try {
           const { detail: data } = event;
           if (data.rows.length === 0) {
-            this.setState({
-              partitionConfig: { partitions: [], mode: 'empty' },
-            });
+            // We received an update and the table is still empty. Stop showing the loading spinner so we know
+            this.stopLoading();
             return;
           }
           const row = data.rows[0];
@@ -2084,14 +2080,16 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
             mode: model.isPartitionAwareSourceTable ? 'partition' : 'keys',
           };
           keyTable.close();
-          this.setState({ partitionConfig: newPartition });
+          this.setState({
+            loadingSpinnerShown: false,
+            partitionConfig: newPartition,
+          });
         } catch (e) {
           keyTable.close();
           log.error('Error getting initial partition config', e);
         }
       }
     );
-    return { partitions: [], mode: 'loading' };
   }
 
   /**
@@ -4258,7 +4256,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       gotoValueSelectedFilter,
       partitionConfig,
     } = this.state;
-    if (!isReady || partitionConfig?.mode === 'loading') {
+    if (!isReady) {
       return null;
     }
 
@@ -4498,7 +4496,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
           const xFilterBar = gridX + columnX + columnWidth - 20;
           const style: CSSProperties = isFilterBarShown
             ? {
-                position: 'ßabsolute',
+                position: 'absolute',
                 top: columnHeaderHeight,
                 left: xFilterBar,
                 width: 20,
@@ -4732,15 +4730,13 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
             unmountOnExit
           >
             <div className="iris-grid-partition-selector-wrapper iris-grid-bar iris-grid-bar-primary">
-              {isPartitionedGridModel(model) &&
-                model.isPartitionRequired &&
-                partitionConfig && (
-                  <IrisGridPartitionSelector
-                    model={model}
-                    partitionConfig={partitionConfig}
-                    onChange={this.handlePartitionChange}
-                  />
-                )}
+              {isPartitionedGridModel(model) && model.isPartitionRequired && (
+                <IrisGridPartitionSelector
+                  model={model}
+                  partitionConfig={partitionConfig}
+                  onChange={this.handlePartitionChange}
+                />
+              )}
             </div>
           </CSSTransition>
           <CSSTransition

packages/iris-grid/src/IrisGridPartitionSelector.tsx

@@ -15,7 +15,7 @@ const log = Log.module('IrisGridPartitionSelector');
 
 interface IrisGridPartitionSelectorProps {
   model: PartitionedGridModel;
-  partitionConfig: PartitionConfig;
+  partitionConfig?: PartitionConfig;
   onChange: (partitionConfig: PartitionConfig) => void;
 }
 interface IrisGridPartitionSelectorState {
@@ -106,6 +106,7 @@ class IrisGridPartitionSelector extends Component<
     log.debug2('handlePartitionTableClick');
 
     const { partitionConfig } = this.props;
+    assertNotNull(partitionConfig);
 
     const newPartitionConfig = { ...partitionConfig };
     // Toggle between Keys and Partition mode
@@ -118,6 +119,7 @@ class IrisGridPartitionSelector extends Component<
     log.debug2('handleMergeClick');
 
     const { partitionConfig } = this.props;
+    assertNotNull(partitionConfig);
     const newPartitionConfig = { ...partitionConfig };
     // Toggle between Merged and Partition mode
     newPartitionConfig.mode =
@@ -135,6 +137,7 @@ class IrisGridPartitionSelector extends Component<
     selectedValue: unknown
   ): Promise<void> {
     const { partitionConfig: prevConfig } = this.props;
+    assertNotNull(prevConfig);
 
     log.debug('handlePartitionSelect', index, selectedValue, prevConfig);
 
@@ -218,9 +221,12 @@ class IrisGridPartitionSelector extends Component<
    */
   async updatePartitionOptions(): Promise<void> {
     const { model } = this.props;
-    const { keysTable } = this.state;
     const { partitionConfig: prevConfig } = this.props;
+    if (prevConfig == null) {
+      return;
+    }
 
+    const { keysTable } = this.state;
     assertNotNull(keysTable);
 
     const partitionFilters = [...prevConfig.partitions].map((partition, i) => {
@@ -240,6 +246,7 @@ class IrisGridPartitionSelector extends Component<
 
   getPartitionFilters(partitionTables: dh.Table[]): dh.FilterCondition[][] {
     const { model, partitionConfig } = this.props;
+    assertNotNull(partitionConfig);
     const { partitions } = partitionConfig;
     log.debug('getPartitionFilters', partitionConfig);
 
@@ -296,14 +303,14 @@ class IrisGridPartitionSelector extends Component<
             shouldFlip={false}
             keyColumn={partitionTables[index].columns[index].name}
             selectedKey={
-              partitionConfig.mode === 'keys'
-                ? null
-                : (partitionConfig.partitions[index] as ItemKey)
+              partitionConfig?.mode === 'partition'
+                ? (partitionConfig.partitions[index] as ItemKey)
+                : null
             }
             placeholder="Select a key"
             labelColumn={partitionTables[index].columns[index].name}
             onChange={this.getCachedChangeCallback(index)}
-            isDisabled={isLoading || partitionConfig.mode === 'empty'}
+            isDisabled={isLoading || partitionConfig == null}
           />
         )}
         {model.partitionColumns.length - 1 === index || (
@@ -323,8 +330,8 @@ class IrisGridPartitionSelector extends Component<
                 : 'View underlying partition table'
             }
             icon={vsKey}
-            active={partitionConfig.mode === 'keys'}
-            disabled={isLoading || partitionConfig.mode === 'empty'}
+            active={partitionConfig?.mode === 'keys'}
+            disabled={isLoading || partitionConfig == null}
           >
             Partitions
           </Button>
@@ -333,8 +340,8 @@ class IrisGridPartitionSelector extends Component<
             kind="inline"
             tooltip="View all partitions as one merged table"
             icon={<FontAwesomeIcon icon={vsMerge} rotation={90} />}
-            active={partitionConfig.mode === 'merged'}
-            disabled={isLoading || partitionConfig.mode === 'empty'}
+            active={partitionConfig?.mode === 'merged'}
+            disabled={isLoading || partitionConfig == null}
           >
             {model.isPartitionAwareSourceTable ? 'Coalesce' : 'Merge'}
           </Button>

packages/iris-grid/src/IrisGridPartitionedTableModel.ts

@@ -60,6 +60,21 @@ class IrisGridPartitionedTableModel
     return this.partitionedTable.keyColumns;
   }
 
+  get columnCount(): number {
+    return this.columns.length;
+  }
+
+  getColumnIndexByName(columnName: string): number {
+    return this.columns.findIndex(column => column.name === columnName) ?? -1;
+  }
+
+  textForColumnHeader(
+    column: number,
+    depth?: number | undefined
+  ): string | undefined {
+    return this.columns[column].name ?? '';
+  }
+
   async partitionKeysTable(): Promise<DhType.Table> {
     return this.partitionedTable.getKeyTable();
   }

packages/iris-grid/src/IrisGridProxyModel.ts

@@ -323,11 +323,6 @@ class IrisGridProxyModel extends IrisGridModel implements PartitionedGridModel {
         modelPromise = this.originalModel
           .partitionMergedTable()
           .then(table => makeModel(this.dh, table, this.formatter));
-      } else if (
-        partitionConfig.mode === 'empty' ||
-        partitionConfig.mode === 'loading'
-      ) {
-        // Empty partition
       } else {
         modelPromise = this.originalModel
           .partitionTable(partitionConfig.partitions)

packages/iris-grid/src/PartitionedGridModel.ts

@@ -27,7 +27,7 @@ export interface PartitionConfig {
   partitions: unknown[];
 
   /** What data to display - the keys table, the merged table, or the selected partition */
-  mode: 'keys' | 'merged' | 'partition' | 'loading' | 'empty';
+  mode: 'keys' | 'merged' | 'partition';
 }
 
 /**