JupyterLab extension with HTML import from included HTML file?

JupyterLab
1

I previously created a Jupyter nbextension for my What-If Tool, a machine learning model/data visual probing tool. It works with standard Jupyter notebooks but not in JupyterLab, as I understand JupyterLab doesn’t support nbextensions (extension installation documentation: https://github.com/tensorflow/tensorboard/tree/master/tensorboard/plugins/interactive_inference#how-do-i-enable-it-for-use-in-a-jupyter-notebook)

I want to enable this extension in JupyterLab as well but can’t figure out how to package the precompiled HTML file that the extension needs to HTML import (which it does through <link href=[path to html file]>). In standard Jupyter, in code I can find the webpack public path for the wit-widget nbextension to point to the HTML file that is installed with the nbextension and it works great.

I’ve created and published a test node package for the JupyterLab version of this extension, and can get it to show my visualization if I hack the extension code to grab the required HTML file from a fixed location on where it is hosted on github. But of course I want this HTML to be packaged with my npm extension package and loaded from there instead.

What is the proper way that I can include this HTML file in my npm extension package and then reference it as an href in my HTML link import statement?

Thanks for any help you can provide!

2

The most robust way would probably be for you to use a tool to ‘bundle’ your HTML as a string in your JS. Several tools exist that could do this, but I do not have any good suggestions without knowing more about your current project setup.

3

Use the webpack file loader to import the html file, something like this:

import imageLink from 'file!./path/to/html/file.html';

const a = document.create('a');
a.href = imageLink;