global: snapshot

website/scripts/entry.js

@@ -1 +1 @@
-import("./main.js");
+import "./main.js";

website/scripts/main.js

@@ -8,7 +8,6 @@ import {
   setOption as setChartOption,
 } from "./panes/chart.js";
 import { initSearch } from "./panes/search.js";
-import { next } from "./utils/timing.js";
 import { replaceHistory } from "./utils/url.js";
 import { removeStored, writeToStorage } from "./utils/storage.js";
 import {
@@ -195,68 +194,13 @@ function initSelected() {
 }
 initSelected();
 
-onFirstIntersection(navElement, async () => {
+requestIdleCallback(() => options.setParent(navElement));
+
+onFirstIntersection(navElement, () => {
   options.setParent(navElement);
 
-  const option = options.selected.value;
-  if (!option) throw "Selected should be set by now";
-  const path = [...option.path];
-
-  /** @type {HTMLUListElement | null} */
-  let ul = /** @type {any} */ (null);
-  async function getFirstChild() {
-    try {
-      ul = /** @type {HTMLUListElement} */ (navElement.firstElementChild);
-      await next();
-      if (!ul) {
-        await getFirstChild();
-      }
-    } catch (_) {
-      await next();
-      await getFirstChild();
-    }
-  }
-  await getFirstChild();
-  if (!ul) throw Error("Unreachable");
-
-  while (path.length > 1) {
-    const name = path.shift();
-    if (!name) throw "Unreachable";
-    /** @type {HTMLDetailsElement[]} */
-    let detailsList = [];
-    while (!detailsList.length) {
-      detailsList = Array.from(ul.querySelectorAll(":scope > li > details"));
-      if (!detailsList.length) {
-        await next();
-      }
-    }
-    const details = detailsList.find((s) => s.dataset.name == name);
-    if (!details) return;
-    details.open = true;
-    ul = null;
-    while (!ul) {
-      const uls = /** @type {HTMLUListElement[]} */ (
-        Array.from(details.querySelectorAll(":scope > ul"))
-      );
-      if (!uls.length) {
-        await next();
-      } else if (uls.length > 1) {
-        throw "Shouldn't be possible";
-      } else {
-        ul = /** @type {HTMLUListElement} */ (uls.pop());
-      }
-    }
-  }
-  /** @type {HTMLAnchorElement[]} */
-  let anchors = [];
-  while (!anchors.length) {
-    anchors = Array.from(ul.querySelectorAll(":scope > li > a"));
-    if (!anchors.length) {
-      await next();
-    }
-  }
-  anchors
-    .find((a) => a.getAttribute("href") == window.document.location.pathname)
+  navElement
+    .querySelector(`a[href="${window.document.location.pathname}"]`)
     ?.scrollIntoView({
       behavior: "instant",
       block: "center",

website/scripts/options/full.js

@@ -3,13 +3,7 @@ import { createButtonElement, createAnchorElement } from "../utils/dom.js";
 import { pushHistory, resetParams } from "../utils/url.js";
 import { readStored, writeToStorage } from "../utils/storage.js";
 import { stringToId } from "../utils/format.js";
-import {
-  collect,
-  markUsed,
-  logUnused,
-  extractTreeStructure,
-} from "./unused.js";
-import { localhost } from "../utils/env.js";
+import { logUnused } from "./unused.js";
 import { setQr } from "../panes/share.js";
 import { getConstant } from "./constants.js";
 import { colors } from "../utils/colors.js";
@@ -17,8 +11,6 @@ import { Unit } from "../utils/units.js";
 import { brk } from "../client.js";
 
 export function initOptions() {
-  collect(brk.metrics);
-
   const LS_SELECTED_KEY = `selected_path`;
 
   const urlPath_ = window.document.location.pathname
@@ -31,11 +23,6 @@ export function initOptions() {
 
   const partialOptions = createPartialOptions();
 
-  // Log tree structure for analysis (localhost only)
-  if (localhost) {
-    console.log(extractTreeStructure(partialOptions));
-  }
-
   /** @type {Option[]} */
   const list = [];
 
@@ -45,18 +32,26 @@ export function initOptions() {
   /** @type {Set<(option: Option) => void>} */
   const selectedListeners = new Set();
 
+  /** @type {HTMLLIElement[]} */
+  let highlightedLis = [];
+
   /**
    * @param {Option | undefined} sel
    */
   function updateHighlight(sel) {
     if (!sel) return;
-    liByPath.forEach((li) => {
+    for (const li of highlightedLis) {
       delete li.dataset.highlight;
-    });
-    for (let i = 1; i <= sel.path.length; i++) {
-      const pathKey = sel.path.slice(0, i).join("/");
+    }
+    highlightedLis = [];
+    let pathKey = "";
+    for (const segment of sel.path) {
+      pathKey = pathKey ? `${pathKey}/${segment}` : segment;
       const li = liByPath.get(pathKey);
-      if (li) li.dataset.highlight = "";
+      if (li) {
+        li.dataset.highlight = "";
+        highlightedLis.push(li);
+      }
     }
   }
 
@@ -89,6 +84,24 @@ export function initOptions() {
     );
   }
 
+  /**
+   * @template T
+   * @param {() => T} fn
+   * @returns {() => T}
+   */
+  function lazy(fn) {
+    /** @type {T | undefined} */
+    let cached;
+    let computed = false;
+    return () => {
+      if (!computed) {
+        computed = true;
+        cached = fn();
+      }
+      return /** @type {T} */ (cached);
+    };
+  }
+
   /**
    * @param {(AnyFetchedSeriesBlueprint | FetchedPriceSeriesBlueprint)[]} [arr]
    */
@@ -122,11 +135,9 @@ export function initOptions() {
         );
       if (maybePriceMetric.dollars?.by && maybePriceMetric.sats?.by) {
         const { dollars, sats } = maybePriceMetric;
-        markUsed(dollars);
         if (!usdArr) map.set(Unit.usd, (usdArr = []));
         usdArr.push({ ...blueprint, metric: dollars, unit: Unit.usd });
 
-        markUsed(sats);
         if (!satsArr) map.set(Unit.sats, (satsArr = []));
         satsArr.push({ ...blueprint, metric: sats, unit: Unit.sats });
         continue;
@@ -140,7 +151,6 @@ export function initOptions() {
       const unit = regularBlueprint.unit;
       if (!unit) continue;
 
-      markUsed(metric);
       let unitArr = map.get(unit);
       if (!unitArr) map.set(unit, (unitArr = []));
       unitArr.push(regularBlueprint);
@@ -169,7 +179,6 @@ export function initOptions() {
       if (!arr) continue;
       for (const baseValue of values) {
         const metric = getConstant(brk.metrics.constants, baseValue);
-        markUsed(metric);
         arr.push({
           metric,
           title: `${baseValue}`,
@@ -240,8 +249,8 @@ export function initOptions() {
   let savedOption;
 
   /**
-   * @typedef {{ type: "group"; name: string; serName: string; path: string[]; count: number; children: ProcessedNode[] }} ProcessedGroup
-   * @typedef {{ type: "option"; option: Option; path: string[] }} ProcessedOption
+   * @typedef {{ type: "group"; name: string; serName: string; path: string[]; pathKey: string; count: number; children: ProcessedNode[] }} ProcessedGroup
+   * @typedef {{ type: "option"; option: Option; path: string[]; pathKey: string }} ProcessedOption
    * @typedef {ProcessedGroup | ProcessedOption} ProcessedNode
    */
 
@@ -285,6 +294,7 @@ export function initOptions() {
           name: anyPartial.name,
           serName,
           path,
+          pathKey: pathStr,
           count,
           children,
         });
@@ -322,6 +332,10 @@ export function initOptions() {
           );
         } else {
           const title = option.title || name;
+          const topArr = anyPartial.top;
+          const bottomArr = anyPartial.bottom;
+          const topFn = lazy(() => arrayToMap(topArr));
+          const bottomFn = lazy(() => arrayToMap(bottomArr));
           Object.assign(
             option,
             /** @satisfies {ChartOption} */ ({
@@ -329,8 +343,8 @@ export function initOptions() {
               name,
               title,
               path,
-              top: arrayToMap(anyPartial.top),
-              bottom: arrayToMap(anyPartial.bottom),
+              top: topFn,
+              bottom: bottomFn,
             }),
           );
         }
@@ -349,6 +363,7 @@ export function initOptions() {
           type: "option",
           option,
           path,
+          pathKey: pathStr,
         });
       }
     }
@@ -356,8 +371,8 @@ export function initOptions() {
     return { nodes, count: totalCount };
   }
 
+  logUnused(brk.metrics, partialOptions);
   const { nodes: processedTree } = processPartialTree(partialOptions);
-  logUnused();
 
   /**
    * @param {ProcessedNode[]} nodes
@@ -365,16 +380,16 @@ export function initOptions() {
    */
   function buildTreeDOM(nodes, parentEl) {
     const ul = window.document.createElement("ul");
-    parentEl.append(ul);
 
     for (const node of nodes) {
       const li = window.document.createElement("li");
       ul.append(li);
 
-      const pathKey = node.path.join("/");
-      liByPath.set(pathKey, li);
+      liByPath.set(node.pathKey, li);
 
-      if (isOnSelectedPath(node.path)) {
+      const onSelectedPath = isOnSelectedPath(node.path);
+
+      if (onSelectedPath) {
         li.dataset.highlight = "";
       }
 
@@ -392,6 +407,11 @@ export function initOptions() {
         summary.append(count);
 
         let built = false;
+        if (onSelectedPath) {
+          built = true;
+          details.open = true;
+          buildTreeDOM(node.children, details);
+        }
         details.addEventListener("toggle", () => {
           if (details.open && !built) {
             built = true;
@@ -405,6 +425,8 @@ export function initOptions() {
         li.append(element);
       }
     }
+
+    parentEl.append(ul);
   }
 
   /** @type {HTMLElement | null} */

website/scripts/options/types.js

@@ -90,8 +90,8 @@
  * @typedef {PartialOption & PartialChartOptionSpecific} PartialChartOption
  *
  * @typedef {Object} ProcessedChartOptionAddons
- * @property {Map<Unit, AnyFetchedSeriesBlueprint[]>} top
- * @property {Map<Unit, AnyFetchedSeriesBlueprint[]>} bottom
+ * @property {() => Map<Unit, AnyFetchedSeriesBlueprint[]>} top
+ * @property {() => Map<Unit, AnyFetchedSeriesBlueprint[]>} bottom
  *
  * @typedef {Required<Omit<PartialChartOption, "top" | "bottom">> & ProcessedChartOptionAddons & ProcessedOptionAddons} ChartOption
  *

website/scripts/options/unused.js

@@ -1,9 +1,6 @@
 import { localhost } from "../utils/env.js";
 import { serdeChartableIndex } from "../utils/serde.js";
 
-/** @type {Map<AnyMetricPattern, string[]> | null} */
-export const unused = localhost ? new Map() : null;
-
 /**
  * Check if a metric pattern has at least one chartable index
  * @param {AnyMetricPattern} node
@@ -15,11 +12,12 @@ function hasChartableIndex(node) {
 }
 
 /**
+ * Walk a metrics tree and collect all chartable metric patterns
  * @param {TreeNode | null | undefined} node
  * @param {Map<AnyMetricPattern, string[]>} map
  * @param {string[]} path
  */
-function walk(node, map, path) {
+function walkMetrics(node, map, path) {
   if (node && "by" in node) {
     const metricNode = /** @type {AnyMetricPattern} */ (node);
     if (!hasChartableIndex(metricNode)) return;
@@ -33,32 +31,22 @@ function walk(node, map, path) {
         key.endsWith("State") ||
         key.endsWith("Start") ||
         kn === "mvrv" ||
-        //   kn === "time" ||
-        //   kn === "height" ||
         kn === "constants" ||
         kn === "blockhash" ||
         kn === "date" ||
-        //   kn === "oracle" ||
         kn === "split" ||
-        //   kn === "ohlc" ||
         kn === "outpoint" ||
         kn === "positions" ||
-        //   kn === "outputtype" ||
         kn === "heighttopool" ||
         kn === "txid" ||
         kn.startsWith("timestamp") ||
         kn.startsWith("satdays") ||
         kn.startsWith("satblocks") ||
-        //   kn.endsWith("state") ||
-        //   kn.endsWith("cents") ||
         kn.endsWith("index") ||
         kn.endsWith("indexes")
-        //   kn.endsWith("raw") ||
-        //   kn.endsWith("bytes") ||
-        //   (kn.startsWith("_") && kn.endsWith("start"))
       )
         continue;
-      walk(/** @type {TreeNode | null | undefined} */ (value), map, [
+      walkMetrics(/** @type {TreeNode | null | undefined} */ (value), map, [
         ...path,
         key,
       ]);
@@ -67,29 +55,64 @@ function walk(node, map, path) {
 }
 
 /**
- * Collect all AnyMetricPatterns from tree
- * @param {TreeNode} tree
+ * Walk partial options tree and delete referenced metrics from the map
+ * @param {PartialOptionsTree} options
+ * @param {Map<AnyMetricPattern, string[]>} map
  */
-export function collect(tree) {
-  if (unused) walk(tree, unused, []);
+function walkOptions(options, map) {
+  for (const node of options) {
+    if ("tree" in node && node.tree) {
+      walkOptions(node.tree, map);
+    } else if ("top" in node || "bottom" in node) {
+      const chartNode = /** @type {PartialChartOption} */ (node);
+      markUsedBlueprints(map, chartNode.top);
+      markUsedBlueprints(map, chartNode.bottom);
+    }
+  }
 }
 
 /**
- * Mark a metric as used
- * @param {AnyMetricPattern} metric
+ * @param {Map<AnyMetricPattern, string[]>} map
+ * @param {(AnyFetchedSeriesBlueprint | FetchedPriceSeriesBlueprint)[]} [arr]
  */
-export function markUsed(metric) {
-  unused?.delete(metric);
+function markUsedBlueprints(map, arr) {
+  if (!arr) return;
+  for (let i = 0; i < arr.length; i++) {
+    const metric = arr[i].metric;
+    if (!metric) continue;
+    const maybePriceMetric =
+      /** @type {{ dollars?: AnyMetricPattern, sats?: AnyMetricPattern }} */ (
+        /** @type {unknown} */ (metric)
+      );
+    if (maybePriceMetric.dollars?.by && maybePriceMetric.sats?.by) {
+      map.delete(maybePriceMetric.dollars);
+      map.delete(maybePriceMetric.sats);
+    } else {
+      map.delete(/** @type {AnyMetricPattern} */ (metric));
+    }
+  }
 }
 
-/** Log unused metrics to console */
-export function logUnused() {
-  if (!unused?.size) return;
+/**
+ * Log unused metrics to console (localhost only)
+ * @param {TreeNode} metricsTree
+ * @param {PartialOptionsTree} partialOptions
+ */
+export function logUnused(metricsTree, partialOptions) {
+  if (!localhost) return;
+
+  console.log(extractTreeStructure(partialOptions));
+
+  /** @type {Map<AnyMetricPattern, string[]>} */
+  const all = new Map();
+  walkMetrics(metricsTree, all, []);
+  walkOptions(partialOptions, all);
+
+  if (!all.size) return;
 
   /** @type {Record<string, any>} */
   const tree = {};
-
-  for (const path of unused.values()) {
+  for (const path of all.values()) {
     let current = tree;
     for (let i = 0; i < path.length; i++) {
       const part = path[i];
@@ -102,7 +125,7 @@ export function logUnused() {
     }
   }
 
-  console.log("Unused metrics:", { count: unused.size, tree });
+  console.log("Unused metrics:", { count: all.size, tree });
 }
 
 /**
@@ -121,7 +144,6 @@ export function extractTreeStructure(options) {
     /** @type {Record<string, string[]>} */
     const grouped = {};
     for (const s of series) {
-      // Price patterns in top pane have dollars/sats sub-metrics
       const metric = /** @type {any} */ (s.metric);
       if (isTop && metric?.dollars && metric?.sats) {
         const title = s.title || s.key || "unnamed";
@@ -142,14 +164,12 @@ export function extractTreeStructure(options) {
    * @returns {object}
    */
   function processNode(node) {
-    // Group with children
     if ("tree" in node && node.tree) {
       return {
         name: node.name,
         children: node.tree.map(processNode),
       };
     }
-    // Chart option
     if ("top" in node || "bottom" in node) {
       const chartNode = /** @type {PartialChartOption} */ (node);
       const top = chartNode.top ? groupByUnit(chartNode.top, true) : undefined;
@@ -163,23 +183,11 @@ export function extractTreeStructure(options) {
         ...(bottom && Object.keys(bottom).length > 0 ? { bottom } : {}),
       };
     }
-    // URL option
     if ("url" in node) {
       return { name: node.name, url: true };
     }
-    // Other options (explorer, table, simulation)
     return { name: node.name };
   }
 
   return options.map(processNode);
 }
-
-/**
- * Log the options tree structure to console (localhost only)
- * @param {PartialOptionsTree} options
- */
-export function logTreeStructure(options) {
-  if (!localhost) return;
-  const structure = extractTreeStructure(options);
-  console.log("Options tree structure:", JSON.stringify(structure, null, 2));
-}

website/scripts/panes/chart.js

@@ -91,8 +91,8 @@ export function init() {
     // Set blueprints first so storageId is correct before any index change
     chart.setBlueprints({
       name: opt.title,
-      top: buildTopBlueprints(opt.top),
-      bottom: opt.bottom,
+      top: buildTopBlueprints(opt.top()),
+      bottom: opt.bottom(),
       onDataLoaded: updatePriceWithLatest,
     });
 
@@ -120,11 +120,11 @@ const ALL_CHOICES = /** @satisfies {ChartableIndexName[]} */ ([
  * @returns {ChartableIndexName[]}
  */
 function computeChoices(opt) {
-  if (!opt.top.size && !opt.bottom.size) {
+  if (!opt.top().size && !opt.bottom().size) {
     return [...ALL_CHOICES];
   }
   const rawIndexes = new Set(
-    [Array.from(opt.top.values()), Array.from(opt.bottom.values())]
+    [Array.from(opt.top().values()), Array.from(opt.bottom().values())]
       .flat(2)
       .filter((blueprint) => {
         const path = Object.values(blueprint.metric.by)[0]?.path ?? "";