0x/visualizer/cmp/controls.js

'use strict'

const button = (render) => ({ label, pressed, disabled, width }, action) => render`
  <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}
  </button>
`

module.exports = (render) => (state, action) => {
  const tiers = button(render)({ label: 'Tiers', pressed: state.tiers }, () => action({ type: 'tiers' }))
  const view = state.renderMergedBtn && !state.visualizeCpuProfile
    ? button(render)({
      label: state.merged ? 'Unmerge' : 'Merge',
      width: '6.85em',
      pressed: state.merged
    }, () => action({ type: 'view' }))
    : ''
  const optimized = state.visualizeCpuProfile
    ? ''
    : button(render)({
      label: 'Optimized',
      pressed: !state.merged && state.optimized,
      disabled: state.merged
    }, () => action({ type: 'optimized' }))
  const unoptimized = state.visualizeCpuProfile
    ? ''
    : button(render)({
      label: 'Unoptimized',
      pressed: !state.merged && state.unoptimized,
      disabled: state.merged
    }, () => action({ type: 'not-optimized' }))

  return render`
    <div style="">
      ${tiers}${view}${optimized}${unoptimized}
    </div>
  `
}