jupyter-notebook
This project does not have any active maintainers. We recommend that you use nteract, a native notebook application built using Electron, React (like this project), Redux, and RxJS, or Hydrogen, a LightTable-inspired package for Atom that allows users to run code blocks and selections using Jupyter kernels.
A package that works like the Jupyter Notebook, but inside Atom. It's registered as an opener for .ipynb
files — try opening one!
Install
- 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
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
git clone https://github.com/jupyter/atom-notebook.git
apm install
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()
returnsundefined
becauseatom.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