Импортировать функцию пользовательского виджета iPython (структура файла?)

Question

Я стараюсь следовать примеру this и this учебник для создания виджета D3, который отображает код HTML D3 для виджета при вызове функции. Я смог сделать его функцией within the notebook cells itself using %%javascript, но это было бы грязно для конечного пользователя.

Как перенести определение класса Python D3Widget и код визуализации Javascript D3View во внешние файлы, чтобы пользователь мог просто импортировать файл и вызвать функцию?

Я хочу, чтобы конечный результат выглядел как this, где пользователь может просто импортировать функцию и вызвать ее.

Answer 1

Организуйте свой код

В корневой папке ноутбука создать пакет для вашего нового виджета. Например, вы можете использовать следующую структуру каталогов:

helloworld/ 

    __init__.py 
    helloworld_widget.py 

    helloworldjs/ 
     helloworld.view.js 

     css/ 
      helloworld.css 

программы на стороне сервера

Внутри HelloWorld/helloworld_widget.py, поместите класс Python:

from ipywidgets import widgets 
from traitlets import Unicode 

class HelloWorldWidget(widgets.DOMWidget): 
    _view_module = Unicode("nbextensions/helloworld/helloworld_view", sync=True) 
    _view_name = Unicode('HelloWorldView', sync=True) 

Вот именно с вашим код python.

Создать представление Javascript

В HelloWorld/helloworldjs/helloworld.view.js программировать стороне клиента:

define(["nbextensions/widgets/widgets/js/widget"], function(widget) { 

    var HelloWorldView = widget.DOMWidgetView.extend({ 

     render: function(){ 
      this.$el.text("Hello world"); 
     }, 
    }); 

    return {HelloWorldView: HelloWorldView} 
}); 

Простой, не так ли? И последнее, но не в последнюю очередь ...

Развертывание на стороне клиента в папку расширений ноутбука

Чтобы сделать это, Вы можете запрограммировать функцию в инициализации .py и выполнить его внутри ноутбука каждый раз, когда ваш измените что-то в своем представлении Javascript.

Я использую этот очень похож на следующее:

def notebook_install(overwrite=True, user=True): 
    import os 
    from notebook import install_nbextension 
    from notebook.services.config import ConfigManager 
    from IPython.display import display, Javascript 

    js_path = os.path.join(os.path.dirname(__file__), 'helloworldjs') 
    install_nbextension(js_path, overwrite=overwrite, 
         symlink=False, verbose=0, user=user) 

Теперь вы должны быть в состоянии выполнить следующие действия в записной книжке:

from helloworld.helloworld_widget import HelloWorldWidget 
hello = HellowWorldWidget() 
hello 

Enjoy!

При чтении внимательно эта статья также должна помочь: https://carreau.gitbooks.io/jupyter-book/content/notebook-extensions.html