Fix drone map playback with Gradio slider plus tested play controls

README.md

@@ -15,6 +15,6 @@ python_version: 3.11
 
 This private preview maps reported drone sightings from news stories over official covered military and civilian areas.
 
-Use the built-in time slider and play button in the map to watch red dots appear across time, then match the `event_id` on the map to the row data directly below it.
+Use the time slider plus the Play and Pause controls to watch red dots appear across time, then match the `event_id` on the map to the row data directly below it.
 
 Each point is tied to one public event row and a linked source list. This release tracks reported drone sightings and does not prove intent, threat, wrongdoing, or a verified security breach.

dataset_bundle/public_release_manifest.json

@@ -1,7 +1,7 @@
 {
   "public_version": "drone-sightings-slice-2026-04-v1-smoke",
   "title": "Drone Sightings Near Covered U.S. Military and Civilian Areas",
-  "release_date": "2026-04-20T18:04:25.903466+00:00",
+  "release_date": "2026-04-20T18:15:50.018651+00:00",
   "source_run_name": "drone_sightings_smoke_20260420",
   "slice_description": "A small, review-oriented slice of U.S. news-reported drone sightings mapped against official covered-area registries.",
   "source_window": {

public_copy.json

@@ -1,5 +1,5 @@
 {
   "title": "Drone Sightings Near Covered U.S. Military and Civilian Areas",
   "dataset_bundle_prefix": "dataset_bundle",
-  "landing_markdown": "# Drone Sightings Near Covered U.S. Military and Civilian Areas\n\nThis private preview maps reported drone sightings from news stories over official covered military and civilian areas.\n\nUse the built-in time slider and play button in the map to watch red dots appear across time, then match the `event_id` on the map to the row data directly below it.\n\nEach point is tied to one public event row and a linked source list. This release tracks reported drone sightings and does not prove intent, threat, wrongdoing, or a verified security breach."
+  "landing_markdown": "# Drone Sightings Near Covered U.S. Military and Civilian Areas\n\nThis private preview maps reported drone sightings from news stories over official covered military and civilian areas.\n\nUse the time slider plus the Play and Pause controls to watch red dots appear across time, then match the `event_id` on the map to the row data directly below it.\n\nEach point is tied to one public event row and a linked source list. This release tracks reported drone sightings and does not prove intent, threat, wrongdoing, or a verified security breach."
 }

public_space_app.py

@@ -29,6 +29,30 @@ def load_release_data(public_copy_path: Path) -> dict:
     }
 
 
+def _frame_dates(events: pd.DataFrame) -> list[str]:
+    if events.empty:
+        return []
+    return sorted(str(value) for value in events["event_date"].astype(str).unique())
+
+
+def _frame_index(value, max_index: int) -> int:
+    if max_index <= 0:
+        return 0
+    try:
+        numeric = int(float(value))
+    except (TypeError, ValueError):
+        numeric = 0
+    return max(0, min(max_index, numeric))
+
+
+def _visible_events(events: pd.DataFrame, frame_dates: list[str], frame_index: int) -> pd.DataFrame:
+    if events.empty or not frame_dates:
+        return events.iloc[0:0].copy()
+    frame_value = frame_dates[_frame_index(frame_index, len(frame_dates) - 1)]
+    visible = events[events["event_date"].astype(str) <= frame_value].copy()
+    return visible.sort_values(["event_date", "event_id", "headline"], ascending=[True, True, True]).reset_index(drop=True)
+
+
 def _point_table(events: pd.DataFrame) -> pd.DataFrame:
     ordered = events.copy()
     ordered["event_date"] = ordered["event_date"].astype(str)
@@ -52,12 +76,9 @@ def _point_table(events: pd.DataFrame) -> pd.DataFrame:
     ]
 
 
-def _build_map(events: pd.DataFrame):
+def _build_map(events: pd.DataFrame, frame_label: str):
     if events.empty:
         return px.scatter_mapbox(pd.DataFrame({"lat": [], "lon": []}), lat="lat", lon="lon", zoom=3, height=560)
