@platforma-sdk/ui-vue 1.45.42 → 1.46.0

package/src/components/PlAdvancedFilter/PlAdvancedFilter.vue

@@ -1,59 +1,128 @@
 <script lang="ts" setup>
-import SingleFilter from './SingleFilter.vue';
-import { PlBtnSecondary, PlElementList, PlCheckbox, PlIcon16 } from '@milaboratories/uikit';
-import type { PlAdvancedFilterColumnId, CommonFilterSpec, Group, PlAdvancedFilterUI, SourceOptionInfo } from './types';
-import { computed } from 'vue';
-import OperandButton from './OperandButton.vue';
-import { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS } from './constants';
+import { PlBtnSecondary, PlCheckbox, PlElementList } from '@milaboratories/uikit';
 import type { ListOptionBase } from '@platforma-sdk/model';
-import { createNewGroup, isValidColumnId, toInnerModel, toOuterModel, useInnerModel } from './utils';
+import { computed, toRaw } from 'vue';
+import FilterEditor from './FilterEditor.vue';
+import OperandButton from './OperandButton.vue';
+import { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS, SUPPORTED_FILTER_TYPES } from './constants';
+import type { CommonFilter, EditableFilter, NodeFilter, PlAdvancedFilterColumnId, RootFilter, SourceOptionInfo } from './types';
+import { createNewGroup, getNewId, isValidColumnId } from './utils';
+
+const model = defineModel<RootFilter>('filters', { required: true });
 
 const props = withDefaults(defineProps<{
   /** List of ids of sources (columns, axes) that can be selected in filters */
   items: 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;
   /** Loading function for unique values for Equal/InSet filters and fixed axes options. */
-  getSuggestOptions: (params: { columnId: PlAdvancedFilterColumnId; searchStr: string; axisIdx?: number }) => (Promise<ListOptionBase<string | number>[]>) |
-    ((params: { columnId: PlAdvancedFilterColumnId; searchStr: string; axisIdx?: number }) => ListOptionBase<string | number>[]);
-  /** Loading function for label of selected value for Equal/InSet filters and fixed axes options. */
-  getSuggestModel: (params: { columnId: PlAdvancedFilterColumnId; searchStr: string; axisIdx?: number }) => (Promise<ListOptionBase<string | number>>) |
-    ((params: { columnId: PlAdvancedFilterColumnId; searchStr: string; axisIdx?: number }) => ListOptionBase<string | number>);
-}>(), { enableDnd: false });
+  getSuggestOptions: (params: { columnId: PlAdvancedFilterColumnId; axisIdx?: number; searchStr: string; searchType: 'value' | 'label' }) =>
+    ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;
+}>(), {
+  supportedFilters: () => SUPPORTED_FILTER_TYPES,
+  getSuggestModel: undefined,
 
-const model = defineModel<CommonFilterSpec>({ required: true });
-const innerModel = useInnerModel<CommonFilterSpec, PlAdvancedFilterUI>(toInnerModel, toOuterModel, model);
+  enableDnd: false,
+  enableAddGroupButton: false,
+});
 
 const firstColumnId = computed(() => props.items[0]?.id);
