solara-ui 1.45.0__py3-none-any.whl

solara/lab/components/tabs.py

@@ -0,0 +1,274 @@
+from typing import Callable, Dict, List, Optional, TypeVar, Union
+
+import solara
+from solara import v
+
+
+@solara.component
+def Tab(
+    label: Union[None, str, solara.Element] = None,
+    icon_name: Optional[str] = None,
+    path_or_route: Union[None, str, "solara.Route"] = None,
+    disabled=False,
+    classes: List[str] = [],
+    style: Union[str, Dict[str, str], None] = None,
+    children: List[solara.Element] = [],
+    tab_children: List[Union[solara.Element, str]] = [],
+):
+    """An item in a Tabs component.
+
+    (*Note: [This component is experimental and its API may change in the future](/documentation/getting_started/what-is-lab).*)
+
+    Should be a direct child of a [Tabs](/documentation/components/lab/tabs).
+
+    ## Arguments
+     * `label`: The label of the tab.
+     * `icon_name`: The name of the icon to display in the tab.
+     * `path_or_route`: The path or route to navigate to when the tab is clicked.
+     * `disabled`: Whether the tab is disabled.
+     * `classes`: Additional CSS classes to apply.
+     * `style`: CSS style to apply.
+     * `children`: The children of the tab. These will be displayed when the tab is active.
+     * `tab_children`: The children of the tab header. These will be displayed in the tab
+        header, if a label or icon_name is provided they are prepended to the `tab_children`.
+
+    """
+    if label is not None:
+        tab_children = [label] + tab_children
+    if icon_name:
+        tab_children = [v.Icon(left=bool(label), children=[icon_name])] + tab_children
+    style_flat = solara.util._flatten_style(style)
+    class_ = solara.util._combine_classes(classes)
+    # note: children is not used, it is only used in the Tabs component
+    return v.Tab(children=tab_children, disabled=disabled, class_=class_, style_=style_flat)
+
+
+T = TypeVar("T")
+
+
+@solara.component
+def Tabs(
+    value: Union[None, int, "solara.Reactive[int]"] = None,
+    on_value: Optional[Callable[[int], None]] = None,
+    color: Optional[str] = None,
+    background_color: Optional[str] = None,
+    slider_color: Optional[str] = None,
+    dark: bool = False,
+    grow: bool = False,
+    vertical=False,
+    align: str = "left",
+    lazy=False,
+    children: List[solara.Element] = [],
+):
+    """A tabbed container showing one tab at a time.
+
+    (*Note: [This component is experimental and its API may change in the future](/documentation/getting_started/what-is-lab).*)
+
+    Note that if Tabs are used as a child of the [AppBar](/documentation/components/layout/app_bar) component, the tabs
+    will be placed under the app bar. See our [authorization app](/apps/authorization) for an example.
+
+    If the children [Tab](/documentation/components/lab/tab) elements are passed a `path_or_route` argument, the active tab
+    will be based on the path of the current page.
+
+
+    ## Examples
+
+    ### Only tabs headers
+
+    ```solara
+    import solara
+    import solara.lab
+
+
+    @solara.component
+    def Page():
+        with solara.lab.Tabs():
+            solara.lab.Tab("Tab 1")
+            solara.lab.Tab("Tab 2")
+    ```
+
+    ### Tabs with content
+
+    This is usually only used when the tabs are placed in the [AppBar](/documentation/components/layout/app_bar) component.
+
+    ```solara
+    import solara
+    import solara.lab
+
+
+    @solara.component
+    def Page():
+        with solara.lab.Tabs():
+            with solara.lab.Tab("Tab 1"):
+                solara.Markdown("Hello")
+            with solara.lab.Tab("Tab 2"):
+                solara.Markdown("World")
+    ```
+
+
+    ### Tabs events
+
+    The `value` on the Tabs component is a reactive value that can be used to
+    listen to changes in the selected tab and make the UI respond to it.
+
+    ```solara
+    import solara
+    import solara.lab
+
+    tab_index = solara.reactive(0)
+
+
+    @solara.component
+    def Page():
+
+        def next_tab():
+            tab_index.value = (tab_index.value + 1) % 2
+
+        solara.Title(f"Tab {tab_index.value + 1}")
+        solara.Button('Next Tab', on_click=next_tab)
+
+        with solara.lab.Tabs(value=tab_index):
+            with solara.lab.Tab("Tab 1"):
+                solara.Markdown("Hello")
+            with solara.lab.Tab("Tab 2"):
+                solara.Markdown("World")
+            with solara.lab.Tab("Disabled", disabled=True):
+                solara.Markdown("World")
+
+    ```
+
+    ### Advanced tabs
+
+    Tabs can be nested, styled and placed vertically.
+
+    ```solara
+    import solara
+    import solara.lab
+
+
+    @solara.component
+    def Page():
+        with solara.lab.Tabs(background_color="primary", dark=True):
+            with solara.lab.Tab("Home", icon_name="mdi-home"):
+                solara.Markdown("Hello")
+            with solara.lab.Tab("Advanced", icon_name="mdi-apps"):
+                with solara.lab.Tabs(grow=True, background_color="primary", dark=True, slider_color="green"):
+                    with solara.lab.Tab("Settings", icon_name="mdi-cogs"):
+                        with solara.lab.Tabs(vertical=True, slider_color="green"):
+                            with solara.lab.Tab("User", icon_name="mdi-account"):
+                                solara.Markdown("User settings")
+                            with solara.lab.Tab("System", icon_name="mdi-access-point"):
+                                solara.Markdown("System settings")
+                    with solara.lab.Tab("Analytics", icon_name="mdi-chart-line"):
+                        with solara.lab.Tabs(vertical=True):
+                            with solara.lab.Tab("User", icon_name="mdi-account"):
+                                solara.Markdown("User analytics")
+                            with solara.lab.Tab("System", icon_name="mdi-access-point"):
+                                solara.Markdown("System analytics")
+
+    ```
+
+
+    ### Many tabs
+
+    If many tabs are shown, paginations arrows are shown.
+
+    ```solara
+    import solara
+    import solara.lab
+
+    tab_count = 30
+
+
+    @solara.component
+    def Page():
+        with solara.lab.Tabs():
+            for i in range(tab_count):
+                with solara.lab.Tab(f"Tab {i+1}"):
+                    solara.Markdown(f"Content for tab {i+1}")
+    ```
+
+
+    ## Arguments
+
+     * `value`: The index of the selected tab. If `None`, the first tab is selected or it is based in the route/path.
+     * `on_value`: A callback that is called when the selected tab changes.
+     * `color`: The color of text in the tab headers (only for dark=False).
+     * `background_color`: The background color of the tab headers.
+     * `slider_color`: The color of the slider.
+     * `dark`: Apply a dark theme.
+     * `grow`: Whether the tabs should grow to fill the available space.
+     * `vertical`: Whether the tabs are vertical.
+     * `align`: The alignment of the tabs, possible values are 'left', 'start', 'center', 'right' or 'end'.
+     * `lazy`: Whether the child components of the inactive tabs are rendered or not. If lazy=True, components of inactive tabs are not rendered.
+     * `classes`: Additional CSS classes to apply.
+     * `style`: CSS style to apply.
+    """
+
+    paths_of_routes = [child.kwargs.get("path_or_route") for child in children]
+    paths = [solara.resolve_path(path_or_route, level=0) if path_or_route else None for path_or_route in paths_of_routes]
+    router = solara.use_router()
+    if value is None:
+        if router.path in paths:
+            value = paths.index(router.path)
+        else:
+            value = 0
+
+    def safe_on_value(index: Optional[int]):
+        if on_value and index is not None:
+            on_value(index)
+
+    reactive_value = solara.use_reactive(value, safe_on_value)
+    del value
+
+    has_content = False
+    for i, child in enumerate(children):
+        if not child.component == Tab:
+            raise ValueError(f"Tabs children must be Tab components, but child {i} is {child.component}")
+        if child.kwargs.get("children"):
+            has_content = True
+
+    def on_v_model(index: Optional[int]):
+        if index is not None:
+            path = paths[index]
+            if path:
+                router.push(path)
+            reactive_value.value = index
+
+    if align not in ["left", "start", "center", "right", "end"]:
+        raise ValueError(f"Tabs align must be one of 'left', 'start', 'center', 'right', 'end', but is {align}")
+
+    with v.Tabs(
+        v_model=reactive_value.value,
+        on_v_model=on_v_model,
+        centered=align == "center",
+        right=align in ["right", "end"],
+        children=children,
+        vertical=vertical,
+        color=color,
+        background_color=background_color,
+        show_arrows=True,
+        grow=grow,
+        dark=dark,
+    ) as tabs:
+        v.TabsSlider(color=slider_color)
+        if has_content:
+            with v.TabsItems(v_model=reactive_value.value, on_v_model=on_v_model):
+                for i, child in enumerate(children):
+                    if not lazy or reactive_value.value == i:
+                        v.TabItem(children=child.kwargs.get("children", []), value=i)
+                    else:
+                        v.TabItem(
+                            value=i,
+                            children=[
+                                # Nice idea, but by using the widget interface the tab does not change without binding using
+                                # v-model. So we would need to implement this using a vuetify template.
+                                # v.SkeletonLoader(
+                                #     class_="mx-auto",
+                                #     max_width="300",
+                                #     type="card",
+                                # )
+                            ],
+                        )
+
+    return tabs

