computer: store part 10

websites/default/index.html

@@ -36,8 +36,9 @@
         line-height: 1.5;
         -webkit-text-size-adjust: 100%;
         tab-size: 4;
-        font-family: "Geist mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
-          Consolas, "Liberation Mono", "Courier New", monospace;
+        font-family:
+          "Geist mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          "Liberation Mono", "Courier New", monospace;
         font-feature-settings: "ss03";
         -webkit-tap-highlight-color: transparent;
       }
@@ -80,9 +81,9 @@
       kbd,
       samp,
       pre {
-        font-family: var(--default-mono-font-family), ui-monospace,
-          SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-          "Courier New", monospace;
+        font-family:
+          var(--default-mono-font-family), ui-monospace, SFMono-Regular, Menlo,
+          Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
         font-feature-settings: var(
           --default-mono-font-feature-settings,
           normal
@@ -273,6 +274,8 @@
         --default-main-width: 25rem;
 
         --bottom-area: 69vh;
+
+        --cube: 50px;
       }
 
       [data-resize] {
@@ -1365,6 +1368,46 @@
           }
         }
       }
+
+      #explorer {
+        #chain {
+          display: flex;
+          flex-direction: column;
+          gap: calc(var(--cube) * 1.1);
+          padding: 1rem;
+
+          .cube {
+            width: var(--cube);
+            height: var(--cube);
+            overflow: hidden;
+
+            .face {
+              transform-origin: 0 0;
+              position: absolute;
+              width: var(--cube);
+              height: var(--cube);
+            }
+            .front {
+              background-color: var(--orange);
+              transform: rotate(-30deg) skewX(-30deg)
+                translate(calc(var(--cube) * 1.3), calc(var(--cube) * 1.725))
+                scaleY(0.864);
+            }
+            .top {
+              background-color: var(--yellow);
+              transform: rotate(30deg) skew(-30deg)
+                translate(calc(var(--cube) * 0.99), calc(var(--cube) * -0.265))
+                scaleY(0.864);
+            }
+            .side {
+              background-color: var(--amber);
+              transform: rotate(30deg) skewX(30deg)
+                translate(calc(var(--cube) * 0.3), calc(var(--cube) * 0.6))
+                scaleY(0.864);
+            }
+          }
+        }
+      }
     </style>
 
     <!-- ------- -->
@@ -1678,6 +1721,7 @@
       </footer>
     </main>
     <aside id="aside">
+      <div id="explorer" hidden></div>
       <div id="charts" hidden></div>
       <div id="table" hidden></div>
       <div id="simulation" hidden></div>

websites/default/packages/lightweight-charts/wrapper.js

@@ -141,7 +141,7 @@ function createChartElement({
           }
         : {}),
       // ..._options,
-    })
+    }),
   );
 
   ichart.priceScale("right").applyOptions({
@@ -173,7 +173,7 @@ function createChartElement({
           },
         },
       });
-    }
+    },
   );
 
   signals.createEffect(index, (index) => {
@@ -181,12 +181,12 @@ function createChartElement({
       index === /** @satisfies {MonthIndex} */ (7)
         ? 1
         : index === /** @satisfies {QuarterIndex} */ (19)
-        ? 2
-        : index === /** @satisfies {YearIndex} */ (23)
-        ? 6
-        : index === /** @satisfies {DecadeIndex} */ (1)
-        ? 60
-        : 0.5;
+          ? 2
+          : index === /** @satisfies {YearIndex} */ (23)
+            ? 6
+            : index === /** @satisfies {DecadeIndex} */ (1)
+              ? 60
+              : 0.5;
 
     ichart.applyOptions({
       timeScale: {
@@ -209,7 +209,7 @@ function createChartElement({
       activeResources.forEach((v) => {
         v.fetch();
       });
-    })
+    }),
   );
 
   if (fitContent) {
@@ -240,7 +240,8 @@ function createChartElement({
 
           const children = Array.from(parent.childNodes).filter(
             (element) =>
-              /** @type {HTMLElement} */ (element).dataset.position === position
+              /** @type {HTMLElement} */ (element).dataset.position ===
+              position,
           );
 
           if (children.length === 1) {
@@ -262,7 +263,7 @@ function createChartElement({
 
           fieldset.append(createChild(pane));
         }),
-      paneIndex ? 50 : 0
+      paneIndex ? 50 : 0,
     );
   }
 
@@ -346,7 +347,7 @@ function createChartElement({
         // Or remove ?
         iseries.applyOptions({
           visible: active,
-        })
+        }),
       );
 
       iseries.setSeriesOrder(order);
@@ -376,8 +377,8 @@ function createChartElement({
           const timeResource = vecsResources.getOrCreate(
             index,
             index === /** @satisfies {Height} */ (5)
-              ? "timestamp-fixed"
-              : "timestamp"
+              ? "timestamp_fixed"
+              : "timestamp",
           );
           timeResource.fetch();
 
@@ -497,7 +498,7 @@ function createChartElement({
                   });
 
                   console.timeEnd(consoleTimeLabel);
-                }
+                },
               );
             } else {
               activeResources.delete(valuesResource);
@@ -590,7 +591,7 @@ function createChartElement({
             borderVisible: false,
             visible: defaultActive !== false,
           },
-          paneIndex
+          paneIndex,
         )
       );
 
@@ -646,7 +647,7 @@ function createChartElement({
             color: color(),
             ...options,
           },
-          paneIndex
+          paneIndex,
         )
       );
 
@@ -714,7 +715,7 @@ function createChartElement({
             topFillColor2: "transparent",
             lineVisible: true,
           },
-          paneIndex
+          paneIndex,
         )
       );
 
@@ -877,7 +878,7 @@ function createLegend({ signals, utils }) {
             } else {
               spanColor.style.backgroundColor = tameColor(color);
             }
-          }
+          },
         );
       });
 
