Enable navigating by clicking (#21)

* Enable moving a slicer by clicking in another

* update examples and add docs

* dont update if not needed

* deploy example with 3 views

* requirements

* implement with panning too

* remove ability to control other slicers indices by panning

Co-authored-by: Emmanuelle Gouillart <[email protected]>

Author: almarklein

Procfile

@@ -1 +1 @@
-web: gunicorn examples.threshold_overlay:server
+web: gunicorn examples.slicer_with_3_views:server

dash_slicer/slicer.py

@@ -38,6 +38,15 @@ class VolumeSlicer:
       style ``display: none``.
     * ``stores``: a list of dcc.Store objects.
 
+    To programatically set the position of the slicer, use a store with
+    a dictionary-id with the following fields:
+
+    * 'context': a unique name for this store.
+    * 'scene': the scene_id for which to set the position
+    * 'name': 'setpos'
+
+    The value in the store must be an 3-element tuple (x, y, z) in scene coordinates.
+    To apply the position for one position only, use e.g ``(None, None, x)``.
     """
 
     _global_slicer_counter = 0
@@ -72,6 +81,9 @@ def __init__(
             raise ValueError("The given axis must be 0, 1, or 2.")
         self._axis = int(axis)
         self._reverse_y = bool(reverse_y)
+        # Select the *other* axii
+        self._other_axii = [0, 1, 2]
+        self._other_axii.pop(self._axis)
 
         # Check and store scene id, and generate
         if scene_id is None:
@@ -192,19 +204,21 @@ def create_overlay_data(self, mask, color=(0, 255, 255, 100)):
 
         return overlay_slices
 
-    def _subid(self, name, use_dict=False):
+    def _subid(self, name, use_dict=False, **kwargs):
         """Given a name, get the full id including the context id prefix."""
         if use_dict:
             # A dict-id is nice to query objects with pattern matching callbacks,
             # and we use that to show the position of other sliders. But it makes
             # the id's very long, which is annoying e.g. in the callback graph.
-            return {
+            d = {
                 "context": self._context_id,
                 "scene": self._scene_id,
-                "axis": self._axis,
                 "name": name,
             }
+            d.update(kwargs)
+            return d
         else:
+            assert not kwargs
             return self._context_id + "-" + name
 
     def _slice(self, index):
@@ -230,7 +244,8 @@ def _create_dash_components(self):
         self._fig = fig = Figure(data=[])
         fig.update_layout(
             template=None,
-            margin=dict(l=0, r=0, b=0, t=0, pad=4),
+            margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+            dragmode="pan",  # good default mode
         )
         fig.update_xaxes(
             showgrid=False,
@@ -265,7 +280,10 @@ def _create_dash_components(self):
 
         # Create the stores that we need (these must be present in the layout)
         self._info = Store(id=self._subid("info"), data=info)
-        self._position = Store(id=self._subid("position", True), data=0)
+        self._position = Store(
+            id=self._subid("position", True, axis=self._axis), data=0
+        )
+        self._setpos = Store(id=self._subid("setpos", True), data=None)
         self._requested_index = Store(id=self._subid("req-index"), data=0)
         self._request_data = Store(id=self._subid("req-data"), data="")
         self._lowres_data = Store(id=self._subid("lowres"), data=thumbnails)
@@ -275,6 +293,7 @@ def _create_dash_components(self):
         self._stores = [
             self._info,
             self._position,
+            self._setpos,
             self._requested_index,
             self._request_data,
             self._lowres_data,
@@ -299,6 +318,58 @@ def _create_client_callbacks(self):
         """Create the callbacks that run client-side."""
         app = self._app
 
+        # ----------------------------------------------------------------------
+        # Callback to trigger fellow slicers to go to a specific position.
+
+        app.clientside_callback(
+            """
+        function trigger_setpos(data, index, info) {
+            if (data && data.points && data.points.length) {
+                let point = data["points"][0];
+                let xyz = [point["x"], point["y"]];
+                let depth = info.origin[2] + index * info.spacing[2];
+                xyz.splice(2 - info.axis, 0, depth);
+                return xyz;
+            }
+            return dash_clientside.no_update;
+        }
+        """,
+            Output(self._setpos.id, "data"),
+            [Input(self._graph.id, "clickData")],
+            [State(self._slider.id, "value"), State(self._info.id, "data")],
+        )
+
+        # ----------------------------------------------------------------------
+        # Callback to update index from external setpos signal.
+
+        app.clientside_callback(
+            """
+        function respond_to_setpos(positions, cur_index, info) {
+            for (let trigger of dash_clientside.callback_context.triggered) {
+                if (!trigger.value) continue;
+                let pos = trigger.value[2 - info.axis];
+                if (typeof pos !== 'number') continue;
+                let index = Math.round((pos - info.origin[2]) / info.spacing[2]);
+                if (index == cur_index) continue;
+                return Math.max(0, Math.min(info.size[2] - 1, index));
+            }
+            return dash_clientside.no_update;
+        }
+        """,
+            Output(self._slider.id, "value"),
+            [
+                Input(
+                    {
+                        "scene": self._scene_id,
+                        "context": ALL,
+                        "name": "setpos",
+                    },
+                    "data",
+                )
+            ],
+            [State(self._slider.id, "value"), State(self._info.id, "data")],
+        )
+
         # ----------------------------------------------------------------------
         # Callback to update position (in scene coordinates) from the index.
 
@@ -309,7 +380,7 @@ def _create_client_callbacks(self):
         }
         """,
             Output(self._position.id, "data"),
-            [Input(self.slider.id, "value")],
+            [Input(self._slider.id, "value")],
             [State(self._info.id, "data")],
         )
 
