Add input to router by event ID and update input field with js.

Author: marySalvi

histomicsui/web_client/views/body/ImageView.js

@@ -66,10 +66,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 girder.plugins.large_image_annotation.collections.AnnotationCollection();
+        this.listenTo(events, 's:widgetChanged', this._setRouter);
 
         this.controlPanel = new girder.plugins.slicer_cli_web.views.PanelGroup({
             parentView: this,
@@ -691,6 +691,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');
@@ -742,10 +743,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;
@@ -1815,7 +1818,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, replace: true});
     },
 
 });