pyglove 0.4.5.dev202412080808__tar.gz → 0.4.5.dev202412100720__tar.gz

{pyglove-0.4.5.dev202412080808 → pyglove-0.4.5.dev202412100720}/PKG-INFO

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

{pyglove-0.4.5.dev202412080808 → pyglove-0.4.5.dev202412100720}/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-0.4.5.dev202412080808 → pyglove-0.4.5.dev202412100720}/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-0.4.5.dev202412080808 → pyglove-0.4.5.dev202412100720}/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-0.4.5.dev202412080808 → pyglove-0.4.5.dev202412100720}/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-0.4.5.dev202412100720/pyglove/core/views/html/controls/tab.py

@@ -0,0 +1,242 @@
+# Copyright 2024 The PyGlove Authors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+"""Tab control."""
+
+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
+from pyglove.core.views.html.controls.base import HtmlControl
+from pyglove.core.views.html.controls.label import Label
+# pylint: enable=g-importing-member
+
+
+class Tab(pg_object.Object):
+  """A tab."""
+
+  label: Annotated[
+      Label,
+      'The label of the tab.'
+  ]
+
+  content: Annotated[
+      Union[Html, HtmlConvertible],
+      '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']
+)
+class TabControl(HtmlControl):
+  """A tab control."""
+
+  tabs: Annotated[
+      List[Tab],
+      'The tabs of the tab control.'
+  ]
+
+  selected: Annotated[
+      int,
+      'The index of the selected tab.'
+  ] = 0
+
+  tab_position: Annotated[
+      Literal['top', 'left'],
+      'The direction of the tab control.'
+  ] = 'top'
+
+  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(
+        'table',
+        [
+            '<tr><td>',
+            Html.element(
+                'div',
+                [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',
+                [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'],
+        styles=self.styles,
+    ).add_script(
+        """
+        function openTab(event, controlId, tabId) {
+          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 + '-content-group > .tab-content');
+          for (let i = 0; i < tabContents.length; i++) {
+            tabContents[i].classList.remove('selected')
+          }
+          const tabButton = event.currentTarget;
+          tabButton.classList.add('selected');
+          document.getElementById(tabId).classList.add('selected');
+        }
+        """
+    ).add_style(
+        """
+        .tab-control {
+          border-spacing: 0px;
+          border-collapse: collapse;
+          height: 100%;
+          margin-top: 10px;
+        }
+        .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: transparent;
+          border-radius: 5px;
+          border: 0px;
+          font-weight: bold;
+          color: gray;
+          outline: none;
+          cursor: pointer;
+          transition: 0.3s;
+        }
+        .tab-button:hover {
+          background-color: #fff1dd;
+        }
+        .tab-button.selected {
+          background-color: #f0ecf9;
+          color: black;
+        }
+        .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 {
+          margin: 5px 0px 5px 5px;
+        }
+        .tab-content {
+          display: none;
+        }
+        .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-0.4.5.dev202412080808 → pyglove-0.4.5.dev202412100720}/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 → pyglove-0.4.5.dev202412100720}/pyglove.egg-info/PKG-INFO

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

pyglove-0.4.5.dev202412080808/pyglove/core/views/html/controls/tab.py

@@ -1,169 +0,0 @@
-# Copyright 2024 The PyGlove Authors
-#
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#      http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-"""Tab control."""
-
-from typing import Annotated, List, Literal, Union
-
-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
-from pyglove.core.views.html.controls.base import HtmlControl
-from pyglove.core.views.html.controls.label import Label
-# pylint: enable=g-importing-member
-
-
-class Tab(pg_object.Object):
-  """A tab."""
-
-  label: Annotated[
-      Label,
-      'The label of the tab.'
-  ]
-
-  content: Annotated[
-      Union[Html, HtmlConvertible],
-      'The content of the tab.'
-  ]
-
-
-@pg_object.use_init_args(
-    ['tabs', 'selected', 'tab_position', 'id', 'css_classes', 'styles']
-)
-class TabControl(HtmlControl):
-  """A tab control."""
-
-  tabs: Annotated[
-      List[Tab],
-      'The tabs of the tab control.'
-  ]
-
-  selected: Annotated[
-      int,
-      'The index of the selected tab.'
-  ] = 0
-
-  tab_position: Annotated[
-      Literal['top', 'left'],
-      'The direction of the tab control.'
-  ] = 'top'
-
-  interactive = True
-
-  def _to_html(self, **kwargs):
-    return Html.element(
-        'div',
-        [
-            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'],
-            ),
-        ] + [
-            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)
-        ],
-        css_classes=['tab-control', self.tab_position] + self.css_classes,
-        id=self.element_id(),
-        styles=self.styles,
-    ).add_script(
-        """
-        function openTab(event, controlId, tabId) {
-          const tabButtons = document.querySelectorAll('#' + controlId + '> .tab-button-group > .tab-button');
-          for (let i = 0; i < tabButtons.length; i++) {
-            tabButtons[i].classList.remove('selected');
-          }
-          const tabContents = document.querySelectorAll('#' + controlId + '> .tab-content');
-          for (let i = 0; i < tabContents.length; i++) {
-            tabContents[i].style.display = 'none';
-          }
-          const tabButton = event.currentTarget;
-          tabButton.classList.add('selected');
-          document.getElementById(tabId).style.display = "block";
-        }
-        """
-    ).add_style(
-        """
-        .top .tab-button-group {
-          overflow-x: hidden;
-          border-bottom: 1px solid #EEE;
-        }
-        .left .tab-button-group {
-          float: left;
-          top: 0;
-        }
-        .tab-button {
-          background-color: #EEE;
-          border: 1px solid #EEE;
-          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;
-        }
-        .top .tab-button.selected {
-          border-bottom-color: #fff;
-          border-top-color: #B721FF;
-          background: #fff;
-        }
-        .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;
-        }
-        .tab-content {
-          display: none;
-          padding: 10px;
-        }
-        .left .tab-content {
-          float: left;
-        }
-        """
-    )