pyglove 0.4.5.dev202411050809__py3-none-any.whl → 0.4.5.dev202411060809__py3-none-any.whl

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

@@ -0,0 +1,185 @@
+# 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.
+"""Progress bar control."""
+
+import functools
+from typing import Annotated, List, Optional, Union
+
+from pyglove.core import object_utils
+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.controls.base import HtmlControl
+from pyglove.core.views.html.controls.label import Label
+# pylint: enable=g-importing-member
+
+
+@pg_object.use_init_args(
+    ['name', 'value', 'id', 'css_classes', 'styles']
+)
+class SubProgress(HtmlControl):
+  """A sub progress bar control."""
+
+  name: Annotated[
+      str, 'The name of the sub progress bar.'
+  ]
+
+  value: Annotated[
+      int, 'The value of the sub progress bar.'
+  ] = 0
+
+  interactive = True
+
+  def _on_parent_change(self, *args, **kwargs):
+    super()._on_parent_change(*args, **kwargs)  # pytype: disable=attribute-error
+    self.__dict__.pop('parent', None)
+
+  @functools.cached_property
+  def parent(self) -> Optional['ProgressBar']:
+    """Returns the parent progress bar."""
+    return self.sym_ancestor(
+        lambda x: isinstance(x, ProgressBar)
+    )
+
+  @property
+  def total(self) -> Optional[int]:
+    """Returns the total number of the sub progress bar."""
+    assert self.parent is not None
+    return self.parent.total
+
+  @property
+  def width(self) -> Optional[str]:
+    """Returns the width of the sub progress bar."""
+    if self.total is None:
+      return None
+    return f'{self.value / self.total:.0%}'
+
+  def _to_html(self, **kwargs) -> Html:
+    styles = self.styles.copy()
+    styles.update(width=self.width)
+    return Html.element(
+        'div',
+        [],
+        id=self.element_id(),
+        styles=styles,
+        css_classes=[
+            'sub-progress',
+            object_utils.camel_to_snake(self.name, '-')
+        ] + self.css_classes,
+    )
+
+  def increment(self, delta: int = 1):
+    """Increments the value of the sub progress bar."""
+    self.update(self.value + delta)
+
+  def update(self, value: Optional[int] = None):
+    if value is not None:
+      self.rebind(
+          value=value, skip_notification=True, raise_on_no_change=False
+      )
+    self._update_style(dict(width=self.width))
+    self.parent.update()
+
+
+@pg_object.use_init_args(
+    ['subprogresses', 'total', 'id', 'css_classes', 'styles']
+)
+class ProgressBar(HtmlControl):
+  """A progress bar control."""
+
+  subprogresses: Annotated[
+      List[SubProgress],
+      'The sub progress bars of the progress bar.'
+  ]
+
+  total: Annotated[
+      Optional[int],
+      (
+          'The total number of steps represented by the progress bar.'
+          'If None, the progress steps are not determined.'
+      )
+  ] = None
+
+  interactive = True
+
+  def _on_bound(self):
+    super()._on_bound()
+    self._progress_label = Label(
+        text=self._progress_text(),
+        tooltip=self._progress_tooltip(),
+        css_classes=['progress-label'],
+        interactive=True,
+    )
+
+  def _progress_text(self) -> Union[str, Html]:
+    completed = sum(s.value for s in self.subprogresses)
+    if self.total is None:
+      return 'n/a'
+    complete_rate = completed / self.total
+    return f'{complete_rate: .1%} ({completed}/{self.total})'
+
+  def _progress_tooltip(self) -> str:
+    if self.total is None:
+      return 'Not started'
+    assert self.total > 0
+    return '\n'.join([
+        f'{s.name}: {s.value / self.total:.1%} ({s.value}/{self.total})'
+        for s in self.subprogresses
+    ])
+
+  def _to_html(self, **kwargs) -> Html:
+    return Html.element(
+        'div',
+        [
+            Html.element('div', self.subprogresses, css_classes=['shade']),
+            self._progress_label,
+        ],
+        css_classes=['progress-bar']
+    ).add_style(
+        """
+        .progress-bar {
+            display: inline-block;
+        }
+        .progress-bar .shade {
+          position: relative;
+          background-color: #EEE;
+          display: inline-flex;
+          margin: 10px;
+          width: 100px; 
+          height: 5px;
+          border-radius: 5px; 
+          overflow: hidden;
+        }
+        .progress-bar .sub-progress {
+          background-color: dodgerblue;
+          height: 10px;
+          width: 0%;
+          border-radius: 0px;
+        }
+        """
+    )
+
+  def update(self, total: Optional[int] = None):
+    if total is not None:
+      assert self.total is None
+      self._sync_members(total=total)
+    self._progress_label.update(
+        self._progress_text(), tooltip=self._progress_tooltip()
+    )
+
+  def __getitem__(self, name: str) -> SubProgress:
+    for sub in self.subprogresses:
+      if sub.name == name:
+        return sub
+    raise KeyError(f'Sub progress bar {name!r} not found.')

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

