feldera · Karakatiza666 · Jun 12, 2026 · mythical-fred · Jun 15, 2026 · mihaibudiu
diff --git a/bun.lock b/bun.lock
diff --git a/js-packages/profiler-layout/package.json b/js-packages/profiler-layout/package.json
@@ -54,6 +54,7 @@
     "@tailwindcss/vite": "^4.1.17",
     "@vitest/browser-playwright": "^4.1.8",
     "feldera-theme": "workspace:*",
+    "jsdom": "^29.1.1",
     "monaco-editor": "0.55.1",
     "playwright": "1.58.2",
     "profiler-lib": "workspace:*",

diff --git a/js-packages/profiler-layout/src/lib/components/metrics/dispatch.test.ts b/js-packages/profiler-layout/src/lib/components/metrics/dispatch.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+import type { NodeAttributes, TooltipRow } from 'profiler-lib'
+import { buildBlocks } from './dispatch.js'
+
+function row(metric: string): TooltipRow {
+  return { metric, isCurrentMetric: false, cells: [] }
+}
+
+function makeAttrs(metrics: string[]): NodeAttributes {
+  return {
+    title: 'n op',
+    columns: [],
+    rows: metrics.map(row),
+    attributes: new Map()
+  }
+}
+
+describe('buildBlocks', () => {
+  it('orders metrics lexicographically inside each block (case-insensitive)', () => {
+    // Metric IDs span categories; the order is intentionally scrambled to confirm the sort.
+    const attrs = makeAttrs([
+      'zeta_seconds',
+      'Alpha_count',
+      'gamma_size',
+      'alpha_total'
+    ])
+    const blocks = buildBlocks(attrs, /* showAdvanced */ true)
+    // All metrics fall into the same "Other" bucket (no descriptions registered),
+    // so we expect a single block whose entries are alphabetised by label.
+    const all = blocks.flatMap((b) => b.entries.map((e) => e.label))
+    const sorted = [...all].sort((a, b) =>
+      new Intl.Collator(undefined, { sensitivity: 'base', numeric: true }).compare(a, b)
+    )
+    expect(all).toEqual(sorted)
+    // Sanity: the original input was not already sorted.
+    expect(attrs.rows.map((r) => r.metric)).not.toEqual(sorted)
+  })
+
+  it('uses natural-number ordering, not raw codepoint order', () => {
+    // Labels like "slot 2" / "slot 10" share a numeric suffix; a plain ASCII sort would put
+    // "slot 10" before "slot 2".
+    const attrs = makeAttrs(['slot_10_loose', 'slot_2_loose', 'slot_1_loose'])
+    const blocks = buildBlocks(attrs, true)
+    const labels = blocks.flatMap((b) => b.entries.map((e) => e.label))
+    expect(labels).toEqual(['Slot 1 loose', 'Slot 2 loose', 'Slot 10 loose'])
+  })
+})
diff --git a/js-packages/profiler-layout/src/lib/components/metrics/dispatch.ts b/js-packages/profiler-layout/src/lib/components/metrics/dispatch.ts
@@ -49,6 +49,17 @@ export function buildBlocks(attrs: NodeAttributes, showAdvanced: boolean): Rende
     })
   }
 
+  // Sort metrics inside each block by their displayed label so users can scan a long block
+  // without re-reading the whole thing. Locale-aware compare with `numeric: true`
+  // keeps numbered labels like "slot 2 ..." / "slot 10 ..." in their natural sequence.
+  const collator = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true })
+  for (const entries of byCategory.values()) {
+    entries.sort(
+      (a, b) =>
+        collator.compare(a.label, b.label) || collator.compare(a.row.metric, b.row.metric)
+    )
+  }
+
   const out: RenderableBlock[] = []
   for (const [category, entries] of byCategory) {
     out.push({ id: `category-${slugify(category)}`, title: category, entries })