Jupyter Components

This project is custom widgets for Jupyter notebook, which is constructed base on anywidget. The supported widgets as following:

Widget	Base On	Params
Button	Antd Button	{label: string; on_click: function; props: dict}
FileSelector		{label: string; default_value: string; dir_select: bool}
Formily	formily	{schema: Dict; show_modal: bool}
Input	Antd Input	{label: string; props: dict}
Radio	Antd Radio	{label: string; options: list; default_value: string; props: dict}
Select	Antd Select	{label: string; options: list; default_value: string; props: dict}

For Formily widget, you can design schema by https://designable-antd.formilyjs.org/. In addition, we create a custom file selector, which can be use with

{
    ...
    "x-component": "FileSelectorForFormily"
    ...
}

Check demo.ipynb for more information.

How to install dependencies

You need to install dependencies both python and javascript. Please make sure you have installed poetry and yarn.

# python 
poetry install

# javascript
cd ja_fe && yarn install

How to build

./build.sh

How to create a new widget

Please follow steps below if you need to create a new widget.

1. Add a component_name.tsx file to ja_fe/src/component/. The component_name should start with A to Z, so it can be read as component.

// Example.tsx
import React from "react";
import { useModelState } from "@anywidget/react";

const Example: React.FC = () => {
  const [variableA, setVariableA] = useModelState("variable_a");
  return (
    <div>This is Example. {variableA}</div>
  );
};

export default Example;

2. Add a widget_name.py file to ja_py/.

# example.py
import anywidget
import traitlets
import os
from ._contant import PARENT_DIR_PATH

ESM = os.path.join(PARENT_DIR_PATH, "ja_fe/dist/Example.js")
CSS = ""

class Example(anywidget.AnyWidget):
    _esm = ESM
    _css = CSS
    variable_a = traitlets.Unicode("").tag(sync=True)

    def __init__(self, variable_a=""):
        super(Example, self).__init__()
        self.variable_a = variable_a

3. Run npm run dev component_name to build new component. Then you can start developing in jupyter notebook.

# notebook cell

from ja_py.example import Example

widget = Example("variable_a")
display(widget)

4. For more information, please refer:

• @anywidget/react