v5 (#102)

* Footer redesign (#85)

Squashed commit of the following:

commit 3707067
Author: Alessio Carnevale <[email protected]>
Date:   Tue Feb 26 16:58:56 2019 +0100

    Filters/footer redesign (#85)

    * replacing `More info` drop-down with a button

    * setting drop-down border colours - commenting out 2px border

    * fixing scroll-bar appearing on side-bar in

commit 1f19aed
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 25 13:21:36 2019 +0100

    removing colored dots on mobile

commit 6369782
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 25 13:16:05 2019 +0100

    * adding reference color for each key (app, deps, core)
    * improving `ellipsis` handling on narrower screens

commit 479bfb9
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 25 11:26:37 2019 +0100

    amending as per PR comments

commit 13500d1
Author: Alessio Carnevale <[email protected]>
Date:   Wed Feb 20 16:08:04 2019 +0100

    making use of the new `button` component in `selection-controls`

commit 761866f
Author: Alessio Carnevale <[email protected]>
Date:   Wed Feb 20 16:07:25 2019 +0100

    optimising Dependecies data count check

commit a3b35bc
Author: Alessio Carnevale <[email protected]>
Date:   Wed Feb 20 15:53:44 2019 +0100

    fixing dataCount value calculation

commit 9a0609b
Author: Alessio Carnevale <[email protected]>
Date:   Wed Feb 20 15:53:16 2019 +0100

    removing comments

commit bb4d816
Author: Alessio Carnevale <[email protected]>
Date:   Wed Feb 20 15:52:37 2019 +0100

    removing `options-menu`

commit 050ac9a
Merge: 9be8ad7 91953fb
Author: Alessio Carnevale <[email protected]>
Date:   Wed Feb 20 15:08:43 2019 +0100

    Merge remote-tracking branch 'origin/master' into feature/footer_redesign

commit 9be8ad7
Author: Alessio Carnevale <[email protected]>
Date:   Wed Feb 20 14:46:11 2019 +0100

    fixing `is:init` option and adding `Close button` to SideBar

commit 1cf745b
Merge: 84e8a8a b9406ee
Author: Alessio Carnevale <[email protected]>
Date:   Wed Feb 20 13:36:12 2019 +0100

    Merge remote-tracking branch 'origin/master' into feature/footer_redesign

commit 84e8a8a
Author: Alessio Carnevale <[email protected]>
Date:   Wed Feb 20 13:32:38 2019 +0100

    normalising padding value

commit ef462b7
Author: Alessio Carnevale <[email protected]>
Date:   Wed Feb 20 13:32:11 2019 +0100

    sideBar responsive version

commit 6647ae4
Author: Alessio Carnevale <[email protected]>
Date:   Wed Feb 20 13:31:22 2019 +0100

    triggering `sideBar` event

commit f9f5b82
Author: Alessio Carnevale <[email protected]>
Date:   Tue Feb 19 20:04:22 2019 +0100

    fixing autohide of drop-down content

commit feec024
Author: Alessio Carnevale <[email protected]>
Date:   Tue Feb 19 20:04:05 2019 +0100

    clicking on X first clears then close the search-box

commit abf5068
Author: Alessio Carnevale <[email protected]>
Date:   Tue Feb 19 15:36:58 2019 +0100

    replacing classes with classNames

commit 57b0002
Author: Alessio Carnevale <[email protected]>
Date:   Tue Feb 19 15:36:38 2019 +0100

    using DOMParser in `toHtml` helper

commit ee8ae46
Author: Alessio Carnevale <[email protected]>
Date:   Tue Feb 19 15:35:54 2019 +0100

    replacing `classes` with `classNames`

commit dfaa235
Author: Alessio Carnevale <[email protected]>
Date:   Tue Feb 19 15:34:34 2019 +0100

    adding mobile search-box / adding bp-1 and bp-2 breakpoints

commit 592af61
Author: Alessio Carnevale <[email protected]>
Date:   Tue Feb 19 15:32:59 2019 +0100

    Fixing search-box style. It assumed the user would always assign 'search-box' id

commit a019306
Merge: 8e1a2a9 0ec0d59
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 18 16:37:52 2019 +0100

    Merge branch 'feature/base-components-2' into feature/footer_redesign

commit 0ec0d59
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 18 12:10:55 2019 +0100

    creating helpers.js

commit fddcd8e
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 18 12:10:43 2019 +0100

    adding CB for click and change events

commit c3c6538
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 18 12:10:19 2019 +0100

    replacing check-button-combo with drop-down

commit d52d0b5
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 18 12:09:26 2019 +0100

    fixing padding

commit 8e1a2a9
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 18 11:58:28 2019 +0100

    using button component in selection-controls

commit aec330a
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 18 11:26:45 2019 +0100

    improving setCodeAreaVisibility function

commit c256edb
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 18 11:26:23 2019 +0100

    adding onChange cb

commit 4b5016f
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 18 11:25:43 2019 +0100

    tweking style and making use ot toHtml helper

commit 700a928
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 18 11:25:20 2019 +0100

    weaking button css and onclick function

commit c10512d
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 18 11:24:28 2019 +0100

    creating helpers.js to host some common helpers

commit c0bb407
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 18 11:23:53 2019 +0100

    replacing check-button-combo component with drop-down

commit a65461b
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 18 11:21:50 2019 +0100

    tweaking side-bar slide-in/out animation

commit 286900a
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 18 11:21:20 2019 +0100

    calling ui.setCodeAreaVisibility and using Object.assign to support IE

commit fba3f69
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 18 11:20:09 2019 +0100

    creating the combos in the footer

commit eb6e5a2
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 11 10:53:39 2019 +0100

    Adding `SideBar` container, renaming `filters-bar` and `filters-options`

commit f9952fb
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 11 10:32:13 2019 +0100

    moving common under visualizer

commit 0fd376d
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 11 10:21:57 2019 +0100

    creating base components

commit 5c73e9a
Author: Alessio Carnevale <[email protected]>
Date:   Mon Feb 11 10:15:56 2019 +0100

    creating base components

commit 4075502
Author: Alessio Carnevale <[email protected]>
Date:   Sat Feb 2 23:02:45 2019 +0100

    Cleaning code and fixing Advanced section

commit 393bfbf
Author: Alessio Carnevale <[email protected]>
Date:   Sat Feb 2 23:02:16 2019 +0100

    style tweaks

commit 753d5f1
Author: Alessio Carnevale <[email protected]>
Date:   Sat Feb 2 23:02:00 2019 +0100

    firing 'updateExclusions' on setUseMergedTree and setShowOptimizationStatus

commit f30a7b8
Author: Alessio Carnevale <[email protected]>
Date:   Sat Feb 2 19:57:56 2019 +0100

    removing toolbar-side-panel and adding 'filters-container' to the footer

commit ff540b8
Author: Alessio Carnevale <[email protected]>
Date:   Sat Feb 2 19:56:57 2019 +0100

    adding 'filters-content' and 'filters-container'

* Flame graph percentage display (#74)

* [621] - Implement flame graph percentages as dropdown alongside info box

* [621] - Move percentage dropdown above info-box

* [621] - Fix percentage dropdown button padding

* Feature/walkthrough (#89)

* fixing selection-controls css rules

* creating `walkthrough` component

* creating context-overlay component

* adding transition to width and height

* defining some demo steps

* adding WT to UI

* adding `c_` to className to make it less common

* fixing toHTML function

* creating `element-highlighter` to darken everything out in a page but the selected element

* adding `element-highlighter-border`

* adding transition to the borders

* enabling backdrop on walkthroug component

* adding constant elements (logo, docs)

* adding the arrow to point the target elem

* preventing element-highlighter to show up on resize

* moving base components to clinic-common

* updating the base style file name

* adding custom style for base components

* removing the graph percentage dropdown

* adding `How does this work` button

* using `link` in the walkthrough steps

* enabling Walkthrough visualisation through URL

* using `howDoesThisWork` component

* updating @nearform/clinic-common dep version

* removing unneeded rules

* renaming howDoesThisWork to walkthroughButton

* fixing a typo and updating clinic-common dependency

* adding support for base64 images and making use of `chalk`

* moving helpButton to footer

* updating `walkthrough` steps

* adding images for walkthrough demo

* removing unneeded var

* Use new Clinic Common release

* Add real walkthrough content

* Remove dummy content and use block link styler

* `standard --fix`

* Organise sidebar contents under accordions (#94)

* renaming filters-options to filters-content

* adding accordions to side-bar

* refactoring filters-content to make use of `asccordion` component

* updating the Deps drop-down content on `setData`

* moving `#flame-main .scroll-container` style to more appropriate location

* moving `.scroll-container` style to clinic-common

* adding some dummy data to test the side-bar

* avoiding too many calls to `updateExclusions` when looping through sub filters

* reducing the clickable area of `More info` in the side-bar

* passing an Object as argument to `setCodeAreaVisibility` and removing console.trace

* removing `deps` dummy data

* using `childrenVisibilityToggle` to decide when to render the sub filters toggle

* enabling back `deps` children

* adding spinner to filters-bar and filters-content

* fixing `presentation-mode` checkbox and adding spinner

* Use Accordion branch of Clinic Common

* Design tweaks

* More design tweaks

* Pulse buttons while applying fliters

We want no spinner or overlay over the main flamegraph while applying a filter so that the user can see what has changed.

* Improve performance of dependencies filter

* Add and style app and deps descriptions

* Remove dummy text

* Fix property name casing

* Remove commented block

* simple comments

* Basic WebAssembly support (#103)

* Basic WebAssembly support

* make istanbul happy

* Upgrade 0x

* Use a separate WASM category

* fix test

* Remove isWasm, detect wasm frames in same way as others

* Fix crash when hiding wasm frames

* Info box responsive improvements (#104)

* [621] - Create method in DataTree to count total frames from source data and use show percentage on stack top each frame is in the UI

* [621] - Implement dropdown with top and overall stack percentage into info-box

* [621] - Tidy info-box UI

* [621] - Use active tree value to calculate frame percentage

* [621] - Fix selection-controls margin

* [621] - Optimise text display in info box. Flag future use of visibleRootValue for stack percentages

* [621] - Fix type error when generating path title attribute

* [621] - Revert changes to text arrangement in info-box

* [621] - Ensure line and col numbers are spaced properly

* [621] - Use pointer cursor on percentage dropdown button

* [621] - Ensure percentage dropdown closes on click outside and remove empty property from DataTree

* [621] - Create method in DataTree to count total frames from source data and use show percentage on stack top each frame is in the UI

* [621] - Use active tree value to calculate frame percentage

* [621] - Tweak responsive nature of info-box text

* [621] - Make more sections of info text responsive and rely on labels for full text content where necessary

* [621] - Tweak styling to find line of best fit between different outputs, function name lengths etc

* Use tooltip component.

* make frame info tooltip full-width on mobile, fix some overflows

* Implement brand fonts (#87)

* [596] - Remove styling for header and defer to common

* [596] - Import JS and CSS build scripts from common as use as part of HTML generation

* [596] - Remove brfs dep

* [647] - Load font from common whilst showing spinner to hide and esnure font has a chance to load before use in Flamegraph

* [647] - Ensure flamegraph is redrawn once slow loading UI font is loaded after timeout

* [647] - Use clinic common to better orchestrate UI events on font load state

* [596] - Add class to body on font load to work in tandem with screenshot function to ensure loader has disappeared

* [596] - Ensure UI is drawn immediately despite state of font loading

* [596] - Point to Clinic Common dev branch for ease-of-testing

* [596] - Remove bodyClass that was hiding loader

* [596] - Wrap font loader function in setTimeout to prevent blocking removal of spinner

* [596] - Update Clinic Common dep

* Use mainline clinic-common.

analysis/code-areas.js

@@ -36,6 +36,7 @@ function collectCodeAreas (trees) {
     { id: 'deps',
       children: toCodeAreaChildren(depCodeAreas),
       childrenVisibilityToggle: depCodeAreas.size > 2 },
+    { id: 'wasm' },
     { id: 'core' },
     { id: 'all-v8',
       children: [

analysis/frame-node.js

@@ -1,6 +1,7 @@
 const path = require('path')
 
 const jsFrameRx = /^([~*])?((?:\S+?\(anonymous function\)|\S+)?(?: [a-zA-Z]+)*) (.*?):(\d+):(\d+)( \[INIT])?( \[INLINABLE])?$/
+const wasmFrameRx = /^(.*?) \[WASM:(\w+)]$/
 // This one has the /m flag because regexes may contain \n
 const cppFrameRx = /^(.*) (\[CPP]|\[SHARED_LIB]|\[CODE:\w+])( \[INIT])?$/m
 
@@ -24,6 +25,11 @@ class FrameNode {
     this.lineNumber = null
     this.columnNumber = null
 
+    this.isInit = false
+    this.isInlinable = false
+    this.isOptimized = false
+    this.isUnoptimized = false
+
     // Don't try to identify anything for the root node
     if (fixedType) {
       this.category = 'none'
@@ -32,8 +38,8 @@ class FrameNode {
     }
 
     // C++ and v8 functions don't match, but they don't need to
-    const m = this.name.match(jsFrameRx)
-    if (m) {
+    let m
+    if ((m = this.name.match(jsFrameRx))) {
       const [
         input, // eslint-disable-line no-unused-vars
         optimizationFlag,
@@ -53,20 +59,29 @@ class FrameNode {
       this.isInlinable = isInlinable != null
       this.isOptimized = optimizationFlag === '~'
       this.isUnoptimized = optimizationFlag === '*'
+    } else if ((m = this.name.match(cppFrameRx))) {
+      const [
+        input, // eslint-disable-line no-unused-vars
+        functionName,
+        tag,
+        isInit
+      ] = m
+      const isSharedLib = tag === '[SHARED_LIB]'
+      this.functionName = isSharedLib ? '[SHARED_LIB]' : functionName
+      this.fileName = isSharedLib ? functionName : null
+      this.isInit = isInit != null
     } else {
-      const m = this.name.match(cppFrameRx)
-      /* istanbul ignore else: Only triggers if there's a bug */
-      if (m) {
+      /* istanbul ignore else: if none of the regexes we are missing a feature */
+      if ((m = this.name.match(wasmFrameRx))) {
         const [
           input, // eslint-disable-line no-unused-vars
           functionName,
-          tag,
-          isInit
+          optimizationTag
         ] = m
-        const isSharedLib = tag === '[SHARED_LIB]'
-        this.functionName = isSharedLib ? '[SHARED_LIB]' : functionName
-        this.fileName = isSharedLib ? functionName : null
-        this.isInit = isInit != null
+        this.functionName = functionName
+        this.fileName = null
+        this.isOptimized = optimizationTag === 'Opt'
+        this.isUnoptimized = optimizationTag === 'Unopt'
       } else {
         throw new Error(`Encountered an unparseable frame "${this.name}"`)
       }
@@ -89,7 +104,8 @@ class FrameNode {
     const {
       category,
       type
-    } = this.getCoreOrV8Type(name, systemInfo) ||
+    } = this.getWasmType(name) ||
+      this.getCoreOrV8Type(name, systemInfo) ||
       this.getDepType(name, systemInfo) ||
       this.getAppType(name, appName)
 
@@ -116,6 +132,13 @@ class FrameNode {
     // TODO: add more cases like this
   }
 
+  getWasmType (name) {
+    if (/\[WASM:\w+]$/.test(name)) {
+      return { type: 'wasm', category: 'wasm' }
+    }
+    return null
+  }
+
   getCoreOrV8Type (name, systemInfo) {
     // TODO: see if any subdivisions of core are useful
     const core = { type: 'core', category: 'core' }
@@ -236,6 +259,7 @@ class FrameNode {
       isUnoptimized: this.isUnoptimized,
       isInlinable: this.isInlinable,
       isInit: this.isInit,
+      isWasm: this.isWasm,
 
       value: this.onStack,
       onStackTop: this.onStackTop,

analysis/index.js

@@ -12,14 +12,6 @@ const {
 
 const readFile = promisify(fs.readFile)
 
-// TODO Remove this function when the UI side of dependency code areas
-// is implemented.
-function removeDependencyAreasFromCodeAreas (codeAreas) {
-  const depArea = codeAreas.find((area) => area.id === 'deps')
-  delete depArea.children
-  delete depArea.childrenVisibilityToggle
-}
-
 async function analyse (paths) {
   const [systemInfo, ticks, inlined] = await Promise.all([
     readFile(paths['/systeminfo'], 'utf8').then(JSON.parse),
@@ -51,10 +43,6 @@ async function analyse (paths) {
 
   const codeAreas = collectCodeAreas({ merged, unmerged })
 
-  // TODO Remove this TEMPORARY call when UI side of code area collection
-  // is implemented
-  removeDependencyAreasFromCodeAreas(codeAreas)
-
   return {
     appName,
     pathSeparator,

debug/visualize-mod.js

@@ -1,20 +1,22 @@
 #!/usr/bin/env node
-
+const chalk = require('chalk')
 const Tool = require('../')
 
 module.exports = {
   visualize: () => {
     for (const file of process.argv.slice(2).map(trim)) {
       const tool = new Tool({ debug: true })
 
+      console.log(chalk.blue('building...'))
       tool.visualize(
         file,
         file + '.html',
         function (err) {
           if (err) {
             throw err
           } else {
-            console.log('Wrote', file + '.html')
+            console.log('-------')
+            console.log(chalk.bgBlue(' WROTE '), file + '.html')
           }
         }
       )

debug/visualize-watch.js

@@ -1,23 +1,49 @@
 #!/usr/bin/env node
 
-var chokidar = require('chokidar')
-var v = require('./visualize-mod.js')
+const chokidar = require('chokidar')
+const chalk = require('chalk')
+const v = require('./visualize-mod.js')
+
+const buildImg = require('@nearform/clinic-common/scripts/build-images')
+// build images
+const imgDestDir = `${__dirname}/../visualizer/assets/images`
 
 const debounce = require('lodash.debounce')
 
 // this is useful when updating multiple files in just one go (i.e. checking-out a branch)
 const debVisualize = debounce(v.visualize, 100)
 
+// building the images
+chokidar
+  .watch([
+    'visualizer/assets/images/*.png',
+    'visualizer/assets/images/*.jpeg',
+    'visualizer/assets/images/*.jpg',
+    'visualizer/assets/images/*.gif'
+  ])
+  .on('add', (path) => {
+    console.log(chalk.green('Image:'), path)
+    buildImg.file(path, imgDestDir)
+  })
+  .on('change', (path) => {
+    console.log(chalk.green('Image:'), path)
+    buildImg.file(path, imgDestDir)
+  })
+
+// building css and js files
 chokidar
   .watch([
     'visualizer/**/*.css',
     'visualizer/**/*.js',
     'index.js'
   ], {
-    ignoreInitial: true
+    ignoreInitial: true,
+    ignored: [
+      'visualizer/assets'
+    ]
   })
   .on('all', (event, path) => {
-    console.log(event, path)
+    console.log(chalk.blue(event.toUpperCase()), path)
     debVisualize()
   })
 

index.js

@@ -129,7 +129,7 @@ class ClinicFlame extends events.EventEmitter {
       }
     })
 
-    // uild CSS
+    // build CSS
     const styleFile = buildCss({
       stylePath,
       debug: this.debug
@@ -147,7 +147,7 @@ class ClinicFlame extends events.EventEmitter {
       headerText: 'Flame',
       nearFormLogo: nearFormLogoFile,
       uploadId: outputFilename.split('/').pop().split('.html').shift(),
-      body: `<main></main>`
+      body: '<main></main>'
     })
 
     pump(

package.json

@@ -28,8 +28,8 @@
   "author": "",
   "license": "GPL-3.0-or-later",
   "dependencies": {
-    "0x": "^4.7.2",
-    "@nearform/clinic-common": "^1.5.0",
+    "0x": "^4.9.1",
+    "@nearform/clinic-common": "^2.2.0",
     "copy-to-clipboard": "^3.0.8",
     "d3-array": "^2.0.2",
     "d3-fg": "^6.13.1",
@@ -43,6 +43,7 @@
   },
   "devDependencies": {
     "chokidar": "^3.0.2",
+    "murmur3hash-wasm": "1.0.1",
     "snazzy": "^8.0.0",
     "standard": "^13.0.0",
     "tap": "^12.0.0"

test/analysis-categorise.test.js

@@ -53,6 +53,18 @@ test('analysis - categorise node names', (t) => {
     isInit: false,
     isInlinable: true
   })
+  t.match(byProps({ name: 'wasm-function[0] [WASM:Opt]' }, linux), {
+    category: 'wasm',
+    type: 'wasm',
+    fileName: null,
+    isOptimized: true
+  })
+  t.match(byProps({ name: 'ressa::Parser<CH>::parse_statement_list_item::ha21ba52d257287dd [WASM:Opt]' }, linux), {
+    category: 'wasm',
+    type: 'wasm',
+    fileName: null,
+    isOptimized: true
+  })
 
   t.equal(byName('/usr/bin/node [SHARED_LIB]', linux), 'cpp')
   t.equal(byName('C:\\Program Files\\nodejs\\node.exe [SHARED_LIB]', windows), 'cpp')

test/basic.test.js

@@ -108,3 +108,32 @@ test('cmd - test collect - system info, data files and html', function (t) {
     }
   )
 })
+
+test('cmd - test collect - does not crash on webassembly frames', function (t) {
+  const tool = new ClinicFlame()
+
+  function cleanup (err, dirname) {
+    t.ifError(err)
+    t.match(dirname, /^[0-9]+\.clinic-flame$/)
+    rimraf(dirname, (err) => {
+      t.ifError(err)
+      t.end()
+    })
+  }
+
+  tool.collect(
+    [process.execPath, path.join('test', 'fixtures', 'wasm.js')],
+    function (err, dirname) {
+      if (err) return cleanup(err, dirname)
+
+      const basename = path.basename(dirname)
+      const systeminfo = JSON.parse(fs.readFileSync(path.join(dirname, `${basename}-systeminfo`)))
+      // check that samples data and inlined function data exists and is valid JSON
+      JSON.parse(fs.readFileSync(path.join(dirname, `${basename}-samples`)))
+      JSON.parse(fs.readFileSync(path.join(dirname, `${basename}-inlinedfunctions`)))
+
+      t.ok(fs.statSync(systeminfo.mainDirectory).isDirectory())
+      cleanup(null, dirname)
+    }
+  )
+})

test/fixtures/wasm.js

@@ -0,0 +1,8 @@
+var f = require('murmur3hash-wasm')
+var tenKb = require('crypto').randomBytes(10 * 1024)
+var start = Date.now()
+var result = 0
+while (Date.now() < start + 1000) {
+  result ^= f(tenKb, Math.floor(Math.random() * (1 << 31)))
+}
+console.log(result)