fix blinking images (#157)

app/callbacks/display_callbacks.py

@@ -227,6 +227,7 @@ def update_display_data(event_id_on_display, local_alerts):
     [
         Output("image-container", "children"),  # Output for the image
         Output("bbox-container", "children"),  # Output for the bounding box
+        Output("image-slider", "max"),
     ],
     [Input("image-slider", "value"), Input("alert_on_display", "data")],
     [
@@ -259,42 +260,53 @@ def update_image_and_bbox(slider_value, alert_data, media_url, alert_list):
         img_html = html.Img(
             src="https://pyronear.org/img/logo_letters_orange.png", style={"width": "100%", "height": "auto"}
         )
-        return img_html, bbox_divs
+        return img_html, bbox_divs, 0
 
+    # Filter images with non-empty URLs
     images = []
-
-    if str(alert_data["event_id"].values[0]) not in media_url.keys():
-        raise PreventUpdate
-
+    boxes = []
     for _, alert in alert_data.iterrows():
-        images.append(media_url[str(alert["event_id"])][str(alert["media_id"])])
-    boxes = alert_data["processed_loc"].tolist()
-
-    if slider_value < len(images):
-        img_src = images[slider_value]
-        images_bbox_list = boxes[slider_value]
-
-        if len(images_bbox_list):
-            # Calculate the position and size of the bounding box
-            x0, y0, width, height = images_bbox_list[0]  # first box for now
-
-            # Create the bounding box style
-            bbox_style = {
-                "position": "absolute",
-                "left": f"{x0}%",  # Left position based on image width
-                "top": f"{y0}%",  # Top position based on image height
-                "width": f"{width}%",  # Width based on image width
-                "height": f"{height}%",  # Height based on image height
-                "border": "2px solid red",
-                "zIndex": "10",
-            }
+        event_id = str(alert["event_id"])
+        media_id = str(alert["media_id"])
+        if event_id in media_url and media_url[event_id].get(media_id, "").strip():
+            images.append(media_url[event_id][media_id])
+            boxes.append(alert["processed_loc"])
+
+    if not images:
+        img_html = html.Img(
+            src="https://pyronear.org/img/logo_letters_orange.png", style={"width": "100%", "height": "auto"}
+        )
+        return img_html, bbox_divs, 0
+
+    # Ensure slider_value is within the range of available images
+    slider_value = slider_value % len(images)
+    img_src = images[slider_value]
+    images_bbox_list = boxes[slider_value]
+
+    img_src = images[slider_value]
+    images_bbox_list = boxes[slider_value]
+
+    if len(images_bbox_list):
+        # Calculate the position and size of the bounding box
+        x0, y0, width, height = images_bbox_list[0]  # first box for now
+
+        # Create the bounding box style
+        bbox_style = {
+            "position": "absolute",
+            "left": f"{x0}%",  # Left position based on image width
+            "top": f"{y0}%",  # Top position based on image height
+            "width": f"{width}%",  # Width based on image width
+            "height": f"{height}%",  # Height based on image height
+            "border": "2px solid red",
+            "zIndex": "10",
+        }
 
     # Create a div that represents the bounding box
     bbox_div = html.Div(style=bbox_style)
     bbox_divs.append(bbox_div)
 
     img_html = html.Img(src=img_src, style={"width": "100%", "height": "auto"})
-    return img_html, bbox_divs
+    return img_html, bbox_divs, len(images) - 1
 
 
 @app.callback(
@@ -328,25 +340,6 @@ def toggle_bbox_visibility(n_clicks, button_style):
     return bbox_style, button_style
 
 
-@app.callback(
-    Output("image-slider", "max"),
-    [Input("event_id_on_display", "data"), Input("media_url", "data")],
-    prevent_initial_call=True,
-)
-def set_slider_max(event_id_on_display, media_url):
-    """
-    Sets the maximum value for the image slider based on the number of images available for the selected event.
-
-    Parameters:
-    - event_id_on_display (int): Currently displayed event ID.
-    - media_url (dict): Dictionary containing media URLs for alerts.
-
-    Returns:
-    - int: Maximum value for the image slider.
-    """
-    return len(media_url[str(event_id_on_display)]) - 1 if str(event_id_on_display) in media_url.keys() else 0
-
-
 @app.callback(
     Output("auto-move-state", "data"),
     Input("auto-move-button", "n_clicks"),