update URL with search query in unified mode (new UI)

see #295
ImageMonkey · Sep 6, 2021 · db97abe · db97abe
1 parent cd13109
commit db97abe
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git a/html/templates/annotation-demo.html b/html/templates/annotation-demo.html
@@ -136,9 +136,13 @@
 
 		{{ if ne .validationId "" }}
 			EventBus.$emit("imageInImageGridClicked", {{ .validationId }});
+		{{ else }}
+		{{ if ne .query "" }}
+			EventBus.$emit("loadAnnotationBrowseFormLabels", {{ .query }});
 		{{ else }}
 			EventBus.$emit("loadAnnotationBrowseFormLabels");
 		{{ end }}
+		{{ end }}
         
 		//let validationId = new URL(window.location.href).searchParams.get("validation_id");
         //imageCanvas.$refs.annotationArea.loadUnannotatedImage(validationId);

diff --git a/src/web.go b/src/web.go
@@ -523,13 +523,18 @@ func main() {
 		router.GET("/annotation-demo", func(c *gin.Context) {
 			validationId := commons.GetParamFromUrlParams(c, "validation_id", "")
 
+			query := commons.GetParamFromUrlParams(c, "query", "")
+			searchOption := commons.GetParamFromUrlParams(c, "search_option", "default")
+
 			c.HTML(http.StatusOK, "annotation-demo.html", gin.H{
 				"title": "Annotation-Demo",
 				"activeMenuNr": 4,
 				"sessionInformation": sessionCookieHandler.GetSessionInformation(c),
 				"apiBaseUrl": apiBaseUrl,
 				"assetVersion": assetVersion,
 				"validationId": validationId,
+				"query": query,
+				"searchOption": searchOption,
 			})
 		})
 

diff --git a/src/webui/js/components/annotationbrowseform.js b/src/webui/js/components/annotationbrowseform.js
@@ -36,20 +36,26 @@ AnnotationBrowseFormComponent = {
 
             this.numberOfShownQueryResults = 0;
             let apiCommand = null;
-            let options = "";
+            let searchOption = "";
             if (this.searchNoOptionsSelected) {
-                options = "no-options";
+                searchOption = "no-option";
                 apiCommand = imageMonkeyApi.queryUnannotatedAnnotations(this.searchQuery, true);
             } else if (this.searchReworkExistingAnnotationsSelected) {
-                options = "rework";
+                searchOption = "rework";
                 apiCommand = imageMonkeyApi.queryAnnotated(this.searchQuery, true);
             }
 
+            let fullUrl = new URL(window.location);
+            fullUrl.searchParams.set('query', this.searchQuery);
+            if (searchOption !== "no-option")
+                fullUrl.searchParams.set('search_option', searchOption);
+            window.history.pushState({}, null, fullUrl);
+
             var that = this;
             apiCommand
                 .then(function(data) {
                     if (data && data.length > 0) {
-                        EventBus.$emit("populateUnifiedModeImageGrid", data, options);
+                        EventBus.$emit("populateUnifiedModeImageGrid", data, searchOption);
                     } else {
                         EventBus.$emit("hideWaveLoadingIndicator");
                         that.showInlineErrorMessage("Nothing found");
@@ -114,18 +120,25 @@ AnnotationBrowseFormComponent = {
         onUnifiedModeImageGridCurrentlyShownImagesUpdated: function(num) {
             EventBus.$emit("hideWaveLoadingIndicator");
             this.numberOfShownQueryResults = num;
+        },
+        onLoadAnnotationBrowseFormLabels: function(query = null) {
+            this.populate();
+            if (query !== null) {
+                this.searchQuery = query;
+                this.search();
+            }
         }
     },
     beforeDestroy: function() {
         EventBus.$off("annotatedStatisticsLoaded", this.onAnnotatedStatisticsLoaded);
         EventBus.$off("annotatedStatisticsPopupLabelClicked", this.onAnnotatedStatisticsPopupLabelClicked);
         EventBus.$off("unifiedModeImageGridCurrentlyShownImagesUpdated", this.onUnifiedModeImageGridCurrentlyShownImagesUpdated);
-        EventBus.$off("loadAnnotationBrowseFormLabels", this.populate);
+        EventBus.$off("loadAnnotationBrowseFormLabels", this.onLoadAnnotationBrowseFormLabels);
     },
     mounted: function() {
         EventBus.$on("annotatedStatisticsLoaded", this.onAnnotatedStatisticsLoaded);
         EventBus.$on("annotatedStatisticsPopupLabelClicked", this.onAnnotatedStatisticsPopupLabelClicked);
         EventBus.$on("unifiedModeImageGridCurrentlyShownImagesUpdated", this.onUnifiedModeImageGridCurrentlyShownImagesUpdated);
-        EventBus.$on("loadAnnotationBrowseFormLabels", this.populate);
+        EventBus.$on("loadAnnotationBrowseFormLabels", this.onLoadAnnotationBrowseFormLabels);
     }
-};
+};