@@ -1037,17 +1038,17 @@ function numberToShortUSFormat(value, digits) {
   if (modulused === 0) {
     return `${numberToUSFormat(
       value / (1_000_000 * 1_000 ** letterIndex),
-      3
+      3,
     )}${letter}`;
   } else if (modulused === 1) {
     return `${numberToUSFormat(
       value / (1_000_000 * 1_000 ** letterIndex),
-      2
+      2,
     )}${letter}`;
   } else {
     return `${numberToUSFormat(
       value / (1_000_000 * 1_000 ** letterIndex),
-      1
+      1,
     )}${letter}`;
   }
 }
@@ -1097,7 +1098,7 @@ function createOklchToRGBA() {
       return rgb.map((c) =>
         Math.abs(c) > 0.0031308
           ? (c < 0 ? -1 : 1) * (1.055 * Math.abs(c) ** (1 / 2.4) - 0.055)
-          : 12.92 * c
+          : 12.92 * c,
       );
     }
     /**
@@ -1109,7 +1110,7 @@ function createOklchToRGBA() {
           1, 0.3963377773761749, 0.2158037573099136, 1, -0.1055613458156586,
           -0.0638541728258133, 1, -0.0894841775298119, -1.2914855480194092,
         ]),
-        lab
+        lab,
       );
       const LMS = /** @type {[number, number, number]} */ (
         LMSg.map((val) => val ** 3)
@@ -1120,7 +1121,7 @@ function createOklchToRGBA() {
           -0.0405757452148008, 1.112286803280317, -0.0717110580655164,
           -0.0763729366746601, -0.4214933324022432, 1.5869240198367816,
         ]),
-        LMS
+        LMS,
       );
     }
     /**
@@ -1133,7 +1134,7 @@ function createOklchToRGBA() {
           -0.9692436362808796, 1.8759675015077202, 0.04155505740717559,
           0.05563007969699366, -0.20397695888897652, 1.0569715142428786,
         ],
-        xyz
+        xyz,
       );
     }
 
@@ -1156,8 +1157,8 @@ function createOklchToRGBA() {
       });
       const rgb = srgbLinear2rgb(
         xyz2rgbLinear(
-          oklab2xyz(oklch2oklab(/** @type {[number, number, number]} */ (lch)))
-        )
+          oklab2xyz(oklch2oklab(/** @type {[number, number, number]} */ (lch))),
+        ),
       ).map((v) => {
         return Math.max(Math.min(Math.round(v * 255), 255), 0);
       });

websites/default/scripts/chart.js

