Enable size variation in 3D scatter plot traces

Added support for varying marker sizes in 3D scatter plots based on a new 'size-vary-switch' input. Updated client-side JavaScript to adjust marker sizes dynamically and refactored callback input/state handling in Python to accommodate the new feature.

Author: rookiepeng

app.py

@@ -174,6 +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("session-id", "data"),
     State("interval-component", "disabled"),
     State("colormap-3d", "value"),

assets/client_side.js

@@ -118,6 +118,7 @@ window.dash_clientside = Object.assign({}, window.dash_clientside, {
       slider_arg,
       stop_clicks,
       decay,
+      enable_size_vary,
       session,
       ispaused,
       colormap,
@@ -201,6 +202,23 @@ window.dash_clientside = Object.assign({}, window.dash_clientside, {
           return [dash_clientside.no_update, remote_trigger + 1];
         }
 
+        // Add size offset to data.fig: offset = length - 1 - i
+        if (data.data && data.data.fig && enable_size_vary) {
+          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
+                );
+              } else {
+                trace.marker.size += offset;
+              }
+            }
+          });
+        }
+
         let allData = [data];
         // Get previous figures if decay > 0
         if (decay > 0) {
@@ -210,6 +228,21 @@ 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) {
+                    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
+                          );
+                        } else {
+                          trace.marker.size += offset;
+                        }
+                      }
+                    });
+                  }
                   allData.push(prevData);
                 }
               } catch (error) {

view_callbacks/scatter_3d_view.py

@@ -339,7 +339,6 @@ def visible_table_change_callback(
             "visible_list": Input("visible-picker", "value"),
             "unused_vistable_trigger": Input("visible-table-change-trigger", "data"),
             "c_key": Input("c-picker-3d", "value"),
-            "size_vary": Input("size-vary-switch", "value"),
             "unused_left_hide_trigger": Input("left-hide-trigger", "data"),
             "unused_right_hide_trigger": Input("right-hide-trigger", "data"),
             "unused_file_loaded": Input("file-loaded-trigger", "data"),
@@ -353,6 +352,7 @@ def visible_table_change_callback(
         },
         state={
             "ispaused": State("interval-component", "disabled"),
+            "size_vary": State("size-vary-switch", "value"),
             "slider_arg": State("slider-frame", "value"),
             "overlay_enable": State("overlay-switch", "value"),
             "decay": State("decay-slider", "value"),