• 欢迎光临~

jupyterlab学习笔记

开发技术 开发技术 2022-12-11 次浏览

1 相关包安装

1.1 miniconda安装
# 下载安装包
https://docs.conda.io/en/latest/miniconda.html
1.2 nodejs安装
# 下载地址
https://nodejs.org/en/
1.3 git安装
# 下载地址
https://git-scm.com/download/win

2 扩展开发

2.1 环境搭建
# 文档地址
https://jupyterlab.readthedocs.io/en/stable/extension/extension_tutorial.html#extension-tutorial

# 创建虚拟环境,需要指定下python版本,否则默认版本3.11.0好像不兼容
conda create -n jupyterlab-ext --override-channels --strict-channel-priority -c conda-forge -c nodefaults jupyterlab=3 cookiecutter nodejs jupyter-packaging python==3.10.7

# 指定python版本创建虚拟环境,未指定时使用系统的python
conda create -n nje [python==3.10.7]
# 激活虚拟环境
conda activate jupyterlab-ext

# 删除虚拟环境
conda env remove -n conda activate jupyterlab-ext
2.2 扩展创建
pip install jupyterlab
pip install cookiecutter

cookiecutter https://github.com/jupyterlab/extension-cookiecutter-ts

# 报错时,先cloen下来,再执行
git clone https://github.com/jupyterlab/extension-cookiecutter-ts
cookiecutter  extension-cookiecutter-ts

# 各种选项
1 frontend表示用TypeScript编写纯前端的扩展
2 server具有前端和后端部分的扩展
3 theme表示JupyterLab的主题

# -v输出详细信息,-e以可编辑的模式安装项目
# 将扩展的前端部分复制到JupyterLab中。 每次更改时,我们都可以再次运行此命令 将更改复制到 JupyterLab,我们的更改会自动在 JupyterLab中安装?
pip install -ve .
# 报错markupsafe中的moudle找不到,其实是存在的,可能是因为下载的python默认是3.11.0,这个时候应该在创建虚拟环境时,就指定下python版本,在3.9.x~3.10.x之间选择一个版本

jupyter labextension develop --overwrite .
# 这个也报错OsError之类的,有错误参考文档,需要打开win的开发者模式

# 打开第二个终端
conda activate jupyterlab-ext
jupyter lab
2.3 操作
# 查询路径
jupyter --paths

# 列出扩展
jupyter labextension list

# 启用或禁用扩展
jupyter labextension disable/enable my-extension
2.4 扩展开发
2.3.1 增加页面
// 在cookiecutter生成出来的文件夹中 src/index.tx
import {
  JupyterFrontEnd,
  JupyterFrontEndPlugin
} from '@jupyterlab/application';

// import { ICommandPalette } from '@jupyterlab/apputils';
import { ICommandPalette, MainAreaWidget } from '@jupyterlab/apputils';
import { Widget } from '@lumino/widgets';

const plugin: JupyterFrontEndPlugin<void> = {
  id: 'aa',
  autoStart: true,
  requires: [ICommandPalette],


  activate: (app: JupyterFrontEnd, palette: ICommandPalette) => {
  console.log('JupyterLab extension jupyterlab_apod is activated!');

  // Create a blank content widget inside of a MainAreaWidget
  const content = new Widget();
  const widget = new MainAreaWidget({ content });
  widget.id = 'apod-jupyterlab';
  widget.title.label = 'Astronomy Picture';
  widget.title.closable = true;

  // Add an application command
  const command: string = 'apod:open';
  app.commands.addCommand(command, {
    label: 'Random Astronomy Picture',
    execute: () => {
      if (!widget.isAttached) {
        // Attach the widget to the main work area if it's not there
        app.shell.add(widget, 'main');
      }
      // Activate the widget
      app.shell.activateById(widget.id);
    }
  });

  // Add the command to the palette.
  palette.addItem({ command, category: 'Tutorial' });
}
};

export default plugin;
2.3.2 交互式页面顶部增加按钮

src/index.ts

import {
  JupyterFrontEnd,
  JupyterFrontEndPlugin
} from '@jupyterlab/application';
import {ButtonExtension} from "./button";
/**
 * Initialization data for the aa extension.
 */