@@ -7,7 +7,7 @@ const LINE = "line";
 const CANDLE = "candle";
 
 /**
- * @typedef {"timestamp" | "date" | "week" | "diff. epoch" | "month" | "quarter" | "year" | "decade" } SerializedChartableIndex
+ * @typedef {"timestamp" | "date" | "week" | "d.epoch" | "month" | "quarter" | "year" | "decade" } SerializedChartableIndex
  */
 
 /**
@@ -47,7 +47,7 @@ export function init({
   });
 
   const TIMERANGE_LS_KEY = signals.createMemo(
-    () => `chart-timerange-${index()}`
+    () => `chart-timerange-${index()}`,
   );
 
   let firstRun = true;
@@ -101,7 +101,7 @@ export function init({
         from.set(t.from);
         to.set(t.to);
       }
-    })
+    }),
   );
 
   elements.charts.append(fieldset);
@@ -218,7 +218,7 @@ export function init({
           date.setUTCFullYear(
             Math.floor(date.getUTCFullYear() / 10) * 10,
             0,
-            1
+            1,
           );
         } else {
           throw Error("Unsupported");
@@ -361,9 +361,9 @@ export function init({
             ({ latest, hasData }) => {
               if (!series || !latest || !hasData) return;
               printLatest({ iseries: series.inner, unit: topUnit, index });
-            }
+            },
           );
-        }
+        },
       );
 
       [
@@ -425,7 +425,7 @@ export function init({
                             blueprint.color?.() ?? blueprint.colors?.[1](),
                         },
                         order,
-                      })
+                      }),
                     );
                     break;
                   }
@@ -443,13 +443,13 @@ export function init({
                         paneIndex,
                         options: blueprint.options,
                         order,
-                      })
+                      }),
                     );
                 }
               }
             });
           });
-        }
+        },
       );
 
       firstRun = false;
@@ -469,7 +469,7 @@ function createIndexSelector({ option, vecIdToIndexes, signals, utils }) {
     "timestamp",
     "date",
     "week",
-    "diff. epoch",
+    "d.epoch",
     "month",
     "quarter",
     "year",
@@ -488,7 +488,7 @@ function createIndexSelector({ option, vecIdToIndexes, signals, utils }) {
       [Object.values(o.top), Object.values(o.bottom)]
         .flat(2)
         .map((blueprint) => vecIdToIndexes[blueprint.key])
-        .flat()
+        .flat(),
     );
 
     const serializedIndexes = [...rawIndexes].flatMap((index) => {
@@ -515,7 +515,7 @@ function createIndexSelector({ option, vecIdToIndexes, signals, utils }) {
   fieldset.dataset.size = "sm";
 
   const index = signals.createMemo(() =>
-    utils.serde.chartableIndex.deserialize(selected())
+    utils.serde.chartableIndex.deserialize(selected()),
   );
 
   return { fieldset, index };

websites/default/scripts/explorer.js

@@ -0,0 +1,53 @@
+// @ts-check
+
+/**
+ * @param {Object} args
+ * @param {Colors} args.colors
+ * @param {LightweightCharts} args.lightweightCharts
+ * @param {Accessor<ChartOption>} args.option
+ * @param {Signals} args.signals
+ * @param {Utilities} args.utils
+ * @param {WebSockets} args.webSockets
+ * @param {Elements} args.elements
+ * @param {VecsResources} args.vecsResources
+ * @param {VecIdToIndexes} args.vecIdToIndexes
+ */
+export function init({
+  colors,
+  elements,
+  lightweightCharts,
+  option,
+  signals,
+  utils,
+  webSockets,
+  vecsResources,
+  vecIdToIndexes,
+}) {
+  const chain = window.document.createElement("div");
+  chain.id = "chain";
+  elements.explorer.append(chain);
+
+  chain.append(createCube());
+  chain.append(createCube());
+  chain.append(createCube());
+  chain.append(createCube());
+  chain.append(createCube());
+}
+
+function createCube() {
+  const cubeElement = window.document.createElement("div");
+  cubeElement.classList.add("cube");
+  const faceFrontElement = window.document.createElement("div");
+  faceFrontElement.classList.add("face");
+  faceFrontElement.classList.add("front");
+  cubeElement.append(faceFrontElement);
+  const faceSideElement = window.document.createElement("div");
+  faceSideElement.classList.add("face");
+  faceSideElement.classList.add("side");
+  cubeElement.append(faceSideElement);
+  const faceTopElement = window.document.createElement("div");
+  faceTopElement.classList.add("face");
+  faceTopElement.classList.add("top");
+  cubeElement.append(faceTopElement);
+  return cubeElement;
+}

websites/default/scripts/main.js

@@ -64,14 +64,14 @@ function initPackages() {
   const imports = {
     async signals() {
       return import("../packages/solid-signals/wrapper.js").then(
-        (d) => d.default
+        (d) => d.default,
       );
     },
     async lightweightCharts() {
       return window.document.fonts.ready.then(() =>
         import("../packages/lightweight-charts/wrapper.js").then(
-          (d) => d.default
-        )
+          (d) => d.default,
+        ),
       );
     },
     async leanQr() {
@@ -79,7 +79,7 @@ function initPackages() {
     },
     async ufuzzy() {
       return import("../packages/ufuzzy/v1.0.18/script.js").then(
-        ({ default: d }) => d
+        ({ default: d }) => d,
       );
     },
   };
@@ -587,7 +587,7 @@ function createUtils() {
         window.history.pushState(
           null,
           "",
-          `${pathname}?${urlParams.toString()}`
+          `${pathname}?${urlParams.toString()}`,
         );
       } catch (_) {}
     },
@@ -604,7 +604,7 @@ function createUtils() {
         window.history.replaceState(
           null,
           "",
-          `${pathname}?${urlParams.toString()}`
+          `${pathname}?${urlParams.toString()}`,
         );
       } catch (_) {}
     },
