jupyter-notebook

A package that works like the Jupyter Notebook, but inside Atom. It's registered as an opener for .ipynb files — try opening one!

Install

1. Install dependencies:

OS X

• Python 3: brew install python3 (there are issues with pip2 and OS X 10.11)
• Jupyter and Jupyter Kernel Gateway: pip3 install jupyter jupyter_kernel_gateway

Linux (Debian)

• Python: sudo apt-get install python python-pip
• Jupyter and Jupyter Kernel Gateway: pip install jupyter jupyter_kernel_gateway

2. apm install jupyter-notebook or search for jupyter-notebook inside of Atom

Usage

• Run cell: SHIFT+ENTER, CMD+ENTER (or CTRL+ENTER on Windows)

Developers

Install

1. git clone https://github.com/jupyter/atom-notebook.git
2. apm install
3. apm link

Achitecture

This package is built on React and the Flux architecture.

Map

• main tells Atom how to render NotebookEditor and registers as an Opener for .ipynb files
• dispatcher is a singleton flux.Dispatcher which contains the list of valid actions
• notebook-editor is the Store and handles all of the business logic. It loads the file in, creates a state, then receives Actions and updates the state accordingly.
• notebook-editor-view, notebook-cell, text-editor, display-area are the views. notebook-editor-view updates its state by fetching it from notebook-editor, then passes appropriate bits of that state down to the other views as props.

Flow

Rendering: NotebookEditor -> NotebookEditorView -> [child views]

Updating: [external action] -> Dispatcher.dispatch -> NotebookEditor.onAction ?-> NotebookEditor._onChange -> NotebookEditorView._onChange

Immutable state

The state returned by NotebookEditor.getState is an Immutable.js object.

Accessing its properties inside a view looks like this:

let executionCount = this.props.data.get('execution_count');

Changing it (in NotebookEditor) looks like this:

this.state = this.state.setIn(
    ['cells', cellIndex, 'source'],
    payload.source);

or this:

outputs = outputs.push(el.outerHTML);

Since React requires a view's state to be a regular JS object, the state of NotebookEditorView takes the form:

{
    data: <Immutable object>
}

No other views have state.

To do

• autocomplete
  • atom.workspace.getActiveTextEditor() returns undefined because atom.workspace.getActivePaneItem() returns our custom NotebookEditor class which contains one or more TextEditors, therefore autocomplete, find, and features provided by other packages don't work in cells
• add more actions (duplicate cell, restart kernel, change cell type, etc)
• tell React our rendering is pure
• test rendering performance with big notebooks