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

pyglove/core/views/html/base.py

@@ -352,7 +352,7 @@ class Html(base.Content):
       cls,
       s: WritableTypes,
       javascript_str: bool = False
-  ) -> Union[str, 'Html', None]:
+  ) -> Any:
     """Escapes an HTML writable object."""
     if s is None:
       return None

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

@@ -62,6 +62,7 @@ class HtmlControl(pg_object.Object):
     super()._on_bound()
     self._rendered = False
     self._css_styles = []
+    self._dynamic_injected_css = set()
     self._scripts = []
 
   def add_style(self, *css: str) -> 'HtmlControl':
@@ -76,6 +77,7 @@ class HtmlControl(pg_object.Object):
   def to_html(self, **kwargs) -> Html:
     """Returns the HTML representation of the control."""
     self._rendered = True
+    self._dynamic_injected_css = set()
     html = self._to_html(**kwargs)
     return html.add_style(*self._css_styles).add_script(*self._scripts)
 
@@ -102,7 +104,7 @@ class HtmlControl(pg_object.Object):
     """Synchronizes displayed values to members."""
     self.rebind(fields, skip_notification=True, raise_on_no_change=False)
 
-  def _run_javascript(self, code: str) -> None:
+  def _run_javascript(self, code: str, debug: bool = False) -> None:
     """Runs the given JavaScript code."""
     if not self.interactive:
       raise ValueError(
@@ -113,6 +115,8 @@ class HtmlControl(pg_object.Object):
       return
 
     code = inspect.cleandoc(code)
+    if debug:
+      print('RUN JAVSCRIPT:\n', code)
     if _notebook is not None:
       _notebook.display(_notebook.Javascript(code))
 
@@ -121,6 +125,40 @@ class HtmlControl(pg_object.Object):
     for tracked in all_tracked:
       tracked.append(code)
 
+  def _add_css_rules(self, css: str) -> None:
+    if not self._rendered or not css or css in self._dynamic_injected_css:
+      return
+    self._run_javascript(
+        f"""
+        const style = document.createElement('style');
+        style.type = 'text/css';
+        style.textContent = "{Html.escape(css, javascript_str=True)}";
+        document.head.appendChild(style);
+        """
+    )
+    self._dynamic_injected_css.add(css)
+
+  def _apply_css_rules(self, html: Html) -> None:
+    self._add_css_rules(html.styles.content)
+
+  def _insert_adjacent_html(
+      self,
+      element_selector_js: str,
+      html: Html,
+      var_name: str = 'elem',
+      position: str = 'beforeend'
+  ):
+    self._run_javascript(
+        f"""
+        {element_selector_js}
+        {var_name}.insertAdjacentHTML(
+            "{position}",
+            "{Html.escape(html, javascript_str=True).to_str(content_only=True)}"
+        );
+        """,
+    )
+    self._apply_css_rules(html)
+
   def element_id(self, child: Optional[str] = None) -> Optional[str]:
     """Returns the element id of this control or a child."""
     if self.id is not None:
@@ -163,14 +201,13 @@ class HtmlControl(pg_object.Object):
       child: Optional[str] = None,
   ) -> base.Html:
     """Updates the inner HTML of the control."""
-    js_html = Html.escape(html, javascript_str=True)
-    assert isinstance(js_html, Html), js_html
     self._run_javascript(
         f"""
         elem = document.getElementById("{self.element_id(child)}");
-        elem.innerHTML = "{js_html.to_str(content_only=True)}";
+        elem.innerHTML = "{Html.escape(html, javascript_str=True).to_str(content_only=True)}";
         """
     )
+    self._add_css_rules(html.styles.content)
     return html
 
   def _update_style(

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

@@ -96,6 +96,8 @@ class Label(HtmlControl):
       tooltip: Union[str, Html, None] = None,
       link: Optional[str] = None,
       styles: Optional[Dict[str, Any]] = None,
+      add_class: Optional[List[str]] = None,
+      remove_class: Optional[List[str]] = None,
   ) -> None:
     if text is not None:
       self._sync_members(text=self._update_content(text))
@@ -105,7 +107,16 @@ class Label(HtmlControl):
       self._sync_members(link=self._update_property('href', link))
     if tooltip is not None:
       self.tooltip.update(content=tooltip)
-
+    if add_class or remove_class:
+      css_classes = list(self.css_classes)
+      for x in add_class or []:
+        self._add_css_class(x)
+        css_classes.append(x)
+      for x in remove_class or []:
+        self._remove_css_class(x)
+        if x in css_classes:
+          css_classes.remove(x)
+      self._sync_members(css_classes=css_classes)
 
 # Register converter for automatic conversion.
 pg_typing.register_converter(str, Label, Label)

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