@@ -1177,7 +1177,7 @@ function createUtils() {
           case /** @satisfies {DecadeIndex} */ (1):
             return "decade";
           case /** @satisfies {DifficultyEpoch} */ (2):
-            return "diff. epoch";
+            return "d.epoch";
           // case /** @satisfies {HalvingEpoch} */ (4):
           //   return "halving";
           case /** @satisfies {Height} */ (5):
@@ -1206,7 +1206,7 @@ function createUtils() {
             return /** @satisfies {DateIndex} */ (0);
           case "week":
             return /** @satisfies {WeekIndex} */ (22);
-          case "diff. epoch":
+          case "d.epoch":
             return /** @satisfies {DifficultyEpoch} */ (2);
           case "month":
             return /** @satisfies {MonthIndex} */ (7);
@@ -1248,8 +1248,8 @@ function createUtils() {
           today.getUTCDate(),
           0,
           0,
-          0
-        )
+          0,
+        ),
       );
     },
     /**
@@ -1336,7 +1336,7 @@ function createUtils() {
    */
   function getNumberOfDaysBetweenTwoDates(oldest, youngest) {
     return Math.round(
-      Math.abs((youngest.getTime() - oldest.getTime()) / date.ONE_DAY_IN_MS)
+      Math.abs((youngest.getTime() - oldest.getTime()) / date.ONE_DAY_IN_MS),
     );
   }
 
@@ -1456,7 +1456,7 @@ function createUtils() {
     function genPath(index, vecId, from, to) {
       let path = `/${serde.index.serialize(index)}-to-${vecId.replaceAll(
         "_",
-        "-"
+        "-",
       )}?`;
 
       if (from !== undefined) {
@@ -1562,7 +1562,7 @@ function createVecsResources(signals, utils) {
       const fetchedRecord = signals.createSignal(
         /** @type {Map<string, {loading: boolean, at: Date | null, vec: Signal<T[] | null>}>} */ (
           new Map()
-        )
+        ),
       );
 
       return {
@@ -1612,7 +1612,7 @@ function createVecsResources(signals, utils) {
               index,
               id,
               from,
-              to
+              to,
             )
           );
           fetched.at = new Date();
@@ -1708,6 +1708,7 @@ function getElements() {
     style: getComputedStyle(window.document.documentElement),
     charts: getElementById("charts"),
     table: getElementById("table"),
+    explorer: getElementById("explorer"),
     simulation: getElementById("simulation"),
   };
 }
@@ -1873,7 +1874,7 @@ function initWebSockets(signals, utils) {
 
         window.document.addEventListener(
           "visibilitychange",
-          reinitWebSocketIfDocumentNotHidden
+          reinitWebSocketIfDocumentNotHidden,
         );
 
         window.document.addEventListener("online", reinitWebSocket);
@@ -1882,7 +1883,7 @@ function initWebSockets(signals, utils) {
         ws?.close();
         window.document.removeEventListener(
           "visibilitychange",
-          reinitWebSocketIfDocumentNotHidden
+          reinitWebSocketIfDocumentNotHidden,
         );
         window.document.removeEventListener("online", reinitWebSocket);
         live.set(false);
@@ -1908,7 +1909,7 @@ function initWebSockets(signals, utils) {
             symbol: ["BTC/USD"],
             interval: 1440,
           },
-        })
+        }),
       );
     });
 