@@ -0,0 +1,97 @@
+# 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.
+import inspect
+import unittest
+
+from pyglove.core import symbolic   # pylint: disable=unused-import
+from pyglove.core.views.html.controls import progress_bar
+
+
+class ProgressBarTest(unittest.TestCase):
+
+  def assert_html_content(self, control, expected):
+    expected = inspect.cleandoc(expected).strip()
+    actual = control.to_html().content.strip()
+    if actual != expected:
+      print(actual)
+    self.assertEqual(actual, expected)
+
+  def test_basic(self):
+    bar = progress_bar.ProgressBar(
+        subprogresses=[
+            progress_bar.SubProgress('foo'),
+            progress_bar.SubProgress('bar', 20),
+        ],
+        total=None,
+    )
+    self.assert_html_content(
+        bar,
+        (
+            '<div class="progress-bar"><div class="shade">'
+            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='
+            f'"tooltip" id="{bar._progress_label.tooltip.element_id()}">'
+            'Not started</span></div></div>'
+        )
+    )
+    self.assertEqual(bar['foo'], progress_bar.SubProgress('foo'))
+    self.assertEqual(bar['bar'], progress_bar.SubProgress('bar', 20))
+    with self.assertRaisesRegex(KeyError, 'Sub progress bar .* not found'):
+      _ = bar['baz']
+    self.assertIsNone(bar['foo'].total)
+    self.assertIsNone(bar['foo'].width)
+
+    bar.update(total=100)
+    self.assertEqual(bar.total, 100)
+    self.assertEqual(bar['foo'].total, 100)
+    self.assertEqual(bar['foo'].width, '0%')
+    self.assertEqual(bar['bar'].width, '20%')
+    with bar.track_scripts() as scripts:
+      bar['foo'].increment()
+      self.assertEqual(
+          scripts,
+          [
+              inspect.cleandoc(
+                  f"""
+                  elem = document.getElementById("{bar['foo'].element_id()}");
+                  elem.style = "width:1%;";
+                  """
+              ),
+              inspect.cleandoc(
+                  f"""
+                  elem = document.getElementById("{bar._progress_label.element_id()}");
+                  elem.textContent = " 21.0% (21/100)";
+                  """
+              ),
+              inspect.cleandoc(
+                  f"""
+                  elem = document.getElementById("{bar._progress_label.tooltip.element_id()}");
+                  elem.textContent = "foo: 1.0% (1/100)\\nbar: 20.0% (20/100)";
+                  """
+              ),
+              inspect.cleandoc(
+                  f"""
+                  elem = document.getElementById("{bar._progress_label.tooltip.element_id()}");
+                  elem.classList.remove("html-content");
+                  """
+              ),
+          ]
+      )
+
+
+if __name__ == '__main__':
+  unittest.main()

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

@@ -0,0 +1,169 @@
+# 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(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.id,
+        styles=self.styles,
+    ).add_script(
+        """
+        function openTab(event, tabId) {
+          const tabButtons = document.getElementsByClassName('tab-button');
+          for (let i = 0; i < tabButtons.length; i++) {
+            tabButtons[i].classList.remove('selected');
+          }
+          const tabContents = document.getElementsByClassName('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 #DDD;
+        }
+        .left .tab-button-group {
+          float: left;
+          top: 0;
+        }
+        .tab-button {
+          background-color: #DDD;
+          border: 1px solid #DDD;
+          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;
+        }
+        """
+    )

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

