rename volume-id -> scene-id, and clarify example

Author: almarklein

dash_3d_viewer/slicer.py

@@ -14,9 +14,9 @@ class DashVolumeSlicer:
       app (dash.Dash): the Dash application instance.
       volume (ndarray): the 3D numpy array to slice through.
       axis (int): the dimension to slice in. Default 0.
-      volume_id (str): the id to use for the volume. By default this is a
-        hash of ``id(volume)``. Slicers that have the same volume-id show
-        each-other's positions with line indicators.
+      scene_id (str): the scene that this slicer is part of. Slicers
+        that have the same scene-id show each-other's positions with
+        line indicators. By default this is a hash of ``id(volume)``.
 
     This is a placeholder object, not a Dash component. The components
     that make up the slicer can be accessed as attributes:
@@ -29,16 +29,16 @@ class DashVolumeSlicer:
     Each component is given a dict-id with the following keys:
 
     * "context": a unique string id for this slicer instance.
-    * "volume": the volume_id.
+    * "scene": the scene_id.
     * "axis": the int axis.
-    * "name": the name of the component.
+    * "name": the name of the (sub) component.
 
     TODO: iron out these details, list the stores that are public
     """
 
     _global_slicer_counter = 0
 
-    def __init__(self, app, volume, axis=0, volume_id=None):
+    def __init__(self, app, volume, axis=0, scene_id=None):
         if not isinstance(app, Dash):
             raise TypeError("Expect first arg to be a Dash app.")
         self._app = app
@@ -51,14 +51,14 @@ def __init__(self, app, volume, axis=0, volume_id=None):
             raise ValueError("The given axis must be 0, 1, or 2.")
         self._axis = int(axis)
         # Check and store id
-        if volume_id is None:
-            volume_id = hex(id(volume))
-        elif not isinstance(volume_id, str):
-            raise TypeError("volume_id must be a string")
-        self.volume_id = volume_id
+        if scene_id is None:
+            scene_id = "volume_" + hex(id(volume))[2:]
+        elif not isinstance(scene_id, str):
+            raise TypeError("scene_id must be a string")
+        self.scene_id = scene_id
         # Get unique id scoped to this slicer object
         DashVolumeSlicer._global_slicer_counter += 1
-        self.context_id = "slicer" + str(DashVolumeSlicer._global_slicer_counter)
+        self.context_id = "slicer_" + str(DashVolumeSlicer._global_slicer_counter)
 
         # Get the slice size (width, height), and max index
         arr_shape = list(volume.shape)
@@ -136,7 +136,7 @@ def _subid(self, name):
         # todo: is there a penalty for using a dict-id vs a string-id?
         return {
             "context": self.context_id,
-            "volume-id": self.volume_id,
+            "scene": self.scene_id,
             "axis": self._axis,
             "name": name,
         }
@@ -216,7 +216,6 @@ def _create_client_callbacks(self):
             let x0 = 0, y0 = 0, dx = 1, dy = 1;
             //slice_cache[new_index] = undefined;  // todo: disabled cache for now!
             // Maybe we do not need an update
-            console.log(slice_size)
             if (!data) {
                 data = lowres[index];
                 // Scale the image to take the exact same space as the full-res
@@ -287,14 +286,14 @@ def _create_client_callbacks(self):
                 y: y,
                 hoverinfo: 'skip',
                 version: version
-            }
+            };
         }
         """,
             Output(self._subid("_indicators"), "data"),
             [
                 Input(
                     {
-                        "volume-id": self.volume_id,
+                        "scene": self.scene_id,
                         "context": ALL,
                         "name": "index",
                         "axis": axis,

examples/slicer_with_1_plus_2_views.py

@@ -0,0 +1,64 @@
+"""
+An example with two slicers at the same axis, and one on another axis.
+This demonstrates how multiple indicators can be shown per axis.
+
+Sharing the same scene_id is enough for the slicers to show each-others
+position. If the same volume object is given, it works by default,
+because the default scene_id is a hash of the volume object. Specifying
+a scene_id provides slice position indicators even when slicing through
+different volumes.
+"""
+
+import dash
+import dash_html_components as html
+from dash_3d_viewer import DashVolumeSlicer
+import imageio
+
+
+app = dash.Dash(__name__)
+
+vol = imageio.volread("imageio:stent.npz")
+slicer1 = DashVolumeSlicer(app, vol, axis=1, scene_id="myscene")
+slicer2 = DashVolumeSlicer(app, vol, axis=0, scene_id="myscene")
+slicer3 = DashVolumeSlicer(app, vol, axis=0, scene_id="myscene")
+
+app.layout = html.Div(
+    style={
+        "display": "grid",
+        "grid-template-columns": "40% 40%",
+    },
+    children=[
+        html.Div(
+            [
+                html.H1("Coronal"),
+                slicer1.graph,
+                html.Br(),
+                slicer1.slider,
+                *slicer1.stores,
+            ]
+        ),
+        html.Div(
+            [
+                html.H1("Transversal 1"),
+                slicer2.graph,
+                html.Br(),
+                slicer2.slider,
+                *slicer2.stores,
+            ]
+        ),
+        html.Div(),
+        html.Div(
+            [
+                html.H1("Transversal 2"),
+                slicer3.graph,
+                html.Br(),
+                slicer3.slider,
+                *slicer3.stores,
+            ]
+        ),
+    ],
+)
+
+
+if __name__ == "__main__":
+    app.run_server(debug=True)