@platforma-sdk/ui-vue 1.64.0 → 1.65.0

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

@@ -14,15 +14,17 @@ import {
   type PlDataTableStateV2Normalized,
   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";
@@ -31,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),
@@ -112,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;
@@ -135,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 ?? "",
@@ -155,9 +177,18 @@ export function useTableState(
     },
   });
 
-  return { gridState, sheetsState, filtersState: filtersStateDeepReactive, searchString };
+  return {
+    gridState,
+    sheetsState,
+    searchString,
+    filtersState,
+    defaultFiltersState,
+    resetDefaultFilters,
+  };
 }
 
+// --- Types ---
+
 type PlDataTableStateV2CacheEntryNullable =
   | PlDataTableStateV2CacheEntry
   | {
@@ -165,46 +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"],
-): PTableColumnId[] | null {
-  return state?.hiddenColIds?.map((json) => getPTableColumnId(parseJson(json).source)) ?? 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(
@@ -236,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/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">

package/src/components/PlTableFilters/PlTableFiltersV2.vue

@@ -16,7 +16,7 @@ import {
   parseJson,
   getPTableColumnId,
 } from "@platforma-sdk/model";
-import { computed, onMounted, ref } from "vue";
+import { computed, ref } from "vue";
 import { PlBtnGhost, PlSlideModal, usePlBlockPageTitleTeleportTarget } from "@milaboratories/uikit";
 import {
   PlAdvancedFilter,
@@ -26,32 +26,47 @@ import {
 } from "../PlAdvancedFilter";
 import type { PlAdvancedFilterColumnId } from "../PlAdvancedFilter/types";
 import type { Nil } from "@milaboratories/helpers";
-import { isNil } from "es-toolkit";
+import { isFunction, isNil } from "es-toolkit";
 
-const model = defineModel<PlDataTableFiltersWithMeta>({ required: true });
 const props = defineProps<{
-  pframeHandle: Nil | PFrameHandle;
   columns: PTableColumnSpec[];
+  pframeHandle: Nil | PFrameHandle;
+  filters: PlDataTableFiltersWithMeta;
+  defaultFilters: Nil | PlDataTableFiltersWithMeta;
+  onUpdateFilters: (value: PlDataTableFiltersWithMeta) => void;
+  onResetDefaultFilters?: () => void;
+  onUpdateDefaultFilters?: (value: PlDataTableFiltersWithMeta) => void;
 }>();
 
-// Teleport for "Filters" button
-const mounted = ref(false);
-onMounted(() => {
-  mounted.value = true;
-});
 const teleportTarget = usePlBlockPageTitleTeleportTarget("PlTableFiltersV2");
 const showManager = ref(false);
+const hasFilters = computed(() => props.filters.filters.length > 0);
+const hasDefaultFilters = computed(
+  () => !isNil(props.defaultFilters) && props.defaultFilters.filters.length > 0,
+);
+const filters = computed<PlDataTableFiltersWithMeta>(() => {
+  if (isNil(props.defaultFilters) || props.defaultFilters?.filters.length === 0) {
+    return props.filters;
+  }
 
-// Check if any filters are active
-const filtersOn = computed(() => {
-  return model.value.filters.length > 0;
+  return {
+    ...props.filters,
+    filters: [...(props.defaultFilters?.filters ?? []), ...props.filters.filters],
+  };
 });
+const onUpdateFilters = (_value: PlAdvancedFilter) => {
+  const value = _value as PlDataTableFiltersWithMeta;
 
-function makeFilterColumnId(spec: PTableColumnSpec): CanonicalizedJson<PTableColumnId> {
-  return canonicalizeJson<PTableColumnId>(getPTableColumnId(spec));
-}
+  if (isNil(props.defaultFilters)) {
+    return props.onUpdateFilters(value);
+  }
 
-const items = computed<PlAdvancedFilterItem[]>(() => {
+  const [defaults, ...rest] = value.filters;
+  props.onUpdateFilters({ ...value, filters: rest });
+  props.onUpdateDefaultFilters?.({ ...props.defaultFilters, filters: [defaults] });
+};
+
+const options = computed<PlAdvancedFilterItem[]>(() => {
   return props.columns.map((col, idx) => {
     const id = makeFilterColumnId(col);
     const label =
@@ -112,11 +127,18 @@ function handleSuggestOptions(params: {
     searchQueryValue: params.searchType === "value" ? params.searchStr : undefined,
   }).then((v) => v.values);
 }
+
+function makeFilterColumnId(spec: PTableColumnSpec): CanonicalizedJson<PTableColumnId> {
+  return canonicalizeJson<PTableColumnId>(getPTableColumnId(spec));
+}
 </script>
 
 <template>
-  <Teleport v-if="mounted && teleportTarget" :to="teleportTarget">
-    <PlBtnGhost :icon="filtersOn ? 'filter-on' : 'filter'" @click.stop="showManager = true">
+  <Teleport v-if="teleportTarget" :to="teleportTarget">
+    <PlBtnGhost
+      :icon="hasFilters || hasDefaultFilters ? 'filter-on' : 'filter'"
+      @click.stop="showManager = true"
+    >
       Filters
     </PlBtnGhost>
   </Teleport>
@@ -126,13 +148,31 @@ function handleSuggestOptions(params: {
 
     <div :class="$style.root">
       <PlAdvancedFilterComponent
-        v-model:filters="model as PlAdvancedFilter"
-        :items="items"
+        :filters="filters as PlAdvancedFilter"
+        :options="options"
         :supported-filters="supportedFilters"
         :get-suggest-options="handleSuggestOptions"
+        :is-pinned="(_, index) => hasDefaultFilters && index === 0"
+        :is-removable="(_, index) => (hasDefaultFilters ? index > 0 : true)"
+        :is-draggable="(_, index) => (hasDefaultFilters ? index > 0 : true)"
         :enable-dnd="false"
+        :enable-toggling="true"
         :enable-add-group-button="true"
-      />
+        @update-filters="onUpdateFilters"
+      >
+        <template #group-title="{ index }">
+          <div v-if="hasDefaultFilters && index === 0" :class="$style.defaultGroupTitle">
+            Default Group
+            <PlBtnGhost
+              v-if="isFunction(props.onResetDefaultFilters)"
+              icon="restart"
+              :class="$style.restartBtn"
+              @click.stop="props.onResetDefaultFilters()"
+            />
+          </div>
+          <div v-else>Custom Group</div>
+        </template>
+      </PlAdvancedFilterComponent>
     </div>
   </PlSlideModal>
 </template>
@@ -143,4 +183,18 @@ function handleSuggestOptions(params: {
   flex-direction: column;
   gap: 12px;
 }
+.defaultGroupTitle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.restartBtn {
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  --button-width: 24px;
+  --btn-min-width: 24px;
+  --button-height: 24px;
+  --btn-min-height: 24x;
+}
 </style>

package/src/index.ts

@@ -1 +1,5 @@
+import { setAutoFreeze } from "immer";
+
+setAutoFreeze(false);
+
 export * from "./lib";