@platforma-sdk/ui-vue 1.84.1 → 1.84.3

package/src/components/PlAgDataTable/__tests__/PlAgDataTableV2.reload.jsdomtest.ts

@@ -0,0 +1,222 @@
+/**
+ * The component recreates the whole AG Grid (`:key="reloadKey"`) when the stored
+ * grid state disagrees with the grid's own state, which is meant to converge
+ * after a single remount.
+ *
+ * It did not converge when the stored state travelled back through the platform:
+ * the write is debounced, and a block that is running has its ui state re-pushed
+ * meanwhile, so the state flipped between what the grid had and what the project
+ * still held. Every flip re-armed the comparison and the grid was recreated ~20
+ * times a second — the symptom being a strobing header and a console full of AG
+ * Grid licence banners.
+ */
+import { mount } from "@vue/test-utils";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { defineComponent, h, onUnmounted, ref } from "vue";
+
+const hoisted = vi.hoisted(() => ({ driver: {} as Record<string, unknown> }));
+
+// The CSV exporter reaches the pf-spec WASM module, which cannot initialise
+// under jsdom; nothing here exercises export.
+vi.mock("@milaboratories/pf-spec-driver", () => ({ SpecDriver: class {} }));
+vi.mock("@milaboratories/columns-collection-driver", () => ({
+  ColumnsCollectionDriverImpl: class {},
+}));
+vi.mock("@platforma-sdk/model", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return { ...actual, getRawPlatformaInstance: () => ({ pFrameDriver: hoisted.driver }) };
+});
+
+const { activateAgGrid } = await import("../../../composition/AgGrid");
+const { canonicalizeJson } = await import("@platforma-sdk/model");
+const PlAgDataTableV2 = (await import("../PlAgDataTableV2.vue")).default;
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+type Any = Record<string, any>;
+
+const axisSpec = { name: "sampleId", type: "String", annotations: { "pl7.app/label": "Sample" } };
+const colSpec = (name: string): Any => ({
+  kind: "PColumn",
+  name,
+  valueType: "Int",
+  axesSpec: [axisSpec],
+  annotations: { "pl7.app/label": name },
+});
+const specs: Any[] = [
+  { type: "axis", id: { name: "sampleId", type: "String" }, spec: axisSpec },
+  { type: "column", id: "col-a", spec: colSpec("A") },
+  { type: "column", id: "col-b", spec: colSpec("B") },
+];
+const columnId = (spec: Any) =>
+  canonicalizeJson({ type: "column", id: spec.id } as never) as string;
+
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/** Counts AG Grid instantiations: every `createGrid` inserts one root wrapper. */
+function countGrids() {
+  let created = 0;
+  const observer = new MutationObserver((records) => {
+    for (const record of records)
+      for (const node of record.addedNodes)
+        if (node instanceof Element && node.classList?.contains("ag-root-wrapper")) created++;
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+  return { get: () => created, stop: () => observer.disconnect() };
+}
+
+/**
+ * Stands in for the block app plus the platform: a write from the table does not
+ * land in the prop straight away (it is debounced, then travels to the project
+ * state and back), and while a block runs the platform keeps re-pushing the
+ * state it currently holds.
+ */
+const Host = defineComponent({
+  props: {
+    settings: { type: Object, required: true },
+    initial: { type: Object, required: true },
+    echoMs: { type: Number, required: true },
+    pushEveryMs: { type: Number, required: true },
+  },
+  setup(props) {
+    const clone = (value: Any) => JSON.parse(JSON.stringify(value)) as Any;
+    const platform = { value: clone(props.initial) };
+    const pushed = ref(clone(platform.value));
+    const timer = setInterval(() => (pushed.value = clone(platform.value)), props.pushEveryMs);
+    onUnmounted(() => clearInterval(timer));
+    return () =>
+      h(PlAgDataTableV2 as Any, {
+        modelValue: pushed.value,
+        "onUpdate:modelValue": (state: Any) => {
+          const snapshot = clone(state);
+          setTimeout(() => {
+            platform.value = snapshot;
+            pushed.value = clone(snapshot);
+          }, props.echoMs);
+        },
+        settings: props.settings,
+      });
+  },
+});
+
+beforeAll(() => activateAgGrid());
+
+describe("PlAgDataTableV2", () => {
+  it("takes the loading overlay down when the model goes between handles", async () => {
+    // What a block re-running does to the table: it is already loading against one
+    // set of handles when the model drops them for a moment on its way to the next.
+    // That settings change starts no calculation of its own, so the one in flight is
+    // the only thing left that can clear the overlay.
+    hoisted.driver.getSpec = async () => {
+      await wait(150);
+      return specs;
+    };
+    hoisted.driver.getShape = async () => ({ rows: 0, columns: specs.length });
+    hoisted.driver.getData = async () => [];
+
+    const sourceId = "src-1";
+    const withHandles = (n: number) => ({
+      sourceId,
+      sheets: [],
+      model: {
+        sourceId,
+        fullTableHandle: `full-${n}`,
+        visibleTableHandle: `visible-${n}`,
+        fullPframeHandle: `pf-${n}`,
+      },
+    });
+    const betweenHandles = { sourceId, sheets: [], model: { sourceId } };
+
+    const wrapper = mount(Host, {
+      attachTo: document.body,
+      props: {
+        settings: withHandles(1),
+        initial: {
+          version: 8,
+          stateCache: [],
+          pTableParams: {
+            sourceId,
+            hiddenColIds: null,
+            sorting: null,
+            filters: null,
+            defaultFilters: null,
+          },
+        },
+        echoMs: 0,
+        pushEveryMs: 1000,
+      },
+    });
+
+    await wait(50); // the first calculation is in flight
+    await wrapper.setProps({ settings: betweenHandles });
+    await wait(900);
+
+    const overlay = (document.body.textContent || "").includes("Loading data...");
+    wrapper.unmount();
+    document.body.innerHTML = "";
+    expect(overlay).toBe(false);
+  });
+
+  it("stops recreating the grid once the stored state has been applied", async () => {
+    hoisted.driver.getSpec = async () => {
+      await wait(40);
+      return specs;
+    };
+    hoisted.driver.getShape = async () => ({ rows: 0, columns: specs.length });
+    hoisted.driver.getData = async () => [];
+
+    const sourceId = "src-1";
+    const counter = countGrids();
+    const wrapper = mount(Host, {
+      attachTo: document.body,
+      props: {
+        // A block that has just been rebuilt: still running, model not there yet.
+        settings: { sourceId, sheets: [], model: undefined },
+        initial: {
+          version: 8,
+          stateCache: [
+            {
+              sourceId,
+              // A sort the user left behind in a previous session.
+              gridState: { sort: { sortModel: [{ colId: columnId(specs[1]), sort: "asc" }] } },
+              sheetsState: [],
+              filtersState: null,
+              defaultFiltersState: null,
+            },
+          ],
+          pTableParams: {
+            sourceId,
+            hiddenColIds: null,
+            sorting: null,
+            filters: null,
+            defaultFilters: null,
+          },
+        },
+        echoMs: 400,
+        pushEveryMs: 50,
+      },
+    });
+
+    await wait(20);
+    await wrapper.setProps({
+      settings: {
+        sourceId,
+        sheets: [],
+        model: {
+          sourceId,
+          fullTableHandle: "full-1",
+          visibleTableHandle: "visible-1",
+          fullPframeHandle: "pf-1",
+        },
+      },
+    });
+    await wait(1200);
+
+    const created = counter.get();
+    counter.stop();
+    wrapper.unmount();
+    document.body.innerHTML = "";
+
+    // One grid for the mount, at most one more to apply the stored sort.
+    expect(created).toBeLessThanOrEqual(2);
+  });
+});

package/src/components/PlAgDataTable/sources/grid-state.test.ts

@@ -0,0 +1,94 @@
+import { describe, expect, it } from "vitest";
+import type { PlDataTableGridStateCore, PlTableColumnIdJson } from "@platforma-sdk/model";
+import { isStoredStateApplied } from "./grid-state";
+
+const colA = '{"id":"a","type":"column"}' as PlTableColumnIdJson;
+const colB = '{"id":"b","type":"column"}' as PlTableColumnIdJson;
+const dropped = '{"id":"gone","type":"column"}' as PlTableColumnIdJson;
+
+const grid = new Set<PlTableColumnIdJson>([colA, colB]);
+const noColumns = new Set<PlTableColumnIdJson>();
+
+const order = (...ids: PlTableColumnIdJson[]): PlDataTableGridStateCore => ({
+  columnOrder: { orderedColIds: ids },
+});
+const hidden = (...ids: PlTableColumnIdJson[]): PlDataTableGridStateCore => ({
+  columnVisibility: { hiddenColIds: ids },
+});
+const sorted = (id: PlTableColumnIdJson): PlDataTableGridStateCore => ({
+  sort: { sortModel: [{ colId: id, sort: "asc" }] },
+});
+
+describe("isStoredStateApplied", () => {
+  // Every case below is one a rebuild could not satisfy, so counting it as a
+  // disagreement makes the reload watch rebuild the grid forever.
+  describe("does not ask for what a rebuild cannot deliver", () => {
+    it("ignores a field the stored state says nothing about", () => {
+      expect(
+        isStoredStateApplied(hidden(colA), { ...hidden(colA), ...order(colA, colB) }, grid),
+      ).toBe(true);
+    });
+
+    it("ignores a column order naming a column the grid no longer has", () => {
+      expect(isStoredStateApplied(order(colA, dropped, colB), order(colA, colB), grid)).toBe(true);
+    });
+
+    it("ignores a hidden column the grid no longer has", () => {
+      expect(isStoredStateApplied(hidden(colA, dropped), hidden(colA), grid)).toBe(true);
+    });
+
+    it("ignores a sort on a column the grid no longer has", () => {
+      expect(isStoredStateApplied(sorted(dropped), {}, grid)).toBe(true);
+    });
+
+    it("asks for nothing while the grid has no columns at all", () => {
+      expect(isStoredStateApplied({ ...order(colA, colB), ...hidden(colA) }, {}, noColumns)).toBe(
+        true,
+      );
+    });
+
+    it("asks for nothing when the stored state is empty", () => {
+      expect(isStoredStateApplied({}, order(colA), grid)).toBe(true);
+    });
+  });
+
+  describe("still asks for what a rebuild can deliver", () => {
+    it("reloads for a different hidden set", () => {
+      expect(isStoredStateApplied(hidden(colA), hidden(colB), grid)).toBe(false);
+    });
+
+    it("reloads for a different order of columns it knows", () => {
+      expect(isStoredStateApplied(order(colA, colB), order(colB, colA), grid)).toBe(false);
+    });
+
+    it("reloads for a different sort", () => {
+      expect(isStoredStateApplied(sorted(colA), sorted(colB), grid)).toBe(false);
+    });
+
+    it("ignores where the grid puts columns the stored order does not mention", () => {
+      expect(isStoredStateApplied(order(colA, colB), order(colA, dropped, colB), grid)).toBe(true);
+    });
+  });
+
+  describe("an explicitly cleared stored state is an opinion, not silence", () => {
+    it("reloads when the stored state cleared the sorting and the grid is still sorted", () => {
+      expect(isStoredStateApplied({ sort: { sortModel: [] } }, sorted(colA), grid)).toBe(false);
+    });
+
+    it("reloads when the stored state shows every column and the grid still hides one", () => {
+      expect(isStoredStateApplied(hidden(), hidden(colA), grid)).toBe(false);
+    });
+  });
+
+  describe("treats a state the grid reported as absent or empty alike", () => {
+    it("for columnVisibility", () => {
+      expect(isStoredStateApplied(hidden(), { columnVisibility: undefined }, grid)).toBe(true);
+    });
+
+    it("for sort", () => {
+      expect(isStoredStateApplied({ sort: { sortModel: [] } }, { sort: undefined }, grid)).toBe(
+        true,
+      );
+    });
+  });
+});

package/src/components/PlAgDataTable/sources/grid-state.ts

@@ -0,0 +1,110 @@
+import { isJsonEqual } from "@milaboratories/helpers";
+import type { PlDataTableGridStateCore, PlTableColumnIdJson } from "@platforma-sdk/model";
+
+/**
+ * Whether the grid already shows everything the stored state asks for that it
+ * could possibly show.
+ *
+ * The answer decides whether to destroy and rebuild the grid around the stored
+ * state, so it must only ever ask for things a rebuild can deliver. Two kinds of
+ * request cannot be delivered, and asking anyway is how this comparison became an
+ * engine for endless rebuilds:
+ *
+ * - a field the stored state does not express. AG Grid always reports its whole
+ *   state, and a state saved while the grid had no columns carries no
+ *   `columnOrder` at all; demanding equality there asks the grid to unreport
+ *   something.
+ * - an id the grid does not have. State outlives column sets — a sort on a
+ *   column a later run dropped, hidden ids saved against different columns — and
+ *   no rebuild brings those columns back.
+ *
+ * Both are dropped before comparing rather than guarded against afterwards.
+ */
+export function isStoredStateApplied(
+  desired: PlDataTableGridStateCore,
+  actual: PlDataTableGridStateCore,
+  gridColIds: ReadonlySet<PlTableColumnIdJson>,
+): boolean {
+  const {
+    orderedColIds: desiredOrder,
+    hiddenColIds: desiredHidden,
+    sortModel: desiredSort,
+  } = dropColumnsTheGridDoesNotHave(desired, gridColIds);
+  const {
+    orderedColIds: actualOrder,
+    hiddenColIds: actualHidden,
+    sortModel: actualSort,
+  } = normalizeReportedState(actual);
+
+  if (desiredHidden !== undefined && !isJsonEqual(desiredHidden, actualHidden)) return false;
+
+  if (desiredSort !== undefined && !isJsonEqual(desiredSort, actualSort)) return false;
+
+  if (desiredOrder !== undefined) {
+    // Only the relative order of the columns it names: the grid may hold others,
+    // and where it puts them is not being asked about.
+    const desiredColumns = new Set(desiredOrder);
+    const actualOrderOfThose = actualOrder.filter((id) => desiredColumns.has(id));
+    if (!isJsonEqual(desiredOrder, actualOrderOfThose)) return false;
+  }
+
+  return true;
+}
+
+/**
+ * Read a state the grid reported the way the grid means it.
+ *
+ * AG Grid leaves out what carries no information — no `sort` while nothing is
+ * sorted, no `columnVisibility` while every column is shown — so absent and
+ * empty mean the same thing coming from it, and hidden ids arrive in whatever
+ * order it happens to hold them.
+ *
+ * The stored state is deliberately NOT read this way: there an empty list is the
+ * user having cleared the sorting or shown every column, and the grid has to be
+ * made to match it.
+ */
+function normalizeReportedState(state: PlDataTableGridStateCore) {
+  return {
+    orderedColIds: state.columnOrder?.orderedColIds ?? [],
+    hiddenColIds: sortIds(state.columnVisibility?.hiddenColIds ?? []),
+    sortModel: state.sort?.sortModel ?? [],
+  };
+}
+
+/**
+ * Strike out every column the stored state names that the grid does not have, so
+ * what is left is what the grid can still be asked about.
+ */
+function dropColumnsTheGridDoesNotHave(
+  state: PlDataTableGridStateCore,
+  gridColIds: ReadonlySet<PlTableColumnIdJson>,
+) {
+  const inGrid = (id: PlTableColumnIdJson) => gridColIds.has(id);
+  const hidden = keepColumnsInGrid(state.columnVisibility?.hiddenColIds, inGrid);
+  return {
+    orderedColIds: keepColumnsInGrid(state.columnOrder?.orderedColIds, inGrid),
+    hiddenColIds: hidden && sortIds(hidden),
+    sortModel: keepColumnsInGrid(state.sort?.sortModel, (item) => inGrid(item.colId)),
+  };
+}
+
+/**
+ * The entries naming a column the grid has, or `undefined` when there is nothing
+ * left to ask about: either the field was never expressed, or every column it
+ * named is gone and no rebuild brings those back. An explicitly empty list is an
+ * opinion — "sorted by nothing", "every column visible" — and survives as one.
+ */
+function keepColumnsInGrid<T>(
+  entries: T[] | undefined,
+  inGrid: (entry: T) => boolean,
+): T[] | undefined {
+  if (entries === undefined) return undefined;
+  const kept = entries.filter(inGrid);
+  if (entries.length > 0 && kept.length === 0) return undefined;
+  return kept;
+}
+
+/** Hidden columns are a set; put them in one order so either side compares alike. */
+function sortIds(ids: PlTableColumnIdJson[]): PlTableColumnIdJson[] {
+  return [...ids].sort();
+}

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

@@ -68,6 +68,13 @@ export function useTableState(
     set: (state) => {
       const newState: PlDataTableStateV2Normalized = {
         ...tableStateNormalized.value,
+        // Copy the cache before editing it below: spreading keeps the same array,
+        // and splicing it in place would edit the current state as well — the
+        // change check at the end would then compare the new state against
+        // itself, find them equal, and skip the assignment, so a change that
+        // leaves `pTableParams` untouched (reordering columns, say) would never
+        // be written back to the project.
+        stateCache: [...tableStateNormalized.value.stateCache],
         pTableParams: createDefaultPTableParams(),
       };