refactor: unify debug logs in webui

add logging to Selector

webui/src/components/display/blobs/AudioViewer.svelte

@@ -12,6 +12,8 @@
   import Spinner from "../../utils/Spinner.svelte";
   import { i18n } from "../../../i18n";
   import { ATTR_LABEL } from "upend/constants";
+  import debug from "debug";
+  const dbg = debug("kestrel:AudioViewer");
 
   export let address: string;
   export let detail: boolean;
@@ -168,14 +170,14 @@
     });
 
     wavesurfer.on("ready", () => {
-      console.debug("wavesurfer ready");
+      dbg("wavesurfer ready");
 
       loaded = true;
       loadAnnotations();
     });
 
     wavesurfer.on("region-created", async (region: UpRegion) => {
-      console.debug("wavesurfer region-created", region);
+      dbg("wavesurfer region-created", region);
 
       // Updating here, because if `drag` and `resize` are passed during adding,
       // updating no longer works.
@@ -189,33 +191,33 @@
     });
 
     wavesurfer.on("region-updated", (region: UpRegion) => {
-      // console.debug("wavesurfer region-updated", region);
+      // dbg("wavesurfer region-updated", region);
 
       currentAnnotation = region;
     });
 
     wavesurfer.on("region-update-end", (region: UpRegion) => {
-      console.debug("wavesurfer region-update-end", region);
+      dbg("wavesurfer region-update-end", region);
 
       updateAnnotation(region);
       currentAnnotation = region;
     });
 
     wavesurfer.on("region-removed", (region: UpRegion) => {
-      console.debug("wavesurfer region-removed", region);
+      dbg("wavesurfer region-removed", region);
 
       currentAnnotation = null;
       deleteAnnotation(region);
     });
 
     // wavesurfer.on("region-in", (region: UpRegion) => {
-    //   console.debug("wavesurfer region-in", region);
+    //   dbg("wavesurfer region-in", region);
 
     //   currentAnnotation = region;
     // });
 
     // wavesurfer.on("region-out", (region: UpRegion) => {
-    //   console.debug("wavesurfer region-out", region);
+    //   dbg("wavesurfer region-out", region);
 
     //   if (currentAnnotation.id === region.id) {
     //     currentAnnotation = undefined;
@@ -223,13 +225,13 @@
     // });
 
     wavesurfer.on("region-click", (region: UpRegion, _ev: MouseEvent) => {
-      console.debug("wavesurfer region-click", region);
+      dbg("wavesurfer region-click", region);
 
       currentAnnotation = region;
     });
 
     wavesurfer.on("region-dblclick", (region: UpRegion, _ev: MouseEvent) => {
-      console.debug("wavesurfer region-dblclick", region);
+      dbg("wavesurfer region-dblclick", region);
 
       currentAnnotation = region;
       setTimeout(() => wavesurfer.setCurrentTime(region.start));

webui/src/components/imageQueue.ts

@@ -1,6 +1,6 @@
 import debug from "debug";
 import { DEBUG } from "../lib/debug";
-const dbg = debug("upend:imageQueue");
+const dbg = debug("kestrel:imageQueue");
 
 class ImageQueue {
   concurrency: number;

webui/src/components/utils/Selector.svelte

@@ -11,6 +11,8 @@
   import { matchSorter } from "match-sorter";
   import api from "../../lib/api";
   import { ATTR_LABEL } from "upend/constants";
+  import debug from "debug";
+  const dbg = debug("kestrel:Selector");
 
   const MAX_OPTIONS = 25;
 
@@ -66,15 +68,14 @@
             (attr) =>
               attr.name.toLowerCase().includes(query.toLowerCase()) ||
               attr.labels.some((label) =>
-                label.toLowerCase().includes(query.toLowerCase())
-              )
+                label.toLowerCase().includes(query.toLowerCase()),
+              ),
           )
           .map((attribute) => {
             return {
               attribute,
             };
           });
-
         const attributeToCreate = inputValue
           .toUpperCase()
           .replaceAll(/[^A-Z0-9]/g, "_");
@@ -131,7 +132,7 @@
             .filter(([_, labels]) =>
               labels
                 .map((l) => l.toLowerCase())
-                .includes(inputValue.toLowerCase())
+                .includes(inputValue.toLowerCase()),
             )
             .map(([addr, _]) => addr);
 
@@ -142,7 +143,7 @@
                   t: "Address",
                   c: addr,
                 },
-              })
+              }),
             );
           } else {
             options.push({
@@ -166,7 +167,7 @@
                   c: e.entity,
                 },
               } as SelectorOption;
-            })
+            }),
           );
         }
 
@@ -176,6 +177,8 @@
     }
   }, 200);
 
+  $: dbg("Options: %O", options);
+
   $: {
     if (inputFocused) {
       updateOptions(inputValue, true);
@@ -220,6 +223,7 @@
         }
         break;
     }
+    dbg("Setting value to %O", value);
     dispatch("input", value);
     options = [];
     optionFocusIndex = -1;
@@ -235,7 +239,7 @@
 
     const optionEls = Array.from(listEl.children) as HTMLLIElement[];
     const currentIndex = optionEls.findIndex(
-      (el) => document.activeElement === el
+      (el) => document.activeElement === el,
     );
 
     let targetIndex = currentIndex;
@@ -273,6 +277,7 @@
 
   let input: Input;
   export function focus() {
+    dbg("Focusing input");
     input.focus();
   }
 
@@ -281,6 +286,8 @@
   $: visible =
     (inputFocused || hover || optionFocusIndex > -1) && Boolean(options.length);
   $: dispatch("focus", inputFocused || hover || optionFocusIndex > -1);
+
+  $: dbg("focus = %s, hover = %s, visible = %s", inputFocused, hover, visible);
 </script>
 
 <div class="selector">

webui/src/lib/entity.ts

@@ -5,7 +5,7 @@ import type { ListingResult, EntityListing, EntityInfo } from "upend/types";
 import { useSWR } from "../util/fetch";
 import api from "./api";
 import debug from "debug";
-const dbg = debug("upend:lib");
+const dbg = debug("kestrel:lib");
 
 export function useEntity(address: string) {
   const { data, error, revalidate } = useSWR<EntityListing, unknown>(