Merge pull request #147 from mlexchange/overlayShapes

re drawing shapes after relayout event

Author: cleaaum

callbacks/control_bar.py

@@ -457,10 +457,11 @@ def open_delete_class_modal(
     Input({"type": "edit-class-store", "index": ALL}, "data"),
     State({"type": "annotation-class-store", "index": ALL}, "data"),
     State("image-selection-slider", "value"),
+    State("image-viewer", "relayoutData"),
     prevent_initial_call=True,
 )
 def re_draw_annotations_after_editing_class_color(
-    hide_show_click, all_annotation_class_store, image_idx
+    edit_store, all_annotation_class_store, image_idx, relayout
 ):
     """
     After editing a class color, the color is changed in the class-store, but the color change is not reflected
@@ -486,17 +487,13 @@ def re_draw_annotations_after_editing_class_color(
     State({"type": "edit-annotation-class-text-input", "index": MATCH}, "value"),
     State({"type": "edit-annotation-class-colorpicker", "index": MATCH}, "value"),
     State({"type": "annotation-class-store", "index": MATCH}, "data"),
-    State("image-selection-slider", "value"),
     prevent_initial_call=True,
 )
-def edit_annotation_class(
-    edit_clicked, new_label, new_color, annotation_class_store, img_idx
-):
+def edit_annotation_class(edit_clicked, new_label, new_color, annotation_class_store):
     """
     This callback edits the name and color of an annotation class by updating class-store metadata. We also trigger
     edit-class-store so we can then redraw the annotations in re_draw_annotations_after_editing_class_color().
     """
-    img_idx = str(img_idx - 1)
     # update store meta data
     annotation_class_store["label"] = new_label
     annotation_class_store["color"] = new_color
@@ -509,12 +506,12 @@ def edit_annotation_class(
         "border": f"2px solid {new_color}",
     }
     # update color in previous annotation data
-    if img_idx in annotation_class_store["annotations"]:
-        for a in annotation_class_store["annotations"][img_idx]:
-            a["line"]["color"] = new_color
-            if "fillcolor" in a:
-                a["fillcolor"] = new_color
-
+    for img_idx, annots in annotation_class_store["annotations"].items():
+        for annots in annotation_class_store["annotations"][img_idx]:
+            annots["line"]["color"] = new_color
+            if "fillcolor" in annots:
+                annots["fillcolor"] = new_color
+    print(ctx.triggered_id)
     return new_label, class_color_identifier, annotation_class_store, 1, True
 
 

callbacks/image_viewer.py

@@ -324,6 +324,7 @@ def update_viewfinder(relayout_data, annotation_store):
         {"type": "annotation-class-store", "index": ALL}, "data", allow_duplicate=True
     ),
     Output("annotation-store", "data", allow_duplicate=True),
+    Output("image-viewer", "figure", allow_duplicate=True),
     Input("image-viewer", "relayoutData"),
     State("image-selection-slider", "value"),
     State("annotation-store", "data"),
@@ -347,24 +348,23 @@ def locally_store_annotations(
         annotation_store["view"]["xaxis_range_1"] = relayout_data["xaxis.range[1]"]
         annotation_store["view"]["yaxis_range_0"] = relayout_data["yaxis.range[0]"]
         annotation_store["view"]["yaxis_range_1"] = relayout_data["yaxis.range[1]"]
-        return all_annotation_class_store, annotation_store
-    # Case 2: a shape is modified, the relayoutData will have the format "shape[_].path", with the new path (not very useful)
-    # we can instead take all the shapes from the fig layout directly and reset them in the store
+        return all_annotation_class_store, annotation_store, dash.no_update
+    # Case 2: A shape is modified, drawn or deleted. Save all the current shapes on the fig layout, which includes new
+    # modified, and deleted shapes.
     if (
         any(["shapes" in key for key in relayout_data])
         and "shapes" in fig["layout"].keys()
     ):
         shapes = fig["layout"]["shapes"]
-    # Case 3: a new shape is drawn, we have access to all this data directly from the relayoutData under the 'shapes' key
-    elif "shapes" in relayout_data:
-        shapes = relayout_data["shapes"]
-    # Clear all annotation from the stores at the current slice, except for the hidden shapes
+
+    # Clear all annotation from the stores at the current slice,
+    # except for the hidden shapes (hidden shapes cannot be modified or deleted)
     for a_class in all_annotation_class_store:
         if not a_class["is_visible"]:
             continue
         if img_idx in a_class["annotations"]:
             del a_class["annotations"][img_idx]
-    # Add back each annotation on the current slice in each respective store
+    # Add back each annotation on the current slice in each respective store.
     for shape in shapes:
         for a_class in all_annotation_class_store:
             if a_class["color"] == shape["line"]["color"]:
@@ -373,8 +373,16 @@ def locally_store_annotations(
                 else:
                     a_class["annotations"][img_idx] = [shape]
                 break
-
-    return all_annotation_class_store, annotation_store
+    # redraw all annotations on the fig so the store is aligned with whats on the app
+    # ie: drawing with a hidden class hides the shape immediately
+    # ie: drawing with the first class pushes the shape to the back of the image imdediately
+    fig = Patch()
+    all_annotations = []
+    for a in all_annotation_class_store:
+        if a["is_visible"] and "annotations" in a and img_idx in a["annotations"]:
+            all_annotations += a["annotations"][img_idx]
+    fig["layout"]["shapes"] = all_annotations
+    return all_annotation_class_store, annotation_store, fig
 
 
 @callback(

components/annotation_class.py

@@ -61,7 +61,7 @@ def annotation_class_item(class_color, class_label, existing_ids, data=None):
             ),
             dcc.Store(
                 id={"type": "edit-class-store", "index": class_id},
-                data={"is_visible": True},
+                data=False,
             ),
             html.Div(
                 [