@@ -1937,7 +1938,7 @@ function initWebSockets(signals, utils) {
 
   /** @type {ReturnType<typeof createWebsocket<CandlestickData>>} */
   const kraken1dCandle = createWebsocket((callback) =>
-    krakenCandleWebSocketCreator(callback)
+    krakenCandleWebSocketCreator(callback),
   );
 
   kraken1dCandle.open();
@@ -1996,7 +1997,7 @@ function main() {
             }
 
             const frame = window.document.getElementById(
-              /** @type {string} */ (input.value)
+              /** @type {string} */ (input.value),
             );
 
             if (!frame) {
@@ -2094,23 +2095,23 @@ function main() {
 
           function initDark() {
             const preferredColorSchemeMatchMedia = window.matchMedia(
-              "(prefers-color-scheme: dark)"
+              "(prefers-color-scheme: dark)",
             );
             const dark = signals.createSignal(
-              preferredColorSchemeMatchMedia.matches
+              preferredColorSchemeMatchMedia.matches,
             );
             preferredColorSchemeMatchMedia.addEventListener(
               "change",
               ({ matches }) => {
                 dark.set(matches);
-              }
+              },
             );
             return dark;
           }
           const dark = initDark();
 
           const qrcode = signals.createSignal(
-            /** @type {string | null} */ (null)
+            /** @type {string | null} */ (null),
           );
 
           function createLastHeightResource() {
@@ -2121,7 +2122,7 @@ function main() {
                   lastHeight.set(h);
                 },
                 /** @satisfies {Height} */ (5),
-                "height"
+                "height",
               );
             }
             fetchLastHeight();
@@ -2165,10 +2166,10 @@ function main() {
               const owner = signals.getOwner();
 
               const chartOption = signals.createSignal(
-                /** @type {ChartOption | null} */ (null)
+                /** @type {ChartOption | null} */ (null),
               );
               const simOption = signals.createSignal(
-                /** @type {SimulationOption | null} */ (null)
+                /** @type {SimulationOption | null} */ (null),
               );
 
               let previousElement = /** @type {HTMLElement | undefined} */ (
@@ -2177,6 +2178,7 @@ function main() {
               let firstTimeLoadingChart = true;
               let firstTimeLoadingTable = true;
               let firstTimeLoadingSimulation = true;
+              let firstTimeLoadingExplorer = true;
 
               signals.createEffect(options.selected, (option) => {
                 console.log(utils.url.pathnameToSelectedId(), option.id);
@@ -2192,6 +2194,35 @@ function main() {
                 let element;
 
                 switch (option.kind) {
+                  case "explorer": {
+                    element = elements.explorer;
+
+                    if (firstTimeLoadingExplorer) {
+                      const lightweightCharts = packages.lightweightCharts();
+                      import("./explorer.js").then(({ init }) =>
+                        lightweightCharts.then((lightweightCharts) =>
+                          signals.runWithOwner(owner, () =>
+                            init({
+                              colors,
+                              elements,
+                              lightweightCharts,
+                              option: /** @type {Accessor<ChartOption>} */ (
+                                chartOption
+                              ),
+                              signals,
+                              utils,
+                              webSockets,
+                              vecsResources,
+                              vecIdToIndexes,
+                            }),
+                          ),
+                        ),
+                      );
+                    }
+                    firstTimeLoadingExplorer = false;
+
+                    break;
+                  }
                   case "chart": {
                     element = elements.charts;
 
@@ -2214,9 +2245,9 @@ function main() {
                               webSockets,
                               vecsResources,
                               vecIdToIndexes,
-                            })
-                          )
-                        )
+                            }),
+                          ),
+                        ),
                       );
                     }
                     firstTimeLoadingChart = false;
@@ -2236,8 +2267,8 @@ function main() {
                             vecsResources,
                             option,
                             vecIdToIndexes,
-                          })
-                        )
+                          }),
+                        ),
                       );
                     }
                     firstTimeLoadingTable = false;
@@ -2261,9 +2292,9 @@ function main() {
                               signals,
                               utils,
                               vecsResources,
-                            })
-                          )
-                        )
+                            }),
+                          ),
+                        ),
                       );
                     }
                     firstTimeLoadingSimulation = false;
@@ -2292,7 +2323,7 @@ function main() {
             createMobileSwitchEffect();
 
             utils.dom.onFirstIntersection(elements.aside, () =>
-              signals.runWithOwner(owner, initSelectedFrame)
+              signals.runWithOwner(owner, initSelectedFrame),
             );
           }
           initSelected();
@@ -2372,7 +2403,7 @@ function main() {
                   if (indexes?.length) {
                     const maxIndex = Math.min(
                       (order || indexes).length - 1,
-                      minIndex + RESULTS_PER_PAGE - 1
+                      minIndex + RESULTS_PER_PAGE - 1,
                     );
 
                     list = Array(maxIndex - minIndex + 1);
@@ -2448,7 +2479,7 @@ function main() {
                       haystack,
                       needle,
                       undefined,
-                      infoThresh
+                      infoThresh,
                     );
 
                     if (!result?.[0]?.length || !result?.[1]) {
@@ -2456,7 +2487,7 @@ function main() {
                         haystack,
                         needle,
                         outOfOrder,
-                        infoThresh
+                        infoThresh,
                       );
                     }
 
@@ -2465,7 +2496,7 @@ function main() {
                         haystack,
                         needle,
                         outOfOrder,
-                        infoThresh
+                        infoThresh,
                       );
                     }
 
@@ -2474,7 +2505,7 @@ function main() {
                         haystack,
                         needle,
                         outOfOrder,
-                        infoThresh
+                        infoThresh,
                       );
                     }
 
@@ -2483,7 +2514,7 @@ function main() {
                         haystack,
                         needle,
                         undefined,
-                        infoThresh
+                        infoThresh,
                       );
                     }
 
@@ -2492,7 +2523,7 @@ function main() {
                         haystack,
                         needle,
                         outOfOrder,
-                        infoThresh
+                        infoThresh,
                       );
                     }
 
@@ -2575,7 +2606,7 @@ function main() {
 
                   shareDiv.hidden = false;
                 });
-              })
+              }),
             );
           }
           initShare();
