@platforma-sdk/ui-vue 1.63.12 → 1.65.0

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

@@ -12,18 +12,19 @@ import {
   type PlDataTableStateV2,
   type PlDataTableStateV2CacheEntry,
   type PlDataTableStateV2Normalized,
-  type PObjectId,
   type PTableParamsV2,
   type PTableSorting,
+  type PlDataTableFilterSpecLeaf,
+  type PlDataTableFilterMeta,
   type PlDataTableFilters,
   distillFilterSpec,
   PlDataTableFiltersWithMeta,
   getPTableColumnId,
   CanonicalizedJson,
 } from "@platforma-sdk/model";
-import { computed, ref, watch, type Ref, type WritableComputedRef } from "vue";
+import { computed, type Ref, type WritableComputedRef } from "vue";
 import type { PlDataTableSettingsV2 } from "../types";
-import { isJsonEqual, randomInt } from "@milaboratories/helpers";
+import { isJsonEqual, randomInt, getField, Nil } from "@milaboratories/helpers";
 import { computedCached } from "@milaboratories/uikit";
 import { isStringValueType, isNumericValueType } from "../../PlAdvancedFilter/utils";
 import { debounce, isNil } from "es-toolkit";
@@ -32,11 +33,15 @@ export function useTableState(
   tableStateDenormalized: Ref<PlDataTableStateV2>,
   settings: Ref<PlDataTableSettingsV2>,
   columns: Ref<PTableColumnSpec[]>,
+  defaultFilters: Ref<Nil | PlDataTableFilters>,
 ): {
   gridState: WritableComputedRef<PlDataTableGridStateCore>;
   sheetsState: WritableComputedRef<PlDataTableSheetState[]>;
-  filtersState: Ref<PlDataTableFiltersWithMeta>;
+
   searchString: WritableComputedRef<string>;
+  filtersState: Ref<PlDataTableFiltersWithMeta>;
+  defaultFiltersState: Ref<null | PlDataTableFiltersWithMeta>;
+  resetDefaultFilters: () => void;
 } {
   const tableStateNormalized = computedCached<PlDataTableStateV2Normalized>({
     get: () => upgradePlDataTableStateV2(tableStateDenormalized.value),
@@ -113,18 +118,11 @@ export function useTableState(
     },
   });
 
+  // --- User filters (editable by user) ---
   const filtersState = computed<PlDataTableFiltersWithMeta>({
     get: () => {
       const raw = tableState.value.filtersState;
-      const isCorrect =
-        raw &&
-        (raw.type === "and" || raw.type === "or") &&
-        "filters" in raw &&
-        Array.isArray(raw.filters);
-
-      return isCorrect
-        ? (raw satisfies PlDataTableFiltersWithMeta)
-        : { id: randomInt(), type: "and" as const, isExpanded: true, filters: [] };
+      return isNil(raw) ? getEmptyGroupWithMeta() : normalizeFiltersState(raw);
     },
     set: (filtersState: PlDataTableFiltersWithMeta) => {
       const oldState = tableState.value;
@@ -136,12 +134,35 @@ export function useTableState(
       }
     },
   });
-  const filtersStateDeepReactive = ref(filtersState);
-  watch(
-    () => filtersStateDeepReactive.value,
-    (newValue) => (filtersState.value = newValue),
-    { deep: true },
-  );
+
+  // --- Default filters (from model, separate list) ---
+  const defaultFiltersState = computed<null | PlDataTableFiltersWithMeta>({
+    get: () => {
+      const raw = tableState.value.defaultFiltersState;
+      if (!isNil(raw)) {
+        return normalizeFiltersState(raw);
+      }
+      if (!isNil(defaultFilters.value)) {
+        return annotateFiltersWithIds(normalizeFiltersState(defaultFilters.value));
+      }
+      return null;
+    },
+    set: (defaultFiltersState: null | PlDataTableFiltersWithMeta) => {
+      const oldState = tableState.value;
+      if (oldState.sourceId) {
+        tableState.value = {
+          ...oldState,
+          defaultFiltersState,
+        };
+      }
+    },
+  });
+
+  function resetDefaultFilters(): void {
+    defaultFiltersState.value = isNil(defaultFilters.value)
+      ? null
+      : annotateFiltersWithIds(normalizeFiltersState(defaultFilters.value));
+  }
 
   const searchString = computed<string>({
     get: () => tableState.value.searchString ?? "",
@@ -156,9 +177,18 @@ export function useTableState(
     },
   });
 
-  return { gridState, sheetsState, filtersState: filtersStateDeepReactive, searchString };
+  return {
+    gridState,
+    sheetsState,
+    searchString,
+    filtersState,
+    defaultFiltersState,
+    resetDefaultFilters,
+  };
 }
 
