fix: sort filter keys alphabetically

.changeset/nested-filter-keys-sorted.md

@@ -0,0 +1,7 @@
+---
+'@hyperdx/app': patch
+---
+
+fix: keys inside Map and JSON filter groups (e.g. `LogAttributes`) in the search
+page filter sidebar are sorted alphabetically, after keys with a selected value
+and pinned keys.

packages/app/src/components/DBSearchPageFilters.tsx

@@ -86,6 +86,7 @@ import {
   type FacetEntry,
   getFilterStateEntry,
   groupFacetsByBaseName,
+  sortNestedFacetKeys,
   toQuotedClickHouseKeyExpression,
 } from './DBSearchPageFilters/utils';
 
@@ -1366,6 +1367,8 @@ const DBSearchPageFiltersComponent = ({
       });
     }
 
+    sortNestedFacetKeys(_facets);
+
     // prioritize facets that are primary keys
     _facets.sort((a, b) => {
       const aIsPk = isFieldPrimary(tableMetadata, a.key);

packages/app/src/components/DBSearchPageFilters/utils.test.ts

@@ -5,6 +5,7 @@ import {
   getFilterStateEntry,
   groupFacetsByBaseName,
   listRequestedFacets,
+  sortNestedFacetKeys,
   toClickHouseKeyExpression,
   toQuotedClickHouseKeyExpression,
 } from './utils';
@@ -162,6 +163,34 @@ describe('listRequestedFacets', () => {
   });
 });
 
+describe('sortNestedFacetKeys', () => {
+  it('sorts keys A–Z within each nested group without reordering groups or other facets', () => {
+    const facets = [
+      'SeverityText',
+      "ResourceAttributes['service.name']",
+      "LogAttributes['user.id']",
+      'ServiceName',
+      "ResourceAttributes['host.name']",
+      "LogAttributes['attr10']",
+      'LogAttributes.http.method',
+      "LogAttributes['attr9']",
+    ].map(key => ({ key }));
+
+    sortNestedFacetKeys(facets);
+
+    expect(facets.map(f => f.key)).toEqual([
+      'SeverityText',
+      'ServiceName',
+      "ResourceAttributes['host.name']",
+      "ResourceAttributes['service.name']",
+      "LogAttributes['attr9']",
+      "LogAttributes['attr10']",
+      'LogAttributes.http.method',
+      "LogAttributes['user.id']",
+    ]);
+  });
+});
+
 describe('getFilterStateEntry', () => {
   const makeEntry = (included: string[]): FilterState[string] => ({
     included: new Set<string | boolean>(included),

packages/app/src/components/DBSearchPageFilters/utils.ts

@@ -174,6 +174,31 @@ export function groupFacetsByBaseName(facets: FacetEntry[]) {
   return { grouped: Array.from(grouped.values()), nonGrouped };
 }
 
+const naturalCompare = new Intl.Collator(undefined, { numeric: true }).compare;
+
+// Sorts the keys inside each nested group A–Z, keeping groups in the order they
+// first appear. Other facets keep their order and move ahead of the nested
+// ones, which is harmless because grouped and non-grouped facets render
+// separately.
+export function sortNestedFacetKeys(facets: { key: string }[]) {
+  const groupOrder = new Map<string, number>();
+  for (const { key } of facets) {
+    const baseName = parseMapFieldName(key)?.baseName;
+    if (baseName != null && !groupOrder.has(baseName)) {
+      groupOrder.set(baseName, groupOrder.size);
+    }
+  }
+  facets.sort((a, b) => {
+    const nestedA = parseMapFieldName(a.key);
+    const nestedB = parseMapFieldName(b.key);
+    if (!nestedA || !nestedB) return Number(!!nestedA) - Number(!!nestedB);
+    return (
+      groupOrder.get(nestedA.baseName)! - groupOrder.get(nestedB.baseName)! ||
+      naturalCompare(nestedA.propertyPath, nestedB.propertyPath)
+    );
+  });
+}
+
 // Look up a filterState entry by either bracket-form or dot-form map sub-key.
 // Bracket form is the canonical SQL key used in facet results; dot form is
 // what setFilterValue stores after its parseKeyPath().join('.') normalization