From f00ced5a3332f1342d89b924a1e7ebb444528d0b Mon Sep 17 00:00:00 2001
From: Blake Blackshear <blakeb@blakeshome.com>
Date: Wed, 29 Nov 2023 23:37:53 +0000
Subject: [PATCH] Show bbox on in_progress events (#8785)

* fix default value in docs

* use default snapshot config for in progress
---
 docs/docs/configuration/index.md |  2 +-
 web/src/routes/Events.jsx        | 32 +++++++++++++++++++-------------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/docs/docs/configuration/index.md b/docs/docs/configuration/index.md
index c022d57c2..86f5174ae 100644
--- a/docs/docs/configuration/index.md
+++ b/docs/docs/configuration/index.md
@@ -408,7 +408,7 @@ snapshots:
   # Optional: print a timestamp on the snapshots (default: shown below)
   timestamp: False
   # Optional: draw bounding box on the snapshots (default: shown below)
-  bounding_box: False
+  bounding_box: True
   # Optional: crop the snapshot (default: shown below)
   crop: False
   # Optional: height to resize the snapshot to (default: original size)
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index dfa6b67bc..2b2b546ef 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -123,12 +123,21 @@ export default function Events({ path, ...props }) {
     [searchParams]
   );
 
-  const { data: ongoingEvents, mutate: refreshOngoingEvents } = useSWR(['events', { in_progress: 1, include_thumbnails: 0 }]);
-  const { data: eventPages, mutate: refreshEvents, size, setSize, isValidating } = useSWRInfinite(getKey, eventsFetcher);
+  const { data: ongoingEvents, mutate: refreshOngoingEvents } = useSWR([
+    'events',
+    { in_progress: 1, include_thumbnails: 0 },
+  ]);
+  const {
+    data: eventPages,
+    mutate: refreshEvents,
+    size,
+    setSize,
+    isValidating,
+  } = useSWRInfinite(getKey, eventsFetcher);
   const mutate = () => {
     refreshEvents();
     refreshOngoingEvents();
-  }
+  };
 
   const { data: allLabels } = useSWR(['labels']);
   const { data: allSubLabels } = useSWR(['sub_labels', { split_joined: 1 }]);
@@ -283,15 +292,12 @@ export default function Events({ path, ...props }) {
     [path, searchParams, setSearchParams]
   );
 
-  const onClickFilterSubmitted = useCallback(
-    () => {
-      if( ++searchParams.is_submitted > 1 ) {
-        searchParams.is_submitted = -1;
-      }
-      onFilter('is_submitted', searchParams.is_submitted);
-    },
-    [searchParams, onFilter]
-  );
+  const onClickFilterSubmitted = useCallback(() => {
+    if (++searchParams.is_submitted > 1) {
+      searchParams.is_submitted = -1;
+    }
+    onFilter('is_submitted', searchParams.is_submitted);
+  }, [searchParams, onFilter]);
 
   const isDone = (eventPages?.[eventPages.length - 1]?.length ?? 0) < API_LIMIT;
 
@@ -918,7 +924,7 @@ function Event({
                     className="flex-grow-0"
                     src={
                       event.has_snapshot
-                        ? `${apiHost}api/events/${event.id}/snapshot.jpg`
+                        ? `${apiHost}api/events/${event.id}/snapshot.jpg?bbox=1`
                         : `${apiHost}api/events/${event.id}/thumbnail.jpg`
                     }
                     alt={`${event.label} at ${((event?.data?.top_score || event.top_score) * 100).toFixed(