@platforma-sdk/ui-vue 1.79.34 → 1.80.1

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
  WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
 
-> @platforma-sdk/ui-vue@1.79.34 build /home/runner/_work/platforma/platforma/sdk/ui-vue
+> @platforma-sdk/ui-vue@1.80.1 build /home/runner/_work/platforma/platforma/sdk/ui-vue
 > ts-builder build --target browser-lib
 
 Building browser-lib project...
@@ -16,7 +16,7 @@ Building browser-lib project...
 rendering chunks...
 
 [vite:dts] Start generate declaration files...
-[vite:dts] Declaration files built in 4702ms.
+[vite:dts] Declaration files built in 4762ms.
 
 computing gzip size...
 dist/components/PlAnnotations/components/PlAnnotations.vue?vue&type=style&index=0&lang.css                       0.04 kB │ gzip:  0.06 kB
@@ -117,15 +117,15 @@ dist/plugins/Monetization/LimitCard.js
 dist/plugins/Monetization/RunStatus.js                                                                           0.34 kB │ gzip:  0.24 kB │ map:  2.30 kB
 dist/components/BlockLayout.js                                                                                   0.34 kB │ gzip:  0.24 kB │ map:  2.10 kB
 dist/plugins/Monetization/EndOfPeriod.js                                                                         0.34 kB │ gzip:  0.24 kB │ map:  1.21 kB
-dist/components/PlAdvancedFilter/FilterEditor.js                                                                 0.35 kB │ gzip:  0.24 kB │ map: 16.43 kB
+dist/components/PlAdvancedFilter/FilterEditor.js                                                                 0.35 kB │ gzip:  0.24 kB │ map: 17.62 kB
 dist/components/PlAdvancedFilter/OperandButton.js                                                                0.35 kB │ gzip:  0.24 kB │ map:  1.31 kB
 dist/components/PlAnnotations/components/FilterSidebar.js                                                        0.35 kB │ gzip:  0.24 kB │ map:  5.40 kB
 dist/components/PlAnnotations/components/PlAnnotations.js                                                        0.35 kB │ gzip:  0.24 kB │ map:  3.11 kB
-dist/components/PlAgDataTable/PlAgDataTableV2.js                                                                 0.35 kB │ gzip:  0.25 kB │ map: 21.77 kB
+dist/components/PlAgDataTable/PlAgDataTableV2.js                                                                 0.35 kB │ gzip:  0.25 kB │ map: 22.33 kB
 dist/plugins/Monetization/UserCabinetCard.js                                                                     0.35 kB │ gzip:  0.24 kB │ map:  3.00 kB
 dist/components/PlAdvancedFilter/PlAdvancedFilter.js                                                             0.36 kB │ gzip:  0.24 kB │ map: 13.36 kB
 dist/components/PlAgDataTable/PlAgOverlayNoRows.js                                                               0.36 kB │ gzip:  0.21 kB │ map:  0.74 kB
-dist/components/PlTableFilters/PlTableFiltersV2.js                                                               0.36 kB │ gzip:  0.25 kB │ map:  6.53 kB
+dist/components/PlTableFilters/PlTableFiltersV2.js                                                               0.36 kB │ gzip:  0.25 kB │ map:  6.36 kB
 dist/components/PlAgCellStatusTag/PlAgCellStatusTag.js                                                           0.36 kB │ gzip:  0.20 kB │ map:  0.74 kB
 dist/components/PlBtnExportArchive/PlBtnExportArchive.js                                                         0.36 kB │ gzip:  0.24 kB │ map:  7.17 kB
 dist/components/PlAgDataTable/PlAgDataTableSheets.js                                                             0.37 kB │ gzip:  0.25 kB │ map:  3.61 kB
@@ -141,7 +141,6 @@ dist/computedResult.js
 dist/components/PlAgDataTable/index.js                                                                           0.41 kB │ gzip:  0.23 kB │ map:  0.60 kB
 dist/plugins/Monetization/UserCabinetCard.vue_vue_type_style_index_0_lang.module.js                              0.42 kB │ gzip:  0.27 kB │ map:  0.67 kB
 dist/plugins/Monetization/RunStatus.vue_vue_type_style_index_0_lang.module.js                                    0.43 kB │ gzip:  0.27 kB │ map:  0.76 kB
-dist/internal/service_factories.js                                                                               0.43 kB │ gzip:  0.26 kB │ map:  1.14 kB
 dist/objectHash.js                                                                                               0.45 kB │ gzip:  0.33 kB │ map:  1.14 kB
 dist/composition/AgGrid/index.js                                                                                 0.46 kB │ gzip:  0.32 kB │ map:  0.79 kB
 dist/defineStore.js                                                                                              0.49 kB │ gzip:  0.32 kB │ map:  1.20 kB
@@ -150,6 +149,7 @@ dist/components/LoaderPage.js
 dist/components/PlAdvancedFilter/PlAdvancedFilter.vue_vue_type_style_index_0_lang.module.js                      0.54 kB │ gzip:  0.29 kB │ map:  0.72 kB
 dist/plugins/Monetization/useButtonTarget.js                                                                     0.54 kB │ gzip:  0.35 kB │ map:  1.10 kB
 dist/components/PlAgGridColumnManager/useGridColumns.js                                                          0.56 kB │ gzip:  0.34 kB │ map:  1.28 kB
+dist/internal/service_factories.js                                                                               0.56 kB │ gzip:  0.30 kB │ map:  1.32 kB
 dist/components/PlAgCellProgress/PlAgCellProgress.vue_vue_type_script_setup_true_lang.js                         0.58 kB │ gzip:  0.38 kB │ map:  0.68 kB
 dist/components/PlAdvancedFilter/FilterEditor.vue_vue_type_style_index_0_lang.module.js                          0.63 kB │ gzip:  0.34 kB │ map:  0.92 kB
 dist/components/PlAgCellStatusTag/PlAgCellStatusTag.vue_vue_type_script_setup_true_lang.js                       0.64 kB │ gzip:  0.42 kB │ map:  0.87 kB
@@ -171,9 +171,9 @@ dist/AgGridVue/selection.js
 dist/components/PlAgChartHistogramCell/PlAgChartHistogramCell.vue_vue_type_script_setup_true_lang.js             1.10 kB │ gzip:  0.61 kB │ map:  1.88 kB
 dist/components/PlAgCellFile/PlAgCellFile.vue_vue_type_script_setup_true_lang.js                                 1.14 kB │ gzip:  0.64 kB │ map:  2.93 kB
 dist/plugins/Monetization/RunStatus.vue_vue_type_script_setup_true_lang.js                                       1.16 kB │ gzip:  0.62 kB │ map:  3.04 kB
+dist/components/PlAgDataTable/sources/value-rendering.js                                                         1.16 kB │ gzip:  0.56 kB │ map:  3.38 kB
 dist/components/PlAgGridColumnManager/useFilteredItems.js                                                        1.18 kB │ gzip:  0.61 kB │ map:  3.48 kB
 dist/lib/util/helpers/dist/objects.js                                                                            1.20 kB │ gzip:  0.58 kB │ map:  9.83 kB
-dist/components/PlAgDataTable/sources/value-rendering.js                                                         1.21 kB │ gzip:  0.59 kB │ map:  3.54 kB
 dist/createModel.js                                                                                              1.22 kB │ gzip:  0.61 kB │ map:  3.11 kB
 dist/utils.js                                                                                                    1.26 kB │ gzip:  0.62 kB │ map:  3.40 kB
 dist/components/PlAgCsvExporter/PlAgCsvExporter.vue_vue_type_script_setup_true_lang.js                           1.28 kB │ gzip:  0.72 kB │ map:  2.05 kB
@@ -191,7 +191,7 @@ dist/plugins/Monetization/useInfo.js
 dist/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue_vue_type_script_setup_true_lang.js                     1.67 kB │ gzip:  0.84 kB │ map:  2.62 kB
 dist/components/PlAnnotations/components/PlAnnotationsModal.vue_vue_type_script_setup_true_lang.js               1.75 kB │ gzip:  0.75 kB │ map:  1.78 kB
 dist/AgGridVue/createAgGridColDef.js                                                                             1.76 kB │ gzip:  0.75 kB │ map:  9.21 kB
-dist/components/PlAdvancedFilter/utils.js                                                                        1.76 kB │ gzip:  0.81 kB │ map:  6.00 kB
+dist/components/PlAdvancedFilter/utils.js                                                                        1.76 kB │ gzip:  0.81 kB │ map:  6.02 kB
 dist/components/PlAdvancedFilter/constants.js                                                                    1.80 kB │ gzip:  0.55 kB │ map:  3.67 kB
 dist/components/PlTableFastSearch/PlTableFastSearch.vue_vue_type_script_setup_true_lang.js                       1.82 kB │ gzip:  0.91 kB │ map:  2.10 kB
 dist/components/PlAgRowNumHeader.vue_vue_type_script_setup_true_lang.js                                          1.96 kB │ gzip:  0.85 kB │ map:  3.50 kB
@@ -216,23 +216,23 @@ dist/components/PlAnnotations/components/FilterSidebar.vue_vue_type_script_setup
 dist/internal/createAppV1.js                                                                                     4.01 kB │ gzip:  1.42 kB │ map: 14.21 kB
 dist/AgGridVue/useAgGridOptions.js                                                                               4.23 kB │ gzip:  1.32 kB │ map: 14.12 kB
 dist/index.js                                                                                                    4.53 kB │ gzip:  1.37 kB │ map:  0.25 kB
-dist/components/PlTableFilters/PlTableFiltersV2.vue_vue_type_script_setup_true_lang.js                           4.63 kB │ gzip:  1.91 kB │ map:  9.02 kB
+dist/components/PlTableFilters/PlTableFiltersV2.vue_vue_type_script_setup_true_lang.js                           4.59 kB │ gzip:  1.90 kB │ map:  8.80 kB
 dist/components/PlBtnExportArchive/PlBtnExportArchive.vue_vue_type_script_setup_true_lang.js                     5.19 kB │ gzip:  2.16 kB │ map: 10.36 kB
 dist/internal/createAppV2.js                                                                                     5.26 kB │ gzip:  1.98 kB │ map: 17.78 kB
-dist/components/PlAgDataTable/sources/table-state-v2.js                                                          5.69 kB │ gzip:  1.83 kB │ map: 19.31 kB
+dist/components/PlAgDataTable/sources/table-state-v2.js                                                          5.66 kB │ gzip:  1.82 kB │ map: 19.14 kB
 dist/internal/createAppV3.js                                                                                     6.19 kB │ gzip:  2.34 kB │ map: 21.40 kB
-dist/components/PlAgDataTable/sources/table-source-v2.js                                                         6.62 kB │ gzip:  2.60 kB │ map: 22.47 kB
+dist/components/PlAgDataTable/sources/table-source-v2.js                                                         7.56 kB │ gzip:  2.88 kB │ map: 27.20 kB
 dist/components/PlAdvancedFilter/PlAdvancedFilter.vue_vue_type_script_setup_true_lang.js                         8.54 kB │ gzip:  2.59 kB │ map: 18.44 kB
