the function display_html not working in Jupyter Lab

Question

This "R code" works fine in Jupyter but not in lab:

library(IRdisplay)

display_html(
'

<script>  
code_show=true; 
function code_toggle() {
  if (code_show){
    $(\'div.input\').hide();
  } else {
    $(\'div.input\').show();
  }
  code_show = !code_show
}  
$( document ).ready(code_toggle);
</script>
  <form action="javascript:code_toggle()">
    <input type="submit" value="Code On/Off">
 </form>

<style type="text/css">

.container { width:80% !important; }

.main-container {
  max-width: 2000px;
  margin-left: 100px;
  margin-right: 10px;
}

/*body{font-family: Lucida Sans Unicode} */

.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
    color: #004F59;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
    color: #ffffff;
    background-color: #004F59;
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    background-color: #004F59;
}
</style>

'
)

I also tried to use display_html in other contexts. Is there a reason why this does not work in lab? Can it easily be fixed? Thanks.

Answer 1

The IRdisplay::display_html() works fine in JupyterLab, as does the callback to your function. The only differences between Notebook v6 and JupyterLab are:

• jQuery is not available by default in JupyterLab (as it is no longer needed in 2020's), so the selection by $(\'div.input\').hide(); will not work - use standard document.querySelectorAll() instead
• CSS classes are different so styles (and selectors need to be adjusted); it is not clear what you wanted to achieve but for hiding input areas you can achieve the same effect with standard JS in JupyterLab:

IRdisplay::display_html('
<script type="text/javascript">
let code_show = true;
function code_toggle() {
  if (code_show) {
    document.querySelectorAll(".jp-Cell-inputArea").forEach(function(inputArea) {
      inputArea.style.display = "none";
    });
  } else {
    document.querySelectorAll(".jp-Cell-inputArea").forEach(function(inputArea) {
      inputArea.style.display = "";
    });
  }
  code_show = !code_show;
}
</script>
<form action="javascript:code_toggle()">
  <input type="submit" value="Code On/Off">
</form>
')