From 3d4776385c0f7c699926eb799c37349a9fc384a0 Mon Sep 17 00:00:00 2001
From: Brianna Major <brianna.major@kitware.com>
Date: Tue, 21 Jul 2026 12:59:37 -0400
Subject: [PATCH] WIP

---
 histomicsui/web_client/panels/DrawWidget.js | 25 +++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/histomicsui/web_client/panels/DrawWidget.js b/histomicsui/web_client/panels/DrawWidget.js
index 5f85572c..cd83cb25 100644
--- a/histomicsui/web_client/panels/DrawWidget.js
+++ b/histomicsui/web_client/panels/DrawWidget.js
@@ -110,6 +110,7 @@ var DrawWidget = Panel.extend({
                 delete this._skipRenderHTML;
             }
         } else {
+            this._sortElements();
             this.$el.html(drawWidget({
                 title: 'Draw',
                 elements: this.collection.models,
@@ -1089,6 +1090,30 @@ var DrawWidget = Panel.extend({
         this.parentView.trigger('h:highlightAnnotation');
     },
 
+    _elementSortKey(model) {
+        const element = model.attributes;
+        const userLabel = (element.label || {}).value;
+        if (userLabel) {
+            return ('' + userLabel).toLowerCase();
+        }
+        const type = element.type === 'polyline'
+            ? (element.closed ? 'polygon' : 'line')
+            : element.type;
+        if (['point', 'polyline', 'rectangle', 'ellipse', 'circle'].includes(element.type)) {
+            const groupName = element.group || this.parentView._defaultGroup;
+            return `${groupName} ${type}`.toLowerCase();
+        }
+        return ('' + type).toLowerCase();
+    },
+
+    _sortElements() {
+        this.collection.models.sort((elementA, elementB) => {
+            const keyA = this._elementSortKey(elementA);
+            const keyB = this._elementSortKey(elementB);
+            return keyA.localeCompare(keyB);
+        });
+    },
+
     _recalculateGroupAggregation() {
         const groups = [];
         const used = {};