Skip to content

A React component that renders .ipynb files and allows for code execution.

License

Notifications You must be signed in to change notification settings

Desousak/react-jupyter-notebook

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

90 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-jupyter-notebook

A fork of react-jupyter-notebook that allows for the rendering and execution of Jupyter notebook files (.ipynb).

Demo: desousak.github.io/react-jupyter-notebook

Install

npm install --save https://github.com/Desousak/react-jupyter-notebook.git

Features

  • Nearly identical looking to original JupyterLab interface.
  • Can render codes, images, outputs, and markdown (with table & equation support).
  • Enable resizing the height of the scrolled output.
  • Execution of code with user-defined messaging.
    • Features support for Pyolite - allowing for execution of Python code through JS (see notes).
  • (SOON!) Can change the alignment of the media outputs.
  • (SOON!) Customisable code block styling.

Usage

// If you want code execution capabilities - you must provide your own connection code
// For example:
import { KernelMessenger } from 'react-jupyter-notebook';

class ExampleMessenger extends KernelMessenger {
  get ready() {
    // Returns a promise which resolves when the kernel loads in initially
    return Promise.resolve();
  }

  get kernelInfo() {
    // Return a promise containing info about the kernel
    return Promise.resolve({
      status: 'ok',
      protocol_version: 'X.Y.Z',
      implementation: '',
      implementation_version: 'X.Y.Z',
      language_info: {
        name: '',
        version: 'X.Y.Z',
        mimetype: '',
        file_extension: '',
        pygments_lexer: '',
        codemirror_mode: '',
        nbconvert_exporter: '',
      },
      banner: '',
      debugger: false,
      help_links: [{ text: '', url: '' }],
    });
  }

  get connected() {
    // Returns true if connected, false otherwise
    return false;
  }

  set connected(bool) {
    // Allows manually updating connected status if needed
    this.#connected = bool;
  }
  
  deconstructor() {
    // Will be run when the class is about to be removed
    // Can be used to disconnect from servers gracefully
    // Returns a promise, which will resolve when ready to be removed
    return Promise.resolve();
  }

  connectToKernel() {
    // this.updConnState(bool) is a callback that should be run on a connection change
    // (connect = true, disconnect = false, connecting = null)
    // Can be re-run multiple times for when states change
    this.updConnState(null);
  }

  runCode(code, callbackFunc) {
    // Run the code
    // Returns a promise which resolves once execution is completed
    return new Promise();
  }

  signalKernel(signal) {
    // Returns a promise which resolves if signalling was successful
    return new Promise();
  }
}
import JupyterViewer, {
  useKernelMessenger,
  useKernelReady,
  getIpynb
} from 'react-jupyter-notebook';

// If you want to update the kernel dynamically a provided hook can be used
const [messenger, changeMessenger] = useKernelMessenger(ExampleMessenger);
// A hook also exists for the kernel's state (whether it's ready, loading, or disconnected)
const kernelReady = useKernelReady(kernelMessenger);

function component() {
  // If you need to obtain the jupyter data (for example: saving purposes)
  // getIpynb() can be used
  useEffect(() => {
    const interval = setInterval(() => console.log(getIpynb()), 1000);
    return () => clearInterval(interval);
  }, []);
  return <JupyterViewer rawIpynb={rawIpynb} messenger={messenger} />;
}
import React from 'react';
import ReactDOM from 'react-dom';
import JupyterViewer from 'react-jupyter-notebook';
import nb_test from './nb_test.json'; // You need to read the .ipynb file into a JSON Object.
import ExampleMessenger from './ExampleMessenger'; // Replace with your own messenger class

ReactDOM.render(
  <React.StrictMode>
    <JupyterViewer rawIpynb={nb_test} messenger={new ExampleMessenger()} />
  </React.StrictMode>,
  document.getElementById('root')
);

Props

Prop name Type Description (default) Values
rawIpynb Object The JSON object converted from the .ipynb file. { cells: [] }
KernelMessenger Function The class responsible for handling interactions with a Jupyter kernel KernelMessenger

Todo

  • [   ] Customizable code block styling
  • [   ] Reimplement customizable styles
  • [   ] Customizable output cutoff thresholds
  • [   ] Support for more ascii values in output (other than \b and \r)
  • [   ] Make rapid execution output updates faster (through memoization?)
  • [   ] Fix vertical scaling of code cells & output (add mobile support?)
  • [✓] Refactor such that prop-drilling isn't needed to pass along the KernelMessenger
  • [✓] Add a default kernel messenger that interacts with Python via WASM (with JupyterLite)

Notes

codeStatus Reference:

  • Within Source.js an integer variable titled codeStatus is used to keep track of the state of the code's execution within the kernel.
  • See below for an explanation of what the variable can be:
    Value Description
    -2 An error occurred during last execution
    -1 Code has never been sent (first load of cell)
    0 Code hasn't been sent to the kernel
    1 Code is sent but not running yet
    2 Code is sent and currently running

Pyolite:

About

A React component that renders .ipynb files and allows for code execution.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 61.7%
  • TypeScript 29.4%
  • SCSS 7.0%
  • HTML 1.8%
  • Shell 0.1%