From 5f3deeb14466f69f75a514a9abe70c7c24683d95 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 20 Dec 2017 12:40:22 +0100
Subject: [PATCH 1/4] trigger click from treeview

---
 remix-debugger/src/ui/TreeView.js | 44 ++++++++++++++++++++++---------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/remix-debugger/src/ui/TreeView.js b/remix-debugger/src/ui/TreeView.js
index d29a461909..44abebc0a7 100644
--- a/remix-debugger/src/ui/TreeView.js
+++ b/remix-debugger/src/ui/TreeView.js
@@ -25,9 +25,14 @@ var css = csjs`
     width: 10px;
   }
 `
+
+var remixLib = require('remix-lib')
+var EventManager = remixLib.EventManager
+
 class TreeView {
 
   constructor (opts) {
+    this.event = new EventManager()
     this.extractData = opts.extractData || this.extractDataDefault
     this.formatSelf = opts.formatSelf || this.formatSelfDefault
     this.view = null
@@ -51,7 +56,7 @@ class TreeView {
   renderObject (item, parent, key, expand, keyPath) {
     var data = this.extractData(item, parent, key)
     var children = (data.children || []).map((child, index) => {
-      return this.renderObject(child.value, data, child.key, expand, keyPath + ',' + child.key)
+      return this.renderObject(child.value, data, child.key, expand, keyPath + '/' + child.key)
     })
     return this.formatData(key, data, children, expand, keyPath)
   }
@@ -64,23 +69,32 @@ class TreeView {
   }
 
   formatData (key, data, children, expand, keyPath) {
-    var label = yo`<div class="${css.label_tv}"><div class="fa fa-caret-right" class="${css.caret_tv}"></div><span>${this.formatSelf(key, data)}</span></div>`
-    var renderedChildren = ''
-    if (children.length) {
-      renderedChildren = yo`<ul class="${css.ul_tv}">${children}</ul>`
+    var label = yo`<div class=${css.label_tv}><div class="fa fa-caret-right" class=${css.caret_tv}></div><span>${this.formatSelf(key, data)}</span></div>`
+    var renderedChildren = null
+    if (data.isNode || children.length) {
+      renderedChildren = yo`<ul class=${this.ul_tv}>${children}</ul>`
       renderedChildren.style.display = this.nodeIsExpanded[keyPath] !== undefined ? (this.nodeIsExpanded[keyPath] ? 'block' : 'none') : (expand ? 'block' : 'none')
       label.firstElementChild.className = renderedChildren.style.display === 'none' ? 'fa fa-caret-right' : 'fa fa-caret-down'
-      var self = this
-      label.onclick = function () {
-        this.firstElementChild.className = this.firstElementChild.className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right'
-        var list = this.parentElement.querySelector('ul')
-        list.style.display = list.style.display === 'none' ? 'block' : 'none'
-        self.nodeIsExpanded[keyPath] = list.style.display === 'block'
+      if (children.length) {
+        var self = this
+        label.onclick = function () {
+          this.firstElementChild.className = this.firstElementChild.className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right'
+          var list = this.parentElement.querySelector('ul')
+          list.style.display = list.style.display === 'none' ? 'block' : 'none'
+          self.nodeIsExpanded[keyPath] = list.style.display === 'block'
+        }
+      } else {
+        label.onclick = () => {
+          this.event.trigger('nodeClick', [keyPath, renderedChildren])
+        }
       }
     } else {
       label.firstElementChild.style.visibility = 'hidden'
+      label.onclick = () => {
+        this.event.trigger('leafClick', [keyPath, renderedChildren])
+      }
     }
-    return yo`<li class="${css.li_tv}">${label}${renderedChildren}</li>`
+    return yo`<li class=${css.li_tv}>${label}${renderedChildren}</li>`
   }
 
   formatSelfDefault (key, data) {
@@ -94,14 +108,20 @@ class TreeView {
         return {key: index, value: item}
       })
       ret.self = 'Array'
+      ret.isNode = true
+      ret.isLeaf = false
     } else if (item instanceof Object) {
       ret.children = Object.keys(item).map((key) => {
         return {key: key, value: item[key]}
       })
       ret.self = 'Object'
+      ret.isNode = true
+      ret.isLeaf = false
     } else {
       ret.self = item
       ret.children = []
+      ret.isNode = false
+      ret.isLeaf = true
     }
     return ret
   }

From 5f08e6523d529fd4744741a7aefeee3f0b6226f3 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 20 Dec 2017 13:29:44 +0100
Subject: [PATCH 2/4] make TreeView trigger nodeClick leafClick

---
 remix-debugger/src/ui/TreeView.js | 35 ++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/remix-debugger/src/ui/TreeView.js b/remix-debugger/src/ui/TreeView.js
index 44abebc0a7..87647d4529 100644
--- a/remix-debugger/src/ui/TreeView.js
+++ b/remix-debugger/src/ui/TreeView.js
@@ -29,6 +29,11 @@ var css = csjs`
 var remixLib = require('remix-lib')
 var EventManager = remixLib.EventManager
 
+/**
+ * TreeView
+ *  - extendable by specifying custom `extractData` and `formatSelf` function
+ *  - trigger `nodeClick` and `leafClick`
+ */
 class TreeView {
 
   constructor (opts) {
@@ -69,24 +74,20 @@ class TreeView {
   }
 
   formatData (key, data, children, expand, keyPath) {
-    var label = yo`<div class=${css.label_tv}><div class="fa fa-caret-right" class=${css.caret_tv}></div><span>${this.formatSelf(key, data)}</span></div>`
+    var li = yo`<li class=${css.li_tv}></li>`
+    var label = yo`<div class=${css.label_tv}><div class="fa fa-caret-right" class=${css.caret_tv}></div><span>${this.formatSelf(key, data, li)}</span></div>`
     var renderedChildren = null
     if (data.isNode || children.length) {
-      renderedChildren = yo`<ul class=${this.ul_tv}>${children}</ul>`
+      renderedChildren = yo`<ul class=${css.ul_tv}>${children}</ul>`
       renderedChildren.style.display = this.nodeIsExpanded[keyPath] !== undefined ? (this.nodeIsExpanded[keyPath] ? 'block' : 'none') : (expand ? 'block' : 'none')
       label.firstElementChild.className = renderedChildren.style.display === 'none' ? 'fa fa-caret-right' : 'fa fa-caret-down'
-      if (children.length) {
-        var self = this
-        label.onclick = function () {
-          this.firstElementChild.className = this.firstElementChild.className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right'
-          var list = this.parentElement.querySelector('ul')
-          list.style.display = list.style.display === 'none' ? 'block' : 'none'
-          self.nodeIsExpanded[keyPath] = list.style.display === 'block'
-        }
-      } else {
-        label.onclick = () => {
-          this.event.trigger('nodeClick', [keyPath, renderedChildren])
-        }
+      var self = this
+      label.onclick = function () {
+        this.firstElementChild.className = this.firstElementChild.className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right'
+        var list = this.parentElement.querySelector('ul')
+        list.style.display = list.style.display === 'none' ? 'block' : 'none'
+        self.nodeIsExpanded[keyPath] = list.style.display === 'block'
+        self.event.trigger('nodeClick', [keyPath, renderedChildren])
       }
     } else {
       label.firstElementChild.style.visibility = 'hidden'
@@ -94,7 +95,11 @@ class TreeView {
         this.event.trigger('leafClick', [keyPath, renderedChildren])
       }
     }
-    return yo`<li class=${css.li_tv}>${label}${renderedChildren}</li>`
+    li.appendChild(label)
+    if (renderedChildren) {
+      li.appendChild(renderedChildren)
+    }
+    return li
   }
 
   formatSelfDefault (key, data) {

From db8a3dd35c46101e528d7d5d60fdc4feca993c29 Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Fri, 12 Jan 2018 04:45:57 +0800
Subject: [PATCH 3/4] refactor formatData(...)

---
 remix-debugger/src/ui/TreeView.js | 35 +++++++++++++++----------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/remix-debugger/src/ui/TreeView.js b/remix-debugger/src/ui/TreeView.js
index 87647d4529..d8ac14d057 100644
--- a/remix-debugger/src/ui/TreeView.js
+++ b/remix-debugger/src/ui/TreeView.js
@@ -74,30 +74,29 @@ class TreeView {
   }
 
   formatData (key, data, children, expand, keyPath) {
+    var self = this
     var li = yo`<li class=${css.li_tv}></li>`
-    var label = yo`<div class=${css.label_tv}><div class="fa fa-caret-right" class=${css.caret_tv}></div><span>${this.formatSelf(key, data, li)}</span></div>`
-    var renderedChildren = null
-    if (data.isNode || children.length) {
-      renderedChildren = yo`<ul class=${css.ul_tv}>${children}</ul>`
-      renderedChildren.style.display = this.nodeIsExpanded[keyPath] !== undefined ? (this.nodeIsExpanded[keyPath] ? 'block' : 'none') : (expand ? 'block' : 'none')
-      label.firstElementChild.className = renderedChildren.style.display === 'none' ? 'fa fa-caret-right' : 'fa fa-caret-down'
-      var self = this
+    var caret = yo`<div class="fa fa-caret-right" class=${css.caret_tv}></div>`
+    var label = yo`
+      <div class=${css.label_tv}>
+        ${caret}
+        <span>${self.formatSelf(key, data, li)}</span>
+      </div>`
+    li.appendChild(label)
+    if (data.children) {
+      var isExpanded = self.nodeIsExpanded[keyPath]
+      var list = yo`<ul class=${css.ul_tv}>${children}</ul>`
+      list.style.display = isExpanded !== undefined ? (isExpanded ? 'block' : 'none') : (expand ? 'block' : 'none')
+      caret.className = list.style.display === 'none' ? 'fa fa-caret-right' : 'fa fa-caret-down'
       label.onclick = function () {
-        this.firstElementChild.className = this.firstElementChild.className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right'
-        var list = this.parentElement.querySelector('ul')
+        caret.className = caret.className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right'
         list.style.display = list.style.display === 'none' ? 'block' : 'none'
         self.nodeIsExpanded[keyPath] = list.style.display === 'block'
-        self.event.trigger('nodeClick', [keyPath, renderedChildren])
+        self.event.trigger('nodeClick', [keyPath, list])
       }
+      li.appendChild(list)
     } else {
-      label.firstElementChild.style.visibility = 'hidden'
-      label.onclick = () => {
-        this.event.trigger('leafClick', [keyPath, renderedChildren])
-      }
-    }
-    li.appendChild(label)
-    if (renderedChildren) {
-      li.appendChild(renderedChildren)
+      caret.style.visibility = 'hidden'
     }
     return li
   }

From a359178c3b9d160d1ae8017d18f15e0f33edb3ce Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 17 Jan 2018 10:44:26 +0100
Subject: [PATCH 4/4] retrieve node at specific path

---
 remix-debugger/src/ui/TreeView.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/remix-debugger/src/ui/TreeView.js b/remix-debugger/src/ui/TreeView.js
index d8ac14d057..c35542b521 100644
--- a/remix-debugger/src/ui/TreeView.js
+++ b/remix-debugger/src/ui/TreeView.js
@@ -42,6 +42,7 @@ class TreeView {
     this.formatSelf = opts.formatSelf || this.formatSelfDefault
     this.view = null
     this.nodeIsExpanded = {}
+    this.nodes = {}
   }
 
   render (json) {
@@ -86,6 +87,7 @@ class TreeView {
     if (data.children) {
       var isExpanded = self.nodeIsExpanded[keyPath]
       var list = yo`<ul class=${css.ul_tv}>${children}</ul>`
+      this.nodes[keyPath] = list
       list.style.display = isExpanded !== undefined ? (isExpanded ? 'block' : 'none') : (expand ? 'block' : 'none')
       caret.className = list.style.display === 'none' ? 'fa fa-caret-right' : 'fa fa-caret-down'
       label.onclick = function () {
@@ -101,6 +103,10 @@ class TreeView {
     return li
   }
 
+  nodeAt (path) {
+    return this.nodes[path]
+  }
+
   formatSelfDefault (key, data) {
     return yo`<label>${key}: ${data.self}</label>`
   }