Added ui elements for cover and clustering. Added async worker function for plot update

Author: lucasimi

app/nicegui_app.py

@@ -1,9 +1,8 @@
 import numpy as np
 import plotly.graph_objs as go
-from nicegui import ui
-from nicegui.events import ValueChangeEventArguments
-from sklearn.cluster import AgglomerativeClustering, KMeans
-from sklearn.datasets import load_digits, make_circles
+from nicegui import run, ui
+from sklearn.cluster import DBSCAN, AgglomerativeClustering, KMeans
+from sklearn.datasets import load_digits
 from sklearn.decomposition import PCA
 from umap import UMAP
 
@@ -42,229 +41,238 @@ def _func(X):
     return _func
 
 
+LENS_IDENTITY = "Identity"
+LENS_PCA = "PCA"
+LENS_UMAP = "UMAP"
+
+COVER_TRIVIAL = "Trivial"
+COVER_CUBICAL = "Cubical"
+COVER_BALL = "Ball"
+COVER_KNN = "KNN"
+
+CLUSTERING_TRIVIAL = "Trivial"
+CLUSTERING_KMEANS = "KMeans"
+CLUSTERING_AGGLOMERATIVE = "Agglomerative"
+CLUSTERING_DBSCAN = "DBSCAN"
+
+
 class App:
 
     def build_lens(self):
-        self.opt_lens_id = "Identity"
-        self.opt_lens_pca = "PCA"
-        self.opt_lens_umap = "UMAP"
-
         self.lens_type = ui.select(
             label="Lens type",
             options=[
-                self.opt_lens_id,
-                self.opt_lens_pca,
-                self.opt_lens_umap,
+                LENS_IDENTITY,
+                LENS_PCA,
+                LENS_UMAP,
             ],
-            value=self.opt_lens_pca,
-            on_change=self.update,
+            value=LENS_PCA,
+            on_change=self.update_handler,
         ).classes("w-full")
         self.pca_n_components = ui.number(
             label="PCA Components",
             min=1,
             max=10,
             value=2,
-            on_change=self.update,
+            on_change=self.update_handler,
         ).classes("w-full")
         self.pca_n_components.bind_visibility_from(
             target_object=self.lens_type,
             target_name="value",
-            value=self.opt_lens_pca,
+            value=LENS_PCA,
         )
         self.umap_n_components = ui.number(
             label="UMAP Components",
             min=1,
             max=10,
             value=2,
-            on_change=self.update,
+            on_change=self.update_handler,
         ).classes("w-full")
         self.umap_n_components.bind_visibility_from(
             target_object=self.lens_type,
             target_name="value",
-            value=self.opt_lens_umap,
+            value=LENS_UMAP,
         )
 
     def build_cover(self):
-        self.opt_cover_trivial = "Trivial"
-        self.opt_cover_cubical = "Cubical"
-        self.opt_cover_ball = "Ball"
-        self.opt_cover_knn = "KNN"
 
         self.cover_type = ui.select(
             label="Cover type",
             options=[
-                self.opt_cover_trivial,
-                self.opt_cover_cubical,
-                self.opt_cover_ball,
-                self.opt_cover_knn,
+                COVER_TRIVIAL,
+                COVER_CUBICAL,
+                COVER_BALL,
+                COVER_KNN,
             ],
-            value=self.opt_cover_cubical,
-            on_change=self.update,
+            value=COVER_CUBICAL,
+            on_change=self.update_handler,
         ).classes("w-full")