@@ -2599,7 +2630,7 @@ function main() {
                   utils.storage.write(barWidthLocalStorageKey, String(width));
                 } else {
                   elements.main.style.width = elements.style.getPropertyValue(
-                    "--default-main-width"
+                    "--default-main-width",
                   );
                   utils.storage.remove(barWidthLocalStorageKey);
                 }
@@ -2636,9 +2667,9 @@ function main() {
             window.addEventListener("mouseleave", setResizeFalse);
           }
           initDesktopResizeBar();
-        })
-      )
-    )
+        }),
+      ),
+    ),
   );
 }
 main();

websites/default/scripts/options.js

@@ -46,6 +46,14 @@
  * @property {string} title
  * @property {string[]} path
  *
+ * @typedef {Object} PartialExplorerOptionSpecific
+ * @property {"explorer"} kind
+ * @property {string} title
+ *
+ * @typedef {PartialOption & PartialExplorerOptionSpecific} PartialExplorerOption
+ *
+ * @typedef {Required<PartialExplorerOption> & ProcessedOptionAddons} ExplorerOption
+ *
  * @typedef {Object} PartialChartOptionSpecific
  * @property {"chart"} [kind]
  * @property {string} title
@@ -85,9 +93,9 @@
  *
  * @typedef {Required<PartialUrlOption> & ProcessedOptionAddons} UrlOption
  *
- * @typedef {PartialChartOption | PartialTableOption | PartialSimulationOption | PartialUrlOption} AnyPartialOption
+ * @typedef {PartialExplorerOption | PartialChartOption | PartialTableOption | PartialSimulationOption | PartialUrlOption} AnyPartialOption
  *
- * @typedef {ChartOption | TableOption | SimulationOption | UrlOption} Option
+ * @typedef {ExplorerOption | ChartOption | TableOption | SimulationOption | UrlOption} Option
  *
  * @typedef {Object} PartialOptionsGroup
  * @property {string} name
@@ -105,10 +113,12 @@
  */
 
 /**
- * @param {Colors} colors
+ * @param {Object} args
+ * @param {Env} args.env
+ * @param {Colors} args.colors
  * @returns {PartialOptionsTree}
  */
