Disable Merge/Unmerge Optimized Unoptimized buttons when generating flamegraph from v8 profile

Author: slonka

index.js

@@ -26,7 +26,7 @@ async function zeroEks (args) {
   }
 
   validate(args)
-  const { collectOnly, visualizeOnly, writeTicks, treeDebug, mapFrames } = args
+  const { collectOnly, visualizeOnly, writeTicks, treeDebug, mapFrames, visualizeV8Profile } = args
 
   let incompatibleOptions = 0
   if (collectOnly) incompatibleOptions += 1
@@ -38,7 +38,7 @@ async function zeroEks (args) {
   }
 
   if (visualizeOnly) return visualize(args)
-  if (visualizeV8Profile) return visualizeV8Profile(args)
+  if (visualizeV8Profile) return v8ProfileVisualization(args)
 
   args.title = args.title || `node ${args.argv.join(' ')}`
   var { ticks, pid, folder, inlined } = await startProcessAndCollectTraceData(args)
@@ -111,7 +111,7 @@ function getFolder (file, workingDir) {
     : file
 }
 
-async function visualizeV8Profile (opts) {
+async function v8ProfileVisualization (opts) {
   const folder = dirname(opts.visualizeV8Profile)
   const file = await render({ ...opts, folder })
   return file

lib/render.js

@@ -29,7 +29,7 @@ async function render (opts) {
 
   const script = `
     ${await createBundle()}
-    visualizer(${JSON.stringify(trees)}, ${JSON.stringify({ title, kernelTracing })})
+    visualizer(${JSON.stringify(trees)}, ${JSON.stringify({ title, kernelTracing, visualizeV8Profile })})
   `
   const htmlPath = determineHtmlPath({ name, outputHtml, workingDir, pid, outputDir: folder })
 

visualizer/cmp/controls.js

@@ -1,13 +1,13 @@
 'use strict'
 
 const button = (render) => ({ label, pressed, disabled, width }, action) => render`
-  <button 
+  <button
     class="f6 pointer br2 ba ph3 pv1 dib black mb2 mt1 ml1 mr1 ${disabled ? 'o-50 bg-silver' : ''}"
     ${disabled ? 'disabled' : ''}
     style="
       ${pressed ? 'box-shadow: 0 0 0 .125em black;' : ''}
       ${width ? 'width: ' + width + ';' : ''}
-    " 
+    "
     onclick=${action}
   >
     ${label}
@@ -16,17 +16,17 @@ const button = (render) => ({ label, pressed, disabled, width }, action) => rend
 
 module.exports = (render) => (state, action) => {
   const tiers = button(render)({ label: 'Tiers', pressed: state.tiers }, () => action({ type: 'tiers' }))
-  const view = state.renderMergedBtn ? button(render)({
+  const view = state.renderMergedBtn && !state.visualizeV8Profile ? button(render)({
     label: state.merged ? 'Unmerge' : 'Merge',
     width: '6.85em',
     pressed: state.merged
   }, () => action({ type: 'view' })) : ''
-  const optimized = button(render)({
+  const optimized = state.visualizeV8Profile ? '' : button(render)({
     label: 'Optimized',
     pressed: !state.merged && state.optimized,
     disabled: state.merged
   }, () => action({ type: 'optimized' }))
-  const unoptimized = button(render)({
+  const unoptimized = state.visualizeV8Profile ? '' : button(render)({
     label: 'Unoptimized',
     pressed: !state.merged && state.unoptimized,
     disabled: state.merged

visualizer/index.js

@@ -10,7 +10,7 @@ const ui = require('./cmp/ui')(render)
 
 module.exports = function (trees, opts) {
   opts = opts || {}
-  const { kernelTracing } = opts
+  const { kernelTracing, visualizeV8Profile } = opts
   const exclude = new Set(['cpp', 'regexp', 'v8', 'native', 'init'])
 
   const chart = graph()
@@ -49,7 +49,7 @@ module.exports = function (trees, opts) {
     flamegraph.width(width).update()
   }, 150))
 
-  const state = createState({ colors, trees, exclude, kernelTracing, title: opts.title })
+  const state = createState({ colors, trees, exclude, kernelTracing, title: opts.title, visualizeV8Profile })
 
   const actions = createActions({ flamegraph, state }, (state) => {
     morphdom(iface, ui({ state, actions }))

visualizer/state.js

@@ -3,7 +3,7 @@
 const hsl = require('hsl-to-rgb-for-reals')
 const { colorHash } = require('d3-fg')
 
-module.exports = ({ colors, trees, exclude, merged = false, kernelTracing, title }) => ({
+module.exports = ({ colors, trees, exclude, merged = false, kernelTracing, title, visualizeV8Profile }) => ({
   trees,
   focusedNodeId: null,
   key: {
@@ -21,6 +21,7 @@ module.exports = ({ colors, trees, exclude, merged = false, kernelTracing, title
     optimized: false,
     unoptimized: false,
     renderMergedBtn: !kernelTracing,
+    visualizeV8Profile,
     merged: merged
   },
   typeFilters: {