From 0247a21558b33a6dcaa7fb6be5c0619dc6ce4189 Mon Sep 17 00:00:00 2001
From: Avinash R <nashpapa@gmail.com>
Date: Tue, 20 Nov 2018 18:37:16 +0530
Subject: [PATCH] change query on node click

---
 src/App.vue               | 10 ++++++++++
 src/lib/createRenderer.js | 20 ++++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index c4d6b73..c1c8199 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -90,6 +90,12 @@ export default {
   },
   mounted() {
     this.renderer = createRenderer(appState.progress);
+    bus.on('query-change', q => {
+      if (appState.query !== q) {
+        appState.query = q;
+        this.onSubmit();
+      }
+    }, this);
     bus.on('show-tooltip', this.showTooltip, this);
     if (appState.graph) {
       this.renderer.render(appState.graph);
@@ -121,6 +127,10 @@ export default {
   color: highlight-color;
 }
 
+#nodes > * {
+  cursor: pointer;
+}
+
 rect, path, text {
   transition: stroke 200ms, fill 200ms;
 }
diff --git a/src/lib/createRenderer.js b/src/lib/createRenderer.js
index 4c04bad..87af503 100644
--- a/src/lib/createRenderer.js
+++ b/src/lib/createRenderer.js
@@ -134,6 +134,25 @@ export default function createRenderer(progress) {
     }
   }
 
+  function nodeClick(e) {
+    var target = e.target;
+    var textNode = null;
+    switch (target.nodeName) {
+      case 'g':
+        textNode = target.parentNode.querySelector('text');
+        break;
+      case 'text':
+        textNode = target;
+        break;
+      default:
+        break;
+    }
+    if (textNode != null) {
+      bus.fire('query-change', textNode.innerHTML);
+      console.log(textNode.innerHTML);
+    }
+  }
+
   function addNode(node) {
     const dRatio = (graph.maxDepth - node.data.depth)/graph.maxDepth;
     let pos = getNodePosition(node.id);
@@ -173,6 +192,7 @@ export default function createRenderer(progress) {
 
     nodeContainer.appendChild(ui);
     nodes.set(node.id, ui);
+    nodes.forEach(node => node.addEventListener("click", nodeClick));
   }