@platforma-sdk/ui-vue 1.5.0 → 1.5.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.5.0",
+  "version": "1.5.40",
   "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",
-    "@milaboratories/uikit": "^1.2.16",
-    "@platforma-sdk/model": "^1.2.32"
+    "@milaboratories/uikit": "^1.2.17",
+    "@platforma-sdk/model": "^1.5.40"
   },
   "devDependencies": {
     "@ag-grid-community/client-side-row-model": "^32.2.2",
@@ -33,18 +33,20 @@
     "@ag-grid-enterprise/core": "^32.2.2",
     "@ag-grid-enterprise/clipboard": "^32.2.2",
     "@ag-grid-enterprise/range-selection": "^32.2.2",
-    "@faker-js/faker": "^8.4.0",
-    "@types/lodash": "^4.17.7",
-    "@types/node": "~20.16.5",
-    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@faker-js/faker": "^8.4.1",
+    "@types/lodash": "^4.17.10",
+    "@types/node": "~20.16.10",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@vitejs/plugin-vue": "^5.1.4",
+    "@vueuse/core": "^11.1.0",
+    "canonicalize": "^2.0.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.26.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.28.0",
     "happy-dom": "^14.12.3",
-    "lodash": "4.17.21",
-    "sass": "~1.77.2",
+    "lodash": "^4.17.21",
+    "sass": "~1.77.8",
     "typescript": "~5.5.4",
     "vite": "^5.4.8",
     "vitest": "^2.1.2",

package/src/components/PlAgDataTable/PlAgDataTable.vue

@@ -14,12 +14,15 @@ 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, updatePFrameGridOptions } from './sources/table-source';
-import type { PlDataTableSettings } from './types';
+import {
+  parseColId,
+  makeSheets,
+  updatePFrameGridOptions,
+  enrichJoinWithLabelColumns
+} from './sources/table-source';
+import type { PlDataTableSheet, PlDataTableSettings } from './types';
 import * as lodash from 'lodash';
-
-// @todo add license to AgGrid
-// const license = window.getEnvironmentValue('VITE_PLATFORMA_AG_GRID_LICENSE_KEY');
+import { computedAsync } from '@vueuse/core';
 
 ModuleRegistry.registerModules([ClientSideRowModelModule, ClipboardModule, InfiniteRowModelModule, RangeSelectionModule]);
 
@@ -29,8 +32,78 @@ const props = defineProps<{
 }>();
 const { settings } = toRefs(props);
 