solara/lab/components/theming.py

@@ -0,0 +1,98 @@
+from typing import Callable, Dict, Union, cast
+
+import ipyvuetify.Themes
+from ipyvuetify.Themes import Theme
+
+import solara
+from solara.components.component_vue import component_vue
+from solara.tasks import Proxy
+
+theme = Proxy(Theme)
+ipyvuetify.Themes.theme = cast(ipyvuetify.Themes.Theme, theme)
+
+
+def use_dark_effective():
+    """Return True if the frontend is using a dark theme.
+
+    Equivalent of
+
+    ```python
+    solara.use_trait_observe(solara.lab.theme, "dark_effective")
+    ```
+
+    See [use_trait_observe](/api/use_trait_observe).
+    """
+    return solara.use_trait_observe(theme, "dark_effective")
+
+
+def _set_theme(themes: Union[Dict[str, Dict[str, str]], None]):
+    if themes is None:
+        return
+
+    for theme_type in themes.keys():
+        widget = getattr(theme.themes, theme_type)
+        with widget.hold_trait_notifications():
+            for k, v in themes[theme_type].items():
+                setattr(widget, k, v)
+
+
+def _get_theme(theme: Theme) -> Dict[str, Dict[str, str]]:
+    theme_dict: Dict[str, Dict[str, str]] = cast(Dict[str, Dict[str, str]], {})
+    for theme_type, theme_value in theme.themes.__dict__.items():
+        theme_traits = theme_value.keys
+        theme_dict[theme_type] = {}
+        for trait in theme_traits:
+            if not trait.startswith("_"):
+                theme_dict[theme_type][trait] = getattr(theme_value, trait)
+    return theme_dict
+
+
+@component_vue("theming.vue")
+def _ThemeToggle(
+    theme_dark: str,
+    event_sync_themes: Callable[[str], None],
+    enable_auto: bool,
+    on_icon: str,
+    off_icon: str,
+    auto_icon: str,
+    clicks: int = 1,
+):
+    pass
+
+
+@solara.component
+def ThemeToggle(
+    on_icon: str = "mdi-weather-night",
+    off_icon: str = "mdi-weather-sunny",
+    auto_icon: str = "mdi-brightness-auto",
+    enable_auto: bool = True,
+):
+    """
+    Insert a toggle switch for user to switch between light and dark themes.
+
+    ```solara
+    import solara.lab
+
+    @solara.component
+    def Page():
+        solara.lab.ThemeToggle()
+    ```
+
+    ## Arguments
+    - `on_icon`: The icon to display when the dark theme is enabled.
+    - `off_icon`: The icon to display when the dark theme is disabled.
+    - `auto_icon`: The icon to display when the theme is set to auto. Only visible if `enable_auto` is `True`.
+    - `enable_auto`: Whether to enable the auto detection of dark mode.
+    """
+
+    def sync_themes(selected_theme: str):
+        theme.dark = selected_theme
+
+    return _ThemeToggle(
+        theme_dark=theme.dark,
+        event_sync_themes=sync_themes,
+        enable_auto=enable_auto,
+        on_icon=on_icon,
+        off_icon=off_icon,
+        auto_icon=auto_icon,
+    )

