solara-ui 1.45.0__py3-none-any.whl

solara/components/datatable.py

@@ -0,0 +1,214 @@
+import dataclasses
+import math
+import os
+from dataclasses import replace
+from typing import Any, Callable, List, Optional, cast
+
+import ipyvuetify as v
+import ipywidgets
+import solara
+import solara.hooks.dataframe
+import solara.lab
+import traitlets
+from solara.lab.hooks.dataframe import use_df_column_names, df_row_names
+from solara.lab.utils.dataframe import df_len, df_records, df_slice
+
+from .. import CellAction, ColumnAction
+
+
+def _ensure_dict(d):
+    if dataclasses.is_dataclass(d) and not isinstance(d, type):  # is_dataclass also returns True for dataclass type, rather than instance
+        return dataclasses.asdict(d)
+    return d
+
+
+def _drop_keys_from_list_of_mappings(drop):
+    def closure(list_of_dicts, widget):
+        return [{k: v for k, v in _ensure_dict(d).items() if k not in drop} for d in list_of_dicts]
+
+    return closure
+
+
+class DataTableWidget(v.VuetifyTemplate):
+    template_file = os.path.realpath(os.path.join(os.path.dirname(__file__), "datatable.vue"))
+
+    total_length = traitlets.CInt().tag(sync=True)
+    checked = traitlets.List(cast(List[Any], [])).tag(sync=True)  # indices of which rows are selected
+    column_actions = traitlets.List(trait=traitlets.Instance(ColumnAction), default_value=[]).tag(
+        sync=True, to_json=_drop_keys_from_list_of_mappings(["on_click"])
+    )
+    _column_actions_callbacks = traitlets.List(trait=traitlets.Callable(), default_value=[])
+    cell_actions = traitlets.List(trait=traitlets.Instance(CellAction), default_value=[]).tag(sync=True, to_json=_drop_keys_from_list_of_mappings(["on_click"]))
+    _cell_actions_callbacks = traitlets.List(trait=traitlets.Callable(), default_value=[])
+    items = traitlets.Any().tag(sync=True)  # the data, a list of dict
+    headers = traitlets.Any().tag(sync=True)
+    headers_selections = traitlets.Any().tag(sync=True)
+    options = traitlets.Any().tag(sync=True)
+    items_per_page = traitlets.CInt(11).tag(sync=True)
+    selections = traitlets.Any([]).tag(sync=True)
+    selection_colors = traitlets.Any([]).tag(sync=True)
+    selection_enabled = traitlets.Bool(True).tag(sync=True)
+    highlighted = traitlets.Int(None, allow_none=True).tag(sync=True)
+    scrollable = traitlets.Bool(False).tag(sync=True)
+
+    # for use with scrollable, when used in the default UI
+    height = traitlets.Unicode(None, allow_none=True).tag(sync=True)
+
+    hidden_components = traitlets.List(cast(List[Any], [])).tag(sync=False)
+    column_header_hover = traitlets.Unicode(allow_none=True).tag(sync=True)
+    column_header_widget = traitlets.Any(allow_none=True).tag(sync=True, **ipywidgets.widget_serialization)
+
+    def vue_on_column_action(self, data):
+        header_value, action_index = data
+        on_click = self._column_actions_callbacks[action_index]
+        if on_click:
+            on_click(header_value)
+
+    def vue_on_cell_action(self, data):
+        row, header_value, action_index = data
+        on_click = self._cell_actions_callbacks[action_index]
+        if on_click:
+            on_click(header_value, row)
+
+
+def format_default(df, column, row_index, value):
+    if isinstance(value, float) and math.isnan(value):
+        return "NaN"
+    return str(value)
+
+
+@solara.component
+def DataTable(
+    df,
+    page=0,
+    items_per_page=20,
+    format=None,
+    column_actions: List[ColumnAction] = [],
+    cell_actions: List[CellAction] = [],
+    scrollable=False,
+    on_column_header_hover: Optional[Callable[[Optional[str]], None]] = None,
+    column_header_info: Optional[solara.Element] = None,
+):
+    total_length = df_len(df)
+    options = {"descending": False, "page": page + 1, "itemsPerPage": items_per_page, "sortBy": [], "totalItems": total_length}
+    options, set_options = solara.use_state(options, key="options")
+    format = format or format_default
+    # frontend does 1 base, we use 0 based
+    page = options["page"] - 1
+    items_per_page = options["itemsPerPage"]
+    i1 = page * items_per_page
+    i2 = min(total_length, (page + 1) * items_per_page)
+
+    columns = use_df_column_names(df)
+    rows = df_row_names(df)
+    items = []
+    dfs = df_slice(df, i1, i2)
+    records = df_records(dfs)
+    for i in range(i2 - i1):
+        item = {"__row__": format(dfs, columns, i + 1, rows[i + i1])}  # special key for the row number
+        for column in columns:
+            item[column] = format(dfs, column, i + i1, records[i][column])
+        items.append(item)
+
+    headers = [{"text": name, "value": name, "sortable": False} for name in columns]
+    column_actions_callbacks = [k.on_click for k in column_actions]
+    cell_actions_callbacks = [k.on_click for k in cell_actions]
+    column_actions = [replace(k, on_click=None) for k in column_actions]
+    cell_actions = [replace(k, on_click=None) for k in cell_actions]
+
+    return DataTableWidget.element(
+        total_length=total_length,
+        items=items,
+        headers=headers,
+        headers_selections=[],
+        options=options,
+        items_per_page=items_per_page,
+        selections=[],
+        selection_colors=[],
+        selection_enabled=False,
+        highlighted=None,
+        scrollable=scrollable,
+        on_options=set_options,
+        column_actions=column_actions,
+        cell_actions=cell_actions,
+        _column_actions_callbacks=column_actions_callbacks,
+        _cell_actions_callbacks=cell_actions_callbacks,
+        on_column_header_hover=on_column_header_hover,
+        column_header_widget=column_header_info,
+    )
+
+
+@solara.component
+def DataFrame(
+    df,
+    items_per_page=20,
+    column_actions: List[ColumnAction] = [],
+    cell_actions: List[CellAction] = [],
+    scrollable=False,
+    on_column_header_hover: Optional[Callable[[Optional[str]], None]] = None,
+    column_header_info: Optional[solara.Element] = None,
+):
+    """Displays a Pandas dataframe in a table.
+
+    Pass in a dataframe as first argument, and optionally how many items per page to display.
+
+    ```solara
+    import solara
+    import pandas as pd
+    import plotly
+
+    df = plotly.data.iris()
+
+    @solara.component
+    def Page():
+        solara.DataFrame(df, items_per_page=5)
+
+    ```
+
+    # Custom column header info
+
+    Use the `column_header_info` argument to display a custom component on the column header when
+    the user hover above it. In this case we display the value counts for the column.
+
+    ```solara
+    import solara
+    import pandas as pd
+    import plotly
+
+    df = plotly.data.iris()
+
+    @solara.component
+    def Page():
+        column_hover, set_column_hover = solara.use_state(None)
+
+        with solara.Column(margin=4) as column_header_info:
+            if column_hover:
+                solara.Text("Value counts for " + column_hover)
+                display(df[column_hover].value_counts())
+            # if no column is hovered above, we provide an empty container
+            # so we always see the triple dot icon on the column header
+
+        solara.DataFrame(df, column_header_info=column_header_info, on_column_header_hover=set_column_hover)
+    ```
+
+
+    ## Arguments
+
+     * `df` - `DataFrame` - a Pandas dataframe.
+     * `items_per_page` - `int` - number of items per page.
+     * `column_actions` - Triggered via clicking on the triple dot icon on the headers (visible when hovering).
+     * `cell_actions` -  Triggered via clicking on the triple dot icon in the cell (visible when hovering).
+     * `on_column_header_hover` - Optional callback when the user hovers over the triple dot icon on a header.
+     * `column_header_info` - Element to display in the column menu popup (visible when hovering), provide an
+            empty container element (like [Column](/documentation/components/layout/column)) to force showing the trigle dot icon (see example).
+
+    """
+    return DataTable(
+        df,
+        items_per_page=items_per_page,
+        column_actions=column_actions,
+        cell_actions=cell_actions,
+        scrollable=scrollable,
+        on_column_header_hover=on_column_header_hover,
+        column_header_info=column_header_info,
+    )

