Updated buttons

Author: lucasimi

src/tdamapper/_app.py

@@ -3,7 +3,6 @@
 from dataclasses import asdict, dataclass
 
 import pandas as pd
-import plotly.graph_objects as go
 from nicegui import app, run, ui
 from sklearn.cluster import DBSCAN, AgglomerativeClustering, KMeans
 from sklearn.datasets import load_digits, load_iris
@@ -62,6 +61,7 @@
 CLUSTERING_DBSCAN_MIN_SAMPLES = 5
 CLUSTERING_AGGLOMERATIVE_N_CLUSTERS = 2
 
+PLOT_DIMENSIONS = 2
 PLOT_ITERATIONS = 100
 PLOT_COLORMAP = "Viridis"
 PLOT_NODE_SIZE = 1.0
@@ -86,6 +86,7 @@ class MapperConfig:
     clustering_dbscan_eps: float = CLUSTERING_DBSCAN_EPS
     clustering_dbscan_min_samples: int = CLUSTERING_DBSCAN_MIN_SAMPLES
     clustering_agglomerative_n_clusters: int = CLUSTERING_AGGLOMERATIVE_N_CLUSTERS
+    plot_dimensions: int = PLOT_DIMENSIONS
     plot_iterations: int = PLOT_ITERATIONS
     plot_seed: int = RANDOM_SEED
 
@@ -202,11 +203,12 @@ def run_mapper(df, **kwargs):
 def create_mapper_figure(df_X, df_y, df_target, mapper_graph, **kwargs):
     df_colors = pd.concat([df_target, df_y, df_X], axis=1)
     mapper_config = MapperConfig(**kwargs)
+    plot_dimensions = mapper_config.plot_dimensions
     plot_iterations = mapper_config.plot_iterations
     plot_seed = mapper_config.plot_seed
     mapper_fig = MapperPlot(
         mapper_graph,
-        dim=3,
+        dim=plot_dimensions,
         iterations=plot_iterations,
         seed=plot_seed,
     ).plot_plotly(
@@ -217,20 +219,18 @@ def create_mapper_figure(df_X, df_y, df_target, mapper_graph, **kwargs):
             "Cividis",
             "Jet",
             "Plasma",
-            "Inferno",
-            "Magma",
-            "Turbo",
             "RdBu",
-            "BrBG",
-            "PiYG",
-            "PuOr",
         ],
         height=800,
         node_size=[i * 0.125 * PLOT_NODE_SIZE for i in range(17)],
     )
-    mapper_fig.layout.width = None
-    mapper_fig.layout.height = None
-    mapper_fig.layout.autosize = True
+    mapper_fig.update_layout(
+        width=None,
+        height=None,
+        autosize=True,
+        xaxis=dict(scaleanchor="y"),
+        uirevision="constant",
+    )
     logger.info("Mapper run completed successfully.")
     return mapper_fig
 
@@ -513,6 +513,11 @@ def _init_draw(self):
         self._init_draw_settings()
 
     def _init_draw_settings(self):