+// --- Types ---
+
 type PlDataTableStateV2CacheEntryNullable =
   | PlDataTableStateV2CacheEntry
   | {
@@ -166,51 +196,138 @@ type PlDataTableStateV2CacheEntryNullable =
       gridState: Record<string, never>;
       sheetsState: [];
       filtersState: null;
+      defaultFiltersState: null;
       searchString?: string;
     };
 
-function makeDefaultState(): PlDataTableStateV2CacheEntryNullable {
+type FilterNode = FilterSpec<PlDataTableFilterSpecLeaf>;
+type AnnotatedFilterSpec = FilterSpec<PlDataTableFilterSpecLeaf, PlDataTableFilterMeta>;
+
+// --- Core ---
+
+function createPTableParams(
+  state: PlDataTableStateV2CacheEntry,
+  filterableColumns: PTableColumnSpec[],
+): PTableParamsV2 {
+  // User filters: sheets + user filter state + search
+  const searchNode = createSearchFilterNode(filterableColumns, state.searchString);
+  const unsuppressedUserFilters = isNil(state.filtersState)
+    ? null
+    : stripSuppressedFilters(state.filtersState);
+  const userParts = [
+    ...convertPartitionFiltersToFilterSpec(state.sheetsState),
+    ...(isNil(unsuppressedUserFilters) ? [] : [unsuppressedUserFilters]),
+    ...(isNil(searchNode) ? [] : [searchNode]),
+  ];
+  const filters: null | PlDataTableFilters = distillFilterSpec(
+    userParts.length === 0
+      ? null
+      : userParts.length === 1
+        ? userParts[0]
+        : { type: "and", filters: userParts },
+  );
+  const unsuppressedDefaultFilters = isNil(state.defaultFiltersState)
+    ? null
+    : stripSuppressedFilters(state.defaultFiltersState);
+  const defaultFilters: null | PlDataTableFilters = isNil(unsuppressedDefaultFilters)
+    ? null
+    : // If all filters are suppressed, we should pass an empty filter group instead of null to prevent fallback to defaults in the model
+      (distillFilterSpec(unsuppressedDefaultFilters) ?? getEmptyGroup());
+
   return {
-    sourceId: null,
-    gridState: {},
-    sheetsState: [],
-    filtersState: null,
+    sourceId: state.sourceId,
+    hiddenColIds: getHiddenColIds(state.gridState.columnVisibility),
+    sorting: convertAgSortingToPTableSorting(state.gridState.sort),
+    filters,
+    defaultFilters,
   };
 }
 
-function getHiddenColIds(state: PlDataTableGridStateCore["columnVisibility"]): PObjectId[] | null {
-  return (
-    state?.hiddenColIds?.map(parseJson).reduce((acc, c) => {
-      if (c.source.type === "column") {
-        acc.push(c.source.id);
-      }
-      return acc;
-    }, [] as PObjectId[]) ?? null
-  );
+/**
+ * Normalizes raw filter state into a valid root filter structure.
+ * Valid structure is Root(Group, Group, ...) — double nesting required:
+ * root is and/or group, each child is also and/or group containing leaf filters.
+ * - null/undefined/invalid → empty root
+ * - Leaf node → Root(Group(leaf))
+ * - Group with leaf children → Root(Group(leaves...))
+ * - Group with group children → as-is
+ */
+function normalizeFiltersState(raw: FilterNode) {
+  // Leaf node → wrap in double nesting: Root(Group(leaf))
+  if (raw.type !== "and" && raw.type !== "or" && raw.type !== "not") {
+    if ("type" in raw && !isNil(raw.type)) {
+      return {
+        id: randomInt(),
+        type: "and" as const,
+        isExpanded: true,
+        filters: [
+          {
+            id: randomInt(),
+            type: "and" as const,
+            isExpanded: true,
+            filters: [raw as AnnotatedFilterSpec],
+          } as AnnotatedFilterSpec,
+        ],
+      };
+    }
+    return getEmptyGroupWithMeta();
+  }
+
+  // Already a group — ensure children are also groups (double nesting)
+  if ((raw.type === "and" || raw.type === "or") && "filters" in raw && Array.isArray(raw.filters)) {
+    const allChildrenAreGroups = raw.filters.every(
+      (f: FilterNode) => f.type === "and" || f.type === "or" || f.type === "not",
+    );
+    if (allChildrenAreGroups) {
+      return raw as PlDataTableFiltersWithMeta;
+    }
+    // Children are leaves — wrap them in a single group
+    return {
+      id: randomInt(),
+      type: raw.type as "and" | "or",
+      isExpanded: true,
+      filters: [
+        {
+          id: randomInt(),
+          type: raw.type as "and" | "or",
+          isExpanded: true,
+          filters: raw.filters as AnnotatedFilterSpec[],
+        } as AnnotatedFilterSpec,
+      ],
+    };
+  }
+
+  return getEmptyGroupWithMeta();
 }
 
-function convertPartitionFiltersToFilterSpec(
-  sheetsState: PlDataTableSheetState[],
-): FilterSpec<FilterSpecLeaf<CanonicalizedJson<PTableColumnId>>>[] {
-  return sheetsState.map((s) => {
-    const column = canonicalizeJson<PTableColumnId>({ type: "axis", id: s.axisId });
-    return typeof s.value === "number"
-      ? { type: "equal" as const, column, x: s.value }
-      : { type: "patternEquals" as const, column, value: s.value };
-  });
+function getEmptyGroup(): PlDataTableFilters {
+  return {
+    type: "and" as const,
+    filters: [],
+  };
+}
+function getEmptyGroupWithMeta(): PlDataTableFiltersWithMeta {
+  return {
+    ...getEmptyGroup(),
+    id: randomInt(),
+    isExpanded: true,
+  } as PlDataTableFiltersWithMeta;
 }
 
-function convertAgSortingToPTableSorting(state: PlDataTableGridStateCore["sort"]): PTableSorting[] {
-  return (
-    state?.sortModel.map((item) => {
-      const { spec: _, ...column } = parseJson(item.colId).labeled;
-      return {
-        column,
-        ascending: item.sort === "asc",
-        naAndAbsentAreLeastValues: item.sort === "asc",
-      };
-    }) ?? []
-  );
+/**
+ * Recursively removes nodes where isSuppressed === true from a PlDataTableFiltersWithMeta tree.
+ */
+function stripSuppressedFilters(node: PlDataTableFiltersWithMeta): PlDataTableFiltersWithMeta {
+  return {
+    ...node,
+    filters: node.filters
+      .filter((child) => !("isSuppressed" in child && child.isSuppressed === true))
+      .map((child) =>
+        "filters" in child && (child.type === "and" || child.type === "or")
+          ? stripSuppressedFilters(child as PlDataTableFiltersWithMeta)
+          : child,
+      ),
+  };
 }
 
 function createSearchFilterNode(
@@ -242,24 +359,86 @@ function createSearchFilterNode(
   return { type: "or", filters: parts };
 }
 
-function createPTableParams(
-  state: PlDataTableStateV2CacheEntry,
-  filterableColumns: PTableColumnSpec[],
-): PTableParamsV2 {
-  const searchNode = createSearchFilterNode(filterableColumns, state.searchString);
-  const parts = [
-    ...convertPartitionFiltersToFilterSpec(state.sheetsState),
-    ...(state.filtersState ? [state.filtersState] : []),
-    ...(searchNode ? [searchNode] : []),
-  ];
-  const filters: null | PlDataTableFilters = distillFilterSpec(
-    parts.length === 0 ? null : parts.length === 1 ? parts[0] : { type: "and", filters: parts },
+// --- Helpers ---
+
+/**
+ * Recursively ensures every node in a filter tree has an `id` field.
+ * Does not set `source` meta — defaults are now a separate list.
+ */
+function annotateFiltersWithIds(
+  filters: PlDataTableFilters | PlDataTableFiltersWithMeta,
+): PlDataTableFiltersWithMeta {
+  return annotateNodeWithIds(filters) as PlDataTableFiltersWithMeta;
+}
+
+function annotateNodeWithIds(
+  node: FilterNode | PlDataTableFilters | PlDataTableFiltersWithMeta,
+): AnnotatedFilterSpec {
+  switch (node.type) {
+    case "and":
+      return {
+        id: getField(node, "id") ?? randomInt(),
+        isExpanded: getField(node, "isExpanded") ?? true,
+        type: "and" as const,
+        filters: node.filters.map((child) => annotateNodeWithIds(child)),
+      };
+    case "or":
+      return {
+        id: getField(node, "id") ?? randomInt(),
+        isExpanded: getField(node, "isExpanded") ?? true,
+        type: "or" as const,
+        filters: node.filters.map((child) => annotateNodeWithIds(child)),
+      };
+    case "not":
+      return {
+        id: randomInt(),
+        isExpanded: true,
+        type: "not" as const,
+        filter: annotateNodeWithIds(node.filter),
+      };
+    default:
+      return { ...node, id: getField(node, "id") ?? randomInt() } as AnnotatedFilterSpec;
+  }
+}
+
+// --- Utilities ---
+
+function convertPartitionFiltersToFilterSpec(
+  sheetsState: PlDataTableSheetState[],
+): FilterSpec<FilterSpecLeaf<CanonicalizedJson<PTableColumnId>>>[] {
+  return sheetsState.map((s) => {
+    const column = canonicalizeJson<PTableColumnId>({ type: "axis", id: s.axisId });
+    return typeof s.value === "number"
+      ? { type: "equal" as const, column, x: s.value }
+      : { type: "patternEquals" as const, column, value: s.value };
+  });
+}
+
+function convertAgSortingToPTableSorting(state: PlDataTableGridStateCore["sort"]): PTableSorting[] {
+  return (
+    state?.sortModel.map((item) => {
+      const { spec: _, ...column } = parseJson(item.colId).labeled;
+      return {
+        column,
+        ascending: item.sort === "asc",
+        naAndAbsentAreLeastValues: item.sort === "asc",
+      };
+    }) ?? []
   );
+}
+
+function getHiddenColIds(
+  state: PlDataTableGridStateCore["columnVisibility"],
+): PTableColumnId[] | null {
+  return state?.hiddenColIds?.map((json) => getPTableColumnId(parseJson(json).source)) ?? null;
+}
 
+function makeDefaultState(): PlDataTableStateV2CacheEntryNullable {
   return {
-    sourceId: state.sourceId,
-    hiddenColIds: getHiddenColIds(state.gridState.columnVisibility),
-    filters,
-    sorting: convertAgSortingToPTableSorting(state.gridState.sort),
+    sourceId: null,
+    gridState: {},
+    sheetsState: [],
+    filtersState: null,
+    defaultFiltersState: null,
   };
 }

package/src/components/PlAgGridColumnManager/PlAgGridColumnManager.vue

@@ -6,10 +6,11 @@ import {
   PlSlideModal,
   usePlBlockPageTitleTeleportTarget,
 } from "@milaboratories/uikit";
-import { type Column, type DisplayedColumnsChangedEvent, type GridApi } from "ag-grid-enterprise";
-import { computed, ref, toRefs, watch } from "vue";
+import { type GridApi } from "ag-grid-enterprise";
+import { computed, ref } from "vue";
 import { PlAgDataTableRowNumberColId } from "../PlAgDataTable/sources/row-number";
 import { useFilteredItems } from "./useFilteredItems";
+import { useGridColumns } from "./useGridColumns";
 
 const props = defineProps<{
   /**
@@ -25,44 +26,25 @@ const props = defineProps<{
   width?: string;
 }>();
 
-const { api: gridApi } = toRefs(props);
-
-const columns = ref<Column[]>([]);
-watch(
-  () => gridApi.value,
-  (gridApi) => {
-    if (gridApi.isDestroyed()) return;
-
-    gridApi.addEventListener("displayedColumnsChanged", (event: DisplayedColumnsChangedEvent) => {
-      columns.value = event.api.getAllGridColumns();
-    });
+const query = ref("");
+const slideModal = ref(false);
+const teleportTarget = usePlBlockPageTitleTeleportTarget("PlAgGridColumnManager");
 
-    columns.value = gridApi.getAllGridColumns();
-    if (columns.value.length > 0) {
-      gridApi.moveColumns(columns.value, 0);
-    }
-  },
-  { immediate: true },
-);
+const columns = useGridColumns(props);
 
 const items = computed(() => {
-  return columns.value.map((col) => ({
+  return columns.value.map((col, i) => ({
     column: col,
     id: col.getId(),
-    label: col.getColDef().headerName!,
+    label: col.getColDef().headerName ?? `Unnamed Column (${i + 1})`,
   }));
 });
 
-const query = ref("");
-
-const slideModal = ref(false);
-const teleportTarget = usePlBlockPageTitleTeleportTarget("PlAgGridColumnManager");
-
-const { filteredItems, segments } = useFilteredItems(() => ({
-  items: items.value,
-  query: query.value,
+const { filteredItems, segments } = useFilteredItems({
+  items,
+  query,
   getStrings: (item) => [item.label],
-}));
+});
 </script>
 
 <template>
@@ -79,17 +61,17 @@ const { filteredItems, segments } = useFilteredItems(() => ({
       :is-draggable="(item) => !item.column.getColDef().lockPosition"
       :on-sort="
         (fromIndex, toIndex) => {
-          if (!gridApi.isDestroyed()) {
+          if (!props.api.isDestroyed()) {
             const columnToMove = columns[fromIndex];
-            gridApi.moveColumns([columnToMove], toIndex);
+            props.api.moveColumns([columnToMove], toIndex);
           }
           return true; // Let PlElementList handle the visual update
         }
       "
       :on-toggle="
         (item) => {
-          if (!gridApi.isDestroyed()) {
-            gridApi.setColumnsVisible([item.column], !item.column.isVisible());
+          if (!props.api.isDestroyed()) {
+            props.api.setColumnsVisible([item.column], !item.column.isVisible());
           }
         }
       "

package/src/components/PlAgGridColumnManager/useFilteredItems.ts

@@ -1,25 +1,23 @@
-import { computed, type MaybeRefOrGetter, toValue } from "vue";
+import { Ref, computed, toValue } from "vue";
 
-export function useFilteredItems<T>(
-  props: MaybeRefOrGetter<{
-    items: T[];
-    query: string;
-    getStrings: (item: T) => Iterable<string>;
-  }>,
-) {
+export function useFilteredItems<T>(props: {
+  items: Ref<T[]>;
+  query: Ref<string>;
+  getStrings: (item: T) => Iterable<string>;
+}) {
   const result = computed(() => {
     const { items, query, getStrings } = toValue(props);
     const filteredItems: T[] = [];
     const segments = new Map<string, StringSegment[]>();
-    for (const item of items) {
+    for (const item of items.value) {
       let kept = false;
       for (const string of getStrings(item)) {
         let stringSegments = segments.get(string);
         if (!stringSegments) {
-          stringSegments = matchSubstrings(string, query);
+          stringSegments = matchSubstrings(string, query.value);
           segments.set(string, stringSegments);
         }
-        if (!kept && (!query || stringSegments.some(({ match }) => match))) {
+        if (!kept && (!query.value || stringSegments.some(({ match }) => match))) {
           filteredItems.push(item);
           kept = true;
         }

package/src/components/PlAgGridColumnManager/useGridColumns.ts

@@ -0,0 +1,26 @@
+import { Column, GridApi } from "ag-grid-enterprise";
+import { ref, watch } from "vue";
+
+export function useGridColumns(props: { api: GridApi }) {
+  const columns = ref<Column[]>([]);
+  const syncColumns = () => {
+    columns.value = props.api.getAllGridColumns();
+  };
+  watch(
+    () => props.api,
+    (gridApi, _, onCleanup) => {
+      if (gridApi.isDestroyed()) return;
+
+      gridApi.addEventListener("displayedColumnsChanged", syncColumns);
+      onCleanup(() => gridApi.removeEventListener("displayedColumnsChanged", syncColumns));
+
+      columns.value = gridApi.getAllGridColumns();
+      if (columns.value.length > 0) {
+        gridApi.moveColumns(columns.value, 0);
+      }
+    },
+    { immediate: true },
+  );
+
+  return columns;
+}

package/src/components/PlAnnotations/components/FilterSidebar.vue

@@ -116,13 +116,14 @@ const supportedFilters = [
     </template>
     <template #body-content>
       <PlAdvancedFilterComponent
-        v-model:filters="step.filter as PlAdvancedFilter"
+        :filters="step.filter as PlAdvancedFilter"
         :class="[$style.root, { [$commonStyle.disabled]: step.label.length === 0 }]"
-        :items="props.columns"
+        :options="props.columns"
         :supported-filters="supportedFilters"
         :get-suggest-options="props.getSuggestOptions"
         :enable-dnd="false"
         :enable-add-group-button="true"
+        @update-filters="(v) => (step = { ...step, filter: v as typeof step.filter })"
       >
         <template #add-group-buttons>
           <div :class="$style.actions">