-const emptyGroup: Group[] = [{
-  id: 'empty',
-  not: false,
-  operand: 'and',
+const emptyGroup: NodeFilter[] = [{
+  id: -1,
+  type: 'and',
   filters: [],
-  expanded: true,
+  isExpanded: true,
 }];
 
+function getRootGroups() {
+  if (model.value.type !== 'or' && model.value.type !== 'and') {
+    throw new Error('Invalid model structure, expected root to be "or" or "and" group');
+  }
+  return model.value.filters;
+}
+
+function getRootGroup(idx: number): NodeFilter {
+  const groups = getRootGroups();
+  const group = groups[idx];
+  if (group.type !== 'and' && group.type !== 'or' && group.type !== 'not') {
+    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 addColumnToGroup(groupIdx: number, selectedSourceId: PlAdvancedFilterColumnId) {
-  innerModel.value.groups[groupIdx].filters.push({
+  const group = getRootGroupContent(groupIdx);
+
+  group.filters.push({
     ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],
     column: selectedSourceId,
-  });
+    id: getNewId(),
+    isExpanded: true,
+  } as CommonFilter);
 }
 
 function removeFilterFromGroup(groupIdx: number, filterIdx: number) {
-  if (innerModel.value.groups[groupIdx].filters.length === 1 && filterIdx === 0) {
+  const group = getRootGroupContent(groupIdx);
+
+  if (group.filters.length === 1 && filterIdx === 0) {
     removeGroup(groupIdx);
   } else {
-    innerModel.value.groups[groupIdx].filters = innerModel.value.groups[groupIdx].filters.filter((_v, idx) => idx !== filterIdx);
+    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');
+    }
+
+    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 removeGroup(groupIdx: number) {
-  innerModel.value.groups = innerModel.value.groups.filter((v, idx) => idx !== groupIdx);
+  const groups = getRootGroups();
+  groups.splice(groupIdx, 1);
 }
 function addGroup(selectedSourceId: PlAdvancedFilterColumnId) {
   const newGroup = createNewGroup(selectedSourceId);
-  innerModel.value.groups.push(newGroup);
+  const groups = getRootGroups();
+  groups.push(newGroup);
 }
 
 function handleDropToExistingGroup(groupIdx: number, event: DragEvent) {
@@ -77,70 +146,85 @@ function handleDropToNewGroup(event: DragEvent) {
 function dragOver(event: DragEvent) {
   event.preventDefault();
 }
+
+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');
+  }
+
+  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="innerModel.groups"
-      :get-item-key="(group) => group.id"
+      v-model:items="model.filters"
+      :get-item-key="(filter) => filter.id"
 
       :item-class="$style.filterGroup"
       :item-class-content="$style.filterGroupContent"
       :item-class-title="$style.filterGroupTitle"
 
-      :is-expanded="(group) => group.expanded"
+      :is-expanded="(filter) => filter.isExpanded === true"
+      :on-expand="(group) => { group.isExpanded = !group.isExpanded}"
 
       :disableDragging="false"
       :disableRemoving="false"
       :disableToggling="true"
       :disablePinning="true"
-
-      :on-expand="(group) => { group.expanded = !group.expanded}"
     >
       <template #item-title>
         Filter group
       </template>
       <template #item-content="{ item, index }">
         <div
-          :class="$style.groupContent" dropzone="true"
+          :class="$style.groupContent"
+          dropzone="true"
           @drop="(event) => handleDropToExistingGroup(index, event)"
           @dragover="dragOver"
         >
-          <PlCheckbox v-model="item.not">NOT</PlCheckbox>
-          <SingleFilter
-            v-for="(filter, filterIdx) in item.filters"
-            :key="filterIdx"
-            v-model="item.filters[filterIdx]"
-            :operand="item.operand"
-            :column-options="items"
-            :get-suggest-model="getSuggestModel"
-            :get-suggest-options="getSuggestOptions"
-            :enable-dnd="enableDnd"
-            :is-last="filterIdx === item.filters.length - 1"
-            :on-change-operand="(v) => item.operand = v"
-            :on-delete="() => removeFilterFromGroup(index, filterIdx)"
-          />
-          <div v-if="enableDnd" :class="$style.dropzone">
+          <PlCheckbox :model-value="item.type === 'not'" :class="$style.notCheckbox" @update:model-value="inverseRootNode(index)">NOT</PlCheckbox>
+          <template v-for="(_, filterIdx) in getNotContent(item).filters" :key="filterIdx">
+            <FilterEditor
+              :filter="validateFilter(getNotContent(item).filters[filterIdx])"
+              :operand="getNotContent(item).type"
+              :column-options="items"
+              :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)"
+            />
+          </template>
+          <div v-if="props.enableDnd" :class="$style.dropzone">
             <div>Drop dimensions here</div>
           </div>
-          <PlBtnSecondary v-else @click="addColumnToGroup(index, firstColumnId)">
-            <PlIcon16 name="add" style="margin-right: 8px"/>Add column
+          <PlBtnSecondary v-else icon="add" @click="addColumnToGroup(index, firstColumnId)">
+            Add filter
           </PlBtnSecondary>
         </div>
       </template>
       <template #item-after="{ index }">
         <OperandButton
+          v-if="props.enableAddGroupButton || index < getRootGroups().length - 1"
           :class="$style.buttonWrapper"
-          :active="innerModel.operand"
-          :disabled="index === innerModel.groups.length - 1"
-          :on-select="(v) => innerModel.operand = v"
+          :active="model.type"
+          :disabled="index === getRootGroups().length - 1"
+          :on-select="(v) => model.type = v"
         />
       </template>
     </PlElementList>
 
-    <!-- Last group - always exists, always empty, just for adding new groups -->
+    <!-- Last group - always empty, just for adding new groups -->
     <PlElementList
-      v-model:items="emptyGroup"
+      v-if="props.enableAddGroupButton"
+      :items="emptyGroup"
       :get-item-key="(group) => group.id"
       :item-class="$style.filterGroup"
       :item-class-content="$style.filterGroupContent"
@@ -157,14 +241,15 @@ function dragOver(event: DragEvent) {
       @dragover="dragOver"
     >
       <template #item-title>Filter group</template>
-      <template #item-content="{item}">
-        <PlCheckbox v-model="item.not" disabled >NOT</PlCheckbox>
+      <template #item-content>
         <div v-if="enableDnd" :class="$style.dropzone">
           <div>Drop dimensions here</div>
         </div>
-        <PlBtnSecondary v-else @click="addGroup(firstColumnId)">
-          <PlIcon16 name="add" style="margin-right: 8px"/>Add column
-        </PlBtnSecondary>
+        <slot v-else name="add-group-buttons">
+          <PlBtnSecondary icon="add" @click="addGroup(firstColumnId)">
+            Add filter
+          </PlBtnSecondary>
+        </slot>
       </template>
     </PlElementList>
   </div>
@@ -179,11 +264,17 @@ function dragOver(event: DragEvent) {
   .filterGroupTitle {
     background: none;
   }
+  .filterGroupContent {
+    padding: 4px 24px 24px 24px;
+  }
   .groupContent {
     display: flex;
     flex-direction: column;
     gap: 12px;
   }
+  .notCheckbox {
+    margin: 4px 0;
+  }
   .dropzone {
     border-radius: 6px;
     border: 1.5px dashed var(--color-div-grey);
@@ -199,7 +290,8 @@ function dragOver(event: DragEvent) {
     align-items: center;
   }
   .buttonWrapper {
-    height: 72px;
+    margin-top: 8px;
+    height: 56px;
     display: flex;
     align-items: center;
   }

package/src/components/PlAdvancedFilter/constants.ts

@@ -1,6 +1,8 @@
-import type { PlAdvancedFilterColumnId, Filter, FilterType, SupportedFilterTypes } from './types';
+import type { FilterSpecType } from '@platforma-sdk/model';
+import type { EditableFilter, PlAdvancedFilterColumnId, SupportedFilterTypes } from './types';
 
-export const SUPPORTED_FILTER_TYPES = new Set<SupportedFilterTypes>([
+// List of ALL supported filter types in Advanced Filter component
+export const SUPPORTED_FILTER_TYPES = [
   'isNA',
   'isNotNA',
   'greaterThan',
@@ -17,26 +19,30 @@ export const SUPPORTED_FILTER_TYPES = new Set<SupportedFilterTypes>([
   'patternMatchesRegularExpression',
   'inSet',
   'notInSet',
-]);
+  'topN',
+  'bottomN',
+] satisfies FilterSpecType[];
 
-export const DEFAULT_FILTER_TYPE: FilterType = 'isNA';
+export const DEFAULT_FILTER_TYPE: SupportedFilterTypes = 'isNA';
 
 const emptyCommonPart = { column: '' as PlAdvancedFilterColumnId };
-export const DEFAULT_FILTERS: Record<SupportedFilterTypes, Filter> = {
+export const DEFAULT_FILTERS: Record<SupportedFilterTypes, EditableFilter> = {
   isNA: { type: 'isNA', ...emptyCommonPart },
   isNotNA: { type: 'isNotNA', ...emptyCommonPart },
-  lessThan: { type: 'lessThan', x: undefined, ...emptyCommonPart },
-  lessThanOrEqual: { type: 'lessThanOrEqual', x: undefined, ...emptyCommonPart },
+  lessThan: { type: 'lessThan', x: 0, ...emptyCommonPart },
+  lessThanOrEqual: { type: 'lessThanOrEqual', x: 0, ...emptyCommonPart },
   patternEquals: { type: 'patternEquals', value: undefined, ...emptyCommonPart },
   patternNotEquals: { type: 'patternNotEquals', value: undefined, ...emptyCommonPart },
-  greaterThan: { type: 'greaterThan', x: undefined, ...emptyCommonPart },
-  greaterThanOrEqual: { type: 'greaterThanOrEqual', x: undefined, ...emptyCommonPart },
+  greaterThan: { type: 'greaterThan', x: 0, ...emptyCommonPart },
+  greaterThanOrEqual: { type: 'greaterThanOrEqual', x: 0, ...emptyCommonPart },
   patternContainSubsequence: { type: 'patternContainSubsequence', value: '', ...emptyCommonPart },
   patternNotContainSubsequence: { type: 'patternNotContainSubsequence', value: '', ...emptyCommonPart },
   patternFuzzyContainSubsequence: { type: 'patternFuzzyContainSubsequence', maxEdits: 2, substitutionsOnly: false, wildcard: undefined, value: '', ...emptyCommonPart },
   patternMatchesRegularExpression: { type: 'patternMatchesRegularExpression', value: '', ...emptyCommonPart },
-  equal: { type: 'equal', x: undefined, ...emptyCommonPart },
-  notEqual: { type: 'notEqual', x: undefined, ...emptyCommonPart },
+  equal: { type: 'equal', x: 0, ...emptyCommonPart },
+  notEqual: { type: 'notEqual', x: 0, ...emptyCommonPart },
   inSet: { type: 'inSet', value: [], ...emptyCommonPart },
   notInSet: { type: 'notInSet', value: [], ...emptyCommonPart },
+  topN: { type: 'topN', n: 10, ...emptyCommonPart },
+  bottomN: { type: 'bottomN', n: 10, ...emptyCommonPart },
 };

package/src/components/PlAdvancedFilter/index.ts

@@ -1 +1,7 @@
+import { SUPPORTED_FILTER_TYPES } from './constants.ts';
+import type { RootFilter, SourceOptionInfo } from './types.ts';
+
 export { default as PlAdvancedFilter } from './PlAdvancedFilter.vue';
+export const PlAdvancedFilterSupportedFilters = SUPPORTED_FILTER_TYPES;
+export type PlAdvancedFilterItem = SourceOptionInfo;
+export type PlAdvancedFilterFilter = RootFilter;

package/src/components/PlAdvancedFilter/types.ts

@@ -1,67 +1,36 @@
-import type { AxisSpec, FilterSpec, FilterSpecLeaf, FilterSpecType, ListOptionBase, PColumnSpec, SUniversalPColumnId } from '@platforma-sdk/model';
-import { SUPPORTED_FILTER_TYPES } from './constants';
-import type { CanonicalizedJson } from '@platforma-sdk/model';
-import type { AxisId } from '@platforma-sdk/model';
+import type { AxisId, AxisSpec, CanonicalizedJson, FilterSpec, FilterSpecLeaf, PColumnSpec, SUniversalPColumnId } from '@platforma-sdk/model';
+import type { SUPPORTED_FILTER_TYPES } from './constants';
 
-export type PlAdvancedFilterColumnId = SUniversalPColumnId | CanonicalizedJson<AxisId>;
-export type CommonFilterSpec = FilterSpec<FilterSpecLeaf<PlAdvancedFilterColumnId>, { expanded?: boolean }>;
-
-// Not supported: topN, bottomN, lessThanColumn, lessThanColumnOrEqual
-// or, and, not - in groups
-export type SupportedFilterTypes = FilterSpecType &
-  'isNA' | 'isNotNA' |
-  'patternEquals' | 'patternNotEquals' |
-  'patternContainSubsequence' | 'patternNotContainSubsequence' |
-  'patternMatchesRegularExpression' |
-  'patternFuzzyContainSubsequence' |
-  'inSet' | 'notInSet' |
-  'equal' | 'notEqual' |
-  'lessThan' | 'lessThanOrEqual' |
-  'greaterThan' | 'greaterThanOrEqual';
-
-export type FilterType = SupportedFilterTypes;
+export type Operand = 'or' | 'and';
 
-export function isSupportedFilterType(type: FilterSpecType | undefined): type is SupportedFilterTypes {
-  if (!type) {
-    return false;
-  }
-  return SUPPORTED_FILTER_TYPES.has(type as SupportedFilterTypes);
-}
+export type PlAdvancedFilterColumnId = SUniversalPColumnId | CanonicalizedJson<AxisId>;
 
-export type Operand = 'or' | 'and';
+export type FilterLeafContent = Extract<FilterSpecLeaf<PlAdvancedFilterColumnId>, { type: SupportedFilterTypes }>;
+export type CommonFilter = FilterSpec<FilterLeafContent, { id: number; isExpanded?: boolean }>;
+export type FilterLeaf = Exclude<CommonFilter, { type: Operand | 'not' }>;
+export type NodeFilter = Extract<CommonFilter, { type: Operand | 'not' }>;
+export type RootFilter = Omit<Extract<NodeFilter, { type: Operand }>, 'filters'> & { filters: NodeFilter[] };
 
-type FilterUiBase = FilterSpecLeaf<PlAdvancedFilterColumnId> & {
-  type: SupportedFilterTypes;
-  column: PlAdvancedFilterColumnId;
-};
+// Not supported: less(/greater)ThanColumn, less(/greater)ThanColumnOrEqual
+// or, and, not - in groups
+export type SupportedFilterTypes = typeof SUPPORTED_FILTER_TYPES[number];
 
 type RequireFields<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
 type OptionalFields<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 
+type NumericalWithOptionalN = 'topN' | 'bottomN';
 type NumericalWithOptionalX = 'lessThan' | 'lessThanOrEqual' | 'greaterThan' | 'greaterThanOrEqual' | 'equal' | 'notEqual';
 type StringWithOptionalValue = 'patternEquals' | 'patternNotEquals';
-type EditedTypes = SupportedFilterTypes & ('patternFuzzyContainSubsequence' | NumericalWithOptionalX | StringWithOptionalValue); // types from ui with some changed by optionality fields
-export type Filter = Exclude<FilterUiBase, { type: EditedTypes }> |
-  RequireFields<Extract<FilterUiBase, { type: 'patternFuzzyContainSubsequence' }>, 'maxEdits' | 'substitutionsOnly'> |
-  OptionalFields<Extract<FilterUiBase, { type: NumericalWithOptionalX }>, 'x'> |
-  OptionalFields<Extract<FilterUiBase, { type: StringWithOptionalValue }>, 'value'>
+// types from ui with some changed by optionality fields
+type EditedTypes = 'patternFuzzyContainSubsequence' | NumericalWithOptionalX | StringWithOptionalValue | NumericalWithOptionalN;
+export type EditableFilter =
+  | Exclude<FilterLeafContent, { type: EditedTypes }>
+  | RequireFields<Extract<FilterLeafContent, { type: 'patternFuzzyContainSubsequence' }>, 'maxEdits' | 'substitutionsOnly'>
+  | OptionalFields<Extract<FilterLeafContent, { type: NumericalWithOptionalN }>, 'n'>
+  | OptionalFields<Extract<FilterLeafContent, { type: NumericalWithOptionalX }>, 'x'>
+  | OptionalFields<Extract<FilterLeafContent, { type: StringWithOptionalValue }>, 'value'>
 ;
 
-export type Group = {
-  id: string;
-  not: boolean;
-  filters: Filter[];
-  operand: Operand;
-  expanded: boolean;
-};
-
-export type PlAdvancedFilterUI = {
-  groups: Group[];
-  operand: Operand;
-};
-
-export type UniqueValuesList = ListOptionBase<string | number>[];
-export type OptionInfo = { error: boolean; label: string; spec: PColumnSpec | AxisSpec };
 export type FixedAxisInfo = {
   idx: number;
   label: string;
@@ -70,8 +39,8 @@ export type FixedAxisInfo = {
 export type SourceOptionInfo = {
   id: PlAdvancedFilterColumnId;
   label: string;
-  error: boolean;
   spec: PColumnSpec | AxisSpec;
-  axesToBeFixed?: FixedAxisInfo[];
+  error?: boolean;
   alphabet?: 'nucleotide' | 'aminoacid' | string;
+  axesToBeFixed?: FixedAxisInfo[];
 };