-function createPartialOptions(colors) {
+function createPartialOptions({ env, colors }) {
   /**
    * @template {string} S
    * @typedef {Extract<VecId, `${S}${string}`>} StartsWith
@@ -1505,7 +1515,7 @@ function createPartialOptions(colors) {
                       key: `${fixKey(key)}realized_price`,
                       name,
                       color,
-                    })
+                    }),
                   ),
                 }
               : createPriceWithRatio({
@@ -1551,7 +1561,7 @@ function createPartialOptions(colors) {
                       }),
                       createBaseSeries({
                         key: `cumulative_${fixKey(
-                          args.key
+                          args.key,
                         )}negative_realized_loss`,
                         name: "Cumulative Negative Loss",
                         color: colors.red,
@@ -1560,7 +1570,7 @@ function createPartialOptions(colors) {
                       /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                         type: "Baseline",
                         key: `${fixKey(
-                          args.key
+                          args.key,
                         )}realized_profit_relative_to_realized_cap`,
                         title: "Profit",
                         color: colors.green,
@@ -1573,7 +1583,7 @@ function createPartialOptions(colors) {
                       /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                         type: "Baseline",
                         key: `${fixKey(
-                          args.key
+                          args.key,
                         )}realized_loss_relative_to_realized_cap`,
                         title: "Loss",
                         color: colors.red,
@@ -1602,7 +1612,7 @@ function createPartialOptions(colors) {
                       /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                         type: "Baseline",
                         key: `cumulative_${fixKey(
-                          key
+                          key,
                         )}net_realized_profit_and_loss`,
                         title: "Cumulative net",
                         defaultActive: false,
@@ -1615,7 +1625,7 @@ function createPartialOptions(colors) {
                       /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                         type: "Baseline",
                         key: `cumulative_${fixKey(
-                          key
+                          key,
                         )}net_realized_profit_and_loss_30d_change`,
                         title: "cum net 30d change",
                         defaultActive: false,
@@ -1628,7 +1638,7 @@ function createPartialOptions(colors) {
                       /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                         type: "Baseline",
                         key: `${fixKey(
-                          key
+                          key,
                         )}net_realized_profit_and_loss_relative_to_realized_cap`,
                         title: "Net",
                         options: {
@@ -1640,7 +1650,7 @@ function createPartialOptions(colors) {
                       /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                         type: "Baseline",
                         key: `cumulative_${fixKey(
-                          key
+                          key,
                         )}net_realized_profit_and_loss_30d_change_relative_to_realized_cap`,
                         title: "cum net 30d change",
                         options: {
@@ -1652,7 +1662,7 @@ function createPartialOptions(colors) {
                       /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                         type: "Baseline",
                         key: `cumulative_${fixKey(
-                          key
+                          key,
                         )}net_realized_profit_and_loss_30d_change_relative_to_market_cap`,
                         title: "cum net 30d change",
                         options: {
@@ -1760,7 +1770,7 @@ function createPartialOptions(colors) {
                       /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                         type: "Baseline",
                         key: `${fixKey(
-                          key
+                          key,
                         )}net_realized_profit_and_loss_relative_to_realized_cap`,
                         title: name,
                         color,
@@ -1810,7 +1820,7 @@ function createPartialOptions(colors) {
                           /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                             type: "Baseline",
                             key: `cumulative_${fixKey(
-                              key
+                              key,
                             )}net_realized_profit_and_loss`,
                             title: name,
                             color,
@@ -1830,7 +1840,7 @@ function createPartialOptions(colors) {
                           /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                             type: "Baseline",
                             key: `cumulative_${fixKey(
-                              key
+                              key,
                             )}net_realized_profit_and_loss_30d_change`,
                             title: name,
                             color,
@@ -1843,7 +1853,7 @@ function createPartialOptions(colors) {
                           /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                             type: "Baseline",
                             key: `cumulative_${fixKey(
-                              key
+                              key,
                             )}net_realized_profit_and_loss_30d_change_relative_to_realized_cap`,
                             title: name,
                             color,
@@ -1856,7 +1866,7 @@ function createPartialOptions(colors) {
                           /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                             type: "Baseline",
                             key: `cumulative_${fixKey(
-                              key
+                              key,
                             )}net_realized_profit_and_loss_30d_change_relative_to_market_cap`,
                             title: name,
                             color,
@@ -1897,7 +1907,7 @@ function createPartialOptions(colors) {
                           /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                             type: "Baseline",
                             key: `${fixKey(
-                              key
+                              key,
                             )}adjusted_spent_output_profit_ratio`,
                             title: name,
                             color,
@@ -1920,7 +1930,7 @@ function createPartialOptions(colors) {
                   key: `${fixKey(key)}sell_side_risk_ratio`,
                   name: useGroupName ? name : "Risk",
                   color: color,
-                })
+                }),
               ),
             },
           ],
@@ -2009,7 +2019,7 @@ function createPartialOptions(colors) {
                 /** @satisfies {FetchedBaselineSeriesBlueprint} */ ({
                   type: "Baseline",
                   key: `${fixKey(
-                    key
+                    key,
                   )}net_unrealized_profit_and_loss_relative_to_market_cap`,
                   title: useGroupName ? name : "Net",
                   color: useGroupName ? color : undefined,
@@ -2134,6 +2144,15 @@ function createPartialOptions(colors) {
   }
 
   return [
+    ...(env.localhost
+      ? /** @type {const} */ ([
+          {
+            name: "Explorer",
+            title: "Explorer",
+            kind: "explorer",
+          },
+        ])
+      : []),
     {
       name: "Charts",
       tree: [
@@ -2199,7 +2218,7 @@ function createPartialOptions(colors) {
                       key: `${key}_sma`,
                       name: key,
                       color,
-                    })
+                    }),
                   ),
                 },
                 ...averages.map(({ key, name, color }) =>
@@ -2209,7 +2228,7 @@ function createPartialOptions(colors) {
                     title: `${name} Market Price Moving Average`,
                     legend: "average",
                     color,
-                  })
+                  }),
                 ),
               ],
             },
@@ -2326,7 +2345,7 @@ function createPartialOptions(colors) {
                           },
                         }),
                       ],
-                    })
+                    }),
                 ),
                 .../** @type {const} */ ([
                   { name: "2 Year", key: "2y" },
@@ -2397,7 +2416,7 @@ function createPartialOptions(colors) {
                           },
                         }),
                       ],
-                    })
+                    }),
                 ),
               ],
             },
@@ -2413,7 +2432,7 @@ function createPartialOptions(colors) {
                       name: `${year}`,
                       color,
                       defaultActive,
-                    })
+                    }),
                   ),
                 },
                 ...dcaClasses.map(
@@ -2440,7 +2459,7 @@ function createPartialOptions(colors) {
                           },
                         }),
                       ],
-                    })
+                    }),
                 ),
               ],
             },
@@ -2501,10 +2520,10 @@ function createPartialOptions(colors) {
               bottom: [
                 ...createAverageSumCumulativeMinMaxPercentilesSeries("fee"),
                 ...createAverageSumCumulativeMinMaxPercentilesSeries(
-                  "fee_in_btc"
+                  "fee_in_btc",
                 ),
                 ...createAverageSumCumulativeMinMaxPercentilesSeries(
-                  "fee_in_usd"
+                  "fee_in_usd",
                 ),
               ],
             },
