Merge pull request #247 from JunoLab/sp/newprofler

update profiler

Author: pfitzseb

lib/debugger/stepper-view.coffee

@@ -84,7 +84,7 @@ class StepperView
 
         @view.parentElement.style.maxWidth = (window.innerWidth - RESULT_OFFSET - 10 - this.left) + 'px'
         @view.style.maxWidth = w + 'px'
-      setTimeout((() => process.nextTick(() => window.requestAnimationFrame(@widthListener))), 15*1000/60)
+      setTimeout((() => process.nextTick(() => window.requestAnimationFrame(@widthListener))), 300)
 
     window.requestAnimationFrame(@widthListener)
 

lib/editor/highlights.coffee

@@ -24,15 +24,26 @@ module.exports =
       watch.dispose()
       m.destroy() for m in markers
 
+  profileLineView: (ed, count, classes) ->
+    v = document.createElement 'div'
+    v.classList.add('ink-profile-line')
+    v.classList.add(cl) for cl in classes
+
+    v.style.width = count*ed.preferredLineLength*ed.defaultCharWidth + 'px'
+    v
+
   profileLines: (ls) ->
     markers = []
-    watch = @observeLines ls, (ed, {line, count}) =>
-      m = ed.markBufferRange [[line, 0], [line, 1+Math.round(count*ed.preferredLineLength)]],
-        invalidate: 'touch'
+    watch = @observeLines ls, (ed, {line, count, classes}) =>
+      m = ed.markBufferRange [[line, 0], [line, 0]],
+        invalidate: 'never'
       markers.push m
       ed.decorateMarker m,
-        type: 'highlight'
-        class: 'ink-profile-line'
+        type: 'overlay'
+        item: @profileLineView ed, count, classes
+        class: 'ink-profile-overlay'
+        avoidOverflow: false
+
     destroy: =>
       watch.dispose()
       m.destroy() for m in markers

lib/editor/result-view.js

@@ -163,7 +163,9 @@ export default class ResultView {
   }
 
   // only read from the DOM
-  decideUpdateWidth (edRect) {
+  decideUpdateWidth (edRect, winWidth) {
+    this.edRect = edRect
+    this.winWidth = winWidth
     this.isVisible = false
     this.left = 0
     this.shouldRedraw = false
@@ -179,7 +181,7 @@ export default class ResultView {
   }
 
   // only write to the DOM
-  updateWidth (edRect, winWidth) {
+  updateWidth () {
     if (!!this.isVisible || this.model.expanded) {
       this.getView().style.visibility = 'visible'
       this.getView().style.pointerEvents = 'auto'
@@ -188,16 +190,16 @@ export default class ResultView {
       this.getView().style.pointerEvents = 'none'
     }
     if (!!this.isVisible && (this.shouldRedraw || this.modelUpdated)) {
-      let w = edRect.right - RESULT_OFFSET - 10 - this.left
+      let w = this.edRect.right - RESULT_OFFSET - 10 - this.left
       if (w < MIN_RESULT_WIDTH) w = MIN_RESULT_WIDTH
-      if (edRect.width > 0 && this.left + RESULT_OFFSET + w > edRect.right) {
-        this.getView().style.left = (edRect.right - w - 10 - this.left) + 'px'
+      if (this.edRect.width > 0 && this.left + RESULT_OFFSET + w > this.edRect.right) {
+        this.getView().style.left = (this.edRect.right - w - 10 - this.left) + 'px'
         this.getView().style.opacity = 0.75
       } else {
         this.getView().style.left = RESULT_OFFSET + 'px'
         this.getView().style.opacity = 1.0
       }
-      this.getView().parentElement.style.maxWidth = (winWidth - RESULT_OFFSET - 10 - this.left) + 'px'
+      this.getView().parentElement.style.maxWidth = (this.winWidth - RESULT_OFFSET - 10 - this.left) + 'px'
       this.getView().style.maxWidth = w + 'px'
       this.modelUpdated = false
     }

lib/editor/result.js

@@ -256,6 +256,7 @@ export default class Result {
       }))
 
     let listener = () => {
+      let allresults = []
       for (let edid in layers) {
         let res = layers[edid].getMarkers().map((m) => m.result)
         res = res.filter((r) => r.type === 'inline')
@@ -267,16 +268,19 @@ export default class Result {
         }
         let winWidth = window.innerWidth;
 
-        res.forEach((r) => r.view.decideUpdateWidth(rect))
-
-        // DOM writes
-        res.forEach((r) => r.view.updateWidth(rect, winWidth))
+        res.forEach((r) => r.view.decideUpdateWidth(rect, winWidth))
+        allresults.push(...res)
       }
 
+      // DOM writes
+      allresults.forEach((r) => r.view.updateWidth())
+
+
       setTimeout(() => {
         process.nextTick(() => window.requestAnimationFrame(listener))
-      }, 500)
+      }, 400)
     }
+
     window.requestAnimationFrame(listener)
     return
   }
@@ -288,5 +292,5 @@ export default class Result {
 
 // stopgap for https://github.com/atom/atom/issues/16454
 function uniqueEditorID(editor) {
-  return editor.id + '_' + editor.buffer.id
+  return editor.id
 }

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={{
+    const {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">
+    const nodes = []
+    const 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

@@ -9,28 +9,35 @@ import { prewalk, prefor } from './tree.js'
 import { open } from '../util/opener'
 import { remote } from 'electron'
 
-function namestring (func, file, line) {
+function namestring (func, file, line, classes) {
   if (!func && !file) { return "Program" }
-  return (func ? func + " at " : "") + file + (line == -1 ? "" : ":"+line)
+  return (
+    (func ? func + " at " : "") +
+    file +
+    (line === -1 ? "" : ":" + line) +
+    (classes.length === 0 ? "" : " (" + classes.join(", ") + ")")
+  )
 }
 
 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},
+    onmouseover: () => view.current = {func, location, line, count, classes},
     onmouseout: () => view.current = null,
     onclick: () => open(path, line-1, {pending: true})
   }))
 }
 
 function flatten (tree) {
   const cache = {}
-  prefor(tree, ({path, line, count}) => {
+  prefor(tree, ({path, line, count, classes}) => {
     const key = JSON.stringify([path, line])
     let val = cache[key]
-    if (!val) val = cache[key] = {file: path, line: line-1, count: 0}
+    if (!val) val = cache[key] = {file: path, line: line-1, count: 0, classes}
     val.count += count
   })
 
@@ -43,10 +50,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))
@@ -65,11 +73,11 @@ export class ProfileViewer {
                    <Button icon='file' alt='Save' disabled={!this.save} onclick={() => this.saveData()}/>
                  </span>
     if (!current) return <span>{always}</span>
-    const {func, location, line, count} = current
+    const {func, location, line, count, classes} = current
     return <span>
       {always}
       <span className='inline-block'><Badge>{count}</Badge></span>
-      <span style='vertical-align:middle'>{namestring(func, location, line)}</span>
+      <span style='vertical-align:middle'>{namestring(func, location, line, classes)}</span>
     </span>
   }
 
@@ -86,7 +94,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;
 

styles/ink.less

@@ -135,8 +135,16 @@
   }
 }
 
-.ink-profile-line {
-  background: fade(@background-color-info, 20%);
+atom-overlay.ink-profile-overlay{
+  pointer-events: none;
+  z-index: 0 !important;
+  .ink-profile-line {
+    position: relative;
+    height: 1.5em;
+    top: -1.5em;
+    border-radius: 0px 5px 5px 0px;
+    background: fade(@background-color-info, 20%);
+  }
 }
 
 atom-text-editor {