solara/components/datatable.vue

@@ -0,0 +1,175 @@
+<template>
+  <v-slide-x-transition appear>
+    <div class="solara-data-table__viewport">
+      <v-data-table dense hide-default-header :headers="[...headers]" :items="items"
+        :footer-props="{ 'items-per-page-options': [10, 20, 50, 100] }" :options.sync="options"
+        :items_per_page.sync="items_per_page" :server-items-length="total_length" :class="[
+          'elevation-1',
+          'solara-data-table',
+          scrollable && 'solara-data-table--scrollable',
+        ]" :style="scrollable && height != null && `height: ${height}`">
+        <template v-slot:header="props">
+          <thead>
+            <tr>
+              <th style="padding: 0 10px; width: 40px">#</th>
+              <th style="padding: 0 1px; width: 30px" v-if="selection_enabled">
+                <v-btn icon color="primary" text small @click="apply_filter">
+                  <v-icon>filter_list</v-icon>
+                </v-btn>
+              </th>
+              <th style="padding: 0 1px" v-for="(header, index) in headers_selections" :key="header.text">
+                <v-icon style="padding: 0 1px" :key="index" :color="selection_colors[index]">brightness_1</v-icon>
+              </th>
+              <v-slide-x-transition :key="header.text" v-for="header in headers">
+                <th class="text-no-wrap">
+                  {{ header.text }}
+                  <v-menu open-on-hover bottom offset-y @input="isOpen => onHeaderHover({ isOpen, header })"
+                    v-if="(column_actions && column_actions.length) || column_header_widget">
+                    <template v-slot:activator="{ on, attrs }">
+                      <v-icon v-bind="attrs" v-on="on" small class="solara-data-table-menu">mdi-dots-vertical</v-icon>
+                    </template>
+                    <v-sheet v-if="header.value === column_header_hover" class="solara-data-table-column-header-sheet">
+                      <jupyter-widget v-if="column_header_widget" :widget="column_header_widget"></jupyter-widget>
+                    </v-sheet>
+                    <v-list v-if="column_actions && column_actions.length">
+                      <v-subheader>Actions:</v-subheader>
+                      <v-list-item link @click="on_column_action([header.value, index])"
+                        v-for="(action, index) in column_actions" :key="index">
+                        <v-list-item-icon><v-icon>{{ action.icon }}</v-icon></v-list-item-icon>
+                        <v-list-item-title>{{ action.name }}</v-list-item-title>
+                      </v-list-item>
+                    </v-list>
+                  </v-menu>
+                </th>
+              </v-slide-x-transition>
+            </tr>
+          </thead>
+        </template>
+        <template v-slot:item="props">
+          <!-- @click="on_row_clicked(props.item.__row__)" -->
+          <tr :class="{ highlightedRow: props.item.__row__ === highlighted }">
+            <td style="padding: 0 10px" class="text-xs-left">
+              <i>{{ props.item.__row__ }}</i>
+            </td>
+            <td style="padding: 0 1px" class="text-xs-left" v-if="selection_enabled">
+              <v-checkbox hide-details style="margin-top: 0; padding-top: 0"
+                :input-value="checked.indexOf(props.item.__row__) != -1" :key="props.item.__row__"
+                @change="(value) => select({ checked: value, row: props.item.__row__ })" />
+            </td>
+            <td style="padding: 0 1px" :key="header.text" v-for="(header, index) in headers_selections">
+              <v-fade-transition leave-absolute>
+                <v-icon v-if="props.item[header.value]" v-model="props.item[header.value]"
+                  :color="selection_colors[index]">brightness_1</v-icon>
+              </v-fade-transition>
+            </td>
+            <td v-for="header in headers" class="text-truncate text-no-wrap" :key="header.text"
+              :title="props.item[header.value]">
+              <v-slide-x-transition appear>
+                <!-- <span @click="on_item_click([props.item.__row__, header.value])">{{ props.item[header.value] }}</span> -->
+                <span>
+                  {{ props.item[header.value] }}
+                  <v-menu open-on-hover bottom offset-y v-if="cell_actions.length">
+                    <template v-slot:activator="{ on, attrs }">
+                      <v-icon v-bind="attrs" v-on="on" small class="solara-data-table-menu">mdi-dots-vertical</v-icon>
+                    </template>
+                    <v-list v-for="(action, index) in cell_actions" :key="index">
+                      <v-list-item link @click="on_cell_action([props.item.__row__, header.value, index])">
+                        <v-list-item-icon><v-icon>{{ action.icon }}</v-icon></v-list-item-icon>
+                        <v-list-item-title>{{ action.name }}</v-list-item-title>
+                      </v-list-item>
+                    </v-list>
+                  </v-menu>
+                </span>
+
+              </v-slide-x-transition>
+            </td>
+          </tr>
+        </template>
+      </v-data-table>
+    </div>
+  </v-slide-x-transition>
+</template>
+
+<script>
+module.exports = {
+  methods: {
+    onHeaderHover({ header, isOpen }) {
+      if (isOpen) {
+        // if isOpen is true, we clicked, and we set it header.value
+        this.column_header_hover = header.value
+      } else {
+        // if false, we only 'unset' if the current header equals the current open menu
+        // because sometimes the menu from another column is closed after opening the new one
+        if (this.column_header_hover == header.value) {
+          this.column_header_hover = null
+        }
+      }
+    }
+  }
+}
+</script>
+<style id="solara_table">
+.highlightedRow {
+  background-color: #e3f2fd;
+}
+
+.solara-data-table table {
+  table-layout: fixed;
+}
+
+.solara-data-table--scrollable .v-data-table__wrapper {
+  overflow-y: auto;
+  height: calc(100% - 59px);
+}
+
+.solara-data-table--scrollable thead>tr {
+  position: sticky;
+  top: 0;
+}
+
+.solara-data-table--scrollable .v-data-table__wrapper,
+.solara-data-table--scrollable .v-data-table__wrapper>table,
+.solara-data-table--scrollable .v-data-table__wrapper>table thead,
+.solara-data-table--scrollable .v-data-table__wrapper>table thead * {
+  background-color: inherit;
+}
+
+/* prevent checkboxes overlaying the table header */
+.solara-data-table--scrollable .v-data-table__wrapper>table thead {
+  position: relative;
+  z-index: 1;
+}
+
+/* avoid margins to collapse, to avoid a white background */
+.solara-data-table-column-header-sheet {
+  overflow: auto;
+}
+
+.solara-data-table.v-data-table th,
+.solara-data-table.v-data-table td {
+  padding-left: 4px;
+  padding-right: 0;
+}
+
+.v-data-table .solara-data-table-menu {
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+
+.v-data-table th:hover .solara-data-table-menu,
+.v-data-table td:hover .solara-data-table-menu {
+  opacity: 1;
+}
+
+.solara-data-table__viewport {
+  overflow-x: auto;
+  width: 100%;
+  max-height: 100%;
+}
+
+.solara-data-table.v-data-table,
+.solara-data-table.v-data-table table {
+  max-width: unset;
+  width: unset;
+}
+</style>

solara/components/details.py

@@ -0,0 +1,56 @@
+import solara
+from solara.alias import rv
+
+
+@solara.component
+def Details(summary="Summary", children=[], expand=False):
+    """Creates an expandable/collapsible section with a summary and additional children content
+
+    ```solara
+    import solara
+
+
+    show_message = solara.reactive(True)
+    disable = solara.reactive(False)
+
+
+    @solara.component
+    def Page():
+        summary_text = "Click to expand for more details"
+        additional_content = [
+            "Additional detail 1",
+            "Additional detail 2",
+            "Additional detail 3"
+        ]
+
+        solara.Details(
+            summary=summary_text,
+            children=additional_content,
+            expand=False
+        )
+
+    ```
+
+
+    ## Arguments:
+
+    * summary: String showing the summary text for the expandable section: Defaults "Summary"
+    * children: List showing the children content of the expandable section: Defaults to an Empty list
+    * expand: Boolean showing if the section is expanded or collapsed: Defaults to False
+    """
+
+    expand, set_expand = solara.use_state_or_update(expand)
+
+    def on_v_model(v_model):
+        if v_model is None:  # collapsed:
+            set_expand(False)
+        elif v_model == 0:
+            set_expand(True)
+        else:
+            raise RuntimeError(f"v_model has odd value: {v_model}")
+
+    with rv.ExpansionPanels(v_model=0 if expand else None, on_v_model=on_v_model) as main:
+        with rv.ExpansionPanel():
+            rv.ExpansionPanelHeader(children=[summary])
+            rv.ExpansionPanelContent(children=children)
+    return main

solara/components/download.vue

@@ -0,0 +1,35 @@
+<template>
+    <div @click="request_download = true" class="solara-file-download-container">
+        <jupyter-widget v-for="child in children" :key="child" :widget="child"></jupyter-widget>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    watch: {
+        bytes(value) {
+            if (this.request_download) {
+                const a = document.createElement('a');
+                a.download = this.filename;
+                const blob = new Blob([this.bytes], { type: this.mime_type });
+                const blobUrl = window.URL.createObjectURL(blob);
+                a.href = blobUrl;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                setTimeout(() => {
+                    // Make sure we clean up
+                    window.URL.revokeObjectURL(blobUrl);
+                }, 1000);
+                this.request_download = false;
+            }
+        }
+    }
+}
+</script>
+
+<style id="solara-file-download">
+.solara-file-download-container {
+    cursor: pointer;
+}
+</style>

