Shieldtest ergonomics (#741)

- Don't mobile viewport, the table really is 900px wide. - Add a progress bar and avoid locking up the page. - Turn off the map hash. - Misc markup tweaks, src -> srcset, add a tbody.
osm-americana · Jan 29, 2023 · 9e85aa4 · 9e85aa4
1 parent 3dcee30
commit 9e85aa4
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 46 deletions.
diff --git a/src/shieldtest.html b/src/shieldtest.html
@@ -3,33 +3,57 @@
   <head>
     <meta charset="utf-8" />
     <title>Shield Test</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Overpass:wght@500&display=block"
       rel="stylesheet"
     />
     <style>
+      body {
+        background: #faf6f2;
+      }
       th {
         border-bottom: 1px solid #b8b8b8;
       }
+      div#progress-overlay {
+        background: #fff8;
+        bottom: 0;
+        display: grid;
+        font-size: 1.5em;
+        left: 0;
+        place-items: center;
+        pointer-events: none;
+        position: fixed;
+        right: 0;
+        top: 0;
+      }
+      progress {
+        border-radius: 0; /* hack mozilla appearance */
+      }
     </style>
+
     <script type="module" src="shieldtest.js"></script>
   </head>
 
-  <body style="background: #faf6f2">
+  <body>
     <table id="shield-table">
-      <tr>
-        <th>Network</th>
-        <th colspan="14">Graphic</th>
-        <th>Performance</th>
-      </tr>
+      <thead>
+        <tr>
+          <th>Network</th>
+          <th colspan="14">Graphic</th>
+          <th>Performance</th>
+        </tr>
+      </thead>
     </table>
 
     <p style="font-family: Overpass; visibility: hidden">
       Invisible text so the font will load early
     </p>
     <div id="map" style="display: none"></div>
+
+    <div id="progress-overlay">
+      <progress></progress>
+    </div>
   </body>
 </html>
diff --git a/src/shieldtest.js b/src/shieldtest.js
@@ -12,7 +12,6 @@ var baseUrl = getUrl.protocol + "//" + getUrl.host + getUrl.pathname;
 window.maplibregl = maplibregl;
 export const map = (window.map = new maplibregl.Map({
   container: "map", // container id
-  hash: "map",
   antialias: true,
   style: {
     version: 8,
@@ -273,46 +272,77 @@ function addShield(row, network, ref) {
   cell.appendChild(img);
 }
 
+function getShieldImage(network, ref) {
+  let shield_id = `shield\n${network}=${ref}`;
+  let shieldCanvas = getShieldCanvas(shield_id);
+  let img = document.createElement("img");
+  img.srcset = `${shieldCanvas.toDataURL("image/png")} ${PXR}x`;
+  return img;
+}
+
 const PXR = gfx.getPixelRatio();
 
-let table = document.querySelector("#shield-table");
-
-for (let network of networks) {
-  let row = table.insertRow();
-  row.insertCell().append(`${network}`);
-  for (let ref of refs) {
-    performance.mark(`start-${network}`);
-    let cell = row.insertCell();
-    let shield_id = `shield\n${network}=${ref}`;
-    let shieldCanvas = getShieldCanvas(shield_id);
-    let img = document.createElement("img");
-    img.src = shieldCanvas.toDataURL("image/png");
-    img.width = shieldCanvas.width / PXR;
-    img.height = shieldCanvas.height / PXR;
-    performance.mark(`stop-${network}`);
-    performance.measure(`${network}`, `start-${network}`, `stop-${network}`);
-    cell.appendChild(img);
+const iterShields = function* () {
+  for (const network of networks) {
+    yield { network, refs };
   }
-  let perfEntries = performance.getEntriesByName(`${network}`);
-  var perfDuration = 0;
-  for (let perf of perfEntries) {
-    perfDuration += perf.duration;
+  yield {
+    network: "US:PA:Allegheny:Belt",
+    refs: [
+      "Red Belt",
+      "Orange Belt",
+      "Yellow Belt",
+      "Green Belt",
+      "Blue Belt",
+      "Purple Belt",
+    ],
+  };
+  yield {
+    network: "US:MO:Taney:Branson",
+    refs: ["Red Route", "Yellow Route", "Blue Route"],
+  };
+};
+
+const renderAllShields = async () => {
+  const allShields = Array.from(iterShields());
+  const progress = document.querySelector("#progress-overlay progress");
+  progress.max = allShields.flatMap((d) => d.refs).length;
+  const columns = Math.max(...allShields.flatMap((d) => d.refs.length));
+  const table = document.querySelector("#shield-table").createTBody();
+  for (const { network, refs } of allShields) {
+    const tr = table.insertRow();
+    tr.insertCell().append(`${network}`);
+    for (const ref of refs) {
+      performance.mark(`start-${network}`);
+      tr.insertCell().append(getShieldImage(network, ref));
+      progress.value += 1;
+      performance.mark(`stop-${network}`);
+      performance.measure(`${network}`, `start-${network}`, `stop-${network}`);
+    }
+    let perfEntries = performance.getEntriesByName(`${network}`);
+    var perfDuration = 0;
+    for (let perf of perfEntries) {
+      perfDuration += perf.duration;
+    }
+    let shieldRate = Math.round((1000 * perfEntries.length) / perfDuration);
+    if (tr.cells.length < 1 + columns) {
+      const gap = columns - tr.cells.length + 1;
+      tr.insertCell().colSpan = gap;
+    }
+    tr.insertCell().append(`${shieldRate} shields/sec`);
+
+    await Promise.all(
+      Array.from(tr.querySelectorAll("img"), (img) =>
+        img.decode().catch(
+          () =>
+            /* occasionally fails for no reason */
+            new Promise(requestAnimationFrame)
+        )
+      )
+    );
   }
-  let shieldRate = Math.round((1000 * perfEntries.length) / perfDuration);
-  row.insertCell().append(`${shieldRate} shields/sec`);
-}
+};
 
-let row = table.insertRow();
-row.insertCell().append(`Pittsburgh`);
-addShield(row, "US:PA:Allegheny:Belt", "Red Belt");
-addShield(row, "US:PA:Allegheny:Belt", "Orange Belt");
-addShield(row, "US:PA:Allegheny:Belt", "Yellow Belt");
-addShield(row, "US:PA:Allegheny:Belt", "Green Belt");
-addShield(row, "US:PA:Allegheny:Belt", "Blue Belt");
-addShield(row, "US:PA:Allegheny:Belt", "Purple Belt");
-
-row = table.insertRow();
-row.insertCell().append(`Branson, MO`);
-addShield(row, "US:MO:Taney:Branson", "Red Route");
-addShield(row, "US:MO:Taney:Branson", "Yellow Route");
-addShield(row, "US:MO:Taney:Branson", "Blue Route");
+await renderAllShields().finally(() =>
+  document.querySelector("#progress-overlay").remove()
+);