-    frame_values = sorted(str(value) for value in events["event_date"].astype(str).unique())
-    events = events.copy()
-    events["animation_frame"] = events["event_date"].astype(str)
     fig = px.scatter_mapbox(
         events,
         lat="lat",
@@ -76,30 +97,16 @@ def _build_map(events: pd.DataFrame):
             "lon": False,
         },
         custom_data=["event_id"],
-        animation_frame="animation_frame",
         zoom=3,
         height=560,
     )
     fig.update_layout(
         mapbox_style="open-street-map",
         margin={"l": 0, "r": 0, "t": 40, "b": 0},
-        title="Reported drone sightings over time",
+        title=f"Reported drone sightings through {frame_label}",
         showlegend=False,
     )
     fig.update_traces(marker={"size": 12, "opacity": 0.85})
-    if frame_values:
-        fig.update_layout(
-            updatemenus=[
-                {
-                    "type": "buttons",
-                    "showactive": False,
-                    "buttons": [
-                        {"label": "Play", "method": "animate", "args": [None, {"frame": {"duration": 600, "redraw": True}, "fromcurrent": True}]},
-                        {"label": "Pause", "method": "animate", "args": [[None], {"frame": {"duration": 0, "redraw": False}, "mode": "immediate"}]},
-                    ],
-                }
-            ]
-        )
     return fig
 
 
