feat(ui): add paginator component

testgen/ui/components/frontend/js/components/paginator.js

@@ -0,0 +1,111 @@
+/**
+ * @typedef Properties
+ * @type {object}
+ * @property {number} count
+ * @property {number} pageSize
+ * @property {number} pageIndex
+ */
+import van from '../van.min.js';
+import { Streamlit } from '../streamlit.js';
+
+const { div, span, i, button } = van.tags;
+
+const Paginator = (/** @type Properties */ props) => {
+    const count = props.count.val;
+    const pageSize = props.pageSize.val;
+
+    Streamlit.setFrameHeight(32);
+
+    if (!window.testgen.loadedStylesheets.expanderToggle) {
+        document.adoptedStyleSheets.push(stylesheet);
+        window.testgen.loadedStylesheets.expanderToggle = true;
+    }
+
+    const pageIndexState = van.state(props.pageIndex.val || 0);
+
+    return div(
+        { class: 'tg-paginator' },
+        span(
+            { class: 'tg-paginator--label' },
+            () => {
+                const pageIndex = pageIndexState.val;
+                return `${pageSize * pageIndex + 1} - ${Math.min(count, pageSize * (pageIndex + 1))} of ${count}`
+            },
+        ),
+        button(
+            {
+                class: 'tg-paginator--button',
+                onclick: () => {
+                    pageIndexState.val = 0;
+                    Streamlit.sendData(pageIndexState.val);
+                },
+                disabled: () => pageIndexState.val === 0,
+            },
+            i({class: 'material-symbols-rounded'}, 'first_page')
+        ),
+        button(
+            {
+                class: 'tg-paginator--button',
+                onclick: () => {
+                    pageIndexState.val--;
+                    Streamlit.sendData(pageIndexState.val);
+                },
+                disabled: () => pageIndexState.val === 0,
+            },
+            i({class: 'material-symbols-rounded'}, 'chevron_left')
+        ),
+        button(
+            {
+                class: 'tg-paginator--button',
+                onclick: () => {
+                    pageIndexState.val++;
+                    Streamlit.sendData(pageIndexState.val);
+                },
+                disabled: () => pageIndexState.val === Math.ceil(count / pageSize) - 1,
+            },
+            i({class: 'material-symbols-rounded'}, 'chevron_right')
+        ),
+        button(
+            {
+                class: 'tg-paginator--button',
+                onclick: () => {
+                    pageIndexState.val = Math.ceil(count / pageSize) - 1;
+                    Streamlit.sendData(pageIndexState.val);
+                },
+                disabled: () => pageIndexState.val === Math.ceil(count / pageSize) - 1,
+            },
+            i({class: 'material-symbols-rounded'}, 'last_page')
+        ),
+    );
+};
+
+const stylesheet = new CSSStyleSheet();
+stylesheet.replace(`
+.tg-paginator {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.tg-paginator--label {
+    margin-right: 20px;
+    color: var(--secondary-text-color);
+}
+
+.tg-paginator--button {
+    background-color: transparent;
+    border: none;
+    height: 32px;
+    padding: 4px;
+    color: var(--secondary-text-color);
+    cursor: pointer;
+}
+
+.tg-paginator--button[disabled] {
+    color: var(--disabled-text-color);
+    cursor: default;
+}
+`);
+
+export { Paginator };

testgen/ui/components/frontend/js/main.js

@@ -11,6 +11,7 @@ import { Button } from './components/button.js'
 import { Breadcrumbs } from './components/breadcrumbs.js'
 import { ExpanderToggle } from './components/expander_toggle.js';
 import { Link } from './components/link.js';
+import { Paginator } from './components/paginator.js';
 import { Select } from './components/select.js'
 import { SummaryBar } from './components/summary_bar.js';
 import { SortingSelector } from './components/sorting_selector.js';
@@ -24,6 +25,7 @@ const TestGenComponent = (/** @type {string} */ id, /** @type {object} */ props)
         button: Button,
         expander_toggle: ExpanderToggle,
         link: Link,
+        paginator: Paginator,
         select: Select,
         sorting_selector: SortingSelector,
         sidebar: window.top.testgen.components.Sidebar,

testgen/ui/components/widgets/expander_toggle.py

@@ -1,11 +1,7 @@
-import logging
-
 import streamlit as st
 
 from testgen.ui.components.utils.component import component
 
-LOG = logging.getLogger("testgen")
-
 
 def expander_toggle(
     default: bool = False,
@@ -22,7 +18,6 @@ def expander_toggle(
     :param collapse_label: label for expanded state, default="Collapse"
     :param key: unique key to give the component a persisting state
     """
-    LOG.debug(key)
 
     if key in st.session_state:
         default = st.session_state[key]

testgen/ui/components/widgets/paginator.py

@@ -0,0 +1,25 @@
+from testgen.ui.components.utils.component import component
+
+
+def paginator(
+    count: int,
+    page_size: int,
+    page_index: int = 0,
+    key: str = "testgen:paginator",
+) -> bool:
+    """
+    Testgen component to display pagination arrows.
+
+    # Parameters
+    :param count: total number of items being paginated
+    :param page_size: number of items displayed per page
+    :param page_index: index of initial page displayed, default=0 (first page)
+    :param key: unique key to give the component a persisting state
+    """
+
+    return component(
+        id_="paginator",
+        key=key,
+        default=page_index,
+        props={"count": count, "pageSize": page_size, "pageIndex": page_index},
+    )