feat: Partitioned Table UI Enhancements

packages/iris-grid/src/IrisGrid.tsx

@@ -116,6 +116,7 @@
   IrisGridContextMenuHandler,
   IrisGridCopyCellMouseHandler,
   IrisGridDataSelectMouseHandler,
+  IrisGridPartitionedTableMouseHandler,
   IrisGridFilterMouseHandler,
   IrisGridRowTreeMouseHandler,
   IrisGridSortMouseHandler,
@@ -734,6 +735,7 @@
       new IrisGridContextMenuHandler(this, dh),
       new IrisGridDataSelectMouseHandler(this),
       new PendingMouseHandler(this),
+      new IrisGridPartitionedTableMouseHandler(this),
     ];
     if (canCopy) {
       keyHandlers.push(new CopyKeyHandler(this));
@@ -895,8 +897,8 @@
     const changedInputFilters =
       inputFilters !== prevProps.inputFilters
         ? inputFilters.filter(
-            inputFilter => !prevProps.inputFilters.includes(inputFilter)
-          )
+          inputFilter => !prevProps.inputFilters.includes(inputFilter)
+        )
         : [];
     if (changedInputFilters.length > 0) {
       const { advancedSettings } = this.props;
@@ -1380,11 +1382,11 @@
       advancedFilters: ReadonlyAdvancedFilterMap,
       searchFilter: DhType.FilterCondition | undefined
     ) => [
-      ...(customFilters ?? []),
-      ...IrisGridUtils.getFiltersFromFilterMap(quickFilters),
-      ...IrisGridUtils.getFiltersFromFilterMap(advancedFilters),
-      ...(searchFilter !== undefined ? [searchFilter] : []),
-    ],
+        ...(customFilters ?? []),
+        ...IrisGridUtils.getFiltersFromFilterMap(quickFilters),
+        ...IrisGridUtils.getFiltersFromFilterMap(advancedFilters),
+        ...(searchFilter !== undefined ? [searchFilter] : []),
+      ],
     { max: 1 }
   );
 
@@ -2060,37 +2062,62 @@
     keyTable.applySort(sorts);
     keyTable.setViewport(0, 0);
 
