pyglove 0.4.5.dev202411132359__py3-none-any.whl → 0.4.5.dev202501250807__py3-none-any.whl

pyglove/core/views/html/controls/label_test.py

@@ -34,7 +34,7 @@ class LabelTest(TestCase):
     label = label_lib.Label('foo')
     self.assertIsNone(label.tooltip)
     self.assertIsNone(label.link)
-    self.assert_html_content(label, '<a class="label">foo</a>')
+    self.assert_html_content(label, '<span class="label">foo</span>')
     with self.assertRaisesRegex(ValueError, 'Non-interactive .*'):
       label.update('bar')
 
@@ -54,25 +54,32 @@ class LabelTest(TestCase):
     self.assert_html_content(
         label,
         (
-            '<div class="label-container"><a class="label">foo</a>'
+            '<div class="label-container"><span class="label">foo</span>'
             '<span class="tooltip">bar</span></div>'
         )
     )
 
   def test_update(self):
-    label = label_lib.Label('foo', 'bar', 'http://google.com', interactive=True)
+    label = label_lib.Label(
+        'foo', 'bar', 'http://google.com',
+        interactive=True,
+        css_classes=['foo', 'bar'],
+    )
     self.assertIn('id="control-', label.to_html_str(content_only=True))
     with label.track_scripts() as scripts:
       label.update(
           'bar',
           tooltip='baz',
           link='http://www.yahoo.com',
-          styles=dict(color='red')
+          styles=dict(color='red'),
+          add_class=['baz'],
+          remove_class=['bar'],
       )
     self.assertEqual(label.text, 'bar')
     self.assertEqual(label.tooltip.content, 'baz')
     self.assertEqual(label.link, 'http://www.yahoo.com')
     self.assertEqual(label.styles, dict(color='red'))
