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!

Sweet baby integration

Install

This package is built on React and the Flux architecture.

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.

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

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

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.

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