@@ -331,7 +402,7 @@ def _create_client_callbacks(self):
             if (slice_cache[index]) {
                 return window.dash_clientside.no_update;
             } else {
-                console.log('request slice ' + index);
+                console.log('requesting slice ' + index);
                 return index;
             }
         }
@@ -416,10 +487,6 @@ def _create_client_callbacks(self):
         # ----------------------------------------------------------------------
         # Callback to create scatter traces from the positions of other slicers.
 
-        # Select the *other* axii
-        axii = [0, 1, 2]
-        axii.pop(self._axis)
-
         # Create a callback to create a trace representing all slice-indices that:
         # * corresponding to the same volume data
         # * match any of the selected axii
@@ -464,7 +531,7 @@ def _create_client_callbacks(self):
                     },
                     "data",
                 )
-                for axis in axii
+                for axis in self._other_axii
             ],
             [
                 State(self._info.id, "data"),
@@ -488,6 +555,7 @@ def _create_client_callbacks(self):
             console.log("updating figure");
             let figure = {...ori_figure};
             figure.data = traces;
+
             return figure;
         }
         """,

examples/bring_your_own_slider.py

@@ -1,7 +1,9 @@
 """
 Bring your own slider ... or dropdown. This example shows how to use a
-different input element for the slice index. The slider's value is used
-as an output, but the slider element itself is hidden.
+different input element for the slice position. A store is created with
+certain predefined elements. The value set to this store is an xyz
+position in scene coordinates. None can be used to ignore certain
+dimensions. The slider element itself is hidden.
 """
 
 import dash
@@ -17,6 +19,10 @@
 vol = imageio.volread("imageio:stent.npz")
 slicer = VolumeSlicer(app, vol)
 
+setpos_store = dcc.Store(
+    id={"context": "app", "scene": slicer.scene_id, "name": "setpos"}
+)
+
 dropdown = dcc.Dropdown(
     id="dropdown",
     options=[{"label": f"slice {i}", "value": i} for i in range(0, vol.shape[0], 10)],
@@ -30,17 +36,18 @@
         slicer.graph,
         dropdown,
         html.Div(slicer.slider, style={"display": "none"}),
+        setpos_store,
         *slicer.stores,
     ]
 )
 
 
 @app.callback(
-    Output(slicer.slider.id, "value"),
+    Output(setpos_store.id, "data"),
     [Input(dropdown.id, "value")],
 )
 def handle_dropdown_input(index):
-    return index
+    return None, None, index  # xyz in scene coords
 
 
 if __name__ == "__main__":

examples/slicer_customized.py

@@ -5,6 +5,7 @@
 
 import dash
 import dash_html_components as html
+import dash_core_components as dcc
 from dash.dependencies import Input, Output, State
 from dash_slicer import VolumeSlicer
 import imageio
@@ -17,7 +18,7 @@
 
 
 # We can access the components, and modify them
-slicer.slider.value = 0
+slicer.slider.value = 10
 
 # The graph can be configured
 slicer.graph.config.update({"modeBarButtonsToAdd": ["drawclosedpath", "eraseshape"]})
@@ -27,6 +28,10 @@
 slicer.graph.figure.update_xaxes(showgrid=True, showticklabels=True)
 slicer.graph.figure.update_yaxes(showgrid=True, showticklabels=True)
 
+setpos_store = dcc.Store(
+    id={"context": "app", "scene": slicer.scene_id, "name": "setpos"}
+)
+
 
 # Define the layout, including extra buttons
 app.layout = html.Div(
@@ -42,6 +47,7 @@
                 html.Button(">", id="increase-index"),
             ],
         ),
+        setpos_store,
         *slicer.stores,
     ]
 )
@@ -58,15 +64,15 @@ def show_slider_value(index):
 
 
 @app.callback(
-    Output(slicer.slider.id, "value"),
+    Output(setpos_store.id, "data"),
     [Input("decrease-index", "n_clicks"), Input("increase-index", "n_clicks")],
     [State(slicer.slider.id, "value")],
 )
 def handle_button_input(press1, press2, index):
     ctx = dash.callback_context
     if ctx.triggered:
         index += 1 if "increase" in ctx.triggered[0]["prop_id"] else -1
-    return index
+    return None, None, index  # xyz in scene coords
 
 
 if __name__ == "__main__":

examples/slicer_with_1_plus_2_views.py

@@ -25,7 +25,7 @@
 
 vol2 = vol1[::3, ::2, :]
 spacing = 3, 2, 1
-ori = 110, 120, 140
+ori = 1000, 2000, 3000
 
 
 slicer1 = VolumeSlicer(

examples/slicer_with_3_views.py

@@ -12,6 +12,7 @@
 import imageio
 
 app = dash.Dash(__name__)
+server = app.server
 
 # Read volumes and create slicer objects
 vol = imageio.volread("imageio:stent.npz")

test_deploy/requirements.txt

@@ -5,3 +5,4 @@ dash
 dash_core_components
 imageio
 gunicorn
+scikit-image