+    self.assertEqual(label.css_classes, ['foo', 'baz'])
     self.assertEqual(
         scripts,
         [
@@ -106,12 +113,24 @@ class LabelTest(TestCase):
                 elem.classList.remove("html-content");
                 """
             ),
+            inspect.cleandoc(
+                f"""
+                elem = document.getElementById("{label.element_id()}");
+                elem.classList.add("baz");
+                """
+            ),
+            inspect.cleandoc(
+                f"""
+                elem = document.getElementById("{label.element_id()}");
+                elem.classList.remove("bar");
+                """
+            ),
         ]
     )
 
   def test_badge(self):
     badge = label_lib.Badge('foo')
-    self.assert_html_content(badge, '<a class="label badge">foo</a>')
+    self.assert_html_content(badge, '<span class="label badge">foo</span>')
 
 
 class LabelGroupTest(TestCase):
@@ -121,9 +140,9 @@ class LabelGroupTest(TestCase):
     self.assert_html_content(
         group,
         (
-            '<div class="label-group"><a class="label group-name">baz</a>'
-            '<a class="label group-value">foo</a>'
-            '<a class="label group-value">bar</a></div>'
+            '<div class="label-group"><span class="label group-name">baz</span>'
+            '<span class="label group-value">foo</span>'
+            '<span class="label group-value">bar</span></div>'
         )
     )
 

pyglove/core/views/html/controls/progress_bar.py

@@ -16,7 +16,7 @@
 import functools
 from typing import Annotated, List, Optional, Union
 
-from pyglove.core import object_utils
+from pyglove.core import utils
 from pyglove.core.symbolic import object as pg_object
 # pylint: disable=g-importing-member
 from pyglove.core.views.html.base import Html
@@ -73,10 +73,8 @@ class SubProgress(HtmlControl):
         [],
         id=self.element_id(),
         styles=styles,
-        css_classes=[
-            'sub-progress',
-            object_utils.camel_to_snake(self.name, '-')
-        ] + self.css_classes,
+        css_classes=['sub-progress', utils.camel_to_snake(self.name, '-')]
+        + self.css_classes,
     )
 
   def increment(self, delta: int = 1):

pyglove/core/views/html/controls/progress_bar_test.py

@@ -42,8 +42,8 @@ class ProgressBarTest(unittest.TestCase):
             f'<div class="sub-progress foo" id="{bar["foo"].element_id()}">'
             '</div><div class="sub-progress bar" '
             f'id="{bar["bar"].element_id()}"></div></div>'
-            '<div class="label-container"><a class="label progress-label"'
-            f' id="{bar._progress_label.element_id()}">n/a</a><span class='
+            '<div class="label-container"><span class="label progress-label"'
+            f' id="{bar._progress_label.element_id()}">n/a</span><span class='
             f'"tooltip" id="{bar._progress_label.tooltip.element_id()}">'
             'Not started</span></div></div>'
         )

pyglove/core/views/html/controls/tab.py

@@ -13,9 +13,11 @@
 # limitations under the License.
 """Tab control."""
 
-from typing import Annotated, List, Literal, Union
+from typing import Annotated, List, Literal, Optional, Union
 
+from pyglove.core.symbolic import flags as pg_flags
 from pyglove.core.symbolic import object as pg_object
+
 # pylint: disable=g-importing-member
 from pyglove.core.views.html.base import Html
 from pyglove.core.views.html.base import HtmlConvertible
@@ -37,6 +39,16 @@ class Tab(pg_object.Object):
       'The content of the tab.'
   ]
 
+  css_classes: Annotated[
+      List[str],
+      'The CSS classes of the tab.'
+  ] = []
+
+  name: Annotated[
+      Optional[str],
+      'An optional name that can be used to identify a tab under a tab control'
+  ] = None
+
 
 @pg_object.use_init_args(
     ['tabs', 'selected', 'tab_position', 'id', 'css_classes', 'styles']
@@ -61,109 +73,248 @@ class TabControl(HtmlControl):
 
   interactive = True
 
+  def append(self, tab: Tab) -> None:
+    with pg_flags.notify_on_change(False):
+      self.tabs.append(tab)
+
+    self._insert_adjacent_html(
+        f"""
+        const elem = document.getElementById('{self.element_id()}-button-group');
+        """,
+        self._tab_button(tab, len(self.tabs) - 1),
+        position='beforeend',
+    )
+    self._insert_adjacent_html(
+        f"""
+        const elem = document.getElementById('{self.element_id()}-content-group');
+        """,
+        self._tab_content(tab, len(self.tabs) - 1),
+        position='beforeend',
+    )
+
+  def insert(self, index_or_name: Union[int, str], tab: Tab) -> None:
+    """Inserts a tab before a tab identified by index or name."""
+    index = self.indexof(index_or_name)
+    if index == -1:
+      raise ValueError(f'Tab not found: {index_or_name!r}')
+    with pg_flags.notify_on_change(False):
+      self.tabs.insert(index, tab)
+
+    self._insert_adjacent_html(
+        f"""
+        const elem = document.querySelectorAll('#{self.element_id()}-button-group > .tab-button')[{index}];
+        """,
+        self._tab_button(tab, len(self.tabs) - 1),
+        position='beforebegin',
+    )
+    self._insert_adjacent_html(
+        f"""
+        const elem = document.querySelectorAll('#{self.element_id()}-content-group > .tab-content')[{index}];
+        """,
+        self._tab_content(tab, len(self.tabs) - 1),
+        position='beforebegin',
+    )
+
+  def indexof(self, index_or_name: Union[int, str]) -> int:
+    if isinstance(index_or_name, int):
+      index = index_or_name
+      if index >= len(self.tabs):
+        return len(self.tabs) - 1
+      elif index < -len(self.tabs):
+        return -1
+      elif index < 0:
+        index = index + len(self.tabs)
+      return index
+    else:
+      name = index_or_name
+      assert isinstance(name, str), name
+      for i, tab in enumerate(self.tabs):
+        if tab.name == name:
+          return i
+      return -1
+
+  def extend(self, tabs: List[Tab]) -> None:
+    for tab in tabs:
+      self.append(tab)
+
+  def select(
+      self,
+      index_or_name: Union[int, str, List[str]]) -> Union[int, str]:
+    """Selects a tab identified by an index or name.
+
+    Args:
+      index_or_name: The index or name of the tab to select. If a list of names
+        is provided, the first name in the list that is found will be selected.
+
+    Returns:
+      The index (if the index was provided) or name of the selected tab.
+    """
+    selected_name = index_or_name if isinstance(index_or_name, str) else None
+    index = -1
+    if isinstance(index_or_name, list):
+      for name in index_or_name:
+        index = self.indexof(name)
+        if index != -1:
+          selected_name = name
+          break
+    else:
+      index = self.indexof(index_or_name)
+    if index == -1:
+      raise ValueError(f'Tab not found: {index_or_name!r}')
+    self._sync_members(selected=index)
+    self._run_javascript(
+        f"""
+        const tabButtons = document.querySelectorAll('#{self.element_id()}-button-group > .tab-button');
+        tabButtons[{index}].click();
+        """
+    )
+    return selected_name or index
+
   def _to_html(self, **kwargs):
     return Html.element(
-        'div',
+        'table',
         [
+            '<tr><td>',
             Html.element(
                 'div',
-                [
-                    Html.element(
-                        'button',
-                        [
-                            tab.label
-                        ],
-                        css_classes=[
-                            'tab-button',
-                            'selected' if i == self.selected else None
-                        ],
-                        onclick=(
-                            f"""openTab(event, '{self.element_id()}', '{self.element_id(str(i))}')"""
-                        )
-                    ) for i, tab in enumerate(self.tabs)
-                ],
-                css_classes=['tab-button-group'],
+                [self._tab_button(tab, i) for i, tab in enumerate(self.tabs)],
+                css_classes=[
+                    'tab-button-group',
+                    self.tab_position
+                ] + self.css_classes,
+                id=self.element_id('button-group'),
             ),
-        ] + [
+            ('</td><td>' if self.tab_position == 'left'
+             else '</td></tr><tr><td>'),
             Html.element(
                 'div',
-                [
-                    tab.content
-                ],
-                css_classes=['tab-content'],
-                styles=dict(
-                    display='block' if i == self.selected else 'none'
-                ),
-                id=self.element_id(str(i))
-            ) for i, tab in enumerate(self.tabs)
+                [self._tab_content(tab, i) for i, tab in enumerate(self.tabs)],
+                css_classes=[
+                    'tab-content-group',
+                    self.tab_position
+                ] + self.css_classes,
+                id=self.element_id('content-group'),
+            ),
+            '</td></tr>'
         ],
-        css_classes=['tab-control', self.tab_position] + self.css_classes,
-        id=self.element_id(),
+        css_classes=['tab-control'],
         styles=self.styles,
     ).add_script(
         """
         function openTab(event, controlId, tabId) {
-          const tabButtons = document.querySelectorAll('#' + controlId + '> .tab-button-group > .tab-button');
+          const tabButtons = document.querySelectorAll('#' + controlId + '-button-group > .tab-button');
           for (let i = 0; i < tabButtons.length; i++) {
             tabButtons[i].classList.remove('selected');
           }
-          const tabContents = document.querySelectorAll('#' + controlId + '> .tab-content');
+          const tabContents = document.querySelectorAll('#' + controlId + '-content-group > .tab-content');
           for (let i = 0; i < tabContents.length; i++) {
-            tabContents[i].style.display = 'none';
+            tabContents[i].classList.remove('selected')
           }
           const tabButton = event.currentTarget;
           tabButton.classList.add('selected');
-          document.getElementById(tabId).style.display = "block";
+          document.getElementById(tabId).classList.add('selected');
         }
         """
     ).add_style(
         """
-        .top .tab-button-group {
-          overflow-x: hidden;
-          border-bottom: 1px solid #EEE;
+        .tab-control {
+          border-spacing: 0px;
+          border-collapse: collapse;
+          margin-top: 10px;
         }
-        .left .tab-button-group {
-          float: left;
-          top: 0;
+        .tab-control td {
+          padding: 0px;
+          margin: 0px;
+          vertical-align: top;
+        }
+        .top.tab-button-group {
+          border-left: 1px solid #DDD;
+          border-top: 1px solid #DDD;
+          border-right: 1px solid #DDD;
+          border-radius: 5px 5px 0px 0px;
+          padding: 0px 5px 0px 0px;
+          margin-bottom: -2px;
         }
         .tab-button {
-          background-color: #EEE;
-          border: 1px solid #EEE;
+          background-color: transparent;
+          border-radius: 5px;
+          border: 0px;
+          font-weight: bold;
+          color: gray;
           outline: none;
           cursor: pointer;
           transition: 0.3s;
-          padding: 10px 15px 10px 15px;
-        }
-        .top .tab-button {
-          border-top-width: 2px;
         }
-        .left .tab-button {
-          display: block;
-          width: 100%;
-          border-left-width: 2px;
+        .tab-button:hover {
+          background-color: #fff1dd;
         }
-        .top .tab-button.selected {
-          border-bottom-color: #fff;
-          border-top-color: #B721FF;
-          background: #fff;
+        .tab-button.selected {
+          background-color: #f0ecf9;
+          color: black;
         }
-        .left .tab-button.selected {
-          border-right-color: #fff;
-          border-left-color: #B721FF;
-          background: #fff;
+        .top.tab-content-group {
+          border-left: 1px solid #DDD;
+          border-right: 1px solid #DDD;
+          border-bottom: 1px solid #DDD;
+          border-radius: 0px 0px 5px 5px;
+          margin: 0px;
+          padding: 5px;
+          height: 100%;
         }
-        .top .tab-button:hover {
-          border-top-color: orange;
-        }
-        .left .tab-button:hover {
-          border-left-color: orange;
+        .top > .tab-button {
+          margin: 5px 0px 5px 5px;
         }
         .tab-content {
           display: none;
-          padding: 10px;
         }
-        .left .tab-content {
-          float: left;
+        .tab-content.selected {
+          display: block;
+        }
+        .left.tab-button-group {
+          display: inline-flex;
+          flex-direction: column;
+          border: 1px solid #DDD;
+          border-radius: 5px;
+          margin-right: 5px;
+          padding: 0px 0px 5px 0px;
+        }
+        .left.tab-content-group {
+          border: 0px
+          margin: 0px;
+          padding: 0px;
+          height: 100%;
+        }
+        .left > .tab-button {
+          text-align: left;
+          margin: 5px 5px 0px 5px;
         }
         """
     )
+
+  def _tab_button(self, tab: Tab, i: int) -> Html:
+    return Html.element(
+        'button',
+        [
+            tab.label
+        ],
+        css_classes=[
+            'tab-button',
+            'selected' if i == self.selected else None
+        ] + tab.css_classes,
+        onclick=(
+            f"""openTab(event, '{self.element_id()}', '{self.element_id(str(i))}')"""
+        )
+    )
+
+  def _tab_content(self, tab: Tab, i: int) -> Html:
+    return Html.element(
+        'div',
+        [
+            tab.content
+        ],
+        css_classes=[
+            'tab-content',
+            'selected' if i == self.selected else None
+        ] + tab.css_classes,
+        id=self.element_id(str(i))
+    )

pyglove/core/views/html/controls/tab_test.py

@@ -30,26 +30,57 @@ class TabControlTest(unittest.TestCase):
 
   def test_basic(self):
     tab = tab_lib.TabControl([
-        tab_lib.Tab('foo', base.Html('<h1>foo</h1>')),
+        tab_lib.Tab('foo', base.Html('<h1>foo</h1>'), css_classes=['foo']),
         tab_lib.Tab('bar', base.Html('<h1>bar</h1>')),
     ])
+    elem_id = tab.element_id()
     self.assert_html_content(
         tab,
-        (
-            f'<div class="tab-control top" id="{tab.element_id()}">'
-            '<div class="tab-button-group"><button class="tab-button selected" '
-            f'''onclick="openTab(event, '{tab.element_id()}', '''
-            f''''{tab.element_id(str(0))}')">'''
-            '<a class="label">foo</a></button><button class="tab-button" '
-            f'''onclick="openTab(event, '{tab.element_id()}', '''
-            f''''{tab.element_id(str(1))}')">'''
-            '<a class="label">bar</a></button></div>'
-            '<div class="tab-content" style="display:block;" '
-            f'id="{tab.element_id(str(0))}"><h1>foo</h1></div>'
-            '<div class="tab-content" style="display:none;" '
-            f'id="{tab.element_id(str(1))}"><h1>bar</h1></div></div>'
-        )
+        f"""<table class="tab-control"><tr><td><div class="tab-button-group top" id="{elem_id}-button-group"><button class="tab-button selected foo" onclick="openTab(event, '{elem_id}', '{elem_id}-0')"><span class="label">foo</span></button><button class="tab-button" onclick="openTab(event, '{elem_id}', '{elem_id}-1')"><span class="label">bar</span></button></div></td></tr><tr><td><div class="tab-content-group top" id="{elem_id}-content-group"><div class="tab-content selected foo" id="{elem_id}-0"><h1>foo</h1></div><div class="tab-content" id="{elem_id}-1"><h1>bar</h1></div></div></td></tr></table>"""
     )
+    with tab.track_scripts() as scripts:
+      tab.extend([
+          tab_lib.Tab(
+              'baz',
+              base.Html(
+                  '<h1 class="a">baz</h1>').add_style('.a { color: red; }')
+              ),
+          tab_lib.Tab('qux', base.Html('<h1>qux</h1>')),
+      ])
+      self.assertEqual(len(scripts), 6)
+    with tab.track_scripts() as scripts:
+      tab.insert(0, tab_lib.Tab('x', 'foo', name='x'))
+      self.assertEqual(len(scripts), 2)
+      self.assertEqual(len(tab.tabs), 5)
+    self.assertEqual(tab.indexof(-1), 4)
+    self.assertEqual(tab.indexof(3), 3)
+    self.assertEqual(tab.indexof(10), 4)
+    self.assertEqual(tab.indexof(-10), -1)
+    self.assertEqual(tab.indexof('x'), 0)
+    self.assertEqual(tab.indexof('y'), -1)
+    self.assertEqual(tab.select(0), 0)
+    self.assertEqual(tab.select('x'), 'x')
+    self.assertEqual(tab.select(['y', 'x']), 'x')
+
+    with self.assertRaisesRegex(ValueError, 'Tab not found'):
+      tab.select('y')
+    with self.assertRaisesRegex(ValueError, 'Tab not found'):
+      tab.insert('y', tab_lib.Tab('z', 'bar'))
+
+    with tab.track_scripts() as scripts:
+      tab.insert('x', tab_lib.Tab('y', 'bar'))
+      self.assertEqual(len(scripts), 2)
+      self.assertEqual(len(tab.tabs), 6)
+
+    with tab.track_scripts() as scripts:
+      tab.select(3)
+      self.assertEqual(len(scripts), 1)
+      self.assertEqual(tab.selected, 3)
+
+    with tab.track_scripts() as scripts:
+      tab.select('x')
+      self.assertEqual(len(scripts), 1)
+      self.assertEqual(tab.selected, 1)
 
 
 if __name__ == '__main__':