solara/lab/components/theming.vue

@@ -0,0 +1,72 @@
+<template>
+    <v-btn
+        icon
+        @click="countClicks"
+        >
+        <v-icon>
+            {{ this.clicks === 1 ? this.on_icon : this.clicks === 2 ? this.off_icon : this.auto_icon }}
+        </v-icon>
+    </v-btn>
+</template>
+<script>
+module.exports = {
+    mounted() {
+        if (window.solara) {
+            if (localStorage.getItem(':solara:theme.variant')) {
+                this.theme_dark = this.initTheme();
+            }
+        }
+
+        if ( this.theme_dark === false ) {
+            this.clicks = 2;
+        } else if ( this.theme_dark === null ) {
+            this.clicks = 3;
+        }
+        this.lim = this.enable_auto ? 3 : 2;
+    },
+    methods: {
+        countClicks() {
+            if ( this.clicks < this.lim ) {
+                this.clicks++;
+            } else {
+                this.clicks = 1;
+            }
+            this.theme_dark = this.get_theme_bool( this.clicks );
+        },
+        get_theme_bool( clicks ) {
+            if ( clicks === 3 ) {
+                return null;
+            } else if ( clicks === 2 ) {
+                return false;
+            } else {
+                return true;
+            }
+        },
+        stringifyTheme() {
+            return this.theme_dark === true ? 'dark' : this.theme_dark === false ? 'light' : 'auto';
+        },
+        initTheme() {
+            storedTheme = JSON.parse(localStorage.getItem(':solara:theme.variant'));
+            return storedTheme === 'dark' ? true : storedTheme === 'light' ? false : null;
+        },
+        setTheme() {
+            if ( window.solara && this.theme_dark === null ) {
+                this.$vuetify.theme.dark = this.prefersDarkScheme();
+                return;
+            }
+            this.$vuetify.theme.dark = this.theme_dark;
+        },
+        prefersDarkScheme() {
+            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+        },
+    },
+    watch: {
+        clicks (val) {
+            if ( window.solara ) {theme.variant = this.stringifyTheme();}
+            this.setTheme();
+            if ( window.solara ) {localStorage.setItem(':solara:theme.variant', JSON.stringify(theme.variant));}
+            this.sync_themes(this.theme_dark);
+        },
+    }
+}
+</script>

