pyglove 0.4.5.dev20240318__py3-none-any.whl → 0.4.5.dev202501132210__py3-none-any.whl

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

@@ -0,0 +1,183 @@
+# 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 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', 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"><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>'
+        )
+    )
+    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,320 @@
+# 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, Optional, 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.'
+  ] = []
+
+  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']
+)
+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 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',
+        [
+            '<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;
+          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/core/views/html/controls/tab_test.py

@@ -0,0 +1,87 @@
+# 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>'), css_classes=['foo']),
+        tab_lib.Tab('bar', base.Html('<h1>bar</h1>')),
+    ])
+    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')"><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([
+          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)
+    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__':
+  unittest.main()