+        self.plot_dimensions = ui.select(
+            options=[2, 3],
+            label="Dimensions",
+            value=PLOT_DIMENSIONS,
+        ).classes("w-full")
         self.plot_iterations = ui.number(
             label="Iterations",
             value=PLOT_ITERATIONS,
@@ -531,8 +536,7 @@ def _init_footnotes(self):
 
     def _init_draw_area(self):
         self.plot_container = ui.element("div").classes("w-full h-full")
-        with self.plot_container:
-            self.draw_area = None
+        self.draw_area = None
 
     def get_mapper_config(self):
         return MapperConfig(
@@ -595,6 +599,11 @@ def get_mapper_config(self):
                 if self.clustering_agglomerative_n_clusters.value
                 else CLUSTERING_AGGLOMERATIVE_N_CLUSTERS
             ),
+            plot_dimensions=(
+                int(self.plot_dimensions.value)
+                if self.plot_dimensions.value
+                else PLOT_DIMENSIONS
+            ),
             plot_iterations=(
                 int(self.plot_iterations.value)
                 if self.plot_iterations.value
@@ -697,11 +706,11 @@ async def async_draw_mapper(self):
             **asdict(mapper_config),
         )
 
+        logger.info("Displaying Mapper plot.")
         if self.draw_area is not None:
             self.draw_area.clear()
-        self.plot_container.clear()
+            self.plot_container.clear()
         with self.plot_container:
-            logger.info("Displaying Mapper plot.")
             self.draw_area = ui.plotly(mapper_fig).classes("w-full h-full")
 
         notification.message = "Done!"

src/tdamapper/plot_backends/plot_plotly.py

@@ -33,6 +33,10 @@
 
 _DEFAULT_SPACING = 0.25
 
+FONT_COLOR_LIGHT = "#2a3f5f"
+
+FONT_COLOR_DARK = "#f2f5fa"
+
 DEFAULT_NODE_SIZE = 1
 
 DEFAULT_CMAP = "Jet"
@@ -209,6 +213,7 @@ def __init__(self, mapper_plot, fig: Optional[go.Figure] = None):
         self.ui_menu_cmap: Dict = {}
         self.ui_menu_color: Dict = {}
         self.ui_slider_size: Dict = {}
+        self.ui_menu_dark_mode: Dict = {}
 
     def plot(
         self,
@@ -468,13 +473,15 @@ def _edges_trace(self, edge_pos_arr) -> Union[go.Scatter, go.Scatter3d]:
 
     def _colorbar(self, title: str) -> dict:
         cbar = dict(
+            orientation="v",
             showticklabels=True,
             outlinewidth=1,
             borderwidth=0,
             thicknessmode="fraction",
-            xanchor="left",
             title_side="right",
             title_text=title,
+            xanchor="right",
+            x=1.0,
             ypad=0,
             xpad=0,
             tickwidth=1,
@@ -495,7 +502,6 @@ def _lbl(n):
         return [_lbl(n) for n in self.graph.nodes()]
 
     def _layout(self) -> go.Layout:
-        line_col = "rgba(230, 230, 230, 1.0)"
         axis = dict(
             showline=False,
             linewidth=1,
@@ -513,16 +519,12 @@ def _layout(self) -> go.Layout:
             backgroundcolor="rgba(0, 0, 0, 0)",
             showaxeslabels=False,
             showline=False,
-            linecolor=line_col,
-            zerolinecolor=line_col,
-            gridcolor=line_col,
             linewidth=1,
             mirror=True,
             showticklabels=False,
             title="",
         )
         return go.Layout(
-            template="plotly_white",
             autosize=True,
             height=None,
             width=None,
@@ -536,6 +538,9 @@ def _layout(self) -> go.Layout:
                 yaxis=scene_axis,
                 zaxis=scene_axis,
             ),
+            font_color=FONT_COLOR_LIGHT,
+            paper_bgcolor="white",
+            plot_bgcolor="white",
         )
 
     def set_ui(
@@ -558,19 +563,23 @@ def set_ui(
         if node_sizes is not None:
             self.ui_slider_size = self._ui_slider_node_size(node_sizes)
 
+        self.ui_menu_dark_mode = self.ui_dark_mode()
+
         menus = []
         sliders = []
-        x = 0.0
+
         if self.ui_menu_cmap:
-            self.ui_menu_cmap["x"] = x
-            x += _DEFAULT_SPACING
             menus.append(self.ui_menu_cmap)
         if self.ui_menu_color:
-            self.ui_menu_color["x"] = x
             menus.append(self.ui_menu_color)
+        if self.ui_menu_dark_mode:
+            menus.append(self.ui_menu_dark_mode)
         if self.ui_slider_size:
-            self.ui_slider_size["x"] = 0.0
             sliders.append(self.ui_slider_size)
+
+        # self.fig.layout.updatemenus = [self.ui_menu_dark_mode]
+        # self.fig.layout.sliders = []
+
         self.fig.update_layout(
             updatemenus=menus,
             sliders=sliders,
@@ -607,14 +616,14 @@ def _update_cmap(cmap: str) -> dict:
 
         return dict(
             buttons=buttons,
-            x=0.25,
-            xanchor="left",
+            direction="down",
+            x=0.5,
             y=1.0,
+            xanchor="center",
             yanchor="top",
-            direction="down",
         )
 
-    def _ui_slider_node_size(self, node_sizes: List[float]) -> dict:
+    def _ui_slider_node_size(self, node_sizes: List[float]) -> Dict:
         steps = [
             dict(
                 method="restyle",
@@ -629,16 +638,25 @@ def _ui_slider_node_size(self, node_sizes: List[float]) -> dict:
 
         return dict(
             active=len(steps) // 2,
-            currentvalue={"prefix": "Node size: "},
+            currentvalue=dict(
+                prefix="Node size: ",
+                visible=False,
+                xanchor="center",
+            ),
             steps=steps,
-            x=0.0,
+            x=0.5,
             y=0.0,
-            xanchor="left",
-            len=0.3,
+            xanchor="center",
             yanchor="bottom",
+            len=0.5,
+            lenmode="fraction",
+            ticklen=1,
+            pad=dict(t=1, b=1, l=1, r=1),
+            bgcolor="rgba(1.0, 1.0, 1.0, 0.5)",
+            activebgcolor="rgba(127, 127, 127, 0.5)",
         )
 
-    def _ui_menu_color(self, colors: np.ndarray, titles: List[str], agg) -> dict:
+    def _ui_menu_color(self, colors: np.ndarray, titles: List[str], agg) -> Dict:
         colors_arr = np.array(colors)
         colors_num = colors_arr.shape[1] if colors_arr.ndim == 2 else 1
 
@@ -699,10 +717,45 @@ def _update_colors(i: int) -> dict:
 
         return dict(
             buttons=buttons,
+            direction="down",
             active=0,
-            x=0.0,
-            xanchor="left",
+            x=0.75,
             y=1.0,
+            xanchor="center",
             yanchor="top",
+        )
+
+    def ui_dark_mode(self) -> Dict:
+        buttons = [
+            dict(
+                label="Light",
+                method="relayout",
+                args=[
+                    {
+                        "font.color": FONT_COLOR_LIGHT,
+                        "paper_bgcolor": "white",
+                        "plot_bgcolor": "white",
+                    }
+                ],
+            ),
+            dict(
+                label="Dark",
+                method="relayout",
+                args=[
+                    {
+                        "font.color": FONT_COLOR_DARK,
+                        "paper_bgcolor": "black",
+                        "plot_bgcolor": "black",
+                    }
+                ],
+            ),
+        ]
+        return dict(
+            buttons=buttons,
             direction="down",
+            active=0,
+            x=0.25,
+            y=1.0,
+            xanchor="center",
+            yanchor="top",
         )