From 626e057e55587c5071e6054c973be0e61a9e9f3a Mon Sep 17 00:00:00 2001 From: Sergej-Vlasov Date: Tue, 24 Dec 2024 15:16:28 +0000 Subject: [PATCH 1/4] use correct option property for variable options sorting --- .../src/variables/variants/query/utils.ts | 57 +++++++++---------- 1 file changed, 27 insertions(+), 30 deletions(-) diff --git a/packages/scenes/src/variables/variants/query/utils.ts b/packages/scenes/src/variables/variants/query/utils.ts index 28f40c58b..eb48a0b51 100644 --- a/packages/scenes/src/variables/variants/query/utils.ts +++ b/packages/scenes/src/variables/variants/query/utils.ts @@ -74,40 +74,11 @@ const getAllMatches = (str: string, regex: RegExp): RegExpExecArray[] => { return results; }; -export const sortVariableValues = (options: any[], sortOrder: VariableSort) => { +export const sortVariableValues = (options: VariableValueOption[], sortOrder: VariableSort) => { if (sortOrder === VariableSort.disabled) { return options; } - // @ts-ignore - const sortByNumeric = (opt) => { - if (!opt.text) { - return -1; - } - const matches = opt.text.match(/.*?(\d+).*/); - if (!matches || matches.length < 2) { - return -1; - } else { - return parseInt(matches[1], 10); - } - }; - - // @ts-ignore - const sortByNaturalSort = (options) => { - //@ts-ignore - return options.sort((a, b) => { - if (!a.text) { - return -1; - } - - if (!b.text) { - return 1; - } - - return a.text.localeCompare(b.text, undefined, { numeric: true }); - }); - }; - switch (sortOrder) { case VariableSort.alphabeticalAsc: options = sortBy(options, 'label'); @@ -146,3 +117,29 @@ export const sortVariableValues = (options: any[], sortOrder: VariableSort) => { } return options; }; + +function sortByNumeric(opt: VariableValueOption) { + if (!opt.label) { + return -1; + } + const matches = opt.label.match(/.*?(\d+).*/); + if (!matches || matches.length < 2) { + return -1; + } else { + return parseInt(matches[1], 10); + } +} + +function sortByNaturalSort(options: VariableValueOption[]) { + return options.sort((a, b) => { + if (!a.label) { + return -1; + } + + if (!b.label) { + return 1; + } + + return a.label.localeCompare(b.label, undefined, { numeric: true }); + }); +} From db63ed833fc0af79bc1079efe52cfc29d4331529 Mon Sep 17 00:00:00 2001 From: Sergej-Vlasov Date: Tue, 24 Dec 2024 16:59:30 +0000 Subject: [PATCH 2/4] adjust tests --- .../src/variables/variants/query/QueryVariable.test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/scenes/src/variables/variants/query/QueryVariable.test.tsx b/packages/scenes/src/variables/variants/query/QueryVariable.test.tsx index 601cebc52..af42f4684 100644 --- a/packages/scenes/src/variables/variants/query/QueryVariable.test.tsx +++ b/packages/scenes/src/variables/variants/query/QueryVariable.test.tsx @@ -322,9 +322,9 @@ describe.each(['11.1.2', '11.1.1'])('QueryVariable', (v) => { await lastValueFrom(variable.validateAndUpdate()); expect(variable.state.options).toEqual([ - { label: 'val1', value: 'val1' }, - { label: 'val2', value: 'val2' }, { label: 'val11', value: 'val11' }, + { label: 'val2', value: 'val2' }, + { label: 'val1', value: 'val1' }, ]); }); @@ -339,9 +339,9 @@ describe.each(['11.1.2', '11.1.1'])('QueryVariable', (v) => { await lastValueFrom(variable.validateAndUpdate()); expect(variable.state.options).toEqual([ - { label: 'val11', value: 'val11' }, - { label: 'val2', value: 'val2' }, { label: 'val1', value: 'val1' }, + { label: 'val2', value: 'val2' }, + { label: 'val11', value: 'val11' }, ]); }); From 8aee4651b1970cca3203b345aeea7d846dbd2ca9 Mon Sep 17 00:00:00 2001 From: Sergej-Vlasov Date: Thu, 2 Jan 2025 13:56:06 +0000 Subject: [PATCH 3/4] replace toLocaleCompare with Intl.Collator for performance --- .../scenes/src/variables/variants/query/utils.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/scenes/src/variables/variants/query/utils.ts b/packages/scenes/src/variables/variants/query/utils.ts index eb48a0b51..bee406f81 100644 --- a/packages/scenes/src/variables/variants/query/utils.ts +++ b/packages/scenes/src/variables/variants/query/utils.ts @@ -130,16 +130,10 @@ function sortByNumeric(opt: VariableValueOption) { } } +const collator = new Intl.Collator(undefined, { sensitivity: 'accent', numeric: true }); + function sortByNaturalSort(options: VariableValueOption[]) { return options.sort((a, b) => { - if (!a.label) { - return -1; - } - - if (!b.label) { - return 1; - } - - return a.label.localeCompare(b.label, undefined, { numeric: true }); + return collator.compare(a.label, b.label); }); } From 8cc08a9493566ba82f693706051debdc6fbf1498 Mon Sep 17 00:00:00 2001 From: Sergej-Vlasov Date: Thu, 2 Jan 2025 14:52:16 +0000 Subject: [PATCH 4/4] return new array instead of modifiying existing for natural sort --- packages/scenes/src/variables/variants/query/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/scenes/src/variables/variants/query/utils.ts b/packages/scenes/src/variables/variants/query/utils.ts index bee406f81..bfc73c150 100644 --- a/packages/scenes/src/variables/variants/query/utils.ts +++ b/packages/scenes/src/variables/variants/query/utils.ts @@ -133,7 +133,7 @@ function sortByNumeric(opt: VariableValueOption) { const collator = new Intl.Collator(undefined, { sensitivity: 'accent', numeric: true }); function sortByNaturalSort(options: VariableValueOption[]) { - return options.sort((a, b) => { + return options.slice().sort((a, b) => { return collator.compare(a.label, b.label); }); }