website: fixes

website/scripts/utils/cache.js

@@ -6,27 +6,33 @@ export function createMapCache(maxSize = 100) {
   /** @type {Map<string, V>} */
   const map = new Map();
 
+  /** @param {string} key @param {V} value */
+  const set = (key, value) => {
+    if (map.size >= maxSize && !map.has(key)) {
+      const first = map.keys().next().value;
+      if (first !== undefined) map.delete(first);
+    }
+    map.set(key, value);
+  };
+
   return {
     /** @param {string} key @returns {V | undefined} */
-    get(key) {
-      return map.get(key);
-    },
+    get: (key) => map.get(key),
     /** @param {string} key @returns {boolean} */
-    has(key) {
-      return map.has(key);
-    },
-    /** @param {string} key @param {V} value */
-    set(key, value) {
-      if (map.size >= maxSize && !map.has(key)) {
-        const first = map.keys().next().value;
-        if (first !== undefined) map.delete(first);
-      }
-      map.set(key, value);
+    has: (key) => map.has(key),
+    set,
+    /** @param {string} key @param {() => Promise<V>} fetcher @returns {Promise<V>} */
+    async fetch(key, fetcher) {
+      const hit = map.get(key);
+      if (hit !== undefined) return hit;
+      const value = await fetcher();
+      set(key, value);
+      return value;
     },
   };
 }
 
 /**
  * @template V
- * @typedef {{ get: (key: string) => V | undefined, has: (key: string) => boolean, set: (key: string, value: V) => void }} MapCache
+ * @typedef {ReturnType<typeof createMapCache<V>>} MapCache
  */

website/scripts/utils/chart/index.js

@@ -74,6 +74,8 @@ const lineWidth = /** @type {1} */ (/** @type {unknown} */ (1.5));
 
 const MAX_SIZE = 10_000;
 
+let hintShown = false;
+
 /** @typedef {{ label: string, index: IndexLabel, from: number }} RangePreset */
 
 /** @returns {RangePreset[]} */
@@ -1677,6 +1679,20 @@ export function createChart({ parent, brk, fitContent }) {
   });
   chartEl.append(captureButton);
 
+  if (!hintShown) {
+    hintShown = true;
+    const hint = document.createElement("div");
+    hint.className = "chart-hint";
+    hint.textContent = matchMedia("(pointer: coarse)").matches
+      ? "pinch to zoom · swipe to pan"
+      : "scroll to zoom · drag to pan";
+    root.append(hint);
+
+    const dismiss = () => hint.classList.add("done");
+    chartEl.addEventListener("wheel", dismiss, { once: true, passive: true });
+    chartEl.addEventListener("pointerdown", dismiss, { once: true });
+  }
+
   return chart;
 }