This code snippet manages code execution and output display within a Jupyter Notebook environment, handling various output types and communication with the kernel.

Run example

npm run import -- "Interactive cells in juypter"

Interactive cells in juypter

var last_id = '';
var clear_queued = false;
console_log = function (arg) {
    $('#output').append('<p>' + arg + '</p>');
}

function execute(code) {
    var res = kk.execute(code, {
        iopub: {
            output: function (msg) {
                // see static/notebook/js/outputarea.js:handle_output
                if (msg.header.msg_type === 'stream') {
                    $('#output').append('<p>' + msg.content.data + '</p>');
                } else if (msg.header.msg_type === 'display_data') {
                    $('#output').append('<p>' + msg.content.data + '</p>');
                } else if (msg.header.msg_type === 'execute_result') {
                    if (msg.content.data['text/plain'] !== undefined) {
                        $('#output').append('<p><strong>' + msg.content.data['text/plain'] + '</strong></p>');
                    }
                } else if (msg.header.msg_type === 'error') {
                    $('#output')
                        .append('<p style=\'color:red\'>' + msg.content.ename + ': ' + msg.content.evalue + '</p>');
                } else {
                    console.log('unhandled output message', msg);
                }
            },
            clear_output: function (msg) {
                if (msg.content.wait) {
                    if (clear_queued) {
                        $('#output').html('');
                        $('#widgets').html('');
                    }
                    clear_queued = true;
                } else {
                    $('#output').html('');
                    $('#widgets').html('');
                }
            }
        }
    }, {silent: false, store_history: true});
    last_id = res;
}

function js_execute(code) {
    $('#output').append('<p><strong>' + eval(code) + '</strong></p>');
}

require(
    ['base/js/events',
        'services/kernels/js/kernel',
        'notebook/js/keyboardmanager'],
    function (events_, kernel_, keyboardmanager_) {
        // leak variables into global scope
        events = events_;
        kernel = kernel_;
        keyboardmanager = keyboardmanager_;
        var keyboard_manager = new keyboardmanager.KeyboardManager({
            pager: null,
            events: events
        });
        if (window.parent !== window) {
            kernel_id = window.parent.IPython.notebook.session.kernel.kernel_id;
        } else {
            kernel_id = 'a4142958-41ed-4fe3-bea7-2a9bbd4db6bc';
        }
        false_cell = {
            widget_subarea: $('#widgets') // jQuery object to div
        };
        false_notebook = {
            events: events,
            keyboard_manager: keyboard_manager,
            get_msg_cell: function (msg_id) {
                if (msg_id === last_id) {
                    return false_cell;
                } else {
                    return null;
                }
            }
        };
        kk = new kernel.Kernel('/api/kernels', 'ws://127.0.0.1:8888', false_notebook, 'python2')
        kk._kernel_started({id: kernel_id, name: 'python2'});
        events.one('status_idle.Kernel', function (evt, data) {
            if (data.kernel === kk) {
                if (window.parent !== window && window.parent._subframe_cb !== undefined) {
                    window.parent._subframe_cb(execute);
                }
                console.log = console_log;
            }
        });
    });

// Define a function to handle console logging
function consoleLog(arg) {
    $('#output').append('<p>' + arg + '</p>');
}

