Simplify and lint

javascript/_simpleProgressBar.js

@@ -1,8 +1,8 @@
 class SimpleProgressBar {
-  #container = document.createElement("div");
-  #progress = document.createElement("div");
-  #textDiv = document.createElement("div");
-  #text = document.createElement("span");
+  #container = document.createElement('div');
+  #progress = document.createElement('div');
+  #textDiv = document.createElement('div');
+  #text = document.createElement('span');
   #visible = false;
   #hideTimeout = null;
   #interval = null;
@@ -10,46 +10,44 @@ class SimpleProgressBar {
   /** @type {Set} */
   #monitoredSet;
 
-  constructor() {
-    this.#container.style.cssText = "position:relative;width:100%;background-color:hsla(0,0%,36%,0.3);height:1.2rem;margin:0;padding:0;display:none;"
-    this.#progress.style.cssText = "position:absolute;left:0;height:100%;width:0;transition:width 200ms;"
-    this.#progress.style.backgroundColor = "hsla(110, 32%, 35%, 0.80)";  // alt: "#27911d"
-    this.#textDiv.style.cssText = "margin:auto;width:max-content;height:100%;";
-    this.#text.style.cssText = "position:relative;user-select:none;color:white;"
+  constructor(monitoredSet) {
+    this.#monitoredSet = monitoredSet;  // This is required because incrementing a variable with a class method turned out to not be an atomic operation
+    this.#container.style.cssText = 'position:relative;width:100%;background-color:hsla(0,0%,36%,0.3);height:1.2rem;margin:0;padding:0;display:none;'
+    this.#progress.style.cssText = 'position:absolute;left:0;height:100%;width:0;transition:width 200ms;'
+    this.#progress.style.backgroundColor = 'hsla(110, 32%, 35%, 0.80)';  // alt: '#27911d'
+    this.#textDiv.style.cssText = 'position:relative;margin:auto;width:max-content;height:100%;';
+    this.#text.style.cssText = 'user-select:none;color:white;'
 
     this.#textDiv.append(this.#text);
     this.#container.append(this.#progress, this.#textDiv);
   }
 
-  setMax(max) {
-    this.clearProgress();
-    this.#max = max;
-    this.#startUpdating();
+  start(total) {
+    this.clear();
+    this.#max = total;
+    this.#interval = setInterval(() => {
+      this.#update(this.#monitoredSet.size, this.#max);
+    }, 250);
   }
 
-  attach(element) {
+  attachTo(element) {
     if (element.hasChildNodes) {
       element.innerHTML = '';
     }
     element.appendChild(this.#container);
   }
 
-  monitor(hashes) {
-    // This is required because incrementing a variable with a class method turned out to not be an atomic operation
-    this.#monitoredSet = hashes;
-  }
-
-  clearProgress() {
-    this.#stopUpdating();
+  clear() {
+    this.#stop();
     clearTimeout(this.#hideTimeout);
     this.#hideTimeout = null;
-    this.#container.style.display = "none";
+    this.#container.style.display = 'none';
     this.#visible = false;
-    this.#progress.style.width = "0";
-    this.#text.textContent = "";
+    this.#progress.style.width = '0';
+    this.#text.textContent = '';
   }
 
-  #setProgress(loaded, max) {
+  #update(loaded, max) {
     if (this.#hideTimeout) {
       this.#hideTimeout = null;
     }
@@ -58,24 +56,18 @@ class SimpleProgressBar {
     this.#text.textContent = `${loaded}/${max}`;
 
     if (!this.#visible) {
-      this.#container.style.display = "block";
+      this.#container.style.display = 'block';
       this.#visible = true;
     }
     if (loaded >= max) {
-      this.#stopUpdating()
+      this.#stop()
       this.#hideTimeout = setTimeout(() => {
-        this.clearProgress();
+        this.clear();
       }, 1000);
     }
   }
 
-  #startUpdating() {
-    this.#interval = setInterval(() => {
-      this.#setProgress(this.#monitoredSet.size, this.#max);
-    }, 250);
-  }
-
-  #stopUpdating() {
+  #stop() {
     clearInterval(this.#interval);
     this.#interval = null;
   }

javascript/gallery.js

@@ -13,13 +13,12 @@ const fileStylesheet = new CSSStyleSheet();
 const iconStopwatch = String.fromCodePoint(9201);
 // Store separator states for the session
 const separatorStates = new Map();
-const galleryProgressBar = new SimpleProgressBar();
+const galleryProgressBar = new SimpleProgressBar(galleryHashes);
 const el = {
   folders: undefined,
   files: undefined,
   search: undefined,
   status: undefined,
-  progress: undefined,
   btnSend: undefined,
 };
 
@@ -863,7 +862,7 @@ async function fetchFilesHT(evt, controller) {
   const t1 = performance.now();
   log(`gallery: folder=${evt.target.name} num=${numFiles} time=${Math.floor(t1 - t0)}ms`);
   updateStatusWithSort(['Folder', evt.target.name], ['Images', numFiles.toLocaleString()], `${iconStopwatch} ${Math.floor(t1 - t0).toLocaleString()}ms`);
-  galleryProgressBar.setMax(numFiles);
+  galleryProgressBar.start(numFiles);
   addSeparators();
   thumbCacheCleanup(evt.target.name, numFiles, controller);
 }
@@ -874,7 +873,7 @@ async function fetchFilesWS(evt) { // fetch file-by-file list over websockets
   maintenanceController.abort('Gallery update'); // Abort previous controller
   maintenanceController = controller; // Point to new controller for next time
   galleryHashes.clear(); // Must happen AFTER the AbortController steps
-  galleryProgressBar.clearProgress();
+  galleryProgressBar.clear();
 
   el.files.innerHTML = '';
   updateGalleryStyles();
@@ -924,7 +923,7 @@ async function fetchFilesWS(evt) { // fetch file-by-file list over websockets
     // gallerySort();
     log(`gallery: folder=${evt.target.name} num=${numFiles} time=${Math.floor(t1 - t0)}ms`);
     updateStatusWithSort(['Folder', evt.target.name], ['Images', numFiles.toLocaleString()], `${iconStopwatch} ${Math.floor(t1 - t0).toLocaleString()}ms`);
-    galleryProgressBar.setMax(numFiles);
+    galleryProgressBar.start(numFiles);
     addSeparators();
     thumbCacheCleanup(evt.target.name, numFiles, controller);
   };
@@ -990,16 +989,19 @@ async function initGallery() { // triggered on gradio change to monitor when ui
   el.files = gradioApp().getElementById('tab-gallery-files');
   el.status = gradioApp().getElementById('tab-gallery-status');
   el.search = gradioApp().querySelector('#tab-gallery-search textarea');
-  el.progress = gradioApp().getElementById('tab-gallery-progress');
-  if (!el.folders || !el.files || !el.status || !el.search || el.progress) {
+  if (!el.folders || !el.files || !el.status || !el.search) {
     error('initGallery', 'Missing gallery elements');
     return;
   }
   updateGalleryStyles();
   injectGalleryStatusCSS();
   setOverlayAnimation();
-  galleryProgressBar.attachTo(el.progress);
-  galleryProgressBar.monitor(galleryHashes);
+  const progress = gradioApp().getElementById('tab-gallery-progress');
+  if (progress) {
+    galleryProgressBar.attachTo(progress);
+  } else {
+    log('initGallery', 'Failed to attach loading progress bar');
+  }
   el.search.addEventListener('input', gallerySearch);
   el.btnSend = gradioApp().getElementById('tab-gallery-send-image');
   document.getElementById('tab-gallery-files').style.height = opts.logmonitor_show ? '75vh' : '85vh';