Tips for updating Jupyter notebook extension automatically while in the process of development and debugging

I'm currently in the process of creating a custom extension for Jupyter Notebook, following the guidance provided in this article:

To tweak and test my extension, I've been utilizing the Chrome developer tools on Windows7 to inspect and edit the JavaScript source code. Initially, I expected that hitting F5 to refresh the page would automatically apply my modifications.

However, as explained in the aforementioned article, it's necessary to execute

jupyter-contrib-nbextensions.exe install

and then restart the server in order to see the changes reflected in the notebook extension based on my code edits.

This process of reinstalling and refreshing after each minor adjustment can become quite frustrating while experimenting with the development and debugging of extensions.

=> I'm curious if there exists a feature or option for seamless automatic updating/reloading of the extension during development?

javascriptjupyter-notebookjupyter-contrib-nbextensions

Answer №1

To find a solution, I created a custom "Workspace module" extension:

https://github.com/stefaneidelloth/treezjs/tree/master/jupyter_notebook_extension/workspace_module

This extension's purpose is to import a file called "workspace.js" if it is present in the notebook folder. The main.js for this extension looks like this:

    define([
    'require',
    'jquery',
    'base/js/namespace',
    'base/js/events',
    'notebook/js/codecell' 
], function(
    requirejs,
    $,
    Jupyter,
    events,
    codecell   
) {
           
    var load_ipython_extension = function() {  
        if (Jupyter.notebook !== undefined && Jupyter.notebook._fully_loaded) {
            init();                    
        } else {
            console.log("[workspace_module] Waiting for notebook availability")
            events.on("notebook_loaded.Notebook", function() {
                init();                           
            })
        }
    };
    
    function init(){
        
        console.log("[workspace_module] trying to load workspace.js")

        var moduleScript = document.createElement('script');
        moduleScript.setAttribute('type','module'); 
        
        moduleScript.setAttribute('src','workspace.js');    

        document.body.appendChild(moduleScript);
    }


    return {
        load_ipython_extension: load_ipython_extension       
    };

});

The workspace.js file then redirects to my actual extension:

import './treezjs/src/treezJupyterNotebook.js';

With this setup, I can modify my code as needed during development without having to re-run the installation command.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing the real module instead of resorting to mock usage

I've configured Jest as follows: jest: { configure: { testEnvironment: 'jsdom', preset: 'ts-jest', transform: {...}, moduleNameMapper: { antd: '<rootDir>/__mocks__/antd/index.tsx&apo ...

javascriptreactjstypescriptjestjsreact-testing-library

Unable to determine if a tile in Tic-tac-toe is vacant using jQuery

I'm currently working on developing a Tic-tac-toe game, but I seem to be facing an issue with the code that checks whether the user is clicking on an empty square or one that has already been filled. I've tried troubleshooting it myself, but I ca ...

javascriptjquery

Discord.js reaction event handling

I'm in the process of developing a starboard feature for my bot, and everything is functioning well. However, I am facing an issue where I want the bot to ignore reactions made by the author of the original message. Here is the current code snippet: ...

javascriptnode.jsdiscorddiscord.js

A guide on extracting attribute values with special characters in HTML

I have a requirement where I need to extract an ID from a JSON response. This ID is in the format "TICKET NUMBER (TK)". In the HTML component, there is an attribute called CI which has the same value as the ID. However, when I try to access any attribute ...

javascriptjqueryhtmlangularjs

React.js "universal" component that is able to be generated multiple instances of

I'm struggling to fully understand this problem. Here's the issue: imagine there is an app where I need to generate notifications, dialogs, or other similar elements from my code. One option is to have a "global" component that controls everyth ...

javascriptreactjs

Tips for organizing items in a vertical table using the v-data-table

Is it possible to set a default sorting order for true values in a v-data-table column with sortable elements? When I click on the 'sortable' icon in the header, the elements in the first column are sorted accordingly. However, upon opening the p ...

javascriptvue.jsvuetify.js

Shifting content results in Vue transitions

