@platforma-sdk/ui-vue 1.36.0 → 1.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "type": "module",
   "main": "dist/lib.js",
   "module": "dist/lib.js",
@@ -15,14 +15,14 @@
   },
   "dependencies": {
     "@milaboratories/miplots4": "^1.0.98",
-    "ag-grid-enterprise": "^33.0.4",
-    "ag-grid-vue3": "^33.0.4",
+    "ag-grid-enterprise": "^33.3.2",
+    "ag-grid-vue3": "^33.3.2",
     "canonicalize": "~2.1.0",
     "lru-cache": "^11.1.0",
     "vue": "^3.5.13",
     "@milaboratories/biowasm-tools": "^1.1.0",
-    "@milaboratories/uikit": "^2.2.89",
-    "@platforma-sdk/model": "^1.34.10"
+    "@platforma-sdk/model": "^1.37.0",
+    "@milaboratories/uikit": "^2.2.90"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.2.0",
@@ -48,8 +48,8 @@
     "vue-tsc": "^2.1.10",
     "yarpm": "^1.2.0",
     "zod": "~3.23.8",
-    "@milaboratories/helpers": "^1.6.14",
-    "@milaboratories/eslint-config": "^1.0.4"
+    "@milaboratories/eslint-config": "^1.0.4",
+    "@milaboratories/helpers": "^1.6.14"
   },
   "scripts": {
     "test": "vitest run --passWithNoTests",

package/src/AgGridVue/index.ts

@@ -1,2 +1,3 @@
 export * from './useAgGridOptions';
 export * from './createAgGridColDef';
+export * from './selection';

package/src/AgGridVue/selection.ts

@@ -0,0 +1,82 @@
+import type { GridApi } from 'ag-grid-enterprise';
+
+/**
+ * Returns the number of selected rows in the grid.
+ * @param gridApi - The grid API.
+ * @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;
+    }
+  }
+  return 0;
+}
+
+/**
+ * Selects all rows in the grid.
+ * @param gridApi - The grid API.
+ */
+export function selectAll(gridApi: GridApi) {
+  const rowModel = gridApi.getGridOption('rowModelType');
+  switch (rowModel) {
+    case 'clientSide': {
+      gridApi.selectAll();
+      break;
+    }
+    case 'serverSide': {
+      // Instead of using `selectAll` we set selection state manually
+      // as `selectAll` will not give us the selected rows ids.
+      // `forEachNode` goes over all cached rows, so increase cached block size
+      // to match the number of rows you expect to be selected at most
+      gridApi.forEachNode((node) => {
+        node.setSelected(true);
+      });
+    }
+  }
+}
+
+/**
+ * Deselects all rows in the grid.
+ * @param gridApi - The grid API.
+ */
+export function deselectAll(gridApi: GridApi) {
+  const rowModel = gridApi.getGridOption('rowModelType');
+  switch (rowModel) {
+    case 'clientSide': {
+      gridApi.deselectAll();
+      break;
+    }
+    case 'serverSide': {
+      gridApi.setServerSideSelectionState({
+        selectAll: false,
+        toggledNodes: [],
+      });
+    }
+  }
+}
+
+/**
+ * Returns the total number of rows in the grid.
+ * @param gridApi - The grid API.
+ * @returns The total number of rows.
+ */
+export function getTotalRowsCount(gridApi: GridApi) {
+  return gridApi.getDisplayedRowCount();
+}
+
+/**
+ * Returns true if selection is enabled in the grid.
+ * @param gridApi - The grid API.
+ * @returns True if selection is enabled.
+ */
+export function isSelectionEnabled(gridApi: GridApi) {
+  return Boolean(gridApi.getGridOption('rowSelection'));
+}

package/src/components/PlAgDataTable/PlAgDataTable.vue

@@ -10,16 +10,12 @@ import {
   type ManagedGridOptions,
   type SortState,
   type StateUpdatedEvent,
-  ModuleRegistry,
-  ClientSideRowModelModule,
-  ClipboardModule,
-  CellSelectionModule,
-  ServerSideRowModelModule,
   isColumnSelectionCol,
 } from 'ag-grid-enterprise';
 import { AgGridVue } from 'ag-grid-vue3';
 import { PlDropdownLine } from '@milaboratories/uikit';
 import type {
+  CanonicalizedJson,
   PTableColumnSpecJson,
   PTableRowKey,
 } from '@platforma-sdk/model';
@@ -29,12 +25,11 @@ import {
   type PlDataTableGridStateWithoutSheets,
   type AxisId,
   type PlDataTableState,
-  type PTableColumnSpec,
   type PTableRecordFilter,
   type PTableSorting,
   parseJson,
+  canonicalizeJson,
 } from '@platforma-sdk/model';
-import canonicalize from 'canonicalize';
 import * as lodash from 'lodash';
 import { computed, nextTick, ref, shallowRef, toRefs, watch } from 'vue';
 import { AgGridTheme } from '../../lib';
@@ -42,20 +37,13 @@ import PlOverlayLoading from './PlAgOverlayLoading.vue';
 import PlOverlayNoRows from './PlAgOverlayNoRows.vue';
 import { updateXsvGridOptions } from './sources/file-source';
 import { type PlAgCellButtonAxisParams, makeRowId, updatePFrameGridOptions } from './sources/table-source';
-import type { PlAgDataTableController, PlDataTableSettings, PlAgDataTableRow, PlDataTableSettingsPTable } from './types';
+import type { PlAgDataTableController, PlDataTableSettings, PlAgDataTableRow, PlDataTableSettingsPTable, PlDataTableColumnsInfo } from './types';
 import { PlAgGridColumnManager } from '../PlAgGridColumnManager';
 import { autoSizeRowNumberColumn, PlAgDataTableRowNumberColId } from './sources/row-number';
 import { focusRow, makeOnceTracker, trackFirstDataRendered } from './sources/focus-row';
 import PlAgCsvExporter from '../PlAgCsvExporter/PlAgCsvExporter.vue';
 import { Deferred, isJsonEqual } from '@milaboratories/helpers';
 
-ModuleRegistry.registerModules([
-  ClientSideRowModelModule,
-  ClipboardModule,
-  ServerSideRowModelModule,
-  CellSelectionModule,
-]);
-
 const tableState = defineModel<PlDataTableState>({ default: { gridState: {} } });
 const selectedRows = defineModel<PTableRowKey[]>('selectedRows');
 const props = defineProps<{
@@ -102,7 +90,7 @@ const props = defineProps<{
 const { settings } = toRefs(props);
 const emit = defineEmits<{
   rowDoubleClicked: [key?: PTableRowKey];
-  columnsChanged: [columns: PTableColumnSpec[]];
+  columnsChanged: [info: PlDataTableColumnsInfo];
   cellButtonClicked: [key?: PTableRowKey];
 }>();
 
@@ -154,7 +142,7 @@ const gridState = computed<PlDataTableGridStateWithoutSheets>({
   },
 });
 
-const makeSheetId = (axis: AxisId) => canonicalize(getAxisId(axis))!;
+const makeSheetId = (axis: AxisId): CanonicalizedJson<AxisId> => canonicalizeJson(getAxisId(axis))!;
 
 function makeFilters(sheetsState: Record<string, string | number>): PTableRecordFilter[] | undefined {
   if (settings.value?.sourceType !== 'ptable') return undefined;
@@ -173,7 +161,7 @@ function makeFilters(sheetsState: Record<string, string | number>): PTableRecord
   );
 }
 
-const sheetsState = computed({
+const sheetsState = computed<Record<CanonicalizedJson<AxisId>, string | number>>({
   get: () => tableState.value.gridState.sheets ?? {},
   set: (sheetsState) => {
     const filters = makeFilters(sheetsState);
@@ -206,7 +194,7 @@ watch(
     if (oldSettings && oldSettings.sourceType === 'ptable' && lodash.isEqual(settings.sheets, oldSettings.sheets)) return;
 
     const oldSheetsState = sheetsState.value;
-    const newSheetsState: Record<string, string | number> = {};
+    const newSheetsState: Record<CanonicalizedJson<AxisId>, string | number> = {};
     for (const sheet of settings.sheets) {
       const sheetId = makeSheetId(sheet.axis);
       newSheetsState[sheetId] = oldSheetsState[sheetId] ?? sheet.defaultValue ?? sheet.options[0]?.value;
@@ -324,9 +312,18 @@ const onGridReady = (event: GridReadyEvent) => {
 const makePartialState = (state: GridState) => {
   return {
     sourceId: gridState.value.sourceId,
-    columnOrder: state.columnOrder,
-    sort: state.sort,
-    columnVisibility: state.columnVisibility as { hiddenColIds: PTableColumnSpecJson[] } | undefined,
+    columnOrder: state.columnOrder as {
+      orderedColIds: PTableColumnSpecJson[];
+    } | undefined,
+    sort: state.sort as {
+      sortModel: {
+        colId: PTableColumnSpecJson;
+        sort: 'asc' | 'desc';
+      }[];
+    } | undefined,
+    columnVisibility: state.columnVisibility as {
+      hiddenColIds: PTableColumnSpecJson[];
+    } | undefined,
   };
 };
 
@@ -367,16 +364,27 @@ watch(
     if (!oldOptions) return;
     if (options.rowModelType != oldOptions.rowModelType) ++reloadKey.value;
     if (options.columnDefs && !lodash.isEqual(options.columnDefs, oldOptions.columnDefs)) {
-      const isColDef = (def: ColDef | ColGroupDef): def is ColDef => !('children' in def);
-      const colDefs = options.columnDefs?.filter(isColDef) ?? [];
-      const columns
+      const sourceId = gridState.value.sourceId;
+      if (!sourceId) {
+        emit('columnsChanged', {
+          sourceId: null,
+          columns: [],
+        });
+      } else {
+        const isColDef = (def: ColDef | ColGroupDef): def is ColDef => !('children' in def);
+        const colDefs = options.columnDefs?.filter(isColDef) ?? [];
+        const columns
         = colDefs
           .map((def) => def.colId)
           .filter((colId) => colId !== undefined)
           .filter((colId) => colId !== PlAgDataTableRowNumberColId)
           .filter((colId) => !isColumnSelectionCol(colId))
           .map((colId) => parseJson(colId as PTableColumnSpecJson)) ?? [];
-      emit('columnsChanged', columns);
+        emit('columnsChanged', {
+          sourceId,
+          columns,
+        });
+      }
     }
     if (!lodash.isEqual(options.loadingOverlayComponentParams, oldOptions.loadingOverlayComponentParams) && options.loading) {
       gridApi.value?.setGridOption('loading', false);
@@ -386,7 +394,7 @@ watch(
   { immediate: true },
 );
 
-const onSheetChanged = (sheetId: string, newValue: string | number) => {
+const onSheetChanged = (sheetId: CanonicalizedJson<AxisId>, newValue: string | number) => {
   const state = sheetsState.value;
   if (state[sheetId] === newValue) return;
   state[sheetId] = newValue;

package/src/components/PlAgDataTable/PlAgDataTableSheets.vue

@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import {
+  PlDropdownLine,
+} from '@milaboratories/uikit';
+import type {
+  PlDataTableSheet,
+  PlDataTableSheetState,
+} from '@platforma-sdk/model';
+import {
+  getAxisId,
+} from '@platforma-sdk/model';
+import {
+  computed,
+  watchEffect,
+} from 'vue';
+import type {
+  PlDataTableSheetsSettings,
+  PlDataTableSheetNormalized,
+} from './types';
+import {
+  isJsonEqual,
+} from '@milaboratories/helpers';
+
+const state = defineModel<PlDataTableSheetState[]>({
+  default: [],
+});
+const props = defineProps<{
+  settings: Readonly<PlDataTableSheetsSettings>;
+}>();
+
+// Normalize sheets: skip sheets with no options, set default values
+const sheets = computed<PlDataTableSheetNormalized[]>(() => {
+  return props.settings.sheets
+    .filter((sheet) => sheet.options.length > 0)
+    .map((sheet, i) => {
+      const axisId = getAxisId(sheet.axis);
+
+      const getDefaultValue = (): string | number => {
+        const cachedState = props.settings.cachedState.find((s) => {
+          return isJsonEqual(s.axisId, axisId);
+        });
+        if (cachedState && isValidOption(sheet, cachedState.value)) {
+          return cachedState.value;
+        }
+        if (sheet.defaultValue && isValidOption(sheet, sheet.defaultValue)) {
+          return sheet.defaultValue;
+        }
+        return sheet.options[0].value;
+      };
+
+      const makePrefix = (): string => {
+        return (sheet.axis.annotations?.['pl7.app/label']?.trim()
+          ?? `Unlabeled axis ${i}`) + ':';
+      };
+
+      return {
+        axisId,
+        prefix: makePrefix(),
+        options: sheet.options,
+        defaultValue: getDefaultValue(),
+      } satisfies PlDataTableSheetNormalized;
+    });
+});
+
+function isValidOption(sheet: PlDataTableSheet, value: string | number): boolean {
+  return sheet.options.some((option) => option.value === value);
+}
+
+// Restore state from settings
+watchEffect(() => {
+  const oldState = [...state.value];
+  const newState = sheets.value.map((sheet, i) => makeStateEntry(i, sheet.defaultValue));
+  if (!isJsonEqual(oldState, newState)) {
+    state.value = newState;
+  }
+});
+
+function makeStateEntry(i: number, value: string | number): PlDataTableSheetState {
+  const axisId = sheets.value[i].axisId;
+  return {
+    axisId,
+    value,
+  };
+}
+
+function onSheetChanged(i: number, newValue: string | number): void {
+  const oldState = [...state.value];
+  const stateEntry = makeStateEntry(i, newValue);
+  if (!isJsonEqual(oldState[i], stateEntry)) {
+    const newState = [...oldState];
+    newState[i] = stateEntry;
+    state.value = newState;
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="$slots['before'] || sheets.length > 0 || $slots['after']"
+    :class="$style.container"
+  >
+    <slot name="before" />
+    <template v-for="(sheet, i) in sheets" :key="i">
+      <!-- For some reason state[i] is undefined when the sheet initially loads, so v-if to suppress the error -->
+      <PlDropdownLine
+        v-if="state[i]"
+        :model-value="state[i].value"
+        :options="sheet.options"
+        :prefix="sheet.prefix"
+        @update:model-value="(newValue: string | number) => onSheetChanged(i, newValue)"
+      />
+    </template>
+    <slot name="after" />
+  </div>
+</template>
+
+<style lang="css" module>
+.container {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  flex-wrap: wrap;
+  z-index: 3;
+}
+</style>