solara-ui 1.31.0__py2.py3-none-any.whl

solara/components/datatable.py

@@ -0,0 +1,221 @@
+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
+from solara.lab.utils.dataframe import df_type
+
+from .. import CellAction, ColumnAction
+
+
+def _ensure_dict(d):
+    if dataclasses.is_dataclass(d):
+        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 = 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)
+
+    items = []
+    column_data = {}
+    dfs = df[i1:i2]
+
+    if df_type(df) == "pandas":
+        column_data = dfs[columns].to_dict("records")
+    elif df_type(df) == "polars":
+        column_data = dfs[columns].to_dicts()
+    else:
+        column_data = dfs[columns].to_records()
+    for i in range(i2 - i1):
+        item = {"__row__": i + i1}  # special key for the row number
+        for column in columns:
+            item[column] = format(dfs, column, i + i1, column_data[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,21 @@
+import solara
+from solara.alias import rv
+
+
+@solara.component
+def Details(summary="Summary", children=[], expand=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,75 @@
+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)
+
+    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)
+
+    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"},
+):
+    """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).
+
+
+    """
+    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,
+    )

solara/components/echarts.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div ref="echarts" class="solara-echarts" v-bind="attributes"></div>
+  </div>
+</template>
+<script>
+module.exports = {
+  mounted() {
+    const version = "5.4.0";
+    (async () => {
+      const echarts = (
+        await this.import([`${this.getCdn()}/echarts@${version}/dist/echarts.js`])
+      )[0];
+      this.echarts = echarts;
+      this.create();
+    })();
+  },
+  watch: {
+    option() {
+      // notMerge, otherwise we're left with axes etc
+      // see https://echarts.apache.org/en/api.html#echartsInstance.setOption
+      this.chart.setOption(this.option, true);
+    },
+  },
+  methods: {
+    create() {
+      this.chart = this.echarts.init(this.$refs.echarts);
+      console.log(this.maps);
+      Object.keys(this.maps).forEach((mapName) => {
+        console.log(mapName);
+        this.echarts.registerMap(mapName, this.maps[mapName]);
+      });
+
+      this.chart.setOption(this.option, true);
+      const eventProps = [
+        "componentType",
+        "seriesType",
+        "seriesIndex",
+        "seriesName",
+        "name",
+        "dataIndex",
+        "data",
+        "dataType",
+        "value",
+        "color",
+      ];
+      this.chart.on("click", (fullEvent) => {
+        const eventData = {};
+        eventProps.forEach((prop) => {
+          eventData[prop] = fullEvent[prop];
+        });
+        this.on_click(eventData);
+      });
+      this.chart.on("mouseover", (fullEvent) => {
+        const eventData = {};
+        eventProps.forEach((prop) => {
+          eventData[prop] = fullEvent[prop];
+        });
+        if (this.on_mouseover_enabled) this.on_mouseover(eventData);
+      });
+      this.chart.on("mouseout", (fullEvent) => {
+        const eventData = {};
+        eventProps.forEach((prop) => {
+          eventData[prop] = fullEvent[prop];
+        });
+        if (this.on_mouseout_enabled) this.on_mouseout(eventData);
+      });
+    },
+    import(deps) {
+      return this.loadRequire().then(() => {
+        if (window.jupyterVue) {
+          // in jupyterlab, we take Vue from ipyvue/jupyterVue
+          define("vue", [], () => window.jupyterVue.Vue);
+        } else {
+          define("vue", ["jupyter-vue"], (jupyterVue) => jupyterVue.Vue);
+        }
+        return new Promise((resolve, reject) => {
+          requirejs(deps, (...modules) => resolve(modules));
+        });
+      });
+    },
+    loadRequire() {
+      /* Needed in lab */
+      if (window.requirejs) {
+        console.log("require found");
+        return Promise.resolve();
+      }
+      return new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.src = `${this.getCdn()}/requirejs@2.3.6/require.js`;
+        script.onload = resolve;
+        script.onerror = reject;
+        document.head.appendChild(script);
+      });
+    },
+    getBaseUrl() {
+      if (window.solara && window.solara.rootPath !== undefined) {
+        return solara.rootPath + "/";
+      }
+      // if base url is set, we use ./ for relative paths compared to the base url
+      if (document.getElementsByTagName("base").length) {
+        return "./";
+      }
+      const labConfigData = document.getElementById("jupyter-config-data");
+      if (labConfigData) {
+        /* lab and Voila */
+        return JSON.parse(labConfigData.textContent).baseUrl;
+      }
+      let base = document.body.dataset.baseUrl || document.baseURI;
+      if (!base.endsWith("/")) {
+        base += "/";
+      }
+      return base;
+    },
+    getCdn() {
+      return (
+        (typeof solara_cdn !== "undefined" && solara_cdn) ||
+        `${this.getBaseUrl()}_solara/cdn`
+      );
+    },
+  },
+};
+</script>
+
+<style id="solara-markdown-editor">
+.solara-echarts {
+}
+</style>

solara/components/figure_altair.py

@@ -0,0 +1,39 @@
+from typing import Any, Callable
+
+import solara
+import solara.widgets
+
+
+@solara.component
+def FigureAltair(
+    chart,
+    on_click: Callable[[Any], None] = None,
+    on_hover: Callable[[Any], None] = None,
+):
+    """Renders an Altair chart using VegaLite.
+
+    See also [our altair example](/documentation/examples/libraries/altair).
+
+    ## Arguments
+
+    - chart: Altair chart
+    - on_click: Callback function for click events.
+    - on_hover: Callback function for hover events.
+
+    """
+    import altair as alt
+
+    with alt.renderers.enable("mimetype"):
+        bundle = chart._repr_mimebundle_()[0]
+        key4 = "application/vnd.vegalite.v4+json"
+        key5 = "application/vnd.vegalite.v5+json"
+        if key4 not in bundle and key5 not in bundle:
+            raise KeyError(f"{key4} and {key5} not in mimebundle:\n\n{bundle}")
+        spec = bundle.get(key5, bundle.get(key4))
+        return solara.widgets.VegaLite.element(
+            spec=spec, on_click=on_click, listen_to_click=on_click is not None, on_hover=on_hover, listen_to_hover=on_hover is not None
+        )
+
+
+# alias for backward compatibility
+AltairChart = FigureAltair