90c1439d34
* Rev up prettier * Reformat * Remove deprecated tslint * Remove call to tslint and update package-lock.json |
||
---|---|---|
.. | ||
JupyterLabAppFactory.ts | ||
NotebookAppContracts.d.ts | ||
README.md | ||
TerminalProps.ts | ||
index.css | ||
index.html | ||
index.ts |
README.md
Summary
This describes how to run a custom version of the Data Explorer in the Emulator which can open a jupyter notebook from with a tab.
Requirements
This requires:
- a running instance of CosmosDB Emulator
- a running instance of the jupyter server
- access to the cosmosdb-dataexplorer git repository
Installation
Install CosmosDB Emulator
- Download from https://docs.microsoft.com/en-us/azure/cosmos-db/local-emulator
- Open the Emulator and create at least one Collection
Install Jupyter server on local machine (Windows)
We use the Anaconda distribution which comes with a packaged jupyter and python.
- Download and install Anaconda from https://www.anaconda.com/distribution/ (python3 64-bit version) Keep all default options. Install Visual Studio Code as well.
Verify Jupyter installation and create mynotebook
- Open an "Anaconda Prompt" (hit the Window key, type "Anaconda", select "Anaconda Prompt" hit Enter)
cd src/jupyter-server (the notebooks will be saved in this directory) jupyter notebook
- It should open the browser at http://localhost:8888/ with the jupyter notebook.
- Edit the notebook and save it as "mynotebook" (This should create a file: mynotebook.ipynb). We do this, because right now, the notebook filename is hardcoded as mynotebook.
Modify jupyter server install
In order to serve the jupyter frontend from the emulator, we need to turn off a bunch of things.
- Stop the jupyter server (Ctrl-C twice from the Anaconda Prompt where you started jupyter notebook)
- From the Anaconda Prompt, type: juypter notebook --generate-config
- This should create the file: .jupyter/jupyter_notebook in your home directory.
- Edit this file:
Enable embedding the jupyter frontend inside an iFrame in DataExplorer: c.NotebookApp.tornado_settings = { 'headers': { 'Content-Security-Policy': "frame-ancestors * localhost:1234 localhost:12900"} }
Enable a remotely-served jupyter frontend to still talk to the jupyter server: c.NotebookApp.allow_origin = '*' c.NotebookApp.allow_remote_access = True <--- not sure if this one matters c.NotebookApp.token = '' c.NotebookApp.disable_check_xsrf = True
Install custom Data Explorer in Emulator
- Install git from https://git-scm.com/download/win (keep all default options)
- Install nodejs and npm from: https://nodejs.org/en/ (10.15.1 LTS)
Download and build Data Explorer
- From the Git Bash terminal:
- cd ~/src
- git clone https://msdata.visualstudio.com/DefaultCollection/CosmosDB/_git/cosmosdb-dataexplorer
- cd cosmosdb-dataexplorer/Product/Portal
- git checkout users/languye/spark-in-dataexplorer
- cd JupyterLab
- npm i
- npm run build (this builds jupyterlab (the frontend of jupyter) and copies it into ../DataExplorer/notebookapp/)
- cd ../DataExplorer
- npm i
- npm run build (this builds and copies DataExplorer into the Emulator folder)
How to run the setup
- Run the jupter-server by opening an Anaconda Prompt and typing: jupyter notebook
- Open the emulator at: http://localhost:8081/_explorer/index.html
- Click on any Collection
- Click on "New Notebook" button in the Command bar
- You should see the "mynotebook" jupyter notebook displayed in tab (inside an iframe).
- There is a "New Cell" button in the CommandBar outside the jupyter iframe which will add a cell inside the notebook.
Notes
- The Emulator is located in: C:\Program Files\Azure Cosmos DB Emulator\Packages\DataExplorer
- Running "jupyter notebook" serves the jupyter traditional frontend. There is an alternate frontend also developed by jupyter which is modular and customizable called: JupyterLab. We use their "notebook" example in this project slightly modified to pass the server and notebook pathname via iframe url's parameters: https://github.com/jupyterlab/jupyterlab/tree/master/examples/notebook jupyterlab uses the same communication protocol as the traditional frontend, so it can connect to any jupyter-server, so one can use multiple frontends (at the same time) to connect to a given jupyter-server.
- The jupyter frontend and the server use websockets to communicate.