-dist/components/PlAdvancedFilter/FilterEditor.vue_vue_type_script_setup_true_lang.js                            10.24 kB │ gzip:  3.04 kB │ map: 23.20 kB
-dist/components/PlAgDataTable/PlAgDataTableV2.vue_vue_type_script_setup_true_lang.js                            12.31 kB │ gzip:  3.90 kB │ map: 29.22 kB
+dist/components/PlAdvancedFilter/FilterEditor.vue_vue_type_script_setup_true_lang.js                            10.58 kB │ gzip:  3.14 kB │ map: 24.73 kB
+dist/components/PlAgDataTable/PlAgDataTableV2.vue_vue_type_script_setup_true_lang.js                            12.48 kB │ gzip:  3.95 kB │ map: 29.92 kB
 
 [PLUGIN_TIMINGS] Warning: Your build spent significant time in plugins. Here is a breakdown:
-  - sourcemaps (37%)
-  - vite:dts (22%)
-  - vite:vue (11%)
-  - vite:css-post (11%)
-  - vite:css (7%)
+  - vite:dts (28%)
+  - sourcemaps (25%)
+  - vite:vue (16%)
+  - vite:css (9%)
+  - vite:css-post (9%)
 See https://rolldown.rs/options/checks#plugintimings for more details.
 
-✓ built in 5.61s
+✓ built in 5.66s
 Build completed successfully

package/.turbo/turbo-formatter$colon$check.log

@@ -1,6 +1,6 @@
  WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
 
-> @platforma-sdk/ui-vue@1.79.34 formatter:check /home/runner/_work/platforma/platforma/sdk/ui-vue
+> @platforma-sdk/ui-vue@1.80.1 formatter:check /home/runner/_work/platforma/platforma/sdk/ui-vue
 > ts-builder formatter --check
 
 Checking formatting...
@@ -8,5 +8,5 @@ Checking formatting...
 Checking formatting...
 
 All matched files use the correct format.
-Finished in 2712ms on 137 files using 16 threads.
+Finished in 878ms on 137 files using 16 threads.
 Format check completed successfully

package/.turbo/turbo-linter$colon$check.log

@@ -1,10 +1,10 @@
  WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
 
-> @platforma-sdk/ui-vue@1.79.34 linter:check /home/runner/_work/platforma/platforma/sdk/ui-vue
+> @platforma-sdk/ui-vue@1.80.1 linter:check /home/runner/_work/platforma/platforma/sdk/ui-vue
 > ts-builder linter --check
 
 Linting project...
 ↳ oxlint --config /home/runner/_work/platforma/platforma/sdk/ui-vue/.oxlintrc.json --deny-warnings
 Found 0 warnings and 0 errors.
-Finished in 28ms on 120 files with 108 rules using 16 threads.
+Finished in 27ms on 120 files with 108 rules using 16 threads.
 Linting completed successfully

package/.turbo/turbo-types$colon$check.log

@@ -1,6 +1,6 @@
  WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
 
-> @platforma-sdk/ui-vue@1.79.34 types:check /home/runner/_work/platforma/platforma/sdk/ui-vue
+> @platforma-sdk/ui-vue@1.80.1 types:check /home/runner/_work/platforma/platforma/sdk/ui-vue
 > ts-builder type-check --target browser-lib
 
 ↳ vue-tsc.js --noEmit --project ./tsconfig.json --customConditions ,

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @platforma-sdk/ui-vue
 
+## 1.80.1
+
+### Patch Changes
+
+- Updated dependencies [d65b190]
+  - @milaboratories/pf-spec-driver@1.4.20
+  - @platforma-sdk/model@1.80.0
+
+## 1.80.0
+
+### Minor Changes
+
+- 881d6ba: ColumnLazy / ColumnsCollection API that bring new way to work with columns in model part
+
+### Patch Changes
+
+- Updated dependencies [881d6ba]
+  - @milaboratories/columns-collection-driver@0.2.0
+  - @milaboratories/pl-model-common@1.47.0
+  - @platforma-sdk/model@1.80.0
+  - @milaboratories/pf-spec-driver@1.4.19
+  - @milaboratories/uikit@2.15.15
+
 ## 1.79.34
 
 ### Patch Changes

