From 5c6a6b77b1aa589694d7a4a71cf65285b4fc9fdf Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 31 Jan 2018 19:58:53 +0100
Subject: [PATCH 1/8] add expand function

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

diff --git a/remix-debugger/src/ui/TreeView.js b/remix-debugger/src/ui/TreeView.js
index d137d8261b..8765e75d13 100644
--- a/remix-debugger/src/ui/TreeView.js
+++ b/remix-debugger/src/ui/TreeView.js
@@ -46,6 +46,8 @@ class TreeView {
     this.view = null
     this.nodeIsExpanded = {}
     this.nodes = {}
+    this.labels = {}
+    this.carets = {}
   }
 
   render (json) {
@@ -91,13 +93,11 @@ class TreeView {
       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')
+      this.labels[keyPath] = label
+      this.carets[keyPath] = caret
       caret.className = list.style.display === 'none' ? 'fa fa-caret-right' : 'fa fa-caret-down'
       label.onclick = function () {
-        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, list])
+        self.expand(keyPath)
       }
       li.appendChild(list)
     } else {
@@ -106,6 +106,14 @@ class TreeView {
     return li
   }
 
+  expand (path) {
+    if (this.labels[path]) {
+      this.carets[path].className = this.carets[path].className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right'
+      this.nodes[path].style.display = this.nodes[path].style.display === 'none' ? 'block' : 'none'
+      this.event.trigger('nodeClick', [path, this.nodes[path]])
+    }
+  }
+
   nodeAt (path) {
     return this.nodes[path]
   }

From ea15e2e60c6a4913cc22f50bd3971a37b9e1c7f0 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 31 Jan 2018 19:59:13 +0100
Subject: [PATCH 2/8] add expand param

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

diff --git a/remix-debugger/src/ui/TreeView.js b/remix-debugger/src/ui/TreeView.js
index 8765e75d13..9f542ecbbf 100644
--- a/remix-debugger/src/ui/TreeView.js
+++ b/remix-debugger/src/ui/TreeView.js
@@ -50,8 +50,8 @@ class TreeView {
     this.carets = {}
   }
 
-  render (json) {
-    var view = this.renderProperties(json, false)
+  render (json, expand) {
+    var view = this.renderProperties(json, expand)
     if (!this.view) {
       this.view = view
     }

From 8746cf791207807c88b1574d8ecba1bd066812c9 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 31 Jan 2018 19:59:19 +0100
Subject: [PATCH 3/8] remove nodeIsExpanded

---
 remix-debugger/src/ui/TreeView.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/remix-debugger/src/ui/TreeView.js b/remix-debugger/src/ui/TreeView.js
index 9f542ecbbf..92112840c6 100644
--- a/remix-debugger/src/ui/TreeView.js
+++ b/remix-debugger/src/ui/TreeView.js
@@ -44,7 +44,6 @@ class TreeView {
     this.extractData = opts.extractData || this.extractDataDefault
     this.formatSelf = opts.formatSelf || this.formatSelfDefault
     this.view = null
-    this.nodeIsExpanded = {}
     this.nodes = {}
     this.labels = {}
     this.carets = {}
@@ -90,11 +89,11 @@ class TreeView {
       </div>`
     li.appendChild(label)
     if (data.children) {
-      var isExpanded = self.nodeIsExpanded[keyPath]
       var list = yo`<ul class=${css.ul_tv}>${children}</ul>`
       this.nodes[keyPath] = list
       this.labels[keyPath] = label
       this.carets[keyPath] = caret
+      list.style.display = 'none'
       caret.className = list.style.display === 'none' ? 'fa fa-caret-right' : 'fa fa-caret-down'
       label.onclick = function () {
         self.expand(keyPath)

From af235c8684eba57397c6155cf83dc3ab9a95f8db Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 1 Feb 2018 17:31:11 +0100
Subject: [PATCH 4/8] add isExpanded && updateNode function

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

diff --git a/remix-debugger/src/ui/TreeView.js b/remix-debugger/src/ui/TreeView.js
index 92112840c6..bcca518b2e 100644
--- a/remix-debugger/src/ui/TreeView.js
+++ b/remix-debugger/src/ui/TreeView.js
@@ -105,6 +105,14 @@ class TreeView {
     return li
   }
 
+  isExpanded (path) {
+    var current = this.nodeAt(path)
+    if (current) {
+      return current.style.display !== 'none'
+    }
+    return false
+  }
+
   expand (path) {
     if (this.labels[path]) {
       this.carets[path].className = this.carets[path].className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right'
@@ -117,6 +125,17 @@ class TreeView {
     return this.nodes[path]
   }
 
+  updateNode (path, newNode) {
+    var current = this.nodeAt(path)
+    if (current) {
+      var parent = current.parentNode
+      if (parent) {
+        parent.replaceChild(newNode, current)
+        this.nodes[path] = newNode
+      }
+    }
+  }
+
   formatSelfDefault (key, data) {
     return yo`<label>${key}: ${data.self}</label>`
   }

From 98045b9e77114534095c6b8b11b9377d2b33fbd6 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Fri, 2 Feb 2018 14:56:20 +0100
Subject: [PATCH 5/8] fix styling

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

diff --git a/remix-debugger/src/ui/TreeView.js b/remix-debugger/src/ui/TreeView.js
index bcca518b2e..a2aa788727 100644
--- a/remix-debugger/src/ui/TreeView.js
+++ b/remix-debugger/src/ui/TreeView.js
@@ -20,7 +20,6 @@ var css = csjs`
     -webkit-padding-start: 0px;
   }
   .caret_tv {
-    margin-top: 3px;
     width: 10px;
   }
   .label_tv {

From a9277858304f719736bed87f2335f466deb47e43 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Fri, 2 Feb 2018 14:56:57 +0100
Subject: [PATCH 6/8] retrieve node, caret, label by querySelector && add
 leafClick

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

diff --git a/remix-debugger/src/ui/TreeView.js b/remix-debugger/src/ui/TreeView.js
index a2aa788727..d2133c69ba 100644
--- a/remix-debugger/src/ui/TreeView.js
+++ b/remix-debugger/src/ui/TreeView.js
@@ -43,9 +43,6 @@ class TreeView {
     this.extractData = opts.extractData || this.extractDataDefault
     this.formatSelf = opts.formatSelf || this.formatSelfDefault
     this.view = null
-    this.nodes = {}
-    this.labels = {}
-    this.carets = {}
   }
 
   render (json, expand) {
@@ -70,36 +67,37 @@ class TreeView {
     return this.formatData(key, data, children, expand, keyPath)
   }
 
-  renderProperties (json, expand) {
+  renderProperties (json, expand, key) {
+    key = key || ''
     var children = Object.keys(json).map((innerkey) => {
       return this.renderObject(json[innerkey], json, innerkey, expand, innerkey)
     })
-    return yo`<ul class="${css.ul_tv}">${children}</ul>`
+    return yo`<ul key=${key} class="${css.ul_tv}">${children}</ul>`
   }
 
   formatData (key, data, children, expand, keyPath) {
     var self = this
     var li = yo`<li class=${css.li_tv}></li>`
-    var caret = yo`<div class="fa fa-caret-right ${css.caret_tv}"></div>`
+    var caret = yo`<div class="fa fa-caret-right caret ${css.caret_tv}"></div>`
     var label = yo`
-      <div class=${css.label_tv}>
+      <div key=${key} class=${css.label_tv}>
         ${caret}
         <span>${self.formatSelf(key, data, li)}</span>
       </div>`
     li.appendChild(label)
     if (data.children) {
-      var list = yo`<ul class=${css.ul_tv}>${children}</ul>`
-      this.nodes[keyPath] = list
-      this.labels[keyPath] = label
-      this.carets[keyPath] = caret
+      var list = yo`<ul key=${key} class=${css.ul_tv}>${children}</ul>`
       list.style.display = 'none'
-      caret.className = list.style.display === 'none' ? 'fa fa-caret-right' : 'fa fa-caret-down'
+      caret.className = list.style.display === 'none' ? `fa fa-caret-right caret ${css.caret_tv}` : `fa fa-caret-down caret ${css.caret_tv}`
       label.onclick = function () {
         self.expand(keyPath)
       }
       li.appendChild(list)
     } else {
       caret.style.visibility = 'hidden'
+      label.onclick = function () {
+        self.event.trigger('leafClick', [key, data, label])
+      }
     }
     return li
   }
@@ -113,25 +111,35 @@ class TreeView {
   }
 
   expand (path) {
-    if (this.labels[path]) {
-      this.carets[path].className = this.carets[path].className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right'
-      this.nodes[path].style.display = this.nodes[path].style.display === 'none' ? 'block' : 'none'
-      this.event.trigger('nodeClick', [path, this.nodes[path]])
+    var caret = this.caretAt(path)
+    var node = this.nodeAt(path)
+    if (node) {
+      node.style.display = node.style.display === 'none' ? 'block' : 'none'
+      caret.className = node.style.display === 'none' ? `fa fa-caret-right caret ${css.caret_tv}` : `fa fa-caret-down caret ${css.caret_tv}`
+      this.event.trigger('nodeClick', [path, node])
+    }
+  }
+
+  caretAt (path) {
+    var label = this.labelAt(path)
+    if (label) {
+      return label.querySelector('.caret')
     }
   }
 
+  labelAt (path) {
+    return this.view.querySelector(`div[key="${path}"]`)
+  }
+
   nodeAt (path) {
-    return this.nodes[path]
+    return this.view.querySelector(`ul[key="${path}"]`)
   }
 
-  updateNode (path, newNode) {
+  updateNodeFromJSON (path, jsonTree, expand) {
+    var newTree = this.renderProperties(jsonTree, expand, path)
     var current = this.nodeAt(path)
-    if (current) {
-      var parent = current.parentNode
-      if (parent) {
-        parent.replaceChild(newNode, current)
-        this.nodes[path] = newNode
-      }
+    if (current && current.parentElement) {
+      current.parentElement.replaceChild(newTree, current)
     }
   }
 

From f4353b7b096c1f8a39a8b5474ec1a84dd68f40d2 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Fri, 2 Feb 2018 15:30:31 +0100
Subject: [PATCH 7/8] add itemAt function

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

diff --git a/remix-debugger/src/ui/TreeView.js b/remix-debugger/src/ui/TreeView.js
index d2133c69ba..c1541f4ff0 100644
--- a/remix-debugger/src/ui/TreeView.js
+++ b/remix-debugger/src/ui/TreeView.js
@@ -77,7 +77,7 @@ class TreeView {
 
   formatData (key, data, children, expand, keyPath) {
     var self = this
-    var li = yo`<li class=${css.li_tv}></li>`
+    var li = yo`<li key=${key} class=${css.li_tv}></li>`
     var caret = yo`<div class="fa fa-caret-right caret ${css.caret_tv}"></div>`
     var label = yo`
       <div key=${key} class=${css.label_tv}>
@@ -127,6 +127,10 @@ class TreeView {
     }
   }
 
+  itemAt (path) {
+    return this.view.querySelector(`li[key="${path}"]`)
+  }
+
   labelAt (path) {
     return this.view.querySelector(`div[key="${path}"]`)
   }