Enhance HTML controls.

* `pg.views.html.controls.Label`:
  - Use `<span>` for labels without links, so it better supports nesting.
* `pg.views.html.controls.TabControl`:
  - Add an optional 'name' to `Tab` so we could select that tab by name.
  - Add `insert` method.
  - Add `select` method.

PiperOrigin-RevId: 705147063

Author: daiyip

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

@@ -74,7 +74,7 @@ def _on_bound(self):
 
   def _to_html(self, **kwargs) -> Html:
     text_elem = Html.element(
-        'a',
+        'a' if self.link is not None else 'span',
         [self.text],
         id=self.element_id(),
         href=self.link,

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

@@ -34,7 +34,7 @@ def test_text_only(self):
     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,7 +54,7 @@ def test_with_tooltip(self):
     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>'
         )
     )
@@ -130,7 +130,7 @@ def test_update(self):
 
   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):
@@ -140,9 +140,9 @@ def test_basic(self):
     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_test.py

@@ -42,8 +42,8 @@ def test_basic(self):
             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,7 +13,7 @@
 # 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
@@ -44,6 +44,11 @@ class Tab(pg_object.Object):
       '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']
@@ -87,10 +92,84 @@ def append(self, tab: Tab) -> None:
         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(
         'table',

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

@@ -36,7 +36,7 @@ def test_basic(self):
     elem_id = tab.element_id()
     self.assert_html_content(
         tab,
-        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')"><a class="label">foo</a></button><button class="tab-button" onclick="openTab(event, '{elem_id}', '{elem_id}-1')"><a class="label">bar</a></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>"""
+        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([
@@ -48,6 +48,39 @@ def test_basic(self):
           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__':