wip: work on instating tabs and keywords as route query parameters

This falls into the same context as the work on aliasing and concept id
navigation. The point is that any number of combinations between using
an alias or concept id or dataset_id+version, and query tabs and keywords
as query parameters should be possible. An important change is the use of
history.replaceState to update the query string in the URL without updating
the route or reloading it (i.e. without using pushState). This seems to work
fine, but the process of keeping the query string and the selected keywords
and tabs in sync is still not ironed out completely, and hence some navigations
are still a bit buggy (e.g. after navigation to a subdataset, a keyword query
param might still remain, unexpectedly). Note that vue-router's router.push
is not aware of the history.replaceState call. This is not a problem per se,

but needs to be kept track of.

datalad_catalog/catalog/assets/app_component_dataset.js

@@ -57,11 +57,30 @@ const datasetView = () =>
                     );
                   }
                 });
-              }
+              }           
               this.tag_options = tags;
               this.tag_options_filtered = this.tag_options;
               this.tag_options_available = this.tag_options;
               this.tags_ready = true;
+
+              // if keyword(s) included in query parameters
+              if (this.$route.query.hasOwnProperty("keyword")) {
+                query_keywords = this.$route.query.keyword
+                // if included keywords(s) not null or empty string/array/object
+                if (query_keywords) {
+                  // if included keywords(s) = array
+                  if ((query_keywords instanceof Array || Array.isArray(query_keywords))
+                    && query_keywords.length > 0) {
+                      // add all search tags
+                      for (const el of query_keywords) {
+                        console.log(`adding to search tags: ${el}`)
+                        this.addSearchTag(el)
+                      }
+                  } else {
+                    this.addSearchTag(query_keywords)
+                  }
+                }
+              }
             }
           },
           dataset_ready: function (newVal, oldVal) {
@@ -300,6 +319,28 @@ const datasetView = () =>
             if (tabs[newTabIndex] == 'content') {
               this.getFiles()
             }
+            // Update URL query string whenever a new tab is selected
+            this.updateURLQueryString(this.$route, newTabIndex)
+          },
+          updateURLQueryString(current_route, tab_index) {
+            if (tab_index) {
+              query_tab = this.selectedDataset.available_tabs[tab_index];
+            } else {
+              const query = Object.assign({}, current_route.query);
+              default_tab = this.$root.selectedDataset.config?.dataset_options?.default_tab
+              query_tab = query.tab ? query.tab : (default_tab ? default_tab : "content")
+            }
+            query_string = '?tab=' + query_tab
+            if (this.search_tags.length > 0) {
+              for (const element of this.search_tags) {
+                query_string = query_string + '&keyword=' + element
+              }
+            }
+            history.replaceState(
+              {},
+              null,
+              current_route.path + query_string
+            )
           },
           copyCloneCommand(index) {
             // https://stackoverflow.com/questions/60581285/execcommand-is-now-obsolete-whats-the-alternative
@@ -354,15 +395,23 @@ const datasetView = () =>
                   dataset_id: objId,
                   dataset_version: objVersion,
                 },
+                query: {},
               }
               // before navigation, clear filtering options
               this.clearFilters()
               // now navigate
               if (newBrowserTab) {
                 const routeData = router.resolve(route_info);
+                console.log(routeData)
                 window.open(routeData.href, '_blank');
               }
               else {
+                this.search_tags = []
+                history.replaceState(
+                  {},
+                  null,
+                  this.$route.path
+                )
                 router.push(route_info);
               }
             } else {
@@ -416,20 +465,14 @@ const datasetView = () =>
               },
             }
             if (!this.catalogHasHome()) {
-              if (this.$route.params.tab_name) {
-                router.push(current_route_info)
-              } else {
                 this.clearFilters();
                 this.tabIndex = this.getDefaultTabIdx();
-              }
+                this.updateURLQueryString(this.$route, this.tabIndex)
             } else {
               if (this.currentIsHome()) {
-                if (this.$route.params.tab_name) {
-                  router.push(current_route_info)
-                } else {
-                  this.clearFilters();
-                  this.tabIndex = this.getDefaultTabIdx();
-                }
+                this.clearFilters();
+                this.tabIndex = this.getDefaultTabIdx();
+                this.updateURLQueryString(this.$route, this.tabIndex)
               } else {
                 router.push({ name: "home" });
               }
@@ -501,13 +544,15 @@ const datasetView = () =>
             this.search_tags.push(option);
             this.clearSearchTagText();
             this.filterTags();
+            this.updateURLQueryString(this.$route)
           },
           removeSearchTag(tag) {
             idx = this.search_tags.indexOf(tag);
             if (idx > -1) {
               this.search_tags.splice(idx, 1);
             }
             this.filterTags();
+            this.updateURLQueryString(this.$route)
           },
           clearSearchTagText() {
             this.tag_text = "";
@@ -582,7 +627,8 @@ const datasetView = () =>
             // If a tab parameter is supplied via the router, navigate to that tab if
             // part of available tabs, otherwise default tab
             else {
-              selectTab = tabs.indexOf(tab_param.toLowerCase())
+              tab_param = Array.isArray(tab_param) ? tab_param[0] : tab_param
+              selectTab = available_tabs.indexOf(tab_param.toLowerCase())
               if (selectTab >= 0) {
                 this.tabIndex = selectTab;
               } else {
@@ -736,8 +782,9 @@ const datasetView = () =>
             this.$root.selectedDataset.config = config;
           }
           // Set the correct tab to be rendered
+          correct_tab = to.query.hasOwnProperty("tab") ? to.query.tab : null
           this.setCorrectTab(
-            to.params.tab_name,
+            correct_tab,
             available_tabs_lower,
             this.$root.selectedDataset.config?.dataset_options?.default_tab
           )
@@ -784,6 +831,7 @@ const datasetView = () =>
                 dataset_id: response_obj.dataset_id,
                 dataset_version: response_obj.dataset_version,
               },
+              query: this.$route.query,
             }
             router.replace(replace_route_info)
             return;
@@ -883,9 +931,9 @@ const datasetView = () =>
             config = JSON.parse(configtext);
             this.$root.selectedDataset.config = config;
           }
-          // Set the correct tab to be rendered
+          correct_tab = this.$route.query.hasOwnProperty("tab") ? this.$route.query.tab : null
           this.setCorrectTab(
-            this.$route.params.tab_name,
+            correct_tab,
             available_tabs_lower,
             this.$root.selectedDataset.config?.dataset_options?.default_tab
           )

datalad_catalog/catalog/assets/app_router.js

@@ -22,6 +22,7 @@ const routes = [
                 dataset_id: superds["dataset_id"],
                 dataset_version: superds["dataset_version"],
               },
+              query: to.query,
             });
             next();
           } else if (rawFile.status === 404) {
@@ -36,7 +37,7 @@ const routes = [
     },
   },
   {
-    path: "/dataset/:dataset_id/:dataset_version?/:tab_name?",
+    path: "/dataset/:dataset_id/:dataset_version?",
     component: datasetView,
     name: "dataset",
   },