jslink not working for dropdown widget, why?

[kgiacobbi]

Hello,

I created a leaflet map on my jupyterlab notebook with WidgetsControl.

I added a widgets.dropdown that allows me to change the layer using a widgets.link that works.

Now, I want to put my map in an HTML page by changing the widgets.link by a widgets.jslink but an error occurs.
TypeError: Dropdown.value can not be synced

import ipywidgets as wid
import ipyleaflet as lf
from ipywidgets.embed import embed_minimal_html

nasa_layer_1 = lf.basemap_to_tiles(lf.basemaps.NASAGIBS.ModisTerraTrueColorCR, "2019-04-15")
nasa_layer_2 = lf.basemap_to_tiles(lf.basemaps.NASAGIBS.ModisTerraTrueColorCR, "2018-04-13")

layers = {}
layers['nasa1'] = (nasa_layer_1,)
layers['nasa2'] = (nasa_layer_2,)


m = lf.Map(
    center=(50.6330372,3.0178653),
    scroll_wheel_zoom = True,
    zoom=2)



''''
Dropdown to select the layer. The layers have to be in the dictionary 'layers'.
'''
layer_selector = wid.Dropdown(
    options=layers,
    description='Layer :',
)

wid.link((layer_selector,'value'),(m,'layers'))

#Control display on the map 
layer_selector_control = lf.WidgetControl(widget=layer_selector, position='bottomright')

m.add_control(layer_selector_control)

embed_minimal_html('export.html', views=[m], title='Widgets export')
m

I would like to know if it's possible or not to do this.

Thanks.

[jasongrout]

The Dropdown index and labels are synced to javascript, but not the value. Sometimes the value can be a python object which cannot be transferred over to javascript, so you don't have access to the value on the javascript side.

Does jslinking the label work?

CC also @maartenbreddels

[kgiacobbi]

I tried to jslink the label with another widget and i got same error

TypeError                                 Traceback (most recent call last)
<ipython-input-62-05c13a9226e1> in <module>
     12 )
     13 
---> 14 link_layer = wid.jslink((layer_selector,'label'),(layer_selector2,'label'))
     15 
     16 #Control display on the map

