!(async function(){
  await util.getFile(`cns-cache/mnist_train_raw_3.npy`)
  var digitMetadata = await util.getFile('mnist_train.csv')
  var {byLabel} = util.decorateDigitMetadata(digitMetadata)

  var sel = d3.select('.top-bot-digits').html('')
      .at({role: 'graphics-document', 'aria-label': `The twenty-five MNIST 3 digits most and least senstive to higher and lower privacy. The digits most sensitive to higher privacy are much more poorly drawn than the onces least sensitive to higher privacy.`})

  var digitSel = sel.append('div')
  var buttonSel = sel.append('div.digit-button-container')
    .appendMany('div.button', d3.range(10))
    .text(d => d)
    .on('click', d => drawClass(byLabel[d]))

  drawClass(byLabel[3])

  async function drawClass(digitClass){
    buttonSel.classed('active', d => d == digitClass.key)
    await util.getFile(`cns-cache/mnist_train_raw_${digitClass.key}.npy`)

    var nRows = 5
    var nCols = 5

    var bot = _.sortBy(digitClass, d => +d.priv_order).slice(0, nRows*nCols)
    var top = _.sortBy(digitClass, d => -d.priv_order).slice(0, nRows*nCols)
    
    digitSel.html('').append('div')
      .st({maxWidth: 640, margin: '0 auto'})
      .appendMany('div', [bot, top])
      .st({display: 'inline-block'})
      .each(drawDigitBlock)


    function drawDigitBlock(digits, isBot){
      var s = 2

      var sel = d3.select(this).append('div')

      var c = d3.conventions({
        sel,
        width: s*29*nCols,
        height: s*29*nRows,
        layers: 'cs',
        margin: {top: 30, bottom: 10, right: 10, left: 10}
      })

      var ctx = c.layers[0]

      digits.forEach((d, i) => {
        util.drawDigit(
          ctx, 
          +d.i, 
          s,
          (i % nCols)*s*29,
          Math.floor(i/nCols)*s*29
        )
      })

      c.svg.append('text')
        .text(isBot ? 'Least sensitive to higher privacy' : 'Most sensitive to higher privacy')
        .at({dy: '-.4em', textAnchor: 'middle', x: c.width/2, fontWeight: 600, fontSize: 14})
    }
  }

})()