@platforma-sdk/ui-vue 1.7.16 → 1.7.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.7.16",
+  "version": "1.7.18",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -24,6 +24,7 @@
     "@ag-grid-community/core": "^32.3.0",
     "@ag-grid-community/client-side-row-model": "^32.3.0",
     "@ag-grid-community/infinite-row-model": "^32.3.0",
+    "@ag-grid-enterprise/server-side-row-model": "^32.3.0",
     "@ag-grid-community/styles": "^32.3.0",
     "@ag-grid-community/vue3": "^32.3.0",
     "@ag-grid-community/csv-export": "^32.3.0",
@@ -33,13 +34,13 @@
     "@ag-grid-enterprise/rich-select": "^32.3.0",
     "@ag-grid-enterprise/menu": "^32.3.0",
     "@ag-grid-enterprise/excel-export": "^32.3.0",
-    "@platforma-sdk/model": "^1.7.16",
-    "@milaboratories/uikit": "^1.2.26"
+    "@milaboratories/uikit": "^1.2.26",
+    "@platforma-sdk/model": "^1.7.16"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
-    "@types/lodash": "^4.17.10",
-    "@types/node": "~20.16.10",
+    "@types/lodash": "^4.17.12",
+    "@types/node": "~20.16.15",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vueuse/core": "^11.1.0",
@@ -47,7 +48,7 @@
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-vue": "^9.28.0",
+    "eslint-plugin-vue": "^9.29.1",
     "happy-dom": "^14.12.3",
     "lodash": "^4.17.21",
     "sass": "~1.77.8",

package/src/aggrid.ts

@@ -4,6 +4,7 @@ import { getEnvironmentValue } from '@platforma-sdk/model';
 import { ModuleRegistry } from '@ag-grid-community/core';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
+import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
 import { CsvExportModule } from '@ag-grid-community/csv-export';
 import { ClipboardModule } from '@ag-grid-enterprise/clipboard';
 import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