solara/components/echarts.py

@@ -0,0 +1,86 @@
+from typing import Any, Callable
+
+import ipyvuetify
+import traitlets
+
+import solara
+
+
+class EchartsWidget(ipyvuetify.VuetifyTemplate):
+    template_file = (__file__, "echarts.vue")
+
+    attributes = traitlets.Dict(default_value=None, allow_none=True).tag(sync=True)
+    responsive = traitlets.Bool(False).tag(sync=True)
+    maps = traitlets.Any({}).tag(sync=True)
+    option = traitlets.Any({}).tag(sync=True)
+    on_click = traitlets.Callable(None, allow_none=True)
+    on_mouseover = traitlets.Callable(None, allow_none=True)
+    # for performance, so we don't get events from the frontend we don't care about
+    on_mouseover_enabled = traitlets.Bool(False).tag(sync=True)
+    on_mouseout = traitlets.Callable(None, allow_none=True)
+    # same, for performance
+    on_mouseout_enabled = traitlets.Bool(False).tag(sync=True)
+    cdn = traitlets.Unicode(None, allow_none=True).tag(sync=True)
+
+    @traitlets.default("cdn")
+    def _cdn(self):
+        import solara.settings
+
+        if not solara.settings.assets.proxy:
+            return solara.settings.assets.cdn
+
+    def vue_on_click(self, data):
+        if self.on_click is not None:
+            self.on_click(data)
+
+    def vue_on_mouseover(self, data):
+        if self.on_mouseover is not None:
+            self.on_mouseover(data)
+
+    def vue_on_mouseout(self, data):
+        if self.on_mouseout is not None:
+            self.on_mouseout(data)
+
+
+@solara.component
+def FigureEcharts(
+    option: dict = {},
+    on_click: Callable[[Any], Any] = None,
+    on_mouseover: Callable[[Any], Any] = None,
+    on_mouseout: Callable[[Any], Any] = None,
+    maps: dict = {},
+    attributes={"style": "height: 400px;"},
+    responsive: bool = False,
+):
+    """Create a Echarts figure.
+
+    See [The Echarts website for examples](https://echarts.apache.org/)
+
+    Note that we do not support a Python API to create the figure data.
+
+    A library such as Pyecharts can help you with that, otherwise you can provide
+    the data simply as data similarly as on the Echarts example webpage.
+
+    # Arguments
+
+    * option: dict, the option for the figure, see the echart documentation.
+    * on_click: Callable, a function that will be called when the user clicks on the figure.
+    * on_mouseover: Callable, a function that will be called when the user moves the mouse over a certain component.
+    * on_mouseout: Callable, a function that will be called when the user moves the mouse out of a certain component.
+    * maps: dict, a dictionary of maps to be used in the figure.
+    * attributes: dict, a dictionary of attributes to be passed to the container (like style, class).
+    * responsive: bool, whether the chart should resize when the container changes size.
+
+
+    """
+    return EchartsWidget.element(
+        option=option,
+        on_click=on_click,
+        on_mouseover=on_mouseover,
+        on_mouseover_enabled=on_mouseover is not None,
+        maps=maps,
+        on_mouseout=on_mouseout,
+        on_mouseout_enabled=on_mouseout is not None,
+        attributes=attributes,
+        responsive=responsive,
+    )