@platforma-sdk/ui-vue 1.45.34 → 1.45.36

package/src/components/PlAdvancedFilter/PlAdvancedFilter.vue

@@ -0,0 +1,209 @@
+<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 type { ListOptionBase } from '@platforma-sdk/model';
+import { createNewGroup, isValidColumnId, toInnerModel, toOuterModel, useInnerModel } from './utils';
+
+const props = withDefaults(defineProps<{
+  /** List of ids of sources (columns, axes) that can be selected in filters */
+  items: SourceOptionInfo[];
+  /** If true - new filter can be added by droppind element into filter group; else new column is added by button click */
+  enableDnd?: 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 });
+
+const model = defineModel<CommonFilterSpec>({ required: true });
+const innerModel = useInnerModel<CommonFilterSpec, PlAdvancedFilterUI>(toInnerModel, toOuterModel, model);
+
+const firstColumnId = computed(() => props.items[0]?.id);
+const emptyGroup: Group[] = [{
+  id: 'empty',
+  not: false,
+  operand: 'and',
+  filters: [],
+  expanded: true,
+}];
+
+function addColumnToGroup(groupIdx: number, selectedSourceId: PlAdvancedFilterColumnId) {
+  innerModel.value.groups[groupIdx].filters.push({
+    ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],
+    column: selectedSourceId,
+  });
+}
+
+function removeFilterFromGroup(groupIdx: number, filterIdx: number) {
+  if (innerModel.value.groups[groupIdx].filters.length === 1 && filterIdx === 0) {
+    removeGroup(groupIdx);
+  } else {
+    innerModel.value.groups[groupIdx].filters = innerModel.value.groups[groupIdx].filters.filter((_v, idx) => idx !== filterIdx);
+  }
+}
+
+function removeGroup(groupIdx: number) {
+  innerModel.value.groups = innerModel.value.groups.filter((v, idx) => idx !== groupIdx);
+}
+function addGroup(selectedSourceId: PlAdvancedFilterColumnId) {
+  const newGroup = createNewGroup(selectedSourceId);
+  innerModel.value.groups.push(newGroup);
+}
+
+function handleDropToExistingGroup(groupIdx: number, event: DragEvent) {
+  const dataTransfer = event.dataTransfer;
+  if (dataTransfer?.getData('text/plain')) {
+    const draggedId = dataTransfer.getData('text/plain');
+    if (isValidColumnId(draggedId)) {
+      addColumnToGroup(groupIdx, draggedId);
+    }
+  }
+}
+function handleDropToNewGroup(event: DragEvent) {
+  const dataTransfer = event.dataTransfer;
+  if (dataTransfer?.getData('text/plain')) {
+    const draggedId = dataTransfer.getData('text/plain');
+    if (isValidColumnId(draggedId)) {
+      addGroup(draggedId);
+    }
+  }
+}
+function dragOver(event: DragEvent) {
+  event.preventDefault();
+}
+</script>
+<template>
+  <div>
+    <PlElementList
+      v-model:items="innerModel.groups"
+      :get-item-key="(group) => group.id"
+
+      :item-class="$style.filterGroup"
+      :item-class-content="$style.filterGroupContent"
+      :item-class-title="$style.filterGroupTitle"
+
+      :is-expanded="(group) => group.expanded"
+
+      :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"
+          @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">
+            <div>Drop dimensions here</div>
+          </div>
+          <PlBtnSecondary v-else @click="addColumnToGroup(index, firstColumnId)">
+            <PlIcon16 name="add" style="margin-right: 8px"/>Add column
+          </PlBtnSecondary>
+        </div>
+      </template>
+      <template #item-after="{ index }">
+        <OperandButton
+          :class="$style.buttonWrapper"
+          :active="innerModel.operand"
+          :disabled="index === innerModel.groups.length - 1"
+          :on-select="(v) => innerModel.operand = v"
+        />
+      </template>
+    </PlElementList>
+
+    <!-- Last group - always exists, always empty, just for adding new groups -->
+    <PlElementList
+      v-model:items="emptyGroup"
+      :get-item-key="(group) => group.id"
+      :item-class="$style.filterGroup"
+      :item-class-content="$style.filterGroupContent"
+      :item-class-title="$style.filterGroupTitle"
+
+      :is-expanded="() => true"
+
+      :disableDragging="true"
+      :disableRemoving="true"
+      :disableToggling="true"
+      :disablePinning="true"
+      dropzone="true"
+      @drop="handleDropToNewGroup"
+      @dragover="dragOver"
+    >
+      <template #item-title>Filter group</template>
+      <template #item-content="{item}">
+        <PlCheckbox v-model="item.not" disabled >NOT</PlCheckbox>
+        <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>
+      </template>
+    </PlElementList>
+  </div>
+</template>
+<style module>
+  .filterGroup {
+    background: var(--bg-base-light);
+  }
+  .filterGroup:hover {
+    background: rgba(99, 224, 36, 0.12);
+  }
+  .filterGroupTitle {
+    background: none;
+  }
+  .groupContent {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .dropzone {
+    border-radius: 6px;
+    border: 1.5px dashed var(--color-div-grey);
+    color: var(--txt-03);
+    font-family: Manrope;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    height: 40px;
+    cursor: default;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .buttonWrapper {
+    height: 72px;
+    display: flex;
+    align-items: center;
+  }
+  :global(.sortable-chosen) .buttonWrapper {
+    visibility: hidden;
+  }
+</style>

package/src/components/PlAdvancedFilter/SingleFilter.vue

@@ -0,0 +1,425 @@
+<script lang="ts" setup>
+import type { PlAdvancedFilterColumnId, Filter, Operand, SourceOptionInfo } from './types';
+import { PlIcon16, PlDropdown, PlAutocomplete, PlAutocompleteMulti, PlTextField, PlNumberField, Slider, PlToggleSwitch } from '@milaboratories/uikit';
+import { computed } from 'vue';
+import { SUPPORTED_FILTER_TYPES, DEFAULT_FILTER_TYPE, DEFAULT_FILTERS } from './constants';
+import type { AnchoredPColumnId, AxisFilterByIdx, AxisFilterValue, SUniversalPColumnId } from '@platforma-sdk/model';
+import { isFilteredPColumn, parseColumnId, stringifyColumnId, type ListOptionBase } from '@platforma-sdk/model';
+import OperandButton from './OperandButton.vue';
+import { getFilterInfo, getNormalizedSpec, isNumericFilter, isStringFilter } from './utils';
+
+const props = defineProps<{
+  operand: Operand;
+  columnOptions: SourceOptionInfo[];
+  enableDnd: boolean;
+  isLast: boolean;
+  getSuggestOptions: (params: { columnId: PlAdvancedFilterColumnId; searchStr: string; axisIdx?: number }) => (Promise<ListOptionBase<string | number>[]>) |
+    ((params: { columnId: SUniversalPColumnId; searchStr: string; axisIdx?: number }) => ListOptionBase<string | number>[]);
+  getSuggestModel: (params: { columnId: PlAdvancedFilterColumnId; searchStr: string; axisIdx?: number }) => (Promise<ListOptionBase<string | number>>) |
+    ((params: { columnId: PlAdvancedFilterColumnId; searchStr: string; axisIdx?: number }) => ListOptionBase<string | number>);
+  onDelete: (columnId: PlAdvancedFilterColumnId) => void;
+  onChangeOperand: (op: Operand) => void;
+}>();
+
+const filter = defineModel<Filter>({ required: true });
+
+async function getSuggestModelMultiFn(id: PlAdvancedFilterColumnId, v: string[], axisIdx?: number): Promise<ListOptionBase<string>[]> {
+  return Promise.all(v.map((v) => props.getSuggestModel({ columnId: id, searchStr: v, axisIdx }) as Promise<ListOptionBase<string>>));
+}
+async function getSuggestModelSingleFn(id: PlAdvancedFilterColumnId, v: string, axisIdx?: number): Promise<ListOptionBase<string>> {
+  return props.getSuggestModel({ columnId: id, searchStr: v, axisIdx }) as Promise<ListOptionBase<string>>;
+}
+async function getSuggestOptionsFn(id: PlAdvancedFilterColumnId, str: string, axisIdx?: number): Promise<ListOptionBase<string>[]> {
+  return props.getSuggestOptions({ columnId: id, searchStr: str, axisIdx }) as Promise<ListOptionBase<string>[]>;
+}
+
+function changeFilterType() {
+  const nextFilterInfo = getFilterInfo(filter.value.type);
+  if (currentSpec.value && nextFilterInfo.supportedFor(currentSpec.value) && isNumericFilter(filter.value)) {
+    // no extra changes, previous filter is compatible with new filter type
+    return;
+  } else if (currentSpec.value && nextFilterInfo.supportedFor(currentSpec.value) && isStringFilter(filter.value)) {
+    // erase extra settings for string filter types, save only value and column (for example regex)
+    filter.value = {
+      ...DEFAULT_FILTERS[filter.value.type],
+      value: filter.value.value,
+      column: filter.value.column,
+    } as Filter;
+  } else {
+    filter.value = {
+      ...DEFAULT_FILTERS[filter.value.type],
+      column: filter.value.column,
+    };
+  }
+}
+
+function changeSourceId(newSourceId?: PlAdvancedFilterColumnId) {
+  if (!newSourceId) {
+    return;
+  }
+  const newSourceInfo = props.columnOptions.find((v) => v.id === getSourceId(newSourceId));
+  if (!newSourceInfo) {
+    return;
+  }
+  const filterInfo = getFilterInfo(filter.value.type);
+  const newSourceSpec = getNormalizedSpec(newSourceInfo?.spec);
+  if (filterInfo.supportedFor(newSourceSpec)) { // don't do anything except update source id
+    filter.value.column = newSourceId;
+  } else { // reset to default filter which fits to any column
+    filter.value = {
+      ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],
+      column: newSourceId,
+    };
+  }
+}
+
+const inconsistentSourceSelected = computed(() => {
+  const selectedOption = props.columnOptions.find((op) => op.id === getSourceId(filter.value.column));
+  return selectedOption === undefined;
+});
+const sourceOptions = computed(() => {
+  const options = props.columnOptions.map((v) => ({ value: v.id, label: v.label ?? v }));
+  if (inconsistentSourceSelected.value) {
+    options.unshift({ value: filter.value.column, label: 'Inconsistent value' });
+  }
+  return options;
+});
+
+function getSourceId(column: PlAdvancedFilterColumnId): PlAdvancedFilterColumnId {
+  try {
+    const parsedColumnId = parseColumnId(column as SUniversalPColumnId);
+    if (isFilteredPColumn(parsedColumnId)) {
+      return stringifyColumnId(parsedColumnId.source);
+    } else {
+      return column;
+    }
+  } catch {
+    return column;
+  }
+}
+
+// similar to FilteredPColumnId but source is stringified and axis filters can be undefined
+type ColumnAsSourceAndFixedAxes = { source: PlAdvancedFilterColumnId; axisFiltersByIndex: Record<number, AxisFilterValue | undefined> };
+function getColumnAsSourceAndFixedAxes(column: PlAdvancedFilterColumnId): ColumnAsSourceAndFixedAxes {
+  const sourceId = getSourceId(column);
+  const option = props.columnOptions.find((op) => op.id === sourceId);
+  const axesToBeFixed = (option?.axesToBeFixed ?? []).reduce((res, item) => {
+    res[item.idx] = undefined;
+    return res;
+  }, {} as Record<number, AxisFilterValue | undefined>);
+  try {
+    const parsedColumnId = parseColumnId(column as SUniversalPColumnId);
+    if (isFilteredPColumn(parsedColumnId)) {
+      return {
+        source: sourceId,
+        axisFiltersByIndex: parsedColumnId.axisFilters.reduce((res, item) => {
+          res[item[0]] = item[1];
+          return res;
+        }, axesToBeFixed),
+      };
+    }
+  } catch {
+    return { source: column, axisFiltersByIndex: axesToBeFixed };
+  }
+  return { source: column, axisFiltersByIndex: axesToBeFixed };
+}
+
+function stringifyColumn(value: ColumnAsSourceAndFixedAxes): PlAdvancedFilterColumnId {
+  if (Object.keys(value.axisFiltersByIndex).length === 0) {
+    return value.source;
+  }
+  return stringifyColumnId({
+    source: parseColumnId(value.source as SUniversalPColumnId) as AnchoredPColumnId,
+    axisFilters: Object.entries(value.axisFiltersByIndex).map(([idx, value]) => [Number(idx), value] as AxisFilterByIdx),
+  });
+}
+
+const columnAsSourceAndFixedAxes = computed({
+  get: () => {
+    return getColumnAsSourceAndFixedAxes(filter.value.column);
+  },
+  set: (value) => {
+    filter.value.column = stringifyColumn(value);
+  },
+});
+function updateAxisFilterValue(idx: number, value: AxisFilterValue | undefined) {
+  columnAsSourceAndFixedAxes.value = {
+    ...columnAsSourceAndFixedAxes.value,
+    axisFiltersByIndex: { ...columnAsSourceAndFixedAxes.value.axisFiltersByIndex, [idx]: value } };
+}
+
+const currentOption = computed(() => props.columnOptions.find((op) => op.id === columnAsSourceAndFixedAxes.value.source));
+const currentSpec = computed(() => currentOption.value?.spec ? getNormalizedSpec(currentOption.value.spec) : null);
+const currentType = computed(() => currentSpec.value?.valueType);
+const currentError = computed(() => currentOption.value?.error || inconsistentSourceSelected.value);
+
+const filterTypesOptions = computed(() => [...SUPPORTED_FILTER_TYPES].filter((v) =>
+  filter.value.type === v || (currentSpec.value ? getFilterInfo(v).supportedFor(currentSpec.value) : true),
+).map((v) => ({ value: v, label: getFilterInfo(v).label })),
+);
+
+const wildcardOptions = computed(() => {
+  if (filter.value.type === 'patternFuzzyContainSubsequence') {
+    if (currentOption.value?.alphabet === 'nucleotide') {
+      return [{ label: 'N', value: 'N' }];
+    }
+    if (currentOption.value?.alphabet === 'aminoacid') {
+      return [{ label: 'X', value: 'X' }];
+    }
+    return [...new Set(filter.value.value.split(''))].sort().map((v) => ({ value: v, label: v }));
+  }
+  return [];
+});
+
+const stringMatchesError = computed(() => {
+  if (filter.value.type !== 'patternMatchesRegularExpression') {
+    return false;
+  }
+  try {
+    new RegExp(filter.value.value);
+    return false;
+  } catch {
+    return true;
+  }
+});
+
+</script>
+<template>
+  <div :class="$style.filterWrapper">
+    <!-- top element - column selector / column label - for all filter types-->
+    <div v-if="enableDnd" :class="[$style.top, $style.columnChip, {[$style.error]: currentError}]">
+      <div :class="[$style.typeIcon, {[$style.error]: currentError}]">
+        <PlIcon16 v-if="currentError" name="warning"/>
+        <PlIcon16 v-else :name="currentType === 'String' || currentType === undefined ? 'cell-type-txt' : 'cell-type-num'"/>
+      </div>
+      <div :class="$style.titleWrapper" :title="currentOption?.label ?? ''">
+        <div :class="$style.title">
+          {{ inconsistentSourceSelected ? 'Inconsistent value' : currentOption?.label ?? filter.column }}
+        </div>
+      </div>
+      <div :class="$style.closeIcon" @click="onDelete(filter.column)">
+        <PlIcon16 name="close"/>
+      </div>
+    </div>
+    <div v-else :class="$style.top" >
+      <PlDropdown
+        v-model="columnAsSourceAndFixedAxes.source"
+        :errorStatus="currentError"
+        :options="sourceOptions"
+        :style="{width: '100%'}"
+        group-position="top-left"
+        @update:model-value="changeSourceId"
+      />
+      <div :class="$style.closeButton" @click="onDelete(filter.column)">
+        <PlIcon16 name="close"/>
+      </div>
+    </div>
+
+    <div v-if="currentOption?.axesToBeFixed?.length" :class="$style.fixedAxesBlock">
+      <template v-for="value in currentOption?.axesToBeFixed" :key="value.idx">
+        <PlAutocomplete
+          v-model="columnAsSourceAndFixedAxes.axisFiltersByIndex[value.idx]"
+          :label="value.label"
+          :options-search="(str) => getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, str, value.idx)"
+          :model-search="(v) => getSuggestModelSingleFn(columnAsSourceAndFixedAxes.source, v as string, value.idx)"
+          :disabled="inconsistentSourceSelected"
+          :clearable="true"
+          @update:model-value="(v) => updateAxisFilterValue(value.idx, v)"
+        />
+      </template>
+    </div>
+
+    <!-- middle - filter type selector -  for all filter types -->
+    <div :class="filter.type === 'isNA' || filter.type === 'isNotNA' ? $style.bottom : $style.middle">
+      <PlDropdown
+        v-model="filter.type"
+        :options="filterTypesOptions"
+        :group-position="filter.type === 'isNA' || filter.type === 'isNotNA' ? 'bottom' : 'middle'"
+        @update:model-value="changeFilterType"
+      />
+    </div>
+
+    <!-- middle - for fuzzy contains filter -->
+    <template v-if="filter.type === 'patternFuzzyContainSubsequence'">
+      <div :class="$style.middle">
+        <PlTextField
+          v-model="filter.value"
+          placeholder="Substring"
+          group-position="middle"
+        />
+      </div>
+      <div :class="$style.innerSection">
+        <Slider
+          v-model="filter.maxEdits"
+          :max="5"
+          breakpoints label="Maximum number of substitutions and indels"
+        />
+        <PlToggleSwitch
+          v-model="filter.substitutionsOnly"
+          label="Substitutions only"
+        />
+      </div>
+    </template>
+
+    <!-- bottom element - individual settings for every filter type -->
+    <div :class="$style.bottom">
+      <template v-if="filter.type === 'patternEquals' || filter.type === 'patternNotEquals'" >
+        <PlAutocomplete
+          v-model="filter.value"
+          :options-search="(str) => getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, str)"
+          :model-search="(v) => getSuggestModelSingleFn(columnAsSourceAndFixedAxes.source, v as string)"
+          :disabled="inconsistentSourceSelected"
+          :clearable="true"
+          group-position="bottom"
+        />
+      </template>
+      <template v-if="filter.type === 'inSet' || filter.type === 'notInSet'" >
+        <PlAutocompleteMulti
+          v-model="filter.value"
+          :options-search="(str) => getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, str)"
+          :model-search="(v) => getSuggestModelMultiFn(columnAsSourceAndFixedAxes.source, v as string[])"
+          :disabled="inconsistentSourceSelected"
+          group-position="bottom"
+        />
+      </template>
+      <PlNumberField
+        v-if="isNumericFilter(filter)"
+        v-model="filter.x"
+        group-position="bottom"
+      />
+      <PlTextField
+        v-if="filter.type === 'patternContainSubsequence' || filter.type === 'patternNotContainSubsequence'"
+        v-model="filter.value"
+        placeholder="Substring"
+        group-position="bottom"
+      />
+      <PlTextField
+        v-if="filter.type === 'patternMatchesRegularExpression'"
+        v-model="filter.value"
+        :error="stringMatchesError ? 'Regular expression is not valid' : undefined"
+        placeholder="Regular expression"
+        group-position="bottom"
+      />
+      <PlDropdown
+        v-if="filter.type === 'patternFuzzyContainSubsequence'"
+        v-model="filter.wildcard"
+        clearable
+        placeholder="Wildcard value"
+        :options="wildcardOptions"
+        group-position="bottom"
+      />
+    </div>
+  </div>
+  <OperandButton
+    :class="$style.buttonWrapper"
+    :active="operand"
+    :disabled="isLast"
+    :on-select="onChangeOperand"
+  />
+</template>
+
+<style module>
+.filterWrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 8px;
+  width: 100%;
+  cursor: default;
+}
+
+.typeIcon {
+  display: inline-flex;
+  margin-right: 8px;
+}
+
+.typeIcon.error {
+  --icon-color: var(--txt-error);
+}
+
+.closeIcon {
+  display: inline-flex;
+  margin-left: 12px;
+  cursor: pointer;
+}
+
+.titleWrapper {
+  flex-grow: 1;
+  overflow: hidden;
+}
+.title {
+  overflow: hidden;
+  color: var(--txt-01);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.columnChip {
+  width: 100%;
+  display: flex;
+  padding: 10px 12px;
+  align-items: center;
+  border-radius: 6px;
+  border: 1px solid var(--txt-01);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+
+  &.error {
+    border-color: var(--txt-error);
+  }
+}
+
+.innerSection {
+  border: 1px solid var(--txt-01);
+  border-top: none;
+  padding: 16px 12px;
+}
+
+.closeButton {
+  border: 1px solid var(--txt-01);
+  border-top-right-radius: 6px;
+  border-left: none;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.top {
+  position: relative;
+  display: flex;
+  width: 100%;
+  z-index: 1;
+  background: #fff;
+}
+
+.fixedAxesBlock {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 12px 8px;
+  gap: 12px;
+  border-left: 1px solid var(--txt-01);
+  border-right: 1px solid var(--txt-01);
+}
+
+.fixedAxesBlock > * {
+  background: #fff;
+}
+
+.middle, .bottom {
+  position: relative;
+  margin-top: -1px;
+  background: #fff;
+}
+
+.buttonWrapper {
+  margin-bottom: 8px;
+}
+</style>

package/src/components/PlAdvancedFilter/constants.ts

@@ -0,0 +1,42 @@
+import type { PlAdvancedFilterColumnId, Filter, FilterType, SupportedFilterTypes } from './types';
+
+export const SUPPORTED_FILTER_TYPES = new Set<SupportedFilterTypes>([
+  'isNA',
+  'isNotNA',
+  'greaterThan',
+  'greaterThanOrEqual',
+  'lessThan',
+  'lessThanOrEqual',
+  'patternEquals',
+  'patternNotEquals',
+  'patternContainSubsequence',
+  'patternNotContainSubsequence',
+  'equal',
+  'notEqual',
+  'patternFuzzyContainSubsequence',
+  'patternMatchesRegularExpression',
+  'inSet',
+  'notInSet',
+]);
+
+export const DEFAULT_FILTER_TYPE: FilterType = 'isNA';
+
+const emptyCommonPart = { column: '' as PlAdvancedFilterColumnId };
+export const DEFAULT_FILTERS: Record<SupportedFilterTypes, Filter> = {
+  isNA: { type: 'isNA', ...emptyCommonPart },
+  isNotNA: { type: 'isNotNA', ...emptyCommonPart },
+  lessThan: { type: 'lessThan', x: undefined, ...emptyCommonPart },
+  lessThanOrEqual: { type: 'lessThanOrEqual', x: undefined, ...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 },
+  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 },
+  inSet: { type: 'inSet', value: [], ...emptyCommonPart },
+  notInSet: { type: 'notInSet', value: [], ...emptyCommonPart },
+};

package/src/components/PlAdvancedFilter/index.ts

@@ -0,0 +1 @@
+export { default as PlAdvancedFilter } from './PlAdvancedFilter.vue';