From 7309f4dc3e06b22ab82d8c58ab8824df516b9278 Mon Sep 17 00:00:00 2001
From: Pierre GIRAUD <pierre.giraud@dalibo.com>
Date: Tue, 20 Apr 2021 11:13:44 +0200
Subject: [PATCH] Change url hash when changing tab

Will help people share links with direct access to a tab in explain.dalibo.com
---
 src/components/Diagram.vue  |  2 +-
 src/components/Plan.vue     | 17 +++++++++++------
 src/components/PlanNode.vue |  2 +-
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/Diagram.vue b/src/components/Diagram.vue
index 8e2f5c6a..275bca62 100644
--- 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
index ab5b3ab6..d7f52ac7 100644
--- 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
index 199db353..96d4d46a 100644
--- 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">