npm - @platforma-sdk/ui-vue - Versions diffs - 1.58.16 → 1.58.19 - Mend

@platforma-sdk/ui-vue 1.58.16 → 1.58.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/.turbo/turbo-build.log CHANGED Viewed

@@ -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.58.16 build /home/runner/_work/platforma/platforma/sdk/ui-vue
+> @platforma-sdk/ui-vue@1.58.19 build /home/runner/_work/platforma/platforma/sdk/ui-vue
 > ts-builder build --target browser-lib
 Building browser-lib project...
@@ -11,7 +11,7 @@ Building browser-lib project...
 rendering chunks...
 [vite:dts] Start generate declaration files...
-[vite:dts] Declaration files built in 4134ms.
+[vite:dts] Declaration files built in 5465ms.
 computing gzip size...
 dist/components/PlAnnotations/components/PlAnnotations.vue?vue&type=style&index=0&lang.css                       0.04 kB │ gzip:  0.06 kB
@@ -116,14 +116,14 @@ dist/plugins/Monetization/RunStatus.js
 dist/components/BlockLayout.js                                                                                   0.33 kB │ gzip:  0.23 kB │ map:  2.10 kB
 dist/lib/util/helpers/dist/strings.js                                                                            0.33 kB │ gzip:  0.23 kB │ map:  4.11 kB
 dist/plugins/Monetization/EndOfPeriod.js                                                                         0.33 kB │ gzip:  0.23 kB │ map:  1.21 kB
-dist/components/PlAdvancedFilter/FilterEditor.js                                                                 0.33 kB │ gzip:  0.23 kB │ map: 15.30 kB
+dist/components/PlAdvancedFilter/FilterEditor.js                                                                 0.33 kB │ gzip:  0.23 kB │ map: 15.16 kB
 dist/components/PlAdvancedFilter/OperandButton.js                                                                0.34 kB │ gzip:  0.23 kB │ map:  1.31 kB
 dist/components/PlAnnotations/components/FilterSidebar.js                                                        0.34 kB │ gzip:  0.23 kB │ map:  4.72 kB
 dist/components/PlAnnotations/components/PlAnnotations.js                                                        0.34 kB │ gzip:  0.23 kB │ map:  2.65 kB
-dist/components/PlAgDataTable/PlAgDataTableV2.js                                                                 0.34 kB │ gzip:  0.24 kB │ map: 20.81 kB
+dist/components/PlAgDataTable/PlAgDataTableV2.js                                                                 0.34 kB │ gzip:  0.24 kB │ map: 20.90 kB
 dist/plugins/Monetization/UserCabinetCard.js                                                                     0.34 kB │ gzip:  0.23 kB │ map:  3.00 kB
 dist/components/PlAdvancedFilter/PlAdvancedFilter.js                                                             0.34 kB │ gzip:  0.24 kB │ map: 10.70 kB
-dist/components/PlTableFilters/PlTableFiltersV2.js                                                               0.34 kB │ gzip:  0.24 kB │ map:  4.58 kB
+dist/components/PlTableFilters/PlTableFiltersV2.js                                                               0.34 kB │ gzip:  0.24 kB │ map:  4.61 kB
 dist/components/PlBtnExportArchive/PlBtnExportArchive.js                                                         0.35 kB │ gzip:  0.24 kB │ map:  7.17 kB
 dist/components/PlAgDataTable/PlAgDataTableSheets.js                                                             0.35 kB │ gzip:  0.24 kB │ map:  3.61 kB
 dist/components/PlAnnotations/components/AnnotationsSidebar.js                                                   0.35 kB │ gzip:  0.24 kB │ map:  3.77 kB
@@ -159,7 +159,6 @@ dist/components/PlAgDataTable/sources/value-rendering.js
 dist/plugins/Monetization/RunStatus.vue_vue_type_script_setup_true_lang.js                                       1.06 kB │ gzip:  0.57 kB │ map:  3.04 kB
 dist/components/PlAgGridColumnManager/useFilteredItems.js                                                        1.08 kB │ gzip:  0.56 kB │ map:  3.48 kB
 dist/createModel.js                                                                                              1.18 kB │ gzip:  0.59 kB │ map:  3.11 kB
-dist/components/PlAgDataTable/types.js                                                                           1.18 kB │ gzip:  0.49 kB │ map:  7.45 kB
 dist/components/PlBtnExportArchive/Summary.vue_vue_type_script_setup_true_lang.js                                1.21 kB │ gzip:  0.59 kB │ map:  2.35 kB
 dist/components/PlAgCellFile/PlAgCellFile.vue_vue_type_script_setup_true_lang.js                                 1.22 kB │ gzip:  0.69 kB │ map:  2.93 kB
 dist/components/PlAgDataTable/PlAgRowCount.vue_vue_type_script_setup_true_lang.js                                1.22 kB │ gzip:  0.57 kB │ map:  2.50 kB
@@ -167,6 +166,7 @@ dist/components/PlAgDataTable/PlAgOverlayLoading.vue_vue_type_script_setup_true_
 dist/utils.js                                                                                                    1.23 kB │ gzip:  0.60 kB │ map:  3.40 kB
 dist/lib/util/helpers/dist/prettyBytes.js                                                                        1.23 kB │ gzip:  0.63 kB │ map:  3.79 kB
 dist/components/PlBtnExportArchive/Item.vue_vue_type_script_setup_true_lang.js                                   1.26 kB │ gzip:  0.57 kB │ map:  2.58 kB
+dist/components/PlAgDataTable/types.js                                                                           1.27 kB │ gzip:  0.50 kB │ map:  7.63 kB
 dist/usePlugin.js                                                                                                1.29 kB │ gzip:  0.70 kB │ map:  2.63 kB
 dist/components/PlAgTextAndButtonCell/PlAgTextAndButtonCell.vue_vue_type_script_setup_true_lang.js               1.34 kB │ gzip:  0.73 kB │ map:  3.42 kB
 dist/internal/createAppModel.js                                                                                  1.42 kB │ gzip:  0.72 kB │ map:  3.89 kB
@@ -196,11 +196,11 @@ dist/components/PlAgDataTable/sources/row-number.js
 dist/plugins/Monetization/LimitCard.vue_vue_type_script_setup_true_lang.js                                       3.21 kB │ gzip:  1.09 kB │ map:  9.08 kB
 dist/components/PlAgGridColumnManager/PlAgGridColumnManager.vue_vue_type_script_setup_true_lang.js               3.26 kB │ gzip:  1.46 kB │ map:  5.77 kB
 dist/AgGridVue/createAgGridColDef.js                                                                             3.26 kB │ gzip:  1.27 kB │ map:  9.30 kB
-dist/components/PlTableFilters/PlTableFiltersV2.vue_vue_type_script_setup_true_lang.js                           3.28 kB │ gzip:  1.52 kB │ map:  6.35 kB
+dist/components/PlTableFilters/PlTableFiltersV2.vue_vue_type_script_setup_true_lang.js                           3.45 kB │ gzip:  1.60 kB │ map:  6.30 kB
 dist/components/PlAnnotations/components/AnnotationsSidebar.vue_vue_type_script_setup_true_lang.js               3.59 kB │ gzip:  1.55 kB │ map:  5.53 kB
 dist/components/PlAnnotations/components/FilterSidebar.vue_vue_type_script_setup_true_lang.js                    3.72 kB │ gzip:  1.52 kB │ map:  6.52 kB
-dist/components/PlAgDataTable/sources/table-state-v2.js                                                          3.83 kB │ gzip:  1.44 kB │ map: 11.44 kB
 dist/plugins/Monetization/MonetizationSidebar.vue_vue_type_script_setup_true_lang.js                             3.85 kB │ gzip:  1.66 kB │ map:  5.71 kB
+dist/components/PlAgDataTable/sources/table-state-v2.js                                                          3.96 kB │ gzip:  1.48 kB │ map: 11.85 kB
 dist/index.js                                                                                                    4.25 kB │ gzip:  1.29 kB │ map:  0.13 kB
 dist/internal/createAppV1.js                                                                                     4.69 kB │ gzip:  1.69 kB │ map: 14.32 kB
 dist/composition/fileContent.js                                                                                  4.85 kB │ gzip:  1.75 kB │ map: 12.99 kB
@@ -210,16 +210,16 @@ dist/internal/createAppV2.js
 dist/components/PlAgDataTable/sources/table-source-v2.js                                                         6.44 kB │ gzip:  2.56 kB │ map: 19.12 kB
 dist/internal/createAppV3.js                                                                                     6.54 kB │ gzip:  2.51 kB │ map: 19.87 kB
 dist/components/PlAdvancedFilter/PlAdvancedFilter.vue_vue_type_script_setup_true_lang.js                         7.06 kB │ gzip:  2.28 kB │ map: 14.91 kB
