@deephaven/js-plugin-pivot 0.0.3-dev.984 → 0.2.1-dev.1002

package/dist/index.js

@@ -10,8 +10,8 @@ const plugin = require("@deephaven/plugin");
 const icons = require("@deephaven/icons");
 const React = require("react");
 const irisGrid = require("@deephaven/iris-grid");
-const jsapiBootstrap = require("@deephaven/jsapi-bootstrap");
 const components = require("@deephaven/components");
+const jsapiBootstrap = require("@deephaven/jsapi-bootstrap");
 const Log = require("@deephaven/log");
 const jsapiUtils = require("@deephaven/jsapi-utils");
 const dashboardCorePlugins = require("@deephaven/dashboard-core-plugins");
@@ -499,9 +499,6 @@ function isEditableGridModel(model) {
 function isExpandableGridModel(model) {
   return (model === null || model === void 0 ? void 0 : model.hasExpandableRows) !== void 0;
 }
-function isExpandableColumnGridModel(model) {
-  return (model === null || model === void 0 ? void 0 : model.hasExpandableColumns) !== void 0;
-}
 var NAN = 0 / 0;
 var symbolTag = "[object Symbol]";
 var reTrim = /^\s+|\s+$/g;
@@ -7311,20 +7308,20 @@ class GridColumnSeparatorMouseHandler extends GridSeparatorMouseHandler$1 {
     var {
       x,
       y,
-      columnHeaderDepth
+      columnHeaderDepth: depth
     } = gridPoint;
     var {
       modelColumns
     } = metrics;
     var separatorIndex = GridUtils.getColumnSeparatorIndex(x, y, metrics, theme);
-    if (separatorIndex == null || columnHeaderDepth == null || columnHeaderDepth > 0) {
+    if (separatorIndex == null || depth == null) {
       return null;
     }
     var columnIndex = modelColumns.get(separatorIndex);
     if (columnIndex != null) {
       return {
         index: separatorIndex,
-        depth: 0
+        depth
       };
     }
     return null;
@@ -9920,10 +9917,10 @@ _defineProperty(GridRenderer, "getCachedColorWithAlpha", memoizeClear$1(GridColo
 _defineProperty(GridRenderer, "getCachedColorIsDark", memoizeClear$1(ColorUtils$1.isDark, {
   max: 1e3
 }));
-function isExpandableColumnHeaderGroup(group) {
-  return group instanceof ExpandableColumnHeaderGroup;
+function isPivotColumnHeaderGroup(group) {
+  return group instanceof PivotColumnHeaderGroup;
 }
-class ExpandableColumnHeaderGroup extends irisGrid.ColumnHeaderGroup {
+class PivotColumnHeaderGroup extends irisGrid.ColumnHeaderGroup {
   constructor({
     name,
     displayName,
@@ -9978,7 +9975,14 @@ function makeColumn({
   isSortable = false,
   depth = ROOT_DEPTH,
   hasChildren = false,
-  isExpanded = false
+  isExpanded = false,
+  isProxy = false,
+  filter = () => {
+    throw new Error("Filter not implemented for virtual column");
+  },
+  sort = () => {
+    throw new Error("Sort not implemented for virtual column");
+  }
 }) {
   return {
     name,
@@ -9986,18 +9990,14 @@ function makeColumn({
     type,
     isPartitionColumn: false,
     isSortable,
-    isProxy: false,
+    isProxy,
     description,
     index,
     depth,
     hasChildren,
     isExpanded,
-    filter: () => {
-      throw new Error("Filter not implemented for virtual column");
-    },
-    sort: () => {
-      throw new Error("Sort not implemented for virtual column");
-    },
+    filter,
+    sort,
     formatColor: () => {
       throw new Error("Color not implemented for virtual column");
     },
@@ -10022,15 +10022,15 @@ function makeGrandTotalColumnName(valueSource) {
   return `__GRAND_TOTAL/${valueSource.name}`;
 }
 function makeColumnName(keys2, depth) {
-  return keys2.slice(0, depth + 1).filter((k) => k != null).join("/");
+  return keys2.slice(0, depth + 1).filter((k) => k != null).map((k) => encodeURIComponent(String(k))).join("/");
 }
 function makeColumnGroupName(keys2, columnSources, depth) {
-  return keys2.slice(0, depth + 1).map((k, i) => k == null ? columnSources[i].name : k).join("/");
+  return keys2.slice(0, depth + 1).map((k, i) => k == null ? columnSources[i].name : k).map((k) => encodeURIComponent(String(k))).join("/");
 }
 function makeValueSourceColumnName(columnName, valueSource) {
   return `${columnName}/${valueSource.name}`;
 }
-function makeExpandableDisplayColumn(snapshotDim, valueSource, originalIndex, offset) {
+function makeColumnFromSnapshot(snapshotDim, valueSource, originalIndex, offset) {
   const keys2 = snapshotDim.getKeys(originalIndex);
   const depth = snapshotDim.getDepth(originalIndex);
   const hasChildren = snapshotDim.hasChildren(originalIndex);
@@ -10052,7 +10052,7 @@ function makeExpandableDisplayColumn(snapshotDim, valueSource, originalIndex, of
     hasChildren
   });
 }
-function makePlaceholderDisplayColumn(valueSource, originalIndex, offset) {
+function makePlaceholderColumn(valueSource, originalIndex, offset) {
   return makeColumn({
     name: makePlaceholderColumnName(originalIndex, valueSource),
     displayName: "",
@@ -10063,31 +10063,40 @@ function makePlaceholderDisplayColumn(valueSource, originalIndex, offset) {
     hasChildren: false
   });
 }
-function makeRowSourceColumn(source, index) {
+function makeColumnFromSource(source, index) {
   const { name, type, isSortable, description } = source;
-  return makeColumn({ name, type, index, isSortable, description });
+  return makeColumn({
+    name,
+    type,
+    index,
+    isSortable,
+    description,
+    filter: source.filter.bind(source),
+    sort: source.sort.bind(source)
+  });
 }
 function checkColumnsChanged(prevColumns, newColumns) {
   return prevColumns.length !== newColumns.length || prevColumns.some((col, i) => col.name !== newColumns[i].name);
 }
-function getKeyColumnGroups(columnSources, rowSources) {
+function makeKeyColumnGroups(columnSources, rowSources, includeGroupColumn) {
+  const groupName = includeGroupColumn ? ["__GROUP__"] : [];
   const groups = columnSources.length === 0 ? [
-    new ExpandableColumnHeaderGroup({
-      // TODO:
-      name: "__All",
+    new PivotColumnHeaderGroup({
+      name: "/",
       displayName: "",
-      // TODO: what if rowSources is empty?
-      children: rowSources.map((c) => c.name),
+      // For empty row sources we will render a "dead column"
+      // or a Groups column, depending on the table settings
+      children: [...groupName, ...rowSources.map((c) => c.name)],
       childIndexes: [],
       isKeyColumnGroup: true,
       depth: 1,
       isExpandable: false
     })
   ] : columnSources.map(
-    (source, i) => new ExpandableColumnHeaderGroup({
+    (source, i) => new PivotColumnHeaderGroup({
       name: source.name,
       displayName: source.name,
-      children: i === columnSources.length - 1 ? rowSources.map((c) => c.name) : [columnSources[i + 1].name],
+      children: i === columnSources.length - 1 ? [...groupName, ...rowSources.map((c) => c.name)] : [columnSources[i + 1].name],
       childIndexes: [],
       isKeyColumnGroup: true,
       depth: columnSources.length - i,
@@ -10099,23 +10108,18 @@ function getKeyColumnGroups(columnSources, rowSources) {
     []
   ) : groups;
 }
-function getTotalsColumnGroups(columnSources, valueSources, isRootColumnExpanded) {
+function makeTotalsColumnGroups(columnSources, valueSources, isRootColumnExpanded) {
   const groupName = pluralize(valueSources.length, GRAND_TOTALS_GROUP_NAME);
   return columnSources.length === 0 ? [
-    new ExpandableColumnHeaderGroup({
-      // TODO:
-      name: "TMP__GrandTotals",
+    new PivotColumnHeaderGroup({
+      name: "/GrandTotals",
       displayName: groupName,
       children: valueSources.map((v) => makeGrandTotalColumnName(v)),
       childIndexes: [],
       depth: 1
-      // Only the top level is expandable
-      // TODO:
-      // isExpandable: i === 0,
-      // isExpanded: isRootColumnExpanded,
     })
   ] : columnSources.map(
-    (source, i) => new ExpandableColumnHeaderGroup({
+    (source, i) => new PivotColumnHeaderGroup({
       name: makeGrandTotalColumnName(source),
       displayName: i === 0 ? groupName : "",
       children: i === columnSources.length - 1 ? valueSources.map((v) => makeGrandTotalColumnName(v)) : [makeGrandTotalColumnName(columnSources[i + 1])],
@@ -10128,7 +10132,7 @@ function getTotalsColumnGroups(columnSources, valueSources, isRootColumnExpanded
     })
   );
 }
-function getSnapshotColumnGroups(snapshotColumns, columnSources, valueSources, formatValue) {
+function makeSnapshotColumnGroups(snapshotColumns, columnSources, valueSources, formatValue) {
   const maxDepth = Math.max(columnSources.length, 1);
   const groupMap = /* @__PURE__ */ new Map();
   const groupName = pluralize(valueSources.length, TOTALS_GROUP_NAME);
@@ -10141,7 +10145,7 @@ function getSnapshotColumnGroups(snapshotColumns, columnSources, valueSources, f
       const isTotalGroup = keys2[i] == null;
       const parentKey = i > 0 ? keys2[i - 1] : null;
       const totalsGroupDisplayName = parentKey == null ? "" : groupName;
-      const group = groupMap.get(name) ?? new ExpandableColumnHeaderGroup({
+      const group = groupMap.get(name) ?? new PivotColumnHeaderGroup({
         name,
         displayName: isTotalGroup ? totalsGroupDisplayName : keys2[i],
         isTotalGroup,
@@ -10168,16 +10172,20 @@ function getSnapshotColumnGroups(snapshotColumns, columnSources, valueSources, f
   }
   return [...groupMap.values()];
 }
-function getColumnGroups(pivotTable, snapshotColumns, isRootColumnExpanded = true, formatValue = (v, t) => String(v)) {
+function makeColumnGroups(pivotTable, snapshotColumns, isRootColumnExpanded = true, includeGroupColumn = false, formatValue = (v, t) => String(v)) {
   const virtualColumnGroups = [
-    ...getKeyColumnGroups(pivotTable.columnSources, pivotTable.rowSources),
-    ...getTotalsColumnGroups(
+    ...makeKeyColumnGroups(
+      pivotTable.columnSources,
+      pivotTable.rowSources,
+      includeGroupColumn
+    ),
+    ...makeTotalsColumnGroups(
       pivotTable.columnSources,
       pivotTable.valueSources,
       isRootColumnExpanded
     )
   ];
-  const snapshotColumnGroups = snapshotColumns == null ? [] : getSnapshotColumnGroups(
+  const snapshotColumnGroups = snapshotColumns == null ? [] : makeSnapshotColumnGroups(
     snapshotColumns,
     pivotTable.columnSources,
     pivotTable.valueSources
@@ -10189,6 +10197,19 @@ const SET_VIEWPORT_THROTTLE = 150;
 const APPLY_VIEWPORT_THROTTLE = 0;
 const ROW_BUFFER_PAGES = 1;
 const COLUMN_BUFFER_PAGES = 1;
+const VirtualGroupColumn = Object.freeze(
+  makeColumn({
+    name: "__GROUP__",
+    displayName: "Group",
+    type: "java.lang.String",
+    index: 0,
+    depth: 2,
+    isProxy: true
+  })
+);
+function isIrisGridPivotModel(model) {
+  return typeof model === "object" && model !== null && "pivotTable" in model && "keyColumns" in model && "expandAll" in model && "collapseAll" in model && "hasExpandableRows" in model && "hasExpandableColumns" in model;
+}
 class IrisGridPivotModel extends irisGrid.IrisGridModel {
   constructor(dh, pivotTable, formatter = new jsapiUtils.Formatter(dh), config = {}) {
     if (!isCorePlusDh(dh)) {
@@ -10196,13 +10217,9 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     }
     super(dh);
     __publicField(this, "pivotTable");
-    __publicField(this, "keyColumns");
+    __publicField(this, "showExtraGroupCol", true);
     __publicField(this, "_layoutHints");
-    __publicField(this, "_columnHeaderGroupMap", /* @__PURE__ */ new Map());
-    __publicField(this, "columnHeaderParentMap", /* @__PURE__ */ new Map());
-    __publicField(this, "_columnHeaderMaxDepth", null);
-    __publicField(this, "_columnHeaderGroups", []);
-    __publicField(this, "_isColumnHeaderGroupsInitialized", false);
+    __publicField(this, "_sorts", EMPTY_ARRAY);
     __publicField(this, "viewportData", null);
     __publicField(this, "formattedStringData", []);
     __publicField(this, "snapshotColumns", null);
@@ -10219,73 +10236,80 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     __publicField(this, "dh");
     __publicField(this, "getCachedColumns", memoizeOne(
       (snapshotColumns, virtualColumns, valueSources) => {
+        const columns = [];
+        this.pivotTable.columnSources.forEach((source, col) => {
+          const index = -this.pivotTable.columnSources.length + col;
+          columns[index] = makeColumnFromSource(source, index);
+        });
+        columns.push(...virtualColumns);
         if (snapshotColumns == null) {
-          log$3.debug2("getCachedColumns", {
-            snapshotColumns,
-            valueSources
-          });
-          return virtualColumns;
+          return columns;
         }
-        const columns = [...virtualColumns];
         for (let i = 0; i < snapshotColumns.totalCount; i += 1) {
           const isColumnInViewport = i >= snapshotColumns.offset && i < snapshotColumns.offset + snapshotColumns.count;
           for (let v = 0; v < valueSources.length; v += 1) {
             columns.push(
-              isColumnInViewport ? makeExpandableDisplayColumn(
+              isColumnInViewport ? makeColumnFromSnapshot(
                 snapshotColumns,
                 valueSources[v],
                 i,
                 virtualColumns.length
-              ) : makePlaceholderDisplayColumn(
-                valueSources[v],
-                i,
-                virtualColumns.length
-              )
+              ) : makePlaceholderColumn(valueSources[v], i, virtualColumns.length)
             );
           }
         }
-        log$3.debug2("getCachedColumns", {
-          snapshotColumns,
-          valueSources,
-          columns: columns.map(({ name }) => name)
-        });
         return columns;
       }
     ));
     __publicField(this, "getCachedTotalsColumns", memoizeOne(
-      (pivotTable, valueSources) => valueSources.map(
+      (pivotTable, valueSources, groupColumn) => valueSources.map(
         (source, col) => makeColumn({
           name: makeGrandTotalColumnName(source),
           displayName: source.name,
           description: source.description,
           type: source.type,
-          index: pivotTable.rowSources.length + col,
+          index: pivotTable.rowSources.length + col + (groupColumn == null ? 0 : 1),
           depth: 2,
           isExpanded: true,
           hasChildren: true
         })
       )
     ));
+    __publicField(this, "getCachedKeyColumns", memoizeOne(
+      (pivotTable, groupColumn) => pivotTable.rowSources.map(
+        (source, index) => makeColumnFromSource(source, index + (groupColumn == null ? 0 : 1))
+      )
+    ));
     __publicField(this, "getCachedVirtualColumns", memoizeOne(
-      (keyColumns, totalsColumns) => [...keyColumns, ...totalsColumns]
+      (groupColumn, keyColumns, totalsColumns) => groupColumn ? [groupColumn, ...keyColumns, ...totalsColumns] : [...keyColumns, ...totalsColumns]
     ));
     /**
-     * Get the cached column header groups.
+     * Get the cached header groups data, including groups array, max depth, parent map, and group map.
      * Returns groups for the key columns, totals, and the snapshot column in the current viewport.
      * Placeholder columns are not included in the groups.
      */
-    __publicField(this, "getCachedColumnHeaderGroups", memoizeOne(
-      (snapshotColumns, isRootColumnExpanded, formatValue) => getColumnGroups(
-        this.pivotTable,
-        snapshotColumns,
-        isRootColumnExpanded,
-        formatValue
-      )
+    __publicField(this, "getCachedParsedColumnHeaderData", memoizeOne(
+      (snapshotColumns, groupColumn, formatter, isRootColumnExpanded) => {
+        const columnGroups = makeColumnGroups(
+          this.pivotTable,
+          snapshotColumns,
+          isRootColumnExpanded,
+          groupColumn != null,
+          (value2, type) => this.getCachedFormattedString(formatter, value2, type, "")
+        );
+        return irisGrid.IrisGridUtils.parseColumnHeaderGroups(
+          this,
+          columnGroups,
+          (args) => new PivotColumnHeaderGroup(args)
+        );
+      }
     ));
     __publicField(this, "getColumnIndicesByNameMap", memoizeOne(
       (columns) => {
         const indices = /* @__PURE__ */ new Map();
-        columns.forEach(({ name }, i) => indices.set(name, i));
+        Object.entries(columns).forEach(
+          ([i, { name }]) => indices.set(name, Number(i))
+        );
         return indices;
       }
     ));
@@ -10417,9 +10441,6 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     this.snapshotValueSources = pivotTable.valueSources;
     this.rowBufferPages = config.rowBufferPages ?? ROW_BUFFER_PAGES;
     this.columnBufferPages = config.columnBufferPages ?? COLUMN_BUFFER_PAGES;
-    this.keyColumns = pivotTable.rowSources.map(
-      (source, col) => makeRowSourceColumn(source, col)
-    );
     this._layoutHints = {
       backColumns: [],
       hiddenColumns: [],
@@ -10436,10 +10457,38 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
   }
   set filter(_) {
   }
-  get sort() {
-    return EMPTY_ARRAY;
+  hydratePivotSort(sort) {
+    const sourceIndex = this.getColumnIndexByName(sort.column.name);
+    const source = this.columns[sourceIndex ?? -1];
+    return (source == null ? void 0 : source.sort()[sort.direction === "ASC" ? "asc" : "desc"]()) ?? null;
   }
-  set sort(_) {
+  get sort() {
+    return this._sorts ?? EMPTY_ARRAY;
+  }
+  set sort(sorts) {
+    log$3.debug("Setting sorts on pivot table", sorts);
+    this._sorts = sorts;
+    const columnBySorts = [];
+    const rowBySorts = [];
+    sorts.forEach((s) => {
+      const sort = this.hydratePivotSort(s);
+      if (sort == null) {
+        log$3.warn(`Cannot hydrate sort for source: ${s.column.name}`, s);
+        return;
+      }
+      const index = this.getColumnIndexByName(sort.name);
+      if (index == null) {
+        log$3.warn(`Cannot find index for source: ${s.column.name}`, s);
+        return;
+      }
+      if (index < 0) {
+        columnBySorts.push(sort);
+      } else {
+        rowBySorts.push(sort);
+      }
+    });
+    this.pivotTable.applyRowSort(rowBySorts);
+    this.pivotTable.applyColumnSort(columnBySorts);
   }
   get customColumns() {
     return EMPTY_ARRAY;
@@ -10484,99 +10533,79 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
   async export() {
     throw new Error("Method not implemented.");
   }
-  async showFilter() {
-    throw new Error("Method not implemented.");
-  }
-  async quickFilter() {
-    throw new Error("Method not implemented.");
+  get showExtraGroupColumn() {
+    return this.showExtraGroupCol;
   }
-  async autoResizeColumns() {
-    throw new Error("Method not implemented.");
-  }
-  async applySort() {
-    throw new Error("Method not implemented.");
-  }
-  async clearFilter() {
-    throw new Error("Method not implemented.");
+  set showExtraGroupColumn(showExtraGroupCol) {
+    if (showExtraGroupCol === this.showExtraGroupCol) {
+      return;
+    }
+    this.showExtraGroupCol = showExtraGroupCol;
+    this.dispatchEvent(
+      new EventShimCustomEvent(irisGrid.IrisGridModel.EVENT.COLUMNS_CHANGED, {
+        detail: this.columns
+      })
+    );
   }
-  async applyFilter() {
-    throw new Error("Method not implemented.");
+  get groupColumn() {
+    return this.pivotTable.rowSources.length !== 1 && this.showExtraGroupCol ? VirtualGroupColumn : null;
   }
-  async copy() {
-    throw new Error("Method not implemented.");
+  get keyColumns() {
+    return this.getCachedKeyColumns(this.pivotTable, this.groupColumn);
   }
   get totalsColumns() {
     return this.getCachedTotalsColumns(
       this.pivotTable,
-      this.snapshotValueSources
+      this.snapshotValueSources,
+      this.groupColumn
     );
   }
   get virtualColumns() {
-    return this.getCachedVirtualColumns(this.keyColumns, this.totalsColumns);
+    return this.getCachedVirtualColumns(
+      this.groupColumn,
+      this.keyColumns,
+      this.totalsColumns
+    );
   }
-  get initialColumnHeaderGroups() {
-    const groups = this.getCachedColumnHeaderGroups(
+  getParsedColumnHeaderData() {
+    return this.getCachedParsedColumnHeaderData(
       this.snapshotColumns,
-      this.isRootColumnExpanded,
-      (value2, type) => (
-        // Ignore name based formatting, pass empty column name
-        this.getCachedFormattedString(this.formatter, value2, type, "")
-      )
+      this.groupColumn,
+      this.formatter,
+      this.isRootColumnExpanded
     );
-    log$3.debug2("initialColumnHeaderGroups", groups);
-    return groups;
+  }
+  get initialColumnHeaderGroups() {
+    return this.columnHeaderGroups;
   }
   get columnHeaderMaxDepth() {
-    return this._columnHeaderMaxDepth ?? 1;
+    const { maxDepth } = this.getParsedColumnHeaderData();
+    return maxDepth;
   }
-  set columnHeaderMaxDepth(depth) {
-    this._columnHeaderMaxDepth = depth;
+  get columnHeaderParentMap() {
+    const { parentMap } = this.getParsedColumnHeaderData();
+    return parentMap;
   }
   get columnHeaderGroupMap() {
-    this.initializeColumnHeaderGroups();
-    return this._columnHeaderGroupMap;
+    const { groupMap } = this.getParsedColumnHeaderData();
+    return groupMap;
   }
   get columnHeaderGroups() {
-    this.initializeColumnHeaderGroups();
-    return this._columnHeaderGroups;
+    const { groups } = this.getParsedColumnHeaderData();
+    return groups;
   }
   set columnHeaderGroups(_groups) {
   }
-  setInternalColumnHeaderGroups(groups) {
-    if (groups === this._columnHeaderGroups) {
-      return;
-    }
-    const {
-      groups: newGroups,
-      maxDepth,
-      parentMap,
-      groupMap
-    } = irisGrid.IrisGridUtils.parseColumnHeaderGroups(
-      this,
-      groups,
-      (args) => new ExpandableColumnHeaderGroup(args)
-    );
-    this._columnHeaderGroups = newGroups;
-    this.columnHeaderMaxDepth = maxDepth;
-    this.columnHeaderParentMap = parentMap;
-    this._columnHeaderGroupMap = groupMap;
-    this._isColumnHeaderGroupsInitialized = true;
-  }
-  initializeColumnHeaderGroups() {
-    if (!this._isColumnHeaderGroupsInitialized) {
-      this.setInternalColumnHeaderGroups(this.initialColumnHeaderGroups);
-    }
-  }
   textForColumnHeader(x, depth = 0) {
     const header = this.columnAtDepth(x, depth);
-    if (isExpandableColumnHeaderGroup(header)) {
+    if (isPivotColumnHeaderGroup(header)) {
       return header.isNew ? "" : header.displayName ?? header.name;
     }
     return (header == null ? void 0 : header.displayName) ?? (header == null ? void 0 : header.name);
   }
   colorForColumnHeader(x, depth = 0, theme = {}) {
     const column = this.columnAtDepth(x, depth);
-    if (isExpandableColumnHeaderGroup(column)) {
+    if (isPivotColumnHeaderGroup(column)) {
       if (column.isTotalGroup != null && column.isTotalGroup) {
         return theme.totalsHeaderBackground ?? null;
       }
@@ -10588,7 +10617,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
   }
   getColumnHeaderGroup(modelIndex, depth) {
     const group = this.columnAtDepth(modelIndex, depth);
-    if (isExpandableColumnHeaderGroup(group)) {
+    if (isPivotColumnHeaderGroup(group)) {
       return group;
     }
     return void 0;
@@ -10625,6 +10654,10 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
   get initialMovedColumns() {
     return EMPTY_ARRAY;
   }
+  /**
+   * Get the columns in the pivot model.
+   * Returned array includes column sources with negative indexes.
+   */
   get columns() {
     return this.getCachedColumns(
       this.snapshotColumns,
@@ -10654,7 +10687,8 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     return false;
   }
   isColumnSortable(columnIndex) {
-    return false;
+    var _a;
+    return ((_a = this.columns[columnIndex]) == null ? void 0 : _a.isSortable) ?? false;
   }
   get isTotalsAvailable() {
     return false;
@@ -10720,10 +10754,10 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     this.formattedStringData = [];
     this.viewportData = this.extractSnapshotData(snapshot);
     this.updatePendingExpandCollapseState();
-    this.setInternalColumnHeaderGroups(this.initialColumnHeaderGroups);
     log$3.debug2("Pivot updated", {
       columns: this.columns,
-      snapshot: this.snapshotColumns,
+      snapshot,
+      snapshotColumns: this.snapshotColumns,
       viewport: (_a = this.viewportData) == null ? void 0 : _a.rowTotalCount,
       columnCount: this.columnCount,
       rowCount: this.rowCount
@@ -10774,10 +10808,7 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
       const keyData = /* @__PURE__ */ new Map();
       const totalsData = /* @__PURE__ */ new Map();
       for (let c = 0; c < keys2.length; c += 1) {
-        keyData.set(c, {
-          // Only render the value for the deepest level
-          value: c === depth - 1 ? keys2[c] : void 0
-        });
+        keyData.set(c, { value: keys2[c] });
       }
       for (let v = 0; v < snapshot.valueSources.length; v += 1) {
         totalsData.set(v, {
@@ -10988,41 +11019,33 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     this.setColumnExpanded(this.keyColumns.length, false, true);
   }
   isColumnExpandable(x, depth) {
-    var _a, _b;
-    log$3.debug2("isColumnExpandable", {
-      x,
-      depth,
-      name: (_a = this.columns[x]) == null ? void 0 : _a.name,
-      v: this.virtualColumns,
-      cC: this.columnCount,
-      c: this.columns
-    });
-    if (x >= this.keyColumns.length && x < this.virtualColumns.length) {
+    var _a;
+    if (this.isGrandTotalsColumn(x)) {
       return !this.isRootColumnExpanded || this.columns.length > this.virtualColumns.length;
     }
     if (x < this.keyColumns.length) {
       return false;
     }
-    return ((_b = this.columns[x]) == null ? void 0 : _b.hasChildren) ?? false;
+    return ((_a = this.columns[x]) == null ? void 0 : _a.hasChildren) ?? false;
+  }
+  isGrandTotalsColumn(x) {
+    const totalsStartIndex = this.keyColumns.length + (this.groupColumn == null ? 0 : 1);
+    return x >= totalsStartIndex && x < this.virtualColumns.length;
   }
   isColumnExpanded(x) {
     var _a;
-    if (x >= this.keyColumns.length && x < this.virtualColumns.length) {
+    if (this.isGrandTotalsColumn(x)) {
       return this.isRootColumnExpanded;
     }
     return ((_a = this.columns[x]) == null ? void 0 : _a.isExpanded) ?? false;
   }
   setColumnExpanded(x, isExpanded, expandDescendants = false) {
-    var _a;
-    log$3.debug2("[0] setColumnExpanded", {
+    log$3.debug2("setColumnExpanded", {
       x,
       isExpanded,
-      name: (_a = this.columns[x]) == null ? void 0 : _a.name,
-      v: this.virtualColumns,
-      cC: this.columnCount,
-      c: this.columns
+      expandDescendants
     });
-    if (x >= this.keyColumns.length && x < this.virtualColumns.length) {
+    if (this.isGrandTotalsColumn(x)) {
       this.pivotTable.setRootColumnExpanded(isExpanded, expandDescendants);
       this.isRootColumnExpanded = isExpanded;
       return;
@@ -11088,15 +11111,27 @@ class IrisGridPivotModel extends irisGrid.IrisGridModel {
     this.formattedStringData[x][y] = text;
   }
   dataForCell(x, y) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     const keyCount = this.keyColumns.length;
-    if (x < keyCount) {
-      return (_a = this.row(y)) == null ? void 0 : _a.keyData.get(x);
+    const groupOffset = this.groupColumn == null ? 0 : 1;
+    if (groupOffset === 1 && x === 0) {
+      const rowDepth = ((_a = this.row(y)) == null ? void 0 : _a.depth) ?? 2;
+      return y === 0 ? (
+        // Empty value for the group cell in the totals row
+        { value: "" }
+      ) : {
+        // Render all key values except the last one in the group column
+        // to match the Rollup UI
+        value: rowDepth < keyCount ? (_c = (_b = this.row(y)) == null ? void 0 : _b.keyData.get(rowDepth - 1)) == null ? void 0 : _c.value : ""
+      };
+    }
+    if (x < keyCount + groupOffset) {
+      return (_d = this.row(y)) == null ? void 0 : _d.keyData.get(x - groupOffset);
     }
     if (x < this.virtualColumns.length) {
-      return (_b = this.row(y)) == null ? void 0 : _b.totalsData.get(x - keyCount);
+      return (_e = this.row(y)) == null ? void 0 : _e.totalsData.get(x - keyCount - groupOffset);
     }
-    return (_c = this.row(y)) == null ? void 0 : _c.data.get(x - this.virtualColumns.length);
+    return (_f = this.row(y)) == null ? void 0 : _f.data.get(x - this.virtualColumns.length);
   }
   formatForCell(x, y) {
     var _a;
@@ -11169,8 +11204,8 @@ function useIrisGridPivotModel(fetch) {
     [model]
   );
   const makeModel = React.useCallback(async () => {
-    const pivotWidget = await fetch();
-    return new IrisGridPivotModel(dh, pivotWidget);
+    const pivotTable = await fetch();
+    return new IrisGridPivotModel(dh, pivotTable);
   }, [dh, fetch]);
   const reload = React.useCallback(async () => {
     setIsLoading(true);
@@ -11218,6 +11253,22 @@ function useIrisGridPivotModel(fetch) {
   }
   throw new Error("Invalid state");
 }
+const log$2 = Log.module("@deephaven/js-plugin-pivot/usePivotTableFetch");
+function usePivotTableFetch(fetch) {
+  const api = jsapiBootstrap.useApi();
+  return React.useCallback(
+    () => fetch().then((widget) => {
+      log$2.debug("Pivot fetch result:", widget);
+      if (!isCorePlusDh(api)) {
+        throw new Error("CorePlus is not available");
+      }
+      const pivotTable = new api.coreplus.pivot.PivotTable(widget);
+      log$2.debug("Created pivot table:", pivotTable);
+      return pivotTable;
+    }),
+    [api, fetch]
+  );
+}
 class PivotColumnGroupMouseHandler extends GridMouseHandler {
   constructor(irisGrid2) {
     super();
@@ -11233,6 +11284,26 @@ class PivotColumnGroupMouseHandler extends GridMouseHandler {
     }
     return null;
   }
+  setCursor(gridPoint, grid) {
+    const { column, columnHeaderDepth } = gridPoint;
+    if (this.isExpandableColumnGroup(column, columnHeaderDepth)) {
+      this.cursor = "pointer";
+      return { stopPropagation: false, preventDefault: false };
+    }
+    this.cursor = null;
+    return false;
+  }
+  isExpandableColumnGroup(column, columnHeaderDepth = 0) {
+    const { model } = this.irisGrid.props;
+    if (column == null || model == null) {
+      return false;
+    }
+    const group = model.getColumnHeaderGroup(column, columnHeaderDepth);
+    return group != null && isPivotColumnHeaderGroup(group) && group.isExpandable;
+  }
+  onMove(gridPoint, grid) {
+    return this.setCursor(gridPoint, grid);
+  }
   // We need to remember where the down started, because the canvas element will trigger a click wherever mouseUp is
   onDown(gridPoint) {
     this.column = this.getColumnGroupFromGridPoint(gridPoint);
@@ -11240,165 +11311,77 @@ class PivotColumnGroupMouseHandler extends GridMouseHandler {
   }
   onClick(gridPoint, grid, event) {
     const column = this.getColumnGroupFromGridPoint(gridPoint);
-    if (column != null && column === this.column) {
-      this.irisGrid.toggleExpandColumn(column);
+    if (column != null && column === this.column && this.isExpandableColumnGroup(column, gridPoint.columnHeaderDepth)) {
+      this.irisGrid.toggleExpandColumn(
+        column,
+        GridUtils.isModifierKeyDown(event)
+      );
+      return true;
+    }
+    return false;
+  }
+}
+class PivotSortMouseHandler extends GridMouseHandler {
+  constructor(irisGrid2) {
+    super();
+    __publicField(this, "columnSource");
+    __publicField(this, "irisGrid");
+    this.columnSource = null;
+    this.irisGrid = irisGrid2;
+  }
+  /**
+   * Get the column source from a grid point
+   * @param gridPoint The grid point to check
+   * @returns The column source index if the grid point is in a column source header, else null
+   */
+  getColumnSourceHeaderFromGridPoint(gridPoint) {
+    const { column, row, columnHeaderDepth } = gridPoint;
+    const { model } = this.irisGrid.props;
+    assertNotNull(model);
+    const sourceIndex = columnHeaderDepth != null ? -columnHeaderDepth : null;
+    if (column == null || row !== null || columnHeaderDepth == null) {
+      return null;
+    }
+    const group = model.getColumnHeaderGroup(column, columnHeaderDepth);
+    if (sourceIndex != null && sourceIndex < 0 && isIrisGridPivotModel(model) && model.isColumnSortable(sourceIndex) && isPivotColumnHeaderGroup(group) && group.isKeyColumnGroup) {
+      return sourceIndex;
+    }
+    return null;
+  }
+  // We need to remember where the down started, because the canvas element will trigger a click where mouseUp is
+  onDown(gridPoint, grid, event) {
+    this.columnSource = this.getColumnSourceHeaderFromGridPoint(gridPoint);
+    return false;
+  }
+  onClick(gridPoint, grid, event) {
+    const columnSource = this.getColumnSourceHeaderFromGridPoint(gridPoint);
+    if (columnSource != null && columnSource === this.columnSource) {
+      const addToExisting = components.ContextActionUtils.isModifierKeyDown(event);
+      this.irisGrid.toggleSort(columnSource, addToExisting);
       return true;
     }
     return false;
   }
 }
+function usePivotMouseHandlers() {
+  return React.useMemo(
+    () => [
+      (irisGrid2) => new PivotColumnGroupMouseHandler(irisGrid2),
+      (irisGrid2) => new PivotSortMouseHandler(irisGrid2)
+    ],
+    []
+  );
+}
 function getColumnGroupName(model, modelColumn, depth) {
   var _a;
   return (_a = model.getColumnHeaderGroup(modelColumn, depth ?? 0)) == null ? void 0 : _a.name;
 }
 class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
-  drawColumnHeaders(context, state) {
-    const {
-      mouseX,
-      mouseY,
-      theme,
-      metrics,
-      draggingColumnSeparator,
-      isDragging,
-      model
-    } = state;
-    const {
-      columnHeaderHeight,
-      floatingColumns,
-      gridX,
-      width,
-      visibleColumns,
-      allColumnWidths,
-      allColumnXs,
-      floatingLeftColumnCount,
-      floatingLeftWidth,
-      floatingRightWidth,
-      modelColumns,
-      columnHeaderMaxDepth
-    } = metrics;
-    if (columnHeaderHeight <= 0) {
-      return;
-    }
-    const {
-      headerHiddenSeparatorSize,
-      headerHiddenSeparatorHoverColor,
-      headerSeparatorColor,
-      headerSeparatorHoverColor
-    } = theme;
-    const hiddenSeparatorHeight = columnHeaderHeight * 0.5;
-    const hiddenY = columnHeaderHeight * (columnHeaderMaxDepth - 1) + columnHeaderHeight * 0.5 - hiddenSeparatorHeight * 0.5;
-    const containsFrozenColumns = floatingLeftColumnCount > 0;
-    if (!isExpandableColumnGridModel(model)) {
-      throw new Error("Unsupported model type");
-    }
-    context.save();
-    this.drawColumnHeadersForRange(
-      context,
-      state,
-      [visibleColumns[0], visibleColumns[visibleColumns.length - 1]],
-      {
-        minX: gridX + floatingLeftWidth,
-        maxX: width - floatingRightWidth
-      }
-    );
-    if (containsFrozenColumns) {
-      this.drawColumnHeadersForRange(
-        context,
-        state,
-        [floatingColumns[0], floatingColumns[floatingColumns.length - 1]],
-        {
-          minX: gridX,
-          maxX: gridX + floatingLeftWidth
-        }
-      );
-    }
-    if (headerSeparatorColor) {
-      context.strokeStyle = headerSeparatorColor;
-      const hiddenColumns = [...allColumnWidths.entries()].filter(([_, w]) => w === 0).map(([index]) => index);
-      context.beginPath();
-      context.fillStyle = headerSeparatorColor;
-      for (let i = 0; i < hiddenColumns.length; i += 1) {
-        const column = hiddenColumns[i];
-        const columnX = getOrThrow(allColumnXs, column);
-        const columnWidth = getOrThrow(allColumnWidths, column);
-        const minX = gridX + columnX + columnWidth + 0.5 - headerHiddenSeparatorSize * 0.5;
-        context.rect(
-          minX,
-          hiddenY,
-          headerHiddenSeparatorSize,
-          hiddenSeparatorHeight
-        );
-      }
-      context.fill();
-    }
-    if (headerSeparatorHoverColor) {
-      let { index: highlightedSeparator, depth } = draggingColumnSeparator ?? {};
-      if (highlightedSeparator == null && mouseX != null && mouseY != null) {
-        const separator = GridColumnSeparatorMouseHandler$1.getColumnSeparator(
-          GridUtils.getGridPointFromXY(mouseX, mouseY, metrics),
-          metrics,
-          model,
-          theme
-        );
-        highlightedSeparator = separator == null ? void 0 : separator.index;
-        depth = separator == null ? void 0 : separator.depth;
-      }
-      let shouldDrawSeparator;
-      if (highlightedSeparator == null) {
-        shouldDrawSeparator = false;
-      } else {
-        const columnIndex = modelColumns.get(highlightedSeparator);
-        const nextColumnIndex = modelColumns.get(highlightedSeparator + 1);
-        if (columnIndex == null || nextColumnIndex == null) {
-          shouldDrawSeparator = false;
-        } else {
-          shouldDrawSeparator = getColumnGroupName(model, columnIndex, depth) !== getColumnGroupName(model, nextColumnIndex, depth);
-        }
-      }
-      if (shouldDrawSeparator && highlightedSeparator != null && depth != null && (!isDragging || draggingColumnSeparator != null)) {
-        context.strokeStyle = headerSeparatorHoverColor;
-        const columnX = getOrThrow(allColumnXs, highlightedSeparator);
-        const columnWidth = getOrThrow(allColumnWidths, highlightedSeparator);
-        const x = gridX + columnX + columnWidth + 0.5;
-        const visibleColumnIndex = visibleColumns.indexOf(highlightedSeparator);
-        const nextColumn = visibleColumnIndex < visibleColumns.length - 1 ? visibleColumns[visibleColumnIndex + 1] : null;
-        const nextColumnWidth = nextColumn != null ? allColumnWidths.get(nextColumn) : null;
-        const isColumnHidden = columnWidth === 0;
-        const isNextColumnHidden = nextColumnWidth != null && nextColumnWidth === 0;
-        if (isColumnHidden) {
-          context.strokeStyle = headerHiddenSeparatorHoverColor;
-          context.fillStyle = headerHiddenSeparatorHoverColor;
-          context.fillRect(
-            x,
-            hiddenY,
-            headerHiddenSeparatorSize * 0.5,
-            hiddenSeparatorHeight
-          );
-        } else if (isNextColumnHidden) {
-          context.fillStyle = headerSeparatorHoverColor;
-          context.fillRect(
-            x - headerHiddenSeparatorSize * 0.5,
-            hiddenY,
-            headerHiddenSeparatorSize * 0.5,
-            hiddenSeparatorHeight
-          );
-        }
-        context.beginPath();
-        context.moveTo(
-          x,
-          (columnHeaderMaxDepth - depth - 1) * columnHeaderHeight
-        );
-        context.lineTo(
-          x,
-          (columnHeaderMaxDepth - depth) * columnHeaderHeight - 1
-        );
-        context.stroke();
-      }
-    }
-    context.restore();
-  }
   drawColumnHeadersAtDepth(context, state, range, bounds, depth) {
     const { metrics, model, theme } = state;
+    if (!isIrisGridPivotModel(model)) {
+      throw new Error("Unsupported model type");
+    }
     const {
       modelColumns,
       allColumnXs,
@@ -11432,10 +11415,14 @@ class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
       while (columnIndex <= endIndex) {
         const { columnCount } = metrics;
         const modelColumn = getOrThrow(modelColumns, columnIndex);
-        const columnGroupColor = isExpandableColumnGridModel(model) ? model.colorForColumnHeader(modelColumn, depth, theme) : model.colorForColumnHeader(modelColumn, depth);
+        const columnGroupColor = model.colorForColumnHeader(
+          modelColumn,
+          depth,
+          theme
+        );
         const headerGroup = model.getColumnHeaderGroup(modelColumn, depth ?? 0);
-        const isExpandable = isExpandableColumnHeaderGroup(headerGroup) && headerGroup.isExpandable;
-        const isExpanded = isExpandableColumnHeaderGroup(headerGroup) && headerGroup.isExpanded;
+        const isExpandable = isPivotColumnHeaderGroup(headerGroup) && headerGroup.isExpandable;
+        const isExpanded = isPivotColumnHeaderGroup(headerGroup) && headerGroup.isExpanded;
         const columnGroupName = getColumnGroupName(model, modelColumn, depth);
         let columnGroupLeft = getOrThrow(allColumnXs, columnIndex) + gridX;
         let columnGroupRight = columnGroupLeft + getOrThrow(allColumnWidths, columnIndex);
@@ -11481,7 +11468,8 @@ class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
             },
             bounds,
             isExpandable,
-            isExpanded
+            isExpanded,
+            jsapiUtils.TableUtils.getSortForColumn(model.sort, columnGroupName)
           );
         }
         columnIndex += 1;
@@ -11489,7 +11477,7 @@ class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
     }
     context.restore();
   }
-  drawColumnHeader(context, state, columnText, columnX, columnWidth, style, bounds, isExpandable = false, isExpanded = false) {
+  drawColumnHeader(context, state, columnText, columnX, columnWidth, style, bounds, isExpandable = false, isExpanded = false, sort = null) {
     if (columnWidth <= 0) {
       return;
     }
@@ -11597,6 +11585,15 @@ class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
         isExpanded
       );
     }
+    this.drawColumnSourceSortIndicator(
+      context,
+      state,
+      sort,
+      columnText,
+      columnX,
+      columnWidth,
+      { minX, maxX }
+    );
     context.restore();
   }
   drawColumnHeaderTreeMarker(context, state, columnX, columnWidth, headerY, headerHeight, treeBox, isExpanded) {
@@ -11624,39 +11621,60 @@ class IrisGridPivotRenderer extends irisGrid.IrisGridRenderer {
       isExpanded
     );
   }
+  drawColumnSourceSortIndicator(context, state, sort, columnText, columnX, columnWidth, bounds) {
+    const { metrics, theme } = state;
+    const { gridX, columnHeaderHeight } = metrics;
+    const { headerHorizontalPadding, iconSize: themeIconSize } = theme;
+    const iconSize = Math.round(themeIconSize * 0.75);
+    if (sort == null) {
+      return;
+    }
+    const icon = this.getSortIcon(sort, iconSize);
+    if (!icon) {
+      return;
+    }
+    const textWidth = this.getCachedHeaderWidth(context, columnText);
+    const textRight = gridX + columnX + textWidth + headerHorizontalPadding;
+    let { maxX } = bounds;
+    maxX -= headerHorizontalPadding;
+    const defaultX = gridX + columnX + columnWidth - iconSize;
+    const x = textRight > maxX ? textRight + 1 : Math.min(maxX, defaultX);
+    const y = (columnHeaderHeight - iconSize) * 0.5;
+    context.save();
+    context.fillStyle = theme.headerSortBarColor;
+    context.translate(x, y);
+    context.fill(icon);
+    context.restore();
+  }
 }
-const IrisGridPivotTheme = Object.freeze({
+function usePivotRenderer() {
+  return React.useMemo(() => new IrisGridPivotRenderer(), []);
+}
+const IrisGridPivotThemeColors = Object.freeze({
   columnSourceHeaderBackground: "var(--dh-color-grid-bg)",
   totalsHeaderBackground: "var(--dh-color-grid-bg)"
 });
-const log$2 = Log.module("@deephaven/js-plugin-pivot/PivotWidget");
+function getIrisGridPivotTheme() {
+  return Object.freeze({
+    ...components.resolveCssVariablesInRecord(IrisGridPivotThemeColors)
+  });
+}
+const log$1 = Log.module("@deephaven/js-plugin-pivot/usePivotTheme");
+function usePivotTheme() {
+  const theme = components.useTheme();
+  return React.useMemo(() => {
+    log$1.debug("Theme changed, updating pivot theme", theme);
+    return getIrisGridPivotTheme();
+  }, [theme]);
+}
 function PivotWidget({
   fetch
 }) {
-  const dh = jsapiBootstrap.useApi();
-  const mouseHandlers = React.useMemo(
-    () => [(irisGrid2) => new PivotColumnGroupMouseHandler(irisGrid2)],
-    []
-  );
-  const renderer = React.useMemo(() => new IrisGridPivotRenderer(), []);
-  const theme = components.useTheme();
-  const pivotTheme = React.useMemo(() => {
-    log$2.debug("Theme changed, updating pivot theme", theme);
-    return components.resolveCssVariablesInRecord(IrisGridPivotTheme);
-  }, [theme]);
-  const pivotTableFetch = React.useCallback(
-    () => fetch().then((result) => {
-      log$2.debug("pivotWidget fetch result:", result);
-      if (!isCorePlusDh(dh)) {
-        throw new Error("CorePlus is not available");
-      }
-      const pivot = new dh.coreplus.pivot.PivotTable(result);
-      log$2.debug("Created pivot table:", pivot);
-      return pivot;
-    }),
-    [dh, fetch]
-  );
-  const fetchResult = useIrisGridPivotModel(pivotTableFetch);
+  const pivotFetch = usePivotTableFetch(fetch);
+  const mouseHandlers = usePivotMouseHandlers();
+  const renderer = usePivotRenderer();
+  const pivotTheme = usePivotTheme();
+  const fetchResult = useIrisGridPivotModel(pivotFetch);
   if (fetchResult.status === "loading") {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(components.LoadingOverlay, { isLoading: true });
   }
@@ -11680,70 +11698,82 @@ function PivotWidget({
     }
   );
 }
-const log$1 = Log.module("@deephaven/js-plugin-pivot/useHydratePivotGrid");
-function useHydratePivotGrid(fetch, id, metadata) {
+const log = Log.module("@deephaven/js-plugin-pivot/useHydratePivotGrid");
+function useHydratePivotGrid(id, metadata) {
+  assertNotNull(metadata, "Missing Pivot metadata");
+  const objectFetch = jsapiBootstrap.useObjectFetch(metadata);
   const api = jsapiBootstrap.useApi();
   const loadPlugin = dashboardCorePlugins.useLoadTablePlugin();
-  const fetchTable = React.useCallback(
-    () => fetch().then((result) => {
-      log$1.debug("pivotWidget fetch result:", result);
-      if (!isCorePlusDh(api)) {
-        throw new Error("CorePlus is not available");
-      }
-      const pivot = new api.coreplus.pivot.PivotTable(result);
-      log$1.debug("Created pivot table:", pivot);
-      return pivot;
-    }),
-    [api, fetch]
-  );
-  const mouseHandlers = React.useMemo(
-    () => [(irisGrid2) => new PivotColumnGroupMouseHandler(irisGrid2)],
-    []
-  );
-  const renderer = React.useMemo(() => new IrisGridPivotRenderer(), []);
-  const theme = components.useTheme();
-  const pivotTheme = React.useMemo(() => {
-    log$1.debug("Theme changed, updating pivot theme", theme);
-    return components.resolveCssVariablesInRecord(IrisGridPivotTheme);
-  }, [theme]);
-  const hydratedProps = React.useMemo(
-    () => ({
+  const mouseHandlers = usePivotMouseHandlers();
+  const renderer = usePivotRenderer();
+  const theme = usePivotTheme();
+  const { status } = objectFetch;
+  if (status === "loading") {
+    log.debug("Widget is loading");
+    return { status: "loading" };
+  }
+  if (status === "error") {
+    log.debug("Error fetching widget:", objectFetch.error);
+    return {
+      status: "error",
+      error: objectFetch.error
+    };
+  }
+  const { fetch } = objectFetch;
+  return {
+    status: "success",
+    props: {
       loadPlugin,
       localDashboardId: id,
-      makeModel: async () => {
-        const pivotWidget = await fetchTable();
-        return new IrisGridPivotModel(api, pivotWidget);
+      makeModel: async function makeModel() {
+        log.debug("Fetching pivot widget");
+        const widget = await fetch();
+        log.debug("Pivot fetch result:", widget);
+        if (!isCorePlusDh(api)) {
+          throw new Error("CorePlus is not available");
+        }
+        const pivotTable = new api.coreplus.pivot.PivotTable(widget);
+        log.debug("Created pivot table:", pivotTable);
+        return new IrisGridPivotModel(api, pivotTable);
       },
       metadata,
       mouseHandlers,
       renderer,
-      theme: pivotTheme
-    }),
-    [
-      api,
-      fetchTable,
-      id,
-      loadPlugin,
-      metadata,
-      mouseHandlers,
-      renderer,
-      pivotTheme
-    ]
-  );
-  return hydratedProps;
-}
-function PivotPanel(props) {
-  const { localDashboardId, fetch, metadata } = props;
-  const hydratedProps = useHydratePivotGrid(fetch, localDashboardId, metadata);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    dashboardCorePlugins.IrisGridPanel,
-    {
-      ...props,
-      ...hydratedProps
+      theme
     }
-  );
+  };
 }
-PivotPanel.COMPONENT = "PivotPanel";
+const PivotPanel = React.forwardRef(
+  // Unconnected IrisGridPanel type is not exported from dashboard-core-plugins
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (panelProps, ref) => {
+    const { localDashboardId, metadata, panelState, ...props } = panelProps;
+    const hydrateResult = useHydratePivotGrid(localDashboardId, metadata);
+    if (hydrateResult.status === "loading") {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(components.LoadingOverlay, { isLoading: true });
+    }
+    if (hydrateResult.status === "error") {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        components.LoadingOverlay,
+        {
+          errorMessage: getErrorMessage(hydrateResult.error),
+          isLoading: false
+        }
+      );
+    }
+    const { props: hydratedProps } = hydrateResult;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      dashboardCorePlugins.IrisGridPanel,
+      {
+        ref,
+        ...props,
+        ...hydratedProps,
+        panelState
+      }
+    );
+  }
+);
+PivotPanel.displayName = "PivotPanel";
 const PivotPlugin = {
   name: "@deephaven/js-plugin-pivot",
   type: plugin.PluginType.WIDGET_PLUGIN,
@@ -11753,62 +11783,15 @@ const PivotPlugin = {
   icon: icons.dhTable,
   title: "Pivot Table"
 };
-const urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
-let nanoid = (size = 21) => {
-  let id = "";
-  let bytes = crypto.getRandomValues(new Uint8Array(size |= 0));
-  while (size--) {
-    id += urlAlphabet[bytes[size] & 63];
-  }
-  return id;
-};
 const VARIABLE_TYPE = "PivotTable";
-const log = Log.module("@deephaven/js-plugin-pivot/DashboardPlugin");
-function DashboardPlugin({
-  id,
-  layout,
-  registerComponent
-}) {
-  const handlePanelOpen = React.useCallback(
-    ({
-      dragEvent,
-      fetch,
-      metadata = {},
-      panelId = nanoid(),
-      widget
-    }) => {
-      const { name, type } = widget;
-      if (type !== VARIABLE_TYPE) {
-        return;
-      }
-      log.info("Panel opened of type", type);
-      const config = {
-        type: "react-component",
-        component: PivotPanel.COMPONENT,
-        props: {
-          localDashboardId: id,
-          id: panelId,
-          metadata: {
-            ...metadata,
-            ...widget
-          },
-          fetch
-        },
-        title: name ?? void 0,
-        id: panelId
-      };
-      const { root: root2 } = layout;
-      dashboard.LayoutUtils.openComponent({ root: root2, config, dragEvent });
-    },
-    [id, layout]
-  );
-  React.useEffect(() => {
-    const cleanups = [registerComponent(PivotPanel.COMPONENT, PivotPanel)];
-    return () => {
-      cleanups.forEach((cleanup) => cleanup());
-    };
-  }, [registerComponent]);
-  dashboard.useListener(layout.eventHub, "PanelEvent.OPEN", handlePanelOpen);
+function DashboardPlugin(dashboardProps) {
+  assertNotNull(PivotPanel.displayName);
+  dashboard.useDashboardPanel({
+    dashboardProps,
+    componentName: PivotPanel.displayName,
+    supportedTypes: VARIABLE_TYPE,
+    component: PivotPanel
+  });
   return null;
 }
 exports.DashboardPlugin = DashboardPlugin;