fix: Sorting inside the multi filter panel drawer

Author: bprusinowski

CHANGELOG.md

@@ -11,7 +11,8 @@ You can also check the
 
 ## Unreleased
 
-Nothing yet.
+- Fixes
+  - Filter values inside multi filter drawer are now sorted correctly
 
 ### 6.1.0 - 2025-10-15
 

app/configurator/components/filters.tsx

@@ -182,16 +182,18 @@ const groupByParent = (node: { parents: HierarchyValue[] }) => {
   return joinParents(node?.parents);
 };
 
+export const sortFilterValue = (a: HierarchyValue, b: HierarchyValue) => {
+  return (
+    ascending(a.position ?? 0, b.position ?? 0) ||
+    `${a.identifier}`.localeCompare(`${b.identifier}`, undefined, {
+      numeric: true,
+    }) ||
+    a.label.localeCompare(b.label)
+  );
+};
+
 export const sortFilterValues = (values: HierarchyValue[]) => {
-  return values.sort((a, b) => {
-    return (
-      ascending(a.position ?? 0, b.position ?? 0) ||
-      `${a.identifier}`.localeCompare(`${b.identifier}`, undefined, {
-        numeric: true,
-      }) ||
-      a.label.localeCompare(b.label)
-    );
-  });
+  return values.sort(sortFilterValue);
 };
 
 const getColorConfig = (chartConfig: ChartConfig) => {
@@ -278,7 +280,8 @@ const MultiFilterContent = ({
   const { sortedTree, flatOptions, optionsByValue } = useMemo(() => {
     const sortedTree = sortHierarchy(tree);
     const flatOptions = getOptionsFromTree(sortedTree);
-    const optionsByValue = keyBy(flatOptions, (x) => x.value);
+    const optionsByValue = keyBy(flatOptions, (option) => option.value);
+
     return {
       sortedTree,
       flatOptions,

app/rdf/tree-utils.ts

@@ -1,6 +1,6 @@
-import orderBy from "lodash/orderBy";
 import sortBy from "lodash/sortBy";
 
+import { sortFilterValue } from "@/configurator/components/filters";
 import { HierarchyValue } from "@/domain/data";
 import { bfs } from "@/utils/bfs";
 
@@ -52,15 +52,15 @@ export const pruneTree = <T extends { children?: T[] | null }>(
   return filterTreeHelper(tree, isUsed);
 };
 
+const sortTree = (tree: HierarchyValue[]): HierarchyValue[] => {
+  return tree.sort((a, b) => {
+    return b.depth - a.depth || sortFilterValue(a, b);
+  });
+};
+
 /** Sorts the tree by default chain of sorters (position -> identifier -> label). */
 export const sortHierarchy = (tree: HierarchyValue[]): HierarchyValue[] => {
-  const sortedTree = orderBy(
-    tree,
-    ["depth", "position", "identifier", "label"],
-    ["desc", "asc", "asc", "asc"]
-  ) as HierarchyValue[];
-
-  return sortedTree.map((d) => ({
+  return sortTree(tree).map((d) => ({
     ...d,
     children: d.children ? sortHierarchy(d.children) : undefined,
   }));