From c39c36c937301ee8b497c8fba33d915009e6fc8d Mon Sep 17 00:00:00 2001
From: Mary Salvi <mary.salvi@kitware.com>
Date: Tue, 1 Jul 2025 10:40:03 -0400
Subject: [PATCH 1/3] Add roi to router query

---
 histomicsui/web_client/views/body/ImageView.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/histomicsui/web_client/views/body/ImageView.js b/histomicsui/web_client/views/body/ImageView.js
index d040bb40..f8d6bea7 100644
--- a/histomicsui/web_client/views/body/ImageView.js
+++ b/histomicsui/web_client/views/body/ImageView.js
@@ -75,6 +75,7 @@ var ImageView = View.extend({
         this.listenTo(events, 's:widgetDrawRegionEvent', this._widgetDrawRegion);
         this.listenTo(events, 'li:drawRegionUpdate', this._drawRegionUpdate);
         this.listenTo(events, 'li:drawModeChange', this._drawModeChange);
+        this.listenTo(events, 'li:drawRegionUpdate', this._setRouter);
         events.trigger('h:imageOpened', null);
         this.listenTo(events, 'query:image', this.openImage);
         this.annotations = new AnnotationCollection();
@@ -1801,6 +1802,11 @@ var ImageView = View.extend({
                 window.setTimeout(() => $(`#h-analysis-panel .s-select-region-button[shape="${$(evt.originalEvent.target).attr('shape')}"][multi="${$(evt.originalEvent.target).attr('multi')}"][parent-id="${$(evt.originalEvent.target).attr('parent-id')}"]`).eq(0).trigger('click'), 50);
             }
         }
-    }
+    },
+
+    _setRouter(evt) {
+        router.setQuery('roi', String(evt.values), {trigger: false});
+    },
+
 });
 export default ImageView;

From 38562111ec06e9b8b8a748d021f1cd4f47099d53 Mon Sep 17 00:00:00 2001
From: Mary Salvi <mary.salvi@kitware.com>
Date: Tue, 1 Jul 2025 11:48:22 -0400
Subject: [PATCH 2/3] Use query string to reset region

---
 histomicsui/web_client/views/body/ImageView.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/histomicsui/web_client/views/body/ImageView.js b/histomicsui/web_client/views/body/ImageView.js
index f8d6bea7..a07b52ac 100644
--- a/histomicsui/web_client/views/body/ImageView.js
+++ b/histomicsui/web_client/views/body/ImageView.js
@@ -750,6 +750,11 @@ var ImageView = View.extend({
 
     _resetRegion() {
         var hasRegionParameter;
+        if(router.getQuery('roi')){
+            this._displayedRegion = router.getQuery('roi').slice();
+            hasRegionParameter = true;
+            this.showRegion(this._displayedRegion);
+        }
         if (!this._displayedRegion) {
             return;
         }

From 4b7cbfd63bed6548ed386ab468e0ad46905c9dff Mon Sep 17 00:00:00 2001
From: Mary Salvi <mary.salvi@kitware.com>
Date: Tue, 15 Jul 2025 12:45:01 -0400
Subject: [PATCH 3/3] Add input to router by event ID and update input field
 with js.

---
 histomicsui/web_client/views/body/ImageView.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/histomicsui/web_client/views/body/ImageView.js b/histomicsui/web_client/views/body/ImageView.js
index a07b52ac..e27dbb86 100644
--- a/histomicsui/web_client/views/body/ImageView.js
+++ b/histomicsui/web_client/views/body/ImageView.js
@@ -75,10 +75,10 @@ var ImageView = View.extend({
         this.listenTo(events, 's:widgetDrawRegionEvent', this._widgetDrawRegion);
         this.listenTo(events, 'li:drawRegionUpdate', this._drawRegionUpdate);
         this.listenTo(events, 'li:drawModeChange', this._drawModeChange);
-        this.listenTo(events, 'li:drawRegionUpdate', this._setRouter);
         events.trigger('h:imageOpened', null);
         this.listenTo(events, 'query:image', this.openImage);
         this.annotations = new AnnotationCollection();
+        this.listenTo(events, 's:widgetChanged', this._setRouter);
 
         this.controlPanel = new SlicerPanelGroup({
             parentView: this,
@@ -699,6 +699,7 @@ var ImageView = View.extend({
     },
 
     widgetRegion(model) {
+        console.log('widgetRegion', model);
         var value = model.get('value');
         if (!this.viewerWidget || !this.viewerWidget.viewer) {
             model.set('value', '-1,-1,-1,-1');
@@ -750,10 +751,12 @@ var ImageView = View.extend({
 
     _resetRegion() {
         var hasRegionParameter;
-        if(router.getQuery('roi')){
-            this._displayedRegion = router.getQuery('roi').slice();
-            hasRegionParameter = true;
-            this.showRegion(this._displayedRegion);
+        if(router.getQuery('region')){
+            var region = router.getQuery('region');
+            $('#region').val(region);
+            // this._displayedRegion = region;
+            // hasRegionParameter = true;
+            // this.showRegion(this._displayedRegion);
         }
         if (!this._displayedRegion) {
             return;
@@ -1810,7 +1813,7 @@ var ImageView = View.extend({
     },
 
     _setRouter(evt) {
-        router.setQuery('roi', String(evt.values), {trigger: false});
+        router.setQuery(evt.id, String(evt.changed.value), {trigger: false});
     },
 
 });