Any widget that has resizable content should use iron-resizable-behavior to be properly notified when the window or element container resizes.

An example of this can be found in the paper-badge element.

This will allow widgets to resize properly in the dashboard view. Additionally, this will handle window resize, so an explicit window.onResize handler is not necessary.

• Update urth-viz-table
• Update urth-viz-chart
• Create best practices doc detailing how Polymer elements should use iron-resizable-behavior

When using urth-viz-chart I would like to supply color values for series in the chart. An example would be:

<urth-viz-chart type='bar' 
   datarows='[["a",8,5],["b",2,6]]' 
   columns='["Index","Series 1","Series 2"]' 
   series-colors='["green","red"]'
></urth-viz-chart>

I would like to create a standalone Polymer element file as a sibling to my current notebook, and import that element into the notebook. Couple of issues:

1. Relavitive Import

So far, I've found that doing the following will import the file:

<link rel="import" href="/files/my-folder/my-element.html">

I would prefer to be able to make this relative to the notebook, like so:

<link rel="import" href="./my-element.html">

The issue with that is that the notebook is loaded from /notebooks, but files are loaded from /files.

2. Imports within the element

How do I import dependencies from within my Polymer element? I tried the following:

<link rel="import" href="./static/urth_components/paper-toggle-button/paper-toggle-button.html"
    is="urth-core-import" package="PolymerElements/paper-toggle-button">
<link rel="import" href="./static/urth_components/iron-list/iron-list.html"
    is="urth-core-import" package="PolymerElements/iron-list">

but those don't load correctly. The issue is that the browser tries to load these relative to my Polymer element file (loaded from /files), whereas the location of the static/urth_components directory is in /notebooks/my-folder.

@vinomaster hit this problem on his demo notebook. If we do something like

channel().set("aVar", false)

or

channel().set("aVar", true)

They are getting sent to the browser as strings. We cannot then use them as expected in a <template is='dom-if'>.

The problem is https://github.com/jupyter-incubator/declarativewidgets/blob/master/kernel-scala/src/main/scala/urth/widgets/util/SerializationSupport.scala#L27 is missing a case of Boolean and converting to JsBoolean.

/cc @wellecks

Noticed some rendering issues on IE and Safari:

IE (10, 11, Edge):

• index.html - Navigation links (Docs, Repository) at top are not visible.
• index.html - Hero element does not reflow correctly on small screens.
• index.html - Column features are not honoring the max width.
• docs.html - Does not render at all

Safari:

• docs.html - Have to double click navigation elements in the left hand nav to get them to work. Single click just highlights the nav link.

We need a simple way to allow some javascript code be set as handler to changes to data on a channel. Right now the only way is to use a template element and use {{var}} syntax.

Say we have a python cell with:
channel("foo").set("x", 'new val')