+watch(
+  () => settings.value,
+  async (settings, oldSettings) => {
+    if (
+      settings.sourceType !== 'pframe' ||
+      !settings.pFrame?.ok ||
+      !settings.pFrame.value ||
+      !settings.join
+    ) return;
+    
+    if (
+      oldSettings &&
+      oldSettings.sourceType === 'pframe' && 
+      lodash.isEqual(settings.pFrame, oldSettings.pFrame) &&
+      lodash.isEqual(settings.join, oldSettings.join)
+    ) return;
+
+    const platforma = window.platforma;
+    if (!platforma) throw Error('platforma not set');
+
+    const pfDriver = platforma.pFrameDriver;
+    if (!pfDriver) throw Error('platforma.pFrameDriver not set');
+
+    const enrichedJoin = await enrichJoinWithLabelColumns(pfDriver, settings.pFrame.value, settings.join);
+
+    const state = tableState.value;
+
+    if (!state.pTableParams) {
+      state.pTableParams = {
+        sorting: [],
+        filters: [],
+      };
+    }
+    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 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;
+
+        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 [];
+      }
+      default: throw Error(`unsupported source type: ${sourceType satisfies never}`);
+    }
+  },
+  []
+);
+
 function makeSorting(state?: SortState): PTableSorting[] | undefined {
-  if (settings.value.sourceType !== 'ptable') return undefined;
+  if (settings.value.sourceType !== 'ptable' && settings.value.sourceType !== 'pframe') return undefined;
   return (
     state?.sortModel.map(
       (item) =>
@@ -59,7 +132,7 @@ const gridState = computed({
     state.gridState.columnOrder = gridState.columnOrder;
     state.gridState.sort = gridState.sort;
 
-    if (settings.value.sourceType === 'ptable') {
+    if (settings.value.sourceType === 'ptable' || settings.value.sourceType === 'pframe') {
       if (!state.pTableParams) {
         state.pTableParams = {
           sorting: [],
@@ -76,9 +149,9 @@ const gridState = computed({
 const makeSheetId = (axis: AxisId) => canonicalize(axis)!;
 
 function makeFilters(sheetsState: Record<string, string | number>): PTableRecordFilter[] | undefined {
-  if (settings.value.sourceType !== 'ptable') return undefined;
+  if (settings.value.sourceType !== 'ptable' && settings.value.sourceType !== 'pframe') return undefined;
   return (
-    settings.value.sheets?.map((sheet) => ({
+    sheets.value.map((sheet) => ({
       type: 'bySingleColumn',
       column: sheet.column
         ? {
@@ -106,7 +179,7 @@ const sheetsState = computed({
 
     state.gridState.sheets = sheetsState;
 
-    if (settings.value.sourceType === 'ptable') {
+    if (settings.value.sourceType === 'ptable' || settings.value.sourceType === 'pframe') {
       if (!state.pTableParams) {
         state.pTableParams = {
           sorting: [],
@@ -121,24 +194,27 @@ const sheetsState = computed({
 });
 
 watch(
-  () => settings.value,
-  (settings, oldSettings) => {
-    if (settings.sourceType === 'ptable' && oldSettings?.sourceType === 'ptable' && lodash.isEqual(settings.sheets, oldSettings.sheets)) return;
+  () => [settings.value, sheets.value] as const,
+  (state, oldState) => {
+    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') {
+    if (settings.sourceType !== 'ptable' && settings.sourceType !== 'pframe') {
       sheetsState.value = {};
       return;
     }
 
-    const state = sheetsState.value;
-    const sheets = settings.sheets ?? [];
+    const newSheetsState = sheetsState.value;
     for (const sheet of sheets) {
       const sheetId = makeSheetId(sheet.axis);
-      if (!state[sheetId]) {
-        state[sheetId] = sheet.defaultValue ?? sheet.options[0].value;
+      if (!newSheetsState[sheetId]) {
+        newSheetsState[sheetId] = sheet.defaultValue ?? sheet.options[0].value;
       }
     }
-    sheetsState.value = state;
+    sheetsState.value = newSheetsState;
   },
   { immediate: true },
 );
@@ -197,11 +273,11 @@ const onSheetChanged = (sheetId: string, newValue: string | number) => {
 };
 
 watch(
-  () => [gridApi.value, settings.value] as const,
+  () => [gridApi.value, settings.value, sheets.value] as const,
   async (state, oldState) => {
     if (lodash.isEqual(state, oldState)) return;
 
-    const [gridApi, settings] = state;
+    const [gridApi, settings, sheets] = state;
     if (!gridApi) return;
 
     const platforma = window.platforma;
@@ -209,6 +285,7 @@ watch(
 
     const sourceType = settings.sourceType;
     switch (sourceType) {
+      case 'pframe':
       case 'ptable': {
         const pfDriver = platforma.pFrameDriver;
         if (!pfDriver) throw Error('platforma.pFrameDriver not set');
@@ -223,7 +300,7 @@ watch(
           });
         }
 
-        const options = await updatePFrameGridOptions(gridApi, pfDriver, pTable.value, settings.sheets ?? []);
+        const options = await updatePFrameGridOptions(gridApi, pfDriver, pTable.value, sheets);
         return gridApi.updateGridOptions({
           loading: true,
           loadingOverlayComponentParams: { notReady: false },
@@ -262,15 +339,17 @@ watch(
 
 <template>
   <div class="ap-ag-data-table-container">
-    <div v-if="settings.sourceType === 'ptable' && (settings.sheets?.length ?? 0) > 0" class="ap-ag-data-table-sheets">
-      <PlDropdownLine
-        v-for="(sheet, i) in settings.sheets"
-        :key="i"
-        :model-value="sheetsState[makeSheetId(sheet.axis)]"
-        :options="sheet.options"
-        @update:model-value="(newValue) => onSheetChanged(makeSheetId(sheet.axis), newValue)"
-      />
-    </div>
+    <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)]"
+          :options="sheet.options"
+          @update:model-value="(newValue) => onSheetChanged(makeSheetId(sheet.axis), newValue)"
+        />
+      </div>
+    </Transition>
     <AgGridVue class="ap-ag-data-table-grid" :grid-options="gridOptions" />
   </div>
 </template>
@@ -282,6 +361,14 @@ 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;

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

@@ -1,17 +1,7 @@
 import type { ColDef, GridApi, IDatasource, IGetRowsParams } from '@ag-grid-community/core';
 import {
   type ValueType,
-  type PValueInt,
-  PValueIntNA,
-  PValueLongNA,
-  type PValueFloat,
-  PValueFloatNA,
-  type PValueDouble,
-  PValueDoubleNA,
-  type PValueString,
-  PValueStringNA,
-  type PValueBytes,
-  PValueBytesNA,
+  type PValue,
   type PFrameDriver,
   type PTableColumnId,
   type PTableColumnSpec,
@@ -19,6 +9,14 @@ import {
   type PTableVector,
   type PColumnSpec,
   getAxesId,
+  isValueNA,
+  isValueAbsent,
+  PFrameHandle,
+  AxisId,
+  PColumnIdAndSpec,
+  JoinEntry,
+  mapJoinEntry,
+  PObjectId
 } from '@platforma-sdk/model';
 import * as lodash from 'lodash';
 import canonicalize from 'canonicalize';
@@ -78,46 +76,15 @@ function getColDef(iCol: number, spec: PTableColumnSpec): ColDef {
   };
 }
 
-/**
- * Check if value is NA
- */
-function isValueNA(value: unknown, valueType: ValueType): boolean {
-  switch (valueType) {
-    case 'Int':
-      return (value as PValueInt) === PValueIntNA;
-    case 'Long':
-      return (value as bigint) === PValueLongNA;
-    case 'Float':
-      return (value as PValueFloat) === PValueFloatNA;
-    case 'Double':
-      return (value as PValueDouble) === PValueDoubleNA;
-    case 'String':
-      return (value as PValueString) === PValueStringNA;
-    case 'Bytes':
-      return (value as PValueBytes) === PValueBytesNA;
-    default:
-      throw Error(`unsupported data type: ${valueType satisfies never}`);
-  }
-}
-
-/**
- * Check if value is absent
- */
-function isValueAbsent(array: Uint8Array, index: number): boolean {
-  const chunkIndex = Math.floor(index / 8);
-  const mask = 1 << (7 - (index % 8));
-  return (array[chunkIndex] & mask) > 0;
-}
-
 /**
  * Convert value to displayable form
  */
-function toDisplayValue(value: string | number | bigint | Uint8Array, valueType: ValueType): string | number {
+function toDisplayValue(value: Exclude<PValue, null>, valueType: ValueType): string | number {
   switch (valueType) {
     case 'Int':
       return value as number;
     case 'Long':
-      return Number(value as bigint);
+      return typeof value === 'bigint' ? Number(value as bigint) : value as number;
     case 'Float':
       return value as number;
     case 'Double':
@@ -129,6 +96,144 @@ function toDisplayValue(value: string | number | bigint | Uint8Array, valueType:
     default:
       throw Error(`unsupported data type: ${valueType satisfies never}`);
   }
+};
+
+function getColumnsFromJoin(join: JoinEntry<PColumnIdAndSpec>): PColumnIdAndSpec[] {
+  const columns: PColumnIdAndSpec[] = [];
+  mapJoinEntry(join, (idAndSpec) => {
+    columns.push(idAndSpec);
+    return idAndSpec;
+  });
+  return columns;
+}
+
+async function getLabelColumns(
+  pfDriver: PFrameDriver,
+  pFrame: PFrameHandle,
+  idsAndSpecs: PColumnIdAndSpec[]
+): Promise<PColumnIdAndSpec[]> {
+  if (!idsAndSpecs.length) return [];
+
+  const response = await pfDriver.findColumns(pFrame, {
+    columnFilter: {
+      name: ['pl7.app/label']
+    },
+    compatibleWith: lodash.uniqWith(
+      idsAndSpecs.map((column) => getAxesId(column.spec.axesSpec).map(lodash.cloneDeep)).flat(),
+      lodash.isEqual
+    ),
+    strictlyCompatible: true
+  });
+  return response.hits.filter((idAndSpec) => idAndSpec.spec.axesSpec.length === 1);
+}
+
+export async function enrichJoinWithLabelColumns(
+  pfDriver: PFrameDriver,
+  pFrame: PFrameHandle,
+  join: JoinEntry<PColumnIdAndSpec>
+): Promise<JoinEntry<PColumnIdAndSpec>> {
+  const columns = getColumnsFromJoin(join);
+  const labelColumns = await getLabelColumns(pfDriver, pFrame, columns);
+  const missingLabelColumns = labelColumns.filter((column) => !lodash.find(columns, (c) => column.columnId === c.columnId));
+  if (missingLabelColumns.length === 0) return join;
+  return {
+    type: 'outer',
+    primary: join,
+    secondary: missingLabelColumns.map((column) => ({
+      type: 'column',
+      column,
+    }))
+  }
+}
+
+export async function makeSheets(
+  pfDriver: PFrameDriver,
+  pFrameHandle: PFrameHandle,
+  sheetAxes: AxisId[],
+  join: JoinEntry<PColumnIdAndSpec>
+): Promise<PlDataTableSheet[]> {
+  const axes = sheetAxes.filter((spec) => spec.type !== 'Bytes');
+
+  const columns = getColumnsFromJoin(join);
+
+  const mapping: [number, number][][] = axes.map((_) => []);
+  const labelCol: (PObjectId | null)[] = axes.map((_) => null);
+  for (let i = 0; i < columns.length; ++i) {
+    const axesId = getAxesId(columns[i].spec.axesSpec);
+    for (let j = 0; j < axesId.length; ++j) {
+      const k = lodash.findIndex(axes, (axis) => lodash.isEqual(axis, axesId[j]));
+      if (k === -1 || labelCol[k]) continue;
+
+      if (axesId.length === 1 && columns[i].spec.name === 'pl7.app/label') {
+        mapping[k] = [[i, j]];
+        labelCol[k] = columns[i].columnId;
+      } else {
+        mapping[k].push([i, j]);
+      }
+    }
+  }
+
+  for (let i = axes.length - 1; i >= 0; --i) {
+    if (!mapping[i].length) {
+      labelCol.splice(i, 1);
+      mapping.splice(i, 1);
+      axes.splice(i, 1);
+    }
+  }
+
+  const limit = 100;
+  const possibleValues: Set<string | number>[] = axes.map((_) => new Set());
+
+  loop1: for (let i = axes.length - 1; i >= 0; --i) {
+    for (const [column, _] of mapping[i]) {
+      const response = await pfDriver.getUniqueValues(pFrameHandle, {
+        columnId: columns[column].columnId,
+        ...(!labelCol[i] && { axis: lodash.cloneDeep(axes[i]) }),
+        filters: [],
+        limit
+      });
+      if (response.overflow) {
+        labelCol.splice(i, 1);
+        mapping.splice(i, 1);
+        axes.splice(i, 1);
+        continue loop1;
+      }
+
+      const valueType = response.values.type;
+      for (const value of response.values.data) {
+        if (isValueNA(value, valueType) || value === null) continue;
+        possibleValues[i].add(toDisplayValue(value, valueType));
+
+        if (possibleValues[i].size === limit) {
+          labelCol.splice(i, 1);
+          mapping.splice(i, 1);
+          axes.splice(i, 1);
+          continue loop1;
+        }
+      }
+    }
+
+    if (!possibleValues[i].size) {
+      labelCol.splice(i, 1);
+      mapping.splice(i, 1);
+      axes.splice(i, 1);
+      continue loop1;
+    }
+  }
+
+  return axes.map((axis, i) => {
+    const options = [...possibleValues[i]].map((value) => ({
+      value: value,
+      text: value.toString()
+    }));
+    const defaultValue = options[0].value;
+    return {
+      axis: lodash.cloneDeep(axis),
+      ...(labelCol[i] && { column: labelCol[i] }),
+      options,
+      defaultValue
+    } as PlDataTableSheet;
+  });
 }
 
 /**
@@ -182,22 +287,21 @@ export async function updatePFrameGridOptions(
   datasource: IDatasource;
 }> {
   const specs = await pfDriver.getSpec(pt);
-  const indices = specs
-    .map((spec, i) => (!lodash.find(sheets, (sheet) => lodash.isEqual(sheet.axis, spec.id)) ? i : null))
-    .filter((entry) => entry !== null);
+  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);
 
   for (let i = indices.length - 1; i >= 0; --i) {
     const idx = indices[i];
-    if (specs[idx].type !== 'column' || specs[idx].spec.name !== 'pl7.app/label') continue;
+    if (!(specs[idx].type === 'column' && specs[idx].spec.axesSpec.length === 1 && specs[idx].spec.name === 'pl7.app/label')) continue;
 
-    const axisId = getAxesId((specs[idx].spec as PColumnSpec).axesSpec).map(lodash.cloneDeep)[0];
+    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;
 
     indices[axisIdx] = idx;
-    indices.splice(idx, 1);
-    fields.splice(idx, 1);
+    indices.splice(i, 1);
+    fields.splice(i, 1);
   }
 
   const columnDefs = fields.map((i) => getColDef(i, specs[i]));

package/src/components/PlAgDataTable/types.ts

@@ -1,4 +1,4 @@
-import type { AxisId, LocalBlobHandleAndSize, PObjectId, PTableHandle, RemoteBlobHandleAndSize, ValueOrErrors } from '@platforma-sdk/model';
+import type { AxisId, JoinEntry, LocalBlobHandleAndSize, PColumnIdAndSpec, PFrameHandle, PObjectId, PTableHandle, RemoteBlobHandleAndSize, ValueOrErrors } from '@platforma-sdk/model';
 
 export type PlDataTableSheet = {
   /** id of the axis to use */
@@ -16,25 +16,30 @@ export type PlDataTableSheet = {
   defaultValue?: string | number;
 };
 
-/**
- * Data table settings
- */
+/** Data table settings */
 export type PlDataTableSettings =
   | {
-      /**
-       * The type of the source to feed the data into the table.
-       */
+      /** The type of the source to feed the data into the table */
+      sourceType: 'pframe';
+      /** PFrame handle output */
+      pFrame: ValueOrErrors<PFrameHandle | undefined> | undefined;
+      /** Join used to construct pTable, will be enriched with label-columns */
+      join: JoinEntry<PColumnIdAndSpec> | undefined;
+      /** Partitioning axes to make sheets */
+      sheetAxes: AxisId[];
+      /** PTable handle output */
+      pTable: ValueOrErrors<PTableHandle | undefined> | undefined;
+    }
+  | {
+      /** The type of the source to feed the data into the table */
       sourceType: 'ptable';
-      /**
-       * PTable handle output
-       */
-      pTable?: ValueOrErrors<PTableHandle | undefined> | undefined;
-      /**
-       * Sheets that we want to show in our table
-       */
+      /** PTable handle output */
+      pTable: ValueOrErrors<PTableHandle | undefined> | undefined;
+      /** Sheets that we want to show in our table */
       sheets?: PlDataTableSheet[];
     }
   | {
+      /** The type of the source to feed the data into the table */
       sourceType: 'xsv';
-      xsvFile?: ValueOrErrors<RemoteBlobHandleAndSize | undefined> | ValueOrErrors<LocalBlobHandleAndSize | undefined> | undefined;
+      xsvFile: ValueOrErrors<RemoteBlobHandleAndSize | undefined> | ValueOrErrors<LocalBlobHandleAndSize | undefined> | undefined;
     };