Add initial implementation of 2-handle range sliders for integers.

IPython/html/static/widgets/js/widget_int.js

@@ -1,311 +1,327 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2013 The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // IntWidget
 //============================================================================
 
 /**
  * @module IPython
  * @namespace IPython
  **/
 
 define(["widgets/js/widget"], function(WidgetManager){
 
     var IntSliderView = IPython.DOMWidgetView.extend({
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             
             this.$slider = $('<div />')
                 .slider({})
                 .addClass('slider');
             // Put the slider in a container 
             this.$slider_container = $('<div />')
                 .addClass('widget-hslider')
                 .append(this.$slider);
             this.$el_to_style = this.$slider_container; // Set default element to style
             this.$el.append(this.$slider_container);
             
             this.$readout = $('<div/>')
                 .appendTo(this.$el)
                 .addClass('widget-hreadout')
                 .hide();
             
             // Set defaults.
             this.update();
         },
         
         update : function(options){
             // Update the contents of this view
             //
             // Called when the model is changed.  The model may have been 
             // changed by another view or by a state update from the back-end.
             if (options === undefined || options.updated_view != this) {
                 // JQuery slider option keys.  These keys happen to have a
                 // one-to-one mapping with the corrosponding keys of the model.
-                var jquery_slider_keys = ['step', 'max', 'min', 'disabled'];
+                var jquery_slider_keys = ['step', 'max', 'min', 'disabled', 'range'];
                 var that = this;
                 _.each(jquery_slider_keys, function(key, i) {
                     var model_value = that.model.get(key);
                     if (model_value !== undefined) {
                         that.$slider.slider("option", key, model_value);
                     }
                 });
 
                 // WORKAROUND FOR JQUERY SLIDER BUG.
                 // The horizontal position of the slider handle
                 // depends on the value of the slider at the time
                 // of orientation change.  Before applying the new
                 // workaround, we set the value to the minimum to
                 // make sure that the horizontal placement of the
                 // handle in the vertical slider is always 
                 // consistent.
                 var orientation = this.model.get('orientation');
                 var value = this.model.get('min');
+                if (this.model.get('range')) {
+                    this.$slider.slider('option', 'values', [value, value]);
+                } else {
                 this.$slider.slider('option', 'value', value);
+                }
                 this.$slider.slider('option', 'orientation', orientation);
                 value = this.model.get('value');
+                if (this.model.get('range')) {
+                    this.$slider.slider('option', 'values', value);
+                    this.$readout.text(value.join("-"));
+                } else {
                 this.$slider.slider('option', 'value', value);
                 this.$readout.text(value);
+                }
+
 
                 // Use the right CSS classes for vertical & horizontal sliders
                 if (orientation=='vertical') {
                     this.$slider_container
                         .removeClass('widget-hslider')
                         .addClass('widget-vslider');
                     this.$el
                         .removeClass('widget-hbox-single')
                         .addClass('widget-vbox-single');
                     this.$label
                         .removeClass('widget-hlabel')
                         .addClass('widget-vlabel');
                     this.$readout
                         .removeClass('widget-hreadout')
                         .addClass('widget-vreadout');
 
                 } else {
                     this.$slider_container
                         .removeClass('widget-vslider')
                         .addClass('widget-hslider');
                     this.$el
                         .removeClass('widget-vbox-single')
                         .addClass('widget-hbox-single');
                     this.$label
                         .removeClass('widget-vlabel')
                         .addClass('widget-hlabel');
                     this.$readout
                         .removeClass('widget-vreadout')
                         .addClass('widget-hreadout');
                 }
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.text(description);
                     MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]);
                     this.$label.show();
                 }
                 
                 var readout = this.model.get('readout');
                 if (readout) {
                     this.$readout.show();
                 } else {
                     this.$readout.hide();
                 }
             }
             return IntSliderView.__super__.update.apply(this);
         },
         
         events: {
             // Dictionary of events and their handlers.
             "slide" : "handleSliderChange"
         }, 
 
         handleSliderChange: function(e, ui) { 
             // Called when the slider value is changed.
 
             // Calling model.set will trigger all of the other views of the 
             // model to update.
+            if (this.model.get("range")) {
+                var actual_value = ui.values.map(this._validate_slide_value);
+                this.$readout.text(actual_value.join("-"));
+            } else {
             var actual_value = this._validate_slide_value(ui.value);
-            this.model.set('value', actual_value, {updated_view: this});
             this.$readout.text(actual_value);
+            }
+            this.model.set('value', actual_value, {updated_view: this});
             this.touch();
+
         },
 
         _validate_slide_value: function(x) {
             // Validate the value of the slider before sending it to the back-end
             // and applying it to the other views on the page.
 
             // Double bit-wise not truncates the decimel (int cast).
             return ~~x;
         },
     });
     WidgetManager.register_widget_view('IntSliderView', IntSliderView);
 
 
     var IntTextView = IPython.DOMWidgetView.extend({    
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             this.$textbox = $('<input type="text" />')
                 .addClass('form-control')
                 .addClass('widget-numeric-text')
                 .appendTo(this.$el);
             this.$el_to_style = this.$textbox; // Set default element to style
             this.update(); // Set defaults.
         },
         
         update : function(options){
             // Update the contents of this view
             //
             // Called when the model is changed.  The model may have been 
             // changed by another view or by a state update from the back-end.
             if (options === undefined || options.updated_view != this) {
                 var value = this.model.get('value');
                 if (this._parse_value(this.$textbox.val()) != value) {
                     this.$textbox.val(value);
                 }
                 
                 if (this.model.get('disabled')) {
                     this.$textbox.attr('disabled','disabled');
                 } else {
                     this.$textbox.removeAttr('disabled');
                 }
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.text(description);
                     MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]);
                     this.$label.show();
                 }
             }
             return IntTextView.__super__.update.apply(this);
         },
 
         events: {
             // Dictionary of events and their handlers.
             "keyup input"  : "handleChanging",
             "paste input"  : "handleChanging",
             "cut input"    : "handleChanging",
 
             // Fires only when control is validated or looses focus.
             "change input" : "handleChanged"
         }, 
         
         handleChanging: function(e) { 
             // Handles and validates user input.
             
             // Try to parse value as a int.
             var numericalValue = 0;
             if (e.target.value !== '') {
                 var trimmed = e.target.value.trim();
                 if (!(['-', '-.', '.', '+.', '+'].indexOf(trimmed) >= 0)) {
                     numericalValue = this._parse_value(e.target.value);    
                 }                
             }
             
             // If parse failed, reset value to value stored in model.
             if (isNaN(numericalValue)) {
                 e.target.value = this.model.get('value');
             } else if (!isNaN(numericalValue)) {
                 if (this.model.get('max') !== undefined) {
                     numericalValue = Math.min(this.model.get('max'), numericalValue);
                 }
                 if (this.model.get('min') !== undefined) {
                     numericalValue = Math.max(this.model.get('min'), numericalValue);
                 }
                 
                 // Apply the value if it has changed.
                 if (numericalValue != this.model.get('value')) {
             
                     // Calling model.set will trigger all of the other views of the 
                     // model to update.
                     this.model.set('value', numericalValue, {updated_view: this});
                     this.touch();
                 }
             }
         },
         
         handleChanged: function(e) {
             // Applies validated input.
             if (this.model.get('value') != e.target.value) {
                 e.target.value = this.model.get('value');
             }
         },
 
         _parse_value: function(value) {
             // Parse the value stored in a string.
             return  parseInt(value);
         },
     });
     WidgetManager.register_widget_view('IntTextView', IntTextView);
 
 
     var ProgressView = IPython.DOMWidgetView.extend({
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             this.$progress = $('<div />')
                 .addClass('progress')
                 .addClass('widget-progress')
                 .appendTo(this.$el);
             this.$el_to_style = this.$progress; // Set default element to style
             this.$bar = $('<div />')
                 .addClass('progress-bar')
                 .css('width', '50%')
                 .appendTo(this.$progress);
             this.update(); // Set defaults.
         },
         
         update : function(){
             // Update the contents of this view
             //
             // Called when the model is changed.  The model may have been 
             // changed by another view or by a state update from the back-end.
             var value = this.model.get('value');
             var max = this.model.get('max');
             var min = this.model.get('min');
             var percent = 100.0 * (value - min) / (max - min);
             this.$bar.css('width', percent + '%');
             
             var description = this.model.get('description');
             if (description.length === 0) {
                 this.$label.hide();
             } else {
                 this.$label.text(description);
                 MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]);
                 this.$label.show();
             }
             return ProgressView.__super__.update.apply(this);
         }, 
     });
     WidgetManager.register_widget_view('ProgressView', ProgressView);
 
 
     // Return the slider and text views so they can be inheritted to create the
     // float versions.
     return [IntSliderView, IntTextView];
 });