-    return new Promise((resolve, reject) => {
-      // We want to wait for the first UPDATED event instead of just getting viewport data here
-      // It's possible that the key table does not have any rows of data yet, so just wait until it does have one
-      keyTable.addEventListener(
-        dh.Table.EVENT_UPDATED,
-        (event: CustomEvent<DhType.ViewportData>) => {
-          try {
-            const { detail: data } = event;
-            if (data.rows.length === 0) {
-              // Table is empty, wait for the next updated event
-              return;
-            }
-            const row = data.rows[0];
-            // Core JSAPI returns undefined for null table values, IrisGridPartitionSelector expects null
-            // https://github.com/deephaven/deephaven-core/issues/5400
-            const values = keyTable.columns.map(
-              column => row.get(column) ?? null
-            );
-            const newPartition: PartitionConfig = {
-              partitions: values,
-              mode: 'partition',
-            };
-            keyTable.close();
-            resolve(newPartition);
-          } catch (e) {
-            keyTable.close();
-            reject(e);
+    // We want to wait for the first UPDATED event instead of just getting viewport data here
+    // It's possible that the key table does not have any rows of data yet, so just wait until it does have one
+    keyTable.addEventListener(
+      dh.Table.EVENT_UPDATED,
+      (event: CustomEvent<DhType.ViewportData>) => {
+        try {
+          const { detail: data } = event;
+          if (data.rows.length === 0) {
+            this.setState({
+              partitionConfig: { partitions: [], mode: 'empty' },
+            });
+            return partitionConfig;
           }
+          const row = data.rows[0];
+          const values = keyTable.columns.map(column => row.get(column));
+          const newPartition: PartitionConfig = {
+            partitions: values,
+            mode: model.isPartitionAwareSourceTable ? 'partition' : 'keys',
+          };
+          keyTable.close();
+          return newPartition;
+        } catch (e) {
+          keyTable.close();
+          log.error('Error getting initial partition config', e);
         }
+      }
+    );
+    return { partitions: [], mode: 'loading' };
+  }
+
+  /**
+   * Selects a partition key from the table based on the provided row index.
+   *
+   * @param rowIndex The index of the row from which the partition will be selected.
+   * @returns A promise that resolves when the partition key has been successfully selected.
+   */
+  selectPartitionKeyFromTable(rowIndex: GridRangeIndex): void {
+    const { model } = this.props;
+    assertNotNull(rowIndex);
+    if (isPartitionedGridModel(model)) {
+      const data = this.getRowDataMap(rowIndex);
+      const partitionColumnSet = new Set(
+        model.partitionColumns.map(column => column.name)
       );
-    });
+      const values = Object.entries(data)
+        .filter(([key, _]) => partitionColumnSet.has(key))
+        .map(([key, columnData]) => columnData.value);
+      const newPartition: PartitionConfig = {
+        partitions: values,
+        mode: 'partition',
+      };
+      this.setState({
+        isSelectingPartition: true,
+        partitionConfig: newPartition,
+      });
+    }
   }
 
   copyCell(
@@ -2532,7 +2559,11 @@
 
   handlePartitionChange(partitionConfig: PartitionConfig): void {
     this.startLoading('Partitioning...');
-    this.setState({ partitionConfig });
+    const { partitionConfig: prevConfig } = this.state;
+    if (prevConfig !== partitionConfig) {
+      this.setState({ partitionConfig });
+    }
+    // this.setState({ partitionConfig });
   }
 
   handleTableLoadError(error: unknown): void {
@@ -3125,10 +3156,10 @@
         pendingRowCount = Math.max(
           0,
           bottomViewport -
-            (model.rowCount - model.pendingRowCount) -
-            model.floatingTopRowCount -
-            model.floatingBottomRowCount -
-            1
+          (model.rowCount - model.pendingRowCount) -
+          model.floatingTopRowCount -
+          model.floatingBottomRowCount -
+          1
         );
       }
     }
@@ -3459,8 +3490,7 @@
     this.clearAllFilters();
 
     this.startLoading(
-      `Selecting distinct values in ${
-        columnNames.length > 0 ? columnNames.join(', ') : ''
+      `Selecting distinct values in ${columnNames.length > 0 ? columnNames.join(', ') : ''
       }...`
     );
 
@@ -4268,9 +4298,9 @@
 
     const debounceMs = metrics
       ? Math.min(
-          Math.max(IrisGrid.minDebounce, Math.round(metrics.rowCount / 200)),
-          IrisGrid.maxDebounce
-        )
+        Math.max(IrisGrid.minDebounce, Math.round(metrics.rowCount / 200)),
+        IrisGrid.maxDebounce
+      )
       : IrisGrid.maxDebounce;
 
     if (isFilterBarShown && focusedFilterBarColumn != null && metrics != null) {
@@ -4466,19 +4496,19 @@
           const xFilterBar = gridX + columnX + columnWidth - 20;
           const style: CSSProperties = isFilterBarShown
             ? {
-                position: 'absolute',
-                top: columnHeaderHeight,
-                left: xFilterBar,
-                width: 20,
-                height: theme.filterBarHeight,
-              }
+              position: 'absolute',
+              top: columnHeaderHeight,
+              left: xFilterBar,
+              width: 20,
+              height: theme.filterBarHeight,
+            }
             : {
-                position: 'absolute',
-                top: 0,
-                left: xColumnHeader,
-                width: columnWidth,
-                height: columnHeaderHeight,
-              };
+              position: 'absolute',
+              top: 0,
+              left: xColumnHeader,
+              width: columnWidth,
+              height: columnHeaderHeight,
+            };
           const modelColumn = this.getModelColumn(columnIndex);
           if (modelColumn != null) {
             const column = model.columns[modelColumn];

packages/iris-grid/src/IrisGridPartitionSelector.scss

@@ -18,8 +18,7 @@
   }
   .partition-button-group {
     display: flex;
-    border: 1px var(--dh-color-hr);
-    border-style: none solid;
+    border-right: 1px solid var(--dh-color-hr);
     padding: 0 $spacer-2;
     gap: $spacer-2;
   }

packages/iris-grid/src/IrisGridPartitionSelector.test.tsx

@@ -17,6 +17,9 @@ function makeModel(
       Promise.resolve(irisGridTestUtils.makeTable())
     ),
     partitionColumns: columns,
+    partitionBaseTable: jest.fn(() =>
+      Promise.resolve(irisGridTestUtils.makeTable())
+    ),
   } as unknown as PartitionedGridModel;
   return model;
 }