@@ -144,30 +151,149 @@ def _detail_markdown(event_sources: pd.DataFrame, events: pd.DataFrame, event_id
     return "\n".join(lines)
 
 
+def _detail_placeholder(frame_label: str) -> str:
+    return (
+        "Select a row in the point-data table to inspect the exact public data and source URLs used for a plotted point. "
+        f"The map and table currently show all events through `{frame_label}`."
+    )
+
+
+def _frame_payload(events: pd.DataFrame, event_sources: pd.DataFrame, frame_dates: list[str], frame_index: int):
+    if not frame_dates:
+        empty_table = _point_table(events.iloc[0:0].copy())
+        return (
+            _build_map(events.iloc[0:0].copy(), "no data"),
+            empty_table,
+            "No dated events available.",
+            "## Point data",
+            "Time slider unavailable because there are no dated events in this release.",
+            empty_table.to_dict("records"),
+            "No event details available.",
+        )
+    visible = _visible_events(events, frame_dates, frame_index)
+    point_table = _point_table(visible)
+    frame_label = frame_dates[_frame_index(frame_index, len(frame_dates) - 1)]
+    return (
+        _build_map(visible, frame_label),
+        point_table,
+        f"### Showing events through `{frame_label}`",
+        "## Point data",
+        "Every row below is a point currently visible on the map. The `event_id` shown on hover matches the `event_id` in the table and detail panel.",
+        point_table.to_dict("records"),
+        _detail_placeholder(frame_label),
+    )
+
+
 def build_app(public_copy_path: str | Path):
     public_copy_path = Path(public_copy_path)
     payload = json.loads(public_copy_path.read_text(encoding="utf-8"))
     data = load_release_data(public_copy_path)
     events = data["events"]
     event_sources = data["event_sources"]
-    point_table = _point_table(events)
+    frame_dates = _frame_dates(events)
+    max_frame_index = max(0, len(frame_dates) - 1)
 
     with gr.Blocks(title=payload["title"]) as app:
         gr.Markdown(payload["landing_markdown"])
+        date_markdown = gr.Markdown()
         plot = gr.Plot(label="Drone sightings over time")
-        gr.Markdown("## Point data")
-        gr.Markdown("Every row below is one plotted point. The `event_id` shown on hover in the map matches the `event_id` in the table and detail panel.")
+        with gr.Row():
+            play_button = gr.Button("Play")
+            pause_button = gr.Button("Pause")
+        slider = gr.Slider(
+            minimum=0,
+            maximum=max_frame_index,
+            step=1,
+            value=max_frame_index,
+            label="Time slider",
+        )
+        point_heading = gr.Markdown("## Point data")
+        point_caption = gr.Markdown("Every row below is a point currently visible on the map.")
         table = gr.Dataframe(label="Point data used to draw the map", interactive=False)
-        detail = gr.Markdown("Select a row in the point-data table to inspect the exact public data and source URLs used for that plotted point.")
+        table_rows = gr.State([])
+        detail = gr.Markdown("Select a row in the point-data table to inspect the exact public data and source URLs used for a plotted point.")
+        timer = gr.Timer(value=1.0, active=False)
+
+        def _render_frame(frame_value):
+            return _frame_payload(events, event_sources, frame_dates, _frame_index(frame_value, max_frame_index))
+
+        def _start_playback(frame_value):
+            next_index = _frame_index(frame_value, max_frame_index)
+            if next_index >= max_frame_index and frame_dates:
+                next_index = 0
+            plot_value, table_value, date_value, heading_value, caption_value, rows_value, detail_value = _render_frame(next_index)
+            return (
+                gr.Timer(active=True),
+                next_index,
+                plot_value,
+                table_value,
+                date_value,
+                heading_value,
+                caption_value,
+                rows_value,
+                detail_value,
+            )
 
-        def _table_detail(evt: gr.SelectData):
+        def _pause_playback():
+            return gr.Timer(active=False)
+
+        def _advance_frame(frame_value):
+            if not frame_dates:
+                plot_value, table_value, date_value, heading_value, caption_value, rows_value, detail_value = _render_frame(0)
+                return (
+                    gr.Timer(active=False),
+                    0,
+                    plot_value,
+                    table_value,
+                    date_value,
+                    heading_value,
+                    caption_value,
+                    rows_value,
+                    detail_value,
+                )
+            current_index = _frame_index(frame_value, max_frame_index)
+            next_index = min(max_frame_index, current_index + 1)
+            plot_value, table_value, date_value, heading_value, caption_value, rows_value, detail_value = _render_frame(next_index)
+            return (
+                gr.Timer(active=(next_index < max_frame_index)),
+                next_index,
+                plot_value,
+                table_value,
+                date_value,
+                heading_value,
+                caption_value,
+                rows_value,
+                detail_value,
+            )
+
+        def _table_detail(current_rows, evt: gr.SelectData):
             if not evt or evt.index is None:
-                return "Select a row in the point-data table to inspect the exact public data and source URLs used for that plotted point."
+                return "Select a row in the point-data table to inspect the exact public data and source URLs used for a plotted point."
             row_index = evt.index[0] if isinstance(evt.index, (list, tuple)) else evt.index
-            if row_index >= len(point_table):
+            if row_index >= len(current_rows):
                 return "No event details available."
-            return _detail_markdown(event_sources, events, str(point_table.iloc[row_index]["event_id"]))
+            event_id = str(current_rows[row_index]["event_id"])
+            return _detail_markdown(event_sources, events, event_id)
 
-        table.select(_table_detail, outputs=detail)
-        app.load(lambda: (_build_map(events), point_table), outputs=[plot, table])
+        slider.change(
+            _render_frame,
+            inputs=slider,
+            outputs=[plot, table, date_markdown, point_heading, point_caption, table_rows, detail],
+        )
+        play_button.click(
+            _start_playback,
+            inputs=slider,
+            outputs=[timer, slider, plot, table, date_markdown, point_heading, point_caption, table_rows, detail],
+        )
+        pause_button.click(_pause_playback, outputs=timer)
+        timer.tick(
+            _advance_frame,
+            inputs=slider,
+            outputs=[timer, slider, plot, table, date_markdown, point_heading, point_caption, table_rows, detail],
+        )
+        table.select(_table_detail, inputs=table_rows, outputs=detail)
+        app.load(
+            lambda: _render_frame(max_frame_index),
+            outputs=[plot, table, date_markdown, point_heading, point_caption, table_rows, detail],
+        )
     return app