chore, webui: take care of (some) lints

tools/upend_js/api.ts

@@ -212,7 +212,7 @@ export class UpEndApi {
       | { urlContent: string }
       | ADDRESS_TYPE
   ): Promise<string> {
-    let response;
+    let response: Response;
     if (typeof input === "string") {
       try {
         if (!this.addressTypeConstants) {

tools/upend_js/index.ts

@@ -40,7 +40,7 @@ export class UpListing {
 }
 
 export class UpObject {
-  public readonly address;
+  public readonly address: string;
   public listing: UpListing | undefined;
 
   constructor(address: string, listing?: UpListing) {

tools/upend_js/pnpm-lock.yaml

@@ -989,7 +989,7 @@ packages:
     dependencies:
       acorn: 8.7.0
       acorn-jsx: 5.3.2(acorn@8.7.0)
-      eslint-visitor-keys: 3.2.0
+      eslint-visitor-keys: 3.4.1
     dev: true
 
   /esprima@4.0.1:
@@ -1188,7 +1188,7 @@ packages:
       array-union: 2.1.0
       dir-glob: 3.0.1
       fast-glob: 3.2.11
-      ignore: 5.2.0
+      ignore: 5.2.4
       merge2: 1.4.1
       slash: 3.0.0
     dev: true

webui/src/App.svelte

@@ -23,7 +23,7 @@
       <Home />
     </Route>
 
-    <Route path="/browse/*addresses" let:params>
+    <Route path="/browse/*addresses">
       <Browse />
     </Route>
 

webui/src/components/EntryView.svelte

@@ -17,7 +17,6 @@
   import Icon from "./utils/Icon.svelte";
   import IconButton from "./utils/IconButton.svelte";
   import { createEventDispatcher, type ComponentType } from "svelte";
-  import UpLink from "./display/UpLink.svelte";
   import UpObject from "./display/UpObject.svelte";
   const dispatch = createEventDispatcher();
 

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

@@ -44,7 +44,7 @@
         const annotation = await api.fetchEntity(e.entity);
         if (annotation.get("W3C_FRAGMENT_SELECTOR")) {
           const fragment = TimeFragment.parse(
-            String(annotation.get("W3C_FRAGMENT_SELECTOR"))
+            String(annotation.get("W3C_FRAGMENT_SELECTOR")),
           );
           if (fragment) {
             wavesurfer.addRegion({
@@ -90,7 +90,9 @@
 
       region.update({
         attributes: { label },
-      } as any); // incorrect types, `update()` does take `attributes`
+        // incorrect types, `update()` does take `attributes`
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any);
     }
 
     await api.putEntityAttribute(entity, ATTR_LABEL, {
@@ -123,6 +125,7 @@
       attributes: {
         "upend-address": entity,
       },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } as any);
   }
   const updateAnnotationDebounced = debounce(updateAnnotation, 250);
@@ -139,7 +142,7 @@
     const TimelinePlugin = await import("wavesurfer.js/src/plugin/timeline");
     const RegionsPlugin = await import("wavesurfer.js/src/plugin/regions");
     const timelineColor = getComputedStyle(
-      document.documentElement
+      document.documentElement,
     ).getPropertyValue("--foreground");
 
     wavesurfer = WaveSurfer.default.create({
@@ -233,7 +236,7 @@
 
     try {
       const peaksReq = await fetch(
-        `${api.apiUrl}/thumb/${address}?mime=audio&type=json`
+        `${api.apiUrl}/thumb/${address}?mime=audio&type=json`,
       );
       const peaks = await peaksReq.json();
       wavesurfer.load(`${api.apiUrl}/raw/${address}`, peaks.data);
@@ -244,12 +247,12 @@
         (parseInt(String(entity.get("FILE_SIZE"))) || 0) < 20_000_000 ||
         confirm(
           $i18n.t(
-            "File is large (>20 MiB) and UpEnd failed to load waveform from server. Generating the waveform locally may slow down your browser. Do you wish to proceed anyway?"
-          )
+            "File is large (>20 MiB) and UpEnd failed to load waveform from server. Generating the waveform locally may slow down your browser. Do you wish to proceed anyway?",
+          ),
         )
       ) {
         console.warn(
-          `Failed to load peaks, falling back to client-side render...`
+          `Failed to load peaks, falling back to client-side render...`,
         );
 
         wavesurfer.load(`${api.apiUrl}/raw/${address}`);

webui/src/components/imageQueue.ts

@@ -1,4 +1,3 @@
-import { local } from "d3";
 import debug from "debug";
 const dbg = debug("upend:imageQueue");
 
@@ -23,7 +22,6 @@ class ImageQueue {
     element: HTMLImageElement,
     id: string,
     callback: () => Promise<void>,
-    order?: () => number,
     check?: () => boolean,
   ) {
     this.queue = this.queue.filter((e) => e.element !== element);
@@ -109,13 +107,7 @@ export function concurrentImage(element: HTMLImageElement, src: string) {
       });
     };
 
-    imageQueue.add(
-      element,
-      src,
-      loadSelf,
-      () => element.getBoundingClientRect().top,
-      () => visible,
-    );
+    imageQueue.add(element, src, loadSelf, () => visible);
   }
   queueSelf();
 

webui/src/components/util.scss

@@ -10,8 +10,7 @@ section.labelborder {
     padding-bottom: 0.33rem;
     margin-bottom: 0.33rem;
 
-    h3,
-    h4 {
+    h3 {
       margin: 0;
     }
   }

webui/src/components/widgets/EntryList.svelte

@@ -62,7 +62,7 @@
   async function updateEntry(
     address: string,
     attribute: string,
-    value: IValue
+    value: IValue,
   ) {
     dispatch("change", {
       type: "update",
@@ -78,7 +78,7 @@
     const addresses = [];
     entries
       .flatMap((e) =>
-        e.value.t === "Address" ? [e.entity, e.value.c] : [e.entity]
+        e.value.t === "Address" ? [e.entity, e.value.c] : [e.entity],
       )
       .forEach((addr) => {
         if (!addresses.includes(addr)) {
@@ -89,7 +89,7 @@
     const addressesString = addresses.map((addr) => `@${addr}`).join(" ");
 
     labelListing = query(
-      `(matches (in ${addressesString}) "${ATTR_LABEL}" ? )`
+      `(matches (in ${addressesString}) "${ATTR_LABEL}" ? )`,
     ).result;
   }
 
@@ -124,14 +124,14 @@
         addSortKeys(
           entry.entity,
           $labelListing.getObject(entry.entity).identify(),
-          false
+          false,
         );
 
         if (entry.value.t === "Address") {
           addSortKeys(
             entry.value.c,
             $labelListing.getObject(String(entry.value.c)).identify(),
-            false
+            false,
           );
         }
       });
@@ -143,20 +143,19 @@
     addSortKeys(
       entry.entity,
       entry.listing.getObject(entry.entity).identify(),
-      false
+      false,
     );
     if (entry.value.t === "Address") {
       addSortKeys(
         entry.value.c,
         entry.listing.getObject(String(entry.value.c)).identify(),
-        false
+        false,
       );
     }
   });
   sortEntries();
 
   // Visibility
-  let itemsEl: HTMLElement;
   let visible: Set<string> = new Set();
   let observer = new IntersectionObserver((intersections) => {
     intersections.forEach((intersection) => {
@@ -200,7 +199,7 @@
       case "LAST_VISITED":
         return formatRelative(
           fromUnixTime(parseInt(String(value), 10)),
-          new Date()
+          new Date(),
         );
       case "NUM_VISITED":
         return `${value} times`;
@@ -213,7 +212,7 @@
 </script>
 
 <div class="container">
-  <table bind:this={itemsEl}>
+  <table>
     <colgroup>
       {#if editable}
         <col class="action-col" />
@@ -275,7 +274,7 @@
             {:else if column == ATTR_COL}
               <td
                 class:formatted={Boolean(
-                  Object.keys($attributeLabels).includes(entry.attribute)
+                  Object.keys($attributeLabels).includes(entry.attribute),
                 )}
                 class="mark-attribute"
               >
@@ -313,7 +312,7 @@
                   {:else}
                     <div
                       class:formatted={Boolean(
-                        formatValue(entry.value.c, entry.attribute)
+                        formatValue(entry.value.c, entry.attribute),
                       )}
                     >
                       <Ellipsis

webui/src/components/widgets/Gallery.svelte

@@ -69,7 +69,7 @@
       .join(" ");
 
     labelListing = query(
-      `(matches (in ${addressesString}) "${ATTR_LABEL}" ? )`
+      `(matches (in ${addressesString}) "${ATTR_LABEL}" ? )`,
     ).result;
   }
 
@@ -79,7 +79,7 @@
         addSortKeys(
           address,
           $labelListing.getObject(address).identify(),
-          false
+          false,
         );
       });
       sortEntities();
@@ -91,8 +91,6 @@
   }
 
   // Visibility
-
-  let itemsEl: HTMLElement;
   let visible: Set<string> = new Set();
   let observer = new IntersectionObserver((intersections) => {
     intersections.forEach((intersection) => {
@@ -127,7 +125,7 @@
 >
   <div class="header" />
   {#if sortedEntities.length}
-    <div class="items" bind:this={itemsEl}>
+    <div class="items">
       {#each sortedEntities as entity (entity)}
         <div data-address={entity} use:observe>
           {#if visible.has(entity)}

webui/src/util/history.ts

@@ -13,6 +13,7 @@ export default function (): HistorySource {
 
   return {
     get location() {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       return history.location as any;
     },
     addEventListener(name, handler) {
@@ -27,10 +28,10 @@ export default function (): HistorySource {
       get state() {
         return history.location.state as object;
       },
-      pushState(state, title, uri) {
+      pushState(state, _title, uri) {
         history.push(uri, state);
       },
-      replaceState(state, title, uri) {
+      replaceState(state, _title, uri) {
         history.replace(uri, state);
       },
       go(to) {

webui/src/views/Surface.svelte

@@ -13,7 +13,7 @@
   const navigate = useNavigate();
 
   const urlParams = new URLSearchParams(
-    window.location.href.substring(window.location.href.indexOf("?"))
+    window.location.href.substring(window.location.href.indexOf("?")),
   );
 
   export let x: string = urlParams.get("x");
@@ -108,7 +108,7 @@
       const points = d3.select(".content");
       points.style(
         "transform",
-        `translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`
+        `translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`,
       );
       const allPoints = d3.selectAll(".point");
       allPoints.style("transform", `scale(${1 / transform.k})`);
@@ -117,9 +117,9 @@
       gY.call(yAxis.scale(transform.rescaleY(yScale)));
     }
 
-    function reset() {
-      svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
-    }
+    // function reset() {
+    //   svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
+    // }
 
     view.on("mousemove", (ev: MouseEvent) => {
       // not using offsetXY because `translate` transforms on .inner mess it up
@@ -134,7 +134,7 @@
 
     d3.select(".view")
       .call(zoom)
-      .on("dblclick.zoom", (ev: MouseEvent) => {
+      .on("dblclick.zoom", (_ev: MouseEvent) => {
         selectorCoords = [currentX, currentY];
       });
     loaded = true;
@@ -151,8 +151,8 @@
         api.putEntityAttribute(ev.detail.c as string, axis, {
           t: "Number",
           c: value,
-        })
-      )
+        }),
+      ),
     );
     await loadPoints();
   }