We might should be able to support watching "x" change. something like
channle("foo").watch("x", function(){ //handler})

another option is to create a urth-core-channel element (Note singular channel) and have that be a point to binging event handlers.

If we have a cell that does

from urth.widgets.widget_channels import channel
channel('c').set('user', 'Python')

Run that cell and then run a subsequent cell with code

%%html
<template is='urth-core-bind' channel='c'>
    <div>Hello from <span>{{user}}</span></div>
    Name: <input value='{{user::input}}'></input>
</template>

The value of variable c is not set in the <template>.

The expectation is that the <template> renders with any values that are already on the channel.

Thanks to @jhpedemonte and @dalogsdon

The idea would be to create a generic API that would allow building arbitrary elements. Sort of model against the DOM API and not at all specific to a set of widgets.

Something like:

elmt = createElement("urth-core-function")
elmt.set("ref", "something")
elmt.set("val", "{{var}}")

parent.appendChild(elmt)

parent.show()

And so on...

Need to be explicit that bower is required and needs to be installed alongside Jupyter.

The ipywidgets Widget class sends an update state message upon creation. Our widget system does not use the contents of this message, and it leads to unnecessary console logs and warnings, e.g. all of the below logs when the urth-core-channels is created:

The goal is to show that it all plays well together.

Selections are not getting registered and can see d3.js error

TypeError: undefined is not an object (evaluating '(group = this[0]).length')

On the console.

/cc @peller

Currently the project is only installable on a IPython 3.2.x. This move need to be done in conjunction with dashboards #49.

@parent and I took notes at https://jupyter.hackpad.com/Releases-for-dashboards-declarative-widgets-cVEnluLh795.

The idea is to adopt a strategy similar to what is used by other jupyter projects. We should be able to model from:
jupyter/dashboards#93

If I add a Polymer element to my notebook using:

<link rel="import" href="./static/urth_components/paper-toggle-button/paper-toggle-button.html"
    is="urth-core-import" package="PolymerElements/paper-toggle-button">

but then want to change to a specific version, like this:

<link rel="import" href="./static/urth_components/paper-toggle-button/paper-toggle-button.html"
    is="urth-core-import" package="PolymerElements/paper-toggle-button#v1.0.10">

it does not install the alternate version.

I presume it does a check for name only and does not install if that name is found?

Apparently the calls are coming from the element itself when doing this.sync() during creation time. Might need to use {silent:true}.

Polymer v1.2 introduced a change to Polymer.Collection which introduces a # prefix to the keys in the collection. This is breaking our ability to set and retrieve data channel values correctly and results in ~37 failed unit tests. The Polymer change was introduced in commit Polymer/polymer@85d8a3a

Since Polymer.Collection is not a documented interface and it appears we are not using it as intended, we should probably consider other alternatives to prevent this from breaking us again in the future.

When using urth-viz-table wget in conjunction with another widget (e.g.: paper-dropdown-menu) to drive data associated with the table, the urth-viz-table fails to refresh its' size. The net effect here is that the widget will expose empty columns for a new table that is smaller than prior table.

See snapshot here: https://ibm.box.com/shared/static/2we5t8gae93ocsqw6uvdfodtre444k3o.tiff
where columns {H, I, J} should not exist.

We need to do some logging all around https://github.com/jupyter-incubator/declarativewidgets/blob/master/nb-extension/python/urth/widgets/urth_import.py.

Specially in https://github.com/jupyter-incubator/declarativewidgets/blob/master/nb-extension/python/urth/widgets/urth_import.py#L92

Need a strategy to surface errors to the end user when widgets are not properly working.

One example is using an urth-core-function element and referring to a function that does not exist, or calling with incorrect parameters. We should display something near the cell to alert the user of the error.

By default, both python and scala kernel support get built. We need a flag to turn off a kernel while in dev. The real culprit here is scala since it takes so long to build.

http://docs.travis-ci.com/user/deployment/pypi/

1. Create a page with urth widgets
2. Run cells
3. Save notebook
4. Refresh notebook

[IPKernelApp] ERROR | No such comm: 46B1C9E392FB49EEA0058EF6E95B9854

This might be a benign error.

maybe at jupyter.cloudet.xyz

@vinomaster just showed me a dashboard he created in which he added a template on the page to help him debug issues with channels. I think that this is a nice reusable pattern that should be encapsulated as an element.

I propose we create urth-tools-channel-inspector. The first go at this element will basically render the data in the channel in a simple table.

On FF, the styling is not appyting correctly to handson.

We currently have a system-test target that is configured to run with SauceLabs. It looks to see if the SauceLabs env variables are set. It currently runs only on Travis as part of a merge into master.

We need to have the following 2 things:

1. A way to run system test locally, without the use of SauceLabs and without having to start anything else to get it to work (i.e selenium). Should be model after make test-js.
2. A way to run system tests on travis for PRs. This should be modeled aftet 'make test-js-remote`. In that target, the tests are fully ran on Travis using selenium and firefox.

I suggest that we use 2 targets as we do with make test-js and 'make test-js-remote'.

After having a solution for #90, we should the move to publising a pypi package. Should coordinate with jupyter/dashboards#115.

We will want to have a package cut for Jupyter 3.2.x and them move to 4.x support.

A rough cut of the Roadmap can be found at https://jupyter.hackpad.com/Releases-for-dashboards-declarative-widgets-cVEnluLh795

Missing closing divs in various cells
Closing paper-card and div element are in wrong order

The script tags use to initialize the templates do not work cross browser

The cloudet/pyspark-notebook-bower-sparkkernel and cloudet/sbt-sparkkernel-image images used in the Makefile contain an old version of the Spark Kernel.

Crucially, this old version doesn't have the fix for defect 137 which is necessary for properly displaying the Scala widgets, e.g. in the urth-core-scala.ipynb examples notebook. As a result, it's difficult to introduce and test new features on the Scala widgets.

Currently this project adds an extension to Jupyter that initializes the Widget system on the Notebook page on load. This assumes that the kernel is ready to start accepting COM messages.

In the case of the Scala Kernel, the user must add the jar for the declarativewidget support and explicitly initialize the widget system (e.g. create a com open handler). To support this, we already have code in place on the JS side that runs after each code cell execution to check if the widget system is ready. There is a default of 10 tries (10 cells executed).

I propose that we reconsider how we are initializing and rather have the user explicitly initialize everything by running kernel code.

In python

from urth import widgets
widgets.init()

In scala

import urth._
widgets.init()

The init function would do the following:

1. Make sure that the handler for COM opens on the kernel side is there (in python this is taken care by ipywidgets)
2. Send JS code to the browser that would cause the browser side initialization to take place, basically import some elements and setup the data channel.

Noticed yesterday when downloading threejs (which takes a while) that the bower install of elements completely freezes the server, such that I can't load or work on a different notebook. If possible, bower install should be handled asynchronously so as not to bog down everything else.

We are currently running a Jenkins setup internally in IBM. We will for the time being point it to this new repo.

Some useful links about testing with docker and travis-ci
http://docs.travis-ci.com/user/docker/

All urth-core-bind templates are getting bound to the default channel dispite a different named channel is set on the channel property.

/cc @deedubbu

Our current testing strategy relies solely on unit test. We need to put together a suite of system test to verify main user level features of the widgets across multiple browsers.

Main concern:

• urth-core-import installation of new elements
• Proper results after Run-All cells
• Selection capabilites

I'm assuming this should work via the polyfill even though Safari doesn't support the entire webcomponent spec yet. (https://www.polymer-project.org/1.0/resources/compatibility.html)

To reproduce:

1. Load the urth tour notebook
2. Run all the cells
3. Try the last cell which does an import

TypeError: undefined is not an object (evaluating 'Polymer.CaseMap.dashToCamelCase') in the JS console

Hello,

I am trying to deploy the declarative widgets into our test environment. I am wondering: what is missing the get the declarative widgets to work on Python 2.7?

As of now, is Python 3 required only for user code, meaning that a Python 3 kernel in IPython running on 2.7 works? Or is Python 3 only needed for the notebook? Or both?

Thanks,
Thibaud

Test notebook: https://gist.github.com/jhpedemonte/5193b20258742172778c

1. Load test notebook.
2. Run All.
3. Try to interact with toggle button. Notice that it doesn't work. Also, it should have defaulted to 'on' (liveUpdate is true).
4. Select cell with Polymer element and run that one again. Toggle button should now work as expected.
   
   
5. Clear output and reload notebook.
6. Run each cell one-by-one. Notice that toggle button works as expected.
   
   
7. Clear output and reload notebook.
8. Uncomment the 2 lines of Python code which sleep for 1 second.
9. Run All. Notice that toggle button works as expected and defaults to 'on'.

See https://gist.github.com/lbustelo/42f074827738ba45c0de for example.

It seems that when creating DataFrames using the sqlContext.read.* method we get an error with serialization.

/cc @vinomaster @wellecks

Currently, doing channel('foo').watch('baz', ...) will only work for the last such call with that combination of channel name and variable strings (last one wins). The API should allow multiple such watchers to register, to allow true broadcast usage.

Our current build uses sauce labs to run the javascript unit tests. However, the test-js make target had to essentially be disabled on pull request builds since the sauce environment variables are not passed from Travis CI on pull request builds for security reasons. Travis CI does support running javascript tests locally through xfvb in the firefox browser. Problem is the javascript unit tests have a number of failures when run in firefox (but don't fail in chrome). The tests should be fixed to execute across browsers and the pull request build environment should be setup to execute them in xfvb on firefox through Travis CI.

The urth-core-function element only receives an update message for signature at create time. If the user changes the function's signature and re-executes the cell... the urth-core-function element might get out of sync. This can lead to incorrect invocations.

A similar approach to what urth-core-dataframe does to update its value when it detects any cell execution would be a good first approach to trigger the sync request.

Once the element gets the new signature, all related properties (default values, valid state, etc.) should be updated.

Word/Tag cloud

The series are shifted by one and the first series does not have a label. This gist contains an example notebook.

Widgets that use auto fire sync messages after each code execution completes. However, the callback used to fire these messages isn't removed when the widget is detached, resulting in extra sync messages.

E.g. re-run a cell that creates an urth-core-function with auto. After any further cell executions, two sync messages will be sent even though only one urth-core-function is attached.

Load test notebook from https://gist.github.com/jhpedemonte/c650d0c608344d41723f

1. Select 'Run all'. Notice that called1 and called2 are both zero, signifying that neither of the loadData functions was called.
2. Clear and refresh page.
3. Execute each cell individually. Notice that called1 remains zero, but called2 is now 1.

It appears that declaring an urth-core-function with the auto parameter separately (in another notebook cell) from a template that defines an argument to the function will execute automatically as intended.

If the urth-core-function is declared in the same template as an element that defines an argument to the function, the function does not execute.

Timing issue?

Hello,

I am trying to use the declarative widgets on my local ipython install. After running make sdist I can see that the widgets are installed in my user profile: ~/.ipython/nbextensions/urth_widgets/. However, I get the following error in my browser console:

[Log] Loaded extension: urth_dash_js/notebook/main (utils.js, line 29)
[Log] Loaded extension: urth_widgets/js/main (utils.js, line 29)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (webcomponents-lite.min.js, line 0)

Am I missing a step? Where is webcomponents-lite.min.js supposed to be?