// Define a function to execute code in the kernel
function execute(code) {
    const kernel = new Kernel('/api/kernels', 'ws://127.0.0.1:8888', {
        getCell: (msgId) => {
            if (msgId === lastId) {
                return {
                    widgetSubarea: $('#widgets'),
                };
            } else {
                return null;
            }
        },
    }, 'python2');
    kernel._kernelStarted({ id: kernelId, name: 'python2' });

    // Define a callback function for output messages
    function handleOutput(msg) {
        switch (msg.header.msgType) {
            case'stream':
                $('#output').append('<p>' + msg.content.data + '</p>');
                break;
            case 'display_data':
                $('#output').append('<p>' + msg.content.data + '</p>');
                break;
            case 'execute_result':
                if (msg.content.data['text/plain']!== undefined) {
                    $('#output').append('<p><strong>' + msg.content.data['text/plain'] + '</strong></p>');
                }
                break;
            case 'error':
                $('#output')
                   .append('<p style=\'color:red\'>' + msg.content.ename + ':'+ msg.content.evalue + '</p>');
                break;
            default:
                console.log('unhandled output message', msg);
                break;
        }
    }

    // Define a callback function for clearing output
    function handleClearOutput(msg) {
        if (msg.content.wait) {
            if (clearQueued) {
                $('#output').html('');
                $('#widgets').html('');
            }
            clearQueued = true;
        } else {
            $('#output').html('');
            $('#widgets').html('');
        }
    }

    // Execute the code in the kernel
    kernel.execute(code, {
        iopub: {
            output: handleOutput,
            clear_output: handleClearOutput,
        },
        silent: false,
        store_history: true,
    }).then((result) => {
        lastId = result;
    });
}

// Define a function to execute JavaScript code directly
function jsExecute(code) {
    try {
        const result = eval(code);
        $('#output').append('<p><strong>' + result + '</strong></p>');
    } catch (error) {
        console.log(`Error executing JavaScript code: ${error.message}`);
    }
}

// Initialize the kernel and events
require([
    'base/js/events',
   'services/kernels/js/kernel',
    'notebook/js/keyboardmanager',
], (events, kernel, keyboardmanager) => {
    events = events;
    kernel = kernel;
    keyboardmanager = keyboardmanager;

    const keyboardManager = new keyboardmanager.KeyboardManager({
        pager: null,
        events: events,
    });

    let kernelId;
    if (window.parent!== window) {
        kernelId = window.parent.IPython.notebook.session.kernel.kernel_id;
    } else {
        kernelId = 'a4142958-41ed-4fe3-bea7-2a9bbd4db6bc';
    }

    const falseCell = {
        widgetSubarea: $('#widgets'),
    };
    const falseNotebook = {
        events: events,
        keyboardManager: keyboardManager,
        getCell: (msgId) => {
            if (msgId === lastId) {
                return falseCell;
            } else {
                return null;
            }
        },
    };

    const kk = new kernel.Kernel('/api/kernels', 'ws://127.0.0.1:8888', falseNotebook, 'python2');

    kk._kernelStarted({ id: kernelId, name: 'python2' });

    events.one('status_idle.Kernel', (evt, data) => {
        if (data.kernel === kk) {
            if (window.parent!== window && window.parent._subframeCb!== undefined) {
                window.parent._subframeCb(execute);
            }
            console.log = consoleLog;
        }
    });
});

// Initialize variables
let lastId = '';
let clearQueued = false;

// Add an event listener for keyboard shortcuts
$('#widgets').on('keydown', (event) => {
    // TODO: Implement keyboard shortcut handling
});

This code snippet appears to be part of a Jupyter Notebook environment, specifically handling the execution of code and displaying the output.

Here's a breakdown:

1. Variables:

   • last_id: Stores the ID of the last executed code cell.
   • clear_queued: A flag indicating whether output clearing is queued.

2. console_log Function:

   • Appends a new paragraph containing the given argument to the HTML element with the ID "output".

3. execute Function:

   • Takes code as input and executes it using the kk.execute function (likely from a Jupyter kernel library).
   • Configures the iopub object to handle different types of output messages:
     • stream: Appends the data to the "output" element.
     • display_data: Appends the data to the "output" element.
     • execute_result: Appends the plain text result to the "output" element in bold.
     • error: Appends an error message in red to the "output" element.
   • Handles clear_output messages, clearing the "output" and "widgets" elements if necessary.
   • Stores the execution result ID in last_id.

4. js_execute Function:

   • Executes the given JavaScript code using eval and appends the result to the "output" element in bold.

5. Require Block:

   • Imports necessary modules from Jupyter Notebook:
     • events: For handling events.
     • kernel: For interacting with the kernel.
     • keyboardmanager: For managing keyboard shortcuts.

In essence, this code snippet sets up the infrastructure for executing code in a Jupyter Notebook environment, handling output display, error handling, and communication with the kernel.