@@ -0,0 +1,54 @@
+# 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.
+import inspect
+import unittest
+
+from pyglove.core import symbolic   # pylint: disable=unused-import
+from pyglove.core.views.html import base
+from pyglove.core.views.html.controls import tab as tab_lib
+
+
+class TabControlTest(unittest.TestCase):
+
+  def assert_html_content(self, control, expected):
+    expected = inspect.cleandoc(expected).strip()
+    actual = control.to_html().content.strip()
+    if actual != expected:
+      print(actual)
+    self.assertEqual(actual, expected)
+
+  def test_basic(self):
+    tab = tab_lib.TabControl([
+        tab_lib.Tab('foo', base.Html('<h1>foo</h1>')),
+        tab_lib.Tab('bar', base.Html('<h1>bar</h1>')),
+    ])
+    self.assert_html_content(
+        tab,
+        (
+            '<div class="tab-control top"><div class="tab-button-group">'
+            '<button class="tab-button selected" '
+            f'''onclick="openTab(event, '{tab.element_id(str(0))}')">'''
+            '<a class="label">foo</a></button><button class="tab-button" '
+            f'''onclick="openTab(event, '{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>'
+        )
+    )
+
+
+if __name__ == '__main__':
+  unittest.main()

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

@@ -0,0 +1,99 @@
+# 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.
+"""Html tooltip."""
+
+from typing import Optional, Union
+from pyglove.core import typing as pg_typing
+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.controls.base import HtmlControl
+# pylint: disable=g-importing-member
+
+
+@pg_object.use_init_args(
+    ['content', 'for_element', 'id', 'css_classes', 'styles']
+)
+class Tooltip(HtmlControl):
+  """A tooltip control.
+  
+  Attributes:
+    content: The content of the tooltip. It could be a string or a HTML object.
+    id: The id of the tooltip.
+    css_classes: The CSS classes for the tooltip.
+    for_element: The CSS selector for the element to attach the tooltip to.
+      e.g. '.my-element' or '#my-element'.
+  """
+
+  content: Union[str, Html]
+  for_element: Optional[str] = None
+
+  def _to_html(self, **kwargs):
+    if self.for_element is None:
+      raise ValueError(
+          'CSS selector `for_element` is required for tooltip to display.'
+      )
+    content = self.content
+    if isinstance(self.content, str):
+      content = Html.escape(self.content)
+    return Html.element(
+        'span',
+        [content],
+        id=self.element_id(),
+        css_classes=[
+            'tooltip',
+            'html-content' if isinstance(content, Html) else None,
+        ] + self.css_classes,
+        styles=self.styles,
+    ).add_style(
+        """
+        span.tooltip {
+          visibility: hidden;
+          white-space: pre-wrap;
+          font-weight: normal;
+          background-color: #484848;
+          color: #fff;
+          padding: 10px;
+          border-radius: 6px;
+          position: absolute;
+          z-index: 1;
+        }
+        span.tooltip:hover {
+          visibility: visible;
+        }
+        .tooltip.html-content {
+          white-space: inherit;
+          background-color: white;
+          color: inherit;
+          box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+        }
+        """,
+        f"""
+        {self.for_element}:hover + .tooltip {{
+          visibility: visible;
+        }}
+        """
+    )
+
+  def update(self, content: Union[str, Html]) -> None:
+    self._sync_members(content=self._update_content(content))
+    if isinstance(content, Html):
+      self._add_css_class('html-content')
+    else:
+      self._remove_css_class('html-content')
+
+
+# Register converter for automatic conversion.
+pg_typing.register_converter(str, Tooltip, Tooltip)
+pg_typing.register_converter(Html, Tooltip, Tooltip)

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

@@ -0,0 +1,99 @@
+# 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.
+import inspect
+import unittest
+
+from pyglove.core import symbolic   # pylint: disable=unused-import
+from pyglove.core.views.html import base
+from pyglove.core.views.html.controls import tooltip as tooltip_lib
+
+
+class TooltipTest(unittest.TestCase):
+
+  def assert_html_content(self, control, expected):
+    expected = inspect.cleandoc(expected).strip()
+    actual = control.to_html().content.strip()
+    if actual != expected:
+      print(actual)
+    self.assertEqual(actual, expected)
+
+  def test_basic(self):
+    tooltip = tooltip_lib.Tooltip('foo')
+    with self.assertRaisesRegex(
+        ValueError, 'CSS selector `for_element` is required'
+    ):
+      tooltip.to_html()
+
+    tooltip = tooltip_lib.Tooltip('foo', for_element='.bar')
+    self.assertEqual(tooltip.for_element, '.bar')
+    self.assert_html_content(
+        tooltip,
+        '<span class="tooltip">foo</span>'
+    )
+    self.assertIn(
+        inspect.cleandoc(
+            """
+            .bar:hover + .tooltip {
+              visibility: visible;
+            }
+            """
+        ),
+        tooltip.to_html().style_section,
+    )
+
+  def test_update(self):
+    tooltip = tooltip_lib.Tooltip('foo', for_element='.bar', interactive=True)
+    self.assertIn('id="control-', tooltip.to_html_str(content_only=True))
+    with tooltip.track_scripts() as scripts:
+      tooltip.update('normal text')
+      self.assertEqual(tooltip.content, 'normal text')
+      self.assertEqual(
+          scripts,
+          [
+              inspect.cleandoc(
+                  f"""
+                  elem = document.getElementById("{tooltip.element_id()}");
+                  elem.textContent = "normal text";
+                  """
+              ),
+              inspect.cleandoc(
+                  f"""
+                  elem = document.getElementById("{tooltip.element_id()}");
+                  elem.classList.remove("html-content");
+                  """
+              ),
+          ]
+      )
+    with tooltip.track_scripts() as scripts:
+      tooltip.update(base.Html('<b>bold text</b>'))
+      self.assertEqual(
+          scripts,
+          [
+              inspect.cleandoc(
+                  f"""
+                  elem = document.getElementById("{tooltip.element_id()}");
+                  elem.innerHTML = "<b>bold text</b>";
+                  """
+              ),
+              inspect.cleandoc(
+                  f"""
+                  elem = document.getElementById("{tooltip.element_id()}");
+                  elem.classList.add("html-content");
+                  """
+              ),
+          ]
+      )
+
+if __name__ == '__main__':
+  unittest.main()