JupyterLab Tutorial

Adding Content

expand icon

Adding ContentΒΆ

As an example: Add a leaflet viewer plugin for geoJSON files.

  • Go to npm: search for leaflet (success!).
  • Go to jupyterlab top level source directory: jlpm add leaflet. This adds the file to the dependencies in package.json.
  • Next we see if there is a typing declaration for leaflet: jlpm add --dev @types/leaflet. Success!
  • If there are no typings, we must create our own. An example typings file that exports functions is ansi_up. An example with a class is xterm.
  • Add a reference to the new library in src/typings.d.ts.
  • Create a folder in src for the plugin.
  • Add index.ts and plugin.ts files.
  • If creating CSS, import them in src/default-themes/index.css.
  • The index.ts file should have the core logic for the plugin. In this case, it should create a widget and widget factory for rendering geojson files (see Documents).
  • The plugin.ts file should create the extension and add the content to the application. In this case registering the widget factory using the document registry.
  • Run jlpm run build from jupyterlab/jupyterlab
  • Run jupyter lab and verify changes.