Loki: Fix label browser not sorted after selection of a label (#107394)

* Explore(Loki): fix label browser not sorted after selection of a label

Signed-off-by: Paulo Dias <paulodias.gm@gmail.com>

* fix: use collator instead of localCompares

Signed-off-by: Paulo Dias <paulodias.gm@gmail.com>

---------

Signed-off-by: Paulo Dias <paulodias.gm@gmail.com>
Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>
This commit is contained in:
Paulo Dias
2025-07-04 18:15:29 +02:00
committed by GitHub
co-authored by Zoltán Bedi
parent fe3d06928f
commit 5edbdb7c4f
@@ -26,6 +26,7 @@ const MAX_LABEL_COUNT = 1000;
const MAX_VALUE_COUNT = 10000;
const MAX_AUTO_SELECT = 4;
const EMPTY_SELECTOR = '{}';
const collator = new Intl.Collator('en', { sensitivity: 'accent' });
export interface BrowserProps {
languageProvider: LokiLanguageProvider;
@@ -68,7 +69,10 @@ export function buildSelector(labels: SelectableLabel[]): string {
const selectedLabels = [];
for (const label of labels) {
if (label.selected && label.values && label.values.length > 0) {
const selectedValues = label.values.filter((value) => value.selected).map((value) => value.name);
const selectedValues = label.values
.filter((value) => value.selected)
.map((value) => value.name)
.sort(collator.compare); // sort selected values alphabetically
if (selectedValues.length > 1) {
selectedLabels.push(`${label.name}=~"${selectedValues.map(escapeLabelValueInRegexSelector).join('|')}"`);
} else if (selectedValues.length === 1) {
@@ -97,7 +101,13 @@ export function facetLabels(
label.values?.filter((value) => value.selected).map((value) => value.name) || []
);
// Values for this label have not been requested yet, let's use the facetted ones as the initial values
existingValues = possibleValues.map((value) => ({ name: value, selected: selectedValues.has(value) }));
existingValues = possibleValues
.slice()
.sort(collator.compare) // sort raw label values alphabetically
.map((value) => ({
name: value,
selected: selectedValues.has(value),
}));
}
return { ...label, loading: false, values: existingValues, facets: existingValues.length };
}