Change url hash when changing tab

Will help people share links with direct access to a tab in explain.dalibo.com
dalibo · Apr 20, 2021 · 7309f4d · 7309f4d
1 parent 88523c2
commit 7309f4d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/src/components/Diagram.vue b/src/components/Diagram.vue
@@ -88,7 +88,7 @@
               >
 
               <td class="node-index">
-                <a class="font-weight-normal small" :href="'#/node/' + row[1].nodeId" @click>#{{row[1].nodeId}}</a>
+                <a class="font-weight-normal small" :href="'#plan/node/' + row[1].nodeId" @click>#{{row[1].nodeId}}</a>
               </td>
               <td class="node-type pr-2">
                 <span class="tree-lines">

diff --git a/src/components/Plan.vue b/src/components/Plan.vue
@@ -3,16 +3,16 @@
     <div>
       <ul class="nav nav-pills">
         <li class="nav-item p-1">
-          <a class="nav-link px-2 py-0" :class="{'active' : activeTab === 'plan' }" @click.prevent="setActiveTab('plan')" href>Plan</a>
+          <a class="nav-link px-2 py-0" :class="{'active' : activeTab === 'plan' }" href="#plan">Plan</a>
         </li>
         <li class="nav-item p-1">
-          <a class="nav-link px-2 py-0" :class="{'active' : activeTab === 'raw' }" @click.prevent="setActiveTab('raw')" href>Raw</a>
+          <a class="nav-link px-2 py-0" :class="{'active' : activeTab === 'raw' }" href="#raw">Raw</a>
         </li>
         <li class="nav-item p-1">
-          <a class="nav-link px-2 py-0" :class="{'active' : activeTab === 'query', 'disabled': !queryText }" @click.prevent="setActiveTab('query')" href>Query</a>
+          <a class="nav-link px-2 py-0" :class="{'active' : activeTab === 'query', 'disabled': !queryText }" href="#query">Query</a>
         </li>
         <li class="nav-item p-1">
-          <a class="nav-link px-2 py-0" :class="{'active' : activeTab === 'stats' }" @click.prevent="setActiveTab('stats')" href>Stats</a>
+          <a class="nav-link px-2 py-0" :class="{'active' : activeTab === 'stats' }" href="#stats">Stats</a>
         </li>
       </ul>
     </div>
@@ -389,10 +389,15 @@ export default class Plan extends Vue {
   }
 
   private onHashChange(): void {
-    const reg = /#\/node\/([0-9]*)/;
+    const reg = /#([a-zA-Z]*)(\/node\/([0-9]*))*/;
     const matches = reg.exec(window.location.hash);
     if (matches) {
-      this.selectNode(parseInt(matches[1], 0));
+      const tab = matches[1] || 'plan';
+      this.setActiveTab(tab);
+      const nodeId = matches[3];
+      if (nodeId !== undefined) {
+        this.selectNode(parseInt(nodeId, 0));
+      }
     }
   }
 

diff --git a/src/components/PlanNode.vue b/src/components/PlanNode.vue
@@ -22,7 +22,7 @@
         >
           <header class="mb-0">
             <h4 class="text-body">
-              <a class="font-weight-normal small" :href="'#/node/' + node.nodeId" @click.stop>#{{node.nodeId}}</a>
+              <a class="font-weight-normal small" :href="'#plan/node/' + node.nodeId" @click.stop>#{{node.nodeId}}</a>
               {{ getNodeName() }}
             </h4>
             <div class="float-right">