​Presets UI sorting is confusing

[djamapro]

Having two different numbering systems is complete nonsense. It's like living at house number 505, but then you're also assigned apartment 505, and on another random list, you're listed as 1040. Furthermore, the Quick Load buttons display in a totally random, non-sequential numerical order. It makes zero sense and just causes confusion. Fix this

[DedeHai]

you are mistaken, there is only one. if you found a real bug, describe it in detail and how to reproduce, otherwise use discord or discourse forum for support questions. or read the documentation: https://kno.wled.ge/
also I do not appreaciate your tone.

[softhack007]

@coderabbitai is the presets list in the WebUI sorted? If yes, what is the sorting criterion? Bonus question: any idea what the user means by " two different numbering systems"?

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo '=== GitHub issue ==='
gh issue view 5841 --repo wled/WLED --comments

echo
echo '=== Candidate WebUI preset files ==='
fd -i 'preset|presets' . | sed -n '1,160p'

echo
echo '=== Preset list rendering and ordering references ==='
rg -n -i -C 3 '(preset.{0,40}(sort|order|list)|sort.{0,80}preset|populate.*preset|preset.*populate)' . \
  -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**' | sed -n '1,260p'

Length of output: 16975

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo '=== Issue body and comments ==='
gh api repos/wled/WLED/issues/5841 \
  --jq '{number, title, state, body, user: .user.login, created_at, comments}' \
  | jq -r '.'
gh api repos/wled/WLED/issues/5841/comments --paginate \
  --jq '.[] | {user: .user.login, created_at, body}' \
  | jq -r '.'

echo
echo '=== Preset population implementation ==='
sed -n '604,745p' wled00/data/index.js

echo
echo '=== Preset comparator implementation ==='
sed -n '1398,1445p' wled00/data/index.js

echo
echo '=== ID-sort configuration references ==='
rg -n -C 3 'idsort|idSort' wled00/data/index.js wled00/data \
  -g '!wled00/data/index.js' | sed -n '1,220p'

Length of output: 12792

---

@softhack007, yes. populatePresets() sorts the preset entries before it renders the WebUI list.

The default order is name-based. The comparator uses locale-aware natural sorting, so numeric portions in names sort numerically. It places playlists first. It places names that start with ordinary letters or digits before names that start with other special characters.

The UI setting “Sort presets by ID” changes the order to ascending preset ID. Presets without a name also use preset ID order.

There is one implementation concern: the ID branch in cmpP() returns only true or false:

return (parseInt(a[0]) > parseInt(b[0]));

A JavaScript sort comparator should return a negative, zero, or positive value. This implementation never returns a negative value. Therefore, ID ordering can depend on the input order and may appear inconsistent. A numeric comparator such as parseInt(a[0]) - parseInt(b[0]) would define the intended ascending order.

The phrase “two different numbering systems” most likely means:

1. The persistent preset ID. This is the key in presets.json and is the number shown in the preset list when preset IDs are displayed.
2. The Quick Load assignment or button position. This is a separate ql value assigned to a preset. It is not the preset ID, but could be any short string or symbol like 💡, 👑, 12, A15p.

For example, preset ID 1040 can be assigned to Quick Load button 505. Those values identify different things. The report does not include a screenshot or exact steps, so this interpretation cannot be confirmed from #5841 alone.

You are interacting with an AI system.

[softhack007]

@DedeHai does the suggestion for cmpP() make sense to you?
i.e. should we use parseInt(a[0]) - parseInt(b[0]) instead of parseInt(a[0]) > parseInt(b[0]) ? I'm not good at JS, so i can't decide ...

If not, i'd suggest we close this issue ticket because it does not provide information for reproducing the problem.
Plus, I don't appreciate the reporter's tone either, so I'm not in the mood for more guessing games.

[DedeHai]

I do not know either, but sorting is correct, at least I have never seen anything being sorted wrong.

[softhack007]

There might be a (smaller) problem, but only when "sort presets by ID" is enabled.

WLED/wled00/data/settings_ui.htm

Line 40 in d55037f

"idsort": "Sort presets by ID"

The JS function for array / list sorting requires a compare function that can return <0, 0, >0.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description

Our function will only return true (=1) or false (=0), but it would treat the "smaller than" case the same as "equal".

