@platforma-sdk/ui-vue 1.41.3 → 1.41.6

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

@@ -1,12 +1,15 @@
 import type {
-  PTableColumnSpecColumn } from '@platforma-sdk/model';
+  AxesSpec,
+  PTableColumnId,
+  PTableColumnSpecColumn,
+  PTableValue,
+} from '@platforma-sdk/model';
 import {
   canonicalizeJson,
   getAxisId,
   isColumnOptional,
   mapPTableValueToAxisKey,
   pTableValue,
-  type PColumnSpec,
   type PFrameDriver,
   type PlDataTableSheet,
   type PTableVector,
@@ -18,6 +21,7 @@ import {
   type PlTableColumnIdJson,
   isLabelColumn as isLabelColumnSpec,
   isColumnHidden,
+  matchAxisId,
 } from '@platforma-sdk/model';
 import type {
   CellStyle,
@@ -28,7 +32,6 @@ import type {
   IServerSideGetRowsParams,
   ManagedGridOptions,
 } from 'ag-grid-enterprise';
-import canonicalize from 'canonicalize';
 import type { PlAgHeaderComponentParams, PlAgHeaderComponentType } from '../../PlAgColumnHeader';
 import { PlAgColumnHeader } from '../../PlAgColumnHeader';
 import { PlAgTextAndButtonCell } from '../../PlAgTextAndButtonCell';
@@ -41,11 +44,27 @@ import { makeRowNumberColDef, PlAgDataTableRowNumberColId } from './row-number';
 import { getColumnRenderingSpec } from './value-rendering';
 import type { Ref } from 'vue';
 import { isJsonEqual } from '@milaboratories/helpers';
+import type { DeferredCircular } from './focus-row';
 
 export function isLabelColumn(column: PTableColumnSpec): column is PTableColumnSpecColumn {
   return column.type === 'column' && isLabelColumnSpec(column.spec);
 }
 
+export function getPTableColumnId(spec: PTableColumnSpec): PTableColumnId {
+  switch (spec.type) {
+    case 'axis':
+      return {
+        type: 'axis',
+        id: getAxisId(spec.spec),
+      };
+    case 'column':
+      return {
+        type: 'column',
+        id: spec.id,
+      };
+  }
+}
+
 /** Convert columnar data from the driver to rows, used by ag-grid */
 function columns2rows(
   fields: number[],
@@ -78,7 +97,7 @@ export async function calculateGridOptions({
   pfDriver,
   model,
   sheets,
-  track,
+  dataRenderedTracker,
   hiddenColIds,
   cellButtonAxisParams,
 }: {
@@ -86,133 +105,120 @@ export async function calculateGridOptions({
   pfDriver: PFrameDriver;
   model: PlDataTableModel;
   sheets: PlDataTableSheet[];
-  track: (ctx: GridApi<PlAgDataTableV2Row>) => void;
+  dataRenderedTracker: DeferredCircular<GridApi<PlAgDataTableV2Row>>;
   hiddenColIds?: PlTableColumnIdJson[];
   cellButtonAxisParams?: PlAgCellButtonAxisParams;
-}): Promise<Pick<ManagedGridOptions<PlAgDataTableV2Row>, 'columnDefs' | 'serverSideDatasource'>> {
-  const pt = model.visibleTableHandle;
+}): Promise<Pick<ManagedGridOptions<PlAgDataTableV2Row>, 'columnDefs' | 'serverSideDatasource'> & { axesSpec: AxesSpec }> {
+  const stateGeneration = generation.value;
+  const stateChangedError = new Error('table state generation changed');
+
+  // get specs of the full table
   const specs = await pfDriver.getSpec(model.fullTableHandle);
-  type SpecId = string;
-  const specId = (spec: PTableColumnSpec): SpecId =>
-    spec.type === 'axis' ? canonicalize(getAxisId(spec.spec))! : spec.id;
+  if (stateGeneration !== generation.value) throw stateChangedError;
+
+  // get specs of the visible table (with hidden columns omitted)
+  const pt = model.visibleTableHandle;
   const dataSpecs = await pfDriver.getSpec(pt);
-  const dataSpecsMap = new Map<SpecId, number>();
-  dataSpecs.forEach((spec, i) => {
-    dataSpecsMap.set(specId(spec), i);
-  });
-  const specsToDataSpecsMapping = new Map<number, number>();
-  specs.forEach((spec, i) => {
-    const dataSpecIdx = dataSpecsMap.get(specId(spec));
-    if (dataSpecIdx === undefined && spec.type === 'axis')
-      throw new Error(`axis ${JSON.stringify(spec.spec)} not present in join result`);
-    specsToDataSpecsMapping.set(i, dataSpecIdx ?? -1);
-  });
+  if (stateGeneration !== generation.value) throw stateChangedError;
+
+  // create index mapping from full specs to visible subset (hidden columns would have -1)
+  const specId = (spec: PTableColumnSpec) => canonicalizeJson<PTableColumnId>(getPTableColumnId(spec));
+  const dataSpecsMap = new Map(
+    dataSpecs.entries().map(([i, spec]) => [specId(spec), i]),
+  );
+  const specsToDataSpecsMapping = new Map(
+    specs.entries().map(([i, spec]) => {
+      const dataSpecIdx = dataSpecsMap.get(specId(spec)) ?? -1;
+      if (dataSpecIdx === -1 && spec.type === 'axis')
+        throw new Error(`axis ${JSON.stringify(spec.spec)} not present in join result`);
+      return [i, dataSpecIdx];
+    }),
+  );
 
-  let numberOfAxes = specs.findIndex((s) => s.type === 'column');
-  if (numberOfAxes === -1) numberOfAxes = specs.length;
+  // gether indices of columns that would be displayed in the table
 
-  // column indices in the specs array that we are going to process
-  const indices = specs.keys()
+  const sheetAxesIds = sheets.map((sheet) => getAxisId(sheet.axis));
+  const isPartitionedAxis = (axisId: AxisId) => sheetAxesIds.some((id) => matchAxisId(id, axisId));
+
+  const labelColumns: { axisId: AxisId; labelColumnIdx: number }[] = [];
+  const setLabelColumnIndex = (axisId: AxisId, labelColumnIdx: number) => {
+    if (!labelColumns.some((info) => matchAxisId(info.axisId, axisId))) {
+      labelColumns.push({ axisId, labelColumnIdx });
+    } else {
+      console.warn(`multiple label columns match axisId: ${JSON.stringify(axisId)}`);
+    }
+  };
+  const getLabelColumnIndex = (axisId: AxisId) => {
+    return labelColumns.find((info) => matchAxisId(info.axisId, axisId))?.labelColumnIdx ?? -1;
+  };
+
+  // filter out partitioned axes, label columns and hidden columns
+  let indices = specs.entries()
     .filter(
-      (i) => {
-        const spec = specs[i];
+      ([i, spec]) => {
         switch (spec.type) {
-          case 'axis':
-          {
-            return !sheets.some(
-              (sheet) => isJsonEqual(getAxisId(sheet.axis), spec.id),
-            );
-          }
+          case 'axis': return !isPartitionedAxis(spec.id);
           case 'column':
-          {
             if (isLabelColumnSpec(spec.spec)) {
-              return !sheets.some(
-                (sheet) => isJsonEqual(getAxisId(sheet.axis), getAxisId(spec.spec.axesSpec[0])),
-              );
-            } else {
-              return !isColumnHidden(spec.spec);
+              const labeledAxisId = getAxisId(spec.spec.axesSpec[0]);
+              if (!isPartitionedAxis(labeledAxisId)) {
+                setLabelColumnIndex(labeledAxisId, i);
+              }
+              return false;
             }
-          }
+            return !isColumnHidden(spec.spec);
         }
       },
     )
-    .toArray()
-    .sort((a, b) => {
-      if (specs[a].type !== specs[b].type) return specs[a].type === 'axis' ? -1 : 1;
+    .map(([i]) => i)
+    .toArray();
 
-      const aPriority = specs[a].spec.annotations?.['pl7.app/table/orderPriority'];
-      const bPriority = specs[b].spec.annotations?.['pl7.app/table/orderPriority'];
+  // order columns by priority
+  indices.sort((a, b) => {
+    if (specs[a].type !== specs[b].type) return specs[a].type === 'axis' ? -1 : 1;
 
-      if (aPriority === undefined) return bPriority === undefined ? 0 : 1;
-      if (bPriority === undefined) return -1;
-      return Number(bPriority) - Number(aPriority);
-    });
+    const aPriority = specs[a].spec.annotations?.['pl7.app/table/orderPriority'];
+    const bPriority = specs[b].spec.annotations?.['pl7.app/table/orderPriority'];
 
-  const fields = [...indices];
-
-  // process label columns
-  const firstColumnIdx = indices.findIndex((i) => specs[i].type === 'column');
-  for (let i = indices.length - 1; i >= firstColumnIdx; --i) {
-    const idx = indices[i];
-    if (!isLabelColumn(specs[idx])) continue;
+    if (aPriority === undefined) return bPriority === undefined ? 0 : 1;
+    if (bPriority === undefined) return -1;
+    return Number(bPriority) - Number(aPriority);
+  });
 
-    // axis of labels
-    const axisId = getAxisId((specs[idx].spec as PColumnSpec).axesSpec[0]);
-    const axisIdx = indices.findIndex((idx) => isJsonEqual(specs[idx].id, axisId));
-    if (axisIdx !== -1) {
-      indices[axisIdx] = idx;
-    } else {
-      console.warn(`multiple label columns match axisId: ${JSON.stringify(axisId)}`);
+  // fields are indices of columns that would go to columnDefs
+  const fields = [...indices];
+  // replace axes with label columns
+  indices = indices.map((i) => {
+    const spec = specs[i];
+    if (spec.type === 'axis') {
+      const labelColumnIdx = getLabelColumnIndex(spec.id);
+      if (labelColumnIdx !== -1) {
+        return labelColumnIdx;
+      }
     }
-
-    // remove original axis
-    indices.splice(i, 1);
-    fields.splice(i, 1);
-  }
-
-  const columnDefs: ColDef<PlAgDataTableV2Row>[] = [
+    return i;
+  });
+  const columnDefs: ColDef<PlAgDataTableV2Row, PTableValue | PTableHidden>[] = [
     makeRowNumberColDef(),
     ...fields.map((field, index) => makeColDef(field, specs[field], specs[indices[index]], hiddenColIds, cellButtonAxisParams)),
   ];
 
-  // mixing in axis indices
-
-  const allIndices = [...indices];
-
-  // axisIdx (0..<axesCount) -> idx in allIndices array
-  const axisToFieldIdx = new Map<number, number>();
-  for (let i = 0; i < numberOfAxes; ++i) axisToFieldIdx.set(i, -1);
-
-  allIndices.forEach((idx, i) => {
-    if (axisToFieldIdx.has(idx)) axisToFieldIdx.set(idx, i);
-  });
-  // at this point we have axis indices that are not listed in indices set to -1 in axisToFieldIdx
-
-  // adding those indices at the end of allIndices array, to make sure we have all the axes in our response
-  for (const [key, value] of axisToFieldIdx) {
-    if (value === -1) {
-      axisToFieldIdx.set(key, allIndices.length /* at this index value will be inserted in the next line */);
-      allIndices.push(key);
-    }
-  }
-
-  // Construct the `axes` array for key generation in `columns2rows`.
-  // The key components should be ordered according to the display order of axis columns from the `fields` array.
-  const axes: number[] = fields
-    .filter((field) => specs[field].type === 'axis')
-    .map((field) => {
-      const r = allIndices.indexOf(field);
+  // mix in indices of skipped axes (axes that were partitioned or replaced with label columns)
+  const axesSpec = specs.values().filter((spec) => spec.type === 'axis').map((spec) => spec.spec).toArray();
+  const axes = axesSpec.keys()
+    .map((i) => {
+      let r = indices.indexOf(i);
       if (r === -1) {
-        throw new Error(
-          `Assertion failed: Original axis spec index ${field} (from fields) for key construction not found in allIndices.`,
-        );
+        r = indices.length;
+        indices.push(i);
       }
       return r;
-    });
+    })
+    .toArray();
 
   const requestIndices: number[] = [];
   const resultMapping: number[] = [];
-  allIndices.forEach((idx) => {
+  indices.forEach((idx) => {
     const dataSpecIdx = specsToDataSpecsMapping.get(idx)!;
     if (dataSpecIdx !== -1) {
       resultMapping.push(requestIndices.length);
@@ -222,7 +228,6 @@ export async function calculateGridOptions({
     }
   });
 
-  const stateGeneration = generation.value;
   let rowCount = -1;
   let lastParams: IServerSideGetRowsParams | undefined = undefined;
   const serverSideDatasource: IServerSideDatasource<PlAgDataTableV2Row> = {
@@ -270,20 +275,18 @@ export async function calculateGridOptions({
             .filter((column) => column.getColId() !== PlAgDataTableRowNumberColId),
         );
         params.api.setGridOption('loading', false);
+        dataRenderedTracker.resolve(params.api);
       } catch (error: unknown) {
         if (stateGeneration !== generation.value || params.api.isDestroyed()) return params.fail();
         params.api.setGridOption('loading', true);
         params.fail();
         console.trace(error);
-      } finally {
-        if (!params.api.isDestroyed()) {
-          track(params.api);
-        }
       }
     },
   };
 
   return {
+    axesSpec,
     columnDefs,
     serverSideDatasource,
   };
@@ -304,7 +307,7 @@ export function makeColDef(
   labeledSpec: PTableColumnSpec,
   hiddenColIds: PlTableColumnIdJson[] | undefined,
   cellButtonAxisParams?: PlAgCellButtonAxisParams,
-): ColDef {
+): ColDef<PlAgDataTableV2Row, PTableValue | PTableHidden> {
   const colId = canonicalizeJson<PlTableColumnId>({
     source: spec,
     labeled: labeledSpec,
@@ -324,8 +327,8 @@ export function makeColDef(
     colId,
     mainMenuItems: defaultMainMenuItems,
     context: spec,
-    field: iCol.toString(),
-    headerName: labeledSpec.spec.annotations?.['pl7.app/label']?.trim() ?? 'Unlabeled ' + spec.type + ' ' + iCol.toString(),
+    field: `${iCol}`,
+    headerName: labeledSpec.spec.annotations?.['pl7.app/label']?.trim() ?? `Unlabeled ${spec.type} ${iCol}`,
     lockPosition: spec.type === 'axis',
     hide: hiddenColIds?.includes(colId) ?? isColumnOptional(spec.spec),
     valueFormatter: columnRenderingSpec.valueFormatter,

package/src/components/PlAgDataTable/types.ts

@@ -174,8 +174,37 @@ export type PlAgDataTableV2Controller = {
   /**
    * Scroll table to make row with provided key visible
    * Warning: works reliably only in client side mode.
+   * @returns `true` if row was found and focused, `false` otherwise
    */
-  focusRow: (rowKey: PTableKey) => Promise<void>;
+  focusRow: (rowKey: PTableKey) => Promise<boolean>;
+  /**
+   * Update selection in the table.
+   * @param axesIds - axes ids identifying axes key values in `selectedKeys`
+   * @param selectedKeys - axes keys of the rows to select
+   * Warning: update will be ignored if axes ids cannot be correctly resolved
+   * @returns `true` if selection was updated, `false` otherwise
+   */
+  updateSelection: ({
+    axesSpec,
+    selectedKeys,
+  }: {
+    axesSpec: AxisId[];
+    selectedKeys: PTableKey[];
+  }) => Promise<boolean>;
+  /**
+   * Get number of rows in the table.
+   * @returns number of rows
+   */
+  getRowCount: () => Promise<undefined | number>;
+  /**
+   * Get row by index or axes key.
+   * @param index - row index or axes key
+   * @returns row spec and data, `undefined` if row was not loaded
+   */
+  getRow: (index: number | PlTableRowId) => Promise<undefined | {
+    spec: PTableColumnSpec[];
+    data: PTableValue[];
+  }>;
 };
 
 export type PlTableRowId = PTableKey;

package/src/internal/test-helpers/BlockMock.ts

@@ -58,6 +58,11 @@ export abstract class BlockMock<
     });
   }
 
+  async dispose(): Promise<ResultOrError<void>> {
+    console.log('unused');
+    return { value: undefined };
+  }
+
   get uTag(): string {
     return this.state.uTag;
   }

package/dist/lib/ui/uikit/dist/components/PlAccordion/ExpandTransition.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpandTransition.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlAccordion/ExpandTransition.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst onStart = (el: Element) => {\n  el.classList.add('expand-collapse-fix');\n  (el as HTMLElement).style.setProperty('--component-height', el.scrollHeight + 'px');\n};\n\nconst onAfter = (el: Element) => {\n  (el as HTMLElement).style.removeProperty('--component-height');\n  el.classList.remove('expand-collapse-fix');\n};\n</script>\n\n<template>\n  <Transition name=\"expand-collapse\" @enter=\"onStart\" @leave=\"onStart\" @after-enter=\"onAfter\" @after-leave=\"onAfter\">\n    <slot/>\n  </Transition>\n</template>\n\n<style>\n.expand-collapse-fix {\n  overflow: hidden;\n}\n\n.expand-collapse-enter-active,\n.expand-collapse-leave-active {\n  transition:\n    height 0.2s ease-in-out,\n    opacity 0.2s ease-in-out;\n  height: var(--component-height);\n}\n\n.expand-collapse-enter-from,\n.expand-collapse-leave-to {\n  opacity: 0.5;\n  height: 0;\n}\n</style>\n"],"names":["onStart","el","onAfter"],"mappings":";;;;AACMA,UAAAA,IAAU,CAACC,MAAgB;AAC5BA,QAAA,UAAU,IAAI,qBAAqB,GACrCA,EAAmB,MAAM,YAAY,sBAAsBA,EAAG,eAAe,IAAI;AAAA,IAAA,GAG9EC,IAAU,CAACD,MAAgB;AAC9BA,QAAmB,MAAM,eAAe,oBAAoB,GAC1DA,EAAA,UAAU,OAAO,qBAAqB;AAAA,IAC3C;;;;;;;;;;;;;;;"}

package/dist/lib/ui/uikit/dist/generated/components/svg/images/SvgRequired.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SvgRequired.vue.js","sources":["../../../../../../../../../../../lib/ui/uikit/src/generated/components/svg/images/SvgRequired.vue"],"sourcesContent":["<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->\n<script lang=\"ts\">\nimport '../svg-styles.css';\nexport default { name: 'SvgRequired' };\n</script>\n\n<template>\n  <div class=\"svg-icon SvgRequired\" style=\"width: 5px; height: 12px\" />\n</template>\n\n<style>\n  .SvgRequired { background-image: url(\"data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225%22%20height%3D%2212%22%20viewBox%3D%220%200%205%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.51685%204.8L2.5%203.34159L3.47612%204.8L4.39607%204.12743L3.31461%202.7469L5%202.25133L4.64888%201.16106L3.00562%201.77699L3.06882%200H1.93118L1.99438%201.77699L0.351124%201.16106L0%202.25133L1.68539%202.7469L0.59691%204.12743L1.51685%204.8Z%22%20fill%3D%22%23F1222F%22%2F%3E%3C%2Fsvg%3E\"); }\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAOoC,MAAA,IAAA;AAAA,EAAA,OAAA;AAAA;;;;;;"}