solara/lab/hooks/dataframe.py

@@ -0,0 +1,2 @@
+from ..utils.dataframe import df_columns as use_df_column_names  # noqa: F401
+from ..utils.dataframe import df_row_names as df_row_names

solara/lab/toestand.py

@@ -0,0 +1,3 @@
+# for backwards compatibility
+from solara.toestand import KernelStoreValue as ConnectionStore  # noqa: F401
+from solara.toestand import Reactive, Ref, State, use_sync_external_store  # noqa: F401

solara/lab/utils/__init__.py

@@ -0,0 +1,2 @@
+from .cookies import cookies  # noqa: F401
+from .headers import headers  # noqa: F401

solara/lab/utils/cookies.py

@@ -0,0 +1,5 @@
+from typing import Dict, Optional, cast
+
+from solara.toestand import Reactive
+
+cookies: Reactive[Optional[Dict[str, str]]] = Reactive(cast(Optional[Dict[str, str]], None), key="solara.lab.cookies")

solara/lab/utils/dataframe.py

@@ -0,0 +1,165 @@
+from typing import List, Union
+
+
+def get_pandas_major():
+    import pandas as pd
+
+    return int(pd.__version__[0])
+
+
+def df_type(df):
+    return df.__class__.__module__.split(".")[0]
+
+
+def df_len(df) -> int:
+    """Return the number of rows in a dataframe."""
+    return len(df)
+
+
+def df_columns(df) -> List[str]:
+    """Return a list of column names from a dataframe."""
+    if df_type(df) == "vaex":
+        return df.get_column_names()
+    elif df_type(df) == "pandas":
+        return df.columns.tolist()
+    elif df_type(df) == "polars":
+        return df.columns
+    else:
+        raise TypeError(f"{type(df)} not supported")
+
+
+def df_row_names(df) -> List[Union[int, str]]:
+    """Return a list of row names from a dataframe."""
+    if df_type(df) == "vaex" or df_type(df) == "polars":
+        return list(range(df_len(df)))
+    elif df_type(df) == "pandas":
+        return df.index.tolist()
+    else:
+        raise TypeError(f"{type(df)} not supported")
+
+
+def df_slice(df, start: int, stop: int):
+    """Return a subset of rows from a dataframe."""
+    if df_type(df) == "pandas":
+        return df.iloc[start:stop]
+    else:
+        return df[start:stop]
+
+
+def df_records(df) -> List[dict]:
+    """A list of records from a dataframe."""
+    if df_type(df) == "pandas":
+        return df.to_dict("records")
+    elif df_type(df) == "polars":
+        return df.to_dicts()
+    elif df_type(df) == "vaex":
+        return df.to_records()
+    else:
+        raise TypeError(f"{type(df)} not supported")
+
+
+def df_unique(df, column, limit=None):
+    if df_type(df) == "vaex":
+        return df.unique(column, limit=limit + 1 if limit else None, limit_raise=False)
+    if df_type(df) == "pandas":
+        x = df[column].unique()  # .to_numpy()
+        return x[:limit]
+    else:
+        raise TypeError(f"{type(df)} not supported")
+
+
+def df_value_count(df, column, limit=None):
+    if df_type(df) == "vaex":
+        dfv = df.groupby(column, agg="count", sort="count", ascending=False)
+        dfv = dfv.to_pandas_df().rename({column: "value"}, axis=1)
+        return dfv[:limit]
+    if df_type(df) == "pandas":
+        dfv = df[column].value_counts(dropna=False).to_frame()
+        dfv = dfv.reset_index()
+        if get_pandas_major() >= 2:
+            dfv = dfv.rename({column: "value"}, axis=1)
+        else:
+            dfv = dfv.rename({"index": "value", column: "count"}, axis=1)
+        return dfv[:limit]
+    else:
+        raise TypeError(f"{type(df)} not supported")
+
+
+def df_range(df, column):
+    if df_type(df) == "vaex":
+        minmax = df[column].minmax()
+        return minmax[0].item(), minmax[1].item()
+    if df_type(df) == "pandas":
+        return df[column].min().item(), df[column].max().item()
+    else:
+        raise TypeError(f"{type(df)} not supported")
+
+
+def df_filter_missing(df, column):
+    if df_type(df) == "vaex":
+        return df[column].isna()
+    if df_type(df) == "pandas":
+        return df[column].isna()
+    else:
+        raise TypeError(f"{type(df)} not supported")
+
+
+def df_filter_values(df, column, values, invert=False):
+    if df_type(df) == "vaex":
+        filter = df[column].isin(values)
+        if invert:
+            filter = ~filter
+        return filter
+    if df_type(df) == "pandas":
+        filter = df[column].isin(values)
+        if invert:
+            filter = ~filter
+        return filter
+    else:
+        raise TypeError(f"{type(df)} not supported")
+
+
+def df_py_types(df):
+    """Return a dict with column names as keys and python types as values.
+
+    Support types are
+        * int
+        * float
+        * str
+        * bool
+
+    If a type is not supported, the internal type is returned.
+
+    """
+    import numpy as np
+
+    if df_type(df) == "vaex":
+        schema = df.schema()
+        py_types = [int, float, str, bool]
+
+        def py_type(dtype):
+            for k in py_types:
+                if dtype == k:
+                    return k
+            return dtype
+
+        return {name: py_type(dtype) for name, dtype in schema.items()}
+    elif df_type(df) == "pandas":
+        schema = df.dtypes
+
+        def py_type(dtype):
+            if isinstance(dtype, np.dtype):
+                if dtype.kind in "iu":
+                    return int
+                elif dtype.kind == "f":
+                    return float
+                elif dtype.kind == "b":
+                    return bool
+                else:
+                    return dtype
+            else:
+                return dtype
+
+        return {name: py_type(dtype) for name, dtype in schema.items()}
+    else:
+        raise TypeError(f"{type(df)} not supported")

