Actions now invokes State. Also State.highlightPath()

- eg. Navigation.updatePath -> State.navigateTo()
- State.highlightPath() allows different components to react to highlights
 (mouseenter, mouseleave)

app/css/style.css

@@ -217,7 +217,7 @@ line {
   right: 0;
   width: 150px;
   transition: width 0.6s;
-  background: rgba(0,0,0,0.05);
+  background: rgba(0, 0, 0, 0.05);
 }
 
 #sidebar:hover {

app/index.html

@@ -360,10 +360,11 @@ <h5 class="nav-group-title">Tags</h5>
 
 <script src="vendor/three.min.js"></script>
 <script src="js/colors.js"></script>
+<script src="js/chart.js"></script>
+<script src="js/listview.js"></script>
 <script src="js/sunburst.js"></script>
 <script src="js/sunburst3d.js"></script>
 <script src="js/treemap.js"></script>
-<script src="js/chart.js"></script>
 <script src="js/flamegraph.js"></script>
 <script src="js/duFromFile.js"></script>
 <script src="js/ipc.js"></script>

app/js/breadcrumbs.js

@@ -7,19 +7,31 @@
 var selection = null
 
 function updateBreadcrumbs(d) {
-  // if (d) {
-  //   _updateBreadcrumbs(getAncestors(d))
-  // }
+  console.trace('highlightPath remove me')
+  State.highlightPath(keys(d))
 }
 
 function updateSelection(s) {
+  // TODO fix this
   selection = s
 }
 
 class Breadcumbs extends Chart {
   navigateTo(_path, d) {
+    if (!d) return
+
+    this.trail = getAncestors(d)
+    _updateBreadcrumbs(this.trail)
+  }
+
+  highlightPath(_path, d) {
     if (d) {
       _updateBreadcrumbs(getAncestors(d))
+      updateSelection(d)
+    } else {
+      console.log('meh', d)
+      _updateBreadcrumbs(this.trail)
+      updateSelection(null)
     }
   }
 }
@@ -28,9 +40,9 @@ var Menu = remote.Menu
 var MenuItem = remote.MenuItem
 
 var contextMenu = new Menu()
-var openMenu = new MenuItem({ label: 'Open', click: openSelection })
+var openMenu = new MenuItem({ label: 'Open File', click: openSelection })
 var sep = new MenuItem({ type: 'separator' })
-contextMenu.append(new MenuItem({ label: 'Locate', click: showSelection }))
+contextMenu.append(new MenuItem({ label: 'Open Directory', click: showSelection }))
 contextMenu.append(sep)
 contextMenu.append(openMenu)
 
@@ -106,7 +118,7 @@ function _updateBreadcrumbs(nodeArray) {
     .style('cursor', 'pointer')
     .on('click', d => {
       log('navigate', d)
-      Navigation.updatePath(keys(d))
+      State.navigateTo(keys(d))
     })
 
   entering.text(function(d) {

app/js/flamegraph.js

@@ -47,7 +47,7 @@ class FlameGraph extends Chart {
           console.log('movingTo', movingTo, route)
         }
         this.currentPath = movingTo
-        Navigation.updatePath(getNodePath(e.data))
+        State.navigateTo(getNodePath(e.data))
       }
     })
   }

app/js/listview.js

@@ -0,0 +1,84 @@
+function elm(tag, attrs, children, props) {
+  const el = document.createElement(tag)
+  for (const k in attrs) {
+    el.setAttribute(k, attrs[k])
+  }
+
+  if (children) {
+    children = Array.isArray(children) ? children : [children]
+    for (let child of children) {
+      if (typeof child === 'string') {
+        child = document.createTextNode(child)
+      }
+      el.appendChild(child)
+    }
+  }
+
+  if (props) {
+    for (const k in props) {
+      el[k] = props[k]
+    }
+  }
+  return el
+}
+
+class ListView extends Chart {
+  navigateTo(path, current) {
+    const navs = [
+      elm('h5', { class: 'nav-group-title' }, `${path.join('/')} ${format(current.value)}`, {
+        onclick: () => State.navigateTo(path.slice(0, -1))
+      })
+    ]
+
+    let str = '----------\n'
+    const nodes = current._children || current.children || []
+
+    const INITIAL_LOAD = 10
+
+    nodes
+      .sort((a, b) => {
+        if (a.value < b.value) return 1
+        if (a.value > b.value) return -1
+        return 0
+      })
+      .slice(0, INITIAL_LOAD)
+      .forEach(child => {
+        str += child.name + '\t' + format(child.value) + '\n'
+
+        navs.push(
+          elm(
+            'span',
+            {
+              class: 'nav-group-item',
+              href: '#'
+            },
+            [
+              elm('span', { class: 'icon icon-record', style: `color: ${fill(child)};` }),
+              child.name,
+              elm('span', { class: '', style: 'float:right;' }, format(child.value))
+            ],
+            {
+              onclick: () => child.children && State.navigateTo([...path, child.name]),
+              onmouseenter: () => State.highlightPath([...path, child.name]),
+              onmouseleave: () => State.highlightPath()
+            }
+          )
+        )
+      })
+
+    const remaining = nodes.length - INITIAL_LOAD
+    if (remaining > 0) {
+      navs.push(
+        elm('span', { class: 'nav-group-item', href: '#' }, [
+          elm('span', { class: 'icon icon-record' }),
+          `and ${remaining} other items....`
+        ])
+      )
+    }
+
+    log(str)
+    ;[...sidebar.childNodes].forEach(v => v.remove())
+    const nav = elm('nav', { class: 'nav-group' }, navs)
+    sidebar.appendChild(nav)
+  }
+}