-        self.cover_cubical_n = ui.number(
+        self.cover_cubical_n_intervals = ui.number(
             label="Intervals",
             min=1,
-            max=10,
+            max=100,
             value=2,
-            on_change=self.update,
+            on_change=self.update_handler,
         ).classes("w-full")
-        self.cover_cubical_n.bind_visibility_from(
+        self.cover_cubical_n_intervals.bind_visibility_from(
             target_object=self.cover_type,
             target_name="value",
-            value=self.opt_cover_cubical,
+            value=COVER_CUBICAL,
         )
-        self.cover_cubical_overlap = ui.number(
+        self.cover_cubical_overlap_frac = ui.number(
             label="Overlap",
             min=0.0,
             max=1.0,
             value=0.5,
-            on_change=self.update,
+            on_change=self.update_handler,
         ).classes("w-full")
-        self.cover_cubical_overlap.bind_visibility_from(
+        self.cover_cubical_overlap_frac.bind_visibility_from(
             target_object=self.cover_type,
             target_name="value",
-            value=self.opt_cover_cubical,
+            value=COVER_CUBICAL,
         )
         self.cover_ball_radius = ui.number(
             label="Radius",
             min=0.0,
             value=100.0,
-            on_change=self.update,
+            on_change=self.update_handler,
         ).classes("w-full")
         self.cover_ball_radius.bind_visibility_from(
             target_object=self.cover_type,
             target_name="value",
-            value=self.opt_cover_ball,
+            value=COVER_BALL,
         )
-        self.cover_knn_k = ui.number(
+        self.cover_knn_neighbors = ui.number(
             label="Neighbors",
             min=0,
             value=10,
-            on_change=self.update,
+            on_change=self.update_handler,
         ).classes("w-full")
-        self.cover_knn_k.bind_visibility_from(
+        self.cover_knn_neighbors.bind_visibility_from(
             target_object=self.cover_type,
             target_name="value",
-            value=self.opt_cover_knn,
+            value=COVER_KNN,
         )
 
     def build_clustering(self):
-        self.opt_clustering_trivial = "Trivial"
-        self.opt_clustering_kmeans = "KMeans"
-        self.opt_clustering_agg = "Agglomerative"
-        self.opt_clustering_dbscan = "DBSCAN"
-
         self.clustering_type = ui.select(
             label="Clustering type",
             options=[
-                self.opt_clustering_trivial,
-                self.opt_clustering_kmeans,
-                self.opt_clustering_agg,
-                self.opt_clustering_dbscan,
+                CLUSTERING_TRIVIAL,
+                CLUSTERING_KMEANS,
+                CLUSTERING_AGGLOMERATIVE,
+                CLUSTERING_DBSCAN,
             ],
-            value=self.opt_clustering_trivial,
-            on_change=self.update,
+            value=CLUSTERING_TRIVIAL,
+            on_change=self.update_handler,
         ).classes("w-full")
-        self.clustering_kmeans_k = ui.number(
+        self.clustering_kmeans_n_clusters = ui.number(
             label="Clusters",
             min=1,
             value=2,
-            on_change=self.update,
+            on_change=self.update_handler,
         ).classes("w-full")
-        self.clustering_kmeans_k.bind_visibility_from(
+        self.clustering_kmeans_n_clusters.bind_visibility_from(
             target_object=self.clustering_type,
             target_name="value",
-            value=self.opt_clustering_kmeans,
+            value=CLUSTERING_KMEANS,
         )
         self.clustering_dbscan_eps = ui.number(
             label="Eps",
             min=0.0,
             value=0.5,
-            on_change=self.update,
+            on_change=self.update_handler,
         ).classes("w-full")
         self.clustering_dbscan_eps.bind_visibility_from(
             target_object=self.clustering_type,
             target_name="value",
-            value=self.opt_clustering_dbscan,
+            value=CLUSTERING_DBSCAN,
         )
         self.clustering_dbscan_min_samples = ui.number(
             label="Min Samples",
             min=1,
             value=5,
-            on_change=self.update,
+            on_change=self.update_handler,
         ).classes("w-full")
-        self.clustering_dbscan_eps.bind_visibility_from(
+        self.clustering_dbscan_min_samples.bind_visibility_from(
             target_object=self.clustering_type,
             target_name="value",
-            value=self.opt_clustering_dbscan,
+            value=CLUSTERING_DBSCAN,
         )
-        self.clustering_agg_n = ui.number(
+        self.clustering_agglomerative_n_clusters = ui.number(
             label="Clusters",
             min=1,
             value=2,
-            on_change=self.update,
+            on_change=self.update_handler,
         ).classes("w-full")
-        self.clustering_agg_n.bind_visibility_from(
+        self.clustering_agglomerative_n_clusters.bind_visibility_from(
             target_object=self.clustering_type,
             target_name="value",
-            value=self.opt_clustering_agg,
+            value=CLUSTERING_AGGLOMERATIVE,
         )
 
     def build_plot(self):
-        self.plot = ui.plotly(go.Figure())
+        fig = go.Figure()
+        fig.layout.width = None
+        fig.layout.autosize = True
+        self.plot_container = ui.element("div").classes("w-full h-full")
+        with self.plot_container:
+            ui.plotly(go.Figure())
 
     def render_lens(self):
-        print(f"Lens type: {self.lens_type.value}")
-        if self.lens_type.value == self.opt_lens_id:
+        if self.lens_type.value == LENS_IDENTITY:
             return _identity
-        elif self.lens_type.value == self.opt_lens_pca:
+        elif self.lens_type.value == LENS_PCA:
             n = int(self.pca_n_components.value)
             return _pca(n)
-        elif self.lens_type.value == self.opt_lens_umap:
+        elif self.lens_type.value == LENS_UMAP:
             n = int(self.umap_n_components.value)
             return _umap(n)
 
     def render_cover(self):
-        if self.cover_type.value == self.opt_cover_trivial:
+        if self.cover_type.value == COVER_TRIVIAL:
             return TrivialCover()
-        elif self.cover_type.value == self.opt_cover_ball:
-            r = float(self.cover_ball_radius.value)
-            return BallCover(radius=r)
-        elif self.cover_type.value == self.opt_cover_cubical:
-            n = int(self.cover_cubical_n.value)
-            overlap = float(self.cover_cubical_overlap.value)
-            return CubicalCover(n_intervals=n, overlap_frac=overlap)
-        elif self.cover_type.value == self.opt_cover_knn:
-            k = int(self.cover_knn_k.value)
-            return KNNCover(neighbors=k)
+        elif self.cover_type.value == COVER_BALL:
+            radius = float(self.cover_ball_radius.value)
+            return BallCover(radius=radius)
+        elif self.cover_type.value == COVER_CUBICAL:
+            n_intervals = int(self.cover_cubical_n_intervals.value)
+            overlap_frac = float(self.cover_cubical_overlap_frac.value)
+            return CubicalCover(n_intervals=n_intervals, overlap_frac=overlap_frac)
+        elif self.cover_type.value == COVER_KNN:
+            neighbors = int(self.cover_knn_neighbors.value)
+            return KNNCover(neighbors=neighbors)
 
     def render_clustering(self):
-        if self.clustering_type.value == self.opt_clustering_trivial:
+        if self.clustering_type.value == CLUSTERING_TRIVIAL:
             return TrivialClustering()
-        elif self.clustering_type.value == self.opt_clustering_kmeans:
-            k = int(self.clustering_kmeans_k.value)
-            return KMeans(k)
-        elif self.clustering_type.value == self.opt_clustering_dbscan:
+        elif self.clustering_type.value == CLUSTERING_KMEANS:
+            n_clusters = int(self.clustering_kmeans_n_clusters.value)
+            return KMeans(n_clusters)
+        elif self.clustering_type.value == CLUSTERING_DBSCAN:
             eps = float(self.clustering_dbscan_eps.value)
             min_samples = int(self.clustering_dbscan_min_samples.value)
-            return DBSCAN(eps=eps)
+            return DBSCAN(eps=eps, min_samples=min_samples)
+        elif self.clustering_type == CLUSTERING_AGGLOMERATIVE:
+            n_clusters = int(self.clustering_agglomerative_n_clusters.value)
+            return AgglomerativeClustering(n_clusters=n_clusters)
+
+    async def update_handler(self, _=None):
+        await run.io_bound(self.update)
 
     def update(self, _=None):
         X, labels = load_digits(return_X_y=True)
         lens = self.render_lens()
         if lens is None:
-            print("Lens is None")
             return
         y = lens(X)
 
         cover = self.render_cover()
         if cover is None:
-            print("Cover is None")
             return
 
         clustering = self.render_clustering()
         if clustering is None:
-            print("Clustering is None")
             return
 
         mapper_algo = MapperAlgorithm(
@@ -286,24 +294,31 @@ def update(self, _=None):
             height=800,
             node_size=0.5,
         )
-        if mapper_fig.layout.width is not None:
-            mapper_fig.layout.width = None
-        if not mapper_fig.layout.autosize:
-            mapper_fig.layout.autosize = True
+        # if mapper_fig.layout.width is not None:
+        mapper_fig.layout.width = None
+        # if not mapper_fig.layout.autosize:
         mapper_fig.layout.autosize = True
-        self.plot.update_figure(mapper_fig)
-
-    def build(self):
-        with ui.left_drawer().classes("w-[400px]"):
-            self.build_lens()
-            ui.separator()
-            self.build_cover()
-            ui.separator()
-            self.build_clustering()
-        self.build_plot()
+        self.plot_container.clear()
+        with self.plot_container:
+            ui.plotly(mapper_fig)
+
+    def __init__(self):
+        with ui.row().classes("w-full h-full m-0 p-0 gap-0 overflow-hidden"):
+            with ui.column().classes("w-64 h-full overflow-y-auto m-0 p-3 gap-2"):
+                with ui.card().classes("w-full"):
+                    ui.markdown("#### 🔎 Lens")
+                    self.build_lens()
+                with ui.card().classes("w-full"):
+                    ui.markdown("#### 🌐 Cover")
+                    self.build_cover()
+                with ui.card().classes("w-full"):
+                    ui.markdown("#### 🧮 Clustering")
+                    self.build_clustering()
+
+            with ui.column().classes("flex-1 h-full overflow-hidden m-0 p-0"):
+                self.build_plot()
         self.update()
 
 
 app = App()
-app.build()
 ui.run()