From 9e643f5692efc01aca7260d668b64ed0e0743593 Mon Sep 17 00:00:00 2001
From: Jonathan Frederic <jdfreder@calpoly.edu>
Date: Wed, 22 Jan 2014 15:53:58 -0800
Subject: [PATCH] Support multiple types in selection widget.

---
 .../notebook/js/widgets/widget_selection.js   | 26 ++++----
 IPython/html/widgets/widget_selection.py      | 64 ++++++++++++++++++-
 2 files changed, 74 insertions(+), 16 deletions(-)

diff --git a/IPython/html/static/notebook/js/widgets/widget_selection.js b/IPython/html/static/notebook/js/widgets/widget_selection.js
index 896beda6d..ece7a9a46 100644
--- a/IPython/html/static/notebook/js/widgets/widget_selection.js
+++ b/IPython/html/static/notebook/js/widgets/widget_selection.js
@@ -57,14 +57,14 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
             // changed by another view or by a state update from the back-end.
 
             if (options === undefined || options.updated_view != this) {
-                var selected_item_text = this.model.get('value');
+                var selected_item_text = this.model.get('_value');
                 if (selected_item_text.length === 0) {
                     this.$droplabel.text(' ');
                 } else {
                     this.$droplabel.text(selected_item_text);
                 }
                 
-                var items = this.model.get('values');
+                var items = this.model.get('_values');
                 var $replace_droplist = $('<ul />')
                     .addClass('dropdown-menu');
                 var that = this;
@@ -107,7 +107,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
             
             // Calling model.set will trigger all of the other views of the 
             // model to update.
-            this.model.set('value', $(e.target).text(), {updated_view: this});
+            this.model.set('_value', $(e.target).text(), {updated_view: this});
             this.touch();
         },
         
@@ -139,7 +139,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
             // changed by another view or by a state update from the back-end.
             if (options === undefined || options.updated_view != this) {
                 // Add missing items to the DOM.
-                var items = this.model.get('values');
+                var items = this.model.get('_values');
                 var disabled = this.model.get('disabled');
                 var that = this;
                 _.each(items, function(item, index) {
@@ -159,7 +159,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
                     }
                     
                     var $item_element = that.$container.find(item_query);
-                    if (that.model.get('value') == item) {
+                    if (that.model.get('_value') == item) {
                         $item_element.prop('checked', true);
                     } else {
                         $item_element.prop('checked', false);
@@ -199,7 +199,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
             
             // Calling model.set will trigger all of the other views of the 
             // model to update.
-            this.model.set('value', $(e.target).val(), {updated_view: this});
+            this.model.set('_value', $(e.target).val(), {updated_view: this});
             this.touch();
         },
     });
@@ -230,7 +230,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
             // changed by another view or by a state update from the back-end.
             if (options === undefined || options.updated_view != this) {
                 // Add missing items to the DOM.
-                var items = this.model.get('values');
+                var items = this.model.get('_values');
                 var disabled = this.model.get('disabled');
                 var that = this;
                 _.each(items, function(item, index) {
@@ -245,7 +245,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
                     }
                     
                     var $item_element = that.$buttongroup.find(item_query);
-                    if (that.model.get('value') == item) {
+                    if (that.model.get('_value') == item) {
                         $item_element.addClass('active');
                     } else {
                         $item_element.removeClass('active');
@@ -285,7 +285,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
             
             // Calling model.set will trigger all of the other views of the 
             // model to update.
-            this.model.set('value', $(e.target).text(), {updated_view: this});
+            this.model.set('_value', $(e.target).text(), {updated_view: this});
             this.touch();
         },    
     });
@@ -316,21 +316,21 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
             // changed by another view or by a state update from the back-end.
             if (options === undefined || options.updated_view != this) {
                 // Add missing items to the DOM.
-                var items = this.model.get('values');
+                var items = this.model.get('_values');
                 var that = this;
                 _.each(items, function(item, index) {
                    var item_query = ' :contains("' + item + '")';
                     if (that.$listbox.find(item_query).length === 0) {
                         $('<option />')
                             .text(item)
-                            .attr('value', item)
+                            .attr('_value', item)
                             .appendTo(that.$listbox)
                             .on('click', $.proxy(that.handle_click, that));
                     } 
                 });
 
                 // Select the correct element
-                this.$listbox.val(this.model.get('value'));
+                this.$listbox.val(this.model.get('_value'));
                 
                 // Disable listbox if needed
                 var disabled = this.model.get('disabled');
@@ -368,7 +368,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
             
             // Calling model.set will trigger all of the other views of the 
             // model to update.
-            this.model.set('value', $(e.target).text(), {updated_view: this});
+            this.model.set('_value', $(e.target).text(), {updated_view: this});
             this.touch();
         },    
     });
