Make selection container titles more transparent and easier to work with.

Author: jasongrout

ipywidgets/widgets/widget_selectioncontainer.py

@@ -11,11 +11,12 @@
 from .widget import register
 from .widget_core import CoreWidget
 from traitlets import Unicode, Dict, CInt, TraitError, validate
+from .trait_types import TypedTuple
 
 
 class _SelectionContainer(Box, CoreWidget):
     """Base class used to display multiple child widgets."""
-    _titles = Dict(help="Titles of the pages").tag(sync=True)
+    titles = TypedTuple(trait=Unicode(), help="Titles of the pages").tag(sync=True)
     selected_index = CInt(
         help="""The index of the selected page. This is either an integer selecting a particular sub-widget, or None to have no widgets selected.""",
         allow_none=True
@@ -39,33 +40,23 @@ def set_title(self, index, title):
         title : unicode
             New title
         """
-        # JSON dictionaries have string keys, so we convert index to a string
-        index = str(int(index))
-        self._titles[index] = title
-        self.send_state('_titles')
+        titles = list(self.titles)
+        titles[index] = title
+        self.titles = titles
 
     def get_title(self, index):
-        """Gets the title of a container pages.
+        """Gets the title of a container page.
 
         Parameters
         ----------
         index : int
             Index of the container page
         """
-        # JSON dictionaries have string keys, so we convert index to a string
-        index = str(int(index))
-        if index in self._titles:
-            return self._titles[index]
+        if 0<=index<len(self.titles):
+            return self.titles[index]
         else:
             return None
 
-    def _repr_keys(self):
-        # We also need to include _titles in repr for reproducibility
-        yield from super()._repr_keys()
-        if self._titles:
-            yield '_titles'
-
-
 @register
 class Accordion(_SelectionContainer):
     """Displays children each on a separate accordion page."""

packages/controls/src/widget_selectioncontainer.ts

@@ -32,7 +32,7 @@ export class SelectionContainerModel extends BoxModel {
       ...super.defaults(),
       _model_name: 'SelectionContainerModel',
       selected_index: 0,
-      _titles: {}
+      titles: []
     };
   }
 }
@@ -115,7 +115,7 @@ export class AccordionView extends DOMWidgetView {
     this.listenTo(this.model, 'change:selected_index', () =>
       this.update_selected_index()
     );
-    this.listenTo(this.model, 'change:_titles', () => this.update_titles());
+    this.listenTo(this.model, 'change:titles', () => this.update_titles());
   }
 
   /**
@@ -158,7 +158,7 @@ export class AccordionView extends DOMWidgetView {
    */
   update_titles(): void {
     const collapsed = this.pWidget.collapseWidgets;
-    const titles = this.model.get('_titles');
+    const titles = this.model.get('titles');
     for (let i = 0; i < collapsed.length; i++) {
       if (titles[i] !== void 0) {
         collapsed[i].widget.title.label = titles[i];
@@ -188,7 +188,7 @@ export class AccordionView extends DOMWidgetView {
     // Placeholder widget to keep our position in the tab panel while we create the view.
     const accordion = this.pWidget;
     const placeholder = new Widget();
-    placeholder.title.label = this.model.get('_titles')[index] || '';
+    placeholder.title.label = this.model.get('titles')[index] || '';
     accordion.addWidget(placeholder);
     return this.create_child_view(model)
       .then((view: DOMWidgetView) => {
@@ -293,7 +293,7 @@ export class TabView extends DOMWidgetView {
       this
     );
     this.listenTo(this.model, 'change:children', () => this.updateTabs());
-    this.listenTo(this.model, 'change:_titles', () => this.updateTitles());
+    this.listenTo(this.model, 'change:titles', () => this.updateTitles());
   }
 
   /**
@@ -339,7 +339,7 @@ export class TabView extends DOMWidgetView {
    */
   addChildView(model: WidgetModel, index: number): Promise<DOMWidgetView> {
     // Placeholder widget to keep our position in the tab panel while we create the view.
-    const label = this.model.get('_titles')[index] || '';
+    const label = this.model.get('titles')[index] || '';
     const tabs = this.pWidget;
     const placeholder = new Widget();
     placeholder.title.label = label;
@@ -379,7 +379,7 @@ export class TabView extends DOMWidgetView {
    * Updates the tab page titles.
    */
   updateTitles(): void {
-    const titles = this.model.get('_titles') || {};
+    const titles = this.model.get('titles') || [];
     each(this.pWidget.widgets, (widget, i) => {
       widget.title.label = titles[i] || '';
     });