solara-ui 1.41.0__py2.py3-none-any.whl → 1.42.0__py2.py3-none-any.whl

solara/__init__.py

@@ -1,6 +1,6 @@
 """Build webapps using IPywidgets"""
 
-__version__ = "1.41.0"
+__version__ = "1.42.0"
 github_url = "https://github.com/widgetti/solara"
 git_branch = "master"
 

solara/__main__.py

@@ -341,7 +341,13 @@ def run(
         reload_excludes = restart_excludes if restart_excludes else []
         del restart_excludes
         reload_excludes = [str(solara_root / "website"), str(solara_root / "template")]
-        reload_excludes.append(app)
+        app_path = Path(app)
+        if app_path.exists():
+            # if app is not a child of the current working directory
+            # uvicorn crashes
+            if not str(app_path.resolve()).startswith(str(Path.cwd().resolve())):
+                reload_excludes.append(str(app_path.resolve()))
+        del app_path
         del solara_root
         reload = True
         # avoid sending many restarts

solara/_stores.py

@@ -0,0 +1,185 @@
+import copy
+import dataclasses
+import inspect
+from typing import Callable, ContextManager, Generic, Optional, Union, cast
+import warnings
+from .toestand import ValueBase, KernelStore, S, _find_outside_solara_frame
+import solara.util
+
+
+class _PublicValueNotSet:
+    pass
+
+
+@dataclasses.dataclass
+class StoreValue(Generic[S]):
+    private: S  # the internal private value, should never be mutated
+    public: Union[S, _PublicValueNotSet]  # this is the value that is exposed in .get(), it is a deep copy of private
+    get_traceback: Optional[inspect.Traceback]
+    set_value: Optional[S]  # the value that was set using .set(..), we deepcopy this to set private
+    set_traceback: Optional[inspect.Traceback]
+
+
+class MutateDetectorStore(ValueBase[S]):
+    def __init__(self, store: KernelStore[StoreValue[S]], equals=solara.util.equals_extra):
+        self._storage = store
+        self._enabled = True
+        super().__init__(equals=equals)
+
+    @property
+    def lock(self):
+        return self._storage.lock
+
+    def get(self) -> S:
+        self.check_mutations()
+        self._ensure_public_exists()
+        value = self._storage.get()
+        # value.public is of type Optional[S], so it's tempting to check for None here,
+        # but S could include None as a valid value, so best we can do is cast
+        public_value = cast(S, value.public)
+        return public_value
+
+    def peek(self) -> S:
+        """Return the value without automatically subscribing to listeners."""
+        self.check_mutations()
+        store_value = self._storage.peek()
+        self._ensure_public_exists()
+        public_value = cast(S, store_value.public)
+        return public_value
+
+    def set(self, value: S):
+        self.check_mutations()
+        self._ensure_public_exists()
+        private = copy.deepcopy(value)
+        self._check_equals(private, value)
+        frame = _find_outside_solara_frame()
+        if frame is not None:
+            frame_info = inspect.getframeinfo(frame)
+        else:
+            frame_info = None
+        store_value = StoreValue(private=private, public=_PublicValueNotSet(), get_traceback=None, set_value=value, set_traceback=frame_info)
+        self._storage.set(store_value)
+
+    def check_mutations(self):
+        self._storage._check_mutation()
+        if not self._enabled:
+            return
+        store_value = self._storage.peek()
+        if not isinstance(store_value.public, _PublicValueNotSet) and not self.equals(store_value.public, store_value.private):
+            tb = store_value.get_traceback
+            # TODO: make the error message as elaborate as below
+            msg = (
+                f"Reactive variable was read when it had the value of {store_value.private!r}, but was later mutated to {store_value.public!r}.\n"
+                "Mutation should not be done on the value of a reactive variable, as in production mode we would be unable to track changes.\n"
+            )
+            if tb:
+                if tb.code_context:
+                    code = tb.code_context[0]
+                else:
+                    code = "<No code context available>"
+                msg += f"The last value was read in the following code:\n" f"{tb.filename}:{tb.lineno}\n" f"{code}"
+            raise ValueError(msg)
+        elif store_value.set_value is not None and not self.equals(store_value.set_value, store_value.private):
+            tb = store_value.set_traceback
+            msg = f"""Reactive variable was set with a value of {store_value.private!r}, but was later mutated mutated to {store_value.set_value!r}.
+
+Mutation should not be done on the value of a reactive variable, as in production mode we would be unable to track changes.
+
+Bad:
+    mylist = reactive([]]
+    some_values = [1, 2, 3]
+    mylist.value = some_values  # you give solara a reference to your list
+    some_values.append(4)  # but later mutate it (solara cannot detect this change, so a render will not be triggered)
+    # if later on a re-render happens for a different reason, you will read of the mutated list.
+
+Good (if you want the reactive variable to be updated):
+    mylist = reactive([]]
+    some_values = [1, 2, 3]
+    mylist.value = some_values
+    mylist.value = some_values + [4]
+
+Good (if you want to keep mutating your own list):
+    mylist = reactive([]]
+    some_values = [1, 2, 3]
+    mylist.value = some_values.copy()  # this gives solara a copy of the list
+    some_values.append(4)  # you are free to mutate your own list, solara will not see this
+
+"""
+            if tb:
+                if tb.code_context:
+                    code = tb.code_context[0]
+                else:
+                    code = "<No code context available>"
+                msg += "The last time the value was set was at:\n" f"{tb.filename}:{tb.lineno}\n" f"{code}"
+            raise ValueError(msg)
+
+    def _ensure_public_exists(self):
+        store_value = self._storage.peek()
+        if isinstance(store_value.public, _PublicValueNotSet):
+            with self.lock:
+                if isinstance(store_value.public, _PublicValueNotSet):
+                    frame = _find_outside_solara_frame()
+                    if frame is not None:
+                        frame_info = inspect.getframeinfo(frame)
+                    else:
+                        frame_info = None
+                    store_value.public = copy.deepcopy(store_value.private)
+                    self._check_equals(store_value.public, store_value.private)
+                    store_value.get_traceback = frame_info
+
+    def _check_equals(self, a: S, b: S):
+        if not self._enabled:
+            return
+        if not self.equals(a, b):
+            frame = _find_outside_solara_frame()
+            if frame is not None:
+                frame_info = inspect.getframeinfo(frame)
+            else:
+                frame_info = None
+
+            warn = """The equals function for this reactive value returned False when comparing a deepcopy to itself.
+
+This reactive variable will not be able to detect mutations correctly, and is therefore disabled.
+
+To avoid this warning, and to ensure that mutation detection works correctly, please provide a better equals function to the reactive variable.
+A good choice for dataframes and numpy arrays might be solara.util.equals_pickle, which will also attempt to compare the pickled values of the objects.
+
+Example:
+df = pd.DataFrame({"a": [1, 2, 3], "b": [4, 5, 6]})
+reactive_df = solara.reactive(df, equals=solara.util.equals_pickle)
+"""
+            tb = frame_info
+            if tb:
+                if tb.code_context:
+                    code = tb.code_context[0]
+                else:
+                    code = "<No code context available>"
+                warn += "This warning was triggered from:\n" f"{tb.filename}:{tb.lineno}\n" f"{code}"
+            warnings.warn(warn)
+            self._enabled = False
+
+    def subscribe(self, listener: Callable[[S], None], scope: Optional[ContextManager] = None):
+        def listener_wrapper(new: StoreValue[S], previous: StoreValue[S]):
+            self._ensure_public_exists()
+            assert new.public is not None
+            assert previous.public is not None
+            previous_value = previous.set_value if previous.set_value is not None else previous.private
+            new_value = new.set_value
+            assert new_value is not None
+            if not self.equals(new_value, previous_value):
+                listener(new_value)
+
+        return self._storage.subscribe_change(listener_wrapper, scope=scope)
+
+    def subscribe_change(self, listener: Callable[[S, S], None], scope: Optional[ContextManager] = None):
+        def listener_wrapper(new: StoreValue[S], previous: StoreValue[S]):
+            self._ensure_public_exists()
+            assert new.public is not None
+            assert previous.public is not None
+            previous_value = previous.set_value if previous.set_value is not None else previous.private
+            new_value = new.set_value
+            assert new_value is not None
+            if not self.equals(new_value, previous_value):
+                listener(new_value, previous_value)
+
+        return self._storage.subscribe_change(listener_wrapper, scope=scope)

solara/components/component_vue.py

@@ -82,6 +82,29 @@ def component_vue(vue_path: str, vuetify=True) -> Callable[[Callable[P, None]],
 
     See the [Vue component example](/documentation/examples/general/vue_component) for an example of how to use this decorator.
 
+
+    ## Examples
+
+    A component that takes a `foo` argument and an `on_foo` callback that gets called when `foo` changes (from the frontend).
+
+    ```python
+    import solara
+
+    @solara.component_vue("my_foo_component.vue")
+    def MyFooComponent(foo: int, on_foo: Callable[[int], None]):
+        pass
+    ```
+
+    The following component only takes in a month argument and an event_date_clicked callback that gets called from
+    the vue template using `this.date_clicked({'extra-data': 42, 'day': this.day})`.
+    ```python
+    import solara
+
+    @solara.component_vue("my_date_component.vue")
+    def MyDateComponent(month: int, event_date_clicked: Callable):
+        pass
+    ```
+
     ## Arguments
 
      * `vue_path`: The path to the Vue template file.

solara/components/echarts.py

@@ -10,7 +10,7 @@ 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)
@@ -49,7 +49,8 @@ def FigureEcharts(
     on_mouseover: Callable[[Any], Any] = None,
     on_mouseout: Callable[[Any], Any] = None,
     maps: dict = {},
-    attributes={"style": "height: 400px"},
+    attributes={"style": "height: 400px;"},
+    responsive: bool = False,
 ):
     """Create a Echarts figure.
 
@@ -68,6 +69,7 @@ def FigureEcharts(
     * 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.
 
 
     """
@@ -80,4 +82,5 @@ def FigureEcharts(
         on_mouseout=on_mouseout,
         on_mouseout_enabled=on_mouseout is not None,
         attributes=attributes,
+        responsive=responsive,
     )

solara/components/echarts.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <div ref="echarts" class="solara-echarts" v-bind="attributes"></div>
-  </div>
+  <div ref="echarts" class="solara-echarts" v-bind="attributes"></div>
 </template>
 <script>
 module.exports = {
@@ -14,6 +12,22 @@ module.exports = {
       this.echarts = echarts;
       this.create();
     })();
+    if(this.responsive){
+      this.resizeObserver = new ResizeObserver(entries => {
+        for (let entry of entries) {
+          if (entry.target === this.$refs.echarts) {
+            this.handleContainerResize();
+          }
+        }
+      });
+      this.resizeObserver.observe(this.$refs.echarts);
+    };
+  },
+  beforeDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.unobserve(this.$refs.echarts);
+      this.resizeObserver.disconnect();
+    }
   },
   watch: {
     option() {
@@ -25,9 +39,7 @@ module.exports = {
   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]);
       });
 