package/dist/components/PlAdvancedFilter/FilterEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterEditor.js","names":[],"sources":["../../../src/components/PlAdvancedFilter/FilterEditor.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  PlAutocomplete,\n  PlAutocompleteMulti,\n  PlDropdown,\n  PlIcon16,\n  PlNumberField,\n  PlTextField,\n  PlToggleSwitch,\n  Slider,\n} from \"@milaboratories/uikit\";\nimport type {\n  AnchoredPColumnId,\n  AxisFilterByIdx,\n  AxisFilterValue,\n  SUniversalPColumnId,\n} from \"@platforma-sdk/model\";\nimport {\n  isFilteredPColumn,\n  parseColumnId,\n  stringifyColumnId,\n  type ListOptionBase,\n} from \"@platforma-sdk/model\";\nimport { computed } from \"vue\";\nimport type { SUPPORTED_FILTER_TYPES } from \"./constants\";\nimport { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS } from \"./constants\";\nimport OperandButton from \"./OperandButton.vue\";\nimport type { EditableFilter, Operand, PlAdvancedFilterColumnId, SourceOptionInfo } from \"./types\";\nimport {\n  getFilterInfo,\n  getNormalizedSpec,\n  isNumericFilter,\n  isPositionFilter,\n  mergeFilterForTypeChange,\n} from \"./utils\";\nimport { isNil } from \"es-toolkit\";\n\nconst props = defineProps<{\n  filter: EditableFilter;\n  isLast: boolean;\n  operand: Operand;\n  enableDnd: boolean;\n  columnOptions: SourceOptionInfo[];\n  supportedFilters: typeof SUPPORTED_FILTER_TYPES;\n  getSuggestOptions: (params: {\n    columnId: PlAdvancedFilterColumnId;\n    axisIdx?: number;\n    searchType: \"value\" | \"label\";\n    searchStr: string;\n  }) => ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;\n  onDelete: (columnId: PlAdvancedFilterColumnId) => void;\n  onUpdateFilter: (filter: EditableFilter) => void;\n  onChangeOperand: (op: Operand) => void;\n}>();\n\ntype AllKeys<U> = U extends unknown ? keyof U : never;\ntype ValueOf<U, K extends string> = U extends unknown ? (K extends keyof U ? U[K] : never) : never;\n\nfunction updateFilterProp<K extends AllKeys<EditableFilter> & string>(\n  key: K,\n  v: ValueOf<EditableFilter, K>,\n) {\n  props.onUpdateFilter({ ...props.filter, [key]: v } as EditableFilter);\n}\n\nasync function getSuggestOptionsFn(\n  id: PlAdvancedFilterColumnId,\n  type: \"value\" | \"label\",\n  str: string,\n  axisIdx?: number,\n): Promise<ListOptionBase<string>[]> {\n  return props.getSuggestOptions({\n    columnId: id,\n    axisIdx,\n    searchType: type,\n    searchStr: str,\n  }) as Promise<ListOptionBase<string>[]>;\n}\n\nasync function getMultiSuggestOptionsFn(\n  id: PlAdvancedFilterColumnId,\n  type: \"value\" | \"label\",\n  str: string | string[],\n  axisIdx?: number,\n): Promise<ListOptionBase<string>[]> {\n  if (type === \"label\" && typeof str === \"string\") {\n    return getSuggestOptionsFn(id, type, str, axisIdx);\n  }\n  if (type === \"value\" && Array.isArray(str)) {\n    const results = await Promise.all(str.map((s) => getSuggestOptionsFn(id, type, s, axisIdx)));\n    return results.map((x) => x[0]);\n  }\n  throw new Error(\"Invalid arguments combination\");\n}\n\nfunction changeFilterType(newType?: EditableFilter[\"type\"]) {\n  if (isNil(newType)) return;\n  props.onUpdateFilter(mergeFilterForTypeChange(props.filter, newType));\n}\n\nfunction changeSourceId(newSourceId?: PlAdvancedFilterColumnId) {\n  if (!newSourceId) {\n    return;\n  }\n  const newSourceInfo = props.columnOptions.find((v) => v.id === getSourceId(newSourceId));\n  if (!newSourceInfo) {\n    return;\n  }\n  const filterInfo = getFilterInfo(props.filter.type);\n  const newSourceSpec = getNormalizedSpec(newSourceInfo?.spec);\n  if (filterInfo.supportedFor(newSourceSpec)) {\n    props.onUpdateFilter({ ...props.filter, column: newSourceId });\n  } else {\n    props.onUpdateFilter({\n      ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],\n      column: newSourceId,\n    });\n  }\n}\n\nconst inconsistentSourceSelected = computed(() => {\n  const selectedOption = props.columnOptions.find(\n    (op) => op.id === getSourceId(props.filter.column),\n  );\n  return selectedOption === undefined;\n});\nconst sourceOptions = computed(() => {\n  const options = props.columnOptions.map((v) => ({ value: v.id, label: v.label ?? v }));\n  if (inconsistentSourceSelected.value) {\n    options.unshift({ value: props.filter.column, label: \"Inconsistent value\" });\n  }\n  return options;\n});\n\nfunction getSourceId(column: PlAdvancedFilterColumnId): PlAdvancedFilterColumnId {\n  try {\n    const parsedColumnId = parseColumnId(column as SUniversalPColumnId);\n    if (isFilteredPColumn(parsedColumnId)) {\n      return stringifyColumnId(parsedColumnId.source);\n    } else {\n      return column;\n    }\n  } catch {\n    return column;\n  }\n}\n\n// similar to FilteredPColumnId but source is stringified and axis filters can be undefined\ntype ColumnAsSourceAndFixedAxes = {\n  source: PlAdvancedFilterColumnId;\n  axisFiltersByIndex: Record<number, AxisFilterValue | undefined>;\n};\nfunction getColumnAsSourceAndFixedAxes(\n  column: PlAdvancedFilterColumnId,\n): ColumnAsSourceAndFixedAxes {\n  const sourceId = getSourceId(column);\n  const option = props.columnOptions.find((op) => op.id === sourceId);\n  const axesToBeFixed = (option?.axesToBeFixed ?? []).reduce(\n    (res, item) => {\n      res[item.idx] = undefined;\n      return res;\n    },\n    {} as Record<number, AxisFilterValue | undefined>,\n  );\n  try {\n    const parsedColumnId = parseColumnId(column as SUniversalPColumnId);\n    if (isFilteredPColumn(parsedColumnId)) {\n      return {\n        source: sourceId,\n        axisFiltersByIndex: parsedColumnId.axisFilters.reduce((res, item) => {\n          res[item[0]] = item[1];\n          return res;\n        }, axesToBeFixed),\n      };\n    }\n  } catch {\n    return { source: column, axisFiltersByIndex: axesToBeFixed };\n  }\n  return { source: column, axisFiltersByIndex: axesToBeFixed };\n}\n\nfunction stringifyColumn(value: ColumnAsSourceAndFixedAxes): PlAdvancedFilterColumnId {\n  if (Object.keys(value.axisFiltersByIndex).length === 0) {\n    return value.source;\n  }\n  return stringifyColumnId({\n    source: parseColumnId(value.source as SUniversalPColumnId) as AnchoredPColumnId,\n    axisFilters: Object.entries(value.axisFiltersByIndex).map(\n      ([idx, value]) => [Number(idx), value] as AxisFilterByIdx,\n    ),\n  });\n}\n\nconst columnAsSourceAndFixedAxes = computed({\n  get: () => {\n    return getColumnAsSourceAndFixedAxes(props.filter.column);\n  },\n  set: (value) => {\n    props.onUpdateFilter({ ...props.filter, column: stringifyColumn(value) });\n  },\n});\nfunction updateAxisFilterValue(idx: number, value: AxisFilterValue | undefined) {\n  columnAsSourceAndFixedAxes.value = {\n    ...columnAsSourceAndFixedAxes.value,\n    axisFiltersByIndex: { ...columnAsSourceAndFixedAxes.value.axisFiltersByIndex, [idx]: value },\n  };\n}\n\nconst currentOption = computed(() =>\n  props.columnOptions.find((op) => op.id === columnAsSourceAndFixedAxes.value.source),\n);\nconst currentSpec = computed(() =>\n  currentOption.value?.spec ? getNormalizedSpec(currentOption.value.spec) : null,\n);\nconst currentType = computed(() => currentSpec.value?.valueType);\nconst currentError = computed(\n  () => Boolean(currentOption.value?.error) || inconsistentSourceSelected.value,\n);\n\nconst filterTypesOptions = computed(() =>\n  props.supportedFilters\n    .filter(\n      (v) =>\n        props.filter.type === v ||\n        (currentSpec.value ? getFilterInfo(v).supportedFor(currentSpec.value) : true),\n    )\n    .map((v) => ({ value: v, label: getFilterInfo(v).label })),\n);\n\nconst wildcardOptions = computed(() => {\n  if (props.filter.type !== \"patternFuzzyContainSubsequence\") {\n    return [];\n  }\n  if (currentOption.value?.alphabet === \"nucleotide\") {\n    return [{ label: \"N\", value: \"N\" }];\n  }\n  if (currentOption.value?.alphabet === \"aminoacid\") {\n    return [{ label: \"X\", value: \"X\" }];\n  }\n  return [...new Set(props.filter.value.split(\"\"))].sort().map((v) => ({ value: v, label: v }));\n});\n\nconst stringMatchesError = computed(() => {\n  if (props.filter.type !== \"patternMatchesRegularExpression\") {\n    return false;\n  }\n  try {\n    new RegExp(props.filter.value);\n    return false;\n  } catch {\n    return true;\n  }\n});\n</script>\n<template>\n  <div :class=\"$style.filterWrapper\">\n    <!-- top element - column selector / column label - for all filter types-->\n    <div\n      v-if=\"enableDnd\"\n      :class=\"[$style.top, $style.columnChip, { [$style.error]: currentError }]\"\n    >\n      <div :class=\"[$style.typeIcon, { [$style.error]: currentError }]\">\n        <PlIcon16 v-if=\"currentError\" name=\"warning\" />\n        <PlIcon16\n          v-else\n          :name=\"\n            currentType === 'String' || currentType === undefined\n              ? 'cell-type-txt'\n              : 'cell-type-num'\n          \"\n        />\n      </div>\n      <div :class=\"$style.titleWrapper\" :title=\"currentOption?.label ?? ''\">\n        <div :class=\"$style.title\">\n          {{\n            inconsistentSourceSelected\n              ? \"Inconsistent value\"\n              : (currentOption?.label ?? props.filter.column)\n          }}\n        </div>\n      </div>\n      <div :class=\"$style.closeIcon\" @click=\"onDelete(props.filter.column)\">\n        <PlIcon16 name=\"close\" />\n      </div>\n    </div>\n    <div v-else :class=\"$style.top\">\n      <PlDropdown\n        :model-value=\"columnAsSourceAndFixedAxes.source\"\n        :errorStatus=\"currentError\"\n        :options=\"sourceOptions\"\n        :style=\"{ width: '100%' }\"\n        group-position=\"top-left\"\n        @update:model-value=\"changeSourceId\"\n      />\n      <div :class=\"$style.closeButton\" @click=\"onDelete(props.filter.column)\">\n        <PlIcon16 name=\"close\" />\n      </div>\n    </div>\n\n    <div v-if=\"currentOption?.axesToBeFixed?.length\" :class=\"$style.fixedAxesBlock\">\n      <template v-for=\"value in currentOption?.axesToBeFixed\" :key=\"value.idx\">\n        <PlAutocomplete\n          :model-value=\"columnAsSourceAndFixedAxes.axisFiltersByIndex[value.idx]\"\n          :label=\"value.label\"\n          :options-search=\"\n            (str, type) =>\n              getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str, value.idx)\n          \"\n          :disabled=\"inconsistentSourceSelected\"\n          :clearable=\"true\"\n          @update:model-value=\"(v) => updateAxisFilterValue(value.idx, v)\"\n        />\n      </template>\n    </div>\n\n    <!-- middle - filter type selector -  for all filter types -->\n    <div\n      :class=\"\n        props.filter.type === 'isNA' || props.filter.type === 'isNotNA'\n          ? $style.bottom\n          : $style.middle\n      \"\n    >\n      <PlDropdown\n        :model-value=\"props.filter.type\"\n        :options=\"filterTypesOptions\"\n        :group-position=\"\n          props.filter.type === 'isNA' || props.filter.type === 'isNotNA' ? 'bottom' : 'middle'\n        \"\n        @update:model-value=\"changeFilterType\"\n      />\n    </div>\n\n    <!-- middle - for fuzzy contains filter -->\n    <template v-if=\"props.filter.type === 'patternFuzzyContainSubsequence'\">\n      <div :class=\"$style.middle\">\n        <PlTextField\n          :model-value=\"props.filter.value\"\n          placeholder=\"Substring\"\n          group-position=\"middle\"\n          @update:model-value=\"(v) => updateFilterProp('value', v)\"\n        />\n      </div>\n      <div :class=\"$style.innerSection\">\n        <Slider\n          :model-value=\"props.filter.maxEdits\"\n          :max=\"5\"\n          breakpoints\n          label=\"Maximum number of substitutions and indels\"\n          @update:model-value=\"(v) => updateFilterProp('maxEdits', v)\"\n        />\n        <PlToggleSwitch\n          :model-value=\"props.filter.substitutionsOnly\"\n          label=\"Substitutions only\"\n          @update:model-value=\"(v) => updateFilterProp('substitutionsOnly', v)\"\n        />\n      </div>\n    </template>\n\n    <!-- bottom element - individual settings for every filter type -->\n    <div :class=\"$style.bottom\">\n      <PlAutocomplete\n        v-if=\"props.filter.type === 'patternEquals' || props.filter.type === 'patternNotEquals'\"\n        :model-value=\"props.filter.value\"\n        :options-search=\"\n          (str, type) => getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n        \"\n        :clearable=\"true\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('value', v)\"\n      />\n      <PlAutocompleteMulti\n        v-if=\"props.filter.type === 'inSet' || props.filter.type === 'notInSet'\"\n        :model-value=\"props.filter.value\"\n        :options-search=\"\n          (str, type) => getMultiSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n        \"\n        :disabled=\"inconsistentSourceSelected\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('value', v)\"\n      />\n      <PlNumberField\n        v-if=\"isNumericFilter(props.filter)\"\n        :model-value=\"props.filter.x\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('x', v)\"\n      />\n      <PlNumberField\n        v-if=\"isPositionFilter(props.filter)\"\n        :model-value=\"props.filter.n\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('n', v)\"\n      />\n      <PlTextField\n        v-if=\"\n          props.filter.type === 'patternContainSubsequence' ||\n          props.filter.type === 'patternNotContainSubsequence'\n        \"\n        :model-value=\"props.filter.value\"\n        placeholder=\"Substring\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('value', v)\"\n      />\n      <PlTextField\n        v-if=\"props.filter.type === 'patternMatchesRegularExpression'\"\n        :model-value=\"props.filter.value\"\n        :error=\"stringMatchesError ? 'Regular expression is not valid' : undefined\"\n        placeholder=\"Regular expression\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('value', v)\"\n      />\n      <PlDropdown\n        v-if=\"props.filter.type === 'patternFuzzyContainSubsequence'\"\n        :model-value=\"props.filter.wildcard\"\n        clearable\n        placeholder=\"Wildcard value\"\n        :options=\"wildcardOptions\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('wildcard', v)\"\n      />\n    </div>\n  </div>\n  <OperandButton :active=\"operand\" :disabled=\"isLast\" @select=\"onChangeOperand\" />\n</template>\n\n<style module>\n.filterWrapper {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  cursor: default;\n}\n\n.typeIcon {\n  display: inline-flex;\n  margin-right: 8px;\n}\n\n.typeIcon.error {\n  --icon-color: var(--txt-error);\n}\n\n.closeIcon {\n  display: inline-flex;\n  margin-left: 12px;\n  cursor: pointer;\n}\n\n.titleWrapper {\n  flex-grow: 1;\n  overflow: hidden;\n}\n.title {\n  overflow: hidden;\n  color: var(--txt-01);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n}\n\n.columnChip {\n  width: 100%;\n  display: flex;\n  padding: 10px 12px;\n  align-items: center;\n  border-radius: 6px;\n  border: 1px solid var(--txt-01);\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n\n  &.error {\n    border-color: var(--txt-error);\n  }\n}\n\n.innerSection {\n  border: 1px solid var(--txt-01);\n  border-top: none;\n  padding: 16px 12px;\n}\n\n.closeButton {\n  border: 1px solid var(--txt-01);\n  border-top-right-radius: 6px;\n  border-left: none;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  cursor: pointer;\n}\n\n.top {\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 1;\n  background: #fff;\n}\n\n.fixedAxesBlock {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: 12px 8px;\n  gap: 12px;\n  border-left: 1px solid var(--txt-01);\n  border-right: 1px solid var(--txt-01);\n}\n\n.fixedAxesBlock > * {\n  background: #fff;\n}\n\n.middle,\n.bottom {\n  position: relative;\n  margin-top: -1px;\n  background: #fff;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"FilterEditor.js","names":[],"sources":["../../../src/components/PlAdvancedFilter/FilterEditor.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  PlAutocomplete,\n  PlAutocompleteMulti,\n  PlDropdown,\n  PlIcon16,\n  PlNumberField,\n  PlTextField,\n  PlToggleSwitch,\n  Slider,\n} from \"@milaboratories/uikit\";\nimport type {\n  AnchoredPColumnId,\n  AxisFilterByIdx,\n  AxisFilterValue,\n  PTableColumnId,\n  SUniversalPColumnId,\n} from \"@platforma-sdk/model\";\nimport {\n  canonicalizeJson,\n  isFilteredPColumn,\n  parseColumnId,\n  stringifyColumnId,\n  type ListOptionBase,\n} from \"@platforma-sdk/model\";\nimport { computed } from \"vue\";\nimport type { SUPPORTED_FILTER_TYPES } from \"./constants\";\nimport { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS } from \"./constants\";\nimport OperandButton from \"./OperandButton.vue\";\nimport type { EditableFilter, Operand, PlAdvancedFilterColumnId, SourceOptionInfo } from \"./types\";\nimport {\n  getFilterInfo,\n  getNormalizedSpec,\n  isNumericFilter,\n  isPositionFilter,\n  mergeFilterForTypeChange,\n} from \"./utils\";\nimport { isNil } from \"es-toolkit\";\n\nconst props = defineProps<{\n  filter: EditableFilter;\n  isLast: boolean;\n  operand: Operand;\n  enableDnd: boolean;\n  columnOptions: SourceOptionInfo[];\n  supportedFilters: typeof SUPPORTED_FILTER_TYPES;\n  getSuggestOptions: (params: {\n    columnId: PlAdvancedFilterColumnId;\n    axisIdx?: number;\n    searchType: \"value\" | \"label\";\n    searchStr: string;\n  }) => ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;\n  onDelete: (columnId: PlAdvancedFilterColumnId) => void;\n  onUpdateFilter: (filter: EditableFilter) => void;\n  onChangeOperand: (op: Operand) => void;\n}>();\n\ntype AllKeys<U> = U extends unknown ? keyof U : never;\ntype ValueOf<U, K extends string> = U extends unknown ? (K extends keyof U ? U[K] : never) : never;\n\nfunction updateFilterProp<K extends AllKeys<EditableFilter> & string>(\n  key: K,\n  v: ValueOf<EditableFilter, K>,\n) {\n  props.onUpdateFilter({ ...props.filter, [key]: v } as EditableFilter);\n}\n\nasync function getSuggestOptionsFn(\n  id: PlAdvancedFilterColumnId,\n  type: \"value\" | \"label\",\n  str: string,\n  axisIdx?: number,\n): Promise<ListOptionBase<string>[]> {\n  return props.getSuggestOptions({\n    columnId: id,\n    axisIdx,\n    searchType: type,\n    searchStr: str,\n  }) as Promise<ListOptionBase<string>[]>;\n}\n\nasync function getMultiSuggestOptionsFn(\n  id: PlAdvancedFilterColumnId,\n  type: \"value\" | \"label\",\n  str: string | string[],\n  axisIdx?: number,\n): Promise<ListOptionBase<string>[]> {\n  if (type === \"label\" && typeof str === \"string\") {\n    return getSuggestOptionsFn(id, type, str, axisIdx);\n  }\n  if (type === \"value\" && Array.isArray(str)) {\n    const results = await Promise.all(str.map((s) => getSuggestOptionsFn(id, type, s, axisIdx)));\n    return results.map((x) => x[0]);\n  }\n  throw new Error(\"Invalid arguments combination\");\n}\n\nfunction changeFilterType(newType?: EditableFilter[\"type\"]) {\n  if (isNil(newType)) return;\n  props.onUpdateFilter(mergeFilterForTypeChange(props.filter, newType));\n}\n\nfunction changeSourceId(newSourceId?: PlAdvancedFilterColumnId) {\n  if (!newSourceId) {\n    return;\n  }\n  const newSourceInfo = props.columnOptions.find((v) =>\n    columnIdEquals(v.id, getSourceId(newSourceId)),\n  );\n  if (!newSourceInfo) {\n    return;\n  }\n  const filterInfo = getFilterInfo(props.filter.type);\n  const newSourceSpec = getNormalizedSpec(newSourceInfo?.spec);\n  if (filterInfo.supportedFor(newSourceSpec)) {\n    props.onUpdateFilter({ ...props.filter, column: newSourceId });\n  } else {\n    props.onUpdateFilter({\n      ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],\n      column: newSourceId,\n    });\n  }\n}\n\nconst inconsistentSourceSelected = computed(() => {\n  const selectedOption = props.columnOptions.find((op) =>\n    columnIdEquals(op.id, getSourceId(props.filter.column)),\n  );\n  return selectedOption === undefined;\n});\nconst sourceOptions = computed(() => {\n  const options = props.columnOptions.map((v) => ({ value: v.id, label: v.label ?? v }));\n  if (inconsistentSourceSelected.value) {\n    options.unshift({ value: props.filter.column, label: \"Inconsistent value\" });\n  }\n  return options;\n});\n\nfunction isPTableColumnIdObject(c: PlAdvancedFilterColumnId): c is PTableColumnId {\n  return typeof c === \"object\" && c !== null;\n}\n\nfunction getSourceId(column: PlAdvancedFilterColumnId): PlAdvancedFilterColumnId {\n  // PTableColumnId object form: no axisFilters embedded, return as-is.\n  if (isPTableColumnIdObject(column)) return column;\n  try {\n    const parsedColumnId = parseColumnId(column as SUniversalPColumnId);\n    if (isFilteredPColumn(parsedColumnId)) {\n      return stringifyColumnId(parsedColumnId.source);\n    } else {\n      return column;\n    }\n  } catch {\n    return column;\n  }\n}\n\n// similar to FilteredPColumnId but source is stringified and axis filters can be undefined\ntype ColumnAsSourceAndFixedAxes = {\n  source: PlAdvancedFilterColumnId;\n  axisFiltersByIndex: Record<number, AxisFilterValue | undefined>;\n};\nfunction getColumnAsSourceAndFixedAxes(\n  column: PlAdvancedFilterColumnId,\n): ColumnAsSourceAndFixedAxes {\n  const sourceId = getSourceId(column);\n  const option = props.columnOptions.find((op) => columnIdEquals(op.id, sourceId));\n  const axesToBeFixed = (option?.axesToBeFixed ?? []).reduce(\n    (res, item) => {\n      res[item.idx] = undefined;\n      return res;\n    },\n    {} as Record<number, AxisFilterValue | undefined>,\n  );\n  // PTableColumnId object form has no axis filters baked in.\n  if (isPTableColumnIdObject(column)) {\n    return { source: column, axisFiltersByIndex: axesToBeFixed };\n  }\n  try {\n    const parsedColumnId = parseColumnId(column as SUniversalPColumnId);\n    if (isFilteredPColumn(parsedColumnId)) {\n      return {\n        source: sourceId,\n        axisFiltersByIndex: (parsedColumnId.axisFilters as AxisFilterByIdx[]).reduce(\n          (res, item) => {\n            res[item[0]] = item[1];\n            return res;\n          },\n          axesToBeFixed,\n        ),\n      };\n    }\n  } catch {\n    return { source: column, axisFiltersByIndex: axesToBeFixed };\n  }\n  return { source: column, axisFiltersByIndex: axesToBeFixed };\n}\n\n/** Identity comparison for PlAdvancedFilterColumnId values — handles both string\n *  and object (PTableColumnId) variants. */\nfunction columnIdEquals(a: PlAdvancedFilterColumnId, b: PlAdvancedFilterColumnId): boolean {\n  if (a === b) return true;\n  if (typeof a === \"object\" && typeof b === \"object\" && a !== null && b !== null) {\n    return canonicalizeJson(a) === canonicalizeJson(b);\n  }\n  return false;\n}\n\nfunction stringifyColumn(value: ColumnAsSourceAndFixedAxes): PlAdvancedFilterColumnId {\n  if (Object.keys(value.axisFiltersByIndex).length === 0) {\n    return value.source;\n  }\n  // PTableColumnId object form can't carry axisFilters — return as-is.\n  if (isPTableColumnIdObject(value.source)) return value.source;\n  return stringifyColumnId({\n    source: parseColumnId(value.source as SUniversalPColumnId) as unknown as AnchoredPColumnId,\n    axisFilters: Object.entries(value.axisFiltersByIndex).map(\n      ([idx, value]) => [Number(idx), value] as AxisFilterByIdx,\n    ),\n  });\n}\n\nconst columnAsSourceAndFixedAxes = computed({\n  get: () => {\n    return getColumnAsSourceAndFixedAxes(props.filter.column);\n  },\n  set: (value) => {\n    props.onUpdateFilter({ ...props.filter, column: stringifyColumn(value) });\n  },\n});\nfunction updateAxisFilterValue(idx: number, value: AxisFilterValue | undefined) {\n  columnAsSourceAndFixedAxes.value = {\n    ...columnAsSourceAndFixedAxes.value,\n    axisFiltersByIndex: { ...columnAsSourceAndFixedAxes.value.axisFiltersByIndex, [idx]: value },\n  };\n}\n\nconst currentOption = computed(() =>\n  props.columnOptions.find((op) => columnIdEquals(op.id, columnAsSourceAndFixedAxes.value.source)),\n);\nconst currentSpec = computed(() =>\n  currentOption.value?.spec ? getNormalizedSpec(currentOption.value.spec) : null,\n);\nconst currentType = computed(() => currentSpec.value?.valueType);\nconst currentError = computed(\n  () => Boolean(currentOption.value?.error) || inconsistentSourceSelected.value,\n);\n\nconst filterTypesOptions = computed(() =>\n  props.supportedFilters\n    .filter(\n      (v) =>\n        props.filter.type === v ||\n        (currentSpec.value ? getFilterInfo(v).supportedFor(currentSpec.value) : true),\n    )\n    .map((v) => ({ value: v, label: getFilterInfo(v).label })),\n);\n\nconst wildcardOptions = computed(() => {\n  if (props.filter.type !== \"patternFuzzyContainSubsequence\") {\n    return [];\n  }\n  if (currentOption.value?.alphabet === \"nucleotide\") {\n    return [{ label: \"N\", value: \"N\" }];\n  }\n  if (currentOption.value?.alphabet === \"aminoacid\") {\n    return [{ label: \"X\", value: \"X\" }];\n  }\n  return [...new Set(props.filter.value.split(\"\"))].sort().map((v) => ({ value: v, label: v }));\n});\n\nconst stringMatchesError = computed(() => {\n  if (props.filter.type !== \"patternMatchesRegularExpression\") {\n    return false;\n  }\n  try {\n    new RegExp(props.filter.value);\n    return false;\n  } catch {\n    return true;\n  }\n});\n</script>\n<template>\n  <div :class=\"$style.filterWrapper\">\n    <!-- top element - column selector / column label - for all filter types-->\n    <div\n      v-if=\"enableDnd\"\n      :class=\"[$style.top, $style.columnChip, { [$style.error]: currentError }]\"\n    >\n      <div :class=\"[$style.typeIcon, { [$style.error]: currentError }]\">\n        <PlIcon16 v-if=\"currentError\" name=\"warning\" />\n        <PlIcon16\n          v-else\n          :name=\"\n            currentType === 'String' || currentType === undefined\n              ? 'cell-type-txt'\n              : 'cell-type-num'\n          \"\n        />\n      </div>\n      <div :class=\"$style.titleWrapper\" :title=\"currentOption?.label ?? ''\">\n        <div :class=\"$style.title\">\n          {{\n            inconsistentSourceSelected\n              ? \"Inconsistent value\"\n              : (currentOption?.label ?? props.filter.column)\n          }}\n        </div>\n      </div>\n      <div :class=\"$style.closeIcon\" @click=\"onDelete(props.filter.column)\">\n        <PlIcon16 name=\"close\" />\n      </div>\n    </div>\n    <div v-else :class=\"$style.top\">\n      <PlDropdown\n        :model-value=\"columnAsSourceAndFixedAxes.source\"\n        :errorStatus=\"currentError\"\n        :options=\"sourceOptions\"\n        :style=\"{ width: '100%' }\"\n        group-position=\"top-left\"\n        @update:model-value=\"changeSourceId\"\n      />\n      <div :class=\"$style.closeButton\" @click=\"onDelete(props.filter.column)\">\n        <PlIcon16 name=\"close\" />\n      </div>\n    </div>\n\n    <div v-if=\"currentOption?.axesToBeFixed?.length\" :class=\"$style.fixedAxesBlock\">\n      <template v-for=\"value in currentOption?.axesToBeFixed\" :key=\"value.idx\">\n        <PlAutocomplete\n          :model-value=\"columnAsSourceAndFixedAxes.axisFiltersByIndex[value.idx]\"\n          :label=\"value.label\"\n          :options-search=\"\n            (str, type) =>\n              getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str, value.idx)\n          \"\n          :disabled=\"inconsistentSourceSelected\"\n          :clearable=\"true\"\n          @update:model-value=\"(v) => updateAxisFilterValue(value.idx, v)\"\n        />\n      </template>\n    </div>\n\n    <!-- middle - filter type selector -  for all filter types -->\n    <div\n      :class=\"\n        props.filter.type === 'isNA' || props.filter.type === 'isNotNA'\n          ? $style.bottom\n          : $style.middle\n      \"\n    >\n      <PlDropdown\n        :model-value=\"props.filter.type\"\n        :options=\"filterTypesOptions\"\n        :group-position=\"\n          props.filter.type === 'isNA' || props.filter.type === 'isNotNA' ? 'bottom' : 'middle'\n        \"\n        @update:model-value=\"changeFilterType\"\n      />\n    </div>\n\n    <!-- middle - for fuzzy contains filter -->\n    <template v-if=\"props.filter.type === 'patternFuzzyContainSubsequence'\">\n      <div :class=\"$style.middle\">\n        <PlTextField\n          :model-value=\"props.filter.value\"\n          placeholder=\"Substring\"\n          group-position=\"middle\"\n          @update:model-value=\"(v) => updateFilterProp('value', v)\"\n        />\n      </div>\n      <div :class=\"$style.innerSection\">\n        <Slider\n          :model-value=\"props.filter.maxEdits\"\n          :max=\"5\"\n          breakpoints\n          label=\"Maximum number of substitutions and indels\"\n          @update:model-value=\"(v) => updateFilterProp('maxEdits', v)\"\n        />\n        <PlToggleSwitch\n          :model-value=\"props.filter.substitutionsOnly\"\n          label=\"Substitutions only\"\n          @update:model-value=\"(v) => updateFilterProp('substitutionsOnly', v)\"\n        />\n      </div>\n    </template>\n\n    <!-- bottom element - individual settings for every filter type -->\n    <div :class=\"$style.bottom\">\n      <PlAutocomplete\n        v-if=\"props.filter.type === 'patternEquals' || props.filter.type === 'patternNotEquals'\"\n        :model-value=\"props.filter.value\"\n        :options-search=\"\n          (str, type) => getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n        \"\n        :clearable=\"true\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('value', v)\"\n      />\n      <PlAutocompleteMulti\n        v-if=\"props.filter.type === 'inSet' || props.filter.type === 'notInSet'\"\n        :model-value=\"props.filter.value\"\n        :options-search=\"\n          (str, type) => getMultiSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n        \"\n        :disabled=\"inconsistentSourceSelected\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('value', v)\"\n      />\n      <PlNumberField\n        v-if=\"isNumericFilter(props.filter)\"\n        :model-value=\"props.filter.x\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('x', v)\"\n      />\n      <PlNumberField\n        v-if=\"isPositionFilter(props.filter)\"\n        :model-value=\"props.filter.n\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('n', v)\"\n      />\n      <PlTextField\n        v-if=\"\n          props.filter.type === 'patternContainSubsequence' ||\n          props.filter.type === 'patternNotContainSubsequence'\n        \"\n        :model-value=\"props.filter.value\"\n        placeholder=\"Substring\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('value', v)\"\n      />\n      <PlTextField\n        v-if=\"props.filter.type === 'patternMatchesRegularExpression'\"\n        :model-value=\"props.filter.value\"\n        :error=\"stringMatchesError ? 'Regular expression is not valid' : undefined\"\n        placeholder=\"Regular expression\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('value', v)\"\n      />\n      <PlDropdown\n        v-if=\"props.filter.type === 'patternFuzzyContainSubsequence'\"\n        :model-value=\"props.filter.wildcard\"\n        clearable\n        placeholder=\"Wildcard value\"\n        :options=\"wildcardOptions\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('wildcard', v)\"\n      />\n    </div>\n  </div>\n  <OperandButton :active=\"operand\" :disabled=\"isLast\" @select=\"onChangeOperand\" />\n</template>\n\n<style module>\n.filterWrapper {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  cursor: default;\n}\n\n.typeIcon {\n  display: inline-flex;\n  margin-right: 8px;\n}\n\n.typeIcon.error {\n  --icon-color: var(--txt-error);\n}\n\n.closeIcon {\n  display: inline-flex;\n  margin-left: 12px;\n  cursor: pointer;\n}\n\n.titleWrapper {\n  flex-grow: 1;\n  overflow: hidden;\n}\n.title {\n  overflow: hidden;\n  color: var(--txt-01);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n}\n\n.columnChip {\n  width: 100%;\n  display: flex;\n  padding: 10px 12px;\n  align-items: center;\n  border-radius: 6px;\n  border: 1px solid var(--txt-01);\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n\n  &.error {\n    border-color: var(--txt-error);\n  }\n}\n\n.innerSection {\n  border: 1px solid var(--txt-01);\n  border-top: none;\n  padding: 16px 12px;\n}\n\n.closeButton {\n  border: 1px solid var(--txt-01);\n  border-top-right-radius: 6px;\n  border-left: none;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  cursor: pointer;\n}\n\n.top {\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 1;\n  background: #fff;\n}\n\n.fixedAxesBlock {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: 12px 8px;\n  gap: 12px;\n  border-left: 1px solid var(--txt-01);\n  border-right: 1px solid var(--txt-01);\n}\n\n.fixedAxesBlock > * {\n  background: #fff;\n}\n\n.middle,\n.bottom {\n  position: relative;\n  margin-top: -1px;\n  background: #fff;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlAdvancedFilter/FilterEditor.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterEditor.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlAdvancedFilter/FilterEditor.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  PlAutocomplete,\n  PlAutocompleteMulti,\n  PlDropdown,\n  PlIcon16,\n  PlNumberField,\n  PlTextField,\n  PlToggleSwitch,\n  Slider,\n} from \"@milaboratories/uikit\";\nimport type {\n  AnchoredPColumnId,\n  AxisFilterByIdx,\n  AxisFilterValue,\n  SUniversalPColumnId,\n} from \"@platforma-sdk/model\";\nimport {\n  isFilteredPColumn,\n  parseColumnId,\n  stringifyColumnId,\n  type ListOptionBase,\n} from \"@platforma-sdk/model\";\nimport { computed } from \"vue\";\nimport type { SUPPORTED_FILTER_TYPES } from \"./constants\";\nimport { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS } from \"./constants\";\nimport OperandButton from \"./OperandButton.vue\";\nimport type { EditableFilter, Operand, PlAdvancedFilterColumnId, SourceOptionInfo } from \"./types\";\nimport {\n  getFilterInfo,\n  getNormalizedSpec,\n  isNumericFilter,\n  isPositionFilter,\n  mergeFilterForTypeChange,\n} from \"./utils\";\nimport { isNil } from \"es-toolkit\";\n\nconst props = defineProps<{\n  filter: EditableFilter;\n  isLast: boolean;\n  operand: Operand;\n  enableDnd: boolean;\n  columnOptions: SourceOptionInfo[];\n  supportedFilters: typeof SUPPORTED_FILTER_TYPES;\n  getSuggestOptions: (params: {\n    columnId: PlAdvancedFilterColumnId;\n    axisIdx?: number;\n    searchType: \"value\" | \"label\";\n    searchStr: string;\n  }) => ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;\n  onDelete: (columnId: PlAdvancedFilterColumnId) => void;\n  onUpdateFilter: (filter: EditableFilter) => void;\n  onChangeOperand: (op: Operand) => void;\n}>();\n\ntype AllKeys<U> = U extends unknown ? keyof U : never;\ntype ValueOf<U, K extends string> = U extends unknown ? (K extends keyof U ? U[K] : never) : never;\n\nfunction updateFilterProp<K extends AllKeys<EditableFilter> & string>(\n  key: K,\n  v: ValueOf<EditableFilter, K>,\n) {\n  props.onUpdateFilter({ ...props.filter, [key]: v } as EditableFilter);\n}\n\nasync function getSuggestOptionsFn(\n  id: PlAdvancedFilterColumnId,\n  type: \"value\" | \"label\",\n  str: string,\n  axisIdx?: number,\n): Promise<ListOptionBase<string>[]> {\n  return props.getSuggestOptions({\n    columnId: id,\n    axisIdx,\n    searchType: type,\n    searchStr: str,\n  }) as Promise<ListOptionBase<string>[]>;\n}\n\nasync function getMultiSuggestOptionsFn(\n  id: PlAdvancedFilterColumnId,\n  type: \"value\" | \"label\",\n  str: string | string[],\n  axisIdx?: number,\n): Promise<ListOptionBase<string>[]> {\n  if (type === \"label\" && typeof str === \"string\") {\n    return getSuggestOptionsFn(id, type, str, axisIdx);\n  }\n  if (type === \"value\" && Array.isArray(str)) {\n    const results = await Promise.all(str.map((s) => getSuggestOptionsFn(id, type, s, axisIdx)));\n    return results.map((x) => x[0]);\n  }\n  throw new Error(\"Invalid arguments combination\");\n}\n\nfunction changeFilterType(newType?: EditableFilter[\"type\"]) {\n  if (isNil(newType)) return;\n  props.onUpdateFilter(mergeFilterForTypeChange(props.filter, newType));\n}\n\nfunction changeSourceId(newSourceId?: PlAdvancedFilterColumnId) {\n  if (!newSourceId) {\n    return;\n  }\n  const newSourceInfo = props.columnOptions.find((v) => v.id === getSourceId(newSourceId));\n  if (!newSourceInfo) {\n    return;\n  }\n  const filterInfo = getFilterInfo(props.filter.type);\n  const newSourceSpec = getNormalizedSpec(newSourceInfo?.spec);\n  if (filterInfo.supportedFor(newSourceSpec)) {\n    props.onUpdateFilter({ ...props.filter, column: newSourceId });\n  } else {\n    props.onUpdateFilter({\n      ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],\n      column: newSourceId,\n    });\n  }\n}\n\nconst inconsistentSourceSelected = computed(() => {\n  const selectedOption = props.columnOptions.find(\n    (op) => op.id === getSourceId(props.filter.column),\n  );\n  return selectedOption === undefined;\n});\nconst sourceOptions = computed(() => {\n  const options = props.columnOptions.map((v) => ({ value: v.id, label: v.label ?? v }));\n  if (inconsistentSourceSelected.value) {\n    options.unshift({ value: props.filter.column, label: \"Inconsistent value\" });\n  }\n  return options;\n});\n\nfunction getSourceId(column: PlAdvancedFilterColumnId): PlAdvancedFilterColumnId {\n  try {\n    const parsedColumnId = parseColumnId(column as SUniversalPColumnId);\n    if (isFilteredPColumn(parsedColumnId)) {\n      return stringifyColumnId(parsedColumnId.source);\n    } else {\n      return column;\n    }\n  } catch {\n    return column;\n  }\n}\n\n// similar to FilteredPColumnId but source is stringified and axis filters can be undefined\ntype ColumnAsSourceAndFixedAxes = {\n  source: PlAdvancedFilterColumnId;\n  axisFiltersByIndex: Record<number, AxisFilterValue | undefined>;\n};\nfunction getColumnAsSourceAndFixedAxes(\n  column: PlAdvancedFilterColumnId,\n): ColumnAsSourceAndFixedAxes {\n  const sourceId = getSourceId(column);\n  const option = props.columnOptions.find((op) => op.id === sourceId);\n  const axesToBeFixed = (option?.axesToBeFixed ?? []).reduce(\n    (res, item) => {\n      res[item.idx] = undefined;\n      return res;\n    },\n    {} as Record<number, AxisFilterValue | undefined>,\n  );\n  try {\n    const parsedColumnId = parseColumnId(column as SUniversalPColumnId);\n    if (isFilteredPColumn(parsedColumnId)) {\n      return {\n        source: sourceId,\n        axisFiltersByIndex: parsedColumnId.axisFilters.reduce((res, item) => {\n          res[item[0]] = item[1];\n          return res;\n        }, axesToBeFixed),\n      };\n    }\n  } catch {\n    return { source: column, axisFiltersByIndex: axesToBeFixed };\n  }\n  return { source: column, axisFiltersByIndex: axesToBeFixed };\n}\n\nfunction stringifyColumn(value: ColumnAsSourceAndFixedAxes): PlAdvancedFilterColumnId {\n  if (Object.keys(value.axisFiltersByIndex).length === 0) {\n    return value.source;\n  }\n  return stringifyColumnId({\n    source: parseColumnId(value.source as SUniversalPColumnId) as AnchoredPColumnId,\n    axisFilters: Object.entries(value.axisFiltersByIndex).map(\n      ([idx, value]) => [Number(idx), value] as AxisFilterByIdx,\n    ),\n  });\n}\n\nconst columnAsSourceAndFixedAxes = computed({\n  get: () => {\n    return getColumnAsSourceAndFixedAxes(props.filter.column);\n  },\n  set: (value) => {\n    props.onUpdateFilter({ ...props.filter, column: stringifyColumn(value) });\n  },\n});\nfunction updateAxisFilterValue(idx: number, value: AxisFilterValue | undefined) {\n  columnAsSourceAndFixedAxes.value = {\n    ...columnAsSourceAndFixedAxes.value,\n    axisFiltersByIndex: { ...columnAsSourceAndFixedAxes.value.axisFiltersByIndex, [idx]: value },\n  };\n}\n\nconst currentOption = computed(() =>\n  props.columnOptions.find((op) => op.id === columnAsSourceAndFixedAxes.value.source),\n);\nconst currentSpec = computed(() =>\n  currentOption.value?.spec ? getNormalizedSpec(currentOption.value.spec) : null,\n);\nconst currentType = computed(() => currentSpec.value?.valueType);\nconst currentError = computed(\n  () => Boolean(currentOption.value?.error) || inconsistentSourceSelected.value,\n);\n\nconst filterTypesOptions = computed(() =>\n  props.supportedFilters\n    .filter(\n      (v) =>\n        props.filter.type === v ||\n        (currentSpec.value ? getFilterInfo(v).supportedFor(currentSpec.value) : true),\n    )\n    .map((v) => ({ value: v, label: getFilterInfo(v).label })),\n);\n\nconst wildcardOptions = computed(() => {\n  if (props.filter.type !== \"patternFuzzyContainSubsequence\") {\n    return [];\n  }\n  if (currentOption.value?.alphabet === \"nucleotide\") {\n    return [{ label: \"N\", value: \"N\" }];\n  }\n  if (currentOption.value?.alphabet === \"aminoacid\") {\n    return [{ label: \"X\", value: \"X\" }];\n  }\n  return [...new Set(props.filter.value.split(\"\"))].sort().map((v) => ({ value: v, label: v }));\n});\n\nconst stringMatchesError = computed(() => {\n  if (props.filter.type !== \"patternMatchesRegularExpression\") {\n    return false;\n  }\n  try {\n    new RegExp(props.filter.value);\n    return false;\n  } catch {\n    return true;\n  }\n});\n</script>\n<template>\n  <div :class=\"$style.filterWrapper\">\n    <!-- top element - column selector / column label - for all filter types-->\n    <div\n      v-if=\"enableDnd\"\n      :class=\"[$style.top, $style.columnChip, { [$style.error]: currentError }]\"\n    >\n      <div :class=\"[$style.typeIcon, { [$style.error]: currentError }]\">\n        <PlIcon16 v-if=\"currentError\" name=\"warning\" />\n        <PlIcon16\n          v-else\n          :name=\"\n            currentType === 'String' || currentType === undefined\n              ? 'cell-type-txt'\n              : 'cell-type-num'\n          \"\n        />\n      </div>\n      <div :class=\"$style.titleWrapper\" :title=\"currentOption?.label ?? ''\">\n        <div :class=\"$style.title\">\n          {{\n            inconsistentSourceSelected\n              ? \"Inconsistent value\"\n              : (currentOption?.label ?? props.filter.column)\n          }}\n        </div>\n      </div>\n      <div :class=\"$style.closeIcon\" @click=\"onDelete(props.filter.column)\">\n        <PlIcon16 name=\"close\" />\n      </div>\n    </div>\n    <div v-else :class=\"$style.top\">\n      <PlDropdown\n        :model-value=\"columnAsSourceAndFixedAxes.source\"\n        :errorStatus=\"currentError\"\n        :options=\"sourceOptions\"\n        :style=\"{ width: '100%' }\"\n        group-position=\"top-left\"\n        @update:model-value=\"changeSourceId\"\n      />\n      <div :class=\"$style.closeButton\" @click=\"onDelete(props.filter.column)\">\n        <PlIcon16 name=\"close\" />\n      </div>\n    </div>\n\n    <div v-if=\"currentOption?.axesToBeFixed?.length\" :class=\"$style.fixedAxesBlock\">\n      <template v-for=\"value in currentOption?.axesToBeFixed\" :key=\"value.idx\">\n        <PlAutocomplete\n          :model-value=\"columnAsSourceAndFixedAxes.axisFiltersByIndex[value.idx]\"\n          :label=\"value.label\"\n          :options-search=\"\n            (str, type) =>\n              getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str, value.idx)\n          \"\n          :disabled=\"inconsistentSourceSelected\"\n          :clearable=\"true\"\n          @update:model-value=\"(v) => updateAxisFilterValue(value.idx, v)\"\n        />\n      </template>\n    </div>\n\n    <!-- middle - filter type selector -  for all filter types -->\n    <div\n      :class=\"\n        props.filter.type === 'isNA' || props.filter.type === 'isNotNA'\n          ? $style.bottom\n          : $style.middle\n      \"\n    >\n      <PlDropdown\n        :model-value=\"props.filter.type\"\n        :options=\"filterTypesOptions\"\n        :group-position=\"\n          props.filter.type === 'isNA' || props.filter.type === 'isNotNA' ? 'bottom' : 'middle'\n        \"\n        @update:model-value=\"changeFilterType\"\n      />\n    </div>\n\n    <!-- middle - for fuzzy contains filter -->\n    <template v-if=\"props.filter.type === 'patternFuzzyContainSubsequence'\">\n      <div :class=\"$style.middle\">\n        <PlTextField\n          :model-value=\"props.filter.value\"\n          placeholder=\"Substring\"\n          group-position=\"middle\"\n          @update:model-value=\"(v) => updateFilterProp('value', v)\"\n        />\n      </div>\n      <div :class=\"$style.innerSection\">\n        <Slider\n          :model-value=\"props.filter.maxEdits\"\n          :max=\"5\"\n          breakpoints\n          label=\"Maximum number of substitutions and indels\"\n          @update:model-value=\"(v) => updateFilterProp('maxEdits', v)\"\n        />\n        <PlToggleSwitch\n          :model-value=\"props.filter.substitutionsOnly\"\n          label=\"Substitutions only\"\n          @update:model-value=\"(v) => updateFilterProp('substitutionsOnly', v)\"\n        />\n      </div>\n    </template>\n\n    <!-- bottom element - individual settings for every filter type -->\n    <div :class=\"$style.bottom\">\n      <PlAutocomplete\n        v-if=\"props.filter.type === 'patternEquals' || props.filter.type === 'patternNotEquals'\"\n        :model-value=\"props.filter.value\"\n        :options-search=\"\n          (str, type) => getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n        \"\n        :clearable=\"true\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('value', v)\"\n      />\n      <PlAutocompleteMulti\n        v-if=\"props.filter.type === 'inSet' || props.filter.type === 'notInSet'\"\n        :model-value=\"props.filter.value\"\n        :options-search=\"\n          (str, type) => getMultiSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n        \"\n        :disabled=\"inconsistentSourceSelected\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('value', v)\"\n      />\n      <PlNumberField\n        v-if=\"isNumericFilter(props.filter)\"\n        :model-value=\"props.filter.x\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('x', v)\"\n      />\n      <PlNumberField\n        v-if=\"isPositionFilter(props.filter)\"\n        :model-value=\"props.filter.n\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('n', v)\"\n      />\n      <PlTextField\n        v-if=\"\n          props.filter.type === 'patternContainSubsequence' ||\n          props.filter.type === 'patternNotContainSubsequence'\n        \"\n        :model-value=\"props.filter.value\"\n        placeholder=\"Substring\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('value', v)\"\n      />\n      <PlTextField\n        v-if=\"props.filter.type === 'patternMatchesRegularExpression'\"\n        :model-value=\"props.filter.value\"\n        :error=\"stringMatchesError ? 'Regular expression is not valid' : undefined\"\n        placeholder=\"Regular expression\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('value', v)\"\n      />\n      <PlDropdown\n        v-if=\"props.filter.type === 'patternFuzzyContainSubsequence'\"\n        :model-value=\"props.filter.wildcard\"\n        clearable\n        placeholder=\"Wildcard value\"\n        :options=\"wildcardOptions\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('wildcard', v)\"\n      />\n    </div>\n  </div>\n  <OperandButton :active=\"operand\" :disabled=\"isLast\" @select=\"onChangeOperand\" />\n</template>\n\n<style module>\n.filterWrapper {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  cursor: default;\n}\n\n.typeIcon {\n  display: inline-flex;\n  margin-right: 8px;\n}\n\n.typeIcon.error {\n  --icon-color: var(--txt-error);\n}\n\n.closeIcon {\n  display: inline-flex;\n  margin-left: 12px;\n  cursor: pointer;\n}\n\n.titleWrapper {\n  flex-grow: 1;\n  overflow: hidden;\n}\n.title {\n  overflow: hidden;\n  color: var(--txt-01);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n}\n\n.columnChip {\n  width: 100%;\n  display: flex;\n  padding: 10px 12px;\n  align-items: center;\n  border-radius: 6px;\n  border: 1px solid var(--txt-01);\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n\n  &.error {\n    border-color: var(--txt-error);\n  }\n}\n\n.innerSection {\n  border: 1px solid var(--txt-01);\n  border-top: none;\n  padding: 16px 12px;\n}\n\n.closeButton {\n  border: 1px solid var(--txt-01);\n  border-top-right-radius: 6px;\n  border-left: none;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  cursor: pointer;\n}\n\n.top {\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 1;\n  background: #fff;\n}\n\n.fixedAxesBlock {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: 12px 8px;\n  gap: 12px;\n  border-left: 1px solid var(--txt-01);\n  border-right: 1px solid var(--txt-01);\n}\n\n.fixedAxesBlock > * {\n  background: #fff;\n}\n\n.middle,\n.bottom {\n  position: relative;\n  margin-top: -1px;\n  background: #fff;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"FilterEditor.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlAdvancedFilter/FilterEditor.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {\n  PlAutocomplete,\n  PlAutocompleteMulti,\n  PlDropdown,\n  PlIcon16,\n  PlNumberField,\n  PlTextField,\n  PlToggleSwitch,\n  Slider,\n} from \"@milaboratories/uikit\";\nimport type {\n  AnchoredPColumnId,\n  AxisFilterByIdx,\n  AxisFilterValue,\n  PTableColumnId,\n  SUniversalPColumnId,\n} from \"@platforma-sdk/model\";\nimport {\n  canonicalizeJson,\n  isFilteredPColumn,\n  parseColumnId,\n  stringifyColumnId,\n  type ListOptionBase,\n} from \"@platforma-sdk/model\";\nimport { computed } from \"vue\";\nimport type { SUPPORTED_FILTER_TYPES } from \"./constants\";\nimport { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS } from \"./constants\";\nimport OperandButton from \"./OperandButton.vue\";\nimport type { EditableFilter, Operand, PlAdvancedFilterColumnId, SourceOptionInfo } from \"./types\";\nimport {\n  getFilterInfo,\n  getNormalizedSpec,\n  isNumericFilter,\n  isPositionFilter,\n  mergeFilterForTypeChange,\n} from \"./utils\";\nimport { isNil } from \"es-toolkit\";\n\nconst props = defineProps<{\n  filter: EditableFilter;\n  isLast: boolean;\n  operand: Operand;\n  enableDnd: boolean;\n  columnOptions: SourceOptionInfo[];\n  supportedFilters: typeof SUPPORTED_FILTER_TYPES;\n  getSuggestOptions: (params: {\n    columnId: PlAdvancedFilterColumnId;\n    axisIdx?: number;\n    searchType: \"value\" | \"label\";\n    searchStr: string;\n  }) => ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;\n  onDelete: (columnId: PlAdvancedFilterColumnId) => void;\n  onUpdateFilter: (filter: EditableFilter) => void;\n  onChangeOperand: (op: Operand) => void;\n}>();\n\ntype AllKeys<U> = U extends unknown ? keyof U : never;\ntype ValueOf<U, K extends string> = U extends unknown ? (K extends keyof U ? U[K] : never) : never;\n\nfunction updateFilterProp<K extends AllKeys<EditableFilter> & string>(\n  key: K,\n  v: ValueOf<EditableFilter, K>,\n) {\n  props.onUpdateFilter({ ...props.filter, [key]: v } as EditableFilter);\n}\n\nasync function getSuggestOptionsFn(\n  id: PlAdvancedFilterColumnId,\n  type: \"value\" | \"label\",\n  str: string,\n  axisIdx?: number,\n): Promise<ListOptionBase<string>[]> {\n  return props.getSuggestOptions({\n    columnId: id,\n    axisIdx,\n    searchType: type,\n    searchStr: str,\n  }) as Promise<ListOptionBase<string>[]>;\n}\n\nasync function getMultiSuggestOptionsFn(\n  id: PlAdvancedFilterColumnId,\n  type: \"value\" | \"label\",\n  str: string | string[],\n  axisIdx?: number,\n): Promise<ListOptionBase<string>[]> {\n  if (type === \"label\" && typeof str === \"string\") {\n    return getSuggestOptionsFn(id, type, str, axisIdx);\n  }\n  if (type === \"value\" && Array.isArray(str)) {\n    const results = await Promise.all(str.map((s) => getSuggestOptionsFn(id, type, s, axisIdx)));\n    return results.map((x) => x[0]);\n  }\n  throw new Error(\"Invalid arguments combination\");\n}\n\nfunction changeFilterType(newType?: EditableFilter[\"type\"]) {\n  if (isNil(newType)) return;\n  props.onUpdateFilter(mergeFilterForTypeChange(props.filter, newType));\n}\n\nfunction changeSourceId(newSourceId?: PlAdvancedFilterColumnId) {\n  if (!newSourceId) {\n    return;\n  }\n  const newSourceInfo = props.columnOptions.find((v) =>\n    columnIdEquals(v.id, getSourceId(newSourceId)),\n  );\n  if (!newSourceInfo) {\n    return;\n  }\n  const filterInfo = getFilterInfo(props.filter.type);\n  const newSourceSpec = getNormalizedSpec(newSourceInfo?.spec);\n  if (filterInfo.supportedFor(newSourceSpec)) {\n    props.onUpdateFilter({ ...props.filter, column: newSourceId });\n  } else {\n    props.onUpdateFilter({\n      ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],\n      column: newSourceId,\n    });\n  }\n}\n\nconst inconsistentSourceSelected = computed(() => {\n  const selectedOption = props.columnOptions.find((op) =>\n    columnIdEquals(op.id, getSourceId(props.filter.column)),\n  );\n  return selectedOption === undefined;\n});\nconst sourceOptions = computed(() => {\n  const options = props.columnOptions.map((v) => ({ value: v.id, label: v.label ?? v }));\n  if (inconsistentSourceSelected.value) {\n    options.unshift({ value: props.filter.column, label: \"Inconsistent value\" });\n  }\n  return options;\n});\n\nfunction isPTableColumnIdObject(c: PlAdvancedFilterColumnId): c is PTableColumnId {\n  return typeof c === \"object\" && c !== null;\n}\n\nfunction getSourceId(column: PlAdvancedFilterColumnId): PlAdvancedFilterColumnId {\n  // PTableColumnId object form: no axisFilters embedded, return as-is.\n  if (isPTableColumnIdObject(column)) return column;\n  try {\n    const parsedColumnId = parseColumnId(column as SUniversalPColumnId);\n    if (isFilteredPColumn(parsedColumnId)) {\n      return stringifyColumnId(parsedColumnId.source);\n    } else {\n      return column;\n    }\n  } catch {\n    return column;\n  }\n}\n\n// similar to FilteredPColumnId but source is stringified and axis filters can be undefined\ntype ColumnAsSourceAndFixedAxes = {\n  source: PlAdvancedFilterColumnId;\n  axisFiltersByIndex: Record<number, AxisFilterValue | undefined>;\n};\nfunction getColumnAsSourceAndFixedAxes(\n  column: PlAdvancedFilterColumnId,\n): ColumnAsSourceAndFixedAxes {\n  const sourceId = getSourceId(column);\n  const option = props.columnOptions.find((op) => columnIdEquals(op.id, sourceId));\n  const axesToBeFixed = (option?.axesToBeFixed ?? []).reduce(\n    (res, item) => {\n      res[item.idx] = undefined;\n      return res;\n    },\n    {} as Record<number, AxisFilterValue | undefined>,\n  );\n  // PTableColumnId object form has no axis filters baked in.\n  if (isPTableColumnIdObject(column)) {\n    return { source: column, axisFiltersByIndex: axesToBeFixed };\n  }\n  try {\n    const parsedColumnId = parseColumnId(column as SUniversalPColumnId);\n    if (isFilteredPColumn(parsedColumnId)) {\n      return {\n        source: sourceId,\n        axisFiltersByIndex: (parsedColumnId.axisFilters as AxisFilterByIdx[]).reduce(\n          (res, item) => {\n            res[item[0]] = item[1];\n            return res;\n          },\n          axesToBeFixed,\n        ),\n      };\n    }\n  } catch {\n    return { source: column, axisFiltersByIndex: axesToBeFixed };\n  }\n  return { source: column, axisFiltersByIndex: axesToBeFixed };\n}\n\n/** Identity comparison for PlAdvancedFilterColumnId values — handles both string\n *  and object (PTableColumnId) variants. */\nfunction columnIdEquals(a: PlAdvancedFilterColumnId, b: PlAdvancedFilterColumnId): boolean {\n  if (a === b) return true;\n  if (typeof a === \"object\" && typeof b === \"object\" && a !== null && b !== null) {\n    return canonicalizeJson(a) === canonicalizeJson(b);\n  }\n  return false;\n}\n\nfunction stringifyColumn(value: ColumnAsSourceAndFixedAxes): PlAdvancedFilterColumnId {\n  if (Object.keys(value.axisFiltersByIndex).length === 0) {\n    return value.source;\n  }\n  // PTableColumnId object form can't carry axisFilters — return as-is.\n  if (isPTableColumnIdObject(value.source)) return value.source;\n  return stringifyColumnId({\n    source: parseColumnId(value.source as SUniversalPColumnId) as unknown as AnchoredPColumnId,\n    axisFilters: Object.entries(value.axisFiltersByIndex).map(\n      ([idx, value]) => [Number(idx), value] as AxisFilterByIdx,\n    ),\n  });\n}\n\nconst columnAsSourceAndFixedAxes = computed({\n  get: () => {\n    return getColumnAsSourceAndFixedAxes(props.filter.column);\n  },\n  set: (value) => {\n    props.onUpdateFilter({ ...props.filter, column: stringifyColumn(value) });\n  },\n});\nfunction updateAxisFilterValue(idx: number, value: AxisFilterValue | undefined) {\n  columnAsSourceAndFixedAxes.value = {\n    ...columnAsSourceAndFixedAxes.value,\n    axisFiltersByIndex: { ...columnAsSourceAndFixedAxes.value.axisFiltersByIndex, [idx]: value },\n  };\n}\n\nconst currentOption = computed(() =>\n  props.columnOptions.find((op) => columnIdEquals(op.id, columnAsSourceAndFixedAxes.value.source)),\n);\nconst currentSpec = computed(() =>\n  currentOption.value?.spec ? getNormalizedSpec(currentOption.value.spec) : null,\n);\nconst currentType = computed(() => currentSpec.value?.valueType);\nconst currentError = computed(\n  () => Boolean(currentOption.value?.error) || inconsistentSourceSelected.value,\n);\n\nconst filterTypesOptions = computed(() =>\n  props.supportedFilters\n    .filter(\n      (v) =>\n        props.filter.type === v ||\n        (currentSpec.value ? getFilterInfo(v).supportedFor(currentSpec.value) : true),\n    )\n    .map((v) => ({ value: v, label: getFilterInfo(v).label })),\n);\n\nconst wildcardOptions = computed(() => {\n  if (props.filter.type !== \"patternFuzzyContainSubsequence\") {\n    return [];\n  }\n  if (currentOption.value?.alphabet === \"nucleotide\") {\n    return [{ label: \"N\", value: \"N\" }];\n  }\n  if (currentOption.value?.alphabet === \"aminoacid\") {\n    return [{ label: \"X\", value: \"X\" }];\n  }\n  return [...new Set(props.filter.value.split(\"\"))].sort().map((v) => ({ value: v, label: v }));\n});\n\nconst stringMatchesError = computed(() => {\n  if (props.filter.type !== \"patternMatchesRegularExpression\") {\n    return false;\n  }\n  try {\n    new RegExp(props.filter.value);\n    return false;\n  } catch {\n    return true;\n  }\n});\n</script>\n<template>\n  <div :class=\"$style.filterWrapper\">\n    <!-- top element - column selector / column label - for all filter types-->\n    <div\n      v-if=\"enableDnd\"\n      :class=\"[$style.top, $style.columnChip, { [$style.error]: currentError }]\"\n    >\n      <div :class=\"[$style.typeIcon, { [$style.error]: currentError }]\">\n        <PlIcon16 v-if=\"currentError\" name=\"warning\" />\n        <PlIcon16\n          v-else\n          :name=\"\n            currentType === 'String' || currentType === undefined\n              ? 'cell-type-txt'\n              : 'cell-type-num'\n          \"\n        />\n      </div>\n      <div :class=\"$style.titleWrapper\" :title=\"currentOption?.label ?? ''\">\n        <div :class=\"$style.title\">\n          {{\n            inconsistentSourceSelected\n              ? \"Inconsistent value\"\n              : (currentOption?.label ?? props.filter.column)\n          }}\n        </div>\n      </div>\n      <div :class=\"$style.closeIcon\" @click=\"onDelete(props.filter.column)\">\n        <PlIcon16 name=\"close\" />\n      </div>\n    </div>\n    <div v-else :class=\"$style.top\">\n      <PlDropdown\n        :model-value=\"columnAsSourceAndFixedAxes.source\"\n        :errorStatus=\"currentError\"\n        :options=\"sourceOptions\"\n        :style=\"{ width: '100%' }\"\n        group-position=\"top-left\"\n        @update:model-value=\"changeSourceId\"\n      />\n      <div :class=\"$style.closeButton\" @click=\"onDelete(props.filter.column)\">\n        <PlIcon16 name=\"close\" />\n      </div>\n    </div>\n\n    <div v-if=\"currentOption?.axesToBeFixed?.length\" :class=\"$style.fixedAxesBlock\">\n      <template v-for=\"value in currentOption?.axesToBeFixed\" :key=\"value.idx\">\n        <PlAutocomplete\n          :model-value=\"columnAsSourceAndFixedAxes.axisFiltersByIndex[value.idx]\"\n          :label=\"value.label\"\n          :options-search=\"\n            (str, type) =>\n              getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str, value.idx)\n          \"\n          :disabled=\"inconsistentSourceSelected\"\n          :clearable=\"true\"\n          @update:model-value=\"(v) => updateAxisFilterValue(value.idx, v)\"\n        />\n      </template>\n    </div>\n\n    <!-- middle - filter type selector -  for all filter types -->\n    <div\n      :class=\"\n        props.filter.type === 'isNA' || props.filter.type === 'isNotNA'\n          ? $style.bottom\n          : $style.middle\n      \"\n    >\n      <PlDropdown\n        :model-value=\"props.filter.type\"\n        :options=\"filterTypesOptions\"\n        :group-position=\"\n          props.filter.type === 'isNA' || props.filter.type === 'isNotNA' ? 'bottom' : 'middle'\n        \"\n        @update:model-value=\"changeFilterType\"\n      />\n    </div>\n\n    <!-- middle - for fuzzy contains filter -->\n    <template v-if=\"props.filter.type === 'patternFuzzyContainSubsequence'\">\n      <div :class=\"$style.middle\">\n        <PlTextField\n          :model-value=\"props.filter.value\"\n          placeholder=\"Substring\"\n          group-position=\"middle\"\n          @update:model-value=\"(v) => updateFilterProp('value', v)\"\n        />\n      </div>\n      <div :class=\"$style.innerSection\">\n        <Slider\n          :model-value=\"props.filter.maxEdits\"\n          :max=\"5\"\n          breakpoints\n          label=\"Maximum number of substitutions and indels\"\n          @update:model-value=\"(v) => updateFilterProp('maxEdits', v)\"\n        />\n        <PlToggleSwitch\n          :model-value=\"props.filter.substitutionsOnly\"\n          label=\"Substitutions only\"\n          @update:model-value=\"(v) => updateFilterProp('substitutionsOnly', v)\"\n        />\n      </div>\n    </template>\n\n    <!-- bottom element - individual settings for every filter type -->\n    <div :class=\"$style.bottom\">\n      <PlAutocomplete\n        v-if=\"props.filter.type === 'patternEquals' || props.filter.type === 'patternNotEquals'\"\n        :model-value=\"props.filter.value\"\n        :options-search=\"\n          (str, type) => getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n        \"\n        :clearable=\"true\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('value', v)\"\n      />\n      <PlAutocompleteMulti\n        v-if=\"props.filter.type === 'inSet' || props.filter.type === 'notInSet'\"\n        :model-value=\"props.filter.value\"\n        :options-search=\"\n          (str, type) => getMultiSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n        \"\n        :disabled=\"inconsistentSourceSelected\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('value', v)\"\n      />\n      <PlNumberField\n        v-if=\"isNumericFilter(props.filter)\"\n        :model-value=\"props.filter.x\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('x', v)\"\n      />\n      <PlNumberField\n        v-if=\"isPositionFilter(props.filter)\"\n        :model-value=\"props.filter.n\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('n', v)\"\n      />\n      <PlTextField\n        v-if=\"\n          props.filter.type === 'patternContainSubsequence' ||\n          props.filter.type === 'patternNotContainSubsequence'\n        \"\n        :model-value=\"props.filter.value\"\n        placeholder=\"Substring\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('value', v)\"\n      />\n      <PlTextField\n        v-if=\"props.filter.type === 'patternMatchesRegularExpression'\"\n        :model-value=\"props.filter.value\"\n        :error=\"stringMatchesError ? 'Regular expression is not valid' : undefined\"\n        placeholder=\"Regular expression\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('value', v)\"\n      />\n      <PlDropdown\n        v-if=\"props.filter.type === 'patternFuzzyContainSubsequence'\"\n        :model-value=\"props.filter.wildcard\"\n        clearable\n        placeholder=\"Wildcard value\"\n        :options=\"wildcardOptions\"\n        group-position=\"bottom\"\n        @update:model-value=\"(v) => updateFilterProp('wildcard', v)\"\n      />\n    </div>\n  </div>\n  <OperandButton :active=\"operand\" :disabled=\"isLast\" @select=\"onChangeOperand\" />\n</template>\n\n<style module>\n.filterWrapper {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  cursor: default;\n}\n\n.typeIcon {\n  display: inline-flex;\n  margin-right: 8px;\n}\n\n.typeIcon.error {\n  --icon-color: var(--txt-error);\n}\n\n.closeIcon {\n  display: inline-flex;\n  margin-left: 12px;\n  cursor: pointer;\n}\n\n.titleWrapper {\n  flex-grow: 1;\n  overflow: hidden;\n}\n.title {\n  overflow: hidden;\n  color: var(--txt-01);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n}\n\n.columnChip {\n  width: 100%;\n  display: flex;\n  padding: 10px 12px;\n  align-items: center;\n  border-radius: 6px;\n  border: 1px solid var(--txt-01);\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n\n  &.error {\n    border-color: var(--txt-error);\n  }\n}\n\n.innerSection {\n  border: 1px solid var(--txt-01);\n  border-top: none;\n  padding: 16px 12px;\n}\n\n.closeButton {\n  border: 1px solid var(--txt-01);\n  border-top-right-radius: 6px;\n  border-left: none;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  cursor: pointer;\n}\n\n.top {\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 1;\n  background: #fff;\n}\n\n.fixedAxesBlock {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: 12px 8px;\n  gap: 12px;\n  border-left: 1px solid var(--txt-01);\n  border-right: 1px solid var(--txt-01);\n}\n\n.fixedAxesBlock > * {\n  background: #fff;\n}\n\n.middle,\n.bottom {\n  position: relative;\n  margin-top: -1px;\n  background: #fff;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlAdvancedFilter/FilterEditor.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterEditor.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAdvancedFilter/FilterEditor.vue"],"names":[],"mappings":"AAgiBA,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAG1D,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAUnG,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,gBAAgB,EAAE,OAAO,sBAAsB,CAAC;IAChD,iBAAiB,EAAE,CAAC,MAAM,EAAE;QAC1B,QAAQ,EAAE,wBAAwB,CAAC;QACnC,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,OAAO,GAAG,OAAO,CAAC;QAC9B,SAAS,EAAE,MAAM,CAAC;KACnB,KAAK,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;IACrF,QAAQ,EAAE,CAAC,QAAQ,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACvD,cAAc,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACjD,eAAe,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;;AAktBF,wBAMG"}
+{"version":3,"file":"FilterEditor.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAdvancedFilter/FilterEditor.vue"],"names":[],"mappings":"AA8jBA,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAG1D,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAUnG,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,gBAAgB,EAAE,OAAO,sBAAsB,CAAC;IAChD,iBAAiB,EAAE,CAAC,MAAM,EAAE;QAC1B,QAAQ,EAAE,wBAAwB,CAAC;QACnC,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,OAAO,GAAG,OAAO,CAAC;QAC9B,SAAS,EAAE,MAAM,CAAC;KACnB,KAAK,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;IACrF,QAAQ,EAAE,CAAC,QAAQ,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACvD,cAAc,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACjD,eAAe,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;;AA6uBF,wBAMG"}