@platforma-sdk/ui-vue 1.63.12 → 1.65.0

package/src/components/PlAdvancedFilter/PlAdvancedFilter.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup generic="T extends RootFilter">
 import { PlBtnSecondary, PlCheckbox, PlElementList } from "@milaboratories/uikit";
 import type { ListOptionBase } from "@platforma-sdk/model";
-import { computed, toRaw } from "vue";
+import { produce } from "immer";
+import { computed } from "vue";
 import FilterEditor from "./FilterEditor.vue";
 import OperandButton from "./OperandButton.vue";
 import { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS, SUPPORTED_FILTER_TYPES } from "./constants";
@@ -9,24 +10,35 @@ import type {
   CommonFilter,
   EditableFilter,
   NodeFilter,
+  Operand,
   PlAdvancedFilterColumnId,
   RootFilter,
   SourceOptionInfo,
 } from "./types";
 import { createNewGroup, getNewId, isValidColumnId } from "./utils";
 
-const model = defineModel<T>("filters", { required: true });
-
 const props = withDefaults(
   defineProps<{
+    filters: T;
+    onUpdateFilters: (filters: T) => void;
     /** List of ids of sources (columns, axes) that can be selected in filters */
-    items: SourceOptionInfo[];
+    options: SourceOptionInfo[];
     /** List of supported filter types */
     supportedFilters?: typeof SUPPORTED_FILTER_TYPES;
     /** If true - new filter can be added by droppind element into filter group; else new column is added by button click */
     enableDnd?: boolean;
     /** If true - "Add group" button is shown below the filter groups */
     enableAddGroupButton?: boolean;
+    /** If true - eye icon is shown per group to toggle suppression */
+    enableToggling?: boolean;
+    /** Function to determine if a filter is pinned */
+    isPinned?: (item: NodeFilter, index: number) => boolean;
+    /** Function to determine if a filter is removable */
+    isRemovable?: (item: NodeFilter, index: number) => boolean;
+    /** Function to determine if a filter is draggable */
+    isDraggable?: (item: NodeFilter, index: number) => boolean;
+    /** Function to determine if a group is complete */
+    isCompletedGroup?: (group: NodeFilter, index: number) => boolean;
     /** Loading function for unique values for Equal/InSet filters and fixed axes options. */
     getSuggestOptions: (params: {
       columnId: PlAdvancedFilterColumnId;
@@ -37,14 +49,23 @@ const props = withDefaults(
   }>(),
   {
     supportedFilters: () => SUPPORTED_FILTER_TYPES,
+    isCompletedGroup: () => false,
+    isPinned: () => false,
+    isRemovable: () => true,
+    isDraggable: () => true,
+
     getSuggestModel: undefined,
 
     enableDnd: false,
     enableAddGroupButton: false,
+    enableToggling: false,
   },
 );
+const produceFiltersUpdate = (updater: (draft: T) => void) => {
+  props.onUpdateFilters(produce(props.filters, updater));
+};
 
-const firstColumnId = computed(() => props.items[0]?.id);
+const firstColumnId = computed(() => props.options[0]?.id);
 const emptyGroup: NodeFilter[] = [
   {
     id: -1,
@@ -54,93 +75,100 @@ const emptyGroup: NodeFilter[] = [
   },
 ];
 
+const rootFilters = computed({
+  get: () => props.filters.filters,
+  set: (filters) => props.onUpdateFilters({ ...props.filters, filters: filters }),
+});
+
 function getRootGroups() {
-  if (model.value.type !== "or" && model.value.type !== "and") {
+  if (props.filters.type !== "or" && props.filters.type !== "and") {
     throw new Error('Invalid model structure, expected root to be "or" or "and" group');
   }
-  return model.value.filters;
+  return props.filters.filters;
 }
 
-function getRootGroup(idx: number): NodeFilter {
-  const groups = getRootGroups();
-  const group = groups[idx];
-  if (group.type !== "and" && group.type !== "or" && group.type !== "not") {
+function getDraftGroupContent(
+  draft: RootFilter,
+  idx: number,
+): Exclude<NodeFilter, { type: "not" }> {
+  const group = draft.filters[idx];
+  if (group.type === "not") {
+    if (group.filter.type !== "and" && group.filter.type !== "or") {
+      throw new Error('Invalid group structure, expected "and" or "or" group inside "not"');
+    }
+    return group.filter;
+  }
+  if (group.type !== "and" && group.type !== "or") {
     throw new Error('Invalid group structure, expected "and", "or" or "not" group');
   }
   return group;
 }
 
-function getRootGroupContent(idx: number): Exclude<NodeFilter, { type: "not" }> {
-  const group = getRootGroup(idx);
-
-  if (group.type !== "not") {
-    return group;
-  }
-
-  if (group.filter.type !== "and" && group.filter.type !== "or") {
-    throw new Error('Invalid group structure, expected "and" or "or" group inside "not"');
-  }
-
-  return group.filter;
+function getNotContent<T extends CommonFilter>(item: T): Exclude<T, { type: "not" }> {
+  return item.type === "not"
+    ? (item.filter as Exclude<T, { type: "not" }>)
+    : (item as Exclude<T, { type: "not" }>);
 }
 
 function addColumnToGroup(groupIdx: number, selectedSourceId: PlAdvancedFilterColumnId) {
-  const group = getRootGroupContent(groupIdx);
-
-  group.filters.push({
-    ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],
-    column: selectedSourceId,
-    id: getNewId(),
-    isExpanded: true,
-  } as CommonFilter);
+  produceFiltersUpdate((draft: RootFilter) => {
+    const group = getDraftGroupContent(draft, groupIdx);
+    group.filters.push({
+      ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],
+      column: selectedSourceId,
+      id: getNewId(),
+      isExpanded: true,
+    } as CommonFilter);
+  });
 }
 
 function removeFilterFromGroup(groupIdx: number, filterIdx: number) {
-  const group = getRootGroupContent(groupIdx);
-
-  if (group.filters.length === 1 && filterIdx === 0) {
-    removeGroup(groupIdx);
-  } else {
-    group.filters.splice(filterIdx, 1);
-  }
+  produceFiltersUpdate((draft: RootFilter) => {
+    const group = getDraftGroupContent(draft, groupIdx);
+    if (group.filters.length === 1 && filterIdx === 0) {
+      draft.filters.splice(groupIdx, 1);
+    } else {
+      group.filters.splice(filterIdx, 1);
+    }
+  });
 }
+
 function inverseRootNode(groupIdx: number) {
-  const groups = getRootGroups();
-  const group = groups[groupIdx];
-  if (group.type === "not") {
-    if (group.filter.type !== "and" && group.filter.type !== "or") {
-      throw new Error('Invalid group structure, expected "and" or "or" group inside "not"');
-    }
-    groups[groupIdx] = group.filter;
-  } else {
-    const type = groups[groupIdx].type;
-    if (type !== "and" && type !== "or" && type !== "not") {
-      throw new Error('Invalid group structure, expected "and", "or" or "not" group');
+  produceFiltersUpdate((draft: RootFilter) => {
+    const group = draft.filters[groupIdx];
+    if (group.type === "not") {
+      if (group.filter.type !== "and" && group.filter.type !== "or") {
+        throw new Error('Invalid group structure, expected "and" or "or" group inside "not"');
+      }
+      draft.filters[groupIdx] = {
+        ...draft.filters[groupIdx],
+        ...group.filter,
+      };
+    } else {
+      const type = draft.filters[groupIdx].type;
+      if (type !== "and" && type !== "or" && type !== "not") {
+        throw new Error('Invalid group structure, expected "and", "or" or "not" group');
+      }
+      draft.filters[groupIdx] = {
+        ...draft.filters[groupIdx],
+        id: getNewId(),
+        type: "not",
+        filter: draft.filters[groupIdx],
+      };
     }
-
-    groups[groupIdx] = {
-      id: getNewId(),
-      isExpanded: true,
-      type: "not",
-      filter: groups[groupIdx],
-    };
-  }
+  });
 }
 
-function getNotContent<T extends CommonFilter>(item: T): Exclude<T, { type: "not" }> {
-  return item.type === "not"
-    ? (item.filter as Exclude<T, { type: "not" }>)
-    : (item as Exclude<T, { type: "not" }>);
+function addGroup(selectedSourceId: PlAdvancedFilterColumnId) {
+  produceFiltersUpdate((draft: RootFilter) => {
+    draft.filters.push(createNewGroup(selectedSourceId));
+  });
 }
 
-function removeGroup(groupIdx: number) {
-  const groups = getRootGroups();
-  groups.splice(groupIdx, 1);
-}
-function addGroup(selectedSourceId: PlAdvancedFilterColumnId) {
-  const newGroup = createNewGroup(selectedSourceId);
-  const groups = getRootGroups();
-  groups.push(newGroup);
+function updateFilter(groupIdx: number, filterIdx: number, updatedFilter: EditableFilter) {
+  produceFiltersUpdate((draft: RootFilter) => {
+    getDraftGroupContent(draft, groupIdx).filters[filterIdx] = updatedFilter as CommonFilter;
+  });
 }
 
 function handleDropToExistingGroup(groupIdx: number, event: DragEvent) {
@@ -152,6 +180,7 @@ function handleDropToExistingGroup(groupIdx: number, event: DragEvent) {
     }
   }
 }
+
 function handleDropToNewGroup(event: DragEvent) {
   const dataTransfer = event.dataTransfer;
   if (dataTransfer?.getData("text/plain")) {
@@ -161,10 +190,35 @@ function handleDropToNewGroup(event: DragEvent) {
     }
   }
 }
+
 function dragOver(event: DragEvent) {
   event.preventDefault();
 }
 
+function toggleExpand(_: NodeFilter, index: number) {
+  produceFiltersUpdate((draft: RootFilter) => {
+    draft.filters[index].isExpanded = !draft.filters[index].isExpanded;
+  });
+}
+
+function toggleSuppress(_: NodeFilter, index: number) {
+  produceFiltersUpdate((draft: RootFilter) => {
+    draft.filters[index].isSuppressed = !draft.filters[index].isSuppressed;
+  });
+}
+
+function changeGroupOperand(index: number, v: Operand) {
+  produceFiltersUpdate((draft: RootFilter) => {
+    getDraftGroupContent(draft, index).type = v;
+  });
+}
+
+function changeRootOperand(v: Operand) {
+  produceFiltersUpdate((draft: RootFilter) => {
+    draft.type = v;
+  });
+}
+
 function validateFilter<T extends CommonFilter>(item: T): EditableFilter {
   if (item.type === "and" || item.type === "or" || item.type === "not") {
     throw new Error("Invalid filter structure, expected leaf filter");
@@ -172,34 +226,38 @@ function validateFilter<T extends CommonFilter>(item: T): EditableFilter {
 
   return item as EditableFilter;
 }
-
-function updateFilter(filters: CommonFilter[], idx: number, updatedFilter: EditableFilter) {
-  filters[idx] = toRaw(updatedFilter as CommonFilter);
-}
 </script>
 <template>
   <div>
     <PlElementList
-      v-model:items="model.filters"
+      v-model:items="rootFilters"
       :get-item-key="(filter) => filter.id"
       :item-class="$style.filterGroup"
       :item-class-content="$style.filterGroupContent"
       :item-class-title="$style.filterGroupTitle"
       :is-expanded="(filter) => filter.isExpanded === true"
-      :on-expand="
-        (group) => {
-          group.isExpanded = !group.isExpanded;
-        }
-      "
-      :disableDragging="false"
-      :disableRemoving="false"
-      :disableToggling="true"
-      :disablePinning="true"
+      :on-expand="toggleExpand"
+      :is-toggled="(item) => item.isSuppressed === true"
+      :on-toggle="toggleSuppress"
+      :is-pinned="(item, index) => props.isPinned?.(item, index) === true"
+      :is-pinnable="() => false"
+      :is-removable="(item, index) => props.isRemovable?.(item, index) === true"
+      :is-draggable="(item, index) => props.isDraggable?.(item, index) === true"
+      :disable-toggling="props.enableToggling !== true"
+      :disable-dragging="false"
+      :disable-removing="false"
     >
-      <template #item-title> Filter group </template>
+      <template #item-title="{ item, index }">
+        <slot name="group-title" :item="item" :index="index">Filter group</slot>
+      </template>
       <template #item-content="{ item, index }">
         <div
-          :class="$style.groupContent"
+          :class="[
+            $style.groupContent,
+            {
+              [$style.suppressedLabel]: item.isSuppressed,
+            },
+          ]"
           dropzone="true"
           @drop="(event) => handleDropToExistingGroup(index, event)"
           @dragover="dragOver"
@@ -215,22 +273,24 @@ function updateFilter(filters: CommonFilter[], idx: number, updatedFilter: Edita
             <FilterEditor
               :filter="validateFilter(getNotContent(item).filters[filterIdx])"
               :operand="getNotContent(item).type"
-              :column-options="items"
+              :column-options="options"
               :supported-filters="props.supportedFilters"
               :get-suggest-options="props.getSuggestOptions"
               :enable-dnd="Boolean(props.enableDnd)"
               :is-last="filterIdx === getNotContent(item).filters.length - 1"
-              :on-change-operand="(v) => (getNotContent(item).type = v)"
-              :on-delete="() => removeFilterFromGroup(index, filterIdx)"
-              @update:filter="
-                (value) => updateFilter(getNotContent(item).filters, filterIdx, value)
-              "
+              @delete="() => removeFilterFromGroup(index, filterIdx)"
+              @update-filter="(value) => updateFilter(index, filterIdx, value)"
+              @change-operand="(v) => changeGroupOperand(index, v)"
             />
           </template>
           <div v-if="props.enableDnd" :class="$style.dropzone">
             <div>Drop dimensions here</div>
           </div>
-          <PlBtnSecondary v-else icon="add" @click="addColumnToGroup(index, firstColumnId)">
+          <PlBtnSecondary
+            v-else-if="!props.isCompletedGroup(item, index)"
+            icon="add"
+            @click="addColumnToGroup(index, firstColumnId)"
+          >
             Add filter
           </PlBtnSecondary>
         </div>
@@ -239,9 +299,9 @@ function updateFilter(filters: CommonFilter[], idx: number, updatedFilter: Edita
         <OperandButton
           v-if="props.enableAddGroupButton || index < getRootGroups().length - 1"
           :class="$style.buttonWrapper"
-          :active="model.type"
+          :active="props.filters.type"
           :disabled="index === getRootGroups().length - 1"
-          :on-select="(v) => (model.type = v)"
+          :on-select="changeRootOperand"
         />
       </template>
     </PlElementList>
@@ -263,7 +323,11 @@ function updateFilter(filters: CommonFilter[], idx: number, updatedFilter: Edita
       @drop="handleDropToNewGroup"
       @dragover="dragOver"
     >
-      <template #item-title>Filter group</template>
+      <template #item-title="{ item, index }">
+        <slot name="group-title" :item="item" :index="index + getRootGroups().length"
+          >Filter group</slot
+        >
+      </template>
       <template #item-content>
         <div v-if="enableDnd" :class="$style.dropzone">
           <div>Drop dimensions here</div>
@@ -296,6 +360,10 @@ function updateFilter(filters: CommonFilter[], idx: number, updatedFilter: Edita
 .notCheckbox {
   margin: 4px 0;
 }
+.suppressedLabel {
+  filter: grayscale(100%);
+  pointer-events: none;
+}
 .dropzone {
   border-radius: 6px;
   border: 1.5px dashed var(--color-div-grey);

package/src/components/PlAdvancedFilter/types.ts

@@ -18,7 +18,12 @@ export type PlAdvancedFilterColumnId =
   | CanonicalizedJson<AxisId>
   | CanonicalizedJson<PTableColumnId>;
 
-export type RequiredMeta = { id: number; isExpanded?: boolean };
+export type RequiredMeta = {
+  id: number;
+  isExpanded?: boolean;
+  isSuppressed?: boolean;
+  source?: string;
+};
 
 export type FilterLeafContent = Extract<
   FilterSpecLeaf<PlAdvancedFilterColumnId>,

package/src/components/PlAgDataTable/PlAgDataTableV2.vue

@@ -162,11 +162,17 @@ const [filterableColumns, visibleFilterableColumns] = useFilterableColumns(
   () => settings.value.sourceId,
   () => gridOptions.value.columnDefs ?? null,
 );
-const { gridState, sheetsState, filtersState, searchString } = useTableState(
-  tableState,
-  settings,
-  visibleFilterableColumns,
+const defaultFilters = computed(() =>
+  settings.value.sourceId !== null ? settings.value.model?.defaultFilters : undefined,
 );
+const {
+  gridState,
+  sheetsState,
+  searchString,
+  filtersState,
+  defaultFiltersState,
+  resetDefaultFilters,
+} = useTableState(tableState, settings, visibleFilterableColumns, defaultFilters);
 const sheetsSettings = computed<PlDataTableSheetsSettings>(() => {
   const settingsCopy = { ...settings.value };
   return settingsCopy.sourceId !== null
@@ -234,10 +240,11 @@ function normalizeColumnVisibility(
 function getDefaultHiddenColIds(api: GridApi<PlAgDataTableV2Row>): PlTableColumnIdJson[] {
   const cols = api.getAllGridColumns();
   if (!cols) return [];
+
   return cols
     .filter((col) => {
       const spec = col.getColDef().context as PTableColumnSpec | undefined;
-      return spec && isColumnOptional(spec.spec);
+      return spec !== undefined && spec.type === "column" && isColumnOptional(spec.spec);
     })
     .map((col) => col.getColId() as PlTableColumnIdJson);
 }
@@ -370,6 +377,13 @@ watch(
         return;
       }
 
+      if (
+        settings.model?.fullTableHandle === undefined ||
+        settings.model?.visibleTableHandle === undefined
+      ) {
+        return;
+      }
+
       // Data source changed -> show full page loader, clear selection
       if (settings.sourceId !== oldSettings?.sourceId) {
         gridApi.updateGridOptions({
@@ -410,7 +424,8 @@ watch(
       calculateGridOptions({
         generation,
         pfDriver: getRawPlatformaInstance().pFrameDriver,
-        model: settings.model,
+        fullTableHandle: settings.model?.fullTableHandle,
+        visibleTableHandle: settings.model?.visibleTableHandle,
         sheets: settings.sheets ?? [],
         dataRenderedTracker,
         hiddenColIds: gridState.value.columnVisibility?.hiddenColIds,
@@ -532,9 +547,13 @@ watchEffect(() => {
     <PlAgGridColumnManager v-if="gridApi && !disableColumnsPanel" :api="gridApi" />
     <PlTableFiltersV2
       v-if="!disableFiltersPanel"
-      v-model="filtersState"
+      :filters="filtersState"
+      :default-filters="defaultFiltersState"
       :pframe-handle="'model' in settings ? settings?.model?.fullPframeHandle : undefined"
       :columns="filterableColumns"
+      @updateFilters="(v) => (filtersState = v)"
+      @resetDefaultFilters="resetDefaultFilters"
+      @updateDefaultFilters="(v) => (defaultFiltersState = v)"
     />
     <PlAgCsvExporter v-if="gridApi && showExportButton" :api="gridApi" />
     <PlAgDataTableSheets v-model="sheetsState" :settings="sheetsSettings">

package/src/components/PlAgDataTable/compositions/useFilterableColumns.ts

@@ -32,13 +32,13 @@ export function useFilterableColumns(
       const dataColDefs = getDataColDefs(columnDefs);
       const cols = dataColDefs
         .filter((def): def is typeof def & { colId: string } => !isNil(def.colId))
-        .flatMap((def) => ({
-          id: parseJson(def.colId satisfies string as PlTableColumnIdJson).labeled,
+        .map((def) => ({
+          item: parseJson(def.colId satisfies string as PlTableColumnIdJson).labeled,
           hide: def.hide,
         }));
 
-      filterableColumns.value = cols.map((c) => c.id);
-      visibleFilterableColumns.value = cols.filter((c) => !c.hide).map((c) => c.id);
+      filterableColumns.value = cols.map((c) => c.item);
+      visibleFilterableColumns.value = cols.filter((c) => !c.hide).map((c) => c.item);
     },
     { immediate: true },
   );