Enhancements to HTML controls.

* `lf.views.html.controls.Control`: supports HTML/CSS injection with javascript.
* `lf.views.html.controls.Label`: supports dynamic update of CSS classes.
* `lf.views.html.controls.TabControl`:
  - Supports `css_classes`
  - Allow dynamic addition of new tabs.
  - Avoid "float: left" for vertical tabs.
  - Upgraded UI.

PiperOrigin-RevId: 704409321

Author: daiyip

pyglove/core/views/html/base.py

@@ -352,7 +352,7 @@ def escape(
       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 @@ def _on_bound(self):
     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 @@ def add_script(self, *scripts: str) -> 'HtmlControl':
   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 @@ def _sync_members(self, **fields) -> None:
     """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 @@ def _run_javascript(self, code: str) -> None:
       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 @@ def _run_javascript(self, code: str) -> None:
     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 @@ def _update_inner_html(
       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 @@ def update(
       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 @@ def update(
       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 @@ def test_with_tooltip(self):
     )
 
   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 @@ def test_update(self):
                 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");
+                """
+            ),
         ]
     )