pyglove 0.4.5.dev202412100810__py3-none-any.whl → 0.4.5.dev202412130809__py3-none-any.whl

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

@@ -74,7 +74,7 @@ class Label(HtmlControl):
 
   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 @@ 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,7 +54,7 @@ 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>'
         )
     )
@@ -130,7 +130,7 @@ class LabelTest(TestCase):
 
   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 @@ 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_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,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 @@ class TabControl(HtmlControl):
         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',
@@ -141,7 +220,6 @@ class TabControl(HtmlControl):
         .tab-control {
           border-spacing: 0px;
           border-collapse: collapse;
-          height: 100%;
           margin-top: 10px;
         }
         .tab-control td {

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

@@ -36,7 +36,7 @@ class TabControlTest(unittest.TestCase):
     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 @@ class TabControlTest(unittest.TestCase):
           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__':

{pyglove-0.4.5.dev202412100810.dist-info → pyglove-0.4.5.dev202412130809.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: pyglove
-Version: 0.4.5.dev202412100810
+Version: 0.4.5.dev202412130809
 Summary: PyGlove: A library for manipulating Python objects.
 Home-page: https://github.com/google/pyglove
 Author: PyGlove Authors
@@ -72,7 +72,7 @@ It's commonly used in:
 PyGlove has been [published](https://proceedings.neurips.cc/paper/2020/file/012a91467f210472fab4e11359bbfef6-Paper.pdf)
 at NeurIPS 2020. It is widely used within [Alphabet](https://abc.xyz/), including Google Research, Google Cloud, Youtube and Waymo.
 
-PyGlove is developed by Daiyi Peng and colleagues in [Google Brain Team](https://research.google/teams/brain/).
+PyGlove is developed by Daiyi Peng and colleagues at [Google Brain](https://research.google/teams/brain/).
 
 
 ## Hello PyGlove
@@ -145,6 +145,9 @@ pip install pyglove --pre
   * [Interactive SVG: Components for Direct Manipulation](https://github.com/google/pyglove/blob/main/docs/notebooks/python/interactive_svg.ipynb)
   * [Where is the Duck: Developing Context-aware Component](https://github.com/google/pyglove/blob/main/docs/notebooks/python/where_is_the_duck.ipynb)
 
+* Interactive Programming
+  * [Viewing PyGlove objects in HTML](https://colab.research.google.com/github/google/pyglove/blob/main/docs/notebooks/gui/html_view.ipynb)
+
 ## Citing PyGlove
 
 ```

{pyglove-0.4.5.dev202412100810.dist-info → pyglove-0.4.5.dev202412130809.dist-info}/RECORD

@@ -149,12 +149,12 @@ pyglove/core/views/html/tree_view.py,sha256=3Db0aOke-A7Inp-vgqebsDMwJ0Wvaznithkw
 pyglove/core/views/html/tree_view_test.py,sha256=whUorrw0eiDaZsEzGB2B3EN3wx0vLFuNEe2RBU03GeU,74707
 pyglove/core/views/html/controls/__init__.py,sha256=61qs5pnJPCTECCGBtkbNfIV3KcCu7cxfVNBEtIg1lMo,1318
 pyglove/core/views/html/controls/base.py,sha256=VV-dDc_myKYlZeiJUXubIJXYKnm1ncEqjlqibN3d4tM,7710
-pyglove/core/views/html/controls/label.py,sha256=JVLUByEHZ5uL8Mu65Y4UV33JIBo85Z7pE6Zcug6pOts,5644
-pyglove/core/views/html/controls/label_test.py,sha256=4h6j4tZjAqhazp4AGnW1d_ohaeihofpggJ3UkK02Oho,5126
+pyglove/core/views/html/controls/label.py,sha256=dXcYId7ASuNqkzKsWMjJ0iQtecoSsUlUgynNNQZOFAM,5681
+pyglove/core/views/html/controls/label_test.py,sha256=uUYqBSZ0XLOuv4qG20gmoZzA3RxYxpfqT63K0azHEfU,5162
 pyglove/core/views/html/controls/progress_bar.py,sha256=kLdY3JQLCOv00ShldnQg3Qs8l1j_pDk148FoKfrZB64,5275
-pyglove/core/views/html/controls/progress_bar_test.py,sha256=6u1A6kAV8GY_vUMD6PSl7HuuOkVMELYqU32YEVx6qz8,3500
-pyglove/core/views/html/controls/tab.py,sha256=HpHKprScIPtAgC4WbSk_ComU_TayC8q_aj54zZUc0ik,6858
-pyglove/core/views/html/controls/tab_test.py,sha256=4tf8kiECcuY6vEcdgJWCY09UAfqMSwA2eJ-b-hxvLJw,2310
+pyglove/core/views/html/controls/progress_bar_test.py,sha256=kKOJDZQtBPkmNcgIBrRQkNNzcTm51ojuFBTRUEDSsp0,3506
+pyglove/core/views/html/controls/tab.py,sha256=ELyroRb3qKQ8ULM_BMq2j-tqV_mnHOvrYv2kbuIe65o,9430
+pyglove/core/views/html/controls/tab_test.py,sha256=wr1msQjZHxp1TFKQ5LxtppY2Dys736JCmmEJ8WBC3Fo,3531
 pyglove/core/views/html/controls/tooltip.py,sha256=01BbpuM1twf3FYMUT09_Ck5JSSONe8QE9RmyA9nhCnU,3092
 pyglove/core/views/html/controls/tooltip_test.py,sha256=17BY-WmZKpz9tCbySPcwG6KJyfeE_MeMyKxtfxorBQ0,3194
 pyglove/ext/__init__.py,sha256=3jp8cJvKW6PENOZlmVAbT0w-GBRn_kjhc0wDX3XjpOE,755
@@ -196,8 +196,8 @@ pyglove/ext/scalars/randoms.py,sha256=LkMIIx7lOq_lvJvVS3BrgWGuWl7Pi91-lA-O8x_gZs
 pyglove/ext/scalars/randoms_test.py,sha256=nEhiqarg8l_5EOucp59CYrpO2uKxS1pe0hmBdZUzRNM,2000
 pyglove/ext/scalars/step_wise.py,sha256=IDw3tuTpv0KVh7AN44W43zqm1-E0HWPUlytWOQC9w3Y,3789
 pyglove/ext/scalars/step_wise_test.py,sha256=TL1vJ19xVx2t5HKuyIzGoogF7N3Rm8YhLE6JF7i0iy8,2540
-pyglove-0.4.5.dev202412100810.dist-info/LICENSE,sha256=WNHhf_5RCaeuKWyq_K39vmp9F28LxKsB4SpomwSZ2L0,11357
-pyglove-0.4.5.dev202412100810.dist-info/METADATA,sha256=DqoXAklEqKdWrQYxgzBOkjT_wpmSGfKzZse1unmazpk,6666
-pyglove-0.4.5.dev202412100810.dist-info/WHEEL,sha256=PZUExdf71Ui_so67QXpySuHtCi3-J3wvF4ORK6k_S8U,91
-pyglove-0.4.5.dev202412100810.dist-info/top_level.txt,sha256=wITzJSKcj8GZUkbq-MvUQnFadkiuAv_qv5qQMw0fIow,8
-pyglove-0.4.5.dev202412100810.dist-info/RECORD,,
+pyglove-0.4.5.dev202412130809.dist-info/LICENSE,sha256=WNHhf_5RCaeuKWyq_K39vmp9F28LxKsB4SpomwSZ2L0,11357
+pyglove-0.4.5.dev202412130809.dist-info/METADATA,sha256=nDfx3t7PuUS5y9KUG0VnnEaDmtF90a_8a9r16-1Q1m0,6828
+pyglove-0.4.5.dev202412130809.dist-info/WHEEL,sha256=PZUExdf71Ui_so67QXpySuHtCi3-J3wvF4ORK6k_S8U,91
+pyglove-0.4.5.dev202412130809.dist-info/top_level.txt,sha256=wITzJSKcj8GZUkbq-MvUQnFadkiuAv_qv5qQMw0fIow,8
+pyglove-0.4.5.dev202412130809.dist-info/RECORD,,