app/js/radar.js

@@ -323,8 +323,7 @@ function hideAll() {
 }
 
 function deactivateCharts() {
-  [sunburstGraph, treemapGraph, flamegraphGraph].forEach(chart =>
-    PluginManager.deactivate(chart));
+  ;[sunburstGraph, treemapGraph, flamegraphGraph].forEach(chart => PluginManager.deactivate(chart))
 }
 
 function showSunburst() {

app/js/router.js

@@ -17,6 +17,7 @@ class NavigationController extends EventEmitter {
   }
 
   updatePath(path) {
+    if (!path.length) return
     if (this.currentPath().join('/') === path.join('/')) return
     let n = this.currentPath()
     if (!n || n !== path) {
@@ -49,6 +50,14 @@ class NavigationController extends EventEmitter {
 
 global.Navigation = new NavigationController()
 
+global.State = {
+  navigateTo: path => Navigation.updatePath(path),
+  clearNavigation: () => Navigation.clear(),
+  highlightPath: path => {
+    PluginManager.highlightPath(path)
+  }
+}
+
 /*****************
  * Graph Plugins
  * .generate(json)
@@ -59,17 +68,6 @@ global.Navigation = new NavigationController()
  * .showLess()
  */
 
-// plugins
-const treemapGraph = TreeMap()
-const sunburstGraph = SunBurst()
-const flamegraphGraph = new FlameGraph()
-
-class ListView extends Chart {
-  navigateTo(path, current) {
-    displayCurrent(path, current)
-  }
-}
-
 Navigation.on('navigationchanged', path => {
   PluginManager.navigateTo(path)
 })
@@ -99,7 +97,7 @@ window.PluginManager = {
 
     activatedGraphs.forEach(activatedGraph => activatedGraph.generate(json))
     if (!loaded) {
-      Navigation.updatePath([json.name])
+      State.navigateTo([json.name])
     }
     PluginManager.resize()
   },
@@ -110,16 +108,23 @@ window.PluginManager = {
     if (!this.data) return
     //
     const current = getNodeFromPath(path, this.data)
-    // displayCurrent(path, current)
 
     activatedGraphs.forEach(activatedGraph => activatedGraph.navigateTo(path, current, this.data))
   },
 
+  highlightPath: path => {
+    console.log('highlightPath', path)
+    const current = path && path.length ? getNodeFromPath(path, this.data) : null
+    activatedGraphs.forEach(activatedGraph => {
+      if (activatedGraph.highlightPath) activatedGraph.highlightPath(path, current, this.data)
+    })
+  },
+
   navigateUp: () => {
     var current = Navigation.currentPath()
     if (current.length > 1) {
       current.pop()
-      Navigation.updatePath(current)
+      State.navigateTo(current)
     }
   },
 
@@ -151,77 +156,18 @@ window.PluginManager = {
   }
 }
 
-function displayCurrent(path, current) {
-  const navs = [elm('h5', { class: 'nav-group-title' }, `${path.join('/')} ${format(current.value)}`)]
-
-  let str = '----------\n'
-  const nodes = current._children || current.children || []
-
-  const INITIAL_LOAD = 10
-
-  nodes
-    .sort((a, b) => {
-      if (a.value < b.value) return 1
-      if (a.value > b.value) return -1
-      return 0
-    })
-    .slice(0, INITIAL_LOAD)
-    .forEach(child => {
-      str += child.name + '\t' + format(child.value) + '\n'
-
-      navs.push(
-        elm('span', { class: 'nav-group-item', href: '#' }, [
-          elm('span', { class: 'icon icon-record', style: `color: ${fill(child)};` }),
-          child.name,
-          elm('span', { class: '', style: 'float:right;' }, format(child.value))
-        ])
-      )
-    })
-
-  const remaining = nodes.length - INITIAL_LOAD
-  if (remaining > 0) {
-    navs.push(
-      elm('span', { class: 'nav-group-item', href: '#' }, [
-        elm('span', { class: 'icon icon-record' }),
-        `and ${remaining} other items....`
-      ])
-    )
-  }
-
-  log(str)
-  ;[...sidebar.childNodes].forEach(v => v.remove())
-  const nav = elm('nav', { class: 'nav-group' }, navs)
-  sidebar.appendChild(nav)
-}
-
-function elm(tag, attrs, children) {
-  const el = document.createElement(tag)
-  for (const k in attrs) {
-    el.setAttribute(k, attrs[k])
-  }
-
-  if (!children) return el
-  children = Array.isArray(children) ? children : [children]
-  for (let child of children) {
-    if (typeof child === 'string') {
-      child = document.createTextNode(child)
-    }
-    el.appendChild(child)
-  }
-  return el
-}
+// chart plugins
+const treemapGraph = TreeMap()
+const sunburstGraph = SunBurst()
+const flamegraphGraph = new FlameGraph()
 
-const listview = new ListView();
-const breadcrumbs = new Breadcumbs();
+// common
+const listview = new ListView()
+const breadcrumbs = new Breadcumbs()
 
-PluginManager.activate(listview);
-PluginManager.activate(breadcrumbs);
+PluginManager.activate(listview)
+PluginManager.activate(breadcrumbs)
 
 showSunburst()
 // showFlamegraph()
 // showTreemap()
-
-
-global.State = {
-  clearNavigation: () => Navigation.clear()
-}