Add toggle for 3D scatter plot marker size variation

Introduces a new callback to handle toggling marker size variation in the 3D scatter plot based on the 'size-vary-switch' state. Updates client-side logic to check for non-empty size variation state and standardizes marker size offset calculation. Refactors related callbacks to remove redundant 'size_vary' state and ensure consistent behavior.

Author: zpeng

app.py

@@ -174,7 +174,7 @@ def get_data_by_index(session: str, start_index: str) -> Response:
     Input("slider-frame", "value"),
     Input("stop-button", "n_clicks"),
     Input("decay-slider", "value"),
-    Input("size-vary-switch", "value"),
+    State("size-vary-switch", "value"),
     State("session-id", "data"),
     State("interval-component", "disabled"),
     State("colormap-3d", "value"),

assets/client_side.js

@@ -203,17 +203,17 @@ window.dash_clientside = Object.assign({}, window.dash_clientside, {
         }
 
         // Add size offset to data.fig: offset = length - 1 - i
-        if (data.data && data.data.fig && enable_size_vary) {
+        if (data.data && data.data.fig && enable_size_vary && enable_size_vary.length > 0) {
           data.data.fig.forEach((trace, idx) => {
             if (trace?.marker?.size) {
               const figLength = data.data.fig.length;
               const offset = figLength - 1 - idx;
               if (Array.isArray(trace.marker.size)) {
                 trace.marker.size = trace.marker.size.map(
-                  (size) => size + offset
+                  (size) => 3 + offset
                 );
               } else {
-                trace.marker.size += offset;
+                trace.marker.size = 3 + offset;
               }
             }
           });
@@ -228,17 +228,17 @@ window.dash_clientside = Object.assign({}, window.dash_clientside, {
               try {
                 const prevData = await getDataWithRetry(prevIndex);
                 if (prevData) {
-                  if (prevData.data && prevData.data.fig && enable_size_vary) {
+                  if (prevData.data && prevData.data.fig && enable_size_vary && enable_size_vary.length > 0) {
                     prevData.data.fig.forEach((trace, idx) => {
                       if (trace?.marker?.size) {
                         const figLength = prevData.data.fig.length;
                         const offset = figLength - 1 - idx;
                         if (Array.isArray(trace.marker.size)) {
                           trace.marker.size = trace.marker.size.map(
-                            (size) => size + offset
+                            (size) => 3 + offset
                           );
                         } else {
-                          trace.marker.size += offset;
+                          trace.marker.size = 3 + offset;
                         }
                       }
                     });

view_callbacks/scatter_3d_view.py

@@ -277,6 +277,52 @@ def darkmode_change_callback(darkmode: list, fig: dict) -> dict:
 
         return {"scatter3d": fig}
 
+    @app.callback(
+        output={
+            "scatter3d": Output("scatter3d", "figure", allow_duplicate=True),
+        },
+        inputs={
+            "size_vary": Input("size-vary-switch", "value"),
+        },
+        state={
+            "fig": State("scatter3d", "figure"),
+            "session_id": State("session-id", "data"),
+            "c_key": State("c-picker-3d", "value"),
+        },
+        prevent_initial_call=True,
+    )
+    def size_vary_callback(size_vary: list, fig: dict, session_id: str, c_key: str) -> dict:
+        """
+        Toggle size variation for the 3D scatter plot.
+
+        Args:
+            size_vary (list): Size variation enable state
+            fig (dict): Current figure dictionary
+
+        Returns:
+            dict: Updated figure with new theme
+        """
+
+        config = cache_get(session_id, CACHE_KEYS["config"])
+        keys_dict = config["keys"]
+
+        ctype = keys_dict[c_key].get("type", KEY_TYPES["NUM"])
+
+        if config.get("x_ref", None) is not None and config.get("y_ref", None) is not None:
+            data_length = len(fig["data"]) - 1
+        else:
+            data_length = len(fig["data"])
+
+        if size_vary and ctype == KEY_TYPES["CAT"]:
+            for i in range(0, data_length):
+                size_offset = data_length - 1 - i
+                fig["data"][i]["marker"]["size"] = 3 + size_offset
+        else:
+            for i in range(0, data_length):
+                fig["data"][i]["marker"]["size"] = 3
+
+        return {"scatter3d": fig}
+
     @app.callback(
         output={
             "trigger": Output("visible-table-change-trigger", "data"),
@@ -502,7 +548,6 @@ def regenerate_figure_callback(
             "num_values": State({"type": "filter-slider", "index": ALL}, "value"),
             "visible_list": State("visible-picker", "value"),
             "c_key": State("c-picker-3d", "value"),
-            "size_vary": State("size-vary-switch", "value"),
             "session_id": State("session-id", "data"),
             "file": State("current-file", "data"),
             "file_list": State("file-add", "value"),
@@ -522,7 +567,6 @@ def regenerate_figure_background_callback(
         num_values: list,
         visible_list: list,
         c_key: str,
-        size_vary: str,
         session_id: str,
         file: str,
         file_list: list,
@@ -581,7 +625,7 @@ def regenerate_figure_background_callback(
             config,
             frame_list,
             c_key,
-            bool(size_vary),
+            False,
             num_keys,
             num_values,
         )