@platforma-sdk/ui-vue 1.12.0 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -38,7 +38,7 @@
     "@ag-grid-enterprise/side-bar": "^32.3.3",
     "@ag-grid-enterprise/column-tool-panel": "^32.3.3",
     "@milaboratories/uikit": "^2.2.11",
-    "@platforma-sdk/model": "^1.12.0"
+    "@platforma-sdk/model": "^1.13.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",

package/src/components/PlAgDataTable/PlAgDataTable.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import type {
+  ColDef,
+  ColGroupDef,
   GridApi,
   GridOptions,
   GridReadyEvent,
@@ -9,8 +11,6 @@ import type {
   ManagedGridOptions,
   SortState,
   StateUpdatedEvent,
-  ColDef,
-  ColGroupDef,
 } from '@ag-grid-community/core';
 import { ModuleRegistry } from '@ag-grid-community/core';
 import { AgGridVue } from '@ag-grid-community/vue3';
@@ -20,7 +20,7 @@ import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
 import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
 import { SideBarModule } from '@ag-grid-enterprise/side-bar';
 import { PlDropdownLine } from '@milaboratories/uikit';
-import type { AxisId, PlDataTableState, PTableColumnSpec, PTableRecordFilter, PTableSorting } from '@platforma-sdk/model';
+import type { AxisId, PlDataTableSheet, PlDataTableState, PTableColumnSpec, PTableRecordFilter, PTableSorting } from '@platforma-sdk/model';
 import canonicalize from 'canonicalize';
 import * as lodash from 'lodash';
 import { computed, ref, shallowRef, toRefs, watch } from 'vue';
@@ -30,7 +30,7 @@ import PlOverlayNoRows from './PlAgOverlayNoRows.vue';
 import { updateXsvGridOptions } from './sources/file-source';
 import type { PlAgDataTableRow } from './sources/table-source';
 import { enrichJoinWithLabelColumns, makeSheets, parseColId, updatePFrameGridOptions } from './sources/table-source';
-import type { PlDataTableSettings, PlDataTableSheet, PlAgDataTableController } from './types';
+import type { PlAgDataTableController, PlDataTableSettings } from './types';
 
 ModuleRegistry.registerModules([
   ClientSideRowModelModule,
@@ -173,13 +173,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)],
@@ -504,28 +504,14 @@ watch(
 
 <template>
   <div class="ap-ag-data-table-container">
-    <Transition name="ap-ag-data-table-sheets-transition">
-      <div v-if="sheets.value && sheets.value.length > 0" class="ap-ag-data-table-sheets">
-        <PlDropdownLine
-          v-for="(sheet, i) in sheets.value"
-          :key="i"
-          :model-value="sheetsState[makeSheetId(sheet.axis)]"
-          :options="sheet.options"
-          @update:model-value="(newValue) => onSheetChanged(makeSheetId(sheet.axis), newValue)"
-        />
-      </div>
-    </Transition>
-    <AgGridVue
-      :key="reloadKey"
-      :theme="AgGridTheme"
-      class="ap-ag-data-table-grid"
-      :grid-options="gridOptions"
-      @grid-ready="onGridReady"
-      @state-updated="onStateUpdated"
-      @grid-pre-destroyed="onGridPreDestroyed"
-      @store-refreshed="onStoreRefreshed"
-      @model-updated="onModelUpdated"
-    />
+    <div v-if="sheets.value && sheets.value.length > 0" class="ap-ag-data-table-sheets">
+      <PlDropdownLine v-for="(sheet, i) in sheets.value" :key="i" :model-value="sheetsState[makeSheetId(sheet.axis)]"
+        :options="sheet.options"
+        @update:model-value="(newValue) => onSheetChanged(makeSheetId(sheet.axis), newValue)" />
+    </div>
+    <AgGridVue :key="reloadKey" :theme="AgGridTheme" class="ap-ag-data-table-grid" :grid-options="gridOptions"
+      @grid-ready="onGridReady" @state-updated="onStateUpdated" @grid-pre-destroyed="onGridPreDestroyed"
+      @store-refreshed="onStoreRefreshed" @model-updated="onModelUpdated" />
   </div>
 </template>
 
@@ -537,16 +523,6 @@ watch(
   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;

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

@@ -127,7 +127,7 @@ export function updatePFrameGridOptionsHeterogeneousAxes(
   // 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
+    const id = canonicalize(header + '@' + i); // at least add i to avoid name clash with other columns
 
     columnDefs.push({
       colId: id,

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

@@ -1,5 +1,5 @@
 import type { ColDef, IServerSideDatasource, IServerSideGetRowsParams, RowModelType } from '@ag-grid-community/core';
-import type { AxisId, JoinEntry, PColumnIdAndSpec, PFrameHandle, PObjectId } from '@platforma-sdk/model';
+import type { AxisId, JoinEntry, PColumnIdAndSpec, PFrameHandle, PlDataTableSheet, PObjectId } from '@platforma-sdk/model';
 import {
   type PColumnSpec,
   type PFrameDriver,
@@ -9,13 +9,13 @@ import {
   type PValue,
   type ValueType,
   getAxesId,
+  getAxisId,
   isValueAbsent,
   isValueNA,
   mapJoinEntry,
 } from '@platforma-sdk/model';
 import canonicalize from 'canonicalize';
 import * as lodash from 'lodash';
-import type { PlDataTableSheet } from '../types';
 import { getHeterogeneousColumns, updatePFrameGridOptionsHeterogeneousAxes } from './table-source-heterogeneous';
 
 /**
@@ -215,7 +215,7 @@ export async function makeSheets(
   return axes.map((axis, i) => {
     const options = [...possibleValues[i]].map((value) => ({
       value: value,
-      text: value.toString(),
+      label: value.toString(),
     }));
     const defaultValue = options[0].value;
     return {
@@ -311,9 +311,17 @@ export async function updatePFrameGridOptions(
     const idx = indices[i];
     if (!isLabelColumn(specs[idx])) continue;
 
-    const axisId = getAxesId((specs[idx].spec as PColumnSpec).axesSpec)[0];
+    // axis of labels
+    const axisId = getAxisId((specs[idx].spec as PColumnSpec).axesSpec[0]);
     const axisIdx = lodash.findIndex(indices, (idx) => lodash.isEqual(specs[idx].id, axisId));
-    if (axisIdx === -1) continue;
+    if (axisIdx === -1) {
+      // no axis, probably we are in the sheet
+      const sheetIdx = lodash.findIndex(sheets, (sheet) => lodash.isEqual(sheet.axis, axisId));
+      if (sheetIdx === -1) {
+        console.warn(`added label column, but the axis is not in the data; axisId: ${axisId}`);
+        continue;
+      }
+    }
 
     // replace in h-columns
     indices[axisIdx] = idx;

package/src/components/PlAgDataTable/types.ts

@@ -4,31 +4,15 @@ import type {
   LocalBlobHandleAndSize,
   PColumnIdAndSpec,
   PFrameHandle,
+  PlDataTableSheet,
   PlTableFilter,
   PlTableFilterType,
-  PObjectId,
   PTableColumnId,
   PTableHandle,
   RemoteBlobHandleAndSize,
   ValueOrErrors,
 } from '@platforma-sdk/model';
 
-export type PlDataTableSheet = {
-  /** id of the axis to use */
-  axis: AxisId;
-  /** id of label column to use in filter instead of axis */
-  column?: PObjectId;
-  /** options to show in the filter tan */
-  options: {
-    /** value of the option (should be one of the values in the axis or column) */
-    value: string | number;
-    /** corresponding label */
-    text: string;
-  }[];
-  /** default (selected) value */
-  defaultValue?: string | number;
-};
-
 /** Data table settings */
 export type PlDataTableSettings =
   | {