update profiler

Author: pfitzseb

lib/plots/canopy.js

@@ -100,7 +100,7 @@ export class Pannable extends Etch {
     this.outerContainerRect = this.refs.outerContainer.getBoundingClientRect()
 
     this.setInitialScale(this.item)
-    
+
     etch.update(this)
   }
 
@@ -214,8 +214,8 @@ export class Pannable extends Etch {
 
 class NodeView extends Etch {
   render() {
-    let {height, width, top, left, onclick, onmouseover, onmouseout} = this.props;
-    return <Clickable onclick={onclick}><div className='node' {...{onmouseover, onmouseout}} style={{
+    let {height, width, top, left, onclick, classes, onmouseover, onmouseout} = this.props;
+    return <Clickable onclick={onclick}><div className={`node ${classes.join(' ')}`} {...{onmouseover, onmouseout}} style={{
       height: 100*height+'%',
       width:  100*width +'%',
       top:    100*top   +'%',
@@ -227,12 +227,13 @@ class NodeView extends Etch {
 }
 
 export default class Canopy extends Etch {
-  update({data}) {}
+  update({data, className}) {}
   render() {
-    let nodes = [];
-    prefor(dims(this.props.data), node => nodes.push(<NodeView {...node} />));
-    return <div className="ink-canopy">
+    let nodes = []
+    let className = this.props.className || ''
+    prefor(dims(this.props.data), node => nodes.push(<NodeView {...node} />))
+    return <div className={"ink-canopy " + className}>
       {nodes}
-    </div>;
+    </div>
   }
 }

lib/plots/profiler.js

@@ -16,8 +16,10 @@ function namestring (func, file, line) {
 
 function process (view, tree) {
   tree.name = "Program"
-  return prewalk(tree, ({count, children, location, func, path, line}) => ({
+  return prewalk(tree, ({count, classes, children,
+                         location, func, path, line}) => ({
     count,
+    classes,
     children,
     onmouseover: () => view.current = {func, location, line, count},
     onmouseout: () => view.current = null,
@@ -43,10 +45,11 @@ function flatten (tree) {
 }
 
 export class ProfileViewer {
-  constructor ({data, save=null}) {
+  constructor ({data, customClass='', save=null}) {
     this.rawData = data
     this.data = process(this, data)
     this.save = save
+    this.customClass = customClass
     this.highlights = require('../editor/highlights').profileLines(flatten(this.rawData))
 
     this.toolbar = view(() => this.toolbarView(this.current))
@@ -86,7 +89,7 @@ export class ProfileViewer {
   }
 
   render () {
-    return <Canopy data={this.data} />
+    return <Canopy className={this.customClass} data={this.data} />
   }
 
   build () {

styles/canopy.less

@@ -10,14 +10,15 @@
     padding: 1px;
     position: absolute;
   }
+
   .node > div {
     width: 100%;
     height: 100%;
-    border: solid @base-border-color 2px;
     border-radius: 5px;
-    background: fade(@background-color-info,10%);
+    border: solid fade(@background-color-info, 20%) 1px;
+    background: fade(@background-color-info, 10%);
     &:hover {
-      background: fade(@background-color-info,20%);
+      background: fade(@background-color-info, 20%);
     }
     transition: all 0.2s;