Add app

Dockerfile

@@ -0,0 +1,30 @@
+FROM python:3.11
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+
+# Switch to the "user" user
+USER user
+
+# Set home to the user's home directory
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+# Set the working directory to the user's home directory
+WORKDIR $HOME/app
+
+# Try and run pip command after setting the user with `USER user` to avoid permission issues with Python
+RUN pip install --no-cache-dir --upgrade pip
+
+# Copy the current directory contents into the container at $HOME/app setting the owner to the user
+COPY --chown=user . $HOME/app
+
+COPY --chown=user requirements.txt .
+
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user app.py .
+
+COPY --chown=user viewlistener.vue .
+
+ENTRYPOINT ["solara", "run", "app.py", "--host=0.0.0.0", "--port", "7860"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Alonso Silva Allende
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,11 +1,12 @@
 ---
 title: Solara AnyWidget Vega-Altair
-emoji: 📉
+emoji: ⚡
 colorFrom: pink
 colorTo: yellow
 sdk: docker
 pinned: false
 license: mit
+app_port: 7860
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,88 @@
+import solara
+import anywidget
+import traitlets
+from vega_datasets import data
+import altair as alt
+import matplotlib.pyplot as plt
+from matplotlib.figure import Figure
+import pandas as pd
+from typing import List
+from typing_extensions import TypedDict
+
+class ChartWidget(anywidget.AnyWidget):
+    spec = traitlets.Dict().tag(sync=True)
+    selection = traitlets.Dict().tag(sync=True)
+    _esm = """
+    import embed from "https://cdn.jsdelivr.net/npm/vega-embed@6/+esm";
+    async function render({ model, el }) {
+        let spec = model.get("spec");
+        let api = await embed(el, spec);
+        api.view.addSignalListener(spec.params[0].name, (_, update) => {
+            model.set("selection", update);
+            model.save_changes();
+        })
+    }
+    export default { render };
+    """
+
+selected: solara.Reactive[TypedDict] = solara.reactive({'Horsepower': [45, 231], 'Miles_per_Gallon': [8, 47]})
+
+@solara.component_vue("viewlistener.vue")
+def ViewListener(view_data=None, on_view_data=None, children=[], style={}):
+    ...
+
+@solara.component
+def Plot(sub):
+    dpi = 100
+    view_data = solara.use_reactive({"width": 800, "height": 600})
+    width, height = view_data.value["width"], view_data.value["height"]
+    fig = Figure(figsize=(width / dpi, height / dpi), dpi=dpi)
+    ax = fig.subplots()
+    ax.hist(sub["Weight_in_lbs"], edgecolor="#26a269", facecolor ="#57e389")
+    ax.set_xlabel("Weight_in_lbs")
+    ax.set_ylabel("Count of Records")
+    with ViewListener(view_data=view_data.value, on_view_data=view_data.set, style={"width": "100%", "height": "55vh"}):
+        solara.FigureMatplotlib(fig)
+
+counter = solara.reactive(0)
+@solara.component
+def Page():
+    title = "AnyWidget+Solara: Cars dataset"
+    with solara.Head():
+        solara.Title(f"{title}")
+    with solara.AppBar():
+        solara.lab.ThemeToggle(enable_auto=False)
+    with solara.Column(style={"padding":"30px"}):
+        #solara.Markdown("#Anywidget+Solara")
+        df = data.cars()
+        brush = alt.selection_interval()
+        
+        points = alt.Chart(df).mark_point().encode(
+            x = "Horsepower",
+            y = "Miles_per_Gallon",
+            color = alt.condition(brush, "Origin", alt.value("lightgray")),
+            tooltip = ["Horsepower", "Miles_per_Gallon"],
+        ).add_params(
+            brush
+        )
+        bars = alt.Chart(df).mark_bar().encode(
+            y = "Origin",
+            color = "Origin",
+            x = "count(Origin)"
+        ).transform_filter(
+            brush
+        )
+        chart = (points & bars)
+        sub = df
+        with solara.Row():
+            widget = ChartWidget.element(spec=chart.to_dict(), on_selection=selected.set)
+            with solara.Column(style={"margin": "0"}):
+                for field, (lower, upper) in (selected.value).items():
+                    sub = sub[(sub[field]>lower) & (sub[field]<upper)]
+                if not sub.empty:
+                    Plot(sub)
+                    solara.DataFrame(sub, items_per_page=10)
+                    file_object = sub.to_csv(index=False)
+                    with solara.FileDownload(file_object, "cars_subset.csv", mime_type="application/vnd.ms-excel"):
+                        solara.Button("Download selection", icon_name="mdi-cloud-download-outline", color="primary")
+Page()

requirements.txt

@@ -0,0 +1,5 @@
+anywidget==0.9.9
+solara==1.31.0
+altair==5.3.0
+vega-datasets=0.9.0
+matplotlib==3.8.4

viewlistener.vue

@@ -0,0 +1,33 @@
+<template>
+    <div :style="style">
+        <jupyter-widget v-for="child in children" :key="child" :widget="child"></jupyter-widget>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    created() {
+        this.resizeObserver = new ResizeObserver(entries => {
+            this._updateViewData();
+        });
+    },
+    mounted() {
+        this.resizeObserver.observe(this.$el);
+        this._updateViewData();
+    },
+    destroyed() {
+        this.resizeObserver.unobserve(this.$el);
+    },
+    methods: {
+        _updateViewData() {
+            const view_data = {
+                width: this.$el.clientWidth,
+                height: this.$el.clientHeight,
+            };
+            this.view_data = view_data
+        }
+    },
+}
+</script>
+
+<style id="viewlistener"></style>