const extension: JupyterFrontEndPlugin<void> = {
  id: 'aa',
  autoStart: true,
  activate: (app: JupyterFrontEnd) => {
    console.log('JupyterLab extension aa is activated!===================');

    let buttonExtension = new ButtonExtension();
    app.docRegistry.addWidgetExtension('NoteBook', buttonExtension);
  }
};

export default extension;

src/button.ts

import { ToolbarButton } from "@jupyterlab/apputils";
import { DocumentRegistry} from "@jupyterlab/docregistry";
import { INotebookModel, NotebookPanel } from"@jupyterlab/notebook";
import { IDisposable } from "@lumino/disposable";

export class ButtonExtension implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel> {
    createNew(panel: NotebookPanel, context: DocumentRegistry.IContext<INotebookModel>): IDisposable {

   let mybutton = new ToolbarButton({
       label: 'My Button',
       onClick: () => alert('You did it!')
   });

    panel.toolbar.insertItem(10, 'mybutton', mybutton);

    return mybutton;
    }
}

命令行中编译执行

# 添加依赖?
jlpm add @jupyterlab/apputils
jlpm add @jupyterlab/application
jlpm add @lumino/widgets

# 编译
jlpm run build

# 前端页面刷新查看效果
2.3.3 主菜单增加按钮

无需ts代码,只需要增加插件设置即可

在package.json中修改jupyterlab,指定扩展目录

"jupyterlab": {
  "schemaDir": "schema",
}

schema目录下新增json文件

假如多个json文件中id一样时,为同一个按钮,command相当于一条命令,即将该命令添加到按钮下

{
  "jupyter.lab.shortcuts": [],
  "title": "demo",
  "description": "demo",
  "type": "object",
  "properties": {},
  "jupyter.lab.menus": {
    "main": [
      {
        "id": "menu-demo",
        "label": "demo",
        "rank": 80,
        "items": [
          {
            "command": "terminal:create-new",
            "rank": 0
          }
        ]
      }
    ]
  },
  "additionalProperties": false
}
2.3.4 workspace

自定义布局可以保存为xx.jupyterlab-workspace文件,该文件其实就是一个json文件

示例文件如下

{
  "data": {
    "file-browser-filebrowser:cwd": {
      "path": ""
    },
    "dask-dashboard-launcher:individual-progress": {
      "data": {
        "route": "individual-progress",
        "label": "Progress"
      }
    },
    "dask-dashboard-launcher:individual-task-stream": {
      "data": {
        "route": "individual-task-stream",
        "label": "Task Stream"
      }
    },
    "layout-restorer:data": {
      "main": {
        "dock": {
          "type": "split-area",
          "orientation": "horizontal",
          "sizes": [
            0.5,
            0.5
          ],
          "children": [
            {
              "type": "tab-area",
              "currentIndex": 0,
              "widgets": [
                "markdownviewer-widget:Welcome.md"
              ]
            },
            {
              "type": "split-area",
              "orientation": "vertical",
              "sizes": [
                0.67,
                0.33
              ],
              "children": [
                {
                  "type": "tab-area",
                  "currentIndex": 0,
                  "widgets": [
                    "dask-dashboard-launcher:individual-task-stream"
                  ]
                },
                {
                  "type": "tab-area",
                  "currentIndex": 0,
                  "widgets": [
                    "dask-dashboard-launcher:individual-progress"
                  ]
                }
              ]
            }
          ]
        },
        "mode": "multiple-document",
        "current": "markdownviewer-widget:Welcome.md"
      },
      "left": {
        "collapsed": false,
        "current": "filebrowser",
        "widgets": [
          "filebrowser",
          "running-sessions",
          "dask-dashboard-launcher",
          "command-palette",
          "tab-manager"
        ]
      },
      "right": {
        "collapsed": true,
        "widgets": []
      }
    },
    "markdownviewer-widget:Welcome.md": {
      "data": {
        "path": "Welcome.md",
        "factory": "Markdown Preview"
      }
    },
    "dask-dashboard-launcher": {
      "url": "DASK_DASHBOARD_URL",
      "cluster": ""
    }
  },
  "metadata": {
    "id": "/lab"
  }
}
程序员灯塔
转载请注明原文链接:jupyterlab学习笔记
喜欢 (0)