fix: Sorting in the multi filter panel

CHANGELOG.md

@@ -23,6 +23,8 @@ You can also check the
   - It's now possible to share filters between tables in dashboards
   - Charts are not animating in and out anymore when interacting with UI in some
     rare cases
+  - Sorting of values in the multi filter panel is now consistent with the rest
+    of the application
 - Styles
   - Added missing paddings in details panel autocomplete component and in banner
     component for smaller breakpoints

app/configurator/components/filters.spec.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest";
 
-import { getHasColorMapping } from "@/configurator/components/filters";
-import { TemporalDimension } from "@/domain/data";
+import { getHasColorMapping, sortFilterValues } from "@/configurator/components/filters";
+import { HierarchyValue, TemporalDimension } from "@/domain/data";
 import { TimeUnit } from "@/graphql/resolver-types";
 import { getD3TimeFormatLocale } from "@/locales/locales";
 import { getTimeFilterOptions } from "@/utils/time-filter-options";
@@ -42,3 +42,38 @@ describe("colorMapping", () => {
     ).toBe(false);
   });
 });
+
+describe("sortFilterValues", () => {
+  it("should sort values numerically by identifier when identifiers are numeric strings", () => {
+    const values: HierarchyValue[] = [
+      {
+        depth: 0,
+        dimensionId: "test",
+        value: "1",
+        hasValue: true,
+        label: "One",
+        identifier: "1",
+      },
+      {
+        depth: 0,
+        dimensionId: "test",
+        value: "10",
+        hasValue: true,
+        label: "Ten",
+        identifier: "10",
+      },
+      {
+        depth: 0,
+        dimensionId: "test",
+        value: "2",
+        hasValue: true,
+        label: "Two",
+        identifier: "2",
+      },
+    ];
+
+    const sortedValues = sortFilterValues(values);
+
+    expect(sortedValues.map(v => v.identifier)).toEqual(["1", "2", "10"]);
+  });
+});

app/configurator/components/filters.tsx

@@ -21,7 +21,6 @@ import { ascending, groups, max, sum } from "d3-array";
 import get from "lodash/get";
 import groupBy from "lodash/groupBy";
 import keyBy from "lodash/keyBy";
-import orderBy from "lodash/orderBy";
 import uniqBy from "lodash/uniqBy";
 import {
   ChangeEvent,
@@ -183,6 +182,18 @@ const groupByParent = (node: { parents: HierarchyValue[] }) => {
   return joinParents(node?.parents);
 };
 
+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)
+    );
+  });
+};
+
 const getColorConfig = (chartConfig: ChartConfig) => {
   if (isColorInConfig(chartConfig)) {
     return get(chartConfig.fields, ["color"]) as ColorField | undefined;
@@ -292,10 +303,7 @@ const MultiFilterContent = ({
             ) || ascending(a[0], b[0])
       )
       .map(([parent, group]) => {
-        return [
-          parent,
-          orderBy(group, ["position", "identifier", "label"]),
-        ] as const;
+        return [parent, sortFilterValues(group)] as const;
       });
 
     return {