diff --git a/IPython/html/widgets/widget_selection.py b/IPython/html/widgets/widget_selection.py
index 53abd9005..eac867eaf 100644
--- a/IPython/html/widgets/widget_selection.py
+++ b/IPython/html/widgets/widget_selection.py
@@ -13,18 +13,76 @@ Represents an enumeration using a widget.
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
+from threading import Lock
+
 from .widget import DOMWidget
-from IPython.utils.traitlets import Unicode, List, Bool
+from IPython.utils.traitlets import Unicode, List, Bool, Any, Dict
 
 #-----------------------------------------------------------------------------
 # SelectionWidget
 #-----------------------------------------------------------------------------
 class _SelectionWidget(DOMWidget):
-    value = Unicode(help="Selected value", sync=True) # TODO: Any support
-    values = List(help="List of values the user can select", sync=True)
+    value = Any(help="Selected value") 
+    values = List(help="List of values the user can select")
+    value_names = Dict(help="""List of string representations for each value.  
+        These string representations are used to display the values in the
+        front-end.""")
     disabled = Bool(False, help="Enable or disable user changes", sync=True)
     description = Unicode(help="Description of the value this widget represents", sync=True)
 
+    _value = Unicode(sync=True) # Bi-directionally synced.
+    _values = List(sync=True) # Only back-end to front-end synced.
+    _reverse_value_names = Dict()
+
+    def __init__(self, *pargs, **kwargs):
+        """Constructor"""
+        DOMWidget.__init__(self, *pargs, **kwargs)
+        self.value_lock = Lock()
+        self.on_trait_change(self._string_value_set, ['_value'])
+
+    def _value_names_changed(self, name=None, old=None, new=None):
+        """Handles when the value_names Dict has been changed.
+
+        This method sets the _reverse_value_names Dict to the inverse of the new
+        value for the value_names Dict."""
+        self._reverse_value_names = {v:k for k, v in self.value_names.items()}
+        self._values_changed()
+
+    def _values_changed(self, name=None, old=None, new=None):
+        """Called when values has been changed"""
+        self._values = [self._get_string_repr(v) for v in self.values]
+
+    def _value_changed(self, name, old, new):
+        """Called when value has been changed"""
+        if self.value_lock.acquire(False):
+            try:
+                # Make sure the value is in the list of values.
+                if new in self.values:
+                    # Set the string version of the value.
+                    self._value = self._get_string_repr(new)
+                else:
+                    raise TypeError('Value must be a value in the values list.')
+            finally:
+                self.value_lock.release()
+
+    def _get_string_repr(self, value):
+        """Get the string repr of a value"""
+        if value not in self.value_names:
+            self.value_names[value] = str(value)
+            self._value_names_changed()
+        return self.value_names[value]
+
+    def _string_value_set(self, name, old, new):
+        """Called when _value has been changed."""
+        if self.value_lock.acquire(False):
+            try:
+                if new in self._reverse_value_names:
+                    self.value = self._reverse_value_names[new]
+                else:
+                    self.value = None
+            finally:
+                self.value_lock.release()
+
 
 class ToggleButtonsWidget(_SelectionWidget):
     view_name = Unicode('ToggleButtonsView', sync=True)