/home/applis/anaconda/envs/py3v19.01/lib/python3.6/site-packages/ipywidgets/widgets/widget_link.py in jslink(attr1, attr2)
     73     >>> c = link((widget1, 'value'), (widget2, 'value'))
     74     """
---> 75     return Link(attr1, attr2)
     76 
     77 

/home/applis/anaconda/envs/py3v19.01/lib/python3.6/site-packages/ipywidgets/widgets/widget_link.py in __init__(self, source, target, **kwargs)
     50         kwargs['source'] = source
     51         kwargs['target'] = target
---> 52         super(Link, self).__init__(**kwargs)
     53 
     54     # for compatibility with traitlet links

/home/applis/anaconda/envs/py3v19.01/lib/python3.6/site-packages/ipywidgets/widgets/widget.py in __init__(self, **kwargs)
    409         """Public constructor"""
    410         self._model_id = kwargs.pop('model_id', None)
--> 411         super(Widget, self).__init__(**kwargs)
    412 
    413         Widget._call_widget_constructed(self)

/home/applis/anaconda/envs/py3v19.01/lib/python3.6/site-packages/traitlets/traitlets.py in __init__(self, *args, **kwargs)
    995             for key, value in kwargs.items():
    996                 if self.has_trait(key):
--> 997                     setattr(self, key, value)
    998                 else:
    999                     # passthrough args that don't set traits to super

/home/applis/anaconda/envs/py3v19.01/lib/python3.6/site-packages/traitlets/traitlets.py in __set__(self, obj, value)
    583             raise TraitError('The "%s" trait is read-only.' % self.name)
    584         else:
--> 585             self.set(obj, value)
    586 
    587     def _validate(self, obj, value):

/home/applis/anaconda/envs/py3v19.01/lib/python3.6/site-packages/traitlets/traitlets.py in set(self, obj, value)
    557 
    558     def set(self, obj, value):
--> 559         new_value = self._validate(obj, value)
    560         try:
    561             old_value = obj._trait_values[self.name]

/home/applis/anaconda/envs/py3v19.01/lib/python3.6/site-packages/traitlets/traitlets.py in _validate(self, obj, value)
    589             return value
    590         if hasattr(self, 'validate'):
--> 591             value = self.validate(obj, value)
    592         if obj._cross_validation_lock is False:
    593             value = self._cross_validate(obj, value)

/home/applis/anaconda/envs/py3v19.01/lib/python3.6/site-packages/traitlets/traitlets.py in validate(self, obj, value)
   2240             return value
   2241 
-> 2242         value = self.validate_elements(obj, value)
   2243 
   2244         return value

/home/applis/anaconda/envs/py3v19.01/lib/python3.6/site-packages/ipywidgets/widgets/widget_link.py in validate_elements(self, obj, value)
     31             raise TypeError("No such trait: %s" % trait_repr)
     32         elif not trait.get_metadata('sync'):
---> 33             raise TypeError("%s cannot be synced" % trait_repr)
     34         return value
     35 

TypeError: Dropdown.label cannot be synced

But this time, it's Dropdown.label which cannot be synced.
Too bad that a simple String label can not be synchronized.

However, I can jslink the index. I will try something else.

[jetheurer]

Is there a solution for this? Can we use the index to reference the original list within the Text widget?

[jasongrout]

First, note that this only affects jslink. linking on the python side should work fine.

Can we use the index to reference the original list within the Text widget?

@maartenbreddels had the same idea a while ago. I'm not sure it was pursued.

TypeError: Dropdown.label cannot be synced

It does look like perhaps this is an overly restrictive check. I wonder what happens if we remove the check that we are only jslinking synced attributes, and trust the user to link things that make sense.

[jetheurer]

@jasongrout My goal is to use the widget with jupyter-sphinx.

I'm not sure I understand what you mean by "linking on the python side". Would I use widgets.link

drop = widgets.Dropdown(options=[1,2])
text = widgets.Text()
l = widgets.link((text, 'value'), (drop, 'value'))
display(drop,text)

[jetheurer]

I believe I need to link on the js side in order to achieve my goal of using this widget in a static html page

[jasongrout]

Yes, it does appear that do need jslink for it to work with jupyter-sphinx. Then I think a next step would be to think through the ramifications of removing that check apparently in the link code of only linking traits that are synced, or explore @maartenbreddels idea from a long time about a way to use the index to look up in the list of labels.

[jasongrout]

Reopening since it looks like the discussion may be leading to a solution for this.

[jetheurer]

@jasongrout It seems like @maartenbreddels's idea about using the index to look up labels is the quickest short term solution.

Could you point me to the area in the code where value gets updated? I was thinking I could subclass Text and overwrite one of the methods.

[jasongrout]

Is this what you are looking for?

ipywidgets/packages/controls/src/widget_selection.ts

Lines 112 to 115 in a311d75

	_handle_change() {
	this.model.set('index', this.listbox.selectedIndex === -1 ? null : this.listbox.selectedIndex);
	this.touch();
	}

[jetheurer]

@jasongrout I thought I could do something like this:

from ipywidgets.widgets import Textarea
from ipywidgets.widgets.widget_string import _String
import ipywidgets as widgets

OPTIONS=[4,5,6,7,8]

class FunctionText(Textarea):
    def __init__(self, value=None, method=lambda x:x, **kwargs):
        if value is not None:
            kwargs['value'] = method(value)
        super(_String, self).__init__(**kwargs)
        
def method(index):
    return str(OPTIONS[int(index)])


drop = widgets.Dropdown(options=OPTIONS)
text = FunctionText(value='4', method=method)
l = widgets.jslink((text, 'value'), (drop, 'index'))
display(drop,text)

But on second thought, the subclassing would probably have to be on the javascript side and is likely more complex than I was hoping!