@platforma-sdk/ui-vue 1.41.2 → 1.41.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.41.2",
+  "version": "1.41.4",
   "type": "module",
   "main": "dist/lib.js",
   "styles": "dist/lib.js",
@@ -16,8 +16,8 @@
     "@types/semver": "^7.7.0",
     "@types/d3-format": "^3.0.4",
     "@milaboratories/miplots4": "^1.0.123",
-    "ag-grid-enterprise": "^33.3.2",
-    "ag-grid-vue3": "^33.3.2",
+    "ag-grid-enterprise": "^34.0.2",
+    "ag-grid-vue3": "^34.0.2",
     "canonicalize": "~2.1.0",
     "lru-cache": "^11.1.0",
     "vue": "^3.5.13",
@@ -25,9 +25,9 @@
     "@vueuse/integrations": "^13.3.0",
     "d3-format": "^3.1.0",
     "zod": "~3.23.8",
+    "@milaboratories/uikit": "2.3.20",
     "@milaboratories/biowasm-tools": "^1.1.0",
-    "@platforma-sdk/model": "~1.41.2",
-    "@milaboratories/uikit": "2.3.18"
+    "@platforma-sdk/model": "~1.41.4"
   },
   "devDependencies": {
     "happy-dom": "^15.11.7",
@@ -43,10 +43,10 @@
     "yarpm": "^1.2.0",
     "fast-json-patch": "^3.1.1",
     "@faker-js/faker": "^9.2.0",
-    "@milaboratories/eslint-config": "^1.0.4",
+    "@milaboratories/ts-configs": "1.0.4",
     "@milaboratories/build-configs": "1.0.4",
-    "@milaboratories/helpers": "^1.6.18",
-    "@milaboratories/ts-configs": "1.0.4"
+    "@milaboratories/eslint-config": "^1.0.4",
+    "@milaboratories/helpers": "^1.6.18"
   },
   "scripts": {
     "test": "vitest run --passWithNoTests",

package/src/components/PlAgDataTable/PlAgDataTableV2.vue

@@ -1,16 +1,23 @@
 <script lang="ts" setup>
-import { isJsonEqual } from '@milaboratories/helpers';
+import { promiseTimeout, isJsonEqual } from '@milaboratories/helpers';
 import type {
   AxisId,
-  AxisSpec,
   PlDataTableGridStateCore,
   PlDataTableStateV2,
   PlSelectionModel,
   PlTableColumnIdJson,
   PTableColumnSpec,
   PTableKey,
+  PTableValue,
+} from '@platforma-sdk/model';
+import {
+  getRawPlatformaInstance,
+  parseJson,
+  createPlSelectionModel,
+  matchAxisId,
+  getAxisId,
+  canonicalizeJson,
 } from '@platforma-sdk/model';
-import { getRawPlatformaInstance, parseJson } from '@platforma-sdk/model';
 import type {
   CellRendererSelectorFunc,
   ColDef,
@@ -22,7 +29,7 @@ import type {
   ManagedGridOptions,
 } from 'ag-grid-enterprise';
 import { AgGridVue } from 'ag-grid-vue3';
-import { computed, ref, shallowRef, toRefs, watch } from 'vue';
+import { computed, effectScope, ref, shallowRef, toRefs, watch } from 'vue';
 import { AgGridTheme } from '../../aggrid';
 import PlAgCsvExporter from '../PlAgCsvExporter/PlAgCsvExporter.vue';
 import { PlAgGridColumnManager } from '../PlAgGridColumnManager';
@@ -32,7 +39,7 @@ import PlAgDataTableSheets from './PlAgDataTableSheets.vue';
 import PlOverlayLoading from './PlAgOverlayLoading.vue';
 import PlOverlayNoRows from './PlAgOverlayNoRows.vue';
 import PlAgRowCount from './PlAgRowCount.vue';
-import { focusRow, makeOnceTracker } from './sources/focus-row';
+import { DeferredCircular, ensureNodeVisible } from './sources/focus-row';
 import { autoSizeRowNumberColumn, PlAgDataTableRowNumberColId } from './sources/row-number';
 import type { PlAgCellButtonAxisParams } from './sources/table-source-v2';
 import { calculateGridOptions } from './sources/table-source-v2';
@@ -44,13 +51,16 @@ import type {
   PlAgOverlayNoRowsParams,
   PlDataTableSettingsV2,
   PlDataTableSheetsSettings,
+  PlTableRowId,
   PlTableRowIdJson,
 } from './types';
 import { watchCached } from '@milaboratories/uikit';
+import { isPTableHidden, type PTableHidden } from './sources/common';
 
 const tableState = defineModel<PlDataTableStateV2>({
   required: true,
 });
+/** Warning: selection model value updates are ignored, use updateSelection instead */
 const selection = defineModel<PlSelectionModel>('selection');
 const props = defineProps<{
   /** Required component settings */
@@ -113,6 +123,7 @@ const { settings } = toRefs(props);
 const emit = defineEmits<{
   rowDoubleClicked: [key?: PTableKey];
   cellButtonClicked: [key?: PTableKey];
+  newDataRendered: [];
 }>();
 
 const { gridState, sheetsState, filtersState } = useTableState(tableState, settings);
@@ -149,7 +160,7 @@ const filtersSettings = computed<PlDataTableFiltersSettings>(() => {
 });
 
 const gridApi = shallowRef<GridApi<PlAgDataTableV2Row> | null>(null);
-const firstDataRenderedTracker = makeOnceTracker<GridApi<PlAgDataTableV2Row>>();
+const dataRenderedTracker = new DeferredCircular<GridApi<PlAgDataTableV2Row>>();
 const gridOptions = shallowRef<GridOptions<PlAgDataTableV2Row>>({
   animateRows: false,
   suppressColumnMoveAnimation: true,
@@ -170,7 +181,9 @@ const gridOptions = shallowRef<GridOptions<PlAgDataTableV2Row>>({
     if (selection.value) {
       const state = event.api.getServerSideSelectionState();
       const selectedKeys = state?.toggledNodes?.map((nodeId) => parseJson(nodeId as PlTableRowIdJson)) ?? [];
-      selection.value = { ...selection.value, selectedKeys };
+      if (!isJsonEqual(selection.value.selectedKeys, selectedKeys)) {
+        selection.value = { ...selection.value, selectedKeys };
+      }
     }
   },
   onRowDoubleClicked: (event) => {
@@ -331,12 +344,101 @@ watch(
 );
 
 defineExpose<PlAgDataTableV2Controller>({
-  focusRow: (rowKey) => focusRow(
-    (row) => isJsonEqual(row.data?.axesKey, rowKey),
-    firstDataRenderedTracker,
-  ),
+  focusRow: async (rowKey) => {
+    const gridApi = await dataRenderedTracker.promise;
+    if (gridApi.isDestroyed()) return false;
+
+    return ensureNodeVisible(gridApi, (row) => isJsonEqual(row.data?.axesKey, rowKey));
+  },
+  updateSelection: async ({ axesSpec, selectedKeys }) => {
+    const gridApi = await dataRenderedTracker.promise;
+    if (gridApi.isDestroyed()) return false;
+
+    const axes = selection.value?.axesSpec;
+    if (!axes || axes.length !== axesSpec.length) return false;
+
+    const mapping = axesSpec
+      .map((spec) => {
+        const id = getAxisId(spec);
+        return axes.findIndex((axis) => matchAxisId(axis, id));
+      });
+    const mappingSet = new Set(mapping);
+    if (mappingSet.has(-1) || mappingSet.size !== axesSpec.length) return false;
+
+    const selectedNodes = selectedKeys
+      .map((key) => canonicalizeJson<PlTableRowId>(mapping.map((index) => key[index])));
+    const oldSelectedKeys = gridApi.getServerSideSelectionState()?.toggledNodes ?? [];
+    if (!isJsonEqual(oldSelectedKeys, selectedNodes)) {
+      gridApi.setServerSideSelectionState({
+        selectAll: false,
+        toggledNodes: selectedNodes,
+      });
+
+      // wait for `onSelectionChanged` to update `selection` model
+      const scope = effectScope();
+      const { resolve, promise } = Promise.withResolvers();
+      scope.run(() => watch(selection, resolve, { once: true }));
+      try {
+        await promiseTimeout(promise, 500);
+      } catch {
+        return false;
+      } finally {
+        scope.stop();
+      }
+    }
+    return true;
+  },
+  getRowCount: async () => {
+    const gridApi = await dataRenderedTracker.promise;
+    if (gridApi.isDestroyed()) return;
+
+    return gridApi.getDisplayedRowCount();
+  },
+  getRow: async (index) => {
+    const gridApi = await dataRenderedTracker.promise;
+    if (gridApi.isDestroyed()) return;
+
+    const visibleColumns: {
+      spec: PTableColumnSpec;
+      field: `${number}`;
+    }[] = getDataColDefs(gridApi.getColumnDefs())
+      .filter((def) => !def.hide)
+      .map((def) => ({
+        spec: parseJson(def.colId! satisfies string as PlTableColumnIdJson).labeled,
+        field: def.field! as `${number}`,
+      }));
+
+    const row = Array.isArray(index)
+      ? gridApi.getRowNode(canonicalizeJson<PlTableRowId>(index))
+      : gridApi.getDisplayedRowAtIndex(index);
+    if (!row) return;
+
+    const rowData = row.data;
+    if (!rowData) return;
+
+    const getTableValue = (value: PTableValue | PTableHidden): PTableValue => {
+      if (isPTableHidden(value)) throw new Error('hidden value was not filtered out');
+      return value;
+    };
+
+    const spec: PTableColumnSpec[] = visibleColumns.map((column) => column.spec);
+    const data: PTableValue[] = visibleColumns.map((column) => getTableValue(rowData[column.field]));
+    return { spec, data };
+  },
 });
 
+function getDataColDefs(
+  columnDefs: ColDef<PlAgDataTableV2Row, PTableValue | PTableHidden>[] | null | undefined,
+): ColDef<PlAgDataTableV2Row, PTableValue | PTableHidden>[] {
+  const isColDef = <TData, TValue>(
+    def: ColDef<TData, TValue> | ColGroupDef<TData>,
+  ): def is ColDef<TData, TValue> => !('children' in def);
+  if (!columnDefs) return [];
+  return columnDefs
+    .filter(isColDef)
+    .filter((def) => def.colId && def.colId !== PlAgDataTableRowNumberColId);
+}
+
 // Propagate columns for filter component
 watchCached(
   () => gridOptions.value.columnDefs,
@@ -344,42 +446,17 @@ watchCached(
     const sourceId = settings.value.sourceId;
     if (sourceId === null) {
       filterableColumns.value = [];
-      if (selection.value) {
-        selection.value = {
-          axesSpec: [],
-          selectedKeys: [],
-        };
-      }
     } else {
-      const isColDef = (def: ColDef | ColGroupDef): def is ColDef =>
-        !('children' in def);
-      const colDefs = columnDefs?.filter(isColDef) ?? [];
-      const columns = colDefs
-        .map((def) => def.colId)
-        .filter((colId) => colId !== undefined)
-        .filter((colId) => colId !== PlAgDataTableRowNumberColId)
-        .map((colId) => parseJson(colId as PlTableColumnIdJson))
-        ?? [];
-      filterableColumns.value = columns.map((column) => column.labeled);
-      if (selection.value) {
-        const axesSpec = columns
-          .reduce((acc, column) => {
-            if (column.source.type === 'axis') {
-              acc.push(column.source.spec);
-            }
-            return acc;
-          }, [] as AxisSpec[]);
-        selection.value = {
-          ...selection.value,
-          axesSpec,
-        };
-      }
+      const dataColumns = getDataColDefs(columnDefs);
+      filterableColumns.value = dataColumns
+        .map((def) => parseJson(def.colId! satisfies string as PlTableColumnIdJson).labeled);
     }
   },
   { immediate: true },
 );
 
 // Update AgGrid when settings change
+const defaultSelection = createPlSelectionModel();
 let oldSettings: PlDataTableSettingsV2 | null = null;
 const generation = ref(0);
 watch(
@@ -393,7 +470,7 @@ watch(
     try {
       // Hide no rows overlay if it is shown, or else loading overlay will not be shown
       gridApi.hideOverlay();
-      firstDataRenderedTracker.reset();
+      dataRenderedTracker.reset();
 
       // No data source selected -> reset state to default
       if (!settings.sourceId) {
@@ -407,6 +484,9 @@ watch(
           serverSideDatasource: undefined,
         });
         if (selection.value) {
+          if (selection.value && !isJsonEqual(selection.value, defaultSelection)) {
+            selection.value = createPlSelectionModel();
+          }
           gridApi.setServerSideSelectionState({
             selectAll: false,
             toggledNodes: [],
@@ -424,7 +504,10 @@ watch(
             notReady: false,
           } satisfies PlAgOverlayLoadingParams,
         });
-        if (selection.value) {
+        if (selection.value && oldSettings?.sourceId) {
+          if (selection.value && !isJsonEqual(selection.value, defaultSelection)) {
+            selection.value = createPlSelectionModel();
+          }
           gridApi.setServerSideSelectionState({
             selectAll: false,
             toggledNodes: [],
@@ -455,7 +538,7 @@ watch(
         pfDriver: getRawPlatformaInstance().pFrameDriver,
         model: settings.model,
         sheets: settings.sheets ?? [],
-        track: firstDataRenderedTracker.track,
+        dataRenderedTracker,
         hiddenColIds: gridState.value.columnVisibility?.hiddenColIds,
         cellButtonAxisParams: {
           showCellButtonForAxisId: props.showCellButtonForAxisId,
@@ -463,11 +546,54 @@ watch(
             props.cellButtonInvokeRowsOnDoubleClick,
           trigger: (key?: PTableKey) => emit('cellButtonClicked', key),
         } satisfies PlAgCellButtonAxisParams,
-      }).then((options) => {
+      }).then((result) => {
         if (gridApi.isDestroyed() || stateGeneration !== generation.value) return;
-        return gridApi.updateGridOptions({
+        const { axesSpec, ...options } = result;
+        gridApi.updateGridOptions({
           ...options,
         });
+        if (selection.value) {
+          // Update selection if axesSpec changed, as order of axes may have changed and so we need to remap selected keys
+          const { axesSpec: oldAxesSpec, selectedKeys: oldSelectedKeys } = selection.value;
+          if (!isJsonEqual(oldAxesSpec, axesSpec)) {
+            if (!oldAxesSpec || axesSpec.length !== oldAxesSpec.length) {
+              const newSelection: PlSelectionModel = { axesSpec, selectedKeys: [] };
+              if (!isJsonEqual(selection.value, newSelection)) {
+                selection.value = newSelection;
+              }
+              return gridApi.setServerSideSelectionState({
+                selectAll: false,
+                toggledNodes: [],
+              });
+            }
+
+            const mapping = oldAxesSpec
+              .map(getAxisId)
+              .map((id) => axesSpec.findIndex((axis) => matchAxisId(axis, id)));
+            const mappingSet = new Set(mapping);
+            if (mappingSet.has(-1) || mappingSet.size !== axesSpec.length) {
+              const newSelection: PlSelectionModel = { axesSpec, selectedKeys: [] };
+              if (!isJsonEqual(selection.value, newSelection)) {
+                selection.value = newSelection;
+              }
+              return gridApi.setServerSideSelectionState({
+                selectAll: false,
+                toggledNodes: [],
+              });
+            }
+
+            const selectedNodes = oldSelectedKeys
+              .map((key) => mapping.map((index) => key[index]));
+            const newSelection: PlSelectionModel = { axesSpec, selectedKeys: selectedNodes };
+            if (!isJsonEqual(selection.value, newSelection)) {
+              selection.value = newSelection;
+            }
+            return gridApi.setServerSideSelectionState({
+              selectAll: false,
+              toggledNodes: selectedNodes.map((key) => canonicalizeJson<PlTableRowId>(key)),
+            });
+          }
+        }
       }).catch((error: unknown) => {
         if (gridApi.isDestroyed() || stateGeneration !== generation.value) return;
         console.trace(error);
@@ -477,6 +603,7 @@ watch(
           loading: false,
         });
       });
+      dataRenderedTracker.promise.then(() => emit('newDataRendered'));
     } catch (error: unknown) {
       console.trace(error);
     } finally {

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

@@ -1,32 +1,44 @@
 import type { GridApi, IRowNode } from 'ag-grid-enterprise';
-import { nextTick, shallowRef, watch } from 'vue';
+import { Deferred } from '@milaboratories/helpers';
 
-export function makeOnceTracker<TContext = undefined>() {
-  const state = shallowRef<[false, undefined] | [true, TContext]>([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 handle = watch(
-      state,
-      ([tracked, context]) => {
-        if (tracked) {
-          callback(context);
-          nextTick(() => handle.stop());
-        }
-      },
-      { immediate: true },
-    );
-    return handle;
-  };
-  return { track, reset, onceTracked };
+class DeferredTracked<T> extends Deferred<T> {
+  #resolved = false;
+
+  constructor() {
+    super();
+    this.promise.finally(() => {
+      this.#resolved = true;
+    });
+  }
+
+  public get resolved(): boolean {
+    return this.#resolved;
+  }
+}
+
+export class DeferredCircular<T> {
+  private deferred = new DeferredTracked<T>();
+
+  public get promise(): Promise<T> {
+    return this.deferred.promise;
+  }
+
+  public resolve(ctx: T): void {
+    this.deferred.resolve(ctx);
+  }
+
+  public get resolved(): boolean {
+    return this.deferred.resolved;
+  }
+
+  public reset(): void {
+    if (this.resolved) {
+      this.deferred = new DeferredTracked<T>();
+    }
+  }
 }
-export type OnceTracker<TContext = undefined> = ReturnType<typeof makeOnceTracker<TContext>>;
 
-function ensureNodeVisible<TData>(api: GridApi<TData>, selector: (row: IRowNode<TData>) => boolean): void {
+export function ensureNodeVisible<TData>(api: GridApi<TData>, selector: (row: IRowNode<TData>) => boolean): boolean {
   let rowIndex: number | null = null;
   const nodeSelector = (row: IRowNode<TData>): boolean => {
     if (selector(row)) {
@@ -43,16 +55,5 @@ function ensureNodeVisible<TData>(api: GridApi<TData>, selector: (row: IRowNode<
       api.setFocusedCell(rowIndex, columns[0]);
     }
   }
+  return rowIndex !== null;
 };
-
-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, selector);
-      resolve();
-    }));
-  });
-}