[ipywidgets] ToDo app example

[Mike M]

Hello folks,

I hope this is the right group to ask.

I'm looking for simple data management example in Jupyter (currently with Python focus).

So something like the common todo example for web applications would do:
Have a small form to create and edit todo tasks (say task title and due date), have a list of them to display, select and remove a task.

Is this possible with current ipywidgets? Is there a similar example available?

Thank you for your help.

Regards Mike

[Aaron Watters]

Hi Mike,

I put together a simple todo list as a study to exercise

the js_proxy mechanism in 

https://github.com/simonsfoundation/jp_gene_viz.

This is not a 'pure' ipywidgets solution but ipywidgets

with one additional dependancy.

It features

- A modal dialog for error feedback.

- A datepicker text area.

- A general callback from jQuery to the Python process 

(used to implement the delete button).

The proof of concept focusses on logic, not beauty,

It would not be hard to make it look a lot nicer :).

Please try it out using binder:

Go http://mybinder.org/repo/simonsfoundation/jp_gene_viz

and then navigate to examples/Todo...

I hope you like! Please let me know if you have comments

or questions.

  -- Aaron Watters

[Jonathan Frederic]

Hi Mike,

There isn't a ipywidgets TODO MVC example, that I'm aware of.

In addition to `interact`, Ipywidgets provides many standard GUI elements than can be  instantiated in Python and rendered in the notebook.  These widgets support nesting of arbitrary depth.  The simplest way to implement TODO MVC would be to do the whole thing in Python and use the widgets to build the view.

Alternatively, you could use the widget internals as your MVC framework, and implement a custom TODO MVC widget in Javascript, where the model would be synced to Python (as whatever JSONable data structure you choose) using the widget framework.

Let me know if I can clarify either of these for you.

Aaron, cool example!  Thanks for sharing.

Cheers,

Jon

--
You received this message because you are subscribed to the Google Groups "Project Jupyter" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter+u...@googlegroups.com.
To post to this group, send email to jup...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/ed6ff0d2-42a7-464a-9320-a93784b759e3%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Mike M]

Hello Aaron,

thank you for your response.

That looks nice indeed. While I am a programmer (C++/Qt on the job), my Python and JS experience is limited, and I cannot grasp what your example does.
Questions:

Your example relies heavily on your additional component?
How hard is it do deploy this additional component to a local setup? Up to now, deployment and Python mostly means pip for me ;-)
How hard would it be, to select one of the tasks and show it in the edit fields above for editing?

Regards
Mike

[Mike M]

Hello Jon,

thank you for your response.

As I wrote above, I work as a C++/Qt programmer, but my Python and JS experience is limited.

So, from your answer my main problem is, how do the components talk to each other and interact. Is there a documentation explaining how Python and JS interact and what the widgets API looks like? Getting down to the event loop with callbacks for events in a notebook would help me a lot as far as I currently understand it.

Regards
Mike

[Aaron Watters]

In response to your question, my "todo" example primarily uses the jp_gene_viz.js_proxy widget to provide callback

functionality from javascript to python (for example to implement the delete button).  I think you might also

be able to do something similar using generic widgets.  The js_proxy mechanism is primarily designed to

allow you to use (for example) arbitrary jQuery plugins without needing to write custom javascript/widget 

implementations.  It is a generic strategy that allows python to call javascript and javascript to callback python

and both sides to pass data structures back and forth without having to write Jupyter specific javascript

code.  To use it, you will need to understand something about how the javascript side works, however,

which will take some effort if you have no experience with javascript/HTML5/jQuery/DOM etcetera.

One of the reasons I went this way was to make it possible for me to write or use generic javascript

components which I can use directly in Jupyter and also in other contexts like conventional web pages.

The jp_gene_viz component is not hard to install, but there is a dependency on python-igraph that is not related

to js_proxy because the jp_gene_viz project is currently a catchall for all the stuff I'm doing at work related to Jupyter/IPython.

I should factor out the "generic" stuff into a separate project, maybe, eventually.

You can add a dependancy for jp_gene_viz to a pip requirements.txt file like this:

    -e git://github.com/simonsfoundation/jp_gene_viz#egg=jp_gene_viz

I hope this helps!  -- Aaron Watters

[Gino Bustelo]

Hey Mike...

Take a look at https://github.com/jupyter-incubator/declarativewidgets. I was able to build a very simple Todo List fully on the notebook in 2 cells. I've save the notebook here https://gist.github.com/lbustelo/65100b82ffe32abc0776. You should be able to test it out easily by going to http://jupyter.cloudet.xyz and uploading the notebook in the gist.

[Aaron Watters]

Very cool.  I think adding sorting and a jQueryUI datepicker would be trivial, but how would you add

a modal error feedback dialog if one of the inputs is empty (controlled from Python)?

Thanks for the example!  -- Aaron Watters

[Gino Bustelo]

I think that adding a better date picker and supporting error/validation should be easy. For errors, you can have a python function that can set an {{error}} variable (channel().set("error", ...)) and that cause a piece of a template to show using dom-if template. You can find dialogs and other elements at https://elements.polymer-project.org.