pmtiles-swarm 0.27.0 → 0.28.0

package/CHANGELOG.md

@@ -7,6 +7,27 @@
 ### 🐞 Bug fixes
 - _...Add new stuff here..._
 
+## 0.28.0
+### ✨ Features and improvements
+- **The archive list can be searched and sorted, and says when each archive was added.** `Added` is
+  a column now — `createdAt` has always been on every entry and returned by `/api/catalog`, it was
+  simply never shown — with a date for anything older than today and a time for today, since the
+  question a list answers is which of these is recent rather than exactly when each arrived.
+
+  Beside it, the same filter and sort the public page has: by name, infohash or category, ordered
+  by newest added, oldest added, name or size — and by download speed, upload speed or share
+  ratio, which are read off the live status the poll refreshes, so rows reorder themselves under
+  those every few seconds. That is what a torrent client does and what choosing "download speed"
+  asks for, and also why none of them is the default. Newest added is, because a list read
+  straight after adding something should have that thing at the top.
+
+  Both happen inside the render rather than where the data arrives. The list refreshes every three
+  seconds; filtering at the fetch would either clear what had been typed on each poll or refetch
+  the whole catalog on every keystroke. And the count beside the box says `4 of 37` while a filter
+  is narrowing things, because an empty table and a table filtered down to nothing look identical.
+
+### 🐞 Bug fixes
+
 ## 0.27.0
 ### ✨ Features and improvements
 - **Bandwidth history per archive, kept across restarts.** The tile side of this question already

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmtiles-swarm",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "BitTorrent distribution for PMTiles map archives: create torrents, watch folders, publish and subscribe to RSS feeds, and seed through qBittorrent or an embedded client",
   "type": "module",
   "main": "src/index.js",

package/src/web/index.html

@@ -324,12 +324,36 @@
             <button type="button">Feed</button>
           </a>
         </div>
+        <div class="bar">
+          <input
+            id="archive-filter"
+            type="search"
+            placeholder="Filter by name, infohash or category"
+            autocomplete="off"
+            spellcheck="false"
+            style="flex:1;min-width:12rem"
+          />
+          <label>
+            Sort
+            <select id="archive-sort">
+              <option value="added">newest added</option>
+              <option value="oldest">oldest added</option>
+              <option value="name">name</option>
+              <option value="largest">largest</option>
+              <option value="down">download speed</option>
+              <option value="up">upload speed</option>
+              <option value="ratio">share ratio</option>
+            </select>
+          </label>
+          <span class="sub" id="archive-count"></span>
+        </div>
 
         <table>
           <thead>
             <tr>
               <th>Archive</th>
               <th>Size</th>
+              <th>Added</th>
               <th>Mode</th>
               <th>Origin</th>
               <th>Progress</th>
@@ -710,6 +734,56 @@
       const rate = (n) => (n > 0 ? `${bytes(n)}/s` : '—');
       const pct = (n) => `${Math.round((n ?? 0) * 100)}%`;
 
+      /**
+       * When an archive was added, as something short enough for a column.
+       *
+       * A date on its own for anything older than today, and a time for
+       * today: the question a list answers is "which of these is recent", and
+       * a full timestamp on every row is harder to scan than either.
+       * @param {string} value - ISO timestamp.
+       * @returns {string} - Markup for the cell.
+       */
+      const added = (value) => {
+        if (!value) return '<span class="sub">—</span>';
+        const when = new Date(value);
+        if (Number.isNaN(when.getTime())) return '<span class="sub">—</span>';
+        const today = new Date().toDateString() === when.toDateString();
+        return `<span title="${escapeHtml(when.toLocaleString())}">${
+          today
+            ? when.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+            : when.toLocaleDateString()
+        }</span>`;
+      };
+
+      // The same three questions the public page asks, against an admin row.
+      // Newest first by default: a list read after adding something is a list
+      // where the thing just added should be at the top.
+      /**
+       * A live figure off an archive's status, or zero.
+       *
+       * An archive the engine has not reported on yet has no status at all,
+       * and comparing undefined gives NaN -- which makes a sort silently do
+       * nothing rather than fail, so it is worth the guard.
+       * @param {object} entry - Catalog entry with its status attached.
+       * @param {string} field - Which figure.
+       * @returns {number} - The value, or zero.
+       */
+      const speedOf = (entry, field) => Number(entry?.status?.[field] ?? 0) || 0;
+
+      const archiveSorters = {
+        added: (a, b) => new Date(b.createdAt ?? 0) - new Date(a.createdAt ?? 0),
+        oldest: (a, b) => new Date(a.createdAt ?? 0) - new Date(b.createdAt ?? 0),
+        name: (a, b) => String(a.name ?? '').localeCompare(String(b.name ?? '')),
+        largest: (a, b) => (b.size ?? 0) - (a.size ?? 0),
+        // Live values, read off the status the poll refreshes. Rows reorder
+        // themselves every few seconds under these, which is what a torrent
+        // client does and what somebody choosing "download speed" is asking
+        // for -- but it is also why they are not the default.
+        down: (a, b) => speedOf(b, 'downloadSpeed') - speedOf(a, 'downloadSpeed'),
+        up: (a, b) => speedOf(b, 'uploadSpeed') - speedOf(a, 'uploadSpeed'),
+        ratio: (a, b) => speedOf(b, 'ratio') - speedOf(a, 'ratio'),
+      };
+
       let toastTimer;
       const toast = (message) => {
         $('toast').textContent = message;
@@ -1004,9 +1078,34 @@
       function renderRows() {
         const rows = $('rows');
         rows.innerHTML = '';
+
+        // Filtered and sorted here rather than where the data arrives, so the
+        // three-second poll keeps refreshing what is on screen without
+        // resetting what was typed. `archives` stays the node's answer; this
+        // is only the view of it.
+        const needle = ($('archive-filter')?.value ?? '').trim().toLowerCase();
+        const order = $('archive-sort')?.value ?? 'added';
+        const shown = archives
+          .filter(
+            (entry) =>
+              needle === '' ||
+              String(entry.name ?? '').toLowerCase().includes(needle) ||
+              String(entry.infoHash ?? '').toLowerCase().includes(needle) ||
+              (entry.categories ?? []).some((tag) =>
+                String(tag).toLowerCase().includes(needle),
+              ),
+          )
+          .sort(archiveSorters[order] ?? archiveSorters.added);
+
         $('empty').hidden = archives.length > 0;
+        // Says when a filter is hiding things, because an empty table and a
+        // table filtered down to nothing look identical otherwise.
+        $('archive-count').textContent =
+          needle === ''
+            ? ''
+            : `${shown.length} of ${archives.length}`;
 
-        for (const entry of archives) {
+        for (const entry of shown) {
           const s = entry.status ?? {};
           const progress = s.progress ?? 0;
           const mode = entry.mode ?? 'mirror';
@@ -1024,6 +1123,7 @@
                 ? `<div class="sub">${escapeHtml(entry.kind)} · not servable</div>`
                 : ''
             }</td>
+            <td>${added(entry.createdAt)}</td>
             <td><span class="pill ${mode}">${mode}</span></td>
             <td>${originCell(entry)}</td>
             <td>
@@ -4204,6 +4304,8 @@
       $('traffic-live').onchange = trafficPoll;
       trafficPoll();
 
+      $('archive-filter').addEventListener('input', renderRows);
+      $('archive-sort').addEventListener('change', renderRows);
       $('traffic-window').onchange = () => loadSwarmTraffic();
       $('traffic-reset').onclick = async () => {
         // Deliberately separate from reading: a page polling the endpoint must