IPython/html/widgets/__init__.py

@@ -1,12 +1,12 b''
 from .widget import Widget, DOMWidget, CallbackDispatcher
 
 from .widget_bool import CheckboxWidget, ToggleButtonWidget
 from .widget_button import ButtonWidget
 from .widget_container import ContainerWidget, PopupWidget
 from .widget_float import FloatTextWidget, BoundedFloatTextWidget, FloatSliderWidget, FloatProgressWidget
 from .widget_image import ImageWidget
-from .widget_int import IntTextWidget, BoundedIntTextWidget, IntSliderWidget, IntProgressWidget
+from .widget_int import IntTextWidget, BoundedIntTextWidget, IntSliderWidget, IntProgressWidget, IntRangeSliderWidget
 from .widget_selection import RadioButtonsWidget, ToggleButtonsWidget, DropdownWidget, SelectWidget
 from .widget_selectioncontainer import TabWidget, AccordionWidget
 from .widget_string import HTMLWidget, LatexWidget, TextWidget, TextareaWidget
 from .interaction import interact, interactive, fixed

IPython/html/widgets/interaction.py

@@ -1,257 +1,266 b''
 """Interact with functions using widgets."""
 
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 
 from __future__ import print_function
 
 try:  # Python >= 3.3
     from inspect import signature, Parameter
 except ImportError:
     from IPython.utils.signatures import signature, Parameter
 from inspect import getcallargs
 
 from IPython.core.getipython import get_ipython
 from IPython.html.widgets import (Widget, TextWidget,
     FloatSliderWidget, IntSliderWidget, CheckboxWidget, DropdownWidget,
-    ContainerWidget, DOMWidget)
+    ContainerWidget, DOMWidget, IntRangeSliderWidget)
 from IPython.display import display, clear_output
 from IPython.utils.py3compat import string_types, unicode_type
 from IPython.utils.traitlets import HasTraits, Any, Unicode
 
 empty = Parameter.empty
 
 #-----------------------------------------------------------------------------
 # Classes and Functions
 #-----------------------------------------------------------------------------
 
 
 def _matches(o, pattern):
     """Match a pattern of types in a sequence."""
     if not len(o) == len(pattern):
         return False
     comps = zip(o,pattern)
     return all(isinstance(obj,kind) for obj,kind in comps)
 
 
 def _get_min_max_value(min, max, value=None, step=None):
     """Return min, max, value given input values with possible None."""
     if value is None:
         if not max > min:
             raise ValueError('max must be greater than min: (min={0}, max={1})'.format(min, max))
         value = min + abs(min-max)/2
         value = type(min)(value)
     elif min is None and max is None:
         if value == 0.0:
             min, max, value = 0.0, 1.0, 0.5
         elif value == 0:
             min, max, value = 0, 1, 0
         elif isinstance(value, (int, float)):
             min, max = (-value, 3*value) if value > 0 else (3*value, -value)
         else:
             raise TypeError('expected a number, got: %r' % value)
     else:
         raise ValueError('unable to infer range, value from: ({0}, {1}, {2})'.format(min, max, value))
     if step is not None:
         # ensure value is on a step
         r = (value - min) % step
         value = value - r
     return min, max, value
 
 def _widget_abbrev_single_value(o):
     """Make widgets from single values, which can be used as parameter defaults."""
     if isinstance(o, string_types):
         return TextWidget(value=unicode_type(o))
     elif isinstance(o, dict):
         return DropdownWidget(values=o)
     elif isinstance(o, bool):
         return CheckboxWidget(value=o)
     elif isinstance(o, float):
         min, max, value = _get_min_max_value(None, None, o)
         return FloatSliderWidget(value=o, min=min, max=max)
     elif isinstance(o, int):
         min, max, value = _get_min_max_value(None, None, o)
         return IntSliderWidget(value=o, min=min, max=max)
     else:
         return None
 
 def _widget_abbrev(o):
     """Make widgets from abbreviations: single values, lists or tuples."""
     float_or_int = (float, int)
     if isinstance(o, (list, tuple)):
         if o and all(isinstance(x, string_types) for x in o):
             return DropdownWidget(values=[unicode_type(k) for k in o])
         elif _matches(o, (float_or_int, float_or_int)):
             min, max, value = _get_min_max_value(o[0], o[1])
             if all(isinstance(_, int) for _ in o):
                 cls = IntSliderWidget
             else:
                 cls = FloatSliderWidget
             return cls(value=value, min=min, max=max)
         elif _matches(o, (float_or_int, float_or_int, float_or_int)):
             step = o[2]
             if step <= 0:
                 raise ValueError("step must be >= 0, not %r" % step)
             min, max, value = _get_min_max_value(o[0], o[1], step=step)
             if all(isinstance(_, int) for _ in o):
                 cls = IntSliderWidget
             else:
                 cls = FloatSliderWidget
             return cls(value=value, min=min, max=max, step=step)
