upgrade to use solara 1.29

We can now use the pylab interface, so we now use almost the original
notebook.

Polished the UI a bit and added support for dark mode.

pages/00-readme.py

@@ -17,4 +17,6 @@ def Page():
 
 @solara.component
 def Layout(children):
-    solara.AppLayout(children=children)
+    dark_effective = solara.lab.use_dark_effective()
+    # I like a dark toolbar always, just a different color in dark mode
+    return solara.AppLayout(children=children, toolbar_dark=True, color=None if dark_effective else "primary")

pages/01-original-with-widgets.ipynb

@@ -82,11 +82,9 @@
     "            alpha=0.5,\n",
     "        );\n",
     "        disp.ax_.scatter(X[:, 0], X[:, 1], c=y, edgecolor=\"k\");\n",
-    "        # plt.title(f\"{classifier.__class__.__name__}\");\n",
+    "        plt.title(f\"{classifier.__class__.__name__}\");\n",
     "        disp.ax_.set_title(f\"{classifier.__class__.__name__}\");\n",
-    "        # plt.show();\n",
-    "        import solara\n",
-    "        solara.display(solara.FigureMatplotlib(fig))\n",
+    "        plt.show();\n",
     "widget.observe(on_change, names=[\"data\"])\n",
     "on_change(None)\n",
     "page = ipywidgets.HBox([widget, output])\n",

pages/02-fancy-with-solara.py

@@ -19,7 +19,9 @@ import pandas as pd
 from drawdata import ScatterWidget
 
 drawdata: solara.Reactive[List[Dict]] = solara.reactive([])
-
+# we keep the active tab in a reactive var so the state does not get lost when we change
+# the orientation of the page (vertical or horizontal)
+tab = solara.reactive(0)
 
 @solara.component
 def ClassifierDraw(classifier, X, y, response_method="predict_proba", figsize=(8, 8)):
@@ -83,12 +85,13 @@ def Page():
         # TODO: doesn't work, ScatterWidget does not update when data is updated (read only?)
         # solara.Button(icon_name="mdi-delete", on_click=lambda: drawdata.set([]), icon=True)
         # demo how solara can dynamically change the layout
+        solara.lab.ThemeToggle(enable_auto=False)
         solara.Button(icon_name="mdi-align-vertical-top" if vertical.value else "mdi-align-horizontal-left", on_click=lambda: vertical.set(not vertical.value), icon=True)
 
-    # if solara.lab.theme.dark_effective:
-    #     plt.style.use('dark_background')
-    # else:
-    #     plt.style.use('default')
+    dark_background = solara.lab.use_dark_effective()
+    plt.style.use('dark_background' if dark_background else 'default')
+
+
     with solara.Column() if vertical.value else solara.Row():
         # with solara, we don't just create the widget, but an element that describes it
         # and instead of observe, we have on_<trait> callbacks
@@ -97,23 +100,25 @@ def Page():
         ScatterWidget.element(data=drawdata.value, on_data=drawdata.set)
         # downside of using elements and components: we cannot call method on the widget
         # so we need to re-create the dataframe ourselves
-        with solara.lab.Tabs():
+        with solara.lab.Tabs(value=tab):
             with solara.lab.Tab("classifier"):
-                if df is not None and (df["color"].nunique() > 1):
-                    with solara.Column(style={"max-height": "500px", "padding-top": "0px"}):
-                        with solara.lab.Tabs():
-                            with solara.lab.Tab("DecisionTreeClassifier"):
-                                DecisionTreeClassifierDraw(df)
-                            with solara.lab.Tab("LogisticRegressionDraw"):
-                                LogisticRegressionDraw(df)
-                else:
-                    with solara.Column(style={"justify-content": "center"}) if not vertical.value else solara.Row():
-                        solara.Info("Choose at least two colors to draw a decision boundary.")
+                with solara.Column(classes=["py-4"]):  # some nice y padding
+                    if df is not None and (df["color"].nunique() > 1):
+                        with solara.Column(style={"max-height": "500px", "padding-top": "0px"}):
+                            with solara.lab.Tabs():
+                                with solara.lab.Tab("DecisionTreeClassifier"):
+                                    DecisionTreeClassifierDraw(df)
+                                with solara.lab.Tab("LogisticRegressionDraw"):
+                                    LogisticRegressionDraw(df)
+                    else:
+                        with solara.Column(style={"justify-content": "center"}) if not vertical.value else solara.Row():
+                            solara.Info("Choose at least two colors to draw a decision boundary.")
             with solara.lab.Tab("table view"):
-                if df is not None:
-                    with solara.FileDownload(data=lambda: df.to_csv(), filename="drawdata.csv"):
-                        solara.Button("download as csv", icon_name="mdi-download", outlined=True, color="primary")
-                    solara.DataFrame(df)
+                with solara.Column(classes=["py-4"]):  # some nice y padding
+                    if df is not None:
+                        with solara.FileDownload(data=lambda: df.to_csv(), filename="drawdata.csv"):
+                            solara.Button("download as csv", icon_name="mdi-download", outlined=True, color="primary")
+                        solara.DataFrame(df)
 
 
 # in the notebook:

requirements.txt

@@ -1,4 +1,4 @@
-solara==1.28
+solara==1.29
 drawdata==0.3.0
 matplotlib
 scikit-learn