Pan/zoom button on bqplot does not work

[celine168]

Describe the bug
When using bqplot in Thebe, the pan/zoom button appears (with Font Awesome 4), but clicking the button does not allow the plot to be panned or zoomed.

Console output:

To Reproduce

Steps to reproduce the behavior:
Load the following HTML (or use this page: https://github.com/sandertyu/widgetstuffs/blob/8576956a999589f84d48024e5062c65cf70f58b4/Thebe/bqplot.html)
This is also the current documentation page for the bqplot example on Thebe: https://thebelab.readthedocs.io/en/latest/examples/bqplot_example.html

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity_no="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>
   <script type="text/x-thebe-config">
     {
       requestKernel: true,
       binderOptions: {
         repo: "bqplot/bqplot",
         ref: "0.12.18",
         binderUrl: "https://mybinder.org",
         repoProvider: "github",
       },
     }
   </script>
   <script src="https://unpkg.com/thebelab@latest/lib/index.js"></script>
   <button id="activateButton" style="width: 120px; height: 40px; font-size: 1.5em;">
     Activate
   </button>
   <script>
   var bootstrapThebe = function() {
       thebelab.bootstrap();
   }
   document.querySelector("#activateButton").addEventListener('click', bootstrapThebe)
   </script>
   <pre data-executable="true" data-language="python">
   import numpy as np
   from bqplot import pyplot as plt
   
   size = 100
   np.random.seed(0)
   x_data = np.arange(size)
   y_data = np.cumsum(np.random.randn(size)  * 100.0)
   
   plt.figure(title='My First Plot')
   plt.plot(x_data, y_data)
   plt.show()
   </pre>

Environment

• Python Version [e.g. 3.7.1]: 3.7.8
• Package versions or output of jupyter-book --version:
  bqplot: 0.12.18
• Operating System: Windows, Firefox

Additional context
This is an extension to #185.

[celine168]

Source code for pan/zoom on bqplot if anyone is interested: https://github.com/bqplot/bqplot/blob/a4917aedbc8caab8b6fcb966b0ae039bd261edba/bqplot/interacts.py

[celine168]

Since the pan/zoom feature is a sub-widget (and the save-figure and reset buttons are not), maybe there is a problem with Thebe interacting with child widgets? Just speculating. I also get a "cannot get model id" error on #226, not sure if that's related.

[celine168]

Information I have found out so far:
After more inspection, I'm confused as to why this.kernel is used in ThebeManager since HTMLManager does not support this variable.

IWidgetManager, ManagerBase, and HTMLManager (the classes/interfaces that ThebeManager uses) do not instantiate the kernel. In Thebe, the kernel is requested outside the class so there is no kernel to reference.

Just noticed there is also a typo in the function too

  _create_comm(target_name, model_id, data, metadata) {
    const comm = this.kernel.connectToComm(target_name, model_id);
    if (data || metdata) {
      comm.open(data, metadata);
    }
    return Promise.resolve(new ShimmedComm(comm));
  }

I suspect the function was copied over from this example? I will see if I can try to pass kernel into the function somehow.