+        elif _matches(o, [float_or_int]*4):
+            min, low, high, max = o
+            if not min <= low <= high <= max:
+                raise ValueError("Range input expects min <= low <= high <= max, got %r" % o)
+            if all(isinstance(_, int) for _ in o):
+                cls = IntRangeSliderWidget
+            else:
+                cls = FloatRangeSliderWidget
+            return cls(value=(low, high), min=min, max=max)
     else:
         return _widget_abbrev_single_value(o)
 
 def _widget_from_abbrev(abbrev, default=empty):
     """Build a Widget instance given an abbreviation or Widget."""
     if isinstance(abbrev, Widget) or isinstance(abbrev, fixed):
         return abbrev
     
     widget = _widget_abbrev(abbrev)
     if default is not empty and isinstance(abbrev, (list, tuple, dict)):
         # if it's not a single-value abbreviation,
         # set the initial value from the default
         try:
             widget.value = default
         except Exception:
             # ignore failure to set default
             pass
     if widget is None:
         raise ValueError("%r cannot be transformed to a Widget" % (abbrev,))
     return widget
 
 def _yield_abbreviations_for_parameter(param, kwargs):
     """Get an abbreviation for a function parameter."""
     name = param.name
     kind = param.kind
     ann = param.annotation
     default = param.default
     not_found = (name, empty, empty)
     if kind in (Parameter.POSITIONAL_OR_KEYWORD, Parameter.KEYWORD_ONLY):
         if name in kwargs:
             value = kwargs.pop(name)
         elif ann is not empty:
             value = ann
         elif default is not empty:
             value = default
         else:
             yield not_found
         yield (name, value, default)
     elif kind == Parameter.VAR_KEYWORD:
         # In this case name=kwargs and we yield the items in kwargs with their keys.
         for k, v in kwargs.copy().items():
             kwargs.pop(k)
             yield k, v, empty
 
 def _find_abbreviations(f, kwargs):
     """Find the abbreviations for a function and kwargs passed to interact."""
     new_kwargs = []
     for param in signature(f).parameters.values():
         for name, value, default in _yield_abbreviations_for_parameter(param, kwargs):
             if value is empty:
                 raise ValueError('cannot find widget or abbreviation for argument: {!r}'.format(name))
             new_kwargs.append((name, value, default))
     return new_kwargs
 
 def _widgets_from_abbreviations(seq):
     """Given a sequence of (name, abbrev) tuples, return a sequence of Widgets."""
     result = []
     for name, abbrev, default in seq:
         widget = _widget_from_abbrev(abbrev, default)
         if not widget.description:
             widget.description = name
         result.append(widget)
     return result
 
 def interactive(__interact_f, **kwargs):
     """Build a group of widgets to interact with a function."""
     f = __interact_f
     co = kwargs.pop('clear_output', True)
     kwargs_widgets = []
     container = ContainerWidget()
     container.result = None
     container.args = []
     container.kwargs = dict()
     kwargs = kwargs.copy()
 
     new_kwargs = _find_abbreviations(f, kwargs)
     # Before we proceed, let's make sure that the user has passed a set of args+kwargs
     # that will lead to a valid call of the function. This protects against unspecified
     # and doubly-specified arguments.
     getcallargs(f, **{n:v for n,v,_ in new_kwargs})
     # Now build the widgets from the abbreviations.
     kwargs_widgets.extend(_widgets_from_abbreviations(new_kwargs))
 
     # This has to be done as an assignment, not using container.children.append,
     # so that traitlets notices the update. We skip any objects (such as fixed) that
     # are not DOMWidgets.
     c = [w for w in kwargs_widgets if isinstance(w, DOMWidget)]
     container.children = c
 
     # Build the callback
     def call_f(name, old, new):
         container.kwargs = {}
         for widget in kwargs_widgets:
             value = widget.value
             container.kwargs[widget.description] = value
         if co:
             clear_output(wait=True)
         try:
             container.result = f(**container.kwargs)
         except Exception as e:
             ip = get_ipython()
             if ip is None:
                 container.log.warn("Exception in interact callback: %s", e, exc_info=True)
             else:
                 ip.showtraceback()
 
     # Wire up the widgets
     for widget in kwargs_widgets:
         widget.on_trait_change(call_f, 'value')
 
     container.on_displayed(lambda _: call_f(None, None, None))
 
     return container
 
 def interact(__interact_f=None, **kwargs):
     """interact(f, **kwargs)
     
     Interact with a function using widgets."""
     # positional arg support in: https://gist.github.com/8851331
     if __interact_f is not None:
         # This branch handles the cases:
         # 1. interact(f, **kwargs)
         # 2. @interact
         #    def f(*args, **kwargs):
         #        ...
         f = __interact_f
         w = interactive(f, **kwargs)
         f.widget = w
         display(w)
         return f
     else:
         # This branch handles the case:
         # @interact(a=30, b=40)
         # def f(*args, **kwargs):
         #     ...
         def dec(f):
             w = interactive(f, **kwargs)
             f.widget = w
             display(w)
             return f
         return dec
 
 class fixed(HasTraits):
     """A pseudo-widget whose value is fixed and never synced to the client."""
     value = Any(help="Any Python object")
     description = Unicode('', help="Any Python object")
     def __init__(self, value, **kwargs):
         super(fixed, self).__init__(value=value, **kwargs)

