[UI] Sort components alphabetically in flat widgets

[Sn0w3y]

Import ArrayUtils and apply ArrayUtils.sortedAlphabetically to various component lists in production/consumption flat widgets (live and history). Chargers, meters, EVCSs and heat components are now sorted by alias for consistent ordering. No functional logic changes aside from deterministic ordering; changes affect ui/src/app/edge/*/flat/flat.ts files.

Should fix: #3386

[codecov]

Codecov Report

❌ Patch coverage is 80.00000% with 1 line in your changes missing coverage. Please review.

Additional details and impacted files

@@              Coverage Diff              @@
##             develop    #3589      +/-   ##
=============================================
- Coverage      58.59%   58.56%   -0.03%     
+ Complexity       105      104       -1     
=============================================
  Files           3091     3095       +4     
  Lines         134005   134207     +202     
  Branches        9882     9870      -12     
=============================================
+ Hits           78508    78585      +77     
- Misses         52590    52694     +104     
- Partials        2907     2928      +21     

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[da-Kai]

@Sn0w3y

Wrapping everything in ArrayUtils.sortedAlphabetically feels a bit weird, especially when we could just call .sort directly.

Should we consider rewriting sortedAlphabetically so that the array can be sorted in-place, like this:

    /**
     * Sort arrays alphabetically, according to the string returned by fn.
     * Elements for which fn returns null or undefined are sorted to the end in an undefined order.
     *
     * @param array to sort
     * @param fn to get a string to sort by
     * @returns sorted array
     */
    export function sortedAlphabetically<T>(array: T[], fn: (arg: T) => string): T[] {
        return array.sort(alphabetically(fn));
    }

    /**
     * Creates a comparator that sorts items alphabetically by a string key returned from `fn`.
     *
     * The comparator places falsy keys (null, undefined or empty string) after non-falsy keys;
     * two falsy keys compare as equal.
     * 
     * @param fn to get a string to sort by
     * @returns A comparator `(a, b) => number` suitable for `Array.sort`.
     */
    export function alphabetically<T>(fn: (arg: T) => string): (a: T, b: T) => number {
        return (a: T, b: T) => {
            const aVal = fn(a);
            const bVal = fn(b);
            if (!aVal) {
                return !bVal ? 0 : 1;
            } else if (!bVal) {
                return -1;
            }
            return aVal.localeCompare(bVal, undefined, { sensitivity: "accent" });
        }
    }

usage:

.sort(ArrayUtils.alphabetically(a => a.alias));

What do you think, @lukasrgr?

[Sn0w3y]

@da-Kai you mean like this? :)

[da-Kai]

@da-Kai you mean like this? :)

Yes, and even with a test. 👌

[sfeilmeier]

I am forwarding this to UI/UX team, because this would change visualization for a lot of users. I think sorting by alias is feasible, but sitll need to check.

[sfeilmeier]

Ok, hard to argue if both @lukasrgr and @da-Kai approve... but don't you think we should sort the Components as early as possible to make sure we stay consistent throughout the UI. I.e. directly in EdgeConfig (https://github.com/OpenEMS/openems/blob/develop/ui/src/app/shared/components/edge/edgeconfig.ts#L27)

[Sn0w3y]

but don't you think we should sort the Components as early as possible to make sure we stay consistent throughout the UI. I.e. directly in EdgeConfig

You are 100% right in thsi !
I made the changes and the tests cover it also perfetcly :)