the function display_html not working in Jupyter Lab - r

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>
')