I've encountered an issue with transitioning content shifts. My data array is displayed in different areas of the DOM based on the state. The main idea: OPEN feedback 1 [ complete ] feedback 2 [ complete ] feedback 3 [ complete ] CLOSED Goal: ...

javascriptvue.jscss-transitionstransition

What is the best way to send props to a component that is exported using a Store Provider?

I'm trying to export my react component along with the redux store Provider. In order to achieve this, I've wrapped the component with an exportWithState callback. However, I'm facing an issue where I can't seem to access the props that ...

javascriptreactjsreact-props

Is there a way for me to identify the vertical gaps in my code using JavaScript?

Within this specific HTML document, there are multiple div elements that have an absolute positioning applied to them I am looking to develop a JavaScript code that can determine the row of each individual div. I define a row as any space on the vertical ...

javascripthtml

Guide on decoding JSON data in Java: retrieving JSON data from a local server and displaying its contents

My current project involves working on a basic example of encoding and decoding JSON using Java. The goal is to send signup page details to a JavaScript function, which then encodes these values into JSON format before sending them to a servlet. While I h ...

javascriptjavajsondecodeencode

What is the significance of labeling a function/method as variadic?

As I was browsing through a blog post discussing Puppeteer (a Node Library designed for browser automation), I came across the following statement: "It is possible to add one or more arguments to page.evaluate because it is variadic in its acceptanc ...

javascriptfunction

The integration of SignalR client within an AngularJs controller is failing to function properly

My Angular application is set up with routes, but I am having trouble getting Signalr to work properly with them. Without routes, Signalr works fine in both directions from client to server and vice versa. However, when using routes, it seems that Signalr ...

javascriptasp.netangularjssignalrsignalr.client

Mysterious data organization - transform into an object

As I interact with an API, there is a value that I cannot quite pinpoint. My goal is to transform this string into a JavaScript object, but the process seems complex and confusing. Does anyone have insight on what this data represents and how it can be co ...

javascriptjsonnode.jsmagento-1.7

How can we prevent the modal from extending beyond the boundaries of the phone screen when zoomed in

I am currently developing a web application that features a large content page, specifically a map which should display detailed information upon zooming in similar to Google Maps. The interactive elements on my map are clickable, triggering a modal popup ...

javascriptcssangularjstwitter-bootstrapbootstrap-modal

another solution instead of using several try-catch blocks within a function

Consider a scenario where we define a function as shown below: async function doSomethingWithFriends() { let user, friends, friendsOfFriends = null; try { user = await getUser(); } catch(err){ return [401, err] } try { ...

javascriptnode.jsasync-await

Receiving a Promise<fullfield> as a result

I have a situation where I am adding several promises to an array: const apiCallsToMake = []; apiCallsToMake.push(this.getDataFromUnsplash(copyInputParams)); apiCallsToMake.push(this.getDataFromPexels(copyInputParams)); apiCallsToMake.pu ...

javascripttypescriptasynchronousasync-await

"Proceeding to" express this redirection

Greetings, I am currently struggling to understand why res.redirect('/index') is rendering like this: <p>OK. Redirecting to <a href="/index">/</a></p> Instead of directly redirecting on the page. I searched through th ...

javascriptnode.jshttp-redirectexpressnode-modules

My goal is to monitor every action (button) that users take while using the PDF viewer

Each browser displays the view differently, and I am interested in monitoring specific user actions such as button presses on a PDF viewer. I am currently setting up an iframe and configuring its attributes. Is there a way to achieve this? ...

javascriptangular

Click to switch the content using ng-click

I have a query that iterates through an array of strings called wikiContent. After displaying the first three sentences from the array, I aim to insert a hyperlink labeled More, which when clicked will reveal the remaining sentences. This code snippet is ...

javascriptangularjsangularjs-ng-clickng-hide

Enhance communication system by optimizing MySQL, JavaScript, and PHP chat functionality

I have created a chat application using Javascript, PHP, and MySQL for two users. Every 3 seconds, it makes an AJAX request to a PHP file to retrieve messages from the database and update the page. Currently, the PHP query used is: SELECT * FROM tmessages ...

javascriptphpmysqloptimizationchat