@platforma-sdk/ui-vue 1.40.0 → 1.40.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.40.0",
+  "version": "1.40.2",
   "type": "module",
   "main": "dist/lib.js",
   "styles": "dist/lib.js",
@@ -12,7 +12,6 @@
     "./styles": "./dist/lib.js"
   },
   "dependencies": {
-    "@types/lodash": "^4.17.16",
     "@types/node": "~20.16.15",
     "@types/semver": "^7.7.0",
     "@types/sortablejs": "^1.15.6",
@@ -27,11 +26,10 @@
     "@vueuse/integrations": "^13.3.0",
     "sortablejs": "^1.15.6",
     "d3-format": "^3.1.0",
-    "lodash": "^4.17.17",
     "zod": "~3.23.8",
+    "@platforma-sdk/model": "~1.40.1",
     "@milaboratories/biowasm-tools": "^1.1.0",
-    "@milaboratories/uikit": "2.3.10",
-    "@platforma-sdk/model": "~1.40.0"
+    "@milaboratories/uikit": "2.3.11"
   },
   "devDependencies": {
     "happy-dom": "^15.11.7",
@@ -44,9 +42,9 @@
     "vitest": "^2.1.9",
     "vue-tsc": "^2.2.10",
     "yarpm": "^1.2.0",
-    "@milaboratories/ts-configs": "1.0.4",
-    "@milaboratories/build-configs": "1.0.4",
     "@milaboratories/eslint-config": "^1.0.4",
+    "@milaboratories/build-configs": "1.0.4",
+    "@milaboratories/ts-configs": "1.0.4",
     "@milaboratories/helpers": "^1.6.17"
   },
   "scripts": {

package/src/AgGridVue/selection.ts

@@ -6,15 +6,17 @@ import type { GridApi } from 'ag-grid-enterprise';
  * @returns The number of selected rows.
  */
 export function getSelectedRowsCount(gridApi: GridApi) {
-  const rowModel = gridApi.getGridOption('rowModelType');
-  switch (rowModel) {
-    case 'clientSide': {
-      return gridApi.getSelectedRows().length;
-    }
-    case 'serverSide': {
-      const state = gridApi.getServerSideSelectionState();
-      // `state.selectAll` flag is ignored as we assume `selectAll` was used to select all rows
-      return state?.toggledNodes?.length ?? 0;
+  if (!gridApi.getGridOption('loading')) {
+    const rowModel = gridApi.getGridOption('rowModelType');
+    switch (rowModel) {
+      case 'clientSide': {
+        return gridApi.getSelectedRows().length;
+      }
+      case 'serverSide': {
+        const state = gridApi.getServerSideSelectionState();
+        // `state.selectAll` flag is ignored as we assume `selectAll` was used to select all rows
+        return state?.toggledNodes?.length ?? 0;
+      }
     }
   }
   return 0;
@@ -69,7 +71,7 @@ export function deselectAll(gridApi: GridApi) {
  * @returns The total number of rows.
  */
 export function getTotalRowsCount(gridApi: GridApi) {
-  return gridApi.getDisplayedRowCount();
+  return gridApi.getGridOption('loading') ? 0 : gridApi.getDisplayedRowCount();
 }
 
 /**

package/src/components/PlAgDataTable/PlAgDataTableV2.vue

@@ -4,11 +4,12 @@ import {
 } from '@milaboratories/helpers';
 import type {
   AxisId,
+  AxisSpec,
   PlDataTableGridStateCore,
   PlDataTableStateV2,
   PlSelectionModel,
+  PlTableColumnIdJson,
   PTableColumnSpec,
-  PTableColumnSpecJson,
   PTableKey,
 } from '@platforma-sdk/model';
 import {
@@ -49,7 +50,6 @@ import PlAgDataTableSheets from './PlAgDataTableSheets.vue';
 import {
   focusRow,
   makeOnceTracker,
-  trackFirstDataRendered,
 } from './sources/focus-row';
 import {
   autoSizeRowNumberColumn,
@@ -59,7 +59,6 @@ import type {
   PlAgCellButtonAxisParams,
 } from './sources/table-source-v2';
 import {
-  makeRowId,
   calculateGridOptions,
 } from './sources/table-source-v2';
 import type {
@@ -69,7 +68,8 @@ import type {
   PlAgOverlayNoRowsParams,
   PlDataTableSettingsV2,
   PlDataTableSheetsSettings,
-  PTableKeyJson,
+  PlTableLabeledSelectionModel,
+  PlTableRowIdJson,
 } from './types';
 import {
   useTableState,
@@ -82,6 +82,7 @@ const tableState = defineModel<PlDataTableStateV2>({
   required: true,
 });
 const selection = defineModel<PlSelectionModel>('selection');
+const selectionLabeled = defineModel<PlTableLabeledSelectionModel>('selectionLabeled');
 const props = defineProps<{
   /** Required component settings */
   settings: Readonly<PlDataTableSettingsV2>;
@@ -183,10 +184,10 @@ const firstDataRenderedTracker = makeOnceTracker<GridApi<PlAgDataTableV2Row>>();
 const gridOptions = shallowRef<GridOptions<PlAgDataTableV2Row>>({
   animateRows: false,
   suppressColumnMoveAnimation: true,
-  cellSelection: selection.value === undefined,
+  cellSelection: !selection.value && !selectionLabeled.value,
   initialState: gridState.value,
   autoSizeStrategy: { type: 'fitCellContents' },
-  rowSelection: selection.value !== undefined
+  rowSelection: selection.value || selectionLabeled.value
     ? {
         mode: 'multiRow',
         selectAll: 'all',
@@ -197,14 +198,18 @@ const gridOptions = shallowRef<GridOptions<PlAgDataTableV2Row>>({
       }
     : undefined,
   onSelectionChanged: (event) => {
+    const state = event.api.getServerSideSelectionState();
     if (selection.value) {
-      const state = event.api.getServerSideSelectionState();
-      const selectedKeys = state?.toggledNodes?.map((nodeId) => parseJson(nodeId as PTableKeyJson)) ?? [];
+      const selectedKeys = state?.toggledNodes?.map((nodeId) => parseJson(nodeId as PlTableRowIdJson).axesKey) ?? [];
       selection.value = { ...selection.value, selectedKeys };
     }
+    if (selectionLabeled.value) {
+      const selectedLabeledKeys = state?.toggledNodes?.map((nodeId) => parseJson(nodeId as PlTableRowIdJson).labeled) ?? [];
+      selectionLabeled.value = { ...selectionLabeled.value, selectedLabeledKeys };
+    }
   },
   onRowDoubleClicked: (event) => {
-    if (event.data && event.data.key) emit('rowDoubleClicked', event.data.key);
+    if (event.data && event.data.axesKey) emit('rowDoubleClicked', event.data.axesKey);
   },
   defaultColDef: {
     suppressHeaderMenuButton: true,
@@ -247,7 +252,6 @@ const gridOptions = shallowRef<GridOptions<PlAgDataTableV2Row>>({
   },
   onGridReady: (event) => {
     const api = event.api;
-    trackFirstDataRendered(api, firstDataRenderedTracker);
     autoSizeRowNumberColumn(api);
     const setGridOption = (
       key: ManagedGridOptionKey,
@@ -300,16 +304,16 @@ const gridOptions = shallowRef<GridOptions<PlAgDataTableV2Row>>({
 function makePartialState(state: GridState): PlDataTableGridStateCore {
   return {
     columnOrder: state.columnOrder as {
-      orderedColIds: PTableColumnSpecJson[];
+      orderedColIds: PlTableColumnIdJson[];
     } | undefined,
     sort: state.sort as {
       sortModel: {
-        colId: PTableColumnSpecJson;
+        colId: PlTableColumnIdJson;
         sort: 'asc' | 'desc';
       }[];
     } | undefined,
     columnVisibility: state.columnVisibility as {
-      hiddenColIds: PTableColumnSpecJson[];
+      hiddenColIds: PlTableColumnIdJson[];
     } | undefined,
   };
 };
@@ -362,7 +366,10 @@ watch(
 );
 
 defineExpose<PlAgDataTableV2Controller>({
-  focusRow: (rowKey) => focusRow(makeRowId(rowKey), firstDataRenderedTracker),
+  focusRow: (rowKey) => focusRow(
+    (row) => isJsonEqual(row.data?.axesKey, rowKey),
+    firstDataRenderedTracker,
+  ),
 });
 
 // Propagate columns for filter component
@@ -378,6 +385,12 @@ watchCached(
           selectedKeys: [],
         };
       }
+      if (selectionLabeled.value) {
+        selectionLabeled.value = {
+          spec: [],
+          selectedLabeledKeys: [],
+        };
+      }
     } else {
       const isColDef = (def: ColDef | ColGroupDef): def is ColDef =>
         !('children' in def);
@@ -386,18 +399,35 @@ watchCached(
         .map((def) => def.colId)
         .filter((colId) => colId !== undefined)
         .filter((colId) => colId !== PlAgDataTableRowNumberColId)
-        .map((colId) => parseJson(colId as PTableColumnSpecJson))
+        .map((colId) => parseJson(colId as PlTableColumnIdJson))
         ?? [];
-      filterableColumns.value = columns;
+      filterableColumns.value = columns.map((column) => column.labeled);
       if (selection.value) {
         const axesSpec = columns
-          .filter((column) => column.type === 'axis')
-          .map((axis) => axis.spec);
+          .reduce((acc, column) => {
+            if (column.source.type === 'axis') {
+              acc.push(column.source.spec);
+            }
+            return acc;
+          }, [] as AxisSpec[]);
         selection.value = {
           ...selection.value,
           axesSpec,
         };
       }
+      if (selectionLabeled.value) {
+        const spec = columns
+          .reduce((acc, column) => {
+            if (column.source.type === 'axis') {
+              acc.push(column.labeled);
+            }
+            return acc;
+          }, [] as PTableColumnSpec[]);
+        selectionLabeled.value = {
+          ...selectionLabeled.value,
+          spec,
+        };
+      }
     }
   },
   { immediate: true },
@@ -417,10 +447,11 @@ watch(
     try {
       // Hide no rows overlay if it is shown, or else loading overlay will not be shown
       gridApi.hideOverlay();
+      firstDataRenderedTracker.reset();
 
       // No data source selected -> reset state to default
       if (!settings.sourceId) {
-        return gridApi.updateGridOptions({
+        gridApi.updateGridOptions({
           loading: true,
           loadingOverlayComponentParams: {
             ...gridOptions.value.loadingOverlayComponentParams,
@@ -429,6 +460,13 @@ watch(
           columnDefs: undefined,
           serverSideDatasource: undefined,
         });
+        if (selection.value || selectionLabeled.value) {
+          gridApi.setServerSideSelectionState({
+            selectAll: false,
+            toggledNodes: [],
+          });
+        }
+        return;
       }
 
       // Data source changed -> show full page loader, clear selection
@@ -440,7 +478,7 @@ watch(
             notReady: false,
           } satisfies PlAgOverlayLoadingParams,
         });
-        if (selection.value) {
+        if (selection.value || selectionLabeled.value) {
           gridApi.setServerSideSelectionState({
             selectAll: false,
             toggledNodes: [],
@@ -466,19 +504,20 @@ watch(
 
       // Model ready -> calculate new state
       const stateGeneration = generation.value;
-      calculateGridOptions(
+      calculateGridOptions({
         generation,
-        getRawPlatformaInstance().pFrameDriver,
-        settings.model,
-        settings.sheets ?? [],
-        gridState.value.columnVisibility?.hiddenColIds,
-        {
+        pfDriver: getRawPlatformaInstance().pFrameDriver,
+        model: settings.model,
+        sheets: settings.sheets ?? [],
+        track: firstDataRenderedTracker.track,
+        hiddenColIds: gridState.value.columnVisibility?.hiddenColIds,
+        cellButtonAxisParams: {
           showCellButtonForAxisId: props.showCellButtonForAxisId,
           cellButtonInvokeRowsOnDoubleClick:
             props.cellButtonInvokeRowsOnDoubleClick,
           trigger: (key?: PTableKey) => emit('cellButtonClicked', key),
         } satisfies PlAgCellButtonAxisParams,
-      ).then((options) => {
+      }).then((options) => {
         if (gridApi.isDestroyed() || stateGeneration !== generation.value) return;
         return gridApi.updateGridOptions({
           ...options,

package/src/components/PlAgDataTable/sources/focus-row.ts

@@ -1,45 +1,35 @@
 import type { GridApi, IRowNode } from 'ag-grid-enterprise';
-import { nextTick, shallowRef, watchEffect } from 'vue';
+import { nextTick, shallowRef, watch } from 'vue';
 
 export function makeOnceTracker<TContext = undefined>() {
   const state = shallowRef<[false, undefined] | [true, TContext]>([false, undefined]);
-  const track = (ctx: TContext) => state.value = [true, ctx];
-  const reset = () => state.value = [false, undefined];
+  const track = (ctx: TContext): void => {
+    state.value = [true, ctx];
+  };
+  const reset = (): void => {
+    state.value = [false, undefined];
+  };
   const onceTracked = (callback: (ctx: TContext) => void) => {
-    const { stop } = watchEffect(() => {
-      const [tracked, context] = state.value;
-      if (tracked) {
-        callback(context);
-        stop();
-      }
-    });
-    return stop;
+    const handle = watch(
+      state,
+      ([tracked, context]) => {
+        if (tracked) {
+          callback(context);
+          nextTick(() => handle.stop());
+        }
+      },
+      { immediate: true },
+    );
+    return handle;
   };
   return { track, reset, onceTracked };
 }
 export type OnceTracker<TContext = undefined> = ReturnType<typeof makeOnceTracker<TContext>>;
 
-export function trackFirstDataRendered(gridApi: GridApi, tracker: OnceTracker<GridApi>): void {
-  gridApi.addEventListener('firstDataRendered', (event) => {
-    if (event.api.getGridOption('rowModelType') === 'clientSide') {
-      tracker.track(event.api);
-    }
-  });
-  gridApi.addEventListener('modelUpdated', (event) => {
-    if (event.api.getGridOption('rowModelType') === 'serverSide') {
-      const groupState = event.api.getServerSideGroupLevelState();
-      if (groupState && groupState.length > 0 && groupState[0].lastRowIndexKnown) {
-        tracker.track(event.api);
-      }
-    }
-  });
-  gridApi.addEventListener('gridPreDestroyed', () => tracker.reset());
-}
-
-function ensureNodeVisible(api: GridApi, rowId: string): void {
+function ensureNodeVisible<TData>(api: GridApi<TData>, selector: (row: IRowNode<TData>) => boolean): void {
   let rowIndex: number | null = null;
-  const nodeSelector = (row: IRowNode): boolean => {
-    if (row.id === rowId) {
+  const nodeSelector = (row: IRowNode<TData>): boolean => {
+    if (selector(row)) {
       rowIndex = row.rowIndex;
       return true;
     }
@@ -55,10 +45,13 @@ function ensureNodeVisible(api: GridApi, rowId: string): void {
   }
 };
 
-export async function focusRow(rowId: string, tracker: OnceTracker<GridApi>): Promise<void> {
+export async function focusRow<TData>(
+  selector: (row: IRowNode<TData>) => boolean,
+  tracker: OnceTracker<GridApi<TData>>,
+): Promise<void> {
   return new Promise((resolve) => {
     nextTick(() => tracker.onceTracked((gridApi) => {
-      ensureNodeVisible(gridApi, rowId);
+      ensureNodeVisible(gridApi, selector);
       resolve();
     }));
   });

package/src/components/PlAgDataTable/sources/menu-items.ts

@@ -2,8 +2,8 @@ import type { DefaultMenuItem, MenuItemDef } from 'ag-grid-enterprise';
 
 export function defaultMainMenuItems(): (MenuItemDef | DefaultMenuItem)[] {
   return [
-    'sortAscending',
     'sortDescending',
+    'sortAscending',
     'separator',
     'pinSubMenu',
   ];

package/src/components/PlAgDataTable/sources/table-source-v2.ts

@@ -12,22 +12,24 @@ import {
   type PlDataTableModel,
   type PTableColumnSpec,
   type PTableKey,
+  type PlTableColumnId,
+  type PlTableColumnIdJson,
   isLabelColumn as isLabelColumnSpec,
 } from '@platforma-sdk/model';
 import type {
   CellStyle,
   ColDef,
+  GridApi,
   ICellRendererParams,
   IServerSideDatasource,
   IServerSideGetRowsParams,
   ManagedGridOptions,
 } from 'ag-grid-enterprise';
 import canonicalize from 'canonicalize';
-import * as lodash from 'lodash';
 import type { PlAgHeaderComponentParams, PlAgHeaderComponentType } from '../../PlAgColumnHeader';
 import { PlAgColumnHeader } from '../../PlAgColumnHeader';
 import { PlAgTextAndButtonCell } from '../../PlAgTextAndButtonCell';
-import type { PlAgDataTableV2Row, PTableKeyJson } from '../types';
+import type { PlAgDataTableV2Row, PlTableRowId } from '../types';
 import {
   PTableHidden,
 } from './common';
@@ -35,6 +37,7 @@ import { defaultMainMenuItems } from './menu-items';
 import { makeRowNumberColDef, PlAgDataTableRowNumberColId } from './row-number';
 import { getColumnRenderingSpec } from './value-rendering';
 import type { Ref } from 'vue';
+import { isJsonEqual } from '@milaboratories/helpers';
 
 export function isLabelColumn(column: PTableColumnSpec) {
   return column.type === 'column' && isLabelColumnSpec(column.spec);
@@ -45,16 +48,26 @@ function columns2rows(
   fields: number[],
   columns: PTableVector[],
   axes: number[],
+  labeledAxes: number[],
   resultMapping: number[],
 ): PlAgDataTableV2Row[] {
   const rowData: PlAgDataTableV2Row[] = [];
   for (let iRow = 0; iRow < columns[0].data.length; ++iRow) {
-    const key = axes.map((iAxis) => {
+    const axesKey = axes.map((iAxis) => {
       return mapPTableValueToAxisKey(
         pTableValue(columns[resultMapping[iAxis]], iRow),
       );
     });
-    const row: PlAgDataTableV2Row = { id: makeRowId(key), key };
+    const labeled = labeledAxes.map((iAxis) => {
+      return mapPTableValueToAxisKey(
+        pTableValue(columns[resultMapping[iAxis]], iRow),
+      );
+    });
+    const id = canonicalizeJson<PlTableRowId>({
+      axesKey,
+      labeled,
+    });
+    const row: PlAgDataTableV2Row = { id, axesKey };
     fields.forEach((field, iCol) => {
       row[field.toString() as `${number}`] = resultMapping[iCol] === -1
         ? PTableHidden
@@ -66,14 +79,23 @@ function columns2rows(
 }
 
 /** Calculate GridOptions for selected p-table data source */
-export async function calculateGridOptions(
-  generation: Ref<number>,
-  pfDriver: PFrameDriver,
-  model: PlDataTableModel,
-  sheets: PlDataTableSheet[],
-  hiddenColIds?: string[],
-  cellButtonAxisParams?: PlAgCellButtonAxisParams,
-): Promise<Pick<ManagedGridOptions<PlAgDataTableV2Row>, 'columnDefs' | 'serverSideDatasource'>> {
+export async function calculateGridOptions({
+  generation,
+  pfDriver,
+  model,
+  sheets,
+  track,
+  hiddenColIds,
+  cellButtonAxisParams,
+}: {
+  generation: Ref<number>;
+  pfDriver: PFrameDriver;
+  model: PlDataTableModel;
+  sheets: PlDataTableSheet[];
+  track: (ctx: GridApi<PlAgDataTableV2Row>) => void;
+  hiddenColIds?: PlTableColumnIdJson[];
+  cellButtonAxisParams?: PlAgCellButtonAxisParams;
+}): Promise<Pick<ManagedGridOptions<PlAgDataTableV2Row>, 'columnDefs' | 'serverSideDatasource'>> {
   const pt = model.visibleTableHandle;
   const specs = await pfDriver.getSpec(model.fullTableHandle);
   type SpecId = string;
@@ -99,14 +121,13 @@ export async function calculateGridOptions(
   const indices = [...specs.keys()]
     .filter(
       (i) =>
-        !lodash.some(
-          sheets,
+        !sheets.some(
           (sheet) =>
-            lodash.isEqual(getAxisId(sheet.axis), specs[i].id)
+            isJsonEqual(getAxisId(sheet.axis), specs[i].id)
             || (specs[i].type === 'column'
               && specs[i].spec.name === 'pl7.app/label'
               && specs[i].spec.axesSpec.length === 1
-              && lodash.isEqual(getAxisId(sheet.axis), getAxisId(specs[i].spec.axesSpec[0]))),
+              && isJsonEqual(getAxisId(sheet.axis), getAxisId(specs[i].spec.axesSpec[0]))),
         ),
     )
     .sort((a, b) => {
@@ -130,7 +151,7 @@ export async function calculateGridOptions(
 
     // axis of labels
     const axisId = getAxisId((specs[idx].spec as PColumnSpec).axesSpec[0]);
-    const axisIdx = indices.findIndex((idx) => lodash.isEqual(specs[idx].id, axisId));
+    const axisIdx = indices.findIndex((idx) => isJsonEqual(specs[idx].id, axisId));
     if (axisIdx !== -1) {
       indices[axisIdx] = idx;
     } else {
@@ -144,7 +165,7 @@ export async function calculateGridOptions(
 
   const columnDefs: ColDef<PlAgDataTableV2Row>[] = [
     makeRowNumberColDef(),
-    ...fields.map((i) => makeColDef(i, specs[i], hiddenColIds, cellButtonAxisParams)),
+    ...fields.map((field, index) => makeColDef(field, specs[field], specs[indices[index]], hiddenColIds, cellButtonAxisParams)),
   ];
 
   // mixing in axis indices
@@ -170,21 +191,24 @@ export async function calculateGridOptions(
 
   // Construct the `axes` array for key generation in `columns2rows`.
   // The key components should be ordered according to the display order of axis columns from the `fields` array.
-  const axes: number[] = fields.filter((idx) => specs[idx].type === 'axis').map((idx) => {
-    const r = allIndices.indexOf(idx);
-    if (r === -1) {
-      console.error(
-        'Key construction error: Original axis spec index from `fields` not found in `allIndices`.',
-        {
-          originalAxisSpecIdx: idx,
-        },
-      );
-      throw new Error(
-        `Assertion failed: Original axis spec index ${idx} (from fields) for key construction not found in allIndices.`,
-      );
-    }
-    return r;
-  });
+  const axes: number[] = fields
+    .filter((field) => specs[field].type === 'axis')
+    .map((field) => {
+      const r = allIndices.indexOf(field);
+      if (r === -1) {
+        throw new Error(
+          `Assertion failed: Original axis spec index ${field} (from fields) for key construction not found in allIndices.`,
+        );
+      }
+      return r;
+    });
+  const labeledAxes: number[] = fields
+    .reduce((acc, field, index) => {
+      if (specs[field].type === 'axis') {
+        acc.push(allIndices.indexOf(indices[index]));
+      }
+      return acc;
+    }, [] as number[]);
 
   const requestIndices: number[] = [];
   const resultMapping: number[] = [];
@@ -207,7 +231,7 @@ export async function calculateGridOptions(
       try {
         if (rowCount === -1) {
           const ptShape = await pfDriver.getShape(pt);
-          if (stateGeneration !== generation.value) return params.fail();
+          if (stateGeneration !== generation.value || params.api.isDestroyed()) return params.fail();
           rowCount = ptShape.rows;
         }
 
@@ -221,7 +245,7 @@ export async function calculateGridOptions(
         }
 
         // If sort has changed - show skeletons instead of data
-        if (lastParams && !lodash.isEqual(lastParams.request.sortModel, params.request.sortModel)) {
+        if (lastParams && !isJsonEqual(lastParams.request.sortModel, params.request.sortModel)) {
           return params.success({ rowData: [], rowCount });
         }
         lastParams = params;
@@ -235,8 +259,8 @@ export async function calculateGridOptions(
               offset: params.request.startRow,
               length,
             });
-            if (stateGeneration !== generation.value) return params.fail();
-            rowData = columns2rows(fields, data, axes, resultMapping);
+            if (stateGeneration !== generation.value || params.api.isDestroyed()) return params.fail();
+            rowData = columns2rows(fields, data, axes, labeledAxes, resultMapping);
           }
         }
 
@@ -247,10 +271,14 @@ export async function calculateGridOptions(
         );
         params.api.setGridOption('loading', false);
       } catch (error: unknown) {
-        if (stateGeneration !== generation.value) return params.fail();
+        if (stateGeneration !== generation.value || params.api.isDestroyed()) return params.fail();
         params.api.setGridOption('loading', true);
         params.fail();
         console.trace(error);
+      } finally {
+        if (!params.api.isDestroyed()) {
+          track(params.api);
+        }
       }
     },
   };
@@ -273,10 +301,14 @@ export type PlAgCellButtonAxisParams = {
 export function makeColDef(
   iCol: number,
   spec: PTableColumnSpec,
-  hiddenColIds: string[] | undefined,
+  labeledSpec: PTableColumnSpec,
+  hiddenColIds: PlTableColumnIdJson[] | undefined,
   cellButtonAxisParams?: PlAgCellButtonAxisParams,
 ): ColDef {
-  const colId = canonicalizeJson<PTableColumnSpec>(spec);
+  const colId = canonicalizeJson<PlTableColumnId>({
+    source: spec,
+    labeled: labeledSpec,
+  });
   const valueType = spec.type === 'axis' ? spec.spec.type : spec.spec.valueType;
   const columnRenderingSpec = getColumnRenderingSpec(spec);
   const cellStyle: CellStyle = {};
@@ -293,7 +325,7 @@ export function makeColDef(
     mainMenuItems: defaultMainMenuItems,
     context: spec,
     field: iCol.toString(),
-    headerName: spec.spec.annotations?.['pl7.app/label']?.trim() ?? 'Unlabeled ' + spec.type + ' ' + iCol.toString(),
+    headerName: labeledSpec.spec.annotations?.['pl7.app/label']?.trim() ?? 'Unlabeled ' + spec.type + ' ' + iCol.toString(),
     lockPosition: spec.type === 'axis',
     hide: hiddenColIds?.includes(colId) ?? isColumnOptional(spec.spec),
     valueFormatter: columnRenderingSpec.valueFormatter,
@@ -303,13 +335,13 @@ export function makeColDef(
           if (spec.type !== 'axis') return;
 
           const axisId = (params.colDef?.context as PTableColumnSpec)?.id as AxisId;
-          if (lodash.isEqual(axisId, cellButtonAxisParams.showCellButtonForAxisId)) {
+          if (isJsonEqual(axisId, cellButtonAxisParams.showCellButtonForAxisId)) {
             return {
               component: PlAgTextAndButtonCell,
               params: {
                 invokeRowsOnDoubleClick: cellButtonAxisParams.cellButtonInvokeRowsOnDoubleClick,
                 onClick: (params: ICellRendererParams<PlAgDataTableV2Row>) => {
-                  cellButtonAxisParams.trigger(params.data?.key);
+                  cellButtonAxisParams.trigger(params.data?.axesKey);
                 },
               },
             };
@@ -349,7 +381,3 @@ export function makeColDef(
     })(),
   };
 }
-
-export function makeRowId(rowKey: PTableKey): PTableKeyJson {
-  return canonicalizeJson(rowKey);
-}