@@ -3227,7 +3246,7 @@ function createPartialOptions(colors) {
                       name,
                       color,
                     }),
-                  ])
+                  ]),
               ),
             },
             {
@@ -3252,7 +3271,7 @@ function createPartialOptions(colors) {
                         key,
                         name,
                         color,
-                      })
+                      }),
                     ),
                   ],
                 },
@@ -3277,7 +3296,7 @@ function createPartialOptions(colors) {
                         color: colors.orange,
                       }),
                     ],
-                  })
+                  }),
                 ),
               ],
             },
@@ -3292,7 +3311,7 @@ function createPartialOptions(colors) {
                       key,
                       name,
                       color,
-                    })
+                    }),
                   ),
                 },
                 ...cointimePrices.map(({ key, name, color, title }) =>
@@ -3302,7 +3321,7 @@ function createPartialOptions(colors) {
                     color,
                     name,
                     title,
-                  })
+                  }),
                 ),
               ],
             },
@@ -3436,7 +3455,7 @@ export function initOptions({ colors, signals, env, utils, qrcode }) {
   /** @type {Signal<Option>} */
   const selected = signals.createSignal(/** @type {any} */ (undefined));
 
-  const partialOptions = createPartialOptions(colors);
+  const partialOptions = createPartialOptions({ env, colors });
 
   /** @type {Option[]} */
   const list = [];
@@ -3445,7 +3464,7 @@ export function initOptions({ colors, signals, env, utils, qrcode }) {
   const detailsList = [];
 
   const treeElement = signals.createSignal(
-    /** @type {HTMLDivElement | null} */ (null)
+    /** @type {HTMLDivElement | null} */ (null),
   );
 
   /** @type {string[] | undefined} */
@@ -3557,7 +3576,7 @@ export function initOptions({ colors, signals, env, utils, qrcode }) {
           return null;
         }
       },
-      null
+      null,
     );
 
     partialTree.forEach((anyPartial, partialIndex) => {
@@ -3580,7 +3599,7 @@ export function initOptions({ colors, signals, env, utils, qrcode }) {
 
       if ("tree" in anyPartial) {
         const folderId = utils.stringToId(
-          `${(path || []).join(" ")} ${anyPartial.name} folder`
+          `${(path || []).join(" ")} ${anyPartial.name} folder`,
         );
 
         /** @type {Omit<OptionsGroup, keyof PartialOptionsGroup>} */
@@ -3595,13 +3614,13 @@ export function initOptions({ colors, signals, env, utils, qrcode }) {
         const thisPath = groupAddons.id;
 
         const passedDetails = signals.createSignal(
-          /** @type {HTMLDivElement | HTMLDetailsElement | null} */ (null)
+          /** @type {HTMLDivElement | HTMLDetailsElement | null} */ (null),
         );
 
         const childOptionsCount = recursiveProcessPartialTree(
           anyPartial.tree,
           passedDetails,
-          [...(path || []), thisPath]
+          [...(path || []), thisPath],
         );
 
         listForSum.push(childOptionsCount);
@@ -3657,7 +3676,15 @@ export function initOptions({ colors, signals, env, utils, qrcode }) {
         /** @type {Option} */
         let option;
 
-        if ("kind" in anyPartial && anyPartial.kind === "table") {
+        if ("kind" in anyPartial && anyPartial.kind === "explorer") {
+          option = /** @satisfies {ExplorerOption} */ ({
+            kind: anyPartial.kind,
+            id: anyPartial.kind,
+            name: anyPartial.name,
+            path: path || [],
+            title: anyPartial.title,
+          });
+        } else if ("kind" in anyPartial && anyPartial.kind === "table") {
           option = /** @satisfies {TableOption} */ ({
             kind: anyPartial.kind,
             id: anyPartial.kind,
@@ -3733,14 +3760,17 @@ export function initOptions({ colors, signals, env, utils, qrcode }) {
     });
 
     return signals.createMemo(() =>
-      listForSum.reduce((acc, s) => acc + s(), 0)
+      listForSum.reduce((acc, s) => acc + s(), 0),
     );
   }
   recursiveProcessPartialTree(partialOptions, treeElement);
 
   function setDefaultSelectedIfNeeded() {
     if (!selected()) {
-      selected.set(list[0]);
+      const firstChartOption = list.find((option) => option.kind === "chart");
+      if (firstChartOption) {
+        selected.set(firstChartOption);
+      }
     }
   }
   setDefaultSelectedIfNeeded();
@@ -3760,7 +3790,7 @@ export function initOptions({ colors, signals, env, utils, qrcode }) {
         console.log(
           [...m.entries()]
             .filter(([_, value]) => value > 1)
-            .map(([key, _]) => key)
+            .map(([key, _]) => key),
         );
 
         throw Error("ID duplicate");