@@ -60,19 +60,26 @@ class LabelTest(TestCase):
     )
 
   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,6 +113,18 @@ 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");
+                """
+            ),
         ]
     )
 

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

@@ -15,7 +15,9 @@
 
 from typing import Annotated, List, Literal, 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,11 @@ class Tab(pg_object.Object):
       'The content of the tab.'
   ]
 
+  css_classes: Annotated[
+      List[str],
+      'The CSS classes of the tab.'
+  ] = []
+
 
 @pg_object.use_init_args(
     ['tabs', 'selected', 'tab_position', 'id', 'css_classes', 'styles']
@@ -61,109 +68,175 @@ 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 extend(self, tabs: List[Tab]) -> None:
+    for tab in tabs:
+      self.append(tab)
+
   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;
+          height: 100%;
+          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;
+        .tab-button:hover {
+          background-color: #fff1dd;
         }
-        .left .tab-button {
-          display: block;
-          width: 100%;
-          border-left-width: 2px;
+        .tab-button.selected {
+          background-color: #f0ecf9;
+          color: black;
         }
-        .top .tab-button.selected {
-          border-bottom-color: #fff;
-          border-top-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%;
         }
-        .left .tab-button.selected {
-          border-right-color: #fff;
-          border-left-color: #B721FF;
-          background: #fff;
-        }
-        .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,24 @@ 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')"><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>"""
     )
+    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)
 
 
 if __name__ == '__main__':

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: pyglove
-Version: 0.4.5.dev202412080808
+Version: 0.4.5.dev202412100810
 Summary: PyGlove: A library for manipulating Python objects.
 Home-page: https://github.com/google/pyglove
 Author: PyGlove Authors

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

@@ -143,18 +143,18 @@ pyglove/core/views/__init__.py,sha256=gll9ZBRYz4p_-LWOdzSR2a6UTWcJ8nR430trrP0yLC
 pyglove/core/views/base.py,sha256=Eq94AM5lryQ1IKuQsTSb7ZzX-lp2nhuOnS4ztMnCPIM,26447
 pyglove/core/views/base_test.py,sha256=UKbr_1TANOAnP7V5ICGF0UEkunfSaHiJ4nXZXhA0SaU,16642
 pyglove/core/views/html/__init__.py,sha256=Ff51MK1AKdzLM0kczTqLR3fRlJSJLDaFUdVyCu_7-eY,1085
-pyglove/core/views/html/base.py,sha256=PyS5B9N_Y2HS4q01X0uSUf3UbODn1UerfqPX1imLPac,15083
+pyglove/core/views/html/base.py,sha256=S3dn2i9-yaH3wMUJRJFZDx72puhgDySyl1yFckiS6lM,15062
 pyglove/core/views/html/base_test.py,sha256=5RVPNm4YTamTFu6yXA1p2lJg3JHQBKNNBoL977qBZvE,22782
 pyglove/core/views/html/tree_view.py,sha256=3Db0aOke-A7Inp-vgqebsDMwJ0WvaznithkwcrfGbhg,52155
 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=eTUB2iJSBtD0sbkWE_LaVT1e4Sir6Q61HJ2j5OZxAsU,6615
-pyglove/core/views/html/controls/label.py,sha256=JggkrD3j6Z_zAl2B8HRACC1pExDJUeIHY5E51yKMarw,5202
-pyglove/core/views/html/controls/label_test.py,sha256=3ekn3aBO1O8iG_wHpZ7487wY2YRA6wyKeDN7275iR4U,4544
+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/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=4m4pALSIQoIwVVz7hoMjQs1dgY3cOzyzJjT8ZikBNbQ,4958
-pyglove/core/views/html/controls/tab_test.py,sha256=j54nyN9BJjS0sXJlxA45RQDSmPY2HDP5ttxc4sqkGpw,2121
+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/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.dev202412080808.dist-info/LICENSE,sha256=WNHhf_5RCaeuKWyq_K39vmp9F28LxKsB4SpomwSZ2L0,11357
-pyglove-0.4.5.dev202412080808.dist-info/METADATA,sha256=dvUJIvfsqSKVKEPJ-5B-T_EtiVcf1qRHwA34i_UZpSQ,6666
-pyglove-0.4.5.dev202412080808.dist-info/WHEEL,sha256=PZUExdf71Ui_so67QXpySuHtCi3-J3wvF4ORK6k_S8U,91
-pyglove-0.4.5.dev202412080808.dist-info/top_level.txt,sha256=wITzJSKcj8GZUkbq-MvUQnFadkiuAv_qv5qQMw0fIow,8
-pyglove-0.4.5.dev202412080808.dist-info/RECORD,,
+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,,