Fix opacity sliders to use client-side Plotly.restyle preserving camera and scroll

app.py

@@ -696,7 +696,7 @@ def build_demo() -> gr.Blocks:
                     value=1.0,
                     step=0.05,
                 )
-            toolpath_plot = gr.Plot(label="Tool Path")
+            toolpath_plot = gr.Plot(label="Tool Path", elem_id="toolpath_plot")
             toolpath_status = gr.Markdown("")
             parsed_state = gr.State({})
 
@@ -712,16 +712,36 @@ def build_demo() -> gr.Blocks:
                 outputs=[toolpath_plot, toolpath_status, parsed_state],
             )
             travel_opacity_slider.release(
-                fn=update_toolpath_opacity,
-                inputs=[parsed_state, travel_opacity_slider, print_opacity_slider],
-                outputs=[toolpath_plot],
-                queue=False,
+                fn=None,
+                inputs=[travel_opacity_slider],
+                outputs=[],
+                js="""(opacity_val) => {
+                    const container = document.getElementById("toolpath_plot");
+                    if (!container) return [];
+                    const plotDiv = container.querySelector(".js-plotly-plot");
+                    if (!plotDiv || !plotDiv.data) return [];
+                    const indices = plotDiv.data
+                        .map((t, i) => t.name === "Travel (G0)" ? i : -1)
+                        .filter(i => i >= 0);
+                    if (indices.length > 0) Plotly.restyle(plotDiv, {opacity: opacity_val}, indices);
+                    return [];
+                }"""
             )
             print_opacity_slider.release(
-                fn=update_toolpath_opacity,
-                inputs=[parsed_state, travel_opacity_slider, print_opacity_slider],
-                outputs=[toolpath_plot],
-                queue=False,
+                fn=None,
+                inputs=[print_opacity_slider],
+                outputs=[],
+                js="""(opacity_val) => {
+                    const container = document.getElementById("toolpath_plot");
+                    if (!container) return [];
+                    const plotDiv = container.querySelector(".js-plotly-plot");
+                    if (!plotDiv || !plotDiv.data) return [];
+                    const indices = plotDiv.data
+                        .map((t, i) => t.name === "Print (G1)" ? i : -1)
+                        .filter(i => i >= 0);
+                    if (indices.length > 0) Plotly.restyle(plotDiv, {opacity: opacity_val}, indices);
+                    return [];
+                }"""
             )
 
     return demo