Fix test fail due to missing keybind, update changelog wording and add helper function to build class def map

Author: TrevorBurgoyne

CHANGELOG.md

@@ -5,7 +5,7 @@ All notable changes to this project will be documented here.
 ## [unreleased]
 
 ## [0.23.6] - May 11th, 2026
-- Fix `AnnotationList` class ordering to match the `AnnotationID` toolbox item ordering, which is based on the order of annotations in the subtask's annotation array.
+- Fix `AnnotationList` class ordering to match the `AnnotationID` toolbox item ordering, which is based on the configured class definition order in the subtask's `classes` array
 - Add local storage of checkbox options for the `AnnotationList` toolbox item
 
 ## [0.23.5] - May 6th, 2026

src/toolbox_items/annotation_list.ts

@@ -409,12 +409,13 @@ export class AnnotationListToolboxItem extends ToolboxItem {
      * Build HTML for flat (non-grouped) list
      */
     private build_flat_list_html(annotations: ULabelAnnotation[], subtask: ULabelSubtask): string {
+        const class_def_by_id = this.build_class_def_by_id(subtask);
         let html = "";
 
         for (let i = 0; i < annotations.length; i++) {
             const annotation = annotations[i];
             const class_id = this.get_annotation_class_id(annotation);
-            const class_def = subtask.class_defs.find((def) => def.id === class_id);
+            const class_def = class_def_by_id.get(class_id);
             const class_name = class_def ? class_def.name : "Unknown";
             const color = this.ulabel.color_info[class_id] || "#cccccc";
             const svg = this.get_spatial_type_svg(annotation.spatial_type!, color);
@@ -439,6 +440,8 @@ export class AnnotationListToolboxItem extends ToolboxItem {
      * Build HTML for grouped (by class) list
      */
     private build_grouped_list_html(annotations: ULabelAnnotation[], subtask: ULabelSubtask): string {
+        const class_def_by_id = this.build_class_def_by_id(subtask);
+
         // Group annotations by class
         const groups: { [class_id: number]: ULabelAnnotation[] } = {};
 
@@ -475,7 +478,7 @@ export class AnnotationListToolboxItem extends ToolboxItem {
 
         for (const class_id of ordered_class_ids) {
             const group_annotations = groups[class_id];
-            const class_def = subtask.class_defs.find((def) => def.id === class_id);
+            const class_def = class_def_by_id.get(class_id);
             const class_name = class_def ? class_def.name : "Unknown";
             const color = this.ulabel.color_info[class_id] || "#cccccc";
 
@@ -584,6 +587,20 @@ export class AnnotationListToolboxItem extends ToolboxItem {
         return class_id;
     }
 
+    /**
+     * Build a Map from class id to ClassDefinition for the given subtask. The
+     * returned map is intended to be used for the duration of a single render so
+     * that per-annotation class lookups don't repeat a linear search through
+     * `subtask.class_defs`.
+     */
+    private build_class_def_by_id(subtask: ULabelSubtask): Map<number, ULabelSubtask["class_defs"][number]> {
+        const map = new Map<number, ULabelSubtask["class_defs"][number]>();
+        for (const def of subtask.class_defs) {
+            map.set(def.id, def);
+        }
+        return map;
+    }
+
     /**
      * Get the HTML for this toolbox item
      */

tests/e2e/annotation_list.spec.js

@@ -126,25 +126,27 @@ test.describe("Annotation List Grouping", () => {
         await wait_for_ulabel_init(page);
 
         // multi-class.html defines class_defs as [Sedan(10), SUV(11), Truck(12)].
-        // Draw two annotations: one with the default class (Sedan), one after
-        // switching to the third class (Truck). SUV is intentionally left empty.
+        // Use Sedan + SUV here because those are the two classes with default
+        // keybinds ("1" and "2") in the demo. Truck (id 12) has no default
+        // keybind, so pressing "3" would be a no-op and silently leave the
+        // active class unchanged.
         await draw_bbox(page, [100, 100], [200, 200]);
         await page.mouse.move(300, 300);
-        await page.keyboard.press("3");
+        await page.keyboard.press("2");
         await draw_bbox(page, [300, 300], [400, 400]);
 
-        // Enable group-by-class and confirm the natural ordering matches class_defs
-        // (Sedan before Truck).
+        // Enable group-by-class and confirm the natural ordering matches
+        // class_defs (Sedan before SUV).
         await toggle_group_by_class(page, true);
         let header_texts = await page.locator(".annotation-list-class-group-header").allTextContents();
         // headers contain the class name plus a count like "(1)"; strip whitespace
         let names_in_order = header_texts.map((t) => t.trim().split(/\s+/)[0]);
-        expect(names_in_order).toEqual(["Sedan", "Truck"]);
+        expect(names_in_order).toEqual(["Sedan", "SUV"]);
 
         // Now reverse class_defs at runtime. With the old (buggy) implementation
-        // the headers would still appear in numeric class_id order
-        // ([Sedan(10), Truck(12)]). With the fix they should match the new
-        // class_defs order ([Truck, Sedan]).
+        // the headers would still appear in ascending numeric class_id order
+        // ([Sedan(10), SUV(11)]). With the fix they should follow the new
+        // class_defs order ([SUV, Sedan]).
         await page.evaluate(() => {
             const subtask = window.ulabel.subtasks[window.ulabel.state.current_subtask];
             subtask.class_defs.reverse();
@@ -157,6 +159,6 @@ test.describe("Annotation List Grouping", () => {
 
         header_texts = await page.locator(".annotation-list-class-group-header").allTextContents();
         names_in_order = header_texts.map((t) => t.trim().split(/\s+/)[0]);
-        expect(names_in_order).toEqual(["Truck", "Sedan"]);
+        expect(names_in_order).toEqual(["SUV", "Sedan"]);
     });
 });