IPython/html/widgets/widget_int.py

@@ -1,60 +1,90 b''
 """IntWidget class.  
 
 Represents an unbounded int using a widget.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 from .widget import DOMWidget
-from IPython.utils.traitlets import Unicode, CInt, Bool, Enum
+from IPython.utils.traitlets import Unicode, CInt, Bool, Enum, Tuple
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
 class _IntWidget(DOMWidget):
     value = CInt(0, help="Int value", sync=True) 
     disabled = Bool(False, help="Enable or disable user changes", sync=True)
     description = Unicode(help="Description of the value this widget represents", sync=True)
 
 
 class _BoundedIntWidget(_IntWidget):
     step = CInt(1, help="Minimum step that the value can take (ignored by some views)", sync=True)
     max = CInt(100, help="Max value", sync=True)
     min = CInt(0, help="Min value", sync=True)
 
     def __init__(self, *pargs, **kwargs):
         """Constructor"""
         DOMWidget.__init__(self, *pargs, **kwargs)
         self.on_trait_change(self._validate, ['value', 'min', 'max'])
 
     def _validate(self, name, old, new):
         """Validate value, max, min."""
         if self.min > new or new > self.max:
             self.value = min(max(new, self.min), self.max)
 
 
 class IntTextWidget(_IntWidget):
     _view_name = Unicode('IntTextView', sync=True)
 
 
 class BoundedIntTextWidget(_BoundedIntWidget):
     _view_name = Unicode('IntTextView', sync=True)
 
 
 class IntSliderWidget(_BoundedIntWidget):
     _view_name = Unicode('IntSliderView', sync=True)
     orientation = Enum([u'horizontal', u'vertical'], u'horizontal', 
         help="Vertical or horizontal.", sync=True)
+    range = Bool(False, help="Display a range selector", sync=True)
     readout = Bool(True, help="Display the current value of the slider next to it.", sync=True)
 
 
 class IntProgressWidget(_BoundedIntWidget):
     _view_name = Unicode('ProgressView', sync=True)
+
+class _IntRangeWidget(_IntWidget):
+    value = Tuple(CInt, CInt, default_value=(0, 1), help="Low and high int values", sync=True)
+
+class _BoundedIntRangeWidget(_IntRangeWidget):
+    step = CInt(1, help="Minimum step that the value can take (ignored by some views)", sync=True)
+    max = CInt(100, help="Max value", sync=True)
+    min = CInt(0, help="Min value", sync=True)
+
+    def __init__(self, *pargs, **kwargs):
+        """Constructor"""
+        DOMWidget.__init__(self, *pargs, **kwargs)
+        self.on_trait_change(self._validate, ['value', 'min', 'max'])
+
+    def _validate(self, name, old, new):
+        """Validate min <= low <= high <= max"""
+        if name == "value":
+            low, high = new
+            low = max(low, self.min)
+            high = min(high, self.max)
+            self.value = (min(low, high), max(low, high))
+
+
+class IntRangeSliderWidget(_BoundedIntRangeWidget):
+    _view_name = Unicode('IntSliderView', sync=True)
+    orientation = Enum([u'horizontal', u'vertical'], u'horizontal',
+        help="Vertical or horizontal.", sync=True)
+    range = Bool(True, help="Display a range selector", sync=True)
+    readout = Bool(True, help="Display the current value of the slider next to it.", sync=True)