cosmos-explorer/src/Terminal
Laurent Nguyen 90c1439d34
Update prettier to latest. Remove tslint (#1641)
* Rev up prettier

* Reformat

* Remove deprecated tslint

* Remove call to tslint and update package-lock.json
2023-10-03 17:13:24 +02:00
..
JupyterLabAppFactory.ts Adding vcore mongo quickstart (#1600) 2023-09-12 18:03:59 -07:00
NotebookAppContracts.d.ts Prettier 2.0 (#393) 2021-01-20 09:15:01 -06:00
README.md Remove NotebookTab (#35) 2020-06-12 09:26:39 +02:00
TerminalProps.ts Adding vcore mongo quickstart (#1600) 2023-09-12 18:03:59 -07:00
index.css Initial Move from Azure DevOps to GitHub 2020-05-25 21:30:55 -05:00
index.html Update prettier to latest. Remove tslint (#1641) 2023-10-03 17:13:24 +02:00
index.ts Update prettier to latest. Remove tslint (#1641) 2023-10-03 17:13:24 +02:00

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

Install Jupyter server on local machine (Windows)

We use the Anaconda distribution which comes with a packaged jupyter and python.

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

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.