-dist/components/PlAdvancedFilter/FilterEditor.vue_vue_type_script_setup_true_lang.js                            10.20 kB │ gzip:  3.05 kB │ map: 21.73 kB
-dist/components/PlAgDataTable/PlAgDataTableV2.vue_vue_type_script_setup_true_lang.js                            11.39 kB │ gzip:  3.64 kB │ map: 27.79 kB
+dist/components/PlAdvancedFilter/FilterEditor.vue_vue_type_script_setup_true_lang.js                            10.14 kB │ gzip:  3.05 kB │ map: 21.57 kB
+dist/components/PlAgDataTable/PlAgDataTableV2.vue_vue_type_script_setup_true_lang.js                            11.50 kB │ gzip:  3.69 kB │ map: 27.95 kB
 [33m[33m[PLUGIN_TIMINGS] Warning:[0m Your build spent significant time in plugins. Here is a breakdown:
-  - vite:dts (29%)
-  - sourcemaps (21%)
-  - vite:vue (14%)
-  - vite:css-post (13%)
-  - vite:css (8%)
+  - sourcemaps (37%)
+  - vite:dts (24%)
+  - vite:vue (13%)
+  - vite:css (9%)
+  - vite:css-post (7%)
 See https://rolldown.rs/options/checks#plugintimings for more details.
 [39m
-[32m✓ built in 4.95s[39m
+[32m✓ built in 6.60s[39m
 Build completed successfully

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

@@ -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.58.16 formatter:check /home/runner/_work/platforma/platforma/sdk/ui-vue
+> @platforma-sdk/ui-vue@1.58.19 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 2992ms on 126 files using 8 threads.
+Finished in 2427ms on 126 files using 8 threads.
 Format check completed successfully

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

@@ -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.58.16 linter:check /home/runner/_work/platforma/platforma/sdk/ui-vue
+> @platforma-sdk/ui-vue@1.58.19 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 31ms on 109 files with 98 rules using 8 threads.
+Finished in 32ms on 109 files with 98 rules using 8 threads.
 Linting completed successfully

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

@@ -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.58.16 types:check /home/runner/_work/platforma/platforma/sdk/ui-vue
+> @platforma-sdk/ui-vue@1.58.19 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 CHANGED Viewed

@@ -1,5 +1,21 @@
 # @platforma-sdk/ui-vue
+## 1.58.19
+### Patch Changes
+- a93de45: Fix table filters bugs
+- Updated dependencies [a93de45]
+  - @milaboratories/uikit@2.10.42
+  - @platforma-sdk/model@1.58.19
+## 1.58.17
+### Patch Changes
+- Updated dependencies [f2b7989]
+  - @milaboratories/uikit@2.10.41
 ## 1.58.16
 ### Patch Changes

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

	@@ -1 +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 { getFilterInfo, getNormalizedSpec, isNumericFilter, isPositionFilter } from \"./utils\";\n\nconst filter = defineModel<EditableFilter>(\"filter\", { required: true });\n\nconst props = defineProps<{\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 onChangeOperand: (op: Operand) => void;\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\ntype Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T][];\nfunction changeFilterType() {\n const defaultFilter = DEFAULT_FILTERS[filter.value.type];\n\n filter.value = (Object.entries(defaultFilter) as Entries<EditableFilter>).reduce(\n (res, [key, val]) => {\n res[key] = filter.value[key] ?? val;\n return res;\n },\n {} as Record<keyof EditableFilter, EditableFilter[keyof EditableFilter]>,\n ) as EditableFilter;\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(filter.value.type);\n const newSourceSpec = getNormalizedSpec(newSourceInfo?.spec);\n if (filterInfo.supportedFor(newSourceSpec)) {\n // don't do anything except update source id\n filter.value.column = newSourceId;\n } else {\n // reset to default filter which fits to any column\n filter.value = {\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(filter.value.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: filter.value.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(filter.value.column);\n },\n set: (value) => {\n filter.value.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 filter.value.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 (filter.value.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(filter.value.value.split(\"\"))].sort().map((v) => ({ value: v, label: v }));\n});\n\nconst stringMatchesError = computed(() => {\n if (filter.value.type !== \"patternMatchesRegularExpression\") {\n return false;\n }\n try {\n new RegExp(filter.value.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 ?? filter.column)\n }}\n </div>\n </div>\n <div :class=\"$style.closeIcon\" @click=\"onDelete(filter.column)\">\n <PlIcon16 name=\"close\" />\n </div>\n </div>\n <div v-else :class=\"$style.top\">\n <PlDropdown\n v-model=\"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(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 v-model=\"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=\"filter.type === 'isNA' \|\| filter.type === 'isNotNA' ? $style.bottom : $style.middle\"\n >\n <PlDropdown\n v-model=\"filter.type\"\n :options=\"filterTypesOptions\"\n :group-position=\"filter.type === 'isNA' \|\| filter.type === 'isNotNA' ? 'bottom' : 'middle'\"\n @update:model-value=\"changeFilterType\"\n />\n </div>\n\n <!-- middle - for fuzzy contains filter -->\n <template v-if=\"filter.type === 'patternFuzzyContainSubsequence'\">\n <div :class=\"$style.middle\">\n <PlTextField v-model=\"filter.value\" placeholder=\"Substring\" group-position=\"middle\" />\n </div>\n <div :class=\"$style.innerSection\">\n <Slider\n v-model=\"filter.maxEdits\"\n :max=\"5\"\n breakpoints\n label=\"Maximum number of substitutions and indels\"\n />\n <PlToggleSwitch v-model=\"filter.substitutionsOnly\" label=\"Substitutions only\" />\n </div>\n </template>\n\n <!-- bottom element - individual settings for every filter type -->\n <div :class=\"$style.bottom\">\n <template v-if=\"filter.type === 'patternEquals' \|\| filter.type === 'patternNotEquals'\">\n <PlAutocomplete\n v-model=\"filter.value\"\n :options-search=\"\n (str, type) => getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n \"\n :disabled=\"inconsistentSourceSelected\"\n :clearable=\"true\"\n group-position=\"bottom\"\n />\n </template>\n <template v-if=\"filter.type === 'inSet' \|\| filter.type === 'notInSet'\">\n <PlAutocompleteMulti\n v-model=\"filter.value\"\n :options-search=\"\n (str, type) => getMultiSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n \"\n :disabled=\"inconsistentSourceSelected\"\n group-position=\"bottom\"\n />\n </template>\n <PlNumberField v-if=\"isNumericFilter(filter)\" v-model=\"filter.x\" group-position=\"bottom\" />\n <PlNumberField v-if=\"isPositionFilter(filter)\" v-model=\"filter.n\" group-position=\"bottom\" />\n <PlTextField\n v-if=\"\n filter.type === 'patternContainSubsequence' \|\|\n filter.type === 'patternNotContainSubsequence'\n \"\n v-model=\"filter.value\"\n placeholder=\"Substring\"\n group-position=\"bottom\"\n />\n <PlTextField\n v-if=\"filter.type === 'patternMatchesRegularExpression'\"\n v-model=\"filter.value\"\n :error=\"stringMatchesError ? 'Regular expression is not valid' : undefined\"\n placeholder=\"Regular expression\"\n group-position=\"bottom\"\n />\n <PlDropdown\n v-if=\"filter.type === 'patternFuzzyContainSubsequence'\"\n v-model=\"filter.wildcard\"\n clearable\n placeholder=\"Wildcard value\"\n :options=\"wildcardOptions\"\n group-position=\"bottom\"\n />\n </div>\n </div>\n <OperandButton :active=\"operand\" :disabled=\"isLast\" :on-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":""}
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 { getFilterInfo, getNormalizedSpec, isNumericFilter, isPositionFilter } from \"./utils\";\n\nconst filter = defineModel<EditableFilter>(\"filter\", { required: true });\n\nconst props = defineProps<{\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 onChangeOperand: (op: Operand) => void;\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\ntype Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T][];\nfunction changeFilterType() {\n const defaultFilter = DEFAULT_FILTERS[filter.value.type];\n\n filter.value = (Object.entries(defaultFilter) as Entries<EditableFilter>).reduce(\n (res, [key, val]) => {\n res[key] = filter.value[key] ?? val;\n return res;\n },\n {} as Record<keyof EditableFilter, EditableFilter[keyof EditableFilter]>,\n ) as EditableFilter;\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(filter.value.type);\n const newSourceSpec = getNormalizedSpec(newSourceInfo?.spec);\n if (filterInfo.supportedFor(newSourceSpec)) {\n // don't do anything except update source id\n filter.value.column = newSourceId;\n } else {\n // reset to default filter which fits to any column\n filter.value = {\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(filter.value.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: filter.value.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(filter.value.column);\n },\n set: (value) => {\n filter.value.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 filter.value.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 (filter.value.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(filter.value.value.split(\"\"))].sort().map((v) => ({ value: v, label: v }));\n});\n\nconst stringMatchesError = computed(() => {\n if (filter.value.type !== \"patternMatchesRegularExpression\") {\n return false;\n }\n try {\n new RegExp(filter.value.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 ?? filter.column)\n }}\n </div>\n </div>\n <div :class=\"$style.closeIcon\" @click=\"onDelete(filter.column)\">\n <PlIcon16 name=\"close\" />\n </div>\n </div>\n <div v-else :class=\"$style.top\">\n <PlDropdown\n v-model=\"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(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 v-model=\"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=\"filter.type === 'isNA' \|\| filter.type === 'isNotNA' ? $style.bottom : $style.middle\"\n >\n <PlDropdown\n v-model=\"filter.type\"\n :options=\"filterTypesOptions\"\n :group-position=\"filter.type === 'isNA' \|\| filter.type === 'isNotNA' ? 'bottom' : 'middle'\"\n @update:model-value=\"changeFilterType\"\n />\n </div>\n\n <!-- middle - for fuzzy contains filter -->\n <template v-if=\"filter.type === 'patternFuzzyContainSubsequence'\">\n <div :class=\"$style.middle\">\n <PlTextField v-model=\"filter.value\" placeholder=\"Substring\" group-position=\"middle\" />\n </div>\n <div :class=\"$style.innerSection\">\n <Slider\n v-model=\"filter.maxEdits\"\n :max=\"5\"\n breakpoints\n label=\"Maximum number of substitutions and indels\"\n />\n <PlToggleSwitch v-model=\"filter.substitutionsOnly\" label=\"Substitutions only\" />\n </div>\n </template>\n\n <!-- bottom element - individual settings for every filter type -->\n <div :class=\"$style.bottom\">\n <PlAutocomplete\n v-if=\"filter.type === 'patternEquals' \|\| filter.type === 'patternNotEquals'\"\n v-model=\"filter.value\"\n :options-search=\"\n (str, type) => getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n \"\n :clearable=\"true\"\n group-position=\"bottom\"\n />\n <PlAutocompleteMulti\n v-if=\"filter.type === 'inSet' \|\| filter.type === 'notInSet'\"\n v-model=\"filter.value\"\n :options-search=\"\n (str, type) => getMultiSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n \"\n :disabled=\"inconsistentSourceSelected\"\n group-position=\"bottom\"\n />\n <PlNumberField v-if=\"isNumericFilter(filter)\" v-model=\"filter.x\" group-position=\"bottom\" />\n <PlNumberField v-if=\"isPositionFilter(filter)\" v-model=\"filter.n\" group-position=\"bottom\" />\n <PlTextField\n v-if=\"\n filter.type === 'patternContainSubsequence' \|\|\n filter.type === 'patternNotContainSubsequence'\n \"\n v-model=\"filter.value\"\n placeholder=\"Substring\"\n group-position=\"bottom\"\n />\n <PlTextField\n v-if=\"filter.type === 'patternMatchesRegularExpression'\"\n v-model=\"filter.value\"\n :error=\"stringMatchesError ? 'Regular expression is not valid' : undefined\"\n placeholder=\"Regular expression\"\n group-position=\"bottom\"\n />\n <PlDropdown\n v-if=\"filter.type === 'patternFuzzyContainSubsequence'\"\n v-model=\"filter.wildcard\"\n clearable\n placeholder=\"Wildcard value\"\n :options=\"wildcardOptions\"\n group-position=\"bottom\"\n />\n </div>\n </div>\n <OperandButton :active=\"operand\" :disabled=\"isLast\" :on-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 CHANGED Viewed

	@@ -1 +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 { getFilterInfo, getNormalizedSpec, isNumericFilter, isPositionFilter } from \"./utils\";\n\nconst filter = defineModel<EditableFilter>(\"filter\", { required: true });\n\nconst props = defineProps<{\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 onChangeOperand: (op: Operand) => void;\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\ntype Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T][];\nfunction changeFilterType() {\n const defaultFilter = DEFAULT_FILTERS[filter.value.type];\n\n filter.value = (Object.entries(defaultFilter) as Entries<EditableFilter>).reduce(\n (res, [key, val]) => {\n res[key] = filter.value[key] ?? val;\n return res;\n },\n {} as Record<keyof EditableFilter, EditableFilter[keyof EditableFilter]>,\n ) as EditableFilter;\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(filter.value.type);\n const newSourceSpec = getNormalizedSpec(newSourceInfo?.spec);\n if (filterInfo.supportedFor(newSourceSpec)) {\n // don't do anything except update source id\n filter.value.column = newSourceId;\n } else {\n // reset to default filter which fits to any column\n filter.value = {\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(filter.value.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: filter.value.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(filter.value.column);\n },\n set: (value) => {\n filter.value.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 filter.value.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 (filter.value.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(filter.value.value.split(\"\"))].sort().map((v) => ({ value: v, label: v }));\n});\n\nconst stringMatchesError = computed(() => {\n if (filter.value.type !== \"patternMatchesRegularExpression\") {\n return false;\n }\n try {\n new RegExp(filter.value.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 ?? filter.column)\n }}\n </div>\n </div>\n <div :class=\"$style.closeIcon\" @click=\"onDelete(filter.column)\">\n <PlIcon16 name=\"close\" />\n </div>\n </div>\n <div v-else :class=\"$style.top\">\n <PlDropdown\n v-model=\"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(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 v-model=\"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=\"filter.type === 'isNA' \|\| filter.type === 'isNotNA' ? $style.bottom : $style.middle\"\n >\n <PlDropdown\n v-model=\"filter.type\"\n :options=\"filterTypesOptions\"\n :group-position=\"filter.type === 'isNA' \|\| filter.type === 'isNotNA' ? 'bottom' : 'middle'\"\n @update:model-value=\"changeFilterType\"\n />\n </div>\n\n <!-- middle - for fuzzy contains filter -->\n <template v-if=\"filter.type === 'patternFuzzyContainSubsequence'\">\n <div :class=\"$style.middle\">\n <PlTextField v-model=\"filter.value\" placeholder=\"Substring\" group-position=\"middle\" />\n </div>\n <div :class=\"$style.innerSection\">\n <Slider\n v-model=\"filter.maxEdits\"\n :max=\"5\"\n breakpoints\n label=\"Maximum number of substitutions and indels\"\n />\n <PlToggleSwitch v-model=\"filter.substitutionsOnly\" label=\"Substitutions only\" />\n </div>\n </template>\n\n <!-- bottom element - individual settings for every filter type -->\n <div :class=\"$style.bottom\">\n <template v-if=\"filter.type === 'patternEquals' \|\| filter.type === 'patternNotEquals'\">\n <PlAutocomplete\n v-model=\"filter.value\"\n :options-search=\"\n (str, type) => getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n \"\n :disabled=\"inconsistentSourceSelected\"\n :clearable=\"true\"\n group-position=\"bottom\"\n />\n </template>\n <template v-if=\"filter.type === 'inSet' \|\| filter.type === 'notInSet'\">\n <PlAutocompleteMulti\n v-model=\"filter.value\"\n :options-search=\"\n (str, type) => getMultiSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n \"\n :disabled=\"inconsistentSourceSelected\"\n group-position=\"bottom\"\n />\n </template>\n <PlNumberField v-if=\"isNumericFilter(filter)\" v-model=\"filter.x\" group-position=\"bottom\" />\n <PlNumberField v-if=\"isPositionFilter(filter)\" v-model=\"filter.n\" group-position=\"bottom\" />\n <PlTextField\n v-if=\"\n filter.type === 'patternContainSubsequence' \|\|\n filter.type === 'patternNotContainSubsequence'\n \"\n v-model=\"filter.value\"\n placeholder=\"Substring\"\n group-position=\"bottom\"\n />\n <PlTextField\n v-if=\"filter.type === 'patternMatchesRegularExpression'\"\n v-model=\"filter.value\"\n :error=\"stringMatchesError ? 'Regular expression is not valid' : undefined\"\n placeholder=\"Regular expression\"\n group-position=\"bottom\"\n />\n <PlDropdown\n v-if=\"filter.type === 'patternFuzzyContainSubsequence'\"\n v-model=\"filter.wildcard\"\n clearable\n placeholder=\"Wildcard value\"\n :options=\"wildcardOptions\"\n group-position=\"bottom\"\n />\n </div>\n </div>\n <OperandButton :active=\"operand\" :disabled=\"isLast\" :on-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":""}
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 { getFilterInfo, getNormalizedSpec, isNumericFilter, isPositionFilter } from \"./utils\";\n\nconst filter = defineModel<EditableFilter>(\"filter\", { required: true });\n\nconst props = defineProps<{\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 onChangeOperand: (op: Operand) => void;\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\ntype Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T][];\nfunction changeFilterType() {\n const defaultFilter = DEFAULT_FILTERS[filter.value.type];\n\n filter.value = (Object.entries(defaultFilter) as Entries<EditableFilter>).reduce(\n (res, [key, val]) => {\n res[key] = filter.value[key] ?? val;\n return res;\n },\n {} as Record<keyof EditableFilter, EditableFilter[keyof EditableFilter]>,\n ) as EditableFilter;\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(filter.value.type);\n const newSourceSpec = getNormalizedSpec(newSourceInfo?.spec);\n if (filterInfo.supportedFor(newSourceSpec)) {\n // don't do anything except update source id\n filter.value.column = newSourceId;\n } else {\n // reset to default filter which fits to any column\n filter.value = {\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(filter.value.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: filter.value.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(filter.value.column);\n },\n set: (value) => {\n filter.value.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 filter.value.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 (filter.value.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(filter.value.value.split(\"\"))].sort().map((v) => ({ value: v, label: v }));\n});\n\nconst stringMatchesError = computed(() => {\n if (filter.value.type !== \"patternMatchesRegularExpression\") {\n return false;\n }\n try {\n new RegExp(filter.value.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 ?? filter.column)\n }}\n </div>\n </div>\n <div :class=\"$style.closeIcon\" @click=\"onDelete(filter.column)\">\n <PlIcon16 name=\"close\" />\n </div>\n </div>\n <div v-else :class=\"$style.top\">\n <PlDropdown\n v-model=\"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(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 v-model=\"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=\"filter.type === 'isNA' \|\| filter.type === 'isNotNA' ? $style.bottom : $style.middle\"\n >\n <PlDropdown\n v-model=\"filter.type\"\n :options=\"filterTypesOptions\"\n :group-position=\"filter.type === 'isNA' \|\| filter.type === 'isNotNA' ? 'bottom' : 'middle'\"\n @update:model-value=\"changeFilterType\"\n />\n </div>\n\n <!-- middle - for fuzzy contains filter -->\n <template v-if=\"filter.type === 'patternFuzzyContainSubsequence'\">\n <div :class=\"$style.middle\">\n <PlTextField v-model=\"filter.value\" placeholder=\"Substring\" group-position=\"middle\" />\n </div>\n <div :class=\"$style.innerSection\">\n <Slider\n v-model=\"filter.maxEdits\"\n :max=\"5\"\n breakpoints\n label=\"Maximum number of substitutions and indels\"\n />\n <PlToggleSwitch v-model=\"filter.substitutionsOnly\" label=\"Substitutions only\" />\n </div>\n </template>\n\n <!-- bottom element - individual settings for every filter type -->\n <div :class=\"$style.bottom\">\n <PlAutocomplete\n v-if=\"filter.type === 'patternEquals' \|\| filter.type === 'patternNotEquals'\"\n v-model=\"filter.value\"\n :options-search=\"\n (str, type) => getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n \"\n :clearable=\"true\"\n group-position=\"bottom\"\n />\n <PlAutocompleteMulti\n v-if=\"filter.type === 'inSet' \|\| filter.type === 'notInSet'\"\n v-model=\"filter.value\"\n :options-search=\"\n (str, type) => getMultiSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n \"\n :disabled=\"inconsistentSourceSelected\"\n group-position=\"bottom\"\n />\n <PlNumberField v-if=\"isNumericFilter(filter)\" v-model=\"filter.x\" group-position=\"bottom\" />\n <PlNumberField v-if=\"isPositionFilter(filter)\" v-model=\"filter.n\" group-position=\"bottom\" />\n <PlTextField\n v-if=\"\n filter.type === 'patternContainSubsequence' \|\|\n filter.type === 'patternNotContainSubsequence'\n \"\n v-model=\"filter.value\"\n placeholder=\"Substring\"\n group-position=\"bottom\"\n />\n <PlTextField\n v-if=\"filter.type === 'patternMatchesRegularExpression'\"\n v-model=\"filter.value\"\n :error=\"stringMatchesError ? 'Regular expression is not valid' : undefined\"\n placeholder=\"Regular expression\"\n group-position=\"bottom\"\n />\n <PlDropdown\n v-if=\"filter.type === 'patternFuzzyContainSubsequence'\"\n v-model=\"filter.wildcard\"\n clearable\n placeholder=\"Wildcard value\"\n :options=\"wildcardOptions\"\n group-position=\"bottom\"\n />\n </div>\n </div>\n <OperandButton :active=\"operand\" :disabled=\"isLast\" :on-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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterEditor.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAdvancedFilter/FilterEditor.vue"],"names":[],"mappings":"~~AA6fA~~,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;AAKnG,KAAK,WAAW,GAAG;IACjB,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,eAAe,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;AA6MF,KAAK,iBAAiB,GAAG;IACzB,QAAQ,EAAE,cAAc,CAAC;CACxB,GAAG,WAAW,CAAC;;;;;;~~AAgbhB~~,wBAOG"}
1	+ {"version":3,"file":"FilterEditor.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAdvancedFilter/FilterEditor.vue"],"names":[],"mappings":"AA0fA,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;AAKnG,KAAK,WAAW,GAAG;IACjB,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,eAAe,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;AA6MF,KAAK,iBAAiB,GAAG;IACzB,QAAQ,EAAE,cAAc,CAAC;CACxB,GAAG,WAAW,CAAC;;;;;;AA8ahB,wBAOG"}

package/dist/components/PlAdvancedFilter/FilterEditor.vue2.js CHANGED Viewed

@@ -219,14 +219,9 @@ var N = ["title"], P = /* @__PURE__ */ m({
 					modelValue: h.value.value,
 					"onUpdate:modelValue": t[7] ||= (e) => h.value.value = e,
 					"options-search": (e, t) => F(W.value.source, t, e),
-					disabled: z.value,
 					clearable: !0,
 					"group-position": "bottom"
-				}, null, 8, [
-					"modelValue",
-					"options-search",
-					"disabled"
-				])) : u("", !0),
+				}, null, 8, ["modelValue", "options-search"])) : u("", !0),
 				h.value.type === "inSet" || h.value.type === "notInSet" ? (_(), l(b(E), {
 					key: 1,
 					modelValue: h.value.value,

package/dist/components/PlAdvancedFilter/FilterEditor.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterEditor.vue_vue_type_script_setup_true_lang.js","names":["$style"],"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 { getFilterInfo, getNormalizedSpec, isNumericFilter, isPositionFilter } from \"./utils\";\n\nconst filter = defineModel<EditableFilter>(\"filter\", { required: true });\n\nconst props = defineProps<{\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 onChangeOperand: (op: Operand) => void;\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\ntype Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T][];\nfunction changeFilterType() {\n const defaultFilter = DEFAULT_FILTERS[filter.value.type];\n\n filter.value = (Object.entries(defaultFilter) as Entries<EditableFilter>).reduce(\n (res, [key, val]) => {\n res[key] = filter.value[key] ?? val;\n return res;\n },\n {} as Record<keyof EditableFilter, EditableFilter[keyof EditableFilter]>,\n ) as EditableFilter;\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(filter.value.type);\n const newSourceSpec = getNormalizedSpec(newSourceInfo?.spec);\n if (filterInfo.supportedFor(newSourceSpec)) {\n // don't do anything except update source id\n filter.value.column = newSourceId;\n } else {\n // reset to default filter which fits to any column\n filter.value = {\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(filter.value.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: filter.value.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(filter.value.column);\n },\n set: (value) => {\n filter.value.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 filter.value.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 (filter.value.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(filter.value.value.split(\"\"))].sort().map((v) => ({ value: v, label: v }));\n});\n\nconst stringMatchesError = computed(() => {\n if (filter.value.type !== \"patternMatchesRegularExpression\") {\n return false;\n }\n try {\n new RegExp(filter.value.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 ?? filter.column)\n }}\n </div>\n </div>\n <div :class=\"$style.closeIcon\" @click=\"onDelete(filter.column)\">\n <PlIcon16 name=\"close\" />\n </div>\n </div>\n <div v-else :class=\"$style.top\">\n <PlDropdown\n v-model=\"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(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 v-model=\"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=\"filter.type === 'isNA' \|\| filter.type === 'isNotNA' ? $style.bottom : $style.middle\"\n >\n <PlDropdown\n v-model=\"filter.type\"\n :options=\"filterTypesOptions\"\n :group-position=\"filter.type === 'isNA' \|\| filter.type === 'isNotNA' ? 'bottom' : 'middle'\"\n @update:model-value=\"changeFilterType\"\n />\n </div>\n\n <!-- middle - for fuzzy contains filter -->\n <template v-if=\"filter.type === 'patternFuzzyContainSubsequence'\">\n <div :class=\"$style.middle\">\n <PlTextField v-model=\"filter.value\" placeholder=\"Substring\" group-position=\"middle\" />\n </div>\n <div :class=\"$style.innerSection\">\n <Slider\n v-model=\"filter.maxEdits\"\n :max=\"5\"\n breakpoints\n label=\"Maximum number of substitutions and indels\"\n />\n <PlToggleSwitch v-model=\"filter.substitutionsOnly\" label=\"Substitutions only\" />\n </div>\n </template>\n\n <!-- bottom element - individual settings for every filter type -->\n <div :class=\"$style.bottom\">\n <template v-if=\"filter.type === 'patternEquals' \|\| filter.type === 'patternNotEquals'\">\n <PlAutocomplete\n v-model=\"filter.value\"\n :options-search=\"\n (str, type) => getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n \"\n :disabled=\"inconsistentSourceSelected\"\n :clearable=\"true\"\n group-position=\"bottom\"\n />\n </template>\n <template v-if=\"filter.type === 'inSet' \|\| filter.type === 'notInSet'\">\n <PlAutocompleteMulti\n v-model=\"filter.value\"\n :options-search=\"\n (str, type) => getMultiSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n \"\n :disabled=\"inconsistentSourceSelected\"\n group-position=\"bottom\"\n />\n </template>\n <PlNumberField v-if=\"isNumericFilter(filter)\" v-model=\"filter.x\" group-position=\"bottom\" />\n <PlNumberField v-if=\"isPositionFilter(filter)\" v-model=\"filter.n\" group-position=\"bottom\" />\n <PlTextField\n v-if=\"\n filter.type === 'patternContainSubsequence' \|\|\n filter.type === 'patternNotContainSubsequence'\n \"\n v-model=\"filter.value\"\n placeholder=\"Substring\"\n group-position=\"bottom\"\n />\n <PlTextField\n v-if=\"filter.type === 'patternMatchesRegularExpression'\"\n v-model=\"filter.value\"\n :error=\"stringMatchesError ? 'Regular expression is not valid' : undefined\"\n placeholder=\"Regular expression\"\n group-position=\"bottom\"\n />\n <PlDropdown\n v-if=\"filter.type === 'patternFuzzyContainSubsequence'\"\n v-model=\"filter.wildcard\"\n clearable\n placeholder=\"Wildcard value\"\n :options=\"wildcardOptions\"\n group-position=\"bottom\"\n />\n </div>\n </div>\n <OperandButton :active=\"operand\" :disabled=\"isLast\" :on-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":"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"}
1	+ {"version":3,"file":"FilterEditor.vue_vue_type_script_setup_true_lang.js","names":["$style"],"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 { getFilterInfo, getNormalizedSpec, isNumericFilter, isPositionFilter } from \"./utils\";\n\nconst filter = defineModel<EditableFilter>(\"filter\", { required: true });\n\nconst props = defineProps<{\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 onChangeOperand: (op: Operand) => void;\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\ntype Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T][];\nfunction changeFilterType() {\n const defaultFilter = DEFAULT_FILTERS[filter.value.type];\n\n filter.value = (Object.entries(defaultFilter) as Entries<EditableFilter>).reduce(\n (res, [key, val]) => {\n res[key] = filter.value[key] ?? val;\n return res;\n },\n {} as Record<keyof EditableFilter, EditableFilter[keyof EditableFilter]>,\n ) as EditableFilter;\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(filter.value.type);\n const newSourceSpec = getNormalizedSpec(newSourceInfo?.spec);\n if (filterInfo.supportedFor(newSourceSpec)) {\n // don't do anything except update source id\n filter.value.column = newSourceId;\n } else {\n // reset to default filter which fits to any column\n filter.value = {\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(filter.value.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: filter.value.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(filter.value.column);\n },\n set: (value) => {\n filter.value.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 filter.value.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 (filter.value.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(filter.value.value.split(\"\"))].sort().map((v) => ({ value: v, label: v }));\n});\n\nconst stringMatchesError = computed(() => {\n if (filter.value.type !== \"patternMatchesRegularExpression\") {\n return false;\n }\n try {\n new RegExp(filter.value.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 ?? filter.column)\n }}\n </div>\n </div>\n <div :class=\"$style.closeIcon\" @click=\"onDelete(filter.column)\">\n <PlIcon16 name=\"close\" />\n </div>\n </div>\n <div v-else :class=\"$style.top\">\n <PlDropdown\n v-model=\"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(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 v-model=\"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=\"filter.type === 'isNA' \|\| filter.type === 'isNotNA' ? $style.bottom : $style.middle\"\n >\n <PlDropdown\n v-model=\"filter.type\"\n :options=\"filterTypesOptions\"\n :group-position=\"filter.type === 'isNA' \|\| filter.type === 'isNotNA' ? 'bottom' : 'middle'\"\n @update:model-value=\"changeFilterType\"\n />\n </div>\n\n <!-- middle - for fuzzy contains filter -->\n <template v-if=\"filter.type === 'patternFuzzyContainSubsequence'\">\n <div :class=\"$style.middle\">\n <PlTextField v-model=\"filter.value\" placeholder=\"Substring\" group-position=\"middle\" />\n </div>\n <div :class=\"$style.innerSection\">\n <Slider\n v-model=\"filter.maxEdits\"\n :max=\"5\"\n breakpoints\n label=\"Maximum number of substitutions and indels\"\n />\n <PlToggleSwitch v-model=\"filter.substitutionsOnly\" label=\"Substitutions only\" />\n </div>\n </template>\n\n <!-- bottom element - individual settings for every filter type -->\n <div :class=\"$style.bottom\">\n <PlAutocomplete\n v-if=\"filter.type === 'patternEquals' \|\| filter.type === 'patternNotEquals'\"\n v-model=\"filter.value\"\n :options-search=\"\n (str, type) => getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n \"\n :clearable=\"true\"\n group-position=\"bottom\"\n />\n <PlAutocompleteMulti\n v-if=\"filter.type === 'inSet' \|\| filter.type === 'notInSet'\"\n v-model=\"filter.value\"\n :options-search=\"\n (str, type) => getMultiSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)\n \"\n :disabled=\"inconsistentSourceSelected\"\n group-position=\"bottom\"\n />\n <PlNumberField v-if=\"isNumericFilter(filter)\" v-model=\"filter.x\" group-position=\"bottom\" />\n <PlNumberField v-if=\"isPositionFilter(filter)\" v-model=\"filter.n\" group-position=\"bottom\" />\n <PlTextField\n v-if=\"\n filter.type === 'patternContainSubsequence' \|\|\n filter.type === 'patternNotContainSubsequence'\n \"\n v-model=\"filter.value\"\n placeholder=\"Substring\"\n group-position=\"bottom\"\n />\n <PlTextField\n v-if=\"filter.type === 'patternMatchesRegularExpression'\"\n v-model=\"filter.value\"\n :error=\"stringMatchesError ? 'Regular expression is not valid' : undefined\"\n placeholder=\"Regular expression\"\n group-position=\"bottom\"\n />\n <PlDropdown\n v-if=\"filter.type === 'patternFuzzyContainSubsequence'\"\n v-model=\"filter.wildcard\"\n clearable\n placeholder=\"Wildcard value\"\n :options=\"wildcardOptions\"\n group-position=\"bottom\"\n />\n </div>\n </div>\n <OperandButton :active=\"operand\" :disabled=\"isLast\" :on-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":"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"}

package/dist/components/PlAdvancedFilter/types.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { AxisId, AxisSpec, CanonicalizedJson, FilterSpec, FilterSpecLeaf, PColumnSpec, SUniversalPColumnId } from '@platforma-sdk/model';
+import { AxisId, AxisSpec, CanonicalizedJson, FilterSpec, FilterSpecLeaf, PColumnSpec, PTableColumnId, SUniversalPColumnId } from '@platforma-sdk/model';
 import { SUPPORTED_FILTER_TYPES } from './constants';
 export type Operand = "or" | "and";
-export type PlAdvancedFilterColumnId = SUniversalPColumnId | CanonicalizedJson<AxisId>;
+export type PlAdvancedFilterColumnId = SUniversalPColumnId | CanonicalizedJson<AxisId> | CanonicalizedJson<PTableColumnId>;
 export type RequiredMeta = {
     id: number;
     isExpanded?: boolean;

package/dist/components/PlAdvancedFilter/types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PlAdvancedFilter/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,MAAM,EACN,QAAQ,EACR,iBAAiB,EACjB,UAAU,EACV,cAAc,EACd,WAAW,EACX,mBAAmB,EACpB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAE1D,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,KAAK,CAAC;~~AAEnC~~,MAAM,MAAM,wBAAwB,~~GAAG~~,mBAAmB,~~GAAG~~,iBAAiB,CAAC,MAAM,CAAC,CAAC;~~AAEvF~~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"}
1	+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PlAdvancedFilter/types.ts"],"names":[],"mappings":"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"}

package/dist/components/PlAgDataTable/PlAgDataTableV2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlAgDataTableV2.js","names":[],"sources":["../../../src/components/PlAgDataTable/PlAgDataTableV2.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { promiseTimeout, isJsonEqual } from \"@milaboratories/helpers\";\nimport type {\n AxisId,\n PlDataTableGridStateCore,\n PlDataTableStateV2,\n PlSelectionModel,\n PlTableColumnIdJson,\n PTableColumnSpec,\n PTableKey,\n} from \"@platforma-sdk/model\";\nimport {\n getRawPlatformaInstance,\n createPlSelectionModel,\n matchAxisId,\n getAxisId,\n canonicalizeJson,\n isAbortError,\n isColumnOptional,\n} from \"@platforma-sdk/model\";\nimport type { CellRendererSelectorFunc, GridApi, GridState } from \"ag-grid-enterprise\";\nimport { AgGridVue } from \"ag-grid-vue3\";\nimport { computed, effectScope, nextTick, ref, toRefs, watch, watchEffect } from \"vue\";\nimport { AgGridTheme } from \"../../aggrid\";\nimport PlAgCsvExporter from \"../PlAgCsvExporter/PlAgCsvExporter.vue\";\nimport { PlAgGridColumnManager } from \"../PlAgGridColumnManager\";\nimport PlTableFiltersV2 from \"../PlTableFilters/PlTableFiltersV2.vue\";\nimport { PlTableFastSearch } from \"../PlTableFastSearch\";\nimport PlAgDataTableSheets from \"./PlAgDataTableSheets.vue\";\nimport PlAgRowCount from \"./PlAgRowCount.vue\";\nimport { DeferredCircular, ensureNodeVisible } from \"./sources/focus-row\";\nimport { PlAgDataTableRowNumberColId } from \"./sources/row-number\";\nimport type { PlAgCellButtonAxisParams } from \"./sources/table-source-v2\";\nimport { calculateGridOptions } from \"./sources/table-source-v2\";\nimport { useTableState } from \"./sources/table-state-v2\";\nimport type {\n PlAgDataTableV2Controller,\n PlAgDataTableV2Row,\n PlAgOverlayLoadingParams,\n PlAgOverlayNoRowsParams,\n PlDataTableSettingsV2,\n PlDataTableSheetsSettings,\n PlTableRowId,\n} from \"./types\";\nimport { useFilterableColumns } from \"./compositions/useFilterableColumns\";\nimport { useGrid } from \"./compositions/useGrid\";\n\nconst tableState = defineModel<PlDataTableStateV2>({\n required: true,\n});\n/** Warning: selection model value updates are ignored, use updateSelection instead /\nconst selection = defineModel<PlSelectionModel>(\"selection\");\nconst props = defineProps<{\n /* Required component settings /\n settings: Readonly<PlDataTableSettingsV2>;\n\n /\n The disableColumnsPanel prop controls the display of a button that activates\n * the columns management panel in the table. To make the button functional\n * and visible, you must also include the PlAgDataTableToolsPanel component in your layout.\n * This component serves as the target for teleporting the button.\n /\n disableColumnsPanel?: boolean;\n\n /\n The disableFiltersPanel prop controls the display of a button that activates\n * the filters management panel in the table. To make the button functional\n * and visible, you must also include the PlAgDataTableToolsPanel component in your layout.\n * This component serves as the target for teleporting the button.\n /\n disableFiltersPanel?: boolean;\n\n /\n The showExportButton prop controls the display of a button that allows\n * to export table data in CSV format. To make the button functional\n * and visible, you must also include the PlAgDataTableToolsPanel component in your layout.\n * This component serves as the target for teleporting the button.\n /\n showExportButton?: boolean;\n\n /\n The AxisId property is used to configure and display the PlAgTextAndButtonCell component\n /\n showCellButtonForAxisId?: AxisId;\n\n /\n If cellButtonInvokeRowsOnDoubleClick = true, clicking a button inside the row\n * triggers the doubleClick event for the entire row.\n \n If cellButtonInvokeRowsOnDoubleClick = false, the doubleClick event for the row\n * is not triggered, but will triggered cellButtonClicked event with (key: PTableRowKey) argument.\n /\n cellButtonInvokeRowsOnDoubleClick?: boolean;\n\n /* @see {@link PlAgOverlayLoadingParams.loadingText} /\n loadingText?: string;\n\n /* @see {@link PlAgOverlayLoadingParams.runningText} /\n runningText?: string;\n\n /* @see {@link PlAgOverlayLoadingParams.notReadyText} /\n notReadyText?: string;\n\n /* @see {@link PlAgOverlayNoRowsParams.text} /\n noRowsText?: string;\n\n /\n Callback to override the default renderer for a given cell.\n * @see https://www.ag-grid.com/vue-data-grid/component-cell-renderer/#dynamic-component-selection\n */\n cellRendererSelector?: CellRendererSelectorFunc<PlAgDataTableV2Row>;\n}>();\nconst { settings } = toRefs(props);\nconst emit = defineEmits<{\n rowDoubleClicked: [key?: PTableKey];\n cellButtonClicked: [key?: PTableKey];\n newDataRendered: [];\n}>();\n\nconst dataRenderedTracker = new DeferredCircular<GridApi<PlAgDataTableV2Row>>();\nconst { gridApi, gridOptions } = useGrid({\n selection: selection.value,\n noRowsText: props.noRowsText,\n runningText: props.runningText,\n loadingText: props.loadingText,\n notReadyText: props.notReadyText,\n cellRendererSelector: props.cellRendererSelector,\n});\nlet isReloading = false;\ngridOptions.value.onGridPreDestroyed = (event) => {\n if (!isReloading) {\n gridOptions.value.initialState = gridState.value = normalizeColumnVisibility(\n makePartialState(event.api.getState()),\n gridState.value,\n event.api,\n );\n }\n gridApi.value = null;\n};\ngridOptions.value.onRowDoubleClicked = (event) => {\n if (event.data && event.data.axesKey) emit(\"rowDoubleClicked\", event.data.axesKey);\n};\ngridOptions.value.onStateUpdated = (event) => {\n const partialState = normalizeColumnVisibility(\n makePartialState(event.state),\n gridState.value,\n event.api,\n );\n // We have to keep initialState synchronized with gridState for gridState recovery after key updating.\n gridOptions.value.initialState = gridState.value = partialState;\n\n if (!isJsonEqual(event.sources, [\"columnSizing\"])) {\n event.api.autoSizeColumns(\n event.api\n .getAllDisplayedColumns()\n .filter((column) => column.getColId() !== PlAgDataTableRowNumberColId),\n );\n }\n};\n\nconst [filterableColumns, visibleFilterableColumns] = useFilterableColumns(\n () => settings.value.sourceId,\n () => gridOptions.value.columnDefs ?? null,\n);\nconst { gridState, sheetsState, filtersState, searchString } = useTableState(\n tableState,\n settings,\n visibleFilterableColumns,\n);\nconst sheetsSettings = computed<PlDataTableSheetsSettings>(() => {\n const settingsCopy = { ...settings.value };\n return settingsCopy.sourceId !== null\n ? {\n sheets: settingsCopy.sheets ?? [],\n cachedState: [...sheetsState.value],\n }\n : {\n sheets: [],\n cachedState: [],\n };\n});\ngridOptions.value.initialState = gridState.value;\n\n// Restore proper types erased by AgGrid\nfunction makePartialState(state: GridState): PlDataTableGridStateCore {\n return {\n columnOrder: state.columnOrder as\n \| {\n orderedColIds: PlTableColumnIdJson[];\n }\n \| undefined,\n sort: state.sort as\n \| {\n sortModel: {\n colId: PlTableColumnIdJson;\n sort: \"asc\" \| \"desc\";\n }[];\n }\n \| undefined,\n columnVisibility: state.columnVisibility as\n \| {\n hiddenColIds: PlTableColumnIdJson[];\n }\n \| undefined,\n };\n}\n\n// AG Grid returns columnVisibility: undefined when all columns are visible.\n// We need to distinguish \"no state yet\" (use isColumnOptional defaults) from\n// \"user explicitly showed all columns\" (store []). This function normalizes\n// the undefined from AG Grid based on the previous state.\nfunction normalizeColumnVisibility(\n partialState: PlDataTableGridStateCore,\n prevState: PlDataTableGridStateCore,\n api: GridApi<PlAgDataTableV2Row>,\n): PlDataTableGridStateCore {\n if (partialState.columnVisibility !== undefined) return partialState;\n\n if (prevState.columnVisibility !== undefined) {\n // Had explicit visibility state before → user made all columns visible → store [].\n return { ...partialState, columnVisibility: { hiddenColIds: [] } };\n }\n\n // No previous explicit state → compute defaults from current columns\n // to replicate: hide: hiddenColIds?.includes(colId) ?? isColumnOptional(spec.spec)\n const defaultHidden = getDefaultHiddenColIds(api);\n if (defaultHidden.length > 0) {\n return { ...partialState, columnVisibility: { hiddenColIds: defaultHidden } };\n }\n\n return partialState;\n}\n\nfunction getDefaultHiddenColIds(api: GridApi<PlAgDataTableV2Row>): PlTableColumnIdJson[] {\n const cols = api.getAllGridColumns();\n if (!cols) return [];\n return cols\n .filter((col) => {\n const spec = col.getColDef().context as PTableColumnSpec \| undefined;\n return spec && isColumnOptional(spec.spec);\n })\n .map((col) => col.getColId() as PlTableColumnIdJson);\n}\n\n// Normalize columnVisibility for comparison: undefined and { hiddenColIds: [] } are equivalent.\nfunction stateForReloadCompare(state: PlDataTableGridStateCore): PlDataTableGridStateCore {\n const cv = state.columnVisibility;\n const normalizedCv = !cv \|\| cv.hiddenColIds.length === 0 ? undefined : state.columnVisibility;\n return { ...state, columnVisibility: normalizedCv };\n}\n\n// Reload AgGrid when new state arrives from server\nconst reloadKey = ref(0);\nwatch(\n () => [gridApi.value, gridState.value] as const,\n ([gridApi, gridState]) => {\n if (!gridApi \|\| gridApi.isDestroyed()) return;\n const selfState = makePartialState(gridApi.getState());\n if (\n !isJsonEqual(gridState, {}) &&\n !isJsonEqual(stateForReloadCompare(gridState), stateForReloadCompare(selfState))\n ) {\n isReloading = true;\n gridOptions.value.initialState = gridState;\n ++reloadKey.value;\n nextTick(() => {\n isReloading = false;\n });\n }\n },\n);\n\n// Make cellRendererSelector reactive\nconst cellRendererSelector = computed(() => props.cellRendererSelector ?? null);\nwatch(\n () => [gridApi.value, cellRendererSelector.value] as const,\n ([gridApi, cellRendererSelector]) => {\n if (!gridApi \|\| gridApi.isDestroyed()) return;\n gridApi.setGridOption(\"defaultColDef\", {\n ...gridOptions.value.defaultColDef,\n cellRendererSelector: cellRendererSelector ?? undefined,\n });\n },\n);\n\ndefineExpose<PlAgDataTableV2Controller>({\n focusRow: async (rowKey) => {\n const gridApi = await dataRenderedTracker.promise;\n if (gridApi.isDestroyed()) return false;\n\n return ensureNodeVisible(gridApi, (row) => isJsonEqual(row.data?.axesKey, rowKey));\n },\n updateSelection: async ({ axesSpec, selectedKeys }) => {\n const gridApi = await dataRenderedTracker.promise;\n if (gridApi.isDestroyed()) return false;\n\n const axes = selection.value?.axesSpec;\n if (!axes \|\| axes.length !== axesSpec.length) return false;\n\n const mapping = axesSpec.map((spec) => {\n const id = getAxisId(spec);\n return axes.findIndex((axis) => matchAxisId(axis, id));\n });\n const mappingSet = new Set(mapping);\n if (mappingSet.has(-1) \|\| mappingSet.size !== axesSpec.length) return false;\n\n const selectedNodes = selectedKeys.map((key) =>\n canonicalizeJson<PlTableRowId>(mapping.map((index) => key[index])),\n );\n const oldSelectedKeys = gridApi.getServerSideSelectionState()?.toggledNodes ?? [];\n if (!isJsonEqual(oldSelectedKeys, selectedNodes)) {\n gridApi.setServerSideSelectionState({\n selectAll: false,\n toggledNodes: selectedNodes,\n });\n\n // wait for `onSelectionChanged` to update `selection` model\n const scope = effectScope();\n const { resolve, promise } = Promise.withResolvers();\n scope.run(() => watch(selection, resolve, { once: true }));\n try {\n await promiseTimeout(promise, 500);\n } catch {\n return false;\n } finally {\n scope.stop();\n }\n }\n return true;\n },\n});\n\n// Update AgGrid when settings change\nconst defaultSelection = createPlSelectionModel();\nlet oldSettings: PlDataTableSettingsV2 \| null = null;\nconst generation = ref(0);\nwatch(\n () => [gridApi.value, settings.value] as const,\n ([gridApi, settings]) => {\n // Wait for AgGrid reinitialization, gridApi will eventually become initialized\n if (!gridApi \|\| gridApi.isDestroyed()) return;\n // Verify that this is not a false watch trigger\n if (isJsonEqual(settings, oldSettings)) return;\n ++generation.value;\n try {\n // Hide no rows overlay if it is shown, or else loading overlay will not be shown\n gridApi.hideOverlay();\n dataRenderedTracker.reset();\n\n // No data source selected -> reset state to default\n if (settings.sourceId === null) {\n gridApi.updateGridOptions({\n loading: true,\n loadingOverlayComponentParams: {\n ...gridOptions.value.loadingOverlayComponentParams,\n variant: settings.pending ? \"running\" : \"not-ready\",\n } satisfies PlAgOverlayLoadingParams,\n columnDefs: undefined,\n serverSideDatasource: undefined,\n });\n if (selection.value) {\n if (selection.value && !isJsonEqual(selection.value, defaultSelection)) {\n selection.value = createPlSelectionModel();\n }\n gridApi.setServerSideSelectionState({\n selectAll: false,\n toggledNodes: [],\n });\n }\n return;\n }\n\n // Data source changed -> show full page loader, clear selection\n if (settings.sourceId !== oldSettings?.sourceId) {\n gridApi.updateGridOptions({\n loading: true,\n loadingOverlayComponentParams: {\n ...gridOptions.value.loadingOverlayComponentParams,\n variant: \"loading\",\n } satisfies PlAgOverlayLoadingParams,\n });\n if (selection.value && oldSettings?.sourceId) {\n if (selection.value && !isJsonEqual(selection.value, defaultSelection)) {\n selection.value = createPlSelectionModel();\n }\n gridApi.setServerSideSelectionState({\n selectAll: false,\n toggledNodes: [],\n });\n }\n }\n\n // Model updated -> show skeletons instead of data\n const sourceChanged =\n settings.model?.sourceId && settings.model.sourceId !== settings.sourceId;\n if (!settings.model \|\| sourceChanged) {\n const state = gridApi.getServerSideGroupLevelState();\n const rowCount = !sourceChanged && state.length > 0 ? state[0].rowCount : 1;\n return gridApi.updateGridOptions({\n serverSideDatasource: {\n getRows: (params) => {\n params.success({ rowData: [], rowCount });\n },\n },\n });\n }\n\n // Model ready -> calculate new state\n const stateGeneration = generation.value;\n calculateGridOptions({\n generation,\n pfDriver: getRawPlatformaInstance().pFrameDriver,\n model: settings.model,\n sheets: settings.sheets ?? [],\n dataRenderedTracker,\n hiddenColIds: gridState.value.columnVisibility?.hiddenColIds,\n cellButtonAxisParams: {\n showCellButtonForAxisId: props.showCellButtonForAxisId,\n cellButtonInvokeRowsOnDoubleClick: props.cellButtonInvokeRowsOnDoubleClick,\n trigger: (key?: PTableKey) => emit(\"cellButtonClicked\", key),\n } satisfies PlAgCellButtonAxisParams,\n })\n .then((result) => {\n if (gridApi.isDestroyed() \|\| stateGeneration !== generation.value) return;\n const { axesSpec, ...options } = result;\n gridApi.updateGridOptions({\n ...options,\n });\n if (selection.value) {\n // Update selection if axesSpec changed, as order of axes may have changed and so we need to remap selected keys\n const { axesSpec: oldAxesSpec, selectedKeys: oldSelectedKeys } = selection.value;\n if (!isJsonEqual(oldAxesSpec, axesSpec)) {\n if (!oldAxesSpec \|\| axesSpec.length !== oldAxesSpec.length) {\n const newSelection: PlSelectionModel = { axesSpec, selectedKeys: [] };\n if (!isJsonEqual(selection.value, newSelection)) {\n selection.value = newSelection;\n }\n return gridApi.setServerSideSelectionState({\n selectAll: false,\n toggledNodes: [],\n });\n }\n\n const mapping = oldAxesSpec\n .map(getAxisId)\n .map((id) => axesSpec.findIndex((axis) => matchAxisId(axis, id)));\n const mappingSet = new Set(mapping);\n if (mappingSet.has(-1) \|\| mappingSet.size !== axesSpec.length) {\n const newSelection: PlSelectionModel = { axesSpec, selectedKeys: [] };\n if (!isJsonEqual(selection.value, newSelection)) {\n selection.value = newSelection;\n }\n return gridApi.setServerSideSelectionState({\n selectAll: false,\n toggledNodes: [],\n });\n }\n\n const selectedNodes = oldSelectedKeys.map((key) =>\n mapping.map((index) => key[index]),\n );\n const newSelection: PlSelectionModel = { axesSpec, selectedKeys: selectedNodes };\n if (!isJsonEqual(selection.value, newSelection)) {\n selection.value = newSelection;\n }\n return gridApi.setServerSideSelectionState({\n selectAll: false,\n toggledNodes: selectedNodes.map((key) => canonicalizeJson<PlTableRowId>(key)),\n });\n }\n }\n })\n .catch((error: unknown) => {\n if (gridApi.isDestroyed() \|\| stateGeneration !== generation.value) return;\n if (isAbortError(error)) return;\n console.trace(error);\n })\n .finally(() => {\n if (gridApi.isDestroyed() \|\| stateGeneration !== generation.value) return;\n gridApi.updateGridOptions({\n loading: false,\n });\n });\n dataRenderedTracker.promise.then(() => emit(\"newDataRendered\"));\n } catch (error: unknown) {\n console.trace(error);\n } finally {\n oldSettings = settings;\n }\n },\n);\n\nwatch(\n () => ({\n gridApi: gridApi.value,\n loadingText: props.loadingText,\n runningText: props.runningText,\n notReadyText: props.notReadyText,\n noRowsText: props.noRowsText,\n }),\n ({ gridApi, loadingText, runningText, notReadyText, noRowsText }) => {\n if (!gridApi \|\| gridApi.isDestroyed()) return;\n gridApi.updateGridOptions({\n loadingOverlayComponentParams: {\n ...gridOptions.value.loadingOverlayComponentParams,\n loadingText,\n runningText,\n notReadyText,\n },\n noRowsOverlayComponentParams: {\n ...gridOptions.value.noRowsOverlayComponentParams,\n text: noRowsText,\n },\n });\n },\n);\n\nwatchEffect(() => {\n if (!gridApi.value \|\| gridApi.value?.isDestroyed()) return;\n gridApi.value.updateGridOptions({\n statusBar: gridOptions.value.loading\n ? undefined\n : {\n statusPanels: [{ statusPanel: PlAgRowCount, align: \"left\" }],\n },\n });\n});\n</script>\n\n<template>\n <div :class=\"$style.container\">\n <PlAgGridColumnManager v-if=\"gridApi && !disableColumnsPanel\" :api=\"gridApi\" />\n <PlTableFiltersV2\n v-if=\"!disableFiltersPanel\"\n v-model=\"filtersState\"\n :columns=\"filterableColumns\"\n />\n <PlAgCsvExporter v-if=\"gridApi && showExportButton\" :api=\"gridApi\" />\n <PlAgDataTableSheets v-model=\"sheetsState\" :settings=\"sheetsSettings\">\n <template v-if=\"$slots['before-sheets']\" #before>\n <slot name=\"before-sheets\" />\n </template>\n <template v-if=\"$slots['after-sheets']\" #after>\n <slot name=\"after-sheets\" />\n </template>\n </PlAgDataTableSheets>\n <PlTableFastSearch v-model=\"searchString\" />\n <AgGridVue\n :key=\"reloadKey\"\n :theme=\"AgGridTheme\"\n :class=\"$style.grid\"\n :grid-options=\"gridOptions\"\n />\n </div>\n</template>\n\n<style lang=\"css\" module>\n.container {\n display: flex;\n flex-direction: column;\n height: 100%;\n gap: 12px;\n}\n\n.grid {\n flex: 1;\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"PlAgDataTableV2.js","names":[],"sources":["../../../src/components/PlAgDataTable/PlAgDataTableV2.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { promiseTimeout, isJsonEqual } from \"@milaboratories/helpers\";\nimport type {\n AxisId,\n PlDataTableGridStateCore,\n PlDataTableStateV2,\n PlSelectionModel,\n PlTableColumnIdJson,\n PTableColumnSpec,\n PTableKey,\n} from \"@platforma-sdk/model\";\nimport {\n getRawPlatformaInstance,\n createPlSelectionModel,\n matchAxisId,\n getAxisId,\n canonicalizeJson,\n isAbortError,\n isColumnOptional,\n} from \"@platforma-sdk/model\";\nimport type { CellRendererSelectorFunc, GridApi, GridState } from \"ag-grid-enterprise\";\nimport { AgGridVue } from \"ag-grid-vue3\";\nimport { computed, effectScope, nextTick, ref, toRefs, watch, watchEffect } from \"vue\";\nimport { AgGridTheme } from \"../../aggrid\";\nimport PlAgCsvExporter from \"../PlAgCsvExporter/PlAgCsvExporter.vue\";\nimport { PlAgGridColumnManager } from \"../PlAgGridColumnManager\";\nimport PlTableFiltersV2 from \"../PlTableFilters/PlTableFiltersV2.vue\";\nimport { PlTableFastSearch } from \"../PlTableFastSearch\";\nimport PlAgDataTableSheets from \"./PlAgDataTableSheets.vue\";\nimport PlAgRowCount from \"./PlAgRowCount.vue\";\nimport { DeferredCircular, ensureNodeVisible } from \"./sources/focus-row\";\nimport { PlAgDataTableRowNumberColId } from \"./sources/row-number\";\nimport type { PlAgCellButtonAxisParams } from \"./sources/table-source-v2\";\nimport { calculateGridOptions } from \"./sources/table-source-v2\";\nimport { useTableState } from \"./sources/table-state-v2\";\nimport type {\n PlAgDataTableV2Controller,\n PlAgDataTableV2Row,\n PlAgOverlayLoadingParams,\n PlAgOverlayNoRowsParams,\n PlDataTableSettingsV2,\n PlDataTableSheetsSettings,\n PlTableRowId,\n} from \"./types\";\nimport { useFilterableColumns } from \"./compositions/useFilterableColumns\";\nimport { useGrid } from \"./compositions/useGrid\";\n\nconst tableState = defineModel<PlDataTableStateV2>({\n required: true,\n});\n/** Warning: selection model value updates are ignored, use updateSelection instead /\nconst selection = defineModel<PlSelectionModel>(\"selection\");\nconst props = defineProps<{\n /* Required component settings /\n settings: Readonly<PlDataTableSettingsV2>;\n\n /\n The disableColumnsPanel prop controls the display of a button that activates\n * the columns management panel in the table. To make the button functional\n * and visible, you must also include the PlAgDataTableToolsPanel component in your layout.\n * This component serves as the target for teleporting the button.\n /\n disableColumnsPanel?: boolean;\n\n /\n The disableFiltersPanel prop controls the display of a button that activates\n * the filters management panel in the table. To make the button functional\n * and visible, you must also include the PlAgDataTableToolsPanel component in your layout.\n * This component serves as the target for teleporting the button.\n /\n disableFiltersPanel?: boolean;\n\n /\n The showExportButton prop controls the display of a button that allows\n * to export table data in CSV format. To make the button functional\n * and visible, you must also include the PlAgDataTableToolsPanel component in your layout.\n * This component serves as the target for teleporting the button.\n /\n showExportButton?: boolean;\n\n /\n The AxisId property is used to configure and display the PlAgTextAndButtonCell component\n /\n showCellButtonForAxisId?: AxisId;\n\n /\n If cellButtonInvokeRowsOnDoubleClick = true, clicking a button inside the row\n * triggers the doubleClick event for the entire row.\n \n If cellButtonInvokeRowsOnDoubleClick = false, the doubleClick event for the row\n * is not triggered, but will triggered cellButtonClicked event with (key: PTableRowKey) argument.\n /\n cellButtonInvokeRowsOnDoubleClick?: boolean;\n\n /* @see {@link PlAgOverlayLoadingParams.loadingText} /\n loadingText?: string;\n\n /* @see {@link PlAgOverlayLoadingParams.runningText} /\n runningText?: string;\n\n /* @see {@link PlAgOverlayLoadingParams.notReadyText} /\n notReadyText?: string;\n\n /* @see {@link PlAgOverlayNoRowsParams.text} /\n noRowsText?: string;\n\n /\n Callback to override the default renderer for a given cell.\n * @see https://www.ag-grid.com/vue-data-grid/component-cell-renderer/#dynamic-component-selection\n */\n cellRendererSelector?: CellRendererSelectorFunc<PlAgDataTableV2Row>;\n}>();\nconst { settings } = toRefs(props);\nconst emit = defineEmits<{\n rowDoubleClicked: [key?: PTableKey];\n cellButtonClicked: [key?: PTableKey];\n newDataRendered: [];\n}>();\n\nconst dataRenderedTracker = new DeferredCircular<GridApi<PlAgDataTableV2Row>>();\nconst { gridApi, gridOptions } = useGrid({\n selection: selection.value,\n noRowsText: props.noRowsText,\n runningText: props.runningText,\n loadingText: props.loadingText,\n notReadyText: props.notReadyText,\n cellRendererSelector: props.cellRendererSelector,\n});\nlet isReloading = false;\ngridOptions.value.onGridPreDestroyed = (event) => {\n if (!isReloading) {\n gridOptions.value.initialState = gridState.value = normalizeColumnVisibility(\n makePartialState(event.api.getState()),\n gridState.value,\n event.api,\n );\n }\n gridApi.value = null;\n};\ngridOptions.value.onRowDoubleClicked = (event) => {\n if (event.data && event.data.axesKey) emit(\"rowDoubleClicked\", event.data.axesKey);\n};\ngridOptions.value.onStateUpdated = (event) => {\n const partialState = normalizeColumnVisibility(\n makePartialState(event.state),\n gridState.value,\n event.api,\n );\n // We have to keep initialState synchronized with gridState for gridState recovery after key updating.\n gridOptions.value.initialState = gridState.value = partialState;\n\n if (!isJsonEqual(event.sources, [\"columnSizing\"])) {\n event.api.autoSizeColumns(\n event.api\n .getAllDisplayedColumns()\n .filter((column) => column.getColId() !== PlAgDataTableRowNumberColId),\n );\n }\n};\n\nconst [filterableColumns, visibleFilterableColumns] = useFilterableColumns(\n () => settings.value.sourceId,\n () => gridOptions.value.columnDefs ?? null,\n);\nconst { gridState, sheetsState, filtersState, searchString } = useTableState(\n tableState,\n settings,\n visibleFilterableColumns,\n);\nconst sheetsSettings = computed<PlDataTableSheetsSettings>(() => {\n const settingsCopy = { ...settings.value };\n return settingsCopy.sourceId !== null\n ? {\n sheets: settingsCopy.sheets ?? [],\n cachedState: [...sheetsState.value],\n }\n : {\n sheets: [],\n cachedState: [],\n };\n});\ngridOptions.value.initialState = gridState.value;\n\n// Restore proper types erased by AgGrid\nfunction makePartialState(state: GridState): PlDataTableGridStateCore {\n return {\n columnOrder: state.columnOrder as\n \| {\n orderedColIds: PlTableColumnIdJson[];\n }\n \| undefined,\n sort: state.sort as\n \| {\n sortModel: {\n colId: PlTableColumnIdJson;\n sort: \"asc\" \| \"desc\";\n }[];\n }\n \| undefined,\n columnVisibility: state.columnVisibility as\n \| {\n hiddenColIds: PlTableColumnIdJson[];\n }\n \| undefined,\n };\n}\n\n// AG Grid returns columnVisibility: undefined when all columns are visible.\n// We need to distinguish \"no state yet\" (use isColumnOptional defaults) from\n// \"user explicitly showed all columns\" (store []). This function normalizes\n// the undefined from AG Grid based on the previous state.\nfunction normalizeColumnVisibility(\n partialState: PlDataTableGridStateCore,\n prevState: PlDataTableGridStateCore,\n api: GridApi<PlAgDataTableV2Row>,\n): PlDataTableGridStateCore {\n if (partialState.columnVisibility !== undefined) return partialState;\n\n if (prevState.columnVisibility !== undefined) {\n // Had explicit visibility state before → user made all columns visible → store [].\n return { ...partialState, columnVisibility: { hiddenColIds: [] } };\n }\n\n // No previous explicit state → compute defaults from current columns\n // to replicate: hide: hiddenColIds?.includes(colId) ?? isColumnOptional(spec.spec)\n const defaultHidden = getDefaultHiddenColIds(api);\n if (defaultHidden.length > 0) {\n return { ...partialState, columnVisibility: { hiddenColIds: defaultHidden } };\n }\n\n return partialState;\n}\n\nfunction getDefaultHiddenColIds(api: GridApi<PlAgDataTableV2Row>): PlTableColumnIdJson[] {\n const cols = api.getAllGridColumns();\n if (!cols) return [];\n return cols\n .filter((col) => {\n const spec = col.getColDef().context as PTableColumnSpec \| undefined;\n return spec && isColumnOptional(spec.spec);\n })\n .map((col) => col.getColId() as PlTableColumnIdJson);\n}\n\n// Normalize columnVisibility for comparison: undefined and { hiddenColIds: [] } are equivalent.\nfunction stateForReloadCompare(state: PlDataTableGridStateCore): PlDataTableGridStateCore {\n const cv = state.columnVisibility;\n const normalizedCv = !cv \|\| cv.hiddenColIds.length === 0 ? undefined : state.columnVisibility;\n return { ...state, columnVisibility: normalizedCv };\n}\n\n// Reload AgGrid when new state arrives from server\nconst reloadKey = ref(0);\nwatch(\n () => [gridApi.value, gridState.value] as const,\n ([gridApi, gridState]) => {\n if (!gridApi \|\| gridApi.isDestroyed()) return;\n const selfState = makePartialState(gridApi.getState());\n if (\n !isJsonEqual(gridState, {}) &&\n !isJsonEqual(stateForReloadCompare(gridState), stateForReloadCompare(selfState))\n ) {\n isReloading = true;\n gridOptions.value.initialState = gridState;\n ++reloadKey.value;\n nextTick(() => {\n isReloading = false;\n });\n }\n },\n);\n\n// Make cellRendererSelector reactive\nconst cellRendererSelector = computed(() => props.cellRendererSelector ?? null);\nwatch(\n () => [gridApi.value, cellRendererSelector.value] as const,\n ([gridApi, cellRendererSelector]) => {\n if (!gridApi \|\| gridApi.isDestroyed()) return;\n gridApi.setGridOption(\"defaultColDef\", {\n ...gridOptions.value.defaultColDef,\n cellRendererSelector: cellRendererSelector ?? undefined,\n });\n },\n);\n\ndefineExpose<PlAgDataTableV2Controller>({\n focusRow: async (rowKey) => {\n const gridApi = await dataRenderedTracker.promise;\n if (gridApi.isDestroyed()) return false;\n\n return ensureNodeVisible(gridApi, (row) => isJsonEqual(row.data?.axesKey, rowKey));\n },\n updateSelection: async ({ axesSpec, selectedKeys }) => {\n const gridApi = await dataRenderedTracker.promise;\n if (gridApi.isDestroyed()) return false;\n\n const axes = selection.value?.axesSpec;\n if (!axes \|\| axes.length !== axesSpec.length) return false;\n\n const mapping = axesSpec.map((spec) => {\n const id = getAxisId(spec);\n return axes.findIndex((axis) => matchAxisId(axis, id));\n });\n const mappingSet = new Set(mapping);\n if (mappingSet.has(-1) \|\| mappingSet.size !== axesSpec.length) return false;\n\n const selectedNodes = selectedKeys.map((key) =>\n canonicalizeJson<PlTableRowId>(mapping.map((index) => key[index])),\n );\n const oldSelectedKeys = gridApi.getServerSideSelectionState()?.toggledNodes ?? [];\n if (!isJsonEqual(oldSelectedKeys, selectedNodes)) {\n gridApi.setServerSideSelectionState({\n selectAll: false,\n toggledNodes: selectedNodes,\n });\n\n // wait for `onSelectionChanged` to update `selection` model\n const scope = effectScope();\n const { resolve, promise } = Promise.withResolvers();\n scope.run(() => watch(selection, resolve, { once: true }));\n try {\n await promiseTimeout(promise, 500);\n } catch {\n return false;\n } finally {\n scope.stop();\n }\n }\n return true;\n },\n});\n\n// Update AgGrid when settings change\nconst defaultSelection = createPlSelectionModel();\nlet oldSettings: PlDataTableSettingsV2 \| null = null;\nconst generation = ref(0);\nwatch(\n () => [gridApi.value, settings.value] as const,\n ([gridApi, settings]) => {\n // Wait for AgGrid reinitialization, gridApi will eventually become initialized\n if (!gridApi \|\| gridApi.isDestroyed()) return;\n // Verify that this is not a false watch trigger\n if (isJsonEqual(settings, oldSettings)) return;\n ++generation.value;\n try {\n // Hide no rows overlay if it is shown, or else loading overlay will not be shown\n gridApi.hideOverlay();\n dataRenderedTracker.reset();\n\n // No data source selected -> reset state to default\n if (settings.sourceId === null) {\n gridApi.updateGridOptions({\n loading: true,\n loadingOverlayComponentParams: {\n ...gridOptions.value.loadingOverlayComponentParams,\n variant: settings.pending ? \"running\" : \"not-ready\",\n } satisfies PlAgOverlayLoadingParams,\n columnDefs: undefined,\n serverSideDatasource: undefined,\n });\n if (selection.value) {\n if (selection.value && !isJsonEqual(selection.value, defaultSelection)) {\n selection.value = createPlSelectionModel();\n }\n gridApi.setServerSideSelectionState({\n selectAll: false,\n toggledNodes: [],\n });\n }\n return;\n }\n\n // Data source changed -> show full page loader, clear selection\n if (settings.sourceId !== oldSettings?.sourceId) {\n gridApi.updateGridOptions({\n loading: true,\n loadingOverlayComponentParams: {\n ...gridOptions.value.loadingOverlayComponentParams,\n variant: \"loading\",\n } satisfies PlAgOverlayLoadingParams,\n });\n if (selection.value && oldSettings?.sourceId) {\n if (selection.value && !isJsonEqual(selection.value, defaultSelection)) {\n selection.value = createPlSelectionModel();\n }\n gridApi.setServerSideSelectionState({\n selectAll: false,\n toggledNodes: [],\n });\n }\n }\n\n // Model updated -> show skeletons instead of data\n const sourceChanged =\n settings.model?.sourceId && settings.model.sourceId !== settings.sourceId;\n if (!settings.model \|\| sourceChanged) {\n const state = gridApi.getServerSideGroupLevelState();\n const rowCount = !sourceChanged && state.length > 0 ? state[0].rowCount : 1;\n return gridApi.updateGridOptions({\n serverSideDatasource: {\n getRows: (params) => {\n params.success({ rowData: [], rowCount });\n },\n },\n });\n }\n\n // Model ready -> calculate new state\n const stateGeneration = generation.value;\n calculateGridOptions({\n generation,\n pfDriver: getRawPlatformaInstance().pFrameDriver,\n model: settings.model,\n sheets: settings.sheets ?? [],\n dataRenderedTracker,\n hiddenColIds: gridState.value.columnVisibility?.hiddenColIds,\n cellButtonAxisParams: {\n showCellButtonForAxisId: props.showCellButtonForAxisId,\n cellButtonInvokeRowsOnDoubleClick: props.cellButtonInvokeRowsOnDoubleClick,\n trigger: (key?: PTableKey) => emit(\"cellButtonClicked\", key),\n } satisfies PlAgCellButtonAxisParams,\n })\n .then((result) => {\n if (gridApi.isDestroyed() \|\| stateGeneration !== generation.value) return;\n const { axesSpec, ...options } = result;\n gridApi.updateGridOptions({\n ...options,\n });\n if (selection.value) {\n // Update selection if axesSpec changed, as order of axes may have changed and so we need to remap selected keys\n const { axesSpec: oldAxesSpec, selectedKeys: oldSelectedKeys } = selection.value;\n if (!isJsonEqual(oldAxesSpec, axesSpec)) {\n if (!oldAxesSpec \|\| axesSpec.length !== oldAxesSpec.length) {\n const newSelection: PlSelectionModel = { axesSpec, selectedKeys: [] };\n if (!isJsonEqual(selection.value, newSelection)) {\n selection.value = newSelection;\n }\n return gridApi.setServerSideSelectionState({\n selectAll: false,\n toggledNodes: [],\n });\n }\n\n const mapping = oldAxesSpec\n .map(getAxisId)\n .map((id) => axesSpec.findIndex((axis) => matchAxisId(axis, id)));\n const mappingSet = new Set(mapping);\n if (mappingSet.has(-1) \|\| mappingSet.size !== axesSpec.length) {\n const newSelection: PlSelectionModel = { axesSpec, selectedKeys: [] };\n if (!isJsonEqual(selection.value, newSelection)) {\n selection.value = newSelection;\n }\n return gridApi.setServerSideSelectionState({\n selectAll: false,\n toggledNodes: [],\n });\n }\n\n const selectedNodes = oldSelectedKeys.map((key) =>\n mapping.map((index) => key[index]),\n );\n const newSelection: PlSelectionModel = { axesSpec, selectedKeys: selectedNodes };\n if (!isJsonEqual(selection.value, newSelection)) {\n selection.value = newSelection;\n }\n return gridApi.setServerSideSelectionState({\n selectAll: false,\n toggledNodes: selectedNodes.map((key) => canonicalizeJson<PlTableRowId>(key)),\n });\n }\n }\n })\n .catch((error: unknown) => {\n if (gridApi.isDestroyed() \|\| stateGeneration !== generation.value) return;\n if (isAbortError(error)) return;\n console.trace(error);\n })\n .finally(() => {\n if (gridApi.isDestroyed() \|\| stateGeneration !== generation.value) return;\n gridApi.updateGridOptions({\n loading: false,\n });\n });\n dataRenderedTracker.promise.then(() => emit(\"newDataRendered\"));\n } catch (error: unknown) {\n console.trace(error);\n } finally {\n oldSettings = settings;\n }\n },\n);\n\nwatch(\n () => ({\n gridApi: gridApi.value,\n loadingText: props.loadingText,\n runningText: props.runningText,\n notReadyText: props.notReadyText,\n noRowsText: props.noRowsText,\n }),\n ({ gridApi, loadingText, runningText, notReadyText, noRowsText }) => {\n if (!gridApi \|\| gridApi.isDestroyed()) return;\n gridApi.updateGridOptions({\n loadingOverlayComponentParams: {\n ...gridOptions.value.loadingOverlayComponentParams,\n loadingText,\n runningText,\n notReadyText,\n },\n noRowsOverlayComponentParams: {\n ...gridOptions.value.noRowsOverlayComponentParams,\n text: noRowsText,\n },\n });\n },\n);\n\nwatchEffect(() => {\n if (!gridApi.value \|\| gridApi.value?.isDestroyed()) return;\n gridApi.value.updateGridOptions({\n statusBar: gridOptions.value.loading\n ? undefined\n : {\n statusPanels: [{ statusPanel: PlAgRowCount, align: \"left\" }],\n },\n });\n});\n</script>\n\n<template>\n <div :class=\"$style.container\">\n <PlAgGridColumnManager v-if=\"gridApi && !disableColumnsPanel\" :api=\"gridApi\" />\n <PlTableFiltersV2\n v-if=\"!disableFiltersPanel\"\n v-model=\"filtersState\"\n :pframe-handle=\"'model' in settings ? settings?.model?.fullPframeHandle : undefined\"\n :columns=\"filterableColumns\"\n />\n <PlAgCsvExporter v-if=\"gridApi && showExportButton\" :api=\"gridApi\" />\n <PlAgDataTableSheets v-model=\"sheetsState\" :settings=\"sheetsSettings\">\n <template v-if=\"$slots['before-sheets']\" #before>\n <slot name=\"before-sheets\" />\n </template>\n <template v-if=\"$slots['after-sheets']\" #after>\n <slot name=\"after-sheets\" />\n </template>\n </PlAgDataTableSheets>\n <PlTableFastSearch v-model=\"searchString\" />\n <AgGridVue\n :key=\"reloadKey\"\n :theme=\"AgGridTheme\"\n :class=\"$style.grid\"\n :grid-options=\"gridOptions\"\n />\n </div>\n</template>\n\n<style lang=\"css\" module>\n.container {\n display: flex;\n flex-direction: column;\n height: 100%;\n gap: 12px;\n}\n\n.grid {\n flex: 1;\n}\n</style>\n"],"mappings":""}