jupyterlab-sai

A JupyterLab extension for standalone integration of software engineering component into jupyterlab.

Prerequisites

• JupyterLab

Development

For a development install, do the following in the repository directory: (Please read the extension tutorial: https://jupyterlab.readthedocs.io/en/stable/developer/extension_tutorial.html#extension-tutorial)

1. Create a new environment named jupyerlab-ext and activate it.

conda create -n jupyterlab-ext --override-channels --strict-channel-priority -c conda-forge -c anaconda jupyterlab cookiecutter nodejs git
conda activate jupyterlab-ext

2. Build and install the extension for the development.

jlpm install
jupyter labextension install . --no-build

3. Start a JupyterLab instance in watch mode (better for another terminal)

conda activate jupyterlab-ext
jupyter lab --watch

4. For each edit of files, you need to rebuild

jlpm run build

일단 프로젝트명은 제 임의로 jupyter-sai라고 명명했습니다. 이 익스텐션을 만들기 위한 주요 구성 파일은 다음과 같습니다.

index.ts
widget.ts
javascript/editor.js

index.ts파일에선 익스텐션을 액티베이션합니다. 여기서 JupyterFrontEndPlugin을 메인으로 사용합니다.

const plugin: JupyterFrontEndPlugin<ISAITracker> = {
  activate,
  id: '@jupyterlab/SAI-extension:plugin',
  requires: [IFileBrowserFactory, ILayoutRestorer, IMainMenu, ICommandPalette],
  optional: [ILauncher],
  provides: ISAITracker,
  autoStart: true
};

FileBrowserFactory는 파일매니저에 파일을, IMainMenu는 메뉴 아이템을, ILauncher는 론쳐에 아이콘을 생성합니다.

widget.ts파일은 ABCWdigetFactory와 DocumentWidget을 이용해 위젯을 생성합니다. 이 위젯을 통해 메인 도큐먼트(메인화면)를 보여주고 onAfterShow event에서 editor를 생성하고 dirty state및 도큐먼트를 관리합니다.

editor.js 파일은 javascript constructor를 사용한 class로 구현되어 있습니다. editor.ts랑 연동되는 부분만 있을뿐 단순히 textarea를 생성해서 위젯에서 주어진 HTML DOM node에 붙여넣습니다.