@@ -15,6 +16,7 @@ export function activateAgGrid() {
   ModuleRegistry.registerModules([
     ClientSideRowModelModule,
     InfiniteRowModelModule,
+    ServerSideRowModelModule,
     CsvExportModule,
     ClipboardModule,
     RangeSelectionModule,

package/src/components/PlAgDataTable/PlAgDataTable.vue

@@ -1,9 +1,17 @@
 <script lang="ts" setup>
 import './ag-theme.css';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
-import type { GridApi, GridOptions, SortState } from '@ag-grid-community/core';
+import type {
+  GridApi,
+  GridOptions,
+  GridReadyEvent,
+  ManagedGridOptionKey,
+  ManagedGridOptions,
+  SortState,
+  StateUpdatedEvent,
+} from '@ag-grid-community/core';
 import { ModuleRegistry } from '@ag-grid-community/core';
-import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
+import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
 import { AgGridVue } from '@ag-grid-community/vue3';
 import { ClipboardModule } from '@ag-grid-enterprise/clipboard';
 import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
@@ -19,7 +27,7 @@ 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]);
+ModuleRegistry.registerModules([ClientSideRowModelModule, ClipboardModule, ServerSideRowModelModule, RangeSelectionModule]);
 
 const tableState = defineModel<PlDataTableState>({ default: { gridState: {} } });
 const props = defineProps<{
@@ -120,7 +128,7 @@ const gridState = computed({
     const state = tableState.value;
 
     // do not apply driver sorting for client side rendering
-    const sorting = gridOptions.rowModelType === 'clientSide' ? undefined : makeSorting(gridState.sort);
+    const sorting = gridOptions.value.rowModelType === 'clientSide' ? undefined : makeSorting(gridState.sort);
 
     state.gridState.columnOrder = gridState.columnOrder;
     state.gridState.sort = gridState.sort;
@@ -221,32 +229,67 @@ watch(
 );
 
 const gridApi = shallowRef<GridApi>();
-const gridOptions: GridOptions = {
+const gridOptions = ref<GridOptions>({
   animateRows: false,
   suppressColumnMoveAnimation: true,
   cellSelection: true,
-  initialState: tableState.value.gridState,
-  onGridReady: (event) => {
-    gridApi.value = event.api;
-  },
-  onStateUpdated: (event) => {
-    gridState.value = {
-      columnOrder: event.state.columnOrder,
-      sort: event.state.sort,
-    };
-  },
+  initialState: gridState.value,
   autoSizeStrategy: { type: 'fitCellContents' },
   onRowDataUpdated: (event) => {
     event.api.autoSizeAllColumns();
   },
-  // rowModelType: 'infinite', // will be set with the first data set
+  rowModelType: 'clientSide',
   maxBlocksInCache: 10000,
   cacheBlockSize: 100,
+  serverSideSortAllLevels: true,
+  suppressServerSideFullWidthLoadingRow: true,
   getRowId: (params) => params.data.id,
   loading: true,
   loadingOverlayComponentParams: { notReady: true },
   loadingOverlayComponent: PlOverlayLoading,
   noRowsOverlayComponent: PlOverlayNoRows,
+});
+const onGridReady = (event: GridReadyEvent) => {
+  const api = event.api;
+  gridApi.value = new Proxy(api, {
+    get(target, prop, receiver) {
+      switch (prop) {
+        case 'setGridOption':
+          return (key: ManagedGridOptionKey, value: GridOptions[ManagedGridOptionKey]) => {
+            const options = gridOptions.value;
+            options[key] = value;
+            gridOptions.value = options;
+            api.updateGridOptions(options);
+          };
+        case 'updateGridOptions':
+          return (options: ManagedGridOptions) => {
+            gridOptions.value = {
+              ...gridOptions.value,
+              ...options,
+            };
+            api.updateGridOptions(options);
+          };
+        default:
+          return Reflect.get(target, prop, receiver);
+      }
+    },
+  });
+};
+const onStateUpdated = (event: StateUpdatedEvent) => {
+  gridState.value = {
+    columnOrder: event.state.columnOrder,
+    sort: event.state.sort,
+  };
+  gridOptions.value.initialState = gridState.value;
+};
+const onGridPreDestroyed = () => {
+  const state = gridApi.value!.getState();
+  gridState.value = {
+    columnOrder: state.columnOrder,
+    sort: state.sort,
+  };
+  gridOptions.value.initialState = gridState.value;
+  gridApi.value = undefined;
 };
 
 const reloadKey = ref(0);
@@ -258,13 +301,32 @@ watch(
     const [gridApi, gridState] = state;
     if (!gridApi) return;
 
-    const selfState = gridApi.getState();
-    if (lodash.isEqual(gridState.columnOrder, selfState.columnOrder) && lodash.isEqual(gridState.sort, selfState.sort)) return;
-
-    gridOptions.initialState = gridState;
+    const selfFullState = gridApi.getState();
+    const selfState = {
+      columnOrder: selfFullState.columnOrder,
+      sort: selfFullState.sort,
+    };
+    if (lodash.isEqual(gridState, selfState)) return;
+
+    console.log(
+      'reloading; columnOrder changed',
+      !lodash.isEqual(gridState.columnOrder, selfState.columnOrder),
+      'saved',
+      gridState.columnOrder,
+      'current',
+      selfState.columnOrder,
+    );
+    gridOptions.value.initialState = gridState;
     ++reloadKey.value;
   },
 );
+watch(
+  () => gridOptions.value,
+  (options, oldOptions) => {
+    if (!oldOptions) return;
+    if (options.rowModelType != oldOptions.rowModelType) ++reloadKey.value;
+  },
+);
 
 const onSheetChanged = (sheetId: string, newValue: string | number) => {
   const state = sheetsState.value;
@@ -290,20 +352,17 @@ watch(
       case 'ptable': {
         const pfDriver = platforma.pFrameDriver;
         if (!pfDriver) throw Error('platforma.pFrameDriver not set');
-
         const pTable = settings.pTable;
         if (!pTable || !sheets) {
           return gridApi.updateGridOptions({
             loading: true,
             loadingOverlayComponentParams: { notReady: true },
             columnDefs: [],
-            rowData: [],
           });
         }
-
-        const options = await updatePFrameGridOptions(gridApi, pfDriver, pTable, sheets);
+        const options = await updatePFrameGridOptions(pfDriver, pTable, sheets);
         return gridApi.updateGridOptions({
-          loading: options.rowModelType === 'infinite',
+          loading: options.rowModelType !== 'clientSide',
           loadingOverlayComponentParams: { notReady: false },
           ...options,
         });
@@ -319,11 +378,10 @@ watch(
             loading: true,
             loadingOverlayComponentParams: { notReady: true },
             columnDefs: [],
-            rowData: [],
           });
         }
 
-        const options = await updateXsvGridOptions(gridApi, blobDriver, xsvFile.value);
+        const options = await updateXsvGridOptions(blobDriver, xsvFile.value);
         return gridApi.updateGridOptions({
           loading: true,
           loadingOverlayComponentParams: { notReady: false },
@@ -351,7 +409,14 @@ watch(
         />
       </div>
     </Transition>
-    <AgGridVue class="ap-ag-data-table-grid" :grid-options="gridOptions" />
+    <AgGridVue
+      class="ap-ag-data-table-grid"
+      :grid-options="gridOptions"
+      :key="reloadKey"
+      @grid-ready="onGridReady"
+      @state-updated="onStateUpdated"
+      @grid-pre-destroyed="onGridPreDestroyed"
+    />
   </div>
 </template>
 

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

@@ -1,15 +1,13 @@
-import type { ColDef, GridApi, IDatasource } from '@ag-grid-community/core';
+import type { ColDef, IDatasource } from '@ag-grid-community/core';
 import type { BlobDriver, LocalBlobHandleAndSize, RemoteBlobHandleAndSize } from '@platforma-sdk/model';
 
 export async function updateXsvGridOptions(
-  gridApi: GridApi,
   blobDriver: BlobDriver,
   file: LocalBlobHandleAndSize | RemoteBlobHandleAndSize,
 ): Promise<{
   columnDefs: ColDef[];
   datasource: IDatasource;
 }> {
-  gridApi;
   blobDriver;
   file;
   //blobDriver.getContent(file.handle!)

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

@@ -1,4 +1,4 @@
-import type { ColDef, IDatasource, RowModelType } from '@ag-grid-community/core';
+import type { ColDef, IServerSideDatasource, RowModelType } from '@ag-grid-community/core';
 import type { AxisSpec, PColumnSpec, PTableColumnSpec, PTableShape, PTableVector, PVectorDataString } from '@platforma-sdk/model';
 import { getAxisId } from '@platforma-sdk/model';
 import canonicalize from 'canonicalize';
@@ -78,7 +78,7 @@ export function updatePFrameGridOptionsHeterogeneousAxes(
   indices: number[],
 ): {
   columnDefs: ColDef[];
-  datasource?: IDatasource;
+  serverSideDatasource?: IServerSideDatasource;
   rowModelType: RowModelType;
   rowData?: unknown[];
 } {

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

@@ -1,4 +1,4 @@
-import type { ColDef, GridApi, IDatasource, IGetRowsParams, RowModelType } from '@ag-grid-community/core';
+import type { ColDef, IServerSideDatasource, IServerSideGetRowsParams, RowModelType } from '@ag-grid-community/core';
 import type { AxisId, JoinEntry, PColumnIdAndSpec, PFrameHandle, PObjectId } from '@platforma-sdk/model';
 import {
   type PColumnSpec,
@@ -16,7 +16,7 @@ import {
 } from '@platforma-sdk/model';
 import canonicalize from 'canonicalize';
 import * as lodash from 'lodash';
-import { type PlDataTableSheet } from '../types';
+import type { PlDataTableSheet } from '../types';
 import { getHeterogeneousColumns, updatePFrameGridOptionsHeterogeneousAxes } from './table-source-heterogeneous';
 
 /**
@@ -273,13 +273,12 @@ const isLabelColumn = (col: PTableColumnSpec) => col.type === 'column' && col.sp
  * Calculate GridOptions for p-table data source type
  */
 export async function updatePFrameGridOptions(
-  gridApi: GridApi,
   pfDriver: PFrameDriver,
   pt: PTableHandle,
   sheets: PlDataTableSheet[],
 ): Promise<{
   columnDefs: ColDef[];
-  datasource?: IDatasource;
+  serverSideDatasource?: IServerSideDatasource;
   rowModelType: RowModelType;
   rowData?: unknown[];
 }> {
@@ -329,49 +328,52 @@ export async function updatePFrameGridOptions(
     return updatePFrameGridOptionsHeterogeneousAxes(hColumns, ptShape, columnDefs, await pfDriver.getData(pt, indices), fields, indices);
   }
 
-  let lastParams: IGetRowsParams | undefined = undefined;
-  const datasource = {
-    rowCount,
-    getRows: async (params) => {
-      gridApi.setGridOption('loading', true);
+  let lastParams: IServerSideGetRowsParams | undefined = undefined;
+  const serverSideDatasource = {
+    getRows: async (params: IServerSideGetRowsParams) => {
       try {
         if (rowCount == 0) {
-          params.successCallback([], rowCount);
-          gridApi.setGridOption('loading', false);
-          gridApi.showNoRowsOverlay();
+          params.success({ rowData: [], rowCount });
+          params.api.showNoRowsOverlay();
+          params.api.setGridOption('loading', false);
           return;
         }
 
         // this is to avoid double flickering when underlying table is changed
-        if (lastParams && !lodash.isEqual(lastParams.sortModel, params.sortModel)) {
+        if (lastParams && !lodash.isEqual(lastParams.request.sortModel, params.request.sortModel)) {
           lastParams = undefined;
-          params.failCallback();
+          params.fail();
+          params.api.setGridOption('loading', true);
           return;
         }
         lastParams = params;
 
-        const length = params.endRow - params.startRow;
+        let length = 0;
         let rowData: unknown[] = [];
-        if (length > 0) {
-          const data = await pfDriver.getData(pt, indices, {
-            offset: params.startRow,
-            length,
-          });
-          rowData = columns2rows(fields, data);
+        if (rowCount > 0 && params.request.startRow !== undefined && params.request.endRow !== undefined) {
+          length = Math.min(rowCount, params.request.endRow) - params.request.startRow;
+          if (length > 0) {
+            const data = await pfDriver.getData(pt, indices, {
+              offset: params.request.startRow,
+              length,
+            });
+            rowData = columns2rows(fields, data);
+          }
         }
 
-        params.successCallback(rowData, ptShape.rows);
-        gridApi.setGridOption('loading', false);
-        gridApi.autoSizeAllColumns();
+        params.success({ rowData, rowCount });
+        params.api.autoSizeAllColumns();
+        params.api.setGridOption('loading', false);
       } catch (error: unknown) {
-        params.failCallback();
+        params.fail();
+        params.api.setGridOption('loading', true);
       }
     },
-  } satisfies IDatasource;
+  } satisfies IServerSideDatasource;
 
   return {
-    rowModelType: 'infinite',
+    rowModelType: 'serverSide',
     columnDefs,
-    datasource,
+    serverSideDatasource,
   };
 }

package/vite.config.ts

@@ -20,6 +20,7 @@ export default defineConfig({
         '@ag-grid-community/core',
         '@ag-grid-community/client-side-row-model',
         '@ag-grid-community/infinite-row-model',
+        '@ag-grid-enterprise/server-side-row-model',
         '@ag-grid-community/styles',
         '@ag-grid-community/vue3',
         '@ag-grid-community/csv-export',