solara/lab/utils/headers.py

@@ -0,0 +1,5 @@
+from typing import Dict, List, Optional, cast
+
+from solara.toestand import Reactive
+
+headers: Reactive[Optional[Dict[str, List[str]]]] = Reactive(cast(Optional[Dict[str, List[str]]], None), key="solara.lab.headers")

solara/layout.py

@@ -0,0 +1,44 @@
+import reacton.ipyvuetify as v
+import solara
+from solara.kitchensink import vue
+
+
+@solara.component
+def AppIcon(open=False, on_click=None):
+    def click(*ignore):
+        on_click()
+
+    icon = v.AppBarNavIcon()
+    v.use_event(icon, "click", click)
+    return icon
+
+
+@solara.component
+def LayoutApp(children=[], left=None, right=None, open_left=False, open_right=False, title="Solara"):
+    open_left, set_open_left = solara.use_state(open_left)
+    open_right, set_open_right = solara.use_state(open_right)
+    with v.Html(tag="div") as main:
+        if left:
+            with v.NavigationDrawer(absolute=True, right=False, width="min-content", v_model=open_left):
+                AppIcon(open_left, on_click=lambda: set_open_left(not open_left))
+                with v.Html(tag="div", children=[left]):
+                    pass
+        with v.Toolbar(dense=True, class_="elevation-3", dark=False):
+            if left:
+                AppIcon(open_left, on_click=lambda: set_open_left(not open_left))
+            v.ToolbarTitle(children=[title])
+            v.Spacer()
+            if right:
+                with v.Btn(icon=True) as btn:
+                    vue.use_event(btn, "click", lambda *_ignore: set_open_right(not open_right))
+                    v.Icon(children=["mdi-settings"])
+        with v.Row():
+            v.Col(cols=12, children=[*children])
+        if right:
+            with v.NavigationDrawer(absolute=True, right=True, width="min-content", v_model=open_right):
+                with v.Btn(icon=True) as btn:
+                    vue.use_event(btn, "click", lambda *_ignore: set_open_right(not open_right))
+                    v.Icon(children=["mdi-settings"])
+                with v.Html(tag="div", children=[right]):
+                    pass
+    return main