@platforma-sdk/ui-vue 1.5.56 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.5.56",
+  "version": "1.6.0",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -21,8 +21,8 @@
     "lru-cache": "^11.0.1",
     "vue": "^3.5.11",
     "canonicalize": "^2.0.0",
-    "@platforma-sdk/model": "^1.5.40",
-    "@milaboratories/uikit": "^1.2.19"
+    "@milaboratories/uikit": "^1.2.20",
+    "@platforma-sdk/model": "^1.6.0"
   },
   "devDependencies": {
     "@ag-grid-community/client-side-row-model": "^32.2.2",

package/src/aggrid.ts

@@ -1,10 +1,12 @@
-import { getEnvironmentValue } from '@platforma-sdk/model';
 import { LicenseManager } from '@ag-grid-enterprise/core';
+import { getEnvironmentValue } from '@platforma-sdk/model';
 
 export function activateAgGrid() {
   const agGridLicense = getEnvironmentValue('AGGRID_LICENSE');
   if (agGridLicense) {
     LicenseManager.setLicenseKey(agGridLicense);
-    console.log('AGGrid Activated');
+    console.log('AG Grid Activated');
+  } else {
+    console.log('AG Grid License not found');
   }
 }

package/src/components/PlAgDataTable/PlAgDataTable.vue

@@ -1,7 +1,5 @@
 <script lang="ts" setup>
-import './ag-theme.css';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
-import canonicalize from 'canonicalize';
 import type { GridApi, GridOptions, SortState } from '@ag-grid-community/core';
 import { ModuleRegistry } from '@ag-grid-community/core';
 import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
@@ -10,14 +8,21 @@ import { ClipboardModule } from '@ag-grid-enterprise/clipboard';
 import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
 import { PlDropdownLine } from '@milaboratories/uikit';
 import type { AxisId, PlDataTableState, PTableRecordFilter, PTableSorting } from '@platforma-sdk/model';
-import { computed, ref, watch, shallowRef, toRefs } from 'vue';
-import OverlayLoading from './OverlayLoading.vue';
-import OverlayNoRows from './OverlayNoRows.vue';
-import { updateXsvGridOptions } from './sources/file-source';
-import { parseColId, makeSheets, updatePFrameGridOptions, enrichJoinWithLabelColumns } from './sources/table-source';
-import type { PlDataTableSheet, PlDataTableSettings } from './types';
-import * as lodash from 'lodash';
 import { computedAsync } from '@vueuse/core';
+import canonicalize from 'canonicalize';
+import * as lodash from 'lodash';
+import { computed, ref, shallowRef, toRefs, watch } from 'vue';
+import './ag-theme.css';
+import PlOverlayLoading from './PlAgOverlayLoading.vue';
+import PlOverlayNoRows from './PlAgOverlayNoRows.vue';
+import { updateXsvGridOptions } from './sources/file-source';
+import {
+  enrichJoinWithLabelColumns,
+  makeSheets,
+  parseColId,
+  updatePFrameGridOptions
+} from './sources/table-source';
+import type { PlDataTableSettings, PlDataTableSheet } from './types';
 
 ModuleRegistry.registerModules([ClientSideRowModelModule, ClipboardModule, InfiniteRowModelModule, RangeSelectionModule]);
 
@@ -30,15 +35,18 @@ const { settings } = toRefs(props);
 watch(
   () => settings.value,
   async (settings, oldSettings) => {
-    if (settings.sourceType !== 'pframe' || !settings.pFrame?.ok || !settings.pFrame.value || !settings.join) return;
+    if (
+      settings.sourceType !== 'pframe' ||
+      !settings.pFrame ||
+      !settings.join
+    ) return;
 
     if (
       oldSettings &&
       oldSettings.sourceType === 'pframe' &&
       lodash.isEqual(settings.pFrame, oldSettings.pFrame) &&
       lodash.isEqual(settings.join, oldSettings.join)
-    )
-      return;
+    ) return;
 
     const platforma = window.platforma;
     if (!platforma) throw Error('platforma not set');
@@ -46,7 +54,7 @@ watch(
     const pfDriver = platforma.pFrameDriver;
     if (!pfDriver) throw Error('platforma.pFrameDriver not set');
 
-    const enrichedJoin = await enrichJoinWithLabelColumns(pfDriver, settings.pFrame.value, settings.join);
+    const enrichedJoin = await enrichJoinWithLabelColumns(pfDriver, settings.pFrame, settings.join);
 
     const state = tableState.value;
 
@@ -59,37 +67,39 @@ watch(
     state.pTableParams.join = enrichedJoin;
 
     tableState.value = state;
-  },
+  }
 );
 
-const sheets = computedAsync<PlDataTableSheet[]>(async () => {
-  const sourceType = settings.value.sourceType;
-  switch (sourceType) {
-    case 'pframe': {
-      const platforma = window.platforma;
-      if (!platforma) throw Error('platforma not set');
+const sheets = computedAsync<PlDataTableSheet[]>(
+  async () => {
+    const sourceType = settings.value.sourceType;
+    switch (sourceType) {
+      case 'pframe': {
+        const platforma = window.platforma;
+        if (!platforma) throw Error('platforma not set');
 
-      const pfDriver = platforma.pFrameDriver;
-      if (!pfDriver) throw Error('platforma.pFrameDriver not set');
+        const pfDriver = platforma.pFrameDriver;
+        if (!pfDriver) throw Error('platforma.pFrameDriver not set');
 
-      if (!settings.value.pFrame?.ok || !settings.value.pFrame.value) return [];
-      const pFrame = settings.value.pFrame.value;
+        if (!settings.value.pFrame) return [];
+        const pFrame = settings.value.pFrame;
 
-      const join = tableState.value.pTableParams?.join;
-      if (!join) return [];
+        const join = tableState.value.pTableParams?.join;
+        if (!join) return [];
 
-      return await makeSheets(pfDriver, pFrame, settings.value.sheetAxes, join);
-    }
-    case 'ptable': {
-      return settings.value.sheets ?? [];
-    }
-    case 'xsv': {
-      return [];
+        return await makeSheets(pfDriver, pFrame, settings.value.sheetAxes, join);
+      }
+      case 'ptable': {
+        return settings.value.sheets ?? [];
+      }
+      case 'xsv': {
+        return [];
+      }
+      default: throw Error(`unsupported source type: ${sourceType satisfies never}`);
     }
-    default:
-      throw Error(`unsupported source type: ${sourceType satisfies never}`);
-  }
-}, []);
+  },
+  []
+);
 
 function makeSorting(state?: SortState): PTableSorting[] | undefined {
   if (settings.value.sourceType !== 'ptable' && settings.value.sourceType !== 'pframe') return undefined;
@@ -114,10 +124,12 @@ const gridState = computed({
     };
   },
   set: (gridState) => {
-    const sorting = makeSorting(gridState.sort);
 
     const state = tableState.value;
 
+    // do not apply driver sorting for client side rendering
+    const sorting = gridOptions.rowModelType === 'clientSide' ? undefined : makeSorting(gridState.sort);
+
     state.gridState.columnOrder = gridState.columnOrder;
     state.gridState.sort = gridState.sort;
 
@@ -144,13 +156,13 @@ function makeFilters(sheetsState: Record<string, string | number>): PTableRecord
       type: 'bySingleColumn',
       column: sheet.column
         ? {
-            type: 'column',
-            id: sheet.column,
-          }
+          type: 'column',
+          id: sheet.column,
+        }
         : {
-            type: 'axis',
-            id: sheet.axis,
-          },
+          type: 'axis',
+          id: sheet.axis,
+        },
       predicate: {
         operator: 'Equal',
         reference: sheetsState[makeSheetId(sheet.axis)],
@@ -188,12 +200,7 @@ watch(
     const [settings, sheets] = state;
     if (oldState) {
       const [oldSettings, oldSheets] = oldState;
-      if (
-        (settings.sourceType === 'ptable' || settings.sourceType === 'pframe') &&
-        settings.sourceType === oldSettings?.sourceType &&
-        lodash.isEqual(sheets, oldSheets)
-      )
-        return;
+      if ((settings.sourceType === 'ptable' || settings.sourceType === 'pframe') && settings.sourceType === oldSettings?.sourceType && lodash.isEqual(sheets, oldSheets)) return;
     }
 
     if (settings.sourceType !== 'ptable' && settings.sourceType !== 'pframe') {
@@ -217,7 +224,7 @@ const gridApi = shallowRef<GridApi>();
 const gridOptions: GridOptions = {
   animateRows: false,
   suppressColumnMoveAnimation: true,
-  enableRangeSelection: true,
+  cellSelection: true,
   initialState: tableState.value.gridState,
   onGridReady: (event) => {
     gridApi.value = event.api;
@@ -232,14 +239,14 @@ const gridOptions: GridOptions = {
   onRowDataUpdated: (event) => {
     event.api.autoSizeAllColumns();
   },
-  rowModelType: 'infinite',
+  // rowModelType: 'infinite', // will be set with the first data set 
   maxBlocksInCache: 10000,
   cacheBlockSize: 100,
   getRowId: (params) => params.data.id,
   loading: true,
   loadingOverlayComponentParams: { notReady: true },
-  loadingOverlayComponent: OverlayLoading,
-  noRowsOverlayComponent: OverlayNoRows,
+  loadingOverlayComponent: PlOverlayLoading,
+  noRowsOverlayComponent: PlOverlayNoRows,
 };
 
 const reloadKey = ref(0);
@@ -285,7 +292,7 @@ watch(
         if (!pfDriver) throw Error('platforma.pFrameDriver not set');
 
         const pTable = settings.pTable;
-        if (!pTable?.ok || !pTable.value) {
+        if (!pTable) {
           return gridApi.updateGridOptions({
             loading: true,
             loadingOverlayComponentParams: { notReady: true },
@@ -294,9 +301,9 @@ watch(
           });
         }
 
-        const options = await updatePFrameGridOptions(gridApi, pfDriver, pTable.value, sheets);
+        const options = await updatePFrameGridOptions(gridApi, pfDriver, pTable, sheets);
         return gridApi.updateGridOptions({
-          loading: true,
+          loading: options.rowModelType === 'infinite',
           loadingOverlayComponentParams: { notReady: false },
           ...options,
         });
@@ -335,13 +342,9 @@ watch(
   <div class="ap-ag-data-table-container">
     <Transition name="ap-ag-data-table-sheets-transition">
       <div v-if="sheets.length > 0" class="ap-ag-data-table-sheets">
-        <PlDropdownLine
-          v-for="(sheet, i) in sheets"
-          :key="i"
-          :model-value="sheetsState[makeSheetId(sheet.axis)]"
+        <PlDropdownLine v-for="(sheet, i) in sheets" :key="i" :model-value="sheetsState[makeSheetId(sheet.axis)]"
           :options="sheet.options"
-          @update:model-value="(newValue) => onSheetChanged(makeSheetId(sheet.axis), newValue)"
-        />
+          @update:model-value="(newValue) => onSheetChanged(makeSheetId(sheet.axis), newValue)" />
       </div>
     </Transition>
     <AgGridVue class="ap-ag-data-table-grid" :grid-options="gridOptions" />
@@ -355,14 +358,17 @@ watch(
   height: 100%;
   gap: 12px;
 }
+
 .ap-ag-data-table-sheets-transition-enter-active,
 .ap-ag-data-table-sheets-transition-leave-active {
   transition: all 0.2s ease-in-out;
 }
+
 .ap-ag-data-table-sheets-transition-enter-from,
 .ap-ag-data-table-sheets-transition-leave-to {
   margin-top: -52px;
 }
+
 .ap-ag-data-table-sheets {
   display: flex;
   flex-direction: row;
@@ -370,6 +376,7 @@ watch(
   flex-wrap: wrap;
   z-index: 3;
 }
+
 .ap-ag-data-table-grid {
   flex: 1;
 }

package/src/components/PlAgDataTable/{OverlayLoading.vue → PlAgOverlayLoading.vue}

@@ -29,7 +29,7 @@ defineProps<{
   justify-content: center;
 }
 .grid-icon-cat-in-bag {
-  background-image: url(./assets/cat-in-bag.png);
+  background-image: url(./assets/loading-cat.png);
   background-repeat: no-repeat;
 }
 .grid-mask-loading {

package/src/components/PlAgDataTable/{OverlayNoRows.vue → PlAgOverlayNoRows.vue}

@@ -15,7 +15,7 @@
   justify-content: center;
 }
 .grid-icon-sad-cat {
-  background-image: url(./assets/sad-cat.png);
+  background-image: url(./assets/no-data-cat.png);
   background-repeat: no-repeat;
 }
 .grid-overlay-container > div {

package/src/components/PlAgDataTable/index.ts

@@ -1,3 +1,5 @@
 export { default as PlDataTable } from './PlAgDataTable.vue';
+export { default as PlAgOverlayLoading } from './PlAgOverlayLoading.vue';
+export { default as PlAgOverlayNoRows } from './PlAgOverlayNoRows.vue';
 
 export * from './types';

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

@@ -0,0 +1,192 @@
+import { ColDef, IDatasource, RowModelType } from '@ag-grid-community/core';
+import { AxisSpec, getAxisId, PColumnSpec, PTableColumnSpec, PTableShape, PTableVector, PVectorDataString } from '@platforma-sdk/model';
+import canonicalize from 'canonicalize';
+import * as lodash from 'lodash';
+import { defaultValueFormatter } from './table-source';
+
+type HeterogeneousColumnInfo = {
+  /**
+   * Index of the column with heterogeneous axis in the p-table array
+   */
+  columnIdx: number;
+  /**
+   * Index of the corresponding heterogeneous axis in the p-table array
+   */
+  axisIdx: number;
+};
+
+function getHeterogeneousAxes(spec: PColumnSpec): AxisSpec[] {
+  return spec.axesSpec.filter((axSpec) => axSpec.annotations?.['pl7.app/axisNature'] === 'heterogeneous');
+}
+
+/**
+ * Returns a list of columns containing heterogeneous axis (if a column contains multiple, all will be returned)
+ * @param specs p-table column specs
+ * @param indices indices of columns of interest in the spec array
+ * @returns list of columns
+ */
+export function getHeterogeneousColumns(specs: PTableColumnSpec[], indices: number[]): HeterogeneousColumnInfo[] {
+  const cols: HeterogeneousColumnInfo[] = [];
+
+  // check we have heterogeneous axis, which we need to transpose
+  for (const i of indices) {
+    if (specs[i].type === 'column') {
+      const hAxes = getHeterogeneousAxes(specs[i].spec);
+
+      for (const hAx of hAxes) {
+        if (hAx.type !== 'String') {
+          console.warn('heterogeneous axis with string type expected, got', hAx, 'skipping');
+          continue;
+        }
+
+        const axisId = getAxisId(hAx);
+        const axisIdx = specs.findIndex((s) => lodash.isEqual(s.id, axisId));
+
+        if (axisIdx === -1) {
+          console.error('axis not found', i, axisId, specs);
+          throw Error('axis not found');
+        }
+
+        cols.push({ columnIdx: i, axisIdx: axisIdx });
+      }
+    }
+  }
+
+  return cols;
+}
+
+// auxiliary function to get a field for i-th axis-value
+const hColumnField = (originalLength: number, i: number) => (originalLength + i).toString();
+
+/**
+ * Calculate GridOptions for p-table data source type
+ *
+ * @param hColumns heterogeneous columns list
+ * @param shape table shape
+ * @param columnDefs initial column definitions (with h-cols inside and no additional columns)
+ * @param data data array (including initial columns)
+ * @param fields fields corresponding to initial column defs
+ * @param indices indices in the original specs array
+ */
+export function updatePFrameGridOptionsHeterogeneousAxes(
+  hColumns: HeterogeneousColumnInfo[],
+  shape: PTableShape,
+  columnDefs: ColDef[],
+  data: PTableVector[],
+  fields: number[],
+  indices: number[],
+): {
+  columnDefs: ColDef[];
+  datasource?: IDatasource;
+  rowModelType: RowModelType;
+  rowData?: unknown[];
+} {
+  if (hColumns.length > 1) {
+    throw Error('hColumns.length > 1 is not supported');
+  }
+
+  const hColumn = hColumns[0];
+
+  // recalculate indices of h-cols to the positions in the resulting data
+  // index of axis & column in indices array
+  let axisIdx: number = -1;
+  let columnIdx: number = -1;
+  for (let i = 0; i < indices.length; ++i) {
+    if (indices[i] === hColumn.axisIdx) {
+      axisIdx = i;
+    }
+    if (indices[i] === hColumn.columnIdx) {
+      columnIdx = i;
+    }
+  }
+
+  // columns to add into the data table definition
+  const hAxisValues: string[] = (() => {
+    // only string data is supported
+    const allValues = data[axisIdx].data as PVectorDataString;
+    const notNull = allValues.filter((v) => v !== null);
+    return Array.from(new Set(notNull));
+  })();
+
+  // sort for canonicalization
+  hAxisValues.sort();
+
+  // remove heterogeneous column from the column defs
+  if (columnIdx > axisIdx) {
+    columnDefs.splice(columnIdx, 1);
+    columnDefs.splice(axisIdx, 1);
+  } else {
+    columnDefs.splice(axisIdx, 1);
+    columnDefs.splice(columnIdx, 1);
+  }
+
+  // calculate row data
+  const rowData = calculateRowData(fields, data, axisIdx, columnIdx, hAxisValues, shape.rows);
+
+  // add additional column definitions
+  for (let i = 0; i < hAxisValues.length; ++i) {
+    const header = hAxisValues[i];
+    const id = header + '@' + i; // at least add i to avoid name clash with other columns
+
+    columnDefs.push({
+      colId: id,
+      field: hColumnField(data.length, i),
+      headerName: header,
+      valueFormatter: defaultValueFormatter,
+    });
+  }
+
+  return {
+    rowModelType: 'clientSide',
+    columnDefs,
+    rowData,
+  };
+}
+
+/** calculate row data for the table with heterogeneous axis */
+function calculateRowData(
+  fields: number[],
+  data: PTableVector[],
+  axisIdx: number,
+  columnIdx: number,
+  hAxisValues: string[],
+  nRows: number,
+): unknown[] {
+  const uniqueRowsMap: Map<string, Record<string, any>> = new Map();
+
+  // transposed iRow
+  let iRowT = 0;
+  for (let iRow = 0; iRow < nRows; iRow++) {
+    const rowPart: Record<string, any> = {};
+    let k = 0;
+    for (let iCol = 0; iCol < data.length; ++iCol) {
+      if (iCol === axisIdx || iCol === columnIdx) continue;
+      const field = fields[iCol].toString();
+      rowPart[field] = data[iCol].data[iRow];
+      ++k;
+    }
+
+    let row: Record<string, any>;
+    const id = canonicalize(Object.values(rowPart)) ?? '';
+    if (!uniqueRowsMap.has(id)) {
+      uniqueRowsMap.set(id, rowPart);
+      row = rowPart;
+      row['id'] = iRowT.toString();
+      iRowT++;
+    } else {
+      row = uniqueRowsMap.get(id)!;
+    }
+
+    const idx = hAxisValues.indexOf(data[axisIdx].data[iRow] as string);
+    if (idx === -1) {
+      throw Error('index not found');
+    }
+
+    const field = hColumnField(data.length, idx);
+    row[field] = data[columnIdx].data[iRow];
+  }
+
+  const result = Array.from(uniqueRowsMap.values());
+
+  return result;
+}

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

@@ -1,22 +1,27 @@
-import type { ColDef, GridApi, IDatasource, IGetRowsParams } from '@ag-grid-community/core';
-import type { PFrameHandle, AxisId, PColumnIdAndSpec, JoinEntry, PObjectId } from '@platforma-sdk/model';
+import type { ColDef, GridApi, IDatasource, IGetRowsParams, RowModelType } from '@ag-grid-community/core';
 import {
-  type ValueType,
-  type PValue,
+  type PColumnSpec,
   type PFrameDriver,
   type PTableColumnId,
   type PTableColumnSpec,
   type PTableHandle,
   type PTableVector,
-  type PColumnSpec,
+  type PValue,
+  type ValueType,
+  AxisId,
   getAxesId,
-  isValueNA,
   isValueAbsent,
+  isValueNA,
+  JoinEntry,
   mapJoinEntry,
+  PColumnIdAndSpec,
+  PFrameHandle,
+  PObjectId,
 } from '@platforma-sdk/model';
-import * as lodash from 'lodash';
 import canonicalize from 'canonicalize';
+import * as lodash from 'lodash';
 import { type PlDataTableSheet } from '../types';
+import { getHeterogeneousColumns, updatePFrameGridOptionsHeterogeneousAxes } from './table-source-heterogeneous';
 
 /**
  * Generate unique colId based on the column spec.
@@ -35,6 +40,17 @@ export function parseColId(str: string) {
   return JSON.parse(str) as PTableColumnId;
 }
 
+export const defaultValueFormatter = (value: any) => {
+  if (!value) {
+    return 'ERROR';
+  } else if (value.value === undefined) {
+    return 'NULL';
+  } else if (value.value === null) {
+    return 'NA';
+  } else {
+    return value.value.toString();
+  }
+};
 /**
  * Calculates column definition for a given p-table column
  */
@@ -44,17 +60,7 @@ function getColDef(iCol: number, spec: PTableColumnSpec): ColDef {
     field: iCol.toString(),
     headerName: spec.spec.annotations?.['pl7.app/label']?.trim() ?? 'Unlabeled ' + spec.type + ' ' + iCol.toString(),
     lockPosition: spec.type === 'axis',
-    valueFormatter: (value) => {
-      if (!value) {
-        return 'ERROR';
-      } else if (value.value === undefined) {
-        return 'NULL';
-      } else if (value.value === null) {
-        return 'NA';
-      } else {
-        return value.value.toString();
-      }
-    },
+    valueFormatter: defaultValueFormatter,
     cellDataType: ((valueType: ValueType) => {
       switch (valueType) {
         case 'Int':
@@ -255,7 +261,7 @@ function columns2rows(fields: number[], columns: PTableVector[]): unknown[] {
     }
 
     // generate ID based on the axes information
-    row['id'] = JSON.stringify(index);
+    row['id'] = iRow.toString();
 
     rowData.push(row);
   }
@@ -263,6 +269,8 @@ function columns2rows(fields: number[], columns: PTableVector[]): unknown[] {
   return rowData;
 }
 
+const isLabelColumn = (col: PTableColumnSpec) => col.type === 'column' && col.spec.axesSpec.length === 1 && col.spec.name === 'pl7.app/label';
+
 /**
  * Calculate GridOptions for p-table data source type
  */
@@ -273,31 +281,55 @@ export async function updatePFrameGridOptions(
   sheets: PlDataTableSheet[],
 ): Promise<{
   columnDefs: ColDef[];
-  datasource: IDatasource;
+  datasource?: IDatasource;
+  rowModelType: RowModelType;
+  rowData?: unknown[];
 }> {
   const specs = await pfDriver.getSpec(pt);
+
+  // column indices in the specs array that we are going to process
   const indices = [...specs.keys()].filter(
     (i) => !lodash.find(sheets, (sheet) => lodash.isEqual(sheet.axis, specs[i].id) || lodash.isEqual(sheet.column, specs[i].id)),
   );
   const fields = lodash.cloneDeep(indices);
 
+  // get columns with heterogeneous axes
+  const hColumns = getHeterogeneousColumns(specs, indices);
+
+  // process label columns
   for (let i = indices.length - 1; i >= 0; --i) {
     const idx = indices[i];
-    if (!(specs[idx].type === 'column' && specs[idx].spec.axesSpec.length === 1 && specs[idx].spec.name === 'pl7.app/label')) continue;
+    if (!isLabelColumn(specs[idx])) continue;
 
     const axisId = getAxesId((specs[idx].spec as PColumnSpec).axesSpec)[0];
     const axisIdx = lodash.findIndex(indices, (idx) => lodash.isEqual(specs[idx].id, axisId));
     if (axisIdx === -1) continue;
 
+    // replace in h-columns
     indices[axisIdx] = idx;
+    for (const hCol of hColumns) {
+      if (hCol.axisIdx === idx) {
+        hCol.axisIdx = axisIdx;
+      }
+    }
+
+    // remove original axis
     indices.splice(i, 1);
     fields.splice(i, 1);
   }
 
-  const columnDefs = fields.map((i) => getColDef(i, specs[i]));
-
   const ptShape = await pfDriver.getShape(pt);
   const rowCount = ptShape.rows;
+  const columnDefs = fields.map((i) => getColDef(i, specs[i]));
+
+  if (hColumns.length > 1) {
+    console.warn('Currently, only one heterogeneous axis is supported in the table, got', hColumns.length, ' transposition will not be applied.');
+  }
+
+  if (hColumns.length === 1) {
+    // return data
+    return updatePFrameGridOptionsHeterogeneousAxes(hColumns, ptShape, columnDefs, await pfDriver.getData(pt, indices), fields, indices);
+  }
 
   let lastParams: IGetRowsParams | undefined = undefined;
   const datasource = {
@@ -340,6 +372,7 @@ export async function updatePFrameGridOptions(
   } satisfies IDatasource;
 
   return {
+    rowModelType: 'infinite',
     columnDefs,
     datasource,
   };