@@ -66,6 +78,11 @@ module.exports = {
         if (this.on_mouseout_enabled) this.on_mouseout(eventData);
       });
     },
+    handleContainerResize() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    },
     import(deps) {
       return this.loadRequire().then(() => {
         if (window.jupyterVue) {

solara/components/file_drop.py

@@ -111,6 +111,26 @@ def FileDrop(
      * `lazy`: Whether to load the file contents into memory or not. If `False`,
         the file contents will be loaded into memory via the `.data` attribute of file object(s).
 
+    ## Load into Pandas
+    To load the data into a Pandas DF, set `lazy=False` and use `file['file_obj']` (be careful of memory)<br>
+    You can run this directly in your Jupyter notebook
+
+    ```python
+    import io
+    import pandas as pd
+    import solara
+
+    @solara.component
+    def Page():
+        def load_file_df(file):
+            df = pd.read_csv(file["file_obj"])
+            print("Loaded dataframe:")
+            print(df)
+
+        solara.FileDrop(label="Drop file to see dataframe!", on_file=load_file_df)
+
+    ```
+
     """
 
     return _FileDrop(label=label, on_total_progress=on_total_progress, on_file=on_file, lazy=lazy, multiple=False)

solara/components/input.py

@@ -49,6 +49,7 @@ def InputText(
     message: Optional[str] = None,
     classes: List[str] = [],
     style: Optional[Union[str, Dict[str, str]]] = None,
+    autofocus: bool = False,
 ):
     """Free form text input.
 
@@ -105,6 +106,7 @@ def InputText(
     * `message`: Message to show below the input. If `error` is a string, this will be ignored.
     * `classes`: List of CSS classes to apply to the input.
     * `style`: CSS style to apply to the input.
+    * `autofocus`: Determines if a component is to be autofocused or not (Default is False). Autofocus will occur during page load and only one component per page can have autofocus active.
     """
     reactive_value = solara.use_reactive(value, on_value)
     del value, on_value
@@ -133,6 +135,7 @@ def InputText(
         messages=messages,
         class_=classes_flat,
         style_=style_flat,
+        autofocus=autofocus,
     )
     use_change(text_field, set_value_cast, enabled=not continuous_update, update_events=update_events)
     return text_field
@@ -150,6 +153,7 @@ def InputFloat(
     clearable: bool = ...,
     classes: List[str] = ...,
     style: Optional[Union[str, Dict[str, str]]] = ...,
+    autofocus: bool = False,
 ) -> reacton.core.ValueElement[vw.TextField, Any]: ...
 
 
@@ -165,6 +169,7 @@ def InputFloat(
     clearable: bool = ...,
     classes: List[str] = ...,
     style: Optional[Union[str, Dict[str, str]]] = ...,
+    autofocus: bool = False,
 ) -> reacton.core.ValueElement[vw.TextField, Any]: ...
 
 
@@ -179,6 +184,7 @@ def InputFloat(
     clearable: bool = False,
     classes: List[str] = [],
     style: Optional[Union[str, Dict[str, str]]] = None,
+    autofocus: bool = False,
 ):
     """Numeric input (floats).
 
@@ -211,6 +217,7 @@ def InputFloat(
     * `clearable`: Whether the input can be cleared.
     * `classes`: List of CSS classes to apply to the input.
     * `style`: CSS style to apply to the input.
+    * `autofocus`: Determines if a component is to be autofocused or not (Default is False). Autofocus will occur either during page load, or when the component becomes visible (for example, dialog being opened). Only one component per page should have autofocus on each such event.
 
     """
 
@@ -237,6 +244,7 @@ def InputFloat(
         clearable=clearable,
         classes=classes,
         style=style,
+        autofocus=autofocus,
     )
 
 
@@ -252,6 +260,7 @@ def InputInt(
     clearable: bool = ...,
     classes: List[str] = ...,
     style: Optional[Union[str, Dict[str, str]]] = ...,
+    autofocus: bool = False,
 ) -> reacton.core.ValueElement[vw.TextField, Any]: ...
 
 
@@ -267,6 +276,7 @@ def InputInt(
     clearable: bool = ...,
     classes: List[str] = ...,
     style: Optional[Union[str, Dict[str, str]]] = ...,
+    autofocus: bool = False,
 ) -> reacton.core.ValueElement[vw.TextField, Any]: ...
 
 
@@ -281,6 +291,7 @@ def InputInt(
     clearable: bool = False,
     classes: List[str] = [],
     style: Optional[Union[str, Dict[str, str]]] = None,
+    autofocus: bool = False,
 ):
     """Numeric input (integers).
 
@@ -312,6 +323,7 @@ def InputInt(
     * `clearable`: Whether the input can be cleared.
     * `classes`: List of CSS classes to apply to the input.
     * `style`: CSS style to apply to the input.
+    * `autofocus`: Determines if a component is to be autofocused or not (Default is False). Autofocus will occur either during page load, or when the component becomes visible (for example, dialog being opened). Only one component per page should have autofocus on each such event.
     """
 
     def str_to_int(value: Optional[str]):
@@ -336,6 +348,7 @@ def InputInt(
         clearable=clearable,
         classes=classes,
         style=style,
+        autofocus=autofocus,
     )
 
 
@@ -389,6 +402,7 @@ def _InputNumeric(
     clearable: bool = False,
     classes: List[str] = [],
     style: Optional[Union[str, Dict[str, str]]] = None,
+    autofocus: bool = False,
 ):
     """Numeric input.
 
@@ -401,6 +415,7 @@ def _InputNumeric(
     * `continuous_update`: Whether to call the `on_value` callback on every change or only when the input loses focus or the enter key is pressed.
     * `classes`: List of CSS classes to apply to the input.
     * `style`: CSS style to apply to the input.
+    * `autofocus`: Determines if a component is to be autofocused or not (Default is False). Autofocus will occur either during page load, or when the component becomes visible (for example, dialog being opened). Only one component per page should have autofocus on each such event.
     """
     style_flat = solara.util._flatten_style(style)
     classes_flat = solara.util._combine_classes(classes)
@@ -431,6 +446,7 @@ def _InputNumeric(
         error=bool(error),
         class_=classes_flat,
         style_=style_flat,
+        autofocus=autofocus,
     )
     use_change(text_field, set_value_cast, enabled=not continuous_update)
     return text_field

solara/components/markdown.py

@@ -1,10 +1,12 @@
+import functools
 import hashlib
 import html
 import logging
 import textwrap
 import traceback
 import warnings
-from typing import Any, Dict, List, Union, cast
+from typing import Any, Dict, List, Optional, Union, cast
+import typing
 
 import ipyvuetify as v
 
@@ -30,6 +32,9 @@ else:
     from pygments.formatters import HtmlFormatter
     from pygments.lexers import get_lexer_by_name
 
+if typing.TYPE_CHECKING:
+    import markdown
+
 logger = logging.getLogger(__name__)
 
 html_no_execute_enabled = "<div><i>Solara execution is not enabled</i></div>"
@@ -231,7 +236,7 @@ module.exports = {
     return template
 
 
-def _highlight(src, language, unsafe_solara_execute, extra, *args, **kwargs):
+def _highlight(src, language, unsafe_solara_execute, *args, **kwargs):
     """Highlight a block of code"""
 
     if not has_pygments:
@@ -258,6 +263,10 @@ def _highlight(src, language, unsafe_solara_execute, extra, *args, **kwargs):
         return src_html
 
 
+def formatter(unsafe_solara_execute: bool):
+    return functools.partial(_highlight, unsafe_solara_execute=unsafe_solara_execute)
+
+
 @solara.component
 def MarkdownIt(md_text: str, highlight: List[int] = [], unsafe_solara_execute: bool = False):
     md_text = textwrap.dedent(md_text)
@@ -293,7 +302,7 @@ def _no_deep_copy_emojione(options, md):
 
 
 @solara.component
-def Markdown(md_text: str, unsafe_solara_execute=False, style: Union[str, Dict, None] = None):
+def Markdown(md_text: str, unsafe_solara_execute=False, style: Union[str, Dict, None] = None, md_parser: Optional["markdown.Markdown"] = None):
     """Renders markdown text
 
     Renders markdown using https://python-markdown.github.io/
@@ -333,6 +342,7 @@ def Markdown(md_text: str, unsafe_solara_execute=False, style: Union[str, Dict,
      * `unsafe_solara_execute`: If True, code marked with language "solara" will be executed. This is potentially unsafe
         if the markdown text can come from user input and should only be used for trusted markdown.
      * `style`: A string or dict of css styles to apply to the rendered markdown.
+     * `md_parser`: A markdown object to use for rendering. If not provided, a markdown object will be created.
 
     """
     import markdown
@@ -341,13 +351,9 @@ def Markdown(md_text: str, unsafe_solara_execute=False, style: Union[str, Dict,
     style = solara.util._flatten_style(style)
 
     def make_markdown_object():
-        def highlight(src, language, *args, **kwargs):
-            try:
-                return _highlight(src, language, unsafe_solara_execute, *args, **kwargs)
-            except Exception as e:
-                logger.exception("Error highlighting code: %s", src)
-                return repr(e)
-
+        if md_parser is not None:
+            # we won't use the use_memo
+            return None
         if has_pymdownx:
             return markdown.Markdown(  # type: ignore
                 extensions=[
@@ -371,7 +377,7 @@ def Markdown(md_text: str, unsafe_solara_execute=False, style: Union[str, Dict,
                             {
                                 "name": "solara",
                                 "class": "",
-                                "format": highlight,
+                                "format": formatter(unsafe_solara_execute),
                             },
                         ],
                     },
@@ -388,8 +394,11 @@ def Markdown(md_text: str, unsafe_solara_execute=False, style: Union[str, Dict,
                 ],
             )
 
-    md = solara.use_memo(make_markdown_object, dependencies=[unsafe_solara_execute])
-    html = md.convert(md_text)
+    md_self = solara.use_memo(make_markdown_object, dependencies=[unsafe_solara_execute])
+    if md_parser is None:
+        assert md_self is not None
+        md_parser = md_self
+    html = md_parser.convert(md_text)
     # if we update the template value, the whole vue tree will rerender (ipvue/ipyvuetify issue)
     # however, using the hash we simply generate a new widget each time
     hash = hashlib.sha256((html + str(unsafe_solara_execute)).encode("utf-8")).hexdigest()

solara/components/spinner-solara.vue

@@ -5,10 +5,10 @@
             xmlns:svgjs="http://svgjs.com/svgjs" :width="size" :height="size" viewBox="0 0 65 65" fill="none">
             <path id="sun-spinner1" style="transform-origin: center;"
                 d="M57.11 30.64L61.47 17.87L48.7 13.51L42.76 1.39999L30.65 7.34999L17.87 2.97999L13.51 15.75L1.40002 21.7L7.35002 33.81L2.99002 46.58L15.76 50.94L21.71 63.06L33.82 57.11L46.59 61.47L50.95 48.7L63.06 42.75L57.11 30.64ZM54.26 34.39L34.39 54.26C33.19 55.46 31.25 55.46 30.05 54.26L10.2 34.4C9.00002 33.2 9.00002 31.26 10.2 30.07L30.06 10.2C31.26 8.99999 33.2 8.99999 34.4 10.2L54.27 30.07C55.47 31.27 55.47 33.21 54.27 34.4L54.26 34.39Z"
-                fill="#FFCF64"></path>
+                :fill="color_back"></path>
             <path id="sun-spinner2" style="transform-origin: center;"
                 d="M53.62 19.42L51.65 6.07L38.3 8.04L27.46 0L19.42 10.84L6.07 12.82L8.04 26.17L0 37L10.84 45.04L12.81 58.39L26.16 56.42L37 64.46L45.04 53.62L58.39 51.64L56.42 38.29L64.46 27.45L53.62 19.4V19.42ZM52.8 24.06L44.24 50.82C43.72 52.43 42 53.32 40.39 52.81L13.63 44.25C12.02 43.74 11.13 42.01 11.64 40.4L20.21 13.64C20.72 12.03 22.45 11.14 24.06 11.65L50.82 20.21C52.43 20.72 53.32 22.45 52.81 24.06H52.8Z"
-                fill="#FF8C3E"></path>
+                :fill="color_front"></path>
         </svg>
     </div>
 </template>

solara/components/spinner.py

@@ -8,12 +8,15 @@ class SpinnerSolaraWidget(ipyvue.VueTemplate):
     template_file = (__file__, "spinner-solara.vue")
 
     size = traitlets.Unicode("64px").tag(sync=True)
+    color_back = traitlets.Unicode("#FFCF64").tag(sync=True)
+    color_front = traitlets.Unicode("#FF8C3E").tag(sync=True)
 
 
 @solara.component
-def SpinnerSolara(size="64px"):
+def SpinnerSolara(size="64px", color_back="#FFCF64", color_front="#FF8C3E"):
     """Spinner component with the Solara logo to indicate the app is busy.
 
+    ## Examples
     ### Basic example
 
     ```solara
@@ -24,7 +27,19 @@ def SpinnerSolara(size="64px"):
         solara.SpinnerSolara(size="100px")
     ```
 
+    ## Changing the colors
+    ```solara
+    import solara
+
+    @solara.component
+    def Page():
+        solara.SpinnerSolara(size="100px", color_back="Grey", color_front="Lime")
+    ```
+
+
     ## Arguments
      * `size`: Size of the spinner.
+     * `color_back`: Color of the spinner in the background.
+     * `color_front`: Color of the spinner in the foreground.
     """
-    return SpinnerSolaraWidget.element(size=size)
+    return SpinnerSolaraWidget.element(size=size, color_back=color_back, color_front=color_front)

solara/hooks/use_reactive.py

@@ -1,4 +1,4 @@
-from typing import Callable, Optional, TypeVar, Union
+from typing import Any, Callable, Optional, TypeVar, Union
 
 import solara
 
@@ -8,6 +8,7 @@ T = TypeVar("T")
 def use_reactive(
     value: Union[T, solara.Reactive[T]],
     on_change: Optional[Callable[[T], None]] = None,
+    equals: Callable[[Any, Any], bool] = solara.util.equals_extra,
 ) -> solara.Reactive[T]:
     """Creates a reactive variable with the a local component scope.
 
@@ -44,6 +45,12 @@ def use_reactive(
      * on_change (Optional[Callable[[T], None]]): An optional callback function
             that will be called when the reactive variable's value changes.
 
+     * equals: A function that returns True if two values are considered equal, and False otherwise.
+            The default function is `solara.util.equals`, which performs a deep comparison of the two values
+            and is more forgiving than the default `==` operator.
+            You can provide a custom function if you need to define a different notion of equality.
+
+
     Returns:
         solara.Reactive[T]: A reactive variable with the specified initial value
             or the provided reactive variable.