WLED/wled00/data/index.js

Line 610 in d55037f

var arr = Object.entries(pJson).sort(cmpP);

WLED/wled00/data/index.js

Line 1419 in d55037f

if (cfg.comp.idsort || !a[1].n) return (parseInt(a[0]) > parseInt(b[0]));

--> should be corrected to ...return (parseInt(a[0]) - parseInt(b[0]).

I can do some testing to see if this change is really needed. It might be a bit tricky to find an example where the current code does not work.

[softhack007]

@coderabbitai please scan all JS source code files, and check if there are other places in the code where a sort compare function is returning bool instead of int.

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo '=== JavaScript source files ==='
fd -e js . \
  --exclude node_modules --exclude dist --exclude build --exclude .git \
  | sort

echo
echo '=== Array sort call sites with source context ==='
rg -n -P -C 4 '\.(?:sort|toSorted)\s*\(' \
  -g '*.js' \
  -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**' -g '!**/.git/**' \
  . || true

echo
echo '=== Direct concise-arrow Boolean comparators ==='
ast-grep run \
  --lang javascript \
  --pattern '$ARRAY.sort(($A, $B) => $LEFT $OP $RIGHT)' \
  -g '*.js' \
  -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**' -g '!**/.git/**' \
  . || true

echo
echo '=== Braced sort callbacks containing return expressions ==='
ast-grep run \
  --lang javascript \
  --pattern '$ARRAY.sort(($A, $B) => { $$$BEFORE return $RETURN; $$$AFTER })' \
  -g '*.js' \
  -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**' -g '!**/.git/**' \
  . || true

echo
echo '=== Candidate comparator declarations and Boolean return statements ==='
rg -n -P -C 5 \
  '(?:(?:function\s+\w*(?:compare|cmp|sort)\w*\s*\()|(?:const|let|var)\s+\w*(?:compare|cmp|sort)\w*\s*=\s*(?:function|\())|return\s+\(?[^;]*(?:===|!==|==|!=|>=|<=|(?<![=!<>])>(?![=])|(?<![=!<>])<(?![=]))[^;]*\)?;)' \
  -g '*.js' \
  -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**' -g '!**/.git/**' \
  . || true

Length of output: 35940

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

mapfile -t js_files < <(
  fd -e js . \
    --exclude node_modules --exclude dist --exclude build --exclude .git \
    | sort
)

python3 - "${js_files[@]}" <<'PY'
import re
import sys
from pathlib import Path

boolean_operator = re.compile(
    r'(?<![=!<>])>(?![=>])|(?<![=!<>])<(?![=<])|===|!==|==|!=|>=|<='
)
sort_start = re.compile(r'\.(?:sort|toSorted)\s*\(')

def line_number(text, index):
    return text.count('\n', 0, index) + 1

def balanced_end(text, open_index):
    pairs = {'(': ')', '{': '}', '[': ']'}
    stack = [text[open_index]]
    quote = None
    escape = False
    i = open_index + 1
    while i < len(text) and stack:
        char = text[i]
        if quote:
            if escape:
                escape = False
            elif char == '\\':
                escape = True
            elif char == quote:
                quote = None
        elif char in ("'", '"', '`'):
            quote = char
        elif char in pairs:
            stack.append(char)
        elif char in ')}]':
            expected = pairs[stack[-1]]
            if char == expected:
                stack.pop()
        i += 1
    return i

for file_name in sys.argv[1:]:
    path = Path(file_name)
    text = path.read_text(encoding='utf-8', errors='replace')
    for match in sort_start.finditer(text):
        open_index = text.find('(', match.start())
        end_index = balanced_end(text, open_index)
        argument = text[open_index + 1:end_index - 1].strip()
        has_return_boolean = bool(
            re.search(r'\breturn\s*\(?[^;{}]*' + boolean_operator.pattern, argument)
        )
        is_concise_boolean_arrow = bool(
            re.search(r'=>\s*\(?[^{};]*' + boolean_operator.pattern, argument)
        )
        if has_return_boolean or is_concise_boolean_arrow:
            one_line = re.sub(r'\s+', ' ', argument)
            print(f'{path}:{line_number(text, match.start())}: {one_line}')

print('\n=== Named comparator references passed to sort ===')
for file_name in sys.argv[1:]:
    path = Path(file_name)
    text = path.read_text(encoding='utf-8', errors='replace')
    for match in re.finditer(r'\.(?:sort|toSorted)\s*\(\s*([A-Za-z_$][\w$]*)\s*\)', text):
        print(f'{path}:{line_number(text, match.start())}: {match.group(1)}')
PY

echo
echo '=== Full context for direct Boolean candidates and cmpP ==='
rg -n -C 10 \
  'pQL\.sort|function cmpP|return \(parseInt\(a\[0\]\) > parseInt\(b\[0\]\)\)' \
  wled00/data/index.js

Length of output: 2898

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

python3 - <<'PY'
import re
from pathlib import Path

EXCLUDED = {"node_modules", "dist", "build", ".git"}
files = sorted(
    path for path in Path(".").rglob("*.js")
    if not any(part in EXCLUDED for part in path.parts)
)

operator = (
    r'(?<![=!<>])>(?![=>])|(?<![=!<>])<(?![=<])'
    r'|===|!==|==|!=|>=|<='
)
sort_start = re.compile(r'\.(?:sort|toSorted)\s*\(')

def line_of(text, offset):
    return text.count("\n", 0, offset) + 1

def matching_paren(text, start):
    depth = 1
    quote = None
    escaped = False
    index = start + 1
    while index < len(text) and depth:
        char = text[index]
        if quote is not None:
            if escaped:
                escaped = False
            elif char == "\\":
                escaped = True
            elif char == quote:
                quote = None
        elif char in "'\"`":
            quote = char
        elif char == "(":
            depth += 1
        elif char == ")":
            depth -= 1
        index += 1
    return index

def show_context(path, text, line):
    lines = text.splitlines()
    first = max(0, line - 4)
    last = min(len(lines), line + 3)
    for number in range(first, last):
        print(f"  {number + 1}: {lines[number]}")

direct_candidates = []
named_references = []

for path in files:
    text = path.read_text(encoding="utf-8", errors="replace")
    for match in sort_start.finditer(text):
        open_paren = text.find("(", match.start())
        end_paren = matching_paren(text, open_paren)
        argument = text[open_paren + 1:end_paren - 1]
        is_boolean_return = re.search(
            r"\breturn\s*\(?[^;{}]*(" + operator + r")", argument
        )
        is_boolean_arrow = re.search(
            r"=>\s*\(?[^{};]*(" + operator + r")", argument
        )
        if is_boolean_return or is_boolean_arrow:
            direct_candidates.append((path, text, line_of(text, match.start()), argument))
        name = re.fullmatch(r"\s*([A-Za-z_$][\w$]*)\s*", argument)
        if name:
            named_references.append((path, text, line_of(text, match.start()), name.group(1)))

print("=== JavaScript files scanned ===")
for path in files:
    print(path)

print("\n=== Direct sort callbacks with a Boolean comparison expression ===")
if not direct_candidates:
    print("None")
for path, text, line, argument in direct_candidates:
    print(f"\n{path}: Line {line}")
    show_context(path, text, line)

print("\n=== Named comparators passed to sort ===")
if not named_references:
    print("None")
for path, text, line, name in named_references:
    print(f"\n{path}: Line {line}; comparator: {name}")
    definition = re.search(
        r"(?:function\s+" + re.escape(name) + r"\s*\([^)]*\)\s*\{|"
        + re.escape(name) + r"\s*=\s*(?:function\s*\([^)]*\)\s*\{|\([^)]*\)\s*=>\s*\{))",
        text,
    )
    if definition:
        definition_line = line_of(text, definition.start())
        show_context(path, text, definition_line)
    else:
        print("  Definition not found by the static scan.")
PY

Length of output: 4812

---

@softhack007, I scanned all 12 JavaScript source files. I found two Boolean-return sort comparators. Both are in wled00/data/index.js.

1. Quick Load order — Line 594

pQL.sort((a,b) => (a[0]>b[0]));

This callback returns only true or false. It should return a negative, zero, or positive number. If a[0] and b[0] are preset IDs, use:

pQL.sort((a, b) => parseInt(a[0]) - parseInt(b[0]));

2. Preset ID order — Line 1419 in cmpP()

if (cfg.comp.idsort || !a[1].n) return (parseInt(a[0]) > parseInt(b[0]));

This is the previously identified case. cmpP() is used at Line 610 and Line 1964. The numeric subtraction replacement is correct:

if (cfg.comp.idsort || !a[1].n) return parseInt(a[0]) - parseInt(b[0]);

I found no other Boolean-return comparator callbacks or named comparators passed to .sort() in the scanned JavaScript files.

You are interacting with an AI system.

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo '=== JavaScript source files ==='
fd -e js . \
  --exclude node_modules --exclude dist --exclude build --exclude .git \
  | sort

echo
echo '=== Array sorting call sites ==='
rg -n -P -C 5 '\.(?:sort|toSorted)\s*\(' \
  -g '*.js' \
  -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**' -g '!**/.git/**' \
  . || true

echo
echo '=== Direct Boolean comparator callbacks ==='
ast-grep run \
  --lang javascript \
  --pattern '$ARRAY.sort(($A, $B) => $LEFT $OP $RIGHT)' \
  -g '*.js' \
  -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**' -g '!**/.git/**' \
  . || true

echo
echo '=== Scan all direct sort callbacks and named comparator references ==='
python3 - <<'PY'
import re
from pathlib import Path

EXCLUDED = {"node_modules", "dist", "build", ".git"}
files = sorted(
    p for p in Path(".").rglob("*.js")
    if not any(part in EXCLUDED for part in p.parts)
)

sort_call = re.compile(r'\.(?:sort|toSorted)\s*\(')
bool_op = re.compile(
    r'(?<![=!<>])>(?![=>])|(?<![=!<>])<(?![=<])|===|!==|==|!=|>=|<='
)

def line(text, offset):
    return text.count("\n", 0, offset) + 1

def closing_paren(text, opening):
    depth, quote, escaped = 1, None, False
    for i in range(opening + 1, len(text)):
        char = text[i]
        if quote:
            if escaped:
                escaped = False
            elif char == "\\":
                escaped = True
            elif char == quote:
                quote = None
        elif char in "'\"`":
            quote = char
        elif char == "(":
            depth += 1
        elif char == ")":
            depth -= 1
            if not depth:
                return i
    return len(text)

for path in files:
    text = path.read_text(encoding="utf-8", errors="replace")
    for match in sort_call.finditer(text):
        opening = text.find("(", match.start())
        closing = closing_paren(text, opening)
        argument = text[opening + 1:closing].strip()
        boolean_return = re.search(r'\breturn\s*\(?[^;{}]*' + bool_op.pattern, argument)
        boolean_arrow = re.search(r'=>\s*\(?[^{};]*' + bool_op.pattern, argument)
        named = re.fullmatch(r'([A-Za-z_$][\w$]*)', argument)
        if boolean_return or boolean_arrow:
            print(f"BOOLEAN CALLBACK {path}: Line {line(text, match.start())}")
            print("  " + re.sub(r"\s+", " ", argument))
        elif named:
            print(f"NAMED COMPARATOR {path}: Line {line(text, match.start())}: {named.group(1)}")
PY

Length of output: 38256

---

@softhack007, I scanned all 12 JavaScript source files and reviewed every .sort() / .toSorted() call site.

I found two valid cases. Both are in wled00/data/index.js.

1. Quick Load sort — Line 594

pQL.sort((a,b) => (a[0]>b[0]));

Replace it with:

pQL.sort((a, b) => parseInt(a[0]) - parseInt(b[0]));

2. Preset ID sort in cmpP() — used at Line 610 and Line 1964

return (parseInt(a[0]) > parseInt(b[0]));

Replace it with:

return parseInt(a[0]) - parseInt(b[0]);

The scan reported the callback at wled00/data/index.js Line 2953 as a candidate. It is not a Boolean comparator. Its !== expression is only a conditional check. Its return values use numeric subtraction and localeCompare().

I found no other Boolean-return sort comparators.

You are interacting with an AI system.

[softhack007]

@coderabbitai please construct an example presets.json file that can be used as a validation case - it should sort to a wrong order with the current code, but result in a different (correct) order when all .sort() / .toSorted() comparison operators are corrected.